@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.6 → 0.2.8

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

@@ -0,0 +1,305 @@
+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`
+          css += `}\n`
+        }
+      }
+    })
+    
+    return css
+  }
+
+  // NEW= (obj)=> {
+    let breakpoints= {}
+    
+    const searchForBreakpoints = (currentObj, currentPath] = []) => {
+      if (typeof currentObj !== 'object' || currentObj === null) {
+        return
+      }
+      
+      Object.entries(currentObj).forEach(([key, value]) => {
+        if (key === 'breakpoints' && typeof value === 'object' && value !== null) {
+          // Found breakpoints, extract them
+          Object.entries(value).forEach(([bpKey, bpValue]) => {
+            if (typeof bpValue === 'string' || typeof bpValue === 'number') {
+              breakpoints[bpKey] = bpValue
+            }
+          })
+        } else if (typeof value === 'object' && value !== null) {
+          // Recursively search deeper
+          searchForBreakpoints(value, [...currentPath, key])
+        }
+      })
+    }
+    
+    searchForBreakpoints(obj)
+    return breakpoints
+  }
+
+  // NEW= (breakpoints)=> {
+    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 += '\n'
+    
+    // NEW= `  /* Custom Media Queries for Breakpoints */\n`
+    Object.entries(breakpoints).forEach(([key, value]) => {
+      css += `  @custom-media --bp-${key} (min-width});\n`
+    })
+    css += '\n'
+    
+    return css
+  }
+
+  // Recursively generate CSS variables from theme object
+  const generateCSSVariables = (obj, path] = [])=> {
+    let css = ''
+    
+    if (typeof obj !== 'object' || obj === null) {
+      return css
+    }
+    
+    Object.entries(obj).forEach(([key, value]) => {
+      const currentPath = [...path, key]
+      
+      if (typeof value === 'string' || typeof value === 'number') {
+        // Generate CSS variable for primitive values
+        const cssVarName = createCSSVarName(currentPath)
+        css += `  ${cssVarName}};\n`
+      } else if (Array.isArray(value)) {
+        // Handle arrays (like font weights, tags)
+        const cssVarName = createCSSVarName(currentPath)
+        css += `  ${cssVarName})};\n`
+      } else if (typeof value === 'object' && value !== null) {
+        // Recursively process nested objects
+        css += generateCSSVariables(value, currentPath)
+      }
+    })
+    
+    return css
+  }
+
+  // Generate CSS from theme object using structured traversal
+  const generateSingleThemeCSS = (themeName, themeObj)=> {
+    // Always generate light + dark mode CSS
+    return generateLightDarkCSS(themeName, themeObj)
+  }
+
+  // Generate light and dark mode CSS
+  const generateLightDarkCSS = (themeName, themeObj)=> {
+    let css = `/* ${themeName} Theme - Light & Dark Modes */\n`
+    
+    // Generate @font-face declarations
+    css += generateFontFaces(themeObj)
+    
+    // NEW= extractBreakpoints(themeObj)
+    
+    // Generate light mode variables (default)
+    css += `= `  /* Light Mode Variables */\n`
+    
+    // NEW= generateBreakpointVariables(breakpoints)
+    
+    // Generate all other CSS variables
+    css += generateCSSVariables(themeObj)
+    css += '}\n\n'
+    
+    // Generate dark mode variables
+    css += `.dark {\n`
+    css += `  /* Dark Mode Variables */\n`
+    
+    if (themeObj.modes?.dark?.colors && Object.keys(themeObj.modes.dark.colors).length > 0) {
+      // Use custom dark mode colors if defined
+      css += generateDarkModeColors(themeObj.modes.dark.colors)
+    } else {
+      // Generate automatic dark mode by adapting colors
+      css += generateDarkModeVariables(themeObj)
+    }
+    
+    css += '}\n'
+    return css
+  }
+
+  // Generate dark mode colors from explicit color definitions
+  const generateDarkModeColors = (darkColors)=> {
+    let css = ''
+    
+    Object.entries(darkColors).forEach(([colorKey, colorValue]) => {
+      if (typeof colorValue === 'object' && colorValue !== null) {
+        // 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`
+          }
+        })
+      } else if (typeof colorValue === 'string' || typeof colorValue === 'number') {
+        // Handle direct color values
+        css += `  --cs-colors-${colorKey}};\n`
+      }
+    })
+    
+    return css
+  }
+
+  // Generate dark mode variables by adapting light mode colors
+  const generateDarkModeVariables = (themeObj)=> {
+    // Create a dark variant of the theme by adapting colors
+    const darkTheme = adaptThemeForDarkMode(themeObj)
+    
+    // Generate CSS variables only for the properties that exist in the dark theme
+    let css = ''
+    
+    if (darkTheme.colors) {
+      // Generate CSS variables for colors
+      Object.entries(darkTheme.colors).forEach(([colorKey, colorValue]) => {
+        if (typeof colorValue === 'object' && colorValue !== null) {
+          // 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`
+            }
+          })
+        } else if (typeof colorValue === 'string' || typeof colorValue === 'number') {
+          // Handle direct color values
+          css += `  --cs-colors-${colorKey}};\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`
+    
+    return css
+  }
+
+  // Adapt theme for dark mode
+  const adaptThemeForDarkMode = (_themeObj)=> {
+    // 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}
+        // ... other color adaptations
+      } as any // Type assertion to bypass strict typing for now
+    }
+  }
+
+  // Generate CSS for all themes using structured approach
+  const generateAllThemesCSS = () => {
+    try {
+      // Create themes directory if it doesn't exist
+      const themesDir = resolve(config.root, 'src/styles/themes')
+      if (!existsSync(themesDir)) {
+        mkdirSync(themesDir, { recursive})
+      }
+      
+      let indexCSS = '/* Theme Index - Import all themes */\n'
+      let defaultThemeCSS = '/* Default Theme Variables (Coach-Stan) */\n'
+
+      // Use defaultThemes instead of hardcoded themeFiles
+      for (const [themeKey, themeObj] of Object.entries(defaultThemes)) {
+        try {
+          // Generate CSS for this specific theme
+          const themeCSS = generateSingleThemeCSS(themeObj.meta.name, themeObj)
+          
+          // Write individual theme file
+          const themeFileName = `${themeKey}.css`
+          const themeOutputPath = resolve(themesDir, themeFileName)
+          writeFileSync(themeOutputPath, themeCSS, 'utf-8')
+          
+          console.log(`✅ Generated dual-mode CSS for theme} -> ${themeFileName}`)
+
+          // Add import to index file
+          indexCSS += `@import './${themeFileName}';\n`
+
+          // Set stan-design theme as default
+          if (themeKey === 'stan-design') {
+            defaultThemeCSS += themeCSS
+          }
+          
+        } catch (error) {
+          console.error(`❌ Error processing ${themeKey}, error)
+        }
+      }
+
+      // Write theme index file
+      const indexPath = resolve(config.root, 'src/styles/themes/index.css')
+      writeFileSync(indexPath, indexCSS, 'utf-8')
+
+      // Write default theme file (for backward compatibility)
+      const defaultPath = resolve(config.root, 'src/styles/generated-theme-variables.css')
+      writeFileSync(defaultPath, defaultThemeCSS, 'utf-8')
+
+      console.log('✅ Theme CSS Generator)
+      
+    } catch (error) {
+      console.error('❌ Theme CSS Generator Error, error)
+    }
+  }
+
+  // Main function to generate theme CSS
+  const generateThemeCSS = () => {
+    try {
+      // Check if themes directory exists
+      const themesSourceDir = resolve(config.root, 'src/themes/themes')
+      
+      if (!existsSync(themesSourceDir)) {
+        console.warn('⚠️  Theme CSS Generator)
+        return
+      }
+
+      // Generate CSS for all themes
+      generateAllThemesCSS()
+      
+    } catch (error) {
+      console.error('❌ Theme CSS Generator Error, error)
+    }
+  }
+
+  return {
+    name,
+    
+    configResolved(resolvedConfig) {
+      config = resolvedConfig
+    },
+
+    buildStart() {
+      generateThemeCSS()
+    },
+
+    handleHotUpdate({ file }) {
+      // 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')
+      )
+      
+      if (shouldRegenerate) {
+        generateThemeCSS()
+      }
+    }
+  }
+}

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

@@ -0,0 +1,305 @@
+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`
+          css += `}\n`
+        }
+      }
+    })
+    
+    return css
+  }
+
+  // NEW= (obj)=> {
+    let breakpoints= {}
+    
+    const searchForBreakpoints = (currentObj, currentPath] = []) => {
+      if (typeof currentObj !== 'object' || currentObj === null) {
+        return
+      }
+      
+      Object.entries(currentObj).forEach(([key, value]) => {
+        if (key === 'breakpoints' && typeof value === 'object' && value !== null) {
+          // Found breakpoints, extract them
+          Object.entries(value).forEach(([bpKey, bpValue]) => {
+            if (typeof bpValue === 'string' || typeof bpValue === 'number') {
+              breakpoints[bpKey] = bpValue
+            }
+          })
+        } else if (typeof value === 'object' && value !== null) {
+          // Recursively search deeper
+          searchForBreakpoints(value, [...currentPath, key])
+        }
+      })
+    }
+    
+    searchForBreakpoints(obj)
+    return breakpoints
+  }
+
+  // NEW= (breakpoints)=> {
+    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 += '\n'
+    
+    // NEW= `  /* Custom Media Queries for Breakpoints */\n`
+    Object.entries(breakpoints).forEach(([key, value]) => {
+      css += `  @custom-media --bp-${key} (min-width});\n`
+    })
+    css += '\n'
+    
+    return css
+  }
+
+  // Recursively generate CSS variables from theme object
+  const generateCSSVariables = (obj, path] = [])=> {
+    let css = ''
+    
+    if (typeof obj !== 'object' || obj === null) {
+      return css
+    }
+    
+    Object.entries(obj).forEach(([key, value]) => {
+      const currentPath = [...path, key]
+      
+      if (typeof value === 'string' || typeof value === 'number') {
+        // Generate CSS variable for primitive values
+        const cssVarName = createCSSVarName(currentPath)
+        css += `  ${cssVarName}};\n`
+      } else if (Array.isArray(value)) {
+        // Handle arrays (like font weights, tags)
+        const cssVarName = createCSSVarName(currentPath)
+        css += `  ${cssVarName})};\n`
+      } else if (typeof value === 'object' && value !== null) {
+        // Recursively process nested objects
+        css += generateCSSVariables(value, currentPath)
+      }
+    })
+    
+    return css
+  }
+
+  // Generate CSS from theme object using structured traversal
+  const generateSingleThemeCSS = (themeName, themeObj)=> {
+    // Always generate light + dark mode CSS
+    return generateLightDarkCSS(themeName, themeObj)
+  }
+
+  // Generate light and dark mode CSS
+  const generateLightDarkCSS = (themeName, themeObj)=> {
+    let css = `/* ${themeName} Theme - Light & Dark Modes */\n`
+    
+    // Generate @font-face declarations
+    css += generateFontFaces(themeObj)
+    
+    // NEW= extractBreakpoints(themeObj)
+    
+    // Generate light mode variables (default)
+    css += `= `  /* Light Mode Variables */\n`
+    
+    // NEW= generateBreakpointVariables(breakpoints)
+    
+    // Generate all other CSS variables
+    css += generateCSSVariables(themeObj)
+    css += '}\n\n'
+    
+    // Generate dark mode variables
+    css += `.dark {\n`
+    css += `  /* Dark Mode Variables */\n`
+    
+    if (themeObj.modes?.dark?.colors && Object.keys(themeObj.modes.dark.colors).length > 0) {
+      // Use custom dark mode colors if defined
+      css += generateDarkModeColors(themeObj.modes.dark.colors)
+    } else {
+      // Generate automatic dark mode by adapting colors
+      css += generateDarkModeVariables(themeObj)
+    }
+    
+    css += '}\n'
+    return css
+  }
+
+  // Generate dark mode colors from explicit color definitions
+  const generateDarkModeColors = (darkColors)=> {
+    let css = ''
+    
+    Object.entries(darkColors).forEach(([colorKey, colorValue]) => {
+      if (typeof colorValue === 'object' && colorValue !== null) {
+        // 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`
+          }
+        })
+      } else if (typeof colorValue === 'string' || typeof colorValue === 'number') {
+        // Handle direct color values
+        css += `  --cs-colors-${colorKey}};\n`
+      }
+    })
+    
+    return css
+  }
+
+  // Generate dark mode variables by adapting light mode colors
+  const generateDarkModeVariables = (themeObj)=> {
+    // Create a dark variant of the theme by adapting colors
+    const darkTheme = adaptThemeForDarkMode(themeObj)
+    
+    // Generate CSS variables only for the properties that exist in the dark theme
+    let css = ''
+    
+    if (darkTheme.colors) {
+      // Generate CSS variables for colors
+      Object.entries(darkTheme.colors).forEach(([colorKey, colorValue]) => {
+        if (typeof colorValue === 'object' && colorValue !== null) {
+          // 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`
+            }
+          })
+        } else if (typeof colorValue === 'string' || typeof colorValue === 'number') {
+          // Handle direct color values
+          css += `  --cs-colors-${colorKey}};\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`
+    
+    return css
+  }
+
+  // Adapt theme for dark mode
+  const adaptThemeForDarkMode = (_themeObj)=> {
+    // 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}
+        // ... other color adaptations
+      } as any // Type assertion to bypass strict typing for now
+    }
+  }
+
+  // Generate CSS for all themes using structured approach
+  const generateAllThemesCSS = () => {
+    try {
+      // Create themes directory if it doesn't exist
+      const themesDir = resolve(config.root, 'src/styles/themes')
+      if (!existsSync(themesDir)) {
+        mkdirSync(themesDir, { recursive})
+      }
+      
+      let indexCSS = '/* Theme Index - Import all themes */\n'
+      let defaultThemeCSS = '/* Default Theme Variables (Coach-Stan) */\n'
+
+      // Use defaultThemes instead of hardcoded themeFiles
+      for (const [themeKey, themeObj] of Object.entries(defaultThemes)) {
+        try {
+          // Generate CSS for this specific theme
+          const themeCSS = generateSingleThemeCSS(themeObj.meta.name, themeObj)
+          
+          // Write individual theme file
+          const themeFileName = `${themeKey}.css`
+          const themeOutputPath = resolve(themesDir, themeFileName)
+          writeFileSync(themeOutputPath, themeCSS, 'utf-8')
+          
+          console.log(`✅ Generated dual-mode CSS for theme} -> ${themeFileName}`)
+
+          // Add import to index file
+          indexCSS += `@import './${themeFileName}';\n`
+
+          // Set stan-design theme as default
+          if (themeKey === 'stan-design') {
+            defaultThemeCSS += themeCSS
+          }
+          
+        } catch (error) {
+          console.error(`❌ Error processing ${themeKey}, error)
+        }
+      }
+
+      // Write theme index file
+      const indexPath = resolve(config.root, 'src/styles/themes/index.css')
+      writeFileSync(indexPath, indexCSS, 'utf-8')
+
+      // Write default theme file (for backward compatibility)
+      const defaultPath = resolve(config.root, 'src/styles/generated-theme-variables.css')
+      writeFileSync(defaultPath, defaultThemeCSS, 'utf-8')
+
+      console.log('✅ Theme CSS Generator)
+      
+    } catch (error) {
+      console.error('❌ Theme CSS Generator Error, error)
+    }
+  }
+
+  // Main function to generate theme CSS
+  const generateThemeCSS = () => {
+    try {
+      // Check if themes directory exists
+      const themesSourceDir = resolve(config.root, 'src/themes/themes')
+      
+      if (!existsSync(themesSourceDir)) {
+        console.warn('⚠️  Theme CSS Generator)
+        return
+      }
+
+      // Generate CSS for all themes
+      generateAllThemesCSS()
+      
+    } catch (error) {
+      console.error('❌ Theme CSS Generator Error, error)
+    }
+  }
+
+  return {
+    name,
+    
+    configResolved(resolvedConfig) {
+      config = resolvedConfig
+    },
+
+    buildStart() {
+      generateThemeCSS()
+    },
+
+    handleHotUpdate({ file }) {
+      // 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')
+      )
+      
+      if (shouldRegenerate) {
+        generateThemeCSS()
+      }
+    }
+  }
+}