@angular/material 17.2.0 → 17.2.2

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/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/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/_expansion.scss

@@ -12,6 +12,8 @@ $prefix: (mat, expansion);
 @function get-unthemable-tokens() {
   @return (
     container-shape: 4px,
+    legacy-header-indicator-display: inline-block,
+    header-indicator-display: none,
   );
 }
 

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

@@ -18,7 +18,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 +28,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 +47,42 @@ $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;
+
+  @if (token-utils.$private-is-internal-build) {
+    $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

@@ -18,7 +18,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 +28,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 +47,42 @@ $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;
+
+  @if (token-utils.$private-is-internal-build) {
+    $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

@@ -28,7 +28,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 +35,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 +56,27 @@ $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;
+
+  // 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) {
+    $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),

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),

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

@@ -28,7 +28,6 @@ $prefix: (mat, protected-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, protected-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 +56,27 @@ $prefix: (mat, protected-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;
+
+  // 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) {
+    $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/_radio.scss

@@ -14,10 +14,8 @@ $prefix: (mat, radio);
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme, $palette-name: accent) {
-  $is-dark: inspection.get-theme-type($theme) == dark;
-
   @return (
-    ripple-color: if($is-dark, #fff, #000),
+    ripple-color: inspection.get-theme-color($theme, foreground, base),
     checked-ripple-color: inspection.get-theme-color($theme, $palette-name, default),
     disabled-label-color: inspection.get-theme-color($theme, foreground, disabled-text),
   );

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

@@ -19,19 +19,29 @@ $prefix: (mat, select);
 // 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;
+
+  // 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.
   $on-surface: if($is-dark, #fff, #000);
+  $text-color-base: if(token-utils.$private-is-internal-build, $on-surface,
+    inspection.get-theme-color($theme, foreground, text, 1));
+  $disabled-text-color-base: if(token-utils.$private-is-internal-build, $on-surface,
+    inspection.get-theme-color($theme, foreground, disabled-text, 1));
+  $icon-color-base: if(token-utils.$private-is-internal-build, $on-surface,
+    inspection.get-theme-color($theme, foreground, divider, 1));
 
   @return (
     panel-background-color: inspection.get-theme-color($theme, background, card),
-    enabled-trigger-text-color: rgba($on-surface, 0.87),
-    disabled-trigger-text-color: rgba($on-surface, 0.38),
-    placeholder-text-color: rgba($on-surface, 0.6),
-    enabled-arrow-color: rgba($on-surface, 0.54),
-    disabled-arrow-color: rgba($on-surface, 0.38),
+    enabled-trigger-text-color: sass-utils.safe-color-change($text-color-base, $alpha: 0.87),
+    disabled-trigger-text-color:
+      sass-utils.safe-color-change($disabled-text-color-base, $alpha: 0.38),
+    placeholder-text-color: sass-utils.safe-color-change($text-color-base, $alpha: 0.6),
+    enabled-arrow-color: sass-utils.safe-color-change($icon-color-base, $alpha: 0.54),
+    disabled-arrow-color: sass-utils.safe-color-change($text-color-base, $alpha: 0.38),
     focused-arrow-color: sass-utils.safe-color-change(
-        inspection.get-theme-color($theme, $palette-name, default), $alpha: 0.87),
+      inspection.get-theme-color($theme, $palette-name, default), $alpha: 0.87),
     invalid-arrow-color: sass-utils.safe-color-change(
-        inspection.get-theme-color($theme, warn, default), $alpha: 0.87),
+      inspection.get-theme-color($theme, warn, default), $alpha: 0.87),
   );
 }
 

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

@@ -37,6 +37,7 @@ $prefix: (mat, switch);
 
     track-outline-width: 1px,
     track-outline-color: transparent,
+    selected-track-outline-width: 1px,
     disabled-unselected-track-outline-width: 1px,
     disabled-unselected-track-outline-color: transparent,
   );