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

package/dist/themes/themeCSSUpdater.d.ts

@@ -0,0 +1,229 @@
+
+export class ThemeCSSUpdater {
+  private root: HTMLElement;
+
+  constructor() {
+    this.root = document.documentElement;
+  }
+
+  applyTheme(theme: CompleteThemeConfig): void {
+    this.applyColors(theme.colors);
+    this.applyFonts(theme.fonts);
+    this.applySpacing(theme.spacing);
+    this.applyShadows(theme.shadows);
+    this.applyTransitions(theme.transitions);
+    this.applyBorderRadius(theme.borderRadius);
+  }
+
+  private applyColors(colors: CompleteThemeConfig['colors']): void {
+    // 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);
+  }
+
+  private applyFonts(fonts: CompleteThemeConfig['fonts']): void {
+    // Helper function to build font family string with fallbacks
+    const buildFontFamily = (config: any) => {
+      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));
+  }
+
+  private applySpacing(spacing: CompleteThemeConfig['spacing']): void {
+    // 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);
+  }
+
+  private applyShadows(shadows: CompleteThemeConfig['shadows']): void {
+    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);
+    });
+  }
+
+  private applyTransitions(transitions: CompleteThemeConfig['transitions']): void {
+    // 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);
+    });
+  }
+
+  private applyBorderRadius(borderRadius: CompleteThemeConfig['borderRadius']): void {
+    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);
+    });
+  }
+
+  clearTheme(): void {
+    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);
+    });
+  }
+}
+
+export declare const themeCSSUpdater: new ThemeCSSUpdater();

package/dist/themes/themeCSSUpdater.esm.js

@@ -0,0 +1,250 @@
+/**
+ * Theme CSS Variable Updater
+ * Applies theme configurations to CSS custom properties
+ */
+
+import { CompleteThemeConfig } from './types';
+
+export class ThemeCSSUpdater {
+  private root;
+
+  constructor() {
+    this.root = document.documentElement;
+  }
+
+  /**
+   * Apply a complete theme configuration to CSS custom properties
+   */
+  applyTheme(theme));
+    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
+   */
+  private applyColors(colors])).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
+   */
+  private applyFonts(fonts])= (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
+   */
+  private applySpacing(spacing])).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
+   */
+  private applyShadows(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
+   */
+  private applyTransitions(transitions])).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
+   */
+  private applyBorderRadius(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()= [
+      '--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();