@utrecht/design-tokens 6.1.1 → 6.2.1

package/dist/tokens.json

@@ -12020,6 +12020,35 @@
         }
       }
     },
+    "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": "utrechtTextboxBorderBottomWidth",
+        "attributes": {},
+        "path": [
+          "utrecht",
+          "textbox",
+          "border-bottom-width"
+        ]
+      }
+    },
     "data-list": {
       "margin-block-end": {
         "key": "{utrecht.data-list.margin-block-end}",
@@ -19545,7 +19574,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": {
@@ -19554,7 +19583,7 @@
             "nl.nldesignsystem.figma-implementation": false
           },
           "$type": "color",
-          "$value": "{utrecht.color.white}",
+          "$value": "transparent",
           "key": "{utrecht.nav-bar.background-color}"
         },
         "name": "utrechtNavBarBackgroundColor",
@@ -19572,7 +19601,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": {
@@ -19581,7 +19610,7 @@
             "nl.nldesignsystem.figma-implementation": false
           },
           "$type": "color",
-          "$value": "{utrecht.color.black}",
+          "$value": "transparent",
           "key": "{utrecht.nav-bar.color}"
         },
         "name": "utrechtNavBarColor",
@@ -19593,6 +19622,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": {
@@ -22279,6 +22364,114 @@
       }
     },
     "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": "utrechtPageBodyPaddingBlockStart",
+        "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": "utrechtPageBodyPaddingBlockEnd",
+        "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": "utrechtPageBodyPaddingInlineStart",
+        "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": "utrechtPageBodyPaddingInlineEnd",
+        "attributes": {},
+        "path": [
+          "utrecht",
+          "page-body",
+          "padding-inline-end"
+        ]
+      },
       "content": {
         "background-color": {
           "key": "{utrecht.page-body.content.background-color}",
@@ -22466,74 +22659,6 @@
             "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": "utrechtPageBodyPaddingInlineEnd",
-        "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": "utrechtPageBodyPaddingInlineStart",
-        "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": "utrechtPageBodyPaddingBlockEnd",
-        "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": "utrechtPageBodyPaddingBlockStart",
-        "attributes": {},
-        "path": [
-          "utrecht",
-          "page-body",
-          "padding-block-start"
-        ]
       }
     },
     "page-content": {
@@ -22675,6 +22800,34 @@
         ]
       },
       "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": "utrechtPageFooterContentPaddingInline",
+          "attributes": {},
+          "path": [
+            "utrecht",
+            "page-footer",
+            "content",
+            "padding-inline"
+          ]
+        },
         "padding-block-end": {
           "key": "{utrecht.page-footer.content.padding-block-end}",
           "$extensions": {
@@ -22748,24 +22901,6 @@
             "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": "utrechtPageFooterContentPaddingInline",
-          "attributes": {},
-          "path": [
-            "utrecht",
-            "page-footer",
-            "content",
-            "padding-inline"
-          ]
         }
       }
     },
@@ -22991,15 +23126,14 @@
             "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": {
@@ -23009,82 +23143,73 @@
             },
             "$type": "dimension",
             "$value": "2em",
-            "$comment": "Legacy design token",
-            "key": "{utrecht.page-header.content.padding-inline-start}"
+            "key": "{utrecht.page-header.content.padding-inline}"
           },
-          "name": "utrechtPageHeaderContentPaddingInlineStart",
+          "name": "utrechtPageHeaderContentPaddingInline",
           "attributes": {},
           "path": [
             "utrecht",
             "page-header",
             "content",
-            "padding-inline-start"
+            "padding-inline"
           ]
         },
-        "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",
+        "max-inline-size": {
+          "key": "{utrecht.page-header.content.max-inline-size}",
+          "$value": "1184px",
           "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}"
+            "$value": "1184px",
+            "key": "{utrecht.page-header.content.max-inline-size}"
           },
-          "name": "utrechtPageHeaderContentPaddingInlineEnd",
+          "name": "utrechtPageHeaderContentMaxInlineSize",
           "attributes": {},
           "path": [
             "utrecht",
             "page-header",
             "content",
-            "padding-inline-end"
+            "max-inline-size"
           ]
         },
-        "max-inline-size": {
-          "key": "{utrecht.page-header.content.max-inline-size}",
-          "$value": "1184px",
+        "padding-inline-end": {
+          "key": "{utrecht.page-header.content.padding-inline-end}",
+          "$value": "2.4em",
+          "$comment": "Legacy design token",
           "filePath": "src/component/utrecht/page-header.tokens.json",
           "isSource": true,
           "original": {
-            "$value": "1184px",
-            "key": "{utrecht.page-header.content.max-inline-size}"
+            "$value": "2.4em",
+            "$comment": "Legacy design token",
+            "key": "{utrecht.page-header.content.padding-inline-end}"
           },
-          "name": "utrechtPageHeaderContentMaxInlineSize",
+          "name": "utrechtPageHeaderContentPaddingInlineEnd",
           "attributes": {},
           "path": [
             "utrecht",
             "page-header",
             "content",
-            "max-inline-size"
+            "padding-inline-end"
           ]
         },
-        "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": "utrechtPageHeaderContentPaddingInline",
+          "name": "utrechtPageHeaderContentPaddingInlineStart",
           "attributes": {},
           "path": [
             "utrecht",
             "page-header",
             "content",
-            "padding-inline"
+            "padding-inline-start"
           ]
         }
       }
@@ -28957,35 +29082,6 @@
         ]
       }
     },
-    "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": "utrechtTextboxBorderBottomWidth",
-        "attributes": {},
-        "path": [
-          "utrecht",
-          "textbox",
-          "border-bottom-width"
-        ]
-      }
-    },
     "tooltip": {
       "background-color": {
         "key": "{utrecht.tooltip.background-color}",

package/dist/variables.cjs

@@ -418,6 +418,7 @@ module.exports = {
   utrechtSpaceColumn3xl: "32px",
   utrechtSpaceColumn4xl: "48px",
   utrechtSpaceColumn5xl: "64px",
+  utrechtTextboxBorderBottomWidth: "3px",
   utrechtDataListMarginBlockEnd: "16px",
   utrechtDataListMarginBlockStart: "16px",
   utrechtDataListItemKeyFontWeight: "700",
@@ -681,8 +682,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",
@@ -780,6 +783,10 @@ module.exports = {
   utrechtOrderedListItemMarginBlockStart: "0.25em",
   utrechtOrderedListItemMarginBlockEnd: "0.25em",
   utrechtOrderedListItemPaddingInlineStart: "0",
+  utrechtPageBodyPaddingBlockStart: "0",
+  utrechtPageBodyPaddingBlockEnd: "0",
+  utrechtPageBodyPaddingInlineStart: "0",
+  utrechtPageBodyPaddingInlineEnd: "0",
   utrechtPageBodyContentBackgroundColor: "hsl(0 0% 100%)",
   utrechtPageBodyContentColor: "hsl(0 0% 0%)",
   utrechtPageBodyContentPaddingBlockStart: "0",
@@ -787,20 +794,16 @@ module.exports = {
   utrechtPageBodyContentPaddingInlineStart: "2em",
   utrechtPageBodyContentPaddingInlineEnd: "2.4em",
   utrechtPageBodyContentMaxInlineSize: "1184px",
-  utrechtPageBodyPaddingInlineEnd: "0",
-  utrechtPageBodyPaddingInlineStart: "0",
-  utrechtPageBodyPaddingBlockEnd: "0",
-  utrechtPageBodyPaddingBlockStart: "0",
   utrechtPageContentPaddingBlockStart: "2em",
   utrechtPageContentPaddingBlockEnd: "2em",
   utrechtPageFooterColor: "hsl(0 0% 100%)",
   utrechtPageFooterBackgroundColor: "hsl(0 100% 40%)",
   utrechtPageFooterBackgroundImage:
     "linear-gradient(45deg, hsl(0 100% 40%), hsl(0 100% 40%) 50%, #d63433 50%);",
+  utrechtPageFooterContentPaddingInline: "28px",
   utrechtPageFooterContentPaddingBlockEnd: "48px",
   utrechtPageFooterContentPaddingBlockStart: "48px",
   utrechtPageFooterContentMaxInlineSize: "1184px",
-  utrechtPageFooterContentPaddingInline: "28px",
   utrechtPageHeaderPaddingBlockStart: "0",
   utrechtPageHeaderPaddingBlockEnd: "0",
   utrechtPageHeaderPaddingInlineStart: "0",
@@ -809,10 +812,10 @@ module.exports = {
   utrechtPageHeaderContentColor: "hsl(0 0% 0%)",
   utrechtPageHeaderContentPaddingBlockStart: "1.8em",
   utrechtPageHeaderContentPaddingBlockEnd: "1em",
-  utrechtPageHeaderContentPaddingInlineStart: "2em",
-  utrechtPageHeaderContentPaddingInlineEnd: "2.4em",
-  utrechtPageHeaderContentMaxInlineSize: "1184px",
   utrechtPageHeaderContentPaddingInline: "2em",
+  utrechtPageHeaderContentMaxInlineSize: "1184px",
+  utrechtPageHeaderContentPaddingInlineEnd: "2.4em",
+  utrechtPageHeaderContentPaddingInlineStart: "2em",
   utrechtPageBackgroundColor: "hsl(0 0% 100%)",
   utrechtPageColor: "hsl(0 0% 0%)",
   utrechtPageMarginInlineStart: "2em",
@@ -1023,7 +1026,6 @@ module.exports = {
   utrechtTextareaBorderBlockEndWidth: "3px",
   utrechtTextareaBorderBottomWidth: "3px",
   utrechtTextareaLineHeight: "1.5",
-  utrechtTextboxBorderBottomWidth: "3px",
   utrechtTooltipBackgroundColor: "hsl(0 0% 100%)",
   utrechtTooltipBorderColor: "hsl(0 0% 40%)",
   utrechtTooltipBorderRadius: "0",

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,8 +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-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);