use css vars

ibexa · Oct 17, 2023 · 1ba6723 · 1ba6723
1 parent 9ebe29b
commit 1ba6723
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 51 deletions.
diff --git a/src/bundle/Resources/public/scss/_buttons.scss b/src/bundle/Resources/public/scss/_buttons.scss
@@ -124,23 +124,26 @@
     }
 
     &--ghost.ibexa-btn {
+        --ibexa-btn-primary-color: var(--ibexa-primary-color, #{$ibexa-color-primary});
+
         color: $ibexa-color-dark;
         fill: $ibexa-color-dark;
 
         &:hover {
-            color: $ibexa-color-primary;
+            color: var(--ibexa-btn-primary-color);
 
             .ibexa-icon {
-                fill: $ibexa-color-primary;
+                fill: var(--ibexa-btn-primary-color);
             }
         }
 
         &:focus {
-            color: $ibexa-color-primary;
-            border-color: $ibexa-color-primary;
+            color: var(--ibexa-btn-primary-color);
+            border-color: var(--ibexa-btn-primary-color);
+            box-shadow: 0 0 0 calculateRem(3px) var(--ibexa-btn-shadow-box-primary-color);
 
             .ibexa-icon {
-                fill: $ibexa-color-primary;
+                fill: var(--ibexa-btn-primary-color);
             }
         }
 

diff --git a/src/bundle/Resources/public/scss/_dropdown.scss b/src/bundle/Resources/public/scss/_dropdown.scss
@@ -1,4 +1,6 @@
 .ibexa-dropdown {
+    --ibexa-dropdown-primary-color: var(--ibexa-primary-color, #{$ibexa-color-primary});
+
     position: relative;
     font-size: $ibexa-text-font-size-medium;
     min-width: calculateRem(200px);
@@ -298,8 +300,8 @@
     &--focused {
         .ibexa-dropdown {
             &__selection-info {
-                border-color: $ibexa-color-primary;
-                box-shadow: 0 0 0 calculateRem(2px) rgba($ibexa-color-primary, 0.2);
+                border-color: var(--ibexa-dropdown-primary-color);
+                box-shadow: 0 0 0 calculateRem(2px) var(--ibexa-dropdown-shadow-box-primary-color, rgba($ibexa-color-primary, 0.2));
             }
         }
     }
@@ -382,11 +384,11 @@
         .ibexa-dropdown {
             &__selection-info {
                 &:hover {
-                    border-color: $ibexa-color-primary;
+                    border-color: var(--ibexa-dropdown-primary-color);
 
                     &::before,
                     &::after {
-                        background-color: $ibexa-color-primary;
+                        background-color: var(--ibexa-dropdown-primary-color);
                     }
                 }
             }
@@ -475,7 +477,7 @@
 
                 &:hover {
                     .ibexa-dropdown__selected-item {
-                        color: $ibexa-color-primary;
+                        color: var(--ibexa-primary-color);
                     }
                 }
             }

diff --git a/src/bundle/Resources/public/scss/_inputs.scss b/src/bundle/Resources/public/scss/_inputs.scss
@@ -19,11 +19,27 @@
 }
 
 .ibexa-input {
+    --ibexa-input-primary-color: var(--ibexa-primary-color, #{$ibexa-color-primary});
+
     outline: none;
     transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
     border: calculateRem(1px) solid $ibexa-color-dark-300;
 
-    @include ibexa-input-hover-and-focus($ibexa-color-primary);
+    &:hover {
+        border-color: var(--ibexa-input-primary-color);
+    }
+
+    &:focus,
+    &.ibexa-input--text.form-control:focus,
+    &.ibexa-input--date.form-control:focus {
+        border-color: var(--ibexa-input-primary-color);
+        box-shadow: 0 0 calculateRem(3px) 0 var(--ibexa-input-shadow-box-primary-color);
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+        border-color: $ibexa-color-dark-200;
+    }
 
     &--text,
     &--textarea,
@@ -35,6 +51,15 @@
         border-radius: $ibexa-border-radius;
         position: relative;
 
+        &:focus,
+        &.form-control:focus {
+            color: $ibexa-color-dark;
+        }
+
+        &:hover:not(:disabled) {
+            border-color: var(--ibexa-input-primary-color);
+        }
+
         &:active:not(:disabled) {
             border-color: $ibexa-color-dark;
         }
@@ -129,12 +154,12 @@
         }
 
         &:checked {
-            border-color: $ibexa-color-primary;
-            background-color: $ibexa-color-primary;
+            border-color: var(--ibexa-input-primary-color);
+            background-color: var(--ibexa-input-primary-color);
 
             &:disabled {
-                border-color: $ibexa-color-primary-300;
-                background-color: $ibexa-color-primary-300;
+                border-color: var(--ibexa-input-checkbox-disabled-primary-color, #{$ibexa-color-primary-300});
+                background-color: var(--ibexa-input-checkbox-disabled-primary-color, #{$ibexa-color-primary-300});
             }
 
             &::after {
@@ -143,12 +168,12 @@
         }
 
         &:indeterminate {
-            border-color: $ibexa-color-primary;
-            background-color: $ibexa-color-primary;
+            border-color: var(--ibexa-input-primary-color);
+            background-color: var(--ibexa-input-primary-color);
 
             &:disabled {
-                border-color: $ibexa-color-primary-300;
-                background-color: $ibexa-color-primary-300;
+                border-color: var(--ibexa-input-checkbox-disabled-primary-color, #{$ibexa-color-primary-300});
+                background-color: var(--ibexa-input-checkbox-disabled-primary-color, #{$ibexa-color-primary-300});
             }
 
             &::after {
@@ -168,12 +193,12 @@
         margin-bottom: calculateRem(2px);
 
         &:checked {
-            border-color: $ibexa-color-primary;
-            box-shadow: inset 0 0 0 calculateRem(4px) $ibexa-color-primary;
+            border-color: var(--ibexa-input-primary-color);
+            box-shadow: inset 0 0 0 calculateRem(4px) var(--ibexa-input-primary-color);
 
             &:disabled {
-                border-color: $ibexa-color-primary-300;
-                box-shadow: inset 0 0 0 calculateRem(4px) $ibexa-color-primary-300;
+                border-color: var(--ibexa-primary-disabled-color);
+                box-shadow: inset 0 0 0 calculateRem(4px) var(--ibexa-primary-disabled-color);
             }
 
             &:focus {
@@ -187,7 +212,7 @@
                     height: calculateRem(16px);
                     border-radius: calculateRem(8px);
                     background: transparent;
-                    box-shadow: 0 0 calculateRem(3px) 0 rgba($ibexa-color-primary, 0.75);
+                    box-shadow: 0 0 calculateRem(3px) 0 var(--ibexa-input-shadow-box-primary-color);
                 }
             }
         }
@@ -418,7 +443,7 @@
 
     &:hover {
         .ibexa-input {
-            border-color: $ibexa-color-primary;
+            border-color: var(--ibexa-input-primary-color);
         }
     }
 }

diff --git a/src/bundle/Resources/public/scss/mixins/_inputs.scss b/src/bundle/Resources/public/scss/mixins/_inputs.scss
@@ -41,29 +41,3 @@
     flex-basis: 100%;
     margin: 0 0 calculateRem(10px) calculateRem(2px);
 }
-
-@mixin ibexa-input-hover-and-focus($color) {
-    &:hover {
-        border-color: $color;
-    }
-
-    &:focus,
-    &.ibexa-input--text.form-control:focus,
-    &.ibexa-input--date.form-control:focus {
-        border-color: $color;
-        box-shadow: 0 0 calculateRem(3px) 0 rgba($color, 0.75);
-    }
-
-    &--text,
-    &--textarea,
-    &--date {
-        &:focus,
-        &.form-control:focus {
-            color: $ibexa-color-dark;
-        }
-
-        &:hover:not(:disabled) {
-            border-color: $color;
-        }
-    }
-}