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

package/dist/themes/colorManager.js

@@ -0,0 +1,362 @@
+/**
+ * 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), hueShift= 0, saturationAdjust = 0, lightnessAdjust = 0 } = config;
+    
+    // Parse the base color
+    const hsl = this.hexToHsl(baseColor);
+    if (!hsl) {
+      throw new Error(`Invalid color format}`);
+    }
+
+             // Generate the scale - preserve base color at 500
+         const scale= {
+           50, 0, saturationAdjust, 95 + lightnessAdjust),
+           100, 0, saturationAdjust, 90 + lightnessAdjust),
+           200, 0, saturationAdjust, 80 + lightnessAdjust),
+           300, 0, saturationAdjust, 70 + lightnessAdjust),
+           400, 0, saturationAdjust, 60 + lightnessAdjust),
+           500, // Keep original base color
+           600, 0, saturationAdjust, 40 + lightnessAdjust),
+           700, 0, saturationAdjust, 30 + lightnessAdjust),
+           800, 0, saturationAdjust, 20 + lightnessAdjust),
+           900, 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 semantic colors based on a primary color
+   */
+  static generateSemanticColors(primaryColor)= this.hexToHsl(primaryColor);
+    if (!primaryHsl) {
+      throw new Error(`Invalid primary color}`);
+    }
+
+    // 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, 70, 50),
+      warning, 90, 50),
+      error, 80, 50),
+      info, 80, 50),
+      
+      // Light variants
+      successLight, 70, 90),
+      warningLight, 90, 90),
+      errorLight, 80, 90),
+      infoLight, 80, 90),
+      
+      // Dark variants
+      successDark, 70, 30),
+      warningDark, 90, 30),
+      errorDark, 80, 30),
+      infoDark, 80, 30)
+    };
+  }
+
+  /**
+   * Generate neutral color scale
+   */
+  static generateNeutralColors(baseColor= '#6b7280')= this.hexToHsl(baseColor);
+    if (!hsl) {
+      throw new Error(`Invalid neutral color}`);
+    }
+
+             return {
+           50, 5, 97),
+           100, 5, 90),
+           200, 5, 80),
+           300, 5, 70),
+           400, 5, 60),
+           500, // Keep original base color
+           600, 5, 40),
+           700, 5, 30),
+           800, 5, 20),
+           900, 5, 10)
+         };
+  }
+
+  /**
+   * Check color contrast for accessibility
+   */
+  static checkColorContrast(foreground, background)= 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)');
+    }
+    if (!aaa) {
+      recommendations.push('Increase contrast to meet WCAG AAA standards (7)');
+    }
+    if (ratio < 3) {
+      recommendations.push('Consider using a different color combination for better readability');
+    }
+
+    return {
+      aa,
+      aaa,
+      contrastRatio,
+      recommended};
+  }
+
+  /**
+   * Validate color format
+   */
+  static isValidColor(color)]{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, s, l)
+         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); s; l} | 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) );
+        
+        switch (max) {
+          case r= (g - b) / d + (g < b ? 6 );
+            break;
+          case g= (b - r) / d + 2;
+            break;
+          case b= (r - g) / d + 4;
+            break;
+        }
+        h /= 6;
+      }
+      
+      return {
+        h),
+        s),
+        l)
+      };
+    } catch {
+      return null;
+    }
+  }
+
+  /**
+   * Convert HSL to hex color
+   */
+  private static hslToHex(h, s, l)= 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) ;
+      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 ;
+    };
+    
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+  }
+
+  /**
+   * Adjust HSL values
+   */
+  private static adjustHsl(
+    base; s; l},
+    hShift,
+    sAdjust,
+    lValue)= (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, color2)= 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)= 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 ) / 1.055, 2.4);
+    });
+    
+    return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+  }
+
+  /**
+   * Convert hex to RGB
+   */
+  private static hexToRgb(hex); g; b} | 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, 2), 16),
+        g, 2), 16),
+        b, 2), 16)
+      };
+    } catch {
+      return null;
+    }
+  }
+
+  /**
+   * Generate a high contrast color
+   */
+  private static generateContrastColor(baseColor)= 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 );
+  }
+
+  /**
+   * Create a color palette with accessibility information
+   */
+  static createColorPalette(
+    name,
+    baseColor,
+    description,
+    tags] = []
+  )= this.generateColorScale({
+      baseColor,
+      generateShades,
+      generateContrast});
+    
+    const accessibility = this.checkColorContrast(colors[500], '#ffffff');
+    
+    return {
+      name,
+      description,
+      colors,
+      accessibility,
+      usage, 'accent', 'brand'],
+      tags, 'generated', 'accessible']
+    };
+  }
+}
+
+/**
+ * Default color manager instance
+ */
+export const colorManager = new ColorManager();

package/dist/themes/examples/dark-theme.d.ts

@@ -0,0 +1,139 @@
+
+const darkThemeConfig: PartialThemeConfig = {
+  meta: {
+    name: 'Dark Mode',
+    description: 'Dark variant with inheritance from default theme',
+    author: 'Theme Examples',
+    version: '1.0.0',
+    category: 'custom',
+    tags: ['dark', 'night', 'inheritance'],
+    preview: '/themes/dark-preview.png',
+    createdAt: '2024-12-01T00:00:00.000Z',
+    updatedAt: '2024-12-01T00:00:00.000Z'
+  },
+  colors: {
+    primary: {
+      50: '#0f172a',
+      100: '#1e293b',
+      200: '#334155',
+      300: '#475569',
+      400: '#64748b',
+      500: '#94a3b8',
+      600: '#cbd5e1',
+      700: '#e2e8f0',
+      800: '#f1f5f9',
+      900: '#f8fafc',
+      '500-rgb': '148, 163, 184',
+      '600-rgb': '203, 213, 225',
+      '700-rgb': '226, 232, 240'
+    },
+    secondary: {
+      50: '#f8fafc',
+      100: '#f1f5f9',
+      200: '#e2e8f0',
+      300: '#cbd5e1',
+      400: '#94a3b8',
+      500: '#64748b',
+      600: '#475569',
+      700: '#334155',
+      800: '#1e293b',
+      900: '#0f172a'
+    },
+    semantic: {
+      success: '#10b981',
+      warning: '#f59e0b',
+      error: '#ef4444',
+      info: '#3b82f6',
+      successRgb: '16, 185, 129',
+      warningRgb: '245, 158, 11',
+      errorRgb: '239, 68, 68',
+      infoRgb: '59, 130, 246',
+      'success-rgb': '16, 185, 129',
+      'warning-rgb': '245, 158, 11',
+      'error-rgb': '239, 68, 68',
+      'info-rgb': '59, 130, 246'
+    },
+    neutral: {
+      50: '#fafafa',
+      100: '#f5f5f5',
+      200: '#e5e5e5',
+      300: '#d4d4d4',
+      400: '#a3a3a3',
+      500: '#737373',
+      600: '#525252',
+      700: '#404040',
+      800: '#262626',
+      900: '#171717'
+    },
+    surface: {
+      background: '#0f172a',
+      surface: '#1e293b',
+      border: '#334155',
+      divider: '#475569'
+    },
+    text: {
+      primary: '#f8fafc',
+      secondary: '#e2e8f0',
+      muted: '#cbd5e1',
+      inverse: '#0f172a',
+      onPrimary: '#0f172a',
+      onSecondary: '#0f172a',
+      onSurface: '#f8fafc'
+    },
+    interactive: {
+      hover: '#1e293b',
+      active: '#334155',
+      focus: '#94a3b8',
+      disabled: '#475569'
+    },
+    // Additional dark mode colors
+    'bg-primary': '#0f172a',
+    'bg-secondary': '#1e293b',
+    'surface-bg': '#1e293b',
+    'text-primary': '#f8fafc',
+    'text-secondary': '#e2e8f0'
+  }
+  // All other properties (fonts, navigation, spacing, etc.) inherit from default
+};
+
+export declare const darkTheme: createTheme(darkThemeConfig);
+
+export declare const stanDesignDarkTheme: overrideTheme(stanDesignTheme, {
+  meta: {
+    name: 'Stan Design Dark',
+    description: 'Dark variant of Stan Design theme',
+    author: 'Theme Examples',
+    version: '1.0.0',
+    category: 'custom',
+    tags: ['dark', 'stan-design', 'professional'],
+    preview: '/themes/stan-design-dark-preview.png',
+    createdAt: '2024-12-01T00:00:00.000Z',
+    updatedAt: '2024-12-01T00:00:00.000Z'
+  },
+  colors: darkThemeConfig.colors
+});
+
+export declare const quickDarkVariant: overrideTheme(stanDesignTheme, {
+  colors: {
+    primary: stanDesignTheme.colors.primary,
+    secondary: stanDesignTheme.colors.secondary,
+    semantic: stanDesignTheme.colors.semantic,
+    neutral: stanDesignTheme.colors.neutral,
+    surface: {
+      background: '#0f172a',
+      surface: '#1e293b',
+      border: '#334155',
+      divider: '#475569'
+    },
+    text: {
+      primary: '#f8fafc',
+      secondary: '#e2e8f0',
+      muted: '#cbd5e1',
+      inverse: '#0f172a',
+      onPrimary: '#0f172a',
+      onSecondary: '#0f172a',
+      onSurface: '#f8fafc'
+    },
+    interactive: stanDesignTheme.colors.interactive
+  }
+});

package/dist/themes/examples/dark-theme.esm.js

@@ -0,0 +1,124 @@
+import { createTheme, overrideTheme, PartialThemeConfig } from '../inheritance';
+import { stanDesignTheme } from '../base-themes';
+
+/**
+ * Example= {
+  meta,
+    description,
+    author,
+    version,
+    category,
+    tags, 'night', 'inheritance'],
+    preview,
+    createdAt,
+    updatedAt},
+  colors,
+      100,
+      200,
+      300,
+      400,
+      500,
+      600,
+      700,
+      800,
+      900,
+      '500-rgb', 163, 184',
+      '600-rgb', 213, 225',
+      '700-rgb', 232, 240'
+    },
+    secondary,
+      100,
+      200,
+      300,
+      400,
+      500,
+      600,
+      700,
+      800,
+      900},
+    semantic,
+      warning,
+      error,
+      info,
+      successRgb, 185, 129',
+      warningRgb, 158, 11',
+      errorRgb, 68, 68',
+      infoRgb, 130, 246',
+      'success-rgb', 185, 129',
+      'warning-rgb', 158, 11',
+      'error-rgb', 68, 68',
+      'info-rgb', 130, 246'
+    },
+    neutral,
+      100,
+      200,
+      300,
+      400,
+      500,
+      600,
+      700,
+      800,
+      900},
+    surface,
+      surface,
+      border,
+      divider},
+    text,
+      secondary,
+      muted,
+      inverse,
+      onPrimary,
+      onSecondary,
+      onSurface},
+    interactive,
+      active,
+      focus,
+      disabled},
+    // Additional dark mode colors
+    'bg-primary',
+    'bg-secondary',
+    'surface-bg',
+    'text-primary',
+    'text-secondary'}
+  // All other properties (fonts, navigation, spacing, etc.) inherit from default
+};
+
+/**
+ * Create dark theme with full inheritance
+ */
+export const darkTheme = createTheme(darkThemeConfig);
+
+/**
+ * Example) to create a dark variant
+ */
+export const stanDesignDarkTheme = overrideTheme(stanDesignTheme, {
+  meta,
+    description,
+    author,
+    version,
+    category,
+    tags, 'stan-design', 'professional'],
+    preview,
+    createdAt,
+    updatedAt},
+  colors});
+
+/**
+ * Example= overrideTheme(stanDesignTheme, {
+  colors,
+    secondary,
+    semantic,
+    neutral,
+    surface,
+      surface,
+      border,
+      divider},
+    text,
+      secondary,
+      muted,
+      inverse,
+      onPrimary,
+      onSecondary,
+      onSurface},
+    interactive}
+});