@utrecht/design-tokens 6.1.0 → 6.2.0

package/dist/list.mjs

@@ -21128,6 +21128,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/property.css

@@ -547,6 +547,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/root.css

@@ -242,6 +242,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;
@@ -912,6 +914,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/theme-prince-xml.css

@@ -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/theme.css

@@ -242,6 +242,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;
@@ -912,6 +914,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/tokens.cjs

@@ -16671,7 +16671,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/tokens.d.ts

@@ -1229,7 +1229,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/tokens.json

@@ -19538,7 +19538,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/variables.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/variables.css

@@ -242,6 +242,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;
@@ -912,6 +914,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/variables.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/variables.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/variables.less

@@ -221,6 +221,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;
@@ -821,6 +823,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/variables.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/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "6.1.0",
+  "version": "6.2.0",
   "author": "Community for NL Design System",
   "description": "Design Tokens for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "SEE LICENSE IN ./LICENSE.md",
@@ -33,7 +33,7 @@
     "@fontsource-variable/noto-sans": "5.2.10"
   },
   "scripts": {
-    "build": "pnpm run build:style-dictionary:default && pnpm run build:style-dictionary:dark && pnpm run build:scss && pnpm run build:ts",
+    "build": "pnpm run clean && pnpm run build:style-dictionary:default && pnpm run build:style-dictionary:dark && pnpm run build:scss && pnpm run build:ts",
     "build:scss": "sass --no-source-map src/:dist/",
     "build:ts": "tsc src/font-family.ts --outDir dist --target es2020 --module esnext --moduleResolution node",
     "build:style-dictionary:default": "node ./style-dictionary-build.mjs",

package/src/component/utrecht/nav-bar.tokens.json

@@ -1,7 +1,19 @@
 {
   "utrecht": {
     "nav-bar": {
+      "background-color": {
+        "$value": "transparent"
+      },
+      "color": {
+        "$value": "transparent"
+      },
       "content": {
+        "background-color": {
+          "$value": "{utrecht.color.white}"
+        },
+        "color": {
+          "$value": "{utrecht.color.black}"
+        },
         "max-inline-size": { "$value": "{utrecht.page.max-inline-size}" }
       },
       "link": {