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

package/src/themes/themes/stan-design.ts

@@ -0,0 +1,683 @@
+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'
+        }
+      },
+      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'
+        },
+        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'
+      },
+      
+      }
+  }
+};