refactor: add system-variant system color

andrewseguin · andrewseguin · commit 01d42f3595c2 · 2025-05-27T13:35:45.000-06:00
diff --git a/src/material/button-toggle/_m2-button-toggle.scss b/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, background, base),
-    button-toggle-text-color: inspection.get-theme-color($theme, system, on-surface),
+    button-toggle-text-color: map.get($system, on-surface),
   );
 }
 
diff --git a/src/material/card/_m2-card.scss b/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)
   );
 }
diff --git a/src/material/core/m2/_theming.scss b/src/material/core/m2/_theming.scss
@@ -126,6 +126,7 @@
     system: (
       surface: white,
       on-surface: rgba(black, 0.87),
+      on-surface-variant: rgba(black, 0.54),
       outline: rgba(black, 0.12),
       hover-state-layer-opacity: 0.04,
       focus-state-layer-opacity: 0.12,
@@ -147,6 +148,7 @@
     system: (
       surface: map.get(palette.$grey-palette, 800),
       on-surface: white,
+      on-surface-variant: rgba(white, 0.7),
       outline: rgba(white, 0.12),
       hover-state-layer-opacity: 0.04,
       focus-state-layer-opacity: 0.12,
diff --git a/src/material/core/selection/pseudo-checkbox/_m2-pseudo-checkbox.scss b/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, background, 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,
diff --git a/src/material/core/tokens/_m2-utils.scss b/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 ();
 }
 
diff --git a/src/material/datepicker/_m2-datepicker.scss b/src/material/datepicker/_m2-datepicker.scss
@@ -4,6 +4,8 @@
 @use '../core/theming/inspection';
 @use '../core/style/elevation';
 @use '../core/style/sass-utils';
+@use '../core/tokens/m2-utils';
+@use 'sass:map';
 
 $_selected-fade-amount: 0.6;
 $_today-fade-amount: 0.2;
@@ -37,12 +39,12 @@ $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);
-  $text-color: inspection.get-theme-color($theme, system, on-surface);
-  $secondary-text-color: inspection.get-theme-color($theme, foreground, secondary-text);
   $disabled-text-color: inspection.get-theme-color($theme, foreground, disabled-text);
   $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;
 
@@ -68,30 +70,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: $text-color,
+    datepicker-calendar-date-text-color: map.get($system, on-surface),
     datepicker-calendar-date-outline-color: transparent,
     datepicker-calendar-date-disabled-state-text-color: $disabled-text-color,
     datepicker-calendar-date-preview-state-outline-color: $preview-outline-color,
-
-    datepicker-range-input-separator-color: $text-color,
+    datepicker-range-input-separator-color: map.get($system, on-surface),
     datepicker-range-input-disabled-state-separator-color: $disabled-text-color,
     datepicker-range-input-disabled-state-text-color: $disabled-text-color,
-
-    datepicker-calendar-container-background-color:
-        inspection.get-theme-color($theme, system, surface),
-    datepicker-calendar-container-text-color: $text-color,
+    datepicker-calendar-container-background-color: map.get($system, surface),
+    datepicker-calendar-container-text-color: map.get($system, on-surface),
   ));
 }
 
diff --git a/src/material/expansion/_m2-expansion.scss b/src/material/expansion/_m2-expansion.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.
@@ -14,19 +15,19 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
   @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: inspection.get-theme-color(
-        $theme, foreground, disabled-button),
-    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-disabled-state-text-color:
+        inspection.get-theme-color($theme, foreground, disabled-button),
+    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),
   );
 }
 
diff --git a/src/material/list/_m2-list.scss b/src/material/list/_m2-list.scss
@@ -30,28 +30,26 @@
 
   $is-dark: inspection.get-theme-type($theme) == dark;
   $foreground-base: inspection.get-theme-color($theme, foreground, base);
-  $foreground-text: map.get($system, on-surface);
-  $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: $foreground-text,
-    list-list-item-supporting-text-color: $foreground-secondary-text,
+    list-list-item-label-text-color: map.get($system, on-surface),
+    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: $foreground-base,
     list-list-item-disabled-leading-icon-color: $foreground-base,
     list-list-item-disabled-trailing-icon-color: $foreground-base,
-    list-list-item-hover-label-text-color: $foreground-text,
+    list-list-item-hover-label-text-color: map.get($system, on-surface),
     list-list-item-hover-leading-icon-color: $text-icon-on-background,
     list-list-item-hover-state-layer-color: $foreground-base,
     list-list-item-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
     list-list-item-hover-trailing-icon-color: $text-icon-on-background,
-    list-list-item-focus-label-text-color: $foreground-text,
+    list-list-item-focus-label-text-color: map.get($system, on-surface),
     list-list-item-focus-state-layer-color: $foreground-base,
     list-list-item-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
   );
diff --git a/src/material/stepper/_m2-stepper.scss b/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,

Original file line number	Diff line number	Diff line change
`@@ -18,6 +18,11 @@ $private-is-internal-build: false;`
`18`	`18`	`@return $system;`
`19`	`19`	`}`
`20`	`20`
	`21`	`+ $system: map.get($theme, color, system);`
	`22`	`+ @if $system {`
	`23`	`+ @return $system;`
	`24`	`+ }`
	`25`	`+`
`21`	`26`	`@return ();`
`22`	`27`	`}`
`23`	`28`