@utrecht/design-tokens 6.1.1 → 6.2.0

package/dist/dark/tokens.cjs

@@ -16091,7 +16091,7 @@ module.exports = {
           "nl.nldesignsystem.figma-implementation": false,
         },
         $type: "color",
-        $value: "hsl(0 0% 100%)",
+        $value: "transparent",
         filePath: "src/component/utrecht/nav-bar.tokens.json",
         isSource: true,
         original: {
@@ -16100,7 +16100,7 @@ module.exports = {
             "nl.nldesignsystem.figma-implementation": false,
           },
           $type: "color",
-          $value: "{utrecht.color.white}",
+          $value: "transparent",
           key: "{utrecht.nav-bar.background-color}",
         },
         name: "background-color",
@@ -16114,7 +16114,7 @@ module.exports = {
           "nl.nldesignsystem.figma-implementation": false,
         },
         $type: "color",
-        $value: "hsl(0 0% 0%)",
+        $value: "transparent",
         filePath: "src/component/utrecht/nav-bar.tokens.json",
         isSource: true,
         original: {
@@ -16123,7 +16123,7 @@ module.exports = {
             "nl.nldesignsystem.figma-implementation": false,
           },
           $type: "color",
-          $value: "{utrecht.color.black}",
+          $value: "transparent",
           key: "{utrecht.nav-bar.color}",
         },
         name: "color",
@@ -16131,6 +16131,52 @@ module.exports = {
         path: ["utrecht", "nav-bar", "color"],
       },
       content: {
+        "background-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: "background-color",
+          attributes: {},
+          path: ["utrecht", "nav-bar", "content", "background-color"],
+        },
+        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: "color",
+          attributes: {},
+          path: ["utrecht", "nav-bar", "content", "color"],
+        },
         "max-inline-size": {
           key: "{utrecht.nav-bar.content.max-inline-size}",
           $extensions: {

package/dist/dark/tokens.d.ts

@@ -1243,6 +1243,8 @@ declare const tokens: {
       "background-color": DesignToken;
       color: DesignToken;
       content: {
+        "background-color": DesignToken;
+        color: DesignToken;
         "max-inline-size": DesignToken;
       };
       link: {

package/dist/dark/tokens.json

@@ -18884,7 +18884,7 @@
           "nl.nldesignsystem.figma-implementation": false
         },
         "$type": "color",
-        "$value": "hsl(0 0% 100%)",
+        "$value": "transparent",
         "filePath": "src/component/utrecht/nav-bar.tokens.json",
         "isSource": true,
         "original": {
@@ -18893,7 +18893,7 @@
             "nl.nldesignsystem.figma-implementation": false
           },
           "$type": "color",
-          "$value": "{utrecht.color.white}",
+          "$value": "transparent",
           "key": "{utrecht.nav-bar.background-color}"
         },
         "name": "utrechtNavBarBackgroundColor",
@@ -18911,7 +18911,7 @@
           "nl.nldesignsystem.figma-implementation": false
         },
         "$type": "color",
-        "$value": "hsl(0 0% 0%)",
+        "$value": "transparent",
         "filePath": "src/component/utrecht/nav-bar.tokens.json",
         "isSource": true,
         "original": {
@@ -18920,7 +18920,7 @@
             "nl.nldesignsystem.figma-implementation": false
           },
           "$type": "color",
-          "$value": "{utrecht.color.black}",
+          "$value": "transparent",
           "key": "{utrecht.nav-bar.color}"
         },
         "name": "utrechtNavBarColor",
@@ -18932,6 +18932,62 @@
         ]
       },
       "content": {
+        "background-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"
+          ]
+        },
+        "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"
+          ]
+        },
         "max-inline-size": {
           "key": "{utrecht.nav-bar.content.max-inline-size}",
           "$extensions": {

package/dist/dark/variables.cjs

@@ -690,8 +690,10 @@ module.exports = {
   utrechtMapcontrolbuttonPaddingInlineStart: "4px",
   utrechtMarkBackgroundColor: "hsl(48 100% 60%)",
   utrechtMarkColor: "hsl(0 0% 0%)",
-  utrechtNavBarBackgroundColor: "hsl(0 0% 100%)",
-  utrechtNavBarColor: "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/variables.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,8 +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-background-color: var(--utrecht-color-white);
-  --utrecht-nav-bar-color: var(--utrecht-color-black);
+  --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.d.ts

@@ -758,6 +758,8 @@ 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/variables.json

@@ -810,8 +810,10 @@
   "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%)",
+  "utrechtNavBarBackgroundColor": "transparent",
+  "utrechtNavBarColor": "transparent",
+  "utrechtNavBarContentBackgroundColor": "hsl(0 0% 100%)",
+  "utrechtNavBarContentColor": "hsl(0 0% 0%)",
   "utrechtNavBarContentMaxInlineSize": "1184px",
   "utrechtNavBarLinkPaddingBlockEnd": "8px",
   "utrechtNavBarLinkPaddingBlockStart": "8px",

package/dist/dark/variables.less

@@ -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;
@@ -820,8 +822,8 @@
 @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-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/variables.mjs

@@ -744,8 +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 = "hsl(0 0% 100%)";
-export const utrechtNavBarColor = "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/index.cjs

@@ -681,8 +681,10 @@ module.exports = {
   utrechtMapcontrolbuttonPaddingInlineStart: "4px",
   utrechtMarkBackgroundColor: "hsl(48 100% 60%)",
   utrechtMarkColor: "hsl(0 0% 0%)",
-  utrechtNavBarBackgroundColor: "hsl(0 0% 100%)",
-  utrechtNavBarColor: "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/index.css

@@ -251,6 +251,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;
@@ -851,8 +853,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-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);
@@ -1542,6 +1544,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;
@@ -2139,8 +2143,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-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/index.d.ts

@@ -749,6 +749,8 @@ 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/index.flat.json

@@ -801,8 +801,10 @@
   "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%)",
+  "utrechtNavBarBackgroundColor": "transparent",
+  "utrechtNavBarColor": "transparent",
+  "utrechtNavBarContentBackgroundColor": "hsl(0 0% 100%)",
+  "utrechtNavBarContentColor": "hsl(0 0% 0%)",
   "utrechtNavBarContentMaxInlineSize": "1184px",
   "utrechtNavBarLinkPaddingBlockEnd": "8px",
   "utrechtNavBarLinkPaddingBlockStart": "8px",

package/dist/index.json

@@ -21135,7 +21135,7 @@
       "nl.nldesignsystem.figma-implementation": false
     },
     "$type": "color",
-    "$value": "hsl(0 0% 100%)",
+    "$value": "transparent",
     "filePath": "src/component/utrecht/nav-bar.tokens.json",
     "isSource": true,
     "original": {
@@ -21144,7 +21144,7 @@
         "nl.nldesignsystem.figma-implementation": false
       },
       "$type": "color",
-      "$value": "{utrecht.color.white}",
+      "$value": "transparent",
       "key": "{utrecht.nav-bar.background-color}"
     },
     "name": "utrechtNavBarBackgroundColor",
@@ -21162,7 +21162,7 @@
       "nl.nldesignsystem.figma-implementation": false
     },
     "$type": "color",
-    "$value": "hsl(0 0% 0%)",
+    "$value": "transparent",
     "filePath": "src/component/utrecht/nav-bar.tokens.json",
     "isSource": true,
     "original": {
@@ -21171,7 +21171,7 @@
         "nl.nldesignsystem.figma-implementation": false
       },
       "$type": "color",
-      "$value": "{utrecht.color.black}",
+      "$value": "transparent",
       "key": "{utrecht.nav-bar.color}"
     },
     "name": "utrechtNavBarColor",
@@ -21182,6 +21182,62 @@
       "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/index.mjs

@@ -731,8 +731,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 = "hsl(0 0% 100%)";
-export const utrechtNavBarColor = "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/index.tokens.json

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

package/dist/list.json

@@ -21135,7 +21135,7 @@
       "nl.nldesignsystem.figma-implementation": false
     },
     "$type": "color",
-    "$value": "hsl(0 0% 100%)",
+    "$value": "transparent",
     "filePath": "src/component/utrecht/nav-bar.tokens.json",
     "isSource": true,
     "original": {
@@ -21144,7 +21144,7 @@
         "nl.nldesignsystem.figma-implementation": false
       },
       "$type": "color",
-      "$value": "{utrecht.color.white}",
+      "$value": "transparent",
       "key": "{utrecht.nav-bar.background-color}"
     },
     "name": "utrechtNavBarBackgroundColor",
@@ -21162,7 +21162,7 @@
       "nl.nldesignsystem.figma-implementation": false
     },
     "$type": "color",
-    "$value": "hsl(0 0% 0%)",
+    "$value": "transparent",
     "filePath": "src/component/utrecht/nav-bar.tokens.json",
     "isSource": true,
     "original": {
@@ -21171,7 +21171,7 @@
         "nl.nldesignsystem.figma-implementation": false
       },
       "$type": "color",
-      "$value": "{utrecht.color.black}",
+      "$value": "transparent",
       "key": "{utrecht.nav-bar.color}"
     },
     "name": "utrechtNavBarColor",
@@ -21182,6 +21182,62 @@
       "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": {