@utrecht/design-tokens 2.3.0 → 2.5.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 (83) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/_mixin-theme.scss +165 -76
  3. package/dist/_mixin.scss +165 -76
  4. package/dist/_variables.scss +165 -76
  5. package/dist/dark/_mixin-theme.scss +165 -76
  6. package/dist/dark/_mixin.scss +165 -76
  7. package/dist/dark/_variables.scss +165 -76
  8. package/dist/dark/index.cjs +104 -15
  9. package/dist/dark/index.css +165 -76
  10. package/dist/dark/index.d.ts +97 -8
  11. package/dist/dark/index.flat.json +102 -13
  12. package/dist/dark/index.json +11111 -9439
  13. package/dist/dark/index.mjs +103 -14
  14. package/dist/dark/index.tokens.json +369 -248
  15. package/dist/dark/list.json +11111 -9439
  16. package/dist/dark/list.mjs +11111 -9439
  17. package/dist/dark/property.css +19 -7
  18. package/dist/dark/root.css +164 -75
  19. package/dist/dark/theme-prince-xml.css +165 -76
  20. package/dist/dark/theme.css +164 -75
  21. package/dist/dark/tokens.cjs +2051 -347
  22. package/dist/dark/tokens.d.ts +255 -126
  23. package/dist/dark/tokens.json +2051 -347
  24. package/dist/dark/variables.cjs +104 -15
  25. package/dist/dark/variables.css +164 -75
  26. package/dist/dark/variables.d.ts +97 -8
  27. package/dist/dark/variables.json +102 -13
  28. package/dist/dark/variables.less +165 -76
  29. package/dist/dark/variables.mjs +103 -14
  30. package/dist/index.cjs +104 -15
  31. package/dist/index.css +330 -152
  32. package/dist/index.d.ts +97 -8
  33. package/dist/index.flat.json +102 -13
  34. package/dist/index.json +2175 -503
  35. package/dist/index.mjs +103 -14
  36. package/dist/index.tokens.json +369 -248
  37. package/dist/list.json +2175 -503
  38. package/dist/list.mjs +2175 -503
  39. package/dist/property.css +19 -7
  40. package/dist/root.css +164 -75
  41. package/dist/theme-prince-xml.css +165 -76
  42. package/dist/theme.css +164 -75
  43. package/dist/tokens.cjs +2051 -347
  44. package/dist/tokens.d.ts +255 -126
  45. package/dist/tokens.json +2051 -347
  46. package/dist/variables.cjs +104 -15
  47. package/dist/variables.css +164 -75
  48. package/dist/variables.d.ts +97 -8
  49. package/dist/variables.json +102 -13
  50. package/dist/variables.less +165 -76
  51. package/dist/variables.mjs +103 -14
  52. package/package.json +1 -1
  53. package/src/component/nl/code-block.tokens.json +13 -0
  54. package/src/component/nl/code.tokens.json +11 -0
  55. package/src/component/nl/data-badge.tokens.json +22 -0
  56. package/src/component/nl/heading.tokens.json +48 -0
  57. package/src/component/nl/mark.tokens.json +8 -0
  58. package/src/component/nl/number-badge.tokens.json +23 -0
  59. package/src/component/nl/paragraph.tokens.json +20 -0
  60. package/src/component/nl/skip-link.tokens.json +16 -0
  61. package/src/component/signalen/signalen.tokens.json +17 -0
  62. package/src/component/utrecht/badge.tokens.json +5 -5
  63. package/src/component/utrecht/body.tokens.json +11 -0
  64. package/src/component/utrecht/code-block.tokens.json +9 -9
  65. package/src/component/utrecht/heading-1.tokens.json +4 -4
  66. package/src/component/utrecht/heading-2.tokens.json +4 -4
  67. package/src/component/utrecht/heading-3.tokens.json +4 -4
  68. package/src/component/utrecht/heading-4.tokens.json +4 -4
  69. package/src/component/utrecht/heading-5.tokens.json +4 -4
  70. package/src/component/utrecht/heading-6.tokens.json +4 -4
  71. package/src/component/utrecht/link-list.tokens.json +3 -0
  72. package/src/component/utrecht/mark.tokens.json +2 -2
  73. package/src/component/utrecht/nav-bar.tokens.json +0 -2
  74. package/src/component/utrecht/number-badge.tokens.json +6 -6
  75. package/src/component/utrecht/page-body.tokens.json +19 -0
  76. package/src/component/utrecht/page-footer.tokens.json +6 -4
  77. package/src/component/utrecht/page-header.tokens.json +14 -4
  78. package/src/component/utrecht/page.tokens.json +2 -2
  79. package/src/component/utrecht/paragraph.tokens.json +8 -8
  80. package/src/component/utrecht/root.tokens.json +8 -0
  81. package/src/component/utrecht/skip-link.tokens.json +10 -10
  82. package/project.json +0 -25
  83. package/src/component/utrecht/badge-data.tokens.json +0 -8
package/dist/index.css CHANGED
@@ -30,7 +30,14 @@
30
30
  }
31
31
  }
32
32
  .utrecht-theme {
33
+ --signalen-progress-bar-border-radius: 4px;
33
34
  --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
35
+ --nl-number-badge-padding-inline: 1ex;
36
+ --nl-number-badge-padding-block: 1ex;
37
+ --nl-data-badge-border-radius: 0;
38
+ --nl-code-block-padding-inline: 20px;
39
+ --nl-code-block-padding-block: 20px;
40
+ --nl-code-block-font-family: "Monaco";
34
41
  --denhaag-process-steps-sub-step-marker-size: 12px;
35
42
  --denhaag-process-steps-step-marker-size: 28px;
36
43
  --utrecht-toptask-nav-link-grid-max-inline-size: 240px;
@@ -174,19 +181,35 @@
174
181
  --utrecht-pagination-page-link-background-color: transparent;
175
182
  --utrecht-pagination-margin-block-end: 1em;
176
183
  --utrecht-pagination-margin-block-start: 0;
177
- --utrecht-page-padding-inline-start: 2em;
184
+ --utrecht-page-padding-inline-start: 0;
178
185
  --utrecht-page-padding-block-end: 1em;
179
- --utrecht-page-padding-inline-end: 2em;
186
+ --utrecht-page-padding-inline-end: 0;
180
187
  --utrecht-page-padding-block-start: 1.8em;
181
188
  --utrecht-page-max-inline-size: 1184px;
182
189
  --utrecht-page-margin-inline-end: 2em;
183
190
  --utrecht-page-margin-inline-start: 2em;
184
- --utrecht-page-header-padding-inline-end: 2.4em;
185
- --utrecht-page-header-padding-inline-start: 2em;
186
- --utrecht-page-header-padding-block-end: 1em;
187
- --utrecht-page-header-padding-block-start: 1.8em;
191
+ --utrecht-page-header-content-padding-inline: 2em;
192
+ --utrecht-page-header-content-max-inline-size: 1184px;
193
+ --utrecht-page-header-content-padding-inline-end: 2.4em;
194
+ --utrecht-page-header-content-padding-inline-start: 2em;
195
+ --utrecht-page-header-content-padding-block-end: 1em;
196
+ --utrecht-page-header-content-padding-block-start: 1.8em;
197
+ --utrecht-page-header-padding-inline-end: 0;
198
+ --utrecht-page-header-padding-inline-start: 0;
199
+ --utrecht-page-header-padding-block-end: 0;
200
+ --utrecht-page-header-padding-block-start: 0;
201
+ --utrecht-page-footer-content-max-inline-size: 1184px;
188
202
  --utrecht-page-content-padding-block-end: 2em;
189
203
  --utrecht-page-content-padding-block-start: 2em;
204
+ --utrecht-page-body-padding-block-start: 0;
205
+ --utrecht-page-body-padding-block-end: 0;
206
+ --utrecht-page-body-padding-inline-start: 0;
207
+ --utrecht-page-body-padding-inline-end: 0;
208
+ --utrecht-page-body-content-padding-inline-end: 2.4em;
209
+ --utrecht-page-body-content-max-inline-size: 1184px;
210
+ --utrecht-page-body-content-padding-inline-start: 2em;
211
+ --utrecht-page-body-content-padding-block-end: 1em;
212
+ --utrecht-page-body-content-padding-block-start: 0;
190
213
  --utrecht-ordered-list-item-padding-inline-start: 0;
191
214
  --utrecht-ordered-list-item-margin-block-end: 0.25em;
192
215
  --utrecht-ordered-list-item-margin-block-start: 0.25em;
@@ -195,8 +218,6 @@
195
218
  --utrecht-ordered-list-margin-block-start: 0;
196
219
  --utrecht-number-data-negative-color: red;
197
220
  --utrecht-number-data-positive-color: green;
198
- --utrecht-number-badge-padding-inline: 1ex; /* Default inline padding color for badge components */
199
- --utrecht-number-badge-padding-block: 1ex; /* Default block padding for badge components */
200
221
  --utrecht-topnav-link-focus-text-decoration: none;
201
222
  --utrecht-topnav-link-focus-border-type: dotted;
202
223
  --utrecht-mapcontrolbutton-margin-inline-start: 0;
@@ -225,6 +246,7 @@
225
246
  --utrecht-link-social-icon-size: 26px;
226
247
  --utrecht-link-social-size: 40px;
227
248
  --utrecht-link-social-border-width: 2px;
249
+ --utrecht-link-list-icon-inset-block-start: 0.15em;
228
250
  --utrecht-link-list-icon-size: 14px;
229
251
  --utrecht-link-list-link-text-decoration: none;
230
252
  --utrecht-icon-baseline-inset-block-start: 0.125em;
@@ -337,10 +359,6 @@
337
359
  --utrecht-action-activate-cursor: pointer;
338
360
  --utrecht-column-layout-column-width: 350px;
339
361
  --utrecht-column-layout-column-rule-width: 2px;
340
- --utrecht-code-block-padding-inline-end: 20px;
341
- --utrecht-code-block-padding-inline-start: 20px;
342
- --utrecht-code-block-padding-block-end: 20px;
343
- --utrecht-code-block-padding-block-start: 20px;
344
362
  --utrecht-checkbox-margin-block-start: 0;
345
363
  --utrecht-checkbox-focus-border-width: 2px;
346
364
  --utrecht-checkbox-size: 24px;
@@ -387,11 +405,11 @@
387
405
  --utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
388
406
  --utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
389
407
  --utrecht-breadcrumb-nav-min-block-size: 34px;
408
+ --utrecht-body-line-height: 1.4;
390
409
  --utrecht-blockquote-margin-block-end: 1.6em;
391
410
  --utrecht-blockquote-margin-block-start: 1.6em;
392
411
  --utrecht-blockquote-margin-inline-end: 1.6em;
393
412
  --utrecht-blockquote-margin-inline-start: 1.6em;
394
- --utrecht-badge-border-radius: 0; /* Default corner radius for badge components */
395
413
  --utrecht-badge-counter-padding-inline: 1ex; /* Default inline padding color for badge components */
396
414
  --utrecht-badge-counter-padding-block: 1ex; /* Default block padding for badge components */
397
415
  --utrecht-backdrop-reduced-transparency-opacity: 0.98;
@@ -407,6 +425,53 @@
407
425
  --utrecht-accordion-button-icon-size: 24px;
408
426
  --utrecht-accordion-button-hover-background-color: inherit;
409
427
  --utrecht-accordion-button-border-width: 0;
428
+ --nl-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
429
+ --nl-skip-link-text-decoration: var(--utrecht-link-text-decoration);
430
+ --nl-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);
431
+ --nl-paragraph-lead-line-height: var(--utrecht-typography-line-height-md);
432
+ --nl-paragraph-lead-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
433
+ --nl-paragraph-lead-font-size: var(--utrecht-typography-scale-xl-font-size);
434
+ --nl-paragraph-line-height: var(--utrecht-typography-line-height-md);
435
+ --nl-paragraph-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
436
+ --nl-paragraph-font-size: var(--utrecht-typography-scale-md-font-size);
437
+ --nl-paragraph-font-family: var(--utrecht-typography-sans-serif-font-family);
438
+ --nl-number-badge-font-size: var(--utrecht-typography-scale-md-font-size);
439
+ --nl-number-badge-color: var(--utrecht-color-white);
440
+ --nl-number-badge-background-color: var(--utrecht-color-red-40);
441
+ --nl-mark-color: var(--utrecht-color-black);
442
+ --nl-mark-background-color: var(--utrecht-color-yellow-60);
443
+ --nl-heading-level-6-line-height: var(--utrecht-typography-line-height-md);
444
+ --nl-heading-level-6-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
445
+ --nl-heading-level-6-font-size: var(--utrecht-typography-scale-sm-font-size);
446
+ --nl-heading-level-6-font-family: var(--utrecht-typography-sans-serif-font-family);
447
+ --nl-heading-level-5-line-height: var(--utrecht-typography-line-height-md);
448
+ --nl-heading-level-5-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
449
+ --nl-heading-level-5-font-size: var(--utrecht-typography-scale-sm-font-size);
450
+ --nl-heading-level-5-font-family: var(--utrecht-typography-sans-serif-font-family);
451
+ --nl-heading-level-4-line-height: var(--utrecht-typography-line-height-md);
452
+ --nl-heading-level-4-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
453
+ --nl-heading-level-4-font-size: var(--utrecht-typography-scale-lg-font-size);
454
+ --nl-heading-level-4-font-family: var(--utrecht-typography-sans-serif-font-family);
455
+ --nl-heading-level-3-line-height: var(--utrecht-typography-line-height-sm);
456
+ --nl-heading-level-3-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
457
+ --nl-heading-level-3-font-size: var(--utrecht-typography-scale-xl-font-size);
458
+ --nl-heading-level-3-font-family: var(--utrecht-typography-sans-serif-font-family);
459
+ --nl-heading-level-2-line-height: var(--utrecht-typography-line-height-sm);
460
+ --nl-heading-level-2-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
461
+ --nl-heading-level-2-font-size: var(--utrecht-typography-scale-xl-font-size);
462
+ --nl-heading-level-2-font-family: var(--utrecht-typography-sans-serif-font-family);
463
+ --nl-heading-level-1-line-height: var(--utrecht-typography-line-height-sm);
464
+ --nl-heading-level-1-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
465
+ --nl-heading-level-1-font-size: var(--utrecht-typography-scale-4xl-font-size);
466
+ --nl-heading-level-1-font-family: var(--utrecht-typography-sans-serif-font-family);
467
+ --nl-data-badge-padding-inline: var(--utrecht-space-inline-sm);
468
+ --nl-data-badge-padding-block: var(--utrecht-space-block-xs);
469
+ --nl-data-badge-color: var(--utrecht-color-white);
470
+ --nl-data-badge-background-color: var(--utrecht-color-grey-30);
471
+ --nl-code-block-line-height: var(--utrecht-typography-line-height-md);
472
+ --nl-code-block-font-size: var(--utrecht-typography-scale-md-font-size);
473
+ --nl-code-block-color: var(--utrecht-color-black);
474
+ --nl-code-block-background-color: var(--utrecht-color-grey-95);
410
475
  --denhaag-process-steps-sub-step-heading-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
411
476
  --denhaag-process-steps-sub-step-heading-font-size: var(--utrecht-typography-scale-sm-font-size);
412
477
  --denhaag-process-steps-sub-step-heading-color: var(--utrecht-color-grey-15);
@@ -490,8 +555,6 @@
490
555
  --utrecht-spotlight-section-padding-block-start: var(--utrecht-space-block-md);
491
556
  --utrecht-spotlight-section-color: var(--utrecht-color-black);
492
557
  --utrecht-spotlight-section-background-color: var(--utrecht-color-grey-90);
493
- --utrecht-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
494
- --utrecht-skip-link-text-decoration: var(--utrecht-link-text-decoration);
495
558
  --utrecht-separator-margin-block-start: var(--utrecht-space-block-md);
496
559
  --utrecht-separator-margin-block-end: var(--utrecht-space-block-md);
497
560
  --utrecht-separator-color: var(--utrecht-color-grey-90);
@@ -515,11 +578,12 @@
515
578
  --utrecht-search-bar-button-color: var(--utrecht-color-white);
516
579
  --utrecht-search-bar-button-border-color: var(--utrecht-color-red-40);
517
580
  --utrecht-search-bar-button-background-color: var(--utrecht-color-red-40);
581
+ --utrecht-root-color: var(--utrecht-color-grey-10);
582
+ --utrecht-root-background-color: var(--utrecht-color-grey-95);
518
583
  --utrecht-rich-text-best-friend-margin-block-end: var(--utrecht-space-block-2xs);
519
584
  --utrecht-rich-text-friend-margin-block-end: var(--utrecht-space-block-xs);
520
585
  --utrecht-rich-text-acquaintance-margin-block-end: var(--utrecht-space-block-md);
521
586
  --utrecht-rich-text-stranger-margin-block-end: var(--utrecht-space-block-2xl);
522
- --utrecht-radio-button-color: var(--utrecht-color-white);
523
587
  --utrecht-radio-button-disabled-color: var(--utrecht-color-white);
524
588
  --utrecht-radio-button-disabled-border-color: var(--utrecht-color-grey-80);
525
589
  --utrecht-radio-button-disabled-background-color: var(--utrecht-color-grey-80);
@@ -533,17 +597,11 @@
533
597
  --utrecht-radio-button-checked-border-color: var(--utrecht-color-blue-40);
534
598
  --utrecht-radio-button-checked-background-color: var(--utrecht-color-blue-40);
535
599
  --utrecht-radio-button-active-background-color: var(--utrecht-color-blue-80);
600
+ --utrecht-radio-button-color: var(--utrecht-color-white);
536
601
  --utrecht-pre-heading-margin-block-start: var(--utrecht-space-row-2xl);
537
602
  --utrecht-pre-heading-font-size: var(--utrecht-typography-scale-md-font-size);
538
603
  --utrecht-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);
539
- --utrecht-paragraph-lead-line-height: var(--utrecht-typography-line-height-md);
540
- --utrecht-paragraph-lead-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
541
- --utrecht-paragraph-lead-font-size: var(--utrecht-typography-scale-xl-font-size);
542
604
  --utrecht-paragraph-margin-block-start: var(--utrecht-space-block-md);
543
- --utrecht-paragraph-line-height: var(--utrecht-typography-line-height-md);
544
- --utrecht-paragraph-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
545
- --utrecht-paragraph-font-size: var(--utrecht-typography-scale-md-font-size);
546
- --utrecht-paragraph-font-family: var(--utrecht-typography-sans-serif-font-family);
547
605
  --utrecht-pagination-relative-link-hover-color: var(--utrecht-color-white);
548
606
  --utrecht-pagination-relative-link-hover-border-color: var(--utrecht-color-blue-35);
549
607
  --utrecht-pagination-relative-link-hover-background-color: var(--utrecht-color-blue-35);
@@ -562,16 +620,18 @@
562
620
  --utrecht-pagination-font-size: var(--utrecht-typography-scale-sm-font-size);
563
621
  --utrecht-page-color: var(--utrecht-color-black);
564
622
  --utrecht-page-background-color: var(--utrecht-color-white);
565
- --utrecht-page-footer-padding-block-start: var(--utrecht-space-block-3xl);
566
- --utrecht-page-footer-padding-block-end: var(--utrecht-space-block-3xl);
567
- --utrecht-page-footer-padding-inline-start: var(--utrecht-space-inline-2xl);
568
- --utrecht-page-footer-padding-inline-end: var(--utrecht-space-inline-2xl);
623
+ --utrecht-page-header-content-color: var(--utrecht-color-black);
624
+ --utrecht-page-header-content-background-color: var(--utrecht-color-white);
625
+ --utrecht-page-footer-content-padding-inline: var(--utrecht-space-inline-2xl);
626
+ --utrecht-page-footer-content-padding-block-start: var(--utrecht-space-block-3xl);
627
+ --utrecht-page-footer-content-padding-block-end: var(--utrecht-space-block-3xl);
569
628
  --utrecht-page-footer-background-image: linear-gradient(45deg, var(--utrecht-color-red-40), var(--utrecht-color-red-40) 50%, #d63433 50%);
570
629
  --utrecht-page-footer-background-color: var(--utrecht-color-red-40);
571
630
  --utrecht-page-footer-color: var(--utrecht-color-white);
572
- --utrecht-number-badge-font-size: var(--utrecht-typography-scale-md-font-size);
573
- --utrecht-number-badge-color: var(--utrecht-color-white); /* Default text color for badge components */
574
- --utrecht-number-badge-background-color: var(--utrecht-color-red-40);
631
+ --utrecht-page-body-content-color: var(--utrecht-color-black);
632
+ --utrecht-page-body-content-background-color: var(--utrecht-color-white);
633
+ --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
634
+ --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /* Default block padding for badge components */
575
635
  --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
576
636
  --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
577
637
  --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
@@ -595,10 +655,6 @@
595
655
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
596
656
  --utrecht-nav-bar-link-padding-block-end: var(--utrecht-space-block-xs);
597
657
  --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
598
- --utrecht-nav-bar-color: var(--utrecht-color-black);
599
- --utrecht-nav-bar-background-color: var(--utrecht-color-white);
600
- --utrecht-mark-color: var(--utrecht-color-black);
601
- --utrecht-mark-background-color: var(--utrecht-color-yellow-60);
602
658
  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
603
659
  --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
604
660
  --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
@@ -655,30 +711,6 @@
655
711
  --utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
656
712
  --utrecht-index-char-nav-margin-block-start: var(--utrecht-space-block-lg);
657
713
  --utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
658
- --utrecht-heading-6-line-height: var(--utrecht-typography-line-height-md);
659
- --utrecht-heading-6-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
660
- --utrecht-heading-6-font-size: var(--utrecht-typography-scale-sm-font-size);
661
- --utrecht-heading-6-font-family: var(--utrecht-typography-sans-serif-font-family);
662
- --utrecht-heading-5-line-height: var(--utrecht-typography-line-height-md);
663
- --utrecht-heading-5-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
664
- --utrecht-heading-5-font-size: var(--utrecht-typography-scale-sm-font-size);
665
- --utrecht-heading-5-font-family: var(--utrecht-typography-sans-serif-font-family);
666
- --utrecht-heading-4-line-height: var(--utrecht-typography-line-height-md);
667
- --utrecht-heading-4-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
668
- --utrecht-heading-4-font-size: var(--utrecht-typography-scale-lg-font-size);
669
- --utrecht-heading-4-font-family: var(--utrecht-typography-sans-serif-font-family);
670
- --utrecht-heading-3-line-height: var(--utrecht-typography-line-height-sm);
671
- --utrecht-heading-3-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
672
- --utrecht-heading-3-font-size: var(--utrecht-typography-scale-xl-font-size);
673
- --utrecht-heading-3-font-family: var(--utrecht-typography-sans-serif-font-family);
674
- --utrecht-heading-2-line-height: var(--utrecht-typography-line-height-sm);
675
- --utrecht-heading-2-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
676
- --utrecht-heading-2-font-size: var(--utrecht-typography-scale-xl-font-size);
677
- --utrecht-heading-2-font-family: var(--utrecht-typography-sans-serif-font-family);
678
- --utrecht-heading-1-line-height: var(--utrecht-typography-line-height-sm);
679
- --utrecht-heading-1-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
680
- --utrecht-heading-1-font-size: var(--utrecht-typography-scale-4xl-font-size);
681
- --utrecht-heading-1-font-family: var(--utrecht-typography-sans-serif-font-family);
682
714
  --utrecht-form-toggle-focus-border-color: var(--utrecht-color-black);
683
715
  --utrecht-form-toggle-checked-accent-color: var(--utrecht-color-blue-35);
684
716
  --utrecht-form-toggle-thumb-disabled-background-color: var(--utrecht-color-white);
@@ -755,12 +787,13 @@
755
787
  --utrecht-feedback-danger-color: var(--utrecht-color-red-40);
756
788
  --utrecht-column-layout-gap: var(--utrecht-space-column-md);
757
789
  --utrecht-column-layout-column-rule-color: var(--utrecht-color-grey-80);
790
+ --utrecht-code-block-padding-inline-end: var(--nl-code-block-padding-inline);
791
+ --utrecht-code-block-padding-inline-start: var(--nl-code-block-padding-inline);
792
+ --utrecht-code-block-padding-block-end: var(--nl-code-block-padding-block);
793
+ --utrecht-code-block-padding-block-start: var(--nl-code-block-padding-block);
758
794
  --utrecht-code-block-margin-block-end: var(--utrecht-space-block-lg);
759
795
  --utrecht-code-block-margin-block-start: var(--utrecht-space-block-lg);
760
- --utrecht-code-block-line-height: var(--utrecht-typography-line-height-md);
761
- --utrecht-code-block-font-size: var(--utrecht-typography-scale-md-font-size);
762
- --utrecht-code-block-color: var(--utrecht-color-black);
763
- --utrecht-code-block-background-color: var(--utrecht-color-grey-95);
796
+ --utrecht-code-block-font-family: var(--nl-code-block-font-family);
764
797
  --utrecht-checkbox-indeterminate-background-color: var(--utrecht-color-blue-40);
765
798
  --utrecht-checkbox-checked-background-color: var(--utrecht-color-blue-40);
766
799
  --utrecht-checkbox-checked-border-color: var(--utrecht-color-blue-40);
@@ -891,14 +924,15 @@
891
924
  --utrecht-breadcrumb-nav-item-padding-block-end: var(--utrecht-space-block-xs);
892
925
  --utrecht-breadcrumb-nav-item-padding-block-start: var(--utrecht-space-block-xs);
893
926
  --utrecht-breadcrumb-nav-font-size: var(--utrecht-typography-scale-md-font-size);
927
+ --utrecht-body-color: var(--utrecht-color-black);
928
+ --utrecht-body-background-color: var(--utrecht-color-white);
929
+ --utrecht-body-font-size: var(--utrecht-typography-scale-md-font-size);
930
+ --utrecht-body-font-family: var(--utrecht-typography-sans-serif-font-family);
894
931
  --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
895
932
  --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
896
933
  --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
897
934
  --utrecht-badge-font-style: var(--utrecht-typography-font-style-normal);
898
- --utrecht-badge-padding-inline: var(--utrecht-space-inline-sm); /* Default inline padding color for badge components */
899
- --utrecht-badge-padding-block: var(--utrecht-space-block-xs); /* Default block padding for badge components */
900
- --utrecht-badge-color: var(--utrecht-color-white); /* Default text color for badge components */
901
- --utrecht-badge-background-color: var(--utrecht-color-grey-30); /* Default background color for badge components */
935
+ --utrecht-badge-border-radius: var(--nl-data-badge-border-radius); /* Default corner radius for badge components */
902
936
  --utrecht-badge-list-item-margin-inline: var(--utrecht-space-block-sm);
903
937
  --utrecht-badge-list-item-margin-block: var(--utrecht-space-block-xs);
904
938
  --utrecht-badge-counter-font-size: var(--utrecht-typography-scale-md-font-size);
@@ -950,32 +984,70 @@
950
984
  --utrecht-accordion-button-padding-inline-start: var(--utrecht-space-block-md);
951
985
  --utrecht-accordion-button-padding-inline-end: var(--utrecht-space-block-md);
952
986
  --utrecht-accordion-row-gap: var(--utrecht-space-block-xs);
987
+ --signalen-modal-dialog-color: var(--utrecht-body-color);
988
+ --signalen-modal-dialog-background-color: var(--utrecht-body-background-color);
953
989
  --of-progress-indicator-background-color: var(--utrecht-document-background-color);
954
990
  --of-page-footer-fg: var(--utrecht-page-footer-color);
955
991
  --of-page-footer-bg: var(--utrecht-page-footer-background-color);
956
992
  --of-layout-background: var(--utrecht-document-background-color);
993
+ --nl-skip-link-focus-visible-background-color: var(--utrecht-topnav-link-focus-background-color);
994
+ --nl-skip-link-focus-visible-color: var(--utrecht-topnav-link-focus-color);
995
+ --nl-skip-link-padding-inline: var(--utrecht-button-padding-inline-start);
996
+ --nl-skip-link-padding-block: var(--utrecht-button-padding-block-start);
997
+ --nl-skip-link-color: var(--utrecht-topnav-link-color);
998
+ --nl-skip-link-background-color: var(--utrecht-topnav-list-background-color);
999
+ --nl-paragraph-lead-color: var(--utrecht-document-color);
1000
+ --nl-number-badge-border-radius: var(--nl-number-badge-font-size);
957
1001
  --denhaag-process-steps-sub-step-line-color: var(--denhaag-process-steps-step-line-color);
958
1002
  --utrecht-toptask-link-hover-color: var(--utrecht-button-primary-action-hover-color);
959
1003
  --utrecht-toptask-link-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
960
1004
  --utrecht-toptask-link-color: var(--utrecht-button-primary-action-color);
961
1005
  --utrecht-toptask-link-background-color: var(--utrecht-button-primary-action-background-color);
962
- --utrecht-skip-link-focus-color: var(--utrecht-topnav-link-focus-color);
963
- --utrecht-skip-link-focus-background-color: var(--utrecht-topnav-link-focus-background-color);
964
- --utrecht-skip-link-padding-inline-end: var(--utrecht-button-padding-inline-end);
965
- --utrecht-skip-link-padding-inline-start: var(--utrecht-button-padding-inline-start);
966
- --utrecht-skip-link-padding-block-end: var(--utrecht-button-padding-block-end);
967
- --utrecht-skip-link-padding-block-start: var(--utrecht-button-padding-block-start);
968
- --utrecht-skip-link-color: var(--utrecht-topnav-link-color);
969
- --utrecht-skip-link-background-color: var(--utrecht-topnav-list-background-color);
1006
+ --utrecht-skip-link-focus-visible-text-decoration: var(--nl-skip-link-focus-visible-text-decoration);
1007
+ --utrecht-skip-link-text-decoration: var(--nl-skip-link-text-decoration);
970
1008
  --utrecht-radio-button-border-color: var(--utrecht-form-control-border-color);
971
1009
  --utrecht-radio-button-background-color: var(--utrecht-form-control-background-color);
972
- --utrecht-paragraph-lead-color: var(--utrecht-document-color);
973
- --utrecht-number-badge-border-radius: var(--utrecht-number-badge-font-size);
1010
+ --utrecht-paragraph-lead-line-height: var(--nl-paragraph-lead-line-height);
1011
+ --utrecht-paragraph-lead-font-weight: var(--nl-paragraph-lead-font-weight);
1012
+ --utrecht-paragraph-lead-font-size: var(--nl-paragraph-lead-font-size);
1013
+ --utrecht-paragraph-line-height: var(--nl-paragraph-line-height);
1014
+ --utrecht-paragraph-font-weight: var(--nl-paragraph-font-weight);
1015
+ --utrecht-paragraph-font-size: var(--nl-paragraph-font-size);
1016
+ --utrecht-paragraph-font-family: var(--nl-paragraph-font-family);
1017
+ --utrecht-number-badge-font-size: var(--nl-number-badge-font-size);
1018
+ --utrecht-number-badge-color: var(--nl-number-badge-color); /* Default text color for badge components */
1019
+ --utrecht-number-badge-background-color: var(--nl-number-badge-background-color);
1020
+ --utrecht-mark-color: var(--nl-mark-color);
1021
+ --utrecht-mark-background-color: var(--nl-mark-background-color);
974
1022
  --utrecht-listbox-border-width: var(--utrecht-form-control-border-width);
975
1023
  --utrecht-listbox-border-color: var(--utrecht-form-control-border-color);
976
1024
  --utrecht-link-visited-color: var(--utrecht-link-color);
977
1025
  --utrecht-link-hover-color: var(--utrecht-link-focus-color);
978
1026
  --utrecht-link-active-color: var(--utrecht-link-color);
1027
+ --utrecht-heading-6-line-height: var(--nl-heading-level-6-line-height);
1028
+ --utrecht-heading-6-font-weight: var(--nl-heading-level-6-font-weight);
1029
+ --utrecht-heading-6-font-size: var(--nl-heading-level-6-font-size);
1030
+ --utrecht-heading-6-font-family: var(--nl-heading-level-6-font-family);
1031
+ --utrecht-heading-5-line-height: var(--nl-heading-level-5-line-height);
1032
+ --utrecht-heading-5-font-weight: var(--nl-heading-level-5-font-weight);
1033
+ --utrecht-heading-5-font-size: var(--nl-heading-level-5-font-size);
1034
+ --utrecht-heading-5-font-family: var(--nl-heading-level-5-font-family);
1035
+ --utrecht-heading-4-line-height: var(--nl-heading-level-4-line-height);
1036
+ --utrecht-heading-4-font-weight: var(--nl-heading-level-4-font-weight);
1037
+ --utrecht-heading-4-font-size: var(--nl-heading-level-4-font-size);
1038
+ --utrecht-heading-4-font-family: var(--nl-heading-level-4-font-family);
1039
+ --utrecht-heading-3-line-height: var(--nl-heading-level-3-line-height);
1040
+ --utrecht-heading-3-font-weight: var(--nl-heading-level-3-font-weight);
1041
+ --utrecht-heading-3-font-size: var(--nl-heading-level-3-font-size);
1042
+ --utrecht-heading-3-font-family: var(--nl-heading-level-3-font-family);
1043
+ --utrecht-heading-2-line-height: var(--nl-heading-level-2-line-height);
1044
+ --utrecht-heading-2-font-weight: var(--nl-heading-level-2-font-weight);
1045
+ --utrecht-heading-2-font-size: var(--nl-heading-level-2-font-size);
1046
+ --utrecht-heading-2-font-family: var(--nl-heading-level-2-font-family);
1047
+ --utrecht-heading-1-line-height: var(--nl-heading-level-1-line-height);
1048
+ --utrecht-heading-1-font-weight: var(--nl-heading-level-1-font-weight);
1049
+ --utrecht-heading-1-font-size: var(--nl-heading-level-1-font-size);
1050
+ --utrecht-heading-1-font-family: var(--nl-heading-level-1-font-family);
979
1051
  --utrecht-form-field-error-message-color: var(--utrecht-feedback-invalid-color);
980
1052
  --utrecht-form-field-description-warning-color: var(--utrecht-feedback-warning-color);
981
1053
  --utrecht-form-field-description-invalid-color: var(--utrecht-feedback-invalid-color);
@@ -995,6 +1067,10 @@
995
1067
  --utrecht-feedback-warning-background-color: var(--utrecht-feedback-warning-color);
996
1068
  --utrecht-feedback-danger-border-color: var(--utrecht-feedback-danger-color);
997
1069
  --utrecht-feedback-danger-background-color: var(--utrecht-feedback-danger-color);
1070
+ --utrecht-code-block-line-height: var(--nl-code-block-line-height);
1071
+ --utrecht-code-block-font-size: var(--nl-code-block-font-size);
1072
+ --utrecht-code-block-color: var(--nl-code-block-color);
1073
+ --utrecht-code-block-background-color: var(--nl-code-block-background-color);
998
1074
  --utrecht-checkbox-color: var(--utrecht-form-control-color);
999
1075
  --utrecht-checkbox-border-color: var(--utrecht-form-control-border-color);
1000
1076
  --utrecht-checkbox-background-color: var(--utrecht-form-control-background-color);
@@ -1009,9 +1085,22 @@
1009
1085
  --utrecht-button-pressed-background-color: var(--utrecht-button-active-background-color);
1010
1086
  --utrecht-breadcrumb-nav-arrows-link-focus-background-color: var(--utrecht-focus-background-color);
1011
1087
  --utrecht-breadcrumb-nav-link-focus-background-color: var(--utrecht-focus-background-color);
1088
+ --utrecht-badge-padding-inline: var(--nl-data-badge-padding-inline); /* Default inline padding color for badge components */
1089
+ --utrecht-badge-padding-block: var(--nl-data-badge-padding-block); /* Default block padding for badge components */
1090
+ --utrecht-badge-color: var(--nl-data-badge-color); /* Default text color for badge components */
1091
+ --utrecht-badge-background-color: var(--nl-data-badge-background-color); /* Default background color for badge components */
1012
1092
  --utrecht-badge-counter-border-radius: var(--utrecht-badge-counter-font-size); /* Default corner radius for badge components */
1013
1093
  --of-layout-bg: var(--of-layout-background);
1094
+ --utrecht-skip-link-focus-color: var(--nl-skip-link-focus-visible-color);
1095
+ --utrecht-skip-link-focus-background-color: var(--nl-skip-link-focus-visible-background-color);
1096
+ --utrecht-skip-link-padding-inline-end: var(--nl-skip-link-padding-inline);
1097
+ --utrecht-skip-link-padding-inline-start: var(--nl-skip-link-padding-inline);
1098
+ --utrecht-skip-link-padding-block-end: var(--nl-skip-link-padding-block);
1099
+ --utrecht-skip-link-padding-block-start: var(--nl-skip-link-padding-block);
1100
+ --utrecht-skip-link-color: var(--nl-skip-link-color);
1101
+ --utrecht-skip-link-background-color: var(--nl-skip-link-background-color);
1014
1102
  --utrecht-radio-button-invalid-border-color: var(--utrecht-form-control-invalid-border-color);
1103
+ --utrecht-number-badge-border-radius: var(--nl-number-badge-border-radius);
1015
1104
  --utrecht-form-field-invalid-border-inline-start-color: var(--utrecht-form-control-invalid-border-color);
1016
1105
  --utrecht-form-field-description-valid-color: var(--utrecht-feedback-valid-color);
1017
1106
  --utrecht-feedback-active-border-color: var(--utrecht-feedback-safe-border-color);
@@ -1046,7 +1135,14 @@
1046
1135
  @media (prefers-color-scheme: dark) {
1047
1136
  .utrecht-theme--media-query,
1048
1137
  .utrecht-theme--media-query-color-scheme {
1138
+ --signalen-progress-bar-border-radius: 4px;
1049
1139
  --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
1140
+ --nl-number-badge-padding-inline: 1ex;
1141
+ --nl-number-badge-padding-block: 1ex;
1142
+ --nl-data-badge-border-radius: 0;
1143
+ --nl-code-block-padding-inline: 20px;
1144
+ --nl-code-block-padding-block: 20px;
1145
+ --nl-code-block-font-family: "Monaco";
1050
1146
  --denhaag-process-steps-sub-step-marker-size: 12px;
1051
1147
  --denhaag-process-steps-step-marker-size: 28px;
1052
1148
  --utrecht-toptask-nav-link-grid-max-inline-size: 240px;
@@ -1190,19 +1286,35 @@
1190
1286
  --utrecht-pagination-page-link-background-color: transparent;
1191
1287
  --utrecht-pagination-margin-block-end: 1em;
1192
1288
  --utrecht-pagination-margin-block-start: 0;
1193
- --utrecht-page-padding-inline-start: 2em;
1289
+ --utrecht-page-padding-inline-start: 0;
1194
1290
  --utrecht-page-padding-block-end: 1em;
1195
- --utrecht-page-padding-inline-end: 2em;
1291
+ --utrecht-page-padding-inline-end: 0;
1196
1292
  --utrecht-page-padding-block-start: 1.8em;
1197
1293
  --utrecht-page-max-inline-size: 1184px;
1198
1294
  --utrecht-page-margin-inline-end: 2em;
1199
1295
  --utrecht-page-margin-inline-start: 2em;
1200
- --utrecht-page-header-padding-inline-end: 2.4em;
1201
- --utrecht-page-header-padding-inline-start: 2em;
1202
- --utrecht-page-header-padding-block-end: 1em;
1203
- --utrecht-page-header-padding-block-start: 1.8em;
1296
+ --utrecht-page-header-content-padding-inline: 2em;
1297
+ --utrecht-page-header-content-max-inline-size: 1184px;
1298
+ --utrecht-page-header-content-padding-inline-end: 2.4em;
1299
+ --utrecht-page-header-content-padding-inline-start: 2em;
1300
+ --utrecht-page-header-content-padding-block-end: 1em;
1301
+ --utrecht-page-header-content-padding-block-start: 1.8em;
1302
+ --utrecht-page-header-padding-inline-end: 0;
1303
+ --utrecht-page-header-padding-inline-start: 0;
1304
+ --utrecht-page-header-padding-block-end: 0;
1305
+ --utrecht-page-header-padding-block-start: 0;
1306
+ --utrecht-page-footer-content-max-inline-size: 1184px;
1204
1307
  --utrecht-page-content-padding-block-end: 2em;
1205
1308
  --utrecht-page-content-padding-block-start: 2em;
1309
+ --utrecht-page-body-padding-block-start: 0;
1310
+ --utrecht-page-body-padding-block-end: 0;
1311
+ --utrecht-page-body-padding-inline-start: 0;
1312
+ --utrecht-page-body-padding-inline-end: 0;
1313
+ --utrecht-page-body-content-padding-inline-end: 2.4em;
1314
+ --utrecht-page-body-content-max-inline-size: 1184px;
1315
+ --utrecht-page-body-content-padding-inline-start: 2em;
1316
+ --utrecht-page-body-content-padding-block-end: 1em;
1317
+ --utrecht-page-body-content-padding-block-start: 0;
1206
1318
  --utrecht-ordered-list-item-padding-inline-start: 0;
1207
1319
  --utrecht-ordered-list-item-margin-block-end: 0.25em;
1208
1320
  --utrecht-ordered-list-item-margin-block-start: 0.25em;
@@ -1211,8 +1323,6 @@
1211
1323
  --utrecht-ordered-list-margin-block-start: 0;
1212
1324
  --utrecht-number-data-negative-color: red;
1213
1325
  --utrecht-number-data-positive-color: green;
1214
- --utrecht-number-badge-padding-inline: 1ex; /* Default inline padding color for badge components */
1215
- --utrecht-number-badge-padding-block: 1ex; /* Default block padding for badge components */
1216
1326
  --utrecht-topnav-link-focus-text-decoration: none;
1217
1327
  --utrecht-topnav-link-focus-border-type: dotted;
1218
1328
  --utrecht-mapcontrolbutton-margin-inline-start: 0;
@@ -1241,6 +1351,7 @@
1241
1351
  --utrecht-link-social-icon-size: 26px;
1242
1352
  --utrecht-link-social-size: 40px;
1243
1353
  --utrecht-link-social-border-width: 2px;
1354
+ --utrecht-link-list-icon-inset-block-start: 0.15em;
1244
1355
  --utrecht-link-list-icon-size: 14px;
1245
1356
  --utrecht-link-list-link-text-decoration: none;
1246
1357
  --utrecht-icon-baseline-inset-block-start: 0.125em;
@@ -1354,10 +1465,6 @@
1354
1465
  --utrecht-action-activate-cursor: pointer;
1355
1466
  --utrecht-column-layout-column-width: 350px;
1356
1467
  --utrecht-column-layout-column-rule-width: 2px;
1357
- --utrecht-code-block-padding-inline-end: 20px;
1358
- --utrecht-code-block-padding-inline-start: 20px;
1359
- --utrecht-code-block-padding-block-end: 20px;
1360
- --utrecht-code-block-padding-block-start: 20px;
1361
1468
  --utrecht-checkbox-margin-block-start: 0;
1362
1469
  --utrecht-checkbox-focus-border-width: 2px;
1363
1470
  --utrecht-checkbox-size: 24px;
@@ -1404,11 +1511,11 @@
1404
1511
  --utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
1405
1512
  --utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
1406
1513
  --utrecht-breadcrumb-nav-min-block-size: 34px;
1514
+ --utrecht-body-line-height: 1.4;
1407
1515
  --utrecht-blockquote-margin-block-end: 1.6em;
1408
1516
  --utrecht-blockquote-margin-block-start: 1.6em;
1409
1517
  --utrecht-blockquote-margin-inline-end: 1.6em;
1410
1518
  --utrecht-blockquote-margin-inline-start: 1.6em;
1411
- --utrecht-badge-border-radius: 0; /* Default corner radius for badge components */
1412
1519
  --utrecht-badge-counter-padding-inline: 1ex; /* Default inline padding color for badge components */
1413
1520
  --utrecht-badge-counter-padding-block: 1ex; /* Default block padding for badge components */
1414
1521
  --utrecht-backdrop-reduced-transparency-opacity: 0.98;
@@ -1426,6 +1533,53 @@
1426
1533
  --utrecht-accordion-button-icon-size: 24px;
1427
1534
  --utrecht-accordion-button-hover-background-color: inherit;
1428
1535
  --utrecht-accordion-button-border-width: 0;
1536
+ --nl-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
1537
+ --nl-skip-link-text-decoration: var(--utrecht-link-text-decoration);
1538
+ --nl-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);
1539
+ --nl-paragraph-lead-line-height: var(--utrecht-typography-line-height-md);
1540
+ --nl-paragraph-lead-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
1541
+ --nl-paragraph-lead-font-size: var(--utrecht-typography-scale-xl-font-size);
1542
+ --nl-paragraph-line-height: var(--utrecht-typography-line-height-md);
1543
+ --nl-paragraph-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
1544
+ --nl-paragraph-font-size: var(--utrecht-typography-scale-md-font-size);
1545
+ --nl-paragraph-font-family: var(--utrecht-typography-sans-serif-font-family);
1546
+ --nl-number-badge-font-size: var(--utrecht-typography-scale-md-font-size);
1547
+ --nl-number-badge-color: var(--utrecht-color-white);
1548
+ --nl-number-badge-background-color: var(--utrecht-color-red-40);
1549
+ --nl-mark-color: var(--utrecht-color-black);
1550
+ --nl-mark-background-color: var(--utrecht-color-yellow-60);
1551
+ --nl-heading-level-6-line-height: var(--utrecht-typography-line-height-md);
1552
+ --nl-heading-level-6-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
1553
+ --nl-heading-level-6-font-size: var(--utrecht-typography-scale-sm-font-size);
1554
+ --nl-heading-level-6-font-family: var(--utrecht-typography-sans-serif-font-family);
1555
+ --nl-heading-level-5-line-height: var(--utrecht-typography-line-height-md);
1556
+ --nl-heading-level-5-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
1557
+ --nl-heading-level-5-font-size: var(--utrecht-typography-scale-sm-font-size);
1558
+ --nl-heading-level-5-font-family: var(--utrecht-typography-sans-serif-font-family);
1559
+ --nl-heading-level-4-line-height: var(--utrecht-typography-line-height-md);
1560
+ --nl-heading-level-4-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
1561
+ --nl-heading-level-4-font-size: var(--utrecht-typography-scale-lg-font-size);
1562
+ --nl-heading-level-4-font-family: var(--utrecht-typography-sans-serif-font-family);
1563
+ --nl-heading-level-3-line-height: var(--utrecht-typography-line-height-sm);
1564
+ --nl-heading-level-3-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
1565
+ --nl-heading-level-3-font-size: var(--utrecht-typography-scale-xl-font-size);
1566
+ --nl-heading-level-3-font-family: var(--utrecht-typography-sans-serif-font-family);
1567
+ --nl-heading-level-2-line-height: var(--utrecht-typography-line-height-sm);
1568
+ --nl-heading-level-2-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
1569
+ --nl-heading-level-2-font-size: var(--utrecht-typography-scale-xl-font-size);
1570
+ --nl-heading-level-2-font-family: var(--utrecht-typography-sans-serif-font-family);
1571
+ --nl-heading-level-1-line-height: var(--utrecht-typography-line-height-sm);
1572
+ --nl-heading-level-1-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
1573
+ --nl-heading-level-1-font-size: var(--utrecht-typography-scale-4xl-font-size);
1574
+ --nl-heading-level-1-font-family: var(--utrecht-typography-sans-serif-font-family);
1575
+ --nl-data-badge-padding-inline: var(--utrecht-space-inline-sm);
1576
+ --nl-data-badge-padding-block: var(--utrecht-space-block-xs);
1577
+ --nl-data-badge-color: var(--utrecht-color-white);
1578
+ --nl-data-badge-background-color: var(--utrecht-color-grey-30);
1579
+ --nl-code-block-line-height: var(--utrecht-typography-line-height-md);
1580
+ --nl-code-block-font-size: var(--utrecht-typography-scale-md-font-size);
1581
+ --nl-code-block-color: var(--utrecht-color-black);
1582
+ --nl-code-block-background-color: var(--utrecht-color-grey-95);
1429
1583
  --denhaag-process-steps-sub-step-heading-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
1430
1584
  --denhaag-process-steps-sub-step-heading-font-size: var(--utrecht-typography-scale-sm-font-size);
1431
1585
  --denhaag-process-steps-sub-step-heading-color: var(--utrecht-color-grey-15);
@@ -1511,8 +1665,6 @@
1511
1665
  --utrecht-spotlight-section-padding-block-start: var(--utrecht-space-block-md);
1512
1666
  --utrecht-spotlight-section-color: var(--utrecht-color-grey-15);
1513
1667
  --utrecht-spotlight-section-background-color: var(--utrecht-color-grey-20);
1514
- --utrecht-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
1515
- --utrecht-skip-link-text-decoration: var(--utrecht-link-text-decoration);
1516
1668
  --utrecht-separator-margin-block-start: var(--utrecht-space-block-md);
1517
1669
  --utrecht-separator-margin-block-end: var(--utrecht-space-block-md);
1518
1670
  --utrecht-separator-color: var(--utrecht-color-grey-90);
@@ -1536,11 +1688,12 @@
1536
1688
  --utrecht-search-bar-button-color: var(--utrecht-color-white);
1537
1689
  --utrecht-search-bar-button-border-color: var(--utrecht-color-red-40);
1538
1690
  --utrecht-search-bar-button-background-color: var(--utrecht-color-red-40);
1691
+ --utrecht-root-color: var(--utrecht-color-grey-10);
1692
+ --utrecht-root-background-color: var(--utrecht-color-grey-95);
1539
1693
  --utrecht-rich-text-best-friend-margin-block-end: var(--utrecht-space-block-2xs);
1540
1694
  --utrecht-rich-text-friend-margin-block-end: var(--utrecht-space-block-xs);
1541
1695
  --utrecht-rich-text-acquaintance-margin-block-end: var(--utrecht-space-block-md);
1542
1696
  --utrecht-rich-text-stranger-margin-block-end: var(--utrecht-space-block-2xl);
1543
- --utrecht-radio-button-color: var(--utrecht-color-white);
1544
1697
  --utrecht-radio-button-disabled-color: var(--utrecht-color-white);
1545
1698
  --utrecht-radio-button-disabled-border-color: var(--utrecht-color-grey-80);
1546
1699
  --utrecht-radio-button-disabled-background-color: var(--utrecht-color-grey-80);
@@ -1554,17 +1707,11 @@
1554
1707
  --utrecht-radio-button-checked-border-color: var(--utrecht-color-blue-40);
1555
1708
  --utrecht-radio-button-checked-background-color: var(--utrecht-color-blue-40);
1556
1709
  --utrecht-radio-button-active-background-color: var(--utrecht-color-blue-80);
1710
+ --utrecht-radio-button-color: var(--utrecht-color-white);
1557
1711
  --utrecht-pre-heading-margin-block-start: var(--utrecht-space-row-2xl);
1558
1712
  --utrecht-pre-heading-font-size: var(--utrecht-typography-scale-md-font-size);
1559
1713
  --utrecht-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);
1560
- --utrecht-paragraph-lead-line-height: var(--utrecht-typography-line-height-md);
1561
- --utrecht-paragraph-lead-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
1562
- --utrecht-paragraph-lead-font-size: var(--utrecht-typography-scale-xl-font-size);
1563
1714
  --utrecht-paragraph-margin-block-start: var(--utrecht-space-block-md);
1564
- --utrecht-paragraph-line-height: var(--utrecht-typography-line-height-md);
1565
- --utrecht-paragraph-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
1566
- --utrecht-paragraph-font-size: var(--utrecht-typography-scale-md-font-size);
1567
- --utrecht-paragraph-font-family: var(--utrecht-typography-sans-serif-font-family);
1568
1715
  --utrecht-pagination-relative-link-hover-color: var(--utrecht-color-white);
1569
1716
  --utrecht-pagination-relative-link-hover-border-color: var(--utrecht-color-blue-35);
1570
1717
  --utrecht-pagination-relative-link-hover-background-color: var(--utrecht-color-blue-35);
@@ -1583,16 +1730,18 @@
1583
1730
  --utrecht-pagination-font-size: var(--utrecht-typography-scale-sm-font-size);
1584
1731
  --utrecht-page-color: var(--utrecht-color-grey-95);
1585
1732
  --utrecht-page-background-color: var(--utrecht-color-grey-15);
1586
- --utrecht-page-footer-padding-block-start: var(--utrecht-space-block-3xl);
1587
- --utrecht-page-footer-padding-block-end: var(--utrecht-space-block-3xl);
1588
- --utrecht-page-footer-padding-inline-start: var(--utrecht-space-inline-2xl);
1589
- --utrecht-page-footer-padding-inline-end: var(--utrecht-space-inline-2xl);
1733
+ --utrecht-page-header-content-color: var(--utrecht-color-black);
1734
+ --utrecht-page-header-content-background-color: var(--utrecht-color-white);
1735
+ --utrecht-page-footer-content-padding-inline: var(--utrecht-space-inline-2xl);
1736
+ --utrecht-page-footer-content-padding-block-start: var(--utrecht-space-block-3xl);
1737
+ --utrecht-page-footer-content-padding-block-end: var(--utrecht-space-block-3xl);
1590
1738
  --utrecht-page-footer-background-image: linear-gradient(45deg, var(--utrecht-color-red-40), var(--utrecht-color-red-40) 50%, #d63433 50%);
1591
1739
  --utrecht-page-footer-background-color: var(--utrecht-color-red-40);
1592
1740
  --utrecht-page-footer-color: var(--utrecht-color-white);
1593
- --utrecht-number-badge-font-size: var(--utrecht-typography-scale-md-font-size);
1594
- --utrecht-number-badge-color: var(--utrecht-color-white); /* Default text color for badge components */
1595
- --utrecht-number-badge-background-color: var(--utrecht-color-red-40);
1741
+ --utrecht-page-body-content-color: var(--utrecht-color-black);
1742
+ --utrecht-page-body-content-background-color: var(--utrecht-color-white);
1743
+ --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
1744
+ --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /* Default block padding for badge components */
1596
1745
  --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
1597
1746
  --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
1598
1747
  --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
@@ -1616,10 +1765,6 @@
1616
1765
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
1617
1766
  --utrecht-nav-bar-link-padding-block-end: var(--utrecht-space-block-xs);
1618
1767
  --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
1619
- --utrecht-nav-bar-color: var(--utrecht-color-black);
1620
- --utrecht-nav-bar-background-color: var(--utrecht-color-white);
1621
- --utrecht-mark-color: var(--utrecht-color-black);
1622
- --utrecht-mark-background-color: var(--utrecht-color-yellow-60);
1623
1768
  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
1624
1769
  --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
1625
1770
  --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
@@ -1676,30 +1821,6 @@
1676
1821
  --utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
1677
1822
  --utrecht-index-char-nav-margin-block-start: var(--utrecht-space-block-lg);
1678
1823
  --utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
1679
- --utrecht-heading-6-line-height: var(--utrecht-typography-line-height-md);
1680
- --utrecht-heading-6-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
1681
- --utrecht-heading-6-font-size: var(--utrecht-typography-scale-sm-font-size);
1682
- --utrecht-heading-6-font-family: var(--utrecht-typography-sans-serif-font-family);
1683
- --utrecht-heading-5-line-height: var(--utrecht-typography-line-height-md);
1684
- --utrecht-heading-5-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
1685
- --utrecht-heading-5-font-size: var(--utrecht-typography-scale-sm-font-size);
1686
- --utrecht-heading-5-font-family: var(--utrecht-typography-sans-serif-font-family);
1687
- --utrecht-heading-4-line-height: var(--utrecht-typography-line-height-md);
1688
- --utrecht-heading-4-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
1689
- --utrecht-heading-4-font-size: var(--utrecht-typography-scale-lg-font-size);
1690
- --utrecht-heading-4-font-family: var(--utrecht-typography-sans-serif-font-family);
1691
- --utrecht-heading-3-line-height: var(--utrecht-typography-line-height-sm);
1692
- --utrecht-heading-3-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
1693
- --utrecht-heading-3-font-size: var(--utrecht-typography-scale-xl-font-size);
1694
- --utrecht-heading-3-font-family: var(--utrecht-typography-sans-serif-font-family);
1695
- --utrecht-heading-2-line-height: var(--utrecht-typography-line-height-sm);
1696
- --utrecht-heading-2-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
1697
- --utrecht-heading-2-font-size: var(--utrecht-typography-scale-xl-font-size);
1698
- --utrecht-heading-2-font-family: var(--utrecht-typography-sans-serif-font-family);
1699
- --utrecht-heading-1-line-height: var(--utrecht-typography-line-height-sm);
1700
- --utrecht-heading-1-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
1701
- --utrecht-heading-1-font-size: var(--utrecht-typography-scale-4xl-font-size);
1702
- --utrecht-heading-1-font-family: var(--utrecht-typography-sans-serif-font-family);
1703
1824
  --utrecht-form-toggle-focus-border-color: var(--utrecht-color-black);
1704
1825
  --utrecht-form-toggle-checked-accent-color: var(--utrecht-color-blue-35);
1705
1826
  --utrecht-form-toggle-thumb-disabled-background-color: var(--utrecht-color-white);
@@ -1775,12 +1896,13 @@
1775
1896
  --utrecht-feedback-danger-color: var(--utrecht-color-red-40);
1776
1897
  --utrecht-column-layout-gap: var(--utrecht-space-column-md);
1777
1898
  --utrecht-column-layout-column-rule-color: var(--utrecht-color-grey-80);
1899
+ --utrecht-code-block-padding-inline-end: var(--nl-code-block-padding-inline);
1900
+ --utrecht-code-block-padding-inline-start: var(--nl-code-block-padding-inline);
1901
+ --utrecht-code-block-padding-block-end: var(--nl-code-block-padding-block);
1902
+ --utrecht-code-block-padding-block-start: var(--nl-code-block-padding-block);
1778
1903
  --utrecht-code-block-margin-block-end: var(--utrecht-space-block-lg);
1779
1904
  --utrecht-code-block-margin-block-start: var(--utrecht-space-block-lg);
1780
- --utrecht-code-block-line-height: var(--utrecht-typography-line-height-md);
1781
- --utrecht-code-block-font-size: var(--utrecht-typography-scale-md-font-size);
1782
- --utrecht-code-block-color: var(--utrecht-color-black);
1783
- --utrecht-code-block-background-color: var(--utrecht-color-grey-95);
1905
+ --utrecht-code-block-font-family: var(--nl-code-block-font-family);
1784
1906
  --utrecht-checkbox-indeterminate-background-color: var(--utrecht-color-blue-40);
1785
1907
  --utrecht-checkbox-checked-background-color: var(--utrecht-color-blue-40);
1786
1908
  --utrecht-checkbox-checked-border-color: var(--utrecht-color-blue-40);
@@ -1908,14 +2030,15 @@
1908
2030
  --utrecht-breadcrumb-nav-item-padding-block-end: var(--utrecht-space-block-xs);
1909
2031
  --utrecht-breadcrumb-nav-item-padding-block-start: var(--utrecht-space-block-xs);
1910
2032
  --utrecht-breadcrumb-nav-font-size: var(--utrecht-typography-scale-md-font-size);
2033
+ --utrecht-body-color: var(--utrecht-color-black);
2034
+ --utrecht-body-background-color: var(--utrecht-color-white);
2035
+ --utrecht-body-font-size: var(--utrecht-typography-scale-md-font-size);
2036
+ --utrecht-body-font-family: var(--utrecht-typography-sans-serif-font-family);
1911
2037
  --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
1912
2038
  --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
1913
2039
  --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
1914
2040
  --utrecht-badge-font-style: var(--utrecht-typography-font-style-normal);
1915
- --utrecht-badge-padding-inline: var(--utrecht-space-inline-sm); /* Default inline padding color for badge components */
1916
- --utrecht-badge-padding-block: var(--utrecht-space-block-xs); /* Default block padding for badge components */
1917
- --utrecht-badge-color: var(--utrecht-color-white); /* Default text color for badge components */
1918
- --utrecht-badge-background-color: var(--utrecht-color-grey-30); /* Default background color for badge components */
2041
+ --utrecht-badge-border-radius: var(--nl-data-badge-border-radius); /* Default corner radius for badge components */
1919
2042
  --utrecht-badge-list-item-margin-inline: var(--utrecht-space-block-sm);
1920
2043
  --utrecht-badge-list-item-margin-block: var(--utrecht-space-block-xs);
1921
2044
  --utrecht-badge-counter-font-size: var(--utrecht-typography-scale-md-font-size);
@@ -1967,32 +2090,70 @@
1967
2090
  --utrecht-accordion-button-padding-inline-start: var(--utrecht-space-block-md);
1968
2091
  --utrecht-accordion-button-padding-inline-end: var(--utrecht-space-block-md);
1969
2092
  --utrecht-accordion-row-gap: var(--utrecht-space-block-xs);
2093
+ --signalen-modal-dialog-color: var(--utrecht-body-color);
2094
+ --signalen-modal-dialog-background-color: var(--utrecht-body-background-color);
1970
2095
  --of-progress-indicator-background-color: var(--utrecht-document-background-color);
1971
2096
  --of-page-footer-fg: var(--utrecht-page-footer-color);
1972
2097
  --of-page-footer-bg: var(--utrecht-page-footer-background-color);
1973
2098
  --of-layout-background: var(--utrecht-document-background-color);
2099
+ --nl-skip-link-focus-visible-background-color: var(--utrecht-topnav-link-focus-background-color);
2100
+ --nl-skip-link-focus-visible-color: var(--utrecht-topnav-link-focus-color);
2101
+ --nl-skip-link-padding-inline: var(--utrecht-button-padding-inline-start);
2102
+ --nl-skip-link-padding-block: var(--utrecht-button-padding-block-start);
2103
+ --nl-skip-link-color: var(--utrecht-topnav-link-color);
2104
+ --nl-skip-link-background-color: var(--utrecht-topnav-list-background-color);
2105
+ --nl-paragraph-lead-color: var(--utrecht-document-color);
2106
+ --nl-number-badge-border-radius: var(--nl-number-badge-font-size);
1974
2107
  --denhaag-process-steps-sub-step-line-color: var(--denhaag-process-steps-step-line-color);
1975
2108
  --utrecht-toptask-link-hover-color: var(--utrecht-button-primary-action-hover-color);
1976
2109
  --utrecht-toptask-link-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
1977
2110
  --utrecht-toptask-link-color: var(--utrecht-button-primary-action-color);
1978
2111
  --utrecht-toptask-link-background-color: var(--utrecht-button-primary-action-background-color);
1979
- --utrecht-skip-link-focus-color: var(--utrecht-topnav-link-focus-color);
1980
- --utrecht-skip-link-focus-background-color: var(--utrecht-topnav-link-focus-background-color);
1981
- --utrecht-skip-link-padding-inline-end: var(--utrecht-button-padding-inline-end);
1982
- --utrecht-skip-link-padding-inline-start: var(--utrecht-button-padding-inline-start);
1983
- --utrecht-skip-link-padding-block-end: var(--utrecht-button-padding-block-end);
1984
- --utrecht-skip-link-padding-block-start: var(--utrecht-button-padding-block-start);
1985
- --utrecht-skip-link-color: var(--utrecht-topnav-link-color);
1986
- --utrecht-skip-link-background-color: var(--utrecht-topnav-list-background-color);
2112
+ --utrecht-skip-link-focus-visible-text-decoration: var(--nl-skip-link-focus-visible-text-decoration);
2113
+ --utrecht-skip-link-text-decoration: var(--nl-skip-link-text-decoration);
1987
2114
  --utrecht-radio-button-border-color: var(--utrecht-form-control-border-color);
1988
2115
  --utrecht-radio-button-background-color: var(--utrecht-form-control-background-color);
1989
- --utrecht-paragraph-lead-color: var(--utrecht-document-color);
1990
- --utrecht-number-badge-border-radius: var(--utrecht-number-badge-font-size);
2116
+ --utrecht-paragraph-lead-line-height: var(--nl-paragraph-lead-line-height);
2117
+ --utrecht-paragraph-lead-font-weight: var(--nl-paragraph-lead-font-weight);
2118
+ --utrecht-paragraph-lead-font-size: var(--nl-paragraph-lead-font-size);
2119
+ --utrecht-paragraph-line-height: var(--nl-paragraph-line-height);
2120
+ --utrecht-paragraph-font-weight: var(--nl-paragraph-font-weight);
2121
+ --utrecht-paragraph-font-size: var(--nl-paragraph-font-size);
2122
+ --utrecht-paragraph-font-family: var(--nl-paragraph-font-family);
2123
+ --utrecht-number-badge-font-size: var(--nl-number-badge-font-size);
2124
+ --utrecht-number-badge-color: var(--nl-number-badge-color); /* Default text color for badge components */
2125
+ --utrecht-number-badge-background-color: var(--nl-number-badge-background-color);
2126
+ --utrecht-mark-color: var(--nl-mark-color);
2127
+ --utrecht-mark-background-color: var(--nl-mark-background-color);
1991
2128
  --utrecht-listbox-border-width: var(--utrecht-form-control-border-width);
1992
2129
  --utrecht-listbox-border-color: var(--utrecht-form-control-border-color);
1993
2130
  --utrecht-link-visited-color: var(--utrecht-link-color);
1994
2131
  --utrecht-link-hover-color: var(--utrecht-link-focus-color);
1995
2132
  --utrecht-link-active-color: var(--utrecht-link-color);
2133
+ --utrecht-heading-6-line-height: var(--nl-heading-level-6-line-height);
2134
+ --utrecht-heading-6-font-weight: var(--nl-heading-level-6-font-weight);
2135
+ --utrecht-heading-6-font-size: var(--nl-heading-level-6-font-size);
2136
+ --utrecht-heading-6-font-family: var(--nl-heading-level-6-font-family);
2137
+ --utrecht-heading-5-line-height: var(--nl-heading-level-5-line-height);
2138
+ --utrecht-heading-5-font-weight: var(--nl-heading-level-5-font-weight);
2139
+ --utrecht-heading-5-font-size: var(--nl-heading-level-5-font-size);
2140
+ --utrecht-heading-5-font-family: var(--nl-heading-level-5-font-family);
2141
+ --utrecht-heading-4-line-height: var(--nl-heading-level-4-line-height);
2142
+ --utrecht-heading-4-font-weight: var(--nl-heading-level-4-font-weight);
2143
+ --utrecht-heading-4-font-size: var(--nl-heading-level-4-font-size);
2144
+ --utrecht-heading-4-font-family: var(--nl-heading-level-4-font-family);
2145
+ --utrecht-heading-3-line-height: var(--nl-heading-level-3-line-height);
2146
+ --utrecht-heading-3-font-weight: var(--nl-heading-level-3-font-weight);
2147
+ --utrecht-heading-3-font-size: var(--nl-heading-level-3-font-size);
2148
+ --utrecht-heading-3-font-family: var(--nl-heading-level-3-font-family);
2149
+ --utrecht-heading-2-line-height: var(--nl-heading-level-2-line-height);
2150
+ --utrecht-heading-2-font-weight: var(--nl-heading-level-2-font-weight);
2151
+ --utrecht-heading-2-font-size: var(--nl-heading-level-2-font-size);
2152
+ --utrecht-heading-2-font-family: var(--nl-heading-level-2-font-family);
2153
+ --utrecht-heading-1-line-height: var(--nl-heading-level-1-line-height);
2154
+ --utrecht-heading-1-font-weight: var(--nl-heading-level-1-font-weight);
2155
+ --utrecht-heading-1-font-size: var(--nl-heading-level-1-font-size);
2156
+ --utrecht-heading-1-font-family: var(--nl-heading-level-1-font-family);
1996
2157
  --utrecht-form-field-error-message-color: var(--utrecht-feedback-invalid-color);
1997
2158
  --utrecht-form-field-description-warning-color: var(--utrecht-feedback-warning-color);
1998
2159
  --utrecht-form-field-description-invalid-color: var(--utrecht-feedback-invalid-color);
@@ -2012,6 +2173,10 @@
2012
2173
  --utrecht-feedback-warning-background-color: var(--utrecht-feedback-warning-color);
2013
2174
  --utrecht-feedback-danger-border-color: var(--utrecht-feedback-danger-color);
2014
2175
  --utrecht-feedback-danger-background-color: var(--utrecht-feedback-danger-color);
2176
+ --utrecht-code-block-line-height: var(--nl-code-block-line-height);
2177
+ --utrecht-code-block-font-size: var(--nl-code-block-font-size);
2178
+ --utrecht-code-block-color: var(--nl-code-block-color);
2179
+ --utrecht-code-block-background-color: var(--nl-code-block-background-color);
2015
2180
  --utrecht-checkbox-color: var(--utrecht-form-control-color);
2016
2181
  --utrecht-checkbox-border-color: var(--utrecht-form-control-border-color);
2017
2182
  --utrecht-checkbox-background-color: var(--utrecht-form-control-background-color);
@@ -2036,9 +2201,22 @@
2036
2201
  --utrecht-button-pressed-background-color: var(--utrecht-button-active-background-color);
2037
2202
  --utrecht-breadcrumb-nav-arrows-link-focus-background-color: var(--utrecht-focus-background-color);
2038
2203
  --utrecht-breadcrumb-nav-link-focus-background-color: var(--utrecht-focus-background-color);
2204
+ --utrecht-badge-padding-inline: var(--nl-data-badge-padding-inline); /* Default inline padding color for badge components */
2205
+ --utrecht-badge-padding-block: var(--nl-data-badge-padding-block); /* Default block padding for badge components */
2206
+ --utrecht-badge-color: var(--nl-data-badge-color); /* Default text color for badge components */
2207
+ --utrecht-badge-background-color: var(--nl-data-badge-background-color); /* Default background color for badge components */
2039
2208
  --utrecht-badge-counter-border-radius: var(--utrecht-badge-counter-font-size); /* Default corner radius for badge components */
2040
2209
  --of-layout-bg: var(--of-layout-background);
2210
+ --utrecht-skip-link-focus-color: var(--nl-skip-link-focus-visible-color);
2211
+ --utrecht-skip-link-focus-background-color: var(--nl-skip-link-focus-visible-background-color);
2212
+ --utrecht-skip-link-padding-inline-end: var(--nl-skip-link-padding-inline);
2213
+ --utrecht-skip-link-padding-inline-start: var(--nl-skip-link-padding-inline);
2214
+ --utrecht-skip-link-padding-block-end: var(--nl-skip-link-padding-block);
2215
+ --utrecht-skip-link-padding-block-start: var(--nl-skip-link-padding-block);
2216
+ --utrecht-skip-link-color: var(--nl-skip-link-color);
2217
+ --utrecht-skip-link-background-color: var(--nl-skip-link-background-color);
2041
2218
  --utrecht-radio-button-invalid-border-color: var(--utrecht-form-control-invalid-border-color);
2219
+ --utrecht-number-badge-border-radius: var(--nl-number-badge-border-radius);
2042
2220
  --utrecht-form-field-invalid-border-inline-start-color: var(--utrecht-form-control-invalid-border-color);
2043
2221
  --utrecht-form-field-description-valid-color: var(--utrecht-feedback-valid-color);
2044
2222
  --utrecht-feedback-active-border-color: var(--utrecht-feedback-safe-border-color);