fix(switch): style component using sass themes (#1991)

Author: SisIvanova

src/components/checkbox/themes/shared/switch/switch.bootstrap.scss

@@ -56,15 +56,6 @@ $theme: $bootstrap;
 
 :host(:not([disabled]):hover),
 :host(:not(:disabled):hover)  {
-    [part~='control'] {
-        border-color: var-get($theme, 'border-hover-color');
-    }
-
-    [part~='control'][part~='checked'] {
-        background: var-get($theme, 'track-on-hover-color');
-        border-color: var-get($theme, 'border-on-hover-color');
-    }
-
     [part~='thumb'][part~='checked'] {
         background: var-get($theme, 'thumb-on-color');
     }

src/components/checkbox/themes/shared/switch/switch.common.scss

@@ -20,6 +20,18 @@ $theme: $material;
     }
 }
 
+:host(:not([disabled]):hover),
+:host(:not(:disabled):hover) {
+    [part~='control'] {
+        border-color: var-get($theme, 'border-hover-color');
+    }
+
+    [part~='control'][part~='checked'] {
+        background: var-get($theme, 'track-on-hover-color');
+        border-color: var-get($theme, 'border-on-hover-color');
+    }
+}
+
 :host([disabled]),
 :host(:disabled) {
     [part~='label'] {

src/components/checkbox/themes/shared/switch/switch.fluent.scss

@@ -61,16 +61,14 @@ $theme: $fluent;
 
 :host(:not([disabled]):hover),
 :host(:not(:disabled):hover)  {
-    [part~='control'] {
-        border-color: var-get($theme, 'border-hover-color');
+    [part~='thumb'][part~='checked'] {
+        background: var-get($theme, 'thumb-on-color');
     }
+}
 
+:host([disabled]),
+:host(:disabled) {
     [part~='control'][part~='checked'] {
-        background: var-get($theme, 'track-on-hover-color');
-        border-color: var-get($theme, 'border-on-hover-color');
-    }
-
-    [part~='thumb'][part~='checked'] {
-        background: var-get($theme, 'thumb-on-color');
+        border-color: var-get($theme, 'track-on-disabled-color');
     }
 }

src/components/checkbox/themes/shared/switch/switch.indigo.scss

@@ -19,17 +19,6 @@ $border-width: rem(1px);
     @include type-style('body-2');
 }
 
-:host(:hover) {
-    [part~='control'] {
-        border-color: var-get($theme, 'border-hover-color');
-    }
-
-    [part~='control'][part~='checked'] {
-        background: var-get($theme, 'track-on-hover-color');
-        border-color: var-get($theme, 'border-on-hover-color');
-    }
-}
-
 [part~='control'][part~='focused'] {
     box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color');
 }

src/components/checkbox/themes/shared/switch/switch.material.scss

@@ -32,14 +32,6 @@ $ripple-radius: calc(#{$ripple-size} / 2);
                 background: var-get($theme, 'thumb-on-color');
             }
         }
-
-        [part~='control'] {
-            border-color: var-get($theme, 'border-hover-color');
-        }
-
-        [part~='control'][part~='checked'] {
-            border-color: var-get($theme, 'border-on-hover-color');
-        }
     }
 
     &:focus-visible,
@@ -98,6 +90,10 @@ $ripple-radius: calc(#{$ripple-size} / 2);
         overflow: hidden;
         z-index: -1;
     }
+
+    &:hover {
+        box-shadow: var-get($theme, 'hover-elevation');
+    }
 }
 
 [part~='thumb'][part~='checked'] {
@@ -107,3 +103,10 @@ $ripple-radius: calc(#{$ripple-size} / 2);
     animation-duration: .2s;
     animation-fill-mode: forwards;
 }
+
+:host([disabled]),
+:host(:disabled) {
+    [part~='thumb'] {
+        box-shadow: var-get($theme, 'disabled-elevation');
+    }
+}