fix(checkbox): disabled state tick color (#1528)

SisIvanova · web-flow · commit 4055f987e543 · 2025-01-06T14:53:40.000+02:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -79,7 +79,7 @@
     "globby": "^14.0.2",
     "husky": "^9.1.7",
     "ig-typedoc-theme": "^5.0.4",
-    "igniteui-theming": "^14.3.0",
+    "igniteui-theming": "^14.3.1",
     "keep-a-changelog": "^2.5.3",
     "lint-staged": "^15.2.11",
     "lit-analyzer": "^2.0.3",
diff --git a/src/components/checkbox/themes/shared/checkbox/checkbox.common.scss b/src/components/checkbox/themes/shared/checkbox/checkbox.common.scss
@@ -29,4 +29,8 @@ $theme: $base;
     [part~='label'] {
         color: var-get($theme, 'disabled-color-label');
     }
+
+    [part~='indicator'] {
+        stroke: var-get($theme, 'disabled-tick-color');
+    }
 }
diff --git a/src/components/checkbox/themes/shared/checkbox/checkbox.indigo.scss b/src/components/checkbox/themes/shared/checkbox/checkbox.indigo.scss
@@ -220,7 +220,8 @@ $error-color-hover: var-get($theme, 'error-color-hover');
     }
 
     [part~='indicator'] {
-        stroke-opacity: 0.4;
+        stroke: unset;
+        fill: var-get($theme, 'disabled-tick-color');
     }
 }
 
@@ -230,4 +231,12 @@ $error-color-hover: var-get($theme, 'error-color-hover');
         background: $disabled-indeterminate-color;
         border-color: transparent;
     }
+
+    [part~='indicator'] {
+        fill: none;
+
+        rect {
+            fill: var-get($theme, 'disabled-tick-color');
+        }
+    }
 }

Original file line number	Diff line number	Diff line change
`@@ -29,4 +29,8 @@ $theme: $base;`
`29`	`29`	`[part~='label'] {`
`30`	`30`	`color: var-get($theme, 'disabled-color-label');`
`31`	`31`	`}`
	`32`	`+`
	`33`	`+ [part~='indicator'] {`
	`34`	`+ stroke: var-get($theme, 'disabled-tick-color');`
	`35`	`+ }`
`32`	`36`	`}`
Original file line number	Diff line number	Diff line change
`@@ -220,7 +220,8 @@ $error-color-hover: var-get($theme, 'error-color-hover');`
`220`	`220`	`}`
`221`	`221`
`222`	`222`	`[part~='indicator'] {`
`223`		`- stroke-opacity: 0.4;`
	`223`	`+ stroke: unset;`
	`224`	`+ fill: var-get($theme, 'disabled-tick-color');`
`224`	`225`	`}`
`225`	`226`	`}`
`226`	`227`
`@@ -230,4 +231,12 @@ $error-color-hover: var-get($theme, 'error-color-hover');`
`230`	`231`	`background: $disabled-indeterminate-color;`
`231`	`232`	`border-color: transparent;`
`232`	`233`	`}`
	`234`	`+`
	`235`	`+ [part~='indicator'] {`
	`236`	`+ fill: none;`
	`237`	`+`
	`238`	`+ rect {`
	`239`	`+ fill: var-get($theme, 'disabled-tick-color');`
	`240`	`+ }`
	`241`	`+ }`
`233`	`242`	`}`