@rijkshuisstijl-community/design-tokens 1.0.0-alpha.39 → 1.0.0-alpha.41

package/dist/_variables.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 29 Oct 2024 12:53:10 GMT
+// Generated on Tue, 29 Oct 2024 15:06:22 GMT
 
 $rhc-space-700: 3.5rem;
 $rhc-space-600: 3rem;
@@ -251,6 +251,18 @@ $rhc-checkbox-group-padding-block-end: 0.5rem;
 $rhc-dot-badge-size: 12px;
 $rhc-dot-badge-color: #d52b1e;
 $rhc-dot-badge-border-radius: 999px;
+$rhc-file-input-item-subtitle-color: #64748B;
+$rhc-file-input-item-error-border-color: #d52b1e;
+$rhc-file-input-item-column-gap: 0.25rem;
+$rhc-file-input-item-padding-block-end: 0.75rem;
+$rhc-file-input-item-padding-block-start: 0.75rem;
+$rhc-file-input-item-padding-inline-end: 1rem;
+$rhc-file-input-item-padding-inline-start: 1rem;
+$rhc-file-input-item-border-radius: 5px;
+$rhc-file-input-item-border-width: 1px;
+$rhc-file-input-item-border-color: #154273;
+$rhc-file-input-item-border-style: solid;
+$rhc-file-input-column-gap: 0.75rem;
 $rhc-page-footer-flex-direction: row;
 $rhc-page-footer-padding-inline-start: 2.5rem;
 $rhc-page-footer-padding-block-end: 2.5rem;
@@ -304,10 +316,10 @@ $rhc-logo-title-padding-block-start: 3.125rem;
 $rhc-logo-title-font-size: 0.913rem;
 $rhc-logo-title-line-height: 1.063rem;
 $rhc-logo-title-font-weight: 600;
-$rhc-logo-img-color: #154273;
-$rhc-logo-img-block-size: 96px;
-$rhc-logo-img-inline-size: 48px;
-$rhc-logo-img-background-color: #F1F5F9;
+$rhc-logo-image-color: #154273;
+$rhc-logo-image-block-size: 96px;
+$rhc-logo-image-inline-size: 48px;
+$rhc-logo-image-background-color: #fff;
 $rhc-message-list-item-heading-color: #154273;
 $rhc-message-list-item-label-line-height: 150%;
 $rhc-message-list-item-label-font-weight: 700;

package/dist/index.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 29 Oct 2024 12:53:10 GMT
+ * Generated on Tue, 29 Oct 2024 15:06:22 GMT
  */
 
 .rhc-theme {
@@ -253,6 +253,18 @@
   --rhc-dot-badge-size: 12px;
   --rhc-dot-badge-color: #d52b1e;
   --rhc-dot-badge-border-radius: 999px;
+  --rhc-file-input-item-subtitle-color: #64748B;
+  --rhc-file-input-item-error-border-color: #d52b1e;
+  --rhc-file-input-item-column-gap: 0.25rem;
+  --rhc-file-input-item-padding-block-end: 0.75rem;
+  --rhc-file-input-item-padding-block-start: 0.75rem;
+  --rhc-file-input-item-padding-inline-end: 1rem;
+  --rhc-file-input-item-padding-inline-start: 1rem;
+  --rhc-file-input-item-border-radius: 5px;
+  --rhc-file-input-item-border-width: 1px;
+  --rhc-file-input-item-border-color: #154273;
+  --rhc-file-input-item-border-style: solid;
+  --rhc-file-input-column-gap: 0.75rem;
   --rhc-page-footer-flex-direction: row;
   --rhc-page-footer-padding-inline-start: 2.5rem;
   --rhc-page-footer-padding-block-end: 2.5rem;
@@ -306,10 +318,10 @@
   --rhc-logo-title-font-size: 0.913rem;
   --rhc-logo-title-line-height: 1.063rem;
   --rhc-logo-title-font-weight: 600;
-  --rhc-logo-img-color: #154273;
-  --rhc-logo-img-block-size: 96px;
-  --rhc-logo-img-inline-size: 48px;
-  --rhc-logo-img-background-color: #F1F5F9;
+  --rhc-logo-image-color: #154273;
+  --rhc-logo-image-block-size: 96px;
+  --rhc-logo-image-inline-size: 48px;
+  --rhc-logo-image-background-color: #fff;
   --rhc-message-list-item-heading-color: #154273;
   --rhc-message-list-item-label-line-height: 150%;
   --rhc-message-list-item-label-font-weight: 700;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 29 Oct 2024 12:53:10 GMT
+ * Generated on Tue, 29 Oct 2024 15:06:22 GMT
  */
 
 export const utrechtActionActivateCursor : string;
@@ -796,10 +796,10 @@ export const rhcMessageListItemLabelFontSize : string;
 export const rhcMessageListItemLabelFontWeight : number;
 export const rhcMessageListItemLabelLineHeight : string;
 export const rhcMessageListItemHeadingColor : string;
-export const rhcLogoImgBackgroundColor : string;
-export const rhcLogoImgInlineSize : string;
-export const rhcLogoImgBlockSize : string;
-export const rhcLogoImgColor : string;
+export const rhcLogoImageBackgroundColor : string;
+export const rhcLogoImageInlineSize : string;
+export const rhcLogoImageBlockSize : string;
+export const rhcLogoImageColor : string;
 export const rhcLogoTitleFontWeight : number;
 export const rhcLogoTitleLineHeight : string;
 export const rhcLogoTitleFontSize : string;
@@ -853,6 +853,18 @@ export const rhcPageFooterPaddingBlockStart : string;
 export const rhcPageFooterPaddingBlockEnd : string;
 export const rhcPageFooterPaddingInlineStart : string;
 export const rhcPageFooterFlexDirection : string;
+export const rhcFileInputColumnGap : string;
+export const rhcFileInputItemBorderStyle : string;
+export const rhcFileInputItemBorderColor : string;
+export const rhcFileInputItemBorderWidth : string;
+export const rhcFileInputItemBorderRadius : string;
+export const rhcFileInputItemPaddingInlineStart : string;
+export const rhcFileInputItemPaddingInlineEnd : string;
+export const rhcFileInputItemPaddingBlockStart : string;
+export const rhcFileInputItemPaddingBlockEnd : string;
+export const rhcFileInputItemColumnGap : string;
+export const rhcFileInputItemErrorBorderColor : string;
+export const rhcFileInputItemSubtitleColor : string;
 export const rhcDotBadgeBorderRadius : string;
 export const rhcDotBadgeColor : string;
 export const rhcDotBadgeSize : string;

package/dist/index.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 29 Oct 2024 12:53:10 GMT
+ * Generated on Tue, 29 Oct 2024 15:06:22 GMT
  */
 
 export const utrechtActionActivateCursor = "pointer";
@@ -795,10 +795,10 @@ export const rhcMessageListItemLabelFontSize = "1.25rem";
 export const rhcMessageListItemLabelFontWeight = 700;
 export const rhcMessageListItemLabelLineHeight = "150%";
 export const rhcMessageListItemHeadingColor = "#154273";
-export const rhcLogoImgBackgroundColor = "#F1F5F9";
-export const rhcLogoImgInlineSize = "48px";
-export const rhcLogoImgBlockSize = "96px";
-export const rhcLogoImgColor = "#154273";
+export const rhcLogoImageBackgroundColor = "#fff";
+export const rhcLogoImageInlineSize = "48px";
+export const rhcLogoImageBlockSize = "96px";
+export const rhcLogoImageColor = "#154273";
 export const rhcLogoTitleFontWeight = 600;
 export const rhcLogoTitleLineHeight = "1.063rem";
 export const rhcLogoTitleFontSize = "0.913rem";
@@ -852,6 +852,18 @@ export const rhcPageFooterPaddingBlockStart = "2.5rem";
 export const rhcPageFooterPaddingBlockEnd = "2.5rem";
 export const rhcPageFooterPaddingInlineStart = "2.5rem";
 export const rhcPageFooterFlexDirection = "row";
+export const rhcFileInputColumnGap = "0.75rem";
+export const rhcFileInputItemBorderStyle = "solid";
+export const rhcFileInputItemBorderColor = "#154273";
+export const rhcFileInputItemBorderWidth = "1px";
+export const rhcFileInputItemBorderRadius = "5px";
+export const rhcFileInputItemPaddingInlineStart = "1rem";
+export const rhcFileInputItemPaddingInlineEnd = "1rem";
+export const rhcFileInputItemPaddingBlockStart = "0.75rem";
+export const rhcFileInputItemPaddingBlockEnd = "0.75rem";
+export const rhcFileInputItemColumnGap = "0.25rem";
+export const rhcFileInputItemErrorBorderColor = "#d52b1e";
+export const rhcFileInputItemSubtitleColor = "#64748B";
 export const rhcDotBadgeBorderRadius = "999px";
 export const rhcDotBadgeColor = "#d52b1e";
 export const rhcDotBadgeSize = "12px";

package/dist/index.json

@@ -791,10 +791,10 @@
   "rhcMessageListItemLabelFontWeight": 700,
   "rhcMessageListItemLabelLineHeight": "150%",
   "rhcMessageListItemHeadingColor": "#154273",
-  "rhcLogoImgBackgroundColor": "#F1F5F9",
-  "rhcLogoImgInlineSize": "48px",
-  "rhcLogoImgBlockSize": "96px",
-  "rhcLogoImgColor": "#154273",
+  "rhcLogoImageBackgroundColor": "#fff",
+  "rhcLogoImageInlineSize": "48px",
+  "rhcLogoImageBlockSize": "96px",
+  "rhcLogoImageColor": "#154273",
   "rhcLogoTitleFontWeight": 600,
   "rhcLogoTitleLineHeight": "1.063rem",
   "rhcLogoTitleFontSize": "0.913rem",
@@ -848,6 +848,18 @@
   "rhcPageFooterPaddingBlockEnd": "2.5rem",
   "rhcPageFooterPaddingInlineStart": "2.5rem",
   "rhcPageFooterFlexDirection": "row",
+  "rhcFileInputColumnGap": "0.75rem",
+  "rhcFileInputItemBorderStyle": "solid",
+  "rhcFileInputItemBorderColor": "#154273",
+  "rhcFileInputItemBorderWidth": "1px",
+  "rhcFileInputItemBorderRadius": "5px",
+  "rhcFileInputItemPaddingInlineStart": "1rem",
+  "rhcFileInputItemPaddingInlineEnd": "1rem",
+  "rhcFileInputItemPaddingBlockStart": "0.75rem",
+  "rhcFileInputItemPaddingBlockEnd": "0.75rem",
+  "rhcFileInputItemColumnGap": "0.25rem",
+  "rhcFileInputItemErrorBorderColor": "#d52b1e",
+  "rhcFileInputItemSubtitleColor": "#64748B",
   "rhcDotBadgeBorderRadius": "999px",
   "rhcDotBadgeColor": "#d52b1e",
   "rhcDotBadgeSize": "12px",

package/dist/index.tokens.json

@@ -1232,8 +1232,8 @@
       }
     },
     "logo": {
-      "img": {
-        "background-color": "#F1F5F9",
+      "image": {
+        "background-color": "#fff",
         "inline-size": "48px",
         "block-size": "96px",
         "color": "#154273"
@@ -1326,6 +1326,26 @@
         "direction": "row"
       }
     },
+    "file-input": {
+      "column-gap": "0.75rem",
+      "item": {
+        "border-style": "solid",
+        "border-color": "#154273",
+        "border-width": "1px",
+        "border-radius": "5px",
+        "padding-inline-start": "1rem",
+        "padding-inline-end": "1rem",
+        "padding-block-start": "0.75rem",
+        "padding-block-end": "0.75rem",
+        "column-gap": "0.25rem",
+        "error": {
+          "border-color": "#d52b1e"
+        },
+        "subtitle": {
+          "color": "#64748B"
+        }
+      }
+    },
     "dot-badge": {
       "border-radius": "999px",
       "color": "#d52b1e",

package/dist/root.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 29 Oct 2024 12:53:10 GMT
+ * Generated on Tue, 29 Oct 2024 15:06:22 GMT
  */
 
 :root {
@@ -253,6 +253,18 @@
   --rhc-dot-badge-size: 12px;
   --rhc-dot-badge-color: #d52b1e;
   --rhc-dot-badge-border-radius: 999px;
+  --rhc-file-input-item-subtitle-color: #64748B;
+  --rhc-file-input-item-error-border-color: #d52b1e;
+  --rhc-file-input-item-column-gap: 0.25rem;
+  --rhc-file-input-item-padding-block-end: 0.75rem;
+  --rhc-file-input-item-padding-block-start: 0.75rem;
+  --rhc-file-input-item-padding-inline-end: 1rem;
+  --rhc-file-input-item-padding-inline-start: 1rem;
+  --rhc-file-input-item-border-radius: 5px;
+  --rhc-file-input-item-border-width: 1px;
+  --rhc-file-input-item-border-color: #154273;
+  --rhc-file-input-item-border-style: solid;
+  --rhc-file-input-column-gap: 0.75rem;
   --rhc-page-footer-flex-direction: row;
   --rhc-page-footer-padding-inline-start: 2.5rem;
   --rhc-page-footer-padding-block-end: 2.5rem;
@@ -306,10 +318,10 @@
   --rhc-logo-title-font-size: 0.913rem;
   --rhc-logo-title-line-height: 1.063rem;
   --rhc-logo-title-font-weight: 600;
-  --rhc-logo-img-color: #154273;
-  --rhc-logo-img-block-size: 96px;
-  --rhc-logo-img-inline-size: 48px;
-  --rhc-logo-img-background-color: #F1F5F9;
+  --rhc-logo-image-color: #154273;
+  --rhc-logo-image-block-size: 96px;
+  --rhc-logo-image-inline-size: 48px;
+  --rhc-logo-image-background-color: #fff;
   --rhc-message-list-item-heading-color: #154273;
   --rhc-message-list-item-label-line-height: 150%;
   --rhc-message-list-item-label-font-weight: 700;

package/dist/tokens.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 29 Oct 2024 12:53:10 GMT
+ * Generated on Tue, 29 Oct 2024 15:06:22 GMT
  */
 
 export default tokens;
@@ -1255,7 +1255,7 @@ declare const tokens: {
       }
     },
     "logo": {
-      "img": {
+      "image": {
         "background-color": DesignToken,
         "inline-size": DesignToken,
         "block-size": DesignToken,
@@ -1349,6 +1349,26 @@ declare const tokens: {
         "direction": DesignToken
       }
     },
+    "file-input": {
+      "column-gap": DesignToken,
+      "item": {
+        "border-style": DesignToken,
+        "border-color": DesignToken,
+        "border-width": DesignToken,
+        "border-radius": DesignToken,
+        "padding-inline-start": DesignToken,
+        "padding-inline-end": DesignToken,
+        "padding-block-start": DesignToken,
+        "padding-block-end": DesignToken,
+        "column-gap": DesignToken,
+        "error": {
+          "border-color": DesignToken
+        },
+        "subtitle": {
+          "color": DesignToken
+        }
+      }
+    },
     "dot-badge": {
       "border-radius": DesignToken,
       "color": DesignToken,

package/dist/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 29 Oct 2024 12:53:10 GMT
+ * Generated on Tue, 29 Oct 2024 15:06:22 GMT
  */
 
 module.exports = {
@@ -18535,27 +18535,27 @@ module.exports = {
       }
     },
     "logo": {
-      "img": {
+      "image": {
         "background-color": {
-          "value": "#F1F5F9",
+          "value": "#fff",
           "type": "color",
           "filePath": "src/generated/figma.tokens.json",
           "isSource": true,
           "original": {
-            "value": "#F1F5F9",
+            "value": "#fff",
             "type": "color"
           },
-          "name": "rhcLogoImgBackgroundColor",
+          "name": "rhcLogoImageBackgroundColor",
           "attributes": {
             "category": "rhc",
             "type": "logo",
-            "item": "img",
+            "item": "image",
             "subitem": "background-color"
           },
           "path": [
             "rhc",
             "logo",
-            "img",
+            "image",
             "background-color"
           ]
         },
@@ -18568,17 +18568,17 @@ module.exports = {
             "value": "48px",
             "type": "sizing"
           },
-          "name": "rhcLogoImgInlineSize",
+          "name": "rhcLogoImageInlineSize",
           "attributes": {
             "category": "rhc",
             "type": "logo",
-            "item": "img",
+            "item": "image",
             "subitem": "inline-size"
           },
           "path": [
             "rhc",
             "logo",
-            "img",
+            "image",
             "inline-size"
           ]
         },
@@ -18591,17 +18591,17 @@ module.exports = {
             "value": "96px",
             "type": "sizing"
           },
-          "name": "rhcLogoImgBlockSize",
+          "name": "rhcLogoImageBlockSize",
           "attributes": {
             "category": "rhc",
             "type": "logo",
-            "item": "img",
+            "item": "image",
             "subitem": "block-size"
           },
           "path": [
             "rhc",
             "logo",
-            "img",
+            "image",
             "block-size"
           ]
         },
@@ -18614,17 +18614,17 @@ module.exports = {
             "value": "#154273",
             "type": "color"
           },
-          "name": "rhcLogoImgColor",
+          "name": "rhcLogoImageColor",
           "attributes": {
             "category": "rhc",
             "type": "logo",
-            "item": "img",
+            "item": "image",
             "subitem": "color"
           },
           "path": [
             "rhc",
             "logo",
-            "img",
+            "image",
             "color"
           ]
         }
@@ -19849,6 +19849,292 @@ module.exports = {
         }
       }
     },
+    "file-input": {
+      "column-gap": {
+        "value": "0.75rem",
+        "type": "spacing",
+        "filePath": "src/generated/figma.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "0.75rem",
+          "type": "spacing"
+        },
+        "name": "rhcFileInputColumnGap",
+        "attributes": {
+          "category": "rhc",
+          "type": "file-input",
+          "item": "column-gap"
+        },
+        "path": [
+          "rhc",
+          "file-input",
+          "column-gap"
+        ]
+      },
+      "item": {
+        "border-style": {
+          "value": "solid",
+          "type": "borderStyle",
+          "filePath": "src/generated/figma.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "solid",
+            "type": "borderStyle"
+          },
+          "name": "rhcFileInputItemBorderStyle",
+          "attributes": {
+            "category": "rhc",
+            "type": "file-input",
+            "item": "item",
+            "subitem": "border-style"
+          },
+          "path": [
+            "rhc",
+            "file-input",
+            "item",
+            "border-style"
+          ]
+        },
+        "border-color": {
+          "value": "#154273",
+          "type": "color",
+          "filePath": "src/generated/figma.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "#154273",
+            "type": "color"
+          },
+          "name": "rhcFileInputItemBorderColor",
+          "attributes": {
+            "category": "rhc",
+            "type": "file-input",
+            "item": "item",
+            "subitem": "border-color"
+          },
+          "path": [
+            "rhc",
+            "file-input",
+            "item",
+            "border-color"
+          ]
+        },
+        "border-width": {
+          "value": "1px",
+          "type": "borderWidth",
+          "filePath": "src/generated/figma.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "1px",
+            "type": "borderWidth"
+          },
+          "name": "rhcFileInputItemBorderWidth",
+          "attributes": {
+            "category": "rhc",
+            "type": "file-input",
+            "item": "item",
+            "subitem": "border-width"
+          },
+          "path": [
+            "rhc",
+            "file-input",
+            "item",
+            "border-width"
+          ]
+        },
+        "border-radius": {
+          "value": "5px",
+          "type": "borderRadius",
+          "filePath": "src/generated/figma.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "5px",
+            "type": "borderRadius"
+          },
+          "name": "rhcFileInputItemBorderRadius",
+          "attributes": {
+            "category": "rhc",
+            "type": "file-input",
+            "item": "item",
+            "subitem": "border-radius"
+          },
+          "path": [
+            "rhc",
+            "file-input",
+            "item",
+            "border-radius"
+          ]
+        },
+        "padding-inline-start": {
+          "value": "1rem",
+          "type": "spacing",
+          "filePath": "src/generated/figma.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "1rem",
+            "type": "spacing"
+          },
+          "name": "rhcFileInputItemPaddingInlineStart",
+          "attributes": {
+            "category": "rhc",
+            "type": "file-input",
+            "item": "item",
+            "subitem": "padding-inline-start"
+          },
+          "path": [
+            "rhc",
+            "file-input",
+            "item",
+            "padding-inline-start"
+          ]
+        },
+        "padding-inline-end": {
+          "value": "1rem",
+          "type": "spacing",
+          "filePath": "src/generated/figma.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "1rem",
+            "type": "spacing"
+          },
+          "name": "rhcFileInputItemPaddingInlineEnd",
+          "attributes": {
+            "category": "rhc",
+            "type": "file-input",
+            "item": "item",
+            "subitem": "padding-inline-end"
+          },
+          "path": [
+            "rhc",
+            "file-input",
+            "item",
+            "padding-inline-end"
+          ]
+        },
+        "padding-block-start": {
+          "value": "0.75rem",
+          "type": "spacing",
+          "filePath": "src/generated/figma.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "0.75rem",
+            "type": "spacing"
+          },
+          "name": "rhcFileInputItemPaddingBlockStart",
+          "attributes": {
+            "category": "rhc",
+            "type": "file-input",
+            "item": "item",
+            "subitem": "padding-block-start"
+          },
+          "path": [
+            "rhc",
+            "file-input",
+            "item",
+            "padding-block-start"
+          ]
+        },
+        "padding-block-end": {
+          "value": "0.75rem",
+          "type": "spacing",
+          "filePath": "src/generated/figma.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "0.75rem",
+            "type": "spacing"
+          },
+          "name": "rhcFileInputItemPaddingBlockEnd",
+          "attributes": {
+            "category": "rhc",
+            "type": "file-input",
+            "item": "item",
+            "subitem": "padding-block-end"
+          },
+          "path": [
+            "rhc",
+            "file-input",
+            "item",
+            "padding-block-end"
+          ]
+        },
+        "column-gap": {
+          "value": "0.25rem",
+          "type": "spacing",
+          "filePath": "src/generated/figma.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "0.25rem",
+            "type": "spacing"
+          },
+          "name": "rhcFileInputItemColumnGap",
+          "attributes": {
+            "category": "rhc",
+            "type": "file-input",
+            "item": "item",
+            "subitem": "column-gap"
+          },
+          "path": [
+            "rhc",
+            "file-input",
+            "item",
+            "column-gap"
+          ]
+        },
+        "error": {
+          "border-color": {
+            "value": "#d52b1e",
+            "type": "color",
+            "filePath": "src/generated/figma.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": "#d52b1e",
+              "type": "color"
+            },
+            "name": "rhcFileInputItemErrorBorderColor",
+            "attributes": {
+              "category": "rhc",
+              "type": "file-input",
+              "item": "item",
+              "subitem": "error",
+              "state": "border-color"
+            },
+            "path": [
+              "rhc",
+              "file-input",
+              "item",
+              "error",
+              "border-color"
+            ]
+          }
+        },
+        "subtitle": {
+          "color": {
+            "value": "#64748B",
+            "type": "color",
+            "filePath": "src/generated/figma.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": "#64748B",
+              "type": "color"
+            },
+            "name": "rhcFileInputItemSubtitleColor",
+            "attributes": {
+              "category": "rhc",
+              "type": "file-input",
+              "item": "item",
+              "subitem": "subtitle",
+              "state": "color"
+            },
+            "path": [
+              "rhc",
+              "file-input",
+              "item",
+              "subtitle",
+              "color"
+            ]
+          }
+        }
+      }
+    },
     "dot-badge": {
       "border-radius": {
         "value": "999px",

package/dist/variables.less

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 29 Oct 2024 12:53:10 GMT
+// Generated on Tue, 29 Oct 2024 15:06:22 GMT
 
 @rhc-space-700: 3.5rem;
 @rhc-space-600: 3rem;
@@ -251,6 +251,18 @@
 @rhc-dot-badge-size: 12px;
 @rhc-dot-badge-color: #d52b1e;
 @rhc-dot-badge-border-radius: 999px;
+@rhc-file-input-item-subtitle-color: #64748B;
+@rhc-file-input-item-error-border-color: #d52b1e;
+@rhc-file-input-item-column-gap: 0.25rem;
+@rhc-file-input-item-padding-block-end: 0.75rem;
+@rhc-file-input-item-padding-block-start: 0.75rem;
+@rhc-file-input-item-padding-inline-end: 1rem;
+@rhc-file-input-item-padding-inline-start: 1rem;
+@rhc-file-input-item-border-radius: 5px;
+@rhc-file-input-item-border-width: 1px;
+@rhc-file-input-item-border-color: #154273;
+@rhc-file-input-item-border-style: solid;
+@rhc-file-input-column-gap: 0.75rem;
 @rhc-page-footer-flex-direction: row;
 @rhc-page-footer-padding-inline-start: 2.5rem;
 @rhc-page-footer-padding-block-end: 2.5rem;
@@ -304,10 +316,10 @@
 @rhc-logo-title-font-size: 0.913rem;
 @rhc-logo-title-line-height: 1.063rem;
 @rhc-logo-title-font-weight: 600;
-@rhc-logo-img-color: #154273;
-@rhc-logo-img-block-size: 96px;
-@rhc-logo-img-inline-size: 48px;
-@rhc-logo-img-background-color: #F1F5F9;
+@rhc-logo-image-color: #154273;
+@rhc-logo-image-block-size: 96px;
+@rhc-logo-image-inline-size: 48px;
+@rhc-logo-image-background-color: #fff;
 @rhc-message-list-item-heading-color: #154273;
 @rhc-message-list-item-label-line-height: 150%;
 @rhc-message-list-item-label-font-weight: 700;

package/figma/figma.tokens.json

@@ -3133,6 +3133,66 @@
       }
     }
   },
+  "components/file-input": {
+    "rhc": {
+      "file-input": {
+         "column-gap": {
+          "value": "{rhc.space.150}",
+          "type": "spacing"
+        },
+        "item": {
+          "border-style": {
+            "value": "solid",
+            "type": "borderStyle"
+          },
+          "border-color": {
+            "value": "{rhc.color.lintblauw.500}",
+            "type": "color"
+          },
+          "border-width": {
+            "value": "{rhc.border-width.default}",
+            "type": "borderWidth"
+          },
+          "border-radius": {
+            "value": "{rhc.border-radius.md}",
+            "type": "borderRadius"
+          },
+          "padding-inline-start": {
+            "value": "{rhc.space.200}",
+            "type": "spacing"
+          },
+          "padding-inline-end": {
+            "value": "{rhc.space.200}",
+            "type": "spacing"
+          },
+          "padding-block-start": {
+            "value": "{rhc.space.150}",
+            "type": "spacing"
+          },
+          "padding-block-end": {
+            "value": "{rhc.space.150}",
+            "type": "spacing"
+          },
+          "column-gap": {
+            "value": "{rhc.space.50}",
+            "type": "spacing"
+          },
+          "error": {
+            "border-color": {
+              "value": "{rhc.color.feedback.error.default}",
+              "type": "color"
+            }
+          },
+          "subtitle": {
+            "color": {
+              "value": "{rhc.color.grijs.500}",
+              "type": "color"
+            }
+          }
+        }
+      }
+    }
+  },
   "components/footer": {
     "utrecht": {
       "page-footer": {
@@ -3879,9 +3939,9 @@
   "components/logo": {
     "rhc": {
       "logo": {
-        "img": {
+        "image": {
           "background-color": {
-            "value": "{rhc.color.grijs.100}",
+            "value": "{rhc.color.wit}",
             "type": "color"
           },
           "inline-size": {
@@ -6495,6 +6555,7 @@
       "components/drawer",
       "components/fieldset",
       "components/figure",
+      "components/file-input",
       "components/footer",
       "components/form-field",
       "components/form-field-checkbox-option",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rijkshuisstijl-community/design-tokens",
-  "version": "1.0.0-alpha.39",
+  "version": "1.0.0-alpha.41",
   "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": "3a5505a22ea69456e28029a4ebd7e7cbc65d575a"
+  "gitHead": "fa3ca07f5b2583bf00da02ef1f7e9b1f9e72d6ee"
 }

package/src/generated/figma.tokens.json

@@ -3627,9 +3627,9 @@
       }
     },
     "logo": {
-      "img": {
+      "image": {
         "background-color": {
-          "value": "#F1F5F9",
+          "value": "#fff",
           "type": "color"
         },
         "inline-size": {
@@ -3892,6 +3892,62 @@
         }
       }
     },
+    "file-input": {
+      "column-gap": {
+        "value": "0.75rem",
+        "type": "spacing"
+      },
+      "item": {
+        "border-style": {
+          "value": "solid",
+          "type": "borderStyle"
+        },
+        "border-color": {
+          "value": "#154273",
+          "type": "color"
+        },
+        "border-width": {
+          "value": "1px",
+          "type": "borderWidth"
+        },
+        "border-radius": {
+          "value": "5px",
+          "type": "borderRadius"
+        },
+        "padding-inline-start": {
+          "value": "1rem",
+          "type": "spacing"
+        },
+        "padding-inline-end": {
+          "value": "1rem",
+          "type": "spacing"
+        },
+        "padding-block-start": {
+          "value": "0.75rem",
+          "type": "spacing"
+        },
+        "padding-block-end": {
+          "value": "0.75rem",
+          "type": "spacing"
+        },
+        "column-gap": {
+          "value": "0.25rem",
+          "type": "spacing"
+        },
+        "error": {
+          "border-color": {
+            "value": "#d52b1e",
+            "type": "color"
+          }
+        },
+        "subtitle": {
+          "color": {
+            "value": "#64748B",
+            "type": "color"
+          }
+        }
+      }
+    },
     "dot-badge": {
       "border-radius": {
         "value": "999px",