@rijkshuisstijl-community/design-tokens 1.0.0-alpha.45 → 1.0.0-alpha.46

package/dist/_variables.scss

@@ -1,7 +1,17 @@
 
 // Do not edit directly
-// Generated on Thu, 31 Oct 2024 14:38:45 GMT
+// Generated on Thu, 31 Oct 2024 15:37:43 GMT
 
+$rhc-sub-nav-bar-content-list-row-gap: 0.5rem;
+$rhc-sub-nav-bar-content-max-inline-size: 1280px;
+$rhc-sub-nav-bar-content-padding-inline-start: 1rem;
+$rhc-sub-nav-bar-content-padding-inline-end: 1rem;
+$rhc-sub-nav-bar-inline-size: 100%;
+$rhc-sub-nav-bar-padding-block-start: 2rem;
+$rhc-sub-nav-bar-padding-block-end: 2rem;
+$rhc-sub-nav-bar-column-width: 375px;
+$rhc-sub-nav-bar-column-gap: 0.5rem;
+$rhc-sub-nav-bar-background-color: #f2f4f6;
 $rhc-space-700: 3.5rem;
 $rhc-space-600: 3rem;
 $rhc-space-500: 2.5rem;
@@ -270,6 +280,9 @@ $rhc-page-footer-padding-block-start: 2.5rem;
 $rhc-page-footer-border-block-start-style: solid;
 $rhc-page-footer-border-block-start-color: #154273;
 $rhc-page-footer-border-block-start-width: 2px;
+$rhc-page-footer-content-padding-inline-end: 1rem;
+$rhc-page-footer-content-padding-inline-start: 1rem;
+$rhc-page-footer-content-max-inline-size: 1280px;
 $rhc-page-footer-column-title-margin-block-end: 0.75rem;
 $rhc-page-footer-column-width: 200px;
 $rhc-page-footer-column-gap: 1.5rem;
@@ -362,7 +375,9 @@ $rhc-nav-bar-icon-size: 24px;
 $rhc-nav-bar-icon-active-color: #fff;
 $rhc-nav-bar-icon-color: #154273;
 $rhc-nav-bar-content-column-gap: 1rem;
+$rhc-nav-bar-container-inline-size: 100%;
 $rhc-nav-bar-padding-inline: 1rem;
+$rhc-nav-bar-max-inline-size: 1280px;
 $rhc-nav-bar-border-block-end-width: 1px;
 $rhc-navigation-list-item-padding-inline: 1rem;
 $rhc-navigation-list-item-padding-block: 0.75rem;

package/dist/index.css

@@ -1,9 +1,19 @@
 /**
  * Do not edit directly
- * Generated on Thu, 31 Oct 2024 14:38:44 GMT
+ * Generated on Thu, 31 Oct 2024 15:37:43 GMT
  */
 
 .rhc-theme {
+  --rhc-sub-nav-bar-content-list-row-gap: 0.5rem;
+  --rhc-sub-nav-bar-content-max-inline-size: 1280px;
+  --rhc-sub-nav-bar-content-padding-inline-start: 1rem;
+  --rhc-sub-nav-bar-content-padding-inline-end: 1rem;
+  --rhc-sub-nav-bar-inline-size: 100%;
+  --rhc-sub-nav-bar-padding-block-start: 2rem;
+  --rhc-sub-nav-bar-padding-block-end: 2rem;
+  --rhc-sub-nav-bar-column-width: 375px;
+  --rhc-sub-nav-bar-column-gap: 0.5rem;
+  --rhc-sub-nav-bar-background-color: #f2f4f6;
   --rhc-space-700: 3.5rem;
   --rhc-space-600: 3rem;
   --rhc-space-500: 2.5rem;
@@ -272,6 +282,9 @@
   --rhc-page-footer-border-block-start-style: solid;
   --rhc-page-footer-border-block-start-color: #154273;
   --rhc-page-footer-border-block-start-width: 2px;
+  --rhc-page-footer-content-padding-inline-end: 1rem;
+  --rhc-page-footer-content-padding-inline-start: 1rem;
+  --rhc-page-footer-content-max-inline-size: 1280px;
   --rhc-page-footer-column-title-margin-block-end: 0.75rem;
   --rhc-page-footer-column-width: 200px;
   --rhc-page-footer-column-gap: 1.5rem;
@@ -364,7 +377,9 @@
   --rhc-nav-bar-icon-active-color: #fff;
   --rhc-nav-bar-icon-color: #154273;
   --rhc-nav-bar-content-column-gap: 1rem;
+  --rhc-nav-bar-container-inline-size: 100%;
   --rhc-nav-bar-padding-inline: 1rem;
+  --rhc-nav-bar-max-inline-size: 1280px;
   --rhc-nav-bar-border-block-end-width: 1px;
   --rhc-navigation-list-item-padding-inline: 1rem;
   --rhc-navigation-list-item-padding-block: 0.75rem;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 31 Oct 2024 14:38:45 GMT
+ * Generated on Thu, 31 Oct 2024 15:37:43 GMT
  */
 
 export const utrechtActionActivateCursor : string;
@@ -757,7 +757,9 @@ export const rhcNavigationListItemMinHeight : string;
 export const rhcNavigationListItemPaddingBlock : string;
 export const rhcNavigationListItemPaddingInline : string;
 export const rhcNavBarBorderBlockEndWidth : string;
+export const rhcNavBarMaxInlineSize : string;
 export const rhcNavBarPaddingInline : string;
+export const rhcNavBarContainerInlineSize : string;
 export const rhcNavBarContentColumnGap : string;
 export const rhcNavBarIconColor : string;
 export const rhcNavBarIconActiveColor : string;
@@ -850,6 +852,9 @@ export const rhcFormFieldCheckboxOptionMarginBlockEnd : number;
 export const rhcPageFooterColumnGap : string;
 export const rhcPageFooterColumnWidth : string;
 export const rhcPageFooterColumnTitleMarginBlockEnd : string;
+export const rhcPageFooterContentMaxInlineSize : string;
+export const rhcPageFooterContentPaddingInlineStart : string;
+export const rhcPageFooterContentPaddingInlineEnd : string;
 export const rhcPageFooterBorderBlockStartWidth : string;
 export const rhcPageFooterBorderBlockStartColor : string;
 export const rhcPageFooterBorderBlockStartStyle : string;
@@ -1118,3 +1123,13 @@ export const rhcSpace400 : string;
 export const rhcSpace500 : string;
 export const rhcSpace600 : string;
 export const rhcSpace700 : string;
+export const rhcSubNavBarBackgroundColor : string;
+export const rhcSubNavBarColumnGap : string;
+export const rhcSubNavBarColumnWidth : string;
+export const rhcSubNavBarPaddingBlockEnd : string;
+export const rhcSubNavBarPaddingBlockStart : string;
+export const rhcSubNavBarInlineSize : string;
+export const rhcSubNavBarContentPaddingInlineEnd : string;
+export const rhcSubNavBarContentPaddingInlineStart : string;
+export const rhcSubNavBarContentMaxInlineSize : string;
+export const rhcSubNavBarContentListRowGap : string;

package/dist/index.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 31 Oct 2024 14:38:44 GMT
+ * Generated on Thu, 31 Oct 2024 15:37:42 GMT
  */
 
 export const utrechtActionActivateCursor = "pointer";
@@ -756,7 +756,9 @@ export const rhcNavigationListItemMinHeight = "48px";
 export const rhcNavigationListItemPaddingBlock = "0.75rem";
 export const rhcNavigationListItemPaddingInline = "1rem";
 export const rhcNavBarBorderBlockEndWidth = "1px";
+export const rhcNavBarMaxInlineSize = "1280px";
 export const rhcNavBarPaddingInline = "1rem";
+export const rhcNavBarContainerInlineSize = "100%";
 export const rhcNavBarContentColumnGap = "1rem";
 export const rhcNavBarIconColor = "#154273";
 export const rhcNavBarIconActiveColor = "#fff";
@@ -849,6 +851,9 @@ export const rhcFormFieldCheckboxOptionMarginBlockEnd = 0;
 export const rhcPageFooterColumnGap = "1.5rem";
 export const rhcPageFooterColumnWidth = "200px";
 export const rhcPageFooterColumnTitleMarginBlockEnd = "0.75rem";
+export const rhcPageFooterContentMaxInlineSize = "1280px";
+export const rhcPageFooterContentPaddingInlineStart = "1rem";
+export const rhcPageFooterContentPaddingInlineEnd = "1rem";
 export const rhcPageFooterBorderBlockStartWidth = "2px";
 export const rhcPageFooterBorderBlockStartColor = "#154273";
 export const rhcPageFooterBorderBlockStartStyle = "solid";
@@ -1117,3 +1122,13 @@ export const rhcSpace400 = "2rem";
 export const rhcSpace500 = "2.5rem";
 export const rhcSpace600 = "3rem";
 export const rhcSpace700 = "3.5rem";
+export const rhcSubNavBarBackgroundColor = "#f2f4f6";
+export const rhcSubNavBarColumnGap = "0.5rem";
+export const rhcSubNavBarColumnWidth = "375px";
+export const rhcSubNavBarPaddingBlockEnd = "2rem";
+export const rhcSubNavBarPaddingBlockStart = "2rem";
+export const rhcSubNavBarInlineSize = "100%";
+export const rhcSubNavBarContentPaddingInlineEnd = "1rem";
+export const rhcSubNavBarContentPaddingInlineStart = "1rem";
+export const rhcSubNavBarContentMaxInlineSize = "1280px";
+export const rhcSubNavBarContentListRowGap = "0.5rem";

package/dist/index.json

@@ -752,7 +752,9 @@
   "rhcNavigationListItemPaddingBlock": "0.75rem",
   "rhcNavigationListItemPaddingInline": "1rem",
   "rhcNavBarBorderBlockEndWidth": "1px",
+  "rhcNavBarMaxInlineSize": "1280px",
   "rhcNavBarPaddingInline": "1rem",
+  "rhcNavBarContainerInlineSize": "100%",
   "rhcNavBarContentColumnGap": "1rem",
   "rhcNavBarIconColor": "#154273",
   "rhcNavBarIconActiveColor": "#fff",
@@ -845,6 +847,9 @@
   "rhcPageFooterColumnGap": "1.5rem",
   "rhcPageFooterColumnWidth": "200px",
   "rhcPageFooterColumnTitleMarginBlockEnd": "0.75rem",
+  "rhcPageFooterContentMaxInlineSize": "1280px",
+  "rhcPageFooterContentPaddingInlineStart": "1rem",
+  "rhcPageFooterContentPaddingInlineEnd": "1rem",
   "rhcPageFooterBorderBlockStartWidth": "2px",
   "rhcPageFooterBorderBlockStartColor": "#154273",
   "rhcPageFooterBorderBlockStartStyle": "solid",
@@ -1112,5 +1117,15 @@
   "rhcSpace400": "2rem",
   "rhcSpace500": "2.5rem",
   "rhcSpace600": "3rem",
-  "rhcSpace700": "3.5rem"
+  "rhcSpace700": "3.5rem",
+  "rhcSubNavBarBackgroundColor": "#f2f4f6",
+  "rhcSubNavBarColumnGap": "0.5rem",
+  "rhcSubNavBarColumnWidth": "375px",
+  "rhcSubNavBarPaddingBlockEnd": "2rem",
+  "rhcSubNavBarPaddingBlockStart": "2rem",
+  "rhcSubNavBarInlineSize": "100%",
+  "rhcSubNavBarContentPaddingInlineEnd": "1rem",
+  "rhcSubNavBarContentPaddingInlineStart": "1rem",
+  "rhcSubNavBarContentMaxInlineSize": "1280px",
+  "rhcSubNavBarContentListRowGap": "0.5rem"
 }

package/dist/index.tokens.json

@@ -1163,7 +1163,11 @@
     },
     "nav-bar": {
       "border-block-end-width": "1px",
+      "max-inline-size": "1280px",
       "padding-inline": "1rem",
+      "container": {
+        "inline-size": "100%"
+      },
       "content": {
         "column-gap": "1rem"
       },
@@ -1322,6 +1326,11 @@
           "margin-block-end": "0.75rem"
         }
       },
+      "content": {
+        "max-inline-size": "1280px",
+        "padding-inline-start": "1rem",
+        "padding-inline-end": "1rem"
+      },
       "border": {
         "block-start": {
           "width": "2px",
@@ -1726,6 +1735,22 @@
       "500": "2.5rem",
       "600": "3rem",
       "700": "3.5rem"
+    },
+    "sub-nav-bar": {
+      "background-color": "#f2f4f6",
+      "column-gap": "0.5rem",
+      "column-width": "375px",
+      "padding-block-end": "2rem",
+      "padding-block-start": "2rem",
+      "inline-size": "100%",
+      "content": {
+        "padding-inline-end": "1rem",
+        "padding-inline-start": "1rem",
+        "max-inline-size": "1280px",
+        "list": {
+          "row-gap": "0.5rem"
+        }
+      }
     }
   }
 }

package/dist/root.css

@@ -1,9 +1,19 @@
 /**
  * Do not edit directly
- * Generated on Thu, 31 Oct 2024 14:38:44 GMT
+ * Generated on Thu, 31 Oct 2024 15:37:43 GMT
  */
 
 :root {
+  --rhc-sub-nav-bar-content-list-row-gap: 0.5rem;
+  --rhc-sub-nav-bar-content-max-inline-size: 1280px;
+  --rhc-sub-nav-bar-content-padding-inline-start: 1rem;
+  --rhc-sub-nav-bar-content-padding-inline-end: 1rem;
+  --rhc-sub-nav-bar-inline-size: 100%;
+  --rhc-sub-nav-bar-padding-block-start: 2rem;
+  --rhc-sub-nav-bar-padding-block-end: 2rem;
+  --rhc-sub-nav-bar-column-width: 375px;
+  --rhc-sub-nav-bar-column-gap: 0.5rem;
+  --rhc-sub-nav-bar-background-color: #f2f4f6;
   --rhc-space-700: 3.5rem;
   --rhc-space-600: 3rem;
   --rhc-space-500: 2.5rem;
@@ -272,6 +282,9 @@
   --rhc-page-footer-border-block-start-style: solid;
   --rhc-page-footer-border-block-start-color: #154273;
   --rhc-page-footer-border-block-start-width: 2px;
+  --rhc-page-footer-content-padding-inline-end: 1rem;
+  --rhc-page-footer-content-padding-inline-start: 1rem;
+  --rhc-page-footer-content-max-inline-size: 1280px;
   --rhc-page-footer-column-title-margin-block-end: 0.75rem;
   --rhc-page-footer-column-width: 200px;
   --rhc-page-footer-column-gap: 1.5rem;
@@ -364,7 +377,9 @@
   --rhc-nav-bar-icon-active-color: #fff;
   --rhc-nav-bar-icon-color: #154273;
   --rhc-nav-bar-content-column-gap: 1rem;
+  --rhc-nav-bar-container-inline-size: 100%;
   --rhc-nav-bar-padding-inline: 1rem;
+  --rhc-nav-bar-max-inline-size: 1280px;
   --rhc-nav-bar-border-block-end-width: 1px;
   --rhc-navigation-list-item-padding-inline: 1rem;
   --rhc-navigation-list-item-padding-block: 0.75rem;

package/dist/tokens.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 31 Oct 2024 14:38:45 GMT
+ * Generated on Thu, 31 Oct 2024 15:37:43 GMT
  */
 
 export default tokens;
@@ -1186,7 +1186,11 @@ declare const tokens: {
     },
     "nav-bar": {
       "border-block-end-width": DesignToken,
+      "max-inline-size": DesignToken,
       "padding-inline": DesignToken,
+      "container": {
+        "inline-size": DesignToken
+      },
       "content": {
         "column-gap": DesignToken
       },
@@ -1345,6 +1349,11 @@ declare const tokens: {
           "margin-block-end": DesignToken
         }
       },
+      "content": {
+        "max-inline-size": DesignToken,
+        "padding-inline-start": DesignToken,
+        "padding-inline-end": DesignToken
+      },
       "border": {
         "block-start": {
           "width": DesignToken,
@@ -1749,6 +1758,22 @@ declare const tokens: {
       "500": DesignToken,
       "600": DesignToken,
       "700": DesignToken
+    },
+    "sub-nav-bar": {
+      "background-color": DesignToken,
+      "column-gap": DesignToken,
+      "column-width": DesignToken,
+      "padding-block-end": DesignToken,
+      "padding-block-start": DesignToken,
+      "inline-size": DesignToken,
+      "content": {
+        "padding-inline-end": DesignToken,
+        "padding-inline-start": DesignToken,
+        "max-inline-size": DesignToken,
+        "list": {
+          "row-gap": DesignToken
+        }
+      }
     }
   }
 }

package/dist/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 31 Oct 2024 14:38:44 GMT
+ * Generated on Thu, 31 Oct 2024 15:37:42 GMT
  */
 
 module.exports = {
@@ -17584,6 +17584,27 @@ module.exports = {
           "border-block-end-width"
         ]
       },
+      "max-inline-size": {
+        "value": "1280px",
+        "type": "sizing",
+        "filePath": "src/generated/figma.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "1280px",
+          "type": "sizing"
+        },
+        "name": "rhcNavBarMaxInlineSize",
+        "attributes": {
+          "category": "rhc",
+          "type": "nav-bar",
+          "item": "max-inline-size"
+        },
+        "path": [
+          "rhc",
+          "nav-bar",
+          "max-inline-size"
+        ]
+      },
       "padding-inline": {
         "value": "1rem",
         "type": "spacing",
@@ -17605,6 +17626,31 @@ module.exports = {
           "padding-inline"
         ]
       },
+      "container": {
+        "inline-size": {
+          "value": "100%",
+          "type": "sizing",
+          "filePath": "src/generated/figma.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "100%",
+            "type": "sizing"
+          },
+          "name": "rhcNavBarContainerInlineSize",
+          "attributes": {
+            "category": "rhc",
+            "type": "nav-bar",
+            "item": "container",
+            "subitem": "inline-size"
+          },
+          "path": [
+            "rhc",
+            "nav-bar",
+            "container",
+            "inline-size"
+          ]
+        }
+      },
       "content": {
         "column-gap": {
           "value": "1rem",
@@ -19771,6 +19817,77 @@ module.exports = {
           }
         }
       },
+      "content": {
+        "max-inline-size": {
+          "value": "1280px",
+          "type": "sizing",
+          "filePath": "src/generated/figma.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "1280px",
+            "type": "sizing"
+          },
+          "name": "rhcPageFooterContentMaxInlineSize",
+          "attributes": {
+            "category": "rhc",
+            "type": "page-footer",
+            "item": "content",
+            "subitem": "max-inline-size"
+          },
+          "path": [
+            "rhc",
+            "page-footer",
+            "content",
+            "max-inline-size"
+          ]
+        },
+        "padding-inline-start": {
+          "value": "1rem",
+          "type": "spacing",
+          "filePath": "src/generated/figma.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "1rem",
+            "type": "spacing"
+          },
+          "name": "rhcPageFooterContentPaddingInlineStart",
+          "attributes": {
+            "category": "rhc",
+            "type": "page-footer",
+            "item": "content",
+            "subitem": "padding-inline-start"
+          },
+          "path": [
+            "rhc",
+            "page-footer",
+            "content",
+            "padding-inline-start"
+          ]
+        },
+        "padding-inline-end": {
+          "value": "1rem",
+          "type": "spacing",
+          "filePath": "src/generated/figma.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "1rem",
+            "type": "spacing"
+          },
+          "name": "rhcPageFooterContentPaddingInlineEnd",
+          "attributes": {
+            "category": "rhc",
+            "type": "page-footer",
+            "item": "content",
+            "subitem": "padding-inline-end"
+          },
+          "path": [
+            "rhc",
+            "page-footer",
+            "content",
+            "padding-inline-end"
+          ]
+        }
+      },
       "border": {
         "block-start": {
           "width": {
@@ -26233,6 +26350,232 @@ module.exports = {
           "700"
         ]
       }
+    },
+    "sub-nav-bar": {
+      "background-color": {
+        "value": "#f2f4f6",
+        "type": "color",
+        "filePath": "src/generated/figma.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#f2f4f6",
+          "type": "color"
+        },
+        "name": "rhcSubNavBarBackgroundColor",
+        "attributes": {
+          "category": "rhc",
+          "type": "sub-nav-bar",
+          "item": "background-color"
+        },
+        "path": [
+          "rhc",
+          "sub-nav-bar",
+          "background-color"
+        ]
+      },
+      "column-gap": {
+        "value": "0.5rem",
+        "type": "spacing",
+        "filePath": "src/generated/figma.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "0.5rem",
+          "type": "spacing"
+        },
+        "name": "rhcSubNavBarColumnGap",
+        "attributes": {
+          "category": "rhc",
+          "type": "sub-nav-bar",
+          "item": "column-gap"
+        },
+        "path": [
+          "rhc",
+          "sub-nav-bar",
+          "column-gap"
+        ]
+      },
+      "column-width": {
+        "value": "375px",
+        "type": "sizing",
+        "filePath": "src/generated/figma.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "375px",
+          "type": "sizing"
+        },
+        "name": "rhcSubNavBarColumnWidth",
+        "attributes": {
+          "category": "rhc",
+          "type": "sub-nav-bar",
+          "item": "column-width"
+        },
+        "path": [
+          "rhc",
+          "sub-nav-bar",
+          "column-width"
+        ]
+      },
+      "padding-block-end": {
+        "value": "2rem",
+        "type": "spacing",
+        "filePath": "src/generated/figma.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "2rem",
+          "type": "spacing"
+        },
+        "name": "rhcSubNavBarPaddingBlockEnd",
+        "attributes": {
+          "category": "rhc",
+          "type": "sub-nav-bar",
+          "item": "padding-block-end"
+        },
+        "path": [
+          "rhc",
+          "sub-nav-bar",
+          "padding-block-end"
+        ]
+      },
+      "padding-block-start": {
+        "value": "2rem",
+        "type": "spacing",
+        "filePath": "src/generated/figma.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "2rem",
+          "type": "spacing"
+        },
+        "name": "rhcSubNavBarPaddingBlockStart",
+        "attributes": {
+          "category": "rhc",
+          "type": "sub-nav-bar",
+          "item": "padding-block-start"
+        },
+        "path": [
+          "rhc",
+          "sub-nav-bar",
+          "padding-block-start"
+        ]
+      },
+      "inline-size": {
+        "value": "100%",
+        "type": "sizing",
+        "filePath": "src/generated/figma.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "100%",
+          "type": "sizing"
+        },
+        "name": "rhcSubNavBarInlineSize",
+        "attributes": {
+          "category": "rhc",
+          "type": "sub-nav-bar",
+          "item": "inline-size"
+        },
+        "path": [
+          "rhc",
+          "sub-nav-bar",
+          "inline-size"
+        ]
+      },
+      "content": {
+        "padding-inline-end": {
+          "value": "1rem",
+          "type": "spacing",
+          "filePath": "src/generated/figma.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "1rem",
+            "type": "spacing"
+          },
+          "name": "rhcSubNavBarContentPaddingInlineEnd",
+          "attributes": {
+            "category": "rhc",
+            "type": "sub-nav-bar",
+            "item": "content",
+            "subitem": "padding-inline-end"
+          },
+          "path": [
+            "rhc",
+            "sub-nav-bar",
+            "content",
+            "padding-inline-end"
+          ]
+        },
+        "padding-inline-start": {
+          "value": "1rem",
+          "type": "spacing",
+          "filePath": "src/generated/figma.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "1rem",
+            "type": "spacing"
+          },
+          "name": "rhcSubNavBarContentPaddingInlineStart",
+          "attributes": {
+            "category": "rhc",
+            "type": "sub-nav-bar",
+            "item": "content",
+            "subitem": "padding-inline-start"
+          },
+          "path": [
+            "rhc",
+            "sub-nav-bar",
+            "content",
+            "padding-inline-start"
+          ]
+        },
+        "max-inline-size": {
+          "value": "1280px",
+          "type": "sizing",
+          "filePath": "src/generated/figma.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "1280px",
+            "type": "sizing"
+          },
+          "name": "rhcSubNavBarContentMaxInlineSize",
+          "attributes": {
+            "category": "rhc",
+            "type": "sub-nav-bar",
+            "item": "content",
+            "subitem": "max-inline-size"
+          },
+          "path": [
+            "rhc",
+            "sub-nav-bar",
+            "content",
+            "max-inline-size"
+          ]
+        },
+        "list": {
+          "row-gap": {
+            "value": "0.5rem",
+            "type": "spacing",
+            "filePath": "src/generated/figma.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": "0.5rem",
+              "type": "spacing"
+            },
+            "name": "rhcSubNavBarContentListRowGap",
+            "attributes": {
+              "category": "rhc",
+              "type": "sub-nav-bar",
+              "item": "content",
+              "subitem": "list",
+              "state": "row-gap"
+            },
+            "path": [
+              "rhc",
+              "sub-nav-bar",
+              "content",
+              "list",
+              "row-gap"
+            ]
+          }
+        }
+      }
     }
   }
 };

package/dist/variables.less

@@ -1,7 +1,17 @@
 
 // Do not edit directly
-// Generated on Thu, 31 Oct 2024 14:38:45 GMT
+// Generated on Thu, 31 Oct 2024 15:37:43 GMT
 
+@rhc-sub-nav-bar-content-list-row-gap: 0.5rem;
+@rhc-sub-nav-bar-content-max-inline-size: 1280px;
+@rhc-sub-nav-bar-content-padding-inline-start: 1rem;
+@rhc-sub-nav-bar-content-padding-inline-end: 1rem;
+@rhc-sub-nav-bar-inline-size: 100%;
+@rhc-sub-nav-bar-padding-block-start: 2rem;
+@rhc-sub-nav-bar-padding-block-end: 2rem;
+@rhc-sub-nav-bar-column-width: 375px;
+@rhc-sub-nav-bar-column-gap: 0.5rem;
+@rhc-sub-nav-bar-background-color: #f2f4f6;
 @rhc-space-700: 3.5rem;
 @rhc-space-600: 3rem;
 @rhc-space-500: 2.5rem;
@@ -270,6 +280,9 @@
 @rhc-page-footer-border-block-start-style: solid;
 @rhc-page-footer-border-block-start-color: #154273;
 @rhc-page-footer-border-block-start-width: 2px;
+@rhc-page-footer-content-padding-inline-end: 1rem;
+@rhc-page-footer-content-padding-inline-start: 1rem;
+@rhc-page-footer-content-max-inline-size: 1280px;
 @rhc-page-footer-column-title-margin-block-end: 0.75rem;
 @rhc-page-footer-column-width: 200px;
 @rhc-page-footer-column-gap: 1.5rem;
@@ -362,7 +375,9 @@
 @rhc-nav-bar-icon-active-color: #fff;
 @rhc-nav-bar-icon-color: #154273;
 @rhc-nav-bar-content-column-gap: 1rem;
+@rhc-nav-bar-container-inline-size: 100%;
 @rhc-nav-bar-padding-inline: 1rem;
+@rhc-nav-bar-max-inline-size: 1280px;
 @rhc-nav-bar-border-block-end-width: 1px;
 @rhc-navigation-list-item-padding-inline: 1rem;
 @rhc-navigation-list-item-padding-block: 0.75rem;

package/figma/figma.tokens.json

@@ -3240,41 +3240,55 @@
             }
           }
         },
-        "border": {
-            "block-start": {
-                "width": {
-                    "value": "{rhc.border-width.m}",
-                    "type": "borderWidth"
-                },
-                "color": {
-                    "value": "{rhc.color.primary.500}",
-                    "type": "color"
-                },
-                "style": {
-                    "value": "solid",
-                    "type": "borderStyle"
-                }
-            }
+        "content": {
+          "max-inline-size": {
+            "value": "1280px",
+            "type": "sizing"
+          },
+          "padding-inline-start": {
+            "value": "{rhc.space.200}",
+            "type": "spacing"
+          },
+          "padding-inline-end": {
+            "value": "{rhc.space.200}",
+            "type": "spacing"
+          }
         },
-        "padding": {
-            "block-start": {
-                "value": "{rhc.space.500}",
-                "type": "spacing"
+        "border": {
+          "block-start": {
+            "width": {
+              "value": "{rhc.border-width.m}",
+              "type": "borderWidth"
             },
-            "block-end": {
-                "value": "{rhc.space.500}",
-                "type": "spacing"
+            "color": {
+              "value": "{rhc.color.primary.500}",
+              "type": "color"
             },
-            "inline-start": {
-                "value": "{rhc.space.500}",
-                "type": "spacing"
+            "style": {
+              "value": "solid",
+              "type": "borderStyle"
             }
+          }
+        },
+        "padding": {
+          "block-start": {
+            "value": "{rhc.space.500}",
+            "type": "spacing"
+          },
+          "block-end": {
+            "value": "{rhc.space.500}",
+            "type": "spacing"
+          },
+          "inline-start": {
+            "value": "{rhc.space.500}",
+            "type": "spacing"
+          }
         },
         "flex": {
-            "direction": {
-                "value": "row",
-                "type": "flexDirection"
-            }
+          "direction": {
+            "value": "row",
+            "type": "flexDirection"
+          }
         }
       }
     }
@@ -4251,10 +4265,20 @@
           "value": "{rhc.border-width.default}",
           "type": "borderWidth"
         },
+        "max-inline-size": {
+          "value": "1280px",
+          "type": "sizing"
+        },
         "padding-inline": {
           "value": "{rhc.space.200}",
           "type": "spacing"
         },
+        "container": {
+          "inline-size": {
+            "value": "100%",
+            "type": "sizing"
+          }
+        },
         "content": {
           "column-gap": {
             "value": "{rhc.space.200}",
@@ -5621,6 +5645,56 @@
       }
     }
   },
+  "components/sub-nav-bar": {
+    "rhc": {
+      "sub-nav-bar": {
+        "background-color": {
+          "value": "#f2f4f6",
+          "type": "color"
+        },
+        "column-gap": {
+          "value": "{rhc.space.100}",
+          "type": "spacing"
+        },
+        "column-width": {
+          "value": "375px",
+          "type": "sizing"
+        },
+        "padding-block-end": {
+          "value": "{rhc.space.400}",
+          "type": "spacing"
+        },
+        "padding-block-start": {
+          "value": "{rhc.space.400}",
+          "type": "spacing"
+        },
+        "inline-size": {
+          "value": "100%",
+          "type": "sizing"
+        },
+        "content": {
+          "padding-inline-end": {
+            "value": "{rhc.space.200}",
+            "type": "spacing"
+          },
+          "padding-inline-start": {
+            "value": "{rhc.space.200}",
+            "type": "spacing"
+          },
+          "max-inline-size": {
+            "value": "1280px",
+            "type": "sizing"
+          },
+          "list": {
+            "row-gap": {
+              "value": "{rhc.space.100}",
+              "type": "spacing"
+            }
+          }
+        }
+      }
+    }
+  },
   "components/summary-list": {
     "todo": {
       "summary-list": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rijkshuisstijl-community/design-tokens",
-  "version": "1.0.0-alpha.45",
+  "version": "1.0.0-alpha.46",
   "author": "Community for NL Design System",
   "description": "Example design tokens",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -33,5 +33,5 @@
     "style-dictionary": "3.9.2",
     "token-transformer": "0.0.33"
   },
-  "gitHead": "15e862ab61272a37a209882d29c60d62dc530a5e"
+  "gitHead": "6f8e17fb54e27ab8ef27111ecaaf3aebaafba4c1"
 }

package/src/generated/figma.tokens.json

@@ -3441,10 +3441,20 @@
         "value": "1px",
         "type": "borderWidth"
       },
+      "max-inline-size": {
+        "value": "1280px",
+        "type": "sizing"
+      },
       "padding-inline": {
         "value": "1rem",
         "type": "spacing"
       },
+      "container": {
+        "inline-size": {
+          "value": "100%",
+          "type": "sizing"
+        }
+      },
       "content": {
         "column-gap": {
           "value": "1rem",
@@ -3879,6 +3889,20 @@
           }
         }
       },
+      "content": {
+        "max-inline-size": {
+          "value": "1280px",
+          "type": "sizing"
+        },
+        "padding-inline-start": {
+          "value": "1rem",
+          "type": "spacing"
+        },
+        "padding-inline-end": {
+          "value": "1rem",
+          "type": "spacing"
+        }
+      },
       "border": {
         "block-start": {
           "width": {
@@ -5203,6 +5227,52 @@
         "value": "3.5rem",
         "type": "spacing"
       }
+    },
+    "sub-nav-bar": {
+      "background-color": {
+        "value": "#f2f4f6",
+        "type": "color"
+      },
+      "column-gap": {
+        "value": "0.5rem",
+        "type": "spacing"
+      },
+      "column-width": {
+        "value": "375px",
+        "type": "sizing"
+      },
+      "padding-block-end": {
+        "value": "2rem",
+        "type": "spacing"
+      },
+      "padding-block-start": {
+        "value": "2rem",
+        "type": "spacing"
+      },
+      "inline-size": {
+        "value": "100%",
+        "type": "sizing"
+      },
+      "content": {
+        "padding-inline-end": {
+          "value": "1rem",
+          "type": "spacing"
+        },
+        "padding-inline-start": {
+          "value": "1rem",
+          "type": "spacing"
+        },
+        "max-inline-size": {
+          "value": "1280px",
+          "type": "sizing"
+        },
+        "list": {
+          "row-gap": {
+            "value": "0.5rem",
+            "type": "spacing"
+          }
+        }
+      }
     }
   }
 }