@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/dark/property.css CHANGED
@@ -118,6 +118,7 @@
118
118
  @property --utrecht-breadcrumb-nav-link-focus-text-decoration { syntax: 'inherit | none | underline'; inherits: true; }
119
119
  @property --utrecht-breadcrumb-nav-link-hover-color { syntax: '<color>'; inherits: true; }
120
120
  @property --utrecht-breadcrumb-nav-link-hover-text-decoration { syntax: 'inherit | none | underline'; inherits: true; }
121
+ @property --utrecht-breadcrumb-nav-link-icon-size { syntax: '<length>'; inherits: true; }
121
122
  @property --utrecht-breadcrumb-nav-min-block-size { syntax: '<length>'; inherits: true; }
122
123
  @property --utrecht-breadcrumb-nav-separator-color { syntax: '<color>'; inherits: true; }
123
124
  @property --utrecht-breadcrumb-nav-separator-icon-size { syntax: '<length>'; inherits: true; }
@@ -386,6 +387,7 @@
386
387
  @property --utrecht-heading-6-line-height { syntax: '<length> | <number>'; inherits: true; }
387
388
  @property --utrecht-heading-font-weight { syntax: '<number>'; inherits: true; }
388
389
  @property --utrecht-icon-baseline-inset-block-start { syntax: '<length>'; inherits: true; }
390
+ @property --utrecht-icon-custom-margin-inline-end { syntax: '<length>'; inherits: true; }
389
391
  @property --utrecht-icon-size { syntax: '<length-percentage>'; inherits: true; }
390
392
  @property --utrecht-index-char-nav-gap { syntax: '<length>'; inherits: true; }
391
393
  @property --utrecht-index-char-nav-link-current-font-weight { syntax: '<number>'; inherits: true; }
@@ -460,6 +462,54 @@
460
462
  @property --utrecht-nav-bar-link-padding-block-start { syntax: '<length>'; inherits: true; }
461
463
  @property --utrecht-nav-bar-link-padding-inline-end { syntax: '<length>'; inherits: true; }
462
464
  @property --utrecht-nav-bar-link-padding-inline-start { syntax: '<length>'; inherits: true; }
465
+ @property --utrecht-navigation-border-block-end-color { syntax: '<color>'; inherits: true; }
466
+ @property --utrecht-navigation-border-block-end-width { syntax: '<length>'; inherits: true; }
467
+ @property --utrecht-navigation-border-block-start-color { syntax: '<color>'; inherits: true; }
468
+ @property --utrecht-navigation-border-block-start-width { syntax: '<length>'; inherits: true; }
469
+ @property --utrecht-navigation-drawer-mobile-min-inline-size { syntax: '<length>'; inherits: true; }
470
+ @property --utrecht-navigation-item-border-block-end-color { syntax: '<color>'; inherits: true; }
471
+ @property --utrecht-navigation-item-border-block-end-width { syntax: '<length>'; inherits: true; }
472
+ @property --utrecht-navigation-item-border-block-start-color { syntax: '<color>'; inherits: true; }
473
+ @property --utrecht-navigation-item-border-block-start-width { syntax: '<length>'; inherits: true; }
474
+ @property --utrecht-navigation-item-mobile-border-block-end-color { syntax: '<color>'; inherits: true; }
475
+ @property --utrecht-navigation-item-mobile-border-block-end-width { syntax: '<length>'; inherits: true; }
476
+ @property --utrecht-navigation-item-mobile-border-block-start-color { syntax: '<color>'; inherits: true; }
477
+ @property --utrecht-navigation-item-mobile-border-block-start-width { syntax: '<length>'; inherits: true; }
478
+ @property --utrecht-navigation-link-active-color { syntax: '<color>'; inherits: true; }
479
+ @property --utrecht-navigation-link-active-focus-color { syntax: '<color>'; inherits: true; }
480
+ @property --utrecht-navigation-link-background-color { syntax: '<color>'; inherits: true; }
481
+ @property --utrecht-navigation-link-border-color { syntax: '<color>'; inherits: true; }
482
+ @property --utrecht-navigation-link-border-inline-end-width { syntax: '<length>'; inherits: true; }
483
+ @property --utrecht-navigation-link-color { syntax: '<color>'; inherits: true; }
484
+ @property --utrecht-navigation-link-focus-color { syntax: '<color>'; inherits: true; }
485
+ @property --utrecht-navigation-link-focus-text-decoration-thickness { syntax: '<length>'; inherits: true; }
486
+ @property --utrecht-navigation-link-font-weight { syntax: '<number>'; inherits: true; }
487
+ @property --utrecht-navigation-link-gap { syntax: '<length>'; inherits: true; }
488
+ @property --utrecht-navigation-link-hover-background-color { syntax: '<color>'; inherits: true; }
489
+ @property --utrecht-navigation-link-hover-color { syntax: '<color>'; inherits: true; }
490
+ @property --utrecht-navigation-link-hover-decoration-thickness { syntax: '<length>'; inherits: true; }
491
+ @property --utrecht-navigation-link-is-current-font-weight { syntax: '<number>'; inherits: true; }
492
+ @property --utrecht-navigation-link-mobile-background-color { syntax: '<color>'; inherits: true; }
493
+ @property --utrecht-navigation-link-mobile-color { syntax: '<color>'; inherits: true; }
494
+ @property --utrecht-navigation-link-mobile-hover-background-color { syntax: '<color>'; inherits: true; }
495
+ @property --utrecht-navigation-link-mobile-hover-color { syntax: '<color>'; inherits: true; }
496
+ @property --utrecht-navigation-link-mobile-hover-font-weight { syntax: '<number>'; inherits: true; }
497
+ @property --utrecht-navigation-link-mobile-min-block-size { syntax: '<length>'; inherits: true; }
498
+ @property --utrecht-navigation-link-mobile-padding-block-end { syntax: '<length>'; inherits: true; }
499
+ @property --utrecht-navigation-link-mobile-padding-block-start { syntax: '<length>'; inherits: true; }
500
+ @property --utrecht-navigation-link-mobile-padding-inline-start { syntax: '<length>'; inherits: true; }
501
+ @property --utrecht-navigation-link-mobile-transition-duration { syntax: '<time>'; inherits: true; }
502
+ @property --utrecht-navigation-link-padding-block-end { syntax: '<length>'; inherits: true; }
503
+ @property --utrecht-navigation-link-padding-block-start { syntax: '<length>'; inherits: true; }
504
+ @property --utrecht-navigation-list-mobile-background-color { syntax: '<color>'; inherits: true; }
505
+ @property --utrecht-navigation-list-mobile-inline-size { syntax: '<length>'; inherits: true; }
506
+ @property --utrecht-navigation-list-mobile-padding-block-end { syntax: '<length>'; inherits: true; }
507
+ @property --utrecht-navigation-list-mobile-padding-inline-end { syntax: '<length>'; inherits: true; }
508
+ @property --utrecht-navigation-list-mobile-padding-inline-start { syntax: '<length>'; inherits: true; }
509
+ @property --utrecht-navigation-list-side-nav-inline-size { syntax: '<length>'; inherits: true; }
510
+ @property --utrecht-navigation-marker-color { syntax: '<color>'; inherits: true; }
511
+ @property --utrecht-navigation-toggle-button-offset-end { syntax: '<length>'; inherits: true; }
512
+ @property --utrecht-navigation-toggle-button-offset-start { syntax: '<length>'; inherits: true; }
463
513
  @property --utrecht-number-badge-background-color { syntax: '<color>'; inherits: true; }
464
514
  @property --utrecht-number-badge-border-radius { syntax: '<length-percentage>'; inherits: true; }
465
515
  @property --utrecht-number-badge-color { syntax: '<color>'; inherits: true; }
package/dist/dark/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;
@@ -556,6 +580,34 @@
556
580
  --utrecht-page-background-color: var(--utrecht-color-grey-15);
557
581
  --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
558
582
  --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /* Default block padding for badge components */
583
+ --utrecht-navigation-marker-color: var(--utrecht-color-grey-80);
584
+ --utrecht-navigation-list-mobile-padding-inline-start: var(--utrecht-space-inline-md);
585
+ --utrecht-navigation-list-mobile-padding-inline-end: var(--utrecht-space-inline-md);
586
+ --utrecht-navigation-list-mobile-padding-block-end: var(--utrecht-space-block-xs);
587
+ --utrecht-navigation-list-mobile-background-color: var(--utrecht-color-white);
588
+ --utrecht-navigation-link-padding-block-start: var(--utrecht-space-block-md);
589
+ --utrecht-navigation-link-padding-block-end: var(--utrecht-space-block-md);
590
+ --utrecht-navigation-link-mobile-padding-inline-start: var(--utrecht-space-inline-md);
591
+ --utrecht-navigation-link-mobile-padding-block-start: var(--utrecht-space-block-xs);
592
+ --utrecht-navigation-link-mobile-padding-block-end: var(--utrecht-space-block-xs);
593
+ --utrecht-navigation-link-mobile-hover-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
594
+ --utrecht-navigation-link-mobile-hover-color: var(--utrecht-color-blue-35);
595
+ --utrecht-navigation-link-mobile-hover-background-color: var(--utrecht-color-white);
596
+ --utrecht-navigation-link-mobile-color: var(--utrecht-color-blue-35);
597
+ --utrecht-navigation-link-mobile-background-color: var(--utrecht-color-white);
598
+ --utrecht-navigation-link-is-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
599
+ --utrecht-navigation-link-hover-color: var(--utrecht-color-white);
600
+ --utrecht-navigation-link-hover-background-color: var(--utrecht-color-black);
601
+ --utrecht-navigation-link-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
602
+ --utrecht-navigation-link-focus-color: var(--utrecht-color-black);
603
+ --utrecht-navigation-link-focus-background-color: var(--utrecht-color-yellow-80);
604
+ --utrecht-navigation-link-color: var(--utrecht-color-white);
605
+ --utrecht-navigation-link-border-color: var(--utrecht-color-grey-40);
606
+ --utrecht-navigation-link-background-color: var(--utrecht-color-grey-15);
607
+ --utrecht-navigation-link-active-focus-color: var(--utrecht-color-black);
608
+ --utrecht-navigation-link-active-color: var(--utrecht-color-white);
609
+ --utrecht-navigation-item-mobile-border-block-start-color: var(--utrecht-color-grey-80);
610
+ --utrecht-navigation-item-mobile-border-block-end-color: var(--utrecht-color-grey-80);
559
611
  --utrecht-nav-bar-link-padding-inline-start: var(--utrecht-space-inline-md);
560
612
  --utrecht-nav-bar-link-padding-inline-end: var(--utrecht-space-inline-md);
561
613
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
@@ -618,6 +670,7 @@
618
670
  --utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
619
671
  --utrecht-index-char-nav-link-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
620
672
  --utrecht-index-char-nav-gap: var(--utrecht-space-column-sm);
673
+ --utrecht-icon-custom-margin-inline-end: var(--utrecht-space-inline-xs);
621
674
  --utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
622
675
  --utrecht-form-toggle-track-disabled-background-color: var(--utrecht-color-grey-90);
623
676
  --utrecht-form-toggle-thumb-disabled-background-color: var(--utrecht-color-white);
package/dist/dark/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;
@@ -627,6 +651,34 @@
627
651
  --utrecht-page-body-content-background-color: var(--utrecht-color-white);
628
652
  --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
629
653
  --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /* Default block padding for badge components */
654
+ --utrecht-navigation-marker-color: var(--utrecht-color-grey-80);
655
+ --utrecht-navigation-list-mobile-padding-inline-start: var(--utrecht-space-inline-md);
656
+ --utrecht-navigation-list-mobile-padding-inline-end: var(--utrecht-space-inline-md);
657
+ --utrecht-navigation-list-mobile-padding-block-end: var(--utrecht-space-block-xs);
658
+ --utrecht-navigation-list-mobile-background-color: var(--utrecht-color-white);
659
+ --utrecht-navigation-link-padding-block-start: var(--utrecht-space-block-md);
660
+ --utrecht-navigation-link-padding-block-end: var(--utrecht-space-block-md);
661
+ --utrecht-navigation-link-mobile-padding-inline-start: var(--utrecht-space-inline-md);
662
+ --utrecht-navigation-link-mobile-padding-block-start: var(--utrecht-space-block-xs);
663
+ --utrecht-navigation-link-mobile-padding-block-end: var(--utrecht-space-block-xs);
664
+ --utrecht-navigation-link-mobile-hover-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
665
+ --utrecht-navigation-link-mobile-hover-color: var(--utrecht-color-blue-35);
666
+ --utrecht-navigation-link-mobile-hover-background-color: var(--utrecht-color-white);
667
+ --utrecht-navigation-link-mobile-color: var(--utrecht-color-blue-35);
668
+ --utrecht-navigation-link-mobile-background-color: var(--utrecht-color-white);
669
+ --utrecht-navigation-link-is-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
670
+ --utrecht-navigation-link-hover-color: var(--utrecht-color-white);
671
+ --utrecht-navigation-link-hover-background-color: var(--utrecht-color-black);
672
+ --utrecht-navigation-link-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
673
+ --utrecht-navigation-link-focus-background-color: var(--utrecht-color-yellow-80);
674
+ --utrecht-navigation-link-focus-color: var(--utrecht-color-black);
675
+ --utrecht-navigation-link-color: var(--utrecht-color-white);
676
+ --utrecht-navigation-link-border-color: var(--utrecht-color-grey-40);
677
+ --utrecht-navigation-link-background-color: var(--utrecht-color-grey-15);
678
+ --utrecht-navigation-link-active-focus-color: var(--utrecht-color-black);
679
+ --utrecht-navigation-link-active-color: var(--utrecht-color-white);
680
+ --utrecht-navigation-item-mobile-border-block-start-color: var(--utrecht-color-grey-80);
681
+ --utrecht-navigation-item-mobile-border-block-end-color: var(--utrecht-color-grey-80);
630
682
  --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
631
683
  --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
632
684
  --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
@@ -705,6 +757,7 @@
705
757
  --utrecht-index-char-nav-gap: var(--utrecht-space-column-sm);
706
758
  --utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
707
759
  --utrecht-index-char-nav-margin-block-start: var(--utrecht-space-block-lg);
760
+ --utrecht-icon-custom-margin-inline-end: var(--utrecht-space-inline-xs);
708
761
  --utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
709
762
  --utrecht-form-toggle-focus-border-color: var(--utrecht-color-black);
710
763
  --utrecht-form-toggle-checked-accent-color: var(--utrecht-color-blue-35);
package/dist/dark/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;
@@ -556,6 +580,34 @@
556
580
  --utrecht-page-background-color: var(--utrecht-color-grey-15);
557
581
  --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
558
582
  --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /* Default block padding for badge components */
583
+ --utrecht-navigation-marker-color: var(--utrecht-color-grey-80);
584
+ --utrecht-navigation-list-mobile-padding-inline-start: var(--utrecht-space-inline-md);
585
+ --utrecht-navigation-list-mobile-padding-inline-end: var(--utrecht-space-inline-md);
586
+ --utrecht-navigation-list-mobile-padding-block-end: var(--utrecht-space-block-xs);
587
+ --utrecht-navigation-list-mobile-background-color: var(--utrecht-color-white);
588
+ --utrecht-navigation-link-padding-block-start: var(--utrecht-space-block-md);
589
+ --utrecht-navigation-link-padding-block-end: var(--utrecht-space-block-md);
590
+ --utrecht-navigation-link-mobile-padding-inline-start: var(--utrecht-space-inline-md);
591
+ --utrecht-navigation-link-mobile-padding-block-start: var(--utrecht-space-block-xs);
592
+ --utrecht-navigation-link-mobile-padding-block-end: var(--utrecht-space-block-xs);
593
+ --utrecht-navigation-link-mobile-hover-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
594
+ --utrecht-navigation-link-mobile-hover-color: var(--utrecht-color-blue-35);
595
+ --utrecht-navigation-link-mobile-hover-background-color: var(--utrecht-color-white);
596
+ --utrecht-navigation-link-mobile-color: var(--utrecht-color-blue-35);
597
+ --utrecht-navigation-link-mobile-background-color: var(--utrecht-color-white);
598
+ --utrecht-navigation-link-is-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
599
+ --utrecht-navigation-link-hover-color: var(--utrecht-color-white);
600
+ --utrecht-navigation-link-hover-background-color: var(--utrecht-color-black);
601
+ --utrecht-navigation-link-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
602
+ --utrecht-navigation-link-focus-color: var(--utrecht-color-black);
603
+ --utrecht-navigation-link-focus-background-color: var(--utrecht-color-yellow-80);
604
+ --utrecht-navigation-link-color: var(--utrecht-color-white);
605
+ --utrecht-navigation-link-border-color: var(--utrecht-color-grey-40);
606
+ --utrecht-navigation-link-background-color: var(--utrecht-color-grey-15);
607
+ --utrecht-navigation-link-active-focus-color: var(--utrecht-color-black);
608
+ --utrecht-navigation-link-active-color: var(--utrecht-color-white);
609
+ --utrecht-navigation-item-mobile-border-block-start-color: var(--utrecht-color-grey-80);
610
+ --utrecht-navigation-item-mobile-border-block-end-color: var(--utrecht-color-grey-80);
559
611
  --utrecht-nav-bar-link-padding-inline-start: var(--utrecht-space-inline-md);
560
612
  --utrecht-nav-bar-link-padding-inline-end: var(--utrecht-space-inline-md);
561
613
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
@@ -618,6 +670,7 @@
618
670
  --utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
619
671
  --utrecht-index-char-nav-link-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
620
672
  --utrecht-index-char-nav-gap: var(--utrecht-space-column-sm);
673
+ --utrecht-icon-custom-margin-inline-end: var(--utrecht-space-inline-xs);
621
674
  --utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
622
675
  --utrecht-form-toggle-track-disabled-background-color: var(--utrecht-color-grey-90);
623
676
  --utrecht-form-toggle-thumb-disabled-background-color: var(--utrecht-color-white);