@rakeyshgidwani/roger-ui-bank-theme-jeremy 0.5.3

package/src/theme.ts

@@ -0,0 +1,683 @@
+import { MultiThemeConfig } from './types';
+import { getPhase1ThemeExtensions } from './themes/phase1-constants';
+
+/**
+ * Jeremy Theme
+ * Modern, vibrant design with Inter font and warm burgundy/gold color palette
+ */
+export const jeremyTheme: MultiThemeConfig = {
+  fonts: {
+    primary: {
+      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',
+      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.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: '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',
+      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.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: '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',
+        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: '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',
+        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: '#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: '#FFF8E8',
+      100: '#FFF1D1',
+      200: '#FDE5B3',
+      300: '#F5DAA7',
+      400: '#EACF8D',
+      500: '#D9BA71',
+      600: '#BCA059',
+      700: '#9C8245',
+      800: '#7B6534',
+      900: '#544521'
+    },
+    semantic: {
+      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: '#FAFAFA',
+      100: '#F4F4F4',
+      200: '#E8E8E8',
+      300: '#D1D1D1',
+      400: '#B5B5B5',
+      500: '#999999',
+      600: '#7A7A7A',
+      700: '#5C5C5C',
+      800: '#3D3D3D',
+      900: '#1E1E1E'
+    },
+    surface: {
+      background: '#FFF9F3',
+      surface: '#FFFFFF',
+      border: '#EAD7C0',
+      divider: '#F0E2D0'
+    },
+    text: {
+      primary: '#2B1212',
+      secondary: '#5E3A3A',
+      muted: '#8C6F6F',
+      inverse: '#FFFFFF',
+      onPrimary: '#FFFFFF',
+      onSecondary: '#2B1212',
+      onSurface: '#2B1212'
+    },
+    interactive: {
+      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: '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: '#FFF9F3',
+        tertiary: '#FAFAFA',
+        light: '#ffffff',
+        dark: '#2B1212',
+        contrast: '#000000'
+      },
+      text: {
+        primary: '#2B1212',
+        secondary: '#5E3A3A',
+        tertiary: '#8C6F6F',
+        light: '#B5B5B5',
+        dark: '#2B1212',
+        contrast: '#ffffff'
+      },
+      border: {
+        primary: '#EAD7C0',
+        secondary: '#F0E2D0',
+        tertiary: '#B5B5B5',
+        light: '#F4F4F4',
+        dark: '#5E3A3A',
+        contrast: '#000000'
+      },
+      accent: {
+        primary: '#A3485A',
+        secondary: '#8C3447',
+        tertiary: '#752737',
+        light: '#E8A9A9',
+        dark: '#8C3447',
+        contrast: '#ffffff'
+      },
+      hover: {
+        primary: '#FFF9F3',
+        secondary: '#FAFAFA',
+        tertiary: '#F4F4F4',
+        light: '#ffffff',
+        dark: '#421414',
+        contrast: '#FFF9F3'
+      },
+      active: {
+        primary: '#A3485A',
+        secondary: '#8C3447',
+        tertiary: '#752737',
+        light: '#E8A9A9',
+        dark: '#8C3447',
+        contrast: '#ffffff'
+      },
+      disabled: {
+        primary: '#F4F4F4',
+        secondary: '#E8E8E8',
+        tertiary: '#D1D1D1',
+        light: '#FAFAFA',
+        dark: '#8C6F6F',
+        contrast: '#B5B5B5'
+      },
+      focus: {
+        primary: '#A3485A',
+        secondary: '#8C3447',
+        tertiary: '#752737',
+        light: '#E8A9A9',
+        dark: '#8C3447',
+        contrast: '#ffffff'
+      }
+    },
+    typography: {
+      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',
+        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 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.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: 'Jeremy',
+    description: 'Modern, vibrant design system with Inter typography and warm burgundy/gold color palette for creative projects',
+    author: 'Jeremy Design Team',
+    version: '1.0.0',
+    category: 'creative',
+    tags: ['modern', 'vibrant', 'creative', 'inter', 'burgundy', 'gold', 'warm'],
+    preview: '/themes/jeremy-preview.png',
+    createdAt: '2024-12-25T00:00:00.000Z',
+    updatedAt: '2024-12-25T00:00:00.000Z'
+  },
+
+  // NEW: Add dark mode overrides
+  modes: {
+    dark: {
+      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'
+      }
+    }
+  },
+
+  // Phase 1 Enhancement: Use shared constants to prevent duplication
+  ...getPhase1ThemeExtensions()
+};