Feat(web): Switch FileUploader component to v3 design tokens #DS-1448

packages/web/src/scss/components/FileUploader/_FileUploaderAttachment.scss

@@ -50,7 +50,7 @@
 
 .FileUploaderAttachment__action {
     @include reset.button();
-    @include accessibility.min-tap-target($size: theme.$attachment-button-size);
+    @include accessibility.min-tap-target($size: theme.$attachment-tap-target-size);
 
     color: inherit;
 

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.
@@ -134,8 +136,8 @@ $_field-name: 'FileUploaderInput';
 // stylelint-enable selector-max-compound-selectors, selector-max-specificity
 
 .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;
+    border-color: form-fields-theme.$input-border-color-disabled;
+    background-color: form-fields-theme.$input-background-color-disabled;
 }
 // stylelint-enable selector-max-class
 

packages/web/src/scss/components/FileUploader/_FileUploaderList.scss

@@ -2,10 +2,10 @@
 
 .FileUploaderList {
     display: grid;
-    row-gap: theme.$row-gap;
+    row-gap: theme.$list-row-gap;
     list-style: none;
 
     &:not(:empty) {
-        margin-top: theme.$row-gap;
+        margin-top: theme.$list-row-gap;
     }
 }

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;
+$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-200 solid var(--#{globals.$prefix}color-form-field-border-default);
+$input-drop-zone-draggable-border: global-tokens.$border-width-200 dashed
+    var(--#{globals.$prefix}color-form-field-border-default);
+$input-drop-zone-dragging-border: global-tokens.$border-width-200 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);
 
-$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;
+$list-row-gap: global-tokens.$space-700;
 
-$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-tap-target-size: global-tokens.$space-1100;

packages/web/src/scss/components/index.scss

@@ -9,8 +9,7 @@
 @forward 'Divider';
 @forward 'Dropdown';
 @forward 'FieldGroup';
-
-// @forward 'FileUploader';
+@forward 'FileUploader';
 @forward 'Flex';
 @forward 'Grid';
 

tests/e2e/demo-components-compare.spec.ts

@@ -8,7 +8,6 @@ import { formatPackageName, getServerUrl, takeScreenshot, waitForPageLoad } from
 const IGNORED_TESTS: string[] = [
   'Accordion',
   'Dropdown',
-  'FileUploader',
   'Header',
   'Icon',
   'Item',