@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/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; }
@@ -712,6 +762,14 @@
712
762
  @property --utrecht-textarea-border-bottom-width { syntax: '<length>'; inherits: true; }
713
763
  @property --utrecht-textarea-line-height { syntax: '<length>'; inherits: true; }
714
764
  @property --utrecht-textbox-border-bottom-width { syntax: '<length>'; inherits: true; }
765
+ @property --utrecht-tooltip-background-color { syntax: '<color>'; inherits: true; }
766
+ @property --utrecht-tooltip-border-color { syntax: '<color>'; inherits: true; }
767
+ @property --utrecht-tooltip-border-radius { syntax: '<length-percentage>'; inherits: true; }
768
+ @property --utrecht-tooltip-border-width { syntax: '<length>'; inherits: true; }
769
+ @property --utrecht-tooltip-color { syntax: '<color>'; inherits: true; }
770
+ @property --utrecht-tooltip-font-size { syntax: '<length>'; inherits: true; }
771
+ @property --utrecht-tooltip-padding-block { syntax: '<length>'; inherits: true; }
772
+ @property --utrecht-tooltip-padding-inline { syntax: '<length>'; inherits: true; }
715
773
  @property --utrecht-toptask-link-background-color { syntax: '<color>'; inherits: true; }
716
774
  @property --utrecht-toptask-link-color { syntax: '<color>'; inherits: true; }
717
775
  @property --utrecht-toptask-link-font-size { syntax: '<length>'; inherits: true; }
package/dist/dark/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;
@@ -426,6 +452,13 @@
426
452
  --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
427
453
  --utrecht-topnav-link-color: var(--utrecht-color-white);
428
454
  --utrecht-topnav-link-background-color: var(--utrecht-color-blue-40);
455
+ --utrecht-tooltip-padding-inline: var(--utrecht-space-inline-md);
456
+ --utrecht-tooltip-padding-block: var(--utrecht-space-block-xs);
457
+ --utrecht-tooltip-font-size: var(--utrecht-typography-scale-md-font-size);
458
+ --utrecht-tooltip-font-family: var(--utrecht-typography-sans-serif-font-family);
459
+ --utrecht-tooltip-color: var(--utrecht-color-grey-40);
460
+ --utrecht-tooltip-border-color: var(--utrecht-color-grey-40);
461
+ --utrecht-tooltip-background-color: var(--utrecht-color-white);
429
462
  --utrecht-textarea-line-height: var(--utrecht-typography-line-height-md);
430
463
  --utrecht-table-row-border-block-end-width: var(--utrecht-border-width-sm);
431
464
  --utrecht-table-row-border-block-end-color: var(--utrecht-color-grey-90);
@@ -547,6 +580,34 @@
547
580
  --utrecht-page-background-color: var(--utrecht-color-grey-15);
548
581
  --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
549
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);
550
611
  --utrecht-nav-bar-link-padding-inline-start: var(--utrecht-space-inline-md);
551
612
  --utrecht-nav-bar-link-padding-inline-end: var(--utrecht-space-inline-md);
552
613
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
@@ -609,6 +670,7 @@
609
670
  --utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
610
671
  --utrecht-index-char-nav-link-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
611
672
  --utrecht-index-char-nav-gap: var(--utrecht-space-column-sm);
673
+ --utrecht-icon-custom-margin-inline-end: var(--utrecht-space-inline-xs);
612
674
  --utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
613
675
  --utrecht-form-toggle-track-disabled-background-color: var(--utrecht-color-grey-90);
614
676
  --utrecht-form-toggle-thumb-disabled-background-color: var(--utrecht-color-white);
package/dist/dark/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;
@@ -506,6 +532,13 @@
506
532
  --utrecht-toptask-link-padding-block-start: var(--utrecht-space-block-xl);
507
533
  --utrecht-toptask-link-padding-block-end: var(--utrecht-space-block-xl);
508
534
  --utrecht-toptask-link-font-size: var(--utrecht-typography-scale-md-font-size);
535
+ --utrecht-tooltip-padding-inline: var(--utrecht-space-inline-md);
536
+ --utrecht-tooltip-padding-block: var(--utrecht-space-block-xs);
537
+ --utrecht-tooltip-font-size: var(--utrecht-typography-scale-md-font-size);
538
+ --utrecht-tooltip-font-family: var(--utrecht-typography-sans-serif-font-family);
539
+ --utrecht-tooltip-color: var(--utrecht-color-grey-40);
540
+ --utrecht-tooltip-border-color: var(--utrecht-color-grey-40);
541
+ --utrecht-tooltip-background-color: var(--utrecht-color-white);
509
542
  --utrecht-textarea-line-height: var(--utrecht-typography-line-height-md);
510
543
  --utrecht-table-row-alternate-even-color: var(--utrecht-color-black);
511
544
  --utrecht-table-row-alternate-even-background-color: var(--utrecht-color-grey-95);
@@ -618,6 +651,34 @@
618
651
  --utrecht-page-body-content-background-color: var(--utrecht-color-white);
619
652
  --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
620
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);
621
682
  --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
622
683
  --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
623
684
  --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
@@ -696,6 +757,7 @@
696
757
  --utrecht-index-char-nav-gap: var(--utrecht-space-column-sm);
697
758
  --utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
698
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);
699
761
  --utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
700
762
  --utrecht-form-toggle-focus-border-color: var(--utrecht-color-black);
701
763
  --utrecht-form-toggle-checked-accent-color: var(--utrecht-color-blue-35);
package/dist/dark/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;
@@ -426,6 +452,13 @@
426
452
  --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
427
453
  --utrecht-topnav-link-color: var(--utrecht-color-white);
428
454
  --utrecht-topnav-link-background-color: var(--utrecht-color-blue-40);
455
+ --utrecht-tooltip-padding-inline: var(--utrecht-space-inline-md);
456
+ --utrecht-tooltip-padding-block: var(--utrecht-space-block-xs);
457
+ --utrecht-tooltip-font-size: var(--utrecht-typography-scale-md-font-size);
458
+ --utrecht-tooltip-font-family: var(--utrecht-typography-sans-serif-font-family);
459
+ --utrecht-tooltip-color: var(--utrecht-color-grey-40);
460
+ --utrecht-tooltip-border-color: var(--utrecht-color-grey-40);
461
+ --utrecht-tooltip-background-color: var(--utrecht-color-white);
429
462
  --utrecht-textarea-line-height: var(--utrecht-typography-line-height-md);
430
463
  --utrecht-table-row-border-block-end-width: var(--utrecht-border-width-sm);
431
464
  --utrecht-table-row-border-block-end-color: var(--utrecht-color-grey-90);
@@ -547,6 +580,34 @@
547
580
  --utrecht-page-background-color: var(--utrecht-color-grey-15);
548
581
  --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
549
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);
550
611
  --utrecht-nav-bar-link-padding-inline-start: var(--utrecht-space-inline-md);
551
612
  --utrecht-nav-bar-link-padding-inline-end: var(--utrecht-space-inline-md);
552
613
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
@@ -609,6 +670,7 @@
609
670
  --utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
610
671
  --utrecht-index-char-nav-link-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
611
672
  --utrecht-index-char-nav-gap: var(--utrecht-space-column-sm);
673
+ --utrecht-icon-custom-margin-inline-end: var(--utrecht-space-inline-xs);
612
674
  --utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
613
675
  --utrecht-form-toggle-track-disabled-background-color: var(--utrecht-color-grey-90);
614
676
  --utrecht-form-toggle-thumb-disabled-background-color: var(--utrecht-color-white);