refactor(switch): remove invalid state props (#1622)

Co-authored-by: Simeon Simeonoff <[email protected]>

Author: SisIvanova

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

@@ -85,24 +85,6 @@ $theme: $bootstrap;
     }
 }
 
-:host(:not([disabled])[invalid]),
-:host(:not(:disabled)[invalid]) {
-    [part~='control'],
-    [part~='control'][part~='checked'] {
-        border-color: var-get($theme, 'error-color');
-    }
-
-    [part~='control'][part~='checked'],
-    [part~='thumb']:not([part~='checked']) {
-        background: var-get($theme, 'error-color');
-    }
-
-    [part='focused'][part~='control'],
-    [part='focused'][part~='control'][part~='checked'] {
-        box-shadow: 0 0 0 rem(2px) var-get($theme, 'error-color-hover');
-    }
-}
-
 :host([disabled]) {
     [part~='control'][part~='checked'] {
         border-color: var-get($theme, 'track-on-disabled-color');

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

@@ -39,12 +39,3 @@ $theme: $material;
         background: var-get($theme, 'thumb-disabled-color');
     }
 }
-
-:host(:not([disabled])[invalid]),
-:host(:not(:disabled)[invalid]) {
-    color: var-get($theme, 'label-invalid-color');
-
-    [part~='label'] {
-        color: var-get($theme, 'label-invalid-color');
-    }
-}

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

@@ -78,28 +78,3 @@ $theme: $fluent;
         background: var-get($theme, 'thumb-on-color');
     }
 }
-
-:host(:not([disabled])[invalid]),
-:host(:not(:disabled)[invalid]) {
-    [part~='control'][part~='checked'] {
-        background: var-get($theme, 'track-error-color');
-    }
-
-    [part~='control'],
-    [part~='control'][part~='checked'] {
-        border-color: var-get($theme, 'error-color');
-    }
-
-    [part~='thumb'] {
-        background: var-get($theme, 'error-color');
-    }
-
-    [part~='control'][part~='focused'],
-    [part~='control'][part~='checked'][part~='focused'] {
-        box-shadow: 0 0 0 rem(2px) var-get($theme, 'error-color-hover');
-    }
-
-    [part~='thumb'][part~='checked'] {
-        background: var-get($theme, 'thumb-on-error-color');
-    }
-}

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

@@ -72,33 +72,6 @@ $border-width: rem(1px);
     margin-inline-start: calc(100% - var(--thumb-size) - var(--thumb-offset));
 }
 
-:host(:not([disabled])[invalid]),
-:host(:not(:disabled)[invalid]) {
-    [part~='control'] {
-        background: var-get($theme, 'track-error-color');
-    }
-
-    [part~='control'],
-    [part~='control'][part~='checked'] {
-        border-color: var-get($theme, 'error-color');
-    }
-
-    [part~='control'][part~='checked'],
-    [part~='thumb'] {
-        background: var-get($theme, 'error-color');
-    }
-
-    [part~='control'][part~='focused'],
-    [part~='control'][part~='checked'][part~='focused'] {
-        box-shadow: 0 0 0 rem(2px) var-get($theme, 'error-color-hover');
-    }
-
-
-    [part~='thumb'][part~='checked'] {
-        background: var-get($theme, 'thumb-on-error-color');
-    }
-}
-
 :host([disabled]),
 :host(:disabled) {
     [part~='control'][part~='checked'] {

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

@@ -103,39 +103,3 @@ $ripple-radius: calc(#{$ripple-size} / 2);
     animation-duration: .2s;
     animation-fill-mode: forwards;
 }
-
-:host([invalid]) {
-    [part~='control'] {
-        border-color: var-get($theme, 'track-error-color');
-        background: var-get($theme, 'track-error-color');
-    }
-
-    [part~='thumb'] {
-        background: var-get($theme, 'error-color');
-    }
-
-    [part~='thumb'][part~='checked'] {
-        background: var-get($theme, 'thumb-on-error-color');
-    }
-
-    [part~='thumb'][part~='focused'] {
-        &::after {
-            background: var-get($theme, 'error-color-hover');
-        }
-    }
-
-    &:hover {
-        [part~='thumb'] {
-            &::after {
-                background: var-get($theme, 'error-color-hover');
-            }
-        }
-    }
-}
-
-:host(:not([disabled])[invalid]),
-:host(:not(:disabled)[invalid]) {
-    [part~='control'] {
-        background: var-get($theme, 'track-error-color');
-    }
-}