@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.
Files changed (9) hide show
  1. package/README.md +3 -0
  2. package/dist/udir/color-mode/contrast.css +311 -0
  3. package/dist/udir/color-mode/dark.css +623 -0
  4. package/dist/udir/color-mode/light.css +623 -0
  5. package/dist/udir/semantic.css +68 -0
  6. package/dist/udir/typography/primary.css +159 -0
  7. package/dist/udir/typography/secondary.css +159 -0
  8. package/dist/udir.css +1951 -0
  9. package/package.json +22 -0
package/dist/udir/color-mode/dark.css ADDED
@@ -0,0 +1,623 @@
1
+ /**
2
+ * These files are generated from design tokens defind using Token Studio
3
+ */
4
+
5
+ @layer ds.theme.color-mode.dark {
6
+ [data-ds-color-mode="dark"] {
7
+ --ds-color-accent-1: #1b1b1b;
8
+ --ds-color-accent-2: #242424;
9
+ --ds-color-accent-3: #303030;
10
+ --ds-color-accent-4: #3e3e3e;
11
+ --ds-color-accent-5: #4b4b4b;
12
+ --ds-color-accent-6: #525252;
13
+ --ds-color-accent-7: #6f6f6f;
14
+ --ds-color-accent-8: #bebebe;
15
+ --ds-color-accent-9: #ababab;
16
+ --ds-color-accent-10: #969696;
17
+ --ds-color-accent-11: #818181;
18
+ --ds-color-accent-12: #a3a3a3;
19
+ --ds-color-accent-13: #e1e1e1;
20
+ --ds-color-accent-contrast-1: #000000;
21
+ --ds-color-accent-contrast-2: #1b1b1b;
22
+ --ds-color-accent-background-default: var(--ds-color-accent-1);
23
+ --ds-color-accent-background-subtle: var(--ds-color-accent-2);
24
+ --ds-color-accent-surface-default: var(--ds-color-accent-3);
25
+ --ds-color-accent-surface-hover: var(--ds-color-accent-4);
26
+ --ds-color-accent-surface-active: var(--ds-color-accent-5);
27
+ --ds-color-accent-border-subtle: var(--ds-color-accent-6);
28
+ --ds-color-accent-border-default: var(--ds-color-accent-7);
29
+ --ds-color-accent-border-strong: var(--ds-color-accent-8);
30
+ --ds-color-accent-base-default: var(--ds-color-accent-9);
31
+ --ds-color-accent-base-hover: var(--ds-color-accent-10);
32
+ --ds-color-accent-base-active: var(--ds-color-accent-11);
33
+ --ds-color-accent-text-subtle: var(--ds-color-accent-12);
34
+ --ds-color-accent-text-default: var(--ds-color-accent-13);
35
+ --ds-color-accent-contrast-default: var(--ds-color-accent-contrast-1);
36
+ --ds-color-accent-contrast-subtle: var(--ds-color-accent-contrast-2);
37
+ --ds-color-neutral-1: #1b1b1b;
38
+ --ds-color-neutral-2: #242424;
39
+ --ds-color-neutral-3: #303030;
40
+ --ds-color-neutral-4: #3e3e3e;
41
+ --ds-color-neutral-5: #4b4b4b;
42
+ --ds-color-neutral-6: #525252;
43
+ --ds-color-neutral-7: #6f6f6f;
44
+ --ds-color-neutral-8: #bebebe;
45
+ --ds-color-neutral-9: #1f1f1f;
46
+ --ds-color-neutral-10: #303030;
47
+ --ds-color-neutral-11: #424242;
48
+ --ds-color-neutral-12: #a3a3a3;
49
+ --ds-color-neutral-13: #e1e1e1;
50
+ --ds-color-neutral-contrast-1: #ffffff;
51
+ --ds-color-neutral-contrast-2: #b0b0b0;
52
+ --ds-color-neutral-background-default: var(--ds-color-neutral-1);
53
+ --ds-color-neutral-background-subtle: var(--ds-color-neutral-2);
54
+ --ds-color-neutral-surface-default: var(--ds-color-neutral-3);
55
+ --ds-color-neutral-surface-hover: var(--ds-color-neutral-4);
56
+ --ds-color-neutral-surface-active: var(--ds-color-neutral-5);
57
+ --ds-color-neutral-border-subtle: var(--ds-color-neutral-6);
58
+ --ds-color-neutral-border-default: var(--ds-color-neutral-7);
59
+ --ds-color-neutral-border-strong: var(--ds-color-neutral-8);
60
+ --ds-color-neutral-base-default: var(--ds-color-neutral-9);
61
+ --ds-color-neutral-base-hover: var(--ds-color-neutral-10);
62
+ --ds-color-neutral-base-active: var(--ds-color-neutral-11);
63
+ --ds-color-neutral-text-subtle: var(--ds-color-neutral-12);
64
+ --ds-color-neutral-text-default: var(--ds-color-neutral-13);
65
+ --ds-color-neutral-contrast-default: var(--ds-color-neutral-contrast-1);
66
+ --ds-color-neutral-contrast-subtle: var(--ds-color-neutral-contrast-2);
67
+ --ds-color-brand1-1: #121e18;
68
+ --ds-color-brand1-2: #18271f;
69
+ --ds-color-brand1-3: #1f342a;
70
+ --ds-color-brand1-4: #284336;
71
+ --ds-color-brand1-5: #315241;
72
+ --ds-color-brand1-6: #355947;
73
+ --ds-color-brand1-7: #487960;
74
+ --ds-color-brand1-8: #86cda9;
75
+ --ds-color-brand1-9: #284336;
76
+ --ds-color-brand1-10: #345745;
77
+ --ds-color-brand1-11: #406b55;
78
+ --ds-color-brand1-12: #6ab28d;
79
+ --ds-color-brand1-13: #cae9d9;
80
+ --ds-color-brand1-contrast-1: #ffffff;
81
+ --ds-color-brand1-contrast-2: #d3d8d6;
82
+ --ds-color-brand1-background-default: var(--ds-color-brand1-1);
83
+ --ds-color-brand1-background-subtle: var(--ds-color-brand1-2);
84
+ --ds-color-brand1-surface-default: var(--ds-color-brand1-3);
85
+ --ds-color-brand1-surface-hover: var(--ds-color-brand1-4);
86
+ --ds-color-brand1-surface-active: var(--ds-color-brand1-5);
87
+ --ds-color-brand1-border-subtle: var(--ds-color-brand1-6);
88
+ --ds-color-brand1-border-default: var(--ds-color-brand1-7);
89
+ --ds-color-brand1-border-strong: var(--ds-color-brand1-8);
90
+ --ds-color-brand1-base-default: var(--ds-color-brand1-9);
91
+ --ds-color-brand1-base-hover: var(--ds-color-brand1-10);
92
+ --ds-color-brand1-base-active: var(--ds-color-brand1-11);
93
+ --ds-color-brand1-text-subtle: var(--ds-color-brand1-12);
94
+ --ds-color-brand1-text-default: var(--ds-color-brand1-13);
95
+ --ds-color-brand1-contrast-default: var(--ds-color-brand1-contrast-1);
96
+ --ds-color-brand1-contrast-subtle: var(--ds-color-brand1-contrast-2);
97
+ --ds-color-brand2-1: #191c1f;
98
+ --ds-color-brand2-2: #202428;
99
+ --ds-color-brand2-3: #2b3135;
100
+ --ds-color-brand2-4: #383f44;
101
+ --ds-color-brand2-5: #444c53;
102
+ --ds-color-brand2-6: #4a535b;
103
+ --ds-color-brand2-7: #65717b;
104
+ --ds-color-brand2-8: #acc1d2;
105
+ --ds-color-brand2-9: #24282b;
106
+ --ds-color-brand2-10: #33393f;
107
+ --ds-color-brand2-11: #444c53;
108
+ --ds-color-brand2-12: #93a5b4;
109
+ --ds-color-brand2-13: #d5e4f0;
110
+ --ds-color-brand2-contrast-1: #ffffff;
111
+ --ds-color-brand2-contrast-2: #babbbc;
112
+ --ds-color-brand2-background-default: var(--ds-color-brand2-1);
113
+ --ds-color-brand2-background-subtle: var(--ds-color-brand2-2);
114
+ --ds-color-brand2-surface-default: var(--ds-color-brand2-3);
115
+ --ds-color-brand2-surface-hover: var(--ds-color-brand2-4);
116
+ --ds-color-brand2-surface-active: var(--ds-color-brand2-5);
117
+ --ds-color-brand2-border-subtle: var(--ds-color-brand2-6);
118
+ --ds-color-brand2-border-default: var(--ds-color-brand2-7);
119
+ --ds-color-brand2-border-strong: var(--ds-color-brand2-8);
120
+ --ds-color-brand2-base-default: var(--ds-color-brand2-9);
121
+ --ds-color-brand2-base-hover: var(--ds-color-brand2-10);
122
+ --ds-color-brand2-base-active: var(--ds-color-brand2-11);
123
+ --ds-color-brand2-text-subtle: var(--ds-color-brand2-12);
124
+ --ds-color-brand2-text-default: var(--ds-color-brand2-13);
125
+ --ds-color-brand2-contrast-default: var(--ds-color-brand2-contrast-1);
126
+ --ds-color-brand2-contrast-subtle: var(--ds-color-brand2-contrast-2);
127
+ --ds-color-brand3-1: #1f1b17;
128
+ --ds-color-brand3-2: #27231e;
129
+ --ds-color-brand3-3: #353028;
130
+ --ds-color-brand3-4: #433c33;
131
+ --ds-color-brand3-5: #534a3f;
132
+ --ds-color-brand3-6: #5b5145;
133
+ --ds-color-brand3-7: #7a6d5c;
134
+ --ds-color-brand3-8: #d0bb9e;
135
+ --ds-color-brand3-9: #2c2721;
136
+ --ds-color-brand3-10: #3f3830;
137
+ --ds-color-brand3-11: #534a3f;
138
+ --ds-color-brand3-12: #b2a188;
139
+ --ds-color-brand3-13: #efe0cc;
140
+ --ds-color-brand3-contrast-1: #ffffff;
141
+ --ds-color-brand3-contrast-2: #bdbbb9;
142
+ --ds-color-brand3-background-default: var(--ds-color-brand3-1);
143
+ --ds-color-brand3-background-subtle: var(--ds-color-brand3-2);
144
+ --ds-color-brand3-surface-default: var(--ds-color-brand3-3);
145
+ --ds-color-brand3-surface-hover: var(--ds-color-brand3-4);
146
+ --ds-color-brand3-surface-active: var(--ds-color-brand3-5);
147
+ --ds-color-brand3-border-subtle: var(--ds-color-brand3-6);
148
+ --ds-color-brand3-border-default: var(--ds-color-brand3-7);
149
+ --ds-color-brand3-border-strong: var(--ds-color-brand3-8);
150
+ --ds-color-brand3-base-default: var(--ds-color-brand3-9);
151
+ --ds-color-brand3-base-hover: var(--ds-color-brand3-10);
152
+ --ds-color-brand3-base-active: var(--ds-color-brand3-11);
153
+ --ds-color-brand3-text-subtle: var(--ds-color-brand3-12);
154
+ --ds-color-brand3-text-default: var(--ds-color-brand3-13);
155
+ --ds-color-brand3-contrast-default: var(--ds-color-brand3-contrast-1);
156
+ --ds-color-brand3-contrast-subtle: var(--ds-color-brand3-contrast-2);
157
+ --ds-color-success-background-default: var(--ds-global-green-1);
158
+ --ds-color-success-background-subtle: var(--ds-global-green-2);
159
+ --ds-color-success-surface-default: var(--ds-global-green-3);
160
+ --ds-color-success-surface-hover: var(--ds-global-green-4);
161
+ --ds-color-success-surface-active: var(--ds-global-green-5);
162
+ --ds-color-success-border-subtle: var(--ds-global-green-6);
163
+ --ds-color-success-border-default: var(--ds-global-green-7);
164
+ --ds-color-success-border-strong: var(--ds-global-green-8);
165
+ --ds-color-success-base-default: var(--ds-global-green-9);
166
+ --ds-color-success-base-hover: var(--ds-global-green-10);
167
+ --ds-color-success-base-active: var(--ds-global-green-11);
168
+ --ds-color-success-text-subtle: var(--ds-global-green-12);
169
+ --ds-color-success-text-default: var(--ds-global-green-13);
170
+ --ds-color-success-contrast-default: var(--ds-global-green-contrast-1);
171
+ --ds-color-success-contrast-subtle: var(--ds-global-green-contrast-2);
172
+ --ds-color-danger-background-default: var(--ds-global-red-1);
173
+ --ds-color-danger-background-subtle: var(--ds-global-red-2);
174
+ --ds-color-danger-surface-default: var(--ds-global-red-3);
175
+ --ds-color-danger-surface-hover: var(--ds-global-red-4);
176
+ --ds-color-danger-surface-active: var(--ds-global-red-5);
177
+ --ds-color-danger-border-subtle: var(--ds-global-red-6);
178
+ --ds-color-danger-border-default: var(--ds-global-red-7);
179
+ --ds-color-danger-border-strong: var(--ds-global-red-8);
180
+ --ds-color-danger-base-default: var(--ds-global-red-9);
181
+ --ds-color-danger-base-hover: var(--ds-global-red-10);
182
+ --ds-color-danger-base-active: var(--ds-global-red-11);
183
+ --ds-color-danger-text-subtle: var(--ds-global-red-12);
184
+ --ds-color-danger-text-default: var(--ds-global-red-13);
185
+ --ds-color-danger-contrast-default: var(--ds-global-red-contrast-1);
186
+ --ds-color-danger-contrast-subtle: var(--ds-global-red-contrast-2);
187
+ --ds-color-info-background-default: #031d30;
188
+ --ds-color-info-background-subtle: #032540;
189
+ --ds-color-info-surface-default: #043256;
190
+ --ds-color-info-surface-hover: #063f6c;
191
+ --ds-color-info-surface-active: #074d84;
192
+ --ds-color-info-border-subtle: #075490;
193
+ --ds-color-info-border-default: #0c72c1;
194
+ --ds-color-info-border-strong: #98c3e5;
195
+ --ds-color-info-base-default: #2a84c8;
196
+ --ds-color-info-base-hover: #0a6dba;
197
+ --ds-color-info-base-active: #085998;
198
+ --ds-color-info-text-subtle: #6ba9d9;
199
+ --ds-color-info-text-default: #d3e5f4;
200
+ --ds-color-info-contrast-default: #000000;
201
+ --ds-color-info-contrast-subtle: #040c13;
202
+ --ds-color-warning-background-default: var(--ds-global-yellow-1);
203
+ --ds-color-warning-background-subtle: var(--ds-global-yellow-2);
204
+ --ds-color-warning-surface-default: var(--ds-global-yellow-3);
205
+ --ds-color-warning-surface-hover: var(--ds-global-yellow-4);
206
+ --ds-color-warning-surface-active: var(--ds-global-yellow-5);
207
+ --ds-color-warning-border-subtle: var(--ds-global-yellow-6);
208
+ --ds-color-warning-border-default: var(--ds-global-yellow-7);
209
+ --ds-color-warning-border-strong: var(--ds-global-yellow-8);
210
+ --ds-color-warning-base-default: var(--ds-global-orange-9);
211
+ --ds-color-warning-base-hover: var(--ds-global-orange-10);
212
+ --ds-color-warning-base-active: var(--ds-global-orange-11);
213
+ --ds-color-warning-text-subtle: var(--ds-global-orange-12);
214
+ --ds-color-warning-text-default: var(--ds-global-orange-13);
215
+ --ds-color-warning-contrast-default: var(--ds-global-orange-contrast-1);
216
+ --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2);
217
+ --ds-color-focus-inner: #1b1b1b;
218
+ --ds-color-focus-outer: #e1e1e1;
219
+ --ds-global-blue-1: #031d30;
220
+ --ds-global-blue-2: #032540;
221
+ --ds-global-blue-3: #043256;
222
+ --ds-global-blue-4: #063f6c;
223
+ --ds-global-blue-5: #074d84;
224
+ --ds-global-blue-6: #075490;
225
+ --ds-global-blue-7: #0c72c1;
226
+ --ds-global-blue-8: #98c3e5;
227
+ --ds-global-blue-9: #2a84c8;
228
+ --ds-global-blue-10: #0a6dba;
229
+ --ds-global-blue-11: #085998;
230
+ --ds-global-blue-12: #6ba9d9;
231
+ --ds-global-blue-13: #d3e5f4;
232
+ --ds-global-blue-contrast-1: #000000;
233
+ --ds-global-blue-contrast-2: #040c13;
234
+ --ds-global-green-1: #012106;
235
+ --ds-global-green-2: #022b08;
236
+ --ds-global-green-3: #03380a;
237
+ --ds-global-green-4: #03490d;
238
+ --ds-global-green-5: #045810;
239
+ --ds-global-green-6: #045f11;
240
+ --ds-global-green-7: #068217;
241
+ --ds-global-green-8: #93cb9b;
242
+ --ds-global-green-9: #118c23;
243
+ --ds-global-green-10: #057615;
244
+ --ds-global-green-11: #045f11;
245
+ --ds-global-green-12: #63b46f;
246
+ --ds-global-green-13: #d1e9d4;
247
+ --ds-global-green-contrast-1: #000000;
248
+ --ds-global-green-contrast-2: #010401;
249
+ --ds-global-orange-1: #2d1507;
250
+ --ds-global-orange-2: #391b09;
251
+ --ds-global-orange-3: #4e250c;
252
+ --ds-global-orange-4: #633010;
253
+ --ds-global-orange-5: #783a13;
254
+ --ds-global-orange-6: #833f15;
255
+ --ds-global-orange-7: #b2551c;
256
+ --ds-global-orange-8: #e0b69c;
257
+ --ds-global-orange-9: #bc6028;
258
+ --ds-global-orange-10: #a24d1a;
259
+ --ds-global-orange-11: #833f15;
260
+ --ds-global-orange-12: #d29671;
261
+ --ds-global-orange-13: #f1ded3;
262
+ --ds-global-orange-contrast-1: #000000;
263
+ --ds-global-orange-contrast-2: #060301;
264
+ --ds-global-purple-1: #251238;
265
+ --ds-global-purple-2: #301748;
266
+ --ds-global-purple-3: #402060;
267
+ --ds-global-purple-4: #52287a;
268
+ --ds-global-purple-5: #643196;
269
+ --ds-global-purple-6: #6b399d;
270
+ --ds-global-purple-7: #865daf;
271
+ --ds-global-purple-8: #c9b7db;
272
+ --ds-global-purple-9: #b298cc;
273
+ --ds-global-purple-10: #a181c0;
274
+ --ds-global-purple-11: #8f69b5;
275
+ --ds-global-purple-12: #b298cc;
276
+ --ds-global-purple-13: #e7dfef;
277
+ --ds-global-purple-contrast-1: #000000;
278
+ --ds-global-purple-contrast-2: #18141b;
279
+ --ds-global-red-1: #3b0808;
280
+ --ds-global-red-2: #4b0a0a;
281
+ --ds-global-red-3: #620e0e;
282
+ --ds-global-red-4: #7c1212;
283
+ --ds-global-red-5: #961515;
284
+ --ds-global-red-6: #a31717;
285
+ --ds-global-red-7: #c93c3c;
286
+ --ds-global-red-8: #e9b0b0;
287
+ --ds-global-red-9: #d76e6e;
288
+ --ds-global-red-10: #ce4e4e;
289
+ --ds-global-red-11: #c32727;
290
+ --ds-global-red-12: #df8d8d;
291
+ --ds-global-red-13: #f5dcdc;
292
+ --ds-global-red-contrast-1: #000000;
293
+ --ds-global-red-contrast-2: #271414;
294
+ --ds-global-yellow-1: #221b06;
295
+ --ds-global-yellow-2: #2b2307;
296
+ --ds-global-yellow-3: #3a300a;
297
+ --ds-global-yellow-4: #4a3d0d;
298
+ --ds-global-yellow-5: #5a4a0f;
299
+ --ds-global-yellow-6: #635011;
300
+ --ds-global-yellow-7: #856d17;
301
+ --ds-global-yellow-8: #e4ba27;
302
+ --ds-global-yellow-9: #3d310a;
303
+ --ds-global-yellow-10: #52430e;
304
+ --ds-global-yellow-11: #695512;
305
+ --ds-global-yellow-12: #c39f21;
306
+ --ds-global-yellow-13: #f5e19b;
307
+ --ds-global-yellow-contrast-1: #ffffff;
308
+ --ds-global-yellow-contrast-2: #ccc9bf;
309
+
310
+ color-scheme: dark;
311
+ }
312
+
313
+ @media (prefers-color-scheme: dark) {
314
+ [data-ds-color-mode="auto"] {
315
+ --ds-color-accent-1: #1b1b1b;
316
+ --ds-color-accent-2: #242424;
317
+ --ds-color-accent-3: #303030;
318
+ --ds-color-accent-4: #3e3e3e;
319
+ --ds-color-accent-5: #4b4b4b;
320
+ --ds-color-accent-6: #525252;
321
+ --ds-color-accent-7: #6f6f6f;
322
+ --ds-color-accent-8: #bebebe;
323
+ --ds-color-accent-9: #ababab;
324
+ --ds-color-accent-10: #969696;
325
+ --ds-color-accent-11: #818181;
326
+ --ds-color-accent-12: #a3a3a3;
327
+ --ds-color-accent-13: #e1e1e1;
328
+ --ds-color-accent-contrast-1: #000000;
329
+ --ds-color-accent-contrast-2: #1b1b1b;
330
+ --ds-color-accent-background-default: var(--ds-color-accent-1);
331
+ --ds-color-accent-background-subtle: var(--ds-color-accent-2);
332
+ --ds-color-accent-surface-default: var(--ds-color-accent-3);
333
+ --ds-color-accent-surface-hover: var(--ds-color-accent-4);
334
+ --ds-color-accent-surface-active: var(--ds-color-accent-5);
335
+ --ds-color-accent-border-subtle: var(--ds-color-accent-6);
336
+ --ds-color-accent-border-default: var(--ds-color-accent-7);
337
+ --ds-color-accent-border-strong: var(--ds-color-accent-8);
338
+ --ds-color-accent-base-default: var(--ds-color-accent-9);
339
+ --ds-color-accent-base-hover: var(--ds-color-accent-10);
340
+ --ds-color-accent-base-active: var(--ds-color-accent-11);
341
+ --ds-color-accent-text-subtle: var(--ds-color-accent-12);
342
+ --ds-color-accent-text-default: var(--ds-color-accent-13);
343
+ --ds-color-accent-contrast-default: var(--ds-color-accent-contrast-1);
344
+ --ds-color-accent-contrast-subtle: var(--ds-color-accent-contrast-2);
345
+ --ds-color-neutral-1: #1b1b1b;
346
+ --ds-color-neutral-2: #242424;
347
+ --ds-color-neutral-3: #303030;
348
+ --ds-color-neutral-4: #3e3e3e;
349
+ --ds-color-neutral-5: #4b4b4b;
350
+ --ds-color-neutral-6: #525252;
351
+ --ds-color-neutral-7: #6f6f6f;
352
+ --ds-color-neutral-8: #bebebe;
353
+ --ds-color-neutral-9: #1f1f1f;
354
+ --ds-color-neutral-10: #303030;
355
+ --ds-color-neutral-11: #424242;
356
+ --ds-color-neutral-12: #a3a3a3;
357
+ --ds-color-neutral-13: #e1e1e1;
358
+ --ds-color-neutral-contrast-1: #ffffff;
359
+ --ds-color-neutral-contrast-2: #b0b0b0;
360
+ --ds-color-neutral-background-default: var(--ds-color-neutral-1);
361
+ --ds-color-neutral-background-subtle: var(--ds-color-neutral-2);
362
+ --ds-color-neutral-surface-default: var(--ds-color-neutral-3);
363
+ --ds-color-neutral-surface-hover: var(--ds-color-neutral-4);
364
+ --ds-color-neutral-surface-active: var(--ds-color-neutral-5);
365
+ --ds-color-neutral-border-subtle: var(--ds-color-neutral-6);
366
+ --ds-color-neutral-border-default: var(--ds-color-neutral-7);
367
+ --ds-color-neutral-border-strong: var(--ds-color-neutral-8);
368
+ --ds-color-neutral-base-default: var(--ds-color-neutral-9);
369
+ --ds-color-neutral-base-hover: var(--ds-color-neutral-10);
370
+ --ds-color-neutral-base-active: var(--ds-color-neutral-11);
371
+ --ds-color-neutral-text-subtle: var(--ds-color-neutral-12);
372
+ --ds-color-neutral-text-default: var(--ds-color-neutral-13);
373
+ --ds-color-neutral-contrast-default: var(--ds-color-neutral-contrast-1);
374
+ --ds-color-neutral-contrast-subtle: var(--ds-color-neutral-contrast-2);
375
+ --ds-color-brand1-1: #121e18;
376
+ --ds-color-brand1-2: #18271f;
377
+ --ds-color-brand1-3: #1f342a;
378
+ --ds-color-brand1-4: #284336;
379
+ --ds-color-brand1-5: #315241;
380
+ --ds-color-brand1-6: #355947;
381
+ --ds-color-brand1-7: #487960;
382
+ --ds-color-brand1-8: #86cda9;
383
+ --ds-color-brand1-9: #284336;
384
+ --ds-color-brand1-10: #345745;
385
+ --ds-color-brand1-11: #406b55;
386
+ --ds-color-brand1-12: #6ab28d;
387
+ --ds-color-brand1-13: #cae9d9;
388
+ --ds-color-brand1-contrast-1: #ffffff;
389
+ --ds-color-brand1-contrast-2: #d3d8d6;
390
+ --ds-color-brand1-background-default: var(--ds-color-brand1-1);
391
+ --ds-color-brand1-background-subtle: var(--ds-color-brand1-2);
392
+ --ds-color-brand1-surface-default: var(--ds-color-brand1-3);
393
+ --ds-color-brand1-surface-hover: var(--ds-color-brand1-4);
394
+ --ds-color-brand1-surface-active: var(--ds-color-brand1-5);
395
+ --ds-color-brand1-border-subtle: var(--ds-color-brand1-6);
396
+ --ds-color-brand1-border-default: var(--ds-color-brand1-7);
397
+ --ds-color-brand1-border-strong: var(--ds-color-brand1-8);
398
+ --ds-color-brand1-base-default: var(--ds-color-brand1-9);
399
+ --ds-color-brand1-base-hover: var(--ds-color-brand1-10);
400
+ --ds-color-brand1-base-active: var(--ds-color-brand1-11);
401
+ --ds-color-brand1-text-subtle: var(--ds-color-brand1-12);
402
+ --ds-color-brand1-text-default: var(--ds-color-brand1-13);
403
+ --ds-color-brand1-contrast-default: var(--ds-color-brand1-contrast-1);
404
+ --ds-color-brand1-contrast-subtle: var(--ds-color-brand1-contrast-2);
405
+ --ds-color-brand2-1: #191c1f;
406
+ --ds-color-brand2-2: #202428;
407
+ --ds-color-brand2-3: #2b3135;
408
+ --ds-color-brand2-4: #383f44;
409
+ --ds-color-brand2-5: #444c53;
410
+ --ds-color-brand2-6: #4a535b;
411
+ --ds-color-brand2-7: #65717b;
412
+ --ds-color-brand2-8: #acc1d2;
413
+ --ds-color-brand2-9: #24282b;
414
+ --ds-color-brand2-10: #33393f;
415
+ --ds-color-brand2-11: #444c53;
416
+ --ds-color-brand2-12: #93a5b4;
417
+ --ds-color-brand2-13: #d5e4f0;
418
+ --ds-color-brand2-contrast-1: #ffffff;
419
+ --ds-color-brand2-contrast-2: #babbbc;
420
+ --ds-color-brand2-background-default: var(--ds-color-brand2-1);
421
+ --ds-color-brand2-background-subtle: var(--ds-color-brand2-2);
422
+ --ds-color-brand2-surface-default: var(--ds-color-brand2-3);
423
+ --ds-color-brand2-surface-hover: var(--ds-color-brand2-4);
424
+ --ds-color-brand2-surface-active: var(--ds-color-brand2-5);
425
+ --ds-color-brand2-border-subtle: var(--ds-color-brand2-6);
426
+ --ds-color-brand2-border-default: var(--ds-color-brand2-7);
427
+ --ds-color-brand2-border-strong: var(--ds-color-brand2-8);
428
+ --ds-color-brand2-base-default: var(--ds-color-brand2-9);
429
+ --ds-color-brand2-base-hover: var(--ds-color-brand2-10);
430
+ --ds-color-brand2-base-active: var(--ds-color-brand2-11);
431
+ --ds-color-brand2-text-subtle: var(--ds-color-brand2-12);
432
+ --ds-color-brand2-text-default: var(--ds-color-brand2-13);
433
+ --ds-color-brand2-contrast-default: var(--ds-color-brand2-contrast-1);
434
+ --ds-color-brand2-contrast-subtle: var(--ds-color-brand2-contrast-2);
435
+ --ds-color-brand3-1: #1f1b17;
436
+ --ds-color-brand3-2: #27231e;
437
+ --ds-color-brand3-3: #353028;
438
+ --ds-color-brand3-4: #433c33;
439
+ --ds-color-brand3-5: #534a3f;
440
+ --ds-color-brand3-6: #5b5145;
441
+ --ds-color-brand3-7: #7a6d5c;
442
+ --ds-color-brand3-8: #d0bb9e;
443
+ --ds-color-brand3-9: #2c2721;
444
+ --ds-color-brand3-10: #3f3830;
445
+ --ds-color-brand3-11: #534a3f;
446
+ --ds-color-brand3-12: #b2a188;
447
+ --ds-color-brand3-13: #efe0cc;
448
+ --ds-color-brand3-contrast-1: #ffffff;
449
+ --ds-color-brand3-contrast-2: #bdbbb9;
450
+ --ds-color-brand3-background-default: var(--ds-color-brand3-1);
451
+ --ds-color-brand3-background-subtle: var(--ds-color-brand3-2);
452
+ --ds-color-brand3-surface-default: var(--ds-color-brand3-3);
453
+ --ds-color-brand3-surface-hover: var(--ds-color-brand3-4);
454
+ --ds-color-brand3-surface-active: var(--ds-color-brand3-5);
455
+ --ds-color-brand3-border-subtle: var(--ds-color-brand3-6);
456
+ --ds-color-brand3-border-default: var(--ds-color-brand3-7);
457
+ --ds-color-brand3-border-strong: var(--ds-color-brand3-8);
458
+ --ds-color-brand3-base-default: var(--ds-color-brand3-9);
459
+ --ds-color-brand3-base-hover: var(--ds-color-brand3-10);
460
+ --ds-color-brand3-base-active: var(--ds-color-brand3-11);
461
+ --ds-color-brand3-text-subtle: var(--ds-color-brand3-12);
462
+ --ds-color-brand3-text-default: var(--ds-color-brand3-13);
463
+ --ds-color-brand3-contrast-default: var(--ds-color-brand3-contrast-1);
464
+ --ds-color-brand3-contrast-subtle: var(--ds-color-brand3-contrast-2);
465
+ --ds-color-success-background-default: var(--ds-global-green-1);
466
+ --ds-color-success-background-subtle: var(--ds-global-green-2);
467
+ --ds-color-success-surface-default: var(--ds-global-green-3);
468
+ --ds-color-success-surface-hover: var(--ds-global-green-4);
469
+ --ds-color-success-surface-active: var(--ds-global-green-5);
470
+ --ds-color-success-border-subtle: var(--ds-global-green-6);
471
+ --ds-color-success-border-default: var(--ds-global-green-7);
472
+ --ds-color-success-border-strong: var(--ds-global-green-8);
473
+ --ds-color-success-base-default: var(--ds-global-green-9);
474
+ --ds-color-success-base-hover: var(--ds-global-green-10);
475
+ --ds-color-success-base-active: var(--ds-global-green-11);
476
+ --ds-color-success-text-subtle: var(--ds-global-green-12);
477
+ --ds-color-success-text-default: var(--ds-global-green-13);
478
+ --ds-color-success-contrast-default: var(--ds-global-green-contrast-1);
479
+ --ds-color-success-contrast-subtle: var(--ds-global-green-contrast-2);
480
+ --ds-color-danger-background-default: var(--ds-global-red-1);
481
+ --ds-color-danger-background-subtle: var(--ds-global-red-2);
482
+ --ds-color-danger-surface-default: var(--ds-global-red-3);
483
+ --ds-color-danger-surface-hover: var(--ds-global-red-4);
484
+ --ds-color-danger-surface-active: var(--ds-global-red-5);
485
+ --ds-color-danger-border-subtle: var(--ds-global-red-6);
486
+ --ds-color-danger-border-default: var(--ds-global-red-7);
487
+ --ds-color-danger-border-strong: var(--ds-global-red-8);
488
+ --ds-color-danger-base-default: var(--ds-global-red-9);
489
+ --ds-color-danger-base-hover: var(--ds-global-red-10);
490
+ --ds-color-danger-base-active: var(--ds-global-red-11);
491
+ --ds-color-danger-text-subtle: var(--ds-global-red-12);
492
+ --ds-color-danger-text-default: var(--ds-global-red-13);
493
+ --ds-color-danger-contrast-default: var(--ds-global-red-contrast-1);
494
+ --ds-color-danger-contrast-subtle: var(--ds-global-red-contrast-2);
495
+ --ds-color-info-background-default: #031d30;
496
+ --ds-color-info-background-subtle: #032540;
497
+ --ds-color-info-surface-default: #043256;
498
+ --ds-color-info-surface-hover: #063f6c;
499
+ --ds-color-info-surface-active: #074d84;
500
+ --ds-color-info-border-subtle: #075490;
501
+ --ds-color-info-border-default: #0c72c1;
502
+ --ds-color-info-border-strong: #98c3e5;
503
+ --ds-color-info-base-default: #2a84c8;
504
+ --ds-color-info-base-hover: #0a6dba;
505
+ --ds-color-info-base-active: #085998;
506
+ --ds-color-info-text-subtle: #6ba9d9;
507
+ --ds-color-info-text-default: #d3e5f4;
508
+ --ds-color-info-contrast-default: #000000;
509
+ --ds-color-info-contrast-subtle: #040c13;
510
+ --ds-color-warning-background-default: var(--ds-global-yellow-1);
511
+ --ds-color-warning-background-subtle: var(--ds-global-yellow-2);
512
+ --ds-color-warning-surface-default: var(--ds-global-yellow-3);
513
+ --ds-color-warning-surface-hover: var(--ds-global-yellow-4);
514
+ --ds-color-warning-surface-active: var(--ds-global-yellow-5);
515
+ --ds-color-warning-border-subtle: var(--ds-global-yellow-6);
516
+ --ds-color-warning-border-default: var(--ds-global-yellow-7);
517
+ --ds-color-warning-border-strong: var(--ds-global-yellow-8);
518
+ --ds-color-warning-base-default: var(--ds-global-orange-9);
519
+ --ds-color-warning-base-hover: var(--ds-global-orange-10);
520
+ --ds-color-warning-base-active: var(--ds-global-orange-11);
521
+ --ds-color-warning-text-subtle: var(--ds-global-orange-12);
522
+ --ds-color-warning-text-default: var(--ds-global-orange-13);
523
+ --ds-color-warning-contrast-default: var(--ds-global-orange-contrast-1);
524
+ --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2);
525
+ --ds-color-focus-inner: #1b1b1b;
526
+ --ds-color-focus-outer: #e1e1e1;
527
+ --ds-global-blue-1: #031d30;
528
+ --ds-global-blue-2: #032540;
529
+ --ds-global-blue-3: #043256;
530
+ --ds-global-blue-4: #063f6c;
531
+ --ds-global-blue-5: #074d84;
532
+ --ds-global-blue-6: #075490;
533
+ --ds-global-blue-7: #0c72c1;
534
+ --ds-global-blue-8: #98c3e5;
535
+ --ds-global-blue-9: #2a84c8;
536
+ --ds-global-blue-10: #0a6dba;
537
+ --ds-global-blue-11: #085998;
538
+ --ds-global-blue-12: #6ba9d9;
539
+ --ds-global-blue-13: #d3e5f4;
540
+ --ds-global-blue-contrast-1: #000000;
541
+ --ds-global-blue-contrast-2: #040c13;
542
+ --ds-global-green-1: #012106;
543
+ --ds-global-green-2: #022b08;
544
+ --ds-global-green-3: #03380a;
545
+ --ds-global-green-4: #03490d;
546
+ --ds-global-green-5: #045810;
547
+ --ds-global-green-6: #045f11;
548
+ --ds-global-green-7: #068217;
549
+ --ds-global-green-8: #93cb9b;
550
+ --ds-global-green-9: #118c23;
551
+ --ds-global-green-10: #057615;
552
+ --ds-global-green-11: #045f11;
553
+ --ds-global-green-12: #63b46f;
554
+ --ds-global-green-13: #d1e9d4;
555
+ --ds-global-green-contrast-1: #000000;
556
+ --ds-global-green-contrast-2: #010401;
557
+ --ds-global-orange-1: #2d1507;
558
+ --ds-global-orange-2: #391b09;
559
+ --ds-global-orange-3: #4e250c;
560
+ --ds-global-orange-4: #633010;
561
+ --ds-global-orange-5: #783a13;
562
+ --ds-global-orange-6: #833f15;
563
+ --ds-global-orange-7: #b2551c;
564
+ --ds-global-orange-8: #e0b69c;
565
+ --ds-global-orange-9: #bc6028;
566
+ --ds-global-orange-10: #a24d1a;
567
+ --ds-global-orange-11: #833f15;
568
+ --ds-global-orange-12: #d29671;
569
+ --ds-global-orange-13: #f1ded3;
570
+ --ds-global-orange-contrast-1: #000000;
571
+ --ds-global-orange-contrast-2: #060301;
572
+ --ds-global-purple-1: #251238;
573
+ --ds-global-purple-2: #301748;
574
+ --ds-global-purple-3: #402060;
575
+ --ds-global-purple-4: #52287a;
576
+ --ds-global-purple-5: #643196;
577
+ --ds-global-purple-6: #6b399d;
578
+ --ds-global-purple-7: #865daf;
579
+ --ds-global-purple-8: #c9b7db;
580
+ --ds-global-purple-9: #b298cc;
581
+ --ds-global-purple-10: #a181c0;
582
+ --ds-global-purple-11: #8f69b5;
583
+ --ds-global-purple-12: #b298cc;
584
+ --ds-global-purple-13: #e7dfef;
585
+ --ds-global-purple-contrast-1: #000000;
586
+ --ds-global-purple-contrast-2: #18141b;
587
+ --ds-global-red-1: #3b0808;
588
+ --ds-global-red-2: #4b0a0a;
589
+ --ds-global-red-3: #620e0e;
590
+ --ds-global-red-4: #7c1212;
591
+ --ds-global-red-5: #961515;
592
+ --ds-global-red-6: #a31717;
593
+ --ds-global-red-7: #c93c3c;
594
+ --ds-global-red-8: #e9b0b0;
595
+ --ds-global-red-9: #d76e6e;
596
+ --ds-global-red-10: #ce4e4e;
597
+ --ds-global-red-11: #c32727;
598
+ --ds-global-red-12: #df8d8d;
599
+ --ds-global-red-13: #f5dcdc;
600
+ --ds-global-red-contrast-1: #000000;
601
+ --ds-global-red-contrast-2: #271414;
602
+ --ds-global-yellow-1: #221b06;
603
+ --ds-global-yellow-2: #2b2307;
604
+ --ds-global-yellow-3: #3a300a;
605
+ --ds-global-yellow-4: #4a3d0d;
606
+ --ds-global-yellow-5: #5a4a0f;
607
+ --ds-global-yellow-6: #635011;
608
+ --ds-global-yellow-7: #856d17;
609
+ --ds-global-yellow-8: #e4ba27;
610
+ --ds-global-yellow-9: #3d310a;
611
+ --ds-global-yellow-10: #52430e;
612
+ --ds-global-yellow-11: #695512;
613
+ --ds-global-yellow-12: #c39f21;
614
+ --ds-global-yellow-13: #f5e19b;
615
+ --ds-global-yellow-contrast-1: #ffffff;
616
+ --ds-global-yellow-contrast-2: #ccc9bf;
617
+
618
+ color-scheme: dark;
619
+ }
620
+
621
+ }
622
+
623
+ }