@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
@@ -158,8 +158,6 @@
158
158
  --utrecht-ordered-list-item-margin-block-end: 0.25em;
159
159
  --utrecht-number-data-positive-color: green;
160
160
  --utrecht-number-data-negative-color: red;
161
- --utrecht-number-badge-padding-inline: 1ex; /* Default inline padding color for badge components */
162
- --utrecht-number-badge-padding-block: 1ex; /* Default block padding for badge components */
163
161
  --utrecht-mapcontrolbutton-margin-inline-start: 0;
164
162
  --utrecht-mapcontrolbutton-margin-inline-end: 0;
165
163
  --utrecht-mapcontrolbutton-focus-text-decoration: none;
@@ -293,10 +291,6 @@
293
291
  --utrecht-color-blue-30: hsl(211 60% 30%); /* Deze kleur gebruiken we niet (interaction active) */
294
292
  --utrecht-color-blue-20: hsl(211 60% 20%); /* basis donkerblauw (OS focus) */
295
293
  --utrecht-color-black: hsl(0 0% 0%);
296
- --utrecht-code-block-padding-inline-start: 20px;
297
- --utrecht-code-block-padding-inline-end: 20px;
298
- --utrecht-code-block-padding-block-start: 20px;
299
- --utrecht-code-block-padding-block-end: 20px;
300
294
  --utrecht-checkbox-size: 24px;
301
295
  --utrecht-checkbox-margin-block-start: 0;
302
296
  --utrecht-checkbox-focus-border-width: 2px;
@@ -358,7 +352,6 @@
358
352
  --utrecht-blockquote-margin-block-end: 1.6em;
359
353
  --utrecht-badge-counter-padding-inline: 1ex; /* Default inline padding color for badge components */
360
354
  --utrecht-badge-counter-padding-block: 1ex; /* Default block padding for badge components */
361
- --utrecht-badge-border-radius: 0; /* Default corner radius for badge components */
362
355
  --utrecht-backdrop-reduced-transparency-opacity: 0.98;
363
356
  --utrecht-backdrop-opacity: 0.8;
364
357
  --utrecht-backdrop-fade-in-animation-duration: 400ms;
@@ -381,6 +374,12 @@
381
374
  --utrecht-accordion-button-hover-background-color: inherit;
382
375
  --utrecht-accordion-button-border-width: 0;
383
376
  --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
377
+ --nl-number-badge-padding-inline: 1ex;
378
+ --nl-number-badge-padding-block: 1ex;
379
+ --nl-data-badge-border-radius: 0;
380
+ --nl-code-block-padding-inline: 20px;
381
+ --nl-code-block-padding-block: 20px;
382
+ --nl-code-block-font-family: "Monaco";
384
383
  --denhaag-process-steps-sub-step-marker-size: 12px;
385
384
  --denhaag-process-steps-step-marker-size: 28px;
386
385
  --utrecht-unordered-list-marker-color: var(--utrecht-color-red-40);
@@ -435,8 +434,6 @@
435
434
  --utrecht-spotlight-section-error-background-color: var(--utrecht-color-red-95);
436
435
  --utrecht-spotlight-section-color: var(--utrecht-color-grey-15);
437
436
  --utrecht-spotlight-section-background-color: var(--utrecht-color-grey-20);
438
- --utrecht-skip-link-text-decoration: var(--utrecht-link-text-decoration);
439
- --utrecht-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
440
437
  --utrecht-sidenav-link-hover-color: var(--utrecht-color-blue-40);
441
438
  --utrecht-sidenav-link-color: var(--utrecht-color-blue-40);
442
439
  --utrecht-sidenav-item-marker-hover-color: var(--utrecht-color-blue-50);
@@ -491,13 +488,6 @@
491
488
  --utrecht-pre-heading-font-size: var(--utrecht-typography-scale-md-font-size);
492
489
  --utrecht-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);
493
490
  --utrecht-paragraph-margin-block-start: var(--utrecht-space-block-md);
494
- --utrecht-paragraph-line-height: var(--utrecht-typography-line-height-md);
495
- --utrecht-paragraph-lead-line-height: var(--utrecht-typography-line-height-md);
496
- --utrecht-paragraph-lead-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
497
- --utrecht-paragraph-lead-font-size: var(--utrecht-typography-scale-xl-font-size);
498
- --utrecht-paragraph-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
499
- --utrecht-paragraph-font-size: var(--utrecht-typography-scale-md-font-size);
500
- --utrecht-paragraph-font-family: var(--utrecht-typography-sans-serif-font-family);
501
491
  --utrecht-pagination-relative-link-hover-color: var(--utrecht-color-white);
502
492
  --utrecht-pagination-relative-link-hover-border-color: var(--utrecht-color-blue-35);
503
493
  --utrecht-pagination-relative-link-hover-background-color: var(--utrecht-color-blue-35);
@@ -523,9 +513,8 @@
523
513
  --utrecht-page-footer-background-color: var(--utrecht-color-red-40);
524
514
  --utrecht-page-color: var(--utrecht-color-grey-95);
525
515
  --utrecht-page-background-color: var(--utrecht-color-grey-15);
526
- --utrecht-number-badge-font-size: var(--utrecht-typography-scale-md-font-size);
527
- --utrecht-number-badge-color: var(--utrecht-color-white); /* Default text color for badge components */
528
- --utrecht-number-badge-background-color: var(--utrecht-color-red-40);
516
+ --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
517
+ --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /* Default block padding for badge components */
529
518
  --utrecht-nav-bar-link-padding-inline-start: var(--utrecht-space-inline-md);
530
519
  --utrecht-nav-bar-link-padding-inline-end: var(--utrecht-space-inline-md);
531
520
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
@@ -535,8 +524,6 @@
535
524
  --utrecht-nav-bar-background-color: var(--utrecht-color-white);
536
525
  --utrecht-menulijst-item-hover-color: var(--utrecht-color-blue-40);
537
526
  --utrecht-menulijst-item-color: var(--utrecht-color-blue-35);
538
- --utrecht-mark-color: var(--utrecht-color-black);
539
- --utrecht-mark-background-color: var(--utrecht-color-yellow-60);
540
527
  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
541
528
  --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
542
529
  --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
@@ -593,30 +580,6 @@
593
580
  --utrecht-index-char-nav-link-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
594
581
  --utrecht-index-char-nav-gap: var(--utrecht-space-column-sm);
595
582
  --utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
596
- --utrecht-heading-6-line-height: var(--utrecht-typography-line-height-md);
597
- --utrecht-heading-6-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
598
- --utrecht-heading-6-font-size: var(--utrecht-typography-scale-sm-font-size);
599
- --utrecht-heading-6-font-family: var(--utrecht-typography-sans-serif-font-family);
600
- --utrecht-heading-5-line-height: var(--utrecht-typography-line-height-md);
601
- --utrecht-heading-5-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
602
- --utrecht-heading-5-font-size: var(--utrecht-typography-scale-sm-font-size);
603
- --utrecht-heading-5-font-family: var(--utrecht-typography-sans-serif-font-family);
604
- --utrecht-heading-4-line-height: var(--utrecht-typography-line-height-md);
605
- --utrecht-heading-4-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
606
- --utrecht-heading-4-font-size: var(--utrecht-typography-scale-lg-font-size);
607
- --utrecht-heading-4-font-family: var(--utrecht-typography-sans-serif-font-family);
608
- --utrecht-heading-3-line-height: var(--utrecht-typography-line-height-sm);
609
- --utrecht-heading-3-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
610
- --utrecht-heading-3-font-size: var(--utrecht-typography-scale-xl-font-size);
611
- --utrecht-heading-3-font-family: var(--utrecht-typography-sans-serif-font-family);
612
- --utrecht-heading-2-line-height: var(--utrecht-typography-line-height-sm);
613
- --utrecht-heading-2-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
614
- --utrecht-heading-2-font-size: var(--utrecht-typography-scale-xl-font-size);
615
- --utrecht-heading-2-font-family: var(--utrecht-typography-sans-serif-font-family);
616
- --utrecht-heading-1-line-height: var(--utrecht-typography-line-height-sm);
617
- --utrecht-heading-1-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
618
- --utrecht-heading-1-font-size: var(--utrecht-typography-scale-4xl-font-size);
619
- --utrecht-heading-1-font-family: var(--utrecht-typography-sans-serif-font-family);
620
583
  --utrecht-form-toggle-track-disabled-background-color: var(--utrecht-color-grey-90);
621
584
  --utrecht-form-toggle-thumb-disabled-background-color: var(--utrecht-color-white);
622
585
  --utrecht-form-toggle-thumb-background-color: var(--utrecht-color-white);
@@ -692,12 +655,13 @@
692
655
  --utrecht-data-list-item-key-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
693
656
  --utrecht-column-layout-gap: var(--utrecht-space-column-md);
694
657
  --utrecht-column-layout-column-rule-color: var(--utrecht-color-grey-80);
658
+ --utrecht-code-block-padding-inline-start: var(--nl-code-block-padding-inline);
659
+ --utrecht-code-block-padding-inline-end: var(--nl-code-block-padding-inline);
660
+ --utrecht-code-block-padding-block-start: var(--nl-code-block-padding-block);
661
+ --utrecht-code-block-padding-block-end: var(--nl-code-block-padding-block);
695
662
  --utrecht-code-block-margin-block-start: var(--utrecht-space-block-lg);
696
663
  --utrecht-code-block-margin-block-end: var(--utrecht-space-block-lg);
697
- --utrecht-code-block-line-height: var(--utrecht-typography-line-height-md);
698
- --utrecht-code-block-font-size: var(--utrecht-typography-scale-md-font-size);
699
- --utrecht-code-block-color: var(--utrecht-color-black);
700
- --utrecht-code-block-background-color: var(--utrecht-color-grey-95);
664
+ --utrecht-code-block-font-family: var(--nl-code-block-font-family);
701
665
  --utrecht-checkbox-indeterminate-background-color: var(--utrecht-color-blue-40);
702
666
  --utrecht-checkbox-disabled-border-color: var(--utrecht-color-grey-80);
703
667
  --utrecht-checkbox-disabled-background-color: var(--utrecht-color-grey-80);
@@ -828,16 +792,13 @@
828
792
  --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
829
793
  --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
830
794
  --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
831
- --utrecht-badge-padding-inline: var(--utrecht-space-inline-sm); /* Default inline padding color for badge components */
832
- --utrecht-badge-padding-block: var(--utrecht-space-block-xs); /* Default block padding for badge components */
833
795
  --utrecht-badge-list-item-margin-inline: var(--utrecht-space-block-sm);
834
796
  --utrecht-badge-list-item-margin-block: var(--utrecht-space-block-xs);
835
797
  --utrecht-badge-font-style: var(--utrecht-typography-font-style-normal);
836
798
  --utrecht-badge-counter-font-size: var(--utrecht-typography-scale-md-font-size);
837
799
  --utrecht-badge-counter-color: var(--utrecht-color-white); /* Default text color for badge components */
838
800
  --utrecht-badge-counter-background-color: var(--utrecht-color-red-40); /* Default background color for badge components */
839
- --utrecht-badge-color: var(--utrecht-color-white); /* Default text color for badge components */
840
- --utrecht-badge-background-color: var(--utrecht-color-grey-30); /* Default background color for badge components */
801
+ --utrecht-badge-border-radius: var(--nl-data-badge-border-radius); /* Default corner radius for badge components */
841
802
  --utrecht-backdrop-color: var(--utrecht-color-white);
842
803
  --utrecht-backdrop-background-color: var(--utrecht-color-black);
843
804
  --utrecht-alert-warning-color: var(--utrecht-color-white);
@@ -884,6 +845,53 @@
884
845
  --utrecht-accordion-button-active-color: var(--utrecht-color-grey-10);
885
846
  --utrecht-accordion-button-active-border-color: var(--utrecht-color-grey-95);
886
847
  --utrecht-accordion-button-active-background-color: var(--utrecht-color-grey-80);
848
+ --nl-skip-link-text-decoration: var(--utrecht-link-text-decoration);
849
+ --nl-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
850
+ --nl-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);
851
+ --nl-paragraph-line-height: var(--utrecht-typography-line-height-md);
852
+ --nl-paragraph-lead-line-height: var(--utrecht-typography-line-height-md);
853
+ --nl-paragraph-lead-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
854
+ --nl-paragraph-lead-font-size: var(--utrecht-typography-scale-xl-font-size);
855
+ --nl-paragraph-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
856
+ --nl-paragraph-font-size: var(--utrecht-typography-scale-md-font-size);
857
+ --nl-paragraph-font-family: var(--utrecht-typography-sans-serif-font-family);
858
+ --nl-number-badge-font-size: var(--utrecht-typography-scale-md-font-size);
859
+ --nl-number-badge-color: var(--utrecht-color-white);
860
+ --nl-number-badge-background-color: var(--utrecht-color-red-40);
861
+ --nl-mark-color: var(--utrecht-color-black);
862
+ --nl-mark-background-color: var(--utrecht-color-yellow-60);
863
+ --nl-heading-level-6-line-height: var(--utrecht-typography-line-height-md);
864
+ --nl-heading-level-6-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
865
+ --nl-heading-level-6-font-size: var(--utrecht-typography-scale-sm-font-size);
866
+ --nl-heading-level-6-font-family: var(--utrecht-typography-sans-serif-font-family);
867
+ --nl-heading-level-5-line-height: var(--utrecht-typography-line-height-md);
868
+ --nl-heading-level-5-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
869
+ --nl-heading-level-5-font-size: var(--utrecht-typography-scale-sm-font-size);
870
+ --nl-heading-level-5-font-family: var(--utrecht-typography-sans-serif-font-family);
871
+ --nl-heading-level-4-line-height: var(--utrecht-typography-line-height-md);
872
+ --nl-heading-level-4-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
873
+ --nl-heading-level-4-font-size: var(--utrecht-typography-scale-lg-font-size);
874
+ --nl-heading-level-4-font-family: var(--utrecht-typography-sans-serif-font-family);
875
+ --nl-heading-level-3-line-height: var(--utrecht-typography-line-height-sm);
876
+ --nl-heading-level-3-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
877
+ --nl-heading-level-3-font-size: var(--utrecht-typography-scale-xl-font-size);
878
+ --nl-heading-level-3-font-family: var(--utrecht-typography-sans-serif-font-family);
879
+ --nl-heading-level-2-line-height: var(--utrecht-typography-line-height-sm);
880
+ --nl-heading-level-2-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
881
+ --nl-heading-level-2-font-size: var(--utrecht-typography-scale-xl-font-size);
882
+ --nl-heading-level-2-font-family: var(--utrecht-typography-sans-serif-font-family);
883
+ --nl-heading-level-1-line-height: var(--utrecht-typography-line-height-sm);
884
+ --nl-heading-level-1-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
885
+ --nl-heading-level-1-font-size: var(--utrecht-typography-scale-4xl-font-size);
886
+ --nl-heading-level-1-font-family: var(--utrecht-typography-sans-serif-font-family);
887
+ --nl-data-badge-padding-inline: var(--utrecht-space-inline-sm);
888
+ --nl-data-badge-padding-block: var(--utrecht-space-block-xs);
889
+ --nl-data-badge-color: var(--utrecht-color-white);
890
+ --nl-data-badge-background-color: var(--utrecht-color-grey-30);
891
+ --nl-code-block-line-height: var(--utrecht-typography-line-height-md);
892
+ --nl-code-block-font-size: var(--utrecht-typography-scale-md-font-size);
893
+ --nl-code-block-color: var(--utrecht-color-black);
894
+ --nl-code-block-background-color: var(--utrecht-color-grey-95);
887
895
  --denhaag-process-steps-sub-step-marker-border-color: var(--utrecht-color-green-30);
888
896
  --denhaag-process-steps-sub-step-marker-background-color: var(--utrecht-color-white);
889
897
  --denhaag-process-steps-sub-step-heading-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
@@ -928,23 +936,51 @@
928
936
  --utrecht-toptask-link-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
929
937
  --utrecht-toptask-link-color: var(--utrecht-button-primary-action-color);
930
938
  --utrecht-toptask-link-background-color: var(--utrecht-button-primary-action-background-color);
931
- --utrecht-skip-link-padding-inline-start: var(--utrecht-button-padding-inline-start);
932
- --utrecht-skip-link-padding-inline-end: var(--utrecht-button-padding-inline-end);
933
- --utrecht-skip-link-padding-block-start: var(--utrecht-button-padding-block-start);
934
- --utrecht-skip-link-padding-block-end: var(--utrecht-button-padding-block-end);
935
- --utrecht-skip-link-focus-color: var(--utrecht-topnav-link-focus-color);
936
- --utrecht-skip-link-focus-background-color: var(--utrecht-topnav-link-focus-background-color);
937
- --utrecht-skip-link-color: var(--utrecht-topnav-link-color);
938
- --utrecht-skip-link-background-color: var(--utrecht-topnav-list-background-color);
939
+ --utrecht-skip-link-text-decoration: var(--nl-skip-link-text-decoration);
940
+ --utrecht-skip-link-focus-visible-text-decoration: var(--nl-skip-link-focus-visible-text-decoration);
939
941
  --utrecht-radio-button-border-color: var(--utrecht-form-control-border-color);
940
942
  --utrecht-radio-button-background-color: var(--utrecht-form-control-background-color);
941
- --utrecht-paragraph-lead-color: var(--utrecht-document-color);
942
- --utrecht-number-badge-border-radius: var(--utrecht-number-badge-font-size);
943
+ --utrecht-paragraph-line-height: var(--nl-paragraph-line-height);
944
+ --utrecht-paragraph-lead-line-height: var(--nl-paragraph-lead-line-height);
945
+ --utrecht-paragraph-lead-font-weight: var(--nl-paragraph-lead-font-weight);
946
+ --utrecht-paragraph-lead-font-size: var(--nl-paragraph-lead-font-size);
947
+ --utrecht-paragraph-font-weight: var(--nl-paragraph-font-weight);
948
+ --utrecht-paragraph-font-size: var(--nl-paragraph-font-size);
949
+ --utrecht-paragraph-font-family: var(--nl-paragraph-font-family);
950
+ --utrecht-number-badge-font-size: var(--nl-number-badge-font-size);
951
+ --utrecht-number-badge-color: var(--nl-number-badge-color); /* Default text color for badge components */
952
+ --utrecht-number-badge-background-color: var(--nl-number-badge-background-color);
953
+ --utrecht-mark-color: var(--nl-mark-color);
954
+ --utrecht-mark-background-color: var(--nl-mark-background-color);
943
955
  --utrecht-listbox-border-width: var(--utrecht-form-control-border-width);
944
956
  --utrecht-listbox-border-color: var(--utrecht-form-control-border-color);
945
957
  --utrecht-link-visited-color: var(--utrecht-link-color);
946
958
  --utrecht-link-hover-color: var(--utrecht-link-focus-color);
947
959
  --utrecht-link-active-color: var(--utrecht-link-color);
960
+ --utrecht-heading-6-line-height: var(--nl-heading-level-6-line-height);
961
+ --utrecht-heading-6-font-weight: var(--nl-heading-level-6-font-weight);
962
+ --utrecht-heading-6-font-size: var(--nl-heading-level-6-font-size);
963
+ --utrecht-heading-6-font-family: var(--nl-heading-level-6-font-family);
964
+ --utrecht-heading-5-line-height: var(--nl-heading-level-5-line-height);
965
+ --utrecht-heading-5-font-weight: var(--nl-heading-level-5-font-weight);
966
+ --utrecht-heading-5-font-size: var(--nl-heading-level-5-font-size);
967
+ --utrecht-heading-5-font-family: var(--nl-heading-level-5-font-family);
968
+ --utrecht-heading-4-line-height: var(--nl-heading-level-4-line-height);
969
+ --utrecht-heading-4-font-weight: var(--nl-heading-level-4-font-weight);
970
+ --utrecht-heading-4-font-size: var(--nl-heading-level-4-font-size);
971
+ --utrecht-heading-4-font-family: var(--nl-heading-level-4-font-family);
972
+ --utrecht-heading-3-line-height: var(--nl-heading-level-3-line-height);
973
+ --utrecht-heading-3-font-weight: var(--nl-heading-level-3-font-weight);
974
+ --utrecht-heading-3-font-size: var(--nl-heading-level-3-font-size);
975
+ --utrecht-heading-3-font-family: var(--nl-heading-level-3-font-family);
976
+ --utrecht-heading-2-line-height: var(--nl-heading-level-2-line-height);
977
+ --utrecht-heading-2-font-weight: var(--nl-heading-level-2-font-weight);
978
+ --utrecht-heading-2-font-size: var(--nl-heading-level-2-font-size);
979
+ --utrecht-heading-2-font-family: var(--nl-heading-level-2-font-family);
980
+ --utrecht-heading-1-line-height: var(--nl-heading-level-1-line-height);
981
+ --utrecht-heading-1-font-weight: var(--nl-heading-level-1-font-weight);
982
+ --utrecht-heading-1-font-size: var(--nl-heading-level-1-font-size);
983
+ --utrecht-heading-1-font-family: var(--nl-heading-level-1-font-family);
948
984
  --utrecht-form-field-error-message-color: var(--utrecht-feedback-invalid-color);
949
985
  --utrecht-form-field-description-warning-color: var(--utrecht-feedback-warning-color);
950
986
  --utrecht-form-field-description-invalid-color: var(--utrecht-feedback-invalid-color);
@@ -964,6 +1000,10 @@
964
1000
  --utrecht-feedback-active-color: var(--utrecht-feedback-safe-color);
965
1001
  --utrecht-drawer-color: var(--utrecht-document-color);
966
1002
  --utrecht-drawer-background-color: var(--utrecht-document-background-color);
1003
+ --utrecht-code-block-line-height: var(--nl-code-block-line-height);
1004
+ --utrecht-code-block-font-size: var(--nl-code-block-font-size);
1005
+ --utrecht-code-block-color: var(--nl-code-block-color);
1006
+ --utrecht-code-block-background-color: var(--nl-code-block-background-color);
967
1007
  --utrecht-checkbox-color: var(--utrecht-form-control-color);
968
1008
  --utrecht-checkbox-border-color: var(--utrecht-form-control-border-color);
969
1009
  --utrecht-checkbox-background-color: var(--utrecht-form-control-background-color);
@@ -988,13 +1028,34 @@
988
1028
  --utrecht-button-pressed-background-color: var(--utrecht-button-active-background-color);
989
1029
  --utrecht-breadcrumb-nav-link-focus-background-color: var(--utrecht-focus-background-color);
990
1030
  --utrecht-breadcrumb-nav-arrows-link-focus-background-color: var(--utrecht-focus-background-color);
1031
+ --utrecht-badge-padding-inline: var(--nl-data-badge-padding-inline); /* Default inline padding color for badge components */
1032
+ --utrecht-badge-padding-block: var(--nl-data-badge-padding-block); /* Default block padding for badge components */
991
1033
  --utrecht-badge-counter-border-radius: var(--utrecht-badge-counter-font-size); /* Default corner radius for badge components */
1034
+ --utrecht-badge-color: var(--nl-data-badge-color); /* Default text color for badge components */
1035
+ --utrecht-badge-background-color: var(--nl-data-badge-background-color); /* Default background color for badge components */
992
1036
  --of-progress-indicator-background-color: var(--utrecht-document-background-color);
993
1037
  --of-page-footer-fg: var(--utrecht-page-footer-color);
994
1038
  --of-page-footer-bg: var(--utrecht-page-footer-background-color);
995
1039
  --of-layout-background: var(--utrecht-document-background-color);
1040
+ --nl-skip-link-padding-inline: var(--utrecht-button-padding-inline-start);
1041
+ --nl-skip-link-padding-block: var(--utrecht-button-padding-block-start);
1042
+ --nl-skip-link-focus-visible-color: var(--utrecht-topnav-link-focus-color);
1043
+ --nl-skip-link-focus-visible-background-color: var(--utrecht-topnav-link-focus-background-color);
1044
+ --nl-skip-link-color: var(--utrecht-topnav-link-color);
1045
+ --nl-skip-link-background-color: var(--utrecht-topnav-list-background-color);
1046
+ --nl-paragraph-lead-color: var(--utrecht-document-color);
1047
+ --nl-number-badge-border-radius: var(--nl-number-badge-font-size);
996
1048
  --denhaag-process-steps-sub-step-line-color: var(--denhaag-process-steps-step-line-color);
1049
+ --utrecht-skip-link-padding-inline-start: var(--nl-skip-link-padding-inline);
1050
+ --utrecht-skip-link-padding-inline-end: var(--nl-skip-link-padding-inline);
1051
+ --utrecht-skip-link-padding-block-start: var(--nl-skip-link-padding-block);
1052
+ --utrecht-skip-link-padding-block-end: var(--nl-skip-link-padding-block);
1053
+ --utrecht-skip-link-focus-color: var(--nl-skip-link-focus-visible-color);
1054
+ --utrecht-skip-link-focus-background-color: var(--nl-skip-link-focus-visible-background-color);
1055
+ --utrecht-skip-link-color: var(--nl-skip-link-color);
1056
+ --utrecht-skip-link-background-color: var(--nl-skip-link-background-color);
997
1057
  --utrecht-radio-button-invalid-border-color: var(--utrecht-form-control-invalid-border-color);
1058
+ --utrecht-number-badge-border-radius: var(--nl-number-badge-border-radius);
998
1059
  --utrecht-form-field-invalid-border-inline-start-color: var(--utrecht-form-control-invalid-border-color);
999
1060
  --utrecht-form-field-description-valid-color: var(--utrecht-feedback-valid-color);
1000
1061
  --utrecht-feedback-warning-fill-background-color: var(--utrecht-feedback-warning-background-color);