diff --git a/src/material/badge/_badge-theme.scss b/src/material/badge/_badge-theme.scss
index eac410573b8a..12ba9d74afb4 100644
--- a/src/material/badge/_badge-theme.scss
+++ b/src/material/badge/_badge-theme.scss
@@ -38,13 +38,13 @@
 
     .mat-badge-accent {
       @include token-utils.create-token-values-mixed(
-        m2-badge.private-get-color-palette-color-tokens($theme, accent)
+        m2-badge.private-get-color-palette-color-tokens($theme, secondary)
       );
     }
 
     .mat-badge-warn {
       @include token-utils.create-token-values-mixed(
-        m2-badge.private-get-color-palette-color-tokens($theme, warn)
+        m2-badge.private-get-color-palette-color-tokens($theme, error)
       );
     }
   }
diff --git a/src/material/badge/_m2-badge.scss b/src/material/badge/_m2-badge.scss
index f867988b13b4..41c075e8f7ca 100644
--- a/src/material/badge/_m2-badge.scss
+++ b/src/material/badge/_m2-badge.scss
@@ -52,10 +52,13 @@ $_large-size: $_default-size + 6px;
 }
 
 // Generates the tokens used to theme the badge based on a palette.
-@function private-get-color-palette-color-tokens($theme, $palette-name: primary) {
+@function private-get-color-palette-color-tokens($theme, $color-variant) {
+  $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
+
   @return (
-    badge-background-color: inspection.get-theme-color($theme, $palette-name),
-    badge-text-color: inspection.get-theme-color($theme, $palette-name, default-contrast),
+    badge-background-color: map.get($system, primary),
+    badge-text-color: map.get($system, on-primary),
   );
 }
 
diff --git a/src/material/button/_button-theme.scss b/src/material/button/_button-theme.scss
index 89944b851729..4399a881a6bc 100644
--- a/src/material/button/_button-theme.scss
+++ b/src/material/button/_button-theme.scss
@@ -54,11 +54,11 @@
       }
 
       &.mat-accent {
-        @include _m2-button-variant($theme, accent);
+        @include _m2-button-variant($theme, secondary);
       }
 
       &.mat-warn {
-        @include _m2-button-variant($theme, warn);
+        @include _m2-button-variant($theme, error);
       }
     }
   }
diff --git a/src/material/button/_fab-theme.scss b/src/material/button/_fab-theme.scss
index 61157e42af1f..1d4478bf301b 100644
--- a/src/material/button/_fab-theme.scss
+++ b/src/material/button/_fab-theme.scss
@@ -48,11 +48,11 @@
         }
 
         &.mat-accent {
-          @include _fab-variant($theme, accent);
+          @include _fab-variant($theme, secondary);
         }
 
         &.mat-warn {
-          @include _fab-variant($theme, warn);
+          @include _fab-variant($theme, error);
         }
       }
     }
diff --git a/src/material/button/_icon-button-theme.scss b/src/material/button/_icon-button-theme.scss
index 4363e1681723..6db1b9ccc163 100644
--- a/src/material/button/_icon-button-theme.scss
+++ b/src/material/button/_icon-button-theme.scss
@@ -46,11 +46,11 @@
         }
 
         &.mat-accent {
-          @include _m2-icon-button-variant($theme, accent);
+          @include _m2-icon-button-variant($theme, secondary);
         }
 
         &.mat-warn {
-          @include _m2-icon-button-variant($theme, warn);
+          @include _m2-icon-button-variant($theme, error);
         }
       }
     }
diff --git a/src/material/button/_m2-button.scss b/src/material/button/_m2-button.scss
index 7df489d6390b..647cfc109bca 100644
--- a/src/material/button/_m2-button.scss
+++ b/src/material/button/_m2-button.scss
@@ -1,4 +1,3 @@
-@use 'sass:meta';
 @use 'sass:map';
 @use '../core/tokens/m2-utils';
 @use '../core/tokens/m3-utils';
@@ -106,49 +105,34 @@
 }
 
 // Generates the mapping for the properties that change based on the button palette color.
-@function private-get-color-palette-color-tokens($theme, $palette-name) {
-  $color: inspection.get-theme-color($theme, $palette-name);
-  $state-layer-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
-  $ripple-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 0.1);
-  $contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
-  $container-color: inspection.get-theme-color($theme, $palette-name, default);
-  $label-text-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
-  $ripple-opacity: 0.1;
+@function private-get-color-palette-color-tokens($theme, $color-variant) {
+  $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
 
   // outlined-outline-color:
   // TODO: we shouldn't have to set this since it's the same as the non-palette version, however
   // there are a bunch of tests internally that depend on it. We should remove this and clean
   // up the screenshots separately.
   @return (
-    button-filled-container-color: $container-color,
-    button-filled-label-text-color: $label-text-color,
-    button-filled-ripple-color: $ripple-color,
-    button-filled-state-layer-color: $state-layer-color,
-    button-outlined-label-text-color: inspection.get-theme-color($theme, $palette-name, default),
+    button-filled-container-color: map.get($system, primary),
+    button-filled-label-text-color: map.get($system, on-primary),
+    button-filled-ripple-color: m3-utils.color-with-opacity(map.get($system, on-primary), 10%),
+    button-filled-state-layer-color: map.get($system, on-primary),
+    button-outlined-label-text-color: map.get($system, primary),
     button-outlined-outline-color: map.get(get-color-tokens($theme), button-outlined-outline-color),
-    button-outlined-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)),
-    button-outlined-state-layer-color: inspection.get-theme-color($theme, $palette-name),
-    button-protected-container-color: $container-color,
-    button-protected-label-text-color: $label-text-color,
-    button-protected-ripple-color: $ripple-color,
-    button-protected-state-layer-color: $state-layer-color,
-    button-text-label-text-color: inspection.get-theme-color($theme, $palette-name),
-    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)),
-    button-text-state-layer-color: inspection.get-theme-color($theme, $palette-name),
-    button-tonal-container-color: inspection.get-theme-color($theme, $palette-name, default),
-    button-tonal-label-text-color:
-        inspection.get-theme-color($theme, $palette-name, default-contrast),
-    button-tonal-ripple-color:
-        inspection.get-theme-color($theme, $palette-name, default-contrast, 0.1),
-    button-tonal-state-layer-color:
-        inspection.get-theme-color($theme, $palette-name, default-contrast),
+    button-outlined-ripple-color: m3-utils.color-with-opacity(map.get($system, primary), 10%),
+    button-outlined-state-layer-color: map.get($system, primary),
+    button-protected-container-color: map.get($system, primary),
+    button-protected-label-text-color: map.get($system, on-primary),
+    button-protected-ripple-color: m3-utils.color-with-opacity(map.get($system, on-primary), 10%),
+    button-protected-state-layer-color: map.get($system, on-primary),
+    button-text-label-text-color: map.get($system, primary),
+    button-text-ripple-color: m3-utils.color-with-opacity(map.get($system, primary), 10%),
+    button-text-state-layer-color: map.get($system, primary),
+    button-tonal-container-color: map.get($system, primary),
+    button-tonal-label-text-color: map.get($system, on-primary),
+    button-tonal-ripple-color: m3-utils.color-with-opacity(map.get($system, on-primary), 10%),
+    button-tonal-state-layer-color: map.get($system, on-primary),
   );
 }
 
diff --git a/src/material/button/_m2-fab.scss b/src/material/button/_m2-fab.scss
index 3608e2753a6e..0e953b5371a3 100644
--- a/src/material/button/_m2-fab.scss
+++ b/src/material/button/_m2-fab.scss
@@ -60,21 +60,19 @@
 }
 
 // Generates the mapping for the properties that change based on the FAB palette color.
-@function private-get-color-palette-color-tokens($theme, $palette-name) {
-  $contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
-  $foreground-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
-  $state-layer-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
-  $ripple-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 0.1);
+@function private-get-color-palette-color-tokens($theme, $color-variant) {
+  $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
 
   @return (
-    fab-container-color: inspection.get-theme-color($theme, $palette-name, default),
-    fab-foreground-color: $foreground-color,
-    fab-ripple-color: $ripple-color,
-    fab-small-container-color: inspection.get-theme-color($theme, $palette-name, default),
-    fab-small-foreground-color: $foreground-color,
-    fab-small-ripple-color: $ripple-color,
-    fab-small-state-layer-color: $state-layer-color,
-    fab-state-layer-color: $state-layer-color,
+    fab-container-color: map.get($system, primary),
+    fab-foreground-color: map.get($system, on-primary),
+    fab-ripple-color: m3-utils.color-with-opacity(map.get($system, on-primary), 10%),
+    fab-small-container-color: map.get($system, primary),
+    fab-small-foreground-color: map.get($system, on-primary),
+    fab-small-ripple-color: m3-utils.color-with-opacity(map.get($system, on-primary), 10%),
+    fab-small-state-layer-color: map.get($system, on-primary),
+    fab-state-layer-color: map.get($system, on-primary),
   );
 }
 
diff --git a/src/material/button/_m2-icon-button.scss b/src/material/button/_m2-icon-button.scss
index 19e9c43b76bc..f22ca1f7bd52 100644
--- a/src/material/button/_m2-icon-button.scss
+++ b/src/material/button/_m2-icon-button.scss
@@ -1,8 +1,8 @@
-@use 'sass:meta';
 @use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -31,17 +31,14 @@
 }
 
 // Generates the mapping for the properties that change based on the button palette color.
-@function private-get-color-palette-color-tokens($theme, $palette-name) {
-  $color: inspection.get-theme-color($theme, $palette-name);
-  $ripple-opacity: 0.1;
+@function private-get-color-palette-color-tokens($theme, $color-variant) {
+  $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
 
   @return (
-    icon-button-icon-color: inspection.get-theme-color($theme, $palette-name),
-    icon-button-state-layer-color: $color,
-    icon-button-ripple-color: if(
-      meta.type-of($color) == color,
-      rgba($color, $ripple-opacity),
-      inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
+    icon-button-icon-color: map.get($system, primary),
+    icon-button-state-layer-color: map.get($system, primary),
+    icon-button-ripple-color: m3-utils.color-with-opacity(map.get($system, primary), 10%),
   );
 }
 
diff --git a/src/material/checkbox/_checkbox-theme.scss b/src/material/checkbox/_checkbox-theme.scss
index d0217644a547..ad46dac76cbe 100644
--- a/src/material/checkbox/_checkbox-theme.scss
+++ b/src/material/checkbox/_checkbox-theme.scss
@@ -29,7 +29,8 @@
         map.get(m3-checkbox.get-tokens($theme, $color-variant), color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-checkbox.get-color-tokens($theme));
+      @include token-utils.create-token-values-mixed(
+          m2-checkbox.get-color-tokens($theme, secondary));
     }
 
     .mat-mdc-checkbox {
@@ -42,7 +43,7 @@
 
       &.mat-warn {
         @include token-utils.create-token-values-mixed(
-          m2-checkbox.get-color-tokens($theme, warn,
+          m2-checkbox.get-color-tokens($theme, error,
               $exclude: (checkbox-disabled-label-color, checkbox-label-text-color))
         );
       }
diff --git a/src/material/checkbox/_m2-checkbox.scss b/src/material/checkbox/_m2-checkbox.scss
index 849746ec728c..fff7cd726d82 100644
--- a/src/material/checkbox/_m2-checkbox.scss
+++ b/src/material/checkbox/_m2-checkbox.scss
@@ -21,33 +21,29 @@
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme, $palette-name: accent, $exclude: ()) {
+@function get-color-tokens($theme, $color-variant, $exclude: ()) {
   $system: m2-utils.get-system($theme);
-
+  $system: m3-utils.replace-colors-with-variant($system, secondary, $color-variant);
   $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: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
-  $palette-selected: inspection.get-theme-color($theme, $palette-name);
-  $selected-checkmark-color:
-    inspection.get-theme-color($theme, $palette-name, default-contrast);
 
   $tokens: (
     checkbox-disabled-label-color: $disabled,
     checkbox-label-text-color: map.get($system, on-surface),
     checkbox-disabled-selected-icon-color: $disabled,
     checkbox-disabled-unselected-icon-color: $disabled,
-    checkbox-selected-checkmark-color: $selected-checkmark-color,
-    checkbox-selected-focus-icon-color: $palette-selected,
-    checkbox-selected-hover-icon-color: $palette-selected,
-    checkbox-selected-icon-color: $palette-selected,
-    checkbox-selected-pressed-icon-color: $palette-selected,
+    checkbox-selected-checkmark-color: map.get($system, on-secondary),
+    checkbox-selected-focus-icon-color: map.get($system, secondary),
+    checkbox-selected-hover-icon-color: map.get($system, secondary),
+    checkbox-selected-icon-color: map.get($system, secondary),
+    checkbox-selected-pressed-icon-color: map.get($system, secondary),
     checkbox-unselected-focus-icon-color: map.get($system, on-surface),
     checkbox-unselected-hover-icon-color: map.get($system, on-surface),
     checkbox-unselected-icon-color: map.get($system, on-surface-variant),
-    checkbox-selected-focus-state-layer-color: $palette-default,
-    checkbox-selected-hover-state-layer-color: $palette-default,
-    checkbox-selected-pressed-state-layer-color: $palette-default,
+    checkbox-selected-focus-state-layer-color: map.get($system, secondary),
+    checkbox-selected-hover-state-layer-color: map.get($system, secondary),
+    checkbox-selected-pressed-state-layer-color: map.get($system, secondary),
     checkbox-unselected-focus-state-layer-color: map.get($system, on-surface),
     checkbox-unselected-hover-state-layer-color: map.get($system, on-surface),
     checkbox-unselected-pressed-state-layer-color: $foreground-base,
diff --git a/src/material/chips/_chips-theme.scss b/src/material/chips/_chips-theme.scss
index 4a47b4828af1..b5e9ddcb8562 100644
--- a/src/material/chips/_chips-theme.scss
+++ b/src/material/chips/_chips-theme.scss
@@ -34,15 +34,18 @@
       &.mat-mdc-chip-selected,
       &.mat-mdc-chip-highlighted {
         &.mat-primary {
-          @include token-utils.create-token-values-mixed(m2-chip.get-color-tokens($theme, primary));
+          @include token-utils.create-token-values-mixed(
+              m2-chip.get-color-tokens($theme, primary));
         }
 
         &.mat-accent {
-          @include token-utils.create-token-values-mixed(m2-chip.get-color-tokens($theme, accent));
+          @include token-utils.create-token-values-mixed(
+              m2-chip.get-color-tokens($theme, secondary));
         }
 
         &.mat-warn {
-          @include token-utils.create-token-values-mixed(m2-chip.get-color-tokens($theme, warn));
+          @include token-utils.create-token-values-mixed(
+              m2-chip.get-color-tokens($theme, error));
         }
       }
     }
diff --git a/src/material/chips/_m2-chip.scss b/src/material/chips/_m2-chip.scss
index fe7dadceb8ab..e4a31c582d33 100644
--- a/src/material/chips/_m2-chip.scss
+++ b/src/material/chips/_m2-chip.scss
@@ -5,6 +5,7 @@
 @use '../core/m2/palette' as m2-palette;
 @use '../core/theming/theming';
 @use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -37,14 +38,13 @@
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme, $palette-name: null) {
+@function get-color-tokens($theme, $color-variant: null) {
   $system: m2-utils.get-system($theme);
   $foreground: null;
   $background: null;
   $state-layer-color: inspection.get-theme-color($theme, foreground, base);
-  $surface: map.get($system, surface);
 
-  @if $palette-name == null {
+  @if $color-variant == null {
     $is-dark: inspection.get-theme-type($theme) == dark;
     $grey-50: map.get(m2-palette.$grey-palette, 50);
     $grey-900: map.get(m2-palette.$grey-palette, 900);
@@ -58,8 +58,10 @@
     );
   }
   @else {
-    $background: inspection.get-theme-color($theme, $palette-name);
-    $foreground: inspection.get-theme-color($theme, $palette-name, default-contrast);
+    $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
+
+    $background: map.get($system, primary);
+    $foreground: map.get($system, on-primary);
   }
   @return (
     chip-disabled-label-text-color: $foreground,
diff --git a/src/material/core/m2/_theming.scss b/src/material/core/m2/_theming.scss
index bd53421f7f4f..bdd7cff4cc05 100644
--- a/src/material/core/m2/_theming.scss
+++ b/src/material/core/m2/_theming.scss
@@ -116,10 +116,11 @@
 // Creates a light-themed color configuration from the specified
 // primary, accent and warn palettes.
 @function _mat-create-light-color-config($primary, $accent, $warn: null) {
+  $warn: if($warn != null, $warn, define-palette(palette.$red-palette));
   @return (
     primary: $primary,
     accent: $accent,
-    warn: if($warn != null, $warn, define-palette(palette.$red-palette)),
+    warn: $warn,
     is-dark: false,
     foreground: palette.$light-theme-foreground-palette,
     background: palette.$light-theme-background-palette,
@@ -134,6 +135,12 @@
       hover-state-layer-opacity: 0.04,
       focus-state-layer-opacity: 0.12,
       pressed-state-layer-opacity: 0.12,
+      primary: map.get($primary, default),
+      on-primary: map.get($primary, default-contrast),
+      secondary: map.get($accent, default),
+      on-secondary: map.get($accent, default-contrast),
+      error: map.get($warn, default),
+      on-error: map.get($warn, default-contrast),
     ),
   );
 }
@@ -141,10 +148,11 @@
 // Creates a dark-themed color configuration from the specified
 // primary, accent and warn palettes.
 @function _mat-create-dark-color-config($primary, $accent, $warn: null) {
+  $warn: if($warn != null, $warn, define-palette(palette.$red-palette));
   @return (
     primary: $primary,
     accent: $accent,
-    warn: if($warn != null, $warn, define-palette(palette.$red-palette)),
+    warn: $warn,
     is-dark: true,
     foreground: palette.$dark-theme-foreground-palette,
     background: palette.$dark-theme-background-palette,
@@ -159,6 +167,12 @@
       hover-state-layer-opacity: 0.04,
       focus-state-layer-opacity: 0.12,
       pressed-state-layer-opacity: 0.12,
+      primary: map.get($primary, default),
+      on-primary: map.get($primary, default-contrast),
+      secondary: map.get($accent, default),
+      on-secondary: map.get($accent, default-contrast),
+      error: map.get($warn, default),
+      on-error: map.get($warn, default-contrast),
     ),
   );
 }
diff --git a/src/material/core/option/_m2-option.scss b/src/material/core/option/_m2-option.scss
index fa9b241eefc5..8ebb4265531b 100644
--- a/src/material/core/option/_m2-option.scss
+++ b/src/material/core/option/_m2-option.scss
@@ -1,4 +1,7 @@
 @use '../theming/inspection';
+@use 'sass:map';
+@use '../tokens/m2-utils';
+@use '../tokens/m3-utils';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -7,13 +10,15 @@
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme, $palette-name: primary) {
+@function get-color-tokens($theme, $color-variant) {
   $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));
+  $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
 
   @return (
-    option-selected-state-label-text-color: inspection.get-theme-color($theme, $palette-name),
+    option-selected-state-label-text-color: map.get($system, primary),
     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,
diff --git a/src/material/core/option/_option-theme.scss b/src/material/core/option/_option-theme.scss
index a50928a22776..7ac0eac77881 100644
--- a/src/material/core/option/_option-theme.scss
+++ b/src/material/core/option/_option-theme.scss
@@ -26,15 +26,15 @@
         map.get(m3-option.get-tokens($theme, $color-variant), color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-option.get-color-tokens($theme));
+      @include token-utils.create-token-values-mixed(m2-option.get-color-tokens($theme, primary));
     }
 
     .mat-accent {
-      @include token-utils.create-token-values-mixed(m2-option.get-color-tokens($theme, accent));
+      @include token-utils.create-token-values-mixed(m2-option.get-color-tokens($theme, secondary));
     }
 
     .mat-warn {
-      @include token-utils.create-token-values-mixed(m2-option.get-color-tokens($theme, warn));
+      @include token-utils.create-token-values-mixed(m2-option.get-color-tokens($theme, error));
     }
   }
 }
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 1a967b9e3de1..d088f0930795 100644
--- a/src/material/core/selection/pseudo-checkbox/_m2-pseudo-checkbox.scss
+++ b/src/material/core/selection/pseudo-checkbox/_m2-pseudo-checkbox.scss
@@ -1,6 +1,7 @@
 @use '../../theming/inspection';
-@use '../../tokens/m2-utils';
 @use 'sass:map';
+@use '../../tokens/m2-utils';
+@use '../../tokens/m3-utils';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -9,21 +10,21 @@
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme, $palette-name: accent) {
+@function get-color-tokens($theme, $color-variant) {
   $is-dark: inspection.get-theme-type($theme) == dark;
   $disabled-color: if($is-dark, #686868, #b0b0b0);
   $checkmark-color: inspection.get-theme-color($theme, system, background);
   $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, secondary, $color-variant);
 
   @return (
-    pseudo-checkbox-full-selected-icon-color: inspection.get-theme-color($theme, $palette-name),
+    pseudo-checkbox-full-selected-icon-color: map.get($system, secondary),
     pseudo-checkbox-full-selected-checkmark-color: $checkmark-color,
     pseudo-checkbox-full-unselected-icon-color: map.get($system, on-surface-variant),
     pseudo-checkbox-full-disabled-selected-checkmark-color: $checkmark-color,
     pseudo-checkbox-full-disabled-unselected-icon-color: $disabled-color,
     pseudo-checkbox-full-disabled-selected-icon-color: $disabled-color,
-    pseudo-checkbox-minimal-selected-checkmark-color:
-        inspection.get-theme-color($theme, $palette-name),
+    pseudo-checkbox-minimal-selected-checkmark-color: map.get($system, secondary),
     pseudo-checkbox-minimal-disabled-selected-checkmark-color: if($is-dark, #686868, #b0b0b0),
   );
 }
diff --git a/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss b/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss
index 60b0fe0c41e8..e6e3bd08f253 100644
--- a/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss
+++ b/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss
@@ -48,18 +48,18 @@
     // don't attach to the `mat-*` classes. Also note that this needs to be below `.mat-primary`
     // in order to allow for the color to be overwritten if the checkbox is inside a parent that
     // has `mat-accent` and is placed inside another parent that has `mat-primary`.
-    @include _palette-styles($theme, accent);
+    @include _palette-styles($theme, secondary);
 
     .mat-primary {
       @include _palette-styles($theme, primary);
     }
 
     .mat-accent {
-      @include _palette-styles($theme, accent);
+      @include _palette-styles($theme, secondary);
     }
 
     .mat-warn {
-      @include _palette-styles($theme, warn);
+      @include _palette-styles($theme, error);
     }
   }
 }
diff --git a/src/material/datepicker/_datepicker-theme.scss b/src/material/datepicker/_datepicker-theme.scss
index 246405c17adf..1c114eb41467 100644
--- a/src/material/datepicker/_datepicker-theme.scss
+++ b/src/material/datepicker/_datepicker-theme.scss
@@ -8,6 +8,8 @@
 @use '../core/style/sass-utils';
 @use '../core/typography/typography';
 @use '../button/icon-button-theme';
+@use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
 
 // TODO(crisbeto): these variables aren't used anymore and should be removed.
 $selected-today-box-shadow-width: 1px;
@@ -17,13 +19,15 @@ $today-fade-amount: 0.2;
 $calendar-body-font-size: 13px !default;
 $calendar-weekday-table-font-size: 11px !default;
 
-@mixin _calendar-color($theme, $palette-name) {
-  $palette-color: inspection.get-theme-color($theme, $palette-name);
-  $range-color: m2-datepicker.private-get-range-background-color($palette-color);
+@mixin _calendar-color($theme, $color-variant) {
+  $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
+
+  $range-color: m2-datepicker.private-get-range-background-color(map.get($system, primary));
   $range-tokens: m2-datepicker.get-range-color-tokens($range-color);
   $calendar-tokens: m2-datepicker.private-get-calendar-color-palette-color-tokens(
     $theme,
-    $palette-name
+    $color-variant
   );
 
   @include token-utils.create-token-values-mixed(map.merge($calendar-tokens, $range-tokens));
@@ -56,11 +60,11 @@ $calendar-weekday-table-font-size: 11px !default;
 
     .mat-datepicker-content {
       &.mat-accent {
-        @include _calendar-color($theme, accent);
+        @include _calendar-color($theme, secondary);
       }
 
       &.mat-warn {
-        @include _calendar-color($theme, warn);
+        @include _calendar-color($theme, error);
       }
     }
 
diff --git a/src/material/datepicker/_m2-datepicker.scss b/src/material/datepicker/_m2-datepicker.scss
index 37d934a2a184..9eba5a503753 100644
--- a/src/material/datepicker/_m2-datepicker.scss
+++ b/src/material/datepicker/_m2-datepicker.scss
@@ -48,8 +48,9 @@ $private-default-overlap-color: #a8dab5;
   $preview-outline-color: map.get($system, outline);
   $today-disabled-outline-color: null;
   $is-dark: inspection.get-theme-type($theme) == dark;
+  $system: m2-utils.get-system($theme);
 
-  $primary-color: inspection.get-theme-color($theme, primary);
+  $primary-color: map.get($system, primary);
   $range-tokens: get-range-color-tokens(private-get-range-background-color($primary-color));
   $calendar-tokens: private-get-calendar-color-palette-color-tokens($theme, primary);
   $toggle-tokens: private-get-toggle-color-palette-color-tokens($theme, primary);
@@ -137,11 +138,13 @@ $private-default-overlap-color: #a8dab5;
   );
 }
 
-@function private-get-calendar-color-palette-color-tokens($theme, $palette-name) {
+@function private-get-calendar-color-palette-color-tokens($theme, $color-variant) {
   $system: m2-utils.get-system($theme);
-  $palette-color: inspection.get-theme-color($theme, $palette-name);
-  $default-contrast: inspection.get-theme-color($theme, $palette-name, default-contrast);
-  $active-background-color: inspection.get-theme-color($theme, $palette-name, 0.3);
+  $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
+
+  $palette-color: map.get($system, primary);
+  $default-contrast: map.get($system, on-primary);
+  $active-background-color: m3-utils.color-with-opacity(map.get($system, primary), 30%);
   $active-disabled-color: null;
 
   @if (meta.type-of($palette-color) == color) {
diff --git a/src/material/form-field/_form-field-theme.scss b/src/material/form-field/_form-field-theme.scss
index eb6acd83fde9..a06e14a5947e 100644
--- a/src/material/form-field/_form-field-theme.scss
+++ b/src/material/form-field/_form-field-theme.scss
@@ -34,13 +34,13 @@
 
     .mat-mdc-form-field.mat-accent {
       @include token-utils.create-token-values-mixed(
-          m2-form-field.private-get-color-palette-color-tokens($theme, accent)
+          m2-form-field.private-get-color-palette-color-tokens($theme, secondary)
       );
     }
 
     .mat-mdc-form-field.mat-warn {
       @include token-utils.create-token-values-mixed(
-          m2-form-field.private-get-color-palette-color-tokens($theme, warn)
+          m2-form-field.private-get-color-palette-color-tokens($theme, error)
       );
     }
   }
diff --git a/src/material/form-field/_m2-form-field.scss b/src/material/form-field/_m2-form-field.scss
index 35bd5a13be1f..f410fb4caa32 100644
--- a/src/material/form-field/_m2-form-field.scss
+++ b/src/material/form-field/_m2-form-field.scss
@@ -27,7 +27,6 @@
 
   $is-dark: inspection.get-theme-type($theme) == dark;
   $surface: map.get($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);
   $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
@@ -79,19 +78,19 @@
     form-field-filled-disabled-input-text-color: $disabled,
     form-field-filled-input-text-placeholder-color:
         inspection.get-theme-color($theme, foreground, base, 0.6),
-    form-field-filled-error-hover-label-text-color: $warn-color,
-    form-field-filled-error-focus-label-text-color: $warn-color,
-    form-field-filled-error-label-text-color: $warn-color,
-    form-field-filled-error-caret-color: $warn-color,
+    form-field-filled-error-hover-label-text-color: map.get($system, error),
+    form-field-filled-error-focus-label-text-color: map.get($system, error),
+    form-field-filled-error-label-text-color: map.get($system, error),
+    form-field-filled-error-caret-color: map.get($system, error),
     form-field-filled-active-indicator-color:
         inspection.get-theme-color($theme, foreground, base, 0.42),
     form-field-filled-disabled-active-indicator-color:
         inspection.get-theme-color($theme, foreground, base, 0.06),
     form-field-filled-hover-active-indicator-color:
         inspection.get-theme-color($theme, system, on-surface),
-    form-field-filled-error-active-indicator-color: $warn-color,
-    form-field-filled-error-focus-active-indicator-color: $warn-color,
-    form-field-filled-error-hover-active-indicator-color: $warn-color,
+    form-field-filled-error-active-indicator-color: map.get($system, error),
+    form-field-filled-error-focus-active-indicator-color: map.get($system, error),
+    form-field-filled-error-hover-active-indicator-color: map.get($system, error),
     form-field-outlined-label-text-color:
         inspection.get-theme-color($theme, foreground, base, 0.6),
     form-field-outlined-hover-label-text-color:
@@ -102,18 +101,18 @@
     form-field-outlined-disabled-input-text-color: $disabled,
     form-field-outlined-input-text-placeholder-color:
         inspection.get-theme-color($theme, foreground, base, 0.6),
-    form-field-outlined-error-caret-color: $warn-color,
-    form-field-outlined-error-focus-label-text-color: $warn-color,
-    form-field-outlined-error-label-text-color: $warn-color,
-    form-field-outlined-error-hover-label-text-color: $warn-color,
+    form-field-outlined-error-caret-color: map.get($system, error),
+    form-field-outlined-error-focus-label-text-color: map.get($system, error),
+    form-field-outlined-error-label-text-color: map.get($system, error),
+    form-field-outlined-error-hover-label-text-color: map.get($system, error),
     form-field-outlined-outline-color: inspection.get-theme-color($theme, foreground, base, 0.38),
     form-field-outlined-disabled-outline-color:
         inspection.get-theme-color($theme, foreground, base, 0.06),
     form-field-outlined-hover-outline-color:
         inspection.get-theme-color($theme, system, on-surface),
-    form-field-outlined-error-focus-outline-color: $warn-color,
-    form-field-outlined-error-hover-outline-color: $warn-color,
-    form-field-outlined-error-outline-color: $warn-color,
+    form-field-outlined-error-focus-outline-color: map.get($system, error),
+    form-field-outlined-error-hover-outline-color: map.get($system, error),
+    form-field-outlined-error-outline-color: map.get($system, error),
   ));
 }
 
@@ -125,18 +124,21 @@
 }
 
 // Generates the mapping for the properties that change based on the form field color.
-@function private-get-color-palette-color-tokens($theme, $palette-name) {
-  $palette-color: inspection.get-theme-color($theme, $palette-name);
-  $text-color: inspection.get-theme-color($theme, $palette-name, 0.87);
+@function private-get-color-palette-color-tokens($theme, $color-variant) {
+  $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
 
   @return (
-    form-field-focus-select-arrow-color: $text-color,
-    form-field-filled-caret-color: $palette-color,
-    form-field-filled-focus-active-indicator-color: $palette-color,
-    form-field-filled-focus-label-text-color: $text-color,
-    form-field-outlined-caret-color: $palette-color,
-    form-field-outlined-focus-outline-color: $palette-color,
-    form-field-outlined-focus-label-text-color: $text-color,
+    form-field-focus-select-arrow-color:
+        m3-utils.color-with-opacity(map.get($system, primary), 87%),
+    form-field-filled-caret-color: map.get($system, primary),
+    form-field-filled-focus-active-indicator-color: map.get($system, primary),
+    form-field-filled-focus-label-text-color:
+        m3-utils.color-with-opacity(map.get($system, primary), 87%),
+    form-field-outlined-caret-color: map.get($system, primary),
+    form-field-outlined-focus-outline-color: map.get($system, primary),
+    form-field-outlined-focus-label-text-color:
+        m3-utils.color-with-opacity(map.get($system, primary), 87%),
   );
 }
 
diff --git a/src/material/list/_list-theme.scss b/src/material/list/_list-theme.scss
index 21fae77b0acb..ea1e24ca58e6 100644
--- a/src/material/list/_list-theme.scss
+++ b/src/material/list/_list-theme.scss
@@ -37,25 +37,30 @@
     .mat-accent {
       .mdc-list-item__start,
       .mdc-list-item__end {
-        @include token-utils.create-token-values-mixed(m2-radio.get-color-tokens($theme, accent));
+        @include token-utils.create-token-values-mixed(
+            m2-radio.get-color-tokens($theme, secondary));
       }
     }
 
     .mat-warn {
       .mdc-list-item__start,
       .mdc-list-item__end {
-        @include token-utils.create-token-values-mixed(m2-radio.get-color-tokens($theme, warn));
+        @include token-utils.create-token-values-mixed(
+            m2-radio.get-color-tokens($theme, error));
       }
     }
 
     .mat-mdc-list-option {
-      @include token-utils.create-token-values-mixed(m2-checkbox.get-color-tokens($theme, primary));
+      @include token-utils.create-token-values-mixed(
+          m2-checkbox.get-color-tokens($theme, primary));
     }
     .mat-mdc-list-option.mat-accent {
-      @include token-utils.create-token-values-mixed(m2-checkbox.get-color-tokens($theme, accent));
+      @include token-utils.create-token-values-mixed(
+          m2-checkbox.get-color-tokens($theme, secondary));
     }
     .mat-mdc-list-option.mat-warn {
-      @include token-utils.create-token-values-mixed(m2-checkbox.get-color-tokens($theme, warn));
+      @include token-utils.create-token-values-mixed(
+          m2-checkbox.get-color-tokens($theme, error));
     }
 
     // There is no token for activated color on nav list.
diff --git a/src/material/progress-bar/_m2-progress-bar.scss b/src/material/progress-bar/_m2-progress-bar.scss
index fe9fb213013f..8db4d77eaed9 100644
--- a/src/material/progress-bar/_m2-progress-bar.scss
+++ b/src/material/progress-bar/_m2-progress-bar.scss
@@ -1,6 +1,8 @@
-@use '../core/theming/inspection';
 @use 'sass:color';
 @use 'sass:meta';
+@use 'sass:map';
+@use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -21,14 +23,16 @@
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme, $palette-name: primary) {
-  $palette-color: inspection.get-theme-color($theme, $palette-name);
+@function get-color-tokens($theme, $color-variant) {
+  $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
+
   @return (
-    progress-bar-active-indicator-color: $palette-color,
+    progress-bar-active-indicator-color: map.get($system, primary),
     progress-bar-track-color: if(
-        meta.type-of($palette-color) == color,
-        color.adjust($palette-color, $alpha: -0.75),
-        $palette-color
+        meta.type-of(map.get($system, primary)) == color,
+        color.adjust(map.get($system, primary), $alpha: -0.75),
+        map.get($system, primary)
     )
   );
 }
diff --git a/src/material/progress-bar/_progress-bar-theme.scss b/src/material/progress-bar/_progress-bar-theme.scss
index f763dc2eccd1..c7ab6d1aa558 100644
--- a/src/material/progress-bar/_progress-bar-theme.scss
+++ b/src/material/progress-bar/_progress-bar-theme.scss
@@ -39,11 +39,11 @@
       @include _palette-styles($theme, primary);
 
       &.mat-accent {
-        @include _palette-styles($theme, accent);
+        @include _palette-styles($theme, secondary);
       }
 
       &.mat-warn {
-        @include _palette-styles($theme, warn);
+        @include _palette-styles($theme, error);
       }
     }
   }
diff --git a/src/material/progress-spinner/_m2-progress-spinner.scss b/src/material/progress-spinner/_m2-progress-spinner.scss
index 52becf6a56f4..c5360f828ac6 100644
--- a/src/material/progress-spinner/_m2-progress-spinner.scss
+++ b/src/material/progress-spinner/_m2-progress-spinner.scss
@@ -1,4 +1,6 @@
-@use '../core/theming/inspection';
+@use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
+@use 'sass:map';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -14,9 +16,12 @@
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme, $palette-name: primary) {
+@function get-color-tokens($theme, $color-variant) {
+  $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
+
   @return (
-    progress-spinner-active-indicator-color: inspection.get-theme-color($theme, $palette-name)
+    progress-spinner-active-indicator-color: map.get($system, primary)
   );
 }
 
diff --git a/src/material/progress-spinner/_progress-spinner-theme.scss b/src/material/progress-spinner/_progress-spinner-theme.scss
index 74a9e49c0a2d..8489bfc7c72c 100644
--- a/src/material/progress-spinner/_progress-spinner-theme.scss
+++ b/src/material/progress-spinner/_progress-spinner-theme.scss
@@ -33,12 +33,12 @@
 
       .mat-accent {
         @include token-utils.create-token-values-mixed(
-            m2-progress-spinner.get-color-tokens($theme, accent));
+            m2-progress-spinner.get-color-tokens($theme, secondary));
       }
 
       .mat-warn {
         @include token-utils.create-token-values-mixed(
-            m2-progress-spinner.get-color-tokens($theme, warn));
+            m2-progress-spinner.get-color-tokens($theme, error));
       }
     }
   }
diff --git a/src/material/radio/_m2-radio.scss b/src/material/radio/_m2-radio.scss
index ac59a6ae5652..68d6f01c29cd 100644
--- a/src/material/radio/_m2-radio.scss
+++ b/src/material/radio/_m2-radio.scss
@@ -18,23 +18,24 @@
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme, $palette-name: accent) {
+@function get-color-tokens($theme, $color-variant) {
   $system: m2-utils.get-system($theme);
   $is-dark: inspection.get-theme-type($theme) == dark;
-  $palette-color: inspection.get-theme-color($theme, $palette-name, default);
+  $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, secondary, $color-variant);
   $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
 
   @return (
-    radio-checked-ripple-color: inspection.get-theme-color($theme, $palette-name, default),
+    radio-checked-ripple-color: map.get($system, secondary),
     radio-disabled-label-color: $disabled,
     radio-disabled-selected-icon-color: map.get($system, on-surface),
     radio-disabled-unselected-icon-color: map.get($system, on-surface),
     radio-label-text-color: map.get($system, on-surface),
     radio-ripple-color: map.get($system, on-surface),
-    radio-selected-focus-icon-color: $palette-color,
-    radio-selected-hover-icon-color: $palette-color,
-    radio-selected-icon-color: $palette-color,
-    radio-selected-pressed-icon-color: $palette-color,
+    radio-selected-focus-icon-color: map.get($system, secondary),
+    radio-selected-hover-icon-color: map.get($system, secondary),
+    radio-selected-icon-color: map.get($system, secondary),
+    radio-selected-pressed-icon-color: map.get($system, secondary),
     radio-unselected-focus-icon-color: map.get($system, on-surface),
     radio-unselected-hover-icon-color: map.get($system, on-surface),
     radio-unselected-icon-color: map.get($system, on-surface-variant),
diff --git a/src/material/radio/_radio-theme.scss b/src/material/radio/_radio-theme.scss
index fffcba304ba1..44eed587434b 100644
--- a/src/material/radio/_radio-theme.scss
+++ b/src/material/radio/_radio-theme.scss
@@ -30,15 +30,18 @@
   } @else {
     .mat-mdc-radio-button {
       &.mat-primary {
-        @include token-utils.create-token-values-mixed(m2-radio.get-color-tokens($theme, primary));
+        @include token-utils.create-token-values-mixed(
+            m2-radio.get-color-tokens($theme, primary));
       }
 
       &.mat-accent {
-        @include token-utils.create-token-values-mixed(m2-radio.get-color-tokens($theme));
+        @include token-utils.create-token-values-mixed(
+            m2-radio.get-color-tokens($theme, secondary));
       }
 
       &.mat-warn {
-        @include token-utils.create-token-values-mixed(m2-radio.get-color-tokens($theme, warn));
+        @include token-utils.create-token-values-mixed(
+            m2-radio.get-color-tokens($theme, error));
       }
     }
   }
diff --git a/src/material/stepper/_m2-stepper.scss b/src/material/stepper/_m2-stepper.scss
index c09fde5dacc2..3842afaf100c 100644
--- a/src/material/stepper/_m2-stepper.scss
+++ b/src/material/stepper/_m2-stepper.scss
@@ -67,17 +67,17 @@
 }
 
 // Generates the tokens used to theme the stepper based on a palette.
-@function private-get-color-palette-color-tokens($theme, $palette-name) {
-  $active-state-foreground: inspection.get-theme-color($theme, $palette-name, default-contrast);
-  $active-state-background: inspection.get-theme-color($theme, $palette-name);
+@function private-get-color-palette-color-tokens($theme, $color-variant) {
+  $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
 
   @return (
-    stepper-header-icon-foreground-color: $active-state-foreground,
-    stepper-header-selected-state-icon-background-color: $active-state-background,
-    stepper-header-selected-state-icon-foreground-color: $active-state-foreground,
-    stepper-header-done-state-icon-background-color: $active-state-background,
-    stepper-header-done-state-icon-foreground-color: $active-state-foreground,
-    stepper-header-edit-state-icon-background-color: $active-state-background,
-    stepper-header-edit-state-icon-foreground-color: $active-state-foreground,
+    stepper-header-icon-foreground-color: map.get($system, on-primary),
+    stepper-header-selected-state-icon-background-color: map.get($system, primary),
+    stepper-header-selected-state-icon-foreground-color: map.get($system, on-primary),
+    stepper-header-done-state-icon-background-color: map.get($system, primary),
+    stepper-header-done-state-icon-foreground-color: map.get($system, on-primary),
+    stepper-header-edit-state-icon-background-color: map.get($system, primary),
+    stepper-header-edit-state-icon-foreground-color: map.get($system, on-primary),
   );
 }
diff --git a/src/material/stepper/_stepper-theme.scss b/src/material/stepper/_stepper-theme.scss
index b6d59cf63a26..317b53da2eee 100644
--- a/src/material/stepper/_stepper-theme.scss
+++ b/src/material/stepper/_stepper-theme.scss
@@ -30,12 +30,12 @@
 
       .mat-step-header.mat-accent {
         @include token-utils.create-token-values-mixed(
-          m2-stepper.private-get-color-palette-color-tokens($theme, accent));
+          m2-stepper.private-get-color-palette-color-tokens($theme, secondary));
       }
 
       .mat-step-header.mat-warn {
         @include token-utils.create-token-values-mixed(
-          m2-stepper.private-get-color-palette-color-tokens($theme, warn));
+          m2-stepper.private-get-color-palette-color-tokens($theme, error));
       }
     }
   }
diff --git a/src/material/tabs/_m2-tabs.scss b/src/material/tabs/_m2-tabs.scss
index 6691ca0caf82..870c5a20345f 100644
--- a/src/material/tabs/_m2-tabs.scss
+++ b/src/material/tabs/_m2-tabs.scss
@@ -1,6 +1,8 @@
 @use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -24,11 +26,11 @@
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme, $palette-name: primary, $exclude: ()) {
+@function get-color-tokens($theme, $color-variant, $exclude: ()) {
+  $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
   $is-dark: inspection.get-theme-type($theme) == dark;
   $inactive-label-text-color: inspection.get-theme-color($theme, foreground, base, 0.6);
-  $active-label-text-color: inspection.get-theme-color($theme, $palette-name, default);
-  $ripple-color: inspection.get-theme-color($theme, $palette-name, default);
 
   $tokens: (
     tab-disabled-ripple-color: inspection.get-theme-color($theme, foreground, disabled),
@@ -36,20 +38,20 @@
 
     // Note: MDC has equivalents of these tokens, but they lead to much higher selector specificity.
     tab-inactive-label-text-color: $inactive-label-text-color,
-    tab-active-label-text-color: $active-label-text-color,
+    tab-active-label-text-color: map.get($system, primary),
 
     // Tokens needed to implement the gmat styles. Externally they don't change.
-    tab-active-ripple-color: $ripple-color,
-    tab-inactive-ripple-color: $ripple-color,
+    tab-active-ripple-color: map.get($system, primary),
+    tab-inactive-ripple-color: map.get($system, primary),
     tab-inactive-focus-label-text-color: $inactive-label-text-color,
     tab-inactive-hover-label-text-color: $inactive-label-text-color,
-    tab-active-focus-label-text-color: $active-label-text-color,
-    tab-active-hover-label-text-color: $active-label-text-color,
-    tab-active-focus-indicator-color: $active-label-text-color,
-    tab-active-hover-indicator-color: $active-label-text-color,
-    tab-active-indicator-color: inspection.get-theme-color($theme, $palette-name, default),
-    tab-background-color: inspection.get-theme-color($theme, $palette-name, default),
-    tab-foreground-color: inspection.get-theme-color($theme, $palette-name, default-contrast),
+    tab-active-focus-label-text-color: map.get($system, primary),
+    tab-active-hover-label-text-color: map.get($system, primary),
+    tab-active-focus-indicator-color: map.get($system, primary),
+    tab-active-hover-indicator-color: map.get($system, primary),
+    tab-active-indicator-color: map.get($system, primary),
+    tab-background-color: map.get($system, primary),
+    tab-foreground-color: map.get($system, on-primary),
   );
 
   @each $token in $exclude {
diff --git a/src/material/tabs/_tabs-theme.scss b/src/material/tabs/_tabs-theme.scss
index d488b4b1f1e9..e4382e2fb25d 100644
--- a/src/material/tabs/_tabs-theme.scss
+++ b/src/material/tabs/_tabs-theme.scss
@@ -36,13 +36,13 @@
 
       &.mat-accent {
         @include token-utils.create-token-values-mixed(
-          m2-tabs.get-color-tokens($theme, accent,
+          m2-tabs.get-color-tokens($theme, secondary,
             $exclude: (tab-background-color, tab-foreground-color)));
       }
 
       &.mat-warn {
         @include token-utils.create-token-values-mixed(
-          m2-tabs.get-color-tokens($theme, warn,
+          m2-tabs.get-color-tokens($theme, error,
             $exclude: (tab-background-color, tab-foreground-color)));
       }
 
@@ -55,7 +55,7 @@
       }
 
       &.mat-background-accent {
-        $tokens: m2-tabs.get-color-tokens($theme, accent);
+        $tokens: m2-tabs.get-color-tokens($theme, secondary);
         @include token-utils.create-token-values-mixed((
           tab-background-color: map.get($tokens, background-color),
           tab-foreground-color: map.get($tokens, foreground-color),
@@ -63,7 +63,7 @@
       }
 
       &.mat-background-warn {
-        $tokens: m2-tabs.get-color-tokens($theme, warn);
+        $tokens: m2-tabs.get-color-tokens($theme, error);
         @include token-utils.create-token-values-mixed((
           tab-background-color: map.get($tokens, background-color),
           tab-foreground-color: map.get($tokens, foreground-color),