@utrecht/design-tokens 6.1.0 → 6.2.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @utrecht/design-tokens
 
+## 6.2.0
+
+### Minor Changes
+
+- 4140e7c: Specify Nav Bar background color.
+
+## 6.1.1
+
+### Patch Changes
+
+- 57dee78: Specify background color for Navigation Bar to support sticky positioning.
+
 ## 6.1.0
 
 ### Minor Changes

package/dist/_mixin-theme.scss

@@ -223,6 +223,8 @@
   --utrecht-mapcontrolbutton-focus-text-decoration: none;
   --utrecht-mapcontrolbutton-margin-inline-end: 0;
   --utrecht-mapcontrolbutton-margin-inline-start: 0;
+  --utrecht-nav-bar-background-color: transparent;
+  --utrecht-nav-bar-color: transparent;
   --utrecht-topnav-link-focus-border-type: dotted;
   --utrecht-topnav-link-focus-text-decoration: none;
   --utrecht-navigation-border-block-end-color: transparent;
@@ -823,6 +825,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-content-background-color: var(--utrecht-color-white);
+  --utrecht-nav-bar-content-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);

package/dist/_mixin.scss

@@ -223,6 +223,8 @@
   --utrecht-mapcontrolbutton-focus-text-decoration: none;
   --utrecht-mapcontrolbutton-margin-inline-end: 0;
   --utrecht-mapcontrolbutton-margin-inline-start: 0;
+  --utrecht-nav-bar-background-color: transparent;
+  --utrecht-nav-bar-color: transparent;
   --utrecht-topnav-link-focus-border-type: dotted;
   --utrecht-topnav-link-focus-text-decoration: none;
   --utrecht-navigation-border-block-end-color: transparent;
@@ -823,6 +825,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-content-background-color: var(--utrecht-color-white);
+  --utrecht-nav-bar-content-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);

package/dist/_variables.scss

@@ -221,6 +221,8 @@ $utrecht-mapcontrolbutton-border-radius: 2px;
 $utrecht-mapcontrolbutton-focus-text-decoration: none;
 $utrecht-mapcontrolbutton-margin-inline-end: 0;
 $utrecht-mapcontrolbutton-margin-inline-start: 0;
+$utrecht-nav-bar-background-color: transparent;
+$utrecht-nav-bar-color: transparent;
 $utrecht-topnav-link-focus-border-type: dotted;
 $utrecht-topnav-link-focus-text-decoration: none;
 $utrecht-navigation-border-block-end-color: transparent;
@@ -821,6 +823,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-content-background-color: $utrecht-color-white;
+$utrecht-nav-bar-content-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;

package/dist/dark/_mixin-theme.scss

@@ -225,6 +225,8 @@
   --utrecht-mapcontrolbutton-focus-text-decoration: none;
   --utrecht-mapcontrolbutton-margin-inline-end: 0;
   --utrecht-mapcontrolbutton-margin-inline-start: 0;
+  --utrecht-nav-bar-background-color: transparent;
+  --utrecht-nav-bar-color: transparent;
   --utrecht-topnav-link-focus-border-type: dotted;
   --utrecht-topnav-link-focus-text-decoration: none;
   --utrecht-navigation-border-block-end-color: transparent;
@@ -822,6 +824,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-content-background-color: var(--utrecht-color-white);
+  --utrecht-nav-bar-content-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);

package/dist/dark/_mixin.scss

@@ -225,6 +225,8 @@
   --utrecht-mapcontrolbutton-focus-text-decoration: none;
   --utrecht-mapcontrolbutton-margin-inline-end: 0;
   --utrecht-mapcontrolbutton-margin-inline-start: 0;
+  --utrecht-nav-bar-background-color: transparent;
+  --utrecht-nav-bar-color: transparent;
   --utrecht-topnav-link-focus-border-type: dotted;
   --utrecht-topnav-link-focus-text-decoration: none;
   --utrecht-navigation-border-block-end-color: transparent;
@@ -822,6 +824,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-content-background-color: var(--utrecht-color-white);
+  --utrecht-nav-bar-content-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);

package/dist/dark/_variables.scss

@@ -223,6 +223,8 @@ $utrecht-mapcontrolbutton-border-radius: 2px;
 $utrecht-mapcontrolbutton-focus-text-decoration: none;
 $utrecht-mapcontrolbutton-margin-inline-end: 0;
 $utrecht-mapcontrolbutton-margin-inline-start: 0;
+$utrecht-nav-bar-background-color: transparent;
+$utrecht-nav-bar-color: transparent;
 $utrecht-topnav-link-focus-border-type: dotted;
 $utrecht-topnav-link-focus-text-decoration: none;
 $utrecht-navigation-border-block-end-color: transparent;
@@ -820,6 +822,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-content-background-color: $utrecht-color-white;
+$utrecht-nav-bar-content-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;

package/dist/dark/index.cjs

@@ -690,6 +690,10 @@ module.exports = {
   utrechtMapcontrolbuttonPaddingInlineStart: "4px",
   utrechtMarkBackgroundColor: "hsl(48 100% 60%)",
   utrechtMarkColor: "hsl(0 0% 0%)",
+  utrechtNavBarBackgroundColor: "transparent",
+  utrechtNavBarColor: "transparent",
+  utrechtNavBarContentBackgroundColor: "hsl(0 0% 100%)",
+  utrechtNavBarContentColor: "hsl(0 0% 0%)",
   utrechtNavBarContentMaxInlineSize: "1184px",
   utrechtNavBarLinkPaddingBlockEnd: "8px",
   utrechtNavBarLinkPaddingBlockStart: "8px",

package/dist/dark/index.css

@@ -231,6 +231,8 @@
   --utrecht-mapcontrolbutton-focus-text-decoration: none;
   --utrecht-mapcontrolbutton-margin-inline-end: 0;
   --utrecht-mapcontrolbutton-margin-inline-start: 0;
+  --utrecht-nav-bar-background-color: transparent;
+  --utrecht-nav-bar-color: transparent;
   --utrecht-topnav-link-focus-border-type: dotted;
   --utrecht-topnav-link-focus-text-decoration: none;
   --utrecht-navigation-border-block-end-color: transparent;
@@ -828,6 +830,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-content-background-color: var(--utrecht-color-white);
+  --utrecht-nav-bar-content-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);

package/dist/dark/index.d.ts

@@ -756,6 +756,10 @@ 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 utrechtNavBarContentBackgroundColor: string;
+export const utrechtNavBarContentColor: string;
 export const utrechtNavBarContentMaxInlineSize: string;
 export const utrechtNavBarLinkPaddingBlockEnd: string;
 export const utrechtNavBarLinkPaddingBlockStart: string;

package/dist/dark/index.flat.json

@@ -810,6 +810,10 @@
   "utrechtMarkColor": "hsl(0 0% 0%)",
   "utrechtMenulijstItemColor": "hsl(211 60% 35%)",
   "utrechtMenulijstItemHoverColor": "hsl(211 60% 40%)",
+  "utrechtNavBarBackgroundColor": "transparent",
+  "utrechtNavBarColor": "transparent",
+  "utrechtNavBarContentBackgroundColor": "hsl(0 0% 100%)",
+  "utrechtNavBarContentColor": "hsl(0 0% 0%)",
   "utrechtNavBarContentMaxInlineSize": "1184px",
   "utrechtNavBarLinkPaddingBlockEnd": "8px",
   "utrechtNavBarLinkPaddingBlockStart": "8px",

package/dist/dark/index.json

@@ -20465,6 +20465,116 @@
       "color"
     ]
   },
+  {
+    "key": "{utrecht.nav-bar.background-color}",
+    "$extensions": {
+      "nl.nldesignsystem.css-property-syntax": "<color>",
+      "nl.nldesignsystem.figma-implementation": false
+    },
+    "$type": "color",
+    "$value": "transparent",
+    "filePath": "src/component/utrecht/nav-bar.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css-property-syntax": "<color>",
+        "nl.nldesignsystem.figma-implementation": false
+      },
+      "$type": "color",
+      "$value": "transparent",
+      "key": "{utrecht.nav-bar.background-color}"
+    },
+    "name": "utrechtNavBarBackgroundColor",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "nav-bar",
+      "background-color"
+    ]
+  },
+  {
+    "key": "{utrecht.nav-bar.color}",
+    "$extensions": {
+      "nl.nldesignsystem.css-property-syntax": "<color>",
+      "nl.nldesignsystem.figma-implementation": false
+    },
+    "$type": "color",
+    "$value": "transparent",
+    "filePath": "src/component/utrecht/nav-bar.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css-property-syntax": "<color>",
+        "nl.nldesignsystem.figma-implementation": false
+      },
+      "$type": "color",
+      "$value": "transparent",
+      "key": "{utrecht.nav-bar.color}"
+    },
+    "name": "utrechtNavBarColor",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "nav-bar",
+      "color"
+    ]
+  },
+  {
+    "key": "{utrecht.nav-bar.content.background-color}",
+    "$extensions": {
+      "nl.nldesignsystem.css-property-syntax": "<color>",
+      "nl.nldesignsystem.figma-implementation": false
+    },
+    "$type": "color",
+    "$value": "hsl(0 0% 100%)",
+    "filePath": "src/component/utrecht/nav-bar.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css-property-syntax": "<color>",
+        "nl.nldesignsystem.figma-implementation": false
+      },
+      "$type": "color",
+      "$value": "{utrecht.color.white}",
+      "key": "{utrecht.nav-bar.content.background-color}"
+    },
+    "name": "utrechtNavBarContentBackgroundColor",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "nav-bar",
+      "content",
+      "background-color"
+    ]
+  },
+  {
+    "key": "{utrecht.nav-bar.content.color}",
+    "$extensions": {
+      "nl.nldesignsystem.css-property-syntax": "<color>",
+      "nl.nldesignsystem.figma-implementation": false
+    },
+    "$type": "color",
+    "$value": "hsl(0 0% 0%)",
+    "filePath": "src/component/utrecht/nav-bar.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css-property-syntax": "<color>",
+        "nl.nldesignsystem.figma-implementation": false
+      },
+      "$type": "color",
+      "$value": "{utrecht.color.black}",
+      "key": "{utrecht.nav-bar.content.color}"
+    },
+    "name": "utrechtNavBarContentColor",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "nav-bar",
+      "content",
+      "color"
+    ]
+  },
   {
     "key": "{utrecht.nav-bar.content.max-inline-size}",
     "$extensions": {

package/dist/dark/index.mjs

@@ -744,6 +744,10 @@ export const utrechtMapcontrolbuttonPaddingInlineEnd = "4px";
 export const utrechtMapcontrolbuttonPaddingInlineStart = "4px";
 export const utrechtMarkBackgroundColor = "hsl(48 100% 60%)";
 export const utrechtMarkColor = "hsl(0 0% 0%)";
+export const utrechtNavBarBackgroundColor = "transparent";
+export const utrechtNavBarColor = "transparent";
+export const utrechtNavBarContentBackgroundColor = "hsl(0 0% 100%)";
+export const utrechtNavBarContentColor = "hsl(0 0% 0%)";
 export const utrechtNavBarContentMaxInlineSize = "1184px";
 export const utrechtNavBarLinkPaddingBlockEnd = "8px";
 export const utrechtNavBarLinkPaddingBlockStart = "8px";

package/dist/dark/index.tokens.json

@@ -1224,7 +1224,11 @@
       "color": "hsl(0 0% 0%)"
     },
     "nav-bar": {
+      "background-color": "transparent",
+      "color": "transparent",
       "content": {
+        "background-color": "hsl(0 0% 100%)",
+        "color": "hsl(0 0% 0%)",
         "max-inline-size": "1184px"
       },
       "link": {

package/dist/dark/list.json

@@ -20465,6 +20465,116 @@
       "color"
     ]
   },
+  {
+    "key": "{utrecht.nav-bar.background-color}",
+    "$extensions": {
+      "nl.nldesignsystem.css-property-syntax": "<color>",
+      "nl.nldesignsystem.figma-implementation": false
+    },
+    "$type": "color",
+    "$value": "transparent",
+    "filePath": "src/component/utrecht/nav-bar.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css-property-syntax": "<color>",
+        "nl.nldesignsystem.figma-implementation": false
+      },
+      "$type": "color",
+      "$value": "transparent",
+      "key": "{utrecht.nav-bar.background-color}"
+    },
+    "name": "utrechtNavBarBackgroundColor",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "nav-bar",
+      "background-color"
+    ]
+  },
+  {
+    "key": "{utrecht.nav-bar.color}",
+    "$extensions": {
+      "nl.nldesignsystem.css-property-syntax": "<color>",
+      "nl.nldesignsystem.figma-implementation": false
+    },
+    "$type": "color",
+    "$value": "transparent",
+    "filePath": "src/component/utrecht/nav-bar.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css-property-syntax": "<color>",
+        "nl.nldesignsystem.figma-implementation": false
+      },
+      "$type": "color",
+      "$value": "transparent",
+      "key": "{utrecht.nav-bar.color}"
+    },
+    "name": "utrechtNavBarColor",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "nav-bar",
+      "color"
+    ]
+  },
+  {
+    "key": "{utrecht.nav-bar.content.background-color}",
+    "$extensions": {
+      "nl.nldesignsystem.css-property-syntax": "<color>",
+      "nl.nldesignsystem.figma-implementation": false
+    },
+    "$type": "color",
+    "$value": "hsl(0 0% 100%)",
+    "filePath": "src/component/utrecht/nav-bar.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css-property-syntax": "<color>",
+        "nl.nldesignsystem.figma-implementation": false
+      },
+      "$type": "color",
+      "$value": "{utrecht.color.white}",
+      "key": "{utrecht.nav-bar.content.background-color}"
+    },
+    "name": "utrechtNavBarContentBackgroundColor",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "nav-bar",
+      "content",
+      "background-color"
+    ]
+  },
+  {
+    "key": "{utrecht.nav-bar.content.color}",
+    "$extensions": {
+      "nl.nldesignsystem.css-property-syntax": "<color>",
+      "nl.nldesignsystem.figma-implementation": false
+    },
+    "$type": "color",
+    "$value": "hsl(0 0% 0%)",
+    "filePath": "src/component/utrecht/nav-bar.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css-property-syntax": "<color>",
+        "nl.nldesignsystem.figma-implementation": false
+      },
+      "$type": "color",
+      "$value": "{utrecht.color.black}",
+      "key": "{utrecht.nav-bar.content.color}"
+    },
+    "name": "utrechtNavBarContentColor",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "nav-bar",
+      "content",
+      "color"
+    ]
+  },
   {
     "key": "{utrecht.nav-bar.content.max-inline-size}",
     "$extensions": {

package/dist/dark/list.mjs

@@ -20465,6 +20465,116 @@ export default [
       "color"
     ]
   },
+  {
+    "key": "{utrecht.nav-bar.background-color}",
+    "$extensions": {
+      "nl.nldesignsystem.css-property-syntax": "<color>",
+      "nl.nldesignsystem.figma-implementation": false
+    },
+    "$type": "color",
+    "$value": "transparent",
+    "filePath": "src/component/utrecht/nav-bar.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css-property-syntax": "<color>",
+        "nl.nldesignsystem.figma-implementation": false
+      },
+      "$type": "color",
+      "$value": "transparent",
+      "key": "{utrecht.nav-bar.background-color}"
+    },
+    "name": "utrechtNavBarBackgroundColor",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "nav-bar",
+      "background-color"
+    ]
+  },
+  {
+    "key": "{utrecht.nav-bar.color}",
+    "$extensions": {
+      "nl.nldesignsystem.css-property-syntax": "<color>",
+      "nl.nldesignsystem.figma-implementation": false
+    },
+    "$type": "color",
+    "$value": "transparent",
+    "filePath": "src/component/utrecht/nav-bar.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css-property-syntax": "<color>",
+        "nl.nldesignsystem.figma-implementation": false
+      },
+      "$type": "color",
+      "$value": "transparent",
+      "key": "{utrecht.nav-bar.color}"
+    },
+    "name": "utrechtNavBarColor",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "nav-bar",
+      "color"
+    ]
+  },
+  {
+    "key": "{utrecht.nav-bar.content.background-color}",
+    "$extensions": {
+      "nl.nldesignsystem.css-property-syntax": "<color>",
+      "nl.nldesignsystem.figma-implementation": false
+    },
+    "$type": "color",
+    "$value": "hsl(0 0% 100%)",
+    "filePath": "src/component/utrecht/nav-bar.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css-property-syntax": "<color>",
+        "nl.nldesignsystem.figma-implementation": false
+      },
+      "$type": "color",
+      "$value": "{utrecht.color.white}",
+      "key": "{utrecht.nav-bar.content.background-color}"
+    },
+    "name": "utrechtNavBarContentBackgroundColor",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "nav-bar",
+      "content",
+      "background-color"
+    ]
+  },
+  {
+    "key": "{utrecht.nav-bar.content.color}",
+    "$extensions": {
+      "nl.nldesignsystem.css-property-syntax": "<color>",
+      "nl.nldesignsystem.figma-implementation": false
+    },
+    "$type": "color",
+    "$value": "hsl(0 0% 0%)",
+    "filePath": "src/component/utrecht/nav-bar.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css-property-syntax": "<color>",
+        "nl.nldesignsystem.figma-implementation": false
+      },
+      "$type": "color",
+      "$value": "{utrecht.color.black}",
+      "key": "{utrecht.nav-bar.content.color}"
+    },
+    "name": "utrechtNavBarContentColor",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "nav-bar",
+      "content",
+      "color"
+    ]
+  },
   {
     "key": "{utrecht.nav-bar.content.max-inline-size}",
     "$extensions": {

package/dist/dark/property.css

@@ -488,6 +488,10 @@
 @property --utrecht-mapcontrolbutton-min-inline-size { syntax: '<length>'; inherits: true; }
 @property --utrecht-mark-background-color { syntax: '<color>'; inherits: true; }
 @property --utrecht-mark-color { syntax: '<color>'; inherits: true; }
+@property --utrecht-nav-bar-background-color { syntax: '<color>'; inherits: true; }
+@property --utrecht-nav-bar-color { syntax: '<color>'; inherits: true; }
+@property --utrecht-nav-bar-content-background-color { syntax: '<color>'; inherits: true; }
+@property --utrecht-nav-bar-content-color { syntax: '<color>'; inherits: true; }
 @property --utrecht-nav-bar-content-max-inline-size { syntax: '<length>'; inherits: true; }
 @property --utrecht-nav-bar-link-padding-block-end { syntax: '<length>'; inherits: true; }
 @property --utrecht-nav-bar-link-padding-block-start { syntax: '<length>'; inherits: true; }

package/dist/dark/root.css

@@ -244,6 +244,8 @@
   --utrecht-mapcontrolbutton-focus-text-decoration: none;
   --utrecht-mapcontrolbutton-margin-inline-end: 0;
   --utrecht-mapcontrolbutton-margin-inline-start: 0;
+  --utrecht-nav-bar-background-color: transparent;
+  --utrecht-nav-bar-color: transparent;
   --utrecht-navigation-border-block-end-color: transparent;
   --utrecht-navigation-border-block-end-width: 0;
   --utrecht-navigation-border-block-start-color: transparent;
@@ -911,6 +913,8 @@
   --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
   --utrecht-menulijst-item-color: var(--utrecht-color-blue-35);
   --utrecht-menulijst-item-hover-color: var(--utrecht-color-blue-40);
+  --utrecht-nav-bar-content-background-color: var(--utrecht-color-white);
+  --utrecht-nav-bar-content-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);

package/dist/dark/theme-prince-xml.css

@@ -225,6 +225,8 @@
   --utrecht-mapcontrolbutton-focus-text-decoration: none;
   --utrecht-mapcontrolbutton-margin-inline-end: 0;
   --utrecht-mapcontrolbutton-margin-inline-start: 0;
+  --utrecht-nav-bar-background-color: transparent;
+  --utrecht-nav-bar-color: transparent;
   --utrecht-topnav-link-focus-border-type: dotted;
   --utrecht-topnav-link-focus-text-decoration: none;
   --utrecht-navigation-border-block-end-color: transparent;
@@ -822,6 +824,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-content-background-color: var(--utrecht-color-white);
+  --utrecht-nav-bar-content-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);

package/dist/dark/theme.css

@@ -244,6 +244,8 @@
   --utrecht-mapcontrolbutton-focus-text-decoration: none;
   --utrecht-mapcontrolbutton-margin-inline-end: 0;
   --utrecht-mapcontrolbutton-margin-inline-start: 0;
+  --utrecht-nav-bar-background-color: transparent;
+  --utrecht-nav-bar-color: transparent;
   --utrecht-navigation-border-block-end-color: transparent;
   --utrecht-navigation-border-block-end-width: 0;
   --utrecht-navigation-border-block-start-color: transparent;
@@ -911,6 +913,8 @@
   --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
   --utrecht-menulijst-item-color: var(--utrecht-color-blue-35);
   --utrecht-menulijst-item-hover-color: var(--utrecht-color-blue-40);
+  --utrecht-nav-bar-content-background-color: var(--utrecht-color-white);
+  --utrecht-nav-bar-content-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);