@angular/material 20.0.0-next.1 → 20.0.0-next.2

package/card/_card-theme.scss

@@ -14,15 +14,15 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-elevated-card.$prefix,
         tokens-mdc-elevated-card.get-unthemable-tokens()
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-outlined-card.$prefix,
         tokens-mdc-outlined-card.get-unthemable-tokens()
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-card.$prefix,
         tokens-mat-card.get-unthemable-tokens()
       );
@@ -35,15 +35,15 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-elevated-card.$prefix,
         tokens-mdc-elevated-card.get-color-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-outlined-card.$prefix,
         tokens-mdc-outlined-card.get-color-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-card.$prefix,
         tokens-mat-card.get-color-tokens($theme)
       );
@@ -56,15 +56,15 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-elevated-card.$prefix,
         tokens-mdc-elevated-card.get-typography-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-outlined-card.$prefix,
         tokens-mdc-outlined-card.get-typography-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-card.$prefix,
         tokens-mat-card.get-typography-tokens($theme)
       );
@@ -77,15 +77,15 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-elevated-card.$prefix,
         tokens-mdc-elevated-card.get-density-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-outlined-card.$prefix,
         tokens-mdc-outlined-card.get-density-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-card.$prefix,
         tokens-mat-card.get-density-tokens($theme)
       );

package/checkbox/_checkbox-theme.scss

@@ -15,11 +15,11 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-checkbox.$prefix,
         tokens-mdc-checkbox.get-unthemable-tokens()
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-checkbox.$prefix,
         tokens-mat-checkbox.get-unthemable-tokens()
       );
@@ -37,11 +37,11 @@
     @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(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-checkbox.$prefix,
         tokens-mdc-checkbox.get-color-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-checkbox.$prefix,
         tokens-mat-checkbox.get-color-tokens($theme)
       );
@@ -49,14 +49,14 @@
 
     .mat-mdc-checkbox {
       &.mat-primary {
-        @include token-utils.create-token-values(
+        @include token-utils.create-token-values-mixed(
           tokens-mdc-checkbox.$prefix,
           tokens-mdc-checkbox.get-color-tokens($theme, primary)
         );
       }
 
       &.mat-warn {
-        @include token-utils.create-token-values(
+        @include token-utils.create-token-values-mixed(
           tokens-mdc-checkbox.$prefix,
           tokens-mdc-checkbox.get-color-tokens($theme, warn)
         );
@@ -72,11 +72,11 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-checkbox.$prefix,
         tokens-mdc-checkbox.get-typography-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-checkbox.$prefix,
         tokens-mat-checkbox.get-typography-tokens($theme)
       );
@@ -93,11 +93,11 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-checkbox.$prefix,
         tokens-mdc-checkbox.get-density-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-checkbox.$prefix,
         tokens-mat-checkbox.get-density-tokens($theme)
       );

package/chips/_chips-theme.scss

@@ -15,11 +15,11 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   } @else {
     .mat-mdc-standard-chip {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-chip.$prefix,
         tokens-mdc-chip.get-unthemable-tokens()
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-chip.$prefix,
         tokens-mat-chip.get-unthemable-tokens()
       );
@@ -37,11 +37,11 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   } @else {
     .mat-mdc-standard-chip {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-chip.$prefix,
         tokens-mdc-chip.get-color-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-chip.$prefix,
         tokens-mat-chip.get-color-tokens($theme)
       );
@@ -49,33 +49,33 @@
       &.mat-mdc-chip-selected,
       &.mat-mdc-chip-highlighted {
         &.mat-primary {
-          @include token-utils.create-token-values(
+          @include token-utils.create-token-values-mixed(
             tokens-mdc-chip.$prefix,
             tokens-mdc-chip.get-color-tokens($theme, primary)
           );
-          @include token-utils.create-token-values(
+          @include token-utils.create-token-values-mixed(
             tokens-mat-chip.$prefix,
             tokens-mat-chip.get-color-tokens($theme, primary)
           );
         }
 
         &.mat-accent {
-          @include token-utils.create-token-values(
+          @include token-utils.create-token-values-mixed(
             tokens-mdc-chip.$prefix,
             tokens-mdc-chip.get-color-tokens($theme, accent)
           );
-          @include token-utils.create-token-values(
+          @include token-utils.create-token-values-mixed(
             tokens-mat-chip.$prefix,
             tokens-mat-chip.get-color-tokens($theme, accent)
           );
         }
 
         &.mat-warn {
-          @include token-utils.create-token-values(
+          @include token-utils.create-token-values-mixed(
             tokens-mdc-chip.$prefix,
             tokens-mdc-chip.get-color-tokens($theme, warn)
           );
-          @include token-utils.create-token-values(
+          @include token-utils.create-token-values-mixed(
             tokens-mat-chip.$prefix,
             tokens-mat-chip.get-color-tokens($theme, warn)
           );
@@ -92,11 +92,11 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   } @else {
     .mat-mdc-standard-chip {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-chip.$prefix,
         tokens-mdc-chip.get-typography-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-chip.$prefix,
         tokens-mat-chip.get-typography-tokens($theme)
       );
@@ -111,11 +111,11 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   } @else {
     .mat-mdc-chip.mat-mdc-standard-chip {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-chip.$prefix,
         tokens-mdc-chip.get-density-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-chip.$prefix,
         tokens-mat-chip.get-density-tokens($theme)
       );

package/core/_core-theme.scss

@@ -24,7 +24,7 @@
     @include optgroup-theme.base($theme);
     @include pseudo-checkbox-theme.base($theme);
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-app.$prefix,
         tokens-mat-app.get-unthemable-tokens()
       );
@@ -41,7 +41,7 @@
     @include optgroup-theme.color($theme);
     @include pseudo-checkbox-theme.color($theme);
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-app.$prefix,
         tokens-mat-app.get-color-tokens($theme)
       );

package/core/option/_optgroup-theme.scss

@@ -19,7 +19,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-optgroup.$prefix,
         tokens-mat-optgroup.get-color-tokens($theme)
       );
@@ -32,7 +32,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-optgroup.$prefix,
         tokens-mat-optgroup.get-typography-tokens($theme)
       );

package/core/option/_option-theme.scss

@@ -26,21 +26,21 @@
     @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(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-option.$prefix,
         tokens-mat-option.get-color-tokens($theme)
       );
     }
 
     .mat-accent {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-option.$prefix,
         tokens-mat-option.get-color-tokens($theme, accent)
       );
     }
 
     .mat-warn {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-option.$prefix,
         tokens-mat-option.get-color-tokens($theme, warn)
       );
@@ -55,7 +55,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-option.$prefix,
         tokens-mat-option.get-typography-tokens($theme)
       );

package/core/ripple/_ripple-theme.scss

@@ -18,7 +18,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-ripple.$prefix,
         tokens-mat-ripple.get-color-tokens($theme)
       );
@@ -31,7 +31,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-ripple.$prefix,
         tokens-mat-ripple.get-typography-tokens($theme)
       );
@@ -44,7 +44,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-ripple.$prefix,
         tokens-mat-ripple.get-density-tokens($theme)
       );

package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss

@@ -8,11 +8,11 @@
 
 @mixin _palette-styles($theme, $palette-name) {
   @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(
+    @include token-utils.create-token-values-mixed(
       tokens-mat-full-pseudo-checkbox.$prefix,
       tokens-mat-full-pseudo-checkbox.get-color-tokens($theme, $palette-name)
     );
-    @include token-utils.create-token-values(
+    @include token-utils.create-token-values-mixed(
       tokens-mat-minimal-pseudo-checkbox.$prefix,
       tokens-mat-minimal-pseudo-checkbox.get-color-tokens($theme, $palette-name)
     );
@@ -33,11 +33,11 @@
     tokens-mat-minimal-pseudo-checkbox.$prefix,
     $options...
   );
-  @include token-utils.create-token-values(
+  @include token-utils.create-token-values-mixed(
     tokens-mat-full-pseudo-checkbox.$prefix,
     $mat-full-pseudo-checkbox-tokens
   );
-  @include token-utils.create-token-values(
+  @include token-utils.create-token-values-mixed(
     tokens-mat-minimal-pseudo-checkbox.$prefix,
     $mat-minimal-pseudo-checkbox-tokens
   );

package/core/theming/_color-api-backwards-compatibility.scss

@@ -23,7 +23,7 @@
 // from the bundle.
 $_overrides-only: true;
 
-@mixin color-variant-styles($theme, $color-variant) {
+@mixin _color-variant-styles($theme, $color-variant) {
   $primary-options: (color-variant: $color-variant, emit-overrides-only: $_overrides-only);
 
   // Some components use the secondary color rather than primary color for `.mat-primary`.
@@ -33,10 +33,21 @@ $_overrides-only: true;
     emit-overrides-only: $_overrides-only
   );
 
-  @include option-theme.color($theme, $secondary-options...);
-  @include progress-spinner-theme.color($theme, $primary-options...);
-  @include pseudo-checkbox-theme.color($theme, $primary-options...);
-  @include stepper-theme.color($theme, $primary-options...);
+  & {
+    @include option-theme.color($theme, $secondary-options...);
+  }
+
+  & {
+    @include progress-spinner-theme.color($theme, $primary-options...);
+  }
+
+  & {
+    @include pseudo-checkbox-theme.color($theme, $primary-options...);
+  }
+
+  & {
+    @include stepper-theme.color($theme, $primary-options...);
+  }
 
   &.mat-icon {
     @include icon-theme.color($theme, $primary-options...);
@@ -105,7 +116,7 @@ $_overrides-only: true;
 
 @mixin color-variants-backwards-compatibility($theme) {
   .mat-primary {
-    @include color-variant-styles($theme, primary);
+    @include _color-variant-styles($theme, primary);
   }
   .mat-badge {
     @include badge-theme.color($theme, $color-variant: primary,
@@ -113,7 +124,7 @@ $_overrides-only: true;
   }
 
   .mat-accent {
-    @include color-variant-styles($theme, tertiary);
+    @include _color-variant-styles($theme, tertiary);
   }
   .mat-badge-accent {
     @include badge-theme.color($theme, $color-variant: tertiary,
@@ -121,7 +132,7 @@ $_overrides-only: true;
   }
 
   .mat-warn {
-    @include color-variant-styles($theme, error);
+    @include _color-variant-styles($theme, error);
   }
   .mat-badge-warn {
     @include badge-theme.color($theme, $color-variant: error,

package/core/tokens/_density.scss

@@ -38,6 +38,9 @@ $_density-tokens: (
   (mdc, filled-button): (
     container-height: (40px, 36px, 32px, 28px),
   ),
+  (mat, tonal-button): (
+    container-height: (40px, 36px, 32px, 28px),
+  ),
   (mdc, outlined-button): (
     container-height: (40px, 36px, 32px, 28px),
   ),

package/core/tokens/_token-definition.scss

@@ -173,8 +173,7 @@ $_system-fallbacks: null;
     @if(meta.type-of($color) == 'color') {
       $result: map.remove($result, $opacity-key);
       $result: map.set($result, $color-key, rgba($color, $opacity));
-    }
-    @else if($color != null) {
+    } @else if($color != null) {
       $result: map.remove($result, $opacity-key);
       $combined-color: #{color-mix(in srgb, #{$color} #{($opacity * 100) + '%'}, transparent)};
       $result: map.set($result, $color-key, $combined-color);

package/core/tokens/_token-utils.scss

@@ -118,11 +118,26 @@ $_system-fallbacks: m3-system.create-system-fallbacks();
 
 // Outputs a map of tokens under a specific prefix.
 @mixin create-token-values($prefix, $tokens) {
-  @if $tokens != null {
-    // TODO: The `&` adds to the file size of theme, but it's necessary for compatibility
-    // with https://sass-lang.com/documentation/breaking-changes/mixed-decls/. We should
-    // figure out a better way to do this or move all the concrete styles out of the theme.
-    & {
+  @include _create-token-values-internal($prefix, $tokens, false);
+}
+
+// Outputs a map of tokens under a specific prefix in scenarios where tokens may be mixed with
+// other declarations (e.g. M2 themes). Used to avoid https://sass-lang.com/documentation/breaking-changes/mixed-decls/
+@mixin create-token-values-mixed($prefix, $tokens) {
+  @include _create-token-values-internal($prefix, $tokens, true);
+}
+
+@mixin _create-token-values-internal($prefix, $tokens, $in-place) {
+  @if ($tokens != null) {
+    @if ($in-place) {
+      & {
+        @each $key, $value in $tokens {
+          @if $value != null {
+            #{_create-var-name($prefix, $key)}: #{$value};
+          }
+        }
+      }
+    } @else {
       @each $key, $value in $tokens {
         @if $value != null {
           #{_create-var-name($prefix, $key)}: #{$value};

package/core/tokens/m2/_index.scss

@@ -45,6 +45,7 @@
 @use './mat/toolbar' as tokens-mat-toolbar;
 @use './mat/tree' as tokens-mat-tree;
 @use './mat/timepicker' as tokens-mat-timepicker;
+@use './mat/tonal-button' as tokens-mat-tonal-button;
 @use './mdc/checkbox' as tokens-mdc-checkbox;
 @use './mdc/text-button' as tokens-mdc-text-button;
 @use './mdc/protected-button' as tokens-mdc-protected-button;
@@ -158,6 +159,7 @@
     _get-tokens-for-module($theme, tokens-mat-toolbar),
     _get-tokens-for-module($theme, tokens-mat-tree),
     _get-tokens-for-module($theme, tokens-mat-timepicker),
+    _get-tokens-for-module($theme, tokens-mat-tonal-button),
     _get-tokens-for-module($theme, tokens-mdc-checkbox),
     _get-tokens-for-module($theme, tokens-mdc-chip),
     _get-tokens-for-module($theme, tokens-mdc-circular-progress),

package/core/tokens/m2/mat/_tonal-button.scss

@@ -0,0 +1,110 @@
+@use 'sass:map';
+@use '../../token-definition';
+@use '../../../theming/theming';
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, tonal-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 (
+    // Shape of the container element.
+    container-shape: 4px,
+
+    // Start/end padding of the button.
+    horizontal-padding: 16px,
+
+    // Space between the icon and the button's main content.
+    icon-spacing: 8px,
+
+    // Amount by which to offset the icon so that its presence
+    // doesn't increase throw off the horizontal padding.
+    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)),
+
+    // Color of the element that shows the hover, focus and pressed states.
+    state-layer-color: inspection.get-theme-color($theme, foreground, base),
+
+    // Color of the element that shows the hover, focus and pressed states while disabled.
+    disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+
+    // Color of the ripple element.
+    ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
+
+    // Opacity of the ripple when the button is hovered.
+    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
+
+    // Opacity of the ripple when the button is focused.
+    focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
+
+    // Opacity of the ripple when the button is pressed.
+    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(token-definition.$placeholder-color-config),
+      get-typography-tokens(token-definition.$placeholder-typography-config),
+      get-density-tokens(token-definition.$placeholder-density-config)
+  );
+}

package/core/tokens/m3/_index.scss

@@ -43,6 +43,7 @@
 @use './mat/toolbar' as tokens-mat-toolbar;
 @use './mat/tree' as tokens-mat-tree;
 @use './mat/timepicker' as tokens-mat-timepicker;
+@use './mat/tonal-button' as tokens-mat-tonal-button;
 @use './mdc/checkbox' as tokens-mdc-checkbox;
 @use './mdc/text-button' as tokens-mdc-text-button;
 @use './mdc/protected-button' as tokens-mdc-protected-button;
@@ -85,6 +86,7 @@ $_module-names: (
   tokens-mat-fab,
   tokens-mat-fab-small,
   tokens-mat-filled-button,
+  tokens-mat-tonal-button,
   tokens-mat-form-field,
   tokens-mat-grid-list,
   tokens-mat-icon-button,

package/core/tokens/m3/definitions/_index.scss

@@ -14,6 +14,7 @@
 @forward './md-comp-fab-tertiary-small' as md-comp-fab-tertiary-small-*;
 @forward './md-comp-fab-tertiary' as md-comp-fab-tertiary-*;
 @forward './md-comp-filled-button' as md-comp-filled-button-*;
+@forward './md-comp-filled-tonal-button' as md-comp-filled-tonal-button-*;
 @forward './md-comp-filled-card' as md-comp-filled-card-*;
 @forward './md-comp-filled-icon-button' as md-comp-filled-icon-button-*;
 @forward './md-comp-filled-text-field' as md-comp-filled-text-field-*;
@@ -63,7 +64,6 @@
 // @forward './unused/md-comp-filled-autocomplete' as md-comp-filled-autocomplete-*;
 // @forward './unused/md-comp-filled-menu-button' as md-comp-filled-menu-button-*;
 // @forward './unused/md-comp-filled-select' as md-comp-filled-select-*;
-// @forward './unused/md-comp-filled-tonal-button' as md-comp-filled-tonal-button-*;
 // @forward './unused/md-comp-filled-tonal-icon-button' as md-comp-filled-tonal-icon-button-*;
 // @forward './unused/md-comp-filter-chip' as md-comp-filter-chip-*;
 // @forward './unused/md-comp-full-screen-dialog' as md-comp-full-screen-dialog-*;

package/core/tokens/m3/definitions/_md-comp-elevated-card.scss

@@ -21,7 +21,7 @@ $_default: (
 );
 
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
-  @return (
+  $values: (
     'container-color': map.get($deps, 'md-sys-color', 'surface-container-low'),
     'container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),
     'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),
@@ -50,4 +50,6 @@ $_default: (
     'pressed-state-layer-opacity':
       map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')
   );
+
+  @return $values;
 }