feat(theme-generator): replace CSS variable parsing with direct token imports for themes

Author: var-poro

packages/storybook/src/components/themeGenerator/ThemeGenerator.tsx

@@ -6,9 +6,10 @@ import { ORIENTATION, OrientationSwitch } from '../sandbox/actions/OrientationSw
 import styles from './themeGenerator.module.css';
 import { ThemeGeneratorTreeView } from './themeGeneratorTreeView/ThemeGeneratorTreeView';
 import { ThemeGeneratorPreview } from './themeGeneratorPreview/ThemeGeneratorPreview';
-import { parseCssVariables } from './themeVariableUtils';
 import { ThemeGeneratorSwitchThemeModal } from './themeGeneratorSwitchThemeModal/ThemeGeneratorSwitchThemeModal';
 import { ThemeGeneratorJSONModal } from './themeGeneratorJSONModal/ThemeGeneratorJSONModal';
+import defaultTokens from '@ovhcloud/ods-themes/default/tokens';
+import developerTokens from '@ovhcloud/ods-themes/developer/tokens';
 
 const ThemeGenerator = (): JSX.Element => {
   const [isFullscreen, setIsFullscreen] = useState(false);
@@ -21,34 +22,14 @@ const ThemeGenerator = (): JSX.Element => {
   const [isJsonOpen, setIsJsonOpen] = useState(false);
 
   useEffect(() => {
-    const loadTheme = async () => {
-      if (selectedTheme === 'custom') {
-        setIsCustomTheme(true);
-        return;
-      }
-
-      try {
-
-        // Fetch the CSS file from the static directory
-        // Path: /themes/{themeName}/index.css (exposed via staticDirs in main.ts)
-        const response = await fetch(`/themes/${selectedTheme}/index.css`);
-
-        if (!response.ok) {
-          throw new Error(`Failed to fetch theme: ${response.statusText}`);
-        }
-
-        const cssContent = await response.text();
-
-        // Parse CSS variables
-        const variables = parseCssVariables(cssContent);
-        setEditedVariables(variables);
-        setIsCustomTheme(false);
-      } catch (error) {
-        console.error('Failed to load theme:', error);
-      }
-    };
+    if (selectedTheme === 'custom') {
+      setIsCustomTheme(true);
+      return;
+    }
 
-    loadTheme();
+    const themeTokens = selectedTheme === 'developer' ? developerTokens : defaultTokens;
+    setEditedVariables(themeTokens.root);
+    setIsCustomTheme(false);
   }, [selectedTheme]);
 
 
@@ -62,7 +43,6 @@ const ThemeGenerator = (): JSX.Element => {
       [name]: value,
     }));
 
-    // Automatically switch to custom theme when user edits a variable
     if (!isCustomTheme) {
       setSelectedTheme('custom');
       setIsCustomTheme(true);

packages/storybook/src/components/themeGenerator/themeVariableUtils.ts

@@ -1,42 +1,3 @@
-const parseCssVariables = (cssContent: string): Record<string, string> => {
-  const variables: Record<string, string> = {};
-  
-  const extractVariablesFromRoot = (content: string, startIndex: number = 0): void => {
-    const rootMatch = /:root\s*\{([^}]+)\}/g;
-    rootMatch.lastIndex = startIndex;
-    const match = rootMatch.exec(content);
-    
-    if (!match) return;
-    
-    const rootContent = match[1];
-    extractVariablesFromContent(rootContent);
-    
-    extractVariablesFromRoot(content, rootMatch.lastIndex);
-  };
-  
-  const extractVariablesFromContent = (content: string, startIndex: number = 0): void => {
-    const varRegex = /(--[^:]+):\s*([^;]+);/g;
-    varRegex.lastIndex = startIndex;
-    const match = varRegex.exec(content);
-    
-    if (!match) return;
-    
-    const propertyName = match[1].trim();
-    const propertyValue = match[2].trim();
-    
-    // Only include --ods-* variables
-    if (propertyName.startsWith('--ods-')) {
-      variables[propertyName] = propertyValue;
-    }
-    
-    // Recursively find next variable
-    extractVariablesFromContent(content, varRegex.lastIndex);
-  };
-  
-  extractVariablesFromRoot(cssContent);
-  return variables;
-};
-
 interface CategorizedVariables {
   colors: Array<{ name: string; value: string }>;
   border: Array<{ name: string; value: string }>;
@@ -77,4 +38,4 @@ const categorizeCssVariables = (variables: Record<string, string>): CategorizedV
   return categories;
 };
 
-export { categorizeCssVariables, type CategorizedVariables, parseCssVariables };
+export { categorizeCssVariables, type CategorizedVariables };

packages/themes/package.json

@@ -22,6 +22,9 @@
     },
     "./default/tokens": {
       "default": "./dist/default/tokens.json"
+    },
+    "./developer/tokens": {
+      "default": "./dist/developer/tokens.json"
     }
   },
   "types": "dist/index.d.ts",

packages/themes/src/index.ts

@@ -1,5 +1,6 @@
 enum ODS_THEME {
   default = 'default',
+  developer = 'developer',
 }
 
 const ODS_THEMES = Object.freeze(Object.values(ODS_THEME));