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

package/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 All notable changes to the stan-design theme package will be documented in this file.
 
-## [0.2.49] - 2025-10-07
+## [0.2.51] - 2025-10-08
 
 ### Added
 - Initial release of stan-design theme package

package/dist/plugins/theme-css-generator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-css-generator.d.ts","sourceRoot":"","sources":["../../src/plugins/theme-css-generator.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAIlC,MAAM,CAAC,OAAO,UAAU,iBAAiB,IAAI,MAAM,CA0WlD"}
+{"version":3,"file":"theme-css-generator.d.ts","sourceRoot":"","sources":["../../src/plugins/theme-css-generator.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAIlC,MAAM,CAAC,OAAO,UAAU,iBAAiB,IAAI,MAAM,CAuTlD"}

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

@@ -148,10 +148,7 @@ export default function themeCSSGenerator() {
             // 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;
     };
@@ -174,64 +171,6 @@ export default function themeCSSGenerator() {
         });
         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}: ${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) => {
-        // 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
-            } // Type assertion to bypass strict typing for now
-        };
-    };
     // Generate CSS for all themes using structured approach
     const generateAllThemesCSS = () => {
         try {
@@ -241,23 +180,34 @@ export default function themeCSSGenerator() {
                 mkdirSync(themesDir, { recursive: true });
             }
             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`;
-                    // Set stan-design theme as default
-                    if (themeKey === 'stan-design') {
-                        defaultThemeCSS += themeCSS;
+                    // 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');
+                        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);
@@ -266,9 +216,10 @@ export default function themeCSSGenerator() {
             // 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)
+            // 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');
         }
         catch (error) {

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

@@ -148,10 +148,7 @@ export default function themeCSSGenerator() {
             // 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;
     };
@@ -174,64 +171,6 @@ export default function themeCSSGenerator() {
         });
         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}: ${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) => {
-        // 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
-            } // Type assertion to bypass strict typing for now
-        };
-    };
     // Generate CSS for all themes using structured approach
     const generateAllThemesCSS = () => {
         try {
@@ -241,23 +180,34 @@ export default function themeCSSGenerator() {
                 mkdirSync(themesDir, { recursive: true });
             }
             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`;
-                    // Set stan-design theme as default
-                    if (themeKey === 'stan-design') {
-                        defaultThemeCSS += themeCSS;
+                    // 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');
+                        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);
@@ -266,9 +216,10 @@ export default function themeCSSGenerator() {
             // 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)
+            // 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');
         }
         catch (error) {