Refactor theme tokens to use SCSS and TypeScript

.storybook/preview.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import type { Preview } from "@storybook/react-vite";
-import "../src/styles/variables.css";
 import { Decorator } from "@storybook/react-vite";
 import styled from "styled-components";
 import { themes } from "storybook/theming";

build-tokens.js

@@ -1,137 +1,14 @@
-import _ from "lodash";
-import { registerTransforms, transforms } from "@tokens-studio/sd-transforms";
-import StyleDictionary from "style-dictionary";
+import StyleDictionary, { getStyleDictionaryConfig } from "./style-dictionary.config.js";
 
-registerTransforms(StyleDictionary);
-const themes = ["dark", "light"];
+const config = await getStyleDictionaryConfig();
+const { themes, configs } = config;
 
-function generateThemeFromDictionary(dictionary, valueFunc = (value) => value) {
-  const theme = {};
-  dictionary.allTokens.forEach((token) => {
-    _.setWith(theme, token.name, valueFunc(token.value), Object)
-  });
-  return theme;
-}
-
-StyleDictionary.registerTransform({
-  type: "name",
-  name: "name/cti/dot",
-  transformer: (token, options) => {
-    if (options.prefix && options.prefix.length) {
-      return [options.prefix].concat(token.path).join(".");
-    } else {
-      return token.path.join(".");
-    }
-  }
-});
-
-StyleDictionary.registerFormat({
-  name: "ThemeFormat",
-  formatter: function ({ dictionary, platform, options, file }) {
-    const theme = generateThemeFromDictionary(dictionary);
-    return JSON.stringify(theme, null, 2);
-  }
-});
-
-StyleDictionary.registerFormat({
-  name: "TypescriptFormat",
-  formatter: function ({ dictionary, platform, options, file }) {
-    const theme = generateThemeFromDictionary(dictionary, (value) => typeof value);
-
-    // Convert the theme object to a TypeScript interface string
-    // Prettier will format this automatically via the generate-tokens script
-    let jsonString = JSON.stringify(theme, null, 2);
+const scssSD = new StyleDictionary(configs.scss);
+await scssSD.cleanAllPlatforms();
+await scssSD.buildAllPlatforms();
 
-    // Replace type strings with TypeScript types
-    jsonString = jsonString.replaceAll('"string"', 'string');
-    jsonString = jsonString.replaceAll('"number"', 'number');
-
-    return `export interface Theme ${jsonString}\n`;
-  }
-});
-
-StyleDictionary.extend({
-  source: [`./tokens/**/!(${themes.join("|*.")}).json`],
-  platforms: {
-    css: {
-      transforms: [...transforms, "name/cti/kebab"],
-      buildPath: "build/css/",
-      files: [
-        {
-          destination: "variables.css",
-          format: "css/variables",
-          options: {
-            outputReferences: true,
-          },
-        },
-      ],
-    },
-    js: {
-      transforms: [...transforms, "name/cti/dot"],
-      buildPath: "src/theme/tokens/",
-      files: [
-        {
-          destination: "variables.json",
-          format: "ThemeFormat",
-          options: {
-            outputReferences: true,
-          },
-        },
-      ],
-    },
-    ts: {
-      transforms: [...transforms, "name/cti/dot"],
-      buildPath: "src/theme/tokens/",
-      files: [
-        {
-          destination: "types.ts",
-          format: "TypescriptFormat",
-          options: {
-            outputReferences: true,
-          },
-        },
-      ],
-    },
-  },
-})
-  .cleanAllPlatforms()
-  .buildAllPlatforms();
-
-themes.forEach(theme =>
-  StyleDictionary.extend({
-    include: [`./tokens/**/!(${themes.join("|*.")}).json`],
-    source: [`./tokens/**/${theme}.json`],
-    platforms: {
-      css: {
-        transforms: [...transforms, "name/cti/kebab"],
-        buildPath: "build/css/",
-        files: [
-          {
-            destination: `variables.${theme}.css`,
-            format: "css/variables",
-            filter: token => token.filePath.indexOf(`${theme}`) > -1,
-            options: {
-              outputReferences: true,
-            },
-          },
-        ],
-      },
-      js: {
-        transforms: [...transforms, "name/cti/dot"],
-        buildPath: "src/theme/tokens/",
-        files: [
-          {
-            destination: `variables.${theme}.json`,
-            format: "ThemeFormat",
-            filter: token => token.filePath.indexOf(`${theme}`) > -1,
-            options: {
-              outputReferences: true,
-            },
-          },
-        ],
-      },
-    },
-  })
-    .cleanAllPlatforms()
-    .buildAllPlatforms()
-);
+for (const theme of themes) {
+  const themeSD = new StyleDictionary(configs.theme(theme));
+  await themeSD.cleanAllPlatforms();
+  await themeSD.buildAllPlatforms();
+}

package.json

@@ -39,7 +39,7 @@
     "build:watch": "watch 'yarn build' ./src",
     "chromatic": "npx chromatic",
     "dev": "vite",
-    "generate-tokens": "node build-tokens.js && prettier --write src/theme/tokens/types.ts",
+    "generate-tokens": "node build-tokens.js && prettier --write \"src/theme/tokens/*.ts\" --config .prettierrc",
     "lint": "eslint src --report-unused-disable-directives --max-warnings 0",
     "prettify": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\" --config .prettierrc",
     "prettier:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\" --config .prettierrc",
@@ -84,7 +84,7 @@
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
-    "@tokens-studio/sd-transforms": "^0.10.3",
+    "@tokens-studio/sd-transforms": "^1.2.0",
     "@types/lodash-es": "^4.17.7",
     "@types/node": "^24.10.1",
     "@types/react": "18.3.2",
@@ -113,6 +113,7 @@
     "react-dom": "18.3.1",
     "storybook": "^10.0.7",
     "storybook-addon-pseudo-states": "^10.0.7",
+    "style-dictionary": "^5.0.0",
     "styled-components": "^6.1.11",
     "stylis": "^4.3.0",
     "ts-node": "^10.9.1",

src/App.tsx

@@ -1,8 +1,6 @@
 import { useRef, useState } from "react";
 
 import "@/styles/globals.css";
-import "./styles/variables.css";
-import "./styles/variables.dark.css";
 
 import styles from "./App.module.css";
 import { ThemeName } from "./theme";

src/components/Grid/useColumns.test.ts

@@ -125,7 +125,6 @@ describe("useColumns", () => {
         result.current.initColumnSize(300);
         result.current.onColumnResize(1, 0, "auto");
       });
-
       expect(mockQuerySelector).toHaveBeenCalledWith('[data-grid-column="1"]');
       expect(result.current.columnWidth(1)).toBe(122);
     });

src/styles/globals.css

@@ -1,4 +1,3 @@
-@import "variables.css";
 
 :root {
   --max-width: 1100px;