@utrecht/design-tokens 6.0.0 → 6.1.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @utrecht/design-tokens
 
+## 6.1.1
+
+### Patch Changes
+
+- 57dee78: Specify background color for Navigation Bar to support sticky positioning.
+
+## 6.1.0
+
+### Minor Changes
+
+- ef2fc90: Added ability to change markers of nested unordered lists. Refactored spacing on unordered lists (including nested).
+
 ## 6.0.0
 
 ### Major Changes

package/dist/_mixin-theme.scss

@@ -349,8 +349,18 @@
   --utrecht-toptask-link-hover-transform-scale: 1.02;
   --utrecht-toptask-link-icon-size: 2.25rem;
   --utrecht-unordered-list-margin-block-end: 0;
-  --utrecht-unordered-list-item-margin-block-start: 0.25rem;
-  --utrecht-unordered-list-item-margin-block-end: 0.25rem;
+  --utrecht-unordered-list-padding-inline-start: 0;
+  --utrecht-unordered-list-level-1-list-style-type: "●";
+  --utrecht-unordered-list-level-2-list-style-type: "○";
+  --utrecht-unordered-list-level-3-list-style-type: "◆";
+  --utrecht-unordered-list-level-4-list-style-type: "◇";
+  --utrecht-unordered-list-level-5-list-style-type: "■";
+  --utrecht-unordered-list-level-6-list-style-type: "□";
+  --utrecht-unordered-list-level-7-list-style-type: "▲";
+  --utrecht-unordered-list-level-7-marker-font-size: 0.75rem;
+  --utrecht-unordered-list-level-8-list-style-type: "△";
+  --utrecht-unordered-list-level-8-marker-font-size: 0.75rem;
+  --utrecht-unordered-list-nested-padding-inline-start: 0;
   --utrecht-color-red-20: hsl(0 100% 20%); /** donker rood */
   --utrecht-color-red-30: hsl(0 100% 30%); /** hover rood */
   --utrecht-color-red-40: hsl(0 100% 40%); /** basis rood #cc0000 */
@@ -813,6 +823,8 @@
   --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
   --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
   --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
+  --utrecht-nav-bar-background-color: var(--utrecht-color-white);
+  --utrecht-nav-bar-color: var(--utrecht-color-black);
   --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
   --utrecht-nav-bar-link-padding-block-end: var(--utrecht-space-block-xs);
   --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
@@ -870,6 +882,7 @@
   --utrecht-navigation-marker-color: var(--utrecht-color-grey-80);
   --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /** Default block padding for badge components */
   --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /** Default inline padding color for badge components */
+  --utrecht-ordered-list-line-height: var(--utrecht-typography-line-height-md);
   --utrecht-page-body-content-background-color: var(--utrecht-color-white);
   --utrecht-page-body-content-color: var(--utrecht-color-black);
   --utrecht-page-footer-color: var(--utrecht-color-white);
@@ -993,8 +1006,22 @@
   --utrecht-toptask-link-padding-block-start: var(--utrecht-space-block-xl);
   --utrecht-toptask-link-padding-inline-end: var(--utrecht-space-inline-xl);
   --utrecht-toptask-link-padding-inline-start: var(--utrecht-space-inline-xl);
+  --utrecht-unordered-list-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-line-height: var(--utrecht-typography-line-height-md);
   --utrecht-unordered-list-margin-block-start: var(--utrecht-space-block-md);
+  --utrecht-unordered-list-item-margin-block-start: var(--utrecht-space-block-2xs);
+  --utrecht-unordered-list-item-margin-block-end: var(--utrecht-space-block-2xs);
+  --utrecht-unordered-list-item-padding-inline-start: var(--utrecht-space-text-md);
   --utrecht-unordered-list-marker-color: var(--utrecht-color-red-40);
+  --utrecht-unordered-list-marker-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-level-1-marker-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-level-2-marker-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-level-3-marker-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-level-4-marker-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-level-5-marker-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-level-6-marker-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-margin-inline-start: var(--utrecht-space-text-md);
+  --utrecht-unordered-list-center-padding-inline-start: var(--utrecht-space-text-md);
   --utrecht-menulijst-item-color: var(--utrecht-color-blue-35);
   --utrecht-menulijst-item-hover-color: var(--utrecht-color-blue-40);
   --utrecht-toptask-nav-gap: var(--utrecht-space-column-md);

package/dist/_mixin.scss

@@ -349,8 +349,18 @@
   --utrecht-toptask-link-hover-transform-scale: 1.02;
   --utrecht-toptask-link-icon-size: 2.25rem;
   --utrecht-unordered-list-margin-block-end: 0;
-  --utrecht-unordered-list-item-margin-block-start: 0.25rem;
-  --utrecht-unordered-list-item-margin-block-end: 0.25rem;
+  --utrecht-unordered-list-padding-inline-start: 0;
+  --utrecht-unordered-list-level-1-list-style-type: "●";
+  --utrecht-unordered-list-level-2-list-style-type: "○";
+  --utrecht-unordered-list-level-3-list-style-type: "◆";
+  --utrecht-unordered-list-level-4-list-style-type: "◇";
+  --utrecht-unordered-list-level-5-list-style-type: "■";
+  --utrecht-unordered-list-level-6-list-style-type: "□";
+  --utrecht-unordered-list-level-7-list-style-type: "▲";
+  --utrecht-unordered-list-level-7-marker-font-size: 0.75rem;
+  --utrecht-unordered-list-level-8-list-style-type: "△";
+  --utrecht-unordered-list-level-8-marker-font-size: 0.75rem;
+  --utrecht-unordered-list-nested-padding-inline-start: 0;
   --utrecht-color-red-20: hsl(0 100% 20%); /** donker rood */
   --utrecht-color-red-30: hsl(0 100% 30%); /** hover rood */
   --utrecht-color-red-40: hsl(0 100% 40%); /** basis rood #cc0000 */
@@ -813,6 +823,8 @@
   --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
   --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
   --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
+  --utrecht-nav-bar-background-color: var(--utrecht-color-white);
+  --utrecht-nav-bar-color: var(--utrecht-color-black);
   --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
   --utrecht-nav-bar-link-padding-block-end: var(--utrecht-space-block-xs);
   --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
@@ -870,6 +882,7 @@
   --utrecht-navigation-marker-color: var(--utrecht-color-grey-80);
   --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /** Default block padding for badge components */
   --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /** Default inline padding color for badge components */
+  --utrecht-ordered-list-line-height: var(--utrecht-typography-line-height-md);
   --utrecht-page-body-content-background-color: var(--utrecht-color-white);
   --utrecht-page-body-content-color: var(--utrecht-color-black);
   --utrecht-page-footer-color: var(--utrecht-color-white);
@@ -993,8 +1006,22 @@
   --utrecht-toptask-link-padding-block-start: var(--utrecht-space-block-xl);
   --utrecht-toptask-link-padding-inline-end: var(--utrecht-space-inline-xl);
   --utrecht-toptask-link-padding-inline-start: var(--utrecht-space-inline-xl);
+  --utrecht-unordered-list-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-line-height: var(--utrecht-typography-line-height-md);
   --utrecht-unordered-list-margin-block-start: var(--utrecht-space-block-md);
+  --utrecht-unordered-list-item-margin-block-start: var(--utrecht-space-block-2xs);
+  --utrecht-unordered-list-item-margin-block-end: var(--utrecht-space-block-2xs);
+  --utrecht-unordered-list-item-padding-inline-start: var(--utrecht-space-text-md);
   --utrecht-unordered-list-marker-color: var(--utrecht-color-red-40);
+  --utrecht-unordered-list-marker-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-level-1-marker-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-level-2-marker-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-level-3-marker-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-level-4-marker-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-level-5-marker-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-level-6-marker-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-margin-inline-start: var(--utrecht-space-text-md);
+  --utrecht-unordered-list-center-padding-inline-start: var(--utrecht-space-text-md);
   --utrecht-menulijst-item-color: var(--utrecht-color-blue-35);
   --utrecht-menulijst-item-hover-color: var(--utrecht-color-blue-40);
   --utrecht-toptask-nav-gap: var(--utrecht-space-column-md);

package/dist/_variables.scss

@@ -347,8 +347,18 @@ $utrecht-toptask-link-min-inline-size: 15rem;
 $utrecht-toptask-link-hover-transform-scale: 1.02;
 $utrecht-toptask-link-icon-size: 2.25rem;
 $utrecht-unordered-list-margin-block-end: 0;
-$utrecht-unordered-list-item-margin-block-start: 0.25rem;
-$utrecht-unordered-list-item-margin-block-end: 0.25rem;
+$utrecht-unordered-list-padding-inline-start: 0;
+$utrecht-unordered-list-level-1-list-style-type: "●";
+$utrecht-unordered-list-level-2-list-style-type: "○";
+$utrecht-unordered-list-level-3-list-style-type: "◆";
+$utrecht-unordered-list-level-4-list-style-type: "◇";
+$utrecht-unordered-list-level-5-list-style-type: "■";
+$utrecht-unordered-list-level-6-list-style-type: "□";
+$utrecht-unordered-list-level-7-list-style-type: "▲";
+$utrecht-unordered-list-level-7-marker-font-size: 0.75rem;
+$utrecht-unordered-list-level-8-list-style-type: "△";
+$utrecht-unordered-list-level-8-marker-font-size: 0.75rem;
+$utrecht-unordered-list-nested-padding-inline-start: 0;
 $utrecht-color-red-20: hsl(0 100% 20%); // donker rood
 $utrecht-color-red-30: hsl(0 100% 30%); // hover rood
 $utrecht-color-red-40: hsl(0 100% 40%); // basis rood #cc0000
@@ -811,6 +821,8 @@ $utrecht-mapcontrolbutton-padding-block-end: $utrecht-space-block-2xs;
 $utrecht-mapcontrolbutton-padding-block-start: $utrecht-space-block-2xs;
 $utrecht-mapcontrolbutton-padding-inline-end: $utrecht-space-inline-2xs;
 $utrecht-mapcontrolbutton-padding-inline-start: $utrecht-space-inline-2xs;
+$utrecht-nav-bar-background-color: $utrecht-color-white;
+$utrecht-nav-bar-color: $utrecht-color-black;
 $utrecht-nav-bar-content-max-inline-size: $utrecht-page-max-inline-size;
 $utrecht-nav-bar-link-padding-block-end: $utrecht-space-block-xs;
 $utrecht-nav-bar-link-padding-block-start: $utrecht-space-block-xs;
@@ -868,6 +880,7 @@ $utrecht-navigation-list-mobile-padding-inline-start: $utrecht-space-inline-md;
 $utrecht-navigation-marker-color: $utrecht-color-grey-80;
 $utrecht-number-badge-padding-block: $nl-number-badge-padding-block; // Default block padding for badge components
 $utrecht-number-badge-padding-inline: $nl-number-badge-padding-inline; // Default inline padding color for badge components
+$utrecht-ordered-list-line-height: $utrecht-typography-line-height-md;
 $utrecht-page-body-content-background-color: $utrecht-color-white;
 $utrecht-page-body-content-color: $utrecht-color-black;
 $utrecht-page-footer-color: $utrecht-color-white;
@@ -991,8 +1004,22 @@ $utrecht-toptask-link-padding-block-end: $utrecht-space-block-xl;
 $utrecht-toptask-link-padding-block-start: $utrecht-space-block-xl;
 $utrecht-toptask-link-padding-inline-end: $utrecht-space-inline-xl;
 $utrecht-toptask-link-padding-inline-start: $utrecht-space-inline-xl;
+$utrecht-unordered-list-font-size: $utrecht-typography-scale-md-font-size;
+$utrecht-unordered-list-line-height: $utrecht-typography-line-height-md;
 $utrecht-unordered-list-margin-block-start: $utrecht-space-block-md;
+$utrecht-unordered-list-item-margin-block-start: $utrecht-space-block-2xs;
+$utrecht-unordered-list-item-margin-block-end: $utrecht-space-block-2xs;
+$utrecht-unordered-list-item-padding-inline-start: $utrecht-space-text-md;
 $utrecht-unordered-list-marker-color: $utrecht-color-red-40;
+$utrecht-unordered-list-marker-font-size: $utrecht-typography-scale-md-font-size;
+$utrecht-unordered-list-level-1-marker-font-size: $utrecht-typography-scale-md-font-size;
+$utrecht-unordered-list-level-2-marker-font-size: $utrecht-typography-scale-md-font-size;
+$utrecht-unordered-list-level-3-marker-font-size: $utrecht-typography-scale-md-font-size;
+$utrecht-unordered-list-level-4-marker-font-size: $utrecht-typography-scale-md-font-size;
+$utrecht-unordered-list-level-5-marker-font-size: $utrecht-typography-scale-md-font-size;
+$utrecht-unordered-list-level-6-marker-font-size: $utrecht-typography-scale-md-font-size;
+$utrecht-unordered-list-margin-inline-start: $utrecht-space-text-md;
+$utrecht-unordered-list-center-padding-inline-start: $utrecht-space-text-md;
 $utrecht-menulijst-item-color: $utrecht-color-blue-35;
 $utrecht-menulijst-item-hover-color: $utrecht-color-blue-40;
 $utrecht-toptask-nav-gap: $utrecht-space-column-md;

package/dist/dark/_mixin-theme.scss

@@ -351,8 +351,18 @@
   --utrecht-toptask-link-hover-transform-scale: 1.02;
   --utrecht-toptask-link-icon-size: 2.25rem;
   --utrecht-unordered-list-margin-block-end: 0;
-  --utrecht-unordered-list-item-margin-block-start: 0.25rem;
-  --utrecht-unordered-list-item-margin-block-end: 0.25rem;
+  --utrecht-unordered-list-padding-inline-start: 0;
+  --utrecht-unordered-list-level-1-list-style-type: "●";
+  --utrecht-unordered-list-level-2-list-style-type: "○";
+  --utrecht-unordered-list-level-3-list-style-type: "◆";
+  --utrecht-unordered-list-level-4-list-style-type: "◇";
+  --utrecht-unordered-list-level-5-list-style-type: "■";
+  --utrecht-unordered-list-level-6-list-style-type: "□";
+  --utrecht-unordered-list-level-7-list-style-type: "▲";
+  --utrecht-unordered-list-level-7-marker-font-size: 0.75rem;
+  --utrecht-unordered-list-level-8-list-style-type: "△";
+  --utrecht-unordered-list-level-8-marker-font-size: 0.75rem;
+  --utrecht-unordered-list-nested-padding-inline-start: 0;
   --utrecht-color-red-20: hsl(0 100% 20%); /** donker rood */
   --utrecht-color-red-30: hsl(0 100% 30%); /** hover rood */
   --utrecht-color-red-40: hsl(0 100% 40%); /** basis rood #cc0000 */
@@ -812,6 +822,8 @@
   --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
   --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
   --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
+  --utrecht-nav-bar-background-color: var(--utrecht-color-white);
+  --utrecht-nav-bar-color: var(--utrecht-color-black);
   --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
   --utrecht-nav-bar-link-padding-block-end: var(--utrecht-space-block-xs);
   --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
@@ -869,6 +881,7 @@
   --utrecht-navigation-marker-color: var(--utrecht-color-grey-80);
   --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /** Default block padding for badge components */
   --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /** Default inline padding color for badge components */
+  --utrecht-ordered-list-line-height: var(--utrecht-typography-line-height-md);
   --utrecht-page-body-content-background-color: var(--utrecht-color-white);
   --utrecht-page-body-content-color: var(--utrecht-color-black);
   --utrecht-page-footer-color: var(--utrecht-color-white);
@@ -994,8 +1007,22 @@
   --utrecht-toptask-link-padding-block-start: var(--utrecht-space-block-xl);
   --utrecht-toptask-link-padding-inline-end: var(--utrecht-space-inline-xl);
   --utrecht-toptask-link-padding-inline-start: var(--utrecht-space-inline-xl);
+  --utrecht-unordered-list-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-line-height: var(--utrecht-typography-line-height-md);
   --utrecht-unordered-list-margin-block-start: var(--utrecht-space-block-md);
+  --utrecht-unordered-list-item-margin-block-start: var(--utrecht-space-block-2xs);
+  --utrecht-unordered-list-item-margin-block-end: var(--utrecht-space-block-2xs);
+  --utrecht-unordered-list-item-padding-inline-start: var(--utrecht-space-text-md);
   --utrecht-unordered-list-marker-color: var(--utrecht-color-red-40);
+  --utrecht-unordered-list-marker-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-level-1-marker-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-level-2-marker-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-level-3-marker-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-level-4-marker-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-level-5-marker-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-level-6-marker-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-margin-inline-start: var(--utrecht-space-text-md);
+  --utrecht-unordered-list-center-padding-inline-start: var(--utrecht-space-text-md);
   --utrecht-menulijst-item-color: var(--utrecht-color-blue-35);
   --utrecht-menulijst-item-hover-color: var(--utrecht-color-blue-40);
   --utrecht-toptask-nav-gap: var(--utrecht-space-column-md);

package/dist/dark/_mixin.scss

@@ -351,8 +351,18 @@
   --utrecht-toptask-link-hover-transform-scale: 1.02;
   --utrecht-toptask-link-icon-size: 2.25rem;
   --utrecht-unordered-list-margin-block-end: 0;
-  --utrecht-unordered-list-item-margin-block-start: 0.25rem;
-  --utrecht-unordered-list-item-margin-block-end: 0.25rem;
+  --utrecht-unordered-list-padding-inline-start: 0;
+  --utrecht-unordered-list-level-1-list-style-type: "●";
+  --utrecht-unordered-list-level-2-list-style-type: "○";
+  --utrecht-unordered-list-level-3-list-style-type: "◆";
+  --utrecht-unordered-list-level-4-list-style-type: "◇";
+  --utrecht-unordered-list-level-5-list-style-type: "■";
+  --utrecht-unordered-list-level-6-list-style-type: "□";
+  --utrecht-unordered-list-level-7-list-style-type: "▲";
+  --utrecht-unordered-list-level-7-marker-font-size: 0.75rem;
+  --utrecht-unordered-list-level-8-list-style-type: "△";
+  --utrecht-unordered-list-level-8-marker-font-size: 0.75rem;
+  --utrecht-unordered-list-nested-padding-inline-start: 0;
   --utrecht-color-red-20: hsl(0 100% 20%); /** donker rood */
   --utrecht-color-red-30: hsl(0 100% 30%); /** hover rood */
   --utrecht-color-red-40: hsl(0 100% 40%); /** basis rood #cc0000 */
@@ -812,6 +822,8 @@
   --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
   --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
   --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
+  --utrecht-nav-bar-background-color: var(--utrecht-color-white);
+  --utrecht-nav-bar-color: var(--utrecht-color-black);
   --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
   --utrecht-nav-bar-link-padding-block-end: var(--utrecht-space-block-xs);
   --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
@@ -869,6 +881,7 @@
   --utrecht-navigation-marker-color: var(--utrecht-color-grey-80);
   --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /** Default block padding for badge components */
   --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /** Default inline padding color for badge components */
+  --utrecht-ordered-list-line-height: var(--utrecht-typography-line-height-md);
   --utrecht-page-body-content-background-color: var(--utrecht-color-white);
   --utrecht-page-body-content-color: var(--utrecht-color-black);
   --utrecht-page-footer-color: var(--utrecht-color-white);
@@ -994,8 +1007,22 @@
   --utrecht-toptask-link-padding-block-start: var(--utrecht-space-block-xl);
   --utrecht-toptask-link-padding-inline-end: var(--utrecht-space-inline-xl);
   --utrecht-toptask-link-padding-inline-start: var(--utrecht-space-inline-xl);
+  --utrecht-unordered-list-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-line-height: var(--utrecht-typography-line-height-md);
   --utrecht-unordered-list-margin-block-start: var(--utrecht-space-block-md);
+  --utrecht-unordered-list-item-margin-block-start: var(--utrecht-space-block-2xs);
+  --utrecht-unordered-list-item-margin-block-end: var(--utrecht-space-block-2xs);
+  --utrecht-unordered-list-item-padding-inline-start: var(--utrecht-space-text-md);
   --utrecht-unordered-list-marker-color: var(--utrecht-color-red-40);
+  --utrecht-unordered-list-marker-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-level-1-marker-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-level-2-marker-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-level-3-marker-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-level-4-marker-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-level-5-marker-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-level-6-marker-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-margin-inline-start: var(--utrecht-space-text-md);
+  --utrecht-unordered-list-center-padding-inline-start: var(--utrecht-space-text-md);
   --utrecht-menulijst-item-color: var(--utrecht-color-blue-35);
   --utrecht-menulijst-item-hover-color: var(--utrecht-color-blue-40);
   --utrecht-toptask-nav-gap: var(--utrecht-space-column-md);

package/dist/dark/_variables.scss

@@ -349,8 +349,18 @@ $utrecht-toptask-link-min-inline-size: 15rem;
 $utrecht-toptask-link-hover-transform-scale: 1.02;
 $utrecht-toptask-link-icon-size: 2.25rem;
 $utrecht-unordered-list-margin-block-end: 0;
-$utrecht-unordered-list-item-margin-block-start: 0.25rem;
-$utrecht-unordered-list-item-margin-block-end: 0.25rem;
+$utrecht-unordered-list-padding-inline-start: 0;
+$utrecht-unordered-list-level-1-list-style-type: "●";
+$utrecht-unordered-list-level-2-list-style-type: "○";
+$utrecht-unordered-list-level-3-list-style-type: "◆";
+$utrecht-unordered-list-level-4-list-style-type: "◇";
+$utrecht-unordered-list-level-5-list-style-type: "■";
+$utrecht-unordered-list-level-6-list-style-type: "□";
+$utrecht-unordered-list-level-7-list-style-type: "▲";
+$utrecht-unordered-list-level-7-marker-font-size: 0.75rem;
+$utrecht-unordered-list-level-8-list-style-type: "△";
+$utrecht-unordered-list-level-8-marker-font-size: 0.75rem;
+$utrecht-unordered-list-nested-padding-inline-start: 0;
 $utrecht-color-red-20: hsl(0 100% 20%); // donker rood
 $utrecht-color-red-30: hsl(0 100% 30%); // hover rood
 $utrecht-color-red-40: hsl(0 100% 40%); // basis rood #cc0000
@@ -810,6 +820,8 @@ $utrecht-mapcontrolbutton-padding-block-end: $utrecht-space-block-2xs;
 $utrecht-mapcontrolbutton-padding-block-start: $utrecht-space-block-2xs;
 $utrecht-mapcontrolbutton-padding-inline-end: $utrecht-space-inline-2xs;
 $utrecht-mapcontrolbutton-padding-inline-start: $utrecht-space-inline-2xs;
+$utrecht-nav-bar-background-color: $utrecht-color-white;
+$utrecht-nav-bar-color: $utrecht-color-black;
 $utrecht-nav-bar-content-max-inline-size: $utrecht-page-max-inline-size;
 $utrecht-nav-bar-link-padding-block-end: $utrecht-space-block-xs;
 $utrecht-nav-bar-link-padding-block-start: $utrecht-space-block-xs;
@@ -867,6 +879,7 @@ $utrecht-navigation-list-mobile-padding-inline-start: $utrecht-space-inline-md;
 $utrecht-navigation-marker-color: $utrecht-color-grey-80;
 $utrecht-number-badge-padding-block: $nl-number-badge-padding-block; // Default block padding for badge components
 $utrecht-number-badge-padding-inline: $nl-number-badge-padding-inline; // Default inline padding color for badge components
+$utrecht-ordered-list-line-height: $utrecht-typography-line-height-md;
 $utrecht-page-body-content-background-color: $utrecht-color-white;
 $utrecht-page-body-content-color: $utrecht-color-black;
 $utrecht-page-footer-color: $utrecht-color-white;
@@ -992,8 +1005,22 @@ $utrecht-toptask-link-padding-block-end: $utrecht-space-block-xl;
 $utrecht-toptask-link-padding-block-start: $utrecht-space-block-xl;
 $utrecht-toptask-link-padding-inline-end: $utrecht-space-inline-xl;
 $utrecht-toptask-link-padding-inline-start: $utrecht-space-inline-xl;
+$utrecht-unordered-list-font-size: $utrecht-typography-scale-md-font-size;
+$utrecht-unordered-list-line-height: $utrecht-typography-line-height-md;
 $utrecht-unordered-list-margin-block-start: $utrecht-space-block-md;
+$utrecht-unordered-list-item-margin-block-start: $utrecht-space-block-2xs;
+$utrecht-unordered-list-item-margin-block-end: $utrecht-space-block-2xs;
+$utrecht-unordered-list-item-padding-inline-start: $utrecht-space-text-md;
 $utrecht-unordered-list-marker-color: $utrecht-color-red-40;
+$utrecht-unordered-list-marker-font-size: $utrecht-typography-scale-md-font-size;
+$utrecht-unordered-list-level-1-marker-font-size: $utrecht-typography-scale-md-font-size;
+$utrecht-unordered-list-level-2-marker-font-size: $utrecht-typography-scale-md-font-size;
+$utrecht-unordered-list-level-3-marker-font-size: $utrecht-typography-scale-md-font-size;
+$utrecht-unordered-list-level-4-marker-font-size: $utrecht-typography-scale-md-font-size;
+$utrecht-unordered-list-level-5-marker-font-size: $utrecht-typography-scale-md-font-size;
+$utrecht-unordered-list-level-6-marker-font-size: $utrecht-typography-scale-md-font-size;
+$utrecht-unordered-list-margin-inline-start: $utrecht-space-text-md;
+$utrecht-unordered-list-center-padding-inline-start: $utrecht-space-text-md;
 $utrecht-menulijst-item-color: $utrecht-color-blue-35;
 $utrecht-menulijst-item-hover-color: $utrecht-color-blue-40;
 $utrecht-toptask-nav-gap: $utrecht-space-column-md;

package/dist/dark/index.cjs

@@ -690,6 +690,8 @@ module.exports = {
   utrechtMapcontrolbuttonPaddingInlineStart: "4px",
   utrechtMarkBackgroundColor: "hsl(48 100% 60%)",
   utrechtMarkColor: "hsl(0 0% 0%)",
+  utrechtNavBarBackgroundColor: "hsl(0 0% 100%)",
+  utrechtNavBarColor: "hsl(0 0% 0%)",
   utrechtNavBarContentMaxInlineSize: "1184px",
   utrechtNavBarLinkPaddingBlockEnd: "8px",
   utrechtNavBarLinkPaddingBlockStart: "8px",
@@ -780,6 +782,7 @@ module.exports = {
   utrechtNumberBadgePaddingInline: "1ex",
   utrechtNumberDataPositiveColor: "green",
   utrechtNumberDataNegativeColor: "red",
+  utrechtOrderedListLineHeight: "1.5",
   utrechtOrderedListMarginBlockStart: "0",
   utrechtOrderedListMarginBlockEnd: "1em",
   utrechtOrderedListPaddingInlineStart: "28.8px",
@@ -1055,11 +1058,35 @@ module.exports = {
   utrechtToptaskLinkHoverColor: "hsl(0 0% 15%)",
   utrechtToptaskLinkHoverTransformScale: "1.02",
   utrechtToptaskLinkIconSize: "2.25rem",
+  utrechtUnorderedListFontSize: "1rem",
+  utrechtUnorderedListLineHeight: "1.5",
   utrechtUnorderedListMarginBlockStart: "16px",
   utrechtUnorderedListMarginBlockEnd: "0",
-  utrechtUnorderedListItemMarginBlockStart: "0.25rem",
-  utrechtUnorderedListItemMarginBlockEnd: "0.25rem",
+  utrechtUnorderedListPaddingInlineStart: "0",
+  utrechtUnorderedListItemMarginBlockStart: "4px",
+  utrechtUnorderedListItemMarginBlockEnd: "4px",
+  utrechtUnorderedListItemPaddingInlineStart: "1ch",
   utrechtUnorderedListMarkerColor: "hsl(0 100% 40%)",
+  utrechtUnorderedListMarkerFontSize: "1rem",
+  utrechtUnorderedListLevel1ListStyleType: '"●"',
+  utrechtUnorderedListLevel1MarkerFontSize: "1rem",
+  utrechtUnorderedListLevel2ListStyleType: '"○"',
+  utrechtUnorderedListLevel2MarkerFontSize: "1rem",
+  utrechtUnorderedListLevel3ListStyleType: '"◆"',
+  utrechtUnorderedListLevel3MarkerFontSize: "1rem",
+  utrechtUnorderedListLevel4ListStyleType: '"◇"',
+  utrechtUnorderedListLevel4MarkerFontSize: "1rem",
+  utrechtUnorderedListLevel5ListStyleType: '"■"',
+  utrechtUnorderedListLevel5MarkerFontSize: "1rem",
+  utrechtUnorderedListLevel6ListStyleType: '"□"',
+  utrechtUnorderedListLevel6MarkerFontSize: "1rem",
+  utrechtUnorderedListLevel7ListStyleType: '"▲"',
+  utrechtUnorderedListLevel7MarkerFontSize: "0.75rem",
+  utrechtUnorderedListLevel8ListStyleType: '"△"',
+  utrechtUnorderedListLevel8MarkerFontSize: "0.75rem",
+  utrechtUnorderedListMarginInlineStart: "1ch",
+  utrechtUnorderedListNestedPaddingInlineStart: "0",
+  utrechtUnorderedListCenterPaddingInlineStart: "1ch",
   utrechtColorRed20: "hsl(0 100% 20%)",
   utrechtColorRed30: "hsl(0 100% 30%)",
   utrechtColorRed40: "hsl(0 100% 40%)",

package/dist/dark/index.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /**
  * @license SEE LICENSE.md
  * Copyright (c) 2021 Gemeente Utrecht
@@ -356,8 +357,18 @@
   --utrecht-toptask-link-hover-transform-scale: 1.02;
   --utrecht-toptask-link-icon-size: 2.25rem;
   --utrecht-unordered-list-margin-block-end: 0;
-  --utrecht-unordered-list-item-margin-block-start: 0.25rem;
-  --utrecht-unordered-list-item-margin-block-end: 0.25rem;
+  --utrecht-unordered-list-padding-inline-start: 0;
+  --utrecht-unordered-list-level-1-list-style-type: "●";
+  --utrecht-unordered-list-level-2-list-style-type: "○";
+  --utrecht-unordered-list-level-3-list-style-type: "◆";
+  --utrecht-unordered-list-level-4-list-style-type: "◇";
+  --utrecht-unordered-list-level-5-list-style-type: "■";
+  --utrecht-unordered-list-level-6-list-style-type: "□";
+  --utrecht-unordered-list-level-7-list-style-type: "▲";
+  --utrecht-unordered-list-level-7-marker-font-size: 0.75rem;
+  --utrecht-unordered-list-level-8-list-style-type: "△";
+  --utrecht-unordered-list-level-8-marker-font-size: 0.75rem;
+  --utrecht-unordered-list-nested-padding-inline-start: 0;
   --utrecht-color-red-20: hsl(0 100% 20%); /** donker rood */
   --utrecht-color-red-30: hsl(0 100% 30%); /** hover rood */
   --utrecht-color-red-40: hsl(0 100% 40%); /** basis rood #cc0000 */
@@ -817,6 +828,8 @@
   --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
   --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
   --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
+  --utrecht-nav-bar-background-color: var(--utrecht-color-white);
+  --utrecht-nav-bar-color: var(--utrecht-color-black);
   --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
   --utrecht-nav-bar-link-padding-block-end: var(--utrecht-space-block-xs);
   --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
@@ -874,6 +887,7 @@
   --utrecht-navigation-marker-color: var(--utrecht-color-grey-80);
   --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /** Default block padding for badge components */
   --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /** Default inline padding color for badge components */
+  --utrecht-ordered-list-line-height: var(--utrecht-typography-line-height-md);
   --utrecht-page-body-content-background-color: var(--utrecht-color-white);
   --utrecht-page-body-content-color: var(--utrecht-color-black);
   --utrecht-page-footer-color: var(--utrecht-color-white);
@@ -999,8 +1013,22 @@
   --utrecht-toptask-link-padding-block-start: var(--utrecht-space-block-xl);
   --utrecht-toptask-link-padding-inline-end: var(--utrecht-space-inline-xl);
   --utrecht-toptask-link-padding-inline-start: var(--utrecht-space-inline-xl);
+  --utrecht-unordered-list-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-line-height: var(--utrecht-typography-line-height-md);
   --utrecht-unordered-list-margin-block-start: var(--utrecht-space-block-md);
+  --utrecht-unordered-list-item-margin-block-start: var(--utrecht-space-block-2xs);
+  --utrecht-unordered-list-item-margin-block-end: var(--utrecht-space-block-2xs);
+  --utrecht-unordered-list-item-padding-inline-start: var(--utrecht-space-text-md);
   --utrecht-unordered-list-marker-color: var(--utrecht-color-red-40);
+  --utrecht-unordered-list-marker-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-level-1-marker-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-level-2-marker-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-level-3-marker-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-level-4-marker-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-level-5-marker-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-level-6-marker-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-unordered-list-margin-inline-start: var(--utrecht-space-text-md);
+  --utrecht-unordered-list-center-padding-inline-start: var(--utrecht-space-text-md);
   --utrecht-menulijst-item-color: var(--utrecht-color-blue-35);
   --utrecht-menulijst-item-hover-color: var(--utrecht-color-blue-40);
   --utrecht-toptask-nav-gap: var(--utrecht-space-column-md);

package/dist/dark/index.d.ts

@@ -756,6 +756,8 @@ export const utrechtMapcontrolbuttonPaddingInlineEnd: string;
 export const utrechtMapcontrolbuttonPaddingInlineStart: string;
 export const utrechtMarkBackgroundColor: string;
 export const utrechtMarkColor: string;
+export const utrechtNavBarBackgroundColor: string;
+export const utrechtNavBarColor: string;
 export const utrechtNavBarContentMaxInlineSize: string;
 export const utrechtNavBarLinkPaddingBlockEnd: string;
 export const utrechtNavBarLinkPaddingBlockStart: string;
@@ -849,6 +851,7 @@ export const utrechtNumberBadgePaddingBlock: string;
 export const utrechtNumberBadgePaddingInline: string;
 export const utrechtNumberDataPositiveColor: string;
 export const utrechtNumberDataNegativeColor: string;
+export const utrechtOrderedListLineHeight: string;
 export const utrechtOrderedListMarginBlockStart: number;
 export const utrechtOrderedListMarginBlockEnd: string;
 export const utrechtOrderedListPaddingInlineStart: string;
@@ -1123,11 +1126,35 @@ export const utrechtToptaskLinkHoverBackgroundColor: string;
 export const utrechtToptaskLinkHoverColor: string;
 export const utrechtToptaskLinkHoverTransformScale: string;
 export const utrechtToptaskLinkIconSize: string;
+export const utrechtUnorderedListFontSize: string;
+export const utrechtUnorderedListLineHeight: string;
 export const utrechtUnorderedListMarginBlockStart: string;
 export const utrechtUnorderedListMarginBlockEnd: number;
+export const utrechtUnorderedListPaddingInlineStart: number;
 export const utrechtUnorderedListItemMarginBlockStart: string;
 export const utrechtUnorderedListItemMarginBlockEnd: string;
+export const utrechtUnorderedListItemPaddingInlineStart: string;
 export const utrechtUnorderedListMarkerColor: string;
+export const utrechtUnorderedListMarkerFontSize: string;
+export const utrechtUnorderedListLevel1ListStyleType: string;
+export const utrechtUnorderedListLevel1MarkerFontSize: string;
+export const utrechtUnorderedListLevel2ListStyleType: string;
+export const utrechtUnorderedListLevel2MarkerFontSize: string;
+export const utrechtUnorderedListLevel3ListStyleType: string;
+export const utrechtUnorderedListLevel3MarkerFontSize: string;
+export const utrechtUnorderedListLevel4ListStyleType: string;
+export const utrechtUnorderedListLevel4MarkerFontSize: string;
+export const utrechtUnorderedListLevel5ListStyleType: string;
+export const utrechtUnorderedListLevel5MarkerFontSize: string;
+export const utrechtUnorderedListLevel6ListStyleType: string;
+export const utrechtUnorderedListLevel6MarkerFontSize: string;
+export const utrechtUnorderedListLevel7ListStyleType: string;
+export const utrechtUnorderedListLevel7MarkerFontSize: string;
+export const utrechtUnorderedListLevel8ListStyleType: string;
+export const utrechtUnorderedListLevel8MarkerFontSize: string;
+export const utrechtUnorderedListMarginInlineStart: string;
+export const utrechtUnorderedListNestedPaddingInlineStart: string;
+export const utrechtUnorderedListCenterPaddingInlineStart: string;
 /** donker rood */
 export const utrechtColorRed20: string;
 /** hover rood */

package/dist/dark/index.flat.json

@@ -810,6 +810,8 @@
   "utrechtMarkColor": "hsl(0 0% 0%)",
   "utrechtMenulijstItemColor": "hsl(211 60% 35%)",
   "utrechtMenulijstItemHoverColor": "hsl(211 60% 40%)",
+  "utrechtNavBarBackgroundColor": "hsl(0 0% 100%)",
+  "utrechtNavBarColor": "hsl(0 0% 0%)",
   "utrechtNavBarContentMaxInlineSize": "1184px",
   "utrechtNavBarLinkPaddingBlockEnd": "8px",
   "utrechtNavBarLinkPaddingBlockStart": "8px",
@@ -883,6 +885,7 @@
   "utrechtOrderedListItemMarginBlockEnd": "0.25em",
   "utrechtOrderedListItemMarginBlockStart": "0.25em",
   "utrechtOrderedListItemPaddingInlineStart": "0",
+  "utrechtOrderedListLineHeight": "1.5",
   "utrechtOrderedListMarginBlockEnd": "1em",
   "utrechtOrderedListMarginBlockStart": "0",
   "utrechtOrderedListPaddingInlineStart": "28.8px",
@@ -1254,9 +1257,33 @@
   "utrechtTypographyWeightScaleMediumFontWeight": "500",
   "utrechtTypographyWeightScaleNormalFontWeight": "400",
   "utrechtTypographyWeightScaleSemiboldFontWeight": "600",
-  "utrechtUnorderedListItemMarginBlockEnd": "0.25rem",
-  "utrechtUnorderedListItemMarginBlockStart": "0.25rem",
+  "utrechtUnorderedListCenterPaddingInlineStart": "1ch",
+  "utrechtUnorderedListFontSize": "1rem",
+  "utrechtUnorderedListItemMarginBlockEnd": "4px",
+  "utrechtUnorderedListItemMarginBlockStart": "4px",
+  "utrechtUnorderedListItemPaddingInlineStart": "1ch",
+  "utrechtUnorderedListLevel1ListStyleType": "\"●\"",
+  "utrechtUnorderedListLevel1MarkerFontSize": "1rem",
+  "utrechtUnorderedListLevel2ListStyleType": "\"○\"",
+  "utrechtUnorderedListLevel2MarkerFontSize": "1rem",
+  "utrechtUnorderedListLevel3ListStyleType": "\"◆\"",
+  "utrechtUnorderedListLevel3MarkerFontSize": "1rem",
+  "utrechtUnorderedListLevel4ListStyleType": "\"◇\"",
+  "utrechtUnorderedListLevel4MarkerFontSize": "1rem",
+  "utrechtUnorderedListLevel5ListStyleType": "\"■\"",
+  "utrechtUnorderedListLevel5MarkerFontSize": "1rem",
+  "utrechtUnorderedListLevel6ListStyleType": "\"□\"",
+  "utrechtUnorderedListLevel6MarkerFontSize": "1rem",
+  "utrechtUnorderedListLevel7ListStyleType": "\"▲\"",
+  "utrechtUnorderedListLevel7MarkerFontSize": "0.75rem",
+  "utrechtUnorderedListLevel8ListStyleType": "\"△\"",
+  "utrechtUnorderedListLevel8MarkerFontSize": "0.75rem",
+  "utrechtUnorderedListLineHeight": "1.5",
   "utrechtUnorderedListMarginBlockEnd": "0",
   "utrechtUnorderedListMarginBlockStart": "16px",
-  "utrechtUnorderedListMarkerColor": "hsl(0 100% 40%)"
+  "utrechtUnorderedListMarginInlineStart": "1ch",
+  "utrechtUnorderedListMarkerColor": "hsl(0 100% 40%)",
+  "utrechtUnorderedListMarkerFontSize": "1rem",
+  "utrechtUnorderedListNestedPaddingInlineStart": "0",
+  "utrechtUnorderedListPaddingInlineStart": "0"
 }