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

package/button/_m2-fab.scss

@@ -0,0 +1,132 @@
+@use 'sass:meta';
+@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, fab);
+
+// 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 (
+    container-elevation-shadow: elevation.get-box-shadow(6),
+    container-shape: 50%,
+    extended-container-elevation-shadow: elevation.get-box-shadow(6),
+    extended-container-height: 48px,
+    extended-container-shape: 24px,
+    extended-focus-container-elevation-shadow: elevation.get-box-shadow(8),
+    extended-hover-container-elevation-shadow: elevation.get-box-shadow(8),
+    extended-pressed-container-elevation-shadow: elevation.get-box-shadow(12),
+    focus-container-elevation-shadow: elevation.get-box-shadow(8),
+    hover-container-elevation-shadow: elevation.get-box-shadow(8),
+    pressed-container-elevation-shadow: elevation.get-box-shadow(12),
+    small-container-elevation-shadow: elevation.get-box-shadow(6),
+    small-container-shape: 50%,
+    small-focus-container-elevation-shadow: elevation.get-box-shadow(8),
+    small-hover-container-elevation-shadow: elevation.get-box-shadow(8),
+    small-pressed-container-elevation-shadow: elevation.get-box-shadow(12),
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+
+  @return (
+    container-color: inspection.get-theme-color($theme, background, card),
+    disabled-state-container-color:
+        inspection.get-theme-color($theme, background, disabled-button, 0.12),
+    disabled-state-foreground-color:
+        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
+    disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+    focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    foreground-color: inspection.get-theme-color($theme, foreground, base),
+    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
+    pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
+    small-container-color: inspection.get-theme-color($theme, background, card),
+    small-disabled-state-container-color:
+        inspection.get-theme-color($theme, background, disabled-button, 0.12),
+    small-disabled-state-foreground-color:
+        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
+    small-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+    small-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    small-foreground-color: inspection.get-theme-color($theme, foreground, base),
+    small-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
+    small-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    small-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
+    small-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+    state-layer-color: inspection.get-theme-color($theme, foreground, base),
+  );
+}
+
+// Generates the mapping for the properties that change based on the FAB palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  // 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.
+  $foreground-color: null;
+  $state-layer-color: null;
+  $ripple-color: null;
+  $contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
+
+  @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);
+    $foreground-color: $color;
+    $state-layer-color: $color;
+    $ripple-color: rgba($color, 0.1);
+  }
+  @else {
+    $foreground-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1);
+    $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);
+  }
+
+  @return (
+    container-color: inspection.get-theme-color($theme, $palette-name, default),
+    foreground-color: $foreground-color,
+    ripple-color: $ripple-color,
+    small-container-color: inspection.get-theme-color($theme, $palette-name, default),
+    small-foreground-color: $foreground-color,
+    small-ripple-color: $ripple-color,
+    small-state-layer-color: $state-layer-color,
+    state-layer-color: $state-layer-color,
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return (
+    extended-label-text-font: inspection.get-theme-typography($theme, button, font-family),
+    extended-label-text-size: inspection.get-theme-typography($theme, button, font-size),
+    extended-label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing),
+    extended-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($theme) {
+  $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
+
+  @return (
+    small-touch-target-display: if($density-scale < -1, none, block),
+    touch-target-display: if($density-scale < -1, none, block),
+  );
+}
+
+// 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)
+  );
+}

package/{core/tokens/m2/mat/_icon-button.scss → button/_m2-icon-button.scss}

@@ -1,8 +1,9 @@
 @use 'sass:meta';
-@use '../../token-definition';
-@use '../../../theming/theming';
-@use '../../../theming/inspection';
-@use '../../../style/sass-utils';
+@use 'sass:map';
+@use '../core/tokens/m2-utils';
+@use '../core/theming/theming';
+@use '../core/theming/inspection';
+@use '../core/style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, icon-button);
@@ -10,7 +11,9 @@ $prefix: (mat, icon-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 ();
+  @return (
+    icon-size: 24px,
+  );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
@@ -18,23 +21,14 @@ $prefix: (mat, icon-button);
   $is-dark: inspection.get-theme-type($theme) == dark;
 
   @return (
-    // Color of the element that shows the hover, focus and pressed states.
-    state-layer-color: inspection.get-theme-color($theme, foreground, base),
-
-    // Color of the element that shows the hover, focus and pressed states while disabled.
+    disabled-icon-color: if($is-dark, rgba(#fff, 0.5), rgba(#000, 0.38)),
     disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-
-    // Color of the ripple element.
-    ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
-
-    // Opacity of the ripple when the button is hovered.
-    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
-
-    // Opacity of the ripple when the button is focused.
     focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
-
-    // Opacity of the ripple when the button is pressed.
+    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
+    icon-color: inherit,
     pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
+    state-layer-color: inspection.get-theme-color($theme, foreground, base),
   );
 }
 
@@ -44,6 +38,7 @@ $prefix: (mat, icon-button);
   $ripple-opacity: 0.1;
 
   @return (
+    icon-color: inspection.get-theme-color($theme, $palette-name),
     state-layer-color: $color,
     ripple-color: if(
       meta.type-of($color) == color,
@@ -58,12 +53,26 @@ $prefix: (mat, icon-button);
 }
 
 // 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);
+@function get-density-tokens($theme, $exclude: ()) {
+  $scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
 
-  @return (
-    touch-target-display: if($density-scale < -1, none, block),
+  $tokens: (
+    touch-target-display: if($scale < -1, none, block),
+    state-layer-size: map.get((
+      0: 48px,
+      -1: 44px,
+      -2: 40px,
+      -3: 36px,
+      -4: 32px,
+      -5: 28px,
+    ), $scale)
   );
+
+  @each $token in $exclude {
+    $tokens: map.remove($tokens, $token);
+  }
+
+  @return $tokens;
 }
 
 // Combines the tokens generated by the above functions into a single map with placeholder values.
@@ -71,8 +80,8 @@ $prefix: (mat, icon-button);
 @function get-token-slots() {
   @return sass-utils.deep-merge-all(
       get-unthemable-tokens(),
-      get-color-tokens(token-definition.$placeholder-color-config),
-      get-typography-tokens(token-definition.$placeholder-typography-config),
-      get-density-tokens(token-definition.$placeholder-density-config)
+      get-color-tokens(m2-utils.$placeholder-color-config),
+      get-typography-tokens(m2-utils.$placeholder-typography-config),
+      get-density-tokens(m2-utils.$placeholder-density-config)
   );
 }

package/button/_m3-button.scss

@@ -0,0 +1,260 @@
+@use 'sass:map';
+@use 'sass:list';
+@use '../core/tokens/m3-utils';
+@use '../core/style/sass-utils';
+@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),
+  );
+
+  $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),
+    ),
+    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),
+    ),
+    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,
+  );
+
+  @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);
+  $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),
+  );
+}