fix(checkbox): fix checkbox theme to use properties properly

Author: didimmova

projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-component.scss

@@ -110,6 +110,10 @@
                 @include e(composite-mark) {
                     @extend %cbx-composite-mark--invalid--fluent !optional;
                 }
+
+                @include e(label) {
+                    @extend %cbx-label--invalid !optional;
+                }
             }
 
             &:active {
@@ -181,6 +185,12 @@
             @include e(ripple) {
                 @extend %cbx-ripple--focused-invalid !optional;
             }
+
+            &:hover {
+                @include e(ripple) {
+                    @extend %cbx-ripple--hover-invalid !optional;
+                }
+            }
         }
 
         @include mx(indigo, focused, invalid) {
@@ -322,6 +332,21 @@
                 @extend %cbx-ripple--focused !optional;
                 @extend %cbx-ripple--focused-checked !optional;
             }
+
+            &:hover {
+                @include e(ripple) {
+                    @extend %cbx-ripple--focused !optional;
+                    @extend %cbx-ripple--focused--hover-checked !optional;
+                }
+            }
+        }
+
+        @include mx(focused, invalid, checked) {
+            &:hover {
+                @include e(ripple) {
+                    @extend %cbx-ripple--hover-invalid !optional;
+                }
+            }
         }
 
         @include mx(focused, indeterminate) {

projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss

@@ -291,6 +291,14 @@
                 z-index: 1;
             }
         }
+
+        &:hover {
+            %cbx-composite {
+                &::before {
+                    background: var-get($theme, 'fill-color-hover');
+                }
+            }
+        }
     }
 
     %igx-checkbox--disabled-indeterminate-fluent {
@@ -458,11 +466,11 @@
     }
 
     %cbx-ripple--hover-checked {
-        background: var-get($theme, 'fill-color');
+        background: var-get($theme, 'fill-color-hover');
     }
 
     %cbx-ripple--hover-invalid {
-        background: var-get($theme, 'error-color');
+        background: var-get($theme, 'error-color-hover');
     }
 
     %igx-checkbox--focused-indigo {
@@ -544,6 +552,10 @@
         background: var-get($theme, 'fill-color');
     }
 
+    %cbx-ripple--focused--hover-checked {
+        background: var-get($theme, 'fill-color-hover');
+    }
+
     %cbx-ripple--focused-invalid {
         background: var-get($theme, 'error-color');
     }