@udir-design/theme 0.1.0-2 → 1.0.0-alpha.1

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 (11) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +12 -2
  3. package/dist/colors.d.ts +9 -0
  4. package/dist/udir.css +807 -1709
  5. package/package.json +18 -7
  6. package/dist/udir/color-mode/contrast.css +0 -311
  7. package/dist/udir/color-mode/dark.css +0 -623
  8. package/dist/udir/color-mode/light.css +0 -623
  9. package/dist/udir/semantic.css +0 -68
  10. package/dist/udir/typography/primary.css +0 -159
  11. package/dist/udir/typography/secondary.css +0 -159
package/dist/udir/color-mode/dark.css DELETED
@@ -1,623 +0,0 @@
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
- }