@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.11 → 0.2.17

package/src/themes/themes/harvey.ts

@@ -0,0 +1,554 @@
+import { MultiThemeConfig } from '../types';
+
+/**
+ * Harvey Creative Theme
+ * Modern, vibrant design with Poppins font and warm color palette
+ */
+export const harveyTheme: MultiThemeConfig = {
+  fonts: {
+    primary: {
+      family: 'Poppins',
+      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],
+      display: 'swap',
+      source: {
+        type: 'google'
+      },
+      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.2',
+        normal: '1.5',
+        relaxed: '1.7',
+        loose: '2'
+      },
+      letterSpacing: {
+        tight: '-0.02em',
+        normal: '0em',
+        wide: '0.02em',
+        wider: '0.04em',
+        widest: '0.08em'
+      }
+    },
+    secondary: {
+      family: 'Poppins',
+      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: 'google'
+      },
+      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.2',
+        normal: '1.5',
+        relaxed: '1.7',
+        loose: '2'
+      },
+      letterSpacing: {
+        tight: '-0.02em',
+        normal: '0em',
+        wide: '0.02em',
+        wider: '0.04em',
+        widest: '0.08em'
+      }
+    },
+    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],
+      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.05',
+        normal: '1.15',
+        relaxed: '1.25',
+        loose: '1.35'
+      },
+      letterSpacing: {
+        tight: '-0.03em',
+        normal: '-0.02em',
+        wide: '-0.01em',
+        wider: '0em',
+        widest: '0.01em'
+      }
+    },
+    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],
+      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.3',
+        normal: '1.6',
+        relaxed: '1.8',
+        loose: '2.1'
+      },
+      letterSpacing: {
+        tight: '-0.01em',
+        normal: '0em',
+        wide: '0.01em',
+        wider: '0.02em',
+        widest: '0.04em'
+      }
+    },
+    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: '#fff7ed',
+      100: '#ffedd5',
+      200: '#fed7aa',
+      300: '#fdba74',
+      400: '#fb923c',
+      500: '#f97316',
+      600: '#ea580c',
+      700: '#c2410c',
+      800: '#9a3412',
+      900: '#7c2d12'
+    },
+    secondary: {
+      50: '#fefce8',
+      100: '#fef9c3',
+      200: '#fef08a',
+      300: '#fde047',
+      400: '#facc15',
+      500: '#eab308',
+      600: '#ca8a04',
+      700: '#a16207',
+      800: '#854d0e',
+      900: '#713f12'
+    },
+    semantic: {
+      success: '#16a34a',
+      warning: '#f59e0b',
+      error: '#dc2626',
+      info: '#2563eb'
+    },
+    neutral: {
+      50: '#fafaf9',
+      100: '#f5f5f4',
+      200: '#e7e5e4',
+      300: '#d6d3d1',
+      400: '#a8a29e',
+      500: '#78716c',
+      600: '#57534e',
+      700: '#44403c',
+      800: '#292524',
+      900: '#1c1917'
+    },
+    surface: {
+      background: '#fefefe',
+      surface: '#fafaf9',
+      border: '#e7e5e4',
+      divider: '#d6d3d1'
+    },
+    text: {
+      primary: '#1c1917',
+      secondary: '#44403c',
+      muted: '#78716c',
+      inverse: '#fafaf9',
+      onPrimary: '#fefefe',
+      onSecondary: '#fefefe',
+      onSurface: '#1c1917'
+    },
+    interactive: {
+      hover: '#fff7ed',
+      active: '#fed7aa',
+      focus: '#f97316',
+      disabled: '#d6d3d1'
+    }
+  },
+  navigation: {
+    layout: 'horizontal',
+    style: 'creative',
+    behavior: 'floating',
+    responsive: 'adaptive',
+    animations: {
+      duration: {
+        fast: '0.12s',
+        normal: '0.25s',
+        slow: '0.4s',
+        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.03s',
+        direction: 'forward'
+      },
+      transitions: {
+        enter: '0.25s ease-in-out',
+        exit: '0.12s ease-in',
+        move: '0.25s ease',
+        resize: '0.15s ease'
+      }
+    },
+    spacing: {
+      container: '1.25rem',
+      item: '0.75rem',
+      group: '1.25rem',
+      divider: '0.5rem',
+      icon: '0.75rem',
+      text: '0.5rem',
+      padding: {
+        horizontal: '1.25rem',
+        vertical: '1rem',
+        top: '1rem',
+        right: '1.25rem',
+        bottom: '1rem',
+        left: '1.25rem'
+      },
+      margin: {
+        horizontal: '0.75rem',
+        vertical: '0.5rem',
+        top: '0.5rem',
+        right: '0.75rem',
+        bottom: '0.5rem',
+        left: '0.75rem'
+      }
+    },
+    colors: {
+      background: {
+        primary: '#ffffff',
+        secondary: '#fefefe',
+        tertiary: '#fafaf9',
+        light: '#ffffff',
+        dark: '#1c1917',
+        contrast: '#000000'
+      },
+      text: {
+        primary: '#1c1917',
+        secondary: '#57534e',
+        tertiary: '#78716c',
+        light: '#a8a29e',
+        dark: '#1c1917',
+        contrast: '#ffffff'
+      },
+      border: {
+        primary: '#e7e5e4',
+        secondary: '#d6d3d1',
+        tertiary: '#a8a29e',
+        light: '#f5f5f4',
+        dark: '#57534e',
+        contrast: '#000000'
+      },
+      accent: {
+        primary: '#f97316',
+        secondary: '#ea580c',
+        tertiary: '#c2410c',
+        light: '#fed7aa',
+        dark: '#ea580c',
+        contrast: '#ffffff'
+      },
+      hover: {
+        primary: '#fefefe',
+        secondary: '#fafaf9',
+        tertiary: '#f5f5f4',
+        light: '#ffffff',
+        dark: '#292524',
+        contrast: '#fefefe'
+      },
+      active: {
+        primary: '#f97316',
+        secondary: '#ea580c',
+        tertiary: '#c2410c',
+        light: '#fed7aa',
+        dark: '#ea580c',
+        contrast: '#ffffff'
+      },
+      disabled: {
+        primary: '#f5f5f4',
+        secondary: '#e7e5e4',
+        tertiary: '#d6d3d1',
+        light: '#fafaf9',
+        dark: '#78716c',
+        contrast: '#a8a29e'
+      },
+      focus: {
+        primary: '#f97316',
+        secondary: '#ea580c',
+        tertiary: '#c2410c',
+        light: '#fed7aa',
+        dark: '#ea580c',
+        contrast: '#ffffff'
+      }
+    },
+    typography: {
+      fontFamily: 'Poppins, 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.875rem 1.75rem',
+        margin: '0.5rem',
+        gap: '0.75rem'
+      },
+      input: {
+        padding: '0.875rem 1rem',
+        margin: '0.5rem',
+        gap: '0.5rem'
+      },
+      card: {
+        padding: '1.75rem',
+        margin: '1rem',
+        gap: '1.25rem'
+      }
+    },
+    layout: {
+      page: '2.5rem',
+      section: '3.5rem',
+      container: '1.25rem',
+      grid: '1.75rem'
+    }
+  },
+  shadows: {
+    sm: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+    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(249 115 22 / 0.25)',
+    inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.06)',
+    none: '0 0 #0000'
+  },
+  transitions: {
+    duration: {
+      fast: '0.12s',
+      normal: '0.25s',
+      slow: '0.4s'
+    },
+    easing: {
+      linear: 'linear',
+      ease: 'ease',
+      easeIn: 'ease-in',
+      easeOut: 'ease-out',
+      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'
+    }
+  },
+  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: 'Harvey Creative',
+    description: 'Modern, vibrant design system with Poppins typography and warm orange color palette for creative projects',
+    author: 'Harvey Design Team',
+    version: '1.0.0',
+    category: 'creative',
+    tags: ['modern', 'vibrant', 'creative', 'poppins', 'orange', 'warm'],
+    preview: '/themes/harvey-creative-preview.png',
+    createdAt: '2024-12-01T00:00:00.000Z',
+    updatedAt: '2024-12-01T00:00:00.000Z'
+  },
+  
+  // NEW: Add dark mode overrides
+  modes: {
+    dark: {
+      // Dark mode will be automatically generated by the CSS generator
+      // using the adaptThemeForDarkMode function
+    }
+  }
+};