@utrecht/design-tokens 2.3.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 (73) hide show
  1. package/CHANGELOG.md +14 -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 +246 -36
  15. package/dist/dark/list.json +1046 -102
  16. package/dist/dark/list.mjs +1046 -102
  17. package/dist/dark/property.css +0 -1
  18. package/dist/dark/root.css +124 -63
  19. package/dist/dark/theme-prince-xml.css +124 -63
  20. package/dist/dark/theme.css +124 -63
  21. package/dist/dark/tokens.cjs +1209 -116
  22. package/dist/dark/tokens.d.ts +177 -20
  23. package/dist/dark/tokens.json +1209 -116
  24. package/dist/dark/variables.cjs +62 -1
  25. package/dist/dark/variables.css +124 -63
  26. package/dist/dark/variables.d.ts +62 -1
  27. package/dist/dark/variables.json +62 -1
  28. package/dist/dark/variables.less +124 -63
  29. package/dist/dark/variables.mjs +62 -1
  30. package/dist/index.cjs +62 -1
  31. package/dist/index.css +248 -126
  32. package/dist/index.d.ts +62 -1
  33. package/dist/index.flat.json +62 -1
  34. package/dist/index.json +1046 -102
  35. package/dist/index.mjs +62 -1
  36. package/dist/index.tokens.json +246 -36
  37. package/dist/list.json +1046 -102
  38. package/dist/list.mjs +1046 -102
  39. package/dist/property.css +0 -1
  40. package/dist/root.css +124 -63
  41. package/dist/theme-prince-xml.css +124 -63
  42. package/dist/theme.css +124 -63
  43. package/dist/tokens.cjs +1209 -116
  44. package/dist/tokens.d.ts +177 -20
  45. package/dist/tokens.json +1209 -116
  46. package/dist/variables.cjs +62 -1
  47. package/dist/variables.css +124 -63
  48. package/dist/variables.d.ts +62 -1
  49. package/dist/variables.json +62 -1
  50. package/dist/variables.less +124 -63
  51. package/dist/variables.mjs +62 -1
  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/utrecht/badge.tokens.json +5 -5
  62. package/src/component/utrecht/code-block.tokens.json +9 -9
  63. package/src/component/utrecht/heading-1.tokens.json +4 -4
  64. package/src/component/utrecht/heading-2.tokens.json +4 -4
  65. package/src/component/utrecht/heading-3.tokens.json +4 -4
  66. package/src/component/utrecht/heading-4.tokens.json +4 -4
  67. package/src/component/utrecht/heading-5.tokens.json +4 -4
  68. package/src/component/utrecht/heading-6.tokens.json +4 -4
  69. package/src/component/utrecht/mark.tokens.json +2 -2
  70. package/src/component/utrecht/number-badge.tokens.json +6 -6
  71. package/src/component/utrecht/paragraph.tokens.json +8 -8
  72. package/src/component/utrecht/skip-link.tokens.json +10 -10
  73. package/src/component/utrecht/badge-data.tokens.json +0 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @utrecht/design-tokens
2
2
 
3
+ ## 2.4.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 6ce885b: Add design tokens for NL Design System Candidate components:
8
+
9
+ - `nl-code-block…`
10
+ - `nl-data-badge`
11
+ - `nl-heading`
12
+ - `nl-mark`
13
+ - `nl-number-badge`
14
+ - `nl-paragraph`
15
+ - `nl-skip-link`
16
+
3
17
  ## 2.3.0
4
18
 
5
19
  ### Minor Changes
package/dist/_mixin-theme.scss CHANGED
@@ -4,6 +4,12 @@
4
4
 
5
5
  @mixin utrecht-theme {
6
6
  --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
7
+ --nl-number-badge-padding-inline: 1ex;
8
+ --nl-number-badge-padding-block: 1ex;
9
+ --nl-data-badge-border-radius: 0;
10
+ --nl-code-block-padding-inline: 20px;
11
+ --nl-code-block-padding-block: 20px;
12
+ --nl-code-block-font-family: "Monaco";
7
13
  --denhaag-process-steps-sub-step-marker-size: 12px;
8
14
  --denhaag-process-steps-step-marker-size: 28px;
9
15
  --utrecht-toptask-nav-link-grid-max-inline-size: 240px;
@@ -168,8 +174,6 @@
168
174
  --utrecht-ordered-list-margin-block-start: 0;
169
175
  --utrecht-number-data-negative-color: red;
170
176
  --utrecht-number-data-positive-color: green;
171
- --utrecht-number-badge-padding-inline: 1ex; /* Default inline padding color for badge components */
172
- --utrecht-number-badge-padding-block: 1ex; /* Default block padding for badge components */
173
177
  --utrecht-topnav-link-focus-text-decoration: none;
174
178
  --utrecht-topnav-link-focus-border-type: dotted;
175
179
  --utrecht-mapcontrolbutton-margin-inline-start: 0;
@@ -310,10 +314,6 @@
310
314
  --utrecht-action-activate-cursor: pointer;
311
315
  --utrecht-column-layout-column-width: 350px;
312
316
  --utrecht-column-layout-column-rule-width: 2px;
313
- --utrecht-code-block-padding-inline-end: 20px;
314
- --utrecht-code-block-padding-inline-start: 20px;
315
- --utrecht-code-block-padding-block-end: 20px;
316
- --utrecht-code-block-padding-block-start: 20px;
317
317
  --utrecht-checkbox-margin-block-start: 0;
318
318
  --utrecht-checkbox-focus-border-width: 2px;
319
319
  --utrecht-checkbox-size: 24px;
@@ -364,7 +364,6 @@
364
364
  --utrecht-blockquote-margin-block-start: 1.6em;
365
365
  --utrecht-blockquote-margin-inline-end: 1.6em;
366
366
  --utrecht-blockquote-margin-inline-start: 1.6em;
367
- --utrecht-badge-border-radius: 0; /* Default corner radius for badge components */
368
367
  --utrecht-badge-counter-padding-inline: 1ex; /* Default inline padding color for badge components */
369
368
  --utrecht-badge-counter-padding-block: 1ex; /* Default block padding for badge components */
370
369
  --utrecht-backdrop-reduced-transparency-opacity: 0.98;
@@ -380,6 +379,53 @@
380
379
  --utrecht-accordion-button-icon-size: 24px;
381
380
  --utrecht-accordion-button-hover-background-color: inherit;
382
381
  --utrecht-accordion-button-border-width: 0;
382
+ --nl-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
383
+ --nl-skip-link-text-decoration: var(--utrecht-link-text-decoration);
384
+ --nl-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);
385
+ --nl-paragraph-lead-line-height: var(--utrecht-typography-line-height-md);
386
+ --nl-paragraph-lead-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
387
+ --nl-paragraph-lead-font-size: var(--utrecht-typography-scale-xl-font-size);
388
+ --nl-paragraph-line-height: var(--utrecht-typography-line-height-md);
389
+ --nl-paragraph-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
390
+ --nl-paragraph-font-size: var(--utrecht-typography-scale-md-font-size);
391
+ --nl-paragraph-font-family: var(--utrecht-typography-sans-serif-font-family);
392
+ --nl-number-badge-font-size: var(--utrecht-typography-scale-md-font-size);
393
+ --nl-number-badge-color: var(--utrecht-color-white);
394
+ --nl-number-badge-background-color: var(--utrecht-color-red-40);
395
+ --nl-mark-color: var(--utrecht-color-black);
396
+ --nl-mark-background-color: var(--utrecht-color-yellow-60);
397
+ --nl-heading-level-6-line-height: var(--utrecht-typography-line-height-md);
398
+ --nl-heading-level-6-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
399
+ --nl-heading-level-6-font-size: var(--utrecht-typography-scale-sm-font-size);
400
+ --nl-heading-level-6-font-family: var(--utrecht-typography-sans-serif-font-family);
401
+ --nl-heading-level-5-line-height: var(--utrecht-typography-line-height-md);
402
+ --nl-heading-level-5-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
403
+ --nl-heading-level-5-font-size: var(--utrecht-typography-scale-sm-font-size);
404
+ --nl-heading-level-5-font-family: var(--utrecht-typography-sans-serif-font-family);
405
+ --nl-heading-level-4-line-height: var(--utrecht-typography-line-height-md);
406
+ --nl-heading-level-4-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
407
+ --nl-heading-level-4-font-size: var(--utrecht-typography-scale-lg-font-size);
408
+ --nl-heading-level-4-font-family: var(--utrecht-typography-sans-serif-font-family);
409
+ --nl-heading-level-3-line-height: var(--utrecht-typography-line-height-sm);
410
+ --nl-heading-level-3-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
411
+ --nl-heading-level-3-font-size: var(--utrecht-typography-scale-xl-font-size);
412
+ --nl-heading-level-3-font-family: var(--utrecht-typography-sans-serif-font-family);
413
+ --nl-heading-level-2-line-height: var(--utrecht-typography-line-height-sm);
414
+ --nl-heading-level-2-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
415
+ --nl-heading-level-2-font-size: var(--utrecht-typography-scale-xl-font-size);
416
+ --nl-heading-level-2-font-family: var(--utrecht-typography-sans-serif-font-family);
417
+ --nl-heading-level-1-line-height: var(--utrecht-typography-line-height-sm);
418
+ --nl-heading-level-1-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
419
+ --nl-heading-level-1-font-size: var(--utrecht-typography-scale-4xl-font-size);
420
+ --nl-heading-level-1-font-family: var(--utrecht-typography-sans-serif-font-family);
421
+ --nl-data-badge-padding-inline: var(--utrecht-space-inline-sm);
422
+ --nl-data-badge-padding-block: var(--utrecht-space-block-xs);
423
+ --nl-data-badge-color: var(--utrecht-color-white);
424
+ --nl-data-badge-background-color: var(--utrecht-color-grey-30);
425
+ --nl-code-block-line-height: var(--utrecht-typography-line-height-md);
426
+ --nl-code-block-font-size: var(--utrecht-typography-scale-md-font-size);
427
+ --nl-code-block-color: var(--utrecht-color-black);
428
+ --nl-code-block-background-color: var(--utrecht-color-grey-95);
383
429
  --denhaag-process-steps-sub-step-heading-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
384
430
  --denhaag-process-steps-sub-step-heading-font-size: var(--utrecht-typography-scale-sm-font-size);
385
431
  --denhaag-process-steps-sub-step-heading-color: var(--utrecht-color-grey-15);
@@ -463,8 +509,6 @@
463
509
  --utrecht-spotlight-section-padding-block-start: var(--utrecht-space-block-md);
464
510
  --utrecht-spotlight-section-color: var(--utrecht-color-black);
465
511
  --utrecht-spotlight-section-background-color: var(--utrecht-color-grey-90);
466
- --utrecht-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
467
- --utrecht-skip-link-text-decoration: var(--utrecht-link-text-decoration);
468
512
  --utrecht-separator-margin-block-start: var(--utrecht-space-block-md);
469
513
  --utrecht-separator-margin-block-end: var(--utrecht-space-block-md);
470
514
  --utrecht-separator-color: var(--utrecht-color-grey-90);
@@ -509,14 +553,7 @@
509
553
  --utrecht-pre-heading-margin-block-start: var(--utrecht-space-row-2xl);
510
554
  --utrecht-pre-heading-font-size: var(--utrecht-typography-scale-md-font-size);
511
555
  --utrecht-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);
512
- --utrecht-paragraph-lead-line-height: var(--utrecht-typography-line-height-md);
513
- --utrecht-paragraph-lead-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
514
- --utrecht-paragraph-lead-font-size: var(--utrecht-typography-scale-xl-font-size);
515
556
  --utrecht-paragraph-margin-block-start: var(--utrecht-space-block-md);
516
- --utrecht-paragraph-line-height: var(--utrecht-typography-line-height-md);
517
- --utrecht-paragraph-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
518
- --utrecht-paragraph-font-size: var(--utrecht-typography-scale-md-font-size);
519
- --utrecht-paragraph-font-family: var(--utrecht-typography-sans-serif-font-family);
520
557
  --utrecht-pagination-relative-link-hover-color: var(--utrecht-color-white);
521
558
  --utrecht-pagination-relative-link-hover-border-color: var(--utrecht-color-blue-35);
522
559
  --utrecht-pagination-relative-link-hover-background-color: var(--utrecht-color-blue-35);
@@ -542,9 +579,8 @@
542
579
  --utrecht-page-footer-background-image: linear-gradient(45deg, var(--utrecht-color-red-40), var(--utrecht-color-red-40) 50%, #d63433 50%);;
543
580
  --utrecht-page-footer-background-color: var(--utrecht-color-red-40);
544
581
  --utrecht-page-footer-color: var(--utrecht-color-white);
545
- --utrecht-number-badge-font-size: var(--utrecht-typography-scale-md-font-size);
546
- --utrecht-number-badge-color: var(--utrecht-color-white); /* Default text color for badge components */
547
- --utrecht-number-badge-background-color: var(--utrecht-color-red-40);
582
+ --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
583
+ --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /* Default block padding for badge components */
548
584
  --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
549
585
  --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
550
586
  --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
@@ -570,8 +606,6 @@
570
606
  --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
571
607
  --utrecht-nav-bar-color: var(--utrecht-color-black);
572
608
  --utrecht-nav-bar-background-color: var(--utrecht-color-white);
573
- --utrecht-mark-color: var(--utrecht-color-black);
574
- --utrecht-mark-background-color: var(--utrecht-color-yellow-60);
575
609
  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
576
610
  --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
577
611
  --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
@@ -628,30 +662,6 @@
628
662
  --utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
629
663
  --utrecht-index-char-nav-margin-block-start: var(--utrecht-space-block-lg);
630
664
  --utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
631
- --utrecht-heading-6-line-height: var(--utrecht-typography-line-height-md);
632
- --utrecht-heading-6-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
633
- --utrecht-heading-6-font-size: var(--utrecht-typography-scale-sm-font-size);
634
- --utrecht-heading-6-font-family: var(--utrecht-typography-sans-serif-font-family);
635
- --utrecht-heading-5-line-height: var(--utrecht-typography-line-height-md);
636
- --utrecht-heading-5-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
637
- --utrecht-heading-5-font-size: var(--utrecht-typography-scale-sm-font-size);
638
- --utrecht-heading-5-font-family: var(--utrecht-typography-sans-serif-font-family);
639
- --utrecht-heading-4-line-height: var(--utrecht-typography-line-height-md);
640
- --utrecht-heading-4-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
641
- --utrecht-heading-4-font-size: var(--utrecht-typography-scale-lg-font-size);
642
- --utrecht-heading-4-font-family: var(--utrecht-typography-sans-serif-font-family);
643
- --utrecht-heading-3-line-height: var(--utrecht-typography-line-height-sm);
644
- --utrecht-heading-3-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
645
- --utrecht-heading-3-font-size: var(--utrecht-typography-scale-xl-font-size);
646
- --utrecht-heading-3-font-family: var(--utrecht-typography-sans-serif-font-family);
647
- --utrecht-heading-2-line-height: var(--utrecht-typography-line-height-sm);
648
- --utrecht-heading-2-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
649
- --utrecht-heading-2-font-size: var(--utrecht-typography-scale-xl-font-size);
650
- --utrecht-heading-2-font-family: var(--utrecht-typography-sans-serif-font-family);
651
- --utrecht-heading-1-line-height: var(--utrecht-typography-line-height-sm);
652
- --utrecht-heading-1-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
653
- --utrecht-heading-1-font-size: var(--utrecht-typography-scale-4xl-font-size);
654
- --utrecht-heading-1-font-family: var(--utrecht-typography-sans-serif-font-family);
655
665
  --utrecht-form-toggle-focus-border-color: var(--utrecht-color-black);
656
666
  --utrecht-form-toggle-checked-accent-color: var(--utrecht-color-blue-35);
657
667
  --utrecht-form-toggle-thumb-disabled-background-color: var(--utrecht-color-white);
@@ -728,12 +738,13 @@
728
738
  --utrecht-feedback-danger-color: var(--utrecht-color-red-40);
729
739
  --utrecht-column-layout-gap: var(--utrecht-space-column-md);
730
740
  --utrecht-column-layout-column-rule-color: var(--utrecht-color-grey-80);
741
+ --utrecht-code-block-padding-inline-end: var(--nl-code-block-padding-inline);
742
+ --utrecht-code-block-padding-inline-start: var(--nl-code-block-padding-inline);
743
+ --utrecht-code-block-padding-block-end: var(--nl-code-block-padding-block);
744
+ --utrecht-code-block-padding-block-start: var(--nl-code-block-padding-block);
731
745
  --utrecht-code-block-margin-block-end: var(--utrecht-space-block-lg);
732
746
  --utrecht-code-block-margin-block-start: var(--utrecht-space-block-lg);
733
- --utrecht-code-block-line-height: var(--utrecht-typography-line-height-md);
734
- --utrecht-code-block-font-size: var(--utrecht-typography-scale-md-font-size);
735
- --utrecht-code-block-color: var(--utrecht-color-black);
736
- --utrecht-code-block-background-color: var(--utrecht-color-grey-95);
747
+ --utrecht-code-block-font-family: var(--nl-code-block-font-family);
737
748
  --utrecht-checkbox-indeterminate-background-color: var(--utrecht-color-blue-40);
738
749
  --utrecht-checkbox-checked-background-color: var(--utrecht-color-blue-40);
739
750
  --utrecht-checkbox-checked-border-color: var(--utrecht-color-blue-40);
@@ -868,10 +879,7 @@
868
879
  --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
869
880
  --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
870
881
  --utrecht-badge-font-style: var(--utrecht-typography-font-style-normal);
871
- --utrecht-badge-padding-inline: var(--utrecht-space-inline-sm); /* Default inline padding color for badge components */
872
- --utrecht-badge-padding-block: var(--utrecht-space-block-xs); /* Default block padding for badge components */
873
- --utrecht-badge-color: var(--utrecht-color-white); /* Default text color for badge components */
874
- --utrecht-badge-background-color: var(--utrecht-color-grey-30); /* Default background color for badge components */
882
+ --utrecht-badge-border-radius: var(--nl-data-badge-border-radius); /* Default corner radius for badge components */
875
883
  --utrecht-badge-list-item-margin-inline: var(--utrecht-space-block-sm);
876
884
  --utrecht-badge-list-item-margin-block: var(--utrecht-space-block-xs);
877
885
  --utrecht-badge-counter-font-size: var(--utrecht-typography-scale-md-font-size);
@@ -927,28 +935,64 @@
927
935
  --of-page-footer-fg: var(--utrecht-page-footer-color);
928
936
  --of-page-footer-bg: var(--utrecht-page-footer-background-color);
929
937
  --of-layout-background: var(--utrecht-document-background-color);
938
+ --nl-skip-link-focus-visible-background-color: var(--utrecht-topnav-link-focus-background-color);
939
+ --nl-skip-link-focus-visible-color: var(--utrecht-topnav-link-focus-color);
940
+ --nl-skip-link-padding-inline: var(--utrecht-button-padding-inline-start);
941
+ --nl-skip-link-padding-block: var(--utrecht-button-padding-block-start);
942
+ --nl-skip-link-color: var(--utrecht-topnav-link-color);
943
+ --nl-skip-link-background-color: var(--utrecht-topnav-list-background-color);
944
+ --nl-paragraph-lead-color: var(--utrecht-document-color);
945
+ --nl-number-badge-border-radius: var(--nl-number-badge-font-size);
930
946
  --denhaag-process-steps-sub-step-line-color: var(--denhaag-process-steps-step-line-color);
931
947
  --utrecht-toptask-link-hover-color: var(--utrecht-button-primary-action-hover-color);
932
948
  --utrecht-toptask-link-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
933
949
  --utrecht-toptask-link-color: var(--utrecht-button-primary-action-color);
934
950
  --utrecht-toptask-link-background-color: var(--utrecht-button-primary-action-background-color);
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-padding-inline-end: var(--utrecht-button-padding-inline-end);
938
- --utrecht-skip-link-padding-inline-start: var(--utrecht-button-padding-inline-start);
939
- --utrecht-skip-link-padding-block-end: var(--utrecht-button-padding-block-end);
940
- --utrecht-skip-link-padding-block-start: var(--utrecht-button-padding-block-start);
941
- --utrecht-skip-link-color: var(--utrecht-topnav-link-color);
942
- --utrecht-skip-link-background-color: var(--utrecht-topnav-list-background-color);
951
+ --utrecht-skip-link-focus-visible-text-decoration: var(--nl-skip-link-focus-visible-text-decoration);
952
+ --utrecht-skip-link-text-decoration: var(--nl-skip-link-text-decoration);
943
953
  --utrecht-radio-button-border-color: var(--utrecht-form-control-border-color);
944
954
  --utrecht-radio-button-background-color: var(--utrecht-form-control-background-color);
945
- --utrecht-paragraph-lead-color: var(--utrecht-document-color);
946
- --utrecht-number-badge-border-radius: var(--utrecht-number-badge-font-size);
955
+ --utrecht-paragraph-lead-line-height: var(--nl-paragraph-lead-line-height);
956
+ --utrecht-paragraph-lead-font-weight: var(--nl-paragraph-lead-font-weight);
957
+ --utrecht-paragraph-lead-font-size: var(--nl-paragraph-lead-font-size);
958
+ --utrecht-paragraph-line-height: var(--nl-paragraph-line-height);
959
+ --utrecht-paragraph-font-weight: var(--nl-paragraph-font-weight);
960
+ --utrecht-paragraph-font-size: var(--nl-paragraph-font-size);
961
+ --utrecht-paragraph-font-family: var(--nl-paragraph-font-family);
962
+ --utrecht-number-badge-font-size: var(--nl-number-badge-font-size);
963
+ --utrecht-number-badge-color: var(--nl-number-badge-color); /* Default text color for badge components */
964
+ --utrecht-number-badge-background-color: var(--nl-number-badge-background-color);
965
+ --utrecht-mark-color: var(--nl-mark-color);
966
+ --utrecht-mark-background-color: var(--nl-mark-background-color);
947
967
  --utrecht-listbox-border-width: var(--utrecht-form-control-border-width);
948
968
  --utrecht-listbox-border-color: var(--utrecht-form-control-border-color);
949
969
  --utrecht-link-visited-color: var(--utrecht-link-color);
950
970
  --utrecht-link-hover-color: var(--utrecht-link-focus-color);
951
971
  --utrecht-link-active-color: var(--utrecht-link-color);
972
+ --utrecht-heading-6-line-height: var(--nl-heading-level-6-line-height);
973
+ --utrecht-heading-6-font-weight: var(--nl-heading-level-6-font-weight);
974
+ --utrecht-heading-6-font-size: var(--nl-heading-level-6-font-size);
975
+ --utrecht-heading-6-font-family: var(--nl-heading-level-6-font-family);
976
+ --utrecht-heading-5-line-height: var(--nl-heading-level-5-line-height);
977
+ --utrecht-heading-5-font-weight: var(--nl-heading-level-5-font-weight);
978
+ --utrecht-heading-5-font-size: var(--nl-heading-level-5-font-size);
979
+ --utrecht-heading-5-font-family: var(--nl-heading-level-5-font-family);
980
+ --utrecht-heading-4-line-height: var(--nl-heading-level-4-line-height);
981
+ --utrecht-heading-4-font-weight: var(--nl-heading-level-4-font-weight);
982
+ --utrecht-heading-4-font-size: var(--nl-heading-level-4-font-size);
983
+ --utrecht-heading-4-font-family: var(--nl-heading-level-4-font-family);
984
+ --utrecht-heading-3-line-height: var(--nl-heading-level-3-line-height);
985
+ --utrecht-heading-3-font-weight: var(--nl-heading-level-3-font-weight);
986
+ --utrecht-heading-3-font-size: var(--nl-heading-level-3-font-size);
987
+ --utrecht-heading-3-font-family: var(--nl-heading-level-3-font-family);
988
+ --utrecht-heading-2-line-height: var(--nl-heading-level-2-line-height);
989
+ --utrecht-heading-2-font-weight: var(--nl-heading-level-2-font-weight);
990
+ --utrecht-heading-2-font-size: var(--nl-heading-level-2-font-size);
991
+ --utrecht-heading-2-font-family: var(--nl-heading-level-2-font-family);
992
+ --utrecht-heading-1-line-height: var(--nl-heading-level-1-line-height);
993
+ --utrecht-heading-1-font-weight: var(--nl-heading-level-1-font-weight);
994
+ --utrecht-heading-1-font-size: var(--nl-heading-level-1-font-size);
995
+ --utrecht-heading-1-font-family: var(--nl-heading-level-1-font-family);
952
996
  --utrecht-form-field-error-message-color: var(--utrecht-feedback-invalid-color);
953
997
  --utrecht-form-field-description-warning-color: var(--utrecht-feedback-warning-color);
954
998
  --utrecht-form-field-description-invalid-color: var(--utrecht-feedback-invalid-color);
@@ -968,6 +1012,10 @@
968
1012
  --utrecht-feedback-warning-background-color: var(--utrecht-feedback-warning-color);
969
1013
  --utrecht-feedback-danger-border-color: var(--utrecht-feedback-danger-color);
970
1014
  --utrecht-feedback-danger-background-color: var(--utrecht-feedback-danger-color);
1015
+ --utrecht-code-block-line-height: var(--nl-code-block-line-height);
1016
+ --utrecht-code-block-font-size: var(--nl-code-block-font-size);
1017
+ --utrecht-code-block-color: var(--nl-code-block-color);
1018
+ --utrecht-code-block-background-color: var(--nl-code-block-background-color);
971
1019
  --utrecht-checkbox-color: var(--utrecht-form-control-color);
972
1020
  --utrecht-checkbox-border-color: var(--utrecht-form-control-border-color);
973
1021
  --utrecht-checkbox-background-color: var(--utrecht-form-control-background-color);
@@ -982,9 +1030,22 @@
982
1030
  --utrecht-button-pressed-background-color: var(--utrecht-button-active-background-color);
983
1031
  --utrecht-breadcrumb-nav-arrows-link-focus-background-color: var(--utrecht-focus-background-color);
984
1032
  --utrecht-breadcrumb-nav-link-focus-background-color: var(--utrecht-focus-background-color);
1033
+ --utrecht-badge-padding-inline: var(--nl-data-badge-padding-inline); /* Default inline padding color for badge components */
1034
+ --utrecht-badge-padding-block: var(--nl-data-badge-padding-block); /* Default block padding for badge components */
1035
+ --utrecht-badge-color: var(--nl-data-badge-color); /* Default text color for badge components */
1036
+ --utrecht-badge-background-color: var(--nl-data-badge-background-color); /* Default background color for badge components */
985
1037
  --utrecht-badge-counter-border-radius: var(--utrecht-badge-counter-font-size); /* Default corner radius for badge components */
986
1038
  --of-layout-bg: var(--of-layout-background);
1039
+ --utrecht-skip-link-focus-color: var(--nl-skip-link-focus-visible-color);
1040
+ --utrecht-skip-link-focus-background-color: var(--nl-skip-link-focus-visible-background-color);
1041
+ --utrecht-skip-link-padding-inline-end: var(--nl-skip-link-padding-inline);
1042
+ --utrecht-skip-link-padding-inline-start: var(--nl-skip-link-padding-inline);
1043
+ --utrecht-skip-link-padding-block-end: var(--nl-skip-link-padding-block);
1044
+ --utrecht-skip-link-padding-block-start: var(--nl-skip-link-padding-block);
1045
+ --utrecht-skip-link-color: var(--nl-skip-link-color);
1046
+ --utrecht-skip-link-background-color: var(--nl-skip-link-background-color);
987
1047
  --utrecht-radio-button-invalid-border-color: var(--utrecht-form-control-invalid-border-color);
1048
+ --utrecht-number-badge-border-radius: var(--nl-number-badge-border-radius);
988
1049
  --utrecht-form-field-invalid-border-inline-start-color: var(--utrecht-form-control-invalid-border-color);
989
1050
  --utrecht-form-field-description-valid-color: var(--utrecht-feedback-valid-color);
990
1051
  --utrecht-feedback-active-border-color: var(--utrecht-feedback-safe-border-color);
package/dist/_mixin.scss CHANGED
@@ -4,6 +4,12 @@
4
4
 
5
5
  @mixin utrecht-theme {
6
6
  --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
7
+ --nl-number-badge-padding-inline: 1ex;
8
+ --nl-number-badge-padding-block: 1ex;
9
+ --nl-data-badge-border-radius: 0;
10
+ --nl-code-block-padding-inline: 20px;
11
+ --nl-code-block-padding-block: 20px;
12
+ --nl-code-block-font-family: "Monaco";
7
13
  --denhaag-process-steps-sub-step-marker-size: 12px;
8
14
  --denhaag-process-steps-step-marker-size: 28px;
9
15
  --utrecht-toptask-nav-link-grid-max-inline-size: 240px;
@@ -168,8 +174,6 @@
168
174
  --utrecht-ordered-list-margin-block-start: 0;
169
175
  --utrecht-number-data-negative-color: red;
170
176
  --utrecht-number-data-positive-color: green;
171
- --utrecht-number-badge-padding-inline: 1ex; /* Default inline padding color for badge components */
172
- --utrecht-number-badge-padding-block: 1ex; /* Default block padding for badge components */
173
177
  --utrecht-topnav-link-focus-text-decoration: none;
174
178
  --utrecht-topnav-link-focus-border-type: dotted;
175
179
  --utrecht-mapcontrolbutton-margin-inline-start: 0;
@@ -310,10 +314,6 @@
310
314
  --utrecht-action-activate-cursor: pointer;
311
315
  --utrecht-column-layout-column-width: 350px;
312
316
  --utrecht-column-layout-column-rule-width: 2px;
313
- --utrecht-code-block-padding-inline-end: 20px;
314
- --utrecht-code-block-padding-inline-start: 20px;
315
- --utrecht-code-block-padding-block-end: 20px;
316
- --utrecht-code-block-padding-block-start: 20px;
317
317
  --utrecht-checkbox-margin-block-start: 0;
318
318
  --utrecht-checkbox-focus-border-width: 2px;
319
319
  --utrecht-checkbox-size: 24px;
@@ -364,7 +364,6 @@
364
364
  --utrecht-blockquote-margin-block-start: 1.6em;
365
365
  --utrecht-blockquote-margin-inline-end: 1.6em;
366
366
  --utrecht-blockquote-margin-inline-start: 1.6em;
367
- --utrecht-badge-border-radius: 0; /* Default corner radius for badge components */
368
367
  --utrecht-badge-counter-padding-inline: 1ex; /* Default inline padding color for badge components */
369
368
  --utrecht-badge-counter-padding-block: 1ex; /* Default block padding for badge components */
370
369
  --utrecht-backdrop-reduced-transparency-opacity: 0.98;
@@ -380,6 +379,53 @@
380
379
  --utrecht-accordion-button-icon-size: 24px;
381
380
  --utrecht-accordion-button-hover-background-color: inherit;
382
381
  --utrecht-accordion-button-border-width: 0;
382
+ --nl-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
383
+ --nl-skip-link-text-decoration: var(--utrecht-link-text-decoration);
384
+ --nl-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);
385
+ --nl-paragraph-lead-line-height: var(--utrecht-typography-line-height-md);
386
+ --nl-paragraph-lead-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
387
+ --nl-paragraph-lead-font-size: var(--utrecht-typography-scale-xl-font-size);
388
+ --nl-paragraph-line-height: var(--utrecht-typography-line-height-md);
389
+ --nl-paragraph-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
390
+ --nl-paragraph-font-size: var(--utrecht-typography-scale-md-font-size);
391
+ --nl-paragraph-font-family: var(--utrecht-typography-sans-serif-font-family);
392
+ --nl-number-badge-font-size: var(--utrecht-typography-scale-md-font-size);
393
+ --nl-number-badge-color: var(--utrecht-color-white);
394
+ --nl-number-badge-background-color: var(--utrecht-color-red-40);
395
+ --nl-mark-color: var(--utrecht-color-black);
396
+ --nl-mark-background-color: var(--utrecht-color-yellow-60);
397
+ --nl-heading-level-6-line-height: var(--utrecht-typography-line-height-md);
398
+ --nl-heading-level-6-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
399
+ --nl-heading-level-6-font-size: var(--utrecht-typography-scale-sm-font-size);
400
+ --nl-heading-level-6-font-family: var(--utrecht-typography-sans-serif-font-family);
401
+ --nl-heading-level-5-line-height: var(--utrecht-typography-line-height-md);
402
+ --nl-heading-level-5-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
403
+ --nl-heading-level-5-font-size: var(--utrecht-typography-scale-sm-font-size);
404
+ --nl-heading-level-5-font-family: var(--utrecht-typography-sans-serif-font-family);
405
+ --nl-heading-level-4-line-height: var(--utrecht-typography-line-height-md);
406
+ --nl-heading-level-4-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
407
+ --nl-heading-level-4-font-size: var(--utrecht-typography-scale-lg-font-size);
408
+ --nl-heading-level-4-font-family: var(--utrecht-typography-sans-serif-font-family);
409
+ --nl-heading-level-3-line-height: var(--utrecht-typography-line-height-sm);
410
+ --nl-heading-level-3-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
411
+ --nl-heading-level-3-font-size: var(--utrecht-typography-scale-xl-font-size);
412
+ --nl-heading-level-3-font-family: var(--utrecht-typography-sans-serif-font-family);
413
+ --nl-heading-level-2-line-height: var(--utrecht-typography-line-height-sm);
414
+ --nl-heading-level-2-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
415
+ --nl-heading-level-2-font-size: var(--utrecht-typography-scale-xl-font-size);
416
+ --nl-heading-level-2-font-family: var(--utrecht-typography-sans-serif-font-family);
417
+ --nl-heading-level-1-line-height: var(--utrecht-typography-line-height-sm);
418
+ --nl-heading-level-1-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
419
+ --nl-heading-level-1-font-size: var(--utrecht-typography-scale-4xl-font-size);
420
+ --nl-heading-level-1-font-family: var(--utrecht-typography-sans-serif-font-family);
421
+ --nl-data-badge-padding-inline: var(--utrecht-space-inline-sm);
422
+ --nl-data-badge-padding-block: var(--utrecht-space-block-xs);
423
+ --nl-data-badge-color: var(--utrecht-color-white);
424
+ --nl-data-badge-background-color: var(--utrecht-color-grey-30);
425
+ --nl-code-block-line-height: var(--utrecht-typography-line-height-md);
426
+ --nl-code-block-font-size: var(--utrecht-typography-scale-md-font-size);
427
+ --nl-code-block-color: var(--utrecht-color-black);
428
+ --nl-code-block-background-color: var(--utrecht-color-grey-95);
383
429
  --denhaag-process-steps-sub-step-heading-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
384
430
  --denhaag-process-steps-sub-step-heading-font-size: var(--utrecht-typography-scale-sm-font-size);
385
431
  --denhaag-process-steps-sub-step-heading-color: var(--utrecht-color-grey-15);
@@ -463,8 +509,6 @@
463
509
  --utrecht-spotlight-section-padding-block-start: var(--utrecht-space-block-md);
464
510
  --utrecht-spotlight-section-color: var(--utrecht-color-black);
465
511
  --utrecht-spotlight-section-background-color: var(--utrecht-color-grey-90);
466
- --utrecht-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
467
- --utrecht-skip-link-text-decoration: var(--utrecht-link-text-decoration);
468
512
  --utrecht-separator-margin-block-start: var(--utrecht-space-block-md);
469
513
  --utrecht-separator-margin-block-end: var(--utrecht-space-block-md);
470
514
  --utrecht-separator-color: var(--utrecht-color-grey-90);
@@ -509,14 +553,7 @@
509
553
  --utrecht-pre-heading-margin-block-start: var(--utrecht-space-row-2xl);
510
554
  --utrecht-pre-heading-font-size: var(--utrecht-typography-scale-md-font-size);
511
555
  --utrecht-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);
512
- --utrecht-paragraph-lead-line-height: var(--utrecht-typography-line-height-md);
513
- --utrecht-paragraph-lead-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
514
- --utrecht-paragraph-lead-font-size: var(--utrecht-typography-scale-xl-font-size);
515
556
  --utrecht-paragraph-margin-block-start: var(--utrecht-space-block-md);
516
- --utrecht-paragraph-line-height: var(--utrecht-typography-line-height-md);
517
- --utrecht-paragraph-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
518
- --utrecht-paragraph-font-size: var(--utrecht-typography-scale-md-font-size);
519
- --utrecht-paragraph-font-family: var(--utrecht-typography-sans-serif-font-family);
520
557
  --utrecht-pagination-relative-link-hover-color: var(--utrecht-color-white);
521
558
  --utrecht-pagination-relative-link-hover-border-color: var(--utrecht-color-blue-35);
522
559
  --utrecht-pagination-relative-link-hover-background-color: var(--utrecht-color-blue-35);
@@ -542,9 +579,8 @@
542
579
  --utrecht-page-footer-background-image: linear-gradient(45deg, var(--utrecht-color-red-40), var(--utrecht-color-red-40) 50%, #d63433 50%);;
543
580
  --utrecht-page-footer-background-color: var(--utrecht-color-red-40);
544
581
  --utrecht-page-footer-color: var(--utrecht-color-white);
545
- --utrecht-number-badge-font-size: var(--utrecht-typography-scale-md-font-size);
546
- --utrecht-number-badge-color: var(--utrecht-color-white); /* Default text color for badge components */
547
- --utrecht-number-badge-background-color: var(--utrecht-color-red-40);
582
+ --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
583
+ --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /* Default block padding for badge components */
548
584
  --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
549
585
  --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
550
586
  --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
@@ -570,8 +606,6 @@
570
606
  --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
571
607
  --utrecht-nav-bar-color: var(--utrecht-color-black);
572
608
  --utrecht-nav-bar-background-color: var(--utrecht-color-white);
573
- --utrecht-mark-color: var(--utrecht-color-black);
574
- --utrecht-mark-background-color: var(--utrecht-color-yellow-60);
575
609
  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
576
610
  --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
577
611
  --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
@@ -628,30 +662,6 @@
628
662
  --utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
629
663
  --utrecht-index-char-nav-margin-block-start: var(--utrecht-space-block-lg);
630
664
  --utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
631
- --utrecht-heading-6-line-height: var(--utrecht-typography-line-height-md);
632
- --utrecht-heading-6-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
633
- --utrecht-heading-6-font-size: var(--utrecht-typography-scale-sm-font-size);
634
- --utrecht-heading-6-font-family: var(--utrecht-typography-sans-serif-font-family);
635
- --utrecht-heading-5-line-height: var(--utrecht-typography-line-height-md);
636
- --utrecht-heading-5-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
637
- --utrecht-heading-5-font-size: var(--utrecht-typography-scale-sm-font-size);
638
- --utrecht-heading-5-font-family: var(--utrecht-typography-sans-serif-font-family);
639
- --utrecht-heading-4-line-height: var(--utrecht-typography-line-height-md);
640
- --utrecht-heading-4-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
641
- --utrecht-heading-4-font-size: var(--utrecht-typography-scale-lg-font-size);
642
- --utrecht-heading-4-font-family: var(--utrecht-typography-sans-serif-font-family);
643
- --utrecht-heading-3-line-height: var(--utrecht-typography-line-height-sm);
644
- --utrecht-heading-3-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
645
- --utrecht-heading-3-font-size: var(--utrecht-typography-scale-xl-font-size);
646
- --utrecht-heading-3-font-family: var(--utrecht-typography-sans-serif-font-family);
647
- --utrecht-heading-2-line-height: var(--utrecht-typography-line-height-sm);
648
- --utrecht-heading-2-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
649
- --utrecht-heading-2-font-size: var(--utrecht-typography-scale-xl-font-size);
650
- --utrecht-heading-2-font-family: var(--utrecht-typography-sans-serif-font-family);
651
- --utrecht-heading-1-line-height: var(--utrecht-typography-line-height-sm);
652
- --utrecht-heading-1-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
653
- --utrecht-heading-1-font-size: var(--utrecht-typography-scale-4xl-font-size);
654
- --utrecht-heading-1-font-family: var(--utrecht-typography-sans-serif-font-family);
655
665
  --utrecht-form-toggle-focus-border-color: var(--utrecht-color-black);
656
666
  --utrecht-form-toggle-checked-accent-color: var(--utrecht-color-blue-35);
657
667
  --utrecht-form-toggle-thumb-disabled-background-color: var(--utrecht-color-white);
@@ -728,12 +738,13 @@
728
738
  --utrecht-feedback-danger-color: var(--utrecht-color-red-40);
729
739
  --utrecht-column-layout-gap: var(--utrecht-space-column-md);
730
740
  --utrecht-column-layout-column-rule-color: var(--utrecht-color-grey-80);
741
+ --utrecht-code-block-padding-inline-end: var(--nl-code-block-padding-inline);
742
+ --utrecht-code-block-padding-inline-start: var(--nl-code-block-padding-inline);
743
+ --utrecht-code-block-padding-block-end: var(--nl-code-block-padding-block);
744
+ --utrecht-code-block-padding-block-start: var(--nl-code-block-padding-block);
731
745
  --utrecht-code-block-margin-block-end: var(--utrecht-space-block-lg);
732
746
  --utrecht-code-block-margin-block-start: var(--utrecht-space-block-lg);
733
- --utrecht-code-block-line-height: var(--utrecht-typography-line-height-md);
734
- --utrecht-code-block-font-size: var(--utrecht-typography-scale-md-font-size);
735
- --utrecht-code-block-color: var(--utrecht-color-black);
736
- --utrecht-code-block-background-color: var(--utrecht-color-grey-95);
747
+ --utrecht-code-block-font-family: var(--nl-code-block-font-family);
737
748
  --utrecht-checkbox-indeterminate-background-color: var(--utrecht-color-blue-40);
738
749
  --utrecht-checkbox-checked-background-color: var(--utrecht-color-blue-40);
739
750
  --utrecht-checkbox-checked-border-color: var(--utrecht-color-blue-40);
@@ -868,10 +879,7 @@
868
879
  --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
869
880
  --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
870
881
  --utrecht-badge-font-style: var(--utrecht-typography-font-style-normal);
871
- --utrecht-badge-padding-inline: var(--utrecht-space-inline-sm); /* Default inline padding color for badge components */
872
- --utrecht-badge-padding-block: var(--utrecht-space-block-xs); /* Default block padding for badge components */
873
- --utrecht-badge-color: var(--utrecht-color-white); /* Default text color for badge components */
874
- --utrecht-badge-background-color: var(--utrecht-color-grey-30); /* Default background color for badge components */
882
+ --utrecht-badge-border-radius: var(--nl-data-badge-border-radius); /* Default corner radius for badge components */
875
883
  --utrecht-badge-list-item-margin-inline: var(--utrecht-space-block-sm);
876
884
  --utrecht-badge-list-item-margin-block: var(--utrecht-space-block-xs);
877
885
  --utrecht-badge-counter-font-size: var(--utrecht-typography-scale-md-font-size);
@@ -927,28 +935,64 @@
927
935
  --of-page-footer-fg: var(--utrecht-page-footer-color);
928
936
  --of-page-footer-bg: var(--utrecht-page-footer-background-color);
929
937
  --of-layout-background: var(--utrecht-document-background-color);
938
+ --nl-skip-link-focus-visible-background-color: var(--utrecht-topnav-link-focus-background-color);
939
+ --nl-skip-link-focus-visible-color: var(--utrecht-topnav-link-focus-color);
940
+ --nl-skip-link-padding-inline: var(--utrecht-button-padding-inline-start);
941
+ --nl-skip-link-padding-block: var(--utrecht-button-padding-block-start);
942
+ --nl-skip-link-color: var(--utrecht-topnav-link-color);
943
+ --nl-skip-link-background-color: var(--utrecht-topnav-list-background-color);
944
+ --nl-paragraph-lead-color: var(--utrecht-document-color);
945
+ --nl-number-badge-border-radius: var(--nl-number-badge-font-size);
930
946
  --denhaag-process-steps-sub-step-line-color: var(--denhaag-process-steps-step-line-color);
931
947
  --utrecht-toptask-link-hover-color: var(--utrecht-button-primary-action-hover-color);
932
948
  --utrecht-toptask-link-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
933
949
  --utrecht-toptask-link-color: var(--utrecht-button-primary-action-color);
934
950
  --utrecht-toptask-link-background-color: var(--utrecht-button-primary-action-background-color);
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-padding-inline-end: var(--utrecht-button-padding-inline-end);
938
- --utrecht-skip-link-padding-inline-start: var(--utrecht-button-padding-inline-start);
939
- --utrecht-skip-link-padding-block-end: var(--utrecht-button-padding-block-end);
940
- --utrecht-skip-link-padding-block-start: var(--utrecht-button-padding-block-start);
941
- --utrecht-skip-link-color: var(--utrecht-topnav-link-color);
942
- --utrecht-skip-link-background-color: var(--utrecht-topnav-list-background-color);
951
+ --utrecht-skip-link-focus-visible-text-decoration: var(--nl-skip-link-focus-visible-text-decoration);
952
+ --utrecht-skip-link-text-decoration: var(--nl-skip-link-text-decoration);
943
953
  --utrecht-radio-button-border-color: var(--utrecht-form-control-border-color);
944
954
  --utrecht-radio-button-background-color: var(--utrecht-form-control-background-color);
945
- --utrecht-paragraph-lead-color: var(--utrecht-document-color);
946
- --utrecht-number-badge-border-radius: var(--utrecht-number-badge-font-size);
955
+ --utrecht-paragraph-lead-line-height: var(--nl-paragraph-lead-line-height);
956
+ --utrecht-paragraph-lead-font-weight: var(--nl-paragraph-lead-font-weight);
957
+ --utrecht-paragraph-lead-font-size: var(--nl-paragraph-lead-font-size);
958
+ --utrecht-paragraph-line-height: var(--nl-paragraph-line-height);
959
+ --utrecht-paragraph-font-weight: var(--nl-paragraph-font-weight);
960
+ --utrecht-paragraph-font-size: var(--nl-paragraph-font-size);
961
+ --utrecht-paragraph-font-family: var(--nl-paragraph-font-family);
962
+ --utrecht-number-badge-font-size: var(--nl-number-badge-font-size);
963
+ --utrecht-number-badge-color: var(--nl-number-badge-color); /* Default text color for badge components */
964
+ --utrecht-number-badge-background-color: var(--nl-number-badge-background-color);
965
+ --utrecht-mark-color: var(--nl-mark-color);
966
+ --utrecht-mark-background-color: var(--nl-mark-background-color);
947
967
  --utrecht-listbox-border-width: var(--utrecht-form-control-border-width);
948
968
  --utrecht-listbox-border-color: var(--utrecht-form-control-border-color);
949
969
  --utrecht-link-visited-color: var(--utrecht-link-color);
950
970
  --utrecht-link-hover-color: var(--utrecht-link-focus-color);
951
971
  --utrecht-link-active-color: var(--utrecht-link-color);
972
+ --utrecht-heading-6-line-height: var(--nl-heading-level-6-line-height);
973
+ --utrecht-heading-6-font-weight: var(--nl-heading-level-6-font-weight);
974
+ --utrecht-heading-6-font-size: var(--nl-heading-level-6-font-size);
975
+ --utrecht-heading-6-font-family: var(--nl-heading-level-6-font-family);
976
+ --utrecht-heading-5-line-height: var(--nl-heading-level-5-line-height);
977
+ --utrecht-heading-5-font-weight: var(--nl-heading-level-5-font-weight);
978
+ --utrecht-heading-5-font-size: var(--nl-heading-level-5-font-size);
979
+ --utrecht-heading-5-font-family: var(--nl-heading-level-5-font-family);
980
+ --utrecht-heading-4-line-height: var(--nl-heading-level-4-line-height);
981
+ --utrecht-heading-4-font-weight: var(--nl-heading-level-4-font-weight);
982
+ --utrecht-heading-4-font-size: var(--nl-heading-level-4-font-size);
983
+ --utrecht-heading-4-font-family: var(--nl-heading-level-4-font-family);
984
+ --utrecht-heading-3-line-height: var(--nl-heading-level-3-line-height);
985
+ --utrecht-heading-3-font-weight: var(--nl-heading-level-3-font-weight);
986
+ --utrecht-heading-3-font-size: var(--nl-heading-level-3-font-size);
987
+ --utrecht-heading-3-font-family: var(--nl-heading-level-3-font-family);
988
+ --utrecht-heading-2-line-height: var(--nl-heading-level-2-line-height);
989
+ --utrecht-heading-2-font-weight: var(--nl-heading-level-2-font-weight);
990
+ --utrecht-heading-2-font-size: var(--nl-heading-level-2-font-size);
991
+ --utrecht-heading-2-font-family: var(--nl-heading-level-2-font-family);
992
+ --utrecht-heading-1-line-height: var(--nl-heading-level-1-line-height);
993
+ --utrecht-heading-1-font-weight: var(--nl-heading-level-1-font-weight);
994
+ --utrecht-heading-1-font-size: var(--nl-heading-level-1-font-size);
995
+ --utrecht-heading-1-font-family: var(--nl-heading-level-1-font-family);
952
996
  --utrecht-form-field-error-message-color: var(--utrecht-feedback-invalid-color);
953
997
  --utrecht-form-field-description-warning-color: var(--utrecht-feedback-warning-color);
954
998
  --utrecht-form-field-description-invalid-color: var(--utrecht-feedback-invalid-color);
@@ -968,6 +1012,10 @@
968
1012
  --utrecht-feedback-warning-background-color: var(--utrecht-feedback-warning-color);
969
1013
  --utrecht-feedback-danger-border-color: var(--utrecht-feedback-danger-color);
970
1014
  --utrecht-feedback-danger-background-color: var(--utrecht-feedback-danger-color);
1015
+ --utrecht-code-block-line-height: var(--nl-code-block-line-height);
1016
+ --utrecht-code-block-font-size: var(--nl-code-block-font-size);
1017
+ --utrecht-code-block-color: var(--nl-code-block-color);
1018
+ --utrecht-code-block-background-color: var(--nl-code-block-background-color);
971
1019
  --utrecht-checkbox-color: var(--utrecht-form-control-color);
972
1020
  --utrecht-checkbox-border-color: var(--utrecht-form-control-border-color);
973
1021
  --utrecht-checkbox-background-color: var(--utrecht-form-control-background-color);
@@ -982,9 +1030,22 @@
982
1030
  --utrecht-button-pressed-background-color: var(--utrecht-button-active-background-color);
983
1031
  --utrecht-breadcrumb-nav-arrows-link-focus-background-color: var(--utrecht-focus-background-color);
984
1032
  --utrecht-breadcrumb-nav-link-focus-background-color: var(--utrecht-focus-background-color);
1033
+ --utrecht-badge-padding-inline: var(--nl-data-badge-padding-inline); /* Default inline padding color for badge components */
1034
+ --utrecht-badge-padding-block: var(--nl-data-badge-padding-block); /* Default block padding for badge components */
1035
+ --utrecht-badge-color: var(--nl-data-badge-color); /* Default text color for badge components */
1036
+ --utrecht-badge-background-color: var(--nl-data-badge-background-color); /* Default background color for badge components */
985
1037
  --utrecht-badge-counter-border-radius: var(--utrecht-badge-counter-font-size); /* Default corner radius for badge components */
986
1038
  --of-layout-bg: var(--of-layout-background);
1039
+ --utrecht-skip-link-focus-color: var(--nl-skip-link-focus-visible-color);
1040
+ --utrecht-skip-link-focus-background-color: var(--nl-skip-link-focus-visible-background-color);
1041
+ --utrecht-skip-link-padding-inline-end: var(--nl-skip-link-padding-inline);
1042
+ --utrecht-skip-link-padding-inline-start: var(--nl-skip-link-padding-inline);
1043
+ --utrecht-skip-link-padding-block-end: var(--nl-skip-link-padding-block);
1044
+ --utrecht-skip-link-padding-block-start: var(--nl-skip-link-padding-block);
1045
+ --utrecht-skip-link-color: var(--nl-skip-link-color);
1046
+ --utrecht-skip-link-background-color: var(--nl-skip-link-background-color);
987
1047
  --utrecht-radio-button-invalid-border-color: var(--utrecht-form-control-invalid-border-color);
1048
+ --utrecht-number-badge-border-radius: var(--nl-number-badge-border-radius);
988
1049
  --utrecht-form-field-invalid-border-inline-start-color: var(--utrecht-form-control-invalid-border-color);
989
1050
  --utrecht-form-field-description-valid-color: var(--utrecht-feedback-valid-color);
990
1051
  --utrecht-feedback-active-border-color: var(--utrecht-feedback-safe-border-color);