From c85656a583ddaa08c48e2a8ac8c60922497de665 Mon Sep 17 00:00:00 2001
From: Andrew Seguin <andrewjs@google.com>
Date: Tue, 27 May 2025 10:48:37 -0600
Subject: [PATCH] refactor: use system background

# Conflicts:
#	src/material/badge/_m2-badge.scss
---
 src/material/core/_m2-app.scss                   |  7 +++++--
 src/material/core/m2/_theming.scss               |  2 ++
 .../pseudo-checkbox/_m2-pseudo-checkbox.scss     |  2 +-
 src/material/sidenav/_m2-sidenav.scss            | 16 ++++++++++------
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/material/core/_m2-app.scss b/src/material/core/_m2-app.scss
index e025f601fa04..243b99800765 100644
--- a/src/material/core/_m2-app.scss
+++ b/src/material/core/_m2-app.scss
@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use './theming/inspection';
 @use './style/elevation';
+@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.
@@ -10,9 +11,11 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
   $tokens: (
-    app-background-color: inspection.get-theme-color($theme, background, background),
-    app-text-color: inspection.get-theme-color($theme, system, on-surface),
+    app-background-color: map.get($system, background),
+    app-text-color: map.get($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
index fce4161cad80..0a8a4b33f327 100644
--- 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),
+      background: map.get(palette.$grey-palette, 50),
       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,
+      background: #303030,
       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
index d8fb5707899c..c624893d39cc 100644
--- a/src/material/core/selection/pseudo-checkbox/_m2-pseudo-checkbox.scss
+++ b/src/material/core/selection/pseudo-checkbox/_m2-pseudo-checkbox.scss
@@ -10,7 +10,7 @@
 @function get-color-tokens($theme, $palette-name: accent) {
   $is-dark: inspection.get-theme-type($theme) == dark;
   $disabled-color: if($is-dark, #686868, #b0b0b0);
-  $checkmark-color: inspection.get-theme-color($theme, background, background);
+  $checkmark-color: inspection.get-theme-color($theme, system, background);
 
   @return (
     pseudo-checkbox-full-selected-icon-color: inspection.get-theme-color($theme, $palette-name),
diff --git a/src/material/sidenav/_m2-sidenav.scss b/src/material/sidenav/_m2-sidenav.scss
index 863c93d2330f..563964daf433 100644
--- a/src/material/sidenav/_m2-sidenav.scss
+++ b/src/material/sidenav/_m2-sidenav.scss
@@ -1,7 +1,10 @@
 @use 'sass:color';
+@use 'sass:map';
 @use 'sass:meta';
 @use '../core/theming/inspection';
 @use '../core/style/elevation';
+@use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-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.
@@ -17,17 +20,18 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   $is-dark: inspection.get-theme-type($theme) ==  dark;
   $scrim-opacity: 0.6;
-  $scrim-color: inspection.get-theme-color($theme, system, surface, $scrim-opacity);
+  $scrim-color: m3-utils.color-with-opacity(map.get($system, surface), 60%);
   $fallback-scrim-color: if($is-dark, rgba(#fff, $scrim-opacity), rgba(#000, $scrim-opacity));
 
   @return (
-    sidenav-container-divider-color: inspection.get-theme-color($theme, system, outline),
-    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, system, on-surface),
+    sidenav-container-divider-color: map.get($system, outline),
+    sidenav-container-background-color: map.get($system, surface),
+    sidenav-container-text-color: map.get($system, on-surface),
+    sidenav-content-background-color: map.get($system, background),
+    sidenav-content-text-color: map.get($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