@utrecht/design-tokens 2.2.0 → 2.4.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 (79) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/_mixin-theme.scss +124 -63
  3. package/dist/_mixin.scss +124 -63
  4. package/dist/_variables.scss +124 -63
  5. package/dist/dark/_mixin-theme.scss +124 -63
  6. package/dist/dark/_mixin.scss +124 -63
  7. package/dist/dark/_variables.scss +124 -63
  8. package/dist/dark/index.cjs +62 -1
  9. package/dist/dark/index.css +124 -63
  10. package/dist/dark/index.d.ts +62 -1
  11. package/dist/dark/index.flat.json +62 -1
  12. package/dist/dark/index.json +1046 -102
  13. package/dist/dark/index.mjs +62 -1
  14. package/dist/dark/index.tokens.json +614 -72
  15. package/dist/dark/list.d.ts +14 -0
  16. package/dist/dark/list.json +1046 -102
  17. package/dist/dark/list.mjs +31638 -0
  18. package/dist/dark/property.css +0 -1
  19. package/dist/dark/root.css +124 -63
  20. package/dist/dark/theme-prince-xml.css +124 -63
  21. package/dist/dark/theme.css +124 -63
  22. package/dist/dark/tokens.cjs +1541 -116
  23. package/dist/dark/tokens.d.ts +355 -22
  24. package/dist/dark/tokens.json +1541 -116
  25. package/dist/dark/variables.cjs +62 -1
  26. package/dist/dark/variables.css +124 -63
  27. package/dist/dark/variables.d.ts +62 -1
  28. package/dist/dark/variables.json +62 -1
  29. package/dist/dark/variables.less +124 -63
  30. package/dist/dark/variables.mjs +62 -1
  31. package/dist/index.cjs +62 -1
  32. package/dist/index.css +248 -126
  33. package/dist/index.d.ts +62 -1
  34. package/dist/index.flat.json +62 -1
  35. package/dist/index.json +1046 -102
  36. package/dist/index.mjs +62 -1
  37. package/dist/index.tokens.json +614 -72
  38. package/dist/list.d.ts +14 -0
  39. package/dist/list.json +1046 -102
  40. package/dist/list.mjs +32755 -0
  41. package/dist/property.css +0 -1
  42. package/dist/root.css +124 -63
  43. package/dist/theme-prince-xml.css +124 -63
  44. package/dist/theme.css +124 -63
  45. package/dist/tokens.cjs +1541 -116
  46. package/dist/tokens.d.ts +355 -22
  47. package/dist/tokens.json +1541 -116
  48. package/dist/variables.cjs +62 -1
  49. package/dist/variables.css +124 -63
  50. package/dist/variables.d.ts +62 -1
  51. package/dist/variables.json +62 -1
  52. package/dist/variables.less +124 -63
  53. package/dist/variables.mjs +62 -1
  54. package/package.json +1 -1
  55. package/src/component/nl/code-block.tokens.json +13 -0
  56. package/src/component/nl/code.tokens.json +11 -0
  57. package/src/component/nl/data-badge.tokens.json +22 -0
  58. package/src/component/nl/heading.tokens.json +48 -0
  59. package/src/component/nl/mark.tokens.json +8 -0
  60. package/src/component/nl/number-badge.tokens.json +23 -0
  61. package/src/component/nl/paragraph.tokens.json +20 -0
  62. package/src/component/nl/skip-link.tokens.json +16 -0
  63. package/src/component/utrecht/badge.tokens.json +5 -5
  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/mark.tokens.json +2 -2
  72. package/src/component/utrecht/number-badge.tokens.json +6 -6
  73. package/src/component/utrecht/paragraph.tokens.json +8 -8
  74. package/src/component/utrecht/skip-link.tokens.json +10 -10
  75. package/src/css-property-formatter.mjs +2 -1
  76. package/src/json-list-formatter.js +2 -1
  77. package/style-dictionary-build.mjs +3 -1
  78. package/style-dictionary-config.mjs +27 -0
  79. package/src/component/utrecht/badge-data.tokens.json +0 -8
package/dist/index.css CHANGED
@@ -31,6 +31,12 @@
31
31
  }
32
32
  .utrecht-theme {
33
33
  --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
34
+ --nl-number-badge-padding-inline: 1ex;
35
+ --nl-number-badge-padding-block: 1ex;
36
+ --nl-data-badge-border-radius: 0;
37
+ --nl-code-block-padding-inline: 20px;
38
+ --nl-code-block-padding-block: 20px;
39
+ --nl-code-block-font-family: "Monaco";
34
40
  --denhaag-process-steps-sub-step-marker-size: 12px;
35
41
  --denhaag-process-steps-step-marker-size: 28px;
36
42
  --utrecht-toptask-nav-link-grid-max-inline-size: 240px;
@@ -195,8 +201,6 @@
195
201
  --utrecht-ordered-list-margin-block-start: 0;
196
202
  --utrecht-number-data-negative-color: red;
197
203
  --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
204
  --utrecht-topnav-link-focus-text-decoration: none;
201
205
  --utrecht-topnav-link-focus-border-type: dotted;
202
206
  --utrecht-mapcontrolbutton-margin-inline-start: 0;
@@ -337,10 +341,6 @@
337
341
  --utrecht-action-activate-cursor: pointer;
338
342
  --utrecht-column-layout-column-width: 350px;
339
343
  --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
344
  --utrecht-checkbox-margin-block-start: 0;
345
345
  --utrecht-checkbox-focus-border-width: 2px;
346
346
  --utrecht-checkbox-size: 24px;
@@ -391,7 +391,6 @@
391
391
  --utrecht-blockquote-margin-block-start: 1.6em;
392
392
  --utrecht-blockquote-margin-inline-end: 1.6em;
393
393
  --utrecht-blockquote-margin-inline-start: 1.6em;
394
- --utrecht-badge-border-radius: 0; /* Default corner radius for badge components */
395
394
  --utrecht-badge-counter-padding-inline: 1ex; /* Default inline padding color for badge components */
396
395
  --utrecht-badge-counter-padding-block: 1ex; /* Default block padding for badge components */
397
396
  --utrecht-backdrop-reduced-transparency-opacity: 0.98;
@@ -407,6 +406,53 @@
407
406
  --utrecht-accordion-button-icon-size: 24px;
408
407
  --utrecht-accordion-button-hover-background-color: inherit;
409
408
  --utrecht-accordion-button-border-width: 0;
409
+ --nl-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
410
+ --nl-skip-link-text-decoration: var(--utrecht-link-text-decoration);
411
+ --nl-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);
412
+ --nl-paragraph-lead-line-height: var(--utrecht-typography-line-height-md);
413
+ --nl-paragraph-lead-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
414
+ --nl-paragraph-lead-font-size: var(--utrecht-typography-scale-xl-font-size);
415
+ --nl-paragraph-line-height: var(--utrecht-typography-line-height-md);
416
+ --nl-paragraph-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
417
+ --nl-paragraph-font-size: var(--utrecht-typography-scale-md-font-size);
418
+ --nl-paragraph-font-family: var(--utrecht-typography-sans-serif-font-family);
419
+ --nl-number-badge-font-size: var(--utrecht-typography-scale-md-font-size);
420
+ --nl-number-badge-color: var(--utrecht-color-white);
421
+ --nl-number-badge-background-color: var(--utrecht-color-red-40);
422
+ --nl-mark-color: var(--utrecht-color-black);
423
+ --nl-mark-background-color: var(--utrecht-color-yellow-60);
424
+ --nl-heading-level-6-line-height: var(--utrecht-typography-line-height-md);
425
+ --nl-heading-level-6-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
426
+ --nl-heading-level-6-font-size: var(--utrecht-typography-scale-sm-font-size);
427
+ --nl-heading-level-6-font-family: var(--utrecht-typography-sans-serif-font-family);
428
+ --nl-heading-level-5-line-height: var(--utrecht-typography-line-height-md);
429
+ --nl-heading-level-5-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
430
+ --nl-heading-level-5-font-size: var(--utrecht-typography-scale-sm-font-size);
431
+ --nl-heading-level-5-font-family: var(--utrecht-typography-sans-serif-font-family);
432
+ --nl-heading-level-4-line-height: var(--utrecht-typography-line-height-md);
433
+ --nl-heading-level-4-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
434
+ --nl-heading-level-4-font-size: var(--utrecht-typography-scale-lg-font-size);
435
+ --nl-heading-level-4-font-family: var(--utrecht-typography-sans-serif-font-family);
436
+ --nl-heading-level-3-line-height: var(--utrecht-typography-line-height-sm);
437
+ --nl-heading-level-3-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
438
+ --nl-heading-level-3-font-size: var(--utrecht-typography-scale-xl-font-size);
439
+ --nl-heading-level-3-font-family: var(--utrecht-typography-sans-serif-font-family);
440
+ --nl-heading-level-2-line-height: var(--utrecht-typography-line-height-sm);
441
+ --nl-heading-level-2-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
442
+ --nl-heading-level-2-font-size: var(--utrecht-typography-scale-xl-font-size);
443
+ --nl-heading-level-2-font-family: var(--utrecht-typography-sans-serif-font-family);
444
+ --nl-heading-level-1-line-height: var(--utrecht-typography-line-height-sm);
445
+ --nl-heading-level-1-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
446
+ --nl-heading-level-1-font-size: var(--utrecht-typography-scale-4xl-font-size);
447
+ --nl-heading-level-1-font-family: var(--utrecht-typography-sans-serif-font-family);
448
+ --nl-data-badge-padding-inline: var(--utrecht-space-inline-sm);
449
+ --nl-data-badge-padding-block: var(--utrecht-space-block-xs);
450
+ --nl-data-badge-color: var(--utrecht-color-white);
451
+ --nl-data-badge-background-color: var(--utrecht-color-grey-30);
452
+ --nl-code-block-line-height: var(--utrecht-typography-line-height-md);
453
+ --nl-code-block-font-size: var(--utrecht-typography-scale-md-font-size);
454
+ --nl-code-block-color: var(--utrecht-color-black);
455
+ --nl-code-block-background-color: var(--utrecht-color-grey-95);
410
456
  --denhaag-process-steps-sub-step-heading-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
411
457
  --denhaag-process-steps-sub-step-heading-font-size: var(--utrecht-typography-scale-sm-font-size);
412
458
  --denhaag-process-steps-sub-step-heading-color: var(--utrecht-color-grey-15);
@@ -490,8 +536,6 @@
490
536
  --utrecht-spotlight-section-padding-block-start: var(--utrecht-space-block-md);
491
537
  --utrecht-spotlight-section-color: var(--utrecht-color-black);
492
538
  --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
539
  --utrecht-separator-margin-block-start: var(--utrecht-space-block-md);
496
540
  --utrecht-separator-margin-block-end: var(--utrecht-space-block-md);
497
541
  --utrecht-separator-color: var(--utrecht-color-grey-90);
@@ -536,14 +580,7 @@
536
580
  --utrecht-pre-heading-margin-block-start: var(--utrecht-space-row-2xl);
537
581
  --utrecht-pre-heading-font-size: var(--utrecht-typography-scale-md-font-size);
538
582
  --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
583
  --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
584
  --utrecht-pagination-relative-link-hover-color: var(--utrecht-color-white);
548
585
  --utrecht-pagination-relative-link-hover-border-color: var(--utrecht-color-blue-35);
549
586
  --utrecht-pagination-relative-link-hover-background-color: var(--utrecht-color-blue-35);
@@ -569,9 +606,8 @@
569
606
  --utrecht-page-footer-background-image: linear-gradient(45deg, var(--utrecht-color-red-40), var(--utrecht-color-red-40) 50%, #d63433 50%);
570
607
  --utrecht-page-footer-background-color: var(--utrecht-color-red-40);
571
608
  --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);
609
+ --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
610
+ --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /* Default block padding for badge components */
575
611
  --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
576
612
  --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
577
613
  --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
@@ -597,8 +633,6 @@
597
633
  --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
598
634
  --utrecht-nav-bar-color: var(--utrecht-color-black);
599
635
  --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
636
  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
603
637
  --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
604
638
  --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
@@ -655,30 +689,6 @@
655
689
  --utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
656
690
  --utrecht-index-char-nav-margin-block-start: var(--utrecht-space-block-lg);
657
691
  --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
692
  --utrecht-form-toggle-focus-border-color: var(--utrecht-color-black);
683
693
  --utrecht-form-toggle-checked-accent-color: var(--utrecht-color-blue-35);
684
694
  --utrecht-form-toggle-thumb-disabled-background-color: var(--utrecht-color-white);
@@ -755,12 +765,13 @@
755
765
  --utrecht-feedback-danger-color: var(--utrecht-color-red-40);
756
766
  --utrecht-column-layout-gap: var(--utrecht-space-column-md);
757
767
  --utrecht-column-layout-column-rule-color: var(--utrecht-color-grey-80);
768
+ --utrecht-code-block-padding-inline-end: var(--nl-code-block-padding-inline);
769
+ --utrecht-code-block-padding-inline-start: var(--nl-code-block-padding-inline);
770
+ --utrecht-code-block-padding-block-end: var(--nl-code-block-padding-block);
771
+ --utrecht-code-block-padding-block-start: var(--nl-code-block-padding-block);
758
772
  --utrecht-code-block-margin-block-end: var(--utrecht-space-block-lg);
759
773
  --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);
774
+ --utrecht-code-block-font-family: var(--nl-code-block-font-family);
764
775
  --utrecht-checkbox-indeterminate-background-color: var(--utrecht-color-blue-40);
765
776
  --utrecht-checkbox-checked-background-color: var(--utrecht-color-blue-40);
766
777
  --utrecht-checkbox-checked-border-color: var(--utrecht-color-blue-40);
@@ -895,10 +906,7 @@
895
906
  --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
896
907
  --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
897
908
  --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 */
909
+ --utrecht-badge-border-radius: var(--nl-data-badge-border-radius); /* Default corner radius for badge components */
902
910
  --utrecht-badge-list-item-margin-inline: var(--utrecht-space-block-sm);
903
911
  --utrecht-badge-list-item-margin-block: var(--utrecht-space-block-xs);
904
912
  --utrecht-badge-counter-font-size: var(--utrecht-typography-scale-md-font-size);
@@ -954,28 +962,64 @@
954
962
  --of-page-footer-fg: var(--utrecht-page-footer-color);
955
963
  --of-page-footer-bg: var(--utrecht-page-footer-background-color);
956
964
  --of-layout-background: var(--utrecht-document-background-color);
965
+ --nl-skip-link-focus-visible-background-color: var(--utrecht-topnav-link-focus-background-color);
966
+ --nl-skip-link-focus-visible-color: var(--utrecht-topnav-link-focus-color);
967
+ --nl-skip-link-padding-inline: var(--utrecht-button-padding-inline-start);
968
+ --nl-skip-link-padding-block: var(--utrecht-button-padding-block-start);
969
+ --nl-skip-link-color: var(--utrecht-topnav-link-color);
970
+ --nl-skip-link-background-color: var(--utrecht-topnav-list-background-color);
971
+ --nl-paragraph-lead-color: var(--utrecht-document-color);
972
+ --nl-number-badge-border-radius: var(--nl-number-badge-font-size);
957
973
  --denhaag-process-steps-sub-step-line-color: var(--denhaag-process-steps-step-line-color);
958
974
  --utrecht-toptask-link-hover-color: var(--utrecht-button-primary-action-hover-color);
959
975
  --utrecht-toptask-link-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
960
976
  --utrecht-toptask-link-color: var(--utrecht-button-primary-action-color);
961
977
  --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);
978
+ --utrecht-skip-link-focus-visible-text-decoration: var(--nl-skip-link-focus-visible-text-decoration);
979
+ --utrecht-skip-link-text-decoration: var(--nl-skip-link-text-decoration);
970
980
  --utrecht-radio-button-border-color: var(--utrecht-form-control-border-color);
971
981
  --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);
982
+ --utrecht-paragraph-lead-line-height: var(--nl-paragraph-lead-line-height);
983
+ --utrecht-paragraph-lead-font-weight: var(--nl-paragraph-lead-font-weight);
984
+ --utrecht-paragraph-lead-font-size: var(--nl-paragraph-lead-font-size);
985
+ --utrecht-paragraph-line-height: var(--nl-paragraph-line-height);
986
+ --utrecht-paragraph-font-weight: var(--nl-paragraph-font-weight);
987
+ --utrecht-paragraph-font-size: var(--nl-paragraph-font-size);
988
+ --utrecht-paragraph-font-family: var(--nl-paragraph-font-family);
989
+ --utrecht-number-badge-font-size: var(--nl-number-badge-font-size);
990
+ --utrecht-number-badge-color: var(--nl-number-badge-color); /* Default text color for badge components */
991
+ --utrecht-number-badge-background-color: var(--nl-number-badge-background-color);
992
+ --utrecht-mark-color: var(--nl-mark-color);
993
+ --utrecht-mark-background-color: var(--nl-mark-background-color);
974
994
  --utrecht-listbox-border-width: var(--utrecht-form-control-border-width);
975
995
  --utrecht-listbox-border-color: var(--utrecht-form-control-border-color);
976
996
  --utrecht-link-visited-color: var(--utrecht-link-color);
977
997
  --utrecht-link-hover-color: var(--utrecht-link-focus-color);
978
998
  --utrecht-link-active-color: var(--utrecht-link-color);
999
+ --utrecht-heading-6-line-height: var(--nl-heading-level-6-line-height);
1000
+ --utrecht-heading-6-font-weight: var(--nl-heading-level-6-font-weight);
1001
+ --utrecht-heading-6-font-size: var(--nl-heading-level-6-font-size);
1002
+ --utrecht-heading-6-font-family: var(--nl-heading-level-6-font-family);
1003
+ --utrecht-heading-5-line-height: var(--nl-heading-level-5-line-height);
1004
+ --utrecht-heading-5-font-weight: var(--nl-heading-level-5-font-weight);
1005
+ --utrecht-heading-5-font-size: var(--nl-heading-level-5-font-size);
1006
+ --utrecht-heading-5-font-family: var(--nl-heading-level-5-font-family);
1007
+ --utrecht-heading-4-line-height: var(--nl-heading-level-4-line-height);
1008
+ --utrecht-heading-4-font-weight: var(--nl-heading-level-4-font-weight);
1009
+ --utrecht-heading-4-font-size: var(--nl-heading-level-4-font-size);
1010
+ --utrecht-heading-4-font-family: var(--nl-heading-level-4-font-family);
1011
+ --utrecht-heading-3-line-height: var(--nl-heading-level-3-line-height);
1012
+ --utrecht-heading-3-font-weight: var(--nl-heading-level-3-font-weight);
1013
+ --utrecht-heading-3-font-size: var(--nl-heading-level-3-font-size);
1014
+ --utrecht-heading-3-font-family: var(--nl-heading-level-3-font-family);
1015
+ --utrecht-heading-2-line-height: var(--nl-heading-level-2-line-height);
1016
+ --utrecht-heading-2-font-weight: var(--nl-heading-level-2-font-weight);
1017
+ --utrecht-heading-2-font-size: var(--nl-heading-level-2-font-size);
1018
+ --utrecht-heading-2-font-family: var(--nl-heading-level-2-font-family);
1019
+ --utrecht-heading-1-line-height: var(--nl-heading-level-1-line-height);
1020
+ --utrecht-heading-1-font-weight: var(--nl-heading-level-1-font-weight);
1021
+ --utrecht-heading-1-font-size: var(--nl-heading-level-1-font-size);
1022
+ --utrecht-heading-1-font-family: var(--nl-heading-level-1-font-family);
979
1023
  --utrecht-form-field-error-message-color: var(--utrecht-feedback-invalid-color);
980
1024
  --utrecht-form-field-description-warning-color: var(--utrecht-feedback-warning-color);
981
1025
  --utrecht-form-field-description-invalid-color: var(--utrecht-feedback-invalid-color);
@@ -995,6 +1039,10 @@
995
1039
  --utrecht-feedback-warning-background-color: var(--utrecht-feedback-warning-color);
996
1040
  --utrecht-feedback-danger-border-color: var(--utrecht-feedback-danger-color);
997
1041
  --utrecht-feedback-danger-background-color: var(--utrecht-feedback-danger-color);
1042
+ --utrecht-code-block-line-height: var(--nl-code-block-line-height);
1043
+ --utrecht-code-block-font-size: var(--nl-code-block-font-size);
1044
+ --utrecht-code-block-color: var(--nl-code-block-color);
1045
+ --utrecht-code-block-background-color: var(--nl-code-block-background-color);
998
1046
  --utrecht-checkbox-color: var(--utrecht-form-control-color);
999
1047
  --utrecht-checkbox-border-color: var(--utrecht-form-control-border-color);
1000
1048
  --utrecht-checkbox-background-color: var(--utrecht-form-control-background-color);
@@ -1009,9 +1057,22 @@
1009
1057
  --utrecht-button-pressed-background-color: var(--utrecht-button-active-background-color);
1010
1058
  --utrecht-breadcrumb-nav-arrows-link-focus-background-color: var(--utrecht-focus-background-color);
1011
1059
  --utrecht-breadcrumb-nav-link-focus-background-color: var(--utrecht-focus-background-color);
1060
+ --utrecht-badge-padding-inline: var(--nl-data-badge-padding-inline); /* Default inline padding color for badge components */
1061
+ --utrecht-badge-padding-block: var(--nl-data-badge-padding-block); /* Default block padding for badge components */
1062
+ --utrecht-badge-color: var(--nl-data-badge-color); /* Default text color for badge components */
1063
+ --utrecht-badge-background-color: var(--nl-data-badge-background-color); /* Default background color for badge components */
1012
1064
  --utrecht-badge-counter-border-radius: var(--utrecht-badge-counter-font-size); /* Default corner radius for badge components */
1013
1065
  --of-layout-bg: var(--of-layout-background);
1066
+ --utrecht-skip-link-focus-color: var(--nl-skip-link-focus-visible-color);
1067
+ --utrecht-skip-link-focus-background-color: var(--nl-skip-link-focus-visible-background-color);
1068
+ --utrecht-skip-link-padding-inline-end: var(--nl-skip-link-padding-inline);
1069
+ --utrecht-skip-link-padding-inline-start: var(--nl-skip-link-padding-inline);
1070
+ --utrecht-skip-link-padding-block-end: var(--nl-skip-link-padding-block);
1071
+ --utrecht-skip-link-padding-block-start: var(--nl-skip-link-padding-block);
1072
+ --utrecht-skip-link-color: var(--nl-skip-link-color);
1073
+ --utrecht-skip-link-background-color: var(--nl-skip-link-background-color);
1014
1074
  --utrecht-radio-button-invalid-border-color: var(--utrecht-form-control-invalid-border-color);
1075
+ --utrecht-number-badge-border-radius: var(--nl-number-badge-border-radius);
1015
1076
  --utrecht-form-field-invalid-border-inline-start-color: var(--utrecht-form-control-invalid-border-color);
1016
1077
  --utrecht-form-field-description-valid-color: var(--utrecht-feedback-valid-color);
1017
1078
  --utrecht-feedback-active-border-color: var(--utrecht-feedback-safe-border-color);
@@ -1047,6 +1108,12 @@
1047
1108
  .utrecht-theme--media-query,
1048
1109
  .utrecht-theme--media-query-color-scheme {
1049
1110
  --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
1111
+ --nl-number-badge-padding-inline: 1ex;
1112
+ --nl-number-badge-padding-block: 1ex;
1113
+ --nl-data-badge-border-radius: 0;
1114
+ --nl-code-block-padding-inline: 20px;
1115
+ --nl-code-block-padding-block: 20px;
1116
+ --nl-code-block-font-family: "Monaco";
1050
1117
  --denhaag-process-steps-sub-step-marker-size: 12px;
1051
1118
  --denhaag-process-steps-step-marker-size: 28px;
1052
1119
  --utrecht-toptask-nav-link-grid-max-inline-size: 240px;
@@ -1211,8 +1278,6 @@
1211
1278
  --utrecht-ordered-list-margin-block-start: 0;
1212
1279
  --utrecht-number-data-negative-color: red;
1213
1280
  --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
1281
  --utrecht-topnav-link-focus-text-decoration: none;
1217
1282
  --utrecht-topnav-link-focus-border-type: dotted;
1218
1283
  --utrecht-mapcontrolbutton-margin-inline-start: 0;
@@ -1354,10 +1419,6 @@
1354
1419
  --utrecht-action-activate-cursor: pointer;
1355
1420
  --utrecht-column-layout-column-width: 350px;
1356
1421
  --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
1422
  --utrecht-checkbox-margin-block-start: 0;
1362
1423
  --utrecht-checkbox-focus-border-width: 2px;
1363
1424
  --utrecht-checkbox-size: 24px;
@@ -1408,7 +1469,6 @@
1408
1469
  --utrecht-blockquote-margin-block-start: 1.6em;
1409
1470
  --utrecht-blockquote-margin-inline-end: 1.6em;
1410
1471
  --utrecht-blockquote-margin-inline-start: 1.6em;
1411
- --utrecht-badge-border-radius: 0; /* Default corner radius for badge components */
1412
1472
  --utrecht-badge-counter-padding-inline: 1ex; /* Default inline padding color for badge components */
1413
1473
  --utrecht-badge-counter-padding-block: 1ex; /* Default block padding for badge components */
1414
1474
  --utrecht-backdrop-reduced-transparency-opacity: 0.98;
@@ -1426,6 +1486,53 @@
1426
1486
  --utrecht-accordion-button-icon-size: 24px;
1427
1487
  --utrecht-accordion-button-hover-background-color: inherit;
1428
1488
  --utrecht-accordion-button-border-width: 0;
1489
+ --nl-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
1490
+ --nl-skip-link-text-decoration: var(--utrecht-link-text-decoration);
1491
+ --nl-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);
1492
+ --nl-paragraph-lead-line-height: var(--utrecht-typography-line-height-md);
1493
+ --nl-paragraph-lead-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
1494
+ --nl-paragraph-lead-font-size: var(--utrecht-typography-scale-xl-font-size);
1495
+ --nl-paragraph-line-height: var(--utrecht-typography-line-height-md);
1496
+ --nl-paragraph-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
1497
+ --nl-paragraph-font-size: var(--utrecht-typography-scale-md-font-size);
1498
+ --nl-paragraph-font-family: var(--utrecht-typography-sans-serif-font-family);
1499
+ --nl-number-badge-font-size: var(--utrecht-typography-scale-md-font-size);
1500
+ --nl-number-badge-color: var(--utrecht-color-white);
1501
+ --nl-number-badge-background-color: var(--utrecht-color-red-40);
1502
+ --nl-mark-color: var(--utrecht-color-black);
1503
+ --nl-mark-background-color: var(--utrecht-color-yellow-60);
1504
+ --nl-heading-level-6-line-height: var(--utrecht-typography-line-height-md);
1505
+ --nl-heading-level-6-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
1506
+ --nl-heading-level-6-font-size: var(--utrecht-typography-scale-sm-font-size);
1507
+ --nl-heading-level-6-font-family: var(--utrecht-typography-sans-serif-font-family);
1508
+ --nl-heading-level-5-line-height: var(--utrecht-typography-line-height-md);
1509
+ --nl-heading-level-5-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
1510
+ --nl-heading-level-5-font-size: var(--utrecht-typography-scale-sm-font-size);
1511
+ --nl-heading-level-5-font-family: var(--utrecht-typography-sans-serif-font-family);
1512
+ --nl-heading-level-4-line-height: var(--utrecht-typography-line-height-md);
1513
+ --nl-heading-level-4-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
1514
+ --nl-heading-level-4-font-size: var(--utrecht-typography-scale-lg-font-size);
1515
+ --nl-heading-level-4-font-family: var(--utrecht-typography-sans-serif-font-family);
1516
+ --nl-heading-level-3-line-height: var(--utrecht-typography-line-height-sm);
1517
+ --nl-heading-level-3-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
1518
+ --nl-heading-level-3-font-size: var(--utrecht-typography-scale-xl-font-size);
1519
+ --nl-heading-level-3-font-family: var(--utrecht-typography-sans-serif-font-family);
1520
+ --nl-heading-level-2-line-height: var(--utrecht-typography-line-height-sm);
1521
+ --nl-heading-level-2-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
1522
+ --nl-heading-level-2-font-size: var(--utrecht-typography-scale-xl-font-size);
1523
+ --nl-heading-level-2-font-family: var(--utrecht-typography-sans-serif-font-family);
1524
+ --nl-heading-level-1-line-height: var(--utrecht-typography-line-height-sm);
1525
+ --nl-heading-level-1-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
1526
+ --nl-heading-level-1-font-size: var(--utrecht-typography-scale-4xl-font-size);
1527
+ --nl-heading-level-1-font-family: var(--utrecht-typography-sans-serif-font-family);
1528
+ --nl-data-badge-padding-inline: var(--utrecht-space-inline-sm);
1529
+ --nl-data-badge-padding-block: var(--utrecht-space-block-xs);
1530
+ --nl-data-badge-color: var(--utrecht-color-white);
1531
+ --nl-data-badge-background-color: var(--utrecht-color-grey-30);
1532
+ --nl-code-block-line-height: var(--utrecht-typography-line-height-md);
1533
+ --nl-code-block-font-size: var(--utrecht-typography-scale-md-font-size);
1534
+ --nl-code-block-color: var(--utrecht-color-black);
1535
+ --nl-code-block-background-color: var(--utrecht-color-grey-95);
1429
1536
  --denhaag-process-steps-sub-step-heading-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
1430
1537
  --denhaag-process-steps-sub-step-heading-font-size: var(--utrecht-typography-scale-sm-font-size);
1431
1538
  --denhaag-process-steps-sub-step-heading-color: var(--utrecht-color-grey-15);
@@ -1511,8 +1618,6 @@
1511
1618
  --utrecht-spotlight-section-padding-block-start: var(--utrecht-space-block-md);
1512
1619
  --utrecht-spotlight-section-color: var(--utrecht-color-grey-15);
1513
1620
  --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
1621
  --utrecht-separator-margin-block-start: var(--utrecht-space-block-md);
1517
1622
  --utrecht-separator-margin-block-end: var(--utrecht-space-block-md);
1518
1623
  --utrecht-separator-color: var(--utrecht-color-grey-90);
@@ -1557,14 +1662,7 @@
1557
1662
  --utrecht-pre-heading-margin-block-start: var(--utrecht-space-row-2xl);
1558
1663
  --utrecht-pre-heading-font-size: var(--utrecht-typography-scale-md-font-size);
1559
1664
  --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
1665
  --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
1666
  --utrecht-pagination-relative-link-hover-color: var(--utrecht-color-white);
1569
1667
  --utrecht-pagination-relative-link-hover-border-color: var(--utrecht-color-blue-35);
1570
1668
  --utrecht-pagination-relative-link-hover-background-color: var(--utrecht-color-blue-35);
@@ -1590,9 +1688,8 @@
1590
1688
  --utrecht-page-footer-background-image: linear-gradient(45deg, var(--utrecht-color-red-40), var(--utrecht-color-red-40) 50%, #d63433 50%);
1591
1689
  --utrecht-page-footer-background-color: var(--utrecht-color-red-40);
1592
1690
  --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);
1691
+ --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
1692
+ --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /* Default block padding for badge components */
1596
1693
  --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
1597
1694
  --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
1598
1695
  --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
@@ -1618,8 +1715,6 @@
1618
1715
  --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
1619
1716
  --utrecht-nav-bar-color: var(--utrecht-color-black);
1620
1717
  --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
1718
  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
1624
1719
  --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
1625
1720
  --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
@@ -1676,30 +1771,6 @@
1676
1771
  --utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
1677
1772
  --utrecht-index-char-nav-margin-block-start: var(--utrecht-space-block-lg);
1678
1773
  --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
1774
  --utrecht-form-toggle-focus-border-color: var(--utrecht-color-black);
1704
1775
  --utrecht-form-toggle-checked-accent-color: var(--utrecht-color-blue-35);
1705
1776
  --utrecht-form-toggle-thumb-disabled-background-color: var(--utrecht-color-white);
@@ -1775,12 +1846,13 @@
1775
1846
  --utrecht-feedback-danger-color: var(--utrecht-color-red-40);
1776
1847
  --utrecht-column-layout-gap: var(--utrecht-space-column-md);
1777
1848
  --utrecht-column-layout-column-rule-color: var(--utrecht-color-grey-80);
1849
+ --utrecht-code-block-padding-inline-end: var(--nl-code-block-padding-inline);
1850
+ --utrecht-code-block-padding-inline-start: var(--nl-code-block-padding-inline);
1851
+ --utrecht-code-block-padding-block-end: var(--nl-code-block-padding-block);
1852
+ --utrecht-code-block-padding-block-start: var(--nl-code-block-padding-block);
1778
1853
  --utrecht-code-block-margin-block-end: var(--utrecht-space-block-lg);
1779
1854
  --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);
1855
+ --utrecht-code-block-font-family: var(--nl-code-block-font-family);
1784
1856
  --utrecht-checkbox-indeterminate-background-color: var(--utrecht-color-blue-40);
1785
1857
  --utrecht-checkbox-checked-background-color: var(--utrecht-color-blue-40);
1786
1858
  --utrecht-checkbox-checked-border-color: var(--utrecht-color-blue-40);
@@ -1912,10 +1984,7 @@
1912
1984
  --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
1913
1985
  --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
1914
1986
  --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 */
1987
+ --utrecht-badge-border-radius: var(--nl-data-badge-border-radius); /* Default corner radius for badge components */
1919
1988
  --utrecht-badge-list-item-margin-inline: var(--utrecht-space-block-sm);
1920
1989
  --utrecht-badge-list-item-margin-block: var(--utrecht-space-block-xs);
1921
1990
  --utrecht-badge-counter-font-size: var(--utrecht-typography-scale-md-font-size);
@@ -1971,28 +2040,64 @@
1971
2040
  --of-page-footer-fg: var(--utrecht-page-footer-color);
1972
2041
  --of-page-footer-bg: var(--utrecht-page-footer-background-color);
1973
2042
  --of-layout-background: var(--utrecht-document-background-color);
2043
+ --nl-skip-link-focus-visible-background-color: var(--utrecht-topnav-link-focus-background-color);
2044
+ --nl-skip-link-focus-visible-color: var(--utrecht-topnav-link-focus-color);
2045
+ --nl-skip-link-padding-inline: var(--utrecht-button-padding-inline-start);
2046
+ --nl-skip-link-padding-block: var(--utrecht-button-padding-block-start);
2047
+ --nl-skip-link-color: var(--utrecht-topnav-link-color);
2048
+ --nl-skip-link-background-color: var(--utrecht-topnav-list-background-color);
2049
+ --nl-paragraph-lead-color: var(--utrecht-document-color);
2050
+ --nl-number-badge-border-radius: var(--nl-number-badge-font-size);
1974
2051
  --denhaag-process-steps-sub-step-line-color: var(--denhaag-process-steps-step-line-color);
1975
2052
  --utrecht-toptask-link-hover-color: var(--utrecht-button-primary-action-hover-color);
1976
2053
  --utrecht-toptask-link-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
1977
2054
  --utrecht-toptask-link-color: var(--utrecht-button-primary-action-color);
1978
2055
  --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);
2056
+ --utrecht-skip-link-focus-visible-text-decoration: var(--nl-skip-link-focus-visible-text-decoration);
2057
+ --utrecht-skip-link-text-decoration: var(--nl-skip-link-text-decoration);
1987
2058
  --utrecht-radio-button-border-color: var(--utrecht-form-control-border-color);
1988
2059
  --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);
2060
+ --utrecht-paragraph-lead-line-height: var(--nl-paragraph-lead-line-height);
2061
+ --utrecht-paragraph-lead-font-weight: var(--nl-paragraph-lead-font-weight);
2062
+ --utrecht-paragraph-lead-font-size: var(--nl-paragraph-lead-font-size);
2063
+ --utrecht-paragraph-line-height: var(--nl-paragraph-line-height);
2064
+ --utrecht-paragraph-font-weight: var(--nl-paragraph-font-weight);
2065
+ --utrecht-paragraph-font-size: var(--nl-paragraph-font-size);
2066
+ --utrecht-paragraph-font-family: var(--nl-paragraph-font-family);
2067
+ --utrecht-number-badge-font-size: var(--nl-number-badge-font-size);
2068
+ --utrecht-number-badge-color: var(--nl-number-badge-color); /* Default text color for badge components */
2069
+ --utrecht-number-badge-background-color: var(--nl-number-badge-background-color);
2070
+ --utrecht-mark-color: var(--nl-mark-color);
2071
+ --utrecht-mark-background-color: var(--nl-mark-background-color);
1991
2072
  --utrecht-listbox-border-width: var(--utrecht-form-control-border-width);
1992
2073
  --utrecht-listbox-border-color: var(--utrecht-form-control-border-color);
1993
2074
  --utrecht-link-visited-color: var(--utrecht-link-color);
1994
2075
  --utrecht-link-hover-color: var(--utrecht-link-focus-color);
1995
2076
  --utrecht-link-active-color: var(--utrecht-link-color);
2077
+ --utrecht-heading-6-line-height: var(--nl-heading-level-6-line-height);
2078
+ --utrecht-heading-6-font-weight: var(--nl-heading-level-6-font-weight);
2079
+ --utrecht-heading-6-font-size: var(--nl-heading-level-6-font-size);
2080
+ --utrecht-heading-6-font-family: var(--nl-heading-level-6-font-family);
2081
+ --utrecht-heading-5-line-height: var(--nl-heading-level-5-line-height);
2082
+ --utrecht-heading-5-font-weight: var(--nl-heading-level-5-font-weight);
2083
+ --utrecht-heading-5-font-size: var(--nl-heading-level-5-font-size);
2084
+ --utrecht-heading-5-font-family: var(--nl-heading-level-5-font-family);
2085
+ --utrecht-heading-4-line-height: var(--nl-heading-level-4-line-height);
2086
+ --utrecht-heading-4-font-weight: var(--nl-heading-level-4-font-weight);
2087
+ --utrecht-heading-4-font-size: var(--nl-heading-level-4-font-size);
2088
+ --utrecht-heading-4-font-family: var(--nl-heading-level-4-font-family);
2089
+ --utrecht-heading-3-line-height: var(--nl-heading-level-3-line-height);
2090
+ --utrecht-heading-3-font-weight: var(--nl-heading-level-3-font-weight);
2091
+ --utrecht-heading-3-font-size: var(--nl-heading-level-3-font-size);
2092
+ --utrecht-heading-3-font-family: var(--nl-heading-level-3-font-family);
2093
+ --utrecht-heading-2-line-height: var(--nl-heading-level-2-line-height);
2094
+ --utrecht-heading-2-font-weight: var(--nl-heading-level-2-font-weight);
2095
+ --utrecht-heading-2-font-size: var(--nl-heading-level-2-font-size);
2096
+ --utrecht-heading-2-font-family: var(--nl-heading-level-2-font-family);
2097
+ --utrecht-heading-1-line-height: var(--nl-heading-level-1-line-height);
2098
+ --utrecht-heading-1-font-weight: var(--nl-heading-level-1-font-weight);
2099
+ --utrecht-heading-1-font-size: var(--nl-heading-level-1-font-size);
2100
+ --utrecht-heading-1-font-family: var(--nl-heading-level-1-font-family);
1996
2101
  --utrecht-form-field-error-message-color: var(--utrecht-feedback-invalid-color);
1997
2102
  --utrecht-form-field-description-warning-color: var(--utrecht-feedback-warning-color);
1998
2103
  --utrecht-form-field-description-invalid-color: var(--utrecht-feedback-invalid-color);
@@ -2012,6 +2117,10 @@
2012
2117
  --utrecht-feedback-warning-background-color: var(--utrecht-feedback-warning-color);
2013
2118
  --utrecht-feedback-danger-border-color: var(--utrecht-feedback-danger-color);
2014
2119
  --utrecht-feedback-danger-background-color: var(--utrecht-feedback-danger-color);
2120
+ --utrecht-code-block-line-height: var(--nl-code-block-line-height);
2121
+ --utrecht-code-block-font-size: var(--nl-code-block-font-size);
2122
+ --utrecht-code-block-color: var(--nl-code-block-color);
2123
+ --utrecht-code-block-background-color: var(--nl-code-block-background-color);
2015
2124
  --utrecht-checkbox-color: var(--utrecht-form-control-color);
2016
2125
  --utrecht-checkbox-border-color: var(--utrecht-form-control-border-color);
2017
2126
  --utrecht-checkbox-background-color: var(--utrecht-form-control-background-color);
@@ -2036,9 +2145,22 @@
2036
2145
  --utrecht-button-pressed-background-color: var(--utrecht-button-active-background-color);
2037
2146
  --utrecht-breadcrumb-nav-arrows-link-focus-background-color: var(--utrecht-focus-background-color);
2038
2147
  --utrecht-breadcrumb-nav-link-focus-background-color: var(--utrecht-focus-background-color);
2148
+ --utrecht-badge-padding-inline: var(--nl-data-badge-padding-inline); /* Default inline padding color for badge components */
2149
+ --utrecht-badge-padding-block: var(--nl-data-badge-padding-block); /* Default block padding for badge components */
2150
+ --utrecht-badge-color: var(--nl-data-badge-color); /* Default text color for badge components */
2151
+ --utrecht-badge-background-color: var(--nl-data-badge-background-color); /* Default background color for badge components */
2039
2152
  --utrecht-badge-counter-border-radius: var(--utrecht-badge-counter-font-size); /* Default corner radius for badge components */
2040
2153
  --of-layout-bg: var(--of-layout-background);
2154
+ --utrecht-skip-link-focus-color: var(--nl-skip-link-focus-visible-color);
2155
+ --utrecht-skip-link-focus-background-color: var(--nl-skip-link-focus-visible-background-color);
2156
+ --utrecht-skip-link-padding-inline-end: var(--nl-skip-link-padding-inline);
2157
+ --utrecht-skip-link-padding-inline-start: var(--nl-skip-link-padding-inline);
2158
+ --utrecht-skip-link-padding-block-end: var(--nl-skip-link-padding-block);
2159
+ --utrecht-skip-link-padding-block-start: var(--nl-skip-link-padding-block);
2160
+ --utrecht-skip-link-color: var(--nl-skip-link-color);
2161
+ --utrecht-skip-link-background-color: var(--nl-skip-link-background-color);
2041
2162
  --utrecht-radio-button-invalid-border-color: var(--utrecht-form-control-invalid-border-color);
2163
+ --utrecht-number-badge-border-radius: var(--nl-number-badge-border-radius);
2042
2164
  --utrecht-form-field-invalid-border-inline-start-color: var(--utrecht-form-control-invalid-border-color);
2043
2165
  --utrecht-form-field-description-valid-color: var(--utrecht-feedback-valid-color);
2044
2166
  --utrecht-feedback-active-border-color: var(--utrecht-feedback-safe-border-color);