@angular/material 20.0.0-rc.1 → 20.0.0-rc.2

package/button/_m3-button.scss

@@ -1,260 +1,165 @@
 @use 'sass:map';
 @use 'sass:list';
 @use '../core/tokens/m3-utils';
-@use '../core/style/sass-utils';
+@use '../core/tokens/m3';
 @use '../core/style/elevation';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, button);
 
-/// Generates custom tokens for the mat-flat-button.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @param {Map} $token-slots Possible token slots
-/// @return {Map} A set of custom tokens for the mat-flat-button
-@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: (
-    filled-container-color: map.get($systems, md-sys-color, primary),
-    filled-container-shape: map.get($systems, md-sys-shape, corner-full),
-    filled-disabled-container-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-surface), $alpha: 0.12),
-    filled-disabled-label-text-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
-    filled-disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
-    filled-focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
-    filled-horizontal-padding: m3-utils.hardcode(24px, $exclude-hardcoded),
-    filled-hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
-    filled-icon-offset: m3-utils.hardcode(-8px, $exclude-hardcoded),
-    filled-icon-spacing: m3-utils.hardcode(8px, $exclude-hardcoded),
-    filled-label-text-color: map.get($systems, md-sys-color, on-primary),
-    filled-label-text-font: map.get($systems, md-sys-typescale, label-large-font),
-    filled-label-text-size: map.get($systems, md-sys-typescale, label-large-size),
-    filled-label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking),
-    filled-label-text-weight: map.get($systems, md-sys-typescale, label-large-weight),
-    filled-pressed-state-layer-opacity:
-    map.get($systems, md-sys-state, pressed-state-layer-opacity),
-    filled-ripple-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-primary),
-        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)    ),
-    filled-state-layer-color: map.get($systems, md-sys-color, on-primary),
-    outlined-container-shape: map.get($systems, md-sys-shape, corner-full),
-    outlined-disabled-label-text-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
-    outlined-disabled-outline-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-surface), $alpha: 0.12),
-    outlined-disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
-    outlined-focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
-    outlined-horizontal-padding: m3-utils.hardcode(24px, $exclude-hardcoded),
-    outlined-hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
-    outlined-icon-offset: m3-utils.hardcode(-8px, $exclude-hardcoded),
-    outlined-icon-spacing: m3-utils.hardcode(8px, $exclude-hardcoded),
-    outlined-label-text-color: map.get($systems, md-sys-color, primary),
-    outlined-label-text-font: map.get($systems, md-sys-typescale, label-large-font),
-    outlined-label-text-size: map.get($systems, md-sys-typescale, label-large-size),
-    outlined-label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking),
-    outlined-label-text-weight: map.get($systems, md-sys-typescale, label-large-weight),
-    outlined-outline-color: map.get($systems, md-sys-color, outline),
-    outlined-outline-width: if($exclude-hardcoded, null, 1px),
-    outlined-pressed-state-layer-opacity:
-      map.get($systems, md-sys-state, pressed-state-layer-opacity),
-    outlined-ripple-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, primary),
-        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
-    outlined-state-layer-color: map.get($systems, md-sys-color, primary),
-    protected-container-color: map.get($systems, md-sys-color, surface),
-    protected-container-elevation-shadow: map.get($systems, md-sys-elevation, level1),
-    protected-container-shape: map.get($systems, md-sys-shape, corner-full),
-    protected-disabled-container-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-surface), $alpha: 0.12),
-    protected-disabled-container-elevation-shadow: map.get($systems, md-sys-elevation, level0),
-    protected-disabled-label-text-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
-    protected-disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
-    protected-focus-container-elevation-shadow: map.get($systems, md-sys-elevation, level1),
-    protected-focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
-    protected-horizontal-padding: m3-utils.hardcode(24px, $exclude-hardcoded),
-    protected-hover-container-elevation-shadow: map.get($systems, md-sys-elevation, level2),
-    protected-hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
-    protected-icon-offset: m3-utils.hardcode(-8px, $exclude-hardcoded),
-    protected-icon-spacing: m3-utils.hardcode(8px, $exclude-hardcoded),
-    protected-label-text-color: map.get($systems, md-sys-color, primary),
-    protected-label-text-font: map.get($systems, md-sys-typescale, label-large-font),
-    protected-label-text-size: map.get($systems, md-sys-typescale, label-large-size),
-    protected-label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking),
-    protected-label-text-weight: map.get($systems, md-sys-typescale, label-large-weight),
-    protected-pressed-container-elevation-shadow: map.get($systems, md-sys-elevation, level1),
-    protected-pressed-state-layer-opacity:
-        map.get($systems, md-sys-state, pressed-state-layer-opacity),
-    protected-ripple-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, primary),
-        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
-    protected-state-layer-color: map.get($systems, md-sys-color, primary),
-    text-container-shape: map.get($systems, md-sys-shape, corner-full),
-    text-disabled-label-text-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
-    text-disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
-    text-focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
-    text-horizontal-padding: m3-utils.hardcode(12px, $exclude-hardcoded),
-    text-hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
-    text-icon-offset: m3-utils.hardcode(-4px, $exclude-hardcoded),
-    text-icon-spacing: m3-utils.hardcode(8px, $exclude-hardcoded),
-    text-label-text-color: map.get($systems, md-sys-color, primary),
-    text-label-text-font: map.get($systems, md-sys-typescale, label-large-font),
-    text-label-text-size: map.get($systems, md-sys-typescale, label-large-size),
-    text-label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking),
-    text-label-text-weight: map.get($systems, md-sys-typescale, label-large-weight),
-    text-pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity),
-    text-ripple-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, primary),
-        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
-    text-state-layer-color: map.get($systems, md-sys-color, primary),
-    text-with-icon-horizontal-padding: m3-utils.hardcode(16px, $exclude-hardcoded),
-    tonal-container-color: map.get($systems, md-sys-color, secondary-container),
-    tonal-container-shape: map.get($systems, md-sys-shape, corner-full),
-    tonal-disabled-container-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-surface), $alpha: 0.12),
-    tonal-disabled-label-text-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
-    tonal-disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
-    tonal-focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
-    tonal-horizontal-padding: m3-utils.hardcode(24px, $exclude-hardcoded),
-    tonal-hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
-    tonal-icon-offset: m3-utils.hardcode(-8px, $exclude-hardcoded),
-    tonal-icon-spacing: m3-utils.hardcode(8px, $exclude-hardcoded),
-    tonal-label-text-color: map.get($systems, md-sys-color, on-secondary-container),
-    tonal-label-text-font: map.get($systems, md-sys-typescale, label-large-font),
-    tonal-label-text-size: map.get($systems, md-sys-typescale, label-large-size),
-    tonal-label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking),
-    tonal-label-text-weight: map.get($systems, md-sys-typescale, label-large-weight),
-    tonal-pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity),
-    tonal-ripple-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-secondary-container),
-        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
-    tonal-state-layer-color: map.get($systems, md-sys-color, on-secondary-container),
-  );
+/// Generates custom tokens for the button.
+@function get-tokens($theme: m3.$sys-theme, $color-variant: null) {
+  $system: m3-utils.get-system($theme);
+  @if $color-variant {
+    $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
+    $system: m3-utils.replace-colors-with-variant($system, secondary, $color-variant);
+  }
 
-  $variant-tokens: (
-    primary: (), // Default, no overrides needed.
-    secondary: (
-      filled-container-color: map.get($systems, md-sys-color, secondary),
-      filled-label-text-color: map.get($systems, md-sys-color, on-secondary),
-      filled-ripple-color: sass-utils.safe-color-change(
-          map.get($systems, md-sys-color, on-secondary),
-          $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
-      filled-state-layer-color: map.get($systems, md-sys-color, on-secondary),
-      outlined-label-text-color: map.get($systems, md-sys-color, secondary),
-      outlined-ripple-color: sass-utils.safe-color-change(
-          map.get($systems, md-sys-color, secondary),
-          $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
-      outlined-state-layer-color: map.get($systems, md-sys-color, secondary),
-      protected-label-text-color: map.get($systems, md-sys-color, secondary),
-      protected-ripple-color: sass-utils.safe-color-change(
-          map.get($systems, md-sys-color, secondary),
-          $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
-      protected-state-layer-color: map.get($systems, md-sys-color, secondary),
-      text-label-text-color: map.get($systems, md-sys-color, secondary),
-      text-ripple-color: sass-utils.safe-color-change(
-          map.get($systems, md-sys-color, secondary),
-          $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
-      text-state-layer-color: map.get($systems, md-sys-color, secondary),
+  @return (
+    base: (
+      button-filled-container-shape: map.get($system, corner-full),
+      button-filled-horizontal-padding: 24px,
+      button-filled-icon-offset: -8px,
+      button-filled-icon-spacing: 8px,
+      button-filled-label-text-transform: null,
+      button-outlined-container-shape: map.get($system, corner-full),
+      button-outlined-horizontal-padding: 24px,
+      button-outlined-icon-offset: -8px,
+      button-outlined-icon-spacing: 8px,
+      button-outlined-outline-width: 1px,
+      button-outlined-label-text-transform: null,
+      button-protected-container-shape: map.get($system, corner-full),
+      button-protected-horizontal-padding: 24px,
+      button-protected-icon-offset: -8px,
+      button-protected-icon-spacing: 8px,
+      button-protected-label-text-transform: null,
+      button-text-container-shape: map.get($system, corner-full),
+      button-text-horizontal-padding: 12px,
+      button-text-icon-offset: -4px,
+      button-text-icon-spacing: 8px,
+      button-text-with-icon-horizontal-padding: 16px,
+      button-text-label-text-transform: null,
+      button-tonal-container-shape: map.get($system, corner-full),
+      button-tonal-horizontal-padding: 24px,
+      button-tonal-icon-offset: -8px,
+      button-tonal-icon-spacing: 8px,
+      button-tonal-label-text-transform: null,
     ),
-    tertiary: (
-      filled-container-color: map.get($systems, md-sys-color, tertiary),
-      filled-label-text-color: map.get($systems, md-sys-color, on-tertiary),
-      filled-ripple-color: sass-utils.safe-color-change(
-          map.get($systems, md-sys-color, on-tertiary),
-          $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
-      filled-state-layer-color: map.get($systems, md-sys-color, on-tertiary),
-      outlined-label-text-color: map.get($systems, md-sys-color, tertiary),
-      outlined-ripple-color: sass-utils.safe-color-change(
-          map.get($systems, md-sys-color, tertiary),
-          $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
-      outlined-state-layer-color: map.get($systems, md-sys-color, tertiary),
-      protected-label-text-color: map.get($systems, md-sys-color, tertiary),
-      protected-ripple-color: sass-utils.safe-color-change(
-          map.get($systems, md-sys-color, tertiary),
-          $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
-      protected-state-layer-color: map.get($systems, md-sys-color, tertiary),
-      text-label-text-color: map.get($systems, md-sys-color, tertiary),
-      text-ripple-color: sass-utils.safe-color-change(
-          map.get($systems, md-sys-color, tertiary),
-          $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
-      text-state-layer-color: map.get($systems, md-sys-color, tertiary),
-      tonal-container-color: map.get($systems, md-sys-color, tertiary-container),
-      tonal-label-text-color: map.get($systems, md-sys-color, on-tertiary-container),
-      tonal-ripple-color: sass-utils.safe-color-change(
-          map.get($systems, md-sys-color, on-tertiary-container),
-          $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
-      tonal-state-layer-color: map.get($systems, md-sys-color, on-tertiary-container),
+    color: (
+      button-filled-container-color: map.get($system, primary),
+      button-filled-disabled-container-color:
+          m3-utils.color-with-opacity(map.get($system, on-surface), 12%),
+      button-filled-disabled-label-text-color:
+          m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+      button-filled-disabled-state-layer-color: map.get($system, on-surface-variant),
+      button-filled-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+      button-filled-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+      button-filled-label-text-color: map.get($system, on-primary),
+      button-filled-pressed-state-layer-opacity:map.get($system, pressed-state-layer-opacity),
+      button-filled-ripple-color: m3-utils.color-with-opacity(
+          map.get($system, on-primary), map.get($system, pressed-state-layer-opacity)),
+      button-filled-state-layer-color: map.get($system, on-primary),
+      button-outlined-disabled-label-text-color:
+          m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+      button-outlined-disabled-outline-color:
+          m3-utils.color-with-opacity(map.get($system, on-surface), 12%),
+      button-outlined-disabled-state-layer-color: map.get($system, on-surface-variant),
+      button-outlined-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+      button-outlined-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+      button-outlined-label-text-color: map.get($system, primary),
+      button-outlined-outline-color: map.get($system, outline),
+      button-outlined-pressed-state-layer-opacity:map.get($system, pressed-state-layer-opacity),
+      button-outlined-ripple-color: m3-utils.color-with-opacity(
+          map.get($system, primary), map.get($system, pressed-state-layer-opacity)),
+      button-outlined-state-layer-color: map.get($system, primary),
+      button-protected-container-color: map.get($system, surface),
+      button-protected-container-elevation-shadow:
+          elevation.get-box-shadow(map.get($system, level1)),
+      button-protected-disabled-container-color:
+          m3-utils.color-with-opacity(map.get($system, on-surface), 12%),
+      button-protected-disabled-container-elevation-shadow:
+          elevation.get-box-shadow(map.get($system, level0)),
+      button-protected-disabled-label-text-color:
+          m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+      button-protected-disabled-state-layer-color: map.get($system, on-surface-variant),
+      button-protected-focus-container-elevation-shadow:
+          elevation.get-box-shadow(map.get($system, level1)),
+      button-protected-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+      button-protected-hover-container-elevation-shadow:
+          elevation.get-box-shadow(map.get($system, level2)),
+      button-protected-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+      button-protected-label-text-color: map.get($system, primary),
+      button-protected-pressed-container-elevation-shadow:
+          elevation.get-box-shadow(map.get($system, level1)),
+      button-protected-pressed-state-layer-opacity:map.get($system, pressed-state-layer-opacity),
+      button-protected-ripple-color: m3-utils.color-with-opacity(
+          map.get($system, primary), map.get($system, pressed-state-layer-opacity)),
+      button-protected-state-layer-color: map.get($system, primary),
+      button-text-disabled-label-text-color:
+          m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+      button-text-disabled-state-layer-color: map.get($system, on-surface-variant),
+      button-text-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+      button-text-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+      button-text-label-text-color: map.get($system, primary),
+      button-text-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
+      button-text-ripple-color: m3-utils.color-with-opacity(
+          map.get($system, primary), map.get($system, pressed-state-layer-opacity)),
+      button-text-state-layer-color: map.get($system, primary),
+      button-tonal-container-color: map.get($system, secondary-container),
+      button-tonal-disabled-container-color:
+          m3-utils.color-with-opacity(map.get($system, on-surface), 12%),
+      button-tonal-disabled-label-text-color:
+          m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+      button-tonal-disabled-state-layer-color: map.get($system, on-surface-variant),
+      button-tonal-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+      button-tonal-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+      button-tonal-label-text-color: map.get($system, on-secondary-container),
+      button-tonal-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
+      button-tonal-ripple-color: m3-utils.color-with-opacity(
+          map.get($system, on-secondary-container), map.get($system, pressed-state-layer-opacity)),
+      button-tonal-state-layer-color: map.get($system, on-secondary-container),
     ),
-    error: (
-      filled-container-color: map.get($systems, md-sys-color, error),
-      filled-label-text-color: map.get($systems, md-sys-color, on-error),
-      filled-ripple-color: sass-utils.safe-color-change(
-          map.get($systems, md-sys-color, on-error),
-          $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
-      filled-state-layer-color: map.get($systems, md-sys-color, on-error),
-      outlined-label-text-color: map.get($systems, md-sys-color, error),
-      outlined-ripple-color: sass-utils.safe-color-change(
-          map.get($systems, md-sys-color, error),
-          $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
-      outlined-state-layer-color: map.get($systems, md-sys-color, error),
-      protected-label-text-color: map.get($systems, md-sys-color, error),
-      protected-ripple-color: sass-utils.safe-color-change(
-          map.get($systems, md-sys-color, error),
-          $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
-      protected-state-layer-color: map.get($systems, md-sys-color, error),
-      text-label-text-color: map.get($systems, md-sys-color, error),
-      text-ripple-color: sass-utils.safe-color-change(
-          map.get($systems, md-sys-color, error),
-          $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
-      text-state-layer-color: map.get($systems, md-sys-color, error),
-      tonal-container-color: map.get($systems, md-sys-color, error-container),
-      tonal-label-text-color: map.get($systems, md-sys-color, on-error-container),
-      tonal-ripple-color: sass-utils.safe-color-change(
-          map.get($systems, md-sys-color, on-error-container),
-          $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
-      tonal-state-layer-color: map.get($systems, md-sys-color, on-error-container),
-    )
-  );
-
-  $elevation-tokens: (
-    protected-container-elevation-shadow,
-    protected-disabled-container-elevation-shadow,
-    protected-focus-container-elevation-shadow,
-    protected-hover-container-elevation-shadow,
-    protected-pressed-container-elevation-shadow,
+    typography: (
+      button-filled-label-text-font: map.get($system, label-large-font),
+      button-filled-label-text-size: map.get($system, label-large-size),
+      button-filled-label-text-tracking: map.get($system, label-large-tracking),
+      button-filled-label-text-weight: map.get($system, label-large-weight),
+      button-outlined-label-text-font: map.get($system, label-large-font),
+      button-outlined-label-text-size: map.get($system, label-large-size),
+      button-outlined-label-text-tracking: map.get($system, label-large-tracking),
+      button-outlined-label-text-weight: map.get($system, label-large-weight),
+      button-protected-label-text-font: map.get($system, label-large-font),
+      button-protected-label-text-size: map.get($system, label-large-size),
+      button-protected-label-text-tracking: map.get($system, label-large-tracking),
+      button-protected-label-text-weight: map.get($system, label-large-weight),
+      button-text-label-text-font: map.get($system, label-large-font),
+      button-text-label-text-size: map.get($system, label-large-size),
+      button-text-label-text-tracking: map.get($system, label-large-tracking),
+      button-text-label-text-weight: map.get($system, label-large-weight),
+      button-tonal-label-text-font: map.get($system, label-large-font),
+      button-tonal-label-text-size: map.get($system, label-large-size),
+      button-tonal-label-text-tracking: map.get($system, label-large-tracking),
+      button-tonal-label-text-weight: map.get($system, label-large-weight),
+    ),
+    density: get-density-tokens(map.get($theme, inspection.$internals, density-scale)),
   );
-
-  @each $token in $elevation-tokens {
-    $elevation: map.get($tokens, $token);
-
-    @if ($elevation != null) {
-      $tokens: map.set($tokens, $token, elevation.get-box-shadow($elevation));
-    }
-  }
-
-
-  @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
 }
 
 // Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($theme) {
-  $scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
+@function get-density-tokens($scale) {
+  $scale: theming.clamp-density($scale, -3);
   $index: ($scale * -1) + 1;
 
   @return (
-    filled-touch-target-display: list.nth((block, block, none, none), $index),
-    filled-container-height: list.nth((40px, 36px, 32px, 28px), $index),
-    outlined-container-height: list.nth((40px, 36px, 32px, 28px), $index),
-    outlined-touch-target-display: list.nth((block, block, none, none), $index),
-    protected-touch-target-display: list.nth((block, block, none, none), $index),
-    protected-container-height: list.nth((40px, 36px, 32px, 28px), $index),
-    text-touch-target-display: list.nth((block, block, none, none), $index),
-    text-container-height: list.nth((40px, 36px, 32px, 28px), $index),
-    tonal-container-height: list.nth((40px, 36px, 32px, 28px), $index),
-    tonal-touch-target-display: list.nth((block, block, none, none), $index),
+    button-filled-touch-target-display: list.nth((block, block, none, none), $index),
+    button-filled-container-height: list.nth((40px, 36px, 32px, 28px), $index),
+    button-outlined-container-height: list.nth((40px, 36px, 32px, 28px), $index),
+    button-outlined-touch-target-display: list.nth((block, block, none, none), $index),
+    button-protected-touch-target-display: list.nth((block, block, none, none), $index),
+    button-protected-container-height: list.nth((40px, 36px, 32px, 28px), $index),
+    button-text-touch-target-display: list.nth((block, block, none, none), $index),
+    button-text-container-height: list.nth((40px, 36px, 32px, 28px), $index),
+    button-tonal-container-height: list.nth((40px, 36px, 32px, 28px), $index),
+    button-tonal-touch-target-display: list.nth((block, block, none, none), $index),
   );
 }