fix(checkbox): fix checkbox styles to be identic between projects (#16372)

* fix(checkbox): fix checkbox styles to be identic between projects

* fix(checkbox): fix latest addressed problems

Author: didimmova

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

@@ -62,16 +62,22 @@ $_theme: $material;
         background: var-get($_theme, 'error-color');
     }
 
-    %cbx-ripple--hover-checked,
     %cbx-ripple--focused-checked {
         @extend %cbx-ripple--filled;
     }
 
-    %cbx-ripple--hover-invalid,
+    %cbx-ripple--hover-checked {
+        background: var-get($_theme, 'fill-color-hover');
+    }
+
     %cbx-ripple--focused-invalid {
         @extend %cbx-ripple--error;
     }
 
+    %cbx-ripple--hover-invalid {
+        background: var-get($_theme, 'error-color-hover');
+    }
+
     @include b(igx-checkbox) {
         // TODO: These should be moved to the shema as design tokens
         --size: #{rem(20px)};
@@ -93,6 +99,14 @@ $_theme: $material;
             @include e(ripple) {
                 @extend %cbx-ripple--hovered;
             }
+
+            @include e(label) {
+                color: var-get($_theme, 'label-color-hover');
+            }
+
+            @include e(label, $m: before) {
+                color: var-get($_theme, 'label-color-hover');
+            }
         }
 
         &:active {
@@ -200,6 +214,14 @@ $_theme: $material;
                 @include e(composite) {
                     border-color: var-get($_theme, 'error-color-hover');
                 }
+
+                @include e(label) {
+                    color: var-get($_theme, 'error-color');
+                }
+
+                @include e(label, $m: before) {
+                    color: var-get($_theme, 'error-color');
+                }
             }
 
             &:active {

projects/igniteui-angular/src/lib/checkbox/themes/shared/_bootstrap.scss

@@ -79,6 +79,12 @@ $_theme: $bootstrap;
             box-shadow: 0 0 0 rem(4px)
                 var-get($_theme, 'focus-outline-color-error');
         }
+
+        &:hover {
+            @include e(composite) {
+                border-color: var-get($_theme, 'error-color-hover');
+            }
+        }
     }
 
     @include mx(focused, indeterminate) {
@@ -92,12 +98,9 @@ $_theme: $bootstrap;
             background: var-get($_theme, 'disabled-indeterminate-color');
             border-color: transparent;
         }
-    }
 
-    @include mx(indeterminate, invalid) {
-        @include e(composite) {
-            background: var-get($_theme, 'error-color');
-            border-color: transparent;
+        @include e(composite-mark) {
+            stroke: var-get($_theme, 'disabled-tick-color');
         }
     }
 

projects/igniteui-angular/src/lib/checkbox/themes/shared/_fluent.scss

@@ -88,6 +88,14 @@ $_theme: $fluent;
         }
     }
 
+    @include m(invalid) {
+        &:hover {
+            @include e(composite-mark) {
+                stroke: var-get($_theme, 'error-color');
+            }
+        }
+    }
+
     @include m(checked) {
         &:hover {
             @include e(composite) {
@@ -161,6 +169,10 @@ $_theme: $fluent;
             background: var-get($_theme, 'disabled-color');
             border-color: var-get($_theme, 'disabled-color');
         }
+
+        @include e(composite-mark) {
+            stroke: var-get($_theme, 'disabled-tick-color');
+        }
     }
 
     @include mx(disabled, indeterminate) {

projects/igniteui-angular/src/lib/checkbox/themes/shared/_indigo.scss

@@ -35,10 +35,6 @@ $_theme: $indigo;
         @include type-style(body-2);
         transition: color 0.2s $ease-out-quad;
         transition-delay: var(--_transition-delay);
-
-        &:hover {
-            color: var-get($_theme, 'label-color-hover');
-        }
     }
 
     @include e(label) {
@@ -63,19 +59,27 @@ $_theme: $indigo;
     }
 
     @include m(invalid) {
-        &:hover {
-            @include e(composite) {
-                border-color: var-get($_theme, 'error-color-hover');
-            }
-        }
-
         @include e(label) {
             color: var-get($_theme, 'label-color');
         }
 
         @include e(label, $m: before) {
             color: var-get($_theme, 'label-color');
         }
+
+        &:hover {
+            @include e(composite) {
+                border-color: var-get($_theme, 'error-color-hover');
+            }
+
+            @include e(label) {
+                color: var-get($_theme, 'label-color-hover');
+            }
+
+            @include e(label, $m: before) {
+                color: var-get($_theme, 'label-color-hover');
+            }
+        }
     }
 
     @include m(indeterminate) {
@@ -135,6 +139,13 @@ $_theme: $indigo;
         }
     }
 
+    @include mx(focused, invalid, indeterminate) {
+        @include e(composite) {
+            box-shadow: 0 0 0 rem(3px)
+                var-get($_theme, 'focus-outline-color-error');
+        }
+    }
+
     @include mx(focused, indeterminate) {
         @include e(composite) {
             border-radius: var-get($_theme, 'border-radius');

projects/igniteui-angular/src/lib/checkbox/themes/shared/_material.scss

@@ -22,12 +22,6 @@ $_theme: $material;
         padding: var(--composite-padding);
     }
 
-    @include mx(invalid, checked) {
-        @include e(composite) {
-            background: var-get($_theme, 'error-color');
-        }
-    }
-
     @include mx(invalid, disabled) {
         @include e(composite) {
             border-color: var-get($_theme, 'disabled-color');