@utrecht/design-tokens 3.3.0 → 3.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 (53) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/_mixin-theme.scss +53 -0
  3. package/dist/_mixin.scss +53 -0
  4. package/dist/_variables.scss +53 -0
  5. package/dist/dark/_mixin-theme.scss +53 -0
  6. package/dist/dark/_mixin.scss +53 -0
  7. package/dist/dark/_variables.scss +53 -0
  8. package/dist/dark/index.cjs +54 -1
  9. package/dist/dark/index.css +53 -0
  10. package/dist/dark/index.d.ts +54 -1
  11. package/dist/dark/index.flat.json +53 -0
  12. package/dist/dark/index.json +1798 -0
  13. package/dist/dark/index.mjs +54 -1
  14. package/dist/dark/index.tokens.json +472 -10
  15. package/dist/dark/list.json +1798 -0
  16. package/dist/dark/list.mjs +1798 -0
  17. package/dist/dark/property.css +50 -0
  18. package/dist/dark/root.css +53 -0
  19. package/dist/dark/theme-prince-xml.css +53 -0
  20. package/dist/dark/theme.css +53 -0
  21. package/dist/dark/tokens.cjs +2231 -24
  22. package/dist/dark/tokens.d.ts +274 -3
  23. package/dist/dark/tokens.json +2231 -24
  24. package/dist/dark/variables.cjs +54 -1
  25. package/dist/dark/variables.css +53 -0
  26. package/dist/dark/variables.d.ts +54 -1
  27. package/dist/dark/variables.json +53 -0
  28. package/dist/dark/variables.less +53 -0
  29. package/dist/dark/variables.mjs +54 -1
  30. package/dist/index.cjs +54 -1
  31. package/dist/index.css +106 -0
  32. package/dist/index.d.ts +54 -1
  33. package/dist/index.flat.json +53 -0
  34. package/dist/index.json +1798 -0
  35. package/dist/index.mjs +54 -1
  36. package/dist/index.tokens.json +472 -10
  37. package/dist/list.json +1798 -0
  38. package/dist/list.mjs +1798 -0
  39. package/dist/property.css +50 -0
  40. package/dist/root.css +53 -0
  41. package/dist/theme-prince-xml.css +53 -0
  42. package/dist/theme.css +53 -0
  43. package/dist/tokens.cjs +2231 -24
  44. package/dist/tokens.d.ts +274 -3
  45. package/dist/tokens.json +2231 -24
  46. package/dist/variables.cjs +54 -1
  47. package/dist/variables.css +53 -0
  48. package/dist/variables.d.ts +54 -1
  49. package/dist/variables.json +53 -0
  50. package/dist/variables.less +53 -0
  51. package/dist/variables.mjs +54 -1
  52. package/package.json +1 -1
  53. package/src/component/utrecht/navigation.tokens.json +229 -0
package/dist/property.css CHANGED
@@ -130,6 +130,7 @@
130
130
  @property --utrecht-breadcrumb-nav-link-focus-text-decoration { syntax: 'inherit | none | underline'; inherits: true; }
131
131
  @property --utrecht-breadcrumb-nav-link-hover-color { syntax: '<color>'; inherits: true; }
132
132
  @property --utrecht-breadcrumb-nav-link-hover-text-decoration { syntax: 'inherit | none | underline'; inherits: true; }
133
+ @property --utrecht-breadcrumb-nav-link-icon-size { syntax: '<length>'; inherits: true; }
133
134
  @property --utrecht-breadcrumb-nav-min-block-size { syntax: '<length>'; inherits: true; }
134
135
  @property --utrecht-breadcrumb-nav-separator-color { syntax: '<color>'; inherits: true; }
135
136
  @property --utrecht-breadcrumb-nav-separator-icon-size { syntax: '<length>'; inherits: true; }
@@ -440,6 +441,7 @@
440
441
  @property --utrecht-heading-6-line-height { syntax: '<length> | <number>'; inherits: true; }
441
442
  @property --utrecht-heading-font-weight { syntax: '<number>'; inherits: true; }
442
443
  @property --utrecht-icon-baseline-inset-block-start { syntax: '<length>'; inherits: true; }
444
+ @property --utrecht-icon-custom-margin-inline-end { syntax: '<length>'; inherits: true; }
443
445
  @property --utrecht-icon-size { syntax: '<length-percentage>'; inherits: true; }
444
446
  @property --utrecht-index-char-nav-gap { syntax: '<length>'; inherits: true; }
445
447
  @property --utrecht-index-char-nav-link-current-font-weight { syntax: '<number>'; inherits: true; }
@@ -519,6 +521,54 @@
519
521
  @property --utrecht-nav-bar-link-padding-block-start { syntax: '<length>'; inherits: true; }
520
522
  @property --utrecht-nav-bar-link-padding-inline-end { syntax: '<length>'; inherits: true; }
521
523
  @property --utrecht-nav-bar-link-padding-inline-start { syntax: '<length>'; inherits: true; }
524
+ @property --utrecht-navigation-border-block-end-color { syntax: '<color>'; inherits: true; }
525
+ @property --utrecht-navigation-border-block-end-width { syntax: '<length>'; inherits: true; }
526
+ @property --utrecht-navigation-border-block-start-color { syntax: '<color>'; inherits: true; }
527
+ @property --utrecht-navigation-border-block-start-width { syntax: '<length>'; inherits: true; }
528
+ @property --utrecht-navigation-drawer-mobile-min-inline-size { syntax: '<length>'; inherits: true; }
529
+ @property --utrecht-navigation-item-border-block-end-color { syntax: '<color>'; inherits: true; }
530
+ @property --utrecht-navigation-item-border-block-end-width { syntax: '<length>'; inherits: true; }
531
+ @property --utrecht-navigation-item-border-block-start-color { syntax: '<color>'; inherits: true; }
532
+ @property --utrecht-navigation-item-border-block-start-width { syntax: '<length>'; inherits: true; }
533
+ @property --utrecht-navigation-item-mobile-border-block-end-color { syntax: '<color>'; inherits: true; }
534
+ @property --utrecht-navigation-item-mobile-border-block-end-width { syntax: '<length>'; inherits: true; }
535
+ @property --utrecht-navigation-item-mobile-border-block-start-color { syntax: '<color>'; inherits: true; }
536
+ @property --utrecht-navigation-item-mobile-border-block-start-width { syntax: '<length>'; inherits: true; }
537
+ @property --utrecht-navigation-link-active-color { syntax: '<color>'; inherits: true; }
538
+ @property --utrecht-navigation-link-active-focus-color { syntax: '<color>'; inherits: true; }
539
+ @property --utrecht-navigation-link-background-color { syntax: '<color>'; inherits: true; }
540
+ @property --utrecht-navigation-link-border-color { syntax: '<color>'; inherits: true; }
541
+ @property --utrecht-navigation-link-border-inline-end-width { syntax: '<length>'; inherits: true; }
542
+ @property --utrecht-navigation-link-color { syntax: '<color>'; inherits: true; }
543
+ @property --utrecht-navigation-link-focus-color { syntax: '<color>'; inherits: true; }
544
+ @property --utrecht-navigation-link-focus-text-decoration-thickness { syntax: '<length>'; inherits: true; }
545
+ @property --utrecht-navigation-link-font-weight { syntax: '<number>'; inherits: true; }
546
+ @property --utrecht-navigation-link-gap { syntax: '<length>'; inherits: true; }
547
+ @property --utrecht-navigation-link-hover-background-color { syntax: '<color>'; inherits: true; }
548
+ @property --utrecht-navigation-link-hover-color { syntax: '<color>'; inherits: true; }
549
+ @property --utrecht-navigation-link-hover-decoration-thickness { syntax: '<length>'; inherits: true; }
550
+ @property --utrecht-navigation-link-is-current-font-weight { syntax: '<number>'; inherits: true; }
551
+ @property --utrecht-navigation-link-mobile-background-color { syntax: '<color>'; inherits: true; }
552
+ @property --utrecht-navigation-link-mobile-color { syntax: '<color>'; inherits: true; }
553
+ @property --utrecht-navigation-link-mobile-hover-background-color { syntax: '<color>'; inherits: true; }
554
+ @property --utrecht-navigation-link-mobile-hover-color { syntax: '<color>'; inherits: true; }
555
+ @property --utrecht-navigation-link-mobile-hover-font-weight { syntax: '<number>'; inherits: true; }
556
+ @property --utrecht-navigation-link-mobile-min-block-size { syntax: '<length>'; inherits: true; }
557
+ @property --utrecht-navigation-link-mobile-padding-block-end { syntax: '<length>'; inherits: true; }
558
+ @property --utrecht-navigation-link-mobile-padding-block-start { syntax: '<length>'; inherits: true; }
559
+ @property --utrecht-navigation-link-mobile-padding-inline-start { syntax: '<length>'; inherits: true; }
560
+ @property --utrecht-navigation-link-mobile-transition-duration { syntax: '<time>'; inherits: true; }
561
+ @property --utrecht-navigation-link-padding-block-end { syntax: '<length>'; inherits: true; }
562
+ @property --utrecht-navigation-link-padding-block-start { syntax: '<length>'; inherits: true; }
563
+ @property --utrecht-navigation-list-mobile-background-color { syntax: '<color>'; inherits: true; }
564
+ @property --utrecht-navigation-list-mobile-inline-size { syntax: '<length>'; inherits: true; }
565
+ @property --utrecht-navigation-list-mobile-padding-block-end { syntax: '<length>'; inherits: true; }
566
+ @property --utrecht-navigation-list-mobile-padding-inline-end { syntax: '<length>'; inherits: true; }
567
+ @property --utrecht-navigation-list-mobile-padding-inline-start { syntax: '<length>'; inherits: true; }
568
+ @property --utrecht-navigation-list-side-nav-inline-size { syntax: '<length>'; inherits: true; }
569
+ @property --utrecht-navigation-marker-color { syntax: '<color>'; inherits: true; }
570
+ @property --utrecht-navigation-toggle-button-offset-end { syntax: '<length>'; inherits: true; }
571
+ @property --utrecht-navigation-toggle-button-offset-start { syntax: '<length>'; inherits: true; }
522
572
  @property --utrecht-number-badge-background-color { syntax: '<color>'; inherits: true; }
523
573
  @property --utrecht-number-badge-border-radius { syntax: '<length-percentage>'; inherits: true; }
524
574
  @property --utrecht-number-badge-color { syntax: '<color>'; inherits: true; }
package/dist/root.css CHANGED
@@ -176,6 +176,30 @@
176
176
  --utrecht-ordered-list-item-margin-block-end: 0.25em;
177
177
  --utrecht-number-data-positive-color: green;
178
178
  --utrecht-number-data-negative-color: red;
179
+ --utrecht-navigation-toggle-button-offset-start: 16px;
180
+ --utrecht-navigation-toggle-button-offset-end: 16px;
181
+ --utrecht-navigation-list-side-nav-inline-size: 100%;
182
+ --utrecht-navigation-list-mobile-inline-size: 100%;
183
+ --utrecht-navigation-link-mobile-transition-timing-function: ease-in-out;
184
+ --utrecht-navigation-link-mobile-transition-duration: 300ms;
185
+ --utrecht-navigation-link-mobile-min-block-size: 44px;
186
+ --utrecht-navigation-link-hover-decoration-thickness: 3px;
187
+ --utrecht-navigation-link-gap: 8px;
188
+ --utrecht-navigation-link-focus-text-decoration-thickness: 3px;
189
+ --utrecht-navigation-link-border-inline-end-width: 1px;
190
+ --utrecht-navigation-item-mobile-border-block-start-width: 1px;
191
+ --utrecht-navigation-item-mobile-border-block-end-width: 1px;
192
+ --utrecht-navigation-item-border-block-start-width: 0;
193
+ --utrecht-navigation-item-border-block-start-color: transparent;
194
+ --utrecht-navigation-item-border-block-end-width: 0;
195
+ --utrecht-navigation-item-border-block-end-color: transparent;
196
+ --utrecht-navigation-drawer-mobile-min-inline-size: 50%;
197
+ --utrecht-navigation-drawer-min-inline-size: 100%;
198
+ --utrecht-navigation-drawer-backdrop-background-color: rgb(0 0 0 / 30%);
199
+ --utrecht-navigation-border-block-start-width: 0;
200
+ --utrecht-navigation-border-block-start-color: transparent;
201
+ --utrecht-navigation-border-block-end-width: 0;
202
+ --utrecht-navigation-border-block-end-color: transparent;
179
203
  --utrecht-mapcontrolbutton-margin-inline-start: 0;
180
204
  --utrecht-mapcontrolbutton-margin-inline-end: 0;
181
205
  --utrecht-mapcontrolbutton-focus-text-decoration: none;
@@ -552,6 +576,34 @@
552
576
  --utrecht-page-background-color: var(--utrecht-color-white);
553
577
  --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
554
578
  --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /* Default block padding for badge components */
579
+ --utrecht-navigation-marker-color: var(--utrecht-color-grey-80);
580
+ --utrecht-navigation-list-mobile-padding-inline-start: var(--utrecht-space-inline-md);
581
+ --utrecht-navigation-list-mobile-padding-inline-end: var(--utrecht-space-inline-md);
582
+ --utrecht-navigation-list-mobile-padding-block-end: var(--utrecht-space-block-xs);
583
+ --utrecht-navigation-list-mobile-background-color: var(--utrecht-color-white);
584
+ --utrecht-navigation-link-padding-block-start: var(--utrecht-space-block-md);
585
+ --utrecht-navigation-link-padding-block-end: var(--utrecht-space-block-md);
586
+ --utrecht-navigation-link-mobile-padding-inline-start: var(--utrecht-space-inline-md);
587
+ --utrecht-navigation-link-mobile-padding-block-start: var(--utrecht-space-block-xs);
588
+ --utrecht-navigation-link-mobile-padding-block-end: var(--utrecht-space-block-xs);
589
+ --utrecht-navigation-link-mobile-hover-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
590
+ --utrecht-navigation-link-mobile-hover-color: var(--utrecht-color-blue-35);
591
+ --utrecht-navigation-link-mobile-hover-background-color: var(--utrecht-color-white);
592
+ --utrecht-navigation-link-mobile-color: var(--utrecht-color-blue-35);
593
+ --utrecht-navigation-link-mobile-background-color: var(--utrecht-color-white);
594
+ --utrecht-navigation-link-is-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
595
+ --utrecht-navigation-link-hover-color: var(--utrecht-color-white);
596
+ --utrecht-navigation-link-hover-background-color: var(--utrecht-color-black);
597
+ --utrecht-navigation-link-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
598
+ --utrecht-navigation-link-focus-color: var(--utrecht-color-black);
599
+ --utrecht-navigation-link-focus-background-color: var(--utrecht-color-yellow-80);
600
+ --utrecht-navigation-link-color: var(--utrecht-color-white);
601
+ --utrecht-navigation-link-border-color: var(--utrecht-color-grey-40);
602
+ --utrecht-navigation-link-background-color: var(--utrecht-color-grey-15);
603
+ --utrecht-navigation-link-active-focus-color: var(--utrecht-color-black);
604
+ --utrecht-navigation-link-active-color: var(--utrecht-color-white);
605
+ --utrecht-navigation-item-mobile-border-block-start-color: var(--utrecht-color-grey-80);
606
+ --utrecht-navigation-item-mobile-border-block-end-color: var(--utrecht-color-grey-80);
555
607
  --utrecht-nav-bar-link-padding-inline-start: var(--utrecht-space-inline-md);
556
608
  --utrecht-nav-bar-link-padding-inline-end: var(--utrecht-space-inline-md);
557
609
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
@@ -614,6 +666,7 @@
614
666
  --utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
615
667
  --utrecht-index-char-nav-link-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
616
668
  --utrecht-index-char-nav-gap: var(--utrecht-space-column-sm);
669
+ --utrecht-icon-custom-margin-inline-end: var(--utrecht-space-inline-xs);
617
670
  --utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
618
671
  --utrecht-form-toggle-track-disabled-background-color: var(--utrecht-color-grey-90);
619
672
  --utrecht-form-toggle-track-border-radius: var(--utrecht-form-toggle-border-radius);
package/dist/theme-prince-xml.css CHANGED
@@ -193,6 +193,30 @@
193
193
  --utrecht-ordered-list-margin-block-start: 0;
194
194
  --utrecht-number-data-negative-color: red;
195
195
  --utrecht-number-data-positive-color: green;
196
+ --utrecht-navigation-toggle-button-offset-start: 16px;
197
+ --utrecht-navigation-toggle-button-offset-end: 16px;
198
+ --utrecht-navigation-list-side-nav-inline-size: 100%;
199
+ --utrecht-navigation-list-mobile-inline-size: 100%;
200
+ --utrecht-navigation-link-mobile-transition-timing-function: ease-in-out;
201
+ --utrecht-navigation-link-mobile-transition-duration: 300ms;
202
+ --utrecht-navigation-link-mobile-min-block-size: 44px;
203
+ --utrecht-navigation-link-hover-decoration-thickness: 3px;
204
+ --utrecht-navigation-link-gap: 8px;
205
+ --utrecht-navigation-link-focus-text-decoration-thickness: 3px;
206
+ --utrecht-navigation-link-border-inline-end-width: 1px;
207
+ --utrecht-navigation-item-mobile-border-block-start-width: 1px;
208
+ --utrecht-navigation-item-mobile-border-block-end-width: 1px;
209
+ --utrecht-navigation-item-border-block-start-width: 0;
210
+ --utrecht-navigation-item-border-block-start-color: transparent;
211
+ --utrecht-navigation-item-border-block-end-width: 0;
212
+ --utrecht-navigation-item-border-block-end-color: transparent;
213
+ --utrecht-navigation-drawer-min-inline-size: 100%;
214
+ --utrecht-navigation-drawer-backdrop-background-color: rgb(0 0 0 / 30%);
215
+ --utrecht-navigation-drawer-mobile-min-inline-size: 50%;
216
+ --utrecht-navigation-border-block-start-width: 0;
217
+ --utrecht-navigation-border-block-start-color: transparent;
218
+ --utrecht-navigation-border-block-end-width: 0;
219
+ --utrecht-navigation-border-block-end-color: transparent;
196
220
  --utrecht-topnav-link-focus-text-decoration: none;
197
221
  --utrecht-topnav-link-focus-border-type: dotted;
198
222
  --utrecht-mapcontrolbutton-margin-inline-start: 0;
@@ -623,6 +647,34 @@
623
647
  --utrecht-page-body-content-background-color: var(--utrecht-color-white);
624
648
  --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
625
649
  --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /* Default block padding for badge components */
650
+ --utrecht-navigation-marker-color: var(--utrecht-color-grey-80);
651
+ --utrecht-navigation-list-mobile-padding-inline-start: var(--utrecht-space-inline-md);
652
+ --utrecht-navigation-list-mobile-padding-inline-end: var(--utrecht-space-inline-md);
653
+ --utrecht-navigation-list-mobile-padding-block-end: var(--utrecht-space-block-xs);
654
+ --utrecht-navigation-list-mobile-background-color: var(--utrecht-color-white);
655
+ --utrecht-navigation-link-padding-block-start: var(--utrecht-space-block-md);
656
+ --utrecht-navigation-link-padding-block-end: var(--utrecht-space-block-md);
657
+ --utrecht-navigation-link-mobile-padding-inline-start: var(--utrecht-space-inline-md);
658
+ --utrecht-navigation-link-mobile-padding-block-start: var(--utrecht-space-block-xs);
659
+ --utrecht-navigation-link-mobile-padding-block-end: var(--utrecht-space-block-xs);
660
+ --utrecht-navigation-link-mobile-hover-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
661
+ --utrecht-navigation-link-mobile-hover-color: var(--utrecht-color-blue-35);
662
+ --utrecht-navigation-link-mobile-hover-background-color: var(--utrecht-color-white);
663
+ --utrecht-navigation-link-mobile-color: var(--utrecht-color-blue-35);
664
+ --utrecht-navigation-link-mobile-background-color: var(--utrecht-color-white);
665
+ --utrecht-navigation-link-is-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
666
+ --utrecht-navigation-link-hover-color: var(--utrecht-color-white);
667
+ --utrecht-navigation-link-hover-background-color: var(--utrecht-color-black);
668
+ --utrecht-navigation-link-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
669
+ --utrecht-navigation-link-focus-background-color: var(--utrecht-color-yellow-80);
670
+ --utrecht-navigation-link-focus-color: var(--utrecht-color-black);
671
+ --utrecht-navigation-link-color: var(--utrecht-color-white);
672
+ --utrecht-navigation-link-border-color: var(--utrecht-color-grey-40);
673
+ --utrecht-navigation-link-background-color: var(--utrecht-color-grey-15);
674
+ --utrecht-navigation-link-active-focus-color: var(--utrecht-color-black);
675
+ --utrecht-navigation-link-active-color: var(--utrecht-color-white);
676
+ --utrecht-navigation-item-mobile-border-block-start-color: var(--utrecht-color-grey-80);
677
+ --utrecht-navigation-item-mobile-border-block-end-color: var(--utrecht-color-grey-80);
626
678
  --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
627
679
  --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
628
680
  --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
@@ -701,6 +753,7 @@
701
753
  --utrecht-index-char-nav-gap: var(--utrecht-space-column-sm);
702
754
  --utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
703
755
  --utrecht-index-char-nav-margin-block-start: var(--utrecht-space-block-lg);
756
+ --utrecht-icon-custom-margin-inline-end: var(--utrecht-space-inline-xs);
704
757
  --utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
705
758
  --utrecht-form-toggle-focus-border-color: var(--utrecht-color-black);
706
759
  --utrecht-form-toggle-checked-accent-color: var(--utrecht-color-blue-35);
package/dist/theme.css CHANGED
@@ -176,6 +176,30 @@
176
176
  --utrecht-ordered-list-item-margin-block-end: 0.25em;
177
177
  --utrecht-number-data-positive-color: green;
178
178
  --utrecht-number-data-negative-color: red;
179
+ --utrecht-navigation-toggle-button-offset-start: 16px;
180
+ --utrecht-navigation-toggle-button-offset-end: 16px;
181
+ --utrecht-navigation-list-side-nav-inline-size: 100%;
182
+ --utrecht-navigation-list-mobile-inline-size: 100%;
183
+ --utrecht-navigation-link-mobile-transition-timing-function: ease-in-out;
184
+ --utrecht-navigation-link-mobile-transition-duration: 300ms;
185
+ --utrecht-navigation-link-mobile-min-block-size: 44px;
186
+ --utrecht-navigation-link-hover-decoration-thickness: 3px;
187
+ --utrecht-navigation-link-gap: 8px;
188
+ --utrecht-navigation-link-focus-text-decoration-thickness: 3px;
189
+ --utrecht-navigation-link-border-inline-end-width: 1px;
190
+ --utrecht-navigation-item-mobile-border-block-start-width: 1px;
191
+ --utrecht-navigation-item-mobile-border-block-end-width: 1px;
192
+ --utrecht-navigation-item-border-block-start-width: 0;
193
+ --utrecht-navigation-item-border-block-start-color: transparent;
194
+ --utrecht-navigation-item-border-block-end-width: 0;
195
+ --utrecht-navigation-item-border-block-end-color: transparent;
196
+ --utrecht-navigation-drawer-mobile-min-inline-size: 50%;
197
+ --utrecht-navigation-drawer-min-inline-size: 100%;
198
+ --utrecht-navigation-drawer-backdrop-background-color: rgb(0 0 0 / 30%);
199
+ --utrecht-navigation-border-block-start-width: 0;
200
+ --utrecht-navigation-border-block-start-color: transparent;
201
+ --utrecht-navigation-border-block-end-width: 0;
202
+ --utrecht-navigation-border-block-end-color: transparent;
179
203
  --utrecht-mapcontrolbutton-margin-inline-start: 0;
180
204
  --utrecht-mapcontrolbutton-margin-inline-end: 0;
181
205
  --utrecht-mapcontrolbutton-focus-text-decoration: none;
@@ -552,6 +576,34 @@
552
576
  --utrecht-page-background-color: var(--utrecht-color-white);
553
577
  --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
554
578
  --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /* Default block padding for badge components */
579
+ --utrecht-navigation-marker-color: var(--utrecht-color-grey-80);
580
+ --utrecht-navigation-list-mobile-padding-inline-start: var(--utrecht-space-inline-md);
581
+ --utrecht-navigation-list-mobile-padding-inline-end: var(--utrecht-space-inline-md);
582
+ --utrecht-navigation-list-mobile-padding-block-end: var(--utrecht-space-block-xs);
583
+ --utrecht-navigation-list-mobile-background-color: var(--utrecht-color-white);
584
+ --utrecht-navigation-link-padding-block-start: var(--utrecht-space-block-md);
585
+ --utrecht-navigation-link-padding-block-end: var(--utrecht-space-block-md);
586
+ --utrecht-navigation-link-mobile-padding-inline-start: var(--utrecht-space-inline-md);
587
+ --utrecht-navigation-link-mobile-padding-block-start: var(--utrecht-space-block-xs);
588
+ --utrecht-navigation-link-mobile-padding-block-end: var(--utrecht-space-block-xs);
589
+ --utrecht-navigation-link-mobile-hover-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
590
+ --utrecht-navigation-link-mobile-hover-color: var(--utrecht-color-blue-35);
591
+ --utrecht-navigation-link-mobile-hover-background-color: var(--utrecht-color-white);
592
+ --utrecht-navigation-link-mobile-color: var(--utrecht-color-blue-35);
593
+ --utrecht-navigation-link-mobile-background-color: var(--utrecht-color-white);
594
+ --utrecht-navigation-link-is-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
595
+ --utrecht-navigation-link-hover-color: var(--utrecht-color-white);
596
+ --utrecht-navigation-link-hover-background-color: var(--utrecht-color-black);
597
+ --utrecht-navigation-link-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
598
+ --utrecht-navigation-link-focus-color: var(--utrecht-color-black);
599
+ --utrecht-navigation-link-focus-background-color: var(--utrecht-color-yellow-80);
600
+ --utrecht-navigation-link-color: var(--utrecht-color-white);
601
+ --utrecht-navigation-link-border-color: var(--utrecht-color-grey-40);
602
+ --utrecht-navigation-link-background-color: var(--utrecht-color-grey-15);
603
+ --utrecht-navigation-link-active-focus-color: var(--utrecht-color-black);
604
+ --utrecht-navigation-link-active-color: var(--utrecht-color-white);
605
+ --utrecht-navigation-item-mobile-border-block-start-color: var(--utrecht-color-grey-80);
606
+ --utrecht-navigation-item-mobile-border-block-end-color: var(--utrecht-color-grey-80);
555
607
  --utrecht-nav-bar-link-padding-inline-start: var(--utrecht-space-inline-md);
556
608
  --utrecht-nav-bar-link-padding-inline-end: var(--utrecht-space-inline-md);
557
609
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
@@ -614,6 +666,7 @@
614
666
  --utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
615
667
  --utrecht-index-char-nav-link-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
616
668
  --utrecht-index-char-nav-gap: var(--utrecht-space-column-sm);
669
+ --utrecht-icon-custom-margin-inline-end: var(--utrecht-space-inline-xs);
617
670
  --utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
618
671
  --utrecht-form-toggle-track-disabled-background-color: var(--utrecht-color-grey-90);
619
672
  --utrecht-form-toggle-track-border-radius: var(--utrecht-form-toggle-border-radius);