@norges-domstoler/dds-components 16.3.0 → 17.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/index.css +387 -104
  2. package/dist/index.css.map +1 -1
  3. package/dist/index.d.mts +434 -443
  4. package/dist/index.d.ts +434 -443
  5. package/dist/index.js +1747 -1721
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +1669 -1650
  8. package/dist/index.mjs.map +1 -1
  9. package/package.json +20 -20
package/dist/index.css CHANGED
@@ -114,12 +114,30 @@
114
114
  }
115
115
 
116
116
  /* src/components/Typography/typographyStyles.module.css */
117
+ :root {
118
+ --dds-color-text-body: var(--dds-color-text-default);
119
+ --dds-color-text-link: var(--dds-color-text-action-resting);
120
+ --dds-color-text-link-visited: var(--dds-color-text-action-visited);
121
+ --dds-color-text-label: var(--dds-color-text-medium);
122
+ --dds-color-text-placeholder: var(--dds-color-text-subtle);
123
+ --dds-color-text-helper: var(--dds-color-text-subtle);
124
+ }
125
+ .typographyStyles_contrast {
126
+ --dds-color-text-body: var(--dds-color-text-on-inverse);
127
+ --dds-color-text-link: var(--dds-color-text-on-inverse);
128
+ --dds-color-text-link-visited: var( --dds-color-text-action-visited-on-inverse );
129
+ --dds-color-text-label: var(--dds-color-text-on-inverse);
130
+ --dds-color-text-helper: var(--dds-color-text-on-inverse);
131
+ --dds-color-text-placeholder: var(--dds-color-text-subtle);
132
+ }
117
133
  :where(.typographyStyles_a) {
118
134
  font: inherit;
119
- color: var(--dds-color-text-action-resting);
135
+ color: var(--dds-color-text-link);
120
136
  width: -moz-fit-content;
121
137
  width: fit-content;
122
138
  text-decoration: underline;
139
+ text-decoration-thickness: max(1px, 0.0625rem);
140
+ text-underline-offset: max(4px, 0.25rem);
123
141
  margin: 0;
124
142
  &:hover {
125
143
  text-decoration-color: transparent;
@@ -151,9 +169,9 @@
151
169
  }
152
170
  :where(.typographyStyles_body-sans-01) {
153
171
  margin: 0;
154
- font: var(--dds-font-body-sans-01-font-style) var(--dds-font-body-sans-01-font-weight) var(--dds-font-body-sans-01-font-size) / var(--dds-font-body-sans-01-line-height) var(--dds-font-body-sans-01-font-family);
172
+ font: var(--dds-font-body-sans-01);
155
173
  letter-spacing: var(--dds-font-body-sans-01-letter-spacing);
156
- color: var(--dds-color-text-default);
174
+ color: var(--dds-color-text-body);
157
175
  }
158
176
  :where(.typographyStyles_body-sans-01--margins) {
159
177
  display: block;
@@ -162,9 +180,9 @@
162
180
  }
163
181
  :where(.typographyStyles_body-sans-02) {
164
182
  margin: 0;
165
- font: var(--dds-font-body-sans-02-font-style) var(--dds-font-body-sans-02-font-weight) var(--dds-font-body-sans-02-font-size) / var(--dds-font-body-sans-02-line-height) var(--dds-font-body-sans-02-font-family);
183
+ font: var(--dds-font-body-sans-02);
166
184
  letter-spacing: var(--dds-font-body-sans-02-letter-spacing);
167
- color: var(--dds-color-text-default);
185
+ color: var(--dds-color-text-body);
168
186
  }
169
187
  :where(.typographyStyles_body-sans-02--margins) {
170
188
  display: block;
@@ -173,9 +191,9 @@
173
191
  }
174
192
  :where(.typographyStyles_body-sans-03) {
175
193
  margin: 0;
176
- font: var(--dds-font-body-sans-03-font-style) var(--dds-font-body-sans-03-font-weight) var(--dds-font-body-sans-03-font-size) / var(--dds-font-body-sans-03-line-height) var(--dds-font-body-sans-03-font-family);
194
+ font: var(--dds-font-body-sans-03);
177
195
  letter-spacing: var(--dds-font-body-sans-03-letter-spacing);
178
- color: var(--dds-color-text-default);
196
+ color: var(--dds-color-text-body);
179
197
  }
180
198
  :where(.typographyStyles_body-sans-03--margins) {
181
199
  display: block;
@@ -184,9 +202,9 @@
184
202
  }
185
203
  :where(.typographyStyles_body-sans-04) {
186
204
  margin: 0;
187
- font: var(--dds-font-body-sans-04-font-style) var(--dds-font-body-sans-04-font-weight) var(--dds-font-body-sans-04-font-size) / var(--dds-font-body-sans-04-line-height) var(--dds-font-body-sans-04-font-family);
205
+ font: var(--dds-font-body-sans-04);
188
206
  letter-spacing: var(--dds-font-body-sans-04-letter-spacing);
189
- color: var(--dds-color-text-default);
207
+ color: var(--dds-color-text-body);
190
208
  }
191
209
  :where(.typographyStyles_body-sans-04--margins) {
192
210
  display: block;
@@ -195,9 +213,9 @@
195
213
  }
196
214
  :where(.typographyStyles_lead-sans-01) {
197
215
  margin: 0;
198
- font: var(--dds-font-lead-sans-01-font-style) var(--dds-font-lead-sans-01-font-weight) var(--dds-font-lead-sans-01-font-size) / var(--dds-font-lead-sans-01-line-height) var(--dds-font-lead-sans-01-font-family);
216
+ font: var(--dds-font-lead-sans-01);
199
217
  letter-spacing: var(--dds-font-lead-sans-01-letter-spacing);
200
- color: var(--dds-color-text-default);
218
+ color: var(--dds-color-text-body);
201
219
  }
202
220
  :where(.typographyStyles_lead-sans-01--margins) {
203
221
  display: block;
@@ -206,9 +224,9 @@
206
224
  }
207
225
  :where(.typographyStyles_lead-sans-02) {
208
226
  margin: 0;
209
- font: var(--dds-font-lead-sans-02-font-style) var(--dds-font-lead-sans-02-font-weight) var(--dds-font-lead-sans-02-font-size) / var(--dds-font-lead-sans-02-line-height) var(--dds-font-lead-sans-02-font-family);
227
+ font: var(--dds-font-lead-sans-02);
210
228
  letter-spacing: var(--dds-font-lead-sans-02-letter-spacing);
211
- color: var(--dds-color-text-default);
229
+ color: var(--dds-color-text-body);
212
230
  }
213
231
  :where(.typographyStyles_lead-sans-02--margins) {
214
232
  display: block;
@@ -217,9 +235,9 @@
217
235
  }
218
236
  :where(.typographyStyles_lead-sans-03) {
219
237
  margin: 0;
220
- font: var(--dds-font-lead-sans-03-font-style) var(--dds-font-lead-sans-03-font-weight) var(--dds-font-lead-sans-03-font-size) / var(--dds-font-lead-sans-03-line-height) var(--dds-font-lead-sans-03-font-family);
238
+ font: var(--dds-font-lead-sans-03);
221
239
  letter-spacing: var(--dds-font-lead-sans-03-letter-spacing);
222
- color: var(--dds-color-text-default);
240
+ color: var(--dds-color-text-body);
223
241
  }
224
242
  :where(.typographyStyles_lead-sans-03--margins) {
225
243
  display: block;
@@ -228,9 +246,9 @@
228
246
  }
229
247
  :where(.typographyStyles_lead-sans-04) {
230
248
  margin: 0;
231
- font: var(--dds-font-lead-sans-04-font-style) var(--dds-font-lead-sans-04-font-weight) var(--dds-font-lead-sans-04-font-size) / var(--dds-font-lead-sans-04-line-height) var(--dds-font-lead-sans-04-font-family);
249
+ font: var(--dds-font-lead-sans-04);
232
250
  letter-spacing: var(--dds-font-lead-sans-04-letter-spacing);
233
- color: var(--dds-color-text-default);
251
+ color: var(--dds-color-text-body);
234
252
  }
235
253
  :where(.typographyStyles_lead-sans-04--margins) {
236
254
  display: block;
@@ -239,9 +257,9 @@
239
257
  }
240
258
  :where(.typographyStyles_lead-sans-05) {
241
259
  margin: 0;
242
- font: var(--dds-font-lead-sans-05-font-style) var(--dds-font-lead-sans-05-font-weight) var(--dds-font-lead-sans-05-font-size) / var(--dds-font-lead-sans-05-line-height) var(--dds-font-lead-sans-05-font-family);
260
+ font: var(--dds-font-lead-sans-05);
243
261
  letter-spacing: var(--dds-font-lead-sans-05-letter-spacing);
244
- color: var(--dds-color-text-default);
262
+ color: var(--dds-color-text-body);
245
263
  }
246
264
  :where(.typographyStyles_lead-sans-05--margins) {
247
265
  display: block;
@@ -250,9 +268,9 @@
250
268
  }
251
269
  :where(.typographyStyles_heading-sans-01) {
252
270
  margin: 0;
253
- font: var(--dds-font-heading-sans-01-font-style) var(--dds-font-heading-sans-01-font-weight) var(--dds-font-heading-sans-01-font-size) / var(--dds-font-heading-sans-01-line-height) var(--dds-font-heading-sans-01-font-family);
271
+ font: var(--dds-font-heading-sans-01);
254
272
  letter-spacing: var(--dds-font-heading-sans-01-letter-spacing);
255
- color: var(--dds-color-text-default);
273
+ color: var(--dds-color-text-body);
256
274
  }
257
275
  :where(.typographyStyles_heading-sans-01--margins) {
258
276
  display: block;
@@ -262,9 +280,9 @@
262
280
  }
263
281
  :where(.typographyStyles_heading-sans-02) {
264
282
  margin: 0;
265
- font: var(--dds-font-heading-sans-02-font-style) var(--dds-font-heading-sans-02-font-weight) var(--dds-font-heading-sans-02-font-size) / var(--dds-font-heading-sans-02-line-height) var(--dds-font-heading-sans-02-font-family);
283
+ font: var(--dds-font-heading-sans-02);
266
284
  letter-spacing: var(--dds-font-heading-sans-02-letter-spacing);
267
- color: var(--dds-color-text-default);
285
+ color: var(--dds-color-text-body);
268
286
  }
269
287
  :where(.typographyStyles_heading-sans-02--margins) {
270
288
  display: block;
@@ -274,9 +292,9 @@
274
292
  }
275
293
  :where(.typographyStyles_heading-sans-03) {
276
294
  margin: 0;
277
- font: var(--dds-font-heading-sans-03-font-style) var(--dds-font-heading-sans-03-font-weight) var(--dds-font-heading-sans-03-font-size) / var(--dds-font-heading-sans-03-line-height) var(--dds-font-heading-sans-03-font-family);
295
+ font: var(--dds-font-heading-sans-03);
278
296
  letter-spacing: var(--dds-font-heading-sans-03-letter-spacing);
279
- color: var(--dds-color-text-default);
297
+ color: var(--dds-color-text-body);
280
298
  }
281
299
  :where(.typographyStyles_heading-sans-03--margins) {
282
300
  display: block;
@@ -286,9 +304,9 @@
286
304
  }
287
305
  :where(.typographyStyles_heading-sans-04) {
288
306
  margin: 0;
289
- font: var(--dds-font-heading-sans-04-font-style) var(--dds-font-heading-sans-04-font-weight) var(--dds-font-heading-sans-04-font-size) / var(--dds-font-heading-sans-04-line-height) var(--dds-font-heading-sans-04-font-family);
307
+ font: var(--dds-font-heading-sans-04);
290
308
  letter-spacing: var(--dds-font-heading-sans-04-letter-spacing);
291
- color: var(--dds-color-text-default);
309
+ color: var(--dds-color-text-body);
292
310
  }
293
311
  :where(.typographyStyles_heading-sans-04--margins) {
294
312
  display: block;
@@ -298,9 +316,9 @@
298
316
  }
299
317
  :where(.typographyStyles_heading-sans-05) {
300
318
  margin: 0;
301
- font: var(--dds-font-heading-sans-05-font-style) var(--dds-font-heading-sans-05-font-weight) var(--dds-font-heading-sans-05-font-size) / var(--dds-font-heading-sans-05-line-height) var(--dds-font-heading-sans-05-font-family);
319
+ font: var(--dds-font-heading-sans-05);
302
320
  letter-spacing: var(--dds-font-heading-sans-05-letter-spacing);
303
- color: var(--dds-color-text-default);
321
+ color: var(--dds-color-text-body);
304
322
  }
305
323
  :where(.typographyStyles_heading-sans-05--margins) {
306
324
  display: block;
@@ -310,9 +328,9 @@
310
328
  }
311
329
  :where(.typographyStyles_heading-sans-06) {
312
330
  margin: 0;
313
- font: var(--dds-font-heading-sans-06-font-style) var(--dds-font-heading-sans-06-font-weight) var(--dds-font-heading-sans-06-font-size) / var(--dds-font-heading-sans-06-line-height) var(--dds-font-heading-sans-06-font-family);
331
+ font: var(--dds-font-heading-sans-06);
314
332
  letter-spacing: var(--dds-font-heading-sans-06-letter-spacing);
315
- color: var(--dds-color-text-default);
333
+ color: var(--dds-color-text-body);
316
334
  }
317
335
  :where(.typographyStyles_heading-sans-06--margins) {
318
336
  display: block;
@@ -322,9 +340,9 @@
322
340
  }
323
341
  :where(.typographyStyles_heading-sans-07) {
324
342
  margin: 0;
325
- font: var(--dds-font-heading-sans-07-font-style) var(--dds-font-heading-sans-07-font-weight) var(--dds-font-heading-sans-07-font-size) / var(--dds-font-heading-sans-07-line-height) var(--dds-font-heading-sans-07-font-family);
343
+ font: var(--dds-font-heading-sans-07);
326
344
  letter-spacing: var(--dds-font-heading-sans-07-letter-spacing);
327
- color: var(--dds-color-text-default);
345
+ color: var(--dds-color-text-body);
328
346
  }
329
347
  :where(.typographyStyles_heading-sans-07--margins) {
330
348
  display: block;
@@ -334,9 +352,9 @@
334
352
  }
335
353
  :where(.typographyStyles_heading-sans-08) {
336
354
  margin: 0;
337
- font: var(--dds-font-heading-sans-08-font-style) var(--dds-font-heading-sans-08-font-weight) var(--dds-font-heading-sans-08-font-size) / var(--dds-font-heading-sans-08-line-height) var(--dds-font-heading-sans-08-font-family);
355
+ font: var(--dds-font-heading-sans-08);
338
356
  letter-spacing: var(--dds-font-heading-sans-08-letter-spacing);
339
- color: var(--dds-color-text-default);
357
+ color: var(--dds-color-text-body);
340
358
  }
341
359
  :where(.typographyStyles_heading-sans-08--margins) {
342
360
  display: block;
@@ -346,9 +364,9 @@
346
364
  }
347
365
  :where(.typographyStyles_supporting-style-label-01) {
348
366
  margin: 0;
349
- font: var(--dds-font-supporting-style-label-01-font-style) var(--dds-font-supporting-style-label-01-font-weight) var(--dds-font-supporting-style-label-01-font-size) / var(--dds-font-supporting-style-label-01-line-height) var(--dds-font-supporting-style-label-01-font-family);
367
+ font: var(--dds-font-supporting-style-label-01);
350
368
  letter-spacing: var(--dds-font-supporting-style-label-01-letter-spacing);
351
- color: var(--dds-color-text-medium);
369
+ color: var(--dds-color-text-label);
352
370
  }
353
371
  :where(.typographyStyles_supporting-style-label-01--margins) {
354
372
  display: block;
@@ -357,9 +375,9 @@
357
375
  }
358
376
  :where(.typographyStyles_supporting-style-helper-text-01) {
359
377
  margin: 0;
360
- font: var(--dds-font-supporting-style-helpertext-01-font-style) var(--dds-font-supporting-style-helpertext-01-font-weight) var(--dds-font-supporting-style-helpertext-01-font-size) / var(--dds-font-supporting-style-helpertext-01-line-height) var(--dds-font-supporting-style-helpertext-01-font-family);
378
+ font: var(--dds-font-supporting-style-helpertext-01);
361
379
  letter-spacing: var(--dds-font-supporting-style-helpertext-01-letter-spacing);
362
- color: var(--dds-color-text-subtle);
380
+ color: var(--dds-color-text-helper);
363
381
  }
364
382
  :where(.typographyStyles_supporting-style-helper-text-01--margins) {
365
383
  display: block;
@@ -368,9 +386,9 @@
368
386
  }
369
387
  :where(.typographyStyles_supporting-style-placeholder-text-01) {
370
388
  margin: 0;
371
- font: var(--dds-font-supporting-style-placeholdertext-01-font-style) var(--dds-font-supporting-style-placeholdertext-01-font-weight) var(--dds-font-supporting-style-placeholdertext-01-font-size) / var(--dds-font-supporting-style-placeholdertext-01-line-height) var(--dds-font-supporting-style-placeholdertext-01-font-family);
389
+ font: var(--dds-font-supporting-style-placeholdertext-01);
372
390
  letter-spacing: var( --dds-font-supporting-style-placeholdertext-01-letter-spacing );
373
- color: var(--dds-color-text-subtle);
391
+ color: var(--dds-color-text-placeholder);
374
392
  }
375
393
  :where(.typographyStyles_supporting-style-placeholder-text-01--margins) {
376
394
  display: block;
@@ -379,9 +397,9 @@
379
397
  }
380
398
  :where(.typographyStyles_supporting-style-placeholder-text-02) {
381
399
  margin: 0;
382
- font: var(--dds-font-supporting-style-placeholdertext-02-font-style) var(--dds-font-supporting-style-placeholdertext-02-font-weight) var(--dds-font-supporting-style-placeholdertext-02-font-size) / var(--dds-font-supporting-style-placeholdertext-02-line-height) var(--dds-font-supporting-style-placeholdertext-02-font-family);
400
+ font: var(--dds-font-supporting-style-placeholdertext-02);
383
401
  letter-spacing: var( --dds-font-supporting-style-placeholdertext-02-letter-spacing );
384
- color: var(--dds-color-text-subtle);
402
+ color: var(--dds-color-text-placeholder);
385
403
  }
386
404
  :where(.typographyStyles_supporting-style-placeholder-text-02--margins) {
387
405
  display: block;
@@ -390,9 +408,9 @@
390
408
  }
391
409
  :where(.typographyStyles_supporting-style-placeholder-text-03) {
392
410
  margin: 0;
393
- font: var(--dds-font-supporting-style-placeholdertext-03-font-style) var(--dds-font-supporting-style-placeholdertext-03-font-weight) var(--dds-font-supporting-style-placeholdertext-03-font-size) / var(--dds-font-supporting-style-placeholdertext-03-line-height) var(--dds-font-supporting-style-placeholdertext-03-font-family);
411
+ font: var(--dds-font-supporting-style-placeholdertext-03);
394
412
  letter-spacing: var( --dds-font-supporting-style-placeholdertext-03-letter-spacing );
395
- color: var(--dds-color-text-subtle);
413
+ color: var(--dds-color-text-placeholder);
396
414
  }
397
415
  :where(.typographyStyles_supporting-style-placeholder-text-03--margins) {
398
416
  display: block;
@@ -401,9 +419,9 @@
401
419
  }
402
420
  :where(.typographyStyles_supporting-style-tiny-01) {
403
421
  margin: 0;
404
- font: var(--dds-font-supporting-style-tiny-01-font-style) var(--dds-font-supporting-style-tiny-01-font-weight) var(--dds-font-supporting-style-tiny-01-font-size) / var(--dds-font-supporting-style-tiny-01-line-height) var(--dds-font-supporting-style-tiny-01-font-family);
422
+ font: var(--dds-font-supporting-style-tiny-01);
405
423
  letter-spacing: var(--dds-font-supporting-style-tiny-01-letter-spacing);
406
- color: var(--dds-color-text-default);
424
+ color: var(--dds-color-text-body);
407
425
  }
408
426
  :where(.typographyStyles_supporting-style-tiny-01--margins) {
409
427
  display: block;
@@ -412,9 +430,9 @@
412
430
  }
413
431
  :where(.typographyStyles_supporting-style-tiny-02) {
414
432
  margin: 0;
415
- font: var(--dds-font-supporting-style-tiny-02-font-style) var(--dds-font-supporting-style-tiny-02-font-weight) var(--dds-font-supporting-style-tiny-02-font-size) / var(--dds-font-supporting-style-tiny-02-line-height) var(--dds-font-supporting-style-tiny-02-font-family);
433
+ font: var(--dds-font-supporting-style-tiny-02);
416
434
  letter-spacing: var(--dds-font-supporting-style-tiny-02-letter-spacing);
417
- color: var(--dds-color-text-default);
435
+ color: var(--dds-color-text-body);
418
436
  }
419
437
  :where(.typographyStyles_supporting-style-tiny-02--margins) {
420
438
  display: block;
@@ -437,7 +455,7 @@
437
455
  text-decoration: underline;
438
456
  }
439
457
  :where(.typographyStyles_a) {
440
- color: var(--dds-color-text-action-resting);
458
+ color: var(--dds-color-text-link);
441
459
  }
442
460
  .typographyStyles_text-color--default {
443
461
  color: var(--dds-color-text-default);
@@ -474,7 +492,6 @@
474
492
  text-transform: none;
475
493
  }
476
494
  .utilStyles_hide-input {
477
- -webkit-clip-path: rect(0 0 0 0);
478
495
  clip-path: rect(0 0 0 0);
479
496
  position: absolute;
480
497
  height: 1px;
@@ -528,7 +545,6 @@
528
545
  inset-inline-start: 0px;
529
546
  overflow: hidden;
530
547
  clip: rect(0, 0, 0, 0);
531
- -webkit-clip-path: inset(50%);
532
548
  clip-path: inset(50%);
533
549
  border: 0px;
534
550
  }
@@ -598,7 +614,7 @@
598
614
  border: 1px solid var(--dds-color-border-default);
599
615
  background-color: var(--dds-color-surface-default);
600
616
  padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1) var(--dds-spacing-x0-75) var(--dds-spacing-x0-75);
601
- border-radius: var(--dds-border-radius-1);
617
+ border-radius: var(--dds-border-radius-input);
602
618
  margin: 0;
603
619
  box-sizing: border-box;
604
620
  box-shadow: none;
@@ -792,20 +808,20 @@
792
808
  .Paper_container {
793
809
  box-sizing: border-box;
794
810
  background-color: var(--dds-color-surface-default);
795
- border-radius: var(--dds-border-radius-1);
811
+ border-radius: var(--dds-border-radius-surface);
796
812
  margin: 0;
797
813
  }
798
814
  .Paper_shadow--1 {
799
- box-shadow: var(--dds-shadow-1-onlight);
815
+ box-shadow: var(--dds-shadow-1);
800
816
  }
801
817
  .Paper_shadow--2 {
802
- box-shadow: var(--dds-shadow-2-onlight);
818
+ box-shadow: var(--dds-shadow-2);
803
819
  }
804
820
  .Paper_shadow--3 {
805
- box-shadow: var(--dds-shadow-3-onlight);
821
+ box-shadow: var(--dds-shadow-3);
806
822
  }
807
823
  .Paper_shadow--4 {
808
- box-shadow: var(--dds-shadow-4-onlight);
824
+ box-shadow: var(--dds-shadow-4);
809
825
  }
810
826
  .Paper_border--default {
811
827
  border: 1px solid var(--dds-color-border-default);
@@ -831,6 +847,55 @@
831
847
  align-items: center;
832
848
  gap: var(--dds-spacing-x0-5);
833
849
  }
850
+ .Breadcrumbs_list--large-screen-hide-xs {
851
+ @media only screen and (max-width: 600px) {
852
+ display: none;
853
+ }
854
+ }
855
+ .Breadcrumbs_list--large-screen-hide-sm {
856
+ @media only screen and (max-width: 960px) {
857
+ display: none;
858
+ }
859
+ }
860
+ .Breadcrumbs_list--large-screen-hide-md {
861
+ @media only screen and (max-width: 1280px) {
862
+ display: none;
863
+ }
864
+ }
865
+ .Breadcrumbs_list--large-screen-hide-lg {
866
+ @media only screen and (max-width: 1920px) {
867
+ display: none;
868
+ }
869
+ }
870
+ .Breadcrumbs_list--large-screen-hide-xl {
871
+ display: none;
872
+ }
873
+ .Breadcrumbs_list--small-screen {
874
+ display: none;
875
+ }
876
+ .Breadcrumbs_list--small-screen-show-xs {
877
+ @media only screen and (max-width: 600px) {
878
+ display: flex;
879
+ }
880
+ }
881
+ .Breadcrumbs_list--small-screen-show-sm {
882
+ @media only screen and (max-width: 960px) {
883
+ display: flex;
884
+ }
885
+ }
886
+ .Breadcrumbs_list--small-screen-show-md {
887
+ @media only screen and (max-width: 1280px) {
888
+ display: flex;
889
+ }
890
+ }
891
+ .Breadcrumbs_list--small-screen-show-lg {
892
+ @media only screen and (max-width: 1920px) {
893
+ display: flex;
894
+ }
895
+ }
896
+ .Breadcrumbs_list--small-screen-show-xl {
897
+ display: flex;
898
+ }
834
899
  .Breadcrumbs_list-item {
835
900
  align-items: center;
836
901
  display: flex;
@@ -859,7 +924,7 @@
859
924
  cursor: pointer;
860
925
  box-shadow: none;
861
926
  text-decoration: none;
862
- border-radius: var(--dds-border-radius-1);
927
+ border-radius: var(--dds-border-radius-button);
863
928
  border: 1px solid;
864
929
  @media (prefers-reduced-motion: no-preference) {
865
930
  transition: all 0.2s;
@@ -885,15 +950,15 @@
885
950
  }
886
951
  .Button_button--tiny {
887
952
  &.Button_just-text {
888
- padding: var(--dds-spacing-x0-25);
953
+ padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
889
954
  }
890
955
  &.Button_with-text-and-icon {
891
956
  gap: var(--dds-spacing-x0-125);
892
957
  &.Button_with-icon-left {
893
- padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-25) var(--dds-spacing-x0-25) var(--dds-spacing-x0-125);
958
+ padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5) var(--dds-spacing-x0-25) var(--dds-spacing-x0-25);
894
959
  }
895
960
  &.Button_with-icon-right {
896
- padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-125) var(--dds-spacing-x0-25) var(--dds-spacing-x0-25);
961
+ padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-25) var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
897
962
  }
898
963
  }
899
964
  &.Button_just-icon,
@@ -901,7 +966,7 @@
901
966
  padding: var(--dds-spacing-x0-25);
902
967
  }
903
968
  .Button_icon {
904
- font-size: var(--dds-font-supporting-style-tiny-01-line-height);
969
+ font-size: calc(var(--dds-font-lineheight-x1) * 1em);
905
970
  }
906
971
  }
907
972
  .Button_button--small {
@@ -922,7 +987,7 @@
922
987
  padding: var(--dds-spacing-x0-5);
923
988
  }
924
989
  .Button_icon {
925
- font-size: var(--dds-font-body-sans-01-line-height);
990
+ font-size: calc(var(--dds-font-lineheight-x1) * 1em);
926
991
  }
927
992
  }
928
993
  .Button_button--medium {
@@ -943,7 +1008,7 @@
943
1008
  padding: var(--dds-spacing-x0-75);
944
1009
  }
945
1010
  .Button_icon {
946
- font-size: var(--dds-font-body-sans-02-line-height);
1011
+ font-size: calc(var(--dds-font-lineheight-x1) * 1em);
947
1012
  }
948
1013
  }
949
1014
  .Button_button--large {
@@ -964,7 +1029,7 @@
964
1029
  padding: var(--dds-spacing-x1);
965
1030
  }
966
1031
  .Button_icon {
967
- font-size: var(--dds-font-body-sans-04-line-height);
1032
+ font-size: calc(var(--dds-font-lineheight-x1) * 1em);
968
1033
  }
969
1034
  }
970
1035
  .Button_spinner-wrapper--absolute {
@@ -1058,7 +1123,6 @@
1058
1123
  overflow-y: auto;
1059
1124
  min-width: 180px;
1060
1125
  max-width: 300px;
1061
- box-shadow: var(--dds-shadow-1-onlight);
1062
1126
  }
1063
1127
  .OverflowMenu_list {
1064
1128
  display: flex;
@@ -1094,7 +1158,7 @@
1094
1158
  .OverflowMenu_icon {
1095
1159
  display: flex;
1096
1160
  align-items: center;
1097
- font-size: var(--dds-font-body-sans-01-line-height);
1161
+ font-size: calc(var(--dds-font-lineheight-x1) * 1em);
1098
1162
  }
1099
1163
  .OverflowMenu_divider {
1100
1164
  margin-inline: var(--dds-spacing-x0-5);
@@ -1277,7 +1341,7 @@
1277
1341
  gap: var(--dds-spacing-x0-25);
1278
1342
  padding: var(--dds-spacing-x0-125) var(--dds-spacing-x0-25) var(--dds-spacing-x0-125) var(--dds-spacing-x0-5);
1279
1343
  border: 1px solid var(--dds-color-border-subtle);
1280
- border-radius: var(--dds-border-radius-1);
1344
+ border-radius: var(--dds-border-radius-chip);
1281
1345
  background-color: var(--dds-color-surface-subtle);
1282
1346
  }
1283
1347
  .Chip_group {
@@ -1357,7 +1421,7 @@
1357
1421
  border: 0;
1358
1422
  transition: 0.2s;
1359
1423
  background: transparent;
1360
- border-radius: var(--dds-border-radius-1);
1424
+ border-radius: var(--dds-border-radius-button);
1361
1425
  color: var(--dds-color-icon-default);
1362
1426
  &:not(:disabled):not(.DateInput_disabled):hover,
1363
1427
  &:not(:disabled):not(.DateInput_disabled):active {
@@ -1376,11 +1440,11 @@
1376
1440
  }
1377
1441
  .DateInput_popover {
1378
1442
  z-index: 100;
1379
- border-radius: var(--dds-border-radius-1);
1443
+ border-radius: var(--dds-border-radius-surface);
1380
1444
  background-color: var(--dds-color-surface-default);
1381
1445
  border: 1px solid var(--dds-color-border-default);
1382
1446
  padding: var(--dds-spacing-x0-5);
1383
- box-shadow: var(--dds-shadow-2-onlight);
1447
+ box-shadow: var(--dds-shadow-2);
1384
1448
  }
1385
1449
  .DateInput_calendar {
1386
1450
  display: flex;
@@ -1416,7 +1480,7 @@
1416
1480
  cursor: pointer;
1417
1481
  border: 1px solid;
1418
1482
  border-color: transparent;
1419
- border-radius: var(--dds-border-radius-1);
1483
+ border-radius: var(--dds-border-radius-button);
1420
1484
  transition: 0.2s;
1421
1485
  }
1422
1486
  .DateInput_calendar__cell-button--today {
@@ -1465,9 +1529,6 @@
1465
1529
  color: var(--dds-color-icon-on-danger-default);
1466
1530
  }
1467
1531
  }
1468
- .InputMessage_container--tip {
1469
- background-color: var(--dds-color-surface-default);
1470
- }
1471
1532
  .InputMessage_icon {
1472
1533
  margin-top: var(--dds-spacing-x0-125);
1473
1534
  }
@@ -1606,7 +1667,7 @@
1606
1667
  display: inline-block;
1607
1668
  color: var(--dds-color-icon-medium);
1608
1669
  background-color: transparent;
1609
- border-radius: var(--dds-border-radius-1);
1670
+ border-radius: var(--dds-border-radius-button);
1610
1671
  @media (prefers-reduced-motion: no-preference) {
1611
1672
  transition:
1612
1673
  0.2s color,
@@ -1673,7 +1734,7 @@
1673
1734
  gap: var(--dds-spacing-x0-5);
1674
1735
  }
1675
1736
  .Feedback_button {
1676
- border-radius: var(--dds-border-radius-1);
1737
+ border-radius: var(--dds-border-radius-button);
1677
1738
  color: var(--dds-color-text-default);
1678
1739
  &:hover {
1679
1740
  background-color: var(--dds-color-surface-hover-default);
@@ -1840,7 +1901,7 @@
1840
1901
  gap: var(--dds-spacing-x1);
1841
1902
  border-color: var(--dds-color-border-default);
1842
1903
  background-color: var(--dds-color-surface-default);
1843
- border-radius: var(--dds-border-radius-1);
1904
+ border-radius: var(--dds-border-radius-surface);
1844
1905
  padding: var(--dds-spacing-x1-5) var(--dds-spacing-x1-5) var(--dds-spacing-x2) var(--dds-spacing-x1-5);
1845
1906
  @media (prefers-reduced-motion: no-preference) {
1846
1907
  transition: background-color 0.2s, border-color 0.2s;
@@ -1864,7 +1925,7 @@
1864
1925
  padding: var(--dds-spacing-x0-5) var(--dds-spacing-x1);
1865
1926
  margin-top: var(--dds-spacing-x0-5);
1866
1927
  background-color: var(--dds-color-surface-subtle);
1867
- border-radius: var(--dds-border-radius-1);
1928
+ border-radius: var(--dds-border-radius-surface);
1868
1929
  border: 1px solid var(--dds-color-border-default);
1869
1930
  }
1870
1931
  .FileUploader_file--invalid {
@@ -1882,6 +1943,55 @@
1882
1943
  width: 100%;
1883
1944
  }
1884
1945
 
1946
+ /* src/components/Footer/Footer.module.css */
1947
+ .Footer_container {
1948
+ background-color: var(--dds-color-brand-primary-default);
1949
+ padding-block-start: var(--dds-spacing-x3);
1950
+ padding-block-end: var(--dds-spacing-x6);
1951
+ @media only screen and (min-width: 960px) {
1952
+ padding-block: var(--dds-spacing-x4);
1953
+ }
1954
+ }
1955
+ .Footer_logo--xs-hide {
1956
+ @media only screen and (max-width: 600px) {
1957
+ display: none;
1958
+ }
1959
+ }
1960
+ .Footer_logo--sm-hide {
1961
+ @media only screen and (max-width: 960px) {
1962
+ display: none;
1963
+ }
1964
+ }
1965
+ .Footer_logo--md-hide {
1966
+ @media only screen and (max-width: 1280px) {
1967
+ display: none;
1968
+ }
1969
+ }
1970
+ .Footer_left {
1971
+ display: flex;
1972
+ flex-direction: column;
1973
+ gap: var(--dds-spacing-x4);
1974
+ }
1975
+ .Footer_list {
1976
+ display: flex;
1977
+ flex-direction: column;
1978
+ gap: var(--dds-spacing-x1-5);
1979
+ }
1980
+ .Footer_list-group {
1981
+ display: flex;
1982
+ flex-direction: column;
1983
+ gap: var(--dds-spacing-x1-5);
1984
+ }
1985
+ .Footer_socials-group {
1986
+ display: flex;
1987
+ flex-direction: column;
1988
+ gap: var(--dds-spacing-x1);
1989
+ }
1990
+ .Footer_socials-list {
1991
+ display: flex;
1992
+ gap: var(--dds-spacing-x1-5);
1993
+ }
1994
+
1885
1995
  /* src/components/GlobalMessage/GlobalMessage.module.css */
1886
1996
  .GlobalMessage_container {
1887
1997
  border-bottom: 2px solid;
@@ -2023,7 +2133,7 @@
2023
2133
  padding: var(--dds-spacing-x0-25);
2024
2134
  border-color: transparent;
2025
2135
  background-color: transparent;
2026
- border-radius: var(--dds-border-radius-1);
2136
+ border-radius: var(--dds-border-radius-input);
2027
2137
  @media (prefers-reduced-motion: no-preference) {
2028
2138
  transition:
2029
2139
  background-color 0.2s,
@@ -2076,7 +2186,35 @@
2076
2186
  margin-left: auto;
2077
2187
  }
2078
2188
  }
2079
- .InternalHeader_bar--small-screen {
2189
+ .InternalHeader_bar--small-screen-xs {
2190
+ @media only screen and (max-width: 600px) {
2191
+ gap: var(--dds-spacing-x1);
2192
+ padding-inline-start: var(--dds-spacing-x1);
2193
+ padding-inline-end: var(--dds-spacing-x0-5);
2194
+ }
2195
+ }
2196
+ .InternalHeader_bar--small-screen-sm {
2197
+ @media only screen and (max-width: 960px) {
2198
+ gap: var(--dds-spacing-x1);
2199
+ padding-inline-start: var(--dds-spacing-x1);
2200
+ padding-inline-end: var(--dds-spacing-x0-5);
2201
+ }
2202
+ }
2203
+ .InternalHeader_bar--small-screen-md {
2204
+ @media only screen and (max-width: 1280px) {
2205
+ gap: var(--dds-spacing-x1);
2206
+ padding-inline-start: var(--dds-spacing-x1);
2207
+ padding-inline-end: var(--dds-spacing-x0-5);
2208
+ }
2209
+ }
2210
+ .InternalHeader_bar--small-screen-lg {
2211
+ @media only screen and (max-width: 1920px) {
2212
+ gap: var(--dds-spacing-x1);
2213
+ padding-inline-start: var(--dds-spacing-x1);
2214
+ padding-inline-end: var(--dds-spacing-x0-5);
2215
+ }
2216
+ }
2217
+ .InternalHeader_bar--small-screen-xl {
2080
2218
  gap: var(--dds-spacing-x1);
2081
2219
  padding-inline-start: var(--dds-spacing-x1);
2082
2220
  padding-inline-end: var(--dds-spacing-x0-5);
@@ -2104,13 +2242,85 @@
2104
2242
  align-items: initial;
2105
2243
  flex-direction: column;
2106
2244
  }
2245
+ .InternalHeader_nav-list--small-screen-xs,
2246
+ .InternalHeader_context-menu-button-without-nav-xs {
2247
+ @media only screen and (max-width: 600px) {
2248
+ display: none;
2249
+ }
2250
+ }
2251
+ .InternalHeader_nav-list--small-screen-sm,
2252
+ .InternalHeader_context-menu-button-without-nav-sm {
2253
+ @media only screen and (max-width: 960px) {
2254
+ display: none;
2255
+ }
2256
+ }
2257
+ .InternalHeader_nav-list--small-screen-md,
2258
+ .InternalHeader_context-menu-button-without-nav-md {
2259
+ @media only screen and (max-width: 1280px) {
2260
+ display: none;
2261
+ }
2262
+ }
2263
+ .InternalHeader_nav-list--small-screen-lg,
2264
+ .InternalHeader_context-menu-button-without-nav-lg {
2265
+ @media only screen and (max-width: 1920px) {
2266
+ display: none;
2267
+ }
2268
+ }
2269
+ .InternalHeader_nav-list--small-screen-xl,
2270
+ .InternalHeader_context-menu-button-without-nav-xl {
2271
+ display: none;
2272
+ }
2273
+ .InternalHeader_nav--in-menu--small-screen,
2274
+ .InternalHeader_context-menu-group--small-screen-only,
2275
+ .InternalHeader_context-menu-button-with-nav,
2276
+ .InternalHeader_menu-divider {
2277
+ display: none;
2278
+ }
2279
+ .InternalHeader_nav--in-menu--small-screen-xs,
2280
+ .InternalHeader_context-menu-group--small-screen-only-xs,
2281
+ .InternalHeader_context-menu-button-with-nav-xs,
2282
+ .InternalHeader_menu-divider--small-screen-xs {
2283
+ @media only screen and (max-width: 600px) {
2284
+ display: block;
2285
+ }
2286
+ }
2287
+ .InternalHeader_nav--in-menu--small-screen-sm,
2288
+ .InternalHeader_context-menu-group--small-screen-only-sm,
2289
+ .InternalHeader_context-menu-button-with-nav-sm,
2290
+ .InternalHeader_menu-divider--small-screen-sm {
2291
+ @media only screen and (max-width: 960px) {
2292
+ display: block;
2293
+ }
2294
+ }
2295
+ .InternalHeader_nav--in-menu--small-screen-md,
2296
+ .InternalHeader_context-menu-group--small-screen-only-md,
2297
+ .InternalHeader_context-menu-button-with-nav-md,
2298
+ .InternalHeader_menu-divider--small-screen-md {
2299
+ @media only screen and (max-width: 1280px) {
2300
+ display: block;
2301
+ }
2302
+ }
2303
+ .InternalHeader_nav--in-menu--small-screen-lg,
2304
+ .InternalHeader_context-menu-group--small-screen-only-lg,
2305
+ .InternalHeader_context-menu-button-with-nav-lg,
2306
+ .InternalHeader_menu-divider--small-screen-lg {
2307
+ @media only screen and (max-width: 1920px) {
2308
+ display: block;
2309
+ }
2310
+ }
2311
+ .InternalHeader_nav--in-menu--small-screen-xl,
2312
+ .InternalHeader_context-menu-group--small-screen-only-xl,
2313
+ .InternalHeader_context-menu-button-with-nav-xl,
2314
+ .InternalHeader_menu-divider--small-screen-xl {
2315
+ display: block;
2316
+ }
2107
2317
  .InternalHeader_nav-list__item {
2108
2318
  display: flex;
2109
2319
  }
2110
2320
  .InternalHeader_nav-list__item__link {
2111
2321
  text-decoration: none;
2112
2322
  padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1);
2113
- border-radius: var(--dds-border-radius-1);
2323
+ border-radius: var(--dds-border-radius-surface);
2114
2324
  background-color: transparent;
2115
2325
  color: var(--dds-color-text-subtle);
2116
2326
  &:hover {
@@ -2194,8 +2404,7 @@
2194
2404
  box-sizing: border-box;
2195
2405
  display: grid;
2196
2406
  align-items: center;
2197
- box-shadow: var(--dds-shadow-1-onlight);
2198
- border-radius: var(--dds-border-radius-1);
2407
+ border-radius: var(--dds-border-radius-surface);
2199
2408
  padding: var(--dds-spacing-x0-75);
2200
2409
  gap: var(--dds-spacing-x0-5);
2201
2410
  }
@@ -2320,7 +2529,31 @@
2320
2529
  justify-content: space-between;
2321
2530
  flex-wrap: wrap;
2322
2531
  }
2323
- .Pagination_container--small-screen {
2532
+ .Pagination_container--small-screen-xs {
2533
+ @media only screen and (max-width: 600px) {
2534
+ flex-direction: column;
2535
+ align-items: center;
2536
+ }
2537
+ }
2538
+ .Pagination_container--small-screen-sm {
2539
+ @media only screen and (max-width: 960px) {
2540
+ flex-direction: column;
2541
+ align-items: center;
2542
+ }
2543
+ }
2544
+ .Pagination_container--small-screen-md {
2545
+ @media only screen and (max-width: 1280px) {
2546
+ flex-direction: column;
2547
+ align-items: center;
2548
+ }
2549
+ }
2550
+ .Pagination_container--small-screen-lg {
2551
+ @media only screen and (max-width: 1920px) {
2552
+ flex-direction: column;
2553
+ align-items: center;
2554
+ }
2555
+ }
2556
+ .Pagination_container--small-screen-xl {
2324
2557
  flex-direction: column;
2325
2558
  align-items: center;
2326
2559
  }
@@ -2328,6 +2561,55 @@
2328
2561
  display: flex;
2329
2562
  align-items: center;
2330
2563
  }
2564
+ .Pagination_nav--large-screen-hide-xs {
2565
+ @media only screen and (max-width: 600px) {
2566
+ display: none;
2567
+ }
2568
+ }
2569
+ .Pagination_nav--large-screen-hide-sm {
2570
+ @media only screen and (max-width: 960px) {
2571
+ display: none;
2572
+ }
2573
+ }
2574
+ .Pagination_nav--large-screen-hide-md {
2575
+ @media only screen and (max-width: 1280px) {
2576
+ display: none;
2577
+ }
2578
+ }
2579
+ .Pagination_nav--large-screen-hide-lg {
2580
+ @media only screen and (max-width: 1920px) {
2581
+ display: none;
2582
+ }
2583
+ }
2584
+ .Pagination_nav--large-screen-hide-xl {
2585
+ display: none;
2586
+ }
2587
+ .Pagination_nav--small-screen {
2588
+ display: none;
2589
+ }
2590
+ .Pagination_nav--small-screen-show-xs {
2591
+ @media only screen and (max-width: 600px) {
2592
+ display: block;
2593
+ }
2594
+ }
2595
+ .Pagination_nav--small-screen-show-sm {
2596
+ @media only screen and (max-width: 960px) {
2597
+ display: block;
2598
+ }
2599
+ }
2600
+ .Pagination_nav--small-screen-show-md {
2601
+ @media only screen and (max-width: 1280px) {
2602
+ display: block;
2603
+ }
2604
+ }
2605
+ .Pagination_nav--small-screen-show-lg {
2606
+ @media only screen and (max-width: 1920px) {
2607
+ display: block;
2608
+ }
2609
+ }
2610
+ .Pagination_nav--small-screen-show-xl {
2611
+ display: block;
2612
+ }
2331
2613
  .Pagination_list {
2332
2614
  display: grid;
2333
2615
  grid-auto-flow: column;
@@ -2559,7 +2841,7 @@
2559
2841
  cursor: default;
2560
2842
  }
2561
2843
  .ProgressTracker_item-number {
2562
- border-radius: 50%;
2844
+ border-radius: var(--dds-border-radius-rounded);
2563
2845
  display: flex;
2564
2846
  align-items: center;
2565
2847
  justify-content: center;
@@ -2761,7 +3043,7 @@
2761
3043
  }
2762
3044
  .SelectionControl_label--radio {
2763
3045
  .SelectionControl_selection-control:after {
2764
- border-radius: 50%;
3046
+ border-radius: var(--dds-border-radius-rounded);
2765
3047
  background-color: var(--dds-color-icon-on-action);
2766
3048
  height: 8px;
2767
3049
  width: 8px;
@@ -2816,7 +3098,7 @@
2816
3098
  border: 1px solid;
2817
3099
  border-color: var(--dds-color-border-default);
2818
3100
  background-color: var(--dds-color-surface-field-default);
2819
- border-radius: var(--dds-border-radius-1);
3101
+ border-radius: var(--dds-border-radius-input);
2820
3102
  height: 18px;
2821
3103
  width: 18px;
2822
3104
  &:after {
@@ -2827,7 +3109,7 @@
2827
3109
  }
2828
3110
  }
2829
3111
  .SelectionControl_selection-control--radio {
2830
- border-radius: 50%;
3112
+ border-radius: var(--dds-border-radius-rounded);
2831
3113
  }
2832
3114
 
2833
3115
  /* src/components/SkipToContent/SkipToContent.module.css */
@@ -2933,7 +3215,8 @@
2933
3215
  }
2934
3216
  th {
2935
3217
  background-color: var(--dds-color-surface-default);
2936
- font-size: var(--dds-font-body-sans-01-font-size);
3218
+ font: var(--dds-font-body-sans-01);
3219
+ font-weight: var(--dds-font-weight-bold);
2937
3220
  }
2938
3221
  }
2939
3222
  .Table_row {
@@ -2998,7 +3281,7 @@
2998
3281
  .Table_collapse-button {
2999
3282
  height: var(--dds-icon-size-medium);
3000
3283
  width: var(--dds-icon-size-medium);
3001
- border-radius: var(--dds-border-radius-1);
3284
+ border-radius: var(--dds-border-radius-button);
3002
3285
  margin-left: auto;
3003
3286
  margin-right: auto;
3004
3287
  display: flex;
@@ -3049,8 +3332,8 @@
3049
3332
  color: var(--dds-color-text-medium);
3050
3333
  padding: var(--dds-spacing-x0-5);
3051
3334
  background: var(--dds-color-surface-default);
3052
- border-top-left-radius: var(--dds-border-radius-2);
3053
- border-top-right-radius: var(--dds-border-radius-2);
3335
+ border-top-left-radius: var(--dds-border-radius-button);
3336
+ border-top-right-radius: var(--dds-border-radius-button);
3054
3337
  @media (prefers-reduced-motion: no-preference) {
3055
3338
  transition:
3056
3339
  box-shadow 0.2s,
@@ -3089,7 +3372,7 @@
3089
3372
  border: 1px solid;
3090
3373
  display: inline-flex;
3091
3374
  align-items: center;
3092
- border-radius: var(--dds-border-radius-1);
3375
+ border-radius: var(--dds-border-radius-chip);
3093
3376
  padding: var(--dds-spacing-x0-125) var(--dds-spacing-x0-5);
3094
3377
  }
3095
3378
  .Tag_container--with-icon {
@@ -3283,7 +3566,7 @@
3283
3566
  .ToggleBar_content--large--just-icon {
3284
3567
  padding: var(--dds-spacing-x1);
3285
3568
  svg {
3286
- font-size: var(--dds-font-body-sans-04-line-height);
3569
+ font-size: calc(var(--dds-font-lineheight-x1) * 1em);
3287
3570
  }
3288
3571
  }
3289
3572
  .ToggleBar_content--large--with-text {
@@ -3293,7 +3576,7 @@
3293
3576
  .ToggleBar_content--medium--just-icon {
3294
3577
  padding: var(--dds-spacing-x0-75);
3295
3578
  svg {
3296
- font-size: var(--dds-font-body-sans-02-line-height);
3579
+ font-size: calc(var(--dds-font-lineheight-x1) * 1em);
3297
3580
  }
3298
3581
  }
3299
3582
  .ToggleBar_content--medium--with-text {
@@ -3303,7 +3586,7 @@
3303
3586
  .ToggleBar_content--small--just-icon {
3304
3587
  padding: var(--dds-spacing-x0-5);
3305
3588
  svg {
3306
- font-size: var(--dds-font-body-sans-01-line-height);
3589
+ font-size: calc(var(--dds-font-lineheight-x1) * 1em);
3307
3590
  }
3308
3591
  }
3309
3592
  .ToggleBar_content--small--with-text {
@@ -3313,7 +3596,7 @@
3313
3596
  .ToggleBar_content--tiny--just-icon {
3314
3597
  padding: var(--dds-spacing-x0-25);
3315
3598
  svg {
3316
- font-size: var(--dds-font-supporting-style-tiny-01-line-height);
3599
+ font-size: calc(var(--dds-font-lineheight-x1) * 1em);
3317
3600
  }
3318
3601
  }
3319
3602
  .ToggleBar_content--tiny--with-text {
@@ -3326,12 +3609,12 @@
3326
3609
  }
3327
3610
  &:first-child .ToggleBar_content {
3328
3611
  border-left: 1px solid var(--dds-color-border-default);
3329
- border-top-left-radius: var(--dds-border-radius-1);
3330
- border-bottom-left-radius: var(--dds-border-radius-1);
3612
+ border-top-left-radius: var(--dds-border-radius-button);
3613
+ border-bottom-left-radius: var(--dds-border-radius-button);
3331
3614
  }
3332
3615
  &:last-child .ToggleBar_content {
3333
- border-top-right-radius: var(--dds-border-radius-1);
3334
- border-bottom-right-radius: var(--dds-border-radius-1);
3616
+ border-top-right-radius: var(--dds-border-radius-button);
3617
+ border-bottom-right-radius: var(--dds-border-radius-button);
3335
3618
  }
3336
3619
  input:checked + .ToggleBar_content {
3337
3620
  color: var(--dds-color-text-on-action);
@@ -3377,7 +3660,7 @@
3377
3660
  width: -moz-fit-content;
3378
3661
  width: fit-content;
3379
3662
  border: 1px solid;
3380
- border-radius: 100px;
3663
+ border-radius: var(--dds-border-radius-rounded);
3381
3664
  gap: var(--dds-spacing-x0-5);
3382
3665
  padding: var(--dds-spacing-x0-5) var(--dds-spacing-x1);
3383
3666
  background-color: var(--dds-color-surface-default);