@latte-macchiat-io/latte-vanilla-components 0.0.202 → 0.0.204

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 (72) hide show
  1. package/package.json +1 -1
  2. package/src/components/Button/index.tsx +0 -1
  3. package/src/components/Carousel/export.tsx +2 -4
  4. package/src/components/Carousel/index.tsx +159 -191
  5. package/src/components/Carousel/theme.ts +102 -0
  6. package/src/components/Columns/export.tsx +2 -5
  7. package/src/components/Columns/index.tsx +9 -15
  8. package/src/components/Columns/styles.css.ts +3 -1
  9. package/src/components/Columns/theme.ts +24 -0
  10. package/src/components/ConsentCookie/export.tsx +2 -4
  11. package/src/components/ConsentCookie/index.tsx +104 -0
  12. package/src/components/Footer/export.tsx +1 -4
  13. package/src/components/Footer/index.tsx +1 -9
  14. package/src/components/Footer/theme.ts +51 -0
  15. package/src/components/Form/Form.tsx +0 -3
  16. package/src/components/Form/Row/Row.tsx +0 -3
  17. package/src/components/Form/TextField/Input/Input.tsx +0 -3
  18. package/src/components/Form/TextField/Label/Label.tsx +0 -3
  19. package/src/components/Form/TextField/TextField.tsx +0 -3
  20. package/src/components/Form/TextField/Textarea/Textarea.tsx +0 -3
  21. package/src/components/Form/export.tsx +17 -3
  22. package/src/components/Header/export.tsx +1 -4
  23. package/src/components/Header/index.tsx +19 -35
  24. package/src/components/Header/styles.css.ts +2 -2
  25. package/src/components/Header/theme.ts +51 -0
  26. package/src/components/Heading/export.tsx +1 -0
  27. package/src/components/Heading/index.tsx +3 -9
  28. package/src/components/Icon/export.tsx +1 -4
  29. package/src/components/Icon/index.tsx +4 -5
  30. package/src/components/Icon/theme.ts +17 -0
  31. package/src/components/KeyNumber/export.tsx +2 -4
  32. package/src/components/KeyNumber/index.tsx +3 -3
  33. package/src/components/KeyNumber/theme.ts +22 -0
  34. package/src/components/LanguageSwitcher/export.tsx +2 -4
  35. package/src/components/LanguageSwitcher/index.tsx +37 -63
  36. package/src/components/Logo/export.tsx +1 -4
  37. package/src/components/Logo/index.tsx +2 -5
  38. package/src/components/Logo/styles.css.ts +2 -2
  39. package/src/components/Main/export.tsx +1 -4
  40. package/src/components/Main/index.tsx +1 -9
  41. package/src/components/Main/theme.ts +19 -0
  42. package/src/components/Modal/export.tsx +2 -4
  43. package/src/components/Modal/index.tsx +4 -5
  44. package/src/components/Modal/theme.ts +31 -0
  45. package/src/components/Nav/export.tsx +1 -4
  46. package/src/components/Nav/index.tsx +6 -14
  47. package/src/components/Nav/styles.css.ts +3 -1
  48. package/src/components/Nav/theme.ts +24 -0
  49. package/src/components/NavLegal/export.tsx +1 -4
  50. package/src/components/NavLegal/index.tsx +1 -7
  51. package/src/components/NavLegal/theme.ts +24 -0
  52. package/src/components/NavSocial/export.tsx +2 -5
  53. package/src/components/NavSocial/index.tsx +14 -18
  54. package/src/components/NavSocial/theme.ts +34 -0
  55. package/src/components/Section/export.tsx +2 -6
  56. package/src/components/Section/index.tsx +4 -8
  57. package/src/components/Section/theme.ts +40 -0
  58. package/src/components/Video/export.tsx +2 -2
  59. package/src/components/Video/index.tsx +78 -84
  60. package/src/components/Video/theme.ts +104 -0
  61. package/src/index.ts +19 -49
  62. package/src/theme/baseThemeValues.ts +40 -712
  63. package/src/theme/contract.css.ts +0 -16
  64. package/src/utils/useWindowSize.ts +29 -0
  65. package/src/components/ConsentCookie/ConsentCookie.tsx +0 -200
  66. package/src/components/Header/HeaderOverlay/index.tsx +0 -32
  67. package/src/components/Header/HeaderOverlay/styles.css.ts +0 -33
  68. package/src/components/Header/ToggleNav/index.tsx +0 -29
  69. package/src/components/Header/ToggleNav/styles.css.ts +0 -40
  70. package/src/components/ThemeTest/ThemeTest.css.ts +0 -11
  71. package/src/components/ThemeTest/ThemeTest.tsx +0 -12
  72. /package/src/components/ConsentCookie/{ConsentCookie.css.ts → styles.css.ts} +0 -0
package/src/theme/baseThemeValues.ts CHANGED
@@ -1,5 +1,18 @@
1
1
  import { themeActionsDark, themeActionsLight } from '../components/Actions/theme';
2
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';
3
16
 
4
17
  // Base theme values that can be imported and extended by apps
5
18
  export const baseLightTheme = {
@@ -105,369 +118,25 @@ export const baseLightTheme = {
105
118
  },
106
119
  },
107
120
 
108
- main: {
109
- minHeight: '45vh',
110
- backgroundColor: '#FCEFE6',
111
- },
112
-
113
- section: {
114
- gap: {
115
- mobile: '15px',
116
- sm: '15px',
117
- md: '30px',
118
- lg: '30px',
119
- xl: '50px',
120
- '2xl': '50px',
121
- },
122
- paddingTop: {
123
- mobile: '15px',
124
- sm: '15px',
125
- md: '30px',
126
- lg: '30px',
127
- xl: '50px',
128
- '2xl': '50px',
129
- },
130
- paddingBottom: {
131
- mobile: '15px',
132
- sm: '15px',
133
- md: '30px',
134
- lg: '30px',
135
- xl: '50px',
136
- '2xl': '50px',
137
- },
138
- },
139
-
140
- header: {
141
- fontSize: '1.2em',
142
- backgroundColor: '#FF7377',
143
- height: {
144
- mobile: '15px',
145
- sm: '15px',
146
- md: '30px',
147
- lg: '30px',
148
- xl: '50px',
149
- '2xl': '50px',
150
- },
151
- gap: {
152
- mobile: '15px',
153
- sm: '15px',
154
- md: '30px',
155
- lg: '30px',
156
- xl: '50px',
157
- '2xl': '50px',
158
- },
159
- paddingTop: {
160
- mobile: '15px',
161
- sm: '15px',
162
- md: '30px',
163
- lg: '30px',
164
- xl: '50px',
165
- '2xl': '50px',
166
- },
167
- paddingBottom: {
168
- mobile: '15px',
169
- sm: '15px',
170
- md: '30px',
171
- lg: '30px',
172
- xl: '50px',
173
- '2xl': '50px',
174
- },
175
- },
176
-
177
- footer: {
178
- fontSize: '0.8em',
179
- backgroundColor: '#FF7377',
180
- height: {
181
- mobile: '15px',
182
- sm: '15px',
183
- md: '30px',
184
- lg: '30px',
185
- xl: '50px',
186
- '2xl': '50px',
187
- },
188
- gap: {
189
- mobile: '15px',
190
- sm: '15px',
191
- md: '30px',
192
- lg: '30px',
193
- xl: '50px',
194
- '2xl': '50px',
195
- },
196
- paddingTop: {
197
- mobile: '15px',
198
- sm: '15px',
199
- md: '30px',
200
- lg: '30px',
201
- xl: '50px',
202
- '2xl': '50px',
203
- },
204
- paddingBottom: {
205
- mobile: '15px',
206
- sm: '15px',
207
- md: '30px',
208
- lg: '30px',
209
- xl: '50px',
210
- '2xl': '50px',
211
- },
212
- },
121
+ ...themeSectionLight,
213
122
 
214
123
  ...themeActionsLight,
215
124
  ...themeButtonLight,
125
+ ...themeCarouselLight,
126
+ ...themeColumnsLight,
127
+ ...themeFooterLight,
128
+ ...themeHeaderLight,
129
+ ...themeIconLight,
130
+ ...themeKeyNumberLight,
216
131
 
217
- icon: {
218
- color: '#FF7377',
219
- },
132
+ ...themeMainLight,
133
+ ...themeModalLight,
220
134
 
221
- columns: {
222
- gap: {
223
- mobile: '15px',
224
- sm: '15px',
225
- md: '30px',
226
- lg: '30px',
227
- xl: '50px',
228
- '2xl': '50px',
229
- },
230
- flex: {
231
- mobile: '15px',
232
- sm: '15px',
233
- md: '30px',
234
- lg: '30px',
235
- xl: '50px',
236
- '2xl': '50px',
237
- },
238
- maxWidth: {
239
- mobile: '15px',
240
- sm: '15px',
241
- md: '30px',
242
- lg: '30px',
243
- xl: '50px',
244
- '2xl': '50px',
245
- },
246
- },
247
-
248
- modal: {
249
- border: 'none',
250
- borderRadius: '30px',
251
- backgroundColor: '#000000',
252
-
253
- overlayBlur: '0',
254
- overlayBackgroundColor: '#000000',
255
-
256
- closeButtonRightPosition: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
257
- closeButtonTopPosition: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
258
-
259
- gap: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
260
- width: { mobile: '100%', sm: '200px', md: '600px', lg: '600px', xl: '800px', '2xl': '800px' },
261
- paddingTop: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
262
- paddingBottom: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
263
- },
264
-
265
- keyNumber: {
266
- fontSize: {
267
- large: '2.5em',
268
- xlarge: '4em',
269
- },
270
- paddingTop: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
271
- paddingBottom: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
272
- },
273
-
274
- nav: {
275
- gap: {
276
- mobile: '5px',
277
- sm: '5px',
278
- md: '10px',
279
- lg: '10px',
280
- xl: '15px',
281
- '2xl': '15px',
282
- },
283
- },
135
+ ...themeNavLight,
136
+ ...themeNavLegalLight,
137
+ ...themeNavSocialLight,
284
138
 
285
- navLegal: {
286
- gap: {
287
- mobile: '5px',
288
- sm: '5px',
289
- md: '10px',
290
- lg: '10px',
291
- xl: '15px',
292
- '2xl': '15px',
293
- },
294
- },
295
-
296
- navSocial: {
297
- transition: 'all 0.5s ease-in-out',
298
- colors: {
299
- defaultIcon: '#FF7377',
300
- defaultIconHover: '#000000',
301
- },
302
- gap: {
303
- mobile: '5px',
304
- sm: '5px',
305
- md: '10px',
306
- lg: '10px',
307
- xl: '15px',
308
- '2xl': '15px',
309
- },
310
- },
311
-
312
- video: {
313
- playButton: {
314
- border: 'none',
315
- borderRadius: '1000px',
316
- iconColor: '#FF7377',
317
- backgroundColor: '#FF7377',
318
- width: {
319
- mobile: '50px',
320
- sm: '50px',
321
- md: '50px',
322
- lg: '75px',
323
- xl: '75px',
324
- '2xl': '75px',
325
- },
326
- height: {
327
- mobile: '50px',
328
- sm: '50px',
329
- md: '50px',
330
- lg: '75px',
331
- xl: '75px',
332
- '2xl': '75px',
333
- },
334
- },
335
- pauseButton: {
336
- border: 'none',
337
- borderRadius: '1000px',
338
- iconColor: '#FF7377',
339
- backgroundColor: '#FF7377',
340
- width: {
341
- mobile: '50px',
342
- sm: '50px',
343
- md: '50px',
344
- lg: '75px',
345
- xl: '75px',
346
- '2xl': '75px',
347
- },
348
- height: {
349
- mobile: '50px',
350
- sm: '50px',
351
- md: '50px',
352
- lg: '75px',
353
- xl: '75px',
354
- '2xl': '75px',
355
- },
356
- },
357
- soundButton: {
358
- border: 'none',
359
- borderRadius: '1000px',
360
- iconColor: '#FF7377',
361
- backgroundColor: '#FF7377',
362
- width: {
363
- mobile: '50px',
364
- sm: '50px',
365
- md: '50px',
366
- lg: '75px',
367
- xl: '75px',
368
- '2xl': '75px',
369
- },
370
- height: {
371
- mobile: '50px',
372
- sm: '50px',
373
- md: '50px',
374
- lg: '75px',
375
- xl: '75px',
376
- '2xl': '75px',
377
- },
378
- },
379
- closeButton: {
380
- border: 'none',
381
- borderRadius: '1000px',
382
- iconColor: '#FF7377',
383
- backgroundColor: '#FF7377',
384
- width: {
385
- mobile: '50px',
386
- sm: '50px',
387
- md: '50px',
388
- lg: '75px',
389
- xl: '75px',
390
- '2xl': '75px',
391
- },
392
- height: {
393
- mobile: '50px',
394
- sm: '50px',
395
- md: '50px',
396
- lg: '75px',
397
- xl: '75px',
398
- '2xl': '75px',
399
- },
400
- },
401
- },
402
-
403
- carousel: {
404
- iconColor: '#FF7377',
405
- gap: {
406
- mobile: '15',
407
- sm: '15',
408
- md: '30',
409
- lg: '30',
410
- xl: '50',
411
- '2xl': '50',
412
- },
413
- nav: {
414
- borderRadius: '1000px',
415
- backgroundColor: '#FF7377',
416
- width: {
417
- mobile: '15',
418
- sm: '15',
419
- md: '30',
420
- lg: '30',
421
- xl: '50',
422
- '2xl': '50',
423
- },
424
- height: {
425
- mobile: '15',
426
- sm: '15',
427
- md: '30',
428
- lg: '30',
429
- xl: '50',
430
- '2xl': '50',
431
- },
432
- },
433
- bullet: {
434
- bottom: {
435
- mobile: '15px',
436
- sm: '15px',
437
- md: '30px',
438
- lg: '30px',
439
- xl: '50px',
440
- '2xl': '50px',
441
- },
442
- borderRadius: '1000px',
443
- backgroundColor: '#FF7377',
444
- activeBackgroundColor: '#FF7377',
445
- gap: {
446
- mobile: '15',
447
- sm: '15',
448
- md: '30',
449
- lg: '30',
450
- xl: '50',
451
- '2xl': '50',
452
- },
453
- width: {
454
- mobile: '15',
455
- sm: '15',
456
- md: '30',
457
- lg: '30',
458
- xl: '50',
459
- '2xl': '50',
460
- },
461
- height: {
462
- mobile: '15',
463
- sm: '15',
464
- md: '30',
465
- lg: '30',
466
- xl: '50',
467
- '2xl': '50',
468
- },
469
- },
470
- },
139
+ ...themeVideoLight,
471
140
  };
472
141
 
473
142
  export const baseDarkTheme = {
@@ -572,367 +241,26 @@ export const baseDarkTheme = {
572
241
  '2xl': '-50px',
573
242
  },
574
243
  },
575
- main: {
576
- minHeight: '45vh',
577
- backgroundColor: '#666666',
578
- },
579
-
580
- section: {
581
- gap: {
582
- mobile: '15px',
583
- sm: '15px',
584
- md: '30px',
585
- lg: '30px',
586
- xl: '50px',
587
- '2xl': '50px',
588
- },
589
- paddingTop: {
590
- mobile: '15px',
591
- sm: '15px',
592
- md: '30px',
593
- lg: '30px',
594
- xl: '50px',
595
- '2xl': '50px',
596
- },
597
- paddingBottom: {
598
- mobile: '15px',
599
- sm: '15px',
600
- md: '30px',
601
- lg: '30px',
602
- xl: '50px',
603
- '2xl': '50px',
604
- },
605
- },
606
-
607
- header: {
608
- fontSize: '1.2em',
609
- backgroundColor: '#FF7377',
610
- height: {
611
- mobile: '15px',
612
- sm: '15px',
613
- md: '30px',
614
- lg: '30px',
615
- xl: '50px',
616
- '2xl': '50px',
617
- },
618
- gap: {
619
- mobile: '15px',
620
- sm: '15px',
621
- md: '30px',
622
- lg: '30px',
623
- xl: '50px',
624
- '2xl': '50px',
625
- },
626
- paddingTop: {
627
- mobile: '15px',
628
- sm: '15px',
629
- md: '30px',
630
- lg: '30px',
631
- xl: '50px',
632
- '2xl': '50px',
633
- },
634
- paddingBottom: {
635
- mobile: '15px',
636
- sm: '15px',
637
- md: '30px',
638
- lg: '30px',
639
- xl: '50px',
640
- '2xl': '50px',
641
- },
642
- },
643
-
644
- footer: {
645
- fontSize: '0.8em',
646
- backgroundColor: '#FF7377',
647
- height: {
648
- mobile: '15px',
649
- sm: '15px',
650
- md: '30px',
651
- lg: '30px',
652
- xl: '50px',
653
- '2xl': '50px',
654
- },
655
- gap: {
656
- mobile: '15px',
657
- sm: '15px',
658
- md: '30px',
659
- lg: '30px',
660
- xl: '50px',
661
- '2xl': '50px',
662
- },
663
- paddingTop: {
664
- mobile: '15px',
665
- sm: '15px',
666
- md: '30px',
667
- lg: '30px',
668
- xl: '50px',
669
- '2xl': '50px',
670
- },
671
- paddingBottom: {
672
- mobile: '15px',
673
- sm: '15px',
674
- md: '30px',
675
- lg: '30px',
676
- xl: '50px',
677
- '2xl': '50px',
678
- },
679
- },
680
244
 
681
- columns: {
682
- gap: {
683
- mobile: '15px',
684
- sm: '15px',
685
- md: '30px',
686
- lg: '30px',
687
- xl: '50px',
688
- '2xl': '50px',
689
- },
690
- flex: {
691
- mobile: '15px',
692
- sm: '15px',
693
- md: '30px',
694
- lg: '30px',
695
- xl: '50px',
696
- '2xl': '50px',
697
- },
698
- maxWidth: {
699
- mobile: '15px',
700
- sm: '15px',
701
- md: '30px',
702
- lg: '30px',
703
- xl: '50px',
704
- '2xl': '50px',
705
- },
706
- },
707
-
708
- icon: {
709
- color: '#FF7377',
710
- },
245
+ ...themeSectionDark,
711
246
 
712
247
  ...themeActionsDark,
713
248
  ...themeButtonDark,
249
+ ...themeCarouselDark,
250
+ ...themeColumnsDark,
251
+ ...themeFooterDark,
252
+ ...themeHeaderDark,
253
+ ...themeIconDark,
254
+ ...themeKeyNumberDark,
714
255
 
715
- modal: {
716
- border: 'none',
717
- borderRadius: '30px',
718
- backgroundColor: '#000000',
256
+ ...themeMainDark,
719
257
 
720
- overlayBlur: '0',
721
- overlayBackgroundColor: '#000000',
258
+ ...themeModalDark,
722
259
 
723
- closeButtonRightPosition: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
724
- closeButtonTopPosition: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
260
+ ...themeNavDark,
261
+ ...themeNavDark,
262
+ ...themeNavLegalDark,
263
+ ...themeNavSocialDark,
725
264
 
726
- gap: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
727
- width: { mobile: '100%', sm: '200px', md: '600px', lg: '600px', xl: '800px', '2xl': '800px' },
728
- paddingTop: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
729
- paddingBottom: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
730
- },
731
-
732
- keyNumber: {
733
- fontSize: {
734
- large: '2.5em',
735
- xlarge: '4em',
736
- },
737
- paddingTop: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
738
- paddingBottom: { mobile: '15px', sm: '15px', md: '30px', lg: '30px', xl: '50px', '2xl': '50px' },
739
- },
740
-
741
- nav: {
742
- gap: {
743
- mobile: '5px',
744
- sm: '5px',
745
- md: '10px',
746
- lg: '10px',
747
- xl: '15px',
748
- '2xl': '15px',
749
- },
750
- },
751
-
752
- navLegal: {
753
- gap: {
754
- mobile: '5px',
755
- sm: '5px',
756
- md: '10px',
757
- lg: '10px',
758
- xl: '15px',
759
- '2xl': '15px',
760
- },
761
- },
762
-
763
- navSocial: {
764
- transition: 'all 0.5s ease-in-out',
765
- colors: {
766
- defaultIcon: '#FF7377',
767
- defaultIconHover: '#000000',
768
- },
769
- gap: {
770
- mobile: '5px',
771
- sm: '5px',
772
- md: '10px',
773
- lg: '10px',
774
- xl: '15px',
775
- '2xl': '15px',
776
- },
777
- },
778
-
779
- video: {
780
- playButton: {
781
- border: 'none',
782
- borderRadius: '1000px',
783
- iconColor: '#FF7377',
784
- backgroundColor: '#FF7377',
785
- width: {
786
- mobile: '50px',
787
- sm: '50px',
788
- md: '50px',
789
- lg: '75px',
790
- xl: '75px',
791
- '2xl': '75px',
792
- },
793
- height: {
794
- mobile: '50px',
795
- sm: '50px',
796
- md: '50px',
797
- lg: '75px',
798
- xl: '75px',
799
- '2xl': '75px',
800
- },
801
- },
802
- pauseButton: {
803
- border: 'none',
804
- borderRadius: '1000px',
805
- iconColor: '#FF7377',
806
- backgroundColor: '#FF7377',
807
- width: {
808
- mobile: '50px',
809
- sm: '50px',
810
- md: '50px',
811
- lg: '75px',
812
- xl: '75px',
813
- '2xl': '75px',
814
- },
815
- height: {
816
- mobile: '50px',
817
- sm: '50px',
818
- md: '50px',
819
- lg: '75px',
820
- xl: '75px',
821
- '2xl': '75px',
822
- },
823
- },
824
- soundButton: {
825
- border: 'none',
826
- borderRadius: '1000px',
827
- iconColor: '#FF7377',
828
- backgroundColor: '#FF7377',
829
- width: {
830
- mobile: '50px',
831
- sm: '50px',
832
- md: '50px',
833
- lg: '75px',
834
- xl: '75px',
835
- '2xl': '75px',
836
- },
837
- height: {
838
- mobile: '50px',
839
- sm: '50px',
840
- md: '50px',
841
- lg: '75px',
842
- xl: '75px',
843
- '2xl': '75px',
844
- },
845
- },
846
- closeButton: {
847
- border: 'none',
848
- borderRadius: '1000px',
849
- iconColor: '#FF7377',
850
- backgroundColor: '#FF7377',
851
- width: {
852
- mobile: '50px',
853
- sm: '50px',
854
- md: '50px',
855
- lg: '75px',
856
- xl: '75px',
857
- '2xl': '75px',
858
- },
859
- height: {
860
- mobile: '50px',
861
- sm: '50px',
862
- md: '50px',
863
- lg: '75px',
864
- xl: '75px',
865
- '2xl': '75px',
866
- },
867
- },
868
- },
869
-
870
- carousel: {
871
- iconColor: '#FF7377',
872
- gap: {
873
- mobile: '15',
874
- sm: '15',
875
- md: '30',
876
- lg: '30',
877
- xl: '50',
878
- '2xl': '50',
879
- },
880
- nav: {
881
- borderRadius: '1000px',
882
- backgroundColor: '#FF7377',
883
- width: {
884
- mobile: '15',
885
- sm: '15',
886
- md: '30',
887
- lg: '30',
888
- xl: '50',
889
- '2xl': '50',
890
- },
891
- height: {
892
- mobile: '15',
893
- sm: '15',
894
- md: '30',
895
- lg: '30',
896
- xl: '50',
897
- '2xl': '50',
898
- },
899
- },
900
- bullet: {
901
- borderRadius: '1000px',
902
- bottom: {
903
- mobile: '15px',
904
- sm: '15px',
905
- md: '30px',
906
- lg: '30px',
907
- xl: '50px',
908
- '2xl': '50px',
909
- },
910
- backgroundColor: '#FF7377',
911
- activeBackgroundColor: '#FF7377',
912
- gap: {
913
- mobile: '15',
914
- sm: '15',
915
- md: '30',
916
- lg: '30',
917
- xl: '50',
918
- '2xl': '50',
919
- },
920
- width: {
921
- mobile: '15',
922
- sm: '15',
923
- md: '30',
924
- lg: '30',
925
- xl: '50',
926
- '2xl': '50',
927
- },
928
- height: {
929
- mobile: '15',
930
- sm: '15',
931
- md: '30',
932
- lg: '30',
933
- xl: '50',
934
- '2xl': '50',
935
- },
936
- },
937
- },
265
+ ...themeVideoDark,
938
266
  };