fix: add theme provider

packages/components/.storybook/preview.ts → packages/components/.storybook/preview.tsx

@@ -1,9 +1,20 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import '@frontify/fondue-tokens/styles';
-import type { Preview } from '@storybook/react';
+import React from 'react';
+import type { Preview, Decorator } from '@storybook/react';
 import '../src/styles.scss';
 import DocumentationTemplate from './DocumentationTemplate.mdx';
+import { ThemeProvider } from '@frontify/fondue-tokens/theme';
+
+
+const ThemeProviderWrapper: Decorator = (Story: React.ComponentType) => {
+    return (
+        <ThemeProvider theme='default'>
+            <Story />
+        </ThemeProvider>
+    );
+};
 
 const preview: Preview = {
     parameters: {
@@ -51,6 +62,10 @@ const preview: Preview = {
             },
         },
     },
+    decorators: [ThemeProviderWrapper],
 };
 
+
+
+
 export default preview;

packages/tokens/package.json

@@ -24,14 +24,19 @@
         "./tokens": "./dist/js/tokens.json",
         "./tailwind": "./dist/tailwind/tailwind.config.js",
         "./styles": "./dist/css/all.css",
+        "./theme": {
+            "types": "./dist/theme/fondue-theme.es.d.ts",
+            "import": "./dist/theme/fondue-theme.es.js"
+        },
         "./themes/*": "./dist/css/*"
     },
     "files": [
         "dist"
     ],
     "scripts": {
         "clean": "rimraf dist",
-        "build": "pnpm clean && tsx src/build.ts",
+        "build:vite": "vite build",
+        "build": "pnpm clean && tsx src/build.ts && vite build",
         "build:debug": "pnpm clean && tsx src/build.ts --debug && pnpm build:tailwind:debug",
         "build:tailwind:debug": "tailwind -c ./dist/tailwind/tailwind.config.js -o ./dist/css/tailwind_unpurged.css",
         "lint": "eslint .",
@@ -48,16 +53,23 @@
         "@frontify/eslint-config-basic": "^0.20.6",
         "@types/chroma-js": "^2.4.5",
         "@types/node": "^22.10.10",
+        "@types/react": "^18.3.18",
+        "@types/react-dom": "^18.3.5",
+        "@vitejs/plugin-react": "^4.3.4",
         "chalk": "^5.4.1",
         "chroma-js": "^2.6.0",
         "eslint": "^8.57.1",
         "eslint-plugin-notice": "^1.0.0",
         "nodemon": "^3.1.9",
         "prettier": "^3.4.2",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
         "rimraf": "^6.0.1",
         "style-dictionary": "^3.9.2",
-        "tailwindcss": "^3.4.17",
         "tsx": "^4.19.2",
-        "typescript": "^5.7.3"
+        "typescript": "^5.7.3",
+        "vite": "^5.4.14",
+        "vite-plugin-css-injected-by-js": "^3.3.0",
+        "vite-plugin-dts": "^4.5.0"
     }
 }

packages/tokens/src/build.ts

@@ -6,6 +6,7 @@ import StyleDictionary from 'style-dictionary';
 
 import { figmaFormatter } from './formatters/figma';
 import { tailwindFormatter } from './formatters/tailwind';
+import { createCssModule } from './utils/createCssModule';
 import { mergeFigmaFiles } from './utils/mergeFigmaFiles';
 import { transformColor } from './utils/transformColor';
 import { trimHyphens } from './utils/trimHyphens';
@@ -79,6 +80,29 @@ StyleDictionary.registerTransformGroup({
  * FORMATS
  */
 
+StyleDictionary.registerFormat({
+    name: 'css/variables',
+    formatter({ dictionary, options = {} }) {
+        const { selector, selectorFormat } = options;
+
+        if (selectorFormat === 'independent' && Array.isArray(selector)) {
+            return selector
+                .map(
+                    (sel) => `
+${sel} {
+    ${dictionary.allProperties.map((prop) => `--${prop.name}: ${prop.value};`).join('\n    ')}
+}`,
+                )
+                .join('\n\n');
+        }
+
+        // Original formatter logic for single selector...
+        return `${options.selector || ':root'} {
+    ${dictionary.allProperties.map((prop) => `--${prop.name}: ${prop.value};`).join('\n    ')}
+}`;
+    },
+});
+
 StyleDictionary.registerFormat({
     name: 'tailwind',
     formatter: (options) => tailwindFormatter({ ...options, debug }),
@@ -195,6 +219,23 @@ StyleDictionary.extend({
                 },
             ],
         },
+        providers: {
+            transformGroup: 'css',
+            buildPath: `${TEMPORARY_DIRECTORY}/themeProvider/themes/`,
+            files: [
+                {
+                    destination: 'default.module.css',
+                    format: 'css/variables',
+                    options: { selector: '.default' },
+                    filter: (token) => {
+                        if (!token.filePath.includes('brand')) {
+                            return token.attributes?.target !== 'figma';
+                        }
+                        return false;
+                    },
+                },
+            ],
+        },
     },
 }).buildAllPlatforms();
 
@@ -249,8 +290,24 @@ for (const theme of COLOR_THEMES) {
                     },
                 ],
             },
+            providers: {
+                transformGroup: 'css',
+                buildPath: `${TEMPORARY_DIRECTORY}/themeProvider/themes/`,
+                files: [
+                    {
+                        destination: `${theme}.module.css`,
+                        format: 'css/variables',
+                        options: {
+                            selector: `.${theme}`,
+                            appendFile: true, // New option to append instead of overwrite
+                        },
+                        filter: (token) => token.filePath.includes(`.${theme}.ts`),
+                    },
+                ],
+            },
         },
     }).buildAllPlatforms();
 }
 
 mergeFigmaFiles();
+createCssModule();

packages/tokens/src/components/ThemeProvider/ThemeProvider.tsx

@@ -0,0 +1,15 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import React from 'react';
+
+import styles from './generated/themes.module.css';
+
+export const ThemeProvider = ({
+    children,
+    theme = 'default',
+}: {
+    children: React.ReactNode;
+    theme: keyof typeof styles;
+}) => {
+    return <div className={styles[theme]}>{children}</div>;
+};