🎨(react) enhance FileUploader component styles

update FileUploader token and css files with new css variables
introduce with the new tokens architectures

packages/react/src/components/Forms/FileUploader/FileUploaderMono.tsx

@@ -13,7 +13,7 @@ export const FileUploaderMono = ({
   const [file, setFile] = useState<File | undefined>(
     fakeDefaultFiles && fakeDefaultFiles.length > 0
       ? fakeDefaultFiles[0]
-      : undefined,
+      : undefined
   );
   // This is made to prevent useEffects inside DropZone that depends on `files` to trigger on each render,
   // doing this preserves the reference of the array.

packages/react/src/components/Forms/FileUploader/FileUploaderMulti.tsx

@@ -38,13 +38,14 @@ export const FileUploaderMulti = ({
               <div className="c__file-uploader__file__specs">
                 <span>{formatBytes(file.size)}</span>
                 <Button
-                  color="tertiary-text"
+                  color="tertiary"
+                  variant="neutral"
                   size="nano"
                   aria-label={t(
                     "components.forms.file_uploader.delete_file_name",
                     {
                       name: file.name,
-                    },
+                    }
                   )}
                   onClick={() => {
                     setFiles(files.filter((f) => f !== file));

packages/react/src/components/Forms/FileUploader/_index.scss

@@ -1,3 +1,20 @@
+@mixin file-uploader-variant($context) {
+  border-color: var(--c--components--forms-fileuploader--color--#{$context});
+
+  .c__file-uploader__inner {
+    &__icon {
+      color: var(--c--components--forms-fileuploader--color--#{$context});
+    }
+
+    // Only apply the color override if the context is "error"
+    @if $context == "error" {
+      &__text {
+        color: var(--c--components--forms-fileuploader--color--#{$context});
+      }
+    }
+  }
+}
+
 .c__file-uploader {
   display: flex;
   align-items: center;
@@ -7,35 +24,20 @@
   border-color: var(--c--components--forms-fileuploader--border-color);
   border-radius: var(--c--components--forms-fileuploader--border-radius);
   color: var(--c--components--forms-fileuploader--color);
-  font-weight: var(--c--theme--font--weights--light);
+  font-weight: var(--c--globals--font--weights--light);
   padding: var(--c--components--forms-fileuploader--padding);
   position: relative;
   cursor: pointer;
-  transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
+  transition: border var(--c--globals--transitions--duration)
+    var(--c--globals--transitions--ease-out);
   background-color: var(--c--components--forms-fileuploader--background-color);
 
   &--success {
-    border-color: var(--c--theme--colors--success-600);
+    @include file-uploader-variant("success");
-
-    .c__file-uploader__inner {
-      &__icon {
-        color: var(--c--theme--colors--success-600);
-      }
-    }
   }
 
   &--error {
-    border-color: var(--c--theme--colors--danger-600);
+    @include file-uploader-variant("error");
-
-    .c__file-uploader__inner {
-      &__icon {
-        color: var(--c--theme--colors--danger-600);
-      }
-
-      &__text {
-        color: var(--c--theme--colors--danger-600);
-      }
-    }
   }
 
   &__inner {
@@ -72,7 +74,7 @@
       color: var(--c--components--forms-fileuploader--text-color);
 
       &:hover {
-        color: var(--c--theme--colors--danger-600);
+        color: var(--c--globals--colors--error-600);
       }
     }
   }
@@ -85,7 +87,9 @@
   }
 
   &__file {
-    background-color: var(--c--components--forms-fileuploader--file-background-color);
+    background-color: var(
+      --c--components--forms-fileuploader--file-background-color
+    );
     border-radius: var(--c--components--forms-fileuploader--file-border-radius);
     border-style: solid;
     border-color: var(--c--components--forms-fileuploader--file-border-color);
@@ -94,7 +98,7 @@
     font-weight: var(--c--components--forms-fileuploader--file-text-weight);
     color: var(--c--components--forms-fileuploader--file-text-color);
     height: 2.5rem;
-    padding: 0 .75rem;
+    padding: 0 0.75rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -124,13 +128,15 @@
   &--active,
   &:hover {
     border-color: var(--c--components--forms-fileuploader--accent-color);
-    background-color: var(--c--components--forms-fileuploader--background-color--active);
+    background-color: var(
+      --c--components--forms-fileuploader--background-color--active
+    );
 
     &.c__file-uploader--animate-icon {
       .c__file-uploader__inner {
         &__icon {
           animation-name: bounce-5;
-          animation-timing-function: var(--c--theme--transitions--ease-out);
+          animation-timing-function: var(--c--globals--transitions--ease-out);
           animation-duration: 2s;
           animation-iteration-count: infinite;
 

packages/react/src/components/Forms/FileUploader/tokens.ts

@@ -1,24 +1,28 @@
 import { DefaultTokens } from "@openfun/cunningham-tokens";
 
 export const tokens = (defaults: DefaultTokens) => ({
-  "background-color": defaults.theme.colors["greyscale-000"],
+  "background-color": defaults.contextuals.background.surface.primary,
-  "border-color": defaults.theme.colors["greyscale-300"],
+  "border-color": defaults.contextuals.border.semantic.neutral.tertiary,
   "border-radius": "0.5rem",
   "border-width": "2px",
   "border-style": "dotted",
-  "background-color--active": defaults.theme.colors["primary-100"],
+  "background-color--active":
-  color: defaults.theme.colors["greyscale-900"],
+    defaults.contextuals.background.semantic.brand.tertiary,
+
+  color: defaults.contextuals.content.semantic.neutral.primary,
+  "color--success": defaults.contextuals.content.semantic.success.tertiary,
+  "color--error": defaults.contextuals.content.semantic.error.tertiary,
   padding: "1rem",
-  "accent-color": defaults.theme.colors["primary-600"],
+  "accent-color": defaults.contextuals.border.semantic.brand.primary,
-  "text-color": defaults.theme.colors["greyscale-600"],
+  "text-color": defaults.contextuals.content.semantic.neutral.tertiary,
   "text-size": "0.6875rem",
   "file-text-size": "0.8125rem",
-  "file-text-color": defaults.theme.colors["greyscale-900"],
+  "file-text-color": defaults.contextuals.content.semantic.neutral.primary,
-  "file-text-weight": defaults.theme.font.weights.light,
+  "file-text-weight": defaults.globals.font.weights.light,
-  "file-border-color": defaults.theme.colors["greyscale-300"],
+  "file-border-color": defaults.contextuals.border.semantic.neutral.tertiary,
   "file-border-width": "1px",
   "file-border-radius": "0.5rem",
-  "file-background-color": defaults.theme.colors["greyscale-000"],
+  "file-background-color": defaults.contextuals.background.surface.primary,
   "file-specs-size": "0.6875rem",
-  "file-specs-color": defaults.theme.colors["greyscale-600"],
+  "file-specs-color": defaults.contextuals.content.semantic.neutral.tertiary,
 });