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

package/dist/themes/themes/stan-design.esm.js

@@ -4,514 +4,679 @@ import { MultiThemeConfig } from '../types';
  * Stan Design Base Theme
  * Modern, professional design with Clash Display font
  */
-export const stanDesignTheme= {
-  fonts,
-      fallbacks, 'system-ui', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', '"Noto Sans"', 'sans-serif'],
-      weights, 400, 500, 600, 700],
-      display,
-      source,
-        files}
+export const stanDesignTheme: MultiThemeConfig = {
+  fonts: {
+    primary: {
+      family: 'Clash Display',
+      fallbacks: ['ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', '"Noto Sans"', 'sans-serif'],
+      weights: [300, 400, 500, 600, 700],
+      display: 'swap',
+      source: {
+        type: 'custom',
+        files: {
+          woff2: '/fonts/clash-display/ClashDisplay-Variable.woff2'
+        }
       },
-      sizes,
-        sm,
-        md,
-        lg,
-        xl,
-        '2xl',
-        '3xl',
-        '4xl',
-        '5xl',
-        '6xl'},
-      lineHeights,
-        normal,
-        relaxed,
-        loose},
-      letterSpacing,
-        normal,
-        wide,
-        wider,
-        widest}
+      sizes: {
+        xs: '0.75rem',
+        sm: '0.875rem',
+        md: '1rem',
+        lg: '1.125rem',
+        xl: '1.25rem',
+        '2xl': '1.5rem',
+        '3xl': '1.875rem',
+        '4xl': '2.25rem',
+        '5xl': '3rem',
+        '6xl': '3.75rem'
+      },
+      lineHeights: {
+        tight: '1.25',
+        normal: '1.5',
+        relaxed: '1.75',
+        loose: '2'
+      },
+      letterSpacing: {
+        tight: '-0.025em',
+        normal: '0em',
+        wide: '0.025em',
+        wider: '0.05em',
+        widest: '0.1em'
+      }
     },
-    secondary,
-      fallbacks, 'system-ui', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', '"Noto Sans"', 'sans-serif'],
-      weights, 400, 500, 600, 700],
-      display,
-      source,
-        files}
+    secondary: {
+      family: 'Clash Display',
+      fallbacks: ['ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', '"Noto Sans"', 'sans-serif'],
+      weights: [300, 400, 500, 600, 700],
+      display: 'swap',
+      source: {
+        type: 'custom',
+        files: {
+          woff2: '/fonts/clash-display/ClashDisplay-Variable.woff2'
+        }
+      },
+      sizes: {
+        xs: '0.75rem',
+        sm: '0.875rem',
+        md: '1rem',
+        lg: '1.125rem',
+        xl: '1.25rem',
+        '2xl': '1.5rem',
+        '3xl': '1.875rem',
+        '4xl': '2.25rem',
+        '5xl': '3rem',
+        '6xl': '3.75rem'
+      },
+      lineHeights: {
+        tight: '1.25',
+        normal: '1.5',
+        relaxed: '1.75',
+        loose: '2'
       },
-      sizes,
-        sm,
-        md,
-        lg,
-        xl,
-        '2xl',
-        '3xl',
-        '4xl',
-        '5xl',
-        '6xl'},
-      lineHeights,
-        normal,
-        relaxed,
-        loose},
-      letterSpacing,
-        normal,
-        wide,
-        wider,
-        widest}
+      letterSpacing: {
+        tight: '-0.025em',
+        normal: '0em',
+        wide: '0.025em',
+        wider: '0.05em',
+        widest: '0.1em'
+      }
     },
-    display, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif',
-      weights, 500, 600, 700],
-      sizes,
-        sm,
-        md,
-        lg,
-        xl,
-        '2xl',
-        '3xl',
-        '4xl',
-        '5xl',
-        '6xl'},
-      lineHeights,
-        normal,
-        relaxed,
-        loose},
-      letterSpacing,
-        normal,
-        wide,
-        wider,
-        widest}
+    display: {
+      family: 'Clash Display, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif',
+      weights: [400, 500, 600, 700],
+      sizes: {
+        xs: '1.5rem',
+        sm: '1.875rem',
+        md: '2.25rem',
+        lg: '3rem',
+        xl: '3.75rem',
+        '2xl': '4.5rem',
+        '3xl': '6rem',
+        '4xl': '7.5rem',
+        '5xl': '9rem',
+        '6xl': '12rem'
+      },
+      lineHeights: {
+        tight: '1.1',
+        normal: '1.2',
+        relaxed: '1.3',
+        loose: '1.4'
+      },
+      letterSpacing: {
+        tight: '-0.02em',
+        normal: '-0.01em',
+        wide: '0em',
+        wider: '0.01em',
+        widest: '0.02em'
+      }
     },
-    body, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif',
-      weights, 400, 500],
-      sizes,
-        sm,
-        md,
-        lg,
-        xl,
-        '2xl',
-        '3xl',
-        '4xl',
-        '5xl',
-        '6xl'},
-      lineHeights,
-        normal,
-        relaxed,
-        loose},
-      letterSpacing,
-        normal,
-        wide,
-        wider,
-        widest}
+    body: {
+      family: 'Clash Display, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif',
+      weights: [300, 400, 500],
+      sizes: {
+        xs: '0.75rem',
+        sm: '0.875rem',
+        md: '1rem',
+        lg: '1.125rem',
+        xl: '1.25rem',
+        '2xl': '1.5rem',
+        '3xl': '1.875rem',
+        '4xl': '2.25rem',
+        '5xl': '3rem',
+        '6xl': '3.75rem'
+      },
+      lineHeights: {
+        tight: '1.4',
+        normal: '1.6',
+        relaxed: '1.8',
+        loose: '2'
+      },
+      letterSpacing: {
+        tight: '-0.01em',
+        normal: '0em',
+        wide: '0.01em',
+        wider: '0.02em',
+        widest: '0.05em'
+      }
     },
-    mono, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace',
-      weights, 500, 600],
-      sizes,
-        sm,
-        md,
-        lg,
-        xl,
-        '2xl',
-        '3xl',
-        '4xl',
-        '5xl',
-        '6xl'},
-      lineHeights,
-        normal,
-        relaxed,
-        loose},
-      letterSpacing,
-        normal,
-        wide,
-        wider,
-        widest}
+    mono: {
+      family: 'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace',
+      weights: [400, 500, 600],
+      sizes: {
+        xs: '0.75rem',
+        sm: '0.875rem',
+        md: '1rem',
+        lg: '1.125rem',
+        xl: '1.25rem',
+        '2xl': '1.5rem',
+        '3xl': '1.875rem',
+        '4xl': '2.25rem',
+        '5xl': '3rem',
+        '6xl': '3.75rem'
+      },
+      lineHeights: {
+        tight: '1.25',
+        normal: '1.5',
+        relaxed: '1.75',
+        loose: '2'
+      },
+      letterSpacing: {
+        tight: '-0.025em',
+        normal: '0em',
+        wide: '0.025em',
+        wider: '0.05em',
+        widest: '0.1em'
+      }
     }
   },
-  colors,
-      100,
-      200,
-      300,
-      400,
-      500, // Updated to match original poker project
-      600,
-      700,
-      800,
-      900,
+  colors: {
+    primary: {
+      50: '#eff6ff',
+      100: '#dbeafe',
+      200: '#bfdbfe',
+      300: '#93c5fd',
+      400: '#60a5fa',
+      500: '#2563eb', // Updated to match original poker project
+      600: '#1d4ed8',
+      700: '#1e40af',
+      800: '#1e3a8a',
+      900: '#1e3a8a',
       // RGB versions for rgba() usage
-      '500-rgb', 99, 235',
-      '600-rgb', 78, 216',
-      '700-rgb', 64, 175'
+      '500-rgb': '37, 99, 235',
+      '600-rgb': '29, 78, 216',
+      '700-rgb': '30, 64, 175'
     },
-    secondary,
-      100,
-      200,
-      300,
-      400,
-      500,
-      600,
-      700,
-      800,
-      900},
-    semantic, // Updated to match original poker project
-      warning,
-      error,
-      errorDark, // Darker red for destructive hover states
-      info, // Updated to match original poker project
+    secondary: {
+      50: '#f9fafb',
+      100: '#f3f4f6',
+      200: '#e5e7eb',
+      300: '#d1d5db',
+      400: '#9ca3af',
+      500: '#6b7280',
+      600: '#4b5563',
+      700: '#374151',
+      800: '#1f2937',
+      900: '#111827'
+    },
+    semantic: {
+      success: '#059669', // Updated to match original poker project
+      warning: '#f59e0b',
+      error: '#ef4444',
+      errorDark: '#dc2626', // Darker red for destructive hover states
+      info: '#2563eb', // Updated to match original poker project
       // RGB versions for rgba() usage
-      successRgb, 150, 105',
-      warningRgb, 158, 11',
-      errorRgb, 68, 68',
-      errorDarkRgb, 38, 38',
-      infoRgb, 99, 235',
+      successRgb: '5, 150, 105',
+      warningRgb: '245, 158, 11',
+      errorRgb: '239, 68, 68',
+      errorDarkRgb: '220, 38, 38',
+      infoRgb: '37, 99, 235',
       // Additional RGB versions referenced in CSS
-      'success-rgb', 150, 105',
-      'warning-rgb', 158, 11',
-      'error-rgb', 68, 68',
-      'error-dark-rgb', 38, 38',
-      'info-rgb', 99, 235'
+      'success-rgb': '5, 150, 105',
+      'warning-rgb': '245, 158, 11',
+      'error-rgb': '239, 68, 68',
+      'error-dark-rgb': '220, 38, 38',
+      'info-rgb': '37, 99, 235'
+    },
+    neutral: {
+      50: '#fafafa',
+      100: '#f5f5f5',
+      200: '#e5e5e5',
+      300: '#d4d4d4',
+      400: '#a3a3a3',
+      500: '#737373',
+      600: '#525252',
+      700: '#404040',
+      800: '#262626',
+      900: '#171717'
+    },
+    surface: {
+      background: '#ffffff',
+      surface: '#f3f4f6', // Updated to match original poker project
+      border: '#e5e7eb', // Updated to match original poker project
+      divider: '#d1d5db' // Updated to match original poker project
+    },
+    text: {
+      primary: '#111827', // Updated to match original poker project
+      secondary: '#4b5563', // Updated to match original poker project
+      muted: '#6b7280', // Updated to match original poker project
+      inverse: '#ffffff',
+      onPrimary: '#ffffff',
+      onSecondary: '#ffffff',
+      onSurface: '#111827' // Updated to match original poker project
+    },
+    interactive: {
+      hover: '#f8fafc', // Updated to match original poker project
+      active: '#f3f4f6', // Updated to match original poker project
+      focus: '#2563eb', // Updated to match original poker project
+      disabled: '#d1d5db' // Updated to match original poker project
     },
-    neutral,
-      100,
-      200,
-      300,
-      400,
-      500,
-      600,
-      700,
-      800,
-      900},
-    surface,
-      surface, // Updated to match original poker project
-      border, // Updated to match original poker project
-      divider},
-    text, // Updated to match original poker project
-      secondary, // Updated to match original poker project
-      muted, // Updated to match original poker project
-      inverse,
-      onPrimary,
-      onSecondary,
-      onSurface},
-    interactive, // Updated to match original poker project
-      active, // Updated to match original poker project
-      focus, // Updated to match original poker project
-      disabled},
     // Additional colors referenced in CSS
-    accent,
-    'bg-primary',
-    'bg-secondary', // Updated to match original poker project
-    'surface-bg', // Updated to match original poker project
+    accent: '#6366f1',
+    'bg-primary': '#ffffff',
+    'bg-secondary': '#f3f4f6', // Updated to match original poker project
+    'surface-bg': '#f3f4f6', // Updated to match original poker project
     // Additional missing CSS variables
-    'primary-hover', // Updated to match original poker project
-    'primary-active', // Updated to match original poker project
-    'accent-rgb', 102, 241',
-    'border', // Updated to match original poker project
+    'primary-hover': '#1d4ed8', // Updated to match original poker project
+    'primary-active': '#1e40af', // Updated to match original poker project
+    'accent-rgb': '99, 102, 241',
+    'border': '#e5e7eb', // Updated to match original poker project
     // Border semantic variables
-    'border-transparent',
+    'border-transparent': 'transparent',
     // Text colors referenced in CSS
-    'text-primary', // Updated to match original poker project
-    'text-secondary'},
-  navigation,
-    style,
-    behavior,
-    responsive,
-    animations,
-        normal,
-        slow,
-        instant},
-      easing,
-        ease,
-        easeIn,
-        easeOut,
-        easeInOut,
-        bounce, -0.55, 0.265, 1.55)',
-        elastic, 0.885, 0.32, 1.275)'
+    'text-primary': '#111827', // Updated to match original poker project
+    'text-secondary': '#4b5563' // Updated to match original poker project
+  },
+  navigation: {
+    layout: 'horizontal',
+    style: 'enhanced',
+    behavior: 'static',
+    responsive: 'mobile-first',
+    animations: {
+      duration: {
+        fast: '0.15s',
+        normal: '0.2s',
+        slow: '0.3s',
+        instant: '0s'
+      },
+      easing: {
+        linear: 'linear',
+        ease: 'ease',
+        easeIn: 'ease-in',
+        easeOut: 'ease-out',
+        easeInOut: 'ease-in-out',
+        bounce: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
+        elastic: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
+      },
+      stagger: {
+        enabled: true,
+        delay: '0.05s',
+        direction: 'forward'
+      },
+      transitions: {
+        enter: '0.2s ease-out',
+        exit: '0.15s ease-in',
+        move: '0.2s ease',
+        resize: '0.1s ease'
+      }
+    },
+    spacing: {
+      container: '1rem',
+      item: '0.5rem',
+      group: '1rem',
+      divider: '0.25rem',
+      icon: '0.5rem',
+      text: '0.25rem',
+      padding: {
+        horizontal: '1rem',
+        vertical: '0.75rem',
+        top: '0.75rem',
+        right: '1rem',
+        bottom: '0.75rem',
+        left: '1rem'
+      },
+      margin: {
+        horizontal: '0.5rem',
+        vertical: '0.25rem',
+        top: '0.25rem',
+        right: '0.5rem',
+        bottom: '0.25rem',
+        left: '0.5rem'
+      }
+    },
+    colors: {
+      background: {
+        primary: '#ffffff',
+        secondary: '#f3f4f6', // Updated to match original poker project
+        tertiary: '#f8fafc', // Updated to match original poker project
+        light: '#ffffff',
+        dark: '#0f172a',
+        contrast: '#000000'
+      },
+      text: {
+        primary: '#111827', // Updated to match original poker project
+        secondary: '#4b5563', // Updated to match original poker project
+        tertiary: '#6b7280', // Updated to match original poker project
+        light: '#9ca3af', // Updated to match original poker project
+        dark: '#0f172a',
+        contrast: '#ffffff'
+      },
+      border: {
+        primary: '#e5e7eb', // Updated to match original poker project
+        secondary: '#d1d5db', // Updated to match original poker project
+        tertiary: '#9ca3af', // Updated to match original poker project
+        light: '#f8fafc', // Updated to match original poker project
+        dark: '#475569',
+        contrast: '#000000'
+      },
+      accent: {
+        primary: '#2563eb', // Updated to match original poker project
+        secondary: '#6366f1',
+        tertiary: '#8b5cf6',
+        light: '#dbeafe',
+        dark: '#1d4ed8', // Updated to match original poker project
+        contrast: '#ffffff'
+      },
+      hover: {
+        primary: '#f8fafc', // Updated to match original poker project
+        secondary: '#f3f4f6', // Updated to match original poker project
+        tertiary: '#d1d5db', // Updated to match original poker project
+        light: '#ffffff',
+        dark: '#1e293b',
+        contrast: '#f8fafc'
       },
-      stagger,
-        delay,
-        direction},
-      transitions,
-        exit,
-        move,
-        resize}
+      active: {
+        primary: '#2563eb', // Updated to match original poker project
+        secondary: '#6366f1',
+        tertiary: '#8b5cf6',
+        light: '#dbeafe',
+        dark: '#1d4ed8', // Updated to match original poker project
+        contrast: '#ffffff'
+      },
+      disabled: {
+        primary: '#f8fafc', // Updated to match original poker project
+        secondary: '#f3f4f6', // Updated to match original poker project
+        tertiary: '#d1d5db', // Updated to match original poker project
+        light: '#f3f4f6', // Updated to match original poker project
+        dark: '#475569',
+        contrast: '#94a3b8'
+      },
+      focus: {
+        primary: '#2563eb', // Updated to match original poker project
+        secondary: '#6366f1',
+        tertiary: '#8b5cf6',
+        light: '#dbeafe',
+        dark: '#1d4ed8', // Updated to match original poker project
+        contrast: '#ffffff'
+      }
     },
-    spacing,
-      item,
-      group,
-      divider,
-      icon,
-      text,
-      padding,
-        vertical,
-        top,
-        right,
-        bottom,
-        left},
-      margin,
-        vertical,
-        top,
-        right,
-        bottom,
-        left}
+    typography: {
+      fontFamily: 'Clash Display, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif',
+      fontSize: {
+        xs: '0.75rem',
+        sm: '0.875rem',
+        base: '1rem',
+        lg: '1.125rem',
+        xl: '1.25rem',
+        '2xl': '1.5rem'
+      },
+      fontWeight: {
+        light: '300',
+        normal: '400',
+        medium: '500',
+        semibold: '600',
+        bold: '700'
+      },
+      lineHeight: {
+        tight: '1.25',
+        normal: '1.5',
+        relaxed: '1.75',
+        loose: '2'
+      },
+      letterSpacing: {
+        tight: '-0.025em',
+        normal: '0',
+        wide: '0.025em',
+        wider: '0.05em'
+      }
     },
-    colors,
-        secondary, // Updated to match original poker project
-        tertiary, // Updated to match original poker project
-        light,
-        dark,
-        contrast},
-      text, // Updated to match original poker project
-        secondary, // Updated to match original poker project
-        tertiary, // Updated to match original poker project
-        light, // Updated to match original poker project
-        dark,
-        contrast},
-      border, // Updated to match original poker project
-        secondary, // Updated to match original poker project
-        tertiary, // Updated to match original poker project
-        light, // Updated to match original poker project
-        dark,
-        contrast},
-      accent, // Updated to match original poker project
-        secondary,
-        tertiary,
-        light,
-        dark, // Updated to match original poker project
-        contrast},
-      hover, // Updated to match original poker project
-        secondary, // Updated to match original poker project
-        tertiary, // Updated to match original poker project
-        light,
-        dark,
-        contrast},
-      active, // Updated to match original poker project
-        secondary,
-        tertiary,
-        light,
-        dark, // Updated to match original poker project
-        contrast},
-      disabled, // Updated to match original poker project
-        secondary, // Updated to match original poker project
-        tertiary, // Updated to match original poker project
-        light, // Updated to match original poker project
-        dark,
-        contrast},
-      focus, // Updated to match original poker project
-        secondary,
-        tertiary,
-        light,
-        dark, // Updated to match original poker project
-        contrast}
+    breakpoints: {
+      mobile: '640px',
+      tablet: '768px',
+      desktop: '1024px',
+      wide: '1280px',
+      ultra: '1536px'
+    }
+  },
+  spacing: {
+    scale: {
+      xs: '0.25rem',
+      sm: '0.5rem',
+      md: '1rem',
+      lg: '1.5rem',
+      xl: '2rem',
+      '2xl': '3rem',
+      '3xl': '4rem',
+      '4xl': '6rem',
+      '5xl': '8rem',
+      '6xl': '12rem'
     },
-    typography, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif',
-      fontSize,
-        sm,
-        base,
-        lg,
-        xl,
-        '2xl'},
-      fontWeight,
-        normal,
-        medium,
-        semibold,
-        bold},
-      lineHeight,
-        normal,
-        relaxed,
-        loose},
-      letterSpacing,
-        normal,
-        wide,
-        wider}
+    component: {
+      button: {
+        padding: '0.75rem 1.5rem',
+        margin: '0.5rem',
+        gap: '0.5rem'
+      },
+      input: {
+        padding: '0.75rem 1rem',
+        margin: '0.5rem',
+        gap: '0.5rem'
+      },
+      card: {
+        padding: '1.5rem',
+        margin: '1rem',
+        gap: '1rem'
+      }
     },
-    breakpoints,
-      tablet,
-      desktop,
-      wide,
-      ultra}
+    layout: {
+      page: '2rem',
+      section: '3rem',
+      container: '1rem',
+      grid: '1.5rem'
+    }
   },
-  spacing,
-      sm,
-      md,
-      lg,
-      xl,
-      '2xl',
-      '3xl',
-      '4xl',
-      '5xl',
-      '6xl'},
-    component,
-        margin,
-        gap},
-      input,
-        margin,
-        gap},
-      card,
-        margin,
-        gap}
+  shadows: {
+    sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+    md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+    lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+    xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+    '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
+    inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+    none: '0 0 #0000'
+  },
+  transitions: {
+    duration: {
+      fast: '0.15s',
+      normal: '0.2s',
+      slow: '0.3s'
+    },
+    easing: {
+      linear: 'linear',
+      ease: 'ease',
+      easeIn: 'ease-in',
+      easeOut: 'ease-out',
+      easeInOut: 'ease-in-out'
     },
-    layout,
-      section,
-      container,
-      grid}
+    properties: {
+      colors: '0.2s ease',
+      transform: '0.2s ease',
+      opacity: '0.15s ease',
+      shadow: '0.2s ease'
+    }
   },
-  shadows)',
-    md), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
-    lg), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
-    xl), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
-    '2xl')',
-    inner)',
-    none},
-  transitions,
-      normal,
-      slow},
-    easing,
-      ease,
-      easeIn,
-      easeOut,
-      easeInOut},
-    properties,
-      transform,
-      opacity,
-      shadow}
+  borderRadius: {
+    none: '0',
+    sm: '0.125rem',
+    md: '0.375rem',
+    lg: '0.5rem',
+    xl: '0.75rem',
+    '2xl': '1rem',
+    full: '9999px'
   },
-  borderRadius,
-    sm,
-    md,
-    lg,
-    xl,
-    '2xl',
-    full},
-  borderWidth,
-    thin,
-    normal,
-    focus,
-    thick,
-    extraThick},
-  animation,
-      normal,
-      slow},
-    easing,
-      ease,
-      easeIn,
-      easeOut,
-      easeInOut},
-    transforms,
-      offsetY,
-      scale}
+  borderWidth: {
+    none: '0',
+    thin: '0.5px',
+    normal: '1px',
+    focus: '2px',
+    thick: '3px',
+    extraThick: '4px'
   },
-  accessibility,
-      offset,
-      color)'
+  animation: {
+    duration: {
+      fast: '0.3s',
+      normal: '0.2s',
+      slow: '1.5s'
+    },
+    easing: {
+      linear: 'linear',
+      ease: 'ease',
+      easeIn: 'ease-in',
+      easeOut: 'ease-out',
+      easeInOut: 'ease-in-out'
     },
-    outline},
-    highContrast,
-      outlineWidth},
-    disabled,
-      opacity}
+    transforms: {
+      hoverY: '-2px',
+      offsetY: '10px',
+      scale: '1.02'
+    }
+  },
+  accessibility: {
+    focusRing: {
+      width: '3px',
+      offset: '2px',
+      color: 'var(--cs-colors-interactive-focus)'
+    },
+    outline: {
+      offset: '2px'
+    },
+    highContrast: {
+      borderWidth: '2px',
+      outlineWidth: '4px'
+    },
+    disabled: {
+      cursor: 'not-allowed',
+      opacity: '0.7'
+    }
+  },
+  print: {
+    borderColor: '#000',
+    textColor: '#000',
+    textSecondaryColor: '#333',
+    backgroundColor: 'transparent'
+  },
+  containerQuery: {
+    small: '400px',
+    medium: '600px',
+    large: '800px'
   },
-  print,
-    textColor,
-    textSecondaryColor,
-    backgroundColor},
-  containerQuery,
-    medium,
-    large},
-  container,
-      medium,
-      large,
-      xl,
-      full}
+  container: {
+    width: {
+      small: '16rem',
+      medium: '20rem',
+      large: '24rem',
+      xl: '32rem',
+      full: '100%'
+    }
+  },
+  shimmer: {
+    alpha: '0.2',
+    color: 'rgba(255, 255, 255, 0.2)'
   },
-  shimmer,
-    color, 255, 255, 0.2)'
+  meta: {
+    name: 'Stan Design',
+    description: 'Modern, professional design system with Clash Display typography and comprehensive theming',
+    author: 'Stan Design Team',
+    version: '1.0.0',
+    category: 'brand',
+    tags: ['modern', 'professional', 'typography', 'clash-display', 'comprehensive'],
+    preview: '/themes/stan-design-preview.png',
+    createdAt: '2024-12-01T00:00:00.000Z',
+    updatedAt: '2024-12-01T00:00:00.000Z'
   },
-  meta,
-    description, professional design system with Clash Display typography and comprehensive theming',
-    author,
-    version,
-    category,
-    tags, 'professional', 'typography', 'clash-display', 'comprehensive'],
-    preview,
-    createdAt,
-    updatedAt},
   
-  // NEW,
-          100,
-          200,
-          300,
-          400,
-          500,
-          600,
-          700,
-          800,
-          900,
+  // NEW: Add dark mode overrides
+  modes: {
+    dark: {
+      colors: {
+        primary: {
+          50: '#1e3a8a',
+          100: '#1e40af',
+          200: '#1d4ed8',
+          300: '#2563eb',
+          400: '#3b82f6',
+          500: '#60a5fa',
+          600: '#93c5fd',
+          700: '#bfdbfe',
+          800: '#dbeafe',
+          900: '#eff6ff',
           // RGB versions for rgba() usage
-          '500-rgb', 165, 250',
-          '600-rgb', 197, 253',
-          '700-rgb', 219, 254'
+          '500-rgb': '96, 165, 250',
+          '600-rgb': '147, 197, 253',
+          '700-rgb': '191, 219, 254'
         },
-        secondary,
-          100,
-          200,
-          300,
-          400,
-          500,
-          600,
-          700,
-          800,
-          900},
-        semantic,
-          warning,
-          error,
-          info,
+        secondary: {
+          50: '#111827',
+          100: '#1f2937',
+          200: '#374151',
+          300: '#4b5563',
+          400: '#6b7280',
+          500: '#9ca3af',
+          600: '#d1d5db',
+          700: '#e5e7eb',
+          800: '#f3f4f6',
+          900: '#f9fafb'
+        },
+        semantic: {
+          success: '#10b981',
+          warning: '#fbbf24',
+          error: '#f87171',
+          info: '#60a5fa',
           // RGB versions for rgba() usage
-          successRgb, 185, 129',
-          warningRgb, 191, 36',
-          errorRgb, 113, 113',
-          infoRgb, 165, 250',
+          successRgb: '16, 185, 129',
+          warningRgb: '251, 191, 36',
+          errorRgb: '248, 113, 113',
+          infoRgb: '96, 165, 250',
           // Additional RGB versions referenced in CSS
-          'success-rgb', 185, 129',
-          'warning-rgb', 191, 36',
-          'error-rgb', 113, 113',
-          'info-rgb', 165, 250'
+          'success-rgb': '16, 185, 129',
+          'warning-rgb': '251, 191, 36',
+          'error-rgb': '248, 113, 113',
+          'info-rgb': '96, 165, 250'
+        },
+        neutral: {
+          50: '#171717',
+          100: '#262626',
+          200: '#404040',
+          300: '#525252',
+          400: '#737373',
+          500: '#a3a3a3',
+          600: '#d4d4d4',
+          700: '#e5e5e5',
+          800: '#f5f5f5',
+          900: '#fafafa'
+        },
+        surface: {
+          background: '#0f172a',
+          surface: '#1e293b',
+          border: '#334155',
+          divider: '#475569'
+        },
+        text: {
+          primary: '#f8fafc',
+          secondary: '#cbd5e1',
+          muted: '#94a3b8',
+          inverse: '#0f172a',
+          onPrimary: '#0f172a',
+          onSecondary: '#0f172a',
+          onSurface: '#f8fafc'
+        },
+        interactive: {
+          hover: '#475569',
+          active: '#1e293b',
+          focus: '#3b82f6',
+          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 colors referenced in CSS
-        accent,
-        'bg-primary',
-        'bg-secondary',
-        'surface-bg',
+        accent: '#8b5cf6',
+        'bg-primary': '#0f172a',
+        'bg-secondary': '#1e293b',
+        'surface-bg': '#1e293b',
         // Additional missing CSS variables
-        'primary-hover',
-        'primary-active',
-        'accent-rgb', 92, 246',
-        'border',
+        'primary-hover': '#3b82f6',
+        'primary-active': '#60a5fa',
+        'accent-rgb': '139, 92, 246',
+        'border': '#334155',
         // Text colors referenced in CSS
-        'text-primary',
-        'text-secondary'},
+        'text-primary': '#f8fafc',
+        'text-secondary': '#cbd5e1'
+      },
       
       }
   }