diff --git a/packages/web/src/scss/components/FileUploader/_FileUploaderInput.scss b/packages/web/src/scss/components/FileUploader/_FileUploaderInput.scss index 3580b7459e..a658516959 100644 --- a/packages/web/src/scss/components/FileUploader/_FileUploaderInput.scss +++ b/packages/web/src/scss/components/FileUploader/_FileUploaderInput.scss @@ -87,10 +87,12 @@ $_field-name: 'FileUploaderInput'; .FileUploaderInput .FileUploaderInput__dropZone:hover { border-color: theme.$input-drop-zone-border-color-hover; + background-color: theme.$input-drop-zone-background-hover; } .FileUploaderInput > .FileUploaderInput__input:active ~ .FileUploaderInput__dropZone { border-color: theme.$input-drop-zone-border-color-active; + background-color: theme.$input-drop-zone-background-active; } // 2. @@ -135,7 +137,7 @@ $_field-name: 'FileUploaderInput'; .FileUploaderInput > .FileUploaderInput__input:disabled ~ .FileUploaderInput__dropZone { border-color: form-fields-theme.$box-field-input-border-color-disabled; - background-color: form-fields-theme.$box-field-input-background-disabled; + background-color: form-fields-theme.$input-background-color-disabled; } // stylelint-enable selector-max-class diff --git a/packages/web/src/scss/components/FileUploader/_theme.scss b/packages/web/src/scss/components/FileUploader/_theme.scss index 45b5cc894c..cd10e13133 100644 --- a/packages/web/src/scss/components/FileUploader/_theme.scss +++ b/packages/web/src/scss/components/FileUploader/_theme.scss @@ -1,27 +1,32 @@ -@use '@tokens' as tokens; +@use '@global' as global-tokens; +@use '../../settings/globals'; -$row-gap: tokens.$space-600; +$row-gap: global-tokens.$space-700; -$input-drop-zone-padding: tokens.$space-600; -$input-drop-zone-column-gap: tokens.$space-600; -$input-drop-zone-border: tokens.$border-width-100 tokens.$border-style-100 tokens.$border-primary-default; -$input-drop-zone-draggable-border: tokens.$border-width-100 tokens.$border-style-200 tokens.$border-primary-default; -$input-drop-zone-dragging-border: tokens.$border-width-100 tokens.$border-style-200 tokens.$border-primary-selected; -$input-drop-zone-border-color-hover: tokens.$border-primary-hover; -$input-drop-zone-border-color-active: tokens.$border-primary-active; -$input-drop-zone-border-radius: tokens.$radius-100; -$input-drop-zone-background: tokens.$background-basic; -$input-drop-zone-label-typography: tokens.$body-medium-text-regular; -$input-drop-zone-label-color: tokens.$text-primary-default; -$input-drop-zone-icon-color: tokens.$action-link-primary-default; +$input-drop-zone-padding: global-tokens.$space-700; +$input-drop-zone-column-gap: global-tokens.$space-700; +$input-drop-zone-border: global-tokens.$border-width-100 solid var(--#{globals.$prefix}color-form-field-border-default); +$input-drop-zone-draggable-border: global-tokens.$border-width-100 dashed + var(--#{globals.$prefix}color-form-field-border-default); +$input-drop-zone-dragging-border: global-tokens.$border-width-100 dashed + var(--#{globals.$prefix}color-form-field-border-selected); +$input-drop-zone-border-color-hover: var(--#{globals.$prefix}color-form-field-border-hover); +$input-drop-zone-border-color-active: var(--#{globals.$prefix}color-form-field-border-active); +$input-drop-zone-border-radius: global-tokens.$radius-300; +$input-drop-zone-background: var(--#{globals.$prefix}color-background-interactive-default); +$input-drop-zone-background-hover: var(--#{globals.$prefix}color-background-interactive-hover); +$input-drop-zone-background-active: var(--#{globals.$prefix}color-background-interactive-active); +$input-drop-zone-label-typography: global-tokens.$body-medium-regular; +$input-drop-zone-label-color: var(--#{globals.$prefix}color-text-primary); +$input-drop-zone-icon-color: var(--#{globals.$prefix}color-action-link-primary-default); -$attachment-column-gap: tokens.$space-600; -$attachment-padding: tokens.$space-600; -$attachment-typography: tokens.$body-medium-text-regular; -$attachment-color: tokens.$text-primary-default; -$attachment-border: tokens.$border-width-100 tokens.$border-style-100 tokens.$border-primary-default; -$attachment-border-radius: tokens.$radius-100; -$attachment-background: tokens.$background-basic; -$attachment-image-border: tokens.$border-width-100 tokens.$border-style-100 tokens.$border-secondary-default; -$attachment-image-border-radius: tokens.$radius-100; -$attachment-button-size: tokens.$space-900; +$attachment-column-gap: global-tokens.$space-700; +$attachment-padding: global-tokens.$space-700; +$attachment-typography: global-tokens.$body-medium-semibold; +$attachment-color: var(--#{globals.$prefix}color-text-primary); +$attachment-border: global-tokens.$border-width-100 solid var(--#{globals.$prefix}color-border-basic); +$attachment-border-radius: global-tokens.$radius-300; +$attachment-background: var(--#{globals.$prefix}color-background-primary); +$attachment-image-border: global-tokens.$border-width-100 solid var(--#{globals.$prefix}color-border-basic); +$attachment-image-border-radius: global-tokens.$radius-200; +$attachment-button-size: global-tokens.$space-1100; diff --git a/packages/web/src/scss/components/index.scss b/packages/web/src/scss/components/index.scss index e559d4541c..12010f8b51 100644 --- a/packages/web/src/scss/components/index.scss +++ b/packages/web/src/scss/components/index.scss @@ -10,7 +10,7 @@ @forward 'Dropdown'; // @forward 'FieldGroup'; -// @forward 'FileUploader'; +@forward 'FileUploader'; @forward 'Flex'; @forward 'Grid';