@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.9 → 0.2.10

package/dist/themes/high-contrast.esm.js

@@ -2,19 +2,21 @@ import { ColorThemeConfig, MultiThemeConfig } from './types';
 
 // High contrast theme configuration
 export interface HighContrastThemeConfig extends MultiThemeConfig {
-  highContrast;
-    contrastRatio; // Target contrast ratio (WCAG AAA = 7.0)
-    enhancedColors; // Use enhanced color palette
-    borderEmphasis; // Add borders for better definition
-    textEmphasis; // Enhanced text styling
-    focusIndicators; // Enhanced focus indicators
+  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, background)= this.getLuminance(foreground);
+  static calculateContrastRatio(foreground: string, background: string): number {
+    const fgLuminance = this.getLuminance(foreground);
     const bgLuminance = this.getLuminance(background);
     
     const lighter = Math.max(fgLuminance, bgLuminance);
@@ -24,7 +26,8 @@ export class HighContrastColors {
   }
 
   // Get relative luminance of a color
-  private static getLuminance(color)= this.hexToRgb(color);
+  private static getLuminance(color: string): number {
+    const rgb = this.hexToRgb(color);
     if (!rgb) return 0;
     
     const { r, g, b } = rgb;
@@ -33,35 +36,36 @@ export class HighContrastColors {
     const gsRGB = g / 255;
     const bsRGB = b / 255;
     
-    const rL = rsRGB <= 0.03928 ? rsRGB / 12.92 ) / 1.055, 2.4);
-    const gL = gsRGB <= 0.03928 ? gsRGB / 12.92 ) / 1.055, 2.4);
-    const bL = bsRGB <= 0.03928 ? bsRGB / 12.92 ) / 1.055, 2.4);
+    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); g; b} | null {
+  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], 16),
-      g], 16),
-      b], 16)
+      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')= this.calculateContrastRatio(foreground, background);
-    const requiredRatio = level === 'AA' ? 4.5 ;
+  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, backgroundColor, targetRatio= 7.0)] {
-    const 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++) {
@@ -81,7 +85,8 @@ export class HighContrastColors {
   }
 
   // Adjust color brightness
-  private static adjustColorBrightness(color, factor)= this.hexToRgb(color);
+  private static adjustColorBrightness(color: string, factor: number): string {
+    const rgb = this.hexToRgb(color);
     if (!rgb) return color;
     
     const { r, g, b } = rgb;
@@ -94,7 +99,8 @@ export class HighContrastColors {
   }
 
   // Find best high contrast color
-  static findBestHighContrastColor(foreground, background, targetRatio= 7.0)= this.calculateContrastRatio(foreground, background);
+  static findBestHighContrastColor(foreground: string, background: string, targetRatio: number = 7.0): string {
+    const ratio = this.calculateContrastRatio(foreground, background);
     
     if (ratio >= targetRatio) {
       return foreground;
@@ -120,28 +126,29 @@ export class HighContrastColors {
     const blackRatio = this.calculateContrastRatio('#000000', background);
     const whiteRatio = this.calculateContrastRatio('#FFFFFF', background);
     
-    return blackRatio > whiteRatio ? '#000000' ;
+    return blackRatio > whiteRatio ? '#000000' : '#FFFFFF';
   }
 }
 
 // High contrast theme manager
 export class HighContrastThemeManager {
-  private isEnabled= false;
-  private targetContrastRatio= 7.0; // WCAG AAA
-  private enhancedColors= true;
-  private borderEmphasis= true;
-  private textEmphasis= true;
-  private focusIndicators= true;
-  private originalTheme= null;
-  private highContrastTheme= null;
+  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()== 'undefined' && window.matchMedia) {
-      const highContrastQuery = window.matchMedia('(prefers-contrast)');
+  private initializeSystemPreference(): void {
+    if (typeof window !== 'undefined' && window.matchMedia) {
+      const highContrastQuery = window.matchMedia('(prefers-contrast: high)');
       this.isEnabled = highContrastQuery.matches;
       
       highContrastQuery.addEventListener('change', (e) => {
@@ -152,17 +159,20 @@ export class HighContrastThemeManager {
   }
 
   // Enable high contrast mode
-  enable()= true;
+  enable(): void {
+    this.isEnabled = true;
     this.applyHighContrast();
   }
 
   // Disable high contrast mode
-  disable()= false;
+  disable(): void {
+    this.isEnabled = false;
     this.removeHighContrast();
   }
 
   // Toggle high contrast mode
-  toggle()) {
+  toggle(): void {
+    if (this.isEnabled) {
       this.disable();
     } else {
       this.enable();
@@ -170,50 +180,58 @@ export class HighContrastThemeManager {
   }
 
   // Check if high contrast is enabled
-  isHighContrastEnabled();
+  isHighContrastEnabled(): boolean {
+    return this.isEnabled;
   }
 
   // Set target contrast ratio
-  setTargetContrastRatio(ratio)= Math.max(1.0, Math.min(21.0, 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();
+  getTargetContrastRatio(): number {
+    return this.targetContrastRatio;
   }
 
   // Enable/disable enhanced colors
-  setEnhancedColors(enabled)= enabled;
+  setEnhancedColors(enabled: boolean): void {
+    this.enhancedColors = enabled;
     if (this.isEnabled) {
       this.applyHighContrast();
     }
   }
 
   // Enable/disable border emphasis
-  setBorderEmphasis(enabled)= enabled;
+  setBorderEmphasis(enabled: boolean): void {
+    this.borderEmphasis = enabled;
     if (this.isEnabled) {
       this.applyHighContrast();
     }
   }
 
   // Enable/disable text emphasis
-  setTextEmphasis(enabled)= enabled;
+  setTextEmphasis(enabled: boolean): void {
+    this.textEmphasis = enabled;
     if (this.isEnabled) {
       this.applyHighContrast();
     }
   }
 
   // Enable/disable focus indicators
-  setFocusIndicators(enabled)= enabled;
+  setFocusIndicators(enabled: boolean): void {
+    this.focusIndicators = enabled;
     if (this.isEnabled) {
       this.applyHighContrast();
     }
   }
 
   // Apply high contrast to current theme
-  applyHighContrast()) return;
+  applyHighContrast(): void {
+    if (!this.isEnabled) return;
 
     // Store original theme if not already stored
     if (!this.originalTheme) {
@@ -234,7 +252,8 @@ export class HighContrastThemeManager {
   }
 
   // Remove high contrast mode
-  removeHighContrast()) return;
+  removeHighContrast(): void {
+    if (!this.isEnabled) return;
 
     // Remove high contrast CSS classes
     document.documentElement.classList.remove('high-contrast');
@@ -249,14 +268,17 @@ export class HighContrastThemeManager {
   }
 
   // Generate high contrast theme from base theme
-  private generateHighContrastTheme(baseTheme)= {
+  private generateHighContrastTheme(baseTheme: MultiThemeConfig): HighContrastThemeConfig {
+    const highContrastTheme: HighContrastThemeConfig = {
       ...baseTheme,
-      highContrast,
-        contrastRatio,
-        enhancedColors,
-        borderEmphasis,
-        textEmphasis,
-        focusIndicators}
+      highContrast: {
+        enabled: true,
+        contrastRatio: this.targetContrastRatio,
+        enhancedColors: this.enhancedColors,
+        borderEmphasis: this.borderEmphasis,
+        textEmphasis: this.textEmphasis,
+        focusIndicators: this.focusIndicators
+      }
     };
 
     // Enhance colors for high contrast
@@ -279,21 +301,25 @@ export class HighContrastThemeManager {
   }
 
   // Enhance colors for high contrast
-  private enhanceColorsForHighContrast(colors)= { ...colors };
+  private enhanceColorsForHighContrast(colors: ColorThemeConfig): ColorThemeConfig {
+    const enhancedColors: ColorThemeConfig = { ...colors };
 
     // Enhance primary colors
     if (enhancedColors.primary) {
       enhancedColors.primary = {
         ...enhancedColors.primary,
-        500],
+        500: HighContrastColors.findBestHighContrastColor(
+          enhancedColors.primary[500],
           enhancedColors.surface?.background || '#FFFFFF',
           this.targetContrastRatio
         ),
-        light],
+        light: HighContrastColors.findBestHighContrastColor(
+          enhancedColors.primary.light || enhancedColors.primary[100],
           enhancedColors.surface?.background || '#FFFFFF',
           this.targetContrastRatio
         ),
-        dark],
+        dark: HighContrastColors.findBestHighContrastColor(
+          enhancedColors.primary.dark || enhancedColors.primary[900],
           enhancedColors.surface?.background || '#FFFFFF',
           this.targetContrastRatio
         )
@@ -304,15 +330,18 @@ export class HighContrastThemeManager {
     if (enhancedColors.secondary) {
       enhancedColors.secondary = {
         ...enhancedColors.secondary,
-        500],
+        500: HighContrastColors.findBestHighContrastColor(
+          enhancedColors.secondary[500],
           enhancedColors.surface?.background || '#FFFFFF',
           this.targetContrastRatio
         ),
-        light],
+        light: HighContrastColors.findBestHighContrastColor(
+          enhancedColors.secondary.light || enhancedColors.secondary[100],
           enhancedColors.surface?.background || '#FFFFFF',
           this.targetContrastRatio
         ),
-        dark],
+        dark: HighContrastColors.findBestHighContrastColor(
+          enhancedColors.secondary.dark || enhancedColors.secondary[900],
           enhancedColors.surface?.background || '#FFFFFF',
           this.targetContrastRatio
         )
@@ -323,7 +352,8 @@ export class HighContrastThemeManager {
     if (enhancedColors.semantic?.error) {
       enhancedColors.semantic = {
         ...enhancedColors.semantic,
-        error,
+        error: HighContrastColors.findBestHighContrastColor(
+          enhancedColors.semantic.error,
           enhancedColors.surface?.background || '#FFFFFF',
           this.targetContrastRatio
         )
@@ -334,7 +364,8 @@ export class HighContrastThemeManager {
     if (enhancedColors.semantic?.warning) {
       enhancedColors.semantic = {
         ...enhancedColors.semantic,
-        warning,
+        warning: HighContrastColors.findBestHighContrastColor(
+          enhancedColors.semantic.warning,
           enhancedColors.surface?.background || '#FFFFFF',
           this.targetContrastRatio
         )
@@ -345,7 +376,8 @@ export class HighContrastThemeManager {
     if (enhancedColors.semantic?.success) {
       enhancedColors.semantic = {
         ...enhancedColors.semantic,
-        success,
+        success: HighContrastColors.findBestHighContrastColor(
+          enhancedColors.semantic.success,
           enhancedColors.surface?.background || '#FFFFFF',
           this.targetContrastRatio
         )
@@ -356,7 +388,8 @@ export class HighContrastThemeManager {
     if (enhancedColors.semantic?.info) {
       enhancedColors.semantic = {
         ...enhancedColors.semantic,
-        info,
+        info: HighContrastColors.findBestHighContrastColor(
+          enhancedColors.semantic.info,
           enhancedColors.surface?.background || '#FFFFFF',
           this.targetContrastRatio
         )
@@ -367,11 +400,13 @@ export class HighContrastThemeManager {
     if (enhancedColors.text) {
       enhancedColors.text = {
         ...enhancedColors.text,
-        primary,
+        primary: HighContrastColors.findBestHighContrastColor(
+          enhancedColors.text.primary,
           enhancedColors.surface?.background || '#FFFFFF',
           this.targetContrastRatio
         ),
-        secondary,
+        secondary: HighContrastColors.findBestHighContrastColor(
+          enhancedColors.text.secondary,
           enhancedColors.surface?.background || '#FFFFFF',
           this.targetContrastRatio
         )
@@ -382,17 +417,18 @@ export class HighContrastThemeManager {
   }
 
   // Enhance fonts for high contrast
-  private enhanceFontsForHighContrast(fonts)= { ...fonts };
+  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) => 
+      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) => 
+      enhancedFonts.body.weights = enhancedFonts.body.weights.map((weight: number) => 
         Math.max(400, weight)
       );
     }
@@ -401,9 +437,9 @@ export class HighContrastThemeManager {
     if (enhancedFonts.primary?.letterSpacing) {
       enhancedFonts.primary.letterSpacing = {
         ...enhancedFonts.primary.letterSpacing,
-        tight, enhancedFonts.primary.letterSpacing.tight || 0.025),
-        normal, enhancedFonts.primary.letterSpacing.normal || 0),
-        wide, enhancedFonts.primary.letterSpacing.wide || 0.025)
+        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)
       };
     }
 
@@ -411,7 +447,8 @@ export class HighContrastThemeManager {
   }
 
   // Enhance spacing for high contrast
-  private enhanceSpacingForHighContrast(spacing)= { ...spacing };
+  private enhanceSpacingForHighContrast(spacing: any): any {
+    const enhancedSpacing = { ...spacing };
 
     // Increase focus ring spacing
     if (enhancedSpacing.focusRing) {
@@ -422,9 +459,9 @@ export class HighContrastThemeManager {
     if (enhancedSpacing.borderWidth) {
       enhancedSpacing.borderWidth = {
         ...enhancedSpacing.borderWidth,
-        thin, enhancedSpacing.borderWidth.thin || 1),
-        normal, enhancedSpacing.borderWidth.normal || 2),
-        thick, enhancedSpacing.borderWidth.thick || 3)
+        thin: Math.max(1, enhancedSpacing.borderWidth.thin || 1),
+        normal: Math.max(2, enhancedSpacing.borderWidth.normal || 2),
+        thick: Math.max(3, enhancedSpacing.borderWidth.thick || 3)
       };
     }
 
@@ -432,7 +469,8 @@ export class HighContrastThemeManager {
   }
 
   // Enhance shadows for high contrast
-  private enhanceShadowsForHighContrast(shadows)= { ...shadows };
+  private enhanceShadowsForHighContrast(shadows: any): any {
+    const enhancedShadows = { ...shadows };
 
     // Increase shadow intensity
     if (enhancedShadows.intensity) {
@@ -448,21 +486,23 @@ export class HighContrastThemeManager {
   }
 
   // Apply high contrast styles
-  private applyHighContrastStyles()= document.createElement('style');
+  private applyHighContrastStyles(): void {
+    const style = document.createElement('style');
     style.id = 'high-contrast-styles';
     
     style.textContent = `
       .high-contrast {
-        --focus-ring-width;
-        --focus-ring-color;
-        --focus-ring-offset;
-        --border-emphasis;
-        --text-emphasis;
-        --shadow-emphasis, 0, 0, 0.8);
+        --focus-ring-width: 3px;
+        --focus-ring-color: #FFFFFF;
+        --focus-ring-offset: 1px;
+        --border-emphasis: 2px solid;
+        --text-emphasis: 700;
+        --shadow-emphasis: 0 4px 8px rgba(0, 0, 0, 0.8);
       }
       
-      .high-contrast *) solid var(--focus-ring-color) !important;
-        outline-offset) !important;
+      .high-contrast *:focus {
+        outline: var(--focus-ring-width) solid var(--focus-ring-color) !important;
+        outline-offset: var(--focus-ring-offset) !important;
       }
       
       .high-contrast button,
@@ -470,7 +510,7 @@ export class HighContrastThemeManager {
       .high-contrast select,
       .high-contrast textarea,
       .high-contrast a {
-        border) !important;
+        border: var(--border-emphasis) !important;
       }
       
       .high-contrast h1,
@@ -479,15 +519,15 @@ export class HighContrastThemeManager {
       .high-contrast h4,
       .high-contrast h5,
       .high-contrast h6 {
-        font-weight) !important;
+        font-weight: var(--text-emphasis) !important;
       }
       
       .high-contrast .card,
       .high-contrast .modal,
       .high-contrast .tooltip,
       .high-contrast .popover {
-        box-shadow) !important;
-        border) !important;
+        box-shadow: var(--shadow-emphasis) !important;
+        border: var(--border-emphasis) !important;
       }
     `;
     
@@ -495,39 +535,47 @@ export class HighContrastThemeManager {
   }
 
   // Remove high contrast styles
-  private removeHighContrastStyles()= document.getElementById('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()} as MultiThemeConfig;
+  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), theme);
+  private applyTheme(theme: MultiThemeConfig): void {
+    // This would integrate with the actual theme system
+    console.log('Applying theme:', theme);
   }
 
   // Get high contrast configuration
-  getConfiguration();
-    targetContrastRatio;
-    enhancedColors;
-    borderEmphasis;
-    textEmphasis;
-    focusIndicators;
+  getConfiguration(): {
+    enabled: boolean;
+    targetContrastRatio: number;
+    enhancedColors: boolean;
+    borderEmphasis: boolean;
+    textEmphasis: boolean;
+    focusIndicators: boolean;
   } {
     return {
-      enabled,
-      targetContrastRatio,
-      enhancedColors,
-      borderEmphasis,
-      textEmphasis,
-      focusIndicators};
+      enabled: this.isEnabled,
+      targetContrastRatio: this.targetContrastRatio,
+      enhancedColors: this.enhancedColors,
+      borderEmphasis: this.borderEmphasis,
+      textEmphasis: this.textEmphasis,
+      focusIndicators: this.focusIndicators
+    };
   }
 
   // Validate high contrast theme
-  validateHighContrastTheme(theme)) return false;
+  validateHighContrastTheme(theme: HighContrastThemeConfig): boolean {
+    if (!theme.highContrast?.enabled) return false;
     
     // Validate contrast ratios
     if (theme.colors) {