@ks-digital/designsystem-themes 0.0.1-alpha.2 → 0.0.1-alpha.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +1 -0
  2. package/package.json +3 -2
  3. package/src/built/forvaltning.css +1319 -0
package/README.md CHANGED
@@ -7,6 +7,7 @@ This package provides prebuilt themes for use with Designsystemet at KS Digital.
7
7
  The following themes are officially supported:
8
8
 
9
9
  - **Ledsagerbevis**
10
+ - **Forvaltning**
10
11
 
11
12
  Additionally, a base style is provided and should be applied first. We aim to keep this base style as minimal as possible.
12
13
 
package/package.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "url": "https://github.com/ks-no/designsystem.git",
6
6
  "directory": "packages/themes"
7
7
  },
8
- "version": "0.0.1-alpha.2",
8
+ "version": "0.0.1-alpha.4",
9
9
  "license": "MIT",
10
10
  "private": false,
11
11
  "publishConfig": {
@@ -14,7 +14,8 @@
14
14
  "type": "module",
15
15
  "exports": {
16
16
  "./base.css": "./src/base.css",
17
- "./ledsagerbevis.css": "./src/built/ledsagerbevis.css"
17
+ "./ledsagerbevis.css": "./src/built/ledsagerbevis.css",
18
+ "./forvaltning.css": "./src/built/forvaltning.css"
18
19
  },
19
20
  "files": [
20
21
  "src"
package/src/built/forvaltning.css ADDED
@@ -0,0 +1,1319 @@
1
+ /*
2
+ Generated by v1.0.3 of the CLI
3
+ https://theme.designsystemet.no/themebuilder?appearance=light&main=primary%3A%23080e4a+accent%3A%231E98F5&neutral=%231E2B3C&support=extra1%3A%23F45F63+extra2%3A%23E5AA20&border-radius=4
4
+ */
5
+
6
+ @charset "UTF-8";
7
+
8
+ @layer ds.reset, ds.theme, ds.base, ds.utilities, ds.components;
9
+
10
+ /**
11
+ * These files are generated from design tokens defind using Token Studio
12
+ */
13
+
14
+ @layer ds.theme.color-scheme.light {
15
+ :root,
16
+ [data-color-scheme='light'] {
17
+ --ds-color-primary-background-default: #ffffff;
18
+ --ds-color-primary-background-tinted: #f3f3f6;
19
+ --ds-color-primary-surface-default: #ffffff;
20
+ --ds-color-primary-surface-tinted: #e8e8ee;
21
+ --ds-color-primary-surface-hover: #d8d9e3;
22
+ --ds-color-primary-surface-active: #c8c9d7;
23
+ --ds-color-primary-border-subtle: #b9bbcc;
24
+ --ds-color-primary-border-default: #737698;
25
+ --ds-color-primary-border-strong: #565a83;
26
+ --ds-color-primary-text-subtle: #565a83;
27
+ --ds-color-primary-text-default: #20265c;
28
+ --ds-color-primary-base-default: #080e4a;
29
+ --ds-color-primary-base-hover: #1b2158;
30
+ --ds-color-primary-base-active: #2f3467;
31
+ --ds-color-primary-base-contrast-subtle: #a1a4ba;
32
+ --ds-color-primary-base-contrast-default: #ffffff;
33
+ --ds-color-accent-background-default: #ffffff;
34
+ --ds-color-accent-background-tinted: #eaf5fe;
35
+ --ds-color-accent-surface-default: #ffffff;
36
+ --ds-color-accent-surface-tinted: #d5ecfd;
37
+ --ds-color-accent-surface-hover: #b9dffc;
38
+ --ds-color-accent-surface-active: #99d0fa;
39
+ --ds-color-accent-border-subtle: #7bc3f9;
40
+ --ds-color-accent-border-default: #197dc9;
41
+ --ds-color-accent-border-strong: #13619c;
42
+ --ds-color-accent-text-subtle: #13619c;
43
+ --ds-color-accent-text-default: #092d49;
44
+ --ds-color-accent-base-default: #1e98f5;
45
+ --ds-color-accent-base-hover: #53b0f7;
46
+ --ds-color-accent-base-active: #81c5f9;
47
+ --ds-color-accent-base-contrast-subtle: #010507;
48
+ --ds-color-accent-base-contrast-default: #000000;
49
+ --ds-color-neutral-background-default: #ffffff;
50
+ --ds-color-neutral-background-tinted: #f3f4f4;
51
+ --ds-color-neutral-surface-default: #ffffff;
52
+ --ds-color-neutral-surface-tinted: #e7e9ea;
53
+ --ds-color-neutral-surface-hover: #d8dadd;
54
+ --ds-color-neutral-surface-active: #c7cacf;
55
+ --ds-color-neutral-border-subtle: #b8bcc1;
56
+ --ds-color-neutral-border-default: #717a84;
57
+ --ds-color-neutral-border-strong: #545e6b;
58
+ --ds-color-neutral-text-subtle: #545e6b;
59
+ --ds-color-neutral-text-default: #1f2c3d;
60
+ --ds-color-neutral-base-default: #1e2b3c;
61
+ --ds-color-neutral-base-hover: #313d4d;
62
+ --ds-color-neutral-base-active: #444f5d;
63
+ --ds-color-neutral-base-contrast-subtle: #babec4;
64
+ --ds-color-neutral-base-contrast-default: #ffffff;
65
+ --ds-color-extra1-background-default: #ffffff;
66
+ --ds-color-extra1-background-tinted: #fef0f1;
67
+ --ds-color-extra1-surface-default: #ffffff;
68
+ --ds-color-extra1-surface-tinted: #fde2e3;
69
+ --ds-color-extra1-surface-hover: #fccfd1;
70
+ --ds-color-extra1-surface-active: #fababc;
71
+ --ds-color-extra1-border-subtle: #f9a5a8;
72
+ --ds-color-extra1-border-default: #cb4f53;
73
+ --ds-color-extra1-border-strong: #9e3d40;
74
+ --ds-color-extra1-text-subtle: #9e3d40;
75
+ --ds-color-extra1-text-default: #4b1d1e;
76
+ --ds-color-extra1-base-default: #f45f63;
77
+ --ds-color-extra1-base-hover: #f78588;
78
+ --ds-color-extra1-base-active: #f9a6a8;
79
+ --ds-color-extra1-base-contrast-subtle: #020101;
80
+ --ds-color-extra1-base-contrast-default: #000000;
81
+ --ds-color-extra2-background-default: #ffffff;
82
+ --ds-color-extra2-background-tinted: #fbf3df;
83
+ --ds-color-extra2-surface-default: #ffffff;
84
+ --ds-color-extra2-surface-tinted: #f8e7c1;
85
+ --ds-color-extra2-surface-hover: #f3d797;
86
+ --ds-color-extra2-surface-active: #edc567;
87
+ --ds-color-extra2-border-subtle: #e8b43a;
88
+ --ds-color-extra2-border-default: #9a7216;
89
+ --ds-color-extra2-border-strong: #775811;
90
+ --ds-color-extra2-text-subtle: #775811;
91
+ --ds-color-extra2-text-default: #382908;
92
+ --ds-color-extra2-base-default: #e5aa20;
93
+ --ds-color-extra2-base-hover: #c9951c;
94
+ --ds-color-extra2-base-active: #af8218;
95
+ --ds-color-extra2-base-contrast-subtle: #2c2006;
96
+ --ds-color-extra2-base-contrast-default: #000000;
97
+ --ds-color-success-background-default: #ffffff;
98
+ --ds-color-success-background-tinted: #ecf6ee;
99
+ --ds-color-success-surface-default: #ffffff;
100
+ --ds-color-success-surface-tinted: #daeddd;
101
+ --ds-color-success-surface-hover: #c3e2c7;
102
+ --ds-color-success-surface-active: #a8d5ae;
103
+ --ds-color-success-border-subtle: #8fc997;
104
+ --ds-color-success-border-default: #108c22;
105
+ --ds-color-success-border-strong: #056d13;
106
+ --ds-color-success-text-subtle: #056d13;
107
+ --ds-color-success-text-default: #023409;
108
+ --ds-color-success-base-default: #068718;
109
+ --ds-color-success-base-hover: #057014;
110
+ --ds-color-success-base-active: #045a10;
111
+ --ds-color-success-base-contrast-subtle: #fafdfb;
112
+ --ds-color-success-base-contrast-default: #ffffff;
113
+ --ds-color-danger-background-default: #ffffff;
114
+ --ds-color-danger-background-tinted: #fbf1f1;
115
+ --ds-color-danger-surface-default: #ffffff;
116
+ --ds-color-danger-surface-tinted: #f8e4e4;
117
+ --ds-color-danger-surface-hover: #f3d2d2;
118
+ --ds-color-danger-surface-active: #edbfbf;
119
+ --ds-color-danger-border-subtle: #e8adad;
120
+ --ds-color-danger-border-default: #ce4d4d;
121
+ --ds-color-danger-border-strong: #b81a1a;
122
+ --ds-color-danger-text-subtle: #b81a1a;
123
+ --ds-color-danger-text-default: #590d0d;
124
+ --ds-color-danger-base-default: #c01b1b;
125
+ --ds-color-danger-base-hover: #9b1616;
126
+ --ds-color-danger-base-active: #791111;
127
+ --ds-color-danger-base-contrast-subtle: #f7e1e1;
128
+ --ds-color-danger-base-contrast-default: #ffffff;
129
+ --ds-color-info-background-default: #ffffff;
130
+ --ds-color-info-background-tinted: #edf5fa;
131
+ --ds-color-info-surface-default: #ffffff;
132
+ --ds-color-info-surface-tinted: #dcebf6;
133
+ --ds-color-info-surface-hover: #c5ddf0;
134
+ --ds-color-info-surface-active: #abcfe9;
135
+ --ds-color-info-border-subtle: #94c1e3;
136
+ --ds-color-info-border-default: #1f7dc5;
137
+ --ds-color-info-border-strong: #0860a3;
138
+ --ds-color-info-text-subtle: #0860a3;
139
+ --ds-color-info-text-default: #042d4d;
140
+ --ds-color-info-base-default: #0a71c0;
141
+ --ds-color-info-base-hover: #085d9f;
142
+ --ds-color-info-base-active: #074a7e;
143
+ --ds-color-info-base-contrast-subtle: #eff6fb;
144
+ --ds-color-info-base-contrast-default: #ffffff;
145
+ --ds-color-warning-background-default: #ffffff;
146
+ --ds-color-warning-background-tinted: #fcf2e2;
147
+ --ds-color-warning-surface-default: #ffffff;
148
+ --ds-color-warning-surface-tinted: #fae6c6;
149
+ --ds-color-warning-surface-hover: #f6d5a0;
150
+ --ds-color-warning-surface-active: #f2c275;
151
+ --ds-color-warning-border-subtle: #eeb04c;
152
+ --ds-color-warning-border-default: #a56d13;
153
+ --ds-color-warning-border-strong: #80540f;
154
+ --ds-color-warning-text-subtle: #80540f;
155
+ --ds-color-warning-text-default: #3c2807;
156
+ --ds-color-warning-base-default: #ea9b1b;
157
+ --ds-color-warning-base-hover: #cd8818;
158
+ --ds-color-warning-base-active: #b27614;
159
+ --ds-color-warning-base-contrast-subtle: #271a04;
160
+ --ds-color-warning-base-contrast-default: #000000;
161
+ --ds-color-focus-inner: #ffffff;
162
+ --ds-color-focus-outer: #1f2c3d;
163
+ --ds-link-color-visited: #663299;
164
+
165
+ color-scheme: light;
166
+ }
167
+
168
+ @media (prefers-color-scheme: light) {
169
+ [data-color-scheme='auto'] {
170
+ --ds-color-primary-background-default: #ffffff;
171
+ --ds-color-primary-background-tinted: #f3f3f6;
172
+ --ds-color-primary-surface-default: #ffffff;
173
+ --ds-color-primary-surface-tinted: #e8e8ee;
174
+ --ds-color-primary-surface-hover: #d8d9e3;
175
+ --ds-color-primary-surface-active: #c8c9d7;
176
+ --ds-color-primary-border-subtle: #b9bbcc;
177
+ --ds-color-primary-border-default: #737698;
178
+ --ds-color-primary-border-strong: #565a83;
179
+ --ds-color-primary-text-subtle: #565a83;
180
+ --ds-color-primary-text-default: #20265c;
181
+ --ds-color-primary-base-default: #080e4a;
182
+ --ds-color-primary-base-hover: #1b2158;
183
+ --ds-color-primary-base-active: #2f3467;
184
+ --ds-color-primary-base-contrast-subtle: #a1a4ba;
185
+ --ds-color-primary-base-contrast-default: #ffffff;
186
+ --ds-color-accent-background-default: #ffffff;
187
+ --ds-color-accent-background-tinted: #eaf5fe;
188
+ --ds-color-accent-surface-default: #ffffff;
189
+ --ds-color-accent-surface-tinted: #d5ecfd;
190
+ --ds-color-accent-surface-hover: #b9dffc;
191
+ --ds-color-accent-surface-active: #99d0fa;
192
+ --ds-color-accent-border-subtle: #7bc3f9;
193
+ --ds-color-accent-border-default: #197dc9;
194
+ --ds-color-accent-border-strong: #13619c;
195
+ --ds-color-accent-text-subtle: #13619c;
196
+ --ds-color-accent-text-default: #092d49;
197
+ --ds-color-accent-base-default: #1e98f5;
198
+ --ds-color-accent-base-hover: #53b0f7;
199
+ --ds-color-accent-base-active: #81c5f9;
200
+ --ds-color-accent-base-contrast-subtle: #010507;
201
+ --ds-color-accent-base-contrast-default: #000000;
202
+ --ds-color-neutral-background-default: #ffffff;
203
+ --ds-color-neutral-background-tinted: #f3f4f4;
204
+ --ds-color-neutral-surface-default: #ffffff;
205
+ --ds-color-neutral-surface-tinted: #e7e9ea;
206
+ --ds-color-neutral-surface-hover: #d8dadd;
207
+ --ds-color-neutral-surface-active: #c7cacf;
208
+ --ds-color-neutral-border-subtle: #b8bcc1;
209
+ --ds-color-neutral-border-default: #717a84;
210
+ --ds-color-neutral-border-strong: #545e6b;
211
+ --ds-color-neutral-text-subtle: #545e6b;
212
+ --ds-color-neutral-text-default: #1f2c3d;
213
+ --ds-color-neutral-base-default: #1e2b3c;
214
+ --ds-color-neutral-base-hover: #313d4d;
215
+ --ds-color-neutral-base-active: #444f5d;
216
+ --ds-color-neutral-base-contrast-subtle: #babec4;
217
+ --ds-color-neutral-base-contrast-default: #ffffff;
218
+ --ds-color-extra1-background-default: #ffffff;
219
+ --ds-color-extra1-background-tinted: #fef0f1;
220
+ --ds-color-extra1-surface-default: #ffffff;
221
+ --ds-color-extra1-surface-tinted: #fde2e3;
222
+ --ds-color-extra1-surface-hover: #fccfd1;
223
+ --ds-color-extra1-surface-active: #fababc;
224
+ --ds-color-extra1-border-subtle: #f9a5a8;
225
+ --ds-color-extra1-border-default: #cb4f53;
226
+ --ds-color-extra1-border-strong: #9e3d40;
227
+ --ds-color-extra1-text-subtle: #9e3d40;
228
+ --ds-color-extra1-text-default: #4b1d1e;
229
+ --ds-color-extra1-base-default: #f45f63;
230
+ --ds-color-extra1-base-hover: #f78588;
231
+ --ds-color-extra1-base-active: #f9a6a8;
232
+ --ds-color-extra1-base-contrast-subtle: #020101;
233
+ --ds-color-extra1-base-contrast-default: #000000;
234
+ --ds-color-extra2-background-default: #ffffff;
235
+ --ds-color-extra2-background-tinted: #fbf3df;
236
+ --ds-color-extra2-surface-default: #ffffff;
237
+ --ds-color-extra2-surface-tinted: #f8e7c1;
238
+ --ds-color-extra2-surface-hover: #f3d797;
239
+ --ds-color-extra2-surface-active: #edc567;
240
+ --ds-color-extra2-border-subtle: #e8b43a;
241
+ --ds-color-extra2-border-default: #9a7216;
242
+ --ds-color-extra2-border-strong: #775811;
243
+ --ds-color-extra2-text-subtle: #775811;
244
+ --ds-color-extra2-text-default: #382908;
245
+ --ds-color-extra2-base-default: #e5aa20;
246
+ --ds-color-extra2-base-hover: #c9951c;
247
+ --ds-color-extra2-base-active: #af8218;
248
+ --ds-color-extra2-base-contrast-subtle: #2c2006;
249
+ --ds-color-extra2-base-contrast-default: #000000;
250
+ --ds-color-success-background-default: #ffffff;
251
+ --ds-color-success-background-tinted: #ecf6ee;
252
+ --ds-color-success-surface-default: #ffffff;
253
+ --ds-color-success-surface-tinted: #daeddd;
254
+ --ds-color-success-surface-hover: #c3e2c7;
255
+ --ds-color-success-surface-active: #a8d5ae;
256
+ --ds-color-success-border-subtle: #8fc997;
257
+ --ds-color-success-border-default: #108c22;
258
+ --ds-color-success-border-strong: #056d13;
259
+ --ds-color-success-text-subtle: #056d13;
260
+ --ds-color-success-text-default: #023409;
261
+ --ds-color-success-base-default: #068718;
262
+ --ds-color-success-base-hover: #057014;
263
+ --ds-color-success-base-active: #045a10;
264
+ --ds-color-success-base-contrast-subtle: #fafdfb;
265
+ --ds-color-success-base-contrast-default: #ffffff;
266
+ --ds-color-danger-background-default: #ffffff;
267
+ --ds-color-danger-background-tinted: #fbf1f1;
268
+ --ds-color-danger-surface-default: #ffffff;
269
+ --ds-color-danger-surface-tinted: #f8e4e4;
270
+ --ds-color-danger-surface-hover: #f3d2d2;
271
+ --ds-color-danger-surface-active: #edbfbf;
272
+ --ds-color-danger-border-subtle: #e8adad;
273
+ --ds-color-danger-border-default: #ce4d4d;
274
+ --ds-color-danger-border-strong: #b81a1a;
275
+ --ds-color-danger-text-subtle: #b81a1a;
276
+ --ds-color-danger-text-default: #590d0d;
277
+ --ds-color-danger-base-default: #c01b1b;
278
+ --ds-color-danger-base-hover: #9b1616;
279
+ --ds-color-danger-base-active: #791111;
280
+ --ds-color-danger-base-contrast-subtle: #f7e1e1;
281
+ --ds-color-danger-base-contrast-default: #ffffff;
282
+ --ds-color-info-background-default: #ffffff;
283
+ --ds-color-info-background-tinted: #edf5fa;
284
+ --ds-color-info-surface-default: #ffffff;
285
+ --ds-color-info-surface-tinted: #dcebf6;
286
+ --ds-color-info-surface-hover: #c5ddf0;
287
+ --ds-color-info-surface-active: #abcfe9;
288
+ --ds-color-info-border-subtle: #94c1e3;
289
+ --ds-color-info-border-default: #1f7dc5;
290
+ --ds-color-info-border-strong: #0860a3;
291
+ --ds-color-info-text-subtle: #0860a3;
292
+ --ds-color-info-text-default: #042d4d;
293
+ --ds-color-info-base-default: #0a71c0;
294
+ --ds-color-info-base-hover: #085d9f;
295
+ --ds-color-info-base-active: #074a7e;
296
+ --ds-color-info-base-contrast-subtle: #eff6fb;
297
+ --ds-color-info-base-contrast-default: #ffffff;
298
+ --ds-color-warning-background-default: #ffffff;
299
+ --ds-color-warning-background-tinted: #fcf2e2;
300
+ --ds-color-warning-surface-default: #ffffff;
301
+ --ds-color-warning-surface-tinted: #fae6c6;
302
+ --ds-color-warning-surface-hover: #f6d5a0;
303
+ --ds-color-warning-surface-active: #f2c275;
304
+ --ds-color-warning-border-subtle: #eeb04c;
305
+ --ds-color-warning-border-default: #a56d13;
306
+ --ds-color-warning-border-strong: #80540f;
307
+ --ds-color-warning-text-subtle: #80540f;
308
+ --ds-color-warning-text-default: #3c2807;
309
+ --ds-color-warning-base-default: #ea9b1b;
310
+ --ds-color-warning-base-hover: #cd8818;
311
+ --ds-color-warning-base-active: #b27614;
312
+ --ds-color-warning-base-contrast-subtle: #271a04;
313
+ --ds-color-warning-base-contrast-default: #000000;
314
+ --ds-color-focus-inner: #ffffff;
315
+ --ds-color-focus-outer: #1f2c3d;
316
+ --ds-link-color-visited: #663299;
317
+
318
+ color-scheme: light;
319
+ }
320
+ }
321
+ }
322
+
323
+ /**
324
+ * These files are generated from design tokens defind using Token Studio
325
+ */
326
+
327
+ @layer ds.theme.typography.secondary {
328
+ [data-typography='secondary'] {
329
+ --ds-font-family: Inter;
330
+ --ds-font-weight-medium: 500;
331
+ --ds-font-weight-semibold: 600;
332
+ --ds-font-weight-regular: 400;
333
+ --ds-heading-2xl-font-weight: 500;
334
+ --ds-heading-2xl-line-height: 1.3;
335
+ --ds-heading-2xl-font-size: 3.75rem;
336
+ --ds-heading-2xl-letter-spacing: -1%;
337
+ --ds-heading-xl-font-weight: 500;
338
+ --ds-heading-xl-line-height: 1.3;
339
+ --ds-heading-xl-font-size: 3rem;
340
+ --ds-heading-xl-letter-spacing: -1%;
341
+ --ds-heading-lg-font-weight: 500;
342
+ --ds-heading-lg-line-height: 1.3;
343
+ --ds-heading-lg-font-size: 2.25rem;
344
+ --ds-heading-lg-letter-spacing: -0.5%;
345
+ --ds-heading-md-font-weight: 500;
346
+ --ds-heading-md-line-height: 1.3;
347
+ --ds-heading-md-font-size: 1.875rem;
348
+ --ds-heading-md-letter-spacing: -0.25%;
349
+ --ds-heading-sm-font-weight: 500;
350
+ --ds-heading-sm-line-height: 1.3;
351
+ --ds-heading-sm-font-size: 1.5rem;
352
+ --ds-heading-sm-letter-spacing: 0%;
353
+ --ds-heading-xs-font-weight: 500;
354
+ --ds-heading-xs-line-height: 1.3;
355
+ --ds-heading-xs-font-size: 1.3125rem;
356
+ --ds-heading-xs-letter-spacing: 0.15%;
357
+ --ds-heading-2xs-font-weight: 500;
358
+ --ds-heading-2xs-line-height: 1.3;
359
+ --ds-heading-2xs-font-size: 1.125rem;
360
+ --ds-heading-2xs-letter-spacing: 0.15%;
361
+ --ds-body-xl-font-weight: 400;
362
+ --ds-body-xl-line-height: 1.5;
363
+ --ds-body-xl-font-size: 1.5rem;
364
+ --ds-body-xl-letter-spacing: 0.5%;
365
+ --ds-body-lg-font-weight: 400;
366
+ --ds-body-lg-line-height: 1.5;
367
+ --ds-body-lg-font-size: 1.3125rem;
368
+ --ds-body-lg-letter-spacing: 0.5%;
369
+ --ds-body-md-font-weight: 400;
370
+ --ds-body-md-line-height: 1.5;
371
+ --ds-body-md-font-size: 1.125rem;
372
+ --ds-body-md-letter-spacing: 0.5%;
373
+ --ds-body-sm-font-weight: 400;
374
+ --ds-body-sm-line-height: 1.5;
375
+ --ds-body-sm-font-size: 1rem;
376
+ --ds-body-sm-letter-spacing: 0.25%;
377
+ --ds-body-xs-font-weight: 400;
378
+ --ds-body-xs-line-height: 1.5;
379
+ --ds-body-xs-font-size: 0.875rem;
380
+ --ds-body-xs-letter-spacing: 0.15%;
381
+ --ds-body-short-xl-font-weight: 400;
382
+ --ds-body-short-xl-line-height: 1.3;
383
+ --ds-body-short-xl-font-size: 1.5rem;
384
+ --ds-body-short-xl-letter-spacing: 0.5%;
385
+ --ds-body-short-lg-font-weight: 400;
386
+ --ds-body-short-lg-line-height: 1.3;
387
+ --ds-body-short-lg-font-size: 1.3125rem;
388
+ --ds-body-short-lg-letter-spacing: 0.5%;
389
+ --ds-body-short-md-font-weight: 400;
390
+ --ds-body-short-md-line-height: 1.3;
391
+ --ds-body-short-md-font-size: 1.125rem;
392
+ --ds-body-short-md-letter-spacing: 0.5%;
393
+ --ds-body-short-sm-font-weight: 400;
394
+ --ds-body-short-sm-line-height: 1.3;
395
+ --ds-body-short-sm-font-size: 1rem;
396
+ --ds-body-short-sm-letter-spacing: 0.25%;
397
+ --ds-body-short-xs-font-weight: 400;
398
+ --ds-body-short-xs-line-height: 1.3;
399
+ --ds-body-short-xs-font-size: 0.875rem;
400
+ --ds-body-short-xs-letter-spacing: 0.15%;
401
+ --ds-body-long-xl-font-weight: 400;
402
+ --ds-body-long-xl-line-height: 1.7;
403
+ --ds-body-long-xl-font-size: 1.5rem;
404
+ --ds-body-long-xl-letter-spacing: 0.5%;
405
+ --ds-body-long-lg-font-weight: 400;
406
+ --ds-body-long-lg-line-height: 1.7;
407
+ --ds-body-long-lg-font-size: 1.3125rem;
408
+ --ds-body-long-lg-letter-spacing: 0.5%;
409
+ --ds-body-long-md-font-weight: 400;
410
+ --ds-body-long-md-line-height: 1.7;
411
+ --ds-body-long-md-font-size: 1.125rem;
412
+ --ds-body-long-md-letter-spacing: 0.5%;
413
+ --ds-body-long-sm-font-weight: 400;
414
+ --ds-body-long-sm-line-height: 1.7;
415
+ --ds-body-long-sm-font-size: 1rem;
416
+ --ds-body-long-sm-letter-spacing: 0.25%;
417
+ --ds-body-long-xs-font-weight: 400;
418
+ --ds-body-long-xs-line-height: 1.7;
419
+ --ds-body-long-xs-font-size: 0.875rem;
420
+ --ds-body-long-xs-letter-spacing: 0.15%;
421
+ --ds-line-height-sm: 1.3;
422
+ --ds-line-height-md: 1.5;
423
+ --ds-line-height-lg: 1.7;
424
+ --ds-font-size-1: 0.75rem;
425
+ --ds-font-size-2: 0.875rem;
426
+ --ds-font-size-3: 1rem;
427
+ --ds-font-size-4: 1.125rem;
428
+ --ds-font-size-5: 1.3125rem;
429
+ --ds-font-size-6: 1.5rem;
430
+ --ds-font-size-7: 1.875rem;
431
+ --ds-font-size-8: 2.25rem;
432
+ --ds-font-size-9: 3rem;
433
+ --ds-font-size-10: 3.75rem;
434
+ --ds-letter-spacing-1: -1%;
435
+ --ds-letter-spacing-2: -0.5%;
436
+ --ds-letter-spacing-3: -0.25%;
437
+ --ds-letter-spacing-4: -0.15%;
438
+ --ds-letter-spacing-5: 0%;
439
+ --ds-letter-spacing-6: 0.15%;
440
+ --ds-letter-spacing-7: 0.25%;
441
+ --ds-letter-spacing-8: 0.5%;
442
+ --ds-letter-spacing-9: 1.5%;
443
+ }
444
+ }
445
+ /**
446
+ * These files are generated from design tokens defind using Token Studio
447
+ */
448
+
449
+ @layer ds.theme.semantic {
450
+ :root {
451
+ --ds-size-base: 18;
452
+ --ds-size-step: 4;
453
+ --ds-border-radius-base: 0.25rem;
454
+ --ds-border-radius-scale: 0.25rem;
455
+ --ds-border-radius-sm: min(
456
+ var(--ds-border-radius-base) * 0.5,
457
+ var(--ds-border-radius-scale)
458
+ );
459
+ --ds-border-radius-md: min(
460
+ var(--ds-border-radius-base),
461
+ var(--ds-border-radius-scale) * 2
462
+ );
463
+ --ds-border-radius-lg: min(
464
+ var(--ds-border-radius-base) * 2,
465
+ var(--ds-border-radius-scale) * 5
466
+ );
467
+ --ds-border-radius-xl: min(
468
+ var(--ds-border-radius-base) * 3,
469
+ var(--ds-border-radius-scale) * 7
470
+ );
471
+ --ds-border-radius-default: var(--ds-border-radius-base);
472
+ --ds-border-radius-full: 624.9375rem;
473
+ --ds-opacity-disabled: 30%;
474
+ --ds-border-width-default: 1px;
475
+ --ds-border-width-focus: 3px;
476
+ --ds-shadow-xs:
477
+ 0 0 1px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
478
+ --ds-shadow-sm:
479
+ 0 0 1px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.12),
480
+ 0 2px 4px 0 rgba(0, 0, 0, 0.1);
481
+ --ds-shadow-md:
482
+ 0 0 1px 0 rgba(0, 0, 0, 0.14), 0 2px 4px 0 rgba(0, 0, 0, 0.12),
483
+ 0 4px 8px 0 rgba(0, 0, 0, 0.12);
484
+ --ds-shadow-lg:
485
+ 0 0 1px 0 rgba(0, 0, 0, 0.13), 0 3px 5px 0 rgba(0, 0, 0, 0.13),
486
+ 0 6px 12px 0 rgba(0, 0, 0, 0.14);
487
+ --ds-shadow-xl:
488
+ 0 0 1px 0 rgba(0, 0, 0, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.16),
489
+ 0 12px 24px 0 rgba(0, 0, 0, 0.16);
490
+
491
+ --ds-size-0: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 0);
492
+ --ds-size-1: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 1);
493
+ --ds-size-2: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 2);
494
+ --ds-size-3: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 3);
495
+ --ds-size-4: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 4);
496
+ --ds-size-5: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 5);
497
+ --ds-size-6: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 6);
498
+ --ds-size-7: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 7);
499
+ --ds-size-8: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 8);
500
+ --ds-size-9: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 9);
501
+ --ds-size-10: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 10);
502
+ --ds-size-11: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 11);
503
+ --ds-size-12: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 12);
504
+ --ds-size-13: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 13);
505
+ --ds-size-14: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 14);
506
+ --ds-size-15: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 15);
507
+ --ds-size-18: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 18);
508
+ --ds-size-22: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 22);
509
+ --ds-size-26: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 26);
510
+ --ds-size-30: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 30);
511
+
512
+ @supports (width: round(down, 0.1em, 1px)) {
513
+ --ds-size-0: round(
514
+ down,
515
+ calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 0),
516
+ 0.0625rem
517
+ );
518
+ --ds-size-1: round(
519
+ down,
520
+ calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 1),
521
+ 0.0625rem
522
+ );
523
+ --ds-size-2: round(
524
+ down,
525
+ calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 2),
526
+ 0.0625rem
527
+ );
528
+ --ds-size-3: round(
529
+ down,
530
+ calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 3),
531
+ 0.0625rem
532
+ );
533
+ --ds-size-4: round(
534
+ down,
535
+ calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 4),
536
+ 0.0625rem
537
+ );
538
+ --ds-size-5: round(
539
+ down,
540
+ calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 5),
541
+ 0.0625rem
542
+ );
543
+ --ds-size-6: round(
544
+ down,
545
+ calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 6),
546
+ 0.0625rem
547
+ );
548
+ --ds-size-7: round(
549
+ down,
550
+ calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 7),
551
+ 0.0625rem
552
+ );
553
+ --ds-size-8: round(
554
+ down,
555
+ calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 8),
556
+ 0.0625rem
557
+ );
558
+ --ds-size-9: round(
559
+ down,
560
+ calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 9),
561
+ 0.0625rem
562
+ );
563
+ --ds-size-10: round(
564
+ down,
565
+ calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 10),
566
+ 0.0625rem
567
+ );
568
+ --ds-size-11: round(
569
+ down,
570
+ calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 11),
571
+ 0.0625rem
572
+ );
573
+ --ds-size-12: round(
574
+ down,
575
+ calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 12),
576
+ 0.0625rem
577
+ );
578
+ --ds-size-13: round(
579
+ down,
580
+ calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 13),
581
+ 0.0625rem
582
+ );
583
+ --ds-size-14: round(
584
+ down,
585
+ calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 14),
586
+ 0.0625rem
587
+ );
588
+ --ds-size-15: round(
589
+ down,
590
+ calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 15),
591
+ 0.0625rem
592
+ );
593
+ --ds-size-18: round(
594
+ down,
595
+ calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 18),
596
+ 0.0625rem
597
+ );
598
+ --ds-size-22: round(
599
+ down,
600
+ calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 22),
601
+ 0.0625rem
602
+ );
603
+ --ds-size-26: round(
604
+ down,
605
+ calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 26),
606
+ 0.0625rem
607
+ );
608
+ --ds-size-30: round(
609
+ down,
610
+ calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 30),
611
+ 0.0625rem
612
+ );
613
+ }
614
+ }
615
+ }
616
+
617
+ /**
618
+ * These files are generated from design tokens defind using Token Studio
619
+ */
620
+
621
+ @layer ds.theme.color-scheme.dark {
622
+ [data-color-scheme='dark'] {
623
+ --ds-color-primary-background-default: #0c143a;
624
+ --ds-color-primary-background-tinted: #141d42;
625
+ --ds-color-primary-surface-default: #1d254a;
626
+ --ds-color-primary-surface-tinted: #232c4f;
627
+ --ds-color-primary-surface-hover: #2c3355;
628
+ --ds-color-primary-surface-active: #3a4161;
629
+ --ds-color-primary-border-subtle: #484f6c;
630
+ --ds-color-primary-border-default: #7c8096;
631
+ --ds-color-primary-border-strong: #a4a7b6;
632
+ --ds-color-primary-text-subtle: #a4a7b6;
633
+ --ds-color-primary-text-default: #ebecef;
634
+ --ds-color-primary-base-default: #a8aabf;
635
+ --ds-color-primary-base-hover: #9294af;
636
+ --ds-color-primary-base-active: #7c7f9f;
637
+ --ds-color-primary-base-contrast-subtle: #1b1c1f;
638
+ --ds-color-primary-base-contrast-default: #000000;
639
+ --ds-color-accent-background-default: #0e1923;
640
+ --ds-color-accent-background-tinted: #12212e;
641
+ --ds-color-accent-surface-default: #17293b;
642
+ --ds-color-accent-surface-tinted: #1a2f43;
643
+ --ds-color-accent-surface-hover: #1e374f;
644
+ --ds-color-accent-surface-active: #264563;
645
+ --ds-color-accent-border-subtle: #2d5376;
646
+ --ds-color-accent-border-default: #4985be;
647
+ --ds-color-accent-border-strong: #76ade0;
648
+ --ds-color-accent-text-subtle: #76ade0;
649
+ --ds-color-accent-text-default: #e2eef8;
650
+ --ds-color-accent-base-default: #135f9a;
651
+ --ds-color-accent-base-hover: #0f4c7a;
652
+ --ds-color-accent-base-active: #0b395d;
653
+ --ds-color-accent-base-contrast-subtle: #fbfcfd;
654
+ --ds-color-accent-base-contrast-default: #ffffff;
655
+ --ds-color-neutral-background-default: #13181f;
656
+ --ds-color-neutral-background-tinted: #192029;
657
+ --ds-color-neutral-surface-default: #202834;
658
+ --ds-color-neutral-surface-tinted: #262e3a;
659
+ --ds-color-neutral-surface-hover: #2e3641;
660
+ --ds-color-neutral-surface-active: #3c444e;
661
+ --ds-color-neutral-border-subtle: #49515a;
662
+ --ds-color-neutral-border-default: #7c8289;
663
+ --ds-color-neutral-border-strong: #a4a8ad;
664
+ --ds-color-neutral-text-subtle: #a4a8ad;
665
+ --ds-color-neutral-text-default: #ebeced;
666
+ --ds-color-neutral-base-default: #a6acb2;
667
+ --ds-color-neutral-base-hover: #90979f;
668
+ --ds-color-neutral-base-active: #7a828c;
669
+ --ds-color-neutral-base-contrast-subtle: #1b1c1d;
670
+ --ds-color-neutral-base-contrast-default: #000000;
671
+ --ds-color-extra1-background-default: #241313;
672
+ --ds-color-extra1-background-tinted: #301919;
673
+ --ds-color-extra1-surface-default: #3c2020;
674
+ --ds-color-extra1-surface-tinted: #452524;
675
+ --ds-color-extra1-surface-hover: #502b2a;
676
+ --ds-color-extra1-surface-active: #653635;
677
+ --ds-color-extra1-border-subtle: #78403f;
678
+ --ds-color-extra1-border-default: #c16766;
679
+ --ds-color-extra1-border-strong: #e39291;
680
+ --ds-color-extra1-text-subtle: #e39291;
681
+ --ds-color-extra1-text-default: #f9e8e8;
682
+ --ds-color-extra1-base-default: #9f3e41;
683
+ --ds-color-extra1-base-hover: #7f3234;
684
+ --ds-color-extra1-base-active: #612628;
685
+ --ds-color-extra1-base-contrast-subtle: #ffffff;
686
+ --ds-color-extra1-base-contrast-default: #ffffff;
687
+ --ds-color-extra2-background-default: #1c170d;
688
+ --ds-color-extra2-background-tinted: #261f11;
689
+ --ds-color-extra2-surface-default: #2f2716;
690
+ --ds-color-extra2-surface-tinted: #372c19;
691
+ --ds-color-extra2-surface-hover: #40341d;
692
+ --ds-color-extra2-surface-active: #504124;
693
+ --ds-color-extra2-border-subtle: #5f4e2b;
694
+ --ds-color-extra2-border-default: #9a7d46;
695
+ --ds-color-extra2-border-strong: #c8a25b;
696
+ --ds-color-extra2-text-subtle: #c8a25b;
697
+ --ds-color-extra2-text-default: #f5ebd8;
698
+ --ds-color-extra2-base-default: #513c0b;
699
+ --ds-color-extra2-base-hover: #694e0f;
700
+ --ds-color-extra2-base-active: #816012;
701
+ --ds-color-extra2-base-contrast-subtle: #ddd9cf;
702
+ --ds-color-extra2-base-contrast-default: #ffffff;
703
+ --ds-color-success-background-default: #0d1b0d;
704
+ --ds-color-success-background-tinted: #112411;
705
+ --ds-color-success-surface-default: #152d15;
706
+ --ds-color-success-surface-tinted: #183418;
707
+ --ds-color-success-surface-hover: #1c3c1c;
708
+ --ds-color-success-surface-active: #244c24;
709
+ --ds-color-success-border-subtle: #2b5a2b;
710
+ --ds-color-success-border-default: #528f52;
711
+ --ds-color-success-border-strong: #89b289;
712
+ --ds-color-success-text-subtle: #89b289;
713
+ --ds-color-success-text-default: #e6efe6;
714
+ --ds-color-success-base-default: #138d24;
715
+ --ds-color-success-base-hover: #3ca14b;
716
+ --ds-color-success-base-active: #66b571;
717
+ --ds-color-success-base-contrast-subtle: #010501;
718
+ --ds-color-success-base-contrast-default: #000000;
719
+ --ds-color-danger-background-default: #2a100e;
720
+ --ds-color-danger-background-tinted: #371512;
721
+ --ds-color-danger-surface-default: #451b17;
722
+ --ds-color-danger-surface-tinted: #4f1f1b;
723
+ --ds-color-danger-surface-hover: #5c241f;
724
+ --ds-color-danger-surface-active: #722d27;
725
+ --ds-color-danger-border-subtle: #88352e;
726
+ --ds-color-danger-border-default: #bc6b64;
727
+ --ds-color-danger-border-strong: #d19a96;
728
+ --ds-color-danger-text-subtle: #d19a96;
729
+ --ds-color-danger-text-default: #f5eae9;
730
+ --ds-color-danger-base-default: #d76e6e;
731
+ --ds-color-danger-base-hover: #df8b8b;
732
+ --ds-color-danger-base-active: #e7a8a8;
733
+ --ds-color-danger-base-contrast-subtle: #271414;
734
+ --ds-color-danger-base-contrast-default: #000000;
735
+ --ds-color-info-background-default: #0d1925;
736
+ --ds-color-info-background-tinted: #112130;
737
+ --ds-color-info-surface-default: #15293d;
738
+ --ds-color-info-surface-tinted: #182f46;
739
+ --ds-color-info-surface-hover: #1c3751;
740
+ --ds-color-info-surface-active: #234566;
741
+ --ds-color-info-border-subtle: #2a537a;
742
+ --ds-color-info-border-default: #5585b4;
743
+ --ds-color-info-border-strong: #8aabcb;
744
+ --ds-color-info-text-subtle: #8aabcb;
745
+ --ds-color-info-text-default: #e6edf4;
746
+ --ds-color-info-base-default: #2d85c9;
747
+ --ds-color-info-base-hover: #519ad2;
748
+ --ds-color-info-base-active: #77b0dc;
749
+ --ds-color-info-base-contrast-subtle: #050e15;
750
+ --ds-color-info-base-contrast-default: #000000;
751
+ --ds-color-warning-background-default: #1e160d;
752
+ --ds-color-warning-background-tinted: #281e11;
753
+ --ds-color-warning-surface-default: #322616;
754
+ --ds-color-warning-surface-tinted: #3a2b19;
755
+ --ds-color-warning-surface-hover: #43321d;
756
+ --ds-color-warning-surface-active: #543f24;
757
+ --ds-color-warning-border-subtle: #654b2b;
758
+ --ds-color-warning-border-default: #a37a46;
759
+ --ds-color-warning-border-strong: #d39e5b;
760
+ --ds-color-warning-text-subtle: #d39e5b;
761
+ --ds-color-warning-text-default: #f7ebdb;
762
+ --ds-color-warning-base-default: #60400b;
763
+ --ds-color-warning-base-hover: #7a510e;
764
+ --ds-color-warning-base-active: #946211;
765
+ --ds-color-warning-base-contrast-subtle: #e6e2d9;
766
+ --ds-color-warning-base-contrast-default: #ffffff;
767
+ --ds-color-focus-inner: #13181f;
768
+ --ds-color-focus-outer: #ebeced;
769
+ --ds-link-color-visited: #b49acd;
770
+
771
+ color-scheme: dark;
772
+ }
773
+
774
+ @media (prefers-color-scheme: dark) {
775
+ [data-color-scheme='auto'] {
776
+ --ds-color-primary-background-default: #0c143a;
777
+ --ds-color-primary-background-tinted: #141d42;
778
+ --ds-color-primary-surface-default: #1d254a;
779
+ --ds-color-primary-surface-tinted: #232c4f;
780
+ --ds-color-primary-surface-hover: #2c3355;
781
+ --ds-color-primary-surface-active: #3a4161;
782
+ --ds-color-primary-border-subtle: #484f6c;
783
+ --ds-color-primary-border-default: #7c8096;
784
+ --ds-color-primary-border-strong: #a4a7b6;
785
+ --ds-color-primary-text-subtle: #a4a7b6;
786
+ --ds-color-primary-text-default: #ebecef;
787
+ --ds-color-primary-base-default: #a8aabf;
788
+ --ds-color-primary-base-hover: #9294af;
789
+ --ds-color-primary-base-active: #7c7f9f;
790
+ --ds-color-primary-base-contrast-subtle: #1b1c1f;
791
+ --ds-color-primary-base-contrast-default: #000000;
792
+ --ds-color-accent-background-default: #0e1923;
793
+ --ds-color-accent-background-tinted: #12212e;
794
+ --ds-color-accent-surface-default: #17293b;
795
+ --ds-color-accent-surface-tinted: #1a2f43;
796
+ --ds-color-accent-surface-hover: #1e374f;
797
+ --ds-color-accent-surface-active: #264563;
798
+ --ds-color-accent-border-subtle: #2d5376;
799
+ --ds-color-accent-border-default: #4985be;
800
+ --ds-color-accent-border-strong: #76ade0;
801
+ --ds-color-accent-text-subtle: #76ade0;
802
+ --ds-color-accent-text-default: #e2eef8;
803
+ --ds-color-accent-base-default: #135f9a;
804
+ --ds-color-accent-base-hover: #0f4c7a;
805
+ --ds-color-accent-base-active: #0b395d;
806
+ --ds-color-accent-base-contrast-subtle: #fbfcfd;
807
+ --ds-color-accent-base-contrast-default: #ffffff;
808
+ --ds-color-neutral-background-default: #13181f;
809
+ --ds-color-neutral-background-tinted: #192029;
810
+ --ds-color-neutral-surface-default: #202834;
811
+ --ds-color-neutral-surface-tinted: #262e3a;
812
+ --ds-color-neutral-surface-hover: #2e3641;
813
+ --ds-color-neutral-surface-active: #3c444e;
814
+ --ds-color-neutral-border-subtle: #49515a;
815
+ --ds-color-neutral-border-default: #7c8289;
816
+ --ds-color-neutral-border-strong: #a4a8ad;
817
+ --ds-color-neutral-text-subtle: #a4a8ad;
818
+ --ds-color-neutral-text-default: #ebeced;
819
+ --ds-color-neutral-base-default: #a6acb2;
820
+ --ds-color-neutral-base-hover: #90979f;
821
+ --ds-color-neutral-base-active: #7a828c;
822
+ --ds-color-neutral-base-contrast-subtle: #1b1c1d;
823
+ --ds-color-neutral-base-contrast-default: #000000;
824
+ --ds-color-extra1-background-default: #241313;
825
+ --ds-color-extra1-background-tinted: #301919;
826
+ --ds-color-extra1-surface-default: #3c2020;
827
+ --ds-color-extra1-surface-tinted: #452524;
828
+ --ds-color-extra1-surface-hover: #502b2a;
829
+ --ds-color-extra1-surface-active: #653635;
830
+ --ds-color-extra1-border-subtle: #78403f;
831
+ --ds-color-extra1-border-default: #c16766;
832
+ --ds-color-extra1-border-strong: #e39291;
833
+ --ds-color-extra1-text-subtle: #e39291;
834
+ --ds-color-extra1-text-default: #f9e8e8;
835
+ --ds-color-extra1-base-default: #9f3e41;
836
+ --ds-color-extra1-base-hover: #7f3234;
837
+ --ds-color-extra1-base-active: #612628;
838
+ --ds-color-extra1-base-contrast-subtle: #ffffff;
839
+ --ds-color-extra1-base-contrast-default: #ffffff;
840
+ --ds-color-extra2-background-default: #1c170d;
841
+ --ds-color-extra2-background-tinted: #261f11;
842
+ --ds-color-extra2-surface-default: #2f2716;
843
+ --ds-color-extra2-surface-tinted: #372c19;
844
+ --ds-color-extra2-surface-hover: #40341d;
845
+ --ds-color-extra2-surface-active: #504124;
846
+ --ds-color-extra2-border-subtle: #5f4e2b;
847
+ --ds-color-extra2-border-default: #9a7d46;
848
+ --ds-color-extra2-border-strong: #c8a25b;
849
+ --ds-color-extra2-text-subtle: #c8a25b;
850
+ --ds-color-extra2-text-default: #f5ebd8;
851
+ --ds-color-extra2-base-default: #513c0b;
852
+ --ds-color-extra2-base-hover: #694e0f;
853
+ --ds-color-extra2-base-active: #816012;
854
+ --ds-color-extra2-base-contrast-subtle: #ddd9cf;
855
+ --ds-color-extra2-base-contrast-default: #ffffff;
856
+ --ds-color-success-background-default: #0d1b0d;
857
+ --ds-color-success-background-tinted: #112411;
858
+ --ds-color-success-surface-default: #152d15;
859
+ --ds-color-success-surface-tinted: #183418;
860
+ --ds-color-success-surface-hover: #1c3c1c;
861
+ --ds-color-success-surface-active: #244c24;
862
+ --ds-color-success-border-subtle: #2b5a2b;
863
+ --ds-color-success-border-default: #528f52;
864
+ --ds-color-success-border-strong: #89b289;
865
+ --ds-color-success-text-subtle: #89b289;
866
+ --ds-color-success-text-default: #e6efe6;
867
+ --ds-color-success-base-default: #138d24;
868
+ --ds-color-success-base-hover: #3ca14b;
869
+ --ds-color-success-base-active: #66b571;
870
+ --ds-color-success-base-contrast-subtle: #010501;
871
+ --ds-color-success-base-contrast-default: #000000;
872
+ --ds-color-danger-background-default: #2a100e;
873
+ --ds-color-danger-background-tinted: #371512;
874
+ --ds-color-danger-surface-default: #451b17;
875
+ --ds-color-danger-surface-tinted: #4f1f1b;
876
+ --ds-color-danger-surface-hover: #5c241f;
877
+ --ds-color-danger-surface-active: #722d27;
878
+ --ds-color-danger-border-subtle: #88352e;
879
+ --ds-color-danger-border-default: #bc6b64;
880
+ --ds-color-danger-border-strong: #d19a96;
881
+ --ds-color-danger-text-subtle: #d19a96;
882
+ --ds-color-danger-text-default: #f5eae9;
883
+ --ds-color-danger-base-default: #d76e6e;
884
+ --ds-color-danger-base-hover: #df8b8b;
885
+ --ds-color-danger-base-active: #e7a8a8;
886
+ --ds-color-danger-base-contrast-subtle: #271414;
887
+ --ds-color-danger-base-contrast-default: #000000;
888
+ --ds-color-info-background-default: #0d1925;
889
+ --ds-color-info-background-tinted: #112130;
890
+ --ds-color-info-surface-default: #15293d;
891
+ --ds-color-info-surface-tinted: #182f46;
892
+ --ds-color-info-surface-hover: #1c3751;
893
+ --ds-color-info-surface-active: #234566;
894
+ --ds-color-info-border-subtle: #2a537a;
895
+ --ds-color-info-border-default: #5585b4;
896
+ --ds-color-info-border-strong: #8aabcb;
897
+ --ds-color-info-text-subtle: #8aabcb;
898
+ --ds-color-info-text-default: #e6edf4;
899
+ --ds-color-info-base-default: #2d85c9;
900
+ --ds-color-info-base-hover: #519ad2;
901
+ --ds-color-info-base-active: #77b0dc;
902
+ --ds-color-info-base-contrast-subtle: #050e15;
903
+ --ds-color-info-base-contrast-default: #000000;
904
+ --ds-color-warning-background-default: #1e160d;
905
+ --ds-color-warning-background-tinted: #281e11;
906
+ --ds-color-warning-surface-default: #322616;
907
+ --ds-color-warning-surface-tinted: #3a2b19;
908
+ --ds-color-warning-surface-hover: #43321d;
909
+ --ds-color-warning-surface-active: #543f24;
910
+ --ds-color-warning-border-subtle: #654b2b;
911
+ --ds-color-warning-border-default: #a37a46;
912
+ --ds-color-warning-border-strong: #d39e5b;
913
+ --ds-color-warning-text-subtle: #d39e5b;
914
+ --ds-color-warning-text-default: #f7ebdb;
915
+ --ds-color-warning-base-default: #60400b;
916
+ --ds-color-warning-base-hover: #7a510e;
917
+ --ds-color-warning-base-active: #946211;
918
+ --ds-color-warning-base-contrast-subtle: #e6e2d9;
919
+ --ds-color-warning-base-contrast-default: #ffffff;
920
+ --ds-color-focus-inner: #13181f;
921
+ --ds-color-focus-outer: #ebeced;
922
+ --ds-link-color-visited: #b49acd;
923
+
924
+ color-scheme: dark;
925
+ }
926
+ }
927
+ }
928
+
929
+ /**
930
+ * These files are generated from design tokens defind using Token Studio
931
+ */
932
+
933
+ @layer ds.theme.typography.primary {
934
+ :root,
935
+ [data-typography='primary'] {
936
+ --ds-font-family: Inter;
937
+ --ds-font-weight-medium: 500;
938
+ --ds-font-weight-semibold: 600;
939
+ --ds-font-weight-regular: 400;
940
+ --ds-heading-2xl-font-weight: 500;
941
+ --ds-heading-2xl-line-height: 1.3;
942
+ --ds-heading-2xl-font-size: 3.75rem;
943
+ --ds-heading-2xl-letter-spacing: -1%;
944
+ --ds-heading-xl-font-weight: 500;
945
+ --ds-heading-xl-line-height: 1.3;
946
+ --ds-heading-xl-font-size: 3rem;
947
+ --ds-heading-xl-letter-spacing: -1%;
948
+ --ds-heading-lg-font-weight: 500;
949
+ --ds-heading-lg-line-height: 1.3;
950
+ --ds-heading-lg-font-size: 2.25rem;
951
+ --ds-heading-lg-letter-spacing: -0.5%;
952
+ --ds-heading-md-font-weight: 500;
953
+ --ds-heading-md-line-height: 1.3;
954
+ --ds-heading-md-font-size: 1.875rem;
955
+ --ds-heading-md-letter-spacing: -0.25%;
956
+ --ds-heading-sm-font-weight: 500;
957
+ --ds-heading-sm-line-height: 1.3;
958
+ --ds-heading-sm-font-size: 1.5rem;
959
+ --ds-heading-sm-letter-spacing: 0%;
960
+ --ds-heading-xs-font-weight: 500;
961
+ --ds-heading-xs-line-height: 1.3;
962
+ --ds-heading-xs-font-size: 1.3125rem;
963
+ --ds-heading-xs-letter-spacing: 0.15%;
964
+ --ds-heading-2xs-font-weight: 500;
965
+ --ds-heading-2xs-line-height: 1.3;
966
+ --ds-heading-2xs-font-size: 1.125rem;
967
+ --ds-heading-2xs-letter-spacing: 0.15%;
968
+ --ds-body-xl-font-weight: 400;
969
+ --ds-body-xl-line-height: 1.5;
970
+ --ds-body-xl-font-size: 1.5rem;
971
+ --ds-body-xl-letter-spacing: 0.5%;
972
+ --ds-body-lg-font-weight: 400;
973
+ --ds-body-lg-line-height: 1.5;
974
+ --ds-body-lg-font-size: 1.3125rem;
975
+ --ds-body-lg-letter-spacing: 0.5%;
976
+ --ds-body-md-font-weight: 400;
977
+ --ds-body-md-line-height: 1.5;
978
+ --ds-body-md-font-size: 1.125rem;
979
+ --ds-body-md-letter-spacing: 0.5%;
980
+ --ds-body-sm-font-weight: 400;
981
+ --ds-body-sm-line-height: 1.5;
982
+ --ds-body-sm-font-size: 1rem;
983
+ --ds-body-sm-letter-spacing: 0.25%;
984
+ --ds-body-xs-font-weight: 400;
985
+ --ds-body-xs-line-height: 1.5;
986
+ --ds-body-xs-font-size: 0.875rem;
987
+ --ds-body-xs-letter-spacing: 0.15%;
988
+ --ds-body-short-xl-font-weight: 400;
989
+ --ds-body-short-xl-line-height: 1.3;
990
+ --ds-body-short-xl-font-size: 1.5rem;
991
+ --ds-body-short-xl-letter-spacing: 0.5%;
992
+ --ds-body-short-lg-font-weight: 400;
993
+ --ds-body-short-lg-line-height: 1.3;
994
+ --ds-body-short-lg-font-size: 1.3125rem;
995
+ --ds-body-short-lg-letter-spacing: 0.5%;
996
+ --ds-body-short-md-font-weight: 400;
997
+ --ds-body-short-md-line-height: 1.3;
998
+ --ds-body-short-md-font-size: 1.125rem;
999
+ --ds-body-short-md-letter-spacing: 0.5%;
1000
+ --ds-body-short-sm-font-weight: 400;
1001
+ --ds-body-short-sm-line-height: 1.3;
1002
+ --ds-body-short-sm-font-size: 1rem;
1003
+ --ds-body-short-sm-letter-spacing: 0.25%;
1004
+ --ds-body-short-xs-font-weight: 400;
1005
+ --ds-body-short-xs-line-height: 1.3;
1006
+ --ds-body-short-xs-font-size: 0.875rem;
1007
+ --ds-body-short-xs-letter-spacing: 0.15%;
1008
+ --ds-body-long-xl-font-weight: 400;
1009
+ --ds-body-long-xl-line-height: 1.7;
1010
+ --ds-body-long-xl-font-size: 1.5rem;
1011
+ --ds-body-long-xl-letter-spacing: 0.5%;
1012
+ --ds-body-long-lg-font-weight: 400;
1013
+ --ds-body-long-lg-line-height: 1.7;
1014
+ --ds-body-long-lg-font-size: 1.3125rem;
1015
+ --ds-body-long-lg-letter-spacing: 0.5%;
1016
+ --ds-body-long-md-font-weight: 400;
1017
+ --ds-body-long-md-line-height: 1.7;
1018
+ --ds-body-long-md-font-size: 1.125rem;
1019
+ --ds-body-long-md-letter-spacing: 0.5%;
1020
+ --ds-body-long-sm-font-weight: 400;
1021
+ --ds-body-long-sm-line-height: 1.7;
1022
+ --ds-body-long-sm-font-size: 1rem;
1023
+ --ds-body-long-sm-letter-spacing: 0.25%;
1024
+ --ds-body-long-xs-font-weight: 400;
1025
+ --ds-body-long-xs-line-height: 1.7;
1026
+ --ds-body-long-xs-font-size: 0.875rem;
1027
+ --ds-body-long-xs-letter-spacing: 0.15%;
1028
+ --ds-line-height-sm: 1.3;
1029
+ --ds-line-height-md: 1.5;
1030
+ --ds-line-height-lg: 1.7;
1031
+ --ds-font-size-1: 0.75rem;
1032
+ --ds-font-size-2: 0.875rem;
1033
+ --ds-font-size-3: 1rem;
1034
+ --ds-font-size-4: 1.125rem;
1035
+ --ds-font-size-5: 1.3125rem;
1036
+ --ds-font-size-6: 1.5rem;
1037
+ --ds-font-size-7: 1.875rem;
1038
+ --ds-font-size-8: 2.25rem;
1039
+ --ds-font-size-9: 3rem;
1040
+ --ds-font-size-10: 3.75rem;
1041
+ --ds-letter-spacing-1: -1%;
1042
+ --ds-letter-spacing-2: -0.5%;
1043
+ --ds-letter-spacing-3: -0.25%;
1044
+ --ds-letter-spacing-4: -0.15%;
1045
+ --ds-letter-spacing-5: 0%;
1046
+ --ds-letter-spacing-6: 0.15%;
1047
+ --ds-letter-spacing-7: 0.25%;
1048
+ --ds-letter-spacing-8: 0.5%;
1049
+ --ds-letter-spacing-9: 1.5%;
1050
+ }
1051
+ }
1052
+ /**
1053
+ * These files are generated from design tokens defind using Token Studio
1054
+ */
1055
+
1056
+ @layer ds.theme.color {
1057
+ [data-color='accent'],
1058
+ [data-color-scheme][data-color='accent'] {
1059
+ --ds-color-background-default: var(--ds-color-accent-background-default);
1060
+ --ds-color-background-tinted: var(--ds-color-accent-background-tinted);
1061
+ --ds-color-surface-default: var(--ds-color-accent-surface-default);
1062
+ --ds-color-surface-tinted: var(--ds-color-accent-surface-tinted);
1063
+ --ds-color-surface-hover: var(--ds-color-accent-surface-hover);
1064
+ --ds-color-surface-active: var(--ds-color-accent-surface-active);
1065
+ --ds-color-border-subtle: var(--ds-color-accent-border-subtle);
1066
+ --ds-color-border-default: var(--ds-color-accent-border-default);
1067
+ --ds-color-border-strong: var(--ds-color-accent-border-strong);
1068
+ --ds-color-text-subtle: var(--ds-color-accent-text-subtle);
1069
+ --ds-color-text-default: var(--ds-color-accent-text-default);
1070
+ --ds-color-base-default: var(--ds-color-accent-base-default);
1071
+ --ds-color-base-hover: var(--ds-color-accent-base-hover);
1072
+ --ds-color-base-active: var(--ds-color-accent-base-active);
1073
+ --ds-color-base-contrast-subtle: var(
1074
+ --ds-color-accent-base-contrast-subtle
1075
+ );
1076
+ --ds-color-base-contrast-default: var(
1077
+ --ds-color-accent-base-contrast-default
1078
+ );
1079
+ }
1080
+ }
1081
+
1082
+ /**
1083
+ * These files are generated from design tokens defind using Token Studio
1084
+ */
1085
+
1086
+ @layer ds.theme.color {
1087
+ [data-color='danger'],
1088
+ [data-color-scheme][data-color='danger'] {
1089
+ --ds-color-background-default: var(--ds-color-danger-background-default);
1090
+ --ds-color-background-tinted: var(--ds-color-danger-background-tinted);
1091
+ --ds-color-surface-default: var(--ds-color-danger-surface-default);
1092
+ --ds-color-surface-tinted: var(--ds-color-danger-surface-tinted);
1093
+ --ds-color-surface-hover: var(--ds-color-danger-surface-hover);
1094
+ --ds-color-surface-active: var(--ds-color-danger-surface-active);
1095
+ --ds-color-border-subtle: var(--ds-color-danger-border-subtle);
1096
+ --ds-color-border-default: var(--ds-color-danger-border-default);
1097
+ --ds-color-border-strong: var(--ds-color-danger-border-strong);
1098
+ --ds-color-text-subtle: var(--ds-color-danger-text-subtle);
1099
+ --ds-color-text-default: var(--ds-color-danger-text-default);
1100
+ --ds-color-base-default: var(--ds-color-danger-base-default);
1101
+ --ds-color-base-hover: var(--ds-color-danger-base-hover);
1102
+ --ds-color-base-active: var(--ds-color-danger-base-active);
1103
+ --ds-color-base-contrast-subtle: var(
1104
+ --ds-color-danger-base-contrast-subtle
1105
+ );
1106
+ --ds-color-base-contrast-default: var(
1107
+ --ds-color-danger-base-contrast-default
1108
+ );
1109
+ }
1110
+ }
1111
+
1112
+ /**
1113
+ * These files are generated from design tokens defind using Token Studio
1114
+ */
1115
+
1116
+ @layer ds.theme.color {
1117
+ [data-color='extra1'],
1118
+ [data-color-scheme][data-color='extra1'] {
1119
+ --ds-color-background-default: var(--ds-color-extra1-background-default);
1120
+ --ds-color-background-tinted: var(--ds-color-extra1-background-tinted);
1121
+ --ds-color-surface-default: var(--ds-color-extra1-surface-default);
1122
+ --ds-color-surface-tinted: var(--ds-color-extra1-surface-tinted);
1123
+ --ds-color-surface-hover: var(--ds-color-extra1-surface-hover);
1124
+ --ds-color-surface-active: var(--ds-color-extra1-surface-active);
1125
+ --ds-color-border-subtle: var(--ds-color-extra1-border-subtle);
1126
+ --ds-color-border-default: var(--ds-color-extra1-border-default);
1127
+ --ds-color-border-strong: var(--ds-color-extra1-border-strong);
1128
+ --ds-color-text-subtle: var(--ds-color-extra1-text-subtle);
1129
+ --ds-color-text-default: var(--ds-color-extra1-text-default);
1130
+ --ds-color-base-default: var(--ds-color-extra1-base-default);
1131
+ --ds-color-base-hover: var(--ds-color-extra1-base-hover);
1132
+ --ds-color-base-active: var(--ds-color-extra1-base-active);
1133
+ --ds-color-base-contrast-subtle: var(
1134
+ --ds-color-extra1-base-contrast-subtle
1135
+ );
1136
+ --ds-color-base-contrast-default: var(
1137
+ --ds-color-extra1-base-contrast-default
1138
+ );
1139
+ }
1140
+ }
1141
+
1142
+ /**
1143
+ * These files are generated from design tokens defind using Token Studio
1144
+ */
1145
+
1146
+ @layer ds.theme.color {
1147
+ [data-color='extra2'],
1148
+ [data-color-scheme][data-color='extra2'] {
1149
+ --ds-color-background-default: var(--ds-color-extra2-background-default);
1150
+ --ds-color-background-tinted: var(--ds-color-extra2-background-tinted);
1151
+ --ds-color-surface-default: var(--ds-color-extra2-surface-default);
1152
+ --ds-color-surface-tinted: var(--ds-color-extra2-surface-tinted);
1153
+ --ds-color-surface-hover: var(--ds-color-extra2-surface-hover);
1154
+ --ds-color-surface-active: var(--ds-color-extra2-surface-active);
1155
+ --ds-color-border-subtle: var(--ds-color-extra2-border-subtle);
1156
+ --ds-color-border-default: var(--ds-color-extra2-border-default);
1157
+ --ds-color-border-strong: var(--ds-color-extra2-border-strong);
1158
+ --ds-color-text-subtle: var(--ds-color-extra2-text-subtle);
1159
+ --ds-color-text-default: var(--ds-color-extra2-text-default);
1160
+ --ds-color-base-default: var(--ds-color-extra2-base-default);
1161
+ --ds-color-base-hover: var(--ds-color-extra2-base-hover);
1162
+ --ds-color-base-active: var(--ds-color-extra2-base-active);
1163
+ --ds-color-base-contrast-subtle: var(
1164
+ --ds-color-extra2-base-contrast-subtle
1165
+ );
1166
+ --ds-color-base-contrast-default: var(
1167
+ --ds-color-extra2-base-contrast-default
1168
+ );
1169
+ }
1170
+ }
1171
+
1172
+ /**
1173
+ * These files are generated from design tokens defind using Token Studio
1174
+ */
1175
+
1176
+ @layer ds.theme.color {
1177
+ [data-color='info'],
1178
+ [data-color-scheme][data-color='info'] {
1179
+ --ds-color-background-default: var(--ds-color-info-background-default);
1180
+ --ds-color-background-tinted: var(--ds-color-info-background-tinted);
1181
+ --ds-color-surface-default: var(--ds-color-info-surface-default);
1182
+ --ds-color-surface-tinted: var(--ds-color-info-surface-tinted);
1183
+ --ds-color-surface-hover: var(--ds-color-info-surface-hover);
1184
+ --ds-color-surface-active: var(--ds-color-info-surface-active);
1185
+ --ds-color-border-subtle: var(--ds-color-info-border-subtle);
1186
+ --ds-color-border-default: var(--ds-color-info-border-default);
1187
+ --ds-color-border-strong: var(--ds-color-info-border-strong);
1188
+ --ds-color-text-subtle: var(--ds-color-info-text-subtle);
1189
+ --ds-color-text-default: var(--ds-color-info-text-default);
1190
+ --ds-color-base-default: var(--ds-color-info-base-default);
1191
+ --ds-color-base-hover: var(--ds-color-info-base-hover);
1192
+ --ds-color-base-active: var(--ds-color-info-base-active);
1193
+ --ds-color-base-contrast-subtle: var(--ds-color-info-base-contrast-subtle);
1194
+ --ds-color-base-contrast-default: var(
1195
+ --ds-color-info-base-contrast-default
1196
+ );
1197
+ }
1198
+ }
1199
+
1200
+ /**
1201
+ * These files are generated from design tokens defind using Token Studio
1202
+ */
1203
+
1204
+ @layer ds.theme.color {
1205
+ [data-color='neutral'],
1206
+ [data-color-scheme][data-color='neutral'] {
1207
+ --ds-color-background-default: var(--ds-color-neutral-background-default);
1208
+ --ds-color-background-tinted: var(--ds-color-neutral-background-tinted);
1209
+ --ds-color-surface-default: var(--ds-color-neutral-surface-default);
1210
+ --ds-color-surface-tinted: var(--ds-color-neutral-surface-tinted);
1211
+ --ds-color-surface-hover: var(--ds-color-neutral-surface-hover);
1212
+ --ds-color-surface-active: var(--ds-color-neutral-surface-active);
1213
+ --ds-color-border-subtle: var(--ds-color-neutral-border-subtle);
1214
+ --ds-color-border-default: var(--ds-color-neutral-border-default);
1215
+ --ds-color-border-strong: var(--ds-color-neutral-border-strong);
1216
+ --ds-color-text-subtle: var(--ds-color-neutral-text-subtle);
1217
+ --ds-color-text-default: var(--ds-color-neutral-text-default);
1218
+ --ds-color-base-default: var(--ds-color-neutral-base-default);
1219
+ --ds-color-base-hover: var(--ds-color-neutral-base-hover);
1220
+ --ds-color-base-active: var(--ds-color-neutral-base-active);
1221
+ --ds-color-base-contrast-subtle: var(
1222
+ --ds-color-neutral-base-contrast-subtle
1223
+ );
1224
+ --ds-color-base-contrast-default: var(
1225
+ --ds-color-neutral-base-contrast-default
1226
+ );
1227
+ }
1228
+ }
1229
+
1230
+ /**
1231
+ * These files are generated from design tokens defind using Token Studio
1232
+ */
1233
+
1234
+ @layer ds.theme.color {
1235
+ :root,
1236
+ [data-color-scheme],
1237
+ [data-color='primary'] {
1238
+ --ds-color-background-default: var(--ds-color-primary-background-default);
1239
+ --ds-color-background-tinted: var(--ds-color-primary-background-tinted);
1240
+ --ds-color-surface-default: var(--ds-color-primary-surface-default);
1241
+ --ds-color-surface-tinted: var(--ds-color-primary-surface-tinted);
1242
+ --ds-color-surface-hover: var(--ds-color-primary-surface-hover);
1243
+ --ds-color-surface-active: var(--ds-color-primary-surface-active);
1244
+ --ds-color-border-subtle: var(--ds-color-primary-border-subtle);
1245
+ --ds-color-border-default: var(--ds-color-primary-border-default);
1246
+ --ds-color-border-strong: var(--ds-color-primary-border-strong);
1247
+ --ds-color-text-subtle: var(--ds-color-primary-text-subtle);
1248
+ --ds-color-text-default: var(--ds-color-primary-text-default);
1249
+ --ds-color-base-default: var(--ds-color-primary-base-default);
1250
+ --ds-color-base-hover: var(--ds-color-primary-base-hover);
1251
+ --ds-color-base-active: var(--ds-color-primary-base-active);
1252
+ --ds-color-base-contrast-subtle: var(
1253
+ --ds-color-primary-base-contrast-subtle
1254
+ );
1255
+ --ds-color-base-contrast-default: var(
1256
+ --ds-color-primary-base-contrast-default
1257
+ );
1258
+ }
1259
+ }
1260
+
1261
+ /**
1262
+ * These files are generated from design tokens defind using Token Studio
1263
+ */
1264
+
1265
+ @layer ds.theme.color {
1266
+ [data-color='success'],
1267
+ [data-color-scheme][data-color='success'] {
1268
+ --ds-color-background-default: var(--ds-color-success-background-default);
1269
+ --ds-color-background-tinted: var(--ds-color-success-background-tinted);
1270
+ --ds-color-surface-default: var(--ds-color-success-surface-default);
1271
+ --ds-color-surface-tinted: var(--ds-color-success-surface-tinted);
1272
+ --ds-color-surface-hover: var(--ds-color-success-surface-hover);
1273
+ --ds-color-surface-active: var(--ds-color-success-surface-active);
1274
+ --ds-color-border-subtle: var(--ds-color-success-border-subtle);
1275
+ --ds-color-border-default: var(--ds-color-success-border-default);
1276
+ --ds-color-border-strong: var(--ds-color-success-border-strong);
1277
+ --ds-color-text-subtle: var(--ds-color-success-text-subtle);
1278
+ --ds-color-text-default: var(--ds-color-success-text-default);
1279
+ --ds-color-base-default: var(--ds-color-success-base-default);
1280
+ --ds-color-base-hover: var(--ds-color-success-base-hover);
1281
+ --ds-color-base-active: var(--ds-color-success-base-active);
1282
+ --ds-color-base-contrast-subtle: var(
1283
+ --ds-color-success-base-contrast-subtle
1284
+ );
1285
+ --ds-color-base-contrast-default: var(
1286
+ --ds-color-success-base-contrast-default
1287
+ );
1288
+ }
1289
+ }
1290
+
1291
+ /**
1292
+ * These files are generated from design tokens defind using Token Studio
1293
+ */
1294
+
1295
+ @layer ds.theme.color {
1296
+ [data-color='warning'],
1297
+ [data-color-scheme][data-color='warning'] {
1298
+ --ds-color-background-default: var(--ds-color-warning-background-default);
1299
+ --ds-color-background-tinted: var(--ds-color-warning-background-tinted);
1300
+ --ds-color-surface-default: var(--ds-color-warning-surface-default);
1301
+ --ds-color-surface-tinted: var(--ds-color-warning-surface-tinted);
1302
+ --ds-color-surface-hover: var(--ds-color-warning-surface-hover);
1303
+ --ds-color-surface-active: var(--ds-color-warning-surface-active);
1304
+ --ds-color-border-subtle: var(--ds-color-warning-border-subtle);
1305
+ --ds-color-border-default: var(--ds-color-warning-border-default);
1306
+ --ds-color-border-strong: var(--ds-color-warning-border-strong);
1307
+ --ds-color-text-subtle: var(--ds-color-warning-text-subtle);
1308
+ --ds-color-text-default: var(--ds-color-warning-text-default);
1309
+ --ds-color-base-default: var(--ds-color-warning-base-default);
1310
+ --ds-color-base-hover: var(--ds-color-warning-base-hover);
1311
+ --ds-color-base-active: var(--ds-color-warning-base-active);
1312
+ --ds-color-base-contrast-subtle: var(
1313
+ --ds-color-warning-base-contrast-subtle
1314
+ );
1315
+ --ds-color-base-contrast-default: var(
1316
+ --ds-color-warning-base-contrast-default
1317
+ );
1318
+ }
1319
+ }