refactor: use system background

Author: Andrew Seguin

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

@@ -11,7 +11,7 @@
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   $tokens: (
-    app-background-color: inspection.get-theme-color($theme, background, background),
+    app-background-color: inspection.get-theme-color($theme, system, background),
     app-text-color: inspection.get-theme-color($theme, system, on-surface),
   );
 

src/material/core/m2/_theming.scss

@@ -127,6 +127,7 @@
       surface: white,
       on-surface: rgba(black, 0.87),
       outline: rgba(black, 0.12),
+      background: map.get(palette.$grey-palette, 50),
       hover-state-layer-opacity: 0.04,
       focus-state-layer-opacity: 0.12,
       pressed-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

@@ -26,7 +26,7 @@
     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-background-color: inspection.get-theme-color($theme, system, background),
     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.