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

mmalerba · web-flow · commit 5f5f9d6560dd · 2022-05-24T15:58:32.000Z
* fix(multiple): fix focus and hover styles for mdc-checkbox and mdc-radio

* fix(multiple): address feedback
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
@@ -51,17 +51,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
@@ -19,13 +19,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
@@ -25,6 +25,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);
@@ -33,8 +39,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
@@ -76,6 +76,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
`@@ -51,17 +51,17 @@`
`51`	`51`	`// class for accent and warn style, and applying the appropriate overrides below. Since we`
`52`	`52`	`// don't use MDC's ripple, we also need to set the color for our replacement ripple.`
`53`	`53`	`&.mat-primary {`
`54`		`- @include checkbox-private.private-checkbox-styles-with-color($primary, primary);`
	`54`	`+ @include checkbox-private.private-checkbox-styles-with-color($config, $primary, primary);`
`55`	`55`	`@include _selected-ripple-colors($primary, primary);`
`56`	`56`	`}`
`57`	`57`
`58`	`58`	`&.mat-accent {`
`59`		`- @include checkbox-private.private-checkbox-styles-with-color($accent, secondary);`
	`59`	`+ @include checkbox-private.private-checkbox-styles-with-color($config, $accent, secondary);`
`60`	`60`	`@include _selected-ripple-colors($accent, secondary);`
`61`	`61`	`}`
`62`	`62`
`63`	`63`	`&.mat-warn {`
`64`		`- @include checkbox-private.private-checkbox-styles-with-color($warn, error);`
	`64`	`+ @include checkbox-private.private-checkbox-styles-with-color($config, $warn, error);`
`65`	`65`	`@include _selected-ripple-colors($warn, error);`
`66`	`66`	`}`
`67`	`67`	`}`
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
`@@ -19,13 +19,13 @@`
`19`	`19`	`@include mdc-list.without-ripple($query: mdc-helpers.$mat-theme-styles-query);`
`20`	`20`
`21`	`21`	`.mat-mdc-list-option {`
`22`		`- @include list-option-theme.private-list-option-color-override($primary, primary);`
	`22`	`+ @include list-option-theme.private-list-option-color-override($config, $primary, primary);`
`23`	`23`	`}`
`24`	`24`	`.mat-mdc-list-option.mat-accent {`
`25`		`- @include list-option-theme.private-list-option-color-override($accent, secondary);`
	`25`	`+ @include list-option-theme.private-list-option-color-override($config, $accent, secondary);`
`26`	`26`	`}`
`27`	`27`	`.mat-mdc-list-option.mat-warn {`
`28`		`- @include list-option-theme.private-list-option-color-override($warn, error);`
	`28`	`+ @include list-option-theme.private-list-option-color-override($config, $warn, error);`
`29`	`29`	`}`
`30`	`30`	`}`
`31`	`31`	`}`
Original file line number	Diff line number	Diff line change
`@@ -76,6 +76,14 @@`
`76`	`76`	`transition: none !important;`
`77`	`77`	`}`
`78`	`78`	`}`
	`79`	`+`
	`80`	`+ // We don't inherit the border focus style from MDC since we don't use their ripple.`
	`81`	`+ // Instead we need to replicate it here.`
	`82`	`+ .mdc-radio .mdc-radio__native-control:focus:enabled:not(:checked) {`
	`83`	`+ & ~ .mdc-radio__background .mdc-radio__outer-circle {`
	`84`	`+ border-color: var(--mdc-radio-unselected-focus-icon-color, black);`
	`85`	`+ }`
	`86`	`+ }`
`79`	`87`	`}`
`80`	`88`
`81`	`89`	`// Element used to provide a larger tap target for users on touch devices.`