IBX-7627: Implemented theme colors for toolbox (#1229)

ibexa · Apr 9, 2024 · ffde9b4 · ffde9b4
1 parent 67280a1
commit ffde9b4
Showing 1 changed file with 8 additions and 3 deletions.
diff --git a/src/bundle/Resources/public/scss/mixins/_drag-and-drop.scss b/src/bundle/Resources/public/scss/mixins/_drag-and-drop.scss
@@ -1,3 +1,8 @@
+:root {
+    --ibexa-hover-color: var(--ibexa-hover-color, $ibexa-color-primary);
+    --ibexa-border-color: var(--ibexa-border-color, $ibexa-color-dark);
+}
+
 @mixin drag-module-backdrop-background {
     background-image: radial-gradient($ibexa-color-light 0.5px, transparent 0); // 0.5px is needed so that both on HD and Retina we have 1px
     background-color: $ibexa-color-light-200;
@@ -290,11 +295,11 @@
         cursor: pointer;
 
         &:hover {
-            color: $ibexa-color-primary;
+            color: var(--ibexa-hover-color);
 
             #{$self}__toggler {
                 .ibexa-icon {
-                    fill: $ibexa-color-primary;
+                    fill: var(--ibexa-hover-color);
                 }
             }
         }
@@ -330,7 +335,7 @@
 
     &:hover {
         #{$self}__content {
-            border-color: $ibexa-color-dark;
+            border-color: var(--ibexa-border-color);
             transform: scale(1.02) translateX(-10px);
             box-shadow: calculateRem(4px) calculateRem(10px) calculateRem(17px) 0 rgba($ibexa-color-info, 0.2);
         }