fix(material-experimental/mdc-checkbox): remove background state styles (#21748)

Author: andrewseguin

src/dev-app/mdc-checkbox/mdc-checkbox-demo.html

@@ -1,3 +1,22 @@
+<h1> Themed Checkboxes </h1>
+
+<div>
+  <mat-checkbox>Default</mat-checkbox>
+</div>
+
+<div>
+  <mat-checkbox color="primary">Primary</mat-checkbox>
+</div>
+
+<div>
+  <mat-checkbox color="accent">Accent</mat-checkbox>
+</div>
+
+<div>
+  <mat-checkbox color="warn">Warn</mat-checkbox>
+</div>
+
+
 <h1>mat-checkbox: Basic Example</h1>
 <form>
   <mat-checkbox [(ngModel)]="isChecked"

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

@@ -4,6 +4,7 @@
 @use 'sass:map';
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/theming/theming';
+@use '../../material/core/ripple/ripple';
 
 @import '@material/checkbox/mixins.import';
 @import '@material/checkbox/variables.import';
@@ -29,23 +30,23 @@
       ripple-checked-opacity: ripple-theme.$dark-ink-opacities,
     )
   );
-  @include _background-focus-indicator-color(mdc-theme-prop-value(on-surface));
-  @include _background-focus-indicator-checked-color($color);
 }
 
-// TODO(b/175233410): Use ripple element to show focus indicator.
-@mixin _background-focus-indicator-color($color) {
-  .mdc-checkbox__background::before {
-    @include theme.property(background-color, on-surface);
-  }
-}
+// Apply ripple colors to the MatRipple element and the MDC ripple element when the
+// checkbox is selected.
+@mixin _selected-ripple-colors($theme, $mdcColor) {
+  .mdc-checkbox--selected ~ {
+    .mat-mdc-checkbox-ripple {
+      @include ripple.theme((
+          foreground: (
+              base: mdc-theme-prop-value($mdcColor)
+          ),
+      ));
+    }
 
-// TODO(b/175233410): Use ripple element to show focus indicator.
-@mixin _background-focus-indicator-checked-color($color) {
-  .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background::before,
-  .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background::before,
-  .mdc-checkbox__native-control[data-indeterminate='true'] ~ .mdc-checkbox__background::before {
-    @include theme.property(background-color, $color);
+    .mdc-checkbox__ripple {
+      background: $theme;
+    }
   }
 }
 
@@ -73,35 +74,32 @@
     .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((
+        foreground: (
+          base: mdc-theme-prop-value(on-surface)
+        ),
+      ));
 
-    // MDC's checkbox doesn't support a `color` property. We add support for it by adding a CSS
-    // 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-mdc-checkbox {
-      .mat-ripple-element,
-      .mdc-checkbox__background::before {
+      .mdc-checkbox__ripple {
         background: mdc-theme-prop-value(on-surface);
       }
 
-      .mdc-checkbox--selected ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
-        background: $primary;
+      // MDC's checkbox doesn't support a `color` property. We add support for it by adding a CSS
+      // 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 _selected-ripple-colors($primary, primary);
       }
 
       &.mat-accent {
         @include private-checkbox-styles-with-color(secondary);
-
-        .mdc-checkbox--selected ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
-          background: $accent;
-        }
+        @include _selected-ripple-colors($accent, secondary);
       }
 
       &.mat-warn {
         @include private-checkbox-styles-with-color(error);
-
-        .mdc-checkbox--selected ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
-          background: $warn;
-        }
+        @include _selected-ripple-colors($warn, error);
       }
     }
   }
@@ -119,27 +117,13 @@
   }
 }
 
-// TODO(b/175233410): Use ripple element to show focus indicator.
-@mixin _background-focus-density($density-scale) {
-  $ripple-size: checkbox-theme.get-ripple-size($density-scale);
-  $checkbox-padding: ($ripple-size - checkbox-theme.$icon-size) / 2;
-
-  .mdc-checkbox__background::before {
-    top: -(checkbox-theme.$border-width) - $checkbox-padding;
-    left: -(checkbox-theme.$border-width) - $checkbox-padding;
-    width: $ripple-size;
-    height: $ripple-size;
-  }
-}
-
 @mixin density($config-or-theme) {
   $density-scale: theming.get-density-config($config-or-theme);
   .mat-mdc-checkbox .mdc-checkbox {
     @include mdc-checkbox-density(
       $density-scale,
       $query: mdc-helpers.$mat-base-styles-query
     );
-    @include _background-focus-density($density-scale);
   }
 }
 

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

@@ -18,6 +18,7 @@
            (blur)="_onBlur()"
            (click)="_onClick()"
            (change)="$event.stopPropagation()"/>
+    <div class="mdc-checkbox__ripple"></div>
     <div class="mdc-checkbox__background">
       <svg class="mdc-checkbox__checkmark"
            focusable="false"

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

@@ -12,26 +12,10 @@
 @include mdc-checkbox-without-ripple($query: mdc-helpers.$mat-base-styles-query);
 @include mdc-form-field-core-styles($query: mdc-helpers.$mat-base-styles-query);
 
-// TODO(b/175233410): Use ripple element to show focus indicator.
-@mixin _background-focus-styles() {
-  // The frame's ::before element is used as a focus indicator for the checkbox
-  .mdc-checkbox__background::before {
-    position: absolute;
-    transform: scale(0, 0);
-    border-radius: 50%;
+// Apply base styles to the MDC ripple to adjust appearance for state changes (hover, focus, press)
+@mixin _ripple-base-styles() {
+  .mdc-checkbox__ripple {
     opacity: 0;
-    pointer-events: none;
-    content: '';
-    will-change: opacity, transform;
-    transition: checkbox.transition-exit(opacity),
-      checkbox.transition-exit(transform);
-  }
-
-  .mdc-checkbox__native-control:focus ~ .mdc-checkbox__background::before {
-    transform: scale(1);
-    opacity: checkbox-theme.$focus-indicator-opacity;
-    transition: checkbox.transition-enter(opacity, 0ms, 80ms),
-      checkbox.transition-enter(transform, 0ms, 80ms);
   }
 }
 
@@ -44,27 +28,21 @@
   // 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__background::before {
+  .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-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__background::before {
+  .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);
   }
 
-  // We use an Angular Material ripple rather than an MDC ripple due to size concerns, so we need to
-  // style it appropriately.
-  .mat-ripple-element {
-    opacity: map.get($mdc-ripple-dark-ink-opacities, press);
-  }
-
   // Angular Material supports disabling all animations when NoopAnimationsModule is imported.
   // TODO(mmalerba): Look into using MDC's Sass queries to separate the animation styles and
   //  conditionally add them. Consider the size cost when deciding whether to switch.
@@ -82,10 +60,10 @@
     display: none;
   }
 
-  @include _background-focus-styles();
+  @include _ripple-base-styles();
 }
 
-.mat-mdc-checkbox-ripple {
+.mat-mdc-checkbox-ripple, .mdc-checkbox__ripple {
   @include layout-common.fill();
 
   // Usually the ripple radius would be specified through the MatRipple input, but