@udir-design/theme 1.0.0-alpha.1 → 1.0.0-beta.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 (3) hide show
  1. package/README.md +1 -1
  2. package/dist/udir.css +402 -407
  3. package/package.json +4 -3
package/README.md CHANGED
@@ -5,7 +5,7 @@ Dette biblioteket inneholder CSS-variabler for Utdanningsdirektoratets design to
5
5
  ## Installere biblioteket
6
6
 
7
7
  ```bash
8
- npm add @udir-design/theme@alpha
8
+ npm add @udir-design/theme@beta
9
9
  ```
10
10
 
11
11
  ## Ta i bruk
package/dist/udir.css CHANGED
@@ -1,10 +1,11 @@
1
1
  @charset "UTF-8";
2
2
 
3
- @layer ds.reset, ds.theme, ds.base, ds.utilities, ds.components;
3
+ @layer ds.theme, ds.base, ds.utilities, ds.components;
4
4
 
5
- /**
6
- * These files are generated from design tokens defind using Token Studio
7
- */
5
+ /*
6
+ build: v1.0.6
7
+ design-tokens: v1.0.6
8
+ */
8
9
 
9
10
  @layer ds.theme.color-scheme.light {
10
11
  :root, [data-color-scheme="light"] {
@@ -13,11 +14,11 @@
13
14
  --ds-color-accent-surface-default: #ffffff;
14
15
  --ds-color-accent-surface-tinted: #d6eee2;
15
16
  --ds-color-accent-surface-hover: #bbe3cf;
16
- --ds-color-accent-surface-active: #a0d8bb;
17
+ --ds-color-accent-surface-active: #9dd6b9;
17
18
  --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;
19
+ --ds-color-accent-border-default: #4e8368;
20
+ --ds-color-accent-border-strong: #3d6651;
21
+ --ds-color-accent-text-subtle: #3d6651;
21
22
  --ds-color-accent-text-default: #1c2f26;
22
23
  --ds-color-accent-base-default: #76c69d;
23
24
  --ds-color-accent-base-hover: #68ae8a;
@@ -29,11 +30,11 @@
29
30
  --ds-color-neutral-surface-default: #ffffff;
30
31
  --ds-color-neutral-surface-tinted: #e8e8e8;
31
32
  --ds-color-neutral-surface-hover: #dadada;
32
- --ds-color-neutral-surface-active: #cbcbcb;
33
+ --ds-color-neutral-surface-active: #cacaca;
33
34
  --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;
35
+ --ds-color-neutral-border-default: #797979;
36
+ --ds-color-neutral-border-strong: #5d5d5d;
37
+ --ds-color-neutral-text-subtle: #5d5d5d;
37
38
  --ds-color-neutral-text-default: #2b2b2b;
38
39
  --ds-color-neutral-base-default: #303030;
39
40
  --ds-color-neutral-base-hover: #424242;
@@ -45,11 +46,11 @@
45
46
  --ds-color-support1-surface-default: #ffffff;
46
47
  --ds-color-support1-surface-tinted: #dfeaf4;
47
48
  --ds-color-support1-surface-hover: #cadcec;
48
- --ds-color-support1-surface-active: #b8cee1;
49
+ --ds-color-support1-surface-active: #b7cddf;
49
50
  --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;
51
+ --ds-color-support1-border-default: #6d7a85;
52
+ --ds-color-support1-border-strong: #545f67;
53
+ --ds-color-support1-text-subtle: #545f67;
53
54
  --ds-color-support1-text-default: #272c30;
54
55
  --ds-color-support1-base-default: #bed5e8;
55
56
  --ds-color-support1-base-hover: #aabfd0;
@@ -61,11 +62,11 @@
61
62
  --ds-color-support2-surface-default: #ffffff;
62
63
  --ds-color-support2-surface-tinted: #f2e7d7;
63
64
  --ds-color-support2-surface-hover: #ead7be;
64
- --ds-color-support2-surface-active: #dfc8a9;
65
+ --ds-color-support2-surface-active: #ddc7a8;
65
66
  --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;
67
+ --ds-color-support2-border-default: #847764;
68
+ --ds-color-support2-border-strong: #665c4e;
69
+ --ds-color-support2-text-subtle: #665c4e;
69
70
  --ds-color-support2-text-default: #2f2b24;
70
71
  --ds-color-support2-base-default: #e5ceae;
71
72
  --ds-color-support2-base-hover: #cdb89c;
@@ -77,11 +78,11 @@
77
78
  --ds-color-success-surface-default: #ffffff;
78
79
  --ds-color-success-surface-tinted: #daeddd;
79
80
  --ds-color-success-surface-hover: #c3e2c7;
80
- --ds-color-success-surface-active: #abd6b1;
81
+ --ds-color-success-surface-active: #a8d5ae;
81
82
  --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;
83
+ --ds-color-success-border-default: #108c22;
84
+ --ds-color-success-border-strong: #056d13;
85
+ --ds-color-success-text-subtle: #056d13;
85
86
  --ds-color-success-text-default: #023409;
86
87
  --ds-color-success-base-default: #068718;
87
88
  --ds-color-success-base-hover: #057014;
@@ -93,11 +94,11 @@
93
94
  --ds-color-danger-surface-default: #ffffff;
94
95
  --ds-color-danger-surface-tinted: #f8e4e4;
95
96
  --ds-color-danger-surface-hover: #f3d2d2;
96
- --ds-color-danger-surface-active: #eec1c1;
97
+ --ds-color-danger-surface-active: #edbfbf;
97
98
  --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;
99
+ --ds-color-danger-border-default: #ce4d4d;
100
+ --ds-color-danger-border-strong: #b81a1a;
101
+ --ds-color-danger-text-subtle: #b81a1a;
101
102
  --ds-color-danger-text-default: #590d0d;
102
103
  --ds-color-danger-base-default: #C01B1B;
103
104
  --ds-color-danger-base-hover: #9b1616;
@@ -109,11 +110,11 @@
109
110
  --ds-color-info-surface-default: #ffffff;
110
111
  --ds-color-info-surface-tinted: #dcebf6;
111
112
  --ds-color-info-surface-hover: #c5ddf0;
112
- --ds-color-info-surface-active: #aed0ea;
113
+ --ds-color-info-surface-active: #abcfe9;
113
114
  --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;
115
+ --ds-color-info-border-default: #1f7dc5;
116
+ --ds-color-info-border-strong: #0860a3;
117
+ --ds-color-info-text-subtle: #0860a3;
117
118
  --ds-color-info-text-default: #042d4d;
118
119
  --ds-color-info-base-default: #0A71C0;
119
120
  --ds-color-info-base-hover: #085d9f;
@@ -125,11 +126,11 @@
125
126
  --ds-color-warning-surface-default: #ffffff;
126
127
  --ds-color-warning-surface-tinted: #fae6c6;
127
128
  --ds-color-warning-surface-hover: #f6d5a0;
128
- --ds-color-warning-surface-active: #f3c479;
129
+ --ds-color-warning-surface-active: #f2c275;
129
130
  --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;
131
+ --ds-color-warning-border-default: #a56d13;
132
+ --ds-color-warning-border-strong: #80540f;
133
+ --ds-color-warning-text-subtle: #80540f;
133
134
  --ds-color-warning-text-default: #3c2807;
134
135
  --ds-color-warning-base-default: #EA9B1B;
135
136
  --ds-color-warning-base-hover: #cd8818;
@@ -150,11 +151,11 @@
150
151
  --ds-color-accent-surface-default: #ffffff;
151
152
  --ds-color-accent-surface-tinted: #d6eee2;
152
153
  --ds-color-accent-surface-hover: #bbe3cf;
153
- --ds-color-accent-surface-active: #a0d8bb;
154
+ --ds-color-accent-surface-active: #9dd6b9;
154
155
  --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;
156
+ --ds-color-accent-border-default: #4e8368;
157
+ --ds-color-accent-border-strong: #3d6651;
158
+ --ds-color-accent-text-subtle: #3d6651;
158
159
  --ds-color-accent-text-default: #1c2f26;
159
160
  --ds-color-accent-base-default: #76c69d;
160
161
  --ds-color-accent-base-hover: #68ae8a;
@@ -166,11 +167,11 @@
166
167
  --ds-color-neutral-surface-default: #ffffff;
167
168
  --ds-color-neutral-surface-tinted: #e8e8e8;
168
169
  --ds-color-neutral-surface-hover: #dadada;
169
- --ds-color-neutral-surface-active: #cbcbcb;
170
+ --ds-color-neutral-surface-active: #cacaca;
170
171
  --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;
172
+ --ds-color-neutral-border-default: #797979;
173
+ --ds-color-neutral-border-strong: #5d5d5d;
174
+ --ds-color-neutral-text-subtle: #5d5d5d;
174
175
  --ds-color-neutral-text-default: #2b2b2b;
175
176
  --ds-color-neutral-base-default: #303030;
176
177
  --ds-color-neutral-base-hover: #424242;
@@ -182,11 +183,11 @@
182
183
  --ds-color-support1-surface-default: #ffffff;
183
184
  --ds-color-support1-surface-tinted: #dfeaf4;
184
185
  --ds-color-support1-surface-hover: #cadcec;
185
- --ds-color-support1-surface-active: #b8cee1;
186
+ --ds-color-support1-surface-active: #b7cddf;
186
187
  --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;
188
+ --ds-color-support1-border-default: #6d7a85;
189
+ --ds-color-support1-border-strong: #545f67;
190
+ --ds-color-support1-text-subtle: #545f67;
190
191
  --ds-color-support1-text-default: #272c30;
191
192
  --ds-color-support1-base-default: #bed5e8;
192
193
  --ds-color-support1-base-hover: #aabfd0;
@@ -198,11 +199,11 @@
198
199
  --ds-color-support2-surface-default: #ffffff;
199
200
  --ds-color-support2-surface-tinted: #f2e7d7;
200
201
  --ds-color-support2-surface-hover: #ead7be;
201
- --ds-color-support2-surface-active: #dfc8a9;
202
+ --ds-color-support2-surface-active: #ddc7a8;
202
203
  --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;
204
+ --ds-color-support2-border-default: #847764;
205
+ --ds-color-support2-border-strong: #665c4e;
206
+ --ds-color-support2-text-subtle: #665c4e;
206
207
  --ds-color-support2-text-default: #2f2b24;
207
208
  --ds-color-support2-base-default: #e5ceae;
208
209
  --ds-color-support2-base-hover: #cdb89c;
@@ -214,11 +215,11 @@
214
215
  --ds-color-success-surface-default: #ffffff;
215
216
  --ds-color-success-surface-tinted: #daeddd;
216
217
  --ds-color-success-surface-hover: #c3e2c7;
217
- --ds-color-success-surface-active: #abd6b1;
218
+ --ds-color-success-surface-active: #a8d5ae;
218
219
  --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;
220
+ --ds-color-success-border-default: #108c22;
221
+ --ds-color-success-border-strong: #056d13;
222
+ --ds-color-success-text-subtle: #056d13;
222
223
  --ds-color-success-text-default: #023409;
223
224
  --ds-color-success-base-default: #068718;
224
225
  --ds-color-success-base-hover: #057014;
@@ -230,11 +231,11 @@
230
231
  --ds-color-danger-surface-default: #ffffff;
231
232
  --ds-color-danger-surface-tinted: #f8e4e4;
232
233
  --ds-color-danger-surface-hover: #f3d2d2;
233
- --ds-color-danger-surface-active: #eec1c1;
234
+ --ds-color-danger-surface-active: #edbfbf;
234
235
  --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;
236
+ --ds-color-danger-border-default: #ce4d4d;
237
+ --ds-color-danger-border-strong: #b81a1a;
238
+ --ds-color-danger-text-subtle: #b81a1a;
238
239
  --ds-color-danger-text-default: #590d0d;
239
240
  --ds-color-danger-base-default: #C01B1B;
240
241
  --ds-color-danger-base-hover: #9b1616;
@@ -246,11 +247,11 @@
246
247
  --ds-color-info-surface-default: #ffffff;
247
248
  --ds-color-info-surface-tinted: #dcebf6;
248
249
  --ds-color-info-surface-hover: #c5ddf0;
249
- --ds-color-info-surface-active: #aed0ea;
250
+ --ds-color-info-surface-active: #abcfe9;
250
251
  --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;
252
+ --ds-color-info-border-default: #1f7dc5;
253
+ --ds-color-info-border-strong: #0860a3;
254
+ --ds-color-info-text-subtle: #0860a3;
254
255
  --ds-color-info-text-default: #042d4d;
255
256
  --ds-color-info-base-default: #0A71C0;
256
257
  --ds-color-info-base-hover: #085d9f;
@@ -262,11 +263,11 @@
262
263
  --ds-color-warning-surface-default: #ffffff;
263
264
  --ds-color-warning-surface-tinted: #fae6c6;
264
265
  --ds-color-warning-surface-hover: #f6d5a0;
265
- --ds-color-warning-surface-active: #f3c479;
266
+ --ds-color-warning-surface-active: #f2c275;
266
267
  --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;
268
+ --ds-color-warning-border-default: #a56d13;
269
+ --ds-color-warning-border-strong: #80540f;
270
+ --ds-color-warning-text-subtle: #80540f;
270
271
  --ds-color-warning-text-default: #3c2807;
271
272
  --ds-color-warning-base-default: #EA9B1B;
272
273
  --ds-color-warning-base-hover: #cd8818;
@@ -284,12 +285,30 @@
284
285
 
285
286
  }
286
287
 
287
- /**
288
- * These files are generated from design tokens defind using Token Studio
289
- */
290
-
291
288
  @layer ds.theme.typography.secondary {
292
289
  [data-typography="secondary"] {
290
+ --ds-line-height-sm: 1.3;
291
+ --ds-line-height-md: 1.5;
292
+ --ds-line-height-lg: 1.7;
293
+ --ds-font-size-1: 0.75rem;
294
+ --ds-font-size-2: 0.875rem;
295
+ --ds-font-size-3: 1rem;
296
+ --ds-font-size-4: 1.125rem;
297
+ --ds-font-size-5: 1.3125rem;
298
+ --ds-font-size-6: 1.5rem;
299
+ --ds-font-size-7: 1.875rem;
300
+ --ds-font-size-8: 2.25rem;
301
+ --ds-font-size-9: 3rem;
302
+ --ds-font-size-10: 3.75rem;
303
+ --ds-letter-spacing-1: -1%;
304
+ --ds-letter-spacing-2: -0.5%;
305
+ --ds-letter-spacing-3: -0.25%;
306
+ --ds-letter-spacing-4: -0.15%;
307
+ --ds-letter-spacing-5: 0%;
308
+ --ds-letter-spacing-6: 0.15%;
309
+ --ds-letter-spacing-7: 0.25%;
310
+ --ds-letter-spacing-8: 0.5%;
311
+ --ds-letter-spacing-9: 1.5%;
293
312
  --ds-font-family: Inter;
294
313
  --ds-font-weight-medium: 500;
295
314
  --ds-font-weight-semibold: 600;
@@ -382,34 +401,8 @@
382
401
  --ds-body-long-xs-line-height: 1.7;
383
402
  --ds-body-long-xs-font-size: 0.875rem;
384
403
  --ds-body-long-xs-letter-spacing: 0%;
385
- --ds-line-height-sm: 1.3;
386
- --ds-line-height-md: 1.5;
387
- --ds-line-height-lg: 1.7;
388
- --ds-font-size-1: 0.75rem;
389
- --ds-font-size-2: 0.875rem;
390
- --ds-font-size-3: 1rem;
391
- --ds-font-size-4: 1.125rem;
392
- --ds-font-size-5: 1.3125rem;
393
- --ds-font-size-6: 1.5rem;
394
- --ds-font-size-7: 1.875rem;
395
- --ds-font-size-8: 2.25rem;
396
- --ds-font-size-9: 3rem;
397
- --ds-font-size-10: 3.75rem;
398
- --ds-letter-spacing-1: -1%;
399
- --ds-letter-spacing-2: -0.5%;
400
- --ds-letter-spacing-3: -0.25%;
401
- --ds-letter-spacing-4: -0.15%;
402
- --ds-letter-spacing-5: 0%;
403
- --ds-letter-spacing-6: 0.15%;
404
- --ds-letter-spacing-7: 0.25%;
405
- --ds-letter-spacing-8: 0.5%;
406
- --ds-letter-spacing-9: 1.5%;
407
404
  }
408
405
  }
409
- /**
410
- * These files are generated from design tokens defind using Token Studio
411
- */
412
-
413
406
  @layer ds.theme.semantic {
414
407
  :root {
415
408
  --ds-size-base: 18;
@@ -422,7 +415,6 @@
422
415
  --ds-border-radius-xl: min(var(--ds-border-radius-base)*3,var(--ds-border-radius-scale)*4);
423
416
  --ds-border-radius-default: var(--ds-border-radius-base);
424
417
  --ds-border-radius-full: 624.9375rem;
425
- --ds-opacity-disabled: 30%;
426
418
  --ds-border-width-default: 1px;
427
419
  --ds-border-width-focus: 3px;
428
420
  --ds-shadow-xs: 0 0 1px 0 rgba(0,0,0,0.16), 0 1px 2px 0 rgba(0,0,0,0.12);
@@ -430,6 +422,7 @@
430
422
  --ds-shadow-md: 0 0 1px 0 rgba(0,0,0,0.14), 0 2px 4px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.12);
431
423
  --ds-shadow-lg: 0 0 1px 0 rgba(0,0,0,0.13), 0 3px 5px 0 rgba(0,0,0,0.13), 0 6px 12px 0 rgba(0,0,0,0.14);
432
424
  --ds-shadow-xl: 0 0 1px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.16), 0 12px 24px 0 rgba(0,0,0,0.16);
425
+ --ds-opacity-disabled: 30%;
433
426
 
434
427
  --ds-size-0: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *0);
435
428
  --ds-size-1: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *1);
@@ -478,142 +471,138 @@
478
471
 
479
472
  }
480
473
 
481
- /**
482
- * These files are generated from design tokens defind using Token Studio
483
- */
484
-
485
474
  @layer ds.theme.color-scheme.dark {
486
475
  [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;
476
+ --ds-color-accent-background-default: #121916;
477
+ --ds-color-accent-background-tinted: #18221c;
478
+ --ds-color-accent-surface-default: #1f2a24;
479
+ --ds-color-accent-surface-tinted: #233129;
480
+ --ds-color-accent-surface-hover: #293930;
481
+ --ds-color-accent-surface-active: #34473d;
482
+ --ds-color-accent-border-subtle: #3e5548;
483
+ --ds-color-accent-border-default: #648a75;
484
+ --ds-color-accent-border-strong: #81b398;
485
+ --ds-color-accent-text-subtle: #81b398;
486
+ --ds-color-accent-text-default: #e2efe8;
498
487
  --ds-color-accent-base-default: #284436;
499
488
  --ds-color-accent-base-hover: #345745;
500
489
  --ds-color-accent-base-active: #406c56;
501
490
  --ds-color-accent-base-contrast-subtle: #d4d9d7;
502
491
  --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;
492
+ --ds-color-neutral-background-default: #181818;
493
+ --ds-color-neutral-background-tinted: #1f1f1f;
494
+ --ds-color-neutral-surface-default: #282828;
495
+ --ds-color-neutral-surface-tinted: #2e2e2e;
496
+ --ds-color-neutral-surface-hover: #353535;
497
+ --ds-color-neutral-surface-active: #434343;
498
+ --ds-color-neutral-border-subtle: #505050;
499
+ --ds-color-neutral-border-default: #818181;
500
+ --ds-color-neutral-border-strong: #a8a8a8;
501
+ --ds-color-neutral-text-subtle: #a8a8a8;
502
+ --ds-color-neutral-text-default: #ececec;
514
503
  --ds-color-neutral-base-default: #ababab;
515
504
  --ds-color-neutral-base-hover: #969696;
516
505
  --ds-color-neutral-base-active: #818181;
517
506
  --ds-color-neutral-base-contrast-subtle: #1b1b1b;
518
507
  --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;
508
+ --ds-color-support1-background-default: #16181a;
509
+ --ds-color-support1-background-tinted: #1d2022;
510
+ --ds-color-support1-surface-default: #25282b;
511
+ --ds-color-support1-surface-tinted: #2b2e31;
512
+ --ds-color-support1-surface-hover: #323639;
513
+ --ds-color-support1-surface-active: #3f4448;
514
+ --ds-color-support1-border-subtle: #4b5156;
515
+ --ds-color-support1-border-default: #79838b;
516
+ --ds-color-support1-border-strong: #9daab4;
517
+ --ds-color-support1-text-subtle: #9daab4;
518
+ --ds-color-support1-text-default: #e6edf3;
530
519
  --ds-color-support1-base-default: #23282b;
531
520
  --ds-color-support1-base-hover: #343a3f;
532
521
  --ds-color-support1-base-active: #444c53;
533
522
  --ds-color-support1-base-contrast-subtle: #babbbc;
534
523
  --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;
524
+ --ds-color-support2-background-default: #191815;
525
+ --ds-color-support2-background-tinted: #221f1c;
526
+ --ds-color-support2-surface-default: #2a2723;
527
+ --ds-color-support2-surface-tinted: #312d28;
528
+ --ds-color-support2-surface-hover: #39352f;
529
+ --ds-color-support2-surface-active: #47423b;
530
+ --ds-color-support2-border-subtle: #554f47;
531
+ --ds-color-support2-border-default: #8a8072;
532
+ --ds-color-support2-border-strong: #b3a694;
533
+ --ds-color-support2-text-subtle: #b3a694;
534
+ --ds-color-support2-text-default: #f2ebe2;
546
535
  --ds-color-support2-base-default: #2c2721;
547
536
  --ds-color-support2-base-hover: #3e382f;
548
537
  --ds-color-support2-base-active: #534b3f;
549
538
  --ds-color-support2-base-contrast-subtle: #bcbbb9;
550
539
  --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;
540
+ --ds-color-success-background-default: #0d1b0d;
541
+ --ds-color-success-background-tinted: #112411;
542
+ --ds-color-success-surface-default: #152d15;
543
+ --ds-color-success-surface-tinted: #183418;
544
+ --ds-color-success-surface-hover: #1c3c1c;
545
+ --ds-color-success-surface-active: #244c24;
546
+ --ds-color-success-border-subtle: #2b5a2b;
547
+ --ds-color-success-border-default: #528f52;
548
+ --ds-color-success-border-strong: #89b289;
549
+ --ds-color-success-text-subtle: #89b289;
550
+ --ds-color-success-text-default: #e6efe6;
562
551
  --ds-color-success-base-default: #138d24;
563
552
  --ds-color-success-base-hover: #3ca14b;
564
553
  --ds-color-success-base-active: #66b571;
565
554
  --ds-color-success-base-contrast-subtle: #010501;
566
555
  --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;
556
+ --ds-color-danger-background-default: #2a100e;
557
+ --ds-color-danger-background-tinted: #371512;
558
+ --ds-color-danger-surface-default: #451b17;
559
+ --ds-color-danger-surface-tinted: #4f1f1b;
560
+ --ds-color-danger-surface-hover: #5c241f;
561
+ --ds-color-danger-surface-active: #722d27;
562
+ --ds-color-danger-border-subtle: #88352e;
563
+ --ds-color-danger-border-default: #bc6b64;
564
+ --ds-color-danger-border-strong: #d19a96;
565
+ --ds-color-danger-text-subtle: #d19a96;
566
+ --ds-color-danger-text-default: #f5eae9;
578
567
  --ds-color-danger-base-default: #d76e6e;
579
568
  --ds-color-danger-base-hover: #df8b8b;
580
569
  --ds-color-danger-base-active: #e7a8a8;
581
570
  --ds-color-danger-base-contrast-subtle: #271414;
582
571
  --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;
572
+ --ds-color-info-background-default: #0d1925;
573
+ --ds-color-info-background-tinted: #112130;
574
+ --ds-color-info-surface-default: #15293d;
575
+ --ds-color-info-surface-tinted: #182f46;
576
+ --ds-color-info-surface-hover: #1c3751;
577
+ --ds-color-info-surface-active: #234566;
578
+ --ds-color-info-border-subtle: #2a537a;
579
+ --ds-color-info-border-default: #5585b4;
580
+ --ds-color-info-border-strong: #8aabcb;
581
+ --ds-color-info-text-subtle: #8aabcb;
582
+ --ds-color-info-text-default: #e6edf4;
594
583
  --ds-color-info-base-default: #2d85c9;
595
584
  --ds-color-info-base-hover: #519ad2;
596
585
  --ds-color-info-base-active: #77b0dc;
597
586
  --ds-color-info-base-contrast-subtle: #050e15;
598
587
  --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;
588
+ --ds-color-warning-background-default: #1e160d;
589
+ --ds-color-warning-background-tinted: #281e11;
590
+ --ds-color-warning-surface-default: #322616;
591
+ --ds-color-warning-surface-tinted: #3a2b19;
592
+ --ds-color-warning-surface-hover: #43321d;
593
+ --ds-color-warning-surface-active: #543f24;
594
+ --ds-color-warning-border-subtle: #654b2b;
595
+ --ds-color-warning-border-default: #a37a46;
596
+ --ds-color-warning-border-strong: #d39e5b;
597
+ --ds-color-warning-text-subtle: #d39e5b;
598
+ --ds-color-warning-text-default: #f7ebdb;
610
599
  --ds-color-warning-base-default: #60400b;
611
600
  --ds-color-warning-base-hover: #7a510e;
612
601
  --ds-color-warning-base-active: #946211;
613
602
  --ds-color-warning-base-contrast-subtle: #e6e2d9;
614
603
  --ds-color-warning-base-contrast-default: #ffffff;
615
- --ds-color-focus-inner: #1b1b1b;
616
- --ds-color-focus-outer: #e5e5e5;
604
+ --ds-color-focus-inner: #181818;
605
+ --ds-color-focus-outer: #ececec;
617
606
  --ds-link-color-visited: #b49acd;
618
607
 
619
608
  color-scheme: dark;
@@ -621,136 +610,136 @@
621
610
 
622
611
  @media (prefers-color-scheme: dark) {
623
612
  [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;
613
+ --ds-color-accent-background-default: #121916;
614
+ --ds-color-accent-background-tinted: #18221c;
615
+ --ds-color-accent-surface-default: #1f2a24;
616
+ --ds-color-accent-surface-tinted: #233129;
617
+ --ds-color-accent-surface-hover: #293930;
618
+ --ds-color-accent-surface-active: #34473d;
619
+ --ds-color-accent-border-subtle: #3e5548;
620
+ --ds-color-accent-border-default: #648a75;
621
+ --ds-color-accent-border-strong: #81b398;
622
+ --ds-color-accent-text-subtle: #81b398;
623
+ --ds-color-accent-text-default: #e2efe8;
635
624
  --ds-color-accent-base-default: #284436;
636
625
  --ds-color-accent-base-hover: #345745;
637
626
  --ds-color-accent-base-active: #406c56;
638
627
  --ds-color-accent-base-contrast-subtle: #d4d9d7;
639
628
  --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;
629
+ --ds-color-neutral-background-default: #181818;
630
+ --ds-color-neutral-background-tinted: #1f1f1f;
631
+ --ds-color-neutral-surface-default: #282828;
632
+ --ds-color-neutral-surface-tinted: #2e2e2e;
633
+ --ds-color-neutral-surface-hover: #353535;
634
+ --ds-color-neutral-surface-active: #434343;
635
+ --ds-color-neutral-border-subtle: #505050;
636
+ --ds-color-neutral-border-default: #818181;
637
+ --ds-color-neutral-border-strong: #a8a8a8;
638
+ --ds-color-neutral-text-subtle: #a8a8a8;
639
+ --ds-color-neutral-text-default: #ececec;
651
640
  --ds-color-neutral-base-default: #ababab;
652
641
  --ds-color-neutral-base-hover: #969696;
653
642
  --ds-color-neutral-base-active: #818181;
654
643
  --ds-color-neutral-base-contrast-subtle: #1b1b1b;
655
644
  --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;
645
+ --ds-color-support1-background-default: #16181a;
646
+ --ds-color-support1-background-tinted: #1d2022;
647
+ --ds-color-support1-surface-default: #25282b;
648
+ --ds-color-support1-surface-tinted: #2b2e31;
649
+ --ds-color-support1-surface-hover: #323639;
650
+ --ds-color-support1-surface-active: #3f4448;
651
+ --ds-color-support1-border-subtle: #4b5156;
652
+ --ds-color-support1-border-default: #79838b;
653
+ --ds-color-support1-border-strong: #9daab4;
654
+ --ds-color-support1-text-subtle: #9daab4;
655
+ --ds-color-support1-text-default: #e6edf3;
667
656
  --ds-color-support1-base-default: #23282b;
668
657
  --ds-color-support1-base-hover: #343a3f;
669
658
  --ds-color-support1-base-active: #444c53;
670
659
  --ds-color-support1-base-contrast-subtle: #babbbc;
671
660
  --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;
661
+ --ds-color-support2-background-default: #191815;
662
+ --ds-color-support2-background-tinted: #221f1c;
663
+ --ds-color-support2-surface-default: #2a2723;
664
+ --ds-color-support2-surface-tinted: #312d28;
665
+ --ds-color-support2-surface-hover: #39352f;
666
+ --ds-color-support2-surface-active: #47423b;
667
+ --ds-color-support2-border-subtle: #554f47;
668
+ --ds-color-support2-border-default: #8a8072;
669
+ --ds-color-support2-border-strong: #b3a694;
670
+ --ds-color-support2-text-subtle: #b3a694;
671
+ --ds-color-support2-text-default: #f2ebe2;
683
672
  --ds-color-support2-base-default: #2c2721;
684
673
  --ds-color-support2-base-hover: #3e382f;
685
674
  --ds-color-support2-base-active: #534b3f;
686
675
  --ds-color-support2-base-contrast-subtle: #bcbbb9;
687
676
  --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;
677
+ --ds-color-success-background-default: #0d1b0d;
678
+ --ds-color-success-background-tinted: #112411;
679
+ --ds-color-success-surface-default: #152d15;
680
+ --ds-color-success-surface-tinted: #183418;
681
+ --ds-color-success-surface-hover: #1c3c1c;
682
+ --ds-color-success-surface-active: #244c24;
683
+ --ds-color-success-border-subtle: #2b5a2b;
684
+ --ds-color-success-border-default: #528f52;
685
+ --ds-color-success-border-strong: #89b289;
686
+ --ds-color-success-text-subtle: #89b289;
687
+ --ds-color-success-text-default: #e6efe6;
699
688
  --ds-color-success-base-default: #138d24;
700
689
  --ds-color-success-base-hover: #3ca14b;
701
690
  --ds-color-success-base-active: #66b571;
702
691
  --ds-color-success-base-contrast-subtle: #010501;
703
692
  --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;
693
+ --ds-color-danger-background-default: #2a100e;
694
+ --ds-color-danger-background-tinted: #371512;
695
+ --ds-color-danger-surface-default: #451b17;
696
+ --ds-color-danger-surface-tinted: #4f1f1b;
697
+ --ds-color-danger-surface-hover: #5c241f;
698
+ --ds-color-danger-surface-active: #722d27;
699
+ --ds-color-danger-border-subtle: #88352e;
700
+ --ds-color-danger-border-default: #bc6b64;
701
+ --ds-color-danger-border-strong: #d19a96;
702
+ --ds-color-danger-text-subtle: #d19a96;
703
+ --ds-color-danger-text-default: #f5eae9;
715
704
  --ds-color-danger-base-default: #d76e6e;
716
705
  --ds-color-danger-base-hover: #df8b8b;
717
706
  --ds-color-danger-base-active: #e7a8a8;
718
707
  --ds-color-danger-base-contrast-subtle: #271414;
719
708
  --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;
709
+ --ds-color-info-background-default: #0d1925;
710
+ --ds-color-info-background-tinted: #112130;
711
+ --ds-color-info-surface-default: #15293d;
712
+ --ds-color-info-surface-tinted: #182f46;
713
+ --ds-color-info-surface-hover: #1c3751;
714
+ --ds-color-info-surface-active: #234566;
715
+ --ds-color-info-border-subtle: #2a537a;
716
+ --ds-color-info-border-default: #5585b4;
717
+ --ds-color-info-border-strong: #8aabcb;
718
+ --ds-color-info-text-subtle: #8aabcb;
719
+ --ds-color-info-text-default: #e6edf4;
731
720
  --ds-color-info-base-default: #2d85c9;
732
721
  --ds-color-info-base-hover: #519ad2;
733
722
  --ds-color-info-base-active: #77b0dc;
734
723
  --ds-color-info-base-contrast-subtle: #050e15;
735
724
  --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;
725
+ --ds-color-warning-background-default: #1e160d;
726
+ --ds-color-warning-background-tinted: #281e11;
727
+ --ds-color-warning-surface-default: #322616;
728
+ --ds-color-warning-surface-tinted: #3a2b19;
729
+ --ds-color-warning-surface-hover: #43321d;
730
+ --ds-color-warning-surface-active: #543f24;
731
+ --ds-color-warning-border-subtle: #654b2b;
732
+ --ds-color-warning-border-default: #a37a46;
733
+ --ds-color-warning-border-strong: #d39e5b;
734
+ --ds-color-warning-text-subtle: #d39e5b;
735
+ --ds-color-warning-text-default: #f7ebdb;
747
736
  --ds-color-warning-base-default: #60400b;
748
737
  --ds-color-warning-base-hover: #7a510e;
749
738
  --ds-color-warning-base-active: #946211;
750
739
  --ds-color-warning-base-contrast-subtle: #e6e2d9;
751
740
  --ds-color-warning-base-contrast-default: #ffffff;
752
- --ds-color-focus-inner: #1b1b1b;
753
- --ds-color-focus-outer: #e5e5e5;
741
+ --ds-color-focus-inner: #181818;
742
+ --ds-color-focus-outer: #ececec;
754
743
  --ds-link-color-visited: #b49acd;
755
744
 
756
745
  color-scheme: dark;
@@ -760,12 +749,30 @@
760
749
 
761
750
  }
762
751
 
763
- /**
764
- * These files are generated from design tokens defind using Token Studio
765
- */
766
-
767
752
  @layer ds.theme.typography.primary {
768
753
  :root, [data-typography="primary"] {
754
+ --ds-line-height-sm: 1.3;
755
+ --ds-line-height-md: 1.5;
756
+ --ds-line-height-lg: 1.7;
757
+ --ds-font-size-1: 0.75rem;
758
+ --ds-font-size-2: 0.875rem;
759
+ --ds-font-size-3: 1rem;
760
+ --ds-font-size-4: 1.125rem;
761
+ --ds-font-size-5: 1.3125rem;
762
+ --ds-font-size-6: 1.5rem;
763
+ --ds-font-size-7: 1.875rem;
764
+ --ds-font-size-8: 2.25rem;
765
+ --ds-font-size-9: 3rem;
766
+ --ds-font-size-10: 3.75rem;
767
+ --ds-letter-spacing-1: -1%;
768
+ --ds-letter-spacing-2: -0.5%;
769
+ --ds-letter-spacing-3: -0.25%;
770
+ --ds-letter-spacing-4: -0.15%;
771
+ --ds-letter-spacing-5: 0%;
772
+ --ds-letter-spacing-6: 0.15%;
773
+ --ds-letter-spacing-7: 0.25%;
774
+ --ds-letter-spacing-8: 0.5%;
775
+ --ds-letter-spacing-9: 1.5%;
769
776
  --ds-font-family: Inter;
770
777
  --ds-font-weight-medium: 500;
771
778
  --ds-font-weight-semibold: 600;
@@ -858,34 +865,8 @@
858
865
  --ds-body-long-xs-line-height: 1.7;
859
866
  --ds-body-long-xs-font-size: 0.875rem;
860
867
  --ds-body-long-xs-letter-spacing: 0%;
861
- --ds-line-height-sm: 1.3;
862
- --ds-line-height-md: 1.5;
863
- --ds-line-height-lg: 1.7;
864
- --ds-font-size-1: 0.75rem;
865
- --ds-font-size-2: 0.875rem;
866
- --ds-font-size-3: 1rem;
867
- --ds-font-size-4: 1.125rem;
868
- --ds-font-size-5: 1.3125rem;
869
- --ds-font-size-6: 1.5rem;
870
- --ds-font-size-7: 1.875rem;
871
- --ds-font-size-8: 2.25rem;
872
- --ds-font-size-9: 3rem;
873
- --ds-font-size-10: 3.75rem;
874
- --ds-letter-spacing-1: -1%;
875
- --ds-letter-spacing-2: -0.5%;
876
- --ds-letter-spacing-3: -0.25%;
877
- --ds-letter-spacing-4: -0.15%;
878
- --ds-letter-spacing-5: 0%;
879
- --ds-letter-spacing-6: 0.15%;
880
- --ds-letter-spacing-7: 0.25%;
881
- --ds-letter-spacing-8: 0.5%;
882
- --ds-letter-spacing-9: 1.5%;
883
868
  }
884
869
  }
885
- /**
886
- * These files are generated from design tokens defind using Token Studio
887
- */
888
-
889
870
  @layer ds.theme.color {
890
871
  [data-color="accent"] {
891
872
  --ds-color-background-default: var(--ds-color-accent-background-default);
@@ -908,12 +889,96 @@
908
889
 
909
890
  }
910
891
 
911
- /**
912
- * These files are generated from design tokens defind using Token Studio
913
- */
892
+ @layer ds.theme.color {
893
+ [data-color="danger"], [data-color-scheme][data-color="danger"] {
894
+ --ds-color-background-default: var(--ds-color-danger-background-default);
895
+ --ds-color-background-tinted: var(--ds-color-danger-background-tinted);
896
+ --ds-color-surface-default: var(--ds-color-danger-surface-default);
897
+ --ds-color-surface-tinted: var(--ds-color-danger-surface-tinted);
898
+ --ds-color-surface-hover: var(--ds-color-danger-surface-hover);
899
+ --ds-color-surface-active: var(--ds-color-danger-surface-active);
900
+ --ds-color-border-subtle: var(--ds-color-danger-border-subtle);
901
+ --ds-color-border-default: var(--ds-color-danger-border-default);
902
+ --ds-color-border-strong: var(--ds-color-danger-border-strong);
903
+ --ds-color-text-subtle: var(--ds-color-danger-text-subtle);
904
+ --ds-color-text-default: var(--ds-color-danger-text-default);
905
+ --ds-color-base-default: var(--ds-color-danger-base-default);
906
+ --ds-color-base-hover: var(--ds-color-danger-base-hover);
907
+ --ds-color-base-active: var(--ds-color-danger-base-active);
908
+ --ds-color-base-contrast-subtle: var(--ds-color-danger-base-contrast-subtle);
909
+ --ds-color-base-contrast-default: var(--ds-color-danger-base-contrast-default);
910
+ }
911
+
912
+ }
913
+
914
+ @layer ds.theme.color {
915
+ [data-color="info"], [data-color-scheme][data-color="info"] {
916
+ --ds-color-background-default: var(--ds-color-info-background-default);
917
+ --ds-color-background-tinted: var(--ds-color-info-background-tinted);
918
+ --ds-color-surface-default: var(--ds-color-info-surface-default);
919
+ --ds-color-surface-tinted: var(--ds-color-info-surface-tinted);
920
+ --ds-color-surface-hover: var(--ds-color-info-surface-hover);
921
+ --ds-color-surface-active: var(--ds-color-info-surface-active);
922
+ --ds-color-border-subtle: var(--ds-color-info-border-subtle);
923
+ --ds-color-border-default: var(--ds-color-info-border-default);
924
+ --ds-color-border-strong: var(--ds-color-info-border-strong);
925
+ --ds-color-text-subtle: var(--ds-color-info-text-subtle);
926
+ --ds-color-text-default: var(--ds-color-info-text-default);
927
+ --ds-color-base-default: var(--ds-color-info-base-default);
928
+ --ds-color-base-hover: var(--ds-color-info-base-hover);
929
+ --ds-color-base-active: var(--ds-color-info-base-active);
930
+ --ds-color-base-contrast-subtle: var(--ds-color-info-base-contrast-subtle);
931
+ --ds-color-base-contrast-default: var(--ds-color-info-base-contrast-default);
932
+ }
933
+
934
+ }
935
+
936
+ @layer ds.theme.color {
937
+ :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"] {
938
+ --ds-color-background-default: var(--ds-color-neutral-background-default);
939
+ --ds-color-background-tinted: var(--ds-color-neutral-background-tinted);
940
+ --ds-color-surface-default: var(--ds-color-neutral-surface-default);
941
+ --ds-color-surface-tinted: var(--ds-color-neutral-surface-tinted);
942
+ --ds-color-surface-hover: var(--ds-color-neutral-surface-hover);
943
+ --ds-color-surface-active: var(--ds-color-neutral-surface-active);
944
+ --ds-color-border-subtle: var(--ds-color-neutral-border-subtle);
945
+ --ds-color-border-default: var(--ds-color-neutral-border-default);
946
+ --ds-color-border-strong: var(--ds-color-neutral-border-strong);
947
+ --ds-color-text-subtle: var(--ds-color-neutral-text-subtle);
948
+ --ds-color-text-default: var(--ds-color-neutral-text-default);
949
+ --ds-color-base-default: var(--ds-color-neutral-base-default);
950
+ --ds-color-base-hover: var(--ds-color-neutral-base-hover);
951
+ --ds-color-base-active: var(--ds-color-neutral-base-active);
952
+ --ds-color-base-contrast-subtle: var(--ds-color-neutral-base-contrast-subtle);
953
+ --ds-color-base-contrast-default: var(--ds-color-neutral-base-contrast-default);
954
+ }
955
+
956
+ }
957
+
958
+ @layer ds.theme.color {
959
+ [data-color="success"], [data-color-scheme][data-color="success"] {
960
+ --ds-color-background-default: var(--ds-color-success-background-default);
961
+ --ds-color-background-tinted: var(--ds-color-success-background-tinted);
962
+ --ds-color-surface-default: var(--ds-color-success-surface-default);
963
+ --ds-color-surface-tinted: var(--ds-color-success-surface-tinted);
964
+ --ds-color-surface-hover: var(--ds-color-success-surface-hover);
965
+ --ds-color-surface-active: var(--ds-color-success-surface-active);
966
+ --ds-color-border-subtle: var(--ds-color-success-border-subtle);
967
+ --ds-color-border-default: var(--ds-color-success-border-default);
968
+ --ds-color-border-strong: var(--ds-color-success-border-strong);
969
+ --ds-color-text-subtle: var(--ds-color-success-text-subtle);
970
+ --ds-color-text-default: var(--ds-color-success-text-default);
971
+ --ds-color-base-default: var(--ds-color-success-base-default);
972
+ --ds-color-base-hover: var(--ds-color-success-base-hover);
973
+ --ds-color-base-active: var(--ds-color-success-base-active);
974
+ --ds-color-base-contrast-subtle: var(--ds-color-success-base-contrast-subtle);
975
+ --ds-color-base-contrast-default: var(--ds-color-success-base-contrast-default);
976
+ }
977
+
978
+ }
914
979
 
915
980
  @layer ds.theme.color {
916
- [data-color="support1"] {
981
+ [data-color="support1"], [data-color-scheme][data-color="support1"] {
917
982
  --ds-color-background-default: var(--ds-color-support1-background-default);
918
983
  --ds-color-background-tinted: var(--ds-color-support1-background-tinted);
919
984
  --ds-color-surface-default: var(--ds-color-support1-surface-default);
@@ -934,12 +999,8 @@
934
999
 
935
1000
  }
936
1001
 
937
- /**
938
- * These files are generated from design tokens defind using Token Studio
939
- */
940
-
941
1002
  @layer ds.theme.color {
942
- [data-color="support2"] {
1003
+ [data-color="support2"], [data-color-scheme][data-color="support2"] {
943
1004
  --ds-color-background-default: var(--ds-color-support2-background-default);
944
1005
  --ds-color-background-tinted: var(--ds-color-support2-background-tinted);
945
1006
  --ds-color-surface-default: var(--ds-color-support2-surface-default);
@@ -961,89 +1022,23 @@
961
1022
  }
962
1023
 
963
1024
  @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
- }
1025
+ [data-color="warning"], [data-color-scheme][data-color="warning"] {
1026
+ --ds-color-background-default: var(--ds-color-warning-background-default);
1027
+ --ds-color-background-tinted: var(--ds-color-warning-background-tinted);
1028
+ --ds-color-surface-default: var(--ds-color-warning-surface-default);
1029
+ --ds-color-surface-tinted: var(--ds-color-warning-surface-tinted);
1030
+ --ds-color-surface-hover: var(--ds-color-warning-surface-hover);
1031
+ --ds-color-surface-active: var(--ds-color-warning-surface-active);
1032
+ --ds-color-border-subtle: var(--ds-color-warning-border-subtle);
1033
+ --ds-color-border-default: var(--ds-color-warning-border-default);
1034
+ --ds-color-border-strong: var(--ds-color-warning-border-strong);
1035
+ --ds-color-text-subtle: var(--ds-color-warning-text-subtle);
1036
+ --ds-color-text-default: var(--ds-color-warning-text-default);
1037
+ --ds-color-base-default: var(--ds-color-warning-base-default);
1038
+ --ds-color-base-hover: var(--ds-color-warning-base-hover);
1039
+ --ds-color-base-active: var(--ds-color-warning-base-active);
1040
+ --ds-color-base-contrast-subtle: var(--ds-color-warning-base-contrast-subtle);
1041
+ --ds-color-base-contrast-default: var(--ds-color-warning-base-contrast-default);
1042
+ }
1043
+
1049
1044
  }
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.1",
10
10
  "type": "module",
11
11
  "exports": {
12
12
  ".": {
@@ -18,11 +18,12 @@
18
18
  "./dist"
19
19
  ],
20
20
  "dependencies": {
21
- "@digdir/designsystemet-react": "1.0.0"
21
+ "@digdir/designsystemet-react": "1.0.6"
22
22
  },
23
23
  "devDependencies": {
24
24
  "rimraf": "^6.0.1",
25
- "@udir-design/tokens": "0.0.0"
25
+ "@udir-design/tokens": "0.0.0",
26
+ "@internal/build-tools": "0.0.0"
26
27
  },
27
28
  "scripts": {
28
29
  "copy-css": "cp ../../design-tokens/dist/*.* ./dist/",