feat(material-experimental/mdc-checkbox): switch to non-deprecated styles

crisbeto · crisbeto · commit 198e1bdf6285 · 2021-07-22T16:53:13.000+02:00
Switches the MDC-based checkbox to the non-deprecated styles.
diff --git a/src/material-experimental/mdc-checkbox/_checkbox-theme.scss b/src/material-experimental/mdc-checkbox/_checkbox-theme.scss
@@ -1,10 +1,10 @@
 @use '@material/checkbox/checkbox' as mdc-checkbox;
 @use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '@material/form-field' as mdc-form-field;
 @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';
@@ -13,22 +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(
-    (
-      density-scale: null,
-      checkmark-color: mdc-theme-color.prop-value(on-#{$color}),
-      container-checked-color: $color,
-      container-checked-hover-color: null,
-      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),
-      outline-hover-color: null,
-      ripple-color: mdc-theme-color.prop-value(on-surface),
-      ripple-opacity: mdc-ripple-theme.$dark-ink-opacities,
-      ripple-checked-color: $color,
-      ripple-checked-opacity: mdc-ripple-theme.$dark-ink-opacities,
-    )
-  );
+@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
@@ -55,23 +67,8 @@
   $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 private-checkbox-styles-with-color(primary);
       @include mdc-form-field.core-styles($query: mdc-helpers.$mat-theme-styles-query);
       @include ripple-theme.theme((
         foreground: (
@@ -87,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) {
diff --git a/src/material-experimental/mdc-checkbox/checkbox.scss b/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;
@@ -19,6 +20,10 @@
 }
 
 .mat-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 host node defaults to `diplay: inline` so
   // we have to change it in order for margins to work.
   display: inline-block;
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) {
+@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);
   }
 }
 
diff --git a/src/material-experimental/mdc-list/_list-theme.scss b/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);
     }
   }
 }
diff --git a/src/material-experimental/mdc-list/list-option.scss b/src/material-experimental/mdc-list/list-option.scss
@@ -1,4 +1,5 @@
 @use '@material/checkbox' as mdc-checkbox;
+@use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
 @use '@material/list' as mdc-list;
 @use '../mdc-helpers/mdc-helpers';
 @use '../../cdk/a11y';
@@ -18,6 +19,12 @@
     @include mdc-checkbox.without-ripple($query: animation);
   }
 
+  .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

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) {`
	`9`	`+@mixin private-list-option-color-override($color, $mdcColor) {`
`10`	`10`	`& .mdc-list-item__start, & .mdc-list-item__end {`
`11`		`- @include checkbox-theme.private-checkbox-styles-with-color($color);`
	`11`	`+ @include checkbox-theme.private-checkbox-styles-with-color($color, $mdcColor);`
`12`	`12`	`}`
`13`	`13`	`}`
`14`	`14`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+@use 'sass:map';`
`1`	`2`	`@use '@material/list/evolution-mixins' as mdc-list;`
`2`	`3`	`@use './interactive-list-theme';`
`3`	`4`	`@use './list-option-theme';`
`@@ -11,6 +12,9 @@`
`11`	`12`
`12`	`13`	`@mixin color($config-or-theme) {`
`13`	`14`	`$config: theming.get-color-config($config-or-theme);`
	`15`	`+ $primary: theming.get-color-from-palette(map.get($config, primary));`
	`16`	`+ $accent: theming.get-color-from-palette(map.get($config, accent));`
	`17`	`+ $warn: theming.get-color-from-palette(map.get($config, warn));`
`14`	`18`
`15`	`19`	`// MDC's state styles are tied in with their ripple. Since we don't use the MDC`
`16`	`20`	`// ripple, we need to add the hover, focus and selected states manually.`
`@@ -20,13 +24,13 @@`
`20`	`24`	`@include mdc-list.without-ripple($query: mdc-helpers.$mat-theme-styles-query);`
`21`	`25`
`22`	`26`	`.mat-mdc-list-option {`
`23`		`- @include list-option-theme.private-list-option-color-override(primary);`
	`27`	`+ @include list-option-theme.private-list-option-color-override($primary, primary);`
`24`	`28`	`}`
`25`	`29`	`.mat-mdc-list-option.mat-accent {`
`26`		`- @include list-option-theme.private-list-option-color-override(secondary);`
	`30`	`+ @include list-option-theme.private-list-option-color-override($accent, secondary);`
`27`	`31`	`}`
`28`	`32`	`.mat-mdc-list-option.mat-warn {`
`29`		`- @include list-option-theme.private-list-option-color-override(error);`
	`33`	`+ @include list-option-theme.private-list-option-color-override($warn, error);`
`30`	`34`	`}`
`31`	`35`	`}`
`32`	`36`	`}`