@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.9 → 0.2.11

package/dist/plugins/theme-css-generator.esm.js

@@ -1,9 +1,47 @@
 import { resolve } from 'path'
 import { existsSync, mkdirSync, writeFileSync } from 'fs'
-\n`
-          css += `  src}') format('woff2-variations');\n`
-          css += `  font-weight} ${maxWeight};\n`
-          css += `  font-display};\n`
+import type { Plugin } from 'vite'
+import type { MultiThemeConfig } from '../themes/types'
+import { defaultThemes } from '../themes/base-themes'
+
+export default function themeCSSGenerator(): Plugin {
+  let config: any
+
+  // Helper function to safely convert values to strings
+  const valueToString = (value: any): string => {
+    if (Array.isArray(value)) {
+      return value.join(', ')
+    }
+    if (typeof value === 'object' && value !== null) {
+      return JSON.stringify(value)
+    }
+    return String(value)
+  }
+
+  // Helper function to create CSS variable name
+  const createCSSVarName = (path: string[]): string => {
+    return `--cs-${path.join('-').replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)}`
+  }
+
+  // Generate @font-face declarations from font configuration
+  const generateFontFaces = (themeObj: MultiThemeConfig): string => {
+    let css = ''
+    
+    if (!themeObj.fonts) return css
+    
+    Object.entries(themeObj.fonts).forEach(([, fontConfig]) => {
+      if (fontConfig.source?.type === 'custom' && fontConfig.source.files?.woff2) {
+        const { family, source, weights, display } = fontConfig
+        
+        if (weights && Array.isArray(weights) && weights.length > 0) {
+          const minWeight = Math.min(...weights)
+          const maxWeight = Math.max(...weights)
+          
+          css += `\n@font-face {\n`
+          css += `  font-family: '${family}';\n`
+          css += `  src: url('${source.files.woff2}') format('woff2-variations');\n`
+          css += `  font-weight: ${minWeight} ${maxWeight};\n`
+          css += `  font-display: ${display || 'swap'};\n`
           css += `}\n`
         }
       }
@@ -12,10 +50,11 @@ import { existsSync, mkdirSync, writeFileSync } from 'fs'
     return css
   }
 
-  // NEW= (obj)=> {
-    let breakpoints= {}
+  // NEW: Extract breakpoints from anywhere in the theme object
+  const extractBreakpoints = (obj: any): any => {
+    let breakpoints: any = {}
     
-    const searchForBreakpoints = (currentObj, currentPath] = []) => {
+    const searchForBreakpoints = (currentObj: any, currentPath: string[] = []) => {
       if (typeof currentObj !== 'object' || currentObj === null) {
         return
       }
@@ -39,19 +78,21 @@ import { existsSync, mkdirSync, writeFileSync } from 'fs'
     return breakpoints
   }
 
-  // NEW= (breakpoints)=> {
+  // NEW: Generate breakpoint CSS variables and @custom-media queries
+  const generateBreakpointVariables = (breakpoints: any): string => {
     let css = ''
     if (Object.keys(breakpoints).length === 0) { return css }
     
     css += `  /* Breakpoint Variables */\n`
     Object.entries(breakpoints).forEach(([key, value]) => {
-      css += `  --cs-breakpoints-${key}};\n`
+      css += `  --cs-breakpoints-${key}: ${value};\n`
     })
     css += '\n'
     
-    // NEW= `  /* Custom Media Queries for Breakpoints */\n`
+    // NEW: Generate @custom-media queries for use in media queries
+    css += `  /* Custom Media Queries for Breakpoints */\n`
     Object.entries(breakpoints).forEach(([key, value]) => {
-      css += `  @custom-media --bp-${key} (min-width});\n`
+      css += `  @custom-media --bp-${key} (min-width: ${value});\n`
     })
     css += '\n'
     
@@ -59,7 +100,7 @@ import { existsSync, mkdirSync, writeFileSync } from 'fs'
   }
 
   // Recursively generate CSS variables from theme object
-  const generateCSSVariables = (obj, path] = [])=> {
+  const generateCSSVariables = (obj: any, path: string[] = []): string => {
     let css = ''
     
     if (typeof obj !== 'object' || obj === null) {
@@ -72,11 +113,11 @@ import { existsSync, mkdirSync, writeFileSync } from 'fs'
       if (typeof value === 'string' || typeof value === 'number') {
         // Generate CSS variable for primitive values
         const cssVarName = createCSSVarName(currentPath)
-        css += `  ${cssVarName}};\n`
+        css += `  ${cssVarName}: ${value};\n`
       } else if (Array.isArray(value)) {
         // Handle arrays (like font weights, tags)
         const cssVarName = createCSSVarName(currentPath)
-        css += `  ${cssVarName})};\n`
+        css += `  ${cssVarName}: ${valueToString(value)};\n`
       } else if (typeof value === 'object' && value !== null) {
         // Recursively process nested objects
         css += generateCSSVariables(value, currentPath)
@@ -87,24 +128,27 @@ import { existsSync, mkdirSync, writeFileSync } from 'fs'
   }
 
   // Generate CSS from theme object using structured traversal
-  const generateSingleThemeCSS = (themeName, themeObj)=> {
+  const generateSingleThemeCSS = (themeName: string, themeObj: MultiThemeConfig): string => {
     // Always generate light + dark mode CSS
     return generateLightDarkCSS(themeName, themeObj)
   }
 
   // Generate light and dark mode CSS
-  const generateLightDarkCSS = (themeName, themeObj)=> {
+  const generateLightDarkCSS = (themeName: string, themeObj: MultiThemeConfig): string => {
     let css = `/* ${themeName} Theme - Light & Dark Modes */\n`
     
     // Generate @font-face declarations
     css += generateFontFaces(themeObj)
     
-    // NEW= extractBreakpoints(themeObj)
+    // NEW: Extract breakpoints from anywhere in the theme
+    const breakpoints = extractBreakpoints(themeObj)
     
     // Generate light mode variables (default)
-    css += `= `  /* Light Mode Variables */\n`
+    css += `:root {\n`
+    css += `  /* Light Mode Variables */\n`
     
-    // NEW= generateBreakpointVariables(breakpoints)
+    // NEW: Generate breakpoint variables first
+    css += generateBreakpointVariables(breakpoints)
     
     // Generate all other CSS variables
     css += generateCSSVariables(themeObj)
@@ -127,7 +171,7 @@ import { existsSync, mkdirSync, writeFileSync } from 'fs'
   }
 
   // Generate dark mode colors from explicit color definitions
-  const generateDarkModeColors = (darkColors)=> {
+  const generateDarkModeColors = (darkColors: any): string => {
     let css = ''
     
     Object.entries(darkColors).forEach(([colorKey, colorValue]) => {
@@ -135,12 +179,12 @@ import { existsSync, mkdirSync, writeFileSync } from 'fs'
         // Handle nested color objects (like surface, text, etc.)
         Object.entries(colorValue).forEach(([subKey, subValue]) => {
           if (typeof subValue === 'string' || typeof subValue === 'number') {
-            css += `  --cs-colors-${colorKey}-${subKey}};\n`
+            css += `  --cs-colors-${colorKey}-${subKey}: ${subValue};\n`
           }
         })
       } else if (typeof colorValue === 'string' || typeof colorValue === 'number') {
         // Handle direct color values
-        css += `  --cs-colors-${colorKey}};\n`
+        css += `  --cs-colors-${colorKey}: ${colorValue};\n`
       }
     })
     
@@ -148,7 +192,7 @@ import { existsSync, mkdirSync, writeFileSync } from 'fs'
   }
 
   // Generate dark mode variables by adapting light mode colors
-  const generateDarkModeVariables = (themeObj)=> {
+  const generateDarkModeVariables = (themeObj: MultiThemeConfig): string => {
     // Create a dark variant of the theme by adapting colors
     const darkTheme = adaptThemeForDarkMode(themeObj)
     
@@ -162,44 +206,49 @@ import { existsSync, mkdirSync, writeFileSync } from 'fs'
           // Handle nested color objects (like surface, text, etc.)
           Object.entries(colorValue).forEach(([subKey, subValue]) => {
             if (typeof subValue === 'string' || typeof subValue === 'number') {
-              css += `  --cs-colors-${colorKey}-${subKey}};\n`
+              css += `  --cs-colors-${colorKey}-${subKey}: ${subValue};\n`
             }
           })
         } else if (typeof colorValue === 'string' || typeof colorValue === 'number') {
           // Handle direct color values
-          css += `  --cs-colors-${colorKey}};\n`
+          css += `  --cs-colors-${colorKey}: ${colorValue};\n`
         }
       })
     }
     
     // Add some basic dark mode variables for testing
-    css += `  --cs-colors-surface-background;\n`
-    css += `  --cs-colors-surface-surface;\n`
-    css += `  --cs-colors-surface-border;\n`
-    css += `  --cs-colors-surface-divider;\n`
-    css += `  --cs-colors-text-primary;\n`
-    css += `  --cs-colors-text-secondary;\n`
-    css += `  --cs-colors-text-muted;\n`
+    css += `  --cs-colors-surface-background: #0f172a;\n`
+    css += `  --cs-colors-surface-surface: #1e293b;\n`
+    css += `  --cs-colors-surface-border: #334155;\n`
+    css += `  --cs-colors-surface-divider: #475569;\n`
+    css += `  --cs-colors-text-primary: #f8fafc;\n`
+    css += `  --cs-colors-text-secondary: #cbd5e1;\n`
+    css += `  --cs-colors-text-muted: #94a3b8;\n`
     
     return css
   }
 
   // Adapt theme for dark mode
-  const adaptThemeForDarkMode = (_themeObj)=> {
+  const adaptThemeForDarkMode = (_themeObj: MultiThemeConfig): Partial<MultiThemeConfig> => {
     // This would implement your dark mode color adaptation logic
     // You can use the existing ColorManager or implement custom logic
     return {
-      colors, // Dark background
-          surface,    // Dark surface
-          border,     // Dark border
-          divider},
-        text,    // Light text
-          secondary,  // Muted text
-          muted,      // Muted text
-          inverse,    // Dark text for light backgrounds
-          onPrimary,  // Text on primary color
-          onSecondary, // Text on secondary color
-          onSurface}
+      colors: {
+        surface: {
+          background: '#0f172a', // Dark background
+          surface: '#1e293b',    // Dark surface
+          border: '#334155',     // Dark border
+          divider: '#475569'     // Dark divider
+        },
+        text: {
+          primary: '#f8fafc',    // Light text
+          secondary: '#cbd5e1',  // Muted text
+          muted: '#94a3b8',      // Muted text
+          inverse: '#0f172a',    // Dark text for light backgrounds
+          onPrimary: '#0f172a',  // Text on primary color
+          onSecondary: '#0f172a', // Text on secondary color
+          onSurface: '#f8fafc'   // Text on surface
+        }
         // ... other color adaptations
       } as any // Type assertion to bypass strict typing for now
     }
@@ -211,7 +260,7 @@ import { existsSync, mkdirSync, writeFileSync } from 'fs'
       // Create themes directory if it doesn't exist
       const themesDir = resolve(config.root, 'src/styles/themes')
       if (!existsSync(themesDir)) {
-        mkdirSync(themesDir, { recursive})
+        mkdirSync(themesDir, { recursive: true })
       }
       
       let indexCSS = '/* Theme Index - Import all themes */\n'
@@ -228,7 +277,7 @@ import { existsSync, mkdirSync, writeFileSync } from 'fs'
           const themeOutputPath = resolve(themesDir, themeFileName)
           writeFileSync(themeOutputPath, themeCSS, 'utf-8')
           
-          console.log(`✅ Generated dual-mode CSS for theme} -> ${themeFileName}`)
+          console.log(`✅ Generated dual-mode CSS for theme: ${themeObj.meta.name} -> ${themeFileName}`)
 
           // Add import to index file
           indexCSS += `@import './${themeFileName}';\n`
@@ -239,7 +288,7 @@ import { existsSync, mkdirSync, writeFileSync } from 'fs'
           }
           
         } catch (error) {
-          console.error(`❌ Error processing ${themeKey}, error)
+          console.error(`❌ Error processing ${themeKey}:`, error)
         }
       }
 
@@ -251,10 +300,10 @@ import { existsSync, mkdirSync, writeFileSync } from 'fs'
       const defaultPath = resolve(config.root, 'src/styles/generated-theme-variables.css')
       writeFileSync(defaultPath, defaultThemeCSS, 'utf-8')
 
-      console.log('✅ Theme CSS Generator)
+      console.log('✅ Theme CSS Generator: Generated all dual-mode theme files successfully')
       
     } catch (error) {
-      console.error('❌ Theme CSS Generator Error, error)
+      console.error('❌ Theme CSS Generator Error:', error)
     }
   }
 
@@ -265,7 +314,7 @@ import { existsSync, mkdirSync, writeFileSync } from 'fs'
       const themesSourceDir = resolve(config.root, 'src/themes/themes')
       
       if (!existsSync(themesSourceDir)) {
-        console.warn('⚠️  Theme CSS Generator)
+        console.warn('⚠️  Theme CSS Generator: themes/themes/ directory not found')
         return
       }
 
@@ -273,12 +322,12 @@ import { existsSync, mkdirSync, writeFileSync } from 'fs'
       generateAllThemesCSS()
       
     } catch (error) {
-      console.error('❌ Theme CSS Generator Error, error)
+      console.error('❌ Theme CSS Generator Error:', error)
     }
   }
 
   return {
-    name,
+    name: 'theme-css-generator',
     
     configResolved(resolvedConfig) {
       config = resolvedConfig
@@ -292,9 +341,9 @@ import { existsSync, mkdirSync, writeFileSync } from 'fs'
       // Use defaultThemes keys instead of hardcoded file paths
       const themeKeys = Object.keys(defaultThemes)
       const shouldRegenerate = themeKeys.some(themeKey => 
-        file.includes(`themes/${themeKey}.js`) ||
-        file.includes('inheritance.js') ||
-        file.includes('types.js')
+        file.includes(`themes/${themeKey}.ts`) ||
+        file.includes('inheritance.ts') ||
+        file.includes('types.ts')
       )
       
       if (shouldRegenerate) {

package/dist/plugins/theme-css-generator.js

@@ -1,9 +1,47 @@
 import { resolve } from 'path'
 import { existsSync, mkdirSync, writeFileSync } from 'fs'
-\n`
-          css += `  src}') format('woff2-variations');\n`
-          css += `  font-weight} ${maxWeight};\n`
-          css += `  font-display};\n`
+import type { Plugin } from 'vite'
+import type { MultiThemeConfig } from '../themes/types'
+import { defaultThemes } from '../themes/base-themes'
+
+export default function themeCSSGenerator(): Plugin {
+  let config: any
+
+  // Helper function to safely convert values to strings
+  const valueToString = (value: any): string => {
+    if (Array.isArray(value)) {
+      return value.join(', ')
+    }
+    if (typeof value === 'object' && value !== null) {
+      return JSON.stringify(value)
+    }
+    return String(value)
+  }
+
+  // Helper function to create CSS variable name
+  const createCSSVarName = (path: string[]): string => {
+    return `--cs-${path.join('-').replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)}`
+  }
+
+  // Generate @font-face declarations from font configuration
+  const generateFontFaces = (themeObj: MultiThemeConfig): string => {
+    let css = ''
+    
+    if (!themeObj.fonts) return css
+    
+    Object.entries(themeObj.fonts).forEach(([, fontConfig]) => {
+      if (fontConfig.source?.type === 'custom' && fontConfig.source.files?.woff2) {
+        const { family, source, weights, display } = fontConfig
+        
+        if (weights && Array.isArray(weights) && weights.length > 0) {
+          const minWeight = Math.min(...weights)
+          const maxWeight = Math.max(...weights)
+          
+          css += `\n@font-face {\n`
+          css += `  font-family: '${family}';\n`
+          css += `  src: url('${source.files.woff2}') format('woff2-variations');\n`
+          css += `  font-weight: ${minWeight} ${maxWeight};\n`
+          css += `  font-display: ${display || 'swap'};\n`
           css += `}\n`
         }
       }
@@ -12,10 +50,11 @@ import { existsSync, mkdirSync, writeFileSync } from 'fs'
     return css
   }
 
-  // NEW= (obj)=> {
-    let breakpoints= {}
+  // NEW: Extract breakpoints from anywhere in the theme object
+  const extractBreakpoints = (obj: any): any => {
+    let breakpoints: any = {}
     
-    const searchForBreakpoints = (currentObj, currentPath] = []) => {
+    const searchForBreakpoints = (currentObj: any, currentPath: string[] = []) => {
       if (typeof currentObj !== 'object' || currentObj === null) {
         return
       }
@@ -39,19 +78,21 @@ import { existsSync, mkdirSync, writeFileSync } from 'fs'
     return breakpoints
   }
 
-  // NEW= (breakpoints)=> {
+  // NEW: Generate breakpoint CSS variables and @custom-media queries
+  const generateBreakpointVariables = (breakpoints: any): string => {
     let css = ''
     if (Object.keys(breakpoints).length === 0) { return css }
     
     css += `  /* Breakpoint Variables */\n`
     Object.entries(breakpoints).forEach(([key, value]) => {
-      css += `  --cs-breakpoints-${key}};\n`
+      css += `  --cs-breakpoints-${key}: ${value};\n`
     })
     css += '\n'
     
-    // NEW= `  /* Custom Media Queries for Breakpoints */\n`
+    // NEW: Generate @custom-media queries for use in media queries
+    css += `  /* Custom Media Queries for Breakpoints */\n`
     Object.entries(breakpoints).forEach(([key, value]) => {
-      css += `  @custom-media --bp-${key} (min-width});\n`
+      css += `  @custom-media --bp-${key} (min-width: ${value});\n`
     })
     css += '\n'
     
@@ -59,7 +100,7 @@ import { existsSync, mkdirSync, writeFileSync } from 'fs'
   }
 
   // Recursively generate CSS variables from theme object
-  const generateCSSVariables = (obj, path] = [])=> {
+  const generateCSSVariables = (obj: any, path: string[] = []): string => {
     let css = ''
     
     if (typeof obj !== 'object' || obj === null) {
@@ -72,11 +113,11 @@ import { existsSync, mkdirSync, writeFileSync } from 'fs'
       if (typeof value === 'string' || typeof value === 'number') {
         // Generate CSS variable for primitive values
         const cssVarName = createCSSVarName(currentPath)
-        css += `  ${cssVarName}};\n`
+        css += `  ${cssVarName}: ${value};\n`
       } else if (Array.isArray(value)) {
         // Handle arrays (like font weights, tags)
         const cssVarName = createCSSVarName(currentPath)
-        css += `  ${cssVarName})};\n`
+        css += `  ${cssVarName}: ${valueToString(value)};\n`
       } else if (typeof value === 'object' && value !== null) {
         // Recursively process nested objects
         css += generateCSSVariables(value, currentPath)
@@ -87,24 +128,27 @@ import { existsSync, mkdirSync, writeFileSync } from 'fs'
   }
 
   // Generate CSS from theme object using structured traversal
-  const generateSingleThemeCSS = (themeName, themeObj)=> {
+  const generateSingleThemeCSS = (themeName: string, themeObj: MultiThemeConfig): string => {
     // Always generate light + dark mode CSS
     return generateLightDarkCSS(themeName, themeObj)
   }
 
   // Generate light and dark mode CSS
-  const generateLightDarkCSS = (themeName, themeObj)=> {
+  const generateLightDarkCSS = (themeName: string, themeObj: MultiThemeConfig): string => {
     let css = `/* ${themeName} Theme - Light & Dark Modes */\n`
     
     // Generate @font-face declarations
     css += generateFontFaces(themeObj)
     
-    // NEW= extractBreakpoints(themeObj)
+    // NEW: Extract breakpoints from anywhere in the theme
+    const breakpoints = extractBreakpoints(themeObj)
     
     // Generate light mode variables (default)
-    css += `= `  /* Light Mode Variables */\n`
+    css += `:root {\n`
+    css += `  /* Light Mode Variables */\n`
     
-    // NEW= generateBreakpointVariables(breakpoints)
+    // NEW: Generate breakpoint variables first
+    css += generateBreakpointVariables(breakpoints)
     
     // Generate all other CSS variables
     css += generateCSSVariables(themeObj)
@@ -127,7 +171,7 @@ import { existsSync, mkdirSync, writeFileSync } from 'fs'
   }
 
   // Generate dark mode colors from explicit color definitions
-  const generateDarkModeColors = (darkColors)=> {
+  const generateDarkModeColors = (darkColors: any): string => {
     let css = ''
     
     Object.entries(darkColors).forEach(([colorKey, colorValue]) => {
@@ -135,12 +179,12 @@ import { existsSync, mkdirSync, writeFileSync } from 'fs'
         // Handle nested color objects (like surface, text, etc.)
         Object.entries(colorValue).forEach(([subKey, subValue]) => {
           if (typeof subValue === 'string' || typeof subValue === 'number') {
-            css += `  --cs-colors-${colorKey}-${subKey}};\n`
+            css += `  --cs-colors-${colorKey}-${subKey}: ${subValue};\n`
           }
         })
       } else if (typeof colorValue === 'string' || typeof colorValue === 'number') {
         // Handle direct color values
-        css += `  --cs-colors-${colorKey}};\n`
+        css += `  --cs-colors-${colorKey}: ${colorValue};\n`
       }
     })
     
@@ -148,7 +192,7 @@ import { existsSync, mkdirSync, writeFileSync } from 'fs'
   }
 
   // Generate dark mode variables by adapting light mode colors
-  const generateDarkModeVariables = (themeObj)=> {
+  const generateDarkModeVariables = (themeObj: MultiThemeConfig): string => {
     // Create a dark variant of the theme by adapting colors
     const darkTheme = adaptThemeForDarkMode(themeObj)
     
@@ -162,44 +206,49 @@ import { existsSync, mkdirSync, writeFileSync } from 'fs'
           // Handle nested color objects (like surface, text, etc.)
           Object.entries(colorValue).forEach(([subKey, subValue]) => {
             if (typeof subValue === 'string' || typeof subValue === 'number') {
-              css += `  --cs-colors-${colorKey}-${subKey}};\n`
+              css += `  --cs-colors-${colorKey}-${subKey}: ${subValue};\n`
             }
           })
         } else if (typeof colorValue === 'string' || typeof colorValue === 'number') {
           // Handle direct color values
-          css += `  --cs-colors-${colorKey}};\n`
+          css += `  --cs-colors-${colorKey}: ${colorValue};\n`
         }
       })
     }
     
     // Add some basic dark mode variables for testing
-    css += `  --cs-colors-surface-background;\n`
-    css += `  --cs-colors-surface-surface;\n`
-    css += `  --cs-colors-surface-border;\n`
-    css += `  --cs-colors-surface-divider;\n`
-    css += `  --cs-colors-text-primary;\n`
-    css += `  --cs-colors-text-secondary;\n`
-    css += `  --cs-colors-text-muted;\n`
+    css += `  --cs-colors-surface-background: #0f172a;\n`
+    css += `  --cs-colors-surface-surface: #1e293b;\n`
+    css += `  --cs-colors-surface-border: #334155;\n`
+    css += `  --cs-colors-surface-divider: #475569;\n`
+    css += `  --cs-colors-text-primary: #f8fafc;\n`
+    css += `  --cs-colors-text-secondary: #cbd5e1;\n`
+    css += `  --cs-colors-text-muted: #94a3b8;\n`
     
     return css
   }
 
   // Adapt theme for dark mode
-  const adaptThemeForDarkMode = (_themeObj)=> {
+  const adaptThemeForDarkMode = (_themeObj: MultiThemeConfig): Partial<MultiThemeConfig> => {
     // This would implement your dark mode color adaptation logic
     // You can use the existing ColorManager or implement custom logic
     return {
-      colors, // Dark background
-          surface,    // Dark surface
-          border,     // Dark border
-          divider},
-        text,    // Light text
-          secondary,  // Muted text
-          muted,      // Muted text
-          inverse,    // Dark text for light backgrounds
-          onPrimary,  // Text on primary color
-          onSecondary, // Text on secondary color
-          onSurface}
+      colors: {
+        surface: {
+          background: '#0f172a', // Dark background
+          surface: '#1e293b',    // Dark surface
+          border: '#334155',     // Dark border
+          divider: '#475569'     // Dark divider
+        },
+        text: {
+          primary: '#f8fafc',    // Light text
+          secondary: '#cbd5e1',  // Muted text
+          muted: '#94a3b8',      // Muted text
+          inverse: '#0f172a',    // Dark text for light backgrounds
+          onPrimary: '#0f172a',  // Text on primary color
+          onSecondary: '#0f172a', // Text on secondary color
+          onSurface: '#f8fafc'   // Text on surface
+        }
         // ... other color adaptations
       } as any // Type assertion to bypass strict typing for now
     }
@@ -211,7 +260,7 @@ import { existsSync, mkdirSync, writeFileSync } from 'fs'
       // Create themes directory if it doesn't exist
       const themesDir = resolve(config.root, 'src/styles/themes')
       if (!existsSync(themesDir)) {
-        mkdirSync(themesDir, { recursive})
+        mkdirSync(themesDir, { recursive: true })
       }
       
       let indexCSS = '/* Theme Index - Import all themes */\n'
@@ -228,7 +277,7 @@ import { existsSync, mkdirSync, writeFileSync } from 'fs'
           const themeOutputPath = resolve(themesDir, themeFileName)
           writeFileSync(themeOutputPath, themeCSS, 'utf-8')
           
-          console.log(`✅ Generated dual-mode CSS for theme} -> ${themeFileName}`)
+          console.log(`✅ Generated dual-mode CSS for theme: ${themeObj.meta.name} -> ${themeFileName}`)
 
           // Add import to index file
           indexCSS += `@import './${themeFileName}';\n`
@@ -239,7 +288,7 @@ import { existsSync, mkdirSync, writeFileSync } from 'fs'
           }
           
         } catch (error) {
-          console.error(`❌ Error processing ${themeKey}, error)
+          console.error(`❌ Error processing ${themeKey}:`, error)
         }
       }
 
@@ -251,10 +300,10 @@ import { existsSync, mkdirSync, writeFileSync } from 'fs'
       const defaultPath = resolve(config.root, 'src/styles/generated-theme-variables.css')
       writeFileSync(defaultPath, defaultThemeCSS, 'utf-8')
 
-      console.log('✅ Theme CSS Generator)
+      console.log('✅ Theme CSS Generator: Generated all dual-mode theme files successfully')
       
     } catch (error) {
-      console.error('❌ Theme CSS Generator Error, error)
+      console.error('❌ Theme CSS Generator Error:', error)
     }
   }
 
@@ -265,7 +314,7 @@ import { existsSync, mkdirSync, writeFileSync } from 'fs'
       const themesSourceDir = resolve(config.root, 'src/themes/themes')
       
       if (!existsSync(themesSourceDir)) {
-        console.warn('⚠️  Theme CSS Generator)
+        console.warn('⚠️  Theme CSS Generator: themes/themes/ directory not found')
         return
       }
 
@@ -273,12 +322,12 @@ import { existsSync, mkdirSync, writeFileSync } from 'fs'
       generateAllThemesCSS()
       
     } catch (error) {
-      console.error('❌ Theme CSS Generator Error, error)
+      console.error('❌ Theme CSS Generator Error:', error)
     }
   }
 
   return {
-    name,
+    name: 'theme-css-generator',
     
     configResolved(resolvedConfig) {
       config = resolvedConfig
@@ -292,9 +341,9 @@ import { existsSync, mkdirSync, writeFileSync } from 'fs'
       // Use defaultThemes keys instead of hardcoded file paths
       const themeKeys = Object.keys(defaultThemes)
       const shouldRegenerate = themeKeys.some(themeKey => 
-        file.includes(`themes/${themeKey}.js`) ||
-        file.includes('inheritance.js') ||
-        file.includes('types.js')
+        file.includes(`themes/${themeKey}.ts`) ||
+        file.includes('inheritance.ts') ||
+        file.includes('types.ts')
       )
       
       if (shouldRegenerate) {

package/dist/provider.esm.js

@@ -3,16 +3,16 @@ import { StanDesignTheme } from './theme';
 
 // Simple theme provider - in real implementation would integrate with core provider
 export interface StanDesignProviderProps {
-  children;
-  theme?;
+  children: React.ReactNode;
+  theme?: typeof StanDesignTheme;
 }
 
-export const StanDesignProvider= ({
+export const StanDesignProvider: React.FC<StanDesignProviderProps> = ({
   children,
   theme = StanDesignTheme,
   ...props
 }) => (
-  <div data-theme="stan-design" style={{ '--theme-name'} as React.CSSProperties}>
+  <div data-theme="stan-design" style={{ '--theme-name': 'stan-design' } as React.CSSProperties}>
     {children}
   </div>
 );