refactor(switch): remove invalid state properties (#15610)

Author: SisIvanova

projects/igniteui-angular/src/lib/switch/themes/_base.scss

@@ -212,14 +212,6 @@ $_theme: $material;
             }
         }
 
-        @include mx(focused, invalid) {
-            @include e(ripple) {
-                @extend %switch-ripple--focused;
-
-                background: var-get($_theme, 'error-color-hover');
-            }
-        }
-
         @include m(checked) {
             @include e(composite) {
                 background: var-get($_theme, 'track-on-color');
@@ -267,67 +259,6 @@ $_theme: $material;
             }
         }
 
-        @include m(invalid) {
-            @include e(composite) {
-                border-color: var-get($_theme, 'error-color');
-            }
-
-            &:hover {
-                @include e(ripple) {
-                    @extend %switch-ripple--hover;
-
-                    background: var-get($_theme, 'error-color-hover');
-                }
-            }
-
-            &:active {
-                @include e(ripple) {
-                    @extend %switch-ripple--hover;
-                    @extend %switch-ripple--pressed;
-
-                    background: var-get($_theme, 'error-color-hover');
-                }
-            }
-
-            @include e(label) {
-                color: var-get($_theme, 'label-invalid-color');
-            }
-
-            @include e(label, $m: before) {
-                color: var-get($_theme, 'label-invalid-color');
-            }
-
-            @include e(thumb) {
-                background: var-get($_theme, 'error-color');
-            }
-        }
-
-        @include mx(invalid, checked) {
-            @include e(composite) {
-                border-color: var-get($_theme, 'border-on-color');
-            }
-
-            @include e(thumb) {
-                background: var-get($_theme, 'thumb-on-error-color');
-            }
-
-            &:hover {
-                @include e(ripple) {
-                    @extend %switch-ripple--hover;
-
-                    background: var-get($_theme, 'thumb-on-color');
-                }
-            }
-        }
-
-        @include mx(focused, invalid, checked) {
-            @include e(ripple) {
-                @extend %switch-ripple--focused;
-
-                background: var-get($_theme, 'thumb-on-color');
-            }
-        }
-
         @include m(disabled) {
             user-select: none;
             pointer-events: none;
@@ -360,17 +291,5 @@ $_theme: $material;
                 background: var-get($_theme, 'thumb-on-disabled-color');
             }
         }
-
-        @include mx(disabled, invalid) {
-            @include e(thumb) {
-                background: var-get($_theme, 'thumb-disabled-color');
-            }
-        }
-
-        @include mx(disabled, invalid, checked) {
-            @include e(thumb) {
-                background: var-get($_theme, 'thumb-on-disabled-color');
-            }
-        }
     }
 }

projects/igniteui-angular/src/lib/switch/themes/shared/bootstrap.scss

@@ -51,17 +51,6 @@ $_theme: $bootstrap;
         }
     }
 
-    @include mx(focused, invalid) {
-        @include e(composite) {
-            border-color: var-get($_theme, 'error-color');
-            box-shadow: 0 0 0 rem(4px) var-get($_theme, 'error-color-hover');
-        }
-
-        @include e(thumb) {
-            background: var-get($_theme, 'error-color');
-        }
-    }
-
     @include mx(disabled, checked) {
         @include e(composite) {
             border-color: var-get($_theme, 'track-on-disabled-color');

projects/igniteui-angular/src/lib/switch/themes/shared/fluent.scss

@@ -34,30 +34,6 @@ $_theme: $fluent;
         }
     }
 
-    @include m(invalid) {
-        &:hover {
-            @include e(composite) {
-                border-color: var-get($_theme, 'error-color-hover');
-            }
-
-            @include e(thumb) {
-                background: var-get($_theme, 'error-color-hover');
-            }
-        }
-    }
-
-    @include mx(invalid, checked) {
-        &:hover {
-            @include e(composite) {
-                border-color: var-get($_theme, 'border-on-hover-color');
-            }
-
-            @include e(thumb) {
-                background: var-get($_theme, 'thumb-on-color');
-            }
-        }
-    }
-
     @include mx(disabled, checked) {
         @include e(composite) {
             border-color: var-get($_theme, 'track-on-disabled-color');

projects/igniteui-angular/src/lib/switch/themes/shared/indigo.scss

@@ -31,26 +31,12 @@ $_theme: $indigo;
         }
     }
 
-    @include mx(focused, invalid) {
-        @include e(composite) {
-            box-shadow: 0 0 0 rem(3px) var-get($_theme, 'error-color-hover');
-        }
-    }
-
     @include mx(focused, checked) {
         @include e(composite) {
             box-shadow: 0 0 0 rem(3px) var-get($_theme, 'focus-outline-color-focused');
         }
     }
 
-    @include mx(invalid, checked) {
-        &:hover {
-            @include e(composite) {
-                border-color: var-get($_theme, 'border-on-hover-color');
-            }
-        }
-    }
-
     @include mx(disabled, checked) {
         @include e(composite) {
             border-color: transparent;

projects/igniteui-angular/src/lib/switch/themes/shared/material.scss

@@ -48,36 +48,9 @@ $_theme: $material;
         }
     }
 
-    @include m(invalid) {
-        @include e(composite) {
-            border-color: var-get($_theme, 'track-error-color');
-            background: var-get($_theme, 'track-error-color');
-        }
-    }
-
-    @include mx(invalid, checked) {
-        @include e(composite) {
-            background: var-get($_theme, 'track-on-color');
-            border-color: var-get($_theme, 'border-on-color');
-        }
-    }
-
     @include m(disabled) {
         @include e(thumb) {
             box-shadow: var-get($_theme, 'disabled-elevation');
         }
     }
-
-    @include mx(disabled, invalid) {
-        @include e(composite) {
-            background: var-get($_theme, 'track-disabled-color');
-            border-color: var-get($_theme, 'border-disabled-color');
-        }
-    }
-
-    @include mx(disabled, invalid, checked) {
-        @include e(composite) {
-            background: var-get($_theme, 'track-on-disabled-color');
-        }
-    }
 }