fix(docs): use correct theme for VitePress (#1517)

Relates to #764

Currently our VitePress docs uses the twogo theme which is not correct.
It should use the default onyx theme.
This is fixed in this PR. Also the Storybook theme switch now uses
dynamic imports for the theme CSS styles

apps/docs/src/development/theming.data.ts

@@ -0,0 +1,30 @@
+import { defineLoader } from "vitepress";
+
+export type Data = {
+  /**
+   * List of available onyx themes. Default theme will be sorted first.
+   */
+  themes: string[];
+};
+
+declare const data: Data;
+export { data };
+
+/**
+ * Build-Time data loader to get a list of available onyx themes.
+ * @see https://vitepress.dev/guide/data-loading
+ */
+export default defineLoader({
+  watch: ["../../../../packages/sit-onyx/src/styles/themes/*.css"],
+  load(watchedFiles): Data {
+    return {
+      themes: watchedFiles
+        .map((filePath) => filePath.split("/").at(-1)!.replace(".css", ""))
+        .sort((a, b) => {
+          if (a === "onyx") return -1;
+          if (b === "onyx") return 1;
+          return a.localeCompare(b);
+        }),
+    };
+  },
+});

apps/docs/src/development/theming.md

@@ -1,7 +1,7 @@
 # Theming
 
 <script setup lang="ts">
-import { ONYX_THEMES } from "~components/../../.storybook/theme-switch";
+import { data } from './theming.data';
 </script>
 
 Onyx supports a dark and a light theme as well as multiple built-in color themes. The options how to set up the theme for your application are described on this page.
@@ -13,7 +13,7 @@ To learn more about the theming concept of onyx, take a look at our [colors docu
 The following color themes are built-in to onyx:
 
 <ul>
-  <li v-for="(theme, index) in ONYX_THEMES" :key="theme">
+  <li v-for="(theme, index) in data.themes" :key="theme">
     {{ theme }}
     <span v-if="index === 0">(default)</span>
   </li>

packages/sit-onyx/.storybook/theme-switch.ts

@@ -1,15 +1,24 @@
-import { StorybookGlobalType } from "@sit-onyx/storybook-utils";
+import type { StorybookGlobalType } from "@sit-onyx/storybook-utils";
 import type { Decorator } from "@storybook/vue3";
 import { ref, watch, watchEffect } from "vue";
 
-const themes = import.meta.glob("../src/styles/themes//*.css", { eager: true });
-export const ONYX_THEMES = Object.keys(themes)
-  .map((filePath) => filePath.split("/").at(-1)!.replace(".css", ""))
-  .sort((a, b) => {
-    if (a === "onyx") return -1;
-    if (b === "onyx") return 1;
+const themes = import.meta.glob("../src/styles/themes/*.css");
+
+/**
+ * Map of all available onyx themes. Default theme will be sorted first.
+ * key = theme name, value = async function to dynamically import the CSS variables
+ */
+export const ONYX_THEMES = Object.entries(themes)
+  .sort(([a], [b]) => {
+    if (a.endsWith("onyx.css")) return -1;
+    if (b.endsWith("onyx.css")) return 1;
     return a.localeCompare(b);
-  });
+  })
+  .reduce<typeof themes>((obj, [filePath, importFn]) => {
+    const themeName = filePath.split("/").at(-1)!.replace(".css", "");
+    obj[themeName] = importFn;
+    return obj;
+  }, {});
 
 export const onyxThemeGlobalType = {
   onyxTheme: {
@@ -18,7 +27,7 @@ export const onyxThemeGlobalType = {
     toolbar: {
       title: "Theme",
       icon: "paintbrush",
-      items: ONYX_THEMES.map((theme, index) => ({
+      items: Object.keys(ONYX_THEMES).map((theme, index) => ({
         value: theme,
         title: theme,
         right: index === 0 ? "default" : undefined,
@@ -30,9 +39,10 @@ export const onyxThemeGlobalType = {
 const currentOnyxTheme = ref<string>();
 
 export const withOnyxTheme: Decorator = (Story, context) => {
-  watchEffect(() => {
+  watchEffect(async () => {
     const theme = context.globals.onyxTheme ?? ONYX_THEMES[0];
     currentOnyxTheme.value = theme === ONYX_THEMES[0] ? "default" : theme;
+    await ONYX_THEMES[theme]?.();
   });
 
   return {