fix(material-experimental/mdc-checkbox): switch to non-deprecated styles (#23218)

Switches the MDC-based checkbox to the non-deprecated styles.

Author: crisbeto

src/material-experimental/mdc-checkbox/_checkbox-theme.scss

@@ -4,6 +4,7 @@
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/theme/theme';
 @use 'sass:map';
+@use 'sass:color';
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/typography/typography';
 @use '../../material/core/theming/theming';
@@ -12,15 +13,34 @@
 
 // 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) {
-  @include mdc-checkbox-theme.theme-deprecated(
-    (
-      checkmark-color: mdc-theme-color.prop-value(on-#{$color}),
-      container-checked-color: $color,
-      container-disabled-color: rgba(mdc-theme-color.prop-value(on-surface), 0.38),
-      outline-color: rgba(mdc-theme-color.prop-value(on-surface), 0.54),
-    )
-  );
+@mixin private-checkbox-styles-with-color($color, $mdcColor) {
+  $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));
+
+  @include mdc-checkbox-theme.theme((
+    selected-checkmark-color: mdc-theme-color.prop-value(on-#{$mdcColor}),
+
+    selected-focus-icon-color: $color,
+    selected-hover-icon-color: $color,
+    selected-hover-state-layer-color: $color,
+    selected-icon-color: $color,
+    selected-pressed-icon-color: $color,
+    unselected-focus-icon-color: $color,
+    unselected-hover-icon-color: $color,
+
+    selected-focus-state-layer-color: $on-surface,
+    selected-pressed-state-layer-color: $on-surface,
+    unselected-focus-state-layer-color: $on-surface,
+    unselected-hover-state-layer-color: $on-surface,
+    unselected-pressed-state-layer-color: $on-surface,
+
+    disabled-selected-icon-color: $disabled-color,
+    disabled-unselected-icon-color: $disabled-color,
+
+    unselected-icon-color: $border-color,
+    unselected-pressed-icon-color: $border-color,
+  ));
 }
 
 // Apply ripple colors to the MatRipple element and the MDC ripple element when the
@@ -47,21 +67,7 @@
   $accent: theming.get-color-from-palette(map.get($config, accent));
   $warn: theming.get-color-from-palette(map.get($config, warn));
 
-  // Save original values of MDC global variables. We need to save these so we can restore the
-  // variables to their original values and prevent unintended side effects from using this mixin.
-  $orig-border-color: mdc-checkbox-theme.$border-color;
-  $orig-disabled-color: mdc-checkbox-theme.$disabled-color;
-
   @include mdc-helpers.mat-using-mdc-theme($config) {
-    mdc-checkbox-theme.$border-color: rgba(
-      mdc-theme-color.prop-value(on-surface),
-      0.54
-    );
-    mdc-checkbox-theme.$disabled-color: rgba(
-      mdc-theme-color.prop-value(on-surface),
-      0.26
-    );
-
     .mat-mdc-checkbox {
       @include mdc-form-field.core-styles($query: mdc-helpers.$mat-theme-styles-query);
       @include ripple-theme.color((
@@ -78,25 +84,21 @@
       // 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 private-checkbox-styles-with-color(primary);
+        @include private-checkbox-styles-with-color($primary, primary);
         @include _selected-ripple-colors($primary, primary);
       }
 
       &.mat-accent {
-        @include private-checkbox-styles-with-color(secondary);
+        @include private-checkbox-styles-with-color($accent, secondary);
         @include _selected-ripple-colors($accent, secondary);
       }
 
       &.mat-warn {
-        @include private-checkbox-styles-with-color(error);
+        @include private-checkbox-styles-with-color($warn, error);
         @include _selected-ripple-colors($warn, error);
       }
     }
   }
-
-  // Restore original values of MDC global variables.
-  mdc-checkbox-theme.$border-color: $orig-border-color;
-  mdc-checkbox-theme.$disabled-color: $orig-disabled-color;
 }
 
 @mixin typography($config-or-theme) {

src/material-experimental/mdc-checkbox/checkbox.scss

@@ -1,4 +1,5 @@
 @use '@material/checkbox' as mdc-checkbox;
+@use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
 @use '@material/form-field' as mdc-form-field;
 @use '@material/ripple' as mdc-ripple;
 @use '@material/touch-target' as mdc-touch-target;
@@ -23,25 +24,31 @@
   // we have to change it in order for margins to work.
   display: inline-block;
 
-  // The MDC checkbox styles related to the hover state are intertwined with the MDC ripple styles.
-  // We currently don't use the MDC ripple due to size concerns, therefore we need to add some
-  // additional styles to restore the hover state.
-  .mdc-checkbox:hover .mdc-checkbox__native-control:not([disabled]) ~ .mdc-checkbox__ripple {
-    opacity: map.get(mdc-ripple.$dark-ink-opacities, hover);
-    transform: scale(1);
-    transition: mdc-checkbox-transition-enter(opacity, 0, 80ms),
-    mdc-checkbox-transition-enter(transform, 0, 80ms);
-  }
+  .mdc-checkbox {
+    // MDC theme styles also include structural styles so we have to include the theme at least
+    // once here. The values will be overwritten by our own theme file afterwards.
+    @include mdc-checkbox-theme.theme-styles(mdc-checkbox-theme.$light-theme);
+
+    // The MDC checkbox styles related to the hover state are intertwined with the MDC ripple
+    // styles. We currently don't use the MDC ripple due to size concerns, therefore we need to
+    // add some additional styles to restore the hover state.
+    &:hover .mdc-checkbox__native-control:not([disabled]) ~ .mdc-checkbox__ripple {
+      opacity: map.get(mdc-ripple.$dark-ink-opacities, hover);
+      transform: scale(1);
+      transition: mdc-checkbox-transition-enter(opacity, 0, 80ms),
+      mdc-checkbox-transition-enter(transform, 0, 80ms);
+    }
 
-  // Note that the :not([disabled]) here isn't necessary, but we need it for the
-  // extra specificity so that the hover styles don't override the focus styles.
-  .mdc-checkbox .mdc-checkbox__native-control:not([disabled]):focus ~ .mdc-checkbox__ripple {
-    opacity: map.get(mdc-ripple.$dark-ink-opacities, hover) +
-      map.get(mdc-ripple.$dark-ink-opacities, focus);
+    // Note that the :not([disabled]) here isn't necessary, but we need it for the
+    // extra specificity so that the hover styles don't override the focus styles.
+    .mdc-checkbox__native-control:not([disabled]):focus ~ .mdc-checkbox__ripple {
+      opacity: map.get(mdc-ripple.$dark-ink-opacities, hover) +
+        map.get(mdc-ripple.$dark-ink-opacities, focus);
 
-    @include a11y.high-contrast(active, off) {
-      outline: solid 3px;
-      opacity: 1;
+      @include a11y.high-contrast(active, off) {
+        outline: solid 3px;
+        opacity: 1;
+      }
     }
   }
 

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) {
+@mixin private-list-option-color-override($color, $mdcColor) {
   & .mdc-list-item__start, & .mdc-list-item__end {
-    @include checkbox-theme.private-checkbox-styles-with-color($color);
+    @include checkbox-theme.private-checkbox-styles-with-color($color, $mdcColor);
   }
 }
 

src/material-experimental/mdc-list/_list-theme.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '@material/list/evolution-mixins' as mdc-list;
 @use './interactive-list-theme';
 @use './list-option-theme';
@@ -11,6 +12,9 @@
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
+  $primary: theming.get-color-from-palette(map.get($config, primary));
+  $accent: theming.get-color-from-palette(map.get($config, accent));
+  $warn: theming.get-color-from-palette(map.get($config, warn));
 
   // MDC's state styles are tied in with their ripple. Since we don't use the MDC
   // ripple, we need to add the hover, focus and selected states manually.
@@ -20,13 +24,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);
+      @include list-option-theme.private-list-option-color-override($primary, primary);
     }
     .mat-mdc-list-option.mat-accent {
-      @include list-option-theme.private-list-option-color-override(secondary);
+      @include list-option-theme.private-list-option-color-override($accent, secondary);
     }
     .mat-mdc-list-option.mat-warn {
-      @include list-option-theme.private-list-option-color-override(error);
+      @include list-option-theme.private-list-option-color-override($warn, error);
     }
   }
 }

src/material-experimental/mdc-list/list-option.scss

@@ -1,5 +1,6 @@
 @use '@material/checkbox' as mdc-checkbox;
 @use '@material/list/evolution-variables' as mdc-list-variables;
+@use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
 @use '../mdc-helpers/mdc-helpers';
 @use '../../cdk/a11y';
 @use './list-option-trailing-avatar-compat';
@@ -18,6 +19,14 @@
     @include mdc-checkbox.without-ripple($query: animation);
   }
 
+  // We can't use the MDC checkbox here directly, because this checkbox is purely
+  // decorative and including the MDC one will bring in unnecessary JS.
+  .mdc-checkbox {
+    // MDC theme styles also include structural styles so we have to include the theme at least
+    // once here. The values will be overwritten by our own theme file afterwards.
+    @include mdc-checkbox-theme.theme-styles(mdc-checkbox-theme.$light-theme);
+  }
+
   // The internal checkbox is purely decorative, but because it's an `input`, the user can still
   // focus it by tabbing or clicking. Furthermore, `mat-list-option` has the `option` role which
   // doesn't allow a nested `input`. We use `display: none` both to remove it from the tab order