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

package/core/tokens/m2/mat/_form-field.scss

@@ -1,9 +1,8 @@
 @use 'sass:map';
 @use '../../token-utils';
 @use '../../../style/sass-utils';
-@use '../../../theming/theming';
+@use '../../../theming/inspection';
 @use '../../../theming/palette';
-@use '../../../typography/typography-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, form-field);
@@ -15,17 +14,16 @@ $prefix: (mat, form-field);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
-  $warn: map.get($config, warn);
-  $is-dark: map.get($config, is-dark);
+@function get-color-tokens($theme) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
   $on-surface: if($is-dark, #fff, #000);
-  $color-tokens: private-get-color-palette-color-tokens($config, primary);
+  $color-tokens: private-get-color-palette-color-tokens($theme, primary);
 
   @return map.merge($color-tokens, (
     // MDC has a token for the enabled placeholder, but not for the disabled one.
     disabled-input-text-placeholder-color: rgba($on-surface, 0.38),
     state-layer-color: rgba($on-surface, 0.87),
-    error-text-color: theming.get-color-from-palette($warn),
+    error-text-color: inspection.get-theme-color($theme, warn),
 
     // On dark themes we set the native `select` color to some shade of white,
     // however the color propagates to all of the `option` elements, which are
@@ -48,27 +46,25 @@ $prefix: (mat, form-field);
 }
 
 // Generates the mapping for the properties that change based on the form field color.
-@function private-get-color-palette-color-tokens($config, $palette-name) {
-  $palette: map.get($config, $palette-name);
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $palette-color: inspection.get-theme-color($theme, $palette-name);
 
   @return (
-    focus-select-arrow-color: theming.get-color-from-palette($palette, default, 0.87),
+    focus-select-arrow-color: sass-utils.safe-color-change($palette-color, $alpha: 0.87),
   );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
-  $fallback-font-family: typography-utils.font-family($config);
-
+@function get-typography-tokens($theme) {
   @return (
     // MDC uses `subtitle1` for the input value, placeholder and floating label. The spec
     // shows `body1` for text fields though, so we manually override the typography.
     // Note: Form controls inherit the typography from the parent form field.
-    container-text-font: typography-utils.font-family($config, body-1) or $fallback-font-family,
-    container-text-line-height: typography-utils.line-height($config, body-1),
-    container-text-size: typography-utils.font-size($config, body-1),
-    container-text-tracking: typography-utils.letter-spacing($config, body-1),
-    container-text-weight: typography-utils.font-weight($config, body-1),
+    container-text-font: inspection.get-theme-typography($theme, body-1, font-family),
+    container-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),
+    container-text-size: inspection.get-theme-typography($theme, body-1, font-size),
+    container-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
+    container-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
 
     // In the container styles, we updated the floating label to use the `body-1` typography level.
     // The MDC notched outline overrides this accidentally (only when the label floats) to a
@@ -78,18 +74,18 @@ $prefix: (mat, form-field);
     // https://github.com/material-components/material-components-web/blob/master/packages/mdc-notched-outline/_mixins.scss#L272-L292.
     // This is why we can't use their `label-text-populated-size` token and we have to declare
     // our own version of it.
-    outlined-label-text-populated-size: typography-utils.font-size($config, body-1),
+    outlined-label-text-populated-size: inspection.get-theme-typography($theme, body-1, font-size),
 
-    subscript-text-font: typography-utils.font-family($config, caption) or $fallback-font-family,
-    subscript-text-line-height: typography-utils.line-height($config, caption),
-    subscript-text-size: typography-utils.font-size($config, caption),
-    subscript-text-tracking: typography-utils.letter-spacing($config, caption),
-    subscript-text-weight: typography-utils.font-weight($config, caption),
+    subscript-text-font: inspection.get-theme-typography($theme, caption, font-family),
+    subscript-text-line-height: inspection.get-theme-typography($theme, caption, line-height),
+    subscript-text-size: inspection.get-theme-typography($theme, caption, font-size),
+    subscript-text-tracking: inspection.get-theme-typography($theme, caption, letter-spacing),
+    subscript-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) {
+@function get-density-tokens($theme) {
   @return ();
 }
 

package/core/tokens/m2/mat/_grid-list.scss

@@ -1,5 +1,5 @@
 @use '../../token-utils';
-@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.
@@ -12,25 +12,25 @@ $prefix: (mat, grid-list);
 }
 
 // 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) {
+@function get-typography-tokens($theme) {
   @return (
     // TODO(crisbeto): other components have tokens for all typography dimensions.
     // Here we only set the font size to maintain the same appearance as the pre-tokens
     // theming API. Consider adding more tokens for letter spacing, font weight etc.
-    tile-header-primary-text-size: typography-utils.font-size($config, body-1),
-    tile-header-secondary-text-size: typography-utils.font-size($config, caption),
-    tile-footer-primary-text-size: typography-utils.font-size($config, body-1),
-    tile-footer-secondary-text-size: typography-utils.font-size($config, caption),
+    tile-header-primary-text-size: inspection.get-theme-typography($theme, body-2, font-size),
+    tile-header-secondary-text-size: inspection.get-theme-typography($theme, caption, font-size),
+    tile-footer-primary-text-size: inspection.get-theme-typography($theme, body-2, font-size),
+    tile-footer-secondary-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) {
+@function get-density-tokens($theme) {
   @return ();
 }
 

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

@@ -11,18 +11,18 @@ $prefix: (mat, icon);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
+@function get-color-tokens($theme) {
   // Default the icon to `inherit` so it matches the text around it.
   @return private-get-icon-color-tokens(inherit);
 }
 
 // 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/_legacy-button-toggle.scss

@@ -1,7 +1,5 @@
-@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.
@@ -18,36 +16,34 @@ $prefix: (mat, legacy-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);
-
+@function get-color-tokens($theme) {
   @return (
-    text-color: theming.get-color-from-palette($foreground, hint-text),
-    state-layer-color: theming.get-color-from-palette($background, focused-button),
-    selected-state-text-color: theming.get-color-from-palette($foreground, secondary-text),
-    selected-state-background-color: theming.get-color-from-palette($background, selected-button),
-    disabled-state-text-color: theming.get-color-from-palette($foreground, disabled-button),
-    disabled-state-background-color:
-      theming.get-color-from-palette($background, disabled-button-toggle),
-    disabled-selected-state-background-color:
-      theming.get-color-from-palette($background, selected-disabled-button)
+    text-color: inspection.get-theme-color($theme, foreground, hint-text),
+    state-layer-color: inspection.get-theme-color($theme, background, focused-button),
+    selected-state-text-color: inspection.get-theme-color($theme, foreground, secondary-text),
+    selected-state-background-color: inspection.get-theme-color(
+        $theme, background, selected-button),
+    disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-button),
+    disabled-state-background-color: inspection.get-theme-color(
+        $theme, background, disabled-button-toggle),
+    disabled-selected-state-background-color: inspection.get-theme-color(
+        $theme, background, selected-disabled-button)
   );
 }
 
 // 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) {
+@function get-density-tokens($theme) {
   @return ();
 }
 

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

@@ -1,8 +1,6 @@
-@use 'sass:map';
 @use '../../token-utils';
-@use '../../../theming/theming';
+@use '../../../theming/inspection';
 @use '../../../style/sass-utils';
-@use '../../../typography/typography-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, menu);
@@ -16,37 +14,34 @@ $prefix: (mat, menu);
 }
 
 // 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;
   $on-surface: if($is-dark, #fff, #000);
   $active-state-layer-color: rgba($on-surface, if($is-dark, 0.08, 0.04));
-  $text-color: theming.get-color-from-palette($foreground, text);
+  $text-color: inspection.get-theme-color($theme, foreground, text);
 
   @return (
     item-label-text-color: $text-color,
     item-icon-color: $text-color,
     item-hover-state-layer-color: $active-state-layer-color,
     item-focus-state-layer-color: $active-state-layer-color,
-    container-color: theming.get-color-from-palette($background, card),
+    container-color: inspection.get-theme-color($theme, background, card),
   );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
+@function get-typography-tokens($theme) {
   @return (
-    item-label-text-font:
-      typography-utils.font-family($config, body-1) or typography-utils.font-family($config),
-    item-label-text-size: typography-utils.font-size($config, body-1),
-    item-label-text-tracking: typography-utils.letter-spacing($config, body-1),
-    item-label-text-line-height: typography-utils.line-height($config, body-1),
-    item-label-text-weight: typography-utils.font-weight($config, body-1),
+    item-label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
+    item-label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
+    item-label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
+    item-label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),
+    item-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) {
+@function get-density-tokens($theme) {
   @return ();
 }
 

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

@@ -1,8 +1,6 @@
-@use 'sass:map';
 @use '../../token-utils';
-@use '../../../theming/theming';
+@use '../../../theming/inspection';
 @use '../../../style/sass-utils';
-@use '../../../typography/typography-utils';
 @use '../../../mdc-helpers/mdc-helpers';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -15,36 +13,33 @@ $prefix: (mat, optgroup);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
-  $foreground: map.get($config, foreground);
-
+@function get-color-tokens($theme) {
   @return (
-    label-text-color: theming.get-color-from-palette($foreground, text),
+    label-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) {
   // TODO(crisbeto): The earlier implementation of the option 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();
+  @if ($theme == null) {
+    $theme: mdc-helpers.private-fallback-typography-from-mdc();
   }
 
   @return (
-    label-text-font: typography-utils.font-family($config, body-1) or
-      typography-utils.font-family($config),
-    label-text-line-height: typography-utils.line-height($config, body-1),
-    label-text-size: typography-utils.font-size($config, body-1),
-    label-text-tracking: typography-utils.letter-spacing($config, body-1),
-    label-text-weight: typography-utils.font-weight($config, body-1)
+    label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
+    label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),
+    label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
+    label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
+    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) {
+@function get-density-tokens($theme) {
   @return ();
 }
 

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

@@ -1,8 +1,6 @@
-@use 'sass:map';
 @use '../../token-utils';
-@use '../../../theming/theming';
+@use '../../../theming/inspection';
 @use '../../../style/sass-utils';
-@use '../../../typography/typography-utils';
 @use '../../../mdc-helpers/mdc-helpers';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -15,51 +13,41 @@ $prefix: (mat, option);
 }
 
 // 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;
   $on-surface: if($is-dark, #fff, #000);
   $active-state-layer-color: rgba($on-surface, if($is-dark, 0.08, 0.04));
-  $palette-tokens: private-get-color-palette-color-tokens($primary);
 
-  @return map.merge($palette-tokens, (
-    label-text-color: theming.get-color-from-palette($foreground, text),
+  @return (
+    selected-state-label-text-color: inspection.get-theme-color($theme, $palette-name),
+    label-text-color: inspection.get-theme-color($theme, foreground, text),
     hover-state-layer-color: $active-state-layer-color,
     focus-state-layer-color: $active-state-layer-color,
     selected-state-layer-color: $active-state-layer-color,
-  ));
+  );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
+@function get-typography-tokens($theme) {
   // TODO(crisbeto): The earlier implementation of the option 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();
+  @if ($theme == null) {
+    $theme: mdc-helpers.private-fallback-typography-from-mdc();
   }
 
   @return (
-    label-text-font: typography-utils.font-family($config, body-1) or
-      typography-utils.font-family($config),
-    label-text-line-height: typography-utils.line-height($config, body-1),
-    label-text-size: typography-utils.font-size($config, body-1),
-    label-text-tracking: typography-utils.letter-spacing($config, body-1),
-    label-text-weight: typography-utils.font-weight($config, body-1)
-  );
-}
-
-// Generates the tokens used to theme the option based on a palette.
-@function private-get-color-palette-color-tokens($palette) {
-  @return (
-    selected-state-label-text-color: theming.get-color-from-palette($palette),
+    label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
+    label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),
+    label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
+    label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
+    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) {
+@function get-density-tokens($theme) {
   @return ();
 }
 

package/core/tokens/m2/mat/_paginator.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,34 +14,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,

package/core/tokens/m2/mat/_radio.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,25 +12,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 ();
 }
 

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

@@ -1,8 +1,5 @@
-@use 'sass:map';
 @use '../../token-utils';
-@use '../../../typography/typography-utils';
-@use '../../../mdc-helpers/mdc-helpers';
-@use '../../../theming/theming';
+@use '../../../theming/inspection';
 @use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -15,48 +12,37 @@ $prefix: (mat, select);
 }
 
 // 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);
-  $primary: map.get($config, primary);
-  $warn: map.get($config, warn);
+@function get-color-tokens($theme, $palette-name: primary) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
   $on-surface: if($is-dark, #fff, #000);
 
   @return (
-    panel-background-color: theming.get-color-from-palette($background, card),
+    panel-background-color: inspection.get-theme-color($theme, background, card),
     enabled-trigger-text-color: rgba($on-surface, 0.87),
     disabled-trigger-text-color: rgba($on-surface, 0.38),
     placeholder-text-color: rgba($on-surface, 0.6),
     enabled-arrow-color: rgba($on-surface, 0.54),
     disabled-arrow-color: rgba($on-surface, 0.38),
-    focused-arrow-color: theming.get-color-from-palette($primary, default, 0.87),
-    invalid-arrow-color: theming.get-color-from-palette($warn, default, 0.87),
+    focused-arrow-color: sass-utils.safe-color-change(
+        inspection.get-theme-color($theme, $palette-name, default), $alpha: 0.87),
+    invalid-arrow-color: sass-utils.safe-color-change(
+        inspection.get-theme-color($theme, warn, default), $alpha: 0.87),
   );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
-  // TODO(crisbeto): The earlier implementation of the select 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 (
-    trigger-text-font: typography-utils.font-family($config, body-1) or
-      typography-utils.font-family($config),
-    trigger-text-line-height: typography-utils.line-height($config, body-1),
-    trigger-text-size: typography-utils.font-size($config, body-1),
-    trigger-text-tracking: typography-utils.letter-spacing($config, body-1),
-    trigger-text-weight: typography-utils.font-weight($config, body-1)
+    trigger-text-font: inspection.get-theme-typography($theme, body-1, font-family),
+    trigger-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),
+    trigger-text-size: inspection.get-theme-typography($theme, body-1, font-size),
+    trigger-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
+    trigger-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) {
+@function get-density-tokens($theme) {
   @return ();
 }