@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.4 → 0.1.6

package/src/themes/types.ts

@@ -0,0 +1,460 @@
+// Multi-Theme System Type Definitions
+// This file defines the core interfaces for theme configuration
+
+export interface MultiThemeConfig {
+  fonts: FontThemeConfig;
+  colors: ColorThemeConfig;
+  navigation: NavigationThemeConfig;
+  spacing: SpacingThemeConfig;
+  shadows: ShadowThemeConfig;
+  transitions: TransitionThemeConfig;
+  borderRadius: BorderRadiusThemeConfig;
+  borderWidth: BorderWidthThemeConfig;
+  animation: AnimationThemeConfig;
+  accessibility: AccessibilityThemeConfig;
+  print: PrintThemeConfig;
+  containerQuery: ContainerQueryThemeConfig;
+  container: ContainerThemeConfig;
+  shimmer: ShimmerThemeConfig;
+  meta: ThemeMetadata;
+  extends?: string; // Optional property for theme inheritance
+  
+  // NEW: Add light/dark mode configuration (colors only)
+  modes?: {
+    light?: {
+      colors?: Partial<ColorThemeConfig>;
+    };
+    dark?: {
+      colors?: Partial<ColorThemeConfig>;
+    };
+  };
+}
+
+export interface FontThemeConfig {
+  primary: FontConfig;
+  secondary: FontConfig;
+  display: FontConfig;
+  body: FontConfig;
+  mono: FontConfig;
+}
+
+export interface FontConfig {
+  family: string;
+  weights: number[];
+  sizes: FontSizeScale;
+  lineHeights: LineHeightScale;
+  letterSpacing: LetterSpacingScale;
+  fallbacks?: string[]; // Font fallback stack
+  display?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional'; // Font loading strategy
+  source?: FontSource; // Font source configuration
+  features?: FontFeatures; // Advanced font features
+}
+
+export interface FontSource {
+  type: 'google' | 'custom' | 'system';
+  url?: string; // For custom fonts
+  files?: FontFiles; // For custom font files
+}
+
+export interface FontFiles {
+  woff2?: string;
+  woff?: string;
+  ttf?: string;
+  eot?: string;
+  svg?: string;
+}
+
+export interface FontFeatures {
+  ligatures?: boolean;
+  kerning?: boolean;
+  variant?: 'normal' | 'small-caps' | 'all-small-caps';
+  stretch?: 'normal' | 'condensed' | 'expanded';
+  styleSet?: number;
+}
+
+export interface FontSizeScale {
+  xs: string;
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
+  '2xl': string;
+  '3xl': string;
+  '4xl': string;
+  '5xl': string;
+  '6xl': string;
+}
+
+export interface LineHeightScale {
+  tight: string;
+  normal: string;
+  relaxed: string;
+  loose: string;
+}
+
+export interface LetterSpacingScale {
+  tight: string;
+  normal: string;
+  wide: string;
+  wider: string;
+  widest: string;
+}
+
+export interface ColorThemeConfig {
+  primary: ColorScale;
+  secondary: ColorScale;
+  semantic: SemanticColors;
+  neutral: ColorScale;
+  surface: SurfaceColors;
+  text: TextColors;
+  interactive: InteractiveColors;
+  // Additional color properties referenced in CSS
+  accent?: string;
+  'bg-primary'?: string;
+  'bg-secondary'?: string;
+  'surface-bg'?: string;
+  'primary-hover'?: string;
+  'primary-active'?: string;
+  'accent-rgb'?: string;
+  border?: string;
+  'border-transparent'?: string;
+  'text-primary'?: string;
+  'text-secondary'?: string;
+}
+
+export interface ColorScale {
+  50: string;
+  100: string;
+  200: string;
+  300: string;
+  400: string;
+  500: string;
+  600: string;
+  700: string;
+  800: string;
+  900: string;
+  // Additional color variations
+  light?: string;    // Lighter than 50
+  dark?: string;     // Darker than 900
+  contrast?: string; // High contrast version
+  // RGB versions for rgba() usage
+  '500-rgb'?: string;
+  '600-rgb'?: string;
+  '700-rgb'?: string;
+}
+
+export interface ColorAccessibility {
+  aa: boolean;       // WCAG AA compliance
+  aaa: boolean;      // WCAG AAA compliance
+  contrastRatio: number; // Actual contrast ratio
+  recommended: string[]; // Recommended improvements
+}
+
+export interface SemanticColors {
+  success: string;
+  warning: string;
+  error: string;
+  info: string;
+  // Enhanced semantic colors with accessibility
+  successLight?: string;
+  successDark?: string;
+  warningLight?: string;
+  warningDark?: string;
+  errorLight?: string;
+  errorDark?: string;
+  infoLight?: string;
+  infoDark?: string;
+  // RGB versions for rgba() usage
+  successRgb?: string;
+  warningRgb?: string;
+  errorRgb?: string;
+  errorDarkRgb?: string;
+  infoRgb?: string;
+  // Additional RGB versions referenced in CSS
+  'success-rgb'?: string;
+  'warning-rgb'?: string;
+  'error-rgb'?: string;
+  'error-dark-rgb'?: string;
+  'info-rgb'?: string;
+}
+
+export interface NeutralColors {
+  50: string;
+  100: string;
+  200: string;
+  300: string;
+  400: string;
+  500: string;
+  600: string;
+  700: string;
+  800: string;
+  900: string;
+}
+
+export interface SurfaceColors {
+  background: string;
+  surface: string;
+  border: string;
+  divider: string;
+}
+
+export interface TextColors {
+  primary: string;
+  secondary: string;
+  muted: string;
+  inverse: string;
+  onPrimary: string;
+  onSecondary: string;
+  onSurface: string;
+}
+
+export interface InteractiveColors {
+  hover: string;
+  active: string;
+  focus: string;
+  disabled: string;
+  // Enhanced interactive states
+  hoverLight?: string;
+  hoverDark?: string;
+  activeLight?: string;
+  activeDark?: string;
+  focusRing?: string;
+  focusRingOffset?: string;
+}
+
+// Color generation and utility interfaces
+export interface ColorGenerationConfig {
+  baseColor: string;
+  hueShift?: number;
+  saturationAdjust?: number;
+  lightnessAdjust?: number;
+  generateShades?: boolean;
+  generateTints?: boolean;
+  generateContrast?: boolean;
+}
+
+export interface ColorPalette {
+  name: string;
+  description: string;
+  colors: ColorScale;
+  accessibility: ColorAccessibility;
+  usage: string[];
+  tags: string[];
+}
+
+import type { NavigationThemeConfig } from './navigation';
+
+
+
+
+
+export interface SpacingThemeConfig {
+  scale: SpacingScale;
+  component: ComponentSpacing;
+  layout: LayoutSpacing;
+}
+
+export interface SpacingScale {
+  xs: string;
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
+  '2xl': string;
+  '3xl': string;
+  '4xl': string;
+  '5xl': string;
+  '6xl': string;
+}
+
+export interface ComponentSpacing {
+  button: {
+    padding: string;
+    margin: string;
+    gap: string;
+  };
+  input: {
+    padding: string;
+    margin: string;
+    gap: string;
+  };
+  card: {
+    padding: string;
+    margin: string;
+    gap: string;
+  };
+}
+
+export interface LayoutSpacing {
+  page: string;
+  section: string;
+  container: string;
+  grid: string;
+}
+
+export interface ShadowThemeConfig {
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
+  '2xl': string;
+  inner: string;
+  none: string;
+}
+
+export interface TransitionThemeConfig {
+  duration: TransitionDuration;
+  easing: TransitionEasing;
+  properties: TransitionProperties;
+}
+
+export interface BorderRadiusThemeConfig {
+  none: string;
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
+  '2xl': string;
+  full: string;
+}
+
+export interface BorderWidthThemeConfig {
+  none: string;
+  thin: string;
+  normal: string;
+  focus: string;
+  thick: string;
+  extraThick: string;
+}
+
+export interface AnimationThemeConfig {
+  duration: {
+    fast: string;
+    normal: string;
+    slow: string;
+  };
+  easing: {
+    linear: string;
+    ease: string;
+    easeIn: string;
+    easeOut: string;
+    easeInOut: string;
+  };
+  transforms: {
+    hoverY: string;
+    offsetY: string;
+    scale: string;
+  };
+}
+
+export interface AccessibilityThemeConfig {
+  focusRing: {
+    width: string;
+    offset: string;
+    color: string;
+  };
+  outline: {
+    offset: string;
+  };
+  highContrast: {
+    borderWidth: string;
+    outlineWidth: string;
+  };
+  disabled: {
+    cursor: string;
+    opacity: string;
+  };
+}
+
+export interface PrintThemeConfig {
+  borderColor: string;
+  textColor: string;
+  textSecondaryColor: string;
+  backgroundColor: string;
+}
+
+export interface ContainerQueryThemeConfig {
+  small: string;
+  medium: string;
+  large: string;
+}
+
+export interface ContainerThemeConfig {
+  width: {
+    small: string;
+    medium: string;
+    large: string;
+    xl: string;
+    full: string;
+  };
+}
+
+export interface ShimmerThemeConfig {
+  alpha: string;
+  color: string;
+}
+
+export interface TransitionDuration {
+  fast: string;
+  normal: string;
+  slow: string;
+}
+
+export interface TransitionEasing {
+  linear: string;
+  ease: string;
+  easeIn: string;
+  easeOut: string;
+  easeInOut: string;
+}
+
+export interface TransitionProperties {
+  colors: string;
+  transform: string;
+  opacity: string;
+  shadow: string;
+}
+
+export interface ThemeMetadata {
+  name: string;
+  description: string;
+  author: string;
+  version: string;
+  category: 'brand' | 'enterprise' | 'creative' | 'custom' | 'accessibility';
+  tags: string[];
+  preview: string; // URL to preview image
+  createdAt: string;
+  updatedAt: string;
+}
+
+// Theme validation types
+export interface ThemeValidationResult {
+  isValid: boolean;
+  errors: ThemeValidationError[];
+  warnings: ThemeValidationWarning[];
+}
+
+export interface ThemeValidationError {
+  path: string;
+  message: string;
+  severity: 'error' | 'critical';
+}
+
+export interface ThemeValidationWarning {
+  path: string;
+  message: string;
+  severity: 'warning' | 'info';
+}
+
+// Theme inheritance types
+export interface ThemeInheritance {
+  extends?: string; // Theme name to extend
+  overrides: Partial<MultiThemeConfig>; // Properties to override
+  additions: Partial<MultiThemeConfig>; // Properties to add
+}
+
+// Complete theme with inheritance
+export interface CompleteThemeConfig extends MultiThemeConfig {
+  inheritance?: ThemeInheritance;
+  validation: ThemeValidationResult;
+}

package/src/themes/useSystemTheme.ts

@@ -0,0 +1,48 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { SystemThemeDetector, SystemTheme, SystemThemeOptions } from './systemThemeDetector';
+
+/**
+ * React hook for using system theme detection
+ */
+export const useSystemTheme = (options: SystemThemeOptions = {}) => {
+  const [systemTheme, setSystemTheme] = useState<SystemTheme>('light');
+  const detectorRef = useRef<SystemThemeDetector | null>(null);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    detectorRef.current = new SystemThemeDetector(options);
+    
+    // Set initial theme
+    const initialTheme = detectorRef.current.getSystemTheme();
+    setSystemTheme(initialTheme);
+    
+    // Subscribe to changes
+    const unsubscribe = detectorRef.current.subscribe(setSystemTheme);
+    
+    return () => {
+      unsubscribe();
+      detectorRef.current?.destroy();
+    };
+  }, [options.storageKey, options.enablePersistence]);
+
+  const setSystemThemePreference = useCallback((theme: SystemTheme) => {
+    if (detectorRef.current) {
+      detectorRef.current.setStoredPreference(theme);
+      setSystemTheme(theme);
+    }
+  }, []);
+
+  const applySystemThemeCSS = useCallback((theme: SystemTheme) => {
+    if (detectorRef.current) {
+      detectorRef.current.applySystemThemeCSS(theme);
+    }
+  }, []);
+
+  return {
+    systemTheme,
+    setSystemThemePreference,
+    applySystemThemeCSS,
+    isSupported: detectorRef.current?.isSupported() ?? false,
+  };
+};

package/src/themes/useTheme.ts

@@ -0,0 +1,87 @@
+import { useContext } from 'react';
+import { ThemeContext, ThemeContextType } from './ThemeContext';
+
+/**
+ * Hook to access theme context
+ * Must be used within a ThemeProvider
+ * 
+ * @returns ThemeContextType - The current theme context
+ * @throws Error if used outside of ThemeProvider
+ * 
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { currentTheme, setTheme, currentThemeConfig } = useTheme();
+ *   
+ *   return (
+ *     <button onClick={() => setTheme('harvey')}>
+ *       Switch to Harvey Theme
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+export const useTheme = (): ThemeContextType => {
+  const context = useContext(ThemeContext);
+  
+  if (!context) {
+    throw new Error('useTheme must be used within ThemeProvider');
+  }
+  
+  return context;
+};
+
+/**
+ * Hook to get a specific theme by name
+ * Useful for accessing theme data without switching
+ * 
+ * @param themeName - Name of the theme to retrieve
+ * @returns CompleteThemeConfig | null - The requested theme or null if not found
+ * 
+ * @example
+ * ```tsx
+ * function ThemePreview() {
+ *   const harveyTheme = useThemeByName('harvey');
+ *   
+ *   if (!harveyTheme) return <div>Theme not found</div>;
+ *   
+ *   return (
+ *     <div style={{ color: harveyTheme.colors.primary[500] }}>
+ *       Harvey Theme Preview
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export const useThemeByName = (themeName: string) => {
+  const { getTheme } = useTheme();
+  return getTheme(themeName);
+};
+
+/**
+ * Hook to check if a specific theme is available
+ * 
+ * @param themeName - Name of the theme to check
+ * @returns boolean - True if theme is available
+ * 
+ * @example
+ * ```tsx
+ * function ThemeSwitcher() {
+ *   const hasHarveyTheme = useThemeAvailable('harvey');
+ *   
+ *   return (
+ *     <div>
+ *       {hasHarveyTheme && (
+ *         <button onClick={() => setTheme('harvey')}>
+ *           Harvey Theme
+ *         </button>
+ *       )}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export const useThemeAvailable = (themeName: string): boolean => {
+  const { availableThemes } = useTheme();
+  return availableThemes.includes(themeName);
+};