@altinn/altinn-components 0.24.8 → 0.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -10,232 +10,152 @@
10
10
  :root,
11
11
  [data-color-scheme="light"] {
12
12
  --ds-color-company-background-default: #ffffff;
13
- --ds-color-company-background-subtle: #f3f3f6;
14
- --ds-color-company-surface-default: #e0e2e7;
15
- --ds-color-company-surface-hover: #cfd1da;
16
- --ds-color-company-surface-active: #bfc2cd;
13
+ --ds-color-company-background-tinted: #f3f3f6;
14
+ --ds-color-company-surface-default: #ffffff;
15
+ --ds-color-company-surface-tinted: #e7e8ec;
16
+ --ds-color-company-surface-hover: #d8dae1;
17
+ --ds-color-company-surface-active: #c7cad3;
17
18
  --ds-color-company-border-subtle: #b8bbc8;
18
- --ds-color-company-border-default: #777e95;
19
- --ds-color-company-border-strong: #58607d;
19
+ --ds-color-company-border-default: #717891;
20
+ --ds-color-company-border-strong: #545c7a;
21
+ --ds-color-company-text-subtle: #545c7a;
22
+ --ds-color-company-text-default: #1e2950;
20
23
  --ds-color-company-base-default: #111d46;
21
24
  --ds-color-company-base-hover: #242f55;
22
25
  --ds-color-company-base-active: #384264;
23
- --ds-color-company-text-subtle: #58607d;
24
- --ds-color-company-text-default: #1e2950;
25
- --ds-color-company-contrast-default: #ffffff;
26
- --ds-color-company-contrast-subtle: #adb1bf;
26
+ --ds-color-company-base-contrast-subtle: #adb1bf;
27
+ --ds-color-company-base-contrast-default: #ffffff;
27
28
  --ds-color-person-background-default: #ffffff;
28
- --ds-color-person-background-subtle: #f1f4f2;
29
- --ds-color-person-surface-default: #dbe4df;
30
- --ds-color-person-surface-hover: #c6d5cd;
31
- --ds-color-person-surface-active: #b3c7bc;
29
+ --ds-color-person-background-tinted: #f1f4f2;
30
+ --ds-color-person-surface-default: #ffffff;
31
+ --ds-color-person-surface-tinted: #e3eae6;
32
+ --ds-color-person-surface-hover: #d1ddd6;
33
+ --ds-color-person-surface-active: #bdcec5;
32
34
  --ds-color-person-border-subtle: #abc1b5;
33
- --ds-color-person-border-default: #5e8771;
34
- --ds-color-person-border-strong: #386b50;
35
+ --ds-color-person-border-default: #56826b;
36
+ --ds-color-person-border-strong: #32674b;
37
+ --ds-color-person-text-subtle: #32674b;
38
+ --ds-color-person-text-default: #06331b;
35
39
  --ds-color-person-base-default: #084826;
36
40
  --ds-color-person-base-hover: #215a3c;
37
41
  --ds-color-person-base-active: #3b6e53;
38
- --ds-color-person-text-subtle: #386b50;
39
- --ds-color-person-text-default: #06331b;
40
- --ds-color-person-contrast-default: #ffffff;
41
- --ds-color-person-contrast-subtle: #cfdbd4;
42
+ --ds-color-person-base-contrast-subtle: #cfdbd4;
43
+ --ds-color-person-base-contrast-default: #ffffff;
42
44
  --ds-color-neutral-background-default: #ffffff;
43
- --ds-color-neutral-background-subtle: #f3f4f4;
44
- --ds-color-neutral-surface-default: #e0e2e4;
45
- --ds-color-neutral-surface-hover: #cfd2d5;
46
- --ds-color-neutral-surface-active: #bfc3c7;
45
+ --ds-color-neutral-background-tinted: #f3f4f4;
46
+ --ds-color-neutral-surface-default: #ffffff;
47
+ --ds-color-neutral-surface-tinted: #e7e9ea;
48
+ --ds-color-neutral-surface-hover: #d8dadd;
49
+ --ds-color-neutral-surface-active: #c7cacf;
47
50
  --ds-color-neutral-border-subtle: #b8bcc1;
48
- --ds-color-neutral-border-default: #777f89;
49
- --ds-color-neutral-border-strong: #59626f;
51
+ --ds-color-neutral-border-default: #717a84;
52
+ --ds-color-neutral-border-strong: #545e6b;
53
+ --ds-color-neutral-text-subtle: #545e6b;
54
+ --ds-color-neutral-text-default: #1f2c3d;
50
55
  --ds-color-neutral-base-default: #1e2b3c;
51
56
  --ds-color-neutral-base-hover: #313d4d;
52
57
  --ds-color-neutral-base-active: #444f5d;
53
- --ds-color-neutral-text-subtle: #59626f;
54
- --ds-color-neutral-text-default: #1f2c3d;
55
- --ds-color-neutral-contrast-default: #ffffff;
56
- --ds-color-neutral-contrast-subtle: #babec4;
58
+ --ds-color-neutral-base-contrast-subtle: #babec4;
59
+ --ds-color-neutral-base-contrast-default: #ffffff;
57
60
  --ds-color-article-background-default: #ffffff;
58
- --ds-color-article-background-subtle: #eef4fa;
59
- --ds-color-article-surface-default: #d3e4f3;
60
- --ds-color-article-surface-hover: #bad5ec;
61
- --ds-color-article-surface-active: #a3c6e6;
61
+ --ds-color-article-background-tinted: #eef4fa;
62
+ --ds-color-article-surface-default: #ffffff;
63
+ --ds-color-article-surface-tinted: #ddeaf6;
64
+ --ds-color-article-surface-hover: #c7ddf0;
65
+ --ds-color-article-surface-active: #afcee9;
62
66
  --ds-color-article-border-subtle: #99c0e3;
63
- --ds-color-article-border-default: #3582c8;
64
- --ds-color-article-border-strong: #0061b8;
67
+ --ds-color-article-border-default: #2a7cc5;
68
+ --ds-color-article-border-strong: #005db1;
69
+ --ds-color-article-text-subtle: #005db1;
70
+ --ds-color-article-text-default: #002c54;
65
71
  --ds-color-article-base-default: #0062ba;
66
72
  --ds-color-article-base-hover: #004f96;
67
73
  --ds-color-article-base-active: #003d75;
68
- --ds-color-article-text-subtle: #0061b8;
69
- --ds-color-article-text-default: #002c54;
70
- --ds-color-article-contrast-default: #ffffff;
71
- --ds-color-article-contrast-subtle: #dbe9f5;
74
+ --ds-color-article-base-contrast-subtle: #dbe9f5;
75
+ --ds-color-article-base-contrast-default: #ffffff;
72
76
  --ds-color-alert-background-default: #ffffff;
73
- --ds-color-alert-background-subtle: #fdf1f2;
74
- --ds-color-alert-surface-default: #fadbdf;
75
- --ds-color-alert-surface-hover: #f6c5cd;
76
- --ds-color-alert-surface-active: #f3b1bb;
77
- --ds-color-alert-border-subtle: #f2a8b3;
78
- --ds-color-alert-border-default: #e3425b;
79
- --ds-color-alert-border-strong: #b9263c;
80
- --ds-color-alert-base-default: #e02f4a;
81
- --ds-color-alert-base-hover: #e75c71;
82
- --ds-color-alert-base-active: #ec7f90;
83
- --ds-color-alert-text-subtle: #b9263c;
84
- --ds-color-alert-text-default: #55121c;
85
- --ds-color-alert-contrast-default: #000000;
86
- --ds-color-alert-contrast-subtle: #000000;
77
+ --ds-color-alert-background-tinted: #fcf1f3;
78
+ --ds-color-alert-surface-default: #ffffff;
79
+ --ds-color-alert-surface-tinted: #fae3e6;
80
+ --ds-color-alert-surface-hover: #f6d1d6;
81
+ --ds-color-alert-surface-active: #f3bcc4;
82
+ --ds-color-alert-border-subtle: #efa9b4;
83
+ --ds-color-alert-border-default: #db3d54;
84
+ --ds-color-alert-border-strong: #b2243a;
85
+ --ds-color-alert-text-subtle: #b2243a;
86
+ --ds-color-alert-text-default: #55111c;
87
+ --ds-color-alert-base-default: #d82c46;
88
+ --ds-color-alert-base-hover: #b3243a;
89
+ --ds-color-alert-base-active: #901d2f;
90
+ --ds-color-alert-base-contrast-subtle: #fef8f9;
91
+ --ds-color-alert-base-contrast-default: #ffffff;
87
92
  --ds-color-success-background-default: #ffffff;
88
- --ds-color-success-background-subtle: #ecf6ee;
89
- --ds-color-success-surface-default: #d0e8d3;
90
- --ds-color-success-surface-hover: #b4dbba;
91
- --ds-color-success-surface-active: #9bcfa2;
93
+ --ds-color-success-background-tinted: #ecf6ee;
94
+ --ds-color-success-surface-default: #ffffff;
95
+ --ds-color-success-surface-tinted: #daeddd;
96
+ --ds-color-success-surface-hover: #c3e2c7;
97
+ --ds-color-success-surface-active: #a8d5ae;
92
98
  --ds-color-success-border-subtle: #8fc997;
93
- --ds-color-success-border-default: #1d922d;
94
- --ds-color-success-border-strong: #057114;
99
+ --ds-color-success-border-default: #108c22;
100
+ --ds-color-success-border-strong: #056d13;
101
+ --ds-color-success-text-subtle: #056d13;
102
+ --ds-color-success-text-default: #023409;
95
103
  --ds-color-success-base-default: #068718;
96
104
  --ds-color-success-base-hover: #057014;
97
105
  --ds-color-success-base-active: #045a10;
98
- --ds-color-success-text-subtle: #057114;
99
- --ds-color-success-text-default: #023409;
100
- --ds-color-success-contrast-default: #ffffff;
101
- --ds-color-success-contrast-subtle: #fafdfb;
106
+ --ds-color-success-base-contrast-subtle: #fafdfb;
107
+ --ds-color-success-base-contrast-default: #ffffff;
102
108
  --ds-color-danger-background-default: #ffffff;
103
- --ds-color-danger-background-subtle: #fbf1f1;
104
- --ds-color-danger-surface-default: #f5dcdc;
105
- --ds-color-danger-surface-hover: #f0c8c8;
106
- --ds-color-danger-surface-active: #ebb5b5;
109
+ --ds-color-danger-background-tinted: #fbf1f1;
110
+ --ds-color-danger-surface-default: #ffffff;
111
+ --ds-color-danger-surface-tinted: #f8e4e4;
112
+ --ds-color-danger-surface-hover: #f3d2d2;
113
+ --ds-color-danger-surface-active: #edbfbf;
107
114
  --ds-color-danger-border-subtle: #e8adad;
108
- --ds-color-danger-border-default: #d15757;
109
- --ds-color-danger-border-strong: #bf1b1b;
110
- --ds-color-danger-base-default: #bf1b1b;
115
+ --ds-color-danger-border-default: #ce4d4d;
116
+ --ds-color-danger-border-strong: #b81a1a;
117
+ --ds-color-danger-text-subtle: #b81a1a;
118
+ --ds-color-danger-text-default: #590d0d;
119
+ --ds-color-danger-base-default: #c01b1b;
111
120
  --ds-color-danger-base-hover: #9b1616;
112
121
  --ds-color-danger-base-active: #791111;
113
- --ds-color-danger-text-subtle: #bf1b1b;
114
- --ds-color-danger-text-default: #590d0d;
115
- --ds-color-danger-contrast-default: #ffffff;
116
- --ds-color-danger-contrast-subtle: #f7e1e1;
122
+ --ds-color-danger-base-contrast-subtle: #f7e1e1;
123
+ --ds-color-danger-base-contrast-default: #ffffff;
117
124
  --ds-color-info-background-default: #ffffff;
118
- --ds-color-info-background-subtle: #edf5fa;
119
- --ds-color-info-surface-default: #d2e5f3;
120
- --ds-color-info-surface-hover: #b7d5ed;
121
- --ds-color-info-surface-active: #9fc7e6;
125
+ --ds-color-info-background-tinted: #edf5fa;
126
+ --ds-color-info-surface-default: #ffffff;
127
+ --ds-color-info-surface-tinted: #dcebf6;
128
+ --ds-color-info-surface-hover: #c5ddf0;
129
+ --ds-color-info-surface-active: #abcfe9;
122
130
  --ds-color-info-border-subtle: #94c1e3;
123
- --ds-color-info-border-default: #2a83c8;
124
- --ds-color-info-border-strong: #0964a9;
125
- --ds-color-info-base-default: #0a71bf;
131
+ --ds-color-info-border-default: #1f7dc5;
132
+ --ds-color-info-border-strong: #0860a3;
133
+ --ds-color-info-text-subtle: #0860a3;
134
+ --ds-color-info-text-default: #042d4d;
135
+ --ds-color-info-base-default: #0a71c0;
126
136
  --ds-color-info-base-hover: #085d9f;
127
137
  --ds-color-info-base-active: #074a7e;
128
- --ds-color-info-text-subtle: #0964a9;
129
- --ds-color-info-text-default: #042d4d;
130
- --ds-color-info-contrast-default: #ffffff;
131
- --ds-color-info-contrast-subtle: #eff6fb;
138
+ --ds-color-info-base-contrast-subtle: #eff6fb;
139
+ --ds-color-info-base-contrast-default: #ffffff;
132
140
  --ds-color-warning-background-default: #ffffff;
133
- --ds-color-warning-background-subtle: #f9f4e1;
134
- --ds-color-warning-surface-default: #efe2b2;
135
- --ds-color-warning-surface-hover: #e6d184;
136
- --ds-color-warning-surface-active: #ddc159;
137
- --ds-color-warning-border-subtle: #d9b945;
138
- --ds-color-warning-border-default: #957c21;
139
- --ds-color-warning-border-strong: #736019;
140
- --ds-color-warning-base-default: #b7581d;
141
- --ds-color-warning-base-hover: #994918;
142
- --ds-color-warning-base-active: #7b3b13;
143
- --ds-color-warning-text-subtle: #9b4a18;
144
- --ds-color-warning-text-default: #46220b;
145
- --ds-color-warning-contrast-default: #ffffff;
146
- --ds-color-warning-contrast-subtle: #fdf9f8;
141
+ --ds-color-warning-background-tinted: #fcf2e2;
142
+ --ds-color-warning-surface-default: #ffffff;
143
+ --ds-color-warning-surface-tinted: #fae6c6;
144
+ --ds-color-warning-surface-hover: #f6d5a0;
145
+ --ds-color-warning-surface-active: #f2c275;
146
+ --ds-color-warning-border-subtle: #eeb04c;
147
+ --ds-color-warning-border-default: #a56d13;
148
+ --ds-color-warning-border-strong: #80540f;
149
+ --ds-color-warning-text-subtle: #80540f;
150
+ --ds-color-warning-text-default: #3c2807;
151
+ --ds-color-warning-base-default: #ea9b1b;
152
+ --ds-color-warning-base-hover: #cd8818;
153
+ --ds-color-warning-base-active: #b27614;
154
+ --ds-color-warning-base-contrast-subtle: #271a04;
155
+ --ds-color-warning-base-contrast-default: #000000;
147
156
  --ds-color-focus-inner: #ffffff;
148
- --ds-color-focus-outer: #1e2950;
149
- --ds-global-blue-1: #ffffff;
150
- --ds-global-blue-2: #edf5fa;
151
- --ds-global-blue-3: #d2e5f3;
152
- --ds-global-blue-4: #b7d5ed;
153
- --ds-global-blue-5: #9fc7e6;
154
- --ds-global-blue-6: #94c1e3;
155
- --ds-global-blue-7: #2a83c8;
156
- --ds-global-blue-8: #0964a9;
157
- --ds-global-blue-9: #0a71bf;
158
- --ds-global-blue-10: #085d9f;
159
- --ds-global-blue-11: #074a7e;
160
- --ds-global-blue-12: #0964a9;
161
- --ds-global-blue-13: #042d4d;
162
- --ds-global-blue-contrast-1: #ffffff;
163
- --ds-global-blue-contrast-2: #eff6fb;
164
- --ds-global-green-1: #ffffff;
165
- --ds-global-green-2: #ecf6ee;
166
- --ds-global-green-3: #d0e8d3;
167
- --ds-global-green-4: #b4dbba;
168
- --ds-global-green-5: #9bcfa2;
169
- --ds-global-green-6: #8fc997;
170
- --ds-global-green-7: #1d922d;
171
- --ds-global-green-8: #057114;
172
- --ds-global-green-9: #068718;
173
- --ds-global-green-10: #057014;
174
- --ds-global-green-11: #045a10;
175
- --ds-global-green-12: #057114;
176
- --ds-global-green-13: #023409;
177
- --ds-global-green-contrast-1: #ffffff;
178
- --ds-global-green-contrast-2: #fafdfb;
179
- --ds-global-orange-1: #ffffff;
180
- --ds-global-orange-2: #faf2ee;
181
- --ds-global-orange-3: #f1dfd3;
182
- --ds-global-orange-4: #e9ccba;
183
- --ds-global-orange-5: #e2baa2;
184
- --ds-global-orange-6: #dfb398;
185
- --ds-global-orange-7: #bf6732;
186
- --ds-global-orange-8: #9b4a18;
187
- --ds-global-orange-9: #b7581d;
188
- --ds-global-orange-10: #994918;
189
- --ds-global-orange-11: #7b3b13;
190
- --ds-global-orange-12: #9b4a18;
191
- --ds-global-orange-13: #46220b;
192
- --ds-global-orange-contrast-1: #ffffff;
193
- --ds-global-orange-contrast-2: #fdf9f8;
194
- --ds-global-purple-1: #ffffff;
195
- --ds-global-purple-2: #f6f2f9;
196
- --ds-global-purple-3: #e7dfef;
197
- --ds-global-purple-4: #d9cde6;
198
- --ds-global-purple-5: #cdbcdd;
199
- --ds-global-purple-6: #c7b4da;
200
- --ds-global-purple-7: #936fb7;
201
- --ds-global-purple-8: #794ca6;
202
- --ds-global-purple-9: #663299;
203
- --ds-global-purple-10: #4f2776;
204
- --ds-global-purple-11: #371b53;
205
- --ds-global-purple-12: #794ca6;
206
- --ds-global-purple-13: #3a1d57;
207
- --ds-global-purple-contrast-1: #ffffff;
208
- --ds-global-purple-contrast-2: #eee8f3;
209
- --ds-global-red-1: #ffffff;
210
- --ds-global-red-2: #fbf1f1;
211
- --ds-global-red-3: #f5dcdc;
212
- --ds-global-red-4: #f0c8c8;
213
- --ds-global-red-5: #ebb5b5;
214
- --ds-global-red-6: #e8adad;
215
- --ds-global-red-7: #d15757;
216
- --ds-global-red-8: #bf1b1b;
217
- --ds-global-red-9: #bf1b1b;
218
- --ds-global-red-10: #9b1616;
219
- --ds-global-red-11: #791111;
220
- --ds-global-red-12: #bf1b1b;
221
- --ds-global-red-13: #590d0d;
222
- --ds-global-red-contrast-1: #ffffff;
223
- --ds-global-red-contrast-2: #f7e1e1;
224
- --ds-global-yellow-1: #ffffff;
225
- --ds-global-yellow-2: #f9f4e1;
226
- --ds-global-yellow-3: #efe2b2;
227
- --ds-global-yellow-4: #e6d184;
228
- --ds-global-yellow-5: #ddc159;
229
- --ds-global-yellow-6: #d9b945;
230
- --ds-global-yellow-7: #957c21;
231
- --ds-global-yellow-8: #736019;
232
- --ds-global-yellow-9: #d4b12f;
233
- --ds-global-yellow-10: #bb9c2a;
234
- --ds-global-yellow-11: #a38824;
235
- --ds-global-yellow-12: #736019;
236
- --ds-global-yellow-13: #332b0b;
237
- --ds-global-yellow-contrast-1: #000000;
238
- --ds-global-yellow-contrast-2: #282209;
157
+ --ds-color-focus-outer: #1f2c3d;
158
+ --ds-link-color-visited: #663299;
239
159
 
240
160
  color-scheme: light;
241
161
  }
@@ -243,232 +163,152 @@
243
163
  @media (prefers-color-scheme: light) {
244
164
  [data-color-scheme="auto"] {
245
165
  --ds-color-company-background-default: #ffffff;
246
- --ds-color-company-background-subtle: #f3f3f6;
247
- --ds-color-company-surface-default: #e0e2e7;
248
- --ds-color-company-surface-hover: #cfd1da;
249
- --ds-color-company-surface-active: #bfc2cd;
166
+ --ds-color-company-background-tinted: #f3f3f6;
167
+ --ds-color-company-surface-default: #ffffff;
168
+ --ds-color-company-surface-tinted: #e7e8ec;
169
+ --ds-color-company-surface-hover: #d8dae1;
170
+ --ds-color-company-surface-active: #c7cad3;
250
171
  --ds-color-company-border-subtle: #b8bbc8;
251
- --ds-color-company-border-default: #777e95;
252
- --ds-color-company-border-strong: #58607d;
172
+ --ds-color-company-border-default: #717891;
173
+ --ds-color-company-border-strong: #545c7a;
174
+ --ds-color-company-text-subtle: #545c7a;
175
+ --ds-color-company-text-default: #1e2950;
253
176
  --ds-color-company-base-default: #111d46;
254
177
  --ds-color-company-base-hover: #242f55;
255
178
  --ds-color-company-base-active: #384264;
256
- --ds-color-company-text-subtle: #58607d;
257
- --ds-color-company-text-default: #1e2950;
258
- --ds-color-company-contrast-default: #ffffff;
259
- --ds-color-company-contrast-subtle: #adb1bf;
179
+ --ds-color-company-base-contrast-subtle: #adb1bf;
180
+ --ds-color-company-base-contrast-default: #ffffff;
260
181
  --ds-color-person-background-default: #ffffff;
261
- --ds-color-person-background-subtle: #f1f4f2;
262
- --ds-color-person-surface-default: #dbe4df;
263
- --ds-color-person-surface-hover: #c6d5cd;
264
- --ds-color-person-surface-active: #b3c7bc;
182
+ --ds-color-person-background-tinted: #f1f4f2;
183
+ --ds-color-person-surface-default: #ffffff;
184
+ --ds-color-person-surface-tinted: #e3eae6;
185
+ --ds-color-person-surface-hover: #d1ddd6;
186
+ --ds-color-person-surface-active: #bdcec5;
265
187
  --ds-color-person-border-subtle: #abc1b5;
266
- --ds-color-person-border-default: #5e8771;
267
- --ds-color-person-border-strong: #386b50;
188
+ --ds-color-person-border-default: #56826b;
189
+ --ds-color-person-border-strong: #32674b;
190
+ --ds-color-person-text-subtle: #32674b;
191
+ --ds-color-person-text-default: #06331b;
268
192
  --ds-color-person-base-default: #084826;
269
193
  --ds-color-person-base-hover: #215a3c;
270
194
  --ds-color-person-base-active: #3b6e53;
271
- --ds-color-person-text-subtle: #386b50;
272
- --ds-color-person-text-default: #06331b;
273
- --ds-color-person-contrast-default: #ffffff;
274
- --ds-color-person-contrast-subtle: #cfdbd4;
195
+ --ds-color-person-base-contrast-subtle: #cfdbd4;
196
+ --ds-color-person-base-contrast-default: #ffffff;
275
197
  --ds-color-neutral-background-default: #ffffff;
276
- --ds-color-neutral-background-subtle: #f3f4f4;
277
- --ds-color-neutral-surface-default: #e0e2e4;
278
- --ds-color-neutral-surface-hover: #cfd2d5;
279
- --ds-color-neutral-surface-active: #bfc3c7;
198
+ --ds-color-neutral-background-tinted: #f3f4f4;
199
+ --ds-color-neutral-surface-default: #ffffff;
200
+ --ds-color-neutral-surface-tinted: #e7e9ea;
201
+ --ds-color-neutral-surface-hover: #d8dadd;
202
+ --ds-color-neutral-surface-active: #c7cacf;
280
203
  --ds-color-neutral-border-subtle: #b8bcc1;
281
- --ds-color-neutral-border-default: #777f89;
282
- --ds-color-neutral-border-strong: #59626f;
204
+ --ds-color-neutral-border-default: #717a84;
205
+ --ds-color-neutral-border-strong: #545e6b;
206
+ --ds-color-neutral-text-subtle: #545e6b;
207
+ --ds-color-neutral-text-default: #1f2c3d;
283
208
  --ds-color-neutral-base-default: #1e2b3c;
284
209
  --ds-color-neutral-base-hover: #313d4d;
285
210
  --ds-color-neutral-base-active: #444f5d;
286
- --ds-color-neutral-text-subtle: #59626f;
287
- --ds-color-neutral-text-default: #1f2c3d;
288
- --ds-color-neutral-contrast-default: #ffffff;
289
- --ds-color-neutral-contrast-subtle: #babec4;
211
+ --ds-color-neutral-base-contrast-subtle: #babec4;
212
+ --ds-color-neutral-base-contrast-default: #ffffff;
290
213
  --ds-color-article-background-default: #ffffff;
291
- --ds-color-article-background-subtle: #eef4fa;
292
- --ds-color-article-surface-default: #d3e4f3;
293
- --ds-color-article-surface-hover: #bad5ec;
294
- --ds-color-article-surface-active: #a3c6e6;
214
+ --ds-color-article-background-tinted: #eef4fa;
215
+ --ds-color-article-surface-default: #ffffff;
216
+ --ds-color-article-surface-tinted: #ddeaf6;
217
+ --ds-color-article-surface-hover: #c7ddf0;
218
+ --ds-color-article-surface-active: #afcee9;
295
219
  --ds-color-article-border-subtle: #99c0e3;
296
- --ds-color-article-border-default: #3582c8;
297
- --ds-color-article-border-strong: #0061b8;
220
+ --ds-color-article-border-default: #2a7cc5;
221
+ --ds-color-article-border-strong: #005db1;
222
+ --ds-color-article-text-subtle: #005db1;
223
+ --ds-color-article-text-default: #002c54;
298
224
  --ds-color-article-base-default: #0062ba;
299
225
  --ds-color-article-base-hover: #004f96;
300
226
  --ds-color-article-base-active: #003d75;
301
- --ds-color-article-text-subtle: #0061b8;
302
- --ds-color-article-text-default: #002c54;
303
- --ds-color-article-contrast-default: #ffffff;
304
- --ds-color-article-contrast-subtle: #dbe9f5;
227
+ --ds-color-article-base-contrast-subtle: #dbe9f5;
228
+ --ds-color-article-base-contrast-default: #ffffff;
305
229
  --ds-color-alert-background-default: #ffffff;
306
- --ds-color-alert-background-subtle: #fdf1f2;
307
- --ds-color-alert-surface-default: #fadbdf;
308
- --ds-color-alert-surface-hover: #f6c5cd;
309
- --ds-color-alert-surface-active: #f3b1bb;
310
- --ds-color-alert-border-subtle: #f2a8b3;
311
- --ds-color-alert-border-default: #e3425b;
312
- --ds-color-alert-border-strong: #b9263c;
313
- --ds-color-alert-base-default: #e02f4a;
314
- --ds-color-alert-base-hover: #e75c71;
315
- --ds-color-alert-base-active: #ec7f90;
316
- --ds-color-alert-text-subtle: #b9263c;
317
- --ds-color-alert-text-default: #55121c;
318
- --ds-color-alert-contrast-default: #000000;
319
- --ds-color-alert-contrast-subtle: #000000;
230
+ --ds-color-alert-background-tinted: #fcf1f3;
231
+ --ds-color-alert-surface-default: #ffffff;
232
+ --ds-color-alert-surface-tinted: #fae3e6;
233
+ --ds-color-alert-surface-hover: #f6d1d6;
234
+ --ds-color-alert-surface-active: #f3bcc4;
235
+ --ds-color-alert-border-subtle: #efa9b4;
236
+ --ds-color-alert-border-default: #db3d54;
237
+ --ds-color-alert-border-strong: #b2243a;
238
+ --ds-color-alert-text-subtle: #b2243a;
239
+ --ds-color-alert-text-default: #55111c;
240
+ --ds-color-alert-base-default: #d82c46;
241
+ --ds-color-alert-base-hover: #b3243a;
242
+ --ds-color-alert-base-active: #901d2f;
243
+ --ds-color-alert-base-contrast-subtle: #fef8f9;
244
+ --ds-color-alert-base-contrast-default: #ffffff;
320
245
  --ds-color-success-background-default: #ffffff;
321
- --ds-color-success-background-subtle: #ecf6ee;
322
- --ds-color-success-surface-default: #d0e8d3;
323
- --ds-color-success-surface-hover: #b4dbba;
324
- --ds-color-success-surface-active: #9bcfa2;
246
+ --ds-color-success-background-tinted: #ecf6ee;
247
+ --ds-color-success-surface-default: #ffffff;
248
+ --ds-color-success-surface-tinted: #daeddd;
249
+ --ds-color-success-surface-hover: #c3e2c7;
250
+ --ds-color-success-surface-active: #a8d5ae;
325
251
  --ds-color-success-border-subtle: #8fc997;
326
- --ds-color-success-border-default: #1d922d;
327
- --ds-color-success-border-strong: #057114;
252
+ --ds-color-success-border-default: #108c22;
253
+ --ds-color-success-border-strong: #056d13;
254
+ --ds-color-success-text-subtle: #056d13;
255
+ --ds-color-success-text-default: #023409;
328
256
  --ds-color-success-base-default: #068718;
329
257
  --ds-color-success-base-hover: #057014;
330
258
  --ds-color-success-base-active: #045a10;
331
- --ds-color-success-text-subtle: #057114;
332
- --ds-color-success-text-default: #023409;
333
- --ds-color-success-contrast-default: #ffffff;
334
- --ds-color-success-contrast-subtle: #fafdfb;
259
+ --ds-color-success-base-contrast-subtle: #fafdfb;
260
+ --ds-color-success-base-contrast-default: #ffffff;
335
261
  --ds-color-danger-background-default: #ffffff;
336
- --ds-color-danger-background-subtle: #fbf1f1;
337
- --ds-color-danger-surface-default: #f5dcdc;
338
- --ds-color-danger-surface-hover: #f0c8c8;
339
- --ds-color-danger-surface-active: #ebb5b5;
262
+ --ds-color-danger-background-tinted: #fbf1f1;
263
+ --ds-color-danger-surface-default: #ffffff;
264
+ --ds-color-danger-surface-tinted: #f8e4e4;
265
+ --ds-color-danger-surface-hover: #f3d2d2;
266
+ --ds-color-danger-surface-active: #edbfbf;
340
267
  --ds-color-danger-border-subtle: #e8adad;
341
- --ds-color-danger-border-default: #d15757;
342
- --ds-color-danger-border-strong: #bf1b1b;
343
- --ds-color-danger-base-default: #bf1b1b;
268
+ --ds-color-danger-border-default: #ce4d4d;
269
+ --ds-color-danger-border-strong: #b81a1a;
270
+ --ds-color-danger-text-subtle: #b81a1a;
271
+ --ds-color-danger-text-default: #590d0d;
272
+ --ds-color-danger-base-default: #c01b1b;
344
273
  --ds-color-danger-base-hover: #9b1616;
345
274
  --ds-color-danger-base-active: #791111;
346
- --ds-color-danger-text-subtle: #bf1b1b;
347
- --ds-color-danger-text-default: #590d0d;
348
- --ds-color-danger-contrast-default: #ffffff;
349
- --ds-color-danger-contrast-subtle: #f7e1e1;
275
+ --ds-color-danger-base-contrast-subtle: #f7e1e1;
276
+ --ds-color-danger-base-contrast-default: #ffffff;
350
277
  --ds-color-info-background-default: #ffffff;
351
- --ds-color-info-background-subtle: #edf5fa;
352
- --ds-color-info-surface-default: #d2e5f3;
353
- --ds-color-info-surface-hover: #b7d5ed;
354
- --ds-color-info-surface-active: #9fc7e6;
278
+ --ds-color-info-background-tinted: #edf5fa;
279
+ --ds-color-info-surface-default: #ffffff;
280
+ --ds-color-info-surface-tinted: #dcebf6;
281
+ --ds-color-info-surface-hover: #c5ddf0;
282
+ --ds-color-info-surface-active: #abcfe9;
355
283
  --ds-color-info-border-subtle: #94c1e3;
356
- --ds-color-info-border-default: #2a83c8;
357
- --ds-color-info-border-strong: #0964a9;
358
- --ds-color-info-base-default: #0a71bf;
284
+ --ds-color-info-border-default: #1f7dc5;
285
+ --ds-color-info-border-strong: #0860a3;
286
+ --ds-color-info-text-subtle: #0860a3;
287
+ --ds-color-info-text-default: #042d4d;
288
+ --ds-color-info-base-default: #0a71c0;
359
289
  --ds-color-info-base-hover: #085d9f;
360
290
  --ds-color-info-base-active: #074a7e;
361
- --ds-color-info-text-subtle: #0964a9;
362
- --ds-color-info-text-default: #042d4d;
363
- --ds-color-info-contrast-default: #ffffff;
364
- --ds-color-info-contrast-subtle: #eff6fb;
291
+ --ds-color-info-base-contrast-subtle: #eff6fb;
292
+ --ds-color-info-base-contrast-default: #ffffff;
365
293
  --ds-color-warning-background-default: #ffffff;
366
- --ds-color-warning-background-subtle: #f9f4e1;
367
- --ds-color-warning-surface-default: #efe2b2;
368
- --ds-color-warning-surface-hover: #e6d184;
369
- --ds-color-warning-surface-active: #ddc159;
370
- --ds-color-warning-border-subtle: #d9b945;
371
- --ds-color-warning-border-default: #957c21;
372
- --ds-color-warning-border-strong: #736019;
373
- --ds-color-warning-base-default: #b7581d;
374
- --ds-color-warning-base-hover: #994918;
375
- --ds-color-warning-base-active: #7b3b13;
376
- --ds-color-warning-text-subtle: #9b4a18;
377
- --ds-color-warning-text-default: #46220b;
378
- --ds-color-warning-contrast-default: #ffffff;
379
- --ds-color-warning-contrast-subtle: #fdf9f8;
294
+ --ds-color-warning-background-tinted: #fcf2e2;
295
+ --ds-color-warning-surface-default: #ffffff;
296
+ --ds-color-warning-surface-tinted: #fae6c6;
297
+ --ds-color-warning-surface-hover: #f6d5a0;
298
+ --ds-color-warning-surface-active: #f2c275;
299
+ --ds-color-warning-border-subtle: #eeb04c;
300
+ --ds-color-warning-border-default: #a56d13;
301
+ --ds-color-warning-border-strong: #80540f;
302
+ --ds-color-warning-text-subtle: #80540f;
303
+ --ds-color-warning-text-default: #3c2807;
304
+ --ds-color-warning-base-default: #ea9b1b;
305
+ --ds-color-warning-base-hover: #cd8818;
306
+ --ds-color-warning-base-active: #b27614;
307
+ --ds-color-warning-base-contrast-subtle: #271a04;
308
+ --ds-color-warning-base-contrast-default: #000000;
380
309
  --ds-color-focus-inner: #ffffff;
381
- --ds-color-focus-outer: #1e2950;
382
- --ds-global-blue-1: #ffffff;
383
- --ds-global-blue-2: #edf5fa;
384
- --ds-global-blue-3: #d2e5f3;
385
- --ds-global-blue-4: #b7d5ed;
386
- --ds-global-blue-5: #9fc7e6;
387
- --ds-global-blue-6: #94c1e3;
388
- --ds-global-blue-7: #2a83c8;
389
- --ds-global-blue-8: #0964a9;
390
- --ds-global-blue-9: #0a71bf;
391
- --ds-global-blue-10: #085d9f;
392
- --ds-global-blue-11: #074a7e;
393
- --ds-global-blue-12: #0964a9;
394
- --ds-global-blue-13: #042d4d;
395
- --ds-global-blue-contrast-1: #ffffff;
396
- --ds-global-blue-contrast-2: #eff6fb;
397
- --ds-global-green-1: #ffffff;
398
- --ds-global-green-2: #ecf6ee;
399
- --ds-global-green-3: #d0e8d3;
400
- --ds-global-green-4: #b4dbba;
401
- --ds-global-green-5: #9bcfa2;
402
- --ds-global-green-6: #8fc997;
403
- --ds-global-green-7: #1d922d;
404
- --ds-global-green-8: #057114;
405
- --ds-global-green-9: #068718;
406
- --ds-global-green-10: #057014;
407
- --ds-global-green-11: #045a10;
408
- --ds-global-green-12: #057114;
409
- --ds-global-green-13: #023409;
410
- --ds-global-green-contrast-1: #ffffff;
411
- --ds-global-green-contrast-2: #fafdfb;
412
- --ds-global-orange-1: #ffffff;
413
- --ds-global-orange-2: #faf2ee;
414
- --ds-global-orange-3: #f1dfd3;
415
- --ds-global-orange-4: #e9ccba;
416
- --ds-global-orange-5: #e2baa2;
417
- --ds-global-orange-6: #dfb398;
418
- --ds-global-orange-7: #bf6732;
419
- --ds-global-orange-8: #9b4a18;
420
- --ds-global-orange-9: #b7581d;
421
- --ds-global-orange-10: #994918;
422
- --ds-global-orange-11: #7b3b13;
423
- --ds-global-orange-12: #9b4a18;
424
- --ds-global-orange-13: #46220b;
425
- --ds-global-orange-contrast-1: #ffffff;
426
- --ds-global-orange-contrast-2: #fdf9f8;
427
- --ds-global-purple-1: #ffffff;
428
- --ds-global-purple-2: #f6f2f9;
429
- --ds-global-purple-3: #e7dfef;
430
- --ds-global-purple-4: #d9cde6;
431
- --ds-global-purple-5: #cdbcdd;
432
- --ds-global-purple-6: #c7b4da;
433
- --ds-global-purple-7: #936fb7;
434
- --ds-global-purple-8: #794ca6;
435
- --ds-global-purple-9: #663299;
436
- --ds-global-purple-10: #4f2776;
437
- --ds-global-purple-11: #371b53;
438
- --ds-global-purple-12: #794ca6;
439
- --ds-global-purple-13: #3a1d57;
440
- --ds-global-purple-contrast-1: #ffffff;
441
- --ds-global-purple-contrast-2: #eee8f3;
442
- --ds-global-red-1: #ffffff;
443
- --ds-global-red-2: #fbf1f1;
444
- --ds-global-red-3: #f5dcdc;
445
- --ds-global-red-4: #f0c8c8;
446
- --ds-global-red-5: #ebb5b5;
447
- --ds-global-red-6: #e8adad;
448
- --ds-global-red-7: #d15757;
449
- --ds-global-red-8: #bf1b1b;
450
- --ds-global-red-9: #bf1b1b;
451
- --ds-global-red-10: #9b1616;
452
- --ds-global-red-11: #791111;
453
- --ds-global-red-12: #bf1b1b;
454
- --ds-global-red-13: #590d0d;
455
- --ds-global-red-contrast-1: #ffffff;
456
- --ds-global-red-contrast-2: #f7e1e1;
457
- --ds-global-yellow-1: #ffffff;
458
- --ds-global-yellow-2: #f9f4e1;
459
- --ds-global-yellow-3: #efe2b2;
460
- --ds-global-yellow-4: #e6d184;
461
- --ds-global-yellow-5: #ddc159;
462
- --ds-global-yellow-6: #d9b945;
463
- --ds-global-yellow-7: #957c21;
464
- --ds-global-yellow-8: #736019;
465
- --ds-global-yellow-9: #d4b12f;
466
- --ds-global-yellow-10: #bb9c2a;
467
- --ds-global-yellow-11: #a38824;
468
- --ds-global-yellow-12: #736019;
469
- --ds-global-yellow-13: #332b0b;
470
- --ds-global-yellow-contrast-1: #000000;
471
- --ds-global-yellow-contrast-2: #282209;
310
+ --ds-color-focus-outer: #1f2c3d;
311
+ --ds-link-color-visited: #663299;
472
312
 
473
313
  color-scheme: light;
474
314
  }
@@ -480,7 +320,7 @@
480
320
  */
481
321
 
482
322
  @layer ds.theme.typography.secondary {
483
- [data-ds-typography="secondary"] {
323
+ [data-typography="secondary"] {
484
324
  --ds-font-family: Inter;
485
325
  --ds-font-weight-medium: 500;
486
326
  --ds-font-weight-semibold: 600;
@@ -577,16 +417,15 @@
577
417
  --ds-line-height-md: 1.5;
578
418
  --ds-line-height-lg: 1.7;
579
419
  --ds-font-size-1: 0.75rem;
580
- --ds-font-size-2: 0.8125rem;
581
- --ds-font-size-3: 0.875rem;
582
- --ds-font-size-4: 1rem;
583
- --ds-font-size-5: 1.125rem;
584
- --ds-font-size-6: 1.3125rem;
585
- --ds-font-size-7: 1.5rem;
586
- --ds-font-size-8: 1.875rem;
587
- --ds-font-size-9: 2.25rem;
588
- --ds-font-size-10: 3rem;
589
- --ds-font-size-11: 3.75rem;
420
+ --ds-font-size-2: 0.875rem;
421
+ --ds-font-size-3: 1rem;
422
+ --ds-font-size-4: 1.125rem;
423
+ --ds-font-size-5: 1.3125rem;
424
+ --ds-font-size-6: 1.5rem;
425
+ --ds-font-size-7: 1.875rem;
426
+ --ds-font-size-8: 2.25rem;
427
+ --ds-font-size-9: 3rem;
428
+ --ds-font-size-10: 3.75rem;
590
429
  --ds-letter-spacing-1: -1%;
591
430
  --ds-letter-spacing-2: -0.5%;
592
431
  --ds-letter-spacing-3: -0.25%;
@@ -596,10 +435,6 @@
596
435
  --ds-letter-spacing-7: 0.25%;
597
436
  --ds-letter-spacing-8: 0.5%;
598
437
  --ds-letter-spacing-9: 1.5%;
599
- --ds-altinn-ds-main: Inter;
600
- --ds-altinn-ds-bold: 500;
601
- --ds-altinn-ds-extra-bold: 600;
602
- --ds-altinn-ds-regular: 400;
603
438
  }
604
439
  }
605
440
  /**
@@ -608,68 +443,68 @@
608
443
 
609
444
  @layer ds.theme.semantic {
610
445
  :root {
611
- --ds-border-radius-1: min(var(--ds-border-radius-base), var(--ds-border-radius-scale) * 1);
612
- --ds-border-radius-2: min(var(--ds-border-radius-base), var(--ds-border-radius-scale) * 2);
613
- --ds-border-radius-3: min(var(--ds-border-radius-base), var(--ds-border-radius-scale) * 5);
614
- --ds-border-radius-4: var(--ds-border-radius-base);
615
- --ds-border-radius-5: 624.9375rem;
446
+ --ds-size-base: 18;
447
+ --ds-size-step: 4;
616
448
  --ds-border-radius-base: 0.25rem;
617
449
  --ds-border-radius-scale: 0.25rem;
618
- --ds-border-radius-sm: var(--ds-border-radius-1);
619
- --ds-border-radius-md: var(--ds-border-radius-2);
620
- --ds-border-radius-lg: var(--ds-border-radius-3);
621
- --ds-border-radius-default: var(--ds-border-radius-4);
622
- --ds-border-radius-full: var(--ds-border-radius-5);
623
- --ds-disabled-opacity: 30%;
624
- --ds-spacing-0: calc(var(--ds-spacing-scale) * 0);
625
- --ds-spacing-1: calc(var(--ds-spacing-scale) * 1);
626
- --ds-spacing-2: calc(var(--ds-spacing-scale) * 2);
627
- --ds-spacing-3: calc(var(--ds-spacing-scale) * 3);
628
- --ds-spacing-4: calc(var(--ds-spacing-scale) * 4);
629
- --ds-spacing-5: calc(var(--ds-spacing-scale) * 5);
630
- --ds-spacing-6: calc(var(--ds-spacing-scale) * 6);
631
- --ds-spacing-7: calc(var(--ds-spacing-scale) * 7);
632
- --ds-spacing-8: calc(var(--ds-spacing-scale) * 8);
633
- --ds-spacing-9: calc(var(--ds-spacing-scale) * 9);
634
- --ds-spacing-10: calc(var(--ds-spacing-scale) * 10);
635
- --ds-spacing-11: calc(var(--ds-spacing-scale) * 11);
636
- --ds-spacing-12: calc(var(--ds-spacing-scale) * 12);
637
- --ds-spacing-13: calc(var(--ds-spacing-scale) * 13);
638
- --ds-spacing-14: calc(var(--ds-spacing-scale) * 14);
639
- --ds-spacing-15: calc(var(--ds-spacing-scale) * 15);
640
- --ds-spacing-18: calc(var(--ds-spacing-scale) * 18);
641
- --ds-spacing-22: calc(var(--ds-spacing-scale) * 22);
642
- --ds-spacing-26: calc(var(--ds-spacing-scale) * 26);
643
- --ds-spacing-30: calc(var(--ds-spacing-scale) * 30);
644
- --ds-spacing-scale: 0.25rem;
645
- --ds-sizing-0: calc(var(--ds-sizing-scale) * 0);
646
- --ds-sizing-1: calc(var(--ds-sizing-scale) * 1);
647
- --ds-sizing-2: calc(var(--ds-sizing-scale) * 2);
648
- --ds-sizing-3: calc(var(--ds-sizing-scale) * 3);
649
- --ds-sizing-4: calc(var(--ds-sizing-scale) * 4);
650
- --ds-sizing-5: calc(var(--ds-sizing-scale) * 5);
651
- --ds-sizing-6: calc(var(--ds-sizing-scale) * 6);
652
- --ds-sizing-7: calc(var(--ds-sizing-scale) * 7);
653
- --ds-sizing-8: calc(var(--ds-sizing-scale) * 8);
654
- --ds-sizing-9: calc(var(--ds-sizing-scale) * 9);
655
- --ds-sizing-10: calc(var(--ds-sizing-scale) * 10);
656
- --ds-sizing-11: calc(var(--ds-sizing-scale) * 11);
657
- --ds-sizing-12: calc(var(--ds-sizing-scale) * 12);
658
- --ds-sizing-13: calc(var(--ds-sizing-scale) * 13);
659
- --ds-sizing-14: calc(var(--ds-sizing-scale) * 14);
660
- --ds-sizing-15: calc(var(--ds-sizing-scale) * 15);
661
- --ds-sizing-18: calc(var(--ds-sizing-scale) * 18);
662
- --ds-sizing-22: calc(var(--ds-sizing-scale) * 22);
663
- --ds-sizing-26: calc(var(--ds-sizing-scale) * 26);
664
- --ds-sizing-30: calc(var(--ds-sizing-scale) * 30);
665
- --ds-sizing-scale: 0.25rem;
450
+ --ds-border-radius-sm: min(var(--ds-border-radius-base) * 0.5, var(--ds-border-radius-scale));
451
+ --ds-border-radius-md: min(var(--ds-border-radius-base), var(--ds-border-radius-scale) * 2);
452
+ --ds-border-radius-lg: min(var(--ds-border-radius-base) * 2, var(--ds-border-radius-scale) * 5);
453
+ --ds-border-radius-xl: min(var(--ds-border-radius-base) * 3, var(--ds-border-radius-scale) * 7);
454
+ --ds-border-radius-default: var(--ds-border-radius-base);
455
+ --ds-border-radius-full: 624.9375rem;
456
+ --ds-opacity-disabled: 30%;
666
457
  --ds-border-width-default: 1px;
667
- --ds-border-width-highlight: 2px;
458
+ --ds-border-width-focus: 3px;
668
459
  --ds-shadow-xs: 0 0 1px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
669
460
  --ds-shadow-sm: 0 0 1px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
670
461
  --ds-shadow-md: 0 0 1px 0 rgba(0, 0, 0, 0.14), 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.12);
671
462
  --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);
672
463
  --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);
464
+
465
+ --ds-size-0: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 0);
466
+ --ds-size-1: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 1);
467
+ --ds-size-2: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 2);
468
+ --ds-size-3: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 3);
469
+ --ds-size-4: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 4);
470
+ --ds-size-5: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 5);
471
+ --ds-size-6: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 6);
472
+ --ds-size-7: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 7);
473
+ --ds-size-8: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 8);
474
+ --ds-size-9: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 9);
475
+ --ds-size-10: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 10);
476
+ --ds-size-11: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 11);
477
+ --ds-size-12: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 12);
478
+ --ds-size-13: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 13);
479
+ --ds-size-14: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 14);
480
+ --ds-size-15: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 15);
481
+ --ds-size-18: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 18);
482
+ --ds-size-22: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 22);
483
+ --ds-size-26: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 26);
484
+ --ds-size-30: calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 30);
485
+
486
+ @supports (width: round(down, 0.1em, 1px)) {
487
+ --ds-size-0: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 0), 0.0625rem);
488
+ --ds-size-1: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 1), 0.0625rem);
489
+ --ds-size-2: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 2), 0.0625rem);
490
+ --ds-size-3: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 3), 0.0625rem);
491
+ --ds-size-4: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 4), 0.0625rem);
492
+ --ds-size-5: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 5), 0.0625rem);
493
+ --ds-size-6: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 6), 0.0625rem);
494
+ --ds-size-7: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 7), 0.0625rem);
495
+ --ds-size-8: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 8), 0.0625rem);
496
+ --ds-size-9: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 9), 0.0625rem);
497
+ --ds-size-10: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 10), 0.0625rem);
498
+ --ds-size-11: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 11), 0.0625rem);
499
+ --ds-size-12: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 12), 0.0625rem);
500
+ --ds-size-13: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 13), 0.0625rem);
501
+ --ds-size-14: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 14), 0.0625rem);
502
+ --ds-size-15: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 15), 0.0625rem);
503
+ --ds-size-18: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 18), 0.0625rem);
504
+ --ds-size-22: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 22), 0.0625rem);
505
+ --ds-size-26: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 26), 0.0625rem);
506
+ --ds-size-30: round(down, calc(var(--ds-size-step) / var(--ds-size-base) * 1em * 30), 0.0625rem);
507
+ }
673
508
  }
674
509
  }
675
510
 
@@ -679,466 +514,306 @@
679
514
 
680
515
  @layer ds.theme.color-scheme.dark {
681
516
  [data-color-scheme="dark"] {
682
- --ds-color-company-background-default: #0f1a3f;
683
- --ds-color-company-background-subtle: #16224a;
684
- --ds-color-company-surface-default: #222e54;
685
- --ds-color-company-surface-hover: #313b5f;
686
- --ds-color-company-surface-active: #3f496a;
687
- --ds-color-company-border-subtle: #475070;
688
- --ds-color-company-border-default: #747b93;
689
- --ds-color-company-border-strong: #9ca1b2;
517
+ --ds-color-company-background-default: #10172c;
518
+ --ds-color-company-background-tinted: #151e39;
519
+ --ds-color-company-surface-default: #1e2742;
520
+ --ds-color-company-surface-tinted: #242d47;
521
+ --ds-color-company-surface-hover: #2c354e;
522
+ --ds-color-company-surface-active: #3b425a;
523
+ --ds-color-company-border-subtle: #484f65;
524
+ --ds-color-company-border-default: #7c8191;
525
+ --ds-color-company-border-strong: #a4a8b3;
526
+ --ds-color-company-text-subtle: #a4a8b3;
527
+ --ds-color-company-text-default: #ebecee;
690
528
  --ds-color-company-base-default: #a6abba;
691
529
  --ds-color-company-base-hover: #9096a9;
692
530
  --ds-color-company-base-active: #7a8197;
693
- --ds-color-company-text-subtle: #9ca1b2;
694
- --ds-color-company-text-default: #e3e4e9;
695
- --ds-color-company-contrast-default: #000000;
696
- --ds-color-company-contrast-subtle: #1b1c1e;
697
- --ds-color-person-background-default: #042212;
698
- --ds-color-person-background-subtle: #052b17;
699
- --ds-color-person-surface-default: #06371d;
700
- --ds-color-person-surface-hover: #084625;
701
- --ds-color-person-surface-active: #195535;
702
- --ds-color-person-border-subtle: #225b3d;
703
- --ds-color-person-border-default: #5a856e;
704
- --ds-color-person-border-strong: #8ba999;
531
+ --ds-color-company-base-contrast-subtle: #1b1c1e;
532
+ --ds-color-company-base-contrast-default: #000000;
533
+ --ds-color-person-background-default: #0c1b12;
534
+ --ds-color-person-background-tinted: #102317;
535
+ --ds-color-person-surface-default: #152d1d;
536
+ --ds-color-person-surface-tinted: #183321;
537
+ --ds-color-person-surface-hover: #1c3c27;
538
+ --ds-color-person-surface-active: #264a33;
539
+ --ds-color-person-border-subtle: #365741;
540
+ --ds-color-person-border-default: #6f8777;
541
+ --ds-color-person-border-strong: #9baca1;
542
+ --ds-color-person-text-subtle: #9baca1;
543
+ --ds-color-person-text-default: #eaedeb;
705
544
  --ds-color-person-base-default: #96b1a3;
706
545
  --ds-color-person-base-hover: #7c9e8c;
707
546
  --ds-color-person-base-active: #618a74;
708
- --ds-color-person-text-subtle: #8ba999;
709
- --ds-color-person-text-default: #dee7e2;
710
- --ds-color-person-contrast-default: #000000;
711
- --ds-color-person-contrast-subtle: #181c1a;
712
- --ds-color-neutral-background-default: #141d29;
713
- --ds-color-neutral-background-subtle: #1a2534;
714
- --ds-color-neutral-surface-default: #243041;
715
- --ds-color-neutral-surface-hover: #323e4d;
716
- --ds-color-neutral-surface-active: #404b5a;
717
- --ds-color-neutral-border-subtle: #475260;
718
- --ds-color-neutral-border-default: #747c87;
719
- --ds-color-neutral-border-strong: #9da2aa;
547
+ --ds-color-person-base-contrast-subtle: #181c1a;
548
+ --ds-color-person-base-contrast-default: #000000;
549
+ --ds-color-neutral-background-default: #13181f;
550
+ --ds-color-neutral-background-tinted: #192029;
551
+ --ds-color-neutral-surface-default: #202834;
552
+ --ds-color-neutral-surface-tinted: #262e3a;
553
+ --ds-color-neutral-surface-hover: #2e3641;
554
+ --ds-color-neutral-surface-active: #3c444e;
555
+ --ds-color-neutral-border-subtle: #49515a;
556
+ --ds-color-neutral-border-default: #7c8289;
557
+ --ds-color-neutral-border-strong: #a4a8ad;
558
+ --ds-color-neutral-text-subtle: #a4a8ad;
559
+ --ds-color-neutral-text-default: #ebeced;
720
560
  --ds-color-neutral-base-default: #a6acb2;
721
561
  --ds-color-neutral-base-hover: #90979f;
722
562
  --ds-color-neutral-base-active: #7a828c;
723
- --ds-color-neutral-text-subtle: #9da2aa;
724
- --ds-color-neutral-text-default: #e3e5e7;
725
- --ds-color-neutral-contrast-default: #000000;
726
- --ds-color-neutral-contrast-subtle: #1b1c1d;
727
- --ds-color-article-background-default: #001e38;
728
- --ds-color-article-background-subtle: #002547;
729
- --ds-color-article-surface-default: #00305c;
730
- --ds-color-article-surface-hover: #003d74;
731
- --ds-color-article-surface-active: #004b8d;
732
- --ds-color-article-border-subtle: #00519a;
733
- --ds-color-article-border-default: #307fc7;
734
- --ds-color-article-border-strong: #70a7d8;
563
+ --ds-color-neutral-base-contrast-subtle: #1b1c1d;
564
+ --ds-color-neutral-base-contrast-default: #000000;
565
+ --ds-color-article-background-default: #0c1927;
566
+ --ds-color-article-background-tinted: #102033;
567
+ --ds-color-article-surface-default: #142941;
568
+ --ds-color-article-surface-tinted: #172f4b;
569
+ --ds-color-article-surface-hover: #1a3757;
570
+ --ds-color-article-surface-active: #21446d;
571
+ --ds-color-article-border-subtle: #285182;
572
+ --ds-color-article-border-default: #5a84b4;
573
+ --ds-color-article-border-strong: #8eaacb;
574
+ --ds-color-article-text-subtle: #8eaacb;
575
+ --ds-color-article-text-default: #e7edf4;
735
576
  --ds-color-article-base-default: #4c91cf;
736
577
  --ds-color-article-base-hover: #6fa6d8;
737
578
  --ds-color-article-base-active: #92bce1;
738
- --ds-color-article-text-subtle: #70a7d8;
739
- --ds-color-article-text-default: #d7e7f4;
740
- --ds-color-article-contrast-default: #000000;
741
- --ds-color-article-contrast-subtle: #0d1924;
742
- --ds-color-alert-background-default: #3a0c13;
743
- --ds-color-alert-background-subtle: #490f18;
744
- --ds-color-alert-surface-default: #5d131e;
745
- --ds-color-alert-surface-hover: #751826;
746
- --ds-color-alert-surface-active: #8f1d2e;
747
- --ds-color-alert-border-subtle: #9b2032;
748
- --ds-color-alert-border-default: #e23b55;
749
- --ds-color-alert-border-strong: #ec8292;
750
- --ds-color-alert-base-default: #e02f4a;
751
- --ds-color-alert-base-hover: #e75e73;
752
- --ds-color-alert-base-active: #ec8191;
753
- --ds-color-alert-text-subtle: #ec8292;
754
- --ds-color-alert-text-default: #fadee2;
755
- --ds-color-alert-contrast-default: #000000;
756
- --ds-color-alert-contrast-subtle: #000000;
757
- --ds-color-success-background-default: #022306;
758
- --ds-color-success-background-subtle: #022c08;
759
- --ds-color-success-surface-default: #03380a;
760
- --ds-color-success-surface-hover: #03470d;
761
- --ds-color-success-surface-active: #04570f;
762
- --ds-color-success-border-subtle: #045f11;
763
- --ds-color-success-border-default: #178f28;
764
- --ds-color-success-border-strong: #62b36d;
579
+ --ds-color-article-base-contrast-subtle: #0d1924;
580
+ --ds-color-article-base-contrast-default: #000000;
581
+ --ds-color-alert-background-default: #281112;
582
+ --ds-color-alert-background-tinted: #351618;
583
+ --ds-color-alert-surface-default: #431c1e;
584
+ --ds-color-alert-surface-tinted: #4c2023;
585
+ --ds-color-alert-surface-hover: #592528;
586
+ --ds-color-alert-surface-active: #6f2e32;
587
+ --ds-color-alert-border-subtle: #84373c;
588
+ --ds-color-alert-border-default: #c76369;
589
+ --ds-color-alert-border-strong: #d9969a;
590
+ --ds-color-alert-text-subtle: #d9969a;
591
+ --ds-color-alert-text-default: #f7e9ea;
592
+ --ds-color-alert-base-default: #dc445b;
593
+ --ds-color-alert-base-hover: #e3697b;
594
+ --ds-color-alert-base-active: #ea8b99;
595
+ --ds-color-alert-base-contrast-subtle: #0f0506;
596
+ --ds-color-alert-base-contrast-default: #000000;
597
+ --ds-color-success-background-default: #0d1b0d;
598
+ --ds-color-success-background-tinted: #112411;
599
+ --ds-color-success-surface-default: #152d15;
600
+ --ds-color-success-surface-tinted: #183418;
601
+ --ds-color-success-surface-hover: #1c3c1c;
602
+ --ds-color-success-surface-active: #244c24;
603
+ --ds-color-success-border-subtle: #2b5a2b;
604
+ --ds-color-success-border-default: #528f52;
605
+ --ds-color-success-border-strong: #89b289;
606
+ --ds-color-success-text-subtle: #89b289;
607
+ --ds-color-success-text-default: #e6efe6;
765
608
  --ds-color-success-base-default: #138d24;
766
609
  --ds-color-success-base-hover: #3ca14b;
767
610
  --ds-color-success-base-active: #66b571;
768
- --ds-color-success-text-subtle: #62b36d;
769
- --ds-color-success-text-default: #d4ead7;
770
- --ds-color-success-contrast-default: #000000;
771
- --ds-color-success-contrast-subtle: #010501;
772
- --ds-color-danger-background-default: #3d0909;
773
- --ds-color-danger-background-subtle: #4c0b0b;
774
- --ds-color-danger-surface-default: #610e0e;
775
- --ds-color-danger-surface-hover: #7a1111;
776
- --ds-color-danger-surface-active: #941515;
777
- --ds-color-danger-border-subtle: #a11717;
778
- --ds-color-danger-border-default: #cf5252;
779
- --ds-color-danger-border-strong: #df8b8b;
611
+ --ds-color-success-base-contrast-subtle: #010501;
612
+ --ds-color-success-base-contrast-default: #000000;
613
+ --ds-color-danger-background-default: #2a100e;
614
+ --ds-color-danger-background-tinted: #371512;
615
+ --ds-color-danger-surface-default: #451b17;
616
+ --ds-color-danger-surface-tinted: #4f1f1b;
617
+ --ds-color-danger-surface-hover: #5c241f;
618
+ --ds-color-danger-surface-active: #722d27;
619
+ --ds-color-danger-border-subtle: #88352e;
620
+ --ds-color-danger-border-default: #bc6b64;
621
+ --ds-color-danger-border-strong: #d19a96;
622
+ --ds-color-danger-text-subtle: #d19a96;
623
+ --ds-color-danger-text-default: #f5eae9;
780
624
  --ds-color-danger-base-default: #d76e6e;
781
625
  --ds-color-danger-base-hover: #df8b8b;
782
626
  --ds-color-danger-base-active: #e7a8a8;
783
- --ds-color-danger-text-subtle: #df8b8b;
784
- --ds-color-danger-text-default: #f6dfdf;
785
- --ds-color-danger-contrast-default: #000000;
786
- --ds-color-danger-contrast-subtle: #271414;
787
- --ds-color-info-background-default: #031e33;
788
- --ds-color-info-background-subtle: #032641;
789
- --ds-color-info-surface-default: #043154;
790
- --ds-color-info-surface-hover: #063f6a;
791
- --ds-color-info-surface-active: #074d82;
792
- --ds-color-info-border-subtle: #07538d;
793
- --ds-color-info-border-default: #2480c7;
794
- --ds-color-info-border-strong: #69a8d8;
627
+ --ds-color-danger-base-contrast-subtle: #271414;
628
+ --ds-color-danger-base-contrast-default: #000000;
629
+ --ds-color-info-background-default: #0d1925;
630
+ --ds-color-info-background-tinted: #112130;
631
+ --ds-color-info-surface-default: #15293d;
632
+ --ds-color-info-surface-tinted: #182f46;
633
+ --ds-color-info-surface-hover: #1c3751;
634
+ --ds-color-info-surface-active: #234566;
635
+ --ds-color-info-border-subtle: #2a537a;
636
+ --ds-color-info-border-default: #5585b4;
637
+ --ds-color-info-border-strong: #8aabcb;
638
+ --ds-color-info-text-subtle: #8aabcb;
639
+ --ds-color-info-text-default: #e6edf4;
795
640
  --ds-color-info-base-default: #2d85c9;
796
641
  --ds-color-info-base-hover: #519ad2;
797
642
  --ds-color-info-base-active: #77b0dc;
798
- --ds-color-info-text-subtle: #69a8d8;
799
- --ds-color-info-text-default: #d6e7f4;
800
- --ds-color-info-contrast-default: #000000;
801
- --ds-color-info-contrast-subtle: #050e15;
802
- --ds-color-warning-background-default: #221c08;
803
- --ds-color-warning-background-subtle: #2b240a;
804
- --ds-color-warning-surface-default: #382f0c;
805
- --ds-color-warning-surface-hover: #483c10;
806
- --ds-color-warning-surface-active: #584913;
807
- --ds-color-warning-border-subtle: #5f5015;
808
- --ds-color-warning-border-default: #927a20;
809
- --ds-color-warning-border-strong: #bf9f2a;
810
- --ds-color-warning-base-default: #bc612a;
811
- --ds-color-warning-base-hover: #c87d4f;
812
- --ds-color-warning-base-active: #d39772;
813
- --ds-color-warning-text-subtle: #d2946e;
814
- --ds-color-warning-text-default: #f2e2d7;
815
- --ds-color-warning-contrast-default: #000000;
816
- --ds-color-warning-contrast-subtle: #070301;
817
- --ds-color-focus-inner: #141d29;
818
- --ds-color-focus-outer: #e3e4e9;
819
- --ds-global-blue-1: #031e33;
820
- --ds-global-blue-2: #032641;
821
- --ds-global-blue-3: #043154;
822
- --ds-global-blue-4: #063f6a;
823
- --ds-global-blue-5: #074d82;
824
- --ds-global-blue-6: #07538d;
825
- --ds-global-blue-7: #2480c7;
826
- --ds-global-blue-8: #69a8d8;
827
- --ds-global-blue-9: #2d85c9;
828
- --ds-global-blue-10: #519ad2;
829
- --ds-global-blue-11: #77b0dc;
830
- --ds-global-blue-12: #69a8d8;
831
- --ds-global-blue-13: #d6e7f4;
832
- --ds-global-blue-contrast-1: #000000;
833
- --ds-global-blue-contrast-2: #050e15;
834
- --ds-global-green-1: #022306;
835
- --ds-global-green-2: #022c08;
836
- --ds-global-green-3: #03380a;
837
- --ds-global-green-4: #03470d;
838
- --ds-global-green-5: #04570f;
839
- --ds-global-green-6: #045f11;
840
- --ds-global-green-7: #178f28;
841
- --ds-global-green-8: #62b36d;
842
- --ds-global-green-9: #138d24;
843
- --ds-global-green-10: #3ca14b;
844
- --ds-global-green-11: #66b571;
845
- --ds-global-green-12: #62b36d;
846
- --ds-global-green-13: #d4ead7;
847
- --ds-global-green-contrast-1: #000000;
848
- --ds-global-green-contrast-2: #010501;
849
- --ds-global-orange-1: #2f1607;
850
- --ds-global-orange-2: #3b1c09;
851
- --ds-global-orange-3: #4d250c;
852
- --ds-global-orange-4: #612f0f;
853
- --ds-global-orange-5: #773913;
854
- --ds-global-orange-6: #823e14;
855
- --ds-global-orange-7: #bd632d;
856
- --ds-global-orange-8: #d2946e;
857
- --ds-global-orange-9: #bc612a;
858
- --ds-global-orange-10: #c87d4f;
859
- --ds-global-orange-11: #d39772;
860
- --ds-global-orange-12: #d2946e;
861
- --ds-global-orange-13: #f2e2d7;
862
- --ds-global-orange-contrast-1: #000000;
863
- --ds-global-orange-contrast-2: #070301;
864
- --ds-global-purple-1: #27133a;
865
- --ds-global-purple-2: #31184a;
866
- --ds-global-purple-3: #401f5f;
867
- --ds-global-purple-4: #512879;
868
- --ds-global-purple-5: #633094;
869
- --ds-global-purple-6: #6a379c;
870
- --ds-global-purple-7: #916cb6;
871
- --ds-global-purple-8: #b297cb;
872
- --ds-global-purple-9: #b49acd;
873
- --ds-global-purple-10: #a282c1;
874
- --ds-global-purple-11: #906ab5;
875
- --ds-global-purple-12: #b297cb;
876
- --ds-global-purple-13: #e9e2f0;
877
- --ds-global-purple-contrast-1: #000000;
878
- --ds-global-purple-contrast-2: #18151c;
879
- --ds-global-red-1: #3d0909;
880
- --ds-global-red-2: #4c0b0b;
881
- --ds-global-red-3: #610e0e;
882
- --ds-global-red-4: #7a1111;
883
- --ds-global-red-5: #941515;
884
- --ds-global-red-6: #a11717;
885
- --ds-global-red-7: #cf5252;
886
- --ds-global-red-8: #df8b8b;
887
- --ds-global-red-9: #d76e6e;
888
- --ds-global-red-10: #df8b8b;
889
- --ds-global-red-11: #e7a8a8;
890
- --ds-global-red-12: #df8b8b;
891
- --ds-global-red-13: #f6dfdf;
892
- --ds-global-red-contrast-1: #000000;
893
- --ds-global-red-contrast-2: #271414;
894
- --ds-global-yellow-1: #221c08;
895
- --ds-global-yellow-2: #2b240a;
896
- --ds-global-yellow-3: #382f0c;
897
- --ds-global-yellow-4: #483c10;
898
- --ds-global-yellow-5: #584913;
899
- --ds-global-yellow-6: #5f5015;
900
- --ds-global-yellow-7: #927a20;
901
- --ds-global-yellow-8: #bf9f2a;
902
- --ds-global-yellow-9: #4a3e10;
903
- --ds-global-yellow-10: #615115;
904
- --ds-global-yellow-11: #77631a;
905
- --ds-global-yellow-12: #bf9f2a;
906
- --ds-global-yellow-13: #f1e5b9;
907
- --ds-global-yellow-contrast-1: #ffffff;
908
- --ds-global-yellow-contrast-2: #dbd9d0;
643
+ --ds-color-info-base-contrast-subtle: #050e15;
644
+ --ds-color-info-base-contrast-default: #000000;
645
+ --ds-color-warning-background-default: #1e160d;
646
+ --ds-color-warning-background-tinted: #281e11;
647
+ --ds-color-warning-surface-default: #322616;
648
+ --ds-color-warning-surface-tinted: #3a2b19;
649
+ --ds-color-warning-surface-hover: #43321d;
650
+ --ds-color-warning-surface-active: #543f24;
651
+ --ds-color-warning-border-subtle: #654b2b;
652
+ --ds-color-warning-border-default: #a37a46;
653
+ --ds-color-warning-border-strong: #d39e5b;
654
+ --ds-color-warning-text-subtle: #d39e5b;
655
+ --ds-color-warning-text-default: #f7ebdb;
656
+ --ds-color-warning-base-default: #60400b;
657
+ --ds-color-warning-base-hover: #7a510e;
658
+ --ds-color-warning-base-active: #946211;
659
+ --ds-color-warning-base-contrast-subtle: #e6e2d9;
660
+ --ds-color-warning-base-contrast-default: #ffffff;
661
+ --ds-color-focus-inner: #13181f;
662
+ --ds-color-focus-outer: #ebeced;
663
+ --ds-link-color-visited: #b49acd;
909
664
 
910
665
  color-scheme: dark;
911
666
  }
912
667
 
913
668
  @media (prefers-color-scheme: dark) {
914
669
  [data-color-scheme="auto"] {
915
- --ds-color-company-background-default: #0f1a3f;
916
- --ds-color-company-background-subtle: #16224a;
917
- --ds-color-company-surface-default: #222e54;
918
- --ds-color-company-surface-hover: #313b5f;
919
- --ds-color-company-surface-active: #3f496a;
920
- --ds-color-company-border-subtle: #475070;
921
- --ds-color-company-border-default: #747b93;
922
- --ds-color-company-border-strong: #9ca1b2;
670
+ --ds-color-company-background-default: #10172c;
671
+ --ds-color-company-background-tinted: #151e39;
672
+ --ds-color-company-surface-default: #1e2742;
673
+ --ds-color-company-surface-tinted: #242d47;
674
+ --ds-color-company-surface-hover: #2c354e;
675
+ --ds-color-company-surface-active: #3b425a;
676
+ --ds-color-company-border-subtle: #484f65;
677
+ --ds-color-company-border-default: #7c8191;
678
+ --ds-color-company-border-strong: #a4a8b3;
679
+ --ds-color-company-text-subtle: #a4a8b3;
680
+ --ds-color-company-text-default: #ebecee;
923
681
  --ds-color-company-base-default: #a6abba;
924
682
  --ds-color-company-base-hover: #9096a9;
925
683
  --ds-color-company-base-active: #7a8197;
926
- --ds-color-company-text-subtle: #9ca1b2;
927
- --ds-color-company-text-default: #e3e4e9;
928
- --ds-color-company-contrast-default: #000000;
929
- --ds-color-company-contrast-subtle: #1b1c1e;
930
- --ds-color-person-background-default: #042212;
931
- --ds-color-person-background-subtle: #052b17;
932
- --ds-color-person-surface-default: #06371d;
933
- --ds-color-person-surface-hover: #084625;
934
- --ds-color-person-surface-active: #195535;
935
- --ds-color-person-border-subtle: #225b3d;
936
- --ds-color-person-border-default: #5a856e;
937
- --ds-color-person-border-strong: #8ba999;
684
+ --ds-color-company-base-contrast-subtle: #1b1c1e;
685
+ --ds-color-company-base-contrast-default: #000000;
686
+ --ds-color-person-background-default: #0c1b12;
687
+ --ds-color-person-background-tinted: #102317;
688
+ --ds-color-person-surface-default: #152d1d;
689
+ --ds-color-person-surface-tinted: #183321;
690
+ --ds-color-person-surface-hover: #1c3c27;
691
+ --ds-color-person-surface-active: #264a33;
692
+ --ds-color-person-border-subtle: #365741;
693
+ --ds-color-person-border-default: #6f8777;
694
+ --ds-color-person-border-strong: #9baca1;
695
+ --ds-color-person-text-subtle: #9baca1;
696
+ --ds-color-person-text-default: #eaedeb;
938
697
  --ds-color-person-base-default: #96b1a3;
939
698
  --ds-color-person-base-hover: #7c9e8c;
940
699
  --ds-color-person-base-active: #618a74;
941
- --ds-color-person-text-subtle: #8ba999;
942
- --ds-color-person-text-default: #dee7e2;
943
- --ds-color-person-contrast-default: #000000;
944
- --ds-color-person-contrast-subtle: #181c1a;
945
- --ds-color-neutral-background-default: #141d29;
946
- --ds-color-neutral-background-subtle: #1a2534;
947
- --ds-color-neutral-surface-default: #243041;
948
- --ds-color-neutral-surface-hover: #323e4d;
949
- --ds-color-neutral-surface-active: #404b5a;
950
- --ds-color-neutral-border-subtle: #475260;
951
- --ds-color-neutral-border-default: #747c87;
952
- --ds-color-neutral-border-strong: #9da2aa;
700
+ --ds-color-person-base-contrast-subtle: #181c1a;
701
+ --ds-color-person-base-contrast-default: #000000;
702
+ --ds-color-neutral-background-default: #13181f;
703
+ --ds-color-neutral-background-tinted: #192029;
704
+ --ds-color-neutral-surface-default: #202834;
705
+ --ds-color-neutral-surface-tinted: #262e3a;
706
+ --ds-color-neutral-surface-hover: #2e3641;
707
+ --ds-color-neutral-surface-active: #3c444e;
708
+ --ds-color-neutral-border-subtle: #49515a;
709
+ --ds-color-neutral-border-default: #7c8289;
710
+ --ds-color-neutral-border-strong: #a4a8ad;
711
+ --ds-color-neutral-text-subtle: #a4a8ad;
712
+ --ds-color-neutral-text-default: #ebeced;
953
713
  --ds-color-neutral-base-default: #a6acb2;
954
714
  --ds-color-neutral-base-hover: #90979f;
955
715
  --ds-color-neutral-base-active: #7a828c;
956
- --ds-color-neutral-text-subtle: #9da2aa;
957
- --ds-color-neutral-text-default: #e3e5e7;
958
- --ds-color-neutral-contrast-default: #000000;
959
- --ds-color-neutral-contrast-subtle: #1b1c1d;
960
- --ds-color-article-background-default: #001e38;
961
- --ds-color-article-background-subtle: #002547;
962
- --ds-color-article-surface-default: #00305c;
963
- --ds-color-article-surface-hover: #003d74;
964
- --ds-color-article-surface-active: #004b8d;
965
- --ds-color-article-border-subtle: #00519a;
966
- --ds-color-article-border-default: #307fc7;
967
- --ds-color-article-border-strong: #70a7d8;
716
+ --ds-color-neutral-base-contrast-subtle: #1b1c1d;
717
+ --ds-color-neutral-base-contrast-default: #000000;
718
+ --ds-color-article-background-default: #0c1927;
719
+ --ds-color-article-background-tinted: #102033;
720
+ --ds-color-article-surface-default: #142941;
721
+ --ds-color-article-surface-tinted: #172f4b;
722
+ --ds-color-article-surface-hover: #1a3757;
723
+ --ds-color-article-surface-active: #21446d;
724
+ --ds-color-article-border-subtle: #285182;
725
+ --ds-color-article-border-default: #5a84b4;
726
+ --ds-color-article-border-strong: #8eaacb;
727
+ --ds-color-article-text-subtle: #8eaacb;
728
+ --ds-color-article-text-default: #e7edf4;
968
729
  --ds-color-article-base-default: #4c91cf;
969
730
  --ds-color-article-base-hover: #6fa6d8;
970
731
  --ds-color-article-base-active: #92bce1;
971
- --ds-color-article-text-subtle: #70a7d8;
972
- --ds-color-article-text-default: #d7e7f4;
973
- --ds-color-article-contrast-default: #000000;
974
- --ds-color-article-contrast-subtle: #0d1924;
975
- --ds-color-alert-background-default: #3a0c13;
976
- --ds-color-alert-background-subtle: #490f18;
977
- --ds-color-alert-surface-default: #5d131e;
978
- --ds-color-alert-surface-hover: #751826;
979
- --ds-color-alert-surface-active: #8f1d2e;
980
- --ds-color-alert-border-subtle: #9b2032;
981
- --ds-color-alert-border-default: #e23b55;
982
- --ds-color-alert-border-strong: #ec8292;
983
- --ds-color-alert-base-default: #e02f4a;
984
- --ds-color-alert-base-hover: #e75e73;
985
- --ds-color-alert-base-active: #ec8191;
986
- --ds-color-alert-text-subtle: #ec8292;
987
- --ds-color-alert-text-default: #fadee2;
988
- --ds-color-alert-contrast-default: #000000;
989
- --ds-color-alert-contrast-subtle: #000000;
990
- --ds-color-success-background-default: #022306;
991
- --ds-color-success-background-subtle: #022c08;
992
- --ds-color-success-surface-default: #03380a;
993
- --ds-color-success-surface-hover: #03470d;
994
- --ds-color-success-surface-active: #04570f;
995
- --ds-color-success-border-subtle: #045f11;
996
- --ds-color-success-border-default: #178f28;
997
- --ds-color-success-border-strong: #62b36d;
732
+ --ds-color-article-base-contrast-subtle: #0d1924;
733
+ --ds-color-article-base-contrast-default: #000000;
734
+ --ds-color-alert-background-default: #281112;
735
+ --ds-color-alert-background-tinted: #351618;
736
+ --ds-color-alert-surface-default: #431c1e;
737
+ --ds-color-alert-surface-tinted: #4c2023;
738
+ --ds-color-alert-surface-hover: #592528;
739
+ --ds-color-alert-surface-active: #6f2e32;
740
+ --ds-color-alert-border-subtle: #84373c;
741
+ --ds-color-alert-border-default: #c76369;
742
+ --ds-color-alert-border-strong: #d9969a;
743
+ --ds-color-alert-text-subtle: #d9969a;
744
+ --ds-color-alert-text-default: #f7e9ea;
745
+ --ds-color-alert-base-default: #dc445b;
746
+ --ds-color-alert-base-hover: #e3697b;
747
+ --ds-color-alert-base-active: #ea8b99;
748
+ --ds-color-alert-base-contrast-subtle: #0f0506;
749
+ --ds-color-alert-base-contrast-default: #000000;
750
+ --ds-color-success-background-default: #0d1b0d;
751
+ --ds-color-success-background-tinted: #112411;
752
+ --ds-color-success-surface-default: #152d15;
753
+ --ds-color-success-surface-tinted: #183418;
754
+ --ds-color-success-surface-hover: #1c3c1c;
755
+ --ds-color-success-surface-active: #244c24;
756
+ --ds-color-success-border-subtle: #2b5a2b;
757
+ --ds-color-success-border-default: #528f52;
758
+ --ds-color-success-border-strong: #89b289;
759
+ --ds-color-success-text-subtle: #89b289;
760
+ --ds-color-success-text-default: #e6efe6;
998
761
  --ds-color-success-base-default: #138d24;
999
762
  --ds-color-success-base-hover: #3ca14b;
1000
763
  --ds-color-success-base-active: #66b571;
1001
- --ds-color-success-text-subtle: #62b36d;
1002
- --ds-color-success-text-default: #d4ead7;
1003
- --ds-color-success-contrast-default: #000000;
1004
- --ds-color-success-contrast-subtle: #010501;
1005
- --ds-color-danger-background-default: #3d0909;
1006
- --ds-color-danger-background-subtle: #4c0b0b;
1007
- --ds-color-danger-surface-default: #610e0e;
1008
- --ds-color-danger-surface-hover: #7a1111;
1009
- --ds-color-danger-surface-active: #941515;
1010
- --ds-color-danger-border-subtle: #a11717;
1011
- --ds-color-danger-border-default: #cf5252;
1012
- --ds-color-danger-border-strong: #df8b8b;
764
+ --ds-color-success-base-contrast-subtle: #010501;
765
+ --ds-color-success-base-contrast-default: #000000;
766
+ --ds-color-danger-background-default: #2a100e;
767
+ --ds-color-danger-background-tinted: #371512;
768
+ --ds-color-danger-surface-default: #451b17;
769
+ --ds-color-danger-surface-tinted: #4f1f1b;
770
+ --ds-color-danger-surface-hover: #5c241f;
771
+ --ds-color-danger-surface-active: #722d27;
772
+ --ds-color-danger-border-subtle: #88352e;
773
+ --ds-color-danger-border-default: #bc6b64;
774
+ --ds-color-danger-border-strong: #d19a96;
775
+ --ds-color-danger-text-subtle: #d19a96;
776
+ --ds-color-danger-text-default: #f5eae9;
1013
777
  --ds-color-danger-base-default: #d76e6e;
1014
778
  --ds-color-danger-base-hover: #df8b8b;
1015
779
  --ds-color-danger-base-active: #e7a8a8;
1016
- --ds-color-danger-text-subtle: #df8b8b;
1017
- --ds-color-danger-text-default: #f6dfdf;
1018
- --ds-color-danger-contrast-default: #000000;
1019
- --ds-color-danger-contrast-subtle: #271414;
1020
- --ds-color-info-background-default: #031e33;
1021
- --ds-color-info-background-subtle: #032641;
1022
- --ds-color-info-surface-default: #043154;
1023
- --ds-color-info-surface-hover: #063f6a;
1024
- --ds-color-info-surface-active: #074d82;
1025
- --ds-color-info-border-subtle: #07538d;
1026
- --ds-color-info-border-default: #2480c7;
1027
- --ds-color-info-border-strong: #69a8d8;
780
+ --ds-color-danger-base-contrast-subtle: #271414;
781
+ --ds-color-danger-base-contrast-default: #000000;
782
+ --ds-color-info-background-default: #0d1925;
783
+ --ds-color-info-background-tinted: #112130;
784
+ --ds-color-info-surface-default: #15293d;
785
+ --ds-color-info-surface-tinted: #182f46;
786
+ --ds-color-info-surface-hover: #1c3751;
787
+ --ds-color-info-surface-active: #234566;
788
+ --ds-color-info-border-subtle: #2a537a;
789
+ --ds-color-info-border-default: #5585b4;
790
+ --ds-color-info-border-strong: #8aabcb;
791
+ --ds-color-info-text-subtle: #8aabcb;
792
+ --ds-color-info-text-default: #e6edf4;
1028
793
  --ds-color-info-base-default: #2d85c9;
1029
794
  --ds-color-info-base-hover: #519ad2;
1030
795
  --ds-color-info-base-active: #77b0dc;
1031
- --ds-color-info-text-subtle: #69a8d8;
1032
- --ds-color-info-text-default: #d6e7f4;
1033
- --ds-color-info-contrast-default: #000000;
1034
- --ds-color-info-contrast-subtle: #050e15;
1035
- --ds-color-warning-background-default: #221c08;
1036
- --ds-color-warning-background-subtle: #2b240a;
1037
- --ds-color-warning-surface-default: #382f0c;
1038
- --ds-color-warning-surface-hover: #483c10;
1039
- --ds-color-warning-surface-active: #584913;
1040
- --ds-color-warning-border-subtle: #5f5015;
1041
- --ds-color-warning-border-default: #927a20;
1042
- --ds-color-warning-border-strong: #bf9f2a;
1043
- --ds-color-warning-base-default: #bc612a;
1044
- --ds-color-warning-base-hover: #c87d4f;
1045
- --ds-color-warning-base-active: #d39772;
1046
- --ds-color-warning-text-subtle: #d2946e;
1047
- --ds-color-warning-text-default: #f2e2d7;
1048
- --ds-color-warning-contrast-default: #000000;
1049
- --ds-color-warning-contrast-subtle: #070301;
1050
- --ds-color-focus-inner: #141d29;
1051
- --ds-color-focus-outer: #e3e4e9;
1052
- --ds-global-blue-1: #031e33;
1053
- --ds-global-blue-2: #032641;
1054
- --ds-global-blue-3: #043154;
1055
- --ds-global-blue-4: #063f6a;
1056
- --ds-global-blue-5: #074d82;
1057
- --ds-global-blue-6: #07538d;
1058
- --ds-global-blue-7: #2480c7;
1059
- --ds-global-blue-8: #69a8d8;
1060
- --ds-global-blue-9: #2d85c9;
1061
- --ds-global-blue-10: #519ad2;
1062
- --ds-global-blue-11: #77b0dc;
1063
- --ds-global-blue-12: #69a8d8;
1064
- --ds-global-blue-13: #d6e7f4;
1065
- --ds-global-blue-contrast-1: #000000;
1066
- --ds-global-blue-contrast-2: #050e15;
1067
- --ds-global-green-1: #022306;
1068
- --ds-global-green-2: #022c08;
1069
- --ds-global-green-3: #03380a;
1070
- --ds-global-green-4: #03470d;
1071
- --ds-global-green-5: #04570f;
1072
- --ds-global-green-6: #045f11;
1073
- --ds-global-green-7: #178f28;
1074
- --ds-global-green-8: #62b36d;
1075
- --ds-global-green-9: #138d24;
1076
- --ds-global-green-10: #3ca14b;
1077
- --ds-global-green-11: #66b571;
1078
- --ds-global-green-12: #62b36d;
1079
- --ds-global-green-13: #d4ead7;
1080
- --ds-global-green-contrast-1: #000000;
1081
- --ds-global-green-contrast-2: #010501;
1082
- --ds-global-orange-1: #2f1607;
1083
- --ds-global-orange-2: #3b1c09;
1084
- --ds-global-orange-3: #4d250c;
1085
- --ds-global-orange-4: #612f0f;
1086
- --ds-global-orange-5: #773913;
1087
- --ds-global-orange-6: #823e14;
1088
- --ds-global-orange-7: #bd632d;
1089
- --ds-global-orange-8: #d2946e;
1090
- --ds-global-orange-9: #bc612a;
1091
- --ds-global-orange-10: #c87d4f;
1092
- --ds-global-orange-11: #d39772;
1093
- --ds-global-orange-12: #d2946e;
1094
- --ds-global-orange-13: #f2e2d7;
1095
- --ds-global-orange-contrast-1: #000000;
1096
- --ds-global-orange-contrast-2: #070301;
1097
- --ds-global-purple-1: #27133a;
1098
- --ds-global-purple-2: #31184a;
1099
- --ds-global-purple-3: #401f5f;
1100
- --ds-global-purple-4: #512879;
1101
- --ds-global-purple-5: #633094;
1102
- --ds-global-purple-6: #6a379c;
1103
- --ds-global-purple-7: #916cb6;
1104
- --ds-global-purple-8: #b297cb;
1105
- --ds-global-purple-9: #b49acd;
1106
- --ds-global-purple-10: #a282c1;
1107
- --ds-global-purple-11: #906ab5;
1108
- --ds-global-purple-12: #b297cb;
1109
- --ds-global-purple-13: #e9e2f0;
1110
- --ds-global-purple-contrast-1: #000000;
1111
- --ds-global-purple-contrast-2: #18151c;
1112
- --ds-global-red-1: #3d0909;
1113
- --ds-global-red-2: #4c0b0b;
1114
- --ds-global-red-3: #610e0e;
1115
- --ds-global-red-4: #7a1111;
1116
- --ds-global-red-5: #941515;
1117
- --ds-global-red-6: #a11717;
1118
- --ds-global-red-7: #cf5252;
1119
- --ds-global-red-8: #df8b8b;
1120
- --ds-global-red-9: #d76e6e;
1121
- --ds-global-red-10: #df8b8b;
1122
- --ds-global-red-11: #e7a8a8;
1123
- --ds-global-red-12: #df8b8b;
1124
- --ds-global-red-13: #f6dfdf;
1125
- --ds-global-red-contrast-1: #000000;
1126
- --ds-global-red-contrast-2: #271414;
1127
- --ds-global-yellow-1: #221c08;
1128
- --ds-global-yellow-2: #2b240a;
1129
- --ds-global-yellow-3: #382f0c;
1130
- --ds-global-yellow-4: #483c10;
1131
- --ds-global-yellow-5: #584913;
1132
- --ds-global-yellow-6: #5f5015;
1133
- --ds-global-yellow-7: #927a20;
1134
- --ds-global-yellow-8: #bf9f2a;
1135
- --ds-global-yellow-9: #4a3e10;
1136
- --ds-global-yellow-10: #615115;
1137
- --ds-global-yellow-11: #77631a;
1138
- --ds-global-yellow-12: #bf9f2a;
1139
- --ds-global-yellow-13: #f1e5b9;
1140
- --ds-global-yellow-contrast-1: #ffffff;
1141
- --ds-global-yellow-contrast-2: #dbd9d0;
796
+ --ds-color-info-base-contrast-subtle: #050e15;
797
+ --ds-color-info-base-contrast-default: #000000;
798
+ --ds-color-warning-background-default: #1e160d;
799
+ --ds-color-warning-background-tinted: #281e11;
800
+ --ds-color-warning-surface-default: #322616;
801
+ --ds-color-warning-surface-tinted: #3a2b19;
802
+ --ds-color-warning-surface-hover: #43321d;
803
+ --ds-color-warning-surface-active: #543f24;
804
+ --ds-color-warning-border-subtle: #654b2b;
805
+ --ds-color-warning-border-default: #a37a46;
806
+ --ds-color-warning-border-strong: #d39e5b;
807
+ --ds-color-warning-text-subtle: #d39e5b;
808
+ --ds-color-warning-text-default: #f7ebdb;
809
+ --ds-color-warning-base-default: #60400b;
810
+ --ds-color-warning-base-hover: #7a510e;
811
+ --ds-color-warning-base-active: #946211;
812
+ --ds-color-warning-base-contrast-subtle: #e6e2d9;
813
+ --ds-color-warning-base-contrast-default: #ffffff;
814
+ --ds-color-focus-inner: #13181f;
815
+ --ds-color-focus-outer: #ebeced;
816
+ --ds-link-color-visited: #b49acd;
1142
817
 
1143
818
  color-scheme: dark;
1144
819
  }
@@ -1151,7 +826,7 @@
1151
826
 
1152
827
  @layer ds.theme.typography.primary {
1153
828
  :root,
1154
- [data-ds-typography="primary"] {
829
+ [data-typography="primary"] {
1155
830
  --ds-font-family: Inter;
1156
831
  --ds-font-weight-medium: 500;
1157
832
  --ds-font-weight-semibold: 600;
@@ -1248,16 +923,15 @@
1248
923
  --ds-line-height-md: 1.5;
1249
924
  --ds-line-height-lg: 1.7;
1250
925
  --ds-font-size-1: 0.75rem;
1251
- --ds-font-size-2: 0.8125rem;
1252
- --ds-font-size-3: 0.875rem;
1253
- --ds-font-size-4: 1rem;
1254
- --ds-font-size-5: 1.125rem;
1255
- --ds-font-size-6: 1.3125rem;
1256
- --ds-font-size-7: 1.5rem;
1257
- --ds-font-size-8: 1.875rem;
1258
- --ds-font-size-9: 2.25rem;
1259
- --ds-font-size-10: 3rem;
1260
- --ds-font-size-11: 3.75rem;
926
+ --ds-font-size-2: 0.875rem;
927
+ --ds-font-size-3: 1rem;
928
+ --ds-font-size-4: 1.125rem;
929
+ --ds-font-size-5: 1.3125rem;
930
+ --ds-font-size-6: 1.5rem;
931
+ --ds-font-size-7: 1.875rem;
932
+ --ds-font-size-8: 2.25rem;
933
+ --ds-font-size-9: 3rem;
934
+ --ds-font-size-10: 3.75rem;
1261
935
  --ds-letter-spacing-1: -1%;
1262
936
  --ds-letter-spacing-2: -0.5%;
1263
937
  --ds-letter-spacing-3: -0.25%;
@@ -1267,10 +941,6 @@
1267
941
  --ds-letter-spacing-7: 0.25%;
1268
942
  --ds-letter-spacing-8: 0.5%;
1269
943
  --ds-letter-spacing-9: 1.5%;
1270
- --ds-altinn-ds-main: Inter;
1271
- --ds-altinn-ds-bold: 500;
1272
- --ds-altinn-ds-extra-bold: 600;
1273
- --ds-altinn-ds-regular: 400;
1274
944
  }
1275
945
  }
1276
946
  /**
@@ -1278,46 +948,24 @@
1278
948
  */
1279
949
 
1280
950
  @layer ds.theme.color {
1281
- :root {
1282
- --ds-color-accent-background-default: var(--ds-color-company-background-default);
1283
- --ds-color-accent-background-subtle: var(--ds-color-company-background-subtle);
1284
- --ds-color-accent-surface-default: var(--ds-color-company-surface-default);
1285
- --ds-color-accent-surface-hover: var(--ds-color-company-surface-hover);
1286
- --ds-color-accent-surface-active: var(--ds-color-company-surface-active);
1287
- --ds-color-accent-border-subtle: var(--ds-color-company-border-subtle);
1288
- --ds-color-accent-border-default: var(--ds-color-company-border-default);
1289
- --ds-color-accent-border-strong: var(--ds-color-company-border-strong);
1290
- --ds-color-accent-base-default: var(--ds-color-company-base-default);
1291
- --ds-color-accent-base-hover: var(--ds-color-company-base-hover);
1292
- --ds-color-accent-base-active: var(--ds-color-company-base-active);
1293
- --ds-color-accent-text-subtle: var(--ds-color-company-text-subtle);
1294
- --ds-color-accent-text-default: var(--ds-color-company-text-default);
1295
- --ds-color-accent-contrast-default: var(--ds-color-company-contrast-default);
1296
- --ds-color-accent-contrast-subtle: var(--ds-color-company-contrast-subtle);
1297
- }
1298
- }
1299
-
1300
- /**
1301
- * These files are generated from design tokens defind using Token Studio
1302
- */
1303
-
1304
- @layer ds.theme.color {
1305
- [data-color="alert"] {
951
+ [data-color="alert"],
952
+ [data-color-scheme][data-color="alert"] {
1306
953
  --ds-color-background-default: var(--ds-color-alert-background-default);
1307
- --ds-color-background-subtle: var(--ds-color-alert-background-subtle);
954
+ --ds-color-background-tinted: var(--ds-color-alert-background-tinted);
1308
955
  --ds-color-surface-default: var(--ds-color-alert-surface-default);
956
+ --ds-color-surface-tinted: var(--ds-color-alert-surface-tinted);
1309
957
  --ds-color-surface-hover: var(--ds-color-alert-surface-hover);
1310
958
  --ds-color-surface-active: var(--ds-color-alert-surface-active);
1311
959
  --ds-color-border-subtle: var(--ds-color-alert-border-subtle);
1312
960
  --ds-color-border-default: var(--ds-color-alert-border-default);
1313
961
  --ds-color-border-strong: var(--ds-color-alert-border-strong);
962
+ --ds-color-text-subtle: var(--ds-color-alert-text-subtle);
963
+ --ds-color-text-default: var(--ds-color-alert-text-default);
1314
964
  --ds-color-base-default: var(--ds-color-alert-base-default);
1315
965
  --ds-color-base-hover: var(--ds-color-alert-base-hover);
1316
966
  --ds-color-base-active: var(--ds-color-alert-base-active);
1317
- --ds-color-text-subtle: var(--ds-color-alert-text-subtle);
1318
- --ds-color-text-default: var(--ds-color-alert-text-default);
1319
- --ds-color-base-contrast-default: var(--ds-color-alert-contrast-default);
1320
- --ds-color-base-contrast-subtle: var(--ds-color-alert-contrast-subtle);
967
+ --ds-color-base-contrast-subtle: var(--ds-color-alert-base-contrast-subtle);
968
+ --ds-color-base-contrast-default: var(--ds-color-alert-base-contrast-default);
1321
969
  }
1322
970
  }
1323
971
 
@@ -1326,22 +974,24 @@
1326
974
  */
1327
975
 
1328
976
  @layer ds.theme.color {
1329
- [data-color="article"] {
977
+ [data-color="article"],
978
+ [data-color-scheme][data-color="article"] {
1330
979
  --ds-color-background-default: var(--ds-color-article-background-default);
1331
- --ds-color-background-subtle: var(--ds-color-article-background-subtle);
980
+ --ds-color-background-tinted: var(--ds-color-article-background-tinted);
1332
981
  --ds-color-surface-default: var(--ds-color-article-surface-default);
982
+ --ds-color-surface-tinted: var(--ds-color-article-surface-tinted);
1333
983
  --ds-color-surface-hover: var(--ds-color-article-surface-hover);
1334
984
  --ds-color-surface-active: var(--ds-color-article-surface-active);
1335
985
  --ds-color-border-subtle: var(--ds-color-article-border-subtle);
1336
986
  --ds-color-border-default: var(--ds-color-article-border-default);
1337
987
  --ds-color-border-strong: var(--ds-color-article-border-strong);
988
+ --ds-color-text-subtle: var(--ds-color-article-text-subtle);
989
+ --ds-color-text-default: var(--ds-color-article-text-default);
1338
990
  --ds-color-base-default: var(--ds-color-article-base-default);
1339
991
  --ds-color-base-hover: var(--ds-color-article-base-hover);
1340
992
  --ds-color-base-active: var(--ds-color-article-base-active);
1341
- --ds-color-text-subtle: var(--ds-color-article-text-subtle);
1342
- --ds-color-text-default: var(--ds-color-article-text-default);
1343
- --ds-color-base-contrast-default: var(--ds-color-article-contrast-default);
1344
- --ds-color-base-contrast-subtle: var(--ds-color-article-contrast-subtle);
993
+ --ds-color-base-contrast-subtle: var(--ds-color-article-base-contrast-subtle);
994
+ --ds-color-base-contrast-default: var(--ds-color-article-base-contrast-default);
1345
995
  }
1346
996
  }
1347
997
 
@@ -1354,20 +1004,21 @@
1354
1004
  [data-color-scheme],
1355
1005
  [data-color="company"] {
1356
1006
  --ds-color-background-default: var(--ds-color-company-background-default);
1357
- --ds-color-background-subtle: var(--ds-color-company-background-subtle);
1007
+ --ds-color-background-tinted: var(--ds-color-company-background-tinted);
1358
1008
  --ds-color-surface-default: var(--ds-color-company-surface-default);
1009
+ --ds-color-surface-tinted: var(--ds-color-company-surface-tinted);
1359
1010
  --ds-color-surface-hover: var(--ds-color-company-surface-hover);
1360
1011
  --ds-color-surface-active: var(--ds-color-company-surface-active);
1361
1012
  --ds-color-border-subtle: var(--ds-color-company-border-subtle);
1362
1013
  --ds-color-border-default: var(--ds-color-company-border-default);
1363
1014
  --ds-color-border-strong: var(--ds-color-company-border-strong);
1015
+ --ds-color-text-subtle: var(--ds-color-company-text-subtle);
1016
+ --ds-color-text-default: var(--ds-color-company-text-default);
1364
1017
  --ds-color-base-default: var(--ds-color-company-base-default);
1365
1018
  --ds-color-base-hover: var(--ds-color-company-base-hover);
1366
1019
  --ds-color-base-active: var(--ds-color-company-base-active);
1367
- --ds-color-text-subtle: var(--ds-color-company-text-subtle);
1368
- --ds-color-text-default: var(--ds-color-company-text-default);
1369
- --ds-color-base-contrast-default: var(--ds-color-company-contrast-default);
1370
- --ds-color-base-contrast-subtle: var(--ds-color-company-contrast-subtle);
1020
+ --ds-color-base-contrast-subtle: var(--ds-color-company-base-contrast-subtle);
1021
+ --ds-color-base-contrast-default: var(--ds-color-company-base-contrast-default);
1371
1022
  }
1372
1023
  }
1373
1024
 
@@ -1376,109 +1027,153 @@
1376
1027
  */
1377
1028
 
1378
1029
  @layer ds.theme.color {
1379
- [data-color="person"] {
1380
- --ds-color-background-default: var(--ds-color-person-background-default);
1381
- --ds-color-background-subtle: var(--ds-color-person-background-subtle);
1382
- --ds-color-surface-default: var(--ds-color-person-surface-default);
1383
- --ds-color-surface-hover: var(--ds-color-person-surface-hover);
1384
- --ds-color-surface-active: var(--ds-color-person-surface-active);
1385
- --ds-color-border-subtle: var(--ds-color-person-border-subtle);
1386
- --ds-color-border-default: var(--ds-color-person-border-default);
1387
- --ds-color-border-strong: var(--ds-color-person-border-strong);
1388
- --ds-color-base-default: var(--ds-color-person-base-default);
1389
- --ds-color-base-hover: var(--ds-color-person-base-hover);
1390
- --ds-color-base-active: var(--ds-color-person-base-active);
1391
- --ds-color-text-subtle: var(--ds-color-person-text-subtle);
1392
- --ds-color-text-default: var(--ds-color-person-text-default);
1393
- --ds-color-base-contrast-default: var(--ds-color-person-contrast-default);
1394
- --ds-color-base-contrast-subtle: var(--ds-color-person-contrast-subtle);
1030
+ [data-color="danger"],
1031
+ [data-color-scheme][data-color="danger"] {
1032
+ --ds-color-background-default: var(--ds-color-danger-background-default);
1033
+ --ds-color-background-tinted: var(--ds-color-danger-background-tinted);
1034
+ --ds-color-surface-default: var(--ds-color-danger-surface-default);
1035
+ --ds-color-surface-tinted: var(--ds-color-danger-surface-tinted);
1036
+ --ds-color-surface-hover: var(--ds-color-danger-surface-hover);
1037
+ --ds-color-surface-active: var(--ds-color-danger-surface-active);
1038
+ --ds-color-border-subtle: var(--ds-color-danger-border-subtle);
1039
+ --ds-color-border-default: var(--ds-color-danger-border-default);
1040
+ --ds-color-border-strong: var(--ds-color-danger-border-strong);
1041
+ --ds-color-text-subtle: var(--ds-color-danger-text-subtle);
1042
+ --ds-color-text-default: var(--ds-color-danger-text-default);
1043
+ --ds-color-base-default: var(--ds-color-danger-base-default);
1044
+ --ds-color-base-hover: var(--ds-color-danger-base-hover);
1045
+ --ds-color-base-active: var(--ds-color-danger-base-active);
1046
+ --ds-color-base-contrast-subtle: var(--ds-color-danger-base-contrast-subtle);
1047
+ --ds-color-base-contrast-default: var(--ds-color-danger-base-contrast-default);
1048
+ }
1049
+ }
1050
+
1051
+ /**
1052
+ * These files are generated from design tokens defind using Token Studio
1053
+ */
1054
+
1055
+ @layer ds.theme.color {
1056
+ [data-color="info"],
1057
+ [data-color-scheme][data-color="info"] {
1058
+ --ds-color-background-default: var(--ds-color-info-background-default);
1059
+ --ds-color-background-tinted: var(--ds-color-info-background-tinted);
1060
+ --ds-color-surface-default: var(--ds-color-info-surface-default);
1061
+ --ds-color-surface-tinted: var(--ds-color-info-surface-tinted);
1062
+ --ds-color-surface-hover: var(--ds-color-info-surface-hover);
1063
+ --ds-color-surface-active: var(--ds-color-info-surface-active);
1064
+ --ds-color-border-subtle: var(--ds-color-info-border-subtle);
1065
+ --ds-color-border-default: var(--ds-color-info-border-default);
1066
+ --ds-color-border-strong: var(--ds-color-info-border-strong);
1067
+ --ds-color-text-subtle: var(--ds-color-info-text-subtle);
1068
+ --ds-color-text-default: var(--ds-color-info-text-default);
1069
+ --ds-color-base-default: var(--ds-color-info-base-default);
1070
+ --ds-color-base-hover: var(--ds-color-info-base-hover);
1071
+ --ds-color-base-active: var(--ds-color-info-base-active);
1072
+ --ds-color-base-contrast-subtle: var(--ds-color-info-base-contrast-subtle);
1073
+ --ds-color-base-contrast-default: var(--ds-color-info-base-contrast-default);
1395
1074
  }
1396
1075
  }
1397
1076
 
1077
+ /**
1078
+ * These files are generated from design tokens defind using Token Studio
1079
+ */
1080
+
1398
1081
  @layer ds.theme.color {
1399
- [data-color="neutral"] {
1082
+ [data-color="neutral"],
1083
+ [data-color-scheme][data-color="neutral"] {
1400
1084
  --ds-color-background-default: var(--ds-color-neutral-background-default);
1401
- --ds-color-background-subtle: var(--ds-color-neutral-background-subtle);
1085
+ --ds-color-background-tinted: var(--ds-color-neutral-background-tinted);
1402
1086
  --ds-color-surface-default: var(--ds-color-neutral-surface-default);
1087
+ --ds-color-surface-tinted: var(--ds-color-neutral-surface-tinted);
1403
1088
  --ds-color-surface-hover: var(--ds-color-neutral-surface-hover);
1404
1089
  --ds-color-surface-active: var(--ds-color-neutral-surface-active);
1405
1090
  --ds-color-border-subtle: var(--ds-color-neutral-border-subtle);
1406
1091
  --ds-color-border-default: var(--ds-color-neutral-border-default);
1407
1092
  --ds-color-border-strong: var(--ds-color-neutral-border-strong);
1093
+ --ds-color-text-subtle: var(--ds-color-neutral-text-subtle);
1094
+ --ds-color-text-default: var(--ds-color-neutral-text-default);
1408
1095
  --ds-color-base-default: var(--ds-color-neutral-base-default);
1409
1096
  --ds-color-base-hover: var(--ds-color-neutral-base-hover);
1410
1097
  --ds-color-base-active: var(--ds-color-neutral-base-active);
1411
- --ds-color-text-subtle: var(--ds-color-neutral-text-subtle);
1412
- --ds-color-text-default: var(--ds-color-neutral-text-default);
1413
- --ds-color-base-contrast-default: var(--ds-color-neutral-contrast-default);
1414
- --ds-color-base-contrast-subtle: var(--ds-color-neutral-contrast-subtle);
1098
+ --ds-color-base-contrast-subtle: var(--ds-color-neutral-base-contrast-subtle);
1099
+ --ds-color-base-contrast-default: var(--ds-color-neutral-base-contrast-default);
1415
1100
  }
1416
- [data-color="success"] {
1101
+ }
1102
+
1103
+ /**
1104
+ * These files are generated from design tokens defind using Token Studio
1105
+ */
1106
+
1107
+ @layer ds.theme.color {
1108
+ [data-color="person"],
1109
+ [data-color-scheme][data-color="person"] {
1110
+ --ds-color-background-default: var(--ds-color-person-background-default);
1111
+ --ds-color-background-tinted: var(--ds-color-person-background-tinted);
1112
+ --ds-color-surface-default: var(--ds-color-person-surface-default);
1113
+ --ds-color-surface-tinted: var(--ds-color-person-surface-tinted);
1114
+ --ds-color-surface-hover: var(--ds-color-person-surface-hover);
1115
+ --ds-color-surface-active: var(--ds-color-person-surface-active);
1116
+ --ds-color-border-subtle: var(--ds-color-person-border-subtle);
1117
+ --ds-color-border-default: var(--ds-color-person-border-default);
1118
+ --ds-color-border-strong: var(--ds-color-person-border-strong);
1119
+ --ds-color-text-subtle: var(--ds-color-person-text-subtle);
1120
+ --ds-color-text-default: var(--ds-color-person-text-default);
1121
+ --ds-color-base-default: var(--ds-color-person-base-default);
1122
+ --ds-color-base-hover: var(--ds-color-person-base-hover);
1123
+ --ds-color-base-active: var(--ds-color-person-base-active);
1124
+ --ds-color-base-contrast-subtle: var(--ds-color-person-base-contrast-subtle);
1125
+ --ds-color-base-contrast-default: var(--ds-color-person-base-contrast-default);
1126
+ }
1127
+ }
1128
+
1129
+ /**
1130
+ * These files are generated from design tokens defind using Token Studio
1131
+ */
1132
+
1133
+ @layer ds.theme.color {
1134
+ [data-color="success"],
1135
+ [data-color-scheme][data-color="success"] {
1417
1136
  --ds-color-background-default: var(--ds-color-success-background-default);
1418
- --ds-color-background-subtle: var(--ds-color-success-background-subtle);
1137
+ --ds-color-background-tinted: var(--ds-color-success-background-tinted);
1419
1138
  --ds-color-surface-default: var(--ds-color-success-surface-default);
1139
+ --ds-color-surface-tinted: var(--ds-color-success-surface-tinted);
1420
1140
  --ds-color-surface-hover: var(--ds-color-success-surface-hover);
1421
1141
  --ds-color-surface-active: var(--ds-color-success-surface-active);
1422
1142
  --ds-color-border-subtle: var(--ds-color-success-border-subtle);
1423
1143
  --ds-color-border-default: var(--ds-color-success-border-default);
1424
1144
  --ds-color-border-strong: var(--ds-color-success-border-strong);
1145
+ --ds-color-text-subtle: var(--ds-color-success-text-subtle);
1146
+ --ds-color-text-default: var(--ds-color-success-text-default);
1425
1147
  --ds-color-base-default: var(--ds-color-success-base-default);
1426
1148
  --ds-color-base-hover: var(--ds-color-success-base-hover);
1427
1149
  --ds-color-base-active: var(--ds-color-success-base-active);
1428
- --ds-color-text-subtle: var(--ds-color-success-text-subtle);
1429
- --ds-color-text-default: var(--ds-color-success-text-default);
1430
- --ds-color-base-contrast-default: var(--ds-color-success-contrast-default);
1431
- --ds-color-base-contrast-subtle: var(--ds-color-success-contrast-subtle);
1150
+ --ds-color-base-contrast-subtle: var(--ds-color-success-base-contrast-subtle);
1151
+ --ds-color-base-contrast-default: var(--ds-color-success-base-contrast-default);
1432
1152
  }
1433
- [data-color="warning"] {
1153
+ }
1154
+
1155
+ /**
1156
+ * These files are generated from design tokens defind using Token Studio
1157
+ */
1158
+
1159
+ @layer ds.theme.color {
1160
+ [data-color="warning"],
1161
+ [data-color-scheme][data-color="warning"] {
1434
1162
  --ds-color-background-default: var(--ds-color-warning-background-default);
1435
- --ds-color-background-subtle: var(--ds-color-warning-background-subtle);
1163
+ --ds-color-background-tinted: var(--ds-color-warning-background-tinted);
1436
1164
  --ds-color-surface-default: var(--ds-color-warning-surface-default);
1165
+ --ds-color-surface-tinted: var(--ds-color-warning-surface-tinted);
1437
1166
  --ds-color-surface-hover: var(--ds-color-warning-surface-hover);
1438
1167
  --ds-color-surface-active: var(--ds-color-warning-surface-active);
1439
1168
  --ds-color-border-subtle: var(--ds-color-warning-border-subtle);
1440
1169
  --ds-color-border-default: var(--ds-color-warning-border-default);
1441
1170
  --ds-color-border-strong: var(--ds-color-warning-border-strong);
1171
+ --ds-color-text-subtle: var(--ds-color-warning-text-subtle);
1172
+ --ds-color-text-default: var(--ds-color-warning-text-default);
1442
1173
  --ds-color-base-default: var(--ds-color-warning-base-default);
1443
1174
  --ds-color-base-hover: var(--ds-color-warning-base-hover);
1444
1175
  --ds-color-base-active: var(--ds-color-warning-base-active);
1445
- --ds-color-text-subtle: var(--ds-color-warning-text-subtle);
1446
- --ds-color-text-default: var(--ds-color-warning-text-default);
1447
- --ds-color-base-contrast-default: var(--ds-color-warning-contrast-default);
1448
- --ds-color-base-contrast-subtle: var(--ds-color-warning-contrast-subtle);
1449
- }
1450
- [data-color="danger"] {
1451
- --ds-color-background-default: var(--ds-color-danger-background-default);
1452
- --ds-color-background-subtle: var(--ds-color-danger-background-subtle);
1453
- --ds-color-surface-default: var(--ds-color-danger-surface-default);
1454
- --ds-color-surface-hover: var(--ds-color-danger-surface-hover);
1455
- --ds-color-surface-active: var(--ds-color-danger-surface-active);
1456
- --ds-color-border-subtle: var(--ds-color-danger-border-subtle);
1457
- --ds-color-border-default: var(--ds-color-danger-border-default);
1458
- --ds-color-border-strong: var(--ds-color-danger-border-strong);
1459
- --ds-color-base-default: var(--ds-color-danger-base-default);
1460
- --ds-color-base-hover: var(--ds-color-danger-base-hover);
1461
- --ds-color-base-active: var(--ds-color-danger-base-active);
1462
- --ds-color-text-subtle: var(--ds-color-danger-text-subtle);
1463
- --ds-color-text-default: var(--ds-color-danger-text-default);
1464
- --ds-color-base-contrast-default: var(--ds-color-danger-contrast-default);
1465
- --ds-color-base-contrast-subtle: var(--ds-color-danger-contrast-subtle);
1466
- }
1467
- [data-color="info"] {
1468
- --ds-color-background-default: var(--ds-color-info-background-default);
1469
- --ds-color-background-subtle: var(--ds-color-info-background-subtle);
1470
- --ds-color-surface-default: var(--ds-color-info-surface-default);
1471
- --ds-color-surface-hover: var(--ds-color-info-surface-hover);
1472
- --ds-color-surface-active: var(--ds-color-info-surface-active);
1473
- --ds-color-border-subtle: var(--ds-color-info-border-subtle);
1474
- --ds-color-border-default: var(--ds-color-info-border-default);
1475
- --ds-color-border-strong: var(--ds-color-info-border-strong);
1476
- --ds-color-base-default: var(--ds-color-info-base-default);
1477
- --ds-color-base-hover: var(--ds-color-info-base-hover);
1478
- --ds-color-base-active: var(--ds-color-info-base-active);
1479
- --ds-color-text-subtle: var(--ds-color-info-text-subtle);
1480
- --ds-color-text-default: var(--ds-color-info-text-default);
1481
- --ds-color-base-contrast-default: var(--ds-color-info-contrast-default);
1482
- --ds-color-base-contrast-subtle: var(--ds-color-info-contrast-subtle);
1176
+ --ds-color-base-contrast-subtle: var(--ds-color-warning-base-contrast-subtle);
1177
+ --ds-color-base-contrast-default: var(--ds-color-warning-base-contrast-default);
1483
1178
  }
1484
1179
  }