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

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

@@ -0,0 +1,573 @@
+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
+  };
+}
+
+// High contrast color utilities
+export class HighContrastColors {
+  // WCAG contrast ratio calculation
+  static calculateContrastRatio(foreground, background)= 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)= 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 ) / 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);
+    
+    return 0.2126 * rL + 0.7152 * gL + 0.0722 * bL;
+  }
+
+  // Convert hex color to RGB
+  private static hexToRgb(hex); g; b} | 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)
+    };
+  }
+
+  // Check if contrast ratio meets WCAG requirements
+  static meetsWCAGRequirements(foreground, background, level= 'AA')= this.calculateContrastRatio(foreground, background);
+    const requiredRatio = level === 'AA' ? 4.5 ;
+    
+    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
+  private static adjustColorBrightness(color, factor)= 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)= 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' ;
+  }
+}
+
+// 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;
+
+  constructor() {
+    this.initializeSystemPreference();
+  }
+
+  // Initialize system preference detection
+  private initializeSystemPreference()== 'undefined' && window.matchMedia) {
+      const highContrastQuery = window.matchMedia('(prefers-contrast)');
+      this.isEnabled = highContrastQuery.matches;
+      
+      highContrastQuery.addEventListener('change', (e) => {
+        this.isEnabled = e.matches;
+        this.applyHighContrast();
+      });
+    }
+  }
+
+  // Enable high contrast mode
+  enable()= true;
+    this.applyHighContrast();
+  }
+
+  // Disable high contrast mode
+  disable()= false;
+    this.removeHighContrast();
+  }
+
+  // Toggle high contrast mode
+  toggle()) {
+      this.disable();
+    } else {
+      this.enable();
+    }
+  }
+
+  // Check if high contrast is enabled
+  isHighContrastEnabled();
+  }
+
+  // Set target contrast ratio
+  setTargetContrastRatio(ratio)= Math.max(1.0, Math.min(21.0, ratio));
+    if (this.isEnabled) {
+      this.applyHighContrast();
+    }
+  }
+
+  // Get current target contrast ratio
+  getTargetContrastRatio();
+  }
+
+  // Enable/disable enhanced colors
+  setEnhancedColors(enabled)= enabled;
+    if (this.isEnabled) {
+      this.applyHighContrast();
+    }
+  }
+
+  // Enable/disable border emphasis
+  setBorderEmphasis(enabled)= enabled;
+    if (this.isEnabled) {
+      this.applyHighContrast();
+    }
+  }
+
+  // Enable/disable text emphasis
+  setTextEmphasis(enabled)= enabled;
+    if (this.isEnabled) {
+      this.applyHighContrast();
+    }
+  }
+
+  // Enable/disable focus indicators
+  setFocusIndicators(enabled)= enabled;
+    if (this.isEnabled) {
+      this.applyHighContrast();
+    }
+  }
+
+  // Apply high contrast to current theme
+  applyHighContrast()) 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()) 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)= {
+      ...baseTheme,
+      highContrast,
+        contrastRatio,
+        enhancedColors,
+        borderEmphasis,
+        textEmphasis,
+        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
+  private enhanceColorsForHighContrast(colors)= { ...colors };
+
+    // Enhance primary colors
+    if (enhancedColors.primary) {
+      enhancedColors.primary = {
+        ...enhancedColors.primary,
+        500],
+          enhancedColors.surface?.background || '#FFFFFF',
+          this.targetContrastRatio
+        ),
+        light],
+          enhancedColors.surface?.background || '#FFFFFF',
+          this.targetContrastRatio
+        ),
+        dark],
+          enhancedColors.surface?.background || '#FFFFFF',
+          this.targetContrastRatio
+        )
+      };
+    }
+
+    // Enhance secondary colors
+    if (enhancedColors.secondary) {
+      enhancedColors.secondary = {
+        ...enhancedColors.secondary,
+        500],
+          enhancedColors.surface?.background || '#FFFFFF',
+          this.targetContrastRatio
+        ),
+        light],
+          enhancedColors.surface?.background || '#FFFFFF',
+          this.targetContrastRatio
+        ),
+        dark],
+          enhancedColors.surface?.background || '#FFFFFF',
+          this.targetContrastRatio
+        )
+      };
+    }
+
+    // Enhance error colors
+    if (enhancedColors.semantic?.error) {
+      enhancedColors.semantic = {
+        ...enhancedColors.semantic,
+        error,
+          enhancedColors.surface?.background || '#FFFFFF',
+          this.targetContrastRatio
+        )
+      };
+    }
+
+    // Enhance warning colors
+    if (enhancedColors.semantic?.warning) {
+      enhancedColors.semantic = {
+        ...enhancedColors.semantic,
+        warning,
+          enhancedColors.surface?.background || '#FFFFFF',
+          this.targetContrastRatio
+        )
+      };
+    }
+
+    // Enhance success colors
+    if (enhancedColors.semantic?.success) {
+      enhancedColors.semantic = {
+        ...enhancedColors.semantic,
+        success,
+          enhancedColors.surface?.background || '#FFFFFF',
+          this.targetContrastRatio
+        )
+      };
+    }
+
+    // Enhance info colors
+    if (enhancedColors.semantic?.info) {
+      enhancedColors.semantic = {
+        ...enhancedColors.semantic,
+        info,
+          enhancedColors.surface?.background || '#FFFFFF',
+          this.targetContrastRatio
+        )
+      };
+    }
+
+    // Enhance text colors
+    if (enhancedColors.text) {
+      enhancedColors.text = {
+        ...enhancedColors.text,
+        primary,
+          enhancedColors.surface?.background || '#FFFFFF',
+          this.targetContrastRatio
+        ),
+        secondary,
+          enhancedColors.surface?.background || '#FFFFFF',
+          this.targetContrastRatio
+        )
+      };
+    }
+
+    return enhancedColors;
+  }
+
+  // Enhance fonts for high contrast
+  private enhanceFontsForHighContrast(fonts)= { ...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, enhancedFonts.primary.letterSpacing.tight || 0.025),
+        normal, enhancedFonts.primary.letterSpacing.normal || 0),
+        wide, enhancedFonts.primary.letterSpacing.wide || 0.025)
+      };
+    }
+
+    return enhancedFonts;
+  }
+
+  // Enhance spacing for high contrast
+  private enhanceSpacingForHighContrast(spacing)= { ...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, enhancedSpacing.borderWidth.thin || 1),
+        normal, enhancedSpacing.borderWidth.normal || 2),
+        thick, enhancedSpacing.borderWidth.thick || 3)
+      };
+    }
+
+    return enhancedSpacing;
+  }
+
+  // Enhance shadows for high contrast
+  private enhanceShadowsForHighContrast(shadows)= { ...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()= 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);
+      }
+      
+      .high-contrast *) solid var(--focus-ring-color) !important;
+        outline-offset) !important;
+      }
+      
+      .high-contrast button,
+      .high-contrast input,
+      .high-contrast select,
+      .high-contrast textarea,
+      .high-contrast a {
+        border) !important;
+      }
+      
+      .high-contrast h1,
+      .high-contrast h2,
+      .high-contrast h3,
+      .high-contrast h4,
+      .high-contrast h5,
+      .high-contrast h6 {
+        font-weight) !important;
+      }
+      
+      .high-contrast .card,
+      .high-contrast .modal,
+      .high-contrast .tooltip,
+      .high-contrast .popover {
+        box-shadow) !important;
+        border) !important;
+      }
+    `;
+    
+    document.head.appendChild(style);
+  }
+
+  // Remove high contrast styles
+  private removeHighContrastStyles()= document.getElementById('high-contrast-styles');
+    if (style) {
+      style.remove();
+    }
+  }
+
+  // Get current theme (placeholder - would integrate with actual theme system)
+  private getCurrentTheme()} as MultiThemeConfig;
+  }
+
+  // Apply theme (placeholder - would integrate with actual theme system)
+  private applyTheme(theme), theme);
+  }
+
+  // Get high contrast configuration
+  getConfiguration();
+    targetContrastRatio;
+    enhancedColors;
+    borderEmphasis;
+    textEmphasis;
+    focusIndicators;
+  } {
+    return {
+      enabled,
+      targetContrastRatio,
+      enhancedColors,
+      borderEmphasis,
+      textEmphasis,
+      focusIndicators};
+  }
+
+  // Validate high contrast theme
+  validateHighContrastTheme(theme)) 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;
+  }
+}
+
+// Export default instances
+export const highContrastThemeManager = new HighContrastThemeManager();
+
+// Export default
+export default {
+  HighContrastColors,
+  HighContrastThemeManager,
+  highContrastThemeManager
+};