@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.3 → 0.1.5

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/themes/README.md

@@ -0,0 +1,272 @@
+# Theme System with Inheritance
+
+A robust theme system with inheritance support that ensures no variables are undefined by providing sensible defaults.
+
+## 🎯 Key Features
+
+- **🏗️ Theme Inheritance**: Automatically fills in missing values from default theme
+- **📁 Organized Structure**: Individual files for each theme
+- **🔧 Type Safety**: Full TypeScript support with comprehensive types
+- **⚡ Hot Reload**: Development-time CSS regeneration
+- **🎨 CSS Generation**: Automatic CSS custom properties generation
+- **🧩 Modular**: Import only what you need
+
+## 📂 Directory Structure
+
+```
+src/themes/
+├── themes/                 # Individual theme files
+│   ├── default.ts         # Base theme with all default values
+│   ├── stan-design.ts     # Professional poker coaching theme
+│   ├── enterprise.ts      # Corporate business theme
+│   └── harvey.ts          # Creative orange theme
+├── examples/              # Example themes and usage patterns
+│   ├── minimal-theme.ts   # Minimal theme with inheritance
+│   └── dark-theme.ts      # Dark mode variants
+├── base-themes.ts         # Main theme exports with inheritance applied
+├── inheritance.ts         # Theme inheritance utilities
+├── types.ts              # TypeScript type definitions
+└── index.ts              # Main export file
+```
+
+## 🚀 Quick Start
+
+### Import and Use Themes
+
+```typescript
+import { stanDesignTheme, enterpriseTheme, harveyTheme } from '@/themes'
+
+// All themes are guaranteed to have complete configurations
+console.log(stanDesignTheme.colors.primary[500]) // Always defined
+```
+
+### Create a New Theme with Inheritance
+
+```typescript
+import { createTheme, PartialThemeConfig } from '@/themes'
+
+// Define only what you want to customize
+const myTheme: PartialThemeConfig = {
+  meta: {
+    name: 'My Custom Theme',
+    description: 'A theme that only overrides colors'
+  },
+  colors: {
+    primary: {
+      500: '#ff6b35' // Only override what you need
+    }
+  }
+  // Everything else inherits from default theme
+}
+
+// Create theme with full inheritance applied
+export const customTheme = createTheme(myTheme)
+```
+
+### Override an Existing Theme
+
+```typescript
+import { overrideTheme, stanDesignTheme } from '@/themes'
+
+// Create a variant of Stan Design with different colors
+export const stanDesignDark = overrideTheme(stanDesignTheme, {
+  colors: {
+    surface: {
+      background: '#0f172a',
+      surface: '#1e293b'
+    }
+  }
+})
+```
+
+## 🎨 Theme Inheritance System
+
+### How It Works
+
+1. **Default Theme**: `default.ts` contains sensible defaults for ALL theme properties
+2. **Inheritance**: Any undefined values in your theme automatically fall back to defaults
+3. **Type Safety**: TypeScript ensures your themes match the expected structure
+4. **Validation**: Built-in validation helps catch missing properties
+
+### Inheritance Utilities
+
+```typescript
+import { 
+  createTheme,           // Create theme with inheritance
+  overrideTheme,         // Override existing theme
+  applyThemeInheritance, // Apply inheritance manually
+  themeInheritanceManager // Advanced inheritance utilities
+} from '@/themes'
+
+// Check if theme has complete inheritance
+const isComplete = themeInheritanceManager.hasInheritance(myTheme)
+
+// Get specific property with fallback
+const primaryColor = themeInheritanceManager.getProperty(
+  myTheme, 
+  'colors.primary.500', 
+  '#000000' // fallback
+)
+
+// Validate completeness
+const missing = themeInheritanceManager.validateCompleteness(myTheme)
+```
+
+## 🎯 Theme Definition Patterns
+
+### Pattern 1: Minimal Theme
+
+Only define what you need to change:
+
+```typescript
+const minimalTheme: PartialThemeConfig = {
+  meta: { name: 'Minimal' },
+  colors: {
+    primary: { 500: '#2563eb' }
+  }
+  // Everything else inherited from default
+}
+```
+
+### Pattern 2: Color-Only Theme
+
+Focus on colors, inherit everything else:
+
+```typescript
+const colorTheme: PartialThemeConfig = {
+  meta: { name: 'Blue Theme' },
+  colors: {
+    primary: { /* full primary palette */ },
+    semantic: { /* semantic colors */ }
+  }
+  // fonts, spacing, shadows, etc. inherited
+}
+```
+
+### Pattern 3: Complete Custom Theme
+
+Define everything for full control:
+
+```typescript
+const completeTheme: MultiThemeConfig = {
+  fonts: { /* custom fonts */ },
+  colors: { /* custom colors */ },
+  navigation: { /* custom navigation */ },
+  spacing: { /* custom spacing */ },
+  shadows: { /* custom shadows */ },
+  transitions: { /* custom transitions */ },
+  meta: { /* theme metadata */ }
+}
+```
+
+## 🔧 CSS Generation
+
+The system automatically generates CSS custom properties:
+
+```css
+/* Generated CSS */
+:root {
+  --cs-primary-500: #3b82f6;
+  --cs-primary-500-rgb: 59, 130, 246;
+  --cs-success: #10b981;
+  --cs-success-rgb: 16, 185, 129;
+  /* ... all other variables */
+}
+```
+
+### Using Generated CSS
+
+```css
+.button {
+  background-color: var(--cs-primary-500);
+  color: var(--cs-text-primary);
+  border-color: var(--cs-border);
+}
+
+.button:hover {
+  background-color: var(--cs-primary-hover);
+}
+```
+
+## 🎨 Available Themes
+
+### Stan Design Theme
+- **Focus**: Professional poker coaching
+- **Font**: Clash Display
+- **Colors**: Blue primary with professional palette
+- **Style**: Modern, clean, professional
+
+### Enterprise Theme  
+- **Focus**: Corporate business applications
+- **Font**: Inter
+- **Colors**: Sky blue primary with corporate palette
+- **Style**: Business-focused, reliable
+
+### Harvey Theme
+- **Focus**: Creative projects
+- **Font**: Poppins
+- **Colors**: Orange primary with warm palette
+- **Style**: Vibrant, creative, friendly
+
+### Default Theme
+- **Focus**: Sensible fallbacks
+- **Font**: System fonts
+- **Colors**: Neutral slate palette
+- **Style**: Clean, minimal, accessible
+
+## 🛠️ Development
+
+### Hot Reload
+
+The system automatically regenerates CSS when you modify:
+- Individual theme files (`*.ts`)
+- Type definitions (`types.ts`)
+- Inheritance system (`inheritance.ts`)
+
+### Adding New Themes
+
+1. Create a new file in `src/themes/themes/`
+2. Define your theme (partial or complete)
+3. Export it from `base-themes.ts`
+4. Update the Vite plugin if needed
+
+### Validation
+
+```typescript
+import { themeInheritanceManager } from '@/themes'
+
+// Check for missing properties
+const missing = themeInheritanceManager.validateCompleteness(myTheme)
+if (missing.length > 0) {
+  console.warn('Missing properties:', missing)
+}
+```
+
+## 📖 Examples
+
+See the `examples/` directory for:
+- Minimal theme with inheritance
+- Dark mode variants
+- Theme override patterns
+- Advanced inheritance usage
+
+## 🎯 Best Practices
+
+1. **Start Small**: Use `PartialThemeConfig` and only define what you need
+2. **Use Inheritance**: Let the default theme fill in missing values
+3. **Validate**: Check theme completeness during development
+4. **Type Safety**: Leverage TypeScript for better development experience
+5. **Hot Reload**: Use the development server for instant feedback
+
+## 🤝 Contributing
+
+When adding new theme properties:
+1. Update `types.ts` with the new property
+2. Add sensible defaults to `default.ts`
+3. Update existing themes if needed
+4. Add CSS generation logic if required
+5. Update documentation
+
+---
+
+This inheritance system ensures robust, maintainable themes with no undefined variables! 🎉

package/src/themes/ThemeContext.tsx

@@ -0,0 +1,31 @@
+import { createContext } from 'react';
+import type { ReactNode } from 'react';
+import { MultiThemeConfig, CompleteThemeConfig } from './types';
+
+// Theme context interface
+export interface ThemeContextType {
+  currentTheme: string;
+  currentThemeConfig: CompleteThemeConfig | null;
+  availableThemes: string[];
+  setTheme: (themeName: string) => void;
+  addTheme: (name: string, theme: MultiThemeConfig) => void;
+  removeTheme: (name: string) => void;
+  getTheme: (name: string) => CompleteThemeConfig | null;
+  isLoading: boolean;
+  error: string | null;
+}
+
+// Create the context
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+// Provider props interface
+export interface ThemeProviderProps {
+  children: ReactNode;
+  defaultTheme?: string;
+  themes?: Record<string, MultiThemeConfig>;
+  persistTheme?: boolean;
+  storageKey?: string;
+}
+
+// Export the context for testing and advanced usage
+export { ThemeContext };

package/src/themes/ThemeProvider.tsx

@@ -0,0 +1,232 @@
+import { useState, useEffect, useCallback } from 'react';
+import { ThemeContext, ThemeContextType, ThemeProviderProps } from './ThemeContext';
+import { MultiThemeConfig, CompleteThemeConfig } from './types';
+import { themeInheritanceManager, toCompleteThemeConfig } from './inheritance';
+import { defaultThemes } from './base-themes';
+import { createThemePersistence } from './themePersistence';
+import { themeCSSUpdater } from './themeCSSUpdater';
+import { fontLoader } from './fontLoader';
+import { ColorManager } from './colorManager';
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({
+  children,
+  defaultTheme = 'stan-design',
+  themes = defaultThemes,
+  persistTheme = true,
+  storageKey = 'stan-design-theme'
+}) => {
+  // State management
+  const [currentTheme, setCurrentThemeState] = useState<string>(defaultTheme);
+  const [currentThemeConfig, setCurrentThemeConfig] = useState<CompleteThemeConfig | null>(null);
+  const [availableThemes, setAvailableThemes] = useState<string[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Enhance theme colors using ColorManager
+  const enhanceThemeColors = useCallback((themeConfig: CompleteThemeConfig): CompleteThemeConfig => {
+    try {
+      const enhanced = { ...themeConfig };
+      
+      // Enhance primary colors if they exist
+      if (enhanced.colors?.primary?.[500]) {
+        const baseColor = enhanced.colors.primary[500];
+        
+        // Generate additional color variations if they don't exist
+        if (!enhanced.colors.primary.light || !enhanced.colors.primary.dark || !enhanced.colors.primary.contrast) {
+          const enhancedScale = ColorManager.generateColorScale({
+            baseColor,
+            generateShades: true,
+            generateContrast: true
+          });
+          
+          enhanced.colors.primary = {
+            ...enhanced.colors.primary,
+            light: enhancedScale.light,
+            dark: enhancedScale.dark,
+            contrast: enhancedScale.contrast
+          };
+        }
+      }
+
+      // Enhance semantic colors if they don't exist
+      if (enhanced.colors?.primary?.[500] && !enhanced.colors.semantic?.success) {
+        const semanticColors = ColorManager.generateSemanticColors(enhanced.colors.primary[500]);
+        enhanced.colors.semantic = {
+          ...enhanced.colors.semantic,
+          ...semanticColors
+        };
+      }
+
+      // Enhance neutral colors if they don't exist
+      if (!enhanced.colors?.neutral?.[500]) {
+        enhanced.colors.neutral = ColorManager.generateNeutralColors('#6b7280');
+      }
+
+      return enhanced;
+    } catch (err) {
+      console.warn('Failed to enhance theme colors:', err);
+      return themeConfig;
+    }
+  }, []);
+
+  // Initialize themes in the inheritance manager
+  useEffect(() => {
+    try {
+      // Register all provided themes
+      Object.entries(themes).forEach(([name, theme]) => {
+        try {
+          themeInheritanceManager.registerTheme(name, theme);
+        } catch (err) {
+          console.warn(`Failed to register theme '${name}':`, err);
+        }
+      });
+      
+      // Set available themes
+      setAvailableThemes(Object.keys(themes));
+      
+      // Load persisted theme or use default
+      if (persistTheme) {
+        const persistence = createThemePersistence({ 
+          storageKey, 
+          defaultTheme,
+          enableSystemPreference: true 
+        });
+        const persistedTheme = persistence.getStoredTheme();
+        if (persistedTheme && themes[persistedTheme]) {
+          setCurrentThemeState(persistedTheme);
+        }
+      }
+    } catch (err) {
+      setError(`Failed to initialize themes: ${err instanceof Error ? err.message : 'Unknown error'}`);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [themes, persistTheme, storageKey, defaultTheme]);
+
+  // Update current theme config when theme changes
+  useEffect(() => {
+    try {
+      const themeConfig = themeInheritanceManager.getCompleteTheme(currentTheme);
+      
+      if (themeConfig) {
+        // Enhance theme colors using ColorManager
+        const enhancedThemeConfig = enhanceThemeColors(toCompleteThemeConfig(themeConfig));
+        setCurrentThemeConfig(enhancedThemeConfig);
+        
+        // Apply the enhanced theme to CSS variables and load fonts
+        themeCSSUpdater.applyTheme(enhancedThemeConfig);
+        fontLoader.loadThemeFonts(enhancedThemeConfig.fonts).catch(err => {
+          console.warn(`Failed to load fonts for theme '${currentTheme}':`, err);
+        });
+      }
+      
+      setError(null);
+    } catch (err) {
+      const errorMessage = `Failed to load theme '${currentTheme}': ${err instanceof Error ? err.message : 'Unknown error'}`;
+      setError(errorMessage);
+      setCurrentThemeConfig(null);
+      console.error(errorMessage, err);
+    }
+  }, [currentTheme, enhanceThemeColors]);
+
+  // Theme switching function
+  const setTheme = useCallback(async (themeName: string) => {
+    if (!themes[themeName]) {
+      setError(`Theme '${themeName}' not found`);
+      return;
+    }
+    
+    try {
+      // Get the complete theme configuration
+      const themeConfig = themeInheritanceManager.getCompleteTheme(themeName);
+      
+      if (!themeConfig) {
+        throw new Error(`Theme configuration not found for '${themeName}'`);
+      }
+      
+      // Enhance theme colors using ColorManager
+      const enhancedThemeConfig = enhanceThemeColors(toCompleteThemeConfig(themeConfig));
+      
+      // Apply enhanced CSS variables to the document
+      themeCSSUpdater.applyTheme(enhancedThemeConfig);
+      
+      // Load fonts for the theme
+      await fontLoader.loadThemeFonts(enhancedThemeConfig.fonts);
+      
+      // Update state
+      setCurrentThemeState(themeName);
+      setCurrentThemeConfig(enhancedThemeConfig);
+      
+      // Persist theme preference
+      if (persistTheme) {
+        const persistence = createThemePersistence({ storageKey });
+        persistence.setStoredTheme(themeName);
+      }
+      
+      setError(null);
+    } catch (err) {
+      const errorMessage = `Failed to switch to theme '${themeName}': ${err instanceof Error ? err.message : 'Unknown error'}`;
+      setError(errorMessage);
+      console.error(errorMessage, err);
+    }
+  }, [themes, persistTheme, storageKey]);
+
+  // Add new theme
+  const addTheme = useCallback((name: string, theme: MultiThemeConfig) => {
+    try {
+      themeInheritanceManager.registerTheme(name, theme);
+      setAvailableThemes(prev => [...prev, name]);
+      setError(null);
+    } catch (err) {
+      setError(`Failed to add theme '${name}': ${err instanceof Error ? err.message : 'Unknown error'}`);
+    }
+  }, []);
+
+  // Remove theme
+  const removeTheme = useCallback((name: string) => {
+    try {
+      // Don't allow removing the current theme
+      if (name === currentTheme) {
+        setError('Cannot remove the currently active theme');
+        return;
+      }
+      
+      // Remove from inheritance manager (we'll need to add this method)
+      // themeInheritanceManager.removeTheme(name);
+      
+      setAvailableThemes(prev => prev.filter(t => t !== name));
+      setError(null);
+    } catch (err) {
+      setError(`Failed to remove theme '${name}': ${err instanceof Error ? err.message : 'Unknown error'}`);
+    }
+  }, [currentTheme]);
+
+  // Get theme by name
+  const getTheme = useCallback((name: string): CompleteThemeConfig | null => {
+    try {
+      return themeInheritanceManager.getCompleteTheme(name);
+    } catch (err) {
+      setError(`Failed to get theme '${name}': ${err instanceof Error ? err.message : 'Unknown error'}`);
+      return null;
+    }
+  }, []);
+
+  // Context value
+  const contextValue: ThemeContextType = {
+    currentTheme,
+    currentThemeConfig,
+    availableThemes,
+    setTheme,
+    addTheme,
+    removeTheme,
+    getTheme,
+    isLoading,
+    error
+  };
+
+  return (
+    <ThemeContext.Provider value={contextValue}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};

package/src/themes/accessibility/index.ts

@@ -0,0 +1,27 @@
+// Accessibility theme system exports
+export * from '../accessibility';
+
+// Re-export main managers for easy access
+export { accessibilityManager } from '../accessibility';
+export { keyboardNavigationManager } from '../keyboard-navigation';
+export { screenReaderOptimizer } from '../screen-reader';
+export { highContrastThemeManager } from '../high-contrast';
+export { focusManager } from '../focus-management';
+export { motionReductionManager } from '../motion-reduction';
+
+// Re-export specific classes to avoid naming conflicts
+export { ARIAUtils as AriaPatternGenerator } from '../aria-patterns';
+export { FocusManager as FocusManagerClass } from '../focus-management';
+export { FocusTrap } from '../focus-management';
+export { FocusRestoration } from '../focus-management';
+export { FocusNavigation } from '../focus-management';
+
+// Re-export specific classes from other modules
+export { KeyboardNavigationManager } from '../keyboard-navigation';
+export { ScreenReaderOptimizer } from '../screen-reader';
+export { HighContrastThemeManager } from '../high-contrast';
+export { MotionReductionManager } from '../motion-reduction';
+
+// Re-export specific utilities and constants
+export { ARIA_ROLES, ARIA_STATES, ARIA_LIVE_VALUES } from '../aria-patterns';
+export { KEY_CODES, NAVIGATION_PATTERNS } from '../keyboard-navigation';