@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.9 → 0.2.10

package/dist/themes/colorManager.js

@@ -15,26 +15,27 @@ export class ColorManager {
   /**
    * Generate a complete color scale from a base color
    */
-  static generateColorScale(config), hueShift= 0, saturationAdjust = 0, lightnessAdjust = 0 } = config;
+  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}`);
+      throw new Error(`Invalid color format: ${baseColor}`);
     }
 
              // 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)
+         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
@@ -53,9 +54,10 @@ export class ColorManager {
   /**
    * Generate semantic colors based on a primary color
    */
-  static generateSemanticColors(primaryColor)= this.hexToHsl(primaryColor);
+  static generateSemanticColors(primaryColor: string): SemanticColors {
+    const primaryHsl = this.hexToHsl(primaryColor);
     if (!primaryHsl) {
-      throw new Error(`Invalid primary color}`);
+      throw new Error(`Invalid primary color: ${primaryColor}`);
     }
 
     // Generate semantic colors with appropriate hues
@@ -65,61 +67,63 @@ export class ColorManager {
     const infoHue = 210;    // Blue
 
     return {
-      success, 70, 50),
-      warning, 90, 50),
-      error, 80, 50),
-      info, 80, 50),
+      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, 70, 90),
-      warningLight, 90, 90),
-      errorLight, 80, 90),
-      infoLight, 80, 90),
+      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, 70, 30),
-      warningDark, 90, 30),
-      errorDark, 80, 30),
-      infoDark, 80, 30)
+      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= '#6b7280')= this.hexToHsl(baseColor);
+  static generateNeutralColors(baseColor: string = '#6b7280'): ColorScale {
+    const hsl = this.hexToHsl(baseColor);
     if (!hsl) {
-      throw new Error(`Invalid neutral color}`);
+      throw new Error(`Invalid neutral color: ${baseColor}`);
     }
 
              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)
+           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, background)= this.calculateContrastRatio(foreground, background);
+  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] = [];
+    const recommendations: string[] = [];
     if (!aa) {
-      recommendations.push('Increase contrast to meet WCAG AA standards (4.5)');
+      recommendations.push('Increase contrast to meet WCAG AA standards (4.5:1)');
     }
     if (!aaa) {
-      recommendations.push('Increase contrast to meet WCAG AAA standards (7)');
+      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');
@@ -128,14 +132,17 @@ export class ColorManager {
     return {
       aa,
       aaa,
-      contrastRatio,
-      recommended};
+      contrastRatio: ratio,
+      recommended: recommendations
+    };
   }
 
   /**
    * Validate color format
    */
-  static isValidColor(color)]{6}|[A-Fa-f0-9]{3})$/.test(color)) {
+  static isValidColor(color: string): boolean {
+    // Check hex format
+    if (/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color)) {
       return true;
     }
     
@@ -146,7 +153,7 @@ export class ColorManager {
            return parseInt(r) <= 255 && parseInt(g) <= 255 && parseInt(b) <= 255;
          }
     
-             // Check hsl format with valid ranges (h, s, l)
+             // 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;
@@ -165,7 +172,7 @@ export class ColorManager {
   /**
    * Convert hex color to HSL
    */
-  private static hexToHsl(hex); s; l} | null {
+  private static hexToHsl(hex: string): { h: number; s: number; l: number } | null {
     try {
       // Remove # if present
       hex = hex.replace('#', '');
@@ -191,23 +198,26 @@ export class ColorManager {
       
       if (max !== min) {
         const d = max - min;
-        s = l > 0.5 ? d / (2 - max - min) );
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
         
         switch (max) {
-          case r= (g - b) / d + (g < b ? 6 );
+          case r:
+            h = (g - b) / d + (g < b ? 6 : 0);
             break;
-          case g= (b - r) / d + 2;
+          case g:
+            h = (b - r) / d + 2;
             break;
-          case b= (r - g) / d + 4;
+          case b:
+            h = (r - g) / d + 4;
             break;
         }
         h /= 6;
       }
       
       return {
-        h),
-        s),
-        l)
+        h: Math.round(h * 360),
+        s: Math.round(s * 100),
+        l: Math.round(l * 100)
       };
     } catch {
       return null;
@@ -217,11 +227,12 @@ export class ColorManager {
   /**
    * Convert HSL to hex color
    */
-  private static hslToHex(h, s, l)= h / 360;
+  private static hslToHex(h: number, s: number, l: number): string {
+    h = h / 360;
     s = s / 100;
     l = l / 100;
     
-    const hue2rgb = (p, q, t)=> {
+    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;
@@ -230,21 +241,21 @@ export class ColorManager {
       return p;
     };
     
-    let r, g, b;
+    let r: number, g: number, b: number;
     
     if (s === 0) {
       r = g = b = l;
     } else {
-      const q = l < 0.5 ? l * (1 + s) ;
+      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 toHex = (c: number): string => {
       const hex = Math.round(c * 255).toString(16);
-      return hex.length === 1 ? '0' + hex ;
+      return hex.length === 1 ? '0' + hex : hex;
     };
     
     return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
@@ -254,10 +265,12 @@ export class ColorManager {
    * Adjust HSL values
    */
   private static adjustHsl(
-    base; s; l},
-    hShift,
-    sAdjust,
-    lValue)= (base.h + hShift) % 360;
+    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));
     
@@ -267,7 +280,8 @@ export class ColorManager {
   /**
    * Calculate contrast ratio between two colors
    */
-  private static calculateContrastRatio(color1, color2)= this.calculateLuminance(color1);
+  private static calculateContrastRatio(color1: string, color2: string): number {
+    const luminance1 = this.calculateLuminance(color1);
     const luminance2 = this.calculateLuminance(color2);
     
     const lighter = Math.max(luminance1, luminance2);
@@ -279,14 +293,15 @@ export class ColorManager {
   /**
    * Calculate relative luminance of a color
    */
-  private static calculateLuminance(color)= this.hexToRgb(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 ) / 1.055, 2.4);
+      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;
@@ -295,7 +310,7 @@ export class ColorManager {
   /**
    * Convert hex to RGB
    */
-  private static hexToRgb(hex); g; b} | null {
+  private static hexToRgb(hex: string): { r: number; g: number; b: number } | null {
     try {
       hex = hex.replace('#', '');
       
@@ -308,9 +323,9 @@ export class ColorManager {
       }
       
       return {
-        r, 2), 16),
-        g, 2), 16),
-        b, 2), 16)
+        r: parseInt(hex.substr(0, 2), 16),
+        g: parseInt(hex.substr(2, 2), 16),
+        b: parseInt(hex.substr(4, 2), 16)
       };
     } catch {
       return null;
@@ -320,28 +335,31 @@ export class ColorManager {
   /**
    * Generate a high contrast color
    */
-  private static generateContrastColor(baseColor)= this.hexToHsl(baseColor);
+  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 );
+    return this.hslToHex(contrastHue, 80, hsl.l > 50 ? 20 : 80);
   }
 
   /**
    * Create a color palette with accessibility information
    */
   static createColorPalette(
-    name,
-    baseColor,
-    description,
-    tags] = []
-  )= this.generateColorScale({
+    name: string,
+    baseColor: string,
+    description: string,
+    tags: string[] = []
+  ): ColorPalette {
+    const colors = this.generateColorScale({
       baseColor,
-      generateShades,
-      generateContrast});
+      generateShades: true,
+      generateContrast: true
+    });
     
     const accessibility = this.checkColorContrast(colors[500], '#ffffff');
     
@@ -350,8 +368,8 @@ export class ColorManager {
       description,
       colors,
       accessibility,
-      usage, 'accent', 'brand'],
-      tags, 'generated', 'accessible']
+      usage: ['primary', 'accent', 'brand'],
+      tags: [...tags, 'generated', 'accessible']
     };
   }
 }

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

@@ -2,84 +2,103 @@ 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'
+ * Example: Dark Theme using inheritance
+ * This theme overrides colors for a dark mode while keeping other properties
+ */
+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'
     },
-    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'
+    text: {
+      primary: '#f8fafc',
+      secondary: '#e2e8f0',
+      muted: '#cbd5e1',
+      inverse: '#0f172a',
+      onPrimary: '#0f172a',
+      onSecondary: '#0f172a',
+      onSurface: '#f8fafc'
+    },
+    interactive: {
+      hover: '#1e293b',
+      active: '#334155',
+      focus: '#94a3b8',
+      disabled: '#475569'
     },
-    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'}
+    '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
 };
 
@@ -89,36 +108,47 @@ import { stanDesignTheme } from '../base-themes';
 export const darkTheme = createTheme(darkThemeConfig);
 
 /**
- * Example) to create a dark variant
+ * Example: Override an existing theme (Stan Design) to create a dark variant
  */
 export const stanDesignDarkTheme = overrideTheme(stanDesignTheme, {
-  meta,
-    description,
-    author,
-    version,
-    category,
-    tags, 'stan-design', 'professional'],
-    preview,
-    createdAt,
-    updatedAt},
-  colors});
+  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
+});
 
 /**
- * Example= overrideTheme(stanDesignTheme, {
-  colors,
-    secondary,
-    semantic,
-    neutral,
-    surface,
-      surface,
-      border,
-      divider},
-    text,
-      secondary,
-      muted,
-      inverse,
-      onPrimary,
-      onSecondary,
-      onSurface},
-    interactive}
+ * Example: Partial override for quick customizations
+ */
+export 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
+  }
 });