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

package/src/styles/themes/jeremy.css

@@ -140,19 +140,19 @@
   --cs-fonts-mono-letter-spacing-wide: 0.025em;
   --cs-fonts-mono-letter-spacing-wider: 0.05em;
   --cs-fonts-mono-letter-spacing-widest: 0.1em;
-  --cs-colors-primary-50: #F4F1F1;
-  --cs-colors-primary-100: #E9E2E2;
-  --cs-colors-primary-200: #D6C2C2;
-  --cs-colors-primary-300: #C69F9F;
+  --cs-colors-primary-50: #F2F2F2;
+  --cs-colors-primary-100: #E6E6E6;
+  --cs-colors-primary-200: #CCCCCC;
+  --cs-colors-primary-300: #B3B3B3;
   --cs-colors-primary-400: #999999;
   --cs-colors-primary-500: #1E1E1E;
   --cs-colors-primary-600: #666666;
-  --cs-colors-primary-700: #603939;
-  --cs-colors-primary-800: #432D2D;
-  --cs-colors-primary-900: #291E1E;
+  --cs-colors-primary-700: #4D4D4D;
+  --cs-colors-primary-800: #383838;
+  --cs-colors-primary-900: #242424;
   --cs-colors-primary-500-rgb: 30, 30, 30;
   --cs-colors-primary-600-rgb: 102, 102, 102;
-  --cs-colors-primary-700-rgb: 96, 57, 57;
+  --cs-colors-primary-700-rgb: 77, 77, 77;
   --cs-colors-secondary-50: #F8F5EC;
   --cs-colors-secondary-100: #F3ECD8;
   --cs-colors-secondary-200: #E9DAAF;
@@ -186,27 +186,27 @@
   --cs-colors-neutral-700: #605757;
   --cs-colors-neutral-800: #403A3A;
   --cs-colors-neutral-900: #201D1D;
-  --cs-colors-surface-background: #FAF8F8;
+  --cs-colors-surface-background: #F9F9F9;
   --cs-colors-surface-surface: #FFFFFF;
   --cs-colors-surface-border: #E9E1CB;
   --cs-colors-surface-divider: #F4F0E6;
-  --cs-colors-text-primary: #291E1E;
-  --cs-colors-text-secondary: #603939;
+  --cs-colors-text-primary: #242424;
+  --cs-colors-text-secondary: #4D4D4D;
   --cs-colors-text-muted: #9E9494;
   --cs-colors-text-inverse: #FFFFFF;
   --cs-colors-text-on-primary: #FFFFFF;
-  --cs-colors-text-on-secondary: #291E1E;
-  --cs-colors-text-on-surface: #291E1E;
+  --cs-colors-text-on-secondary: #242424;
+  --cs-colors-text-on-surface: #242424;
   --cs-colors-interactive-hover: #666666;
-  --cs-colors-interactive-active: #432D2D;
+  --cs-colors-interactive-active: #383838;
   --cs-colors-interactive-focus: #1E1E1E;
   --cs-colors-interactive-disabled: #D3CFCF;
   --cs-colors-accent: #E2C983;
-  --cs-colors-bg-primary: #F4F1F1;
+  --cs-colors-bg-primary: #F2F2F2;
   --cs-colors-bg-secondary: #F3ECD8;
-  --cs-colors-surface-bg: #FAF8F8;
+  --cs-colors-surface-bg: #F9F9F9;
   --cs-colors-primary-hover: #666666;
-  --cs-colors-primary-active: #432D2D;
+  --cs-colors-primary-active: #383838;
   --cs-colors-accent-rgb: 226, 201, 131;
   --cs-colors-border: #E9E1CB;
   --cs-colors-border-transparent: transparent;
@@ -253,36 +253,36 @@
   --cs-navigation-colors-background-secondary: #F8F5EC;
   --cs-navigation-colors-background-tertiary: #FAFAFA;
   --cs-navigation-colors-background-light: #ffffff;
-  --cs-navigation-colors-background-dark: #291E1E;
+  --cs-navigation-colors-background-dark: #242424;
   --cs-navigation-colors-background-contrast: #000000;
-  --cs-navigation-colors-text-primary: #291E1E;
-  --cs-navigation-colors-text-secondary: #603939;
+  --cs-navigation-colors-text-primary: #242424;
+  --cs-navigation-colors-text-secondary: #4D4D4D;
   --cs-navigation-colors-text-tertiary: #9E9494;
   --cs-navigation-colors-text-light: #B9B1B1;
-  --cs-navigation-colors-text-dark: #291E1E;
+  --cs-navigation-colors-text-dark: #242424;
   --cs-navigation-colors-text-contrast: #ffffff;
   --cs-navigation-colors-border-primary: #E9DAAF;
   --cs-navigation-colors-border-secondary: #F3ECD8;
   --cs-navigation-colors-border-tertiary: #B9B1B1;
   --cs-navigation-colors-border-light: #F5F4F4;
-  --cs-navigation-colors-border-dark: #603939;
+  --cs-navigation-colors-border-dark: #4D4D4D;
   --cs-navigation-colors-border-contrast: #000000;
   --cs-navigation-colors-accent-primary: #1E1E1E;
   --cs-navigation-colors-accent-secondary: #666666;
-  --cs-navigation-colors-accent-tertiary: #603939;
-  --cs-navigation-colors-accent-light: #D6C2C2;
+  --cs-navigation-colors-accent-tertiary: #4D4D4D;
+  --cs-navigation-colors-accent-light: #CCCCCC;
   --cs-navigation-colors-accent-dark: #666666;
   --cs-navigation-colors-accent-contrast: #ffffff;
   --cs-navigation-colors-hover-primary: #F8F5EC;
   --cs-navigation-colors-hover-secondary: #FAFAFA;
   --cs-navigation-colors-hover-tertiary: #F5F4F4;
   --cs-navigation-colors-hover-light: #ffffff;
-  --cs-navigation-colors-hover-dark: #432D2D;
+  --cs-navigation-colors-hover-dark: #383838;
   --cs-navigation-colors-hover-contrast: #F8F5EC;
   --cs-navigation-colors-active-primary: #1E1E1E;
   --cs-navigation-colors-active-secondary: #666666;
-  --cs-navigation-colors-active-tertiary: #603939;
-  --cs-navigation-colors-active-light: #D6C2C2;
+  --cs-navigation-colors-active-tertiary: #4D4D4D;
+  --cs-navigation-colors-active-light: #CCCCCC;
   --cs-navigation-colors-active-dark: #666666;
   --cs-navigation-colors-active-contrast: #ffffff;
   --cs-navigation-colors-disabled-primary: #F5F4F4;
@@ -293,8 +293,8 @@
   --cs-navigation-colors-disabled-contrast: #B9B1B1;
   --cs-navigation-colors-focus-primary: #1E1E1E;
   --cs-navigation-colors-focus-secondary: #666666;
-  --cs-navigation-colors-focus-tertiary: #603939;
-  --cs-navigation-colors-focus-light: #D6C2C2;
+  --cs-navigation-colors-focus-tertiary: #4D4D4D;
+  --cs-navigation-colors-focus-light: #CCCCCC;
   --cs-navigation-colors-focus-dark: #666666;
   --cs-navigation-colors-focus-contrast: #ffffff;
   --cs-navigation-typography-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
@@ -503,19 +503,19 @@
   --cs-responsive-typography-caption-xl: 15px;
   --cs-responsive-typography-caption-2xl: 15px;
   --cs-responsive-typography-caption-3xl: 16px;
-  --cs-modes-dark-colors-primary-50: #291E1E;
-  --cs-modes-dark-colors-primary-100: #432D2D;
-  --cs-modes-dark-colors-primary-200: #603939;
+  --cs-modes-dark-colors-primary-50: #242424;
+  --cs-modes-dark-colors-primary-100: #383838;
+  --cs-modes-dark-colors-primary-200: #4D4D4D;
   --cs-modes-dark-colors-primary-300: #666666;
   --cs-modes-dark-colors-primary-400: #1E1E1E;
   --cs-modes-dark-colors-primary-500: #1E1E1E;
   --cs-modes-dark-colors-primary-600: #999999;
-  --cs-modes-dark-colors-primary-700: #C69F9F;
-  --cs-modes-dark-colors-primary-800: #D6C2C2;
-  --cs-modes-dark-colors-primary-900: #E9E2E2;
+  --cs-modes-dark-colors-primary-700: #B3B3B3;
+  --cs-modes-dark-colors-primary-800: #CCCCCC;
+  --cs-modes-dark-colors-primary-900: #E6E6E6;
   --cs-modes-dark-colors-primary-500-rgb: 30, 30, 30;
   --cs-modes-dark-colors-primary-600-rgb: 153, 153, 153;
-  --cs-modes-dark-colors-primary-700-rgb: 198, 159, 159;
+  --cs-modes-dark-colors-primary-700-rgb: 179, 179, 179;
   --cs-modes-dark-colors-secondary-50: #362C11;
   --cs-modes-dark-colors-secondary-100: #584718;
   --cs-modes-dark-colors-secondary-200: #7C631D;
@@ -553,9 +553,9 @@
   --cs-modes-dark-colors-neutral-600-rgb: 185, 177, 177;
   --cs-modes-dark-colors-neutral-700-rgb: 211, 207, 207;
   --cs-modes-dark-colors-surface-background: #1E1E1E;
-  --cs-modes-dark-colors-surface-surface: #291E1E;
-  --cs-modes-dark-colors-surface-border: #251818;
-  --cs-modes-dark-colors-surface-divider: #432D2D;
+  --cs-modes-dark-colors-surface-surface: #242424;
+  --cs-modes-dark-colors-surface-border: #1F1F1F;
+  --cs-modes-dark-colors-surface-divider: #383838;
   --cs-modes-dark-colors-text-primary: #FFFFFF;
   --cs-modes-dark-colors-text-secondary: #DDB955;
   --cs-modes-dark-colors-text-muted: #B9B1B1;
@@ -566,32 +566,32 @@
   --cs-modes-dark-colors-interactive-hover: #1E1E1E;
   --cs-modes-dark-colors-interactive-active: #666666;
   --cs-modes-dark-colors-interactive-focus: #999999;
-  --cs-modes-dark-colors-interactive-disabled: #251818;
+  --cs-modes-dark-colors-interactive-disabled: #1F1F1F;
   --cs-modes-dark-colors-accent: #DDB955;
-  --cs-modes-dark-colors-bg-primary: #291E1E;
+  --cs-modes-dark-colors-bg-primary: #242424;
   --cs-modes-dark-colors-bg-secondary: #584718;
   --cs-modes-dark-colors-surface-bg: #1E1E1E;
   --cs-modes-dark-colors-primary-hover: #999999;
-  --cs-modes-dark-colors-primary-active: #C69F9F;
+  --cs-modes-dark-colors-primary-active: #B3B3B3;
   --cs-modes-dark-colors-accent-rgb: 221, 185, 85;
-  --cs-modes-dark-colors-border: #251818;
+  --cs-modes-dark-colors-border: #1F1F1F;
 }
 
 .dark {
   /* Dark Mode Variables */
-  --cs-colors-primary-50: #291E1E;
-  --cs-colors-primary-100: #432D2D;
-  --cs-colors-primary-200: #603939;
+  --cs-colors-primary-50: #242424;
+  --cs-colors-primary-100: #383838;
+  --cs-colors-primary-200: #4D4D4D;
   --cs-colors-primary-300: #666666;
   --cs-colors-primary-400: #1E1E1E;
   --cs-colors-primary-500: #1E1E1E;
   --cs-colors-primary-600: #999999;
-  --cs-colors-primary-700: #C69F9F;
-  --cs-colors-primary-800: #D6C2C2;
-  --cs-colors-primary-900: #E9E2E2;
+  --cs-colors-primary-700: #B3B3B3;
+  --cs-colors-primary-800: #CCCCCC;
+  --cs-colors-primary-900: #E6E6E6;
   --cs-colors-primary-500-rgb: 30, 30, 30;
   --cs-colors-primary-600-rgb: 153, 153, 153;
-  --cs-colors-primary-700-rgb: 198, 159, 159;
+  --cs-colors-primary-700-rgb: 179, 179, 179;
   --cs-colors-secondary-50: #362C11;
   --cs-colors-secondary-100: #584718;
   --cs-colors-secondary-200: #7C631D;
@@ -634,9 +634,9 @@
   --cs-colors-neutral-600-rgb: 185, 177, 177;
   --cs-colors-neutral-700-rgb: 211, 207, 207;
   --cs-colors-surface-background: #1E1E1E;
-  --cs-colors-surface-surface: #291E1E;
-  --cs-colors-surface-border: #251818;
-  --cs-colors-surface-divider: #432D2D;
+  --cs-colors-surface-surface: #242424;
+  --cs-colors-surface-border: #1F1F1F;
+  --cs-colors-surface-divider: #383838;
   --cs-colors-text-primary: #FFFFFF;
   --cs-colors-text-secondary: #DDB955;
   --cs-colors-text-muted: #B9B1B1;
@@ -647,15 +647,15 @@
   --cs-colors-interactive-hover: #1E1E1E;
   --cs-colors-interactive-active: #666666;
   --cs-colors-interactive-focus: #999999;
-  --cs-colors-interactive-disabled: #251818;
+  --cs-colors-interactive-disabled: #1F1F1F;
   --cs-colors-accent: #DDB955;
-  --cs-colors-bg-primary: #291E1E;
+  --cs-colors-bg-primary: #242424;
   --cs-colors-bg-secondary: #584718;
   --cs-colors-surface-bg: #1E1E1E;
   --cs-colors-primary-hover: #999999;
-  --cs-colors-primary-active: #C69F9F;
+  --cs-colors-primary-active: #B3B3B3;
   --cs-colors-accent-rgb: 221, 185, 85;
-  --cs-colors-border: #251818;
+  --cs-colors-border: #1F1F1F;
   --cs-colors-text-primary: #FFFFFF;
   --cs-colors-text-secondary: #DDB955;
 }

package/src/theme.ts

@@ -163,21 +163,21 @@ export const jeremyTheme: MultiThemeConfig = {
       }
     }
   },
-        colors: {
+          colors: {
     primary: {
-      '50': '#F4F1F1',
-      '100': '#E9E2E2',
-      '200': '#D6C2C2',
-      '300': '#C69F9F',
+      '50': '#F2F2F2',
+      '100': '#E6E6E6',
+      '200': '#CCCCCC',
+      '300': '#B3B3B3',
       '400': '#999999',
       '500': '#1E1E1E',
       '600': '#666666',
-      '700': '#603939',
-      '800': '#432D2D',
-      '900': '#291E1E',
+      '700': '#4D4D4D',
+      '800': '#383838',
+      '900': '#242424',
       '500-rgb': '30, 30, 30',
       '600-rgb': '102, 102, 102',
-      '700-rgb': '96, 57, 57',
+      '700-rgb': '77, 77, 77',
     },
     secondary: {
       '50': '#F8F5EC',
@@ -224,41 +224,41 @@ export const jeremyTheme: MultiThemeConfig = {
       '900': '#201D1D',
     },
     surface: {
-      background: '#FAF8F8',
+      background: '#F9F9F9',
       surface: '#FFFFFF',
       border: '#E9E1CB',
       divider: '#F4F0E6',
     },
     text: {
-      primary: '#291E1E',
-      secondary: '#603939',
+      primary: '#242424',
+      secondary: '#4D4D4D',
       muted: '#9E9494',
       inverse: '#FFFFFF',
       onPrimary: '#FFFFFF',
-      onSecondary: '#291E1E',
-      onSurface: '#291E1E',
+      onSecondary: '#242424',
+      onSurface: '#242424',
     },
     interactive: {
       hover: '#666666',
-      active: '#432D2D',
+      active: '#383838',
       focus: '#1E1E1E',
       disabled: '#D3CFCF',
     },
     // Additional colors referenced in CSS
     accent: '#E2C983',
-    'bg-primary': '#F4F1F1',
+    'bg-primary': '#F2F2F2',
     'bg-secondary': '#F3ECD8',
-    'surface-bg': '#FAF8F8',
+    'surface-bg': '#F9F9F9',
     // Additional missing CSS variables
     'primary-hover': '#666666',
-    'primary-active': '#432D2D',
+    'primary-active': '#383838',
     'accent-rgb': '226, 201, 131',
     'border': '#E9E1CB',
     // Border semantic variables
     'border-transparent': 'transparent',
     // Text colors referenced in CSS
-    'text-primary': '#291E1E',
-    'text-secondary': '#603939'
+    'text-primary': '#242424',
+    'text-secondary': '#4D4D4D'
   },
   navigation: {
     layout: 'horizontal',
@@ -323,15 +323,15 @@ export const jeremyTheme: MultiThemeConfig = {
         secondary: '#F8F5EC',
         tertiary: '#FAFAFA',
         light: '#ffffff',
-        dark: '#291E1E',
+        dark: '#242424',
         contrast: '#000000',
       },
       text: {
-        primary: '#291E1E',
-        secondary: '#603939',
+        primary: '#242424',
+        secondary: '#4D4D4D',
         tertiary: '#9E9494',
         light: '#B9B1B1',
-        dark: '#291E1E',
+        dark: '#242424',
         contrast: '#ffffff',
       },
       border: {
@@ -339,14 +339,14 @@ export const jeremyTheme: MultiThemeConfig = {
         secondary: '#F3ECD8',
         tertiary: '#B9B1B1',
         light: '#F5F4F4',
-        dark: '#603939',
+        dark: '#4D4D4D',
         contrast: '#000000',
       },
       accent: {
         primary: '#1E1E1E',
         secondary: '#666666',
-        tertiary: '#603939',
-        light: '#D6C2C2',
+        tertiary: '#4D4D4D',
+        light: '#CCCCCC',
         dark: '#666666',
         contrast: '#ffffff',
       },
@@ -355,14 +355,14 @@ export const jeremyTheme: MultiThemeConfig = {
         secondary: '#FAFAFA',
         tertiary: '#F5F4F4',
         light: '#ffffff',
-        dark: '#432D2D',
+        dark: '#383838',
         contrast: '#F8F5EC',
       },
       active: {
         primary: '#1E1E1E',
         secondary: '#666666',
-        tertiary: '#603939',
-        light: '#D6C2C2',
+        tertiary: '#4D4D4D',
+        light: '#CCCCCC',
         dark: '#666666',
         contrast: '#ffffff',
       },
@@ -377,8 +377,8 @@ export const jeremyTheme: MultiThemeConfig = {
       focus: {
         primary: '#1E1E1E',
         secondary: '#666666',
-        tertiary: '#603939',
-        light: '#D6C2C2',
+        tertiary: '#4D4D4D',
+        light: '#CCCCCC',
         dark: '#666666',
         contrast: '#ffffff',
       }
@@ -458,7 +458,7 @@ 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)',
@@ -577,24 +577,24 @@ 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': '#291E1E',
-          '100': '#432D2D',
-          '200': '#603939',
+          '50': '#242424',
+          '100': '#383838',
+          '200': '#4D4D4D',
           '300': '#666666',
           '400': '#1E1E1E',
           '500': '#1E1E1E',
           '600': '#999999',
-          '700': '#C69F9F',
-          '800': '#D6C2C2',
-          '900': '#E9E2E2',
+          '700': '#B3B3B3',
+          '800': '#CCCCCC',
+          '900': '#E6E6E6',
           '500-rgb': '30, 30, 30',
           '600-rgb': '153, 153, 153',
-          '700-rgb': '198, 159, 159',
+          '700-rgb': '179, 179, 179',
         },
         secondary: {
           '50': '#362C11',
@@ -645,9 +645,9 @@ export const jeremyTheme: MultiThemeConfig = {
         },
         surface: {
           background: '#1E1E1E',
-          surface: '#291E1E',
-          border: '#251818',
-          divider: '#432D2D',
+          surface: '#242424',
+          border: '#1F1F1F',
+          divider: '#383838',
         },
         text: {
           primary: '#FFFFFF',
@@ -662,18 +662,18 @@ export const jeremyTheme: MultiThemeConfig = {
           hover: '#1E1E1E',
           active: '#666666',
           focus: '#999999',
-          disabled: '#251818',
+          disabled: '#1F1F1F',
         },
         // Additional colors referenced in CSS
         accent: '#DDB955',
-        'bg-primary': '#291E1E',
+        'bg-primary': '#242424',
         'bg-secondary': '#584718',
         'surface-bg': '#1E1E1E',
         // Additional missing CSS variables
         'primary-hover': '#999999',
-        'primary-active': '#C69F9F',
+        'primary-active': '#B3B3B3',
         'accent-rgb': '221, 185, 85',
-        'border': '#251818',
+        'border': '#1F1F1F',
         // Text colors referenced in CSS
         'text-primary': '#FFFFFF',
         'text-secondary': '#DDB955'