From a752b8ad3ea8ef09eb4225839660c2740b6938fc Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Tue, 17 May 2022 17:44:47 +0000
Subject: [PATCH 1/2] fix(multiple): fix focus and hover styles for
 mdc-checkbox and mdc-radio

---
 .../mdc-checkbox/_checkbox-private.scss       | 23 ++++++++++++++++---
 .../mdc-checkbox/_checkbox-theme.scss         |  6 ++---
 .../mdc-list/_list-option-theme.scss          |  4 ++--
 .../mdc-list/_list-theme.scss                 |  6 ++---
 .../mdc-radio/_radio-theme.scss               | 18 +++++++++++++--
 5 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/src/material-experimental/mdc-checkbox/_checkbox-private.scss b/src/material-experimental/mdc-checkbox/_checkbox-private.scss
index 0a46f6a2a62c..7a2c12e711ed 100644
--- 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,
@@ -43,4 +50,14 @@ $private-checkbox-theme-config: map.merge(mdc-checkbox-theme.$light-theme, (
     unselected-icon-color: $border-color,
     unselected-pressed-icon-color: $border-color,
   ));
+
+  // 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: $active-border-color;
+      }
+    }
+  }
 }
diff --git a/src/material-experimental/mdc-checkbox/_checkbox-theme.scss b/src/material-experimental/mdc-checkbox/_checkbox-theme.scss
index 13f2ce83b9ac..5f0da4fe9f9b 100644
--- 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-list/_list-option-theme.scss b/src/material-experimental/mdc-list/_list-option-theme.scss
index 7a6ccdcee09f..5faeb2372468 100644
--- 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
index 2e99d0d15ffa..441bf4cedea5 100644
--- 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
index c2a7e3e3e9a0..311dcb3dacb9 100644
--- 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,
       ));
@@ -52,6 +58,14 @@
       &.mat-warn {
         @include _color-palette($warn);
       }
+
+      // 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: $active-border-color;
+        }
+      }
     }
   }
 }

From e8ea6fee1bc5db0ae4a1e8233f33cdad785b9aaa Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Fri, 20 May 2022 19:23:07 +0000
Subject: [PATCH 2/2] fix(multiple): address feedback

---
 .../mdc-checkbox/_checkbox-private.scss                | 10 ----------
 src/material-experimental/mdc-checkbox/checkbox.scss   | 10 ++++++++++
 src/material-experimental/mdc-radio/_radio-theme.scss  |  8 --------
 src/material-experimental/mdc-radio/radio.scss         |  8 ++++++++
 4 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/material-experimental/mdc-checkbox/_checkbox-private.scss b/src/material-experimental/mdc-checkbox/_checkbox-private.scss
index 7a2c12e711ed..bef1373bf9cb 100644
--- a/src/material-experimental/mdc-checkbox/_checkbox-private.scss
+++ b/src/material-experimental/mdc-checkbox/_checkbox-private.scss
@@ -50,14 +50,4 @@ $private-checkbox-theme-config: map.merge(mdc-checkbox-theme.$light-theme, (
     unselected-icon-color: $border-color,
     unselected-pressed-icon-color: $border-color,
   ));
-
-  // 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: $active-border-color;
-      }
-    }
-  }
 }
diff --git a/src/material-experimental/mdc-checkbox/checkbox.scss b/src/material-experimental/mdc-checkbox/checkbox.scss
index fb8acc0feded..a2bbcee30802 100644
--- 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-radio/_radio-theme.scss b/src/material-experimental/mdc-radio/_radio-theme.scss
index 311dcb3dacb9..8deb22c220e1 100644
--- a/src/material-experimental/mdc-radio/_radio-theme.scss
+++ b/src/material-experimental/mdc-radio/_radio-theme.scss
@@ -58,14 +58,6 @@
       &.mat-warn {
         @include _color-palette($warn);
       }
-
-      // 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: $active-border-color;
-        }
-      }
     }
   }
 }
diff --git a/src/material-experimental/mdc-radio/radio.scss b/src/material-experimental/mdc-radio/radio.scss
index d973ea4e8e0f..5dc8b5b0afd7 100644
--- 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.