@latte-macchiat-io/latte-vanilla-components 0.0.201 → 0.0.203

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 (71) hide show
  1. package/package.json +1 -1
  2. package/src/components/Actions/index.tsx +3 -6
  3. package/src/components/Actions/stories.tsx +7 -1
  4. package/src/components/Button/export.tsx +2 -5
  5. package/src/components/Button/index.tsx +19 -14
  6. package/src/components/Button/stories.tsx +12 -219
  7. package/src/components/Button/theme.ts +149 -0
  8. package/src/components/Carousel/export.tsx +2 -4
  9. package/src/components/Carousel/index.tsx +159 -191
  10. package/src/components/Carousel/theme.ts +102 -0
  11. package/src/components/Columns/export.tsx +2 -5
  12. package/src/components/Columns/index.tsx +10 -15
  13. package/src/components/Columns/styles.css.ts +3 -1
  14. package/src/components/Columns/theme.ts +24 -0
  15. package/src/components/ConsentCookie/export.tsx +2 -4
  16. package/src/components/ConsentCookie/index.tsx +104 -0
  17. package/src/components/Footer/export.tsx +1 -4
  18. package/src/components/Footer/index.tsx +1 -8
  19. package/src/components/Footer/theme.ts +51 -0
  20. package/src/components/Form/export.tsx +17 -3
  21. package/src/components/Header/export.tsx +1 -4
  22. package/src/components/Header/index.tsx +19 -35
  23. package/src/components/Header/styles.css.ts +2 -2
  24. package/src/components/Header/theme.ts +51 -0
  25. package/src/components/Heading/export.tsx +1 -0
  26. package/src/components/Heading/index.tsx +3 -8
  27. package/src/components/Icon/export.tsx +1 -4
  28. package/src/components/Icon/index.tsx +4 -5
  29. package/src/components/Icon/theme.ts +17 -0
  30. package/src/components/KeyNumber/export.tsx +2 -4
  31. package/src/components/KeyNumber/index.tsx +3 -3
  32. package/src/components/KeyNumber/theme.ts +22 -0
  33. package/src/components/LanguageSwitcher/export.tsx +2 -4
  34. package/src/components/LanguageSwitcher/index.tsx +37 -63
  35. package/src/components/Logo/export.tsx +1 -4
  36. package/src/components/Logo/index.tsx +2 -5
  37. package/src/components/Logo/styles.css.ts +2 -2
  38. package/src/components/Main/export.tsx +1 -4
  39. package/src/components/Main/index.tsx +1 -9
  40. package/src/components/Main/theme.ts +19 -0
  41. package/src/components/Modal/export.tsx +2 -4
  42. package/src/components/Modal/index.tsx +4 -5
  43. package/src/components/Modal/theme.ts +31 -0
  44. package/src/components/Nav/export.tsx +1 -4
  45. package/src/components/Nav/index.tsx +6 -14
  46. package/src/components/Nav/styles.css.ts +3 -1
  47. package/src/components/Nav/theme.ts +24 -0
  48. package/src/components/NavLegal/export.tsx +1 -4
  49. package/src/components/NavLegal/index.tsx +1 -7
  50. package/src/components/NavLegal/theme.ts +24 -0
  51. package/src/components/NavSocial/export.tsx +2 -5
  52. package/src/components/NavSocial/index.tsx +14 -18
  53. package/src/components/NavSocial/theme.ts +34 -0
  54. package/src/components/Section/export.tsx +2 -6
  55. package/src/components/Section/index.tsx +4 -8
  56. package/src/components/Section/theme.ts +40 -0
  57. package/src/components/Video/export.tsx +2 -2
  58. package/src/components/Video/index.tsx +78 -83
  59. package/src/components/Video/theme.ts +104 -0
  60. package/src/index.ts +19 -51
  61. package/src/theme/baseThemeValues.ts +46 -965
  62. package/src/theme/contract.css.ts +0 -16
  63. package/src/utils/useWindowSize.ts +29 -0
  64. package/src/components/ConsentCookie/ConsentCookie.tsx +0 -200
  65. package/src/components/Header/HeaderOverlay/index.tsx +0 -32
  66. package/src/components/Header/HeaderOverlay/styles.css.ts +0 -33
  67. package/src/components/Header/ToggleNav/index.tsx +0 -29
  68. package/src/components/Header/ToggleNav/styles.css.ts +0 -40
  69. package/src/components/ThemeTest/ThemeTest.css.ts +0 -11
  70. package/src/components/ThemeTest/ThemeTest.tsx +0 -12
  71. /package/src/components/ConsentCookie/{ConsentCookie.css.ts → styles.css.ts} +0 -0
package/src/theme/baseThemeValues.ts CHANGED
@@ -1,4 +1,18 @@
1
1
  import { themeActionsDark, themeActionsLight } from '../components/Actions/theme';
2
+ import { themeButtonDark, themeButtonLight } from '../components/Button/theme';
3
+ import { themeCarouselDark, themeCarouselLight } from '../components/Carousel/theme';
4
+ import { themeColumnsDark, themeColumnsLight } from '../components/Columns/theme';
5
+ import { themeFooterDark, themeFooterLight } from '../components/Footer/theme';
6
+ import { themeHeaderDark, themeHeaderLight } from '../components/Header/theme';
7
+ import { themeIconDark, themeIconLight } from '../components/Icon/theme';
8
+ import { themeKeyNumberDark, themeKeyNumberLight } from '../components/KeyNumber/theme';
9
+ import { themeMainDark, themeMainLight } from '../components/Main/theme';
10
+ import { themeModalDark, themeModalLight } from '../components/Modal/theme';
11
+ import { themeNavDark, themeNavLight } from '../components/Nav/theme';
12
+ import { themeNavLegalDark, themeNavLegalLight } from '../components/NavLegal/theme';
13
+ import { themeNavSocialDark, themeNavSocialLight } from '../components/NavSocial/theme';
14
+ import { themeSectionDark, themeSectionLight } from '../components/Section/theme';
15
+ import { themeVideoDark, themeVideoLight } from '../components/Video/theme';
2
16
 
3
17
  // Base theme values that can be imported and extended by apps
4
18
  export const baseLightTheme = {
@@ -104,493 +118,25 @@ export const baseLightTheme = {
104
118
  },
105
119
  },
106
120
 
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
- },
121
+ ...themeSectionLight,
212
122
 
213
123
  ...themeActionsLight,
214
-
215
- button: {
216
- minWidth: '100',
217
- fontWeight: '500',
218
- letterSpacing: '0.2',
219
- borderRadius: '15px',
220
- fontFamily: 'system-ui, sans-serif',
221
- transition: 'all 0.3s ease-in-out',
222
-
223
- variant: {
224
- primary: {
225
- color: '#FF7377',
226
- backgroundColor: '#FF7377',
227
- },
228
- secondary: {
229
- color: '#FF7377',
230
- backgroundColor: '#FF7377',
231
- },
232
- },
233
-
234
- size: {
235
- small: {
236
- paddingTop: {
237
- mobile: '5px',
238
- sm: '5px',
239
- md: '5px',
240
- lg: '5px',
241
- xl: '5px',
242
- '2xl': '5px',
243
- },
244
- paddingLeft: {
245
- mobile: '5px',
246
- sm: '5px',
247
- md: '5px',
248
- lg: '5px',
249
- xl: '5px',
250
- '2xl': '5px',
251
- },
252
- paddingRight: {
253
- mobile: '5px',
254
- sm: '5px',
255
- md: '5px',
256
- lg: '5px',
257
- xl: '5px',
258
- '2xl': '5px',
259
- },
260
- paddingBottom: {
261
- mobile: '5px',
262
- sm: '5px',
263
- md: '5px',
264
- lg: '5px',
265
- xl: '5px',
266
- '2xl': '5px',
267
- },
268
- },
269
- medium: {
270
- paddingTop: {
271
- mobile: '5px',
272
- sm: '5px',
273
- md: '10px',
274
- lg: '10px',
275
- xl: '15px',
276
- '2xl': '15px',
277
- },
278
- paddingLeft: {
279
- mobile: '5px',
280
- sm: '5px',
281
- md: '10px',
282
- lg: '10px',
283
- xl: '15px',
284
- '2xl': '15px',
285
- },
286
- paddingRight: {
287
- mobile: '5px',
288
- sm: '5px',
289
- md: '10px',
290
- lg: '10px',
291
- xl: '15px',
292
- '2xl': '15px',
293
- },
294
- paddingBottom: {
295
- mobile: '5px',
296
- sm: '5px',
297
- md: '10px',
298
- lg: '10px',
299
- xl: '15px',
300
- '2xl': '15px',
301
- },
302
- },
303
- large: {
304
- paddingTop: {
305
- mobile: '10px',
306
- sm: '10px',
307
- md: '15px',
308
- lg: '15px',
309
- xl: '20px',
310
- '2xl': '20px',
311
- },
312
- paddingLeft: {
313
- mobile: '10px',
314
- sm: '10px',
315
- md: '15px',
316
- lg: '15px',
317
- xl: '20px',
318
- '2xl': '20px',
319
- },
320
- paddingRight: {
321
- mobile: '10px',
322
- sm: '10px',
323
- md: '15px',
324
- lg: '15px',
325
- xl: '20px',
326
- '2xl': '20px',
327
- },
328
- paddingBottom: {
329
- mobile: '10px',
330
- sm: '10px',
331
- md: '15px',
332
- lg: '15px',
333
- xl: '20px',
334
- '2xl': '20px',
335
- },
336
- },
337
- },
338
- },
339
-
340
- icon: {
341
- color: '#FF7377',
342
- },
343
-
344
- columns: {
345
- gap: {
346
- mobile: '15px',
347
- sm: '15px',
348
- md: '30px',
349
- lg: '30px',
350
- xl: '50px',
351
- '2xl': '50px',
352
- },
353
- flex: {
354
- mobile: '15px',
355
- sm: '15px',
356
- md: '30px',
357
- lg: '30px',
358
- xl: '50px',
359
- '2xl': '50px',
360
- },
361
- maxWidth: {
362
- mobile: '15px',
363
- sm: '15px',
364
- md: '30px',
365
- lg: '30px',
366
- xl: '50px',
367
- '2xl': '50px',
368
- },
369
- },
370
-
371
- modal: {
372
- border: 'none',
373
- borderRadius: '30px',
374
- backgroundColor: '#000000',
375
-
376
- overlayBlur: '0',
377
- overlayBackgroundColor: '#000000',
378
-
379
- closeButtonRightPosition: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
380
- closeButtonTopPosition: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
381
-
382
- gap: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
383
- width: { mobile: '100%', sm: '200px', md: '600px', lg: '600px', xl: '800px', '2xl': '800px' },
384
- paddingTop: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
385
- paddingBottom: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
386
- },
387
-
388
- keyNumber: {
389
- fontSize: {
390
- large: '2.5em',
391
- xlarge: '4em',
392
- },
393
- paddingTop: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
394
- paddingBottom: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
395
- },
396
-
397
- nav: {
398
- gap: {
399
- mobile: '5px',
400
- sm: '5px',
401
- md: '10px',
402
- lg: '10px',
403
- xl: '15px',
404
- '2xl': '15px',
405
- },
406
- },
407
-
408
- navLegal: {
409
- gap: {
410
- mobile: '5px',
411
- sm: '5px',
412
- md: '10px',
413
- lg: '10px',
414
- xl: '15px',
415
- '2xl': '15px',
416
- },
417
- },
418
-
419
- navSocial: {
420
- transition: 'all 0.5s ease-in-out',
421
- colors: {
422
- defaultIcon: '#FF7377',
423
- defaultIconHover: '#000000',
424
- },
425
- gap: {
426
- mobile: '5px',
427
- sm: '5px',
428
- md: '10px',
429
- lg: '10px',
430
- xl: '15px',
431
- '2xl': '15px',
432
- },
433
- },
434
-
435
- video: {
436
- playButton: {
437
- border: 'none',
438
- borderRadius: '1000px',
439
- iconColor: '#FF7377',
440
- backgroundColor: '#FF7377',
441
- width: {
442
- mobile: '50px',
443
- sm: '50px',
444
- md: '50px',
445
- lg: '75px',
446
- xl: '75px',
447
- '2xl': '75px',
448
- },
449
- height: {
450
- mobile: '50px',
451
- sm: '50px',
452
- md: '50px',
453
- lg: '75px',
454
- xl: '75px',
455
- '2xl': '75px',
456
- },
457
- },
458
- pauseButton: {
459
- border: 'none',
460
- borderRadius: '1000px',
461
- iconColor: '#FF7377',
462
- backgroundColor: '#FF7377',
463
- width: {
464
- mobile: '50px',
465
- sm: '50px',
466
- md: '50px',
467
- lg: '75px',
468
- xl: '75px',
469
- '2xl': '75px',
470
- },
471
- height: {
472
- mobile: '50px',
473
- sm: '50px',
474
- md: '50px',
475
- lg: '75px',
476
- xl: '75px',
477
- '2xl': '75px',
478
- },
479
- },
480
- soundButton: {
481
- border: 'none',
482
- borderRadius: '1000px',
483
- iconColor: '#FF7377',
484
- backgroundColor: '#FF7377',
485
- width: {
486
- mobile: '50px',
487
- sm: '50px',
488
- md: '50px',
489
- lg: '75px',
490
- xl: '75px',
491
- '2xl': '75px',
492
- },
493
- height: {
494
- mobile: '50px',
495
- sm: '50px',
496
- md: '50px',
497
- lg: '75px',
498
- xl: '75px',
499
- '2xl': '75px',
500
- },
501
- },
502
- closeButton: {
503
- border: 'none',
504
- borderRadius: '1000px',
505
- iconColor: '#FF7377',
506
- backgroundColor: '#FF7377',
507
- width: {
508
- mobile: '50px',
509
- sm: '50px',
510
- md: '50px',
511
- lg: '75px',
512
- xl: '75px',
513
- '2xl': '75px',
514
- },
515
- height: {
516
- mobile: '50px',
517
- sm: '50px',
518
- md: '50px',
519
- lg: '75px',
520
- xl: '75px',
521
- '2xl': '75px',
522
- },
523
- },
524
- },
525
-
526
- carousel: {
527
- iconColor: '#FF7377',
528
- gap: {
529
- mobile: '15',
530
- sm: '15',
531
- md: '30',
532
- lg: '30',
533
- xl: '50',
534
- '2xl': '50',
535
- },
536
- nav: {
537
- borderRadius: '1000px',
538
- backgroundColor: '#FF7377',
539
- width: {
540
- mobile: '15',
541
- sm: '15',
542
- md: '30',
543
- lg: '30',
544
- xl: '50',
545
- '2xl': '50',
546
- },
547
- height: {
548
- mobile: '15',
549
- sm: '15',
550
- md: '30',
551
- lg: '30',
552
- xl: '50',
553
- '2xl': '50',
554
- },
555
- },
556
- bullet: {
557
- bottom: {
558
- mobile: '15px',
559
- sm: '15px',
560
- md: '30px',
561
- lg: '30px',
562
- xl: '50px',
563
- '2xl': '50px',
564
- },
565
- borderRadius: '1000px',
566
- backgroundColor: '#FF7377',
567
- activeBackgroundColor: '#FF7377',
568
- gap: {
569
- mobile: '15',
570
- sm: '15',
571
- md: '30',
572
- lg: '30',
573
- xl: '50',
574
- '2xl': '50',
575
- },
576
- width: {
577
- mobile: '15',
578
- sm: '15',
579
- md: '30',
580
- lg: '30',
581
- xl: '50',
582
- '2xl': '50',
583
- },
584
- height: {
585
- mobile: '15',
586
- sm: '15',
587
- md: '30',
588
- lg: '30',
589
- xl: '50',
590
- '2xl': '50',
591
- },
592
- },
593
- },
124
+ ...themeButtonLight,
125
+ ...themeCarouselLight,
126
+ ...themeColumnsLight,
127
+ ...themeFooterLight,
128
+ ...themeHeaderLight,
129
+ ...themeIconLight,
130
+ ...themeKeyNumberLight,
131
+
132
+ ...themeMainLight,
133
+ ...themeModalLight,
134
+
135
+ ...themeNavLight,
136
+ ...themeNavLegalLight,
137
+ ...themeNavSocialLight,
138
+
139
+ ...themeVideoLight,
594
140
  };
595
141
 
596
142
  export const baseDarkTheme = {
@@ -695,491 +241,26 @@ export const baseDarkTheme = {
695
241
  '2xl': '-50px',
696
242
  },
697
243
  },
698
- main: {
699
- minHeight: '45vh',
700
- backgroundColor: '#666666',
701
- },
702
244
 
703
- section: {
704
- gap: {
705
- mobile: '15px',
706
- sm: '15px',
707
- md: '30px',
708
- lg: '30px',
709
- xl: '50px',
710
- '2xl': '50px',
711
- },
712
- paddingTop: {
713
- mobile: '15px',
714
- sm: '15px',
715
- md: '30px',
716
- lg: '30px',
717
- xl: '50px',
718
- '2xl': '50px',
719
- },
720
- paddingBottom: {
721
- mobile: '15px',
722
- sm: '15px',
723
- md: '30px',
724
- lg: '30px',
725
- xl: '50px',
726
- '2xl': '50px',
727
- },
728
- },
729
-
730
- header: {
731
- fontSize: '1.2em',
732
- backgroundColor: '#FF7377',
733
- height: {
734
- mobile: '15px',
735
- sm: '15px',
736
- md: '30px',
737
- lg: '30px',
738
- xl: '50px',
739
- '2xl': '50px',
740
- },
741
- gap: {
742
- mobile: '15px',
743
- sm: '15px',
744
- md: '30px',
745
- lg: '30px',
746
- xl: '50px',
747
- '2xl': '50px',
748
- },
749
- paddingTop: {
750
- mobile: '15px',
751
- sm: '15px',
752
- md: '30px',
753
- lg: '30px',
754
- xl: '50px',
755
- '2xl': '50px',
756
- },
757
- paddingBottom: {
758
- mobile: '15px',
759
- sm: '15px',
760
- md: '30px',
761
- lg: '30px',
762
- xl: '50px',
763
- '2xl': '50px',
764
- },
765
- },
766
-
767
- footer: {
768
- fontSize: '0.8em',
769
- backgroundColor: '#FF7377',
770
- height: {
771
- mobile: '15px',
772
- sm: '15px',
773
- md: '30px',
774
- lg: '30px',
775
- xl: '50px',
776
- '2xl': '50px',
777
- },
778
- gap: {
779
- mobile: '15px',
780
- sm: '15px',
781
- md: '30px',
782
- lg: '30px',
783
- xl: '50px',
784
- '2xl': '50px',
785
- },
786
- paddingTop: {
787
- mobile: '15px',
788
- sm: '15px',
789
- md: '30px',
790
- lg: '30px',
791
- xl: '50px',
792
- '2xl': '50px',
793
- },
794
- paddingBottom: {
795
- mobile: '15px',
796
- sm: '15px',
797
- md: '30px',
798
- lg: '30px',
799
- xl: '50px',
800
- '2xl': '50px',
801
- },
802
- },
803
-
804
- columns: {
805
- gap: {
806
- mobile: '15px',
807
- sm: '15px',
808
- md: '30px',
809
- lg: '30px',
810
- xl: '50px',
811
- '2xl': '50px',
812
- },
813
- flex: {
814
- mobile: '15px',
815
- sm: '15px',
816
- md: '30px',
817
- lg: '30px',
818
- xl: '50px',
819
- '2xl': '50px',
820
- },
821
- maxWidth: {
822
- mobile: '15px',
823
- sm: '15px',
824
- md: '30px',
825
- lg: '30px',
826
- xl: '50px',
827
- '2xl': '50px',
828
- },
829
- },
830
-
831
- button: {
832
- minWidth: '100',
833
- fontWeight: '500',
834
- letterSpacing: '0.2',
835
- borderRadius: '15px',
836
- fontFamily: 'system-ui, sans-serif',
837
- transition: 'all 0.3s ease-in-out',
838
-
839
- variant: {
840
- primary: {
841
- color: '#FF7377',
842
- backgroundColor: '#FF7377',
843
- },
844
- secondary: {
845
- color: '#FF7377',
846
- backgroundColor: '#FF7377',
847
- },
848
- },
849
-
850
- size: {
851
- small: {
852
- paddingTop: {
853
- mobile: '5px',
854
- sm: '5px',
855
- md: '5px',
856
- lg: '5px',
857
- xl: '5px',
858
- '2xl': '5px',
859
- },
860
- paddingLeft: {
861
- mobile: '5px',
862
- sm: '5px',
863
- md: '5px',
864
- lg: '5px',
865
- xl: '5px',
866
- '2xl': '5px',
867
- },
868
- paddingRight: {
869
- mobile: '5px',
870
- sm: '5px',
871
- md: '5px',
872
- lg: '5px',
873
- xl: '5px',
874
- '2xl': '5px',
875
- },
876
- paddingBottom: {
877
- mobile: '5px',
878
- sm: '5px',
879
- md: '5px',
880
- lg: '5px',
881
- xl: '5px',
882
- '2xl': '5px',
883
- },
884
- },
885
- medium: {
886
- paddingTop: {
887
- mobile: '5px',
888
- sm: '5px',
889
- md: '10px',
890
- lg: '10px',
891
- xl: '15px',
892
- '2xl': '15px',
893
- },
894
- paddingLeft: {
895
- mobile: '5px',
896
- sm: '5px',
897
- md: '10px',
898
- lg: '10px',
899
- xl: '15px',
900
- '2xl': '15px',
901
- },
902
- paddingRight: {
903
- mobile: '5px',
904
- sm: '5px',
905
- md: '10px',
906
- lg: '10px',
907
- xl: '15px',
908
- '2xl': '15px',
909
- },
910
- paddingBottom: {
911
- mobile: '5px',
912
- sm: '5px',
913
- md: '10px',
914
- lg: '10px',
915
- xl: '15px',
916
- '2xl': '15px',
917
- },
918
- },
919
- large: {
920
- paddingTop: {
921
- mobile: '10px',
922
- sm: '10px',
923
- md: '15px',
924
- lg: '15px',
925
- xl: '20px',
926
- '2xl': '20px',
927
- },
928
- paddingLeft: {
929
- mobile: '10px',
930
- sm: '10px',
931
- md: '15px',
932
- lg: '15px',
933
- xl: '20px',
934
- '2xl': '20px',
935
- },
936
- paddingRight: {
937
- mobile: '10px',
938
- sm: '10px',
939
- md: '15px',
940
- lg: '15px',
941
- xl: '20px',
942
- '2xl': '20px',
943
- },
944
- paddingBottom: {
945
- mobile: '10px',
946
- sm: '10px',
947
- md: '15px',
948
- lg: '15px',
949
- xl: '20px',
950
- '2xl': '20px',
951
- },
952
- },
953
- },
954
- },
955
-
956
- icon: {
957
- color: '#FF7377',
958
- },
245
+ ...themeSectionDark,
959
246
 
960
247
  ...themeActionsDark,
248
+ ...themeButtonDark,
249
+ ...themeCarouselDark,
250
+ ...themeColumnsDark,
251
+ ...themeFooterDark,
252
+ ...themeHeaderDark,
253
+ ...themeIconDark,
254
+ ...themeKeyNumberDark,
961
255
 
962
- modal: {
963
- border: 'none',
964
- borderRadius: '30px',
965
- backgroundColor: '#000000',
966
-
967
- overlayBlur: '0',
968
- overlayBackgroundColor: '#000000',
256
+ ...themeMainDark,
969
257
 
970
- closeButtonRightPosition: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
971
- closeButtonTopPosition: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
258
+ ...themeModalDark,
972
259
 
973
- gap: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
974
- width: { mobile: '100%', sm: '200px', md: '600px', lg: '600px', xl: '800px', '2xl': '800px' },
975
- paddingTop: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
976
- paddingBottom: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
977
- },
978
-
979
- keyNumber: {
980
- fontSize: {
981
- large: '2.5em',
982
- xlarge: '4em',
983
- },
984
- paddingTop: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
985
- paddingBottom: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
986
- },
987
-
988
- nav: {
989
- gap: {
990
- mobile: '5px',
991
- sm: '5px',
992
- md: '10px',
993
- lg: '10px',
994
- xl: '15px',
995
- '2xl': '15px',
996
- },
997
- },
260
+ ...themeNavDark,
261
+ ...themeNavDark,
262
+ ...themeNavLegalDark,
263
+ ...themeNavSocialDark,
998
264
 
999
- navLegal: {
1000
- gap: {
1001
- mobile: '5px',
1002
- sm: '5px',
1003
- md: '10px',
1004
- lg: '10px',
1005
- xl: '15px',
1006
- '2xl': '15px',
1007
- },
1008
- },
1009
-
1010
- navSocial: {
1011
- transition: 'all 0.5s ease-in-out',
1012
- colors: {
1013
- defaultIcon: '#FF7377',
1014
- defaultIconHover: '#000000',
1015
- },
1016
- gap: {
1017
- mobile: '5px',
1018
- sm: '5px',
1019
- md: '10px',
1020
- lg: '10px',
1021
- xl: '15px',
1022
- '2xl': '15px',
1023
- },
1024
- },
1025
-
1026
- video: {
1027
- playButton: {
1028
- border: 'none',
1029
- borderRadius: '1000px',
1030
- iconColor: '#FF7377',
1031
- backgroundColor: '#FF7377',
1032
- width: {
1033
- mobile: '50px',
1034
- sm: '50px',
1035
- md: '50px',
1036
- lg: '75px',
1037
- xl: '75px',
1038
- '2xl': '75px',
1039
- },
1040
- height: {
1041
- mobile: '50px',
1042
- sm: '50px',
1043
- md: '50px',
1044
- lg: '75px',
1045
- xl: '75px',
1046
- '2xl': '75px',
1047
- },
1048
- },
1049
- pauseButton: {
1050
- border: 'none',
1051
- borderRadius: '1000px',
1052
- iconColor: '#FF7377',
1053
- backgroundColor: '#FF7377',
1054
- width: {
1055
- mobile: '50px',
1056
- sm: '50px',
1057
- md: '50px',
1058
- lg: '75px',
1059
- xl: '75px',
1060
- '2xl': '75px',
1061
- },
1062
- height: {
1063
- mobile: '50px',
1064
- sm: '50px',
1065
- md: '50px',
1066
- lg: '75px',
1067
- xl: '75px',
1068
- '2xl': '75px',
1069
- },
1070
- },
1071
- soundButton: {
1072
- border: 'none',
1073
- borderRadius: '1000px',
1074
- iconColor: '#FF7377',
1075
- backgroundColor: '#FF7377',
1076
- width: {
1077
- mobile: '50px',
1078
- sm: '50px',
1079
- md: '50px',
1080
- lg: '75px',
1081
- xl: '75px',
1082
- '2xl': '75px',
1083
- },
1084
- height: {
1085
- mobile: '50px',
1086
- sm: '50px',
1087
- md: '50px',
1088
- lg: '75px',
1089
- xl: '75px',
1090
- '2xl': '75px',
1091
- },
1092
- },
1093
- closeButton: {
1094
- border: 'none',
1095
- borderRadius: '1000px',
1096
- iconColor: '#FF7377',
1097
- backgroundColor: '#FF7377',
1098
- width: {
1099
- mobile: '50px',
1100
- sm: '50px',
1101
- md: '50px',
1102
- lg: '75px',
1103
- xl: '75px',
1104
- '2xl': '75px',
1105
- },
1106
- height: {
1107
- mobile: '50px',
1108
- sm: '50px',
1109
- md: '50px',
1110
- lg: '75px',
1111
- xl: '75px',
1112
- '2xl': '75px',
1113
- },
1114
- },
1115
- },
1116
-
1117
- carousel: {
1118
- iconColor: '#FF7377',
1119
- gap: {
1120
- mobile: '15',
1121
- sm: '15',
1122
- md: '30',
1123
- lg: '30',
1124
- xl: '50',
1125
- '2xl': '50',
1126
- },
1127
- nav: {
1128
- borderRadius: '1000px',
1129
- backgroundColor: '#FF7377',
1130
- width: {
1131
- mobile: '15',
1132
- sm: '15',
1133
- md: '30',
1134
- lg: '30',
1135
- xl: '50',
1136
- '2xl': '50',
1137
- },
1138
- height: {
1139
- mobile: '15',
1140
- sm: '15',
1141
- md: '30',
1142
- lg: '30',
1143
- xl: '50',
1144
- '2xl': '50',
1145
- },
1146
- },
1147
- bullet: {
1148
- borderRadius: '1000px',
1149
- bottom: {
1150
- mobile: '15px',
1151
- sm: '15px',
1152
- md: '30px',
1153
- lg: '30px',
1154
- xl: '50px',
1155
- '2xl': '50px',
1156
- },
1157
- backgroundColor: '#FF7377',
1158
- activeBackgroundColor: '#FF7377',
1159
- gap: {
1160
- mobile: '15',
1161
- sm: '15',
1162
- md: '30',
1163
- lg: '30',
1164
- xl: '50',
1165
- '2xl': '50',
1166
- },
1167
- width: {
1168
- mobile: '15',
1169
- sm: '15',
1170
- md: '30',
1171
- lg: '30',
1172
- xl: '50',
1173
- '2xl': '50',
1174
- },
1175
- height: {
1176
- mobile: '15',
1177
- sm: '15',
1178
- md: '30',
1179
- lg: '30',
1180
- xl: '50',
1181
- '2xl': '50',
1182
- },
1183
- },
1184
- },
265
+ ...themeVideoDark,
1185
266
  };