@rakeyshgidwani/roger-ui-bank-theme-jeremy 0.5.3

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

@@ -0,0 +1,277 @@
+import { resolve } from 'path';
+import { existsSync, mkdirSync, writeFileSync } from 'fs';
+import { defaultThemes } from '../themes/base-themes';
+export default function themeCSSGenerator() {
+    let config;
+    // Helper function to safely convert values to strings
+    const valueToString = (value) => {
+        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) => {
+        return `--cs-${path.join('-').replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)}`;
+    };
+    // Generate @font-face declarations from font configuration
+    const generateFontFaces = (themeObj) => {
+        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`;
+                }
+            }
+        });
+        return css;
+    };
+    // NEW: Extract breakpoints from anywhere in the theme object
+    const extractBreakpoints = (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: Generate breakpoint CSS variables and @custom-media queries
+    const generateBreakpointVariables = (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}: ${value};\n`;
+        });
+        css += '\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: ${value});\n`;
+        });
+        css += '\n';
+        return css;
+    };
+    // Helper function to check if font is Google font
+    const isFontGoogleFont = (themeObj, fontKey) => {
+        const fonts = themeObj.fonts;
+        return fonts?.[fontKey]?.source?.type === 'google';
+    };
+    // Recursively generate CSS variables from theme object
+    const generateCSSVariables = (obj, path = [], rootTheme, localVars = new Set()) => {
+        let css = '';
+        if (typeof obj !== 'object' || obj === null) {
+            return css;
+        }
+        Object.entries(obj).forEach(([key, value]) => {
+            const currentPath = [...path, key];
+            // Skip font file paths for Google fonts
+            if (path.length >= 3 && path[0] === 'fonts' && path[2] === 'source' && key === 'files') {
+                const fontKey = path[1];
+                if (rootTheme && isFontGoogleFont(rootTheme, fontKey)) {
+                    // Skip generating CSS variables for Google font files
+                    return;
+                }
+            }
+            // Skip breakpoints as they're handled by generateBreakpointVariables
+            if (key === 'breakpoints') {
+                return;
+            }
+            if (typeof value === 'string' || typeof value === 'number') {
+                // Generate CSS variable for primitive values
+                const cssVarName = createCSSVarName(currentPath);
+                // Only prevent duplicates within the same traversal (same CSS rule block)
+                if (!localVars.has(cssVarName)) {
+                    css += `  ${cssVarName}: ${value};\n`;
+                    localVars.add(cssVarName);
+                }
+            }
+            else if (Array.isArray(value)) {
+                // Handle arrays (like font weights, tags)
+                const cssVarName = createCSSVarName(currentPath);
+                // Only prevent duplicates within the same traversal (same CSS rule block)
+                if (!localVars.has(cssVarName)) {
+                    css += `  ${cssVarName}: ${valueToString(value)};\n`;
+                    localVars.add(cssVarName);
+                }
+            }
+            else if (typeof value === 'object' && value !== null) {
+                // Recursively process nested objects
+                css += generateCSSVariables(value, currentPath, rootTheme, localVars);
+            }
+        });
+        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: Extract breakpoints from anywhere in the theme
+        const breakpoints = extractBreakpoints(themeObj);
+        // Generate light mode variables (default)
+        css += `:root {\n`;
+        css += `  /* Light Mode Variables */\n`;
+        // NEW: Generate breakpoint variables first
+        css += generateBreakpointVariables(breakpoints);
+        // Generate all other CSS variables (each CSS block has its own scope)
+        const localVars = new Set();
+        css += generateCSSVariables(themeObj, [], themeObj, localVars);
+        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);
+        }
+        // Note: All themes should define modes.dark.colors for proper dark mode support
+        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}: ${subValue};\n`;
+                    }
+                });
+            }
+            else if (typeof colorValue === 'string' || typeof colorValue === 'number') {
+                // Handle direct color values
+                css += `  --cs-colors-${colorKey}: ${colorValue};\n`;
+            }
+        });
+        return css;
+    };
+    // 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: true });
+            }
+            let indexCSS = '/* Theme Index - Import all themes */\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 (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);
+                }
+            }
+            // Write theme index file
+            const indexPath = resolve(config.root, 'src/styles/themes/index.css');
+            writeFileSync(indexPath, indexCSS, 'utf-8');
+            // Write empty default theme file (for backward compatibility)
+            const defaultPath = resolve(config.root, 'src/styles/generated-theme-variables.css');
+            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) {
+            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: themes/themes/ directory not found');
+                return;
+            }
+            // Generate CSS for all themes
+            generateAllThemesCSS();
+        }
+        catch (error) {
+            console.error('❌ Theme CSS Generator Error:', error);
+        }
+    };
+    return {
+        name: 'theme-css-generator',
+        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}.ts`) ||
+                file.includes('inheritance.ts') ||
+                file.includes('types.ts'));
+            if (shouldRegenerate) {
+                generateThemeCSS();
+            }
+        }
+    };
+}

package/dist/provider.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { jeremyTheme } from './theme';
+export interface JeremyProviderProps {
+    children: React.ReactNode;
+    theme?: typeof jeremyTheme;
+}
+export declare const JeremyProvider: React.FC<JeremyProviderProps>;
+export default JeremyProvider;
+//# sourceMappingURL=provider.d.ts.map

package/dist/provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../src/provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGtC,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,WAAW,CAAC;CAC5B;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAQxD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/provider.esm.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jeremyTheme } from './theme';
+export const JeremyProvider = ({ children, theme = jeremyTheme, ...props }) => (_jsx("div", { "data-theme": "jeremy", style: { '--theme-name': 'jeremy' }, children: children }));
+export default JeremyProvider;

package/dist/provider.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jeremyTheme } from './theme';
+export const JeremyProvider = ({ children, theme = jeremyTheme, ...props }) => (_jsx("div", { "data-theme": "jeremy", style: { '--theme-name': 'jeremy' }, children: children }));
+export default JeremyProvider;

package/dist/styles/layers/validation.d.ts

@@ -0,0 +1,20 @@
+/**
+ * CSS Layers Validation Tool
+ * Tests cascade order and specificity control in CSS layers
+ */
+/**
+ * Test if CSS layers are working correctly
+ * @returns {Object} Test results
+ */
+export function validateCSSLayers(): any;
+/**
+ * Generate a visual report of layer validation
+ * @param {Object} results - Validation results
+ * @returns {HTMLElement} Report element
+ */
+export function generateLayerReport(results: any): HTMLElement;
+/**
+ * Run validation and display results
+ */
+export function runLayerValidation(): any;
+//# sourceMappingURL=validation.d.ts.map

package/dist/styles/layers/validation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation.d.ts","sourceRoot":"","sources":["../../../src/styles/layers/validation.js"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;GAGG;AACH,yCAgCC;AAoMD;;;;GAIG;AACH,mDAFa,WAAW,CAqCvB;AAED;;GAEG;AACH,0CAqBC"}

package/dist/styles/layers/validation.esm.js

@@ -0,0 +1,275 @@
+/**
+ * CSS Layers Validation Tool
+ * Tests cascade order and specificity control in CSS layers
+ */
+/**
+ * Test if CSS layers are working correctly
+ * @returns {Object} Test results
+ */
+export function validateCSSLayers() {
+    const results = {
+        layerOrder: testLayerOrder(),
+        specificity: testSpecificity(),
+        inheritance: testInheritance(),
+        responsive: testResponsiveOrder(),
+        summary: null
+    };
+    // Calculate summary
+    const totalTests = Object.values(results).reduce((acc, testGroup) => {
+        if (testGroup && typeof testGroup === 'object' && testGroup.tests) {
+            return acc + testGroup.tests.length;
+        }
+        return acc;
+    }, 0);
+    const passedTests = Object.values(results).reduce((acc, testGroup) => {
+        if (testGroup && typeof testGroup === 'object' && testGroup.tests) {
+            return acc + testGroup.tests.filter(test => test.passed).length;
+        }
+        return acc;
+    }, 0);
+    results.summary = {
+        total: totalTests,
+        passed: passedTests,
+        failed: totalTests - passedTests,
+        percentage: totalTests > 0 ? Math.round((passedTests / totalTests) * 100) : 0
+    };
+    return results;
+}
+/**
+ * Test layer cascade order
+ */
+function testLayerOrder() {
+    const tests = [];
+    // Create test element
+    const testElement = document.createElement('div');
+    testElement.className = 'layer-test';
+    testElement.style.position = 'absolute';
+    testElement.style.visibility = 'hidden';
+    document.body.appendChild(testElement);
+    try {
+        const computedStyle = window.getComputedStyle(testElement);
+        const backgroundColor = computedStyle.backgroundColor;
+        const content = computedStyle.content;
+        // Test that overrides layer wins (purple background)
+        tests.push({
+            name: 'Layer order - overrides wins',
+            passed: backgroundColor === 'rgb(128, 0, 128)' || backgroundColor === 'purple',
+            expected: 'purple background from overrides layer',
+            actual: backgroundColor
+        });
+        tests.push({
+            name: 'Layer content property',
+            passed: content === '"overrides"',
+            expected: '"overrides"',
+            actual: content
+        });
+    }
+    catch (error) {
+        tests.push({
+            name: 'Layer order test',
+            passed: false,
+            expected: 'No errors',
+            actual: error.message
+        });
+    }
+    finally {
+        document.body.removeChild(testElement);
+    }
+    return {
+        category: 'Layer Order',
+        tests
+    };
+}
+/**
+ * Test specificity within layers
+ */
+function testSpecificity() {
+    const tests = [];
+    const testElement = document.createElement('div');
+    testElement.className = 'specificity-test';
+    testElement.style.position = 'absolute';
+    testElement.style.visibility = 'hidden';
+    document.body.appendChild(testElement);
+    try {
+        const computedStyle = window.getComputedStyle(testElement);
+        const backgroundColor = computedStyle.backgroundColor;
+        // Test that utilities layer wins over components layer
+        tests.push({
+            name: 'Specificity - utilities over components',
+            passed: backgroundColor === 'rgb(0, 0, 255)' || backgroundColor === 'blue',
+            expected: 'blue background from utilities layer',
+            actual: backgroundColor
+        });
+    }
+    catch (error) {
+        tests.push({
+            name: 'Specificity test',
+            passed: false,
+            expected: 'No errors',
+            actual: error.message
+        });
+    }
+    finally {
+        document.body.removeChild(testElement);
+    }
+    return {
+        category: 'Specificity',
+        tests
+    };
+}
+/**
+ * Test inheritance within layers
+ */
+function testInheritance() {
+    const tests = [];
+    const parentElement = document.createElement('div');
+    parentElement.className = 'inheritance-test';
+    const childElement = document.createElement('div');
+    childElement.className = 'child';
+    parentElement.appendChild(childElement);
+    parentElement.style.position = 'absolute';
+    parentElement.style.visibility = 'hidden';
+    document.body.appendChild(parentElement);
+    try {
+        const parentStyle = window.getComputedStyle(parentElement);
+        const childStyle = window.getComputedStyle(childElement);
+        // Test that utilities layer color overrides components layer
+        tests.push({
+            name: 'Layer inheritance - parent color',
+            passed: parentStyle.color === 'rgb(0, 0, 255)' || parentStyle.color === 'blue',
+            expected: 'blue color from utilities layer',
+            actual: parentStyle.color
+        });
+        // Test that child inherits the overridden color
+        tests.push({
+            name: 'Layer inheritance - child inherits',
+            passed: childStyle.color === 'rgb(0, 0, 255)' || childStyle.color === 'blue',
+            expected: 'inherited blue color',
+            actual: childStyle.color
+        });
+    }
+    catch (error) {
+        tests.push({
+            name: 'Inheritance test',
+            passed: false,
+            expected: 'No errors',
+            actual: error.message
+        });
+    }
+    finally {
+        document.body.removeChild(parentElement);
+    }
+    return {
+        category: 'Inheritance',
+        tests
+    };
+}
+/**
+ * Test responsive behavior within layers
+ */
+function testResponsiveOrder() {
+    const tests = [];
+    const testElement = document.createElement('div');
+    testElement.className = 'responsive-layer-test';
+    testElement.style.position = 'absolute';
+    testElement.style.visibility = 'hidden';
+    document.body.appendChild(testElement);
+    try {
+        const computedStyle = window.getComputedStyle(testElement);
+        const backgroundColor = computedStyle.backgroundColor;
+        // Test that utilities layer wins in responsive context
+        if (window.innerWidth <= 768) {
+            tests.push({
+                name: 'Responsive layers - mobile utilities win',
+                passed: backgroundColor === 'rgb(0, 128, 0)' || backgroundColor === 'green',
+                expected: 'green background from utilities layer',
+                actual: backgroundColor
+            });
+        }
+        else {
+            tests.push({
+                name: 'Responsive layers - desktop utilities win',
+                passed: backgroundColor === 'rgb(0, 0, 255)' || backgroundColor === 'blue',
+                expected: 'blue background from utilities layer',
+                actual: backgroundColor
+            });
+        }
+    }
+    catch (error) {
+        tests.push({
+            name: 'Responsive layer test',
+            passed: false,
+            expected: 'No errors',
+            actual: error.message
+        });
+    }
+    finally {
+        document.body.removeChild(testElement);
+    }
+    return {
+        category: 'Responsive',
+        tests
+    };
+}
+/**
+ * Generate a visual report of layer validation
+ * @param {Object} results - Validation results
+ * @returns {HTMLElement} Report element
+ */
+export function generateLayerReport(results) {
+    const reportElement = document.createElement('div');
+    reportElement.className = 'layer-diagnostic';
+    const title = document.createElement('h3');
+    title.textContent = `CSS Layers Validation (${results.summary.passed}/${results.summary.total} passed)`;
+    reportElement.appendChild(title);
+    // Add overall status
+    const overallStatus = document.createElement('div');
+    overallStatus.className = `test-result ${results.summary.percentage >= 80 ? 'pass' : 'fail'}`;
+    overallStatus.textContent = `Overall: ${results.summary.percentage}% passed`;
+    reportElement.appendChild(overallStatus);
+    // Add category results
+    Object.values(results).forEach(category => {
+        if (category && category.category && category.tests) {
+            const categoryDiv = document.createElement('div');
+            categoryDiv.style.marginTop = '10px';
+            categoryDiv.innerHTML = `<strong>${category.category}:</strong>`;
+            reportElement.appendChild(categoryDiv);
+            category.tests.forEach(test => {
+                const testDiv = document.createElement('div');
+                testDiv.className = `test-result ${test.passed ? 'pass' : 'fail'}`;
+                testDiv.textContent = `${test.passed ? '✓' : '✗'} ${test.name}`;
+                if (!test.passed) {
+                    testDiv.title = `Expected: ${test.expected}, Got: ${test.actual}`;
+                }
+                reportElement.appendChild(testDiv);
+            });
+        }
+    });
+    return reportElement;
+}
+/**
+ * Run validation and display results
+ */
+export function runLayerValidation() {
+    const results = validateCSSLayers();
+    const report = generateLayerReport(results);
+    // Remove existing report
+    const existingReport = document.querySelector('.layer-diagnostic');
+    if (existingReport) {
+        existingReport.remove();
+    }
+    // Add new report
+    document.body.appendChild(report);
+    // Auto-remove after 10 seconds
+    setTimeout(() => {
+        if (report.parentNode) {
+            report.parentNode.removeChild(report);
+        }
+    }, 10000);
+    return results;
+}
+// Auto-run validation if in development mode
+if (process.env.NODE_ENV === 'development') {
+    // Run validation after a short delay to ensure CSS is loaded
+    setTimeout(runLayerValidation, 1000);
+}