@udir-design/theme 0.1.0-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.
package/dist/udir.css ADDED
@@ -0,0 +1,1951 @@
1
+ @charset "UTF-8";
2
+
3
+ @layer ds.reset, ds.theme, ds.base, ds.utilities, ds.components;
4
+
5
+ /**
6
+ * These files are generated from design tokens defind using Token Studio
7
+ */
8
+
9
+ @layer ds.theme.color-mode.light {
10
+ :root, [data-ds-color-mode="light"] {
11
+ --ds-color-accent-1: #fefefe;
12
+ --ds-color-accent-2: #f2f2f2;
13
+ --ds-color-accent-3: #e1e1e1;
14
+ --ds-color-accent-4: #d0d0d0;
15
+ --ds-color-accent-5: #c1c1c1;
16
+ --ds-color-accent-6: #bbbbbb;
17
+ --ds-color-accent-7: #818181;
18
+ --ds-color-accent-8: #4e4e4e;
19
+ --ds-color-accent-9: #303030;
20
+ --ds-color-accent-10: #424242;
21
+ --ds-color-accent-11: #555555;
22
+ --ds-color-accent-12: #636363;
23
+ --ds-color-accent-13: #2c2c2c;
24
+ --ds-color-accent-contrast-1: #ffffff;
25
+ --ds-color-accent-contrast-2: #c6c6c6;
26
+ --ds-color-accent-background-default: var(--ds-color-accent-1);
27
+ --ds-color-accent-background-subtle: var(--ds-color-accent-2);
28
+ --ds-color-accent-surface-default: var(--ds-color-accent-3);
29
+ --ds-color-accent-surface-hover: var(--ds-color-accent-4);
30
+ --ds-color-accent-surface-active: var(--ds-color-accent-5);
31
+ --ds-color-accent-border-subtle: var(--ds-color-accent-6);
32
+ --ds-color-accent-border-default: var(--ds-color-accent-7);
33
+ --ds-color-accent-border-strong: var(--ds-color-accent-8);
34
+ --ds-color-accent-base-default: var(--ds-color-accent-9);
35
+ --ds-color-accent-base-hover: var(--ds-color-accent-10);
36
+ --ds-color-accent-base-active: var(--ds-color-accent-11);
37
+ --ds-color-accent-text-subtle: var(--ds-color-accent-12);
38
+ --ds-color-accent-text-default: var(--ds-color-accent-13);
39
+ --ds-color-accent-contrast-default: var(--ds-color-accent-contrast-1);
40
+ --ds-color-accent-contrast-subtle: var(--ds-color-accent-contrast-2);
41
+ --ds-color-neutral-1: #fefefe;
42
+ --ds-color-neutral-2: #f2f2f2;
43
+ --ds-color-neutral-3: #e1e1e1;
44
+ --ds-color-neutral-4: #d0d0d0;
45
+ --ds-color-neutral-5: #c1c1c1;
46
+ --ds-color-neutral-6: #bbbbbb;
47
+ --ds-color-neutral-7: #818181;
48
+ --ds-color-neutral-8: #4e4e4e;
49
+ --ds-color-neutral-9: #dedede;
50
+ --ds-color-neutral-10: #c6c6c6;
51
+ --ds-color-neutral-11: #b0b0b0;
52
+ --ds-color-neutral-12: #636363;
53
+ --ds-color-neutral-13: #2c2c2c;
54
+ --ds-color-neutral-contrast-1: #000000;
55
+ --ds-color-neutral-contrast-2: #424242;
56
+ --ds-color-neutral-background-default: var(--ds-color-neutral-1);
57
+ --ds-color-neutral-background-subtle: var(--ds-color-neutral-2);
58
+ --ds-color-neutral-surface-default: var(--ds-color-neutral-3);
59
+ --ds-color-neutral-surface-hover: var(--ds-color-neutral-4);
60
+ --ds-color-neutral-surface-active: var(--ds-color-neutral-5);
61
+ --ds-color-neutral-border-subtle: var(--ds-color-neutral-6);
62
+ --ds-color-neutral-border-default: var(--ds-color-neutral-7);
63
+ --ds-color-neutral-border-strong: var(--ds-color-neutral-8);
64
+ --ds-color-neutral-base-default: var(--ds-color-neutral-9);
65
+ --ds-color-neutral-base-hover: var(--ds-color-neutral-10);
66
+ --ds-color-neutral-base-active: var(--ds-color-neutral-11);
67
+ --ds-color-neutral-text-subtle: var(--ds-color-neutral-12);
68
+ --ds-color-neutral-text-default: var(--ds-color-neutral-13);
69
+ --ds-color-neutral-contrast-default: var(--ds-color-neutral-contrast-1);
70
+ --ds-color-neutral-contrast-subtle: var(--ds-color-neutral-contrast-2);
71
+ --ds-color-brand1-1: #fcfefd;
72
+ --ds-color-brand1-2: #e7f5ee;
73
+ --ds-color-brand1-3: #cae9d9;
74
+ --ds-color-brand1-4: #abdcc3;
75
+ --ds-color-brand1-5: #8ccfad;
76
+ --ds-color-brand1-6: #81cba5;
77
+ --ds-color-brand1-7: #548c6f;
78
+ --ds-color-brand1-8: #325443;
79
+ --ds-color-brand1-9: #76c69d;
80
+ --ds-color-brand1-10: #68af8a;
81
+ --ds-color-brand1-11: #5a9878;
82
+ --ds-color-brand1-12: #406b55;
83
+ --ds-color-brand1-13: #1d3026;
84
+ --ds-color-brand1-contrast-1: #000000;
85
+ --ds-color-brand1-contrast-2: #182720;
86
+ --ds-color-brand1-background-default: var(--ds-color-brand1-1);
87
+ --ds-color-brand1-background-subtle: var(--ds-color-brand1-2);
88
+ --ds-color-brand1-surface-default: var(--ds-color-brand1-3);
89
+ --ds-color-brand1-surface-hover: var(--ds-color-brand1-4);
90
+ --ds-color-brand1-surface-active: var(--ds-color-brand1-5);
91
+ --ds-color-brand1-border-subtle: var(--ds-color-brand1-6);
92
+ --ds-color-brand1-border-default: var(--ds-color-brand1-7);
93
+ --ds-color-brand1-border-strong: var(--ds-color-brand1-8);
94
+ --ds-color-brand1-base-default: var(--ds-color-brand1-9);
95
+ --ds-color-brand1-base-hover: var(--ds-color-brand1-10);
96
+ --ds-color-brand1-base-active: var(--ds-color-brand1-11);
97
+ --ds-color-brand1-text-subtle: var(--ds-color-brand1-12);
98
+ --ds-color-brand1-text-default: var(--ds-color-brand1-13);
99
+ --ds-color-brand1-contrast-default: var(--ds-color-brand1-contrast-1);
100
+ --ds-color-brand1-contrast-subtle: var(--ds-color-brand1-contrast-2);
101
+ --ds-color-brand2-1: #fefeff;
102
+ --ds-color-brand2-2: #ecf3f8;
103
+ --ds-color-brand2-3: #d5e4f0;
104
+ --ds-color-brand2-4: #bdd4e7;
105
+ --ds-color-brand2-5: #aec3d4;
106
+ --ds-color-brand2-6: #a9bece;
107
+ --ds-color-brand2-7: #74838e;
108
+ --ds-color-brand2-8: #464e55;
109
+ --ds-color-brand2-9: #bed5e8;
110
+ --ds-color-brand2-10: #a9bece;
111
+ --ds-color-brand2-11: #96a8b7;
112
+ --ds-color-brand2-12: #5a646d;
113
+ --ds-color-brand2-13: #282d31;
114
+ --ds-color-brand2-contrast-1: #000000;
115
+ --ds-color-brand2-contrast-2: #33393f;
116
+ --ds-color-brand2-background-default: var(--ds-color-brand2-1);
117
+ --ds-color-brand2-background-subtle: var(--ds-color-brand2-2);
118
+ --ds-color-brand2-surface-default: var(--ds-color-brand2-3);
119
+ --ds-color-brand2-surface-hover: var(--ds-color-brand2-4);
120
+ --ds-color-brand2-surface-active: var(--ds-color-brand2-5);
121
+ --ds-color-brand2-border-subtle: var(--ds-color-brand2-6);
122
+ --ds-color-brand2-border-default: var(--ds-color-brand2-7);
123
+ --ds-color-brand2-border-strong: var(--ds-color-brand2-8);
124
+ --ds-color-brand2-base-default: var(--ds-color-brand2-9);
125
+ --ds-color-brand2-base-hover: var(--ds-color-brand2-10);
126
+ --ds-color-brand2-base-active: var(--ds-color-brand2-11);
127
+ --ds-color-brand2-text-subtle: var(--ds-color-brand2-12);
128
+ --ds-color-brand2-text-default: var(--ds-color-brand2-13);
129
+ --ds-color-brand2-contrast-default: var(--ds-color-brand2-contrast-1);
130
+ --ds-color-brand2-contrast-subtle: var(--ds-color-brand2-contrast-2);
131
+ --ds-color-brand3-1: #fffefd;
132
+ --ds-color-brand3-2: #f8f2ea;
133
+ --ds-color-brand3-3: #efe0cc;
134
+ --ds-color-brand3-4: #e5ceae;
135
+ --ds-color-brand3-5: #d2bd9f;
136
+ --ds-color-brand3-6: #cdb99c;
137
+ --ds-color-brand3-7: #8e7f6c;
138
+ --ds-color-brand3-8: #554c41;
139
+ --ds-color-brand3-9: #e5ceae;
140
+ --ds-color-brand3-10: #cdb99c;
141
+ --ds-color-brand3-11: #b5a38a;
142
+ --ds-color-brand3-12: #6c6252;
143
+ --ds-color-brand3-13: #302b25;
144
+ --ds-color-brand3-contrast-1: #000000;
145
+ --ds-color-brand3-contrast-2: #3f3830;
146
+ --ds-color-brand3-background-default: var(--ds-color-brand3-1);
147
+ --ds-color-brand3-background-subtle: var(--ds-color-brand3-2);
148
+ --ds-color-brand3-surface-default: var(--ds-color-brand3-3);
149
+ --ds-color-brand3-surface-hover: var(--ds-color-brand3-4);
150
+ --ds-color-brand3-surface-active: var(--ds-color-brand3-5);
151
+ --ds-color-brand3-border-subtle: var(--ds-color-brand3-6);
152
+ --ds-color-brand3-border-default: var(--ds-color-brand3-7);
153
+ --ds-color-brand3-border-strong: var(--ds-color-brand3-8);
154
+ --ds-color-brand3-base-default: var(--ds-color-brand3-9);
155
+ --ds-color-brand3-base-hover: var(--ds-color-brand3-10);
156
+ --ds-color-brand3-base-active: var(--ds-color-brand3-11);
157
+ --ds-color-brand3-text-subtle: var(--ds-color-brand3-12);
158
+ --ds-color-brand3-text-default: var(--ds-color-brand3-13);
159
+ --ds-color-brand3-contrast-default: var(--ds-color-brand3-contrast-1);
160
+ --ds-color-brand3-contrast-subtle: var(--ds-color-brand3-contrast-2);
161
+ --ds-color-success-background-default: var(--ds-global-green-1);
162
+ --ds-color-success-background-subtle: var(--ds-global-green-2);
163
+ --ds-color-success-surface-default: var(--ds-global-green-3);
164
+ --ds-color-success-surface-hover: var(--ds-global-green-4);
165
+ --ds-color-success-surface-active: var(--ds-global-green-5);
166
+ --ds-color-success-border-subtle: var(--ds-global-green-6);
167
+ --ds-color-success-border-default: var(--ds-global-green-7);
168
+ --ds-color-success-border-strong: var(--ds-global-green-8);
169
+ --ds-color-success-base-default: var(--ds-global-green-9);
170
+ --ds-color-success-base-hover: var(--ds-global-green-10);
171
+ --ds-color-success-base-active: var(--ds-global-green-11);
172
+ --ds-color-success-text-subtle: var(--ds-global-green-12);
173
+ --ds-color-success-text-default: var(--ds-global-green-13);
174
+ --ds-color-success-contrast-default: var(--ds-global-green-contrast-1);
175
+ --ds-color-success-contrast-subtle: var(--ds-global-green-contrast-2);
176
+ --ds-color-danger-background-default: var(--ds-global-red-1);
177
+ --ds-color-danger-background-subtle: var(--ds-global-red-2);
178
+ --ds-color-danger-surface-default: var(--ds-global-red-3);
179
+ --ds-color-danger-surface-hover: var(--ds-global-red-4);
180
+ --ds-color-danger-surface-active: var(--ds-global-red-5);
181
+ --ds-color-danger-border-subtle: var(--ds-global-red-6);
182
+ --ds-color-danger-border-default: var(--ds-global-red-7);
183
+ --ds-color-danger-border-strong: var(--ds-global-red-8);
184
+ --ds-color-danger-base-default: var(--ds-global-red-9);
185
+ --ds-color-danger-base-hover: var(--ds-global-red-10);
186
+ --ds-color-danger-base-active: var(--ds-global-red-11);
187
+ --ds-color-danger-text-subtle: var(--ds-global-red-12);
188
+ --ds-color-danger-text-default: var(--ds-global-red-13);
189
+ --ds-color-danger-contrast-default: var(--ds-global-red-contrast-1);
190
+ --ds-color-danger-contrast-subtle: var(--ds-global-red-contrast-2);
191
+ --ds-color-info-background-default: #fefeff;
192
+ --ds-color-info-background-subtle: #edf5fa;
193
+ --ds-color-info-surface-default: #d3e5f4;
194
+ --ds-color-info-surface-hover: #b7d5ed;
195
+ --ds-color-info-surface-active: #9bc5e5;
196
+ --ds-color-info-border-subtle: #94c1e3;
197
+ --ds-color-info-border-default: #2f86c9;
198
+ --ds-color-info-border-strong: #075089;
199
+ --ds-color-info-base-default: #0A71C0;
200
+ --ds-color-info-base-hover: #085ea0;
201
+ --ds-color-info-base-active: #074b80;
202
+ --ds-color-info-text-subtle: #0966ac;
203
+ --ds-color-info-text-default: #042d4d;
204
+ --ds-color-info-contrast-default: #ffffff;
205
+ --ds-color-info-contrast-subtle: #f3f8fc;
206
+ --ds-color-warning-background-default: var(--ds-global-yellow-1);
207
+ --ds-color-warning-background-subtle: var(--ds-global-yellow-2);
208
+ --ds-color-warning-surface-default: var(--ds-global-yellow-3);
209
+ --ds-color-warning-surface-hover: var(--ds-global-yellow-4);
210
+ --ds-color-warning-surface-active: var(--ds-global-yellow-5);
211
+ --ds-color-warning-border-subtle: var(--ds-global-yellow-6);
212
+ --ds-color-warning-border-default: var(--ds-global-yellow-7);
213
+ --ds-color-warning-border-strong: var(--ds-global-yellow-8);
214
+ --ds-color-warning-base-default: var(--ds-global-orange-9);
215
+ --ds-color-warning-base-hover: var(--ds-global-orange-10);
216
+ --ds-color-warning-base-active: var(--ds-global-orange-11);
217
+ --ds-color-warning-text-subtle: var(--ds-global-orange-12);
218
+ --ds-color-warning-text-default: var(--ds-global-orange-13);
219
+ --ds-color-warning-contrast-default: var(--ds-global-orange-contrast-1);
220
+ --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2);
221
+ --ds-color-focus-inner: #fefefe;
222
+ --ds-color-focus-outer: #2c2c2c;
223
+ --ds-global-blue-1: #fefeff;
224
+ --ds-global-blue-2: #edf5fa;
225
+ --ds-global-blue-3: #d3e5f4;
226
+ --ds-global-blue-4: #b7d5ed;
227
+ --ds-global-blue-5: #9bc5e5;
228
+ --ds-global-blue-6: #94c1e3;
229
+ --ds-global-blue-7: #2f86c9;
230
+ --ds-global-blue-8: #075089;
231
+ --ds-global-blue-9: #0A71C0;
232
+ --ds-global-blue-10: #085ea0;
233
+ --ds-global-blue-11: #074b80;
234
+ --ds-global-blue-12: #0966ac;
235
+ --ds-global-blue-13: #042d4d;
236
+ --ds-global-blue-contrast-1: #ffffff;
237
+ --ds-global-blue-contrast-2: #f3f8fc;
238
+ --ds-global-green-1: #fcfefc;
239
+ --ds-global-green-2: #edf6ee;
240
+ --ds-global-green-3: #d1e9d4;
241
+ --ds-global-green-4: #b5dbba;
242
+ --ds-global-green-5: #96cd9e;
243
+ --ds-global-green-6: #8fc997;
244
+ --ds-global-green-7: #229532;
245
+ --ds-global-green-8: #045a10;
246
+ --ds-global-green-9: #068718;
247
+ --ds-global-green-10: #057114;
248
+ --ds-global-green-11: #045a10;
249
+ --ds-global-green-12: #057315;
250
+ --ds-global-green-13: #023409;
251
+ --ds-global-green-contrast-1: #ffffff;
252
+ --ds-global-green-contrast-2: #f9fcf9;
253
+ --ds-global-orange-1: #fffefe;
254
+ --ds-global-orange-2: #f9f2ed;
255
+ --ds-global-orange-3: #f1ded3;
256
+ --ds-global-orange-4: #e9cbb8;
257
+ --ds-global-orange-5: #e1b9a0;
258
+ --ds-global-orange-6: #deb296;
259
+ --ds-global-orange-7: #c06b36;
260
+ --ds-global-orange-8: #7c3b14;
261
+ --ds-global-orange-9: #B8581D;
262
+ --ds-global-orange-10: #9a4918;
263
+ --ds-global-orange-11: #7c3b14;
264
+ --ds-global-orange-12: #9e4b19;
265
+ --ds-global-orange-13: #47220b;
266
+ --ds-global-orange-contrast-1: #ffffff;
267
+ --ds-global-orange-contrast-2: #fdfbf9;
268
+ --ds-global-purple-1: #fefefe;
269
+ --ds-global-purple-2: #f5f2f9;
270
+ --ds-global-purple-3: #e7dfef;
271
+ --ds-global-purple-4: #d9cce6;
272
+ --ds-global-purple-5: #ccbadd;
273
+ --ds-global-purple-6: #c7b4da;
274
+ --ds-global-purple-7: #9572b9;
275
+ --ds-global-purple-8: #663399;
276
+ --ds-global-purple-9: #663299;
277
+ --ds-global-purple-10: #4f2777;
278
+ --ds-global-purple-11: #381b54;
279
+ --ds-global-purple-12: #7b4ea7;
280
+ --ds-global-purple-13: #3b1d59;
281
+ --ds-global-purple-contrast-1: #ffffff;
282
+ --ds-global-purple-contrast-2: #eee8f3;
283
+ --ds-global-red-1: #fffefe;
284
+ --ds-global-red-2: #fbf1f1;
285
+ --ds-global-red-3: #f5dcdc;
286
+ --ds-global-red-4: #f0c7c7;
287
+ --ds-global-red-5: #eab3b3;
288
+ --ds-global-red-6: #e8acac;
289
+ --ds-global-red-7: #d25b5b;
290
+ --ds-global-red-8: #9a1616;
291
+ --ds-global-red-9: #C01B1B;
292
+ --ds-global-red-10: #9a1616;
293
+ --ds-global-red-11: #771111;
294
+ --ds-global-red-12: #c22020;
295
+ --ds-global-red-13: #5a0d0d;
296
+ --ds-global-red-contrast-1: #ffffff;
297
+ --ds-global-red-contrast-2: #f6dfdf;
298
+ --ds-global-yellow-1: #fffefc;
299
+ --ds-global-yellow-2: #fbf2d3;
300
+ --ds-global-yellow-3: #f5e19b;
301
+ --ds-global-yellow-4: #efcf5d;
302
+ --ds-global-yellow-5: #e6bc27;
303
+ --ds-global-yellow-6: #e0b726;
304
+ --ds-global-yellow-7: #9a7e1a;
305
+ --ds-global-yellow-8: #5d4c10;
306
+ --ds-global-yellow-9: #EABF28;
307
+ --ds-global-yellow-10: #d0aa24;
308
+ --ds-global-yellow-11: #b7951f;
309
+ --ds-global-yellow-12: #776114;
310
+ --ds-global-yellow-13: #352b09;
311
+ --ds-global-yellow-contrast-1: #000000;
312
+ --ds-global-yellow-contrast-2: #382d0a;
313
+
314
+ color-scheme: light;
315
+ }
316
+
317
+ @media (prefers-color-scheme: light) {
318
+ [data-ds-color-mode="auto"] {
319
+ --ds-color-accent-1: #fefefe;
320
+ --ds-color-accent-2: #f2f2f2;
321
+ --ds-color-accent-3: #e1e1e1;
322
+ --ds-color-accent-4: #d0d0d0;
323
+ --ds-color-accent-5: #c1c1c1;
324
+ --ds-color-accent-6: #bbbbbb;
325
+ --ds-color-accent-7: #818181;
326
+ --ds-color-accent-8: #4e4e4e;
327
+ --ds-color-accent-9: #303030;
328
+ --ds-color-accent-10: #424242;
329
+ --ds-color-accent-11: #555555;
330
+ --ds-color-accent-12: #636363;
331
+ --ds-color-accent-13: #2c2c2c;
332
+ --ds-color-accent-contrast-1: #ffffff;
333
+ --ds-color-accent-contrast-2: #c6c6c6;
334
+ --ds-color-accent-background-default: var(--ds-color-accent-1);
335
+ --ds-color-accent-background-subtle: var(--ds-color-accent-2);
336
+ --ds-color-accent-surface-default: var(--ds-color-accent-3);
337
+ --ds-color-accent-surface-hover: var(--ds-color-accent-4);
338
+ --ds-color-accent-surface-active: var(--ds-color-accent-5);
339
+ --ds-color-accent-border-subtle: var(--ds-color-accent-6);
340
+ --ds-color-accent-border-default: var(--ds-color-accent-7);
341
+ --ds-color-accent-border-strong: var(--ds-color-accent-8);
342
+ --ds-color-accent-base-default: var(--ds-color-accent-9);
343
+ --ds-color-accent-base-hover: var(--ds-color-accent-10);
344
+ --ds-color-accent-base-active: var(--ds-color-accent-11);
345
+ --ds-color-accent-text-subtle: var(--ds-color-accent-12);
346
+ --ds-color-accent-text-default: var(--ds-color-accent-13);
347
+ --ds-color-accent-contrast-default: var(--ds-color-accent-contrast-1);
348
+ --ds-color-accent-contrast-subtle: var(--ds-color-accent-contrast-2);
349
+ --ds-color-neutral-1: #fefefe;
350
+ --ds-color-neutral-2: #f2f2f2;
351
+ --ds-color-neutral-3: #e1e1e1;
352
+ --ds-color-neutral-4: #d0d0d0;
353
+ --ds-color-neutral-5: #c1c1c1;
354
+ --ds-color-neutral-6: #bbbbbb;
355
+ --ds-color-neutral-7: #818181;
356
+ --ds-color-neutral-8: #4e4e4e;
357
+ --ds-color-neutral-9: #dedede;
358
+ --ds-color-neutral-10: #c6c6c6;
359
+ --ds-color-neutral-11: #b0b0b0;
360
+ --ds-color-neutral-12: #636363;
361
+ --ds-color-neutral-13: #2c2c2c;
362
+ --ds-color-neutral-contrast-1: #000000;
363
+ --ds-color-neutral-contrast-2: #424242;
364
+ --ds-color-neutral-background-default: var(--ds-color-neutral-1);
365
+ --ds-color-neutral-background-subtle: var(--ds-color-neutral-2);
366
+ --ds-color-neutral-surface-default: var(--ds-color-neutral-3);
367
+ --ds-color-neutral-surface-hover: var(--ds-color-neutral-4);
368
+ --ds-color-neutral-surface-active: var(--ds-color-neutral-5);
369
+ --ds-color-neutral-border-subtle: var(--ds-color-neutral-6);
370
+ --ds-color-neutral-border-default: var(--ds-color-neutral-7);
371
+ --ds-color-neutral-border-strong: var(--ds-color-neutral-8);
372
+ --ds-color-neutral-base-default: var(--ds-color-neutral-9);
373
+ --ds-color-neutral-base-hover: var(--ds-color-neutral-10);
374
+ --ds-color-neutral-base-active: var(--ds-color-neutral-11);
375
+ --ds-color-neutral-text-subtle: var(--ds-color-neutral-12);
376
+ --ds-color-neutral-text-default: var(--ds-color-neutral-13);
377
+ --ds-color-neutral-contrast-default: var(--ds-color-neutral-contrast-1);
378
+ --ds-color-neutral-contrast-subtle: var(--ds-color-neutral-contrast-2);
379
+ --ds-color-brand1-1: #fcfefd;
380
+ --ds-color-brand1-2: #e7f5ee;
381
+ --ds-color-brand1-3: #cae9d9;
382
+ --ds-color-brand1-4: #abdcc3;
383
+ --ds-color-brand1-5: #8ccfad;
384
+ --ds-color-brand1-6: #81cba5;
385
+ --ds-color-brand1-7: #548c6f;
386
+ --ds-color-brand1-8: #325443;
387
+ --ds-color-brand1-9: #76c69d;
388
+ --ds-color-brand1-10: #68af8a;
389
+ --ds-color-brand1-11: #5a9878;
390
+ --ds-color-brand1-12: #406b55;
391
+ --ds-color-brand1-13: #1d3026;
392
+ --ds-color-brand1-contrast-1: #000000;
393
+ --ds-color-brand1-contrast-2: #182720;
394
+ --ds-color-brand1-background-default: var(--ds-color-brand1-1);
395
+ --ds-color-brand1-background-subtle: var(--ds-color-brand1-2);
396
+ --ds-color-brand1-surface-default: var(--ds-color-brand1-3);
397
+ --ds-color-brand1-surface-hover: var(--ds-color-brand1-4);
398
+ --ds-color-brand1-surface-active: var(--ds-color-brand1-5);
399
+ --ds-color-brand1-border-subtle: var(--ds-color-brand1-6);
400
+ --ds-color-brand1-border-default: var(--ds-color-brand1-7);
401
+ --ds-color-brand1-border-strong: var(--ds-color-brand1-8);
402
+ --ds-color-brand1-base-default: var(--ds-color-brand1-9);
403
+ --ds-color-brand1-base-hover: var(--ds-color-brand1-10);
404
+ --ds-color-brand1-base-active: var(--ds-color-brand1-11);
405
+ --ds-color-brand1-text-subtle: var(--ds-color-brand1-12);
406
+ --ds-color-brand1-text-default: var(--ds-color-brand1-13);
407
+ --ds-color-brand1-contrast-default: var(--ds-color-brand1-contrast-1);
408
+ --ds-color-brand1-contrast-subtle: var(--ds-color-brand1-contrast-2);
409
+ --ds-color-brand2-1: #fefeff;
410
+ --ds-color-brand2-2: #ecf3f8;
411
+ --ds-color-brand2-3: #d5e4f0;
412
+ --ds-color-brand2-4: #bdd4e7;
413
+ --ds-color-brand2-5: #aec3d4;
414
+ --ds-color-brand2-6: #a9bece;
415
+ --ds-color-brand2-7: #74838e;
416
+ --ds-color-brand2-8: #464e55;
417
+ --ds-color-brand2-9: #bed5e8;
418
+ --ds-color-brand2-10: #a9bece;
419
+ --ds-color-brand2-11: #96a8b7;
420
+ --ds-color-brand2-12: #5a646d;
421
+ --ds-color-brand2-13: #282d31;
422
+ --ds-color-brand2-contrast-1: #000000;
423
+ --ds-color-brand2-contrast-2: #33393f;
424
+ --ds-color-brand2-background-default: var(--ds-color-brand2-1);
425
+ --ds-color-brand2-background-subtle: var(--ds-color-brand2-2);
426
+ --ds-color-brand2-surface-default: var(--ds-color-brand2-3);
427
+ --ds-color-brand2-surface-hover: var(--ds-color-brand2-4);
428
+ --ds-color-brand2-surface-active: var(--ds-color-brand2-5);
429
+ --ds-color-brand2-border-subtle: var(--ds-color-brand2-6);
430
+ --ds-color-brand2-border-default: var(--ds-color-brand2-7);
431
+ --ds-color-brand2-border-strong: var(--ds-color-brand2-8);
432
+ --ds-color-brand2-base-default: var(--ds-color-brand2-9);
433
+ --ds-color-brand2-base-hover: var(--ds-color-brand2-10);
434
+ --ds-color-brand2-base-active: var(--ds-color-brand2-11);
435
+ --ds-color-brand2-text-subtle: var(--ds-color-brand2-12);
436
+ --ds-color-brand2-text-default: var(--ds-color-brand2-13);
437
+ --ds-color-brand2-contrast-default: var(--ds-color-brand2-contrast-1);
438
+ --ds-color-brand2-contrast-subtle: var(--ds-color-brand2-contrast-2);
439
+ --ds-color-brand3-1: #fffefd;
440
+ --ds-color-brand3-2: #f8f2ea;
441
+ --ds-color-brand3-3: #efe0cc;
442
+ --ds-color-brand3-4: #e5ceae;
443
+ --ds-color-brand3-5: #d2bd9f;
444
+ --ds-color-brand3-6: #cdb99c;
445
+ --ds-color-brand3-7: #8e7f6c;
446
+ --ds-color-brand3-8: #554c41;
447
+ --ds-color-brand3-9: #e5ceae;
448
+ --ds-color-brand3-10: #cdb99c;
449
+ --ds-color-brand3-11: #b5a38a;
450
+ --ds-color-brand3-12: #6c6252;
451
+ --ds-color-brand3-13: #302b25;
452
+ --ds-color-brand3-contrast-1: #000000;
453
+ --ds-color-brand3-contrast-2: #3f3830;
454
+ --ds-color-brand3-background-default: var(--ds-color-brand3-1);
455
+ --ds-color-brand3-background-subtle: var(--ds-color-brand3-2);
456
+ --ds-color-brand3-surface-default: var(--ds-color-brand3-3);
457
+ --ds-color-brand3-surface-hover: var(--ds-color-brand3-4);
458
+ --ds-color-brand3-surface-active: var(--ds-color-brand3-5);
459
+ --ds-color-brand3-border-subtle: var(--ds-color-brand3-6);
460
+ --ds-color-brand3-border-default: var(--ds-color-brand3-7);
461
+ --ds-color-brand3-border-strong: var(--ds-color-brand3-8);
462
+ --ds-color-brand3-base-default: var(--ds-color-brand3-9);
463
+ --ds-color-brand3-base-hover: var(--ds-color-brand3-10);
464
+ --ds-color-brand3-base-active: var(--ds-color-brand3-11);
465
+ --ds-color-brand3-text-subtle: var(--ds-color-brand3-12);
466
+ --ds-color-brand3-text-default: var(--ds-color-brand3-13);
467
+ --ds-color-brand3-contrast-default: var(--ds-color-brand3-contrast-1);
468
+ --ds-color-brand3-contrast-subtle: var(--ds-color-brand3-contrast-2);
469
+ --ds-color-success-background-default: var(--ds-global-green-1);
470
+ --ds-color-success-background-subtle: var(--ds-global-green-2);
471
+ --ds-color-success-surface-default: var(--ds-global-green-3);
472
+ --ds-color-success-surface-hover: var(--ds-global-green-4);
473
+ --ds-color-success-surface-active: var(--ds-global-green-5);
474
+ --ds-color-success-border-subtle: var(--ds-global-green-6);
475
+ --ds-color-success-border-default: var(--ds-global-green-7);
476
+ --ds-color-success-border-strong: var(--ds-global-green-8);
477
+ --ds-color-success-base-default: var(--ds-global-green-9);
478
+ --ds-color-success-base-hover: var(--ds-global-green-10);
479
+ --ds-color-success-base-active: var(--ds-global-green-11);
480
+ --ds-color-success-text-subtle: var(--ds-global-green-12);
481
+ --ds-color-success-text-default: var(--ds-global-green-13);
482
+ --ds-color-success-contrast-default: var(--ds-global-green-contrast-1);
483
+ --ds-color-success-contrast-subtle: var(--ds-global-green-contrast-2);
484
+ --ds-color-danger-background-default: var(--ds-global-red-1);
485
+ --ds-color-danger-background-subtle: var(--ds-global-red-2);
486
+ --ds-color-danger-surface-default: var(--ds-global-red-3);
487
+ --ds-color-danger-surface-hover: var(--ds-global-red-4);
488
+ --ds-color-danger-surface-active: var(--ds-global-red-5);
489
+ --ds-color-danger-border-subtle: var(--ds-global-red-6);
490
+ --ds-color-danger-border-default: var(--ds-global-red-7);
491
+ --ds-color-danger-border-strong: var(--ds-global-red-8);
492
+ --ds-color-danger-base-default: var(--ds-global-red-9);
493
+ --ds-color-danger-base-hover: var(--ds-global-red-10);
494
+ --ds-color-danger-base-active: var(--ds-global-red-11);
495
+ --ds-color-danger-text-subtle: var(--ds-global-red-12);
496
+ --ds-color-danger-text-default: var(--ds-global-red-13);
497
+ --ds-color-danger-contrast-default: var(--ds-global-red-contrast-1);
498
+ --ds-color-danger-contrast-subtle: var(--ds-global-red-contrast-2);
499
+ --ds-color-info-background-default: #fefeff;
500
+ --ds-color-info-background-subtle: #edf5fa;
501
+ --ds-color-info-surface-default: #d3e5f4;
502
+ --ds-color-info-surface-hover: #b7d5ed;
503
+ --ds-color-info-surface-active: #9bc5e5;
504
+ --ds-color-info-border-subtle: #94c1e3;
505
+ --ds-color-info-border-default: #2f86c9;
506
+ --ds-color-info-border-strong: #075089;
507
+ --ds-color-info-base-default: #0A71C0;
508
+ --ds-color-info-base-hover: #085ea0;
509
+ --ds-color-info-base-active: #074b80;
510
+ --ds-color-info-text-subtle: #0966ac;
511
+ --ds-color-info-text-default: #042d4d;
512
+ --ds-color-info-contrast-default: #ffffff;
513
+ --ds-color-info-contrast-subtle: #f3f8fc;
514
+ --ds-color-warning-background-default: var(--ds-global-yellow-1);
515
+ --ds-color-warning-background-subtle: var(--ds-global-yellow-2);
516
+ --ds-color-warning-surface-default: var(--ds-global-yellow-3);
517
+ --ds-color-warning-surface-hover: var(--ds-global-yellow-4);
518
+ --ds-color-warning-surface-active: var(--ds-global-yellow-5);
519
+ --ds-color-warning-border-subtle: var(--ds-global-yellow-6);
520
+ --ds-color-warning-border-default: var(--ds-global-yellow-7);
521
+ --ds-color-warning-border-strong: var(--ds-global-yellow-8);
522
+ --ds-color-warning-base-default: var(--ds-global-orange-9);
523
+ --ds-color-warning-base-hover: var(--ds-global-orange-10);
524
+ --ds-color-warning-base-active: var(--ds-global-orange-11);
525
+ --ds-color-warning-text-subtle: var(--ds-global-orange-12);
526
+ --ds-color-warning-text-default: var(--ds-global-orange-13);
527
+ --ds-color-warning-contrast-default: var(--ds-global-orange-contrast-1);
528
+ --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2);
529
+ --ds-color-focus-inner: #fefefe;
530
+ --ds-color-focus-outer: #2c2c2c;
531
+ --ds-global-blue-1: #fefeff;
532
+ --ds-global-blue-2: #edf5fa;
533
+ --ds-global-blue-3: #d3e5f4;
534
+ --ds-global-blue-4: #b7d5ed;
535
+ --ds-global-blue-5: #9bc5e5;
536
+ --ds-global-blue-6: #94c1e3;
537
+ --ds-global-blue-7: #2f86c9;
538
+ --ds-global-blue-8: #075089;
539
+ --ds-global-blue-9: #0A71C0;
540
+ --ds-global-blue-10: #085ea0;
541
+ --ds-global-blue-11: #074b80;
542
+ --ds-global-blue-12: #0966ac;
543
+ --ds-global-blue-13: #042d4d;
544
+ --ds-global-blue-contrast-1: #ffffff;
545
+ --ds-global-blue-contrast-2: #f3f8fc;
546
+ --ds-global-green-1: #fcfefc;
547
+ --ds-global-green-2: #edf6ee;
548
+ --ds-global-green-3: #d1e9d4;
549
+ --ds-global-green-4: #b5dbba;
550
+ --ds-global-green-5: #96cd9e;
551
+ --ds-global-green-6: #8fc997;
552
+ --ds-global-green-7: #229532;
553
+ --ds-global-green-8: #045a10;
554
+ --ds-global-green-9: #068718;
555
+ --ds-global-green-10: #057114;
556
+ --ds-global-green-11: #045a10;
557
+ --ds-global-green-12: #057315;
558
+ --ds-global-green-13: #023409;
559
+ --ds-global-green-contrast-1: #ffffff;
560
+ --ds-global-green-contrast-2: #f9fcf9;
561
+ --ds-global-orange-1: #fffefe;
562
+ --ds-global-orange-2: #f9f2ed;
563
+ --ds-global-orange-3: #f1ded3;
564
+ --ds-global-orange-4: #e9cbb8;
565
+ --ds-global-orange-5: #e1b9a0;
566
+ --ds-global-orange-6: #deb296;
567
+ --ds-global-orange-7: #c06b36;
568
+ --ds-global-orange-8: #7c3b14;
569
+ --ds-global-orange-9: #B8581D;
570
+ --ds-global-orange-10: #9a4918;
571
+ --ds-global-orange-11: #7c3b14;
572
+ --ds-global-orange-12: #9e4b19;
573
+ --ds-global-orange-13: #47220b;
574
+ --ds-global-orange-contrast-1: #ffffff;
575
+ --ds-global-orange-contrast-2: #fdfbf9;
576
+ --ds-global-purple-1: #fefefe;
577
+ --ds-global-purple-2: #f5f2f9;
578
+ --ds-global-purple-3: #e7dfef;
579
+ --ds-global-purple-4: #d9cce6;
580
+ --ds-global-purple-5: #ccbadd;
581
+ --ds-global-purple-6: #c7b4da;
582
+ --ds-global-purple-7: #9572b9;
583
+ --ds-global-purple-8: #663399;
584
+ --ds-global-purple-9: #663299;
585
+ --ds-global-purple-10: #4f2777;
586
+ --ds-global-purple-11: #381b54;
587
+ --ds-global-purple-12: #7b4ea7;
588
+ --ds-global-purple-13: #3b1d59;
589
+ --ds-global-purple-contrast-1: #ffffff;
590
+ --ds-global-purple-contrast-2: #eee8f3;
591
+ --ds-global-red-1: #fffefe;
592
+ --ds-global-red-2: #fbf1f1;
593
+ --ds-global-red-3: #f5dcdc;
594
+ --ds-global-red-4: #f0c7c7;
595
+ --ds-global-red-5: #eab3b3;
596
+ --ds-global-red-6: #e8acac;
597
+ --ds-global-red-7: #d25b5b;
598
+ --ds-global-red-8: #9a1616;
599
+ --ds-global-red-9: #C01B1B;
600
+ --ds-global-red-10: #9a1616;
601
+ --ds-global-red-11: #771111;
602
+ --ds-global-red-12: #c22020;
603
+ --ds-global-red-13: #5a0d0d;
604
+ --ds-global-red-contrast-1: #ffffff;
605
+ --ds-global-red-contrast-2: #f6dfdf;
606
+ --ds-global-yellow-1: #fffefc;
607
+ --ds-global-yellow-2: #fbf2d3;
608
+ --ds-global-yellow-3: #f5e19b;
609
+ --ds-global-yellow-4: #efcf5d;
610
+ --ds-global-yellow-5: #e6bc27;
611
+ --ds-global-yellow-6: #e0b726;
612
+ --ds-global-yellow-7: #9a7e1a;
613
+ --ds-global-yellow-8: #5d4c10;
614
+ --ds-global-yellow-9: #EABF28;
615
+ --ds-global-yellow-10: #d0aa24;
616
+ --ds-global-yellow-11: #b7951f;
617
+ --ds-global-yellow-12: #776114;
618
+ --ds-global-yellow-13: #352b09;
619
+ --ds-global-yellow-contrast-1: #000000;
620
+ --ds-global-yellow-contrast-2: #382d0a;
621
+
622
+ color-scheme: light;
623
+ }
624
+
625
+ }
626
+
627
+ }
628
+
629
+ /**
630
+ * These files are generated from design tokens defind using Token Studio
631
+ */
632
+
633
+ @layer ds.theme.typography.secondary {
634
+ [data-ds-typography="secondary"] {
635
+ --ds-font-family: Inter;
636
+ --ds-font-weight-medium: 500;
637
+ --ds-font-weight-semibold: 600;
638
+ --ds-font-weight-regular: 400;
639
+ --ds-heading-2xl-font-weight: 500;
640
+ --ds-heading-2xl-line-height: 1.3;
641
+ --ds-heading-2xl-font-size: 3.75rem;
642
+ --ds-heading-2xl-letter-spacing: -1%;
643
+ --ds-heading-xl-font-weight: 500;
644
+ --ds-heading-xl-line-height: 1.3;
645
+ --ds-heading-xl-font-size: 3rem;
646
+ --ds-heading-xl-letter-spacing: -1%;
647
+ --ds-heading-lg-font-weight: 500;
648
+ --ds-heading-lg-line-height: 1.3;
649
+ --ds-heading-lg-font-size: 2.25rem;
650
+ --ds-heading-lg-letter-spacing: -0.5%;
651
+ --ds-heading-md-font-weight: 500;
652
+ --ds-heading-md-line-height: 1.3;
653
+ --ds-heading-md-font-size: 1.875rem;
654
+ --ds-heading-md-letter-spacing: -0.25%;
655
+ --ds-heading-sm-font-weight: 500;
656
+ --ds-heading-sm-line-height: 1.3;
657
+ --ds-heading-sm-font-size: 1.5rem;
658
+ --ds-heading-sm-letter-spacing: 0%;
659
+ --ds-heading-xs-font-weight: 500;
660
+ --ds-heading-xs-line-height: 1.3;
661
+ --ds-heading-xs-font-size: 1.3125rem;
662
+ --ds-heading-xs-letter-spacing: 0.15%;
663
+ --ds-heading-2xs-font-weight: 500;
664
+ --ds-heading-2xs-line-height: 1.3;
665
+ --ds-heading-2xs-font-size: 1.125rem;
666
+ --ds-heading-2xs-letter-spacing: 0.15%;
667
+ --ds-body-xl-font-weight: 400;
668
+ --ds-body-xl-line-height: 1.5;
669
+ --ds-body-xl-font-size: 1.5rem;
670
+ --ds-body-xl-letter-spacing: 0.5%;
671
+ --ds-body-lg-font-weight: 400;
672
+ --ds-body-lg-line-height: 1.5;
673
+ --ds-body-lg-font-size: 1.3125rem;
674
+ --ds-body-lg-letter-spacing: 0.5%;
675
+ --ds-body-md-font-weight: 400;
676
+ --ds-body-md-line-height: 1.5;
677
+ --ds-body-md-font-size: 1.125rem;
678
+ --ds-body-md-letter-spacing: 0.5%;
679
+ --ds-body-sm-font-weight: 400;
680
+ --ds-body-sm-line-height: 1.5;
681
+ --ds-body-sm-font-size: 1rem;
682
+ --ds-body-sm-letter-spacing: 0.25%;
683
+ --ds-body-xs-font-weight: 400;
684
+ --ds-body-xs-line-height: 1.5;
685
+ --ds-body-xs-font-size: 0.875rem;
686
+ --ds-body-xs-letter-spacing: 0.15%;
687
+ --ds-body-short-xl-font-weight: 400;
688
+ --ds-body-short-xl-line-height: 1.3;
689
+ --ds-body-short-xl-font-size: 1.5rem;
690
+ --ds-body-short-xl-letter-spacing: 0.5%;
691
+ --ds-body-short-lg-font-weight: 400;
692
+ --ds-body-short-lg-line-height: 1.3;
693
+ --ds-body-short-lg-font-size: 1.3125rem;
694
+ --ds-body-short-lg-letter-spacing: 0.5%;
695
+ --ds-body-short-md-font-weight: 400;
696
+ --ds-body-short-md-line-height: 1.3;
697
+ --ds-body-short-md-font-size: 1.125rem;
698
+ --ds-body-short-md-letter-spacing: 0.5%;
699
+ --ds-body-short-sm-font-weight: 400;
700
+ --ds-body-short-sm-line-height: 1.3;
701
+ --ds-body-short-sm-font-size: 1rem;
702
+ --ds-body-short-sm-letter-spacing: 0.25%;
703
+ --ds-body-short-xs-font-weight: 400;
704
+ --ds-body-short-xs-line-height: 1.3;
705
+ --ds-body-short-xs-font-size: 0.875rem;
706
+ --ds-body-short-xs-letter-spacing: 0.15%;
707
+ --ds-body-long-xl-font-weight: 400;
708
+ --ds-body-long-xl-line-height: 1.7;
709
+ --ds-body-long-xl-font-size: 1.5rem;
710
+ --ds-body-long-xl-letter-spacing: 0.5%;
711
+ --ds-body-long-lg-font-weight: 400;
712
+ --ds-body-long-lg-line-height: 1.7;
713
+ --ds-body-long-lg-font-size: 1.3125rem;
714
+ --ds-body-long-lg-letter-spacing: 0.5%;
715
+ --ds-body-long-md-font-weight: 400;
716
+ --ds-body-long-md-line-height: 1.7;
717
+ --ds-body-long-md-font-size: 1.125rem;
718
+ --ds-body-long-md-letter-spacing: 0.5%;
719
+ --ds-body-long-sm-font-weight: 400;
720
+ --ds-body-long-sm-line-height: 1.7;
721
+ --ds-body-long-sm-font-size: 1rem;
722
+ --ds-body-long-sm-letter-spacing: 0.25%;
723
+ --ds-body-long-xs-font-weight: 400;
724
+ --ds-body-long-xs-line-height: 1.7;
725
+ --ds-body-long-xs-font-size: 0.875rem;
726
+ --ds-body-long-xs-letter-spacing: 0.15%;
727
+ --ds-label-lg-font-weight: 500;
728
+ --ds-label-lg-line-height: 1.3;
729
+ --ds-label-lg-font-size: 1.3125rem;
730
+ --ds-label-lg-letter-spacing: 0.5%;
731
+ --ds-label-md-font-weight: 500;
732
+ --ds-label-md-line-height: 1.3;
733
+ --ds-label-md-font-size: 1.125rem;
734
+ --ds-label-md-letter-spacing: 0.5%;
735
+ --ds-label-sm-font-weight: 500;
736
+ --ds-label-sm-line-height: 1.3;
737
+ --ds-label-sm-font-size: 1rem;
738
+ --ds-label-sm-letter-spacing: 0.25%;
739
+ --ds-label-xs-font-weight: 500;
740
+ --ds-label-xs-line-height: 1.3;
741
+ --ds-label-xs-font-size: 0.875rem;
742
+ --ds-label-xs-letter-spacing: 0.15%;
743
+ --ds-error_message-lg-font-weight: 400;
744
+ --ds-error_message-lg-line-height: 1.3;
745
+ --ds-error_message-lg-font-size: 1.3125rem;
746
+ --ds-error_message-lg-letter-spacing: 0.5%;
747
+ --ds-error_message-md-font-weight: 400;
748
+ --ds-error_message-md-line-height: 1.3;
749
+ --ds-error_message-md-font-size: 1.125rem;
750
+ --ds-error_message-md-letter-spacing: 0.5%;
751
+ --ds-error_message-sm-font-weight: 400;
752
+ --ds-error_message-sm-line-height: 1.3;
753
+ --ds-error_message-sm-font-size: 1rem;
754
+ --ds-error_message-sm-letter-spacing: 0.25%;
755
+ --ds-error_message-xs-font-weight: 400;
756
+ --ds-error_message-xs-line-height: 1.3;
757
+ --ds-error_message-xs-font-size: 0.875rem;
758
+ --ds-error_message-xs-letter-spacing: 0.15%;
759
+ --ds-line-height-sm: 1.3;
760
+ --ds-line-height-md: 1.5;
761
+ --ds-line-height-lg: 1.7;
762
+ --ds-font-size-1: 0.75rem;
763
+ --ds-font-size-2: 0.8125rem;
764
+ --ds-font-size-3: 0.875rem;
765
+ --ds-font-size-4: 1rem;
766
+ --ds-font-size-5: 1.125rem;
767
+ --ds-font-size-6: 1.3125rem;
768
+ --ds-font-size-7: 1.5rem;
769
+ --ds-font-size-8: 1.875rem;
770
+ --ds-font-size-9: 2.25rem;
771
+ --ds-font-size-10: 3rem;
772
+ --ds-font-size-11: 3.75rem;
773
+ --ds-letter-spacing-1: -1%;
774
+ --ds-letter-spacing-2: -0.5%;
775
+ --ds-letter-spacing-3: -0.25%;
776
+ --ds-letter-spacing-4: -0.15%;
777
+ --ds-letter-spacing-5: 0%;
778
+ --ds-letter-spacing-6: 0.15%;
779
+ --ds-letter-spacing-7: 0.25%;
780
+ --ds-letter-spacing-8: 0.5%;
781
+ --ds-letter-spacing-9: 1.5%;
782
+ --ds-udir-main: Inter;
783
+ --ds-udir-bold: 500;
784
+ --ds-udir-extra-bold: 600;
785
+ --ds-udir-regular: 400;
786
+ }
787
+ }
788
+ /**
789
+ * These files are generated from design tokens defind using Token Studio
790
+ */
791
+
792
+ @layer ds.theme.semantic {
793
+ :root {
794
+ --ds-disabled-opacity: 30%;
795
+ --ds-border-radius-sm: calc(var(--ds-border-radius-base)*0.5);
796
+ --ds-border-radius-md: calc(var(--ds-border-radius-base)*1);
797
+ --ds-border-radius-lg: calc(var(--ds-border-radius-base)*2);
798
+ --ds-border-radius-xl: calc(var(--ds-border-radius-base)*3);
799
+ --ds-border-radius-2xl: calc(var(--ds-border-radius-base)*4);
800
+ --ds-border-radius-3xl: calc(var(--ds-border-radius-base)*6);
801
+ --ds-border-radius-4xl: calc(var(--ds-border-radius-base)*8);
802
+ --ds-border-radius-full: 624.9375rem;
803
+ --ds-border-radius-base: 0.25rem;
804
+ --ds-spacing-0: calc(var(--ds-spacing-base)*0);
805
+ --ds-spacing-1: calc(var(--ds-spacing-base)*1);
806
+ --ds-spacing-2: calc(var(--ds-spacing-base)*2);
807
+ --ds-spacing-3: calc(var(--ds-spacing-base)*3);
808
+ --ds-spacing-4: calc(var(--ds-spacing-base)*4);
809
+ --ds-spacing-5: calc(var(--ds-spacing-base)*5);
810
+ --ds-spacing-6: calc(var(--ds-spacing-base)*6);
811
+ --ds-spacing-7: calc(var(--ds-spacing-base)*7);
812
+ --ds-spacing-8: calc(var(--ds-spacing-base)*8);
813
+ --ds-spacing-9: calc(var(--ds-spacing-base)*9);
814
+ --ds-spacing-10: calc(var(--ds-spacing-base)*10);
815
+ --ds-spacing-11: calc(var(--ds-spacing-base)*11);
816
+ --ds-spacing-12: calc(var(--ds-spacing-base)*12);
817
+ --ds-spacing-13: calc(var(--ds-spacing-base)*13);
818
+ --ds-spacing-14: calc(var(--ds-spacing-base)*14);
819
+ --ds-spacing-15: calc(var(--ds-spacing-base)*15);
820
+ --ds-spacing-18: calc(var(--ds-spacing-base)*18);
821
+ --ds-spacing-22: calc(var(--ds-spacing-base)*22);
822
+ --ds-spacing-26: calc(var(--ds-spacing-base)*26);
823
+ --ds-spacing-30: calc(var(--ds-spacing-base)*30);
824
+ --ds-spacing-base: 0.25rem;
825
+ --ds-sizing-0: calc(var(--ds-sizing-base)*0);
826
+ --ds-sizing-1: calc(var(--ds-sizing-base)*1);
827
+ --ds-sizing-2: calc(var(--ds-sizing-base)*2);
828
+ --ds-sizing-3: calc(var(--ds-sizing-base)*3);
829
+ --ds-sizing-4: calc(var(--ds-sizing-base)*4);
830
+ --ds-sizing-5: calc(var(--ds-sizing-base)*5);
831
+ --ds-sizing-6: calc(var(--ds-sizing-base)*6);
832
+ --ds-sizing-7: calc(var(--ds-sizing-base)*7);
833
+ --ds-sizing-8: calc(var(--ds-sizing-base)*8);
834
+ --ds-sizing-9: calc(var(--ds-sizing-base)*9);
835
+ --ds-sizing-10: calc(var(--ds-sizing-base)*10);
836
+ --ds-sizing-11: calc(var(--ds-sizing-base)*11);
837
+ --ds-sizing-12: calc(var(--ds-sizing-base)*12);
838
+ --ds-sizing-13: calc(var(--ds-sizing-base)*13);
839
+ --ds-sizing-14: calc(var(--ds-sizing-base)*14);
840
+ --ds-sizing-15: calc(var(--ds-sizing-base)*15);
841
+ --ds-sizing-18: calc(var(--ds-sizing-base)*18);
842
+ --ds-sizing-22: calc(var(--ds-sizing-base)*22);
843
+ --ds-sizing-26: calc(var(--ds-sizing-base)*26);
844
+ --ds-sizing-30: calc(var(--ds-sizing-base)*30);
845
+ --ds-sizing-base: 0.25rem;
846
+ --ds-border-width-default: 1px;
847
+ --ds-border-width-highlight: 2px;
848
+ --ds-shadow-xs: 0 0 1px 0 rgba(0,0,0,0.16), 0 1px 2px 0 rgba(0,0,0,0.12);
849
+ --ds-shadow-sm: 0 0 1px 0 rgba(0,0,0,0.15), 0 1px 2px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.1);
850
+ --ds-shadow-md: 0 0 1px 0 rgba(0,0,0,0.14), 0 2px 4px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.12);
851
+ --ds-shadow-lg: 0 0 1px 0 rgba(0,0,0,0.13), 0 3px 5px 0 rgba(0,0,0,0.13), 0 6px 12px 0 rgba(0,0,0,0.14);
852
+ --ds-shadow-xl: 0 0 1px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.16), 0 12px 24px 0 rgba(0,0,0,0.16);
853
+ }
854
+
855
+ }
856
+
857
+ /**
858
+ * These files are generated from design tokens defind using Token Studio
859
+ */
860
+
861
+ @layer ds.theme.color-mode.dark {
862
+ [data-ds-color-mode="dark"] {
863
+ --ds-color-accent-1: #1b1b1b;
864
+ --ds-color-accent-2: #242424;
865
+ --ds-color-accent-3: #303030;
866
+ --ds-color-accent-4: #3e3e3e;
867
+ --ds-color-accent-5: #4b4b4b;
868
+ --ds-color-accent-6: #525252;
869
+ --ds-color-accent-7: #6f6f6f;
870
+ --ds-color-accent-8: #bebebe;
871
+ --ds-color-accent-9: #ababab;
872
+ --ds-color-accent-10: #969696;
873
+ --ds-color-accent-11: #818181;
874
+ --ds-color-accent-12: #a3a3a3;
875
+ --ds-color-accent-13: #e1e1e1;
876
+ --ds-color-accent-contrast-1: #000000;
877
+ --ds-color-accent-contrast-2: #1b1b1b;
878
+ --ds-color-accent-background-default: var(--ds-color-accent-1);
879
+ --ds-color-accent-background-subtle: var(--ds-color-accent-2);
880
+ --ds-color-accent-surface-default: var(--ds-color-accent-3);
881
+ --ds-color-accent-surface-hover: var(--ds-color-accent-4);
882
+ --ds-color-accent-surface-active: var(--ds-color-accent-5);
883
+ --ds-color-accent-border-subtle: var(--ds-color-accent-6);
884
+ --ds-color-accent-border-default: var(--ds-color-accent-7);
885
+ --ds-color-accent-border-strong: var(--ds-color-accent-8);
886
+ --ds-color-accent-base-default: var(--ds-color-accent-9);
887
+ --ds-color-accent-base-hover: var(--ds-color-accent-10);
888
+ --ds-color-accent-base-active: var(--ds-color-accent-11);
889
+ --ds-color-accent-text-subtle: var(--ds-color-accent-12);
890
+ --ds-color-accent-text-default: var(--ds-color-accent-13);
891
+ --ds-color-accent-contrast-default: var(--ds-color-accent-contrast-1);
892
+ --ds-color-accent-contrast-subtle: var(--ds-color-accent-contrast-2);
893
+ --ds-color-neutral-1: #1b1b1b;
894
+ --ds-color-neutral-2: #242424;
895
+ --ds-color-neutral-3: #303030;
896
+ --ds-color-neutral-4: #3e3e3e;
897
+ --ds-color-neutral-5: #4b4b4b;
898
+ --ds-color-neutral-6: #525252;
899
+ --ds-color-neutral-7: #6f6f6f;
900
+ --ds-color-neutral-8: #bebebe;
901
+ --ds-color-neutral-9: #1f1f1f;
902
+ --ds-color-neutral-10: #303030;
903
+ --ds-color-neutral-11: #424242;
904
+ --ds-color-neutral-12: #a3a3a3;
905
+ --ds-color-neutral-13: #e1e1e1;
906
+ --ds-color-neutral-contrast-1: #ffffff;
907
+ --ds-color-neutral-contrast-2: #b0b0b0;
908
+ --ds-color-neutral-background-default: var(--ds-color-neutral-1);
909
+ --ds-color-neutral-background-subtle: var(--ds-color-neutral-2);
910
+ --ds-color-neutral-surface-default: var(--ds-color-neutral-3);
911
+ --ds-color-neutral-surface-hover: var(--ds-color-neutral-4);
912
+ --ds-color-neutral-surface-active: var(--ds-color-neutral-5);
913
+ --ds-color-neutral-border-subtle: var(--ds-color-neutral-6);
914
+ --ds-color-neutral-border-default: var(--ds-color-neutral-7);
915
+ --ds-color-neutral-border-strong: var(--ds-color-neutral-8);
916
+ --ds-color-neutral-base-default: var(--ds-color-neutral-9);
917
+ --ds-color-neutral-base-hover: var(--ds-color-neutral-10);
918
+ --ds-color-neutral-base-active: var(--ds-color-neutral-11);
919
+ --ds-color-neutral-text-subtle: var(--ds-color-neutral-12);
920
+ --ds-color-neutral-text-default: var(--ds-color-neutral-13);
921
+ --ds-color-neutral-contrast-default: var(--ds-color-neutral-contrast-1);
922
+ --ds-color-neutral-contrast-subtle: var(--ds-color-neutral-contrast-2);
923
+ --ds-color-brand1-1: #121e18;
924
+ --ds-color-brand1-2: #18271f;
925
+ --ds-color-brand1-3: #1f342a;
926
+ --ds-color-brand1-4: #284336;
927
+ --ds-color-brand1-5: #315241;
928
+ --ds-color-brand1-6: #355947;
929
+ --ds-color-brand1-7: #487960;
930
+ --ds-color-brand1-8: #86cda9;
931
+ --ds-color-brand1-9: #284336;
932
+ --ds-color-brand1-10: #345745;
933
+ --ds-color-brand1-11: #406b55;
934
+ --ds-color-brand1-12: #6ab28d;
935
+ --ds-color-brand1-13: #cae9d9;
936
+ --ds-color-brand1-contrast-1: #ffffff;
937
+ --ds-color-brand1-contrast-2: #d3d8d6;
938
+ --ds-color-brand1-background-default: var(--ds-color-brand1-1);
939
+ --ds-color-brand1-background-subtle: var(--ds-color-brand1-2);
940
+ --ds-color-brand1-surface-default: var(--ds-color-brand1-3);
941
+ --ds-color-brand1-surface-hover: var(--ds-color-brand1-4);
942
+ --ds-color-brand1-surface-active: var(--ds-color-brand1-5);
943
+ --ds-color-brand1-border-subtle: var(--ds-color-brand1-6);
944
+ --ds-color-brand1-border-default: var(--ds-color-brand1-7);
945
+ --ds-color-brand1-border-strong: var(--ds-color-brand1-8);
946
+ --ds-color-brand1-base-default: var(--ds-color-brand1-9);
947
+ --ds-color-brand1-base-hover: var(--ds-color-brand1-10);
948
+ --ds-color-brand1-base-active: var(--ds-color-brand1-11);
949
+ --ds-color-brand1-text-subtle: var(--ds-color-brand1-12);
950
+ --ds-color-brand1-text-default: var(--ds-color-brand1-13);
951
+ --ds-color-brand1-contrast-default: var(--ds-color-brand1-contrast-1);
952
+ --ds-color-brand1-contrast-subtle: var(--ds-color-brand1-contrast-2);
953
+ --ds-color-brand2-1: #191c1f;
954
+ --ds-color-brand2-2: #202428;
955
+ --ds-color-brand2-3: #2b3135;
956
+ --ds-color-brand2-4: #383f44;
957
+ --ds-color-brand2-5: #444c53;
958
+ --ds-color-brand2-6: #4a535b;
959
+ --ds-color-brand2-7: #65717b;
960
+ --ds-color-brand2-8: #acc1d2;
961
+ --ds-color-brand2-9: #24282b;
962
+ --ds-color-brand2-10: #33393f;
963
+ --ds-color-brand2-11: #444c53;
964
+ --ds-color-brand2-12: #93a5b4;
965
+ --ds-color-brand2-13: #d5e4f0;
966
+ --ds-color-brand2-contrast-1: #ffffff;
967
+ --ds-color-brand2-contrast-2: #babbbc;
968
+ --ds-color-brand2-background-default: var(--ds-color-brand2-1);
969
+ --ds-color-brand2-background-subtle: var(--ds-color-brand2-2);
970
+ --ds-color-brand2-surface-default: var(--ds-color-brand2-3);
971
+ --ds-color-brand2-surface-hover: var(--ds-color-brand2-4);
972
+ --ds-color-brand2-surface-active: var(--ds-color-brand2-5);
973
+ --ds-color-brand2-border-subtle: var(--ds-color-brand2-6);
974
+ --ds-color-brand2-border-default: var(--ds-color-brand2-7);
975
+ --ds-color-brand2-border-strong: var(--ds-color-brand2-8);
976
+ --ds-color-brand2-base-default: var(--ds-color-brand2-9);
977
+ --ds-color-brand2-base-hover: var(--ds-color-brand2-10);
978
+ --ds-color-brand2-base-active: var(--ds-color-brand2-11);
979
+ --ds-color-brand2-text-subtle: var(--ds-color-brand2-12);
980
+ --ds-color-brand2-text-default: var(--ds-color-brand2-13);
981
+ --ds-color-brand2-contrast-default: var(--ds-color-brand2-contrast-1);
982
+ --ds-color-brand2-contrast-subtle: var(--ds-color-brand2-contrast-2);
983
+ --ds-color-brand3-1: #1f1b17;
984
+ --ds-color-brand3-2: #27231e;
985
+ --ds-color-brand3-3: #353028;
986
+ --ds-color-brand3-4: #433c33;
987
+ --ds-color-brand3-5: #534a3f;
988
+ --ds-color-brand3-6: #5b5145;
989
+ --ds-color-brand3-7: #7a6d5c;
990
+ --ds-color-brand3-8: #d0bb9e;
991
+ --ds-color-brand3-9: #2c2721;
992
+ --ds-color-brand3-10: #3f3830;
993
+ --ds-color-brand3-11: #534a3f;
994
+ --ds-color-brand3-12: #b2a188;
995
+ --ds-color-brand3-13: #efe0cc;
996
+ --ds-color-brand3-contrast-1: #ffffff;
997
+ --ds-color-brand3-contrast-2: #bdbbb9;
998
+ --ds-color-brand3-background-default: var(--ds-color-brand3-1);
999
+ --ds-color-brand3-background-subtle: var(--ds-color-brand3-2);
1000
+ --ds-color-brand3-surface-default: var(--ds-color-brand3-3);
1001
+ --ds-color-brand3-surface-hover: var(--ds-color-brand3-4);
1002
+ --ds-color-brand3-surface-active: var(--ds-color-brand3-5);
1003
+ --ds-color-brand3-border-subtle: var(--ds-color-brand3-6);
1004
+ --ds-color-brand3-border-default: var(--ds-color-brand3-7);
1005
+ --ds-color-brand3-border-strong: var(--ds-color-brand3-8);
1006
+ --ds-color-brand3-base-default: var(--ds-color-brand3-9);
1007
+ --ds-color-brand3-base-hover: var(--ds-color-brand3-10);
1008
+ --ds-color-brand3-base-active: var(--ds-color-brand3-11);
1009
+ --ds-color-brand3-text-subtle: var(--ds-color-brand3-12);
1010
+ --ds-color-brand3-text-default: var(--ds-color-brand3-13);
1011
+ --ds-color-brand3-contrast-default: var(--ds-color-brand3-contrast-1);
1012
+ --ds-color-brand3-contrast-subtle: var(--ds-color-brand3-contrast-2);
1013
+ --ds-color-success-background-default: var(--ds-global-green-1);
1014
+ --ds-color-success-background-subtle: var(--ds-global-green-2);
1015
+ --ds-color-success-surface-default: var(--ds-global-green-3);
1016
+ --ds-color-success-surface-hover: var(--ds-global-green-4);
1017
+ --ds-color-success-surface-active: var(--ds-global-green-5);
1018
+ --ds-color-success-border-subtle: var(--ds-global-green-6);
1019
+ --ds-color-success-border-default: var(--ds-global-green-7);
1020
+ --ds-color-success-border-strong: var(--ds-global-green-8);
1021
+ --ds-color-success-base-default: var(--ds-global-green-9);
1022
+ --ds-color-success-base-hover: var(--ds-global-green-10);
1023
+ --ds-color-success-base-active: var(--ds-global-green-11);
1024
+ --ds-color-success-text-subtle: var(--ds-global-green-12);
1025
+ --ds-color-success-text-default: var(--ds-global-green-13);
1026
+ --ds-color-success-contrast-default: var(--ds-global-green-contrast-1);
1027
+ --ds-color-success-contrast-subtle: var(--ds-global-green-contrast-2);
1028
+ --ds-color-danger-background-default: var(--ds-global-red-1);
1029
+ --ds-color-danger-background-subtle: var(--ds-global-red-2);
1030
+ --ds-color-danger-surface-default: var(--ds-global-red-3);
1031
+ --ds-color-danger-surface-hover: var(--ds-global-red-4);
1032
+ --ds-color-danger-surface-active: var(--ds-global-red-5);
1033
+ --ds-color-danger-border-subtle: var(--ds-global-red-6);
1034
+ --ds-color-danger-border-default: var(--ds-global-red-7);
1035
+ --ds-color-danger-border-strong: var(--ds-global-red-8);
1036
+ --ds-color-danger-base-default: var(--ds-global-red-9);
1037
+ --ds-color-danger-base-hover: var(--ds-global-red-10);
1038
+ --ds-color-danger-base-active: var(--ds-global-red-11);
1039
+ --ds-color-danger-text-subtle: var(--ds-global-red-12);
1040
+ --ds-color-danger-text-default: var(--ds-global-red-13);
1041
+ --ds-color-danger-contrast-default: var(--ds-global-red-contrast-1);
1042
+ --ds-color-danger-contrast-subtle: var(--ds-global-red-contrast-2);
1043
+ --ds-color-info-background-default: #031d30;
1044
+ --ds-color-info-background-subtle: #032540;
1045
+ --ds-color-info-surface-default: #043256;
1046
+ --ds-color-info-surface-hover: #063f6c;
1047
+ --ds-color-info-surface-active: #074d84;
1048
+ --ds-color-info-border-subtle: #075490;
1049
+ --ds-color-info-border-default: #0c72c1;
1050
+ --ds-color-info-border-strong: #98c3e5;
1051
+ --ds-color-info-base-default: #2a84c8;
1052
+ --ds-color-info-base-hover: #0a6dba;
1053
+ --ds-color-info-base-active: #085998;
1054
+ --ds-color-info-text-subtle: #6ba9d9;
1055
+ --ds-color-info-text-default: #d3e5f4;
1056
+ --ds-color-info-contrast-default: #000000;
1057
+ --ds-color-info-contrast-subtle: #040c13;
1058
+ --ds-color-warning-background-default: var(--ds-global-yellow-1);
1059
+ --ds-color-warning-background-subtle: var(--ds-global-yellow-2);
1060
+ --ds-color-warning-surface-default: var(--ds-global-yellow-3);
1061
+ --ds-color-warning-surface-hover: var(--ds-global-yellow-4);
1062
+ --ds-color-warning-surface-active: var(--ds-global-yellow-5);
1063
+ --ds-color-warning-border-subtle: var(--ds-global-yellow-6);
1064
+ --ds-color-warning-border-default: var(--ds-global-yellow-7);
1065
+ --ds-color-warning-border-strong: var(--ds-global-yellow-8);
1066
+ --ds-color-warning-base-default: var(--ds-global-orange-9);
1067
+ --ds-color-warning-base-hover: var(--ds-global-orange-10);
1068
+ --ds-color-warning-base-active: var(--ds-global-orange-11);
1069
+ --ds-color-warning-text-subtle: var(--ds-global-orange-12);
1070
+ --ds-color-warning-text-default: var(--ds-global-orange-13);
1071
+ --ds-color-warning-contrast-default: var(--ds-global-orange-contrast-1);
1072
+ --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2);
1073
+ --ds-color-focus-inner: #1b1b1b;
1074
+ --ds-color-focus-outer: #e1e1e1;
1075
+ --ds-global-blue-1: #031d30;
1076
+ --ds-global-blue-2: #032540;
1077
+ --ds-global-blue-3: #043256;
1078
+ --ds-global-blue-4: #063f6c;
1079
+ --ds-global-blue-5: #074d84;
1080
+ --ds-global-blue-6: #075490;
1081
+ --ds-global-blue-7: #0c72c1;
1082
+ --ds-global-blue-8: #98c3e5;
1083
+ --ds-global-blue-9: #2a84c8;
1084
+ --ds-global-blue-10: #0a6dba;
1085
+ --ds-global-blue-11: #085998;
1086
+ --ds-global-blue-12: #6ba9d9;
1087
+ --ds-global-blue-13: #d3e5f4;
1088
+ --ds-global-blue-contrast-1: #000000;
1089
+ --ds-global-blue-contrast-2: #040c13;
1090
+ --ds-global-green-1: #012106;
1091
+ --ds-global-green-2: #022b08;
1092
+ --ds-global-green-3: #03380a;
1093
+ --ds-global-green-4: #03490d;
1094
+ --ds-global-green-5: #045810;
1095
+ --ds-global-green-6: #045f11;
1096
+ --ds-global-green-7: #068217;
1097
+ --ds-global-green-8: #93cb9b;
1098
+ --ds-global-green-9: #118c23;
1099
+ --ds-global-green-10: #057615;
1100
+ --ds-global-green-11: #045f11;
1101
+ --ds-global-green-12: #63b46f;
1102
+ --ds-global-green-13: #d1e9d4;
1103
+ --ds-global-green-contrast-1: #000000;
1104
+ --ds-global-green-contrast-2: #010401;
1105
+ --ds-global-orange-1: #2d1507;
1106
+ --ds-global-orange-2: #391b09;
1107
+ --ds-global-orange-3: #4e250c;
1108
+ --ds-global-orange-4: #633010;
1109
+ --ds-global-orange-5: #783a13;
1110
+ --ds-global-orange-6: #833f15;
1111
+ --ds-global-orange-7: #b2551c;
1112
+ --ds-global-orange-8: #e0b69c;
1113
+ --ds-global-orange-9: #bc6028;
1114
+ --ds-global-orange-10: #a24d1a;
1115
+ --ds-global-orange-11: #833f15;
1116
+ --ds-global-orange-12: #d29671;
1117
+ --ds-global-orange-13: #f1ded3;
1118
+ --ds-global-orange-contrast-1: #000000;
1119
+ --ds-global-orange-contrast-2: #060301;
1120
+ --ds-global-purple-1: #251238;
1121
+ --ds-global-purple-2: #301748;
1122
+ --ds-global-purple-3: #402060;
1123
+ --ds-global-purple-4: #52287a;
1124
+ --ds-global-purple-5: #643196;
1125
+ --ds-global-purple-6: #6b399d;
1126
+ --ds-global-purple-7: #865daf;
1127
+ --ds-global-purple-8: #c9b7db;
1128
+ --ds-global-purple-9: #b298cc;
1129
+ --ds-global-purple-10: #a181c0;
1130
+ --ds-global-purple-11: #8f69b5;
1131
+ --ds-global-purple-12: #b298cc;
1132
+ --ds-global-purple-13: #e7dfef;
1133
+ --ds-global-purple-contrast-1: #000000;
1134
+ --ds-global-purple-contrast-2: #18141b;
1135
+ --ds-global-red-1: #3b0808;
1136
+ --ds-global-red-2: #4b0a0a;
1137
+ --ds-global-red-3: #620e0e;
1138
+ --ds-global-red-4: #7c1212;
1139
+ --ds-global-red-5: #961515;
1140
+ --ds-global-red-6: #a31717;
1141
+ --ds-global-red-7: #c93c3c;
1142
+ --ds-global-red-8: #e9b0b0;
1143
+ --ds-global-red-9: #d76e6e;
1144
+ --ds-global-red-10: #ce4e4e;
1145
+ --ds-global-red-11: #c32727;
1146
+ --ds-global-red-12: #df8d8d;
1147
+ --ds-global-red-13: #f5dcdc;
1148
+ --ds-global-red-contrast-1: #000000;
1149
+ --ds-global-red-contrast-2: #271414;
1150
+ --ds-global-yellow-1: #221b06;
1151
+ --ds-global-yellow-2: #2b2307;
1152
+ --ds-global-yellow-3: #3a300a;
1153
+ --ds-global-yellow-4: #4a3d0d;
1154
+ --ds-global-yellow-5: #5a4a0f;
1155
+ --ds-global-yellow-6: #635011;
1156
+ --ds-global-yellow-7: #856d17;
1157
+ --ds-global-yellow-8: #e4ba27;
1158
+ --ds-global-yellow-9: #3d310a;
1159
+ --ds-global-yellow-10: #52430e;
1160
+ --ds-global-yellow-11: #695512;
1161
+ --ds-global-yellow-12: #c39f21;
1162
+ --ds-global-yellow-13: #f5e19b;
1163
+ --ds-global-yellow-contrast-1: #ffffff;
1164
+ --ds-global-yellow-contrast-2: #ccc9bf;
1165
+
1166
+ color-scheme: dark;
1167
+ }
1168
+
1169
+ @media (prefers-color-scheme: dark) {
1170
+ [data-ds-color-mode="auto"] {
1171
+ --ds-color-accent-1: #1b1b1b;
1172
+ --ds-color-accent-2: #242424;
1173
+ --ds-color-accent-3: #303030;
1174
+ --ds-color-accent-4: #3e3e3e;
1175
+ --ds-color-accent-5: #4b4b4b;
1176
+ --ds-color-accent-6: #525252;
1177
+ --ds-color-accent-7: #6f6f6f;
1178
+ --ds-color-accent-8: #bebebe;
1179
+ --ds-color-accent-9: #ababab;
1180
+ --ds-color-accent-10: #969696;
1181
+ --ds-color-accent-11: #818181;
1182
+ --ds-color-accent-12: #a3a3a3;
1183
+ --ds-color-accent-13: #e1e1e1;
1184
+ --ds-color-accent-contrast-1: #000000;
1185
+ --ds-color-accent-contrast-2: #1b1b1b;
1186
+ --ds-color-accent-background-default: var(--ds-color-accent-1);
1187
+ --ds-color-accent-background-subtle: var(--ds-color-accent-2);
1188
+ --ds-color-accent-surface-default: var(--ds-color-accent-3);
1189
+ --ds-color-accent-surface-hover: var(--ds-color-accent-4);
1190
+ --ds-color-accent-surface-active: var(--ds-color-accent-5);
1191
+ --ds-color-accent-border-subtle: var(--ds-color-accent-6);
1192
+ --ds-color-accent-border-default: var(--ds-color-accent-7);
1193
+ --ds-color-accent-border-strong: var(--ds-color-accent-8);
1194
+ --ds-color-accent-base-default: var(--ds-color-accent-9);
1195
+ --ds-color-accent-base-hover: var(--ds-color-accent-10);
1196
+ --ds-color-accent-base-active: var(--ds-color-accent-11);
1197
+ --ds-color-accent-text-subtle: var(--ds-color-accent-12);
1198
+ --ds-color-accent-text-default: var(--ds-color-accent-13);
1199
+ --ds-color-accent-contrast-default: var(--ds-color-accent-contrast-1);
1200
+ --ds-color-accent-contrast-subtle: var(--ds-color-accent-contrast-2);
1201
+ --ds-color-neutral-1: #1b1b1b;
1202
+ --ds-color-neutral-2: #242424;
1203
+ --ds-color-neutral-3: #303030;
1204
+ --ds-color-neutral-4: #3e3e3e;
1205
+ --ds-color-neutral-5: #4b4b4b;
1206
+ --ds-color-neutral-6: #525252;
1207
+ --ds-color-neutral-7: #6f6f6f;
1208
+ --ds-color-neutral-8: #bebebe;
1209
+ --ds-color-neutral-9: #1f1f1f;
1210
+ --ds-color-neutral-10: #303030;
1211
+ --ds-color-neutral-11: #424242;
1212
+ --ds-color-neutral-12: #a3a3a3;
1213
+ --ds-color-neutral-13: #e1e1e1;
1214
+ --ds-color-neutral-contrast-1: #ffffff;
1215
+ --ds-color-neutral-contrast-2: #b0b0b0;
1216
+ --ds-color-neutral-background-default: var(--ds-color-neutral-1);
1217
+ --ds-color-neutral-background-subtle: var(--ds-color-neutral-2);
1218
+ --ds-color-neutral-surface-default: var(--ds-color-neutral-3);
1219
+ --ds-color-neutral-surface-hover: var(--ds-color-neutral-4);
1220
+ --ds-color-neutral-surface-active: var(--ds-color-neutral-5);
1221
+ --ds-color-neutral-border-subtle: var(--ds-color-neutral-6);
1222
+ --ds-color-neutral-border-default: var(--ds-color-neutral-7);
1223
+ --ds-color-neutral-border-strong: var(--ds-color-neutral-8);
1224
+ --ds-color-neutral-base-default: var(--ds-color-neutral-9);
1225
+ --ds-color-neutral-base-hover: var(--ds-color-neutral-10);
1226
+ --ds-color-neutral-base-active: var(--ds-color-neutral-11);
1227
+ --ds-color-neutral-text-subtle: var(--ds-color-neutral-12);
1228
+ --ds-color-neutral-text-default: var(--ds-color-neutral-13);
1229
+ --ds-color-neutral-contrast-default: var(--ds-color-neutral-contrast-1);
1230
+ --ds-color-neutral-contrast-subtle: var(--ds-color-neutral-contrast-2);
1231
+ --ds-color-brand1-1: #121e18;
1232
+ --ds-color-brand1-2: #18271f;
1233
+ --ds-color-brand1-3: #1f342a;
1234
+ --ds-color-brand1-4: #284336;
1235
+ --ds-color-brand1-5: #315241;
1236
+ --ds-color-brand1-6: #355947;
1237
+ --ds-color-brand1-7: #487960;
1238
+ --ds-color-brand1-8: #86cda9;
1239
+ --ds-color-brand1-9: #284336;
1240
+ --ds-color-brand1-10: #345745;
1241
+ --ds-color-brand1-11: #406b55;
1242
+ --ds-color-brand1-12: #6ab28d;
1243
+ --ds-color-brand1-13: #cae9d9;
1244
+ --ds-color-brand1-contrast-1: #ffffff;
1245
+ --ds-color-brand1-contrast-2: #d3d8d6;
1246
+ --ds-color-brand1-background-default: var(--ds-color-brand1-1);
1247
+ --ds-color-brand1-background-subtle: var(--ds-color-brand1-2);
1248
+ --ds-color-brand1-surface-default: var(--ds-color-brand1-3);
1249
+ --ds-color-brand1-surface-hover: var(--ds-color-brand1-4);
1250
+ --ds-color-brand1-surface-active: var(--ds-color-brand1-5);
1251
+ --ds-color-brand1-border-subtle: var(--ds-color-brand1-6);
1252
+ --ds-color-brand1-border-default: var(--ds-color-brand1-7);
1253
+ --ds-color-brand1-border-strong: var(--ds-color-brand1-8);
1254
+ --ds-color-brand1-base-default: var(--ds-color-brand1-9);
1255
+ --ds-color-brand1-base-hover: var(--ds-color-brand1-10);
1256
+ --ds-color-brand1-base-active: var(--ds-color-brand1-11);
1257
+ --ds-color-brand1-text-subtle: var(--ds-color-brand1-12);
1258
+ --ds-color-brand1-text-default: var(--ds-color-brand1-13);
1259
+ --ds-color-brand1-contrast-default: var(--ds-color-brand1-contrast-1);
1260
+ --ds-color-brand1-contrast-subtle: var(--ds-color-brand1-contrast-2);
1261
+ --ds-color-brand2-1: #191c1f;
1262
+ --ds-color-brand2-2: #202428;
1263
+ --ds-color-brand2-3: #2b3135;
1264
+ --ds-color-brand2-4: #383f44;
1265
+ --ds-color-brand2-5: #444c53;
1266
+ --ds-color-brand2-6: #4a535b;
1267
+ --ds-color-brand2-7: #65717b;
1268
+ --ds-color-brand2-8: #acc1d2;
1269
+ --ds-color-brand2-9: #24282b;
1270
+ --ds-color-brand2-10: #33393f;
1271
+ --ds-color-brand2-11: #444c53;
1272
+ --ds-color-brand2-12: #93a5b4;
1273
+ --ds-color-brand2-13: #d5e4f0;
1274
+ --ds-color-brand2-contrast-1: #ffffff;
1275
+ --ds-color-brand2-contrast-2: #babbbc;
1276
+ --ds-color-brand2-background-default: var(--ds-color-brand2-1);
1277
+ --ds-color-brand2-background-subtle: var(--ds-color-brand2-2);
1278
+ --ds-color-brand2-surface-default: var(--ds-color-brand2-3);
1279
+ --ds-color-brand2-surface-hover: var(--ds-color-brand2-4);
1280
+ --ds-color-brand2-surface-active: var(--ds-color-brand2-5);
1281
+ --ds-color-brand2-border-subtle: var(--ds-color-brand2-6);
1282
+ --ds-color-brand2-border-default: var(--ds-color-brand2-7);
1283
+ --ds-color-brand2-border-strong: var(--ds-color-brand2-8);
1284
+ --ds-color-brand2-base-default: var(--ds-color-brand2-9);
1285
+ --ds-color-brand2-base-hover: var(--ds-color-brand2-10);
1286
+ --ds-color-brand2-base-active: var(--ds-color-brand2-11);
1287
+ --ds-color-brand2-text-subtle: var(--ds-color-brand2-12);
1288
+ --ds-color-brand2-text-default: var(--ds-color-brand2-13);
1289
+ --ds-color-brand2-contrast-default: var(--ds-color-brand2-contrast-1);
1290
+ --ds-color-brand2-contrast-subtle: var(--ds-color-brand2-contrast-2);
1291
+ --ds-color-brand3-1: #1f1b17;
1292
+ --ds-color-brand3-2: #27231e;
1293
+ --ds-color-brand3-3: #353028;
1294
+ --ds-color-brand3-4: #433c33;
1295
+ --ds-color-brand3-5: #534a3f;
1296
+ --ds-color-brand3-6: #5b5145;
1297
+ --ds-color-brand3-7: #7a6d5c;
1298
+ --ds-color-brand3-8: #d0bb9e;
1299
+ --ds-color-brand3-9: #2c2721;
1300
+ --ds-color-brand3-10: #3f3830;
1301
+ --ds-color-brand3-11: #534a3f;
1302
+ --ds-color-brand3-12: #b2a188;
1303
+ --ds-color-brand3-13: #efe0cc;
1304
+ --ds-color-brand3-contrast-1: #ffffff;
1305
+ --ds-color-brand3-contrast-2: #bdbbb9;
1306
+ --ds-color-brand3-background-default: var(--ds-color-brand3-1);
1307
+ --ds-color-brand3-background-subtle: var(--ds-color-brand3-2);
1308
+ --ds-color-brand3-surface-default: var(--ds-color-brand3-3);
1309
+ --ds-color-brand3-surface-hover: var(--ds-color-brand3-4);
1310
+ --ds-color-brand3-surface-active: var(--ds-color-brand3-5);
1311
+ --ds-color-brand3-border-subtle: var(--ds-color-brand3-6);
1312
+ --ds-color-brand3-border-default: var(--ds-color-brand3-7);
1313
+ --ds-color-brand3-border-strong: var(--ds-color-brand3-8);
1314
+ --ds-color-brand3-base-default: var(--ds-color-brand3-9);
1315
+ --ds-color-brand3-base-hover: var(--ds-color-brand3-10);
1316
+ --ds-color-brand3-base-active: var(--ds-color-brand3-11);
1317
+ --ds-color-brand3-text-subtle: var(--ds-color-brand3-12);
1318
+ --ds-color-brand3-text-default: var(--ds-color-brand3-13);
1319
+ --ds-color-brand3-contrast-default: var(--ds-color-brand3-contrast-1);
1320
+ --ds-color-brand3-contrast-subtle: var(--ds-color-brand3-contrast-2);
1321
+ --ds-color-success-background-default: var(--ds-global-green-1);
1322
+ --ds-color-success-background-subtle: var(--ds-global-green-2);
1323
+ --ds-color-success-surface-default: var(--ds-global-green-3);
1324
+ --ds-color-success-surface-hover: var(--ds-global-green-4);
1325
+ --ds-color-success-surface-active: var(--ds-global-green-5);
1326
+ --ds-color-success-border-subtle: var(--ds-global-green-6);
1327
+ --ds-color-success-border-default: var(--ds-global-green-7);
1328
+ --ds-color-success-border-strong: var(--ds-global-green-8);
1329
+ --ds-color-success-base-default: var(--ds-global-green-9);
1330
+ --ds-color-success-base-hover: var(--ds-global-green-10);
1331
+ --ds-color-success-base-active: var(--ds-global-green-11);
1332
+ --ds-color-success-text-subtle: var(--ds-global-green-12);
1333
+ --ds-color-success-text-default: var(--ds-global-green-13);
1334
+ --ds-color-success-contrast-default: var(--ds-global-green-contrast-1);
1335
+ --ds-color-success-contrast-subtle: var(--ds-global-green-contrast-2);
1336
+ --ds-color-danger-background-default: var(--ds-global-red-1);
1337
+ --ds-color-danger-background-subtle: var(--ds-global-red-2);
1338
+ --ds-color-danger-surface-default: var(--ds-global-red-3);
1339
+ --ds-color-danger-surface-hover: var(--ds-global-red-4);
1340
+ --ds-color-danger-surface-active: var(--ds-global-red-5);
1341
+ --ds-color-danger-border-subtle: var(--ds-global-red-6);
1342
+ --ds-color-danger-border-default: var(--ds-global-red-7);
1343
+ --ds-color-danger-border-strong: var(--ds-global-red-8);
1344
+ --ds-color-danger-base-default: var(--ds-global-red-9);
1345
+ --ds-color-danger-base-hover: var(--ds-global-red-10);
1346
+ --ds-color-danger-base-active: var(--ds-global-red-11);
1347
+ --ds-color-danger-text-subtle: var(--ds-global-red-12);
1348
+ --ds-color-danger-text-default: var(--ds-global-red-13);
1349
+ --ds-color-danger-contrast-default: var(--ds-global-red-contrast-1);
1350
+ --ds-color-danger-contrast-subtle: var(--ds-global-red-contrast-2);
1351
+ --ds-color-info-background-default: #031d30;
1352
+ --ds-color-info-background-subtle: #032540;
1353
+ --ds-color-info-surface-default: #043256;
1354
+ --ds-color-info-surface-hover: #063f6c;
1355
+ --ds-color-info-surface-active: #074d84;
1356
+ --ds-color-info-border-subtle: #075490;
1357
+ --ds-color-info-border-default: #0c72c1;
1358
+ --ds-color-info-border-strong: #98c3e5;
1359
+ --ds-color-info-base-default: #2a84c8;
1360
+ --ds-color-info-base-hover: #0a6dba;
1361
+ --ds-color-info-base-active: #085998;
1362
+ --ds-color-info-text-subtle: #6ba9d9;
1363
+ --ds-color-info-text-default: #d3e5f4;
1364
+ --ds-color-info-contrast-default: #000000;
1365
+ --ds-color-info-contrast-subtle: #040c13;
1366
+ --ds-color-warning-background-default: var(--ds-global-yellow-1);
1367
+ --ds-color-warning-background-subtle: var(--ds-global-yellow-2);
1368
+ --ds-color-warning-surface-default: var(--ds-global-yellow-3);
1369
+ --ds-color-warning-surface-hover: var(--ds-global-yellow-4);
1370
+ --ds-color-warning-surface-active: var(--ds-global-yellow-5);
1371
+ --ds-color-warning-border-subtle: var(--ds-global-yellow-6);
1372
+ --ds-color-warning-border-default: var(--ds-global-yellow-7);
1373
+ --ds-color-warning-border-strong: var(--ds-global-yellow-8);
1374
+ --ds-color-warning-base-default: var(--ds-global-orange-9);
1375
+ --ds-color-warning-base-hover: var(--ds-global-orange-10);
1376
+ --ds-color-warning-base-active: var(--ds-global-orange-11);
1377
+ --ds-color-warning-text-subtle: var(--ds-global-orange-12);
1378
+ --ds-color-warning-text-default: var(--ds-global-orange-13);
1379
+ --ds-color-warning-contrast-default: var(--ds-global-orange-contrast-1);
1380
+ --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2);
1381
+ --ds-color-focus-inner: #1b1b1b;
1382
+ --ds-color-focus-outer: #e1e1e1;
1383
+ --ds-global-blue-1: #031d30;
1384
+ --ds-global-blue-2: #032540;
1385
+ --ds-global-blue-3: #043256;
1386
+ --ds-global-blue-4: #063f6c;
1387
+ --ds-global-blue-5: #074d84;
1388
+ --ds-global-blue-6: #075490;
1389
+ --ds-global-blue-7: #0c72c1;
1390
+ --ds-global-blue-8: #98c3e5;
1391
+ --ds-global-blue-9: #2a84c8;
1392
+ --ds-global-blue-10: #0a6dba;
1393
+ --ds-global-blue-11: #085998;
1394
+ --ds-global-blue-12: #6ba9d9;
1395
+ --ds-global-blue-13: #d3e5f4;
1396
+ --ds-global-blue-contrast-1: #000000;
1397
+ --ds-global-blue-contrast-2: #040c13;
1398
+ --ds-global-green-1: #012106;
1399
+ --ds-global-green-2: #022b08;
1400
+ --ds-global-green-3: #03380a;
1401
+ --ds-global-green-4: #03490d;
1402
+ --ds-global-green-5: #045810;
1403
+ --ds-global-green-6: #045f11;
1404
+ --ds-global-green-7: #068217;
1405
+ --ds-global-green-8: #93cb9b;
1406
+ --ds-global-green-9: #118c23;
1407
+ --ds-global-green-10: #057615;
1408
+ --ds-global-green-11: #045f11;
1409
+ --ds-global-green-12: #63b46f;
1410
+ --ds-global-green-13: #d1e9d4;
1411
+ --ds-global-green-contrast-1: #000000;
1412
+ --ds-global-green-contrast-2: #010401;
1413
+ --ds-global-orange-1: #2d1507;
1414
+ --ds-global-orange-2: #391b09;
1415
+ --ds-global-orange-3: #4e250c;
1416
+ --ds-global-orange-4: #633010;
1417
+ --ds-global-orange-5: #783a13;
1418
+ --ds-global-orange-6: #833f15;
1419
+ --ds-global-orange-7: #b2551c;
1420
+ --ds-global-orange-8: #e0b69c;
1421
+ --ds-global-orange-9: #bc6028;
1422
+ --ds-global-orange-10: #a24d1a;
1423
+ --ds-global-orange-11: #833f15;
1424
+ --ds-global-orange-12: #d29671;
1425
+ --ds-global-orange-13: #f1ded3;
1426
+ --ds-global-orange-contrast-1: #000000;
1427
+ --ds-global-orange-contrast-2: #060301;
1428
+ --ds-global-purple-1: #251238;
1429
+ --ds-global-purple-2: #301748;
1430
+ --ds-global-purple-3: #402060;
1431
+ --ds-global-purple-4: #52287a;
1432
+ --ds-global-purple-5: #643196;
1433
+ --ds-global-purple-6: #6b399d;
1434
+ --ds-global-purple-7: #865daf;
1435
+ --ds-global-purple-8: #c9b7db;
1436
+ --ds-global-purple-9: #b298cc;
1437
+ --ds-global-purple-10: #a181c0;
1438
+ --ds-global-purple-11: #8f69b5;
1439
+ --ds-global-purple-12: #b298cc;
1440
+ --ds-global-purple-13: #e7dfef;
1441
+ --ds-global-purple-contrast-1: #000000;
1442
+ --ds-global-purple-contrast-2: #18141b;
1443
+ --ds-global-red-1: #3b0808;
1444
+ --ds-global-red-2: #4b0a0a;
1445
+ --ds-global-red-3: #620e0e;
1446
+ --ds-global-red-4: #7c1212;
1447
+ --ds-global-red-5: #961515;
1448
+ --ds-global-red-6: #a31717;
1449
+ --ds-global-red-7: #c93c3c;
1450
+ --ds-global-red-8: #e9b0b0;
1451
+ --ds-global-red-9: #d76e6e;
1452
+ --ds-global-red-10: #ce4e4e;
1453
+ --ds-global-red-11: #c32727;
1454
+ --ds-global-red-12: #df8d8d;
1455
+ --ds-global-red-13: #f5dcdc;
1456
+ --ds-global-red-contrast-1: #000000;
1457
+ --ds-global-red-contrast-2: #271414;
1458
+ --ds-global-yellow-1: #221b06;
1459
+ --ds-global-yellow-2: #2b2307;
1460
+ --ds-global-yellow-3: #3a300a;
1461
+ --ds-global-yellow-4: #4a3d0d;
1462
+ --ds-global-yellow-5: #5a4a0f;
1463
+ --ds-global-yellow-6: #635011;
1464
+ --ds-global-yellow-7: #856d17;
1465
+ --ds-global-yellow-8: #e4ba27;
1466
+ --ds-global-yellow-9: #3d310a;
1467
+ --ds-global-yellow-10: #52430e;
1468
+ --ds-global-yellow-11: #695512;
1469
+ --ds-global-yellow-12: #c39f21;
1470
+ --ds-global-yellow-13: #f5e19b;
1471
+ --ds-global-yellow-contrast-1: #ffffff;
1472
+ --ds-global-yellow-contrast-2: #ccc9bf;
1473
+
1474
+ color-scheme: dark;
1475
+ }
1476
+
1477
+ }
1478
+
1479
+ }
1480
+
1481
+ /**
1482
+ * These files are generated from design tokens defind using Token Studio
1483
+ */
1484
+
1485
+ @layer ds.theme.color-mode.contrast {
1486
+ [data-ds-color-mode="contrast"] {
1487
+ --ds-color-accent-1: #040404;
1488
+ --ds-color-accent-2: #131313;
1489
+ --ds-color-accent-3: #242424;
1490
+ --ds-color-accent-4: #303030;
1491
+ --ds-color-accent-5: #3e3e3e;
1492
+ --ds-color-accent-6: #8b8b8b;
1493
+ --ds-color-accent-7: #ababab;
1494
+ --ds-color-accent-8: #cccccc;
1495
+ --ds-color-accent-9: #ababab;
1496
+ --ds-color-accent-10: #969696;
1497
+ --ds-color-accent-11: #818181;
1498
+ --ds-color-accent-12: #c6c6c6;
1499
+ --ds-color-accent-13: #f0f0f0;
1500
+ --ds-color-accent-contrast-1: #000000;
1501
+ --ds-color-accent-contrast-2: #1b1b1b;
1502
+ --ds-color-accent-background-default: var(--ds-color-accent-1);
1503
+ --ds-color-accent-background-subtle: var(--ds-color-accent-2);
1504
+ --ds-color-accent-surface-default: var(--ds-color-accent-3);
1505
+ --ds-color-accent-surface-hover: var(--ds-color-accent-4);
1506
+ --ds-color-accent-surface-active: var(--ds-color-accent-5);
1507
+ --ds-color-accent-border-subtle: var(--ds-color-accent-6);
1508
+ --ds-color-accent-border-default: var(--ds-color-accent-7);
1509
+ --ds-color-accent-border-strong: var(--ds-color-accent-8);
1510
+ --ds-color-accent-base-default: var(--ds-color-accent-9);
1511
+ --ds-color-accent-base-hover: var(--ds-color-accent-10);
1512
+ --ds-color-accent-base-active: var(--ds-color-accent-11);
1513
+ --ds-color-accent-text-subtle: var(--ds-color-accent-12);
1514
+ --ds-color-accent-text-default: var(--ds-color-accent-13);
1515
+ --ds-color-accent-contrast-default: var(--ds-color-accent-contrast-1);
1516
+ --ds-color-accent-contrast-subtle: var(--ds-color-accent-contrast-2);
1517
+ --ds-color-neutral-1: #040404;
1518
+ --ds-color-neutral-2: #131313;
1519
+ --ds-color-neutral-3: #242424;
1520
+ --ds-color-neutral-4: #303030;
1521
+ --ds-color-neutral-5: #3e3e3e;
1522
+ --ds-color-neutral-6: #8b8b8b;
1523
+ --ds-color-neutral-7: #ababab;
1524
+ --ds-color-neutral-8: #cccccc;
1525
+ --ds-color-neutral-9: #1f1f1f;
1526
+ --ds-color-neutral-10: #303030;
1527
+ --ds-color-neutral-11: #424242;
1528
+ --ds-color-neutral-12: #c6c6c6;
1529
+ --ds-color-neutral-13: #f0f0f0;
1530
+ --ds-color-neutral-contrast-1: #ffffff;
1531
+ --ds-color-neutral-contrast-2: #b0b0b0;
1532
+ --ds-color-neutral-background-default: var(--ds-color-neutral-1);
1533
+ --ds-color-neutral-background-subtle: var(--ds-color-neutral-2);
1534
+ --ds-color-neutral-surface-default: var(--ds-color-neutral-3);
1535
+ --ds-color-neutral-surface-hover: var(--ds-color-neutral-4);
1536
+ --ds-color-neutral-surface-active: var(--ds-color-neutral-5);
1537
+ --ds-color-neutral-border-subtle: var(--ds-color-neutral-6);
1538
+ --ds-color-neutral-border-default: var(--ds-color-neutral-7);
1539
+ --ds-color-neutral-border-strong: var(--ds-color-neutral-8);
1540
+ --ds-color-neutral-base-default: var(--ds-color-neutral-9);
1541
+ --ds-color-neutral-base-hover: var(--ds-color-neutral-10);
1542
+ --ds-color-neutral-base-active: var(--ds-color-neutral-11);
1543
+ --ds-color-neutral-text-subtle: var(--ds-color-neutral-12);
1544
+ --ds-color-neutral-text-default: var(--ds-color-neutral-13);
1545
+ --ds-color-neutral-contrast-default: var(--ds-color-neutral-contrast-1);
1546
+ --ds-color-neutral-contrast-subtle: var(--ds-color-neutral-contrast-2);
1547
+ --ds-color-brand1-1: #020303;
1548
+ --ds-color-brand1-2: #0c1511;
1549
+ --ds-color-brand1-3: #18271f;
1550
+ --ds-color-brand1-4: #1f342a;
1551
+ --ds-color-brand1-5: #284336;
1552
+ --ds-color-brand1-6: #5a9878;
1553
+ --ds-color-brand1-7: #6fba93;
1554
+ --ds-color-brand1-8: #a1d8bc;
1555
+ --ds-color-brand1-9: #284336;
1556
+ --ds-color-brand1-10: #345745;
1557
+ --ds-color-brand1-11: #406b55;
1558
+ --ds-color-brand1-12: #95d3b3;
1559
+ --ds-color-brand1-13: #e4f4ec;
1560
+ --ds-color-brand1-contrast-1: #ffffff;
1561
+ --ds-color-brand1-contrast-2: #d3d8d6;
1562
+ --ds-color-brand1-background-default: var(--ds-color-brand1-1);
1563
+ --ds-color-brand1-background-subtle: var(--ds-color-brand1-2);
1564
+ --ds-color-brand1-surface-default: var(--ds-color-brand1-3);
1565
+ --ds-color-brand1-surface-hover: var(--ds-color-brand1-4);
1566
+ --ds-color-brand1-surface-active: var(--ds-color-brand1-5);
1567
+ --ds-color-brand1-border-subtle: var(--ds-color-brand1-6);
1568
+ --ds-color-brand1-border-default: var(--ds-color-brand1-7);
1569
+ --ds-color-brand1-border-strong: var(--ds-color-brand1-8);
1570
+ --ds-color-brand1-base-default: var(--ds-color-brand1-9);
1571
+ --ds-color-brand1-base-hover: var(--ds-color-brand1-10);
1572
+ --ds-color-brand1-base-active: var(--ds-color-brand1-11);
1573
+ --ds-color-brand1-text-subtle: var(--ds-color-brand1-12);
1574
+ --ds-color-brand1-text-default: var(--ds-color-brand1-13);
1575
+ --ds-color-brand1-contrast-default: var(--ds-color-brand1-contrast-1);
1576
+ --ds-color-brand1-contrast-subtle: var(--ds-color-brand1-contrast-2);
1577
+ --ds-color-brand2-1: #030304;
1578
+ --ds-color-brand2-2: #111415;
1579
+ --ds-color-brand2-3: #202428;
1580
+ --ds-color-brand2-4: #2b3135;
1581
+ --ds-color-brand2-5: #383f44;
1582
+ --ds-color-brand2-6: #7e8d9a;
1583
+ --ds-color-brand2-7: #9baebd;
1584
+ --ds-color-brand2-8: #b8cfe1;
1585
+ --ds-color-brand2-9: #24282b;
1586
+ --ds-color-brand2-10: #33393f;
1587
+ --ds-color-brand2-11: #444c53;
1588
+ --ds-color-brand2-12: #b3c8da;
1589
+ --ds-color-brand2-13: #eaf1f8;
1590
+ --ds-color-brand2-contrast-1: #ffffff;
1591
+ --ds-color-brand2-contrast-2: #babbbc;
1592
+ --ds-color-brand2-background-default: var(--ds-color-brand2-1);
1593
+ --ds-color-brand2-background-subtle: var(--ds-color-brand2-2);
1594
+ --ds-color-brand2-surface-default: var(--ds-color-brand2-3);
1595
+ --ds-color-brand2-surface-hover: var(--ds-color-brand2-4);
1596
+ --ds-color-brand2-surface-active: var(--ds-color-brand2-5);
1597
+ --ds-color-brand2-border-subtle: var(--ds-color-brand2-6);
1598
+ --ds-color-brand2-border-default: var(--ds-color-brand2-7);
1599
+ --ds-color-brand2-border-strong: var(--ds-color-brand2-8);
1600
+ --ds-color-brand2-base-default: var(--ds-color-brand2-9);
1601
+ --ds-color-brand2-base-hover: var(--ds-color-brand2-10);
1602
+ --ds-color-brand2-base-active: var(--ds-color-brand2-11);
1603
+ --ds-color-brand2-text-subtle: var(--ds-color-brand2-12);
1604
+ --ds-color-brand2-text-default: var(--ds-color-brand2-13);
1605
+ --ds-color-brand2-contrast-default: var(--ds-color-brand2-contrast-1);
1606
+ --ds-color-brand2-contrast-subtle: var(--ds-color-brand2-contrast-2);
1607
+ --ds-color-brand3-1: #040303;
1608
+ --ds-color-brand3-2: #161310;
1609
+ --ds-color-brand3-3: #27231e;
1610
+ --ds-color-brand3-4: #353028;
1611
+ --ds-color-brand3-5: #433c33;
1612
+ --ds-color-brand3-6: #998974;
1613
+ --ds-color-brand3-7: #bba98e;
1614
+ --ds-color-brand3-8: #dec8a9;
1615
+ --ds-color-brand3-9: #2c2721;
1616
+ --ds-color-brand3-10: #3f3830;
1617
+ --ds-color-brand3-11: #534a3f;
1618
+ --ds-color-brand3-12: #d9c3a5;
1619
+ --ds-color-brand3-13: #f7f0e7;
1620
+ --ds-color-brand3-contrast-1: #ffffff;
1621
+ --ds-color-brand3-contrast-2: #bdbbb9;
1622
+ --ds-color-brand3-background-default: var(--ds-color-brand3-1);
1623
+ --ds-color-brand3-background-subtle: var(--ds-color-brand3-2);
1624
+ --ds-color-brand3-surface-default: var(--ds-color-brand3-3);
1625
+ --ds-color-brand3-surface-hover: var(--ds-color-brand3-4);
1626
+ --ds-color-brand3-surface-active: var(--ds-color-brand3-5);
1627
+ --ds-color-brand3-border-subtle: var(--ds-color-brand3-6);
1628
+ --ds-color-brand3-border-default: var(--ds-color-brand3-7);
1629
+ --ds-color-brand3-border-strong: var(--ds-color-brand3-8);
1630
+ --ds-color-brand3-base-default: var(--ds-color-brand3-9);
1631
+ --ds-color-brand3-base-hover: var(--ds-color-brand3-10);
1632
+ --ds-color-brand3-base-active: var(--ds-color-brand3-11);
1633
+ --ds-color-brand3-text-subtle: var(--ds-color-brand3-12);
1634
+ --ds-color-brand3-text-default: var(--ds-color-brand3-13);
1635
+ --ds-color-brand3-contrast-default: var(--ds-color-brand3-contrast-1);
1636
+ --ds-color-brand3-contrast-subtle: var(--ds-color-brand3-contrast-2);
1637
+ --ds-color-success-background-default: var(--ds-global-green-1);
1638
+ --ds-color-success-background-subtle: var(--ds-global-green-2);
1639
+ --ds-color-success-surface-default: var(--ds-global-green-3);
1640
+ --ds-color-success-surface-hover: var(--ds-global-green-4);
1641
+ --ds-color-success-surface-active: var(--ds-global-green-5);
1642
+ --ds-color-success-border-subtle: var(--ds-global-green-6);
1643
+ --ds-color-success-border-default: var(--ds-global-green-7);
1644
+ --ds-color-success-border-strong: var(--ds-global-green-8);
1645
+ --ds-color-success-base-default: var(--ds-global-green-9);
1646
+ --ds-color-success-base-hover: var(--ds-global-green-10);
1647
+ --ds-color-success-base-active: var(--ds-global-green-11);
1648
+ --ds-color-success-text-subtle: var(--ds-global-green-12);
1649
+ --ds-color-success-text-default: var(--ds-global-green-13);
1650
+ --ds-color-success-contrast-default: var(--ds-global-green-contrast-1);
1651
+ --ds-color-success-contrast-subtle: var(--ds-global-green-contrast-2);
1652
+ --ds-color-danger-background-default: var(--ds-global-red-1);
1653
+ --ds-color-danger-background-subtle: var(--ds-global-red-2);
1654
+ --ds-color-danger-surface-default: var(--ds-global-red-3);
1655
+ --ds-color-danger-surface-hover: var(--ds-global-red-4);
1656
+ --ds-color-danger-surface-active: var(--ds-global-red-5);
1657
+ --ds-color-danger-border-subtle: var(--ds-global-red-6);
1658
+ --ds-color-danger-border-default: var(--ds-global-red-7);
1659
+ --ds-color-danger-border-strong: var(--ds-global-red-8);
1660
+ --ds-color-danger-base-default: var(--ds-global-red-9);
1661
+ --ds-color-danger-base-hover: var(--ds-global-red-10);
1662
+ --ds-color-danger-base-active: var(--ds-global-red-11);
1663
+ --ds-color-danger-text-subtle: var(--ds-global-red-12);
1664
+ --ds-color-danger-text-default: var(--ds-global-red-13);
1665
+ --ds-color-danger-contrast-default: var(--ds-global-red-contrast-1);
1666
+ --ds-color-danger-contrast-subtle: var(--ds-global-red-contrast-2);
1667
+ --ds-color-info-background-default: #000408;
1668
+ --ds-color-info-background-subtle: #021423;
1669
+ --ds-color-info-surface-default: #032540;
1670
+ --ds-color-info-surface-hover: #043256;
1671
+ --ds-color-info-surface-active: #063f6c;
1672
+ --ds-color-info-border-subtle: #4291ce;
1673
+ --ds-color-info-border-default: #78b1dc;
1674
+ --ds-color-info-border-strong: #aed0ea;
1675
+ --ds-color-info-base-default: #2a84c8;
1676
+ --ds-color-info-base-hover: #0a6dba;
1677
+ --ds-color-info-base-active: #085998;
1678
+ --ds-color-info-text-subtle: #a6cbe8;
1679
+ --ds-color-info-text-default: #e8f1f9;
1680
+ --ds-color-info-contrast-default: #000000;
1681
+ --ds-color-info-contrast-subtle: #040c13;
1682
+ --ds-color-warning-background-default: var(--ds-global-yellow-1);
1683
+ --ds-color-warning-background-subtle: var(--ds-global-yellow-2);
1684
+ --ds-color-warning-surface-default: var(--ds-global-yellow-3);
1685
+ --ds-color-warning-surface-hover: var(--ds-global-yellow-4);
1686
+ --ds-color-warning-surface-active: var(--ds-global-yellow-5);
1687
+ --ds-color-warning-border-subtle: var(--ds-global-yellow-6);
1688
+ --ds-color-warning-border-default: var(--ds-global-yellow-7);
1689
+ --ds-color-warning-border-strong: var(--ds-global-yellow-8);
1690
+ --ds-color-warning-base-default: var(--ds-global-orange-9);
1691
+ --ds-color-warning-base-hover: var(--ds-global-orange-10);
1692
+ --ds-color-warning-base-active: var(--ds-global-orange-11);
1693
+ --ds-color-warning-text-subtle: var(--ds-global-orange-12);
1694
+ --ds-color-warning-text-default: var(--ds-global-orange-13);
1695
+ --ds-color-warning-contrast-default: var(--ds-global-orange-contrast-1);
1696
+ --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2);
1697
+ --ds-color-focus-inner: #040404;
1698
+ --ds-color-focus-outer: #f0f0f0;
1699
+ --ds-global-blue-1: #000408;
1700
+ --ds-global-blue-2: #021423;
1701
+ --ds-global-blue-3: #032540;
1702
+ --ds-global-blue-4: #043256;
1703
+ --ds-global-blue-5: #063f6c;
1704
+ --ds-global-blue-6: #4291ce;
1705
+ --ds-global-blue-7: #78b1dc;
1706
+ --ds-global-blue-8: #aed0ea;
1707
+ --ds-global-blue-9: #2a84c8;
1708
+ --ds-global-blue-10: #0a6dba;
1709
+ --ds-global-blue-11: #085998;
1710
+ --ds-global-blue-12: #a6cbe8;
1711
+ --ds-global-blue-13: #e8f1f9;
1712
+ --ds-global-blue-contrast-1: #000000;
1713
+ --ds-global-blue-contrast-2: #040c13;
1714
+ --ds-global-green-1: #000401;
1715
+ --ds-global-green-2: #011704;
1716
+ --ds-global-green-3: #022b08;
1717
+ --ds-global-green-4: #03380a;
1718
+ --ds-global-green-5: #03490d;
1719
+ --ds-global-green-6: #379f45;
1720
+ --ds-global-green-7: #71bb7b;
1721
+ --ds-global-green-8: #aad6b0;
1722
+ --ds-global-green-9: #118c23;
1723
+ --ds-global-green-10: #057615;
1724
+ --ds-global-green-11: #045f11;
1725
+ --ds-global-green-12: #a3d2a9;
1726
+ --ds-global-green-13: #e6f3e8;
1727
+ --ds-global-green-contrast-1: #000000;
1728
+ --ds-global-green-contrast-2: #010401;
1729
+ --ds-global-orange-1: #060301;
1730
+ --ds-global-orange-2: #200f05;
1731
+ --ds-global-orange-3: #391b09;
1732
+ --ds-global-orange-4: #4e250c;
1733
+ --ds-global-orange-5: #633010;
1734
+ --ds-global-orange-6: #c67849;
1735
+ --ds-global-orange-7: #d69f7d;
1736
+ --ds-global-orange-8: #e7c6b2;
1737
+ --ds-global-orange-9: #bc6028;
1738
+ --ds-global-orange-10: #a24d1a;
1739
+ --ds-global-orange-11: #833f15;
1740
+ --ds-global-orange-12: #e3bea6;
1741
+ --ds-global-orange-13: #f8eee7;
1742
+ --ds-global-orange-contrast-1: #000000;
1743
+ --ds-global-orange-contrast-2: #060301;
1744
+ --ds-global-purple-1: #060308;
1745
+ --ds-global-purple-2: #1a0d26;
1746
+ --ds-global-purple-3: #301748;
1747
+ --ds-global-purple-4: #402060;
1748
+ --ds-global-purple-5: #52287a;
1749
+ --ds-global-purple-6: #9e7dbf;
1750
+ --ds-global-purple-7: #b9a1d0;
1751
+ --ds-global-purple-8: #d5c7e3;
1752
+ --ds-global-purple-9: #b298cc;
1753
+ --ds-global-purple-10: #a181c0;
1754
+ --ds-global-purple-11: #8f69b5;
1755
+ --ds-global-purple-12: #d0c0e0;
1756
+ --ds-global-purple-13: #f2eef7;
1757
+ --ds-global-purple-contrast-1: #000000;
1758
+ --ds-global-purple-contrast-2: #18141b;
1759
+ --ds-global-red-1: #0b0101;
1760
+ --ds-global-red-2: #2b0606;
1761
+ --ds-global-red-3: #4b0a0a;
1762
+ --ds-global-red-4: #620e0e;
1763
+ --ds-global-red-5: #7c1212;
1764
+ --ds-global-red-6: #d66b6b;
1765
+ --ds-global-red-7: #e29797;
1766
+ --ds-global-red-8: #eec1c1;
1767
+ --ds-global-red-9: #d76e6e;
1768
+ --ds-global-red-10: #ce4e4e;
1769
+ --ds-global-red-11: #c32727;
1770
+ --ds-global-red-12: #ecbaba;
1771
+ --ds-global-red-13: #faeded;
1772
+ --ds-global-red-contrast-1: #000000;
1773
+ --ds-global-red-contrast-2: #271414;
1774
+ --ds-global-yellow-1: #040301;
1775
+ --ds-global-yellow-2: #181304;
1776
+ --ds-global-yellow-3: #2b2307;
1777
+ --ds-global-yellow-4: #3a300a;
1778
+ --ds-global-yellow-5: #4a3d0d;
1779
+ --ds-global-yellow-6: #a7881c;
1780
+ --ds-global-yellow-7: #cca723;
1781
+ --ds-global-yellow-8: #edc94b;
1782
+ --ds-global-yellow-9: #3d310a;
1783
+ --ds-global-yellow-10: #52430e;
1784
+ --ds-global-yellow-11: #695512;
1785
+ --ds-global-yellow-12: #ebc232;
1786
+ --ds-global-yellow-13: #faf0cd;
1787
+ --ds-global-yellow-contrast-1: #ffffff;
1788
+ --ds-global-yellow-contrast-2: #ccc9bf;
1789
+ }
1790
+
1791
+ }
1792
+
1793
+ /**
1794
+ * These files are generated from design tokens defind using Token Studio
1795
+ */
1796
+
1797
+ @layer ds.theme.typography.primary {
1798
+ :root, [data-ds-typography="primary"] {
1799
+ --ds-font-family: Inter;
1800
+ --ds-font-weight-medium: 500;
1801
+ --ds-font-weight-semibold: 600;
1802
+ --ds-font-weight-regular: 400;
1803
+ --ds-heading-2xl-font-weight: 500;
1804
+ --ds-heading-2xl-line-height: 1.3;
1805
+ --ds-heading-2xl-font-size: 3.75rem;
1806
+ --ds-heading-2xl-letter-spacing: -1%;
1807
+ --ds-heading-xl-font-weight: 500;
1808
+ --ds-heading-xl-line-height: 1.3;
1809
+ --ds-heading-xl-font-size: 3rem;
1810
+ --ds-heading-xl-letter-spacing: -1%;
1811
+ --ds-heading-lg-font-weight: 500;
1812
+ --ds-heading-lg-line-height: 1.3;
1813
+ --ds-heading-lg-font-size: 2.25rem;
1814
+ --ds-heading-lg-letter-spacing: -0.5%;
1815
+ --ds-heading-md-font-weight: 500;
1816
+ --ds-heading-md-line-height: 1.3;
1817
+ --ds-heading-md-font-size: 1.875rem;
1818
+ --ds-heading-md-letter-spacing: -0.25%;
1819
+ --ds-heading-sm-font-weight: 500;
1820
+ --ds-heading-sm-line-height: 1.3;
1821
+ --ds-heading-sm-font-size: 1.5rem;
1822
+ --ds-heading-sm-letter-spacing: 0%;
1823
+ --ds-heading-xs-font-weight: 500;
1824
+ --ds-heading-xs-line-height: 1.3;
1825
+ --ds-heading-xs-font-size: 1.3125rem;
1826
+ --ds-heading-xs-letter-spacing: 0.15%;
1827
+ --ds-heading-2xs-font-weight: 500;
1828
+ --ds-heading-2xs-line-height: 1.3;
1829
+ --ds-heading-2xs-font-size: 1.125rem;
1830
+ --ds-heading-2xs-letter-spacing: 0.15%;
1831
+ --ds-body-xl-font-weight: 400;
1832
+ --ds-body-xl-line-height: 1.5;
1833
+ --ds-body-xl-font-size: 1.5rem;
1834
+ --ds-body-xl-letter-spacing: 0.5%;
1835
+ --ds-body-lg-font-weight: 400;
1836
+ --ds-body-lg-line-height: 1.5;
1837
+ --ds-body-lg-font-size: 1.3125rem;
1838
+ --ds-body-lg-letter-spacing: 0.5%;
1839
+ --ds-body-md-font-weight: 400;
1840
+ --ds-body-md-line-height: 1.5;
1841
+ --ds-body-md-font-size: 1.125rem;
1842
+ --ds-body-md-letter-spacing: 0.5%;
1843
+ --ds-body-sm-font-weight: 400;
1844
+ --ds-body-sm-line-height: 1.5;
1845
+ --ds-body-sm-font-size: 1rem;
1846
+ --ds-body-sm-letter-spacing: 0.25%;
1847
+ --ds-body-xs-font-weight: 400;
1848
+ --ds-body-xs-line-height: 1.5;
1849
+ --ds-body-xs-font-size: 0.875rem;
1850
+ --ds-body-xs-letter-spacing: 0.15%;
1851
+ --ds-body-short-xl-font-weight: 400;
1852
+ --ds-body-short-xl-line-height: 1.3;
1853
+ --ds-body-short-xl-font-size: 1.5rem;
1854
+ --ds-body-short-xl-letter-spacing: 0.5%;
1855
+ --ds-body-short-lg-font-weight: 400;
1856
+ --ds-body-short-lg-line-height: 1.3;
1857
+ --ds-body-short-lg-font-size: 1.3125rem;
1858
+ --ds-body-short-lg-letter-spacing: 0.5%;
1859
+ --ds-body-short-md-font-weight: 400;
1860
+ --ds-body-short-md-line-height: 1.3;
1861
+ --ds-body-short-md-font-size: 1.125rem;
1862
+ --ds-body-short-md-letter-spacing: 0.5%;
1863
+ --ds-body-short-sm-font-weight: 400;
1864
+ --ds-body-short-sm-line-height: 1.3;
1865
+ --ds-body-short-sm-font-size: 1rem;
1866
+ --ds-body-short-sm-letter-spacing: 0.25%;
1867
+ --ds-body-short-xs-font-weight: 400;
1868
+ --ds-body-short-xs-line-height: 1.3;
1869
+ --ds-body-short-xs-font-size: 0.875rem;
1870
+ --ds-body-short-xs-letter-spacing: 0.15%;
1871
+ --ds-body-long-xl-font-weight: 400;
1872
+ --ds-body-long-xl-line-height: 1.7;
1873
+ --ds-body-long-xl-font-size: 1.5rem;
1874
+ --ds-body-long-xl-letter-spacing: 0.5%;
1875
+ --ds-body-long-lg-font-weight: 400;
1876
+ --ds-body-long-lg-line-height: 1.7;
1877
+ --ds-body-long-lg-font-size: 1.3125rem;
1878
+ --ds-body-long-lg-letter-spacing: 0.5%;
1879
+ --ds-body-long-md-font-weight: 400;
1880
+ --ds-body-long-md-line-height: 1.7;
1881
+ --ds-body-long-md-font-size: 1.125rem;
1882
+ --ds-body-long-md-letter-spacing: 0.5%;
1883
+ --ds-body-long-sm-font-weight: 400;
1884
+ --ds-body-long-sm-line-height: 1.7;
1885
+ --ds-body-long-sm-font-size: 1rem;
1886
+ --ds-body-long-sm-letter-spacing: 0.25%;
1887
+ --ds-body-long-xs-font-weight: 400;
1888
+ --ds-body-long-xs-line-height: 1.7;
1889
+ --ds-body-long-xs-font-size: 0.875rem;
1890
+ --ds-body-long-xs-letter-spacing: 0.15%;
1891
+ --ds-label-lg-font-weight: 500;
1892
+ --ds-label-lg-line-height: 1.3;
1893
+ --ds-label-lg-font-size: 1.3125rem;
1894
+ --ds-label-lg-letter-spacing: 0.5%;
1895
+ --ds-label-md-font-weight: 500;
1896
+ --ds-label-md-line-height: 1.3;
1897
+ --ds-label-md-font-size: 1.125rem;
1898
+ --ds-label-md-letter-spacing: 0.5%;
1899
+ --ds-label-sm-font-weight: 500;
1900
+ --ds-label-sm-line-height: 1.3;
1901
+ --ds-label-sm-font-size: 1rem;
1902
+ --ds-label-sm-letter-spacing: 0.25%;
1903
+ --ds-label-xs-font-weight: 500;
1904
+ --ds-label-xs-line-height: 1.3;
1905
+ --ds-label-xs-font-size: 0.875rem;
1906
+ --ds-label-xs-letter-spacing: 0.15%;
1907
+ --ds-error_message-lg-font-weight: 400;
1908
+ --ds-error_message-lg-line-height: 1.3;
1909
+ --ds-error_message-lg-font-size: 1.3125rem;
1910
+ --ds-error_message-lg-letter-spacing: 0.5%;
1911
+ --ds-error_message-md-font-weight: 400;
1912
+ --ds-error_message-md-line-height: 1.3;
1913
+ --ds-error_message-md-font-size: 1.125rem;
1914
+ --ds-error_message-md-letter-spacing: 0.5%;
1915
+ --ds-error_message-sm-font-weight: 400;
1916
+ --ds-error_message-sm-line-height: 1.3;
1917
+ --ds-error_message-sm-font-size: 1rem;
1918
+ --ds-error_message-sm-letter-spacing: 0.25%;
1919
+ --ds-error_message-xs-font-weight: 400;
1920
+ --ds-error_message-xs-line-height: 1.3;
1921
+ --ds-error_message-xs-font-size: 0.875rem;
1922
+ --ds-error_message-xs-letter-spacing: 0.15%;
1923
+ --ds-line-height-sm: 1.3;
1924
+ --ds-line-height-md: 1.5;
1925
+ --ds-line-height-lg: 1.7;
1926
+ --ds-font-size-1: 0.75rem;
1927
+ --ds-font-size-2: 0.8125rem;
1928
+ --ds-font-size-3: 0.875rem;
1929
+ --ds-font-size-4: 1rem;
1930
+ --ds-font-size-5: 1.125rem;
1931
+ --ds-font-size-6: 1.3125rem;
1932
+ --ds-font-size-7: 1.5rem;
1933
+ --ds-font-size-8: 1.875rem;
1934
+ --ds-font-size-9: 2.25rem;
1935
+ --ds-font-size-10: 3rem;
1936
+ --ds-font-size-11: 3.75rem;
1937
+ --ds-letter-spacing-1: -1%;
1938
+ --ds-letter-spacing-2: -0.5%;
1939
+ --ds-letter-spacing-3: -0.25%;
1940
+ --ds-letter-spacing-4: -0.15%;
1941
+ --ds-letter-spacing-5: 0%;
1942
+ --ds-letter-spacing-6: 0.15%;
1943
+ --ds-letter-spacing-7: 0.25%;
1944
+ --ds-letter-spacing-8: 0.5%;
1945
+ --ds-letter-spacing-9: 1.5%;
1946
+ --ds-udir-main: Inter;
1947
+ --ds-udir-bold: 500;
1948
+ --ds-udir-extra-bold: 600;
1949
+ --ds-udir-regular: 400;
1950
+ }
1951
+ }