refactor: switch m2 surface colors to system terms

Author: Andrew Seguin

guides/material-2.md

@@ -606,7 +606,7 @@ $primary-default: mat.get-theme-color($theme, primary, default);
 $accent-a100: mat.get-theme-color($theme, accent, A100);
 $warn-500-contrast: mat.get-theme-color($theme, warn, 500-contrast);
 $foreground-text: mat.get-theme-color($theme, foreground, text);
-$background-card: mat.get-theme-color($theme, background, card);
+$background-card: mat.get-theme-color($theme, system, surface);
 $type: mat.get-theme-type($theme);
 $custom-background: if($type == dark, #030, #dfd);
 ```

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.

src/material/table/_m2-table.scss

@@ -15,7 +15,7 @@
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return (
-    table-background-color: inspection.get-theme-color($theme, background, 'card'),
+    table-background-color: inspection.get-theme-color($theme, system, surface),
 
     table-header-headline-color: inspection.get-theme-color($theme, system, on-surface),
     table-row-item-label-text-color: inspection.get-theme-color($theme, system, on-surface),