@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.45 → 0.2.46

package/src/themes/themes/harvey.ts

@@ -2,14 +2,14 @@ import { MultiThemeConfig } from '../types';
 
 /**
  * Harvey Creative Theme
- * Modern, vibrant design with Poppins font and warm color palette
+ * Modern, vibrant design with Inter font and warm burgundy/gold color palette
  */
 export const harveyTheme: MultiThemeConfig = {
   fonts: {
     primary: {
-      family: 'Poppins',
+      family: 'Inter',
       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, 800],
+      weights: [300, 400, 500, 600, 700],
       display: 'swap',
       source: {
         type: 'google'
@@ -27,21 +27,21 @@ export const harveyTheme: MultiThemeConfig = {
         '6xl': '3.75rem'
       },
       lineHeights: {
-        tight: '1.2',
+        tight: '1.25',
         normal: '1.5',
-        relaxed: '1.7',
+        relaxed: '1.75',
         loose: '2'
       },
       letterSpacing: {
-        tight: '-0.02em',
+        tight: '-0.025em',
         normal: '0em',
-        wide: '0.02em',
-        wider: '0.04em',
-        widest: '0.08em'
+        wide: '0.025em',
+        wider: '0.05em',
+        widest: '0.1em'
       }
     },
     secondary: {
-      family: 'Poppins',
+      family: 'Inter',
       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',
@@ -61,22 +61,22 @@ export const harveyTheme: MultiThemeConfig = {
         '6xl': '3.75rem'
       },
       lineHeights: {
-        tight: '1.2',
+        tight: '1.25',
         normal: '1.5',
-        relaxed: '1.7',
+        relaxed: '1.75',
         loose: '2'
       },
       letterSpacing: {
-        tight: '-0.02em',
+        tight: '-0.025em',
         normal: '0em',
-        wide: '0.02em',
-        wider: '0.04em',
-        widest: '0.08em'
+        wide: '0.025em',
+        wider: '0.05em',
+        widest: '0.1em'
       }
     },
     display: {
-      family: 'Poppins, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif',
-      weights: [600, 700, 800, 900],
+      family: 'Inter, 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',
@@ -90,22 +90,22 @@ export const harveyTheme: MultiThemeConfig = {
         '6xl': '12rem'
       },
       lineHeights: {
-        tight: '1.05',
-        normal: '1.15',
-        relaxed: '1.25',
-        loose: '1.35'
+        tight: '1.1',
+        normal: '1.2',
+        relaxed: '1.3',
+        loose: '1.4'
       },
       letterSpacing: {
-        tight: '-0.03em',
-        normal: '-0.02em',
-        wide: '-0.01em',
-        wider: '0em',
-        widest: '0.01em'
+        tight: '-0.02em',
+        normal: '-0.01em',
+        wide: '0em',
+        wider: '0.01em',
+        widest: '0.02em'
       }
     },
     body: {
-      family: 'Poppins, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif',
-      weights: [300, 400, 500, 600],
+      family: 'Inter, 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',
@@ -119,17 +119,17 @@ export const harveyTheme: MultiThemeConfig = {
         '6xl': '3.75rem'
       },
       lineHeights: {
-        tight: '1.3',
+        tight: '1.4',
         normal: '1.6',
         relaxed: '1.8',
-        loose: '2.1'
+        loose: '2'
       },
       letterSpacing: {
         tight: '-0.01em',
         normal: '0em',
         wide: '0.01em',
         wider: '0.02em',
-        widest: '0.04em'
+        widest: '0.05em'
       }
     },
     mono: {
@@ -164,79 +164,111 @@ export const harveyTheme: MultiThemeConfig = {
   },
   colors: {
     primary: {
-      50: '#fff7ed',
-      100: '#ffedd5',
-      200: '#fed7aa',
-      300: '#fdba74',
-      400: '#fb923c',
-      500: '#f97316',
-      600: '#ea580c',
-      700: '#c2410c',
-      800: '#9a3412',
-      900: '#7c2d12'
+      50: '#FBEAEA',
+      100: '#F4CFCF',
+      200: '#E8A9A9',
+      300: '#D97D7D',
+      400: '#C55A5A',
+      500: '#A3485A',
+      600: '#8C3447',
+      700: '#752737',
+      800: '#662222',
+      900: '#421414',
+      // RGB versions for rgba() usage
+      '500-rgb': '163, 72, 90',
+      '600-rgb': '140, 52, 71',
+      '700-rgb': '117, 39, 55'
     },
     secondary: {
-      50: '#fefce8',
-      100: '#fef9c3',
-      200: '#fef08a',
-      300: '#fde047',
-      400: '#facc15',
-      500: '#eab308',
-      600: '#ca8a04',
-      700: '#a16207',
-      800: '#854d0e',
-      900: '#713f12'
+      50: '#FFF8E8',
+      100: '#FFF1D1',
+      200: '#FDE5B3',
+      300: '#F5DAA7',
+      400: '#EACF8D',
+      500: '#D9BA71',
+      600: '#BCA059',
+      700: '#9C8245',
+      800: '#7B6534',
+      900: '#544521'
     },
     semantic: {
-      success: '#16a34a',
-      warning: '#f59e0b',
-      error: '#dc2626',
-      info: '#2563eb'
+      success: '#1E824C',
+      warning: '#E6A23C',
+      error: '#D93025',
+      errorDark: '#A12017',
+      info: '#007BCE',
+      // RGB versions for rgba() usage
+      successRgb: '30, 130, 76',
+      warningRgb: '230, 162, 60',
+      errorRgb: '217, 48, 37',
+      errorDarkRgb: '161, 32, 23',
+      infoRgb: '0, 123, 206',
+      // Additional RGB versions referenced in CSS
+      'success-rgb': '30, 130, 76',
+      'warning-rgb': '230, 162, 60',
+      'error-rgb': '217, 48, 37',
+      'error-dark-rgb': '161, 32, 23',
+      'info-rgb': '0, 123, 206'
     },
     neutral: {
-      50: '#fafaf9',
-      100: '#f5f5f4',
-      200: '#e7e5e4',
-      300: '#d6d3d1',
-      400: '#a8a29e',
-      500: '#78716c',
-      600: '#57534e',
-      700: '#44403c',
-      800: '#292524',
-      900: '#1c1917'
+      50: '#FAFAFA',
+      100: '#F4F4F4',
+      200: '#E8E8E8',
+      300: '#D1D1D1',
+      400: '#B5B5B5',
+      500: '#999999',
+      600: '#7A7A7A',
+      700: '#5C5C5C',
+      800: '#3D3D3D',
+      900: '#1E1E1E'
     },
     surface: {
-      background: '#fefefe',
-      surface: '#fafaf9',
-      border: '#e7e5e4',
-      divider: '#d6d3d1'
+      background: '#FFF9F3',
+      surface: '#FFFFFF',
+      border: '#EAD7C0',
+      divider: '#F0E2D0'
     },
     text: {
-      primary: '#1c1917',
-      secondary: '#44403c',
-      muted: '#78716c',
-      inverse: '#fafaf9',
-      onPrimary: '#fefefe',
-      onSecondary: '#fefefe',
-      onSurface: '#1c1917'
+      primary: '#2B1212',
+      secondary: '#5E3A3A',
+      muted: '#8C6F6F',
+      inverse: '#FFFFFF',
+      onPrimary: '#FFFFFF',
+      onSecondary: '#2B1212',
+      onSurface: '#2B1212'
     },
     interactive: {
-      hover: '#fff7ed',
-      active: '#fed7aa',
-      focus: '#f97316',
-      disabled: '#d6d3d1'
-    }
+      hover: '#842A3B',
+      active: '#662222',
+      focus: '#A3485A',
+      disabled: '#C9B6B6'
+    },
+    // Additional colors referenced in CSS
+    accent: '#F5DAA7',
+    'bg-primary': '#FBEAEA',
+    'bg-secondary': '#FFF1D1',
+    'surface-bg': '#FFF9F3',
+    // Additional missing CSS variables
+    'primary-hover': '#842A3B',
+    'primary-active': '#662222',
+    'accent-rgb': '245, 218, 167',
+    'border': '#EAD7C0',
+    // Border semantic variables
+    'border-transparent': 'transparent',
+    // Text colors referenced in CSS
+    'text-primary': '#2B1212',
+    'text-secondary': '#5E3A3A'
   },
   navigation: {
     layout: 'horizontal',
-    style: 'creative',
-    behavior: 'floating',
-    responsive: 'adaptive',
+    style: 'enhanced',
+    behavior: 'static',
+    responsive: 'mobile-first',
     animations: {
       duration: {
-        fast: '0.12s',
-        normal: '0.25s',
-        slow: '0.4s',
+        fast: '0.15s',
+        normal: '0.2s',
+        slow: '0.3s',
         instant: '0s'
       },
       easing: {
@@ -250,108 +282,108 @@ export const harveyTheme: MultiThemeConfig = {
       },
       stagger: {
         enabled: true,
-        delay: '0.03s',
+        delay: '0.05s',
         direction: 'forward'
       },
       transitions: {
-        enter: '0.25s ease-in-out',
-        exit: '0.12s ease-in',
-        move: '0.25s ease',
-        resize: '0.15s ease'
+        enter: '0.2s ease-out',
+        exit: '0.15s ease-in',
+        move: '0.2s ease',
+        resize: '0.1s ease'
       }
     },
     spacing: {
-      container: '1.25rem',
-      item: '0.75rem',
-      group: '1.25rem',
-      divider: '0.5rem',
-      icon: '0.75rem',
-      text: '0.5rem',
+      container: '1rem',
+      item: '0.5rem',
+      group: '1rem',
+      divider: '0.25rem',
+      icon: '0.5rem',
+      text: '0.25rem',
       padding: {
-        horizontal: '1.25rem',
-        vertical: '1rem',
-        top: '1rem',
-        right: '1.25rem',
-        bottom: '1rem',
-        left: '1.25rem'
+        horizontal: '1rem',
+        vertical: '0.75rem',
+        top: '0.75rem',
+        right: '1rem',
+        bottom: '0.75rem',
+        left: '1rem'
       },
       margin: {
-        horizontal: '0.75rem',
-        vertical: '0.5rem',
-        top: '0.5rem',
-        right: '0.75rem',
-        bottom: '0.5rem',
-        left: '0.75rem'
+        horizontal: '0.5rem',
+        vertical: '0.25rem',
+        top: '0.25rem',
+        right: '0.5rem',
+        bottom: '0.25rem',
+        left: '0.5rem'
       }
     },
     colors: {
       background: {
         primary: '#ffffff',
-        secondary: '#fefefe',
-        tertiary: '#fafaf9',
+        secondary: '#FFF9F3',
+        tertiary: '#FAFAFA',
         light: '#ffffff',
-        dark: '#1c1917',
+        dark: '#2B1212',
         contrast: '#000000'
       },
       text: {
-        primary: '#1c1917',
-        secondary: '#57534e',
-        tertiary: '#78716c',
-        light: '#a8a29e',
-        dark: '#1c1917',
+        primary: '#2B1212',
+        secondary: '#5E3A3A',
+        tertiary: '#8C6F6F',
+        light: '#B5B5B5',
+        dark: '#2B1212',
         contrast: '#ffffff'
       },
       border: {
-        primary: '#e7e5e4',
-        secondary: '#d6d3d1',
-        tertiary: '#a8a29e',
-        light: '#f5f5f4',
-        dark: '#57534e',
+        primary: '#EAD7C0',
+        secondary: '#F0E2D0',
+        tertiary: '#B5B5B5',
+        light: '#F4F4F4',
+        dark: '#5E3A3A',
         contrast: '#000000'
       },
       accent: {
-        primary: '#f97316',
-        secondary: '#ea580c',
-        tertiary: '#c2410c',
-        light: '#fed7aa',
-        dark: '#ea580c',
+        primary: '#A3485A',
+        secondary: '#8C3447',
+        tertiary: '#752737',
+        light: '#E8A9A9',
+        dark: '#8C3447',
         contrast: '#ffffff'
       },
       hover: {
-        primary: '#fefefe',
-        secondary: '#fafaf9',
-        tertiary: '#f5f5f4',
+        primary: '#FFF9F3',
+        secondary: '#FAFAFA',
+        tertiary: '#F4F4F4',
         light: '#ffffff',
-        dark: '#292524',
-        contrast: '#fefefe'
+        dark: '#421414',
+        contrast: '#FFF9F3'
       },
       active: {
-        primary: '#f97316',
-        secondary: '#ea580c',
-        tertiary: '#c2410c',
-        light: '#fed7aa',
-        dark: '#ea580c',
+        primary: '#A3485A',
+        secondary: '#8C3447',
+        tertiary: '#752737',
+        light: '#E8A9A9',
+        dark: '#8C3447',
         contrast: '#ffffff'
       },
       disabled: {
-        primary: '#f5f5f4',
-        secondary: '#e7e5e4',
-        tertiary: '#d6d3d1',
-        light: '#fafaf9',
-        dark: '#78716c',
-        contrast: '#a8a29e'
+        primary: '#F4F4F4',
+        secondary: '#E8E8E8',
+        tertiary: '#D1D1D1',
+        light: '#FAFAFA',
+        dark: '#8C6F6F',
+        contrast: '#B5B5B5'
       },
       focus: {
-        primary: '#f97316',
-        secondary: '#ea580c',
-        tertiary: '#c2410c',
-        light: '#fed7aa',
-        dark: '#ea580c',
+        primary: '#A3485A',
+        secondary: '#8C3447',
+        tertiary: '#752737',
+        light: '#E8A9A9',
+        dark: '#8C3447',
         contrast: '#ffffff'
       }
     },
     typography: {
-      fontFamily: 'Poppins, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif',
+      fontFamily: 'Inter, 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',
@@ -403,26 +435,26 @@ export const harveyTheme: MultiThemeConfig = {
     },
     component: {
       button: {
-        padding: '0.875rem 1.75rem',
+        padding: '0.75rem 1.5rem',
         margin: '0.5rem',
-        gap: '0.75rem'
+        gap: '0.5rem'
       },
       input: {
-        padding: '0.875rem 1rem',
+        padding: '0.75rem 1rem',
         margin: '0.5rem',
         gap: '0.5rem'
       },
       card: {
-        padding: '1.75rem',
+        padding: '1.5rem',
         margin: '1rem',
-        gap: '1.25rem'
+        gap: '1rem'
       }
     },
     layout: {
-      page: '2.5rem',
-      section: '3.5rem',
-      container: '1.25rem',
-      grid: '1.75rem'
+      page: '2rem',
+      section: '3rem',
+      container: '1rem',
+      grid: '1.5rem'
     }
   },
   shadows: {
@@ -436,9 +468,9 @@ export const harveyTheme: MultiThemeConfig = {
   },
   transitions: {
     duration: {
-      fast: '0.12s',
-      normal: '0.25s',
-      slow: '0.4s'
+      fast: '0.15s',
+      normal: '0.2s',
+      slow: '0.3s'
     },
     easing: {
       linear: 'linear',
@@ -448,10 +480,10 @@ export const harveyTheme: MultiThemeConfig = {
       easeInOut: 'ease-in-out'
     },
     properties: {
-      colors: '0.25s ease-in-out',
-      transform: '0.25s ease-in-out',
-      opacity: '0.12s ease',
-      shadow: '0.25s ease'
+      colors: '0.2s ease',
+      transform: '0.2s ease',
+      opacity: '0.15s ease',
+      shadow: '0.2s ease'
     }
   },
   borderRadius: {
@@ -534,11 +566,11 @@ export const harveyTheme: MultiThemeConfig = {
   },
   meta: {
     name: 'Harvey Creative',
-    description: 'Modern, vibrant design system with Poppins typography and warm orange color palette for creative projects',
+    description: 'Modern, vibrant design system with Inter typography and warm burgundy/gold color palette for creative projects',
     author: 'Harvey Design Team',
     version: '1.0.0',
     category: 'creative',
-    tags: ['modern', 'vibrant', 'creative', 'poppins', 'orange', 'warm'],
+    tags: ['modern', 'vibrant', 'creative', 'inter', 'burgundy', 'gold', 'warm'],
     preview: '/themes/harvey-creative-preview.png',
     createdAt: '2024-12-01T00:00:00.000Z',
     updatedAt: '2024-12-01T00:00:00.000Z'
@@ -547,8 +579,101 @@ export const harveyTheme: MultiThemeConfig = {
   // NEW: Add dark mode overrides
   modes: {
     dark: {
-      // Dark mode will be automatically generated by the CSS generator
-      // using the adaptThemeForDarkMode function
+      colors: {
+        primary: {
+          50: '#2B1212',
+          100: '#421414',
+          200: '#662222',
+          300: '#752737',
+          400: '#8C3447',
+          500: '#A3485A',
+          600: '#C55A5A',
+          700: '#D97D7D',
+          800: '#E8A9A9',
+          900: '#FBEAEA',
+          // RGB versions for rgba() usage
+          '500-rgb': '163, 72, 90',
+          '600-rgb': '197, 90, 90',
+          '700-rgb': '217, 125, 125'
+        },
+        secondary: {
+          50: '#2E2314',
+          100: '#3E2E17',
+          200: '#5E4722',
+          300: '#7B6534',
+          400: '#9C8245',
+          500: '#BCA059',
+          600: '#D9BA71',
+          700: '#EACF8D',
+          800: '#F5DAA7',
+          900: '#FFF1D1'
+        },
+        semantic: {
+          success: '#34D399',
+          warning: '#FBBF24',
+          error: '#F87171',
+          errorDark: '#B91C1C',
+          info: '#60A5FA',
+          // RGB versions for rgba() usage
+          successRgb: '52, 211, 153',
+          warningRgb: '251, 191, 36',
+          errorRgb: '248, 113, 113',
+          errorDarkRgb: '185, 28, 28',
+          infoRgb: '96, 165, 250',
+          // Additional RGB versions referenced in CSS
+          'success-rgb': '52, 211, 153',
+          'warning-rgb': '251, 191, 36',
+          'error-rgb': '248, 113, 113',
+          'error-dark-rgb': '185, 28, 28',
+          'info-rgb': '96, 165, 250'
+        },
+        neutral: {
+          50: '#121212',
+          100: '#1A1A1A',
+          200: '#232323',
+          300: '#2E2E2E',
+          400: '#3C3C3C',
+          500: '#565656',
+          600: '#7A7A7A',
+          700: '#A0A0A0',
+          800: '#C5C5C5',
+          900: '#E8E8E8'
+        },
+        surface: {
+          background: '#1B0D0D',
+          surface: '#2B1212',
+          border: '#3C1818',
+          divider: '#4A2222'
+        },
+        text: {
+          primary: '#F5DAA7',
+          secondary: '#EACF8D',
+          muted: '#C9B6B6',
+          inverse: '#1B0D0D',
+          onPrimary: '#1B0D0D',
+          onSecondary: '#1B0D0D',
+          onSurface: '#F5DAA7'
+        },
+        interactive: {
+          hover: '#A3485A',
+          active: '#842A3B',
+          focus: '#C55A5A',
+          disabled: '#3C1818'
+        },
+        // Additional colors referenced in CSS
+        accent: '#EACF8D',
+        'bg-primary': '#2B1212',
+        'bg-secondary': '#3E2E17',
+        'surface-bg': '#1B0D0D',
+        // Additional missing CSS variables
+        'primary-hover': '#C55A5A',
+        'primary-active': '#E8A9A9',
+        'accent-rgb': '234, 207, 141',
+        'border': '#3C1818',
+        // Text colors referenced in CSS
+        'text-primary': '#F5DAA7',
+        'text-secondary': '#EACF8D'
+      }
     }
   }
 };