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

package/dist/theme.js

@@ -1,683 +1,679 @@
-import { MultiThemeConfig } from '../types';
-
 /**
  * Stan Design Base Theme
  * Modern, professional design with Clash Display font
  */
-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: {
-        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: {
-      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'
+export const stanDesignTheme = {
+    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: {
+                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: {
+            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'
+            },
+            letterSpacing: {
+                tight: '-0.025em',
+                normal: '0em',
+                wide: '0.025em',
+                wider: '0.05em',
+                widest: '0.1em'
+            }
+        },
+        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: {
+            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: {
+            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'
+            }
         }
-      },
-      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'
-      }
-    },
-    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: {
-      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: {
-      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: {
-    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': '37, 99, 235',
-      '600-rgb': '29, 78, 216',
-      '700-rgb': '30, 64, 175'
-    },
-    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: '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': '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
-    },
-    // Additional colors referenced in CSS
-    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': '#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': 'transparent',
-    // Text colors referenced in CSS
-    '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'
-      },
-      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'
-      }
-    },
-    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'
-      }
-    },
-    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'
-    },
-    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'
-      }
-    },
-    layout: {
-      page: '2rem',
-      section: '3rem',
-      container: '1rem',
-      grid: '1.5rem'
-    }
-  },
-  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'
-    },
-    properties: {
-      colors: '0.2s ease',
-      transform: '0.2s ease',
-      opacity: '0.15s ease',
-      shadow: '0.2s ease'
-    }
-  },
-  borderRadius: {
-    none: '0',
-    sm: '0.125rem',
-    md: '0.375rem',
-    lg: '0.5rem',
-    xl: '0.75rem',
-    '2xl': '1rem',
-    full: '9999px'
-  },
-  borderWidth: {
-    none: '0',
-    thin: '0.5px',
-    normal: '1px',
-    focus: '2px',
-    thick: '3px',
-    extraThick: '4px'
-  },
-  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'
-    },
-    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'
-  },
-  container: {
-    width: {
-      small: '16rem',
-      medium: '20rem',
-      large: '24rem',
-      xl: '32rem',
-      full: '100%'
-    }
-  },
-  shimmer: {
-    alpha: '0.2',
-    color: 'rgba(255, 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'
-  },
-  
-  // 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': '96, 165, 250',
-          '600-rgb': '147, 197, 253',
-          '700-rgb': '191, 219, 254'
+            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': '37, 99, 235',
+            '600-rgb': '29, 78, 216',
+            '700-rgb': '30, 64, 175'
         },
         secondary: {
-          50: '#111827',
-          100: '#1f2937',
-          200: '#374151',
-          300: '#4b5563',
-          400: '#6b7280',
-          500: '#9ca3af',
-          600: '#d1d5db',
-          700: '#e5e7eb',
-          800: '#f3f4f6',
-          900: '#f9fafb'
+            50: '#f9fafb',
+            100: '#f3f4f6',
+            200: '#e5e7eb',
+            300: '#d1d5db',
+            400: '#9ca3af',
+            500: '#6b7280',
+            600: '#4b5563',
+            700: '#374151',
+            800: '#1f2937',
+            900: '#111827'
         },
         semantic: {
-          success: '#10b981',
-          warning: '#fbbf24',
-          error: '#f87171',
-          info: '#60a5fa',
-          // RGB versions for rgba() usage
-          successRgb: '16, 185, 129',
-          warningRgb: '251, 191, 36',
-          errorRgb: '248, 113, 113',
-          infoRgb: '96, 165, 250',
-          // Additional RGB versions referenced in CSS
-          'success-rgb': '16, 185, 129',
-          'warning-rgb': '251, 191, 36',
-          'error-rgb': '248, 113, 113',
-          'info-rgb': '96, 165, 250'
+            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: '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': '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: '#171717',
-          100: '#262626',
-          200: '#404040',
-          300: '#525252',
-          400: '#737373',
-          500: '#a3a3a3',
-          600: '#d4d4d4',
-          700: '#e5e5e5',
-          800: '#f5f5f5',
-          900: '#fafafa'
+            50: '#fafafa',
+            100: '#f5f5f5',
+            200: '#e5e5e5',
+            300: '#d4d4d4',
+            400: '#a3a3a3',
+            500: '#737373',
+            600: '#525252',
+            700: '#404040',
+            800: '#262626',
+            900: '#171717'
         },
         surface: {
-          background: '#0f172a',
-          surface: '#1e293b',
-          border: '#334155',
-          divider: '#475569'
+            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: '#f8fafc',
-          secondary: '#cbd5e1',
-          muted: '#94a3b8',
-          inverse: '#0f172a',
-          onPrimary: '#0f172a',
-          onSecondary: '#0f172a',
-          onSurface: '#f8fafc'
+            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: '#475569',
-          active: '#1e293b',
-          focus: '#3b82f6',
-          disabled: '#475569'
+            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
         },
         // Additional colors referenced in CSS
-        accent: '#8b5cf6',
-        'bg-primary': '#0f172a',
-        'bg-secondary': '#1e293b',
-        'surface-bg': '#1e293b',
+        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': '#3b82f6',
-        'primary-active': '#60a5fa',
-        'accent-rgb': '139, 92, 246',
-        'border': '#334155',
+        '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': 'transparent',
         // Text colors referenced in CSS
-        'text-primary': '#f8fafc',
-        'text-secondary': '#cbd5e1'
-      },
-      
-      }
-  }
+        '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'
+            },
+            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'
+            }
+        },
+        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'
+            }
+        },
+        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'
+        },
+        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'
+            }
+        },
+        layout: {
+            page: '2rem',
+            section: '3rem',
+            container: '1rem',
+            grid: '1.5rem'
+        }
+    },
+    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'
+        },
+        properties: {
+            colors: '0.2s ease',
+            transform: '0.2s ease',
+            opacity: '0.15s ease',
+            shadow: '0.2s ease'
+        }
+    },
+    borderRadius: {
+        none: '0',
+        sm: '0.125rem',
+        md: '0.375rem',
+        lg: '0.5rem',
+        xl: '0.75rem',
+        '2xl': '1rem',
+        full: '9999px'
+    },
+    borderWidth: {
+        none: '0',
+        thin: '0.5px',
+        normal: '1px',
+        focus: '2px',
+        thick: '3px',
+        extraThick: '4px'
+    },
+    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'
+        },
+        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'
+    },
+    container: {
+        width: {
+            small: '16rem',
+            medium: '20rem',
+            large: '24rem',
+            xl: '32rem',
+            full: '100%'
+        }
+    },
+    shimmer: {
+        alpha: '0.2',
+        color: 'rgba(255, 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'
+    },
+    // 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': '96, 165, 250',
+                    '600-rgb': '147, 197, 253',
+                    '700-rgb': '191, 219, 254'
+                },
+                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: '16, 185, 129',
+                    warningRgb: '251, 191, 36',
+                    errorRgb: '248, 113, 113',
+                    infoRgb: '96, 165, 250',
+                    // Additional RGB versions referenced in CSS
+                    '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'
+                },
+                // Additional colors referenced in CSS
+                accent: '#8b5cf6',
+                'bg-primary': '#0f172a',
+                'bg-secondary': '#1e293b',
+                'surface-bg': '#1e293b',
+                // Additional missing CSS variables
+                'primary-hover': '#3b82f6',
+                'primary-active': '#60a5fa',
+                'accent-rgb': '139, 92, 246',
+                'border': '#334155',
+                // Text colors referenced in CSS
+                'text-primary': '#f8fafc',
+                'text-secondary': '#cbd5e1'
+            },
+        }
+    }
 };