feat(checkbox): update checkbox disabled checked and indeterminate styles (#2158)

* feat(checkbox): update checkbox disabled checked and indeterminate styles

* deps: bump theming

* npm: fix mangled package-lock.json

---------

Co-authored-by: Marin Popov <desig9stein@users.noreply.github.com>
Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.com>

Author: 3 people

package-lock.json

@@ -81,7 +81,7 @@
     "husky": "^9.1.7",
     "ig-typedoc-theme": "^7.0.1",
     "igniteui-i18n-resources": "^1.0.4",
-    "igniteui-theming": "^25.0.2",
+    "igniteui-theming": "^25.0.3",
     "keep-a-changelog": "^3.0.2",
     "lint-staged": "^16.4.0",
     "lit-analyzer": "^2.0.3",

package.json

@@ -170,15 +170,13 @@ $theme: $bootstrap;
     }
 
     [part='control checked']::after {
-        background: var-get($theme, 'disabled-indeterminate-color');
         box-shadow: none;
     }
 }
 
 :host([disabled][indeterminate]),
 :host(:disabled[indeterminate]) {
     [part~='control']::after {
-        background: var-get($theme, 'disabled-indeterminate-color');
         box-shadow: none;
     }
 }

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

@@ -45,4 +45,19 @@ $theme: $material;
     [part~='indicator'] {
         stroke: var-get($theme, 'disabled-tick-color');
     }
+
+    [part='control checked'] {
+        &::after {
+            background: var-get($theme, 'disabled-fill-color');
+        }
+    }
+}
+
+:host([disabled][indeterminate]),
+:host(:disabled[indeterminate]) {
+    [part~='control'] {
+        &::after {
+            background: var-get($theme, 'disabled-indeterminate-color');
+        }
+    }
 }

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

@@ -8,6 +8,8 @@ $checked-hover-color: var-get($theme, 'fill-color-hover');
 $invalid-color: var-get($theme, 'error-color');
 $invalid-hover-color: var-get($theme, 'error-color-hover');
 $disabled-color: var-get($theme, 'disabled-color');
+$disabled-indeterminate-color: var-get($theme, 'disabled-indeterminate-color');
+$disabled-fill-color: var-get($theme, 'disabled-fill-color');
 
 :host {
     ::part(helper-text) {
@@ -223,7 +225,7 @@ $disabled-color: var-get($theme, 'disabled-color');
 
     [part='control checked'] {
         &::after {
-            background: $disabled-color;
+            box-shadow: none;
         }
     }
 }
@@ -232,11 +234,11 @@ $disabled-color: var-get($theme, 'disabled-color');
 :host(:disabled[indeterminate]) {
     [part~='control'] {
         &::before {
-            background: $disabled-color;
+            background: $disabled-indeterminate-color;
         }
 
         &::after {
-            box-shadow: inset 0 0 0 rem(1px) $disabled-color;
+            box-shadow: inset 0 0 0 rem(1px) $disabled-indeterminate-color;
             background: transparent;
         }
     }

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

@@ -207,7 +207,6 @@ $error-color-hover: var-get($theme, 'error-color-hover');
     }
 
     [part='control checked']::after {
-        background: $disabled-indeterminate-color;
         border-color: transparent;
     }
 
@@ -220,7 +219,6 @@ $error-color-hover: var-get($theme, 'error-color-hover');
 :host([disabled][indeterminate]),
 :host(:disabled[indeterminate]) {
     [part~='control']::after {
-        background: $disabled-indeterminate-color;
         border-color: transparent;
     }
 

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

@@ -226,7 +226,7 @@ $theme: $material;
 
     [part='control checked'] {
         &::after {
-            background: var-get($theme, 'disabled-color');
+            border-color: transparent;
         }
     }
 }
@@ -235,8 +235,7 @@ $theme: $material;
 :host(:disabled[indeterminate]) {
     [part~='control'] {
         &::after {
-            background: var-get($theme, 'disabled-indeterminate-color');
-            border-color: var-get($theme, 'disabled-indeterminate-color');
+            border-color: transparent;
         }
     }
 }