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

package/_index.scss

@@ -17,9 +17,9 @@
 @forward './core/theming/theming' as private-* show private-clamp-density;
 @forward './core/typography/typography' show typography-hierarchy;
 @forward './core/typography/typography-utils' show font-shorthand;
-@forward './core/tokens/m3-system' show system-level-colors,
+@forward 'core/tokens/system' show system-level-colors,
     system-level-typography, system-level-elevation, system-level-shape,
-    system-level-motion, system-level-state, theme, theme-overrides;
+    system-level-motion, system-level-state, theme, theme-overrides, m2-theme;
 
 // Private/Internal
 @forward './core/density/private/all-density' show all-component-densities;

package/autocomplete/index.d.ts

@@ -2,18 +2,18 @@ import * as i0 from '@angular/core';
 import { InjectionToken, AfterContentInit, OnDestroy, TemplateRef, ElementRef, QueryList, EventEmitter, AfterViewInit, OnChanges, SimpleChanges } from '@angular/core';
 import * as i2 from '@angular/cdk/overlay';
 import { ScrollStrategy } from '@angular/cdk/overlay';
-import { M as MatOptionModule } from '../index.d-DAhBYbjm.js';
-import { M as MatCommonModule } from '../common-module.d-C8xzHJDr.js';
-import { T as ThemePalette } from '../palette.d-BSSFKjO6.js';
-import { M as MatOption, a as MatOptgroup, b as MatOptionSelectionChange } from '../option.d-BcvS44bt.js';
+import { MatOptionModule } from '../option-module.d.js';
+import { MatCommonModule } from '../common-module.d.js';
+import { ThemePalette } from '../palette.d.js';
+import { MatOption, MatOptgroup, MatOptionSelectionChange } from '../option.d.js';
 import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import { ControlValueAccessor } from '@angular/forms';
 import { Observable } from 'rxjs';
 import * as i5 from '@angular/cdk/scrolling';
-import '../index.d-C5neTPvr.js';
-import '../ripple.d-BT30YVLB.js';
+import '../ripple-module.d.js';
+import '../ripple.d.js';
 import '@angular/cdk/platform';
-import '../pseudo-checkbox-module.d-BHmTZ10P.js';
+import '../pseudo-checkbox-module.d.js';
 import '@angular/cdk/bidi';
 
 /** Event object that is emitted when an autocomplete option is selected. */

package/autocomplete/testing/index.d.ts

@@ -1,5 +1,5 @@
 import { BaseHarnessFilters, ComponentHarness, ComponentHarnessConstructor, HarnessPredicate } from '@angular/cdk/testing';
-import { O as OptionHarnessFilters, M as MatOptionHarness } from '../../option-harness.d-IqsW95GR.js';
+import { OptionHarnessFilters, MatOptionHarness } from '../../option-harness.d.js';
 import { OptgroupHarnessFilters, MatOptgroupHarness } from '../../core/testing/index.js';
 
 /** A set of criteria that can be used to filter a list of `MatAutocompleteHarness` instances. */

package/badge/index.d.ts

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
 import * as i1 from '@angular/cdk/a11y';
-import { M as MatCommonModule } from '../common-module.d-C8xzHJDr.js';
-import { M as MatBadge, _ as _MatBadgeStyleLoader } from '../badge.d-Cn81aRz4.js';
-export { a as MatBadgePosition, b as MatBadgeSize } from '../badge.d-Cn81aRz4.js';
+import { MatCommonModule } from '../common-module.d.js';
+import { MatBadge, _MatBadgeStyleLoader } from '../badge.d.js';
+export { MatBadgePosition, MatBadgeSize } from '../badge.d.js';
 import '@angular/cdk/bidi';
-import '../palette.d-BSSFKjO6.js';
+import '../palette.d.js';
 
 declare class MatBadgeModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatBadgeModule, never>;

package/badge/testing/index.d.ts

@@ -1,7 +1,7 @@
 import { BaseHarnessFilters, ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
-import { a as MatBadgePosition, b as MatBadgeSize } from '../../badge.d-Cn81aRz4.js';
+import { MatBadgePosition, MatBadgeSize } from '../../badge.d.js';
 import '@angular/core';
-import '../../palette.d-BSSFKjO6.js';
+import '../../palette.d.js';
 
 interface BadgeHarnessFilters extends BaseHarnessFilters {
     text?: string | RegExp;

package/{badge.d-Cn81aRz4.d.ts → badge.d.d.ts}

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { OnInit, OnDestroy } from '@angular/core';
-import { T as ThemePalette } from './palette.d-BSSFKjO6.js';
+import { ThemePalette } from './palette.d.js';
 
 /** Allowed position options for matBadgePosition */
 type MatBadgePosition = 'above after' | 'above before' | 'below before' | 'below after' | 'before' | 'after' | 'above' | 'below';
@@ -95,5 +95,5 @@ declare class MatBadge implements OnInit, OnDestroy {
     static ngAcceptInputType_hidden: unknown;
 }
 
-export { MatBadge as M, _MatBadgeStyleLoader as _ };
-export type { MatBadgePosition as a, MatBadgeSize as b };
+export { MatBadge, _MatBadgeStyleLoader };
+export type { MatBadgePosition, MatBadgeSize };

package/bottom-sheet/index.d.ts

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { OnDestroy, EventEmitter, InjectionToken, ViewContainerRef, ComponentRef, TemplateRef } from '@angular/core';
 import * as i1 from '@angular/cdk/dialog';
 import { CdkDialogContainer, DialogRef } from '@angular/cdk/dialog';
-import { M as MatCommonModule } from '../common-module.d-C8xzHJDr.js';
+import { MatCommonModule } from '../common-module.d.js';
 import * as i3 from '@angular/cdk/portal';
 import { ComponentType } from '@angular/cdk/portal';
 import { Direction } from '@angular/cdk/bidi';

package/button/index.d.ts

@@ -1,12 +1,12 @@
 import { FocusOrigin } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
 import { InjectionToken, AfterViewInit, OnDestroy, ElementRef, NgZone } from '@angular/core';
-import { T as ThemePalette } from '../palette.d-BSSFKjO6.js';
-import { M as MatRippleLoader } from '../ripple-loader.d-9me-KFSi.js';
-import { M as MatCommonModule } from '../common-module.d-C8xzHJDr.js';
-import { M as MatRippleModule } from '../index.d-C5neTPvr.js';
+import { ThemePalette } from '../palette.d.js';
+import { MatRippleLoader } from '../ripple-loader.d.js';
+import { MatCommonModule } from '../common-module.d.js';
+import { MatRippleModule } from '../ripple-module.d.js';
 import '@angular/cdk/bidi';
-import '../ripple.d-BT30YVLB.js';
+import '../ripple.d.js';
 import '@angular/cdk/platform';
 
 /**

package/button-toggle/index.d.ts

@@ -1,11 +1,11 @@
-import { M as MatButtonToggleGroup, a as MatButtonToggle } from '../button-toggle.d-B_G01PhW.js';
-export { d as MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS, f as MAT_BUTTON_TOGGLE_GROUP, e as MAT_BUTTON_TOGGLE_GROUP_DEFAULT_OPTIONS_FACTORY, g as MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR, b as MatButtonToggleAppearance, h as MatButtonToggleChange, c as MatButtonToggleDefaultOptions, T as ToggleType } from '../button-toggle.d-B_G01PhW.js';
+import { MatButtonToggleGroup, MatButtonToggle } from '../button-toggle.d.js';
+export { MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS, MAT_BUTTON_TOGGLE_GROUP, MAT_BUTTON_TOGGLE_GROUP_DEFAULT_OPTIONS_FACTORY, MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR, MatButtonToggleAppearance, MatButtonToggleChange, MatButtonToggleDefaultOptions, ToggleType } from '../button-toggle.d.js';
 import * as i0 from '@angular/core';
-import { M as MatCommonModule } from '../common-module.d-C8xzHJDr.js';
-import { M as MatRippleModule } from '../index.d-C5neTPvr.js';
+import { MatCommonModule } from '../common-module.d.js';
+import { MatRippleModule } from '../ripple-module.d.js';
 import '@angular/cdk/bidi';
 import '@angular/forms';
-import '../ripple.d-BT30YVLB.js';
+import '../ripple.d.js';
 import '@angular/cdk/platform';
 
 declare class MatButtonToggleModule {

package/button-toggle/testing/index.d.ts

@@ -1,5 +1,5 @@
 import { BaseHarnessFilters, ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
-import { b as MatButtonToggleAppearance } from '../../button-toggle.d-B_G01PhW.js';
+import { MatButtonToggleAppearance } from '../../button-toggle.d.js';
 import '@angular/cdk/bidi';
 import '@angular/core';
 import '@angular/forms';

package/{button-toggle.d-B_G01PhW.d.ts → button-toggle.d.d.ts}

@@ -254,5 +254,5 @@ declare class MatButtonToggle implements OnInit, AfterViewInit, OnDestroy {
     static ngAcceptInputType_disabledInteractive: unknown;
 }
 
-export { MatButtonToggleGroup as M, MatButtonToggle as a, MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS as d, MAT_BUTTON_TOGGLE_GROUP_DEFAULT_OPTIONS_FACTORY as e, MAT_BUTTON_TOGGLE_GROUP as f, MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR as g, MatButtonToggleChange as h };
-export type { ToggleType as T, MatButtonToggleAppearance as b, MatButtonToggleDefaultOptions as c };
+export { MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS, MAT_BUTTON_TOGGLE_GROUP, MAT_BUTTON_TOGGLE_GROUP_DEFAULT_OPTIONS_FACTORY, MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR, MatButtonToggle, MatButtonToggleChange, MatButtonToggleGroup };
+export type { MatButtonToggleAppearance, MatButtonToggleDefaultOptions, ToggleType };

package/card/index.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { InjectionToken } from '@angular/core';
-import { M as MatCommonModule } from '../common-module.d-C8xzHJDr.js';
+import { MatCommonModule } from '../common-module.d.js';
 import '@angular/cdk/bidi';
 
 type MatCardAppearance = 'outlined' | 'raised' | 'filled';

package/checkbox/index.d.ts

@@ -2,8 +2,8 @@ import { FocusableOption } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
 import { AfterViewInit, OnChanges, ElementRef, EventEmitter, SimpleChanges, InjectionToken } from '@angular/core';
 import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
-import { T as ThemePalette } from '../palette.d-BSSFKjO6.js';
-import { M as MatCommonModule } from '../common-module.d-C8xzHJDr.js';
+import { ThemePalette } from '../palette.d.js';
+import { MatCommonModule } from '../common-module.d.js';
 import '@angular/cdk/bidi';
 
 /**

package/chips/index.d.ts

@@ -3,12 +3,12 @@ import { ElementRef, OnInit, AfterViewInit, AfterContentInit, DoCheck, OnDestroy
 import { Subject, Observable } from 'rxjs';
 import { FocusKeyManager } from '@angular/cdk/a11y';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
-import { E as ErrorStateMatcher } from '../error-options.d-CGdTZUYk.js';
-import { M as MatFormFieldControl } from '../form-field-control.d-DvB4ZVlf.js';
-import { M as MatCommonModule } from '../common-module.d-C8xzHJDr.js';
-import { M as MatRippleModule } from '../index.d-C5neTPvr.js';
+import { ErrorStateMatcher } from '../error-options.d.js';
+import { MatFormFieldControl } from '../form-field-control.d.js';
+import { MatCommonModule } from '../common-module.d.js';
+import { MatRippleModule } from '../ripple-module.d.js';
 import '@angular/cdk/bidi';
-import '../ripple.d-BT30YVLB.js';
+import '../ripple.d.js';
 import '@angular/cdk/platform';
 
 /**
@@ -39,7 +39,7 @@ declare class MatChipAction {
     /**
      * Private API to allow focusing this chip when it is disabled.
      */
-    private _allowFocusWhenDisabled;
+    _allowFocusWhenDisabled: boolean;
     /**
      * Determine the value of the disabled attribute for this chip action.
      */
@@ -175,6 +175,8 @@ declare class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoChec
     _ariaDescriptionId: string;
     /** Whether the chip list is disabled. */
     _chipListDisabled: boolean;
+    /** Whether the chip was focused when it was removed. */
+    _hadFocusOnRemove: boolean;
     private _textElement;
     /**
      * The value of the chip. Defaults to the content inside

package/{common-module.d-C8xzHJDr.d.ts → common-module.d.d.ts}

@@ -40,5 +40,5 @@ declare class MatCommonModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<MatCommonModule>;
 }
 
-export { MatCommonModule as M, MATERIAL_SANITY_CHECKS as a };
-export type { GranularSanityChecks as G, SanityChecks as S };
+export { MATERIAL_SANITY_CHECKS, MatCommonModule };
+export type { GranularSanityChecks, SanityChecks };

package/core/index.d.ts

@@ -1,21 +1,21 @@
 import * as i0 from '@angular/core';
 import { Version, InjectionToken, Provider } from '@angular/core';
-export { G as GranularSanityChecks, a as MATERIAL_SANITY_CHECKS, M as MatCommonModule, S as SanityChecks } from '../common-module.d-C8xzHJDr.js';
-export { T as ThemePalette } from '../palette.d-BSSFKjO6.js';
+export { GranularSanityChecks, MATERIAL_SANITY_CHECKS, MatCommonModule, SanityChecks } from '../common-module.d.js';
+export { ThemePalette } from '../palette.d.js';
 import { NgControl, FormGroupDirective, NgForm } from '@angular/forms';
 import { Subject } from 'rxjs';
-import { E as ErrorStateMatcher$1 } from '../error-options.d-CGdTZUYk.js';
-export { S as ShowOnDirtyErrorStateMatcher } from '../error-options.d-CGdTZUYk.js';
-export { M as MatLine, a as MatLineModule, s as setLines } from '../line.d-C-QdueRc.js';
-export { M as MatOptionModule } from '../index.d-DAhBYbjm.js';
-export { M as MatRippleLoader } from '../ripple-loader.d-9me-KFSi.js';
-export { M as MatRippleModule } from '../index.d-C5neTPvr.js';
-export { b as MatPseudoCheckbox, M as MatPseudoCheckboxModule, a as MatPseudoCheckboxState } from '../pseudo-checkbox-module.d-BHmTZ10P.js';
-import { D as DateAdapter } from '../date-adapter.d-CtKXIxk0.js';
-export { M as MAT_DATE_LOCALE, a as MAT_DATE_LOCALE_FACTORY } from '../date-adapter.d-CtKXIxk0.js';
-export { d as MAT_OPTGROUP, a as MatOptgroup, M as MatOption, b as MatOptionSelectionChange, _ as _countGroupLabelsBeforeOption, c as _getOptionScrollPosition } from '../option.d-BcvS44bt.js';
-export { a as MAT_OPTION_PARENT_COMPONENT, M as MatOptionParentComponent } from '../option-parent.d-CnYuuMkO.js';
-export { c as MAT_RIPPLE_GLOBAL_OPTIONS, M as MatRipple, g as RippleAnimationConfig, f as RippleConfig, R as RippleGlobalOptions, h as RippleRef, a as RippleRenderer, e as RippleState, b as RippleTarget, d as defaultRippleAnimationConfig } from '../ripple.d-BT30YVLB.js';
+import { ErrorStateMatcher as ErrorStateMatcher$1 } from '../error-options.d.js';
+export { ShowOnDirtyErrorStateMatcher } from '../error-options.d.js';
+export { MatLine, MatLineModule, setLines } from '../line.d.js';
+export { MatOptionModule } from '../option-module.d.js';
+export { MAT_OPTGROUP, MatOptgroup, MatOption, MatOptionSelectionChange, _countGroupLabelsBeforeOption, _getOptionScrollPosition } from '../option.d.js';
+export { MAT_OPTION_PARENT_COMPONENT, MatOptionParentComponent } from '../option-parent.d.js';
+export { MatRippleLoader } from '../ripple-loader.d.js';
+export { MAT_RIPPLE_GLOBAL_OPTIONS, MatRipple, RippleAnimationConfig, RippleConfig, RippleGlobalOptions, RippleRef, RippleRenderer, RippleState, RippleTarget, defaultRippleAnimationConfig } from '../ripple.d.js';
+export { MatRippleModule } from '../ripple-module.d.js';
+export { MatPseudoCheckbox, MatPseudoCheckboxModule, MatPseudoCheckboxState } from '../pseudo-checkbox-module.d.js';
+import { DateAdapter } from '../date-adapter.d.js';
+export { MAT_DATE_LOCALE, MAT_DATE_LOCALE_FACTORY } from '../date-adapter.d.js';
 import '@angular/cdk/bidi';
 import '@angular/cdk/a11y';
 import '@angular/cdk/platform';

package/core/testing/index.d.ts

@@ -1,4 +1,4 @@
-import { O as OptionHarnessFilters, M as MatOptionHarness } from '../../option-harness.d-IqsW95GR.js';
+import { OptionHarnessFilters, MatOptionHarness } from '../../option-harness.d.js';
 import { BaseHarnessFilters, ComponentHarness, ComponentHarnessConstructor, HarnessPredicate } from '@angular/cdk/testing';
 
 interface OptgroupHarnessFilters extends BaseHarnessFilters {

package/core/theming/_m2-inspection.scss

@@ -42,7 +42,7 @@ $_typography-keys: (
 $_typography-properties: (font, font-family, line-height, font-size, letter-spacing, font-weight);
 
 /// Gets the m2-config from the theme.
-@function _get-m2-config($theme) {
+@function get-m2-config($theme) {
   // It is possible for a user to pass a "density theme" that is just a number.
   @if meta.type-of($theme) != 'map' {
     @return $theme;
@@ -89,7 +89,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
 /// @param {Map} $theme The theme
 /// @return {String} The type of theme (either `light` or `dark`).
 @function get-theme-type($theme) {
-  $theme: _get-m2-config($theme);
+  $theme: get-m2-config($theme);
   @if not theme-has($theme, color) {
     @error 'Color information is not available on this theme.';
   }
@@ -112,7 +112,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
 /// @param {Number} $opacity The alpha channel value for the color.
 /// @return {Color} The requested theme color.
 @function get-theme-color($theme, $palette-name, $args...) {
-  $theme: _get-m2-config($theme);
+  $theme: get-m2-config($theme);
   @if not theme-has($theme, color) {
     @error 'Color information is not available on this theme.';
   }
@@ -137,7 +137,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
 ///   (font, font-family, font-size, font-weight, line-height, or letter-spacing).
 /// @return {*} The value of the requested font property.
 @function get-theme-typography($theme, $typescale, $property) {
-  $theme: _get-m2-config($theme);
+  $theme: get-m2-config($theme);
   @if not theme-has($theme, typography) {
     @error 'Typography information is not available on this theme.';
   }
@@ -175,7 +175,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
 /// @param {Map} $theme The theme
 /// @return {Number} The density scale.
 @function get-theme-density($theme) {
-  $theme: _get-m2-config($theme);
+  $theme: get-m2-config($theme);
   @if not theme-has($theme, density) {
     @error 'Density information is not available on this theme.';
   }
@@ -188,7 +188,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
 /// @param {String} $system The system to check
 /// @param {Boolean} Whether the theme has information about the system.
 @function theme-has($theme, $system) {
-  $theme: _get-m2-config($theme);
+  $theme: get-m2-config($theme);
   @if $system == base {
     @return true;
   }

package/core/tokens/{_m3-system.scss → _system.scss}

@@ -18,9 +18,13 @@
 @use '../style/elevation';
 @use '../theming/config-validation';
 @use '../theming/definition';
+@use '../theming/inspection';
+@use '../theming/m2-inspection';
 @use '../theming/palettes';
 @use '../style/sass-utils';
+@use './m2';
 @use './m3';
+@use 'sass:list';
 @use 'sass:map';
 @use 'sass:meta';
 
@@ -273,7 +277,6 @@
   $shadow-color: map.get(
       $theme, definition.$internals, palettes, neutral, 0);
 
-
   @include sass-utils.current-selector-or-root {
     @each $name, $value in m3.md-sys-elevation-values() {
       $level: map.get($overrides, $name) or $value;
@@ -307,3 +310,85 @@
   }
   @return $result;
 }
+
+// Defines Angular Material system variables using M2 values provided by
+// an M2 theme config created with `mat.m2-define-light-theme` or `mat.m2-define-dark-theme`.
+//
+// This enables applications to style custom components with system-level CSS
+// variables instead of creating a separate component theme mixin that relies on
+// the theme config.
+//
+// For example, use `var(--mat-sys-primary)` to get a theme's primary color instead of
+// pulling it from the theme with `m2-get-color-from-palette($primary-palette, default)`.
+//
+// Unlike M3's `mat.theme()`, this mixin does not replace the need to call
+// individual component theme mixins for Angular Material components.
+@mixin m2-theme($theme-config, $overrides: ()) {
+  @if inspection.get-theme-version($theme-config) == 1 {
+    @error '`m2-theme` mixin should only be called for M2 theme ' +
+        'configs created with define-light-theme or define-dark-theme';
+  }
+
+  // Check whether any override keys do not match keys in the theme
+  // config system map.
+  $invalid-keys: ();
+  $config-system: map.get($theme-config, _mat-system);
+  @each $key, $value in $overrides {
+    @if (not map.has-key($config-system, $key)) {
+      $invalid-keys: list.append($invalid-keys, $key);
+    }
+  }
+  @if (list.length($invalid-keys) > 0) {
+    @error 'The following overrides are not valid system variables: #{$invalid-keys}. ' +
+        'Valid keys are: #{map.keys($config-system)}';
+  }
+
+  $config: m2-inspection.get-m2-config($theme-config);
+
+  $color: map.get($config, color);
+  @if (m2-inspection.theme-has($theme-config, color)) {
+    $system-colors: if(map.get($color, is-dark),
+      m2.md-sys-color-values-dark($color),
+      m2.md-sys-color-values-light($color),
+    );
+    @include _define-m2-system-vars($system-colors, $overrides);
+
+    $shadow: map.get($theme-config, _mat-system, shadow);
+    $system-elevations: ();
+    @each $name, $value in m2.md-sys-elevation-values() {
+      $level: map.get($overrides, $name) or $value;
+      $value: elevation.get-box-shadow($level, $shadow);
+      $system-elevations: map.set($system-elevations, $name, $value);
+    }
+    @include _define-m2-system-vars($system-elevations, $overrides);
+  }
+
+  $typography: map.get($config, typography);
+  @if ($typography) {
+    $system-typography: m2.md-sys-typescale-values($typography);
+    @include _define-m2-system-vars($system-typography, $overrides);
+  }
+
+  @include _define-m2-system-vars(m2.md-sys-shape-values(), $overrides);
+  @include _define-m2-system-vars(m2.md-sys-state-values(), $overrides);
+
+  // The icon button's color token is set to `inherit` for M2 and intended to display
+  // the color inherited from its parent element. This is crucial because it's unknown
+  // whether the icon button sits on a container with background like "surface" or "primary",
+  // where both may have different contrast colors like white or black.
+  // However, variables set to inherit AND define a fallback will always use the fallback,
+  // which is "on-surface-variant". This mixin now defines this value.
+  // To avoid this, and continue using `inherit` for the icon button color, set the color explicitly
+  // to the token without a fallback.
+  .mat-mdc-button-base.mat-mdc-icon-button:not(.mat-mdc-button-disabled) {
+    color: var(--mat-icon-button-icon-color);
+  }
+}
+
+@mixin _define-m2-system-vars($vars, $overrides) {
+  @include sass-utils.current-selector-or-root {
+    @each $name, $value in $vars {
+      --#{definition.$system-fallback-prefix}-#{$name}: #{map.get($overrides, $name) or $value};
+    }
+  }
+}

package/core/tokens/m2/_md-sys-color.scss

@@ -1,8 +1,3 @@
-//
-// Design system display name: Material 3
-// Design system version: v0.161
-//
-
 @use 'sass:map';
 @use '../../m2/palette';
 
@@ -27,40 +22,38 @@
     inverse-on-surface: rgba(black, 0.87),
     outline: rgba(white, 0.12),
     outline-variant: rgba(white, 0.38),
-
-    // TBD
-    error-container: null,
-    on-background: null,
-    on-error-container: null,
-    on-primary-container: null,
-    on-primary-fixed: null,
-    on-primary-fixed-variant: null,
-    on-secondary-container: null,
-    on-secondary-fixed: null,
-    on-secondary-fixed-variant: null,
-    on-tertiary: null,
-    on-tertiary-container: null,
-    on-tertiary-fixed: null,
-    on-tertiary-fixed-variant: null,
-    primary-container: null,
-    primary-fixed: null,
-    primary-fixed-dim: null,
-    scrim: null,
-    secondary-container: null,
-    secondary-fixed: null,
-    secondary-fixed-dim: null,
-    surface-bright: null,
-    surface-container: null,
-    surface-container-high: null,
-    surface-container-highest: null,
-    surface-container-low: null,
-    surface-container-lowest: null,
-    surface-dim: null,
-    surface-tint: null,
-    tertiary: null,
-    tertiary-container: null,
-    tertiary-fixed: null,
-    tertiary-fixed-dim: null,
+    error-container: map.get($palettes, warn, default),
+    on-background: white,
+    on-error-container: map.get($palettes, warn, default-contrast),
+    on-primary-container: map.get($palettes, primary, default-contrast),
+    on-primary-fixed: map.get($palettes, primary, default-contrast),
+    on-primary-fixed-variant: map.get($palettes, primary, default-contrast),
+    on-secondary-container: map.get($palettes, accent, default-contrast),
+    on-secondary-fixed: map.get($palettes, accent, default-contrast),
+    on-secondary-fixed-variant: map.get($palettes, accent, default-contrast),
+    on-tertiary: map.get($palettes, accent, default-contrast),
+    on-tertiary-container: map.get($palettes, accent, default-contrast),
+    on-tertiary-fixed: map.get($palettes, accent, default-contrast),
+    on-tertiary-fixed-variant: map.get($palettes, accent, default-contrast),
+    primary-container: map.get($palettes, primary, default),
+    primary-fixed: map.get($palettes, primary, default),
+    primary-fixed-dim: map.get($palettes, primary, default),
+    scrim: black,
+    secondary-container: map.get($palettes, accent, default),
+    secondary-fixed: map.get($palettes, accent, default),
+    secondary-fixed-dim: map.get($palettes, accent, default),
+    surface-bright: map.get(palette.$grey-palette, 800),
+    surface-container: map.get(palette.$grey-palette, 800),
+    surface-container-high: map.get(palette.$grey-palette, 800),
+    surface-container-highest: map.get(palette.$grey-palette, 800),
+    surface-container-low: map.get(palette.$grey-palette, 800),
+    surface-container-lowest: map.get(palette.$grey-palette, 800),
+    surface-dim: map.get(palette.$grey-palette, 800),
+    surface-tint: map.get(palette.$grey-palette, 800),
+    tertiary: map.get($palettes, accent, default),
+    tertiary-container: map.get($palettes, accent, default),
+    tertiary-fixed: map.get($palettes, accent, default),
+    tertiary-fixed-dim: map.get($palettes, accent, default),
   );
 }
 
@@ -85,39 +78,37 @@
     inverse-on-surface: white,
     outline: rgba(black, 0.12),
     outline-variant: rgba(black, 0.38),
-
-    // TBD
-    error-container: null,
-    on-background: null,
-    on-error-container: null,
-    on-primary-container: null,
-    on-primary-fixed: null,
-    on-primary-fixed-variant: null,
-    on-secondary-container: null,
-    on-secondary-fixed: null,
-    on-secondary-fixed-variant: null,
-    on-tertiary: null,
-    on-tertiary-container: null,
-    on-tertiary-fixed: null,
-    on-tertiary-fixed-variant: null,
-    primary-container: null,
-    primary-fixed: null,
-    primary-fixed-dim: null,
-    scrim: null,
-    secondary-container: null,
-    secondary-fixed: null,
-    secondary-fixed-dim: null,
-    surface-bright: null,
-    surface-container: null,
-    surface-container-high: null,
-    surface-container-highest: null,
-    surface-container-low: null,
-    surface-container-lowest: null,
-    surface-dim: null,
-    surface-tint: null,
-    tertiary: null,
-    tertiary-container: null,
-    tertiary-fixed: null,
-    tertiary-fixed-dim: null,
+    error-container: map.get($palettes, warn, default),
+    on-background: rgba(black, 0.87),
+    on-error-container: map.get($palettes, warn, default-contrast),
+    on-primary-container: map.get($palettes, primary, default-contrast),
+    on-primary-fixed: map.get($palettes, primary, default-contrast),
+    on-primary-fixed-variant: map.get($palettes, primary, default-contrast),
+    on-secondary-container: map.get($palettes, accent, default-contrast),
+    on-secondary-fixed: map.get($palettes, accent, default-contrast),
+    on-secondary-fixed-variant: map.get($palettes, accent, default-contrast),
+    on-tertiary: map.get($palettes, accent, default-contrast),
+    on-tertiary-container: map.get($palettes, accent, default-contrast),
+    on-tertiary-fixed: map.get($palettes, accent, default-contrast),
+    on-tertiary-fixed-variant: map.get($palettes, accent, default-contrast),
+    primary-container: map.get($palettes, primary, default),
+    primary-fixed: map.get($palettes, primary, default),
+    primary-fixed-dim: map.get($palettes, primary, default),
+    scrim: black,
+    secondary-container: map.get($palettes, accent, default),
+    secondary-fixed: map.get($palettes, accent, default),
+    secondary-fixed-dim: map.get($palettes, accent, default),
+    surface-bright: white,
+    surface-container: white,
+    surface-container-high: white,
+    surface-container-highest: white,
+    surface-container-low: white,
+    surface-container-lowest: white,
+    surface-dim: white,
+    surface-tint: white,
+    tertiary: map.get($palettes, accent, default),
+    tertiary-container: map.get($palettes, accent, default),
+    tertiary-fixed: map.get($palettes, accent, default),
+    tertiary-fixed-dim: map.get($palettes, accent, default),
   );
 }

package/core/tokens/m2/_md-sys-elevation.scss

@@ -1,16 +1,10 @@
-//
-// Design system display name: Material 3
-// Design system version: v0.161
-//
-
 @function md-sys-elevation-values() {
   @return (
-    // TBD
-    level0: null,
-    level1: null,
-    level2: null,
-    level3: null,
-    level4: null,
-    level5: null,
+    level0: 0,
+    level1: 1,
+    level2: 3,
+    level3: 6,
+    level4: 8,
+    level5: 12
   );
 }