@angular/material 17.2.0 → 17.2.2

package/core/tokens/m2/mat/_tab-header.scss

@@ -19,13 +19,13 @@ $prefix: (mat, tab-header);
 // 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;
-  $inactive-label-text-color: rgba(if($is-dark, #fff, #000), 0.6);
+  $inactive-label-text-color: inspection.get-theme-color($theme, foreground, text, 0.6);
   $active-label-text-color: inspection.get-theme-color($theme, $palette-name, default);
   $ripple-color: inspection.get-theme-color($theme, $palette-name, default);
 
   @return (
     disabled-ripple-color: inspection.get-theme-color($theme, foreground, disabled),
-    pagination-icon-color: if($is-dark, #fff, #000),
+    pagination-icon-color: inspection.get-theme-color($theme, foreground, icon, 1),
 
     // Note: MDC has equivalents of these tokens, but they lead to much higher selector specificity.
     inactive-label-text-color: $inactive-label-text-color,

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

@@ -31,7 +31,6 @@ $prefix: (mat, text-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
@@ -39,13 +38,13 @@ $prefix: (mat, text-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/mdc/_checkbox.scss

@@ -3,22 +3,12 @@
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
+@use '../../../mdc-helpers/mdc-helpers';
 @use '../../token-utils';
-@use '@material/theme/theme-color' as mdc-theme-color;
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mdc, checkbox);
 
-// MDC logs a warning if the `contrast-tone` function is called with a CSS variable.
-// This function falls back to determining the tone based on whether the theme is light or dark.
-@function _contrast-tone($value, $is-dark, $light-color: '#fff', $dark-color: '#000') {
-  @if ($value == 'dark' or $value == 'light' or type-of($value) == 'color') {
-    @return if(mdc-theme-color.contrast-tone($value) == 'dark', $dark-color, $light-color);
-  }
-
-  @return if($is-dark, $light-color, $dark-color);
-}
-
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
 //
@@ -62,6 +52,18 @@ $prefix: (mdc, checkbox);
       inspection.get-theme-color($theme, foreground, base), $alpha: 0.54);
   $active-border-color:
     theming.get-color-from-palette(palette.$gray-palette, if($is-dark, 200, 900));
+  $selected-checkmark-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) {
+    $contrast-tone: mdc-helpers.variable-safe-contrast-tone($palette-selected, $is-dark);
+    $selected-checkmark-color: if($contrast-tone == 'dark', #000, #fff);
+  }
+  @else {
+    $selected-checkmark-color:
+      inspection.get-theme-color($theme, $palette-name, default-contrast, 1);
+  }
 
   @return (
     // The color of the checkbox fill when the checkbox is selected and disabled.
@@ -69,7 +71,7 @@ $prefix: (mdc, checkbox);
     // The color of the checkbox border when the checkbox is unselected and disabled.
     disabled-unselected-icon-color: $disabled-color,
     // The color of the checkmark when the checkbox is selected.
-    selected-checkmark-color: _contrast-tone($palette-selected, $is-dark),
+    selected-checkmark-color: $selected-checkmark-color,
     // The color of the checkbox fill when the checkbox is selected and focused.
     selected-focus-icon-color: $palette-selected,
     // The color of the checkbox fill when the checkbox is selected and hovered.

package/core/tokens/m2/mdc/_chip.scss

@@ -2,7 +2,6 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use '../../token-utils';
-@use '../../../mdc-helpers/mdc-helpers';
 @use '../../../style/sass-utils';
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
@@ -230,15 +229,10 @@ $prefix: (mdc, chip);
     $foreground: if($is-dark, $grey-50, $grey-900);
 
     $surface: inspection.get-theme-color($theme, background, card);
-    $on-surface: if(
-        mdc-helpers.variable-safe-contrast-tone($surface, $is-dark) == 'dark',
-        #000,
-        #fff
-    );
     $background: if(
-        meta.type-of($on-surface) == color and meta.type-of($surface) == color,
-        color.mix($on-surface, $surface, 12%),
-        $on-surface
+        meta.type-of($state-layer-color) == color and meta.type-of($surface) == color,
+        color.mix($state-layer-color, $surface, 12%),
+        $state-layer-color
     );
   }
   @else {

package/core/tokens/m2/mdc/_dialog.scss

@@ -55,15 +55,21 @@ $prefix: (mdc, dialog);
 // 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);
+
+  // 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.
+  $text-base: if(token-utils.$private-is-internal-build,
+    if($is-dark, #fff, #000),
+    inspection.get-theme-color($theme, foreground, text, 1)
+  );
 
   @return (
     // Background color of the container.
     container-color: inspection.get-theme-color($theme, background, dialog),
     // Color of the dialog header.
-    subhead-color: rgba($on-surface, 0.87),
+    subhead-color: sass-utils.safe-color-change($text-base, $alpha: 0.87),
     // Color of the dialog body text.
-    supporting-text-color: rgba($on-surface, 0.6),
+    supporting-text-color: sass-utils.safe-color-change($text-base, $alpha: 0.6),
   );
 }
 

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

@@ -51,26 +51,36 @@ $prefix: (mdc, 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;
-  $surface: inspection.get-theme-color($theme, background, card);
-  $on-surface: if($is-dark, #fff, #000);
 
   @return (
-    container-color: $surface,
-    label-text-color: $on-surface,
-    disabled-container-color: rgba($on-surface, 0.12),
-    disabled-label-text-color: rgba($on-surface, if($is-dark, 0.5, 0.38)),
+    container-color: inspection.get-theme-color($theme, background, card),
+    label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
+    disabled-container-color: inspection.get-theme-color($theme, foreground, disabled-button,
+      0.12),
+    disabled-label-text-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 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, default);
-  $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);
+  $label-text-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;
+    $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);
+    $label-text-color: if($contrast-tone == 'dark', #000, #fff);
+  }
+  @else {
+    $label-text-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1);
+  }
 
   @return (
     container-color: $container-color,
-    label-text-color: if($contrast-tone == 'dark', #000, #fff),
+    label-text-color: $label-text-color,
   );
 }
 

package/core/tokens/m2/mdc/_filled-text-field.scss

@@ -93,30 +93,42 @@ $prefix: (mdc, filled-text-field);
 @function get-color-tokens($theme) {
   $is-dark: inspection.get-theme-type($theme) == dark;
   $surface: inspection.get-theme-color($theme, background, card);
-  $on-surface: if($is-dark, #fff, #000);
   $warn-color: inspection.get-theme-color($theme, warn);
   $color-tokens: private-get-color-palette-color-tokens($theme, primary);
+  $on-surface: if($is-dark, #fff, #000);
+
+  // 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.
+  $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));
+  $divider-base: if(token-utils.$private-is-internal-build, $on-surface,
+    inspection.get-theme-color($theme, foreground, divider, 1));
 
   @return map.merge($color-tokens, (
     container-color: _variable-safe-mix($on-surface, $surface, 4%),
     disabled-container-color: _variable-safe-mix($on-surface, $surface, 2%),
 
-    label-text-color: rgba($on-surface, 0.6),
-    hover-label-text-color: rgba($on-surface, 0.6),
-    disabled-label-text-color: rgba($on-surface, 0.38),
+    label-text-color: sass-utils.safe-color-change($text-color-base, $alpha: 0.6),
+    hover-label-text-color: sass-utils.safe-color-change($text-color-base, $alpha: 0.6),
+    disabled-label-text-color:
+      sass-utils.safe-color-change($disabled-text-color-base, $alpha: 0.38),
 
-    input-text-color: rgba($on-surface, 0.87),
-    disabled-input-text-color: rgba($on-surface, 0.38),
-    input-text-placeholder-color: rgba($on-surface, 0.6),
+    input-text-color: sass-utils.safe-color-change($text-color-base, $alpha: 0.87),
+    disabled-input-text-color:
+      sass-utils.safe-color-change($disabled-text-color-base, $alpha: 0.38),
+    input-text-placeholder-color:
+      sass-utils.safe-color-change($text-color-base, $alpha: 0.6),
 
     error-hover-label-text-color: $warn-color,
     error-focus-label-text-color: $warn-color,
     error-label-text-color: $warn-color,
     error-caret-color: $warn-color,
 
-    active-indicator-color: rgba($on-surface, 0.42),
-    disabled-active-indicator-color: rgba($on-surface, 0.06),
-    hover-active-indicator-color: rgba($on-surface, 0.87),
+    active-indicator-color: sass-utils.safe-color-change($divider-base, $alpha: 0.42),
+    disabled-active-indicator-color: sass-utils.safe-color-change($divider-base, $alpha: 0.06),
+    hover-active-indicator-color: sass-utils.safe-color-change($divider-base, $alpha: 0.87),
     error-active-indicator-color: $warn-color,
     error-focus-active-indicator-color: $warn-color,
     error-hover-active-indicator-color: $warn-color,

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

@@ -3,7 +3,6 @@
 @use '../../../style/sass-utils';
 @use '../../../theming/inspection';
 @use '../../../theming/theming';
-@use '../../../mdc-helpers/mdc-helpers';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mdc, outlined-button);
@@ -55,15 +54,20 @@ $prefix: (mdc, 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;
-  $surface: inspection.get-theme-color($theme, background, card);
-  $contrast-tone: mdc-helpers.variable-safe-contrast-tone($surface, $is-dark);
-  $on-surface: 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.
+  $outline: if(token-utils.$private-is-internal-build,
+    rgba(if($is-dark, #fff, #000), 0.12),
+    inspection.get-theme-color($theme, foreground, divider)
+  );
 
   @return (
-    disabled-outline-color: rgba($on-surface, 0.12),
-    disabled-label-text-color: rgba($on-surface, if($is-dark, 0.5, 0.38)),
-    label-text-color: if($is-dark, #fff, #000),
-    outline-color: rgba($on-surface, 0.12)
+    disabled-outline-color: $outline,
+    disabled-label-text-color: inspection.get-theme-color($theme, foreground, disabled-button,
+      if($is-dark, 0.5, 0.38)),
+    label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
+    outline-color: $outline,
   );
 }
 

package/core/tokens/m2/mdc/_outlined-text-field.scss

@@ -86,18 +86,29 @@ $prefix: (mdc, outlined-text-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);
   $warn-color: inspection.get-theme-color($theme, warn);
   $color-tokens: private-get-color-palette-color-tokens($theme, primary);
 
+  // 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));
+  $divider-base: if(token-utils.$private-is-internal-build, $on-surface,
+    inspection.get-theme-color($theme, foreground, divider, 1));
+
   @return map.merge($color-tokens, (
-    label-text-color: rgba($on-surface, 0.6),
-    hover-label-text-color: rgba($on-surface, 0.6),
-    disabled-label-text-color: rgba($on-surface, 0.38),
+    label-text-color: sass-utils.safe-color-change($text-color-base, $alpha: 0.6),
+    hover-label-text-color: sass-utils.safe-color-change($text-color-base, $alpha: 0.6),
+    disabled-label-text-color:
+      sass-utils.safe-color-change($disabled-text-color-base, $alpha: 0.38),
 
-    input-text-color: rgba($on-surface, 0.87),
-    disabled-input-text-color: rgba($on-surface, 0.38),
-    input-text-placeholder-color: rgba($on-surface, 0.6),
+    input-text-color: sass-utils.safe-color-change($text-color-base, $alpha: 0.87),
+    disabled-input-text-color:
+      sass-utils.safe-color-change($disabled-text-color-base, $alpha: 0.38),
+    input-text-placeholder-color: sass-utils.safe-color-change($text-color-base, $alpha: 0.6),
 
     error-caret-color: $warn-color,
     error-focus-label-text-color: $warn-color,
@@ -105,9 +116,9 @@ $prefix: (mdc, outlined-text-field);
     error-hover-label-text-color: $warn-color,
 
     // Outline tokens
-    outline-color: rgba($on-surface, 0.38),
-    disabled-outline-color: rgba($on-surface, 0.06),
-    hover-outline-color: rgba($on-surface, 0.87),
+    outline-color: sass-utils.safe-color-change($divider-base, $alpha: 0.38),
+    disabled-outline-color: sass-utils.safe-color-change($divider-base, $alpha: 0.06),
+    hover-outline-color: sass-utils.safe-color-change($divider-base, $alpha: 0.87),
     error-focus-outline-color: $warn-color,
     error-hover-outline-color: $warn-color,
     error-outline-color: $warn-color,

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

@@ -45,13 +45,14 @@ $prefix: (mdc, 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);
 
   @return (
     container-color: inspection.get-theme-color($theme, background, card),
-    label-text-color: $on-surface,
-    disabled-container-color: rgba($on-surface, 0.12),
-    disabled-label-text-color: rgba($on-surface, if($is-dark, 0.5, 0.38)),
+    label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
+    disabled-container-color: inspection.get-theme-color($theme, foreground, disabled-button,
+      0.12),
+    disabled-label-text-color: inspection.get-theme-color($theme, foreground, disabled-button,
+      if($is-dark, 0.5, 0.38)),
     container-elevation: 2,
     disabled-container-elevation: 0,
     focus-container-elevation: 4,
@@ -63,13 +64,23 @@ $prefix: (mdc, 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, default);
-  $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);
+  $label-text-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;
+    $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);
+    $label-text-color: if($contrast-tone == 'dark', #000, #fff);
+  }
+  @else {
+    $label-text-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1);
+  }
 
   @return (
     container-color: $container-color,
-    label-text-color: if($contrast-tone == 'dark', #000, #fff),
+    label-text-color: $label-text-color,
   );
 }
 

package/core/tokens/m2/mdc/_radio.scss

@@ -45,15 +45,14 @@ $prefix: (mdc, radio);
 @function get-color-tokens($theme, $palette-name: accent) {
   $is-dark: inspection.get-theme-type($theme) == dark;
   $palette-color: inspection.get-theme-color($theme, $palette-name, default);
-  $on-surface: if($is-dark, #fff, #000);
   $icon-color: theming.get-color-from-palette(palette.$gray-palette, if($is-dark, 200, 900));
 
   @return (
-    disabled-selected-icon-color: $on-surface,
-    disabled-unselected-icon-color: $on-surface,
+    disabled-selected-icon-color: inspection.get-theme-color($theme, foreground, icon, 1),
+    disabled-unselected-icon-color: inspection.get-theme-color($theme, foreground, icon, 1),
     unselected-hover-icon-color: $icon-color,
-    unselected-icon-color: rgba($on-surface, 0.54),
-    unselected-pressed-icon-color: rgba($on-surface, 0.54),
+    unselected-icon-color: inspection.get-theme-color($theme, foreground, icon, 0.54),
+    unselected-pressed-icon-color: inspection.get-theme-color($theme, foreground, icon, 0.54),
     selected-focus-icon-color: $palette-color,
     selected-hover-icon-color: $palette-color,
     selected-icon-color: $palette-color,

package/core/tokens/m2/mdc/_text-button.scss

@@ -44,11 +44,11 @@ $prefix: (mdc, text-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);
 
   @return (
-    label-text-color: $on-surface,
-    disabled-label-text-color: rgba($on-surface, if($is-dark, 0.5, 0.38)),
+    label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
+    disabled-label-text-color: inspection.get-theme-color($theme, foreground, disabled-button,
+      if($is-dark, 0.5, 0.38)),
   );
 }
 

package/datepicker/index.d.ts

@@ -1481,6 +1481,7 @@ export declare class MatEndDate<D> extends MatDateRangeInputPartBase<D> {
     protected _getValueFromModel(modelValue: DateRange<D>): D | null;
     protected _shouldHandleChangeEvent(change: DateSelectionModelChange<DateRange<D>>): boolean;
     protected _assignValueToModel(value: D | null): void;
+    private _moveCaretToEndOfStartInput;
     _onKeydown(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatEndDate<any>, [null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatEndDate<any>, "input[matEndDate]", never, {}, { "dateChange": "dateChange"; "dateInput": "dateInput"; }, never, never, true, never>;