@angular/material 17.3.0-next.0 → 17.3.0

package/autocomplete/index.d.ts

@@ -287,6 +287,8 @@ export declare class MatAutocompleteTrigger implements ControlValueAccessor, Aft
     private _previousValue;
     /** Value of the input element when the panel was attached (even if there are no options). */
     private _valueOnAttach;
+    /** Value on the previous keydown event. */
+    private _valueOnLastKeydown;
     /** Strategy that is used to position the panel. */
     private _positionStrategy;
     /** Whether or not the label state is being overridden. */
@@ -402,6 +404,8 @@ export declare class MatAutocompleteTrigger implements ControlValueAccessor, Aft
     private _emitOpened;
     /** Destroys the autocomplete suggestion panel. */
     private _destroyPanel;
+    /** Given a value, returns the string that should be shown within the input. */
+    private _getDisplayValue;
     private _assignOptionValue;
     private _updateNativeInputValue;
     /**
@@ -414,6 +418,7 @@ export declare class MatAutocompleteTrigger implements ControlValueAccessor, Aft
      * Clear any previous selected option and emit a selection change event for this option
      */
     private _clearPreviousSelectedOption;
+    private _openPanelInternal;
     private _attachOverlay;
     /** Handles keyboard events coming from the overlay panel. */
     private _handlePanelKeydown;

package/button-toggle/index.d.ts

@@ -14,6 +14,7 @@ import { QueryList } from '@angular/core';
 
 declare namespace i2 {
     export {
+        MAT_BUTTON_TOGGLE_GROUP_DEFAULT_OPTIONS_FACTORY,
         ToggleType,
         MatButtonToggleAppearance,
         MatButtonToggleDefaultOptions,
@@ -39,6 +40,8 @@ export declare const MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS: InjectionToken<MatButton
  */
 export declare const MAT_BUTTON_TOGGLE_GROUP: InjectionToken<MatButtonToggleGroup>;
 
+export declare function MAT_BUTTON_TOGGLE_GROUP_DEFAULT_OPTIONS_FACTORY(): MatButtonToggleDefaultOptions;
+
 /**
  * Provider Expression that allows mat-button-toggle-group to register as a ControlValueAccessor.
  * This allows it to support [(ngModel)].
@@ -141,6 +144,10 @@ export declare interface MatButtonToggleDefaultOptions {
      * setting an appearance on a button toggle or group.
      */
     appearance?: MatButtonToggleAppearance;
+    /** Whetehr icon indicators should be hidden for single-selection button toggle groups. */
+    hideSingleSelectionIndicator?: boolean;
+    /** Whether icon indicators should be hidden for multiple-selection button toggle groups. */
+    hideMultipleSelectionIndicator?: boolean;
 }
 
 /** Exclusive selection button toggle group that behaves like a radio-button group. */
@@ -192,6 +199,14 @@ export declare class MatButtonToggleGroup implements ControlValueAccessor, OnIni
     set disabled(value: boolean);
     /** Event emitted when the group's value changes. */
     readonly change: EventEmitter<MatButtonToggleChange>;
+    /** Whether checkmark indicator for single-selection button toggle groups is hidden. */
+    get hideSingleSelectionIndicator(): boolean;
+    set hideSingleSelectionIndicator(value: boolean);
+    private _hideSingleSelectionIndicator;
+    /** Whether checkmark indicator for multiple-selection button toggle groups is hidden. */
+    get hideMultipleSelectionIndicator(): boolean;
+    set hideMultipleSelectionIndicator(value: boolean);
+    private _hideMultipleSelectionIndicator;
     constructor(_changeDetector: ChangeDetectorRef, defaultOptions?: MatButtonToggleDefaultOptions);
     ngOnInit(): void;
     ngAfterContentInit(): void;
@@ -228,10 +243,12 @@ export declare class MatButtonToggleGroup implements ControlValueAccessor, OnIni
     /** Marks all of the child button toggles to be checked. */
     private _markButtonsForCheck;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatButtonToggleGroup, [null, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatButtonToggleGroup, "mat-button-toggle-group", ["matButtonToggleGroup"], { "appearance": { "alias": "appearance"; "required": false; }; "name": { "alias": "name"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "value": { "alias": "value"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "valueChange": "valueChange"; "change": "change"; }, ["_buttonToggles"], never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatButtonToggleGroup, "mat-button-toggle-group", ["matButtonToggleGroup"], { "appearance": { "alias": "appearance"; "required": false; }; "name": { "alias": "name"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "value": { "alias": "value"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hideSingleSelectionIndicator": { "alias": "hideSingleSelectionIndicator"; "required": false; }; "hideMultipleSelectionIndicator": { "alias": "hideMultipleSelectionIndicator"; "required": false; }; }, { "valueChange": "valueChange"; "change": "change"; }, ["_buttonToggles"], never, true, never>;
     static ngAcceptInputType_vertical: unknown;
     static ngAcceptInputType_multiple: unknown;
     static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_hideSingleSelectionIndicator: unknown;
+    static ngAcceptInputType_hideMultipleSelectionIndicator: unknown;
 }
 
 export declare class MatButtonToggleModule {

package/core/index.d.ts

@@ -44,7 +44,11 @@ export declare class AnimationDurations {
     static EXITING: string;
 }
 
-/** @docs-private */
+/**
+ * @docs-private
+ * @deprecated Will be removed together with `mixinColor`.
+ * @breaking-change 19.0.0
+ */
 export declare interface CanColor {
     /** Theme color palette for the component. */
     color: ThemePalette;
@@ -54,7 +58,11 @@ export declare interface CanColor {
 
 declare type CanColorCtor = _Constructor<CanColor> & _AbstractConstructor<CanColor>;
 
-/** @docs-private */
+/**
+ * @docs-private
+ * @deprecated Will be removed together with `mixinDisabled`.
+ * @breaking-change 19.0.0
+ */
 export declare interface CanDisable {
     /** Whether the component is disabled. */
     disabled: boolean;
@@ -62,7 +70,11 @@ export declare interface CanDisable {
 
 declare type CanDisableCtor = _Constructor<CanDisable> & _AbstractConstructor<CanDisable>;
 
-/** @docs-private */
+/**
+ * @docs-private
+ * @deprecated Will be removed together with `mixinDisableRipple`.
+ * @breaking-change 19.0.0
+ */
 export declare interface CanDisableRipple {
     /** Whether ripples are disabled. */
     disableRipple: boolean;
@@ -70,7 +82,11 @@ export declare interface CanDisableRipple {
 
 declare type CanDisableRippleCtor = _Constructor<CanDisableRipple> & _AbstractConstructor<CanDisableRipple>;
 
-/** @docs-private */
+/**
+ * @docs-private
+ * @deprecated Will be removed together with `mixinErrorState`.
+ * @breaking-change 19.0.0
+ */
 export declare interface CanUpdateErrorState {
     /** Updates the error state based on the provided error state matcher. */
     updateErrorState(): void;
@@ -360,10 +376,10 @@ declare interface HasElementRef {
 
 /** @docs-private */
 declare interface HasErrorState {
-    _parentFormGroup: FormGroupDirective;
-    _parentForm: NgForm;
+    _parentFormGroup: FormGroupDirective | null;
+    _parentForm: NgForm | null;
     _defaultErrorStateMatcher: ErrorStateMatcher_2;
-    ngControl: NgControl;
+    ngControl: NgControl | null;
     stateChanges: Subject<void>;
 }
 
@@ -373,6 +389,8 @@ declare interface HasErrorState {
  * If the subscription is made after it has already been marked as initialized, then it will trigger
  * an emit immediately.
  * @docs-private
+ * @deprecated Will be removed together with `mixinInitializer`.
+ * @breaking-change 19.0.0
  */
 export declare interface HasInitialized {
     /** Stream that emits once during the directive/component's ngOnInit. */
@@ -387,7 +405,11 @@ export declare interface HasInitialized {
 
 declare type HasInitializedCtor = _Constructor<HasInitialized>;
 
-/** @docs-private */
+/**
+ * @docs-private
+ * @deprecated Will be removed together with `mixinTabIndex`.
+ * @breaking-change 19.0.0
+ */
 export declare interface HasTabIndex {
     /** Tabindex of the component. */
     tabIndex: number;
@@ -862,25 +884,47 @@ export declare class MatRippleModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<MatRippleModule>;
 }
 
-/** Mixin to augment a directive with a `color` property. */
+/**
+ * Mixin to augment a directive with a `color` property.
+ * @deprecated Use a plain input and host bindings instead.
+ * @breaking-change 19.0.0
+ */
 export declare function mixinColor<T extends _AbstractConstructor<HasElementRef>>(base: T, defaultColor?: ThemePalette): CanColorCtor & T;
 
-/** Mixin to augment a directive with a `disabled` property. */
+/**
+ * Mixin to augment a directive with a `disabled` property.
+ * @deprecated Use an input with a transform instead.
+ * @breaking-change 19.0.0
+ */
 export declare function mixinDisabled<T extends _AbstractConstructor<{}>>(base: T): CanDisableCtor & T;
 
-/** Mixin to augment a directive with a `disableRipple` property. */
+/**
+ * Mixin to augment a directive with a `disableRipple` property.
+ * @deprecated Use an input with a transform instead.
+ * @breaking-change 19.0.0
+ */
 export declare function mixinDisableRipple<T extends _AbstractConstructor<{}>>(base: T): CanDisableRippleCtor & T;
 
 /**
  * Mixin to augment a directive with updateErrorState method.
  * For component with `errorState` and need to update `errorState`.
+ * @deprecated Implement the `updateErrorState` method directly.
+ * @breaking-change 19.0.0
  */
 export declare function mixinErrorState<T extends _AbstractConstructor<HasErrorState>>(base: T): CanUpdateErrorStateCtor & T;
 
-/** Mixin to augment a directive with an initialized property that will emits when ngOnInit ends. */
+/**
+ * Mixin to augment a directive with an initialized property that will emits when ngOnInit ends.
+ * @deprecated Track the initialized state manually.
+ * @breaking-change 19.0.0
+ */
 export declare function mixinInitialized<T extends _Constructor<{}>>(base: T): HasInitializedCtor & T;
 
-/** Mixin to augment a directive with a `tabIndex` property. */
+/**
+ * Mixin to augment a directive with a `tabIndex` property.
+ * @deprecated Use an input with a transform instead.
+ * @breaking-change 19.0.0
+ */
 export declare function mixinTabIndex<T extends _AbstractConstructor<CanDisable>>(base: T, defaultTabIndex?: number): HasTabIndexCtor & T;
 
 /** Adapts the native JS Date for use with cdk-based components that work with dates. */

package/core/theming/_inspection.scss

@@ -75,8 +75,8 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
 @function get-theme-color($theme, $args...) {
   $version: get-theme-version($theme);
   $args-count: list.length($args);
-  @if $args-count != 1 and $args-count != 2 {
-    @error #{'Expected 2 or 3 arguments. Got:'} $args-count + 1;
+  @if $args-count != 1 and $args-count != 2 and $args-count != 3 {
+    @error #{'Expected between 2 and 4 arguments. Got:'} $args-count + 1;
   }
 
   @if $version == 0 {

package/core/theming/_theming.scss

@@ -432,9 +432,10 @@ $_internals: _mat-theming-internals-do-not-access;
 // Checks for duplicate styles in a `theme-version: 0` style theme.
 @mixin _check-duplicate-theme-styles-v0($theme-or-color-config, $id) {
   $theme: private-legacy-get-theme($theme-or-color-config);
-  $color-config: get-color-config($theme);
-  $density-config: get-density-config($theme);
-  $typography-config: get-typography-config($theme);
+  $color-config: map.get($theme, $_internals, m2-config, color) or get-color-config($theme);
+  $density-config: map.get($theme, $_internals, m2-config, density) or get-density-config($theme);
+  $typography-config:
+    map.get($theme, $_internals, m2-config, typography) or get-typography-config($theme);
   // Lists of previous `color`, `density` and `typography` configurations.
   $previous-color: map.get($_emitted-color, $id) or ();
   $previous-typography: map.get($_emitted-typography, $id) or ();

package/core/tokens/_token-utils.scss

@@ -9,6 +9,9 @@
 @use '../theming/theming';
 @use '../typography/typography';
 
+// Indicates whether we're building internally. Used for backwards compatibility.
+$private-is-internal-build: false;
+
 $_placeholder-color-palette: theming.define-palette(palette.$red-palette);
 
 // Placeholder color config that can be passed to token getter functions when generating token

package/core/tokens/m2/mat/_datepicker.scss

@@ -50,7 +50,6 @@ $private-default-overlap-color: #a8dab5;
   $preview-outline-color: $divider-color;
   $today-disabled-outline-color: null;
   $is-dark: inspection.get-theme-type($theme) == dark;
-  $on-surface: if($is-dark, #fff, #000);
 
   $primary-color: inspection.get-theme-color($theme, primary);
   $range-tokens: get-range-color-tokens(private-get-range-background-color($primary-color));
@@ -75,7 +74,7 @@ $private-default-overlap-color: #a8dab5;
   @return sass-utils.merge-all($calendar-tokens, $toggle-tokens, $range-tokens, (
     toggle-icon-color: $inactive-icon-color,
     calendar-body-label-text-color: $secondary-text-color,
-    calendar-period-button-text-color: $on-surface,
+    calendar-period-button-text-color: inspection.get-theme-color($theme, foreground, text, 1),
     calendar-period-button-icon-color: $inactive-icon-color,
     calendar-navigation-button-icon-color: $inactive-icon-color,
     calendar-header-divider-color: $divider-color,

package/core/tokens/m2/mat/_fab-small.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
 @use '../../../theming/theming';
@@ -18,7 +19,6 @@ $prefix: (mat, fab-small);
 // 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;
-  $on-surface: if($is-dark, #fff, #000);
   $ripple-opacities: if($is-dark,
     mdc-ripple-theme.$light-ink-opacities,
     mdc-ripple-theme.$dark-ink-opacities
@@ -29,13 +29,13 @@ $prefix: (mat, fab-small);
     foreground-color: inspection.get-theme-color($theme, foreground, base),
 
     // Color of the element that shows the hover, focus and pressed states.
-    state-layer-color: $on-surface,
+    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-state-layer-color: $on-surface,
+    disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
 
     // Color of the ripple element.
-    ripple-color: rgba($on-surface, 0.1),
+    ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
 
     // Opacity of the ripple when the button is hovered.
     hover-state-layer-opacity: map.get($ripple-opacities, hover),
@@ -48,24 +48,43 @@ $prefix: (mat, fab-small);
 
     // MDC doesn't have tokens for disabled FABs so we need to implemented them ourselves.
     // Background color of the container when the FAB is disabled.
-    disabled-state-container-color: rgba($on-surface, 0.12),
+    disabled-state-container-color: inspection.get-theme-color($theme, background, disabled-button,
+      0.12),
 
     // Color of the icons and projected text when the FAB is disabled.
-    disabled-state-foreground-color: rgba($on-surface, if($is-dark, 0.5, 0.38)),
+    disabled-state-foreground-color: inspection.get-theme-color($theme, foreground, disabled-button,
+      if($is-dark, 0.5, 0.38)),
   );
 }
 
 // Generates the mapping for the properties that change based on the FAB palette color.
 @function private-get-color-palette-color-tokens($theme, $palette-name) {
-  $is-dark: inspection.get-theme-type($theme) == dark;
-  $container-color: inspection.get-theme-color($theme, $palette-name);
-  $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);
-  $color: if($contrast-tone == 'dark', #000, #fff);
+  // 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 (token-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: mdc-helpers.variable-safe-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 (
-    foreground-color: $color,
-    state-layer-color: $color,
-    ripple-color: rgba($color, 0.1),
+    foreground-color: $foreground-color,
+    state-layer-color: $state-layer-color,
+    ripple-color: $ripple-color,
   );
 }
 

package/core/tokens/m2/mat/_fab.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
 @use '../../../theming/theming';
@@ -18,7 +19,6 @@ $prefix: (mat, fab);
 // 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;
-  $on-surface: if($is-dark, #fff, #000);
   $ripple-opacities: if($is-dark,
     mdc-ripple-theme.$light-ink-opacities,
     mdc-ripple-theme.$dark-ink-opacities
@@ -29,13 +29,13 @@ $prefix: (mat, fab);
     foreground-color: inspection.get-theme-color($theme, foreground, base),
 
     // Color of the element that shows the hover, focus and pressed states.
-    state-layer-color: $on-surface,
+    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-state-layer-color: $on-surface,
+    disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
 
     // Color of the ripple element.
-    ripple-color: rgba($on-surface, 0.1),
+    ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
 
     // Opacity of the ripple when the button is hovered.
     hover-state-layer-opacity: map.get($ripple-opacities, hover),
@@ -48,24 +48,43 @@ $prefix: (mat, fab);
 
     // MDC doesn't have tokens for disabled FABs so we need to implemented them ourselves.
     // Background color of the container when the FAB is disabled.
-    disabled-state-container-color: rgba($on-surface, 0.12),
+    disabled-state-container-color: inspection.get-theme-color($theme, background, disabled-button,
+      0.12),
 
     // Color of the icons and projected text when the FAB is disabled.
-    disabled-state-foreground-color: rgba($on-surface, if($is-dark, 0.5, 0.38)),
+    disabled-state-foreground-color: inspection.get-theme-color($theme, foreground, disabled-button,
+      if($is-dark, 0.5, 0.38)),
   );
 }
 
 // Generates the mapping for the properties that change based on the FAB palette color.
 @function private-get-color-palette-color-tokens($theme, $palette-name) {
-  $is-dark: inspection.get-theme-type($theme) == dark;
-  $container-color: inspection.get-theme-color($theme, $palette-name);
-  $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);
-  $color: if($contrast-tone == 'dark', #000, #fff);
+  // 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 (token-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: mdc-helpers.variable-safe-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 (
-    foreground-color: $color,
-    state-layer-color: $color,
-    ripple-color: rgba($color, 0.1),
+    foreground-color: $foreground-color,
+    state-layer-color: $state-layer-color,
+    ripple-color: $ripple-color,
   );
 }
 

package/core/tokens/m2/mat/_filled-button.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
 @use '../../../theming/theming';
@@ -28,7 +29,6 @@ $prefix: (mat, filled-button);
 // 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;
-  $on-surface: if($is-dark, #fff, #000);
   $ripple-opacities: if($is-dark,
     mdc-ripple-theme.$light-ink-opacities,
     mdc-ripple-theme.$dark-ink-opacities
@@ -36,13 +36,13 @@ $prefix: (mat, filled-button);
 
   @return (
     // Color of the element that shows the hover, focus and pressed states.
-    state-layer-color: $on-surface,
+    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-state-layer-color: $on-surface,
+    disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
 
     // Color of the ripple element.
-    ripple-color: rgba($on-surface, 0.1),
+    ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
 
     // Opacity of the ripple when the button is hovered.
     hover-state-layer-opacity: map.get($ripple-opacities, hover),
@@ -57,14 +57,28 @@ $prefix: (mat, filled-button);
 
 // Generates the mapping for the properties that change based on the button palette color.
 @function private-get-color-palette-color-tokens($theme, $palette-name) {
-  $is-dark: inspection.get-theme-type($theme) == dark;
-  $container-color: inspection.get-theme-color($theme, $palette-name);
-  $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);
-  $color: if($contrast-tone == 'dark', #000, #fff);
+  $state-layer-color: null;
+  $ripple-color: null;
+  $contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
+
+  // 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 (token-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: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);
+    $color: if($contrast-tone == 'dark', #000, #fff);
+    $state-layer-color: $color;
+    $ripple-color: rgba($color, 0.1);
+  }
+  @else {
+    $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 (
-    state-layer-color: $color,
-    ripple-color: rgba($color, 0.1),
+    state-layer-color: $state-layer-color,
+    ripple-color: $ripple-color,
   );
 }
 

package/core/tokens/m2/mat/_form-field.scss

@@ -20,13 +20,13 @@ $prefix: (mat, form-field);
 // 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;
-  $on-surface: if($is-dark, #fff, #000);
   $color-tokens: private-get-color-palette-color-tokens($theme, primary);
 
   @return map.merge($color-tokens, (
     // MDC has a token for the enabled placeholder, but not for the disabled one.
-    disabled-input-text-placeholder-color: rgba($on-surface, 0.38),
-    state-layer-color: rgba($on-surface, 0.87),
+    disabled-input-text-placeholder-color:
+      inspection.get-theme-color($theme, foreground, icon, 0.38),
+    state-layer-color: inspection.get-theme-color($theme, foreground, base, 0.87),
     error-text-color: inspection.get-theme-color($theme, warn),
 
     // On dark themes we set the native `select` color to some shade of white,
@@ -56,8 +56,8 @@ $prefix: (mat, form-field);
 
     // These values are taken from the MDC select implementation:
     // https://github.com/material-components/material-components-web/blob/master/packages/mdc-select/_select-theme.scss
-    enabled-select-arrow-color: rgba($on-surface, 0.54),
-    disabled-select-arrow-color: rgba($on-surface, 0.38),
+    enabled-select-arrow-color: inspection.get-theme-color($theme, foreground, icon, 0.54),
+    disabled-select-arrow-color: inspection.get-theme-color($theme, foreground, icon, 0.38),
 
     hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
     focus-state-layer-opacity: if($is-dark, 0.24, 0.08),

package/core/tokens/m2/mat/_icon-button.scss

@@ -18,7 +18,6 @@ $prefix: (mat, icon-button);
 // 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;
-  $on-surface: if($is-dark, #fff, #000);
   $ripple-opacities: if($is-dark,
     mdc-ripple-theme.$light-ink-opacities,
     mdc-ripple-theme.$dark-ink-opacities
@@ -26,13 +25,13 @@ $prefix: (mat, icon-button);
 
   @return (
     // Color of the element that shows the hover, focus and pressed states.
-    state-layer-color: $on-surface,
+    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-state-layer-color: $on-surface,
+    disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
 
     // Color of the ripple element.
-    ripple-color: rgba($on-surface, 0.1),
+    ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
 
     // Opacity of the ripple when the button is hovered.
     hover-state-layer-opacity: map.get($ripple-opacities, hover),
@@ -48,10 +47,14 @@ $prefix: (mat, icon-button);
 // 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);
+  $ripple-opacity: 0.1;
 
   @return (
     state-layer-color: $color,
-    ripple-color: if(meta.type-of($color) == color, rgba($color, 0.1), $color),
+    ripple-color: if(
+      meta.type-of($color) == color,
+      rgba($color, $ripple-opacity),
+      inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
   );
 }
 

package/core/tokens/m2/mat/_menu.scss

@@ -24,8 +24,8 @@ $prefix: (mat, menu);
 // 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;
-  $on-surface: if($is-dark, #fff, #000);
-  $active-state-layer-color: rgba($on-surface, if($is-dark, 0.08, 0.04));
+  $active-state-layer-color: inspection.get-theme-color($theme, foreground, base,
+    if($is-dark, 0.08, 0.04));
   $text-color: inspection.get-theme-color($theme, foreground, text);
 
   @return (

package/core/tokens/m2/mat/_option.scss

@@ -15,8 +15,8 @@ $prefix: (mat, option);
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme, $palette-name: primary) {
   $is-dark: inspection.get-theme-type($theme) == dark;
-  $on-surface: if($is-dark, #fff, #000);
-  $active-state-layer-color: rgba($on-surface, if($is-dark, 0.08, 0.04));
+  $active-state-layer-color: inspection.get-theme-color($theme, foreground, base,
+    if($is-dark, 0.08, 0.04));
 
   @return (
     selected-state-label-text-color: inspection.get-theme-color($theme, $palette-name),

package/core/tokens/m2/mat/_outlined-button.scss

@@ -28,7 +28,6 @@ $prefix: (mat, outlined-button);
 // 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;
-  $on-surface: if($is-dark, #fff, #000);
   $ripple-opacities: if($is-dark,
     mdc-ripple-theme.$light-ink-opacities,
     mdc-ripple-theme.$dark-ink-opacities
@@ -36,13 +35,13 @@ $prefix: (mat, outlined-button);
 
   @return (
     // Color of the element that shows the hover, focus and pressed states.
-    state-layer-color: $on-surface,
+    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-state-layer-color: $on-surface,
+    disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
 
     // Color of the ripple element.
-    ripple-color: rgba($on-surface, 0.1),
+    ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
 
     // Opacity of the ripple when the button is hovered.
     hover-state-layer-opacity: map.get($ripple-opacities, hover),
@@ -58,10 +57,14 @@ $prefix: (mat, outlined-button);
 // 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);
+  $ripple-opacity: 0.1;
 
   @return (
     state-layer-color: $color,
-    ripple-color: if(meta.type-of($color) == color, rgba($color, 0.1), $color),
+    ripple-color: if(
+      meta.type-of($color) == color,
+      rgba($color, $ripple-opacity),
+      inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
   );
 }