@angular/material 17.1.1 → 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,5 +1,4 @@
 @use 'sass:color';
-@use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/typography/typography';
@@ -7,16 +6,29 @@
 @use '../core/tokens/token-utils';
 @use '../core/style/sass-utils';
 
+/// 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() {
@@ -36,6 +48,8 @@
   }
 }
 
+/// 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));
@@ -48,6 +62,8 @@
   }
 }
 
+/// 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));
@@ -55,10 +71,15 @@
   @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 {
       @include base($theme);
@@ -75,9 +96,7 @@
   }
 }
 
-@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/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);

package/button/_fab-theme.scss

@@ -1,15 +1,20 @@
-@use 'sass:map';
 @use '@material/fab/fab-theme' as mdc-fab-theme;
+@use '@material/fab/fab-small-theme' as mdc-fab-small-theme;
 @use '@material/fab/extended-fab-theme' as mdc-extended-fab-theme;
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/tokens/m2/mdc/fab' as tokens-mdc-fab;
+@use '../core/tokens/m2/mdc/fab-small' as tokens-mdc-fab-small;
 @use '../core/tokens/m2/mdc/extended-fab' as tokens-mdc-extended-fab;
 @use '../core/tokens/m2/mat/fab' as tokens-mat-fab;
+@use '../core/tokens/m2/mat/fab-small' as tokens-mat-fab-small;
 @use '../core/tokens/token-utils';
 @use '../core/typography/typography';
 
+/// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
+/// for the mat-fab.
+/// @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));
@@ -18,6 +23,7 @@
     // Add default values for tokens not related to color, typography, or density.
     @include sass-utils.current-selector-or-root() {
       @include mdc-fab-theme.theme(tokens-mdc-fab.get-unthemable-tokens());
+      @include mdc-fab-small-theme.theme(tokens-mdc-fab-small.get-unthemable-tokens());
       @include mdc-extended-fab-theme.theme(
           tokens-mdc-extended-fab.get-unthemable-tokens()
       );
@@ -40,17 +46,37 @@
   @include token-utils.create-token-values(tokens-mat-fab.$prefix, $mat-tokens);
 }
 
-@mixin color($theme) {
+@mixin _fab-small-variant($theme, $palette) {
+  $mdc-tokens: if($palette,
+    tokens-mdc-fab-small.private-get-color-palette-color-tokens($theme, $palette),
+    tokens-mdc-fab-small.get-color-tokens($theme)
+  );
+
+  $mat-tokens: if($palette,
+    tokens-mat-fab-small.private-get-color-palette-color-tokens($theme, $palette),
+    tokens-mat-fab-small.get-color-tokens($theme)
+  );
+
+  @include mdc-fab-small-theme.theme($mdc-tokens);
+  @include token-utils.create-token-values(tokens-mat-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):
+///   $color-variant: The color variant to use for the fab: primary, secondary, or tertiary
+///     (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() {
       @include _fab-variant($theme, null);
+      @include _fab-small-variant($theme, null);
       @include mdc-extended-fab-theme.theme(tokens-mdc-extended-fab.get-color-tokens($theme));
 
-      .mat-mdc-fab,
-      .mat-mdc-mini-fab {
+      .mat-mdc-fab {
         &.mat-primary {
           @include _fab-variant($theme, primary);
         }
@@ -63,10 +89,26 @@
           @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);
+        }
+      }
     }
   }
 }
 
+/// Outputs typography theme styles for the mat-fab.
+/// @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));
@@ -74,21 +116,39 @@
   @else {
     @include sass-utils.current-selector-or-root() {
       @include mdc-extended-fab-theme.theme(tokens-mdc-extended-fab.get-typography-tokens($theme));
+      @include token-utils.create-token-values(tokens-mat-fab.$prefix,
+        tokens-mat-fab.get-typography-tokens($theme));
+      @include token-utils.create-token-values(tokens-mat-fab-small.$prefix,
+        tokens-mat-fab-small.get-typography-tokens($theme));
     }
   }
 }
 
+/// Outputs density theme styles for the mat-fab.
+/// @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 {}
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-fab.$prefix,
+        tokens-mat-fab.get-density-tokens($theme));
+      @include token-utils.create-token-values(tokens-mat-fab-small.$prefix,
+        tokens-mat-fab-small.get-density-tokens($theme));
+    }
+  }
 }
 
-@mixin theme($theme) {
+/// Outputs all (base, color, typography, and density) theme styles for the mat-checkbox.
+/// @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 fab: primary, secondary, or tertiary
+///     (If not specified, default primary color will be used).
+@mixin theme($theme, $options...) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-fab') {
     @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);
@@ -105,11 +165,18 @@
   }
 }
 
-@mixin _theme-from-tokens($tokens) {
-  @if ($tokens != ()) {
-    @include mdc-extended-fab-theme.theme(map.get($tokens, tokens-mdc-extended-fab.$prefix));
-    @include mdc-fab-theme.theme(map.get($tokens, tokens-mdc-fab.$prefix));
-    @include token-utils.create-token-values(
-        tokens-mat-fab.$prefix, map.get($tokens, tokens-mat-fab.$prefix));
-  }
+@mixin _theme-from-tokens($tokens, $options...) {
+  $mdc-extended-fab-tokens: token-utils.get-tokens-for(
+      $tokens, tokens-mdc-extended-fab.$prefix, $options...);
+  $mdc-fab-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-fab.$prefix, $options...);
+  $mdc-fab-small-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-fab-small.$prefix,
+    $options...);
+  $mat-fab-tokens: token-utils.get-tokens-for($tokens, tokens-mat-fab.$prefix, $options...);
+  $mat-fab-small-tokens: token-utils.get-tokens-for($tokens, tokens-mat-fab-small.$prefix,
+    $options...);
+  @include mdc-extended-fab-theme.theme($mdc-extended-fab-tokens);
+  @include mdc-fab-theme.theme($mdc-fab-tokens);
+  @include mdc-fab-small-theme.theme($mdc-fab-small-tokens);
+  @include token-utils.create-token-values(tokens-mat-fab.$prefix, $mat-fab-tokens);
+  @include token-utils.create-token-values(tokens-mat-fab-small.$prefix, $mat-fab-small-tokens);
 }

package/button/_icon-button-theme.scss

@@ -5,7 +5,6 @@
 @use '../core/tokens/m2/mdc/icon-button' as tokens-mdc-icon-button;
 @use '../core/tokens/m2/mat/icon-button' as tokens-mat-icon-button;
 @use '../core/style/sass-utils';
-@use './button-base';
 @use '../core/tokens/token-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
@@ -67,7 +66,12 @@
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   }
-  @else {}
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-icon-button.$prefix,
+        tokens-mat-icon-button.get-typography-tokens($theme));
+    }
+  }
 }
 
 @mixin density($theme) {
@@ -91,6 +95,11 @@
       $property-name: size,
     );
 
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-icon-button.$prefix,
+        tokens-mat-icon-button.get-density-tokens($theme));
+    }
+
     // Use `mat-mdc-button-base` to increase the specificity over the button's structural styles.
     .mat-mdc-icon-button.mat-mdc-button-base {
       // Match the styles that used to be present. This is necessary for backwards
@@ -107,8 +116,6 @@
       width: var(--mdc-icon-button-state-layer-size);
       height: var(--mdc-icon-button-state-layer-size);
       padding: math.div($calculated-size - $icon-size, 2);
-
-      @include button-base.mat-private-button-touch-target-density($density-scale);
     }
   }
 }