diff --git a/src/material/button-toggle/BUILD.bazel b/src/material/button-toggle/BUILD.bazel
index 108e3572f700..505c59b4a24b 100644
--- a/src/material/button-toggle/BUILD.bazel
+++ b/src/material/button-toggle/BUILD.bazel
@@ -13,7 +13,7 @@ package(default_visibility = ["//visibility:public"])
 sass_library(
     name = "m3",
     srcs = [
-        "_m3-standard-button-toggle.scss",
+        "_m3-button-toggle.scss",
     ],
     deps = [
         "//src/material/core/style:sass_utils",
@@ -24,8 +24,7 @@ sass_library(
 sass_library(
     name = "m2",
     srcs = [
-        "_m2-legacy-button-toggle.scss",
-        "_m2-standard-button-toggle.scss",
+        "_m2-button-toggle.scss",
     ],
     deps = [
         "//src/material/core/style:elevation",
diff --git a/src/material/button-toggle/_button-toggle-theme.scss b/src/material/button-toggle/_button-toggle-theme.scss
index 3fbb8694090f..5313c3a1adc6 100644
--- a/src/material/button-toggle/_button-toggle-theme.scss
+++ b/src/material/button-toggle/_button-toggle-theme.scss
@@ -4,8 +4,7 @@
 @use '../core/theming/validation';
 @use '../core/tokens/token-utils';
 @use '../core/typography/typography';
-@use './m2-legacy-button-toggle';
-@use './m2-standard-button-toggle';
+@use './m2-button-toggle';
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
 /// for the mat-button-toggle.
@@ -16,12 +15,8 @@
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        m2-legacy-button-toggle.$prefix,
-        m2-legacy-button-toggle.get-unthemable-tokens()
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-standard-button-toggle.$prefix,
-        m2-standard-button-toggle.get-unthemable-tokens()
+        m2-button-toggle.$prefix,
+        m2-button-toggle.get-unthemable-tokens()
       );
     }
   }
@@ -38,12 +33,8 @@
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        m2-legacy-button-toggle.$prefix,
-        m2-legacy-button-toggle.get-color-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-standard-button-toggle.$prefix,
-        m2-standard-button-toggle.get-color-tokens($theme)
+        m2-button-toggle.$prefix,
+        m2-button-toggle.get-color-tokens($theme)
       );
     }
   }
@@ -57,12 +48,8 @@
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        m2-legacy-button-toggle.$prefix,
-        m2-legacy-button-toggle.get-typography-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-standard-button-toggle.$prefix,
-        m2-standard-button-toggle.get-typography-tokens($theme)
+        m2-button-toggle.$prefix,
+        m2-button-toggle.get-typography-tokens($theme)
       );
     }
   }
@@ -76,12 +63,8 @@
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        m2-legacy-button-toggle.$prefix,
-        m2-legacy-button-toggle.get-density-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-standard-button-toggle.$prefix,
-        m2-standard-button-toggle.get-density-tokens($theme)
+        m2-button-toggle.$prefix,
+        m2-button-toggle.get-density-tokens($theme)
       );
     }
   }
@@ -89,17 +72,11 @@
 
 /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
 @function _define-overrides() {
-  $legacy-tokens: m2-legacy-button-toggle.get-token-slots();
-  $standard-tokens: m2-standard-button-toggle.get-token-slots();
+  $standard-tokens: m2-button-toggle.get-token-slots();
 
   @return (
     (
-      namespace: m2-legacy-button-toggle.$prefix,
-      tokens: $legacy-tokens,
-      prefix: 'legacy-',
-    ),
-    (
-      namespace: m2-standard-button-toggle.$prefix,
+      namespace: m2-button-toggle.$prefix,
       tokens: $standard-tokens,
     ),
   );
@@ -141,11 +118,11 @@
   );
   $mat-standard-button-toggle-tokens: token-utils.get-tokens-for(
     $tokens,
-    m2-standard-button-toggle.$prefix,
+    m2-button-toggle.$prefix,
     $options...
   );
   @include token-utils.create-token-values(
-    m2-standard-button-toggle.$prefix,
+    m2-button-toggle.$prefix,
     $mat-standard-button-toggle-tokens
   );
 }
diff --git a/src/material/button-toggle/_m2-standard-button-toggle.scss b/src/material/button-toggle/_m2-button-toggle.scss
similarity index 69%
rename from src/material/button-toggle/_m2-standard-button-toggle.scss
rename to src/material/button-toggle/_m2-button-toggle.scss
index 29edbdf58fe3..77ab67956945 100644
--- a/src/material/button-toggle/_m2-standard-button-toggle.scss
+++ b/src/material/button-toggle/_m2-button-toggle.scss
@@ -12,9 +12,12 @@ $prefix: (mat, button-toggle);
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
   @return (
-    shape: 4px,
-    hover-state-layer-opacity: 0.04,
     focus-state-layer-opacity: 0.12,
+    hover-state-layer-opacity: 0.04,
+    legacy-focus-state-layer-opacity: 1,
+    legacy-height: 36px,
+    legacy-shape: 2px,
+    shape: 4px,
   );
 }
 
@@ -33,19 +36,31 @@ $prefix: (mat, button-toggle);
       $theme-divider-color);
 
   @return (
-    text-color: inspection.get-theme-color($theme, foreground, text),
     background-color: inspection.get-theme-color($theme, background, card),
-    state-layer-color: sass-utils.safe-color-change(
-        inspection.get-theme-color($theme, background, focused-button), $alpha: 1),
-    selected-state-background-color: inspection.get-theme-color(
-        $theme, background, selected-button),
-    selected-state-text-color: inspection.get-theme-color($theme, foreground, text),
-    disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-button),
-    disabled-state-background-color: inspection.get-theme-color($theme, background, card),
-    disabled-selected-state-text-color: inspection.get-theme-color($theme, foreground, text),
     disabled-selected-state-background-color:
-      inspection.get-theme-color($theme, background, selected-disabled-button),
+        inspection.get-theme-color($theme, background, selected-disabled-button),
+    disabled-selected-state-text-color: inspection.get-theme-color($theme, foreground, text),
+    disabled-state-background-color: inspection.get-theme-color($theme, background, card),
+    disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-button),
     divider-color: $divider-color,
+    legacy-disabled-selected-state-background-color:
+        inspection.get-theme-color($theme, background, selected-disabled-button),
+    legacy-disabled-state-background-color:
+        inspection.get-theme-color($theme, background, disabled-button-toggle),
+    legacy-disabled-state-text-color:
+        inspection.get-theme-color($theme, foreground, disabled-button),
+    legacy-selected-state-background-color:
+        inspection.get-theme-color($theme, background, selected-button),
+    legacy-selected-state-text-color:
+        inspection.get-theme-color($theme, foreground, secondary-text),
+    legacy-state-layer-color: inspection.get-theme-color($theme, background, focused-button),
+    legacy-text-color: inspection.get-theme-color($theme, foreground, hint-text),
+    selected-state-background-color:
+        inspection.get-theme-color($theme, background, selected-button),
+    selected-state-text-color: inspection.get-theme-color($theme, foreground, text),
+    state-layer-color: sass-utils.safe-color-change(
+        inspection.get-theme-color($theme, background, focused-button), $alpha: 1),
+    text-color: inspection.get-theme-color($theme, foreground, text),
   );
 }
 
@@ -57,6 +72,11 @@ $prefix: (mat, button-toggle);
     label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
     label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
     label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
+    legacy-label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
+    legacy-label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),
+    legacy-label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
+    legacy-label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
+    legacy-label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
   );
 }
 
diff --git a/src/material/button-toggle/_m2-legacy-button-toggle.scss b/src/material/button-toggle/_m2-legacy-button-toggle.scss
deleted file mode 100644
index 1828b16c719c..000000000000
--- a/src/material/button-toggle/_m2-legacy-button-toggle.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-@use '../core/tokens/m2-utils';
-@use '../core/theming/inspection';
-@use '../core/style/sass-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, button-toggle-legacy);
-
-// 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 (
-    height: 36px,
-    shape: 2px,
-    focus-state-layer-opacity: 1,
-  );
-}
-
-// Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme) {
-  @return (
-    text-color: inspection.get-theme-color($theme, foreground, hint-text),
-    state-layer-color: inspection.get-theme-color($theme, background, focused-button),
-    selected-state-text-color: inspection.get-theme-color($theme, foreground, secondary-text),
-    selected-state-background-color: inspection.get-theme-color(
-        $theme, background, selected-button),
-    disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-button),
-    disabled-state-background-color: inspection.get-theme-color(
-        $theme, background, disabled-button-toggle),
-    disabled-selected-state-background-color: inspection.get-theme-color(
-        $theme, background, selected-disabled-button)
-  );
-}
-
-// Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($theme) {
-  @return (
-    label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
-    label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),
-    label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
-    label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
-    label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
-  );
-}
-
-// 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(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}
diff --git a/src/material/button-toggle/_m3-standard-button-toggle.scss b/src/material/button-toggle/_m3-button-toggle.scss
similarity index 100%
rename from src/material/button-toggle/_m3-standard-button-toggle.scss
rename to src/material/button-toggle/_m3-button-toggle.scss
diff --git a/src/material/button-toggle/button-toggle.scss b/src/material/button-toggle/button-toggle.scss
index a402c6d9a9f2..2ffd3a6b0b12 100644
--- a/src/material/button-toggle/button-toggle.scss
+++ b/src/material/button-toggle/button-toggle.scss
@@ -4,8 +4,7 @@
 @use '../core/style/layout-common';
 @use '../core/style/elevation';
 @use '../core/tokens/token-utils';
-@use './m2-legacy-button-toggle';
-@use './m2-standard-button-toggle';
+@use './m2-button-toggle';
 
 $standard-padding: 12px !default;
 $legacy-padding: 16px !default;
@@ -18,170 +17,147 @@ $legacy-height: 36px !default;
 $standard-border-radius: 4px !default;
 $legacy-border-radius: 2px !default;
 
-$_legacy-tokens: (
-  m2-legacy-button-toggle.$prefix,
-  m2-legacy-button-toggle.get-token-slots()
-);
-
-$_standard-tokens: (
-  m2-standard-button-toggle.$prefix,
-  m2-standard-button-toggle.get-token-slots()
-);
-
-.mat-button-toggle-standalone,
-.mat-button-toggle-group {
-  position: relative;
-  display: inline-flex;
-  flex-direction: row;
-  white-space: nowrap;
-  overflow: hidden;
-  -webkit-tap-highlight-color: transparent;
-
-  // Fixes the ripples not being clipped to the border radius on Safari.
-  transform: translateZ(0);
-
-  @include token-utils.use-tokens($_legacy-tokens...) {
-    border-radius: token-utils.slot(shape);
-  }
+@include token-utils.use-tokens(m2-button-toggle.$prefix, m2-button-toggle.get-token-slots()) {
+  .mat-button-toggle-standalone,
+  .mat-button-toggle-group {
+    position: relative;
+    display: inline-flex;
+    flex-direction: row;
+    white-space: nowrap;
+    overflow: hidden;
+    -webkit-tap-highlight-color: transparent;
+    border-radius: token-utils.slot(legacy-shape);
 
-  @include elevation.overridable-elevation(2);
+    // Fixes the ripples not being clipped to the border radius on Safari.
+    transform: translateZ(0);
 
-  @include cdk.high-contrast {
-    outline: solid 1px;
+    @include elevation.overridable-elevation(2);
+
+    @include cdk.high-contrast {
+      outline: solid 1px;
+    }
   }
-}
 
-.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,
-.mat-button-toggle-group-appearance-standard {
-  @include token-utils.use-tokens($_standard-tokens...) {
+  .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,
+  .mat-button-toggle-group-appearance-standard {
     border-radius: token-utils.slot(shape);
     border: solid 1px token-utils.slot(divider-color);
 
     .mat-pseudo-checkbox {
       --mat-pseudo-checkbox-minimal-selected-checkmark-color: #{
-          token-utils.slot(selected-state-text-color)};
+        token-utils.slot(selected-state-text-color)};
     }
-  }
 
-  &:not([class*='mat-elevation-z']) {
-    box-shadow: none;
-  }
+    &:not([class*='mat-elevation-z']) {
+      box-shadow: none;
+    }
 
-  @include cdk.high-contrast {
-    outline: 0;
+    @include cdk.high-contrast {
+      outline: 0;
+    }
   }
-}
 
-.mat-button-toggle-vertical {
-  flex-direction: column;
+  .mat-button-toggle-vertical {
+    flex-direction: column;
 
-  .mat-button-toggle-label-content {
-    // Vertical button toggles shouldn't be an inline-block, because the toggles should
-    // fill the available width in the group.
-    display: block;
+    .mat-button-toggle-label-content {
+      // Vertical button toggles shouldn't be an inline-block, because the toggles should
+      // fill the available width in the group.
+      display: block;
+    }
   }
-}
-
-.mat-button-toggle {
-  white-space: nowrap;
-  position: relative;
 
-  @include token-utils.use-tokens($_legacy-tokens...) {
-    color: token-utils.slot(text-color);
-    font-family: token-utils.slot(label-text-font);
-    font-size: token-utils.slot(label-text-size);
-    line-height: token-utils.slot(label-text-line-height);
-    font-weight: token-utils.slot(label-text-weight);
-    letter-spacing: token-utils.slot(label-text-tracking);
+  .mat-button-toggle {
+    white-space: nowrap;
+    position: relative;
+    color: token-utils.slot(legacy-text-color);
+    font-family: token-utils.slot(legacy-label-text-font);
+    font-size: token-utils.slot(legacy-label-text-size);
+    line-height: token-utils.slot(legacy-label-text-line-height);
+    font-weight: token-utils.slot(legacy-label-text-weight);
+    letter-spacing: token-utils.slot(legacy-label-text-tracking);
 
     --mat-pseudo-checkbox-minimal-selected-checkmark-color: #{
-        token-utils.slot(selected-state-text-color)};
+      token-utils.slot(legacy-selected-state-text-color)};
 
     &.cdk-keyboard-focused .mat-button-toggle-focus-overlay {
-      opacity: token-utils.slot(focus-state-layer-opacity);
+      opacity: token-utils.slot(legacy-focus-state-layer-opacity);
     }
-  }
 
-  // Fixes SVG icons that get thrown off because of the `vertical-align` on the parent.
-  .mat-icon svg {
-    vertical-align: top;
+    // Fixes SVG icons that get thrown off because of the `vertical-align` on the parent.
+    .mat-icon svg {
+      vertical-align: top;
+    }
   }
-}
 
-.mat-button-toggle-checkbox-wrapper {
-  display: inline-block;
-  justify-content: flex-start;
-  align-items: center;
-  width: 0;
-  height: $_checkmark-size;
-  line-height: $_checkmark-size;
-  overflow: hidden;
-  box-sizing: border-box;
-  position: absolute;
-  top: 50%;
-  left: $legacy-padding;
-
-  // Uses a 3d transform, because otherwise Safari has some some of rendering
-  // artifact that adds a small gap between the two parts of the checkmark.
-  transform: translate3d(0, -50%, 0);
-
-  [dir='rtl'] & {
-    left: auto;
-    right: $legacy-padding;
-  }
+  .mat-button-toggle-checkbox-wrapper {
+    display: inline-block;
+    justify-content: flex-start;
+    align-items: center;
+    width: 0;
+    height: $_checkmark-size;
+    line-height: $_checkmark-size;
+    overflow: hidden;
+    box-sizing: border-box;
+    position: absolute;
+    top: 50%;
+    left: $legacy-padding;
+
+    // Uses a 3d transform, because otherwise Safari has some some of rendering
+    // artifact that adds a small gap between the two parts of the checkmark.
+    transform: translate3d(0, -50%, 0);
+
+    [dir='rtl'] & {
+      left: auto;
+      right: $legacy-padding;
+    }
 
-  .mat-button-toggle-appearance-standard & {
-    left: $standard-padding;
-  }
+    .mat-button-toggle-appearance-standard & {
+      left: $standard-padding;
+    }
 
-  [dir='rtl'] .mat-button-toggle-appearance-standard & {
-    left: auto;
-    right: $standard-padding;
-  }
+    [dir='rtl'] .mat-button-toggle-appearance-standard & {
+      left: auto;
+      right: $standard-padding;
+    }
 
-  .mat-button-toggle-checked & {
-    width: $_checkmark-size;
-  }
+    .mat-button-toggle-checked & {
+      width: $_checkmark-size;
+    }
 
-  .mat-button-toggle-animations-enabled & {
-    transition: width $_checkmark-transition;
-  }
+    .mat-button-toggle-animations-enabled & {
+      transition: width $_checkmark-transition;
+    }
 
-  // Disable the transition in vertical mode since it looks weird.
-  // There should be a limited amount of usages anyway.
-  .mat-button-toggle-vertical & {
-    transition: none;
+    // Disable the transition in vertical mode since it looks weird.
+    // There should be a limited amount of usages anyway.
+    .mat-button-toggle-vertical & {
+      transition: none;
+    }
   }
-}
 
-.mat-button-toggle-checked {
-  @include token-utils.use-tokens($_legacy-tokens...) {
-    color: token-utils.slot(selected-state-text-color);
-    background-color: token-utils.slot(selected-state-background-color);
+  .mat-button-toggle-checked {
+    color: token-utils.slot(legacy-selected-state-text-color);
+    background-color: token-utils.slot(legacy-selected-state-background-color);
   }
-}
-
-.mat-button-toggle-disabled {
-  pointer-events: none;
 
-  @include token-utils.use-tokens($_legacy-tokens...) {
-    color: token-utils.slot(disabled-state-text-color);
-    background-color: token-utils.slot(disabled-state-background-color);
+  .mat-button-toggle-disabled {
+    pointer-events: none;
+    color: token-utils.slot(legacy-disabled-state-text-color);
+    background-color: token-utils.slot(legacy-disabled-state-background-color);
     --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: #{
-        token-utils.slot(disabled-state-text-color)};
+      token-utils.slot(legacy-disabled-state-text-color)};
 
     &.mat-button-toggle-checked {
-      background-color: token-utils.slot(disabled-selected-state-background-color);
+      background-color: token-utils.slot(legacy-disabled-selected-state-background-color);
     }
   }
-}
 
-.mat-button-toggle-disabled-interactive {
-  pointer-events: auto;
-}
+  .mat-button-toggle-disabled-interactive {
+    pointer-events: auto;
+  }
 
-.mat-button-toggle-appearance-standard {
-  @include token-utils.use-tokens($_standard-tokens...) {
+  .mat-button-toggle-appearance-standard {
     $divider-color: token-utils.slot(divider-color);
     color: token-utils.slot(text-color);
     background-color: token-utils.slot(background-color);
@@ -217,7 +193,7 @@ $_standard-tokens: (
 
       .mat-pseudo-checkbox {
         --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: #{
-            token-utils.slot(disabled-selected-state-text-color)};
+          token-utils.slot(disabled-selected-state-text-color)};
       }
 
       &.mat-button-toggle-checked {
@@ -241,145 +217,136 @@ $_standard-tokens: (
     &.cdk-keyboard-focused .mat-button-toggle-focus-overlay {
       opacity: token-utils.slot(focus-state-layer-opacity);
     }
-  }
 
-  // On touch devices the hover state will linger on the element after the user has tapped.
-  // Disable it, because it can be confused with focus. We target the :hover state explicitly,
-  // because we still want to preserve the keyboard focus state for hybrid devices that have
-  // a keyboard and a touchscreen.
-  @media (hover: none) {
-    &:hover .mat-button-toggle-focus-overlay {
-      display: none;
+    // On touch devices the hover state will linger on the element after the user has tapped.
+    // Disable it, because it can be confused with focus. We target the :hover state explicitly,
+    // because we still want to preserve the keyboard focus state for hybrid devices that have
+    // a keyboard and a touchscreen.
+    @media (hover: none) {
+      &:hover .mat-button-toggle-focus-overlay {
+        display: none;
+      }
     }
   }
-}
-
-.mat-button-toggle-label-content {
-  @include vendor-prefixes.user-select(none);
-  display: inline-block;
-  padding: 0 $legacy-padding;
 
-  @include token-utils.use-tokens($_legacy-tokens...) {
-    line-height: token-utils.slot(height);
-  }
-
-  // Prevents IE from shifting the content on click.
-  position: relative;
+  .mat-button-toggle-label-content {
+    @include vendor-prefixes.user-select(none);
+    display: inline-block;
+    padding: 0 $legacy-padding;
+    line-height: token-utils.slot(legacy-height);
 
-  .mat-button-toggle-appearance-standard & {
-    padding: 0 $standard-padding;
+    // Prevents IE from shifting the content on click.
+    position: relative;
 
-    @include token-utils.use-tokens($_standard-tokens...) {
+    .mat-button-toggle-appearance-standard & {
+      padding: 0 $standard-padding;
       line-height: token-utils.slot(height);
     }
   }
-}
-
-.mat-button-toggle-label-content > * {
-  vertical-align: middle;
-}
 
-// Overlay to be used as a tint.
-.mat-button-toggle-focus-overlay {
-  @include layout-common.fill;
-  border-radius: inherit;
+  .mat-button-toggle-label-content > * {
+    vertical-align: middle;
+  }
 
-  // Disable pointer events to prevent it from hijacking user events.
-  pointer-events: none;
-  opacity: 0;
+  // Overlay to be used as a tint.
+  .mat-button-toggle-focus-overlay {
+    @include layout-common.fill;
+    border-radius: inherit;
 
-  @include token-utils.use-tokens($_legacy-tokens...) {
-    background-color: token-utils.slot(state-layer-color);
+    // Disable pointer events to prevent it from hijacking user events.
+    pointer-events: none;
+    opacity: 0;
+    background-color: token-utils.slot(legacy-state-layer-color);
   }
-}
 
-@include cdk.high-contrast {
-  // Changing the background color for the selected item won't be visible in high contrast mode.
-  // We fall back to using the overlay to draw a brighter, semi-transparent tint on top instead.
-  // It uses a border, because the browser will render it using a brighter color.
-  .mat-button-toggle-checked {
-    .mat-button-toggle-focus-overlay {
-      border-bottom: solid 500px;
-      opacity: 0.5;
-      height: 0;
-    }
+  @include cdk.high-contrast {
+    // Changing the background color for the selected item won't be visible in high contrast mode.
+    // We fall back to using the overlay to draw a brighter, semi-transparent tint on top instead.
+    // It uses a border, because the browser will render it using a brighter color.
+    .mat-button-toggle-checked {
+      .mat-button-toggle-focus-overlay {
+        border-bottom: solid 500px;
+        opacity: 0.5;
+        height: 0;
+      }
 
-    &:hover .mat-button-toggle-focus-overlay {
-      opacity: 0.6;
-    }
+      &:hover .mat-button-toggle-focus-overlay {
+        opacity: 0.6;
+      }
 
-    &.mat-button-toggle-appearance-standard .mat-button-toggle-focus-overlay {
-      // In high contrast mode, we use a border for the checked state because backgrounds
-      // can either be opaque or transparent. We set the border height to a value that is larger
-      // than usual button toggles are. This allows us to keep this high contrast style in the
-      // base component style, instead of making it dependent on height determined through density.
-      border-bottom: solid 500px;
+      &.mat-button-toggle-appearance-standard .mat-button-toggle-focus-overlay {
+        // In high contrast mode, we use a border for the checked state because backgrounds
+        // can either be opaque or transparent. We set the border height to a value that is larger
+        // than usual button toggles are. This allows us to keep this high contrast style in the
+        // base component style, instead of making it dependent on height determined through
+        // density.
+        border-bottom: solid 500px;
+      }
     }
   }
-}
-
-// Increase specificity because ripple styles are part of the `mat-core` mixin and can
-// potentially overwrite the absolute position of the container.
-.mat-button-toggle .mat-button-toggle-ripple {
-  @include layout-common.fill;
 
-  // Disable pointer events for the ripple container, because the container will overlay the user
-  // content and we don't want to prevent mouse clicks that should toggle the state.
-  // Pointer events can be safely disabled because the ripple trigger element is the label element.
-  pointer-events: none;
-}
+  // Increase specificity because ripple styles are part of the `mat-core` mixin and can
+  // potentially overwrite the absolute position of the container.
+  .mat-button-toggle .mat-button-toggle-ripple {
+    @include layout-common.fill;
 
-.mat-button-toggle-button {
-  $checkmark-spacing: $_checkmark-size + $_checkmark-margin;
-  border: 0;
-  background: none;
-  color: inherit;
-  padding: 0;
-  margin: 0;
-  font: inherit;
-  outline: none;
-  width: 100%; // Stretch the button in case the consumer set a custom width.
-  cursor: pointer;
-
-  .mat-button-toggle-animations-enabled & {
-    transition: padding $_checkmark-transition;
+    // Disable pointer events for the ripple container, because the container will overlay the user
+    // content and we don't want to prevent mouse clicks that should toggle the state.
+    // Pointer events can be safely disabled because the ripple trigger element is the label
+    // element.
+    pointer-events: none;
   }
 
-  // Disable the transition in vertical mode since it looks weird.
-  // There should be a limited amount of usages anyway.
-  .mat-button-toggle-vertical & {
-    transition: none;
-  }
+  .mat-button-toggle-button {
+    $checkmark-spacing: $_checkmark-size + $_checkmark-margin;
+    border: 0;
+    background: none;
+    color: inherit;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    outline: none;
+    width: 100%; // Stretch the button in case the consumer set a custom width.
+    cursor: pointer;
+
+    .mat-button-toggle-animations-enabled & {
+      transition: padding $_checkmark-transition;
+    }
 
-  .mat-button-toggle-disabled & {
-    cursor: default;
-  }
+    // Disable the transition in vertical mode since it looks weird.
+    // There should be a limited amount of usages anyway.
+    .mat-button-toggle-vertical & {
+      transition: none;
+    }
 
-  // Remove the extra focus outline that is added by Firefox on native buttons.
-  &::-moz-focus-inner {
-    border: 0;
-  }
+    .mat-button-toggle-disabled & {
+      cursor: default;
+    }
 
-  // Note that we use padding and `position: absolute` to show/hide the checkmark, instead of
-  // just transitioning it between `width: 18px` and `width: 0`, because it was being shown/hidden
-  // with `@if` before the transition was added and leaving it in the DOM while hidden can break
-  // some pre-existing layouts.
-  &:has(.mat-button-toggle-checkbox-wrapper) {
-    .mat-button-toggle-checked & {
-      padding-left: $checkmark-spacing;
+    // Remove the extra focus outline that is added by Firefox on native buttons.
+    &::-moz-focus-inner {
+      border: 0;
     }
 
-    [dir='rtl'] .mat-button-toggle-checked & {
-      padding-left: 0;
-      padding-right: $checkmark-spacing;
+    // Note that we use padding and `position: absolute` to show/hide the checkmark, instead of
+    // just transitioning it between `width: 18px` and `width: 0`, because it was being shown/hidden
+    // with `@if` before the transition was added and leaving it in the DOM while hidden can break
+    // some pre-existing layouts.
+    &:has(.mat-button-toggle-checkbox-wrapper) {
+      .mat-button-toggle-checked & {
+        padding-left: $checkmark-spacing;
+      }
+
+      [dir='rtl'] .mat-button-toggle-checked & {
+        padding-left: 0;
+        padding-right: $checkmark-spacing;
+      }
     }
-  }
 
-}
+  }
 
-// Change the border-radius of the focus indicator to match the
-// radius of the button-toggle-group or standalone button-toggle.
-@include token-utils.use-tokens($_standard-tokens...) {
+  // Change the border-radius of the focus indicator to match the
+  // radius of the button-toggle-group or standalone button-toggle.
   .mat-button-toggle-standalone.mat-button-toggle-appearance-standard {
     --mat-focus-indicator-border-radius: #{token-utils.slot(shape)};
   }
diff --git a/src/material/button/BUILD.bazel b/src/material/button/BUILD.bazel
index 5f7f31fb7d9e..02983779025e 100644
--- a/src/material/button/BUILD.bazel
+++ b/src/material/button/BUILD.bazel
@@ -13,15 +13,9 @@ package(default_visibility = ["//visibility:public"])
 sass_library(
     name = "m3",
     srcs = [
-        "_m3-extended-fab.scss",
+        "_m3-button.scss",
         "_m3-fab.scss",
-        "_m3-fab-small.scss",
-        "_m3-filled-button.scss",
         "_m3-icon-button.scss",
-        "_m3-outlined-button.scss",
-        "_m3-protected-button.scss",
-        "_m3-text-button.scss",
-        "_m3-tonal-button.scss",
     ],
     deps = [
         "//src/material/core/style:sass_utils",
@@ -32,15 +26,9 @@ sass_library(
 sass_library(
     name = "m2",
     srcs = [
-        "_m2-extended-fab.scss",
+        "_m2-button.scss",
         "_m2-fab.scss",
-        "_m2-fab-small.scss",
-        "_m2-filled-button.scss",
         "_m2-icon-button.scss",
-        "_m2-outlined-button.scss",
-        "_m2-protected-button.scss",
-        "_m2-text-button.scss",
-        "_m2-tonal-button.scss",
     ],
     deps = [
         "//src/material/core/style:elevation",
diff --git a/src/material/button/_button-base.scss b/src/material/button/_button-base.scss
index b20bc7f9d121..bd452c589ad7 100644
--- a/src/material/button/_button-base.scss
+++ b/src/material/button/_button-base.scss
@@ -57,35 +57,37 @@
   }
 }
 
-@mixin mat-private-button-ripple($prefix, $slots) {
-  @include token-utils.use-tokens($prefix, $slots) {
-    .mat-ripple-element {
-      background-color: token-utils.slot(ripple-color);
-    }
+@mixin mat-private-button-ripple(
+    $ripple-color-token, $state-layer-color-token, $disabled-state-layer-color-token,
+    $hover-state-layer-opacity-token, $focus-state-layer-opacity-token,
+    $pressed-state-layer-opacity-token
+) {
+  .mat-ripple-element {
+    background-color: token-utils.slot($ripple-color-token);
+  }
 
-    .mat-mdc-button-persistent-ripple::before {
-      background-color: token-utils.slot(state-layer-color);
-    }
+  .mat-mdc-button-persistent-ripple::before {
+    background-color: token-utils.slot($state-layer-color-token);
+  }
 
-    &.mat-mdc-button-disabled .mat-mdc-button-persistent-ripple::before {
-      background-color: token-utils.slot(disabled-state-layer-color);
-    }
+  &.mat-mdc-button-disabled .mat-mdc-button-persistent-ripple::before {
+    background-color: token-utils.slot($disabled-state-layer-color-token);
+  }
 
-    &:hover > .mat-mdc-button-persistent-ripple::before {
-      opacity: token-utils.slot(hover-state-layer-opacity);
-    }
+  &:hover > .mat-mdc-button-persistent-ripple::before {
+    opacity: token-utils.slot($hover-state-layer-opacity-token);
+  }
 
-    &.cdk-program-focused,
-    &.cdk-keyboard-focused,
-    &.mat-mdc-button-disabled-interactive:focus {
-      > .mat-mdc-button-persistent-ripple::before {
-        opacity: token-utils.slot(focus-state-layer-opacity);
-      }
+  &.cdk-program-focused,
+  &.cdk-keyboard-focused,
+  &.mat-mdc-button-disabled-interactive:focus {
+    > .mat-mdc-button-persistent-ripple::before {
+      opacity: token-utils.slot($focus-state-layer-opacity-token);
     }
+  }
 
-    &:active > .mat-mdc-button-persistent-ripple::before {
-      opacity: token-utils.slot(pressed-state-layer-opacity);
-    }
+  &:active > .mat-mdc-button-persistent-ripple::before {
+    opacity: token-utils.slot($pressed-state-layer-opacity-token);
   }
 }
 
@@ -109,17 +111,12 @@
   }
 }
 
-// Adds an elevation shadow to a button.
-@mixin mat-private-button-elevation($token-name) {
-  // MDC outputs a variable that is the same as the token name, but suffixed with `-shadow`.
-  box-shadow: token-utils.slot($token-name + '-shadow');
-}
-
-@mixin mat-private-button-touch-target($is-square, $prefix, $slots) {
+@mixin mat-private-button-touch-target($is-square, $touch-target-display-token) {
   .mat-mdc-button-touch-target {
     position: absolute;
     top: 50%;
     height: 48px;
+    display: token-utils.slot($touch-target-display-token);
 
     @if $is-square {
       left: 50%;
@@ -130,52 +127,44 @@
       right: 0;
       transform: translateY(-50%);
     }
-
-    @include token-utils.use-tokens($prefix, $slots) {
-      display: token-utils.slot(touch-target-display);
-    }
   }
 }
 
-@mixin mat-private-button-horizontal-layout($prefix, $slots, $has-with-icon-padding) {
-  @include token-utils.use-tokens($prefix, $slots) {
-    $icon-spacing: token-utils.slot(icon-spacing, true);
-    $icon-offset: token-utils.slot(icon-offset, true);
-
-    @if ($has-with-icon-padding) {
-      $with-icon-horizontal-padding:
-        token-utils.slot(with-icon-horizontal-padding, true);
-
-      // stylelint-disable-next-line selector-class-pattern
-      &:has(.material-icons, mat-icon, [matButtonIcon]) {
-        padding: 0 $with-icon-horizontal-padding;
-      }
-    }
-
-    // MDC expects button icons to contain this HTML content:
-    // ```html
-    //   <span class="mdc-button__icon material-icons">favorite</span>
-    // ```
-    // However, Angular Material expects a `mat-icon` instead. The following
-    // styles will lay out the icons appropriately.
-    & > .mat-icon {
-      margin-right: $icon-spacing;
-      margin-left: $icon-offset;
+@mixin mat-private-button-horizontal-layout(
+    $icon-spacing-token, $icon-offset-token, $with-icon-horizontal-padding-token: null) {
+  $icon-spacing: token-utils.slot($icon-spacing-token, true);
+  $icon-offset: token-utils.slot($icon-offset-token, true);
 
-      [dir='rtl'] & {
-        margin-right: $icon-offset;
-        margin-left: $icon-spacing;
-      }
+  @if ($with-icon-horizontal-padding-token) {
+    // stylelint-disable-next-line selector-class-pattern
+    &:has(.material-icons, mat-icon, [matButtonIcon]) {
+      padding: 0 token-utils.slot($with-icon-horizontal-padding-token, true);
     }
+  }
 
-    .mdc-button__label + .mat-icon {
+  // MDC expects button icons to contain this HTML content:
+  // ```html
+  //   <span class="mdc-button__icon material-icons">favorite</span>
+  // ```
+  // However, Angular Material expects a `mat-icon` instead. The following
+  // styles will lay out the icons appropriately.
+  & > .mat-icon {
+    margin-right: $icon-spacing;
+    margin-left: $icon-offset;
+
+    [dir='rtl'] & {
       margin-right: $icon-offset;
       margin-left: $icon-spacing;
+    }
+  }
 
-      [dir='rtl'] & {
-        margin-right: $icon-spacing;
-        margin-left: $icon-offset;
-      }
+  .mdc-button__label + .mat-icon {
+    margin-right: $icon-offset;
+    margin-left: $icon-spacing;
+
+    [dir='rtl'] & {
+      margin-right: $icon-spacing;
+      margin-left: $icon-offset;
     }
   }
 }
diff --git a/src/material/button/_button-theme.scss b/src/material/button/_button-theme.scss
index a6b36fea9e4a..db74995ac807 100644
--- a/src/material/button/_button-theme.scss
+++ b/src/material/button/_button-theme.scss
@@ -1,111 +1,28 @@
-@use '../core/theming/theming';
+@use '../core/style/sass-utils';
 @use '../core/theming/inspection';
+@use '../core/theming/theming';
 @use '../core/theming/validation';
 @use '../core/tokens/token-utils';
 @use '../core/typography/typography';
-@use './m2-filled-button';
-@use './m2-outlined-button';
-@use './m2-protected-button';
-@use './m2-text-button';
-@use './m2-tonal-button';
-@use '../core/style/sass-utils';
-
-@mixin _text-button-variant($theme, $palette) {
-  $mat-tokens: if(
-    $palette,
-    m2-text-button.private-get-color-palette-color-tokens($theme, $palette),
-    m2-text-button.get-color-tokens($theme)
-  );
-
-  @include token-utils.create-token-values-mixed(m2-text-button.$prefix, $mat-tokens);
-}
-
-@mixin _filled-button-variant($theme, $palette) {
-  $mat-tokens: if(
-    $palette,
-    m2-filled-button.private-get-color-palette-color-tokens($theme, $palette),
-    m2-filled-button.get-color-tokens($theme)
-  );
+@use './m2-button';
 
-  @include token-utils.create-token-values-mixed(m2-filled-button.$prefix, $mat-tokens);
-}
-
-@mixin _protected-button-variant($theme, $palette) {
-  $mat-tokens: if(
-    $palette,
-    m2-protected-button.private-get-color-palette-color-tokens($theme, $palette),
-    m2-protected-button.get-color-tokens($theme)
-  );
-
-  @include token-utils.create-token-values-mixed(m2-protected-button.$prefix, $mat-tokens);
-}
-
-@mixin _outlined-button-variant($theme, $palette) {
+@mixin _button-variant($theme, $palette) {
   $mat-tokens: if(
     $palette,
-    m2-outlined-button.private-get-color-palette-color-tokens($theme, $palette),
-    m2-outlined-button.get-color-tokens($theme)
+    m2-button.private-get-color-palette-color-tokens($theme, $palette),
+    m2-button.get-color-tokens($theme)
   );
 
-  @include token-utils.create-token-values-mixed(m2-outlined-button.$prefix, $mat-tokens);
-}
-
-@mixin _tonal-button-variant($theme, $palette) {
-  @include token-utils.create-token-values-mixed(m2-tonal-button.$prefix, if(
-    $palette,
-    m2-tonal-button.private-get-color-palette-color-tokens($theme, $palette),
-    m2-tonal-button.get-color-tokens($theme)
-  ));
+  @include token-utils.create-token-values-mixed(m2-button.$prefix, $mat-tokens);
 }
 
-
 @mixin _theme-from-tokens($tokens, $options...) {
   @include validation.selector-defined(
     'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
   );
   $mat-text-button-tokens: token-utils.get-tokens-for(
-    $tokens,
-    m2-text-button.$prefix,
-    $options...
-  );
-  $mat-protected-button-tokens: token-utils.get-tokens-for(
-    $tokens,
-    m2-protected-button.$prefix,
-    $options...
-  );
-  $mat-filled-button-tokens: token-utils.get-tokens-for(
-    $tokens,
-    m2-filled-button.$prefix,
-    $options...
-  );
-  $mat-outlined-button-tokens: token-utils.get-tokens-for(
-    $tokens,
-    m2-outlined-button.$prefix,
-    $options...
-  );
-  $mat-tonal-button-tokens: token-utils.get-tokens-for(
-    $tokens,
-    m2-tonal-button.$prefix,
-    $options...
-  );
-
-  @include token-utils.create-token-values(m2-text-button.$prefix, $mat-text-button-tokens);
-  @include token-utils.create-token-values(
-    m2-protected-button.$prefix,
-    $mat-protected-button-tokens
-  );
-  @include token-utils.create-token-values(
-    m2-filled-button.$prefix,
-    $mat-filled-button-tokens
-  );
-  @include token-utils.create-token-values(
-    m2-outlined-button.$prefix,
-    $mat-outlined-button-tokens
-  );
-  @include token-utils.create-token-values(
-    m2-tonal-button.$prefix,
-    $mat-tonal-button-tokens
-  );
+    $tokens, m2-button.$prefix, $options...);
+  @include token-utils.create-token-values(m2-button.$prefix, $mat-text-button-tokens);
 }
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
@@ -117,25 +34,7 @@
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        m2-text-button.$prefix,
-        m2-text-button.get-unthemable-tokens()
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-filled-button.$prefix,
-        m2-filled-button.get-unthemable-tokens()
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-protected-button.$prefix,
-        m2-protected-button.get-unthemable-tokens()
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-outlined-button.$prefix,
-        m2-outlined-button.get-unthemable-tokens()
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-tonal-button.$prefix,
-        m2-tonal-button.get-unthemable-tokens()
-      );
+        m2-button.$prefix, m2-button.get-unthemable-tokens());
     }
   }
 }
@@ -150,80 +49,24 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include _text-button-variant($theme, null);
-      @include _filled-button-variant($theme, null);
-      @include _tonal-button-variant($theme, null);
-      @include _protected-button-variant($theme, null);
-      @include _outlined-button-variant($theme, null);
-    }
-
-    .mat-mdc-button {
-      &.mat-primary {
-        @include _text-button-variant($theme, primary);
-      }
-
-      &.mat-accent {
-        @include _text-button-variant($theme, accent);
-      }
-
-      &.mat-warn {
-        @include _text-button-variant($theme, warn);
-      }
-    }
-
-    .mat-mdc-unelevated-button {
-      &.mat-primary {
-        @include _filled-button-variant($theme, primary);
-      }
-
-      &.mat-accent {
-        @include _filled-button-variant($theme, accent);
-      }
-
-      &.mat-warn {
-        @include _filled-button-variant($theme, warn);
-      }
-    }
-
-    .mat-mdc-raised-button {
-      &.mat-primary {
-        @include _protected-button-variant($theme, primary);
-      }
-
-      &.mat-accent {
-        @include _protected-button-variant($theme, accent);
-      }
-
-      &.mat-warn {
-        @include _protected-button-variant($theme, warn);
-      }
-    }
-
-    .mat-mdc-outlined-button {
-      &.mat-primary {
-        @include _outlined-button-variant($theme, primary);
-      }
-
-      &.mat-accent {
-        @include _outlined-button-variant($theme, accent);
-      }
-
-      &.mat-warn {
-        @include _outlined-button-variant($theme, warn);
-      }
+      @include _button-variant($theme, null);
     }
 
+    .mat-mdc-button,
+    .mat-mdc-unelevated-button,
+    .mat-mdc-raised-button,
+    .mat-mdc-outlined-button,
     .mat-tonal-button {
       &.mat-primary {
-        @include _tonal-button-variant($theme, primary);
+        @include _button-variant($theme, primary);
       }
 
       &.mat-accent {
-        @include _tonal-button-variant($theme, accent);
+        @include _button-variant($theme, accent);
       }
 
       &.mat-warn {
-        @include _tonal-button-variant($theme, warn);
+        @include _button-variant($theme, warn);
       }
     }
   }
@@ -237,24 +80,8 @@
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        m2-text-button.$prefix,
-        m2-text-button.get-typography-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-filled-button.$prefix,
-        m2-filled-button.get-typography-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-protected-button.$prefix,
-        m2-protected-button.get-typography-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-outlined-button.$prefix,
-        m2-outlined-button.get-typography-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-tonal-button.$prefix,
-        m2-tonal-button.get-typography-tokens($theme)
+        m2-button.$prefix,
+        m2-button.get-typography-tokens($theme)
       );
     }
   }
@@ -268,24 +95,8 @@
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        m2-text-button.$prefix,
-        m2-text-button.get-density-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-filled-button.$prefix,
-        m2-filled-button.get-density-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-protected-button.$prefix,
-        m2-protected-button.get-density-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-outlined-button.$prefix,
-        m2-outlined-button.get-density-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-tonal-button.$prefix,
-        m2-tonal-button.get-density-tokens($theme)
+        m2-button.$prefix,
+        m2-button.get-density-tokens($theme)
       );
     }
   }
@@ -293,37 +104,10 @@
 
 /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
 @function _define-overrides() {
-  $mat-filled-button-tokens: m2-filled-button.get-token-slots();
-  $mat-outlined-button-tokens: m2-outlined-button.get-token-slots();
-  $mat-protected-button-tokens: m2-protected-button.get-token-slots();
-  $mat-text-button-tokens: m2-text-button.get-token-slots();
-  $mat-tonal-button-tokens: m2-tonal-button.get-token-slots();
-
   @return (
     (
-      namespace: m2-filled-button.$prefix,
-      tokens: $mat-filled-button-tokens,
-      prefix: 'filled-',
-    ),
-    (
-      namespace: m2-outlined-button.$prefix,
-      tokens: $mat-outlined-button-tokens,
-      prefix: 'outlined-',
-    ),
-    (
-      namespace: m2-protected-button.$prefix,
-      tokens: $mat-protected-button-tokens,
-      prefix: 'protected-',
-    ),
-    (
-      namespace: m2-text-button.$prefix,
-      tokens: $mat-text-button-tokens,
-      prefix: 'text-',
-    ),
-    (
-      namespace: m2-tonal-button.$prefix,
-      tokens: $mat-tonal-button-tokens,
-      prefix: 'tonal-',
+      namespace: m2-button.$prefix,
+      tokens: m2-button.get-token-slots(),
     ),
   );
 }
diff --git a/src/material/button/_fab-theme.scss b/src/material/button/_fab-theme.scss
index b9d95667e743..cf271dd93e51 100644
--- a/src/material/button/_fab-theme.scss
+++ b/src/material/button/_fab-theme.scss
@@ -2,9 +2,7 @@
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/theming/validation';
-@use './m2-extended-fab';
 @use './m2-fab';
-@use './m2-fab-small';
 @use '../core/tokens/token-utils';
 @use '../core/typography/typography';
 
@@ -20,14 +18,6 @@
         m2-fab.$prefix,
         m2-fab.get-unthemable-tokens()
       );
-      @include token-utils.create-token-values-mixed(
-        m2-fab-small.$prefix,
-        m2-fab-small.get-unthemable-tokens()
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-extended-fab.$prefix,
-        m2-extended-fab.get-unthemable-tokens()
-      );
     }
   }
 }
@@ -42,16 +32,6 @@
   @include token-utils.create-token-values-mixed(m2-fab.$prefix, $mat-tokens);
 }
 
-@mixin _fab-small-variant($theme, $palette) {
-  $mat-tokens: if(
-    $palette,
-    m2-fab-small.private-get-color-palette-color-tokens($theme, $palette),
-    m2-fab-small.get-color-tokens($theme)
-  );
-
-  @include token-utils.create-token-values-mixed(m2-fab-small.$prefix, $mat-tokens);
-}
-
 /// Outputs color theme styles for the mat-fab.
 /// @param {Map} $theme The theme to generate color styles for.
 /// @param {ArgList} Additional optional arguments (only supported for M3 themes):
@@ -63,13 +43,8 @@
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include _fab-variant($theme, null);
-      @include _fab-small-variant($theme, null);
-      @include token-utils.create-token-values-mixed(
-        m2-extended-fab.$prefix,
-        m2-extended-fab.get-color-tokens($theme)
-      );
 
-      .mat-mdc-fab {
+      .mat-mdc-fab, .mat-mdc-mini-fab {
         &.mat-primary {
           @include _fab-variant($theme, primary);
         }
@@ -82,20 +57,6 @@
           @include _fab-variant($theme, warn);
         }
       }
-
-      .mat-mdc-mini-fab {
-        &.mat-primary {
-          @include _fab-small-variant($theme, primary);
-        }
-
-        &.mat-accent {
-          @include _fab-small-variant($theme, accent);
-        }
-
-        &.mat-warn {
-          @include _fab-small-variant($theme, warn);
-        }
-      }
     }
   }
 }
@@ -107,18 +68,10 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-extended-fab.$prefix,
-        m2-extended-fab.get-typography-tokens($theme)
-      );
       @include token-utils.create-token-values-mixed(
         m2-fab.$prefix,
         m2-fab.get-typography-tokens($theme)
       );
-      @include token-utils.create-token-values-mixed(
-        m2-fab-small.$prefix,
-        m2-fab-small.get-typography-tokens($theme)
-      );
     }
   }
 }
@@ -134,10 +87,6 @@
         m2-fab.$prefix,
         m2-fab.get-density-tokens($theme)
       );
-      @include token-utils.create-token-values-mixed(
-        m2-fab-small.$prefix,
-        m2-fab-small.get-density-tokens($theme)
-      );
     }
   }
 }
@@ -145,20 +94,10 @@
 /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
 @function _define-overrides() {
   @return (
-    (
-      namespace: m2-extended-fab.$prefix,
-      tokens: m2-extended-fab.get-token-slots(),
-      prefix: 'extended-',
-    ),
     (
       namespace: m2-fab.$prefix,
       tokens: m2-fab.get-token-slots(),
     ),
-    (
-      namespace: m2-fab-small.$prefix,
-      tokens: m2-fab-small.get-token-slots(),
-      prefix: 'small-',
-    ),
   );
 }
 
@@ -196,21 +135,6 @@
   @include validation.selector-defined(
     'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
   );
-  $mdc-extended-fab-tokens: token-utils.get-tokens-for(
-    $tokens,
-    m2-extended-fab.$prefix,
-    $options...
-  );
   $mat-fab-tokens: token-utils.get-tokens-for($tokens, m2-fab.$prefix, $options...);
-  $mat-fab-small-tokens: token-utils.get-tokens-for(
-    $tokens,
-    m2-fab-small.$prefix,
-    $options...
-  );
-  @include token-utils.create-token-values(
-    m2-extended-fab.$prefix,
-    $mdc-extended-fab-tokens
-  );
   @include token-utils.create-token-values(m2-fab.$prefix, $mat-fab-tokens);
-  @include token-utils.create-token-values(m2-fab-small.$prefix, $mat-fab-small-tokens);
 }
diff --git a/src/material/button/_m2-button.scss b/src/material/button/_m2-button.scss
new file mode 100644
index 000000000000..41bed86d720d
--- /dev/null
+++ b/src/material/button/_m2-button.scss
@@ -0,0 +1,249 @@
+@use 'sass:meta';
+@use 'sass:map';
+@use '../core/tokens/m2-utils';
+@use '../core/theming/theming';
+@use '../core/theming/inspection';
+@use '../core/style/sass-utils';
+@use '../core/style/elevation';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, 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 (
+    filled-container-shape: 4px,
+    filled-horizontal-padding: 16px,
+    filled-icon-offset: -4px,
+    filled-icon-spacing: 8px,
+    outlined-container-shape: 4px,
+    outlined-horizontal-padding: 15px, // Normally it's 16px, but -1px for the outline.
+    outlined-icon-offset: -4px,
+    outlined-icon-spacing: 8px,
+    outlined-keep-touch-target: false,
+    outlined-outline-width: 1px,
+    protected-container-elevation-shadow: elevation.get-box-shadow(2),
+    protected-container-shape: 4px,
+    protected-disabled-container-elevation-shadow: elevation.get-box-shadow(0),
+    protected-focus-container-elevation-shadow: elevation.get-box-shadow(4),
+    protected-horizontal-padding: 16px,
+    protected-hover-container-elevation-shadow: elevation.get-box-shadow(4),
+    protected-icon-offset: -4px,
+    protected-icon-spacing: 8px,
+    protected-pressed-container-elevation-shadow: elevation.get-box-shadow(8),
+    text-container-shape: 4px,
+    text-horizontal-padding: 8px,
+    text-icon-offset: 0,
+    text-icon-spacing: 8px,
+    text-with-icon-horizontal-padding: 8px,
+    tonal-container-shape: 4px,
+    tonal-horizontal-padding: 16px,
+    tonal-icon-offset: -4px,
+    tonal-icon-spacing: 8px,
+  );
+}
+
+// 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;
+
+  // Ideally we would derive all values directly from the theme, but it causes a lot of regressions
+  // internally. For now we fall back to the old hardcoded behavior only for internal apps.
+  $outline: if(m2-utils.$private-is-internal-build,
+    rgba(if($is-dark, #fff, #000), 0.12),
+    inspection.get-theme-color($theme, foreground, divider)
+  );
+
+  @return (
+    filled-container-color: inspection.get-theme-color($theme, background, card),
+    filled-disabled-container-color:
+        inspection.get-theme-color($theme, foreground, disabled-button, 0.12),
+    filled-disabled-label-text-color:
+        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
+    filled-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+    filled-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    filled-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
+    filled-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
+    filled-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    filled-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
+    filled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+    outlined-disabled-label-text-color:
+        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
+    outlined-disabled-outline-color: $outline,
+    outlined-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+    outlined-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    outlined-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
+    outlined-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
+    outlined-outline-color: $outline,
+    outlined-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    outlined-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
+    outlined-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+    protected-container-color: inspection.get-theme-color($theme, background, card),
+    protected-disabled-container-color:
+        inspection.get-theme-color($theme, foreground, disabled-button, 0.12),
+    protected-disabled-label-text-color:
+        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
+    protected-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+    protected-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    protected-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
+    protected-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
+    protected-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    protected-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
+    protected-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+    text-disabled-label-text-color:
+        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
+    text-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+    text-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    text-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
+    text-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
+    text-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    text-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
+    text-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+    tonal-container-color: inspection.get-theme-color($theme, background, card),
+    tonal-disabled-container-color:
+        inspection.get-theme-color($theme, foreground, disabled-button, 0.12),
+    tonal-disabled-label-text-color:
+        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
+    tonal-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+    tonal-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    tonal-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
+    tonal-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
+    tonal-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    tonal-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
+    tonal-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+  );
+}
+
+// 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);
+  $state-layer-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1);
+  $ripple-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 0.1);
+  $contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
+  $container-color: inspection.get-theme-color($theme, $palette-name, default);
+  $label-text-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1);
+  $ripple-opacity: 0.1;
+
+  // Ideally we would derive all values directly from the theme, but it causes a lot of regressions
+  // internally. For now we fall back to the old hardcoded behavior only for internal apps.
+  @if (m2-utils.$private-is-internal-build or
+      meta.type-of($contrast-color) != 'color') {
+    $is-dark: inspection.get-theme-type($theme) == dark;
+    $container-color: inspection.get-theme-color($theme, $palette-name);
+    $contrast-tone: m2-utils.contrast-tone($container-color, $is-dark);
+    $color: if($contrast-tone == 'dark', #000, #fff);
+    $state-layer-color: $color;
+    $ripple-color: rgba($color, 0.1);
+    $label-text-color: if($contrast-tone == 'dark', #000, #fff);
+  }
+
+  // outlined-outline-color:
+  // TODO: we shouldn't have to set this since it's the same as the non-palette version, however
+  // there are a bunch of tests internally that depend on it. We should remove this and clean
+  // up the screenshots separately.
+  @return (
+    filled-container-color: $container-color,
+    filled-label-text-color: $label-text-color,
+    filled-ripple-color: $ripple-color,
+    filled-state-layer-color: $state-layer-color,
+    outlined-label-text-color: inspection.get-theme-color($theme, $palette-name, default),
+    outlined-outline-color: map.get(get-color-tokens($theme), outlined-outline-color),
+    outlined-ripple-color:
+        if(
+          meta.type-of(inspection.get-theme-color($theme, $palette-name)) == color,
+          rgba(inspection.get-theme-color($theme, $palette-name), $ripple-opacity),
+          inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
+    outlined-state-layer-color: inspection.get-theme-color($theme, $palette-name),
+    protected-container-color: $container-color,
+    protected-label-text-color: $label-text-color,
+    protected-ripple-color: $ripple-color,
+    protected-state-layer-color: $state-layer-color,
+    text-label-text-color: inspection.get-theme-color($theme, $palette-name),
+    text-ripple-color:
+        if(meta.type-of(inspection.get-theme-color($theme, $palette-name)) == color,
+          rgba(inspection.get-theme-color($theme, $palette-name), $ripple-opacity),
+          inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
+    text-state-layer-color: inspection.get-theme-color($theme, $palette-name),
+    tonal-container-color: inspection.get-theme-color($theme, $palette-name, default),
+    tonal-label-text-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1),
+    tonal-ripple-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 0.1),
+    tonal-state-layer-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  $font-family: inspection.get-theme-typography($theme, button, font-family);
+  $font-size: inspection.get-theme-typography($theme, button, font-size);
+  $font-weight: inspection.get-theme-typography($theme, button, font-weight);
+  $letter-spacing: inspection.get-theme-typography($theme, button, letter-spacing);
+  $text-transform: none;
+
+  @return (
+    filled-label-text-font: $font-family,
+    filled-label-text-size: $font-size,
+    filled-label-text-tracking: $letter-spacing,
+    filled-label-text-transform: none,
+    filled-label-text-weight: $font-weight,
+    outlined-label-text-font: $font-family,
+    outlined-label-text-size: $font-size,
+    outlined-label-text-tracking: $letter-spacing,
+    outlined-label-text-transform: none,
+    outlined-label-text-weight: $font-weight,
+    protected-label-text-font: $font-family,
+    protected-label-text-size: $font-size,
+    protected-label-text-tracking: $letter-spacing,
+    protected-label-text-transform: none,
+    protected-label-text-weight: $font-weight,
+    text-label-text-font: $font-family,
+    text-label-text-size: $font-size,
+    text-label-text-tracking: $letter-spacing,
+    text-label-text-transform: none,
+    text-label-text-weight: $font-weight,
+    tonal-label-text-font: $font-family,
+    tonal-label-text-size: $font-size,
+    tonal-label-text-tracking: $letter-spacing,
+    tonal-label-text-transform: none,
+    tonal-label-text-weight: $font-weight,
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
+  $scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
+  $sizes: (
+    0: 36px,
+    -1: 32px,
+    -2: 28px,
+    -3: 24px,
+  );
+
+  $height: map.get($sizes, $scale);
+  $touch-target-display: if($scale < -1, none, block);
+
+  @return (
+    filled-container-height: $height,
+    filled-touch-target-display: $touch-target-display,
+    outlined-container-height: $height,
+    outlined-touch-target-display: $touch-target-display,
+    protected-container-height: $height,
+    protected-touch-target-display: $touch-target-display,
+    text-container-height: $height,
+    text-touch-target-display: $touch-target-display,
+    tonal-container-height: $height,
+    tonal-touch-target-display: $touch-target-display,
+  );
+}
+
+// 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(m2-utils.$placeholder-color-config),
+      get-typography-tokens(m2-utils.$placeholder-typography-config),
+      get-density-tokens(m2-utils.$placeholder-density-config)
+  );
+}
diff --git a/src/material/button/_m2-extended-fab.scss b/src/material/button/_m2-extended-fab.scss
deleted file mode 100644
index 56d20a0468b1..000000000000
--- a/src/material/button/_m2-extended-fab.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-@use 'sass:map';
-@use '../core/tokens/m2-utils';
-@use '../core/style/elevation';
-@use '../core/theming/inspection';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, fab-extended);
-
-@function get-unthemable-tokens() {
-  @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 that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme) {
-  @return ();
-}
-
-// Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($theme) {
-  @return (
-    label-text-font: inspection.get-theme-typography($theme, button, font-family),
-    label-text-size: inspection.get-theme-typography($theme, button, font-size),
-    label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing),
-    label-text-weight: inspection.get-theme-typography($theme, button, font-weight)
-  );
-}
-
-// 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 map.merge(
-    get-unthemable-tokens(),
-    map.merge(
-      get-color-tokens(m2-utils.$placeholder-color-config),
-      map.merge(
-        get-typography-tokens(m2-utils.$placeholder-typography-config),
-        get-density-tokens(m2-utils.$placeholder-density-config)
-      )
-    )
-  );
-}
diff --git a/src/material/button/_m2-fab-small.scss b/src/material/button/_m2-fab-small.scss
deleted file mode 100644
index c377ab22bc83..000000000000
--- a/src/material/button/_m2-fab-small.scss
+++ /dev/null
@@ -1,99 +0,0 @@
-@use 'sass:meta';
-@use '../core/tokens/m2-utils';
-@use '../core/theming/theming';
-@use '../core/theming/inspection';
-@use '../core/style/sass-utils';
-@use '../core/style/elevation';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, fab-small);
-
-// 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 (
-    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 that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme) {
-  $is-dark: inspection.get-theme-type($theme) == dark;
-
-  @return (
-    container-color: inspection.get-theme-color($theme, background, card),
-    disabled-state-container-color:
-        inspection.get-theme-color($theme, background, disabled-button, 0.12),
-    disabled-state-foreground-color:
-        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
-    disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-    focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    foreground-color: inspection.get-theme-color($theme, foreground, base),
-    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
-    pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
-    state-layer-color: inspection.get-theme-color($theme, foreground, base),
-  );
-}
-
-// Generates the mapping for the properties that change based on the FAB palette color.
-@function private-get-color-palette-color-tokens($theme, $palette-name) {
-  // Ideally we would derive all values directly from the theme, but it causes a lot of regressions
-  // internally. For now we fall back to the old hardcoded behavior only for internal apps.
-  $foreground-color: null;
-  $state-layer-color: null;
-  $ripple-color: null;
-  $contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
-
-  @if (m2-utils.$private-is-internal-build or
-      meta.type-of($contrast-color) != 'color') {
-    $is-dark: inspection.get-theme-type($theme) == dark;
-    $container-color: inspection.get-theme-color($theme, $palette-name);
-    $contrast-tone: m2-utils.contrast-tone($container-color, $is-dark);
-    $color: if($contrast-tone == 'dark', #000, #fff);
-    $foreground-color: $color;
-    $state-layer-color: $color;
-    $ripple-color: rgba($color, 0.1);
-  }
-  @else {
-    $foreground-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1);
-    $state-layer-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1);
-    $ripple-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 0.1);
-  }
-
-  @return (
-    container-color: inspection.get-theme-color($theme, $palette-name, default),
-    foreground-color: $foreground-color,
-    state-layer-color: $state-layer-color,
-    ripple-color: $ripple-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) {
-  $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
-
-  @return (
-    touch-target-display: if($density-scale < -1, none, block),
-  );
-}
-
-// 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(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}
diff --git a/src/material/button/_m2-fab.scss b/src/material/button/_m2-fab.scss
index e62816e2b51d..71a231d8bd77 100644
--- a/src/material/button/_m2-fab.scss
+++ b/src/material/button/_m2-fab.scss
@@ -12,11 +12,22 @@ $prefix: (mat, fab);
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
   @return (
-    container-shape: 50%,
     container-elevation-shadow: elevation.get-box-shadow(6),
+    container-shape: 50%,
+    extended-container-elevation-shadow: elevation.get-box-shadow(6),
+    extended-container-height: 48px,
+    extended-container-shape: 24px,
+    extended-focus-container-elevation-shadow: elevation.get-box-shadow(8),
+    extended-hover-container-elevation-shadow: elevation.get-box-shadow(8),
+    extended-pressed-container-elevation-shadow: elevation.get-box-shadow(12),
     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),
+    small-container-elevation-shadow: elevation.get-box-shadow(6),
+    small-container-shape: 50%,
+    small-focus-container-elevation-shadow: elevation.get-box-shadow(8),
+    small-hover-container-elevation-shadow: elevation.get-box-shadow(8),
+    small-pressed-container-elevation-shadow: elevation.get-box-shadow(12),
   );
 }
 
@@ -36,6 +47,18 @@ $prefix: (mat, fab);
     hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
     pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
     ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
+    small-container-color: inspection.get-theme-color($theme, background, card),
+    small-disabled-state-container-color:
+        inspection.get-theme-color($theme, background, disabled-button, 0.12),
+    small-disabled-state-foreground-color:
+        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
+    small-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+    small-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    small-foreground-color: inspection.get-theme-color($theme, foreground, base),
+    small-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
+    small-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    small-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
+    small-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     state-layer-color: inspection.get-theme-color($theme, foreground, base),
   );
 }
@@ -68,14 +91,23 @@ $prefix: (mat, fab);
   @return (
     container-color: inspection.get-theme-color($theme, $palette-name, default),
     foreground-color: $foreground-color,
-    state-layer-color: $state-layer-color,
     ripple-color: $ripple-color,
+    small-container-color: inspection.get-theme-color($theme, $palette-name, default),
+    small-foreground-color: $foreground-color,
+    small-ripple-color: $ripple-color,
+    small-state-layer-color: $state-layer-color,
+    state-layer-color: $state-layer-color,
   );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
-  @return ();
+  @return (
+    extended-label-text-font: inspection.get-theme-typography($theme, button, font-family),
+    extended-label-text-size: inspection.get-theme-typography($theme, button, font-size),
+    extended-label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing),
+    extended-label-text-weight: inspection.get-theme-typography($theme, button, font-weight)
+  );
 }
 
 // Tokens that can be configured through Angular Material's density theming API.
@@ -83,6 +115,7 @@ $prefix: (mat, fab);
   $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
 
   @return (
+    small-touch-target-display: if($density-scale < -1, none, block),
     touch-target-display: if($density-scale < -1, none, block),
   );
 }
diff --git a/src/material/button/_m2-filled-button.scss b/src/material/button/_m2-filled-button.scss
deleted file mode 100644
index 8b344bcf244f..000000000000
--- a/src/material/button/_m2-filled-button.scss
+++ /dev/null
@@ -1,114 +0,0 @@
-@use 'sass:meta';
-@use 'sass:map';
-@use '../core/tokens/m2-utils';
-@use '../core/theming/theming';
-@use '../core/theming/inspection';
-@use '../core/style/sass-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, button-filled);
-
-// 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 (
-    container-shape: 4px,
-    horizontal-padding: 16px,
-    icon-spacing: 8px,
-    icon-offset: -4px,
-  );
-}
-
-// 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;
-
-  @return (
-    container-color: inspection.get-theme-color($theme, background, card),
-    disabled-container-color: inspection.get-theme-color($theme, foreground, disabled-button, 0.12),
-    disabled-label-text-color:
-        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
-    disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-    focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
-    label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
-    pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
-    state-layer-color: inspection.get-theme-color($theme, foreground, base),
-  );
-}
-
-// Generates the mapping for the properties that change based on the button palette color.
-@function private-get-color-palette-color-tokens($theme, $palette-name) {
-  $state-layer-color: null;
-  $ripple-color: null;
-  $contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
-  $container-color: inspection.get-theme-color($theme, $palette-name, default);
-  $label-text-color: null;
-
-  // Ideally we would derive all values directly from the theme, but it causes a lot of regressions
-  // internally. For now we fall back to the old hardcoded behavior only for internal apps.
-  @if (m2-utils.$private-is-internal-build or
-      meta.type-of($contrast-color) != 'color') {
-    $is-dark: inspection.get-theme-type($theme) == dark;
-    $container-color: inspection.get-theme-color($theme, $palette-name);
-    $contrast-tone: m2-utils.contrast-tone($container-color, $is-dark);
-    $color: if($contrast-tone == 'dark', #000, #fff);
-    $state-layer-color: $color;
-    $ripple-color: rgba($color, 0.1);
-    $label-text-color: if($contrast-tone == 'dark', #000, #fff);
-  }
-  @else {
-    $label-text-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1);
-    $state-layer-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1);
-    $ripple-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 0.1);
-  }
-
-  @return (
-    container-color: $container-color,
-    label-text-color: $label-text-color,
-    ripple-color: $ripple-color,
-    state-layer-color: $state-layer-color,
-  );
-}
-
-// Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($theme) {
-  @return (
-    label-text-font: inspection.get-theme-typography($theme, button, font-family),
-    label-text-size: inspection.get-theme-typography($theme, button, font-size),
-    label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing),
-    label-text-weight: inspection.get-theme-typography($theme, button, font-weight),
-    label-text-transform: none,
-  );
-}
-
-// Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($theme) {
-  $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
-
-  @return (
-    touch-target-display: if($density-scale < -1, none, block),
-    container-height:
-    map.get(
-        (
-          0: 36px,
-          -1: 32px,
-          -2: 28px,
-          -3: 24px,
-        ),
-        $density-scale
-    )
-  );
-}
-
-// 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(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}
diff --git a/src/material/button/_m2-outlined-button.scss b/src/material/button/_m2-outlined-button.scss
deleted file mode 100644
index 81ecdb1723d7..000000000000
--- a/src/material/button/_m2-outlined-button.scss
+++ /dev/null
@@ -1,108 +0,0 @@
-@use 'sass:meta';
-@use '../core/tokens/m2-utils';
-@use '../core/theming/theming';
-@use '../core/theming/inspection';
-@use '../core/style/sass-utils';
-@use 'sass:map';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, button-outlined);
-
-// 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 (
-    keep-touch-target: false,
-    outline-width: 1px,
-    container-shape: 4px,
-    horizontal-padding: 15px, // Normally it's 16px, but -1px for the outline.
-    icon-spacing: 8px,
-    icon-offset: -4px,
-  );
-}
-
-// 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;
-
-  // Ideally we would derive all values directly from the theme, but it causes a lot of regressions
-  // internally. For now we fall back to the old hardcoded behavior only for internal apps.
-  $outline: if(m2-utils.$private-is-internal-build,
-    rgba(if($is-dark, #fff, #000), 0.12),
-    inspection.get-theme-color($theme, foreground, divider)
-  );
-
-  @return (
-    disabled-label-text-color:
-        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
-    disabled-outline-color: $outline,
-    disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-    focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
-    label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
-    outline-color: $outline,
-    pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
-    state-layer-color: inspection.get-theme-color($theme, foreground, base),
-  );
-}
-
-// 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);
-  $ripple-opacity: 0.1;
-
-  @return (
-    label-text-color: inspection.get-theme-color($theme, $palette-name, default),
-    // TODO: we shouldn't have to set this since it's the same as the non-palette version, however
-    // there are a bunch of tests internally that depend on it. We should remove this and clean
-    // up the screenshots separately.
-    outline-color: map.get(get-color-tokens($theme), outline-color),
-    state-layer-color: $color,
-    ripple-color: if(
-      meta.type-of($color) == color,
-      rgba($color, $ripple-opacity),
-      inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
-  );
-}
-
-// Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($theme) {
-  @return (
-    label-text-font: inspection.get-theme-typography($theme, button, font-family),
-    label-text-size: inspection.get-theme-typography($theme, button, font-size),
-    label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing),
-    label-text-weight: inspection.get-theme-typography($theme, button, font-weight),
-    label-text-transform: none,
-  );
-}
-
-// Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($theme) {
-  $scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
-
-  @return (
-    container-height:
-    map.get(
-        (
-          0: 36px,
-          -1: 32px,
-          -2: 28px,
-          -3: 24px,
-        ),
-        $scale
-    ),
-    touch-target-display: if($scale < -1, none, block),
-  );
-}
-
-// 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(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}
diff --git a/src/material/button/_m2-protected-button.scss b/src/material/button/_m2-protected-button.scss
deleted file mode 100644
index ae1dcbd12c57..000000000000
--- a/src/material/button/_m2-protected-button.scss
+++ /dev/null
@@ -1,120 +0,0 @@
-@use 'sass:meta';
-@use 'sass:map';
-@use '../core/tokens/m2-utils';
-@use '../core/theming/theming';
-@use '../core/theming/inspection';
-@use '../core/style/sass-utils';
-@use '../core/style/elevation';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, button-protected);
-
-// 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 (
-    container-shape: 4px,
-    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),
-    horizontal-padding: 16px,
-    icon-spacing: 8px,
-    icon-offset: -4px,
-  );
-}
-
-// 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;
-
-  @return (
-    container-color: inspection.get-theme-color($theme, background, card),
-    disabled-container-color: inspection.get-theme-color($theme, foreground, disabled-button, 0.12),
-    disabled-label-text-color:
-        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
-    disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-    focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
-    label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
-    pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
-    state-layer-color: inspection.get-theme-color($theme, foreground, base),
-  );
-}
-
-// Generates the mapping for the properties that change based on the button palette color.
-@function private-get-color-palette-color-tokens($theme, $palette-name) {
-  $state-layer-color: null;
-  $ripple-color: null;
-  $contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
-  $container-color: inspection.get-theme-color($theme, $palette-name, default);
-  $label-text-color: null;
-
-  // Ideally we would derive all values directly from the theme, but it causes a lot of regressions
-  // internally. For now we fall back to the old hardcoded behavior only for internal apps.
-  @if (m2-utils.$private-is-internal-build or
-      meta.type-of($contrast-color) != 'color') {
-    $is-dark: inspection.get-theme-type($theme) == dark;
-    $container-color: inspection.get-theme-color($theme, $palette-name);
-    $contrast-tone: m2-utils.contrast-tone($container-color, $is-dark);
-    $color: if($contrast-tone == 'dark', #000, #fff);
-    $state-layer-color: $color;
-    $ripple-color: rgba($color, 0.1);
-    $label-text-color: if($contrast-tone == 'dark', #000, #fff);
-  }
-  @else {
-    $label-text-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1);
-    $state-layer-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1);
-    $ripple-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 0.1);
-  }
-
-  @return (
-    container-color: $container-color,
-    label-text-color: $label-text-color,
-    ripple-color: $ripple-color,
-    state-layer-color: $state-layer-color,
-  );
-}
-
-// Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($theme) {
-  @return (
-    label-text-font: inspection.get-theme-typography($theme, button, font-family),
-    label-text-size: inspection.get-theme-typography($theme, button, font-size),
-    label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing),
-    label-text-weight: inspection.get-theme-typography($theme, button, font-weight),
-    label-text-transform: none,
-  );
-}
-
-// Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($theme) {
-  $scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
-
-  @return (
-    container-height:
-    map.get(
-        (
-          0: 36px,
-          -1: 32px,
-          -2: 28px,
-          -3: 24px,
-        ),
-        $scale
-    ),
-    touch-target-display: if($scale < -1, none, block),
-  );
-}
-
-// 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(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}
diff --git a/src/material/button/_m2-text-button.scss b/src/material/button/_m2-text-button.scss
deleted file mode 100644
index 72daf199cbcf..000000000000
--- a/src/material/button/_m2-text-button.scss
+++ /dev/null
@@ -1,90 +0,0 @@
-@use 'sass:meta';
-@use 'sass:map';
-@use '../core/tokens/m2-utils';
-@use '../core/theming/theming';
-@use '../core/theming/inspection';
-@use '../core/style/sass-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, button-text);
-
-// 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 (
-    container-shape: 4px,
-    horizontal-padding: 8px,
-    icon-offset: 0,
-    icon-spacing: 8px,
-    with-icon-horizontal-padding: 8px,
-  );
-}
-
-// 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;
-
-  @return (
-    disabled-label-text-color:
-        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
-    disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-    focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
-    label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
-    pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
-    state-layer-color: inspection.get-theme-color($theme, foreground, base),
-  );
-}
-
-// 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);
-  $ripple-opacity: 0.1;
-
-  @return (
-    label-text-color: inspection.get-theme-color($theme, $palette-name),
-    state-layer-color: $color,
-    ripple-color: if(
-      meta.type-of($color) == color,
-      rgba($color, $ripple-opacity),
-      inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
-  );
-}
-
-// Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($theme) {
-  @return (
-    label-text-font: inspection.get-theme-typography($theme, button, font-family),
-    label-text-size: inspection.get-theme-typography($theme, button, font-size),
-    label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing),
-    label-text-weight: inspection.get-theme-typography($theme, button, font-weight),
-    label-text-transform: none,
-  );
-}
-
-// Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($theme) {
-  $scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
-
-  @return (
-    container-height: map.get((
-      0: 36px,
-      -1: 32px,
-      -2: 28px,
-      -3: 24px,
-    ), $scale),
-    touch-target-display: if($scale < -1, none, block),
-  );
-}
-
-// 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(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}
diff --git a/src/material/button/_m2-tonal-button.scss b/src/material/button/_m2-tonal-button.scss
deleted file mode 100644
index 6df062e6dd96..000000000000
--- a/src/material/button/_m2-tonal-button.scss
+++ /dev/null
@@ -1,90 +0,0 @@
-@use 'sass:map';
-@use '../core/tokens/m2-utils';
-@use '../core/theming/theming';
-@use '../core/theming/inspection';
-@use '../core/style/sass-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, button-tonal);
-
-// 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 (
-    container-shape: 4px,
-    horizontal-padding: 16px,
-    icon-spacing: 8px,
-    icon-offset: -4px,
-  );
-}
-
-// 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;
-
-  @return (
-    container-color: inspection.get-theme-color($theme, background, card),
-    label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
-    disabled-container-color: inspection.get-theme-color($theme, foreground, disabled-button,
-      0.12),
-    disabled-label-text-color: inspection.get-theme-color($theme, foreground, disabled-button,
-      if($is-dark, 0.5, 0.38)),
-    state-layer-color: inspection.get-theme-color($theme, foreground, base),
-    disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-    ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
-    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
-    focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    pressed-state-layer-opacity: if($is-dark, 0.24, 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 (
-    container-color: inspection.get-theme-color($theme, $palette-name, default),
-    label-text-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1),
-    state-layer-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1),
-    ripple-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 0.1),
-  );
-}
-
-// Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($theme) {
-  @return (
-    label-text-font: inspection.get-theme-typography($theme, button, font-family),
-    label-text-size: inspection.get-theme-typography($theme, button, font-size),
-    label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing),
-    label-text-weight: inspection.get-theme-typography($theme, button, font-weight),
-    label-text-transform: none,
-  );
-}
-
-// Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($theme) {
-  $scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
-
-  @return (
-    touch-target-display: if($scale < -1, none, block),
-    container-height:
-      map.get(
-        (
-          0: 36px,
-          -1: 32px,
-          -2: 28px,
-          -3: 24px,
-        ),
-        $scale
-      )
-  );
-}
-
-// 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(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}
diff --git a/src/material/button/_m3-button.scss b/src/material/button/_m3-button.scss
new file mode 100644
index 000000000000..3dbd92645e7d
--- /dev/null
+++ b/src/material/button/_m3-button.scss
@@ -0,0 +1,243 @@
+@use 'sass:map';
+@use '../core/tokens/m3-utils';
+@use '../core/style/sass-utils';
+@use '../core/style/elevation';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, button);
+
+/// Generates custom tokens for the mat-flat-button.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @param {Map} $token-slots Possible token slots
+/// @return {Map} A set of custom tokens for the mat-flat-button
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: (
+    filled-container-color: map.get($systems, md-sys-color, primary),
+    filled-container-height: if($exclude-hardcoded, null, 40px),
+    filled-container-shape: map.get($systems, md-sys-shape, corner-full),
+    filled-disabled-container-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-surface), $alpha: 0.12),
+    filled-disabled-label-text-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+    filled-disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
+    filled-focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
+    filled-horizontal-padding: m3-utils.hardcode(24px, $exclude-hardcoded),
+    filled-hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
+    filled-icon-offset: m3-utils.hardcode(-8px, $exclude-hardcoded),
+    filled-icon-spacing: m3-utils.hardcode(8px, $exclude-hardcoded),
+    filled-label-text-color: map.get($systems, md-sys-color, on-primary),
+    filled-label-text-font: map.get($systems, md-sys-typescale, label-large-font),
+    filled-label-text-size: map.get($systems, md-sys-typescale, label-large-size),
+    filled-label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking),
+    filled-label-text-weight: map.get($systems, md-sys-typescale, label-large-weight),
+    filled-pressed-state-layer-opacity:
+    map.get($systems, md-sys-state, pressed-state-layer-opacity),
+    filled-ripple-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-primary),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)    ),
+    filled-state-layer-color: map.get($systems, md-sys-color, on-primary),
+    outlined-container-height: if($exclude-hardcoded, null, 40px),
+    outlined-container-shape: map.get($systems, md-sys-shape, corner-full),
+    outlined-disabled-label-text-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+    outlined-disabled-outline-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-surface), $alpha: 0.12),
+    outlined-disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
+    outlined-focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
+    outlined-horizontal-padding: m3-utils.hardcode(24px, $exclude-hardcoded),
+    outlined-hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
+    outlined-icon-offset: m3-utils.hardcode(-8px, $exclude-hardcoded),
+    outlined-icon-spacing: m3-utils.hardcode(8px, $exclude-hardcoded),
+    outlined-label-text-color: map.get($systems, md-sys-color, primary),
+    outlined-label-text-font: map.get($systems, md-sys-typescale, label-large-font),
+    outlined-label-text-size: map.get($systems, md-sys-typescale, label-large-size),
+    outlined-label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking),
+    outlined-label-text-weight: map.get($systems, md-sys-typescale, label-large-weight),
+    outlined-outline-color: map.get($systems, md-sys-color, outline),
+    outlined-outline-width: if($exclude-hardcoded, null, 1px),
+    outlined-pressed-state-layer-opacity:
+      map.get($systems, md-sys-state, pressed-state-layer-opacity),
+    outlined-ripple-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, primary),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
+    outlined-state-layer-color: map.get($systems, md-sys-color, primary),
+    protected-container-color: map.get($systems, md-sys-color, surface),
+    protected-container-elevation-shadow: map.get($systems, md-sys-elevation, level1),
+    protected-container-height: if($exclude-hardcoded, null, 40px),
+    protected-container-shape: map.get($systems, md-sys-shape, corner-full),
+    protected-disabled-container-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-surface), $alpha: 0.12),
+    protected-disabled-container-elevation-shadow: map.get($systems, md-sys-elevation, level0),
+    protected-disabled-label-text-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+    protected-disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
+    protected-focus-container-elevation-shadow: map.get($systems, md-sys-elevation, level1),
+    protected-focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
+    protected-horizontal-padding: m3-utils.hardcode(24px, $exclude-hardcoded),
+    protected-hover-container-elevation-shadow: map.get($systems, md-sys-elevation, level2),
+    protected-hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
+    protected-icon-offset: m3-utils.hardcode(-8px, $exclude-hardcoded),
+    protected-icon-spacing: m3-utils.hardcode(8px, $exclude-hardcoded),
+    protected-label-text-color: map.get($systems, md-sys-color, primary),
+    protected-label-text-font: map.get($systems, md-sys-typescale, label-large-font),
+    protected-label-text-size: map.get($systems, md-sys-typescale, label-large-size),
+    protected-label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking),
+    protected-label-text-weight: map.get($systems, md-sys-typescale, label-large-weight),
+    protected-pressed-container-elevation-shadow: map.get($systems, md-sys-elevation, level1),
+    protected-pressed-state-layer-opacity:
+        map.get($systems, md-sys-state, pressed-state-layer-opacity),
+    protected-ripple-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, primary),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
+    protected-state-layer-color: map.get($systems, md-sys-color, primary),
+    text-container-height: if($exclude-hardcoded, null, 40px),
+    text-container-shape: map.get($systems, md-sys-shape, corner-full),
+    text-disabled-label-text-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+    text-disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
+    text-focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
+    text-horizontal-padding: m3-utils.hardcode(12px, $exclude-hardcoded),
+    text-hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
+    text-icon-offset: m3-utils.hardcode(-4px, $exclude-hardcoded),
+    text-icon-spacing: m3-utils.hardcode(8px, $exclude-hardcoded),
+    text-label-text-color: map.get($systems, md-sys-color, primary),
+    text-label-text-font: map.get($systems, md-sys-typescale, label-large-font),
+    text-label-text-size: map.get($systems, md-sys-typescale, label-large-size),
+    text-label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking),
+    text-label-text-weight: map.get($systems, md-sys-typescale, label-large-weight),
+    text-pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity),
+    text-ripple-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, primary),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
+    text-state-layer-color: map.get($systems, md-sys-color, primary),
+    text-with-icon-horizontal-padding: m3-utils.hardcode(16px, $exclude-hardcoded),
+    tonal-container-color: map.get($systems, md-sys-color, secondary-container),
+    tonal-container-height: if($exclude-hardcoded, null, 40px),
+    tonal-container-shape: map.get($systems, md-sys-shape, corner-full),
+    tonal-disabled-container-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-surface), $alpha: 0.12),
+    tonal-disabled-label-text-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+    tonal-disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
+    tonal-focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
+    tonal-horizontal-padding: m3-utils.hardcode(24px, $exclude-hardcoded),
+    tonal-hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
+    tonal-icon-offset: m3-utils.hardcode(-8px, $exclude-hardcoded),
+    tonal-icon-spacing: m3-utils.hardcode(8px, $exclude-hardcoded),
+    tonal-label-text-color: map.get($systems, md-sys-color, on-secondary-container),
+    tonal-label-text-font: map.get($systems, md-sys-typescale, label-large-font),
+    tonal-label-text-size: map.get($systems, md-sys-typescale, label-large-size),
+    tonal-label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking),
+    tonal-label-text-weight: map.get($systems, md-sys-typescale, label-large-weight),
+    tonal-pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity),
+    tonal-ripple-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-secondary-container),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
+    tonal-state-layer-color: map.get($systems, md-sys-color, on-secondary-container),
+  );
+
+  $variant-tokens: (
+    primary: (), // Default, no overrides needed.
+    secondary: (
+      filled-container-color: map.get($systems, md-sys-color, secondary),
+      filled-label-text-color: map.get($systems, md-sys-color, on-secondary),
+      filled-ripple-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, on-secondary),
+          $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
+      filled-state-layer-color: map.get($systems, md-sys-color, on-secondary),
+      outlined-label-text-color: map.get($systems, md-sys-color, secondary),
+      outlined-ripple-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, secondary),
+          $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
+      outlined-state-layer-color: map.get($systems, md-sys-color, secondary),
+      protected-label-text-color: map.get($systems, md-sys-color, secondary),
+      protected-ripple-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, secondary),
+          $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
+      protected-state-layer-color: map.get($systems, md-sys-color, secondary),
+      text-label-text-color: map.get($systems, md-sys-color, secondary),
+      text-ripple-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, secondary),
+          $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
+      text-state-layer-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      filled-container-color: map.get($systems, md-sys-color, tertiary),
+      filled-label-text-color: map.get($systems, md-sys-color, on-tertiary),
+      filled-ripple-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, on-tertiary),
+          $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
+      filled-state-layer-color: map.get($systems, md-sys-color, on-tertiary),
+      outlined-label-text-color: map.get($systems, md-sys-color, tertiary),
+      outlined-ripple-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, tertiary),
+          $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
+      outlined-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      protected-label-text-color: map.get($systems, md-sys-color, tertiary),
+      protected-ripple-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, tertiary),
+          $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
+      protected-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      text-label-text-color: map.get($systems, md-sys-color, tertiary),
+      text-ripple-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, tertiary),
+          $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
+      text-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      tonal-container-color: map.get($systems, md-sys-color, tertiary-container),
+      tonal-label-text-color: map.get($systems, md-sys-color, on-tertiary-container),
+      tonal-ripple-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, on-tertiary-container),
+          $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
+      tonal-state-layer-color: map.get($systems, md-sys-color, on-tertiary-container),
+    ),
+    error: (
+      filled-container-color: map.get($systems, md-sys-color, error),
+      filled-label-text-color: map.get($systems, md-sys-color, on-error),
+      filled-ripple-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, on-error),
+          $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
+      filled-state-layer-color: map.get($systems, md-sys-color, on-error),
+      outlined-label-text-color: map.get($systems, md-sys-color, error),
+      outlined-ripple-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, error),
+          $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
+      outlined-state-layer-color: map.get($systems, md-sys-color, error),
+      protected-label-text-color: map.get($systems, md-sys-color, error),
+      protected-ripple-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, error),
+          $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
+      protected-state-layer-color: map.get($systems, md-sys-color, error),
+      text-label-text-color: map.get($systems, md-sys-color, error),
+      text-ripple-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, error),
+          $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
+      text-state-layer-color: map.get($systems, md-sys-color, error),
+      tonal-container-color: map.get($systems, md-sys-color, error-container),
+      tonal-label-text-color: map.get($systems, md-sys-color, on-error-container),
+      tonal-ripple-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, on-error-container),
+          $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
+      tonal-state-layer-color: map.get($systems, md-sys-color, on-error-container),
+    )
+  );
+
+  $elevation-tokens: (
+    protected-container-elevation-shadow,
+    protected-disabled-container-elevation-shadow,
+    protected-focus-container-elevation-shadow,
+    protected-hover-container-elevation-shadow,
+    protected-pressed-container-elevation-shadow,
+  );
+
+  @each $token in $elevation-tokens {
+    $elevation: map.get($tokens, $token);
+
+    @if ($elevation != null) {
+      $tokens: map.set($tokens, $token, elevation.get-box-shadow($elevation));
+    }
+  }
+
+
+  @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
+}
diff --git a/src/material/button/_m3-extended-fab.scss b/src/material/button/_m3-extended-fab.scss
deleted file mode 100644
index 6a7b4e545acd..000000000000
--- a/src/material/button/_m3-extended-fab.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-@use 'sass:map';
-@use '../core/style/elevation';
-@use '../core/tokens/m3-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, fab-extended);
-
-/// Generates the tokens for MDC extended-fab
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @param {Map} $token-slots Possible token slots
-/// @return {Map} A set of tokens for the MDC extended-fab
-@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: (
-    container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
-    container-height: if($exclude-hardcoded, null, 56px),
-    container-shape: map.get($systems, md-sys-shape, corner-large),
-    focus-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
-    hover-container-elevation-shadow: map.get($systems, md-sys-elevation, level4),
-    label-text-font: map.get($systems, md-sys-typescale, label-large-font),
-    label-text-size: map.get($systems, md-sys-typescale, label-large-size),
-    label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking),
-    label-text-weight: map.get($systems, md-sys-typescale, label-large-weight),
-    pressed-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
-  );
-
-  $elevation-tokens: (
-    container-elevation-shadow,
-    focus-container-elevation-shadow,
-    hover-container-elevation-shadow,
-    pressed-container-elevation-shadow,
-  );
-
-  @each $token in $elevation-tokens {
-    $elevation: map.get($tokens, $token);
-
-    @if ($elevation != null) {
-      $tokens: map.set($tokens, $token, elevation.get-box-shadow($elevation));
-    }
-  }
-
-  $variant-tokens: (
-    // Color variants
-    primary: (), // Default, no overrides needed.
-    secondary: (
-      container-height: if($exclude-hardcoded, null, 56px),
-      container-shape: map.get($systems, md-sys-shape, corner-large),
-      label-text-font: map.get($systems, md-sys-typescale, label-large-font),
-      label-text-size: map.get($systems, md-sys-typescale, label-large-size),
-      label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking),
-      label-text-weight: map.get($systems, md-sys-typescale, label-large-weight),
-    ),
-    tertiary: (
-      container-height: if($exclude-hardcoded, null, 56px),
-      container-shape: map.get($systems, md-sys-shape, corner-large),
-      label-text-font: map.get($systems, md-sys-typescale, label-large-font),
-      label-text-size: map.get($systems, md-sys-typescale, label-large-size),
-      label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking),
-      label-text-weight: map.get($systems, md-sys-typescale, label-large-weight),
-    )
-  );
-
-  @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
-}
diff --git a/src/material/button/_m3-fab-small.scss b/src/material/button/_m3-fab-small.scss
deleted file mode 100644
index 093f5d6a8796..000000000000
--- a/src/material/button/_m3-fab-small.scss
+++ /dev/null
@@ -1,91 +0,0 @@
-@use 'sass:map';
-@use '../core/style/sass-utils';
-@use '../core/tokens/m3-utils';
-@use '../core/style/elevation';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, fab-small);
-
-/// Generates custom tokens for the mat-mini-fab.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @param {Map} $token-slots Possible token slots
-/// @return {Map} A set of custom tokens for the mat-mini-fab
-@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: (
-    foreground-color: map.get($systems, md-sys-color, on-primary-container),
-    state-layer-color: map.get($systems, md-sys-color, on-primary-container),
-    ripple-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-primary-container),
-      $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
-    ),
-    disabled-state-container-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-surface), $alpha: 0.12),
-    disabled-state-foreground-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
-    container-color: map.get($systems, md-sys-color, primary-container),
-    container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
-    container-shape: map.get($systems, md-sys-shape, corner-medium),
-    focus-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
-    focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
-    hover-container-elevation-shadow: map.get($systems, md-sys-elevation, level4),
-    hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
-    pressed-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
-    pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity),
-  );
-
-  $elevation-tokens: (
-    container-elevation-shadow,
-    focus-container-elevation-shadow,
-    hover-container-elevation-shadow,
-    pressed-container-elevation-shadow,
-  );
-
-  @each $token in $elevation-tokens {
-    $elevation: map.get($tokens, $token);
-
-    @if ($elevation != null) {
-      $tokens: map.set($tokens, $token, elevation.get-box-shadow($elevation));
-    }
-  }
-
-  $variant-tokens: (
-    // Color variants
-    primary: (), // Default, no overrides needed.
-    secondary: (
-      foreground-color: map.get($systems, md-sys-color, on-secondary-container),
-      state-layer-color: map.get($systems, md-sys-color, on-secondary-container),
-      ripple-color: sass-utils.safe-color-change(
-          map.get($systems, md-sys-color, on-secondary-container),
-        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
-      ),
-      container-color: map.get($systems, md-sys-color, secondary-container),
-      container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
-      container-shape: map.get($systems, md-sys-shape, corner-medium),
-      focus-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
-      focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
-      hover-container-elevation-shadow: map.get($systems, md-sys-elevation, level4),
-      hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
-      pressed-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
-      pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity),
-    ),
-    tertiary: (
-      foreground-color: map.get($systems, md-sys-color, on-tertiary-container),
-      state-layer-color: map.get($systems, md-sys-color, on-tertiary-container),
-      ripple-color: sass-utils.safe-color-change(
-          map.get($systems, md-sys-color, on-tertiary-container),
-        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
-      ),
-      container-color: map.get($systems, md-sys-color, tertiary-container),
-      container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
-      container-shape: map.get($systems, md-sys-shape, corner-medium),
-      focus-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
-      focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
-      hover-container-elevation-shadow: map.get($systems, md-sys-elevation, level4),
-      hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
-      pressed-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
-    )
-  );
-
-  @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
-}
diff --git a/src/material/button/_m3-fab.scss b/src/material/button/_m3-fab.scss
index d1a819a041bf..e7a62c86518a 100644
--- a/src/material/button/_m3-fab.scss
+++ b/src/material/button/_m3-fab.scss
@@ -13,61 +13,145 @@ $prefix: (mat, fab);
 /// @return {Map} A set of custom tokens for the mat-fab
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
   $tokens: (
-    foreground-color: map.get($systems, md-sys-color, on-primary-container),
-    state-layer-color: map.get($systems, md-sys-color, on-primary-container),
-    ripple-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-primary-container),
-      $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
-    ),
+    container-color: map.get($systems, md-sys-color, primary-container),
+    container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
+    container-shape: map.get($systems, md-sys-shape, corner-large),
     disabled-state-container-color: sass-utils.safe-color-change(
         map.get($systems, md-sys-color, on-surface), $alpha: 0.12),
     disabled-state-foreground-color: sass-utils.safe-color-change(
         map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
-    container-color: map.get($systems, md-sys-color, primary-container),
-    container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
-    container-shape: map.get($systems, md-sys-shape, corner-large),
+    extended-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
+    extended-container-height: if($exclude-hardcoded, null, 56px),
+    extended-container-shape: map.get($systems, md-sys-shape, corner-large),
+    extended-focus-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
+    extended-hover-container-elevation-shadow: map.get($systems, md-sys-elevation, level4),
+    extended-label-text-font: map.get($systems, md-sys-typescale, label-large-font),
+    extended-label-text-size: map.get($systems, md-sys-typescale, label-large-size),
+    extended-label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking),
+    extended-label-text-weight: map.get($systems, md-sys-typescale, label-large-weight),
+    extended-pressed-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
     focus-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
     focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
+    foreground-color: map.get($systems, md-sys-color, on-primary-container),
     hover-container-elevation-shadow: map.get($systems, md-sys-elevation, level4),
     hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
     pressed-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
     pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity),
+    ripple-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-primary-container),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
+    small-container-color: map.get($systems, md-sys-color, primary-container),
+    small-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
+    small-container-shape: map.get($systems, md-sys-shape, corner-medium),
+    small-disabled-state-container-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-surface), $alpha: 0.12),
+    small-disabled-state-foreground-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+    small-focus-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
+    small-focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
+    small-foreground-color: map.get($systems, md-sys-color, on-primary-container),
+    small-hover-container-elevation-shadow: map.get($systems, md-sys-elevation, level4),
+    small-hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
+    small-pressed-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
+    small-pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity),
+    small-ripple-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-primary-container),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
+    small-state-layer-color: map.get($systems, md-sys-color, on-primary-container),
+    state-layer-color: map.get($systems, md-sys-color, on-primary-container),
   );
 
+  $elevation-tokens: (
+    extended-container-elevation-shadow,
+    extended-focus-container-elevation-shadow,
+    extended-hover-container-elevation-shadow,
+    extended-pressed-container-elevation-shadow,
+    small-container-elevation-shadow,
+    small-focus-container-elevation-shadow,
+    small-hover-container-elevation-shadow,
+    small-pressed-container-elevation-shadow,
+  );
+
+  @each $token in $elevation-tokens {
+    $elevation: map.get($tokens, $token);
+
+    @if ($elevation != null) {
+      $tokens: map.set($tokens, $token, elevation.get-box-shadow($elevation));
+    }
+  }
+
   $variant-tokens: (
     // Color variants
     primary: (), // Default, no overrides needed.
     secondary: (
-      foreground-color: map.get($systems, md-sys-color, on-secondary-container),
-      state-layer-color: map.get($systems, md-sys-color, on-secondary-container),
-      ripple-color: sass-utils.safe-color-change(
-          map.get($systems, md-sys-color, on-secondary-container),
-        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
-      ),
       container-color: map.get($systems, md-sys-color, secondary-container),
       container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
       container-shape: map.get($systems, md-sys-shape, corner-large),
+      extended-container-height: if($exclude-hardcoded, null, 56px),
+      extended-container-shape: map.get($systems, md-sys-shape, corner-large),
+      extended-label-text-font: map.get($systems, md-sys-typescale, label-large-font),
+      extended-label-text-size: map.get($systems, md-sys-typescale, label-large-size),
+      extended-label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking),
+      extended-label-text-weight: map.get($systems, md-sys-typescale, label-large-weight),
       focus-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
       focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
+      foreground-color: map.get($systems, md-sys-color, on-secondary-container),
       hover-container-elevation-shadow: map.get($systems, md-sys-elevation, level4),
       hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
       pressed-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
+      ripple-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, on-secondary-container),
+          $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
+      small-container-color: map.get($systems, md-sys-color, secondary-container),
+      small-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
+      small-container-shape: map.get($systems, md-sys-shape, corner-medium),
+      small-focus-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
+      small-focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
+      small-foreground-color: map.get($systems, md-sys-color, on-secondary-container),
+      small-hover-container-elevation-shadow: map.get($systems, md-sys-elevation, level4),
+      small-hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
+      small-pressed-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
+      small-pressed-state-layer-opacity:
+          map.get($systems, md-sys-state, pressed-state-layer-opacity),
+      small-ripple-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, on-secondary-container),
+          $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
+      small-state-layer-color: map.get($systems, md-sys-color, on-secondary-container),
+      state-layer-color: map.get($systems, md-sys-color, on-secondary-container),
     ),
     tertiary: (
-      foreground-color: map.get($systems, md-sys-color, on-tertiary-container),
-      state-layer-color: map.get($systems, md-sys-color, on-tertiary-container),
-      ripple-color: sass-utils.safe-color-change(
-          map.get($systems, md-sys-color, on-tertiary-container),
-        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
-      ),
       container-color: map.get($systems, md-sys-color, tertiary-container),
       container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
       container-shape: map.get($systems, md-sys-shape, corner-large),
+      extended-container-height: if($exclude-hardcoded, null, 56px),
+      extended-container-shape: map.get($systems, md-sys-shape, corner-large),
+      extended-label-text-font: map.get($systems, md-sys-typescale, label-large-font),
+      extended-label-text-size: map.get($systems, md-sys-typescale, label-large-size),
+      extended-label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking),
+      extended-label-text-weight: map.get($systems, md-sys-typescale, label-large-weight),
       focus-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
       focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
+      foreground-color: map.get($systems, md-sys-color, on-tertiary-container),
       hover-container-elevation-shadow: map.get($systems, md-sys-elevation, level4),
       hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
       pressed-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
+      ripple-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, on-tertiary-container),
+          $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
+      small-container-color: map.get($systems, md-sys-color, tertiary-container),
+      small-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
+      small-container-shape: map.get($systems, md-sys-shape, corner-medium),
+      small-focus-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
+      small-focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
+      small-foreground-color: map.get($systems, md-sys-color, on-tertiary-container),
+      small-hover-container-elevation-shadow: map.get($systems, md-sys-elevation, level4),
+      small-hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
+      small-pressed-container-elevation-shadow: map.get($systems, md-sys-elevation, level3),
+      small-ripple-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, on-tertiary-container),
+          $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
+      small-state-layer-color: map.get($systems, md-sys-color, on-tertiary-container),
+      state-layer-color: map.get($systems, md-sys-color, on-tertiary-container),
     )
   );
 
diff --git a/src/material/button/_m3-filled-button.scss b/src/material/button/_m3-filled-button.scss
deleted file mode 100644
index 6daac8c921f9..000000000000
--- a/src/material/button/_m3-filled-button.scss
+++ /dev/null
@@ -1,73 +0,0 @@
-@use 'sass:map';
-@use '../core/tokens/m3-utils';
-@use '../core/style/sass-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, button-filled);
-
-/// Generates custom tokens for the mat-flat-button.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @param {Map} $token-slots Possible token slots
-/// @return {Map} A set of custom tokens for the mat-flat-button
-@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: (
-    horizontal-padding: m3-utils.hardcode(24px, $exclude-hardcoded),
-    icon-spacing: m3-utils.hardcode(8px, $exclude-hardcoded),
-    icon-offset: m3-utils.hardcode(-8px, $exclude-hardcoded),
-    state-layer-color: map.get($systems, md-sys-color, on-primary),
-    disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
-    ripple-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-primary),
-      $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
-    ),
-    container-color: map.get($systems, md-sys-color, primary),
-    container-height: if($exclude-hardcoded, null, 40px),
-    container-shape: map.get($systems, md-sys-shape, corner-full),
-    disabled-container-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-surface), $alpha: 0.12),
-    disabled-label-text-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
-    focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
-    hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
-    label-text-color: map.get($systems, md-sys-color, on-primary),
-    label-text-font: map.get($systems, md-sys-typescale, label-large-font),
-    label-text-size: map.get($systems, md-sys-typescale, label-large-size),
-    label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking),
-    label-text-weight: map.get($systems, md-sys-typescale, label-large-weight),
-    pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity),
-  );
-
-  $variant-tokens: (
-    primary: (), // Default, no overrides needed.
-    secondary: (
-      state-layer-color: map.get($systems, md-sys-color, on-secondary),
-      ripple-color: sass-utils.safe-color-change(
-          map.get($systems, md-sys-color, on-secondary),
-        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
-      ),
-      container-color: map.get($systems, md-sys-color, secondary),
-      label-text-color: map.get($systems, md-sys-color, on-secondary),
-    ),
-    tertiary: (
-      state-layer-color: map.get($systems, md-sys-color, on-tertiary),
-      ripple-color: sass-utils.safe-color-change(
-          map.get($systems, md-sys-color, on-tertiary),
-        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
-      ),
-      container-color: map.get($systems, md-sys-color, tertiary),
-      label-text-color: map.get($systems, md-sys-color, on-tertiary),
-    ),
-    error: (
-      state-layer-color: map.get($systems, md-sys-color, on-error),
-      ripple-color: sass-utils.safe-color-change(
-          map.get($systems, md-sys-color, on-error),
-        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
-      ),
-      container-color: map.get($systems, md-sys-color, error),
-      label-text-color: map.get($systems, md-sys-color, on-error),
-    )
-  );
-
-  @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
-}
diff --git a/src/material/button/_m3-outlined-button.scss b/src/material/button/_m3-outlined-button.scss
deleted file mode 100644
index f55c612d9cea..000000000000
--- a/src/material/button/_m3-outlined-button.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-@use 'sass:map';
-@use '../core/style/sass-utils';
-@use '../core/tokens/m3-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, button-outlined);
-
-/// Generates custom tokens for the mat-outlined-button.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @param {Map} $token-slots Possible token slots
-/// @return {Map} A set of custom tokens for the mat-outlined-button
-@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: (
-    horizontal-padding: m3-utils.hardcode(24px, $exclude-hardcoded),
-    icon-spacing: m3-utils.hardcode(8px, $exclude-hardcoded),
-    icon-offset: m3-utils.hardcode(-8px, $exclude-hardcoded),
-    state-layer-color: map.get($systems, md-sys-color, primary),
-    disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
-    ripple-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, primary),
-      $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
-    ),
-    container-height: if($exclude-hardcoded, null, 40px),
-    container-shape: map.get($systems, md-sys-shape, corner-full),
-    disabled-label-text-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
-    disabled-outline-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-surface), $alpha: 0.12),
-    focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
-    hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
-    label-text-color: map.get($systems, md-sys-color, primary),
-    label-text-font: map.get($systems, md-sys-typescale, label-large-font),
-    label-text-size: map.get($systems, md-sys-typescale, label-large-size),
-    label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking),
-    label-text-weight: map.get($systems, md-sys-typescale, label-large-weight),
-    outline-color: map.get($systems, md-sys-color, outline),
-    outline-width: if($exclude-hardcoded, null, 1px),
-    pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity),
-  );
-
-  $variant-tokens: (
-    primary: (), // Default, no overrides needed.
-    secondary: (
-      state-layer-color: map.get($systems, md-sys-color, secondary),
-      ripple-color: sass-utils.safe-color-change(
-          map.get($systems, md-sys-color, secondary),
-        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
-      ),
-      label-text-color: map.get($systems, md-sys-color, secondary),
-    ),
-    tertiary: (
-      state-layer-color: map.get($systems, md-sys-color, tertiary),
-      ripple-color: sass-utils.safe-color-change(
-          map.get($systems, md-sys-color, tertiary),
-        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
-      ),
-      label-text-color: map.get($systems, md-sys-color, tertiary),
-    ),
-    error: (
-      state-layer-color: map.get($systems, md-sys-color, error),
-      ripple-color: sass-utils.safe-color-change(
-          map.get($systems, md-sys-color, error),
-        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
-      ),
-      label-text-color: map.get($systems, md-sys-color, error),
-    )
-  );
-
-  @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
-}
diff --git a/src/material/button/_m3-protected-button.scss b/src/material/button/_m3-protected-button.scss
deleted file mode 100644
index bb699c9544a8..000000000000
--- a/src/material/button/_m3-protected-button.scss
+++ /dev/null
@@ -1,93 +0,0 @@
-@use 'sass:map';
-@use '../core/style/elevation';
-@use '../core/tokens/m3-utils';
-@use '../core/style/sass-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-// Note: in M3 the "protected" button is called "elevated".
-$prefix: (mat, button-protected);
-
-/// Generates custom tokens for the mat-raised-button.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @param {Map} $token-slots Possible token slots
-/// @return {Map} A set of custom tokens for the mat-raised-button
-@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  // Note: in M3 the "protected" button is called "elevated".
-  $tokens: (
-    container-color: map.get($systems, md-sys-color, surface),
-    container-elevation: map.get($systems, md-sys-elevation, level1),
-    container-height: if($exclude-hardcoded, null, 40px),
-    container-shape: map.get($systems, md-sys-shape, corner-full),
-    disabled-container-color:
-        sass-utils.safe-color-change(map.get($systems, md-sys-color, on-surface), $alpha: 0.12),
-    disabled-container-elevation: map.get($systems, md-sys-elevation, level0),
-    disabled-label-text-color:
-        sass-utils.safe-color-change(map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
-    disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
-    focus-container-elevation: map.get($systems, md-sys-elevation, level1),
-    focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
-    horizontal-padding: m3-utils.hardcode(24px, $exclude-hardcoded),
-    hover-container-elevation: map.get($systems, md-sys-elevation, level2),
-    hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
-    icon-offset: m3-utils.hardcode(-8px, $exclude-hardcoded),
-    icon-spacing: m3-utils.hardcode(8px, $exclude-hardcoded),
-    label-text-color: map.get($systems, md-sys-color, primary),
-    label-text-font: map.get($systems, md-sys-typescale, label-large-font),
-    label-text-size: map.get($systems, md-sys-typescale, label-large-size),
-    label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking),
-    label-text-weight: map.get($systems, md-sys-typescale, label-large-weight),
-    pressed-container-elevation: map.get($systems, md-sys-elevation, level1),
-    pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity),
-    ripple-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, primary),
-        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
-    state-layer-color: map.get($systems, md-sys-color, primary),
-  );
-
-  $variant-tokens: (
-    primary: (), // Default, no overrides needed.
-    secondary: (
-      state-layer-color: map.get($systems, md-sys-color, secondary),
-      ripple-color: sass-utils.safe-color-change(
-          map.get($systems, md-sys-color, secondary),
-        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
-      ),
-      label-text-color: map.get($systems, md-sys-color, secondary),
-    ),
-    tertiary: (
-      state-layer-color: map.get($systems, md-sys-color, tertiary),
-      ripple-color: sass-utils.safe-color-change(
-          map.get($systems, md-sys-color, tertiary),
-        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
-      ),
-      label-text-color: map.get($systems, md-sys-color, tertiary),
-    ),
-    error: (
-      state-layer-color: map.get($systems, md-sys-color, error),
-      ripple-color: sass-utils.safe-color-change(
-          map.get($systems, md-sys-color, error),
-        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
-      ),
-      label-text-color: map.get($systems, md-sys-color, error),
-    )
-  );
-
-  $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 m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
-}
diff --git a/src/material/button/_m3-text-button.scss b/src/material/button/_m3-text-button.scss
deleted file mode 100644
index b8164d0b5308..000000000000
--- a/src/material/button/_m3-text-button.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-@use 'sass:map';
-@use '../core/style/sass-utils';
-@use '../core/tokens/m3-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, button-text);
-
-/// Generates custom tokens for the mat-button.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @param {Map} $token-slots Possible token slots
-/// @return {Map} A set of custom tokens for the mat-button
-@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: (
-    horizontal-padding: m3-utils.hardcode(12px, $exclude-hardcoded),
-    with-icon-horizontal-padding: m3-utils.hardcode(16px, $exclude-hardcoded),
-    icon-spacing: m3-utils.hardcode(8px, $exclude-hardcoded),
-    icon-offset: m3-utils.hardcode(-4px, $exclude-hardcoded),
-    state-layer-color: map.get($systems, md-sys-color, primary),
-    disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
-    ripple-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, primary),
-      $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
-    ),
-    container-height: if($exclude-hardcoded, null, 40px),
-    container-shape: map.get($systems, md-sys-shape, corner-full),
-    disabled-label-text-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
-    focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
-    hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
-    label-text-color: map.get($systems, md-sys-color, primary),
-    label-text-font: map.get($systems, md-sys-typescale, label-large-font),
-    label-text-size: map.get($systems, md-sys-typescale, label-large-size),
-    label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking),
-    label-text-weight: map.get($systems, md-sys-typescale, label-large-weight),
-    pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity),
-  );
-
-  $variant-tokens: (
-    primary: (), // Default, no overrides needed.
-    secondary: (
-      state-layer-color: map.get($systems, md-sys-color, secondary),
-      ripple-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, secondary),
-      $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
-      ),
-      label-text-color: map.get($systems, md-sys-color, secondary),
-    ),
-    tertiary: (
-      state-layer-color: map.get($systems, md-sys-color, tertiary),
-      ripple-color: sass-utils.safe-color-change(
-          map.get($systems, md-sys-color, tertiary),
-        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
-      ),
-      label-text-color: map.get($systems, md-sys-color, tertiary),
-    ),
-    error: (
-      state-layer-color: map.get($systems, md-sys-color, error),
-      ripple-color: sass-utils.safe-color-change(
-          map.get($systems, md-sys-color, error),
-        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
-      ),
-      label-text-color: map.get($systems, md-sys-color, error),
-    )
-  );
-
-  @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
-}
diff --git a/src/material/button/_m3-tonal-button.scss b/src/material/button/_m3-tonal-button.scss
deleted file mode 100644
index e37acf5d3ea7..000000000000
--- a/src/material/button/_m3-tonal-button.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-@use 'sass:map';
-@use '../core/style/sass-utils';
-@use '../core/tokens/m3-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, button-tonal);
-
-/// Generates custom tokens for the mat-flat-button.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @param {Map} $token-slots Possible token slots
-/// @return {Map} A set of custom tokens for the mat-flat-button
-@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: (
-    container-color: map.get($systems, md-sys-color, secondary-container),
-    container-height: if($exclude-hardcoded, null, 40px),
-    container-shape: map.get($systems, md-sys-shape, corner-full),
-    disabled-container-color:
-        sass-utils.safe-color-change(map.get($systems, md-sys-color, on-surface), $alpha: 0.12),
-    disabled-label-text-color:
-        sass-utils.safe-color-change(map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
-    disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
-    focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
-    horizontal-padding: m3-utils.hardcode(24px, $exclude-hardcoded),
-    hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
-    icon-offset: m3-utils.hardcode(-8px, $exclude-hardcoded),
-    icon-spacing: m3-utils.hardcode(8px, $exclude-hardcoded),
-    label-text-color: map.get($systems, md-sys-color, on-secondary-container),
-    label-text-font: map.get($systems, md-sys-typescale, label-large-font),
-    label-text-size: map.get($systems, md-sys-typescale, label-large-size),
-    label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking),
-    label-text-weight: map.get($systems, md-sys-typescale, label-large-weight),
-    pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity),
-    ripple-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-secondary-container),
-        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
-    state-layer-color: map.get($systems, md-sys-color, on-secondary-container),
-  );
-
-  $variant-tokens: (
-    // Color variants:
-    primary: (),
-    secondary: (),
-    tertiary: (
-      container-color: map.get($systems, md-sys-color, tertiary-container),
-      label-text-color: map.get($systems, md-sys-color, on-tertiary-container),
-      state-layer-color: map.get($systems, md-sys-color, on-tertiary-container),
-      ripple-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-tertiary-container),
-        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
-      ),
-    ),
-    error: (
-      container-color: map.get($systems, md-sys-color, error-container),
-      label-text-color: map.get($systems, md-sys-color, on-error-container),
-      state-layer-color: map.get($systems, md-sys-color, on-error-container),
-      ripple-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-error-container),
-        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
-      ),
-    )
-  );
-
-  @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
-}
diff --git a/src/material/button/button.scss b/src/material/button/button.scss
index 577624095dba..baa1a7562b8b 100644
--- a/src/material/button/button.scss
+++ b/src/material/button/button.scss
@@ -3,22 +3,7 @@
 @use '../core/style/vendor-prefixes';
 @use '../core/tokens/token-utils';
 @use '../core/focus-indicators/private' as focus-indicators-private;
-@use './m2-filled-button';
-@use './m2-outlined-button';
-@use './m2-protected-button';
-@use './m2-text-button';
-@use './m2-tonal-button';
-
-$filled-token-prefix: m2-filled-button.$prefix;
-$filled-token-slots: m2-filled-button.get-token-slots();
-$outlined-token-prefix: m2-outlined-button.$prefix;
-$outlined-token-slots: m2-outlined-button.get-token-slots();
-$protected-token-prefix: m2-protected-button.$prefix;
-$protected-token-slots: m2-protected-button.get-token-slots();
-$text-token-prefix: m2-text-button.$prefix;
-$text-token-slots: m2-text-button.get-token-slots();
-$tonal-token-prefix: m2-tonal-button.$prefix;
-$tonal-token-slots: m2-tonal-button.get-token-slots();
+@use './m2-button';
 
 .mat-mdc-button-base {
   text-decoration: none;
@@ -68,219 +53,194 @@ $tonal-token-slots: m2-tonal-button.get-token-slots();
   }
 }
 
-.mat-mdc-button {
-  @include token-utils.use-tokens($text-token-prefix, $text-token-slots) {
-    padding: 0 #{token-utils.slot(horizontal-padding, true)};
-  }
-
-  @include token-utils.use-tokens($text-token-prefix, $text-token-slots) {
-    height: token-utils.slot(container-height);
-    font-family: token-utils.slot(label-text-font);
-    font-size: token-utils.slot(label-text-size);
-    letter-spacing: token-utils.slot(label-text-tracking);
-    text-transform: token-utils.slot(label-text-transform);
-    font-weight: token-utils.slot(label-text-weight);
+@include token-utils.use-tokens(m2-button.$prefix, m2-button.get-token-slots()) {
+  .mat-mdc-button {
+    padding: 0 #{token-utils.slot(text-horizontal-padding, true)};
+    height: token-utils.slot(text-container-height);
+    font-family: token-utils.slot(text-label-text-font);
+    font-size: token-utils.slot(text-label-text-size);
+    letter-spacing: token-utils.slot(text-label-text-tracking);
+    text-transform: token-utils.slot(text-label-text-transform);
+    font-weight: token-utils.slot(text-label-text-weight);
 
     &, .mdc-button__ripple {
-      border-radius: token-utils.slot(container-shape);
+      border-radius: token-utils.slot(text-container-shape);
     }
 
     &:not(:disabled) {
-      color: token-utils.slot(label-text-color);
+      color: token-utils.slot(text-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 {
-      color: token-utils.slot(disabled-label-text-color);
+      color: token-utils.slot(text-disabled-label-text-color);
     }
-  }
-
-  @include button-base.mat-private-button-horizontal-layout(
-      $text-token-prefix, $text-token-slots, true);
-  @include button-base.mat-private-button-ripple(
-      $text-token-prefix, $text-token-slots);
-  @include button-base.mat-private-button-touch-target(
-      false, $text-token-prefix, $text-token-slots);
-}
-
-.mat-mdc-unelevated-button {
-  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
 
-  @include token-utils.use-tokens($filled-token-prefix, $filled-token-slots) {
-    height: token-utils.slot(container-height);
-    font-family: token-utils.slot(label-text-font);
-    font-size: token-utils.slot(label-text-size);
-    letter-spacing: token-utils.slot(label-text-tracking);
-    text-transform: token-utils.slot(label-text-transform);
-    font-weight: token-utils.slot(label-text-weight);
+    @include button-base.mat-private-button-horizontal-layout(
+        text-icon-spacing, text-icon-offset, text-with-icon-horizontal-padding);
+    @include button-base.mat-private-button-ripple(
+        text-ripple-color, text-state-layer-color, text-disabled-state-layer-color,
+        text-hover-state-layer-opacity, text-focus-state-layer-opacity,
+        text-pressed-state-layer-opacity);
+    @include button-base.mat-private-button-touch-target(false, text-touch-target-display);
   }
 
-  @include token-utils.use-tokens($filled-token-prefix, $filled-token-slots) {
-    padding: 0 #{token-utils.slot(horizontal-padding, true)};
-  }
-
-  @include button-base.mat-private-button-horizontal-layout(
-      $filled-token-prefix, $filled-token-slots, false);
-  @include button-base.mat-private-button-ripple(
-      $filled-token-prefix, $filled-token-slots);
-  @include button-base.mat-private-button-touch-target(
-      false, $filled-token-prefix, $filled-token-slots);
+  .mat-mdc-unelevated-button {
+    transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
+    height: token-utils.slot(filled-container-height);
+    font-family: token-utils.slot(filled-label-text-font);
+    font-size: token-utils.slot(filled-label-text-size);
+    letter-spacing: token-utils.slot(filled-label-text-tracking);
+    text-transform: token-utils.slot(filled-label-text-transform);
+    font-weight: token-utils.slot(filled-label-text-weight);
+    padding: 0 #{token-utils.slot(filled-horizontal-padding, true)};
+
+    @include button-base.mat-private-button-horizontal-layout(
+        filled-icon-spacing, filled-icon-offset);
+    @include button-base.mat-private-button-ripple(
+        filled-ripple-color, filled-state-layer-color, filled-disabled-state-layer-color,
+        filled-hover-state-layer-opacity, filled-focus-state-layer-opacity,
+        filled-pressed-state-layer-opacity);
+    @include button-base.mat-private-button-touch-target(false, filled-touch-target-display);
 
-  @include token-utils.use-tokens($filled-token-prefix, $filled-token-slots) {
     &:not(:disabled) {
-      color: token-utils.slot(label-text-color);
-      background-color: token-utils.slot(container-color);
+      color: token-utils.slot(filled-label-text-color);
+      background-color: token-utils.slot(filled-container-color);
     }
 
     &, .mdc-button__ripple {
-      border-radius: token-utils.slot(container-shape);
+      border-radius: token-utils.slot(filled-container-shape);
     }
 
     // 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 {
-      color: token-utils.slot(disabled-label-text-color);
-      background-color: token-utils.slot(disabled-container-color);
+      color: token-utils.slot(filled-disabled-label-text-color);
+      background-color: token-utils.slot(filled-disabled-container-color);
     }
   }
-}
-
-.mat-mdc-raised-button {
-  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
-
-  @include token-utils.use-tokens($protected-token-prefix, $protected-token-slots) {
-    @include button-base.mat-private-button-elevation(container-elevation);
-    height: token-utils.slot(container-height);
-    font-family: token-utils.slot(label-text-font);
-    font-size: token-utils.slot(label-text-size);
-    letter-spacing: token-utils.slot(label-text-tracking);
-    text-transform: token-utils.slot(label-text-transform);
-    font-weight: token-utils.slot(label-text-weight);
-  }
 
-  @include token-utils.use-tokens($protected-token-prefix, $protected-token-slots) {
-    padding: 0 #{token-utils.slot(horizontal-padding, true)};
-  }
-
-  @include button-base.mat-private-button-horizontal-layout(
-      $protected-token-prefix, $protected-token-slots, false);
-  @include button-base.mat-private-button-ripple(
-      $protected-token-prefix, $protected-token-slots);
-  @include button-base.mat-private-button-touch-target(
-      false, $protected-token-prefix, $protected-token-slots);
+  .mat-mdc-raised-button {
+    transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: token-utils.slot(protected-container-elevation-shadow);
+    height: token-utils.slot(protected-container-height);
+    font-family: token-utils.slot(protected-label-text-font);
+    font-size: token-utils.slot(protected-label-text-size);
+    letter-spacing: token-utils.slot(protected-label-text-tracking);
+    text-transform: token-utils.slot(protected-label-text-transform);
+    font-weight: token-utils.slot(protected-label-text-weight);
+    padding: 0 #{token-utils.slot(protected-horizontal-padding, true)};
+
+    @include button-base.mat-private-button-horizontal-layout(
+        protected-icon-spacing, protected-icon-offset);
+    @include button-base.mat-private-button-ripple(
+        protected-ripple-color, protected-state-layer-color, protected-disabled-state-layer-color,
+        protected-hover-state-layer-opacity, protected-focus-state-layer-opacity,
+        protected-pressed-state-layer-opacity);
+    @include button-base.mat-private-button-touch-target(false, protected-touch-target-display);
 
-  @include token-utils.use-tokens($protected-token-prefix, $protected-token-slots) {
     &:not(:disabled) {
-      color: token-utils.slot(label-text-color);
-      background-color: token-utils.slot(container-color);
+      color: token-utils.slot(protected-label-text-color);
+      background-color: token-utils.slot(protected-container-color);
     }
 
     &, .mdc-button__ripple {
-      border-radius: token-utils.slot(container-shape);
+      border-radius: token-utils.slot(protected-container-shape);
     }
 
     &:hover {
-      @include button-base.mat-private-button-elevation(hover-container-elevation);
+      box-shadow: token-utils.slot(protected-hover-container-elevation-shadow);
     }
 
     &:focus {
-      @include button-base.mat-private-button-elevation(focus-container-elevation);
+      box-shadow: token-utils.slot(protected-focus-container-elevation-shadow);
     }
 
     &:active, &:focus:active {
-      @include button-base.mat-private-button-elevation(pressed-container-elevation);
+      box-shadow: token-utils.slot(protected-pressed-container-elevation-shadow);
     }
 
     // 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 {
-      color: token-utils.slot(disabled-label-text-color);
-      background-color: token-utils.slot(disabled-container-color);
+      color: token-utils.slot(protected-disabled-label-text-color);
+      background-color: token-utils.slot(protected-disabled-container-color);
 
       &.mat-mdc-button-disabled {
-        @include button-base.mat-private-button-elevation(disabled-container-elevation);
+        box-shadow: token-utils.slot(protected-disabled-container-elevation-shadow);
       }
     }
   }
-}
-
-.mat-mdc-outlined-button {
-  border-style: solid;
-  transition: border 280ms cubic-bezier(0.4, 0, 0.2, 1);
-
-  @include token-utils.use-tokens($outlined-token-prefix, $outlined-token-slots) {
-    height: token-utils.slot(container-height);
-    font-family: token-utils.slot(label-text-font);
-    font-size: token-utils.slot(label-text-size);
-    letter-spacing: token-utils.slot(label-text-tracking);
-    text-transform: token-utils.slot(label-text-transform);
-    font-weight: token-utils.slot(label-text-weight);
-    border-radius: token-utils.slot(container-shape);
-    border-width: token-utils.slot(outline-width);
-  }
-
-  @include token-utils.use-tokens($outlined-token-prefix, $outlined-token-slots) {
-    padding: 0 #{token-utils.slot(horizontal-padding, true)};
-  }
 
-  @include button-base.mat-private-button-horizontal-layout(
-      $outlined-token-prefix, $outlined-token-slots, false);
-  @include button-base.mat-private-button-ripple(
-      $outlined-token-prefix, $outlined-token-slots);
-  @include button-base.mat-private-button-touch-target(
-      false, $outlined-token-prefix, $outlined-token-slots);
+  .mat-mdc-outlined-button {
+    border-style: solid;
+    transition: border 280ms cubic-bezier(0.4, 0, 0.2, 1);
+    height: token-utils.slot(outlined-container-height);
+    font-family: token-utils.slot(outlined-label-text-font);
+    font-size: token-utils.slot(outlined-label-text-size);
+    letter-spacing: token-utils.slot(outlined-label-text-tracking);
+    text-transform: token-utils.slot(outlined-label-text-transform);
+    font-weight: token-utils.slot(outlined-label-text-weight);
+    border-radius: token-utils.slot(outlined-container-shape);
+    border-width: token-utils.slot(outlined-outline-width);
+    padding: 0 #{token-utils.slot(outlined-horizontal-padding, true)};
+
+    @include button-base.mat-private-button-horizontal-layout(
+        outlined-icon-spacing, outlined-icon-offset);
+    @include button-base.mat-private-button-ripple(
+        outlined-ripple-color, outlined-state-layer-color, outlined-disabled-state-layer-color,
+        outlined-hover-state-layer-opacity, outlined-focus-state-layer-opacity,
+        outlined-pressed-state-layer-opacity);
+    @include button-base.mat-private-button-touch-target(false, outlined-touch-target-display);
 
-  @include token-utils.use-tokens($outlined-token-prefix, $outlined-token-slots) {
     &:not(:disabled) {
-      color: token-utils.slot(label-text-color);
-      border-color: token-utils.slot(outline-color);
+      color: token-utils.slot(outlined-label-text-color);
+      border-color: token-utils.slot(outlined-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 {
-      color: token-utils.slot(disabled-label-text-color);
-      border-color: token-utils.slot(disabled-outline-color);
+      color: token-utils.slot(outlined-disabled-label-text-color);
+      border-color: token-utils.slot(outlined-disabled-outline-color);
     }
   }
-}
-
-.mat-tonal-button {
-  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
 
-  @include token-utils.use-tokens($tonal-token-prefix, $tonal-token-slots) {
-    height: token-utils.slot(container-height);
-    font-family: token-utils.slot(label-text-font);
-    font-size: token-utils.slot(label-text-size);
-    letter-spacing: token-utils.slot(label-text-tracking);
-    text-transform: token-utils.slot(label-text-transform);
-    font-weight: token-utils.slot(label-text-weight);
-    padding: 0 #{token-utils.slot(horizontal-padding, true)};
+  .mat-tonal-button {
+    transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
+    height: token-utils.slot(tonal-container-height);
+    font-family: token-utils.slot(tonal-label-text-font);
+    font-size: token-utils.slot(tonal-label-text-size);
+    letter-spacing: token-utils.slot(tonal-label-text-tracking);
+    text-transform: token-utils.slot(tonal-label-text-transform);
+    font-weight: token-utils.slot(tonal-label-text-weight);
+    padding: 0 #{token-utils.slot(tonal-horizontal-padding, true)};
 
     &:not(:disabled) {
-      color: token-utils.slot(label-text-color);
-      background-color: token-utils.slot(container-color);
+      color: token-utils.slot(tonal-label-text-color);
+      background-color: token-utils.slot(tonal-container-color);
     }
 
     &, .mdc-button__ripple {
-      border-radius: token-utils.slot(container-shape);
+      border-radius: token-utils.slot(tonal-container-shape);
     }
 
     // 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 {
-      color: token-utils.slot(disabled-label-text-color);
-      background-color: token-utils.slot(disabled-container-color);
+      color: token-utils.slot(tonal-disabled-label-text-color);
+      background-color: token-utils.slot(tonal-disabled-container-color);
     }
-  }
 
-  @include button-base.mat-private-button-horizontal-layout(
-      $tonal-token-prefix, $tonal-token-slots, false);
-  @include button-base.mat-private-button-ripple(
-      $tonal-token-prefix, $tonal-token-slots);
-  @include button-base.mat-private-button-touch-target(
-      false, $tonal-token-prefix, $tonal-token-slots);
+    @include button-base.mat-private-button-horizontal-layout(
+        tonal-icon-spacing, tonal-icon-offset);
+    @include button-base.mat-private-button-ripple(
+        tonal-ripple-color, tonal-state-layer-color, tonal-disabled-state-layer-color,
+        tonal-hover-state-layer-opacity, tonal-focus-state-layer-opacity,
+        tonal-pressed-state-layer-opacity);
+    @include button-base.mat-private-button-touch-target(false, tonal-touch-target-display);
+  }
 }
 
 .mat-mdc-button,
diff --git a/src/material/button/fab.scss b/src/material/button/fab.scss
index 64cce92d3e6c..8da19ef2230e 100644
--- a/src/material/button/fab.scss
+++ b/src/material/button/fab.scss
@@ -3,16 +3,7 @@
 @use '../core/style/private' as style-private;
 @use '../core/style/vendor-prefixes';
 @use '../core/focus-indicators/private' as focus-indicators-private;
-@use './m2-extended-fab';
 @use './m2-fab';
-@use './m2-fab-small';
-
-$extended-fab-token-prefix: m2-extended-fab.$prefix;
-$extended-fab-token-slots: m2-extended-fab.get-token-slots();
-$fab-token-prefix: m2-fab.$prefix;
-$fab-token-slots: m2-fab.get-token-slots();
-$fab-small-token-prefix: m2-fab-small.$prefix;
-$fab-small-token-slots: m2-fab-small.get-token-slots();
 
 .mat-mdc-fab-base {
   @include vendor-prefixes.user-select(none);
@@ -101,8 +92,11 @@ $fab-small-token-slots: m2-fab-small.get-token-slots();
   }
 }
 
-@mixin _fab-elevation($mat-tokens) {
-  @include token-utils.use-tokens($mat-tokens...) {
+@include token-utils.use-tokens(m2-fab.$prefix, m2-fab.get-token-slots()) {
+  .mat-mdc-fab {
+    background-color: token-utils.slot(container-color);
+    border-radius: token-utils.slot(container-shape);
+    color: token-utils.slot(foreground-color, inherit);
     box-shadow: token-utils.slot(container-elevation-shadow);
 
     &:hover {
@@ -116,100 +110,111 @@ $fab-small-token-slots: m2-fab-small.get-token-slots();
     &:active, &:focus:active {
       box-shadow: token-utils.slot(pressed-container-elevation-shadow);
     }
-  }
-}
 
-@mixin _fab-structure($mat-tokens) {
-  @include token-utils.use-tokens($mat-tokens...) {
-    background-color: token-utils.slot(container-color);
-    border-radius: token-utils.slot(container-shape);
-  }
+    @include button-base.mat-private-button-disabled {
+      color: token-utils.slot(disabled-state-foreground-color);
+      background-color: token-utils.slot(disabled-state-container-color);
+    }
 
-  @include token-utils.use-tokens($mat-tokens...) {
-    color: token-utils.slot(foreground-color, inherit);
+    @include button-base.mat-private-button-touch-target(true, touch-target-display);
+    @include button-base.mat-private-button-ripple(ripple-color, state-layer-color,
+      disabled-state-layer-color, hover-state-layer-opacity, focus-state-layer-opacity,
+      pressed-state-layer-opacity);
   }
 
-  @include _fab-elevation($mat-tokens);
+  .mat-mdc-mini-fab {
+    width: 40px;
+    height: 40px;
+    background-color: token-utils.slot(small-container-color);
+    border-radius: token-utils.slot(small-container-shape);
+    color: token-utils.slot(small-foreground-color, inherit);
+    box-shadow: token-utils.slot(small-container-elevation-shadow);
 
-  @include button-base.mat-private-button-disabled {
-    @include token-utils.use-tokens($mat-tokens...) {
-      color: token-utils.slot(disabled-state-foreground-color);
-      background-color: token-utils.slot(disabled-state-container-color);
+    &:hover {
+      box-shadow: token-utils.slot(small-hover-container-elevation-shadow);
     }
-  }
 
-  @include button-base.mat-private-button-touch-target(true, $mat-tokens...);
-  @include button-base.mat-private-button-ripple($mat-tokens...);
-}
+    &:focus {
+      box-shadow: token-utils.slot(small-focus-container-elevation-shadow);
+    }
 
-.mat-mdc-fab {
-  @include _fab-structure(($fab-token-prefix, $fab-token-slots));
-}
+    &:active, &:focus:active {
+      box-shadow: token-utils.slot(small-pressed-container-elevation-shadow);
+    }
 
-.mat-mdc-mini-fab {
-  width: 40px;
-  height: 40px;
+    @include button-base.mat-private-button-disabled {
+      color: token-utils.slot(small-disabled-state-foreground-color);
+      background-color: token-utils.slot(small-disabled-state-container-color);
+    }
 
-  @include _fab-structure(($fab-small-token-prefix, $fab-small-token-slots));
-}
+    @include button-base.mat-private-button-touch-target(true, small-touch-target-display);
+    @include button-base.mat-private-button-ripple(small-ripple-color, small-state-layer-color,
+      small-disabled-state-layer-color, small-hover-state-layer-opacity,
+      small-focus-state-layer-opacity, small-pressed-state-layer-opacity);
+  }
+
+  .mat-mdc-extended-fab {
+    // Before tokens MDC included the font smoothing automatically, but with
+    // tokens it doesn't. We add it since it can cause tiny differences in
+    // screenshot tests and it generally looks better.
+    @include vendor-prefixes.smooth-font();
+    padding-left: 20px;
+    padding-right: 20px;
+    width: auto;
+    max-width: 100%;
+    line-height: normal;
+    box-shadow: token-utils.slot(extended-container-elevation-shadow);
+    height: token-utils.slot(extended-container-height);
+    border-radius: token-utils.slot(extended-container-shape);
+    font-family: token-utils.slot(extended-label-text-font);
+    font-size: token-utils.slot(extended-label-text-size);
+    font-weight: token-utils.slot(extended-label-text-weight);
+    letter-spacing: token-utils.slot(extended-label-text-tracking);
 
-.mat-mdc-extended-fab {
-  $mat-tokens: ($extended-fab-token-prefix, $extended-fab-token-slots);
-
-  // Before tokens MDC included the font smoothing automatically, but with
-  // tokens it doesn't. We add it since it can cause tiny differences in
-  // screenshot tests and it generally looks better.
-  @include vendor-prefixes.smooth-font();
-  border-radius: 24px;
-  padding-left: 20px;
-  padding-right: 20px;
-  width: auto;
-  max-width: 100%;
-  line-height: normal;
-
-  @include token-utils.use-tokens($mat-tokens...) {
-    height: token-utils.slot(container-height);
-    border-radius: token-utils.slot(container-shape);
-    font-family: token-utils.slot(label-text-font);
-    font-size: token-utils.slot(label-text-size);
-    font-weight: token-utils.slot(label-text-weight);
-    letter-spacing: token-utils.slot(label-text-tracking);
-  }
+    &:hover {
+      box-shadow: token-utils.slot(extended-hover-container-elevation-shadow);
+    }
 
-  @include _fab-elevation($mat-tokens);
+    &:focus {
+      box-shadow: token-utils.slot(extended-focus-container-elevation-shadow);
+    }
 
-  @include button-base.mat-private-button-disabled {
-    // Necessary for interactive disabled buttons.
-    &, &:focus {
-      box-shadow: none;
+    &:active, &:focus:active {
+      box-shadow: token-utils.slot(extended-pressed-container-elevation-shadow);
     }
-  }
 
-  // stylelint-disable selector-class-pattern
-  // For Extended FAB with text label followed by icon.
-  // We are checking for the a button class because white this is a FAB it
-  // uses the same template as button.
-  [dir='rtl'] & .mdc-button__label + .mat-icon,
-  [dir='rtl'] & .mdc-button__label + .material-icons,
-  > .mat-icon,
-  > .material-icons {
-    margin-left: -8px;
-    margin-right: 12px;
-  }
+    @include button-base.mat-private-button-disabled {
+      // Necessary for interactive disabled buttons.
+      &, &:focus {
+        box-shadow: none;
+      }
+    }
 
-  .mdc-button__label + .mat-icon,
-  .mdc-button__label + .material-icons,
-  [dir='rtl'] & > .mat-icon,
-  [dir='rtl'] & > .material-icons {
-    margin-left: 12px;
-    margin-right: -8px;
-  }
-  // stylelint-enable selector-class-pattern
+    // stylelint-disable selector-class-pattern
+    // For Extended FAB with text label followed by icon.
+    // We are checking for the a button class because white this is a FAB it
+    // uses the same template as button.
+    [dir='rtl'] & .mdc-button__label + .mat-icon,
+    [dir='rtl'] & .mdc-button__label + .material-icons,
+    > .mat-icon,
+    > .material-icons {
+      margin-left: -8px;
+      margin-right: 12px;
+    }
 
-  // All FABs are square except the extended ones so we
-  // need to set the touch target back to full-width.
-  .mat-mdc-button-touch-target {
-    width: 100%;
+    .mdc-button__label + .mat-icon,
+    .mdc-button__label + .material-icons,
+    [dir='rtl'] & > .mat-icon,
+    [dir='rtl'] & > .material-icons {
+      margin-left: 12px;
+      margin-right: -8px;
+    }
+    // stylelint-enable selector-class-pattern
+
+    // All FABs are square except the extended ones so we
+    // need to set the touch target back to full-width.
+    .mat-mdc-button-touch-target {
+      width: 100%;
+    }
   }
 }
-
diff --git a/src/material/button/icon-button.scss b/src/material/button/icon-button.scss
index 62aa6400c711..08cac53d494c 100644
--- a/src/material/button/icon-button.scss
+++ b/src/material/button/icon-button.scss
@@ -7,31 +7,30 @@
 $token-prefix: m2-icon-button.$prefix;
 $token-slots: m2-icon-button.get-token-slots();
 
-.mat-mdc-icon-button {
-  @include vendor-prefixes.user-select(none);
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  border: none;
-  outline: none;
-  background-color: transparent;
-  fill: currentColor;
-  color: inherit;
-  text-decoration: none;
-  cursor: pointer;
-  z-index: 0;
-  overflow: visible;
+@include token-utils.use-tokens($token-prefix, $token-slots) {
+  .mat-mdc-icon-button {
+    @include vendor-prefixes.user-select(none);
+    display: inline-block;
+    position: relative;
+    box-sizing: border-box;
+    border: none;
+    outline: none;
+    background-color: transparent;
+    fill: currentColor;
+    text-decoration: none;
+    cursor: pointer;
+    z-index: 0;
+    overflow: visible;
 
-  // Border radius is inherited by ripple to know its shape. Set to 50% so the ripple is round.
-  border-radius: 50%;
+    // Border radius is inherited by ripple to know its shape. Set to 50% so the ripple is round.
+    border-radius: 50%;
 
-  // Prevent the button from shrinking since it's always supposed to be a circle.
-  flex-shrink: 0;
+    // Prevent the button from shrinking since it's always supposed to be a circle.
+    flex-shrink: 0;
 
-  // Ensure the icons are centered.
-  text-align: center;
+    // Ensure the icons are centered.
+    text-align: center;
 
-  @include token-utils.use-tokens($token-prefix, $token-slots) {
     $button-size: token-utils.slot(state-layer-size, $fallback: 48px);
     $icon-size: token-utils.slot(icon-size, $fallback: 24px);
 
@@ -48,18 +47,18 @@ $token-slots: m2-icon-button.get-token-slots();
     // the unused `.mdc-button__icon` class. Explicitly set the font-size here.
     font-size: token-utils.slot(icon-size);
     color: token-utils.slot(icon-color);
-  }
 
-  @include button-base.mat-private-button-interactive();
-  @include button-base.mat-private-button-ripple($token-prefix, $token-slots);
-  @include button-base.mat-private-button-touch-target(
-      true, $token-prefix, $token-slots);
-  @include private.private-animation-noop();
+    @include button-base.mat-private-button-interactive();
+    @include button-base.mat-private-button-ripple(
+        ripple-color, state-layer-color, disabled-state-layer-color,
+        hover-state-layer-opacity, focus-state-layer-opacity, pressed-state-layer-opacity);
+    @include button-base.mat-private-button-touch-target(true, touch-target-display);
+    @include private.private-animation-noop();
 
-  @include token-utils.use-tokens($token-prefix, $token-slots) {
     @include button-base.mat-private-button-disabled {
       color: token-utils.slot(disabled-icon-color);
-    };
+    }
+  ;
 
     img,
     svg {
@@ -67,26 +66,26 @@ $token-slots: m2-icon-button.get-token-slots();
       height: token-utils.slot(icon-size);
       vertical-align: baseline;
     }
-  }
 
-  .mat-mdc-button-persistent-ripple {
-    border-radius: 50%;
-  }
+    .mat-mdc-button-persistent-ripple {
+      border-radius: 50%;
+    }
 
-  // MDC used to include this and it seems like a lot of apps depend on it.
-  &[hidden] {
-    display: none;
-  }
+    // MDC used to include this and it seems like a lot of apps depend on it.
+    &[hidden] {
+      display: none;
+    }
 
-  // MDC adds some styles to icon buttons that conflict with some of our focus indicator styles
-  // and don't actually do anything. This undoes those conflicting styles.
-  &.mat-unthemed,
-  &.mat-primary,
-  &.mat-accent,
-  &.mat-warn {
-    &:not(.mdc-ripple-upgraded):focus::before {
-      background: transparent;
-      opacity: 1;
+    // MDC adds some styles to icon buttons that conflict with some of our focus indicator styles
+    // and don't actually do anything. This undoes those conflicting styles.
+    &.mat-unthemed,
+    &.mat-primary,
+    &.mat-accent,
+    &.mat-warn {
+      &:not(.mdc-ripple-upgraded):focus::before {
+        background: transparent;
+        opacity: 1;
+      }
     }
   }
 }
diff --git a/src/material/card/BUILD.bazel b/src/material/card/BUILD.bazel
index fd7d3646dc55..1301cd68e52e 100644
--- a/src/material/card/BUILD.bazel
+++ b/src/material/card/BUILD.bazel
@@ -14,8 +14,6 @@ sass_library(
     name = "m3",
     srcs = [
         "_m3-card.scss",
-        "_m3-elevated-card.scss",
-        "_m3-outlined-card.scss",
     ],
     deps = [
         "//src/material/core/style:sass_utils",
@@ -27,8 +25,6 @@ sass_library(
     name = "m2",
     srcs = [
         "_m2-card.scss",
-        "_m2-elevated-card.scss",
-        "_m2-outlined-card.scss",
     ],
     deps = [
         "//src/material/core/style:elevation",
diff --git a/src/material/card/_card-theme.scss b/src/material/card/_card-theme.scss
index 2f1650bc856a..76551e5f7a4a 100644
--- a/src/material/card/_card-theme.scss
+++ b/src/material/card/_card-theme.scss
@@ -6,22 +6,12 @@
 @use '../core/typography/typography';
 @use '../core/tokens/token-utils';
 @use './m2-card';
-@use './m2-elevated-card';
-@use './m2-outlined-card';
 
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-elevated-card.$prefix,
-        m2-elevated-card.get-unthemable-tokens()
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-outlined-card.$prefix,
-        m2-outlined-card.get-unthemable-tokens()
-      );
       @include token-utils.create-token-values-mixed(
         m2-card.$prefix,
         m2-card.get-unthemable-tokens()
@@ -35,14 +25,6 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-elevated-card.$prefix,
-        m2-elevated-card.get-color-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-outlined-card.$prefix,
-        m2-outlined-card.get-color-tokens($theme)
-      );
       @include token-utils.create-token-values-mixed(
         m2-card.$prefix,
         m2-card.get-color-tokens($theme)
@@ -56,14 +38,6 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-elevated-card.$prefix,
-        m2-elevated-card.get-typography-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-outlined-card.$prefix,
-        m2-outlined-card.get-typography-tokens($theme)
-      );
       @include token-utils.create-token-values-mixed(
         m2-card.$prefix,
         m2-card.get-typography-tokens($theme)
@@ -77,14 +51,6 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-elevated-card.$prefix,
-        m2-elevated-card.get-density-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-outlined-card.$prefix,
-        m2-outlined-card.get-density-tokens($theme)
-      );
       @include token-utils.create-token-values-mixed(
         m2-card.$prefix,
         m2-card.get-density-tokens($theme)
@@ -100,16 +66,6 @@
       namespace: m2-card.$prefix,
       tokens: m2-card.get-token-slots(),
     ),
-    (
-      namespace: m2-elevated-card.$prefix,
-      tokens: m2-elevated-card.get-token-slots(),
-      prefix: 'elevated-',
-    ),
-    (
-      namespace: m2-outlined-card.$prefix,
-      tokens: m2-outlined-card.get-token-slots(),
-      prefix: 'outlined-',
-    ),
   );
 }
 
@@ -141,14 +97,6 @@
     'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
   );
   @if ($tokens != ()) {
-    @include token-utils.create-token-values(
-      m2-elevated-card.$prefix,
-      map.get($tokens, m2-elevated-card.$prefix)
-    );
-    @include token-utils.create-token-values(
-      m2-outlined-card.$prefix,
-      map.get($tokens, m2-outlined-card.$prefix)
-    );
     @include token-utils.create-token-values(
       m2-card.$prefix,
       map.get($tokens, m2-card.$prefix)
diff --git a/src/material/card/_m2-card.scss b/src/material/card/_m2-card.scss
index 9af2b87d729c..df731eaecbb2 100644
--- a/src/material/card/_m2-card.scss
+++ b/src/material/card/_m2-card.scss
@@ -1,6 +1,7 @@
 @use '../core/tokens/m2-utils';
 @use '../core/theming/inspection';
 @use '../core/style/sass-utils';
+@use '../core/style/elevation';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, card);
@@ -8,12 +9,21 @@ $prefix: (mat, card);
 // 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 ();
+  @return (
+    elevated-container-shape: 4px,
+    outlined-container-shape: 4px,
+    outlined-outline-width: 1px,
+  );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return (
+    elevated-container-color: inspection.get-theme-color($theme, background, card),
+    elevated-container-elevation: elevation.get-box-shadow(1),
+    outlined-container-color: inspection.get-theme-color($theme, background, card),
+    outlined-container-elevation: elevation.get-box-shadow(0),
+    outlined-outline-color: rgba(inspection.get-theme-color($theme, foreground, base), 0.12),
     subtitle-text-color: inspection.get-theme-color($theme, foreground, secondary-text),
   );
 }
diff --git a/src/material/card/_m2-elevated-card.scss b/src/material/card/_m2-elevated-card.scss
deleted file mode 100644
index ae4c8f04d15f..000000000000
--- a/src/material/card/_m2-elevated-card.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-@use '../core/theming/inspection';
-@use '../core/style/elevation';
-@use '../core/style/sass-utils';
-@use '../core/tokens/m2-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, card-elevated);
-
-// Tokens that can't be configured through Angular Material's current theming API,
-// but may be in a future version of the theming API.
-//
-// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
-// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
-// our CSS.
-@function get-unthemable-tokens() {
-  @return (
-    container-shape: 4px,
-  );
-}
-
-// Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme) {
-  $elevation: inspection.get-theme-color($theme, foreground, elevation);
-
-  @return (
-    // The background color of the card.
-    container-color: inspection.get-theme-color($theme, background, card),
-    container-elevation: elevation.get-box-shadow(1),
-  );
-}
-
-// 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(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}
diff --git a/src/material/card/_m2-outlined-card.scss b/src/material/card/_m2-outlined-card.scss
deleted file mode 100644
index 367bc86c873e..000000000000
--- a/src/material/card/_m2-outlined-card.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-@use '../core/style/elevation';
-@use '../core/theming/inspection';
-@use '../core/style/sass-utils';
-@use '../core/tokens/m2-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, card-outlined);
-
-// Tokens that can't be configured through Angular Material's current theming API,
-// but may be in a future version of the theming API.
-//
-// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
-// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
-// our CSS.
-@function get-unthemable-tokens() {
-  @return (
-    container-shape: 4px,
-    outline-width: 1px,
-  );
-}
-
-// Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme) {
-  $elevation: inspection.get-theme-color($theme, foreground, elevation);
-
-  @return (
-    container-color: inspection.get-theme-color($theme, background, card),
-    outline-color: rgba(inspection.get-theme-color($theme, foreground, base), 0.12),
-    container-elevation: elevation.get-box-shadow(0),
-  );
-}
-
-// 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(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}
diff --git a/src/material/card/_m3-card.scss b/src/material/card/_m3-card.scss
index 6c70320253cc..591b3773f0a5 100644
--- a/src/material/card/_m3-card.scss
+++ b/src/material/card/_m3-card.scss
@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../core/style/sass-utils';
 @use '../core/tokens/m3-utils';
+@use '../core/style/elevation';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, card);
@@ -15,10 +16,30 @@ $prefix: (mat, card);
     m3-utils.generate-typography-tokens($systems, title-text, title-large),
     m3-utils.generate-typography-tokens($systems, subtitle-text, title-medium),
     (
-      subtitle-text-color: map.get($systems, md-sys-color, on-surface)
-    )
+      subtitle-text-color: map.get($systems, md-sys-color, on-surface),
+      elevated-container-color: map.get($systems, md-sys-color, surface-container-low),
+      elevated-container-elevation: map.get($systems, md-sys-elevation, level1),
+      elevated-container-shape: map.get($systems, md-sys-shape, corner-medium),
+      outlined-container-color: map.get($systems, md-sys-color, surface),
+      outlined-container-elevation: map.get($systems, md-sys-elevation, level0),
+      outlined-container-shape: map.get($systems, md-sys-shape, corner-medium),
+      outlined-outline-color: map.get($systems, md-sys-color, outline-variant),
+      outlined-outline-width: if($exclude-hardcoded, null, 1px),
+    ),
   );
 
+  $elevated-elevation: map.get($tokens, elevated-container-elevation);
+  @if ($elevated-elevation != null) {
+    $tokens: map.set($tokens, elevated-container-elevation,
+        elevation.get-box-shadow($elevated-elevation));
+  }
+
+  $outlined-elevation: map.get($tokens, outlined-container-elevation);
+  @if ($outlined-elevation != null) {
+    $tokens: map.set($tokens, outlined-container-elevation,
+        elevation.get-box-shadow($outlined-elevation));
+  }
+
   @return m3-utils.namespace($prefix, $tokens, $token-slots);
 }
 
diff --git a/src/material/card/_m3-elevated-card.scss b/src/material/card/_m3-elevated-card.scss
deleted file mode 100644
index d5dc861d67f5..000000000000
--- a/src/material/card/_m3-elevated-card.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-@use 'sass:map';
-@use '../core/style/elevation';
-@use '../core/tokens/m3-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, card-elevated);
-
-/// Generates the tokens for MDC elevated-card
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @param {Map} $token-slots Possible token slots
-/// @return {Map} A set of tokens for the MDC elevated-card
-@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: (
-    container-color: map.get($systems, md-sys-color, surface-container-low),
-    container-elevation: map.get($systems, md-sys-elevation, level1),
-    container-shape: map.get($systems, md-sys-shape, corner-medium),
-  );
-
-  $elevation: map.get($tokens, container-elevation);
-
-  @if ($elevation != null) {
-    $tokens: map.set($tokens, container-elevation, elevation.get-box-shadow($elevation));
-  }
-
-  @return m3-utils.namespace($prefix, $tokens, $token-slots);
-}
diff --git a/src/material/card/_m3-outlined-card.scss b/src/material/card/_m3-outlined-card.scss
deleted file mode 100644
index 2db393ab4aae..000000000000
--- a/src/material/card/_m3-outlined-card.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-@use 'sass:map';
-@use '../core/style/elevation';
-@use '../core/tokens/m3-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, card-outlined);
-
-/// Generates the tokens for MDC outlined-card
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @param {Map} $token-slots Possible token slots
-/// @return {Map} A set of tokens for the MDC outlined-card
-@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: (
-    container-color: map.get($systems, md-sys-color, surface),
-    container-elevation: map.get($systems, md-sys-elevation, level0),
-    container-shape: map.get($systems, md-sys-shape, corner-medium),
-    outline-color: map.get($systems, md-sys-color, outline-variant),
-    outline-width: if($exclude-hardcoded, null, 1px),
-  );
-  $elevation: map.get($tokens, container-elevation);
-
-  @if ($elevation != null) {
-    $tokens: map.set($tokens, container-elevation, elevation.get-box-shadow($elevation));
-  }
-
-  @return m3-utils.namespace($prefix, $tokens, $token-slots);
-}
diff --git a/src/material/card/card.scss b/src/material/card/card.scss
index 477b9cc95683..fa60961bb0dd 100644
--- a/src/material/card/card.scss
+++ b/src/material/card/card.scss
@@ -1,7 +1,5 @@
 @use '../core/tokens/token-utils';
 @use './m2-card';
-@use './m2-elevated-card';
-@use './m2-outlined-card';
 
 // Size of the `mat-card-header` region custom to Angular Material.
 $mat-card-header-size: 40px !default;
@@ -9,56 +7,47 @@ $mat-card-header-size: 40px !default;
 // Default padding for text content within a card.
 $mat-card-default-padding: 16px !default;
 
-.mat-mdc-card {
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  position: relative;
-  border-style: solid;
-  border-width: 0;
-
-  @include token-utils.use-tokens(
-      m2-elevated-card.$prefix, m2-elevated-card.get-token-slots()) {
-    background-color: token-utils.slot(container-color);
-    border-color: token-utils.slot(container-color);
-    border-radius: token-utils.slot(container-shape);
-    box-shadow: token-utils.slot(container-elevation);
-  }
-
-  // Transparent card border for high-contrast mode.
-  &::after {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border: solid 1px transparent;
-    content: '';
-    display: block;
-    pointer-events: none;
+@include token-utils.use-tokens(m2-card.$prefix, m2-card.get-token-slots()) {
+  .mat-mdc-card {
+    display: flex;
+    flex-direction: column;
     box-sizing: border-box;
-
-    @include token-utils.use-tokens(
-        m2-elevated-card.$prefix, m2-elevated-card.get-token-slots()) {
-      border-radius: token-utils.slot(container-shape);
+    position: relative;
+    border-style: solid;
+    border-width: 0;
+    background-color: token-utils.slot(elevated-container-color);
+    border-color: token-utils.slot(elevated-container-color);
+    border-radius: token-utils.slot(elevated-container-shape);
+    box-shadow: token-utils.slot(elevated-container-elevation);
+
+    // Transparent card border for high-contrast mode.
+    &::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border: solid 1px transparent;
+      content: '';
+      display: block;
+      pointer-events: none;
+      box-sizing: border-box;
+      border-radius: token-utils.slot(elevated-container-shape);
     }
   }
-}
-
-.mat-mdc-card-outlined {
-  @include token-utils.use-tokens(
-      m2-outlined-card.$prefix, m2-outlined-card.get-token-slots()) {
-    background-color: token-utils.slot(container-color);
-    border-radius: token-utils.slot(container-shape);
-    border-width: token-utils.slot(outline-width);
-    border-color: token-utils.slot(outline-color);
-    box-shadow: token-utils.slot(container-elevation);
-  }
 
-  // Outlined card already displays border in high-contrast mode.
-  // Overwriting styles set above to remove a duplicate border.
-  &::after {
-    border: none;
+  .mat-mdc-card-outlined {
+    background-color: token-utils.slot(outlined-container-color);
+    border-radius: token-utils.slot(outlined-container-shape);
+    border-width: token-utils.slot(outlined-outline-width);
+    border-color: token-utils.slot(outlined-outline-color);
+    box-shadow: token-utils.slot(outlined-container-elevation);
+
+    // Outlined card already displays border in high-contrast mode.
+    // Overwriting styles set above to remove a duplicate border.
+    &::after {
+      border: none;
+    }
   }
 }
 
diff --git a/src/material/core/_core-theme.scss b/src/material/core/_core-theme.scss
index ac74341a79ac..2f425744ea24 100644
--- a/src/material/core/_core-theme.scss
+++ b/src/material/core/_core-theme.scss
@@ -12,8 +12,7 @@
 @use 'ripple/m2-ripple';
 @use 'option/m2-option';
 @use 'option/m2-optgroup';
-@use 'selection/pseudo-checkbox/m2-full-pseudo-checkbox';
-@use 'selection/pseudo-checkbox/m2-minimal-pseudo-checkbox';
+@use 'selection/pseudo-checkbox/m2-pseudo-checkbox';
 
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
@@ -72,8 +71,7 @@
   $ripple-tokens: m2-ripple.get-token-slots();
   $option-tokens: m2-option.get-token-slots();
   $optgroup-tokens: m2-optgroup.get-token-slots();
-  $full-pseudo-checkbox-tokens: m2-full-pseudo-checkbox.get-token-slots();
-  $minimal-pseudo-checkbox-tokens: m2-minimal-pseudo-checkbox.get-token-slots();
+  $pseudo-checkbox-tokens: m2-pseudo-checkbox.get-token-slots();
 
   @return (
     (namespace: m2-app.$prefix, tokens: $app-tokens, prefix: 'app-'),
@@ -81,15 +79,10 @@
     (namespace: m2-option.$prefix, tokens: $option-tokens, prefix: 'option-'),
     (namespace: m2-optgroup.$prefix, tokens: $optgroup-tokens, prefix: 'optgroup-'),
     (
-      namespace: m2-full-pseudo-checkbox.$prefix,
-      tokens: $full-pseudo-checkbox-tokens,
-      prefix: 'pseudo-checkbox-full-'
+      namespace: m2-pseudo-checkbox.$prefix,
+      tokens: m2-pseudo-checkbox.get-token-slots(),
+      prefix: 'pseudo-checkbox-'
     ),
-    (
-      namespace: m2-minimal-pseudo-checkbox.$prefix,
-      tokens: $minimal-pseudo-checkbox-tokens,
-      prefix: 'pseudo-checkbox-minimal-'
-    )
   );
 }
 
@@ -132,14 +125,9 @@
     m2-optgroup.$prefix,
     $options...
   );
-  $mat-full-pseudo-checkbox-tokens: token-utils.get-tokens-for(
-    $tokens,
-    m2-full-pseudo-checkbox.$prefix,
-    $options...
-  );
-  $mat-minimal-pseudo-checkbox-tokens: token-utils.get-tokens-for(
+  $mat-pseudo-checkbox-tokens: token-utils.get-tokens-for(
     $tokens,
-    m2-minimal-pseudo-checkbox.$prefix,
+    m2-pseudo-checkbox.$prefix,
     $options...
   );
 
@@ -148,11 +136,7 @@
   @include token-utils.create-token-values(m2-option.$prefix, $mat-option-tokens);
   @include token-utils.create-token-values(m2-optgroup.$prefix, $mat-optgroup-tokens);
   @include token-utils.create-token-values(
-    m2-full-pseudo-checkbox.$prefix,
-    $mat-full-pseudo-checkbox-tokens
-  );
-  @include token-utils.create-token-values(
-    m2-minimal-pseudo-checkbox.$prefix,
-    $mat-minimal-pseudo-checkbox-tokens
+    m2-pseudo-checkbox.$prefix,
+    $mat-pseudo-checkbox-tokens
   );
 }
diff --git a/src/material/core/selection/pseudo-checkbox/BUILD.bazel b/src/material/core/selection/pseudo-checkbox/BUILD.bazel
index f08070333ae0..45ae49fa39d9 100644
--- a/src/material/core/selection/pseudo-checkbox/BUILD.bazel
+++ b/src/material/core/selection/pseudo-checkbox/BUILD.bazel
@@ -6,8 +6,7 @@ package(default_visibility = ["//visibility:public"])
 sass_library(
     name = "m3",
     srcs = [
-        "_m3-full-pseudo-checkbox.scss",
-        "_m3-minimal-pseudo-checkbox.scss",
+        "_m3-pseudo-checkbox.scss",
     ],
     deps = [
         "//src/material/core/style:sass_utils",
@@ -18,8 +17,7 @@ sass_library(
 sass_library(
     name = "m2",
     srcs = [
-        "_m2-full-pseudo-checkbox.scss",
-        "_m2-minimal-pseudo-checkbox.scss",
+        "_m2-pseudo-checkbox.scss",
     ],
     deps = [
         "//src/material/core/style:elevation",
diff --git a/src/material/core/selection/pseudo-checkbox/_m2-minimal-pseudo-checkbox.scss b/src/material/core/selection/pseudo-checkbox/_m2-minimal-pseudo-checkbox.scss
deleted file mode 100644
index dad7bb18b0b1..000000000000
--- a/src/material/core/selection/pseudo-checkbox/_m2-minimal-pseudo-checkbox.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-@use '../../tokens/m2-utils';
-@use '../../theming/inspection';
-@use '../../style/sass-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, pseudo-checkbox-minimal);
-
-// 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, $palette-name: accent) {
-  $is-dark: inspection.get-theme-type($theme) == dark;
-
-  @return (
-    selected-checkmark-color: inspection.get-theme-color($theme, $palette-name),
-    disabled-selected-checkmark-color: if($is-dark, #686868, #b0b0b0),
-  );
-}
-
-// 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(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}
diff --git a/src/material/core/selection/pseudo-checkbox/_m2-full-pseudo-checkbox.scss b/src/material/core/selection/pseudo-checkbox/_m2-pseudo-checkbox.scss
similarity index 70%
rename from src/material/core/selection/pseudo-checkbox/_m2-full-pseudo-checkbox.scss
rename to src/material/core/selection/pseudo-checkbox/_m2-pseudo-checkbox.scss
index a18f0c973595..d52c28906fef 100644
--- a/src/material/core/selection/pseudo-checkbox/_m2-full-pseudo-checkbox.scss
+++ b/src/material/core/selection/pseudo-checkbox/_m2-pseudo-checkbox.scss
@@ -3,7 +3,7 @@
 @use '../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, pseudo-checkbox-full);
+$prefix: (mat, pseudo-checkbox);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -18,12 +18,14 @@ $prefix: (mat, pseudo-checkbox-full);
   $checkmark-color: inspection.get-theme-color($theme, background, background);
 
   @return (
-    selected-icon-color: inspection.get-theme-color($theme, $palette-name),
-    selected-checkmark-color: $checkmark-color,
-    unselected-icon-color: inspection.get-theme-color($theme, foreground, secondary-text),
-    disabled-selected-checkmark-color: $checkmark-color,
-    disabled-unselected-icon-color: $disabled-color,
-    disabled-selected-icon-color: $disabled-color,
+    full-selected-icon-color: inspection.get-theme-color($theme, $palette-name),
+    full-selected-checkmark-color: $checkmark-color,
+    full-unselected-icon-color: inspection.get-theme-color($theme, foreground, secondary-text),
+    full-disabled-selected-checkmark-color: $checkmark-color,
+    full-disabled-unselected-icon-color: $disabled-color,
+    full-disabled-selected-icon-color: $disabled-color,
+    minimal-selected-checkmark-color: inspection.get-theme-color($theme, $palette-name),
+    minimal-disabled-selected-checkmark-color: if($is-dark, #686868, #b0b0b0),
   );
 }
 
diff --git a/src/material/core/selection/pseudo-checkbox/_m3-full-pseudo-checkbox.scss b/src/material/core/selection/pseudo-checkbox/_m3-full-pseudo-checkbox.scss
deleted file mode 100644
index 69469eb052cb..000000000000
--- a/src/material/core/selection/pseudo-checkbox/_m3-full-pseudo-checkbox.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-@use 'sass:map';
-@use '../../style/sass-utils';
-@use '../../tokens/m3-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, pseudo-checkbox-full);
-
-/// Generates custom tokens for the full variant of mat-pseudo-checkbox.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @param {Map} $token-slots Possible token slots
-/// @return {Map} A set of custom tokens for the full variant of mat-pseudo-checkbox
-@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: (
-    selected-icon-color: map.get($systems, md-sys-color, primary),
-    selected-checkmark-color: map.get($systems, md-sys-color, on-primary),
-    unselected-icon-color: map.get($systems, md-sys-color, on-surface-variant),
-    disabled-selected-checkmark-color: map.get($systems, md-sys-color, surface),
-    disabled-unselected-icon-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
-    disabled-selected-icon-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
-  );
-
-  $variant-tokens: (
-    // Color variants:
-    primary: (), // Default, no overrides needed.
-    secondary: (
-      selected-icon-color: map.get($systems, md-sys-color, secondary),
-      selected-checkmark-color: map.get($systems, md-sys-color, on-secondary),
-    ),
-    tertiary: (
-      selected-icon-color: map.get($systems, md-sys-color, tertiary),
-      selected-checkmark-color: map.get($systems, md-sys-color, on-tertiary),
-    ),
-    error: (
-      selected-icon-color: map.get($systems, md-sys-color, error),
-      selected-checkmark-color: map.get($systems, md-sys-color, on-error),
-    )
-  );
-
-  @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
-}
diff --git a/src/material/core/selection/pseudo-checkbox/_m3-minimal-pseudo-checkbox.scss b/src/material/core/selection/pseudo-checkbox/_m3-minimal-pseudo-checkbox.scss
deleted file mode 100644
index d694a383b95e..000000000000
--- a/src/material/core/selection/pseudo-checkbox/_m3-minimal-pseudo-checkbox.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-@use 'sass:map';
-@use '../../style/sass-utils';
-@use '../../tokens/m3-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, pseudo-checkbox-minimal);
-
-/// Generates custom tokens for the minimal variant of mat-pseudo-checkbox.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @param {Map} $token-slots Possible token slots
-/// @return {Map} A set of custom tokens for the minimal variant of mat-pseudo-checkbox
-@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: (
-    selected-checkmark-color: map.get($systems, md-sys-color, primary),
-    disabled-selected-checkmark-color: sass-utils.safe-color-change(
-      map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
-  );
-
-  $variant-tokens: (
-    // Color variants:
-    primary: (), // Default, no overrides needed.
-    secondary: (
-      selected-checkmark-color: map.get($systems, md-sys-color, secondary),
-    ),
-    tertiary: (
-      selected-checkmark-color: map.get($systems, md-sys-color, tertiary),
-    ),
-    error: (
-      selected-checkmark-color: map.get($systems, md-sys-color, error),
-    )
-  );
-
-  @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
-}
diff --git a/src/material/core/selection/pseudo-checkbox/_m3-pseudo-checkbox.scss b/src/material/core/selection/pseudo-checkbox/_m3-pseudo-checkbox.scss
new file mode 100644
index 000000000000..38b3d66ae199
--- /dev/null
+++ b/src/material/core/selection/pseudo-checkbox/_m3-pseudo-checkbox.scss
@@ -0,0 +1,49 @@
+@use 'sass:map';
+@use '../../style/sass-utils';
+@use '../../tokens/m3-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, pseudo-checkbox);
+
+/// Generates custom tokens for the full variant of mat-pseudo-checkbox.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @param {Map} $token-slots Possible token slots
+/// @return {Map} A set of custom tokens for the full variant of mat-pseudo-checkbox
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: (
+    full-disabled-selected-checkmark-color: map.get($systems, md-sys-color, surface),
+    full-disabled-selected-icon-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+    full-disabled-unselected-icon-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+    full-selected-checkmark-color: map.get($systems, md-sys-color, on-primary),
+    full-selected-icon-color: map.get($systems, md-sys-color, primary),
+    full-unselected-icon-color: map.get($systems, md-sys-color, on-surface-variant),
+    minimal-disabled-selected-checkmark-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+    minimal-selected-checkmark-color: map.get($systems, md-sys-color, primary),
+  );
+
+  $variant-tokens: (
+    // Color variants:
+    primary: (), // Default, no overrides needed.
+    secondary: (
+      full-selected-checkmark-color: map.get($systems, md-sys-color, on-secondary),
+      full-selected-icon-color: map.get($systems, md-sys-color, secondary),
+      minimal-selected-checkmark-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      full-selected-checkmark-color: map.get($systems, md-sys-color, on-tertiary),
+      full-selected-icon-color: map.get($systems, md-sys-color, tertiary),
+      minimal-selected-checkmark-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      full-selected-checkmark-color: map.get($systems, md-sys-color, on-error),
+      full-selected-icon-color: map.get($systems, md-sys-color, error),
+      minimal-selected-checkmark-color: map.get($systems, md-sys-color, error),
+    )
+  );
+
+  @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
+}
diff --git a/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss b/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss
index 764a3ee4978b..92da5270c904 100644
--- a/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss
+++ b/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss
@@ -3,18 +3,13 @@
 @use '../../theming/validation';
 @use '../../style/sass-utils';
 @use '../../tokens/token-utils';
-@use './m2-full-pseudo-checkbox';
-@use './m2-minimal-pseudo-checkbox';
+@use './m2-pseudo-checkbox';
 
 @mixin _palette-styles($theme, $palette-name) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values-mixed(
-      m2-full-pseudo-checkbox.$prefix,
-      m2-full-pseudo-checkbox.get-color-tokens($theme, $palette-name)
-    );
-    @include token-utils.create-token-values-mixed(
-      m2-minimal-pseudo-checkbox.$prefix,
-      m2-minimal-pseudo-checkbox.get-color-tokens($theme, $palette-name)
+      m2-pseudo-checkbox.$prefix,
+      m2-pseudo-checkbox.get-color-tokens($theme, $palette-name)
     );
   }
 }
@@ -23,14 +18,10 @@
   @include validation.selector-defined(
     'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
   );
-  $mat-full-pseudo-checkbox-tokens: token-utils.get-tokens-for(
-    $tokens, m2-full-pseudo-checkbox.$prefix, $options...);
-  $mat-minimal-pseudo-checkbox-tokens: token-utils.get-tokens-for(
-    $tokens, m2-minimal-pseudo-checkbox.$prefix, $options...);
-  @include token-utils.create-token-values-mixed(
-    m2-full-pseudo-checkbox.$prefix, $mat-full-pseudo-checkbox-tokens);
+  $mat-pseudo-checkbox-tokens: token-utils.get-tokens-for(
+    $tokens, m2-pseudo-checkbox.$prefix, $options...);
   @include token-utils.create-token-values-mixed(
-    m2-minimal-pseudo-checkbox.$prefix, $mat-minimal-pseudo-checkbox-tokens);
+      m2-pseudo-checkbox.$prefix, $mat-pseudo-checkbox-tokens);
 }
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
@@ -41,19 +32,10 @@
 
 /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
 @function _define-overrides() {
-  $full-pseudo-checkbox-tokens: m2-full-pseudo-checkbox.get-token-slots();
-  $minimal-pseudo-checkbox-tokens: m2-minimal-pseudo-checkbox.get-token-slots();
-
   @return (
     (
-      namespace: m2-full-pseudo-checkbox.$prefix,
-      tokens: $full-pseudo-checkbox-tokens,
-      prefix: 'full-',
-    ),
-    (
-      namespace: m2-minimal-pseudo-checkbox.$prefix,
-      tokens: $minimal-pseudo-checkbox-tokens,
-      prefix: 'minimal-',
+      namespace: m2-pseudo-checkbox.$prefix,
+      tokens: m2-pseudo-checkbox.get-token-slots(),
     ),
   );
 }
diff --git a/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss b/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss
index 387620e2ad9c..da6a89c46319 100644
--- a/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss
+++ b/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss
@@ -3,8 +3,7 @@
 @use '../../style/private';
 @use '../../style/variables';
 @use '../../tokens/token-utils';
-@use './m2-full-pseudo-checkbox';
-@use './m2-minimal-pseudo-checkbox';
+@use './m2-pseudo-checkbox';
 @use './pseudo-checkbox-common';
 
 .mat-pseudo-checkbox {
@@ -54,45 +53,42 @@
   box-sizing: content-box;
 }
 
-.mat-pseudo-checkbox-minimal {
-  @include token-utils.use-tokens(
-      m2-minimal-pseudo-checkbox.$prefix, m2-minimal-pseudo-checkbox.get-token-slots()) {
+@include token-utils.use-tokens(
+    m2-pseudo-checkbox.$prefix, m2-pseudo-checkbox.get-token-slots()) {
+  .mat-pseudo-checkbox-minimal {
     &.mat-pseudo-checkbox-checked, &.mat-pseudo-checkbox-indeterminate {
       &::after {
-        color: token-utils.slot(selected-checkmark-color);
+        color: token-utils.slot(minimal-selected-checkmark-color);
       }
 
       &.mat-pseudo-checkbox-disabled::after {
-        color: token-utils.slot(disabled-selected-checkmark-color);
+        color: token-utils.slot(minimal-disabled-selected-checkmark-color);
+      }
       }
-    }
   }
-}
 
-.mat-pseudo-checkbox-full {
-  @include token-utils.use-tokens(
-      m2-full-pseudo-checkbox.$prefix, m2-full-pseudo-checkbox.get-token-slots()) {
-    border-color: token-utils.slot(unselected-icon-color);
+  .mat-pseudo-checkbox-full {
+    border-color: token-utils.slot(full-unselected-icon-color);
     border-width: checkbox-common.$border-width;
     border-style: solid;
 
     &.mat-pseudo-checkbox-disabled {
-      border-color: token-utils.slot(disabled-unselected-icon-color);
+      border-color: token-utils.slot(full-disabled-unselected-icon-color);
     }
 
     &.mat-pseudo-checkbox-checked, &.mat-pseudo-checkbox-indeterminate {
-      background-color: token-utils.slot(selected-icon-color);
+      background-color: token-utils.slot(full-selected-icon-color);
       border-color: transparent;
 
       &::after {
-        color: token-utils.slot(selected-checkmark-color);
+        color: token-utils.slot(full-selected-checkmark-color);
       }
 
       &.mat-pseudo-checkbox-disabled {
-        background-color: token-utils.slot(disabled-selected-icon-color);
+        background-color: token-utils.slot(full-disabled-selected-icon-color);
 
         &::after {
-          color: token-utils.slot(disabled-selected-checkmark-color);
+          color: token-utils.slot(full-disabled-selected-checkmark-color);
         }
       }
     }
diff --git a/src/material/core/theming/tests/m3-theme.spec.ts b/src/material/core/theming/tests/m3-theme.spec.ts
index baf110fa11a6..01061e9873e9 100644
--- a/src/material/core/theming/tests/m3-theme.spec.ts
+++ b/src/material/core/theming/tests/m3-theme.spec.ts
@@ -39,11 +39,6 @@ function intersection<T>(set: Set<T>, ...sets: Set<T>[]): Set<T> {
   return new Set([...set].filter(i => sets.every(s => s.has(i))));
 }
 
-/** Expects the given warning to be reported in Sass. */
-function expectWarning(message: RegExp) {
-  expect(getMatchingWarning(message)).withContext('Expected warning to be printed.').toBeDefined();
-}
-
 /** Expects the given warning not to be reported in Sass. */
 function expectNoWarning(message: RegExp) {
   expect(getMatchingWarning(message))
@@ -167,20 +162,6 @@ describe('M3 theme', () => {
       expectNoWarning(/`filled-caret-color` is deprecated/);
     });
 
-    it('should allow overriding ambiguous token value without using prefix, but warn', () => {
-      const css = transpile(`
-        div {
-          @include mat.form-field-overrides((caret-color: magenta));
-        }
-      `);
-
-      expect(css).toContain('--mat-form-field-filled-caret-color: magenta');
-      expect(css).toContain('--mat-form-field-outlined-caret-color: magenta');
-      expectWarning(
-        /Token `caret-color` is deprecated. Please use one of the following alternatives: filled-caret-color, outlined-caret-color/,
-      );
-    });
-
     it('should error on invalid token name', () => {
       expect(() =>
         transpile(`
diff --git a/src/material/core/tokens/_density.scss b/src/material/core/tokens/_density.scss
index 70852784b724..2dfa4533a6ff 100644
--- a/src/material/core/tokens/_density.scss
+++ b/src/material/core/tokens/_density.scss
@@ -30,21 +30,25 @@ $_density-tokens: (
     (mat, datepicker): (),
     (mat, dialog): (),
     (mat, divider): (),
-    (mat, card-elevated): (),
     (mat, expansion): (
       header-collapsed-state-height: (48px, 44px, 40px, 36px),
       header-expanded-state-height: (64px, 60px, 56px, 48px),
     ),
-    (mat, fab-extended): (),
     (mat, fab): (
       touch-target-display: (block, block, none, none),
     ),
-    (mat, fab-small): (),
-    (mat, button-filled): (
-      touch-target-display: (block, block, none, none),
-      container-height: (40px, 36px, 32px, 28px),
+    (mat, button): (
+      filled-touch-target-display: (block, block, none, none),
+      filled-container-height: (40px, 36px, 32px, 28px),
+      outlined-container-height: (40px, 36px, 32px, 28px),
+      outlined-touch-target-display: (block, block, none, none),
+      protected-touch-target-display: (block, block, none, none),
+      protected-container-height: (40px, 36px, 32px, 28px),
+      text-touch-target-display: (block, block, none, none),
+      text-container-height: (40px, 36px, 32px, 28px),
+      tonal-container-height: (40px, 36px, 32px, 28px),
+      tonal-touch-target-display: (block, block, none, none),
     ),
-    (mat, form-field-filled): (),
     (mat, form-field): (
       container-height: (56px, 52px, 48px, 44px, 40px, 36px),
       filled-label-display: (block, block, none, none, none, none),
@@ -52,7 +56,6 @@ $_density-tokens: (
       filled-with-label-container-padding-top: (24px, 22px, 12px, 10px, 8px, 6px),
       filled-with-label-container-padding-bottom: (8px, 6px, 12px, 10px, 8px, 6px),
     ),
-    (mat, pseudo-checkbox-full): (),
     (mat, grid-list): (),
     (mat, icon): (),
     (mat, icon-button): (
@@ -69,15 +72,8 @@ $_density-tokens: (
       list-item-three-line-container-height: (88px, 84px, 80px, 76px, 72px, 56px),
     ),
     (mat, menu): (),
-    (mat, pseudo-checkbox-minimal): (),
     (mat, optgroup): (),
     (mat, option): (),
-    (mat, button-outlined): (
-      container-height: (40px, 36px, 32px, 28px),
-      touch-target-display: (block, block, none, none),
-    ),
-    (mat, card-outlined): (),
-    (mat, form-field-outlined): (),
     (mat, paginator): (
       container-size: (56px, 52px, 48px, 40px),
       form-field-container-height: (40px, 40px, 40px, 40px, 40px, 36px),
@@ -85,10 +81,6 @@ $_density-tokens: (
       touch-target-display: (block, block, none, none),
     ),
     (mat, tooltip): (),
-    (mat, button-protected): (
-      touch-target-display: (block, block, none, none),
-      container-height: (40px, 36px, 32px, 28px),
-    ),
     (mat, radio): (
       touch-target-display: (block, block, none, none),
       state-layer-size: (40px, 36px, 32px, 28px),
@@ -116,15 +108,7 @@ $_density-tokens: (
       footer-container-height: (52px, 48px, 44px, 40px, 36px),
       row-item-container-height: (52px, 48px, 44px, 40px, 36px),
     ),
-    (mat, button-text): (
-      touch-target-display: (block, block, none, none),
-      container-height: (40px, 36px, 32px, 28px),
-    ),
     (mat, timepicker): (),
-    (mat, button-tonal): (
-      container-height: (40px, 36px, 32px, 28px),
-      touch-target-display: (block, block, none, none),
-    ),
     (mat, toolbar): (
       standard-height: (64px, 60px, 56px, 52px),
       mobile-height: (56px, 52px, 48px, 44px),
diff --git a/src/material/core/tokens/_m2-tokens.scss b/src/material/core/tokens/_m2-tokens.scss
index 2237cc37a2b7..b7af3fa4a84c 100644
--- a/src/material/core/tokens/_m2-tokens.scss
+++ b/src/material/core/tokens/_m2-tokens.scss
@@ -1,30 +1,18 @@
-@use 'sass:map';
-@use 'sass:meta';
 @use '../../autocomplete/m2-autocomplete';
 @use '../../badge/m2-badge';
 @use '../../bottom-sheet/m2-bottom-sheet';
-@use '../../button-toggle/m2-standard-button-toggle';
-@use '../../button/m2-extended-fab';
+@use '../../button-toggle/m2-button-toggle';
+@use '../../button/m2-button';
 @use '../../button/m2-fab';
-@use '../../button/m2-fab-small';
-@use '../../button/m2-filled-button';
 @use '../../button/m2-icon-button';
-@use '../../button/m2-outlined-button';
-@use '../../button/m2-protected-button';
-@use '../../button/m2-text-button';
-@use '../../button/m2-tonal-button';
 @use '../../card/m2-card';
-@use '../../card/m2-elevated-card';
-@use '../../card/m2-outlined-card';
 @use '../../checkbox/m2-checkbox';
 @use '../../chips/m2-chip';
 @use '../../datepicker/m2-datepicker';
 @use '../../dialog/m2-dialog';
 @use '../../divider/m2-divider';
 @use '../../expansion/m2-expansion';
-@use '../../form-field/m2-filled-text-field';
 @use '../../form-field/m2-form-field';
-@use '../../form-field/m2-outlined-text-field';
 @use '../../grid-list/m2-grid-list';
 @use '../../icon/m2-icon';
 @use '../../list/m2-list';
@@ -41,10 +29,7 @@
 @use '../../sort/m2-sort';
 @use '../../stepper/m2-stepper';
 @use '../../table/m2-table';
-@use '../../tabs/m2-secondary-navigation-tab';
-@use '../../tabs/m2-tab-header';
-@use '../../tabs/m2-tab-header-with-background';
-@use '../../tabs/m2-tab-indicator';
+@use '../../tabs/m2-tabs';
 @use '../../timepicker/m2-timepicker';
 @use '../../toolbar/m2-toolbar';
 @use '../../tooltip/m2-tooltip';
@@ -53,10 +38,11 @@
 @use '../option/m2-optgroup';
 @use '../option/m2-option';
 @use '../ripple/m2-ripple';
-@use '../selection/pseudo-checkbox/m2-full-pseudo-checkbox';
-@use '../selection/pseudo-checkbox/m2-minimal-pseudo-checkbox';
+@use '../selection/pseudo-checkbox/m2-pseudo-checkbox';
 @use '../style/sass-utils';
 @use '../theming/inspection';
+@use 'sass:map';
+@use 'sass:meta';
 
 /// Gets the tokens for the given theme, m2 tokens module, and theming system.
 /// @param {Map} $theme The Angular Material theme object to generate token values from.
@@ -104,54 +90,40 @@
     _get-tokens-for-module($theme, m2-autocomplete),
     _get-tokens-for-module($theme, m2-badge),
     _get-tokens-for-module($theme, m2-bottom-sheet),
+    _get-tokens-for-module($theme, m2-button),
+    _get-tokens-for-module($theme, m2-button-toggle),
     _get-tokens-for-module($theme, m2-card),
     _get-tokens-for-module($theme, m2-checkbox),
     _get-tokens-for-module($theme, m2-chip),
     _get-tokens-for-module($theme, m2-datepicker),
     _get-tokens-for-module($theme, m2-dialog),
     _get-tokens-for-module($theme, m2-divider),
-    _get-tokens-for-module($theme, m2-elevated-card),
     _get-tokens-for-module($theme, m2-expansion),
-    _get-tokens-for-module($theme, m2-extended-fab),
     _get-tokens-for-module($theme, m2-fab),
-    _get-tokens-for-module($theme, m2-fab-small),
-    _get-tokens-for-module($theme, m2-filled-button),
-    _get-tokens-for-module($theme, m2-filled-text-field),
     _get-tokens-for-module($theme, m2-form-field),
-    _get-tokens-for-module($theme, m2-full-pseudo-checkbox),
     _get-tokens-for-module($theme, m2-grid-list),
     _get-tokens-for-module($theme, m2-icon),
     _get-tokens-for-module($theme, m2-icon-button),
     _get-tokens-for-module($theme, m2-list),
     _get-tokens-for-module($theme, m2-menu),
-    _get-tokens-for-module($theme, m2-minimal-pseudo-checkbox),
     _get-tokens-for-module($theme, m2-optgroup),
     _get-tokens-for-module($theme, m2-option),
-    _get-tokens-for-module($theme, m2-outlined-button),
-    _get-tokens-for-module($theme, m2-outlined-card),
-    _get-tokens-for-module($theme, m2-outlined-text-field),
     _get-tokens-for-module($theme, m2-paginator),
     _get-tokens-for-module($theme, m2-progress-bar),
     _get-tokens-for-module($theme, m2-progress-spinner),
-    _get-tokens-for-module($theme, m2-protected-button),
+    _get-tokens-for-module($theme, m2-pseudo-checkbox),
     _get-tokens-for-module($theme, m2-radio),
     _get-tokens-for-module($theme, m2-ripple),
-    _get-tokens-for-module($theme, m2-secondary-navigation-tab),
     _get-tokens-for-module($theme, m2-select),
     _get-tokens-for-module($theme, m2-sidenav),
     _get-tokens-for-module($theme, m2-slide-toggle),
     _get-tokens-for-module($theme, m2-slider),
     _get-tokens-for-module($theme, m2-snack-bar),
     _get-tokens-for-module($theme, m2-sort),
-    _get-tokens-for-module($theme, m2-standard-button-toggle),
     _get-tokens-for-module($theme, m2-stepper),
-    _get-tokens-for-module($theme, m2-tab-header),
-    _get-tokens-for-module($theme, m2-tab-header-with-background),
-    _get-tokens-for-module($theme, m2-tab-indicator),
+    _get-tokens-for-module($theme, m2-tabs),
     _get-tokens-for-module($theme, m2-table),
-    _get-tokens-for-module($theme, m2-text-button),
     _get-tokens-for-module($theme, m2-timepicker),
-    _get-tokens-for-module($theme, m2-tonal-button),
     _get-tokens-for-module($theme, m2-toolbar),
     _get-tokens-for-module($theme, m2-tooltip),
     _get-tokens-for-module($theme, m2-tree),
diff --git a/src/material/core/tokens/_m3-tokens.scss b/src/material/core/tokens/_m3-tokens.scss
index 1ba270e9141d..69c892f21211 100644
--- a/src/material/core/tokens/_m3-tokens.scss
+++ b/src/material/core/tokens/_m3-tokens.scss
@@ -1,28 +1,18 @@
 @use '../../autocomplete/m3-autocomplete';
 @use '../../badge/m3-badge';
 @use '../../bottom-sheet/m3-bottom-sheet';
-@use '../../button-toggle/m3-standard-button-toggle';
-@use '../../button/m3-extended-fab';
+@use '../../button-toggle/m3-button-toggle';
+@use '../../button/m3-button';
 @use '../../button/m3-fab';
-@use '../../button/m3-fab-small';
-@use '../../button/m3-filled-button';
 @use '../../button/m3-icon-button';
-@use '../../button/m3-outlined-button';
-@use '../../button/m3-protected-button';
-@use '../../button/m3-text-button';
-@use '../../button/m3-tonal-button';
 @use '../../card/m3-card';
-@use '../../card/m3-elevated-card';
-@use '../../card/m3-outlined-card';
 @use '../../checkbox/m3-checkbox';
 @use '../../chips/m3-chip';
 @use '../../datepicker/m3-datepicker';
 @use '../../dialog/m3-dialog';
 @use '../../divider/m3-divider';
 @use '../../expansion/m3-expansion';
-@use '../../form-field/m3-filled-text-field';
 @use '../../form-field/m3-form-field';
-@use '../../form-field/m3-outlined-text-field';
 @use '../../grid-list/m3-grid-list';
 @use '../../icon/m3-icon';
 @use '../../list/m3-list';
@@ -39,9 +29,7 @@
 @use '../../sort/m3-sort';
 @use '../../stepper/m3-stepper';
 @use '../../table/m3-table';
-@use '../../tabs/m3-secondary-navigation-tab';
-@use '../../tabs/m3-tab-header';
-@use '../../tabs/m3-tab-indicator';
+@use '../../tabs/m3-tabs';
 @use '../../timepicker/m3-timepicker';
 @use '../../toolbar/m3-toolbar';
 @use '../../tooltip/m3-tooltip';
@@ -51,8 +39,7 @@
 @use '../option/m3-optgroup';
 @use '../option/m3-option';
 @use '../ripple/m3-ripple';
-@use '../selection/pseudo-checkbox/m3-full-pseudo-checkbox';
-@use '../selection/pseudo-checkbox/m3-minimal-pseudo-checkbox';
+@use '../selection/pseudo-checkbox/m3-pseudo-checkbox';
 @use '../style/sass-utils';
 @use './density';
 @use './format-tokens';
@@ -429,53 +416,40 @@ $system-variables-prefix) {
     m3-autocomplete.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-badge.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-bottom-sheet.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-button-toggle.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-button.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-card.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-checkbox.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-chip.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-datepicker.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-dialog.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-divider.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-elevated-card.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-expansion.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-extended-fab.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-fab-small.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-fab.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-filled-button.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-filled-text-field.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-form-field.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-full-pseudo-checkbox.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-grid-list.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-icon-button.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-icon.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-list.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-menu.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-minimal-pseudo-checkbox.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-optgroup.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-option.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-outlined-button.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-outlined-card.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-outlined-text-field.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-paginator.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-progress-bar.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-progress-spinner.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-protected-button.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-pseudo-checkbox.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-radio.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-ripple.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-secondary-navigation-tab.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-tabs.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-select.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-sidenav.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-slide-toggle.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-slider.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-snack-bar.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-sort.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-standard-button-toggle.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-stepper.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-tab-header.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-tab-indicator.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-table.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-text-button.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-timepicker.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-tonal-button.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-toolbar.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-tooltip.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-tree.get-tokens($systems, $exclude-hardcoded, $token-slots),
diff --git a/src/material/core/tokens/_token-utils.scss b/src/material/core/tokens/_token-utils.scss
index 18bc54461f34..351c4889469e 100644
--- a/src/material/core/tokens/_token-utils.scss
+++ b/src/material/core/tokens/_token-utils.scss
@@ -223,7 +223,6 @@ $_system-fallbacks: m3-system.create-system-fallbacks();
 @mixin batch-create-token-values($overrides: (), $namespace-configs...) {
   @include sass-utils.current-selector-or-root() {
     $prefixed-name-data: ();
-    $unprefixed-name-data: ();
     $all-names: ();
 
     @each $config in $namespace-configs {
@@ -233,29 +232,7 @@ $_system-fallbacks: m3-system.create-system-fallbacks();
       @each $name, $value in $tokens {
         $prefixed-name: $prefix + $name;
         $all-names: list.append($all-names, $prefixed-name, $separator: comma);
-        @if map.has-key($prefixed-name-data, $prefixed-name) {
-          @error #{
-          'Error overriding token: Ambiguous token name `'
-        }#{
-          $prefixed-name
-        }#{
-          '` exists in multiple namespaces: `('
-        }#{
-          list.nth(map.get($prefixed-name-data, $prefixed-name), 1)
-        }#{
-          ')` and `('
-        }#{
-          $namespace
-        }#{
-          ')`'
-        };
-        }
         $prefixed-name-data: map.set($prefixed-name-data, $prefixed-name, ($namespace, $name));
-        $unprefixed-data: map.has-key($unprefixed-name-data, $name) and
-          map.get($unprefixed-name-data, $name) or
-          ();
-        $unprefixed-data: list.append($unprefixed-data, ($namespace, $prefixed-name));
-        $unprefixed-name-data: map.set($unprefixed-name-data, $name, $unprefixed-data);
       }
     }
 
@@ -270,28 +247,6 @@ $_system-fallbacks: m3-system.create-system-fallbacks();
             $name: $value,
           )
         );
-      } @else if (map.has-key($unprefixed-name-data, $name)) {
-        $datalist: map.get($unprefixed-name-data, $name);
-        $prefixed-names: ();
-        @each $data in $datalist {
-          $namespace: list.nth($data, 1);
-          $prefixed-names: list.append($prefixed-names, list.nth($data, 2), $separator: comma);
-          @include create-token-values(
-            $namespace,
-            (
-              $name: $value,
-            )
-          );
-        }
-        @warn #{
-        'Token `'
-      }#{
-        $name
-      }#{
-        '` is deprecated. Please use one of the following alternatives: '
-      }#{
-        $prefixed-names
-      };
       } @else {
         @error #{'Invalid token name `'}#{$name}#{'`. '}#{'Valid tokens are: '}#{$all-names};
       }
diff --git a/src/material/form-field/BUILD.bazel b/src/material/form-field/BUILD.bazel
index 4210664d553b..4872ca371c53 100644
--- a/src/material/form-field/BUILD.bazel
+++ b/src/material/form-field/BUILD.bazel
@@ -12,9 +12,7 @@ package(default_visibility = ["//visibility:public"])
 sass_library(
     name = "m3",
     srcs = [
-        "_m3-filled-text-field.scss",
         "_m3-form-field.scss",
-        "_m3-outlined-text-field.scss",
     ],
     deps = [
         "//src/material/core/style:sass_utils",
@@ -25,9 +23,7 @@ sass_library(
 sass_library(
     name = "m2",
     srcs = [
-        "_m2-filled-text-field.scss",
         "_m2-form-field.scss",
-        "_m2-outlined-text-field.scss",
     ],
     deps = [
         "//src/material/core/style:elevation",
diff --git a/src/material/form-field/_form-field-focus-overlay.scss b/src/material/form-field/_form-field-focus-overlay.scss
index 5d9c37d3420f..02e0d96a205b 100644
--- a/src/material/form-field/_form-field-focus-overlay.scss
+++ b/src/material/form-field/_form-field-focus-overlay.scss
@@ -15,8 +15,7 @@
     opacity: 0;
     pointer-events: none; // Make sure we don't block click on the prefix/suffix.
 
-    @include token-utils.use-tokens(
-        m2-form-field.$prefix, m2-form-field.get-token-slots()) {
+    @include token-utils.use-tokens(m2-form-field.$prefix, m2-form-field.get-token-slots()) {
       background-color: token-utils.slot(state-layer-color);
 
       .mat-mdc-text-field-wrapper:hover & {
diff --git a/src/material/form-field/_form-field-subscript.scss b/src/material/form-field/_form-field-subscript.scss
index 7a9e48508b86..ddd61049ee1e 100644
--- a/src/material/form-field/_form-field-subscript.scss
+++ b/src/material/form-field/_form-field-subscript.scss
@@ -72,8 +72,7 @@
   .mat-mdc-form-field-error {
     display: block;
 
-    @include token-utils.use-tokens(
-        m2-form-field.$prefix, m2-form-field.get-token-slots()) {
+    @include token-utils.use-tokens(m2-form-field.$prefix, m2-form-field.get-token-slots()) {
       color: token-utils.slot(error-text-color);
     }
   }
diff --git a/src/material/form-field/_form-field-theme.scss b/src/material/form-field/_form-field-theme.scss
index fd7d61c859f4..0144c00b9248 100644
--- a/src/material/form-field/_form-field-theme.scss
+++ b/src/material/form-field/_form-field-theme.scss
@@ -1,5 +1,3 @@
-@use './m2-filled-text-field';
-@use './m2-outlined-text-field';
 @use './m2-form-field';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
@@ -16,14 +14,6 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-filled-text-field.$prefix,
-        m2-filled-text-field.get-unthemable-tokens()
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-outlined-text-field.$prefix,
-        m2-outlined-text-field.get-unthemable-tokens()
-      );
       @include token-utils.create-token-values-mixed(
         m2-form-field.$prefix,
         m2-form-field.get-unthemable-tokens()
@@ -42,14 +32,6 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-filled-text-field.$prefix,
-        m2-filled-text-field.get-color-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-outlined-text-field.$prefix,
-        m2-outlined-text-field.get-color-tokens($theme)
-      );
       @include token-utils.create-token-values-mixed(
         m2-form-field.$prefix,
         m2-form-field.get-color-tokens($theme)
@@ -57,14 +39,6 @@
     }
 
     .mat-mdc-form-field.mat-accent {
-      @include token-utils.create-token-values-mixed(
-        m2-filled-text-field.$prefix,
-        m2-filled-text-field.private-get-color-palette-color-tokens($theme, accent)
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-outlined-text-field.$prefix,
-        m2-outlined-text-field.private-get-color-palette-color-tokens($theme, accent)
-      );
       @include token-utils.create-token-values-mixed(
         m2-form-field.$prefix,
         m2-form-field.private-get-color-palette-color-tokens($theme, accent)
@@ -72,14 +46,6 @@
     }
 
     .mat-mdc-form-field.mat-warn {
-      @include token-utils.create-token-values-mixed(
-        m2-filled-text-field.$prefix,
-        m2-filled-text-field.private-get-color-palette-color-tokens($theme, warn)
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-outlined-text-field.$prefix,
-        m2-outlined-text-field.private-get-color-palette-color-tokens($theme, warn)
-      );
       @include token-utils.create-token-values-mixed(
         m2-form-field.$prefix,
         m2-form-field.private-get-color-palette-color-tokens($theme, warn)
@@ -95,14 +61,6 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-filled-text-field.$prefix,
-        m2-filled-text-field.get-typography-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-outlined-text-field.$prefix,
-        m2-outlined-text-field.get-typography-tokens($theme)
-      );
       @include token-utils.create-token-values-mixed(
         m2-form-field.$prefix,
         m2-form-field.get-typography-tokens($theme)
@@ -128,25 +86,13 @@
 
 /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
 @function _define-overrides() {
-  $filled-text-field-tokens: m2-filled-text-field.get-token-slots();
-  $outlined-text-field-tokens: m2-outlined-text-field.get-token-slots();
   $form-field-tokens: m2-form-field.get-token-slots();
 
   @return (
-    (
-      namespace: m2-filled-text-field.$prefix,
-      tokens: $filled-text-field-tokens,
-      prefix: 'filled-',
-    ),
-    (
-      namespace: m2-outlined-text-field.$prefix,
-      tokens: $outlined-text-field-tokens,
-      prefix: 'outlined-',
-    ),
     (
       namespace: m2-form-field.$prefix,
       tokens: $form-field-tokens,
-    )
+    ),
   );
 }
 
@@ -184,28 +130,10 @@
   @include validation.selector-defined(
     'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
   );
-  $mdc-filled-text-field-tokens: token-utils.get-tokens-for(
-    $tokens,
-    m2-filled-text-field.$prefix,
-    $options...
-  );
-  $mdc-outlined-text-field-tokens: token-utils.get-tokens-for(
-    $tokens,
-    m2-outlined-text-field.$prefix,
-    $options...
-  );
   $mat-form-field-tokens: token-utils.get-tokens-for(
     $tokens,
     m2-form-field.$prefix,
     $options...
   );
-  @include token-utils.create-token-values(
-    m2-filled-text-field.$prefix,
-    $mdc-filled-text-field-tokens
-  );
-  @include token-utils.create-token-values(
-    m2-outlined-text-field.$prefix,
-    $mdc-outlined-text-field-tokens
-  );
   @include token-utils.create-token-values(m2-form-field.$prefix, $mat-form-field-tokens);
 }
diff --git a/src/material/form-field/_m2-filled-text-field.scss b/src/material/form-field/_m2-filled-text-field.scss
deleted file mode 100644
index 44e909802805..000000000000
--- a/src/material/form-field/_m2-filled-text-field.scss
+++ /dev/null
@@ -1,114 +0,0 @@
-@use 'sass:color';
-@use 'sass:map';
-@use 'sass:meta';
-@use '../core/theming/inspection';
-@use '../core/style/sass-utils';
-@use '../core/tokens/m2-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, form-field-filled);
-
-// Tokens that can't be configured through Angular Material's current theming API,
-// but may be in a future version of the theming API.
-//
-// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
-// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
-// our CSS.
-@function get-unthemable-tokens() {
-  @return (
-    active-indicator-height: 1px,
-    focus-active-indicator-height: 2px,
-    container-shape: 4px,
-  );
-}
-
-// 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: inspection.get-theme-color($theme, background, card);
-  $warn-color: inspection.get-theme-color($theme, warn);
-  $color-tokens: private-get-color-palette-color-tokens($theme, primary);
-  $on-surface: if($is-dark, #fff, #000);
-
-  // Ideally we would derive all values directly from the theme, but it causes a lot of regressions
-  // internally. For now we fall back to the old hardcoded behavior only for internal apps.
-  $text-color-base: if(m2-utils.$private-is-internal-build, $on-surface,
-    inspection.get-theme-color($theme, foreground, text, 1));
-  $disabled-text-color-base: if(m2-utils.$private-is-internal-build, $on-surface,
-    inspection.get-theme-color($theme, foreground, disabled-text, 1));
-  $divider-base: if(m2-utils.$private-is-internal-build, $on-surface,
-    inspection.get-theme-color($theme, foreground, divider, 1));
-
-  @return map.merge($color-tokens, (
-    container-color: _variable-safe-mix($on-surface, $surface, 4%),
-    disabled-container-color: _variable-safe-mix($on-surface, $surface, 2%),
-
-    label-text-color: sass-utils.safe-color-change($text-color-base, $alpha: 0.6),
-    hover-label-text-color: sass-utils.safe-color-change($text-color-base, $alpha: 0.6),
-    disabled-label-text-color:
-      sass-utils.safe-color-change($disabled-text-color-base, $alpha: 0.38),
-
-    input-text-color: sass-utils.safe-color-change($text-color-base, $alpha: 0.87),
-    disabled-input-text-color:
-      sass-utils.safe-color-change($disabled-text-color-base, $alpha: 0.38),
-    input-text-placeholder-color:
-      sass-utils.safe-color-change($text-color-base, $alpha: 0.6),
-
-    error-hover-label-text-color: $warn-color,
-    error-focus-label-text-color: $warn-color,
-    error-label-text-color: $warn-color,
-    error-caret-color: $warn-color,
-
-    active-indicator-color: sass-utils.safe-color-change($divider-base, $alpha: 0.42),
-    disabled-active-indicator-color: sass-utils.safe-color-change($divider-base, $alpha: 0.06),
-    hover-active-indicator-color: sass-utils.safe-color-change($divider-base, $alpha: 0.87),
-    error-active-indicator-color: $warn-color,
-    error-focus-active-indicator-color: $warn-color,
-    error-hover-active-indicator-color: $warn-color,
-  ));
-}
-
-@function _variable-safe-mix($first-color, $second-color, $amount) {
-  @if (meta.type-of($first-color) == color and meta.type-of($second-color) == color) {
-    @return color.mix($first-color, $second-color, $amount);
-  }
-  @return $first-color;
-}
-
-// Generates the mapping for the properties that change based on the text field color.
-@function private-get-color-palette-color-tokens($theme, $palette-name) {
-  $palette: map.get($theme, $palette-name);
-  $palette-color: inspection.get-theme-color($theme, $palette-name);
-
-  @return (
-    caret-color: $palette-color,
-    focus-active-indicator-color: $palette-color,
-    focus-label-text-color: sass-utils.safe-color-change($palette-color, $alpha: 0.87),
-  );
-}
-
-// Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($theme) {
-  @return (
-    label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
-    label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
-    label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
-    label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
-  );
-}
-
-// 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(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}
diff --git a/src/material/form-field/_m2-form-field.scss b/src/material/form-field/_m2-form-field.scss
index 28dd9c753c24..11b92b0d6cfd 100644
--- a/src/material/form-field/_m2-form-field.scss
+++ b/src/material/form-field/_m2-form-field.scss
@@ -1,10 +1,12 @@
-@use 'sass:math';
-@use 'sass:map';
-@use '../core/tokens/m2-utils';
+@use '../core/m2/palette' as m2-palette;
 @use '../core/style/sass-utils';
-@use '../core/theming/theming';
 @use '../core/theming/inspection';
-@use '../core/m2/palette' as m2-palette;
+@use '../core/theming/theming';
+@use '../core/tokens/m2-utils';
+@use 'sass:color';
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, form-field);
@@ -12,13 +14,33 @@ $prefix: (mat, form-field);
 // 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 ();
+  @return (
+    filled-active-indicator-height: 1px,
+    filled-focus-active-indicator-height: 2px,
+    filled-container-shape: 4px,
+    outlined-outline-width: 1px,
+    outlined-focus-outline-width: 2px,
+    outlined-container-shape: 4px,
+  );
 }
 
 // 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: inspection.get-theme-color($theme, background, card);
+  $warn-color: inspection.get-theme-color($theme, warn);
   $color-tokens: private-get-color-palette-color-tokens($theme, primary);
+  $on-surface: if($is-dark, #fff, #000);
+
+  // Ideally we would derive all values directly from the theme, but it causes a lot of regressions
+  // internally. For now we fall back to the old hardcoded behavior only for internal apps.
+  $on-surface: if($is-dark, #fff, #000);
+  $text-color-base: if(m2-utils.$private-is-internal-build, $on-surface,
+    inspection.get-theme-color($theme, foreground, text, 1));
+  $disabled-text-color-base: if(m2-utils.$private-is-internal-build, $on-surface,
+    inspection.get-theme-color($theme, foreground, disabled-text, 1));
+  $divider-base: if(m2-utils.$private-is-internal-build, $on-surface,
+    inspection.get-theme-color($theme, foreground, divider, 1));
 
   @return map.merge($color-tokens, (
     // MDC has a token for the enabled placeholder, but not for the disabled one.
@@ -45,27 +67,78 @@ $prefix: (mat, form-field);
     // are the same).
     leading-icon-color: unset,
     disabled-leading-icon-color: unset,
-
     trailing-icon-color: unset,
     disabled-trailing-icon-color: unset,
     error-focus-trailing-icon-color: unset,
     error-hover-trailing-icon-color: unset,
     error-trailing-icon-color: unset,
-
     enabled-select-arrow-color: inspection.get-theme-color($theme, foreground, icon, 0.54),
     disabled-select-arrow-color: inspection.get-theme-color($theme, foreground, icon, 0.38),
-
     hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
     focus-state-layer-opacity: if($is-dark, 0.24, 0.08),
+    filled-container-color: _variable-safe-mix($on-surface, $surface, 4%),
+    filled-disabled-container-color: _variable-safe-mix($on-surface, $surface, 2%),
+    filled-label-text-color: sass-utils.safe-color-change($text-color-base, $alpha: 0.6),
+    filled-hover-label-text-color: sass-utils.safe-color-change($text-color-base, $alpha: 0.6),
+    filled-disabled-label-text-color:
+        sass-utils.safe-color-change($disabled-text-color-base, $alpha: 0.38),
+    filled-input-text-color: sass-utils.safe-color-change($text-color-base, $alpha: 0.87),
+    filled-disabled-input-text-color:
+        sass-utils.safe-color-change($disabled-text-color-base, $alpha: 0.38),
+    filled-input-text-placeholder-color:
+        sass-utils.safe-color-change($text-color-base, $alpha: 0.6),
+    filled-error-hover-label-text-color: $warn-color,
+    filled-error-focus-label-text-color: $warn-color,
+    filled-error-label-text-color: $warn-color,
+    filled-error-caret-color: $warn-color,
+    filled-active-indicator-color: sass-utils.safe-color-change($divider-base, $alpha: 0.42),
+    filled-disabled-active-indicator-color:
+        sass-utils.safe-color-change($divider-base, $alpha: 0.06),
+    filled-hover-active-indicator-color: sass-utils.safe-color-change($divider-base, $alpha: 0.87),
+    filled-error-active-indicator-color: $warn-color,
+    filled-error-focus-active-indicator-color: $warn-color,
+    filled-error-hover-active-indicator-color: $warn-color,
+    outlined-label-text-color: sass-utils.safe-color-change($text-color-base, $alpha: 0.6),
+    outlined-hover-label-text-color: sass-utils.safe-color-change($text-color-base, $alpha: 0.6),
+    outlined-disabled-label-text-color:
+        sass-utils.safe-color-change($disabled-text-color-base, $alpha: 0.38),
+    outlined-input-text-color: sass-utils.safe-color-change($text-color-base, $alpha: 0.87),
+    outlined-disabled-input-text-color:
+        sass-utils.safe-color-change($disabled-text-color-base, $alpha: 0.38),
+    outlined-input-text-placeholder-color:
+        sass-utils.safe-color-change($text-color-base, $alpha: 0.6),
+    outlined-error-caret-color: $warn-color,
+    outlined-error-focus-label-text-color: $warn-color,
+    outlined-error-label-text-color: $warn-color,
+    outlined-error-hover-label-text-color: $warn-color,
+    outlined-outline-color: sass-utils.safe-color-change($divider-base, $alpha: 0.38),
+    outlined-disabled-outline-color: sass-utils.safe-color-change($divider-base, $alpha: 0.06),
+    outlined-hover-outline-color: sass-utils.safe-color-change($divider-base, $alpha: 0.87),
+    outlined-error-focus-outline-color: $warn-color,
+    outlined-error-hover-outline-color: $warn-color,
+    outlined-error-outline-color: $warn-color,
   ));
 }
 
+@function _variable-safe-mix($first-color, $second-color, $amount) {
+  @if (meta.type-of($first-color) == color and meta.type-of($second-color) == color) {
+    @return color.mix($first-color, $second-color, $amount);
+  }
+  @return $first-color;
+}
+
 // Generates the mapping for the properties that change based on the form field color.
 @function private-get-color-palette-color-tokens($theme, $palette-name) {
   $palette-color: inspection.get-theme-color($theme, $palette-name);
 
   @return (
     focus-select-arrow-color: sass-utils.safe-color-change($palette-color, $alpha: 0.87),
+    filled-caret-color: $palette-color,
+    filled-focus-active-indicator-color: $palette-color,
+    filled-focus-label-text-color: sass-utils.safe-color-change($palette-color, $alpha: 0.87),
+    outlined-caret-color: $palette-color,
+    outlined-focus-outline-color: $palette-color,
+    outlined-focus-label-text-color: sass-utils.safe-color-change($palette-color, $alpha: 0.87),
   );
 }
 
@@ -96,6 +169,14 @@ $prefix: (mat, form-field);
     subscript-text-size: inspection.get-theme-typography($theme, caption, font-size),
     subscript-text-tracking: inspection.get-theme-typography($theme, caption, letter-spacing),
     subscript-text-weight: inspection.get-theme-typography($theme, caption, font-weight),
+    filled-label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
+    filled-label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
+    filled-label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
+    filled-label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
+    outlined-label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
+    outlined-label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
+    outlined-label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
+    outlined-label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
   );
 }
 
diff --git a/src/material/form-field/_m2-outlined-text-field.scss b/src/material/form-field/_m2-outlined-text-field.scss
deleted file mode 100644
index 957b16310576..000000000000
--- a/src/material/form-field/_m2-outlined-text-field.scss
+++ /dev/null
@@ -1,100 +0,0 @@
-@use 'sass:map';
-@use '../core/theming/inspection';
-@use '../core/style/sass-utils';
-@use '../core/tokens/m2-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, form-field-outlined);
-
-// Tokens that can't be configured through Angular Material's current theming API,
-// but may be in a future version of the theming API.
-//
-// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
-// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
-// our CSS.
-@function get-unthemable-tokens() {
-  @return (
-    outline-width: 1px,
-    focus-outline-width: 2px,
-    container-shape: 4px,
-  );
-}
-
-// 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;
-  $warn-color: inspection.get-theme-color($theme, warn);
-  $color-tokens: private-get-color-palette-color-tokens($theme, primary);
-
-  // Ideally we would derive all values directly from the theme, but it causes a lot of regressions
-  // internally. For now we fall back to the old hardcoded behavior only for internal apps.
-  $on-surface: if($is-dark, #fff, #000);
-  $text-color-base: if(m2-utils.$private-is-internal-build, $on-surface,
-    inspection.get-theme-color($theme, foreground, text, 1));
-  $disabled-text-color-base: if(m2-utils.$private-is-internal-build, $on-surface,
-    inspection.get-theme-color($theme, foreground, disabled-text, 1));
-  $divider-base: if(m2-utils.$private-is-internal-build, $on-surface,
-    inspection.get-theme-color($theme, foreground, divider, 1));
-
-  @return map.merge($color-tokens, (
-    label-text-color: sass-utils.safe-color-change($text-color-base, $alpha: 0.6),
-    hover-label-text-color: sass-utils.safe-color-change($text-color-base, $alpha: 0.6),
-    disabled-label-text-color:
-      sass-utils.safe-color-change($disabled-text-color-base, $alpha: 0.38),
-
-    input-text-color: sass-utils.safe-color-change($text-color-base, $alpha: 0.87),
-    disabled-input-text-color:
-      sass-utils.safe-color-change($disabled-text-color-base, $alpha: 0.38),
-    input-text-placeholder-color: sass-utils.safe-color-change($text-color-base, $alpha: 0.6),
-
-    error-caret-color: $warn-color,
-    error-focus-label-text-color: $warn-color,
-    error-label-text-color: $warn-color,
-    error-hover-label-text-color: $warn-color,
-
-    // Outline tokens
-    outline-color: sass-utils.safe-color-change($divider-base, $alpha: 0.38),
-    disabled-outline-color: sass-utils.safe-color-change($divider-base, $alpha: 0.06),
-    hover-outline-color: sass-utils.safe-color-change($divider-base, $alpha: 0.87),
-    error-focus-outline-color: $warn-color,
-    error-hover-outline-color: $warn-color,
-    error-outline-color: $warn-color,
-  ));
-}
-
-// Generates the mapping for the properties that change based on the text field color.
-@function private-get-color-palette-color-tokens($theme, $palette-name) {
-  $palette-color: inspection.get-theme-color($theme, $palette-name);
-
-  @return (
-    caret-color: $palette-color,
-    focus-outline-color: $palette-color,
-    focus-label-text-color: sass-utils.safe-color-change($palette-color, $alpha: 0.87),
-  );
-}
-
-// Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($theme) {
-  @return (
-    label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
-    label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
-    label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
-    label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
-  );
-}
-
-// 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(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}
diff --git a/src/material/form-field/_m3-filled-text-field.scss b/src/material/form-field/_m3-filled-text-field.scss
deleted file mode 100644
index de0a2a3977b5..000000000000
--- a/src/material/form-field/_m3-filled-text-field.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-@use 'sass:map';
-@use '../core/tokens/m3-utils';
-@use '../core/style/sass-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, form-field-filled);
-
-/// Generates the tokens for MDC filled-text-field
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @param {Map} $token-slots Possible token slots
-/// @return {Map} A set of tokens for the MDC filled-text-field
-@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: (
-    active-indicator-color: map.get($systems, md-sys-color, on-surface-variant),
-    active-indicator-height: if($exclude-hardcoded, null, 1px),
-    caret-color: map.get($systems, md-sys-color, primary),
-    container-color: map.get($systems, md-sys-color, surface-variant),
-    container-shape: map.get($systems, md-sys-shape, corner-extra-small),
-    disabled-active-indicator-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
-    disabled-container-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-surface), $alpha: 0.04),
-    disabled-input-text-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
-    disabled-label-text-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
-    error-active-indicator-color: map.get($systems, md-sys-color, error),
-    error-focus-active-indicator-color: map.get($systems, md-sys-color, error),
-    error-focus-label-text-color: map.get($systems, md-sys-color, error),
-    error-hover-active-indicator-color: map.get($systems, md-sys-color, on-error-container),
-    error-hover-label-text-color: map.get($systems, md-sys-color, on-error-container),
-    error-label-text-color: map.get($systems, md-sys-color, error),
-    focus-active-indicator-color: map.get($systems, md-sys-color, primary),
-    focus-active-indicator-height: if($exclude-hardcoded, null, 2px),
-    focus-label-text-color: map.get($systems, md-sys-color, primary),
-    hover-active-indicator-color: map.get($systems, md-sys-color, on-surface),
-    hover-label-text-color: map.get($systems, md-sys-color, on-surface-variant),
-    input-text-color: map.get($systems, md-sys-color, on-surface),
-    input-text-placeholder-color: map.get($systems, md-sys-color, on-surface-variant),
-    label-text-color: map.get($systems, md-sys-color, on-surface-variant),
-    label-text-font: map.get($systems, md-sys-typescale, body-large-font),
-    label-text-size: map.get($systems, md-sys-typescale, body-large-size),
-    label-text-tracking: map.get($systems, md-sys-typescale, body-large-tracking),
-    label-text-weight: map.get($systems, md-sys-typescale, body-large-weight),
-  );
-
-  $variant-tokens: (
-    primary: (), // Default, no overrides needed
-    secondary: (
-      caret-color: map.get($systems, md-sys-color, secondary),
-      focus-active-indicator-color: map.get($systems, md-sys-color, secondary),
-      focus-label-text-color: map.get($systems, md-sys-color, secondary),
-    ),
-    tertiary: (
-      caret-color: map.get($systems, md-sys-color, tertiary),
-      focus-active-indicator-color: map.get($systems, md-sys-color, tertiary),
-      focus-label-text-color: map.get($systems, md-sys-color, tertiary),
-    ),
-    error: (
-      caret-color: map.get($systems, md-sys-color, error),
-      focus-active-indicator-color: map.get($systems, md-sys-color, error),
-      focus-label-text-color: map.get($systems, md-sys-color, error),
-    ),
-  );
-
-  @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
-}
diff --git a/src/material/form-field/_m3-form-field.scss b/src/material/form-field/_m3-form-field.scss
index 36a2f50c2128..c06a11b5acd6 100644
--- a/src/material/form-field/_m3-form-field.scss
+++ b/src/material/form-field/_m3-form-field.scss
@@ -15,28 +15,88 @@ $prefix: (mat, form-field);
     m3-utils.generate-typography-tokens($systems, container-text, body-large),
     m3-utils.generate-typography-tokens($systems, subscript-text, body-small),
     (
-      disabled-input-text-placeholder-color: sass-utils.safe-color-change(
-          map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+      disabled-input-text-placeholder-color:
+          sass-utils.safe-color-change(map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
       state-layer-color: map.get($systems, md-sys-color, on-surface),
       error-text-color: map.get($systems, md-sys-color, error),
       select-option-text-color: map.get($systems, md-ref-palette, neutral10),
-      select-disabled-option-text-color: sass-utils.safe-color-change(
-          map.get($systems, md-ref-palette, neutral10), $alpha: 0.38),
+      select-disabled-option-text-color:
+          sass-utils.safe-color-change(map.get($systems, md-ref-palette, neutral10), $alpha: 0.38),
       enabled-select-arrow-color: map.get($systems, md-sys-color, on-surface-variant),
-      disabled-select-arrow-color: sass-utils.safe-color-change(
-          map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+      disabled-select-arrow-color:
+          sass-utils.safe-color-change(map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
       hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
       focus-state-layer-opacity: m3-utils.hardcode(0, $exclude-hardcoded),
       focus-select-arrow-color: map.get($systems, md-sys-color, primary),
       leading-icon-color: map.get($systems, md-sys-color, on-surface-variant),
-      disabled-leading-icon-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+      disabled-leading-icon-color:
+          sass-utils.safe-color-change(map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
       trailing-icon-color: map.get($systems, md-sys-color, on-surface-variant),
-      disabled-trailing-icon-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+      disabled-trailing-icon-color:
+          sass-utils.safe-color-change(map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
       error-focus-trailing-icon-color: map.get($systems, md-sys-color, error),
       error-hover-trailing-icon-color: map.get($systems, md-sys-color, on-error-container),
       error-trailing-icon-color: map.get($systems, md-sys-color, error),
+      filled-active-indicator-color: map.get($systems, md-sys-color, on-surface-variant),
+      filled-active-indicator-height: if($exclude-hardcoded, null, 1px),
+      filled-caret-color: map.get($systems, md-sys-color, primary),
+      filled-container-color: map.get($systems, md-sys-color, surface-variant),
+      filled-container-shape: map.get($systems, md-sys-shape, corner-extra-small),
+      filled-disabled-active-indicator-color:
+          sass-utils.safe-color-change(map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+      filled-disabled-container-color:
+          sass-utils.safe-color-change(map.get($systems, md-sys-color, on-surface), $alpha: 0.04),
+      filled-disabled-input-text-color:
+          sass-utils.safe-color-change(map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+      filled-disabled-label-text-color:
+          sass-utils.safe-color-change(map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+      filled-error-active-indicator-color: map.get($systems, md-sys-color, error),
+      filled-error-focus-active-indicator-color: map.get($systems, md-sys-color, error),
+      filled-error-focus-label-text-color: map.get($systems, md-sys-color, error),
+      filled-error-hover-active-indicator-color:
+          map.get($systems, md-sys-color, on-error-container),
+      filled-error-hover-label-text-color: map.get($systems, md-sys-color, on-error-container),
+      filled-error-label-text-color: map.get($systems, md-sys-color, error),
+      filled-focus-active-indicator-color: map.get($systems, md-sys-color, primary),
+      filled-focus-active-indicator-height: if($exclude-hardcoded, null, 2px),
+      filled-focus-label-text-color: map.get($systems, md-sys-color, primary),
+      filled-hover-active-indicator-color: map.get($systems, md-sys-color, on-surface),
+      filled-hover-label-text-color: map.get($systems, md-sys-color, on-surface-variant),
+      filled-input-text-color: map.get($systems, md-sys-color, on-surface),
+      filled-input-text-placeholder-color: map.get($systems, md-sys-color, on-surface-variant),
+      filled-label-text-color: map.get($systems, md-sys-color, on-surface-variant),
+      filled-label-text-font: map.get($systems, md-sys-typescale, body-large-font),
+      filled-label-text-size: map.get($systems, md-sys-typescale, body-large-size),
+      filled-label-text-tracking: map.get($systems, md-sys-typescale, body-large-tracking),
+      filled-label-text-weight: map.get($systems, md-sys-typescale, body-large-weight),
+      outlined-caret-color: map.get($systems, md-sys-color, primary),
+      outlined-container-shape: map.get($systems, md-sys-shape, corner-extra-small),
+      outlined-disabled-input-text-color:
+          sass-utils.safe-color-change(map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+      outlined-disabled-label-text-color:
+          sass-utils.safe-color-change(map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+      outlined-disabled-outline-color:
+          sass-utils.safe-color-change(map.get($systems, md-sys-color, on-surface), $alpha: 0.12),
+      outlined-error-focus-label-text-color: map.get($systems, md-sys-color, error),
+      outlined-error-focus-outline-color: map.get($systems, md-sys-color, error),
+      outlined-error-hover-label-text-color: map.get($systems, md-sys-color, on-error-container),
+      outlined-error-hover-outline-color: map.get($systems, md-sys-color, on-error-container),
+      outlined-error-label-text-color: map.get($systems, md-sys-color, error),
+      outlined-error-outline-color: map.get($systems, md-sys-color, error),
+      outlined-focus-label-text-color: map.get($systems, md-sys-color, primary),
+      outlined-focus-outline-color: map.get($systems, md-sys-color, primary),
+      outlined-focus-outline-width: if($exclude-hardcoded, null, 2px),
+      outlined-hover-label-text-color: map.get($systems, md-sys-color, on-surface),
+      outlined-hover-outline-color: map.get($systems, md-sys-color, on-surface),
+      outlined-input-text-color: map.get($systems, md-sys-color, on-surface),
+      outlined-input-text-placeholder-color: map.get($systems, md-sys-color, on-surface-variant),
+      outlined-label-text-color: map.get($systems, md-sys-color, on-surface-variant),
+      outlined-label-text-font: map.get($systems, md-sys-typescale, body-large-font),
+      outlined-label-text-size: map.get($systems, md-sys-typescale, body-large-size),
+      outlined-label-text-tracking: map.get($systems, md-sys-typescale, body-large-tracking),
+      outlined-label-text-weight: map.get($systems, md-sys-typescale, body-large-weight),
+      outlined-outline-color: map.get($systems, md-sys-color, outline),
+      outlined-outline-width: if($exclude-hardcoded, null, 1px),
     )
   );
 
@@ -45,12 +105,30 @@ $prefix: (mat, form-field);
     primary: (), // Default, no overrides needed.
     secondary: (
       focus-select-arrow-color: map.get($systems, md-sys-color, secondary),
+      filled-caret-color: map.get($systems, md-sys-color, secondary),
+      filled-focus-active-indicator-color: map.get($systems, md-sys-color, secondary),
+      filled-focus-label-text-color: map.get($systems, md-sys-color, secondary),
+      outlined-caret-color: map.get($systems, md-sys-color, secondary),
+      outlined-focus-label-text-color: map.get($systems, md-sys-color, secondary),
+      outlined-focus-outline-color: map.get($systems, md-sys-color, secondary),
     ),
     tertiary: (
       focus-select-arrow-color: map.get($systems, md-sys-color, tertiary),
+      filled-caret-color: map.get($systems, md-sys-color, tertiary),
+      filled-focus-active-indicator-color: map.get($systems, md-sys-color, tertiary),
+      filled-focus-label-text-color: map.get($systems, md-sys-color, tertiary),
+      outlined-caret-color: map.get($systems, md-sys-color, tertiary),
+      outlined-focus-label-text-color: map.get($systems, md-sys-color, tertiary),
+      outlined-focus-outline-color: map.get($systems, md-sys-color, tertiary),
     ),
     error: (
       focus-select-arrow-color: map.get($systems, md-sys-color, error),
+      filled-caret-color: map.get($systems, md-sys-color, error),
+      filled-focus-active-indicator-color: map.get($systems, md-sys-color, error),
+      filled-focus-label-text-color: map.get($systems, md-sys-color, error),
+      outlined-caret-color: map.get($systems, md-sys-color, error),
+      outlined-focus-label-text-color: map.get($systems, md-sys-color, error),
+      outlined-focus-outline-color: map.get($systems, md-sys-color, error),
     )
   );
 
diff --git a/src/material/form-field/_m3-outlined-text-field.scss b/src/material/form-field/_m3-outlined-text-field.scss
deleted file mode 100644
index 4345731a1939..000000000000
--- a/src/material/form-field/_m3-outlined-text-field.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-@use 'sass:map';
-@use '../core/tokens/m3-utils';
-@use '../core/style/sass-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, form-field-outlined);
-
-/// Generates the tokens for MDC outlined-text-field
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @param {Map} $token-slots Possible token slots
-/// @return {Map} A set of tokens for the MDC outlined-text-field
-@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: (
-    caret-color: map.get($systems, md-sys-color, primary),
-    container-shape: map.get($systems, md-sys-shape, corner-extra-small),
-    disabled-input-text-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
-    disabled-label-text-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
-    disabled-outline-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-surface), $alpha: 0.12),
-    error-focus-label-text-color: map.get($systems, md-sys-color, error),
-    error-focus-outline-color: map.get($systems, md-sys-color, error),
-    error-hover-label-text-color: map.get($systems, md-sys-color, on-error-container),
-    error-hover-outline-color: map.get($systems, md-sys-color, on-error-container),
-    error-label-text-color: map.get($systems, md-sys-color, error),
-    error-outline-color: map.get($systems, md-sys-color, error),
-    focus-label-text-color: map.get($systems, md-sys-color, primary),
-    focus-outline-color: map.get($systems, md-sys-color, primary),
-    focus-outline-width: if($exclude-hardcoded, null, 2px),
-    hover-label-text-color: map.get($systems, md-sys-color, on-surface),
-    hover-outline-color: map.get($systems, md-sys-color, on-surface),
-    input-text-color: map.get($systems, md-sys-color, on-surface),
-    input-text-placeholder-color: map.get($systems, md-sys-color, on-surface-variant),
-    label-text-color: map.get($systems, md-sys-color, on-surface-variant),
-    label-text-font: map.get($systems, md-sys-typescale, body-large-font),
-    label-text-size: map.get($systems, md-sys-typescale, body-large-size),
-    label-text-tracking: map.get($systems, md-sys-typescale, body-large-tracking),
-    label-text-weight: map.get($systems, md-sys-typescale, body-large-weight),
-    outline-color: map.get($systems, md-sys-color, outline),
-    outline-width: if($exclude-hardcoded, null, 1px),
-  );
-
-  $variant-tokens: (
-    primary: (), // Default, no overrides needed
-    secondary: (
-      caret-color: map.get($systems, md-sys-color, secondary),
-      focus-label-text-color: map.get($systems, md-sys-color, secondary),
-      focus-outline-color: map.get($systems, md-sys-color, secondary),
-    ),
-    tertiary: (
-      caret-color: map.get($systems, md-sys-color, tertiary),
-      focus-label-text-color: map.get($systems, md-sys-color, tertiary),
-      focus-outline-color: map.get($systems, md-sys-color, tertiary),
-    ),
-    error: (
-      caret-color: map.get($systems, md-sys-color, error),
-      focus-label-text-color: map.get($systems, md-sys-color, error),
-      focus-outline-color: map.get($systems, md-sys-color, error),
-    ),
-  );
-
-  @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
-}
diff --git a/src/material/form-field/_mdc-text-field-density-overrides.scss b/src/material/form-field/_mdc-text-field-density-overrides.scss
index e8b2da41ed4a..248c159d5245 100644
--- a/src/material/form-field/_mdc-text-field-density-overrides.scss
+++ b/src/material/form-field/_mdc-text-field-density-overrides.scss
@@ -9,8 +9,7 @@
 // specification. In order to support density, we need to adjust the vertical spacing to be
 // based on the density scale.
 @mixin private-text-field-density-overrides() {
-  @include token-utils.use-tokens(
-      m2-form-field.$prefix, m2-form-field.get-token-slots()) {
+  @include token-utils.use-tokens(m2-form-field.$prefix, m2-form-field.get-token-slots()) {
     $height: token-utils.slot(container-height);
 
     .mat-mdc-form-field-infix {
diff --git a/src/material/form-field/_mdc-text-field-structure-overrides.scss b/src/material/form-field/_mdc-text-field-structure-overrides.scss
index 96419c6b5223..15202fb913b5 100644
--- a/src/material/form-field/_mdc-text-field-structure-overrides.scss
+++ b/src/material/form-field/_mdc-text-field-structure-overrides.scss
@@ -116,8 +116,7 @@ $_enable-form-field-will-change-reset: true;
   // is disabled, but now there's no token for it so we need to implement it ourselves.
   .mat-form-field-disabled .mdc-text-field__input {
     @include vendor-prefixes.input-placeholder {
-      @include token-utils.use-tokens(
-          m2-form-field.$prefix, m2-form-field.get-token-slots()) {
+      @include token-utils.use-tokens(m2-form-field.$prefix, m2-form-field.get-token-slots()) {
         color: token-utils.slot(disabled-input-text-placeholder-color);
       }
     }
diff --git a/src/material/form-field/_mdc-text-field-structure.scss b/src/material/form-field/_mdc-text-field-structure.scss
index 03774045f5ca..d053a08fb59b 100644
--- a/src/material/form-field/_mdc-text-field-structure.scss
+++ b/src/material/form-field/_mdc-text-field-structure.scss
@@ -1,138 +1,161 @@
 @use '@angular/cdk';
 @use '../core/style/vendor-prefixes';
 @use '../core/tokens/token-utils';
-@use './m2-filled-text-field';
-@use './m2-outlined-text-field';
+@use './m2-form-field';
 
-$filled-token-prefix: m2-filled-text-field.$prefix;
-$filled-token-slots: m2-filled-text-field.get-token-slots();
-$outlined-token-prefix: m2-outlined-text-field.$prefix;
-$outlined-token-slots: m2-outlined-text-field.get-token-slots();
+// File contains some extra long selectors due to MDC's old styling
+// stylelint-disable max-line-length
+
+$token-prefix: m2-form-field.$prefix;
+$token-slots: m2-form-field.get-token-slots();
 
 // Includes the structural styles for the form field inherited from MDC.
 @mixin private-text-field-structure {
-  .mdc-text-field {
-    display: inline-flex;
-    align-items: baseline;
-    padding: 0 16px;
-    position: relative;
-    box-sizing: border-box;
-    overflow: hidden;
-    will-change: opacity, transform, color;
-
-    // TODO(crisbeto): The filled form field overrides these while the outlined doesn't.
-    // The correct thing to do would be to remove them from here and have the one based on the
-    // token in the outlined appearance. We keep them as is for now to avoid screenshot diffs.
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  .mdc-text-field__input {
-    width: 100%;
-    min-width: 0;
-    border: none;
-    border-radius: 0;
-    background: none;
-    padding: 0;
-    -moz-appearance: none;
-    -webkit-appearance: none;
-
-    // TODO(crisbeto): this height gets overwritten eventually, but there are some internal
-    // tests that depend on this being here in weird ways so we're keeping it around for now.
-    height: 28px;
-
-    // Note that while this style and the `-ms-clear` are identical, we can't combine
-    // them because if one of them isn't supported, it'll invalidate the whole rule.
-    &::-webkit-calendar-picker-indicator {
-      display: none;
-    }
-
-    &::-ms-clear {
-      display: none;
+  @include token-utils.use-tokens($token-prefix, $token-slots) {
+    .mdc-text-field {
+      display: inline-flex;
+      align-items: baseline;
+      padding: 0 16px;
+      position: relative;
+      box-sizing: border-box;
+      overflow: hidden;
+      will-change: opacity, transform, color;
+
+      // TODO(crisbeto): The filled form field overrides these while the outlined doesn't.
+      // The correct thing to do would be to remove them from here and have the one based on the
+      // token in the outlined appearance. We keep them as is for now to avoid screenshot diffs.
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
     }
 
-    &:focus {
-      outline: none;
-    }
+    .mdc-text-field__input {
+      width: 100%;
+      min-width: 0;
+      border: none;
+      border-radius: 0;
+      background: none;
+      padding: 0;
+      -moz-appearance: none;
+      -webkit-appearance: none;
+
+      // TODO(crisbeto): this height gets overwritten eventually, but there are some internal
+      // tests that depend on this being here in weird ways so we're keeping it around for now.
+      height: 28px;
+
+      // Note that while this style and the `-ms-clear` are identical, we can't combine
+      // them because if one of them isn't supported, it'll invalidate the whole rule.
+      &::-webkit-calendar-picker-indicator {
+        display: none;
+      }
 
-    &:invalid {
-      box-shadow: none;
-    }
+      &::-ms-clear {
+        display: none;
+      }
 
-    @include vendor-prefixes.input-placeholder {
-      opacity: 0;
-    }
+      &:focus {
+        outline: none;
+      }
 
-    .mdc-text-field--no-label &,
-    .mdc-text-field--focused & {
-      @include vendor-prefixes.input-placeholder {
-        opacity: 1;
+      &:invalid {
+        box-shadow: none;
       }
-    }
 
-    .mdc-text-field--disabled:not(.mdc-text-field--no-label) &.mat-mdc-input-disabled-interactive {
       @include vendor-prefixes.input-placeholder {
         opacity: 0;
       }
-    }
 
-    .mdc-text-field--outlined &,
-    .mdc-text-field--filled.mdc-text-field--no-label & {
-      height: 100%;
-    }
-
-    .mdc-text-field--outlined & {
-      display: flex;
-      border: none !important;
-      background-color: transparent;
-    }
+      .mdc-text-field--no-label &,
+      .mdc-text-field--focused & {
+        @include vendor-prefixes.input-placeholder {
+          opacity: 1;
+        }
+      }
 
-    .mdc-text-field--disabled & {
-      pointer-events: auto;
-    }
+      .mdc-text-field--disabled:not(.mdc-text-field--no-label)
+          &.mat-mdc-input-disabled-interactive {
+        @include vendor-prefixes.input-placeholder {
+          opacity: 0;
+        }
+      }
 
-    @include token-utils.use-tokens($filled-token-prefix, $filled-token-slots) {
-      @include _input-tokens('.mdc-text-field--filled');
-    }
+      .mdc-text-field--outlined &,
+      .mdc-text-field--filled.mdc-text-field--no-label & {
+        height: 100%;
+      }
 
-    @include token-utils.use-tokens($outlined-token-prefix, $outlined-token-slots) {
-      @include _input-tokens('.mdc-text-field--outlined');
-    }
+      .mdc-text-field--outlined & {
+        display: flex;
+        border: none !important;
+        background-color: transparent;
+      }
 
-    @include cdk.high-contrast {
       .mdc-text-field--disabled & {
-        background-color: Window;
+        pointer-events: auto;
+      }
+
+      .mdc-text-field--filled:not(.mdc-text-field--disabled) & {
+        color: token-utils.slot(filled-input-text-color);
+        caret-color: token-utils.slot(filled-caret-color);
+
+        @include vendor-prefixes.input-placeholder {
+          color: token-utils.slot(filled-input-text-placeholder-color);
+        }
+      }
+
+      .mdc-text-field--outlined:not(.mdc-text-field--disabled) & {
+        color: token-utils.slot(outlined-input-text-color);
+        caret-color: token-utils.slot(outlined-caret-color);
+
+        @include vendor-prefixes.input-placeholder {
+          color: token-utils.slot(outlined-input-text-placeholder-color);
+        }
       }
-    }
-  }
 
-  .mdc-text-field--filled {
-    height: 56px;
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
+      .mdc-text-field--filled.mdc-text-field--invalid:not(.mdc-text-field--disabled) & {
+        caret-color: token-utils.slot(filled-error-caret-color);
+      }
+
+      .mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled) & {
+        caret-color: token-utils.slot(outlined-error-caret-color);
+      }
+
+      .mdc-text-field--filled.mdc-text-field--disabled & {
+        color: token-utils.slot(filled-disabled-input-text-color);
+      }
+
+      .mdc-text-field--outlined.mdc-text-field--disabled & {
+        color: token-utils.slot(outlined-disabled-input-text-color);
+      }
 
-    @include token-utils.use-tokens($filled-token-prefix, $filled-token-slots) {
-      border-top-left-radius: token-utils.slot(container-shape);
-      border-top-right-radius: token-utils.slot(container-shape);
+      @include cdk.high-contrast {
+        .mdc-text-field--disabled & {
+          background-color: Window;
+        }
+      }
+    }
+
+    .mdc-text-field--filled {
+      height: 56px;
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+      border-top-left-radius: token-utils.slot(filled-container-shape);
+      border-top-right-radius: token-utils.slot(filled-container-shape);
 
       &:not(.mdc-text-field--disabled) {
-        background-color: token-utils.slot(container-color);
+        background-color: token-utils.slot(filled-container-color);
       }
 
       &.mdc-text-field--disabled {
-        background-color: token-utils.slot(disabled-container-color);
+        background-color: token-utils.slot(filled-disabled-container-color);
       }
     }
-  }
-
-  .mdc-text-field--outlined {
-    height: 56px;
-    overflow: visible;
 
-    @include token-utils.use-tokens($outlined-token-prefix, $outlined-token-slots) {
-      $shape-var: token-utils.slot(container-shape);
+    .mdc-text-field--outlined {
+      height: 56px;
+      overflow: visible;
+      $shape-var: token-utils.slot(outlined-container-shape);
       padding-right: max(16px, #{$shape-var});
       padding-left: max(16px, calc(#{$shape-var} + 4px));
 
@@ -141,424 +164,405 @@ $outlined-token-slots: m2-outlined-text-field.get-token-slots();
         padding-left: max(16px, #{$shape-var});
       }
     }
-  }
 
-  .mdc-floating-label {
-    position: absolute;
-    left: 0;
-    transform-origin: left top;
-    line-height: 1.15rem;
-    text-align: left;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    cursor: text;
-    overflow: hidden;
-    will-change: transform;
-
-    [dir='rtl'] & {
-      right: 0;
-      left: auto;
-      transform-origin: right top;
-      text-align: right;
-    }
+    .mdc-floating-label {
+      position: absolute;
+      left: 0;
+      transform-origin: left top;
+      line-height: 1.15rem;
+      text-align: left;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      cursor: text;
+      overflow: hidden;
+      will-change: transform;
 
-    .mdc-text-field & {
-      top: 50%;
-      transform: translateY(-50%);
-      pointer-events: none;
-    }
+      [dir='rtl'] & {
+        right: 0;
+        left: auto;
+        transform-origin: right top;
+        text-align: right;
+      }
 
-    .mdc-notched-outline & {
-      display: inline-block;
-      position: relative;
-      max-width: 100%;
-    }
+      .mdc-text-field & {
+        top: 50%;
+        transform: translateY(-50%);
+        pointer-events: none;
+      }
 
-    .mdc-text-field--outlined & {
-      left: 4px;
-      right: auto;
-    }
+      .mdc-notched-outline & {
+        display: inline-block;
+        position: relative;
+        max-width: 100%;
+      }
 
-    [dir='rtl'] .mdc-text-field--outlined & {
-      left: auto;
-      right: 4px;
-    }
+      .mdc-text-field--outlined & {
+        left: 4px;
+        right: auto;
+      }
 
-    .mdc-text-field--filled & {
-      left: 16px;
-      right: auto;
-    }
+      [dir='rtl'] .mdc-text-field--outlined & {
+        left: auto;
+        right: 4px;
+      }
 
-    [dir='rtl'] .mdc-text-field--filled & {
-      left: auto;
-      right: 16px;
-    }
+      .mdc-text-field--filled & {
+        left: 16px;
+        right: auto;
+      }
 
-    .mdc-text-field--disabled & {
-      cursor: default;
+      [dir='rtl'] .mdc-text-field--filled & {
+        left: auto;
+        right: 16px;
+      }
 
-      @include cdk.high-contrast {
-        z-index: 1;
+      .mdc-text-field--disabled & {
+        cursor: default;
+
+        @include cdk.high-contrast {
+          z-index: 1;
+        }
       }
-    }
 
-    .mdc-text-field--filled.mdc-text-field--no-label & {
-      display: none;
-    }
+      .mdc-text-field--filled.mdc-text-field--no-label & {
+        display: none;
+      }
 
-    @include token-utils.use-tokens($filled-token-prefix, $filled-token-slots) {
-      @include _floating-label-tokens('.mdc-text-field--filled');
-    }
+      .mdc-text-field--filled:not(.mdc-text-field--disabled) & {
+        color: token-utils.slot(filled-label-text-color);
+      }
 
-    @include token-utils.use-tokens($outlined-token-prefix, $outlined-token-slots) {
-      @include _floating-label-tokens('.mdc-text-field--outlined');
-    }
-  }
+      .mdc-text-field--filled:not(.mdc-text-field--disabled).mdc-text-field--focused & {
+        color: token-utils.slot(filled-focus-label-text-color);
+      }
 
-  .mdc-floating-label--float-above {
-    cursor: auto;
-    transform: translateY(-106%) scale(0.75);
+      .mdc-text-field--filled:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover & {
+        color: token-utils.slot(filled-hover-label-text-color);
+      }
 
-    .mdc-text-field--filled & {
-      transform: translateY(-106%) scale(0.75);
-    }
+      .mdc-text-field--filled.mdc-text-field--disabled & {
+        color: token-utils.slot(filled-disabled-label-text-color);
+      }
 
-    .mdc-text-field--outlined & {
-      transform: translateY(-37.25px) scale(1);
-      font-size: 0.75rem;
-    }
+      .mdc-text-field--filled:not(.mdc-text-field--disabled).mdc-text-field--invalid & {
+        color: token-utils.slot(filled-error-label-text-color);
+      }
 
-    .mdc-notched-outline & {
-      text-overflow: clip;
-    }
+      .mdc-text-field--filled:not(.mdc-text-field--disabled).mdc-text-field--invalid.mdc-text-field--focused & {
+        color: token-utils.slot(filled-error-focus-label-text-color);
+      }
 
-    .mdc-notched-outline--upgraded & {
-      max-width: 133.3333333333%;
-    }
+      .mdc-text-field--filled:not(.mdc-text-field--disabled).mdc-text-field--invalid:not(.mdc-text-field--disabled):hover & {
+        color: token-utils.slot(filled-error-hover-label-text-color);
+      }
 
-    .mdc-text-field--outlined.mdc-notched-outline--upgraded &,
-    .mdc-text-field--outlined .mdc-notched-outline--upgraded & {
-      transform: translateY(-34.75px) scale(0.75);
-    }
+      .mdc-text-field--filled & {
+        font-family: token-utils.slot(filled-label-text-font);
+        font-size: token-utils.slot(filled-label-text-size);
+        font-weight: token-utils.slot(filled-label-text-weight);
+        letter-spacing: token-utils.slot(filled-label-text-tracking);
+      }
 
-    .mdc-text-field--outlined.mdc-notched-outline--upgraded &,
-    .mdc-text-field--outlined .mdc-notched-outline--upgraded & {
-      font-size: 1rem;
-    }
-  }
+      .mdc-text-field--outlined:not(.mdc-text-field--disabled) & {
+        color: token-utils.slot(outlined-label-text-color);
+      }
 
-  .mdc-floating-label--required {
-    &:not(.mdc-floating-label--hide-required-marker)::after {
-      margin-left: 1px;
-      margin-right: 0;
-      content: '*';
+      .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused & {
+        color: token-utils.slot(outlined-focus-label-text-color);
+      }
 
-      [dir='rtl'] & {
-        margin-left: 0;
-        margin-right: 1px;
+      .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover & {
+        color: token-utils.slot(outlined-hover-label-text-color);
+      }
+
+      .mdc-text-field--outlined.mdc-text-field--disabled & {
+        color: token-utils.slot(outlined-disabled-label-text-color);
+      }
+
+      .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid & {
+        color: token-utils.slot(outlined-error-label-text-color);
+      }
+
+      .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid.mdc-text-field--focused & {
+        color: token-utils.slot(outlined-error-focus-label-text-color);
+      }
+
+      .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid:not(.mdc-text-field--disabled):hover & {
+        color: token-utils.slot(outlined-error-hover-label-text-color);
+      }
+
+      .mdc-text-field--outlined & {
+        font-family: token-utils.slot(outlined-label-text-font);
+        font-size: token-utils.slot(outlined-label-text-size);
+        font-weight: token-utils.slot(outlined-label-text-weight);
+        letter-spacing: token-utils.slot(outlined-label-text-tracking);
       }
     }
-  }
 
-  .mdc-notched-outline {
-    display: flex;
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    box-sizing: border-box;
-    width: 100%;
-    max-width: 100%;
-    height: 100%;
-    text-align: left;
-    pointer-events: none;
-
-    [dir='rtl'] & {
-      text-align: right;
+    .mdc-floating-label--float-above {
+      cursor: auto;
+      transform: translateY(-106%) scale(0.75);
+
+      .mdc-text-field--filled & {
+        transform: translateY(-106%) scale(0.75);
+      }
+
+      .mdc-text-field--outlined & {
+        transform: translateY(-37.25px) scale(1);
+        font-size: 0.75rem;
+      }
+
+      .mdc-notched-outline & {
+        text-overflow: clip;
+      }
+
+      .mdc-notched-outline--upgraded & {
+        max-width: 133.3333333333%;
+      }
+
+      .mdc-text-field--outlined.mdc-notched-outline--upgraded &,
+      .mdc-text-field--outlined .mdc-notched-outline--upgraded & {
+        transform: translateY(-34.75px) scale(0.75);
+      }
+
+      .mdc-text-field--outlined.mdc-notched-outline--upgraded &,
+      .mdc-text-field--outlined .mdc-notched-outline--upgraded & {
+        font-size: 1rem;
+      }
     }
 
-    .mdc-text-field--outlined & {
-      z-index: 1;
+    .mdc-floating-label--required {
+      &:not(.mdc-floating-label--hide-required-marker)::after {
+        margin-left: 1px;
+        margin-right: 0;
+        content: '*';
+
+        [dir='rtl'] & {
+          margin-left: 0;
+          margin-right: 1px;
+        }
+      }
     }
-  }
 
-  .mat-mdc-notch-piece {
-    box-sizing: border-box;
-    height: 100%;
-    pointer-events: none;
-    border-top: 1px solid;
-    border-bottom: 1px solid;
+    .mdc-notched-outline {
+      display: flex;
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      box-sizing: border-box;
+      width: 100%;
+      max-width: 100%;
+      height: 100%;
+      text-align: left;
+      pointer-events: none;
 
-    .mdc-text-field--focused & {
-      border-width: 2px;
+      [dir='rtl'] & {
+        text-align: right;
+      }
+
+      .mdc-text-field--outlined & {
+        z-index: 1;
+      }
     }
 
-    @include token-utils.use-tokens($outlined-token-prefix, $outlined-token-slots) {
+    .mat-mdc-notch-piece {
+      box-sizing: border-box;
+      height: 100%;
+      pointer-events: none;
+      border-top: 1px solid;
+      border-bottom: 1px solid;
+
+      .mdc-text-field--focused & {
+        border-width: 2px;
+      }
+
       // Moved out into variables because the selectors we inherited were too long.
       $enabled-selector: '.mdc-text-field--outlined:not(.mdc-text-field--disabled)';
       $hover-selector: ':not(.mdc-text-field--focused):hover';
 
       #{$enabled-selector} & {
-        border-color: token-utils.slot(outline-color);
-        border-width: token-utils.slot(outline-width);
+        border-color: token-utils.slot(outlined-outline-color);
+        border-width: token-utils.slot(outlined-outline-width);
       }
 
       #{$enabled-selector}#{$hover-selector} & {
-        border-color: token-utils.slot(hover-outline-color);
+        border-color: token-utils.slot(outlined-hover-outline-color);
       }
 
       #{$enabled-selector}.mdc-text-field--focused & {
-        border-color: token-utils.slot(focus-outline-color);
+        border-color: token-utils.slot(outlined-focus-outline-color);
       }
 
       .mdc-text-field--outlined.mdc-text-field--disabled & {
-        border-color: token-utils.slot(disabled-outline-color);
+        border-color: token-utils.slot(outlined-disabled-outline-color);
       }
 
       #{$enabled-selector}.mdc-text-field--invalid & {
-        border-color: token-utils.slot(error-outline-color);
+        border-color: token-utils.slot(outlined-error-outline-color);
       }
 
       #{$enabled-selector}.mdc-text-field--invalid#{$hover-selector} .mdc-notched-outline & {
-        border-color: token-utils.slot(error-hover-outline-color);
+        border-color: token-utils.slot(outlined-error-hover-outline-color);
       }
 
       #{$enabled-selector}.mdc-text-field--invalid.mdc-text-field--focused & {
-        border-color: token-utils.slot(error-focus-outline-color);
+        border-color: token-utils.slot(outlined-error-focus-outline-color);
       }
 
       #{$enabled-selector}.mdc-text-field--focused .mdc-notched-outline & {
-        border-width: token-utils.slot(focus-outline-width);
+        border-width: token-utils.slot(outlined-focus-outline-width);
       }
     }
-  }
-
-  .mdc-notched-outline__leading {
-    border-left: 1px solid;
-    border-right: none;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
 
-    @include token-utils.use-tokens($outlined-token-prefix, $outlined-token-slots) {
-      border-top-left-radius: token-utils.slot(container-shape);
-      border-bottom-left-radius: token-utils.slot(container-shape);
+    .mdc-notched-outline__leading {
+      border-left: 1px solid;
+      border-right: none;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      border-top-left-radius: token-utils.slot(outlined-container-shape);
+      border-bottom-left-radius: token-utils.slot(outlined-container-shape);
 
       .mdc-text-field--outlined .mdc-notched-outline & {
-        $shape-var: token-utils.slot(container-shape);
+        $shape-var: token-utils.slot(outlined-container-shape);
         width: max(12px, #{$shape-var});
       }
+
+      [dir='rtl'] & {
+        border-left: none;
+        border-right: 1px solid;
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+        border-top-right-radius: token-utils.slot(outlined-container-shape);
+        border-bottom-right-radius: token-utils.slot(outlined-container-shape);
+      }
     }
 
-    [dir='rtl'] & {
+    .mdc-notched-outline__trailing {
+      flex-grow: 1;
       border-left: none;
       border-right: 1px solid;
-      border-bottom-left-radius: 0;
       border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      border-top-right-radius: token-utils.slot(outlined-container-shape);
+      border-bottom-right-radius: token-utils.slot(outlined-container-shape);
 
-      @include token-utils.use-tokens($outlined-token-prefix, $outlined-token-slots) {
-        border-top-right-radius: token-utils.slot(container-shape);
-        border-bottom-right-radius: token-utils.slot(container-shape);
-      }
-    }
-  }
-
-  .mdc-notched-outline__trailing {
-    flex-grow: 1;
-    border-left: none;
-    border-right: 1px solid;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-
-    @include token-utils.use-tokens($outlined-token-prefix, $outlined-token-slots) {
-      border-top-right-radius: token-utils.slot(container-shape);
-      border-bottom-right-radius: token-utils.slot(container-shape);
-    }
-
-    [dir='rtl'] & {
-      border-left: 1px solid;
-      border-right: none;
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-
-      @include token-utils.use-tokens($outlined-token-prefix, $outlined-token-slots) {
-        border-top-left-radius: token-utils.slot(container-shape);
-        border-bottom-left-radius: token-utils.slot(container-shape);
+      [dir='rtl'] & {
+        border-left: 1px solid;
+        border-right: none;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        border-top-left-radius: token-utils.slot(outlined-container-shape);
+        border-bottom-left-radius: token-utils.slot(outlined-container-shape);
       }
     }
-  }
 
-  .mdc-notched-outline__notch {
-    flex: 0 0 auto;
-    width: auto;
+    .mdc-notched-outline__notch {
+      flex: 0 0 auto;
+      width: auto;
 
-    @include token-utils.use-tokens($outlined-token-prefix, $outlined-token-slots) {
       .mdc-text-field--outlined .mdc-notched-outline & {
-        $shape-var: token-utils.slot(container-shape);
+        $shape-var: token-utils.slot(outlined-container-shape);
         max-width: min(
           var(--mat-form-field-notch-max-width, 100%),
           calc(100% - max(12px, #{$shape-var}) * 2)
         );
       }
-    }
 
-    .mdc-text-field--outlined .mdc-notched-outline--notched & {
-      padding-top: 1px;
-    }
+      .mdc-text-field--outlined .mdc-notched-outline--notched & {
+        padding-top: 1px;
+      }
 
-    .mdc-text-field--focused.mdc-text-field--outlined .mdc-notched-outline--notched & {
-      padding-top: 2px;
-    }
+      .mdc-text-field--focused.mdc-text-field--outlined .mdc-notched-outline--notched & {
+        padding-top: 2px;
+      }
 
-    .mdc-notched-outline--notched & {
-      padding-left: 0;
-      padding-right: 8px;
-      border-top: none;
-      --mat-form-field-notch-max-width: 100%;
-    }
+      .mdc-notched-outline--notched & {
+        padding-left: 0;
+        padding-right: 8px;
+        border-top: none;
+        --mat-form-field-notch-max-width: 100%;
+      }
 
-    [dir='rtl'] .mdc-notched-outline--notched & {
-      padding-left: 8px;
-      padding-right: 0;
-    }
+      [dir='rtl'] .mdc-notched-outline--notched & {
+        padding-left: 8px;
+        padding-right: 0;
+      }
 
-    .mdc-notched-outline--no-label & {
-      display: none;
+      .mdc-notched-outline--no-label & {
+        display: none;
+      }
     }
-  }
 
-  .mdc-line-ripple {
-    &::before,
-    &::after {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      border-bottom-style: solid;
-      content: '';
-    }
+    .mdc-line-ripple {
+      &::before,
+      &::after {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        border-bottom-style: solid;
+        content: '';
+      }
 
-    &::before {
-      z-index: 1;
+      &::before {
+        z-index: 1;
+        border-bottom-width: token-utils.slot(filled-active-indicator-height);
 
-      @include token-utils.use-tokens($filled-token-prefix, $filled-token-slots) {
         $enabled-field: '.mdc-text-field--filled:not(.mdc-text-field--disabled)';
 
-        border-bottom-width: token-utils.slot(active-indicator-height);
-
         #{$enabled-field} & {
-          border-bottom-color: token-utils.slot(active-indicator-color);
+          border-bottom-color: token-utils.slot(filled-active-indicator-color);
         }
 
         #{$enabled-field}:not(.mdc-text-field--focused):hover & {
-          border-bottom-color: token-utils.slot(hover-active-indicator-color);
+          border-bottom-color: token-utils.slot(filled-hover-active-indicator-color);
         }
 
         .mdc-text-field--filled.mdc-text-field--disabled & {
-          border-bottom-color: token-utils.slot(disabled-active-indicator-color);
+          border-bottom-color: token-utils.slot(filled-disabled-active-indicator-color);
         }
 
         #{$enabled-field}.mdc-text-field--invalid & {
-          border-bottom-color: token-utils.slot(error-active-indicator-color);
+          border-bottom-color: token-utils.slot(filled-error-active-indicator-color);
         }
 
         #{$enabled-field}.mdc-text-field--invalid:not(.mdc-text-field--focused):hover & {
-          border-bottom-color: token-utils.slot(error-hover-active-indicator-color);
+          border-bottom-color: token-utils.slot(filled-error-hover-active-indicator-color);
         }
       }
-    }
 
-    &::after {
-      transform: scaleX(0);
-      opacity: 0;
-      z-index: 2;
+      &::after {
+        transform: scaleX(0);
+        opacity: 0;
+        z-index: 2;
 
-      @include token-utils.use-tokens($filled-token-prefix, $filled-token-slots) {
         .mdc-text-field--filled & {
-          border-bottom-width: token-utils.slot(focus-active-indicator-height);
+          border-bottom-width: token-utils.slot(filled-focus-active-indicator-height);
         }
 
         .mdc-text-field--filled:not(.mdc-text-field--disabled) & {
-          border-bottom-color: token-utils.slot(focus-active-indicator-color);
+          border-bottom-color: token-utils.slot(filled-focus-active-indicator-color);
         }
 
         .mdc-text-field--filled.mdc-text-field--invalid:not(.mdc-text-field--disabled) & {
-          border-bottom-color: token-utils.slot(error-focus-active-indicator-color);
+          border-bottom-color: token-utils.slot(filled-error-focus-active-indicator-color);
         }
       }
     }
-  }
-
-  .mdc-line-ripple--active::after {
-    transform: scaleX(1);
-    opacity: 1;
-  }
-
-  .mdc-line-ripple--deactivating::after {
-    opacity: 0;
-  }
-
-  .mdc-text-field--disabled {
-    pointer-events: none;
-  }
-}
-
-// Includes the tokens for the floating label for a specific form field variant.
-@mixin _floating-label-tokens($selector) {
-  $enabled-field: '#{$selector}:not(.mdc-text-field--disabled)';
-
-  #{$enabled-field} & {
-    color: token-utils.slot(label-text-color);
-  }
-
-  #{$enabled-field}.mdc-text-field--focused & {
-    color: token-utils.slot(focus-label-text-color);
-  }
-
-  #{$enabled-field}:not(.mdc-text-field--focused):hover & {
-    color: token-utils.slot(hover-label-text-color);
-  }
-
-  #{$selector}.mdc-text-field--disabled & {
-    color: token-utils.slot(disabled-label-text-color);
-  }
-
-  #{$enabled-field}.mdc-text-field--invalid & {
-    color: token-utils.slot(error-label-text-color);
-  }
 
-  #{$enabled-field}.mdc-text-field--invalid.mdc-text-field--focused & {
-    color: token-utils.slot(error-focus-label-text-color);
-  }
-
-  #{$enabled-field}.mdc-text-field--invalid:not(.mdc-text-field--disabled):hover & {
-    color: token-utils.slot(error-hover-label-text-color);
-  }
-
-  #{$selector} & {
-    font-family: token-utils.slot(label-text-font);
-    font-size: token-utils.slot(label-text-size);
-    font-weight: token-utils.slot(label-text-weight);
-    letter-spacing: token-utils.slot(label-text-tracking);
-  }
-}
-
-// Includes the tokens for the input for a specific form field variant.
-@mixin _input-tokens($selector) {
-  #{$selector}:not(.mdc-text-field--disabled) & {
-    color: token-utils.slot(input-text-color);
-    caret-color: token-utils.slot(caret-color);
-
-    @include vendor-prefixes.input-placeholder {
-      color: token-utils.slot(input-text-placeholder-color);
+    .mdc-line-ripple--active::after {
+      transform: scaleX(1);
+      opacity: 1;
     }
-  }
 
-  #{$selector}.mdc-text-field--invalid:not(.mdc-text-field--disabled) & {
-    caret-color: token-utils.slot(error-caret-color);
-  }
+    .mdc-line-ripple--deactivating::after {
+      opacity: 0;
+    }
 
-  #{$selector}.mdc-text-field--disabled & {
-    color: token-utils.slot(disabled-input-text-color);
+    .mdc-text-field--disabled {
+      pointer-events: none;
+    }
   }
 }
 
diff --git a/src/material/slide-toggle/_m3-slide-toggle.scss b/src/material/slide-toggle/_m3-slide-toggle.scss
index 8784743d3e2e..b3ca9ed52a8f 100644
--- a/src/material/slide-toggle/_m3-slide-toggle.scss
+++ b/src/material/slide-toggle/_m3-slide-toggle.scss
@@ -1,6 +1,5 @@
 @use 'sass:map';
 @use '../core/tokens/m3-utils';
-@use '../core/style/elevation';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, slide-toggle);
@@ -104,16 +103,12 @@ $prefix: (mat, slide-toggle);
     visible-track-opacity: m3-utils.hardcode(1, $exclude-hardcoded),
     visible-track-transition: m3-utils.hardcode(opacity 75ms, $exclude-hardcoded),
     with-icon-handle-size: m3-utils.hardcode(24px, $exclude-hardcoded),
+    // These tokens have always been empty for M3, but these token values should be used
+    // (with the same technique of calling `elevation.get-box-shadow`)
+    // Currently, internal users have M2 tokens being applied by accident
+    // handle-elevation-shadow: map.get($systems, md-sys-elevation, level0),
+    // disabled-handle-elevation-shadow: map.get($systems, md-sys-elevation, level0),
   );
-  $elevation-tokens: (handle-elevation, disabled-handle-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));
-    }
-  }
 
   $variant-tokens: (
     primary: (), // Default, no overrides needed
diff --git a/src/material/snack-bar/snack-bar-container.scss b/src/material/snack-bar/snack-bar-container.scss
index 1e03ff9bfb32..6e66482d7833 100644
--- a/src/material/snack-bar/snack-bar-container.scss
+++ b/src/material/snack-bar/snack-bar-container.scss
@@ -1,6 +1,6 @@
 @use '@angular/cdk';
 @use './m2-snack-bar';
-@use '../button/m2-text-button';
+@use '../button/m2-button';
 @use '../core/tokens/token-utils';
 @use '../core/style/elevation';
 
@@ -150,9 +150,9 @@ $token-slots: m2-snack-bar.get-token-slots();
   }
 
   // Darken the ripples in the button so they're visible against the dark background.
-  @include token-utils.create-token-values-mixed(m2-text-button.$prefix, (
-    state-layer-color: currentColor,
-    ripple-color: currentColor,
+  @include token-utils.create-token-values-mixed(m2-button.$prefix, (
+    text-state-layer-color: currentColor,
+    text-ripple-color: currentColor,
   ));
 
   .mat-ripple-element {
diff --git a/src/material/tabs/BUILD.bazel b/src/material/tabs/BUILD.bazel
index 742a60b24159..6d860b1c1b58 100644
--- a/src/material/tabs/BUILD.bazel
+++ b/src/material/tabs/BUILD.bazel
@@ -13,9 +13,7 @@ package(default_visibility = ["//visibility:public"])
 sass_library(
     name = "m3",
     srcs = [
-        "_m3-secondary-navigation-tab.scss",
-        "_m3-tab-header.scss",
-        "_m3-tab-indicator.scss",
+        "_m3-tabs.scss",
     ],
     deps = [
         "//src/material/core/style:sass_utils",
@@ -26,10 +24,7 @@ sass_library(
 sass_library(
     name = "m2",
     srcs = [
-        "_m2-secondary-navigation-tab.scss",
-        "_m2-tab-header.scss",
-        "_m2-tab-header-with-background.scss",
-        "_m2-tab-indicator.scss",
+        "_m2-tabs.scss",
     ],
     deps = [
         "//src/material/core/style:elevation",
diff --git a/src/material/tabs/_m2-secondary-navigation-tab.scss b/src/material/tabs/_m2-secondary-navigation-tab.scss
deleted file mode 100644
index 15f8ab7e1315..000000000000
--- a/src/material/tabs/_m2-secondary-navigation-tab.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-@use 'sass:map';
-@use '../core/theming/theming';
-@use '../core/theming/inspection';
-@use '../core/style/sass-utils';
-@use '../core/tokens/m2-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, tab);
-
-// Tokens that can't be configured through Angular Material's current theming API,
-// but may be in a future version of the theming API.
-//
-// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
-// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
-// our CSS.
-@function get-unthemable-tokens() {
-  @return (
-    // This is specified both here and in the density tokens, because it determines the size of the
-    // tab itself and there are internal tests who don't configure the theme correctly.
-    container-height: 48px,
-  );
-}
-
-// Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme, $palette-name: primary) {
-  @return ();
-}
-
-// 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) {
-  $scale: theming.clamp-density(inspection.get-theme-density($theme), -4);
-
-  @return (
-    container-height: map.get((
-      0: 48px,
-      -1: 44px,
-      -2: 40px,
-      -3: 36px,
-      -4: 32px,
-    ), $scale),
-  );
-}
-
-// 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(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}
diff --git a/src/material/tabs/_m2-tab-header-with-background.scss b/src/material/tabs/_m2-tab-header-with-background.scss
deleted file mode 100644
index 80c457a4fa82..000000000000
--- a/src/material/tabs/_m2-tab-header-with-background.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-@use '../core/tokens/m2-utils';
-@use '../core/theming/inspection';
-@use '../core/style/sass-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, tab);
-
-// 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, $palette-name: primary) {
-
-  @return (
-    background-color: inspection.get-theme-color($theme, $palette-name, default),
-    foreground-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 ();
-}
-
-// 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(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}
diff --git a/src/material/tabs/_m2-tab-indicator.scss b/src/material/tabs/_m2-tab-indicator.scss
deleted file mode 100644
index 37c4a5528bf5..000000000000
--- a/src/material/tabs/_m2-tab-indicator.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-@use '../core/theming/inspection';
-@use '../core/style/sass-utils';
-@use '../core/tokens/m2-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, tab);
-
-// Tokens that can't be configured through Angular Material's current theming API,
-// but may be in a future version of the theming API.
-//
-// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
-// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
-// our CSS.
-@function get-unthemable-tokens() {
-  @return (
-    active-indicator-height: 2px,
-    // Currently set to zero, but used by the gmat styles to make the indicator rounded.
-    active-indicator-shape: 0,
-  );
-}
-
-// Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme, $palette-name: primary) {
-  @return (
-    active-indicator-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 ();
-}
-
-// 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(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}
diff --git a/src/material/tabs/_m2-tab-header.scss b/src/material/tabs/_m2-tabs.scss
similarity index 65%
rename from src/material/tabs/_m2-tab-header.scss
rename to src/material/tabs/_m2-tabs.scss
index e096a93ac756..ebcd1cf40841 100644
--- a/src/material/tabs/_m2-tab-header.scss
+++ b/src/material/tabs/_m2-tabs.scss
@@ -1,29 +1,41 @@
-@use '../core/tokens/m2-utils';
+@use 'sass:map';
+@use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/style/sass-utils';
+@use '../core/tokens/m2-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, tab);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
+//
+// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
+// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
+// our CSS.
 @function get-unthemable-tokens() {
   @return (
+    // This is specified both here and in the density tokens, because it determines the size of the
+    // tab itself and there are internal tests who don't configure the theme correctly.
+    container-height: 48px,
     // For some period of time, the MDC tabs removed the divider. This has been added back in
     // and will be present in M3.
     divider-color: transparent,
     divider-height: 0,
+    active-indicator-height: 2px,
+    // Currently set to zero, but used by the gmat styles to make the indicator rounded.
+    active-indicator-shape: 0,
   );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme, $palette-name: primary) {
+@function get-color-tokens($theme, $palette-name: primary, $exclude: ()) {
   $is-dark: inspection.get-theme-type($theme) == dark;
   $inactive-label-text-color: inspection.get-theme-color($theme, foreground, text, 0.6);
   $active-label-text-color: inspection.get-theme-color($theme, $palette-name, default);
   $ripple-color: inspection.get-theme-color($theme, $palette-name, default);
 
-  @return (
+  $tokens: (
     disabled-ripple-color: inspection.get-theme-color($theme, foreground, disabled),
     pagination-icon-color: inspection.get-theme-color($theme, foreground, icon, 1),
 
@@ -40,7 +52,16 @@ $prefix: (mat, tab);
     active-hover-label-text-color: $active-label-text-color,
     active-focus-indicator-color: $active-label-text-color,
     active-hover-indicator-color: $active-label-text-color,
+    active-indicator-color: inspection.get-theme-color($theme, $palette-name, default),
+    background-color: inspection.get-theme-color($theme, $palette-name, default),
+    foreground-color: inspection.get-theme-color($theme, $palette-name, default-contrast),
   );
+
+  @each $token in $exclude {
+    $tokens: map.remove($tokens, $token);
+  }
+
+  @return $tokens;
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
@@ -57,16 +78,26 @@ $prefix: (mat, tab);
 
 // Tokens that can be configured through Angular Material's density theming API.
 @function get-density-tokens($theme) {
-  @return ();
+  $scale: theming.clamp-density(inspection.get-theme-density($theme), -4);
+
+  @return (
+    container-height: map.get((
+      0: 48px,
+      -1: 44px,
+      -2: 40px,
+      -3: 36px,
+      -4: 32px,
+    ), $scale),
+  );
 }
 
 // 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(m2-utils.$placeholder-color-config),
-          get-typography-tokens(m2-utils.$placeholder-typography-config),
-          get-density-tokens(m2-utils.$placeholder-density-config)
+      get-unthemable-tokens(),
+      get-color-tokens(m2-utils.$placeholder-color-config),
+      get-typography-tokens(m2-utils.$placeholder-typography-config),
+      get-density-tokens(m2-utils.$placeholder-density-config)
   );
 }
diff --git a/src/material/tabs/_m3-secondary-navigation-tab.scss b/src/material/tabs/_m3-secondary-navigation-tab.scss
deleted file mode 100644
index c94ed527ac4b..000000000000
--- a/src/material/tabs/_m3-secondary-navigation-tab.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@use '../core/tokens/m3-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, tab);
-
-/// Generates the tokens for MDC tab
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @param {Map} $token-slots Possible token slots
-/// @return {Map} A set of tokens for the MDC tab
-@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: (
-    container-height: if($exclude-hardcoded, null, 48px),
-  );
-
-  @return m3-utils.namespace($prefix, $tokens, $token-slots);
-}
diff --git a/src/material/tabs/_m3-tab-header.scss b/src/material/tabs/_m3-tab-header.scss
deleted file mode 100644
index 3d3fde6e2576..000000000000
--- a/src/material/tabs/_m3-tab-header.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-@use 'sass:map';
-@use '../core/style/sass-utils';
-@use '../core/tokens/m3-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, tab);
-
-/// Generates custom tokens for the mat-tab-header.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @param {Map} $token-slots Possible token slots
-/// @return {Map} A set of custom tokens for the mat-tab-header
-@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: sass-utils.merge-all(
-    m3-utils.generate-typography-tokens($systems, label-text, title-small),
-    (
-      divider-color: map.get($systems, md-sys-color, surface-variant),
-      divider-height: m3-utils.hardcode(1px, $exclude-hardcoded),
-      pagination-icon-color: map.get($systems, md-sys-color, on-surface),
-      inactive-label-text-color: map.get($systems, md-sys-color, on-surface),
-      active-label-text-color: map.get($systems, md-sys-color, on-surface),
-      active-ripple-color: map.get($systems, md-sys-color, on-surface),
-      inactive-ripple-color: map.get($systems, md-sys-color, on-surface),
-      inactive-focus-label-text-color: map.get($systems, md-sys-color, on-surface),
-      inactive-hover-label-text-color: map.get($systems, md-sys-color, on-surface),
-      active-focus-label-text-color: map.get($systems, md-sys-color, on-surface),
-      active-hover-label-text-color: map.get($systems, md-sys-color, on-surface),
-      active-focus-indicator-color: map.get($systems, md-sys-color, primary),
-      active-hover-indicator-color: map.get($systems, md-sys-color, primary),
-    ),
-  );
-
-  $variant-tokens: (
-    // Color variants
-    primary: (), // Default, no overrides needed
-    secondary: (
-      active-focus-indicator-color: map.get($systems, md-sys-color, secondary),
-      active-hover-indicator-color: map.get($systems, md-sys-color, secondary),
-    ),
-    tertiary: (
-      active-focus-indicator-color: map.get($systems, md-sys-color, tertiary),
-      active-hover-indicator-color: map.get($systems, md-sys-color, tertiary),
-    ),
-    error: (
-      active-focus-indicator-color: map.get($systems, md-sys-color, error),
-      active-hover-indicator-color: map.get($systems, md-sys-color, error),
-    )
-  );
-
-  @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
-}
-
diff --git a/src/material/tabs/_m3-tab-indicator.scss b/src/material/tabs/_m3-tab-indicator.scss
deleted file mode 100644
index b82c49f26492..000000000000
--- a/src/material/tabs/_m3-tab-indicator.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-@use 'sass:map';
-@use '../core/tokens/m3-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, tab);
-
-/// Generates the tokens for MDC tab-indicator
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @param {Map} $token-slots Possible token slots
-/// @return {Map} A set of tokens for the MDC tab-indicator
-@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: (
-    active-indicator-height: m3-utils.hardcode(2px, $exclude-hardcoded),
-    active-indicator-shape: m3-utils.hardcode(0, $exclude-hardcoded),
-    active-indicator-color: map.get($systems, md-sys-color, primary),
-  );
-
-  $variant-tokens: (
-    // Color variants
-    primary: (), // Default, no overrides needed
-    secondary: (
-      active-indicator-color: map.get($systems, md-sys-color, secondary),
-    ),
-    tertiary: (
-      active-indicator-color: map.get($systems, md-sys-color, tertiary),
-    ),
-    error: (
-      active-indicator-color: map.get($systems, md-sys-color, error),
-    )
-  );
-
-  @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
-}
diff --git a/src/material/tabs/_m3-tabs.scss b/src/material/tabs/_m3-tabs.scss
new file mode 100644
index 000000000000..3f277bba4961
--- /dev/null
+++ b/src/material/tabs/_m3-tabs.scss
@@ -0,0 +1,58 @@
+@use '../core/tokens/m3-utils';
+@use '../core/style/sass-utils';
+@use 'sass:map';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, tab);
+
+/// Generates the tokens for MDC tab
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @param {Map} $token-slots Possible token slots
+/// @return {Map} A set of tokens for the MDC tab
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: sass-utils.merge-all(
+      m3-utils.generate-typography-tokens($systems, label-text, title-small),
+      (
+        active-focus-indicator-color: map.get($systems, md-sys-color, primary),
+        active-focus-label-text-color: map.get($systems, md-sys-color, on-surface),
+        active-hover-indicator-color: map.get($systems, md-sys-color, primary),
+        active-hover-label-text-color: map.get($systems, md-sys-color, on-surface),
+        active-indicator-color: map.get($systems, md-sys-color, primary),
+        active-indicator-height: m3-utils.hardcode(2px, $exclude-hardcoded),
+        active-indicator-shape: m3-utils.hardcode(0, $exclude-hardcoded),
+        active-label-text-color: map.get($systems, md-sys-color, on-surface),
+        active-ripple-color: map.get($systems, md-sys-color, on-surface),
+        container-height: if($exclude-hardcoded, null, 48px),
+        divider-color: map.get($systems, md-sys-color, surface-variant),
+        divider-height: m3-utils.hardcode(1px, $exclude-hardcoded),
+        inactive-focus-label-text-color: map.get($systems, md-sys-color, on-surface),
+        inactive-hover-label-text-color: map.get($systems, md-sys-color, on-surface),
+        inactive-label-text-color: map.get($systems, md-sys-color, on-surface),
+        inactive-ripple-color: map.get($systems, md-sys-color, on-surface),
+        pagination-icon-color: map.get($systems, md-sys-color, on-surface),
+      ),
+  );
+
+  $variant-tokens: (
+    // Color variants
+    primary: (), // Default, no overrides needed
+    secondary: (
+      active-focus-indicator-color: map.get($systems, md-sys-color, secondary),
+      active-hover-indicator-color: map.get($systems, md-sys-color, secondary),
+      active-indicator-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      active-focus-indicator-color: map.get($systems, md-sys-color, tertiary),
+      active-hover-indicator-color: map.get($systems, md-sys-color, tertiary),
+      active-indicator-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      active-focus-indicator-color: map.get($systems, md-sys-color, error),
+      active-hover-indicator-color: map.get($systems, md-sys-color, error),
+      active-indicator-color: map.get($systems, md-sys-color, error),
+    )
+  );
+
+  @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
+}
diff --git a/src/material/tabs/_tabs-common.scss b/src/material/tabs/_tabs-common.scss
index 405664a38588..3c0047953b9b 100644
--- a/src/material/tabs/_tabs-common.scss
+++ b/src/material/tabs/_tabs-common.scss
@@ -1,8 +1,5 @@
 @use '../core/style/vendor-prefixes';
-@use './m2-tab-indicator';
-@use './m2-secondary-navigation-tab';
-@use './m2-tab-header';
-@use './m2-tab-header-with-background';
+@use './m2-tabs';
 @use '../core/tokens/token-utils';
 
 $mat-tab-animation-duration: 500ms !default;
@@ -101,17 +98,11 @@ $mat-tab-animation-duration: 500ms !default;
   // Tabs might be `button` elements so we have to reset the user agent styling.
   background: none;
 
-  @include token-utils.use-tokens(
-    m2-secondary-navigation-tab.$prefix,
-    m2-secondary-navigation-tab.get-token-slots()
-  ) {
+  @include token-utils.use-tokens(m2-tabs.$prefix, m2-tabs.get-token-slots()) {
     height: token-utils.slot(container-height);
   }
 
-  @include token-utils.use-tokens(
-    m2-tab-header.$prefix,
-    m2-tab-header.get-token-slots()
-  ) {
+  @include token-utils.use-tokens(m2-tabs.$prefix, m2-tabs.get-token-slots()) {
     font-family: token-utils.slot(label-text-font);
     font-size: token-utils.slot(label-text-size);
     letter-spacing: token-utils.slot(label-text-tracking);
@@ -127,20 +118,14 @@ $mat-tab-animation-duration: 500ms !default;
   }
 
   .mdc-tab-indicator__content--underline {
-    @include token-utils.use-tokens(
-      m2-tab-indicator.$prefix,
-      m2-tab-indicator.get-token-slots()
-    ) {
+    @include token-utils.use-tokens(m2-tabs.$prefix, m2-tabs.get-token-slots()) {
       border-color: token-utils.slot(active-indicator-color);
       border-top-width: token-utils.slot(active-indicator-height);
       border-radius: token-utils.slot(active-indicator-shape);
     }
   }
 
-  @include token-utils.use-tokens(
-    m2-tab-header.$prefix,
-    m2-tab-header.get-token-slots()
-  ) {
+  @include token-utils.use-tokens(m2-tabs.$prefix, m2-tabs.get-token-slots()) {
     &:hover .mdc-tab__text-label {
       color: token-utils.slot(inactive-hover-label-text-color);
     }
@@ -198,10 +183,7 @@ $mat-tab-animation-duration: 500ms !default;
       pointer-events: none;
     }
 
-    @include token-utils.use-tokens(
-      m2-tab-header.$prefix,
-      m2-tab-header.get-token-slots()
-    ) {
+    @include token-utils.use-tokens(m2-tabs.$prefix, m2-tabs.get-token-slots()) {
       .mdc-tab__ripple::before,
       .mat-ripple-element {
         background-color: token-utils.slot(disabled-ripple-color);
@@ -222,19 +204,13 @@ $mat-tab-animation-duration: 500ms !default;
     opacity: 0;
     pointer-events: none;
 
-    @include token-utils.use-tokens(
-      m2-tab-header.$prefix,
-      m2-tab-header.get-token-slots()
-    ) {
+    @include token-utils.use-tokens(m2-tabs.$prefix, m2-tabs.get-token-slots()) {
       background-color: token-utils.slot(inactive-ripple-color);
     }
   }
 
   .mdc-tab__text-label {
-    @include token-utils.use-tokens(
-      m2-tab-header.$prefix,
-      m2-tab-header.get-token-slots()
-    ) {
+    @include token-utils.use-tokens(m2-tabs.$prefix, m2-tabs.get-token-slots()) {
       color: token-utils.slot(inactive-label-text-color);
     }
 
@@ -269,10 +245,7 @@ $mat-tab-animation-duration: 500ms !default;
   .mat-ripple-element {
     opacity: 0.12;
 
-    @include token-utils.use-tokens(
-      m2-tab-header.$prefix,
-      m2-tab-header.get-token-slots()
-    ) {
+    @include token-utils.use-tokens(m2-tabs.$prefix, m2-tabs.get-token-slots()) {
       background-color: token-utils.slot(inactive-ripple-color);
     }
   }
@@ -313,10 +286,7 @@ $mat-tab-animation-duration: 500ms !default;
     .mat-ripple-element {
       opacity: 0.12;
 
-      @include token-utils.use-tokens(
-        m2-tab-header.$prefix,
-        m2-tab-header.get-token-slots()
-      ) {
+      @include token-utils.use-tokens(m2-tabs.$prefix, m2-tabs.get-token-slots()) {
         background-color: token-utils.slot(inactive-ripple-color);
       }
     }
@@ -350,10 +320,7 @@ $mat-tab-animation-duration: 500ms !default;
     height: 8px;
     width: 8px;
 
-    @include token-utils.use-tokens(
-      m2-tab-header.$prefix,
-      m2-tab-header.get-token-slots()
-    ) {
+    @include token-utils.use-tokens(m2-tabs.$prefix, m2-tabs.get-token-slots()) {
       border-color: token-utils.slot(pagination-icon-color);
     }
   }
@@ -401,10 +368,7 @@ $mat-tab-animation-duration: 500ms !default;
   // list, but it ended up being hugely breaking internally.
   .cdk-drop-list &,
   &.cdk-drop-list {
-    @include token-utils.use-tokens(
-      m2-secondary-navigation-tab.$prefix,
-      m2-secondary-navigation-tab.get-token-slots()
-    ) {
+    @include token-utils.use-tokens(m2-tabs.$prefix, m2-tabs.get-token-slots()) {
       min-height: token-utils.slot(container-height);
     }
   }
@@ -418,10 +382,7 @@ $mat-tab-animation-duration: 500ms !default;
   flex-grow: 1;
   overflow: hidden;
   z-index: 1;
-  @include token-utils.use-tokens(
-    m2-tab-header.$prefix,
-    m2-tab-header.get-token-slots()
-  ) {
+  @include token-utils.use-tokens(m2-tabs.$prefix, m2-tabs.get-token-slots()) {
     border-bottom-style: solid;
     border-bottom-width: token-utils.slot(divider-height);
     border-bottom-color: token-utils.slot(divider-color);
@@ -439,10 +400,7 @@ $mat-tab-animation-duration: 500ms !default;
 
 @mixin paginated-tab-header-with-background($header-selector, $tab-selector) {
   &.mat-tabs-with-background {
-    @include token-utils.use-tokens(
-      m2-tab-header-with-background.$prefix,
-      m2-tab-header-with-background.get-token-slots()
-    ) {
+    @include token-utils.use-tokens(m2-tabs.$prefix, m2-tabs.get-token-slots()) {
       // Note that these selectors target direct descendants so
       // that the styles don't apply to any nested tab groups.
       > #{$header-selector}, > .mat-mdc-tab-header-pagination {
diff --git a/src/material/tabs/_tabs-theme.scss b/src/material/tabs/_tabs-theme.scss
index ffdd5d0968d0..b612d72b438a 100644
--- a/src/material/tabs/_tabs-theme.scss
+++ b/src/material/tabs/_tabs-theme.scss
@@ -1,13 +1,11 @@
 @use '../core/style/sass-utils';
-@use './m2-secondary-navigation-tab';
-@use './m2-tab-indicator';
-@use './m2-tab-header';
-@use './m2-tab-header-with-background';
+@use './m2-tabs';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/theming/validation';
 @use '../core/typography/typography';
 @use '../core/tokens/token-utils';
+@use 'sass:map';
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
 /// for the mat-tab.
@@ -18,21 +16,7 @@
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        m2-secondary-navigation-tab.$prefix,
-        m2-secondary-navigation-tab.get-unthemable-tokens()
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-tab-indicator.$prefix,
-        m2-tab-indicator.get-unthemable-tokens()
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-tab-header.$prefix,
-        m2-tab-header.get-unthemable-tokens()
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-tab-header-with-background.$prefix,
-        m2-tab-header-with-background.get-unthemable-tokens()
-      );
+          m2-tabs.$prefix, m2-tabs.get-unthemable-tokens());
     }
   }
 }
@@ -48,53 +32,52 @@
   } @else {
     .mat-mdc-tab-group,
     .mat-mdc-tab-nav-bar {
-      @include _palette-styles($theme, primary);
+      @include token-utils.create-token-values-mixed(
+          m2-tabs.$prefix, m2-tabs.get-color-tokens($theme, primary,
+            $exclude: (background-color, foreground-color)));
 
       &.mat-accent {
-        @include _palette-styles($theme, accent);
+        @include token-utils.create-token-values-mixed(
+          m2-tabs.$prefix, m2-tabs.get-color-tokens($theme, accent,
+            $exclude: (background-color, foreground-color)));
       }
 
       &.mat-warn {
-        @include _palette-styles($theme, warn);
+        @include token-utils.create-token-values-mixed(
+          m2-tabs.$prefix, m2-tabs.get-color-tokens($theme, warn,
+            $exclude: (background-color, foreground-color)));
       }
 
       &.mat-background-primary {
-        @include _background-styles($theme, primary);
+        $tokens: m2-tabs.get-color-tokens($theme, primary);
+        @include token-utils.create-token-values-mixed(
+            m2-tabs.$prefix, (
+              background-color: map.get($tokens, background-color),
+              foreground-color: map.get($tokens, foreground-color),
+            ));
       }
 
       &.mat-background-accent {
-        @include _background-styles($theme, accent);
+        $tokens: m2-tabs.get-color-tokens($theme, accent);
+        @include token-utils.create-token-values-mixed(
+            m2-tabs.$prefix, (
+            background-color: map.get($tokens, background-color),
+            foreground-color: map.get($tokens, foreground-color),
+          ));
       }
 
       &.mat-background-warn {
-        @include _background-styles($theme, warn);
+        $tokens: m2-tabs.get-color-tokens($theme, warn);
+        @include token-utils.create-token-values-mixed(
+            m2-tabs.$prefix, (
+            background-color: map.get($tokens, background-color),
+            foreground-color: map.get($tokens, foreground-color),
+          ));
       }
     }
   }
 }
 
-@mixin _background-styles($theme, $palette-name) {
-  @include token-utils.create-token-values-mixed(
-    m2-tab-header-with-background.$prefix,
-    m2-tab-header-with-background.get-color-tokens($theme, $palette-name)
-  );
-}
-
-@mixin _palette-styles($theme, $palette-name) {
-  @include token-utils.create-token-values-mixed(
-    m2-secondary-navigation-tab.$prefix,
-    m2-secondary-navigation-tab.get-color-tokens($theme, $palette-name)
-  );
-  @include token-utils.create-token-values-mixed(
-    m2-tab-indicator.$prefix,
-    m2-tab-indicator.get-color-tokens($theme, $palette-name)
-  );
-  @include token-utils.create-token-values-mixed(
-    m2-tab-header.$prefix,
-    m2-tab-header.get-color-tokens($theme, $palette-name)
-  );
-}
-
 /// Outputs typography theme styles for the mat-tab.
 /// @param {Map} $theme The theme to generate typography styles for.
 @mixin typography($theme) {
@@ -103,21 +86,7 @@
   } @else {
     .mat-mdc-tab-header {
       @include token-utils.create-token-values-mixed(
-        m2-secondary-navigation-tab.$prefix,
-        m2-secondary-navigation-tab.get-typography-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-tab-indicator.$prefix,
-        m2-tab-indicator.get-typography-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-tab-header.$prefix,
-        m2-tab-header.get-typography-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-tab-header-with-background.$prefix,
-        m2-tab-header-with-background.get-typography-tokens($theme)
-      );
+        m2-tabs.$prefix, m2-tabs.get-typography-tokens($theme));
     }
   }
 }
@@ -130,48 +99,17 @@
   } @else {
     .mat-mdc-tab-header {
       @include token-utils.create-token-values-mixed(
-        m2-secondary-navigation-tab.$prefix,
-        m2-secondary-navigation-tab.get-density-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-tab-indicator.$prefix,
-        m2-tab-indicator.get-density-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-tab-header.$prefix,
-        m2-tab-header.get-density-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-tab-header-with-background.$prefix,
-        m2-tab-header-with-background.get-density-tokens($theme)
-      );
+        m2-tabs.$prefix, m2-tabs.get-density-tokens($theme));
     }
   }
 }
 
 /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
 @function _define-overrides() {
-  $tab-tokens: m2-secondary-navigation-tab.get-token-slots();
-  $tab-indicator-tokens: m2-tab-indicator.get-token-slots();
-  $tab-header-tokens: m2-tab-header.get-token-slots();
-  $tab-header-with-background-tokens: m2-tab-header-with-background.get-token-slots();
-
   @return (
     (
-      namespace: m2-secondary-navigation-tab.$prefix,
-      tokens: $tab-tokens,
-    ),
-    (
-      namespace: m2-tab-indicator.$prefix,
-      tokens: $tab-indicator-tokens,
-    ),
-    (
-      namespace: m2-tab-header.$prefix,
-      tokens: $tab-header-tokens,
-    ),
-    (
-      namespace: m2-tab-header-with-background.$prefix,
-      tokens: $tab-header-with-background-tokens,
+      namespace: m2-tabs.$prefix,
+      tokens: m2-tabs.get-token-slots(),
     ),
   );
 }
@@ -210,29 +148,9 @@
   @include validation.selector-defined(
     'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
   );
-  $mdc-tab-indicator-tokens: token-utils.get-tokens-for(
-    $tokens,
-    m2-tab-indicator.$prefix,
-    $options...
-  );
-  $mat-tab-header-tokens: token-utils.get-tokens-for(
-    $tokens,
-    m2-tab-header.$prefix,
-    $options...
-  );
-  // Don't pass $options here, because the mdc-tab doesn't have color variants,
-  // only the mdc-tab-indicator and mat-tab-header do.
-  $mdc-secondary-navigation-tab-tokens: token-utils.get-tokens-for(
-    $tokens,
-    m2-secondary-navigation-tab.$prefix
-  );
-  @include token-utils.create-token-values(
-    m2-secondary-navigation-tab.$prefix,
-    $mdc-secondary-navigation-tab-tokens
-  );
-  @include token-utils.create-token-values(
-    m2-tab-indicator.$prefix,
-    $mdc-tab-indicator-tokens
-  );
-  @include token-utils.create-token-values(m2-tab-header.$prefix, $mat-tab-header-tokens);
+  $tabs-tokens: token-utils.get-tokens-for($tokens, m2-tabs.$prefix, $options...);
+  $tabs-tokens-without-options: token-utils.get-tokens-for($tokens, m2-tabs.$prefix);
+
+  @include token-utils.create-token-values(m2-tabs.$prefix, $tabs-tokens-without-options);
+  @include token-utils.create-token-values(m2-tabs.$prefix, $tabs-tokens);
 }
diff --git a/src/material/toolbar/toolbar.scss b/src/material/toolbar/toolbar.scss
index 296bdc3a85df..ee13ec3ba952 100644
--- a/src/material/toolbar/toolbar.scss
+++ b/src/material/toolbar/toolbar.scss
@@ -1,6 +1,5 @@
 @use '@angular/cdk';
-@use '../button/m2-outlined-button';
-@use '../button/m2-text-button';
+@use '../button/m2-button';
 @use '../core/style/variables';
 @use '../core/tokens/token-utils';
 @use './m2-toolbar';
@@ -55,21 +54,13 @@ $height-mobile-portrait: 56px !default;
   .mat-mdc-button-base.mat-mdc-button-base.mat-unthemed {
     $color-token: null;
 
-    @include token-utils.use-tokens(
-        $token-prefix, $token-slots) {
+    @include token-utils.use-tokens($token-prefix, $token-slots) {
       $color-token: token-utils.slot(container-text-color);
     }
 
-    @include token-utils.use-tokens(
-        m2-text-button.$prefix, m2-text-button.get-token-slots()) {
-      $token: token-utils.get-token-variable-name(label-text-color);
-      #{$token}: #{$color-token};
-    }
-
-    @include token-utils.use-tokens(
-        m2-outlined-button.$prefix, m2-outlined-button.get-token-slots()) {
-      $token: token-utils.get-token-variable-name(label-text-color);
-      #{$token}: #{$color-token};
+    @include token-utils.use-tokens(m2-button.$prefix, m2-button.get-token-slots()) {
+      #{token-utils.get-token-variable-name(text-label-text-color)}: #{$color-token};
+      #{token-utils.get-token-variable-name(outlined-label-text-color)}: #{$color-token};
     }
   }
 }