@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.45 → 0.2.47

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.
@@ -1,554 +0,0 @@
1
- import { MultiThemeConfig } from '../types';
2
-
3
- /**
4
- * Harvey Creative Theme
5
- * Modern, vibrant design with Poppins font and warm color palette
6
- */
7
- export const harveyTheme: MultiThemeConfig = {
8
- fonts: {
9
- primary: {
10
- family: 'Poppins',
11
- fallbacks: ['ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', '"Noto Sans"', 'sans-serif'],
12
- weights: [300, 400, 500, 600, 700, 800],
13
- display: 'swap',
14
- source: {
15
- type: 'google'
16
- },
17
- sizes: {
18
- xs: '0.75rem',
19
- sm: '0.875rem',
20
- md: '1rem',
21
- lg: '1.125rem',
22
- xl: '1.25rem',
23
- '2xl': '1.5rem',
24
- '3xl': '1.875rem',
25
- '4xl': '2.25rem',
26
- '5xl': '3rem',
27
- '6xl': '3.75rem'
28
- },
29
- lineHeights: {
30
- tight: '1.2',
31
- normal: '1.5',
32
- relaxed: '1.7',
33
- loose: '2'
34
- },
35
- letterSpacing: {
36
- tight: '-0.02em',
37
- normal: '0em',
38
- wide: '0.02em',
39
- wider: '0.04em',
40
- widest: '0.08em'
41
- }
42
- },
43
- secondary: {
44
- family: 'Poppins',
45
- fallbacks: ['ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', '"Noto Sans"', 'sans-serif'],
46
- weights: [300, 400, 500, 600, 700],
47
- display: 'swap',
48
- source: {
49
- type: 'google'
50
- },
51
- sizes: {
52
- xs: '0.75rem',
53
- sm: '0.875rem',
54
- md: '1rem',
55
- lg: '1.125rem',
56
- xl: '1.25rem',
57
- '2xl': '1.5rem',
58
- '3xl': '1.875rem',
59
- '4xl': '2.25rem',
60
- '5xl': '3rem',
61
- '6xl': '3.75rem'
62
- },
63
- lineHeights: {
64
- tight: '1.2',
65
- normal: '1.5',
66
- relaxed: '1.7',
67
- loose: '2'
68
- },
69
- letterSpacing: {
70
- tight: '-0.02em',
71
- normal: '0em',
72
- wide: '0.02em',
73
- wider: '0.04em',
74
- widest: '0.08em'
75
- }
76
- },
77
- display: {
78
- family: 'Poppins, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif',
79
- weights: [600, 700, 800, 900],
80
- sizes: {
81
- xs: '1.5rem',
82
- sm: '1.875rem',
83
- md: '2.25rem',
84
- lg: '3rem',
85
- xl: '3.75rem',
86
- '2xl': '4.5rem',
87
- '3xl': '6rem',
88
- '4xl': '7.5rem',
89
- '5xl': '9rem',
90
- '6xl': '12rem'
91
- },
92
- lineHeights: {
93
- tight: '1.05',
94
- normal: '1.15',
95
- relaxed: '1.25',
96
- loose: '1.35'
97
- },
98
- letterSpacing: {
99
- tight: '-0.03em',
100
- normal: '-0.02em',
101
- wide: '-0.01em',
102
- wider: '0em',
103
- widest: '0.01em'
104
- }
105
- },
106
- body: {
107
- family: 'Poppins, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif',
108
- weights: [300, 400, 500, 600],
109
- sizes: {
110
- xs: '0.75rem',
111
- sm: '0.875rem',
112
- md: '1rem',
113
- lg: '1.125rem',
114
- xl: '1.25rem',
115
- '2xl': '1.5rem',
116
- '3xl': '1.875rem',
117
- '4xl': '2.25rem',
118
- '5xl': '3rem',
119
- '6xl': '3.75rem'
120
- },
121
- lineHeights: {
122
- tight: '1.3',
123
- normal: '1.6',
124
- relaxed: '1.8',
125
- loose: '2.1'
126
- },
127
- letterSpacing: {
128
- tight: '-0.01em',
129
- normal: '0em',
130
- wide: '0.01em',
131
- wider: '0.02em',
132
- widest: '0.04em'
133
- }
134
- },
135
- mono: {
136
- family: 'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace',
137
- weights: [400, 500, 600],
138
- sizes: {
139
- xs: '0.75rem',
140
- sm: '0.875rem',
141
- md: '1rem',
142
- lg: '1.125rem',
143
- xl: '1.25rem',
144
- '2xl': '1.5rem',
145
- '3xl': '1.875rem',
146
- '4xl': '2.25rem',
147
- '5xl': '3rem',
148
- '6xl': '3.75rem'
149
- },
150
- lineHeights: {
151
- tight: '1.25',
152
- normal: '1.5',
153
- relaxed: '1.75',
154
- loose: '2'
155
- },
156
- letterSpacing: {
157
- tight: '-0.025em',
158
- normal: '0em',
159
- wide: '0.025em',
160
- wider: '0.05em',
161
- widest: '0.1em'
162
- }
163
- }
164
- },
165
- colors: {
166
- primary: {
167
- 50: '#fff7ed',
168
- 100: '#ffedd5',
169
- 200: '#fed7aa',
170
- 300: '#fdba74',
171
- 400: '#fb923c',
172
- 500: '#f97316',
173
- 600: '#ea580c',
174
- 700: '#c2410c',
175
- 800: '#9a3412',
176
- 900: '#7c2d12'
177
- },
178
- secondary: {
179
- 50: '#fefce8',
180
- 100: '#fef9c3',
181
- 200: '#fef08a',
182
- 300: '#fde047',
183
- 400: '#facc15',
184
- 500: '#eab308',
185
- 600: '#ca8a04',
186
- 700: '#a16207',
187
- 800: '#854d0e',
188
- 900: '#713f12'
189
- },
190
- semantic: {
191
- success: '#16a34a',
192
- warning: '#f59e0b',
193
- error: '#dc2626',
194
- info: '#2563eb'
195
- },
196
- neutral: {
197
- 50: '#fafaf9',
198
- 100: '#f5f5f4',
199
- 200: '#e7e5e4',
200
- 300: '#d6d3d1',
201
- 400: '#a8a29e',
202
- 500: '#78716c',
203
- 600: '#57534e',
204
- 700: '#44403c',
205
- 800: '#292524',
206
- 900: '#1c1917'
207
- },
208
- surface: {
209
- background: '#fefefe',
210
- surface: '#fafaf9',
211
- border: '#e7e5e4',
212
- divider: '#d6d3d1'
213
- },
214
- text: {
215
- primary: '#1c1917',
216
- secondary: '#44403c',
217
- muted: '#78716c',
218
- inverse: '#fafaf9',
219
- onPrimary: '#fefefe',
220
- onSecondary: '#fefefe',
221
- onSurface: '#1c1917'
222
- },
223
- interactive: {
224
- hover: '#fff7ed',
225
- active: '#fed7aa',
226
- focus: '#f97316',
227
- disabled: '#d6d3d1'
228
- }
229
- },
230
- navigation: {
231
- layout: 'horizontal',
232
- style: 'creative',
233
- behavior: 'floating',
234
- responsive: 'adaptive',
235
- animations: {
236
- duration: {
237
- fast: '0.12s',
238
- normal: '0.25s',
239
- slow: '0.4s',
240
- instant: '0s'
241
- },
242
- easing: {
243
- linear: 'linear',
244
- ease: 'ease',
245
- easeIn: 'ease-in',
246
- easeOut: 'ease-out',
247
- easeInOut: 'ease-in-out',
248
- bounce: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
249
- elastic: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
250
- },
251
- stagger: {
252
- enabled: true,
253
- delay: '0.03s',
254
- direction: 'forward'
255
- },
256
- transitions: {
257
- enter: '0.25s ease-in-out',
258
- exit: '0.12s ease-in',
259
- move: '0.25s ease',
260
- resize: '0.15s ease'
261
- }
262
- },
263
- spacing: {
264
- container: '1.25rem',
265
- item: '0.75rem',
266
- group: '1.25rem',
267
- divider: '0.5rem',
268
- icon: '0.75rem',
269
- text: '0.5rem',
270
- padding: {
271
- horizontal: '1.25rem',
272
- vertical: '1rem',
273
- top: '1rem',
274
- right: '1.25rem',
275
- bottom: '1rem',
276
- left: '1.25rem'
277
- },
278
- margin: {
279
- horizontal: '0.75rem',
280
- vertical: '0.5rem',
281
- top: '0.5rem',
282
- right: '0.75rem',
283
- bottom: '0.5rem',
284
- left: '0.75rem'
285
- }
286
- },
287
- colors: {
288
- background: {
289
- primary: '#ffffff',
290
- secondary: '#fefefe',
291
- tertiary: '#fafaf9',
292
- light: '#ffffff',
293
- dark: '#1c1917',
294
- contrast: '#000000'
295
- },
296
- text: {
297
- primary: '#1c1917',
298
- secondary: '#57534e',
299
- tertiary: '#78716c',
300
- light: '#a8a29e',
301
- dark: '#1c1917',
302
- contrast: '#ffffff'
303
- },
304
- border: {
305
- primary: '#e7e5e4',
306
- secondary: '#d6d3d1',
307
- tertiary: '#a8a29e',
308
- light: '#f5f5f4',
309
- dark: '#57534e',
310
- contrast: '#000000'
311
- },
312
- accent: {
313
- primary: '#f97316',
314
- secondary: '#ea580c',
315
- tertiary: '#c2410c',
316
- light: '#fed7aa',
317
- dark: '#ea580c',
318
- contrast: '#ffffff'
319
- },
320
- hover: {
321
- primary: '#fefefe',
322
- secondary: '#fafaf9',
323
- tertiary: '#f5f5f4',
324
- light: '#ffffff',
325
- dark: '#292524',
326
- contrast: '#fefefe'
327
- },
328
- active: {
329
- primary: '#f97316',
330
- secondary: '#ea580c',
331
- tertiary: '#c2410c',
332
- light: '#fed7aa',
333
- dark: '#ea580c',
334
- contrast: '#ffffff'
335
- },
336
- disabled: {
337
- primary: '#f5f5f4',
338
- secondary: '#e7e5e4',
339
- tertiary: '#d6d3d1',
340
- light: '#fafaf9',
341
- dark: '#78716c',
342
- contrast: '#a8a29e'
343
- },
344
- focus: {
345
- primary: '#f97316',
346
- secondary: '#ea580c',
347
- tertiary: '#c2410c',
348
- light: '#fed7aa',
349
- dark: '#ea580c',
350
- contrast: '#ffffff'
351
- }
352
- },
353
- typography: {
354
- fontFamily: 'Poppins, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif',
355
- fontSize: {
356
- xs: '0.75rem',
357
- sm: '0.875rem',
358
- base: '1rem',
359
- lg: '1.125rem',
360
- xl: '1.25rem',
361
- '2xl': '1.5rem'
362
- },
363
- fontWeight: {
364
- light: '300',
365
- normal: '400',
366
- medium: '500',
367
- semibold: '600',
368
- bold: '700'
369
- },
370
- lineHeight: {
371
- tight: '1.25',
372
- normal: '1.5',
373
- relaxed: '1.75',
374
- loose: '2'
375
- },
376
- letterSpacing: {
377
- tight: '-0.025em',
378
- normal: '0',
379
- wide: '0.025em',
380
- wider: '0.05em'
381
- }
382
- },
383
- breakpoints: {
384
- mobile: '640px',
385
- tablet: '768px',
386
- desktop: '1024px',
387
- wide: '1280px',
388
- ultra: '1536px'
389
- }
390
- },
391
- spacing: {
392
- scale: {
393
- xs: '0.25rem',
394
- sm: '0.5rem',
395
- md: '1rem',
396
- lg: '1.5rem',
397
- xl: '2rem',
398
- '2xl': '3rem',
399
- '3xl': '4rem',
400
- '4xl': '6rem',
401
- '5xl': '8rem',
402
- '6xl': '12rem'
403
- },
404
- component: {
405
- button: {
406
- padding: '0.875rem 1.75rem',
407
- margin: '0.5rem',
408
- gap: '0.75rem'
409
- },
410
- input: {
411
- padding: '0.875rem 1rem',
412
- margin: '0.5rem',
413
- gap: '0.5rem'
414
- },
415
- card: {
416
- padding: '1.75rem',
417
- margin: '1rem',
418
- gap: '1.25rem'
419
- }
420
- },
421
- layout: {
422
- page: '2.5rem',
423
- section: '3.5rem',
424
- container: '1.25rem',
425
- grid: '1.75rem'
426
- }
427
- },
428
- shadows: {
429
- sm: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
430
- md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
431
- lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
432
- xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
433
- '2xl': '0 25px 50px -12px rgb(249 115 22 / 0.25)',
434
- inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.06)',
435
- none: '0 0 #0000'
436
- },
437
- transitions: {
438
- duration: {
439
- fast: '0.12s',
440
- normal: '0.25s',
441
- slow: '0.4s'
442
- },
443
- easing: {
444
- linear: 'linear',
445
- ease: 'ease',
446
- easeIn: 'ease-in',
447
- easeOut: 'ease-out',
448
- easeInOut: 'ease-in-out'
449
- },
450
- properties: {
451
- colors: '0.25s ease-in-out',
452
- transform: '0.25s ease-in-out',
453
- opacity: '0.12s ease',
454
- shadow: '0.25s ease'
455
- }
456
- },
457
- borderRadius: {
458
- none: '0',
459
- sm: '0.125rem',
460
- md: '0.375rem',
461
- lg: '0.5rem',
462
- xl: '0.75rem',
463
- '2xl': '1rem',
464
- full: '9999px'
465
- },
466
- borderWidth: {
467
- none: '0',
468
- thin: '0.5px',
469
- normal: '1px',
470
- focus: '2px',
471
- thick: '3px',
472
- extraThick: '4px'
473
- },
474
- animation: {
475
- duration: {
476
- fast: '0.3s',
477
- normal: '0.2s',
478
- slow: '1.5s'
479
- },
480
- easing: {
481
- linear: 'linear',
482
- ease: 'ease',
483
- easeIn: 'ease-in',
484
- easeOut: 'ease-out',
485
- easeInOut: 'ease-in-out'
486
- },
487
- transforms: {
488
- hoverY: '-2px',
489
- offsetY: '10px',
490
- scale: '1.02'
491
- }
492
- },
493
- accessibility: {
494
- focusRing: {
495
- width: '3px',
496
- offset: '2px',
497
- color: 'var(--cs-colors-interactive-focus)'
498
- },
499
- outline: {
500
- offset: '2px'
501
- },
502
- highContrast: {
503
- borderWidth: '2px',
504
- outlineWidth: '4px'
505
- },
506
- disabled: {
507
- cursor: 'not-allowed',
508
- opacity: '0.7'
509
- }
510
- },
511
- print: {
512
- borderColor: '#000',
513
- textColor: '#000',
514
- textSecondaryColor: '#333',
515
- backgroundColor: 'transparent'
516
- },
517
- containerQuery: {
518
- small: '400px',
519
- medium: '600px',
520
- large: '800px'
521
- },
522
- container: {
523
- width: {
524
- small: '16rem',
525
- medium: '20rem',
526
- large: '24rem',
527
- xl: '32rem',
528
- full: '100%'
529
- }
530
- },
531
- shimmer: {
532
- alpha: '0.2',
533
- color: 'rgba(255, 255, 255, 0.2)'
534
- },
535
- meta: {
536
- name: 'Harvey Creative',
537
- description: 'Modern, vibrant design system with Poppins typography and warm orange color palette for creative projects',
538
- author: 'Harvey Design Team',
539
- version: '1.0.0',
540
- category: 'creative',
541
- tags: ['modern', 'vibrant', 'creative', 'poppins', 'orange', 'warm'],
542
- preview: '/themes/harvey-creative-preview.png',
543
- createdAt: '2024-12-01T00:00:00.000Z',
544
- updatedAt: '2024-12-01T00:00:00.000Z'
545
- },
546
-
547
- // NEW: Add dark mode overrides
548
- modes: {
549
- dark: {
550
- // Dark mode will be automatically generated by the CSS generator
551
- // using the adaptThemeForDarkMode function
552
- }
553
- }
554
- };