fix(checkbox): fix checkbox theming issues

didimmova · didimmova · commit a2c900de2820 · 2025-10-23T16:58:37.000+03:00
diff --git a/src/components/checkbox/themes/shared/checkbox/checkbox.bootstrap.scss b/src/components/checkbox/themes/shared/checkbox/checkbox.bootstrap.scss
@@ -53,14 +53,9 @@ $theme: $bootstrap;
 }
 
 :host(:hover) {
-    [part~='control']::after {
+    [part='control']::after {
         box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'empty-color-hover');
     }
-
-    [part='control checked']::after {
-        background: var-get($theme, 'fill-color-hover');
-        box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'fill-color-hover');
-    }
 }
 
 :host(:focus-visible) ,
diff --git a/src/components/checkbox/themes/shared/checkbox/checkbox.common.scss b/src/components/checkbox/themes/shared/checkbox/checkbox.common.scss
@@ -1,14 +1,25 @@
 @use 'styles/utilities' as *;
 @use '../../light/checkbox/themes' as *;
 
-$theme: $base;
+$theme: $material;
 
 [part~='label'] {
     @include type-style('body-2');
 
     color: var-get($theme, 'label-color');
 }
 
+:host(:hover) {
+    [part~='label'] {
+        color: var-get($theme, 'label-color-hover');
+    }
+
+    [part='control checked']::after {
+        background: var-get($theme, 'fill-color-hover');
+        box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'fill-color-hover');
+    }
+}
+
 [part~='control'] {
     background: var-get($theme, 'empty-fill-color');
 }
diff --git a/src/components/checkbox/themes/shared/checkbox/checkbox.fluent.scss b/src/components/checkbox/themes/shared/checkbox/checkbox.fluent.scss
@@ -55,13 +55,6 @@ $disabled-color: var-get($theme, 'disabled-color');
     }
 }
 
-:host(:hover) [part='control checked'] {
-    &::after {
-        background: $checked-hover-color;
-        box-shadow: inset 0 0 0 rem(1px) $checked-hover-color;
-    }
-}
-
 :host([indeterminate]) {
     [part~='indicator'] {
         display: none;
diff --git a/src/components/checkbox/themes/shared/checkbox/checkbox.indigo.scss b/src/components/checkbox/themes/shared/checkbox/checkbox.indigo.scss
@@ -58,21 +58,14 @@ $error-color-hover: var-get($theme, 'error-color-hover');
 }
 
 :host(:hover) {
-    [part~='label'] {
-        color: var-get($theme, 'label-color-hover');
-    }
-
-    [part~='control'] {
+    [part='control'] {
         &::after {
             border-color: var-get($theme, 'empty-color-hover');
         }
     }
 
-    [part='control checked'] {
-        &::after {
-            background: $fill-color-hover;
-            border-color: $fill-color-hover;
-        }
+    [part='control checked']::after {
+        border-color: var-get($theme, 'fill-color-hover');
     }
 }
 
diff --git a/src/components/checkbox/themes/shared/checkbox/checkbox.material.scss b/src/components/checkbox/themes/shared/checkbox/checkbox.material.scss
@@ -12,6 +12,12 @@ $theme: $material;
     }
 }
 
+:host(:hover) {
+    [part='control checked']::after {
+        border-color: var-get($theme, 'fill-color-hover');
+    }
+}
+
 [part~='label'] {
     @include type-style('subtitle-1');
 }

Original file line number	Diff line number	Diff line change
`@@ -53,14 +53,9 @@ $theme: $bootstrap;`
`53`	`53`	`}`
`54`	`54`
`55`	`55`	`:host(:hover) {`
`56`		`- [part~='control']::after {`
	`56`	`+ [part='control']::after {`
`57`	`57`	`box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'empty-color-hover');`
`58`	`58`	`}`
`59`		`-`
`60`		`- [part='control checked']::after {`
`61`		`- background: var-get($theme, 'fill-color-hover');`
`62`		`- box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'fill-color-hover');`
`63`		`- }`
`64`	`59`	`}`
`65`	`60`
`66`	`61`	`:host(:focus-visible) ,`
Original file line number	Diff line number	Diff line change
`@@ -55,13 +55,6 @@ $disabled-color: var-get($theme, 'disabled-color');`
`55`	`55`	`}`
`56`	`56`	`}`
`57`	`57`
`58`		`-:host(:hover) [part='control checked'] {`
`59`		`- &::after {`
`60`		`- background: $checked-hover-color;`
`61`		`- box-shadow: inset 0 0 0 rem(1px) $checked-hover-color;`
`62`		`- }`
`63`		`-}`
`64`		`-`
`65`	`58`	`:host([indeterminate]) {`
`66`	`59`	`[part~='indicator'] {`
`67`	`60`	`display: none;`
Original file line number	Diff line number	Diff line change
`@@ -58,21 +58,14 @@ $error-color-hover: var-get($theme, 'error-color-hover');`
`58`	`58`	`}`
`59`	`59`
`60`	`60`	`:host(:hover) {`
`61`		`- [part~='label'] {`
`62`		`- color: var-get($theme, 'label-color-hover');`
`63`		`- }`
`64`		`-`
`65`		`- [part~='control'] {`
	`61`	`+ [part='control'] {`
`66`	`62`	`&::after {`
`67`	`63`	`border-color: var-get($theme, 'empty-color-hover');`
`68`	`64`	`}`
`69`	`65`	`}`
`70`	`66`
`71`		`- [part='control checked'] {`
`72`		`- &::after {`
`73`		`- background: $fill-color-hover;`
`74`		`- border-color: $fill-color-hover;`
`75`		`- }`
	`67`	`+ [part='control checked']::after {`
	`68`	`+ border-color: var-get($theme, 'fill-color-hover');`
`76`	`69`	`}`
`77`	`70`	`}`
`78`	`71`
Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,12 @@ $theme: $material;`
`12`	`12`	`}`
`13`	`13`	`}`
`14`	`14`
	`15`	`+:host(:hover) {`
	`16`	`+ [part='control checked']::after {`
	`17`	`+ border-color: var-get($theme, 'fill-color-hover');`
	`18`	`+ }`
	`19`	`+}`
	`20`	`+`
`15`	`21`	`[part~='label'] {`
`16`	`22`	`@include type-style('subtitle-1');`
`17`	`23`	`}`