Dashed border proposal

Amsterdam · May 10, 2024 · 34ba789 · 34ba789
1 parent 3712d6c
commit 34ba789
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/packages/css/src/components/file-input/file-input.scss b/packages/css/src/components/file-input/file-input.scss
@@ -11,15 +11,17 @@
 }
 
 .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);
   font-size: var(--ams-file-input-font-size);
   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
@@ -1,13 +1,16 @@
 {
   "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}" },
       "font-weight": { "value": "{ams.text.font-weight.normal}" },
       "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": {