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

package/dist/themes/accessibility.esm.js

@@ -0,0 +1,220 @@
+// Accessibility theme configuration interface
+export interface AccessibilityThemeConfig {
+  highContrast;
+  reducedMotion;
+  focusVisible;
+  ariaLabels, string>;
+  keyboardShortcuts, string>;
+  focusRing;
+    width;
+    style;
+    offset;
+  };
+  motion;
+      normal;
+      slow;
+    };
+    easing;
+      easeIn;
+      easeOut;
+      easeInOut;
+    };
+  };
+  contrast; // WCAG AA minimum contrast ratio
+    enhanced; // WCAG AAA enhanced contrast ratio
+    target; // Target contrast ratio for the theme
+  };
+  spacing;
+    touchTarget; // 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}
+  },
+  contrast, // WCAG AA minimum
+    enhanced, // WCAG AAA enhanced
+    target},
+  spacing,
+    touchTarget}
+};
+
+// High contrast accessibility configuration
+export const highContrastAccessibilityConfig= {
+  ...defaultAccessibilityConfig,
+  highContrast,
+  focusRing,
+    width,
+    style,
+    offset},
+  contrast,
+    enhanced,
+    target}
+};
+
+// Reduced motion accessibility configuration
+export const reducedMotionAccessibilityConfig= {
+  ...defaultAccessibilityConfig,
+  reducedMotion,
+  motion,
+      normal,
+      slow},
+    easing,
+      easeIn,
+      easeOut,
+      easeInOut}
+  }
+};
+
+// Accessibility theme manager
+export class AccessibilityThemeManager {
+  private config;
+  private listeners) => void>;
+
+  constructor(initialConfig= defaultAccessibilityConfig) {
+    this.config = initialConfig;
+    this.listeners = new Set();
+    this.initializeSystemPreferences();
+  }
+
+  // Initialize system preferences
+  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)');
+
+      this.updateFromSystemPreferences(highContrastQuery.matches, reducedMotionQuery.matches);
+
+      // Listen for changes
+      highContrastQuery.addEventListener('change', (e) => {
+        this.updateFromSystemPreferences(e.matches, this.config.reducedMotion);
+      });
+
+      reducedMotionQuery.addEventListener('change', (e) => {
+        this.updateFromSystemPreferences(this.config.highContrast, e.matches);
+      });
+    }
+  }
+
+  // Update configuration based on system preferences
+  private updateFromSystemPreferences(highContrast, reducedMotion) {
+    let newConfig = { ...this.config };
+
+    if (highContrast) {
+      newConfig = { ...newConfig, ...highContrastAccessibilityConfig };
+    }
+
+    if (reducedMotion) {
+      newConfig = { ...newConfig, ...reducedMotionAccessibilityConfig };
+    }
+
+    this.updateConfig(newConfig);
+  }
+
+  // Get current accessibility configuration
+  getConfig()};
+  }
+
+  // Update accessibility configuration
+  updateConfig(newConfig) {
+    this.config = { ...this.config, ...newConfig };
+    this.notifyListeners();
+  }
+
+  // Subscribe to accessibility configuration changes
+  subscribe(listener) => void)) => void {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+
+  // Notify all listeners of configuration changes
+  private notifyListeners() {
+    this.listeners.forEach(listener => listener(this.config));
+  }
+
+  // Get CSS custom properties for accessibility
+  getCSSProperties(), 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'};
+  }
+
+  // Check if high contrast mode is enabled
+  isHighContrast();
+  }
+
+  // Check if reduced motion is enabled
+  isReducedMotion();
+  }
+
+  // Check if focus visible is enabled
+  isFocusVisible();
+  }
+
+  // Get ARIA label for a specific key
+  getAriaLabel(key)] || key;
+  }
+
+  // Get keyboard shortcut for a specific action
+  getKeyboardShortcut(action)] || '';
+  }
+
+  // Validate contrast ratio
+  validateContrastRatio(_foreground, _background), return true as placeholder
+    return true;
+  }
+}
+
+// Create and export default accessibility manager instance
+export const accessibilityManager = new AccessibilityThemeManager();
+
+// Export default configuration
+export default defaultAccessibilityConfig;

package/dist/themes/accessibility.js

@@ -0,0 +1,220 @@
+// Accessibility theme configuration interface
+export interface AccessibilityThemeConfig {
+  highContrast;
+  reducedMotion;
+  focusVisible;
+  ariaLabels, string>;
+  keyboardShortcuts, string>;
+  focusRing;
+    width;
+    style;
+    offset;
+  };
+  motion;
+      normal;
+      slow;
+    };
+    easing;
+      easeIn;
+      easeOut;
+      easeInOut;
+    };
+  };
+  contrast; // WCAG AA minimum contrast ratio
+    enhanced; // WCAG AAA enhanced contrast ratio
+    target; // Target contrast ratio for the theme
+  };
+  spacing;
+    touchTarget; // 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}
+  },
+  contrast, // WCAG AA minimum
+    enhanced, // WCAG AAA enhanced
+    target},
+  spacing,
+    touchTarget}
+};
+
+// High contrast accessibility configuration
+export const highContrastAccessibilityConfig= {
+  ...defaultAccessibilityConfig,
+  highContrast,
+  focusRing,
+    width,
+    style,
+    offset},
+  contrast,
+    enhanced,
+    target}
+};
+
+// Reduced motion accessibility configuration
+export const reducedMotionAccessibilityConfig= {
+  ...defaultAccessibilityConfig,
+  reducedMotion,
+  motion,
+      normal,
+      slow},
+    easing,
+      easeIn,
+      easeOut,
+      easeInOut}
+  }
+};
+
+// Accessibility theme manager
+export class AccessibilityThemeManager {
+  private config;
+  private listeners) => void>;
+
+  constructor(initialConfig= defaultAccessibilityConfig) {
+    this.config = initialConfig;
+    this.listeners = new Set();
+    this.initializeSystemPreferences();
+  }
+
+  // Initialize system preferences
+  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)');
+
+      this.updateFromSystemPreferences(highContrastQuery.matches, reducedMotionQuery.matches);
+
+      // Listen for changes
+      highContrastQuery.addEventListener('change', (e) => {
+        this.updateFromSystemPreferences(e.matches, this.config.reducedMotion);
+      });
+
+      reducedMotionQuery.addEventListener('change', (e) => {
+        this.updateFromSystemPreferences(this.config.highContrast, e.matches);
+      });
+    }
+  }
+
+  // Update configuration based on system preferences
+  private updateFromSystemPreferences(highContrast, reducedMotion) {
+    let newConfig = { ...this.config };
+
+    if (highContrast) {
+      newConfig = { ...newConfig, ...highContrastAccessibilityConfig };
+    }
+
+    if (reducedMotion) {
+      newConfig = { ...newConfig, ...reducedMotionAccessibilityConfig };
+    }
+
+    this.updateConfig(newConfig);
+  }
+
+  // Get current accessibility configuration
+  getConfig()};
+  }
+
+  // Update accessibility configuration
+  updateConfig(newConfig) {
+    this.config = { ...this.config, ...newConfig };
+    this.notifyListeners();
+  }
+
+  // Subscribe to accessibility configuration changes
+  subscribe(listener) => void)) => void {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+
+  // Notify all listeners of configuration changes
+  private notifyListeners() {
+    this.listeners.forEach(listener => listener(this.config));
+  }
+
+  // Get CSS custom properties for accessibility
+  getCSSProperties(), 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'};
+  }
+
+  // Check if high contrast mode is enabled
+  isHighContrast();
+  }
+
+  // Check if reduced motion is enabled
+  isReducedMotion();
+  }
+
+  // Check if focus visible is enabled
+  isFocusVisible();
+  }
+
+  // Get ARIA label for a specific key
+  getAriaLabel(key)] || key;
+  }
+
+  // Get keyboard shortcut for a specific action
+  getKeyboardShortcut(action)] || '';
+  }
+
+  // Validate contrast ratio
+  validateContrastRatio(_foreground, _background), return true as placeholder
+    return true;
+  }
+}
+
+// Create and export default accessibility manager instance
+export const accessibilityManager = new AccessibilityThemeManager();
+
+// Export default configuration
+export default defaultAccessibilityConfig;