@latte-macchiat-io/latte-vanilla-components 0.0.190 → 0.0.192

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 (101) hide show
  1. package/README.md +16 -6
  2. package/package.json +4 -1
  3. package/src/components/Actions/index.tsx +20 -0
  4. package/src/components/Actions/styles.css.ts +54 -0
  5. package/src/components/Button/index.tsx +29 -0
  6. package/src/components/Button/stories.tsx +4 -22
  7. package/src/components/Button/styles.css.ts +131 -0
  8. package/src/components/Carousel/{Carousel.tsx → index.tsx} +18 -115
  9. package/src/components/Carousel/styles.css.ts +176 -0
  10. package/src/components/Columns/index.tsx +36 -0
  11. package/src/components/Columns/styles.css.ts +70 -0
  12. package/src/components/ConsentCookie/ConsentCookie.css.ts +1 -1
  13. package/src/components/ConsentCookie/ConsentCookie.tsx +3 -3
  14. package/src/components/Footer/index.tsx +21 -0
  15. package/src/components/Footer/styles.css.ts +33 -0
  16. package/src/components/Form/Form.css.ts +1 -1
  17. package/src/components/Form/Row/Row.css.ts +1 -1
  18. package/src/components/Form/TextField/Input/Input.css.ts +1 -1
  19. package/src/components/Form/TextField/Label/Label.css.ts +1 -1
  20. package/src/components/Form/TextField/TextField.css.ts +1 -1
  21. package/src/components/Form/TextField/Textarea/Textarea.css.ts +1 -1
  22. package/src/components/Header/index.tsx +53 -0
  23. package/src/components/Header/styles.css.ts +89 -0
  24. package/src/components/Heading/index.tsx +22 -0
  25. package/src/components/Heading/styles.css.ts +66 -0
  26. package/src/components/Heading/types.tsx +1 -0
  27. package/src/components/Icon/index.tsx +25 -0
  28. package/src/components/Icon/style.css.ts +11 -0
  29. package/src/components/KeyNumber/index.tsx +51 -0
  30. package/src/components/KeyNumber/styles.css.ts +76 -0
  31. package/src/components/LanguageSwitcher/index.tsx +80 -0
  32. package/src/components/LanguageSwitcher/{LanguageSwitcher.css.ts → styles.css.ts} +1 -1
  33. package/src/components/Logo/index.tsx +13 -0
  34. package/src/components/Logo/styles.css.ts +14 -0
  35. package/src/components/Main/index.tsx +17 -0
  36. package/src/components/Main/styles.css.ts +14 -0
  37. package/src/components/Modal/index.tsx +42 -0
  38. package/src/components/Modal/stories.tsx +14 -358
  39. package/src/components/Modal/styles.css.ts +90 -0
  40. package/src/components/Nav/index.tsx +22 -0
  41. package/src/components/Nav/styles.css.ts +30 -0
  42. package/src/components/NavLegal/index.tsx +17 -0
  43. package/src/components/NavLegal/styles.css.ts +20 -0
  44. package/src/components/NavSocial/index.tsx +32 -0
  45. package/src/components/NavSocial/styles.css.ts +33 -0
  46. package/src/components/Section/index.tsx +20 -0
  47. package/src/components/Section/stories.tsx +5 -57
  48. package/src/components/Section/styles.css.ts +106 -0
  49. package/src/components/ThemeTest/ThemeTest.css.ts +11 -0
  50. package/src/components/ThemeTest/ThemeTest.tsx +12 -0
  51. package/src/components/ThemeToggle/ThemeToggle.tsx +30 -0
  52. package/src/components/Video/index.tsx +117 -0
  53. package/src/components/Video/styles.css.ts +200 -0
  54. package/src/index.ts +29 -41
  55. package/src/styles/mediaqueries.ts +2 -0
  56. package/src/styles/sprinkles.css.ts +11 -8
  57. package/src/theme/baseThemeValues.ts +1235 -0
  58. package/src/theme/contract.css.ts +676 -0
  59. package/src/{themes → theme}/createTheme.ts +40 -1
  60. package/src/theme/default.css.ts +10 -0
  61. package/src/utils/combineResponsive.ts +9 -0
  62. package/src/utils/generateResponsiveMedia.ts +19 -0
  63. package/src/components/Actions/Actions.css.ts +0 -113
  64. package/src/components/Actions/Actions.tsx +0 -132
  65. package/src/components/Button/Button.css.ts +0 -119
  66. package/src/components/Button/Button.tsx +0 -132
  67. package/src/components/Carousel/Carousel.css.ts +0 -179
  68. package/src/components/Columns/Columns.css.ts +0 -185
  69. package/src/components/Columns/Columns.tsx +0 -142
  70. package/src/components/Footer/Footer.css.ts +0 -108
  71. package/src/components/Footer/Footer.tsx +0 -130
  72. package/src/components/Header/Header.css.ts +0 -111
  73. package/src/components/Header/Header.tsx +0 -158
  74. package/src/components/Icon/Icon.css.ts +0 -101
  75. package/src/components/Icon/Icon.tsx +0 -159
  76. package/src/components/KeyNumber/KeyNumber.css.ts +0 -158
  77. package/src/components/KeyNumber/KeyNumber.tsx +0 -166
  78. package/src/components/LanguageSwitcher/LanguageSwitcher.tsx +0 -168
  79. package/src/components/Logo/Logo.css.ts +0 -98
  80. package/src/components/Logo/Logo.tsx +0 -137
  81. package/src/components/Main/Main.css.ts +0 -62
  82. package/src/components/Main/Main.tsx +0 -130
  83. package/src/components/Modal/Modal.css.ts +0 -203
  84. package/src/components/Modal/Modal.tsx +0 -194
  85. package/src/components/Nav/Nav.css.ts +0 -123
  86. package/src/components/Nav/Nav.tsx +0 -130
  87. package/src/components/NavLegal/NavLegal.css.ts +0 -121
  88. package/src/components/NavLegal/NavLegal.tsx +0 -133
  89. package/src/components/NavSocial/NavSocial.css.ts +0 -121
  90. package/src/components/NavSocial/NavSocial.tsx +0 -169
  91. package/src/components/Section/Section.css.ts +0 -101
  92. package/src/components/Section/Section.tsx +0 -130
  93. package/src/components/Video/Video.css.ts +0 -210
  94. package/src/components/Video/Video.tsx +0 -243
  95. package/src/components/VideoFullWidth/VideoFullWidth.css.ts +0 -50
  96. package/src/components/VideoFullWidth/VideoFullWidth.tsx +0 -152
  97. package/src/components/VideoFullWidth/export.tsx +0 -2
  98. package/src/themes/baseThemeValues.ts +0 -160
  99. package/src/themes/contract.css.ts +0 -83
  100. package/src/types/withClassName.ts +0 -4
  101. /package/src/{utils → components/ConsentCookie}/cookie.ts +0 -0
@@ -0,0 +1,1235 @@
1
+ import { breakpoints } from '../styles/mediaqueries';
2
+
3
+ // Base theme values that can be imported and extended by apps
4
+ export const baseLightTheme = {
5
+ colors: {
6
+ primary: '#FF7377',
7
+ secondary: '#FCEFE6',
8
+ background: '#ffffff',
9
+ text: '#000000',
10
+ textSecondary: '#666666',
11
+ border: '#e1e1e1',
12
+ accent: '',
13
+ surface: '',
14
+ textLight: '',
15
+ error: '',
16
+ warning: '',
17
+ success: '',
18
+ info: '',
19
+ },
20
+ space: {
21
+ none: '8px',
22
+ xs: '8px',
23
+ sm: '8px',
24
+ md: '8px',
25
+ lg: '8px',
26
+ xl: '8px',
27
+ '2xl': '8px',
28
+ },
29
+ radii: {
30
+ none: '8px',
31
+ sm: '8px',
32
+ md: '8px',
33
+ lg: '8px',
34
+ xl: '8px',
35
+ full: '8px',
36
+ },
37
+ fonts: {
38
+ body: 'system-ui, sans-serif',
39
+ heading: 'system-ui, sans-serif',
40
+ mono: '"Fira Code", monospace',
41
+ },
42
+ maxWidth: breakpoints['2xl'],
43
+ fontSizes: {
44
+ xs: '13px',
45
+ sm: '15px',
46
+ md: '16px',
47
+ lg: '20px',
48
+ xl: '25px',
49
+ '2xl': '30px',
50
+ '3xl': '40px',
51
+ '4xl': '50px',
52
+ },
53
+ fontWeights: {
54
+ light: '',
55
+ normal: '',
56
+ medium: '',
57
+ semibold: '',
58
+ bold: '',
59
+ },
60
+ lineHeights: {
61
+ tight: '',
62
+ normal: '',
63
+ relaxed: '',
64
+ },
65
+ shadows: {
66
+ none: '',
67
+ sm: '',
68
+ md: '',
69
+ lg: '',
70
+ xl: '',
71
+ },
72
+ global: {
73
+ paddingRight: {
74
+ mobile: '15px',
75
+ sm: '15px',
76
+ md: '30px',
77
+ lg: '30px',
78
+ xl: '50px',
79
+ '2xl': '50px',
80
+ },
81
+ paddingRightNeg: {
82
+ mobile: '-15px',
83
+ sm: '-15px',
84
+ md: '-30px',
85
+ lg: '-30px',
86
+ xl: '-50px',
87
+ '2xl': '-50px',
88
+ },
89
+ paddingLeft: {
90
+ mobile: '15px',
91
+ sm: '15px',
92
+ md: '30px',
93
+ lg: '30px',
94
+ xl: '50px',
95
+ '2xl': '50px',
96
+ },
97
+ paddingLeftNeg: {
98
+ mobile: '-15px',
99
+ sm: '-15px',
100
+ md: '-30px',
101
+ lg: '-30px',
102
+ xl: '-50px',
103
+ '2xl': '-50px',
104
+ },
105
+ },
106
+
107
+ main: {
108
+ minHeight: '45vh',
109
+ backgroundColor: '#FCEFE6',
110
+ },
111
+
112
+ section: {
113
+ gap: {
114
+ mobile: '15px',
115
+ sm: '15px',
116
+ md: '30px',
117
+ lg: '30px',
118
+ xl: '50px',
119
+ '2xl': '50px',
120
+ },
121
+ paddingTop: {
122
+ mobile: '15px',
123
+ sm: '15px',
124
+ md: '30px',
125
+ lg: '30px',
126
+ xl: '50px',
127
+ '2xl': '50px',
128
+ },
129
+ paddingBottom: {
130
+ mobile: '15px',
131
+ sm: '15px',
132
+ md: '30px',
133
+ lg: '30px',
134
+ xl: '50px',
135
+ '2xl': '50px',
136
+ },
137
+ },
138
+
139
+ header: {
140
+ fontSize: '1.2em',
141
+ backgroundColor: '#FF7377',
142
+ height: {
143
+ mobile: '15px',
144
+ sm: '15px',
145
+ md: '30px',
146
+ lg: '30px',
147
+ xl: '50px',
148
+ '2xl': '50px',
149
+ },
150
+ gap: {
151
+ mobile: '15px',
152
+ sm: '15px',
153
+ md: '30px',
154
+ lg: '30px',
155
+ xl: '50px',
156
+ '2xl': '50px',
157
+ },
158
+ paddingTop: {
159
+ mobile: '15px',
160
+ sm: '15px',
161
+ md: '30px',
162
+ lg: '30px',
163
+ xl: '50px',
164
+ '2xl': '50px',
165
+ },
166
+ paddingBottom: {
167
+ mobile: '15px',
168
+ sm: '15px',
169
+ md: '30px',
170
+ lg: '30px',
171
+ xl: '50px',
172
+ '2xl': '50px',
173
+ },
174
+ },
175
+
176
+ footer: {
177
+ fontSize: '0.8em',
178
+ backgroundColor: '#FF7377',
179
+ height: {
180
+ mobile: '15px',
181
+ sm: '15px',
182
+ md: '30px',
183
+ lg: '30px',
184
+ xl: '50px',
185
+ '2xl': '50px',
186
+ },
187
+ gap: {
188
+ mobile: '15px',
189
+ sm: '15px',
190
+ md: '30px',
191
+ lg: '30px',
192
+ xl: '50px',
193
+ '2xl': '50px',
194
+ },
195
+ paddingTop: {
196
+ mobile: '15px',
197
+ sm: '15px',
198
+ md: '30px',
199
+ lg: '30px',
200
+ xl: '50px',
201
+ '2xl': '50px',
202
+ },
203
+ paddingBottom: {
204
+ mobile: '15px',
205
+ sm: '15px',
206
+ md: '30px',
207
+ lg: '30px',
208
+ xl: '50px',
209
+ '2xl': '50px',
210
+ },
211
+ },
212
+
213
+ actions: {
214
+ gap: {
215
+ mobile: '15px',
216
+ sm: '15px',
217
+ md: '30px',
218
+ lg: '30px',
219
+ xl: '50px',
220
+ '2xl': '50px',
221
+ },
222
+ paddingTop: {
223
+ mobile: '15px',
224
+ sm: '15px',
225
+ md: '30px',
226
+ lg: '30px',
227
+ xl: '50px',
228
+ '2xl': '50px',
229
+ },
230
+ paddingBottom: {
231
+ mobile: '15px',
232
+ sm: '15px',
233
+ md: '30px',
234
+ lg: '30px',
235
+ xl: '50px',
236
+ '2xl': '50px',
237
+ },
238
+ },
239
+
240
+ button: {
241
+ minWidth: '100',
242
+ fontWeight: '500',
243
+ letterSpacing: '0.2',
244
+ borderRadius: '15px',
245
+ fontFamily: 'system-ui, sans-serif',
246
+ transition: 'all 0.3s ease-in-out',
247
+
248
+ variant: {
249
+ primary: {
250
+ color: '#FF7377',
251
+ backgroundColor: '#FF7377',
252
+ },
253
+ secondary: {
254
+ color: '#FF7377',
255
+ backgroundColor: '#FF7377',
256
+ },
257
+ },
258
+
259
+ size: {
260
+ small: {
261
+ paddingTop: {
262
+ mobile: '5px',
263
+ sm: '5px',
264
+ md: '5px',
265
+ lg: '5px',
266
+ xl: '5px',
267
+ '2xl': '5px',
268
+ },
269
+ paddingLeft: {
270
+ mobile: '5px',
271
+ sm: '5px',
272
+ md: '5px',
273
+ lg: '5px',
274
+ xl: '5px',
275
+ '2xl': '5px',
276
+ },
277
+ paddingRight: {
278
+ mobile: '5px',
279
+ sm: '5px',
280
+ md: '5px',
281
+ lg: '5px',
282
+ xl: '5px',
283
+ '2xl': '5px',
284
+ },
285
+ paddingBottom: {
286
+ mobile: '5px',
287
+ sm: '5px',
288
+ md: '5px',
289
+ lg: '5px',
290
+ xl: '5px',
291
+ '2xl': '5px',
292
+ },
293
+ },
294
+ medium: {
295
+ paddingTop: {
296
+ mobile: '5px',
297
+ sm: '5px',
298
+ md: '10px',
299
+ lg: '10px',
300
+ xl: '15px',
301
+ '2xl': '15px',
302
+ },
303
+ paddingLeft: {
304
+ mobile: '5px',
305
+ sm: '5px',
306
+ md: '10px',
307
+ lg: '10px',
308
+ xl: '15px',
309
+ '2xl': '15px',
310
+ },
311
+ paddingRight: {
312
+ mobile: '5px',
313
+ sm: '5px',
314
+ md: '10px',
315
+ lg: '10px',
316
+ xl: '15px',
317
+ '2xl': '15px',
318
+ },
319
+ paddingBottom: {
320
+ mobile: '5px',
321
+ sm: '5px',
322
+ md: '10px',
323
+ lg: '10px',
324
+ xl: '15px',
325
+ '2xl': '15px',
326
+ },
327
+ },
328
+ large: {
329
+ paddingTop: {
330
+ mobile: '10px',
331
+ sm: '10px',
332
+ md: '15px',
333
+ lg: '15px',
334
+ xl: '20px',
335
+ '2xl': '20px',
336
+ },
337
+ paddingLeft: {
338
+ mobile: '10px',
339
+ sm: '10px',
340
+ md: '15px',
341
+ lg: '15px',
342
+ xl: '20px',
343
+ '2xl': '20px',
344
+ },
345
+ paddingRight: {
346
+ mobile: '10px',
347
+ sm: '10px',
348
+ md: '15px',
349
+ lg: '15px',
350
+ xl: '20px',
351
+ '2xl': '20px',
352
+ },
353
+ paddingBottom: {
354
+ mobile: '10px',
355
+ sm: '10px',
356
+ md: '15px',
357
+ lg: '15px',
358
+ xl: '20px',
359
+ '2xl': '20px',
360
+ },
361
+ },
362
+ },
363
+ },
364
+
365
+ icon: {
366
+ color: '#FF7377',
367
+ },
368
+
369
+ columns: {
370
+ gap: {
371
+ mobile: '15px',
372
+ sm: '15px',
373
+ md: '30px',
374
+ lg: '30px',
375
+ xl: '50px',
376
+ '2xl': '50px',
377
+ },
378
+ flex: {
379
+ mobile: '15px',
380
+ sm: '15px',
381
+ md: '30px',
382
+ lg: '30px',
383
+ xl: '50px',
384
+ '2xl': '50px',
385
+ },
386
+ maxWidth: {
387
+ mobile: '15px',
388
+ sm: '15px',
389
+ md: '30px',
390
+ lg: '30px',
391
+ xl: '50px',
392
+ '2xl': '50px',
393
+ },
394
+ },
395
+
396
+ modal: {
397
+ border: 'none',
398
+ borderRadius: '30px',
399
+ backgroundColor: '#000000',
400
+
401
+ overlayBlur: '0',
402
+ overlayBackgroundColor: '#000000',
403
+
404
+ closeButtonRightPosition: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
405
+ closeButtonTopPosition: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
406
+
407
+ gap: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
408
+ width: { mobile: '100%', sm: '200px', md: '600px', lg: '600px', xl: '800px', '2xl': '800px' },
409
+ paddingTop: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
410
+ paddingBottom: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
411
+ },
412
+
413
+ keyNumber: {
414
+ fontSize: {
415
+ large: '2.5em',
416
+ xlarge: '4em',
417
+ },
418
+ paddingTop: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
419
+ paddingBottom: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
420
+ },
421
+
422
+ nav: {
423
+ gap: {
424
+ mobile: '5px',
425
+ sm: '5px',
426
+ md: '10px',
427
+ lg: '10px',
428
+ xl: '15px',
429
+ '2xl': '15px',
430
+ },
431
+ },
432
+
433
+ navLegal: {
434
+ gap: {
435
+ mobile: '5px',
436
+ sm: '5px',
437
+ md: '10px',
438
+ lg: '10px',
439
+ xl: '15px',
440
+ '2xl': '15px',
441
+ },
442
+ },
443
+
444
+ navSocial: {
445
+ transition: 'all 0.5s ease-in-out',
446
+ colors: {
447
+ defaultIcon: '#FF7377',
448
+ defaultIconHover: '#000000',
449
+ },
450
+ gap: {
451
+ mobile: '5px',
452
+ sm: '5px',
453
+ md: '10px',
454
+ lg: '10px',
455
+ xl: '15px',
456
+ '2xl': '15px',
457
+ },
458
+ },
459
+
460
+ video: {
461
+ playButton: {
462
+ border: 'none',
463
+ borderRadius: '1000px',
464
+ iconColor: '#FF7377',
465
+ backgroundColor: '#FF7377',
466
+ width: {
467
+ mobile: '50px',
468
+ sm: '50px',
469
+ md: '50px',
470
+ lg: '75px',
471
+ xl: '75px',
472
+ '2xl': '75px',
473
+ },
474
+ height: {
475
+ mobile: '50px',
476
+ sm: '50px',
477
+ md: '50px',
478
+ lg: '75px',
479
+ xl: '75px',
480
+ '2xl': '75px',
481
+ },
482
+ },
483
+ pauseButton: {
484
+ border: 'none',
485
+ borderRadius: '1000px',
486
+ iconColor: '#FF7377',
487
+ backgroundColor: '#FF7377',
488
+ width: {
489
+ mobile: '50px',
490
+ sm: '50px',
491
+ md: '50px',
492
+ lg: '75px',
493
+ xl: '75px',
494
+ '2xl': '75px',
495
+ },
496
+ height: {
497
+ mobile: '50px',
498
+ sm: '50px',
499
+ md: '50px',
500
+ lg: '75px',
501
+ xl: '75px',
502
+ '2xl': '75px',
503
+ },
504
+ },
505
+ soundButton: {
506
+ border: 'none',
507
+ borderRadius: '1000px',
508
+ iconColor: '#FF7377',
509
+ backgroundColor: '#FF7377',
510
+ width: {
511
+ mobile: '50px',
512
+ sm: '50px',
513
+ md: '50px',
514
+ lg: '75px',
515
+ xl: '75px',
516
+ '2xl': '75px',
517
+ },
518
+ height: {
519
+ mobile: '50px',
520
+ sm: '50px',
521
+ md: '50px',
522
+ lg: '75px',
523
+ xl: '75px',
524
+ '2xl': '75px',
525
+ },
526
+ },
527
+ closeButton: {
528
+ border: 'none',
529
+ borderRadius: '1000px',
530
+ iconColor: '#FF7377',
531
+ backgroundColor: '#FF7377',
532
+ width: {
533
+ mobile: '50px',
534
+ sm: '50px',
535
+ md: '50px',
536
+ lg: '75px',
537
+ xl: '75px',
538
+ '2xl': '75px',
539
+ },
540
+ height: {
541
+ mobile: '50px',
542
+ sm: '50px',
543
+ md: '50px',
544
+ lg: '75px',
545
+ xl: '75px',
546
+ '2xl': '75px',
547
+ },
548
+ },
549
+ },
550
+
551
+ carousel: {
552
+ iconColor: '#FF7377',
553
+ gap: {
554
+ mobile: '15',
555
+ sm: '15',
556
+ md: '30',
557
+ lg: '30',
558
+ xl: '50',
559
+ '2xl': '50',
560
+ },
561
+ nav: {
562
+ borderRadius: '1000px',
563
+ backgroundColor: '#FF7377',
564
+ width: {
565
+ mobile: '15',
566
+ sm: '15',
567
+ md: '30',
568
+ lg: '30',
569
+ xl: '50',
570
+ '2xl': '50',
571
+ },
572
+ height: {
573
+ mobile: '15',
574
+ sm: '15',
575
+ md: '30',
576
+ lg: '30',
577
+ xl: '50',
578
+ '2xl': '50',
579
+ },
580
+ },
581
+ bullet: {
582
+ bottom: {
583
+ mobile: '15px',
584
+ sm: '15px',
585
+ md: '30px',
586
+ lg: '30px',
587
+ xl: '50px',
588
+ '2xl': '50px',
589
+ },
590
+ borderRadius: '1000px',
591
+ backgroundColor: '#FF7377',
592
+ activeBackgroundColor: '#FF7377',
593
+ gap: {
594
+ mobile: '15',
595
+ sm: '15',
596
+ md: '30',
597
+ lg: '30',
598
+ xl: '50',
599
+ '2xl': '50',
600
+ },
601
+ width: {
602
+ mobile: '15',
603
+ sm: '15',
604
+ md: '30',
605
+ lg: '30',
606
+ xl: '50',
607
+ '2xl': '50',
608
+ },
609
+ height: {
610
+ mobile: '15',
611
+ sm: '15',
612
+ md: '30',
613
+ lg: '30',
614
+ xl: '50',
615
+ '2xl': '50',
616
+ },
617
+ },
618
+ },
619
+ };
620
+
621
+ export const baseDarkTheme = {
622
+ colors: {
623
+ primary: '#1a73e8',
624
+ secondary: '#374151',
625
+ background: '#111827',
626
+ text: '#ffffff',
627
+ textSecondary: '#9ca3af',
628
+ border: '#374151',
629
+ accent: '',
630
+ surface: '',
631
+ textLight: '',
632
+ error: '',
633
+ warning: '',
634
+ success: '',
635
+ info: '',
636
+ },
637
+ space: {
638
+ none: '8px',
639
+ xs: '8px',
640
+ sm: '8px',
641
+ md: '8px',
642
+ lg: '8px',
643
+ xl: '8px',
644
+ '2xl': '8px',
645
+ },
646
+ radii: {
647
+ none: '8px',
648
+ sm: '8px',
649
+ md: '8px',
650
+ lg: '8px',
651
+ xl: '8px',
652
+ full: '8px',
653
+ },
654
+ fonts: {
655
+ body: 'system-ui, sans-serif',
656
+ heading: 'system-ui, sans-serif',
657
+ mono: '"Fira Code", monospace',
658
+ },
659
+ maxWidth: breakpoints['2xl'],
660
+ fontSizes: {
661
+ xs: '13px',
662
+ sm: '15px',
663
+ md: '16px',
664
+ lg: '20px',
665
+ xl: '25px',
666
+ '2xl': '30px',
667
+ '3xl': '40px',
668
+ '4xl': '50px',
669
+ },
670
+ fontWeights: {
671
+ light: '',
672
+ normal: '',
673
+ medium: '',
674
+ semibold: '',
675
+ bold: '',
676
+ },
677
+ lineHeights: {
678
+ tight: '',
679
+ normal: '',
680
+ relaxed: '',
681
+ },
682
+ shadows: {
683
+ none: '',
684
+ sm: '',
685
+ md: '',
686
+ lg: '',
687
+ xl: '',
688
+ },
689
+ global: {
690
+ paddingRight: {
691
+ mobile: '15px',
692
+ sm: '15px',
693
+ md: '30px',
694
+ lg: '30px',
695
+ xl: '50px',
696
+ '2xl': '50px',
697
+ },
698
+ paddingRightNeg: {
699
+ mobile: '-15px',
700
+ sm: '-15px',
701
+ md: '-30px',
702
+ lg: '-30px',
703
+ xl: '-50px',
704
+ '2xl': '-50px',
705
+ },
706
+ paddingLeft: {
707
+ mobile: '15px',
708
+ sm: '15px',
709
+ md: '30px',
710
+ lg: '30px',
711
+ xl: '50px',
712
+ '2xl': '50px',
713
+ },
714
+ paddingLeftNeg: {
715
+ mobile: '-15px',
716
+ sm: '-15px',
717
+ md: '-30px',
718
+ lg: '-30px',
719
+ xl: '-50px',
720
+ '2xl': '-50px',
721
+ },
722
+ },
723
+ main: {
724
+ minHeight: '45vh',
725
+ backgroundColor: '#666666',
726
+ },
727
+
728
+ section: {
729
+ gap: {
730
+ mobile: '15px',
731
+ sm: '15px',
732
+ md: '30px',
733
+ lg: '30px',
734
+ xl: '50px',
735
+ '2xl': '50px',
736
+ },
737
+ paddingTop: {
738
+ mobile: '15px',
739
+ sm: '15px',
740
+ md: '30px',
741
+ lg: '30px',
742
+ xl: '50px',
743
+ '2xl': '50px',
744
+ },
745
+ paddingBottom: {
746
+ mobile: '15px',
747
+ sm: '15px',
748
+ md: '30px',
749
+ lg: '30px',
750
+ xl: '50px',
751
+ '2xl': '50px',
752
+ },
753
+ },
754
+
755
+ header: {
756
+ fontSize: '1.2em',
757
+ backgroundColor: '#FF7377',
758
+ height: {
759
+ mobile: '15px',
760
+ sm: '15px',
761
+ md: '30px',
762
+ lg: '30px',
763
+ xl: '50px',
764
+ '2xl': '50px',
765
+ },
766
+ gap: {
767
+ mobile: '15px',
768
+ sm: '15px',
769
+ md: '30px',
770
+ lg: '30px',
771
+ xl: '50px',
772
+ '2xl': '50px',
773
+ },
774
+ paddingTop: {
775
+ mobile: '15px',
776
+ sm: '15px',
777
+ md: '30px',
778
+ lg: '30px',
779
+ xl: '50px',
780
+ '2xl': '50px',
781
+ },
782
+ paddingBottom: {
783
+ mobile: '15px',
784
+ sm: '15px',
785
+ md: '30px',
786
+ lg: '30px',
787
+ xl: '50px',
788
+ '2xl': '50px',
789
+ },
790
+ },
791
+
792
+ footer: {
793
+ fontSize: '0.8em',
794
+ backgroundColor: '#FF7377',
795
+ height: {
796
+ mobile: '15px',
797
+ sm: '15px',
798
+ md: '30px',
799
+ lg: '30px',
800
+ xl: '50px',
801
+ '2xl': '50px',
802
+ },
803
+ gap: {
804
+ mobile: '15px',
805
+ sm: '15px',
806
+ md: '30px',
807
+ lg: '30px',
808
+ xl: '50px',
809
+ '2xl': '50px',
810
+ },
811
+ paddingTop: {
812
+ mobile: '15px',
813
+ sm: '15px',
814
+ md: '30px',
815
+ lg: '30px',
816
+ xl: '50px',
817
+ '2xl': '50px',
818
+ },
819
+ paddingBottom: {
820
+ mobile: '15px',
821
+ sm: '15px',
822
+ md: '30px',
823
+ lg: '30px',
824
+ xl: '50px',
825
+ '2xl': '50px',
826
+ },
827
+ },
828
+
829
+ columns: {
830
+ gap: {
831
+ mobile: '15px',
832
+ sm: '15px',
833
+ md: '30px',
834
+ lg: '30px',
835
+ xl: '50px',
836
+ '2xl': '50px',
837
+ },
838
+ flex: {
839
+ mobile: '15px',
840
+ sm: '15px',
841
+ md: '30px',
842
+ lg: '30px',
843
+ xl: '50px',
844
+ '2xl': '50px',
845
+ },
846
+ maxWidth: {
847
+ mobile: '15px',
848
+ sm: '15px',
849
+ md: '30px',
850
+ lg: '30px',
851
+ xl: '50px',
852
+ '2xl': '50px',
853
+ },
854
+ },
855
+
856
+ button: {
857
+ minWidth: '100',
858
+ fontWeight: '500',
859
+ letterSpacing: '0.2',
860
+ borderRadius: '15px',
861
+ fontFamily: 'system-ui, sans-serif',
862
+ transition: 'all 0.3s ease-in-out',
863
+
864
+ variant: {
865
+ primary: {
866
+ color: '#FF7377',
867
+ backgroundColor: '#FF7377',
868
+ },
869
+ secondary: {
870
+ color: '#FF7377',
871
+ backgroundColor: '#FF7377',
872
+ },
873
+ },
874
+
875
+ size: {
876
+ small: {
877
+ paddingTop: {
878
+ mobile: '5px',
879
+ sm: '5px',
880
+ md: '5px',
881
+ lg: '5px',
882
+ xl: '5px',
883
+ '2xl': '5px',
884
+ },
885
+ paddingLeft: {
886
+ mobile: '5px',
887
+ sm: '5px',
888
+ md: '5px',
889
+ lg: '5px',
890
+ xl: '5px',
891
+ '2xl': '5px',
892
+ },
893
+ paddingRight: {
894
+ mobile: '5px',
895
+ sm: '5px',
896
+ md: '5px',
897
+ lg: '5px',
898
+ xl: '5px',
899
+ '2xl': '5px',
900
+ },
901
+ paddingBottom: {
902
+ mobile: '5px',
903
+ sm: '5px',
904
+ md: '5px',
905
+ lg: '5px',
906
+ xl: '5px',
907
+ '2xl': '5px',
908
+ },
909
+ },
910
+ medium: {
911
+ paddingTop: {
912
+ mobile: '5px',
913
+ sm: '5px',
914
+ md: '10px',
915
+ lg: '10px',
916
+ xl: '15px',
917
+ '2xl': '15px',
918
+ },
919
+ paddingLeft: {
920
+ mobile: '5px',
921
+ sm: '5px',
922
+ md: '10px',
923
+ lg: '10px',
924
+ xl: '15px',
925
+ '2xl': '15px',
926
+ },
927
+ paddingRight: {
928
+ mobile: '5px',
929
+ sm: '5px',
930
+ md: '10px',
931
+ lg: '10px',
932
+ xl: '15px',
933
+ '2xl': '15px',
934
+ },
935
+ paddingBottom: {
936
+ mobile: '5px',
937
+ sm: '5px',
938
+ md: '10px',
939
+ lg: '10px',
940
+ xl: '15px',
941
+ '2xl': '15px',
942
+ },
943
+ },
944
+ large: {
945
+ paddingTop: {
946
+ mobile: '10px',
947
+ sm: '10px',
948
+ md: '15px',
949
+ lg: '15px',
950
+ xl: '20px',
951
+ '2xl': '20px',
952
+ },
953
+ paddingLeft: {
954
+ mobile: '10px',
955
+ sm: '10px',
956
+ md: '15px',
957
+ lg: '15px',
958
+ xl: '20px',
959
+ '2xl': '20px',
960
+ },
961
+ paddingRight: {
962
+ mobile: '10px',
963
+ sm: '10px',
964
+ md: '15px',
965
+ lg: '15px',
966
+ xl: '20px',
967
+ '2xl': '20px',
968
+ },
969
+ paddingBottom: {
970
+ mobile: '10px',
971
+ sm: '10px',
972
+ md: '15px',
973
+ lg: '15px',
974
+ xl: '20px',
975
+ '2xl': '20px',
976
+ },
977
+ },
978
+ },
979
+ },
980
+
981
+ icon: {
982
+ color: '#FF7377',
983
+ },
984
+
985
+ actions: {
986
+ gap: {
987
+ mobile: '15px',
988
+ sm: '15px',
989
+ md: '30px',
990
+ lg: '30px',
991
+ xl: '50px',
992
+ '2xl': '50px',
993
+ },
994
+ paddingTop: {
995
+ mobile: '15px',
996
+ sm: '15px',
997
+ md: '30px',
998
+ lg: '30px',
999
+ xl: '50px',
1000
+ '2xl': '50px',
1001
+ },
1002
+ paddingBottom: {
1003
+ mobile: '15px',
1004
+ sm: '15px',
1005
+ md: '30px',
1006
+ lg: '30px',
1007
+ xl: '50px',
1008
+ '2xl': '50px',
1009
+ },
1010
+ },
1011
+
1012
+ modal: {
1013
+ border: 'none',
1014
+ borderRadius: '30px',
1015
+ backgroundColor: '#000000',
1016
+
1017
+ overlayBlur: '0',
1018
+ overlayBackgroundColor: '#000000',
1019
+
1020
+ closeButtonRightPosition: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
1021
+ closeButtonTopPosition: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
1022
+
1023
+ gap: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
1024
+ width: { mobile: '100%', sm: '200px', md: '600px', lg: '600px', xl: '800px', '2xl': '800px' },
1025
+ paddingTop: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
1026
+ paddingBottom: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
1027
+ },
1028
+
1029
+ keyNumber: {
1030
+ fontSize: {
1031
+ large: '2.5em',
1032
+ xlarge: '4em',
1033
+ },
1034
+ paddingTop: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
1035
+ paddingBottom: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
1036
+ },
1037
+
1038
+ nav: {
1039
+ gap: {
1040
+ mobile: '5px',
1041
+ sm: '5px',
1042
+ md: '10px',
1043
+ lg: '10px',
1044
+ xl: '15px',
1045
+ '2xl': '15px',
1046
+ },
1047
+ },
1048
+
1049
+ navLegal: {
1050
+ gap: {
1051
+ mobile: '5px',
1052
+ sm: '5px',
1053
+ md: '10px',
1054
+ lg: '10px',
1055
+ xl: '15px',
1056
+ '2xl': '15px',
1057
+ },
1058
+ },
1059
+
1060
+ navSocial: {
1061
+ transition: 'all 0.5s ease-in-out',
1062
+ colors: {
1063
+ defaultIcon: '#FF7377',
1064
+ defaultIconHover: '#000000',
1065
+ },
1066
+ gap: {
1067
+ mobile: '5px',
1068
+ sm: '5px',
1069
+ md: '10px',
1070
+ lg: '10px',
1071
+ xl: '15px',
1072
+ '2xl': '15px',
1073
+ },
1074
+ },
1075
+
1076
+ video: {
1077
+ playButton: {
1078
+ border: 'none',
1079
+ borderRadius: '1000px',
1080
+ iconColor: '#FF7377',
1081
+ backgroundColor: '#FF7377',
1082
+ width: {
1083
+ mobile: '50px',
1084
+ sm: '50px',
1085
+ md: '50px',
1086
+ lg: '75px',
1087
+ xl: '75px',
1088
+ '2xl': '75px',
1089
+ },
1090
+ height: {
1091
+ mobile: '50px',
1092
+ sm: '50px',
1093
+ md: '50px',
1094
+ lg: '75px',
1095
+ xl: '75px',
1096
+ '2xl': '75px',
1097
+ },
1098
+ },
1099
+ pauseButton: {
1100
+ border: 'none',
1101
+ borderRadius: '1000px',
1102
+ iconColor: '#FF7377',
1103
+ backgroundColor: '#FF7377',
1104
+ width: {
1105
+ mobile: '50px',
1106
+ sm: '50px',
1107
+ md: '50px',
1108
+ lg: '75px',
1109
+ xl: '75px',
1110
+ '2xl': '75px',
1111
+ },
1112
+ height: {
1113
+ mobile: '50px',
1114
+ sm: '50px',
1115
+ md: '50px',
1116
+ lg: '75px',
1117
+ xl: '75px',
1118
+ '2xl': '75px',
1119
+ },
1120
+ },
1121
+ soundButton: {
1122
+ border: 'none',
1123
+ borderRadius: '1000px',
1124
+ iconColor: '#FF7377',
1125
+ backgroundColor: '#FF7377',
1126
+ width: {
1127
+ mobile: '50px',
1128
+ sm: '50px',
1129
+ md: '50px',
1130
+ lg: '75px',
1131
+ xl: '75px',
1132
+ '2xl': '75px',
1133
+ },
1134
+ height: {
1135
+ mobile: '50px',
1136
+ sm: '50px',
1137
+ md: '50px',
1138
+ lg: '75px',
1139
+ xl: '75px',
1140
+ '2xl': '75px',
1141
+ },
1142
+ },
1143
+ closeButton: {
1144
+ border: 'none',
1145
+ borderRadius: '1000px',
1146
+ iconColor: '#FF7377',
1147
+ backgroundColor: '#FF7377',
1148
+ width: {
1149
+ mobile: '50px',
1150
+ sm: '50px',
1151
+ md: '50px',
1152
+ lg: '75px',
1153
+ xl: '75px',
1154
+ '2xl': '75px',
1155
+ },
1156
+ height: {
1157
+ mobile: '50px',
1158
+ sm: '50px',
1159
+ md: '50px',
1160
+ lg: '75px',
1161
+ xl: '75px',
1162
+ '2xl': '75px',
1163
+ },
1164
+ },
1165
+ },
1166
+
1167
+ carousel: {
1168
+ iconColor: '#FF7377',
1169
+ gap: {
1170
+ mobile: '15',
1171
+ sm: '15',
1172
+ md: '30',
1173
+ lg: '30',
1174
+ xl: '50',
1175
+ '2xl': '50',
1176
+ },
1177
+ nav: {
1178
+ borderRadius: '1000px',
1179
+ backgroundColor: '#FF7377',
1180
+ width: {
1181
+ mobile: '15',
1182
+ sm: '15',
1183
+ md: '30',
1184
+ lg: '30',
1185
+ xl: '50',
1186
+ '2xl': '50',
1187
+ },
1188
+ height: {
1189
+ mobile: '15',
1190
+ sm: '15',
1191
+ md: '30',
1192
+ lg: '30',
1193
+ xl: '50',
1194
+ '2xl': '50',
1195
+ },
1196
+ },
1197
+ bullet: {
1198
+ borderRadius: '1000px',
1199
+ bottom: {
1200
+ mobile: '15px',
1201
+ sm: '15px',
1202
+ md: '30px',
1203
+ lg: '30px',
1204
+ xl: '50px',
1205
+ '2xl': '50px',
1206
+ },
1207
+ backgroundColor: '#FF7377',
1208
+ activeBackgroundColor: '#FF7377',
1209
+ gap: {
1210
+ mobile: '15',
1211
+ sm: '15',
1212
+ md: '30',
1213
+ lg: '30',
1214
+ xl: '50',
1215
+ '2xl': '50',
1216
+ },
1217
+ width: {
1218
+ mobile: '15',
1219
+ sm: '15',
1220
+ md: '30',
1221
+ lg: '30',
1222
+ xl: '50',
1223
+ '2xl': '50',
1224
+ },
1225
+ height: {
1226
+ mobile: '15',
1227
+ sm: '15',
1228
+ md: '30',
1229
+ lg: '30',
1230
+ xl: '50',
1231
+ '2xl': '50',
1232
+ },
1233
+ },
1234
+ },
1235
+ };