refactor: use system background

Author: andrewseguin

src/material/badge/_m2-badge.scss

@@ -42,7 +42,7 @@ $_large-size: $_default-size + 6px;
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   $primary-color-tokens: private-get-color-palette-color-tokens($theme, primary);
-  $app-background: inspection.get-theme-color($theme, background, background);
+  $app-background: inspection.get-theme-color($theme, system, background);
   $disabled-background: inspection.get-theme-color($theme, foreground, disabled-button);
 
   // The disabled color usually has some kind of opacity, but because the badge is overlayed

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 {

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,

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),

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