diff --git a/guides/material-2.md b/guides/material-2.md
index 20eda3f8f900..7fce0f8394a4 100644
--- a/guides/material-2.md
+++ b/guides/material-2.md
@@ -605,8 +605,8 @@ $theme: mat.m2-define-dark-theme(...);
 $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);
+$foreground-text: mat.get-theme-color($theme, foreground, on-surface);
+$background-card: mat.get-theme-color(inspection.get-theme-color($theme, background, surface));
 $type: mat.get-theme-type($theme);
 $custom-background: if($type == dark, #030, #dfd);
 ```
diff --git a/src/material-experimental/column-resize/_column-resize-theme.scss b/src/material-experimental/column-resize/_column-resize-theme.scss
index a9715bb33772..dba5d55bf5c9 100644
--- a/src/material-experimental/column-resize/_column-resize-theme.scss
+++ b/src/material-experimental/column-resize/_column-resize-theme.scss
@@ -1,7 +1,7 @@
 @use '@angular/material' as mat;
 
 @mixin color($theme) {
-  $non-resizable-hover-divider: mat.get-theme-color($theme, foreground, divider);
+  $non-resizable-hover-divider: mat.get-theme-color($theme, foreground, base-12);
   $resizable-hover-divider: mat.get-theme-color($theme, primary, 600);
   $resizable-active-divider: mat.get-theme-color($theme, primary, 600);
 
diff --git a/src/material-experimental/popover-edit/_popover-edit-theme.scss b/src/material-experimental/popover-edit/_popover-edit-theme.scss
index f5478b376faa..cc5d350879d7 100644
--- a/src/material-experimental/popover-edit/_popover-edit-theme.scss
+++ b/src/material-experimental/popover-edit/_popover-edit-theme.scss
@@ -78,7 +78,7 @@
   .mat-edit-pane {
     @include mat.private-theme-elevation(2, $theme);
     background: $background-color;
-    color: mat.get-theme-color($theme, foreground, text);
+    color: mat.get-theme-color($theme, foreground, on-surface);
     display: block;
     padding: 16px 24px;
 
diff --git a/src/material/autocomplete/_m2-autocomplete.scss b/src/material/autocomplete/_m2-autocomplete.scss
index 6936ef19371b..62b7daa05ae0 100644
--- a/src/material/autocomplete/_m2-autocomplete.scss
+++ b/src/material/autocomplete/_m2-autocomplete.scss
@@ -18,7 +18,7 @@ $prefix: (mat, autocomplete);
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return (
-    background-color: inspection.get-theme-color($theme, background, card)
+    background-color: inspection.get-theme-color($theme, background, surface)
   );
 }
 
diff --git a/src/material/badge/_m2-badge.scss b/src/material/badge/_m2-badge.scss
index cdb2ee5e6344..92d0d030d67f 100644
--- a/src/material/badge/_m2-badge.scss
+++ b/src/material/badge/_m2-badge.scss
@@ -46,9 +46,10 @@ $prefix: (mat, badge);
 
 // 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;
   $primary-color-tokens: private-get-color-palette-color-tokens($theme, primary);
-  $app-background: inspection.get-theme-color($theme, background, background);
-  $disabled-background: inspection.get-theme-color($theme, foreground, disabled-button);
+  $app-background: inspection.get-theme-color($theme, background, h303030-grey-50);
+  $disabled-background: inspection.get-theme-color($theme, foreground, base-30-26);
 
   // The disabled color usually has some kind of opacity, but because the badge is overlayed
   // on top of something else, it won't look good if it's opaque. If it is a color *type*,
@@ -63,7 +64,7 @@ $prefix: (mat, badge);
 
   @return map.merge($primary-color-tokens, (
     disabled-state-background-color: $disabled-background,
-    disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-text),
+    disabled-state-text-color: inspection.get-theme-color($theme, foreground, base-50-38),
   ));
 }
 
diff --git a/src/material/bottom-sheet/_m2-bottom-sheet.scss b/src/material/bottom-sheet/_m2-bottom-sheet.scss
index 292b1e773aa8..44ac86dc15f5 100644
--- a/src/material/bottom-sheet/_m2-bottom-sheet.scss
+++ b/src/material/bottom-sheet/_m2-bottom-sheet.scss
@@ -17,8 +17,8 @@ $prefix: (mat, bottom-sheet);
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return (
-    container-text-color: inspection.get-theme-color($theme, foreground, text),
-    container-background-color: inspection.get-theme-color($theme, background, dialog),
+    container-text-color: inspection.get-theme-color($theme, foreground, on-surface),
+    container-background-color: inspection.get-theme-color($theme, background, surface),
   );
 }
 
diff --git a/src/material/button-toggle/_m2-button-toggle.scss b/src/material/button-toggle/_m2-button-toggle.scss
index 77ab67956945..a8d8a9673d2f 100644
--- a/src/material/button-toggle/_m2-button-toggle.scss
+++ b/src/material/button-toggle/_m2-button-toggle.scss
@@ -23,7 +23,7 @@ $prefix: (mat, button-toggle);
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
-  $theme-divider-color: inspection.get-theme-color($theme, foreground, divider);
+  $theme-divider-color: inspection.get-theme-color($theme, foreground, base-12);
 
   // By default the theme usually has an rgba color for the dividers, which can
   // stack up with the background of a button toggle. This can cause the border
@@ -32,35 +32,34 @@ $prefix: (mat, button-toggle);
   $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, background, surface)),
       $theme-divider-color);
 
   @return (
-    background-color: inspection.get-theme-color($theme, background, card),
+    background-color: inspection.get-theme-color($theme, background, surface),
     disabled-selected-state-background-color:
-        inspection.get-theme-color($theme, background, selected-disabled-button),
-    disabled-selected-state-text-color: inspection.get-theme-color($theme, foreground, text),
-    disabled-state-background-color: inspection.get-theme-color($theme, background, card),
-    disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-button),
+        inspection.get-theme-color($theme, background, grey-800-400),
+    disabled-selected-state-text-color: inspection.get-theme-color($theme, foreground, on-surface),
+    disabled-state-background-color: inspection.get-theme-color($theme, background, surface),
+    disabled-state-text-color: inspection.get-theme-color($theme, foreground, base-30-26),
     divider-color: $divider-color,
     legacy-disabled-selected-state-background-color:
-        inspection.get-theme-color($theme, background, selected-disabled-button),
+        inspection.get-theme-color($theme, background, grey-800-400),
     legacy-disabled-state-background-color:
-        inspection.get-theme-color($theme, background, disabled-button-toggle),
+        inspection.get-theme-color($theme, background, black-grey200),
     legacy-disabled-state-text-color:
-        inspection.get-theme-color($theme, foreground, disabled-button),
+        inspection.get-theme-color($theme, foreground, base-30-26),
     legacy-selected-state-background-color:
-        inspection.get-theme-color($theme, background, selected-button),
+        inspection.get-theme-color($theme, background, grey-900-300),
     legacy-selected-state-text-color:
-        inspection.get-theme-color($theme, foreground, secondary-text),
-    legacy-state-layer-color: inspection.get-theme-color($theme, background, focused-button),
-    legacy-text-color: inspection.get-theme-color($theme, foreground, hint-text),
+        inspection.get-theme-color($theme, foreground, base-70-54),
+    legacy-state-layer-color: inspection.get-theme-color($theme, background, white-black-12),
+    legacy-text-color: inspection.get-theme-color($theme, foreground, base-50-38),
     selected-state-background-color:
-        inspection.get-theme-color($theme, background, selected-button),
-    selected-state-text-color: inspection.get-theme-color($theme, foreground, text),
-    state-layer-color: sass-utils.safe-color-change(
-        inspection.get-theme-color($theme, background, focused-button), $alpha: 1),
-    text-color: inspection.get-theme-color($theme, foreground, text),
+        inspection.get-theme-color($theme, background, grey-900-300),
+    selected-state-text-color: inspection.get-theme-color($theme, foreground, on-surface),
+    state-layer-color: inspection.get-theme-color($theme, background, white-black),
+    text-color: inspection.get-theme-color($theme, foreground, on-surface),
   );
 }
 
diff --git a/src/material/button/_m2-button.scss b/src/material/button/_m2-button.scss
index 41bed86d720d..0974c51108bc 100644
--- a/src/material/button/_m2-button.scss
+++ b/src/material/button/_m2-button.scss
@@ -52,65 +52,65 @@ $prefix: (mat, button);
   // internally. For now we fall back to the old hardcoded behavior only for internal apps.
   $outline: if(m2-utils.$private-is-internal-build,
     rgba(if($is-dark, #fff, #000), 0.12),
-    inspection.get-theme-color($theme, foreground, divider)
+    inspection.get-theme-color($theme, foreground, base-12)
   );
 
   @return (
-    filled-container-color: inspection.get-theme-color($theme, background, card),
+    filled-container-color: inspection.get-theme-color($theme, background, surface),
     filled-disabled-container-color:
-        inspection.get-theme-color($theme, foreground, disabled-button, 0.12),
+        inspection.get-theme-color($theme, foreground, base-12),
     filled-disabled-label-text-color:
-        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
+        inspection.get-theme-color($theme, foreground, base-50-38),
     filled-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     filled-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
     filled-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
-    filled-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
+    filled-label-text-color: inspection.get-theme-color($theme, foreground, base),
     filled-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    filled-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
+    filled-ripple-color: inspection.get-theme-color($theme, foreground, base-10),
     filled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     outlined-disabled-label-text-color:
-        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
+        inspection.get-theme-color($theme, foreground, base-50-38),
     outlined-disabled-outline-color: $outline,
     outlined-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     outlined-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
     outlined-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
-    outlined-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
+    outlined-label-text-color: inspection.get-theme-color($theme, foreground, base),
     outlined-outline-color: $outline,
     outlined-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    outlined-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
+    outlined-ripple-color: inspection.get-theme-color($theme, foreground, base-10),
     outlined-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-    protected-container-color: inspection.get-theme-color($theme, background, card),
+    protected-container-color: inspection.get-theme-color($theme, background, surface),
     protected-disabled-container-color:
-        inspection.get-theme-color($theme, foreground, disabled-button, 0.12),
+        inspection.get-theme-color($theme, foreground, base-12),
     protected-disabled-label-text-color:
-        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
+        inspection.get-theme-color($theme, foreground, base-50-38),
     protected-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     protected-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
     protected-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
-    protected-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
+    protected-label-text-color: inspection.get-theme-color($theme, foreground, base),
     protected-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    protected-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
+    protected-ripple-color: inspection.get-theme-color($theme, foreground, base-10),
     protected-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     text-disabled-label-text-color:
-        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
+        inspection.get-theme-color($theme, foreground, base-50-38),
     text-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     text-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
     text-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
-    text-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
+    text-label-text-color: inspection.get-theme-color($theme, foreground, base),
     text-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    text-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
+    text-ripple-color: inspection.get-theme-color($theme, foreground, base-10),
     text-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-    tonal-container-color: inspection.get-theme-color($theme, background, card),
+    tonal-container-color: inspection.get-theme-color($theme, background, surface),
     tonal-disabled-container-color:
-        inspection.get-theme-color($theme, foreground, disabled-button, 0.12),
+        inspection.get-theme-color($theme, foreground, base-12),
     tonal-disabled-label-text-color:
-        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
+        inspection.get-theme-color($theme, foreground, base-50-38),
     tonal-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     tonal-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
     tonal-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
-    tonal-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
+    tonal-label-text-color: inspection.get-theme-color($theme, foreground, base-87),
     tonal-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    tonal-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
+    tonal-ripple-color: inspection.get-theme-color($theme, foreground, base-10),
     tonal-state-layer-color: inspection.get-theme-color($theme, foreground, base),
   );
 }
@@ -153,7 +153,7 @@ $prefix: (mat, button);
         if(
           meta.type-of(inspection.get-theme-color($theme, $palette-name)) == color,
           rgba(inspection.get-theme-color($theme, $palette-name), $ripple-opacity),
-          inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
+          inspection.get-theme-color($theme, foreground, base-10)),
     outlined-state-layer-color: inspection.get-theme-color($theme, $palette-name),
     protected-container-color: $container-color,
     protected-label-text-color: $label-text-color,
@@ -163,7 +163,7 @@ $prefix: (mat, button);
     text-ripple-color:
         if(meta.type-of(inspection.get-theme-color($theme, $palette-name)) == color,
           rgba(inspection.get-theme-color($theme, $palette-name), $ripple-opacity),
-          inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
+          inspection.get-theme-color($theme, foreground, base-10)),
     text-state-layer-color: inspection.get-theme-color($theme, $palette-name),
     tonal-container-color: inspection.get-theme-color($theme, $palette-name, default),
     tonal-label-text-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1),
diff --git a/src/material/button/_m2-fab.scss b/src/material/button/_m2-fab.scss
index 71a231d8bd77..50dd45f3ddbc 100644
--- a/src/material/button/_m2-fab.scss
+++ b/src/material/button/_m2-fab.scss
@@ -36,28 +36,28 @@ $prefix: (mat, fab);
   $is-dark: inspection.get-theme-type($theme) == dark;
 
   @return (
-    container-color: inspection.get-theme-color($theme, background, card),
+    container-color: inspection.get-theme-color($theme, background, surface),
     disabled-state-container-color:
-        inspection.get-theme-color($theme, background, disabled-button, 0.12),
+        inspection.get-theme-color($theme, background, white-black-12),
     disabled-state-foreground-color:
-        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
+        inspection.get-theme-color($theme, foreground, base-50-38),
     disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
     foreground-color: inspection.get-theme-color($theme, foreground, base),
     hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
     pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
-    small-container-color: inspection.get-theme-color($theme, background, card),
+    ripple-color: inspection.get-theme-color($theme, foreground, base-10),
+    small-container-color: inspection.get-theme-color($theme, background, surface),
     small-disabled-state-container-color:
-        inspection.get-theme-color($theme, background, disabled-button, 0.12),
+        inspection.get-theme-color($theme, background, white-black-12),
     small-disabled-state-foreground-color:
-        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
+        inspection.get-theme-color($theme, foreground, base-50-38),
     small-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     small-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
     small-foreground-color: inspection.get-theme-color($theme, foreground, base),
     small-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
     small-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    small-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
+    small-ripple-color: inspection.get-theme-color($theme, foreground, base-10),
     small-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     state-layer-color: inspection.get-theme-color($theme, foreground, base),
   );
diff --git a/src/material/button/_m2-icon-button.scss b/src/material/button/_m2-icon-button.scss
index cd4714912983..66f96d256196 100644
--- a/src/material/button/_m2-icon-button.scss
+++ b/src/material/button/_m2-icon-button.scss
@@ -27,7 +27,7 @@ $prefix: (mat, icon-button);
     hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
     icon-color: inherit,
     pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
+    ripple-color: inspection.get-theme-color($theme, foreground, base-10),
     state-layer-color: inspection.get-theme-color($theme, foreground, base),
   );
 }
@@ -43,7 +43,7 @@ $prefix: (mat, icon-button);
     ripple-color: if(
       meta.type-of($color) == color,
       rgba($color, $ripple-opacity),
-      inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
+      inspection.get-theme-color($theme, foreground, base-10)),
   );
 }
 
diff --git a/src/material/card/_m2-card.scss b/src/material/card/_m2-card.scss
index dc35c55dfcb4..ad5680f31df6 100644
--- a/src/material/card/_m2-card.scss
+++ b/src/material/card/_m2-card.scss
@@ -20,13 +20,13 @@ $prefix: (mat, card);
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return (
-    elevated-container-color: inspection.get-theme-color($theme, background, card),
+    elevated-container-color: inspection.get-theme-color($theme, background, surface),
     elevated-container-elevation: elevation.get-box-shadow(1),
-    outlined-container-color: inspection.get-theme-color($theme, background, card),
+    outlined-container-color: inspection.get-theme-color($theme, background, surface),
     outlined-container-elevation: elevation.get-box-shadow(0),
-    outlined-outline-color: rgba(inspection.get-theme-color($theme, foreground, base), 0.12),
-    subtitle-text-color: inspection.get-theme-color($theme, foreground, secondary-text),
-    filled-container-color: inspection.get-theme-color($theme, background, card),
+    outlined-outline-color: inspection.get-theme-color($theme, foreground, base-12),
+    subtitle-text-color: inspection.get-theme-color($theme, foreground, base-70-54),
+    filled-container-color: inspection.get-theme-color($theme, background, surface),
     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 ed56c2648020..b2b0aca89f0a 100644
--- a/src/material/checkbox/_m2-checkbox.scss
+++ b/src/material/checkbox/_m2-checkbox.scss
@@ -28,11 +28,9 @@ $prefix: (mat, checkbox);
   $is-dark: inspection.get-theme-type($theme) == dark;
   $foreground-base: inspection.get-theme-color($theme, foreground, base);
   $palette-default: inspection.get-theme-color($theme, $palette-name, default);
-  $disabled-color: sass-utils.safe-color-change(
-      inspection.get-theme-color($theme, foreground, base), $alpha: 0.38);
+  $disabled-color: inspection.get-theme-color($theme, $palette-name, on-surface-38);
   $palette-selected: inspection.get-theme-color($theme, $palette-name);
-  $border-color: sass-utils.safe-color-change(
-      inspection.get-theme-color($theme, foreground, base), $alpha: 0.54);
+  $border-color: inspection.get-theme-color($theme, $palette-name, on-surface-54);
   $active-border-color:
     m2-theming.get-color-from-palette(m2-palette.$gray-palette, if($is-dark, 200, 900));
   $selected-checkmark-color: null;
@@ -49,8 +47,8 @@ $prefix: (mat, checkbox);
   }
 
   $tokens: (
-    disabled-label-color: inspection.get-theme-color($theme, foreground, disabled-text),
-    label-text-color: inspection.get-theme-color($theme, foreground, text),
+    disabled-label-color: inspection.get-theme-color($theme, foreground, base-50-38),
+    label-text-color: inspection.get-theme-color($theme, foreground, on-surface),
     disabled-selected-icon-color: $disabled-color,
     disabled-unselected-icon-color: $disabled-color,
     selected-checkmark-color: $selected-checkmark-color,
diff --git a/src/material/chips/_m2-chip.scss b/src/material/chips/_m2-chip.scss
index 59382d058107..83ba5f34b6dc 100644
--- a/src/material/chips/_m2-chip.scss
+++ b/src/material/chips/_m2-chip.scss
@@ -44,7 +44,7 @@ $prefix: (mat, chip);
   $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, background, surface);
 
   @if $palette-name == null {
     $is-dark: inspection.get-theme-type($theme) == dark;
@@ -52,7 +52,7 @@ $prefix: (mat, chip);
     $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, background, 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 d942b2cfcd3b..bcd101d8a4c2 100644
--- a/src/material/core/_m2-app.scss
+++ b/src/material/core/_m2-app.scss
@@ -17,8 +17,8 @@ $prefix: (mat, app);
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   $tokens: (
-    background-color: inspection.get-theme-color($theme, background, background),
-    text-color: inspection.get-theme-color($theme, foreground, text),
+    background-color: inspection.get-theme-color($theme, background, h303030-grey-50),
+    text-color: inspection.get-theme-color($theme, foreground, on-surface),
   );
 
   @for $zValue from 0 through 24 {
diff --git a/src/material/core/m2/_palette.scss b/src/material/core/m2/_palette.scss
index e2b5faada05c..975c2902791a 100644
--- a/src/material/core/m2/_palette.scss
+++ b/src/material/core/m2/_palette.scss
@@ -670,79 +670,84 @@ $blue-grey-palette: (
 // Alias for alternate spelling.
 $blue-gray-palette: $blue-grey-palette;
 
+@function get-foreground-palette($is-dark) {
+  $base: if($is-dark, white, black);
+  @return (
+    base:              $base,
+    base-10:           rgba($base, 0.1),
+    base-12:           rgba($base, 0.12),
+    base-38:           rgba($base, 0.38),
+    base-54:           rgba($base, 0.54),
+    base-60:           rgba($base, 0.6),
+    base-87:           rgba($base, 0.87),
+    base-08-04:        rgba($base, if($is-dark, 0.08, 0.04)),
+    base-30-26:        rgba($base, if($is-dark, 0.3, 0.26)),
+    base-30-38:        rgba($base, if($is-dark, 0.3, 0.38)),
+    base-50-38:        rgba($base, if($is-dark, 0.5, 0.38)),
+    base-70-54:        rgba($base, if($is-dark, 0.7, 0.54)),
+    elevation:         black,
+    icon:              if($is-dark, white, rgba(black, 0.54)),
+    on-surface:        if($is-dark, white, rgba(black, 0.87)),
 
-// Background palette for light themes.
-$light-theme-background-palette: (
-  status-bar: map.get($grey-palette, 300),
-  app-bar:    map.get($grey-palette, 100),
-  background: map.get($grey-palette, 50),
-  hover:      rgba(black, 0.04), // TODO(kara): check style with Material Design UX
-  card:       white,
-  dialog:     white,
-  disabled-button: rgba(black, 0.12),
-  raised-button: white,
-  focused-button: $dark-focused,
-  selected-button: map.get($grey-palette, 300),
-  selected-disabled-button: map.get($grey-palette, 400),
-  disabled-button-toggle: map.get($grey-palette, 200),
-  unselected-chip: map.get($grey-palette, 300),
-  disabled-list-option: map.get($grey-palette, 200),
-  tooltip: map.get($grey-palette, 700),
-);
+    // Unused in Angular Material, but provided for backwards compatibility
+    divider:           rgba($base, 0.12),
+    dividers:          rgba($base, 0.12),
+    disabled:          rgba($base, if($is-dark, 0.5, 0.38)),
+    disabled-button:   rgba($base, if($is-dark, 0.3, 0.26)),
+    disabled-text:     rgba($base, if($is-dark, 0.5, 0.38)),
+    hint-text:         rgba($base, if($is-dark, 0.5, 0.38)),
+    secondary-text:    rgba($base, if($is-dark, 0.7, 0.54)),
+    icons:             if($is-dark, white, rgba(black, 0.54)),
+    text:              if($is-dark, white, rgba(black, 0.87)),
+    slider-min:        if($is-dark, white, rgba(black, 0.87)),
+    slider-off:        rgba($base, if($is-dark, 0.3, 0.26)),
+    slider-off-active: rgba($base, if($is-dark, 0.3, 0.38)),
+  );
+}
 
-// Background palette for dark themes.
-$dark-theme-background-palette: (
-  status-bar: black,
-  app-bar:    map.get($grey-palette, 900),
-  background: #303030,
-  hover:      rgba(white, 0.04), // TODO(kara): check style with Material Design UX
-  card:       map.get($grey-palette, 800),
-  dialog:     map.get($grey-palette, 800),
-  disabled-button: rgba(white, 0.12),
-  raised-button: map.get($grey-palette, 800),
-  focused-button: $light-focused,
-  selected-button: map.get($grey-palette, 900),
-  selected-disabled-button: map.get($grey-palette, 800),
-  disabled-button-toggle: black,
-  unselected-chip: map.get($grey-palette, 700),
-  disabled-list-option: rgba(white, 0.12),
-  tooltip: map.get($grey-palette, 700),
-);
+@function get-background-palette($is-dark) {
+  $base: if($is-dark, white, black);
+  $grey-50: map.get($grey-palette, 50);
+  $grey-100: map.get($grey-palette, 100);
+  $grey-200: map.get($grey-palette, 200);
+  $grey-300: map.get($grey-palette, 300);
+  $grey-400: map.get($grey-palette, 400);
+  $grey-700: map.get($grey-palette, 700);
+  $grey-800: map.get($grey-palette, 800);
+  $grey-900: map.get($grey-palette, 900);
 
-// Foreground palette for light themes.
-$light-theme-foreground-palette: (
-  base:              black,
-  divider:           $dark-dividers,
-  dividers:          $dark-dividers,
-  disabled:          $dark-disabled-text,
-  disabled-button:   rgba(black, 0.26),
-  disabled-text:     $dark-disabled-text,
-  elevation:         black,
-  hint-text:         $dark-disabled-text,
-  secondary-text:    $dark-secondary-text,
-  icon:              rgba(black, 0.54),
-  icons:             rgba(black, 0.54),
-  text:              rgba(black, 0.87),
-  slider-min:        rgba(black, 0.87),
-  slider-off:        rgba(black, 0.26),
-  slider-off-active: rgba(black, 0.38),
-);
+  $surface:  if($is-dark, $grey-800, white);
+  $white-black: if($is-dark, white, black);
 
-// Foreground palette for dark themes.
-$dark-theme-foreground-palette: (
-  base:              white,
-  divider:           $light-dividers,
-  dividers:          $light-dividers,
-  disabled:          $light-disabled-text,
-  disabled-button:   rgba(white, 0.3),
-  disabled-text:     $light-disabled-text,
-  elevation:         black,
-  hint-text:         $light-disabled-text,
-  secondary-text:    $light-secondary-text,
-  icon:              white,
-  icons:             white,
-  text:              white,
-  slider-min:        white,
-  slider-off:        rgba(white, 0.3),
-  slider-off-active: rgba(white, 0.3),
-);
+  @return (
+    white-black: $white-black,
+    surface:  $surface,
+    surface-06:  rgba($surface, 0.6),
+    grey-900-100: if($is-dark, $grey-900, $grey-100),
+    h303030-grey-50: if($is-dark, #303030, $grey-50),
+    white-black-04: rgba($white-black, 0.04),
+    white-black-06: rgba($white-black, 0.06),
+    white-black-12: rgba($white-black, 0.12),
+    grey-900-300: if($is-dark, $grey-900, $grey-300),
+    grey-800-400: if($is-dark, $grey-900, $grey-300),
+    black-grey200: if($is-dark, black, $grey-200),
+    grey-700: $grey-700,
+
+    // Unused in Angular Material, but provided for backwards compatibility
+    card:                     $surface,
+    dialog:                   $surface,
+    raised-button:            $surface,
+    status-bar:               if($is-dark, black, $grey-300),
+    app-bar:                  if($is-dark, $grey-900, $grey-100),
+    background:               if($is-dark, #303030, $grey-50),
+    hover:                    rgba($white-black, 0.04),
+    disabled-button:          rgba($white-black, 0.12),
+    focused-button:           rgba($white-black, 0.12),
+    selected-button:          if($is-dark, $grey-900, $grey-300),
+    selected-disabled-button: if($is-dark, $grey-800, $grey-400),
+    disabled-button-toggle:   if($is-dark, black, $grey-200),
+    unselected-chip:          if($is-dark, $grey-700, $grey-300),
+    disabled-list-option:     if($is-dark, rgba(white, 0.12), $grey-200),
+    tooltip:                  $grey-700,
+  );
+}
diff --git a/src/material/core/m2/_theming.scss b/src/material/core/m2/_theming.scss
index 0f6eda8c0b9a..a7c6aeeb49aa 100644
--- a/src/material/core/m2/_theming.scss
+++ b/src/material/core/m2/_theming.scss
@@ -119,8 +119,8 @@
     accent: $accent,
     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
+    foreground: palette.get-foreground-palette($is-dark: false),
+    background: palette.get-background-palette($is-dark: false),
   );
 }
 
@@ -132,8 +132,8 @@
     accent: $accent,
     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
+    foreground: palette.get-foreground-palette($is-dark: true),
+    background: palette.get-background-palette($is-dark: true),
   );
 }
 
diff --git a/src/material/core/option/_m2-optgroup.scss b/src/material/core/option/_m2-optgroup.scss
index 94693ca52576..202a3ed2e87c 100644
--- a/src/material/core/option/_m2-optgroup.scss
+++ b/src/material/core/option/_m2-optgroup.scss
@@ -14,7 +14,7 @@ $prefix: (mat, optgroup);
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return (
-    label-text-color: inspection.get-theme-color($theme, foreground, text),
+    label-text-color: inspection.get-theme-color($theme, foreground, on-surface),
   );
 }
 
diff --git a/src/material/core/option/_m2-option.scss b/src/material/core/option/_m2-option.scss
index 1ce5f3e88f07..d2edbe6ea635 100644
--- a/src/material/core/option/_m2-option.scss
+++ b/src/material/core/option/_m2-option.scss
@@ -14,12 +14,11 @@ $prefix: (mat, option);
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme, $palette-name: primary) {
   $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));
+  $active-state-layer-color: inspection.get-theme-color($theme, foreground, base-08-04);
 
   @return (
     selected-state-label-text-color: inspection.get-theme-color($theme, $palette-name),
-    label-text-color: inspection.get-theme-color($theme, foreground, text),
+    label-text-color: inspection.get-theme-color($theme, foreground, on-surface),
     hover-state-layer-color: $active-state-layer-color,
     focus-state-layer-color: $active-state-layer-color,
     selected-state-layer-color: $active-state-layer-color,
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 d52c28906fef..4469fabe9833 100644
--- a/src/material/core/selection/pseudo-checkbox/_m2-pseudo-checkbox.scss
+++ b/src/material/core/selection/pseudo-checkbox/_m2-pseudo-checkbox.scss
@@ -15,12 +15,12 @@ $prefix: (mat, pseudo-checkbox);
 @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, background, h303030-grey-50);
 
   @return (
     full-selected-icon-color: inspection.get-theme-color($theme, $palette-name),
     full-selected-checkmark-color: $checkmark-color,
-    full-unselected-icon-color: inspection.get-theme-color($theme, foreground, secondary-text),
+    full-unselected-icon-color: inspection.get-theme-color($theme, foreground, base-70-54),
     full-disabled-selected-checkmark-color: $checkmark-color,
     full-disabled-unselected-icon-color: $disabled-color,
     full-disabled-selected-icon-color: $disabled-color,
diff --git a/src/material/core/tokens/_m2-utils.scss b/src/material/core/tokens/_m2-utils.scss
index 5ef6d41d0ddd..e16addda34eb 100644
--- a/src/material/core/tokens/_m2-utils.scss
+++ b/src/material/core/tokens/_m2-utils.scss
@@ -17,8 +17,8 @@ $placeholder-color-config: (
   accent: $_placeholder-color-palette,
   warn: $_placeholder-color-palette,
   is-dark: false,
-  foreground: palette.$light-theme-foreground-palette,
-  background: palette.$light-theme-background-palette,
+  foreground: palette.get-foreground-palette($is-dark: false),
+  background: palette.get-background-palette($is-dark: false),
 );
 
 $_placeholder-typography-level-config: typography.typography-config-level-from-mdc(body1);
diff --git a/src/material/datepicker/_m2-datepicker.scss b/src/material/datepicker/_m2-datepicker.scss
index 178bc3fdd26e..02bcff642b18 100644
--- a/src/material/datepicker/_m2-datepicker.scss
+++ b/src/material/datepicker/_m2-datepicker.scss
@@ -42,11 +42,11 @@ $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);
-  $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);
-  $hint-text-color: inspection.get-theme-color($theme, foreground, hint-text);
+  $text-color: inspection.get-theme-color($theme, foreground, on-surface);
+  $secondary-text-color: inspection.get-theme-color($theme, foreground, base-70-54);
+  $disabled-text-color: inspection.get-theme-color($theme, foreground, base-50-38);
+  $divider-color: inspection.get-theme-color($theme, foreground, base-12);
+  $hint-text-color: inspection.get-theme-color($theme, foreground, base-50-38);
   $preview-outline-color: $divider-color;
   $today-disabled-outline-color: null;
   $is-dark: inspection.get-theme-type($theme) == dark;
@@ -74,7 +74,7 @@ $private-default-overlap-color: #a8dab5;
   @return sass-utils.merge-all($calendar-tokens, $toggle-tokens, $range-tokens, (
     toggle-icon-color: $inactive-icon-color,
     calendar-body-label-text-color: $secondary-text-color,
-    calendar-period-button-text-color: inspection.get-theme-color($theme, foreground, text, 1),
+    calendar-period-button-text-color: inspection.get-theme-color($theme, foreground, base),
     calendar-period-button-icon-color: $inactive-icon-color,
     calendar-navigation-button-icon-color: $inactive-icon-color,
     calendar-header-divider-color: $divider-color,
@@ -93,7 +93,7 @@ $private-default-overlap-color: #a8dab5;
     range-input-disabled-state-separator-color: $disabled-text-color,
     range-input-disabled-state-text-color: $disabled-text-color,
 
-    calendar-container-background-color: inspection.get-theme-color($theme, background, card),
+    calendar-container-background-color: inspection.get-theme-color($theme, background, surface),
     calendar-container-text-color: $text-color,
   ));
 }
@@ -145,7 +145,7 @@ $private-default-overlap-color: #a8dab5;
     $active-disabled-color: color.adjust($palette-color, $alpha: -$_selected-fade-amount);
   }
   @else {
-    $active-disabled-color: inspection.get-theme-color($theme, foreground, disabled-button);
+    $active-disabled-color: inspection.get-theme-color($theme, foreground, base-30-26);
   }
 
   @return (
diff --git a/src/material/dialog/_m2-dialog.scss b/src/material/dialog/_m2-dialog.scss
index 40c641fb5f27..f76543e61e29 100644
--- a/src/material/dialog/_m2-dialog.scss
+++ b/src/material/dialog/_m2-dialog.scss
@@ -34,11 +34,11 @@ $prefix: (mat, dialog);
   // internally. For now we fall back to the old hardcoded behavior only for internal apps.
   $text-base: if(m2-utils.$private-is-internal-build,
     if($is-dark, #fff, #000),
-    inspection.get-theme-color($theme, foreground, text, 1)
+    inspection.get-theme-color($theme, foreground, base)
   );
 
   @return (
-    container-color: inspection.get-theme-color($theme, background, dialog),
+    container-color: inspection.get-theme-color($theme, background, surface),
     subhead-color: sass-utils.safe-color-change($text-base, $alpha: 0.87),
     supporting-text-color: sass-utils.safe-color-change($text-base, $alpha: 0.6),
   );
diff --git a/src/material/divider/_m2-divider.scss b/src/material/divider/_m2-divider.scss
index 6940edbf1d65..5bf3f2dc4000 100644
--- a/src/material/divider/_m2-divider.scss
+++ b/src/material/divider/_m2-divider.scss
@@ -16,7 +16,7 @@ $prefix: (mat, divider);
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return (
-    color: inspection.get-theme-color($theme, foreground, divider)
+    color: inspection.get-theme-color($theme, foreground, base-12)
   );
 }
 
diff --git a/src/material/expansion/_m2-expansion.scss b/src/material/expansion/_m2-expansion.scss
index 4a33f72367e1..34f2984532be 100644
--- a/src/material/expansion/_m2-expansion.scss
+++ b/src/material/expansion/_m2-expansion.scss
@@ -20,16 +20,15 @@ $prefix: (mat, expansion);
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return (
-    container-background-color: inspection.get-theme-color($theme, background, card),
-    container-text-color: inspection.get-theme-color($theme, foreground, text),
-    actions-divider-color: inspection.get-theme-color($theme, foreground, divider),
-    header-hover-state-layer-color: inspection.get-theme-color($theme, background, hover),
-    header-focus-state-layer-color: inspection.get-theme-color($theme, background, hover),
-    header-disabled-state-text-color: inspection.get-theme-color(
-        $theme, foreground, disabled-button),
-    header-text-color: inspection.get-theme-color($theme, foreground, text),
-    header-description-color: inspection.get-theme-color($theme, foreground, secondary-text),
-    header-indicator-color: inspection.get-theme-color($theme, foreground, secondary-text),
+    container-background-color: inspection.get-theme-color($theme, background, surface),
+    container-text-color: inspection.get-theme-color($theme, foreground, on-surface),
+    actions-divider-color: inspection.get-theme-color($theme, foreground, base-12),
+    header-hover-state-layer-color: inspection.get-theme-color($theme, background, white-black-04),
+    header-focus-state-layer-color: inspection.get-theme-color($theme, background, white-black-04),
+    header-disabled-state-text-color: inspection.get-theme-color($theme, foreground, base-30-26),
+    header-text-color: inspection.get-theme-color($theme, foreground, on-surface),
+    header-description-color: inspection.get-theme-color($theme, foreground, base-70-54),
+    header-indicator-color: inspection.get-theme-color($theme, foreground, base-70-54),
   );
 }
 
diff --git a/src/material/form-field/_m2-form-field.scss b/src/material/form-field/_m2-form-field.scss
index 11b92b0d6cfd..440e5accc696 100644
--- a/src/material/form-field/_m2-form-field.scss
+++ b/src/material/form-field/_m2-form-field.scss
@@ -27,7 +27,7 @@ $prefix: (mat, form-field);
 // 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, background, 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);
@@ -36,17 +36,17 @@ $prefix: (mat, form-field);
   // internally. For now we fall back to the old hardcoded behavior only for internal apps.
   $on-surface: if($is-dark, #fff, #000);
   $text-color-base: if(m2-utils.$private-is-internal-build, $on-surface,
-    inspection.get-theme-color($theme, foreground, text, 1));
+    inspection.get-theme-color($theme, foreground, base));
   $disabled-text-color-base: if(m2-utils.$private-is-internal-build, $on-surface,
-    inspection.get-theme-color($theme, foreground, disabled-text, 1));
+    inspection.get-theme-color($theme, foreground, base));
   $divider-base: if(m2-utils.$private-is-internal-build, $on-surface,
-    inspection.get-theme-color($theme, foreground, divider, 1));
+    inspection.get-theme-color($theme, foreground, base));
 
   @return map.merge($color-tokens, (
     // MDC has a token for the enabled placeholder, but not for the disabled one.
     disabled-input-text-placeholder-color:
       inspection.get-theme-color($theme, foreground, icon, 0.38),
-    state-layer-color: inspection.get-theme-color($theme, foreground, base, 0.87),
+    state-layer-color: inspection.get-theme-color($theme, foreground, base-87),
     error-text-color: inspection.get-theme-color($theme, warn),
 
     // On dark themes we set the native `select` color to some shade of white,
diff --git a/src/material/list/_m2-list.scss b/src/material/list/_m2-list.scss
index 1d09b9c4c81b..7e0739a94284 100644
--- a/src/material/list/_m2-list.scss
+++ b/src/material/list/_m2-list.scss
@@ -32,9 +32,9 @@ $prefix: (mat, list);
 @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-secondary-text: inspection.get-theme-color($theme, foreground, secondary-text);
-  $foreground-hint-text: inspection.get-theme-color($theme, foreground, hint-text);
+  $foreground-text: inspection.get-theme-color($theme, foreground, on-surface);
+  $foreground-secondary-text: inspection.get-theme-color($theme, foreground, base-70-54);
+  $foreground-hint-text: inspection.get-theme-color($theme, foreground, base-50-38);
   $text-icon-on-background: sass-utils.safe-color-change(
       $foreground-base, $alpha: if($is-dark, 0.5, 0.38));
 
diff --git a/src/material/menu/_m2-menu.scss b/src/material/menu/_m2-menu.scss
index dd4655c8835d..bc348f5ecb35 100644
--- a/src/material/menu/_m2-menu.scss
+++ b/src/material/menu/_m2-menu.scss
@@ -29,17 +29,16 @@ $prefix: (mat, menu);
 // 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;
-  $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);
+  $active-state-layer-color: inspection.get-theme-color($theme, foreground, base-08-04);
+  $text-color: inspection.get-theme-color($theme, foreground, on-surface);
 
   @return (
     item-label-text-color: $text-color,
     item-icon-color: $text-color,
     item-hover-state-layer-color: $active-state-layer-color,
     item-focus-state-layer-color: $active-state-layer-color,
-    container-color: inspection.get-theme-color($theme, background, card),
-    divider-color: inspection.get-theme-color($theme, foreground, divider),
+    container-color: inspection.get-theme-color($theme, background, surface),
+    divider-color: inspection.get-theme-color($theme, foreground, base-12),
   );
 }
 
diff --git a/src/material/paginator/_m2-paginator.scss b/src/material/paginator/_m2-paginator.scss
index 971e20b8aae7..81c41d071c3d 100644
--- a/src/material/paginator/_m2-paginator.scss
+++ b/src/material/paginator/_m2-paginator.scss
@@ -20,7 +20,7 @@ $prefix: (mat, paginator);
 
   @return (
     container-text-color: sass-utils.safe-color-change($foreground-base, $alpha: 0.87),
-    container-background-color: inspection.get-theme-color($theme, background, card),
+    container-background-color: inspection.get-theme-color($theme, background, surface),
     enabled-icon-color: sass-utils.safe-color-change($foreground-base, $alpha: 0.54),
     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 55fa86124b7d..5765f4c46ea1 100644
--- a/src/material/radio/_m2-radio.scss
+++ b/src/material/radio/_m2-radio.scss
@@ -30,10 +30,10 @@ $prefix: (mat, radio);
 
   @return (
     checked-ripple-color: inspection.get-theme-color($theme, $palette-name, default),
-    disabled-label-color: inspection.get-theme-color($theme, foreground, disabled-text),
+    disabled-label-color: inspection.get-theme-color($theme, foreground, base-50-38),
     disabled-selected-icon-color: inspection.get-theme-color($theme, foreground, icon, 1),
     disabled-unselected-icon-color: inspection.get-theme-color($theme, foreground, icon, 1),
-    label-text-color: inspection.get-theme-color($theme, foreground, text),
+    label-text-color: inspection.get-theme-color($theme, foreground, on-surface),
     ripple-color: inspection.get-theme-color($theme, foreground, base),
     selected-focus-icon-color: $palette-color,
     selected-hover-icon-color: $palette-color,
diff --git a/src/material/select/_m2-select.scss b/src/material/select/_m2-select.scss
index 08cb7cbc5ef7..e606460cc8ed 100644
--- a/src/material/select/_m2-select.scss
+++ b/src/material/select/_m2-select.scss
@@ -24,14 +24,14 @@ $prefix: (mat, select);
   // internally. For now we fall back to the old hardcoded behavior only for internal apps.
   $on-surface: if($is-dark, #fff, #000);
   $text-color-base: if(m2-utils.$private-is-internal-build, $on-surface,
-    inspection.get-theme-color($theme, foreground, text, 1));
+    inspection.get-theme-color($theme, foreground, base));
   $disabled-text-color-base: if(m2-utils.$private-is-internal-build, $on-surface,
-    inspection.get-theme-color($theme, foreground, disabled-text, 1));
+    inspection.get-theme-color($theme, foreground, base));
   $icon-color-base: if(m2-utils.$private-is-internal-build, $on-surface,
-    inspection.get-theme-color($theme, foreground, divider, 1));
+    inspection.get-theme-color($theme, foreground, base));
 
   @return (
-    panel-background-color: inspection.get-theme-color($theme, background, card),
+    panel-background-color: inspection.get-theme-color($theme, background, surface),
     enabled-trigger-text-color: sass-utils.safe-color-change($text-color-base, $alpha: 0.87),
     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 5f35c59afa30..429e1b95b39f 100644
--- a/src/material/sidenav/_m2-sidenav.scss
+++ b/src/material/sidenav/_m2-sidenav.scss
@@ -23,17 +23,15 @@ $prefix: (mat, sidenav);
 // 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;
-  $scrim-opacity: 0.6;
-  $scrim-color: sass-utils.safe-color-change(
-      inspection.get-theme-color($theme, background, card), $alpha: $scrim-opacity);
-  $fallback-scrim-color: if($is-dark, rgba(#fff, $scrim-opacity), rgba(#000, $scrim-opacity));
+  $scrim-color: inspection.get-theme-color($theme, background, surface-06);
+  $fallback-scrim-color: inspection.get-theme-color($theme, background, white-black-06);
 
   @return (
-    container-divider-color: inspection.get-theme-color($theme, foreground, divider),
-    container-background-color: inspection.get-theme-color($theme, background, dialog),
-    container-text-color: inspection.get-theme-color($theme, foreground, text),
-    content-background-color: inspection.get-theme-color($theme, background, background),
-    content-text-color: inspection.get-theme-color($theme, foreground, text),
+    container-divider-color: inspection.get-theme-color($theme, foreground, base-12),
+    container-background-color: inspection.get-theme-color($theme, background, surface),
+    container-text-color: inspection.get-theme-color($theme, foreground, on-surface),
+    content-background-color: inspection.get-theme-color($theme, background, h303030-grey-50),
+    content-text-color: inspection.get-theme-color($theme, foreground, 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 333936c3925d..c4363772cbf0 100644
--- a/src/material/slide-toggle/_m2-slide-toggle.scss
+++ b/src/material/slide-toggle/_m2-slide-toggle.scss
@@ -89,7 +89,7 @@ $prefix: (mat, slide-toggle);
         disabled-unselected-track-color: $on-surface,
         handle-elevation-shadow: elevation.get-box-shadow(1),
         handle-surface-color: #fff,
-        label-text-color: inspection.get-theme-color($theme, foreground, text),
+        label-text-color: inspection.get-theme-color($theme, foreground, on-surface),
         selected-icon-color: $icon-color,
         unselected-hover-handle-color: $on-surface-state-content,
         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 9db12843824a..0b2ac0a3da5b 100644
--- a/src/material/snack-bar/_m2-snack-bar.scss
+++ b/src/material/snack-bar/_m2-snack-bar.scss
@@ -18,7 +18,7 @@ $prefix: (mat, snack-bar);
 // 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, background, surface);
 
   @return (
     container-color: if(
diff --git a/src/material/sort/_m2-sort.scss b/src/material/sort/_m2-sort.scss
index 67e37fe1fda7..5fc4ff28f0df 100644
--- a/src/material/sort/_m2-sort.scss
+++ b/src/material/sort/_m2-sort.scss
@@ -15,8 +15,8 @@ $prefix: (mat, sort);
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
-  $table-background: inspection.get-theme-color($theme, background, card);
-  $text-color: inspection.get-theme-color($theme, foreground, secondary-text);
+  $table-background: inspection.get-theme-color($theme, background, surface);
+  $text-color: inspection.get-theme-color($theme, foreground, base-70-54);
   $arrow-color: null;
 
   // Because the arrow is made up of multiple elements that are stacked on top of each other,
diff --git a/src/material/stepper/_m2-stepper.scss b/src/material/stepper/_m2-stepper.scss
index 6963ef3b0925..6e3d20350208 100644
--- a/src/material/stepper/_m2-stepper.scss
+++ b/src/material/stepper/_m2-stepper.scss
@@ -19,16 +19,17 @@ $prefix: (mat, stepper);
 // 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), (
-    container-color: inspection.get-theme-color($theme, background, card),
-    line-color: inspection.get-theme-color($theme, foreground, divider),
-    header-hover-state-layer-color: inspection.get-theme-color($theme, background, hover),
-    header-focus-state-layer-color: inspection.get-theme-color($theme, background, hover),
-    header-label-text-color: inspection.get-theme-color($theme, foreground, secondary-text),
+    container-color: inspection.get-theme-color($theme, background, surface),
+    line-color: inspection.get-theme-color($theme, foreground, base-12),
+    header-hover-state-layer-color: inspection.get-theme-color($theme, background, white-black-04),
+    header-focus-state-layer-color: inspection.get-theme-color($theme, background, white-black-04),
+    header-label-text-color: inspection.get-theme-color($theme, foreground, base-70-54),
     header-optional-label-text-color: inspection.get-theme-color(
-        $theme, foreground, secondary-text),
-    header-selected-state-label-text-color: inspection.get-theme-color($theme, foreground, text),
+        $theme, foreground, base-70-54),
+    header-selected-state-label-text-color:
+        inspection.get-theme-color($theme, foreground, on-surface),
     header-error-state-label-text-color: inspection.get-theme-color($theme, warn, text),
-    header-icon-background-color: inspection.get-theme-color($theme, foreground, secondary-text),
+    header-icon-background-color: inspection.get-theme-color($theme, foreground, base-70-54),
     header-error-state-icon-foreground-color: inspection.get-theme-color($theme, warn, text),
     header-error-state-icon-background-color: transparent,
   ));
diff --git a/src/material/table/_m2-table.scss b/src/material/table/_m2-table.scss
index aff938ffe713..f18a3e4eb147 100644
--- a/src/material/table/_m2-table.scss
+++ b/src/material/table/_m2-table.scss
@@ -20,9 +20,9 @@ $prefix: (mat, table);
   @return (
     background-color: inspection.get-theme-color($theme, background, 'card'),
 
-    header-headline-color: inspection.get-theme-color($theme, foreground, text),
-    row-item-label-text-color: inspection.get-theme-color($theme, foreground, text),
-    row-item-outline-color: inspection.get-theme-color($theme, foreground, divider),
+    header-headline-color: inspection.get-theme-color($theme, foreground, on-surface),
+    row-item-label-text-color: inspection.get-theme-color($theme, foreground, on-surface),
+    row-item-outline-color: inspection.get-theme-color($theme, foreground, base-12),
   );
 }
 
diff --git a/src/material/tabs/_m2-tabs.scss b/src/material/tabs/_m2-tabs.scss
index ebcd1cf40841..60ed3cee52c6 100644
--- a/src/material/tabs/_m2-tabs.scss
+++ b/src/material/tabs/_m2-tabs.scss
@@ -31,12 +31,13 @@ $prefix: (mat, tab);
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme, $palette-name: primary, $exclude: ()) {
   $is-dark: inspection.get-theme-type($theme) == dark;
-  $inactive-label-text-color: inspection.get-theme-color($theme, foreground, text, 0.6);
+  $inactive-label-text-color: inspection.get-theme-color($theme, foreground, base-60);
   $active-label-text-color: inspection.get-theme-color($theme, $palette-name, default);
   $ripple-color: inspection.get-theme-color($theme, $palette-name, default);
+  $disabled-ripple: inspection.get-theme-color($theme, foreground, base-50-38);
 
   $tokens: (
-    disabled-ripple-color: inspection.get-theme-color($theme, foreground, disabled),
+    disabled-ripple-color: inspection.get-theme-color($theme, foreground, base-50-38),
     pagination-icon-color: inspection.get-theme-color($theme, foreground, icon, 1),
 
     // Note: MDC has equivalents of these tokens, but they lead to much higher selector specificity.
diff --git a/src/material/timepicker/_m2-timepicker.scss b/src/material/timepicker/_m2-timepicker.scss
index 430b9b8678bd..28c6323847a6 100644
--- a/src/material/timepicker/_m2-timepicker.scss
+++ b/src/material/timepicker/_m2-timepicker.scss
@@ -18,7 +18,7 @@ $prefix: (mat, timepicker);
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return (
-    container-background-color: inspection.get-theme-color($theme, background, card)
+    container-background-color: inspection.get-theme-color($theme, background, surface)
   );
 }
 
diff --git a/src/material/toolbar/_m2-toolbar.scss b/src/material/toolbar/_m2-toolbar.scss
index c4b2ca60a8e1..14ddb55b542f 100644
--- a/src/material/toolbar/_m2-toolbar.scss
+++ b/src/material/toolbar/_m2-toolbar.scss
@@ -16,8 +16,8 @@ $prefix: (mat, toolbar);
 // Tokens that can be configured through Angular Material's color theming API.
 @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),
+    $background-color: inspection.get-theme-color($theme, background, grey-900-100),
+    $text-color: inspection.get-theme-color($theme, foreground, on-surface),
   );
 }
 
diff --git a/src/material/tooltip/_m2-tooltip.scss b/src/material/tooltip/_m2-tooltip.scss
index d865185e432f..7a8adb4b019d 100644
--- a/src/material/tooltip/_m2-tooltip.scss
+++ b/src/material/tooltip/_m2-tooltip.scss
@@ -22,7 +22,7 @@ $prefix: (mat, tooltip);
 @function get-color-tokens($theme) {
 
   @return (
-    container-color: inspection.get-theme-color($theme, background, tooltip),
+    container-color: inspection.get-theme-color($theme, background, grey-700),
     supporting-text-color: #fff,
   );
 }
diff --git a/src/material/tree/_m2-tree.scss b/src/material/tree/_m2-tree.scss
index 0e0ee8f6dbc5..c922eda8d987 100644
--- a/src/material/tree/_m2-tree.scss
+++ b/src/material/tree/_m2-tree.scss
@@ -18,8 +18,8 @@ $prefix: (mat, tree);
   $foreground-base: inspection.get-theme-color($theme, foreground, base);
 
   @return (
-    container-background-color: inspection.get-theme-color($theme, background, card),
-    node-text-color: inspection.get-theme-color($theme, foreground, text),
+    container-background-color: inspection.get-theme-color($theme, background, surface),
+    node-text-color: inspection.get-theme-color($theme, foreground, on-surface),
   );
 }