diff --git a/src/material-experimental/popover-edit/_popover-edit-theme.scss b/src/material-experimental/popover-edit/_popover-edit-theme.scss
index f5478b376faa..578ee868d6bc 100644
--- 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
index b633ba8912ad..2753370ab786 100644
--- 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
index e3b676b567d7..3b4daf038cc3 100644
--- 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
index 5ac59a3b7b18..6afa0d7c5f73 100644
--- 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
index 8b9d0aedbca3..e836f759899f 100644
--- 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
index 152890cc00be..dc97ca38d57f 100644
--- 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
index e57aa97da312..0925f45211bf 100644
--- 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
index 1059a95f7dfe..a04d7b5f958b 100644
--- 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
index a61a9d3575fd..07a66024e2e2 100644
--- a/src/material/chips/_m2-chip.scss
+++ b/src/material/chips/_m2-chip.scss
@@ -39,7 +39,7 @@
   $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;
@@ -47,7 +47,7 @@
     $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
index ced5ab5ea094..e025f601fa04 100644
--- 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
index 0f6eda8c0b9a..46cc223b97f2 100644
--- 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
index 1c0c2c3cbd0d..6632e8b33176 100644
--- 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
index 57480fa22e8a..fa9b241eefc5 100644
--- 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
index 3fd2274ef1c6..2508054d7ad8 100644
--- 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
index 7d31d03d3a11..d4f21b102575 100644
--- 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
index 754abd876d6f..cc2364456532 100644
--- 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
index 633c39db251a..3a01c6556cb7 100644
--- 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
index 2a1ec75462d7..e9150c6d057e 100644
--- 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
index 561b4405a382..76b2ad57f718 100644
--- 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
index 9bc44cb45516..afb899160cfc 100644
--- 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
index 1e222986e91a..d916b3db0ca4 100644
--- 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
index 335880de5b48..0b8a2b7fda2b 100644
--- 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
index 764a2c58b201..1fe7cd3c093c 100644
--- 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
index dc614c5d179f..664019eef218 100644
--- 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
index fd5b3e0102dc..a8e34646ae5f 100644
--- 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
index 792f11d0f623..6435056c38e9 100644
--- 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
index 462653ef5e88..fdd6535bc8e4 100644
--- a/src/material/stepper/_m2-stepper.scss
+++ b/src/material/stepper/_m2-stepper.scss
@@ -14,7 +14,7 @@
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return map.merge(private-get-color-palette-color-tokens($theme, primary), (
-    stepper-container-color: inspection.get-theme-color($theme, background, card),
+    stepper-container-color: inspection.get-theme-color($theme, system, surface),
     stepper-line-color: inspection.get-theme-color($theme, foreground, divider),
     stepper-header-hover-state-layer-color: inspection.get-theme-color($theme, background, hover),
     stepper-header-focus-state-layer-color: inspection.get-theme-color($theme, background, hover),
@@ -22,7 +22,7 @@
     stepper-header-optional-label-text-color: inspection.get-theme-color(
         $theme, foreground, secondary-text),
     stepper-header-selected-state-label-text-color:
-        inspection.get-theme-color($theme, foreground, text),
+        inspection.get-theme-color($theme, system, on-surface),
     stepper-header-error-state-label-text-color: inspection.get-theme-color($theme, warn, text),
     stepper-header-icon-background-color:
         inspection.get-theme-color($theme, foreground, secondary-text),
diff --git a/src/material/table/_m2-table.scss b/src/material/table/_m2-table.scss
index 7cf24d69f90d..8a4613b90bdb 100644
--- a/src/material/table/_m2-table.scss
+++ b/src/material/table/_m2-table.scss
@@ -13,10 +13,10 @@
 // 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, foreground, text),
-    table-row-item-label-text-color: inspection.get-theme-color($theme, foreground, text),
+    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),
     table-row-item-outline-color: inspection.get-theme-color($theme, foreground, divider),
   );
 }
diff --git a/src/material/timepicker/_m2-timepicker.scss b/src/material/timepicker/_m2-timepicker.scss
index e932f3e9bbf6..ec5f4572c6cb 100644
--- a/src/material/timepicker/_m2-timepicker.scss
+++ b/src/material/timepicker/_m2-timepicker.scss
@@ -13,7 +13,7 @@
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return (
-    timepicker-container-background-color: inspection.get-theme-color($theme, background, card)
+    timepicker-container-background-color: inspection.get-theme-color($theme, system, surface)
   );
 }
 
diff --git a/src/material/toolbar/_m2-toolbar.scss b/src/material/toolbar/_m2-toolbar.scss
index c3aea1e60022..4d9acf2d4aa0 100644
--- a/src/material/toolbar/_m2-toolbar.scss
+++ b/src/material/toolbar/_m2-toolbar.scss
@@ -12,7 +12,7 @@
 @function get-color-tokens($theme) {
   @return private-get-color-palette-color-tokens(
     $background-color: inspection.get-theme-color($theme, background, app-bar),
-    $text-color: inspection.get-theme-color($theme, foreground, text),
+    $text-color: inspection.get-theme-color($theme, system, on-surface),
   );
 }
 
diff --git a/src/material/tree/_m2-tree.scss b/src/material/tree/_m2-tree.scss
index c17fc54eeeed..dcf2adf53425 100644
--- a/src/material/tree/_m2-tree.scss
+++ b/src/material/tree/_m2-tree.scss
@@ -13,8 +13,8 @@
   $foreground-base: inspection.get-theme-color($theme, foreground, base);
 
   @return (
-    tree-container-background-color: inspection.get-theme-color($theme, background, card),
-    tree-node-text-color: inspection.get-theme-color($theme, foreground, text),
+    tree-container-background-color: inspection.get-theme-color($theme, system, surface),
+    tree-node-text-color: inspection.get-theme-color($theme, system, on-surface),
   );
 }