refactor: generating of css via style dictionary

Author: nmerget

package-lock.json

@@ -19,9 +19,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@bundled-es-modules/memfs": "^4.9.4",
     "@craftjs/core": "^0.2.11",
-    "@db-ux/react-core-components": "1.0.0",
     "@db-ux/db-theme": "1.0.2",
+    "@db-ux/react-core-components": "1.0.0",
     "@redux-devtools/extension": "^3.3.0",
     "@tiptap/extension-color": "^2.11.5",
     "@tiptap/extension-text-style": "^2.10.3",
@@ -48,6 +49,7 @@
     "react-dom": "^18.3.1",
     "react-i18next": "15.4.0",
     "react-router-dom": "7.1.5",
+    "style-dictionary": "^4.3.3",
     "traverse": "^0.6.10",
     "zustand": "^5.0.3"
   },
@@ -69,10 +71,10 @@
     "ncp": "^2.0.0",
     "npm-run-all2": "^7.0.2",
     "postcss": "^8.5.1",
+    "purgecss": "7.0.2",
     "sass": "^1.85.0",
     "tailwindcss": "^3.4.17",
     "typescript": "^5.7.3",
-    "purgecss": "7.0.2",
     "vite": "^6.1.0"
   }
 }

package.json

@@ -4,10 +4,12 @@ import { useThemeBuilderStore } from "./store";
 import { useEffect } from "react";
 import { DefaultColorType } from "./utils/data.ts";
 import {
-  getNonColorCssProperties,
-  getPaletteOutput,
-  getSpeakingNames,
-} from "./utils/outputs/web";
+  getSDColorPalette,
+  getSDSpeakingColors,
+} from "./utils/outputs/style-dictionary/colors.ts";
+import { mergeObjectsRecursive } from "./utils";
+import { runStyleDictionary } from "./utils/outputs/style-dictionary";
+import { appConfig } from "./utils/outputs/style-dictionary/config";
 
 const App = () => {
   const { speakingNames, luminanceSteps, theme } = useThemeBuilderStore(
@@ -21,20 +23,23 @@ const App = () => {
       ...theme.customColors,
     };
 
-    const cssProps: any = {
-      ...getPaletteOutput(allColors, luminanceSteps),
-      ...getSpeakingNames(speakingNames, allColors),
-      ...getNonColorCssProperties(theme),
+    const sdColorPalette = getSDColorPalette(allColors, luminanceSteps);
+    const sdSpeakingColors = getSDSpeakingColors(speakingNames, allColors);
+
+    const finalTheme = {
+      ...theme,
+      ...mergeObjectsRecursive(sdColorPalette, sdSpeakingColors),
     };
 
-    const pages = document.getElementsByTagName("html");
-    Array.from(pages).forEach((page: Element) => {
-      page.setAttribute(
-        "style",
-        Object.entries(cssProps)
-          .map((value) => `${value[0]}:${value[1]};`)
-          .join(" "),
-      );
+    runStyleDictionary({
+      tokens: finalTheme,
+      ...appConfig,
+    }).then((result) => {
+      const page = document.querySelector("html");
+      const overwrites = result["/overwrites"];
+      if (page && overwrites) {
+        page.setAttribute("style", overwrites);
+      }
     });
   }, [speakingNames, theme, luminanceSteps]);
 

src/App.tsx

@@ -1,22 +1,22 @@
-import DefaultTheme from "../../../../data/default-theme.json";
 import traverse from "traverse";
+import { defaultTheme } from "../../../../store/themes.ts";
 
 export type ShirtSelectionType = {
   label: string;
   params: string[];
 };
 
-const theme = traverse(DefaultTheme);
+const theme = traverse(defaultTheme);
 
 export const getShirtValue = (
   scaleString: string,
   path: string[],
 ): string | number | undefined => {
-  if (path.at(-1) === "_scale") {
+  if (path.at(-2) === "_scale") {
     return scaleString;
   }
 
-  let scale = 1;
+  let scale: number;
 
   if (scaleString === "none") {
     scale = 0;
@@ -30,30 +30,6 @@ export const getShirtValue = (
     return undefined;
   }
 
-  if (path[0] === "elevation") {
-    if (path.at(-1) === "sm") {
-      return (
-        `0 0 ${scale}px -${scale}px rgba(0, 0, 0, 0.2),` +
-        `0 0 ${4 * scale}px ${scale}px rgba(0, 0, 0, 0.12),` +
-        `0 0 ${2 * scale}px 0 rgba(0, 0, 0, 0.14)`
-      );
-    }
-    if (path.at(-1) === "md") {
-      return (
-        `0 0 ${2 * scale}px -${scale}px rgba(0, 0, 0, 0.2),` +
-        `0 0 ${8 * scale}px ${scale}px rgba(0, 0, 0, 0.12),` +
-        `0 0 ${4 * scale}px 0 rgba(0, 0, 0, 0.14)`
-      );
-    }
-    if (path.at(-1) === "lg") {
-      return (
-        `0 0 ${4 * scale}px -${3 * scale}px rgba(0, 0, 0, 0.2),` +
-        `0 0 ${16 * scale}px ${3 * scale}px rgba(0, 0, 0, 0.12),` +
-        `0 0 ${8 * scale}px ${scale}px rgba(0, 0, 0, 0.14)`
-      );
-    }
-  }
-
   if (path.length < 2) {
     return undefined;
   }

src/components/Customization/Settings/Scaling/data.ts

@@ -7,9 +7,9 @@ import traverse from "traverse";
 const getFromJsonByArray = (params: string[], json: any): any => {
   try {
     let currentObject = json;
-    params.forEach((param) => {
+    for (const param of params) {
       currentObject = currentObject[param];
-    });
+    }
 
     return currentObject;
   } catch (error) {
@@ -29,7 +29,8 @@ const Scaling = ({ label, params }: ShirtSelectionType) => {
       if (
         this.isLeaf &&
         this.path.length > 0 &&
-        path.every((value, index) => value === this.path[index])
+        path.every((value, index) => value === this.path[index]) &&
+        this.path.at(-1) === "value"
       ) {
         this.update(getShirtValue(scale, this.path) || value);
       }
@@ -46,7 +47,7 @@ const Scaling = ({ label, params }: ShirtSelectionType) => {
       <DBSelect
         label={`${t(label)} ${t("scale")}`}
         variant="floating"
-        value={getFromJsonByArray([...params, "_scale"], theme)}
+        value={getFromJsonByArray([...params, "_scale", "value"], theme)}
         onChange={(event) => {
           setDetfaultTheme(event.target.value);
         }}
@@ -75,7 +76,7 @@ const Scaling = ({ label, params }: ShirtSelectionType) => {
             <option>120%</option>
           </>
         )}
-        {(params.includes("elevation") || params.includes("radius")) && (
+        {params.includes("radius") && (
           <>
             <option>none</option>
             <option>50%</option>

src/components/Customization/Settings/Scaling/scaling.tsx

@@ -1,4 +1,9 @@
-import { DBCard, DBIcon, DBSection, DBTooltip } from "@db-ux/react-core-components";
+import {
+  DBCard,
+  DBIcon,
+  DBSection,
+  DBTooltip,
+} from "@db-ux/react-core-components";
 import { useThemeBuilderStore } from "../../../store";
 import { Link } from "react-router-dom";
 import Demo from "../../../pages/Demo";
@@ -10,14 +15,8 @@ import {
   ThemeType,
   speakingNamesDefaultMapping,
 } from "../../../utils/data.ts";
-import DefaultTheme from "../../../data/default-theme.json";
-import DBTheme from "../../../data/db-theme.json";
-import SBahnTheme from "../../../data/sbahn-theme.json";
 import { getThemeImage } from "../../../utils";
-
-const defaultTheme = DefaultTheme as unknown as ThemeType;
-const sBahnTheme = SBahnTheme as unknown as ThemeType;
-const dbTheme = DBTheme as unknown as ThemeType;
+import { dbTheme, defaultTheme, sBahnTheme } from "../../../store/themes.ts";
 
 const themes: Record<string, ThemeType> = {
   neutralTheme: defaultTheme,