@udir-design/theme 1.0.0-beta.2 → 1.0.0-beta.20

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 (4) hide show
  1. package/dist/{udir.css → index.css} +392 -367
  2. package/dist/types.d.ts +18 -0
  3. package/package.json +10 -7
  4. package/dist/colors.d.ts +0 -9
package/dist/{udir.css → index.css} RENAMED
@@ -1,12 +1,94 @@
1
1
  @charset "UTF-8";
2
-
3
- @layer ds.theme, ds.base, ds.utilities, ds.components;
4
-
5
2
  /*
6
- build: v1.0.6
7
- design-tokens: v1.0.6
3
+ build: v1.9.0
4
+ design-tokens: v1.9.0
8
5
  */
9
6
 
7
+ @layer ds.theme.size-mode {
8
+ :root /* small */ {
9
+ --ds-size-mode-font-size--sm: 1;
10
+ }
11
+ }
12
+
13
+ @layer ds.theme.size-mode {
14
+ :root /* medium */ {
15
+ --ds-size-mode-font-size--md: 1.125;
16
+ }
17
+ }
18
+
19
+ @layer ds.theme.size-mode {
20
+ :root /* large */ {
21
+ --ds-size-mode-font-size--lg: 1.3125;
22
+ }
23
+ }
24
+
25
+ @layer ds.theme.size-mode {
26
+ :root, [data-size] {
27
+ --ds-size: var(--ds-size--md);
28
+ --ds-size--sm: var(--ds-size,);
29
+ --ds-size--md: var(--ds-size,);
30
+ --ds-size--lg: var(--ds-size,);
31
+ --ds-size-mode-font-size:
32
+ var(--ds-size--sm, var(--ds-size-mode-font-size--sm))
33
+ var(--ds-size--md, var(--ds-size-mode-font-size--md))
34
+ var(--ds-size--lg, var(--ds-size-mode-font-size--lg));
35
+ }
36
+
37
+ [data-size='sm'] { --ds-size: var(--ds-size--sm); }
38
+ [data-size='md'] { --ds-size: var(--ds-size--md); }
39
+ [data-size='lg'] { --ds-size: var(--ds-size--lg); }
40
+ }
41
+
42
+ @layer ds.theme.type-scale {
43
+ :root, [data-size] {
44
+ --_ds-font-size-factor: calc(var(--ds-size-mode-font-size) / (var(--ds-size-base) / 16));
45
+ --ds-font-size-1: calc(0.75rem * var(--_ds-font-size-factor));
46
+ --ds-font-size-2: calc(0.875rem * var(--_ds-font-size-factor));
47
+ --ds-font-size-3: calc(1rem * var(--_ds-font-size-factor));
48
+ --ds-font-size-4: calc(1.125rem * var(--_ds-font-size-factor));
49
+ --ds-font-size-5: calc(1.3125rem * var(--_ds-font-size-factor));
50
+ --ds-font-size-6: calc(1.5rem * var(--_ds-font-size-factor));
51
+ --ds-font-size-7: calc(1.875rem * var(--_ds-font-size-factor));
52
+ --ds-font-size-8: calc(2.25rem * var(--_ds-font-size-factor));
53
+ --ds-font-size-9: calc(3rem * var(--_ds-font-size-factor));
54
+ --ds-font-size-10: calc(3.75rem * var(--_ds-font-size-factor));
55
+ --ds-heading-2xl-font-size: var(--ds-font-size-10);
56
+ --ds-heading-xl-font-size: var(--ds-font-size-9);
57
+ --ds-heading-lg-font-size: var(--ds-font-size-8);
58
+ --ds-heading-md-font-size: var(--ds-font-size-7);
59
+ --ds-heading-sm-font-size: var(--ds-font-size-6);
60
+ --ds-heading-xs-font-size: var(--ds-font-size-5);
61
+ --ds-heading-2xs-font-size: var(--ds-font-size-4);
62
+ --ds-body-xl-font-size: var(--ds-font-size-6);
63
+ --ds-body-lg-font-size: var(--ds-font-size-5);
64
+ --ds-body-md-font-size: var(--ds-font-size-4);
65
+ --ds-body-sm-font-size: var(--ds-font-size-3);
66
+ --ds-body-xs-font-size: var(--ds-font-size-2);
67
+ --ds-body-short-xl-font-size: var(--ds-font-size-6);
68
+ --ds-body-short-lg-font-size: var(--ds-font-size-5);
69
+ --ds-body-short-md-font-size: var(--ds-font-size-4);
70
+ --ds-body-short-sm-font-size: var(--ds-font-size-3);
71
+ --ds-body-short-xs-font-size: var(--ds-font-size-2);
72
+ --ds-body-long-xl-font-size: var(--ds-font-size-6);
73
+ --ds-body-long-lg-font-size: var(--ds-font-size-5);
74
+ --ds-body-long-md-font-size: var(--ds-font-size-4);
75
+ --ds-body-long-sm-font-size: var(--ds-font-size-3);
76
+ --ds-body-long-xs-font-size: var(--ds-font-size-2);
77
+
78
+ @supports (width: round(down, .1em, 1px)) {
79
+ --ds-font-size-1: round(calc(0.75rem * var(--_ds-font-size-factor)), 1px);
80
+ --ds-font-size-2: round(calc(0.875rem * var(--_ds-font-size-factor)), 1px);
81
+ --ds-font-size-3: round(calc(1rem * var(--_ds-font-size-factor)), 1px);
82
+ --ds-font-size-4: round(calc(1.125rem * var(--_ds-font-size-factor)), 1px);
83
+ --ds-font-size-5: round(calc(1.3125rem * var(--_ds-font-size-factor)), 1px);
84
+ --ds-font-size-6: round(calc(1.5rem * var(--_ds-font-size-factor)), 1px);
85
+ --ds-font-size-7: round(calc(1.875rem * var(--_ds-font-size-factor)), 1px);
86
+ --ds-font-size-8: round(calc(2.25rem * var(--_ds-font-size-factor)), 1px);
87
+ --ds-font-size-9: round(calc(3rem * var(--_ds-font-size-factor)), 1px);
88
+ --ds-font-size-10: round(calc(3.75rem * var(--_ds-font-size-factor)), 1px);
89
+ }
90
+ }
91
+ }
10
92
  @layer ds.theme.color-scheme.light {
11
93
  :root, [data-color-scheme="light"] {
12
94
  --ds-color-accent-background-default: #ffffff;
@@ -73,54 +155,38 @@ design-tokens: v1.0.6
73
155
  --ds-color-support2-base-active: #b5a389;
74
156
  --ds-color-support2-base-contrast-subtle: #3e382f;
75
157
  --ds-color-support2-base-contrast-default: #000000;
76
- --ds-color-success-background-default: #ffffff;
77
- --ds-color-success-background-tinted: #ecf6ee;
78
- --ds-color-success-surface-default: #ffffff;
79
- --ds-color-success-surface-tinted: #daeddd;
80
- --ds-color-success-surface-hover: #c3e2c7;
81
- --ds-color-success-surface-active: #a8d5ae;
82
- --ds-color-success-border-subtle: #8fc997;
83
- --ds-color-success-border-default: #108c22;
84
- --ds-color-success-border-strong: #056d13;
85
- --ds-color-success-text-subtle: #056d13;
86
- --ds-color-success-text-default: #023409;
87
- --ds-color-success-base-default: #068718;
88
- --ds-color-success-base-hover: #057014;
89
- --ds-color-success-base-active: #045a10;
90
- --ds-color-success-base-contrast-subtle: #fafdfb;
91
- --ds-color-success-base-contrast-default: #ffffff;
92
- --ds-color-danger-background-default: #ffffff;
93
- --ds-color-danger-background-tinted: #fbf1f1;
94
- --ds-color-danger-surface-default: #ffffff;
95
- --ds-color-danger-surface-tinted: #f8e4e4;
96
- --ds-color-danger-surface-hover: #f3d2d2;
97
- --ds-color-danger-surface-active: #edbfbf;
98
- --ds-color-danger-border-subtle: #e8adad;
99
- --ds-color-danger-border-default: #ce4d4d;
100
- --ds-color-danger-border-strong: #b81a1a;
101
- --ds-color-danger-text-subtle: #b81a1a;
102
- --ds-color-danger-text-default: #590d0d;
103
- --ds-color-danger-base-default: #C01B1B;
104
- --ds-color-danger-base-hover: #9b1616;
105
- --ds-color-danger-base-active: #791111;
106
- --ds-color-danger-base-contrast-subtle: #f7e1e1;
107
- --ds-color-danger-base-contrast-default: #ffffff;
108
158
  --ds-color-info-background-default: #ffffff;
109
- --ds-color-info-background-tinted: #edf5fa;
159
+ --ds-color-info-background-tinted: #e9f5fe;
110
160
  --ds-color-info-surface-default: #ffffff;
111
- --ds-color-info-surface-tinted: #dcebf6;
112
- --ds-color-info-surface-hover: #c5ddf0;
113
- --ds-color-info-surface-active: #abcfe9;
114
- --ds-color-info-border-subtle: #94c1e3;
115
- --ds-color-info-border-default: #1f7dc5;
116
- --ds-color-info-border-strong: #0860a3;
117
- --ds-color-info-text-subtle: #0860a3;
118
- --ds-color-info-text-default: #042d4d;
119
- --ds-color-info-base-default: #0A71C0;
120
- --ds-color-info-base-hover: #085d9f;
121
- --ds-color-info-base-active: #074a7e;
122
- --ds-color-info-base-contrast-subtle: #eff6fb;
123
- --ds-color-info-base-contrast-default: #ffffff;
161
+ --ds-color-info-surface-tinted: #d4ecfe;
162
+ --ds-color-info-surface-hover: #b8dffd;
163
+ --ds-color-info-surface-active: #97d0fc;
164
+ --ds-color-info-border-subtle: #79c3fb;
165
+ --ds-color-info-border-default: #1a7dc8;
166
+ --ds-color-info-border-strong: #14619b;
167
+ --ds-color-info-text-subtle: #14619b;
168
+ --ds-color-info-text-default: #092d49;
169
+ --ds-color-info-base-default: #209bf9;
170
+ --ds-color-info-base-hover: #54b2fa;
171
+ --ds-color-info-base-active: #85c8fc;
172
+ --ds-color-info-base-contrast-subtle: #02090f;
173
+ --ds-color-info-base-contrast-default: #000000;
174
+ --ds-color-success-background-default: #ffffff;
175
+ --ds-color-success-background-tinted: #e4f9e7;
176
+ --ds-color-success-surface-default: #ffffff;
177
+ --ds-color-success-surface-tinted: #caf3cf;
178
+ --ds-color-success-surface-hover: #a5eaae;
179
+ --ds-color-success-surface-active: #78e086;
180
+ --ds-color-success-border-subtle: #4ad55d;
181
+ --ds-color-success-border-default: #178c27;
182
+ --ds-color-success-border-strong: #126c1e;
183
+ --ds-color-success-text-subtle: #126c1e;
184
+ --ds-color-success-text-default: #08330e;
185
+ --ds-color-success-base-default: #21CC39;
186
+ --ds-color-success-base-hover: #1db332;
187
+ --ds-color-success-base-active: #199b2b;
188
+ --ds-color-success-base-contrast-subtle: #06260b;
189
+ --ds-color-success-base-contrast-default: #000000;
124
190
  --ds-color-warning-background-default: #ffffff;
125
191
  --ds-color-warning-background-tinted: #fcf2e2;
126
192
  --ds-color-warning-surface-default: #ffffff;
@@ -137,6 +203,22 @@ design-tokens: v1.0.6
137
203
  --ds-color-warning-base-active: #b27614;
138
204
  --ds-color-warning-base-contrast-subtle: #271a04;
139
205
  --ds-color-warning-base-contrast-default: #000000;
206
+ --ds-color-danger-background-default: #ffffff;
207
+ --ds-color-danger-background-tinted: #fbf1f1;
208
+ --ds-color-danger-surface-default: #ffffff;
209
+ --ds-color-danger-surface-tinted: #f8e4e4;
210
+ --ds-color-danger-surface-hover: #f3d2d2;
211
+ --ds-color-danger-surface-active: #edbfbf;
212
+ --ds-color-danger-border-subtle: #e8adad;
213
+ --ds-color-danger-border-default: #ce4d4d;
214
+ --ds-color-danger-border-strong: #b81a1a;
215
+ --ds-color-danger-text-subtle: #b81a1a;
216
+ --ds-color-danger-text-default: #590d0d;
217
+ --ds-color-danger-base-default: #C01B1B;
218
+ --ds-color-danger-base-hover: #9b1616;
219
+ --ds-color-danger-base-active: #791111;
220
+ --ds-color-danger-base-contrast-subtle: #f7e1e1;
221
+ --ds-color-danger-base-contrast-default: #ffffff;
140
222
  --ds-color-focus-inner: #ffffff;
141
223
  --ds-color-focus-outer: #2b2b2b;
142
224
  --ds-link-color-visited: #663299;
@@ -210,54 +292,38 @@ design-tokens: v1.0.6
210
292
  --ds-color-support2-base-active: #b5a389;
211
293
  --ds-color-support2-base-contrast-subtle: #3e382f;
212
294
  --ds-color-support2-base-contrast-default: #000000;
213
- --ds-color-success-background-default: #ffffff;
214
- --ds-color-success-background-tinted: #ecf6ee;
215
- --ds-color-success-surface-default: #ffffff;
216
- --ds-color-success-surface-tinted: #daeddd;
217
- --ds-color-success-surface-hover: #c3e2c7;
218
- --ds-color-success-surface-active: #a8d5ae;
219
- --ds-color-success-border-subtle: #8fc997;
220
- --ds-color-success-border-default: #108c22;
221
- --ds-color-success-border-strong: #056d13;
222
- --ds-color-success-text-subtle: #056d13;
223
- --ds-color-success-text-default: #023409;
224
- --ds-color-success-base-default: #068718;
225
- --ds-color-success-base-hover: #057014;
226
- --ds-color-success-base-active: #045a10;
227
- --ds-color-success-base-contrast-subtle: #fafdfb;
228
- --ds-color-success-base-contrast-default: #ffffff;
229
- --ds-color-danger-background-default: #ffffff;
230
- --ds-color-danger-background-tinted: #fbf1f1;
231
- --ds-color-danger-surface-default: #ffffff;
232
- --ds-color-danger-surface-tinted: #f8e4e4;
233
- --ds-color-danger-surface-hover: #f3d2d2;
234
- --ds-color-danger-surface-active: #edbfbf;
235
- --ds-color-danger-border-subtle: #e8adad;
236
- --ds-color-danger-border-default: #ce4d4d;
237
- --ds-color-danger-border-strong: #b81a1a;
238
- --ds-color-danger-text-subtle: #b81a1a;
239
- --ds-color-danger-text-default: #590d0d;
240
- --ds-color-danger-base-default: #C01B1B;
241
- --ds-color-danger-base-hover: #9b1616;
242
- --ds-color-danger-base-active: #791111;
243
- --ds-color-danger-base-contrast-subtle: #f7e1e1;
244
- --ds-color-danger-base-contrast-default: #ffffff;
245
295
  --ds-color-info-background-default: #ffffff;
246
- --ds-color-info-background-tinted: #edf5fa;
296
+ --ds-color-info-background-tinted: #e9f5fe;
247
297
  --ds-color-info-surface-default: #ffffff;
248
- --ds-color-info-surface-tinted: #dcebf6;
249
- --ds-color-info-surface-hover: #c5ddf0;
250
- --ds-color-info-surface-active: #abcfe9;
251
- --ds-color-info-border-subtle: #94c1e3;
252
- --ds-color-info-border-default: #1f7dc5;
253
- --ds-color-info-border-strong: #0860a3;
254
- --ds-color-info-text-subtle: #0860a3;
255
- --ds-color-info-text-default: #042d4d;
256
- --ds-color-info-base-default: #0A71C0;
257
- --ds-color-info-base-hover: #085d9f;
258
- --ds-color-info-base-active: #074a7e;
259
- --ds-color-info-base-contrast-subtle: #eff6fb;
260
- --ds-color-info-base-contrast-default: #ffffff;
298
+ --ds-color-info-surface-tinted: #d4ecfe;
299
+ --ds-color-info-surface-hover: #b8dffd;
300
+ --ds-color-info-surface-active: #97d0fc;
301
+ --ds-color-info-border-subtle: #79c3fb;
302
+ --ds-color-info-border-default: #1a7dc8;
303
+ --ds-color-info-border-strong: #14619b;
304
+ --ds-color-info-text-subtle: #14619b;
305
+ --ds-color-info-text-default: #092d49;
306
+ --ds-color-info-base-default: #209bf9;
307
+ --ds-color-info-base-hover: #54b2fa;
308
+ --ds-color-info-base-active: #85c8fc;
309
+ --ds-color-info-base-contrast-subtle: #02090f;
310
+ --ds-color-info-base-contrast-default: #000000;
311
+ --ds-color-success-background-default: #ffffff;
312
+ --ds-color-success-background-tinted: #e4f9e7;
313
+ --ds-color-success-surface-default: #ffffff;
314
+ --ds-color-success-surface-tinted: #caf3cf;
315
+ --ds-color-success-surface-hover: #a5eaae;
316
+ --ds-color-success-surface-active: #78e086;
317
+ --ds-color-success-border-subtle: #4ad55d;
318
+ --ds-color-success-border-default: #178c27;
319
+ --ds-color-success-border-strong: #126c1e;
320
+ --ds-color-success-text-subtle: #126c1e;
321
+ --ds-color-success-text-default: #08330e;
322
+ --ds-color-success-base-default: #21CC39;
323
+ --ds-color-success-base-hover: #1db332;
324
+ --ds-color-success-base-active: #199b2b;
325
+ --ds-color-success-base-contrast-subtle: #06260b;
326
+ --ds-color-success-base-contrast-default: #000000;
261
327
  --ds-color-warning-background-default: #ffffff;
262
328
  --ds-color-warning-background-tinted: #fcf2e2;
263
329
  --ds-color-warning-surface-default: #ffffff;
@@ -274,6 +340,22 @@ design-tokens: v1.0.6
274
340
  --ds-color-warning-base-active: #b27614;
275
341
  --ds-color-warning-base-contrast-subtle: #271a04;
276
342
  --ds-color-warning-base-contrast-default: #000000;
343
+ --ds-color-danger-background-default: #ffffff;
344
+ --ds-color-danger-background-tinted: #fbf1f1;
345
+ --ds-color-danger-surface-default: #ffffff;
346
+ --ds-color-danger-surface-tinted: #f8e4e4;
347
+ --ds-color-danger-surface-hover: #f3d2d2;
348
+ --ds-color-danger-surface-active: #edbfbf;
349
+ --ds-color-danger-border-subtle: #e8adad;
350
+ --ds-color-danger-border-default: #ce4d4d;
351
+ --ds-color-danger-border-strong: #b81a1a;
352
+ --ds-color-danger-text-subtle: #b81a1a;
353
+ --ds-color-danger-text-default: #590d0d;
354
+ --ds-color-danger-base-default: #C01B1B;
355
+ --ds-color-danger-base-hover: #9b1616;
356
+ --ds-color-danger-base-active: #791111;
357
+ --ds-color-danger-base-contrast-subtle: #f7e1e1;
358
+ --ds-color-danger-base-contrast-default: #ffffff;
277
359
  --ds-color-focus-inner: #ffffff;
278
360
  --ds-color-focus-outer: #2b2b2b;
279
361
  --ds-link-color-visited: #663299;
@@ -290,129 +372,148 @@ design-tokens: v1.0.6
290
372
  --ds-line-height-sm: 1.3;
291
373
  --ds-line-height-md: 1.5;
292
374
  --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%;
375
+ --ds-letter-spacing-1: -0.01em;
376
+ --ds-letter-spacing-2: -0.005em;
377
+ --ds-letter-spacing-3: -0.0025em;
378
+ --ds-letter-spacing-4: -0.0015em;
379
+ --ds-letter-spacing-5: 0em;
380
+ --ds-letter-spacing-6: 0.0015em;
381
+ --ds-letter-spacing-7: 0.0025em;
382
+ --ds-letter-spacing-8: 0.005em;
383
+ --ds-letter-spacing-9: 0.015em;
312
384
  --ds-font-family: Inter;
313
385
  --ds-font-weight-medium: 500;
314
386
  --ds-font-weight-semibold: 600;
315
387
  --ds-font-weight-regular: 400;
316
388
  --ds-heading-2xl-font-weight: 500;
317
389
  --ds-heading-2xl-line-height: 1.3;
318
- --ds-heading-2xl-font-size: 3.75rem;
319
- --ds-heading-2xl-letter-spacing: 0%;
390
+ --ds-heading-2xl-letter-spacing: 0em;
320
391
  --ds-heading-xl-font-weight: 500;
321
392
  --ds-heading-xl-line-height: 1.3;
322
- --ds-heading-xl-font-size: 3rem;
323
- --ds-heading-xl-letter-spacing: 0%;
393
+ --ds-heading-xl-letter-spacing: 0em;
324
394
  --ds-heading-lg-font-weight: 500;
325
395
  --ds-heading-lg-line-height: 1.3;
326
- --ds-heading-lg-font-size: 2.25rem;
327
- --ds-heading-lg-letter-spacing: 0%;
396
+ --ds-heading-lg-letter-spacing: 0em;
328
397
  --ds-heading-md-font-weight: 500;
329
398
  --ds-heading-md-line-height: 1.3;
330
- --ds-heading-md-font-size: 1.875rem;
331
- --ds-heading-md-letter-spacing: 0%;
399
+ --ds-heading-md-letter-spacing: 0em;
332
400
  --ds-heading-sm-font-weight: 500;
333
401
  --ds-heading-sm-line-height: 1.3;
334
- --ds-heading-sm-font-size: 1.5rem;
335
- --ds-heading-sm-letter-spacing: 0%;
402
+ --ds-heading-sm-letter-spacing: 0em;
336
403
  --ds-heading-xs-font-weight: 500;
337
404
  --ds-heading-xs-line-height: 1.3;
338
- --ds-heading-xs-font-size: 1.3125rem;
339
- --ds-heading-xs-letter-spacing: 0%;
405
+ --ds-heading-xs-letter-spacing: 0em;
340
406
  --ds-heading-2xs-font-weight: 500;
341
407
  --ds-heading-2xs-line-height: 1.3;
342
- --ds-heading-2xs-font-size: 1.125rem;
343
- --ds-heading-2xs-letter-spacing: 0%;
408
+ --ds-heading-2xs-letter-spacing: 0em;
344
409
  --ds-body-xl-font-weight: 400;
345
410
  --ds-body-xl-line-height: 1.5;
346
- --ds-body-xl-font-size: 1.5rem;
347
- --ds-body-xl-letter-spacing: 0%;
411
+ --ds-body-xl-letter-spacing: 0em;
348
412
  --ds-body-lg-font-weight: 400;
349
413
  --ds-body-lg-line-height: 1.5;
350
- --ds-body-lg-font-size: 1.3125rem;
351
- --ds-body-lg-letter-spacing: 0%;
414
+ --ds-body-lg-letter-spacing: 0em;
352
415
  --ds-body-md-font-weight: 400;
353
416
  --ds-body-md-line-height: 1.5;
354
- --ds-body-md-font-size: 1.125rem;
355
- --ds-body-md-letter-spacing: 0%;
417
+ --ds-body-md-letter-spacing: 0em;
356
418
  --ds-body-sm-font-weight: 400;
357
419
  --ds-body-sm-line-height: 1.5;
358
- --ds-body-sm-font-size: 1rem;
359
- --ds-body-sm-letter-spacing: 0%;
420
+ --ds-body-sm-letter-spacing: 0em;
360
421
  --ds-body-xs-font-weight: 400;
361
422
  --ds-body-xs-line-height: 1.5;
362
- --ds-body-xs-font-size: 0.875rem;
363
- --ds-body-xs-letter-spacing: 0%;
423
+ --ds-body-xs-letter-spacing: 0em;
364
424
  --ds-body-short-xl-font-weight: 400;
365
425
  --ds-body-short-xl-line-height: 1.3;
366
- --ds-body-short-xl-font-size: 1.5rem;
367
- --ds-body-short-xl-letter-spacing: 0%;
426
+ --ds-body-short-xl-letter-spacing: 0em;
368
427
  --ds-body-short-lg-font-weight: 400;
369
428
  --ds-body-short-lg-line-height: 1.3;
370
- --ds-body-short-lg-font-size: 1.3125rem;
371
- --ds-body-short-lg-letter-spacing: 0%;
429
+ --ds-body-short-lg-letter-spacing: 0em;
372
430
  --ds-body-short-md-font-weight: 400;
373
431
  --ds-body-short-md-line-height: 1.3;
374
- --ds-body-short-md-font-size: 1.125rem;
375
- --ds-body-short-md-letter-spacing: 0%;
432
+ --ds-body-short-md-letter-spacing: 0em;
376
433
  --ds-body-short-sm-font-weight: 400;
377
434
  --ds-body-short-sm-line-height: 1.3;
378
- --ds-body-short-sm-font-size: 1rem;
379
- --ds-body-short-sm-letter-spacing: 0%;
435
+ --ds-body-short-sm-letter-spacing: 0em;
380
436
  --ds-body-short-xs-font-weight: 400;
381
437
  --ds-body-short-xs-line-height: 1.3;
382
- --ds-body-short-xs-font-size: 0.875rem;
383
- --ds-body-short-xs-letter-spacing: 0%;
438
+ --ds-body-short-xs-letter-spacing: 0em;
384
439
  --ds-body-long-xl-font-weight: 400;
385
440
  --ds-body-long-xl-line-height: 1.7;
386
- --ds-body-long-xl-font-size: 1.5rem;
387
- --ds-body-long-xl-letter-spacing: 0%;
441
+ --ds-body-long-xl-letter-spacing: 0em;
388
442
  --ds-body-long-lg-font-weight: 400;
389
443
  --ds-body-long-lg-line-height: 1.7;
390
- --ds-body-long-lg-font-size: 1.3125rem;
391
- --ds-body-long-lg-letter-spacing: 0%;
444
+ --ds-body-long-lg-letter-spacing: 0em;
392
445
  --ds-body-long-md-font-weight: 400;
393
446
  --ds-body-long-md-line-height: 1.7;
394
- --ds-body-long-md-font-size: 1.125rem;
395
- --ds-body-long-md-letter-spacing: 0%;
447
+ --ds-body-long-md-letter-spacing: 0em;
396
448
  --ds-body-long-sm-font-weight: 400;
397
449
  --ds-body-long-sm-line-height: 1.7;
398
- --ds-body-long-sm-font-size: 1rem;
399
- --ds-body-long-sm-letter-spacing: 0%;
450
+ --ds-body-long-sm-letter-spacing: 0em;
400
451
  --ds-body-long-xs-font-weight: 400;
401
452
  --ds-body-long-xs-line-height: 1.7;
402
- --ds-body-long-xs-font-size: 0.875rem;
403
- --ds-body-long-xs-letter-spacing: 0%;
453
+ --ds-body-long-xs-letter-spacing: 0em;
404
454
  }
405
455
  }
406
- @layer ds.theme.semantic {
407
- :root {
456
+ @layer ds.theme.size {
457
+ :root, [data-size] {
408
458
  --ds-size-base: 18;
409
459
  --ds-size-step: 4;
460
+
461
+ --ds-size-0: calc(var(--ds-size-unit) * 0);
462
+ --ds-size-1: calc(var(--ds-size-unit) * 1);
463
+ --ds-size-2: calc(var(--ds-size-unit) * 2);
464
+ --ds-size-3: calc(var(--ds-size-unit) * 3);
465
+ --ds-size-4: calc(var(--ds-size-unit) * 4);
466
+ --ds-size-5: calc(var(--ds-size-unit) * 5);
467
+ --ds-size-6: calc(var(--ds-size-unit) * 6);
468
+ --ds-size-7: calc(var(--ds-size-unit) * 7);
469
+ --ds-size-8: calc(var(--ds-size-unit) * 8);
470
+ --ds-size-9: calc(var(--ds-size-unit) * 9);
471
+ --ds-size-10: calc(var(--ds-size-unit) * 10);
472
+ --ds-size-11: calc(var(--ds-size-unit) * 11);
473
+ --ds-size-12: calc(var(--ds-size-unit) * 12);
474
+ --ds-size-13: calc(var(--ds-size-unit) * 13);
475
+ --ds-size-14: calc(var(--ds-size-unit) * 14);
476
+ --ds-size-15: calc(var(--ds-size-unit) * 15);
477
+ --ds-size-18: calc(var(--ds-size-unit) * 18);
478
+ --ds-size-22: calc(var(--ds-size-unit) * 22);
479
+ --ds-size-26: calc(var(--ds-size-unit) * 26);
480
+ --ds-size-30: calc(var(--ds-size-unit) * 30);
481
+ --ds-size-unit: calc(1rem * var(--ds-size-step) / var(--ds-size-base) * var(--ds-size-mode-font-size));
482
+
483
+ @supports (width: round(down, .1em, 1px)) {
484
+ --ds-size-0: round(down, calc(var(--ds-size-unit) * 0), 1px);
485
+ --ds-size-1: round(down, calc(var(--ds-size-unit) * 1), 1px);
486
+ --ds-size-2: round(down, calc(var(--ds-size-unit) * 2), 1px);
487
+ --ds-size-3: round(down, calc(var(--ds-size-unit) * 3), 1px);
488
+ --ds-size-4: round(down, calc(var(--ds-size-unit) * 4), 1px);
489
+ --ds-size-5: round(down, calc(var(--ds-size-unit) * 5), 1px);
490
+ --ds-size-6: round(down, calc(var(--ds-size-unit) * 6), 1px);
491
+ --ds-size-7: round(down, calc(var(--ds-size-unit) * 7), 1px);
492
+ --ds-size-8: round(down, calc(var(--ds-size-unit) * 8), 1px);
493
+ --ds-size-9: round(down, calc(var(--ds-size-unit) * 9), 1px);
494
+ --ds-size-10: round(down, calc(var(--ds-size-unit) * 10), 1px);
495
+ --ds-size-11: round(down, calc(var(--ds-size-unit) * 11), 1px);
496
+ --ds-size-12: round(down, calc(var(--ds-size-unit) * 12), 1px);
497
+ --ds-size-13: round(down, calc(var(--ds-size-unit) * 13), 1px);
498
+ --ds-size-14: round(down, calc(var(--ds-size-unit) * 14), 1px);
499
+ --ds-size-15: round(down, calc(var(--ds-size-unit) * 15), 1px);
500
+ --ds-size-18: round(down, calc(var(--ds-size-unit) * 18), 1px);
501
+ --ds-size-22: round(down, calc(var(--ds-size-unit) * 22), 1px);
502
+ --ds-size-26: round(down, calc(var(--ds-size-unit) * 26), 1px);
503
+ --ds-size-30: round(down, calc(var(--ds-size-unit) * 30), 1px);
504
+ }
505
+ }
506
+
507
+ }
508
+
509
+ @layer ds.theme.semantic {
510
+ :root {
410
511
  --ds-border-radius-base: 0.75rem;
411
512
  --ds-border-radius-scale: 0.25rem;
412
513
  --ds-border-radius-sm: min(var(--ds-border-radius-base)*0.5,var(--ds-border-radius-scale));
413
514
  --ds-border-radius-md: min(var(--ds-border-radius-base),var(--ds-border-radius-scale)*2);
414
- --ds-border-radius-lg: min(var(--ds-border-radius-base)*2,var(--ds-border-radius-scale)*3);
415
- --ds-border-radius-xl: min(var(--ds-border-radius-base)*3,var(--ds-border-radius-scale)*4);
515
+ --ds-border-radius-lg: min(var(--ds-border-radius-base)*2,var(--ds-border-radius-scale)*5);
516
+ --ds-border-radius-xl: min(var(--ds-border-radius-base)*3,var(--ds-border-radius-scale)*7);
416
517
  --ds-border-radius-default: var(--ds-border-radius-base);
417
518
  --ds-border-radius-full: 624.9375rem;
418
519
  --ds-border-width-default: 1px;
@@ -423,50 +524,6 @@ design-tokens: v1.0.6
423
524
  --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);
424
525
  --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
526
  --ds-opacity-disabled: 30%;
426
-
427
- --ds-size-0: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *0);
428
- --ds-size-1: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *1);
429
- --ds-size-2: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *2);
430
- --ds-size-3: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *3);
431
- --ds-size-4: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *4);
432
- --ds-size-5: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *5);
433
- --ds-size-6: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *6);
434
- --ds-size-7: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *7);
435
- --ds-size-8: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *8);
436
- --ds-size-9: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *9);
437
- --ds-size-10: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *10);
438
- --ds-size-11: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *11);
439
- --ds-size-12: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *12);
440
- --ds-size-13: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *13);
441
- --ds-size-14: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *14);
442
- --ds-size-15: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *15);
443
- --ds-size-18: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *18);
444
- --ds-size-22: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *22);
445
- --ds-size-26: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *26);
446
- --ds-size-30: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *30);
447
-
448
- @supports (width: round(down, .1em, 1px)) {
449
- --ds-size-0: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *0), 0.0625rem);
450
- --ds-size-1: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *1), 0.0625rem);
451
- --ds-size-2: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *2), 0.0625rem);
452
- --ds-size-3: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *3), 0.0625rem);
453
- --ds-size-4: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *4), 0.0625rem);
454
- --ds-size-5: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *5), 0.0625rem);
455
- --ds-size-6: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *6), 0.0625rem);
456
- --ds-size-7: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *7), 0.0625rem);
457
- --ds-size-8: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *8), 0.0625rem);
458
- --ds-size-9: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *9), 0.0625rem);
459
- --ds-size-10: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *10), 0.0625rem);
460
- --ds-size-11: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *11), 0.0625rem);
461
- --ds-size-12: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *12), 0.0625rem);
462
- --ds-size-13: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *13), 0.0625rem);
463
- --ds-size-14: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *14), 0.0625rem);
464
- --ds-size-15: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *15), 0.0625rem);
465
- --ds-size-18: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *18), 0.0625rem);
466
- --ds-size-22: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *22), 0.0625rem);
467
- --ds-size-26: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *26), 0.0625rem);
468
- --ds-size-30: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *30), 0.0625rem);
469
- }
470
527
  }
471
528
 
472
529
  }
@@ -537,54 +594,38 @@ design-tokens: v1.0.6
537
594
  --ds-color-support2-base-active: #534b3f;
538
595
  --ds-color-support2-base-contrast-subtle: #bcbbb9;
539
596
  --ds-color-support2-base-contrast-default: #ffffff;
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;
551
- --ds-color-success-base-default: #138d24;
552
- --ds-color-success-base-hover: #3ca14b;
553
- --ds-color-success-base-active: #66b571;
554
- --ds-color-success-base-contrast-subtle: #010501;
555
- --ds-color-success-base-contrast-default: #000000;
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;
567
- --ds-color-danger-base-default: #d76e6e;
568
- --ds-color-danger-base-hover: #df8b8b;
569
- --ds-color-danger-base-active: #e7a8a8;
570
- --ds-color-danger-base-contrast-subtle: #271414;
571
- --ds-color-danger-base-contrast-default: #000000;
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;
583
- --ds-color-info-base-default: #2d85c9;
584
- --ds-color-info-base-hover: #519ad2;
585
- --ds-color-info-base-active: #77b0dc;
586
- --ds-color-info-base-contrast-subtle: #050e15;
587
- --ds-color-info-base-contrast-default: #000000;
597
+ --ds-color-info-background-default: #0e1923;
598
+ --ds-color-info-background-tinted: #12212e;
599
+ --ds-color-info-surface-default: #17293b;
600
+ --ds-color-info-surface-tinted: #1a2f43;
601
+ --ds-color-info-surface-hover: #1e374f;
602
+ --ds-color-info-surface-active: #264562;
603
+ --ds-color-info-border-subtle: #2d5375;
604
+ --ds-color-info-border-default: #4985bd;
605
+ --ds-color-info-border-strong: #73ade2;
606
+ --ds-color-info-text-subtle: #73ade2;
607
+ --ds-color-info-text-default: #e2eef9;
608
+ --ds-color-info-base-default: #135c94;
609
+ --ds-color-info-base-hover: #0f4975;
610
+ --ds-color-info-base-active: #0b3657;
611
+ --ds-color-info-base-contrast-subtle: #f6f8fb;
612
+ --ds-color-info-base-contrast-default: #ffffff;
613
+ --ds-color-success-background-default: #0e1b0e;
614
+ --ds-color-success-background-tinted: #122313;
615
+ --ds-color-success-surface-default: #172d17;
616
+ --ds-color-success-surface-tinted: #1a331b;
617
+ --ds-color-success-surface-hover: #1e3c1f;
618
+ --ds-color-success-surface-active: #264b27;
619
+ --ds-color-success-border-subtle: #2d5a2f;
620
+ --ds-color-success-border-default: #49904c;
621
+ --ds-color-success-border-strong: #5fbb62;
622
+ --ds-color-success-text-subtle: #5fbb62;
623
+ --ds-color-success-text-default: #ddf2dd;
624
+ --ds-color-success-base-default: #0c4d16;
625
+ --ds-color-success-base-hover: #10621b;
626
+ --ds-color-success-base-active: #147922;
627
+ --ds-color-success-base-contrast-subtle: #d5e0d6;
628
+ --ds-color-success-base-contrast-default: #ffffff;
588
629
  --ds-color-warning-background-default: #1e160d;
589
630
  --ds-color-warning-background-tinted: #281e11;
590
631
  --ds-color-warning-surface-default: #322616;
@@ -601,6 +642,22 @@ design-tokens: v1.0.6
601
642
  --ds-color-warning-base-active: #946211;
602
643
  --ds-color-warning-base-contrast-subtle: #e6e2d9;
603
644
  --ds-color-warning-base-contrast-default: #ffffff;
645
+ --ds-color-danger-background-default: #2a100e;
646
+ --ds-color-danger-background-tinted: #371512;
647
+ --ds-color-danger-surface-default: #451b17;
648
+ --ds-color-danger-surface-tinted: #4f1f1b;
649
+ --ds-color-danger-surface-hover: #5c241f;
650
+ --ds-color-danger-surface-active: #722d27;
651
+ --ds-color-danger-border-subtle: #88352e;
652
+ --ds-color-danger-border-default: #bc6b64;
653
+ --ds-color-danger-border-strong: #d19a96;
654
+ --ds-color-danger-text-subtle: #d19a96;
655
+ --ds-color-danger-text-default: #f5eae9;
656
+ --ds-color-danger-base-default: #d76e6e;
657
+ --ds-color-danger-base-hover: #df8b8b;
658
+ --ds-color-danger-base-active: #e7a8a8;
659
+ --ds-color-danger-base-contrast-subtle: #271414;
660
+ --ds-color-danger-base-contrast-default: #000000;
604
661
  --ds-color-focus-inner: #181818;
605
662
  --ds-color-focus-outer: #ececec;
606
663
  --ds-link-color-visited: #b49acd;
@@ -674,54 +731,38 @@ design-tokens: v1.0.6
674
731
  --ds-color-support2-base-active: #534b3f;
675
732
  --ds-color-support2-base-contrast-subtle: #bcbbb9;
676
733
  --ds-color-support2-base-contrast-default: #ffffff;
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;
688
- --ds-color-success-base-default: #138d24;
689
- --ds-color-success-base-hover: #3ca14b;
690
- --ds-color-success-base-active: #66b571;
691
- --ds-color-success-base-contrast-subtle: #010501;
692
- --ds-color-success-base-contrast-default: #000000;
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;
704
- --ds-color-danger-base-default: #d76e6e;
705
- --ds-color-danger-base-hover: #df8b8b;
706
- --ds-color-danger-base-active: #e7a8a8;
707
- --ds-color-danger-base-contrast-subtle: #271414;
708
- --ds-color-danger-base-contrast-default: #000000;
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;
720
- --ds-color-info-base-default: #2d85c9;
721
- --ds-color-info-base-hover: #519ad2;
722
- --ds-color-info-base-active: #77b0dc;
723
- --ds-color-info-base-contrast-subtle: #050e15;
724
- --ds-color-info-base-contrast-default: #000000;
734
+ --ds-color-info-background-default: #0e1923;
735
+ --ds-color-info-background-tinted: #12212e;
736
+ --ds-color-info-surface-default: #17293b;
737
+ --ds-color-info-surface-tinted: #1a2f43;
738
+ --ds-color-info-surface-hover: #1e374f;
739
+ --ds-color-info-surface-active: #264562;
740
+ --ds-color-info-border-subtle: #2d5375;
741
+ --ds-color-info-border-default: #4985bd;
742
+ --ds-color-info-border-strong: #73ade2;
743
+ --ds-color-info-text-subtle: #73ade2;
744
+ --ds-color-info-text-default: #e2eef9;
745
+ --ds-color-info-base-default: #135c94;
746
+ --ds-color-info-base-hover: #0f4975;
747
+ --ds-color-info-base-active: #0b3657;
748
+ --ds-color-info-base-contrast-subtle: #f6f8fb;
749
+ --ds-color-info-base-contrast-default: #ffffff;
750
+ --ds-color-success-background-default: #0e1b0e;
751
+ --ds-color-success-background-tinted: #122313;
752
+ --ds-color-success-surface-default: #172d17;
753
+ --ds-color-success-surface-tinted: #1a331b;
754
+ --ds-color-success-surface-hover: #1e3c1f;
755
+ --ds-color-success-surface-active: #264b27;
756
+ --ds-color-success-border-subtle: #2d5a2f;
757
+ --ds-color-success-border-default: #49904c;
758
+ --ds-color-success-border-strong: #5fbb62;
759
+ --ds-color-success-text-subtle: #5fbb62;
760
+ --ds-color-success-text-default: #ddf2dd;
761
+ --ds-color-success-base-default: #0c4d16;
762
+ --ds-color-success-base-hover: #10621b;
763
+ --ds-color-success-base-active: #147922;
764
+ --ds-color-success-base-contrast-subtle: #d5e0d6;
765
+ --ds-color-success-base-contrast-default: #ffffff;
725
766
  --ds-color-warning-background-default: #1e160d;
726
767
  --ds-color-warning-background-tinted: #281e11;
727
768
  --ds-color-warning-surface-default: #322616;
@@ -738,6 +779,22 @@ design-tokens: v1.0.6
738
779
  --ds-color-warning-base-active: #946211;
739
780
  --ds-color-warning-base-contrast-subtle: #e6e2d9;
740
781
  --ds-color-warning-base-contrast-default: #ffffff;
782
+ --ds-color-danger-background-default: #2a100e;
783
+ --ds-color-danger-background-tinted: #371512;
784
+ --ds-color-danger-surface-default: #451b17;
785
+ --ds-color-danger-surface-tinted: #4f1f1b;
786
+ --ds-color-danger-surface-hover: #5c241f;
787
+ --ds-color-danger-surface-active: #722d27;
788
+ --ds-color-danger-border-subtle: #88352e;
789
+ --ds-color-danger-border-default: #bc6b64;
790
+ --ds-color-danger-border-strong: #d19a96;
791
+ --ds-color-danger-text-subtle: #d19a96;
792
+ --ds-color-danger-text-default: #f5eae9;
793
+ --ds-color-danger-base-default: #d76e6e;
794
+ --ds-color-danger-base-hover: #df8b8b;
795
+ --ds-color-danger-base-active: #e7a8a8;
796
+ --ds-color-danger-base-contrast-subtle: #271414;
797
+ --ds-color-danger-base-contrast-default: #000000;
741
798
  --ds-color-focus-inner: #181818;
742
799
  --ds-color-focus-outer: #ececec;
743
800
  --ds-link-color-visited: #b49acd;
@@ -754,117 +811,85 @@ design-tokens: v1.0.6
754
811
  --ds-line-height-sm: 1.3;
755
812
  --ds-line-height-md: 1.5;
756
813
  --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%;
814
+ --ds-letter-spacing-1: -0.01em;
815
+ --ds-letter-spacing-2: -0.005em;
816
+ --ds-letter-spacing-3: -0.0025em;
817
+ --ds-letter-spacing-4: -0.0015em;
818
+ --ds-letter-spacing-5: 0em;
819
+ --ds-letter-spacing-6: 0.0015em;
820
+ --ds-letter-spacing-7: 0.0025em;
821
+ --ds-letter-spacing-8: 0.005em;
822
+ --ds-letter-spacing-9: 0.015em;
776
823
  --ds-font-family: Inter;
777
824
  --ds-font-weight-medium: 500;
778
825
  --ds-font-weight-semibold: 600;
779
826
  --ds-font-weight-regular: 400;
780
827
  --ds-heading-2xl-font-weight: 500;
781
828
  --ds-heading-2xl-line-height: 1.3;
782
- --ds-heading-2xl-font-size: 3.75rem;
783
- --ds-heading-2xl-letter-spacing: 0%;
829
+ --ds-heading-2xl-letter-spacing: 0em;
784
830
  --ds-heading-xl-font-weight: 500;
785
831
  --ds-heading-xl-line-height: 1.3;
786
- --ds-heading-xl-font-size: 3rem;
787
- --ds-heading-xl-letter-spacing: 0%;
832
+ --ds-heading-xl-letter-spacing: 0em;
788
833
  --ds-heading-lg-font-weight: 500;
789
834
  --ds-heading-lg-line-height: 1.3;
790
- --ds-heading-lg-font-size: 2.25rem;
791
- --ds-heading-lg-letter-spacing: 0%;
835
+ --ds-heading-lg-letter-spacing: 0em;
792
836
  --ds-heading-md-font-weight: 500;
793
837
  --ds-heading-md-line-height: 1.3;
794
- --ds-heading-md-font-size: 1.875rem;
795
- --ds-heading-md-letter-spacing: 0%;
838
+ --ds-heading-md-letter-spacing: 0em;
796
839
  --ds-heading-sm-font-weight: 500;
797
840
  --ds-heading-sm-line-height: 1.3;
798
- --ds-heading-sm-font-size: 1.5rem;
799
- --ds-heading-sm-letter-spacing: 0%;
841
+ --ds-heading-sm-letter-spacing: 0em;
800
842
  --ds-heading-xs-font-weight: 500;
801
843
  --ds-heading-xs-line-height: 1.3;
802
- --ds-heading-xs-font-size: 1.3125rem;
803
- --ds-heading-xs-letter-spacing: 0%;
844
+ --ds-heading-xs-letter-spacing: 0em;
804
845
  --ds-heading-2xs-font-weight: 500;
805
846
  --ds-heading-2xs-line-height: 1.3;
806
- --ds-heading-2xs-font-size: 1.125rem;
807
- --ds-heading-2xs-letter-spacing: 0%;
847
+ --ds-heading-2xs-letter-spacing: 0em;
808
848
  --ds-body-xl-font-weight: 400;
809
849
  --ds-body-xl-line-height: 1.5;
810
- --ds-body-xl-font-size: 1.5rem;
811
- --ds-body-xl-letter-spacing: 0%;
850
+ --ds-body-xl-letter-spacing: 0em;
812
851
  --ds-body-lg-font-weight: 400;
813
852
  --ds-body-lg-line-height: 1.5;
814
- --ds-body-lg-font-size: 1.3125rem;
815
- --ds-body-lg-letter-spacing: 0%;
853
+ --ds-body-lg-letter-spacing: 0em;
816
854
  --ds-body-md-font-weight: 400;
817
855
  --ds-body-md-line-height: 1.5;
818
- --ds-body-md-font-size: 1.125rem;
819
- --ds-body-md-letter-spacing: 0%;
856
+ --ds-body-md-letter-spacing: 0em;
820
857
  --ds-body-sm-font-weight: 400;
821
858
  --ds-body-sm-line-height: 1.5;
822
- --ds-body-sm-font-size: 1rem;
823
- --ds-body-sm-letter-spacing: 0%;
859
+ --ds-body-sm-letter-spacing: 0em;
824
860
  --ds-body-xs-font-weight: 400;
825
861
  --ds-body-xs-line-height: 1.5;
826
- --ds-body-xs-font-size: 0.875rem;
827
- --ds-body-xs-letter-spacing: 0%;
862
+ --ds-body-xs-letter-spacing: 0em;
828
863
  --ds-body-short-xl-font-weight: 400;
829
864
  --ds-body-short-xl-line-height: 1.3;
830
- --ds-body-short-xl-font-size: 1.5rem;
831
- --ds-body-short-xl-letter-spacing: 0%;
865
+ --ds-body-short-xl-letter-spacing: 0em;
832
866
  --ds-body-short-lg-font-weight: 400;
833
867
  --ds-body-short-lg-line-height: 1.3;
834
- --ds-body-short-lg-font-size: 1.3125rem;
835
- --ds-body-short-lg-letter-spacing: 0%;
868
+ --ds-body-short-lg-letter-spacing: 0em;
836
869
  --ds-body-short-md-font-weight: 400;
837
870
  --ds-body-short-md-line-height: 1.3;
838
- --ds-body-short-md-font-size: 1.125rem;
839
- --ds-body-short-md-letter-spacing: 0%;
871
+ --ds-body-short-md-letter-spacing: 0em;
840
872
  --ds-body-short-sm-font-weight: 400;
841
873
  --ds-body-short-sm-line-height: 1.3;
842
- --ds-body-short-sm-font-size: 1rem;
843
- --ds-body-short-sm-letter-spacing: 0%;
874
+ --ds-body-short-sm-letter-spacing: 0em;
844
875
  --ds-body-short-xs-font-weight: 400;
845
876
  --ds-body-short-xs-line-height: 1.3;
846
- --ds-body-short-xs-font-size: 0.875rem;
847
- --ds-body-short-xs-letter-spacing: 0%;
877
+ --ds-body-short-xs-letter-spacing: 0em;
848
878
  --ds-body-long-xl-font-weight: 400;
849
879
  --ds-body-long-xl-line-height: 1.7;
850
- --ds-body-long-xl-font-size: 1.5rem;
851
- --ds-body-long-xl-letter-spacing: 0%;
880
+ --ds-body-long-xl-letter-spacing: 0em;
852
881
  --ds-body-long-lg-font-weight: 400;
853
882
  --ds-body-long-lg-line-height: 1.7;
854
- --ds-body-long-lg-font-size: 1.3125rem;
855
- --ds-body-long-lg-letter-spacing: 0%;
883
+ --ds-body-long-lg-letter-spacing: 0em;
856
884
  --ds-body-long-md-font-weight: 400;
857
885
  --ds-body-long-md-line-height: 1.7;
858
- --ds-body-long-md-font-size: 1.125rem;
859
- --ds-body-long-md-letter-spacing: 0%;
886
+ --ds-body-long-md-letter-spacing: 0em;
860
887
  --ds-body-long-sm-font-weight: 400;
861
888
  --ds-body-long-sm-line-height: 1.7;
862
- --ds-body-long-sm-font-size: 1rem;
863
- --ds-body-long-sm-letter-spacing: 0%;
889
+ --ds-body-long-sm-letter-spacing: 0em;
864
890
  --ds-body-long-xs-font-weight: 400;
865
891
  --ds-body-long-xs-line-height: 1.7;
866
- --ds-body-long-xs-font-size: 0.875rem;
867
- --ds-body-long-xs-letter-spacing: 0%;
892
+ --ds-body-long-xs-letter-spacing: 0em;
868
893
  }
869
894
  }
870
895
  @layer ds.theme.color {
package/dist/types.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ /* build: v1.9.0 */
2
+ import type {} from '@digdir/designsystemet-types';
3
+
4
+ // Augment types based on theme
5
+ declare module '@digdir/designsystemet-types' {
6
+ export interface ColorDefinitions {
7
+ accent: never;
8
+ support1: never;
9
+ support2: never;
10
+ neutral: never;
11
+ }
12
+ export interface SeverityColorDefinitions {
13
+ info: never;
14
+ success: never;
15
+ warning: never;
16
+ danger: never;
17
+ }
18
+ }
package/package.json CHANGED
@@ -5,29 +5,32 @@
5
5
  "url": "github:Utdanningsdirektoratet/designsystem",
6
6
  "directory": "@udir-design/theme"
7
7
  },
8
+ "publishConfig": {
9
+ "access": "public"
10
+ },
8
11
  "license": "MIT",
9
- "version": "1.0.0-beta.2",
12
+ "version": "1.0.0-beta.20",
10
13
  "type": "module",
11
14
  "exports": {
12
15
  ".": {
13
- "types": "./dist/colors.d.ts",
14
- "default": "./dist/udir.css"
16
+ "types": "./dist/types.d.ts",
17
+ "default": "./dist/index.css"
15
18
  }
16
19
  },
17
20
  "files": [
18
21
  "./dist"
19
22
  ],
20
23
  "dependencies": {
21
- "@digdir/designsystemet-react": "1.0.6"
24
+ "@digdir/designsystemet-types": "^1.9.0"
22
25
  },
23
26
  "devDependencies": {
24
- "rimraf": "^6.0.1",
27
+ "rimraf": "^6.1.2",
25
28
  "@internal/build-tools": "0.0.0",
26
29
  "@udir-design/tokens": "0.0.0"
27
30
  },
28
31
  "scripts": {
29
- "copy-css": "cp ../../design-tokens/dist/*.* ./dist/",
30
- "postprocess-css": "../../@internal/build-tools/bin/postprocess-css-colors.ts ./dist/udir.css",
32
+ "copy-css": "cp ../../design-tokens/dist/*.* ./dist/ && mv ./dist/udir.css ./dist/index.css && rm ./dist/colors.d.ts",
33
+ "postprocess-css": "../../@internal/build-tools/bin/postprocess-css-colors.ts ./dist/index.css",
31
34
  "clean": "rimraf ./dist && mkdir ./dist",
32
35
  "build": "pnpm clean && pnpm copy-css && pnpm postprocess-css"
33
36
  }
package/dist/colors.d.ts DELETED
@@ -1,9 +0,0 @@
1
- import type {} from '@digdir/designsystemet-react/colors';
2
-
3
- declare module '@digdir/designsystemet-react/colors' {
4
- export interface MainAndSupportColors {
5
- accent: never;
6
- support1: never;
7
- support2: never;
8
- }
9
- }