fix(multiple): fix focus and hover styles for mdc-checkbox and mdc-radio (#24930)

mmalerba · mmalerba · commit a7ee8a80b882 · 2022-05-24T15:58:36.000Z
* fix(multiple): fix focus and hover styles for mdc-checkbox and mdc-radio * fix(multiple): address feedback (cherry picked from commit 5f5f9d6)
diff --git a/src/material-experimental/mdc-checkbox/_checkbox-private.scss b/src/material-experimental/mdc-checkbox/_checkbox-private.scss
@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use 'sass:color';
+@use '@angular/material' as mat;
 @use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
 @use '@material/theme/theme-color' as mdc-theme-color;
 
@@ -22,10 +23,16 @@ $private-checkbox-theme-config: map.merge(mdc-checkbox-theme.$light-theme, (
 
 // Mixin that includes the checkbox theme styles with a given palette.
 // By default, the MDC checkbox always uses the `secondary` palette.
-@mixin private-checkbox-styles-with-color($color, $mdc-color) {
+@mixin private-checkbox-styles-with-color($color-config, $color, $mdc-color) {
+  $is-dark: map-get($color-config, is-dark);
   $on-surface: mdc-theme-color.prop-value(on-surface);
   $border-color: rgba($on-surface, color.opacity(mdc-checkbox-theme.$border-color));
   $disabled-color: rgba($on-surface, color.opacity(mdc-checkbox-theme.$disabled-color));
+  $active-border-color: if(
+          $is-dark,
+          mat.get-color-from-palette(mat.$gray-palette, 200),
+          mat.get-color-from-palette(mat.$gray-palette, 900)
+  );
 
   @include mdc-checkbox-theme.theme((
     selected-checkmark-color: mdc-theme-color.prop-value(on-#{$mdc-color}),
@@ -34,8 +41,8 @@ $private-checkbox-theme-config: map.merge(mdc-checkbox-theme.$light-theme, (
     selected-hover-icon-color: $color,
     selected-icon-color: $color,
     selected-pressed-icon-color: $color,
-    unselected-focus-icon-color: $color,
-    unselected-hover-icon-color: $color,
+    unselected-focus-icon-color: $active-border-color,
+    unselected-hover-icon-color: $active-border-color,
 
     disabled-selected-icon-color: $disabled-color,
     disabled-unselected-icon-color: $disabled-color,
diff --git a/src/material-experimental/mdc-checkbox/_checkbox-theme.scss b/src/material-experimental/mdc-checkbox/_checkbox-theme.scss
@@ -52,17 +52,17 @@
       // class for accent and warn style, and applying the appropriate overrides below. Since we
       // don't use MDC's ripple, we also need to set the color for our replacement ripple.
       &.mat-primary {
-        @include checkbox-private.private-checkbox-styles-with-color($primary, primary);
+        @include checkbox-private.private-checkbox-styles-with-color($config, $primary, primary);
         @include _selected-ripple-colors($primary, primary);
       }
 
       &.mat-accent {
-        @include checkbox-private.private-checkbox-styles-with-color($accent, secondary);
+        @include checkbox-private.private-checkbox-styles-with-color($config, $accent, secondary);
         @include _selected-ripple-colors($accent, secondary);
       }
 
       &.mat-warn {
-        @include checkbox-private.private-checkbox-styles-with-color($warn, error);
+        @include checkbox-private.private-checkbox-styles-with-color($config, $warn, error);
         @include _selected-ripple-colors($warn, error);
       }
     }
diff --git a/src/material-experimental/mdc-checkbox/checkbox.scss b/src/material-experimental/mdc-checkbox/checkbox.scss
@@ -90,6 +90,16 @@
     display: none;
   }
 
+  // We don't inherit the border focus style from MDC since we don't use their ripple.
+  // Instead we need to replicate it here.
+  .mdc-checkbox__native-control {
+    &:focus:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true]) {
+      & ~ .mdc-checkbox__background {
+        border-color: var(--mdc-checkbox-unselected-focus-icon-color, black);
+      }
+    }
+  }
+
   @include _ripple-base-styles();
 }
 
diff --git a/src/material-experimental/mdc-list/_list-option-theme.scss b/src/material-experimental/mdc-list/_list-option-theme.scss
@@ -6,9 +6,9 @@
 // Mixin that overrides the selected item and checkbox colors for list options. By
 // default, the MDC list uses the `primary` color for list items. The MDC checkbox
 // inside list options by default uses the `primary` color too.
-@mixin private-list-option-color-override($color, $mdc-color) {
+@mixin private-list-option-color-override($color-config, $color, $mdc-color) {
   & .mdc-list-item__start, & .mdc-list-item__end {
-    @include checkbox-private.private-checkbox-styles-with-color($color, $mdc-color);
+    @include checkbox-private.private-checkbox-styles-with-color($color-config, $color, $mdc-color);
   }
 }
 
diff --git a/src/material-experimental/mdc-list/_list-theme.scss b/src/material-experimental/mdc-list/_list-theme.scss
@@ -21,13 +21,13 @@
     @include mdc-list.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
 
     .mat-mdc-list-option {
-      @include list-option-theme.private-list-option-color-override($primary, primary);
+      @include list-option-theme.private-list-option-color-override($config, $primary, primary);
     }
     .mat-mdc-list-option.mat-accent {
-      @include list-option-theme.private-list-option-color-override($accent, secondary);
+      @include list-option-theme.private-list-option-color-override($config, $accent, secondary);
     }
     .mat-mdc-list-option.mat-warn {
-      @include list-option-theme.private-list-option-color-override($warn, error);
+      @include list-option-theme.private-list-option-color-override($config, $warn, error);
     }
   }
 }
diff --git a/src/material-experimental/mdc-radio/_radio-theme.scss b/src/material-experimental/mdc-radio/_radio-theme.scss
@@ -26,6 +26,12 @@
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
     $on-surface: rgba(mdc-theme-color.$on-surface, 0.54);
+    $is-dark: map-get($config, is-dark);
+    $active-border-color: if(
+            $is-dark,
+            mat.get-color-from-palette(mat.$gray-palette, 200),
+            mat.get-color-from-palette(mat.$gray-palette, 900)
+    );
 
     .mat-mdc-radio-button {
       @include mdc-form-field.core-styles($query: mdc-helpers.$mat-theme-styles-query);
@@ -34,8 +40,8 @@
         // MDC applies a separate opacity to disabled buttons.
         disabled-selected-icon-color: mdc-theme-color.$on-surface,
         disabled-unselected-icon-color: mdc-theme-color.$on-surface,
-        unselected-focus-icon-color: $on-surface,
-        unselected-hover-icon-color: $on-surface,
+        unselected-focus-icon-color: $active-border-color,
+        unselected-hover-icon-color: $active-border-color,
         unselected-icon-color: $on-surface,
         unselected-pressed-icon-color: $on-surface,
       ));
diff --git a/src/material-experimental/mdc-radio/radio.scss b/src/material-experimental/mdc-radio/radio.scss
@@ -75,6 +75,14 @@
       transition: none !important;
     }
   }
+
+  // We don't inherit the border focus style from MDC since we don't use their ripple.
+  // Instead we need to replicate it here.
+  .mdc-radio .mdc-radio__native-control:focus:enabled:not(:checked) {
+    & ~ .mdc-radio__background .mdc-radio__outer-circle {
+      border-color: var(--mdc-radio-unselected-focus-icon-color, black);
+    }
+  }
 }
 
 // Element used to provide a larger tap target for users on touch devices.

Original file line number	Diff line number	Diff line change
`@@ -52,17 +52,17 @@`
`52`	`52`	`// class for accent and warn style, and applying the appropriate overrides below. Since we`
`53`	`53`	`// don't use MDC's ripple, we also need to set the color for our replacement ripple.`
`54`	`54`	`&.mat-primary {`
`55`		`- @include checkbox-private.private-checkbox-styles-with-color($primary, primary);`
	`55`	`+ @include checkbox-private.private-checkbox-styles-with-color($config, $primary, primary);`
`56`	`56`	`@include _selected-ripple-colors($primary, primary);`
`57`	`57`	`}`
`58`	`58`
`59`	`59`	`&.mat-accent {`
`60`		`- @include checkbox-private.private-checkbox-styles-with-color($accent, secondary);`
	`60`	`+ @include checkbox-private.private-checkbox-styles-with-color($config, $accent, secondary);`
`61`	`61`	`@include _selected-ripple-colors($accent, secondary);`
`62`	`62`	`}`
`63`	`63`
`64`	`64`	`&.mat-warn {`
`65`		`- @include checkbox-private.private-checkbox-styles-with-color($warn, error);`
	`65`	`+ @include checkbox-private.private-checkbox-styles-with-color($config, $warn, error);`
`66`	`66`	`@include _selected-ripple-colors($warn, error);`
`67`	`67`	`}`
`68`	`68`	`}`
Original file line number	Diff line number	Diff line change
`@@ -6,9 +6,9 @@`
`6`	`6`	`// Mixin that overrides the selected item and checkbox colors for list options. By`
`7`	`7`	// default, the MDC list uses the `primary` color for list items. The MDC checkbox
`8`	`8`	// inside list options by default uses the `primary` color too.
`9`		`-@mixin private-list-option-color-override($color, $mdc-color) {`
	`9`	`+@mixin private-list-option-color-override($color-config, $color, $mdc-color) {`
`10`	`10`	`& .mdc-list-item__start, & .mdc-list-item__end {`
`11`		`- @include checkbox-private.private-checkbox-styles-with-color($color, $mdc-color);`
	`11`	`+ @include checkbox-private.private-checkbox-styles-with-color($color-config, $color, $mdc-color);`
`12`	`12`	`}`
`13`	`13`	`}`
`14`	`14`
Original file line number	Diff line number	Diff line change
`@@ -21,13 +21,13 @@`
`21`	`21`	`@include mdc-list.without-ripple($query: mdc-helpers.$mat-theme-styles-query);`
`22`	`22`
`23`	`23`	`.mat-mdc-list-option {`
`24`		`- @include list-option-theme.private-list-option-color-override($primary, primary);`
	`24`	`+ @include list-option-theme.private-list-option-color-override($config, $primary, primary);`
`25`	`25`	`}`
`26`	`26`	`.mat-mdc-list-option.mat-accent {`
`27`		`- @include list-option-theme.private-list-option-color-override($accent, secondary);`
	`27`	`+ @include list-option-theme.private-list-option-color-override($config, $accent, secondary);`
`28`	`28`	`}`
`29`	`29`	`.mat-mdc-list-option.mat-warn {`
`30`		`- @include list-option-theme.private-list-option-color-override($warn, error);`
	`30`	`+ @include list-option-theme.private-list-option-color-override($config, $warn, error);`
`31`	`31`	`}`
`32`	`32`	`}`
`33`	`33`	`}`
Original file line number	Diff line number	Diff line change
`@@ -75,6 +75,14 @@`
`75`	`75`	`transition: none !important;`
`76`	`76`	`}`
`77`	`77`	`}`
	`78`	`+`
	`79`	`+ // We don't inherit the border focus style from MDC since we don't use their ripple.`
	`80`	`+ // Instead we need to replicate it here.`
	`81`	`+ .mdc-radio .mdc-radio__native-control:focus:enabled:not(:checked) {`
	`82`	`+ & ~ .mdc-radio__background .mdc-radio__outer-circle {`
	`83`	`+ border-color: var(--mdc-radio-unselected-focus-icon-color, black);`
	`84`	`+ }`
	`85`	`+ }`
`78`	`86`	`}`
`79`	`87`
`80`	`88`	`// Element used to provide a larger tap target for users on touch devices.`