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

package/core/density/private/_all-density.scss

@@ -1,4 +1,4 @@
-@use '../../theming/theming';
+@use '../../theming/inspection';
 @use '../../../button/button-theme';
 @use '../../../button/icon-button-theme';
 @use '../../../button/fab-theme';
@@ -30,13 +30,8 @@
 @use '../../../table/table-theme';
 
 // Includes all of the density styles.
-@mixin all-component-densities($config-or-theme) {
-  // In case a theme object has been passed instead of a configuration for
-  // the density system, extract the density config from the theme object.
-  $config: if(theming.private-is-theme-object($config-or-theme),
-      theming.get-density-config($config-or-theme), $config-or-theme);
-
-  @if $config == null {
+@mixin all-component-densities($theme) {
+  @if not inspection.theme-has($theme, density) {
     @error 'No density configuration specified.';
   }
 
@@ -45,39 +40,39 @@
   // not possible as it would introduce a circular dependency for density because the `mat-core`
   // mixin that is transitively loaded by the `all-theme` file, imports `all-density` which
   // would then load `all-theme` again. This ultimately results a circular dependency.
-  @include form-field-theme.density($config);
-  @include card-theme.density($config);
-  @include progress-bar-theme.density($config);
-  @include progress-spinner-theme.density($config);
-  @include tooltip-theme.density($config);
-  @include input-theme.density($config);
-  @include core-theme.density($config);
-  @include select-theme.density($config);
-  @include checkbox-theme.density($config);
-  @include autocomplete-theme.density($config);
-  @include dialog-theme.density($config);
-  @include chips-theme.density($config);
-  @include slide-toggle-theme.density($config);
-  @include radio-theme.density($config);
-  @include slider-theme.density($config);
-  @include menu-theme.density($config);
-  @include list-theme.density($config);
-  @include paginator-theme.density($config);
-  @include tabs-theme.density($config);
-  @include snack-bar-theme.density($config);
-  @include button-theme.density($config);
-  @include icon-button-theme.density($config);
-  @include fab-theme.density($config);
-  @include table-theme.density($config);
-  @include expansion-theme.density($config);
-  @include stepper-theme.density($config);
-  @include toolbar-theme.density($config);
-  @include tree-theme.density($config);
-  @include button-toggle-theme.density($config);
+  @include form-field-theme.density($theme);
+  @include card-theme.density($theme);
+  @include progress-bar-theme.density($theme);
+  @include progress-spinner-theme.density($theme);
+  @include tooltip-theme.density($theme);
+  @include input-theme.density($theme);
+  @include core-theme.density($theme);
+  @include select-theme.density($theme);
+  @include checkbox-theme.density($theme);
+  @include autocomplete-theme.density($theme);
+  @include dialog-theme.density($theme);
+  @include chips-theme.density($theme);
+  @include slide-toggle-theme.density($theme);
+  @include radio-theme.density($theme);
+  @include slider-theme.density($theme);
+  @include menu-theme.density($theme);
+  @include list-theme.density($theme);
+  @include paginator-theme.density($theme);
+  @include tabs-theme.density($theme);
+  @include snack-bar-theme.density($theme);
+  @include button-theme.density($theme);
+  @include icon-button-theme.density($theme);
+  @include fab-theme.density($theme);
+  @include table-theme.density($theme);
+  @include expansion-theme.density($theme);
+  @include stepper-theme.density($theme);
+  @include toolbar-theme.density($theme);
+  @include tree-theme.density($theme);
+  @include button-toggle-theme.density($theme);
 }
 
 
 // @deprecated Use `all-component-densities`.
-@mixin angular-material-density($config-or-theme) {
-  @include all-component-densities($config-or-theme);
+@mixin angular-material-density($theme) {
+  @include all-component-densities($theme);
 }

package/core/focus-indicators/_focus-indicators-theme.scss

@@ -1,13 +1,11 @@
 @use './private';
 
-// stylelint-disable-next-line material/theme-mixin-api
-@mixin color($config-or-theme-or-color) {
-  @include private.strong-focus-indicators-color($config-or-theme-or-color);
-  @include private.mdc-strong-focus-indicators-color($config-or-theme-or-color);
+@mixin color($theme) {
+  @include private.strong-focus-indicators-color($theme);
+  @include private.mdc-strong-focus-indicators-color($theme);
 }
 
-// stylelint-disable-next-line material/theme-mixin-api
-@mixin theme($theme-or-color-config-or-color) {
-  @include private.strong-focus-indicators-theme($theme-or-color-config-or-color);
-  @include private.mdc-strong-focus-indicators-theme($theme-or-color-config-or-color);
+@mixin theme($theme) {
+  @include private.strong-focus-indicators-theme($theme);
+  @include private.mdc-strong-focus-indicators-theme($theme);
 }

package/core/focus-indicators/_private.scss

@@ -3,6 +3,7 @@
 @use '@angular/cdk';
 @use '../style/layout-common';
 @use '../theming/theming';
+@use '../theming/inspection';
 
 // Private sass variables that will be used as reference throughout component stylesheets.
 $default-border-width: 3px;
@@ -113,65 +114,60 @@ $default-border-radius: 4px;
   @include customize-focus-indicators($config, 'mat-mdc');
 }
 
-@mixin strong-focus-indicators-color($config-or-theme-or-color) {
-  @if meta.type-of($config-or-theme-or-color) == 'color' {
+@mixin strong-focus-indicators-color($theme-or-color) {
+  @if meta.type-of($theme-or-color) == 'color' {
     @include customize-focus-indicators((
-        border-color: $config-or-theme-or-color
+        border-color: $theme-or-color
     ), 'mat');
   }
   @else {
-    $config: theming.get-color-config($config-or-theme-or-color);
-    $border-color: theming.get-color-from-palette(map.get($config, primary));
+    $border-color: inspection.get-theme-color($theme-or-color, primary);
     @include customize-focus-indicators((
         border-color: $border-color
     ), 'mat');
   }
 }
 
-@mixin strong-focus-indicators-theme($theme-or-color-config-or-color) {
-  @if meta.type-of($theme-or-color-config-or-color) == 'color' {
+@mixin strong-focus-indicators-theme($theme-or-color) {
+  @if meta.type-of($theme-or-color) == 'color' {
     @include customize-focus-indicators((
-        border-color: $theme-or-color-config-or-color
+        border-color: $theme-or-color
     ), 'mat');
   }
   @else {
-    $theme: theming.private-legacy-get-theme($theme-or-color-config-or-color);
-    @include theming.private-check-duplicate-theme-styles($theme, 'mat-focus-indicators') {
-      $color: theming.get-color-config($theme);
-      @if $color != null {
-        @include strong-focus-indicators-color($color);
+    @include theming.private-check-duplicate-theme-styles($theme-or-color, 'mat-focus-indicators') {
+      @if inspection.theme-has($theme-or-color, color) {
+        @include strong-focus-indicators-color($theme-or-color);
       }
     }
   }
 }
 
-@mixin mdc-strong-focus-indicators-color($config-or-theme-or-color) {
-  @if meta.type-of($config-or-theme-or-color) == 'color' {
+@mixin mdc-strong-focus-indicators-color($theme-or-color) {
+  @if meta.type-of($theme-or-color) == 'color' {
     @include customize-focus-indicators((
-        border-color: $config-or-theme-or-color
+        border-color: $theme-or-color
     ), 'mat-mdc');
   }
   @else {
-    $config: theming.get-color-config($config-or-theme-or-color);
-    $border-color: theming.get-color-from-palette(map.get($config, primary));
+    $border-color: inspection.get-theme-color($theme-or-color, primary);
     @include customize-focus-indicators((
         border-color: $border-color
     ), 'mat-mdc');
   }
 }
 
-@mixin mdc-strong-focus-indicators-theme($theme-or-color-config-or-color) {
-  @if meta.type-of($theme-or-color-config-or-color) == 'color' {
+@mixin mdc-strong-focus-indicators-theme($theme-or-color) {
+  @if meta.type-of($theme-or-color) == 'color' {
     @include customize-focus-indicators((
-        border-color: $theme-or-color-config-or-color
+        border-color: $theme-or-color
     ), 'mat-mdc');
   }
   @else {
-    $theme: theming.private-legacy-get-theme($theme-or-color-config-or-color);
-    @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-focus-indicators') {
-      $color: theming.get-color-config($theme);
-      @if $color != null {
-        @include mdc-strong-focus-indicators-color($color);
+    @include theming.private-check-duplicate-theme-styles(
+        $theme-or-color, 'mat-mdc-focus-indicators') {
+      @if inspection.theme-has($theme-or-color, color) {
+        @include mdc-strong-focus-indicators-color($theme-or-color);
       }
     }
   }

package/core/index.d.ts

@@ -1,9 +1,6 @@
-import { _AbstractConstructor as _AbstractConstructor_2 } from '@angular/material/core';
 import { AbstractControl } from '@angular/forms';
 import { AfterViewChecked } from '@angular/core';
-import { BooleanInput } from '@angular/cdk/coercion';
 import { ChangeDetectorRef } from '@angular/core';
-import { _Constructor as _Constructor_2 } from '@angular/material/core';
 import { ElementRef } from '@angular/core';
 import { EventEmitter } from '@angular/core';
 import { FocusableOption } from '@angular/cdk/a11y';
@@ -529,23 +526,21 @@ export declare class MatNativeDateModule {
 /**
  * Component that is used to group instances of `mat-option`.
  */
-export declare class MatOptgroup extends _MatOptgroupMixinBase implements CanDisable {
+export declare class MatOptgroup {
     /** Label for the option group. */
     label: string;
+    /** whether the option group is disabled. */
+    disabled: boolean;
     /** Unique id for the underlying label. */
     _labelId: string;
     /** Whether the group is in inert a11y mode. */
     _inert: boolean;
     constructor(parent?: MatOptionParentComponent);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatOptgroup, [{ optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatOptgroup, "mat-optgroup", ["matOptgroup"], { "disabled": { "alias": "disabled"; "required": false; }; "label": { "alias": "label"; "required": false; }; }, {}, never, ["*", "mat-option, ng-container"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatOptgroup, "mat-optgroup", ["matOptgroup"], { "label": { "alias": "label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["*", "mat-option, ng-container"], false, never>;
+    static ngAcceptInputType_disabled: unknown;
 }
 
-/** @docs-private */
-declare const _MatOptgroupMixinBase: _Constructor_2<CanDisable> & _AbstractConstructor_2<CanDisable> & {
-    new (): {};
-};
-
 /**
  * Single option inside of a `<mat-select>` element.
  */
@@ -568,7 +563,7 @@ export declare class MatOption<T = any> implements FocusableOption, AfterViewChe
     id: string;
     /** Whether the option is disabled. */
     get disabled(): boolean;
-    set disabled(value: BooleanInput);
+    set disabled(value: boolean);
     /** Whether ripples for the option are disabled. */
     get disableRipple(): boolean;
     /** Whether to display checkmark for single-selection. */
@@ -629,6 +624,7 @@ export declare class MatOption<T = any> implements FocusableOption, AfterViewChe
     private _emitSelectionChangeEvent;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatOption<any>, [null, null, { optional: true; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatOption<any>, "mat-option", ["matOption"], { "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "onSelectionChange": "onSelectionChange"; }, never, ["mat-icon", "*"], false, never>;
+    static ngAcceptInputType_disabled: unknown;
 }
 
 export declare class MatOptionModule {

package/core/mdc-helpers/_mdc-helpers.scss

@@ -1,9 +1,7 @@
 // TODO(mmalerba): this file should be split into separate cohesive partials for things like
 //  "theming", "typography", "core".
-
-@use '../theming/theming';
+@use '../theming/inspection';
 @use '../typography/typography';
-@use '../typography/typography-utils';
 @use '@material/feature-targeting' as mdc-feature-targeting;
 @use '@material/typography' as mdc-typography;
 @use '@material/theme/theme-color' as mdc-theme-color;
@@ -36,7 +34,7 @@ $mat-typography-mdc-level-mappings: (
 );
 
 // Converts an Angular Material typography level config to an MDC one.
-@function typography-level-config-to-mdc($mat-config, $mat-level) {
+@function typography-level-config-to-mdc($theme, $mat-level) {
   $mdc-level: map.get($mat-typography-mdc-level-mappings, $mat-level);
 
   $result-with-nulls: map.merge(
@@ -49,11 +47,11 @@ $mat-typography-mdc-level-mappings: (
           )),
       if($mat-level,
           (
-            font-size: typography-utils.font-size($mat-config, $mat-level),
-            line-height: typography-utils.line-height($mat-config, $mat-level),
-            font-weight: typography-utils.font-weight($mat-config, $mat-level),
-            letter-spacing: typography-utils.letter-spacing($mat-config, $mat-level),
-            font-family: typography-utils.font-family($mat-config, $mat-level),
+            font-size: inspection.get-theme-typography($theme, $mat-level, font-size),
+            line-height: inspection.get-theme-typography($theme, $mat-level, line-height),
+            font-weight: inspection.get-theme-typography($theme, $mat-level, font-weight),
+            letter-spacing: inspection.get-theme-typography($theme, $mat-level, letter-spacing),
+            font-family: inspection.get-theme-typography($theme, $mat-level, font-family),
             // Angular Material doesn't use text-transform, so disable it.
             text-transform: none,
           ),
@@ -71,13 +69,13 @@ $mat-typography-mdc-level-mappings: (
 }
 
 // Converts an Angular Material typography config to an MDC one.
-@function typography-config-to-mdc($mat-config) {
+@function typography-config-to-mdc($theme) {
   $mdc-config: ();
 
   @each $mat-level, $mdc-level in $mat-typography-mdc-level-mappings {
     $mdc-config: map.merge(
         $mdc-config,
-        ($mdc-level: typography-level-config-to-mdc($mat-config, $mat-level)));
+        ($mdc-level: typography-level-config-to-mdc($theme, $mat-level)));
   }
 
   @return $mdc-config;
@@ -100,12 +98,11 @@ $mat-typography-mdc-level-mappings: (
 
 // Configures MDC's global variables to reflect the given theme, applies the given styles,
 // then resets the global variables to prevent unintended side effects.
-@mixin using-mdc-theme($config) {
-  $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));
-  $background-palette: map.get($config, background);
-  $is-dark: map.get($config, is-dark);
+@mixin using-mdc-theme($theme) {
+  $primary: inspection.get-theme-color($theme, primary);
+  $accent: inspection.get-theme-color($theme, accent);
+  $warn: inspection.get-theme-color($theme, warn);
+  $is-dark: inspection.get-theme-type($theme) == dark;
 
   // Save the original values.
   $orig-primary: mdc-theme-color.$primary;
@@ -126,8 +123,8 @@ $mat-typography-mdc-level-mappings: (
   mdc-theme-color.$secondary: $accent;
   mdc-theme-color.$on-secondary:
       if(variable-safe-contrast-tone(mdc-theme-color.$secondary, $is-dark) == 'dark', #000, #fff);
-  mdc-theme-color.$background: theming.get-color-from-palette($background-palette, background);
-  mdc-theme-color.$surface: theming.get-color-from-palette($background-palette, card);
+  mdc-theme-color.$background: inspection.get-theme-color($theme, background, background);
+  mdc-theme-color.$surface: inspection.get-theme-color($theme, background, card);
   mdc-theme-color.$on-surface:
       if(variable-safe-contrast-tone(mdc-theme-color.$surface, $is-dark) == 'dark', #000, #fff);
   mdc-theme-color.$error: $warn;
@@ -193,13 +190,13 @@ $mat-typography-mdc-level-mappings: (
 
 // Configures MDC's global variables to reflect the given typography config,
 // applies the given styles, then resets the global variables to prevent unintended side effects.
-@mixin using-mdc-typography($config) {
+@mixin using-mdc-typography($theme) {
   // Save the original values.
   $orig-mdc-typography-styles: mdc-typography.$styles;
 
   // Set new values based on the given Angular Material typography configuration.
-  @if $config {
-    mdc-typography.$styles: typography-config-to-mdc($config);
+  @if inspection.theme-has($theme, typography) {
+    mdc-typography.$styles: typography-config-to-mdc($theme);
   }
 
   // Apply given rules.

package/core/option/_optgroup-theme.scss

@@ -3,46 +3,36 @@
 @use '../style/sass-utils';
 
 @use '../theming/theming';
+@use '../theming/inspection';
 @use '../typography/typography';
 
-@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-optgroup.$prefix,
-      tokens-mat-optgroup.get-color-tokens($config));
+      tokens-mat-optgroup.get-color-tokens($theme));
   }
 }
 
-@mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-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-optgroup.$prefix,
-      tokens-mat-optgroup.get-typography-tokens($config));
+      tokens-mat-optgroup.get-typography-tokens($theme));
   }
 }
 
-@mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($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-optgroup') {
-    $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/core/option/_option-theme.scss

@@ -1,62 +1,48 @@
-@use 'sass:map';
 @use '../tokens/m2/mat/option' as tokens-mat-option;
 @use '../tokens/token-utils';
 @use '../style/sass-utils';
 
 @use '../theming/theming';
+@use '../theming/inspection';
 @use '../typography/typography';
-@use '../mdc-helpers/mdc-helpers';
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-
-  @include mdc-helpers.using-mdc-theme($config) {
-    @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-option.$prefix,
-        tokens-mat-option.get-color-tokens($config));
-    }
+@mixin color($theme) {
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mat-option.$prefix,
+      tokens-mat-option.get-color-tokens($theme));
+  }
 
-    .mat-accent {
-      @include token-utils.create-token-values(tokens-mat-option.$prefix,
-        tokens-mat-option.private-get-color-palette-color-tokens(map.get($config, accent)));
-    }
+  .mat-accent {
+    @include token-utils.create-token-values(tokens-mat-option.$prefix,
+      tokens-mat-option.get-color-tokens($theme, accent));
+  }
 
-    .mat-warn {
-      @include token-utils.create-token-values(tokens-mat-option.$prefix,
-        tokens-mat-option.private-get-color-palette-color-tokens(map.get($config, warn)));
-    }
+  .mat-warn {
+    @include token-utils.create-token-values(tokens-mat-option.$prefix,
+      tokens-mat-option.get-color-tokens($theme, warn));
   }
 }
 
-@mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-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-option.$prefix,
-      tokens-mat-option.get-typography-tokens($config));
+      tokens-mat-option.get-typography-tokens($theme));
   }
 }
 
-@mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($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-option') {
-    $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/core/ripple/_ripple-theme.scss

@@ -1,12 +1,10 @@
-@use 'sass:map';
 @use 'sass:meta';
 @use '../theming/theming';
+@use '../theming/inspection';
 
 // Colors for the ripple elements.
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-  $foreground: map.get($config, foreground);
-  $foreground-base: map.get($foreground, base);
+@mixin color($theme) {
+  $foreground-base: inspection.get-theme-color($theme, foreground, base);
   $color-opacity: 0.1;
 
   .mat-ripple-element {
@@ -22,12 +20,10 @@
   }
 }
 
-@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-ripple') {
-    $color: theming.get-color-config($theme);
-    @if $color != null {
-      @include color($color);
+    @if inspection.theme-has($theme, color) {
+      @include color($theme);
     }
   }
 }

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

@@ -1,5 +1,5 @@
-@use 'sass:map';
 @use '../../theming/theming';
+@use '../../theming/inspection';
 
 @mixin _psuedo-checkbox-styles-with-color($text-color, $background) {
   .mat-pseudo-checkbox-checked,
@@ -19,15 +19,13 @@
   }
 }
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-  $is-dark-theme: map.get($config, is-dark);
-
-  $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));
-  $background: theming.get-color-from-palette(map.get($config, background), background);
-  $secondary-text: theming.get-color-from-palette(map.get($config, foreground), secondary-text);
+@mixin color($theme) {
+  $is-dark-theme: inspection.get-theme-type($theme) == dark;
+  $primary: inspection.get-theme-color($theme, primary);
+  $accent: inspection.get-theme-color($theme, accent);
+  $warn: inspection.get-theme-color($theme, warn);
+  $background: inspection.get-theme-color($theme, background, background);
+  $secondary-text: inspection.get-theme-color($theme, foreground, secondary-text);
 
   // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors,
   // this does not work well with elements layered on top of one another. To get around this we
@@ -74,25 +72,20 @@
   }
 }
 
-@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-pseudo-checkbox') {
-    $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/core/style/_form-common.scss

@@ -1,5 +1,5 @@
-@use 'sass:map';
-@use '../theming/theming';
+@use '../theming/inspection';
+@use './sass-utils';
 
 // Renders a gradient for showing the dashed line when the input is disabled.
 // Unlike using a border, a gradient allows us to adjust the spacing of the dotted line
@@ -13,9 +13,9 @@
 // Figures out the color of the placeholder for a form control.
 // Used primarily to prevent the various form controls from
 // becoming out of sync since these colors aren't in a palette.
-@function private-control-placeholder-color($config) {
-  $foreground: map.get($config, foreground);
-  $is-dark-theme: map.get($config, is-dark);
-  @return theming.get-color-from-palette($foreground, secondary-text,
-    if($is-dark-theme, 0.5, 0.42));
+@function private-control-placeholder-color($theme) {
+  $is-dark-theme: inspection.get-theme-type($theme) == dark;
+  @return sass-utils.safe-color-change(
+      inspection.get-theme-color($theme, foreground, secondary-text),
+      $alpha: if($is-dark-theme, 0.5, 0.42));
 }