@angular/material 20.0.0-next.5 → 20.0.0-next.6

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)
+  );
+}

package/{core/tokens/m2/mat/_fab.scss → button/_m2-fab.scss}

@@ -1,9 +1,9 @@
 @use 'sass:meta';
-@use '../../token-definition';
-@use '../../../theming/theming';
-@use '../../../theming/inspection';
-@use '../../../style/sass-utils';
-@use '../../../style/elevation';
+@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);
@@ -12,11 +12,22 @@ $prefix: (mat, fab);
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
   @return (
-    container-shape: 50%,
     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),
   );
 }
 
@@ -36,6 +47,18 @@ $prefix: (mat, fab);
     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),
   );
 }
@@ -49,11 +72,11 @@ $prefix: (mat, fab);
   $ripple-color: null;
   $contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
 
-  @if (token-definition.$private-is-internal-build or
+  @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: token-definition.contrast-tone($container-color, $is-dark);
+    $contrast-tone: m2-utils.contrast-tone($container-color, $is-dark);
     $color: if($contrast-tone == 'dark', #000, #fff);
     $foreground-color: $color;
     $state-layer-color: $color;
@@ -68,14 +91,23 @@ $prefix: (mat, fab);
   @return (
     container-color: inspection.get-theme-color($theme, $palette-name, default),
     foreground-color: $foreground-color,
-    state-layer-color: $state-layer-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 ();
+  @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.
@@ -83,6 +115,7 @@ $prefix: (mat, fab);
   $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),
   );
 }
@@ -92,8 +125,8 @@ $prefix: (mat, fab);
 @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/{core/tokens/m2/mat/_icon-button.scss → button/_m2-icon-button.scss}

@@ -1,9 +1,9 @@
 @use 'sass:meta';
 @use 'sass:map';
-@use '../../token-definition';
-@use '../../../theming/theming';
-@use '../../../theming/inspection';
-@use '../../../style/sass-utils';
+@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);
@@ -80,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,243 @@
+@use 'sass:map';
+@use '../core/tokens/m3-utils';
+@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);
+
+/// 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-height: if($exclude-hardcoded, null, 40px),
+    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-height: if($exclude-hardcoded, null, 40px),
+    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-height: if($exclude-hardcoded, null, 40px),
+    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-height: if($exclude-hardcoded, null, 40px),
+    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-height: if($exclude-hardcoded, null, 40px),
+    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);
+}