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

package/dist/themes/colorManager.esm.js

@@ -2,378 +2,314 @@
  * Color Management System
  * Handles color generation, validation, and accessibility checking
  */
-
-import { 
-  ColorScale, 
-  SemanticColors, 
-  ColorAccessibility, 
-  ColorGenerationConfig,
-  ColorPalette 
-} from './types';
-
 export class ColorManager {
-  /**
-   * Generate a complete color scale from a base color
-   */
-  static generateColorScale(config: ColorGenerationConfig): ColorScale {
-             const { baseColor, hueShift: _hueShift = 0, saturationAdjust = 0, lightnessAdjust = 0 } = config;
-    
-    // Parse the base color
-    const hsl = this.hexToHsl(baseColor);
-    if (!hsl) {
-      throw new Error(`Invalid color format: ${baseColor}`);
+    /**
+     * Generate a complete color scale from a base color
+     */
+    static generateColorScale(config) {
+        const { baseColor, hueShift: _hueShift = 0, saturationAdjust = 0, lightnessAdjust = 0 } = config;
+        // Parse the base color
+        const hsl = this.hexToHsl(baseColor);
+        if (!hsl) {
+            throw new Error(`Invalid color format: ${baseColor}`);
+        }
+        // Generate the scale - preserve base color at 500
+        const scale = {
+            50: this.adjustHsl(hsl, 0, saturationAdjust, 95 + lightnessAdjust),
+            100: this.adjustHsl(hsl, 0, saturationAdjust, 90 + lightnessAdjust),
+            200: this.adjustHsl(hsl, 0, saturationAdjust, 80 + lightnessAdjust),
+            300: this.adjustHsl(hsl, 0, saturationAdjust, 70 + lightnessAdjust),
+            400: this.adjustHsl(hsl, 0, saturationAdjust, 60 + lightnessAdjust),
+            500: baseColor, // Keep original base color
+            600: this.adjustHsl(hsl, 0, saturationAdjust, 40 + lightnessAdjust),
+            700: this.adjustHsl(hsl, 0, saturationAdjust, 30 + lightnessAdjust),
+            800: this.adjustHsl(hsl, 0, saturationAdjust, 20 + lightnessAdjust),
+            900: this.adjustHsl(hsl, 0, saturationAdjust, 10 + lightnessAdjust)
+        };
+        // Add optional variations
+        if (config.generateShades) {
+            scale.light = this.adjustHsl(hsl, 0, saturationAdjust, 98 + lightnessAdjust);
+            scale.dark = this.adjustHsl(hsl, 0, saturationAdjust, 5 + lightnessAdjust);
+        }
+        if (config.generateContrast) {
+            scale.contrast = this.generateContrastColor(baseColor);
+        }
+        return scale;
     }
-
-             // Generate the scale - preserve base color at 500
-         const scale: ColorScale = {
-           50: this.adjustHsl(hsl, 0, saturationAdjust, 95 + lightnessAdjust),
-           100: this.adjustHsl(hsl, 0, saturationAdjust, 90 + lightnessAdjust),
-           200: this.adjustHsl(hsl, 0, saturationAdjust, 80 + lightnessAdjust),
-           300: this.adjustHsl(hsl, 0, saturationAdjust, 70 + lightnessAdjust),
-           400: this.adjustHsl(hsl, 0, saturationAdjust, 60 + lightnessAdjust),
-           500: baseColor, // Keep original base color
-           600: this.adjustHsl(hsl, 0, saturationAdjust, 40 + lightnessAdjust),
-           700: this.adjustHsl(hsl, 0, saturationAdjust, 30 + lightnessAdjust),
-           800: this.adjustHsl(hsl, 0, saturationAdjust, 20 + lightnessAdjust),
-           900: this.adjustHsl(hsl, 0, saturationAdjust, 10 + lightnessAdjust)
-         };
-
-    // Add optional variations
-    if (config.generateShades) {
-      scale.light = this.adjustHsl(hsl, 0, saturationAdjust, 98 + lightnessAdjust);
-      scale.dark = this.adjustHsl(hsl, 0, saturationAdjust, 5 + lightnessAdjust);
+    /**
+     * Generate semantic colors based on a primary color
+     */
+    static generateSemanticColors(primaryColor) {
+        const primaryHsl = this.hexToHsl(primaryColor);
+        if (!primaryHsl) {
+            throw new Error(`Invalid primary color: ${primaryColor}`);
+        }
+        // Generate semantic colors with appropriate hues
+        const successHue = 120; // Green
+        const warningHue = 45; // Yellow/Orange
+        const errorHue = 0; // Red
+        const infoHue = 210; // Blue
+        return {
+            success: this.hslToHex(successHue, 70, 50),
+            warning: this.hslToHex(warningHue, 90, 50),
+            error: this.hslToHex(errorHue, 80, 50),
+            info: this.hslToHex(infoHue, 80, 50),
+            // Light variants
+            successLight: this.hslToHex(successHue, 70, 90),
+            warningLight: this.hslToHex(warningHue, 90, 90),
+            errorLight: this.hslToHex(errorHue, 80, 90),
+            infoLight: this.hslToHex(infoHue, 80, 90),
+            // Dark variants
+            successDark: this.hslToHex(successHue, 70, 30),
+            warningDark: this.hslToHex(warningHue, 90, 30),
+            errorDark: this.hslToHex(errorHue, 80, 30),
+            infoDark: this.hslToHex(infoHue, 80, 30)
+        };
     }
-
-    if (config.generateContrast) {
-      scale.contrast = this.generateContrastColor(baseColor);
+    /**
+     * Generate neutral color scale
+     */
+    static generateNeutralColors(baseColor = '#6b7280') {
+        const hsl = this.hexToHsl(baseColor);
+        if (!hsl) {
+            throw new Error(`Invalid neutral color: ${baseColor}`);
+        }
+        return {
+            50: this.hslToHex(hsl.h, 5, 97),
+            100: this.hslToHex(hsl.h, 5, 90),
+            200: this.hslToHex(hsl.h, 5, 80),
+            300: this.hslToHex(hsl.h, 5, 70),
+            400: this.hslToHex(hsl.h, 5, 60),
+            500: baseColor, // Keep original base color
+            600: this.hslToHex(hsl.h, 5, 40),
+            700: this.hslToHex(hsl.h, 5, 30),
+            800: this.hslToHex(hsl.h, 5, 20),
+            900: this.hslToHex(hsl.h, 5, 10)
+        };
     }
-
-    return scale;
-  }
-
-  /**
-   * Generate semantic colors based on a primary color
-   */
-  static generateSemanticColors(primaryColor: string): SemanticColors {
-    const primaryHsl = this.hexToHsl(primaryColor);
-    if (!primaryHsl) {
-      throw new Error(`Invalid primary color: ${primaryColor}`);
+    /**
+     * Check color contrast for accessibility
+     */
+    static checkColorContrast(foreground, background) {
+        const ratio = this.calculateContrastRatio(foreground, background);
+        const aa = ratio >= 4.5; // WCAG AA standard for normal text
+        const aaa = ratio >= 7; // WCAG AAA standard for normal text
+        const recommendations = [];
+        if (!aa) {
+            recommendations.push('Increase contrast to meet WCAG AA standards (4.5:1)');
+        }
+        if (!aaa) {
+            recommendations.push('Increase contrast to meet WCAG AAA standards (7:1)');
+        }
+        if (ratio < 3) {
+            recommendations.push('Consider using a different color combination for better readability');
+        }
+        return {
+            aa,
+            aaa,
+            contrastRatio: ratio,
+            recommended: recommendations
+        };
     }
-
-    // Generate semantic colors with appropriate hues
-    const successHue = 120; // Green
-    const warningHue = 45;  // Yellow/Orange
-    const errorHue = 0;     // Red
-    const infoHue = 210;    // Blue
-
-    return {
-      success: this.hslToHex(successHue, 70, 50),
-      warning: this.hslToHex(warningHue, 90, 50),
-      error: this.hslToHex(errorHue, 80, 50),
-      info: this.hslToHex(infoHue, 80, 50),
-      
-      // Light variants
-      successLight: this.hslToHex(successHue, 70, 90),
-      warningLight: this.hslToHex(warningHue, 90, 90),
-      errorLight: this.hslToHex(errorHue, 80, 90),
-      infoLight: this.hslToHex(infoHue, 80, 90),
-      
-      // Dark variants
-      successDark: this.hslToHex(successHue, 70, 30),
-      warningDark: this.hslToHex(warningHue, 90, 30),
-      errorDark: this.hslToHex(errorHue, 80, 30),
-      infoDark: this.hslToHex(infoHue, 80, 30)
-    };
-  }
-
-  /**
-   * Generate neutral color scale
-   */
-  static generateNeutralColors(baseColor: string = '#6b7280'): ColorScale {
-    const hsl = this.hexToHsl(baseColor);
-    if (!hsl) {
-      throw new Error(`Invalid neutral color: ${baseColor}`);
+    /**
+     * Validate color format
+     */
+    static isValidColor(color) {
+        // Check hex format
+        if (/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color)) {
+            return true;
+        }
+        // Check rgb format with valid range (0-255)
+        const rgbMatch = color.match(/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/);
+        if (rgbMatch) {
+            const [, r, g, b] = rgbMatch;
+            return parseInt(r) <= 255 && parseInt(g) <= 255 && parseInt(b) <= 255;
+        }
+        // Check hsl format with valid ranges (h: 0-360, s: 0-100%, l: 0-100%)
+        const hslMatch = color.match(/^hsl\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*\)$/);
+        if (hslMatch) {
+            const [, h, s, l] = hslMatch;
+            return parseInt(h) <= 360 && parseInt(s) <= 100 && parseInt(l) <= 100;
+        }
+        // Check named colors (basic set)
+        const namedColors = [
+            'black', 'white', 'red', 'green', 'blue', 'yellow', 'cyan', 'magenta',
+            'gray', 'grey', 'orange', 'purple', 'pink', 'brown', 'navy', 'teal'
+        ];
+        return namedColors.includes(color.toLowerCase());
+    }
+    /**
+     * Convert hex color to HSL
+     */
+    static hexToHsl(hex) {
+        try {
+            // Remove # if present
+            hex = hex.replace('#', '');
+            // Convert 3-digit hex to 6-digit
+            if (hex.length === 3) {
+                hex = hex.split('').map(char => char + char).join('');
+            }
+            if (hex.length !== 6) {
+                return null;
+            }
+            const r = parseInt(hex.substr(0, 2), 16) / 255;
+            const g = parseInt(hex.substr(2, 2), 16) / 255;
+            const b = parseInt(hex.substr(4, 2), 16) / 255;
+            const max = Math.max(r, g, b);
+            const min = Math.min(r, g, b);
+            let h = 0;
+            let s = 0;
+            const l = (max + min) / 2;
+            if (max !== min) {
+                const d = max - min;
+                s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+                switch (max) {
+                    case r:
+                        h = (g - b) / d + (g < b ? 6 : 0);
+                        break;
+                    case g:
+                        h = (b - r) / d + 2;
+                        break;
+                    case b:
+                        h = (r - g) / d + 4;
+                        break;
+                }
+                h /= 6;
+            }
+            return {
+                h: Math.round(h * 360),
+                s: Math.round(s * 100),
+                l: Math.round(l * 100)
+            };
+        }
+        catch {
+            return null;
+        }
     }
-
-             return {
-           50: this.hslToHex(hsl.h, 5, 97),
-           100: this.hslToHex(hsl.h, 5, 90),
-           200: this.hslToHex(hsl.h, 5, 80),
-           300: this.hslToHex(hsl.h, 5, 70),
-           400: this.hslToHex(hsl.h, 5, 60),
-           500: baseColor, // Keep original base color
-           600: this.hslToHex(hsl.h, 5, 40),
-           700: this.hslToHex(hsl.h, 5, 30),
-           800: this.hslToHex(hsl.h, 5, 20),
-           900: this.hslToHex(hsl.h, 5, 10)
-         };
-  }
-
-  /**
-   * Check color contrast for accessibility
-   */
-  static checkColorContrast(foreground: string, background: string): ColorAccessibility {
-    const ratio = this.calculateContrastRatio(foreground, background);
-    
-    const aa = ratio >= 4.5; // WCAG AA standard for normal text
-    const aaa = ratio >= 7;  // WCAG AAA standard for normal text
-    
-    const recommendations: string[] = [];
-    if (!aa) {
-      recommendations.push('Increase contrast to meet WCAG AA standards (4.5:1)');
+    /**
+     * Convert HSL to hex color
+     */
+    static hslToHex(h, s, l) {
+        h = h / 360;
+        s = s / 100;
+        l = l / 100;
+        const hue2rgb = (p, q, t) => {
+            if (t < 0)
+                t += 1;
+            if (t > 1)
+                t -= 1;
+            if (t < 1 / 6)
+                return p + (q - p) * 6 * t;
+            if (t < 1 / 2)
+                return q;
+            if (t < 2 / 3)
+                return p + (q - p) * (2 / 3 - t) * 6;
+            return p;
+        };
+        let r, g, b;
+        if (s === 0) {
+            r = g = b = l;
+        }
+        else {
+            const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+            const p = 2 * l - q;
+            r = hue2rgb(p, q, h + 1 / 3);
+            g = hue2rgb(p, q, h);
+            b = hue2rgb(p, q, h - 1 / 3);
+        }
+        const toHex = (c) => {
+            const hex = Math.round(c * 255).toString(16);
+            return hex.length === 1 ? '0' + hex : hex;
+        };
+        return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
     }
-    if (!aaa) {
-      recommendations.push('Increase contrast to meet WCAG AAA standards (7:1)');
+    /**
+     * Adjust HSL values
+     */
+    static adjustHsl(base, hShift, sAdjust, lValue) {
+        const h = (base.h + hShift) % 360;
+        const s = Math.max(0, Math.min(100, base.s + sAdjust));
+        const l = Math.max(0, Math.min(100, lValue));
+        return this.hslToHex(h, s, l);
     }
-    if (ratio < 3) {
-      recommendations.push('Consider using a different color combination for better readability');
+    /**
+     * Calculate contrast ratio between two colors
+     */
+    static calculateContrastRatio(color1, color2) {
+        const luminance1 = this.calculateLuminance(color1);
+        const luminance2 = this.calculateLuminance(color2);
+        const lighter = Math.max(luminance1, luminance2);
+        const darker = Math.min(luminance1, luminance2);
+        return (lighter + 0.05) / (darker + 0.05);
     }
-
-    return {
-      aa,
-      aaa,
-      contrastRatio: ratio,
-      recommended: recommendations
-    };
-  }
-
-  /**
-   * Validate color format
-   */
-  static isValidColor(color: string): boolean {
-    // Check hex format
-    if (/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color)) {
-      return true;
+    /**
+     * Calculate relative luminance of a color
+     */
+    static calculateLuminance(color) {
+        const rgb = this.hexToRgb(color);
+        if (!rgb)
+            return 0;
+        const { r, g, b } = rgb;
+        const [rs, gs, bs] = [r, g, b].map(c => {
+            c = c / 255;
+            return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+        });
+        return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
     }
-    
-             // Check rgb format with valid range (0-255)
-         const rgbMatch = color.match(/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/);
-         if (rgbMatch) {
-           const [, r, g, b] = rgbMatch;
-           return parseInt(r) <= 255 && parseInt(g) <= 255 && parseInt(b) <= 255;
-         }
-    
-             // Check hsl format with valid ranges (h: 0-360, s: 0-100%, l: 0-100%)
-         const hslMatch = color.match(/^hsl\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*\)$/);
-         if (hslMatch) {
-           const [, h, s, l] = hslMatch;
-           return parseInt(h) <= 360 && parseInt(s) <= 100 && parseInt(l) <= 100;
-         }
-    
-    // Check named colors (basic set)
-    const namedColors = [
-      'black', 'white', 'red', 'green', 'blue', 'yellow', 'cyan', 'magenta',
-      'gray', 'grey', 'orange', 'purple', 'pink', 'brown', 'navy', 'teal'
-    ];
-    
-    return namedColors.includes(color.toLowerCase());
-  }
-
-  /**
-   * Convert hex color to HSL
-   */
-  private static hexToHsl(hex: string): { h: number; s: number; l: number } | null {
-    try {
-      // Remove # if present
-      hex = hex.replace('#', '');
-      
-      // Convert 3-digit hex to 6-digit
-      if (hex.length === 3) {
-        hex = hex.split('').map(char => char + char).join('');
-      }
-      
-      if (hex.length !== 6) {
-        return null;
-      }
-      
-      const r = parseInt(hex.substr(0, 2), 16) / 255;
-      const g = parseInt(hex.substr(2, 2), 16) / 255;
-      const b = parseInt(hex.substr(4, 2), 16) / 255;
-      
-      const max = Math.max(r, g, b);
-      const min = Math.min(r, g, b);
-      let h = 0;
-      let s = 0;
-      const l = (max + min) / 2;
-      
-      if (max !== min) {
-        const d = max - min;
-        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-        
-        switch (max) {
-          case r:
-            h = (g - b) / d + (g < b ? 6 : 0);
-            break;
-          case g:
-            h = (b - r) / d + 2;
-            break;
-          case b:
-            h = (r - g) / d + 4;
-            break;
+    /**
+     * Convert hex to RGB
+     */
+    static hexToRgb(hex) {
+        try {
+            hex = hex.replace('#', '');
+            if (hex.length === 3) {
+                hex = hex.split('').map(char => char + char).join('');
+            }
+            if (hex.length !== 6) {
+                return null;
+            }
+            return {
+                r: parseInt(hex.substr(0, 2), 16),
+                g: parseInt(hex.substr(2, 2), 16),
+                b: parseInt(hex.substr(4, 2), 16)
+            };
+        }
+        catch {
+            return null;
         }
-        h /= 6;
-      }
-      
-      return {
-        h: Math.round(h * 360),
-        s: Math.round(s * 100),
-        l: Math.round(l * 100)
-      };
-    } catch {
-      return null;
     }
-  }
-
-  /**
-   * Convert HSL to hex color
-   */
-  private static hslToHex(h: number, s: number, l: number): string {
-    h = h / 360;
-    s = s / 100;
-    l = l / 100;
-    
-    const hue2rgb = (p: number, q: number, t: number): number => {
-      if (t < 0) t += 1;
-      if (t > 1) t -= 1;
-      if (t < 1/6) return p + (q - p) * 6 * t;
-      if (t < 1/2) return q;
-      if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
-      return p;
-    };
-    
-    let r: number, g: number, b: number;
-    
-    if (s === 0) {
-      r = g = b = l;
-    } else {
-      const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-      const p = 2 * l - q;
-      r = hue2rgb(p, q, h + 1/3);
-      g = hue2rgb(p, q, h);
-      b = hue2rgb(p, q, h - 1/3);
+    /**
+     * Generate a high contrast color
+     */
+    static generateContrastColor(baseColor) {
+        const hsl = this.hexToHsl(baseColor);
+        if (!hsl)
+            return '#000000';
+        // Generate a contrasting color by shifting hue by 180 degrees
+        const contrastHue = (hsl.h + 180) % 360;
+        // Use high saturation and appropriate lightness for contrast
+        return this.hslToHex(contrastHue, 80, hsl.l > 50 ? 20 : 80);
     }
-    
-    const toHex = (c: number): string => {
-      const hex = Math.round(c * 255).toString(16);
-      return hex.length === 1 ? '0' + hex : hex;
-    };
-    
-    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
-  }
-
-  /**
-   * Adjust HSL values
-   */
-  private static adjustHsl(
-    base: { h: number; s: number; l: number },
-    hShift: number,
-    sAdjust: number,
-    lValue: number
-  ): string {
-    const h = (base.h + hShift) % 360;
-    const s = Math.max(0, Math.min(100, base.s + sAdjust));
-    const l = Math.max(0, Math.min(100, lValue));
-    
-    return this.hslToHex(h, s, l);
-  }
-
-  /**
-   * Calculate contrast ratio between two colors
-   */
-  private static calculateContrastRatio(color1: string, color2: string): number {
-    const luminance1 = this.calculateLuminance(color1);
-    const luminance2 = this.calculateLuminance(color2);
-    
-    const lighter = Math.max(luminance1, luminance2);
-    const darker = Math.min(luminance1, luminance2);
-    
-    return (lighter + 0.05) / (darker + 0.05);
-  }
-
-  /**
-   * Calculate relative luminance of a color
-   */
-  private static calculateLuminance(color: string): number {
-    const rgb = this.hexToRgb(color);
-    if (!rgb) return 0;
-    
-    const { r, g, b } = rgb;
-    
-    const [rs, gs, bs] = [r, g, b].map(c => {
-      c = c / 255;
-      return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
-    });
-    
-    return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
-  }
-
-  /**
-   * Convert hex to RGB
-   */
-  private static hexToRgb(hex: string): { r: number; g: number; b: number } | null {
-    try {
-      hex = hex.replace('#', '');
-      
-      if (hex.length === 3) {
-        hex = hex.split('').map(char => char + char).join('');
-      }
-      
-      if (hex.length !== 6) {
-        return null;
-      }
-      
-      return {
-        r: parseInt(hex.substr(0, 2), 16),
-        g: parseInt(hex.substr(2, 2), 16),
-        b: parseInt(hex.substr(4, 2), 16)
-      };
-    } catch {
-      return null;
+    /**
+     * Create a color palette with accessibility information
+     */
+    static createColorPalette(name, baseColor, description, tags = []) {
+        const colors = this.generateColorScale({
+            baseColor,
+            generateShades: true,
+            generateContrast: true
+        });
+        const accessibility = this.checkColorContrast(colors[500], '#ffffff');
+        return {
+            name,
+            description,
+            colors,
+            accessibility,
+            usage: ['primary', 'accent', 'brand'],
+            tags: [...tags, 'generated', 'accessible']
+        };
     }
-  }
-
-  /**
-   * Generate a high contrast color
-   */
-  private static generateContrastColor(baseColor: string): string {
-    const hsl = this.hexToHsl(baseColor);
-    if (!hsl) return '#000000';
-    
-    // Generate a contrasting color by shifting hue by 180 degrees
-    const contrastHue = (hsl.h + 180) % 360;
-    
-    // Use high saturation and appropriate lightness for contrast
-    return this.hslToHex(contrastHue, 80, hsl.l > 50 ? 20 : 80);
-  }
-
-  /**
-   * Create a color palette with accessibility information
-   */
-  static createColorPalette(
-    name: string,
-    baseColor: string,
-    description: string,
-    tags: string[] = []
-  ): ColorPalette {
-    const colors = this.generateColorScale({
-      baseColor,
-      generateShades: true,
-      generateContrast: true
-    });
-    
-    const accessibility = this.checkColorContrast(colors[500], '#ffffff');
-    
-    return {
-      name,
-      description,
-      colors,
-      accessibility,
-      usage: ['primary', 'accent', 'brand'],
-      tags: [...tags, 'generated', 'accessible']
-    };
-  }
 }
-
 /**
  * Default color manager instance
  */