@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.
- package/README.md +16 -6
- package/package.json +4 -1
- package/src/components/Actions/index.tsx +20 -0
- package/src/components/Actions/styles.css.ts +54 -0
- package/src/components/Button/index.tsx +29 -0
- package/src/components/Button/stories.tsx +4 -22
- package/src/components/Button/styles.css.ts +131 -0
- package/src/components/Carousel/{Carousel.tsx → index.tsx} +18 -115
- package/src/components/Carousel/styles.css.ts +176 -0
- package/src/components/Columns/index.tsx +36 -0
- package/src/components/Columns/styles.css.ts +70 -0
- package/src/components/ConsentCookie/ConsentCookie.css.ts +1 -1
- package/src/components/ConsentCookie/ConsentCookie.tsx +3 -3
- package/src/components/Footer/index.tsx +21 -0
- package/src/components/Footer/styles.css.ts +33 -0
- package/src/components/Form/Form.css.ts +1 -1
- package/src/components/Form/Row/Row.css.ts +1 -1
- package/src/components/Form/TextField/Input/Input.css.ts +1 -1
- package/src/components/Form/TextField/Label/Label.css.ts +1 -1
- package/src/components/Form/TextField/TextField.css.ts +1 -1
- package/src/components/Form/TextField/Textarea/Textarea.css.ts +1 -1
- package/src/components/Header/index.tsx +53 -0
- package/src/components/Header/styles.css.ts +89 -0
- package/src/components/Heading/index.tsx +22 -0
- package/src/components/Heading/styles.css.ts +66 -0
- package/src/components/Heading/types.tsx +1 -0
- package/src/components/Icon/index.tsx +25 -0
- package/src/components/Icon/style.css.ts +11 -0
- package/src/components/KeyNumber/index.tsx +51 -0
- package/src/components/KeyNumber/styles.css.ts +76 -0
- package/src/components/LanguageSwitcher/index.tsx +80 -0
- package/src/components/LanguageSwitcher/{LanguageSwitcher.css.ts → styles.css.ts} +1 -1
- package/src/components/Logo/index.tsx +13 -0
- package/src/components/Logo/styles.css.ts +14 -0
- package/src/components/Main/index.tsx +17 -0
- package/src/components/Main/styles.css.ts +14 -0
- package/src/components/Modal/index.tsx +42 -0
- package/src/components/Modal/stories.tsx +14 -358
- package/src/components/Modal/styles.css.ts +90 -0
- package/src/components/Nav/index.tsx +22 -0
- package/src/components/Nav/styles.css.ts +30 -0
- package/src/components/NavLegal/index.tsx +17 -0
- package/src/components/NavLegal/styles.css.ts +20 -0
- package/src/components/NavSocial/index.tsx +32 -0
- package/src/components/NavSocial/styles.css.ts +33 -0
- package/src/components/Section/index.tsx +20 -0
- package/src/components/Section/stories.tsx +5 -57
- package/src/components/Section/styles.css.ts +106 -0
- package/src/components/ThemeTest/ThemeTest.css.ts +11 -0
- package/src/components/ThemeTest/ThemeTest.tsx +12 -0
- package/src/components/ThemeToggle/ThemeToggle.tsx +30 -0
- package/src/components/Video/index.tsx +117 -0
- package/src/components/Video/styles.css.ts +200 -0
- package/src/index.ts +29 -41
- package/src/styles/mediaqueries.ts +2 -0
- package/src/styles/sprinkles.css.ts +11 -8
- package/src/theme/baseThemeValues.ts +1235 -0
- package/src/theme/contract.css.ts +676 -0
- package/src/{themes → theme}/createTheme.ts +40 -1
- package/src/theme/default.css.ts +10 -0
- package/src/utils/combineResponsive.ts +9 -0
- package/src/utils/generateResponsiveMedia.ts +19 -0
- package/src/components/Actions/Actions.css.ts +0 -113
- package/src/components/Actions/Actions.tsx +0 -132
- package/src/components/Button/Button.css.ts +0 -119
- package/src/components/Button/Button.tsx +0 -132
- package/src/components/Carousel/Carousel.css.ts +0 -179
- package/src/components/Columns/Columns.css.ts +0 -185
- package/src/components/Columns/Columns.tsx +0 -142
- package/src/components/Footer/Footer.css.ts +0 -108
- package/src/components/Footer/Footer.tsx +0 -130
- package/src/components/Header/Header.css.ts +0 -111
- package/src/components/Header/Header.tsx +0 -158
- package/src/components/Icon/Icon.css.ts +0 -101
- package/src/components/Icon/Icon.tsx +0 -159
- package/src/components/KeyNumber/KeyNumber.css.ts +0 -158
- package/src/components/KeyNumber/KeyNumber.tsx +0 -166
- package/src/components/LanguageSwitcher/LanguageSwitcher.tsx +0 -168
- package/src/components/Logo/Logo.css.ts +0 -98
- package/src/components/Logo/Logo.tsx +0 -137
- package/src/components/Main/Main.css.ts +0 -62
- package/src/components/Main/Main.tsx +0 -130
- package/src/components/Modal/Modal.css.ts +0 -203
- package/src/components/Modal/Modal.tsx +0 -194
- package/src/components/Nav/Nav.css.ts +0 -123
- package/src/components/Nav/Nav.tsx +0 -130
- package/src/components/NavLegal/NavLegal.css.ts +0 -121
- package/src/components/NavLegal/NavLegal.tsx +0 -133
- package/src/components/NavSocial/NavSocial.css.ts +0 -121
- package/src/components/NavSocial/NavSocial.tsx +0 -169
- package/src/components/Section/Section.css.ts +0 -101
- package/src/components/Section/Section.tsx +0 -130
- package/src/components/Video/Video.css.ts +0 -210
- package/src/components/Video/Video.tsx +0 -243
- package/src/components/VideoFullWidth/VideoFullWidth.css.ts +0 -50
- package/src/components/VideoFullWidth/VideoFullWidth.tsx +0 -152
- package/src/components/VideoFullWidth/export.tsx +0 -2
- package/src/themes/baseThemeValues.ts +0 -160
- package/src/themes/contract.css.ts +0 -83
- package/src/types/withClassName.ts +0 -4
- /package/src/{utils → components/ConsentCookie}/cookie.ts +0 -0
@@ -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
|
+
});
|