Merge branch 'angular:main' into chip-edit-icon

Author: adolgachev

src/material/button-toggle/_m2-button-toggle.scss

@@ -19,17 +19,17 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
   @return (
-    button-toggle-background-color: inspection.get-theme-color($theme, system, surface),
+    button-toggle-background-color: map.get($system, surface),
     button-toggle-disabled-selected-state-background-color:
         inspection.get-theme-color($theme, background, selected-disabled-button),
-    button-toggle-disabled-selected-state-text-color:
-        inspection.get-theme-color($theme, system, on-surface),
-    button-toggle-disabled-state-background-color:
-        inspection.get-theme-color($theme, system, surface),
+    button-toggle-disabled-selected-state-text-color: map.get($system, on-surface),
+    button-toggle-disabled-state-background-color: map.get($system, surface),
     button-toggle-disabled-state-text-color:
         inspection.get-theme-color($theme, foreground, disabled-button),
-    button-toggle-divider-color: inspection.get-theme-color($theme, system, outline),
+    button-toggle-divider-color: map.get($system, outline),
     button-toggle-legacy-disabled-selected-state-background-color:
         inspection.get-theme-color($theme, background, selected-disabled-button),
     button-toggle-legacy-disabled-state-background-color:
@@ -38,16 +38,15 @@
         inspection.get-theme-color($theme, foreground, disabled-button),
     button-toggle-legacy-selected-state-background-color:
         inspection.get-theme-color($theme, background, selected-button),
-    button-toggle-legacy-selected-state-text-color:
-        inspection.get-theme-color($theme, foreground, secondary-text),
+    button-toggle-legacy-selected-state-text-color: map.get($system, surface-variant),
     button-toggle-legacy-state-layer-color:
         inspection.get-theme-color($theme, background, focused-button),
     button-toggle-legacy-text-color: inspection.get-theme-color($theme, foreground, hint-text),
     button-toggle-selected-state-background-color:
         inspection.get-theme-color($theme, background, selected-button),
-    button-toggle-selected-state-text-color: inspection.get-theme-color($theme, system, on-surface),
+    button-toggle-selected-state-text-color: map.get($system, on-surface),
     button-toggle-state-layer-color: inspection.get-theme-color($theme, system, on-surface),
-    button-toggle-text-color: inspection.get-theme-color($theme, system, on-surface),
+    button-toggle-text-color: map.get($system, on-surface),
   );
 }
 

src/material/card/_m2-card.scss

@@ -1,5 +1,7 @@
 @use '../core/theming/inspection';
 @use '../core/style/elevation';
+@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.
@@ -14,14 +16,16 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
   @return (
-    card-elevated-container-color: inspection.get-theme-color($theme, system, surface),
+    card-elevated-container-color: map.get($system, surface),
     card-elevated-container-elevation: elevation.get-box-shadow(1),
-    card-outlined-container-color: inspection.get-theme-color($theme, system, surface),
+    card-outlined-container-color: map.get($system, surface),
     card-outlined-container-elevation: elevation.get-box-shadow(0),
     card-outlined-outline-color: rgba(inspection.get-theme-color($theme, foreground, base), 0.12),
-    card-subtitle-text-color: inspection.get-theme-color($theme, foreground, secondary-text),
-    card-filled-container-color: inspection.get-theme-color($theme, system, surface),
+    card-subtitle-text-color: map.get($system, surface-variant),
+    card-filled-container-color: map.get($system, surface),
     card-filled-container-elevation: elevation.get-box-shadow(0)
   );
 }

src/material/core/m2/_theming.scss

@@ -126,7 +126,10 @@
     system: (
       surface: white,
       on-surface: rgba(black, 0.87),
+      on-surface-variant: rgba(black, 0.54),
       background: map.get(palette.$grey-palette, 50),
+      inverse-surface: map.get(palette.$grey-palette, 800),
+      inverse-on-surface: white,
       outline: rgba(black, 0.12),
       hover-state-layer-opacity: 0.04,
       focus-state-layer-opacity: 0.12,
@@ -148,7 +151,10 @@
     system: (
       surface: map.get(palette.$grey-palette, 800),
       on-surface: white,
+      on-surface-variant: rgba(white, 0.7),
       background: #303030,
+      inverse-surface: white,
+      inverse-on-surface: rgba(black, 0.87),
       outline: rgba(white, 0.12),
       hover-state-layer-opacity: 0.04,
       focus-state-layer-opacity: 0.12,

src/material/core/selection/pseudo-checkbox/_m2-pseudo-checkbox.scss

@@ -1,4 +1,6 @@
 @use '../../theming/inspection';
+@use '../../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.
@@ -11,12 +13,12 @@
   $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);
 
   @return (
     pseudo-checkbox-full-selected-icon-color: inspection.get-theme-color($theme, $palette-name),
     pseudo-checkbox-full-selected-checkmark-color: $checkmark-color,
-    pseudo-checkbox-full-unselected-icon-color:
-        inspection.get-theme-color($theme, foreground, secondary-text),
+    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-unselected-icon-color: $disabled-color,
     pseudo-checkbox-full-disabled-selected-icon-color: $disabled-color,

src/material/core/tokens/_m2-utils.scss

@@ -18,6 +18,11 @@ $private-is-internal-build: false;
     @return $system;
   }
 
+  $system: map.get($theme, color, system);
+  @if $system {
+    @return $system;
+  }
+
   @return ();
 }
 

src/material/datepicker/_m2-datepicker.scss

@@ -1,12 +1,12 @@
 @use 'sass:color';
 @use 'sass:meta';
 @use 'sass:math';
-@use 'sass:map';
 @use '../core/theming/inspection';
 @use '../core/style/elevation';
 @use '../core/style/sass-utils';
-@use '../core/tokens/m2-utils';
 @use '../core/tokens/m3-utils';
+@use '../core/tokens/m2-utils';
+@use 'sass:map';
 
 $_selected-fade-amount: 0.6;
 $_today-fade-amount: 0.2;
@@ -41,11 +41,11 @@ $private-default-overlap-color: #a8dab5;
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   $system: m2-utils.get-system($theme);
+
   $inactive-icon-color: inspection.get-theme-color($theme, foreground, icon);
-  $secondary-text-color: inspection.get-theme-color($theme, foreground, secondary-text);
   $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: inspection.get-theme-color($theme, system, outline);
+  $preview-outline-color: map.get($system, outline);
   $today-disabled-outline-color: null;
   $is-dark: inspection.get-theme-type($theme) == dark;
 
@@ -71,32 +71,27 @@ $private-default-overlap-color: #a8dab5;
 
   @return sass-utils.merge-all($calendar-tokens, $toggle-tokens, $range-tokens, (
     datepicker-toggle-icon-color: $inactive-icon-color,
-    datepicker-calendar-body-label-text-color: $secondary-text-color,
+    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-icon-color: $inactive-icon-color,
     datepicker-calendar-navigation-button-icon-color: $inactive-icon-color,
-    datepicker-calendar-header-divider-color: inspection.get-theme-color($theme, system, outline),
-    datepicker-calendar-header-text-color: $secondary-text-color,
+    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-text-color: inspection.get-theme-color($theme, system, on-surface),
+    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-range-input-separator-color:
-        inspection.get-theme-color($theme, system, on-surface),
+    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:
-        inspection.get-theme-color($theme, system, surface),
-    datepicker-calendar-container-text-color:
-        inspection.get-theme-color($theme, system, on-surface),
+    datepicker-calendar-container-background-color: map.get($system, surface),
+    datepicker-calendar-container-text-color: map.get($system, on-surface),
   ));
 }
 

src/material/expansion/_m2-expansion.scss

@@ -17,21 +17,18 @@
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   $system: m2-utils.get-system($theme);
-  $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
 
   @return (
-    expansion-container-background-color: inspection.get-theme-color($theme, system, surface),
-    expansion-container-text-color: inspection.get-theme-color($theme, system, on-surface),
-    expansion-actions-divider-color: inspection.get-theme-color($theme, system, outline),
+    expansion-container-background-color: map.get($system, surface),
+    expansion-container-text-color: map.get($system, on-surface),
+    expansion-actions-divider-color: map.get($system, outline),
     expansion-header-hover-state-layer-color: inspection.get-theme-color($theme, background, hover),
     expansion-header-focus-state-layer-color: inspection.get-theme-color($theme, background, hover),
     expansion-header-disabled-state-text-color:
         m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
-    expansion-header-text-color: inspection.get-theme-color($theme, system, on-surface),
-    expansion-header-description-color:
-        inspection.get-theme-color($theme, foreground, secondary-text),
-    expansion-header-indicator-color:
-        inspection.get-theme-color($theme, foreground, secondary-text),
+    expansion-header-text-color: map.get($system, on-surface),
+    expansion-header-description-color: map.get($system, on-surface-variant),
+    expansion-header-indicator-color: map.get($system, on-surface-variant),
   );
 }
 

src/material/list/_m2-list.scss

@@ -29,16 +29,15 @@
   $system: m2-utils.get-system($theme);
 
   $is-dark: inspection.get-theme-type($theme) == dark;
-  $foreground-secondary-text: inspection.get-theme-color($theme, foreground, secondary-text);
-  $foreground-hint-text: inspection.get-theme-color($theme, foreground, hint-text);
   $text-icon-on-background:
       inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38));
 
   @return (
     list-list-item-label-text-color: map.get($system, on-surface),
-    list-list-item-supporting-text-color: $foreground-secondary-text,
+    list-list-item-supporting-text-color: map.get($system, on-surface-variant),
     list-list-item-leading-icon-color: $text-icon-on-background,
-    list-list-item-trailing-supporting-text-color: $foreground-hint-text,
+    list-list-item-trailing-supporting-text-color:
+        inspection.get-theme-color($theme, foreground, hint-text),
     list-list-item-trailing-icon-color: $text-icon-on-background,
     list-list-item-selected-trailing-icon-color: $text-icon-on-background,
     list-list-item-disabled-label-text-color: map.get($system, on-surface),

src/material/snack-bar/_m2-snack-bar.scss

@@ -1,6 +1,6 @@
 @use '../core/theming/inspection';
-@use 'sass:meta';
-@use 'sass:color';
+@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.
@@ -13,15 +13,12 @@
 // 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);
   $surface: inspection.get-theme-color($theme, system, surface);
 
   @return (
-    snack-bar-container-color: if(
-        meta.type-of($surface) == color,
-        color.mix(if($is-dark, #fff, #000), $surface, 80%),
-        $surface),
-    snack-bar-supporting-text-color:
-        if(meta.type-of($surface) == color, rgba($surface, 0.87), $surface),
+    snack-bar-container-color: map.get($system, inverse-surface),
+    snack-bar-supporting-text-color: map.get($system, inverse-on-surface),
     snack-bar-button-color:
       if(
         $is-dark,

src/material/stepper/_m2-stepper.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/tokens/m2-utils';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -13,19 +14,17 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return map.merge(private-get-color-palette-color-tokens($theme, primary), (
-    stepper-container-color: inspection.get-theme-color($theme, system, surface),
-    stepper-line-color: inspection.get-theme-color($theme, system, outline),
+    stepper-container-color: map.get($system, surface),
+    stepper-line-color: map.get($system, outline),
     stepper-header-hover-state-layer-color: inspection.get-theme-color($theme, background, hover),
     stepper-header-focus-state-layer-color: inspection.get-theme-color($theme, background, hover),
-    stepper-header-label-text-color: inspection.get-theme-color($theme, foreground, secondary-text),
-    stepper-header-optional-label-text-color: inspection.get-theme-color(
-        $theme, foreground, secondary-text),
-    stepper-header-selected-state-label-text-color:
-        inspection.get-theme-color($theme, system, on-surface),
+    stepper-header-label-text-color: map.get($system, on-surface-variant),
+    stepper-header-optional-label-text-color: map.get($system, on-surface-variant),
+    stepper-header-selected-state-label-text-color: map.get($system, on-surface),
     stepper-header-error-state-label-text-color: inspection.get-theme-color($theme, warn, text),
-    stepper-header-icon-background-color:
-        inspection.get-theme-color($theme, foreground, secondary-text),
+    stepper-header-icon-background-color: map.get($system, on-surface-variant),
     stepper-header-error-state-icon-foreground-color:
         inspection.get-theme-color($theme, warn, text),
     stepper-header-error-state-icon-background-color: transparent,

src/material/tooltip/_m2-tooltip.scss

@@ -1,4 +1,6 @@
 @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.
@@ -15,10 +17,11 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
 
   @return (
-    tooltip-container-color: inspection.get-theme-color($theme, background, tooltip),
-    tooltip-supporting-text-color: #fff,
+    tooltip-container-color: map.get($system, inverse-surface),
+    tooltip-supporting-text-color: map.get($system, inverse-on-surface),
   );
 }