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

package/dist/themes/accessibility.esm.js

@@ -1,111 +1,141 @@
 // Accessibility theme configuration interface
 export interface AccessibilityThemeConfig {
-  highContrast;
-  reducedMotion;
-  focusVisible;
-  ariaLabels, string>;
-  keyboardShortcuts, string>;
-  focusRing;
-    width;
-    style;
-    offset;
+  highContrast: boolean;
+  reducedMotion: boolean;
+  focusVisible: boolean;
+  ariaLabels: Record<string, string>;
+  keyboardShortcuts: Record<string, string>;
+  focusRing: {
+    color: string;
+    width: string;
+    style: 'solid' | 'dashed' | 'dotted';
+    offset: string;
   };
-  motion;
-      normal;
-      slow;
+  motion: {
+    duration: {
+      fast: string;
+      normal: string;
+      slow: string;
     };
-    easing;
-      easeIn;
-      easeOut;
-      easeInOut;
+    easing: {
+      ease: string;
+      easeIn: string;
+      easeOut: string;
+      easeInOut: string;
     };
   };
-  contrast; // WCAG AA minimum contrast ratio
-    enhanced; // WCAG AAA enhanced contrast ratio
-    target; // Target contrast ratio for the theme
+  contrast: {
+    minimum: number; // WCAG AA minimum contrast ratio
+    enhanced: number; // WCAG AAA enhanced contrast ratio
+    target: number; // Target contrast ratio for the theme
   };
-  spacing;
-    touchTarget; // Minimum touch target size
+  spacing: {
+    focusRing: string;
+    touchTarget: string; // Minimum touch target size
   };
 }
 
 // Default accessibility configuration
-export const defaultAccessibilityConfig= {
-  highContrast,
-  reducedMotion,
-  focusVisible,
-  ariaLabels,
-    open,
-    expand,
-    collapse,
-    next,
-    previous,
-    submit,
-    cancel,
-    loading,
-    error,
-    success,
-    warning,
-    info},
-  keyboardShortcuts,
-    submit,
-    cancel,
-    next,
-    previous,
-    expand,
-    collapse},
-  focusRing,
-    width,
-    style,
-    offset},
-  motion,
-      normal,
-      slow},
-    easing,
-      easeIn,
-      easeOut,
-      easeInOut}
+export const defaultAccessibilityConfig: AccessibilityThemeConfig = {
+  highContrast: false,
+  reducedMotion: false,
+  focusVisible: true,
+  ariaLabels: {
+    close: 'Close',
+    open: 'Open',
+    expand: 'Expand',
+    collapse: 'Collapse',
+    next: 'Next',
+    previous: 'Previous',
+    submit: 'Submit',
+    cancel: 'Cancel',
+    loading: 'Loading',
+    error: 'Error',
+    success: 'Success',
+    warning: 'Warning',
+    info: 'Information'
   },
-  contrast, // WCAG AA minimum
-    enhanced, // WCAG AAA enhanced
-    target},
-  spacing,
-    touchTarget}
+  keyboardShortcuts: {
+    close: 'Escape',
+    submit: 'Enter',
+    cancel: 'Escape',
+    next: 'Tab',
+    previous: 'Shift+Tab',
+    expand: 'Space or Enter',
+    collapse: 'Space or Enter'
+  },
+  focusRing: {
+    color: '#3b82f6',
+    width: '2px',
+    style: 'solid',
+    offset: '2px'
+  },
+  motion: {
+    duration: {
+      fast: '150ms',
+      normal: '300ms',
+      slow: '500ms'
+    },
+    easing: {
+      ease: 'ease',
+      easeIn: 'ease-in',
+      easeOut: 'ease-out',
+      easeInOut: 'ease-in-out'
+    }
+  },
+  contrast: {
+    minimum: 4.5, // WCAG AA minimum
+    enhanced: 7.0, // WCAG AAA enhanced
+    target: 4.5
+  },
+  spacing: {
+    focusRing: '2px',
+    touchTarget: '44px'
+  }
 };
 
 // High contrast accessibility configuration
-export const highContrastAccessibilityConfig= {
+export const highContrastAccessibilityConfig: AccessibilityThemeConfig = {
   ...defaultAccessibilityConfig,
-  highContrast,
-  focusRing,
-    width,
-    style,
-    offset},
-  contrast,
-    enhanced,
-    target}
+  highContrast: true,
+  focusRing: {
+    color: '#ffffff',
+    width: '3px',
+    style: 'solid',
+    offset: '1px'
+  },
+  contrast: {
+    minimum: 7.0,
+    enhanced: 7.0,
+    target: 7.0
+  }
 };
 
 // Reduced motion accessibility configuration
-export const reducedMotionAccessibilityConfig= {
+export const reducedMotionAccessibilityConfig: AccessibilityThemeConfig = {
   ...defaultAccessibilityConfig,
-  reducedMotion,
-  motion,
-      normal,
-      slow},
-    easing,
-      easeIn,
-      easeOut,
-      easeInOut}
+  reducedMotion: true,
+  motion: {
+    duration: {
+      fast: '0ms',
+      normal: '0ms',
+      slow: '0ms'
+    },
+    easing: {
+      ease: 'linear',
+      easeIn: 'linear',
+      easeOut: 'linear',
+      easeInOut: 'linear'
+    }
   }
 };
 
 // Accessibility theme manager
 export class AccessibilityThemeManager {
-  private config;
-  private listeners) => void>;
+  private config: AccessibilityThemeConfig;
+  private listeners: Set<(config: AccessibilityThemeConfig) => void>;
 
-  constructor(initialConfig= defaultAccessibilityConfig) {
+  constructor(initialConfig: AccessibilityThemeConfig = defaultAccessibilityConfig) {
     this.config = initialConfig;
     this.listeners = new Set();
     this.initializeSystemPreferences();
@@ -115,8 +145,8 @@ export class AccessibilityThemeManager {
   private initializeSystemPreferences() {
     // Check for system high contrast preference
     if (typeof window !== 'undefined' && window.matchMedia) {
-      const highContrastQuery = window.matchMedia('(prefers-contrast)');
-      const reducedMotionQuery = window.matchMedia('(prefers-reduced-motion)');
+      const highContrastQuery = window.matchMedia('(prefers-contrast: high)');
+      const reducedMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
 
       this.updateFromSystemPreferences(highContrastQuery.matches, reducedMotionQuery.matches);
 
@@ -132,7 +162,7 @@ export class AccessibilityThemeManager {
   }
 
   // Update configuration based on system preferences
-  private updateFromSystemPreferences(highContrast, reducedMotion) {
+  private updateFromSystemPreferences(highContrast: boolean, reducedMotion: boolean) {
     let newConfig = { ...this.config };
 
     if (highContrast) {
@@ -147,17 +177,18 @@ export class AccessibilityThemeManager {
   }
 
   // Get current accessibility configuration
-  getConfig()};
+  getConfig(): AccessibilityThemeConfig {
+    return { ...this.config };
   }
 
   // Update accessibility configuration
-  updateConfig(newConfig) {
+  updateConfig(newConfig: Partial<AccessibilityThemeConfig>) {
     this.config = { ...this.config, ...newConfig };
     this.notifyListeners();
   }
 
   // Subscribe to accessibility configuration changes
-  subscribe(listener) => void)) => void {
+  subscribe(listener: (config: AccessibilityThemeConfig) => void): () => void {
     this.listeners.add(listener);
     return () => this.listeners.delete(listener);
   }
@@ -168,47 +199,55 @@ export class AccessibilityThemeManager {
   }
 
   // Get CSS custom properties for accessibility
-  getCSSProperties(), string> {
+  getCSSProperties(): Record<string, string> {
     const { focusRing, motion, spacing } = this.config;
     
     return {
-      '--focus-ring-color',
-      '--focus-ring-width',
-      '--focus-ring-style',
-      '--focus-ring-offset',
-      '--motion-duration-fast',
-      '--motion-duration-normal',
-      '--motion-duration-slow',
-      '--motion-easing-ease',
-      '--motion-easing-ease-in',
-      '--motion-easing-ease-out',
-      '--motion-easing-ease-in-out',
-      '--spacing-focus-ring',
-      '--spacing-touch-target'};
+      '--focus-ring-color': focusRing.color,
+      '--focus-ring-width': focusRing.width,
+      '--focus-ring-style': focusRing.style,
+      '--focus-ring-offset': focusRing.offset,
+      '--motion-duration-fast': motion.duration.fast,
+      '--motion-duration-normal': motion.duration.normal,
+      '--motion-duration-slow': motion.duration.slow,
+      '--motion-easing-ease': motion.easing.ease,
+      '--motion-easing-ease-in': motion.easing.easeIn,
+      '--motion-easing-ease-out': motion.easing.easeOut,
+      '--motion-easing-ease-in-out': motion.easing.easeInOut,
+      '--spacing-focus-ring': spacing.focusRing,
+      '--spacing-touch-target': spacing.touchTarget
+    };
   }
 
   // Check if high contrast mode is enabled
-  isHighContrast();
+  isHighContrast(): boolean {
+    return this.config.highContrast;
   }
 
   // Check if reduced motion is enabled
-  isReducedMotion();
+  isReducedMotion(): boolean {
+    return this.config.reducedMotion;
   }
 
   // Check if focus visible is enabled
-  isFocusVisible();
+  isFocusVisible(): boolean {
+    return this.config.focusVisible;
   }
 
   // Get ARIA label for a specific key
-  getAriaLabel(key)] || key;
+  getAriaLabel(key: string): string {
+    return this.config.ariaLabels[key] || key;
   }
 
   // Get keyboard shortcut for a specific action
-  getKeyboardShortcut(action)] || '';
+  getKeyboardShortcut(action: string): string {
+    return this.config.keyboardShortcuts[action] || '';
   }
 
   // Validate contrast ratio
-  validateContrastRatio(_foreground, _background), return true as placeholder
+  validateContrastRatio(_foreground: string, _background: string): boolean {
+    // This would implement actual contrast ratio calculation
+    // For now, return true as placeholder
     return true;
   }
 }

package/dist/themes/accessibility.js

@@ -1,111 +1,141 @@
 // Accessibility theme configuration interface
 export interface AccessibilityThemeConfig {
-  highContrast;
-  reducedMotion;
-  focusVisible;
-  ariaLabels, string>;
-  keyboardShortcuts, string>;
-  focusRing;
-    width;
-    style;
-    offset;
+  highContrast: boolean;
+  reducedMotion: boolean;
+  focusVisible: boolean;
+  ariaLabels: Record<string, string>;
+  keyboardShortcuts: Record<string, string>;
+  focusRing: {
+    color: string;
+    width: string;
+    style: 'solid' | 'dashed' | 'dotted';
+    offset: string;
   };
-  motion;
-      normal;
-      slow;
+  motion: {
+    duration: {
+      fast: string;
+      normal: string;
+      slow: string;
     };
-    easing;
-      easeIn;
-      easeOut;
-      easeInOut;
+    easing: {
+      ease: string;
+      easeIn: string;
+      easeOut: string;
+      easeInOut: string;
     };
   };
-  contrast; // WCAG AA minimum contrast ratio
-    enhanced; // WCAG AAA enhanced contrast ratio
-    target; // Target contrast ratio for the theme
+  contrast: {
+    minimum: number; // WCAG AA minimum contrast ratio
+    enhanced: number; // WCAG AAA enhanced contrast ratio
+    target: number; // Target contrast ratio for the theme
   };
-  spacing;
-    touchTarget; // Minimum touch target size
+  spacing: {
+    focusRing: string;
+    touchTarget: string; // Minimum touch target size
   };
 }
 
 // Default accessibility configuration
-export const defaultAccessibilityConfig= {
-  highContrast,
-  reducedMotion,
-  focusVisible,
-  ariaLabels,
-    open,
-    expand,
-    collapse,
-    next,
-    previous,
-    submit,
-    cancel,
-    loading,
-    error,
-    success,
-    warning,
-    info},
-  keyboardShortcuts,
-    submit,
-    cancel,
-    next,
-    previous,
-    expand,
-    collapse},
-  focusRing,
-    width,
-    style,
-    offset},
-  motion,
-      normal,
-      slow},
-    easing,
-      easeIn,
-      easeOut,
-      easeInOut}
+export const defaultAccessibilityConfig: AccessibilityThemeConfig = {
+  highContrast: false,
+  reducedMotion: false,
+  focusVisible: true,
+  ariaLabels: {
+    close: 'Close',
+    open: 'Open',
+    expand: 'Expand',
+    collapse: 'Collapse',
+    next: 'Next',
+    previous: 'Previous',
+    submit: 'Submit',
+    cancel: 'Cancel',
+    loading: 'Loading',
+    error: 'Error',
+    success: 'Success',
+    warning: 'Warning',
+    info: 'Information'
   },
-  contrast, // WCAG AA minimum
-    enhanced, // WCAG AAA enhanced
-    target},
-  spacing,
-    touchTarget}
+  keyboardShortcuts: {
+    close: 'Escape',
+    submit: 'Enter',
+    cancel: 'Escape',
+    next: 'Tab',
+    previous: 'Shift+Tab',
+    expand: 'Space or Enter',
+    collapse: 'Space or Enter'
+  },
+  focusRing: {
+    color: '#3b82f6',
+    width: '2px',
+    style: 'solid',
+    offset: '2px'
+  },
+  motion: {
+    duration: {
+      fast: '150ms',
+      normal: '300ms',
+      slow: '500ms'
+    },
+    easing: {
+      ease: 'ease',
+      easeIn: 'ease-in',
+      easeOut: 'ease-out',
+      easeInOut: 'ease-in-out'
+    }
+  },
+  contrast: {
+    minimum: 4.5, // WCAG AA minimum
+    enhanced: 7.0, // WCAG AAA enhanced
+    target: 4.5
+  },
+  spacing: {
+    focusRing: '2px',
+    touchTarget: '44px'
+  }
 };
 
 // High contrast accessibility configuration
-export const highContrastAccessibilityConfig= {
+export const highContrastAccessibilityConfig: AccessibilityThemeConfig = {
   ...defaultAccessibilityConfig,
-  highContrast,
-  focusRing,
-    width,
-    style,
-    offset},
-  contrast,
-    enhanced,
-    target}
+  highContrast: true,
+  focusRing: {
+    color: '#ffffff',
+    width: '3px',
+    style: 'solid',
+    offset: '1px'
+  },
+  contrast: {
+    minimum: 7.0,
+    enhanced: 7.0,
+    target: 7.0
+  }
 };
 
 // Reduced motion accessibility configuration
-export const reducedMotionAccessibilityConfig= {
+export const reducedMotionAccessibilityConfig: AccessibilityThemeConfig = {
   ...defaultAccessibilityConfig,
-  reducedMotion,
-  motion,
-      normal,
-      slow},
-    easing,
-      easeIn,
-      easeOut,
-      easeInOut}
+  reducedMotion: true,
+  motion: {
+    duration: {
+      fast: '0ms',
+      normal: '0ms',
+      slow: '0ms'
+    },
+    easing: {
+      ease: 'linear',
+      easeIn: 'linear',
+      easeOut: 'linear',
+      easeInOut: 'linear'
+    }
   }
 };
 
 // Accessibility theme manager
 export class AccessibilityThemeManager {
-  private config;
-  private listeners) => void>;
+  private config: AccessibilityThemeConfig;
+  private listeners: Set<(config: AccessibilityThemeConfig) => void>;
 
-  constructor(initialConfig= defaultAccessibilityConfig) {
+  constructor(initialConfig: AccessibilityThemeConfig = defaultAccessibilityConfig) {
     this.config = initialConfig;
     this.listeners = new Set();
     this.initializeSystemPreferences();
@@ -115,8 +145,8 @@ export class AccessibilityThemeManager {
   private initializeSystemPreferences() {
     // Check for system high contrast preference
     if (typeof window !== 'undefined' && window.matchMedia) {
-      const highContrastQuery = window.matchMedia('(prefers-contrast)');
-      const reducedMotionQuery = window.matchMedia('(prefers-reduced-motion)');
+      const highContrastQuery = window.matchMedia('(prefers-contrast: high)');
+      const reducedMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
 
       this.updateFromSystemPreferences(highContrastQuery.matches, reducedMotionQuery.matches);
 
@@ -132,7 +162,7 @@ export class AccessibilityThemeManager {
   }
 
   // Update configuration based on system preferences
-  private updateFromSystemPreferences(highContrast, reducedMotion) {
+  private updateFromSystemPreferences(highContrast: boolean, reducedMotion: boolean) {
     let newConfig = { ...this.config };
 
     if (highContrast) {
@@ -147,17 +177,18 @@ export class AccessibilityThemeManager {
   }
 
   // Get current accessibility configuration
-  getConfig()};
+  getConfig(): AccessibilityThemeConfig {
+    return { ...this.config };
   }
 
   // Update accessibility configuration
-  updateConfig(newConfig) {
+  updateConfig(newConfig: Partial<AccessibilityThemeConfig>) {
     this.config = { ...this.config, ...newConfig };
     this.notifyListeners();
   }
 
   // Subscribe to accessibility configuration changes
-  subscribe(listener) => void)) => void {
+  subscribe(listener: (config: AccessibilityThemeConfig) => void): () => void {
     this.listeners.add(listener);
     return () => this.listeners.delete(listener);
   }
@@ -168,47 +199,55 @@ export class AccessibilityThemeManager {
   }
 
   // Get CSS custom properties for accessibility
-  getCSSProperties(), string> {
+  getCSSProperties(): Record<string, string> {
     const { focusRing, motion, spacing } = this.config;
     
     return {
-      '--focus-ring-color',
-      '--focus-ring-width',
-      '--focus-ring-style',
-      '--focus-ring-offset',
-      '--motion-duration-fast',
-      '--motion-duration-normal',
-      '--motion-duration-slow',
-      '--motion-easing-ease',
-      '--motion-easing-ease-in',
-      '--motion-easing-ease-out',
-      '--motion-easing-ease-in-out',
-      '--spacing-focus-ring',
-      '--spacing-touch-target'};
+      '--focus-ring-color': focusRing.color,
+      '--focus-ring-width': focusRing.width,
+      '--focus-ring-style': focusRing.style,
+      '--focus-ring-offset': focusRing.offset,
+      '--motion-duration-fast': motion.duration.fast,
+      '--motion-duration-normal': motion.duration.normal,
+      '--motion-duration-slow': motion.duration.slow,
+      '--motion-easing-ease': motion.easing.ease,
+      '--motion-easing-ease-in': motion.easing.easeIn,
+      '--motion-easing-ease-out': motion.easing.easeOut,
+      '--motion-easing-ease-in-out': motion.easing.easeInOut,
+      '--spacing-focus-ring': spacing.focusRing,
+      '--spacing-touch-target': spacing.touchTarget
+    };
   }
 
   // Check if high contrast mode is enabled
-  isHighContrast();
+  isHighContrast(): boolean {
+    return this.config.highContrast;
   }
 
   // Check if reduced motion is enabled
-  isReducedMotion();
+  isReducedMotion(): boolean {
+    return this.config.reducedMotion;
   }
 
   // Check if focus visible is enabled
-  isFocusVisible();
+  isFocusVisible(): boolean {
+    return this.config.focusVisible;
   }
 
   // Get ARIA label for a specific key
-  getAriaLabel(key)] || key;
+  getAriaLabel(key: string): string {
+    return this.config.ariaLabels[key] || key;
   }
 
   // Get keyboard shortcut for a specific action
-  getKeyboardShortcut(action)] || '';
+  getKeyboardShortcut(action: string): string {
+    return this.config.keyboardShortcuts[action] || '';
   }
 
   // Validate contrast ratio
-  validateContrastRatio(_foreground, _background), return true as placeholder
+  validateContrastRatio(_foreground: string, _background: string): boolean {
+    // This would implement actual contrast ratio calculation
+    // For now, return true as placeholder
     return true;
   }
 }