@angular/material 17.0.0-next.1 → 17.0.0-next.3

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,

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

@@ -1,9 +1,12 @@
+@use 'sass:color';
 @use 'sass:map';
+@use 'sass:meta';
 @use '../../token-utils';
 @use '../../../mdc-helpers/mdc-helpers';
 @use '../../../style/sass-utils';
 @use '../../../theming/theming';
-@use '../../../typography/typography-utils';
+@use '../../../theming/inspection';
+@use '../../../theming/palette';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mdc, chip);
@@ -228,14 +231,34 @@ $prefix: (mdc, chip);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
-  $palette: map.get($config, primary);
+@function get-color-tokens($theme, $palette-name: null) {
+  $foreground: null;
+  $background: null;
+  $state-layer-color: inspection.get-theme-color($theme, foreground, base);
+  $state-layer-opacity: 0.12; // 0.12 is a common value in Material Design for opacity.
 
-  $background: theming.get-color-from-palette($palette);
-  $foreground: theming.get-color-from-palette($palette, default-contrast);
+  @if $palette-name == null {
+    $is-dark: inspection.get-theme-type($theme) == dark;
+    $grey-50: map.get(palette.$grey-palette, 50);
+    $grey-900: map.get(palette.$grey-palette, 900);
+    $foreground: if($is-dark, $grey-50, $grey-900);
 
-  $state-layer-color: theming.get-color-from-palette(map.get($config, foreground), base);
-  $state-layer-opacity: 0.12; // 0.12 is a common value in Material Design for opacity.
+    $surface: inspection.get-theme-color($theme, background, card);
+    $on-surface: if(
+        mdc-helpers.variable-safe-contrast-tone($surface, $is-dark) == 'dark',
+        #000,
+        #fff
+    );
+    $background: if(
+        meta.type-of($on-surface) == color and meta.type-of($surface) == color,
+        color.mix($on-surface, $surface, 12%),
+        $on-surface
+    );
+  }
+  @else {
+    $background: inspection.get-theme-color($theme, $palette-name);
+    $foreground: inspection.get-theme-color($theme, $palette-name, default-contrast);
+  }
 
   @return (
     // The text color of a disabled chip.
@@ -264,33 +287,24 @@ $prefix: (mdc, chip);
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
-  // TODO(wagnermaciel): The earlier implementation of the chip 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 (
     // The font family of the chip text.
-    label-text-font: typography-utils.font-family($config, body-2) or
-      typography-utils.font-family($config),
+    label-text-font: inspection.get-theme-typography($theme, body-2, font-family),
     // The line height of the chip text.
-    label-text-line-height: typography-utils.line-height($config, body-2),
+    label-text-line-height: inspection.get-theme-typography($theme, body-2, line-height),
     // The font size of the chip text.
-    label-text-size: typography-utils.font-size($config, body-2),
+    label-text-size: inspection.get-theme-typography($theme, body-2, font-size),
     // The letter spacing of the chip label.
-    label-text-tracking: typography-utils.letter-spacing($config, body-2),
+    label-text-tracking: inspection.get-theme-typography($theme, body-2, letter-spacing),
     // The font weight of the chip text.
-    label-text-weight: typography-utils.font-weight($config, body-2)
+    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) {
-  $scale: theming.clamp-density($config, -2);
+@function get-density-tokens($theme) {
+  $scale: theming.clamp-density(inspection.get-theme-density($theme), -2);
   @return (
     // The height of the chip.
     container-height:

package/core/tokens/m2/mdc/_circular-progress.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@use '../../../theming/theming';
+@use '../../../theming/inspection';
 @use '../../../style/sass-utils';
 @use '../../token-utils';
 
@@ -33,20 +32,20 @@ $prefix: (mdc, circular-progress);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
+@function get-color-tokens($theme) {
   @return (
     // The color of the progress spinner's active indicator.
-    active-indicator-color: theming.get-color-from-palette(map.get($config, primary))
+    active-indicator-color: inspection.get-theme-color($theme, primary)
   );
 }
 
 // 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/_dialog.scss

@@ -1,7 +1,4 @@
-@use 'sass:map';
-@use '../../../theming/theming';
-@use '../../../typography/typography-utils';
-@use '../../../mdc-helpers/mdc-helpers';
+@use '../../../theming/inspection';
 @use '../../../style/sass-utils';
 @use '../../token-utils';
 
@@ -56,14 +53,13 @@ $prefix: (mdc, dialog);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
-  $is-dark: map.get($config, 'is-dark');
-  $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);
 
   @return (
     // Background color of the container.
-    container-color: theming.get-color-from-palette($background, dialog),
+    container-color: inspection.get-theme-color($theme, background, dialog),
     // Color of the dialog header.
     subhead-color: rgba($on-surface, 0.87),
     // Color of the dialog body text.
@@ -72,35 +68,25 @@ $prefix: (mdc, dialog);
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
-  // TODO(crisbeto): The earlier implementation of the dialog 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 (
     // Typography of the dialog header.
-    subhead-font: typography-utils.font-family($config, headline-6)
-      or typography-utils.font-family($config),
-    subhead-line-height: typography-utils.line-height($config, headline-6),
-    subhead-size: typography-utils.font-size($config, headline-6),
-    subhead-weight: typography-utils.font-weight($config, headline-6),
-    subhead-tracking: typography-utils.letter-spacing($config, headline-6),
+    subhead-font: inspection.get-theme-typography($theme, headline-6, font-family),
+    subhead-line-height: inspection.get-theme-typography($theme, headline-6, line-height),
+    subhead-size: inspection.get-theme-typography($theme, headline-6, font-size),
+    subhead-weight: inspection.get-theme-typography($theme, headline-6, font-weight),
+    subhead-tracking: inspection.get-theme-typography($theme, headline-6, letter-spacing),
     // Typography of the dialog body text.
-    supporting-text-font: typography-utils.font-family($config, body-1)
-      or typography-utils.font-family($config),
-    supporting-text-line-height: typography-utils.line-height($config, body-1),
-    supporting-text-size: typography-utils.font-size($config, body-1),
-    supporting-text-weight: typography-utils.font-weight($config, body-1),
-    supporting-text-tracking: typography-utils.letter-spacing($config, body-1),
+    supporting-text-font: inspection.get-theme-typography($theme, body-1, font-family),
+    supporting-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),
+    supporting-text-size: inspection.get-theme-typography($theme, body-1, font-size),
+    supporting-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
+    supporting-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
   );
 }
 
 // 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

@@ -50,12 +50,12 @@ $prefix: (mdc, icon-button);
 }
 
 // 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/_plain-tooltip.scss

@@ -1,7 +1,4 @@
-@use 'sass:map';
-@use '../../../theming/theming';
-@use '../../../typography/typography-utils';
-@use '../../../mdc-helpers/mdc-helpers';
+@use '../../../theming/inspection';
 @use '../../../style/sass-utils';
 @use '../../token-utils';
 
@@ -26,42 +23,32 @@ $prefix: (mdc, plain-tooltip);
 }
 
 // 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 (
     // Color of the tooltip container.
-    container-color: theming.get-color-from-palette($background, tooltip),
+    container-color: inspection.get-theme-color($theme, background, tooltip),
     // Color of the tooltip text.
     supporting-text-color: #fff,
   );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
-  // TODO(amysorto): The earlier implementation of the tooltip 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 (
     // Font for the tooltip text.
-    supporting-text-font: typography-utils.font-family($config, caption)
-    or typography-utils.font-family($config),
+    supporting-text-font: inspection.get-theme-typography($theme, caption, font-family),
     // Font size for the tooltip text.
-    supporting-text-size: typography-utils.font-size($config, caption),
+    supporting-text-size: inspection.get-theme-typography($theme, caption, font-size),
     // Font weight of the tooltip text.
-    supporting-text-weight: typography-utils.font-weight($config, caption),
+    supporting-text-weight: inspection.get-theme-typography($theme, caption, font-weight),
     // Tracking (space between letters) of the tooltip text.
-    supporting-text-tracking: typography-utils.letter-spacing($config, caption),
+    supporting-text-tracking: inspection.get-theme-typography($theme, caption, letter-spacing),
   );
 }
 
 // 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/_snack-bar.scss

@@ -1,10 +1,7 @@
-@use 'sass:map';
 @use 'sass:meta';
 @use 'sass:color';
-@use '../../../theming/theming';
+@use '../../../theming/inspection';
 @use '../../token-utils';
-@use '../../../typography/typography-utils';
-@use '../../../mdc-helpers/mdc-helpers';
 @use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -58,10 +55,9 @@ $prefix: (mdc, snackbar);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
-  $background-palette: map.get($config, background);
-  $is-dark: map.get($config, is-dark);
-  $surface: theming.get-color-from-palette($background-palette, card);
+@function get-color-tokens($theme) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $surface: inspection.get-theme-color($theme, background, card);
 
   @return (
     container-color: if(meta.type-of($surface) == color,
@@ -71,26 +67,17 @@ $prefix: (mdc, snackbar);
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
-  // TODO(crisbeto): 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 (
-    supporting-text-font: typography-utils.font-family($config, body-2)
-      or typography-utils.font-family($config),
-    supporting-text-line-height: typography-utils.line-height($config, body-2),
-    supporting-text-size: typography-utils.font-size($config, body-2),
-    supporting-text-weight: typography-utils.font-weight($config, body-2),
+    supporting-text-font: inspection.get-theme-typography($theme, body-2, font-family),
+    supporting-text-line-height: inspection.get-theme-typography($theme, body-2, line-height),
+    supporting-text-size: inspection.get-theme-typography($theme, body-2, font-size),
+    supporting-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/mdc/_tab-indicator.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@use '../../../theming/theming';
+@use '../../../theming/inspection';
 @use '../../../style/sass-utils';
 @use '../../token-utils';
 
@@ -21,21 +20,19 @@ $prefix: (mdc, tab-indicator);
 }
 
 // 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 (
-    active-indicator-color: theming.get-color-from-palette($primary, default),
+    active-indicator-color: inspection.get-theme-color($theme, $palette-name, default),
   );
 }
 
 // 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/_tab.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use '../../../theming/theming';
+@use '../../../theming/inspection';
 @use '../../../style/sass-utils';
 @use '../../token-utils';
 
@@ -50,18 +51,18 @@ $prefix: (mdc, tab);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
+@function get-color-tokens($theme, $palette-name: primary) {
   @return ();
 }
 
 // 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, -4);
+@function get-density-tokens($theme) {
+  $scale: theming.clamp-density(inspection.get-theme-density($theme), -4);
 
   @return (
     container-height: map.get((