fix(checkbox): update themes so they use properties property

Author: didimmova

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

@@ -9,7 +9,8 @@ $theme: $material;
     color: var-get($theme, 'label-color');
 }
 
-:host(:hover) {
+:host(:not([disabled], :state(ig-invalid)):hover),
+:host(:not([disabled], :state(ig-invalid))[indeterminate]:hover) {
     [part~='label'] {
         color: var-get($theme, 'label-color-hover');
     }

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

@@ -139,7 +139,9 @@ $error-color-hover: var-get($theme, 'error-color-hover');
         }
     }
 
-    [part='base focused'] {
+    [part='base focused'],
+    &:focus-visible,
+    [part='base checked focused'] {
         [part~='control'],
         [part='control checked'] {
             box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color-error');

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

@@ -12,7 +12,8 @@ $theme: $material;
     }
 }
 
-:host(:hover) {
+:host(:not([disabled], :state(ig-invalid)):hover),
+:host(:not([disabled], :state(ig-invalid))[indeterminate]:hover) {
     [part='control checked']::after {
         border-color: var-get($theme, 'fill-color-hover');
     }
@@ -68,7 +69,7 @@ $theme: $material;
     &:hover {
         [part~='control'] {
             &::before {
-                background: var-get($theme, 'fill-color');
+                background: var-get($theme, 'fill-color-hover');
                 opacity: .06;
             }
         }
@@ -88,13 +89,18 @@ $theme: $material;
 
 [part='base checked']:focus-visible,
 [part='base checked focused'] {
-    &:hover [part~='control'],
     [part~='control'] {
         &::before {
             background: var-get($theme, 'fill-color');
             opacity: .12;
         }
     }
+
+    &:hover [part~='control'] {
+        &::before {
+            background: var-get($theme, 'fill-color-hover');
+        }
+    }
 }
 
 :host([indeterminate]) {
@@ -105,7 +111,6 @@ $theme: $material;
         }
     }
 
-    [part='base']:hover,
     [part='base']:focus-visible,
     [part='base focused'] {
         [part~='control']::before {
@@ -128,17 +133,52 @@ $theme: $material;
         }
     }
 
-    [part~='base']:hover {
+    [part='base focused'] {
         [part~='control']::before {
             background: var-get($theme, 'error-color');
         }
     }
 
-    [part='base focused'] {
+    [part='base checked']:focus-visible,
+    [part='base checked focused'] {
         [part~='control']::before {
+            background: var-get($theme, 'error-color');
+            opacity: .12;
+        }
+    }
+}
+
+:host(:not([disabled]):state(ig-invalid):hover),
+:host(:not(:disabled):state(ig-invalid):hover),
+:host(:not([disabled]):state(ig-invalid)[indeterminate]:hover),
+:host(:not(:disabled):state(ig-invalid)[indeterminate]:hover) {
+    [part~='control'] {
+        &::after {
+            border-color: var-get($theme, 'error-color-hover');
+        }
+    }
+
+    [part='control checked'] {
+        &::after {
             background: var-get($theme, 'error-color-hover');
         }
     }
+
+    [part~='control']::before {
+        background: var-get($theme, 'error-color-hover');
+    }
+
+    [part='base checked']:focus-visible,
+    [part='base checked focused'] {
+        [part~='control'] {
+            &::before {
+                background: var-get($theme, 'error-color-hover');
+            }
+
+            &::after {
+                border-color: var-get($theme, 'error-color-hover');}
+        }
+    }
 }
 
 :host(:not([disabled]):state(ig-invalid)[indeterminate]),
@@ -151,14 +191,11 @@ $theme: $material;
     }
 
     [part~='base']:hover {
-        [part~='control']::before {
-            background: var-get($theme, 'error-color-hover');
-        }
-    }
-
-    [part='base focused'] {
-        [part~='control']::before {
-            background: var-get($theme, 'error-color-hover');
+        [part~='control'] {
+            &::after {
+                border-color: var-get($theme, 'error-color-hover');
+                background: var-get($theme, 'error-color-hover');
+            }
         }
     }
 }