@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.3 → 0.1.5

package/src/themes/high-contrast.ts

@@ -0,0 +1,621 @@
+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);
+      }
+    }
+    
+    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;
+      }
+    }
+    
+    // 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';
+  }
+}
+
+// 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;
+        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
+      }
+    };
+
+    // 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: 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 = `
+      .high-contrast {
+        --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 *:focus {
+        outline: var(--focus-ring-width) solid var(--focus-ring-color) !important;
+        outline-offset: var(--focus-ring-offset) !important;
+      }
+      
+      .high-contrast button,
+      .high-contrast input,
+      .high-contrast select,
+      .high-contrast textarea,
+      .high-contrast a {
+        border: var(--border-emphasis) !important;
+      }
+      
+      .high-contrast h1,
+      .high-contrast h2,
+      .high-contrast h3,
+      .high-contrast h4,
+      .high-contrast h5,
+      .high-contrast h6 {
+        font-weight: var(--text-emphasis) !important;
+      }
+      
+      .high-contrast .card,
+      .high-contrast .modal,
+      .high-contrast .tooltip,
+      .high-contrast .popover {
+        box-shadow: var(--shadow-emphasis) !important;
+        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;
+        }
+      }
+      
+      // 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
+};

package/src/themes/index.ts

@@ -0,0 +1,19 @@
+// Main theme exports
+// This file provides a clean interface for importing themes
+
+export * from './base-themes';
+export * from './types';
+export * from './inheritance';
+export * from './useTheme';
+export * from './ThemeProvider';
+
+// Export default theme for reference
+export { defaultTheme } from './themes/default';
+
+// Direct theme imports for convenience (with inheritance applied)
+export { 
+  stanDesignTheme, 
+ 
+  harveyTheme,
+  defaultTheme as baseDefaultTheme 
+} from './base-themes';