@utrecht/design-tokens 6.1.1 → 6.2.1

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": {
@@ -23630,10 +23686,20 @@
   },
   {
     "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}"
     },
@@ -23647,10 +23713,20 @@
   },
   {
     "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}"
     },
@@ -23664,10 +23740,20 @@
   },
   {
     "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}"
     },
@@ -23681,10 +23767,20 @@
   },
   {
     "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}"
     },
@@ -23934,10 +24030,20 @@
   },
   {
     "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}"
     },
@@ -24082,10 +24188,20 @@
   },
   {
     "key": "{utrecht.page-header.content.padding-inline}",
+    "$extensions": {
+      "nl.nldesignsystem.css-property-syntax": "<length>",
+      "nl.nldesignsystem.figma-implementation": false
+    },
+    "$type": "dimension",
     "$value": "2em",
     "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": "2em",
       "key": "{utrecht.page-header.content.padding-inline}"
     },
@@ -24100,21 +24216,11 @@
   },
   {
     "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}"
@@ -24130,21 +24236,11 @@
   },
   {
     "key": "{utrecht.page-header.content.padding-inline-start}",
-    "$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": {
-      "$extensions": {
-        "nl.nldesignsystem.css-property-syntax": "<length>",
-        "nl.nldesignsystem.figma-implementation": false
-      },
-      "$type": "dimension",
       "$value": "2em",
       "$comment": "Legacy design token",
       "key": "{utrecht.page-header.content.padding-inline-start}"

package/dist/index.mjs

@@ -457,6 +457,7 @@ export const utrechtSpaceColumn2xl = "28px"; // Extra Large 2
 export const utrechtSpaceColumn3xl = "32px"; // Extra Large 3
 export const utrechtSpaceColumn4xl = "48px"; // Extra Large 4
 export const utrechtSpaceColumn5xl = "64px"; // Extra Large 5
+export const utrechtTextboxBorderBottomWidth = "3px";
 export const utrechtDataListMarginBlockEnd = "16px";
 export const utrechtDataListMarginBlockStart = "16px";
 export const utrechtDataListItemKeyFontWeight = "700";
@@ -731,8 +732,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";
@@ -833,6 +836,10 @@ export const utrechtOrderedListPaddingInlineStart = "28.8px";
 export const utrechtOrderedListItemMarginBlockStart = "0.25em";
 export const utrechtOrderedListItemMarginBlockEnd = "0.25em";
 export const utrechtOrderedListItemPaddingInlineStart = "0";
+export const utrechtPageBodyPaddingBlockStart = "0";
+export const utrechtPageBodyPaddingBlockEnd = "0";
+export const utrechtPageBodyPaddingInlineStart = "0";
+export const utrechtPageBodyPaddingInlineEnd = "0";
 export const utrechtPageBodyContentBackgroundColor = "hsl(0 0% 100%)";
 export const utrechtPageBodyContentColor = "hsl(0 0% 0%)";
 export const utrechtPageBodyContentPaddingBlockStart = "0";
@@ -840,20 +847,16 @@ export const utrechtPageBodyContentPaddingBlockEnd = "1em";
 export const utrechtPageBodyContentPaddingInlineStart = "2em";
 export const utrechtPageBodyContentPaddingInlineEnd = "2.4em";
 export const utrechtPageBodyContentMaxInlineSize = "1184px";
-export const utrechtPageBodyPaddingInlineEnd = "0";
-export const utrechtPageBodyPaddingInlineStart = "0";
-export const utrechtPageBodyPaddingBlockEnd = "0";
-export const utrechtPageBodyPaddingBlockStart = "0";
 export const utrechtPageContentPaddingBlockStart = "2em";
 export const utrechtPageContentPaddingBlockEnd = "2em";
 export const utrechtPageFooterColor = "hsl(0 0% 100%)";
 export const utrechtPageFooterBackgroundColor = "hsl(0 100% 40%)";
 export const utrechtPageFooterBackgroundImage =
   "linear-gradient(45deg, hsl(0 100% 40%), hsl(0 100% 40%) 50%, #d63433 50%);";
+export const utrechtPageFooterContentPaddingInline = "28px";
 export const utrechtPageFooterContentPaddingBlockEnd = "48px";
 export const utrechtPageFooterContentPaddingBlockStart = "48px";
 export const utrechtPageFooterContentMaxInlineSize = "1184px";
-export const utrechtPageFooterContentPaddingInline = "28px";
 export const utrechtPageHeaderPaddingBlockStart = "0";
 export const utrechtPageHeaderPaddingBlockEnd = "0";
 export const utrechtPageHeaderPaddingInlineStart = "0";
@@ -862,10 +865,10 @@ export const utrechtPageHeaderContentBackgroundColor = "hsl(0 0% 100%)";
 export const utrechtPageHeaderContentColor = "hsl(0 0% 0%)";
 export const utrechtPageHeaderContentPaddingBlockStart = "1.8em";
 export const utrechtPageHeaderContentPaddingBlockEnd = "1em";
-export const utrechtPageHeaderContentPaddingInlineStart = "2em";
-export const utrechtPageHeaderContentPaddingInlineEnd = "2.4em";
-export const utrechtPageHeaderContentMaxInlineSize = "1184px";
 export const utrechtPageHeaderContentPaddingInline = "2em";
+export const utrechtPageHeaderContentMaxInlineSize = "1184px";
+export const utrechtPageHeaderContentPaddingInlineEnd = "2.4em";
+export const utrechtPageHeaderContentPaddingInlineStart = "2em";
 export const utrechtPageBackgroundColor = "hsl(0 0% 100%)";
 export const utrechtPageColor = "hsl(0 0% 0%)";
 export const utrechtPageMarginInlineStart = "2em";
@@ -1083,7 +1086,6 @@ export const utrechtTableRowAlternateEvenColor = "hsl(0 0% 0%)";
 export const utrechtTextareaBorderBlockEndWidth = "3px";
 export const utrechtTextareaBorderBottomWidth = "3px";
 export const utrechtTextareaLineHeight = "1.5";
-export const utrechtTextboxBorderBottomWidth = "3px";
 export const utrechtTooltipBackgroundColor = "hsl(0 0% 100%)";
 export const utrechtTooltipBorderColor = "hsl(0 0% 40%)";
 export const utrechtTooltipBorderRadius = "0";

package/dist/index.tokens.json

@@ -735,6 +735,9 @@
         "5xl": "64px"
       }
     },
+    "textbox": {
+      "border-bottom-width": "3px"
+    },
     "data-list": {
       "margin-block-end": "16px",
       "margin-block-start": "16px",
@@ -1213,9 +1216,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": {
@@ -1396,6 +1401,10 @@
       }
     },
     "page-body": {
+      "padding-block-start": "0",
+      "padding-block-end": "0",
+      "padding-inline-start": "0",
+      "padding-inline-end": "0",
       "content": {
         "background-color": "hsl(0 0% 100%)",
         "color": "hsl(0 0% 0%)",
@@ -1404,11 +1413,7 @@
         "padding-inline-start": "2em",
         "padding-inline-end": "2.4em",
         "max-inline-size": "1184px"
-      },
-      "padding-inline-end": "0",
-      "padding-inline-start": "0",
-      "padding-block-end": "0",
-      "padding-block-start": "0"
+      }
     },
     "page-content": {
       "padding-block-start": "2em",
@@ -1419,10 +1424,10 @@
       "background-color": "hsl(0 100% 40%)",
       "background-image": "linear-gradient(45deg, hsl(0 100% 40%), hsl(0 100% 40%) 50%, #d63433 50%);",
       "content": {
+        "padding-inline": "28px",
         "padding-block-end": "48px",
         "padding-block-start": "48px",
-        "max-inline-size": "1184px",
-        "padding-inline": "28px"
+        "max-inline-size": "1184px"
       }
     },
     "page-header": {
@@ -1435,10 +1440,10 @@
         "color": "hsl(0 0% 0%)",
         "padding-block-start": "1.8em",
         "padding-block-end": "1em",
-        "padding-inline-start": "2em",
-        "padding-inline-end": "2.4em",
+        "padding-inline": "2em",
         "max-inline-size": "1184px",
-        "padding-inline": "2em"
+        "padding-inline-end": "2.4em",
+        "padding-inline-start": "2em"
       }
     },
     "page": {
@@ -1799,9 +1804,6 @@
       "border-bottom-width": "3px",
       "line-height": "1.5"
     },
-    "textbox": {
-      "border-bottom-width": "3px"
-    },
     "tooltip": {
       "background-color": "hsl(0 0% 100%)",
       "border-color": "hsl(0 0% 40%)",