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

package/dist/themes/themeCSSUpdater.js

@@ -0,0 +1,227 @@
+/**
+ * Theme CSS Variable Updater
+ * Applies theme configurations to CSS custom properties
+ */
+export class ThemeCSSUpdater {
+    constructor() {
+        this.root = document.documentElement;
+    }
+    /**
+     * Apply a complete theme configuration to CSS custom properties
+     */
+    applyTheme(theme) {
+        this.applyColors(theme.colors);
+        this.applyFonts(theme.fonts);
+        this.applySpacing(theme.spacing);
+        this.applyShadows(theme.shadows);
+        this.applyTransitions(theme.transitions);
+        this.applyBorderRadius(theme.borderRadius);
+    }
+    /**
+     * Apply color variables to CSS custom properties
+     */
+    applyColors(colors) {
+        // Primary colors - set both flat and nested versions for compatibility
+        Object.entries(colors.primary).forEach(([shade, value]) => {
+            // Set flat version (for backward compatibility)
+            this.root.style.setProperty(`--cs-primary-${shade}`, value);
+            // Set nested version (for badge CSS and other components)
+            this.root.style.setProperty(`--cs-colors-primary-${shade}`, value);
+        });
+        // Secondary colors - set both flat and nested versions
+        Object.entries(colors.secondary).forEach(([shade, value]) => {
+            // Set flat version (for backward compatibility)
+            this.root.style.setProperty(`--cs-secondary-${shade}`, value);
+            // Set nested version (for badge CSS and other components)
+            this.root.style.setProperty(`--cs-colors-secondary-${shade}`, value);
+        });
+        // Semantic colors - set both flat and nested versions
+        this.root.style.setProperty('--cs-success', colors.semantic.success);
+        this.root.style.setProperty('--cs-colors-semantic-success', colors.semantic.success);
+        this.root.style.setProperty('--cs-warning', colors.semantic.warning);
+        this.root.style.setProperty('--cs-colors-semantic-warning', colors.semantic.warning);
+        this.root.style.setProperty('--cs-error', colors.semantic.error);
+        this.root.style.setProperty('--cs-colors-semantic-error', colors.semantic.error);
+        this.root.style.setProperty('--cs-info', colors.semantic.info);
+        this.root.style.setProperty('--cs-colors-semantic-info', colors.semantic.info);
+        // Neutral colors - set both flat and nested versions
+        Object.entries(colors.neutral).forEach(([shade, value]) => {
+            // Set flat version (for backward compatibility)
+            this.root.style.setProperty(`--cs-neutral-${shade}`, value);
+            // Set nested version (for components that expect it)
+            this.root.style.setProperty(`--cs-colors-neutral-${shade}`, value);
+        });
+        // Surface colors - set both flat and nested versions
+        this.root.style.setProperty('--cs-page-bg', colors.surface.background);
+        this.root.style.setProperty('--cs-colors-surface-background', colors.surface.background);
+        this.root.style.setProperty('--cs-surface-bg', colors.surface.surface);
+        this.root.style.setProperty('--cs-colors-surface-surface', colors.surface.surface);
+        this.root.style.setProperty('--cs-border', colors.surface.border);
+        this.root.style.setProperty('--cs-colors-border', colors.surface.border);
+        this.root.style.setProperty('--cs-divider', colors.surface.divider);
+        this.root.style.setProperty('--cs-colors-divider', colors.surface.divider);
+        // Text colors - set both flat and nested versions
+        this.root.style.setProperty('--cs-text-primary', colors.text.primary);
+        this.root.style.setProperty('--cs-colors-text-primary', colors.text.primary);
+        this.root.style.setProperty('--cs-text-secondary', colors.text.secondary);
+        this.root.style.setProperty('--cs-colors-text-secondary', colors.text.secondary);
+        this.root.style.setProperty('--cs-text-muted', colors.text.muted);
+        this.root.style.setProperty('--cs-colors-text-muted', colors.text.muted);
+        this.root.style.setProperty('--cs-text-inverse', colors.text.inverse);
+        this.root.style.setProperty('--cs-colors-text-inverse', colors.text.inverse);
+        this.root.style.setProperty('--cs-text-on-primary', colors.text.onPrimary);
+        this.root.style.setProperty('--cs-colors-text-on-primary', colors.text.onPrimary);
+        this.root.style.setProperty('--cs-text-on-secondary', colors.text.onSecondary);
+        this.root.style.setProperty('--cs-colors-text-on-secondary', colors.text.onSecondary);
+        this.root.style.setProperty('--cs-text-on-surface', colors.text.onSurface);
+        this.root.style.setProperty('--cs-colors-text-on-surface', colors.text.onSurface);
+        // Interactive colors - set both flat and nested versions
+        this.root.style.setProperty('--cs-hover-bg', colors.interactive.hover);
+        this.root.style.setProperty('--cs-colors-interactive-hover', colors.interactive.hover);
+        this.root.style.setProperty('--cs-active-bg', colors.interactive.active);
+        this.root.style.setProperty('--cs-colors-interactive-active', colors.interactive.active);
+        this.root.style.setProperty('--cs-focus', colors.interactive.focus);
+        this.root.style.setProperty('--cs-colors-interactive-focus', colors.interactive.focus);
+        this.root.style.setProperty('--cs-disabled', colors.interactive.disabled);
+        this.root.style.setProperty('--cs-colors-interactive-disabled', colors.interactive.disabled);
+    }
+    /**
+     * Apply font variables to CSS custom properties
+     */
+    applyFonts(fonts) {
+        // Helper function to build font family string with fallbacks
+        const buildFontFamily = (config) => {
+            if (config.fallbacks && config.fallbacks.length > 0) {
+                return `${config.family}, ${config.fallbacks.join(', ')}`;
+            }
+            return config.family;
+        };
+        // Primary font
+        this.root.style.setProperty('--cs-fonts-primary-family', buildFontFamily(fonts.primary));
+        this.root.style.setProperty('--cs-fonts-primary-weights', fonts.primary.weights.join(', '));
+        // Font sizes
+        Object.entries(fonts.primary.sizes).forEach(([size, value]) => {
+            this.root.style.setProperty(`--cs-fonts-primary-sizes-${size}`, value);
+        });
+        // Line heights
+        Object.entries(fonts.primary.lineHeights).forEach(([height, value]) => {
+            this.root.style.setProperty(`--cs-fonts-primary-line-heights-${height}`, value);
+        });
+        // Letter spacing
+        Object.entries(fonts.primary.letterSpacing).forEach(([spacing, value]) => {
+            this.root.style.setProperty(`--cs-fonts-primary-letter-spacing-${spacing}`, value);
+        });
+        // Secondary font
+        this.root.style.setProperty('--cs-fonts-secondary-family', buildFontFamily(fonts.secondary));
+        // Display font
+        this.root.style.setProperty('--cs-fonts-display-family', buildFontFamily(fonts.display));
+        // Body font
+        this.root.style.setProperty('--cs-fonts-body-family', buildFontFamily(fonts.body));
+        // Mono font
+        this.root.style.setProperty('--cs-fonts-mono-family', buildFontFamily(fonts.mono));
+    }
+    /**
+     * Apply spacing variables to CSS custom properties
+     */
+    applySpacing(spacing) {
+        // Scale spacing - set both flat and nested versions
+        Object.entries(spacing.scale).forEach(([size, value]) => {
+            // Set flat version (for backward compatibility)
+            this.root.style.setProperty(`--cs-spacing-${size}`, value);
+            // Set nested version (for badge CSS and other components)
+            this.root.style.setProperty(`--cs-spacing-scale-${size}`, value);
+        });
+        // Component spacing
+        this.root.style.setProperty('--cs-button-padding', spacing.component.button.padding);
+        this.root.style.setProperty('--cs-button-margin', spacing.component.button.margin);
+        this.root.style.setProperty('--cs-button-gap', spacing.component.button.gap);
+        this.root.style.setProperty('--cs-input-padding', spacing.component.input.padding);
+        this.root.style.setProperty('--cs-input-margin', spacing.component.input.margin);
+        this.root.style.setProperty('--cs-input-gap', spacing.component.input.gap);
+        this.root.style.setProperty('--cs-card-padding', spacing.component.card.padding);
+        this.root.style.setProperty('--cs-card-margin', spacing.component.card.margin);
+        this.root.style.setProperty('--cs-card-gap', spacing.component.card.gap);
+        // Layout spacing
+        this.root.style.setProperty('--cs-page-spacing', spacing.layout.page);
+        this.root.style.setProperty('--cs-section-spacing', spacing.layout.section);
+        this.root.style.setProperty('--cs-container-spacing', spacing.layout.container);
+        this.root.style.setProperty('--cs-grid-spacing', spacing.layout.grid);
+    }
+    /**
+     * Apply shadow variables to CSS custom properties
+     */
+    applyShadows(shadows) {
+        Object.entries(shadows).forEach(([shadow, value]) => {
+            // Set flat version (for backward compatibility)
+            this.root.style.setProperty(`--cs-shadow-${shadow}`, value);
+            // Set nested version (for badge CSS and other components)
+            this.root.style.setProperty(`--cs-shadows-${shadow}`, value);
+        });
+    }
+    /**
+     * Apply transition variables to CSS custom properties
+     */
+    applyTransitions(transitions) {
+        // Duration - set both flat and nested versions
+        Object.entries(transitions.duration).forEach(([duration, value]) => {
+            // Set flat version (for backward compatibility)
+            this.root.style.setProperty(`--cs-transition-duration-${duration}`, value);
+            // Set nested version (for badge CSS and other components)
+            this.root.style.setProperty(`--cs-transitions-duration-${duration}`, value);
+        });
+        // Easing - set both flat and nested versions
+        Object.entries(transitions.easing).forEach(([ease, value]) => {
+            // Set flat version (for backward compatibility)
+            this.root.style.setProperty(`--cs-transition-easing-${ease}`, value);
+            // Set nested version (for badge CSS and other components)
+            this.root.style.setProperty(`--cs-transitions-easing-${ease}`, value);
+        });
+        // Properties - set both flat and nested versions
+        Object.entries(transitions.properties).forEach(([property, value]) => {
+            // Set flat version (for backward compatibility)
+            this.root.style.setProperty(`--cs-transition-${property}`, value);
+            // Set nested version (for badge CSS and other components)
+            this.root.style.setProperty(`--cs-transitions-properties-${property}`, value);
+        });
+    }
+    /**
+     * Apply border radius variables to CSS custom properties
+     */
+    applyBorderRadius(borderRadius) {
+        Object.entries(borderRadius).forEach(([size, value]) => {
+            // Set flat version (for backward compatibility)
+            this.root.style.setProperty(`--cs-border-radius-${size}`, value);
+            // Set nested version (for badge CSS and other components)
+            this.root.style.setProperty(`--cs-border-radius-${size}`, value);
+        });
+    }
+    /**
+     * Clear all theme CSS variables
+     */
+    clearTheme() {
+        const cssVars = [
+            '--cs-primary-50', '--cs-primary-100', '--cs-primary-200', '--cs-primary-300',
+            '--cs-primary-400', '--cs-primary-500', '--cs-primary-600', '--cs-primary-700',
+            '--cs-primary-800', '--cs-primary-900',
+            '--cs-secondary-50', '--cs-secondary-100', '--cs-secondary-200', '--cs-secondary-300',
+            '--cs-secondary-400', '--cs-secondary-500', '--cs-secondary-600', '--cs-secondary-700',
+            '--cs-secondary-800', '--cs-secondary-900',
+            '--cs-success', '--cs-warning', '--cs-error', '--cs-info',
+            '--cs-neutral-50', '--cs-neutral-100', '--cs-neutral-200', '--cs-neutral-300',
+            '--cs-neutral-400', '--cs-neutral-500', '--cs-neutral-600', '--cs-neutral-700',
+            '--cs-neutral-800', '--cs-neutral-900',
+            '--cs-page-bg', '--cs-surface-bg', '--cs-border', '--cs-divider',
+            '--cs-text-primary', '--cs-text-secondary', '--cs-text-muted', '--cs-text-inverse',
+            '--cs-text-on-primary', '--cs-text-on-secondary', '--cs-text-on-surface',
+            '--cs-hover-bg', '--cs-active-bg', '--cs-focus', '--cs-disabled',
+            '--cs-font-primary', '--cs-font-secondary', '--cs-font-display', '--cs-font-body', '--cs-font-mono'
+        ];
+        cssVars.forEach(varName => {
+            this.root.style.removeProperty(varName);
+        });
+    }
+}
+/**
+ * Default theme CSS updater instance
+ */
+export const themeCSSUpdater = new ThemeCSSUpdater();

package/dist/themes/themePersistence.d.ts

@@ -0,0 +1,84 @@
+/**
+ * Theme persistence utilities for managing theme preferences in localStorage
+ */
+export interface ThemePersistenceOptions {
+    storageKey?: string;
+    defaultTheme?: string;
+    enableSystemPreference?: boolean;
+    enableSystemThemeDetection?: boolean;
+    systemThemeStorageKey?: string;
+}
+export declare class ThemePersistence {
+    private storageKey;
+    private defaultTheme;
+    private enableSystemPreference;
+    private enableSystemThemeDetection;
+    private systemThemeStorageKey;
+    constructor(options?: ThemePersistenceOptions);
+    /**
+     * Get the stored theme preference
+     * Falls back to system preference if enabled, then default theme
+     */
+    getStoredTheme(): string;
+    /**
+     * Store the theme preference
+     */
+    setStoredTheme(themeName: string): void;
+    /**
+     * Clear the stored theme preference
+     */
+    clearStoredTheme(): void;
+    /**
+     * Get system color scheme preference
+     */
+    private getSystemPreference;
+    /**
+     * Listen for system preference changes
+     */
+    onSystemPreferenceChange(callback: (preference: string) => void): (() => void) | null;
+    /**
+     * Check if localStorage is available
+     */
+    isStorageAvailable(): boolean;
+    /**
+     * Get all available storage keys related to themes
+     */
+    getThemeKeys(): string[];
+    /**
+     * Get stored system theme preference
+     */
+    getStoredSystemTheme(): 'light' | 'dark' | null;
+    /**
+     * Store system theme preference
+     */
+    setStoredSystemTheme(theme: 'light' | 'dark'): void;
+    /**
+     * Clear stored system theme preference
+     */
+    clearStoredSystemTheme(): void;
+    /**
+     * Get comprehensive theme state including system theme
+     */
+    getThemeState(): {
+        theme: string;
+        systemTheme: 'light' | 'dark' | null;
+        isSystemThemeEnabled: boolean;
+    };
+    /**
+     * Set comprehensive theme state
+     */
+    setThemeState(state: {
+        theme?: string;
+        systemTheme?: 'light' | 'dark';
+        enableSystemTheme?: boolean;
+    }): void;
+}
+/**
+ * Default theme persistence instance
+ */
+export declare const defaultThemePersistence: ThemePersistence;
+/**
+ * Create a custom theme persistence instance
+ */
+export declare const createThemePersistence: (options: ThemePersistenceOptions) => ThemePersistence;
+//# sourceMappingURL=themePersistence.d.ts.map

package/dist/themes/themePersistence.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themePersistence.d.ts","sourceRoot":"","sources":["../../src/themes/themePersistence.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,uBAAuB;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,sBAAsB,CAAU;IACxC,OAAO,CAAC,0BAA0B,CAAU;IAC5C,OAAO,CAAC,qBAAqB,CAAS;gBAE1B,OAAO,GAAE,uBAA4B;IAQjD;;;OAGG;IACH,cAAc,IAAI,MAAM;IAwBxB;;OAEG;IACH,cAAc,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI;IAQvC;;OAEG;IACH,gBAAgB,IAAI,IAAI;IAQxB;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAY3B;;OAEG;IACH,wBAAwB,CAAC,QAAQ,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI;IA2BrF;;OAEG;IACH,kBAAkB,IAAI,OAAO;IAW7B;;OAEG;IACH,YAAY,IAAI,MAAM,EAAE;IAgBxB;;OAEG;IACH,oBAAoB,IAAI,OAAO,GAAG,MAAM,GAAG,IAAI;IAY/C;;OAEG;IACH,oBAAoB,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI;IAQnD;;OAEG;IACH,sBAAsB,IAAI,IAAI;IAQ9B;;OAEG;IACH,aAAa,IAAI;QACf,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAAC;QACrC,oBAAoB,EAAE,OAAO,CAAC;KAC/B;IAQD;;OAEG;IACH,aAAa,CAAC,KAAK,EAAE;QACnB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;QAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;KAC7B,GAAG,IAAI;CAWT;AAED;;GAEG;AACH,eAAO,MAAM,uBAAuB,kBAAyB,CAAC;AAE9D;;GAEG;AACH,eAAO,MAAM,sBAAsB,GAAI,SAAS,uBAAuB,qBAEtE,CAAC"}

package/dist/themes/themePersistence.esm.js

@@ -0,0 +1,207 @@
+/**
+ * Theme persistence utilities for managing theme preferences in localStorage
+ */
+export class ThemePersistence {
+    constructor(options = {}) {
+        this.storageKey = options.storageKey || 'stan-design-theme';
+        this.defaultTheme = options.defaultTheme || 'stan-design';
+        this.enableSystemPreference = options.enableSystemPreference ?? true;
+        this.enableSystemThemeDetection = options.enableSystemThemeDetection ?? true;
+        this.systemThemeStorageKey = options.systemThemeStorageKey || 'stan-design-system-theme';
+    }
+    /**
+     * Get the stored theme preference
+     * Falls back to system preference if enabled, then default theme
+     */
+    getStoredTheme() {
+        try {
+            // Check localStorage first
+            const stored = localStorage.getItem(this.storageKey);
+            if (stored) {
+                return stored;
+            }
+            // Fall back to system preference if enabled
+            if (this.enableSystemPreference) {
+                const systemPreference = this.getSystemPreference();
+                if (systemPreference) {
+                    return systemPreference;
+                }
+            }
+            // Finally fall back to default
+            return this.defaultTheme;
+        }
+        catch (error) {
+            console.warn('Failed to read theme from storage:', error);
+            return this.defaultTheme;
+        }
+    }
+    /**
+     * Store the theme preference
+     */
+    setStoredTheme(themeName) {
+        try {
+            localStorage.setItem(this.storageKey, themeName);
+        }
+        catch (error) {
+            console.warn('Failed to store theme preference:', error);
+        }
+    }
+    /**
+     * Clear the stored theme preference
+     */
+    clearStoredTheme() {
+        try {
+            localStorage.removeItem(this.storageKey);
+        }
+        catch (error) {
+            console.warn('Failed to clear theme preference:', error);
+        }
+    }
+    /**
+     * Get system color scheme preference
+     */
+    getSystemPreference() {
+        try {
+            if (typeof window !== 'undefined' && window.matchMedia) {
+                const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
+                return darkModeQuery.matches ? 'dark' : 'light';
+            }
+        }
+        catch (error) {
+            console.warn('Failed to detect system preference:', error);
+        }
+        return null;
+    }
+    /**
+     * Listen for system preference changes
+     */
+    onSystemPreferenceChange(callback) {
+        try {
+            if (typeof window !== 'undefined' && window.matchMedia) {
+                const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+                const handleChange = (event) => {
+                    const preference = event.matches ? 'dark' : 'light';
+                    callback(preference);
+                };
+                // Modern browsers
+                if (mediaQuery.addEventListener) {
+                    mediaQuery.addEventListener('change', handleChange);
+                    return () => mediaQuery.removeEventListener('change', handleChange);
+                }
+                // Legacy browsers
+                else if (mediaQuery.addListener) {
+                    mediaQuery.addListener(handleChange);
+                    return () => mediaQuery.removeListener(handleChange);
+                }
+            }
+        }
+        catch (error) {
+            console.warn('Failed to set up system preference listener:', error);
+        }
+        return null;
+    }
+    /**
+     * Check if localStorage is available
+     */
+    isStorageAvailable() {
+        try {
+            const test = '__test__';
+            localStorage.setItem(test, test);
+            localStorage.removeItem(test);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }
+    /**
+     * Get all available storage keys related to themes
+     */
+    getThemeKeys() {
+        try {
+            const keys = [];
+            for (let i = 0; i < localStorage.length; i++) {
+                const key = localStorage.key(i);
+                if (key && key.includes('theme')) {
+                    keys.push(key);
+                }
+            }
+            return keys;
+        }
+        catch (error) {
+            console.warn('Failed to get theme keys:', error);
+            return [];
+        }
+    }
+    /**
+     * Get stored system theme preference
+     */
+    getStoredSystemTheme() {
+        try {
+            const stored = localStorage.getItem(this.systemThemeStorageKey);
+            if (stored === 'light' || stored === 'dark') {
+                return stored;
+            }
+        }
+        catch (error) {
+            console.warn('Failed to read system theme from storage:', error);
+        }
+        return null;
+    }
+    /**
+     * Store system theme preference
+     */
+    setStoredSystemTheme(theme) {
+        try {
+            localStorage.setItem(this.systemThemeStorageKey, theme);
+        }
+        catch (error) {
+            console.warn('Failed to store system theme preference:', error);
+        }
+    }
+    /**
+     * Clear stored system theme preference
+     */
+    clearStoredSystemTheme() {
+        try {
+            localStorage.removeItem(this.systemThemeStorageKey);
+        }
+        catch (error) {
+            console.warn('Failed to clear system theme preference:', error);
+        }
+    }
+    /**
+     * Get comprehensive theme state including system theme
+     */
+    getThemeState() {
+        return {
+            theme: this.getStoredTheme(),
+            systemTheme: this.getStoredSystemTheme(),
+            isSystemThemeEnabled: this.enableSystemThemeDetection
+        };
+    }
+    /**
+     * Set comprehensive theme state
+     */
+    setThemeState(state) {
+        if (state.theme !== undefined) {
+            this.setStoredTheme(state.theme);
+        }
+        if (state.systemTheme !== undefined) {
+            this.setStoredSystemTheme(state.systemTheme);
+        }
+        if (state.enableSystemTheme !== undefined) {
+            this.enableSystemThemeDetection = state.enableSystemTheme;
+        }
+    }
+}
+/**
+ * Default theme persistence instance
+ */
+export const defaultThemePersistence = new ThemePersistence();
+/**
+ * Create a custom theme persistence instance
+ */
+export const createThemePersistence = (options) => {
+    return new ThemePersistence(options);
+};