diff --git a/packages/css/src/components/file-input/file-input.scss b/packages/css/src/components/file-input/file-input.scss index f6659c485a..04c4b8efab 100644 --- a/packages/css/src/components/file-input/file-input.scss +++ b/packages/css/src/components/file-input/file-input.scss @@ -8,9 +8,11 @@ @mixin reset-button { border: 0; border-radius: 0; // Reset rounded borders on iOS devices + box-sizing: border-box; } .ams-file-input { + background-color: var(--ams-file-input-background-color); border: var(--ams-file-input-border); color: var(--ams-file-input-color); cursor: var(--ams-file-input-cursor); @@ -18,6 +20,7 @@ font-size: var(--ams-file-input-font-size); font-weight: var(--ams-file-input-font-weight); line-height: var(--ams-file-input-line-height); + max-inline-size: 100%; outline-offset: var(--ams-file-input-outline-offset); padding-block: var(--ams-file-input-padding-block); padding-inline: var(--ams-file-input-padding-inline); @@ -32,12 +35,13 @@ } .ams-file-input::file-selector-button { + appearance: none; background-color: var(--ams-file-input-file-selector-button-background-color); box-shadow: var(--ams-file-input-file-selector-button-box-shadow); color: var(--ams-file-input-file-selector-button-color); cursor: var(--ams-file-input-file-selector-button-cursor); font-family: inherit; - font-weight: inherit; + font-size: 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 a55b7c56c9..704b0b402d 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": { + "background-color": { "value": "{ams.color.primary-white}" }, "border": { "value": "{ams.border.width.sm} dashed {ams.color.neutral-grey3}" }, "color": { "value": "{ams.color.primary-black}" }, "cursor": { "value": "{ams.action.activate.cursor}" }, @@ -16,9 +17,9 @@ "cursor": { "value": "{ams.action.disabled.cursor}" } }, "file-selector-button": { - "background-color": { "value": "{ams.color.primary-white}" }, "color": { "value": "{ams.color.primary-blue}" }, "cursor": { "value": "{ams.action.activate.cursor}" }, + "background-color": { "value": "{ams.color.primary-white}" }, "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}" },