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

package/core/theming/_theming.scss

@@ -5,6 +5,9 @@
 @use 'palette';
 @use '../density/private/compatibility';
 
+// Whether to enable compatibility with legacy methods for accessing theme information.
+$theme-legacy-inspection-api-compatibility: true !default;
+
 // Whether duplication warnings should be disabled. Warnings enabled by default.
 $theme-ignore-duplication-warnings: false !default;
 
@@ -21,11 +24,6 @@ $_legacy-theme-warning: 'Angular Material themes should be created from a map co
   'palette values for "primary", "accent", and "warn". ' +
   'See https://material.angular.io/guide/theming for more information.';
 
-// Flag whether theme config getter functions should warn if a key is expected to exist but not
-// present in the config. This can be transformed internally in Google to ensure all clients have
-// comprehensive theme configurations.
-$_enable-strict-theme-config: false;
-
 // Flag whether to disable theme definitions copying color values to the top-level theme config.
 // This copy is to preserve backwards compatibility.
 $_disable-color-backwards-compatibility: false;
@@ -184,10 +182,10 @@ $_emitted-base: () !default;
   // configuration for the `color` theming part.
   @if $accent != null {
     @warn $_legacy-theme-warning;
-    @return private-create-backwards-compatibility-theme(_mat-validate-theme((
+    @return _internalize-theme(private-create-backwards-compatibility-theme(_mat-validate-theme((
       _is-legacy-theme: true,
       color: _mat-create-light-color-config($primary, $accent, $warn),
-    )));
+    ))));
   }
   // If the map pattern is used (1), we just pass-through the configurations for individual
   // parts of the theming system, but update the `color` configuration if set. As explained
@@ -200,7 +198,8 @@ $_emitted-base: () !default;
     $warn: map.get($color-settings, warn);
     $result: map.merge($result, (color: _mat-create-light-color-config($primary, $accent, $warn)));
   }
-  @return private-create-backwards-compatibility-theme(_mat-validate-theme($result));
+  @return _internalize-theme(
+      private-create-backwards-compatibility-theme(_mat-validate-theme($result)));
 }
 
 // TODO: Remove legacy API and rename below `$primary` to `$config`. Currently it cannot be renamed
@@ -225,10 +224,10 @@ $_emitted-base: () !default;
   // configuration for the `color` theming part.
   @if $accent != null {
     @warn $_legacy-theme-warning;
-    @return private-create-backwards-compatibility-theme(_mat-validate-theme((
+    @return _internalize-theme(private-create-backwards-compatibility-theme(_mat-validate-theme((
       _is-legacy-theme: true,
       color: _mat-create-dark-color-config($primary, $accent, $warn),
-    )));
+    ))));
   }
   // If the map pattern is used (1), we just pass-through the configurations for individual
   // parts of the theming system, but update the `color` configuration if set. As explained
@@ -241,7 +240,8 @@ $_emitted-base: () !default;
     $warn: map.get($color-settings, warn);
     $result: map.merge($result, (color: _mat-create-dark-color-config($primary, $accent, $warn)));
   }
-  @return private-create-backwards-compatibility-theme(_mat-validate-theme($result));
+  @return _internalize-theme(
+      private-create-backwards-compatibility-theme(_mat-validate-theme($result)));
 }
 
 /// Gets the color configuration from the given theme or configuration.
@@ -265,9 +265,6 @@ $_emitted-base: () !default;
   @if map.has-key($theme, color) {
     @return map.get($theme, color);
   }
-  @else if ($_enable-strict-theme-config) {
-    @error 'Angular Material theme configuration is missing a "color" value';
-  }
   @return $default;
 }
 
@@ -287,9 +284,6 @@ $_emitted-base: () !default;
   @if map.has-key($theme-or-config, density) {
     @return map.get($theme-or-config, density);
   }
-  @else if ($_enable-strict-theme-config) {
-    @error 'Angular Material theme configuration is missing a "density" value';
-  }
   @return $default;
 }
 
@@ -310,9 +304,6 @@ $_emitted-base: () !default;
   @if (map.has-key($theme-or-config, typography)) {
     @return map.get($theme-or-config, typography);
   }
-  @else if ($_enable-strict-theme-config) {
-    @error 'Angular Material theme configuration is missing a "typography" value';
-  }
   @return $default;
 }
 
@@ -595,3 +586,51 @@ $_internals: _mat-theming-internals-do-not-access;
   }
   @return $density-scale;
 }
+
+/// Copies the given theme object and nests it within itself under a secret key and replaces the
+/// original map keys with error values. This allows the inspection API which is aware of the secret
+/// key to access the real values, but attempts to directly access the map will result in errors.
+/// @param {Map} $theme The theme map.
+@function _internalize-theme($theme) {
+  @if map.has-key($theme, $_internals) {
+    @return $theme;
+  }
+  $internalized-theme: (
+    $_internals: (
+      theme-version: 0,
+      m2-config: $theme
+    )
+  );
+  @if ($theme-legacy-inspection-api-compatibility) {
+    @return map.merge($theme, $internalized-theme);
+  }
+  $error-theme:
+    _replace-values-with-errors($theme, 'Theme may only be accessed via theme inspection API');
+  @return map.merge($error-theme, $internalized-theme);
+}
+
+/// Replaces concrete CSS values with errors in a theme object.
+/// Errors are represented as a map `(ERROR: <message>)`. Because maps are not valid CSS values,
+/// the Sass will not compile if the user tries to use any of the error theme values in their CSS.
+/// Users will see a message about `(ERROR: <message>)` not being a valid CSS value. Using the
+/// message, that winds up getting shown, we can help explain to users why they're getting the
+/// error.
+/// @param {*} $value The theme value to replace with errors.
+/// @param {String} $message The error message to sow users.
+/// @return {Map} A version of $value where concrete CSS values have been replaced with errors
+@function _replace-values-with-errors($value, $message) {
+  $value-type: meta.type-of($value);
+  @if $value-type == 'map' {
+    @each $k, $v in $value {
+      $value: map.set($value, $k, _replace-values-with-errors($v, $message));
+    }
+    @return $value;
+  }
+  @else if $value-type == 'list' and list.length($value) > 0 {
+    @for $i from 1 through list.length() {
+      $value: list.set-nth($value, $i, _replace-values-with-errors(list.nth($value, $i), $message));
+    }
+    @return $value;
+  }
+  @return (ERROR: $message);
+}

package/core/tokens/m2/mat/_autocomplete.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,21 +12,19 @@ $prefix: (mat, autocomplete);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
-  $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)
   );
 }
 
 // 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/_badge.scss

@@ -2,8 +2,7 @@
 @use 'sass:map';
 @use 'sass:color';
 @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.
@@ -16,12 +15,10 @@ $prefix: (mat, badge);
 }
 
 // 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-color-tokens: private-get-color-palette-color-tokens(map.get($config, primary));
-  $app-background: theming.get-color-from-palette($background, 'background');
-  $disabled-background: theming.get-color-from-palette($foreground, disabled-button);
+@function get-color-tokens($theme) {
+  $primary-color-tokens: private-get-color-palette-color-tokens($theme, primary);
+  $app-background: inspection.get-theme-color($theme, background, background);
+  $disabled-background: inspection.get-theme-color($theme, foreground, disabled-button);
 
   // The disabled color usually has some kind of opacity, but because the badge is overlayed
   // on top of something else, it won't look good if it's opaque. If it is a color *type*,
@@ -36,24 +33,24 @@ $prefix: (mat, badge);
 
   @return map.merge($primary-color-tokens, (
     disabled-state-background-color: $disabled-background,
-    disabled-state-text-color: theming.get-color-from-palette($foreground, disabled-text),
+    disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-text),
   ));
 }
 
 // Generates the tokens used to theme the badge based on a palette.
-@function private-get-color-palette-color-tokens($palette) {
+@function private-get-color-palette-color-tokens($theme, $palette-name: primary) {
   @return (
-    background-color: theming.get-color-from-palette($palette),
-    text-color: theming.get-color-from-palette($palette, default-contrast),
+    background-color: inspection.get-theme-color($theme, $palette-name),
+    text-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) {
   $base-size: 12px;
 
   @return (
-    text-font: typography-utils.font-family($config),
+    text-font: inspection.get-theme-typography($theme, body-2, font-family),
     text-size: $base-size,
     text-weight: 600,
     small-size-text-size: $base-size * 0.75,
@@ -62,7 +59,7 @@ $prefix: (mat, badge);
 }
 
 // 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/_bottom-sheet.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.
@@ -17,30 +15,26 @@ $prefix: (mat, bottom-sheet);
 }
 
 // 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 (
-    container-text-color: theming.get-color-from-palette($foreground, text),
-    container-background-color: theming.get-color-from-palette($background, dialog),
+    container-text-color: inspection.get-theme-color($theme, foreground, text),
+    container-background-color: inspection.get-theme-color($theme, background, dialog),
   );
 }
 
 // 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, body-1) or
-      typography-utils.font-family($config),
-    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-2, font-family),
+    container-text-line-height: inspection.get-theme-typography($theme, body-2, line-height),
+    container-text-size: inspection.get-theme-typography($theme, body-2, font-size),
+    container-text-tracking: inspection.get-theme-typography($theme, body-2, letter-spacing),
+    container-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/_card.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,45 +12,41 @@ $prefix: (mat, card);
 }
 
 // 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 (
     // Text color of the card's subtitle.
-    subtitle-text-color: theming.get-color-from-palette($foreground, secondary-text),
+    subtitle-text-color: inspection.get-theme-color($theme, foreground, secondary-text),
   );
 }
 
 // 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 card's title.
-    title-text-font: typography-utils.font-family($config, headline-6)
-          or typography-utils.font-family($config),
+    title-text-font: inspection.get-theme-typography($theme, headline-6, font-family),
     // Line height of the card's title.
-    title-text-line-height: typography-utils.line-height($config, headline-6),
+    title-text-line-height: inspection.get-theme-typography($theme, headline-6, line-height),
     // Font size of the card's title.
-    title-text-size: typography-utils.font-size($config, headline-6),
+    title-text-size: inspection.get-theme-typography($theme, headline-6, font-size),
     // Letter spacing of the card's title.
-    title-text-tracking: typography-utils.letter-spacing($config, headline-6),
+    title-text-tracking: inspection.get-theme-typography($theme, headline-6, letter-spacing),
     // Font weight of the card's title.
-    title-text-weight: typography-utils.font-weight($config, headline-6),
+    title-text-weight: inspection.get-theme-typography($theme, headline-6, font-weight),
     // Font family of the card's subtitle.
-    subtitle-text-font: typography-utils.font-family($config, subtitle-2)
-          or typography-utils.font-family($config),
+    subtitle-text-font: inspection.get-theme-typography($theme, subtitle-2, font-family),
     // Line height of the card's subtitle.
-    subtitle-text-line-height: typography-utils.line-height($config, subtitle-2),
+    subtitle-text-line-height: inspection.get-theme-typography($theme, subtitle-2, line-height),
     // Font size of the card's subtitle.
-    subtitle-text-size: typography-utils.font-size($config, subtitle-2),
+    subtitle-text-size: inspection.get-theme-typography($theme, subtitle-2, font-size),
     // Letter spacing of the card's subtitle.
-    subtitle-text-tracking: typography-utils.letter-spacing($config, subtitle-2),
+    subtitle-text-tracking: inspection.get-theme-typography($theme, subtitle-2, letter-spacing),
     // Font weight of the card's subtitle.
-    subtitle-text-weight: typography-utils.font-weight($config, subtitle-2),
+    subtitle-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 ();
 }
 

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

@@ -1,10 +1,8 @@
 @use 'sass:color';
-@use 'sass:map';
 @use 'sass:meta';
 @use 'sass:math';
 @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.
@@ -36,23 +34,20 @@ $private-default-overlap-color: #a8dab5;
 }
 
 // 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);
-  $inactive-icon-color: theming.get-color-from-palette($foreground, icon);
-  $text-color: theming.get-color-from-palette($foreground, text);
-  $secondary-text-color: theming.get-color-from-palette($foreground, secondary-text);
-  $disabled-text-color: theming.get-color-from-palette($foreground, disabled-text);
-  $divider-color: theming.get-color-from-palette($foreground, divider);
-  $hint-text-color: theming.get-color-from-palette($foreground, hint-text);
+@function get-color-tokens($theme) {
+  $inactive-icon-color: inspection.get-theme-color($theme, foreground, icon);
+  $text-color: inspection.get-theme-color($theme, foreground, text);
+  $secondary-text-color: inspection.get-theme-color($theme, foreground, secondary-text);
+  $disabled-text-color: inspection.get-theme-color($theme, foreground, disabled-text);
+  $divider-color: inspection.get-theme-color($theme, foreground, divider);
+  $hint-text-color: inspection.get-theme-color($theme, foreground, hint-text);
   $preview-outline-color: $divider-color;
   $today-disabled-outline-color: null;
 
-  $primary-color: theming.get-color-from-palette(map.get($config, primary));
+  $primary-color: inspection.get-theme-color($theme, primary);
   $range-tokens: get-range-color-tokens(private-get-range-background-color($primary-color));
-  $calendar-tokens: private-get-calendar-color-palette-color-tokens($config, primary);
-  $toggle-tokens: private-get-toggle-color-palette-color-tokens($config, primary);
+  $calendar-tokens: private-get-calendar-color-palette-color-tokens($theme, primary);
+  $toggle-tokens: private-get-toggle-color-palette-color-tokens($theme, primary);
 
   // The divider color is set under the assumption that it'll be used
   // for a solid border, but because we're using a dashed border for the
@@ -90,31 +85,30 @@ $private-default-overlap-color: #a8dab5;
     range-input-disabled-state-separator-color: $disabled-text-color,
     range-input-disabled-state-text-color: $disabled-text-color,
 
-    calendar-container-background-color: theming.get-color-from-palette($background, card),
+    calendar-container-background-color: inspection.get-theme-color($theme, background, card),
     calendar-container-text-color: $text-color,
   ));
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
-  $fallback-font: typography-utils.font-family($config);
-
+@function get-typography-tokens($theme) {
   @return (
     // TODO(crisbeto): the typography tokens for other components set every typography dimension of
     // an element (e.g. size, weight, line height, letter spacing). These tokens only set the values
     // that were set in the previous theming API to reduce the amount of subtle screenshot
     // differences. We should look into introducing the other tokens in a follow-up.
-    calendar-text-font: $fallback-font,
+    calendar-text-font: inspection.get-theme-typography($theme, body-1, font-family),
     calendar-text-size: 13px, // TODO(crisbeto): this doesn't appear to affect anything
 
-    calendar-body-label-text-size: typography-utils.font-size($config, button),
-    calendar-body-label-text-weight: typography-utils.font-weight($config, button),
+    calendar-body-label-text-size: inspection.get-theme-typography($theme, button, font-size),
+    calendar-body-label-text-weight: inspection.get-theme-typography($theme, button, font-weight),
 
-    calendar-period-button-text-size: typography-utils.font-size($config, button),
-    calendar-period-button-text-weight: typography-utils.font-weight($config, button),
+    calendar-period-button-text-size: inspection.get-theme-typography($theme, button, font-size),
+    calendar-period-button-text-weight: inspection.get-theme-typography(
+        $theme, button, font-weight),
 
     calendar-header-text-size: 11px,
-    calendar-header-text-weight: typography-utils.font-weight($config, body-1),
+    calendar-header-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
   );
 }
 
@@ -133,19 +127,17 @@ $private-default-overlap-color: #a8dab5;
   );
 }
 
-@function private-get-calendar-color-palette-color-tokens($config, $palette-name) {
-  $foreground: map.get($config, foreground);
-  $palette: map.get($config, $palette-name);
-  $palette-color: theming.get-color-from-palette($palette);
-  $default-contrast: theming.get-color-from-palette($palette, default-contrast);
-  $active-background-color: theming.get-color-from-palette($palette, 0.3);
+@function private-get-calendar-color-palette-color-tokens($theme, $palette-name) {
+  $palette-color: inspection.get-theme-color($theme, $palette-name);
+  $default-contrast: inspection.get-theme-color($theme, $palette-name, default-contrast);
+  $active-background-color: sass-utils.safe-color-change($palette-color, $alpha: 0.3);
   $active-disabled-color: null;
 
   @if (meta.type-of($palette-color) == color) {
     $active-disabled-color: color.adjust($palette-color, $alpha: -$_selected-fade-amount);
   }
   @else {
-    $active-disabled-color: theming.get-color-from-palette($foreground, disabled-button);
+    $active-disabled-color: inspection.get-theme-color($theme, foreground, disabled-button);
   }
 
   @return (
@@ -158,17 +150,15 @@ $private-default-overlap-color: #a8dab5;
   );
 }
 
-@function private-get-toggle-color-palette-color-tokens($config, $palette-name) {
-  $palette: map.get($config, $palette-name);
-
+@function private-get-toggle-color-palette-color-tokens($theme, $palette-name) {
   @return (
-    toggle-active-state-icon-color: theming.get-color-from-palette($palette, text),
+    toggle-active-state-icon-color: inspection.get-theme-color($theme, $palette-name, text),
   );
 }
 
 
 // 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/_divider.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.
@@ -15,21 +14,19 @@ $prefix: (mat, divider);
 }
 
 // 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 (
-    color: theming.get-color-from-palette($foreground, divider)
+    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) {
+@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/_expansion.scss

@@ -1,8 +1,8 @@
 @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, expansion);
@@ -16,49 +16,45 @@ $prefix: (mat, expansion);
 }
 
 // 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 (
-    container-background-color: theming.get-color-from-palette($background, card),
-    container-text-color: theming.get-color-from-palette($foreground, text),
-    actions-divider-color: theming.get-color-from-palette($foreground, divider),
-    header-hover-state-layer-color: theming.get-color-from-palette($background, hover),
-    header-focus-state-layer-color: theming.get-color-from-palette($background, hover),
-    header-disabled-state-text-color: theming.get-color-from-palette($foreground, disabled-button),
-    header-text-color: theming.get-color-from-palette($foreground, text),
-    header-description-color: theming.get-color-from-palette($foreground, secondary-text),
-    header-indicator-color: theming.get-color-from-palette($foreground, secondary-text),
+    container-background-color: inspection.get-theme-color($theme, background, card),
+    container-text-color: inspection.get-theme-color($theme, foreground, text),
+    actions-divider-color: inspection.get-theme-color($theme, foreground, divider),
+    header-hover-state-layer-color: inspection.get-theme-color($theme, background, hover),
+    header-focus-state-layer-color: inspection.get-theme-color($theme, background, hover),
+    header-disabled-state-text-color: inspection.get-theme-color(
+        $theme, foreground, disabled-button),
+    header-text-color: inspection.get-theme-color($theme, foreground, text),
+    header-description-color: inspection.get-theme-color($theme, foreground, secondary-text),
+    header-indicator-color: inspection.get-theme-color($theme, foreground, secondary-text),
   );
 }
 
 // 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 (
-    header-text-font: typography-utils.font-family($config, subheading-1) or $fallback-font-family,
-    header-text-size: typography-utils.font-size($config, subheading-1),
-    header-text-weight: typography-utils.font-weight($config, subheading-1),
+    header-text-font: inspection.get-theme-typography($theme, subtitle-2, font-family),
+    header-text-size: inspection.get-theme-typography($theme, subtitle-2, font-size),
+    header-text-weight: inspection.get-theme-typography($theme, subtitle-2, font-weight),
 
     // TODO(crisbeto): these two properties weren't set at all before the introduction of tokens,
     // but it's inconsistent not to provide them since the container sets all of them. Eventually
-    // we should change the values to use come from `subheading-1`.
+    // we should change the values to use come from `subtitle-2`.
     header-text-line-height: inherit,
     header-text-tracking: inherit,
 
-    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-2, font-family),
+    container-text-line-height: inspection.get-theme-typography($theme, body-2, line-height),
+    container-text-size: inspection.get-theme-typography($theme, body-2, font-size),
+    container-text-tracking: inspection.get-theme-typography($theme, body-2, letter-spacing),
+    container-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) {
-  $scale: theming.clamp-density($config, -3);
+@function get-density-tokens($theme) {
+  $scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
   $collapsed-scale: (
     0: 48px,
     -1: 44px,