From 585fec6ba432da6559909bb21f4b97fd69d00858 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Thu, 4 Jul 2024 05:26:16 +0000
Subject: [PATCH] refactor(material/button): simplify structural styles
 (#29372)

Simplifies the structural styles for the button to make them simpler and easier to maintain.

(cherry picked from commit 4db4fc18a13d0529956a8b55701efd8349caf0be)
---
 src/material/button/_button-base.scss         |  19 +-
 src/material/button/_button-theme.scss        |  53 ++-
 src/material/button/button.scss               | 324 ++++++++++++------
 .../core/tokens/m2/mdc/_extended-fab.scss     |  11 +-
 .../core/tokens/m2/mdc/_fab-small.scss        |   8 +-
 src/material/core/tokens/m2/mdc/_fab.scss     |   8 +-
 .../core/tokens/m2/mdc/_protected-button.scss |  20 +-
 .../core/tokens/m3/mdc/_protected-button.scss |  27 +-
 .../tokens/tests/test-validate-tokens.scss    |   7 -
 9 files changed, 297 insertions(+), 180 deletions(-)

diff --git a/src/material/button/_button-base.scss b/src/material/button/_button-base.scss
index cb5de5769cb2..6885abe5adf5 100644
--- a/src/material/button/_button-base.scss
+++ b/src/material/button/_button-base.scss
@@ -1,8 +1,5 @@
-@use '@material/touch-target' as mdc-touch-target;
-
 @use '../core/tokens/token-utils';
 @use '../core/style/layout-common';
-@use '../core/mdc-helpers/mdc-helpers';
 
 // Adds styles necessary to provide stateful interactions with the button. This includes providing
 // content for the state container's ::before and ::after so that they can be given a background
@@ -126,9 +123,19 @@
   // the button itself would require us to wrap it in another div. See:
   // https://github.com/material-components/material-components-web/tree/master/packages/mdc-button#making-buttons-accessible
   .mat-mdc-button-touch-target {
-    @include mdc-touch-target.touch-target(
-      $set-width: $is-square,
-      $query: mdc-helpers.$mdc-base-styles-query);
+    position: absolute;
+    top: 50%;
+    height: 48px;
+
+    @if $is-square {
+      left: 50%;
+      width: 48px;
+      transform: translate(-50%, -50%);
+    } @else {
+      left: 0;
+      right: 0;
+      transform: translateY(-50%);
+    }
 
     @include token-utils.use-tokens($prefix, $slots) {
       @include token-utils.create-token-slot(display, touch-target-display);
diff --git a/src/material/button/_button-theme.scss b/src/material/button/_button-theme.scss
index 906466a02fda..ee85325714fb 100644
--- a/src/material/button/_button-theme.scss
+++ b/src/material/button/_button-theme.scss
@@ -1,8 +1,3 @@
-@use '@material/button/button-text-theme' as mdc-button-text-theme;
-@use '@material/button/button-filled-theme' as mdc-button-filled-theme;
-@use '@material/button/button-protected-theme' as mdc-button-protected-theme;
-@use '@material/button/button-outlined-theme' as mdc-button-outlined-theme;
-
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/theming/validation';
@@ -29,7 +24,7 @@
     tokens-mat-text-button.get-color-tokens($theme)
   );
 
-  @include mdc-button-text-theme.theme($mdc-tokens);
+  @include token-utils.create-token-values(tokens-mdc-text-button.$prefix, $mdc-tokens);
   @include token-utils.create-token-values(tokens-mat-text-button.$prefix, $mat-tokens);
 }
 
@@ -44,7 +39,7 @@
     tokens-mat-filled-button.get-color-tokens($theme)
   );
 
-  @include mdc-button-filled-theme.theme($mdc-tokens);
+  @include token-utils.create-token-values(tokens-mdc-filled-button.$prefix, $mdc-tokens);
   @include token-utils.create-token-values(tokens-mat-filled-button.$prefix, $mat-tokens);
 }
 
@@ -59,7 +54,7 @@
     tokens-mat-protected-button.get-color-tokens($theme)
   );
 
-  @include mdc-button-protected-theme.theme($mdc-tokens);
+  @include token-utils.create-token-values(tokens-mdc-protected-button.$prefix, $mdc-tokens);
   @include token-utils.create-token-values(tokens-mat-protected-button.$prefix, $mat-tokens);
 }
 
@@ -74,7 +69,7 @@
     tokens-mat-outlined-button.get-color-tokens($theme)
   );
 
-  @include mdc-button-outlined-theme.theme($mdc-tokens);
+  @include token-utils.create-token-values(tokens-mdc-outlined-button.$prefix, $mdc-tokens);
   @include token-utils.create-token-values(tokens-mat-outlined-button.$prefix, $mat-tokens);
 }
 
@@ -97,10 +92,14 @@
       token-utils.get-tokens-for($tokens, tokens-mat-filled-button.$prefix, $options...);
   $mat-outlined-button-tokens:
       token-utils.get-tokens-for($tokens, tokens-mat-outlined-button.$prefix, $options...);
-  @include mdc-button-text-theme.theme($mdc-text-button-tokens);
-  @include mdc-button-protected-theme.theme($mdc-protected-button-tokens);
-  @include mdc-button-filled-theme.theme($mdc-filled-button-tokens);
-  @include mdc-button-outlined-theme.theme($mdc-outlined-button-tokens);
+
+  @include token-utils.create-token-values(tokens-mdc-text-button.$prefix, $mdc-text-button-tokens);
+  @include token-utils.create-token-values(
+      tokens-mdc-protected-button.$prefix, $mdc-protected-button-tokens);
+  @include token-utils.create-token-values(
+      tokens-mdc-filled-button.$prefix, $mdc-filled-button-tokens);
+  @include token-utils.create-token-values(
+    tokens-mdc-outlined-button.$prefix, $mdc-outlined-button-tokens);
   @include token-utils.create-token-values(tokens-mat-text-button.$prefix, $mat-text-button-tokens);
   @include token-utils.create-token-values(
       tokens-mat-protected-button.$prefix, $mat-protected-button-tokens);
@@ -119,13 +118,13 @@
   }
   @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-button-text-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-text-button.$prefix,
         tokens-mdc-text-button.get-unthemable-tokens());
-      @include mdc-button-filled-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-filled-button.$prefix,
         tokens-mdc-filled-button.get-unthemable-tokens());
-      @include mdc-button-protected-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-protected-button.$prefix,
         tokens-mdc-protected-button.get-unthemable-tokens());
-      @include mdc-button-outlined-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-outlined-button.$prefix,
         tokens-mdc-outlined-button.get-unthemable-tokens());
 
       @include token-utils.create-token-values(tokens-mat-text-button.$prefix,
@@ -223,14 +222,14 @@
   }
   @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-button-text-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-text-button.$prefix,
         tokens-mdc-text-button.get-typography-tokens($theme));
-      @include mdc-button-filled-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-filled-button.$prefix,
         tokens-mdc-filled-button.get-typography-tokens($theme));
-      @include mdc-button-outlined-theme.theme(
-        tokens-mdc-outlined-button.get-typography-tokens($theme));
-      @include mdc-button-protected-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-protected-button.$prefix,
         tokens-mdc-protected-button.get-typography-tokens($theme));
+      @include token-utils.create-token-values(tokens-mdc-outlined-button.$prefix,
+        tokens-mdc-outlined-button.get-typography-tokens($theme));
 
       @include token-utils.create-token-values(tokens-mat-text-button.$prefix,
         tokens-mat-text-button.get-typography-tokens($theme));
@@ -252,14 +251,14 @@
   }
   @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-button-text-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-text-button.$prefix,
         tokens-mdc-text-button.get-density-tokens($theme));
-      @include mdc-button-filled-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-filled-button.$prefix,
         tokens-mdc-filled-button.get-density-tokens($theme));
-      @include mdc-button-outlined-theme.theme(
-        tokens-mdc-outlined-button.get-density-tokens($theme));
-      @include mdc-button-protected-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-protected-button.$prefix,
         tokens-mdc-protected-button.get-density-tokens($theme));
+      @include token-utils.create-token-values(tokens-mdc-outlined-button.$prefix,
+        tokens-mdc-outlined-button.get-density-tokens($theme));
 
       @include token-utils.create-token-values(tokens-mat-text-button.$prefix,
         tokens-mat-text-button.get-density-tokens($theme));
diff --git a/src/material/button/button.scss b/src/material/button/button.scss
index c05e3c600b61..7cc65bbcd4d0 100644
--- a/src/material/button/button.scss
+++ b/src/material/button/button.scss
@@ -1,15 +1,6 @@
-@use 'sass:map';
-@use '@material/button/button' as mdc-button;
-@use '@material/button/variables' as mdc-button-variables;
-@use '@material/button/button-text-theme' as mdc-button-text-theme;
-@use '@material/button/button-filled-theme' as mdc-button-filled-theme;
-@use '@material/button/button-protected-theme' as mdc-button-protected-theme;
-@use '@material/button/button-outlined-theme' as mdc-button-outlined-theme;
-@use '@material/theme/custom-properties' as mdc-custom-properties;
-
 @use './button-base';
-@use '../core/mdc-helpers/mdc-helpers';
 @use '../core/style/private' as style-private;
+@use '../core/style/vendor-prefixes';
 @use '../core/tokens/token-utils';
 @use '../core/focus-indicators/private' as focus-indicators-private;
 @use '../core/tokens/m2/mdc/filled-button' as tokens-mdc-filled-button;
@@ -21,127 +12,233 @@
 @use '../core/tokens/m2/mdc/text-button' as tokens-mdc-text-button;
 @use '../core/tokens/m2/mat/text-button' as tokens-mat-text-button;
 
-@include mdc-helpers.disable-mdc-fallback-declarations {
-  @include mdc-button.static-styles-without-ripple($query: mdc-helpers.$mdc-base-styles-query);
+.mat-mdc-button-base {
+  text-decoration: none;
 }
 
-@include mdc-custom-properties.configure($emit-fallback-values: false, $emit-fallback-vars: false) {
-  .mat-mdc-button {
-    $mdc-text-button-slots: tokens-mdc-text-button.get-token-slots();
-
-    @include mdc-button-text-theme.theme-styles($mdc-text-button-slots);
-    @include button-base.mat-private-button-horizontal-layout(tokens-mat-text-button.$prefix,
-      tokens-mat-text-button.get-token-slots(), true);
-    @include button-base.mat-private-button-ripple(tokens-mat-text-button.$prefix,
-      tokens-mat-text-button.get-token-slots());
-    @include button-base.mat-private-button-touch-target(false, tokens-mat-text-button.$prefix,
-      tokens-mat-text-button.get-token-slots());
-
-    @include token-utils.use-tokens(tokens-mdc-text-button.$prefix, $mdc-text-button-slots) {
-      // We need to re-apply the disabled tokens since MDC uses
-      // `:disabled` which doesn't apply to anchors.
-      @include button-base.mat-private-button-disabled {
-        @include token-utils.create-token-slot(color, disabled-label-text-color);
-      }
-    }
+.mdc-button {
+  @include vendor-prefixes.user-select(none);
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: 64px;
+  border: none;
+  outline: none;
+  line-height: inherit;
+  -webkit-appearance: none;
+  overflow: visible;
+  vertical-align: middle;
+  background: transparent;
+  padding: 0 8px;
+
+  &::-moz-focus-inner {
+    padding: 0;
+    border: 0;
   }
 
-  .mat-mdc-unelevated-button {
-    $mdc-filled-button-slots: tokens-mdc-filled-button.get-token-slots();
-
-    @include mdc-button-filled-theme.theme-styles($mdc-filled-button-slots);
-    @include button-base.mat-private-button-horizontal-layout(tokens-mat-filled-button.$prefix,
-      tokens-mat-filled-button.get-token-slots(), false);
-    @include button-base.mat-private-button-ripple(tokens-mat-filled-button.$prefix,
-      tokens-mat-filled-button.get-token-slots());
-    @include button-base.mat-private-button-touch-target(false, tokens-mat-filled-button.$prefix,
-      tokens-mat-filled-button.get-token-slots());
-
-    @include token-utils.use-tokens(tokens-mdc-filled-button.$prefix, $mdc-filled-button-slots) {
-      // We need to re-apply the disabled tokens since MDC uses
-      // `:disabled` which doesn't apply to anchors.
-      @include button-base.mat-private-button-disabled {
-        @include token-utils.create-token-slot(color, disabled-label-text-color);
-        @include token-utils.create-token-slot(background-color, disabled-container-color);
-      }
+  &:active {
+    outline: none;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:disabled {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  &[hidden] {
+    display: none;
+  }
+
+  .mdc-button__label {
+    position: relative;
+  }
+}
+
+.mat-mdc-button {
+  $mat-text-button-slots: tokens-mat-text-button.get-token-slots();
+
+  @include button-base.mat-private-button-horizontal-layout(tokens-mat-text-button.$prefix,
+    $mat-text-button-slots, true);
+  @include button-base.mat-private-button-ripple(tokens-mat-text-button.$prefix,
+    $mat-text-button-slots);
+  @include button-base.mat-private-button-touch-target(false, tokens-mat-text-button.$prefix,
+    $mat-text-button-slots);
+
+  @include token-utils.use-tokens(
+    tokens-mdc-text-button.$prefix,
+    tokens-mdc-text-button.get-token-slots()
+  ) {
+    @include token-utils.create-token-slot(height, container-height);
+    @include token-utils.create-token-slot(font-family, label-text-font);
+    @include token-utils.create-token-slot(font-size, label-text-size);
+    @include token-utils.create-token-slot(letter-spacing, label-text-tracking);
+    @include token-utils.create-token-slot(text-transform, label-text-transform);
+    @include token-utils.create-token-slot(font-weight, label-text-weight);
+
+    &, .mdc-button__ripple {
+      @include token-utils.create-token-slot(border-radius, container-shape);
+    }
+
+    &:not(:disabled) {
+      @include token-utils.create-token-slot(color, label-text-color);
+    }
+
+    // We need to re-apply the disabled tokens since MDC uses
+    // `:disabled` which doesn't apply to anchors.
+    @include button-base.mat-private-button-disabled {
+      @include token-utils.create-token-slot(color, disabled-label-text-color);
     }
   }
+}
 
-  .mat-mdc-raised-button {
-    $mdc-button-protected-slots: tokens-mdc-protected-button.get-token-slots();
-
-    @include mdc-button-protected-theme.theme-styles(map.merge($mdc-button-protected-slots, (
-      // Exclude the elevation tokens here since we output them manually below.
-      container-elevation: null,
-      hover-container-elevation: null,
-      disabled-container-elevation: null,
-      focus-container-elevation: null,
-      pressed-container-elevation: null,
-      container-shadow-color: null,
-    )));
-    @include button-base.mat-private-button-horizontal-layout(tokens-mat-protected-button.$prefix,
-      tokens-mat-protected-button.get-token-slots(), false);
-    @include button-base.mat-private-button-ripple(tokens-mat-protected-button.$prefix,
-      tokens-mat-protected-button.get-token-slots());
-    @include button-base.mat-private-button-touch-target(false, tokens-mat-protected-button.$prefix,
-      tokens-mat-protected-button.get-token-slots());
-
-    @include token-utils.use-tokens(
-      tokens-mdc-protected-button.$prefix,
-      $mdc-button-protected-slots) {
-      @include button-base.mat-private-button-elevation(container-elevation);
-
-      &:hover {
-        @include button-base.mat-private-button-elevation(hover-container-elevation);
-      }
+.mat-mdc-unelevated-button {
+  $mat-filled-button-slots: tokens-mat-filled-button.get-token-slots();
+  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
 
-      &:focus {
-        @include button-base.mat-private-button-elevation(focus-container-elevation);
-      }
+  @include button-base.mat-private-button-horizontal-layout(tokens-mat-filled-button.$prefix,
+    $mat-filled-button-slots, false);
+  @include button-base.mat-private-button-ripple(tokens-mat-filled-button.$prefix,
+    $mat-filled-button-slots);
+  @include button-base.mat-private-button-touch-target(false, tokens-mat-filled-button.$prefix,
+    $mat-filled-button-slots);
 
-      &:active, &:focus:active {
-        @include button-base.mat-private-button-elevation(pressed-container-elevation);
-      }
+  @include token-utils.use-tokens(
+    tokens-mdc-filled-button.$prefix,
+    tokens-mdc-filled-button.get-token-slots()
+  ) {
+    @include token-utils.create-token-slot(height, container-height);
+    @include token-utils.create-token-slot(font-family, label-text-font);
+    @include token-utils.create-token-slot(font-size, label-text-size);
+    @include token-utils.create-token-slot(letter-spacing, label-text-tracking);
+    @include token-utils.create-token-slot(text-transform, label-text-transform);
+    @include token-utils.create-token-slot(font-weight, label-text-weight);
+
+    &:not(:disabled) {
+      @include token-utils.create-token-slot(color, label-text-color);
+      @include token-utils.create-token-slot(background-color, container-color);
+    }
 
-      // We need to re-apply the disabled tokens since MDC uses
-      // `:disabled` which doesn't apply to anchors.
-      @include button-base.mat-private-button-disabled {
-        @include token-utils.create-token-slot(color, disabled-label-text-color);
-        @include token-utils.create-token-slot(background-color, disabled-container-color);
+    &, .mdc-button__ripple {
+      @include token-utils.create-token-slot(border-radius, container-shape);
+    }
 
-        &.mat-mdc-button-disabled {
-          @include button-base.mat-private-button-elevation(disabled-container-elevation);
-        }
-      }
+    // We need to re-apply the disabled tokens since MDC uses
+    // `:disabled` which doesn't apply to anchors.
+    @include button-base.mat-private-button-disabled {
+      @include token-utils.create-token-slot(color, disabled-label-text-color);
+      @include token-utils.create-token-slot(background-color, disabled-container-color);
     }
   }
+}
+
+.mat-mdc-raised-button {
+  $mat-protected-button-slots: tokens-mat-protected-button.get-token-slots();
+  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  @include button-base.mat-private-button-horizontal-layout(tokens-mat-protected-button.$prefix,
+    $mat-protected-button-slots, false);
+  @include button-base.mat-private-button-ripple(tokens-mat-protected-button.$prefix,
+    $mat-protected-button-slots);
+  @include button-base.mat-private-button-touch-target(false, tokens-mat-protected-button.$prefix,
+    $mat-protected-button-slots);
+
+  @include token-utils.use-tokens(
+    tokens-mdc-protected-button.$prefix,
+    tokens-mdc-protected-button.get-token-slots()
+  ) {
+    @include button-base.mat-private-button-elevation(container-elevation);
+    @include token-utils.create-token-slot(height, container-height);
+    @include token-utils.create-token-slot(font-family, label-text-font);
+    @include token-utils.create-token-slot(font-size, label-text-size);
+    @include token-utils.create-token-slot(letter-spacing, label-text-tracking);
+    @include token-utils.create-token-slot(text-transform, label-text-transform);
+    @include token-utils.create-token-slot(font-weight, label-text-weight);
+
+    &:not(:disabled) {
+      @include token-utils.create-token-slot(color, label-text-color);
+      @include token-utils.create-token-slot(background-color, container-color);
+    }
+
+    &, .mdc-button__ripple {
+      @include token-utils.create-token-slot(border-radius, container-shape);
+    }
+
+    &:hover {
+      @include button-base.mat-private-button-elevation(hover-container-elevation);
+    }
+
+    &:focus {
+      @include button-base.mat-private-button-elevation(focus-container-elevation);
+    }
 
-  .mat-mdc-outlined-button {
-    $mdc-outlined-button-slots: tokens-mdc-outlined-button.get-token-slots();
-
-    @include mdc-button-outlined-theme.theme-styles($mdc-outlined-button-slots);
-    @include button-base.mat-private-button-horizontal-layout(tokens-mat-outlined-button.$prefix,
-      tokens-mat-outlined-button.get-token-slots(), false);
-    @include button-base.mat-private-button-ripple(tokens-mat-outlined-button.$prefix,
-      tokens-mat-outlined-button.get-token-slots());
-    @include button-base.mat-private-button-touch-target(false, tokens-mat-outlined-button.$prefix,
-      tokens-mat-outlined-button.get-token-slots());
-
-    @include token-utils.use-tokens(
-      tokens-mdc-outlined-button.$prefix,
-      $mdc-outlined-button-slots) {
-      // We need to re-apply the disabled tokens since MDC uses
-      // `:disabled` which doesn't apply to anchors.
-      @include button-base.mat-private-button-disabled {
-        @include token-utils.create-token-slot(color, disabled-label-text-color);
-        @include token-utils.create-token-slot(border-color, disabled-outline-color);
+    &:active, &:focus:active {
+      @include button-base.mat-private-button-elevation(pressed-container-elevation);
+    }
+
+    // We need to re-apply the disabled tokens since MDC uses
+    // `:disabled` which doesn't apply to anchors.
+    @include button-base.mat-private-button-disabled {
+      @include token-utils.create-token-slot(color, disabled-label-text-color);
+      @include token-utils.create-token-slot(background-color, disabled-container-color);
+
+      &.mat-mdc-button-disabled {
+        @include button-base.mat-private-button-elevation(disabled-container-elevation);
       }
     }
   }
 }
 
-.mat-mdc-button-base {
-  text-decoration: none;
+.mat-mdc-outlined-button {
+  $mat-outlined-button-slots: tokens-mat-outlined-button.get-token-slots();
+  border-style: solid;
+  transition: border 280ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  @include button-base.mat-private-button-horizontal-layout(tokens-mat-outlined-button.$prefix,
+    $mat-outlined-button-slots, false);
+  @include button-base.mat-private-button-ripple(tokens-mat-outlined-button.$prefix,
+    $mat-outlined-button-slots);
+  @include button-base.mat-private-button-touch-target(false, tokens-mat-outlined-button.$prefix,
+    $mat-outlined-button-slots);
+
+  @include token-utils.use-tokens(
+    tokens-mdc-outlined-button.$prefix,
+    tokens-mdc-outlined-button.get-token-slots()
+  ) {
+    @include token-utils.create-token-slot(height, container-height);
+    @include token-utils.create-token-slot(font-family, label-text-font);
+    @include token-utils.create-token-slot(font-size, label-text-size);
+    @include token-utils.create-token-slot(letter-spacing, label-text-tracking);
+    @include token-utils.create-token-slot(text-transform, label-text-transform);
+    @include token-utils.create-token-slot(font-weight, label-text-weight);
+    @include token-utils.create-token-slot(border-radius, container-shape);
+    @include token-utils.create-token-slot(border-width, outline-width);
+
+    &:not(:disabled) {
+      @include token-utils.create-token-slot(color, label-text-color);
+      @include token-utils.create-token-slot(border-color, outline-color);
+    }
+
+    // We need to re-apply the disabled tokens since MDC uses
+    // `:disabled` which doesn't apply to anchors.
+    @include button-base.mat-private-button-disabled {
+      @include token-utils.create-token-slot(color, disabled-label-text-color);
+      @include token-utils.create-token-slot(border-color, disabled-outline-color);
+    }
+
+    // TODO(crisbeto): this causes a weird gap between the ripple and the
+    // outline. We should remove it and update the screenshot tests.
+    .mdc-button__ripple {
+      @include token-utils.create-token-slot(border-width, outline-width);
+      border-style: solid;
+      border-color: transparent;
+    }
+  }
 }
 
 .mat-mdc-button,
@@ -173,12 +270,11 @@
 // then. See: https://github.com/angular/components/issues/13738
 .mat-mdc-outlined-button .mat-mdc-button-ripple,
 .mat-mdc-outlined-button .mdc-button__ripple {
-  $offset: -(mdc-button-variables.$outlined-border-width);
+  $offset: -1px;
   top: $offset;
   left: $offset;
   bottom: $offset;
   right: $offset;
-  border-width: $offset;
 }
 
 // For the button element, default inset/offset values are necessary to ensure that
diff --git a/src/material/core/tokens/m2/mdc/_extended-fab.scss b/src/material/core/tokens/m2/mdc/_extended-fab.scss
index 97fbbafb5c75..042c01eced40 100644
--- a/src/material/core/tokens/m2/mdc/_extended-fab.scss
+++ b/src/material/core/tokens/m2/mdc/_extended-fab.scss
@@ -10,6 +10,10 @@ $prefix: (mdc, extended-fab);
   @return (
     container-height: 48px,
     container-shape: 24px,
+    container-elevation-shadow: elevation.get-box-shadow(6),
+    focus-container-elevation-shadow: elevation.get-box-shadow(8),
+    hover-container-elevation-shadow: elevation.get-box-shadow(8),
+    pressed-container-elevation-shadow: elevation.get-box-shadow(12),
 
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
@@ -49,12 +53,7 @@ $prefix: (mdc, extended-fab);
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
-  @return (
-    container-elevation-shadow: elevation.get-box-shadow(6),
-    focus-container-elevation-shadow: elevation.get-box-shadow(8),
-    hover-container-elevation-shadow: elevation.get-box-shadow(8),
-    pressed-container-elevation-shadow: elevation.get-box-shadow(12),
-  );
+  @return ();
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
diff --git a/src/material/core/tokens/m2/mdc/_fab-small.scss b/src/material/core/tokens/m2/mdc/_fab-small.scss
index 1e540a97ebd0..9aaf82d19229 100644
--- a/src/material/core/tokens/m2/mdc/_fab-small.scss
+++ b/src/material/core/tokens/m2/mdc/_fab-small.scss
@@ -9,6 +9,10 @@ $prefix: (mdc, fab-small);
 @function get-unthemable-tokens() {
   @return (
     container-shape: 50%,
+    container-elevation-shadow: elevation.get-box-shadow(6),
+    focus-container-elevation-shadow: elevation.get-box-shadow(8),
+    hover-container-elevation-shadow: elevation.get-box-shadow(8),
+    pressed-container-elevation-shadow: elevation.get-box-shadow(12),
 
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
@@ -52,10 +56,6 @@ $prefix: (mdc, fab-small);
   @return (
     // Background color of the FAB.
     container-color: inspection.get-theme-color($theme, background, card),
-    container-elevation-shadow: elevation.get-box-shadow(6),
-    focus-container-elevation-shadow: elevation.get-box-shadow(8),
-    hover-container-elevation-shadow: elevation.get-box-shadow(8),
-    pressed-container-elevation-shadow: elevation.get-box-shadow(12),
   );
 }
 
diff --git a/src/material/core/tokens/m2/mdc/_fab.scss b/src/material/core/tokens/m2/mdc/_fab.scss
index 559b1dc6e308..b751b75ee9f1 100644
--- a/src/material/core/tokens/m2/mdc/_fab.scss
+++ b/src/material/core/tokens/m2/mdc/_fab.scss
@@ -9,6 +9,10 @@ $prefix: (mdc, fab);
 @function get-unthemable-tokens() {
   @return (
     container-shape: 50%,
+    container-elevation-shadow: elevation.get-box-shadow(6),
+    focus-container-elevation-shadow: elevation.get-box-shadow(8),
+    hover-container-elevation-shadow: elevation.get-box-shadow(8),
+    pressed-container-elevation-shadow: elevation.get-box-shadow(12),
 
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
@@ -53,10 +57,6 @@ $prefix: (mdc, fab);
   @return (
     // Background color of the FAB.
     container-color: inspection.get-theme-color($theme, background, card),
-    container-elevation-shadow: elevation.get-box-shadow(6),
-    focus-container-elevation-shadow: elevation.get-box-shadow(8),
-    hover-container-elevation-shadow: elevation.get-box-shadow(8),
-    pressed-container-elevation-shadow: elevation.get-box-shadow(12),
   );
 }
 
diff --git a/src/material/core/tokens/m2/mdc/_protected-button.scss b/src/material/core/tokens/m2/mdc/_protected-button.scss
index c3b8eac6211e..072d82bd938a 100644
--- a/src/material/core/tokens/m2/mdc/_protected-button.scss
+++ b/src/material/core/tokens/m2/mdc/_protected-button.scss
@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../../token-utils';
 @use '../../../style/sass-utils';
+@use '../../../style/elevation';
 @use '../../../theming/inspection';
 @use '../../../theming/theming';
 @use '../../../mdc-helpers/mdc-helpers';
@@ -17,7 +18,11 @@ $prefix: (mdc, protected-button);
 @function get-unthemable-tokens() {
   @return (
     container-shape: 4px,
-    keep-touch-target: false,
+    container-elevation-shadow: elevation.get-box-shadow(2),
+    disabled-container-elevation-shadow: elevation.get-box-shadow(0),
+    focus-container-elevation-shadow: elevation.get-box-shadow(4),
+    hover-container-elevation-shadow: elevation.get-box-shadow(4),
+    pressed-container-elevation-shadow: elevation.get-box-shadow(8),
 
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
@@ -39,6 +44,13 @@ $prefix: (mdc, protected-button);
     focus-state-layer-color: null,
     hover-state-layer-color: null,
     pressed-state-layer-color: null,
+    keep-touch-target: null,
+    container-elevation: null,
+    disabled-container-elevation: null,
+    focus-container-elevation: null,
+    hover-container-elevation: null,
+    pressed-container-elevation: null,
+    container-shadow-color: null,
   );
 }
 
@@ -53,12 +65,6 @@ $prefix: (mdc, protected-button);
       0.12),
     disabled-label-text-color: inspection.get-theme-color($theme, foreground, disabled-button,
       if($is-dark, 0.5, 0.38)),
-    container-elevation: 2,
-    disabled-container-elevation: 0,
-    focus-container-elevation: 4,
-    hover-container-elevation: 4,
-    pressed-container-elevation: 8,
-    container-shadow-color: #000,
   );
 }
 
diff --git a/src/material/core/tokens/m3/mdc/_protected-button.scss b/src/material/core/tokens/m3/mdc/_protected-button.scss
index 98b11a2b2b34..ead16381af9b 100644
--- a/src/material/core/tokens/m3/mdc/_protected-button.scss
+++ b/src/material/core/tokens/m3/mdc/_protected-button.scss
@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use 'sass:meta';
+@use '../../../style/elevation';
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -12,7 +13,7 @@ $prefix: (mdc, protected-button);
 /// @return {Map} A set of tokens for the MDC protected-button
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
   // Note: in M3 the "protected" button is called "elevated".
-  $mdc-tokens: token-utils.get-mdc-tokens('elevated-button', $systems, $exclude-hardcoded);
+  $tokens: token-utils.get-mdc-tokens('elevated-button', $systems, $exclude-hardcoded);
   $variant-tokens: (
     primary: (), // Default, no overrides needed.
     secondary: (
@@ -57,7 +58,7 @@ $prefix: (mdc, protected-button);
   );
 
   @return token-utils.namespace-tokens($prefix, (
-    _fix-tokens($mdc-tokens),
+    _fix-tokens($tokens),
     token-utils.map-values($variant-tokens, meta.get-function(_fix-tokens)),
   ), $token-slots);
 }
@@ -67,11 +68,27 @@ $prefix: (mdc, protected-button);
 /// @param {Map} $initial-tokens Map of protected button tokens currently being generated.
 /// @return {Map} The given tokens, with the invalid values replaced with valid ones.
 @function _fix-tokens($initial-tokens) {
-  // Need to get the hardcoded values, because they include opacities that are used for the disabled
-  // state.
+  // Need to get the hardcoded values, because they include
+  // opacities that are used for the disabled state.
   $hardcoded-tokens: token-utils.get-mdc-tokens('elevated-button', (), false);
+  $tokens: $initial-tokens;
+  $elevation-tokens: (
+    container-elevation,
+    disabled-container-elevation,
+    focus-container-elevation,
+    hover-container-elevation,
+    pressed-container-elevation,
+  );
+
+  @each $token in $elevation-tokens {
+    $elevation: map.get($tokens, $token);
+
+    @if ($elevation != null) {
+      $tokens: map.set($tokens, $token + '-shadow', elevation.get-box-shadow($elevation));
+    }
+  }
 
-  @return token-utils.combine-color-tokens($initial-tokens, $hardcoded-tokens, (
+  @return token-utils.combine-color-tokens($tokens, $hardcoded-tokens, (
     (
       color: disabled-label-text-color,
       opacity: disabled-label-text-opacity,
diff --git a/src/material/core/tokens/tests/test-validate-tokens.scss b/src/material/core/tokens/tests/test-validate-tokens.scss
index cd2d89205689..42fd0bfa32d3 100644
--- a/src/material/core/tokens/tests/test-validate-tokens.scss
+++ b/src/material/core/tokens/tests/test-validate-tokens.scss
@@ -2,7 +2,6 @@
 @use 'sass:map';
 
 @use '@material/button/button-outlined-theme' as mdc-button-outlined-theme;
-@use '@material/button/button-protected-theme' as mdc-button-protected-theme;
 @use '@material/button/button-filled-theme' as mdc-button-filled-theme;
 @use '@material/button/button-text-theme' as mdc-button-text-theme;
 @use '@material/card/elevated-card-theme' as mdc-elevated-card-theme;
@@ -23,7 +22,6 @@
 @use '@material/textfield/outlined-text-field-theme' as mdc-outlined-text-field-theme;
 @use '@material/theme/validate' as mdc-validate;
 
-@use '../m2/mdc/protected-button' as tokens-mdc-protected-button;
 @use '../m2/mdc/filled-button' as tokens-mdc-filled-button;
 @use '../m2/mdc/text-button' as tokens-mdc-text-button;
 @use '../m2/mdc/outlined-button' as tokens-mdc-outlined-button;
@@ -141,11 +139,6 @@
   $slots: tokens-mdc-filled-button.get-token-slots(),
   $reference: mdc-button-filled-theme.$light-theme
 );
-@include validate-slots(
-  $component: 'm2.mdc.protected-button',
-  $slots: tokens-mdc-protected-button.get-token-slots(),
-  $reference: mdc-button-protected-theme.$light-theme
-);
 @include validate-slots(
   $component: 'm2.mdc.text-button',
   $slots: tokens-mdc-text-button.get-token-slots(),