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

package/src/theme.ts

@@ -163,102 +163,102 @@ export const jeremyTheme: MultiThemeConfig = {
       }
     }
   },
-  colors: {
+          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'
+      '50': '#F2F2F2',
+      '100': '#E6E6E6',
+      '200': '#CCCCCC',
+      '300': '#B3B3B3',
+      '400': '#999999',
+      '500': '#1E1E1E',
+      '600': '#666666',
+      '700': '#4D4D4D',
+      '800': '#383838',
+      '900': '#242424',
+      '500-rgb': '30, 30, 30',
+      '600-rgb': '102, 102, 102',
+      '700-rgb': '77, 77, 77',
     },
     secondary: {
-      50: '#FFF8E8',
-      100: '#FFF1D1',
-      200: '#FDE5B3',
-      300: '#F5DAA7',
-      400: '#EACF8D',
-      500: '#D9BA71',
-      600: '#BCA059',
-      700: '#9C8245',
-      800: '#7B6534',
-      900: '#544521'
+      '50': '#F8F5EC',
+      '100': '#F3ECD8',
+      '200': '#E9DAAF',
+      '300': '#E2C983',
+      '400': '#DDB955',
+      '500': '#E8CF8A',
+      '600': '#AA8622',
+      '700': '#7C631D',
+      '800': '#584718',
+      '900': '#362C11',
+      '500-rgb': '232, 207, 138',
+      '600-rgb': '170, 134, 34',
+      '700-rgb': '124, 99, 29',
     },
     semantic: {
       success: '#1E824C',
-      warning: '#E6A23C',
+      warning: '#D99A3E',
       error: '#D93025',
-      errorDark: '#A12017',
-      info: '#007BCE',
-      // RGB versions for rgba() usage
+      errorDark: '#6D1912',
+      info: '#2563EB',
       successRgb: '30, 130, 76',
-      warningRgb: '230, 162, 60',
+      warningRgb: '217, 154, 62',
       errorRgb: '217, 48, 37',
-      errorDarkRgb: '161, 32, 23',
-      infoRgb: '0, 123, 206',
-      // Additional RGB versions referenced in CSS
+      errorDarkRgb: '109, 25, 18',
+      infoRgb: '37, 99, 235',
       'success-rgb': '30, 130, 76',
-      'warning-rgb': '230, 162, 60',
+      'warning-rgb': '217, 154, 62',
       'error-rgb': '217, 48, 37',
-      'error-dark-rgb': '161, 32, 23',
-      'info-rgb': '0, 123, 206'
+      'error-dark-rgb': '109, 25, 18',
+      'info-rgb': '37, 99, 235',
     },
     neutral: {
-      50: '#FAFAFA',
-      100: '#F4F4F4',
-      200: '#E8E8E8',
-      300: '#D1D1D1',
-      400: '#B5B5B5',
-      500: '#999999',
-      600: '#7A7A7A',
-      700: '#5C5C5C',
-      800: '#3D3D3D',
-      900: '#1E1E1E'
+      '50': '#FAFAFA',
+      '100': '#F5F4F4',
+      '200': '#E9E7E7',
+      '300': '#D3CFCF',
+      '400': '#B9B1B1',
+      '500': '#9E9494',
+      '600': '#817474',
+      '700': '#605757',
+      '800': '#403A3A',
+      '900': '#201D1D',
     },
     surface: {
-      background: '#FFF9F3',
+      background: '#F9F9F9',
       surface: '#FFFFFF',
-      border: '#EAD7C0',
-      divider: '#F0E2D0'
+      border: '#E9E1CB',
+      divider: '#F4F0E6',
     },
     text: {
-      primary: '#2B1212',
-      secondary: '#5E3A3A',
-      muted: '#8C6F6F',
+      primary: '#242424',
+      secondary: '#4D4D4D',
+      muted: '#9E9494',
       inverse: '#FFFFFF',
       onPrimary: '#FFFFFF',
-      onSecondary: '#2B1212',
-      onSurface: '#2B1212'
+      onSecondary: '#242424',
+      onSurface: '#242424',
     },
     interactive: {
-      hover: '#842A3B',
-      active: '#662222',
-      focus: '#A3485A',
-      disabled: '#C9B6B6'
+      hover: '#666666',
+      active: '#383838',
+      focus: '#1E1E1E',
+      disabled: '#D3CFCF',
     },
     // Additional colors referenced in CSS
-    accent: '#F5DAA7',
-    'bg-primary': '#FBEAEA',
-    'bg-secondary': '#FFF1D1',
-    'surface-bg': '#FFF9F3',
+    accent: '#E2C983',
+    'bg-primary': '#F2F2F2',
+    'bg-secondary': '#F3ECD8',
+    'surface-bg': '#F9F9F9',
     // Additional missing CSS variables
-    'primary-hover': '#842A3B',
-    'primary-active': '#662222',
-    'accent-rgb': '245, 218, 167',
-    'border': '#EAD7C0',
+    'primary-hover': '#666666',
+    'primary-active': '#383838',
+    'accent-rgb': '226, 201, 131',
+    'border': '#E9E1CB',
     // Border semantic variables
     'border-transparent': 'transparent',
     // Text colors referenced in CSS
-    'text-primary': '#2B1212',
-    'text-secondary': '#5E3A3A'
+    'text-primary': '#242424',
+    'text-secondary': '#4D4D4D'
   },
   navigation: {
     layout: 'horizontal',
@@ -320,67 +320,67 @@ export const jeremyTheme: MultiThemeConfig = {
     colors: {
       background: {
         primary: '#ffffff',
-        secondary: '#FFF9F3',
+        secondary: '#F8F5EC',
         tertiary: '#FAFAFA',
         light: '#ffffff',
-        dark: '#2B1212',
-        contrast: '#000000'
+        dark: '#242424',
+        contrast: '#000000',
       },
       text: {
-        primary: '#2B1212',
-        secondary: '#5E3A3A',
-        tertiary: '#8C6F6F',
-        light: '#B5B5B5',
-        dark: '#2B1212',
-        contrast: '#ffffff'
+        primary: '#242424',
+        secondary: '#4D4D4D',
+        tertiary: '#9E9494',
+        light: '#B9B1B1',
+        dark: '#242424',
+        contrast: '#ffffff',
       },
       border: {
-        primary: '#EAD7C0',
-        secondary: '#F0E2D0',
-        tertiary: '#B5B5B5',
-        light: '#F4F4F4',
-        dark: '#5E3A3A',
-        contrast: '#000000'
+        primary: '#E9DAAF',
+        secondary: '#F3ECD8',
+        tertiary: '#B9B1B1',
+        light: '#F5F4F4',
+        dark: '#4D4D4D',
+        contrast: '#000000',
       },
       accent: {
-        primary: '#A3485A',
-        secondary: '#8C3447',
-        tertiary: '#752737',
-        light: '#E8A9A9',
-        dark: '#8C3447',
-        contrast: '#ffffff'
+        primary: '#1E1E1E',
+        secondary: '#666666',
+        tertiary: '#4D4D4D',
+        light: '#CCCCCC',
+        dark: '#666666',
+        contrast: '#ffffff',
       },
       hover: {
-        primary: '#FFF9F3',
+        primary: '#F8F5EC',
         secondary: '#FAFAFA',
-        tertiary: '#F4F4F4',
+        tertiary: '#F5F4F4',
         light: '#ffffff',
-        dark: '#421414',
-        contrast: '#FFF9F3'
+        dark: '#383838',
+        contrast: '#F8F5EC',
       },
       active: {
-        primary: '#A3485A',
-        secondary: '#8C3447',
-        tertiary: '#752737',
-        light: '#E8A9A9',
-        dark: '#8C3447',
-        contrast: '#ffffff'
+        primary: '#1E1E1E',
+        secondary: '#666666',
+        tertiary: '#4D4D4D',
+        light: '#CCCCCC',
+        dark: '#666666',
+        contrast: '#ffffff',
       },
       disabled: {
-        primary: '#F4F4F4',
-        secondary: '#E8E8E8',
-        tertiary: '#D1D1D1',
+        primary: '#F5F4F4',
+        secondary: '#E9E7E7',
+        tertiary: '#D3CFCF',
         light: '#FAFAFA',
-        dark: '#8C6F6F',
-        contrast: '#B5B5B5'
+        dark: '#9E9494',
+        contrast: '#B9B1B1',
       },
       focus: {
-        primary: '#A3485A',
-        secondary: '#8C3447',
-        tertiary: '#752737',
-        light: '#E8A9A9',
-        dark: '#8C3447',
-        contrast: '#ffffff'
+        primary: '#1E1E1E',
+        secondary: '#666666',
+        tertiary: '#4D4D4D',
+        light: '#CCCCCC',
+        dark: '#666666',
+        contrast: '#ffffff',
       }
     },
     typography: {
@@ -458,12 +458,12 @@ export const jeremyTheme: MultiThemeConfig = {
       grid: '1.5rem'
     }
   },
-  shadows: {
+        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)',
+    '2xl': '0 25px 50px -12px rgb(30 30 30 / 0.25)',
     inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.06)',
     none: '0 0 #0000'
   },
@@ -566,8 +566,8 @@ export const jeremyTheme: MultiThemeConfig = {
     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',
+    name: 'Jeremy Theme',
+    description: 'Modern, vibrant design system with warm burgundy/gold color palette for creative projects',
     author: 'Jeremy Design Team',
     version: '1.0.0',
     category: 'creative',
@@ -577,37 +577,39 @@ export const jeremyTheme: MultiThemeConfig = {
     updatedAt: '2024-12-25T00:00:00.000Z'
   },
 
-  // NEW: Add dark mode overrides
+          // 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'
+          '50': '#242424',
+          '100': '#383838',
+          '200': '#4D4D4D',
+          '300': '#666666',
+          '400': '#1E1E1E',
+          '500': '#1E1E1E',
+          '600': '#999999',
+          '700': '#B3B3B3',
+          '800': '#CCCCCC',
+          '900': '#E6E6E6',
+          '500-rgb': '30, 30, 30',
+          '600-rgb': '153, 153, 153',
+          '700-rgb': '179, 179, 179',
         },
         secondary: {
-          50: '#2E2314',
-          100: '#3E2E17',
-          200: '#5E4722',
-          300: '#7B6534',
-          400: '#9C8245',
-          500: '#BCA059',
-          600: '#D9BA71',
-          700: '#EACF8D',
-          800: '#F5DAA7',
-          900: '#FFF1D1'
+          '50': '#362C11',
+          '100': '#584718',
+          '200': '#7C631D',
+          '300': '#AA8622',
+          '400': '#E8CF8A',
+          '500': '#E8CF8A',
+          '600': '#DDB955',
+          '700': '#E2C983',
+          '800': '#E9DAAF',
+          '900': '#F3ECD8',
+          '500-rgb': '232, 207, 138',
+          '600-rgb': '221, 185, 85',
+          '700-rgb': '226, 201, 131',
         },
         semantic: {
           success: '#34D399',
@@ -615,65 +617,66 @@ export const jeremyTheme: MultiThemeConfig = {
           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'
+          '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'
+          '50': '#201D1D',
+          '100': '#403A3A',
+          '200': '#605757',
+          '300': '#817474',
+          '400': '#9E9494',
+          '500': '#9E9494',
+          '600': '#B9B1B1',
+          '700': '#D3CFCF',
+          '800': '#E9E7E7',
+          '900': '#F5F4F4',
+          '500-rgb': '158, 148, 148',
+          '600-rgb': '185, 177, 177',
+          '700-rgb': '211, 207, 207',
         },
         surface: {
-          background: '#1B0D0D',
-          surface: '#2B1212',
-          border: '#3C1818',
-          divider: '#4A2222'
+          background: '#1E1E1E',
+          surface: '#242424',
+          border: '#1F1F1F',
+          divider: '#383838',
         },
         text: {
-          primary: '#F5DAA7',
-          secondary: '#EACF8D',
-          muted: '#C9B6B6',
-          inverse: '#1B0D0D',
-          onPrimary: '#1B0D0D',
-          onSecondary: '#1B0D0D',
-          onSurface: '#F5DAA7'
+          primary: '#FFFFFF',
+          secondary: '#DDB955',
+          muted: '#B9B1B1',
+          inverse: '#1E1E1E',
+          onPrimary: '#1E1E1E',
+          onSecondary: '#1E1E1E',
+          onSurface: '#FFFFFF',
         },
         interactive: {
-          hover: '#A3485A',
-          active: '#842A3B',
-          focus: '#C55A5A',
-          disabled: '#3C1818'
+          hover: '#1E1E1E',
+          active: '#666666',
+          focus: '#999999',
+          disabled: '#1F1F1F',
         },
         // Additional colors referenced in CSS
-        accent: '#EACF8D',
-        'bg-primary': '#2B1212',
-        'bg-secondary': '#3E2E17',
-        'surface-bg': '#1B0D0D',
+        accent: '#DDB955',
+        'bg-primary': '#242424',
+        'bg-secondary': '#584718',
+        'surface-bg': '#1E1E1E',
         // Additional missing CSS variables
-        'primary-hover': '#C55A5A',
-        'primary-active': '#E8A9A9',
-        'accent-rgb': '234, 207, 141',
-        'border': '#3C1818',
+        'primary-hover': '#999999',
+        'primary-active': '#B3B3B3',
+        'accent-rgb': '221, 185, 85',
+        'border': '#1F1F1F',
         // Text colors referenced in CSS
-        'text-primary': '#F5DAA7',
-        'text-secondary': '#EACF8D'
+        'text-primary': '#FFFFFF',
+        'text-secondary': '#DDB955'
       }
     }
   },

package/src/themes/seedColors.ts

@@ -0,0 +1,111 @@
+/**
+ * Theme Seed Colors Type Definition
+ *
+ * This defines the minimal set of colors needed to generate a complete theme.
+ * From these 7-9 seed colors, all other colors (50-900 scales, surface, text,
+ * interactive states) are automatically derived.
+ */
+
+/**
+ * Light mode seed colors - the minimal input needed
+ */
+export interface LightModeSeedColors {
+  /** Primary brand color (base 500 value) - e.g., '#A3485A' */
+  primary: string;
+
+  /** Secondary brand color (base 500 value) - e.g., '#D9BA71' */
+  secondary: string;
+
+  /** Neutral gray color (base 500 value) - e.g., '#999999' */
+  neutral?: string;
+
+  /** Success color - e.g., '#1E824C' */
+  success: string;
+
+  /** Warning color - e.g., '#E6A23C' */
+  warning: string;
+
+  /** Error color - e.g., '#D93025' */
+  error: string;
+
+  /** Info color - e.g., '#007BCE' */
+  info: string;
+}
+
+/**
+ * Dark mode seed colors - overrides for dark mode
+ */
+export interface DarkModeSeedColors {
+  /** Dark mode background color - e.g., '#1B0D0D' */
+  background: string;
+
+  /** Dark mode primary text color - e.g., '#F5DAA7' */
+  textPrimary: string;
+}
+
+/**
+ * Theme metadata
+ */
+export interface ThemeSeedMetadata {
+  /** Theme name (kebab-case) - e.g., 'jeremy' */
+  name: string;
+
+  /** Theme display name - e.g., 'Jeremy Theme' */
+  displayName?: string;
+
+  /** Theme description */
+  description?: string;
+
+  /** Theme author */
+  author?: string;
+
+  /** Theme category */
+  category?: 'brand' | 'creative' | 'custom' | 'accessibility';
+
+  /** Theme tags for searchability */
+  tags?: string[];
+}
+
+/**
+ * Complete theme seed configuration
+ */
+export interface ThemeSeedConfig {
+  /** Theme metadata */
+  meta: ThemeSeedMetadata;
+
+  /** Light mode seed colors (required) */
+  light: LightModeSeedColors;
+
+  /** Dark mode seed colors (optional - will use inverted light colors if not provided) */
+  dark?: DarkModeSeedColors;
+}
+
+/**
+ * Example seed configuration:
+ *
+ * ```typescript
+ * const jeremySeeds: ThemeSeedConfig = {
+ *   meta: {
+ *     name: 'jeremy',
+ *     displayName: 'Jeremy Theme',
+ *     description: 'A warm burgundy and gold theme',
+ *     author: 'Design Team',
+ *     category: 'creative',
+ *     tags: ['warm', 'burgundy', 'gold']
+ *   },
+ *   light: {
+ *     primary: '#A3485A',
+ *     secondary: '#D9BA71',
+ *     neutral: '#999999',
+ *     success: '#1E824C',
+ *     warning: '#E6A23C',
+ *     error: '#D93025',
+ *     info: '#007BCE'
+ *   },
+ *   dark: {
+ *     background: '#1B0D0D',
+ *     textPrimary: '#F5DAA7'
+ *   }
+ * };
+ * ```
+ */