@rakeyshgidwani/roger-ui-bank-theme-jeremy 0.5.3

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

@@ -0,0 +1,457 @@
+// High contrast color utilities
+export class HighContrastColors {
+    // 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);
+    }
+    // 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;
+    }
+    // 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';
+    }
+}
+// High contrast theme manager
+export class HighContrastThemeManager {
+    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();
+    }
+    // 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
+    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
+    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
+    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
+    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;
+        --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
+    removeHighContrastStyles() {
+        const style = document.getElementById('high-contrast-styles');
+        if (style) {
+            style.remove();
+        }
+    }
+    // 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;
+    }
+}
+// Export default instances
+export const highContrastThemeManager = new HighContrastThemeManager();
+// Export default
+export default {
+    HighContrastColors,
+    HighContrastThemeManager,
+    highContrastThemeManager
+};