@angular/material 16.2.2 → 17.0.0-next.1

package/button/_fab-theme.scss

@@ -1,26 +1,31 @@
-@use 'sass:map';
 @use '@material/fab/fab' as mdc-fab;
 @use '@material/fab/fab-theme' as mdc-fab-theme;
 @use '@material/fab/extended-fab-theme' as mdc-extended-fab-theme;
 
 @use './button-theme-private';
 @use '../core/mdc-helpers/mdc-helpers';
+@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/extended-fab' as tokens-mdc-extended-fab;
 @use '../core/typography/typography';
 
-@mixin _fab-variant($config, $foreground, $background) {
-  $color-config: map.merge(
-    $config,
-    (
-      primary: (
-        default: $background,
-        default-contrast: $foreground,
-      ),
-    )
+@mixin base($theme) {
+  // 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-extended-fab-theme.theme(
+      tokens-mdc-extended-fab.get-unthemable-tokens()
+    );
+  }
+}
+
+@mixin _fab-variant($foreground, $background) {
+  $color-tokens: (
+    container-color: $background,
+    icon-color: $foreground
   );
-  $color-tokens: tokens-mdc-fab.get-color-tokens($color-config);
   @include mdc-fab-theme.theme($color-tokens);
 
   --mat-mdc-fab-color: #{$foreground};
@@ -30,16 +35,13 @@
   @return if(mdc-helpers.variable-safe-contrast-tone($color, $is-dark) == 'dark', #000, #fff);
 }
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-
-  $is-dark: map.get($config, is-dark);
-  $background: map.get($config, background);
+@mixin color($theme) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
 
-  $surface: theming.get-color-from-palette($background, card);
-  $primary: theming.get-color-from-palette(map.get($config, primary));
-  $accent: theming.get-color-from-palette(map.get($config, accent));
-  $warn: theming.get-color-from-palette(map.get($config, warn));
+  $surface: inspection.get-theme-color($theme, background, card);
+  $primary: inspection.get-theme-color($theme, primary);
+  $accent: inspection.get-theme-color($theme, accent);
+  $warn: inspection.get-theme-color($theme, warn);
 
   $on-surface: white-or-black($surface, $is-dark);
   $on-primary: white-or-black($primary, $is-dark);
@@ -47,72 +49,64 @@
   $on-warn: white-or-black($warn, $is-dark);
 
   $disabled: rgba($on-surface, 0.12);
-  $on-disabled: rgba($on-surface, if(map.get($config, is-dark), 0.5, 0.38));
+  $on-disabled: rgba($on-surface, if($is-dark, 0.5, 0.38));
 
   .mat-mdc-fab,
   .mat-mdc-mini-fab {
     // TODO(wagnermaciel): The ripple-theme-styles mixin depends heavily on
     // being wrapped by using-mdc-theme. This workaround needs to be
     // revisited w/ a more holistic solution.
-    @include mdc-helpers.using-mdc-theme($config) {
-      @include button-theme-private.ripple-theme-styles($config, true);
+    @include mdc-helpers.using-mdc-theme($theme) {
+      @include button-theme-private.ripple-theme-styles($theme, true);
     }
 
     @include button-theme-private.apply-disabled-style() {
-      @include _fab-variant($config, $on-disabled, $disabled);
+      @include _fab-variant($on-disabled, $disabled);
     }
 
     &.mat-unthemed {
-      @include _fab-variant($config, $on-surface, $surface);
+      @include _fab-variant($on-surface, $surface);
     }
 
     &.mat-primary {
-      @include _fab-variant($config, $on-primary, $primary);
+      @include _fab-variant($on-primary, $primary);
     }
 
     &.mat-accent {
-      @include _fab-variant($config, $on-accent, $accent);
+      @include _fab-variant($on-accent, $accent);
     }
 
     &.mat-warn {
-      @include _fab-variant($config, $on-warn, $warn);
+      @include _fab-variant($on-warn, $warn);
     }
   }
 }
 
-@mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-    theming.get-typography-config($config-or-theme)
-  );
-
-  @include mdc-helpers.using-mdc-typography($config) {
+@mixin typography($theme) {
+  @include mdc-helpers.using-mdc-typography($theme) {
     @include mdc-fab.without-ripple($query: mdc-helpers.$mdc-typography-styles-query);
   }
 
-  $typography-tokens: tokens-mdc-extended-fab.get-typography-tokens($config);
+  $typography-tokens: tokens-mdc-extended-fab.get-typography-tokens($theme);
   .mat-mdc-extended-fab {
     @include mdc-extended-fab-theme.theme($typography-tokens);
   }
 }
 
-@mixin density($config-or-theme) {
+@mixin density($theme) {
 }
 
-@mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
+@mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-fab') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
-
-    @if $color != null {
-      @include color($color);
+    @include base($theme);
+    @if inspection.theme-has($theme, color) {
+      @include color($theme);
     }
-    @if $density != null {
-      @include density($density);
+    @if inspection.theme-has($theme, density) {
+      @include density($theme);
     }
-    @if $typography != null {
-      @include typography($typography);
+    @if inspection.theme-has($theme, typography) {
+      @include typography($theme);
     }
   }
 }

package/button/_icon-button-theme.scss

@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use 'sass:math';
 @use '@material/density/functions' as mdc-density-functions;
 @use '@material/icon-button/icon-button-theme' as mdc-icon-button-theme;
@@ -7,6 +6,7 @@
 
 @use './button-theme-private';
 @use '../core/theming/theming';
+@use '../core/theming/inspection';
 
 $_icon-size: 24px;
 
@@ -23,33 +23,31 @@ $_icon-size: 24px;
   @return if($is-dark, 'light', 'dark');
 }
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-  $color-tokens: tokens-mdc-icon-button.get-color-tokens($config);
-  $background-palette: map.get($config, background);
-  $surface: theming.get-color-from-palette($background-palette, card);
-  $is-dark: map.get($config, is-dark);
+@mixin color($theme) {
+  $color-tokens: tokens-mdc-icon-button.get-color-tokens($theme);
+  $surface: inspection.get-theme-color($theme, background, card);
+  $is-dark: inspection.get-theme-type($theme) == dark;
   $on-surface: if(_variable-safe-contrast-tone($surface, $is-dark) == 'dark', #000, #fff);
 
   .mat-mdc-icon-button {
-    @include button-theme-private.ripple-theme-styles($config, false);
+    @include button-theme-private.ripple-theme-styles($theme, false);
     @include mdc-icon-button-theme.theme($color-tokens);
     @include _ripple-color($on-surface);
 
     &.mat-primary {
-      $color: theming.get-color-from-palette(map.get($config, primary));
+      $color: inspection.get-theme-color($theme, primary);
       @include mdc-icon-button-theme.theme((icon-color: $color));
       @include _ripple-color($color);
     }
 
     &.mat-accent {
-      $color: theming.get-color-from-palette(map.get($config, accent));
+      $color: inspection.get-theme-color($theme, accent);
       @include mdc-icon-button-theme.theme((icon-color: $color));
       @include _ripple-color($color);
     }
 
     &.mat-warn {
-      $color: theming.get-color-from-palette(map.get($config, warn));
+      $color: inspection.get-theme-color($theme, warn);
       @include mdc-icon-button-theme.theme((icon-color: $color));
       @include _ripple-color($color);
     }
@@ -64,11 +62,11 @@ $_icon-size: 24px;
   }
 }
 
-@mixin typography($config-or-theme) {
+@mixin typography($theme) {
 }
 
-@mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+@mixin density($theme) {
+  $density-scale: inspection.get-theme-density($theme);
   // Manually apply the expected density theming, and include the padding
   // as it was applied before
   $calculated-size: mdc-density-functions.prop-value(
@@ -104,21 +102,16 @@ $_icon-size: 24px;
   }
 }
 
-@mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
+@mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-icon-button') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
-
-    @if $color != null {
-      @include color($color);
+    @if inspection.theme-has($theme, color) {
+      @include color($theme);
     }
-    @if $density != null {
-      @include density($density);
+    @if inspection.theme-has($theme, density) {
+      @include density($theme);
     }
-    @if $typography != null {
-      @include typography($typography);
+    @if inspection.theme-has($theme, typography) {
+      @include typography($theme);
     }
   }
 }

package/button/index.d.ts

@@ -1,10 +1,4 @@
-import { _AbstractConstructor } from '@angular/material/core';
 import { AfterViewInit } from '@angular/core';
-import { BooleanInput } from '@angular/cdk/coercion';
-import { CanColor } from '@angular/material/core';
-import { CanDisable } from '@angular/material/core';
-import { CanDisableRipple } from '@angular/material/core';
-import { _Constructor } from '@angular/material/core';
 import { ElementRef } from '@angular/core';
 import { FocusOrigin } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
@@ -63,7 +57,7 @@ export declare function MAT_FAB_DEFAULT_OPTIONS_FACTORY(): MatFabDefaultOptions;
 export declare class MatAnchor extends MatAnchorBase {
     constructor(elementRef: ElementRef, platform: Platform, ngZone: NgZone, animationMode?: string);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatAnchor, [null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatAnchor, "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", ["matButton", "matAnchor"], { "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "color": { "alias": "color"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatAnchor, "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", ["matButton", "matAnchor"], {}, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"], false, never>;
 }
 
 /**
@@ -76,7 +70,8 @@ declare class MatAnchorBase extends MatButtonBase implements OnInit, OnDestroy {
     ngOnDestroy(): void;
     _haltDisabledEvents: (event: Event) => void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatAnchorBase, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatAnchorBase, never, never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatAnchorBase, never, never, { "tabIndex": { "alias": "tabIndex"; "required": false; }; }, {}, never, never, false, never>;
+    static ngAcceptInputType_tabIndex: unknown;
 }
 
 /**
@@ -91,11 +86,12 @@ declare class MatAnchorBase extends MatButtonBase implements OnInit, OnDestroy {
 export declare class MatButton extends MatButtonBase {
     constructor(elementRef: ElementRef, platform: Platform, ngZone: NgZone, animationMode?: string);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatButton, [null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatButton, "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", ["matButton"], { "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatButton, "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", ["matButton"], {}, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"], false, never>;
 }
 
 /** Base class for all buttons.  */
-declare class MatButtonBase extends _MatButtonMixin implements CanDisable, CanColor, CanDisableRipple, AfterViewInit, OnDestroy {
+declare class MatButtonBase implements AfterViewInit, OnDestroy {
+    _elementRef: ElementRef;
     _platform: Platform;
     _ngZone: NgZone;
     _animationMode?: string | undefined;
@@ -114,6 +110,8 @@ declare class MatButtonBase extends _MatButtonMixin implements CanDisable, CanCo
      */
     get ripple(): MatRipple;
     set ripple(v: MatRipple);
+    /** Theme color palette of the button */
+    color?: string | null;
     /** Whether the ripple effect is disabled or not. */
     get disableRipple(): boolean;
     set disableRipple(value: any);
@@ -121,7 +119,7 @@ declare class MatButtonBase extends _MatButtonMixin implements CanDisable, CanCo
     get disabled(): boolean;
     set disabled(value: any);
     private _disabled;
-    constructor(elementRef: ElementRef, _platform: Platform, _ngZone: NgZone, _animationMode?: string | undefined);
+    constructor(_elementRef: ElementRef, _platform: Platform, _ngZone: NgZone, _animationMode?: string | undefined);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     /** Focuses the button. */
@@ -130,16 +128,11 @@ declare class MatButtonBase extends _MatButtonMixin implements CanDisable, CanCo
     private _hasHostAttributes;
     private _updateRippleDisabled;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatButtonBase, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatButtonBase, never, never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatButtonBase, never, never, { "color": { "alias": "color"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, false, never>;
+    static ngAcceptInputType_disableRipple: unknown;
+    static ngAcceptInputType_disabled: unknown;
 }
 
-/** @docs-private */
-declare const _MatButtonMixin: _Constructor<CanColor> & _AbstractConstructor<CanColor> & _Constructor<CanDisable> & _AbstractConstructor<CanDisable> & _Constructor<CanDisableRipple> & _AbstractConstructor<CanDisableRipple> & {
-    new (_elementRef: ElementRef): {
-        _elementRef: ElementRef;
-    };
-};
-
 export declare class MatButtonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatButtonModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<MatButtonModule, [typeof i1.MatAnchor, typeof i1.MatButton, typeof i2.MatIconAnchor, typeof i3.MatMiniFabAnchor, typeof i3.MatMiniFabButton, typeof i2.MatIconButton, typeof i3.MatFabAnchor, typeof i3.MatFabButton], [typeof i4.MatCommonModule, typeof i4.MatRippleModule], [typeof i1.MatAnchor, typeof i1.MatButton, typeof i2.MatIconAnchor, typeof i2.MatIconButton, typeof i3.MatMiniFabAnchor, typeof i3.MatMiniFabButton, typeof i3.MatFabAnchor, typeof i3.MatFabButton, typeof i4.MatCommonModule]>;
@@ -156,12 +149,11 @@ export declare class MatButtonModule {
 export declare class MatFabAnchor extends MatAnchor {
     private _options?;
     _isFab: boolean;
-    get extended(): boolean;
-    set extended(value: BooleanInput);
-    private _extended;
+    extended: boolean;
     constructor(elementRef: ElementRef, platform: Platform, ngZone: NgZone, animationMode?: string, _options?: MatFabDefaultOptions | undefined);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatFabAnchor, [null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatFabAnchor, "a[mat-fab]", ["matButton", "matAnchor"], { "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "color": { "alias": "color"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "extended": { "alias": "extended"; "required": false; }; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatFabAnchor, "a[mat-fab]", ["matButton", "matAnchor"], { "extended": { "alias": "extended"; "required": false; }; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"], false, never>;
+    static ngAcceptInputType_extended: unknown;
 }
 
 /**
@@ -174,12 +166,11 @@ export declare class MatFabAnchor extends MatAnchor {
 export declare class MatFabButton extends MatButtonBase {
     private _options?;
     _isFab: boolean;
-    get extended(): boolean;
-    set extended(value: BooleanInput);
-    private _extended;
+    extended: boolean;
     constructor(elementRef: ElementRef, platform: Platform, ngZone: NgZone, animationMode?: string, _options?: MatFabDefaultOptions | undefined);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatFabButton, [null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatFabButton, "button[mat-fab]", ["matButton"], { "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "color": { "alias": "color"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "extended": { "alias": "extended"; "required": false; }; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatFabButton, "button[mat-fab]", ["matButton"], { "extended": { "alias": "extended"; "required": false; }; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"], false, never>;
+    static ngAcceptInputType_extended: unknown;
 }
 
 /** Default FAB options that can be overridden. */
@@ -195,7 +186,7 @@ export declare interface MatFabDefaultOptions {
 export declare class MatIconAnchor extends MatAnchorBase {
     constructor(elementRef: ElementRef, platform: Platform, ngZone: NgZone, animationMode?: string);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatIconAnchor, [null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatIconAnchor, "a[mat-icon-button]", ["matButton", "matAnchor"], { "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "color": { "alias": "color"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatIconAnchor, "a[mat-icon-button]", ["matButton", "matAnchor"], {}, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"], false, never>;
 }
 
 /**
@@ -206,7 +197,7 @@ export declare class MatIconAnchor extends MatAnchorBase {
 export declare class MatIconButton extends MatButtonBase {
     constructor(elementRef: ElementRef, platform: Platform, ngZone: NgZone, animationMode?: string);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatIconButton, [null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatIconButton, "button[mat-icon-button]", ["matButton"], { "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatIconButton, "button[mat-icon-button]", ["matButton"], {}, {}, never, ["*"], false, never>;
 }
 
 /**
@@ -219,7 +210,7 @@ export declare class MatMiniFabAnchor extends MatAnchor {
     _isFab: boolean;
     constructor(elementRef: ElementRef, platform: Platform, ngZone: NgZone, animationMode?: string, _options?: MatFabDefaultOptions | undefined);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatMiniFabAnchor, [null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatMiniFabAnchor, "a[mat-mini-fab]", ["matButton", "matAnchor"], { "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "color": { "alias": "color"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatMiniFabAnchor, "a[mat-mini-fab]", ["matButton", "matAnchor"], {}, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"], false, never>;
 }
 
 /**
@@ -232,7 +223,7 @@ export declare class MatMiniFabButton extends MatButtonBase {
     _isFab: boolean;
     constructor(elementRef: ElementRef, platform: Platform, ngZone: NgZone, animationMode?: string, _options?: MatFabDefaultOptions | undefined);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatMiniFabButton, [null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatMiniFabButton, "button[mat-mini-fab]", ["matButton"], { "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatMiniFabButton, "button[mat-mini-fab]", ["matButton"], {}, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"], false, never>;
 }
 
 export { }

package/card/_card-theme.scss

@@ -1,5 +1,7 @@
 @use 'sass:map';
+@use '../core/style/sass-utils';
 @use '../core/theming/theming';
+@use '../core/theming/inspection';
 @use '../core/typography/typography';
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mat/card' as tokens-mat-card;
@@ -8,77 +10,106 @@
 @use '@material/card/elevated-card-theme' as mdc-elevated-card-theme;
 @use '@material/card/outlined-card-theme' as mdc-outlined-card-theme;
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-  $mdc-elevated-card-color-tokens: token-utils.resolve-elevation(
-      tokens-mdc-elevated-card.get-color-tokens($config),
-      container-elevation,
-      container-shadow-color
-  );
-  $mdc-outlined-card-color-tokens: token-utils.resolve-elevation(
-      tokens-mdc-outlined-card.get-color-tokens($config),
-      container-elevation,
-      container-shadow-color,
-  );
-  $mat-card-color-tokens: tokens-mat-card.get-color-tokens($config);
+@mixin base($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include mdc-elevated-card-theme.theme(tokens-mdc-elevated-card.get-unthemable-tokens());
+      @include mdc-outlined-card-theme.theme(tokens-mdc-outlined-card.get-unthemable-tokens());
+      @include token-utils.create-token-values(
+          tokens-mat-card.$prefix, tokens-mat-card.get-unthemable-tokens());
+    }
+  }
+}
 
-  // Add values for card tokens.
-  .mat-mdc-card {
-    @include mdc-elevated-card-theme.theme($mdc-elevated-card-color-tokens);
-    @include mdc-outlined-card-theme.theme($mdc-outlined-card-color-tokens);
-    @include token-utils.create-token-values(tokens-mat-card.$prefix, $mat-card-color-tokens);
+@mixin color($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+  }
+  @else {
+    $mdc-elevated-card-color-tokens: token-utils.resolve-elevation(
+        tokens-mdc-elevated-card.get-color-tokens($theme),
+        container-elevation,
+        container-shadow-color
+    );
+    $mdc-outlined-card-color-tokens: token-utils.resolve-elevation(
+        tokens-mdc-outlined-card.get-color-tokens($theme),
+        container-elevation,
+        container-shadow-color,
+    );
+    $mat-card-color-tokens: tokens-mat-card.get-color-tokens($theme);
+
+    // Add values for card tokens.
+    @include sass-utils.current-selector-or-root() {
+      @include mdc-elevated-card-theme.theme($mdc-elevated-card-color-tokens);
+      @include mdc-outlined-card-theme.theme($mdc-outlined-card-color-tokens);
+      @include token-utils.create-token-values(tokens-mat-card.$prefix, $mat-card-color-tokens);
+    }
   }
 }
 
-@mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
-  $mdc-elevated-card-typography-tokens: tokens-mdc-elevated-card.get-typography-tokens($config);
-  $mdc-outlined-card-typography-tokens: tokens-mdc-outlined-card.get-typography-tokens($config);
-  $mat-card-typography-tokens: tokens-mat-card.get-typography-tokens($config);
+@mixin typography($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+  }
+  @else {
+    $mdc-elevated-card-typography-tokens: tokens-mdc-elevated-card.get-typography-tokens($theme);
+    $mdc-outlined-card-typography-tokens: tokens-mdc-outlined-card.get-typography-tokens($theme);
+    $mat-card-typography-tokens: tokens-mat-card.get-typography-tokens($theme);
 
-  // Add values for card tokens.
-  .mat-mdc-card {
-    @include mdc-elevated-card-theme.theme($mdc-elevated-card-typography-tokens);
-    @include mdc-outlined-card-theme.theme($mdc-outlined-card-typography-tokens);
-    @include token-utils.create-token-values(tokens-mat-card.$prefix, $mat-card-typography-tokens);
+    // Add values for card tokens.
+    @include sass-utils.current-selector-or-root() {
+      @include mdc-elevated-card-theme.theme($mdc-elevated-card-typography-tokens);
+      @include mdc-outlined-card-theme.theme($mdc-outlined-card-typography-tokens);
+      @include token-utils.create-token-values(
+          tokens-mat-card.$prefix, $mat-card-typography-tokens);
+    }
   }
 }
 
-@mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
-  $mdc-elevated-card-density-tokens: tokens-mdc-elevated-card.get-density-tokens($density-scale);
-  $mdc-outlined-card-density-tokens: tokens-mdc-outlined-card.get-density-tokens($density-scale);
-  $mat-card-density-tokens: tokens-mat-card.get-density-tokens($density-scale);
+@mixin density($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+  }
+  @else {
+    $mdc-elevated-card-density-tokens: tokens-mdc-elevated-card.get-density-tokens($theme);
+    $mdc-outlined-card-density-tokens: tokens-mdc-outlined-card.get-density-tokens($theme);
+    $mat-card-density-tokens: tokens-mat-card.get-density-tokens($theme);
 
-  // Add values for card tokens.
-  .mat-mdc-card {
-    @include mdc-elevated-card-theme.theme($mdc-elevated-card-density-tokens);
-    @include mdc-outlined-card-theme.theme($mdc-outlined-card-density-tokens);
-    @include token-utils.create-token-values(tokens-mat-card.$prefix, $mat-card-density-tokens);
+    // Add values for card tokens.
+    @include sass-utils.current-selector-or-root() {
+      @include mdc-elevated-card-theme.theme($mdc-elevated-card-density-tokens);
+      @include mdc-outlined-card-theme.theme($mdc-outlined-card-density-tokens);
+      @include token-utils.create-token-values(tokens-mat-card.$prefix, $mat-card-density-tokens);
+    }
   }
 }
 
 @mixin theme($theme-or-color-config) {
   $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-card') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
 
-    @if $color != null {
-      @include color($color);
-    }
-    @if $density != null {
-      @include density($density);
+  @include theming.private-check-duplicate-theme-styles($theme, 'mat-card') {
+    @if inspection.get-theme-version($theme) == 1 {
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
     }
-    @if $typography != null {
-      @include typography($typography);
+    @else {
+      @include base($theme);
+      @if inspection.theme-has($theme, color) {
+        @include color($theme);
+      }
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
+      @if inspection.theme-has($theme, typography) {
+        @include typography($theme);
+      }
     }
   }
 }
 
-@mixin theme-from-tokens($tokens) {
+@mixin _theme-from-tokens($tokens) {
   @if ($tokens != ()) {
     $elevated-card-tokens: map.get($tokens, tokens-mdc-elevated-card.$prefix);
     // Work around a bug in MDC where the elevation is not resolved to an actual shadow value.