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