@angular/material 17.1.0 → 17.2.0-next.0

package/_index.scss

@@ -60,7 +60,8 @@
 @forward './core/option/optgroup-theme' as optgroup-* show optgroup-color, optgroup-typography,
   optgroup-theme, optgroup-density, optgroup-base;
 @forward './core/selection/pseudo-checkbox/pseudo-checkbox-theme' as pseudo-checkbox-* show
-  pseudo-checkbox-color, pseudo-checkbox-typography, pseudo-checkbox-theme, pseudo-checkbox-base;
+  pseudo-checkbox-color, pseudo-checkbox-typography, pseudo-checkbox-theme, pseudo-checkbox-density,
+  pseudo-checkbox-base;
 @forward './core/selection/pseudo-checkbox/pseudo-checkbox-common' as pseudo-checkbox-* show
   pseudo-checkbox-legacy-size;
 @forward './core/focus-indicators/focus-indicators-theme' as strong-focus-indicators-* show
@@ -145,9 +146,8 @@
 // MDC Helpers
 @forward './core/mdc-helpers/mdc-helpers' as private-* show
   private-disable-mdc-fallback-declarations, private-typography-config-level-from-mdc,
-  private-if-touch-targets-unsupported, $private-mdc-base-styles-query,
-  $private-mdc-base-styles-without-animation-query, $private-mdc-theme-styles-query,
-  $private-mdc-typography-styles-query;
+  $private-mdc-base-styles-query, $private-mdc-base-styles-without-animation-query,
+  $private-mdc-theme-styles-query, $private-mdc-typography-styles-query;
 
 // New theming APIs:
 @forward './core/theming/inspection' show get-theme-version, get-theme-type, get-theme-color,

package/badge/_badge-theme.scss

@@ -1,7 +1,4 @@
 @use 'sass:color';
-@use 'sass:map';
-@use 'sass:math';
-@use '@angular/cdk';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/typography/typography';
@@ -9,171 +6,29 @@
 @use '../core/tokens/token-utils';
 @use '../core/style/sass-utils';
 
-// TODO(crisbeto): some of these variables aren't used anymore and should be deleted.
-$font-size: 12px;
-$font-weight: 600;
-$default-size: 22px !default;
-$small-size: $default-size - 6;
-$large-size: $default-size + 6;
-$_badge-structure-emitted: false !default;
-
-// Internally there are some builds that throw an error if they can't figure out the values
-// of CSS variables during compliation. This flag temporarily enables fallbacks for these builds.
-// Eventually we should clean them up.
-$_emit-fallback-vars: true;
-
-// Mixin for building offset given different sizes
-@mixin _badge-size($size, $font-size-token) {
-  // This mixin isn't used in the context of a theme so we can disable the ampersand check.
-  // stylelint-disable material/no-ampersand-beyond-selector-start
-  .mat-badge-content {
-    width: $size;
-    height: $size;
-    line-height: $size;
-
-    @if ($font-size-token) {
-      @include token-utils.use-tokens(tokens-mat-badge.$prefix,
-        tokens-mat-badge.get-token-slots()) {
-        @include token-utils.create-token-slot(font-size, $font-size-token, $_emit-fallback-vars);
-      }
-    }
-  }
-
-  &.mat-badge-above .mat-badge-content {
-    top: math.div(-$size, 2);
-  }
-
-  &.mat-badge-below .mat-badge-content {
-    bottom: math.div(-$size, 2);
-  }
-
-  &.mat-badge-before .mat-badge-content {
-    left: -$size;
-  }
-
-  [dir='rtl'] &.mat-badge-before .mat-badge-content {
-    left: auto;
-    right: -$size;
-  }
-
-  &.mat-badge-after .mat-badge-content {
-    right: -$size;
-  }
-
-  [dir='rtl'] &.mat-badge-after .mat-badge-content {
-    right: auto;
-    left: -$size;
-  }
-
-  &.mat-badge-overlap {
-    &.mat-badge-before .mat-badge-content {
-      left: math.div(-$size, 2);
-    }
-
-    [dir='rtl'] &.mat-badge-before .mat-badge-content {
-      left: auto;
-      right: math.div(-$size, 2);
-    }
-
-    &.mat-badge-after .mat-badge-content {
-      right: math.div(-$size, 2);
-    }
-
-    [dir='rtl'] &.mat-badge-after .mat-badge-content {
-      right: auto;
-      left: math.div(-$size, 2);
-    }
-  }
-  // stylelint-enable
-}
-
-// Structural styles for the badge. They have to be included as a part of the theme,
-// because the badge is a directive and we have no other way of attaching styles to it.
-@mixin _badge-structure {
-  .mat-badge {
-    position: relative;
-
-    // The badge should make sure its host is overflow visible so that the badge content
-    // can be rendered outside of the element. Some components such as <mat-icon> explicitly
-    // style `overflow: hidden` so this requires extra specificity so that it does not
-    // depend on style load order.
-    &.mat-badge {
-      overflow: visible;
-    }
-  }
-
-  .mat-badge-content {
-    position: absolute;
-    text-align: center;
-    display: inline-block;
-    border-radius: 50%;
-    transition: transform 200ms ease-in-out;
-    transform: scale(0.6);
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    pointer-events: none;
-
-    @include token-utils.use-tokens(tokens-mat-badge.$prefix, tokens-mat-badge.get-token-slots()) {
-      @include token-utils.create-token-slot(background-color, background-color);
-      @include token-utils.create-token-slot(color, text-color);
-      @include token-utils.create-token-slot(font-family, text-font, $_emit-fallback-vars);
-      @include token-utils.create-token-slot(font-size, text-size, $_emit-fallback-vars);
-      @include token-utils.create-token-slot(font-weight, text-weight, $_emit-fallback-vars);
-    }
-
-    @include cdk.high-contrast(active, off) {
-      outline: solid 1px;
-      border-radius: 0;
-    }
-  }
-
-  .mat-badge-disabled .mat-badge-content {
-    @include token-utils.use-tokens(tokens-mat-badge.$prefix, tokens-mat-badge.get-token-slots()) {
-      @include token-utils.create-token-slot(background-color, disabled-state-background-color);
-      @include token-utils.create-token-slot(color, disabled-state-text-color);
-    }
-  }
-
-  .mat-badge-hidden .mat-badge-content {
-    display: none;
-  }
-
-  .ng-animate-disabled .mat-badge-content,
-  .mat-badge-content._mat-animation-noopable {
-    transition: none;
-  }
-
-  // The active class is added after the element is added
-  // so it can animate scale to default
-  .mat-badge-content.mat-badge-active {
-    // Scale to `none` instead of `1` to avoid blurry text in some browsers.
-    transform: none;
-  }
-
-  .mat-badge-small {
-    @include _badge-size($small-size, small-size-text-size);
-  }
-
-  .mat-badge-medium {
-    @include _badge-size($default-size, null);
-  }
-
-  .mat-badge-large {
-    @include _badge-size($large-size, large-size-text-size);
-  }
-}
-
+/// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
+/// for the mat-badge.
+/// @param {Map} $theme The theme to generate base styles for.
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   }
-  @else {}
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-badge.$prefix,
+        tokens-mat-badge.get-unthemable-tokens());
+    }
+  }
 }
 
-@mixin color($theme) {
+/// Outputs color theme styles for the mat-badge.
+/// @param {Map} $theme The theme to generate color styles for.
+/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
+///   $color-variant: The color variant to use for the badge: primary, secondary, tertiary,
+///      or error (If not specified, default error color will be used).
+@mixin color($theme, $options...) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   }
   @else {
     @include sass-utils.current-selector-or-root() {
@@ -193,6 +48,8 @@ $_emit-fallback-vars: true;
   }
 }
 
+/// Outputs typography theme styles for the mat-badge.
+/// @param {Map} $theme The theme to generate typography styles for.
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
@@ -205,6 +62,8 @@ $_emit-fallback-vars: true;
   }
 }
 
+/// Outputs density theme styles for the mat-badge.
+/// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
@@ -212,24 +71,17 @@ $_emit-fallback-vars: true;
   @else {}
 }
 
-@mixin theme($theme) {
+/// Outputs all (base, color, typography, and density) theme styles for the mat-badge.
+/// @param {Map} $theme The theme to generate styles for.
+/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
+///   $color-variant: The color variant to use for the badge: primary, secondary, tertiary,
+///      or error (If not specified, default error color will be used).
+@mixin theme($theme, $options...) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-badge') {
     @if inspection.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
     }
     @else {
-      // Try to reduce the number of times that the structural styles are emitted.
-      @if not $_badge-structure-emitted {
-        @include _badge-structure;
-
-        // Only flip the flag if the mixin is included at the top level. Otherwise the first
-        // inclusion might be inside of a theme class which will exclude the structural styles
-        // from all other themes.
-        @if not & {
-          $_badge-structure-emitted: true !global;
-        }
-      }
-
       @include base($theme);
       @if inspection.theme-has($theme, color) {
         @include color($theme);
@@ -244,9 +96,7 @@ $_emit-fallback-vars: true;
   }
 }
 
-@mixin _theme-from-tokens($tokens) {
-  @if ($tokens != ()) {
-    @include token-utils.create-token-values(
-        tokens-mat-badge.$prefix, map.get($tokens, tokens-mat-badge.$prefix));
-  }
+@mixin _theme-from-tokens($tokens, $options...) {
+  $mat-badge-tokens: token-utils.get-tokens-for($tokens, tokens-mat-badge.$prefix, $options...);
+  @include token-utils.create-token-values(tokens-mat-badge.$prefix, $mat-badge-tokens);
 }

package/badge/index.d.ts

@@ -13,6 +13,7 @@ declare namespace i3 {
     export {
         MatBadgePosition,
         MatBadgeSize,
+        _MatBadgeStyleLoader,
         MatBadge
     }
 }
@@ -95,7 +96,7 @@ export declare class MatBadge implements OnInit, OnDestroy {
 
 export declare class MatBadgeModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatBadgeModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatBadgeModule, never, [typeof i1.A11yModule, typeof i2.MatCommonModule, typeof i3.MatBadge], [typeof i3.MatBadge, typeof i2.MatCommonModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatBadgeModule, never, [typeof i1.A11yModule, typeof i2.MatCommonModule, typeof i3.MatBadge, typeof i3._MatBadgeStyleLoader], [typeof i3.MatBadge, typeof i2.MatCommonModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatBadgeModule>;
 }
 
@@ -105,4 +106,13 @@ export declare type MatBadgePosition = 'above after' | 'above before' | 'below b
 /** Allowed size options for matBadgeSize */
 export declare type MatBadgeSize = 'small' | 'medium' | 'large';
 
+/**
+ * Component used to load the structural styles of the badge.
+ * @docs-private
+ */
+declare class _MatBadgeStyleLoader {
+    static ɵfac: i0.ɵɵFactoryDeclaration<_MatBadgeStyleLoader, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<_MatBadgeStyleLoader, "ng-component", never, {}, {}, never, never, true, never>;
+}
+
 export { }

package/button/_button-base.scss

@@ -110,22 +110,13 @@
   }
 }
 
-// Hides the touch target on lower densities.
-@mixin mat-private-button-touch-target-density($scale) {
-  @include mdc-helpers.if-touch-targets-unsupported($scale) {
-    .mat-mdc-button-touch-target {
-      display: none;
-    }
-  }
-}
-
 // 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: var(#{token-utils.get-token-variable($token-name) + '-shadow'});
 }
 
-@mixin mat-private-button-touch-target($is-square) {
+@mixin mat-private-button-touch-target($is-square, $prefix, $slots) {
   // Element used to ensure that the button has a touch target that meets the required minimum.
   // Note that we use this, instead of MDC's built-in `mdc-button--touch` class, because the MDC
   // class is implemented as `margin-top: 6px; margin-bottom: 6px` on the host element which
@@ -136,5 +127,54 @@
     @include mdc-touch-target.touch-target(
       $set-width: $is-square,
       $query: mdc-helpers.$mdc-base-styles-query);
+
+    @include token-utils.use-tokens($prefix, $slots) {
+      @include token-utils.create-token-slot(display, 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.get-token-variable-reference(icon-spacing, true);
+    $icon-offset: token-utils.get-token-variable-reference(icon-offset, true);
+    $horizontal-padding: token-utils.get-token-variable-reference(horizontal-padding, true);
+    padding: 0 $horizontal-padding;
+
+    @if ($has-with-icon-padding) {
+      $with-icon-horizontal-padding:
+        token-utils.get-token-variable-reference(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;
+
+      [dir='rtl'] & {
+        margin-right: $icon-offset;
+        margin-left: $icon-spacing;
+      }
+    }
+
+    .mdc-button__label + .mat-icon {
+      margin-right: $icon-offset;
+      margin-left: $icon-spacing;
+
+      [dir='rtl'] & {
+        margin-right: $icon-spacing;
+        margin-left: $icon-offset;
+      }
+    }
   }
 }

package/button/_button-theme.scss

@@ -1,10 +1,8 @@
-@use 'sass:map';
 @use '@material/button/button-text-theme' as mdc-button-text-theme;
 @use '@material/button/button-filled-theme' as mdc-button-filled-theme;
 @use '@material/button/button-protected-theme' as mdc-button-protected-theme;
 @use '@material/button/button-outlined-theme' as mdc-button-outlined-theme;
 
-@use './button-base';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/tokens/token-utils';
@@ -79,25 +77,39 @@
   @include token-utils.create-token-values(tokens-mat-outlined-button.$prefix, $mat-tokens);
 }
 
-@mixin _theme-from-tokens($tokens) {
-  @if ($tokens != ()) {
-    @include mdc-button-text-theme.theme(map.get($tokens, tokens-mdc-text-button.$prefix));
-    @include mdc-button-protected-theme.theme(
-      map.get($tokens, tokens-mdc-protected-button.$prefix));
-    @include mdc-button-filled-theme.theme(map.get($tokens, tokens-mdc-filled-button.$prefix));
-    @include mdc-button-outlined-theme.theme(map.get($tokens, tokens-mdc-outlined-button.$prefix));
-
-    @include token-utils.create-token-values(
-      tokens-mat-text-button.$prefix, map.get($tokens, tokens-mat-text-button.$prefix));
-    @include token-utils.create-token-values(
-      tokens-mat-protected-button.$prefix, map.get($tokens, tokens-mat-protected-button.$prefix));
-    @include token-utils.create-token-values(
-      tokens-mat-filled-button.$prefix, map.get($tokens, tokens-mat-filled-button.$prefix));
-    @include token-utils.create-token-values(
-      tokens-mat-outlined-button.$prefix, map.get($tokens, tokens-mat-outlined-button.$prefix));
-  }
+@mixin _theme-from-tokens($tokens, $options...) {
+  $mdc-text-button-tokens:
+      token-utils.get-tokens-for($tokens, tokens-mdc-text-button.$prefix, $options...);
+  $mdc-protected-button-tokens:
+      token-utils.get-tokens-for($tokens, tokens-mdc-protected-button.$prefix, $options...);
+  $mdc-filled-button-tokens:
+      token-utils.get-tokens-for($tokens, tokens-mdc-filled-button.$prefix, $options...);
+  $mdc-outlined-button-tokens:
+      token-utils.get-tokens-for($tokens, tokens-mdc-outlined-button.$prefix, $options...);
+  $mat-text-button-tokens:
+      token-utils.get-tokens-for($tokens, tokens-mat-text-button.$prefix, $options...);
+  $mat-protected-button-tokens:
+      token-utils.get-tokens-for($tokens, tokens-mat-protected-button.$prefix, $options...);
+  $mat-filled-button-tokens:
+      token-utils.get-tokens-for($tokens, tokens-mat-filled-button.$prefix, $options...);
+  $mat-outlined-button-tokens:
+      token-utils.get-tokens-for($tokens, tokens-mat-outlined-button.$prefix, $options...);
+  @include mdc-button-text-theme.theme($mdc-text-button-tokens);
+  @include mdc-button-protected-theme.theme($mdc-protected-button-tokens);
+  @include mdc-button-filled-theme.theme($mdc-filled-button-tokens);
+  @include mdc-button-outlined-theme.theme($mdc-outlined-button-tokens);
+  @include token-utils.create-token-values(tokens-mat-text-button.$prefix, $mat-text-button-tokens);
+  @include token-utils.create-token-values(
+      tokens-mat-protected-button.$prefix, $mat-protected-button-tokens);
+  @include token-utils.create-token-values(
+      tokens-mat-filled-button.$prefix, $mat-filled-button-tokens);
+  @include token-utils.create-token-values(
+      tokens-mat-outlined-button.$prefix, $mat-outlined-button-tokens);
 }
 
+/// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
+/// for the mat-button.
+/// @param {Map} $theme The theme to generate base styles for.
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include theme-from-tokens(inspection.get-theme-tokens($theme, base));
@@ -112,13 +124,27 @@
         tokens-mdc-protected-button.get-unthemable-tokens());
       @include mdc-button-outlined-theme.theme(
         tokens-mdc-outlined-button.get-unthemable-tokens());
+
+      @include token-utils.create-token-values(tokens-mat-text-button.$prefix,
+        tokens-mat-text-button.get-unthemable-tokens());
+      @include token-utils.create-token-values(tokens-mat-filled-button.$prefix,
+        tokens-mat-filled-button.get-unthemable-tokens());
+      @include token-utils.create-token-values(tokens-mat-protected-button.$prefix,
+        tokens-mat-protected-button.get-unthemable-tokens());
+      @include token-utils.create-token-values(tokens-mat-outlined-button.$prefix,
+        tokens-mat-outlined-button.get-unthemable-tokens());
     }
   }
 }
 
-@mixin color($theme) {
+/// Outputs color theme styles for the mat-button.
+/// @param {Map} $theme The theme to generate color styles for.
+/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
+///   $color-variant: The color variant to use for the button: primary, secondary, tertiary,
+///      or error (If not specified, default primary color will be used).
+@mixin color($theme, $options...) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   }
   @else {
     @include sass-utils.current-selector-or-root() {
@@ -186,58 +212,73 @@
   }
 }
 
+/// Outputs typography theme styles for the mat-button.
+/// @param {Map} $theme The theme to generate typography styles for.
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   }
   @else {
     @include sass-utils.current-selector-or-root() {
-      $text-typography-tokens: tokens-mdc-text-button.get-typography-tokens($theme);
-      $filled-typography-tokens: tokens-mdc-filled-button.get-typography-tokens($theme);
-      $outlined-typography-tokens: tokens-mdc-outlined-button.get-typography-tokens($theme);
-      $protected-typography-tokens: tokens-mdc-protected-button.get-typography-tokens($theme);
-
-      @include mdc-button-text-theme.theme($text-typography-tokens);
-      @include mdc-button-filled-theme.theme($filled-typography-tokens);
-      @include mdc-button-outlined-theme.theme($outlined-typography-tokens);
-      @include mdc-button-protected-theme.theme($protected-typography-tokens);
+      @include mdc-button-text-theme.theme(
+        tokens-mdc-text-button.get-typography-tokens($theme));
+      @include mdc-button-filled-theme.theme(
+        tokens-mdc-filled-button.get-typography-tokens($theme));
+      @include mdc-button-outlined-theme.theme(
+        tokens-mdc-outlined-button.get-typography-tokens($theme));
+      @include mdc-button-protected-theme.theme(
+        tokens-mdc-protected-button.get-typography-tokens($theme));
+
+      @include token-utils.create-token-values(tokens-mat-text-button.$prefix,
+        tokens-mat-text-button.get-typography-tokens($theme));
+      @include token-utils.create-token-values(tokens-mat-filled-button.$prefix,
+        tokens-mat-filled-button.get-typography-tokens($theme));
+      @include token-utils.create-token-values(tokens-mat-protected-button.$prefix,
+        tokens-mat-protected-button.get-typography-tokens($theme));
+      @include token-utils.create-token-values(tokens-mat-outlined-button.$prefix,
+        tokens-mat-outlined-button.get-typography-tokens($theme));
     }
   }
 }
 
+/// Outputs density theme styles for the mat-button.
+/// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   }
   @else {
-    $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
-
     @include sass-utils.current-selector-or-root() {
-      $text-density-tokens: tokens-mdc-text-button.get-density-tokens($theme);
-      $filled-density-tokens: tokens-mdc-filled-button.get-density-tokens($theme);
-      $outlined-density-tokens: tokens-mdc-outlined-button.get-density-tokens($theme);
-      $protected-density-tokens: tokens-mdc-protected-button.get-density-tokens($theme);
-
-      @include mdc-button-text-theme.theme($text-density-tokens);
-      @include mdc-button-filled-theme.theme($filled-density-tokens);
-      @include mdc-button-outlined-theme.theme($outlined-density-tokens);
-      @include mdc-button-protected-theme.theme($protected-density-tokens);
-    }
-
-    .mat-mdc-button,
-    .mat-mdc-raised-button,
-    .mat-mdc-unelevated-button,
-    .mat-mdc-outlined-button {
-      // TODO: tokenize the touch target visibility.
-      @include button-base.mat-private-button-touch-target-density($density-scale);
+      @include mdc-button-text-theme.theme(
+        tokens-mdc-text-button.get-density-tokens($theme));
+      @include mdc-button-filled-theme.theme(
+        tokens-mdc-filled-button.get-density-tokens($theme));
+      @include mdc-button-outlined-theme.theme(
+        tokens-mdc-outlined-button.get-density-tokens($theme));
+      @include mdc-button-protected-theme.theme(
+        tokens-mdc-protected-button.get-density-tokens($theme));
+
+      @include token-utils.create-token-values(tokens-mat-text-button.$prefix,
+        tokens-mat-text-button.get-density-tokens($theme));
+      @include token-utils.create-token-values(tokens-mat-filled-button.$prefix,
+        tokens-mat-filled-button.get-density-tokens($theme));
+      @include token-utils.create-token-values(tokens-mat-protected-button.$prefix,
+        tokens-mat-protected-button.get-density-tokens($theme));
+      @include token-utils.create-token-values(tokens-mat-outlined-button.$prefix,
+        tokens-mat-outlined-button.get-density-tokens($theme));
     }
   }
 }
 
-@mixin theme($theme) {
+/// Outputs all (base, color, typography, and density) theme styles for the mat-button.
+/// @param {Map} $theme The theme to generate styles for.
+/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
+///   $color-variant: The color variant to use for the button: primary, secondary, tertiary,
+///      or error (If not specified, default primary color will be used).
+@mixin theme($theme, $options...) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-button') {
     @if inspection.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
     }
     @else {
       @include base($theme);