From 34ba789cc36653bc666c73cde8ad64099b2a170b Mon Sep 17 00:00:00 2001
From: Niels Roozemond <n.roozemond@amsterdam.nl>
Date: Fri, 10 May 2024 11:29:21 +0200
Subject: [PATCH] Dashed border proposal

---
 packages/css/src/components/file-input/file-input.scss       | 5 ++++-
 proprietary/tokens/src/components/ams/file-input.tokens.json | 4 ++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/css/src/components/file-input/file-input.scss b/packages/css/src/components/file-input/file-input.scss
index 3d2d8edf72..f331ae676b 100644
--- a/packages/css/src/components/file-input/file-input.scss
+++ b/packages/css/src/components/file-input/file-input.scss
@@ -11,6 +11,7 @@
 }
 
 .ams-file-input {
+  border: var(--ams-file-input-border);
   color: var(--ams-file-input-color);
   cursor: var(--ams-file-input-cursor);
   font-family: var(--ams-file-input-font-family);
@@ -18,8 +19,9 @@
   font-weight: var(--ams-file-input-font-weight);
   line-height: var(--ams-file-input-line-height);
   outline-offset: var(--ams-file-input-outline-offset);
+  padding-block: var(--ams-file-input-padding-block);
+  padding-inline: var(--ams-file-input-padding-inline);
   touch-action: manipulation;
-  width: 100%;
 
   @include text-rendering;
 }
@@ -36,6 +38,7 @@
   cursor: var(--ams-file-input-file-selector-button-cursor);
   font-family: inherit;
   font-weight: inherit;
+  margin-inline-end: var(--ams-file-input-file-selector-button-margin-inline-end);
   padding-block: var(--ams-file-input-file-selector-button-padding-block);
   padding-inline: var(--ams-file-input-file-selector-button-padding-inline);
 
diff --git a/proprietary/tokens/src/components/ams/file-input.tokens.json b/proprietary/tokens/src/components/ams/file-input.tokens.json
index fa7fc7055e..a55b7c56c9 100644
--- a/proprietary/tokens/src/components/ams/file-input.tokens.json
+++ b/proprietary/tokens/src/components/ams/file-input.tokens.json
@@ -1,6 +1,7 @@
 {
   "ams": {
     "file-input": {
+      "border": { "value": "{ams.border.width.sm} dashed {ams.color.neutral-grey3}" },
       "color": { "value": "{ams.color.primary-black}" },
       "cursor": { "value": "{ams.action.activate.cursor}" },
       "font-family": { "value": "{ams.text.font-family}" },
@@ -8,6 +9,8 @@
       "font-size": { "value": "{ams.text.level.5.font-size}" },
       "line-height": { "value": "{ams.text.level.5.line-height}" },
       "outline-offset": { "value": "{ams.focus.outline-offset}" },
+      "padding-block": { "value": "{ams.space.inside.md}" },
+      "padding-inline": { "value": "{ams.space.inside.md}" },
       "disabled": {
         "color": { "value": "{ams.color.neutral-grey2}" },
         "cursor": { "value": "{ams.action.disabled.cursor}" }
@@ -17,6 +20,7 @@
         "color": { "value": "{ams.color.primary-blue}" },
         "cursor": { "value": "{ams.action.activate.cursor}" },
         "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-blue}" },
+        "margin-inline-end": { "value": "{ams.space.inside.md}" },
         "padding-block": { "value": "{ams.space.inside.xs}" },
         "padding-inline": { "value": "{ams.space.inside.md}" },
         "hover": {