@utrecht/design-tokens 3.2.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 (54) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/_mixin-theme.scss +62 -0
  3. package/dist/_mixin.scss +62 -0
  4. package/dist/_variables.scss +62 -0
  5. package/dist/dark/_mixin-theme.scss +62 -0
  6. package/dist/dark/_mixin.scss +62 -0
  7. package/dist/dark/_variables.scss +62 -0
  8. package/dist/dark/index.cjs +63 -1
  9. package/dist/dark/index.css +62 -0
  10. package/dist/dark/index.d.ts +63 -1
  11. package/dist/dark/index.flat.json +62 -0
  12. package/dist/dark/index.json +5634 -3521
  13. package/dist/dark/index.mjs +63 -1
  14. package/dist/dark/index.tokens.json +558 -10
  15. package/dist/dark/list.json +5634 -3521
  16. package/dist/dark/list.mjs +5634 -3521
  17. package/dist/dark/property.css +58 -0
  18. package/dist/dark/root.css +62 -0
  19. package/dist/dark/theme-prince-xml.css +62 -0
  20. package/dist/dark/theme.css +62 -0
  21. package/dist/dark/tokens.cjs +2623 -24
  22. package/dist/dark/tokens.d.ts +324 -3
  23. package/dist/dark/tokens.json +2623 -24
  24. package/dist/dark/variables.cjs +63 -1
  25. package/dist/dark/variables.css +62 -0
  26. package/dist/dark/variables.d.ts +63 -1
  27. package/dist/dark/variables.json +62 -0
  28. package/dist/dark/variables.less +62 -0
  29. package/dist/dark/variables.mjs +63 -1
  30. package/dist/index.cjs +63 -1
  31. package/dist/index.css +124 -0
  32. package/dist/index.d.ts +63 -1
  33. package/dist/index.flat.json +62 -0
  34. package/dist/index.json +5650 -3537
  35. package/dist/index.mjs +63 -1
  36. package/dist/index.tokens.json +558 -10
  37. package/dist/list.json +5650 -3537
  38. package/dist/list.mjs +5650 -3537
  39. package/dist/property.css +58 -0
  40. package/dist/root.css +62 -0
  41. package/dist/theme-prince-xml.css +62 -0
  42. package/dist/theme.css +62 -0
  43. package/dist/tokens.cjs +2623 -24
  44. package/dist/tokens.d.ts +324 -3
  45. package/dist/tokens.json +2623 -24
  46. package/dist/variables.cjs +63 -1
  47. package/dist/variables.css +62 -0
  48. package/dist/variables.d.ts +63 -1
  49. package/dist/variables.json +62 -0
  50. package/dist/variables.less +62 -0
  51. package/dist/variables.mjs +63 -1
  52. package/package.json +1 -1
  53. package/src/component/utrecht/navigation.tokens.json +229 -0
  54. package/src/component/utrecht/tooltip.tokens.json +15 -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; }
@@ -777,6 +827,14 @@
777
827
  @property --utrecht-textarea-border-bottom-width { syntax: '<length>'; inherits: true; }
778
828
  @property --utrecht-textarea-line-height { syntax: '<length>'; inherits: true; }
779
829
  @property --utrecht-textbox-border-bottom-width { syntax: '<length>'; inherits: true; }
830
+ @property --utrecht-tooltip-background-color { syntax: '<color>'; inherits: true; }
831
+ @property --utrecht-tooltip-border-color { syntax: '<color>'; inherits: true; }
832
+ @property --utrecht-tooltip-border-radius { syntax: '<length-percentage>'; inherits: true; }
833
+ @property --utrecht-tooltip-border-width { syntax: '<length>'; inherits: true; }
834
+ @property --utrecht-tooltip-color { syntax: '<color>'; inherits: true; }
835
+ @property --utrecht-tooltip-font-size { syntax: '<length>'; inherits: true; }
836
+ @property --utrecht-tooltip-padding-block { syntax: '<length>'; inherits: true; }
837
+ @property --utrecht-tooltip-padding-inline { syntax: '<length>'; inherits: true; }
780
838
  @property --utrecht-toptask-link-background-color { syntax: '<color>'; inherits: true; }
781
839
  @property --utrecht-toptask-link-color { syntax: '<color>'; inherits: true; }
782
840
  @property --utrecht-toptask-link-font-size { syntax: '<length>'; inherits: true; }
package/dist/root.css CHANGED
@@ -30,6 +30,8 @@
30
30
  --utrecht-toptask-link-hover-transform-scale: 1.02;
31
31
  --utrecht-topnav-link-focus-text-decoration: none;
32
32
  --utrecht-topnav-link-focus-border-type: dotted;
33
+ --utrecht-tooltip-border-width: 1px;
34
+ --utrecht-tooltip-border-radius: 0;
33
35
  --utrecht-textbox-border-bottom-width: 3px;
34
36
  --utrecht-textarea-border-bottom-width: 3px;
35
37
  --utrecht-textarea-border-block-end-width: 3px;
@@ -174,6 +176,30 @@
174
176
  --utrecht-ordered-list-item-margin-block-end: 0.25em;
175
177
  --utrecht-number-data-positive-color: green;
176
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;
177
203
  --utrecht-mapcontrolbutton-margin-inline-start: 0;
178
204
  --utrecht-mapcontrolbutton-margin-inline-end: 0;
179
205
  --utrecht-mapcontrolbutton-focus-text-decoration: none;
@@ -424,6 +450,13 @@
424
450
  --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
425
451
  --utrecht-topnav-link-color: var(--utrecht-color-white);
426
452
  --utrecht-topnav-link-background-color: var(--utrecht-color-blue-40);
453
+ --utrecht-tooltip-padding-inline: var(--utrecht-space-inline-md);
454
+ --utrecht-tooltip-padding-block: var(--utrecht-space-block-xs);
455
+ --utrecht-tooltip-font-size: var(--utrecht-typography-scale-md-font-size);
456
+ --utrecht-tooltip-font-family: var(--utrecht-typography-sans-serif-font-family);
457
+ --utrecht-tooltip-color: var(--utrecht-color-grey-40);
458
+ --utrecht-tooltip-border-color: var(--utrecht-color-grey-40);
459
+ --utrecht-tooltip-background-color: var(--utrecht-color-white);
427
460
  --utrecht-textarea-line-height: var(--utrecht-typography-line-height-md);
428
461
  --utrecht-table-row-border-block-end-width: var(--utrecht-border-width-sm);
429
462
  --utrecht-table-row-border-block-end-color: var(--utrecht-color-grey-90);
@@ -543,6 +576,34 @@
543
576
  --utrecht-page-background-color: var(--utrecht-color-white);
544
577
  --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
545
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);
546
607
  --utrecht-nav-bar-link-padding-inline-start: var(--utrecht-space-inline-md);
547
608
  --utrecht-nav-bar-link-padding-inline-end: var(--utrecht-space-inline-md);
548
609
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
@@ -605,6 +666,7 @@
605
666
  --utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
606
667
  --utrecht-index-char-nav-link-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
607
668
  --utrecht-index-char-nav-gap: var(--utrecht-space-column-sm);
669
+ --utrecht-icon-custom-margin-inline-end: var(--utrecht-space-inline-xs);
608
670
  --utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
609
671
  --utrecht-form-toggle-track-disabled-background-color: var(--utrecht-color-grey-90);
610
672
  --utrecht-form-toggle-track-border-radius: var(--utrecht-form-toggle-border-radius);
package/dist/theme-prince-xml.css CHANGED
@@ -103,6 +103,8 @@
103
103
  --utrecht-toptask-link-min-inline-size: 15rem;
104
104
  --utrecht-toptask-link-min-block-size: 8.25rem;
105
105
  --utrecht-toptask-link-line-height: 1.2;
106
+ --utrecht-tooltip-border-width: 1px;
107
+ --utrecht-tooltip-border-radius: 0;
106
108
  --utrecht-textbox-border-bottom-width: 3px;
107
109
  --utrecht-textarea-border-bottom-width: 3px;
108
110
  --utrecht-textarea-border-block-end-width: 3px;
@@ -191,6 +193,30 @@
191
193
  --utrecht-ordered-list-margin-block-start: 0;
192
194
  --utrecht-number-data-negative-color: red;
193
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;
194
220
  --utrecht-topnav-link-focus-text-decoration: none;
195
221
  --utrecht-topnav-link-focus-border-type: dotted;
196
222
  --utrecht-mapcontrolbutton-margin-inline-start: 0;
@@ -504,6 +530,13 @@
504
530
  --utrecht-toptask-link-padding-block-start: var(--utrecht-space-block-xl);
505
531
  --utrecht-toptask-link-padding-block-end: var(--utrecht-space-block-xl);
506
532
  --utrecht-toptask-link-font-size: var(--utrecht-typography-scale-md-font-size);
533
+ --utrecht-tooltip-padding-inline: var(--utrecht-space-inline-md);
534
+ --utrecht-tooltip-padding-block: var(--utrecht-space-block-xs);
535
+ --utrecht-tooltip-font-size: var(--utrecht-typography-scale-md-font-size);
536
+ --utrecht-tooltip-font-family: var(--utrecht-typography-sans-serif-font-family);
537
+ --utrecht-tooltip-color: var(--utrecht-color-grey-40);
538
+ --utrecht-tooltip-border-color: var(--utrecht-color-grey-40);
539
+ --utrecht-tooltip-background-color: var(--utrecht-color-white);
507
540
  --utrecht-textarea-line-height: var(--utrecht-typography-line-height-md);
508
541
  --utrecht-table-row-alternate-even-color: var(--utrecht-color-black);
509
542
  --utrecht-table-row-alternate-even-background-color: var(--utrecht-color-grey-95);
@@ -614,6 +647,34 @@
614
647
  --utrecht-page-body-content-background-color: var(--utrecht-color-white);
615
648
  --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
616
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);
617
678
  --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
618
679
  --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
619
680
  --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
@@ -692,6 +753,7 @@
692
753
  --utrecht-index-char-nav-gap: var(--utrecht-space-column-sm);
693
754
  --utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
694
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);
695
757
  --utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
696
758
  --utrecht-form-toggle-focus-border-color: var(--utrecht-color-black);
697
759
  --utrecht-form-toggle-checked-accent-color: var(--utrecht-color-blue-35);
package/dist/theme.css CHANGED
@@ -30,6 +30,8 @@
30
30
  --utrecht-toptask-link-hover-transform-scale: 1.02;
31
31
  --utrecht-topnav-link-focus-text-decoration: none;
32
32
  --utrecht-topnav-link-focus-border-type: dotted;
33
+ --utrecht-tooltip-border-width: 1px;
34
+ --utrecht-tooltip-border-radius: 0;
33
35
  --utrecht-textbox-border-bottom-width: 3px;
34
36
  --utrecht-textarea-border-bottom-width: 3px;
35
37
  --utrecht-textarea-border-block-end-width: 3px;
@@ -174,6 +176,30 @@
174
176
  --utrecht-ordered-list-item-margin-block-end: 0.25em;
175
177
  --utrecht-number-data-positive-color: green;
176
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;
177
203
  --utrecht-mapcontrolbutton-margin-inline-start: 0;
178
204
  --utrecht-mapcontrolbutton-margin-inline-end: 0;
179
205
  --utrecht-mapcontrolbutton-focus-text-decoration: none;
@@ -424,6 +450,13 @@
424
450
  --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
425
451
  --utrecht-topnav-link-color: var(--utrecht-color-white);
426
452
  --utrecht-topnav-link-background-color: var(--utrecht-color-blue-40);
453
+ --utrecht-tooltip-padding-inline: var(--utrecht-space-inline-md);
454
+ --utrecht-tooltip-padding-block: var(--utrecht-space-block-xs);
455
+ --utrecht-tooltip-font-size: var(--utrecht-typography-scale-md-font-size);
456
+ --utrecht-tooltip-font-family: var(--utrecht-typography-sans-serif-font-family);
457
+ --utrecht-tooltip-color: var(--utrecht-color-grey-40);
458
+ --utrecht-tooltip-border-color: var(--utrecht-color-grey-40);
459
+ --utrecht-tooltip-background-color: var(--utrecht-color-white);
427
460
  --utrecht-textarea-line-height: var(--utrecht-typography-line-height-md);
428
461
  --utrecht-table-row-border-block-end-width: var(--utrecht-border-width-sm);
429
462
  --utrecht-table-row-border-block-end-color: var(--utrecht-color-grey-90);
@@ -543,6 +576,34 @@
543
576
  --utrecht-page-background-color: var(--utrecht-color-white);
544
577
  --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
545
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);
546
607
  --utrecht-nav-bar-link-padding-inline-start: var(--utrecht-space-inline-md);
547
608
  --utrecht-nav-bar-link-padding-inline-end: var(--utrecht-space-inline-md);
548
609
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
@@ -605,6 +666,7 @@
605
666
  --utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
606
667
  --utrecht-index-char-nav-link-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
607
668
  --utrecht-index-char-nav-gap: var(--utrecht-space-column-sm);
669
+ --utrecht-icon-custom-margin-inline-end: var(--utrecht-space-inline-xs);
608
670
  --utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
609
671
  --utrecht-form-toggle-track-disabled-background-color: var(--utrecht-color-grey-90);
610
672
  --utrecht-form-toggle-track-border-radius: var(--utrecht-form-toggle-border-radius);