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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/dist/styles.css +228 -213
  3. package/dist/theme.d.ts.map +1 -1
  4. package/dist/theme.esm.js +177 -174
  5. package/dist/theme.js +177 -174
  6. package/dist/themes/seedColors.d.ts +93 -0
  7. package/dist/themes/seedColors.d.ts.map +1 -0
  8. package/dist/themes/seedColors.esm.js +37 -0
  9. package/dist/themes/seedColors.js +37 -0
  10. package/dist/themes/themes/jeremy.d.ts.map +1 -1
  11. package/dist/themes/themes/jeremy.esm.js +177 -174
  12. package/dist/themes/themes/jeremy.js +177 -174
  13. package/package.json +1 -1
  14. package/src/styles/themes/jeremy.css +227 -212
  15. package/src/theme.ts +180 -177
  16. package/src/themes/seedColors.ts +111 -0
  17. package/src/themes/themes/jeremy.ts +180 -177
package/dist/theme.esm.js CHANGED
@@ -163,100 +163,100 @@ export const jeremyTheme = {
163
163
  },
164
164
  colors: {
165
165
  primary: {
166
- 50: '#FBEAEA',
167
- 100: '#F4CFCF',
168
- 200: '#E8A9A9',
169
- 300: '#D97D7D',
170
- 400: '#C55A5A',
171
- 500: '#A3485A',
172
- 600: '#8C3447',
173
- 700: '#752737',
174
- 800: '#662222',
175
- 900: '#421414',
176
- // RGB versions for rgba() usage
177
- '500-rgb': '163, 72, 90',
178
- '600-rgb': '140, 52, 71',
179
- '700-rgb': '117, 39, 55'
166
+ '50': '#F2F2F2',
167
+ '100': '#E6E6E6',
168
+ '200': '#CCCCCC',
169
+ '300': '#B3B3B3',
170
+ '400': '#999999',
171
+ '500': '#1E1E1E',
172
+ '600': '#666666',
173
+ '700': '#4D4D4D',
174
+ '800': '#383838',
175
+ '900': '#242424',
176
+ '500-rgb': '30, 30, 30',
177
+ '600-rgb': '102, 102, 102',
178
+ '700-rgb': '77, 77, 77',
180
179
  },
181
180
  secondary: {
182
- 50: '#FFF8E8',
183
- 100: '#FFF1D1',
184
- 200: '#FDE5B3',
185
- 300: '#F5DAA7',
186
- 400: '#EACF8D',
187
- 500: '#D9BA71',
188
- 600: '#BCA059',
189
- 700: '#9C8245',
190
- 800: '#7B6534',
191
- 900: '#544521'
181
+ '50': '#F8F5EC',
182
+ '100': '#F3ECD8',
183
+ '200': '#E9DAAF',
184
+ '300': '#E2C983',
185
+ '400': '#DDB955',
186
+ '500': '#E8CF8A',
187
+ '600': '#AA8622',
188
+ '700': '#7C631D',
189
+ '800': '#584718',
190
+ '900': '#362C11',
191
+ '500-rgb': '232, 207, 138',
192
+ '600-rgb': '170, 134, 34',
193
+ '700-rgb': '124, 99, 29',
192
194
  },
193
195
  semantic: {
194
196
  success: '#1E824C',
195
- warning: '#E6A23C',
197
+ warning: '#D99A3E',
196
198
  error: '#D93025',
197
- errorDark: '#A12017',
198
- info: '#007BCE',
199
- // RGB versions for rgba() usage
199
+ errorDark: '#6D1912',
200
+ info: '#2563EB',
200
201
  successRgb: '30, 130, 76',
201
- warningRgb: '230, 162, 60',
202
+ warningRgb: '217, 154, 62',
202
203
  errorRgb: '217, 48, 37',
203
- errorDarkRgb: '161, 32, 23',
204
- infoRgb: '0, 123, 206',
205
- // Additional RGB versions referenced in CSS
204
+ errorDarkRgb: '109, 25, 18',
205
+ infoRgb: '37, 99, 235',
206
206
  'success-rgb': '30, 130, 76',
207
- 'warning-rgb': '230, 162, 60',
207
+ 'warning-rgb': '217, 154, 62',
208
208
  'error-rgb': '217, 48, 37',
209
- 'error-dark-rgb': '161, 32, 23',
210
- 'info-rgb': '0, 123, 206'
209
+ 'error-dark-rgb': '109, 25, 18',
210
+ 'info-rgb': '37, 99, 235',
211
211
  },
212
212
  neutral: {
213
- 50: '#FAFAFA',
214
- 100: '#F4F4F4',
215
- 200: '#E8E8E8',
216
- 300: '#D1D1D1',
217
- 400: '#B5B5B5',
218
- 500: '#999999',
219
- 600: '#7A7A7A',
220
- 700: '#5C5C5C',
221
- 800: '#3D3D3D',
222
- 900: '#1E1E1E'
213
+ '50': '#FAFAFA',
214
+ '100': '#F5F4F4',
215
+ '200': '#E9E7E7',
216
+ '300': '#D3CFCF',
217
+ '400': '#B9B1B1',
218
+ '500': '#9E9494',
219
+ '600': '#817474',
220
+ '700': '#605757',
221
+ '800': '#403A3A',
222
+ '900': '#201D1D',
223
223
  },
224
224
  surface: {
225
- background: '#FFF9F3',
225
+ background: '#F9F9F9',
226
226
  surface: '#FFFFFF',
227
- border: '#EAD7C0',
228
- divider: '#F0E2D0'
227
+ border: '#E9E1CB',
228
+ divider: '#F4F0E6',
229
229
  },
230
230
  text: {
231
- primary: '#2B1212',
232
- secondary: '#5E3A3A',
233
- muted: '#8C6F6F',
231
+ primary: '#242424',
232
+ secondary: '#4D4D4D',
233
+ muted: '#9E9494',
234
234
  inverse: '#FFFFFF',
235
235
  onPrimary: '#FFFFFF',
236
- onSecondary: '#2B1212',
237
- onSurface: '#2B1212'
236
+ onSecondary: '#242424',
237
+ onSurface: '#242424',
238
238
  },
239
239
  interactive: {
240
- hover: '#842A3B',
241
- active: '#662222',
242
- focus: '#A3485A',
243
- disabled: '#C9B6B6'
240
+ hover: '#666666',
241
+ active: '#383838',
242
+ focus: '#1E1E1E',
243
+ disabled: '#D3CFCF',
244
244
  },
245
245
  // Additional colors referenced in CSS
246
- accent: '#F5DAA7',
247
- 'bg-primary': '#FBEAEA',
248
- 'bg-secondary': '#FFF1D1',
249
- 'surface-bg': '#FFF9F3',
246
+ accent: '#E2C983',
247
+ 'bg-primary': '#F2F2F2',
248
+ 'bg-secondary': '#F3ECD8',
249
+ 'surface-bg': '#F9F9F9',
250
250
  // Additional missing CSS variables
251
- 'primary-hover': '#842A3B',
252
- 'primary-active': '#662222',
253
- 'accent-rgb': '245, 218, 167',
254
- 'border': '#EAD7C0',
251
+ 'primary-hover': '#666666',
252
+ 'primary-active': '#383838',
253
+ 'accent-rgb': '226, 201, 131',
254
+ 'border': '#E9E1CB',
255
255
  // Border semantic variables
256
256
  'border-transparent': 'transparent',
257
257
  // Text colors referenced in CSS
258
- 'text-primary': '#2B1212',
259
- 'text-secondary': '#5E3A3A'
258
+ 'text-primary': '#242424',
259
+ 'text-secondary': '#4D4D4D'
260
260
  },
261
261
  navigation: {
262
262
  layout: 'horizontal',
@@ -318,67 +318,67 @@ export const jeremyTheme = {
318
318
  colors: {
319
319
  background: {
320
320
  primary: '#ffffff',
321
- secondary: '#FFF9F3',
321
+ secondary: '#F8F5EC',
322
322
  tertiary: '#FAFAFA',
323
323
  light: '#ffffff',
324
- dark: '#2B1212',
325
- contrast: '#000000'
324
+ dark: '#242424',
325
+ contrast: '#000000',
326
326
  },
327
327
  text: {
328
- primary: '#2B1212',
329
- secondary: '#5E3A3A',
330
- tertiary: '#8C6F6F',
331
- light: '#B5B5B5',
332
- dark: '#2B1212',
333
- contrast: '#ffffff'
328
+ primary: '#242424',
329
+ secondary: '#4D4D4D',
330
+ tertiary: '#9E9494',
331
+ light: '#B9B1B1',
332
+ dark: '#242424',
333
+ contrast: '#ffffff',
334
334
  },
335
335
  border: {
336
- primary: '#EAD7C0',
337
- secondary: '#F0E2D0',
338
- tertiary: '#B5B5B5',
339
- light: '#F4F4F4',
340
- dark: '#5E3A3A',
341
- contrast: '#000000'
336
+ primary: '#E9DAAF',
337
+ secondary: '#F3ECD8',
338
+ tertiary: '#B9B1B1',
339
+ light: '#F5F4F4',
340
+ dark: '#4D4D4D',
341
+ contrast: '#000000',
342
342
  },
343
343
  accent: {
344
- primary: '#A3485A',
345
- secondary: '#8C3447',
346
- tertiary: '#752737',
347
- light: '#E8A9A9',
348
- dark: '#8C3447',
349
- contrast: '#ffffff'
344
+ primary: '#1E1E1E',
345
+ secondary: '#666666',
346
+ tertiary: '#4D4D4D',
347
+ light: '#CCCCCC',
348
+ dark: '#666666',
349
+ contrast: '#ffffff',
350
350
  },
351
351
  hover: {
352
- primary: '#FFF9F3',
352
+ primary: '#F8F5EC',
353
353
  secondary: '#FAFAFA',
354
- tertiary: '#F4F4F4',
354
+ tertiary: '#F5F4F4',
355
355
  light: '#ffffff',
356
- dark: '#421414',
357
- contrast: '#FFF9F3'
356
+ dark: '#383838',
357
+ contrast: '#F8F5EC',
358
358
  },
359
359
  active: {
360
- primary: '#A3485A',
361
- secondary: '#8C3447',
362
- tertiary: '#752737',
363
- light: '#E8A9A9',
364
- dark: '#8C3447',
365
- contrast: '#ffffff'
360
+ primary: '#1E1E1E',
361
+ secondary: '#666666',
362
+ tertiary: '#4D4D4D',
363
+ light: '#CCCCCC',
364
+ dark: '#666666',
365
+ contrast: '#ffffff',
366
366
  },
367
367
  disabled: {
368
- primary: '#F4F4F4',
369
- secondary: '#E8E8E8',
370
- tertiary: '#D1D1D1',
368
+ primary: '#F5F4F4',
369
+ secondary: '#E9E7E7',
370
+ tertiary: '#D3CFCF',
371
371
  light: '#FAFAFA',
372
- dark: '#8C6F6F',
373
- contrast: '#B5B5B5'
372
+ dark: '#9E9494',
373
+ contrast: '#B9B1B1',
374
374
  },
375
375
  focus: {
376
- primary: '#A3485A',
377
- secondary: '#8C3447',
378
- tertiary: '#752737',
379
- light: '#E8A9A9',
380
- dark: '#8C3447',
381
- contrast: '#ffffff'
376
+ primary: '#1E1E1E',
377
+ secondary: '#666666',
378
+ tertiary: '#4D4D4D',
379
+ light: '#CCCCCC',
380
+ dark: '#666666',
381
+ contrast: '#ffffff',
382
382
  }
383
383
  },
384
384
  typography: {
@@ -461,7 +461,7 @@ export const jeremyTheme = {
461
461
  md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
462
462
  lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
463
463
  xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
464
- '2xl': '0 25px 50px -12px rgb(249 115 22 / 0.25)',
464
+ '2xl': '0 25px 50px -12px rgb(30 30 30 / 0.25)',
465
465
  inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.06)',
466
466
  none: '0 0 #0000'
467
467
  },
@@ -564,8 +564,8 @@ export const jeremyTheme = {
564
564
  color: 'rgba(255, 255, 255, 0.2)'
565
565
  },
566
566
  meta: {
567
- name: 'Jeremy',
568
- description: 'Modern, vibrant design system with Inter typography and warm burgundy/gold color palette for creative projects',
567
+ name: 'Jeremy Theme',
568
+ description: 'Modern, vibrant design system with warm burgundy/gold color palette for creative projects',
569
569
  author: 'Jeremy Design Team',
570
570
  version: '1.0.0',
571
571
  category: 'creative',
@@ -579,32 +579,34 @@ export const jeremyTheme = {
579
579
  dark: {
580
580
  colors: {
581
581
  primary: {
582
- 50: '#2B1212',
583
- 100: '#421414',
584
- 200: '#662222',
585
- 300: '#752737',
586
- 400: '#8C3447',
587
- 500: '#A3485A',
588
- 600: '#C55A5A',
589
- 700: '#D97D7D',
590
- 800: '#E8A9A9',
591
- 900: '#FBEAEA',
592
- // RGB versions for rgba() usage
593
- '500-rgb': '163, 72, 90',
594
- '600-rgb': '197, 90, 90',
595
- '700-rgb': '217, 125, 125'
582
+ '50': '#242424',
583
+ '100': '#383838',
584
+ '200': '#4D4D4D',
585
+ '300': '#666666',
586
+ '400': '#1E1E1E',
587
+ '500': '#1E1E1E',
588
+ '600': '#999999',
589
+ '700': '#B3B3B3',
590
+ '800': '#CCCCCC',
591
+ '900': '#E6E6E6',
592
+ '500-rgb': '30, 30, 30',
593
+ '600-rgb': '153, 153, 153',
594
+ '700-rgb': '179, 179, 179',
596
595
  },
597
596
  secondary: {
598
- 50: '#2E2314',
599
- 100: '#3E2E17',
600
- 200: '#5E4722',
601
- 300: '#7B6534',
602
- 400: '#9C8245',
603
- 500: '#BCA059',
604
- 600: '#D9BA71',
605
- 700: '#EACF8D',
606
- 800: '#F5DAA7',
607
- 900: '#FFF1D1'
597
+ '50': '#362C11',
598
+ '100': '#584718',
599
+ '200': '#7C631D',
600
+ '300': '#AA8622',
601
+ '400': '#E8CF8A',
602
+ '500': '#E8CF8A',
603
+ '600': '#DDB955',
604
+ '700': '#E2C983',
605
+ '800': '#E9DAAF',
606
+ '900': '#F3ECD8',
607
+ '500-rgb': '232, 207, 138',
608
+ '600-rgb': '221, 185, 85',
609
+ '700-rgb': '226, 201, 131',
608
610
  },
609
611
  semantic: {
610
612
  success: '#34D399',
@@ -612,65 +614,66 @@ export const jeremyTheme = {
612
614
  error: '#F87171',
613
615
  errorDark: '#B91C1C',
614
616
  info: '#60A5FA',
615
- // RGB versions for rgba() usage
616
617
  successRgb: '52, 211, 153',
617
618
  warningRgb: '251, 191, 36',
618
619
  errorRgb: '248, 113, 113',
619
620
  errorDarkRgb: '185, 28, 28',
620
621
  infoRgb: '96, 165, 250',
621
- // Additional RGB versions referenced in CSS
622
622
  'success-rgb': '52, 211, 153',
623
623
  'warning-rgb': '251, 191, 36',
624
624
  'error-rgb': '248, 113, 113',
625
625
  'error-dark-rgb': '185, 28, 28',
626
- 'info-rgb': '96, 165, 250'
626
+ 'info-rgb': '96, 165, 250',
627
627
  },
628
628
  neutral: {
629
- 50: '#121212',
630
- 100: '#1A1A1A',
631
- 200: '#232323',
632
- 300: '#2E2E2E',
633
- 400: '#3C3C3C',
634
- 500: '#565656',
635
- 600: '#7A7A7A',
636
- 700: '#A0A0A0',
637
- 800: '#C5C5C5',
638
- 900: '#E8E8E8'
629
+ '50': '#201D1D',
630
+ '100': '#403A3A',
631
+ '200': '#605757',
632
+ '300': '#817474',
633
+ '400': '#9E9494',
634
+ '500': '#9E9494',
635
+ '600': '#B9B1B1',
636
+ '700': '#D3CFCF',
637
+ '800': '#E9E7E7',
638
+ '900': '#F5F4F4',
639
+ '500-rgb': '158, 148, 148',
640
+ '600-rgb': '185, 177, 177',
641
+ '700-rgb': '211, 207, 207',
639
642
  },
640
643
  surface: {
641
- background: '#1B0D0D',
642
- surface: '#2B1212',
643
- border: '#3C1818',
644
- divider: '#4A2222'
644
+ background: '#1E1E1E',
645
+ surface: '#242424',
646
+ border: '#1F1F1F',
647
+ divider: '#383838',
645
648
  },
646
649
  text: {
647
- primary: '#F5DAA7',
648
- secondary: '#EACF8D',
649
- muted: '#C9B6B6',
650
- inverse: '#1B0D0D',
651
- onPrimary: '#1B0D0D',
652
- onSecondary: '#1B0D0D',
653
- onSurface: '#F5DAA7'
650
+ primary: '#FFFFFF',
651
+ secondary: '#DDB955',
652
+ muted: '#B9B1B1',
653
+ inverse: '#1E1E1E',
654
+ onPrimary: '#1E1E1E',
655
+ onSecondary: '#1E1E1E',
656
+ onSurface: '#FFFFFF',
654
657
  },
655
658
  interactive: {
656
- hover: '#A3485A',
657
- active: '#842A3B',
658
- focus: '#C55A5A',
659
- disabled: '#3C1818'
659
+ hover: '#1E1E1E',
660
+ active: '#666666',
661
+ focus: '#999999',
662
+ disabled: '#1F1F1F',
660
663
  },
661
664
  // Additional colors referenced in CSS
662
- accent: '#EACF8D',
663
- 'bg-primary': '#2B1212',
664
- 'bg-secondary': '#3E2E17',
665
- 'surface-bg': '#1B0D0D',
665
+ accent: '#DDB955',
666
+ 'bg-primary': '#242424',
667
+ 'bg-secondary': '#584718',
668
+ 'surface-bg': '#1E1E1E',
666
669
  // Additional missing CSS variables
667
- 'primary-hover': '#C55A5A',
668
- 'primary-active': '#E8A9A9',
669
- 'accent-rgb': '234, 207, 141',
670
- 'border': '#3C1818',
670
+ 'primary-hover': '#999999',
671
+ 'primary-active': '#B3B3B3',
672
+ 'accent-rgb': '221, 185, 85',
673
+ 'border': '#1F1F1F',
671
674
  // Text colors referenced in CSS
672
- 'text-primary': '#F5DAA7',
673
- 'text-secondary': '#EACF8D'
675
+ 'text-primary': '#FFFFFF',
676
+ 'text-secondary': '#DDB955'
674
677
  }
675
678
  }
676
679
  },