@udir-design/theme 0.1.0-2 → 1.0.0-alpha.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 (18) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +12 -2
  3. package/dist/colors.d.ts +10 -0
  4. package/dist/udir/builtin-colors.css +87 -0
  5. package/dist/udir/color/accent.css +24 -0
  6. package/dist/udir/color/support1.css +24 -0
  7. package/dist/udir/color/support2.css +24 -0
  8. package/dist/udir/color/support3.css +24 -0
  9. package/dist/udir/color-scheme/dark.css +473 -0
  10. package/dist/udir/color-scheme/light.css +473 -0
  11. package/dist/udir/semantic.css +54 -51
  12. package/dist/udir/typography/primary.css +22 -54
  13. package/dist/udir/typography/secondary.css +22 -54
  14. package/dist/udir.css +1118 -1604
  15. package/package.json +11 -5
  16. package/dist/udir/color-mode/contrast.css +0 -311
  17. package/dist/udir/color-mode/dark.css +0 -623
  18. package/dist/udir/color-mode/light.css +0 -623
package/dist/udir/color-mode/light.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.light {
6
- :root, [data-ds-color-mode="light"] {
7
- --ds-color-accent-1: #fefefe;
8
- --ds-color-accent-2: #f2f2f2;
9
- --ds-color-accent-3: #e1e1e1;
10
- --ds-color-accent-4: #d0d0d0;
11
- --ds-color-accent-5: #c1c1c1;
12
- --ds-color-accent-6: #bbbbbb;
13
- --ds-color-accent-7: #818181;
14
- --ds-color-accent-8: #4e4e4e;
15
- --ds-color-accent-9: #303030;
16
- --ds-color-accent-10: #424242;
17
- --ds-color-accent-11: #555555;
18
- --ds-color-accent-12: #636363;
19
- --ds-color-accent-13: #2c2c2c;
20
- --ds-color-accent-contrast-1: #ffffff;
21
- --ds-color-accent-contrast-2: #c6c6c6;
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: #fefefe;
38
- --ds-color-neutral-2: #f2f2f2;
39
- --ds-color-neutral-3: #e1e1e1;
40
- --ds-color-neutral-4: #d0d0d0;
41
- --ds-color-neutral-5: #c1c1c1;
42
- --ds-color-neutral-6: #bbbbbb;
43
- --ds-color-neutral-7: #818181;
44
- --ds-color-neutral-8: #4e4e4e;
45
- --ds-color-neutral-9: #dedede;
46
- --ds-color-neutral-10: #c6c6c6;
47
- --ds-color-neutral-11: #b0b0b0;
48
- --ds-color-neutral-12: #636363;
49
- --ds-color-neutral-13: #2c2c2c;
50
- --ds-color-neutral-contrast-1: #000000;
51
- --ds-color-neutral-contrast-2: #424242;
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: #fcfefd;
68
- --ds-color-brand1-2: #e7f5ee;
69
- --ds-color-brand1-3: #cae9d9;
70
- --ds-color-brand1-4: #abdcc3;
71
- --ds-color-brand1-5: #8ccfad;
72
- --ds-color-brand1-6: #81cba5;
73
- --ds-color-brand1-7: #548c6f;
74
- --ds-color-brand1-8: #325443;
75
- --ds-color-brand1-9: #76c69d;
76
- --ds-color-brand1-10: #68af8a;
77
- --ds-color-brand1-11: #5a9878;
78
- --ds-color-brand1-12: #406b55;
79
- --ds-color-brand1-13: #1d3026;
80
- --ds-color-brand1-contrast-1: #000000;
81
- --ds-color-brand1-contrast-2: #182720;
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: #fefeff;
98
- --ds-color-brand2-2: #ecf3f8;
99
- --ds-color-brand2-3: #d5e4f0;
100
- --ds-color-brand2-4: #bdd4e7;
101
- --ds-color-brand2-5: #aec3d4;
102
- --ds-color-brand2-6: #a9bece;
103
- --ds-color-brand2-7: #74838e;
104
- --ds-color-brand2-8: #464e55;
105
- --ds-color-brand2-9: #bed5e8;
106
- --ds-color-brand2-10: #a9bece;
107
- --ds-color-brand2-11: #96a8b7;
108
- --ds-color-brand2-12: #5a646d;
109
- --ds-color-brand2-13: #282d31;
110
- --ds-color-brand2-contrast-1: #000000;
111
- --ds-color-brand2-contrast-2: #33393f;
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: #fffefd;
128
- --ds-color-brand3-2: #f8f2ea;
129
- --ds-color-brand3-3: #efe0cc;
130
- --ds-color-brand3-4: #e5ceae;
131
- --ds-color-brand3-5: #d2bd9f;
132
- --ds-color-brand3-6: #cdb99c;
133
- --ds-color-brand3-7: #8e7f6c;
134
- --ds-color-brand3-8: #554c41;
135
- --ds-color-brand3-9: #e5ceae;
136
- --ds-color-brand3-10: #cdb99c;
137
- --ds-color-brand3-11: #b5a38a;
138
- --ds-color-brand3-12: #6c6252;
139
- --ds-color-brand3-13: #302b25;
140
- --ds-color-brand3-contrast-1: #000000;
141
- --ds-color-brand3-contrast-2: #3f3830;
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: #fefeff;
188
- --ds-color-info-background-subtle: #edf5fa;
189
- --ds-color-info-surface-default: #d3e5f4;
190
- --ds-color-info-surface-hover: #b7d5ed;
191
- --ds-color-info-surface-active: #9bc5e5;
192
- --ds-color-info-border-subtle: #94c1e3;
193
- --ds-color-info-border-default: #2f86c9;
194
- --ds-color-info-border-strong: #075089;
195
- --ds-color-info-base-default: #0A71C0;
196
- --ds-color-info-base-hover: #085ea0;
197
- --ds-color-info-base-active: #074b80;
198
- --ds-color-info-text-subtle: #0966ac;
199
- --ds-color-info-text-default: #042d4d;
200
- --ds-color-info-contrast-default: #ffffff;
201
- --ds-color-info-contrast-subtle: #f3f8fc;
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: #fefefe;
218
- --ds-color-focus-outer: #2c2c2c;
219
- --ds-global-blue-1: #fefeff;
220
- --ds-global-blue-2: #edf5fa;
221
- --ds-global-blue-3: #d3e5f4;
222
- --ds-global-blue-4: #b7d5ed;
223
- --ds-global-blue-5: #9bc5e5;
224
- --ds-global-blue-6: #94c1e3;
225
- --ds-global-blue-7: #2f86c9;
226
- --ds-global-blue-8: #075089;
227
- --ds-global-blue-9: #0A71C0;
228
- --ds-global-blue-10: #085ea0;
229
- --ds-global-blue-11: #074b80;
230
- --ds-global-blue-12: #0966ac;
231
- --ds-global-blue-13: #042d4d;
232
- --ds-global-blue-contrast-1: #ffffff;
233
- --ds-global-blue-contrast-2: #f3f8fc;
234
- --ds-global-green-1: #fcfefc;
235
- --ds-global-green-2: #edf6ee;
236
- --ds-global-green-3: #d1e9d4;
237
- --ds-global-green-4: #b5dbba;
238
- --ds-global-green-5: #96cd9e;
239
- --ds-global-green-6: #8fc997;
240
- --ds-global-green-7: #229532;
241
- --ds-global-green-8: #045a10;
242
- --ds-global-green-9: #068718;
243
- --ds-global-green-10: #057114;
244
- --ds-global-green-11: #045a10;
245
- --ds-global-green-12: #057315;
246
- --ds-global-green-13: #023409;
247
- --ds-global-green-contrast-1: #ffffff;
248
- --ds-global-green-contrast-2: #f9fcf9;
249
- --ds-global-orange-1: #fffefe;
250
- --ds-global-orange-2: #f9f2ed;
251
- --ds-global-orange-3: #f1ded3;
252
- --ds-global-orange-4: #e9cbb8;
253
- --ds-global-orange-5: #e1b9a0;
254
- --ds-global-orange-6: #deb296;
255
- --ds-global-orange-7: #c06b36;
256
- --ds-global-orange-8: #7c3b14;
257
- --ds-global-orange-9: #B8581D;
258
- --ds-global-orange-10: #9a4918;
259
- --ds-global-orange-11: #7c3b14;
260
- --ds-global-orange-12: #9e4b19;
261
- --ds-global-orange-13: #47220b;
262
- --ds-global-orange-contrast-1: #ffffff;
263
- --ds-global-orange-contrast-2: #fdfbf9;
264
- --ds-global-purple-1: #fefefe;
265
- --ds-global-purple-2: #f5f2f9;
266
- --ds-global-purple-3: #e7dfef;
267
- --ds-global-purple-4: #d9cce6;
268
- --ds-global-purple-5: #ccbadd;
269
- --ds-global-purple-6: #c7b4da;
270
- --ds-global-purple-7: #9572b9;
271
- --ds-global-purple-8: #663399;
272
- --ds-global-purple-9: #663299;
273
- --ds-global-purple-10: #4f2777;
274
- --ds-global-purple-11: #381b54;
275
- --ds-global-purple-12: #7b4ea7;
276
- --ds-global-purple-13: #3b1d59;
277
- --ds-global-purple-contrast-1: #ffffff;
278
- --ds-global-purple-contrast-2: #eee8f3;
279
- --ds-global-red-1: #fffefe;
280
- --ds-global-red-2: #fbf1f1;
281
- --ds-global-red-3: #f5dcdc;
282
- --ds-global-red-4: #f0c7c7;
283
- --ds-global-red-5: #eab3b3;
284
- --ds-global-red-6: #e8acac;
285
- --ds-global-red-7: #d25b5b;
286
- --ds-global-red-8: #9a1616;
287
- --ds-global-red-9: #C01B1B;
288
- --ds-global-red-10: #9a1616;
289
- --ds-global-red-11: #771111;
290
- --ds-global-red-12: #c22020;
291
- --ds-global-red-13: #5a0d0d;
292
- --ds-global-red-contrast-1: #ffffff;
293
- --ds-global-red-contrast-2: #f6dfdf;
294
- --ds-global-yellow-1: #fffefc;
295
- --ds-global-yellow-2: #fbf2d3;
296
- --ds-global-yellow-3: #f5e19b;
297
- --ds-global-yellow-4: #efcf5d;
298
- --ds-global-yellow-5: #e6bc27;
299
- --ds-global-yellow-6: #e0b726;
300
- --ds-global-yellow-7: #9a7e1a;
301
- --ds-global-yellow-8: #5d4c10;
302
- --ds-global-yellow-9: #EABF28;
303
- --ds-global-yellow-10: #d0aa24;
304
- --ds-global-yellow-11: #b7951f;
305
- --ds-global-yellow-12: #776114;
306
- --ds-global-yellow-13: #352b09;
307
- --ds-global-yellow-contrast-1: #000000;
308
- --ds-global-yellow-contrast-2: #382d0a;
309
-
310
- color-scheme: light;
311
- }
312
-
313
- @media (prefers-color-scheme: light) {
314
- [data-ds-color-mode="auto"] {
315
- --ds-color-accent-1: #fefefe;
316
- --ds-color-accent-2: #f2f2f2;
317
- --ds-color-accent-3: #e1e1e1;
318
- --ds-color-accent-4: #d0d0d0;
319
- --ds-color-accent-5: #c1c1c1;
320
- --ds-color-accent-6: #bbbbbb;
321
- --ds-color-accent-7: #818181;
322
- --ds-color-accent-8: #4e4e4e;
323
- --ds-color-accent-9: #303030;
324
- --ds-color-accent-10: #424242;
325
- --ds-color-accent-11: #555555;
326
- --ds-color-accent-12: #636363;
327
- --ds-color-accent-13: #2c2c2c;
328
- --ds-color-accent-contrast-1: #ffffff;
329
- --ds-color-accent-contrast-2: #c6c6c6;
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: #fefefe;
346
- --ds-color-neutral-2: #f2f2f2;
347
- --ds-color-neutral-3: #e1e1e1;
348
- --ds-color-neutral-4: #d0d0d0;
349
- --ds-color-neutral-5: #c1c1c1;
350
- --ds-color-neutral-6: #bbbbbb;
351
- --ds-color-neutral-7: #818181;
352
- --ds-color-neutral-8: #4e4e4e;
353
- --ds-color-neutral-9: #dedede;
354
- --ds-color-neutral-10: #c6c6c6;
355
- --ds-color-neutral-11: #b0b0b0;
356
- --ds-color-neutral-12: #636363;
357
- --ds-color-neutral-13: #2c2c2c;
358
- --ds-color-neutral-contrast-1: #000000;
359
- --ds-color-neutral-contrast-2: #424242;
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: #fcfefd;
376
- --ds-color-brand1-2: #e7f5ee;
377
- --ds-color-brand1-3: #cae9d9;
378
- --ds-color-brand1-4: #abdcc3;
379
- --ds-color-brand1-5: #8ccfad;
380
- --ds-color-brand1-6: #81cba5;
381
- --ds-color-brand1-7: #548c6f;
382
- --ds-color-brand1-8: #325443;
383
- --ds-color-brand1-9: #76c69d;
384
- --ds-color-brand1-10: #68af8a;
385
- --ds-color-brand1-11: #5a9878;
386
- --ds-color-brand1-12: #406b55;
387
- --ds-color-brand1-13: #1d3026;
388
- --ds-color-brand1-contrast-1: #000000;
389
- --ds-color-brand1-contrast-2: #182720;
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: #fefeff;
406
- --ds-color-brand2-2: #ecf3f8;
407
- --ds-color-brand2-3: #d5e4f0;
408
- --ds-color-brand2-4: #bdd4e7;
409
- --ds-color-brand2-5: #aec3d4;
410
- --ds-color-brand2-6: #a9bece;
411
- --ds-color-brand2-7: #74838e;
412
- --ds-color-brand2-8: #464e55;
413
- --ds-color-brand2-9: #bed5e8;
414
- --ds-color-brand2-10: #a9bece;
415
- --ds-color-brand2-11: #96a8b7;
416
- --ds-color-brand2-12: #5a646d;
417
- --ds-color-brand2-13: #282d31;
418
- --ds-color-brand2-contrast-1: #000000;
419
- --ds-color-brand2-contrast-2: #33393f;
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: #fffefd;
436
- --ds-color-brand3-2: #f8f2ea;
437
- --ds-color-brand3-3: #efe0cc;
438
- --ds-color-brand3-4: #e5ceae;
439
- --ds-color-brand3-5: #d2bd9f;
440
- --ds-color-brand3-6: #cdb99c;
441
- --ds-color-brand3-7: #8e7f6c;
442
- --ds-color-brand3-8: #554c41;
443
- --ds-color-brand3-9: #e5ceae;
444
- --ds-color-brand3-10: #cdb99c;
445
- --ds-color-brand3-11: #b5a38a;
446
- --ds-color-brand3-12: #6c6252;
447
- --ds-color-brand3-13: #302b25;
448
- --ds-color-brand3-contrast-1: #000000;
449
- --ds-color-brand3-contrast-2: #3f3830;
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: #fefeff;
496
- --ds-color-info-background-subtle: #edf5fa;
497
- --ds-color-info-surface-default: #d3e5f4;
498
- --ds-color-info-surface-hover: #b7d5ed;
499
- --ds-color-info-surface-active: #9bc5e5;
500
- --ds-color-info-border-subtle: #94c1e3;
501
- --ds-color-info-border-default: #2f86c9;
502
- --ds-color-info-border-strong: #075089;
503
- --ds-color-info-base-default: #0A71C0;
504
- --ds-color-info-base-hover: #085ea0;
505
- --ds-color-info-base-active: #074b80;
506
- --ds-color-info-text-subtle: #0966ac;
507
- --ds-color-info-text-default: #042d4d;
508
- --ds-color-info-contrast-default: #ffffff;
509
- --ds-color-info-contrast-subtle: #f3f8fc;
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: #fefefe;
526
- --ds-color-focus-outer: #2c2c2c;
527
- --ds-global-blue-1: #fefeff;
528
- --ds-global-blue-2: #edf5fa;
529
- --ds-global-blue-3: #d3e5f4;
530
- --ds-global-blue-4: #b7d5ed;
531
- --ds-global-blue-5: #9bc5e5;
532
- --ds-global-blue-6: #94c1e3;
533
- --ds-global-blue-7: #2f86c9;
534
- --ds-global-blue-8: #075089;
535
- --ds-global-blue-9: #0A71C0;
536
- --ds-global-blue-10: #085ea0;
537
- --ds-global-blue-11: #074b80;
538
- --ds-global-blue-12: #0966ac;
539
- --ds-global-blue-13: #042d4d;
540
- --ds-global-blue-contrast-1: #ffffff;
541
- --ds-global-blue-contrast-2: #f3f8fc;
542
- --ds-global-green-1: #fcfefc;
543
- --ds-global-green-2: #edf6ee;
544
- --ds-global-green-3: #d1e9d4;
545
- --ds-global-green-4: #b5dbba;
546
- --ds-global-green-5: #96cd9e;
547
- --ds-global-green-6: #8fc997;
548
- --ds-global-green-7: #229532;
549
- --ds-global-green-8: #045a10;
550
- --ds-global-green-9: #068718;
551
- --ds-global-green-10: #057114;
552
- --ds-global-green-11: #045a10;
553
- --ds-global-green-12: #057315;
554
- --ds-global-green-13: #023409;
555
- --ds-global-green-contrast-1: #ffffff;
556
- --ds-global-green-contrast-2: #f9fcf9;
557
- --ds-global-orange-1: #fffefe;
558
- --ds-global-orange-2: #f9f2ed;
559
- --ds-global-orange-3: #f1ded3;
560
- --ds-global-orange-4: #e9cbb8;
561
- --ds-global-orange-5: #e1b9a0;
562
- --ds-global-orange-6: #deb296;
563
- --ds-global-orange-7: #c06b36;
564
- --ds-global-orange-8: #7c3b14;
565
- --ds-global-orange-9: #B8581D;
566
- --ds-global-orange-10: #9a4918;
567
- --ds-global-orange-11: #7c3b14;
568
- --ds-global-orange-12: #9e4b19;
569
- --ds-global-orange-13: #47220b;
570
- --ds-global-orange-contrast-1: #ffffff;
571
- --ds-global-orange-contrast-2: #fdfbf9;
572
- --ds-global-purple-1: #fefefe;
573
- --ds-global-purple-2: #f5f2f9;
574
- --ds-global-purple-3: #e7dfef;
575
- --ds-global-purple-4: #d9cce6;
576
- --ds-global-purple-5: #ccbadd;
577
- --ds-global-purple-6: #c7b4da;
578
- --ds-global-purple-7: #9572b9;
579
- --ds-global-purple-8: #663399;
580
- --ds-global-purple-9: #663299;
581
- --ds-global-purple-10: #4f2777;
582
- --ds-global-purple-11: #381b54;
583
- --ds-global-purple-12: #7b4ea7;
584
- --ds-global-purple-13: #3b1d59;
585
- --ds-global-purple-contrast-1: #ffffff;
586
- --ds-global-purple-contrast-2: #eee8f3;
587
- --ds-global-red-1: #fffefe;
588
- --ds-global-red-2: #fbf1f1;
589
- --ds-global-red-3: #f5dcdc;
590
- --ds-global-red-4: #f0c7c7;
591
- --ds-global-red-5: #eab3b3;
592
- --ds-global-red-6: #e8acac;
593
- --ds-global-red-7: #d25b5b;
594
- --ds-global-red-8: #9a1616;
595
- --ds-global-red-9: #C01B1B;
596
- --ds-global-red-10: #9a1616;
597
- --ds-global-red-11: #771111;
598
- --ds-global-red-12: #c22020;
599
- --ds-global-red-13: #5a0d0d;
600
- --ds-global-red-contrast-1: #ffffff;
601
- --ds-global-red-contrast-2: #f6dfdf;
602
- --ds-global-yellow-1: #fffefc;
603
- --ds-global-yellow-2: #fbf2d3;
604
- --ds-global-yellow-3: #f5e19b;
605
- --ds-global-yellow-4: #efcf5d;
606
- --ds-global-yellow-5: #e6bc27;
607
- --ds-global-yellow-6: #e0b726;
608
- --ds-global-yellow-7: #9a7e1a;
609
- --ds-global-yellow-8: #5d4c10;
610
- --ds-global-yellow-9: #EABF28;
611
- --ds-global-yellow-10: #d0aa24;
612
- --ds-global-yellow-11: #b7951f;
613
- --ds-global-yellow-12: #776114;
614
- --ds-global-yellow-13: #352b09;
615
- --ds-global-yellow-contrast-1: #000000;
616
- --ds-global-yellow-contrast-2: #382d0a;
617
-
618
- color-scheme: light;
619
- }
620
-
621
- }
622
-
623
- }