@angular/material 17.0.0-next.0 → 17.0.0-next.2

package/_index.scss

@@ -2,7 +2,7 @@
 @forward './core/theming/theming' show define-light-theme, define-dark-theme,
   define-palette, get-contrast-color-from-palette, get-color-from-palette,
   get-color-config, get-typography-config, get-density-config,
-  $theme-ignore-duplication-warnings;
+  $theme-ignore-duplication-warnings, $theme-legacy-inspection-api-compatibility;
 @forward './core/theming/theming' as private-* show private-clamp-density;
 @forward './core/theming/palette' show $red-palette, $pink-palette, $indigo-palette,
   $purple-palette, $deep-purple-palette, $blue-palette, $light-blue-palette, $cyan-palette,
@@ -11,8 +11,7 @@
   $gray-palette, $blue-grey-palette, $blue-gray-palette, $light-theme-background-palette,
   $dark-theme-background-palette, $light-theme-foreground-palette, $dark-theme-foreground-palette;
 @forward './core/typography/typography' show define-typography-level, define-rem-typography-config,
-  define-typography-config, typography-hierarchy, define-legacy-typography-config,
-  legacy-typography-hierarchy;
+  define-typography-config, typography-hierarchy, define-legacy-typography-config;
 @forward './core/typography/typography-utils' show typography-level,
   font-size, line-height, font-weight, letter-spacing, font-family, font-shorthand;
 @forward './core/tokens/m2' show m2-tokens-from-theme;
@@ -88,7 +87,7 @@
 @forward './datepicker/datepicker-theme' as datepicker-* show datepicker-theme, datepicker-color,
   datepicker-typography, datepicker-date-range-colors, datepicker-density;
 @forward './dialog/dialog-theme' as dialog-* show dialog-theme, dialog-color, dialog-typography,
-  dialog-density;
+  dialog-density, dialog-base;
 @forward './dialog/dialog-legacy-padding' as dialog-* show dialog-legacy-padding;
 @forward './divider/divider-theme' as divider-* show divider-theme, divider-color,
   divider-typography, divider-density;

package/autocomplete/_autocomplete-theme.scss

@@ -1,37 +1,31 @@
 @use '../core/theming/theming';
+@use '../core/theming/inspection';
 @use '../core/typography/typography';
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mat/autocomplete' as tokens-mat-autocomplete;
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-
+@mixin color($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-autocomplete.$prefix,
-      tokens-mat-autocomplete.get-color-tokens($config));
+      tokens-mat-autocomplete.get-color-tokens($theme));
   }
 }
 
-@mixin typography($config-or-theme) {}
+@mixin typography($theme) {}
 
-@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-autocomplete') {
-    $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/autocomplete/index.d.ts

@@ -1,12 +1,8 @@
-import { _AbstractConstructor } from '@angular/material/core';
 import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import { AfterContentInit } from '@angular/core';
 import { AfterViewInit } from '@angular/core';
 import { AnimationEvent as AnimationEvent_2 } from '@angular/animations';
-import { BooleanInput } from '@angular/cdk/coercion';
-import { CanDisableRipple } from '@angular/material/core';
 import { ChangeDetectorRef } from '@angular/core';
-import { _Constructor } from '@angular/material/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { Directionality } from '@angular/cdk/bidi';
 import { ElementRef } from '@angular/core';
@@ -95,7 +91,7 @@ export declare const MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER: {
 export declare const MAT_AUTOCOMPLETE_VALUE_ACCESSOR: any;
 
 /** Autocomplete component. */
-export declare class MatAutocomplete extends _MatAutocompleteMixinBase implements AfterContentInit, CanDisableRipple, OnDestroy {
+export declare class MatAutocomplete implements AfterContentInit, OnDestroy {
     private _changeDetectorRef;
     private _elementRef;
     protected _defaults: MatAutocompleteDefaultOptions;
@@ -135,27 +131,23 @@ export declare class MatAutocomplete extends _MatAutocompleteMixinBase implement
      * Whether the first option should be highlighted when the autocomplete panel is opened.
      * Can be configured globally through the `MAT_AUTOCOMPLETE_DEFAULT_OPTIONS` token.
      */
-    get autoActiveFirstOption(): boolean;
-    set autoActiveFirstOption(value: BooleanInput);
-    private _autoActiveFirstOption;
+    autoActiveFirstOption: boolean;
     /** Whether the active option should be selected as the user is navigating. */
-    get autoSelectActiveOption(): boolean;
-    set autoSelectActiveOption(value: BooleanInput);
-    private _autoSelectActiveOption;
+    autoSelectActiveOption: boolean;
     /**
      * Whether the user is required to make a selection when they're interacting with the
      * autocomplete. If the user moves away from the autocomplete without selecting an option from
      * the list, the value will be reset. If the user opens the panel and closes it without
      * interacting or selecting a value, the initial value will be kept.
      */
-    get requireSelection(): boolean;
-    set requireSelection(value: BooleanInput);
-    private _requireSelection;
+    requireSelection: boolean;
     /**
      * Specify the width of the autocomplete panel.  Can be any CSS sizing value, otherwise it will
      * match the width of its host.
      */
     panelWidth: string | number;
+    /** Whether ripples are disabled within the autocomplete panel. */
+    disableRipple: boolean;
     /** Event that is emitted whenever an option from the list is selected. */
     readonly optionSelected: EventEmitter<MatAutocompleteSelectedEvent>;
     /** Event that is emitted when the autocomplete panel is opened. */
@@ -174,7 +166,7 @@ export declare class MatAutocomplete extends _MatAutocompleteMixinBase implement
     };
     /** Whether checkmark indicator for single-selection options is hidden. */
     get hideSingleSelectionIndicator(): boolean;
-    set hideSingleSelectionIndicator(value: BooleanInput);
+    set hideSingleSelectionIndicator(value: boolean);
     private _hideSingleSelectionIndicator;
     /** Syncs the parent state with the individual options. */
     _syncParentProperties(): void;
@@ -207,7 +199,12 @@ export declare class MatAutocomplete extends _MatAutocompleteMixinBase implement
     private _setThemeClasses;
     protected _skipPredicate(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatAutocomplete, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatAutocomplete, "mat-autocomplete", ["matAutocomplete"], { "disableRipple": { "alias": "disableRipple"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "displayWith": { "alias": "displayWith"; "required": false; }; "autoActiveFirstOption": { "alias": "autoActiveFirstOption"; "required": false; }; "autoSelectActiveOption": { "alias": "autoSelectActiveOption"; "required": false; }; "requireSelection": { "alias": "requireSelection"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "classList": { "alias": "class"; "required": false; }; "hideSingleSelectionIndicator": { "alias": "hideSingleSelectionIndicator"; "required": false; }; }, { "optionSelected": "optionSelected"; "opened": "opened"; "closed": "closed"; "optionActivated": "optionActivated"; }, ["options", "optionGroups"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatAutocomplete, "mat-autocomplete", ["matAutocomplete"], { "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "displayWith": { "alias": "displayWith"; "required": false; }; "autoActiveFirstOption": { "alias": "autoActiveFirstOption"; "required": false; }; "autoSelectActiveOption": { "alias": "autoSelectActiveOption"; "required": false; }; "requireSelection": { "alias": "requireSelection"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "classList": { "alias": "class"; "required": false; }; "hideSingleSelectionIndicator": { "alias": "hideSingleSelectionIndicator"; "required": false; }; }, { "optionSelected": "optionSelected"; "opened": "opened"; "closed": "closed"; "optionActivated": "optionActivated"; }, ["options", "optionGroups"], ["*"], false, never>;
+    static ngAcceptInputType_autoActiveFirstOption: unknown;
+    static ngAcceptInputType_autoSelectActiveOption: unknown;
+    static ngAcceptInputType_requireSelection: unknown;
+    static ngAcceptInputType_disableRipple: unknown;
+    static ngAcceptInputType_hideSingleSelectionIndicator: unknown;
 }
 
 /** Event object that is emitted when an autocomplete option is activated. */
@@ -235,11 +232,6 @@ export declare interface MatAutocompleteDefaultOptions {
     hideSingleSelectionIndicator?: boolean;
 }
 
-/** @docs-private */
-declare const _MatAutocompleteMixinBase: _Constructor<CanDisableRipple> & _AbstractConstructor<CanDisableRipple> & {
-    new (): {};
-};
-
 export declare class MatAutocompleteModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatAutocompleteModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<MatAutocompleteModule, [typeof i1.MatAutocomplete, typeof i2.MatAutocompleteTrigger, typeof i3.MatAutocompleteOrigin], [typeof i4.OverlayModule, typeof i5.MatOptionModule, typeof i5.MatCommonModule, typeof i6.CommonModule], [typeof i7.CdkScrollableModule, typeof i1.MatAutocomplete, typeof i5.MatOptionModule, typeof i5.MatCommonModule, typeof i2.MatAutocompleteTrigger, typeof i3.MatAutocompleteOrigin]>;
@@ -288,7 +280,6 @@ export declare class MatAutocompleteTrigger implements ControlValueAccessor, Aft
     private _overlayRef;
     private _portal;
     private _componentDestroyed;
-    private _autocompleteDisabled;
     private _scrollStrategy;
     private _keydownSubscription;
     private _outsideClickSubscription;
@@ -352,8 +343,7 @@ export declare class MatAutocompleteTrigger implements ControlValueAccessor, Aft
      * Whether the autocomplete is disabled. When disabled, the element will
      * act as a regular input and the user won't be able to open the panel.
      */
-    get autocompleteDisabled(): boolean;
-    set autocompleteDisabled(value: BooleanInput);
+    autocompleteDisabled: boolean;
     constructor(_element: ElementRef<HTMLInputElement>, _overlay: Overlay, _viewContainerRef: ViewContainerRef, _zone: NgZone, _changeDetectorRef: ChangeDetectorRef, scrollStrategy: any, _dir: Directionality | null, _formField: MatFormField | null, _document: any, _viewportRuler: ViewportRuler, _defaults?: MatAutocompleteDefaultOptions | null | undefined);
     /** Class to apply to the panel when it's above the input. */
     private _aboveClass;
@@ -481,6 +471,7 @@ export declare class MatAutocompleteTrigger implements ControlValueAccessor, Aft
     private _clearFromModal;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatAutocompleteTrigger, [null, null, null, null, null, null, { optional: true; }, { optional: true; host: true; }, { optional: true; }, null, { optional: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatAutocompleteTrigger, "input[matAutocomplete], textarea[matAutocomplete]", ["matAutocompleteTrigger"], { "autocomplete": { "alias": "matAutocomplete"; "required": false; }; "position": { "alias": "matAutocompletePosition"; "required": false; }; "connectedTo": { "alias": "matAutocompleteConnectedTo"; "required": false; }; "autocompleteAttribute": { "alias": "autocomplete"; "required": false; }; "autocompleteDisabled": { "alias": "matAutocompleteDisabled"; "required": false; }; }, {}, never, never, false, never>;
+    static ngAcceptInputType_autocompleteDisabled: unknown;
 }
 
 export { }

package/badge/_badge-theme.scss

@@ -1,9 +1,9 @@
 @use 'sass:color';
-@use 'sass:map';
 @use 'sass:math';
 @use '@angular/cdk';
 
 @use '../core/theming/theming';
+@use '../core/theming/inspection';
 @use '../core/typography/typography';
 @use '../core/tokens/m2/mat/badge' as tokens-mat-badge;
 @use '../core/tokens/token-utils';
@@ -164,46 +164,34 @@ $_emit-fallback-vars: true;
   }
 }
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-  $accent: map.get($config, accent);
-  $warn: map.get($config, warn);
-
+@mixin color($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-badge.$prefix,
-      tokens-mat-badge.get-color-tokens($config));
+      tokens-mat-badge.get-color-tokens($theme));
   }
 
   .mat-badge-accent {
     @include token-utils.create-token-values(tokens-mat-badge.$prefix,
-      tokens-mat-badge.private-get-color-palette-color-tokens($accent));
+      tokens-mat-badge.private-get-color-palette-color-tokens($theme, accent));
   }
 
   .mat-badge-warn {
     @include token-utils.create-token-values(tokens-mat-badge.$prefix,
-      tokens-mat-badge.private-get-color-palette-color-tokens($warn));
+      tokens-mat-badge.private-get-color-palette-color-tokens($theme, warn));
   }
 }
 
-@mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2014-config(
-      theming.get-typography-config($config-or-theme));
-
+@mixin typography($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-badge.$prefix,
-      tokens-mat-badge.get-typography-tokens($config));
+      tokens-mat-badge.get-typography-tokens($theme));
   }
 }
 
-@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-badge') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
-
     // Try to reduce the number of times that the structural styles are emitted.
     @if not $_badge-structure-emitted {
       @include _badge-structure;
@@ -216,14 +204,14 @@ $_emit-fallback-vars: true;
       }
     }
 
-    @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/badge/index.d.ts

@@ -1,8 +1,4 @@
-import { _AbstractConstructor } from '@angular/material/core';
 import { AriaDescriber } from '@angular/cdk/a11y';
-import { BooleanInput } from '@angular/cdk/coercion';
-import { CanDisable } from '@angular/material/core';
-import { _Constructor } from '@angular/material/core';
 import { ElementRef } from '@angular/core';
 import * as i0 from '@angular/core';
 import * as i2 from '@angular/cdk/a11y';
@@ -22,7 +18,7 @@ declare namespace i1 {
 }
 
 /** Directive to display a text badge. */
-export declare class MatBadge extends _MatBadgeBase implements OnInit, OnDestroy, CanDisable {
+export declare class MatBadge implements OnInit, OnDestroy {
     private _ngZone;
     private _elementRef;
     private _ariaDescriber;
@@ -33,9 +29,9 @@ export declare class MatBadge extends _MatBadgeBase implements OnInit, OnDestroy
     set color(value: ThemePalette);
     private _color;
     /** Whether the badge should overlap its contents or not */
-    get overlap(): boolean;
-    set overlap(val: BooleanInput);
-    private _overlap;
+    overlap: boolean;
+    /** Whether the badge is disabled. */
+    disabled: boolean;
     /**
      * Position the badge should reside.
      * Accepts any combination of 'above'|'below' and 'before'|'after'
@@ -52,9 +48,7 @@ export declare class MatBadge extends _MatBadgeBase implements OnInit, OnDestroy
     /** Size of the badge. Can be 'small', 'medium', or 'large'. */
     size: MatBadgeSize;
     /** Whether the badge is hidden. */
-    get hidden(): boolean;
-    set hidden(val: BooleanInput);
-    private _hidden;
+    hidden: boolean;
     /** Unique id for the badge */
     _id: number;
     /** Visible badge element. */
@@ -93,14 +87,12 @@ export declare class MatBadge extends _MatBadgeBase implements OnInit, OnDestroy
     /** Clears any existing badges that might be left over from server-side rendering. */
     private _clearExistingBadges;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatBadge, [null, null, null, null, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatBadge, "[matBadge]", never, { "disabled": { "alias": "matBadgeDisabled"; "required": false; }; "color": { "alias": "matBadgeColor"; "required": false; }; "overlap": { "alias": "matBadgeOverlap"; "required": false; }; "position": { "alias": "matBadgePosition"; "required": false; }; "content": { "alias": "matBadge"; "required": false; }; "description": { "alias": "matBadgeDescription"; "required": false; }; "size": { "alias": "matBadgeSize"; "required": false; }; "hidden": { "alias": "matBadgeHidden"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatBadge, "[matBadge]", never, { "color": { "alias": "matBadgeColor"; "required": false; }; "overlap": { "alias": "matBadgeOverlap"; "required": false; }; "disabled": { "alias": "matBadgeDisabled"; "required": false; }; "position": { "alias": "matBadgePosition"; "required": false; }; "content": { "alias": "matBadge"; "required": false; }; "description": { "alias": "matBadgeDescription"; "required": false; }; "size": { "alias": "matBadgeSize"; "required": false; }; "hidden": { "alias": "matBadgeHidden"; "required": false; }; }, {}, never, never, false, never>;
+    static ngAcceptInputType_overlap: unknown;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_hidden: unknown;
 }
 
-/** @docs-private */
-declare const _MatBadgeBase: _Constructor<CanDisable> & _AbstractConstructor<CanDisable> & {
-    new (): {};
-};
-
 export declare class MatBadgeModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatBadgeModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<MatBadgeModule, [typeof i1.MatBadge], [typeof i2.A11yModule, typeof i3.MatCommonModule], [typeof i1.MatBadge, typeof i3.MatCommonModule]>;

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

@@ -1,45 +1,36 @@
 @use '../core/typography/typography';
 @use '../core/theming/theming';
+@use '../core/theming/inspection';
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mat/bottom-sheet' as tokens-mat-bottom-sheet;
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-
+@mixin color($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-bottom-sheet.$prefix,
-      tokens-mat-bottom-sheet.get-color-tokens($config));
+      tokens-mat-bottom-sheet.get-color-tokens($theme));
   }
 }
 
-@mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2014-config(
-      theming.get-typography-config($config-or-theme));
-
+@mixin typography($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-bottom-sheet.$prefix,
-      tokens-mat-bottom-sheet.get-typography-tokens($config));
+      tokens-mat-bottom-sheet.get-typography-tokens($theme));
   }
 }
 
-@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-bottom-sheet') {
-    $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/_button-base.scss

@@ -90,9 +90,9 @@
   }
 }
 
-// Changes a button theme to exclude the ripple styles.
-@function mat-private-button-remove-ripple($theme) {
-  @return map.merge($theme, (
+// Changes a button token set to exclude the ripple styles.
+@function mat-private-button-remove-ripple($tokens) {
+  @return map.merge($tokens, (
     focus-state-layer-color: null,
     focus-state-layer-opacity: null,
     hover-state-layer-color: null,

package/button/_button-theme-private.scss

@@ -3,14 +3,15 @@
 @use '@material/theme/theme-color' as mdc-theme-color;
 
 @use '../core/mdc-helpers/mdc-helpers';
+@use '../core/theming/inspection';
 
 @mixin _ripple-color($color) {
   --mat-mdc-button-persistent-ripple-color: #{$color};
   --mat-mdc-button-ripple-color: #{rgba($color, 0.1)};
 }
 
-@mixin ripple-theme-styles($config, $is-filled) {
-  $opacities: if(map.get($config, is-dark),
+@mixin ripple-theme-styles($theme, $is-filled) {
+  $opacities: if(inspection.get-theme-type($theme) == dark,
     mdc-ripple-theme.$light-ink-opacities, mdc-ripple-theme.$dark-ink-opacities);
 
   // Ideally these styles would be structural, but MDC bases some of the opacities on the theme.

package/button/_button-theme.scss

@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use '@material/button/button' as mdc-button;
 @use '@material/button/button-theme' as mdc-button-theme;
 @use '@material/button/button-text-theme' as mdc-button-text-theme;
@@ -10,6 +9,7 @@
 @use './button-theme-private';
 @use '../core/mdc-helpers/mdc-helpers';
 @use '../core/theming/theming';
+@use '../core/theming/inspection';
 @use '../core/typography/typography';
 
 @mixin _button-variant($color) {
@@ -38,10 +38,9 @@
   ));
 }
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-  @include mdc-helpers.using-mdc-theme($config) {
-    $is-dark: map.get($config, is-dark);
+@mixin color($theme) {
+  @include mdc-helpers.using-mdc-theme($theme) {
+    $is-dark: inspection.get-theme-type($theme) == dark;
     $on-surface: mdc-theme-color.prop-value(on-surface);
     $surface: mdc-theme-color.prop-value(surface);
     $disabled-ink-color: rgba($on-surface, if($is-dark, 0.5, 0.38));
@@ -174,25 +173,24 @@
 
     // Ripple colors
     .mat-mdc-button, .mat-mdc-outlined-button {
-      @include button-theme-private.ripple-theme-styles($config, false);
+      @include button-theme-private.ripple-theme-styles($theme, false);
     }
 
     .mat-mdc-raised-button, .mat-mdc-unelevated-button {
-      @include button-theme-private.ripple-theme-styles($config, true);
+      @include button-theme-private.ripple-theme-styles($theme, true);
     }
   }
 }
 
-@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-button.without-ripple($query: mdc-helpers.$mdc-typography-styles-query);
   }
 }
 
-@mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+@mixin density($theme) {
+  $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
+
   .mat-mdc-button,
   .mat-mdc-raised-button,
   .mat-mdc-unelevated-button,
@@ -205,21 +203,16 @@
   }
 }
 
-@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-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);
     }
   }
 }