@utrecht/design-tokens 6.1.0 → 6.2.0

package/dist/dark/tokens.cjs

@@ -16084,7 +16084,99 @@ module.exports = {
       },
     },
     "nav-bar": {
+      "background-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: "background-color",
+        attributes: {},
+        path: ["utrecht", "nav-bar", "background-color"],
+      },
+      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: "color",
+        attributes: {},
+        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

@@ -1240,7 +1240,11 @@ declare const tokens: {
       color: DesignToken;
     };
     "nav-bar": {
+      "background-color": DesignToken;
+      color: DesignToken;
       content: {
+        "background-color": DesignToken;
+        color: DesignToken;
         "max-inline-size": DesignToken;
       };
       link: {

package/dist/dark/tokens.json

@@ -18877,7 +18877,117 @@
       }
     },
     "nav-bar": {
+      "background-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"
+        ]
+      },
+      "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"
+        ]
+      },
       "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,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/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,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/variables.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/variables.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/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,6 +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-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,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/index.cjs

@@ -681,6 +681,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/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,6 +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-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);
@@ -1540,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;
@@ -2137,6 +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-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

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

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

@@ -21128,6 +21128,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/index.mjs

@@ -731,6 +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 = "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,7 +1213,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/list.json

@@ -21128,6 +21128,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": {