@udir-design/theme 1.0.0-beta.3 → 1.0.0-beta.31

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 (6) hide show
  1. package/README.md +4 -0
  2. package/dist/datavis.css +60 -0
  3. package/dist/{udir.css → index.css} +330 -302
  4. package/dist/types.d.ts +18 -0
  5. package/package.json +12 -8
  6. package/dist/colors.d.ts +0 -9
package/README.md CHANGED
@@ -11,3 +11,7 @@ npm add @udir-design/theme@beta
11
11
  ## Ta i bruk
12
12
 
13
13
  Dersom du bruker `@udir-design/react` trenger du ikke å bruke dette biblioteket direkte. Følg instruksene i `@udir-design/react` for å sette opp å ta i bruk designsystemet!
14
+
15
+ ## Datavisualiseringsfarger
16
+
17
+ Importer `@udir-design/theme/datavis.css` for å få tilgang på farger for datavisualisering, f.eks. til bruk i Highcharts.
package/dist/datavis.css ADDED
@@ -0,0 +1,60 @@
1
+ @layer ds.theme.color-scheme.light {
2
+ :root, [data-color-scheme="light"] {
3
+ --uds-data-color-categorical-1: #5ba27e;
4
+ --uds-data-color-categorical-2: #6c7c94;
5
+ --uds-data-color-categorical-3: #bb893e;
6
+ --uds-data-color-categorical-4: #353535;
7
+ --uds-data-color-categorical-5: #30a1bb;
8
+ --uds-data-color-categorical-6: #255f41;
9
+ --uds-data-color-categorical-7: #9d5f32;
10
+ --uds-data-color-categorical-8: #949494;
11
+ --uds-data-color-sequential-monochromatic-1: #5ba27e;
12
+ --uds-data-color-sequential-monochromatic-2: #427c5e;
13
+ --uds-data-color-sequential-monochromatic-3: #36674e;
14
+ --uds-data-color-sequential-monochromatic-4: #254b38;
15
+ --uds-data-color-sequential-monochromatic-5: #1e422f;
16
+ --uds-data-color-sequential-monochromatic-6: #163626;
17
+ --uds-data-color-sequential-monochromatic-7: #112e1f;
18
+ --uds-data-color-sequential-monochromatic-8: #0b1e15;
19
+ --uds-data-color-sequential-divergent-1: #1e422f;
20
+ --uds-data-color-sequential-divergent-2: #36674e;
21
+ --uds-data-color-sequential-divergent-3: #5ba27e;
22
+ --uds-data-color-sequential-divergent-4: #dedede;
23
+ --uds-data-color-sequential-divergent-5: #6c7c94;
24
+ --uds-data-color-sequential-divergent-6: #485970;
25
+ --uds-data-color-sequential-divergent-7: #2e3c51;
26
+ }
27
+
28
+ }
29
+
30
+
31
+ @layer ds.theme.color-scheme.dark {
32
+ [data-color-scheme="dark"] {
33
+ --uds-data-color-categorical-1: #76c69d;
34
+ --uds-data-color-categorical-2: #bed5e8;
35
+ --uds-data-color-categorical-3: #bd965e;
36
+ --uds-data-color-categorical-4: #f9f9f9;
37
+ --uds-data-color-categorical-5: #5db6cb;
38
+ --uds-data-color-categorical-6: #d2ebde;
39
+ --uds-data-color-categorical-7: #b36234;
40
+ --uds-data-color-categorical-8: #c4c4c4;
41
+ --uds-data-color-sequential-monochromatic-1: #5ba27e;
42
+ --uds-data-color-sequential-monochromatic-2: #427c5e;
43
+ --uds-data-color-sequential-monochromatic-3: #36674e;
44
+ --uds-data-color-sequential-monochromatic-4: #254b38;
45
+ --uds-data-color-sequential-monochromatic-5: #1e422f;
46
+ --uds-data-color-sequential-monochromatic-6: #163626;
47
+ --uds-data-color-sequential-monochromatic-7: #112e1f;
48
+ --uds-data-color-sequential-monochromatic-8: #0b1e15;
49
+ --uds-data-color-sequential-divergent-1: #1e422f;
50
+ --uds-data-color-sequential-divergent-2: #36674e;
51
+ --uds-data-color-sequential-divergent-3: #5ba27e;
52
+ --uds-data-color-sequential-divergent-4: #dedede;
53
+ --uds-data-color-sequential-divergent-5: #6c7c94;
54
+ --uds-data-color-sequential-divergent-6: #485970;
55
+ --uds-data-color-sequential-divergent-7: #2e3c51;
56
+ }
57
+
58
+ }
59
+
60
+
package/dist/{udir.css → index.css} RENAMED
@@ -1,9 +1,94 @@
1
1
  @charset "UTF-8";
2
2
  /*
3
- build: v1.1.4
4
- design-tokens: v1.1.0
3
+ build: v1.13.3
4
+ design-tokens: v1.9.0
5
5
  */
6
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
+ }
7
92
  @layer ds.theme.color-scheme.light {
8
93
  :root, [data-color-scheme="light"] {
9
94
  --ds-color-accent-background-default: #ffffff;
@@ -70,54 +155,38 @@ design-tokens: v1.1.0
70
155
  --ds-color-support2-base-active: #b5a389;
71
156
  --ds-color-support2-base-contrast-subtle: #3e382f;
72
157
  --ds-color-support2-base-contrast-default: #000000;
73
- --ds-color-success-background-default: #ffffff;
74
- --ds-color-success-background-tinted: #ecf6ee;
75
- --ds-color-success-surface-default: #ffffff;
76
- --ds-color-success-surface-tinted: #daeddd;
77
- --ds-color-success-surface-hover: #c3e2c7;
78
- --ds-color-success-surface-active: #a8d5ae;
79
- --ds-color-success-border-subtle: #8fc997;
80
- --ds-color-success-border-default: #108c22;
81
- --ds-color-success-border-strong: #056d13;
82
- --ds-color-success-text-subtle: #056d13;
83
- --ds-color-success-text-default: #023409;
84
- --ds-color-success-base-default: #068718;
85
- --ds-color-success-base-hover: #057014;
86
- --ds-color-success-base-active: #045a10;
87
- --ds-color-success-base-contrast-subtle: #fafdfb;
88
- --ds-color-success-base-contrast-default: #ffffff;
89
- --ds-color-danger-background-default: #ffffff;
90
- --ds-color-danger-background-tinted: #fbf1f1;
91
- --ds-color-danger-surface-default: #ffffff;
92
- --ds-color-danger-surface-tinted: #f8e4e4;
93
- --ds-color-danger-surface-hover: #f3d2d2;
94
- --ds-color-danger-surface-active: #edbfbf;
95
- --ds-color-danger-border-subtle: #e8adad;
96
- --ds-color-danger-border-default: #ce4d4d;
97
- --ds-color-danger-border-strong: #b81a1a;
98
- --ds-color-danger-text-subtle: #b81a1a;
99
- --ds-color-danger-text-default: #590d0d;
100
- --ds-color-danger-base-default: #C01B1B;
101
- --ds-color-danger-base-hover: #9b1616;
102
- --ds-color-danger-base-active: #791111;
103
- --ds-color-danger-base-contrast-subtle: #f7e1e1;
104
- --ds-color-danger-base-contrast-default: #ffffff;
105
158
  --ds-color-info-background-default: #ffffff;
106
- --ds-color-info-background-tinted: #edf5fa;
159
+ --ds-color-info-background-tinted: #e9f5fe;
107
160
  --ds-color-info-surface-default: #ffffff;
108
- --ds-color-info-surface-tinted: #dcebf6;
109
- --ds-color-info-surface-hover: #c5ddf0;
110
- --ds-color-info-surface-active: #abcfe9;
111
- --ds-color-info-border-subtle: #94c1e3;
112
- --ds-color-info-border-default: #1f7dc5;
113
- --ds-color-info-border-strong: #0860a3;
114
- --ds-color-info-text-subtle: #0860a3;
115
- --ds-color-info-text-default: #042d4d;
116
- --ds-color-info-base-default: #0A71C0;
117
- --ds-color-info-base-hover: #085d9f;
118
- --ds-color-info-base-active: #074a7e;
119
- --ds-color-info-base-contrast-subtle: #eff6fb;
120
- --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;
121
190
  --ds-color-warning-background-default: #ffffff;
122
191
  --ds-color-warning-background-tinted: #fcf2e2;
123
192
  --ds-color-warning-surface-default: #ffffff;
@@ -134,6 +203,22 @@ design-tokens: v1.1.0
134
203
  --ds-color-warning-base-active: #b27614;
135
204
  --ds-color-warning-base-contrast-subtle: #271a04;
136
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;
137
222
  --ds-color-focus-inner: #ffffff;
138
223
  --ds-color-focus-outer: #2b2b2b;
139
224
  --ds-link-color-visited: #663299;
@@ -207,54 +292,38 @@ design-tokens: v1.1.0
207
292
  --ds-color-support2-base-active: #b5a389;
208
293
  --ds-color-support2-base-contrast-subtle: #3e382f;
209
294
  --ds-color-support2-base-contrast-default: #000000;
210
- --ds-color-success-background-default: #ffffff;
211
- --ds-color-success-background-tinted: #ecf6ee;
212
- --ds-color-success-surface-default: #ffffff;
213
- --ds-color-success-surface-tinted: #daeddd;
214
- --ds-color-success-surface-hover: #c3e2c7;
215
- --ds-color-success-surface-active: #a8d5ae;
216
- --ds-color-success-border-subtle: #8fc997;
217
- --ds-color-success-border-default: #108c22;
218
- --ds-color-success-border-strong: #056d13;
219
- --ds-color-success-text-subtle: #056d13;
220
- --ds-color-success-text-default: #023409;
221
- --ds-color-success-base-default: #068718;
222
- --ds-color-success-base-hover: #057014;
223
- --ds-color-success-base-active: #045a10;
224
- --ds-color-success-base-contrast-subtle: #fafdfb;
225
- --ds-color-success-base-contrast-default: #ffffff;
226
- --ds-color-danger-background-default: #ffffff;
227
- --ds-color-danger-background-tinted: #fbf1f1;
228
- --ds-color-danger-surface-default: #ffffff;
229
- --ds-color-danger-surface-tinted: #f8e4e4;
230
- --ds-color-danger-surface-hover: #f3d2d2;
231
- --ds-color-danger-surface-active: #edbfbf;
232
- --ds-color-danger-border-subtle: #e8adad;
233
- --ds-color-danger-border-default: #ce4d4d;
234
- --ds-color-danger-border-strong: #b81a1a;
235
- --ds-color-danger-text-subtle: #b81a1a;
236
- --ds-color-danger-text-default: #590d0d;
237
- --ds-color-danger-base-default: #C01B1B;
238
- --ds-color-danger-base-hover: #9b1616;
239
- --ds-color-danger-base-active: #791111;
240
- --ds-color-danger-base-contrast-subtle: #f7e1e1;
241
- --ds-color-danger-base-contrast-default: #ffffff;
242
295
  --ds-color-info-background-default: #ffffff;
243
- --ds-color-info-background-tinted: #edf5fa;
296
+ --ds-color-info-background-tinted: #e9f5fe;
244
297
  --ds-color-info-surface-default: #ffffff;
245
- --ds-color-info-surface-tinted: #dcebf6;
246
- --ds-color-info-surface-hover: #c5ddf0;
247
- --ds-color-info-surface-active: #abcfe9;
248
- --ds-color-info-border-subtle: #94c1e3;
249
- --ds-color-info-border-default: #1f7dc5;
250
- --ds-color-info-border-strong: #0860a3;
251
- --ds-color-info-text-subtle: #0860a3;
252
- --ds-color-info-text-default: #042d4d;
253
- --ds-color-info-base-default: #0A71C0;
254
- --ds-color-info-base-hover: #085d9f;
255
- --ds-color-info-base-active: #074a7e;
256
- --ds-color-info-base-contrast-subtle: #eff6fb;
257
- --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;
258
327
  --ds-color-warning-background-default: #ffffff;
259
328
  --ds-color-warning-background-tinted: #fcf2e2;
260
329
  --ds-color-warning-surface-default: #ffffff;
@@ -271,6 +340,22 @@ design-tokens: v1.1.0
271
340
  --ds-color-warning-base-active: #b27614;
272
341
  --ds-color-warning-base-contrast-subtle: #271a04;
273
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;
274
359
  --ds-color-focus-inner: #ffffff;
275
360
  --ds-color-focus-outer: #2b2b2b;
276
361
  --ds-link-color-visited: #663299;
@@ -287,16 +372,6 @@ design-tokens: v1.1.0
287
372
  --ds-line-height-sm: 1.3;
288
373
  --ds-line-height-md: 1.5;
289
374
  --ds-line-height-lg: 1.7;
290
- --ds-font-size-1: 0.75rem;
291
- --ds-font-size-2: 0.875rem;
292
- --ds-font-size-3: 1rem;
293
- --ds-font-size-4: 1.125rem;
294
- --ds-font-size-5: 1.3125rem;
295
- --ds-font-size-6: 1.5rem;
296
- --ds-font-size-7: 1.875rem;
297
- --ds-font-size-8: 2.25rem;
298
- --ds-font-size-9: 3rem;
299
- --ds-font-size-10: 3.75rem;
300
375
  --ds-letter-spacing-1: -0.01em;
301
376
  --ds-letter-spacing-2: -0.005em;
302
377
  --ds-letter-spacing-3: -0.0025em;
@@ -312,104 +387,133 @@ design-tokens: v1.1.0
312
387
  --ds-font-weight-regular: 400;
313
388
  --ds-heading-2xl-font-weight: 500;
314
389
  --ds-heading-2xl-line-height: 1.3;
315
- --ds-heading-2xl-font-size: 3.75rem;
316
390
  --ds-heading-2xl-letter-spacing: 0em;
317
391
  --ds-heading-xl-font-weight: 500;
318
392
  --ds-heading-xl-line-height: 1.3;
319
- --ds-heading-xl-font-size: 3rem;
320
393
  --ds-heading-xl-letter-spacing: 0em;
321
394
  --ds-heading-lg-font-weight: 500;
322
395
  --ds-heading-lg-line-height: 1.3;
323
- --ds-heading-lg-font-size: 2.25rem;
324
396
  --ds-heading-lg-letter-spacing: 0em;
325
397
  --ds-heading-md-font-weight: 500;
326
398
  --ds-heading-md-line-height: 1.3;
327
- --ds-heading-md-font-size: 1.875rem;
328
399
  --ds-heading-md-letter-spacing: 0em;
329
400
  --ds-heading-sm-font-weight: 500;
330
401
  --ds-heading-sm-line-height: 1.3;
331
- --ds-heading-sm-font-size: 1.5rem;
332
402
  --ds-heading-sm-letter-spacing: 0em;
333
403
  --ds-heading-xs-font-weight: 500;
334
404
  --ds-heading-xs-line-height: 1.3;
335
- --ds-heading-xs-font-size: 1.3125rem;
336
405
  --ds-heading-xs-letter-spacing: 0em;
337
406
  --ds-heading-2xs-font-weight: 500;
338
407
  --ds-heading-2xs-line-height: 1.3;
339
- --ds-heading-2xs-font-size: 1.125rem;
340
408
  --ds-heading-2xs-letter-spacing: 0em;
341
409
  --ds-body-xl-font-weight: 400;
342
410
  --ds-body-xl-line-height: 1.5;
343
- --ds-body-xl-font-size: 1.5rem;
344
411
  --ds-body-xl-letter-spacing: 0em;
345
412
  --ds-body-lg-font-weight: 400;
346
413
  --ds-body-lg-line-height: 1.5;
347
- --ds-body-lg-font-size: 1.3125rem;
348
414
  --ds-body-lg-letter-spacing: 0em;
349
415
  --ds-body-md-font-weight: 400;
350
416
  --ds-body-md-line-height: 1.5;
351
- --ds-body-md-font-size: 1.125rem;
352
417
  --ds-body-md-letter-spacing: 0em;
353
418
  --ds-body-sm-font-weight: 400;
354
419
  --ds-body-sm-line-height: 1.5;
355
- --ds-body-sm-font-size: 1rem;
356
420
  --ds-body-sm-letter-spacing: 0em;
357
421
  --ds-body-xs-font-weight: 400;
358
422
  --ds-body-xs-line-height: 1.5;
359
- --ds-body-xs-font-size: 0.875rem;
360
423
  --ds-body-xs-letter-spacing: 0em;
361
424
  --ds-body-short-xl-font-weight: 400;
362
425
  --ds-body-short-xl-line-height: 1.3;
363
- --ds-body-short-xl-font-size: 1.5rem;
364
426
  --ds-body-short-xl-letter-spacing: 0em;
365
427
  --ds-body-short-lg-font-weight: 400;
366
428
  --ds-body-short-lg-line-height: 1.3;
367
- --ds-body-short-lg-font-size: 1.3125rem;
368
429
  --ds-body-short-lg-letter-spacing: 0em;
369
430
  --ds-body-short-md-font-weight: 400;
370
431
  --ds-body-short-md-line-height: 1.3;
371
- --ds-body-short-md-font-size: 1.125rem;
372
432
  --ds-body-short-md-letter-spacing: 0em;
373
433
  --ds-body-short-sm-font-weight: 400;
374
434
  --ds-body-short-sm-line-height: 1.3;
375
- --ds-body-short-sm-font-size: 1rem;
376
435
  --ds-body-short-sm-letter-spacing: 0em;
377
436
  --ds-body-short-xs-font-weight: 400;
378
437
  --ds-body-short-xs-line-height: 1.3;
379
- --ds-body-short-xs-font-size: 0.875rem;
380
438
  --ds-body-short-xs-letter-spacing: 0em;
381
439
  --ds-body-long-xl-font-weight: 400;
382
440
  --ds-body-long-xl-line-height: 1.7;
383
- --ds-body-long-xl-font-size: 1.5rem;
384
441
  --ds-body-long-xl-letter-spacing: 0em;
385
442
  --ds-body-long-lg-font-weight: 400;
386
443
  --ds-body-long-lg-line-height: 1.7;
387
- --ds-body-long-lg-font-size: 1.3125rem;
388
444
  --ds-body-long-lg-letter-spacing: 0em;
389
445
  --ds-body-long-md-font-weight: 400;
390
446
  --ds-body-long-md-line-height: 1.7;
391
- --ds-body-long-md-font-size: 1.125rem;
392
447
  --ds-body-long-md-letter-spacing: 0em;
393
448
  --ds-body-long-sm-font-weight: 400;
394
449
  --ds-body-long-sm-line-height: 1.7;
395
- --ds-body-long-sm-font-size: 1rem;
396
450
  --ds-body-long-sm-letter-spacing: 0em;
397
451
  --ds-body-long-xs-font-weight: 400;
398
452
  --ds-body-long-xs-line-height: 1.7;
399
- --ds-body-long-xs-font-size: 0.875rem;
400
453
  --ds-body-long-xs-letter-spacing: 0em;
401
454
  }
402
455
  }
403
- @layer ds.theme.semantic {
404
- :root {
456
+ @layer ds.theme.size {
457
+ :root, [data-size] {
405
458
  --ds-size-base: 18;
406
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 {
407
511
  --ds-border-radius-base: 0.75rem;
408
512
  --ds-border-radius-scale: 0.25rem;
409
513
  --ds-border-radius-sm: min(var(--ds-border-radius-base)*0.5,var(--ds-border-radius-scale));
410
514
  --ds-border-radius-md: min(var(--ds-border-radius-base),var(--ds-border-radius-scale)*2);
411
- --ds-border-radius-lg: min(var(--ds-border-radius-base)*2,var(--ds-border-radius-scale)*3);
412
- --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);
413
517
  --ds-border-radius-default: var(--ds-border-radius-base);
414
518
  --ds-border-radius-full: 624.9375rem;
415
519
  --ds-border-width-default: 1px;
@@ -420,50 +524,6 @@ design-tokens: v1.1.0
420
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);
421
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);
422
526
  --ds-opacity-disabled: 30%;
423
-
424
- --ds-size-0: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *0);
425
- --ds-size-1: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *1);
426
- --ds-size-2: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *2);
427
- --ds-size-3: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *3);
428
- --ds-size-4: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *4);
429
- --ds-size-5: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *5);
430
- --ds-size-6: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *6);
431
- --ds-size-7: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *7);
432
- --ds-size-8: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *8);
433
- --ds-size-9: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *9);
434
- --ds-size-10: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *10);
435
- --ds-size-11: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *11);
436
- --ds-size-12: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *12);
437
- --ds-size-13: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *13);
438
- --ds-size-14: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *14);
439
- --ds-size-15: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *15);
440
- --ds-size-18: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *18);
441
- --ds-size-22: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *22);
442
- --ds-size-26: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *26);
443
- --ds-size-30: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *30);
444
-
445
- @supports (width: round(down, .1em, 1px)) {
446
- --ds-size-0: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *0), 1px);
447
- --ds-size-1: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *1), 1px);
448
- --ds-size-2: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *2), 1px);
449
- --ds-size-3: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *3), 1px);
450
- --ds-size-4: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *4), 1px);
451
- --ds-size-5: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *5), 1px);
452
- --ds-size-6: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *6), 1px);
453
- --ds-size-7: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *7), 1px);
454
- --ds-size-8: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *8), 1px);
455
- --ds-size-9: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *9), 1px);
456
- --ds-size-10: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *10), 1px);
457
- --ds-size-11: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *11), 1px);
458
- --ds-size-12: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *12), 1px);
459
- --ds-size-13: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *13), 1px);
460
- --ds-size-14: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *14), 1px);
461
- --ds-size-15: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *15), 1px);
462
- --ds-size-18: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *18), 1px);
463
- --ds-size-22: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *22), 1px);
464
- --ds-size-26: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *26), 1px);
465
- --ds-size-30: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em *30), 1px);
466
- }
467
527
  }
468
528
 
469
529
  }
@@ -534,54 +594,38 @@ design-tokens: v1.1.0
534
594
  --ds-color-support2-base-active: #534b3f;
535
595
  --ds-color-support2-base-contrast-subtle: #bcbbb9;
536
596
  --ds-color-support2-base-contrast-default: #ffffff;
537
- --ds-color-success-background-default: #0d1b0d;
538
- --ds-color-success-background-tinted: #112411;
539
- --ds-color-success-surface-default: #152d15;
540
- --ds-color-success-surface-tinted: #183418;
541
- --ds-color-success-surface-hover: #1c3c1c;
542
- --ds-color-success-surface-active: #244c24;
543
- --ds-color-success-border-subtle: #2b5a2b;
544
- --ds-color-success-border-default: #528f52;
545
- --ds-color-success-border-strong: #89b289;
546
- --ds-color-success-text-subtle: #89b289;
547
- --ds-color-success-text-default: #e6efe6;
548
- --ds-color-success-base-default: #138d24;
549
- --ds-color-success-base-hover: #3ca14b;
550
- --ds-color-success-base-active: #66b571;
551
- --ds-color-success-base-contrast-subtle: #010501;
552
- --ds-color-success-base-contrast-default: #000000;
553
- --ds-color-danger-background-default: #2a100e;
554
- --ds-color-danger-background-tinted: #371512;
555
- --ds-color-danger-surface-default: #451b17;
556
- --ds-color-danger-surface-tinted: #4f1f1b;
557
- --ds-color-danger-surface-hover: #5c241f;
558
- --ds-color-danger-surface-active: #722d27;
559
- --ds-color-danger-border-subtle: #88352e;
560
- --ds-color-danger-border-default: #bc6b64;
561
- --ds-color-danger-border-strong: #d19a96;
562
- --ds-color-danger-text-subtle: #d19a96;
563
- --ds-color-danger-text-default: #f5eae9;
564
- --ds-color-danger-base-default: #d76e6e;
565
- --ds-color-danger-base-hover: #df8b8b;
566
- --ds-color-danger-base-active: #e7a8a8;
567
- --ds-color-danger-base-contrast-subtle: #271414;
568
- --ds-color-danger-base-contrast-default: #000000;
569
- --ds-color-info-background-default: #0d1925;
570
- --ds-color-info-background-tinted: #112130;
571
- --ds-color-info-surface-default: #15293d;
572
- --ds-color-info-surface-tinted: #182f46;
573
- --ds-color-info-surface-hover: #1c3751;
574
- --ds-color-info-surface-active: #234566;
575
- --ds-color-info-border-subtle: #2a537a;
576
- --ds-color-info-border-default: #5585b4;
577
- --ds-color-info-border-strong: #8aabcb;
578
- --ds-color-info-text-subtle: #8aabcb;
579
- --ds-color-info-text-default: #e6edf4;
580
- --ds-color-info-base-default: #2d85c9;
581
- --ds-color-info-base-hover: #519ad2;
582
- --ds-color-info-base-active: #77b0dc;
583
- --ds-color-info-base-contrast-subtle: #050e15;
584
- --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;
585
629
  --ds-color-warning-background-default: #1e160d;
586
630
  --ds-color-warning-background-tinted: #281e11;
587
631
  --ds-color-warning-surface-default: #322616;
@@ -598,6 +642,22 @@ design-tokens: v1.1.0
598
642
  --ds-color-warning-base-active: #946211;
599
643
  --ds-color-warning-base-contrast-subtle: #e6e2d9;
600
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;
601
661
  --ds-color-focus-inner: #181818;
602
662
  --ds-color-focus-outer: #ececec;
603
663
  --ds-link-color-visited: #b49acd;
@@ -671,54 +731,38 @@ design-tokens: v1.1.0
671
731
  --ds-color-support2-base-active: #534b3f;
672
732
  --ds-color-support2-base-contrast-subtle: #bcbbb9;
673
733
  --ds-color-support2-base-contrast-default: #ffffff;
674
- --ds-color-success-background-default: #0d1b0d;
675
- --ds-color-success-background-tinted: #112411;
676
- --ds-color-success-surface-default: #152d15;
677
- --ds-color-success-surface-tinted: #183418;
678
- --ds-color-success-surface-hover: #1c3c1c;
679
- --ds-color-success-surface-active: #244c24;
680
- --ds-color-success-border-subtle: #2b5a2b;
681
- --ds-color-success-border-default: #528f52;
682
- --ds-color-success-border-strong: #89b289;
683
- --ds-color-success-text-subtle: #89b289;
684
- --ds-color-success-text-default: #e6efe6;
685
- --ds-color-success-base-default: #138d24;
686
- --ds-color-success-base-hover: #3ca14b;
687
- --ds-color-success-base-active: #66b571;
688
- --ds-color-success-base-contrast-subtle: #010501;
689
- --ds-color-success-base-contrast-default: #000000;
690
- --ds-color-danger-background-default: #2a100e;
691
- --ds-color-danger-background-tinted: #371512;
692
- --ds-color-danger-surface-default: #451b17;
693
- --ds-color-danger-surface-tinted: #4f1f1b;
694
- --ds-color-danger-surface-hover: #5c241f;
695
- --ds-color-danger-surface-active: #722d27;
696
- --ds-color-danger-border-subtle: #88352e;
697
- --ds-color-danger-border-default: #bc6b64;
698
- --ds-color-danger-border-strong: #d19a96;
699
- --ds-color-danger-text-subtle: #d19a96;
700
- --ds-color-danger-text-default: #f5eae9;
701
- --ds-color-danger-base-default: #d76e6e;
702
- --ds-color-danger-base-hover: #df8b8b;
703
- --ds-color-danger-base-active: #e7a8a8;
704
- --ds-color-danger-base-contrast-subtle: #271414;
705
- --ds-color-danger-base-contrast-default: #000000;
706
- --ds-color-info-background-default: #0d1925;
707
- --ds-color-info-background-tinted: #112130;
708
- --ds-color-info-surface-default: #15293d;
709
- --ds-color-info-surface-tinted: #182f46;
710
- --ds-color-info-surface-hover: #1c3751;
711
- --ds-color-info-surface-active: #234566;
712
- --ds-color-info-border-subtle: #2a537a;
713
- --ds-color-info-border-default: #5585b4;
714
- --ds-color-info-border-strong: #8aabcb;
715
- --ds-color-info-text-subtle: #8aabcb;
716
- --ds-color-info-text-default: #e6edf4;
717
- --ds-color-info-base-default: #2d85c9;
718
- --ds-color-info-base-hover: #519ad2;
719
- --ds-color-info-base-active: #77b0dc;
720
- --ds-color-info-base-contrast-subtle: #050e15;
721
- --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;
722
766
  --ds-color-warning-background-default: #1e160d;
723
767
  --ds-color-warning-background-tinted: #281e11;
724
768
  --ds-color-warning-surface-default: #322616;
@@ -735,6 +779,22 @@ design-tokens: v1.1.0
735
779
  --ds-color-warning-base-active: #946211;
736
780
  --ds-color-warning-base-contrast-subtle: #e6e2d9;
737
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;
738
798
  --ds-color-focus-inner: #181818;
739
799
  --ds-color-focus-outer: #ececec;
740
800
  --ds-link-color-visited: #b49acd;
@@ -751,16 +811,6 @@ design-tokens: v1.1.0
751
811
  --ds-line-height-sm: 1.3;
752
812
  --ds-line-height-md: 1.5;
753
813
  --ds-line-height-lg: 1.7;
754
- --ds-font-size-1: 0.75rem;
755
- --ds-font-size-2: 0.875rem;
756
- --ds-font-size-3: 1rem;
757
- --ds-font-size-4: 1.125rem;
758
- --ds-font-size-5: 1.3125rem;
759
- --ds-font-size-6: 1.5rem;
760
- --ds-font-size-7: 1.875rem;
761
- --ds-font-size-8: 2.25rem;
762
- --ds-font-size-9: 3rem;
763
- --ds-font-size-10: 3.75rem;
764
814
  --ds-letter-spacing-1: -0.01em;
765
815
  --ds-letter-spacing-2: -0.005em;
766
816
  --ds-letter-spacing-3: -0.0025em;
@@ -776,91 +826,69 @@ design-tokens: v1.1.0
776
826
  --ds-font-weight-regular: 400;
777
827
  --ds-heading-2xl-font-weight: 500;
778
828
  --ds-heading-2xl-line-height: 1.3;
779
- --ds-heading-2xl-font-size: 3.75rem;
780
829
  --ds-heading-2xl-letter-spacing: 0em;
781
830
  --ds-heading-xl-font-weight: 500;
782
831
  --ds-heading-xl-line-height: 1.3;
783
- --ds-heading-xl-font-size: 3rem;
784
832
  --ds-heading-xl-letter-spacing: 0em;
785
833
  --ds-heading-lg-font-weight: 500;
786
834
  --ds-heading-lg-line-height: 1.3;
787
- --ds-heading-lg-font-size: 2.25rem;
788
835
  --ds-heading-lg-letter-spacing: 0em;
789
836
  --ds-heading-md-font-weight: 500;
790
837
  --ds-heading-md-line-height: 1.3;
791
- --ds-heading-md-font-size: 1.875rem;
792
838
  --ds-heading-md-letter-spacing: 0em;
793
839
  --ds-heading-sm-font-weight: 500;
794
840
  --ds-heading-sm-line-height: 1.3;
795
- --ds-heading-sm-font-size: 1.5rem;
796
841
  --ds-heading-sm-letter-spacing: 0em;
797
842
  --ds-heading-xs-font-weight: 500;
798
843
  --ds-heading-xs-line-height: 1.3;
799
- --ds-heading-xs-font-size: 1.3125rem;
800
844
  --ds-heading-xs-letter-spacing: 0em;
801
845
  --ds-heading-2xs-font-weight: 500;
802
846
  --ds-heading-2xs-line-height: 1.3;
803
- --ds-heading-2xs-font-size: 1.125rem;
804
847
  --ds-heading-2xs-letter-spacing: 0em;
805
848
  --ds-body-xl-font-weight: 400;
806
849
  --ds-body-xl-line-height: 1.5;
807
- --ds-body-xl-font-size: 1.5rem;
808
850
  --ds-body-xl-letter-spacing: 0em;
809
851
  --ds-body-lg-font-weight: 400;
810
852
  --ds-body-lg-line-height: 1.5;
811
- --ds-body-lg-font-size: 1.3125rem;
812
853
  --ds-body-lg-letter-spacing: 0em;
813
854
  --ds-body-md-font-weight: 400;
814
855
  --ds-body-md-line-height: 1.5;
815
- --ds-body-md-font-size: 1.125rem;
816
856
  --ds-body-md-letter-spacing: 0em;
817
857
  --ds-body-sm-font-weight: 400;
818
858
  --ds-body-sm-line-height: 1.5;
819
- --ds-body-sm-font-size: 1rem;
820
859
  --ds-body-sm-letter-spacing: 0em;
821
860
  --ds-body-xs-font-weight: 400;
822
861
  --ds-body-xs-line-height: 1.5;
823
- --ds-body-xs-font-size: 0.875rem;
824
862
  --ds-body-xs-letter-spacing: 0em;
825
863
  --ds-body-short-xl-font-weight: 400;
826
864
  --ds-body-short-xl-line-height: 1.3;
827
- --ds-body-short-xl-font-size: 1.5rem;
828
865
  --ds-body-short-xl-letter-spacing: 0em;
829
866
  --ds-body-short-lg-font-weight: 400;
830
867
  --ds-body-short-lg-line-height: 1.3;
831
- --ds-body-short-lg-font-size: 1.3125rem;
832
868
  --ds-body-short-lg-letter-spacing: 0em;
833
869
  --ds-body-short-md-font-weight: 400;
834
870
  --ds-body-short-md-line-height: 1.3;
835
- --ds-body-short-md-font-size: 1.125rem;
836
871
  --ds-body-short-md-letter-spacing: 0em;
837
872
  --ds-body-short-sm-font-weight: 400;
838
873
  --ds-body-short-sm-line-height: 1.3;
839
- --ds-body-short-sm-font-size: 1rem;
840
874
  --ds-body-short-sm-letter-spacing: 0em;
841
875
  --ds-body-short-xs-font-weight: 400;
842
876
  --ds-body-short-xs-line-height: 1.3;
843
- --ds-body-short-xs-font-size: 0.875rem;
844
877
  --ds-body-short-xs-letter-spacing: 0em;
845
878
  --ds-body-long-xl-font-weight: 400;
846
879
  --ds-body-long-xl-line-height: 1.7;
847
- --ds-body-long-xl-font-size: 1.5rem;
848
880
  --ds-body-long-xl-letter-spacing: 0em;
849
881
  --ds-body-long-lg-font-weight: 400;
850
882
  --ds-body-long-lg-line-height: 1.7;
851
- --ds-body-long-lg-font-size: 1.3125rem;
852
883
  --ds-body-long-lg-letter-spacing: 0em;
853
884
  --ds-body-long-md-font-weight: 400;
854
885
  --ds-body-long-md-line-height: 1.7;
855
- --ds-body-long-md-font-size: 1.125rem;
856
886
  --ds-body-long-md-letter-spacing: 0em;
857
887
  --ds-body-long-sm-font-weight: 400;
858
888
  --ds-body-long-sm-line-height: 1.7;
859
- --ds-body-long-sm-font-size: 1rem;
860
889
  --ds-body-long-sm-letter-spacing: 0em;
861
890
  --ds-body-long-xs-font-weight: 400;
862
891
  --ds-body-long-xs-line-height: 1.7;
863
- --ds-body-long-xs-font-size: 0.875rem;
864
892
  --ds-body-long-xs-letter-spacing: 0em;
865
893
  }
866
894
  }
package/dist/types.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ /* build: v1.13.3 */
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,33 @@
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.3",
12
+ "version": "1.0.0-beta.31",
10
13
  "type": "module",
11
14
  "exports": {
12
15
  ".": {
13
- "types": "./dist/colors.d.ts",
14
- "default": "./dist/udir.css"
15
- }
16
+ "types": "./dist/types.d.ts",
17
+ "default": "./dist/index.css"
18
+ },
19
+ "./datavis.css": "./dist/datavis.css"
16
20
  },
17
21
  "files": [
18
22
  "./dist"
19
23
  ],
20
24
  "dependencies": {
21
- "@digdir/designsystemet-react": "1.1.4"
25
+ "@digdir/designsystemet-types": "1.13.3"
22
26
  },
23
27
  "devDependencies": {
24
- "rimraf": "^6.0.1",
28
+ "rimraf": "^6.1.3",
25
29
  "@internal/build-tools": "0.0.0",
26
30
  "@udir-design/tokens": "0.0.0"
27
31
  },
28
32
  "scripts": {
29
- "copy-css": "cp ../../design-tokens/dist/*.* ./dist/",
30
- "postprocess-css": "../../@internal/build-tools/bin/postprocess-css-colors.ts ./dist/udir.css",
33
+ "copy-css": "cp ../../design-tokens/dist/*.* ./dist/ && mv ./dist/udir.css ./dist/index.css && rm ./dist/colors.d.ts",
34
+ "postprocess-css": "../../@internal/build-tools/bin/postprocess-css-colors.ts ./dist/index.css",
31
35
  "clean": "rimraf ./dist && mkdir ./dist",
32
36
  "build": "pnpm clean && pnpm copy-css && pnpm postprocess-css"
33
37
  }
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
- }