handle light & dark Mode && Storybook themes

.github/workflows/import-figma.yml

@@ -25,14 +25,23 @@ jobs:
         working-directory: packages/figma-utils
 
       # we need to separately import the themes because they are all needed in different formats and selectors
-      - name: 🎨 Import onyx variables
+      - name: 🎨 Import onyx light variables
         run: |
-          pnpm run @sit-onyx/figma-utils import-variables -k "${{ vars.FIGMA_FILE_KEY }}" -t "${{ secrets.FIGMA_TOKEN }}" -d "../sit-onyx/src/styles/variables/themes" -m Value onyx-light onyx-dark -f CSS -s ":where(:root), .onyx-theme-default"
+          pnpm run @sit-onyx/figma-utils import-variables -k "${{ vars.FIGMA_FILE_KEY }}" -t "${{ secrets.FIGMA_TOKEN }}" -d "../sit-onyx/src/styles/variables/themes" -m Value onyx-light -f CSS -s ":where(:root), .onyx-theme-default"
+        working-directory: packages/figma-utils
+      - name: 🎨 Import onyx dark variables
+        run: |
+          pnpm run @sit-onyx/figma-utils import-variables -k "${{ vars.FIGMA_FILE_KEY }}" -t "${{ secrets.FIGMA_TOKEN }}" -d "../sit-onyx/src/styles/variables/themes" -m Value onyx-dark -f CSS -s ":where(.dark), .onyx-theme-default-dark"
+        working-directory: packages/figma-utils
+
+      - name: 🎨 Import additional onyx light-themes
+        run: |
+          pnpm run @sit-onyx/figma-utils import-variables -k "${{ vars.FIGMA_FILE_KEY }}" -t "${{ secrets.FIGMA_TOKEN }}" -d "../sit-onyx/src/styles/variables/themes" -m lidl-light  kaufland-light digits-light  -f CSS -s ":where(:root), .onyx-theme-{mode}"
         working-directory: packages/figma-utils
 
-      - name: 🎨 Import additional onyx themes
+      - name: 🎨 Import additional onyx dark-themes
         run: |
-          pnpm run @sit-onyx/figma-utils import-variables -k "${{ vars.FIGMA_FILE_KEY }}" -t "${{ secrets.FIGMA_TOKEN }}" -d "../sit-onyx/src/styles/variables/themes" -m lidl-light lidl-dark kaufland-light kaufland-dark digits-light digits-dark -f CSS -s ":where(:root), .onyx-theme-{mode}"
+          pnpm run @sit-onyx/figma-utils import-variables -k "${{ vars.FIGMA_FILE_KEY }}" -t "${{ secrets.FIGMA_TOKEN }}" -d "../sit-onyx/src/styles/variables/themes" -m  lidl-dark  kaufland-dark  digits-dark -f CSS -s ":where(.dark), .onyx-theme-{mode}"
         working-directory: packages/figma-utils
 
       - name: 🛠️ Import spacing variables

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

@@ -2,20 +2,26 @@ 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/variables/themes/*.css");
+const allThemes = import.meta.glob("../src/styles/variables/themes/*.css");
+/**
+ * Removes alles dark-themes from the listing
+ */
+const themes = Object.fromEntries(
+  Object.entries(allThemes).filter(([key]) => !key.includes("dark") && !key.includes("Value")),
+);
 
 /**
  * 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;
+    if (a.endsWith("onyx-light.css")) return -1;
+    if (b.endsWith("onyx-light.css")) return 1;
     return a.localeCompare(b);
   })
   .reduce<typeof themes>((obj, [filePath, importFn]) => {
-    const themeName = filePath.split("/").at(-1)!.replace(".css", "");
+    const themeName = filePath.split("/").at(-1)!.replace("-light.css", "");
     obj[themeName] = importFn;
     return obj;
   }, {});

packages/sit-onyx/src/components/OnyxTag/OnyxTag.vue

@@ -4,7 +4,7 @@ import OnyxIcon from "../OnyxIcon/OnyxIcon.vue";
 import type { OnyxTagProps } from "./types";
 
 const props = withDefaults(defineProps<OnyxTagProps>(), {
-  color: "default",
+  color: "primary",
 });
 
 const { densityClass } = useDensity(props);

packages/sit-onyx/src/styles/index.scss

@@ -10,8 +10,8 @@
 
 @use "variables/themes/Value.css";
 
-@use "variables/themes/onyx-dark.css";
 @use "variables/themes/onyx-light.css";
+@use "variables/themes/onyx-dark.css";
 
 @use "variables/density-compact.css";
 @use "variables/density-default.css";