From 43f152b5cdb1a247ab3dac8438f2aec25dd3483a Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Sat, 26 Aug 2023 06:14:39 +0000
Subject: [PATCH 1/3] refactor(multiple): convert components to theme
 inspection API

Converts: input, list, checkbox, radio, slide-toggle, slider.

See related PR #27688 for more context.
---
 .../popover-edit/_popover-edit-theme.scss     |   4 +-
 src/material/checkbox/_checkbox-theme.scss    |  73 ++--
 .../core/mdc-helpers/_mdc-helpers.scss        |  38 +-
 src/material/core/theming/_m2-inspection.scss |  29 +-
 src/material/core/tokens/m2/mat/_radio.scss   |  15 +-
 .../core/tokens/m2/mat/_slide-toggle.scss     |  25 +-
 src/material/core/tokens/m2/mat/_slider.scss  |   9 +-
 .../core/tokens/m2/mdc/_checkbox.scss         |  41 +-
 src/material/core/tokens/m2/mdc/_list.scss    |  84 +++--
 src/material/core/tokens/m2/mdc/_radio.scss   |  22 +-
 src/material/core/tokens/m2/mdc/_slider.scss  |  37 +-
 src/material/core/tokens/m2/mdc/_switch.scss  |  34 +-
 src/material/core/typography/_definition.scss | 258 +++++++++++++
 .../core/typography/_property-getters.scss    |  63 ++++
 .../core/typography/_typography-utils.scss    |  76 +---
 src/material/core/typography/_typography.scss | 350 +-----------------
 src/material/core/typography/_versioning.scss |  86 +++++
 src/material/input/_input-theme.scss          |  33 +-
 src/material/list/_list-theme.scss            |  66 ++--
 src/material/radio/_radio-theme.scss          |  60 ++-
 .../slide-toggle/_slide-toggle-theme.scss     |  62 ++--
 src/material/slider/_slider-theme.scss        |  65 ++--
 22 files changed, 728 insertions(+), 802 deletions(-)
 create mode 100644 src/material/core/typography/_definition.scss
 create mode 100644 src/material/core/typography/_property-getters.scss
 create mode 100644 src/material/core/typography/_versioning.scss

diff --git a/src/material-experimental/popover-edit/_popover-edit-theme.scss b/src/material-experimental/popover-edit/_popover-edit-theme.scss
index 53ce2346a5fa..eb39cc9c683e 100644
--- a/src/material-experimental/popover-edit/_popover-edit-theme.scss
+++ b/src/material-experimental/popover-edit/_popover-edit-theme.scss
@@ -148,10 +148,10 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: mat.private-typography-to-2014-config(
+  $config: mat.private-typography-to-2018-config(
       mat.get-typography-config($config-or-theme));
   [mat-edit-title] {
-    @include mat.typography-level($config, title);
+    @include mat.typography-level($config, headline-6);
   }
 }
 
diff --git a/src/material/checkbox/_checkbox-theme.scss b/src/material/checkbox/_checkbox-theme.scss
index dc4f276819ef..cc0d74f7845c 100644
--- a/src/material/checkbox/_checkbox-theme.scss
+++ b/src/material/checkbox/_checkbox-theme.scss
@@ -8,9 +8,9 @@
 @use '../core/mdc-helpers/mdc-helpers';
 @use '../core/tokens/m2/mdc/checkbox' as tokens-mdc-checkbox;
 
-@mixin base($config-or-theme) {
-  @if inspection.get-theme-version($config-or-theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($config-or-theme, base));
+@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() {
@@ -19,59 +19,48 @@
   }
 }
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-
-  @if inspection.get-theme-version($config-or-theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($config-or-theme, color));
+@mixin color($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   }
   @else {
-    $primary: map.get($config, primary);
-    $warn: map.get($config, warn);
-    $foreground: map.get($config, foreground);
-
     @include sass-utils.current-selector-or-root() {
-      @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($config));
+      @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme));
     }
 
     .mat-mdc-checkbox {
       &.mat-primary {
-        $primary-config: map.merge($config, (accent: $primary));
-        @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($primary-config));
+        @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, primary));
       }
 
       &.mat-warn {
-        $warn-config: map.merge($config, (accent: $warn));
-        @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($warn-config));
+        @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, warn));
       }
 
-      @include mdc-helpers.using-mdc-theme($config) {
+      @include mdc-helpers.using-mdc-theme($theme) {
         // TODO(mmalerba): Switch to static-styles, theme-styles, and theme once they're available.
         @include mdc-form-field.core-styles($query: mdc-helpers.$mdc-theme-styles-query);
       }
 
       &.mat-mdc-checkbox-disabled label {
         // MDC should set the disabled color on the label, but doesn't, so we do it here instead.
-        color: theming.get-color-from-palette($foreground, disabled-text);
+        color: inspection.get-theme-color($theme, foreground, disabled-text);
       }
     }
   }
 }
 
-@mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-          theming.get-typography-config($config-or-theme));
-
-  @if inspection.get-theme-version($config-or-theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($config-or-theme, typography));
+@mixin typography($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   }
   @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-typography-tokens($config));
+      @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-typography-tokens($theme));
     }
 
     .mat-mdc-checkbox {
-      @include mdc-helpers.using-mdc-typography($config) {
+      @include mdc-helpers.using-mdc-typography($theme) {
         // TODO(mmalerba): Switch to static-styles, theme-styles, and theme once they're available.
         @include mdc-form-field.core-styles($query: mdc-helpers.$mdc-typography-styles-query);
       }
@@ -79,15 +68,15 @@
   }
 }
 
-@mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+@mixin density($theme) {
+  $density-scale: inspection.get-theme-density($theme);
 
-  @if inspection.get-theme-version($config-or-theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($config-or-theme, density));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   }
   @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-density-tokens($density-scale));
+      @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-density-tokens($theme));
     }
 
     @include mdc-helpers.if-touch-targets-unsupported($density-scale) {
@@ -98,27 +87,21 @@
   }
 }
 
-@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-checkbox') {
     @if inspection.get-theme-version($theme) == 1 {
       @include _theme-from-tokens(inspection.get-theme-tokens($theme));
     }
     @else {
-      $color: theming.get-color-config($theme);
-      $density: theming.get-density-config($theme);
-      $typography: theming.get-typography-config($theme);
-
       @include base($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);
       }
     }
   }
diff --git a/src/material/core/mdc-helpers/_mdc-helpers.scss b/src/material/core/mdc-helpers/_mdc-helpers.scss
index b4d99674658a..ec3ce9c366fe 100644
--- a/src/material/core/mdc-helpers/_mdc-helpers.scss
+++ b/src/material/core/mdc-helpers/_mdc-helpers.scss
@@ -2,6 +2,7 @@
 //  "theming", "typography", "core".
 
 @use '../theming/theming';
+@use '../theming/inspection';
 @use '../typography/typography';
 @use '../typography/typography-utils';
 @use '@material/feature-targeting' as mdc-feature-targeting;
@@ -36,7 +37,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 +50,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 +72,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 +101,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 +126,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 +193,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.
diff --git a/src/material/core/theming/_m2-inspection.scss b/src/material/core/theming/_m2-inspection.scss
index c80f851303bf..b7d5d39dfce7 100644
--- a/src/material/core/theming/_m2-inspection.scss
+++ b/src/material/core/theming/_m2-inspection.scss
@@ -2,11 +2,11 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use './theming';
-@use '../typography/typography-utils';
-@use '../typography/typography';
+@use '../typography/property-getters' as typography-getters;
+@use '../typography/versioning' as typography-versioning;
 
 /// Key used to access the Angular Material theme internals.
-$_internals: _mat-theming-internals-do-not-access;
+$_internals: _mat-theming-internals-do-not-accesst;
 
 /// Keys that indicate a config object is a color config.
 $_color-keys: (
@@ -139,29 +139,30 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
   @if not theme-has($theme, typography) {
     @error 'Typography information is not available on this theme.';
   }
-  $typography: typography.private-typography-to-2018-config(theming.get-typography-config($theme));
+  $typography: typography-versioning.private-typography-to-2018-config(
+      theming.get-typography-config($theme));
   @if $property == font {
-    $font-weight: typography-utils.font-weight($typography, $typescale);
-    $font-size: typography-utils.font-size($typography, $typescale);
-    $line-height: typography-utils.line-height($typography, $typescale);
-    $font-family: typography-utils.font-family($typography, $typescale);
+    $font-weight: typography-getters.font-weight($typography, $typescale);
+    $font-size: typography-getters.font-size($typography, $typescale);
+    $line-height: typography-getters.line-height($typography, $typescale);
+    $font-family: typography-getters.font-family($typography, $typescale);
     @return ($font-weight list.slash($font-size, $line-height) $font-family);
   }
   @else if $property == font-family {
-    $result: typography-utils.font-family($typography, $typescale);
-    @return $result or typography-utils.font-family($typography);
+    $result: typography-getters.font-family($typography, $typescale);
+    @return $result or typography-getters.font-family($typography);
   }
   @else if $property == font-size {
-    @return typography-utils.font-size($typography, $typescale);
+    @return typography-getters.font-size($typography, $typescale);
   }
   @else if $property == font-weight {
-    @return typography-utils.font-weight($typography, $typescale);
+    @return typography-getters.font-weight($typography, $typescale);
   }
   @else if $property == line-height {
-    @return typography-utils.line-height($typography, $typescale);
+    @return typography-getters.line-height($typography, $typescale);
   }
   @else if $property == letter-spacing {
-    @return typography-utils.letter-spacing($typography, $typescale);
+    @return typography-getters.letter-spacing($typography, $typescale);
   }
   @else {
     @error #{'Valid typography properties are: #{$_typography-properties}. Got:'} $property;
diff --git a/src/material/core/tokens/m2/mat/_radio.scss b/src/material/core/tokens/m2/mat/_radio.scss
index eca8bd448037..ddefae7bb4bb 100644
--- a/src/material/core/tokens/m2/mat/_radio.scss
+++ b/src/material/core/tokens/m2/mat/_radio.scss
@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../../token-utils';
 @use '../../../theming/theming';
+@use '../../../theming/inspection';
 @use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -13,25 +14,23 @@ $prefix: (mat, radio);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
-  $foreground: map.get($config, foreground);
-  $is-dark: map.get($config, is-dark);
-  $accent: map.get($config, accent);
+@function get-color-tokens($theme, $palette-name: accent) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
 
   @return (
     ripple-color: if($is-dark, #fff, #000),
-    checked-ripple-color: theming.get-color-from-palette($accent, default),
-    disabled-label-color: theming.get-color-from-palette($foreground, disabled-text),
+    checked-ripple-color: inspection.get-theme-color($theme, $palette-name, default),
+    disabled-label-color: inspection.get-theme-color($theme, foreground, disabled-text),
   );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
+@function get-typography-tokens($theme) {
   @return ();
 }
 
 // Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($config) {
+@function get-density-tokens($theme) {
   @return ();
 }
 
diff --git a/src/material/core/tokens/m2/mat/_slide-toggle.scss b/src/material/core/tokens/m2/mat/_slide-toggle.scss
index 6afaaa4d7e1e..a0a6cc1f63ab 100644
--- a/src/material/core/tokens/m2/mat/_slide-toggle.scss
+++ b/src/material/core/tokens/m2/mat/_slide-toggle.scss
@@ -1,5 +1,6 @@
 @use '../../token-utils';
 @use '../../../style/sass-utils';
+@use '../../../theming/inspection';
 @use '../../../typography/typography-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -12,31 +13,23 @@ $prefix: (mat, slide-toggle);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
+@function get-color-tokens($theme) {
   @return ();
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
-  // TODO(amysorto): The earlier implementation of the slide-toggle used MDC's APIs to create the
-  // typography tokens. As a result, we unintentionally allowed `null` typography configs to be
-  // passed in. Since there a lot of apps that now depend on this pattern, we need this temporary
-  // fallback.
-  @if ($config == null) {
-    $config: mdc-helpers.private-fallback-typography-from-mdc();
-  }
-
+@function get-typography-tokens($theme) {
   @return (
-    label-text-font: typography-utils.font-family($config),
-    label-text-size: typography-utils.font-size($config, body-2),
-    label-text-tracking: typography-utils.letter-spacing($config, body-2),
-    label-text-line-height: typography-utils.line-height($config, body-2),
-    label-text-weight: typography-utils.font-weight($config, body-2),
+    label-text-font: inspection.get-theme-typography($theme, body-2, font-family),
+    label-text-size: inspection.get-theme-typography($theme, body-2, font-size),
+    label-text-tracking: inspection.get-theme-typography($theme, body-2, letter-spacing),
+    label-text-line-height: inspection.get-theme-typography($theme, body-2, line-height),
+    label-text-weight: inspection.get-theme-typography($theme, body-2, font-weight),
   );
  }
 
 // Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($config) {
+@function get-density-tokens($theme) {
   @return ();
 }
 
diff --git a/src/material/core/tokens/m2/mat/_slider.scss b/src/material/core/tokens/m2/mat/_slider.scss
index 334d13d2131f..1e0165422c1f 100644
--- a/src/material/core/tokens/m2/mat/_slider.scss
+++ b/src/material/core/tokens/m2/mat/_slider.scss
@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../../token-utils';
 @use '../../../style/sass-utils';
+@use '../../../theming/inspection';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, slider);
@@ -12,8 +13,8 @@ $prefix: (mat, slider);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
-  $is-dark: map.get($config, is-dark);
+@function get-color-tokens($theme) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
 
   @return (
     // Opacity of value indicator text container
@@ -22,12 +23,12 @@ $prefix: (mat, slider);
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
+@function get-typography-tokens($theme) {
   @return ();
  }
 
 // Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($config) {
+@function get-density-tokens($theme) {
   @return ();
 }
 
diff --git a/src/material/core/tokens/m2/mdc/_checkbox.scss b/src/material/core/tokens/m2/mdc/_checkbox.scss
index c0e0f9da633a..1ee7ac07247d 100644
--- a/src/material/core/tokens/m2/mdc/_checkbox.scss
+++ b/src/material/core/tokens/m2/mdc/_checkbox.scss
@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../../../theming/palette';
 @use '../../../theming/theming';
+@use '../../../theming/inspection';
 @use '../../../style/sass-utils';
 @use '../../token-utils';
 @use '@material/theme/theme-color' as mdc-theme-color;
@@ -50,15 +51,15 @@ $prefix: (mdc, checkbox);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
-  $foreground: map.get($config, foreground);
-  $accent: map.get($config, accent);
-  $is-dark: map.get($config, is-dark);
-  $foreground-base: theming.get-color-from-palette($foreground, base);
-  $accent-default: theming.get-color-from-palette($accent, default);
-  $disabled-color: theming.get-color-from-palette($foreground, base, 0.38);
-  $selected-color: theming.get-color-from-palette($accent);
-  $border-color: theming.get-color-from-palette($foreground, base, 0.54);
+@function get-color-tokens($theme, $palette-name: accent) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $foreground-base: inspection.get-theme-color($theme, foreground, base);
+  $palette-default: inspection.get-theme-color($theme, $palette-name, default);
+  $disabled-color: sass-utils.safe-color-change(
+      inspection.get-theme-color($theme, foreground, base), $alpha: 0.38);
+  $palette-selected: inspection.get-theme-color($theme, $palette-name);
+  $border-color: sass-utils.safe-color-change(
+      inspection.get-theme-color($theme, foreground, base), $alpha: 0.54);
   $active-border-color:
     theming.get-color-from-palette(palette.$gray-palette, if($is-dark, 200, 900));
 
@@ -68,15 +69,15 @@ $prefix: (mdc, checkbox);
     // The color of the checkbox border when the checkbox is unselected and disabled.
     disabled-unselected-icon-color: $disabled-color,
     // The color of the checkmark when the checkbox is selected.
-    selected-checkmark-color: _contrast-tone($selected-color, $is-dark),
+    selected-checkmark-color: _contrast-tone($palette-selected, $is-dark),
     // The color of the checkbox fill when the checkbox is selected and focused.
-    selected-focus-icon-color: $selected-color,
+    selected-focus-icon-color: $palette-selected,
     // The color of the checkbox fill when the checkbox is selected and hovered.
-    selected-hover-icon-color: $selected-color,
+    selected-hover-icon-color: $palette-selected,
     // The color of the checkbox fill when the checkbox is selected.
-    selected-icon-color: $selected-color,
+    selected-icon-color: $palette-selected,
     // The color of the checkbox fill when the checkbox is selected an pressed.
-    selected-pressed-icon-color: $selected-color,
+    selected-pressed-icon-color: $palette-selected,
     // The color of the checkbox border when the checkbox is unselected and focused.
     unselected-focus-icon-color: $active-border-color,
     // The color of the checkbox border when the checkbox is unselected and hovered.
@@ -86,11 +87,11 @@ $prefix: (mdc, checkbox);
     // The color of the checkbox border when the checkbox is unselected and pressed.
     unselected-pressed-icon-color: $border-color,
     // The color of the ripple when the checkbox is selected and focused.
-    selected-focus-state-layer-color: $accent-default,
+    selected-focus-state-layer-color: $palette-default,
     // The color of the ripple when the checkbox is selected and hovered.
-    selected-hover-state-layer-color: $accent-default,
+    selected-hover-state-layer-color: $palette-default,
     // The color of the ripple when the checkbox is selected and pressed.
-    selected-pressed-state-layer-color: $accent-default,
+    selected-pressed-state-layer-color: $palette-default,
     // The color of the ripple when the checkbox is unselected and focused.
     unselected-focus-state-layer-color: $foreground-base,
     // The color of the ripple when the checkbox is unselected and hovered.
@@ -101,13 +102,13 @@ $prefix: (mdc, checkbox);
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
+@function get-typography-tokens($theme) {
   @return ();
 }
 
 // Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($config) {
-  $scale: theming.clamp-density($config, -3);
+@function get-density-tokens($theme) {
+  $scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
 
   @return (
     // The diameter of the checkbox's ripple.
diff --git a/src/material/core/tokens/m2/mdc/_list.scss b/src/material/core/tokens/m2/mdc/_list.scss
index f848f59d8c32..4b4729759d66 100644
--- a/src/material/core/tokens/m2/mdc/_list.scss
+++ b/src/material/core/tokens/m2/mdc/_list.scss
@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use '../../../theming/theming';
+@use '../../../theming/inspection';
 @use '../../../typography/typography-utils';
 @use '../../../style/sass-utils';
 @use '../../token-utils';
@@ -83,96 +84,99 @@ $prefix: (mdc, list);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
-  $foreground: map.get($config, foreground);
-  $is-dark: map.get($config, is-dark);
-  $foreground-base: theming.get-color-from-palette($foreground, base);
-  $text-icon-on-background:
-    theming.get-color-from-palette($foreground, base, if($is-dark, 0.5, 0.38));
+@function get-color-tokens($theme) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $foreground-base: inspection.get-theme-color($theme, foreground, base);
+  $foreground-text: inspection.get-theme-color($theme, foreground, text);
+  $foreground-secondary-text: inspection.get-theme-color($theme, foreground, secondary-text);
+  $foreground-hint-text: inspection.get-theme-color($theme, foreground, hint-text);
+  $text-icon-on-background: sass-utils.safe-color-change(
+      $foreground-base, $alpha: if($is-dark, 0.5, 0.38));
 
   @return (
     // Text color of the list item primary text.
-    list-item-label-text-color: theming.get-color-from-palette($foreground, text),
+    list-item-label-text-color: $foreground-text,
     // Text color of the list item supporting text.
-    list-item-supporting-text-color: theming.get-color-from-palette($foreground, secondary-text),
+    list-item-supporting-text-color: $foreground-secondary-text,
     // Color of the list item's leading icon.
     list-item-leading-icon-color: $text-icon-on-background,
     // Text color of the list item's trailing text.
-    list-item-trailing-supporting-text-color: theming.get-color-from-palette(
-        $foreground, hint-text),
+    list-item-trailing-supporting-text-color: $foreground-hint-text,
     // Color of the list item's trailing icon.
     list-item-trailing-icon-color: $text-icon-on-background,
     // Color of the list item's trailing icon when the item is selected.
     list-item-selected-trailing-icon-color: $text-icon-on-background,
     // Text color of the list item's primary text when the  item is disabled.
-    list-item-disabled-label-text-color: theming.get-color-from-palette($foreground, base),
+    list-item-disabled-label-text-color: $foreground-base,
     // Color of the list item's leading icon when the item is disabled.
-    list-item-disabled-leading-icon-color: theming.get-color-from-palette($foreground, base),
+    list-item-disabled-leading-icon-color: $foreground-base,
     // Color of the list item's trailing icon when the item is disabled.
-    list-item-disabled-trailing-icon-color: theming.get-color-from-palette($foreground, base),
+    list-item-disabled-trailing-icon-color: $foreground-base,
     // Color of the list item's primary text when the item is being hovered.
-    list-item-hover-label-text-color: theming.get-color-from-palette($foreground, text),
+    list-item-hover-label-text-color: $foreground-text,
     // Color of the list item's leading icon when the item is being hovered.
     list-item-hover-leading-icon-color: $text-icon-on-background,
     // Color of the list item's trailing icon when the item is being hovered.
     list-item-hover-trailing-icon-color: $text-icon-on-background,
     // Color of the list item's primary text when the item is focused.
-    list-item-focus-label-text-color: theming.get-color-from-palette($foreground, text),
+    list-item-focus-label-text-color: $foreground-text,
     // Color of the list item's overlay when the item is hovered.
-    list-item-hover-state-layer-color: theming.get-color-from-palette($foreground, base),
+    list-item-hover-state-layer-color: $foreground-base,
     // Opacity of the list item's overlay when the item is hovered.
     list-item-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
     // Color of the list item's overlay when the item is focused.
-    list-item-focus-state-layer-color: theming.get-color-from-palette($foreground, base),
+    list-item-focus-state-layer-color: $foreground-base,
     // Opacity of the list item's overlay when the item is focused.
     list-item-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
   );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
+@function get-typography-tokens($theme) {
   @return (
     // Font family of the list item primary text.
-    list-item-label-text-font: typography-utils.font-family($config, body-1)
-          or typography-utils.font-family($config),
+    list-item-label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
     // Line height of the list item primary text.
-    list-item-label-text-line-height: typography-utils.line-height($config, body-1),
+    list-item-label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),
     // Font size of the list item primary text.
-    list-item-label-text-size: typography-utils.font-size($config, body-1),
+    list-item-label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
     // Letter spacing of the list item primary text.
-    list-item-label-text-tracking: typography-utils.letter-spacing($config, body-1),
+    list-item-label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
     // Font weight of the list item primary text.
-    list-item-label-text-weight: typography-utils.font-weight($config, body-1),
+    list-item-label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
     // Font family of the list item supporting text.
-    list-item-supporting-text-font: typography-utils.font-family($config, body-2)
-          or typography-utils.font-family($config),
+    list-item-supporting-text-font: inspection.get-theme-typography($theme, body-2, font-family),
     // Line height of the list item supporting text.
-    list-item-supporting-text-line-height: typography-utils.line-height($config, body-2),
+    list-item-supporting-text-line-height:inspection.get-theme-typography(
+        $theme, body-2, line-height),
     // Font size of the list item supporting text.
-    list-item-supporting-text-size: typography-utils.font-size($config, body-2),
+    list-item-supporting-text-size: inspection.get-theme-typography($theme, body-2, font-size),
     // Letter spacing of the list item supporting text.
-    list-item-supporting-text-tracking: typography-utils.letter-spacing($config, body-2),
+    list-item-supporting-text-tracking: inspection.get-theme-typography(
+        $theme, body-2, letter-spacing),
     // Font weight of the list item supporting text.
-    list-item-supporting-text-weight: typography-utils.font-weight($config, body-2),
+    list-item-supporting-text-weight: inspection.get-theme-typography($theme, body-2, font-weight),
     // Font family of the list item's trailing text.
-    list-item-trailing-supporting-text-font: typography-utils.font-family($config, caption)
-          or typography-utils.font-family($config),
+    list-item-trailing-supporting-text-font: inspection.get-theme-typography(
+        $theme, caption, font-family),
     // Line height of the list item's trailing text.
-    list-item-trailing-supporting-text-line-height: typography-utils.line-height(
-        $config, caption),
+    list-item-trailing-supporting-text-line-height: inspection.get-theme-typography(
+        $theme, caption, line-height),
     // Font size of the list item's trailing text.
-    list-item-trailing-supporting-text-size: typography-utils.font-size($config, caption),
+    list-item-trailing-supporting-text-size: inspection.get-theme-typography(
+        $theme, caption, font-size),
     // Letter spacing color of the list item's trailing text.
-    list-item-trailing-supporting-text-tracking: typography-utils.letter-spacing(
-        $config, caption),
+    list-item-trailing-supporting-text-tracking: inspection.get-theme-typography(
+        $theme, caption, letter-spacing),
     // Font weight of the list item's trailing text.
-    list-item-trailing-supporting-text-weight: typography-utils.font-weight($config, caption),
+    list-item-trailing-supporting-text-weight: inspection.get-theme-typography(
+        $theme, caption, font-weight),
   );
 }
 
 // Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($config) {
-  $scale: theming.clamp-density($config, -5);
+@function get-density-tokens($theme) {
+  $scale: inspection.get-theme-density($theme);
 
   @return (
     // Height of one line list items.
diff --git a/src/material/core/tokens/m2/mdc/_radio.scss b/src/material/core/tokens/m2/mdc/_radio.scss
index 29879d95c986..d912bede9616 100644
--- a/src/material/core/tokens/m2/mdc/_radio.scss
+++ b/src/material/core/tokens/m2/mdc/_radio.scss
@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../../../theming/palette';
 @use '../../../theming/theming';
+@use '../../../theming/inspection';
 @use '../../../style/sass-utils';
 @use '../../token-utils';
 
@@ -41,10 +42,9 @@ $prefix: (mdc, radio);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
-  $accent: map.get($config, accent);
-  $is-dark: map.get($config, is-dark);
-  $accent-color: theming.get-color-from-palette($accent, default);
+@function get-color-tokens($theme, $palette-name: accent) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $palette-color: inspection.get-theme-color($theme, $palette-name, default);
   $on-surface: if($is-dark, #fff, #000);
   $icon-color: theming.get-color-from-palette(palette.$gray-palette, if($is-dark, 200, 900));
 
@@ -54,21 +54,21 @@ $prefix: (mdc, radio);
     unselected-hover-icon-color: $icon-color,
     unselected-icon-color: rgba($on-surface, 0.54),
     unselected-pressed-icon-color: rgba($on-surface, 0.54),
-    selected-focus-icon-color: $accent-color,
-    selected-hover-icon-color: $accent-color,
-    selected-icon-color: $accent-color,
-    selected-pressed-icon-color: $accent-color,
+    selected-focus-icon-color: $palette-color,
+    selected-hover-icon-color: $palette-color,
+    selected-icon-color: $palette-color,
+    selected-pressed-icon-color: $palette-color,
   );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
+@function get-typography-tokens($theme) {
   @return ();
 }
 
 // Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($config) {
-  $scale: theming.clamp-density($config, -3);
+@function get-density-tokens($theme) {
+  $scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
 
   @return (
     // The diameter of the radio's ripple.
diff --git a/src/material/core/tokens/m2/mdc/_slider.scss b/src/material/core/tokens/m2/mdc/_slider.scss
index dcf2aaae3a03..5527afd5856e 100644
--- a/src/material/core/tokens/m2/mdc/_slider.scss
+++ b/src/material/core/tokens/m2/mdc/_slider.scss
@@ -1,6 +1,8 @@
 @use 'sass:map';
 @use '../../../theming/theming';
+@use '../../../theming/inspection';
 @use '../../token-utils';
+@use '../../../style/elevation';
 @use '../../../style/sass-utils';
 @use '../../../typography/typography-utils';
 
@@ -56,15 +58,13 @@ $prefix: (mdc, slider);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
-  $foreground: map.get($config, foreground);
-  $elevation: theming.get-color-from-palette($foreground, elevation);
-  $is-dark: map.get($config, is-dark);
+@function get-color-tokens($theme) {
+  $elevation: inspection.get-theme-color($theme, foreground, elevation);
+  $is-dark: inspection.get-theme-type($theme) == dark;
   $on-surface: if($is-dark, #fff, #000);
 
   // The default for tokens that rely on the theme will use the primary palette
-  $primary: map.get($config, primary);
-  $theme-color-tokens: private-get-color-palette-color-tokens($primary);
+  $theme-color-tokens: private-get-color-palette-color-tokens($theme, primary);
 
   @return map.merge(
     $theme-color-tokens,
@@ -94,9 +94,9 @@ $prefix: (mdc, slider);
 }
 
 // Generates tokens for the slider properties that change based on the theme.
-@function private-get-color-palette-color-tokens($color-palette) {
-  $color: theming.get-color-from-palette($color-palette);
-  $on-color: map.get($color-palette, default-contrast);
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $color: inspection.get-theme-color($theme, $palette-name);
+  $on-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
 
   @return (
     // Color of handle.
@@ -117,28 +117,23 @@ $prefix: (mdc, slider);
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
-  @if ($config == null) {
-    $config: mdc-helpers.private-fallback-typography-from-mdc();
-  }
-
+@function get-typography-tokens($theme) {
   @return (
     // Font for label text.
-    label-label-text-font: typography-utils.font-family($config, subtitle-2)
-    or typography-utils.font-family($config),
+    label-label-text-font: inspection.get-theme-typography($theme, subtitle-2, font-family),
     // Font size of label text.
-    label-label-text-size: typography-utils.font-size($config, subtitle-2),
+    label-label-text-size: inspection.get-theme-typography($theme, subtitle-2, font-size),
     // Line height of label text.
-    label-label-text-line-height: typography-utils.line-height($config, subtitle-2),
+    label-label-text-line-height: inspection.get-theme-typography($theme, subtitle-2, line-height),
     // Letter spacing of label text.
-    label-label-text-tracking: typography-utils.letter-spacing($config, subtitle-2),
+    label-label-text-tracking: inspection.get-theme-typography($theme, subtitle-2, letter-spacing),
     // Font weight of label text.
-    label-label-text-weight: typography-utils.font-weight($config, subtitle-2),
+    label-label-text-weight: inspection.get-theme-typography($theme, subtitle-2, font-weight),
   );
 }
 
 // Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($config) {
+@function get-density-tokens($theme) {
   @return ();
 }
 
diff --git a/src/material/core/tokens/m2/mdc/_switch.scss b/src/material/core/tokens/m2/mdc/_switch.scss
index df5a23a46798..f8b6045a7535 100644
--- a/src/material/core/tokens/m2/mdc/_switch.scss
+++ b/src/material/core/tokens/m2/mdc/_switch.scss
@@ -2,6 +2,7 @@
 @use '../../../style/elevation';
 @use '../../../style/sass-utils';
 @use '../../../theming/theming';
+@use '../../../theming/inspection';
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -58,10 +59,9 @@ $prefix: (mdc, switch);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
-  $foreground: map.get($config, foreground);
-  $elevation: theming.get-color-from-palette($foreground, elevation);
-  $is-dark: map.get($config, is-dark);
+@function get-color-tokens($theme) {
+  $elevation: inspection.get-theme-color($theme, foreground, elevation);
+  $is-dark: inspection.get-theme-type($theme) == dark;
   $on-surface: if($is-dark, #f5f5f5, #424242);
   $hairline: if($is-dark, #616161, #e0e0e0);
   $on-surface-variant: if($is-dark, #9e9e9e, #616161);
@@ -70,10 +70,7 @@ $prefix: (mdc, switch);
   $icon-color: if($is-dark, #212121, #fff);
 
   // The default for tokens that rely on the theme will use the primary palette
-  $theme-color-tokens: private-get-color-palette-color-tokens(
-    map.get($config, primary),
-    $is-dark
-  );
+  $theme-color-tokens: private-get-color-palette-color-tokens($theme, primary);
 
   @return map.merge(
     $theme-color-tokens,
@@ -129,20 +126,21 @@ $prefix: (mdc, switch);
 }
 
 // Generates the mapping for the properties that change based on the slide toggle color.
-@function private-get-color-palette-color-tokens($color-palette, $is-dark) {
-  $primary: theming.get-color-from-palette($color-palette, if($is-dark, 300, 600));
-  $state-content: theming.get-color-from-palette($color-palette, if($is-dark, 200, 900));
-  $inverse: theming.get-color-from-palette($color-palette, if($is-dark, 600, 300));
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $palette-color: inspection.get-theme-color($theme, $palette-name, if($is-dark, 300, 600));
+  $state-content: inspection.get-theme-color($theme, $palette-name, if($is-dark, 200, 900));
+  $inverse: inspection.get-theme-color($theme, $palette-name, if($is-dark, 600, 300));
 
   @return (
     // Color of ripple when selected and focused.
-    selected-focus-state-layer-color: $primary,
+    selected-focus-state-layer-color: $palette-color,
     // Color of handle when selected
-    selected-handle-color: $primary,
+    selected-handle-color: $palette-color,
     // Color of ripple when selected and on hover.
-    selected-hover-state-layer-color: $primary,
+    selected-hover-state-layer-color: $palette-color,
     // Color of ripple when selected and pressed.
-    selected-pressed-state-layer-color: $primary,
+    selected-pressed-state-layer-color: $palette-color,
     // Color of handle when selected and focused.
     selected-focus-handle-color: $state-content,
     // Color of handle when selected and on hover.
@@ -161,12 +159,12 @@ $prefix: (mdc, switch);
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
+@function get-typography-tokens($theme) {
   @return ();
 }
 
 // Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($config) {
+@function get-density-tokens($theme) {
   @return ();
 }
 
diff --git a/src/material/core/typography/_definition.scss b/src/material/core/typography/_definition.scss
new file mode 100644
index 000000000000..22a9e8131961
--- /dev/null
+++ b/src/material/core/typography/_definition.scss
@@ -0,0 +1,258 @@
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
+@use '@material/typography' as mdc-typography;
+
+/// Defines a typography level from the Material Design spec.
+/// @param {String} $font-size The font-size for this level.
+/// @param {String | Number} $line-height The line-height for this level.
+/// @param {String | Number} $font-weight The font-weight for this level.
+/// @param {String} $font-family The font-family for this level.
+/// @param {String} $letter-spacing The letter-spacing for this level.
+/// @returns {Map} A map representing the definition of this typographic level.
+@function define-typography-level(
+  $font-size,
+  $line-height: $font-size,
+  $font-weight: 400,
+  $font-family: null,
+  $letter-spacing: normal) {
+
+  @return (
+    font-size: $font-size,
+    line-height: $line-height,
+    font-weight: $font-weight,
+    font-family: $font-family,
+    letter-spacing: $letter-spacing
+  );
+}
+
+/// Defines a collection of typography levels to configure typography for an application.
+/// Any level not specified defaults to the values defined in the Material Design specification:
+/// https://material.io/guidelines/style/typography.html.
+///
+/// Note that the Material Design specification does not describe explicit letter-spacing values.
+/// The values here come from reverse engineering the Material Design examples.
+/// @param {String} $font-family Default font-family for levels that don't specify font-family.
+/// @param {Map} $display-4 Configuration for the "display-4" typographic level.
+/// @param {Map} $display-3 Configuration for the "display-3" typographic level.
+/// @param {Map} $display-2 Configuration for the "display-2" typographic level.
+/// @param {Map} $display-1 Configuration for the "display-1" typographic level.
+/// @param {Map} $headline Configuration for the "headline" typographic level.
+/// @param {Map} $title Configuration for the "title" typographic level.
+/// @param {Map} $subheading-2 Configuration for the "subheading-2" typographic level.
+/// @param {Map} $subheading-1 Configuration for the "subheading-1" typographic level.
+/// @param {Map} $body-2 Configuration for the "body-2" typographic level.
+/// @param {Map} $body-1 Configuration for the "body-1" typographic level.
+/// @param {Map} $caption Configuration for the "caption" typographic level.
+/// @param {Map} $button Configuration for the "button" typographic level.
+/// @param {Map} $input Configuration for the "input" typographic level.
+/// @returns {Map} A typography config for the application.
+///
+/// @deprecated Use `mat.define-typography-config` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
+/// @breaking-change 17.0.0
+@function define-legacy-typography-config(
+  $font-family:   'Roboto, "Helvetica Neue", sans-serif',
+  $display-4:     define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
+  $display-3:     define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
+  $display-2:     define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
+  $display-1:     define-typography-level(34px, 40px, 400),
+  $headline:      define-typography-level(24px, 32px, 400),
+  $title:         define-typography-level(20px, 32px, 500),
+  $subheading-2:  define-typography-level(16px, 28px, 400),
+  $subheading-1:  define-typography-level(15px, 24px, 400),
+  $body-2:        define-typography-level(14px, 24px, 500),
+  $body-1:        define-typography-level(14px, 20px, 400),
+  $caption:       define-typography-level(12px, 20px, 400),
+  $button:        define-typography-level(14px, 14px, 500),
+  // Line-height must be unit-less fraction of the font-size.
+  $input:         define-typography-level(inherit, 1.125, 400)
+) {
+
+  // Declare an initial map with all of the levels.
+  $config: (
+    display-4:      $display-4,
+    display-3:      $display-3,
+    display-2:      $display-2,
+    display-1:      $display-1,
+    headline:       $headline,
+    title:          $title,
+    subheading-2:   $subheading-2,
+    subheading-1:   $subheading-1,
+    body-2:         $body-2,
+    body-1:         $body-1,
+    caption:        $caption,
+    button:         $button,
+    input:          $input,
+  );
+
+  // Loop through the levels and set the `font-family` of the ones that don't have one to the base.
+  // Note that Sass can't modify maps in place, which means that we need to merge and re-assign.
+  @each $key, $level in $config {
+    @if map.get($level, font-family) == null {
+      $new-level: map.merge($level, (font-family: $font-family));
+      $config: map.merge($config, ($key: $new-level));
+    }
+  }
+
+  // Add the base font family to the config.
+  @return map.merge($config, (font-family: $font-family));
+}
+
+/// Generates an Angular Material typography config based on values from the official Material
+/// Design spec implementation (MDC Web). All arguments are optional, but may be passed to override
+/// the default values. The `mat-typography-level` function can be used to generate a custom
+/// typography level map which can be passed to this function to override one of the default levels.
+/// All default typography sizing generated by this function is in `px` units.
+///
+/// @param {String} $font-family The font family to use for levels where it is not explicitly
+///     specified.
+/// @param {Map} $headline-1 The font settings for the headline-1 font level.
+/// @param {Map} $headline-2 The font settings for the headline-2 font level.
+/// @param {Map} $headline-3 The font settings for the headline-3 font level.
+/// @param {Map} $headline-4 The font settings for the headline-4 font level.
+/// @param {Map} $headline-5 The font settings for the headline-5 font level.
+/// @param {Map} $headline-6 The font settings for the headline-6 font level.
+/// @param {Map} $subtitle-1 The font settings for the subtitle-1 font level.
+/// @param {Map} $subtitle-2 The font settings for the subtitle-2 font level.
+/// @param {Map} $body-1 The font settings for the body-1 font level.
+/// @param {Map} $body-2 The font settings for the body-2 font level.
+/// @param {Map} $caption The font settings for the caption font level.
+/// @param {Map} $button The font settings for the button font level.
+/// @param {Map} $overline The font settings for the overline font level.
+/// @return {Map} A map containing font settings for each of the levels in the Material Design spec.
+@function define-typography-config(
+  // TODO(mmalerba): rename this function to define-typography-config,
+  //  and create a predefined px based config for people that need it.
+  $font-family: mdc-typography.$font-family,
+  $headline-1: null,
+  $headline-2: null,
+  $headline-3: null,
+  $headline-4: null,
+  $headline-5: null,
+  $headline-6: null,
+  $subtitle-1: null,
+  $subtitle-2: null,
+  $body-1: null,
+  $body-2: null,
+  $caption: null,
+  $button: null,
+  $overline: null,
+) {
+  @return _apply-font-family($font-family, (
+    headline-1: $headline-1 or _rem-to-px(typography-config-level-from-mdc(headline1)),
+    headline-2: $headline-2 or _rem-to-px(typography-config-level-from-mdc(headline2)),
+    headline-3: $headline-3 or _rem-to-px(typography-config-level-from-mdc(headline3)),
+    headline-4: $headline-4 or _rem-to-px(typography-config-level-from-mdc(headline4)),
+    headline-5: $headline-5 or _rem-to-px(typography-config-level-from-mdc(headline5)),
+    headline-6: $headline-6 or _rem-to-px(typography-config-level-from-mdc(headline6)),
+    subtitle-1: $subtitle-1 or _rem-to-px(typography-config-level-from-mdc(subtitle1)),
+    subtitle-2: $subtitle-2 or _rem-to-px(typography-config-level-from-mdc(subtitle2)),
+    body-1: $body-1 or _rem-to-px(typography-config-level-from-mdc(body1)),
+    body-2: $body-2 or _rem-to-px(typography-config-level-from-mdc(body2)),
+    caption: $caption or _rem-to-px(typography-config-level-from-mdc(caption)),
+    button: $button or _rem-to-px(typography-config-level-from-mdc(button)),
+    overline: $overline or _rem-to-px(typography-config-level-from-mdc(overline)),
+  ));
+}
+
+/// Generates an Angular Material typography config based on values from the official Material
+/// Design spec implementation (MDC Web). All arguments are optional, but may be passed to override
+/// the default values. The `mat-typography-level` function can be used to generate a custom
+/// typography level map which can be passed to this function to override one of the default levels.
+/// All default typography sizing generated by this function is in `rem` units.
+///
+/// @param {String} $font-family The font family to use for levels where it is not explicitly
+///     specified.
+/// @param {Map} $headline-1 The font settings for the headline-1 font level.
+/// @param {Map} $headline-2 The font settings for the headline-2 font level.
+/// @param {Map} $headline-3 The font settings for the headline-3 font level.
+/// @param {Map} $headline-4 The font settings for the headline-4 font level.
+/// @param {Map} $headline-5 The font settings for the headline-5 font level.
+/// @param {Map} $headline-6 The font settings for the headline-6 font level.
+/// @param {Map} $subtitle-1 The font settings for the subtitle-1 font level.
+/// @param {Map} $subtitle-2 The font settings for the subtitle-2 font level.
+/// @param {Map} $body-1 The font settings for the body-1 font level.
+/// @param {Map} $body-2 The font settings for the body-2 font level.
+/// @param {Map} $caption The font settings for the caption font level.
+/// @param {Map} $button The font settings for the button font level.
+/// @param {Map} $overline The font settings for the overline font level.
+/// @return {Map} A map containing font settings for each of the levels in the Material Design spec.
+@function define-rem-typography-config(
+  // TODO(mmalerba): rename this function to define-typography-config,
+  //  and create a predefined px based config for people that need it.
+  $font-family: mdc-typography.$font-family,
+  $headline-1: null,
+  $headline-2: null,
+  $headline-3: null,
+  $headline-4: null,
+  $headline-5: null,
+  $headline-6: null,
+  $subtitle-1: null,
+  $subtitle-2: null,
+  $body-1: null,
+  $body-2: null,
+  $caption: null,
+  $button: null,
+  $overline: null,
+) {
+  @return _apply-font-family($font-family, (
+    headline-1: $headline-1 or typography-config-level-from-mdc(headline1),
+    headline-2: $headline-2 or typography-config-level-from-mdc(headline2),
+    headline-3: $headline-3 or typography-config-level-from-mdc(headline3),
+    headline-4: $headline-4 or typography-config-level-from-mdc(headline4),
+    headline-5: $headline-5 or typography-config-level-from-mdc(headline5),
+    headline-6: $headline-6 or typography-config-level-from-mdc(headline6),
+    subtitle-1: $subtitle-1 or typography-config-level-from-mdc(subtitle1),
+    subtitle-2: $subtitle-2 or typography-config-level-from-mdc(subtitle2),
+    body-1: $body-1 or typography-config-level-from-mdc(body1),
+    body-2: $body-2 or typography-config-level-from-mdc(body2),
+    caption: $caption or typography-config-level-from-mdc(caption),
+    button: $button or typography-config-level-from-mdc(button),
+    overline: $overline or typography-config-level-from-mdc(overline),
+  ));
+}
+
+// Converts an MDC typography level config to an Angular Material one.
+@function typography-config-level-from-mdc($mdc-level, $font-family: null) {
+  $mdc-level-config: map.get(mdc-typography.$styles, $mdc-level);
+
+  // Explicitly default the font family to null since we'll apply it globally
+  // through the `define-typgraphy-config`/`define-legacy-typography-config`.
+  @return define-typography-level(
+    $font-family: $font-family,
+    $font-size: map.get($mdc-level-config, font-size),
+    $line-height: map.get($mdc-level-config, line-height),
+    $font-weight: map.get($mdc-level-config, font-weight),
+    $letter-spacing: map.get($mdc-level-config, letter-spacing)
+  );
+}
+
+// Converts a map containing rem values to a map containing px values.
+@function _rem-to-px($x, $px-per-rem: 16px) {
+  @if meta.type-of($x) == 'map' {
+    @each $key, $val in $x {
+      $x: map.merge($x, ($key: _rem-to-px($val)));
+    }
+    @return $x;
+  }
+  @if meta.type-of($x) == 'number' and math.unit($x) == 'rem' {
+    @return math.div($x, 1rem) * $px-per-rem;
+  }
+  @else {
+    @return $x;
+  }
+}
+
+// Applies the default font family to all levels in a typography config.
+@function _apply-font-family($font-family, $initial-config) {
+  $config: $initial-config;
+
+  @each $key, $level in $config {
+    @if map.get($level, 'font-family') == null {
+      // Sass maps are immutable so we have to re-assign the variable each time.
+      $config: map.set($config, $key, map.set($level, 'font-family', $font-family));
+    }
+  }
+
+  @return map.set($config, 'font-family', $font-family);
+}
diff --git a/src/material/core/typography/_property-getters.scss b/src/material/core/typography/_property-getters.scss
new file mode 100644
index 000000000000..fcd189808018
--- /dev/null
+++ b/src/material/core/typography/_property-getters.scss
@@ -0,0 +1,63 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+
+// Utility for fetching a nested value from a typography config.
+@function _mat-get-type-value($config, $level, $name) {
+  @if meta.type-of($config) != 'map' {
+    @error 'Typography config must be a map. Received #{meta.type-of($config)}.';
+  }
+
+  @if not map.has-key($config, $level) {
+    @error 'Typography config does not have a level called "#{$level}". ' +
+           'Available levels are: #{map.keys($config)}.';
+  }
+
+  @return map.get(map.get($config, $level), $name);
+}
+
+/// Gets the font size for a level inside a typography config.
+/// @param {Map} $config A typography config.
+/// @param {Map} $level A typography level.
+@function font-size($config, $level) {
+  @return _mat-get-type-value($config, $level, font-size);
+}
+
+/// Gets the line height for a level inside a typography config.
+/// @param {Map} $config A typography config.
+/// @param {Map} $level A typography level.
+@function line-height($config, $level) {
+  @return _mat-get-type-value($config, $level, line-height);
+}
+
+/// Gets the font weight for a level inside a typography config.
+/// @param {Map} $config A typography config.
+/// @param {Map} $level A typography level.
+@function font-weight($config, $level) {
+  @return _mat-get-type-value($config, $level, font-weight);
+}
+
+/// Gets the letter spacing for a level inside a typography config.
+/// @param {Map} $config A typography config.
+/// @param {Map} $level A typography level.
+@function letter-spacing($config, $level) {
+  @return _mat-get-type-value($config, $level, letter-spacing);
+}
+
+/// Gets the font-family from a typography config and removes the quotes around it.
+/// @param {Map} $config A typography config.
+/// @param {Map} $level A typography level.
+@function font-family($config, $level: null) {
+  @if meta.type-of($config) != 'map' {
+    @error 'Typography config must be a map. Received #{meta.type-of($config)}.';
+  }
+
+  $font-family: map.get($config, font-family);
+
+  @if $level != null {
+    $font-family: _mat-get-type-value($config, $level, font-family);
+  }
+
+  // Guard against unquoting non-string values, because it's deprecated.
+  @return if(meta.type-of($font-family) == string, string.unquote($font-family), $font-family);
+}
diff --git a/src/material/core/typography/_typography-utils.scss b/src/material/core/typography/_typography-utils.scss
index b82266b864bd..70295afa2117 100644
--- a/src/material/core/typography/_typography-utils.scss
+++ b/src/material/core/typography/_typography-utils.scss
@@ -3,67 +3,12 @@
 @use 'sass:math';
 @use 'sass:meta';
 @use 'sass:string';
+@use './property-getters';
+@use '../theming/inspection';
 
-
-// Utility for fetching a nested value from a typography config.
-@function _mat-get-type-value($config, $level, $name) {
-  @if meta.type-of($config) != 'map' {
-    @error 'Typography config must be a map. Received #{meta.type-of($config)}.';
-  }
-
-  @if not map.has-key($config, $level) {
-    @error 'Typography config does not have a level called "#{$level}". ' +
-           'Available levels are: #{map.keys($config)}.';
-  }
-
-  @return map.get(map.get($config, $level), $name);
-}
-
-/// Gets the font size for a level inside a typography config.
-/// @param {Map} $config A typography config.
-/// @param {Map} $level A typography level.
-@function font-size($config, $level) {
-  @return _mat-get-type-value($config, $level, font-size);
-}
-
-/// Gets the line height for a level inside a typography config.
-/// @param {Map} $config A typography config.
-/// @param {Map} $level A typography level.
-@function line-height($config, $level) {
-  @return _mat-get-type-value($config, $level, line-height);
-}
-
-/// Gets the font weight for a level inside a typography config.
-/// @param {Map} $config A typography config.
-/// @param {Map} $level A typography level.
-@function font-weight($config, $level) {
-  @return _mat-get-type-value($config, $level, font-weight);
-}
-
-/// Gets the letter spacing for a level inside a typography config.
-/// @param {Map} $config A typography config.
-/// @param {Map} $level A typography level.
-@function letter-spacing($config, $level) {
-  @return _mat-get-type-value($config, $level, letter-spacing);
-}
-
-/// Gets the font-family from a typography config and removes the quotes around it.
-/// @param {Map} $config A typography config.
-/// @param {Map} $level A typography level.
-@function font-family($config, $level: null) {
-  @if meta.type-of($config) != 'map' {
-    @error 'Typography config must be a map. Received #{meta.type-of($config)}.';
-  }
-
-  $font-family: map.get($config, font-family);
-
-  @if $level != null {
-    $font-family: _mat-get-type-value($config, $level, font-family);
-  }
-
-  // Guard against unquoting non-string values, because it's deprecated.
-  @return if(meta.type-of($font-family) == string, string.unquote($font-family), $font-family);
-}
+// Property getters live in their own file to avoid circular dependencies, but we re-export them
+// here so that historical imports from this file continue to work without needing to be updated.
+@forward './property-getters';
 
 /// Outputs the shorthand `font` CSS property, based on a set of typography values. Falls back to
 /// the individual properties if a value that isn't allowed in the shorthand is passed in.
@@ -102,12 +47,11 @@
   // we deliberately do not use the font shorthand here because it overrides
   // certain font properties that can't be configured in the current typography
   // config, e.g. the font-variant-caps or font-feature-settings property
-  font-size: font-size($config, $level);
-  font-weight: font-weight($config, $level);
-  line-height: line-height($config, $level);
-  font-family: font-family($config, $level);
-
-  letter-spacing: letter-spacing($config, $level);
+  font-size: property-getters.font-size($config, $level);
+  font-weight: property-getters.font-weight($config, $level);
+  line-height: property-getters.line-height($config, $level);
+  font-family: property-getters.font-family($config, $level);
+  letter-spacing: property-getters.letter-spacing($config, $level);
 }
 
 /// Coerce a value to `em` if it is a unitless number, otherwise returns
diff --git a/src/material/core/typography/_typography.scss b/src/material/core/typography/_typography.scss
index 5daff39e7c04..63cf3a076366 100644
--- a/src/material/core/typography/_typography.scss
+++ b/src/material/core/typography/_typography.scss
@@ -3,352 +3,21 @@
 @use 'sass:meta';
 @use 'typography-utils';
 @use '../theming/theming';
-@use '@material/typography' as mdc-typography;
-
-/// Defines a typography level from the Material Design spec.
-/// @param {String} $font-size The font-size for this level.
-/// @param {String | Number} $line-height The line-height for this level.
-/// @param {String | Number} $font-weight The font-weight for this level.
-/// @param {String} $font-family The font-family for this level.
-/// @param {String} $letter-spacing The letter-spacing for this level.
-/// @returns {Map} A map representing the definition of this typographic level.
-@function define-typography-level(
-  $font-size,
-  $line-height: $font-size,
-  $font-weight: 400,
-  $font-family: null,
-  $letter-spacing: normal) {
-
-  @return (
-    font-size: $font-size,
-    line-height: $line-height,
-    font-weight: $font-weight,
-    font-family: $font-family,
-    letter-spacing: $letter-spacing
-  );
-}
-
-/// Defines a collection of typography levels to configure typography for an application.
-/// Any level not specified defaults to the values defined in the Material Design specification:
-/// https://material.io/guidelines/style/typography.html.
-///
-/// Note that the Material Design specification does not describe explicit letter-spacing values.
-/// The values here come from reverse engineering the Material Design examples.
-/// @param {String} $font-family Default font-family for levels that don't specify font-family.
-/// @param {Map} $display-4 Configuration for the "display-4" typographic level.
-/// @param {Map} $display-3 Configuration for the "display-3" typographic level.
-/// @param {Map} $display-2 Configuration for the "display-2" typographic level.
-/// @param {Map} $display-1 Configuration for the "display-1" typographic level.
-/// @param {Map} $headline Configuration for the "headline" typographic level.
-/// @param {Map} $title Configuration for the "title" typographic level.
-/// @param {Map} $subheading-2 Configuration for the "subheading-2" typographic level.
-/// @param {Map} $subheading-1 Configuration for the "subheading-1" typographic level.
-/// @param {Map} $body-2 Configuration for the "body-2" typographic level.
-/// @param {Map} $body-1 Configuration for the "body-1" typographic level.
-/// @param {Map} $caption Configuration for the "caption" typographic level.
-/// @param {Map} $button Configuration for the "button" typographic level.
-/// @param {Map} $input Configuration for the "input" typographic level.
-/// @returns {Map} A typography config for the application.
-///
-/// @deprecated Use `mat.define-typography-config` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
-/// @breaking-change 17.0.0
-@function define-legacy-typography-config(
-  $font-family:   'Roboto, "Helvetica Neue", sans-serif',
-  $display-4:     define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
-  $display-3:     define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
-  $display-2:     define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
-  $display-1:     define-typography-level(34px, 40px, 400),
-  $headline:      define-typography-level(24px, 32px, 400),
-  $title:         define-typography-level(20px, 32px, 500),
-  $subheading-2:  define-typography-level(16px, 28px, 400),
-  $subheading-1:  define-typography-level(15px, 24px, 400),
-  $body-2:        define-typography-level(14px, 24px, 500),
-  $body-1:        define-typography-level(14px, 20px, 400),
-  $caption:       define-typography-level(12px, 20px, 400),
-  $button:        define-typography-level(14px, 14px, 500),
-  // Line-height must be unit-less fraction of the font-size.
-  $input:         define-typography-level(inherit, 1.125, 400)
-) {
-
-  // Declare an initial map with all of the levels.
-  $config: (
-    display-4:      $display-4,
-    display-3:      $display-3,
-    display-2:      $display-2,
-    display-1:      $display-1,
-    headline:       $headline,
-    title:          $title,
-    subheading-2:   $subheading-2,
-    subheading-1:   $subheading-1,
-    body-2:         $body-2,
-    body-1:         $body-1,
-    caption:        $caption,
-    button:         $button,
-    input:          $input,
-  );
-
-  // Loop through the levels and set the `font-family` of the ones that don't have one to the base.
-  // Note that Sass can't modify maps in place, which means that we need to merge and re-assign.
-  @each $key, $level in $config {
-    @if map.get($level, font-family) == null {
-      $new-level: map.merge($level, (font-family: $font-family));
-      $config: map.merge($config, ($key: $new-level));
-    }
-  }
-
-  // Add the base font family to the config.
-  @return map.merge($config, (font-family: $font-family));
-}
-
-// Converts a map containing rem values to a map containing px values.
-@function _rem-to-px($x, $px-per-rem: 16px) {
-  @if meta.type-of($x) == 'map' {
-    @each $key, $val in $x {
-      $x: map.merge($x, ($key: _rem-to-px($val)));
-    }
-    @return $x;
-  }
-  @if meta.type-of($x) == 'number' and math.unit($x) == 'rem' {
-    @return math.div($x, 1rem) * $px-per-rem;
-  }
-  @else {
-    @return $x;
-  }
-}
-
-// Applies the default font family to all levels in a typography config.
-@function _apply-font-family($font-family, $initial-config) {
-  $config: $initial-config;
-
-  @each $key, $level in $config {
-    @if map.get($level, 'font-family') == null {
-      // Sass maps are immutable so we have to re-assign the variable each time.
-      $config: map.set($config, $key, map.set($level, 'font-family', $font-family));
-    }
-  }
+@use './versioning';
 
-  @return map.set($config, 'font-family', $font-family);
-}
-
-// Converts an MDC typography level config to an Angular Material one.
-@function typography-config-level-from-mdc($mdc-level, $font-family: null) {
-  $mdc-level-config: map.get(mdc-typography.$styles, $mdc-level);
-
-  // Explicitly default the font family to null since we'll apply it globally
-  // through the `define-typgraphy-config`/`define-legacy-typography-config`.
-  @return define-typography-level(
-    $font-family: $font-family,
-    $font-size: map.get($mdc-level-config, font-size),
-    $line-height: map.get($mdc-level-config, line-height),
-    $font-weight: map.get($mdc-level-config, font-weight),
-    $letter-spacing: map.get($mdc-level-config, letter-spacing)
-  );
-}
-
-/// Generates an Angular Material typography config based on values from the official Material
-/// Design spec implementation (MDC Web). All arguments are optional, but may be passed to override
-/// the default values. The `mat-typography-level` function can be used to generate a custom
-/// typography level map which can be passed to this function to override one of the default levels.
-/// All default typography sizing generated by this function is in `px` units.
-///
-/// @param {String} $font-family The font family to use for levels where it is not explicitly
-///     specified.
-/// @param {Map} $headline-1 The font settings for the headline-1 font level.
-/// @param {Map} $headline-2 The font settings for the headline-2 font level.
-/// @param {Map} $headline-3 The font settings for the headline-3 font level.
-/// @param {Map} $headline-4 The font settings for the headline-4 font level.
-/// @param {Map} $headline-5 The font settings for the headline-5 font level.
-/// @param {Map} $headline-6 The font settings for the headline-6 font level.
-/// @param {Map} $subtitle-1 The font settings for the subtitle-1 font level.
-/// @param {Map} $subtitle-2 The font settings for the subtitle-2 font level.
-/// @param {Map} $body-1 The font settings for the body-1 font level.
-/// @param {Map} $body-2 The font settings for the body-2 font level.
-/// @param {Map} $caption The font settings for the caption font level.
-/// @param {Map} $button The font settings for the button font level.
-/// @param {Map} $overline The font settings for the overline font level.
-/// @return {Map} A map containing font settings for each of the levels in the Material Design spec.
-@function define-typography-config(
-  // TODO(mmalerba): rename this function to define-typography-config,
-  //  and create a predefined px based config for people that need it.
-  $font-family: mdc-typography.$font-family,
-  $headline-1: null,
-  $headline-2: null,
-  $headline-3: null,
-  $headline-4: null,
-  $headline-5: null,
-  $headline-6: null,
-  $subtitle-1: null,
-  $subtitle-2: null,
-  $body-1: null,
-  $body-2: null,
-  $caption: null,
-  $button: null,
-  $overline: null,
-) {
-  @return _apply-font-family($font-family, (
-    headline-1: $headline-1 or _rem-to-px(typography-config-level-from-mdc(headline1)),
-    headline-2: $headline-2 or _rem-to-px(typography-config-level-from-mdc(headline2)),
-    headline-3: $headline-3 or _rem-to-px(typography-config-level-from-mdc(headline3)),
-    headline-4: $headline-4 or _rem-to-px(typography-config-level-from-mdc(headline4)),
-    headline-5: $headline-5 or _rem-to-px(typography-config-level-from-mdc(headline5)),
-    headline-6: $headline-6 or _rem-to-px(typography-config-level-from-mdc(headline6)),
-    subtitle-1: $subtitle-1 or _rem-to-px(typography-config-level-from-mdc(subtitle1)),
-    subtitle-2: $subtitle-2 or _rem-to-px(typography-config-level-from-mdc(subtitle2)),
-    body-1: $body-1 or _rem-to-px(typography-config-level-from-mdc(body1)),
-    body-2: $body-2 or _rem-to-px(typography-config-level-from-mdc(body2)),
-    caption: $caption or _rem-to-px(typography-config-level-from-mdc(caption)),
-    button: $button or _rem-to-px(typography-config-level-from-mdc(button)),
-    overline: $overline or _rem-to-px(typography-config-level-from-mdc(overline)),
-  ));
-}
-
-/// Generates an Angular Material typography config based on values from the official Material
-/// Design spec implementation (MDC Web). All arguments are optional, but may be passed to override
-/// the default values. The `mat-typography-level` function can be used to generate a custom
-/// typography level map which can be passed to this function to override one of the default levels.
-/// All default typography sizing generated by this function is in `rem` units.
-///
-/// @param {String} $font-family The font family to use for levels where it is not explicitly
-///     specified.
-/// @param {Map} $headline-1 The font settings for the headline-1 font level.
-/// @param {Map} $headline-2 The font settings for the headline-2 font level.
-/// @param {Map} $headline-3 The font settings for the headline-3 font level.
-/// @param {Map} $headline-4 The font settings for the headline-4 font level.
-/// @param {Map} $headline-5 The font settings for the headline-5 font level.
-/// @param {Map} $headline-6 The font settings for the headline-6 font level.
-/// @param {Map} $subtitle-1 The font settings for the subtitle-1 font level.
-/// @param {Map} $subtitle-2 The font settings for the subtitle-2 font level.
-/// @param {Map} $body-1 The font settings for the body-1 font level.
-/// @param {Map} $body-2 The font settings for the body-2 font level.
-/// @param {Map} $caption The font settings for the caption font level.
-/// @param {Map} $button The font settings for the button font level.
-/// @param {Map} $overline The font settings for the overline font level.
-/// @return {Map} A map containing font settings for each of the levels in the Material Design spec.
-@function define-rem-typography-config(
-  // TODO(mmalerba): rename this function to define-typography-config,
-  //  and create a predefined px based config for people that need it.
-  $font-family: mdc-typography.$font-family,
-  $headline-1: null,
-  $headline-2: null,
-  $headline-3: null,
-  $headline-4: null,
-  $headline-5: null,
-  $headline-6: null,
-  $subtitle-1: null,
-  $subtitle-2: null,
-  $body-1: null,
-  $body-2: null,
-  $caption: null,
-  $button: null,
-  $overline: null,
-) {
-  @return _apply-font-family($font-family, (
-    headline-1: $headline-1 or typography-config-level-from-mdc(headline1),
-    headline-2: $headline-2 or typography-config-level-from-mdc(headline2),
-    headline-3: $headline-3 or typography-config-level-from-mdc(headline3),
-    headline-4: $headline-4 or typography-config-level-from-mdc(headline4),
-    headline-5: $headline-5 or typography-config-level-from-mdc(headline5),
-    headline-6: $headline-6 or typography-config-level-from-mdc(headline6),
-    subtitle-1: $subtitle-1 or typography-config-level-from-mdc(subtitle1),
-    subtitle-2: $subtitle-2 or typography-config-level-from-mdc(subtitle2),
-    body-1: $body-1 or typography-config-level-from-mdc(body1),
-    body-2: $body-2 or typography-config-level-from-mdc(body2),
-    caption: $caption or typography-config-level-from-mdc(caption),
-    button: $button or typography-config-level-from-mdc(button),
-    overline: $overline or typography-config-level-from-mdc(overline),
-  ));
-}
-
-// Whether a config is for the Material Design 2018 typography system.
-@function private-typography-is-2018-config($config) {
-  @return map.get($config, headline-1) != null;
-}
-
-// Whether a config is for the Material Design 2014 typography system.
-@function private-typography-is-2014-config($config) {
-  @return map.get($config, headline) != null;
-}
-
-// Given a config for either the 2014 or 2018 Material Design typography system,
-// produces a normalized typography config for the 2014 Material Design typography system.
-// 2014 - https://material.io/archive/guidelines/style/typography.html#typography-styles
-// 2018 - https://material.io/design/typography/the-type-system.html#type-scale
-//
-// Components using this function should be migrated to normalize to the 2018 style config instead.
-// New components should not use this function.
-@function private-typography-to-2014-config($config) {
-  @if $config == null {
-    @return null;
-  }
-  @if not private-typography-is-2014-config($config) {
-    $args: (
-        display-4: map.get($config, headline-1),
-        display-3: map.get($config, headline-2),
-        display-2: map.get($config, headline-3),
-        display-1: map.get($config, headline-4),
-        headline: map.get($config, headline-5),
-        title: map.get($config, headline-6),
-        subheading-2: map.get($config, subtitle-1),
-        subheading-1: map.get($config, subtitle-2),
-        body-2: map.get($config, body-1),
-        body-1: map.get($config, body-2),
-        button: map.get($config, button),
-        caption: map.get($config, caption),
-        font-family: map.get($config, font-family),
-    );
-    $non-null-args: ();
-    @each $key, $value in $args {
-      @if $value != null {
-        $non-null-args: map.merge($non-null-args, ($key: $value));
-      }
-    }
-    @return define-legacy-typography-config($non-null-args...);
-  }
-  @return $config;
-}
-
-// Given a config for either the 2014 or 2018 Material Design typography system,
-// produces a normalized typography config for the 2018 Material Design typography system.
-// 2014 - https://material.io/archive/guidelines/style/typography.html#typography-styles
-// 2018 - https://material.io/design/typography/the-type-system.html#type-scale
-@function private-typography-to-2018-config($config) {
-  @if $config == null {
-    @return null;
-  }
-  @if not private-typography-is-2018-config($config) {
-    @return (
-        headline-1: map.get($config, display-4),
-        headline-2: map.get($config, display-3),
-        headline-3: map.get($config, display-2),
-        headline-4: map.get($config, display-1),
-        headline-5: map.get($config, headline),
-        headline-6: map.get($config, title),
-        subtitle-1: map.get($config, subheading-2),
-        font-famiy: map.get($config, font-family),
-
-        // These mappings are odd, but body-2 in the 2014 system actually looks closer to subtitle-2
-        // in the 2018 system, and subeading-1 in the 2014 system looks more like body-1 in the 2018
-        // system.
-        subtitle-2: map.get($config, body-2),
-        body-1: map.get($config, subheading-1),
-
-        body-2: map.get($config, body-1),
-        button: map.get($config, button),
-        caption: map.get($config, caption),
-        overline: if(map.get($config, overline), map.get($config, overline),
-            define-typography-level(12px, 32px, 500)
-        )
-    );
-  }
-  @return $config;
-}
+// Definition and versioning functions live in their own files to avoid circular dependencies, but
+// we re-export them here so that historical imports from this file continue to work without needing
+// to be updated.
+@forward './definition';
+@forward './versioning';
 
 /// Emits baseline typographic styles based on a given config.
 /// @param {Map} $config-or-theme A typography config for an entire theme.
 /// @param {String} $selector Ancestor selector under which native elements, such as h1, will
 ///     be styled.
 @mixin typography-hierarchy($config-or-theme, $selector: '.mat-typography') {
-  $config: private-typography-to-2018-config(theming.get-typography-config($config-or-theme));
+  $config: versioning.private-typography-to-2018-config(
+      theming.get-typography-config($config-or-theme));
 
   // Note that it seems redundant to prefix the class rules with the `$selector`, however it's
   // necessary if we want to allow people to overwrite the tag selectors. This is due to
@@ -478,7 +147,8 @@
 /// @deprecated Use `mat.typography-hierarchy` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
 /// @breaking-change 17.0.0
 @mixin legacy-typography-hierarchy($config-or-theme, $selector: '.mat-typography') {
-  $config: private-typography-to-2014-config(theming.get-typography-config($config-or-theme));
+  $config: versioning.private-typography-to-2014-config(
+      theming.get-typography-config($config-or-theme));
 
   // Note that it seems redundant to prefix the class rules with the `$selector`, however it's
   // necessary if we want to allow people to overwrite the tag selectors. This is due to
diff --git a/src/material/core/typography/_versioning.scss b/src/material/core/typography/_versioning.scss
new file mode 100644
index 000000000000..592f32bb13ac
--- /dev/null
+++ b/src/material/core/typography/_versioning.scss
@@ -0,0 +1,86 @@
+@use 'sass:map';
+@use './definition';
+
+// Whether a config is for the Material Design 2018 typography system.
+@function private-typography-is-2018-config($config) {
+  @return map.get($config, headline-1) != null;
+}
+
+// Whether a config is for the Material Design 2014 typography system.
+@function private-typography-is-2014-config($config) {
+  @return map.get($config, headline) != null;
+}
+
+// Given a config for either the 2014 or 2018 Material Design typography system,
+// produces a normalized typography config for the 2014 Material Design typography system.
+// 2014 - https://material.io/archive/guidelines/style/typography.html#typography-styles
+// 2018 - https://material.io/design/typography/the-type-system.html#type-scale
+//
+// Components using this function should be migrated to normalize to the 2018 style config instead.
+// New components should not use this function.
+@function private-typography-to-2014-config($config) {
+  @if $config == null {
+    @return null;
+  }
+  @if not private-typography-is-2014-config($config) {
+    $args: (
+      display-4: map.get($config, headline-1),
+      display-3: map.get($config, headline-2),
+      display-2: map.get($config, headline-3),
+      display-1: map.get($config, headline-4),
+      headline: map.get($config, headline-5),
+      title: map.get($config, headline-6),
+      subheading-2: map.get($config, subtitle-1),
+      subheading-1: map.get($config, subtitle-2),
+      body-2: map.get($config, body-1),
+      body-1: map.get($config, body-2),
+      button: map.get($config, button),
+      caption: map.get($config, caption),
+      font-family: map.get($config, font-family),
+    );
+    $non-null-args: ();
+    @each $key, $value in $args {
+      @if $value != null {
+        $non-null-args: map.merge($non-null-args, ($key: $value));
+      }
+    }
+    @return definition.define-legacy-typography-config($non-null-args...);
+  }
+  @return $config;
+}
+
+// Given a config for either the 2014 or 2018 Material Design typography system,
+// produces a normalized typography config for the 2018 Material Design typography system.
+// 2014 - https://material.io/archive/guidelines/style/typography.html#typography-styles
+// 2018 - https://material.io/design/typography/the-type-system.html#type-scale
+@function private-typography-to-2018-config($config) {
+  @if $config == null {
+    @return null;
+  }
+  @if not private-typography-is-2018-config($config) {
+    @return (
+      headline-1: map.get($config, display-4),
+      headline-2: map.get($config, display-3),
+      headline-3: map.get($config, display-2),
+      headline-4: map.get($config, display-1),
+      headline-5: map.get($config, headline),
+      headline-6: map.get($config, title),
+      subtitle-1: map.get($config, subheading-2),
+      font-famiy: map.get($config, font-family),
+
+      // These mappings are odd, but body-2 in the 2014 system actually looks closer to subtitle-2
+      // in the 2018 system, and subeading-1 in the 2014 system looks more like body-1 in the 2018
+      // system.
+      subtitle-2: map.get($config, body-2),
+      body-1: map.get($config, subheading-1),
+
+      body-2: map.get($config, body-1),
+      button: map.get($config, button),
+      caption: map.get($config, caption),
+      overline: if(map.get($config, overline), map.get($config, overline),
+        definition.define-typography-level(12px, 32px, 500)
+      )
+    );
+  }
+  @return $config;
+}
diff --git a/src/material/input/_input-theme.scss b/src/material/input/_input-theme.scss
index 8eea9eede4f4..c375bf1ef78c 100644
--- a/src/material/input/_input-theme.scss
+++ b/src/material/input/_input-theme.scss
@@ -1,35 +1,24 @@
 @use '../core/theming/theming';
+@use '../core/theming/inspection';
 @use '../core/typography/typography';
 @use '../core/mdc-helpers/mdc-helpers';
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-  @include mdc-helpers.using-mdc-theme($config) {}
-}
+@mixin color($theme) {}
 
-@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) {}
 
-@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-input') {
-    $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);
     }
   }
 }
diff --git a/src/material/list/_list-theme.scss b/src/material/list/_list-theme.scss
index 2cc037bca894..7b0d459213a8 100644
--- a/src/material/list/_list-theme.scss
+++ b/src/material/list/_list-theme.scss
@@ -6,6 +6,7 @@
 
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
+@use '../core/theming/inspection';
 @use '../core/tokens/m2/mdc/checkbox' as tokens-mdc-checkbox;
 @use '../core/tokens/m2/mdc/radio' as tokens-mdc-radio;
 @use '../core/tokens/m2/mdc/list' as tokens-mdc-list;
@@ -19,16 +20,8 @@
   }
 }
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-  $primary: map.get($config, primary);
-  $accent: map.get($config, accent);
-  $warn: map.get($config, warn);
-  $mdc-list-color-tokens: tokens-mdc-list.get-color-tokens($config);
-  $inner-control-primary: map.merge($config, (accent: $primary));
-  $inner-control-accent: map.merge($config, (accent: $accent));
-  $inner-control-warn: map.merge($config, (accent: $warn));
-
+@mixin color($theme) {
+  $mdc-list-color-tokens: tokens-mdc-list.get-color-tokens($theme);
 
   // Add values for MDC list tokens.
   .mat-mdc-list-base {
@@ -37,37 +30,37 @@
 
   .mdc-list-item__start,
   .mdc-list-item__end {
-    @include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($inner-control-primary));
+    @include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme, primary));
   }
 
   .mat-accent {
     .mdc-list-item__start,
     .mdc-list-item__end {
-      @include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($inner-control-accent));
+      @include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme, accent));
     }
   }
 
   .mat-warn {
     .mdc-list-item__start,
     .mdc-list-item__end {
-      @include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($inner-control-warn));
+      @include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme, warn));
     }
   }
 
   .mat-mdc-list-option {
-    @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($inner-control-primary));
+    @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, primary));
   }
   .mat-mdc-list-option.mat-accent {
-    @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($inner-control-accent));
+    @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, accent));
   }
   .mat-mdc-list-option.mat-warn {
-    @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($inner-control-warn));
+    @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, warn));
   }
 
   // There is no token for activated color on nav list.
   // TODO(mmalerba): Add a token to MDC or make a custom one.
   .mat-mdc-list-base.mat-mdc-list-base {
-    @include evolution-mixins.list-selected-ink-color(theming.get-color-from-palette($primary));
+    @include evolution-mixins.list-selected-ink-color(inspection.get-theme-color($theme, primary));
   }
 
   // TODO(mmalerba): Leaking styles from the old MDC list mixins used in other components can cause
@@ -82,9 +75,9 @@
   }
 }
 
-@mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
-  $mdc-list-density-tokens: tokens-mdc-list.get-density-tokens($density-scale);
+@mixin density($theme) {
+  $density-scale: inspection.get-theme-density($theme);
+  $mdc-list-density-tokens: tokens-mdc-list.get-density-tokens($theme);
 
   // Add values for MDC list tokens.
   .mat-mdc-list-base {
@@ -94,7 +87,6 @@
   // TODO(mmalerba): This is added to maintain the same style MDC used prior to the token-based API,
   //  to avoid screenshot diffs. We should remove it in favor of following MDC's current style, or
   //  add custom tokens for it.
-  $clamped-density-scale: theming.clamp-density($density-scale, -5);
   .mat-mdc-list-item {
     &.mdc-list-item--with-leading-avatar,
     &.mdc-list-item--with-leading-checkbox,
@@ -107,7 +99,7 @@
             -3: 44px,
             -4: 40px,
             -5: 40px,
-        ), $clamped-density-scale);
+        ), $density-scale);
       }
 
       &.mdc-list-item--with-two-lines {
@@ -118,16 +110,14 @@
             -3: 60px,
             -4: 56px,
             -5: 56px,
-        ), $clamped-density-scale);
+        ), $density-scale);
       }
     }
   }
 }
 
-@mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
-  $mdc-list-typography-tokens: tokens-mdc-list.get-typography-tokens($config);
+@mixin typography($theme) {
+  $mdc-list-typography-tokens: tokens-mdc-list.get-typography-tokens($theme);
 
   // Add values for MDC list tokens.
   .mat-mdc-list-base {
@@ -137,26 +127,22 @@
   // MDC does not have tokens for the subheader.
   // TODO(mmalerba): Discuss with MDC about adding them, or create custom tokens.
   .mdc-list-group__subheader {
-    @include typography-utils.typography-level($config, subtitle-1);
+    font: inspection.get-theme-typography($theme, subtitle-1, font);
+    letter-spacing: inspection.get-theme-typography($theme, subtitle-1, letter-spacing);
   }
 }
 
-@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-list') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
-
     @include base($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);
     }
   }
 }
diff --git a/src/material/radio/_radio-theme.scss b/src/material/radio/_radio-theme.scss
index f6be0459969c..0a5c8815f180 100644
--- a/src/material/radio/_radio-theme.scss
+++ b/src/material/radio/_radio-theme.scss
@@ -3,19 +3,15 @@
 @use '@material/form-field' as mdc-form-field;
 @use '../core/mdc-helpers/mdc-helpers';
 @use '../core/theming/theming';
+@use '../core/theming/inspection';
 @use '../core/tokens/token-utils';
 @use '../core/typography/typography';
 @use '../core/tokens/m2/mdc/radio' as tokens-mdc-radio;
 @use '../core/tokens/m2/mat/radio' as tokens-mat-radio;
 @use 'sass:map';
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-  $primary: map.get($config, primary);
-  $accent: map.get($config, accent);
-  $warn: map.get($config, warn);
-
-  @include mdc-helpers.using-mdc-theme($config) {
+@mixin color($theme) {
+  @include mdc-helpers.using-mdc-theme($theme) {
     .mat-mdc-radio-button {
       @include mdc-form-field.core-styles($query: mdc-helpers.$mdc-theme-styles-query);
     }
@@ -23,44 +19,39 @@
 
   .mat-mdc-radio-button {
     &.mat-primary {
-      $primary-config: map.merge($config, (accent: $primary));
-      @include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($primary-config));
+      @include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme, primary));
       @include token-utils.create-token-values(tokens-mat-radio.$prefix,
-        tokens-mat-radio.get-color-tokens($primary-config));
+        tokens-mat-radio.get-color-tokens($theme, primary));
     }
 
     &.mat-accent {
-      $accent-config: map.merge($config, (accent: $accent));
-      @include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($accent-config));
+      @include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme));
       @include token-utils.create-token-values(tokens-mat-radio.$prefix,
-        tokens-mat-radio.get-color-tokens($accent-config));
+        tokens-mat-radio.get-color-tokens($theme));
     }
 
     &.mat-warn {
-      $warn-config: map.merge($config, (accent: $warn));
-      @include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($warn-config));
+      @include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme, warn));
       @include token-utils.create-token-values(tokens-mat-radio.$prefix,
-        tokens-mat-radio.get-color-tokens($warn-config));
+        tokens-mat-radio.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) {
   .mat-mdc-radio-button {
-    @include mdc-radio-theme.theme(tokens-mdc-radio.get-typography-tokens($config));
-    @include mdc-helpers.using-mdc-typography($config) {
+    @include mdc-radio-theme.theme(tokens-mdc-radio.get-typography-tokens($theme));
+    @include mdc-helpers.using-mdc-typography($theme) {
       @include mdc-form-field.core-styles($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: inspection.get-theme-density($theme);
+
   .mat-mdc-radio-button .mdc-radio {
-    @include mdc-radio-theme.theme(tokens-mdc-radio.get-density-tokens($density-scale));
+    @include mdc-radio-theme.theme(tokens-mdc-radio.get-density-tokens($theme));
   }
 
   @include mdc-helpers.if-touch-targets-unsupported($density-scale) {
@@ -70,21 +61,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-radio') {
-    $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);
     }
   }
 }
diff --git a/src/material/slide-toggle/_slide-toggle-theme.scss b/src/material/slide-toggle/_slide-toggle-theme.scss
index 8400964ec63f..07b9b3de8e0e 100644
--- a/src/material/slide-toggle/_slide-toggle-theme.scss
+++ b/src/material/slide-toggle/_slide-toggle-theme.scss
@@ -2,23 +2,18 @@
 @use '@material/switch/switch-theme' as mdc-switch-theme;
 @use '@material/form-field' as mdc-form-field;
 @use '../core/theming/theming';
+@use '../core/theming/inspection';
 @use '../core/mdc-helpers/mdc-helpers';
 @use '../core/typography/typography';
 @use '../core/tokens/m2/mdc/switch' as m2-mdc-switch;
 @use '../core/tokens/m2/mat/slide-toggle' as m2-mat-slide-toggle;
 @use '../core/tokens/token-utils';
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-  $primary: map.get($config, primary);
-  $accent: map.get($config, accent);
-  $warn: map.get($config, warn);
-  $is-dark: map.get($config, is-dark);
-  $foreground: map.get($config, foreground);
+@mixin color($theme) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $mdc-switch-color-tokens: m2-mdc-switch.get-color-tokens($theme);
 
-  $mdc-switch-color-tokens: m2-mdc-switch.get-color-tokens($config);
-
-  @include mdc-helpers.using-mdc-theme($config) {
+  @include mdc-helpers.using-mdc-theme($theme) {
     // Add values for MDC slide toggles tokens
     .mat-mdc-slide-toggle {
       @include mdc-form-field.core-styles($query: mdc-helpers.$mdc-theme-styles-query);
@@ -26,32 +21,26 @@
 
       // MDC should set the disabled color on the label, but doesn't, so we do it here instead.
       .mdc-switch--disabled + label {
-        color: theming.get-color-from-palette($foreground, disabled-text);
+        color: inspection.get-theme-color($theme, foreground, disabled-text);
       }
 
       // Change the color palette related tokens to accent or warn if applicable
       &.mat-accent {
-        @include mdc-switch-theme.theme(m2-mdc-switch.private-get-color-palette-color-tokens(
-          map.get($config, accent),
-          map.get($config, is-dark)
-        ));
+        @include mdc-switch-theme.theme(
+            m2-mdc-switch.private-get-color-palette-color-tokens($theme, accent));
       }
 
       &.mat-warn {
-        @include mdc-switch-theme.theme(m2-mdc-switch.private-get-color-palette-color-tokens(
-          map.get($config, warn),
-          map.get($config, is-dark)
-        ));
+        @include mdc-switch-theme.theme(
+            m2-mdc-switch.private-get-color-palette-color-tokens($theme, warn));
       }
     }
   }
 }
 
-@mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
-  $mdc-switch-typography-tokens: m2-mdc-switch.get-typography-tokens($config);
-  $mat-slide-toggle-typography-tokens: m2-mat-slide-toggle.get-typography-tokens($config);
+@mixin typography($theme) {
+  $mdc-switch-typography-tokens: m2-mdc-switch.get-typography-tokens($theme);
+  $mat-slide-toggle-typography-tokens: m2-mat-slide-toggle.get-typography-tokens($theme);
 
   //Add values for MDC slide toggle tokens
   .mat-mdc-slide-toggle {
@@ -64,29 +53,24 @@
   }
 }
 
-@mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+@mixin density($theme) {
+  $density-scale: inspection.get-theme-density($theme);
+
   .mat-mdc-slide-toggle {
     @include mdc-switch-theme.theme(mdc-switch-theme.density($density-scale));
   }
 }
 
-@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-slide-toggle') {
-    $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);
     }
   }
 }
diff --git a/src/material/slider/_slider-theme.scss b/src/material/slider/_slider-theme.scss
index dda4e6d124db..5cae3c9b7bb5 100644
--- a/src/material/slider/_slider-theme.scss
+++ b/src/material/slider/_slider-theme.scss
@@ -2,102 +2,87 @@
 
 @use '@material/slider/slider-theme' as mdc-slider-theme;
 @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/slider' as m2-mat-slider;
 @use '../core/tokens/m2/mdc/slider' as m2-mdc-slider;
 
-@mixin base($config-or-theme) {
+@mixin base($theme) {
   // Add default values for tokens not related to color, typography, or density.
   @include sass-utils.current-selector-or-root() {
     @include mdc-slider-theme.theme(m2-mdc-slider.get-unthemable-tokens());
   }
 }
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-  $is-dark: map.get($config, is-dark);
+@mixin color($theme) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
 
   $mdc-color-tokens: token-utils.resolve-elevation(
-    m2-mdc-slider.get-color-tokens($config),
+    m2-mdc-slider.get-color-tokens($theme),
     handle-elevation,
     handle-shadow-color
   );
 
-  $mat-slider-color-tokens: m2-mat-slider.get-color-tokens($config);
+  $mat-slider-color-tokens: m2-mat-slider.get-color-tokens($theme);
 
   // Add values for MDC slider tokens.
   .mat-mdc-slider {
     @include mdc-slider-theme.theme($mdc-color-tokens);
-    @include _slider-ripple-color(map.get($config, primary));
+    @include _slider-ripple-color($theme, primary);
     @include token-utils.create-token-values(
       m2-mat-slider.$prefix,
       $mat-slider-color-tokens
     );
 
     &.mat-accent {
-      $accent: map.get($config, accent);
       @include mdc-slider-theme.theme(
-        m2-mdc-slider.private-get-color-palette-color-tokens($accent)
-      );
-      @include _slider-ripple-color($accent);
+          m2-mdc-slider.private-get-color-palette-color-tokens($theme, accent));
+      @include _slider-ripple-color($theme, accent);
     }
 
     &.mat-warn {
-      $warn: map.get($config, warn);
       @include mdc-slider-theme.theme(
-        m2-mdc-slider.private-get-color-palette-color-tokens($warn)
-      );
-      @include _slider-ripple-color($warn);
+          m2-mdc-slider.private-get-color-palette-color-tokens($theme, warn));
+      @include _slider-ripple-color($theme, warn);
     }
   }
 }
 
-@mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
-  $mdc-typography-tokens: m2-mdc-slider.get-typography-tokens($config);
-
+@mixin typography($theme) {
   // Add values for MDC slider tokens.
   .mat-mdc-slider {
-    @include mdc-slider-theme.theme($mdc-typography-tokens);
+    @include mdc-slider-theme.theme(m2-mdc-slider.get-typography-tokens($theme));
   }
 }
 
-@mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
-  $mdc-density-tokens: m2-mdc-slider.get-density-tokens($density-scale);
-
+@mixin density($theme) {
   // Add values for MDC slider tokens.
   .mat-mdc-slider {
-    @include mdc-slider-theme.theme($mdc-density-tokens);
+    @include mdc-slider-theme.theme(m2-mdc-slider.get-density-tokens($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-slider') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
-
     @include base($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);
     }
   }
 }
 
 // Generated MDC ripple color tokens are not being calculated so needs to be set
-@mixin _slider-ripple-color($color-palette) {
-  $color: theming.get-color-from-palette($color-palette);
+@mixin _slider-ripple-color($theme, $palette-name) {
+  $color: inspection.get-theme-color($theme, $palette-name);
+
   --mat-mdc-slider-ripple-color: #{$color};
   --mat-mdc-slider-hover-ripple-color: #{rgba($color, 0.05)};
   --mat-mdc-slider-focus-ripple-color: #{rgba($color, 0.2)};

From 733a1953506d41dec0ca663d51c9f541f0daab0c Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Mon, 28 Aug 2023 16:26:22 +0000
Subject: [PATCH 2/3] refactor(multiple): convert components to theme
 inspection API

Converts: button, icon-button, fab, paginator.
---
 src/material/button/_button-base.scss         |  6 +-
 .../button/_button-theme-private.scss         |  5 +-
 src/material/button/_button-theme.scss        | 42 +++++-----
 src/material/button/_fab-theme.scss           | 79 ++++++++-----------
 src/material/button/_icon-button-theme.scss   | 44 +++++------
 .../core/tokens/m2/mat/_paginator.scss        | 33 ++++----
 .../core/tokens/m2/mdc/_extended-fab.scss     | 23 ++----
 src/material/core/tokens/m2/mdc/_fab.scss     | 12 +--
 .../core/tokens/m2/mdc/_icon-button.scss      |  2 +-
 src/material/paginator/_paginator-theme.scss  | 39 ++++-----
 10 files changed, 120 insertions(+), 165 deletions(-)

diff --git a/src/material/button/_button-base.scss b/src/material/button/_button-base.scss
index 088155c88b5d..285370cf0752 100644
--- a/src/material/button/_button-base.scss
+++ b/src/material/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,
diff --git a/src/material/button/_button-theme-private.scss b/src/material/button/_button-theme-private.scss
index 1db72e92dd49..4889e5b5c41d 100644
--- a/src/material/button/_button-theme-private.scss
+++ b/src/material/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.
diff --git a/src/material/button/_button-theme.scss b/src/material/button/_button-theme.scss
index 3b55060891af..7c2e7506c5e8 100644
--- a/src/material/button/_button-theme.scss
+++ b/src/material/button/_button-theme.scss
@@ -10,6 +10,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 +39,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 +174,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 +204,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);
     }
   }
 }
diff --git a/src/material/button/_fab-theme.scss b/src/material/button/_fab-theme.scss
index 2865653cf25a..c633be53094e 100644
--- a/src/material/button/_fab-theme.scss
+++ b/src/material/button/_fab-theme.scss
@@ -7,11 +7,12 @@
 @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 base($config-or-theme) {
+@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());
@@ -21,17 +22,11 @@
   }
 }
 
-@mixin _fab-variant($config, $foreground, $background) {
-  $color-config: map.merge(
-    $config,
-    (
-      primary: (
-        default: $background,
-        default-contrast: $foreground,
-      ),
-    )
+@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};
@@ -41,16 +36,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);
+@mixin color($theme) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
 
-  $is-dark: map.get($config, is-dark);
-  $background: map.get($config, background);
-
-  $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);
@@ -58,73 +50,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);
-
     @include base($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);
     }
   }
 }
diff --git a/src/material/button/_icon-button-theme.scss b/src/material/button/_icon-button-theme.scss
index 9123fff0533f..34ab1eb40e42 100644
--- a/src/material/button/_icon-button-theme.scss
+++ b/src/material/button/_icon-button-theme.scss
@@ -7,6 +7,7 @@
 
 @use './button-theme-private';
 @use '../core/theming/theming';
+@use '../core/theming/inspection';
 
 $_icon-size: 24px;
 
@@ -23,33 +24,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 +63,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 +103,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);
     }
   }
 }
diff --git a/src/material/core/tokens/m2/mat/_paginator.scss b/src/material/core/tokens/m2/mat/_paginator.scss
index e5a3344d396c..00e8dedac593 100644
--- a/src/material/core/tokens/m2/mat/_paginator.scss
+++ b/src/material/core/tokens/m2/mat/_paginator.scss
@@ -2,6 +2,7 @@
 @use '../../token-utils';
 @use '../../../typography/typography-utils';
 @use '../../../theming/theming';
+@use '../../../theming/inspection';
 @use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -14,34 +15,32 @@ $prefix: (mat, paginator);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
-  $foreground: map.get($config, foreground);
-  $background: map.get($config, background);
+@function get-color-tokens($theme) {
+  $foreground-base: inspection.get-theme-color($theme, foreground, base);
 
   @return (
-    container-text-color: theming.get-color-from-palette($foreground, base, 0.87),
-    container-background-color: theming.get-color-from-palette($background, card),
-    enabled-icon-color: theming.get-color-from-palette($foreground, base, 0.54),
-    disabled-icon-color: theming.get-color-from-palette($foreground, base, 0.12),
+    container-text-color: sass-utils.safe-color-change($foreground-base, $alpha: 0.87),
+    container-background-color: inspection.get-theme-color($theme, background, card),
+    enabled-icon-color: sass-utils.safe-color-change($foreground-base, $alpha: 0.54),
+    disabled-icon-color: sass-utils.safe-color-change($foreground-base, $alpha: 0.12),
   );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
+@function get-typography-tokens($theme) {
   @return (
-    container-text-font: typography-utils.font-family($config, caption) or
-      typography-utils.font-family($config),
-    container-text-line-height: typography-utils.line-height($config, caption),
-    container-text-size: typography-utils.font-size($config, caption),
-    container-text-tracking: typography-utils.letter-spacing($config, caption),
-    container-text-weight: typography-utils.font-weight($config, caption),
-    select-trigger-text-size: typography-utils.font-size($config, caption),
+    container-text-font: inspection.get-theme-typography($theme, caption, font-family),
+    container-text-line-height: inspection.get-theme-typography($theme, caption, line-height),
+    container-text-size: inspection.get-theme-typography($theme, caption, font-size),
+    container-text-tracking: inspection.get-theme-typography($theme, caption, letter-spacing),
+    container-text-weight: inspection.get-theme-typography($theme, caption, font-weight),
+    select-trigger-text-size: inspection.get-theme-typography($theme, caption, font-size),
   );
 }
 
 // Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($config) {
-  $density-scale: theming.clamp-density($config, -3);
+@function get-density-tokens($theme) {
+  $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
   $size-scale: (
     0: 56px,
     -1: 52px,
diff --git a/src/material/core/tokens/m2/mdc/_extended-fab.scss b/src/material/core/tokens/m2/mdc/_extended-fab.scss
index b2cfe8eb641a..5e32dcff2f24 100644
--- a/src/material/core/tokens/m2/mdc/_extended-fab.scss
+++ b/src/material/core/tokens/m2/mdc/_extended-fab.scss
@@ -1,6 +1,7 @@
 @use '../../../mdc-helpers/mdc-helpers';
 @use '../../token-utils';
 @use '../../../typography/typography-utils';
+@use '../../../theming/inspection';
 
 @use 'sass:map';
 
@@ -45,30 +46,22 @@ $prefix: (mdc, extended-fab);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
+@function get-color-tokens($theme) {
   @return ();
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
-  // TODO(wagnermaciel): The earlier implementation of the snack bar used MDC's APIs to create the
-  // typography tokens. As a result, we unintentionally allowed `null` typography configs to be
-  // passed in. Since there a lot of apps that now depend on this pattern, we need this temporary
-  // fallback.
-  @if ($config == null) {
-    $config: mdc-helpers.private-fallback-typography-from-mdc();
-  }
+@function get-typography-tokens($theme) {
   @return (
-    label-text-font: typography-utils.font-family($config, button) or
-      typography-utils.font-family($config),
-    label-text-size: typography-utils.font-size($config, button),
-    label-text-tracking: typography-utils.letter-spacing($config, button),
-    label-text-weight: typography-utils.font-weight($config, button)
+    label-text-font: inspection.get-theme-typography($theme, button, font-family),
+    label-text-size: inspection.get-theme-typography($theme, button, font-size),
+    label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing),
+    label-text-weight: inspection.get-theme-typography($theme, button, font-weight)
   );
 }
 
 // Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($config) {
+@function get-density-tokens($theme) {
   @return ();
 }
 
diff --git a/src/material/core/tokens/m2/mdc/_fab.scss b/src/material/core/tokens/m2/mdc/_fab.scss
index 7bad5c91d02a..a7ffbbefccbc 100644
--- a/src/material/core/tokens/m2/mdc/_fab.scss
+++ b/src/material/core/tokens/m2/mdc/_fab.scss
@@ -1,4 +1,5 @@
 @use '../../../theming/theming';
+@use '../../../theming/inspection';
 @use '../../token-utils';
 
 @use 'sass:map';
@@ -55,21 +56,20 @@ $ripple-target: '.mdc-fab__ripple';
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
-  $primary: map.get($config, primary);
-  $surface: theming.get-color-from-palette($primary, default);
-  $on-surface: theming.get-color-from-palette($primary, default-contrast);
+@function get-color-tokens($theme) {
+  $surface: inspection.get-theme-color($theme, primary, default);
+  $on-surface: inspection.get-theme-color($theme, primary, default-contrast);
 
   @return (container-color: $surface, icon-color: $on-surface);
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
+@function get-typography-tokens($theme) {
   @return ();
 }
 
 // Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($config) {
+@function get-density-tokens($theme) {
   @return ();
 }
 
diff --git a/src/material/core/tokens/m2/mdc/_icon-button.scss b/src/material/core/tokens/m2/mdc/_icon-button.scss
index 3d7c33de437c..ee89b90cc731 100644
--- a/src/material/core/tokens/m2/mdc/_icon-button.scss
+++ b/src/material/core/tokens/m2/mdc/_icon-button.scss
@@ -43,7 +43,7 @@ $prefix: (mdc, icon-button);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
+@function get-color-tokens($theme) {
   @return (
     icon-color: inherit,
   );
diff --git a/src/material/paginator/_paginator-theme.scss b/src/material/paginator/_paginator-theme.scss
index e40951379579..9a1c9ebb61c9 100644
--- a/src/material/paginator/_paginator-theme.scss
+++ b/src/material/paginator/_paginator-theme.scss
@@ -3,34 +3,30 @@
 @use '../core/style/sass-utils';
 @use '../core/typography/typography';
 @use '../core/theming/theming';
+@use '../core/theming/inspection';
 @use '../core/tokens/token-utils';
 @use '../form-field/form-field-density';
 
-@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-paginator.$prefix,
-      tokens-mat-paginator.get-color-tokens($config));
+      tokens-mat-paginator.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-paginator.$prefix,
-      tokens-mat-paginator.get-typography-tokens($config));
+      tokens-mat-paginator.get-typography-tokens($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);
 
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-paginator.$prefix,
-      tokens-mat-paginator.get-density-tokens($density-scale));
+      tokens-mat-paginator.get-density-tokens($theme));
   }
 
   // TODO: this should be done through tokens once the form field has been switched over.
@@ -47,21 +43,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-paginator') {
-    $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);
     }
   }
 }

From 776cfc69b9f016a7e84328417fa039ae465b7fe4 Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Mon, 28 Aug 2023 16:59:59 +0000
Subject: [PATCH 3/3] build: fix lint

---
 .stylelintrc.json                                   | 12 +++++++++++-
 src/material/autocomplete/autocomplete.ts           | 11 +++++++----
 src/material/button/_button-theme.scss              |  1 -
 src/material/button/_fab-theme.scss                 |  1 -
 src/material/button/_icon-button-theme.scss         |  1 -
 src/material/core/mdc-helpers/_mdc-helpers.scss     |  3 ---
 src/material/core/theming/_m2-inspection.scss       |  2 +-
 src/material/core/tokens/m2/mat/_paginator.scss     |  1 -
 src/material/core/tokens/m2/mat/_radio.scss         |  2 --
 src/material/core/tokens/m2/mat/_slide-toggle.scss  |  1 -
 src/material/core/tokens/m2/mat/_slider.scss        |  1 -
 src/material/core/tokens/m2/mdc/_extended-fab.scss  |  2 --
 src/material/core/tokens/m2/mdc/_fab.scss           |  1 -
 src/material/core/tokens/m2/mdc/_list.scss          |  2 --
 src/material/core/tokens/m2/mdc/_slider.scss        |  2 --
 src/material/core/tokens/m2/mdc/_switch.scss        |  1 -
 src/material/core/typography/_typography-utils.scss |  4 ----
 src/material/core/typography/_typography.scss       |  3 ---
 src/material/input/_input-theme.scss                |  1 -
 src/material/list/_list-theme.scss                  |  1 -
 src/material/radio/_radio-theme.scss                |  1 -
 src/material/slide-toggle/_slide-toggle-theme.scss  |  1 -
 src/material/slider/_slider-theme.scss              |  2 --
 23 files changed, 19 insertions(+), 38 deletions(-)

diff --git a/.stylelintrc.json b/.stylelintrc.json
index 7e0b17c91a70..f0267172a95d 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -147,14 +147,24 @@
   "overrides": [
     {
       "files": [
+        "**/_button-theme.scss",
         "**/_card-theme.scss",
+        "**/_checkbox-theme.scss",
         "**/_core-theme.scss",
+        "**/_fab-theme.scss",
         "**/_form-field-theme.scss",
+        "**/_icon-button-theme.scss",
+        "**/_input-theme.scss",
+        "**/_list-theme.scss",
         "**/_optgroup-theme.scss",
         "**/_option-theme.scss",
+        "**/_paginator-theme.scss",
         "**/_progress-bar-theme.scss",
         "**/_pseudo-checkbox-theme.scss",
-        "**/_ripple-theme.scss"
+        "**/_radio-theme.scss",
+        "**/_ripple-theme.scss",
+        "**/_slide-toggle-theme.scss",
+        "**/_slider-theme.scss"
       ],
       "rules": {
         "material/theme-mixin-api": false
diff --git a/src/material/autocomplete/autocomplete.ts b/src/material/autocomplete/autocomplete.ts
index 33a436245470..48e6adc54230 100644
--- a/src/material/autocomplete/autocomplete.ts
+++ b/src/material/autocomplete/autocomplete.ts
@@ -250,10 +250,13 @@ export class MatAutocomplete
   @Input('class')
   set classList(value: string | string[]) {
     if (value && value.length) {
-      this._classList = coerceStringArray(value).reduce((classList, className) => {
-        classList[className] = true;
-        return classList;
-      }, {} as {[key: string]: boolean});
+      this._classList = coerceStringArray(value).reduce(
+        (classList, className) => {
+          classList[className] = true;
+          return classList;
+        },
+        {} as {[key: string]: boolean},
+      );
     } else {
       this._classList = {};
     }
diff --git a/src/material/button/_button-theme.scss b/src/material/button/_button-theme.scss
index 7c2e7506c5e8..f3385a051e92 100644
--- a/src/material/button/_button-theme.scss
+++ b/src/material/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;
diff --git a/src/material/button/_fab-theme.scss b/src/material/button/_fab-theme.scss
index c633be53094e..f96189d2cee3 100644
--- a/src/material/button/_fab-theme.scss
+++ b/src/material/button/_fab-theme.scss
@@ -1,4 +1,3 @@
-@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;
diff --git a/src/material/button/_icon-button-theme.scss b/src/material/button/_icon-button-theme.scss
index 34ab1eb40e42..37db62a952be 100644
--- a/src/material/button/_icon-button-theme.scss
+++ b/src/material/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;
diff --git a/src/material/core/mdc-helpers/_mdc-helpers.scss b/src/material/core/mdc-helpers/_mdc-helpers.scss
index ec3ce9c366fe..e54487469eeb 100644
--- a/src/material/core/mdc-helpers/_mdc-helpers.scss
+++ b/src/material/core/mdc-helpers/_mdc-helpers.scss
@@ -1,10 +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;
diff --git a/src/material/core/theming/_m2-inspection.scss b/src/material/core/theming/_m2-inspection.scss
index b7d5d39dfce7..64b7b86ca633 100644
--- a/src/material/core/theming/_m2-inspection.scss
+++ b/src/material/core/theming/_m2-inspection.scss
@@ -6,7 +6,7 @@
 @use '../typography/versioning' as typography-versioning;
 
 /// Key used to access the Angular Material theme internals.
-$_internals: _mat-theming-internals-do-not-accesst;
+$_internals: _mat-theming-internals-do-not-access;
 
 /// Keys that indicate a config object is a color config.
 $_color-keys: (
diff --git a/src/material/core/tokens/m2/mat/_paginator.scss b/src/material/core/tokens/m2/mat/_paginator.scss
index 00e8dedac593..257f3b35e1d2 100644
--- a/src/material/core/tokens/m2/mat/_paginator.scss
+++ b/src/material/core/tokens/m2/mat/_paginator.scss
@@ -1,6 +1,5 @@
 @use 'sass:map';
 @use '../../token-utils';
-@use '../../../typography/typography-utils';
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
diff --git a/src/material/core/tokens/m2/mat/_radio.scss b/src/material/core/tokens/m2/mat/_radio.scss
index ddefae7bb4bb..78cfe308d876 100644
--- a/src/material/core/tokens/m2/mat/_radio.scss
+++ b/src/material/core/tokens/m2/mat/_radio.scss
@@ -1,6 +1,4 @@
-@use 'sass:map';
 @use '../../token-utils';
-@use '../../../theming/theming';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
 
diff --git a/src/material/core/tokens/m2/mat/_slide-toggle.scss b/src/material/core/tokens/m2/mat/_slide-toggle.scss
index a0a6cc1f63ab..fe1355cbe825 100644
--- a/src/material/core/tokens/m2/mat/_slide-toggle.scss
+++ b/src/material/core/tokens/m2/mat/_slide-toggle.scss
@@ -1,7 +1,6 @@
 @use '../../token-utils';
 @use '../../../style/sass-utils';
 @use '../../../theming/inspection';
-@use '../../../typography/typography-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, slide-toggle);
diff --git a/src/material/core/tokens/m2/mat/_slider.scss b/src/material/core/tokens/m2/mat/_slider.scss
index 1e0165422c1f..e74aa342deff 100644
--- a/src/material/core/tokens/m2/mat/_slider.scss
+++ b/src/material/core/tokens/m2/mat/_slider.scss
@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use '../../token-utils';
 @use '../../../style/sass-utils';
 @use '../../../theming/inspection';
diff --git a/src/material/core/tokens/m2/mdc/_extended-fab.scss b/src/material/core/tokens/m2/mdc/_extended-fab.scss
index 5e32dcff2f24..45a535ae863a 100644
--- a/src/material/core/tokens/m2/mdc/_extended-fab.scss
+++ b/src/material/core/tokens/m2/mdc/_extended-fab.scss
@@ -1,6 +1,4 @@
-@use '../../../mdc-helpers/mdc-helpers';
 @use '../../token-utils';
-@use '../../../typography/typography-utils';
 @use '../../../theming/inspection';
 
 @use 'sass:map';
diff --git a/src/material/core/tokens/m2/mdc/_fab.scss b/src/material/core/tokens/m2/mdc/_fab.scss
index a7ffbbefccbc..d108f56ea574 100644
--- a/src/material/core/tokens/m2/mdc/_fab.scss
+++ b/src/material/core/tokens/m2/mdc/_fab.scss
@@ -1,4 +1,3 @@
-@use '../../../theming/theming';
 @use '../../../theming/inspection';
 @use '../../token-utils';
 
diff --git a/src/material/core/tokens/m2/mdc/_list.scss b/src/material/core/tokens/m2/mdc/_list.scss
index 4b4729759d66..044e68ff3193 100644
--- a/src/material/core/tokens/m2/mdc/_list.scss
+++ b/src/material/core/tokens/m2/mdc/_list.scss
@@ -1,7 +1,5 @@
 @use 'sass:map';
-@use '../../../theming/theming';
 @use '../../../theming/inspection';
-@use '../../../typography/typography-utils';
 @use '../../../style/sass-utils';
 @use '../../token-utils';
 
diff --git a/src/material/core/tokens/m2/mdc/_slider.scss b/src/material/core/tokens/m2/mdc/_slider.scss
index 5527afd5856e..a514ba147831 100644
--- a/src/material/core/tokens/m2/mdc/_slider.scss
+++ b/src/material/core/tokens/m2/mdc/_slider.scss
@@ -1,10 +1,8 @@
 @use 'sass:map';
-@use '../../../theming/theming';
 @use '../../../theming/inspection';
 @use '../../token-utils';
 @use '../../../style/elevation';
 @use '../../../style/sass-utils';
-@use '../../../typography/typography-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mdc, slider);
diff --git a/src/material/core/tokens/m2/mdc/_switch.scss b/src/material/core/tokens/m2/mdc/_switch.scss
index f8b6045a7535..e05675a28ea0 100644
--- a/src/material/core/tokens/m2/mdc/_switch.scss
+++ b/src/material/core/tokens/m2/mdc/_switch.scss
@@ -1,7 +1,6 @@
 @use 'sass:map';
 @use '../../../style/elevation';
 @use '../../../style/sass-utils';
-@use '../../../theming/theming';
 @use '../../../theming/inspection';
 @use '../../token-utils';
 
diff --git a/src/material/core/typography/_typography-utils.scss b/src/material/core/typography/_typography-utils.scss
index 70295afa2117..a359215d6338 100644
--- a/src/material/core/typography/_typography-utils.scss
+++ b/src/material/core/typography/_typography-utils.scss
@@ -1,10 +1,6 @@
 @use 'sass:list';
-@use 'sass:map';
 @use 'sass:math';
-@use 'sass:meta';
-@use 'sass:string';
 @use './property-getters';
-@use '../theming/inspection';
 
 // Property getters live in their own file to avoid circular dependencies, but we re-export them
 // here so that historical imports from this file continue to work without needing to be updated.
diff --git a/src/material/core/typography/_typography.scss b/src/material/core/typography/_typography.scss
index 63cf3a076366..37400026ffb5 100644
--- a/src/material/core/typography/_typography.scss
+++ b/src/material/core/typography/_typography.scss
@@ -1,6 +1,3 @@
-@use 'sass:map';
-@use 'sass:math';
-@use 'sass:meta';
 @use 'typography-utils';
 @use '../theming/theming';
 @use './versioning';
diff --git a/src/material/input/_input-theme.scss b/src/material/input/_input-theme.scss
index c375bf1ef78c..88e0e36271dd 100644
--- a/src/material/input/_input-theme.scss
+++ b/src/material/input/_input-theme.scss
@@ -1,7 +1,6 @@
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/typography/typography';
-@use '../core/mdc-helpers/mdc-helpers';
 
 @mixin color($theme) {}
 
diff --git a/src/material/list/_list-theme.scss b/src/material/list/_list-theme.scss
index 7b0d459213a8..2335395f21c5 100644
--- a/src/material/list/_list-theme.scss
+++ b/src/material/list/_list-theme.scss
@@ -11,7 +11,6 @@
 @use '../core/tokens/m2/mdc/radio' as tokens-mdc-radio;
 @use '../core/tokens/m2/mdc/list' as tokens-mdc-list;
 @use '../core/typography/typography';
-@use '../core/typography/typography-utils';
 
 @mixin base($config-or-theme) {
   // Add default values for tokens not related to color, typography, or density.
diff --git a/src/material/radio/_radio-theme.scss b/src/material/radio/_radio-theme.scss
index 0a5c8815f180..36a16110a871 100644
--- a/src/material/radio/_radio-theme.scss
+++ b/src/material/radio/_radio-theme.scss
@@ -8,7 +8,6 @@
 @use '../core/typography/typography';
 @use '../core/tokens/m2/mdc/radio' as tokens-mdc-radio;
 @use '../core/tokens/m2/mat/radio' as tokens-mat-radio;
-@use 'sass:map';
 
 @mixin color($theme) {
   @include mdc-helpers.using-mdc-theme($theme) {
diff --git a/src/material/slide-toggle/_slide-toggle-theme.scss b/src/material/slide-toggle/_slide-toggle-theme.scss
index 07b9b3de8e0e..5386667261e1 100644
--- a/src/material/slide-toggle/_slide-toggle-theme.scss
+++ b/src/material/slide-toggle/_slide-toggle-theme.scss
@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use '@material/switch/switch-theme' as mdc-switch-theme;
 @use '@material/form-field' as mdc-form-field;
 @use '../core/theming/theming';
diff --git a/src/material/slider/_slider-theme.scss b/src/material/slider/_slider-theme.scss
index 5cae3c9b7bb5..889df1e6e45b 100644
--- a/src/material/slider/_slider-theme.scss
+++ b/src/material/slider/_slider-theme.scss
@@ -1,5 +1,3 @@
-@use 'sass:map';
-
 @use '@material/slider/slider-theme' as mdc-slider-theme;
 @use '../core/theming/theming';
 @use '../core/theming/inspection';