@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.49 → 0.2.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rakeyshgidwani/roger-ui-bank-theme-stan-design",
-  "version": "0.2.49",
+  "version": "0.2.51",
   "description": "Roger UI stan-design theme - Complete design system with components, styles, and utilities",
   "keywords": [
     "design-system",

package/src/index.css

@@ -2,7 +2,7 @@
 @import './styles/index.css';
 
 /* Direct import of design system variables to test */
-@import './styles/generated-theme-variables.css';
+/* @import './styles/generated-theme-variables.css'; */
 
 /* Tailwind CSS - Load after imports */
 @tailwind base;

package/src/plugins/theme-css-generator.ts

@@ -176,10 +176,8 @@ export default function themeCSSGenerator(): Plugin {
     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)
     }
+    // Note: All themes should define modes.dark.colors for proper dark mode support
     
     css += '}\n'
     return css
@@ -206,68 +204,6 @@ export default function themeCSSGenerator(): Plugin {
     return css
   }
 
-  // Generate dark mode variables by adapting light mode colors
-  const generateDarkModeVariables = (themeObj: MultiThemeConfig): string => {
-    // 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}: ${subValue};\n`
-            }
-          })
-        } else if (typeof colorValue === 'string' || typeof colorValue === 'number') {
-          // Handle direct color values
-          css += `  --cs-colors-${colorKey}: ${colorValue};\n`
-        }
-      })
-    }
-    
-    // Add some basic dark mode variables for testing
-    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: MultiThemeConfig): Partial<MultiThemeConfig> => {
-    // This would implement your dark mode color adaptation logic
-    // You can use the existing ColorManager or implement custom logic
-    return {
-      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
-    }
-  }
 
   // Generate CSS for all themes using structured approach
   const generateAllThemesCSS = () => {
@@ -279,29 +215,41 @@ export default function themeCSSGenerator(): Plugin {
       }
       
       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: ${themeObj.meta.name} -> ${themeFileName}`)
 
-          // Add import to index file
-          indexCSS += `@import './${themeFileName}.js';\n`
+          // Write individual theme file (skip default theme file generation)
+          if (themeKey !== 'default') {
+            const themeFileName = `${themeKey}.css`
+            const themeOutputPath = resolve(themesDir, themeFileName)
+            writeFileSync(themeOutputPath, themeCSS, 'utf-8')
 
-          // Set stan-design theme as default
-          if (themeKey === 'stan-design') {
-            defaultThemeCSS += themeCSS
+            console.log(`✅ Generated dual-mode CSS for theme: ${themeObj.meta.name} -> ${themeFileName}`)
+
+            // Add import to index file
+            indexCSS += `/* @import './${themeFileName}.js'; */\n`
+          } else {
+            // Create empty default.css file with comment
+            const themeFileName = `${themeKey}.css`
+            const themeOutputPath = resolve(themesDir, themeFileName)
+            const emptyDefaultCSS = `/* Default theme CSS generation disabled - variables available via inheritance in other themes */\n`
+            writeFileSync(themeOutputPath, emptyDefaultCSS, 'utf-8')
+
+            console.log(`✅ Created empty default.css file (theme variables available via inheritance)`)
+
+            // Comment out import in index
+            indexCSS += `/* @import './${themeFileName}.js'; */\n`
           }
-          
+
+          // Set stan-design theme as default for backward compatibility file (disabled)
+          // if (themeKey === 'stan-design') {
+          //   defaultThemeCSS += themeCSS
+          // }
+
         } catch (error) {
           console.error(`❌ Error processing ${themeKey}:`, error)
         }
@@ -311,9 +259,10 @@ export default function themeCSSGenerator(): Plugin {
       const indexPath = resolve(config.root, 'src/styles/themes/index.css')
       writeFileSync(indexPath, indexCSS, 'utf-8')
 
-      // Write default theme file (for backward compatibility)
+      // Write empty default theme file (for backward compatibility)
       const defaultPath = resolve(config.root, 'src/styles/generated-theme-variables.css')
-      writeFileSync(defaultPath, defaultThemeCSS, 'utf-8')
+      const emptyDefaultCSS = `/* Generated theme variables file disabled - theme variables available via individual theme files */\n`
+      writeFileSync(defaultPath, emptyDefaultCSS, 'utf-8')
 
       console.log('✅ Theme CSS Generator: Generated all dual-mode theme files successfully')
       

package/src/styles/base/index.css

@@ -2,6 +2,6 @@
 /* This layer contains all foundational styles and CSS variables */
 
 /* Theme variables and foundational styles */
-@import '../generated-theme-variables.css';
+/* @import '../generated-theme-variables.css'; */
 @import './theme.css';
 @import './fonts.css';

package/src/styles/base/variables.css

@@ -1,5 +1,5 @@
 /* CSS Variables - Base Layer */
 /* Import theme variables from generated files */
 
-@import '../generated-theme-variables.css';
+/*@import '../generated-theme-variables.css';*/
 @import './fonts.css';

package/src/styles/components/base/button.css

@@ -529,7 +529,13 @@
   border-color: var(--cs-modes-dark-colors-border);
 }
 
-/* Ghost variant automatically adapts to theme via CSS variables */
+.dark .button--variant-ghost {
+  background-color: transparent;
+}
+
+.dark .button--variant-ghost:hover {
+  background-color: var(--cs-modes-dark-colors-interactive-hover);
+}
 
 .dark .button--variant-destructive {
   background-color: var(--cs-modes-dark-colors-semantic-error);