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

package/autocomplete/_autocomplete-theme.scss

@@ -12,7 +12,7 @@
     @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-mat-autocomplete.$prefix,
         tokens-mat-autocomplete.get-unthemable-tokens()
       );
@@ -25,7 +25,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-autocomplete.$prefix,
         tokens-mat-autocomplete.get-color-tokens($theme)
       );
@@ -38,7 +38,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-autocomplete.$prefix,
         tokens-mat-autocomplete.get-typography-tokens($theme)
       );
@@ -51,7 +51,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-autocomplete.$prefix,
         tokens-mat-autocomplete.get-density-tokens($theme)
       );

package/autocomplete/index.d.ts

@@ -47,6 +47,10 @@ interface MatAutocompleteDefaultOptions {
      * they're interacting with the autocomplete.
      */
     requireSelection?: boolean;
+    /** Class to be applied to the autocomplete's backdrop. */
+    backdropClass?: string;
+    /** Whether the autocomplete has a backdrop. */
+    hasBackdrop?: boolean;
     /** Class or list of classes to be applied to the autocomplete's overlay panel. */
     overlayPanelClass?: string | string[];
     /** Whether icon indicators should be hidden for single-selection. */

package/badge/_badge-theme.scss

@@ -15,7 +15,7 @@
     @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-mat-badge.$prefix,
         tokens-mat-badge.get-unthemable-tokens()
       );
@@ -33,21 +33,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-badge.$prefix,
         tokens-mat-badge.get-color-tokens($theme)
       );
     }
 
     .mat-badge-accent {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-badge.$prefix,
         tokens-mat-badge.private-get-color-palette-color-tokens($theme, accent)
       );
     }
 
     .mat-badge-warn {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-badge.$prefix,
         tokens-mat-badge.private-get-color-palette-color-tokens($theme, warn)
       );
@@ -62,7 +62,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-badge.$prefix,
         tokens-mat-badge.get-typography-tokens($theme)
       );

package/bottom-sheet/_bottom-sheet-theme.scss

@@ -12,7 +12,7 @@
     @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-mat-bottom-sheet.$prefix,
         tokens-mat-bottom-sheet.get-unthemable-tokens()
       );
@@ -25,7 +25,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-bottom-sheet.$prefix,
         tokens-mat-bottom-sheet.get-color-tokens($theme)
       );
@@ -38,7 +38,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-bottom-sheet.$prefix,
         tokens-mat-bottom-sheet.get-typography-tokens($theme)
       );

package/button/_button-theme.scss

@@ -11,6 +11,7 @@
 @use '../core/tokens/m2/mat/protected-button' as tokens-mat-protected-button;
 @use '../core/tokens/m2/mdc/text-button' as tokens-mdc-text-button;
 @use '../core/tokens/m2/mat/text-button' as tokens-mat-text-button;
+@use '../core/tokens/m2/mat/tonal-button' as tokens-mat-tonal-button;
 @use '../core/style/sass-utils';
 
 @mixin _text-button-variant($theme, $palette) {
@@ -26,8 +27,8 @@
     tokens-mat-text-button.get-color-tokens($theme)
   );
 
-  @include token-utils.create-token-values(tokens-mdc-text-button.$prefix, $mdc-tokens);
-  @include token-utils.create-token-values(tokens-mat-text-button.$prefix, $mat-tokens);
+  @include token-utils.create-token-values-mixed(tokens-mdc-text-button.$prefix, $mdc-tokens);
+  @include token-utils.create-token-values-mixed(tokens-mat-text-button.$prefix, $mat-tokens);
 }
 
 @mixin _filled-button-variant($theme, $palette) {
@@ -43,8 +44,8 @@
     tokens-mat-filled-button.get-color-tokens($theme)
   );
 
-  @include token-utils.create-token-values(tokens-mdc-filled-button.$prefix, $mdc-tokens);
-  @include token-utils.create-token-values(tokens-mat-filled-button.$prefix, $mat-tokens);
+  @include token-utils.create-token-values-mixed(tokens-mdc-filled-button.$prefix, $mdc-tokens);
+  @include token-utils.create-token-values-mixed(tokens-mat-filled-button.$prefix, $mat-tokens);
 }
 
 @mixin _protected-button-variant($theme, $palette) {
@@ -60,8 +61,8 @@
     tokens-mat-protected-button.get-color-tokens($theme)
   );
 
-  @include token-utils.create-token-values(tokens-mdc-protected-button.$prefix, $mdc-tokens);
-  @include token-utils.create-token-values(tokens-mat-protected-button.$prefix, $mat-tokens);
+  @include token-utils.create-token-values-mixed(tokens-mdc-protected-button.$prefix, $mdc-tokens);
+  @include token-utils.create-token-values-mixed(tokens-mat-protected-button.$prefix, $mat-tokens);
 }
 
 @mixin _outlined-button-variant($theme, $palette) {
@@ -77,10 +78,19 @@
     tokens-mat-outlined-button.get-color-tokens($theme)
   );
 
-  @include token-utils.create-token-values(tokens-mdc-outlined-button.$prefix, $mdc-tokens);
-  @include token-utils.create-token-values(tokens-mat-outlined-button.$prefix, $mat-tokens);
+  @include token-utils.create-token-values-mixed(tokens-mdc-outlined-button.$prefix, $mdc-tokens);
+  @include token-utils.create-token-values-mixed(tokens-mat-outlined-button.$prefix, $mat-tokens);
 }
 
+@mixin _tonal-button-variant($theme, $palette) {
+  @include token-utils.create-token-values-mixed(tokens-mat-tonal-button.$prefix, if(
+    $palette,
+    tokens-mat-tonal-button.private-get-color-palette-color-tokens($theme, $palette),
+    tokens-mat-tonal-button.get-color-tokens($theme)
+  ));
+}
+
+
 @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'
@@ -125,6 +135,11 @@
     tokens-mat-outlined-button.$prefix,
     $options...
   );
+  $mat-tonal-button-tokens: token-utils.get-tokens-for(
+    $tokens,
+    tokens-mat-tonal-button.$prefix,
+    $options...
+  );
 
   @include token-utils.create-token-values(tokens-mdc-text-button.$prefix, $mdc-text-button-tokens);
   @include token-utils.create-token-values(
@@ -152,6 +167,10 @@
     tokens-mat-outlined-button.$prefix,
     $mat-outlined-button-tokens
   );
+  @include token-utils.create-token-values(
+    tokens-mat-tonal-button.$prefix,
+    $mat-tonal-button-tokens
+  );
 }
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
@@ -162,39 +181,43 @@
     @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-text-button.$prefix,
         tokens-mdc-text-button.get-unthemable-tokens()
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-filled-button.$prefix,
         tokens-mdc-filled-button.get-unthemable-tokens()
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-protected-button.$prefix,
         tokens-mdc-protected-button.get-unthemable-tokens()
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-outlined-button.$prefix,
         tokens-mdc-outlined-button.get-unthemable-tokens()
       );
 
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-text-button.$prefix,
         tokens-mat-text-button.get-unthemable-tokens()
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-filled-button.$prefix,
         tokens-mat-filled-button.get-unthemable-tokens()
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-protected-button.$prefix,
         tokens-mat-protected-button.get-unthemable-tokens()
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-outlined-button.$prefix,
         tokens-mat-outlined-button.get-unthemable-tokens()
       );
+      @include token-utils.create-token-values-mixed(
+        tokens-mat-tonal-button.$prefix,
+        tokens-mat-tonal-button.get-unthemable-tokens()
+      );
     }
   }
 }
@@ -211,6 +234,7 @@
     @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);
     }
@@ -270,6 +294,20 @@
         @include _outlined-button-variant($theme, warn);
       }
     }
+
+    .mat-tonal-button {
+      &.mat-primary {
+        @include _tonal-button-variant($theme, primary);
+      }
+
+      &.mat-accent {
+        @include _tonal-button-variant($theme, accent);
+      }
+
+      &.mat-warn {
+        @include _tonal-button-variant($theme, warn);
+      }
+    }
   }
 }
 
@@ -280,39 +318,43 @@
     @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-text-button.$prefix,
         tokens-mdc-text-button.get-typography-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-filled-button.$prefix,
         tokens-mdc-filled-button.get-typography-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-protected-button.$prefix,
         tokens-mdc-protected-button.get-typography-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-outlined-button.$prefix,
         tokens-mdc-outlined-button.get-typography-tokens($theme)
       );
 
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-text-button.$prefix,
         tokens-mat-text-button.get-typography-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-filled-button.$prefix,
         tokens-mat-filled-button.get-typography-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-protected-button.$prefix,
         tokens-mat-protected-button.get-typography-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-outlined-button.$prefix,
         tokens-mat-outlined-button.get-typography-tokens($theme)
       );
+      @include token-utils.create-token-values-mixed(
+        tokens-mat-tonal-button.$prefix,
+        tokens-mat-tonal-button.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -324,39 +366,43 @@
     @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-text-button.$prefix,
         tokens-mdc-text-button.get-density-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-filled-button.$prefix,
         tokens-mdc-filled-button.get-density-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-protected-button.$prefix,
         tokens-mdc-protected-button.get-density-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-outlined-button.$prefix,
         tokens-mdc-outlined-button.get-density-tokens($theme)
       );
 
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-text-button.$prefix,
         tokens-mat-text-button.get-density-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-filled-button.$prefix,
         tokens-mat-filled-button.get-density-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-protected-button.$prefix,
         tokens-mat-protected-button.get-density-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-outlined-button.$prefix,
         tokens-mat-outlined-button.get-density-tokens($theme)
       );
+      @include token-utils.create-token-values-mixed(
+        tokens-mat-tonal-button.$prefix,
+        tokens-mat-tonal-button.get-density-tokens($theme)
+      );
     }
   }
 }
@@ -371,6 +417,7 @@
   $mat-protected-button-tokens: tokens-mat-protected-button.get-token-slots();
   $mdc-text-button-tokens: tokens-mdc-text-button.get-token-slots();
   $mat-text-button-tokens: tokens-mat-text-button.get-token-slots();
+  $mat-tonal-button-tokens: tokens-mat-tonal-button.get-token-slots();
 
   @return (
     (
@@ -413,6 +460,11 @@
       tokens: $mat-text-button-tokens,
       prefix: 'text-',
     ),
+    (
+      namespace: tokens-mat-tonal-button.$prefix,
+      tokens: $mat-tonal-button-tokens,
+      prefix: 'tonal-',
+    ),
   );
 }
 

package/button/_fab-theme.scss

@@ -18,15 +18,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-fab.$prefix,
         tokens-mdc-fab.get-unthemable-tokens()
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-fab-small.$prefix,
         tokens-mdc-fab-small.get-unthemable-tokens()
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-extended-fab.$prefix,
         tokens-mdc-extended-fab.get-unthemable-tokens()
       );
@@ -47,8 +47,8 @@
     tokens-mat-fab.get-color-tokens($theme)
   );
 
-  @include token-utils.create-token-values(tokens-mdc-fab.$prefix, $mdc-tokens);
-  @include token-utils.create-token-values(tokens-mat-fab.$prefix, $mat-tokens);
+  @include token-utils.create-token-values-mixed(tokens-mdc-fab.$prefix, $mdc-tokens);
+  @include token-utils.create-token-values-mixed(tokens-mat-fab.$prefix, $mat-tokens);
 }
 
 @mixin _fab-small-variant($theme, $palette) {
@@ -64,8 +64,8 @@
     tokens-mat-fab-small.get-color-tokens($theme)
   );
 
-  @include token-utils.create-token-values(tokens-mdc-fab-small.$prefix, $mdc-tokens);
-  @include token-utils.create-token-values(tokens-mat-fab-small.$prefix, $mat-tokens);
+  @include token-utils.create-token-values-mixed(tokens-mdc-fab-small.$prefix, $mdc-tokens);
+  @include token-utils.create-token-values-mixed(tokens-mat-fab-small.$prefix, $mat-tokens);
 }
 
 /// Outputs color theme styles for the mat-fab.
@@ -80,7 +80,7 @@
     @include sass-utils.current-selector-or-root() {
       @include _fab-variant($theme, null);
       @include _fab-small-variant($theme, null);
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-extended-fab.$prefix,
         tokens-mdc-extended-fab.get-color-tokens($theme)
       );
@@ -123,15 +123,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-extended-fab.$prefix,
         tokens-mdc-extended-fab.get-typography-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-fab.$prefix,
         tokens-mat-fab.get-typography-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-fab-small.$prefix,
         tokens-mat-fab-small.get-typography-tokens($theme)
       );
@@ -146,11 +146,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-mat-fab.$prefix,
         tokens-mat-fab.get-density-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-fab-small.$prefix,
         tokens-mat-fab-small.get-density-tokens($theme)
       );

package/button/_icon-button-theme.scss

@@ -14,7 +14,7 @@
   } @else {
     // Add default values for tokens not related to color, typography, or density.
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-icon-button.$prefix,
         tokens-mdc-icon-button.get-unthemable-tokens()
       );
@@ -35,8 +35,8 @@
     tokens-mat-icon-button.get-color-tokens($theme)
   );
 
-  @include token-utils.create-token-values(tokens-mdc-icon-button.$prefix, $mdc-tokens);
-  @include token-utils.create-token-values(tokens-mat-icon-button.$prefix, $mat-tokens);
+  @include token-utils.create-token-values-mixed(tokens-mdc-icon-button.$prefix, $mdc-tokens);
+  @include token-utils.create-token-values-mixed(tokens-mat-icon-button.$prefix, $mat-tokens);
 }
 
 /// Outputs color theme styles for the mat-icon-button.
@@ -72,7 +72,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-icon-button.$prefix,
         tokens-mat-icon-button.get-typography-tokens($theme)
       );
@@ -97,7 +97,7 @@
     $calculated-size: map.get($size-map, $density-scale);
 
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-icon-button.$prefix,
         tokens-mat-icon-button.get-density-tokens($theme)
       );

package/button/index.d.ts

@@ -1,4 +1,4 @@
-export { M as MAT_BUTTON_CONFIG, e as MAT_FAB_DEFAULT_OPTIONS, f as MAT_FAB_DEFAULT_OPTIONS_FACTORY, c as MatAnchor, b as MatButton, a as MatButtonConfig, m as MatButtonModule, i as MatFabAnchor, g as MatFabButton, d as MatFabDefaultOptions, l as MatIconAnchor, k as MatIconButton, j as MatMiniFabAnchor, h as MatMiniFabButton } from '../module.d-18a67f56.js';
+export { M as MAT_BUTTON_CONFIG, f as MAT_FAB_DEFAULT_OPTIONS, g as MAT_FAB_DEFAULT_OPTIONS_FACTORY, d as MatAnchor, c as MatButton, a as MatButtonAppearance, b as MatButtonConfig, n as MatButtonModule, j as MatFabAnchor, h as MatFabButton, e as MatFabDefaultOptions, m as MatIconAnchor, l as MatIconButton, k as MatMiniFabAnchor, i as MatMiniFabButton } from '../module.d-792a497c.js';
 import '@angular/core';
 import '../common-module.d-0e6515ae.js';
 import '@angular/cdk/bidi';

package/button/testing/index.d.ts

@@ -1,13 +1,17 @@
 import { BaseHarnessFilters, ContentContainerComponentHarness, ComponentHarnessConstructor, HarnessPredicate } from '@angular/cdk/testing';
 
+/** Possible button variants. */
+type ButtonVariant = 'basic' | 'icon' | 'fab' | 'mini-fab';
 /** Possible button appearances. */
-type ButtonVariant = 'basic' | 'raised' | 'flat' | 'icon' | 'stroked' | 'fab' | 'mini-fab';
+type ButtonAppearance = 'text' | 'filled' | 'elevated' | 'outlined' | 'tonal';
 /** A set of criteria that can be used to filter a list of button harness instances. */
 interface ButtonHarnessFilters extends BaseHarnessFilters {
     /** Only find instances whose text matches the given value. */
     text?: string | RegExp;
     /** Only find instances with a variant. */
     variant?: ButtonVariant;
+    /** Only find instances with a specific appearance. */
+    appearance?: ButtonAppearance;
     /** Only find instances which match the given disabled state. */
     disabled?: boolean;
 }
@@ -21,6 +25,7 @@ declare class MatButtonHarness extends ContentContainerComponentHarness {
      *   - `selector` finds a button whose host element matches the given selector.
      *   - `text` finds a button with specific text content.
      *   - `variant` finds buttons matching a specific variant.
+     *   - `appearance` finds buttons matching a specific appearance.
      * @return a `HarnessPredicate` configured with the given options.
      */
     static with<T extends MatButtonHarness>(this: ComponentHarnessConstructor<T>, options?: ButtonHarnessFilters): HarnessPredicate<T>;
@@ -46,6 +51,8 @@ declare class MatButtonHarness extends ContentContainerComponentHarness {
     isFocused(): Promise<boolean>;
     /** Gets the variant of the button. */
     getVariant(): Promise<ButtonVariant>;
+    /** Gets the appearance of the button. */
+    getAppearance(): Promise<ButtonAppearance | null>;
 }
 
-export { type ButtonHarnessFilters, type ButtonVariant, MatButtonHarness };
+export { type ButtonAppearance, type ButtonHarnessFilters, type ButtonVariant, MatButtonHarness };

package/button-toggle/_button-toggle-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-mat-legacy-button-toggle.$prefix,
         tokens-mat-legacy-button-toggle.get-unthemable-tokens()
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-standard-button-toggle.$prefix,
         tokens-mat-standard-button-toggle.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-mat-legacy-button-toggle.$prefix,
         tokens-mat-legacy-button-toggle.get-color-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-standard-button-toggle.$prefix,
         tokens-mat-standard-button-toggle.get-color-tokens($theme)
       );
@@ -56,11 +56,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-mat-legacy-button-toggle.$prefix,
         tokens-mat-legacy-button-toggle.get-typography-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-standard-button-toggle.$prefix,
         tokens-mat-standard-button-toggle.get-typography-tokens($theme)
       );
@@ -75,11 +75,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-mat-legacy-button-toggle.$prefix,
         tokens-mat-legacy-button-toggle.get-density-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-standard-button-toggle.$prefix,
         tokens-mat-standard-button-toggle.get-density-tokens($theme)
       );