@utrecht/design-tokens 6.1.1 → 6.2.1

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,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/tokens.cjs

@@ -9932,6 +9932,31 @@ module.exports = {
         },
       },
     },
+    textbox: {
+      "border-bottom-width": {
+        key: "{utrecht.textbox.border-bottom-width}",
+        $extensions: {
+          "nl.nldesignsystem.css-property-syntax": "<length>",
+          "nl.nldesignsystem.deprecated": true,
+        },
+        $type: "dimension",
+        $value: "3px",
+        filePath: "src/component/utrecht/textbox.tokens.json",
+        isSource: true,
+        original: {
+          $extensions: {
+            "nl.nldesignsystem.css-property-syntax": "<length>",
+            "nl.nldesignsystem.deprecated": true,
+          },
+          $type: "dimension",
+          $value: "3px",
+          key: "{utrecht.textbox.border-bottom-width}",
+        },
+        name: "border-bottom-width",
+        attributes: {},
+        path: ["utrecht", "textbox", "border-bottom-width"],
+      },
+    },
     "data-list": {
       "margin-block-end": {
         key: "{utrecht.data-list.margin-block-end}",
@@ -16091,7 +16116,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 +16125,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 +16139,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 +16148,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 +16156,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: {
@@ -18443,6 +18514,98 @@ module.exports = {
       },
     },
     "page-body": {
+      "padding-block-start": {
+        key: "{utrecht.page-body.padding-block-start}",
+        $extensions: {
+          "nl.nldesignsystem.css-property-syntax": "<length>",
+          "nl.nldesignsystem.figma-implementation": false,
+        },
+        $type: "dimension",
+        $value: "0",
+        filePath: "src/component/utrecht/page-body.tokens.json",
+        isSource: true,
+        original: {
+          $extensions: {
+            "nl.nldesignsystem.css-property-syntax": "<length>",
+            "nl.nldesignsystem.figma-implementation": false,
+          },
+          $type: "dimension",
+          $value: "0",
+          key: "{utrecht.page-body.padding-block-start}",
+        },
+        name: "padding-block-start",
+        attributes: {},
+        path: ["utrecht", "page-body", "padding-block-start"],
+      },
+      "padding-block-end": {
+        key: "{utrecht.page-body.padding-block-end}",
+        $extensions: {
+          "nl.nldesignsystem.css-property-syntax": "<length>",
+          "nl.nldesignsystem.figma-implementation": false,
+        },
+        $type: "dimension",
+        $value: "0",
+        filePath: "src/component/utrecht/page-body.tokens.json",
+        isSource: true,
+        original: {
+          $extensions: {
+            "nl.nldesignsystem.css-property-syntax": "<length>",
+            "nl.nldesignsystem.figma-implementation": false,
+          },
+          $type: "dimension",
+          $value: "0",
+          key: "{utrecht.page-body.padding-block-end}",
+        },
+        name: "padding-block-end",
+        attributes: {},
+        path: ["utrecht", "page-body", "padding-block-end"],
+      },
+      "padding-inline-start": {
+        key: "{utrecht.page-body.padding-inline-start}",
+        $extensions: {
+          "nl.nldesignsystem.css-property-syntax": "<length>",
+          "nl.nldesignsystem.figma-implementation": false,
+        },
+        $type: "dimension",
+        $value: "0",
+        filePath: "src/component/utrecht/page-body.tokens.json",
+        isSource: true,
+        original: {
+          $extensions: {
+            "nl.nldesignsystem.css-property-syntax": "<length>",
+            "nl.nldesignsystem.figma-implementation": false,
+          },
+          $type: "dimension",
+          $value: "0",
+          key: "{utrecht.page-body.padding-inline-start}",
+        },
+        name: "padding-inline-start",
+        attributes: {},
+        path: ["utrecht", "page-body", "padding-inline-start"],
+      },
+      "padding-inline-end": {
+        key: "{utrecht.page-body.padding-inline-end}",
+        $extensions: {
+          "nl.nldesignsystem.css-property-syntax": "<length>",
+          "nl.nldesignsystem.figma-implementation": false,
+        },
+        $type: "dimension",
+        $value: "0",
+        filePath: "src/component/utrecht/page-body.tokens.json",
+        isSource: true,
+        original: {
+          $extensions: {
+            "nl.nldesignsystem.css-property-syntax": "<length>",
+            "nl.nldesignsystem.figma-implementation": false,
+          },
+          $type: "dimension",
+          $value: "0",
+          key: "{utrecht.page-body.padding-inline-end}",
+        },
+        name: "padding-inline-end",
+        attributes: {},
+        path: ["utrecht", "page-body", "padding-inline-end"],
+      },
       content: {
         "background-color": {
           key: "{utrecht.page-body.content.background-color}",
@@ -18596,58 +18759,6 @@ module.exports = {
           path: ["utrecht", "page-body", "content", "max-inline-size"],
         },
       },
-      "padding-inline-end": {
-        key: "{utrecht.page-body.padding-inline-end}",
-        $value: "0",
-        filePath: "src/component/utrecht/page-body.tokens.json",
-        isSource: true,
-        original: {
-          $value: "0",
-          key: "{utrecht.page-body.padding-inline-end}",
-        },
-        name: "padding-inline-end",
-        attributes: {},
-        path: ["utrecht", "page-body", "padding-inline-end"],
-      },
-      "padding-inline-start": {
-        key: "{utrecht.page-body.padding-inline-start}",
-        $value: "0",
-        filePath: "src/component/utrecht/page-body.tokens.json",
-        isSource: true,
-        original: {
-          $value: "0",
-          key: "{utrecht.page-body.padding-inline-start}",
-        },
-        name: "padding-inline-start",
-        attributes: {},
-        path: ["utrecht", "page-body", "padding-inline-start"],
-      },
-      "padding-block-end": {
-        key: "{utrecht.page-body.padding-block-end}",
-        $value: "0",
-        filePath: "src/component/utrecht/page-body.tokens.json",
-        isSource: true,
-        original: {
-          $value: "0",
-          key: "{utrecht.page-body.padding-block-end}",
-        },
-        name: "padding-block-end",
-        attributes: {},
-        path: ["utrecht", "page-body", "padding-block-end"],
-      },
-      "padding-block-start": {
-        key: "{utrecht.page-body.padding-block-start}",
-        $value: "0",
-        filePath: "src/component/utrecht/page-body.tokens.json",
-        isSource: true,
-        original: {
-          $value: "0",
-          key: "{utrecht.page-body.padding-block-start}",
-        },
-        name: "padding-block-start",
-        attributes: {},
-        path: ["utrecht", "page-body", "padding-block-start"],
-      },
     },
     "page-content": {
       "padding-block-start": {
@@ -18770,6 +18881,29 @@ module.exports = {
         path: ["utrecht", "page-footer", "background-image"],
       },
       content: {
+        "padding-inline": {
+          key: "{utrecht.page-footer.content.padding-inline}",
+          $extensions: {
+            "nl.nldesignsystem.css-property-syntax": "<length>",
+            "nl.nldesignsystem.figma-implementation": false,
+          },
+          $type: "dimension",
+          $value: "28px",
+          filePath: "src/component/utrecht/page-footer.tokens.json",
+          isSource: true,
+          original: {
+            $extensions: {
+              "nl.nldesignsystem.css-property-syntax": "<length>",
+              "nl.nldesignsystem.figma-implementation": false,
+            },
+            $type: "dimension",
+            $value: "{utrecht.space.inline.2xl}",
+            key: "{utrecht.page-footer.content.padding-inline}",
+          },
+          name: "padding-inline",
+          attributes: {},
+          path: ["utrecht", "page-footer", "content", "padding-inline"],
+        },
         "padding-block-end": {
           key: "{utrecht.page-footer.content.padding-block-end}",
           $extensions: {
@@ -18829,19 +18963,6 @@ module.exports = {
           attributes: {},
           path: ["utrecht", "page-footer", "content", "max-inline-size"],
         },
-        "padding-inline": {
-          key: "{utrecht.page-footer.content.padding-inline}",
-          $value: "28px",
-          filePath: "src/component/utrecht/page-footer.tokens.json",
-          isSource: true,
-          original: {
-            $value: "{utrecht.space.inline.2xl}",
-            key: "{utrecht.page-footer.content.padding-inline}",
-          },
-          name: "padding-inline",
-          attributes: {},
-          path: ["utrecht", "page-footer", "content", "padding-inline"],
-        },
       },
     },
     "page-header": {
@@ -19030,15 +19151,14 @@ module.exports = {
           attributes: {},
           path: ["utrecht", "page-header", "content", "padding-block-end"],
         },
-        "padding-inline-start": {
-          key: "{utrecht.page-header.content.padding-inline-start}",
+        "padding-inline": {
+          key: "{utrecht.page-header.content.padding-inline}",
           $extensions: {
             "nl.nldesignsystem.css-property-syntax": "<length>",
             "nl.nldesignsystem.figma-implementation": false,
           },
           $type: "dimension",
           $value: "2em",
-          $comment: "Legacy design token",
           filePath: "src/component/utrecht/page-header.tokens.json",
           isSource: true,
           original: {
@@ -19048,30 +19168,32 @@ module.exports = {
             },
             $type: "dimension",
             $value: "2em",
-            $comment: "Legacy design token",
-            key: "{utrecht.page-header.content.padding-inline-start}",
+            key: "{utrecht.page-header.content.padding-inline}",
           },
-          name: "padding-inline-start",
+          name: "padding-inline",
           attributes: {},
-          path: ["utrecht", "page-header", "content", "padding-inline-start"],
+          path: ["utrecht", "page-header", "content", "padding-inline"],
+        },
+        "max-inline-size": {
+          key: "{utrecht.page-header.content.max-inline-size}",
+          $value: "1184px",
+          filePath: "src/component/utrecht/page-header.tokens.json",
+          isSource: true,
+          original: {
+            $value: "1184px",
+            key: "{utrecht.page-header.content.max-inline-size}",
+          },
+          name: "max-inline-size",
+          attributes: {},
+          path: ["utrecht", "page-header", "content", "max-inline-size"],
         },
         "padding-inline-end": {
           key: "{utrecht.page-header.content.padding-inline-end}",
-          $extensions: {
-            "nl.nldesignsystem.css-property-syntax": "<length>",
-            "nl.nldesignsystem.figma-implementation": false,
-          },
-          $type: "dimension",
           $value: "2.4em",
           $comment: "Legacy design token",
           filePath: "src/component/utrecht/page-header.tokens.json",
           isSource: true,
           original: {
-            $extensions: {
-              "nl.nldesignsystem.css-property-syntax": "<length>",
-              "nl.nldesignsystem.figma-implementation": false,
-            },
-            $type: "dimension",
             $value: "2.4em",
             $comment: "Legacy design token",
             key: "{utrecht.page-header.content.padding-inline-end}",
@@ -19080,31 +19202,20 @@ module.exports = {
           attributes: {},
           path: ["utrecht", "page-header", "content", "padding-inline-end"],
         },
-        "max-inline-size": {
-          key: "{utrecht.page-header.content.max-inline-size}",
-          $value: "1184px",
-          filePath: "src/component/utrecht/page-header.tokens.json",
-          isSource: true,
-          original: {
-            $value: "1184px",
-            key: "{utrecht.page-header.content.max-inline-size}",
-          },
-          name: "max-inline-size",
-          attributes: {},
-          path: ["utrecht", "page-header", "content", "max-inline-size"],
-        },
-        "padding-inline": {
-          key: "{utrecht.page-header.content.padding-inline}",
+        "padding-inline-start": {
+          key: "{utrecht.page-header.content.padding-inline-start}",
           $value: "2em",
+          $comment: "Legacy design token",
           filePath: "src/component/utrecht/page-header.tokens.json",
           isSource: true,
           original: {
             $value: "2em",
-            key: "{utrecht.page-header.content.padding-inline}",
+            $comment: "Legacy design token",
+            key: "{utrecht.page-header.content.padding-inline-start}",
           },
-          name: "padding-inline",
+          name: "padding-inline-start",
           attributes: {},
-          path: ["utrecht", "page-header", "content", "padding-inline"],
+          path: ["utrecht", "page-header", "content", "padding-inline-start"],
         },
       },
     },
@@ -24013,31 +24124,6 @@ module.exports = {
         path: ["utrecht", "textarea", "line-height"],
       },
     },
-    textbox: {
-      "border-bottom-width": {
-        key: "{utrecht.textbox.border-bottom-width}",
-        $extensions: {
-          "nl.nldesignsystem.css-property-syntax": "<length>",
-          "nl.nldesignsystem.deprecated": true,
-        },
-        $type: "dimension",
-        $value: "3px",
-        filePath: "src/component/utrecht/textbox.tokens.json",
-        isSource: true,
-        original: {
-          $extensions: {
-            "nl.nldesignsystem.css-property-syntax": "<length>",
-            "nl.nldesignsystem.deprecated": true,
-          },
-          $type: "dimension",
-          $value: "3px",
-          key: "{utrecht.textbox.border-bottom-width}",
-        },
-        name: "border-bottom-width",
-        attributes: {},
-        path: ["utrecht", "textbox", "border-bottom-width"],
-      },
-    },
     tooltip: {
       "background-color": {
         key: "{utrecht.tooltip.background-color}",

package/dist/dark/tokens.d.ts

@@ -762,6 +762,9 @@ declare const tokens: {
         "5xl": DesignToken;
       };
     };
+    textbox: {
+      "border-bottom-width": DesignToken;
+    };
     "data-list": {
       "margin-block-end": DesignToken;
       "margin-block-start": DesignToken;
@@ -1243,6 +1246,8 @@ declare const tokens: {
       "background-color": DesignToken;
       color: DesignToken;
       content: {
+        "background-color": DesignToken;
+        color: DesignToken;
         "max-inline-size": DesignToken;
       };
       link: {
@@ -1423,6 +1428,10 @@ declare const tokens: {
       };
     };
     "page-body": {
+      "padding-block-start": DesignToken;
+      "padding-block-end": DesignToken;
+      "padding-inline-start": DesignToken;
+      "padding-inline-end": DesignToken;
       content: {
         "background-color": DesignToken;
         color: DesignToken;
@@ -1432,10 +1441,6 @@ declare const tokens: {
         "padding-inline-end": DesignToken;
         "max-inline-size": DesignToken;
       };
-      "padding-inline-end": DesignToken;
-      "padding-inline-start": DesignToken;
-      "padding-block-end": DesignToken;
-      "padding-block-start": DesignToken;
     };
     "page-content": {
       "padding-block-start": DesignToken;
@@ -1446,10 +1451,10 @@ declare const tokens: {
       "background-color": DesignToken;
       "background-image": DesignToken;
       content: {
+        "padding-inline": DesignToken;
         "padding-block-end": DesignToken;
         "padding-block-start": DesignToken;
         "max-inline-size": DesignToken;
-        "padding-inline": DesignToken;
       };
     };
     "page-header": {
@@ -1462,10 +1467,10 @@ declare const tokens: {
         color: DesignToken;
         "padding-block-start": DesignToken;
         "padding-block-end": DesignToken;
-        "padding-inline-start": DesignToken;
-        "padding-inline-end": DesignToken;
-        "max-inline-size": DesignToken;
         "padding-inline": DesignToken;
+        "max-inline-size": DesignToken;
+        "padding-inline-end": DesignToken;
+        "padding-inline-start": DesignToken;
       };
     };
     page: {
@@ -1828,9 +1833,6 @@ declare const tokens: {
       "border-bottom-width": DesignToken;
       "line-height": DesignToken;
     };
-    textbox: {
-      "border-bottom-width": DesignToken;
-    };
     tooltip: {
       "background-color": DesignToken;
       "border-color": DesignToken;