@takeoff-design/tokens 0.1.0-beta.0

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,1885 @@
1
+ /* @takeoff-design/tokens — auto-generated, do not edit */
2
+
3
+ :root {
4
+ /* primitive-colors */
5
+ --primary-50: #0F1517;
6
+ --primary-100: #1D2A2D;
7
+ --primary-200: #3A545A;
8
+ --primary-300: #577D87;
9
+ --primary-400: #74A7B4;
10
+ --primary-500: #91D1E1;
11
+ --primary-600: #A7DAE7;
12
+ --primary-700: #BDE3ED;
13
+ --primary-800: #D3EDF3;
14
+ --primary-900: #E9F6F9;
15
+ --static-black: #F2F3F5;
16
+ --static-white: #13171C;
17
+ --secondary-50: #F2F3F5;
18
+ --secondary-100: #DADEE3;
19
+ --secondary-200: #C1C8D1;
20
+ --secondary-300: #A9B3BE;
21
+ --secondary-400: #919DAC;
22
+ --secondary-500: #79889A;
23
+ --secondary-600: #607083;
24
+ --secondary-700: #49586A;
25
+ --secondary-800: #34404F;
26
+ --secondary-900: #1F2833;
27
+ --neutral-0: #0B0E12;
28
+ --neutral-50: #141A21;
29
+ --neutral-100: #232B34;
30
+ --neutral-200: #39424D;
31
+ --neutral-300: #505A66;
32
+ --neutral-400: #6B7582;
33
+ --neutral-500: #8A95A3;
34
+ --neutral-600: #B0BAC6;
35
+ --neutral-700: #D5DBE3;
36
+ --neutral-800: #ECEFF3;
37
+ --neutral-900: #F7F9FB;
38
+ --neutral-1000: #FDFDFE;
39
+ --red-50: #140809;
40
+ --red-100: #270F12;
41
+ --red-200: #4E1E24;
42
+ --red-300: #752D35;
43
+ --red-400: #9C3C47;
44
+ --red-500: #C34B59;
45
+ --red-600: #CF6F7A;
46
+ --red-700: #DB939B;
47
+ --red-800: #E7B7BD;
48
+ --red-900: #F3DBDE;
49
+ --blue-50: #061121;
50
+ --blue-100: #0C1D38;
51
+ --blue-200: #183668;
52
+ --blue-300: #235097;
53
+ --blue-400: #2F69C7;
54
+ --blue-500: #3B82F6;
55
+ --blue-600: #629BF8;
56
+ --blue-700: #89B4FA;
57
+ --blue-800: #B1CDFB;
58
+ --blue-900: #D8E6FD;
59
+ --green-50: #0D150A;
60
+ --green-100: #192A13;
61
+ --green-200: #335527;
62
+ --green-300: #4C7F3A;
63
+ --green-400: #66AA4E;
64
+ --green-500: #7FD461;
65
+ --green-600: #99DD81;
66
+ --green-700: #B2E5A0;
67
+ --green-800: #CCEEC0;
68
+ --green-900: #E5F6DF;
69
+ --yellow-50: #161005;
70
+ --yellow-100: #2B1F09;
71
+ --yellow-200: #563E12;
72
+ --yellow-300: #825D1B;
73
+ --yellow-400: #AD7C24;
74
+ --yellow-500: #D89B2D;
75
+ --yellow-600: #E0AF57;
76
+ --yellow-700: #E8C381;
77
+ --yellow-800: #EFD7AB;
78
+ --yellow-900: #F7EBD5;
79
+ --purple-50: #FBF7FF;
80
+ --purple-100: #EAD6FD;
81
+ --purple-200: #DAB6FC;
82
+ --purple-300: #C996FA;
83
+ --purple-400: #B975F9;
84
+ --purple-500: #A855F7;
85
+ --purple-600: #8F48D2;
86
+ --purple-700: #763CAD;
87
+ --purple-800: #5C2F88;
88
+ --purple-900: #432263;
89
+ --cyan-50: #F3FBFD;
90
+ --cyan-100: #C3EDF5;
91
+ --cyan-200: #94E0ED;
92
+ --cyan-300: #65D2E4;
93
+ --cyan-400: #35C4DC;
94
+ --cyan-500: #06B6D4;
95
+ --cyan-600: #059BB4;
96
+ --cyan-700: #047F94;
97
+ --cyan-800: #036475;
98
+ --cyan-900: #024955;
99
+ --business-50: #FDF0E9;
100
+ --business-100: #F7D5C4;
101
+ --business-200: #EDBBA3;
102
+ --business-300: #E0A385;
103
+ --business-400: #CF8C6B;
104
+ --business-500: #BA7655;
105
+ --business-600: #A45E3C;
106
+ --business-700: #894727;
107
+ --business-800: #6A3216;
108
+ --business-900: #4E3224;
109
+ --teal-50: #F3FBFB;
110
+ --teal-100: #C7EEEA;
111
+ --teal-200: #9AE0D9;
112
+ --teal-300: #6DD3C8;
113
+ --teal-400: #41C5B7;
114
+ --teal-500: #14B8A6;
115
+ --teal-600: #119C8D;
116
+ --teal-700: #0E8174;
117
+ --teal-800: #0B655B;
118
+ --teal-900: #084A42;
119
+ --alpha-brand-primary-500-24: #1D4ED83D;
120
+ --alpha-brand-primary-500-16: #1D4ED829;
121
+ --alpha-brand-primary-500-8: #1D4ED814;
122
+ --alpha-brand-secondary-500-24: #79889A3D;
123
+ --alpha-brand-secondary-500-16: #79889A29;
124
+ --alpha-brand-secondary-500-8: #79889A14;
125
+ --alpha-brand-primary-500-4: #1D4ED80A;
126
+ --alpha-brand-primary-500-2: #1D4ED805;
127
+ --alpha-brand-primary-500-48: #1D4ED87A;
128
+ --alpha-base-black-72: #000000B8;
129
+ --alpha-base-black-64: #000000A3;
130
+ --alpha-base-black-48: #0000007A;
131
+ --alpha-base-black-32: #00000052;
132
+ --alpha-base-black-24: #0000003D;
133
+ --alpha-base-black-16: #00000029;
134
+ --alpha-base-white-72: #FFFFFFB8;
135
+ --alpha-base-white-64: #FFFFFFA3;
136
+ --alpha-base-white-48: #FFFFFF7A;
137
+ --alpha-base-white-32: #FFFFFF52;
138
+ --alpha-base-white-24: #FFFFFF3D;
139
+ --alpha-base-white-16: #FFFFFF29;
140
+ --alpha-base-black-12: #0000001F;
141
+ --alpha-base-black-8: #00000014;
142
+ --alpha-base-black-4: #0000000A;
143
+ --alpha-base-white-12: #FFFFFF1F;
144
+ --alpha-base-white-8: #FFFFFF14;
145
+ --alpha-base-white-4: #FFFFFF0A;
146
+ --alpha-base-white-2: #FFFFFF05;
147
+ --alpha-base-black-2: #00000005;
148
+ --alpha-base-black-none: #00000000;
149
+ --alpha-base-white-none: #FFFFFF00;
150
+ --alpha-blue-blue-500-72: #3B82F6B8;
151
+ --alpha-blue-blue-500-64: #3B82F6A3;
152
+ --alpha-blue-blue-500-48: #3B82F67A;
153
+ --alpha-blue-blue-500-32: #3B82F652;
154
+ --alpha-blue-blue-500-24: #3B82F63D;
155
+ --alpha-blue-blue-500-16: #3B82F629;
156
+ --alpha-blue-blue-500-12: #3B82F61F;
157
+ --alpha-blue-blue-500-8: #3B82F614;
158
+ --alpha-blue-blue-500-4: #3B82F60A;
159
+ --alpha-blue-blue-500-2: #3B82F605;
160
+ --alpha-neutral-neutral-500-72: #525866B8;
161
+ --alpha-neutral-neutral-500-64: #525866A3;
162
+ --alpha-neutral-neutral-500-48: #5258667A;
163
+ --alpha-neutral-neutral-500-32: #52586652;
164
+ --alpha-neutral-neutral-500-24: #5258663D;
165
+ --alpha-neutral-neutral-500-16: #52586629;
166
+ --alpha-neutral-neutral-500-12: #5258661F;
167
+ --alpha-neutral-neutral-500-8: #52586614;
168
+ --alpha-neutral-neutral-500-4: #5258660A;
169
+ --alpha-neutral-neutral-500-2: #52586605;
170
+ --aviation-amber-50: #FFF2E5;
171
+ --aviation-amber-100: #FFD9B2;
172
+ --aviation-amber-200: #FFCC99;
173
+ --aviation-amber-300: #FFB366;
174
+ --aviation-amber-400: #FF9933;
175
+ --aviation-amber-500: #FF8000;
176
+ --aviation-amber-600: #CC6600;
177
+ --aviation-amber-700: #994D00;
178
+ --aviation-amber-800: #663300;
179
+ --aviation-amber-900: #4D2600;
180
+
181
+ /* typography */
182
+ --family-title: 'Courier Prime';
183
+ --family-subheading: 'Courier Prime';
184
+ --family-label: 'Courier Prime';
185
+ --family-body: 'Courier Prime';
186
+ --size-xxs: 11px;
187
+ --size-sm: 14px;
188
+ --size-base: 16px;
189
+ --size-lg: 18px;
190
+ --size-xl: 20px;
191
+ --size-2xl: 24px;
192
+ --size-3xl: 30px;
193
+ --size-4xl: 36px;
194
+ --size-5xl: 48px;
195
+ --size-6xl: 60px;
196
+ --size-7xl: 72px;
197
+ --size-8xl: 96px;
198
+ --size-9xl: 128px;
199
+ --size-xs: 12px;
200
+ --weight-thin: 100;
201
+ --weight-extralight: 200;
202
+ --weight-light: 300;
203
+ --weight-regular: 400;
204
+ --weight-medium: 500;
205
+ --weight-semibold: 600;
206
+ --weight-bold: 700;
207
+ --weight-extrabold: 800;
208
+ --weight-black: 900;
209
+ --line-height-xxs-normal: 16px;
210
+ --line-height-normal-xxs: 16;
211
+ --line-height-xs-normal: 18px;
212
+ --line-height-normal-xs: 18;
213
+ --line-height-sm-normal: 20px;
214
+ --line-height-normal-sm: 20;
215
+ --line-height-base-normal: 24px;
216
+ --line-height-normal-base: 24;
217
+ --line-height-lg-normal: 27px;
218
+ --line-height-normal-lg: 27;
219
+ --line-height-xl-normal: 30px;
220
+ --line-height-normal-xl: 30;
221
+ --line-height-2xl-normal: 36px;
222
+ --line-height-normal-2xl: 36;
223
+ --line-height-3xl-normal: 45px;
224
+ --line-height-normal-3xl: 45;
225
+ --line-height-4xl-normal: 54px;
226
+ --line-height-normal-4xl: 54;
227
+ --line-height-5xl-normal: 72px;
228
+ --line-height-normal-5xl: 72;
229
+ --line-height-6xl-normal: 90px;
230
+ --line-height-normal-6xl: 90;
231
+ --line-height-7xl-normal: 108px;
232
+ --line-height-normal-7xl: 108;
233
+ --line-height-8xl-normal: 128px;
234
+ --line-height-normal-8xl: 128;
235
+ --line-height-9xl-normal: 144px;
236
+ --line-height-normal-9xl: 144;
237
+ --line-height-xxs-tight: 14px;
238
+ --line-height-tight-xxs: 14;
239
+ --line-height-xs-tight: 15px;
240
+ --line-height-tight-xs: 15;
241
+ --line-height-sm-tight: 17.5px;
242
+ --line-height-tight-sm: 17.5;
243
+ --line-height-base-tight: 20px;
244
+ --line-height-tight-base: 20;
245
+ --line-height-lg-tight: 22.5px;
246
+ --line-height-tight-lg: 22.5;
247
+ --line-height-xl-tight: 25px;
248
+ --line-height-tight-xl: 25;
249
+ --line-height-2xl-tight: 30px;
250
+ --line-height-tight-2xl: 30;
251
+ --line-height-3xl-tight: 37.5px;
252
+ --line-height-tight-3xl: 37.5;
253
+ --line-height-4xl-tight: 45px;
254
+ --line-height-tight-4xl: 45;
255
+ --line-height-5xl-tight: 60px;
256
+ --line-height-tight-5xl: 60;
257
+ --line-height-6xl-tight: 75px;
258
+ --line-height-tight-6xl: 75;
259
+ --line-height-7xl-tight: 90px;
260
+ --line-height-tight-7xl: 90;
261
+ --line-height-8xl-tight: 120px;
262
+ --line-height-tight-8xl: 120;
263
+ --line-height-9xl-tight: 128px;
264
+ --line-height-tight-9xl: 128;
265
+ --line-height-xxs-none: 11px;
266
+ --line-height-none-xxs: 11;
267
+ --line-height-xs-none: 12px;
268
+ --line-height-none-xs: 12;
269
+ --line-height-sm-none: 14px;
270
+ --line-height-none-sm: 14;
271
+ --line-height-base-none: 16px;
272
+ --line-height-none-base: 16;
273
+ --line-height-lg-none: 18px;
274
+ --line-height-none-lg: 18;
275
+ --line-height-xl-none: 20px;
276
+ --line-height-none-xl: 20;
277
+ --line-height-2xl-none: 24px;
278
+ --line-height-none-2xl: 24;
279
+ --line-height-3xl-none: 30px;
280
+ --line-height-none-3xl: 30;
281
+ --line-height-4xl-none: 36px;
282
+ --line-height-none-4xl: 36;
283
+ --line-height-5xl-none: 48px;
284
+ --line-height-none-5xl: 48;
285
+ --line-height-6xl-none: 60px;
286
+ --line-height-none-6xl: 60;
287
+ --line-height-7xl-none: 72px;
288
+ --line-height-none-7xl: 72;
289
+ --line-height-8xl-none: 96px;
290
+ --line-height-none-8xl: 96;
291
+ --line-height-9xl-none: 128px;
292
+ --line-height-none-9xl: 128;
293
+
294
+ /* desktop */
295
+ --desktop-title-h1-size: var(--size-6xl);
296
+ --desktop-title-h1-line-height: var(--line-height-6xl-normal);
297
+ --desktop-title-h1-line-weight: var(--weight-medium);
298
+ --desktop-title-h1-font: var(--family-title);
299
+ --desktop-title-h2-font: var(--family-title);
300
+ --desktop-title-h2-size: var(--size-5xl);
301
+ --desktop-title-h2-line-weight: var(--weight-medium);
302
+ --desktop-title-h2-line-height: var(--line-height-5xl-normal);
303
+ --desktop-title-h3-font: var(--family-title);
304
+ --desktop-title-h3-size: var(--size-4xl);
305
+ --desktop-title-h3-line-weight: var(--weight-bold);
306
+ --desktop-title-h3-line-height: var(--line-height-4xl-normal);
307
+ --desktop-title-h4-font: var(--family-title);
308
+ --desktop-title-h4-size: var(--size-3xl);
309
+ --desktop-title-h4-line-weight: var(--weight-bold);
310
+ --desktop-title-h4-line-height: var(--line-height-3xl-normal);
311
+ --desktop-title-h5-font: var(--family-title);
312
+ --desktop-title-h5-size: var(--size-2xl);
313
+ --desktop-title-h5-line-weight: var(--weight-bold);
314
+ --desktop-title-h5-line-height: var(--line-height-2xl-normal);
315
+ --desktop-title-display1-font: var(--family-title);
316
+ --desktop-title-display1-size: var(--size-8xl);
317
+ --desktop-title-display1-line-weight: var(--weight-medium);
318
+ --desktop-title-display1-line-height: var(--line-height-8xl-normal);
319
+ --desktop-title-display2-font: var(--family-title);
320
+ --desktop-title-display2-size: var(--size-7xl);
321
+ --desktop-title-display2-line-weight: var(--weight-medium);
322
+ --desktop-title-display2-line-height: var(--line-height-7xl-normal);
323
+ --desktop-title-h6-font: var(--family-title);
324
+ --desktop-title-h6-size: var(--size-xl);
325
+ --desktop-title-h6-line-weight: var(--weight-bold);
326
+ --desktop-title-h6-line-height: var(--line-height-xl-normal);
327
+ --desktop-body-xl-font: var(--family-body);
328
+ --desktop-body-xl-size: var(--size-xl);
329
+ --desktop-body-xl-line-weight: var(--weight-medium);
330
+ --desktop-body-xl-line-height: var(--line-height-xl-normal);
331
+ --desktop-body-l-font: var(--family-body);
332
+ --desktop-body-l-size: var(--size-lg);
333
+ --desktop-body-l-line-weight: var(--weight-medium);
334
+ --desktop-body-l-line-height: var(--line-height-lg-normal);
335
+ --desktop-body-m-base-font: var(--family-body);
336
+ --desktop-body-m-base-size: var(--size-base);
337
+ --desktop-body-m-base-line-weight: var(--weight-medium);
338
+ --desktop-body-m-base-line-height: var(--line-height-base-normal);
339
+ --desktop-body-2xl-font: var(--family-body);
340
+ --desktop-body-2xl-size: var(--size-2xl);
341
+ --desktop-body-2xl-line-weight: var(--weight-medium);
342
+ --desktop-body-2xl-line-height: var(--line-height-2xl-normal);
343
+ --desktop-body-s-font: var(--family-body);
344
+ --desktop-body-s-size: var(--size-sm);
345
+ --desktop-body-s-line-weight: var(--weight-medium);
346
+ --desktop-body-s-line-height: var(--line-height-sm-normal);
347
+ --desktop-body-xs-font: var(--family-body);
348
+ --desktop-body-xs-size: var(--size-xs);
349
+ --desktop-body-xs-line-weight: var(--weight-medium);
350
+ --desktop-body-xs-line-height: var(--line-height-xs-normal);
351
+ --desktop-body-2xs-font: var(--family-body);
352
+ --desktop-body-2xs-size: var(--size-xxs);
353
+ --desktop-body-2xs-line-weight: var(--weight-medium);
354
+ --desktop-body-2xs-line-height: var(--line-height-xxs-normal);
355
+ --desktop-subheading-s-font: var(--family-body);
356
+ --desktop-subheading-s-size: var(--size-sm);
357
+ --desktop-subheading-s-line-weight: var(--weight-medium);
358
+ --desktop-subheading-s-line-height: var(--line-height-sm-normal);
359
+ --desktop-subheading-xs-font: var(--family-body);
360
+ --desktop-subheading-xs-size: var(--size-xs);
361
+ --desktop-subheading-xs-line-weight: var(--weight-medium);
362
+ --desktop-subheading-xs-line-height: var(--line-height-xs-normal);
363
+ --desktop-subheading-2xs-font: var(--family-body);
364
+ --desktop-subheading-2xs-size: var(--size-xxs);
365
+ --desktop-subheading-2xs-line-weight: var(--weight-medium);
366
+ --desktop-subheading-2xs-line-height: var(--line-height-xxs-normal);
367
+ --desktop-subheading-m-base-font: var(--family-body);
368
+ --desktop-subheading-m-base-size: var(--size-base);
369
+ --desktop-subheading-m-base-line-weight: var(--weight-medium);
370
+ --desktop-subheading-m-base-line-height: var(--line-height-base-normal);
371
+ --desktop-label-s-font: var(--family-body);
372
+ --desktop-label-s-size: var(--size-xs);
373
+ --desktop-label-s-line-weight: var(--weight-medium);
374
+ --desktop-label-s-line-height: var(--line-height-xs-normal);
375
+ --desktop-label-underline-s-font: var(--family-body);
376
+ --desktop-label-underline-s-size: var(--size-xs);
377
+ --desktop-label-underline-s-line-weight: var(--weight-medium);
378
+ --desktop-label-underline-s-line-height: var(--line-height-xs-normal);
379
+ --desktop-label-underline-m-base-font: var(--family-body);
380
+ --desktop-label-underline-m-base-size: var(--size-sm);
381
+ --desktop-label-underline-m-base-line-weight: var(--weight-medium);
382
+ --desktop-label-underline-m-base-line-height: var(--line-height-sm-normal);
383
+ --desktop-label-underline-l-font: var(--family-body);
384
+ --desktop-label-underline-l-size: var(--size-base);
385
+ --desktop-label-underline-l-line-weight: var(--weight-medium);
386
+ --desktop-label-underline-l-line-height: var(--line-height-base-normal);
387
+ --desktop-label-m-base-font: var(--family-body);
388
+ --desktop-label-m-base-size: var(--size-sm);
389
+ --desktop-label-m-base-line-weight: var(--weight-medium);
390
+ --desktop-label-m-base-line-height: var(--line-height-sm-normal);
391
+ --desktop-label-l-font: var(--family-body);
392
+ --desktop-label-l-size: var(--size-base);
393
+ --desktop-label-l-line-weight: var(--weight-medium);
394
+ --desktop-label-l-line-height: var(--line-height-base-normal);
395
+
396
+ /* tablet */
397
+ --tablet-title-h1-size: var(--size-5xl);
398
+ --tablet-title-h1-line-height: var(--line-height-6xl-normal);
399
+ --tablet-title-h1-line-weight: var(--weight-medium);
400
+ --tablet-title-h1-font: var(--family-title);
401
+ --tablet-title-h2-font: var(--family-title);
402
+ --tablet-title-h2-size: var(--size-4xl);
403
+ --tablet-title-h2-line-weight: var(--weight-medium);
404
+ --tablet-title-h2-line-height: var(--line-height-5xl-normal);
405
+ --tablet-title-h3-font: var(--family-title);
406
+ --tablet-title-h3-size: var(--size-3xl);
407
+ --tablet-title-h3-line-weight: var(--weight-bold);
408
+ --tablet-title-h3-line-height: var(--line-height-4xl-normal);
409
+ --tablet-title-h4-font: var(--family-title);
410
+ --tablet-title-h4-size: var(--size-2xl);
411
+ --tablet-title-h4-line-weight: var(--weight-bold);
412
+ --tablet-title-h4-line-height: var(--line-height-3xl-normal);
413
+ --tablet-title-h5-font: var(--family-title);
414
+ --tablet-title-h5-size: var(--size-xl);
415
+ --tablet-title-h5-line-weight: var(--weight-bold);
416
+ --tablet-title-h5-line-height: var(--line-height-2xl-normal);
417
+ --tablet-title-display1-font: var(--family-title);
418
+ --tablet-title-display1-size: var(--size-7xl);
419
+ --tablet-title-display1-line-weight: var(--weight-medium);
420
+ --tablet-title-display1-line-height: var(--line-height-8xl-normal);
421
+ --tablet-title-display2-font: var(--family-title);
422
+ --tablet-title-display2-size: var(--size-6xl);
423
+ --tablet-title-display2-line-weight: var(--weight-medium);
424
+ --tablet-title-display2-line-height: var(--line-height-7xl-normal);
425
+ --tablet-title-h6-font: var(--family-title);
426
+ --tablet-title-h6-size: var(--size-lg);
427
+ --tablet-title-h6-line-weight: var(--weight-bold);
428
+ --tablet-title-h6-line-height: var(--line-height-xl-normal);
429
+ --tablet-body-xl-font: var(--family-body);
430
+ --tablet-body-xl-size: var(--size-lg);
431
+ --tablet-body-xl-line-weight: var(--weight-medium);
432
+ --tablet-body-xl-line-height: var(--line-height-xl-normal);
433
+ --tablet-body-l-font: var(--family-body);
434
+ --tablet-body-l-size: var(--size-base);
435
+ --tablet-body-l-line-weight: var(--weight-medium);
436
+ --tablet-body-l-line-height: var(--line-height-lg-normal);
437
+ --tablet-body-m-base-font: var(--family-body);
438
+ --tablet-body-m-base-size: var(--size-sm);
439
+ --tablet-body-m-base-line-weight: var(--weight-medium);
440
+ --tablet-body-m-base-line-height: var(--line-height-base-normal);
441
+ --tablet-body-2xl-font: var(--family-body);
442
+ --tablet-body-2xl-size: var(--size-xl);
443
+ --tablet-body-2xl-line-weight: var(--weight-medium);
444
+ --tablet-body-2xl-line-height: var(--line-height-2xl-normal);
445
+ --tablet-body-s-font: var(--family-body);
446
+ --tablet-body-s-size: var(--size-xs);
447
+ --tablet-body-s-line-weight: var(--weight-medium);
448
+ --tablet-body-s-line-height: var(--line-height-sm-normal);
449
+ --tablet-body-xs-font: var(--family-body);
450
+ --tablet-body-xs-size: var(--size-xs);
451
+ --tablet-body-xs-line-weight: var(--weight-medium);
452
+ --tablet-body-xs-line-height: var(--line-height-xs-normal);
453
+ --tablet-body-2xs-font: var(--family-body);
454
+ --tablet-body-2xs-size: var(--size-xxs);
455
+ --tablet-body-2xs-line-weight: var(--weight-medium);
456
+ --tablet-body-2xs-line-height: var(--line-height-xxs-normal);
457
+ --tablet-subheading-s-font: var(--family-body);
458
+ --tablet-subheading-s-size: var(--size-sm);
459
+ --tablet-subheading-s-line-weight: var(--weight-medium);
460
+ --tablet-subheading-s-line-height: var(--line-height-sm-normal);
461
+ --tablet-subheading-xs-font: var(--family-body);
462
+ --tablet-subheading-xs-size: var(--size-xs);
463
+ --tablet-subheading-xs-line-weight: var(--weight-medium);
464
+ --tablet-subheading-xs-line-height: var(--line-height-xs-normal);
465
+ --tablet-subheading-2xs-font: var(--family-body);
466
+ --tablet-subheading-2xs-size: var(--size-xxs);
467
+ --tablet-subheading-2xs-line-weight: var(--weight-medium);
468
+ --tablet-subheading-2xs-line-height: var(--line-height-xxs-normal);
469
+ --tablet-subheading-m-base-font: var(--family-body);
470
+ --tablet-subheading-m-base-size: var(--size-base);
471
+ --tablet-subheading-m-base-line-weight: var(--weight-medium);
472
+ --tablet-subheading-m-base-line-height: var(--line-height-base-normal);
473
+ --tablet-label-s-font: var(--family-body);
474
+ --tablet-label-s-size: var(--size-xs);
475
+ --tablet-label-s-line-weight: var(--weight-medium);
476
+ --tablet-label-s-line-height: var(--line-height-xs-normal);
477
+ --tablet-label-underline-s-font: var(--family-body);
478
+ --tablet-label-underline-s-size: var(--size-xs);
479
+ --tablet-label-underline-s-line-weight: var(--weight-medium);
480
+ --tablet-label-underline-s-line-height: var(--line-height-xs-normal);
481
+ --tablet-label-underline-m-base-font: var(--family-body);
482
+ --tablet-label-underline-m-base-size: var(--size-xs);
483
+ --tablet-label-underline-m-base-line-weight: var(--weight-medium);
484
+ --tablet-label-underline-m-base-line-height: var(--line-height-xs-normal);
485
+ --tablet-label-underline-l-font: var(--family-body);
486
+ --tablet-label-underline-l-size: var(--size-sm);
487
+ --tablet-label-underline-l-line-weight: var(--weight-medium);
488
+ --tablet-label-underline-l-line-height: var(--line-height-sm-normal);
489
+ --tablet-label-m-base-font: var(--family-body);
490
+ --tablet-label-m-base-size: var(--size-sm);
491
+ --tablet-label-m-base-line-weight: var(--weight-medium);
492
+ --tablet-label-m-base-line-height: var(--line-height-sm-normal);
493
+ --tablet-label-l-font: var(--family-body);
494
+ --tablet-label-l-size: var(--size-sm);
495
+ --tablet-label-l-line-weight: var(--weight-medium);
496
+ --tablet-label-l-line-height: var(--line-height-sm-normal);
497
+
498
+ /* mobile */
499
+ --mobile-title-h1-size: var(--size-4xl);
500
+ --mobile-title-h1-line-height: var(--line-height-6xl-normal);
501
+ --mobile-title-h1-line-weight: var(--weight-medium);
502
+ --mobile-title-h1-font: var(--family-title);
503
+ --mobile-title-h2-font: var(--family-title);
504
+ --mobile-title-h2-size: var(--size-3xl);
505
+ --mobile-title-h2-line-weight: var(--weight-medium);
506
+ --mobile-title-h2-line-height: var(--line-height-5xl-normal);
507
+ --mobile-title-h3-font: var(--family-title);
508
+ --mobile-title-h3-size: var(--size-2xl);
509
+ --mobile-title-h3-line-weight: var(--weight-bold);
510
+ --mobile-title-h3-line-height: var(--line-height-4xl-normal);
511
+ --mobile-title-h4-font: var(--family-title);
512
+ --mobile-title-h4-size: var(--size-xl);
513
+ --mobile-title-h4-line-weight: var(--weight-bold);
514
+ --mobile-title-h4-line-height: var(--line-height-3xl-normal);
515
+ --mobile-title-h5-font: var(--family-title);
516
+ --mobile-title-h5-size: var(--size-lg);
517
+ --mobile-title-h5-line-weight: var(--weight-bold);
518
+ --mobile-title-h5-line-height: var(--line-height-2xl-normal);
519
+ --mobile-title-display1-font: var(--family-title);
520
+ --mobile-title-display1-size: var(--size-6xl);
521
+ --mobile-title-display1-line-weight: var(--weight-medium);
522
+ --mobile-title-display1-line-height: var(--line-height-8xl-normal);
523
+ --mobile-title-display2-font: var(--family-title);
524
+ --mobile-title-display2-size: var(--size-5xl);
525
+ --mobile-title-display2-line-weight: var(--weight-medium);
526
+ --mobile-title-display2-line-height: var(--line-height-7xl-normal);
527
+ --mobile-title-h6-font: var(--family-title);
528
+ --mobile-title-h6-size: var(--size-base);
529
+ --mobile-title-h6-line-weight: var(--weight-bold);
530
+ --mobile-title-h6-line-height: var(--line-height-xl-normal);
531
+ --mobile-body-xl-font: var(--family-body);
532
+ --mobile-body-xl-size: var(--size-base);
533
+ --mobile-body-xl-line-weight: var(--weight-medium);
534
+ --mobile-body-xl-line-height: var(--line-height-base-normal);
535
+ --mobile-body-l-font: var(--family-body);
536
+ --mobile-body-l-size: var(--size-sm);
537
+ --mobile-body-l-line-weight: var(--weight-medium);
538
+ --mobile-body-l-line-height: var(--line-height-lg-normal);
539
+ --mobile-body-m-base-font: var(--family-body);
540
+ --mobile-body-m-base-size: var(--size-xs);
541
+ --mobile-body-m-base-line-weight: var(--weight-medium);
542
+ --mobile-body-m-base-line-height: var(--line-height-base-normal);
543
+ --mobile-body-2xl-font: var(--family-body);
544
+ --mobile-body-2xl-size: var(--size-lg);
545
+ --mobile-body-2xl-line-weight: var(--weight-medium);
546
+ --mobile-body-2xl-line-height: var(--line-height-2xl-normal);
547
+ --mobile-body-s-font: var(--family-body);
548
+ --mobile-body-s-size: var(--size-xs);
549
+ --mobile-body-s-line-weight: var(--weight-medium);
550
+ --mobile-body-s-line-height: var(--line-height-sm-normal);
551
+ --mobile-body-xs-font: var(--family-body);
552
+ --mobile-body-xs-size: var(--size-xs);
553
+ --mobile-body-xs-line-weight: var(--weight-medium);
554
+ --mobile-body-xs-line-height: var(--line-height-xs-normal);
555
+ --mobile-body-2xs-font: var(--family-body);
556
+ --mobile-body-2xs-size: var(--size-xxs);
557
+ --mobile-body-2xs-line-weight: var(--weight-medium);
558
+ --mobile-body-2xs-line-height: var(--line-height-xxs-normal);
559
+ --mobile-subheading-s-font: var(--family-body);
560
+ --mobile-subheading-s-size: var(--size-xs);
561
+ --mobile-subheading-s-line-weight: var(--weight-medium);
562
+ --mobile-subheading-s-line-height: var(--line-height-xs-normal);
563
+ --mobile-subheading-xs-font: var(--family-body);
564
+ --mobile-subheading-xs-size: var(--size-xs);
565
+ --mobile-subheading-xs-line-weight: var(--weight-medium);
566
+ --mobile-subheading-xs-line-height: var(--line-height-xs-normal);
567
+ --mobile-subheading-2xs-font: var(--family-body);
568
+ --mobile-subheading-2xs-size: var(--size-xxs);
569
+ --mobile-subheading-2xs-line-weight: var(--weight-medium);
570
+ --mobile-subheading-2xs-line-height: var(--line-height-xxs-normal);
571
+ --mobile-subheading-m-base-font: var(--family-body);
572
+ --mobile-subheading-m-base-size: var(--size-xs);
573
+ --mobile-subheading-m-base-line-weight: var(--weight-medium);
574
+ --mobile-subheading-m-base-line-height: var(--line-height-xs-normal);
575
+ --mobile-label-s-font: var(--family-body);
576
+ --mobile-label-s-size: var(--size-xxs);
577
+ --mobile-label-s-line-weight: var(--weight-medium);
578
+ --mobile-label-s-line-height: var(--line-height-xxs-normal);
579
+ --mobile-label-underline-s-font: var(--family-body);
580
+ --mobile-label-underline-s-size: var(--size-xxs);
581
+ --mobile-label-underline-s-line-weight: var(--weight-medium);
582
+ --mobile-label-underline-s-line-height: var(--line-height-xxs-normal);
583
+ --mobile-label-underline-m-base-font: var(--family-body);
584
+ --mobile-label-underline-m-base-size: var(--size-xxs);
585
+ --mobile-label-underline-m-base-line-weight: var(--weight-medium);
586
+ --mobile-label-underline-m-base-line-height: var(--line-height-xxs-normal);
587
+ --mobile-label-underline-l-font: var(--family-body);
588
+ --mobile-label-underline-l-size: var(--size-xs);
589
+ --mobile-label-underline-l-line-weight: var(--weight-medium);
590
+ --mobile-label-underline-l-line-height: var(--line-height-xs-normal);
591
+ --mobile-label-m-base-font: var(--family-body);
592
+ --mobile-label-m-base-size: var(--size-xs);
593
+ --mobile-label-m-base-line-weight: var(--weight-medium);
594
+ --mobile-label-m-base-line-height: var(--line-height-xs-normal);
595
+ --mobile-label-l-font: var(--family-body);
596
+ --mobile-label-l-size: var(--size-xs);
597
+ --mobile-label-l-line-weight: var(--weight-medium);
598
+ --mobile-label-l-line-height: var(--line-height-xs-normal);
599
+
600
+ /* line-heights */
601
+ --line-height-normal-xxs: 16;
602
+ --line-height-normal-xs: 18;
603
+ --line-height-normal-sm: 20;
604
+ --line-height-normal-base: 24;
605
+ --line-height-normal-lg: 27;
606
+ --line-height-normal-xl: 30;
607
+ --line-height-normal-2xl: 36;
608
+ --line-height-normal-3xl: 45;
609
+ --line-height-normal-4xl: 54;
610
+ --line-height-normal-5xl: 72;
611
+ --line-height-normal-6xl: 90;
612
+ --line-height-normal-7xl: 108;
613
+ --line-height-normal-8xl: 128;
614
+ --line-height-normal-9xl: 144;
615
+ --line-height-tight-xxs: 14;
616
+ --line-height-tight-xs: 15;
617
+ --line-height-tight-sm: 17.5;
618
+ --line-height-tight-base: 20;
619
+ --line-height-tight-lg: 22.5;
620
+ --line-height-tight-xl: 25;
621
+ --line-height-tight-2xl: 30;
622
+ --line-height-tight-3xl: 37.5;
623
+ --line-height-tight-4xl: 45;
624
+ --line-height-tight-5xl: 60;
625
+ --line-height-tight-6xl: 75;
626
+ --line-height-tight-7xl: 90;
627
+ --line-height-tight-8xl: 120;
628
+ --line-height-tight-9xl: 128;
629
+ --line-height-none-xxs: 11;
630
+ --line-height-none-xs: 12;
631
+ --line-height-none-sm: 14;
632
+ --line-height-none-base: 16;
633
+ --line-height-none-lg: 18;
634
+ --line-height-none-xl: 20;
635
+ --line-height-none-2xl: 24;
636
+ --line-height-none-3xl: 30;
637
+ --line-height-none-4xl: 36;
638
+ --line-height-none-5xl: 48;
639
+ --line-height-none-6xl: 60;
640
+ --line-height-none-7xl: 72;
641
+ --line-height-none-8xl: 96;
642
+ --line-height-none-9xl: 128;
643
+
644
+ /* -------------------------- SEMANTICS -------------------------- */
645
+ --effect-1-default-xl: 0px 2px 2px -1px var(--shadow-black-alpha-darkest), 0px 6px 12px -2px var(--shadow-black-alpha-darkest), 0px 8px 20px 0px var(--shadow-black-alpha-darkest);
646
+ --effect-1-default-lg: 0px 2px 2px -1px var(--shadow-black-alpha-dark), 0px 6px 12px -2px var(--shadow-black-alpha-dark), 0px 8px 20px 0px var(--shadow-black-alpha-dark);
647
+ --effect-1-default-base: 0px 2px 2px -1px var(--shadow-black-alpha-base), 0px 6px 12px -2px var(--shadow-black-alpha-base), 0px 8px 20px 0px var(--shadow-black-alpha-base);
648
+ --effect-1-default-sm: 0px 2px 2px -1px var(--shadow-black-alpha-light), 0px 6px 12px -2px var(--shadow-black-alpha-light), 0px 8px 20px 0px var(--shadow-black-alpha-light);
649
+ --effect-1-default-xs: 0px 2px 2px -1px var(--shadow-black-alpha-lightest), 0px 6px 12px -2px var(--shadow-black-alpha-lightest), 0px 8px 20px 0px var(--shadow-black-alpha-lightest);
650
+ --effect-1-hover-xl: 0px 2px 2px -1px var(--shadow-black-alpha-darkest), 0px 6px 12px -2px var(--shadow-black-alpha-darkest), 0px 8px 20px 0px var(--shadow-black-alpha-darkest);
651
+ --effect-1-hover-lg: 0px 2px 2px -1px var(--shadow-black-alpha-dark), 0px 6px 12px 2px var(--shadow-black-alpha-dark), 0px 8px 20px 4px var(--shadow-black-alpha-dark);
652
+ --effect-1-hover-base: 0px 2px 2px -1px var(--shadow-black-alpha-base), 0px 6px 12px 2px var(--shadow-black-alpha-base), 0px 8px 20px 4px var(--shadow-black-alpha-base);
653
+ --effect-1-hover-sm: 0px 2px 2px -1px var(--shadow-black-alpha-light), 0px 6px 12px 2px var(--shadow-black-alpha-light), 0px 8px 20px 4px var(--shadow-black-alpha-light);
654
+ --effect-1-hover-xs: 0px 2px 2px -1px var(--shadow-black-alpha-lightest), 0px 6px 12px 2px var(--shadow-black-alpha-lightest), 0px 8px 20px 4px var(--shadow-black-alpha-lightest);
655
+ --effect-2-default-xl: 0px 0px 20px 3px var(--shadow-black-alpha-darkest);
656
+ --effect-2-default-lg: 0px 0px 20px 3px var(--shadow-black-alpha-dark);
657
+ --effect-2-default-base: 0px 0px 20px 3px var(--shadow-black-alpha-base);
658
+ --effect-2-default-sm: 0px 0px 20px 3px var(--shadow-black-alpha-light);
659
+ --effect-2-default-xs: 0px 0px 20px 6px var(--shadow-black-alpha-lightest);
660
+ --effect-2-hover-xl: 0px 0px 20px 8px var(--shadow-black-alpha-darkest);
661
+ --effect-2-hover-lg: 0px 0px 20px 8px var(--shadow-black-alpha-dark);
662
+ --effect-2-hover-base: 0px 0px 20px 8px var(--shadow-black-alpha-base);
663
+ --effect-2-hover-sm: 0px 0px 20px 8px var(--shadow-black-alpha-light);
664
+ --effect-2-hover-xs: 0px 0px 20px 8px var(--shadow-black-alpha-lightest);
665
+ --primary-focus: 0px 0px 0px 2px var(--static-light), 0px 0px 0px 4px var(--primary-light);
666
+ --secondary-focus: 0px 0px 0px 2px var(--static-light), 0px 0px 0px 4px var(--states-info-base);
667
+ --info-focus: 0px 0px 0px 2px var(--static-light), 0px 0px 0px 4px var(--states-info-sub-base);
668
+ --secondary-light-focus: 0px 0px 0px 1px var(--static-light), 0px 0px 0px 2px var(--states-info-base);
669
+ --neutral-focus: 0px 0px 0px 2px var(--static-light), 0px 0px 0px 4px var(--background-light);
670
+
671
+ /* radius */
672
+ --radius-s: 6px;
673
+ --radius-m-base: 8px;
674
+ --radius-xxs: 2px;
675
+ --radius-l: 12px;
676
+ --radius-xl: 16px;
677
+ --radius-2xl: 20px;
678
+ --radius-3xl: 24px;
679
+ --radius-4xl: 32px;
680
+ --radius-full: 999px;
681
+ --radius-none: 0px;
682
+ --radius-xs: 4px;
683
+
684
+ /* spacing */
685
+ --spacing-xxs: 2px;
686
+ --spacing-xs: 4px;
687
+ --spacing-m-base: 8px;
688
+ --spacing-4xl: 16px;
689
+ --spacing-5xl: 20px;
690
+ --spacing-6xl: 24px;
691
+ --spacing-8xl: 32px;
692
+ --spacing-10xl: 40px;
693
+ --spacing-12xl: 48px;
694
+ --spacing-14xl: 56px;
695
+ --spacing-16xl: 64px;
696
+ --spacing-20xl: 80px;
697
+ --spacing-24xl: 96px;
698
+ --spacing-28xl: 112px;
699
+ --spacing-32xl: 128px;
700
+ --spacing-xl: 12px;
701
+ --spacing-none: 0px;
702
+ --spacing-px: 1px;
703
+ --spacing-s: 6px;
704
+ --spacing-l: 10px;
705
+ --spacing-2xl: 14px;
706
+ --spacing-7xl: 28px;
707
+ --spacing-9xl: 36px;
708
+ --spacing-11xl: 44px;
709
+ --spacing-15xl: 60px;
710
+ --spacing-36xl: 144px;
711
+ --spacing-44xl: 176px;
712
+ --spacing-40xl: 160px;
713
+ --spacing-48xl: 192px;
714
+ --spacing-52xl: 208px;
715
+ --spacing-56xl: 224px;
716
+ --spacing-60xl: 240px;
717
+ --spacing-64xl: 256px;
718
+ --spacing-72xl: 288px;
719
+ --spacing-80xl: 320px;
720
+ --spacing-96xl: 384px;
721
+
722
+ /* semantic colors light */
723
+ --primary-light: var(--primary-100);
724
+ --primary-sub-base: var(--primary-300);
725
+ --primary-base: var(--primary-500);
726
+ --primary-dark: var(--primary-700);
727
+ --primary-darkest: var(--primary-800);
728
+ --primary-lightest: var(--primary-50);
729
+ --background-lightest: var(--neutral-50);
730
+ --background-sub-base: var(--neutral-300);
731
+ --background-base: var(--neutral-500);
732
+ --background-dark: var(--neutral-600);
733
+ --background-darkest: var(--neutral-800);
734
+ --background-light: var(--neutral-200);
735
+ --frames-lightest: var(--neutral-0);
736
+ --frames-sub-base: var(--neutral-400);
737
+ --frames-base: var(--neutral-600);
738
+ --frames-dark: var(--neutral-900);
739
+ --frames-darkest: var(--neutral-1000);
740
+ --frames-light: var(--neutral-50);
741
+ --text-light: var(--neutral-300);
742
+ --text-base: var(--neutral-500);
743
+ --text-darkest: var(--neutral-800);
744
+ --text-dark: var(--neutral-600);
745
+ --text-sub-base: var(--neutral-400);
746
+ --text-lightest: var(--neutral-50);
747
+ --border-light: var(--neutral-200);
748
+ --border-sub-base: var(--neutral-300);
749
+ --border-base: var(--neutral-500);
750
+ --border-dark: var(--neutral-600);
751
+ --border-darkest: var(--neutral-800);
752
+ --border-lightest: var(--neutral-50);
753
+ --icon-light: var(--neutral-200);
754
+ --icon-sub-base: var(--neutral-300);
755
+ --icon-base: var(--neutral-500);
756
+ --icon-dark: var(--neutral-600);
757
+ --icon-darkest: var(--neutral-800);
758
+ --icon-lightest: var(--neutral-50);
759
+ --overlay-black-lightest: var(--alpha-base-black-16);
760
+ --overlay-black-light: var(--alpha-base-black-32);
761
+ --overlay-black-base: var(--alpha-base-black-48);
762
+ --overlay-black-dark: var(--alpha-base-black-64);
763
+ --overlay-black-darkest: var(--alpha-base-black-72);
764
+ --overlay-black-xxlightest: var(--alpha-base-black-2);
765
+ --overlay-black-xlightest: var(--alpha-base-black-8);
766
+ --overlay-black-none: var(--alpha-base-black-none);
767
+ --overlay-white-lightest: var(--alpha-base-white-16);
768
+ --overlay-white-light: var(--alpha-base-white-32);
769
+ --overlay-white-base: var(--alpha-base-white-48);
770
+ --overlay-white-dark: var(--alpha-base-white-64);
771
+ --overlay-white-darkest: var(--alpha-base-white-72);
772
+ --overlay-white-none: var(--alpha-base-white-none);
773
+ --states-lightest: var(--neutral-50);
774
+ --states-light: var(--neutral-300);
775
+ --states-base: var(--secondary-500);
776
+ --states-dark: var(--neutral-600);
777
+ --states-darkest: var(--neutral-800);
778
+ --states-info-light: var(--blue-100);
779
+ --states-info-sub-base: var(--blue-200);
780
+ --states-info-base: var(--blue-500);
781
+ --states-info-dark: var(--blue-700);
782
+ --states-info-darkest: var(--blue-800);
783
+ --states-info-lightest: var(--blue-50);
784
+ --states-success-light: var(--green-100);
785
+ --states-success-sub-base: var(--green-200);
786
+ --states-success-base: var(--green-500);
787
+ --states-success-dark: var(--green-700);
788
+ --states-success-darkest: var(--green-800);
789
+ --states-success-lightest: var(--green-50);
790
+ --states-danger-light: var(--red-100);
791
+ --states-danger-sub-base: var(--red-200);
792
+ --states-danger-base: var(--red-500);
793
+ --states-danger-dark: var(--red-700);
794
+ --states-danger-darkest: var(--red-800);
795
+ --states-danger-lightest: var(--red-50);
796
+ --states-warning-light: var(--yellow-100);
797
+ --states-warning-sub-base: var(--yellow-200);
798
+ --states-warning-base: var(--yellow-500);
799
+ --states-warning-dark: var(--yellow-700);
800
+ --states-warning-darkest: var(--yellow-800);
801
+ --states-warning-lightest: var(--yellow-50);
802
+ --states-verified-light: var(--blue-100);
803
+ --states-verified-sub-base: var(--blue-200);
804
+ --states-verified-base: var(--blue-500);
805
+ --states-verified-dark: var(--blue-700);
806
+ --states-verified-darkest: var(--blue-800);
807
+ --states-verified-lightest: var(--blue-50);
808
+ --static-dark: var(--static-black);
809
+ --static-light: var(--static-white);
810
+ --shadow-black-alpha-lightest: var(--alpha-neutral-neutral-500-2);
811
+ --shadow-black-alpha-light: var(--alpha-neutral-neutral-500-4);
812
+ --shadow-black-alpha-base: var(--alpha-neutral-neutral-500-8);
813
+ --shadow-black-alpha-dark: var(--alpha-neutral-neutral-500-12);
814
+ --shadow-black-alpha-darkest: var(--alpha-neutral-neutral-500-16);
815
+ --shadow-blue-alpha-lightest: var(--alpha-blue-blue-500-2);
816
+ --shadow-blue-alpha-light: var(--alpha-blue-blue-500-4);
817
+ --shadow-blue-alpha-base: var(--alpha-blue-blue-500-8);
818
+ --shadow-blue-alpha-dark: var(--alpha-blue-blue-500-12);
819
+ --shadow-blue-alpha-darkest: var(--alpha-blue-blue-500-16);
820
+ --shadow-primary-alpha-lightest: var(--alpha-brand-primary-500-2);
821
+ --shadow-primary-alpha-light: var(--alpha-brand-primary-500-4);
822
+ --shadow-primary-alpha-base: var(--alpha-brand-primary-500-8);
823
+ --shadow-primary-alpha-dark: var(--alpha-brand-primary-500-16);
824
+ --shadow-primary-alpha-darkest: var(--alpha-brand-primary-500-24);
825
+ --secondary-lightest: var(--secondary-50);
826
+ --secondary-light: var(--secondary-100);
827
+ --secondary-sub-base: var(--secondary-300);
828
+ --secondary-base: var(--secondary-500);
829
+ --secondary-dark: var(--secondary-600);
830
+ --secondary-darkest: var(--secondary-800);
831
+ --skeleton-skeleton-gradient-none: #F9FAFC00;
832
+ --skeleton-skeleton-gradient: #F9FAFC;
833
+ /* end of semantic colors light */
834
+
835
+ /* ------ accordion variables ------ */
836
+ --accordion-base-radius: var(--radius-m-base);
837
+ --accordion-base-h-padding: var(--spacing-xl);
838
+ --accordion-base-v-padding: var(--spacing-xl);
839
+ --accordion-base-gap: var(--spacing-s);
840
+ --accordion-base-content-gap: var(--spacing-s);
841
+ --accordion-large-radius: var(--radius-m-base);
842
+ --accordion-large-h-padding: var(--spacing-xl);
843
+ --accordion-large-v-padding: var(--spacing-xl);
844
+ --accordion-large-gap: var(--spacing-m-base);
845
+ --accordion-large-content-gap: var(--spacing-m-base);
846
+
847
+ /* ------ alert variables ------ */
848
+ --alert-sign-base-size: var(--spacing-5xl);
849
+ --alert-sign-base-full-padding: var(--spacing-s);
850
+ --alert-sign-large-size: var(--spacing-6xl);
851
+ --alert-sign-large-full-padding: var(--spacing-m-base);
852
+ --alert-sign-small-size: var(--spacing-4xl);
853
+ --alert-sign-small-full-padding: var(--spacing-xs);
854
+ --alert-base-gap: var(--spacing-m-base);
855
+ --alert-base-content-gap: var(--spacing-m-base);
856
+ --alert-base-h-padding: var(--spacing-xl);
857
+ --alert-base-v-padding: var(--spacing-xl);
858
+ --alert-base-radius: var(--radius-m-base);
859
+
860
+ /* ------ anchore variables ------ */
861
+ --anchore-items-nest-large-h-padding: var(--spacing-xl);
862
+ --anchore-items-nest-large-v-padding: var(--spacing-m-base);
863
+ --anchore-items-nest-large-gap: var(--spacing-m-base);
864
+ --anchore-items-nest-base-h-padding: var(--spacing-m-base);
865
+ --anchore-items-nest-base-v-padding: var(--spacing-xs);
866
+ --anchore-items-nest-base-gap: var(--spacing-s);
867
+ --anchore-items-nest-small-h-padding: var(--spacing-s);
868
+ --anchore-items-nest-small-v-padding: var(--spacing-xxs);
869
+ --anchore-items-nest-small-gap: var(--spacing-xs);
870
+ --anchore-items-normal-large-h-padding: var(--spacing-xl);
871
+ --anchore-items-normal-large-v-padding: var(--spacing-l);
872
+ --anchore-items-normal-large-gap: var(--spacing-m-base);
873
+ --anchore-items-normal-base-h-padding: var(--spacing-m-base);
874
+ --anchore-items-normal-base-v-padding: var(--spacing-s);
875
+ --anchore-items-normal-base-gap: var(--spacing-s);
876
+ --anchore-items-normal-small-h-padding: var(--spacing-s);
877
+ --anchore-items-normal-small-v-padding: var(--spacing-xs);
878
+ --anchore-items-normal-small-gap: var(--spacing-xs);
879
+
880
+ /* ------ avatar variables ------ */
881
+ --avatar-base-avatar-radius: var(--radius-l);
882
+ --avatar-base-avatar-size: var(--spacing-12xl);
883
+ --avatar-small-avatar-radius: var(--radius-m-base);
884
+ --avatar-small-avatar-size: var(--spacing-8xl);
885
+ --avatar-xsmall-avatar-radius: var(--radius-s);
886
+ --avatar-xsmall-avatar-size: var(--spacing-6xl);
887
+ --avatar-xxsmall-avatar-radius: var(--radius-xs);
888
+ --avatar-xxsmall-avatar-size: var(--spacing-5xl);
889
+ --avatar-large-avatar-radius: var(--radius-xl);
890
+ --avatar-large-avatar-size: var(--spacing-16xl);
891
+ --avatar-xlarge-avatar-radius: var(--radius-2xl);
892
+ --avatar-xlarge-avatar-size: var(--spacing-24xl);
893
+ --avatar-xxlarge-avatar-radius: var(--radius-3xl);
894
+ --avatar-xxlarge-avatar-size: var(--spacing-40xl);
895
+
896
+ /* ------ badge variables ------ */
897
+ --badge-base-basic-radius: var(--radius-s);
898
+ --badge-base-basic-left-padding: var(--spacing-m-base);
899
+ --badge-base-basic-right-padding: var(--spacing-m-base);
900
+ --badge-base-basic-gap: 0px;
901
+ --badge-base-basic-v-padding: var(--spacing-px);
902
+ --badge-base-basic-icon-size: 0px;
903
+ --badge-base-left-icon-radius: var(--radius-s);
904
+ --badge-base-left-icon-gap: var(--spacing-xxs);
905
+ --badge-base-left-icon-left-padding: var(--spacing-xs);
906
+ --badge-base-left-icon-right-padding: var(--spacing-m-base);
907
+ --badge-base-left-icon-v-padding: var(--spacing-px);
908
+ --badge-base-left-icon-icon-size: var(--spacing-4xl);
909
+ --badge-base-right-icon-radius: var(--radius-s);
910
+ --badge-base-right-icon-gap: var(--spacing-xxs);
911
+ --badge-base-right-icon-left-padding: var(--spacing-m-base);
912
+ --badge-base-right-icon-right-padding: var(--spacing-xs);
913
+ --badge-base-right-icon-v-padding: var(--spacing-px);
914
+ --badge-base-right-icon-icon-size: var(--spacing-4xl);
915
+ --badge-large-basic-radius: var(--radius-m-base);
916
+ --badge-large-basic-gap: 0px;
917
+ --badge-large-basic-left-padding: var(--spacing-l);
918
+ --badge-large-basic-right-padding: var(--spacing-l);
919
+ --badge-large-basic-v-padding: var(--spacing-xxs);
920
+ --badge-large-basic-icon-size: 0px;
921
+ --badge-large-left-icon-radius: var(--radius-m-base);
922
+ --badge-large-left-icon-gap: var(--spacing-xs);
923
+ --badge-large-left-icon-left-padding: var(--spacing-s);
924
+ --badge-large-left-icon-right-padding: var(--spacing-l);
925
+ --badge-large-left-icon-v-padding: var(--spacing-xxs);
926
+ --badge-large-left-icon-icon-size: var(--spacing-4xl);
927
+ --badge-large-right-icon-radius: var(--radius-m-base);
928
+ --badge-large-right-icon-gap: var(--spacing-xs);
929
+ --badge-large-right-icon-left-padding: var(--spacing-l);
930
+ --badge-large-right-icon-right-padding: var(--spacing-s);
931
+ --badge-large-right-icon-v-padding: var(--spacing-xxs);
932
+ --badge-large-right-icon-icon-size: var(--spacing-4xl);
933
+ --badge-small-basic-radius: var(--radius-xs);
934
+ --badge-small-basic-gap: 0px;
935
+ --badge-small-basic-left-padding: var(--spacing-s);
936
+ --badge-small-basic-right-padding: var(--spacing-s);
937
+ --badge-small-basic-v-padding: var(--spacing-none);
938
+ --badge-small-basic-icon-size: 0px;
939
+ --badge-small-left-icon-radius: var(--radius-xs);
940
+ --badge-small-left-icon-gap: var(--spacing-none);
941
+ --badge-small-left-icon-left-padding: var(--spacing-xs);
942
+ --badge-small-left-icon-right-padding: var(--spacing-s);
943
+ --badge-small-left-icon-v-padding: var(--spacing-none);
944
+ --badge-small-left-icon-icon-size: var(--spacing-2xl);
945
+ --badge-small-right-icon-radius: var(--radius-xs);
946
+ --badge-small-right-icon-gap: var(--spacing-none);
947
+ --badge-small-right-icon-left-padding: var(--spacing-s);
948
+ --badge-small-right-icon-right-padding: var(--spacing-xs);
949
+ --badge-small-right-icon-v-padding: var(--spacing-none);
950
+ --badge-small-right-icon-icon-size: var(--spacing-2xl);
951
+
952
+ /* ------ breadcrumb variables ------ */
953
+ --breadcrumb-symbol-size: var(--spacing-5xl);
954
+ --breadcrumb-container-gap: var(--spacing-xs);
955
+ --breadcrumb-basic-item-h-padding: var(--spacing-none);
956
+ --breadcrumb-basic-item-v-padding: var(--spacing-none);
957
+ --breadcrumb-basic-item-gap: var(--spacing-xxs);
958
+ --breadcrumb-basic-item-icon-size: var(--spacing-4xl);
959
+ --breadcrumb-backgrounded-item-h-padding: var(--spacing-s);
960
+ --breadcrumb-backgrounded-item-v-padding: var(--spacing-xxs);
961
+ --breadcrumb-backgrounded-item-gap: var(--spacing-xxs);
962
+ --breadcrumb-backgrounded-item-icon-size: var(--spacing-4xl);
963
+ --breadcrumb-backgrounded-item-left-padding: var(--spacing-s);
964
+ --breadcrumb-backgrounded-item-right-padding: var(--spacing-l);
965
+
966
+ /* ------ button variables ------ */
967
+ --button-sizes-base-radius: var(--radius-m-base);
968
+ --button-sizes-base-gap: var(--spacing-s);
969
+ --button-sizes-base-h-padding: var(--spacing-l);
970
+ --button-sizes-base-v-padding: var(--spacing-m-base);
971
+ --button-sizes-base-full-padding: var(--spacing-m-base);
972
+ --button-sizes-base-icon-size: var(--spacing-6xl);
973
+ --button-sizes-small-radius: var(--radius-m-base);
974
+ --button-sizes-small-gap: var(--spacing-xs);
975
+ --button-sizes-small-h-padding: var(--spacing-m-base);
976
+ --button-sizes-small-v-padding: var(--spacing-s);
977
+ --button-sizes-small-full-padding: var(--spacing-s);
978
+ --button-sizes-small-icon-size: var(--spacing-5xl);
979
+ --button-sizes-large-radius: var(--radius-m-base);
980
+ --button-sizes-large-gap: var(--spacing-m-base);
981
+ --button-sizes-large-h-padding: var(--spacing-2xl);
982
+ --button-sizes-large-v-padding: var(--spacing-xl);
983
+ --button-sizes-large-full-padding: var(--spacing-xl);
984
+ --button-sizes-large-icon-size: var(--spacing-6xl);
985
+ --link-button-sizes-base-radius: var(--radius-none);
986
+ --link-button-sizes-base-gap: var(--spacing-xs);
987
+ --link-button-sizes-base-h-padding: var(--spacing-none);
988
+ --link-button-sizes-base-v-padding: var(--spacing-none);
989
+ --link-button-sizes-base-full-padding: var(--spacing-s);
990
+ --link-button-sizes-base-icon-size: var(--spacing-5xl);
991
+ --link-button-sizes-large-radius: var(--radius-none);
992
+ --link-button-sizes-large-gap: var(--spacing-xs);
993
+ --link-button-sizes-large-h-padding: var(--spacing-none);
994
+ --link-button-sizes-large-v-padding: var(--spacing-none);
995
+ --link-button-sizes-large-full-padding: var(--spacing-s);
996
+ --link-button-sizes-large-icon-size: var(--spacing-6xl);
997
+ --link-button-sizes-small-radius: var(--radius-none);
998
+ --link-button-sizes-small-gap: var(--spacing-xs);
999
+ --link-button-sizes-small-h-padding: var(--spacing-none);
1000
+ --link-button-sizes-small-v-padding: var(--spacing-none);
1001
+ --link-button-sizes-small-full-padding: var(--spacing-s);
1002
+ --link-button-sizes-small-icon-size: var(--spacing-4xl);
1003
+ --fab-button-sizes-base-radius: var(--radius-s);
1004
+ --fab-button-sizes-base-gap: var(--spacing-xs);
1005
+ --fab-button-sizes-base-h-padding: var(--spacing-xl);
1006
+ --fab-button-sizes-base-v-padding: var(--spacing-xl);
1007
+ --fab-button-sizes-base-full-padding: var(--spacing-xl);
1008
+ --fab-button-sizes-base-icon-size: var(--spacing-6xl);
1009
+ --fab-button-sizes-small-radius: var(--radius-s);
1010
+ --fab-button-sizes-small-gap: var(--spacing-xs);
1011
+ --fab-button-sizes-small-h-padding: var(--spacing-l);
1012
+ --fab-button-sizes-small-v-padding: var(--spacing-l);
1013
+ --fab-button-sizes-small-full-padding: var(--spacing-xl);
1014
+ --fab-button-sizes-small-icon-size: var(--spacing-5xl);
1015
+ --fab-button-sizes-large-radius: var(--radius-s);
1016
+ --fab-button-sizes-large-gap: var(--spacing-xs);
1017
+ --fab-button-sizes-large-h-padding: var(--spacing-2xl);
1018
+ --fab-button-sizes-large-v-padding: var(--spacing-2xl);
1019
+ --fab-button-sizes-large-full-padding: var(--spacing-xl);
1020
+ --fab-button-sizes-large-icon-size: var(--spacing-7xl);
1021
+ --segmented-button-sizes-base-radius: var(--radius-none);
1022
+ --segmented-button-sizes-base-gap: var(--spacing-xs);
1023
+ --segmented-button-sizes-base-h-padding: var(--spacing-xl);
1024
+ --segmented-button-sizes-base-v-padding: var(--spacing-s);
1025
+ --segmented-button-sizes-base-full-padding: var(--spacing-s);
1026
+ --segmented-button-sizes-base-icon-size: var(--spacing-6xl);
1027
+ --segmented-button-sizes-small-radius: var(--radius-none);
1028
+ --segmented-button-sizes-small-gap: var(--spacing-xs);
1029
+ --segmented-button-sizes-small-h-padding: var(--spacing-m-base);
1030
+ --segmented-button-sizes-small-v-padding: var(--spacing-xs);
1031
+ --segmented-button-sizes-small-full-padding: var(--spacing-xs);
1032
+ --segmented-button-sizes-small-icon-size: var(--spacing-6xl);
1033
+ --segmented-button-sizes-large-radius: var(--radius-none);
1034
+ --segmented-button-sizes-large-gap: var(--spacing-xs);
1035
+ --segmented-button-sizes-large-h-padding: var(--spacing-4xl);
1036
+ --segmented-button-sizes-large-v-padding: var(--spacing-m-base);
1037
+ --segmented-button-sizes-large-full-padding: var(--spacing-m-base);
1038
+ --segmented-button-sizes-large-icon-size: var(--spacing-6xl);
1039
+
1040
+ /* ------ calendar variables ------ */
1041
+ --calendar-header-h-padding: var(--spacing-4xl);
1042
+ --calendar-header-v-padding: var(--spacing-4xl);
1043
+ --calendar-header-selector-gap: var(--spacing-xl);
1044
+ --calendar-header-actions-gap: var(--spacing-xl);
1045
+ --calendar-activity-h-padding: var(--spacing-xxs);
1046
+ --calendar-activity-v-padding: var(--spacing-xxs);
1047
+ --calendar-activity-gap: var(--spacing-xs);
1048
+ --calendar-month-cell-h-padding: var(--spacing-m-base);
1049
+ --calendar-month-cell-v-padding: var(--spacing-m-base);
1050
+ --calendar-week-cell-h-padding: var(--spacing-m-base);
1051
+ --calendar-week-cell-v-padding: var(--spacing-m-base);
1052
+ --calendar-week-cell-gap: var(--spacing-xs);
1053
+
1054
+ /* ------ card variables ------ */
1055
+ --card-header-base-h-padding: var(--spacing-4xl);
1056
+ --card-header-base-v-padding: var(--spacing-xl);
1057
+ --card-header-base-more-icon-size: var(--spacing-10xl);
1058
+ --card-header-base-gap: var(--spacing-m-base);
1059
+ --card-header-small-h-padding: var(--spacing-4xl);
1060
+ --card-header-small-v-padding: var(--spacing-l);
1061
+ --card-header-small-more-icon-size: var(--spacing-10xl);
1062
+ --card-header-small-gap: var(--spacing-s);
1063
+ --card-body-relaxed-h-padding: var(--spacing-4xl);
1064
+ --card-body-relaxed-v-padding: var(--spacing-4xl);
1065
+ --card-body-relaxed-gap: var(--spacing-m-base);
1066
+ --card-body-base-h-padding: var(--spacing-4xl);
1067
+ --card-body-base-v-padding: var(--spacing-xl);
1068
+ --card-body-base-gap: var(--spacing-s);
1069
+ --card-body-tight-h-padding: var(--spacing-4xl);
1070
+ --card-body-tight-v-padding: var(--spacing-m-base);
1071
+ --card-body-tight-gap: var(--spacing-xs);
1072
+ --card-image-full-screen-h-padding: var(--spacing-none);
1073
+ --card-image-full-screen-v-padding: var(--spacing-none);
1074
+ --card-image-windowed-h-padding: var(--spacing-4xl);
1075
+ --card-image-windowed-v-padding: var(--spacing-4xl);
1076
+ --card-footer-base-h-padding: var(--spacing-4xl);
1077
+ --card-footer-base-v-padding: var(--spacing-4xl);
1078
+ --card-footer-base-gap: var(--spacing-m-base);
1079
+
1080
+ /* ------ chips variables ------ */
1081
+ --chips-base-radius: var(--radius-s);
1082
+ --chips-base-h-padding: var(--spacing-s);
1083
+ --chips-base-v-padding: var(--spacing-xxs);
1084
+ --chips-base-gap: var(--spacing-xs);
1085
+ --chips-base-icon-size: var(--spacing-4xl);
1086
+ --chips-small-radius: var(--radius-s);
1087
+ --chips-small-h-padding: var(--spacing-xs);
1088
+ --chips-small-v-padding: var(--spacing-px);
1089
+ --chips-small-gap: var(--spacing-xxs);
1090
+ --chips-small-icon-size: var(--spacing-2xl);
1091
+ --chips-large-radius: var(--radius-s);
1092
+ --chips-large-h-padding: var(--spacing-m-base);
1093
+ --chips-large-v-padding: var(--spacing-xs);
1094
+ --chips-large-gap: var(--spacing-s);
1095
+ --chips-large-icon-size: var(--spacing-5xl);
1096
+
1097
+ /* ------ comment variables ------ */
1098
+ --comment-header-base-h-padding: var(--spacing-4xl);
1099
+ --comment-header-base-v-padding: var(--spacing-xl);
1100
+ --comment-header-base-gap: var(--spacing-xs);
1101
+ --comment-body-base-h-padding: var(--spacing-4xl);
1102
+ --comment-body-base-top-padding: var(--spacing-xs);
1103
+ --comment-body-base-gap: var(--spacing-s);
1104
+ --comment-body-base-bottom-padding: var(--spacing-m-base);
1105
+ --comment-footer-base-h-padding: var(--spacing-4xl);
1106
+ --comment-footer-base-v-padding: var(--spacing-xs);
1107
+ --comment-footer-base-gap: var(--spacing-m-base);
1108
+ --comment-text-base-h-padding: var(--spacing-4xl);
1109
+ --comment-text-base-v-padding: var(--spacing-xl);
1110
+ --comment-text-base-gap: var(--spacing-m-base);
1111
+ --comment-text-base-content-gap: var(--spacing-m-base);
1112
+
1113
+ /* ------ countdown variables ------ */
1114
+ --countdown-seconds: 59px;
1115
+ --countdown-minutes: 59px;
1116
+ --countdown-hours: 13px;
1117
+ --countdown-zero: 0px;
1118
+ --countdown-secondsretournd: 59px;
1119
+ --countdown-minus: 1px;
1120
+
1121
+ /* ------ datepicker variables ------ */
1122
+ --datepicker-items-base-size: var(--spacing-10xl);
1123
+ --datepicker-items-base-radius: var(--radius-m-base);
1124
+ --datepicker-items-small-radius: var(--radius-m-base);
1125
+ --datepicker-items-small-size: var(--spacing-8xl);
1126
+ --datepicker-footer-base-h-padding: var(--spacing-4xl);
1127
+ --datepicker-footer-base-v-padding: var(--spacing-4xl);
1128
+ --datepicker-footer-base-gap: var(--spacing-m-base);
1129
+ --datepicker-header-base-h-padding: var(--spacing-4xl);
1130
+ --datepicker-header-base-top-padding: var(--spacing-m-base);
1131
+ --datepicker-header-base-date-text-h-padding: var(--spacing-m-base);
1132
+ --datepicker-header-base-bottom-padding: var(--spacing-xs);
1133
+ --datepicker-header-base-navigation-gap: var(--spacing-none);
1134
+ --datepicker-header-base-date-text-gap: var(--spacing-xs);
1135
+ --datepicker-body-base-day-h-padding: var(--spacing-4xl);
1136
+ --datepicker-body-base-day-v-padding: var(--spacing-xl);
1137
+ --datepicker-body-base-day-row-gap: var(--spacing-xs);
1138
+ --datepicker-body-base-day-row-group-gap: var(--spacing-xs);
1139
+ --datepicker-body-base-month-year-h-padding: var(--spacing-4xl);
1140
+ --datepicker-body-base-month-year-v-padding: var(--spacing-7xl);
1141
+ --datepicker-body-base-month-year-row-gap: var(--spacing-xs);
1142
+
1143
+ /* ------ description variables ------ */
1144
+ --description-item-inline-h-padding: var(--spacing-xs);
1145
+ --description-item-inline-v-padding: var(--spacing-s);
1146
+ --description-item-inline-gap: var(--spacing-s);
1147
+ --description-item-block-h-padding: var(--spacing-xs);
1148
+ --description-item-block-v-padding: var(--spacing-xs);
1149
+ --description-item-block-gap: var(--spacing-xxs);
1150
+
1151
+ /* ------ dialog variables ------ */
1152
+ --dialog-header-base-h-padding: var(--spacing-4xl);
1153
+ --dialog-header-base-v-padding: var(--spacing-xl);
1154
+ --dialog-header-base-sign-size: var(--spacing-12xl);
1155
+ --dialog-header-base-close-icon-size: var(--spacing-6xl);
1156
+ --dialog-header-base-gap: var(--spacing-m-base);
1157
+ --dialog-header-small-h-padding: var(--spacing-4xl);
1158
+ --dialog-header-small-v-padding: var(--spacing-l);
1159
+ --dialog-header-small-sign-size: var(--spacing-11xl);
1160
+ --dialog-header-small-close-icon-size: var(--spacing-6xl);
1161
+ --dialog-header-small-gap: var(--spacing-s);
1162
+ --dialog-footer-base-h-padding: var(--spacing-4xl);
1163
+ --dialog-footer-base-v-padding: var(--spacing-4xl);
1164
+ --dialog-footer-base-gap: var(--spacing-m-base);
1165
+ --dialog-body-base-h-padding: var(--spacing-4xl);
1166
+ --dialog-body-base-v-padding: var(--spacing-4xl);
1167
+ --dialog-body-base-gap: var(--spacing-m-base);
1168
+ --dialog-extra-base-h-padding: var(--spacing-4xl);
1169
+ --dialog-extra-base-v-padding: var(--spacing-xl);
1170
+ --dialog-extra-base-gap: var(--spacing-m-base);
1171
+
1172
+ /* ------ drawer variables ------ */
1173
+ --notification-body-h-padding: var(--spacing-4xl);
1174
+ --notification-body-v-padding: var(--spacing-xl);
1175
+ --notification-body-gap: var(--spacing-m-base);
1176
+ --notification-body-content-gap: var(--spacing-m-base);
1177
+ --notification-body-text-gap: var(--spacing-xs);
1178
+ --notification-body-header-gap: var(--spacing-m-base);
1179
+ --notification-body-head-gap: var(--spacing-none);
1180
+ --notification-footer-h-padding: var(--spacing-4xl);
1181
+ --notification-footer-v-padding: var(--spacing-xl);
1182
+ --notification-footer-gap: var(--spacing-m-base);
1183
+ --notification-header-h-padding: var(--spacing-4xl);
1184
+ --notification-header-v-padding: var(--spacing-4xl);
1185
+ --notification-header-gap: var(--spacing-m-base);
1186
+ --notification-header-button-gap: var(--spacing-xs);
1187
+
1188
+ /* ------ dropdown variables ------ */
1189
+ --dropdown-items-basic-base-h-padding: var(--spacing-m-base);
1190
+ --dropdown-items-basic-base-v-padding: var(--spacing-m-base);
1191
+ --dropdown-items-basic-base-gap: var(--spacing-xs);
1192
+ --dropdown-items-basic-base-icon-size: var(--spacing-5xl);
1193
+ --dropdown-items-basic-base-radius: var(--radius-m-base);
1194
+ --dropdown-items-basic-large-radius: var(--radius-m-base);
1195
+ --dropdown-items-basic-large-h-padding: var(--spacing-m-base);
1196
+ --dropdown-items-basic-large-v-padding: var(--spacing-m-base);
1197
+ --dropdown-items-basic-large-gap: var(--spacing-xs);
1198
+ --dropdown-items-basic-large-icon-size: var(--spacing-5xl);
1199
+ --dropdown-items-basic-small-radius: var(--radius-m-base);
1200
+ --dropdown-items-basic-small-h-padding: var(--spacing-m-base);
1201
+ --dropdown-items-basic-small-v-padding: var(--spacing-s);
1202
+ --dropdown-items-basic-small-gap: var(--spacing-xs);
1203
+ --dropdown-items-basic-small-icon-size: var(--spacing-5xl);
1204
+ --dropdown-items-avatar-base-radius: var(--radius-m-base);
1205
+ --dropdown-items-avatar-base-h-padding: var(--spacing-m-base);
1206
+ --dropdown-items-avatar-base-v-padding: var(--spacing-m-base);
1207
+ --dropdown-items-avatar-base-gap: var(--spacing-xs);
1208
+ --dropdown-items-avatar-base-icon-size: var(--spacing-5xl);
1209
+ --dropdown-items-avatar-large-radius: var(--radius-m-base);
1210
+ --dropdown-items-avatar-large-h-padding: var(--spacing-m-base);
1211
+ --dropdown-items-avatar-large-v-padding: var(--spacing-m-base);
1212
+ --dropdown-items-avatar-large-gap: var(--spacing-xs);
1213
+ --dropdown-items-avatar-large-icon-size: var(--spacing-5xl);
1214
+ --dropdown-items-avatar-small-radius: var(--radius-m-base);
1215
+ --dropdown-items-avatar-small-h-padding: var(--spacing-m-base);
1216
+ --dropdown-items-avatar-small-v-padding: var(--spacing-s);
1217
+ --dropdown-items-avatar-small-gap: var(--spacing-xs);
1218
+ --dropdown-items-avatar-small-icon-size: var(--spacing-5xl);
1219
+ --dropdown-items-radio-checkbox-base-radius: var(--radius-m-base);
1220
+ --dropdown-items-radio-checkbox-base-h-padding: var(--spacing-m-base);
1221
+ --dropdown-items-radio-checkbox-base-v-padding: var(--spacing-s);
1222
+ --dropdown-items-radio-checkbox-base-container-gap: var(--spacing-m-base);
1223
+ --dropdown-items-radio-checkbox-large-radius: var(--radius-m-base);
1224
+ --dropdown-items-radio-checkbox-large-h-padding: var(--spacing-m-base);
1225
+ --dropdown-items-radio-checkbox-large-v-padding: var(--spacing-m-base);
1226
+ --dropdown-items-radio-checkbox-large-container-gap: var(--spacing-l);
1227
+ --dropdown-items-radio-checkbox-small-radius: var(--radius-m-base);
1228
+ --dropdown-items-radio-checkbox-small-h-padding: var(--spacing-m-base);
1229
+ --dropdown-items-radio-checkbox-small-v-padding: var(--spacing-xs);
1230
+ --dropdown-items-radio-checkbox-small-container-gap: var(--spacing-s);
1231
+ --dropdown-cascade2: false;
1232
+ --dropdown-cascade1: false;
1233
+
1234
+ /* ------ editor variables ------ */
1235
+ --editor-header-compact-h-padding: var(--spacing-4xl);
1236
+ --editor-header-compact-v-padding: var(--spacing-xl);
1237
+ --editor-header-compact-operation-gap: var(--spacing-m-base);
1238
+ --editor-header-compact-gap: var(--spacing-xl);
1239
+ --editor-header-normal-h-padding: var(--spacing-4xl);
1240
+ --editor-header-normal-v-padding: var(--spacing-xl);
1241
+ --editor-header-normal-operation-gap: var(--spacing-m-base);
1242
+ --editor-header-normal-gap: var(--spacing-xl);
1243
+ --editor-body-h-padding: var(--spacing-4xl);
1244
+ --editor-body-v-padding: var(--spacing-4xl);
1245
+ --editor-body-gap: var(--spacing-xs);
1246
+ --editor-body-content-gap: var(--spacing-m-base);
1247
+ --editor-gap: var(--spacing-m-base);
1248
+
1249
+ /* ------ empty-state variables ------ */
1250
+ --empty-state-empty-base-h-padding: var(--spacing-4xl);
1251
+ --empty-state-empty-base-v-padding: var(--spacing-4xl);
1252
+ --empty-state-empty-base-gap: var(--spacing-xl);
1253
+ --empty-state-empty-base-content-gap: var(--spacing-4xl);
1254
+ --empty-state-empty-base-button-group-gap: var(--spacing-m-base);
1255
+ --empty-state-empty-base-text-gap: var(--spacing-xs);
1256
+ --empty-state-empty-small-h-padding: var(--spacing-4xl);
1257
+ --empty-state-empty-small-v-padding: var(--spacing-4xl);
1258
+ --empty-state-empty-small-gap: var(--spacing-l);
1259
+ --empty-state-empty-small-content-gap: var(--spacing-xl);
1260
+ --empty-state-empty-small-text-gap: var(--spacing-xxs);
1261
+ --empty-state-empty-small-button-group-gap: var(--spacing-s);
1262
+
1263
+ /* ------ error-404 variables ------ */
1264
+ --error-404-error-base-h-padding: var(--spacing-4xl);
1265
+ --error-404-error-base-v-padding: var(--spacing-4xl);
1266
+ --error-404-error-base-gap: var(--spacing-8xl);
1267
+ --error-404-error-base-content-gap: var(--spacing-xl);
1268
+ --error-404-error-base-content-div-gap: var(--spacing-4xl);
1269
+ --error-404-error-base-text-gap: var(--spacing-xs);
1270
+ --error-404-error-small-h-padding: var(--spacing-4xl);
1271
+ --error-404-error-small-v-padding: var(--spacing-4xl);
1272
+ --error-404-error-small-gap: var(--spacing-8xl);
1273
+ --error-404-error-small-content-gap: var(--spacing-xl);
1274
+ --error-404-error-small-content-div-gap: var(--spacing-4xl);
1275
+ --error-404-error-small-text-gap: var(--spacing-xs);
1276
+
1277
+ /* ------ header variables ------ */
1278
+ --header-links-basic-base-icon-size: var(--spacing-5xl);
1279
+ --header-links-basic-base-active-gap: var(--spacing-5xl);
1280
+ --header-links-basic-base-h-padding: var(--spacing-xl);
1281
+ --header-links-basic-base-v-padding: var(--spacing-l);
1282
+ --header-links-basic-base-content-gap: var(--spacing-s);
1283
+ --header-links-basic-large-icon-size: var(--spacing-5xl);
1284
+ --header-links-basic-large-active-gap: var(--spacing-6xl);
1285
+ --header-links-basic-large-content-gap: var(--spacing-s);
1286
+ --header-links-basic-large-h-padding: var(--spacing-4xl);
1287
+ --header-links-basic-large-v-padding: var(--spacing-2xl);
1288
+ --header-links-basic-small-icon-size: var(--spacing-5xl);
1289
+ --header-links-basic-small-active-gap: var(--spacing-4xl);
1290
+ --header-links-basic-small-content-gap: var(--spacing-s);
1291
+ --header-links-basic-small-h-padding: var(--spacing-m-base);
1292
+ --header-links-basic-small-v-padding: var(--spacing-s);
1293
+ --header-links-pill-small-radius: var(--radius-m-base);
1294
+ --header-links-pill-small-icon-size: var(--spacing-5xl);
1295
+ --header-links-pill-small-content-gap: var(--spacing-s);
1296
+ --header-links-pill-small-h-padding: var(--spacing-m-base);
1297
+ --header-links-pill-small-v-padding: var(--spacing-s);
1298
+ --header-links-pill-base-radius: var(--radius-m-base);
1299
+ --header-links-pill-base-icon-size: var(--spacing-5xl);
1300
+ --header-links-pill-base-content-gap: var(--spacing-s);
1301
+ --header-links-pill-base-h-padding: var(--spacing-xl);
1302
+ --header-links-pill-base-v-padding: var(--spacing-l);
1303
+ --header-links-pill-large-radius: var(--radius-m-base);
1304
+ --header-links-pill-large-icon-size: var(--spacing-5xl);
1305
+ --header-links-pill-large-content-gap: var(--spacing-s);
1306
+ --header-links-pill-large-h-padding: var(--spacing-4xl);
1307
+ --header-links-pill-large-v-padding: var(--spacing-2xl);
1308
+ --header-elements-xsmall-full-padding: var(--spacing-xs);
1309
+ --header-elements-small-full-padding: var(--spacing-s);
1310
+ --header-elements-base-full-padding: var(--spacing-m-base);
1311
+ --header-elements-large-full-padding: var(--spacing-l);
1312
+
1313
+ /* ------ helpertext variables ------ */
1314
+ --helpertext-base-gap: var(--spacing-xs);
1315
+
1316
+ /* ------ input variables ------ */
1317
+ --input-external-label-large-text-area-radius: var(--radius-m-base);
1318
+ --input-external-label-large-icon-size: var(--spacing-6xl);
1319
+ --input-external-label-large-container-gap: var(--spacing-xs);
1320
+ --input-external-label-large-text-field-gap: var(--spacing-xs);
1321
+ --input-external-label-large-label-h-padding: var(--spacing-m-base);
1322
+ --input-external-label-large-label-v-padding: var(--spacing-none);
1323
+ --input-external-label-large-input-h-padding: var(--spacing-xl);
1324
+ --input-external-label-large-input-v-padding: var(--spacing-xl);
1325
+ --input-external-label-large-input-gap: var(--spacing-xs);
1326
+ --input-external-label-base-text-area-radius: var(--radius-m-base);
1327
+ --input-external-label-base-icon-size: var(--spacing-5xl);
1328
+ --input-external-label-base-div-gap: var(--spacing-xs);
1329
+ --input-external-label-base-text-field-gap: var(--spacing-xs);
1330
+ --input-external-label-base-label-h-padding: var(--spacing-m-base);
1331
+ --input-external-label-base-label-v-padding: var(--spacing-none);
1332
+ --input-external-label-base-input-h-padding: var(--spacing-l);
1333
+ --input-external-label-base-input-v-padding: var(--spacing-l);
1334
+ --input-external-label-base-input-gap: var(--spacing-xs);
1335
+ --input-external-label-small-text-area-radius: var(--radius-m-base);
1336
+ --input-external-label-small-icon-size: var(--spacing-5xl);
1337
+ --input-external-label-small-container-gap: var(--spacing-xs);
1338
+ --input-external-label-small-text-field-gap: var(--spacing-xxs);
1339
+ --input-external-label-small-label-h-padding: var(--spacing-s);
1340
+ --input-external-label-small-label-v-padding: var(--spacing-none);
1341
+ --input-external-label-small-input-h-padding: var(--spacing-m-base);
1342
+ --input-external-label-small-input-v-padding: var(--spacing-s);
1343
+ --input-external-label-small-input-gap: var(--spacing-xs);
1344
+
1345
+ /* ------ list variables ------ */
1346
+ --list-items-basic-h-padding: var(--spacing-xs);
1347
+ --list-items-basic-v-padding: var(--spacing-xs);
1348
+ --list-items-basic-gap: var(--spacing-xs);
1349
+ --list-items-basic-content-gap: var(--spacing-none);
1350
+ --list-items-divided-h-padding: var(--spacing-none);
1351
+ --list-items-divided-top-padding: var(--spacing-m-base);
1352
+ --list-items-divided-gap: var(--spacing-xs);
1353
+ --list-items-divided-content-gap: var(--spacing-none);
1354
+ --list-segment-gap: var(--spacing-m-base);
1355
+ --list-cascade-gap: var(--spacing-xs);
1356
+ --list-cascade-left-padding: var(--spacing-6xl);
1357
+
1358
+ /* ------ login variables ------ */
1359
+ --login-base-h-padding: var(--spacing-4xl);
1360
+ --login-base-v-padding: var(--spacing-4xl);
1361
+ --login-base-gap: var(--spacing-4xl);
1362
+
1363
+ /* ------ pagination variables ------ */
1364
+ --pagination-base-tag-gap: var(--spacing-none);
1365
+ --pagination-base-right-gap: var(--spacing-xl);
1366
+ --pagination-base-container-gap: var(--spacing-xl);
1367
+ --pagination-base-arrow-gap: var(--spacing-xs);
1368
+ --pagination-base-gap: var(--spacing-s);
1369
+ --pagination-base-container-v-padding: var(--spacing-xxs);
1370
+ --pagination-cell-large-cell-size: var(--spacing-10xl);
1371
+ --pagination-cell-large-cell-radius: var(--radius-m-base);
1372
+ --pagination-cell-base-cell-size: var(--spacing-8xl);
1373
+ --pagination-cell-base-cell-radius: var(--radius-m-base);
1374
+ --pagination-cell-small-cell-size: var(--spacing-6xl);
1375
+ --pagination-cell-small-cell-radius: var(--radius-m-base);
1376
+
1377
+ /* ------ persona variables ------ */
1378
+ --persona-base-h-padding: var(--spacing-m-base);
1379
+ --persona-base-v-padding: var(--spacing-m-base);
1380
+ --persona-base-gap: var(--spacing-xs);
1381
+ --persona-base-content-gap: var(--spacing-px);
1382
+ --persona-base-text-gap: var(--spacing-none);
1383
+ --persona-small-h-padding: var(--spacing-xs);
1384
+ --persona-small-v-padding: var(--spacing-xs);
1385
+ --persona-small-gap: var(--spacing-xs);
1386
+ --persona-small-content-gap: var(--spacing-none);
1387
+ --persona-small-text-gap: var(--spacing-none);
1388
+ --persona-card-base-h-padding: var(--spacing-4xl);
1389
+ --persona-card-base-v-padding: var(--spacing-4xl);
1390
+ --persona-card-base-gap: var(--spacing-xl);
1391
+
1392
+ /* ------ popconfirm variables ------ */
1393
+ --popconfirm-base-h-padding: var(--spacing-xl);
1394
+ --popconfirm-base-v-padding: var(--spacing-xl);
1395
+ --popconfirm-base-gap: var(--spacing-m-base);
1396
+ --popconfirm-base-content-gap: var(--spacing-m-base);
1397
+ --popconfirm-base-text-gap: var(--spacing-xxs);
1398
+ --popconfirm-base-button-group-gap: var(--spacing-m-base);
1399
+
1400
+ /* ------ popover variables ------ */
1401
+ --popover-head-h-padding: var(--spacing-xl);
1402
+ --popover-head-v-padding: var(--spacing-xl);
1403
+ --popover-head-gap: var(--spacing-m-base);
1404
+ --popover-head-content-gap: var(--spacing-xs);
1405
+ --popover-body-h-padding: var(--spacing-xl);
1406
+ --popover-body-top-padding: var(--spacing-xs);
1407
+ --popover-body-bottom-padding: var(--spacing-xl);
1408
+ --popover-body-gap: var(--spacing-m-base);
1409
+
1410
+ /* ------ progress-bar variables ------ */
1411
+ --progress-bar-linear-sign-gap: var(--spacing-xxs);
1412
+ --progress-bar-linear-bar-gap: var(--spacing-xxs);
1413
+ --progress-bar-linear-bar-h-padding: var(--spacing-none);
1414
+ --progress-bar-linear-bar-v-padding: var(--spacing-none);
1415
+ --progress-bar-linear-bar-content-gap: var(--spacing-none);
1416
+ --progress-bar-linear-bar-progress-h-padding: var(--spacing-none);
1417
+ --progress-bar-linear-bar-progress-v-padding: var(--spacing-s);
1418
+ --progress-bar-linear-card-basic-h-padding: var(--spacing-none);
1419
+ --progress-bar-linear-card-basic-v-padding: var(--spacing-none);
1420
+ --progress-bar-linear-card-basic-gap: var(--spacing-m-base);
1421
+ --progress-bar-linear-card-card-h-padding: var(--spacing-xl);
1422
+ --progress-bar-linear-card-card-v-padding: var(--spacing-xl);
1423
+ --progress-bar-linear-card-card-gap: var(--spacing-m-base);
1424
+ --progress-bar-linear-gap: var(--spacing-xxs);
1425
+ --progress-bar-circular-card-basic-h-padding: var(--spacing-none);
1426
+ --progress-bar-circular-card-basic-v-padding: var(--spacing-none);
1427
+ --progress-bar-circular-card-basic-gap: var(--spacing-m-base);
1428
+ --progress-bar-circular-card-card-h-padding: var(--spacing-xl);
1429
+ --progress-bar-circular-card-card-v-padding: var(--spacing-xl);
1430
+ --progress-bar-circular-card-card-gap: var(--spacing-m-base);
1431
+ --progress-bar-circular-gap: var(--spacing-xxs);
1432
+ --progress-bar-circular-sign-percentage-base-gap: var(--spacing-none);
1433
+ --progress-bar-circular-sign-percentage-base-h-padding: var(--spacing-none);
1434
+ --progress-bar-circular-sign-percentage-base-v-padding: var(--spacing-xxs);
1435
+ --progress-bar-circular-sign-percentage-small-h-padding: var(--spacing-none);
1436
+ --progress-bar-circular-sign-percentage-small-v-padding: var(--spacing-xs);
1437
+ --progress-bar-circular-sign-percentage-small-gap: var(--spacing-none);
1438
+ --progress-bar-circular-sign-percentage-large-h-padding: var(--spacing-none);
1439
+ --progress-bar-circular-sign-percentage-large-v-padding: var(--spacing-s);
1440
+ --progress-bar-circular-sign-percentage-large-gap: var(--spacing-none);
1441
+ --progress-bar-circular-sign-status-large-h-padding: var(--spacing-none);
1442
+ --progress-bar-circular-sign-status-large-v-padding: var(--spacing-xs);
1443
+ --progress-bar-circular-sign-status-large-gap: var(--spacing-xxs);
1444
+ --progress-bar-circular-sign-status-base-h-padding: var(--spacing-none);
1445
+ --progress-bar-circular-sign-status-base-v-padding: var(--spacing-xxs);
1446
+ --progress-bar-circular-sign-status-base-gap: var(--spacing-xxs);
1447
+ --progress-bar-circular-sign-status-small-h-padding: var(--spacing-none);
1448
+ --progress-bar-circular-sign-status-small-v-padding: var(--spacing-none);
1449
+ --progress-bar-circular-sign-status-small-gap: var(--spacing-none);
1450
+
1451
+ /* ------ quote variables ------ */
1452
+ --quote-body-h-padding: var(--spacing-4xl);
1453
+ --quote-body-top-padding: var(--spacing-4xl);
1454
+ --quote-body-gap: var(--spacing-m-base);
1455
+ --quote-body-bottom-padding: var(--spacing-m-base);
1456
+ --quote-body-content-gap: var(--spacing-m-base);
1457
+ --quote-footer-h-padding: var(--spacing-4xl);
1458
+ --quote-footer-v-padding: var(--spacing-xl);
1459
+
1460
+ /* ------ radio-checkbox variables ------ */
1461
+ --basic-switcher-container-radius: var(--radius-none);
1462
+ --basic-switcher-container-gap: var(--spacing-s);
1463
+ --basic-switcher-container-h-padding: var(--spacing-none);
1464
+ --basic-switcher-container-v-padding: var(--spacing-none);
1465
+ --basic-switcher-button-size: var(--spacing-6xl);
1466
+ --basic-switcher-content-gap: var(--spacing-m-base);
1467
+ --basic-switcher-text-gap: var(--spacing-none);
1468
+ --card-switcher-container-radius: var(--radius-m-base);
1469
+ --card-switcher-container-h-padding: var(--spacing-xl);
1470
+ --card-switcher-container-v-padding: var(--spacing-xl);
1471
+ --card-switcher-container-gap: var(--spacing-m-base);
1472
+ --card-switcher-content-gap: var(--spacing-m-base);
1473
+ --card-switcher-text-gap: var(--spacing-none);
1474
+ --card-switcher-button-size: var(--spacing-6xl);
1475
+ --avatar-switcher-container-radius: var(--radius-m-base);
1476
+ --avatar-switcher-container-h-padding: var(--spacing-xl);
1477
+ --avatar-switcher-container-v-padding: var(--spacing-xl);
1478
+ --avatar-switcher-container-gap: var(--spacing-xl);
1479
+ --avatar-switcher-v-content-gap: var(--spacing-m-base);
1480
+ --avatar-switcher-text-gap: var(--spacing-none);
1481
+ --avatar-switcher-button-size: var(--spacing-6xl);
1482
+ --avatar-switcher-avatar-size: var(--spacing-12xl);
1483
+ --avatar-switcher-h-content-gap: var(--spacing-m-base);
1484
+
1485
+ /* ------ rating variables ------ */
1486
+ --rating-basic-rate-gap: var(--spacing-none);
1487
+ --rating-basic-rate-content-gap: var(--spacing-xs);
1488
+ --rating-basic-rate-content-h-padding: var(--spacing-xxs);
1489
+ --rating-basic-rate-content-v-padding: var(--spacing-xxs);
1490
+ --rating-emoji-rate-gap: var(--spacing-m-base);
1491
+ --rating-bar-rate-compact-gap: var(--spacing-none);
1492
+ --rating-bar-rate-default-gap: var(--spacing-xs);
1493
+ --rating-number-rate-compact-gap: var(--spacing-none);
1494
+ --rating-number-rate-cells-h: var(--spacing-8xl);
1495
+ --rating-number-rate-cells-w: var(--spacing-8xl);
1496
+ --rating-number-rate-default-gap: var(--spacing-xs);
1497
+
1498
+ /* ------ result variables ------ */
1499
+ --result-base-button-group-gap: var(--spacing-m-base);
1500
+ --result-base-gap: var(--spacing-xl);
1501
+ --result-base-text-gap: var(--spacing-xs);
1502
+ --result-base-content-gap: var(--spacing-4xl);
1503
+ --result-base-v-padding: var(--spacing-4xl);
1504
+ --result-base-h-padding: var(--spacing-4xl);
1505
+ --result-small-h-padding: var(--spacing-4xl);
1506
+ --result-small-button-group-gap: var(--spacing-s);
1507
+ --result-small-v-padding: var(--spacing-4xl);
1508
+ --result-small-gap: var(--spacing-l);
1509
+ --result-small-text-gap: var(--spacing-xxs);
1510
+ --result-small-content-gap: var(--spacing-xl);
1511
+
1512
+ /* ------ settings variables ------ */
1513
+ --settings-header-h-padding: var(--spacing-4xl);
1514
+ --settings-header-v-padding: var(--spacing-4xl);
1515
+ --settings-header-gap: var(--spacing-m-base);
1516
+ --settings-header-button-gap: var(--spacing-xs);
1517
+ --settings-footer-h-padding: var(--spacing-4xl);
1518
+ --settings-footer-v-padding: var(--spacing-xl);
1519
+ --settings-footer-gap: var(--spacing-m-base);
1520
+ --settings-body-basic-gap: var(--spacing-4xl);
1521
+ --settings-body-basic-explanation-gap: var(--spacing-s);
1522
+ --settings-body-compact-gap: var(--spacing-m-base);
1523
+ --settings-extra-items-gap: var(--spacing-m-base);
1524
+ --settings-extra-items-h-padding: var(--spacing-xl);
1525
+ --settings-extra-items-v-padding: var(--spacing-xl);
1526
+ --settings-extra-items-radius: var(--radius-m-base);
1527
+
1528
+ /* ------ sidebar variables ------ */
1529
+ --sidebar-elements-base-radius: var(--radius-m-base);
1530
+ --sidebar-elements-base-h-padding: var(--spacing-l);
1531
+ --sidebar-elements-base-v-padding: var(--spacing-m-base);
1532
+ --sidebar-elements-base-full-padding: var(--spacing-m-base);
1533
+ --sidebar-elements-base-gap: var(--spacing-s);
1534
+ --sidebar-elements-small-radius: var(--radius-m-base);
1535
+ --sidebar-elements-small-h-padding: var(--spacing-m-base);
1536
+ --sidebar-elements-small-v-padding: var(--spacing-s);
1537
+ --sidebar-elements-small-gap: var(--spacing-xs);
1538
+ --sidebar-elements-small-full-padding: var(--spacing-s);
1539
+ --sidebar-elements-large-radius: var(--radius-m-base);
1540
+ --sidebar-elements-large-h-padding: var(--spacing-xl);
1541
+ --sidebar-elements-large-v-padding: var(--spacing-l);
1542
+ --sidebar-elements-large-gap: var(--spacing-m-base);
1543
+ --sidebar-elements-large-full-padding: var(--spacing-l);
1544
+
1545
+ /* ------ sign variables ------ */
1546
+ --sign-base-radius: var(--radius-m-base);
1547
+ --sign-base-icon-size: var(--spacing-5xl);
1548
+ --sign-base-h-padding: var(--spacing-s);
1549
+ --sign-base-v-padding: var(--spacing-s);
1550
+ --sign-small-radius: var(--radius-s);
1551
+ --sign-small-icon-size: var(--spacing-4xl);
1552
+ --sign-small-h-padding: var(--spacing-xs);
1553
+ --sign-small-v-padding: var(--spacing-xs);
1554
+ --sign-xsmall-radius: var(--radius-s);
1555
+ --sign-xsmall-icon-size: var(--spacing-xl);
1556
+ --sign-xsmall-h-padding: var(--spacing-xs);
1557
+ --sign-xsmall-v-padding: var(--spacing-xs);
1558
+ --sign-xxsmall-radius: var(--radius-xs);
1559
+ --sign-xxsmall-icon-size: var(--spacing-l);
1560
+ --sign-xxsmall-h-padding: var(--spacing-xxs);
1561
+ --sign-xxsmall-v-padding: var(--spacing-xxs);
1562
+ --sign-large-radius: var(--radius-l);
1563
+ --sign-large-icon-size: var(--spacing-6xl);
1564
+ --sign-large-h-padding: var(--spacing-m-base);
1565
+ --sign-large-v-padding: var(--spacing-m-base);
1566
+ --sign-xlarge-radius: var(--radius-l);
1567
+ --sign-xlarge-icon-size: var(--spacing-7xl);
1568
+ --sign-xlarge-h-padding: var(--spacing-l);
1569
+ --sign-xlarge-v-padding: var(--spacing-l);
1570
+ --sign-2xlarge-radius: var(--radius-xl);
1571
+ --sign-2xlarge-icon-size: var(--spacing-8xl);
1572
+ --sign-2xlarge-h-padding: var(--spacing-4xl);
1573
+ --sign-2xlarge-v-padding: var(--spacing-4xl);
1574
+
1575
+ /* ------ slider variables ------ */
1576
+ --slider-gap: var(--spacing-xxs);
1577
+ --slider-content-gap: var(--spacing-none);
1578
+ --slider-h-padding: var(--spacing-none);
1579
+ --slider-v-padding: var(--spacing-none);
1580
+ --slider-slider-h-padding: var(--spacing-m-base);
1581
+ --slider-slider-v-padding: var(--spacing-s);
1582
+
1583
+ /* ------ spinner variables ------ */
1584
+ --spinner-size-base: var(--spacing-8xl);
1585
+ --spinner-size-small: var(--spacing-6xl);
1586
+ --spinner-size-large: var(--spacing-10xl);
1587
+ --spinner-size-xlarge: var(--spacing-12xl);
1588
+ --spinner-default-gap: var(--spacing-m-base);
1589
+ --spinner-centered-gap: var(--spacing-xs);
1590
+
1591
+ /* ------ stepper variables ------ */
1592
+ --stepper-items-content-gap: var(--spacing-xs);
1593
+ --stepper-items-rail-gap: var(--spacing-xs);
1594
+ --stepper-segment-gap: var(--spacing-xs);
1595
+
1596
+ /* ------ table variables ------ */
1597
+ --table-items-body-base-text-h-padding: var(--spacing-6xl);
1598
+ --table-items-body-base-text-v-padding: var(--spacing-4xl);
1599
+ --table-items-body-base-text-gap: var(--spacing-m-base);
1600
+ --table-items-body-base-text-and-text-h-padding: var(--spacing-6xl);
1601
+ --table-items-body-base-text-and-text-v-padding: var(--spacing-s);
1602
+ --table-items-body-base-text-and-text-gap: var(--spacing-m-base);
1603
+ --table-items-body-base-text-and-text-content-gap: var(--spacing-xxs);
1604
+ --table-items-body-base-nontext-h-padding: var(--spacing-4xl);
1605
+ --table-items-body-base-nontext-v-padding: var(--spacing-4xl);
1606
+ --table-items-body-base-nontext-gap: var(--spacing-m-base);
1607
+ --table-items-body-small-text-h-padding: var(--spacing-6xl);
1608
+ --table-items-body-small-text-v-padding: var(--spacing-m-base);
1609
+ --table-items-body-small-text-gap: var(--spacing-m-base);
1610
+ --table-items-body-small-text-and-text-h-padding: var(--spacing-6xl);
1611
+ --table-items-body-small-text-and-text-v-padding: var(--spacing-xxs);
1612
+ --table-items-body-small-text-and-text-content-gap: var(--spacing-xxs);
1613
+ --table-items-body-small-text-and-text-gap: var(--spacing-m-base);
1614
+ --table-items-body-small-nontext-h-padding: var(--spacing-xl);
1615
+ --table-items-body-small-nontext-v-padding: var(--spacing-m-base);
1616
+ --table-items-body-small-nontext-gap: var(--spacing-m-base);
1617
+ --table-items-head-h-padding: 0px;
1618
+ --table-items-head-v-padding: 0px;
1619
+ --table-items-head-base-text-h-padding: var(--spacing-xl);
1620
+ --table-items-head-base-text-v-padding: var(--spacing-4xl);
1621
+ --table-items-head-base-text-gap: var(--spacing-m-base);
1622
+ --table-items-head-base-text-content-h-padding: var(--spacing-xl);
1623
+ --table-items-head-base-text-and-text-h-padding: var(--spacing-xl);
1624
+ --table-items-head-base-text-and-text-v-padding: var(--spacing-s);
1625
+ --table-items-head-base-text-and-text-content-gap: var(--spacing-xxs);
1626
+ --table-items-head-base-text-and-text-gap: var(--spacing-m-base);
1627
+ --table-items-head-base-text-and-text-content-h-padding: var(--spacing-xl);
1628
+ --table-items-head-base-nontext-h-padding: var(--spacing-4xl);
1629
+ --table-items-head-base-nontext-v-padding: var(--spacing-4xl);
1630
+ --table-items-head-base-nontext-gap: var(--spacing-m-base);
1631
+ --table-items-head-small-text-h-padding: var(--spacing-xl);
1632
+ --table-items-head-small-text-v-padding: var(--spacing-m-base);
1633
+ --table-items-head-small-text-gap: var(--spacing-m-base);
1634
+ --table-items-head-small-text-and-text-h-padding: var(--spacing-xl);
1635
+ --table-items-head-small-text-and-text-v-padding: var(--spacing-xs);
1636
+ --table-items-head-small-text-and-text-content-gap: var(--spacing-none);
1637
+ --table-items-head-small-text-and-text-gap: var(--spacing-m-base);
1638
+ --table-items-head-small-text-and-text-content-h-padding: var(--spacing-xl);
1639
+ --table-items-head-small-nontext-h-padding: var(--spacing-xl);
1640
+ --table-items-head-small-nontext-v-padding: var(--spacing-xl);
1641
+ --table-items-head-small-nontext-gap: var(--spacing-m-base);
1642
+
1643
+ /* ------ tabs variables ------ */
1644
+ --tabs-items-base-h-padding: var(--spacing-2xl);
1645
+ --tabs-items-base-v-padding: var(--spacing-l);
1646
+ --tabs-items-base-tab-content-gap: var(--spacing-m-base);
1647
+ --tabs-items-base-tab-label-gap: var(--spacing-xs);
1648
+ --tabs-items-base-icon-size: var(--spacing-5xl);
1649
+ --tabs-items-base-basic-active-gap: var(--spacing-m-base);
1650
+ --tabs-items-base-basic-vertical-active-gap: var(--spacing-xl);
1651
+ --tabs-items-small-h-padding: var(--spacing-xl);
1652
+ --tabs-items-small-v-padding: var(--spacing-s);
1653
+ --tabs-items-small-basic-active-gap: var(--spacing-xs);
1654
+ --tabs-items-small-basic-vertical-active-gap: var(--spacing-l);
1655
+ --tabs-items-small-tab-content-gap: var(--spacing-s);
1656
+ --tabs-items-small-tab-label-gap: var(--spacing-xs);
1657
+ --tabs-items-small-icon-size: var(--spacing-5xl);
1658
+ --tabs-items-large-h-padding: var(--spacing-4xl);
1659
+ --tabs-items-large-v-padding: var(--spacing-2xl);
1660
+ --tabs-items-large-basic-active-gap: var(--spacing-xl);
1661
+ --tabs-items-large-basic-vertical-active-gap: var(--spacing-2xl);
1662
+ --tabs-items-large-tab-content-gap: var(--spacing-m-base);
1663
+ --tabs-items-large-tab-label-gap: var(--spacing-xs);
1664
+ --tabs-items-large-icon-size: var(--spacing-5xl);
1665
+ --tabs-tab1: false;
1666
+ --tabs-tab2: false;
1667
+ --tabs-tab3: false;
1668
+
1669
+ /* ------ timeline variables ------ */
1670
+ --timeline-h-padding: var(--spacing-m-base);
1671
+ --timeline-v-padding: var(--spacing-m-base);
1672
+ --timeline-gap: var(--spacing-m-base);
1673
+ --timeline-content-gap: var(--spacing-m-base);
1674
+ --timeline-text-gap: var(--spacing-m-base);
1675
+
1676
+ /* ------ timepicker variables ------ */
1677
+ --timepicker-timer-header-h-padding: var(--spacing-4xl);
1678
+ --timepicker-timer-header-v-padding: var(--spacing-4xl);
1679
+ --timepicker-timer-header-content-gap: var(--spacing-xs);
1680
+ --timepicker-timer-footer-h-padding: var(--spacing-4xl);
1681
+ --timepicker-timer-footer-v-padding: var(--spacing-4xl);
1682
+ --timepicker-timer-footer-gap: var(--spacing-m-base);
1683
+ --timepicker-timer-body-basic-h-padding: var(--spacing-4xl);
1684
+ --timepicker-timer-body-basic-v-padding: var(--spacing-xl);
1685
+ --timepicker-timer-body-basic-content-gap: var(--spacing-s);
1686
+ --timepicker-timer-body-basic-content-h-padding: var(--spacing-s);
1687
+ --timepicker-timer-body-basic-timer-column-gap: var(--spacing-s);
1688
+ --timepicker-timer-body-basic-timer-number-gap: var(--spacing-xs);
1689
+ --timepicker-timer-body-compact-h-padding: var(--spacing-4xl);
1690
+ --timepicker-timer-body-compact-v-padding: var(--spacing-xl);
1691
+ --timepicker-timer-body-compact-content-gap: var(--spacing-6xl);
1692
+ --timepicker-timer-body-compact-input-group-gap: var(--spacing-m-base);
1693
+ --timepicker-timer-body-compact-input-gap: var(--spacing-none);
1694
+ --timepicker-timer-body-clock-h-padding: var(--spacing-4xl);
1695
+ --timepicker-timer-body-clock-v-padding: var(--spacing-xl);
1696
+ --timepicker-timer-body-clock-gap: var(--spacing-4xl);
1697
+ --timepicker-timer-body-clock-input-group-gap: var(--spacing-m-base);
1698
+ --timepicker-timer-body-clock-input-gap: var(--spacing-none);
1699
+
1700
+ /* ------ timestamp variables ------ */
1701
+ --timestamp-base-gap: var(--spacing-xxs);
1702
+ --timestamp-base-content-gap: var(--spacing-xs);
1703
+ --timestamp-small-gap: var(--spacing-none);
1704
+ --timestamp-small-content-gap: var(--spacing-xxs);
1705
+
1706
+ /* ------ toast variables ------ */
1707
+ --toast-base-radius: var(--radius-m-base);
1708
+ --toast-base-h-padding: var(--spacing-xl);
1709
+ --toast-base-v-padding: var(--spacing-xl);
1710
+ --toast-base-gap: var(--spacing-m-base);
1711
+ --toast-base-content-gap: var(--spacing-m-base);
1712
+ --toast-sign-base-size: var(--spacing-5xl);
1713
+ --toast-sign-base-full-padding: var(--spacing-s);
1714
+ --toast-sign-large-size: var(--spacing-6xl);
1715
+ --toast-sign-large-full-padding: var(--spacing-m-base);
1716
+ --toast-sign-small-size: var(--spacing-4xl);
1717
+ --toast-sign-small-full-padding: var(--spacing-xs);
1718
+ --toast-gradient-info-gradient-tozero: linear-gradient(270deg, var(--background-lightest) 89%, var(--states-info-sub-base) 100%);
1719
+ --toast-gradient-success-gradient-tozero: linear-gradient(270deg, var(--background-lightest) 89%, var(--states-success-sub-base) 100%);
1720
+ --toast-gradient-danger-gradient-tozero: linear-gradient(270deg, var(--background-lightest) 89%, var(--states-danger-sub-base) 100%);
1721
+ --toast-gradient-warning-gradient-tozero: linear-gradient(270deg, var(--background-lightest) 89%, var(--states-warning-sub-base) 100%);
1722
+ --toast-gradient-gradient-gray: linear-gradient(270deg, var(--background-lightest) 89%, var(--background-sub-base) 100%);
1723
+
1724
+ /* ------ tooltip variables ------ */
1725
+ --tooltips-base-radius: var(--radius-m-base);
1726
+ --tooltips-base-h-padding: var(--spacing-xl);
1727
+ --tooltips-base-v-padding: var(--spacing-m-base);
1728
+ --tooltips-base-gap: var(--spacing-m-base);
1729
+ --tooltips-base-content-gap: var(--spacing-none);
1730
+ --tooltips-base-max-width: var(--spacing-52xl);
1731
+
1732
+ /* ------ tree-view variables ------ */
1733
+ --tree-view-items-tree-base-h-padding: var(--spacing-m-base);
1734
+ --tree-view-items-tree-base-v-padding: var(--spacing-s);
1735
+ --tree-view-items-tree-base-gap: var(--spacing-m-base);
1736
+ --tree-view-items-tree-base-content-gap: var(--spacing-xs);
1737
+ --tree-view-items-tree-small-h-padding: var(--spacing-s);
1738
+ --tree-view-items-tree-small-v-padding: var(--spacing-xs);
1739
+ --tree-view-items-tree-small-gap: var(--spacing-xs);
1740
+ --tree-view-items-tree-small-content-gap: var(--spacing-xxs);
1741
+ --tree-view-items-tree-large-h-padding: var(--spacing-xl);
1742
+ --tree-view-items-tree-large-v-padding: var(--spacing-l);
1743
+ --tree-view-items-tree-large-gap: var(--spacing-l);
1744
+ --tree-view-items-tree-large-content-gap: var(--spacing-s);
1745
+ --tree-view-tree-h-padding: var(--spacing-l);
1746
+ --tree-view-tree-v-padding: var(--spacing-m-base);
1747
+ --tree-view-tree-gap: var(--spacing-xxs);
1748
+
1749
+ /* ------ upload variables ------ */
1750
+ --upload-card-h-padding: var(--spacing-xl);
1751
+ --upload-card-v-padding: var(--spacing-xl);
1752
+ --upload-card-gap: var(--spacing-xl);
1753
+ --upload-card-content-gap: var(--spacing-xxs);
1754
+ --upload-basic-h-padding: var(--spacing-6xl);
1755
+ --upload-basic-v-padding: var(--spacing-8xl);
1756
+ --upload-basic-gap: var(--spacing-6xl);
1757
+ --upload-basic-content-gap: var(--spacing-4xl);
1758
+ --upload-basic-text-gap: var(--spacing-xs);
1759
+ --upload-compact-h-padding: var(--spacing-xl);
1760
+ --upload-compact-v-padding: var(--spacing-xl);
1761
+ --upload-compact-gap: var(--spacing-m-base);
1762
+ --upload-compact-content-gap: var(--spacing-4xl);
1763
+ --upload-compact-text-gap: var(--spacing-none);
1764
+
1765
+ --breakpoint-xs: 0px;
1766
+ --breakpoint-sm: 600px;
1767
+ --breakpoint-md: 905px;
1768
+ --breakpoint-lg: 1248px;
1769
+ --breakpoint-xl: 1440px;
1770
+ }
1771
+
1772
+ [data-theme='dark'] {
1773
+ /* semantic colors dark */
1774
+ --primary-light: var(--primary-800);
1775
+ --primary-sub-base: var(--primary-700);
1776
+ --primary-base: var(--primary-500);
1777
+ --primary-dark: var(--primary-200);
1778
+ --primary-darkest: var(--primary-100);
1779
+ --primary-lightest: var(--primary-900);
1780
+ --background-lightest: var(--neutral-900);
1781
+ --background-sub-base: var(--neutral-600);
1782
+ --background-base: var(--neutral-400);
1783
+ --background-dark: var(--neutral-300);
1784
+ --background-darkest: var(--neutral-100);
1785
+ --background-light: var(--neutral-700);
1786
+ --frames-lightest: var(--neutral-1000);
1787
+ --frames-sub-base: var(--neutral-600);
1788
+ --frames-base: var(--neutral-400);
1789
+ --frames-dark: var(--neutral-50);
1790
+ --frames-darkest: var(--neutral-0);
1791
+ --frames-light: var(--neutral-900);
1792
+ --text-light: var(--neutral-600);
1793
+ --text-base: var(--neutral-400);
1794
+ --text-darkest: var(--neutral-100);
1795
+ --text-dark: var(--neutral-300);
1796
+ --text-sub-base: var(--neutral-500);
1797
+ --text-lightest: var(--neutral-900);
1798
+ --border-light: var(--neutral-700);
1799
+ --border-sub-base: var(--neutral-600);
1800
+ --border-base: var(--neutral-400);
1801
+ --border-dark: var(--neutral-300);
1802
+ --border-darkest: var(--neutral-100);
1803
+ --border-lightest: var(--neutral-900);
1804
+ --icon-light: var(--neutral-700);
1805
+ --icon-sub-base: var(--neutral-600);
1806
+ --icon-base: var(--neutral-400);
1807
+ --icon-dark: var(--neutral-300);
1808
+ --icon-darkest: var(--neutral-100);
1809
+ --icon-lightest: var(--neutral-900);
1810
+ --overlay-black-lightest: var(--alpha-base-white-16);
1811
+ --overlay-black-light: var(--alpha-base-white-32);
1812
+ --overlay-black-base: var(--alpha-base-white-48);
1813
+ --overlay-black-dark: var(--alpha-base-white-64);
1814
+ --overlay-black-darkest: var(--alpha-base-white-72);
1815
+ --overlay-black-xxlightest: var(--alpha-base-white-8);
1816
+ --overlay-black-xlightest: var(--alpha-base-white-12);
1817
+ --overlay-black-none: var(--alpha-base-white-none);
1818
+ --overlay-white-lightest: var(--alpha-base-black-16);
1819
+ --overlay-white-light: var(--alpha-base-black-32);
1820
+ --overlay-white-base: var(--alpha-base-black-48);
1821
+ --overlay-white-dark: var(--alpha-base-black-64);
1822
+ --overlay-white-darkest: var(--alpha-base-black-72);
1823
+ --overlay-white-none: var(--alpha-base-black-none);
1824
+ --states-lightest: var(--neutral-50);
1825
+ --states-light: var(--neutral-300);
1826
+ --states-base: var(--secondary-500);
1827
+ --states-dark: var(--neutral-600);
1828
+ --states-darkest: var(--neutral-800);
1829
+ --states-info-light: var(--blue-800);
1830
+ --states-info-sub-base: var(--blue-700);
1831
+ --states-info-base: var(--blue-500);
1832
+ --states-info-dark: var(--blue-200);
1833
+ --states-info-darkest: var(--blue-100);
1834
+ --states-info-lightest: var(--blue-900);
1835
+ --states-success-light: var(--green-800);
1836
+ --states-success-sub-base: var(--green-700);
1837
+ --states-success-base: var(--green-500);
1838
+ --states-success-dark: var(--green-200);
1839
+ --states-success-darkest: var(--green-100);
1840
+ --states-success-lightest: var(--green-900);
1841
+ --states-danger-light: var(--red-800);
1842
+ --states-danger-sub-base: var(--red-700);
1843
+ --states-danger-base: var(--red-400);
1844
+ --states-danger-dark: var(--red-300);
1845
+ --states-danger-darkest: var(--red-100);
1846
+ --states-danger-lightest: var(--red-900);
1847
+ --states-warning-light: var(--yellow-800);
1848
+ --states-warning-sub-base: var(--yellow-700);
1849
+ --states-warning-base: var(--yellow-500);
1850
+ --states-warning-dark: var(--yellow-400);
1851
+ --states-warning-darkest: var(--yellow-200);
1852
+ --states-warning-lightest: var(--yellow-900);
1853
+ --states-verified-light: var(--blue-800);
1854
+ --states-verified-sub-base: var(--blue-700);
1855
+ --states-verified-base: var(--blue-400);
1856
+ --states-verified-dark: var(--blue-300);
1857
+ --states-verified-darkest: var(--blue-100);
1858
+ --states-verified-lightest: var(--blue-900);
1859
+ --static-dark: var(--static-white);
1860
+ --static-light: var(--static-black);
1861
+ --shadow-black-alpha-lightest: var(--alpha-neutral-neutral-500-2);
1862
+ --shadow-black-alpha-light: var(--alpha-neutral-neutral-500-4);
1863
+ --shadow-black-alpha-base: var(--alpha-neutral-neutral-500-8);
1864
+ --shadow-black-alpha-dark: var(--alpha-neutral-neutral-500-12);
1865
+ --shadow-black-alpha-darkest: var(--alpha-neutral-neutral-500-16);
1866
+ --shadow-blue-alpha-lightest: var(--alpha-blue-blue-500-2);
1867
+ --shadow-blue-alpha-light: var(--alpha-blue-blue-500-4);
1868
+ --shadow-blue-alpha-base: var(--alpha-blue-blue-500-8);
1869
+ --shadow-blue-alpha-dark: var(--alpha-blue-blue-500-12);
1870
+ --shadow-blue-alpha-darkest: var(--alpha-blue-blue-500-16);
1871
+ --shadow-primary-alpha-lightest: var(--alpha-brand-primary-500-2);
1872
+ --shadow-primary-alpha-light: var(--alpha-brand-primary-500-4);
1873
+ --shadow-primary-alpha-base: var(--alpha-brand-primary-500-8);
1874
+ --shadow-primary-alpha-dark: var(--alpha-brand-primary-500-16);
1875
+ --shadow-primary-alpha-darkest: var(--alpha-brand-primary-500-24);
1876
+ --secondary-lightest: var(--secondary-900);
1877
+ --secondary-light: var(--secondary-800);
1878
+ --secondary-sub-base: var(--secondary-600);
1879
+ --secondary-base: var(--secondary-400);
1880
+ --secondary-dark: var(--secondary-300);
1881
+ --secondary-darkest: var(--secondary-100);
1882
+ --skeleton-skeleton-gradient-none: #52586600;
1883
+ --skeleton-skeleton-gradient: #525866;
1884
+ /* end of semantic colors dark */
1885
+ }