@ab-demo-ui/demo-react 1.0.22 → 2.0.2

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.
@@ -0,0 +1,901 @@
1
+ /**
2
+ * Papyrus Theme - Mexican Cinema Inspired
3
+ * Sandy, matte, vintage aesthetic with warm tones
4
+ */
5
+
6
+ :root {
7
+ /* Sizing - slightly reduced for compact feel */
8
+ --theme-sizing-limit-input-min-width: 9rem;
9
+ --theme-grid-gutter-gutter: 1.25rem;
10
+ --theme-grid-breakpoint-sm: 36rem;
11
+ --theme-grid-breakpoint-md: 48rem;
12
+ --theme-grid-breakpoint-lg: 62rem;
13
+ --theme-grid-breakpoint-xl: 75rem;
14
+ --theme-grid-container-md: 45rem;
15
+ --theme-grid-container-lg: 60rem;
16
+ --theme-grid-container-xl: 71.25rem;
17
+ --theme-grid-container-sm: 33.75rem;
18
+
19
+ /* Elevation - subtle shadows for matte look */
20
+ --theme-elevation-elevation1-x: 0;
21
+ --theme-elevation-elevation1-y: 0.0625rem;
22
+ --theme-elevation-elevation1-blur: 0.1875rem;
23
+ --theme-elevation-elevation1-spread: 0;
24
+ --theme-elevation-elevation2-x: 0;
25
+ --theme-elevation-elevation2-y: 0.125rem;
26
+ --theme-elevation-elevation2-blur: 0.25rem;
27
+ --theme-elevation-elevation2-spread: 0;
28
+ --theme-elevation-elevation3-x: 0;
29
+ --theme-elevation-elevation3-y: 0.1875rem;
30
+ --theme-elevation-elevation3-blur: 0.375rem;
31
+ --theme-elevation-elevation3-spread: 0;
32
+ --theme-elevation-elevation4-x: 0;
33
+ --theme-elevation-elevation4-y: 0.25rem;
34
+ --theme-elevation-elevation4-blur: 0.5rem;
35
+ --theme-elevation-elevation4-spread: 0;
36
+ --theme-elevation-elevation5-x: 0;
37
+ --theme-elevation-elevation5-y: 0.375rem;
38
+ --theme-elevation-elevation5-blur: 0.75rem;
39
+ --theme-elevation-elevation5-spread: 0;
40
+ --theme-elevation-elevation6-x: 0;
41
+ --theme-elevation-elevation6-y: 0.5rem;
42
+ --theme-elevation-elevation6-blur: 1rem;
43
+ --theme-elevation-elevation6-spread: 0;
44
+ --theme-elevation-focusring-x: 0;
45
+ --theme-elevation-focusring-y: 0;
46
+ --theme-elevation-focusring-blur: 0;
47
+ --theme-elevation-focusring-white-x: 0;
48
+ --theme-elevation-focusring-white-y: 0;
49
+ --theme-elevation-focusring-white-blur: 0;
50
+
51
+ /* Base sizing - slightly more compact */
52
+ --base-sizing-1x: 0.0625rem;
53
+ --base-sizing-2x: 0.125rem;
54
+ --base-sizing-no-space: 0;
55
+ --base-sizing-4x: 0.25rem;
56
+ --base-sizing-6x: 0.375rem;
57
+ --base-sizing-8x: 0.5rem;
58
+ --base-sizing-10x: 0.625rem;
59
+ --base-sizing-12x: 0.75rem;
60
+ --base-sizing-16x: 0.875rem;
61
+ --base-sizing-20x: 1.125rem;
62
+ --base-sizing-24x: 1.375rem;
63
+ --base-sizing-32x: 1.875rem;
64
+ --base-sizing-28x: 1.625rem;
65
+ --base-sizing-48x: 2.75rem;
66
+ --base-sizing-64x: 3.75rem;
67
+ --base-sizing-128x: 7.5rem;
68
+ --base-sizing-14x: 0.8125rem;
69
+ --base-sizing-36x: 2.125rem;
70
+ --base-sizing-18x: 1rem;
71
+ --base-sizing-22x: 1.25rem;
72
+ --base-sizing-40x: 2.375rem;
73
+ --base-sizing-56x: 3.25rem;
74
+ --base-sizing-3x: 0.1875rem;
75
+ --base-sizing-72x: 4.25rem;
76
+ --base-sizing-80x: 4.75rem;
77
+ --base-sizing-96x: 5.75rem;
78
+ --base-sizing-44x: 2.625rem;
79
+ --base-sizing-256x: 15rem;
80
+ --base-sizing-512x: 30rem;
81
+ --base-sizing-52x: 3.125rem;
82
+ --base-sizing-320x: 19rem;
83
+ --base-sizing-160x: 9.5rem;
84
+ --base-sizing-192x: 11.5rem;
85
+ --base-sizing-400x: 25rem;
86
+ --base-sizing-296x: 18.5rem;
87
+ --base-sizing-344x: 21.5rem;
88
+ --base-sizing-480x: 30rem;
89
+ --base-sizing-720x: 45rem;
90
+
91
+ /* Radius - squarish, minimal rounding */
92
+ --base-radius-xs: 0.0625rem;
93
+ --base-radius-sm: 0.125rem;
94
+ --base-radius-md: 0.1875rem;
95
+ --base-radius-lg: 0.25rem;
96
+ --base-radius-xl: 0.375rem;
97
+ --base-radius-pill: 3rem;
98
+ --base-radius-xxl: 0.5rem;
99
+
100
+ /* Base colors - Sandy papyrus palette */
101
+ --base-colors-white-white: #f9f6f0ff;
102
+ --base-colors-white-white-overlay10: #f9f6f01a;
103
+ --base-colors-white-white-overlay25: #f9f6f040;
104
+ --base-colors-white-white-overlay50: #f9f6f080;
105
+ --base-colors-white-white-overlay75: #f9f6f0bf;
106
+ --base-colors-white-white-50: #f5f2ebff;
107
+ --base-colors-white-white-100: #efeade;
108
+ --base-colors-white-white-overlay90: #f9f6f0e6;
109
+
110
+ --base-colors-black-black: #2d2520ff;
111
+ --base-colors-black-black-overlay10: #2d25201a;
112
+ --base-colors-black-black-overlay25: #2d252040;
113
+ --base-colors-black-black-overlay50: #2d252080;
114
+ --base-colors-black-black-overlay75: #2d2520bf;
115
+ --base-colors-black-black-overlay40: #2d252066;
116
+ --base-colors-black-black-overlay15: #2d252026;
117
+ --base-colors-black-black-overlay20: #2d252033;
118
+
119
+ /* Terracotta/Clay primary theme */
120
+ --base-colors-bluetheme-bluetheme-50: #fdf5f0ff;
121
+ --base-colors-bluetheme-bluetheme-100: #f9e5d6ff;
122
+ --base-colors-bluetheme-bluetheme-200: #f2d0b8ff;
123
+ --base-colors-bluetheme-bluetheme-300: #e8b594ff;
124
+ --base-colors-bluetheme-bluetheme-400: #d99670ff;
125
+ --base-colors-bluetheme-bluetheme-500: #c47854ff;
126
+ --base-colors-bluetheme-bluetheme-600: #a96342ff;
127
+ --base-colors-bluetheme-bluetheme-700: #8a4e34ff;
128
+ --base-colors-bluetheme-bluetheme-800: #6d3d28ff;
129
+ --base-colors-bluetheme-bluetheme-900: #562f1fff;
130
+
131
+ /* Warm stone gray */
132
+ --base-colors-gray-gray-500: #6b5d54ff;
133
+ --base-colors-gray-gray-100: #d4cdc5ff;
134
+ --base-colors-gray-gray-50: #e8e3dcff;
135
+ --base-colors-gray-gray-200: #bfb5aaff;
136
+ --base-colors-gray-gray-300: #9d8f82ff;
137
+ --base-colors-gray-gray-400: #84756aff;
138
+ --base-colors-gray-gray-600: #5a4d44ff;
139
+ --base-colors-gray-gray-700: #4a3f37ff;
140
+ --base-colors-gray-gray-800: #3b332cff;
141
+ --base-colors-gray-gray-900: #2f2922ff;
142
+
143
+ /* Sandy beige */
144
+ --base-colors-lightgray-lightgray-50: #faf8f5ff;
145
+ --base-colors-lightgray-lightgray-100: #f1ede6ff;
146
+ --base-colors-lightgray-lightgray-200: #e7e1d8ff;
147
+ --base-colors-lightgray-lightgray-300: #dcd4c9ff;
148
+ --base-colors-lightgray-lightgray-400: #d1c8bbff;
149
+ --base-colors-lightgray-lightgray-500: #c5bbaeff;
150
+ --base-colors-lightgray-lightgray-600: #b3a799ff;
151
+ --base-colors-lightgray-lightgray-700: #8f8373ff;
152
+ --base-colors-lightgray-lightgray-800: #6e6559ff;
153
+ --base-colors-lightgray-lightgray-900: #544d43ff;
154
+
155
+ /* Darker earth tones */
156
+ --base-colors-darkgray-darkgray-50: #c4bbb3ff;
157
+ --base-colors-darkgray-darkgray-100: #a89d93ff;
158
+ --base-colors-darkgray-darkgray-200: #988c82ff;
159
+ --base-colors-darkgray-darkgray-300: #847770ff;
160
+ --base-colors-darkgray-darkgray-400: #736660ff;
161
+ --base-colors-darkgray-darkgray-500: #635650ff;
162
+ --base-colors-darkgray-darkgray-600: #544640ff;
163
+ --base-colors-darkgray-darkgray-700: #443832ff;
164
+ --base-colors-darkgray-darkgray-800: #362c27ff;
165
+ --base-colors-darkgray-darkgray-900: #29211dff;
166
+
167
+ /* Mauve/dusty purple accent */
168
+ --base-colors-purple-purple-50: #f5f1f3ff;
169
+ --base-colors-purple-purple-100: #e3d6dcff;
170
+ --base-colors-purple-purple-200: #d4c1c9ff;
171
+ --base-colors-purple-purple-300: #bfa3adff;
172
+ --base-colors-purple-purple-400: #af8c98ff;
173
+ --base-colors-purple-purple-500: #986f7bff;
174
+ --base-colors-purple-purple-600: #7f5963ff;
175
+ --base-colors-purple-purple-700: #63464eff;
176
+ --base-colors-purple-purple-800: #4d363cff;
177
+ --base-colors-purple-purple-900: #3b2a2eff;
178
+
179
+ /* Dusty blue (like old denim) */
180
+ --base-colors-blue-blue-50: #f1f3f5ff;
181
+ --base-colors-blue-blue-100: #d9dfe4ff;
182
+ --base-colors-blue-blue-200: #c5cdd6ff;
183
+ --base-colors-blue-blue-300: #a8b5c1ff;
184
+ --base-colors-blue-blue-400: #94a3b2ff;
185
+ --base-colors-blue-blue-500: #778a9bff;
186
+ --base-colors-blue-blue-600: #627285ff;
187
+ --base-colors-blue-blue-700: #4d5c68ff;
188
+ --base-colors-blue-blue-800: #3c4750ff;
189
+ --base-colors-blue-blue-900: #2e363dff;
190
+
191
+ /* Brick red */
192
+ --base-colors-red-red-50: #faf2f1ff;
193
+ --base-colors-red-red-100: #eed8d4ff;
194
+ --base-colors-red-red-200: #e5c3bdff;
195
+ --base-colors-red-red-300: #d9a59dff;
196
+ --base-colors-red-red-400: #d18f86ff;
197
+ --base-colors-red-red-500: #c36d62ff;
198
+ --base-colors-red-red-600: #a55a50ff;
199
+ --base-colors-red-red-700: #81463eff;
200
+ --base-colors-red-red-800: #643630ff;
201
+ --base-colors-red-red-900: #4c2a25ff;
202
+
203
+ /* Sage green */
204
+ --base-colors-green-green-50: #f3f5f2ff;
205
+ --base-colors-green-green-100: #dfe5dcff;
206
+ --base-colors-green-green-200: #cfd9caff;
207
+ --base-colors-green-green-300: #b8c7b0ff;
208
+ --base-colors-green-green-400: #a8ba9dff;
209
+ --base-colors-green-green-500: #8fa882ff;
210
+ --base-colors-green-green-600: #758c6aff;
211
+ --base-colors-green-green-700: #5b6d52ff;
212
+ --base-colors-green-green-800: #475540ff;
213
+ --base-colors-green-green-900: #364131ff;
214
+
215
+ /* Mustard yellow */
216
+ --base-colors-yellow-yellow-50: #faf7eeff;
217
+ --base-colors-yellow-yellow-100: #f0e8d1ff;
218
+ --base-colors-yellow-yellow-200: #e8ddbcff;
219
+ --base-colors-yellow-yellow-300: #dccd9dff;
220
+ --base-colors-yellow-yellow-400: #d4c389ff;
221
+ --base-colors-yellow-yellow-500: #c8b369ff;
222
+ --base-colors-yellow-yellow-600: #afa056ff;
223
+ --base-colors-yellow-yellow-700: #897d43ff;
224
+ --base-colors-yellow-yellow-800: #6a6034ff;
225
+ --base-colors-yellow-yellow-900: #514a28ff;
226
+
227
+ /* Burnt orange flag */
228
+ --base-colors-redflag-redflag-50: #fdf4f0ff;
229
+ --base-colors-redflag-redflag-100: #f8dfd1ff;
230
+ --base-colors-redflag-redflag-200: #f4ceb9ff;
231
+ --base-colors-redflag-redflag-300: #eeb596ff;
232
+ --base-colors-redflag-redflag-400: #eaa57eff;
233
+ --base-colors-redflag-redflag-500: #e38d5aff;
234
+ --base-colors-redflag-redflag-600: #c9764bff;
235
+ --base-colors-redflag-redflag-700: #9d5c3aff;
236
+ --base-colors-redflag-redflag-800: #79472dff;
237
+ --base-colors-redflag-redflag-900: #5d3623ff;
238
+
239
+ /* Typography */
240
+ --typography-heading-heading1-font-size: 2.5rem;
241
+ --typography-heading-heading1-text-decoration: none;
242
+ --typography-heading-heading1-font-family: Inter;
243
+ --typography-heading-heading1-font-weight: 700;
244
+ --typography-heading-heading1-font-style: normal;
245
+ --typography-heading-heading1-font-stretch: normal;
246
+ --typography-heading-heading1-letter-spacing: 0;
247
+ --typography-heading-heading1-line-height: 3.5rem;
248
+ --typography-heading-heading1-paragraph-indent: 0;
249
+ --typography-heading-heading1-paragraph-spacing: 0;
250
+ --typography-heading-heading1-text-case: none;
251
+ --typography-heading-heading2-font-size: 2rem;
252
+ --typography-heading-heading2-text-decoration: none;
253
+ --typography-heading-heading2-font-family: Inter;
254
+ --typography-heading-heading2-font-weight: 700;
255
+ --typography-heading-heading2-font-style: normal;
256
+ --typography-heading-heading2-font-stretch: normal;
257
+ --typography-heading-heading2-letter-spacing: 0;
258
+ --typography-heading-heading2-line-height: 2.5rem;
259
+ --typography-heading-heading2-paragraph-indent: 0;
260
+ --typography-heading-heading2-paragraph-spacing: 0;
261
+ --typography-heading-heading2-text-case: none;
262
+ --typography-heading-heading3-font-size: 1.75rem;
263
+ --typography-heading-heading3-text-decoration: none;
264
+ --typography-heading-heading3-font-family: Inter;
265
+ --typography-heading-heading3-font-weight: 700;
266
+ --typography-heading-heading3-font-style: normal;
267
+ --typography-heading-heading3-font-stretch: normal;
268
+ --typography-heading-heading3-letter-spacing: 0;
269
+ --typography-heading-heading3-line-height: 2.25rem;
270
+ --typography-heading-heading3-paragraph-indent: 0;
271
+ --typography-heading-heading3-paragraph-spacing: 0;
272
+ --typography-heading-heading3-text-case: none;
273
+ --typography-heading-heading4-font-size: 1.5rem;
274
+ --typography-heading-heading4-text-decoration: none;
275
+ --typography-heading-heading4-font-family: Inter;
276
+ --typography-heading-heading4-font-weight: 700;
277
+ --typography-heading-heading4-font-style: normal;
278
+ --typography-heading-heading4-font-stretch: normal;
279
+ --typography-heading-heading4-letter-spacing: 0;
280
+ --typography-heading-heading4-line-height: 2rem;
281
+ --typography-heading-heading4-paragraph-indent: 0;
282
+ --typography-heading-heading4-paragraph-spacing: 0;
283
+ --typography-heading-heading4-text-case: none;
284
+ --typography-heading-heading5-font-size: 1.25rem;
285
+ --typography-heading-heading5-text-decoration: none;
286
+ --typography-heading-heading5-font-family: Inter;
287
+ --typography-heading-heading5-font-weight: 700;
288
+ --typography-heading-heading5-font-style: normal;
289
+ --typography-heading-heading5-font-stretch: normal;
290
+ --typography-heading-heading5-letter-spacing: 0;
291
+ --typography-heading-heading5-line-height: 1.75rem;
292
+ --typography-heading-heading5-paragraph-indent: 0;
293
+ --typography-heading-heading5-paragraph-spacing: 0;
294
+ --typography-heading-heading5-text-case: none;
295
+ --typography-heading-heading6-font-size: 1rem;
296
+ --typography-heading-heading6-text-decoration: none;
297
+ --typography-heading-heading6-font-family: Inter;
298
+ --typography-heading-heading6-font-weight: 700;
299
+ --typography-heading-heading6-font-style: normal;
300
+ --typography-heading-heading6-font-stretch: normal;
301
+ --typography-heading-heading6-letter-spacing: 0;
302
+ --typography-heading-heading6-line-height: 1.375rem;
303
+ --typography-heading-heading6-paragraph-indent: 0;
304
+ --typography-heading-heading6-paragraph-spacing: 0;
305
+ --typography-heading-heading6-text-case: none;
306
+ --typography-display-lg-font-size: 3.5rem;
307
+ --typography-display-lg-text-decoration: none;
308
+ --typography-display-lg-font-family: Inter;
309
+ --typography-display-lg-font-weight: 400;
310
+ --typography-display-lg-font-style: normal;
311
+ --typography-display-lg-font-stretch: normal;
312
+ --typography-display-lg-letter-spacing: 0;
313
+ --typography-display-lg-line-height: 4rem;
314
+ --typography-display-lg-paragraph-indent: 0;
315
+ --typography-display-lg-paragraph-spacing: 0;
316
+ --typography-display-lg-text-case: none;
317
+ --typography-display-md-font-size: 3rem;
318
+ --typography-display-md-text-decoration: none;
319
+ --typography-display-md-font-family: Inter;
320
+ --typography-display-md-font-weight: 400;
321
+ --typography-display-md-font-style: normal;
322
+ --typography-display-md-font-stretch: normal;
323
+ --typography-display-md-letter-spacing: 0;
324
+ --typography-display-md-line-height: 3.5rem;
325
+ --typography-display-md-paragraph-indent: 0;
326
+ --typography-display-md-paragraph-spacing: 0;
327
+ --typography-display-md-text-case: none;
328
+ --typography-display-sm-font-size: 2.5rem;
329
+ --typography-display-sm-text-decoration: none;
330
+ --typography-display-sm-font-family: Inter;
331
+ --typography-display-sm-font-weight: 400;
332
+ --typography-display-sm-font-style: normal;
333
+ --typography-display-sm-font-stretch: normal;
334
+ --typography-display-sm-letter-spacing: 0;
335
+ --typography-display-sm-line-height: 3rem;
336
+ --typography-display-sm-paragraph-indent: 0;
337
+ --typography-display-sm-paragraph-spacing: 0;
338
+ --typography-display-sm-text-case: none;
339
+ --typography-base-xl-500-font-size: 1.25rem;
340
+ --typography-base-xl-500-text-decoration: none;
341
+ --typography-base-xl-500-font-family: Inter;
342
+ --typography-base-xl-500-font-weight: 500;
343
+ --typography-base-xl-500-font-style: normal;
344
+ --typography-base-xl-500-font-stretch: normal;
345
+ --typography-base-xl-500-letter-spacing: 0;
346
+ --typography-base-xl-500-line-height: 1.75rem;
347
+ --typography-base-xl-500-paragraph-indent: 0;
348
+ --typography-base-xl-500-paragraph-spacing: 0;
349
+ --typography-base-xl-500-text-case: none;
350
+ --typography-base-xl-600-font-size: 1.25rem;
351
+ --typography-base-xl-600-text-decoration: none;
352
+ --typography-base-xl-600-font-family: Inter;
353
+ --typography-base-xl-600-font-weight: 600;
354
+ --typography-base-xl-600-font-style: normal;
355
+ --typography-base-xl-600-font-stretch: normal;
356
+ --typography-base-xl-600-letter-spacing: 0;
357
+ --typography-base-xl-600-line-height: 1.75rem;
358
+ --typography-base-xl-600-paragraph-indent: 0;
359
+ --typography-base-xl-600-paragraph-spacing: 0;
360
+ --typography-base-xl-600-text-case: none;
361
+ --typography-base-xl-700-font-size: 1.25rem;
362
+ --typography-base-xl-700-text-decoration: none;
363
+ --typography-base-xl-700-font-family: Inter;
364
+ --typography-base-xl-700-font-weight: 700;
365
+ --typography-base-xl-700-font-style: normal;
366
+ --typography-base-xl-700-font-stretch: normal;
367
+ --typography-base-xl-700-letter-spacing: 0;
368
+ --typography-base-xl-700-line-height: 1.75rem;
369
+ --typography-base-xl-700-paragraph-indent: 0;
370
+ --typography-base-xl-700-paragraph-spacing: 0;
371
+ --typography-base-xl-700-text-case: none;
372
+ --typography-base-lg-500-font-size: 1.125rem;
373
+ --typography-base-lg-500-text-decoration: none;
374
+ --typography-base-lg-500-font-family: Inter;
375
+ --typography-base-lg-500-font-weight: 500;
376
+ --typography-base-lg-500-font-style: normal;
377
+ --typography-base-lg-500-font-stretch: normal;
378
+ --typography-base-lg-500-letter-spacing: 0;
379
+ --typography-base-lg-500-line-height: 1.5rem;
380
+ --typography-base-lg-500-paragraph-indent: 0;
381
+ --typography-base-lg-500-paragraph-spacing: 0;
382
+ --typography-base-lg-500-text-case: none;
383
+ --typography-base-lg-600-font-size: 1.125rem;
384
+ --typography-base-lg-600-text-decoration: none;
385
+ --typography-base-lg-600-font-family: Inter;
386
+ --typography-base-lg-600-font-weight: 600;
387
+ --typography-base-lg-600-font-style: normal;
388
+ --typography-base-lg-600-font-stretch: normal;
389
+ --typography-base-lg-600-letter-spacing: 0.025rem;
390
+ --typography-base-lg-600-line-height: 1.5rem;
391
+ --typography-base-lg-600-paragraph-indent: 0;
392
+ --typography-base-lg-600-paragraph-spacing: 0;
393
+ --typography-base-lg-600-text-case: none;
394
+ --typography-base-lg-700-font-size: 1.125rem;
395
+ --typography-base-lg-700-text-decoration: none;
396
+ --typography-base-lg-700-font-family: Inter;
397
+ --typography-base-lg-700-font-weight: 700;
398
+ --typography-base-lg-700-font-style: normal;
399
+ --typography-base-lg-700-font-stretch: normal;
400
+ --typography-base-lg-700-letter-spacing: 0;
401
+ --typography-base-lg-700-line-height: 1.5rem;
402
+ --typography-base-lg-700-paragraph-indent: 0;
403
+ --typography-base-lg-700-paragraph-spacing: 0;
404
+ --typography-base-lg-700-text-case: none;
405
+ --typography-base-md-500-font-size: 1rem;
406
+ --typography-base-md-500-text-decoration: none;
407
+ --typography-base-md-500-font-family: Inter;
408
+ --typography-base-md-500-font-weight: 500;
409
+ --typography-base-md-500-font-style: normal;
410
+ --typography-base-md-500-font-stretch: normal;
411
+ --typography-base-md-500-letter-spacing: 0;
412
+ --typography-base-md-500-line-height: 1.375rem;
413
+ --typography-base-md-500-paragraph-indent: 0;
414
+ --typography-base-md-500-paragraph-spacing: 0;
415
+ --typography-base-md-500-text-case: none;
416
+ --typography-base-md-600-font-size: 1rem;
417
+ --typography-base-md-600-text-decoration: none;
418
+ --typography-base-md-600-font-family: Inter;
419
+ --typography-base-md-600-font-weight: 600;
420
+ --typography-base-md-600-font-style: normal;
421
+ --typography-base-md-600-font-stretch: normal;
422
+ --typography-base-md-600-letter-spacing: 0.025rem;
423
+ --typography-base-md-600-line-height: 1.375rem;
424
+ --typography-base-md-600-paragraph-indent: 0;
425
+ --typography-base-md-600-paragraph-spacing: 0;
426
+ --typography-base-md-600-text-case: none;
427
+ --typography-base-md-700-font-size: 1rem;
428
+ --typography-base-md-700-text-decoration: none;
429
+ --typography-base-md-700-font-family: Inter;
430
+ --typography-base-md-700-font-weight: 700;
431
+ --typography-base-md-700-font-style: normal;
432
+ --typography-base-md-700-font-stretch: normal;
433
+ --typography-base-md-700-letter-spacing: 0;
434
+ --typography-base-md-700-line-height: 1.375rem;
435
+ --typography-base-md-700-paragraph-indent: 0;
436
+ --typography-base-md-700-paragraph-spacing: 0;
437
+ --typography-base-md-700-text-case: none;
438
+ --typography-base-sm-500-font-size: 0.875rem;
439
+ --typography-base-sm-500-text-decoration: none;
440
+ --typography-base-sm-500-font-family: Inter;
441
+ --typography-base-sm-500-font-weight: 500;
442
+ --typography-base-sm-500-font-style: normal;
443
+ --typography-base-sm-500-font-stretch: normal;
444
+ --typography-base-sm-500-letter-spacing: 0;
445
+ --typography-base-sm-500-line-height: 1.25rem;
446
+ --typography-base-sm-500-paragraph-indent: 0;
447
+ --typography-base-sm-500-paragraph-spacing: 0;
448
+ --typography-base-sm-500-text-case: none;
449
+ --typography-base-sm-600-font-size: 0.875rem;
450
+ --typography-base-sm-600-text-decoration: none;
451
+ --typography-base-sm-600-font-family: Inter;
452
+ --typography-base-sm-600-font-weight: 600;
453
+ --typography-base-sm-600-font-style: normal;
454
+ --typography-base-sm-600-font-stretch: normal;
455
+ --typography-base-sm-600-letter-spacing: 0.025rem;
456
+ --typography-base-sm-600-line-height: 1.25rem;
457
+ --typography-base-sm-600-paragraph-indent: 0;
458
+ --typography-base-sm-600-paragraph-spacing: 0;
459
+ --typography-base-sm-600-text-case: none;
460
+ --typography-base-sm-700-font-size: 0.875rem;
461
+ --typography-base-sm-700-text-decoration: none;
462
+ --typography-base-sm-700-font-family: Inter;
463
+ --typography-base-sm-700-font-weight: 700;
464
+ --typography-base-sm-700-font-style: normal;
465
+ --typography-base-sm-700-font-stretch: normal;
466
+ --typography-base-sm-700-letter-spacing: 0;
467
+ --typography-base-sm-700-line-height: 1.25rem;
468
+ --typography-base-sm-700-paragraph-indent: 0;
469
+ --typography-base-sm-700-paragraph-spacing: 0;
470
+ --typography-base-sm-700-text-case: none;
471
+ --typography-base-xs-500-font-size: 0.75rem;
472
+ --typography-base-xs-500-text-decoration: none;
473
+ --typography-base-xs-500-font-family: Inter;
474
+ --typography-base-xs-500-font-weight: 500;
475
+ --typography-base-xs-500-font-style: normal;
476
+ --typography-base-xs-500-font-stretch: normal;
477
+ --typography-base-xs-500-letter-spacing: 0;
478
+ --typography-base-xs-500-line-height: 1.125rem;
479
+ --typography-base-xs-500-paragraph-indent: 0;
480
+ --typography-base-xs-500-paragraph-spacing: 0;
481
+ --typography-base-xs-500-text-case: none;
482
+ --typography-base-xs-600-font-size: 0.75rem;
483
+ --typography-base-xs-600-text-decoration: none;
484
+ --typography-base-xs-600-font-family: Inter;
485
+ --typography-base-xs-600-font-weight: 600;
486
+ --typography-base-xs-600-font-style: normal;
487
+ --typography-base-xs-600-font-stretch: normal;
488
+ --typography-base-xs-600-letter-spacing: 0;
489
+ --typography-base-xs-600-line-height: 1.125rem;
490
+ --typography-base-xs-600-paragraph-indent: 0;
491
+ --typography-base-xs-600-paragraph-spacing: 0;
492
+ --typography-base-xs-600-text-case: none;
493
+ --typography-base-xs-700-font-size: 0.75rem;
494
+ --typography-base-xs-700-text-decoration: none;
495
+ --typography-base-xs-700-font-family: Inter;
496
+ --typography-base-xs-700-font-weight: 700;
497
+ --typography-base-xs-700-font-style: normal;
498
+ --typography-base-xs-700-font-stretch: normal;
499
+ --typography-base-xs-700-letter-spacing: 0;
500
+ --typography-base-xs-700-line-height: 1.125rem;
501
+ --typography-base-xs-700-paragraph-indent: 0;
502
+ --typography-base-xs-700-paragraph-spacing: 0;
503
+ --typography-base-xs-700-text-case: none;
504
+ --typography-base-xxs-500-font-size: 0.6875rem;
505
+ --typography-base-xxs-500-text-decoration: none;
506
+ --typography-base-xxs-500-font-family: Inter;
507
+ --typography-base-xxs-500-font-weight: 400;
508
+ --typography-base-xxs-500-font-style: normal;
509
+ --typography-base-xxs-500-font-stretch: normal;
510
+ --typography-base-xxs-500-letter-spacing: 0;
511
+ --typography-base-xxs-500-line-height: 1rem;
512
+ --typography-base-xxs-500-paragraph-indent: 0;
513
+ --typography-base-xxs-500-paragraph-spacing: 0;
514
+ --typography-base-xxs-500-text-case: none;
515
+ --typography-base-xxs-600-font-size: 0.6875rem;
516
+ --typography-base-xxs-600-text-decoration: none;
517
+ --typography-base-xxs-600-font-family: Inter;
518
+ --typography-base-xxs-600-font-weight: 600;
519
+ --typography-base-xxs-600-font-style: normal;
520
+ --typography-base-xxs-600-font-stretch: normal;
521
+ --typography-base-xxs-600-letter-spacing: 0;
522
+ --typography-base-xxs-600-line-height: 1rem;
523
+ --typography-base-xxs-600-paragraph-indent: 0;
524
+ --typography-base-xxs-600-paragraph-spacing: 0;
525
+ --typography-base-xxs-600-text-case: none;
526
+ --typography-base-xxs-700-font-size: 0.6875rem;
527
+ --typography-base-xxs-700-text-decoration: none;
528
+ --typography-base-xxs-700-font-family: Inter;
529
+ --typography-base-xxs-700-font-weight: 700;
530
+ --typography-base-xxs-700-font-style: normal;
531
+ --typography-base-xxs-700-font-stretch: normal;
532
+ --typography-base-xxs-700-letter-spacing: 0;
533
+ --typography-base-xxs-700-line-height: 1rem;
534
+ --typography-base-xxs-700-paragraph-indent: 0;
535
+ --typography-base-xxs-700-paragraph-spacing: 0;
536
+ --typography-base-xxs-700-text-case: none;
537
+ --typography-body-lg-font-size: 1.125rem;
538
+ --typography-body-lg-text-decoration: none;
539
+ --typography-body-lg-font-family: Inter;
540
+ --typography-body-lg-font-weight: 400;
541
+ --typography-body-lg-font-style: normal;
542
+ --typography-body-lg-font-stretch: normal;
543
+ --typography-body-lg-letter-spacing: 0;
544
+ --typography-body-lg-line-height: 1.5rem;
545
+ --typography-body-lg-paragraph-indent: 0;
546
+ --typography-body-lg-paragraph-spacing: 0;
547
+ --typography-body-lg-text-case: none;
548
+ --typography-body-md-font-size: 1rem;
549
+ --typography-body-md-text-decoration: none;
550
+ --typography-body-md-font-family: Inter;
551
+ --typography-body-md-font-weight: 400;
552
+ --typography-body-md-font-style: normal;
553
+ --typography-body-md-font-stretch: normal;
554
+ --typography-body-md-letter-spacing: 0;
555
+ --typography-body-md-line-height: 1.375rem;
556
+ --typography-body-md-paragraph-indent: 0;
557
+ --typography-body-md-paragraph-spacing: 0;
558
+ --typography-body-md-text-case: none;
559
+ --typography-body-sm-font-size: 0.875rem;
560
+ --typography-body-sm-text-decoration: none;
561
+ --typography-body-sm-font-family: Inter;
562
+ --typography-body-sm-font-weight: 400;
563
+ --typography-body-sm-font-style: normal;
564
+ --typography-body-sm-font-stretch: normal;
565
+ --typography-body-sm-letter-spacing: 0;
566
+ --typography-body-sm-line-height: 1.25rem;
567
+ --typography-body-sm-paragraph-indent: 0;
568
+ --typography-body-sm-paragraph-spacing: 0;
569
+ --typography-body-sm-text-case: none;
570
+ --typography-body-xs-font-size: 0.75rem;
571
+ --typography-body-xs-text-decoration: none;
572
+ --typography-body-xs-font-family: Inter;
573
+ --typography-body-xs-font-weight: 400;
574
+ --typography-body-xs-font-style: normal;
575
+ --typography-body-xs-font-stretch: normal;
576
+ --typography-body-xs-letter-spacing: 0;
577
+ --typography-body-xs-line-height: 1.125rem;
578
+ --typography-body-xs-paragraph-indent: 0;
579
+ --typography-body-xs-paragraph-spacing: 0;
580
+ --typography-body-xs-text-case: none;
581
+ --typography-body-xxs-font-size: 0.6875rem;
582
+ --typography-body-xxs-text-decoration: none;
583
+ --typography-body-xxs-font-family: Inter;
584
+ --typography-body-xxs-font-weight: 400;
585
+ --typography-body-xxs-font-style: normal;
586
+ --typography-body-xxs-font-stretch: normal;
587
+ --typography-body-xxs-letter-spacing: 0;
588
+ --typography-body-xxs-line-height: 1rem;
589
+ --typography-body-xxs-paragraph-indent: 0;
590
+ --typography-body-xxs-paragraph-spacing: 0;
591
+ --typography-body-xxs-text-case: none;
592
+
593
+ /* Theme color mappings - Surface base */
594
+ --theme-color-surface-base-light-overlay50: var(--base-colors-white-white-overlay50);
595
+ --theme-color-surface-base-light-overlay75: var(--base-colors-white-white-overlay75);
596
+ --theme-color-surface-base-light-overlay90: var(--base-colors-white-white-overlay90);
597
+
598
+ /* Semantic accent colors */
599
+ --theme-color-semantic-accent-accent-100: var(--base-colors-purple-purple-100);
600
+ --theme-color-semantic-accent-accent-200: var(--base-colors-purple-purple-200);
601
+ --theme-color-semantic-accent-accent-300: var(--base-colors-purple-purple-300);
602
+ --theme-color-semantic-accent-accent-400: var(--base-colors-purple-purple-400);
603
+ --theme-color-semantic-accent-accent-50: var(--base-colors-purple-purple-50);
604
+ --theme-color-semantic-accent-accent-500: var(--base-colors-purple-purple-500);
605
+ --theme-color-semantic-accent-accent-600: var(--base-colors-purple-purple-600);
606
+ --theme-color-semantic-accent-accent-700: var(--base-colors-purple-purple-700);
607
+ --theme-color-semantic-accent-accent-800: var(--base-colors-purple-purple-800);
608
+ --theme-color-semantic-accent-accent-900: var(--base-colors-purple-purple-900);
609
+
610
+ /* Semantic base colors */
611
+ --theme-color-semantic-base-base-100: var(--base-colors-white-white-100);
612
+ --theme-color-semantic-base-base-50: var(--base-colors-white-white-50);
613
+ --theme-color-semantic-base-black: var(--base-colors-black-black);
614
+ --theme-color-semantic-base-black-overlay10: var(--base-colors-black-black-overlay10);
615
+ --theme-color-semantic-base-black-overlay25: var(--base-colors-black-black-overlay25);
616
+ --theme-color-semantic-base-black-overlay50: var(--base-colors-black-black-overlay50);
617
+ --theme-color-semantic-base-black-overlay75: var(--base-colors-black-black-overlay75);
618
+ --theme-color-semantic-base-white: var(--base-colors-white-white);
619
+ --theme-color-semantic-base-white-overlay10: var(--base-colors-white-white-overlay10);
620
+ --theme-color-semantic-base-white-overlay25: var(--base-colors-white-white-overlay25);
621
+ --theme-color-semantic-base-white-overlay50: var(--base-colors-white-white-overlay50);
622
+ --theme-color-semantic-base-white-overlay75: var(--base-colors-white-white-overlay75);
623
+ --theme-color-semantic-base-black-overlay40: var(--base-colors-black-black-overlay40);
624
+ --theme-color-semantic-base-white-overlay90: var(--base-colors-white-white-overlay90);
625
+
626
+ /* Semantic danger colors */
627
+ --theme-color-semantic-danger-danger-100: var(--base-colors-red-red-100);
628
+ --theme-color-semantic-danger-danger-200: var(--base-colors-red-red-200);
629
+ --theme-color-semantic-danger-danger-300: var(--base-colors-red-red-300);
630
+ --theme-color-semantic-danger-danger-400: var(--base-colors-red-red-400);
631
+ --theme-color-semantic-danger-danger-50: var(--base-colors-red-red-50);
632
+ --theme-color-semantic-danger-danger-500: var(--base-colors-red-red-500);
633
+ --theme-color-semantic-danger-danger-600: var(--base-colors-red-red-600);
634
+ --theme-color-semantic-danger-danger-700: var(--base-colors-red-red-700);
635
+ --theme-color-semantic-danger-danger-800: var(--base-colors-red-red-800);
636
+ --theme-color-semantic-danger-danger-900: var(--base-colors-red-red-900);
637
+
638
+ /* Semantic flag colors */
639
+ --theme-color-semantic-flag-flag-100: var(--base-colors-redflag-redflag-100);
640
+ --theme-color-semantic-flag-flag-200: var(--base-colors-redflag-redflag-200);
641
+ --theme-color-semantic-flag-flag-300: var(--base-colors-redflag-redflag-300);
642
+ --theme-color-semantic-flag-flag-400: var(--base-colors-redflag-redflag-400);
643
+ --theme-color-semantic-flag-flag-50: var(--base-colors-redflag-redflag-50);
644
+ --theme-color-semantic-flag-flag-500: var(--base-colors-redflag-redflag-500);
645
+ --theme-color-semantic-flag-flag-600: var(--base-colors-redflag-redflag-600);
646
+ --theme-color-semantic-flag-flag-700: var(--base-colors-redflag-redflag-700);
647
+ --theme-color-semantic-flag-flag-800: var(--base-colors-redflag-redflag-800);
648
+ --theme-color-semantic-flag-flag-900: var(--base-colors-redflag-redflag-900);
649
+
650
+ /* Semantic grayscale colors */
651
+ --theme-color-semantic-grayscale-grayscale-100: var(--base-colors-darkgray-darkgray-100);
652
+ --theme-color-semantic-grayscale-grayscale-200: var(--base-colors-darkgray-darkgray-200);
653
+ --theme-color-semantic-grayscale-grayscale-300: var(--base-colors-darkgray-darkgray-300);
654
+ --theme-color-semantic-grayscale-grayscale-400: var(--base-colors-darkgray-darkgray-400);
655
+ --theme-color-semantic-grayscale-grayscale-50: var(--base-colors-darkgray-darkgray-50);
656
+ --theme-color-semantic-grayscale-grayscale-500: var(--base-colors-darkgray-darkgray-500);
657
+ --theme-color-semantic-grayscale-grayscale-600: var(--base-colors-darkgray-darkgray-600);
658
+ --theme-color-semantic-grayscale-grayscale-700: var(--base-colors-darkgray-darkgray-700);
659
+ --theme-color-semantic-grayscale-grayscale-800: var(--base-colors-darkgray-darkgray-800);
660
+ --theme-color-semantic-grayscale-grayscale-900: var(--base-colors-darkgray-darkgray-900);
661
+
662
+ /* Semantic info colors */
663
+ --theme-color-semantic-info-info-100: var(--base-colors-blue-blue-100);
664
+ --theme-color-semantic-info-info-200: var(--base-colors-blue-blue-200);
665
+ --theme-color-semantic-info-info-300: var(--base-colors-blue-blue-300);
666
+ --theme-color-semantic-info-info-400: var(--base-colors-blue-blue-400);
667
+ --theme-color-semantic-info-info-50: var(--base-colors-blue-blue-50);
668
+ --theme-color-semantic-info-info-500: var(--base-colors-blue-blue-500);
669
+ --theme-color-semantic-info-info-600: var(--base-colors-blue-blue-600);
670
+ --theme-color-semantic-info-info-700: var(--base-colors-blue-blue-700);
671
+ --theme-color-semantic-info-info-800: var(--base-colors-blue-blue-800);
672
+ --theme-color-semantic-info-info-900: var(--base-colors-blue-blue-900);
673
+
674
+ /* Semantic neutral colors */
675
+ --theme-color-semantic-neutral-neutral-100: var(--base-colors-lightgray-lightgray-100);
676
+ --theme-color-semantic-neutral-neutral-200: var(--base-colors-lightgray-lightgray-200);
677
+ --theme-color-semantic-neutral-neutral-300: var(--base-colors-lightgray-lightgray-300);
678
+ --theme-color-semantic-neutral-neutral-400: var(--base-colors-lightgray-lightgray-400);
679
+ --theme-color-semantic-neutral-neutral-50: var(--base-colors-lightgray-lightgray-50);
680
+ --theme-color-semantic-neutral-neutral-500: var(--base-colors-lightgray-lightgray-500);
681
+ --theme-color-semantic-neutral-neutral-600: var(--base-colors-lightgray-lightgray-600);
682
+ --theme-color-semantic-neutral-neutral-700: var(--base-colors-lightgray-lightgray-700);
683
+ --theme-color-semantic-neutral-neutral-800: var(--base-colors-lightgray-lightgray-800);
684
+ --theme-color-semantic-neutral-neutral-900: var(--base-colors-lightgray-lightgray-900);
685
+
686
+ /* Semantic primary colors */
687
+ --theme-color-semantic-primary-primary-100: var(--base-colors-bluetheme-bluetheme-100);
688
+ --theme-color-semantic-primary-primary-200: var(--base-colors-bluetheme-bluetheme-200);
689
+ --theme-color-semantic-primary-primary-300: var(--base-colors-bluetheme-bluetheme-300);
690
+ --theme-color-semantic-primary-primary-400: var(--base-colors-bluetheme-bluetheme-400);
691
+ --theme-color-semantic-primary-primary-50: var(--base-colors-bluetheme-bluetheme-50);
692
+ --theme-color-semantic-primary-primary-500: var(--base-colors-bluetheme-bluetheme-500);
693
+ --theme-color-semantic-primary-primary-600: var(--base-colors-bluetheme-bluetheme-600);
694
+ --theme-color-semantic-primary-primary-700: var(--base-colors-bluetheme-bluetheme-700);
695
+ --theme-color-semantic-primary-primary-800: var(--base-colors-bluetheme-bluetheme-800);
696
+ --theme-color-semantic-primary-primary-900: var(--base-colors-bluetheme-bluetheme-900);
697
+
698
+ /* Semantic secondary colors */
699
+ --theme-color-semantic-secondary-secondary-100: var(--base-colors-gray-gray-100);
700
+ --theme-color-semantic-secondary-secondary-200: var(--base-colors-gray-gray-200);
701
+ --theme-color-semantic-secondary-secondary-300: var(--base-colors-gray-gray-300);
702
+ --theme-color-semantic-secondary-secondary-400: var(--base-colors-gray-gray-400);
703
+ --theme-color-semantic-secondary-secondary-50: var(--base-colors-gray-gray-50);
704
+ --theme-color-semantic-secondary-secondary-500: var(--base-colors-gray-gray-500);
705
+ --theme-color-semantic-secondary-secondary-600: var(--base-colors-gray-gray-600);
706
+ --theme-color-semantic-secondary-secondary-700: var(--base-colors-gray-gray-700);
707
+ --theme-color-semantic-secondary-secondary-800: var(--base-colors-gray-gray-800);
708
+ --theme-color-semantic-secondary-secondary-900: var(--base-colors-gray-gray-900);
709
+
710
+ /* Semantic success colors */
711
+ --theme-color-semantic-success-success-100: var(--base-colors-green-green-100);
712
+ --theme-color-semantic-success-success-200: var(--base-colors-green-green-200);
713
+ --theme-color-semantic-success-success-300: var(--base-colors-green-green-300);
714
+ --theme-color-semantic-success-success-400: var(--base-colors-green-green-400);
715
+ --theme-color-semantic-success-success-50: var(--base-colors-green-green-50);
716
+ --theme-color-semantic-success-success-500: var(--base-colors-green-green-500);
717
+ --theme-color-semantic-success-success-600: var(--base-colors-green-green-600);
718
+ --theme-color-semantic-success-success-700: var(--base-colors-green-green-700);
719
+ --theme-color-semantic-success-success-800: var(--base-colors-green-green-800);
720
+ --theme-color-semantic-success-success-900: var(--base-colors-green-green-900);
721
+
722
+ /* Semantic warning colors */
723
+ --theme-color-semantic-warning-warning-100: var(--base-colors-yellow-yellow-100);
724
+ --theme-color-semantic-warning-warning-200: var(--base-colors-yellow-yellow-200);
725
+ --theme-color-semantic-warning-warning-300: var(--base-colors-yellow-yellow-300);
726
+ --theme-color-semantic-warning-warning-400: var(--base-colors-yellow-yellow-400);
727
+ --theme-color-semantic-warning-warning-50: var(--base-colors-yellow-yellow-50);
728
+ --theme-color-semantic-warning-warning-500: var(--base-colors-yellow-yellow-500);
729
+ --theme-color-semantic-warning-warning-600: var(--base-colors-yellow-yellow-600);
730
+ --theme-color-semantic-warning-warning-700: var(--base-colors-yellow-yellow-700);
731
+ --theme-color-semantic-warning-warning-800: var(--base-colors-yellow-yellow-800);
732
+ --theme-color-semantic-warning-warning-900: var(--base-colors-yellow-yellow-900);
733
+
734
+ /* Theme sizing */
735
+ --theme-sizing-radius-default: var(--base-radius-sm);
736
+ --theme-sizing-radius-round: var(--base-radius-pill);
737
+
738
+ /* Theme elevation shadows */
739
+ --theme-elevation-elevation1-shadow: var(--base-colors-black-black-overlay10);
740
+ --theme-elevation-elevation2-shadow: var(--base-colors-black-black-overlay10);
741
+ --theme-elevation-elevation3-shadow: var(--base-colors-black-black-overlay15);
742
+ --theme-elevation-elevation4-shadow: var(--base-colors-black-black-overlay15);
743
+ --theme-elevation-elevation5-shadow: var(--base-colors-black-black-overlay20);
744
+ --theme-elevation-elevation6-shadow: var(--base-colors-black-black-overlay20);
745
+ --theme-elevation-focusring-spread: var(--base-sizing-4x);
746
+ --theme-elevation-focusring-white-spread: var(--base-sizing-1x);
747
+
748
+ /* Border colors */
749
+ --theme-color-border-light-default: var(--theme-color-semantic-secondary-secondary-200);
750
+ --theme-color-border-light-hover: var(--theme-color-semantic-secondary-secondary-300);
751
+ --theme-color-border-light-disabled: var(--theme-color-semantic-neutral-neutral-400);
752
+ --theme-color-border-light-active: var(--theme-color-semantic-secondary-secondary-400);
753
+ --theme-color-border-danger-default: var(--theme-color-semantic-danger-danger-500);
754
+ --theme-color-border-danger-hover: var(--theme-color-semantic-danger-danger-600);
755
+ --theme-color-border-danger-active: var(--theme-color-semantic-danger-danger-700);
756
+ --theme-color-border-danger-disabled: var(--theme-color-semantic-danger-danger-100);
757
+ --theme-color-border-success-default: var(--theme-color-semantic-success-success-500);
758
+ --theme-color-border-success-hover: var(--theme-color-semantic-success-success-600);
759
+ --theme-color-border-success-active: var(--theme-color-semantic-success-success-700);
760
+ --theme-color-border-success-disabled: var(--theme-color-semantic-success-success-100);
761
+ --theme-color-border-warning-default: var(--theme-color-semantic-warning-warning-500);
762
+ --theme-color-border-warning-hover: var(--theme-color-semantic-warning-warning-600);
763
+ --theme-color-border-warning-active: var(--theme-color-semantic-warning-warning-700);
764
+ --theme-color-border-warning-disabled: var(--theme-color-semantic-warning-warning-100);
765
+ --theme-color-border-primary-default: var(--theme-color-semantic-primary-primary-500);
766
+ --theme-color-border-primary-hover: var(--theme-color-semantic-primary-primary-600);
767
+ --theme-color-border-primary-active: var(--theme-color-semantic-primary-primary-700);
768
+ --theme-color-border-primary-disabled: var(--theme-color-semantic-primary-primary-200);
769
+ --theme-color-border-primary-focus: var(--theme-color-semantic-primary-primary-200);
770
+ --theme-color-border-info-default: var(--theme-color-semantic-info-info-500);
771
+ --theme-color-border-info-hover: var(--theme-color-semantic-info-info-600);
772
+ --theme-color-border-info-active: var(--theme-color-semantic-primary-primary-700);
773
+ --theme-color-border-info-disabled: var(--theme-color-semantic-info-info-200);
774
+ --theme-color-border-secondary-default: var(--theme-color-semantic-secondary-secondary-700);
775
+ --theme-color-border-secondary-hover: var(--theme-color-semantic-secondary-secondary-800);
776
+ --theme-color-border-secondary-active: var(--theme-color-semantic-secondary-secondary-800);
777
+ --theme-color-border-secondary-disabled: var(--theme-color-semantic-secondary-secondary-600);
778
+
779
+ /* Surface colors */
780
+ --theme-color-surface-info-default: var(--theme-color-semantic-info-info-500);
781
+ --theme-color-surface-info-hover: var(--theme-color-semantic-info-info-600);
782
+ --theme-color-surface-info-active: var(--theme-color-semantic-info-info-700);
783
+ --theme-color-surface-info-disabled: var(--theme-color-semantic-info-info-200);
784
+ --theme-color-surface-info-negative: var(--theme-color-semantic-info-info-50);
785
+ --theme-color-surface-info-inverse: var(--theme-color-semantic-info-info-100);
786
+ --theme-color-surface-danger-default: var(--theme-color-semantic-danger-danger-500);
787
+ --theme-color-surface-danger-hover: var(--theme-color-semantic-danger-danger-600);
788
+ --theme-color-surface-danger-negative: var(--theme-color-semantic-danger-danger-50);
789
+ --theme-color-surface-danger-disabled: var(--theme-color-semantic-danger-danger-200);
790
+ --theme-color-surface-danger-active: var(--theme-color-semantic-danger-danger-700);
791
+ --theme-color-surface-danger-inverse: var(--theme-color-semantic-danger-danger-100);
792
+ --theme-color-surface-primary-default: var(--theme-color-semantic-primary-primary-500);
793
+ --theme-color-surface-primary-hover: var(--theme-color-semantic-primary-primary-600);
794
+ --theme-color-surface-primary-active: var(--theme-color-semantic-primary-primary-700);
795
+ --theme-color-surface-primary-disabled: var(--theme-color-semantic-primary-primary-200);
796
+ --theme-color-surface-primary-negative: var(--theme-color-semantic-primary-primary-50);
797
+ --theme-color-surface-primary-inverse: var(--theme-color-semantic-primary-primary-100);
798
+ --theme-color-surface-success-default: var(--theme-color-semantic-success-success-500);
799
+ --theme-color-surface-success-hover: var(--theme-color-semantic-success-success-600);
800
+ --theme-color-surface-success-active: var(--theme-color-semantic-success-success-700);
801
+ --theme-color-surface-success-disabled: var(--theme-color-semantic-success-success-200);
802
+ --theme-color-surface-success-negative: var(--theme-color-semantic-success-success-50);
803
+ --theme-color-surface-success-inverse: var(--theme-color-semantic-success-success-100);
804
+ --theme-color-surface-warning-default: var(--theme-color-semantic-warning-warning-500);
805
+ --theme-color-surface-warning-hover: var(--theme-color-semantic-warning-warning-600);
806
+ --theme-color-surface-warning-active: var(--theme-color-semantic-warning-warning-700);
807
+ --theme-color-surface-warning-disabled: var(--theme-color-semantic-warning-warning-200);
808
+ --theme-color-surface-warning-negative: var(--theme-color-semantic-warning-warning-50);
809
+ --theme-color-surface-warning-inverse: var(--theme-color-semantic-warning-warning-100);
810
+ --theme-color-surface-base-bg-light: var(--theme-color-semantic-base-white);
811
+ --theme-color-surface-base-base1: var(--theme-color-semantic-neutral-neutral-50);
812
+ --theme-color-surface-base-base2: var(--theme-color-semantic-base-base-50);
813
+ --theme-color-surface-base-base3: var(--theme-color-semantic-base-base-100);
814
+ --theme-color-surface-base-base4: var(--theme-color-semantic-neutral-neutral-100);
815
+ --theme-color-surface-base-base5: var(--theme-color-semantic-neutral-neutral-200);
816
+ --theme-color-surface-base-base6: var(--theme-color-semantic-secondary-secondary-100);
817
+ --theme-color-surface-base-base7: var(--theme-color-semantic-secondary-secondary-200);
818
+ --theme-color-surface-base-global-light: var(--theme-color-semantic-base-white);
819
+ --theme-color-surface-base-bg-dark: var(--theme-color-semantic-base-black);
820
+ --theme-color-surface-base-base8: var(--theme-color-semantic-secondary-secondary-400);
821
+ --theme-color-surface-base-dark-overlay50: var(--theme-color-semantic-base-black-overlay50);
822
+ --theme-color-surface-light-default: var(--theme-color-semantic-neutral-neutral-100);
823
+ --theme-color-surface-light-hover: var(--theme-color-semantic-neutral-neutral-300);
824
+ --theme-color-surface-light-active: var(--theme-color-semantic-neutral-neutral-500);
825
+ --theme-color-surface-light-disabled: var(--theme-color-semantic-base-base-100);
826
+ --theme-color-surface-light-negative: var(--theme-color-semantic-neutral-neutral-50);
827
+ --theme-color-surface-light-inverse: var(--theme-color-semantic-neutral-neutral-200);
828
+ --theme-color-surface-secondary-default: var(--theme-color-semantic-secondary-secondary-700);
829
+ --theme-color-surface-secondary-hover: var(--theme-color-semantic-secondary-secondary-800);
830
+ --theme-color-surface-secondary-active: var(--theme-color-semantic-secondary-secondary-800);
831
+ --theme-color-surface-secondary-disabled: var(--theme-color-semantic-secondary-secondary-600);
832
+ --theme-color-surface-secondary-negative: var(--theme-color-semantic-secondary-secondary-500);
833
+
834
+ /* Text colors */
835
+ --theme-color-text-base-text-dark: var(--theme-color-semantic-base-black);
836
+ --theme-color-text-base-title: var(--theme-color-semantic-secondary-secondary-900);
837
+ --theme-color-text-base-caption: var(--theme-color-semantic-secondary-secondary-400);
838
+ --theme-color-text-base-title-light: var(--theme-color-semantic-secondary-secondary-800);
839
+ --theme-color-text-base-subtitle: var(--theme-color-semantic-secondary-secondary-600);
840
+ --theme-color-text-base-subtitle-light: var(--theme-color-semantic-secondary-secondary-500);
841
+ --theme-color-text-base-disabled: var(--theme-color-semantic-secondary-secondary-300);
842
+ --theme-color-text-base-dark-overlay50: var(--theme-color-semantic-base-black-overlay50);
843
+ --theme-color-text-base-text-light: var(--theme-color-semantic-base-white);
844
+ --theme-color-text-base-light-overly50: var(--theme-color-semantic-base-white-overlay50);
845
+ --theme-color-text-base-global-dark: var(--theme-color-semantic-base-black);
846
+ --theme-color-text-base-global-light: var(--theme-color-semantic-base-white);
847
+ --theme-color-text-base-caption-light: var(--theme-color-semantic-secondary-secondary-300);
848
+ --theme-color-text-base-dark-overlay40: var(--theme-color-semantic-base-black-overlay40);
849
+ --theme-color-text-base-light-overlay75: var(--theme-color-semantic-base-white-overlay75);
850
+ --theme-color-text-base-default-overlay50: var(--theme-color-semantic-base-black-overlay50);
851
+ --theme-color-text-base-disabled-light: var(--theme-color-semantic-secondary-secondary-200);
852
+ --theme-color-text-base-dark-overlay75: var(--theme-color-semantic-base-black-overlay75);
853
+ --theme-color-text-base-dark-overlay25: var(--theme-color-semantic-base-black-overlay25);
854
+ --theme-color-text-base-light-overlay90: var(--theme-color-semantic-base-white-overlay90);
855
+ --theme-color-text-primary-default: var(--theme-color-semantic-primary-primary-500);
856
+ --theme-color-text-primary-active: var(--theme-color-semantic-primary-primary-700);
857
+ --theme-color-text-primary-disabled: var(--theme-color-semantic-primary-primary-200);
858
+ --theme-color-text-primary-hover: var(--theme-color-semantic-primary-primary-600);
859
+ --theme-color-text-primary-opposite: var(--theme-color-semantic-primary-primary-300);
860
+ --theme-color-text-danger-default: var(--theme-color-semantic-danger-danger-500);
861
+ --theme-color-text-danger-active: var(--theme-color-semantic-danger-danger-700);
862
+ --theme-color-text-danger-disabled: var(--theme-color-semantic-danger-danger-200);
863
+ --theme-color-text-danger-hover: var(--theme-color-semantic-danger-danger-600);
864
+ --theme-color-text-warning-default: var(--theme-color-semantic-warning-warning-500);
865
+ --theme-color-text-warning-active: var(--theme-color-semantic-warning-warning-700);
866
+ --theme-color-text-warning-disabled: var(--theme-color-semantic-warning-warning-200);
867
+ --theme-color-text-warning-hover: var(--theme-color-semantic-warning-warning-600);
868
+ --theme-color-text-success-default: var(--theme-color-semantic-success-success-500);
869
+ --theme-color-text-success-active: var(--theme-color-semantic-success-success-700);
870
+ --theme-color-text-success-disabled: var(--theme-color-semantic-success-success-200);
871
+ --theme-color-text-success-hover: var(--theme-color-semantic-success-success-600);
872
+ --theme-color-text-info-default: var(--theme-color-semantic-info-info-500);
873
+ --theme-color-text-info-active: var(--theme-color-semantic-info-info-700);
874
+ --theme-color-text-info-disabled: var(--theme-color-semantic-info-info-200);
875
+ --theme-color-text-info-hover: var(--theme-color-semantic-info-info-600);
876
+ --theme-color-text-light-default: var(--theme-color-semantic-secondary-secondary-500);
877
+ --theme-color-text-light-hover: var(--theme-color-semantic-secondary-secondary-600);
878
+ --theme-color-text-light-active: var(--theme-color-semantic-secondary-secondary-700);
879
+ --theme-color-text-light-disabled: var(--theme-color-semantic-secondary-secondary-300);
880
+ --theme-color-text-secondary-default: var(--theme-color-semantic-secondary-secondary-300);
881
+ --theme-color-text-secondary-hover: var(--theme-color-semantic-secondary-secondary-400);
882
+ --theme-color-text-secondary-active: var(--theme-color-semantic-secondary-secondary-500);
883
+ --theme-color-text-secondary-disabled: var(--theme-color-semantic-secondary-secondary-200);
884
+
885
+ /* Elevation focus ring */
886
+ --theme-elevation-focusring-shadow: var(--theme-color-surface-primary-inverse);
887
+ --theme-elevation-focusring-white-shadow: var(--theme-color-surface-base-bg-light);
888
+ }
889
+
890
+ *, *::before, *::after {
891
+ box-sizing: border-box;
892
+ }
893
+
894
+ html {
895
+ font-family: var(--theme-typography-font-family), serif;
896
+ -webkit-font-smoothing: antialiased;
897
+ }
898
+
899
+ :where(button, input, select, textarea) {
900
+ font-family: inherit;
901
+ }