From 8136ec5346fdcfc50a902711f529a117ab191d69 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Wed, 1 Nov 2023 09:07:57 +0100
Subject: [PATCH] refactor(material/button): clean up tokens and use tokens for
 ripples

These changes rework the existing button setup for emitting different color palette tokens to match how it's being done in the rest of the project. Then it builds on top of the changes to introduce Angular-specific tokens for each of the buttons so that we can implement the ripples through them, instead of the existing variables that are used for all button types at the same time.
---
 src/material/button/_button-base.scss         |  42 ++++-
 .../button/_button-theme-private.scss         |  55 ------
 src/material/button/_button-theme.scss        | 169 +++++++++---------
 src/material/button/_fab-theme.scss           |   8 -
 src/material/button/_icon-button-theme.scss   |  52 +++---
 src/material/button/button.scss               |  21 ++-
 src/material/button/fab.scss                  |   2 +
 src/material/button/icon-button.scss          |   3 +
 src/material/core/tokens/m2/mat/_fab.scss     |  35 +++-
 .../core/tokens/m2/mat/_filled-button.scss    |  73 ++++++++
 .../core/tokens/m2/mat/_icon-button.scss      |  73 ++++++++
 .../core/tokens/m2/mat/_outlined-button.scss  |  73 ++++++++
 .../core/tokens/m2/mat/_protected-button.scss |  73 ++++++++
 .../core/tokens/m2/mat/_text-button.scss      |  73 ++++++++
 .../core/tokens/m2/mdc/_extended-fab.scss     |   3 +
 src/material/core/tokens/m2/mdc/_fab.scss     |   3 +
 .../core/tokens/m2/mdc/_filled-button.scss    |  37 ++--
 .../core/tokens/m2/mdc/_icon-button.scss      |   3 -
 .../core/tokens/m2/mdc/_outlined-button.scss  |  25 +--
 .../core/tokens/m2/mdc/_protected-button.scss |  38 ++--
 .../snack-bar/snack-bar-container.scss        |   7 +-
 21 files changed, 622 insertions(+), 246 deletions(-)
 delete mode 100644 src/material/button/_button-theme-private.scss
 create mode 100644 src/material/core/tokens/m2/mat/_filled-button.scss
 create mode 100644 src/material/core/tokens/m2/mat/_icon-button.scss
 create mode 100644 src/material/core/tokens/m2/mat/_outlined-button.scss
 create mode 100644 src/material/core/tokens/m2/mat/_protected-button.scss
 create mode 100644 src/material/core/tokens/m2/mat/_text-button.scss

diff --git a/src/material/button/_button-base.scss b/src/material/button/_button-base.scss
index 9755ae930317..c2443f93ffe0 100644
--- a/src/material/button/_button-base.scss
+++ b/src/material/button/_button-base.scss
@@ -1,5 +1,6 @@
 @use '@material/touch-target' as mdc-touch-target;
 
+@use '../core/tokens/token-utils';
 @use '../core/style/layout-common';
 @use '../core/mdc-helpers/mdc-helpers';
 
@@ -39,11 +40,6 @@
   .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
@@ -62,6 +58,33 @@
   }
 }
 
+@mixin mat-private-button-ripple($prefix, $slots) {
+  @include token-utils.use-tokens($prefix, $slots) {
+    .mat-ripple-element {
+      @include token-utils.create-token-slot(background-color, ripple-color);
+    }
+
+    .mat-mdc-button-persistent-ripple::before {
+      @include token-utils.create-token-slot(background-color, state-layer-color);
+    }
+
+    &:hover .mat-mdc-button-persistent-ripple::before {
+      @include token-utils.create-token-slot(opacity, hover-state-layer-opacity);
+    }
+
+    &.cdk-program-focused,
+    &.cdk-keyboard-focused {
+      .mat-mdc-button-persistent-ripple::before {
+        @include token-utils.create-token-slot(opacity, focus-state-layer-opacity);
+      }
+    }
+
+    &:active .mat-mdc-button-persistent-ripple::before {
+      @include token-utils.create-token-slot(opacity, pressed-state-layer-opacity);
+    }
+  }
+}
+
 // MDC's disabled buttons define a default cursor with pointer-events none. However, they select
 // :disabled for this, which does not affect anchor tags.
 // TODO(andrewseguin): Discuss with the MDC team about a mixin we can call for applying this style,
@@ -75,6 +98,15 @@
   }
 }
 
+// Hides the touch target on lower densities.
+@mixin mat-private-button-touch-target-density($scale) {
+  @include mdc-helpers.if-touch-targets-unsupported($scale) {
+    .mat-mdc-button-touch-target {
+      display: none;
+    }
+  }
+}
+
 @mixin mat-private-button-touch-target($is-square) {
   // Element used to ensure that the button has a touch target that meets the required minimum.
   // Note that we use this, instead of MDC's built-in `mdc-button--touch` class, because the MDC
diff --git a/src/material/button/_button-theme-private.scss b/src/material/button/_button-theme-private.scss
deleted file mode 100644
index 2926f533c46b..000000000000
--- a/src/material/button/_button-theme-private.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-@use 'sass:map';
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
-@use '@material/theme/theme-color' as mdc-theme-color;
-
-@use '../core/mdc-helpers/mdc-helpers';
-@use '../core/theming/inspection';
-
-@mixin _ripple-color($color) {
-  --mat-mdc-button-persistent-ripple-color: #{$color};
-  --mat-mdc-button-ripple-color: #{rgba($color, 0.1)};
-}
-
-@mixin ripple-theme-styles($theme, $is-filled) {
-  $opacities: if(inspection.get-theme-type($theme) == dark,
-    mdc-ripple-theme.$light-ink-opacities, mdc-ripple-theme.$dark-ink-opacities);
-
-  // 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);
-  }
-
-  &.cdk-program-focused,
-  &.cdk-keyboard-focused {
-    .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)));
-  }
-}
-
-// Hides the touch target on lower densities.
-@mixin touch-target-density($scale) {
-  @include mdc-helpers.if-touch-targets-unsupported($scale) {
-    .mat-mdc-button-touch-target {
-      display: none;
-    }
-  }
-}
diff --git a/src/material/button/_button-theme.scss b/src/material/button/_button-theme.scss
index 1ccf96e803bf..fe214cad2d67 100644
--- a/src/material/button/_button-theme.scss
+++ b/src/material/button/_button-theme.scss
@@ -5,118 +5,132 @@
 @use '@material/button/button-outlined-theme' as mdc-button-outlined-theme;
 @use '@material/elevation/elevation-theme' as mdc-elevation-theme;
 
-@use './button-theme-private';
+@use './button-base';
 @use '../core/mdc-helpers/mdc-helpers';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/tokens/token-utils';
 @use '../core/typography/typography';
 @use '../core/tokens/m2/mdc/filled-button' as tokens-mdc-filled-button;
+@use '../core/tokens/m2/mat/filled-button' as tokens-mat-filled-button;
 @use '../core/tokens/m2/mdc/outlined-button' as tokens-mdc-outlined-button;
+@use '../core/tokens/m2/mat/outlined-button' as tokens-mat-outlined-button;
 @use '../core/tokens/m2/mdc/protected-button' as tokens-mdc-protected-button;
+@use '../core/tokens/m2/mat/protected-button' as tokens-mat-protected-button;
 @use '../core/tokens/m2/mdc/text-button' as tokens-mdc-text-button;
+@use '../core/tokens/m2/mat/text-button' as tokens-mat-text-button;
 
-@function _on-color($theme, $palette) {
-  $is-dark: inspection.get-theme-type($theme) == dark;
-  @return if(mdc-helpers.variable-safe-contrast-tone($palette, $is-dark) == 'dark', #000, #fff);
+
+@mixin _text-button-variant($theme, $palette) {
+  $mdc-tokens: if($palette,
+    tokens-mdc-text-button.private-get-color-palette-color-tokens($theme, $palette),
+    tokens-mdc-text-button.get-color-tokens($theme)
+  );
+
+  $mat-tokens: if($palette,
+    tokens-mat-text-button.private-get-color-palette-color-tokens($theme, $palette),
+    tokens-mat-text-button.get-color-tokens($theme)
+  );
+
+  @include mdc-button-text-theme.theme($mdc-tokens);
+  @include token-utils.create-token-values(tokens-mat-text-button.$prefix, $mat-tokens);
 }
 
-@mixin base($theme) {
-  // TODO(mmalerba): Move button base tokens here
+@mixin _filled-button-variant($theme, $palette) {
+  $mdc-tokens: if($palette,
+    tokens-mdc-filled-button.private-get-color-palette-color-tokens($theme, $palette),
+    tokens-mdc-filled-button.get-color-tokens($theme)
+  );
+
+  $mat-tokens: if($palette,
+    tokens-mat-filled-button.private-get-color-palette-color-tokens($theme, $palette),
+    tokens-mat-filled-button.get-color-tokens($theme)
+  );
+
+  @include mdc-button-filled-theme.theme($mdc-tokens);
+  @include token-utils.create-token-values(tokens-mat-filled-button.$prefix, $mat-tokens);
 }
 
-@mixin color($theme) {
-  $surface: inspection.get-theme-color($theme, background, card);
-  $primary: inspection.get-theme-color($theme, primary);
-  $accent: inspection.get-theme-color($theme, accent);
-  $error: inspection.get-theme-color($theme, warn);
+@mixin _protected-button-variant($theme, $palette) {
+  $mdc-tokens: if($palette,
+    tokens-mdc-protected-button.private-get-color-palette-color-tokens($theme, $palette),
+    tokens-mdc-protected-button.get-color-tokens($theme)
+  );
 
-  $on-surface: _on-color($theme, $surface);
-  $on-primary: _on-color($theme, $primary);
-  $on-accent: _on-color($theme, $accent);
-  $on-error: _on-color($theme, $error);
+  $mat-tokens: if($palette,
+    tokens-mat-protected-button.private-get-color-palette-color-tokens($theme, $palette),
+    tokens-mat-protected-button.get-color-tokens($theme)
+  );
 
-  // TODO: remove these when tokenizing the ripples.
-  @include mdc-helpers.using-mdc-theme($theme) {
-    // Ripple colors
-    .mat-mdc-button, .mat-mdc-outlined-button {
-      @include button-theme-private.ripple-theme-styles($theme, false);
-    }
+  @include mdc-button-protected-theme.theme($mdc-tokens);
+  @include token-utils.create-token-values(tokens-mat-protected-button.$prefix, $mat-tokens);
+}
 
-    .mat-mdc-raised-button, .mat-mdc-unelevated-button {
-      @include button-theme-private.ripple-theme-styles($theme, true);
-    }
-  }
+@mixin _outlined-button-variant($theme, $palette) {
+  $mdc-tokens: if($palette,
+    tokens-mdc-outlined-button.private-get-color-palette-color-tokens($theme, $palette),
+    tokens-mdc-outlined-button.get-color-tokens($theme)
+  );
 
+  $mat-tokens: if($palette,
+    tokens-mat-outlined-button.private-get-color-palette-color-tokens($theme, $palette),
+    tokens-mat-outlined-button.get-color-tokens($theme)
+  );
+
+  @include mdc-button-outlined-theme.theme($mdc-tokens);
+  @include token-utils.create-token-values(tokens-mat-outlined-button.$prefix, $mat-tokens);
+}
+
+@mixin base($theme) {
+  // TODO(mmalerba): Move button base tokens here
+}
+
+@mixin color($theme) {
   .mat-mdc-button {
-    @include mdc-button-text-theme.theme(tokens-mdc-text-button.get-color-tokens($theme));
+    @include _text-button-variant($theme, null);
 
     &.mat-primary {
-      @include mdc-button-text-theme.theme(
-        tokens-mdc-text-button.private-get-color-palette-color-tokens($theme, primary));
+      @include _text-button-variant($theme, primary);
     }
 
     &.mat-accent {
-      @include mdc-button-text-theme.theme(
-        tokens-mdc-text-button.private-get-color-palette-color-tokens($theme, accent));
+      @include _text-button-variant($theme, accent);
     }
 
     &.mat-warn {
-      @include mdc-button-text-theme.theme(
-        tokens-mdc-text-button.private-get-color-palette-color-tokens($theme, warn));
+      @include _text-button-variant($theme, warn);
     }
   }
 
   .mat-mdc-unelevated-button {
-    $default-color-tokens: tokens-mdc-filled-button.get-color-tokens($theme, $surface, $on-surface);
-    $primary-color-tokens: tokens-mdc-filled-button.get-color-tokens($theme, $primary, $on-primary);
-    $accent-color-tokens: tokens-mdc-filled-button.get-color-tokens($theme, $accent, $on-accent);
-    $warn-color-tokens: tokens-mdc-filled-button.get-color-tokens($theme, $error, $on-error);
-
-    &.mat-unthemed {
-      @include mdc-button-filled-theme.theme($default-color-tokens);
-    }
+    @include _filled-button-variant($theme, null);
 
     &.mat-primary {
-      @include mdc-button-filled-theme.theme($primary-color-tokens);
+      @include _filled-button-variant($theme, primary);
     }
 
     &.mat-accent {
-      @include mdc-button-filled-theme.theme($accent-color-tokens);
+      @include _filled-button-variant($theme, accent);
     }
 
     &.mat-warn {
-      @include mdc-button-filled-theme.theme($warn-color-tokens);
+      @include _filled-button-variant($theme, warn);
     }
   }
 
   .mat-mdc-raised-button {
-    $default-color-tokens: tokens-mdc-protected-button.get-color-tokens(
-      $theme,
-      $surface,
-      $on-surface
-    );
-    $primary-color-tokens: tokens-mdc-protected-button.get-color-tokens(
-      $theme,
-      $primary,
-      $on-primary
-    );
-    $accent-color-tokens: tokens-mdc-protected-button.get-color-tokens($theme, $accent, $on-accent);
-    $warn-color-tokens: tokens-mdc-protected-button.get-color-tokens($theme, $error, $on-error);
-
-    &.mat-unthemed {
-      @include mdc-button-protected-theme.theme($default-color-tokens);
-    }
+    @include _protected-button-variant($theme, null);
 
     &.mat-primary {
-      @include mdc-button-protected-theme.theme($primary-color-tokens);
+      @include _protected-button-variant($theme, primary);
     }
 
     &.mat-accent {
-      @include mdc-button-protected-theme.theme($accent-color-tokens);
+      @include _protected-button-variant($theme, accent);
     }
 
     &.mat-warn {
-      @include mdc-button-protected-theme.theme($warn-color-tokens);
+      @include _protected-button-variant($theme, warn);
     }
 
     // TODO(wagnermaciel): Remove this workaround when b/301126527 is resolved
@@ -134,33 +148,18 @@
   }
 
   .mat-mdc-outlined-button {
-    $default-color-tokens: tokens-mdc-outlined-button.get-color-tokens(
-      $theme,
-      $on-surface,
-      $on-surface
-    );
-    $primary-color-tokens: tokens-mdc-outlined-button.get-color-tokens(
-      $theme,
-      $primary,
-      $on-primary
-    );
-    $accent-color-tokens: tokens-mdc-outlined-button.get-color-tokens($theme, $accent, $on-accent);
-    $warn-color-tokens: tokens-mdc-outlined-button.get-color-tokens($theme, $error, $on-error);
-
-    &.mat-unthemed {
-      @include mdc-button-outlined-theme.theme($default-color-tokens);
-    }
+    @include _outlined-button-variant($theme, null);
 
     &.mat-primary {
-      @include mdc-button-outlined-theme.theme($primary-color-tokens);
+      @include _outlined-button-variant($theme, primary);
     }
 
     &.mat-accent {
-      @include mdc-button-outlined-theme.theme($accent-color-tokens);
+      @include _outlined-button-variant($theme, accent);
     }
 
     &.mat-warn {
-      @include mdc-button-outlined-theme.theme($warn-color-tokens);
+      @include _outlined-button-variant($theme, warn);
     }
   }
 }
@@ -177,25 +176,25 @@
   .mat-mdc-button {
     $density-tokens: tokens-mdc-text-button.get-density-tokens($theme);
     @include mdc-button-text-theme.theme($density-tokens);
-    @include button-theme-private.touch-target-density($density-scale);
+    @include button-base.mat-private-button-touch-target-density($density-scale);
   }
 
   .mat-mdc-raised-button {
     $density-tokens: tokens-mdc-protected-button.get-density-tokens($theme);
     @include mdc-button-protected-theme.theme($density-tokens);
-    @include button-theme-private.touch-target-density($density-scale);
+    @include button-base.mat-private-button-touch-target-density($density-scale);
   }
 
   .mat-mdc-unelevated-button {
     $density-tokens: tokens-mdc-filled-button.get-density-tokens($theme);
     @include mdc-button-filled-theme.theme($density-tokens);
-    @include button-theme-private.touch-target-density($density-scale);
+    @include button-base.mat-private-button-touch-target-density($density-scale);
   }
 
   .mat-mdc-outlined-button {
     $density-tokens: tokens-mdc-outlined-button.get-density-tokens($theme);
     @include mdc-button-outlined-theme.theme($density-tokens);
-    @include button-theme-private.touch-target-density($density-scale);
+    @include button-base.mat-private-button-touch-target-density($density-scale);
   }
 }
 
diff --git a/src/material/button/_fab-theme.scss b/src/material/button/_fab-theme.scss
index 3f667eaf0fd3..4841b30f2142 100644
--- a/src/material/button/_fab-theme.scss
+++ b/src/material/button/_fab-theme.scss
@@ -2,7 +2,6 @@
 @use '@material/fab/fab-theme' as mdc-fab-theme;
 @use '@material/fab/extended-fab-theme' as mdc-extended-fab-theme;
 
-@use './button-theme-private';
 @use '../core/mdc-helpers/mdc-helpers';
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
@@ -42,15 +41,8 @@
   @include sass-utils.current-selector-or-root() {
     @include _fab-variant($theme, null);
 
-    // TODO(wagnermaciel): The ripple-theme-styles mixin depends heavily on
-    // being wrapped by using-mdc-theme. This workaround needs to be
-    // revisited w/ a more holistic solution.
     .mat-mdc-fab,
     .mat-mdc-mini-fab {
-      @include mdc-helpers.using-mdc-theme($theme) {
-        @include button-theme-private.ripple-theme-styles($theme, true);
-      }
-
       &.mat-primary {
         @include _fab-variant($theme, primary);
       }
diff --git a/src/material/button/_icon-button-theme.scss b/src/material/button/_icon-button-theme.scss
index b4c55c0edc47..511e9ac55731 100644
--- a/src/material/button/_icon-button-theme.scss
+++ b/src/material/button/_icon-button-theme.scss
@@ -1,20 +1,15 @@
 @use 'sass:math';
 @use '@material/density/functions' as mdc-density-functions;
 @use '@material/icon-button/icon-button-theme' as mdc-icon-button-theme;
-@use '../core/style/sass-utils';
 @use '../core/tokens/m2/mdc/icon-button' as tokens-mdc-icon-button;
+@use '../core/tokens/m2/mat/icon-button' as tokens-mat-icon-button;
 
-@use './button-theme-private';
+@use '../core/style/sass-utils';
+@use './button-base';
+@use '../core/tokens/token-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 
-$_icon-size: 24px;
-
-// TODO(crisbeto): move these into tokens
-@mixin _ripple-color($color) {
-  --mat-mdc-button-persistent-ripple-color: #{$color};
-  --mat-mdc-button-ripple-color: #{rgba($color, 0.1)};
-}
 
 @mixin base($theme) {
   // Add default values for tokens not related to color, typography, or density.
@@ -23,31 +18,35 @@ $_icon-size: 24px;
   }
 }
 
-@mixin color($theme) {
-  $color-tokens: tokens-mdc-icon-button.get-color-tokens($theme);
-  $is-dark: inspection.get-theme-type($theme) == dark;
+@mixin _icon-button-variant($theme, $palette) {
+  $mdc-tokens: if($palette,
+    tokens-mdc-icon-button.private-get-color-palette-color-tokens($theme, $palette),
+    tokens-mdc-icon-button.get-color-tokens($theme)
+  );
 
+  $mat-tokens: if($palette,
+    tokens-mat-icon-button.private-get-color-palette-color-tokens($theme, $palette),
+    tokens-mat-icon-button.get-color-tokens($theme)
+  );
+
+  @include mdc-icon-button-theme.theme($mdc-tokens);
+  @include token-utils.create-token-values(tokens-mat-icon-button.$prefix, $mat-tokens);
+}
+
+@mixin color($theme) {
   .mat-mdc-icon-button {
-    @include button-theme-private.ripple-theme-styles($theme, false);
-    @include mdc-icon-button-theme.theme($color-tokens);
-    @include _ripple-color(if($is-dark, #fff, #000));
+    @include _icon-button-variant($theme, null);
 
     &.mat-primary {
-      @include _ripple-color(inspection.get-theme-color($theme, primary));
-      @include mdc-icon-button-theme.theme(
-        tokens-mdc-icon-button.private-get-color-palette-color-tokens($theme, primary));
+      @include _icon-button-variant($theme, primary);
     }
 
     &.mat-accent {
-      @include _ripple-color(inspection.get-theme-color($theme, accent));
-      @include mdc-icon-button-theme.theme(
-        tokens-mdc-icon-button.private-get-color-palette-color-tokens($theme, accent));
+      @include _icon-button-variant($theme, accent);
     }
 
     &.mat-warn {
-      @include _ripple-color(inspection.get-theme-color($theme, warn));
-      @include mdc-icon-button-theme.theme(
-        tokens-mdc-icon-button.private-get-color-palette-color-tokens($theme, warn));
+      @include _icon-button-variant($theme, warn);
     }
   }
 }
@@ -55,6 +54,7 @@ $_icon-size: 24px;
 @mixin typography($theme) {}
 
 @mixin density($theme) {
+  $icon-size: 24px;
   $density-scale: inspection.get-theme-density($theme);
   // Manually apply the expected density theming, and include the padding
   // as it was applied before
@@ -85,9 +85,9 @@ $_icon-size: 24px;
     // fails validation because the variable is "undefined" in the sass stack.
     width: var(--mdc-icon-button-state-layer-size);
     height: var(--mdc-icon-button-state-layer-size);
-    padding: math.div($calculated-size - $_icon-size, 2);
+    padding: math.div($calculated-size - $icon-size, 2);
 
-    @include button-theme-private.touch-target-density($density-scale);
+    @include button-base.mat-private-button-touch-target-density($density-scale);
   }
 }
 
diff --git a/src/material/button/button.scss b/src/material/button/button.scss
index 21c9c6ab9c0e..0f159ce4860e 100644
--- a/src/material/button/button.scss
+++ b/src/material/button/button.scss
@@ -13,9 +13,13 @@
 @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;
+@use '../core/tokens/m2/mat/filled-button' as tokens-mat-filled-button;
 @use '../core/tokens/m2/mdc/outlined-button' as tokens-mdc-outlined-button;
+@use '../core/tokens/m2/mat/outlined-button' as tokens-mat-outlined-button;
 @use '../core/tokens/m2/mdc/protected-button' as tokens-mdc-protected-button;
+@use '../core/tokens/m2/mat/protected-button' as tokens-mat-protected-button;
 @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);
@@ -27,6 +31,8 @@
 
     @include mdc-button-text-theme.theme-styles($mdc-text-button-slots);
     @include mdc-button-text-theme.theme(tokens-mdc-text-button.get-unthemable-tokens());
+    @include button-base.mat-private-button-ripple(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
@@ -40,11 +46,10 @@
   .mat-mdc-unelevated-button {
     $mdc-filled-button-slots: tokens-mdc-filled-button.get-token-slots();
 
-    // Add the slots for MDC text button.
     @include mdc-button-filled-theme.theme-styles($mdc-filled-button-slots);
-
-    // Add default values for MDC text button tokens that aren't outputted by the theming API.
     @include mdc-button-filled-theme.theme(tokens-mdc-filled-button.get-unthemable-tokens());
+    @include button-base.mat-private-button-ripple(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
@@ -59,11 +64,10 @@
   .mat-mdc-raised-button {
     $mdc-button-protected-slots: tokens-mdc-protected-button.get-token-slots();
 
-    // Add the slots for MDC text button.
     @include mdc-button-protected-theme.theme-styles($mdc-button-protected-slots);
-
-    // Add default values for MDC text button tokens that aren't outputted by the theming API.
     @include mdc-button-protected-theme.theme(tokens-mdc-protected-button.get-unthemable-tokens());
+    @include button-base.mat-private-button-ripple(tokens-mat-protected-button.$prefix,
+      tokens-mat-protected-button.get-token-slots());
 
     @include token-utils.use-tokens(
       tokens-mdc-protected-button.$prefix,
@@ -85,11 +89,10 @@
   .mat-mdc-outlined-button {
     $mdc-outlined-button-slots: tokens-mdc-outlined-button.get-token-slots();
 
-    // Add the slots for MDC text button.
     @include mdc-button-outlined-theme.theme-styles($mdc-outlined-button-slots);
-
-    // Add default values for MDC text button tokens that aren't outputted by the theming API.
     @include mdc-button-outlined-theme.theme(tokens-mdc-outlined-button.get-unthemable-tokens());
+    @include button-base.mat-private-button-ripple(tokens-mat-outlined-button.$prefix,
+      tokens-mat-outlined-button.get-token-slots());
 
     @include token-utils.use-tokens(
       tokens-mdc-outlined-button.$prefix,
diff --git a/src/material/button/fab.scss b/src/material/button/fab.scss
index 3902c2b50304..8c07e851e388 100644
--- a/src/material/button/fab.scss
+++ b/src/material/button/fab.scss
@@ -35,6 +35,8 @@
 .mat-mdc-fab, .mat-mdc-mini-fab {
   @include button-base.mat-private-button-interactive();
   @include button-base.mat-private-button-touch-target(true);
+  @include button-base.mat-private-button-ripple(tokens-mat-fab.$prefix,
+    tokens-mat-fab.get-token-slots());
   @include style-private.private-animation-noop();
   @include elevation.elevation(6);
   flex-shrink: 0; // Prevent the button from shrinking since it's always supposed to be a circle.
diff --git a/src/material/button/icon-button.scss b/src/material/button/icon-button.scss
index 2ba3e1c86b32..383b71e3634a 100644
--- a/src/material/button/icon-button.scss
+++ b/src/material/button/icon-button.scss
@@ -3,6 +3,7 @@
 @use '@material/theme/custom-properties' as mdc-custom-properties;
 
 @use '../core/tokens/m2/mdc/icon-button' as tokens-mdc-icon-button;
+@use '../core/tokens/m2/mat/icon-button' as tokens-mat-icon-button;
 
 @use './button-base';
 @use '../core/style/private';
@@ -53,6 +54,8 @@
   }
 
   @include button-base.mat-private-button-interactive();
+  @include button-base.mat-private-button-ripple(tokens-mat-icon-button.$prefix,
+    tokens-mat-icon-button.get-token-slots());
   @include button-base.mat-private-button-touch-target(true);
   @include private.private-animation-noop();
 
diff --git a/src/material/core/tokens/m2/mat/_fab.scss b/src/material/core/tokens/m2/mat/_fab.scss
index 1fa4a4b2ccc0..7fbadbd76e3f 100644
--- a/src/material/core/tokens/m2/mat/_fab.scss
+++ b/src/material/core/tokens/m2/mat/_fab.scss
@@ -1,3 +1,6 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
@@ -14,24 +17,48 @@ $prefix: (mat, fab);
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   $is-dark: inspection.get-theme-type($theme) == dark;
-  $surface: if($is-dark, #fff, #000);
+  $on-surface: if($is-dark, #fff, #000);
+  $ripple-opacities: if($is-dark,
+    mdc-ripple-theme.$light-ink-opacities,
+    mdc-ripple-theme.$dark-ink-opacities
+  );
 
   @return (
     // Color of icons and text projected into a FAB.
     foreground-color: inspection.get-theme-color($theme, foreground, base),
 
+    // Color of the element that shows the hover, focus and pressed states.
+    state-layer-color: $on-surface,
+
+    // Color of the ripple element.
+    ripple-color: rgba($on-surface, 0.1),
+
+    // Opacity of the ripple when the button is hovered.
+    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+
+    // Opacity of the ripple when the button is focused.
+    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+
+    // Opacity of the ripple when the button is pressed.
+    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+
     // MDC doesn't have tokens for disabled FABs so we need to implemented them ourselves.
     // Background color of the container when the FAB is disabled.
-    disabled-state-container-color: rgba($surface, 0.12),
+    disabled-state-container-color: rgba($on-surface, 0.12),
+
     // Color of the icons and projected text when the FAB is disabled.
-    disabled-state-foreground-color: rgba($surface, if($is-dark, 0.5, 0.38)),
+    disabled-state-foreground-color: rgba($on-surface, if($is-dark, 0.5, 0.38)),
   );
 }
 
 // Generates the mapping for the properties that change based on the FAB palette color.
 @function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $color: inspection.get-theme-color($theme, $palette-name, default-contrast);
+
   @return (
-    foreground-color: inspection.get-theme-color($theme, $palette-name, default-contrast),
+    foreground-color: $color,
+    state-layer-color: $color,
+    ripple-color: if(meta.type-of($color) == color, rgba($color, 0.1), $color),
   );
 }
 
diff --git a/src/material/core/tokens/m2/mat/_filled-button.scss b/src/material/core/tokens/m2/mat/_filled-button.scss
new file mode 100644
index 000000000000..39db80d2d50d
--- /dev/null
+++ b/src/material/core/tokens/m2/mat/_filled-button.scss
@@ -0,0 +1,73 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@use '../../token-utils';
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, filled-button);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $on-surface: if($is-dark, #fff, #000);
+  $ripple-opacities: if($is-dark,
+    mdc-ripple-theme.$light-ink-opacities,
+    mdc-ripple-theme.$dark-ink-opacities
+  );
+
+  @return (
+    // Color of the element that shows the hover, focus and pressed states.
+    state-layer-color: $on-surface,
+
+    // Color of the ripple element.
+    ripple-color: rgba($on-surface, 0.1),
+
+    // Opacity of the ripple when the button is hovered.
+    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+
+    // Opacity of the ripple when the button is focused.
+    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+
+    // Opacity of the ripple when the button is pressed.
+    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+  );
+}
+
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $color: inspection.get-theme-color($theme, $palette-name, default-contrast);
+
+  @return (
+    state-layer-color: $color,
+    ripple-color: if(meta.type-of($color) == color, rgba($color, 0.1), $color),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}
diff --git a/src/material/core/tokens/m2/mat/_icon-button.scss b/src/material/core/tokens/m2/mat/_icon-button.scss
new file mode 100644
index 000000000000..e28df5673dfc
--- /dev/null
+++ b/src/material/core/tokens/m2/mat/_icon-button.scss
@@ -0,0 +1,73 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@use '../../token-utils';
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, icon-button);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $on-surface: if($is-dark, #fff, #000);
+  $ripple-opacities: if($is-dark,
+    mdc-ripple-theme.$light-ink-opacities,
+    mdc-ripple-theme.$dark-ink-opacities
+  );
+
+  @return (
+    // Color of the element that shows the hover, focus and pressed states.
+    state-layer-color: $on-surface,
+
+    // Color of the ripple element.
+    ripple-color: rgba($on-surface, 0.1),
+
+    // Opacity of the ripple when the button is hovered.
+    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+
+    // Opacity of the ripple when the button is focused.
+    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+
+    // Opacity of the ripple when the button is pressed.
+    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+  );
+}
+
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $color: inspection.get-theme-color($theme, $palette-name);
+
+  @return (
+    state-layer-color: $color,
+    ripple-color: if(meta.type-of($color) == color, rgba($color, 0.1), $color),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}
diff --git a/src/material/core/tokens/m2/mat/_outlined-button.scss b/src/material/core/tokens/m2/mat/_outlined-button.scss
new file mode 100644
index 000000000000..fb4ac47888f1
--- /dev/null
+++ b/src/material/core/tokens/m2/mat/_outlined-button.scss
@@ -0,0 +1,73 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@use '../../token-utils';
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, outlined-button);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $on-surface: if($is-dark, #fff, #000);
+  $ripple-opacities: if($is-dark,
+    mdc-ripple-theme.$light-ink-opacities,
+    mdc-ripple-theme.$dark-ink-opacities
+  );
+
+  @return (
+    // Color of the element that shows the hover, focus and pressed states.
+    state-layer-color: $on-surface,
+
+    // Color of the ripple element.
+    ripple-color: rgba($on-surface, 0.1),
+
+    // Opacity of the ripple when the button is hovered.
+    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+
+    // Opacity of the ripple when the button is focused.
+    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+
+    // Opacity of the ripple when the button is pressed.
+    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+  );
+}
+
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $color: inspection.get-theme-color($theme, $palette-name);
+
+  @return (
+    state-layer-color: $color,
+    ripple-color: if(meta.type-of($color) == color, rgba($color, 0.1), $color),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}
diff --git a/src/material/core/tokens/m2/mat/_protected-button.scss b/src/material/core/tokens/m2/mat/_protected-button.scss
new file mode 100644
index 000000000000..03a117fb75a6
--- /dev/null
+++ b/src/material/core/tokens/m2/mat/_protected-button.scss
@@ -0,0 +1,73 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@use '../../token-utils';
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, protected-button);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $on-surface: if($is-dark, #fff, #000);
+  $ripple-opacities: if($is-dark,
+    mdc-ripple-theme.$light-ink-opacities,
+    mdc-ripple-theme.$dark-ink-opacities
+  );
+
+  @return (
+    // Color of the element that shows the hover, focus and pressed states.
+    state-layer-color: $on-surface,
+
+    // Color of the ripple element.
+    ripple-color: rgba($on-surface, 0.1),
+
+    // Opacity of the ripple when the button is hovered.
+    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+
+    // Opacity of the ripple when the button is focused.
+    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+
+    // Opacity of the ripple when the button is pressed.
+    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+  );
+}
+
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $color: inspection.get-theme-color($theme, $palette-name, default-contrast);
+
+  @return (
+    state-layer-color: $color,
+    ripple-color: if(meta.type-of($color) == color, rgba($color, 0.1), $color),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}
diff --git a/src/material/core/tokens/m2/mat/_text-button.scss b/src/material/core/tokens/m2/mat/_text-button.scss
new file mode 100644
index 000000000000..7a509fa7f612
--- /dev/null
+++ b/src/material/core/tokens/m2/mat/_text-button.scss
@@ -0,0 +1,73 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@use '../../token-utils';
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, text-button);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $on-surface: if($is-dark, #fff, #000);
+  $ripple-opacities: if($is-dark,
+    mdc-ripple-theme.$light-ink-opacities,
+    mdc-ripple-theme.$dark-ink-opacities
+  );
+
+  @return (
+    // Color of the element that shows the hover, focus and pressed states.
+    state-layer-color: $on-surface,
+
+    // Color of the ripple element.
+    ripple-color: rgba($on-surface, 0.1),
+
+    // Opacity of the ripple when the button is hovered.
+    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+
+    // Opacity of the ripple when the button is focused.
+    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+
+    // Opacity of the ripple when the button is pressed.
+    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+  );
+}
+
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $color: inspection.get-theme-color($theme, $palette-name);
+
+  @return (
+    state-layer-color: $color,
+    ripple-color: if(meta.type-of($color) == color, rgba($color, 0.1), $color),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}
diff --git a/src/material/core/tokens/m2/mdc/_extended-fab.scss b/src/material/core/tokens/m2/mdc/_extended-fab.scss
index 45a535ae863a..a82a5e93b311 100644
--- a/src/material/core/tokens/m2/mdc/_extended-fab.scss
+++ b/src/material/core/tokens/m2/mdc/_extended-fab.scss
@@ -8,6 +8,9 @@ $prefix: (mdc, extended-fab);
 
 @function get-unthemable-tokens() {
   @return (
+    // =============================================================================================
+    // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
+    // =============================================================================================
     container-color: null,
     container-elevation: null,
     container-height: null,
diff --git a/src/material/core/tokens/m2/mdc/_fab.scss b/src/material/core/tokens/m2/mdc/_fab.scss
index b74094cea9d4..562bf0c57b6e 100644
--- a/src/material/core/tokens/m2/mdc/_fab.scss
+++ b/src/material/core/tokens/m2/mdc/_fab.scss
@@ -26,6 +26,9 @@ $ripple-target: '.mdc-fab__ripple';
     // We create a custom token for it instead.
     icon-color: null,
 
+    // =============================================================================================
+    // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
+    // =============================================================================================
     container-elevation: null,
     container-height: null,
     container-shadow-color: null,
diff --git a/src/material/core/tokens/m2/mdc/_filled-button.scss b/src/material/core/tokens/m2/mdc/_filled-button.scss
index 548f95b0ef4b..a95833c420f1 100644
--- a/src/material/core/tokens/m2/mdc/_filled-button.scss
+++ b/src/material/core/tokens/m2/mdc/_filled-button.scss
@@ -1,6 +1,5 @@
 @use 'sass:map';
 @use '../../token-utils';
-@use '../../../mdc-helpers/mdc-helpers';
 @use '../../../style/sass-utils';
 @use '../../../theming/inspection';
 @use '../../../theming/theming';
@@ -24,6 +23,9 @@ $prefix: (mdc, filled-button);
     keep-touch-target: false,
     pressed-container-elevation: 0,
 
+    // =============================================================================================
+    // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
+    // =============================================================================================
     focus-ring-color: null,
     focus-ring-offset: null,
     focus-state-layer-opacity: null,
@@ -43,33 +45,32 @@ $prefix: (mdc, filled-button);
     with-icon-hover-icon-color: null,
     with-icon-icon-color: null,
     with-icon-icon-size: null,
-    with-icon-pressed-icon-color: null
+    with-icon-pressed-icon-color: null,
+    focus-state-layer-color: null,
+    hover-state-layer-color: null,
+    pressed-state-layer-color: null,
   );
 }
 
-@function _on-color($theme, $palette) {
-  @if ($palette) {
-    $is-dark: inspection.get-theme-type($theme) == dark;
-    @return if(mdc-helpers.variable-safe-contrast-tone($palette, $is-dark) == 'dark', #000, #fff);
-  }
-}
-
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme, $color: null, $on-color: null) {
+@function get-color-tokens($theme) {
   $is-dark: inspection.get-theme-type($theme) == dark;
-  $primary: inspection.get-theme-color($theme, primary);
   $surface: inspection.get-theme-color($theme, background, card);
-  $on-primary: _on-color($theme, $primary);
-  $on-surface: _on-color($theme, $surface);
+  $on-surface: if($is-dark, #fff, #000);
 
   @return (
-    container-color: if($color, $color, transparent),
+    container-color: $surface,
+    label-text-color: inherit,
     disabled-container-color: rgba($on-surface, 0.12),
     disabled-label-text-color: rgba($on-surface, if($is-dark, 0.5, 0.38)),
-    focus-state-layer-color: $on-primary,
-    hover-state-layer-color: $on-primary,
-    label-text-color: if($on-color, $on-color, inherit),
-    pressed-state-layer-color: $on-primary
+  );
+}
+
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  @return (
+    container-color: inspection.get-theme-color($theme, $palette-name, default),
+    label-text-color: inspection.get-theme-color($theme, $palette-name, default-contrast),
   );
 }
 
diff --git a/src/material/core/tokens/m2/mdc/_icon-button.scss b/src/material/core/tokens/m2/mdc/_icon-button.scss
index 28cddebe52bd..1fbc989bf3e2 100644
--- a/src/material/core/tokens/m2/mdc/_icon-button.scss
+++ b/src/material/core/tokens/m2/mdc/_icon-button.scss
@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use '../../../style/sass-utils';
 @use '../../../theming/inspection';
 @use '../../token-utils';
@@ -57,8 +56,6 @@ $prefix: (mdc, icon-button);
 
 // Generates the mapping for the properties that change based on the button palette color.
 @function private-get-color-palette-color-tokens($theme, $palette-name) {
-  $palette: map.get($theme, $palette-name);
-
   @return (
     icon-color: inspection.get-theme-color($theme, $palette-name)
   );
diff --git a/src/material/core/tokens/m2/mdc/_outlined-button.scss b/src/material/core/tokens/m2/mdc/_outlined-button.scss
index 746fa27a5547..8087c072d811 100644
--- a/src/material/core/tokens/m2/mdc/_outlined-button.scss
+++ b/src/material/core/tokens/m2/mdc/_outlined-button.scss
@@ -1,6 +1,5 @@
 @use 'sass:map';
 @use '../../token-utils';
-@use '../../../mdc-helpers/mdc-helpers';
 @use '../../../style/sass-utils';
 @use '../../../theming/inspection';
 @use '../../../theming/theming';
@@ -21,6 +20,9 @@ $prefix: (mdc, outlined-button);
     outline-width: 1px,
     container-shape: 4px,
 
+    // =============================================================================================
+    // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
+    // =============================================================================================
     hover-state-layer-opacity: null,
     focus-state-layer-opacity: null,
     pressed-state-layer-opacity: null,
@@ -55,27 +57,26 @@ $prefix: (mdc, outlined-button);
   );
 }
 
-@function _on-color($theme, $palette) {
-  @if ($palette) {
-    $is-dark: inspection.get-theme-type($theme) == dark;
-    @return if(mdc-helpers.variable-safe-contrast-tone($palette, $is-dark) == 'dark', #000, #fff);
-  }
-}
-
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme, $color: null, $on-color: null) {
+@function get-color-tokens($theme) {
   $is-dark: inspection.get-theme-type($theme) == dark;
-  $surface: inspection.get-theme-color($theme, background, card);
-  $on-surface: _on-color($theme, $surface);
+  $on-surface: if($is-dark, #fff, #000);
 
   @return (
     disabled-outline-color: rgba($on-surface, 0.12),
     disabled-label-text-color: rgba($on-surface, if($is-dark, 0.5, 0.38)),
-    label-text-color: if($color, $color, inherit),
+    label-text-color: inherit,
     outline-color: rgba($on-surface, 0.12)
   );
 }
 
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  @return (
+    label-text-color: inspection.get-theme-color($theme, $palette-name, default),
+  );
+}
+
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
   @return ();
diff --git a/src/material/core/tokens/m2/mdc/_protected-button.scss b/src/material/core/tokens/m2/mdc/_protected-button.scss
index 9e456b0e5b03..c07ab06ce8c7 100644
--- a/src/material/core/tokens/m2/mdc/_protected-button.scss
+++ b/src/material/core/tokens/m2/mdc/_protected-button.scss
@@ -1,6 +1,5 @@
 @use 'sass:map';
 @use '../../token-utils';
-@use '../../../mdc-helpers/mdc-helpers';
 @use '../../../style/sass-utils';
 @use '../../../theming/inspection';
 @use '../../../theming/theming';
@@ -19,6 +18,9 @@ $prefix: (mdc, protected-button);
     container-shape: 4px,
     keep-touch-target: false,
 
+    // =============================================================================================
+    // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
+    // =============================================================================================
     focus-ring-color: null,
     focus-ring-offset: null,
     focus-state-layer-opacity: null,
@@ -43,36 +45,34 @@ $prefix: (mdc, protected-button);
     with-icon-focus-icon-color: null,
     with-icon-hover-icon-color: null,
     with-icon-icon-color: null,
-    with-icon-pressed-icon-color: null
+    with-icon-pressed-icon-color: null,
+    focus-state-layer-color: null,
+    hover-state-layer-color: null,
+    pressed-state-layer-color: null,
   );
 }
 
-@function _on-color($theme, $palette) {
-  @if ($palette) {
-    $is-dark: inspection.get-theme-type($theme) == dark;
-    @return if(mdc-helpers.variable-safe-contrast-tone($palette, $is-dark) == 'dark', #000, #fff);
-  }
-}
-
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme, $color: null, $on-color: null) {
+@function get-color-tokens($theme) {
   $is-dark: inspection.get-theme-type($theme) == dark;
-  $primary: inspection.get-theme-color($theme, primary);
-  $surface: inspection.get-theme-color($theme, background, card);
-  $on-primary: _on-color($theme, $primary);
-  $on-surface: _on-color($theme, $surface);
+  $on-surface: if($is-dark, #fff, #000);
 
   @return (
-    container-color: if($color, $color, transparent),
-    focus-state-layer-color: $on-primary,
-    hover-state-layer-color: $on-primary,
-    pressed-state-layer-color: $on-primary,
-    label-text-color: if($on-color, $on-color, inherit),
+    container-color: inspection.get-theme-color($theme, background, card),
+    label-text-color: inherit,
     disabled-container-color: rgba($on-surface, 0.12),
     disabled-label-text-color: rgba($on-surface, if($is-dark, 0.5, 0.38))
   );
 }
 
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  @return (
+    container-color: inspection.get-theme-color($theme, $palette-name, default),
+    label-text-color: inspection.get-theme-color($theme, $palette-name, default-contrast),
+  );
+}
+
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
   @return ();
diff --git a/src/material/snack-bar/snack-bar-container.scss b/src/material/snack-bar/snack-bar-container.scss
index cadfc349cbc8..9091b929091c 100644
--- a/src/material/snack-bar/snack-bar-container.scss
+++ b/src/material/snack-bar/snack-bar-container.scss
@@ -3,6 +3,7 @@
 @use '@material/theme/custom-properties' as mdc-custom-properties;
 @use '../core/tokens/m2/mdc/snack-bar' as tokens-mdc-snack-bar;
 @use '../core/tokens/m2/mat/snack-bar' as tokens-mat-snack-bar;
+@use '../core/tokens/m2/mat/text-button' as tokens-mat-text-button;
 @use '../core/tokens/token-utils';
 @use '../core/mdc-helpers/mdc-helpers';
 
@@ -67,10 +68,12 @@
       }
 
       // Darken the ripples in the button so they're visible against the dark background.
-      --mat-mdc-button-persistent-ripple-color: currentColor;
+      @include token-utils.create-token-values(tokens-mat-text-button.$prefix, (
+        state-layer-color: currentColor,
+        ripple-color: currentColor,
+      ));
 
       .mat-ripple-element {
-        background-color: currentColor;
         opacity: 0.1;
       }
     }