@angular/material 16.2.2 → 17.0.0-next.1

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/_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

@@ -0,0 +1,43 @@
+@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);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+
+  @return (
+    // Opacity of value indicator text container
+    value-indicator-opacity: if($is-dark, 0.9, 0.6),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return ();
+ }
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+          get-unthemable-tokens(),
+          get-color-tokens(token-utils.$placeholder-color-config),
+          get-typography-tokens(token-utils.$placeholder-typography-config),
+          get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

package/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.

package/core/tokens/m2/mdc/_elevated-card.scss

@@ -1,6 +1,5 @@
-@use 'sass:map';
 @use '../../../style/elevation';
-@use '../../../theming/theming';
+@use '../../../theming/inspection';
 @use '../../../style/sass-utils';
 @use '../../token-utils';
 
@@ -45,14 +44,12 @@ $prefix: (mdc, elevated-card);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
-  $background: map.get($config, background);
-  $foreground: map.get($config, foreground);
-  $elevation: theming.get-color-from-palette($foreground, elevation);
+@function get-color-tokens($theme) {
+  $elevation: inspection.get-theme-color($theme, foreground, elevation);
 
   @return (
     // The background color of the card.
-    container-color: theming.get-color-from-palette($background, card),
+    container-color: inspection.get-theme-color($theme, background, card),
     // The elevation level of the card.
     // (Part of the color tokens because it needs to be combined with the shadow color to generate
     // the final box-shadow).
@@ -63,12 +60,12 @@ $prefix: (mdc, elevated-card);
 }
 
 // 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/mdc/_extended-fab.scss

@@ -1,6 +1,5 @@
-@use '../../../mdc-helpers/mdc-helpers';
 @use '../../token-utils';
-@use '../../../typography/typography-utils';
+@use '../../../theming/inspection';
 
 @use 'sass:map';
 
@@ -45,30 +44,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 ();
 }
 

package/core/tokens/m2/mdc/_fab.scss

@@ -1,4 +1,4 @@
-@use '../../../theming/theming';
+@use '../../../theming/inspection';
 @use '../../token-utils';
 
 @use 'sass:map';
@@ -55,21 +55,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 ();
 }
 

package/core/tokens/m2/mdc/_filled-text-field.scss

@@ -1,9 +1,8 @@
 @use 'sass:color';
 @use 'sass:map';
 @use 'sass:meta';
-@use '../../../theming/theming';
+@use '../../../theming/inspection';
 @use '../../../style/sass-utils';
-@use '../../../typography/typography-utils';
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -93,15 +92,12 @@ $prefix: (mdc, filled-text-field);
 }
 
 // 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);
-  $warn: map.get($config, warn);
-  $is-dark: map.get($config, is-dark);
-  $surface: theming.get-color-from-palette($background, card);
+@function get-color-tokens($theme) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $surface: inspection.get-theme-color($theme, background, card);
   $on-surface: if($is-dark, #fff, #000);
-  $warn-color: theming.get-color-from-palette($warn);
-  $color-tokens: private-get-color-palette-color-tokens($config, primary);
+  $warn-color: inspection.get-theme-color($theme, warn);
+  $color-tokens: private-get-color-palette-color-tokens($theme, primary);
 
   @return map.merge($color-tokens, (
     container-color: _variable-safe-mix($on-surface, $surface, 4%),
@@ -134,32 +130,30 @@ $prefix: (mdc, filled-text-field);
   @return $first-color;
 }
 
-// Generates the mapping for the properties that change based on the slide toggle color.
-@function private-get-color-palette-color-tokens($config, $palette-name) {
-  $palette: map.get($config, $palette-name);
-  $palette-color: theming.get-color-from-palette($palette);
+// Generates the mapping for the properties that change based on the text field color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $palette: map.get($theme, $palette-name);
+  $palette-color: inspection.get-theme-color($theme, $palette-name);
 
   @return (
     caret-color: $palette-color,
     focus-active-indicator-color: $palette-color,
-    focus-label-text-color: theming.get-color-from-palette($palette, default, 0.87),
+    focus-label-text-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 (
-    label-text-font: typography-utils.font-family($config, body-1) or $fallback-font-family,
-    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-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/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,
   );