simplify generation

Frontify · Jan 31, 2025 · ae406be · ae406be
1 parent fbfb5a1
commit ae406be
Show file tree

Hide file tree

Showing 10 changed files with 414 additions and 41 deletions.
diff --git a/packages/components/.storybook/preview.ts → packages/components/.storybook/preview.tsx b/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;
diff --git a/packages/components/src/components/Tabs/Tabs.stories.tsx b/packages/components/src/components/Tabs/Tabs.stories.tsx
@@ -1,6 +1,7 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { IconIcon } from '@frontify/fondue-icons';
+import { ThemeProvider } from '@frontify/fondue-tokens/theme';
 import { action } from '@storybook/addon-actions';
 import { type Meta, type StoryObj } from '@storybook/react';
 import { useState } from 'react';

diff --git a/packages/tokens/src/build.ts b/packages/tokens/src/build.ts
@@ -6,7 +6,7 @@ import StyleDictionary from 'style-dictionary';
 
 import { figmaFormatter } from './formatters/figma';
 import { tailwindFormatter } from './formatters/tailwind';
-import { createProvider } from './utils/createProvider/createProvider';
+import { createCssModule } from './utils/createCssModule';
 import { mergeFigmaFiles } from './utils/mergeFigmaFiles';
 import { transformColor } from './utils/transformColor';
 import { trimHyphens } from './utils/trimHyphens';
@@ -221,12 +221,12 @@ StyleDictionary.extend({
         },
         providers: {
             transformGroup: 'css',
-            buildPath: `${TEMPORARY_DIRECTORY}/providers/themes/`,
+            buildPath: `${TEMPORARY_DIRECTORY}/themeProvider/themes/`,
             files: [
                 {
                     destination: 'default.module.css',
                     format: 'css/variables',
-                    options: { selector: '.root' },
+                    options: { selector: '.default' },
                     filter: (token) => {
                         if (!token.filePath.includes('brand')) {
                             return token.attributes?.target !== 'figma';
@@ -292,7 +292,7 @@ for (const theme of COLOR_THEMES) {
             },
             providers: {
                 transformGroup: 'css',
-                buildPath: `${TEMPORARY_DIRECTORY}/providers/themes/`,
+                buildPath: `${TEMPORARY_DIRECTORY}/themeProvider/themes/`,
                 files: [
                     {
                         destination: `${theme}.module.css`,
@@ -310,4 +310,4 @@ for (const theme of COLOR_THEMES) {
 }
 
 mergeFigmaFiles();
-createProvider();
+createCssModule();
diff --git a/packages/tokens/src/components/ThemeProvider/ThemeProvider.tsx b/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>;
+};