@angular/material 20.0.0-next.1 → 20.0.0-next.10

package/button/_fab-theme.scss

@@ -2,11 +2,8 @@
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/theming/validation';
-@use '../core/tokens/m2/mdc/fab' as tokens-mdc-fab;
-@use '../core/tokens/m2/mdc/fab-small' as tokens-mdc-fab-small;
-@use '../core/tokens/m2/mdc/extended-fab' as tokens-mdc-extended-fab;
-@use '../core/tokens/m2/mat/fab' as tokens-mat-fab;
-@use '../core/tokens/m2/mat/fab-small' as tokens-mat-fab-small;
+@use './m2-fab';
+@use './m3-fab';
 @use '../core/tokens/token-utils';
 @use '../core/typography/typography';
 
@@ -18,54 +15,22 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
-        tokens-mdc-fab.$prefix,
-        tokens-mdc-fab.get-unthemable-tokens()
-      );
-      @include token-utils.create-token-values(
-        tokens-mdc-fab-small.$prefix,
-        tokens-mdc-fab-small.get-unthemable-tokens()
-      );
-      @include token-utils.create-token-values(
-        tokens-mdc-extended-fab.$prefix,
-        tokens-mdc-extended-fab.get-unthemable-tokens()
+      @include token-utils.create-token-values-mixed(
+        m2-fab.$prefix,
+        m2-fab.get-unthemable-tokens()
       );
     }
   }
 }
 
 @mixin _fab-variant($theme, $palette) {
-  $mdc-tokens: if(
-    $palette,
-    tokens-mdc-fab.private-get-color-palette-color-tokens($theme, $palette),
-    tokens-mdc-fab.get-color-tokens($theme)
-  );
-
-  $mat-tokens: if(
-    $palette,
-    tokens-mat-fab.private-get-color-palette-color-tokens($theme, $palette),
-    tokens-mat-fab.get-color-tokens($theme)
-  );
-
-  @include token-utils.create-token-values(tokens-mdc-fab.$prefix, $mdc-tokens);
-  @include token-utils.create-token-values(tokens-mat-fab.$prefix, $mat-tokens);
-}
-
-@mixin _fab-small-variant($theme, $palette) {
-  $mdc-tokens: if(
-    $palette,
-    tokens-mdc-fab-small.private-get-color-palette-color-tokens($theme, $palette),
-    tokens-mdc-fab-small.get-color-tokens($theme)
-  );
-
   $mat-tokens: if(
     $palette,
-    tokens-mat-fab-small.private-get-color-palette-color-tokens($theme, $palette),
-    tokens-mat-fab-small.get-color-tokens($theme)
+    m2-fab.private-get-color-palette-color-tokens($theme, $palette),
+    m2-fab.get-color-tokens($theme)
   );
 
-  @include token-utils.create-token-values(tokens-mdc-fab-small.$prefix, $mdc-tokens);
-  @include token-utils.create-token-values(tokens-mat-fab-small.$prefix, $mat-tokens);
+  @include token-utils.create-token-values-mixed(m2-fab.$prefix, $mat-tokens);
 }
 
 /// Outputs color theme styles for the mat-fab.
@@ -79,13 +44,8 @@
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include _fab-variant($theme, null);
-      @include _fab-small-variant($theme, null);
-      @include token-utils.create-token-values(
-        tokens-mdc-extended-fab.$prefix,
-        tokens-mdc-extended-fab.get-color-tokens($theme)
-      );
 
-      .mat-mdc-fab {
+      .mat-mdc-fab, .mat-mdc-mini-fab {
         &.mat-primary {
           @include _fab-variant($theme, primary);
         }
@@ -98,20 +58,6 @@
           @include _fab-variant($theme, warn);
         }
       }
-
-      .mat-mdc-mini-fab {
-        &.mat-primary {
-          @include _fab-small-variant($theme, primary);
-        }
-
-        &.mat-accent {
-          @include _fab-small-variant($theme, accent);
-        }
-
-        &.mat-warn {
-          @include _fab-small-variant($theme, warn);
-        }
-      }
     }
   }
 }
@@ -123,17 +69,9 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
-        tokens-mdc-extended-fab.$prefix,
-        tokens-mdc-extended-fab.get-typography-tokens($theme)
-      );
-      @include token-utils.create-token-values(
-        tokens-mat-fab.$prefix,
-        tokens-mat-fab.get-typography-tokens($theme)
-      );
-      @include token-utils.create-token-values(
-        tokens-mat-fab-small.$prefix,
-        tokens-mat-fab-small.get-typography-tokens($theme)
+      @include token-utils.create-token-values-mixed(
+        m2-fab.$prefix,
+        m2-fab.get-typography-tokens($theme)
       );
     }
   }
@@ -143,16 +81,12 @@
 /// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+    @include token-utils.create-token-values(m3-fab.$prefix, m3-fab.get-density-tokens($theme));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
-        tokens-mat-fab.$prefix,
-        tokens-mat-fab.get-density-tokens($theme)
-      );
-      @include token-utils.create-token-values(
-        tokens-mat-fab-small.$prefix,
-        tokens-mat-fab-small.get-density-tokens($theme)
+      @include token-utils.create-token-values-mixed(
+        m2-fab.$prefix,
+        m2-fab.get-density-tokens($theme)
       );
     }
   }
@@ -162,27 +96,8 @@
 @function _define-overrides() {
   @return (
     (
-      namespace: tokens-mdc-fab.$prefix,
-      tokens: tokens-mdc-fab.get-token-slots(),
-    ),
-    (
-      namespace: tokens-mdc-fab-small.$prefix,
-      tokens: tokens-mdc-fab-small.get-token-slots(),
-      prefix: 'small-',
-    ),
-    (
-      namespace: tokens-mdc-extended-fab.$prefix,
-      tokens: tokens-mdc-extended-fab.get-token-slots(),
-      prefix: 'extended-',
-    ),
-    (
-      namespace: tokens-mat-fab.$prefix,
-      tokens: tokens-mat-fab.get-token-slots(),
-    ),
-    (
-      namespace: tokens-mat-fab-small.$prefix,
-      tokens: tokens-mat-fab-small.get-token-slots(),
-      prefix: 'small-',
+      namespace: m2-fab.$prefix,
+      tokens: m2-fab.get-token-slots(),
     ),
   );
 }
@@ -202,6 +117,9 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-fab') {
     @if inspection.get-theme-version($theme) == 1 {
       @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
     } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
@@ -221,29 +139,6 @@
   @include validation.selector-defined(
     'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
   );
-  $mdc-extended-fab-tokens: token-utils.get-tokens-for(
-    $tokens,
-    tokens-mdc-extended-fab.$prefix,
-    $options...
-  );
-  $mdc-fab-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-fab.$prefix, $options...);
-  $mdc-fab-small-tokens: token-utils.get-tokens-for(
-    $tokens,
-    tokens-mdc-fab-small.$prefix,
-    $options...
-  );
-  $mat-fab-tokens: token-utils.get-tokens-for($tokens, tokens-mat-fab.$prefix, $options...);
-  $mat-fab-small-tokens: token-utils.get-tokens-for(
-    $tokens,
-    tokens-mat-fab-small.$prefix,
-    $options...
-  );
-  @include token-utils.create-token-values(
-    tokens-mdc-extended-fab.$prefix,
-    $mdc-extended-fab-tokens
-  );
-  @include token-utils.create-token-values(tokens-mdc-fab.$prefix, $mdc-fab-tokens);
-  @include token-utils.create-token-values(tokens-mdc-fab-small.$prefix, $mdc-fab-small-tokens);
-  @include token-utils.create-token-values(tokens-mat-fab.$prefix, $mat-fab-tokens);
-  @include token-utils.create-token-values(tokens-mat-fab-small.$prefix, $mat-fab-small-tokens);
+  $mat-fab-tokens: token-utils.get-tokens-for($tokens, m2-fab.$prefix, $options...);
+  @include token-utils.create-token-values(m2-fab.$prefix, $mat-fab-tokens);
 }

package/button/_icon-button-theme.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use 'sass:math';
-@use '../core/tokens/m2/mdc/icon-button' as tokens-mdc-icon-button;
-@use '../core/tokens/m2/mat/icon-button' as tokens-mat-icon-button;
+@use './m2-icon-button';
+@use './m3-icon-button';
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
 @use '../core/theming/theming';
@@ -14,29 +14,22 @@
   } @else {
     // Add default values for tokens not related to color, typography, or density.
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
-        tokens-mdc-icon-button.$prefix,
-        tokens-mdc-icon-button.get-unthemable-tokens()
+      @include token-utils.create-token-values-mixed(
+        m2-icon-button.$prefix,
+        m2-icon-button.get-unthemable-tokens()
       );
     }
   }
 }
 
 @mixin _icon-button-variant($theme, $palette) {
-  $mdc-tokens: if(
-    $palette,
-    tokens-mdc-icon-button.private-get-color-palette-color-tokens($theme, $palette),
-    tokens-mdc-icon-button.get-color-tokens($theme)
-  );
-
   $mat-tokens: if(
     $palette,
-    tokens-mat-icon-button.private-get-color-palette-color-tokens($theme, $palette),
-    tokens-mat-icon-button.get-color-tokens($theme)
+    m2-icon-button.private-get-color-palette-color-tokens($theme, $palette),
+    m2-icon-button.get-color-tokens($theme)
   );
 
-  @include token-utils.create-token-values(tokens-mdc-icon-button.$prefix, $mdc-tokens);
-  @include token-utils.create-token-values(tokens-mat-icon-button.$prefix, $mat-tokens);
+  @include token-utils.create-token-values-mixed(m2-icon-button.$prefix, $mat-tokens);
 }
 
 /// Outputs color theme styles for the mat-icon-button.
@@ -72,9 +65,9 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
-        tokens-mat-icon-button.$prefix,
-        tokens-mat-icon-button.get-typography-tokens($theme)
+      @include token-utils.create-token-values-mixed(
+        m2-icon-button.$prefix,
+        m2-icon-button.get-typography-tokens($theme)
       );
     }
   }
@@ -82,7 +75,8 @@
 
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+    @include token-utils.create-token-values(
+        m3-icon-button.$prefix, m3-icon-button.get-density-tokens($theme));
   } @else {
     $icon-size: 24px;
     $density-scale: inspection.get-theme-density($theme);
@@ -97,9 +91,10 @@
     $calculated-size: map.get($size-map, $density-scale);
 
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
-        tokens-mat-icon-button.$prefix,
-        tokens-mat-icon-button.get-density-tokens($theme)
+      @include token-utils.create-token-values-mixed(
+        m2-icon-button.$prefix,
+        m2-icon-button.get-density-tokens(
+            $theme, $exclude: (state-layer-size))
       );
     }
 
@@ -108,14 +103,15 @@
       // Match the styles that used to be present. This is necessary for backwards
       // compat to match the previous implementations selector count (two classes).
       --mdc-icon-button-state-layer-size: #{$calculated-size};
+      --mat-icon-button-state-layer-size: #{$calculated-size};
 
-      // TODO: Switch calculated-size to "var(--mdc-icon-button-state-layer-size)"
+      // TODO: Switch calculated-size to "var(--mat-icon-button-state-layer-size)"
       // Currently fails validation because the variable is "undefined"
       // in the sass stack.
-      // TODO: Switch icon-size to "var(--mdc-icon-button-icon-size)". Currently
+      // TODO: Switch icon-size to "var(--mat-icon-button-icon-size)". Currently
       // fails validation because the variable is "undefined" in the sass stack.
-      width: var(--mdc-icon-button-state-layer-size);
-      height: var(--mdc-icon-button-state-layer-size);
+      width: var(--mat-icon-button-state-layer-size);
+      height: var(--mat-icon-button-state-layer-size);
       padding: math.div($calculated-size - $icon-size, 2);
     }
   }
@@ -125,12 +121,8 @@
 @function _define-overrides() {
   @return (
     (
-      namespace: tokens-mdc-icon-button.$prefix,
-      tokens: tokens-mdc-icon-button.get-token-slots(),
-    ),
-    (
-      namespace: tokens-mat-icon-button.$prefix,
-      tokens: tokens-mat-icon-button.get-token-slots(),
+      namespace: m2-icon-button.$prefix,
+      tokens: m2-icon-button.get-token-slots(),
     ),
   );
 }
@@ -147,6 +139,9 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-icon-button') {
     @if inspection.get-theme-version($theme) == 1 {
       @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
     } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
@@ -167,10 +162,8 @@
     'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
   );
   @if ($tokens != ()) {
-    $mdc-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-icon-button.$prefix, $options...);
-    $mat-tokens: token-utils.get-tokens-for($tokens, tokens-mat-icon-button.$prefix, $options...);
+    $mat-tokens: token-utils.get-tokens-for($tokens, m2-icon-button.$prefix, $options...);
 
-    @include token-utils.create-token-values(tokens-mdc-icon-button.$prefix, $mdc-tokens);
-    @include token-utils.create-token-values(tokens-mat-icon-button.$prefix, $mat-tokens);
+    @include token-utils.create-token-values(m2-icon-button.$prefix, $mat-tokens);
   }
 }

package/button/_m2-button.scss

@@ -0,0 +1,249 @@
+@use 'sass:meta';
+@use 'sass:map';
+@use '../core/tokens/m2-utils';
+@use '../core/theming/theming';
+@use '../core/theming/inspection';
+@use '../core/style/sass-utils';
+@use '../core/style/elevation';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, button);
+
+// 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 (
+    filled-container-shape: 4px,
+    filled-horizontal-padding: 16px,
+    filled-icon-offset: -4px,
+    filled-icon-spacing: 8px,
+    outlined-container-shape: 4px,
+    outlined-horizontal-padding: 15px, // Normally it's 16px, but -1px for the outline.
+    outlined-icon-offset: -4px,
+    outlined-icon-spacing: 8px,
+    outlined-keep-touch-target: false,
+    outlined-outline-width: 1px,
+    protected-container-elevation-shadow: elevation.get-box-shadow(2),
+    protected-container-shape: 4px,
+    protected-disabled-container-elevation-shadow: elevation.get-box-shadow(0),
+    protected-focus-container-elevation-shadow: elevation.get-box-shadow(4),
+    protected-horizontal-padding: 16px,
+    protected-hover-container-elevation-shadow: elevation.get-box-shadow(4),
+    protected-icon-offset: -4px,
+    protected-icon-spacing: 8px,
+    protected-pressed-container-elevation-shadow: elevation.get-box-shadow(8),
+    text-container-shape: 4px,
+    text-horizontal-padding: 8px,
+    text-icon-offset: 0,
+    text-icon-spacing: 8px,
+    text-with-icon-horizontal-padding: 8px,
+    tonal-container-shape: 4px,
+    tonal-horizontal-padding: 16px,
+    tonal-icon-offset: -4px,
+    tonal-icon-spacing: 8px,
+  );
+}
+
+// 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;
+
+  // Ideally we would derive all values directly from the theme, but it causes a lot of regressions
+  // internally. For now we fall back to the old hardcoded behavior only for internal apps.
+  $outline: if(m2-utils.$private-is-internal-build,
+    rgba(if($is-dark, #fff, #000), 0.12),
+    inspection.get-theme-color($theme, foreground, divider)
+  );
+
+  @return (
+    filled-container-color: inspection.get-theme-color($theme, background, card),
+    filled-disabled-container-color:
+        inspection.get-theme-color($theme, foreground, disabled-button, 0.12),
+    filled-disabled-label-text-color:
+        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
+    filled-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+    filled-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    filled-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
+    filled-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
+    filled-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    filled-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
+    filled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+    outlined-disabled-label-text-color:
+        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
+    outlined-disabled-outline-color: $outline,
+    outlined-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+    outlined-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    outlined-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
+    outlined-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
+    outlined-outline-color: $outline,
+    outlined-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    outlined-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
+    outlined-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+    protected-container-color: inspection.get-theme-color($theme, background, card),
+    protected-disabled-container-color:
+        inspection.get-theme-color($theme, foreground, disabled-button, 0.12),
+    protected-disabled-label-text-color:
+        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
+    protected-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+    protected-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    protected-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
+    protected-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
+    protected-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    protected-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
+    protected-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+    text-disabled-label-text-color:
+        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
+    text-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+    text-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    text-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
+    text-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
+    text-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    text-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
+    text-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+    tonal-container-color: inspection.get-theme-color($theme, background, card),
+    tonal-disabled-container-color:
+        inspection.get-theme-color($theme, foreground, disabled-button, 0.12),
+    tonal-disabled-label-text-color:
+        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
+    tonal-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+    tonal-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    tonal-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
+    tonal-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
+    tonal-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    tonal-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
+    tonal-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+  );
+}
+
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $color: inspection.get-theme-color($theme, $palette-name);
+  $state-layer-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1);
+  $ripple-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 0.1);
+  $contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
+  $container-color: inspection.get-theme-color($theme, $palette-name, default);
+  $label-text-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1);
+  $ripple-opacity: 0.1;
+
+  // Ideally we would derive all values directly from the theme, but it causes a lot of regressions
+  // internally. For now we fall back to the old hardcoded behavior only for internal apps.
+  @if (m2-utils.$private-is-internal-build or
+      meta.type-of($contrast-color) != 'color') {
+    $is-dark: inspection.get-theme-type($theme) == dark;
+    $container-color: inspection.get-theme-color($theme, $palette-name);
+    $contrast-tone: m2-utils.contrast-tone($container-color, $is-dark);
+    $color: if($contrast-tone == 'dark', #000, #fff);
+    $state-layer-color: $color;
+    $ripple-color: rgba($color, 0.1);
+    $label-text-color: if($contrast-tone == 'dark', #000, #fff);
+  }
+
+  // outlined-outline-color:
+  // TODO: we shouldn't have to set this since it's the same as the non-palette version, however
+  // there are a bunch of tests internally that depend on it. We should remove this and clean
+  // up the screenshots separately.
+  @return (
+    filled-container-color: $container-color,
+    filled-label-text-color: $label-text-color,
+    filled-ripple-color: $ripple-color,
+    filled-state-layer-color: $state-layer-color,
+    outlined-label-text-color: inspection.get-theme-color($theme, $palette-name, default),
+    outlined-outline-color: map.get(get-color-tokens($theme), outlined-outline-color),
+    outlined-ripple-color:
+        if(
+          meta.type-of(inspection.get-theme-color($theme, $palette-name)) == color,
+          rgba(inspection.get-theme-color($theme, $palette-name), $ripple-opacity),
+          inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
+    outlined-state-layer-color: inspection.get-theme-color($theme, $palette-name),
+    protected-container-color: $container-color,
+    protected-label-text-color: $label-text-color,
+    protected-ripple-color: $ripple-color,
+    protected-state-layer-color: $state-layer-color,
+    text-label-text-color: inspection.get-theme-color($theme, $palette-name),
+    text-ripple-color:
+        if(meta.type-of(inspection.get-theme-color($theme, $palette-name)) == color,
+          rgba(inspection.get-theme-color($theme, $palette-name), $ripple-opacity),
+          inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
+    text-state-layer-color: inspection.get-theme-color($theme, $palette-name),
+    tonal-container-color: inspection.get-theme-color($theme, $palette-name, default),
+    tonal-label-text-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1),
+    tonal-ripple-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 0.1),
+    tonal-state-layer-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  $font-family: inspection.get-theme-typography($theme, button, font-family);
+  $font-size: inspection.get-theme-typography($theme, button, font-size);
+  $font-weight: inspection.get-theme-typography($theme, button, font-weight);
+  $letter-spacing: inspection.get-theme-typography($theme, button, letter-spacing);
+  $text-transform: none;
+
+  @return (
+    filled-label-text-font: $font-family,
+    filled-label-text-size: $font-size,
+    filled-label-text-tracking: $letter-spacing,
+    filled-label-text-transform: none,
+    filled-label-text-weight: $font-weight,
+    outlined-label-text-font: $font-family,
+    outlined-label-text-size: $font-size,
+    outlined-label-text-tracking: $letter-spacing,
+    outlined-label-text-transform: none,
+    outlined-label-text-weight: $font-weight,
+    protected-label-text-font: $font-family,
+    protected-label-text-size: $font-size,
+    protected-label-text-tracking: $letter-spacing,
+    protected-label-text-transform: none,
+    protected-label-text-weight: $font-weight,
+    text-label-text-font: $font-family,
+    text-label-text-size: $font-size,
+    text-label-text-tracking: $letter-spacing,
+    text-label-text-transform: none,
+    text-label-text-weight: $font-weight,
+    tonal-label-text-font: $font-family,
+    tonal-label-text-size: $font-size,
+    tonal-label-text-tracking: $letter-spacing,
+    tonal-label-text-transform: none,
+    tonal-label-text-weight: $font-weight,
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
+  $scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
+  $sizes: (
+    0: 36px,
+    -1: 32px,
+    -2: 28px,
+    -3: 24px,
+  );
+
+  $height: map.get($sizes, $scale);
+  $touch-target-display: if($scale < -1, none, block);
+
+  @return (
+    filled-container-height: $height,
+    filled-touch-target-display: $touch-target-display,
+    outlined-container-height: $height,
+    outlined-touch-target-display: $touch-target-display,
+    protected-container-height: $height,
+    protected-touch-target-display: $touch-target-display,
+    text-container-height: $height,
+    text-touch-target-display: $touch-target-display,
+    tonal-container-height: $height,
+    tonal-touch-target-display: $touch-target-display,
+  );
+}
+
+// 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(m2-utils.$placeholder-color-config),
+      get-typography-tokens(m2-utils.$placeholder-typography-config),
+      get-density-tokens(m2-utils.$placeholder-density-config)
+  );
+}