@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.11 → 0.2.17

package/dist/themes/high-contrast.js

@@ -1,496 +1,356 @@
-import { ColorThemeConfig, MultiThemeConfig } from './types';
-
-// High contrast theme configuration
-export interface HighContrastThemeConfig extends MultiThemeConfig {
-  highContrast: {
-    enabled: boolean;
-    contrastRatio: number; // Target contrast ratio (WCAG AAA = 7.0)
-    enhancedColors: boolean; // Use enhanced color palette
-    borderEmphasis: boolean; // Add borders for better definition
-    textEmphasis: boolean; // Enhanced text styling
-    focusIndicators: boolean; // Enhanced focus indicators
-  };
-}
-
 // High contrast color utilities
 export class HighContrastColors {
-  // WCAG contrast ratio calculation
-  static calculateContrastRatio(foreground: string, background: string): number {
-    const fgLuminance = this.getLuminance(foreground);
-    const bgLuminance = this.getLuminance(background);
-    
-    const lighter = Math.max(fgLuminance, bgLuminance);
-    const darker = Math.min(fgLuminance, bgLuminance);
-    
-    return (lighter + 0.05) / (darker + 0.05);
-  }
-
-  // Get relative luminance of a color
-  private static getLuminance(color: string): number {
-    const rgb = this.hexToRgb(color);
-    if (!rgb) return 0;
-    
-    const { r, g, b } = rgb;
-    
-    const rsRGB = r / 255;
-    const gsRGB = g / 255;
-    const bsRGB = b / 255;
-    
-    const rL = rsRGB <= 0.03928 ? rsRGB / 12.92 : Math.pow((rsRGB + 0.055) / 1.055, 2.4);
-    const gL = gsRGB <= 0.03928 ? gsRGB / 12.92 : Math.pow((gsRGB + 0.055) / 1.055, 2.4);
-    const bL = bsRGB <= 0.03928 ? bsRGB / 12.92 : Math.pow((bsRGB + 0.055) / 1.055, 2.4);
-    
-    return 0.2126 * rL + 0.7152 * gL + 0.0722 * bL;
-  }
-
-  // Convert hex color to RGB
-  private static hexToRgb(hex: string): { r: number; g: number; b: number } | null {
-    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    if (!result) return null;
-    
-    return {
-      r: parseInt(result[1], 16),
-      g: parseInt(result[2], 16),
-      b: parseInt(result[3], 16)
-    };
-  }
-
-  // Check if contrast ratio meets WCAG requirements
-  static meetsWCAGRequirements(foreground: string, background: string, level: 'AA' | 'AAA' = 'AA'): boolean {
-    const ratio = this.calculateContrastRatio(foreground, background);
-    const requiredRatio = level === 'AA' ? 4.5 : 7.0;
-    
-    return ratio >= requiredRatio;
-  }
-
-  // Generate high contrast color variants
-  static generateHighContrastVariants(baseColor: string, backgroundColor: string, targetRatio: number = 7.0): string[] {
-    const variants: string[] = [];
-    
-    // Generate lighter and darker variants
-    for (let i = 1; i <= 10; i++) {
-      const lighter = this.adjustColorBrightness(baseColor, i * 0.1);
-      const darker = this.adjustColorBrightness(baseColor, -i * 0.1);
-      
-      if (this.calculateContrastRatio(lighter, backgroundColor) >= targetRatio) {
-        variants.push(lighter);
-      }
-      
-      if (this.calculateContrastRatio(darker, backgroundColor) >= targetRatio) {
-        variants.push(darker);
-      }
+    // WCAG contrast ratio calculation
+    static calculateContrastRatio(foreground, background) {
+        const fgLuminance = this.getLuminance(foreground);
+        const bgLuminance = this.getLuminance(background);
+        const lighter = Math.max(fgLuminance, bgLuminance);
+        const darker = Math.min(fgLuminance, bgLuminance);
+        return (lighter + 0.05) / (darker + 0.05);
     }
-    
-    return variants;
-  }
-
-  // Adjust color brightness
-  private static adjustColorBrightness(color: string, factor: number): string {
-    const rgb = this.hexToRgb(color);
-    if (!rgb) return color;
-    
-    const { r, g, b } = rgb;
-    
-    const newR = Math.max(0, Math.min(255, Math.round(r + (255 - r) * factor)));
-    const newG = Math.max(0, Math.min(255, Math.round(g + (255 - g) * factor)));
-    const newB = Math.max(0, Math.min(255, Math.round(b + (255 - b) * factor)));
-    
-    return `#${newR.toString(16).padStart(2, '0')}${newG.toString(16).padStart(2, '0')}${newB.toString(16).padStart(2, '0')}`;
-  }
-
-  // Find best high contrast color
-  static findBestHighContrastColor(foreground: string, background: string, targetRatio: number = 7.0): string {
-    const ratio = this.calculateContrastRatio(foreground, background);
-    
-    if (ratio >= targetRatio) {
-      return foreground;
-    }
-    
-    // Try lighter variants first
-    for (let i = 1; i <= 20; i++) {
-      const lighter = this.adjustColorBrightness(foreground, i * 0.05);
-      if (this.calculateContrastRatio(lighter, background) >= targetRatio) {
-        return lighter;
-      }
+    // Get relative luminance of a color
+    static getLuminance(color) {
+        const rgb = this.hexToRgb(color);
+        if (!rgb)
+            return 0;
+        const { r, g, b } = rgb;
+        const rsRGB = r / 255;
+        const gsRGB = g / 255;
+        const bsRGB = b / 255;
+        const rL = rsRGB <= 0.03928 ? rsRGB / 12.92 : Math.pow((rsRGB + 0.055) / 1.055, 2.4);
+        const gL = gsRGB <= 0.03928 ? gsRGB / 12.92 : Math.pow((gsRGB + 0.055) / 1.055, 2.4);
+        const bL = bsRGB <= 0.03928 ? bsRGB / 12.92 : Math.pow((bsRGB + 0.055) / 1.055, 2.4);
+        return 0.2126 * rL + 0.7152 * gL + 0.0722 * bL;
     }
-    
-    // Try darker variants
-    for (let i = 1; i <= 20; i++) {
-      const darker = this.adjustColorBrightness(foreground, -i * 0.05);
-      if (this.calculateContrastRatio(darker, background) >= targetRatio) {
-        return darker;
-      }
+    // Convert hex color to RGB
+    static hexToRgb(hex) {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        if (!result)
+            return null;
+        return {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16)
+        };
+    }
+    // Check if contrast ratio meets WCAG requirements
+    static meetsWCAGRequirements(foreground, background, level = 'AA') {
+        const ratio = this.calculateContrastRatio(foreground, background);
+        const requiredRatio = level === 'AA' ? 4.5 : 7.0;
+        return ratio >= requiredRatio;
+    }
+    // Generate high contrast color variants
+    static generateHighContrastVariants(baseColor, backgroundColor, targetRatio = 7.0) {
+        const variants = [];
+        // Generate lighter and darker variants
+        for (let i = 1; i <= 10; i++) {
+            const lighter = this.adjustColorBrightness(baseColor, i * 0.1);
+            const darker = this.adjustColorBrightness(baseColor, -i * 0.1);
+            if (this.calculateContrastRatio(lighter, backgroundColor) >= targetRatio) {
+                variants.push(lighter);
+            }
+            if (this.calculateContrastRatio(darker, backgroundColor) >= targetRatio) {
+                variants.push(darker);
+            }
+        }
+        return variants;
+    }
+    // Adjust color brightness
+    static adjustColorBrightness(color, factor) {
+        const rgb = this.hexToRgb(color);
+        if (!rgb)
+            return color;
+        const { r, g, b } = rgb;
+        const newR = Math.max(0, Math.min(255, Math.round(r + (255 - r) * factor)));
+        const newG = Math.max(0, Math.min(255, Math.round(g + (255 - g) * factor)));
+        const newB = Math.max(0, Math.min(255, Math.round(b + (255 - b) * factor)));
+        return `#${newR.toString(16).padStart(2, '0')}${newG.toString(16).padStart(2, '0')}${newB.toString(16).padStart(2, '0')}`;
+    }
+    // Find best high contrast color
+    static findBestHighContrastColor(foreground, background, targetRatio = 7.0) {
+        const ratio = this.calculateContrastRatio(foreground, background);
+        if (ratio >= targetRatio) {
+            return foreground;
+        }
+        // Try lighter variants first
+        for (let i = 1; i <= 20; i++) {
+            const lighter = this.adjustColorBrightness(foreground, i * 0.05);
+            if (this.calculateContrastRatio(lighter, background) >= targetRatio) {
+                return lighter;
+            }
+        }
+        // Try darker variants
+        for (let i = 1; i <= 20; i++) {
+            const darker = this.adjustColorBrightness(foreground, -i * 0.05);
+            if (this.calculateContrastRatio(darker, background) >= targetRatio) {
+                return darker;
+            }
+        }
+        // Fallback to black or white
+        const blackRatio = this.calculateContrastRatio('#000000', background);
+        const whiteRatio = this.calculateContrastRatio('#FFFFFF', background);
+        return blackRatio > whiteRatio ? '#000000' : '#FFFFFF';
     }
-    
-    // Fallback to black or white
-    const blackRatio = this.calculateContrastRatio('#000000', background);
-    const whiteRatio = this.calculateContrastRatio('#FFFFFF', background);
-    
-    return blackRatio > whiteRatio ? '#000000' : '#FFFFFF';
-  }
 }
-
 // High contrast theme manager
 export class HighContrastThemeManager {
-  private isEnabled: boolean = false;
-  private targetContrastRatio: number = 7.0; // WCAG AAA
-  private enhancedColors: boolean = true;
-  private borderEmphasis: boolean = true;
-  private textEmphasis: boolean = true;
-  private focusIndicators: boolean = true;
-  private originalTheme: MultiThemeConfig | null = null;
-  private highContrastTheme: HighContrastThemeConfig | null = null;
-
-  constructor() {
-    this.initializeSystemPreference();
-  }
-
-  // Initialize system preference detection
-  private initializeSystemPreference(): void {
-    if (typeof window !== 'undefined' && window.matchMedia) {
-      const highContrastQuery = window.matchMedia('(prefers-contrast: high)');
-      this.isEnabled = highContrastQuery.matches;
-      
-      highContrastQuery.addEventListener('change', (e) => {
-        this.isEnabled = e.matches;
+    constructor() {
+        this.isEnabled = false;
+        this.targetContrastRatio = 7.0; // WCAG AAA
+        this.enhancedColors = true;
+        this.borderEmphasis = true;
+        this.textEmphasis = true;
+        this.focusIndicators = true;
+        this.originalTheme = null;
+        this.highContrastTheme = null;
+        this.initializeSystemPreference();
+    }
+    // Initialize system preference detection
+    initializeSystemPreference() {
+        if (typeof window !== 'undefined' && window.matchMedia) {
+            const highContrastQuery = window.matchMedia('(prefers-contrast: high)');
+            this.isEnabled = highContrastQuery.matches;
+            highContrastQuery.addEventListener('change', (e) => {
+                this.isEnabled = e.matches;
+                this.applyHighContrast();
+            });
+        }
+    }
+    // Enable high contrast mode
+    enable() {
+        this.isEnabled = true;
         this.applyHighContrast();
-      });
-    }
-  }
-
-  // Enable high contrast mode
-  enable(): void {
-    this.isEnabled = true;
-    this.applyHighContrast();
-  }
-
-  // Disable high contrast mode
-  disable(): void {
-    this.isEnabled = false;
-    this.removeHighContrast();
-  }
-
-  // Toggle high contrast mode
-  toggle(): void {
-    if (this.isEnabled) {
-      this.disable();
-    } else {
-      this.enable();
-    }
-  }
-
-  // Check if high contrast is enabled
-  isHighContrastEnabled(): boolean {
-    return this.isEnabled;
-  }
-
-  // Set target contrast ratio
-  setTargetContrastRatio(ratio: number): void {
-    this.targetContrastRatio = Math.max(1.0, Math.min(21.0, ratio));
-    if (this.isEnabled) {
-      this.applyHighContrast();
-    }
-  }
-
-  // Get current target contrast ratio
-  getTargetContrastRatio(): number {
-    return this.targetContrastRatio;
-  }
-
-  // Enable/disable enhanced colors
-  setEnhancedColors(enabled: boolean): void {
-    this.enhancedColors = enabled;
-    if (this.isEnabled) {
-      this.applyHighContrast();
-    }
-  }
-
-  // Enable/disable border emphasis
-  setBorderEmphasis(enabled: boolean): void {
-    this.borderEmphasis = enabled;
-    if (this.isEnabled) {
-      this.applyHighContrast();
-    }
-  }
-
-  // Enable/disable text emphasis
-  setTextEmphasis(enabled: boolean): void {
-    this.textEmphasis = enabled;
-    if (this.isEnabled) {
-      this.applyHighContrast();
-    }
-  }
-
-  // Enable/disable focus indicators
-  setFocusIndicators(enabled: boolean): void {
-    this.focusIndicators = enabled;
-    if (this.isEnabled) {
-      this.applyHighContrast();
-    }
-  }
-
-  // Apply high contrast to current theme
-  applyHighContrast(): void {
-    if (!this.isEnabled) return;
-
-    // Store original theme if not already stored
-    if (!this.originalTheme) {
-      this.originalTheme = this.getCurrentTheme();
-    }
-
-    // Generate high contrast theme
-    this.highContrastTheme = this.generateHighContrastTheme(this.originalTheme);
-    
-    // Apply the theme
-    this.applyTheme(this.highContrastTheme);
-    
-    // Add high contrast CSS classes
-    document.documentElement.classList.add('high-contrast');
-    
-    // Apply high contrast styles
-    this.applyHighContrastStyles();
-  }
-
-  // Remove high contrast mode
-  removeHighContrast(): void {
-    if (!this.isEnabled) return;
-
-    // Remove high contrast CSS classes
-    document.documentElement.classList.remove('high-contrast');
-    
-    // Remove high contrast styles
-    this.removeHighContrastStyles();
-    
-    // Restore original theme
-    if (this.originalTheme) {
-      this.applyTheme(this.originalTheme);
-    }
-  }
-
-  // Generate high contrast theme from base theme
-  private generateHighContrastTheme(baseTheme: MultiThemeConfig): HighContrastThemeConfig {
-    const highContrastTheme: HighContrastThemeConfig = {
-      ...baseTheme,
-      highContrast: {
-        enabled: true,
-        contrastRatio: this.targetContrastRatio,
-        enhancedColors: this.enhancedColors,
-        borderEmphasis: this.borderEmphasis,
-        textEmphasis: this.textEmphasis,
-        focusIndicators: this.focusIndicators
-      }
-    };
-
+    }
+    // Disable high contrast mode
+    disable() {
+        this.isEnabled = false;
+        this.removeHighContrast();
+    }
+    // Toggle high contrast mode
+    toggle() {
+        if (this.isEnabled) {
+            this.disable();
+        }
+        else {
+            this.enable();
+        }
+    }
+    // Check if high contrast is enabled
+    isHighContrastEnabled() {
+        return this.isEnabled;
+    }
+    // Set target contrast ratio
+    setTargetContrastRatio(ratio) {
+        this.targetContrastRatio = Math.max(1.0, Math.min(21.0, ratio));
+        if (this.isEnabled) {
+            this.applyHighContrast();
+        }
+    }
+    // Get current target contrast ratio
+    getTargetContrastRatio() {
+        return this.targetContrastRatio;
+    }
+    // Enable/disable enhanced colors
+    setEnhancedColors(enabled) {
+        this.enhancedColors = enabled;
+        if (this.isEnabled) {
+            this.applyHighContrast();
+        }
+    }
+    // Enable/disable border emphasis
+    setBorderEmphasis(enabled) {
+        this.borderEmphasis = enabled;
+        if (this.isEnabled) {
+            this.applyHighContrast();
+        }
+    }
+    // Enable/disable text emphasis
+    setTextEmphasis(enabled) {
+        this.textEmphasis = enabled;
+        if (this.isEnabled) {
+            this.applyHighContrast();
+        }
+    }
+    // Enable/disable focus indicators
+    setFocusIndicators(enabled) {
+        this.focusIndicators = enabled;
+        if (this.isEnabled) {
+            this.applyHighContrast();
+        }
+    }
+    // Apply high contrast to current theme
+    applyHighContrast() {
+        if (!this.isEnabled)
+            return;
+        // Store original theme if not already stored
+        if (!this.originalTheme) {
+            this.originalTheme = this.getCurrentTheme();
+        }
+        // Generate high contrast theme
+        this.highContrastTheme = this.generateHighContrastTheme(this.originalTheme);
+        // Apply the theme
+        this.applyTheme(this.highContrastTheme);
+        // Add high contrast CSS classes
+        document.documentElement.classList.add('high-contrast');
+        // Apply high contrast styles
+        this.applyHighContrastStyles();
+    }
+    // Remove high contrast mode
+    removeHighContrast() {
+        if (!this.isEnabled)
+            return;
+        // Remove high contrast CSS classes
+        document.documentElement.classList.remove('high-contrast');
+        // Remove high contrast styles
+        this.removeHighContrastStyles();
+        // Restore original theme
+        if (this.originalTheme) {
+            this.applyTheme(this.originalTheme);
+        }
+    }
+    // Generate high contrast theme from base theme
+    generateHighContrastTheme(baseTheme) {
+        const highContrastTheme = {
+            ...baseTheme,
+            highContrast: {
+                enabled: true,
+                contrastRatio: this.targetContrastRatio,
+                enhancedColors: this.enhancedColors,
+                borderEmphasis: this.borderEmphasis,
+                textEmphasis: this.textEmphasis,
+                focusIndicators: this.focusIndicators
+            }
+        };
+        // Enhance colors for high contrast
+        if (this.enhancedColors) {
+            highContrastTheme.colors = this.enhanceColorsForHighContrast(baseTheme.colors);
+        }
+        // Enhance fonts for high contrast
+        if (this.textEmphasis) {
+            highContrastTheme.fonts = this.enhanceFontsForHighContrast(baseTheme.fonts);
+        }
+        // Enhance spacing for high contrast
+        highContrastTheme.spacing = this.enhanceSpacingForHighContrast(baseTheme.spacing);
+        // Enhance shadows for high contrast
+        highContrastTheme.shadows = this.enhanceShadowsForHighContrast(baseTheme.shadows);
+        return highContrastTheme;
+    }
     // Enhance colors for high contrast
-    if (this.enhancedColors) {
-      highContrastTheme.colors = this.enhanceColorsForHighContrast(baseTheme.colors);
+    enhanceColorsForHighContrast(colors) {
+        const enhancedColors = { ...colors };
+        // Enhance primary colors
+        if (enhancedColors.primary) {
+            enhancedColors.primary = {
+                ...enhancedColors.primary,
+                500: HighContrastColors.findBestHighContrastColor(enhancedColors.primary[500], enhancedColors.surface?.background || '#FFFFFF', this.targetContrastRatio),
+                light: HighContrastColors.findBestHighContrastColor(enhancedColors.primary.light || enhancedColors.primary[100], enhancedColors.surface?.background || '#FFFFFF', this.targetContrastRatio),
+                dark: HighContrastColors.findBestHighContrastColor(enhancedColors.primary.dark || enhancedColors.primary[900], enhancedColors.surface?.background || '#FFFFFF', this.targetContrastRatio)
+            };
+        }
+        // Enhance secondary colors
+        if (enhancedColors.secondary) {
+            enhancedColors.secondary = {
+                ...enhancedColors.secondary,
+                500: HighContrastColors.findBestHighContrastColor(enhancedColors.secondary[500], enhancedColors.surface?.background || '#FFFFFF', this.targetContrastRatio),
+                light: HighContrastColors.findBestHighContrastColor(enhancedColors.secondary.light || enhancedColors.secondary[100], enhancedColors.surface?.background || '#FFFFFF', this.targetContrastRatio),
+                dark: HighContrastColors.findBestHighContrastColor(enhancedColors.secondary.dark || enhancedColors.secondary[900], enhancedColors.surface?.background || '#FFFFFF', this.targetContrastRatio)
+            };
+        }
+        // Enhance error colors
+        if (enhancedColors.semantic?.error) {
+            enhancedColors.semantic = {
+                ...enhancedColors.semantic,
+                error: HighContrastColors.findBestHighContrastColor(enhancedColors.semantic.error, enhancedColors.surface?.background || '#FFFFFF', this.targetContrastRatio)
+            };
+        }
+        // Enhance warning colors
+        if (enhancedColors.semantic?.warning) {
+            enhancedColors.semantic = {
+                ...enhancedColors.semantic,
+                warning: HighContrastColors.findBestHighContrastColor(enhancedColors.semantic.warning, enhancedColors.surface?.background || '#FFFFFF', this.targetContrastRatio)
+            };
+        }
+        // Enhance success colors
+        if (enhancedColors.semantic?.success) {
+            enhancedColors.semantic = {
+                ...enhancedColors.semantic,
+                success: HighContrastColors.findBestHighContrastColor(enhancedColors.semantic.success, enhancedColors.surface?.background || '#FFFFFF', this.targetContrastRatio)
+            };
+        }
+        // Enhance info colors
+        if (enhancedColors.semantic?.info) {
+            enhancedColors.semantic = {
+                ...enhancedColors.semantic,
+                info: HighContrastColors.findBestHighContrastColor(enhancedColors.semantic.info, enhancedColors.surface?.background || '#FFFFFF', this.targetContrastRatio)
+            };
+        }
+        // Enhance text colors
+        if (enhancedColors.text) {
+            enhancedColors.text = {
+                ...enhancedColors.text,
+                primary: HighContrastColors.findBestHighContrastColor(enhancedColors.text.primary, enhancedColors.surface?.background || '#FFFFFF', this.targetContrastRatio),
+                secondary: HighContrastColors.findBestHighContrastColor(enhancedColors.text.secondary, enhancedColors.surface?.background || '#FFFFFF', this.targetContrastRatio)
+            };
+        }
+        return enhancedColors;
     }
-
     // Enhance fonts for high contrast
-    if (this.textEmphasis) {
-      highContrastTheme.fonts = this.enhanceFontsForHighContrast(baseTheme.fonts);
+    enhanceFontsForHighContrast(fonts) {
+        const enhancedFonts = { ...fonts };
+        // Increase font weights for better visibility
+        if (enhancedFonts.primary?.weights) {
+            enhancedFonts.primary.weights = enhancedFonts.primary.weights.map((weight) => Math.max(400, weight));
+        }
+        if (enhancedFonts.body?.weights) {
+            enhancedFonts.body.weights = enhancedFonts.body.weights.map((weight) => Math.max(400, weight));
+        }
+        // Increase letter spacing for better readability
+        if (enhancedFonts.primary?.letterSpacing) {
+            enhancedFonts.primary.letterSpacing = {
+                ...enhancedFonts.primary.letterSpacing,
+                tight: Math.max(0.025, enhancedFonts.primary.letterSpacing.tight || 0.025),
+                normal: Math.max(0, enhancedFonts.primary.letterSpacing.normal || 0),
+                wide: Math.max(0.025, enhancedFonts.primary.letterSpacing.wide || 0.025)
+            };
+        }
+        return enhancedFonts;
     }
-
     // Enhance spacing for high contrast
-    highContrastTheme.spacing = this.enhanceSpacingForHighContrast(baseTheme.spacing);
-
+    enhanceSpacingForHighContrast(spacing) {
+        const enhancedSpacing = { ...spacing };
+        // Increase focus ring spacing
+        if (enhancedSpacing.focusRing) {
+            enhancedSpacing.focusRing = Math.max(2, enhancedSpacing.focusRing || 2);
+        }
+        // Increase border widths
+        if (enhancedSpacing.borderWidth) {
+            enhancedSpacing.borderWidth = {
+                ...enhancedSpacing.borderWidth,
+                thin: Math.max(1, enhancedSpacing.borderWidth.thin || 1),
+                normal: Math.max(2, enhancedSpacing.borderWidth.normal || 2),
+                thick: Math.max(3, enhancedSpacing.borderWidth.thick || 3)
+            };
+        }
+        return enhancedSpacing;
+    }
     // Enhance shadows for high contrast
-    highContrastTheme.shadows = this.enhanceShadowsForHighContrast(baseTheme.shadows);
-
-    return highContrastTheme;
-  }
-
-  // Enhance colors for high contrast
-  private enhanceColorsForHighContrast(colors: ColorThemeConfig): ColorThemeConfig {
-    const enhancedColors: ColorThemeConfig = { ...colors };
-
-    // Enhance primary colors
-    if (enhancedColors.primary) {
-      enhancedColors.primary = {
-        ...enhancedColors.primary,
-        500: HighContrastColors.findBestHighContrastColor(
-          enhancedColors.primary[500],
-          enhancedColors.surface?.background || '#FFFFFF',
-          this.targetContrastRatio
-        ),
-        light: HighContrastColors.findBestHighContrastColor(
-          enhancedColors.primary.light || enhancedColors.primary[100],
-          enhancedColors.surface?.background || '#FFFFFF',
-          this.targetContrastRatio
-        ),
-        dark: HighContrastColors.findBestHighContrastColor(
-          enhancedColors.primary.dark || enhancedColors.primary[900],
-          enhancedColors.surface?.background || '#FFFFFF',
-          this.targetContrastRatio
-        )
-      };
-    }
-
-    // Enhance secondary colors
-    if (enhancedColors.secondary) {
-      enhancedColors.secondary = {
-        ...enhancedColors.secondary,
-        500: HighContrastColors.findBestHighContrastColor(
-          enhancedColors.secondary[500],
-          enhancedColors.surface?.background || '#FFFFFF',
-          this.targetContrastRatio
-        ),
-        light: HighContrastColors.findBestHighContrastColor(
-          enhancedColors.secondary.light || enhancedColors.secondary[100],
-          enhancedColors.surface?.background || '#FFFFFF',
-          this.targetContrastRatio
-        ),
-        dark: HighContrastColors.findBestHighContrastColor(
-          enhancedColors.secondary.dark || enhancedColors.secondary[900],
-          enhancedColors.surface?.background || '#FFFFFF',
-          this.targetContrastRatio
-        )
-      };
-    }
-
-    // Enhance error colors
-    if (enhancedColors.semantic?.error) {
-      enhancedColors.semantic = {
-        ...enhancedColors.semantic,
-        error: HighContrastColors.findBestHighContrastColor(
-          enhancedColors.semantic.error,
-          enhancedColors.surface?.background || '#FFFFFF',
-          this.targetContrastRatio
-        )
-      };
-    }
-
-    // Enhance warning colors
-    if (enhancedColors.semantic?.warning) {
-      enhancedColors.semantic = {
-        ...enhancedColors.semantic,
-        warning: HighContrastColors.findBestHighContrastColor(
-          enhancedColors.semantic.warning,
-          enhancedColors.surface?.background || '#FFFFFF',
-          this.targetContrastRatio
-        )
-      };
-    }
-
-    // Enhance success colors
-    if (enhancedColors.semantic?.success) {
-      enhancedColors.semantic = {
-        ...enhancedColors.semantic,
-        success: HighContrastColors.findBestHighContrastColor(
-          enhancedColors.semantic.success,
-          enhancedColors.surface?.background || '#FFFFFF',
-          this.targetContrastRatio
-        )
-      };
-    }
-
-    // Enhance info colors
-    if (enhancedColors.semantic?.info) {
-      enhancedColors.semantic = {
-        ...enhancedColors.semantic,
-        info: HighContrastColors.findBestHighContrastColor(
-          enhancedColors.semantic.info,
-          enhancedColors.surface?.background || '#FFFFFF',
-          this.targetContrastRatio
-        )
-      };
-    }
-
-    // Enhance text colors
-    if (enhancedColors.text) {
-      enhancedColors.text = {
-        ...enhancedColors.text,
-        primary: HighContrastColors.findBestHighContrastColor(
-          enhancedColors.text.primary,
-          enhancedColors.surface?.background || '#FFFFFF',
-          this.targetContrastRatio
-        ),
-        secondary: HighContrastColors.findBestHighContrastColor(
-          enhancedColors.text.secondary,
-          enhancedColors.surface?.background || '#FFFFFF',
-          this.targetContrastRatio
-        )
-      };
-    }
-
-    return enhancedColors;
-  }
-
-  // Enhance fonts for high contrast
-  private enhanceFontsForHighContrast(fonts: any): any {
-    const enhancedFonts = { ...fonts };
-
-    // Increase font weights for better visibility
-    if (enhancedFonts.primary?.weights) {
-      enhancedFonts.primary.weights = enhancedFonts.primary.weights.map((weight: number) => 
-        Math.max(400, weight)
-      );
-    }
-
-    if (enhancedFonts.body?.weights) {
-      enhancedFonts.body.weights = enhancedFonts.body.weights.map((weight: number) => 
-        Math.max(400, weight)
-      );
-    }
-
-    // Increase letter spacing for better readability
-    if (enhancedFonts.primary?.letterSpacing) {
-      enhancedFonts.primary.letterSpacing = {
-        ...enhancedFonts.primary.letterSpacing,
-        tight: Math.max(0.025, enhancedFonts.primary.letterSpacing.tight || 0.025),
-        normal: Math.max(0, enhancedFonts.primary.letterSpacing.normal || 0),
-        wide: Math.max(0.025, enhancedFonts.primary.letterSpacing.wide || 0.025)
-      };
-    }
-
-    return enhancedFonts;
-  }
-
-  // Enhance spacing for high contrast
-  private enhanceSpacingForHighContrast(spacing: any): any {
-    const enhancedSpacing = { ...spacing };
-
-    // Increase focus ring spacing
-    if (enhancedSpacing.focusRing) {
-      enhancedSpacing.focusRing = Math.max(2, enhancedSpacing.focusRing || 2);
-    }
-
-    // Increase border widths
-    if (enhancedSpacing.borderWidth) {
-      enhancedSpacing.borderWidth = {
-        ...enhancedSpacing.borderWidth,
-        thin: Math.max(1, enhancedSpacing.borderWidth.thin || 1),
-        normal: Math.max(2, enhancedSpacing.borderWidth.normal || 2),
-        thick: Math.max(3, enhancedSpacing.borderWidth.thick || 3)
-      };
-    }
-
-    return enhancedSpacing;
-  }
-
-  // Enhance shadows for high contrast
-  private enhanceShadowsForHighContrast(shadows: any): any {
-    const enhancedShadows = { ...shadows };
-
-    // Increase shadow intensity
-    if (enhancedShadows.intensity) {
-      enhancedShadows.intensity = Math.min(1.0, enhancedShadows.intensity * 1.5);
-    }
-
-    // Increase shadow spread
-    if (enhancedShadows.spread) {
-      enhancedShadows.spread = Math.max(0, enhancedShadows.spread * 1.2);
-    }
-
-    return enhancedShadows;
-  }
-
-  // Apply high contrast styles
-  private applyHighContrastStyles(): void {
-    const style = document.createElement('style');
-    style.id = 'high-contrast-styles';
-    
-    style.textContent = `
+    enhanceShadowsForHighContrast(shadows) {
+        const enhancedShadows = { ...shadows };
+        // Increase shadow intensity
+        if (enhancedShadows.intensity) {
+            enhancedShadows.intensity = Math.min(1.0, enhancedShadows.intensity * 1.5);
+        }
+        // Increase shadow spread
+        if (enhancedShadows.spread) {
+            enhancedShadows.spread = Math.max(0, enhancedShadows.spread * 1.2);
+        }
+        return enhancedShadows;
+    }
+    // Apply high contrast styles
+    applyHighContrastStyles() {
+        const style = document.createElement('style');
+        style.id = 'high-contrast-styles';
+        style.textContent = `
       .high-contrast {
         --focus-ring-width: 3px;
         --focus-ring-color: #FFFFFF;
@@ -530,92 +390,68 @@ export class HighContrastThemeManager {
         border: var(--border-emphasis) !important;
       }
     `;
-    
-    document.head.appendChild(style);
-  }
-
-  // Remove high contrast styles
-  private removeHighContrastStyles(): void {
-    const style = document.getElementById('high-contrast-styles');
-    if (style) {
-      style.remove();
-    }
-  }
-
-  // Get current theme (placeholder - would integrate with actual theme system)
-  private getCurrentTheme(): MultiThemeConfig {
-    // This would integrate with the actual theme system
-    return {} as MultiThemeConfig;
-  }
-
-  // Apply theme (placeholder - would integrate with actual theme system)
-  private applyTheme(theme: MultiThemeConfig): void {
-    // This would integrate with the actual theme system
-    console.log('Applying theme:', theme);
-  }
-
-  // Get high contrast configuration
-  getConfiguration(): {
-    enabled: boolean;
-    targetContrastRatio: number;
-    enhancedColors: boolean;
-    borderEmphasis: boolean;
-    textEmphasis: boolean;
-    focusIndicators: boolean;
-  } {
-    return {
-      enabled: this.isEnabled,
-      targetContrastRatio: this.targetContrastRatio,
-      enhancedColors: this.enhancedColors,
-      borderEmphasis: this.borderEmphasis,
-      textEmphasis: this.textEmphasis,
-      focusIndicators: this.focusIndicators
-    };
-  }
-
-  // Validate high contrast theme
-  validateHighContrastTheme(theme: HighContrastThemeConfig): boolean {
-    if (!theme.highContrast?.enabled) return false;
-    
-    // Validate contrast ratios
-    if (theme.colors) {
-      const background = theme.colors.surface?.background || '#FFFFFF';
-      
-      // Check primary color contrast
-      if (theme.colors.primary?.[500]) {
-        const ratio = HighContrastColors.calculateContrastRatio(
-          theme.colors.primary[500],
-          background
-        );
-        if (ratio < this.targetContrastRatio) {
-          console.warn(`Primary color contrast ratio ${ratio} is below target ${this.targetContrastRatio}`);
-          return false;
+        document.head.appendChild(style);
+    }
+    // Remove high contrast styles
+    removeHighContrastStyles() {
+        const style = document.getElementById('high-contrast-styles');
+        if (style) {
+            style.remove();
         }
-      }
-      
-      // Check text color contrast
-      if (theme.colors.text?.primary) {
-        const ratio = HighContrastColors.calculateContrastRatio(
-          theme.colors.text.primary,
-          background
-        );
-        if (ratio < this.targetContrastRatio) {
-          console.warn(`Text color contrast ratio ${ratio} is below target ${this.targetContrastRatio}`);
-          return false;
+    }
+    // Get current theme (placeholder - would integrate with actual theme system)
+    getCurrentTheme() {
+        // This would integrate with the actual theme system
+        return {};
+    }
+    // Apply theme (placeholder - would integrate with actual theme system)
+    applyTheme(theme) {
+        // This would integrate with the actual theme system
+        console.log('Applying theme:', theme);
+    }
+    // Get high contrast configuration
+    getConfiguration() {
+        return {
+            enabled: this.isEnabled,
+            targetContrastRatio: this.targetContrastRatio,
+            enhancedColors: this.enhancedColors,
+            borderEmphasis: this.borderEmphasis,
+            textEmphasis: this.textEmphasis,
+            focusIndicators: this.focusIndicators
+        };
+    }
+    // Validate high contrast theme
+    validateHighContrastTheme(theme) {
+        if (!theme.highContrast?.enabled)
+            return false;
+        // Validate contrast ratios
+        if (theme.colors) {
+            const background = theme.colors.surface?.background || '#FFFFFF';
+            // Check primary color contrast
+            if (theme.colors.primary?.[500]) {
+                const ratio = HighContrastColors.calculateContrastRatio(theme.colors.primary[500], background);
+                if (ratio < this.targetContrastRatio) {
+                    console.warn(`Primary color contrast ratio ${ratio} is below target ${this.targetContrastRatio}`);
+                    return false;
+                }
+            }
+            // Check text color contrast
+            if (theme.colors.text?.primary) {
+                const ratio = HighContrastColors.calculateContrastRatio(theme.colors.text.primary, background);
+                if (ratio < this.targetContrastRatio) {
+                    console.warn(`Text color contrast ratio ${ratio} is below target ${this.targetContrastRatio}`);
+                    return false;
+                }
+            }
         }
-      }
+        return true;
     }
-    
-    return true;
-  }
 }
-
 // Export default instances
 export const highContrastThemeManager = new HighContrastThemeManager();
-
 // Export default
 export default {
-  HighContrastColors,
-  HighContrastThemeManager,
-  highContrastThemeManager
+    HighContrastColors,
+    HighContrastThemeManager,
+    highContrastThemeManager
 };