@udir-design/theme 1.0.0-alpha.1 → 1.0.0-beta.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 (2) hide show
  1. package/dist/udir.css +373 -331
  2. package/package.json +3 -2
package/dist/udir.css CHANGED
@@ -13,11 +13,11 @@
13
13
  --ds-color-accent-surface-default: #ffffff;
14
14
  --ds-color-accent-surface-tinted: #d6eee2;
15
15
  --ds-color-accent-surface-hover: #bbe3cf;
16
- --ds-color-accent-surface-active: #a0d8bb;
16
+ --ds-color-accent-surface-active: #9dd6b9;
17
17
  --ds-color-accent-border-subtle: #81cba5;
18
- --ds-color-accent-border-default: #528a6d;
19
- --ds-color-accent-border-strong: #3f6a54;
20
- --ds-color-accent-text-subtle: #3f6a54;
18
+ --ds-color-accent-border-default: #4e8368;
19
+ --ds-color-accent-border-strong: #3d6651;
20
+ --ds-color-accent-text-subtle: #3d6651;
21
21
  --ds-color-accent-text-default: #1c2f26;
22
22
  --ds-color-accent-base-default: #76c69d;
23
23
  --ds-color-accent-base-hover: #68ae8a;
@@ -29,11 +29,11 @@
29
29
  --ds-color-neutral-surface-default: #ffffff;
30
30
  --ds-color-neutral-surface-tinted: #e8e8e8;
31
31
  --ds-color-neutral-surface-hover: #dadada;
32
- --ds-color-neutral-surface-active: #cbcbcb;
32
+ --ds-color-neutral-surface-active: #cacaca;
33
33
  --ds-color-neutral-border-subtle: #bcbcbc;
34
- --ds-color-neutral-border-default: #7e7e7e;
35
- --ds-color-neutral-border-strong: #616161;
36
- --ds-color-neutral-text-subtle: #616161;
34
+ --ds-color-neutral-border-default: #797979;
35
+ --ds-color-neutral-border-strong: #5d5d5d;
36
+ --ds-color-neutral-text-subtle: #5d5d5d;
37
37
  --ds-color-neutral-text-default: #2b2b2b;
38
38
  --ds-color-neutral-base-default: #303030;
39
39
  --ds-color-neutral-base-hover: #424242;
@@ -45,11 +45,11 @@
45
45
  --ds-color-support1-surface-default: #ffffff;
46
46
  --ds-color-support1-surface-tinted: #dfeaf4;
47
47
  --ds-color-support1-surface-hover: #cadcec;
48
- --ds-color-support1-surface-active: #b8cee1;
48
+ --ds-color-support1-surface-active: #b7cddf;
49
49
  --ds-color-support1-border-subtle: #aabecf;
50
- --ds-color-support1-border-default: #72808c;
51
- --ds-color-support1-border-strong: #58636b;
52
- --ds-color-support1-text-subtle: #58636b;
50
+ --ds-color-support1-border-default: #6d7a85;
51
+ --ds-color-support1-border-strong: #545f67;
52
+ --ds-color-support1-text-subtle: #545f67;
53
53
  --ds-color-support1-text-default: #272c30;
54
54
  --ds-color-support1-base-default: #bed5e8;
55
55
  --ds-color-support1-base-hover: #aabfd0;
@@ -61,11 +61,11 @@
61
61
  --ds-color-support2-surface-default: #ffffff;
62
62
  --ds-color-support2-surface-tinted: #f2e7d7;
63
63
  --ds-color-support2-surface-hover: #ead7be;
64
- --ds-color-support2-surface-active: #dfc8a9;
64
+ --ds-color-support2-surface-active: #ddc7a8;
65
65
  --ds-color-support2-border-subtle: #cdb99c;
66
- --ds-color-support2-border-default: #8a7c69;
67
- --ds-color-support2-border-strong: #6a6051;
68
- --ds-color-support2-text-subtle: #6a6051;
66
+ --ds-color-support2-border-default: #847764;
67
+ --ds-color-support2-border-strong: #665c4e;
68
+ --ds-color-support2-text-subtle: #665c4e;
69
69
  --ds-color-support2-text-default: #2f2b24;
70
70
  --ds-color-support2-base-default: #e5ceae;
71
71
  --ds-color-support2-base-hover: #cdb89c;
@@ -77,11 +77,11 @@
77
77
  --ds-color-success-surface-default: #ffffff;
78
78
  --ds-color-success-surface-tinted: #daeddd;
79
79
  --ds-color-success-surface-hover: #c3e2c7;
80
- --ds-color-success-surface-active: #abd6b1;
80
+ --ds-color-success-surface-active: #a8d5ae;
81
81
  --ds-color-success-border-subtle: #8fc997;
82
- --ds-color-success-border-default: #1d922d;
83
- --ds-color-success-border-strong: #057114;
84
- --ds-color-success-text-subtle: #057114;
82
+ --ds-color-success-border-default: #108c22;
83
+ --ds-color-success-border-strong: #056d13;
84
+ --ds-color-success-text-subtle: #056d13;
85
85
  --ds-color-success-text-default: #023409;
86
86
  --ds-color-success-base-default: #068718;
87
87
  --ds-color-success-base-hover: #057014;
@@ -93,11 +93,11 @@
93
93
  --ds-color-danger-surface-default: #ffffff;
94
94
  --ds-color-danger-surface-tinted: #f8e4e4;
95
95
  --ds-color-danger-surface-hover: #f3d2d2;
96
- --ds-color-danger-surface-active: #eec1c1;
96
+ --ds-color-danger-surface-active: #edbfbf;
97
97
  --ds-color-danger-border-subtle: #e8adad;
98
- --ds-color-danger-border-default: #d15757;
99
- --ds-color-danger-border-strong: #bf1b1b;
100
- --ds-color-danger-text-subtle: #bf1b1b;
98
+ --ds-color-danger-border-default: #ce4d4d;
99
+ --ds-color-danger-border-strong: #b81a1a;
100
+ --ds-color-danger-text-subtle: #b81a1a;
101
101
  --ds-color-danger-text-default: #590d0d;
102
102
  --ds-color-danger-base-default: #C01B1B;
103
103
  --ds-color-danger-base-hover: #9b1616;
@@ -109,11 +109,11 @@
109
109
  --ds-color-info-surface-default: #ffffff;
110
110
  --ds-color-info-surface-tinted: #dcebf6;
111
111
  --ds-color-info-surface-hover: #c5ddf0;
112
- --ds-color-info-surface-active: #aed0ea;
112
+ --ds-color-info-surface-active: #abcfe9;
113
113
  --ds-color-info-border-subtle: #94c1e3;
114
- --ds-color-info-border-default: #2a83c8;
115
- --ds-color-info-border-strong: #0964a9;
116
- --ds-color-info-text-subtle: #0964a9;
114
+ --ds-color-info-border-default: #1f7dc5;
115
+ --ds-color-info-border-strong: #0860a3;
116
+ --ds-color-info-text-subtle: #0860a3;
117
117
  --ds-color-info-text-default: #042d4d;
118
118
  --ds-color-info-base-default: #0A71C0;
119
119
  --ds-color-info-base-hover: #085d9f;
@@ -125,11 +125,11 @@
125
125
  --ds-color-warning-surface-default: #ffffff;
126
126
  --ds-color-warning-surface-tinted: #fae6c6;
127
127
  --ds-color-warning-surface-hover: #f6d5a0;
128
- --ds-color-warning-surface-active: #f3c479;
128
+ --ds-color-warning-surface-active: #f2c275;
129
129
  --ds-color-warning-border-subtle: #eeb04c;
130
- --ds-color-warning-border-default: #ad7214;
131
- --ds-color-warning-border-strong: #85580f;
132
- --ds-color-warning-text-subtle: #85580f;
130
+ --ds-color-warning-border-default: #a56d13;
131
+ --ds-color-warning-border-strong: #80540f;
132
+ --ds-color-warning-text-subtle: #80540f;
133
133
  --ds-color-warning-text-default: #3c2807;
134
134
  --ds-color-warning-base-default: #EA9B1B;
135
135
  --ds-color-warning-base-hover: #cd8818;
@@ -150,11 +150,11 @@
150
150
  --ds-color-accent-surface-default: #ffffff;
151
151
  --ds-color-accent-surface-tinted: #d6eee2;
152
152
  --ds-color-accent-surface-hover: #bbe3cf;
153
- --ds-color-accent-surface-active: #a0d8bb;
153
+ --ds-color-accent-surface-active: #9dd6b9;
154
154
  --ds-color-accent-border-subtle: #81cba5;
155
- --ds-color-accent-border-default: #528a6d;
156
- --ds-color-accent-border-strong: #3f6a54;
157
- --ds-color-accent-text-subtle: #3f6a54;
155
+ --ds-color-accent-border-default: #4e8368;
156
+ --ds-color-accent-border-strong: #3d6651;
157
+ --ds-color-accent-text-subtle: #3d6651;
158
158
  --ds-color-accent-text-default: #1c2f26;
159
159
  --ds-color-accent-base-default: #76c69d;
160
160
  --ds-color-accent-base-hover: #68ae8a;
@@ -166,11 +166,11 @@
166
166
  --ds-color-neutral-surface-default: #ffffff;
167
167
  --ds-color-neutral-surface-tinted: #e8e8e8;
168
168
  --ds-color-neutral-surface-hover: #dadada;
169
- --ds-color-neutral-surface-active: #cbcbcb;
169
+ --ds-color-neutral-surface-active: #cacaca;
170
170
  --ds-color-neutral-border-subtle: #bcbcbc;
171
- --ds-color-neutral-border-default: #7e7e7e;
172
- --ds-color-neutral-border-strong: #616161;
173
- --ds-color-neutral-text-subtle: #616161;
171
+ --ds-color-neutral-border-default: #797979;
172
+ --ds-color-neutral-border-strong: #5d5d5d;
173
+ --ds-color-neutral-text-subtle: #5d5d5d;
174
174
  --ds-color-neutral-text-default: #2b2b2b;
175
175
  --ds-color-neutral-base-default: #303030;
176
176
  --ds-color-neutral-base-hover: #424242;
@@ -182,11 +182,11 @@
182
182
  --ds-color-support1-surface-default: #ffffff;
183
183
  --ds-color-support1-surface-tinted: #dfeaf4;
184
184
  --ds-color-support1-surface-hover: #cadcec;
185
- --ds-color-support1-surface-active: #b8cee1;
185
+ --ds-color-support1-surface-active: #b7cddf;
186
186
  --ds-color-support1-border-subtle: #aabecf;
187
- --ds-color-support1-border-default: #72808c;
188
- --ds-color-support1-border-strong: #58636b;
189
- --ds-color-support1-text-subtle: #58636b;
187
+ --ds-color-support1-border-default: #6d7a85;
188
+ --ds-color-support1-border-strong: #545f67;
189
+ --ds-color-support1-text-subtle: #545f67;
190
190
  --ds-color-support1-text-default: #272c30;
191
191
  --ds-color-support1-base-default: #bed5e8;
192
192
  --ds-color-support1-base-hover: #aabfd0;
@@ -198,11 +198,11 @@
198
198
  --ds-color-support2-surface-default: #ffffff;
199
199
  --ds-color-support2-surface-tinted: #f2e7d7;
200
200
  --ds-color-support2-surface-hover: #ead7be;
201
- --ds-color-support2-surface-active: #dfc8a9;
201
+ --ds-color-support2-surface-active: #ddc7a8;
202
202
  --ds-color-support2-border-subtle: #cdb99c;
203
- --ds-color-support2-border-default: #8a7c69;
204
- --ds-color-support2-border-strong: #6a6051;
205
- --ds-color-support2-text-subtle: #6a6051;
203
+ --ds-color-support2-border-default: #847764;
204
+ --ds-color-support2-border-strong: #665c4e;
205
+ --ds-color-support2-text-subtle: #665c4e;
206
206
  --ds-color-support2-text-default: #2f2b24;
207
207
  --ds-color-support2-base-default: #e5ceae;
208
208
  --ds-color-support2-base-hover: #cdb89c;
@@ -214,11 +214,11 @@
214
214
  --ds-color-success-surface-default: #ffffff;
215
215
  --ds-color-success-surface-tinted: #daeddd;
216
216
  --ds-color-success-surface-hover: #c3e2c7;
217
- --ds-color-success-surface-active: #abd6b1;
217
+ --ds-color-success-surface-active: #a8d5ae;
218
218
  --ds-color-success-border-subtle: #8fc997;
219
- --ds-color-success-border-default: #1d922d;
220
- --ds-color-success-border-strong: #057114;
221
- --ds-color-success-text-subtle: #057114;
219
+ --ds-color-success-border-default: #108c22;
220
+ --ds-color-success-border-strong: #056d13;
221
+ --ds-color-success-text-subtle: #056d13;
222
222
  --ds-color-success-text-default: #023409;
223
223
  --ds-color-success-base-default: #068718;
224
224
  --ds-color-success-base-hover: #057014;
@@ -230,11 +230,11 @@
230
230
  --ds-color-danger-surface-default: #ffffff;
231
231
  --ds-color-danger-surface-tinted: #f8e4e4;
232
232
  --ds-color-danger-surface-hover: #f3d2d2;
233
- --ds-color-danger-surface-active: #eec1c1;
233
+ --ds-color-danger-surface-active: #edbfbf;
234
234
  --ds-color-danger-border-subtle: #e8adad;
235
- --ds-color-danger-border-default: #d15757;
236
- --ds-color-danger-border-strong: #bf1b1b;
237
- --ds-color-danger-text-subtle: #bf1b1b;
235
+ --ds-color-danger-border-default: #ce4d4d;
236
+ --ds-color-danger-border-strong: #b81a1a;
237
+ --ds-color-danger-text-subtle: #b81a1a;
238
238
  --ds-color-danger-text-default: #590d0d;
239
239
  --ds-color-danger-base-default: #C01B1B;
240
240
  --ds-color-danger-base-hover: #9b1616;
@@ -246,11 +246,11 @@
246
246
  --ds-color-info-surface-default: #ffffff;
247
247
  --ds-color-info-surface-tinted: #dcebf6;
248
248
  --ds-color-info-surface-hover: #c5ddf0;
249
- --ds-color-info-surface-active: #aed0ea;
249
+ --ds-color-info-surface-active: #abcfe9;
250
250
  --ds-color-info-border-subtle: #94c1e3;
251
- --ds-color-info-border-default: #2a83c8;
252
- --ds-color-info-border-strong: #0964a9;
253
- --ds-color-info-text-subtle: #0964a9;
251
+ --ds-color-info-border-default: #1f7dc5;
252
+ --ds-color-info-border-strong: #0860a3;
253
+ --ds-color-info-text-subtle: #0860a3;
254
254
  --ds-color-info-text-default: #042d4d;
255
255
  --ds-color-info-base-default: #0A71C0;
256
256
  --ds-color-info-base-hover: #085d9f;
@@ -262,11 +262,11 @@
262
262
  --ds-color-warning-surface-default: #ffffff;
263
263
  --ds-color-warning-surface-tinted: #fae6c6;
264
264
  --ds-color-warning-surface-hover: #f6d5a0;
265
- --ds-color-warning-surface-active: #f3c479;
265
+ --ds-color-warning-surface-active: #f2c275;
266
266
  --ds-color-warning-border-subtle: #eeb04c;
267
- --ds-color-warning-border-default: #ad7214;
268
- --ds-color-warning-border-strong: #85580f;
269
- --ds-color-warning-text-subtle: #85580f;
267
+ --ds-color-warning-border-default: #a56d13;
268
+ --ds-color-warning-border-strong: #80540f;
269
+ --ds-color-warning-text-subtle: #80540f;
270
270
  --ds-color-warning-text-default: #3c2807;
271
271
  --ds-color-warning-base-default: #EA9B1B;
272
272
  --ds-color-warning-base-hover: #cd8818;
@@ -484,136 +484,136 @@
484
484
 
485
485
  @layer ds.theme.color-scheme.dark {
486
486
  [data-color-scheme="dark"] {
487
- --ds-color-accent-background-default: #121e18;
488
- --ds-color-accent-background-tinted: #17271f;
489
- --ds-color-accent-surface-default: #1d3026;
490
- --ds-color-accent-surface-tinted: #22392d;
491
- --ds-color-accent-surface-hover: #274133;
492
- --ds-color-accent-surface-active: #2c4a3a;
493
- --ds-color-accent-border-subtle: #355846;
494
- --ds-color-accent-border-default: #50876b;
495
- --ds-color-accent-border-strong: #69b08c;
496
- --ds-color-accent-text-subtle: #69b08c;
497
- --ds-color-accent-text-default: #cfebdd;
487
+ --ds-color-accent-background-default: #121916;
488
+ --ds-color-accent-background-tinted: #18221c;
489
+ --ds-color-accent-surface-default: #1f2a24;
490
+ --ds-color-accent-surface-tinted: #233129;
491
+ --ds-color-accent-surface-hover: #293930;
492
+ --ds-color-accent-surface-active: #34473d;
493
+ --ds-color-accent-border-subtle: #3e5548;
494
+ --ds-color-accent-border-default: #648a75;
495
+ --ds-color-accent-border-strong: #81b398;
496
+ --ds-color-accent-text-subtle: #81b398;
497
+ --ds-color-accent-text-default: #e2efe8;
498
498
  --ds-color-accent-base-default: #284436;
499
499
  --ds-color-accent-base-hover: #345745;
500
500
  --ds-color-accent-base-active: #406c56;
501
501
  --ds-color-accent-base-contrast-subtle: #d4d9d7;
502
502
  --ds-color-accent-base-contrast-default: #ffffff;
503
- --ds-color-neutral-background-default: #1b1b1b;
504
- --ds-color-neutral-background-tinted: #232323;
505
- --ds-color-neutral-surface-default: #2c2c2c;
506
- --ds-color-neutral-surface-tinted: #353535;
507
- --ds-color-neutral-surface-hover: #3b3b3b;
508
- --ds-color-neutral-surface-active: #444444;
509
- --ds-color-neutral-border-subtle: #515151;
510
- --ds-color-neutral-border-default: #7c7c7c;
511
- --ds-color-neutral-border-strong: #a2a2a2;
512
- --ds-color-neutral-text-subtle: #a2a2a2;
513
- --ds-color-neutral-text-default: #e5e5e5;
503
+ --ds-color-neutral-background-default: #181818;
504
+ --ds-color-neutral-background-tinted: #1f1f1f;
505
+ --ds-color-neutral-surface-default: #282828;
506
+ --ds-color-neutral-surface-tinted: #2e2e2e;
507
+ --ds-color-neutral-surface-hover: #353535;
508
+ --ds-color-neutral-surface-active: #434343;
509
+ --ds-color-neutral-border-subtle: #505050;
510
+ --ds-color-neutral-border-default: #818181;
511
+ --ds-color-neutral-border-strong: #a8a8a8;
512
+ --ds-color-neutral-text-subtle: #a8a8a8;
513
+ --ds-color-neutral-text-default: #ececec;
514
514
  --ds-color-neutral-base-default: #ababab;
515
515
  --ds-color-neutral-base-hover: #969696;
516
516
  --ds-color-neutral-base-active: #818181;
517
517
  --ds-color-neutral-base-contrast-subtle: #1b1b1b;
518
518
  --ds-color-neutral-base-contrast-default: #000000;
519
- --ds-color-support1-background-default: #191b1e;
520
- --ds-color-support1-background-tinted: #202427;
521
- --ds-color-support1-surface-default: #282c30;
522
- --ds-color-support1-surface-tinted: #30353a;
523
- --ds-color-support1-surface-hover: #363c41;
524
- --ds-color-support1-surface-active: #3d454b;
525
- --ds-color-support1-border-subtle: #495259;
526
- --ds-color-support1-border-default: #707d89;
527
- --ds-color-support1-border-strong: #92a4b3;
528
- --ds-color-support1-text-subtle: #92a4b3;
529
- --ds-color-support1-text-default: #d9e6f2;
519
+ --ds-color-support1-background-default: #16181a;
520
+ --ds-color-support1-background-tinted: #1d2022;
521
+ --ds-color-support1-surface-default: #25282b;
522
+ --ds-color-support1-surface-tinted: #2b2e31;
523
+ --ds-color-support1-surface-hover: #323639;
524
+ --ds-color-support1-surface-active: #3f4448;
525
+ --ds-color-support1-border-subtle: #4b5156;
526
+ --ds-color-support1-border-default: #79838b;
527
+ --ds-color-support1-border-strong: #9daab4;
528
+ --ds-color-support1-text-subtle: #9daab4;
529
+ --ds-color-support1-text-default: #e6edf3;
530
530
  --ds-color-support1-base-default: #23282b;
531
531
  --ds-color-support1-base-hover: #343a3f;
532
532
  --ds-color-support1-base-active: #444c53;
533
533
  --ds-color-support1-base-contrast-subtle: #babbbc;
534
534
  --ds-color-support1-base-contrast-default: #ffffff;
535
- --ds-color-support2-background-default: #1e1b17;
536
- --ds-color-support2-background-tinted: #27231d;
537
- --ds-color-support2-surface-default: #302b24;
538
- --ds-color-support2-surface-tinted: #3a342c;
539
- --ds-color-support2-surface-hover: #413a31;
540
- --ds-color-support2-surface-active: #4a4338;
541
- --ds-color-support2-border-subtle: #595043;
542
- --ds-color-support2-border-default: #877a67;
543
- --ds-color-support2-border-strong: #b19f87;
544
- --ds-color-support2-text-subtle: #b19f87;
545
- --ds-color-support2-text-default: #f0e3d1;
535
+ --ds-color-support2-background-default: #191815;
536
+ --ds-color-support2-background-tinted: #221f1c;
537
+ --ds-color-support2-surface-default: #2a2723;
538
+ --ds-color-support2-surface-tinted: #312d28;
539
+ --ds-color-support2-surface-hover: #39352f;
540
+ --ds-color-support2-surface-active: #47423b;
541
+ --ds-color-support2-border-subtle: #554f47;
542
+ --ds-color-support2-border-default: #8a8072;
543
+ --ds-color-support2-border-strong: #b3a694;
544
+ --ds-color-support2-text-subtle: #b3a694;
545
+ --ds-color-support2-text-default: #f2ebe2;
546
546
  --ds-color-support2-base-default: #2c2721;
547
547
  --ds-color-support2-base-hover: #3e382f;
548
548
  --ds-color-support2-base-active: #534b3f;
549
549
  --ds-color-support2-base-contrast-subtle: #bcbbb9;
550
550
  --ds-color-support2-base-contrast-default: #ffffff;
551
- --ds-color-success-background-default: #012106;
552
- --ds-color-success-background-tinted: #022a08;
553
- --ds-color-success-surface-default: #023409;
554
- --ds-color-success-surface-tinted: #033e0b;
555
- --ds-color-success-surface-hover: #03460c;
556
- --ds-color-success-surface-active: #044f0e;
557
- --ds-color-success-border-subtle: #045f11;
558
- --ds-color-success-border-default: #178f28;
559
- --ds-color-success-border-strong: #62b36d;
560
- --ds-color-success-text-subtle: #62b36d;
561
- --ds-color-success-text-default: #d4ead7;
551
+ --ds-color-success-background-default: #0d1b0d;
552
+ --ds-color-success-background-tinted: #112411;
553
+ --ds-color-success-surface-default: #152d15;
554
+ --ds-color-success-surface-tinted: #183418;
555
+ --ds-color-success-surface-hover: #1c3c1c;
556
+ --ds-color-success-surface-active: #244c24;
557
+ --ds-color-success-border-subtle: #2b5a2b;
558
+ --ds-color-success-border-default: #528f52;
559
+ --ds-color-success-border-strong: #89b289;
560
+ --ds-color-success-text-subtle: #89b289;
561
+ --ds-color-success-text-default: #e6efe6;
562
562
  --ds-color-success-base-default: #138d24;
563
563
  --ds-color-success-base-hover: #3ca14b;
564
564
  --ds-color-success-base-active: #66b571;
565
565
  --ds-color-success-base-contrast-subtle: #010501;
566
566
  --ds-color-success-base-contrast-default: #000000;
567
- --ds-color-danger-background-default: #3a0808;
568
- --ds-color-danger-background-tinted: #4a0a0a;
569
- --ds-color-danger-surface-default: #5a0d0d;
570
- --ds-color-danger-surface-tinted: #6b0f0f;
571
- --ds-color-danger-surface-hover: #781111;
572
- --ds-color-danger-surface-active: #871313;
573
- --ds-color-danger-border-subtle: #a11717;
574
- --ds-color-danger-border-default: #cf5252;
575
- --ds-color-danger-border-strong: #df8b8b;
576
- --ds-color-danger-text-subtle: #df8b8b;
577
- --ds-color-danger-text-default: #f6dfdf;
567
+ --ds-color-danger-background-default: #2a100e;
568
+ --ds-color-danger-background-tinted: #371512;
569
+ --ds-color-danger-surface-default: #451b17;
570
+ --ds-color-danger-surface-tinted: #4f1f1b;
571
+ --ds-color-danger-surface-hover: #5c241f;
572
+ --ds-color-danger-surface-active: #722d27;
573
+ --ds-color-danger-border-subtle: #88352e;
574
+ --ds-color-danger-border-default: #bc6b64;
575
+ --ds-color-danger-border-strong: #d19a96;
576
+ --ds-color-danger-text-subtle: #d19a96;
577
+ --ds-color-danger-text-default: #f5eae9;
578
578
  --ds-color-danger-base-default: #d76e6e;
579
579
  --ds-color-danger-base-hover: #df8b8b;
580
580
  --ds-color-danger-base-active: #e7a8a8;
581
581
  --ds-color-danger-base-contrast-subtle: #271414;
582
582
  --ds-color-danger-base-contrast-default: #000000;
583
- --ds-color-info-background-default: #031d31;
584
- --ds-color-info-background-tinted: #03253f;
585
- --ds-color-info-surface-default: #042e4e;
586
- --ds-color-info-surface-tinted: #05375d;
587
- --ds-color-info-surface-hover: #053d68;
588
- --ds-color-info-surface-active: #064676;
589
- --ds-color-info-border-subtle: #07538d;
590
- --ds-color-info-border-default: #2480c7;
591
- --ds-color-info-border-strong: #69a8d8;
592
- --ds-color-info-text-subtle: #69a8d8;
593
- --ds-color-info-text-default: #d6e7f4;
583
+ --ds-color-info-background-default: #0d1925;
584
+ --ds-color-info-background-tinted: #112130;
585
+ --ds-color-info-surface-default: #15293d;
586
+ --ds-color-info-surface-tinted: #182f46;
587
+ --ds-color-info-surface-hover: #1c3751;
588
+ --ds-color-info-surface-active: #234566;
589
+ --ds-color-info-border-subtle: #2a537a;
590
+ --ds-color-info-border-default: #5585b4;
591
+ --ds-color-info-border-strong: #8aabcb;
592
+ --ds-color-info-text-subtle: #8aabcb;
593
+ --ds-color-info-text-default: #e6edf4;
594
594
  --ds-color-info-base-default: #2d85c9;
595
595
  --ds-color-info-base-hover: #519ad2;
596
596
  --ds-color-info-base-active: #77b0dc;
597
597
  --ds-color-info-base-contrast-subtle: #050e15;
598
598
  --ds-color-info-base-contrast-default: #000000;
599
- --ds-color-warning-background-default: #251904;
600
- --ds-color-warning-background-tinted: #312006;
601
- --ds-color-warning-surface-default: #3c2807;
602
- --ds-color-warning-surface-tinted: #483008;
603
- --ds-color-warning-surface-hover: #513609;
604
- --ds-color-warning-surface-active: #5d3d0b;
605
- --ds-color-warning-border-subtle: #6f490d;
606
- --ds-color-warning-border-default: #a97013;
607
- --ds-color-warning-border-strong: #dd9219;
608
- --ds-color-warning-text-subtle: #dd9219;
609
- --ds-color-warning-text-default: #f9e2bc;
599
+ --ds-color-warning-background-default: #1e160d;
600
+ --ds-color-warning-background-tinted: #281e11;
601
+ --ds-color-warning-surface-default: #322616;
602
+ --ds-color-warning-surface-tinted: #3a2b19;
603
+ --ds-color-warning-surface-hover: #43321d;
604
+ --ds-color-warning-surface-active: #543f24;
605
+ --ds-color-warning-border-subtle: #654b2b;
606
+ --ds-color-warning-border-default: #a37a46;
607
+ --ds-color-warning-border-strong: #d39e5b;
608
+ --ds-color-warning-text-subtle: #d39e5b;
609
+ --ds-color-warning-text-default: #f7ebdb;
610
610
  --ds-color-warning-base-default: #60400b;
611
611
  --ds-color-warning-base-hover: #7a510e;
612
612
  --ds-color-warning-base-active: #946211;
613
613
  --ds-color-warning-base-contrast-subtle: #e6e2d9;
614
614
  --ds-color-warning-base-contrast-default: #ffffff;
615
- --ds-color-focus-inner: #1b1b1b;
616
- --ds-color-focus-outer: #e5e5e5;
615
+ --ds-color-focus-inner: #181818;
616
+ --ds-color-focus-outer: #ececec;
617
617
  --ds-link-color-visited: #b49acd;
618
618
 
619
619
  color-scheme: dark;
@@ -621,136 +621,136 @@
621
621
 
622
622
  @media (prefers-color-scheme: dark) {
623
623
  [data-color-scheme="auto"] {
624
- --ds-color-accent-background-default: #121e18;
625
- --ds-color-accent-background-tinted: #17271f;
626
- --ds-color-accent-surface-default: #1d3026;
627
- --ds-color-accent-surface-tinted: #22392d;
628
- --ds-color-accent-surface-hover: #274133;
629
- --ds-color-accent-surface-active: #2c4a3a;
630
- --ds-color-accent-border-subtle: #355846;
631
- --ds-color-accent-border-default: #50876b;
632
- --ds-color-accent-border-strong: #69b08c;
633
- --ds-color-accent-text-subtle: #69b08c;
634
- --ds-color-accent-text-default: #cfebdd;
624
+ --ds-color-accent-background-default: #121916;
625
+ --ds-color-accent-background-tinted: #18221c;
626
+ --ds-color-accent-surface-default: #1f2a24;
627
+ --ds-color-accent-surface-tinted: #233129;
628
+ --ds-color-accent-surface-hover: #293930;
629
+ --ds-color-accent-surface-active: #34473d;
630
+ --ds-color-accent-border-subtle: #3e5548;
631
+ --ds-color-accent-border-default: #648a75;
632
+ --ds-color-accent-border-strong: #81b398;
633
+ --ds-color-accent-text-subtle: #81b398;
634
+ --ds-color-accent-text-default: #e2efe8;
635
635
  --ds-color-accent-base-default: #284436;
636
636
  --ds-color-accent-base-hover: #345745;
637
637
  --ds-color-accent-base-active: #406c56;
638
638
  --ds-color-accent-base-contrast-subtle: #d4d9d7;
639
639
  --ds-color-accent-base-contrast-default: #ffffff;
640
- --ds-color-neutral-background-default: #1b1b1b;
641
- --ds-color-neutral-background-tinted: #232323;
642
- --ds-color-neutral-surface-default: #2c2c2c;
643
- --ds-color-neutral-surface-tinted: #353535;
644
- --ds-color-neutral-surface-hover: #3b3b3b;
645
- --ds-color-neutral-surface-active: #444444;
646
- --ds-color-neutral-border-subtle: #515151;
647
- --ds-color-neutral-border-default: #7c7c7c;
648
- --ds-color-neutral-border-strong: #a2a2a2;
649
- --ds-color-neutral-text-subtle: #a2a2a2;
650
- --ds-color-neutral-text-default: #e5e5e5;
640
+ --ds-color-neutral-background-default: #181818;
641
+ --ds-color-neutral-background-tinted: #1f1f1f;
642
+ --ds-color-neutral-surface-default: #282828;
643
+ --ds-color-neutral-surface-tinted: #2e2e2e;
644
+ --ds-color-neutral-surface-hover: #353535;
645
+ --ds-color-neutral-surface-active: #434343;
646
+ --ds-color-neutral-border-subtle: #505050;
647
+ --ds-color-neutral-border-default: #818181;
648
+ --ds-color-neutral-border-strong: #a8a8a8;
649
+ --ds-color-neutral-text-subtle: #a8a8a8;
650
+ --ds-color-neutral-text-default: #ececec;
651
651
  --ds-color-neutral-base-default: #ababab;
652
652
  --ds-color-neutral-base-hover: #969696;
653
653
  --ds-color-neutral-base-active: #818181;
654
654
  --ds-color-neutral-base-contrast-subtle: #1b1b1b;
655
655
  --ds-color-neutral-base-contrast-default: #000000;
656
- --ds-color-support1-background-default: #191b1e;
657
- --ds-color-support1-background-tinted: #202427;
658
- --ds-color-support1-surface-default: #282c30;
659
- --ds-color-support1-surface-tinted: #30353a;
660
- --ds-color-support1-surface-hover: #363c41;
661
- --ds-color-support1-surface-active: #3d454b;
662
- --ds-color-support1-border-subtle: #495259;
663
- --ds-color-support1-border-default: #707d89;
664
- --ds-color-support1-border-strong: #92a4b3;
665
- --ds-color-support1-text-subtle: #92a4b3;
666
- --ds-color-support1-text-default: #d9e6f2;
656
+ --ds-color-support1-background-default: #16181a;
657
+ --ds-color-support1-background-tinted: #1d2022;
658
+ --ds-color-support1-surface-default: #25282b;
659
+ --ds-color-support1-surface-tinted: #2b2e31;
660
+ --ds-color-support1-surface-hover: #323639;
661
+ --ds-color-support1-surface-active: #3f4448;
662
+ --ds-color-support1-border-subtle: #4b5156;
663
+ --ds-color-support1-border-default: #79838b;
664
+ --ds-color-support1-border-strong: #9daab4;
665
+ --ds-color-support1-text-subtle: #9daab4;
666
+ --ds-color-support1-text-default: #e6edf3;
667
667
  --ds-color-support1-base-default: #23282b;
668
668
  --ds-color-support1-base-hover: #343a3f;
669
669
  --ds-color-support1-base-active: #444c53;
670
670
  --ds-color-support1-base-contrast-subtle: #babbbc;
671
671
  --ds-color-support1-base-contrast-default: #ffffff;
672
- --ds-color-support2-background-default: #1e1b17;
673
- --ds-color-support2-background-tinted: #27231d;
674
- --ds-color-support2-surface-default: #302b24;
675
- --ds-color-support2-surface-tinted: #3a342c;
676
- --ds-color-support2-surface-hover: #413a31;
677
- --ds-color-support2-surface-active: #4a4338;
678
- --ds-color-support2-border-subtle: #595043;
679
- --ds-color-support2-border-default: #877a67;
680
- --ds-color-support2-border-strong: #b19f87;
681
- --ds-color-support2-text-subtle: #b19f87;
682
- --ds-color-support2-text-default: #f0e3d1;
672
+ --ds-color-support2-background-default: #191815;
673
+ --ds-color-support2-background-tinted: #221f1c;
674
+ --ds-color-support2-surface-default: #2a2723;
675
+ --ds-color-support2-surface-tinted: #312d28;
676
+ --ds-color-support2-surface-hover: #39352f;
677
+ --ds-color-support2-surface-active: #47423b;
678
+ --ds-color-support2-border-subtle: #554f47;
679
+ --ds-color-support2-border-default: #8a8072;
680
+ --ds-color-support2-border-strong: #b3a694;
681
+ --ds-color-support2-text-subtle: #b3a694;
682
+ --ds-color-support2-text-default: #f2ebe2;
683
683
  --ds-color-support2-base-default: #2c2721;
684
684
  --ds-color-support2-base-hover: #3e382f;
685
685
  --ds-color-support2-base-active: #534b3f;
686
686
  --ds-color-support2-base-contrast-subtle: #bcbbb9;
687
687
  --ds-color-support2-base-contrast-default: #ffffff;
688
- --ds-color-success-background-default: #012106;
689
- --ds-color-success-background-tinted: #022a08;
690
- --ds-color-success-surface-default: #023409;
691
- --ds-color-success-surface-tinted: #033e0b;
692
- --ds-color-success-surface-hover: #03460c;
693
- --ds-color-success-surface-active: #044f0e;
694
- --ds-color-success-border-subtle: #045f11;
695
- --ds-color-success-border-default: #178f28;
696
- --ds-color-success-border-strong: #62b36d;
697
- --ds-color-success-text-subtle: #62b36d;
698
- --ds-color-success-text-default: #d4ead7;
688
+ --ds-color-success-background-default: #0d1b0d;
689
+ --ds-color-success-background-tinted: #112411;
690
+ --ds-color-success-surface-default: #152d15;
691
+ --ds-color-success-surface-tinted: #183418;
692
+ --ds-color-success-surface-hover: #1c3c1c;
693
+ --ds-color-success-surface-active: #244c24;
694
+ --ds-color-success-border-subtle: #2b5a2b;
695
+ --ds-color-success-border-default: #528f52;
696
+ --ds-color-success-border-strong: #89b289;
697
+ --ds-color-success-text-subtle: #89b289;
698
+ --ds-color-success-text-default: #e6efe6;
699
699
  --ds-color-success-base-default: #138d24;
700
700
  --ds-color-success-base-hover: #3ca14b;
701
701
  --ds-color-success-base-active: #66b571;
702
702
  --ds-color-success-base-contrast-subtle: #010501;
703
703
  --ds-color-success-base-contrast-default: #000000;
704
- --ds-color-danger-background-default: #3a0808;
705
- --ds-color-danger-background-tinted: #4a0a0a;
706
- --ds-color-danger-surface-default: #5a0d0d;
707
- --ds-color-danger-surface-tinted: #6b0f0f;
708
- --ds-color-danger-surface-hover: #781111;
709
- --ds-color-danger-surface-active: #871313;
710
- --ds-color-danger-border-subtle: #a11717;
711
- --ds-color-danger-border-default: #cf5252;
712
- --ds-color-danger-border-strong: #df8b8b;
713
- --ds-color-danger-text-subtle: #df8b8b;
714
- --ds-color-danger-text-default: #f6dfdf;
704
+ --ds-color-danger-background-default: #2a100e;
705
+ --ds-color-danger-background-tinted: #371512;
706
+ --ds-color-danger-surface-default: #451b17;
707
+ --ds-color-danger-surface-tinted: #4f1f1b;
708
+ --ds-color-danger-surface-hover: #5c241f;
709
+ --ds-color-danger-surface-active: #722d27;
710
+ --ds-color-danger-border-subtle: #88352e;
711
+ --ds-color-danger-border-default: #bc6b64;
712
+ --ds-color-danger-border-strong: #d19a96;
713
+ --ds-color-danger-text-subtle: #d19a96;
714
+ --ds-color-danger-text-default: #f5eae9;
715
715
  --ds-color-danger-base-default: #d76e6e;
716
716
  --ds-color-danger-base-hover: #df8b8b;
717
717
  --ds-color-danger-base-active: #e7a8a8;
718
718
  --ds-color-danger-base-contrast-subtle: #271414;
719
719
  --ds-color-danger-base-contrast-default: #000000;
720
- --ds-color-info-background-default: #031d31;
721
- --ds-color-info-background-tinted: #03253f;
722
- --ds-color-info-surface-default: #042e4e;
723
- --ds-color-info-surface-tinted: #05375d;
724
- --ds-color-info-surface-hover: #053d68;
725
- --ds-color-info-surface-active: #064676;
726
- --ds-color-info-border-subtle: #07538d;
727
- --ds-color-info-border-default: #2480c7;
728
- --ds-color-info-border-strong: #69a8d8;
729
- --ds-color-info-text-subtle: #69a8d8;
730
- --ds-color-info-text-default: #d6e7f4;
720
+ --ds-color-info-background-default: #0d1925;
721
+ --ds-color-info-background-tinted: #112130;
722
+ --ds-color-info-surface-default: #15293d;
723
+ --ds-color-info-surface-tinted: #182f46;
724
+ --ds-color-info-surface-hover: #1c3751;
725
+ --ds-color-info-surface-active: #234566;
726
+ --ds-color-info-border-subtle: #2a537a;
727
+ --ds-color-info-border-default: #5585b4;
728
+ --ds-color-info-border-strong: #8aabcb;
729
+ --ds-color-info-text-subtle: #8aabcb;
730
+ --ds-color-info-text-default: #e6edf4;
731
731
  --ds-color-info-base-default: #2d85c9;
732
732
  --ds-color-info-base-hover: #519ad2;
733
733
  --ds-color-info-base-active: #77b0dc;
734
734
  --ds-color-info-base-contrast-subtle: #050e15;
735
735
  --ds-color-info-base-contrast-default: #000000;
736
- --ds-color-warning-background-default: #251904;
737
- --ds-color-warning-background-tinted: #312006;
738
- --ds-color-warning-surface-default: #3c2807;
739
- --ds-color-warning-surface-tinted: #483008;
740
- --ds-color-warning-surface-hover: #513609;
741
- --ds-color-warning-surface-active: #5d3d0b;
742
- --ds-color-warning-border-subtle: #6f490d;
743
- --ds-color-warning-border-default: #a97013;
744
- --ds-color-warning-border-strong: #dd9219;
745
- --ds-color-warning-text-subtle: #dd9219;
746
- --ds-color-warning-text-default: #f9e2bc;
736
+ --ds-color-warning-background-default: #1e160d;
737
+ --ds-color-warning-background-tinted: #281e11;
738
+ --ds-color-warning-surface-default: #322616;
739
+ --ds-color-warning-surface-tinted: #3a2b19;
740
+ --ds-color-warning-surface-hover: #43321d;
741
+ --ds-color-warning-surface-active: #543f24;
742
+ --ds-color-warning-border-subtle: #654b2b;
743
+ --ds-color-warning-border-default: #a37a46;
744
+ --ds-color-warning-border-strong: #d39e5b;
745
+ --ds-color-warning-text-subtle: #d39e5b;
746
+ --ds-color-warning-text-default: #f7ebdb;
747
747
  --ds-color-warning-base-default: #60400b;
748
748
  --ds-color-warning-base-hover: #7a510e;
749
749
  --ds-color-warning-base-active: #946211;
750
750
  --ds-color-warning-base-contrast-subtle: #e6e2d9;
751
751
  --ds-color-warning-base-contrast-default: #ffffff;
752
- --ds-color-focus-inner: #1b1b1b;
753
- --ds-color-focus-outer: #e5e5e5;
752
+ --ds-color-focus-inner: #181818;
753
+ --ds-color-focus-outer: #ececec;
754
754
  --ds-link-color-visited: #b49acd;
755
755
 
756
756
  color-scheme: dark;
@@ -913,7 +913,111 @@
913
913
  */
914
914
 
915
915
  @layer ds.theme.color {
916
- [data-color="support1"] {
916
+ [data-color="danger"], [data-color-scheme][data-color="danger"] {
917
+ --ds-color-background-default: var(--ds-color-danger-background-default);
918
+ --ds-color-background-tinted: var(--ds-color-danger-background-tinted);
919
+ --ds-color-surface-default: var(--ds-color-danger-surface-default);
920
+ --ds-color-surface-tinted: var(--ds-color-danger-surface-tinted);
921
+ --ds-color-surface-hover: var(--ds-color-danger-surface-hover);
922
+ --ds-color-surface-active: var(--ds-color-danger-surface-active);
923
+ --ds-color-border-subtle: var(--ds-color-danger-border-subtle);
924
+ --ds-color-border-default: var(--ds-color-danger-border-default);
925
+ --ds-color-border-strong: var(--ds-color-danger-border-strong);
926
+ --ds-color-text-subtle: var(--ds-color-danger-text-subtle);
927
+ --ds-color-text-default: var(--ds-color-danger-text-default);
928
+ --ds-color-base-default: var(--ds-color-danger-base-default);
929
+ --ds-color-base-hover: var(--ds-color-danger-base-hover);
930
+ --ds-color-base-active: var(--ds-color-danger-base-active);
931
+ --ds-color-base-contrast-subtle: var(--ds-color-danger-base-contrast-subtle);
932
+ --ds-color-base-contrast-default: var(--ds-color-danger-base-contrast-default);
933
+ }
934
+
935
+ }
936
+
937
+ /**
938
+ * These files are generated from design tokens defind using Token Studio
939
+ */
940
+
941
+ @layer ds.theme.color {
942
+ [data-color="info"], [data-color-scheme][data-color="info"] {
943
+ --ds-color-background-default: var(--ds-color-info-background-default);
944
+ --ds-color-background-tinted: var(--ds-color-info-background-tinted);
945
+ --ds-color-surface-default: var(--ds-color-info-surface-default);
946
+ --ds-color-surface-tinted: var(--ds-color-info-surface-tinted);
947
+ --ds-color-surface-hover: var(--ds-color-info-surface-hover);
948
+ --ds-color-surface-active: var(--ds-color-info-surface-active);
949
+ --ds-color-border-subtle: var(--ds-color-info-border-subtle);
950
+ --ds-color-border-default: var(--ds-color-info-border-default);
951
+ --ds-color-border-strong: var(--ds-color-info-border-strong);
952
+ --ds-color-text-subtle: var(--ds-color-info-text-subtle);
953
+ --ds-color-text-default: var(--ds-color-info-text-default);
954
+ --ds-color-base-default: var(--ds-color-info-base-default);
955
+ --ds-color-base-hover: var(--ds-color-info-base-hover);
956
+ --ds-color-base-active: var(--ds-color-info-base-active);
957
+ --ds-color-base-contrast-subtle: var(--ds-color-info-base-contrast-subtle);
958
+ --ds-color-base-contrast-default: var(--ds-color-info-base-contrast-default);
959
+ }
960
+
961
+ }
962
+
963
+ /**
964
+ * These files are generated from design tokens defind using Token Studio
965
+ */
966
+
967
+ @layer ds.theme.color {
968
+ :root, [data-color-scheme], :not([data-color]):where(.ds-breadcrumbs, .ds-button, .ds-field, .ds-input, .ds-link, .ds-pagination, .ds-suggestion, .ds-togglegroup), [data-color="neutral"], [data-color-scheme][data-color="neutral"] {
969
+ --ds-color-background-default: var(--ds-color-neutral-background-default);
970
+ --ds-color-background-tinted: var(--ds-color-neutral-background-tinted);
971
+ --ds-color-surface-default: var(--ds-color-neutral-surface-default);
972
+ --ds-color-surface-tinted: var(--ds-color-neutral-surface-tinted);
973
+ --ds-color-surface-hover: var(--ds-color-neutral-surface-hover);
974
+ --ds-color-surface-active: var(--ds-color-neutral-surface-active);
975
+ --ds-color-border-subtle: var(--ds-color-neutral-border-subtle);
976
+ --ds-color-border-default: var(--ds-color-neutral-border-default);
977
+ --ds-color-border-strong: var(--ds-color-neutral-border-strong);
978
+ --ds-color-text-subtle: var(--ds-color-neutral-text-subtle);
979
+ --ds-color-text-default: var(--ds-color-neutral-text-default);
980
+ --ds-color-base-default: var(--ds-color-neutral-base-default);
981
+ --ds-color-base-hover: var(--ds-color-neutral-base-hover);
982
+ --ds-color-base-active: var(--ds-color-neutral-base-active);
983
+ --ds-color-base-contrast-subtle: var(--ds-color-neutral-base-contrast-subtle);
984
+ --ds-color-base-contrast-default: var(--ds-color-neutral-base-contrast-default);
985
+ }
986
+
987
+ }
988
+
989
+ /**
990
+ * These files are generated from design tokens defind using Token Studio
991
+ */
992
+
993
+ @layer ds.theme.color {
994
+ [data-color="success"], [data-color-scheme][data-color="success"] {
995
+ --ds-color-background-default: var(--ds-color-success-background-default);
996
+ --ds-color-background-tinted: var(--ds-color-success-background-tinted);
997
+ --ds-color-surface-default: var(--ds-color-success-surface-default);
998
+ --ds-color-surface-tinted: var(--ds-color-success-surface-tinted);
999
+ --ds-color-surface-hover: var(--ds-color-success-surface-hover);
1000
+ --ds-color-surface-active: var(--ds-color-success-surface-active);
1001
+ --ds-color-border-subtle: var(--ds-color-success-border-subtle);
1002
+ --ds-color-border-default: var(--ds-color-success-border-default);
1003
+ --ds-color-border-strong: var(--ds-color-success-border-strong);
1004
+ --ds-color-text-subtle: var(--ds-color-success-text-subtle);
1005
+ --ds-color-text-default: var(--ds-color-success-text-default);
1006
+ --ds-color-base-default: var(--ds-color-success-base-default);
1007
+ --ds-color-base-hover: var(--ds-color-success-base-hover);
1008
+ --ds-color-base-active: var(--ds-color-success-base-active);
1009
+ --ds-color-base-contrast-subtle: var(--ds-color-success-base-contrast-subtle);
1010
+ --ds-color-base-contrast-default: var(--ds-color-success-base-contrast-default);
1011
+ }
1012
+
1013
+ }
1014
+
1015
+ /**
1016
+ * These files are generated from design tokens defind using Token Studio
1017
+ */
1018
+
1019
+ @layer ds.theme.color {
1020
+ [data-color="support1"], [data-color-scheme][data-color="support1"] {
917
1021
  --ds-color-background-default: var(--ds-color-support1-background-default);
918
1022
  --ds-color-background-tinted: var(--ds-color-support1-background-tinted);
919
1023
  --ds-color-surface-default: var(--ds-color-support1-surface-default);
@@ -939,7 +1043,7 @@
939
1043
  */
940
1044
 
941
1045
  @layer ds.theme.color {
942
- [data-color="support2"] {
1046
+ [data-color="support2"], [data-color-scheme][data-color="support2"] {
943
1047
  --ds-color-background-default: var(--ds-color-support2-background-default);
944
1048
  --ds-color-background-tinted: var(--ds-color-support2-background-tinted);
945
1049
  --ds-color-surface-default: var(--ds-color-support2-surface-default);
@@ -960,90 +1064,28 @@
960
1064
 
961
1065
  }
962
1066
 
1067
+ /**
1068
+ * These files are generated from design tokens defind using Token Studio
1069
+ */
1070
+
963
1071
  @layer ds.theme.color {
964
- :root, [data-color-scheme], [data-color=neutral] {
965
- --ds-color-background-default: var(--ds-color-neutral-background-default);
966
- --ds-color-background-tinted: var(--ds-color-neutral-background-tinted);
967
- --ds-color-surface-tinted: var(--ds-color-neutral-surface-tinted);
968
- --ds-color-surface-hover: var(--ds-color-neutral-surface-hover);
969
- --ds-color-surface-active: var(--ds-color-neutral-surface-active);
970
- --ds-color-border-subtle: var(--ds-color-neutral-border-subtle);
971
- --ds-color-border-default: var(--ds-color-neutral-border-default);
972
- --ds-color-border-strong: var(--ds-color-neutral-border-strong);
973
- --ds-color-base-default: var(--ds-color-neutral-base-default);
974
- --ds-color-base-hover: var(--ds-color-neutral-base-hover);
975
- --ds-color-base-active: var(--ds-color-neutral-base-active);
976
- --ds-color-text-subtle: var(--ds-color-neutral-text-subtle);
977
- --ds-color-text-default: var(--ds-color-neutral-text-default);
978
- --ds-color-base-contrast-default: var(--ds-color-neutral-base-contrast-default);
979
- --ds-color-base-contrast-subtle: var(--ds-color-neutral-base-contrast-subtle);
980
- }
981
- [data-color=success] {
982
- --ds-color-background-default: var(--ds-color-success-background-default);
983
- --ds-color-background-tinted: var(--ds-color-success-background-tinted);
984
- --ds-color-surface-tinted: var(--ds-color-success-surface-tinted);
985
- --ds-color-surface-hover: var(--ds-color-success-surface-hover);
986
- --ds-color-surface-active: var(--ds-color-success-surface-active);
987
- --ds-color-border-subtle: var(--ds-color-success-border-subtle);
988
- --ds-color-border-default: var(--ds-color-success-border-default);
989
- --ds-color-border-strong: var(--ds-color-success-border-strong);
990
- --ds-color-base-default: var(--ds-color-success-base-default);
991
- --ds-color-base-hover: var(--ds-color-success-base-hover);
992
- --ds-color-base-active: var(--ds-color-success-base-active);
993
- --ds-color-text-subtle: var(--ds-color-success-text-subtle);
994
- --ds-color-text-default: var(--ds-color-success-text-default);
995
- --ds-color-base-contrast-default: var(--ds-color-success-base-contrast-default);
996
- --ds-color-base-contrast-subtle: var(--ds-color-success-base-contrast-subtle);
997
- }
998
- [data-color=warning] {
999
- --ds-color-background-default: var(--ds-color-warning-background-default);
1000
- --ds-color-background-tinted: var(--ds-color-warning-background-tinted);
1001
- --ds-color-surface-tinted: var(--ds-color-warning-surface-tinted);
1002
- --ds-color-surface-hover: var(--ds-color-warning-surface-hover);
1003
- --ds-color-surface-active: var(--ds-color-warning-surface-active);
1004
- --ds-color-border-subtle: var(--ds-color-warning-border-subtle);
1005
- --ds-color-border-default: var(--ds-color-warning-border-default);
1006
- --ds-color-border-strong: var(--ds-color-warning-border-strong);
1007
- --ds-color-base-default: var(--ds-color-warning-base-default);
1008
- --ds-color-base-hover: var(--ds-color-warning-base-hover);
1009
- --ds-color-base-active: var(--ds-color-warning-base-active);
1010
- --ds-color-text-subtle: var(--ds-color-warning-text-subtle);
1011
- --ds-color-text-default: var(--ds-color-warning-text-default);
1012
- --ds-color-base-contrast-default: var(--ds-color-warning-base-contrast-default);
1013
- --ds-color-base-contrast-subtle: var(--ds-color-warning-base-contrast-subtle);
1014
- }
1015
- [data-color=danger] {
1016
- --ds-color-background-default: var(--ds-color-danger-background-default);
1017
- --ds-color-background-tinted: var(--ds-color-danger-background-tinted);
1018
- --ds-color-surface-tinted: var(--ds-color-danger-surface-tinted);
1019
- --ds-color-surface-hover: var(--ds-color-danger-surface-hover);
1020
- --ds-color-surface-active: var(--ds-color-danger-surface-active);
1021
- --ds-color-border-subtle: var(--ds-color-danger-border-subtle);
1022
- --ds-color-border-default: var(--ds-color-danger-border-default);
1023
- --ds-color-border-strong: var(--ds-color-danger-border-strong);
1024
- --ds-color-base-default: var(--ds-color-danger-base-default);
1025
- --ds-color-base-hover: var(--ds-color-danger-base-hover);
1026
- --ds-color-base-active: var(--ds-color-danger-base-active);
1027
- --ds-color-text-subtle: var(--ds-color-danger-text-subtle);
1028
- --ds-color-text-default: var(--ds-color-danger-text-default);
1029
- --ds-color-base-contrast-default: var(--ds-color-danger-base-contrast-default);
1030
- --ds-color-base-contrast-subtle: var(--ds-color-danger-base-contrast-subtle);
1031
- }
1032
- [data-color=info] {
1033
- --ds-color-background-default: var(--ds-color-info-background-default);
1034
- --ds-color-background-tinted: var(--ds-color-info-background-tinted);
1035
- --ds-color-surface-tinted: var(--ds-color-info-surface-tinted);
1036
- --ds-color-surface-hover: var(--ds-color-info-surface-hover);
1037
- --ds-color-surface-active: var(--ds-color-info-surface-active);
1038
- --ds-color-border-subtle: var(--ds-color-info-border-subtle);
1039
- --ds-color-border-default: var(--ds-color-info-border-default);
1040
- --ds-color-border-strong: var(--ds-color-info-border-strong);
1041
- --ds-color-base-default: var(--ds-color-info-base-default);
1042
- --ds-color-base-hover: var(--ds-color-info-base-hover);
1043
- --ds-color-base-active: var(--ds-color-info-base-active);
1044
- --ds-color-text-subtle: var(--ds-color-info-text-subtle);
1045
- --ds-color-text-default: var(--ds-color-info-text-default);
1046
- --ds-color-base-contrast-default: var(--ds-color-info-base-contrast-default);
1047
- --ds-color-base-contrast-subtle: var(--ds-color-info-base-contrast-subtle);
1048
- }
1072
+ [data-color="warning"], [data-color-scheme][data-color="warning"] {
1073
+ --ds-color-background-default: var(--ds-color-warning-background-default);
1074
+ --ds-color-background-tinted: var(--ds-color-warning-background-tinted);
1075
+ --ds-color-surface-default: var(--ds-color-warning-surface-default);
1076
+ --ds-color-surface-tinted: var(--ds-color-warning-surface-tinted);
1077
+ --ds-color-surface-hover: var(--ds-color-warning-surface-hover);
1078
+ --ds-color-surface-active: var(--ds-color-warning-surface-active);
1079
+ --ds-color-border-subtle: var(--ds-color-warning-border-subtle);
1080
+ --ds-color-border-default: var(--ds-color-warning-border-default);
1081
+ --ds-color-border-strong: var(--ds-color-warning-border-strong);
1082
+ --ds-color-text-subtle: var(--ds-color-warning-text-subtle);
1083
+ --ds-color-text-default: var(--ds-color-warning-text-default);
1084
+ --ds-color-base-default: var(--ds-color-warning-base-default);
1085
+ --ds-color-base-hover: var(--ds-color-warning-base-hover);
1086
+ --ds-color-base-active: var(--ds-color-warning-base-active);
1087
+ --ds-color-base-contrast-subtle: var(--ds-color-warning-base-contrast-subtle);
1088
+ --ds-color-base-contrast-default: var(--ds-color-warning-base-contrast-default);
1089
+ }
1090
+
1049
1091
  }
package/package.json CHANGED
@@ -6,7 +6,7 @@
6
6
  "directory": "@udir-design/theme"
7
7
  },
8
8
  "license": "MIT",
9
- "version": "1.0.0-alpha.1",
9
+ "version": "1.0.0-beta.0",
10
10
  "type": "module",
11
11
  "exports": {
12
12
  ".": {
@@ -18,10 +18,11 @@
18
18
  "./dist"
19
19
  ],
20
20
  "dependencies": {
21
- "@digdir/designsystemet-react": "1.0.0"
21
+ "@digdir/designsystemet-react": "1.0.3"
22
22
  },
23
23
  "devDependencies": {
24
24
  "rimraf": "^6.0.1",
25
+ "@internal/build-tools": "0.0.0",
25
26
  "@udir-design/tokens": "0.0.0"
26
27
  },
27
28
  "scripts": {