chore: fix some issue with active colors

Author: r0b1n

packages/pluggableWidgets/file-uploader-web/CHANGELOG.md

@@ -10,6 +10,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 -   We made "Associated files/images" preconfigured with corresponding entities.
 
+### Fixed
+
+-   We fixed an issue with hover colors of the dropzone.
+
 ## [2.0.0] - 2025-03-14
 
 ### Added

packages/pluggableWidgets/file-uploader-web/src/ui/FileUploader.scss

@@ -1,10 +1,10 @@
 $file-bg-color: #f8f8f8;
 $file-border-color-default: #ced0d3;
-$file-color-primary-light: #e6eaff;
+$file-color-primary-lighter: #e6eaff;
 $file-brand-primary: #264ae5;
-$file-color-warning-light: #fbedd2;
+$file-color-warning-lighter: #fbedd2;
 $file-brand-warning: #eca51c;
-$file-color-danger-light: #f9d9dc;
+$file-color-danger-lighter: #f9d9dc;
 $file-brand-danger: #e33f4e;
 $file-gray-light: #6c7180;
 $file-brand-success: #3cb33d;
@@ -49,20 +49,24 @@ Place your custom CSS here
         }
 
         &:active {
-            border: 1.5px dashed #24276c;
+            border: 1.5px dashed var(--brand-primary, $file-brand-primary);
             .upload-text {
-                color: #24276c;
+                color: var(--brand-primary, $file-brand-primary);
                 text-decoration: underline;
             }
         }
 
         &.warning {
             border: 1.5px dashed var(--brand-warning, $file-brand-warning);
-            background-color: var(--color-warning-light, $file-color-warning-light);
+            background-color: var(--color-warning-lighter, $file-color-warning-lighter);
         }
         &.error {
             border: 1.5px dashed var(--brand-danger, $file-brand-danger);
-            background-color: var(--color-danger-light, $file-color-danger-light);
+            background-color: var(--color-danger-lighter, $file-color-danger-lighter);
+        }
+        &.active {
+            border: 1.5px solid var(--brand-primary, $file-brand-primary);
+            background-color: var(--color-primary-lighter, $file-color-primary-lighter);
         }
 
         .file-icon {
@@ -158,8 +162,8 @@ Place your custom CSS here
 
                     &.preview-icon {
                         border-radius: 4px;
-                        border: 1px solid var(--color-primary-light, $file-color-primary-light);
-                        background-color: var(--color-primary-light, $file-color-primary-light);
+                        border: 1px solid var(--color-primary-light, $file-color-primary-lighter);
+                        background-color: var(--color-primary-light, $file-color-primary-lighter);
                     }
 
                     .image-preview {