refactor: switch m2 surface colors to system terms (#31175)

andrewseguin · web-flow · commit 04d8e0250425 · 2025-05-22T16:13:04.000-06:00
diff --git a/src/material-experimental/popover-edit/_popover-edit-theme.scss b/src/material-experimental/popover-edit/_popover-edit-theme.scss
@@ -6,7 +6,7 @@
 }
 
 @mixin color($theme) {
-  $background-color: mat.get-theme-color($theme, background, 'card');
+  $background-color: mat.get-theme-color($theme, system, surface);
 
   // TODO: these structural styles don't belong in the `color` part of a theme.
   // We should figure out a better place for them.
diff --git a/src/material/autocomplete/_m2-autocomplete.scss b/src/material/autocomplete/_m2-autocomplete.scss
@@ -13,7 +13,7 @@
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return (
-    autocomplete-background-color: inspection.get-theme-color($theme, background, card)
+    autocomplete-background-color: inspection.get-theme-color($theme, system, surface)
   );
 }
 
diff --git a/src/material/bottom-sheet/_m2-bottom-sheet.scss b/src/material/bottom-sheet/_m2-bottom-sheet.scss
@@ -12,8 +12,8 @@
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return (
-    bottom-sheet-container-text-color: inspection.get-theme-color($theme, foreground, text),
-    bottom-sheet-container-background-color: inspection.get-theme-color($theme, background, dialog),
+    bottom-sheet-container-text-color: inspection.get-theme-color($theme, system, on-surface),
+    bottom-sheet-container-background-color: inspection.get-theme-color($theme, system, surface),
   );
 }
 
diff --git a/src/material/button-toggle/_m2-button-toggle.scss b/src/material/button-toggle/_m2-button-toggle.scss
@@ -28,17 +28,17 @@
   $divider-color: if(
       meta.type-of($theme-divider-color) == color,
       theming.private-rgba-to-hex(
-          $theme-divider-color, inspection.get-theme-color($theme, background, card)),
+          $theme-divider-color, inspection.get-theme-color($theme, system, surface)),
       $theme-divider-color);
 
   @return (
-    button-toggle-background-color: inspection.get-theme-color($theme, background, card),
+    button-toggle-background-color: inspection.get-theme-color($theme, 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, foreground, text),
+        inspection.get-theme-color($theme, system, on-surface),
     button-toggle-disabled-state-background-color:
-        inspection.get-theme-color($theme, background, card),
+        inspection.get-theme-color($theme, system, surface),
     button-toggle-disabled-state-text-color:
         inspection.get-theme-color($theme, foreground, disabled-button),
     button-toggle-divider-color: $divider-color,
@@ -57,10 +57,10 @@
     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, foreground, text),
+    button-toggle-selected-state-text-color: inspection.get-theme-color($theme, system, on-surface),
     button-toggle-state-layer-color: sass-utils.safe-color-change(
         inspection.get-theme-color($theme, background, focused-button), $alpha: 1),
-    button-toggle-text-color: inspection.get-theme-color($theme, foreground, text),
+    button-toggle-text-color: inspection.get-theme-color($theme, system, on-surface),
   );
 }
 
diff --git a/src/material/button/_m2-button.scss b/src/material/button/_m2-button.scss
@@ -52,7 +52,7 @@
   );
 
   @return (
-    button-filled-container-color: inspection.get-theme-color($theme, background, card),
+    button-filled-container-color: inspection.get-theme-color($theme, system, surface),
     button-filled-disabled-container-color:
         inspection.get-theme-color($theme, foreground, disabled-button, 0.12),
     button-filled-disabled-label-text-color:
@@ -76,7 +76,7 @@
     button-outlined-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
     button-outlined-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
     button-outlined-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-    button-protected-container-color: inspection.get-theme-color($theme, background, card),
+    button-protected-container-color: inspection.get-theme-color($theme, system, surface),
     button-protected-disabled-container-color:
         inspection.get-theme-color($theme, foreground, disabled-button, 0.12),
     button-protected-disabled-label-text-color:
@@ -98,7 +98,7 @@
     button-text-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
     button-text-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
     button-text-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-    button-tonal-container-color: inspection.get-theme-color($theme, background, card),
+    button-tonal-container-color: inspection.get-theme-color($theme, system, surface),
     button-tonal-disabled-container-color:
         inspection.get-theme-color($theme, foreground, disabled-button, 0.12),
     button-tonal-disabled-label-text-color:
diff --git a/src/material/button/_m2-fab.scss b/src/material/button/_m2-fab.scss
@@ -32,7 +32,7 @@
   $is-dark: inspection.get-theme-type($theme) == dark;
 
   @return (
-    fab-container-color: inspection.get-theme-color($theme, background, card),
+    fab-container-color: inspection.get-theme-color($theme, system, surface),
     fab-disabled-state-container-color:
         inspection.get-theme-color($theme, background, disabled-button, 0.12),
     fab-disabled-state-foreground-color:
@@ -43,7 +43,7 @@
     fab-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
     fab-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
     fab-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
-    fab-small-container-color: inspection.get-theme-color($theme, background, card),
+    fab-small-container-color: inspection.get-theme-color($theme, system, surface),
     fab-small-disabled-state-container-color:
         inspection.get-theme-color($theme, background, disabled-button, 0.12),
     fab-small-disabled-state-foreground-color:
diff --git a/src/material/card/_m2-card.scss b/src/material/card/_m2-card.scss
@@ -15,13 +15,13 @@
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return (
-    card-elevated-container-color: inspection.get-theme-color($theme, background, card),
+    card-elevated-container-color: inspection.get-theme-color($theme, system, surface),
     card-elevated-container-elevation: elevation.get-box-shadow(1),
-    card-outlined-container-color: inspection.get-theme-color($theme, background, card),
+    card-outlined-container-color: inspection.get-theme-color($theme, 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, background, card),
+    card-filled-container-color: inspection.get-theme-color($theme, system, surface),
     card-filled-container-elevation: elevation.get-box-shadow(0)
   );
 }
diff --git a/src/material/checkbox/_m2-checkbox.scss b/src/material/checkbox/_m2-checkbox.scss
@@ -47,7 +47,7 @@
 
   $tokens: (
     checkbox-disabled-label-color: inspection.get-theme-color($theme, foreground, disabled-text),
-    checkbox-label-text-color: inspection.get-theme-color($theme, foreground, text),
+    checkbox-label-text-color: inspection.get-theme-color($theme, system, on-surface),
     checkbox-disabled-selected-icon-color: $disabled-color,
     checkbox-disabled-unselected-icon-color: $disabled-color,
     checkbox-selected-checkmark-color: $selected-checkmark-color,
diff --git a/src/material/chips/_m2-chip.scss b/src/material/chips/_m2-chip.scss
@@ -39,15 +39,15 @@
   $background: null;
   $state-layer-color: inspection.get-theme-color($theme, foreground, base);
   $state-layer-opacity: 0.12; // 0.12 is a common value in Material Design for opacity.
-  $surface: inspection.get-theme-color($theme, background, card);
+  $surface: inspection.get-theme-color($theme, system, surface);
 
   @if $palette-name == null {
     $is-dark: inspection.get-theme-type($theme) == dark;
     $grey-50: map.get(m2-palette.$grey-palette, 50);
     $grey-900: map.get(m2-palette.$grey-palette, 900);
     $foreground: if($is-dark, $grey-50, $grey-900);
 
-    $surface: inspection.get-theme-color($theme, background, card);
+    $surface: inspection.get-theme-color($theme, system, surface);
     $background: if(
         meta.type-of($state-layer-color) == color and meta.type-of($surface) == color,
         color.mix($state-layer-color, $surface, 12%),
diff --git a/src/material/core/_m2-app.scss b/src/material/core/_m2-app.scss
@@ -12,7 +12,7 @@
 @function get-color-tokens($theme) {
   $tokens: (
     app-background-color: inspection.get-theme-color($theme, background, background),
-    app-text-color: inspection.get-theme-color($theme, foreground, text),
+    app-text-color: inspection.get-theme-color($theme, system, on-surface),
   );
 
   @for $zValue from 0 through 24 {
diff --git a/src/material/core/m2/_theming.scss b/src/material/core/m2/_theming.scss
@@ -120,7 +120,11 @@
     warn: if($warn != null, $warn, define-palette(palette.$red-palette)),
     is-dark: false,
     foreground: palette.$light-theme-foreground-palette,
-    background: palette.$light-theme-background-palette
+    background: palette.$light-theme-background-palette,
+    system: (
+      surface: white,
+      on-surface: rgba(black, 0.87),
+    ),
   );
 }
 
@@ -133,7 +137,11 @@
     warn: if($warn != null, $warn, define-palette(palette.$red-palette)),
     is-dark: true,
     foreground: palette.$dark-theme-foreground-palette,
-    background: palette.$dark-theme-background-palette
+    background: palette.$dark-theme-background-palette,
+    system: (
+      surface: map.get(palette.$grey-palette, 800),
+      on-surface: white,
+    ),
   );
 }
 
diff --git a/src/material/core/option/_m2-optgroup.scss b/src/material/core/option/_m2-optgroup.scss
@@ -9,7 +9,7 @@
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return (
-    optgroup-label-text-color: inspection.get-theme-color($theme, foreground, text),
+    optgroup-label-text-color: inspection.get-theme-color($theme, system, on-surface),
   );
 }
 
diff --git a/src/material/core/option/_m2-option.scss b/src/material/core/option/_m2-option.scss
@@ -14,7 +14,7 @@
 
   @return (
     option-selected-state-label-text-color: inspection.get-theme-color($theme, $palette-name),
-    option-label-text-color: inspection.get-theme-color($theme, foreground, text),
+    option-label-text-color: inspection.get-theme-color($theme, system, on-surface),
     option-hover-state-layer-color: $active-state-layer-color,
     option-focus-state-layer-color: $active-state-layer-color,
     option-selected-state-layer-color: $active-state-layer-color,
diff --git a/src/material/datepicker/_m2-datepicker.scss b/src/material/datepicker/_m2-datepicker.scss
@@ -38,7 +38,7 @@ $private-default-overlap-color: #a8dab5;
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   $inactive-icon-color: inspection.get-theme-color($theme, foreground, icon);
-  $text-color: inspection.get-theme-color($theme, foreground, text);
+  $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);
   $divider-color: inspection.get-theme-color($theme, foreground, divider);
@@ -91,7 +91,7 @@ $private-default-overlap-color: #a8dab5;
     datepicker-range-input-disabled-state-text-color: $disabled-text-color,
 
     datepicker-calendar-container-background-color:
-        inspection.get-theme-color($theme, background, card),
+        inspection.get-theme-color($theme, system, surface),
     datepicker-calendar-container-text-color: $text-color,
   ));
 }
diff --git a/src/material/dialog/_m2-dialog.scss b/src/material/dialog/_m2-dialog.scss
@@ -35,7 +35,7 @@
   );
 
   @return (
-    dialog-container-color: inspection.get-theme-color($theme, background, dialog),
+    dialog-container-color: inspection.get-theme-color($theme, system, surface),
     dialog-subhead-color: sass-utils.safe-color-change($text-base, $alpha: 0.87),
     dialog-supporting-text-color: sass-utils.safe-color-change($text-base, $alpha: 0.6),
   );
diff --git a/src/material/expansion/_m2-expansion.scss b/src/material/expansion/_m2-expansion.scss
@@ -15,14 +15,14 @@
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return (
-    expansion-container-background-color: inspection.get-theme-color($theme, background, card),
-    expansion-container-text-color: inspection.get-theme-color($theme, foreground, text),
+    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, foreground, divider),
     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, foreground, text),
+    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:
diff --git a/src/material/form-field/_m2-form-field.scss b/src/material/form-field/_m2-form-field.scss
@@ -24,7 +24,7 @@
 // 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);
+  $surface: inspection.get-theme-color($theme, system, surface);
   $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);
diff --git a/src/material/list/_m2-list.scss b/src/material/list/_m2-list.scss
@@ -28,7 +28,7 @@
 @function get-color-tokens($theme) {
   $is-dark: inspection.get-theme-type($theme) == dark;
   $foreground-base: inspection.get-theme-color($theme, foreground, base);
-  $foreground-text: inspection.get-theme-color($theme, foreground, text);
+  $foreground-text: inspection.get-theme-color($theme, 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: sass-utils.safe-color-change(
diff --git a/src/material/menu/_m2-menu.scss b/src/material/menu/_m2-menu.scss
@@ -26,14 +26,14 @@
   $is-dark: inspection.get-theme-type($theme) == dark;
   $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);
+  $text-color: inspection.get-theme-color($theme, system, on-surface);
 
   @return (
     menu-item-label-text-color: $text-color,
     menu-item-icon-color: $text-color,
     menu-item-hover-state-layer-color: $active-state-layer-color,
     menu-item-focus-state-layer-color: $active-state-layer-color,
-    menu-container-color: inspection.get-theme-color($theme, background, card),
+    menu-container-color: inspection.get-theme-color($theme, system, surface),
     menu-divider-color: inspection.get-theme-color($theme, foreground, divider),
   );
 }
diff --git a/src/material/paginator/_m2-paginator.scss b/src/material/paginator/_m2-paginator.scss
@@ -16,7 +16,7 @@
 
   @return (
     paginator-container-text-color: sass-utils.safe-color-change($foreground-base, $alpha: 0.87),
-    paginator-container-background-color: inspection.get-theme-color($theme, background, card),
+    paginator-container-background-color: inspection.get-theme-color($theme, system, surface),
     paginator-enabled-icon-color: sass-utils.safe-color-change($foreground-base, $alpha: 0.54),
     paginator-disabled-icon-color: sass-utils.safe-color-change($foreground-base, $alpha: 0.12),
   );
diff --git a/src/material/radio/_m2-radio.scss b/src/material/radio/_m2-radio.scss
@@ -28,7 +28,7 @@
     radio-disabled-label-color: inspection.get-theme-color($theme, foreground, disabled-text),
     radio-disabled-selected-icon-color: inspection.get-theme-color($theme, foreground, icon, 1),
     radio-disabled-unselected-icon-color: inspection.get-theme-color($theme, foreground, icon, 1),
-    radio-label-text-color: inspection.get-theme-color($theme, foreground, text),
+    radio-label-text-color: inspection.get-theme-color($theme, system, on-surface),
     radio-ripple-color: inspection.get-theme-color($theme, foreground, base),
     radio-selected-focus-icon-color: $palette-color,
     radio-selected-hover-icon-color: $palette-color,
diff --git a/src/material/select/_m2-select.scss b/src/material/select/_m2-select.scss
@@ -28,7 +28,7 @@
     inspection.get-theme-color($theme, foreground, divider, 1));
 
   @return (
-    select-panel-background-color: inspection.get-theme-color($theme, background, card),
+    select-panel-background-color: inspection.get-theme-color($theme, system, surface),
     select-enabled-trigger-text-color: sass-utils.safe-color-change($text-color-base, $alpha: 0.87),
     select-disabled-trigger-text-color:
       sass-utils.safe-color-change($disabled-text-color-base, $alpha: 0.38),
diff --git a/src/material/sidenav/_m2-sidenav.scss b/src/material/sidenav/_m2-sidenav.scss
@@ -21,15 +21,15 @@
   $is-dark: inspection.get-theme-type($theme) ==  dark;
   $scrim-opacity: 0.6;
   $scrim-color: sass-utils.safe-color-change(
-      inspection.get-theme-color($theme, background, card), $alpha: $scrim-opacity);
+      inspection.get-theme-color($theme, system, surface), $alpha: $scrim-opacity);
   $fallback-scrim-color: if($is-dark, rgba(#fff, $scrim-opacity), rgba(#000, $scrim-opacity));
 
   @return (
     sidenav-container-divider-color: inspection.get-theme-color($theme, foreground, divider),
-    sidenav-container-background-color: inspection.get-theme-color($theme, background, dialog),
-    sidenav-container-text-color: inspection.get-theme-color($theme, foreground, text),
+    sidenav-container-background-color: inspection.get-theme-color($theme, system, surface),
+    sidenav-container-text-color: inspection.get-theme-color($theme, system, on-surface),
     sidenav-content-background-color: inspection.get-theme-color($theme, background, background),
-    sidenav-content-text-color: inspection.get-theme-color($theme, foreground, text),
+    sidenav-content-text-color: inspection.get-theme-color($theme, system, on-surface),
 
     // We use invert() here to have the darken the background color expected to be used.
     // If the background is light, we use a dark backdrop. If the background is dark, we
diff --git a/src/material/slide-toggle/_m2-slide-toggle.scss b/src/material/slide-toggle/_m2-slide-toggle.scss
@@ -84,7 +84,7 @@
         slide-toggle-disabled-unselected-track-color: $on-surface,
         slide-toggle-handle-elevation-shadow: elevation.get-box-shadow(1),
         slide-toggle-handle-surface-color: #fff,
-        slide-toggle-label-text-color: inspection.get-theme-color($theme, foreground, text),
+        slide-toggle-label-text-color: inspection.get-theme-color($theme, system, on-surface),
         slide-toggle-selected-icon-color: $icon-color,
         slide-toggle-unselected-hover-handle-color: $on-surface-state-content,
         slide-toggle-unselected-focus-handle-color: $on-surface-state-content,
diff --git a/src/material/snack-bar/_m2-snack-bar.scss b/src/material/snack-bar/_m2-snack-bar.scss
@@ -13,7 +13,7 @@
 // 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);
+  $surface: inspection.get-theme-color($theme, system, surface);
 
   @return (
     snack-bar-container-color: if(
diff --git a/src/material/sort/_m2-sort.scss b/src/material/sort/_m2-sort.scss
@@ -9,7 +9,7 @@
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return (
-    sort-arrow-color: inspection.get-theme-color($theme, foreground, text),
+    sort-arrow-color: inspection.get-theme-color($theme, system, on-surface),
   );
 }
 
diff --git a/src/material/stepper/_m2-stepper.scss b/src/material/stepper/_m2-stepper.scss
diff --git a/src/material/table/_m2-table.scss b/src/material/table/_m2-table.scss
diff --git a/src/material/timepicker/_m2-timepicker.scss b/src/material/timepicker/_m2-timepicker.scss
diff --git a/src/material/toolbar/_m2-toolbar.scss b/src/material/toolbar/_m2-toolbar.scss
diff --git a/src/material/tree/_m2-tree.scss b/src/material/tree/_m2-tree.scss

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@`
`6`	`6`	`}`
`7`	`7`
`8`	`8`	`@mixin color($theme) {`
`9`		`- $background-color: mat.get-theme-color($theme, background, 'card');`
	`9`	`+ $background-color: mat.get-theme-color($theme, system, surface);`
`10`	`10`
`11`	`11`	// TODO: these structural styles don't belong in the `color` part of a theme.
`12`	`12`	`// We should figure out a better place for them.`
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@`
`13`	`13`	`// Tokens that can be configured through Angular Material's color theming API.`
`14`	`14`	`@function get-color-tokens($theme) {`
`15`	`15`	`@return (`
`16`		`- autocomplete-background-color: inspection.get-theme-color($theme, background, card)`
	`16`	`+ autocomplete-background-color: inspection.get-theme-color($theme, system, surface)`
`17`	`17`	`);`
`18`	`18`	`}`
`19`	`19`