refactor(material-experimental/mdc-button): reduce bundle size

Reworks the MDC buttons to reduce their bundle size.

Author: crisbeto

src/material-experimental/mdc-button/_button-base.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '@material/touch-target' as mdc-touch-target;
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/style/layout-common';
@@ -8,23 +9,10 @@
 // ripple and state container so that they fill the button, match the border radius, and avoid
 // pointer events.
 @mixin mat-private-button-interactive() {
-  .mdc-button__ripple::before, .mdc-button__ripple::after,
-  .mdc-fab__ripple::before, .mdc-fab__ripple::after,
-  .mdc-icon-button__ripple::before, .mdc-icon-button__ripple::after {
-    content: '';
-    pointer-events: none;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    opacity: 0;
-    border-radius: inherit;
-    @content;
-  }
-
   // The ripple container should match the bounds of the entire button.
-  .mat-mdc-button-ripple, .mdc-button__ripple, .mdc-fab__ripple, .mdc-icon-button__ripple {
+  .mat-mdc-button-ripple,
+  .mat-mdc-button-persistent-ripple,
+  .mat-mdc-button-persistent-ripple::before {
     @include layout-common.fill;
 
     // Disable pointer events for the ripple container and state overlay because the container
@@ -39,6 +27,17 @@
     border-radius: inherit;
   }
 
+  // We use ::before so that we can reuse some of MDC's theming.
+  .mat-mdc-button-persistent-ripple::before {
+    content: '';
+    opacity: 0;
+    background-color: var(--mat-mdc-button-persistent-ripple-color);
+  }
+
+  .mat-ripple-element {
+    background-color: var(--mat-mdc-button-ripple-color);
+  }
+
   // The content should appear over the state and ripple layers, otherwise they may adversely affect
   // the accessibility of the text content.
   .mdc-button__label {
@@ -77,3 +76,15 @@
       $query: mdc-helpers.$mat-base-styles-query);
   }
 }
+
+// Changes a button theme to exclude the ripple styles.
+@function mat-private-button-remove-ripple($theme) {
+  @return map.merge($theme, (
+    focus-state-layer-color: null,
+    focus-state-layer-opacity: null,
+    hover-state-layer-color: null,
+    hover-state-layer-opacity: null,
+    pressed-state-layer-color: null,
+    pressed-state-layer-opacity: null,
+  ));
+}

src/material-experimental/mdc-button/_button-theme-private.scss

@@ -1,28 +1,43 @@
 @use 'sass:map';
 @use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@use '@material/theme/theme-color' as mdc-theme-color;
 @use '../../material/core/ripple/ripple-theme';
 
-// The MDC button's ripple ink color is based on the theme color, not on the foreground base
-// which is what the ripple mixin uses. This creates a new theme that sets the color to the
-// foreground base to appropriately color the ink.
-@mixin ripple-ink-color($color) {
-  @include ripple-theme.color((
-    foreground: (
-      base: $color
-    ),
-  ));
+@mixin _ripple-color($color) {
+  --mat-mdc-button-persistent-ripple-color: #{$color};
+  --mat-mdc-button-ripple-color: #{rgba($color, 0.1)};
 }
 
-// MDC's ripple opacity depends on whether the theme is dark or light.
-// This function adds the correct mapping to the theme tokens.
-@function add-ripple-opacities($is-dark-theme, $tokens: ()) {
-  $opacities: if($is-dark-theme,
+@mixin ripple-theme-styles($config, $is-filled) {
+  $opacities: if(map.get($config, is-dark),
     mdc-ripple-theme.$light-ink-opacities, mdc-ripple-theme.$dark-ink-opacities);
-  @return map.merge($tokens, (
-    focus-state-layer-opacity: map.get($opacities, focus),
-    hover-state-layer-opacity: map.get($opacities, hover),
-    pressed-state-layer-opacity: map.get($opacities, press),
-  ));
+
+  // Ideally these styles would be structural, but MDC bases some of the opacities on the theme.
+  &:hover .mat-mdc-button-persistent-ripple::before {
+    opacity: map.get($opacities, hover);
+  }
+
+  &:focus .mat-mdc-button-persistent-ripple::before {
+    opacity: map.get($opacities, focus);
+  }
+
+  &:active .mat-mdc-button-persistent-ripple::before {
+    opacity: map.get($opacities, press);
+  }
+
+  @include _ripple-color(mdc-theme-color.prop-value(on-surface));
+
+  &.mat-primary {
+    @include _ripple-color(mdc-theme-color.prop-value(if($is-filled, on-primary, primary)));
+  }
+
+  &.mat-accent {
+    @include _ripple-color(mdc-theme-color.prop-value(if($is-filled, on-secondary, secondary)));
+  }
+
+  &.mat-warn {
+    @include _ripple-color(mdc-theme-color.prop-value(if($is-filled, on-error, error)));
+  }
 }
 
 // Wraps the content style in a selector for the disabled state.

src/material-experimental/mdc-button/_button-theme.scss

@@ -13,40 +13,28 @@
 
 @mixin _button-variant($color) {
   @include mdc-button-text-theme.theme((
-    focus-state-layer-color: $color,
-    hover-state-layer-color: $color,
     label-text-color: $color,
-    pressed-state-layer-color: $color,
   ));
 }
 
 @mixin _unelevated-button-variant($foreground, $background) {
   @include mdc-button-filled-theme.theme((
     container-color: $background,
-    focus-state-layer-color: $foreground,
-    hover-state-layer-color: $foreground,
     label-text-color: $foreground,
-    pressed-state-layer-color: $foreground,
   ));
 }
 
 @mixin _raised-button-variant($foreground, $background) {
   @include mdc-button-protected-theme.theme((
     container-color: $background,
-    focus-state-layer-color: $foreground,
-    hover-state-layer-color: $foreground,
     label-text-color: $foreground,
-    pressed-state-layer-color: $foreground,
   ));
 }
 
 @mixin _outlined-button-variant($color) {
   @include mdc-button-outlined-theme.theme((
-    focus-state-layer-color: $color,
-    hover-state-layer-color: $color,
     label-text-color: $color,
     outline-color: $color,
-    pressed-state-layer-color: $color,
   ));
 }
 
@@ -66,8 +54,6 @@
     $on-error: mdc-theme-color.prop-value(on-error);
 
     .mat-mdc-button {
-      @include mdc-button-text-theme.theme(button-theme-private.add-ripple-opacities($is-dark));
-
       &.mat-unthemed {
         @include _button-variant($on-surface);
       }
@@ -95,8 +81,6 @@
     }
 
     .mat-mdc-unelevated-button {
-      @include mdc-button-filled-theme.theme(button-theme-private.add-ripple-opacities($is-dark));
-
       &.mat-unthemed {
         @include _unelevated-button-variant($on-surface, $surface);
       }
@@ -126,9 +110,6 @@
     }
 
     .mat-mdc-raised-button {
-      @include mdc-button-protected-theme.theme(
-        button-theme-private.add-ripple-opacities($is-dark));
-
       &.mat-unthemed {
         @include _raised-button-variant($on-surface, $surface);
       }
@@ -159,8 +140,6 @@
     }
 
     .mat-mdc-outlined-button {
-      @include mdc-button-outlined-theme.theme(button-theme-private.add-ripple-opacities($is-dark));
-
       &.mat-unthemed {
         @include _outlined-button-variant($on-surface);
       }
@@ -191,31 +170,11 @@
 
     // Ripple colors
     .mat-mdc-button, .mat-mdc-outlined-button {
-      &.mat-primary {
-        @include button-theme-private.ripple-ink-color($primary);
-      }
-
-      &.mat-accent {
-        @include button-theme-private.ripple-ink-color($secondary);
-      }
-
-      &.mat-warn {
-        @include button-theme-private.ripple-ink-color($error);
-      }
+      @include button-theme-private.ripple-theme-styles($config, false);
     }
 
     .mat-mdc-raised-button, .mat-mdc-unelevated-button {
-      &.mat-primary {
-        @include button-theme-private.ripple-ink-color($on-primary);
-      }
-
-      &.mat-accent {
-        @include button-theme-private.ripple-ink-color($on-secondary);
-      }
-
-      &.mat-warn {
-        @include button-theme-private.ripple-ink-color($on-error);
-      }
+      @include button-theme-private.ripple-theme-styles($config, true);
     }
   }
 }

src/material-experimental/mdc-button/_fab-theme.scss

@@ -8,13 +8,9 @@
 @use './button-theme-private';
 
 @mixin _fab-variant($foreground, $background) {
-  @include button-theme-private.ripple-ink-color($foreground);
   @include mdc-fab-theme.theme((
     container-color: $background,
     icon-color: $foreground,
-    focus-state-layer-color: $foreground,
-    hover-state-layer-color: $foreground,
-    pressed-state-layer-color: $foreground,
   ));
 
   --mat-mdc-fab-color: #{$foreground};
@@ -27,7 +23,7 @@
     $is-dark: map.get($config, is-dark);
 
     .mat-mdc-fab, .mat-mdc-mini-fab {
-      @include mdc-fab-theme.theme(button-theme-private.add-ripple-opacities($is-dark));
+      @include button-theme-private.ripple-theme-styles($config, true);
 
       &.mat-unthemed {
         @include _fab-variant($on-surface, mdc-theme-color.prop-value(surface));

src/material-experimental/mdc-button/_icon-button-theme.scss

@@ -7,16 +7,6 @@
 @use '../../material/core/typography/typography';
 @use './button-theme-private';
 
-@mixin _icon-button-variant($color) {
-  @include mdc-icon-button-theme.theme((
-    icon-color: $color,
-    focus-state-layer-color: $color,
-    hover-state-layer-color: $color,
-    pressed-state-layer-color: $color,
-  ));
-  @include button-theme-private.ripple-ink-color($color);
-}
-
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
   @include mdc-helpers.mat-using-mdc-theme($config) {
@@ -25,23 +15,18 @@
     $disabled-color: rgba($on-surface, if($is-dark, 0.5, 0.38));
 
     .mat-mdc-icon-button {
-      @include button-theme-private.ripple-ink-color($on-surface);
-      @include mdc-icon-button-theme.theme(button-theme-private.add-ripple-opacities($is-dark, (
-        focus-state-layer-color: $on-surface,
-        hover-state-layer-color: $on-surface,
-        pressed-state-layer-color: $on-surface,
-      )));
+      @include button-theme-private.ripple-theme-styles($config, false);
 
       &.mat-primary {
-        @include _icon-button-variant(mdc-theme-color.prop-value(primary));
+        @include mdc-icon-button-theme.theme((icon-color: mdc-theme-color.prop-value(primary)));
       }
 
       &.mat-accent {
-        @include _icon-button-variant(mdc-theme-color.prop-value(secondary));
+        @include mdc-icon-button-theme.theme((icon-color: mdc-theme-color.prop-value(secondary)));
       }
 
       &.mat-warn {
-        @include _icon-button-variant(mdc-theme-color.prop-value(error));
+        @include mdc-icon-button-theme.theme((icon-color: (mdc-theme-color.prop-value(error))));
       }
 
       @include button-theme-private.apply-disabled-style() {

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

@@ -1,4 +1,5 @@
 <span
+    class="mat-mdc-button-persistent-ripple"
     [class.mdc-button__ripple]="!_isFab && !_isIconButton"
     [class.mdc-fab__ripple]="_isFab"
     [class.mdc-icon-button__ripple]="_isIconButton"></span>

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

@@ -14,57 +14,40 @@
   @include mdc-button.static-styles-without-ripple($query: mdc-helpers.$mat-base-styles-query);
 
   // Keys to exclude from the MDC theme config, allowing us to drop styles we don't need.
-  $excluded-keys: (
+  $override-keys: button-base.mat-private-button-remove-ripple((
     label-text-font: null,
     label-text-size: null,
     label-text-tracking: null,
     label-text-transform: null,
     label-text-weight: null,
     with-icon-icon-size: null,
-  );
+    label-text-color: inherit,
+  ));
 
   // Note that we don't include a feature query, because this mixins declare
   // all the "slots" for CSS variables that will be defined in the theme.
   .mat-mdc-button {
     @include mdc-button-text-theme.theme-styles(
-      map.merge(map.merge(mdc-button-text-theme.$light-theme, $excluded-keys), (
-        focus-state-layer-color: #000,
-        hover-state-layer-color: #000,
-        label-text-color: inherit,
-        pressed-state-layer-color: inherit,
-      )));
+      map.merge(mdc-button-text-theme.$light-theme, $override-keys));
   }
 
   .mat-mdc-unelevated-button {
     @include mdc-button-filled-theme.theme-styles(
-      map.merge(map.merge(mdc-button-filled-theme.$light-theme, $excluded-keys), (
+      map.merge(map.merge(mdc-button-filled-theme.$light-theme, $override-keys), (
         container-color: transparent,
-        focus-state-layer-color: #000,
-        hover-state-layer-color: #000,
-        label-text-color: inherit,
-        pressed-state-layer-color: #000,
       )));
   }
 
   .mat-mdc-raised-button {
     @include mdc-button-protected-theme.theme-styles(
-      map.merge(map.merge(mdc-button-protected-theme.$light-theme, $excluded-keys), (
+      map.merge(map.merge(mdc-button-protected-theme.$light-theme, $override-keys), (
         container-color: transparent,
-        focus-state-layer-color: #000,
-        hover-state-layer-color: #000,
-        label-text-color: inherit,
-        pressed-state-layer-color: #000,
       )));
   }
 
   .mat-mdc-outlined-button {
     @include mdc-button-outlined-theme.theme-styles(
-      map.merge(map.merge(mdc-button-outlined-theme.$light-theme, $excluded-keys), (
-        focus-state-layer-color: #000,
-        hover-state-layer-color: #000,
-        label-text-color: inherit,
-        pressed-state-layer-color: #000,
-      )));
+      map.merge(mdc-button-outlined-theme.$light-theme, $override-keys));
   }
 }