@angular/material 20.1.0-next.0 → 20.1.0-next.1

package/core/selection/pseudo-checkbox/_m2-pseudo-checkbox.scss

@@ -13,15 +13,14 @@
 @function get-color-tokens($theme, $color-variant) {
   $is-dark: inspection.get-theme-type($theme) == dark;
   $disabled-color: if($is-dark, #686868, #b0b0b0);
-  $checkmark-color: inspection.get-theme-color($theme, system, background);
   $system: m2-utils.get-system($theme);
   $system: m3-utils.replace-colors-with-variant($system, secondary, $color-variant);
 
   @return (
     pseudo-checkbox-full-selected-icon-color: map.get($system, secondary),
-    pseudo-checkbox-full-selected-checkmark-color: $checkmark-color,
+    pseudo-checkbox-full-selected-checkmark-color: map.get($system, background),
     pseudo-checkbox-full-unselected-icon-color: map.get($system, on-surface-variant),
-    pseudo-checkbox-full-disabled-selected-checkmark-color: $checkmark-color,
+    pseudo-checkbox-full-disabled-selected-checkmark-color: map.get($system, background),
     pseudo-checkbox-full-disabled-unselected-icon-color: $disabled-color,
     pseudo-checkbox-full-disabled-selected-icon-color: $disabled-color,
     pseudo-checkbox-minimal-selected-checkmark-color: map.get($system, secondary),

package/core/tokens/_m2-utils.scss

@@ -8,17 +8,7 @@ $private-is-internal-build: false;
 
 // Gets the theme's system values as a flat map.
 @function get-system($theme) {
-  $system: map.get($theme, _mat-theming-internals-do-not-access, m2-config, color, system);
-  @if $system {
-    @return $system;
-  }
-
-  $system: map.get($theme, system);
-  @if $system {
-    @return $system;
-  }
-
-  $system: map.get($theme, color, system);
+  $system: map.get($theme, _mat-system);
   @if $system {
     @return $system;
   }

package/core/tokens/_m3-system.scss

@@ -19,6 +19,7 @@
 @use '../theming/config-validation';
 @use '../theming/definition';
 @use '../theming/palettes';
+@use '../style/sass-utils';
 @use './m3';
 @use 'sass:map';
 @use 'sass:meta';
@@ -196,7 +197,7 @@
       m3.md-sys-shape-values(),
       m3.md-sys-state-values());
 
-  & {
+  @include sass-utils.current-selector-or-root {
     @each $name, $value in $overrides {
       @if (map.has-key($sys-names, $name)) {
         --#{$prefix}-#{$name}: #{map.get($overrides, $name)};
@@ -222,7 +223,7 @@
   $sys-colors: map.set($sys-colors, neutral-variant20, map.get($palettes, neutral-variant, 20));
   $sys-colors: map.set($sys-colors, neutral10, map.get($palettes, neutral, 10));
 
-  & {
+  @include sass-utils.current-selector-or-root {
     @each $name, $value in $sys-colors {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
     }
@@ -261,7 +262,7 @@
         typography-system-variables-prefix) or definition.$system-level-prefix;
   }
 
-  & {
+  @include sass-utils.current-selector-or-root {
     @each $name, $value in m3.md-sys-typescale-values($font-definition) {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
     }
@@ -272,17 +273,18 @@
   $shadow-color: map.get(
       $theme, definition.$internals, palettes, neutral, 0);
 
-  @each $name, $value in m3.md-sys-elevation-values() {
-    $level: map.get($overrides, $name) or $value;
-    $value: elevation.get-box-shadow($level, $shadow-color);
-    & {
+
+  @include sass-utils.current-selector-or-root {
+    @each $name, $value in m3.md-sys-elevation-values() {
+      $level: map.get($overrides, $name) or $value;
+      $value: elevation.get-box-shadow($level, $shadow-color);
       --#{$prefix}-#{$name}: #{$value};
     }
   }
 }
 
 @mixin system-level-shape($theme: (), $overrides: (), $prefix: definition.$system-level-prefix) {
-  & {
+  @include sass-utils.current-selector-or-root {
     @each $name, $value in m3.md-sys-shape-values() {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
     }
@@ -290,7 +292,7 @@
 }
 
 @mixin system-level-state($theme: (), $overrides: (), $prefix: definition.$system-level-prefix) {
-  & {
+  @include sass-utils.current-selector-or-root {
     @each $name, $value in m3.md-sys-state-values() {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
     }

package/datepicker/_datepicker-theme.scss

@@ -8,30 +8,6 @@
 @use '../core/style/sass-utils';
 @use '../core/typography/typography';
 @use '../button/icon-button-theme';
-@use '../core/tokens/m2-utils';
-@use '../core/tokens/m3-utils';
-
-// TODO(crisbeto): these variables aren't used anymore and should be removed.
-$selected-today-box-shadow-width: 1px;
-$selected-fade-amount: 0.6;
-$range-fade-amount: 0.2;
-$today-fade-amount: 0.2;
-$calendar-body-font-size: 13px !default;
-$calendar-weekday-table-font-size: 11px !default;
-
-@mixin _calendar-color($theme, $color-variant) {
-  $system: m2-utils.get-system($theme);
-  $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
-
-  $range-color: m2-datepicker.private-get-range-background-color(map.get($system, primary));
-  $range-tokens: m2-datepicker.get-range-color-tokens($range-color);
-  $calendar-tokens: m2-datepicker.private-get-calendar-color-palette-color-tokens(
-    $theme,
-    $color-variant
-  );
-
-  @include token-utils.create-token-values-mixed(map.merge($calendar-tokens, $range-tokens));
-}
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
 /// for the mat-datepicker.
@@ -55,28 +31,19 @@ $calendar-weekday-table-font-size: 11px !default;
         map.get(m3-datepicker.get-tokens($theme, $color-variant), color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-datepicker.get-color-tokens($theme));
-    }
-
-    .mat-datepicker-content {
-      &.mat-accent {
-        @include _calendar-color($theme, secondary);
-      }
-
-      &.mat-warn {
-        @include _calendar-color($theme, error);
-      }
+      @include token-utils.create-token-values-mixed(
+          m2-datepicker.get-color-tokens($theme, primary));
     }
 
-    .mat-datepicker-toggle-active {
+    .mat-datepicker-content, .mat-datepicker-toggle-active {
       &.mat-accent {
-        $accent-tokens: m2-datepicker.private-get-toggle-color-palette-color-tokens($theme, accent);
-        @include token-utils.create-token-values-mixed($accent-tokens);
+        @include token-utils.create-token-values-mixed(
+            m2-datepicker.get-color-tokens($theme, secondary));
       }
 
       &.mat-warn {
-        $warn-tokens: m2-datepicker.private-get-toggle-color-palette-color-tokens($theme, warn);
-        @include token-utils.create-token-values-mixed($warn-tokens);
+        @include token-utils.create-token-values-mixed(
+            m2-datepicker.get-color-tokens($theme, error));
       }
     }
   }
@@ -96,21 +63,16 @@ $calendar-weekday-table-font-size: 11px !default;
 
 @mixin date-range-colors(
   $range-color,
-  $comparison-color: m2-datepicker.$private-default-comparison-color,
-  $overlap-color: m2-datepicker.$private-default-overlap-color,
-  $overlap-selected-color:
-    m2-datepicker.private-get-default-overlap-selected-color($overlap-color)
+  $comparison-color: rgba(#f9ab00, 0.2),
+  $overlap-color: #a8dab5,
+  $overlap-selected-color: color.adjust($overlap-color, $lightness: -30%)
 ) {
-  $tokens: m2-datepicker.get-range-color-tokens(
-    $range-color: $range-color,
-    $comparison-color: $comparison-color,
-    $overlap-color: $overlap-color,
-    $overlap-selected-color: $overlap-selected-color,
-  );
-
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values-mixed($tokens);
-  }
+  @include overrides((
+    calendar-date-in-range-state-background-color: $range-color,
+    calendar-date-in-comparison-range-state-background-color: $comparison-color,
+    calendar-date-in-overlap-range-state-background-color: $overlap-color,
+    calendar-date-in-overlap-range-selected-state-background-color: $overlap-selected-color,
+  ));
 }
 
 /// Outputs density theme styles for the mat-datepicker.

package/datepicker/_m2-datepicker.scss

@@ -1,32 +1,10 @@
 @use 'sass:color';
-@use 'sass:meta';
-@use 'sass:math';
 @use '../core/theming/inspection';
 @use '../core/style/elevation';
-@use '../core/style/sass-utils';
 @use '../core/tokens/m3-utils';
 @use '../core/tokens/m2-utils';
 @use 'sass:map';
 
-$_selected-fade-amount: 0.6;
-$_today-fade-amount: 0.2;
-
-// Utility that produces a range background color from a specific color.
-@function private-get-range-background-color($color) {
-  @return rgba($color, 0.2);
-}
-
-// Utility that produces the overlap selected color from an overlap color.
-@function private-get-default-overlap-selected-color($overlap-color) {
-  @return color.adjust($overlap-color, $lightness: -30%);
-}
-
-// Default range comparison color.
-$private-default-comparison-color: private-get-range-background-color(#f9ab00);
-
-// Default range overlap color.
-$private-default-overlap-color: #a8dab5;
-
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
@@ -39,61 +17,50 @@ $private-default-overlap-color: #a8dab5;
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme) {
+@function get-color-tokens($theme, $color-variant) {
   $system: m2-utils.get-system($theme);
-
-  $inactive-icon-color: inspection.get-theme-color($theme, foreground, icon);
+  $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
   $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
-  $hint-text-color: inspection.get-theme-color($theme, foreground, hint-text);
-  $preview-outline-color: map.get($system, outline);
-  $today-disabled-outline-color: null;
-  $is-dark: inspection.get-theme-type($theme) == dark;
-  $system: m2-utils.get-system($theme);
-
-  $primary-color: map.get($system, primary);
-  $range-tokens: get-range-color-tokens(private-get-range-background-color($primary-color));
-  $calendar-tokens: private-get-calendar-color-palette-color-tokens($theme, primary);
-  $toggle-tokens: private-get-toggle-color-palette-color-tokens($theme, primary);
-
-  // The divider color is set under the assumption that it'll be used
-  // for a solid border, but because we're using a dashed border for the
-  // preview range, we need to bump its opacity to ensure that it's visible.
-  @if meta.type-of($preview-outline-color) == color {
-    $preview-outline-opacity: math.min(color.opacity($preview-outline-color) * 2, 1);
-    $preview-outline-color: rgba($preview-outline-color, $preview-outline-opacity);
-  }
 
-  @if (meta.type-of($hint-text-color) == color) {
-    $today-disabled-outline-color: color.adjust($hint-text-color, $alpha: -$_today-fade-amount);
-  }
-  @else {
-    $today-disabled-outline-color: $disabled;
-  }
-
-  @return sass-utils.merge-all($calendar-tokens, $toggle-tokens, $range-tokens, (
+  @return (
+    datepicker-calendar-date-in-range-state-background-color:
+        m3-utils.color-with-opacity(map.get($system, primary), 20%),
+    datepicker-calendar-date-in-comparison-range-state-background-color:
+        m3-utils.color-with-opacity(map.get($system, secondary), 20%),
+    datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5,
+    datepicker-calendar-date-in-overlap-range-selected-state-background-color:
+        color.adjust(#a8dab5, $lightness: -30%),
+    datepicker-calendar-date-selected-state-text-color: map.get($system, on-primary),
+    datepicker-calendar-date-selected-state-background-color: map.get($system, primary),
+    datepicker-calendar-date-selected-disabled-state-background-color:
+        m3-utils.color-with-opacity(map.get($system, primary), 38%),
+    datepicker-calendar-date-today-selected-state-outline-color: map.get($system, on-primary),
+    datepicker-calendar-date-focus-state-background-color: m3-utils.color-with-opacity(
+        map.get($system, primary), map.get($system, focus-state-layer-opacity)),
+    datepicker-calendar-date-hover-state-background-color: m3-utils.color-with-opacity(
+        map.get($system, primary), map.get($system, hover-state-layer-opacity)),
+
+    datepicker-toggle-active-state-icon-color: map.get($system, primary),
     datepicker-toggle-icon-color: map.get($system, on-surface-variant),
     datepicker-calendar-body-label-text-color: map.get($system, on-surface-variant),
-    datepicker-calendar-period-button-text-color:
-        inspection.get-theme-color($theme, foreground, base),
+    datepicker-calendar-period-button-text-color: map.get($system, on-surface),
     datepicker-calendar-period-button-icon-color: map.get($system, on-surface-variant),
     datepicker-calendar-navigation-button-icon-color: map.get($system, on-surface-variant),
     datepicker-calendar-header-divider-color: map.get($system, outline),
     datepicker-calendar-header-text-color: map.get($system, on-surface-variant),
 
-    // Note: though it's not text, the border is a hint about the fact
-    // that this is today's date, so we use the hint color.
-    datepicker-calendar-date-today-outline-color: $hint-text-color,
-    datepicker-calendar-date-today-disabled-state-outline-color: $today-disabled-outline-color,
+    datepicker-calendar-date-today-outline-color: map.get($system, on-surface-variant),
+    datepicker-calendar-date-today-disabled-state-outline-color: $disabled,
     datepicker-calendar-date-text-color: map.get($system, on-surface),
     datepicker-calendar-date-outline-color: transparent,
     datepicker-calendar-date-disabled-state-text-color: $disabled,
-    datepicker-calendar-date-preview-state-outline-color: $preview-outline-color,
+    datepicker-calendar-date-preview-state-outline-color: map.get($system, on-surface-variant),
     datepicker-range-input-separator-color: map.get($system, on-surface),
     datepicker-range-input-disabled-state-separator-color: $disabled,
     datepicker-range-input-disabled-state-text-color: $disabled,
     datepicker-calendar-container-background-color: map.get($system, surface),
     datepicker-calendar-container-text-color: map.get($system, on-surface),
-  ));
+  );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
@@ -122,56 +89,6 @@ $private-default-overlap-color: #a8dab5;
   );
 }
 
-// Gets the tokens map that can be used to override the range colors.
-@function get-range-color-tokens(
-  $range-color,
-  $comparison-color: $private-default-comparison-color,
-  $overlap-color: $private-default-overlap-color,
-  $overlap-selected-color: private-get-default-overlap-selected-color($overlap-color)) {
-
-  @return (
-    datepicker-calendar-date-in-range-state-background-color: $range-color,
-    datepicker-calendar-date-in-comparison-range-state-background-color: $comparison-color,
-    datepicker-calendar-date-in-overlap-range-state-background-color: $overlap-color,
-    datepicker-calendar-date-in-overlap-range-selected-state-background-color:
-        $overlap-selected-color,
-  );
-}
-
-@function private-get-calendar-color-palette-color-tokens($theme, $color-variant) {
-  $system: m2-utils.get-system($theme);
-  $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
-
-  $palette-color: map.get($system, primary);
-  $default-contrast: map.get($system, on-primary);
-  $active-background-color: m3-utils.color-with-opacity(map.get($system, primary), 30%);
-  $active-disabled-color: null;
-
-  @if (meta.type-of($palette-color) == color) {
-    $active-disabled-color: color.adjust($palette-color, $alpha: -$_selected-fade-amount);
-  }
-  @else {
-    $active-disabled-color: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
-  }
-
-  @return (
-    datepicker-calendar-date-selected-state-text-color: $default-contrast,
-    datepicker-calendar-date-selected-state-background-color: $palette-color,
-    datepicker-calendar-date-selected-disabled-state-background-color: $active-disabled-color,
-    datepicker-calendar-date-today-selected-state-outline-color: $default-contrast,
-    datepicker-calendar-date-focus-state-background-color: $active-background-color,
-    datepicker-calendar-date-hover-state-background-color: $active-background-color,
-  );
-}
-
-@function private-get-toggle-color-palette-color-tokens($theme, $palette-name) {
-  @return (
-    datepicker-toggle-active-state-icon-color:
-        inspection.get-theme-color($theme, $palette-name, text),
-  );
-}
-
-
 // Tokens that can be configured through Angular Material's density theming API.
 @function get-density-tokens($theme) {
   @return ();

package/datepicker/index.d.ts

@@ -1127,7 +1127,7 @@ interface MatDatepickerControl<D> {
     getOverlayLabelId(): string | null;
     stateChanges: Observable<void>;
 }
-/** A datepicker that can be attached to a {@link MatDatepickerControl}. */
+/** A datepicker that can be attached to a `MatDatepickerControl`. */
 interface MatDatepickerPanel<C extends MatDatepickerControl<D>, S, D = ExtractDateTypeFromSelection<S>> {
     /** Stream that emits whenever the date picker is closed. */
     closedStream: EventEmitter<void>;

package/dialog/_m2-dialog.scss

@@ -1,5 +1,7 @@
 @use '../core/style/elevation';
 @use '../core/theming/inspection';
+@use '../core/tokens/m2-utils';
+@use 'sass:map';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -23,11 +25,11 @@
 
 // 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;
+  $system: m2-utils.get-system($theme);
   @return (
-    dialog-container-color: inspection.get-theme-color($theme, system, surface),
-    dialog-subhead-color: inspection.get-theme-color($theme, system, on-surface),
-    dialog-supporting-text-color: inspection.get-theme-color($theme, system, on-surface-variant),
+    dialog-container-color: map.get($system, surface),
+    dialog-subhead-color: map.get($system, on-surface),
+    dialog-supporting-text-color: map.get($system, on-surface-variant),
   );
 }
 

package/divider/_m2-divider.scss

@@ -1,4 +1,5 @@
-@use '../core/theming/inspection';
+@use '../core/tokens/m2-utils';
+@use 'sass:map';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -10,8 +11,9 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    divider-color: inspection.get-theme-color($theme, system, outline)
+    divider-color: map.get($system, outline)
   );
 }