@latte-macchiat-io/latte-vanilla-components 0.0.191 → 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 (99) hide show
  1. package/package.json +4 -1
  2. package/src/components/Actions/index.tsx +20 -0
  3. package/src/components/Actions/styles.css.ts +54 -0
  4. package/src/components/Button/index.tsx +29 -0
  5. package/src/components/Button/stories.tsx +4 -22
  6. package/src/components/Button/styles.css.ts +131 -0
  7. package/src/components/Carousel/{Carousel.tsx → index.tsx} +18 -115
  8. package/src/components/Carousel/styles.css.ts +176 -0
  9. package/src/components/Columns/index.tsx +36 -0
  10. package/src/components/Columns/styles.css.ts +70 -0
  11. package/src/components/ConsentCookie/ConsentCookie.css.ts +1 -1
  12. package/src/components/ConsentCookie/ConsentCookie.tsx +3 -3
  13. package/src/components/Footer/index.tsx +21 -0
  14. package/src/components/Footer/styles.css.ts +33 -0
  15. package/src/components/Form/Form.css.ts +1 -1
  16. package/src/components/Form/Row/Row.css.ts +1 -1
  17. package/src/components/Form/TextField/Input/Input.css.ts +1 -1
  18. package/src/components/Form/TextField/Label/Label.css.ts +1 -1
  19. package/src/components/Form/TextField/TextField.css.ts +1 -1
  20. package/src/components/Form/TextField/Textarea/Textarea.css.ts +1 -1
  21. package/src/components/Header/index.tsx +53 -0
  22. package/src/components/Header/styles.css.ts +89 -0
  23. package/src/components/Heading/index.tsx +22 -0
  24. package/src/components/Heading/styles.css.ts +66 -0
  25. package/src/components/Heading/types.tsx +1 -0
  26. package/src/components/Icon/index.tsx +25 -0
  27. package/src/components/Icon/style.css.ts +11 -0
  28. package/src/components/KeyNumber/index.tsx +51 -0
  29. package/src/components/KeyNumber/styles.css.ts +76 -0
  30. package/src/components/LanguageSwitcher/index.tsx +80 -0
  31. package/src/components/LanguageSwitcher/{LanguageSwitcher.css.ts → styles.css.ts} +1 -1
  32. package/src/components/Logo/index.tsx +13 -0
  33. package/src/components/Logo/styles.css.ts +14 -0
  34. package/src/components/Main/index.tsx +17 -0
  35. package/src/components/Main/styles.css.ts +14 -0
  36. package/src/components/Modal/index.tsx +42 -0
  37. package/src/components/Modal/stories.tsx +14 -358
  38. package/src/components/Modal/styles.css.ts +90 -0
  39. package/src/components/Nav/index.tsx +22 -0
  40. package/src/components/Nav/styles.css.ts +30 -0
  41. package/src/components/NavLegal/index.tsx +17 -0
  42. package/src/components/NavLegal/styles.css.ts +20 -0
  43. package/src/components/NavSocial/index.tsx +32 -0
  44. package/src/components/NavSocial/styles.css.ts +33 -0
  45. package/src/components/Section/index.tsx +20 -0
  46. package/src/components/Section/stories.tsx +5 -57
  47. package/src/components/Section/styles.css.ts +106 -0
  48. package/src/components/ThemeTest/ThemeTest.css.ts +11 -0
  49. package/src/components/ThemeTest/ThemeTest.tsx +12 -0
  50. package/src/components/ThemeToggle/ThemeToggle.tsx +30 -0
  51. package/src/components/Video/index.tsx +117 -0
  52. package/src/components/Video/styles.css.ts +200 -0
  53. package/src/index.ts +29 -41
  54. package/src/styles/mediaqueries.ts +2 -0
  55. package/src/styles/sprinkles.css.ts +11 -8
  56. package/src/theme/baseThemeValues.ts +1235 -0
  57. package/src/theme/contract.css.ts +676 -0
  58. package/src/{themes → theme}/createTheme.ts +40 -1
  59. package/src/theme/default.css.ts +10 -0
  60. package/src/utils/combineResponsive.ts +9 -0
  61. package/src/utils/generateResponsiveMedia.ts +19 -0
  62. package/src/components/Actions/Actions.css.ts +0 -113
  63. package/src/components/Actions/Actions.tsx +0 -132
  64. package/src/components/Button/Button.css.ts +0 -119
  65. package/src/components/Button/Button.tsx +0 -132
  66. package/src/components/Carousel/Carousel.css.ts +0 -179
  67. package/src/components/Columns/Columns.css.ts +0 -185
  68. package/src/components/Columns/Columns.tsx +0 -142
  69. package/src/components/Footer/Footer.css.ts +0 -108
  70. package/src/components/Footer/Footer.tsx +0 -130
  71. package/src/components/Header/Header.css.ts +0 -111
  72. package/src/components/Header/Header.tsx +0 -158
  73. package/src/components/Icon/Icon.css.ts +0 -101
  74. package/src/components/Icon/Icon.tsx +0 -159
  75. package/src/components/KeyNumber/KeyNumber.css.ts +0 -158
  76. package/src/components/KeyNumber/KeyNumber.tsx +0 -166
  77. package/src/components/LanguageSwitcher/LanguageSwitcher.tsx +0 -168
  78. package/src/components/Logo/Logo.css.ts +0 -98
  79. package/src/components/Logo/Logo.tsx +0 -137
  80. package/src/components/Main/Main.css.ts +0 -62
  81. package/src/components/Main/Main.tsx +0 -130
  82. package/src/components/Modal/Modal.css.ts +0 -203
  83. package/src/components/Modal/Modal.tsx +0 -194
  84. package/src/components/Nav/Nav.css.ts +0 -123
  85. package/src/components/Nav/Nav.tsx +0 -130
  86. package/src/components/NavLegal/NavLegal.css.ts +0 -121
  87. package/src/components/NavLegal/NavLegal.tsx +0 -133
  88. package/src/components/NavSocial/NavSocial.css.ts +0 -121
  89. package/src/components/NavSocial/NavSocial.tsx +0 -169
  90. package/src/components/Section/Section.css.ts +0 -101
  91. package/src/components/Section/Section.tsx +0 -130
  92. package/src/components/Video/Video.css.ts +0 -210
  93. package/src/components/Video/Video.tsx +0 -243
  94. package/src/components/VideoFullWidth/VideoFullWidth.css.ts +0 -50
  95. package/src/components/VideoFullWidth/VideoFullWidth.tsx +0 -152
  96. package/src/components/VideoFullWidth/export.tsx +0 -2
  97. package/src/themes/baseThemeValues.ts +0 -160
  98. package/src/themes/contract.css.ts +0 -83
  99. package/src/types/withClassName.ts +0 -4
@@ -0,0 +1,676 @@
1
+ import { createGlobalThemeContract } from '@vanilla-extract/css';
2
+
3
+ // Define a theme contract with design tokens using createGlobalThemeContract
4
+ // This enables predictable CSS variable names for external consumption and runtime overrides
5
+ export const themeContract = createGlobalThemeContract({
6
+ colors: {
7
+ primary: 'latte-colors-primary',
8
+ secondary: 'latte-colors-secondary',
9
+ accent: 'latte-colors-accent',
10
+ background: 'latte-colors-background',
11
+ surface: 'latte-colors-surface',
12
+ text: 'latte-colors-text',
13
+ textSecondary: 'latte-colors-textSecondary',
14
+ textLight: 'latte-colors-textLight',
15
+ border: 'latte-colors-border',
16
+ error: 'latte-colors-error',
17
+ warning: 'latte-colors-warning',
18
+ success: 'latte-colors-success',
19
+ info: 'latte-colors-info',
20
+ },
21
+ space: {
22
+ none: 'latte-space-none',
23
+ xs: 'latte-space-xs',
24
+ sm: 'latte-space-sm',
25
+ md: 'latte-space-md',
26
+ lg: 'latte-space-lg',
27
+ xl: 'latte-space-xl',
28
+ '2xl': 'latte-space-2xl',
29
+ },
30
+ radii: {
31
+ none: 'latte-radii-none',
32
+ sm: 'latte-radii-sm',
33
+ md: 'latte-radii-md',
34
+ lg: 'latte-radii-lg',
35
+ xl: 'latte-radii-xl',
36
+ full: 'latte-radii-full',
37
+ },
38
+ fonts: {
39
+ body: 'latte-fonts-body',
40
+ heading: 'latte-fonts-heading',
41
+ mono: 'latte-fonts-mono',
42
+ },
43
+ fontSizes: {
44
+ xs: 'latte-fontSizes-xs',
45
+ sm: 'latte-fontSizes-sm',
46
+ md: 'latte-fontSizes-md',
47
+ lg: 'latte-fontSizes-lg',
48
+ xl: 'latte-fontSizes-xl',
49
+ '2xl': 'latte-fontSizes-2xl',
50
+ '3xl': 'latte-fontSizes-3xl',
51
+ '4xl': 'latte-fontSizes-4xl',
52
+ },
53
+ fontWeights: {
54
+ light: 'latte-fontWeights-light',
55
+ normal: 'latte-fontWeights-normal',
56
+ medium: 'latte-fontWeights-medium',
57
+ semibold: 'latte-fontWeights-semibold',
58
+ bold: 'latte-fontWeights-bold',
59
+ },
60
+ lineHeights: {
61
+ tight: 'latte-lineHeights-tight',
62
+ normal: 'latte-lineHeights-normal',
63
+ relaxed: 'latte-lineHeights-relaxed',
64
+ },
65
+ shadows: {
66
+ none: 'latte-shadows-none',
67
+ sm: 'latte-shadows-sm',
68
+ md: 'latte-shadows-md',
69
+ lg: 'latte-shadows-lg',
70
+ xl: 'latte-shadows-xl',
71
+ },
72
+ maxWidth: 'latte-maxWidth',
73
+
74
+ global: {
75
+ paddingRight: {
76
+ mobile: 'latte-global-paddingRight-mobile',
77
+ sm: 'latte-global-paddingRight-sm',
78
+ md: 'latte-global-paddingRight-md',
79
+ lg: 'latte-global-paddingRight-lg',
80
+ xl: 'latte-global-paddingRight-xl',
81
+ '2xl': 'latte-global-paddingRight-2xl',
82
+ },
83
+ paddingRightNeg: {
84
+ mobile: 'latte-global-paddingRightNeg-mobile',
85
+ sm: 'latte-global-paddingRightNeg-sm',
86
+ md: 'latte-global-paddingRightNeg-md',
87
+ lg: 'latte-global-paddingRightNeg-lg',
88
+ xl: 'latte-global-paddingRightNeg-xl',
89
+ '2xl': 'latte-global-paddingRightNeg-2xl',
90
+ },
91
+ paddingLeft: {
92
+ mobile: 'latte-global-paddingLeft-mobile',
93
+ sm: 'latte-global-paddingLeft-sm',
94
+ md: 'latte-global-paddingLeft-md',
95
+ lg: 'latte-global-paddingLeft-lg',
96
+ xl: 'latte-global-paddingLeft-xl',
97
+ '2xl': 'latte-global-paddingLeft-2xl',
98
+ },
99
+ paddingLeftNeg: {
100
+ mobile: 'latte-global-paddingLefttNeg-mobile',
101
+ sm: 'latte-global-paddingLefttNeg-sm',
102
+ md: 'latte-global-paddingLefttNeg-md',
103
+ lg: 'latte-global-paddingLefttNeg-lg',
104
+ xl: 'latte-global-paddingLefttNeg-xl',
105
+ '2xl': 'latte-global-paddingLefttNeg-2xl',
106
+ },
107
+ },
108
+
109
+ main: {
110
+ minHeight: 'latte-main-minHeight',
111
+ backgroundColor: 'latte-main-backgroundColor',
112
+ },
113
+
114
+ section: {
115
+ gap: {
116
+ mobile: 'latte-section-gap-mobile',
117
+ sm: 'latte-section-gap-sm',
118
+ md: 'latte-section-gap-md',
119
+ lg: 'latte-section-gap-lg',
120
+ xl: 'latte-section-gap-xl',
121
+ '2xl': 'latte-section-gap-2xl',
122
+ },
123
+ paddingTop: {
124
+ mobile: 'latte-section-paddingTop-mobile',
125
+ sm: 'latte-section-paddingTop-sm',
126
+ md: 'latte-section-paddingTop-md',
127
+ lg: 'latte-section-paddingTop-lg',
128
+ xl: 'latte-section-paddingTop-xl',
129
+ '2xl': 'latte-section-paddingTop-2xl',
130
+ },
131
+ paddingBottom: {
132
+ mobile: 'latte-section-paddingBottom-mobile',
133
+ sm: 'latte-section-paddingBottom-sm',
134
+ md: 'latte-section-paddingBottom-md',
135
+ lg: 'latte-section-paddingBottom-lg',
136
+ xl: 'latte-section-paddingBottom-xl',
137
+ '2xl': 'latte-section-paddingBottom-2xl',
138
+ },
139
+ },
140
+ header: {
141
+ fontSize: 'latte-header-fontSize',
142
+ backgroundColor: 'latte-header-backgroundColor',
143
+ height: {
144
+ mobile: 'latte-header-height-mobile',
145
+ sm: 'latte-header-height-sm',
146
+ md: 'latte-header-height-md',
147
+ lg: 'latte-header-height-lg',
148
+ xl: 'latte-header-height-xl',
149
+ '2xl': 'latte-header-height-2xl',
150
+ },
151
+ gap: {
152
+ mobile: 'latte-header-gap-mobile',
153
+ sm: 'latte-header-gap-sm',
154
+ md: 'latte-header-gap-md',
155
+ lg: 'latte-header-gap-lg',
156
+ xl: 'latte-header-gap-xl',
157
+ '2xl': 'latte-header-gap-2xl',
158
+ },
159
+ paddingTop: {
160
+ mobile: 'latte-header-paddingTop-mobile',
161
+ sm: 'latte-header-paddingTop-sm',
162
+ md: 'latte-header-paddingTop-md',
163
+ lg: 'latte-header-paddingTop-lg',
164
+ xl: 'latte-header-paddingTop-xl',
165
+ '2xl': 'latte-header-paddingTop-2xl',
166
+ },
167
+ paddingBottom: {
168
+ mobile: 'latte-header-paddingBottom-mobile',
169
+ sm: 'latte-header-paddingBottom-sm',
170
+ md: 'latte-header-paddingBottom-md',
171
+ lg: 'latte-header-paddingBottom-lg',
172
+ xl: 'latte-header-paddingBottom-xl',
173
+ '2xl': 'latte-header-paddingBottom-2xl',
174
+ },
175
+ },
176
+ footer: {
177
+ fontSize: 'latte-footer-fontSize',
178
+ backgroundColor: 'latte-footer-backgroundColor',
179
+ height: {
180
+ mobile: 'latte-footer-height-mobile',
181
+ sm: 'latte-footer-height-sm',
182
+ md: 'latte-footer-height-md',
183
+ lg: 'latte-footer-height-lg',
184
+ xl: 'latte-footer-height-xl',
185
+ '2xl': 'latte-footer-height-2xl',
186
+ },
187
+ gap: {
188
+ mobile: 'latte-footer-gap-mobile',
189
+ sm: 'latte-footer-gap-sm',
190
+ md: 'latte-footer-gap-md',
191
+ lg: 'latte-footer-gap-lg',
192
+ xl: 'latte-footer-gap-xl',
193
+ '2xl': 'latte-footer-gap-2xl',
194
+ },
195
+ paddingTop: {
196
+ mobile: 'latte-footer-paddingTop-mobile',
197
+ sm: 'latte-footer-paddingTop-sm',
198
+ md: 'latte-footer-paddingTop-md',
199
+ lg: 'latte-footer-paddingTop-lg',
200
+ xl: 'latte-footer-paddingTop-xl',
201
+ '2xl': 'latte-footer-paddingTop-2xl',
202
+ },
203
+ paddingBottom: {
204
+ mobile: 'latte-footer-paddingBottom-mobile',
205
+ sm: 'latte-footer-paddingBottom-sm',
206
+ md: 'latte-footer-paddingBottom-md',
207
+ lg: 'latte-footer-paddingBottom-lg',
208
+ xl: 'latte-footer-paddingBottom-xl',
209
+ '2xl': 'latte-footer-paddingBottom-2xl',
210
+ },
211
+ },
212
+
213
+ columns: {
214
+ gap: {
215
+ mobile: 'latte-columns-gap-mobile',
216
+ sm: 'latte-columns-gap-sm',
217
+ md: 'latte-columns-gap-md',
218
+ lg: 'latte-columns-gap-lg',
219
+ xl: 'latte-columns-gap-xl',
220
+ '2xl': 'latte-columns-gap-2xl',
221
+ },
222
+ flex: {
223
+ mobile: 'latte-columns-flex-mobile',
224
+ sm: 'latte-columns-flex-sm',
225
+ md: 'latte-columns-flex-md',
226
+ lg: 'latte-columns-flex-lg',
227
+ xl: 'latte-columns-flex-xl',
228
+ '2xl': 'latte-columns-flex-2xl',
229
+ },
230
+ maxWidth: {
231
+ mobile: 'latte-columns-maxWidth-mobile',
232
+ sm: 'latte-columns-maxWidth-sm',
233
+ md: 'latte-columns-maxWidth-md',
234
+ lg: 'latte-columns-maxWidth-lg',
235
+ xl: 'latte-columns-maxWidth-xl',
236
+ '2xl': 'latte-columns-maxWidth-2xl',
237
+ },
238
+ },
239
+
240
+ actions: {
241
+ gap: {
242
+ mobile: 'latte-actions-gap-mobile',
243
+ sm: 'latte-actions-gap-sm',
244
+ md: 'latte-actions-gap-md',
245
+ lg: 'latte-actions-gap-lg',
246
+ xl: 'latte-actions-gap-xl',
247
+ '2xl': 'latte-actions-gap-2xl',
248
+ },
249
+ paddingTop: {
250
+ mobile: 'latte-actions-paddingTop-mobile',
251
+ sm: 'latte-actions-paddingTop-sm',
252
+ md: 'latte-actions-paddingTop-md',
253
+ lg: 'latte-actions-paddingTop-lg',
254
+ xl: 'latte-actions-paddingTop-xl',
255
+ '2xl': 'latte-actions-paddingTop-2xl',
256
+ },
257
+ paddingBottom: {
258
+ mobile: 'latte-actions-paddingBottom-mobile',
259
+ sm: 'latte-actions-paddingBottom-sm',
260
+ md: 'latte-actions-paddingBottom-md',
261
+ lg: 'latte-actions-paddingBottom-lg',
262
+ xl: 'latte-actions-paddingBottom-xl',
263
+ '2xl': 'latte-actions-paddingBottom-2xl',
264
+ },
265
+ },
266
+
267
+ button: {
268
+ minWidth: 'latte-button-minWidth',
269
+ fontWeight: 'latte-button-fontWeight',
270
+ transition: 'latte-button-transition',
271
+ fontFamily: 'latte-button-fontFamily',
272
+ borderRadius: 'latte-button-borderRadius',
273
+ letterSpacing: 'latte-button-letterSpacing',
274
+
275
+ variant: {
276
+ primary: {
277
+ color: 'latte-button-primary-color',
278
+ backgroundColor: 'latte-button-primary-backgroundColor',
279
+ },
280
+ secondary: {
281
+ color: 'latte-button-secondary-color',
282
+ backgroundColor: 'latte-button-secondary-backgroundColor',
283
+ },
284
+ },
285
+
286
+ size: {
287
+ small: {
288
+ paddingTop: {
289
+ mobile: 'latte-button-small-paddingTop-mobile',
290
+ sm: 'latte-button-small-paddingTop-sm',
291
+ md: 'latte-button-small-paddingTop-md',
292
+ lg: 'latte-button-small-paddingTop-lg',
293
+ xl: 'latte-button-small-paddingTop-xl',
294
+ '2xl': 'latte-button-small-paddingTop-2xl',
295
+ },
296
+ paddingRight: {
297
+ mobile: 'latte-button-small-paddingRight-mobile',
298
+ sm: 'latte-button-small-paddingRight-sm',
299
+ md: 'latte-button-small-paddingRight-md',
300
+ lg: 'latte-button-small-paddingRight-lg',
301
+ xl: 'latte-button-small-paddingRight-xl',
302
+ '2xl': 'latte-button-small-paddingRight-2xl',
303
+ },
304
+ paddingLeft: {
305
+ mobile: 'latte-button-small-paddingLeft-mobile',
306
+ sm: 'latte-button-small-paddingLeft-sm',
307
+ md: 'latte-button-small-paddingLeft-md',
308
+ lg: 'latte-button-small-paddingLeft-lg',
309
+ xl: 'latte-button-small-paddingLeft-xl',
310
+ '2xl': 'latte-button-small-paddingLeft-2xl',
311
+ },
312
+ paddingBottom: {
313
+ mobile: 'latte-button-small-paddingBottom-mobile',
314
+ sm: 'latte-button-small-paddingBottom-sm',
315
+ md: 'latte-button-small-paddingBottom-md',
316
+ lg: 'latte-button-small-paddingBottom-lg',
317
+ xl: 'latte-button-small-paddingBottom-xl',
318
+ '2xl': 'latte-button-small-paddingBottom-2xl',
319
+ },
320
+ },
321
+ medium: {
322
+ paddingTop: {
323
+ mobile: 'latte-button-medium-paddingTop-mobile',
324
+ sm: 'latte-button-medium-paddingTop-sm',
325
+ md: 'latte-button-medium-paddingTop-md',
326
+ lg: 'latte-button-medium-paddingTop-lg',
327
+ xl: 'latte-button-medium-paddingTop-xl',
328
+ '2xl': 'latte-button-medium-paddingTop-2xl',
329
+ },
330
+ paddingRight: {
331
+ mobile: 'latte-button-medium-paddingRight-mobile',
332
+ sm: 'latte-button-medium-paddingRight-sm',
333
+ md: 'latte-button-medium-paddingRight-md',
334
+ lg: 'latte-button-medium-paddingRight-lg',
335
+ xl: 'latte-button-medium-paddingRight-xl',
336
+ '2xl': 'latte-button-medium-paddingRight-2xl',
337
+ },
338
+ paddingLeft: {
339
+ mobile: 'latte-button-medium-paddingLeft-mobile',
340
+ sm: 'latte-button-medium-paddingLeft-sm',
341
+ md: 'latte-button-medium-paddingLeft-md',
342
+ lg: 'latte-button-medium-paddingLeft-lg',
343
+ xl: 'latte-button-medium-paddingLeft-xl',
344
+ '2xl': 'latte-button-medium-paddingLeft-2xl',
345
+ },
346
+ paddingBottom: {
347
+ mobile: 'latte-button-medium-paddingBottom-mobile',
348
+ sm: 'latte-button-medium-paddingBottom-sm',
349
+ md: 'latte-button-medium-paddingBottom-md',
350
+ lg: 'latte-button-medium-paddingBottom-lg',
351
+ xl: 'latte-button-medium-paddingBottom-xl',
352
+ '2xl': 'latte-button-medium-paddingBottom-2xl',
353
+ },
354
+ },
355
+ large: {
356
+ paddingTop: {
357
+ mobile: 'latte-button-large-paddingTop-mobile',
358
+ sm: 'latte-button-large-paddingTop-sm',
359
+ md: 'latte-button-large-paddingTop-md',
360
+ lg: 'latte-button-large-paddingTop-lg',
361
+ xl: 'latte-button-large-paddingTop-xl',
362
+ '2xl': 'latte-button-large-paddingTop-2xl',
363
+ },
364
+ paddingRight: {
365
+ mobile: 'latte-button-large-paddingRight-mobile',
366
+ sm: 'latte-button-large-paddingRight-sm',
367
+ md: 'latte-button-large-paddingRight-md',
368
+ lg: 'latte-button-large-paddingRight-lg',
369
+ xl: 'latte-button-large-paddingRight-xl',
370
+ '2xl': 'latte-button-large-paddingRight-2xl',
371
+ },
372
+ paddingLeft: {
373
+ mobile: 'latte-button-large-paddingLeft-mobile',
374
+ sm: 'latte-button-large-paddingLeft-sm',
375
+ md: 'latte-button-large-paddingLeft-md',
376
+ lg: 'latte-button-large-paddingLeft-lg',
377
+ xl: 'latte-button-large-paddingLeft-xl',
378
+ '2xl': 'latte-button-large-paddingLeft-2xl',
379
+ },
380
+ paddingBottom: {
381
+ mobile: 'latte-button-large-paddingBottom-mobile',
382
+ sm: 'latte-button-large-paddingBottom-sm',
383
+ md: 'latte-button-large-paddingBottom-md',
384
+ lg: 'latte-button-large-paddingBottom-lg',
385
+ xl: 'latte-button-large-paddingBottom-xl',
386
+ '2xl': 'latte-button-large-paddingBottom-2xl',
387
+ },
388
+ },
389
+ },
390
+ },
391
+
392
+ icon: {
393
+ color: 'latte-icon-color',
394
+ },
395
+
396
+ modal: {
397
+ border: 'latte-modal-border',
398
+ borderRadius: 'latte-modal-borderRadius',
399
+ backgroundColor: 'latte-modal-backgroundColor',
400
+
401
+ overlayBlur: 'latte-modal-overlayBlur',
402
+ overlayBackgroundColor: 'latte-modal-overlayBackgroundColor',
403
+
404
+ closeButtonRightPosition: {
405
+ mobile: 'latte-modal-closeButtonRightPosition-mobile',
406
+ sm: 'latte-modal-closeButtonRightPosition-sm',
407
+ md: 'latte-modal-closeButtonRightPosition-md',
408
+ lg: 'latte-modal-closeButtonRightPosition-lg',
409
+ xl: 'latte-modal-closeButtonRightPosition-xl',
410
+ '2xl': 'latte-modal-closeButtonRightPosition-2xl',
411
+ },
412
+ closeButtonTopPosition: {
413
+ mobile: 'latte-modal-closeButtonTopPosition-mobile',
414
+ sm: 'latte-modal-closeButtonTopPosition-sm',
415
+ md: 'latte-modal-closeButtonTopPosition-md',
416
+ lg: 'latte-modal-closeButtonTopPosition-lg',
417
+ xl: 'latte-modal-closeButtonTopPosition-xl',
418
+ '2xl': 'latte-modal-closeButtonTopPosition-2xl',
419
+ },
420
+ gap: {
421
+ mobile: 'latte-modal-gap-mobile',
422
+ sm: 'latte-modal-gap-sm',
423
+ md: 'latte-modal-gap-md',
424
+ lg: 'latte-modal-gap-lg',
425
+ xl: 'latte-modal-gap-xl',
426
+ '2xl': 'latte-modal-gap-2xl',
427
+ },
428
+ width: {
429
+ mobile: 'latte-modal-width-mobile',
430
+ sm: 'latte-modal-width-sm',
431
+ md: 'latte-modal-width-md',
432
+ lg: 'latte-modal-width-lg',
433
+ xl: 'latte-modal-width-xl',
434
+ '2xl': 'latte-modal-width-2xl',
435
+ },
436
+ paddingTop: {
437
+ mobile: 'latte-modal-paddingTop-mobile',
438
+ sm: 'latte-modal-gpaddingTopap-sm',
439
+ md: 'latte-modal-paddingTop-md',
440
+ lg: 'latte-modal-paddingTop-lg',
441
+ xl: 'latte-modal-paddingTop-xl',
442
+ '2xl': 'latte-modal-paddingTop-2xl',
443
+ },
444
+ paddingBottom: {
445
+ mobile: 'latte-modal-paddingBottom-mobile',
446
+ sm: 'latte-modal-paddingBottom-sm',
447
+ md: 'latte-modal-paddingBottom-md',
448
+ lg: 'latte-modal-paddingBottom-lg',
449
+ xl: 'latte-modal-paddingBottom-xl',
450
+ '2xl': 'latte-modal-paddingBottom-2xl',
451
+ },
452
+ },
453
+
454
+ keyNumber: {
455
+ fontSize: {
456
+ large: 'latte-keyNumber-fontSize-large',
457
+ xlarge: 'latte-keyNumber-fontSize-xlarge',
458
+ },
459
+ paddingTop: {
460
+ mobile: 'latte-keyNumber-paddingTop-mobile',
461
+ sm: 'latte-keyNumber-paddingTop-sm',
462
+ md: 'latte-keyNumber-paddingTop-md',
463
+ lg: 'latte-keyNumber-paddingTop-lg',
464
+ xl: 'latte-keyNumber-paddingTop-xl',
465
+ '2xl': 'latte-keyNumber-paddingTop-2xl',
466
+ },
467
+ paddingBottom: {
468
+ mobile: 'latte-keyNumber-paddingBottom-mobile',
469
+ sm: 'latte-keyNumber-paddingBottom-sm',
470
+ md: 'latte-keyNumber-paddingBottom-md',
471
+ lg: 'latte-keyNumber-paddingBottom-lg',
472
+ xl: 'latte-keyNumber-paddingBottom-xl',
473
+ '2xl': 'latte-keyNumber-paddingBottom-2xl',
474
+ },
475
+ },
476
+
477
+ nav: {
478
+ gap: {
479
+ mobile: 'latte-nav-gap-mobile',
480
+ sm: 'latte-nav-gap-sm',
481
+ md: 'latte-nav-gap-md',
482
+ lg: 'latte-nav-gap-lg',
483
+ xl: 'latte-nav-gap-xl',
484
+ '2xl': 'latte-nav-gap-2xl',
485
+ },
486
+ },
487
+
488
+ navLegal: {
489
+ gap: {
490
+ mobile: 'latte-navLegal-gap-mobile',
491
+ sm: 'latte-navLegal-gap-sm',
492
+ md: 'latte-navLegal-gap-md',
493
+ lg: 'latte-navLegal-gap-lg',
494
+ xl: 'latte-navLegal-gap-xl',
495
+ '2xl': 'latte-navLegal-gap-2xl',
496
+ },
497
+ },
498
+
499
+ navSocial: {
500
+ transition: 'latte-navSocial-transition',
501
+ colors: {
502
+ defaultIcon: 'latte-navSocial-colors-defaultIcon',
503
+ defaultIconHover: 'latte-navSocial-colors-defaultIconHover',
504
+ },
505
+ gap: {
506
+ mobile: 'latte-navSocial-gap-mobile',
507
+ sm: 'latte-navSocial-gap-sm',
508
+ md: 'latte-navSocial-gap-md',
509
+ lg: 'latte-navSocial-gap-lg',
510
+ xl: 'latte-navSocial-gap-xl',
511
+ '2xl': 'latte-navSocial-gap-2xl',
512
+ },
513
+ },
514
+
515
+ video: {
516
+ playButton: {
517
+ border: 'latte-video-playButton-border',
518
+ iconColor: 'latte-video-playButton-iconColor',
519
+ borderRadius: 'latte-video-playButton-borderRadius',
520
+ backgroundColor: 'latte-video-playButton-backgroundColor',
521
+ width: {
522
+ mobile: 'latte-video-playButton-width-mobile',
523
+ sm: 'latte-video-playButton-width-sm',
524
+ md: 'latte-video-playButton-width-md',
525
+ lg: 'latte-video-playButton-width-lg',
526
+ xl: 'latte-video-playButton-width-xl',
527
+ '2xl': 'latte-video-playButton-width-2xl',
528
+ },
529
+ height: {
530
+ mobile: 'latte-video-closeButton-height-mobile',
531
+ sm: 'latte-video-closeButton-height-sm',
532
+ md: 'latte-video-closeButton-height-md',
533
+ lg: 'latte-video-closeButton-height-lg',
534
+ xl: 'latte-video-closeButton-height-xl',
535
+ '2xl': 'latte-video-closeButton-height-2xl',
536
+ },
537
+ },
538
+ pauseButton: {
539
+ border: 'latte-video-pauseButton-border',
540
+ iconColor: 'latte-video-pauseButton-iconColor',
541
+ borderRadius: 'latte-video-pauseButton-borderRadius',
542
+ backgroundColor: 'latte-video-pauseButton-backgroundColor',
543
+ width: {
544
+ mobile: 'latte-video-pauseButton-width-mobile',
545
+ sm: 'latte-video-pauseButton-width-sm',
546
+ md: 'latte-video-pauseButton-width-md',
547
+ lg: 'latte-video-pauseButton-width-lg',
548
+ xl: 'latte-video-pauseButton-width-xl',
549
+ '2xl': 'latte-video-pauseButton-width-2xl',
550
+ },
551
+ height: {
552
+ mobile: 'latte-video-pauseButton-height-mobile',
553
+ sm: 'latte-video-pauseButton-height-sm',
554
+ md: 'latte-video-pauseButton-height-md',
555
+ lg: 'latte-video-pauseButton-height-lg',
556
+ xl: 'latte-video-pauseButton-height-xl',
557
+ '2xl': 'latte-video-pauseButton-height-2xl',
558
+ },
559
+ },
560
+ soundButton: {
561
+ border: 'latte-video-soundButton-border',
562
+ iconColor: 'latte-video-soundButton-iconColor',
563
+ borderRadius: 'latte-video-soundButton-borderRadius',
564
+ backgroundColor: 'latte-video-soundButton-backgroundColor',
565
+ width: {
566
+ mobile: 'latte-video-soundButton-width-mobile',
567
+ sm: 'latte-video-soundButton-width-sm',
568
+ md: 'latte-video-soundButton-width-md',
569
+ lg: 'latte-video-soundButton-width-lg',
570
+ xl: 'latte-video-soundButton-width-xl',
571
+ '2xl': 'latte-video-soundButton-width-2xl',
572
+ },
573
+ height: {
574
+ mobile: 'latte-video-closeButton-height-mobile',
575
+ sm: 'latte-video-closeButton-height-sm',
576
+ md: 'latte-video-closeButton-height-md',
577
+ lg: 'latte-video-closeButton-height-lg',
578
+ xl: 'latte-video-closeButton-height-xl',
579
+ '2xl': 'latte-video-closeButton-height-2xl',
580
+ },
581
+ },
582
+ closeButton: {
583
+ border: 'latte-video-closeButton-border',
584
+ iconColor: 'latte-video-closeButton-iconColor',
585
+ borderRadius: 'latte-video-closeButton-borderRadius',
586
+ backgroundColor: 'latte-video-closeButton-backgroundColor',
587
+ width: {
588
+ mobile: 'latte-video-closeButton-width-mobile',
589
+ sm: 'latte-video-closeButton-width-sm',
590
+ md: 'latte-video-closeButton-width-md',
591
+ lg: 'latte-video-closeButton-width-lg',
592
+ xl: 'latte-video-closeButton-width-xl',
593
+ '2xl': 'latte-video-closeButton-width-2xl',
594
+ },
595
+ height: {
596
+ mobile: 'latte-video-closeButton-height-mobile',
597
+ sm: 'latte-video-closeButton-height-sm',
598
+ md: 'latte-video-closeButton-height-md',
599
+ lg: 'latte-video-closeButton-height-lg',
600
+ xl: 'latte-video-closeButton-height-xl',
601
+ '2xl': 'latte-video-closeButton-height-2xl',
602
+ },
603
+ },
604
+ },
605
+ carousel: {
606
+ iconColor: 'latte-carousel-iconColor',
607
+ gap: {
608
+ mobile: 'latte-carousel-gap-mobile',
609
+ sm: 'latte-carousel-gap-sm',
610
+ md: 'latte-carousel-gap-md',
611
+ lg: 'latte-carousel-gap-lg',
612
+ xl: 'latte-carousel-gap-xl',
613
+ '2xl': 'latte-carousel-gap-2xl',
614
+ },
615
+
616
+ nav: {
617
+ borderRadius: 'latte-carousel-nav-borderRadius',
618
+ backgroundColor: 'latte-carousel-nav-backgroundColor',
619
+ width: {
620
+ mobile: 'latte-carousel-nav-width-mobile',
621
+ sm: 'latte-carousel-nav-width-sm',
622
+ md: 'latte-carousel-nav-width-md',
623
+ lg: 'latte-carousel-nav-width-lg',
624
+ xl: 'latte-carousel-nav-width-xl',
625
+ '2xl': 'latte-carousel-nav-width-2xl',
626
+ },
627
+ height: {
628
+ mobile: 'latte-carousel-nav-height-mobile',
629
+ sm: 'latte-carousel-nav-height-sm',
630
+ md: 'latte-carousel-nav-height-md',
631
+ lg: 'latte-carousel-nav-height-lg',
632
+ xl: 'latte-carousel-nav-height-xl',
633
+ '2xl': 'latte-carousel-nav-height-2xl',
634
+ },
635
+ },
636
+
637
+ bullet: {
638
+ borderRadius: 'latte-carousel-bullet-borderRadius',
639
+ backgroundColor: 'latte-carousel-bullet-backgroundColor',
640
+ activeBackgroundColor: 'latte-carousel-bullet-active-backgroundColor',
641
+ bottom: {
642
+ mobile: 'latte-carousel-bullet-bottom-mobile',
643
+ sm: 'latte-carousel-bullet-bottom-sm',
644
+ md: 'latte-carousel-bullet-bottom-md',
645
+ lg: 'latte-carousel-bullet-bottom-lg',
646
+ xl: 'latte-carousel-bullet-bottom-xl',
647
+ '2xl': 'latte-carousel-bullet-bottom-2xl',
648
+ },
649
+
650
+ gap: {
651
+ mobile: 'latte-carousel-bullet-gap-mobile',
652
+ sm: 'latte-carousel-bullet-gap-sm',
653
+ md: 'latte-carousel-bullet-gap-md',
654
+ lg: 'latte-carousel-bullet-gap-lg',
655
+ xl: 'latte-carousel-bullet-gap-xl',
656
+ '2xl': 'latte-carousel-bullet-gap-2xl',
657
+ },
658
+ width: {
659
+ mobile: 'latte-carousel-bullet-width-mobile',
660
+ sm: 'latte-carousel-bullet-width-sm',
661
+ md: 'latte-carousel-bullet-width-md',
662
+ lg: 'latte-carousel-bullet-width-lg',
663
+ xl: 'latte-carousel-bullet-width-xl',
664
+ '2xl': 'latte-carousel-bullet-width-2xl',
665
+ },
666
+ height: {
667
+ mobile: 'latte-carousel-bullet-height-mobile',
668
+ sm: 'latte-carousel-bullet-height-sm',
669
+ md: 'latte-carousel-bullet-height-md',
670
+ lg: 'latte-carousel-bullet-height-lg',
671
+ xl: 'latte-carousel-bullet-height-xl',
672
+ '2xl': 'latte-carousel-bullet-height-2xl',
673
+ },
674
+ },
675
+ },
676
+ });