refactor: wt-status-select, wt-slider colors [WTEL-3955, WTEL-3956]

webitel · Nov 29, 2023 · e58c301 · e58c301
1 parent 331f232
commit e58c301
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 6 deletions.
diff --git a/src/components/wt-indicator/_variables.scss b/src/components/wt-indicator/_variables.scss
@@ -6,6 +6,7 @@
 
   --wt-indicator-text-margin: var(--spacing-2xs);
 
+  --wt-indicator-text-color: var(--text-main-color);
   --wt-indicator-primary-color: var(--primary-color);
   --wt-indicator-secondary-color: var(--dp-1-surface-color);
   --wt-indicator-disabled-color: var(--dp-10-surface-color);

diff --git a/src/components/wt-indicator/wt-indicator.vue b/src/components/wt-indicator/wt-indicator.vue
@@ -61,6 +61,7 @@ export default {
 .wt-indicator__text {
   @extend %typo-body-1;
   margin-left: var(--wt-indicator-text-margin);
+  color: var(--wt-indicator-text-color);
 }
 
 .wt-indicator__indicator {

diff --git a/src/components/wt-slider/_variables.scss b/src/components/wt-slider/_variables.scss
@@ -6,10 +6,12 @@
   --wt-slider-width: 100%;
   --wt-slider-input-height: 8px;
   --wt-slider-border: 1px solid var(--secondary-color);
-  --wt-slider-background-color: var(--secondary-color);
+  --wt-slider-background-color: var(--dp-1-surface-color);
   --wt-slider-background-completed-color: var(--primary-color);
 
-  --wt-slider-pointer-background-color: var(--white);
+  --wt-slider-pointer-background-color: var(--dp-24-surface-color);
+  --wt-slider-pointer-background-hover-color: var(--dp-22-surface-color);
+  --wt-slider-pointer-border-color: var(--dp-10-surface-color);
 
   --wt-slider-pointer-radius: 50%;
 

diff --git a/src/components/wt-slider/wt-slider.vue b/src/components/wt-slider/wt-slider.vue
@@ -126,6 +126,7 @@ export default {
     border-radius: var(--wt-slider-pointer-radius);
     background: var(--wt-slider-pointer-background-color);
     -webkit-appearance: none;
+    transition: var(--transition);
   }
 
   &::-webkit-slider-runnable-track {
@@ -137,8 +138,10 @@ export default {
     height: var(--wt-slider-pointer-size);
     border: var(--wt-slider-border);
     border-radius: var(--wt-slider-pointer-radius);
+    border-color: var(--wt-slider-pointer-border-color);
     background: var(--wt-slider-pointer-background-color);
     -moz-appearance: none;
+    transition: var(--transition);
   }
 
   &::-moz-range-track {
@@ -154,6 +157,18 @@ export default {
   }
 }
 
+.wt-slider:hover {
+  .wt-slider__slider {
+    &::-webkit-slider-thumb {
+      background: var(--wt-slider-pointer-background-hover-color);
+    }
+
+    &::-moz-range-thumb {
+      background: var(--wt-slider-pointer-background-hover-color);
+    }
+  }
+}
+
 .wt-slider--disabled {
   .wt-slider__slider {
     pointer-events: none;

diff --git a/src/components/wt-status-select/_variables.scss b/src/components/wt-status-select/_variables.scss
@@ -2,7 +2,8 @@
 :root {
   --wt-status-select-padding: 0 calc(var(--icon-size-md) + var(--spacing-xs)) 0 0; // reset wt-select padding, but preserve arrow icon padding
 
-  --wt-status-select-option-text-color: var(--form-input-color);
-  --wt-status-select-option-background-hover-color: var(--secondary-color);
-  --wt-status-select-option-background-selected-color: var(--secondary-color);
+  --wt-status-select-option-text-color: var(--text-main-color);
+  --wt-status-select-option-background-color: var(--dp-22-surface-color);
+  --wt-status-select-option-background-hover-color: var(--secondary-light-color);
+  //--wt-status-select-option-background-selected-color: var(--primary-light-color);
 }
diff --git a/src/components/wt-status-select/wt-status-select.vue b/src/components/wt-status-select/wt-status-select.vue
@@ -124,14 +124,15 @@ export default {
         min-height: 0;
         padding: 0;
         color: var(--wt-status-select-option-text-color);
+        background: var(--wt-status-select-option-background-color);
       }
 
       .multiselect__option--highlight {
         background: var(--wt-status-select-option-background-hover-color);
       }
 
       .multiselect__option--selected {
-        background: var(--wt-status-select-option-background-selected-color);
+        //background: var(--wt-status-select-option-background-selected-color);
       }
     }
   }