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

package/core/tokens/m2/mat/_sidenav.scss

@@ -1,8 +1,7 @@
 @use 'sass:color';
-@use 'sass:map';
 @use 'sass:meta';
 @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.
@@ -19,20 +18,19 @@ $prefix: (mat, sidenav);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
-  $is-dark: map.get($config, is-dark);
-  $foreground: map.get($config, foreground);
-  $background: map.get($config, background);
+@function get-color-tokens($theme) {
+  $is-dark: inspection.get-theme-type($theme) ==  dark;
   $scrim-opacity: 0.6;
-  $scrim-color: theming.get-color-from-palette($background, card, $scrim-opacity);
+  $scrim-color: sass-utils.safe-color-change(
+      inspection.get-theme-color($theme, background, card), $alpha: $scrim-opacity);
   $fallback-scrim-color: if($is-dark, rgba(#fff, $scrim-opacity), rgba(#000, $scrim-opacity));
 
   @return (
-    container-divider-color: theming.get-color-from-palette($foreground, divider),
-    container-background-color: theming.get-color-from-palette($background, dialog),
-    container-text-color: theming.get-color-from-palette($foreground, text),
-    content-background-color: theming.get-color-from-palette($background, background),
-    content-text-color: theming.get-color-from-palette($foreground, text),
+    container-divider-color: inspection.get-theme-color($theme, foreground, divider),
+    container-background-color: inspection.get-theme-color($theme, background, dialog),
+    container-text-color: inspection.get-theme-color($theme, foreground, text),
+    content-background-color: inspection.get-theme-color($theme, background, background),
+    content-text-color: inspection.get-theme-color($theme, foreground, text),
 
     // We use invert() here to have the darken the background color expected to be used.
     // If the background is light, we use a dark backdrop. If the background is dark, we
@@ -44,12 +42,12 @@ $prefix: (mat, sidenav);
 }
 
 // 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 ();
 }
 

package/core/tokens/m2/mat/_slide-toggle.scss

@@ -1,6 +1,6 @@
 @use '../../token-utils';
 @use '../../../style/sass-utils';
-@use '../../../typography/typography-utils';
+@use '../../../theming/inspection';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, slide-toggle);
@@ -12,31 +12,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 ();
 }
 

package/core/tokens/m2/mat/_slider.scss

@@ -1,6 +1,6 @@
-@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 +12,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 +22,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 ();
 }
 

package/core/tokens/m2/mat/_snack-bar.scss

@@ -1,6 +1,5 @@
-@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,22 +12,22 @@ $prefix: (mat, snack-bar);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
-  $is-dark: map.get($config, is-dark);
-  $accent: map.get($config, accent);
+@function get-color-tokens($theme) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
 
   @return (
-    button-color: if($is-dark, rgba(0, 0, 0, 0.87), theming.get-color-from-palette($accent, text))
+    button-color: if(
+        $is-dark, rgba(0, 0, 0, 0.87), inspection.get-theme-color($theme, accent, 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 ();
 }
 

package/core/tokens/m2/mat/_standard-button-toggle.scss

@@ -1,8 +1,8 @@
 @use 'sass:map';
 @use 'sass:meta';
 @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.
@@ -19,49 +19,50 @@ $prefix: (mat, standard-button-toggle);
 }
 
 // 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);
-  $theme-divider-color: theming.get-color-from-palette($foreground, divider);
+@function get-color-tokens($theme) {
+  $theme-divider-color: inspection.get-theme-color($theme, foreground, divider);
 
   // By default the theme usually has an rgba color for the dividers, which can
   // stack up with the background of a button toggle. This can cause the border
   // of a selected toggle to look different from an deselected one. We use a solid
   // color to ensure that the border always stays the same.
-  $divider-color: if(meta.type-of($theme-divider-color) == color,
-    theming.private-rgba-to-hex($theme-divider-color, map.get($background, card)),
-    $theme-divider-color
-  );
+  $divider-color: if(
+      meta.type-of($theme-divider-color) == color,
+      theming.private-rgba-to-hex(
+          $theme-divider-color, inspection.get-theme-color($theme, background, card)),
+      $theme-divider-color);
 
   @return (
-    text-color: theming.get-color-from-palette($foreground, text),
-    background-color: theming.get-color-from-palette($background, card),
-    state-layer-color: theming.get-color-from-palette($background, focused-button, 1),
-    selected-state-background-color: theming.get-color-from-palette($background, selected-button),
-    selected-state-text-color: theming.get-color-from-palette($foreground, text),
-    disabled-state-text-color: theming.get-color-from-palette($foreground, disabled-button),
-    disabled-state-background-color: theming.get-color-from-palette($background, card),
-    disabled-selected-state-text-color: theming.get-color-from-palette($foreground, text),
+    text-color: inspection.get-theme-color($theme, foreground, text),
+    background-color: inspection.get-theme-color($theme, background, card),
+    state-layer-color: sass-utils.safe-color-change(
+        inspection.get-theme-color($theme, background, focused-button), $alpha: 1),
+    selected-state-background-color: inspection.get-theme-color(
+        $theme, background, selected-button),
+    selected-state-text-color: inspection.get-theme-color($theme, foreground, text),
+    disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-button),
+    disabled-state-background-color: inspection.get-theme-color($theme, background, card),
+    disabled-selected-state-text-color: inspection.get-theme-color($theme, foreground, text),
     disabled-selected-state-background-color:
-      theming.get-color-from-palette($background, selected-disabled-button),
+      inspection.get-theme-color($theme, background, selected-disabled-button),
     divider-color: $divider-color,
   );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
+@function get-typography-tokens($theme) {
   @return (
     // TODO(crisbeto): other components have tokens for all typography dimensions (font weight,
     // letter spacing etc). The button toggle only has the font to match what it had in the
     // old theming API and to reduce internal breakages. We should introduce more typography
     // tokens at some point.
-    text-font: typography-utils.font-family($config),
+    text-font: inspection.get-theme-typography($theme, body-1, font-family),
   );
 }
 
 // Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($config) {
-  $density-scale: theming.clamp-density($config, -4);
+@function get-density-tokens($theme) {
+  $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -4);
   $size-scale: (
     0: 48px,
     -1: 44px,

package/core/tokens/m2/mat/_stepper.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use '../../token-utils';
 @use '../../../theming/theming';
-@use '../../../typography/typography-utils';
+@use '../../../theming/inspection';
 @use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -14,62 +14,59 @@ $prefix: (mat, stepper);
 }
 
 // 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);
-  $primary: map.get($config, primary);
-  $warn: map.get($config, warn);
-
-  @return map.merge(private-get-color-palette-color-tokens($primary), (
+@function get-color-tokens($theme) {
+  @return map.merge(private-get-color-palette-color-tokens($theme, primary), (
     // Background for stepper container.
-    container-color: theming.get-color-from-palette($background, card),
+    container-color: inspection.get-theme-color($theme, background, card),
     // Color of the line indicator connecting the steps.
-    line-color: theming.get-color-from-palette($foreground, divider),
+    line-color: inspection.get-theme-color($theme, foreground, divider),
     // Background color of the header while hovered.
-    header-hover-state-layer-color: theming.get-color-from-palette($background, hover),
+    header-hover-state-layer-color: inspection.get-theme-color($theme, background, hover),
     // Background color of the header while focused.
-    header-focus-state-layer-color: theming.get-color-from-palette($background, hover),
+    header-focus-state-layer-color: inspection.get-theme-color($theme, background, hover),
     // Color of the text inside the step header.
-    header-label-text-color: theming.get-color-from-palette($foreground, secondary-text),
+    header-label-text-color: inspection.get-theme-color($theme, foreground, secondary-text),
     // Color for the "optional" label in the step header.
-    header-optional-label-text-color: theming.get-color-from-palette($foreground, secondary-text),
+    header-optional-label-text-color: inspection.get-theme-color(
+        $theme, foreground, secondary-text),
     // Color of the header text when a step is selected.
-    header-selected-state-label-text-color: theming.get-color-from-palette($foreground, text),
+    header-selected-state-label-text-color: inspection.get-theme-color($theme, foreground, text),
     // Color of the header text when a step is in an error state.
-    header-error-state-label-text-color: theming.get-color-from-palette($warn, text),
+    header-error-state-label-text-color: inspection.get-theme-color($theme, warn, text),
     // Background color of the header icon.
-    header-icon-background-color: theming.get-color-from-palette($foreground, secondary-text),
+    header-icon-background-color: inspection.get-theme-color($theme, foreground, secondary-text),
     // Foreground color of the header icon in the error state.
-    header-error-state-icon-foreground-color: theming.get-color-from-palette($warn, text),
+    header-error-state-icon-foreground-color: inspection.get-theme-color($theme, warn, text),
     // Background color of the header icon in the error state.
     header-error-state-icon-background-color: transparent,
   ));
 }
 
 // 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 entire stepper.
-    container-text-font: typography-utils.font-family($config),
+    container-text-font: inspection.get-theme-typography($theme, body-2, font-family),
     // Font family of the text inside the step header.
-    header-label-text-font: typography-utils.font-family($config, body-1) or
-      typography-utils.font-family($config),
+    header-label-text-font: inspection.get-theme-typography($theme, body-2, font-family),
     // Size of the text inside the step header.
-    header-label-text-size: typography-utils.font-size($config, body-1),
+    header-label-text-size: inspection.get-theme-typography($theme, body-2, font-size),
     // Weight of the text inside the step header.
-    header-label-text-weight: typography-utils.font-weight($config, body-1),
+    header-label-text-weight: inspection.get-theme-typography($theme, body-2, font-weight),
     // Color of the header text when a step is in an error state.
-    header-error-state-label-text-size: typography-utils.font-size($config, body-2),
+    header-error-state-label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
     // Size of the header text in the selected state.
-    header-selected-state-label-text-size: typography-utils.font-size($config, body-2),
+    header-selected-state-label-text-size: inspection.get-theme-typography(
+        $theme, body-1, font-size),
     // Weight of the header text in the selected state.
-    header-selected-state-label-text-weight: typography-utils.font-weight($config, body-2),
+    header-selected-state-label-text-weight: inspection.get-theme-typography(
+        $theme, body-1, font-weight),
   );
 }
 
 // Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($config) {
-  $scale: theming.clamp-density($config, -4);
+@function get-density-tokens($theme) {
+  $scale: theming.clamp-density(inspection.get-theme-density($theme), -4);
   $height-config: (
     0: 72px,
     -1: 68px,
@@ -84,13 +81,13 @@ $prefix: (mat, stepper);
 }
 
 // Generates the tokens used to theme the stepper based on a palette.
-@function private-get-color-palette-color-tokens($palette) {
-  $active-state-foreground: theming.get-color-from-palette($palette, default-contrast);
-  $active-state-background: theming.get-color-from-palette($palette);
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $active-state-foreground: inspection.get-theme-color($theme, $palette-name, default-contrast);
+  $active-state-background: inspection.get-theme-color($theme, $palette-name);
 
   @return (
     // Foreground color of the header icon.
-    header-icon-foreground-color: theming.get-color-from-palette($palette, default-contrast),
+    header-icon-foreground-color: $active-state-foreground,
     // Background color of the header icon in the selected state.
     header-selected-state-icon-background-color: $active-state-background,
     // Foreground color of the header icon in the selected state.

package/core/tokens/m2/mat/_tab-header-with-background.scss

@@ -1,6 +1,5 @@
-@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,22 +12,21 @@ $prefix: (mat, tab-header-with-background);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
-  $primary: map.get($config, primary);
+@function get-color-tokens($theme, $palette-name: primary) {
 
   @return (
-    background-color: theming.get-color-from-palette($primary, default),
-    foreground-color: theming.get-color-from-palette($primary, default-contrast),
+    background-color: inspection.get-theme-color($theme, $palette-name, default),
+    foreground-color: inspection.get-theme-color($theme, $palette-name, default-contrast),
   );
 }
 
 // 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 ();
 }
 

package/core/tokens/m2/mat/_tab-header.scss

@@ -1,7 +1,5 @@
-@use 'sass:map';
 @use '../../token-utils';
-@use '../../../theming/theming';
-@use '../../../typography/typography-utils';
+@use '../../../theming/inspection';
 @use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -14,16 +12,14 @@ $prefix: (mat, tab-header);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
-  $is-dark: map.get($config, is-dark);
-  $foreground: map.get($config, foreground);
-  $primary: map.get($config, primary);
+@function get-color-tokens($theme, $palette-name: primary) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
   $inactive-label-text-color: rgba(if($is-dark, #fff, #000), 0.6);
-  $active-label-text-color: theming.get-color-from-palette($primary, default);
-  $ripple-color: theming.get-color-from-palette($primary, default);
+  $active-label-text-color: inspection.get-theme-color($theme, $palette-name, default);
+  $ripple-color: inspection.get-theme-color($theme, $palette-name, default);
 
   @return (
-    disabled-ripple-color: theming.get-color-from-palette($foreground, disabled),
+    disabled-ripple-color: inspection.get-theme-color($theme, foreground, disabled),
     pagination-icon-color: if($is-dark, #fff, #000),
 
     // Note: MDC has equivalents of these tokens, but they lead to much higher selector specificity.
@@ -43,20 +39,19 @@ $prefix: (mat, tab-header);
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
+@function get-typography-tokens($theme) {
   @return (
     // Note: MDC has equivalents of these tokens, but they lead to much higher selector specificity.
-    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-line-height: typography-utils.line-height($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-line-height: inspection.get-theme-typography($theme, button, line-height),
+    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 ();
 }
 

package/core/tokens/m2/mat/_table.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
 @use '../../../theming/theming';
-@use '../../../typography/typography-utils';
+@use '../../../theming/inspection';
 @use '../../token-utils';
 @use '../../../style/sass-utils';
 
@@ -16,34 +16,30 @@ $prefix: (mat, table);
 }
 
 // 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) {
   @return (
-    background-color: theming.get-color-from-palette($background, 'card'),
+    background-color: inspection.get-theme-color($theme, background, 'card'),
 
-    header-headline-color: theming.get-color-from-palette($foreground, text),
-    row-item-label-text-color: theming.get-color-from-palette($foreground, text),
-    row-item-outline-color: theming.get-color-from-palette($foreground, divider),
+    header-headline-color: inspection.get-theme-color($theme, foreground, text),
+    row-item-label-text-color: inspection.get-theme-color($theme, foreground, text),
+    row-item-outline-color: inspection.get-theme-color($theme, foreground, divider),
   );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
-  $fallback-font: typography-utils.font-family($config);
-  $cell-font-family: typography-utils.font-family($config, body-2) or $fallback-font;
-  $cell-line-height: typography-utils.line-height($config, body-2);
-  $cell-font-size: typography-utils.font-size($config, body-2);
-  $cell-font-weight: typography-utils.font-weight($config, body-2);
-  $cell-letter-spacing: typography-utils.letter-spacing($config, body-2);
+@function get-typography-tokens($theme) {
+  $cell-font-family: inspection.get-theme-typography($theme, body-2, font-family);
+  $cell-line-height: inspection.get-theme-typography($theme, body-2, line-height);
+  $cell-font-size: inspection.get-theme-typography($theme, body-2, font-size);
+  $cell-font-weight: inspection.get-theme-typography($theme, body-2, font-weight);
+  $cell-letter-spacing: inspection.get-theme-typography($theme, body-2, letter-spacing);
 
   @return (
-    header-headline-font: typography-utils.font-family($config, subtitle-2) or $fallback-font,
-    header-headline-line-height: typography-utils.line-height($config, subtitle-2),
-    header-headline-size: typography-utils.font-size($config, subtitle-2),
-    header-headline-weight: typography-utils.font-weight($config, subtitle-2),
-    header-headline-tracking: typography-utils.letter-spacing($config, subtitle-2),
+    header-headline-font: inspection.get-theme-typography($theme, subtitle-2, font-family),
+    header-headline-line-height: inspection.get-theme-typography($theme, subtitle-2, line-height),
+    header-headline-size: inspection.get-theme-typography($theme, subtitle-2, font-size),
+    header-headline-weight: inspection.get-theme-typography($theme, subtitle-2, font-weight),
+    header-headline-tracking: inspection.get-theme-typography($theme, subtitle-2, letter-spacing),
 
     // Plain cells and footer cells have the same typography.
     row-item-label-text-font: $cell-font-family,
@@ -61,8 +57,8 @@ $prefix: (mat, table);
 }
 
 // Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($config) {
-  $scale: theming.clamp-density($config, -4);
+@function get-density-tokens($theme) {
+  $scale: theming.clamp-density(inspection.get-theme-density($theme), -4);
   $header-scale: (
     0: 56px,
     -1: 52px,

package/core/tokens/m2/mat/_toolbar.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
 @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,31 +14,27 @@ $prefix: (mat, toolbar);
 }
 
 // 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) {
   @return private-get-color-palette-color-tokens(
-    $background-color: theming.get-color-from-palette($background, app-bar),
-    $text-color: theming.get-color-from-palette($foreground, text),
+    $background-color: inspection.get-theme-color($theme, background, app-bar),
+    $text-color: inspection.get-theme-color($theme, foreground, text),
   );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
+@function get-typography-tokens($theme) {
   @return (
-    title-text-font: typography-utils.font-family($config, title) or
-      typography-utils.font-family($config),
-    title-text-line-height: typography-utils.line-height($config, title),
-    title-text-size: typography-utils.font-size($config, title),
-    title-text-tracking: typography-utils.letter-spacing($config, title),
-    title-text-weight: typography-utils.font-weight($config, title),
+    title-text-font: inspection.get-theme-typography($theme, headline-6, font-family),
+    title-text-line-height: inspection.get-theme-typography($theme, headline-6, line-height),
+    title-text-size: inspection.get-theme-typography($theme, headline-6, font-size),
+    title-text-tracking: inspection.get-theme-typography($theme, headline-6, letter-spacing),
+    title-text-weight: inspection.get-theme-typography($theme, headline-6, font-weight),
   );
 }
 
 // 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);
   $standard-scale: (
     0: 64px,
     -1: 60px,