diff --git a/src/material/button-toggle/_button-toggle-theme.scss b/src/material/button-toggle/_button-toggle-theme.scss
index c5ef7186270f..a7709fe3bb1d 100644
--- a/src/material/button-toggle/_button-toggle-theme.scss
+++ b/src/material/button-toggle/_button-toggle-theme.scss
@@ -15,7 +15,8 @@
     @include token-utils.create-token-values(map.get(m3-button-toggle.get-tokens($theme), base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-button-toggle.get-unthemable-tokens());
+      @include token-utils.create-token-values-mixed(
+          m2-button-toggle.get-unthemable-tokens($theme));
     }
   }
 }
diff --git a/src/material/button-toggle/_m2-button-toggle.scss b/src/material/button-toggle/_m2-button-toggle.scss
index 526118d149f5..5f40821721e5 100644
--- a/src/material/button-toggle/_m2-button-toggle.scss
+++ b/src/material/button-toggle/_m2-button-toggle.scss
@@ -3,13 +3,15 @@
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/style/sass-utils';
+@use '../core/tokens/m2-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.
-@function get-unthemable-tokens() {
+@function get-unthemable-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    button-toggle-focus-state-layer-opacity: 0.12,
-    button-toggle-hover-state-layer-opacity: 0.04,
+    button-toggle-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+    button-toggle-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
     button-toggle-legacy-focus-state-layer-opacity: 1,
     button-toggle-legacy-height: 36px,
     button-toggle-legacy-shape: 2px,
diff --git a/src/material/button/_m2-button.scss b/src/material/button/_m2-button.scss
index 280d1aa75ac7..dd4ea9ba99bf 100644
--- a/src/material/button/_m2-button.scss
+++ b/src/material/button/_m2-button.scss
@@ -42,6 +42,7 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   $is-dark: inspection.get-theme-type($theme) == dark;
 
   // Ideally we would derive all values directly from the theme, but it causes a lot of regressions
@@ -52,16 +53,16 @@
   );
 
   @return (
-    button-filled-container-color: inspection.get-theme-color($theme, system, surface),
+    button-filled-container-color: map.get($system, surface),
     button-filled-disabled-container-color:
         inspection.get-theme-color($theme, foreground, disabled-button, 0.12),
     button-filled-disabled-label-text-color:
         inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
     button-filled-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-    button-filled-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    button-filled-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
+    button-filled-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+    button-filled-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
     button-filled-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
-    button-filled-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    button-filled-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
     button-filled-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
     button-filled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     button-outlined-disabled-label-text-color:
@@ -69,45 +70,47 @@
     button-outlined-disabled-outline-color: $outline,
     button-outlined-disabled-state-layer-color:
         inspection.get-theme-color($theme, foreground, base),
-    button-outlined-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    button-outlined-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
+    button-outlined-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+    button-outlined-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
     button-outlined-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
     button-outlined-outline-color: $outline,
-    button-outlined-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    button-outlined-pressed-state-layer-opacity:
+        map.get($system, pressed-state-layer-opacity),
     button-outlined-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
     button-outlined-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-    button-protected-container-color: inspection.get-theme-color($theme, system, surface),
+    button-protected-container-color: map.get($system, surface),
     button-protected-disabled-container-color:
         inspection.get-theme-color($theme, foreground, disabled-button, 0.12),
     button-protected-disabled-label-text-color:
         inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
     button-protected-disabled-state-layer-color:
         inspection.get-theme-color($theme, foreground, base),
-    button-protected-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    button-protected-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
+    button-protected-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+    button-protected-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
     button-protected-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
-    button-protected-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    button-protected-pressed-state-layer-opacity:
+        map.get($system, pressed-state-layer-opacity),
     button-protected-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
     button-protected-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     button-text-disabled-label-text-color:
         inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
     button-text-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-    button-text-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    button-text-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
+    button-text-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+    button-text-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
     button-text-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
-    button-text-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    button-text-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
     button-text-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
     button-text-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-    button-tonal-container-color: inspection.get-theme-color($theme, system, surface),
+    button-tonal-container-color: map.get($system, surface),
     button-tonal-disabled-container-color:
         inspection.get-theme-color($theme, foreground, disabled-button, 0.12),
     button-tonal-disabled-label-text-color:
         inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
     button-tonal-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-    button-tonal-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    button-tonal-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
+    button-tonal-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+    button-tonal-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
     button-tonal-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
-    button-tonal-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    button-tonal-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
     button-tonal-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
     button-tonal-state-layer-color: inspection.get-theme-color($theme, foreground, base),
   );
diff --git a/src/material/button/_m2-fab.scss b/src/material/button/_m2-fab.scss
index 485641f9eb90..7b7b9a5184cb 100644
--- a/src/material/button/_m2-fab.scss
+++ b/src/material/button/_m2-fab.scss
@@ -1,3 +1,5 @@
+@use 'sass:map';
+@use '../core/tokens/m2-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/style/elevation';
@@ -27,30 +29,31 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   $is-dark: inspection.get-theme-type($theme) == dark;
 
   @return (
-    fab-container-color: inspection.get-theme-color($theme, system, surface),
+    fab-container-color: map.get($system, surface),
     fab-disabled-state-container-color:
         inspection.get-theme-color($theme, background, disabled-button, 0.12),
     fab-disabled-state-foreground-color:
         inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
     fab-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-    fab-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    fab-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
     fab-foreground-color: inspection.get-theme-color($theme, foreground, base),
-    fab-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
-    fab-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    fab-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+    fab-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
     fab-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
-    fab-small-container-color: inspection.get-theme-color($theme, system, surface),
+    fab-small-container-color: map.get($system, surface),
     fab-small-disabled-state-container-color:
         inspection.get-theme-color($theme, background, disabled-button, 0.12),
     fab-small-disabled-state-foreground-color:
         inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
     fab-small-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-    fab-small-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    fab-small-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
     fab-small-foreground-color: inspection.get-theme-color($theme, foreground, base),
-    fab-small-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
-    fab-small-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    fab-small-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+    fab-small-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
     fab-small-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
     fab-small-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     fab-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 16d133944146..08384398995f 100644
--- a/src/material/button/_m2-icon-button.scss
+++ b/src/material/button/_m2-icon-button.scss
@@ -2,6 +2,7 @@
 @use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/tokens/m2-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.
@@ -13,15 +14,16 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   $is-dark: inspection.get-theme-type($theme) == dark;
 
   @return (
     icon-button-disabled-icon-color: if($is-dark, rgba(#fff, 0.5), rgba(#000, 0.38)),
     icon-button-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-    icon-button-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    icon-button-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
+    icon-button-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+    icon-button-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
     icon-button-icon-color: inherit,
-    icon-button-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    icon-button-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
     icon-button-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
     icon-button-state-layer-color: inspection.get-theme-color($theme, foreground, base),
   );
diff --git a/src/material/checkbox/_checkbox-theme.scss b/src/material/checkbox/_checkbox-theme.scss
index 64990aa934de..d0217644a547 100644
--- a/src/material/checkbox/_checkbox-theme.scss
+++ b/src/material/checkbox/_checkbox-theme.scss
@@ -15,7 +15,7 @@
     @include token-utils.create-token-values(map.get(m3-checkbox.get-tokens($theme), base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-checkbox.get-unthemable-tokens());
+      @include token-utils.create-token-values-mixed(m2-checkbox.get-unthemable-tokens($theme));
     }
   }
 }
diff --git a/src/material/checkbox/_m2-checkbox.scss b/src/material/checkbox/_m2-checkbox.scss
index a04d7b5f958b..2dced64c237b 100644
--- a/src/material/checkbox/_m2-checkbox.scss
+++ b/src/material/checkbox/_m2-checkbox.scss
@@ -8,20 +8,24 @@
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
-@function get-unthemable-tokens() {
+@function get-unthemable-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
   @return (
     checkbox-disabled-selected-checkmark-color: #fff,
-    checkbox-selected-focus-state-layer-opacity: 0.16,
-    checkbox-selected-hover-state-layer-opacity: 0.04,
-    checkbox-selected-pressed-state-layer-opacity: 0.16,
-    checkbox-unselected-focus-state-layer-opacity: 0.16,
-    checkbox-unselected-hover-state-layer-opacity: 0.04,
-    checkbox-unselected-pressed-state-layer-opacity: 0.16,
+    checkbox-selected-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+    checkbox-selected-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+    checkbox-selected-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
+    checkbox-unselected-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+    checkbox-unselected-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+    checkbox-unselected-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
   );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme, $palette-name: accent, $exclude: ()) {
+  $system: m2-utils.get-system($theme);
+
   $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);
@@ -47,7 +51,7 @@
 
   $tokens: (
     checkbox-disabled-label-color: inspection.get-theme-color($theme, foreground, disabled-text),
-    checkbox-label-text-color: inspection.get-theme-color($theme, system, on-surface),
+    checkbox-label-text-color: map.get($system, on-surface),
     checkbox-disabled-selected-icon-color: $disabled-color,
     checkbox-disabled-unselected-icon-color: $disabled-color,
     checkbox-selected-checkmark-color: $selected-checkmark-color,
diff --git a/src/material/chips/_chips-theme.scss b/src/material/chips/_chips-theme.scss
index a5a12536f36f..4a47b4828af1 100644
--- a/src/material/chips/_chips-theme.scss
+++ b/src/material/chips/_chips-theme.scss
@@ -15,7 +15,7 @@
     @include token-utils.create-token-values(map.get(m3-chip.get-tokens($theme), base));
   } @else {
     .mat-mdc-standard-chip {
-      @include token-utils.create-token-values-mixed(m2-chip.get-unthemable-tokens());
+      @include token-utils.create-token-values-mixed(m2-chip.get-unthemable-tokens($theme));
     }
   }
 }
diff --git a/src/material/chips/_m2-chip.scss b/src/material/chips/_m2-chip.scss
index 07a66024e2e2..fe7dadceb8ab 100644
--- a/src/material/chips/_m2-chip.scss
+++ b/src/material/chips/_m2-chip.scss
@@ -4,20 +4,23 @@
 @use '../core/theming/inspection';
 @use '../core/m2/palette' as m2-palette;
 @use '../core/theming/theming';
+@use '../core/tokens/m2-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.
-@function get-unthemable-tokens() {
+@function get-unthemable-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
   @return (
     chip-container-shape-radius: 16px,
     chip-disabled-container-opacity: 0.4,
     chip-disabled-outline-color: transparent,
     chip-flat-selected-outline-width: 0,
     chip-focus-outline-color: transparent,
-    chip-hover-state-layer-opacity: 0.04,
+    chip-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
     chip-outline-color: transparent,
     chip-outline-width: 0,
-    chip-selected-hover-state-layer-opacity: 0.04,
+    chip-selected-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
     chip-selected-trailing-action-state-layer-color: transparent,
     chip-trailing-action-focus-opacity: 1,
     chip-trailing-action-focus-state-layer-opacity: 0,
@@ -35,11 +38,11 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme, $palette-name: null) {
+  $system: m2-utils.get-system($theme);
   $foreground: null;
   $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, system, surface);
+  $surface: map.get($system, surface);
 
   @if $palette-name == null {
     $is-dark: inspection.get-theme-type($theme) == dark;
@@ -47,7 +50,7 @@
     $grey-900: map.get(m2-palette.$grey-palette, 900);
     $foreground: if($is-dark, $grey-50, $grey-900);
 
-    $surface: inspection.get-theme-color($theme, system, surface);
+    $surface: map.get($system, surface);
     $background: if(
         meta.type-of($state-layer-color) == color and meta.type-of($surface) == color,
         color.mix($state-layer-color, $surface, 12%),
@@ -65,13 +68,13 @@
     chip-elevated-selected-container-color: $background,
     chip-flat-disabled-selected-container-color: $background,
     chip-focus-state-layer-color: $state-layer-color,
-    chip-focus-state-layer-opacity: $state-layer-opacity,
+    chip-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
     chip-hover-state-layer-color: $state-layer-color,
     chip-label-text-color: $foreground,
     chip-selected-disabled-trailing-icon-color: $foreground,
-    chip-selected-focus-state-layer-color: $state-layer-color,
-    chip-selected-focus-state-layer-opacity: $state-layer-opacity,
-    chip-selected-hover-state-layer-color: $state-layer-color,
+    chip-selected-focus-state-layer-color: map.get($system, focus-state-layer-opacity),
+    chip-selected-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+    chip-selected-hover-state-layer-color: map.get($system, hover-state-layer-opacity),
     chip-selected-label-text-color: $foreground,
     chip-selected-trailing-icon-color: $foreground,
     chip-with-icon-disabled-icon-color: $foreground,
diff --git a/src/material/core/m2/_theming.scss b/src/material/core/m2/_theming.scss
index 3b3e99e670d3..dc930eac9cb7 100644
--- a/src/material/core/m2/_theming.scss
+++ b/src/material/core/m2/_theming.scss
@@ -125,6 +125,9 @@
       surface: white,
       on-surface: rgba(black, 0.87),
       outline: rgba(black, 0.12),
+      hover-state-layer-opacity: 0.04,
+      focus-state-layer-opacity: 0.12,
+      pressed-state-layer-opacity: 0.12,
     ),
   );
 }
@@ -143,6 +146,9 @@
       surface: map.get(palette.$grey-palette, 800),
       on-surface: white,
       outline: rgba(white, 0.12),
+      hover-state-layer-opacity: 0.04,
+      focus-state-layer-opacity: 0.12,
+      pressed-state-layer-opacity: 0.12,
     ),
   );
 }
diff --git a/src/material/core/tokens/_m2-utils.scss b/src/material/core/tokens/_m2-utils.scss
index f2c00ddf6422..40183109ac56 100644
--- a/src/material/core/tokens/_m2-utils.scss
+++ b/src/material/core/tokens/_m2-utils.scss
@@ -1,10 +1,26 @@
 @use 'sass:color';
 @use 'sass:math';
 @use 'sass:meta';
+@use 'sass:map';
 
 // Indicates whether we're building internally. Used for backwards compatibility.
 $private-is-internal-build: false;
 
+// Gets the theme's system values as a flat map.
+@function get-system($theme) {
+  $system: map.get($theme, _mat-theming-internals-do-not-access, m2-config, color, system);
+  @if $system {
+    @return $system;
+  }
+
+  $system: map.get($theme, system);
+  @if $system {
+    @return $system;
+  }
+
+  @return ();
+}
+
 /// Inherited function from MDC that computes which contrast tone to use on top of a color.
 /// This is used only in a narrow set of use cases when generating M2 button tokens to maintain
 /// backwards compatibility.
diff --git a/src/material/form-field/_m2-form-field.scss b/src/material/form-field/_m2-form-field.scss
index 0e4b24ae292e..f5cac71a68ed 100644
--- a/src/material/form-field/_m2-form-field.scss
+++ b/src/material/form-field/_m2-form-field.scss
@@ -23,8 +23,10 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
   $is-dark: inspection.get-theme-type($theme) == dark;
-  $surface: inspection.get-theme-color($theme, system, surface);
+  $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);
@@ -74,8 +76,8 @@
         inspection.get-theme-color($theme, foreground, icon, 0.54),
     form-field-disabled-select-arrow-color:
         inspection.get-theme-color($theme, foreground, icon, 0.38),
-    form-field-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
-    form-field-focus-state-layer-opacity: if($is-dark, 0.24, 0.08),
+    form-field-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+    form-field-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
     form-field-filled-container-color: _variable-safe-mix($on-surface, $surface, 4%),
     form-field-filled-disabled-container-color: _variable-safe-mix($on-surface, $surface, 2%),
     form-field-filled-label-text-color: sass-utils.safe-color-change($text-color-base, $alpha: 0.6),
diff --git a/src/material/list/_m2-list.scss b/src/material/list/_m2-list.scss
index e9150c6d057e..f18acf22953b 100644
--- a/src/material/list/_m2-list.scss
+++ b/src/material/list/_m2-list.scss
@@ -1,6 +1,7 @@
 @use '../core/style/sass-utils';
 @use '../core/theming/inspection';
 @use 'sass:map';
+@use '../core/tokens/m2-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.
@@ -26,9 +27,11 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($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, system, on-surface);
+  $foreground-text: map.get($system, on-surface);
   $foreground-secondary-text: inspection.get-theme-color($theme, foreground, secondary-text);
   $foreground-hint-text: inspection.get-theme-color($theme, foreground, hint-text);
   $text-icon-on-background: sass-utils.safe-color-change(
@@ -47,11 +50,11 @@
     list-list-item-hover-label-text-color: $foreground-text,
     list-list-item-hover-leading-icon-color: $text-icon-on-background,
     list-list-item-hover-state-layer-color: $foreground-base,
-    list-list-item-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
+    list-list-item-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
     list-list-item-hover-trailing-icon-color: $text-icon-on-background,
     list-list-item-focus-label-text-color: $foreground-text,
     list-list-item-focus-state-layer-color: $foreground-base,
-    list-list-item-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    list-list-item-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
   );
 }
 
diff --git a/src/material/slide-toggle/_m2-slide-toggle.scss b/src/material/slide-toggle/_m2-slide-toggle.scss
index 664019eef218..e0c2e265cadc 100644
--- a/src/material/slide-toggle/_m2-slide-toggle.scss
+++ b/src/material/slide-toggle/_m2-slide-toggle.scss
@@ -2,10 +2,13 @@
 @use '../core/theming/inspection';
 @use '../core/theming/theming';
 @use 'sass:map';
+@use '../core/tokens/m2-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.
-@function get-unthemable-tokens() {
+@function get-unthemable-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
   // visible-track-opacity and hidden-track-opacity:
   // The hidden and visible track represent whichever track is visible or
   // hidden in the ui. This could be the .mdc-switch__track :before or
@@ -28,13 +31,14 @@
     slide-toggle-hidden-track-opacity: 1,
     slide-toggle-hidden-track-transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1),
     slide-toggle-pressed-handle-size: 20px,
-    slide-toggle-selected-focus-state-layer-opacity: 0.12,
+    slide-toggle-selected-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
     slide-toggle-selected-handle-horizontal-margin: 0,
     slide-toggle-selected-handle-size: 20px,
-    slide-toggle-selected-hover-state-layer-opacity: 0.04,
+    slide-toggle-selected-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
     slide-toggle-selected-icon-size: 18px,
     slide-toggle-selected-pressed-handle-horizontal-margin: 0,
-    slide-toggle-selected-pressed-state-layer-opacity: 0.1,
+    slide-toggle-selected-pressed-state-layer-opacity:
+        map.get($system, pressed-state-layer-opacity),
     slide-toggle-selected-track-outline-color: transparent,
     slide-toggle-selected-track-outline-width: 1px,
     slide-toggle-selected-with-icon-handle-horizontal-margin: 0,
@@ -43,10 +47,10 @@
     slide-toggle-track-outline-width: 1px,
     slide-toggle-track-shape: 7px,
     slide-toggle-track-width: 36px,
-    slide-toggle-unselected-focus-state-layer-opacity: 0.12,
+    slide-toggle-unselected-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
     slide-toggle-unselected-handle-horizontal-margin: 0,
     slide-toggle-unselected-handle-size: 20px,
-    slide-toggle-unselected-hover-state-layer-opacity: 0.04,
+    slide-toggle-unselected-hover-state-layer-opacity: map.get($system, focus-state-layer-opacity),
     slide-toggle-unselected-icon-size: 18px,
     slide-toggle-unselected-pressed-handle-horizontal-margin: 0,
     slide-toggle-unselected-pressed-state-layer-opacity: 0.1,
@@ -59,6 +63,8 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
   $is-dark: inspection.get-theme-type($theme) == dark;
   $on-surface: if($is-dark, #f5f5f5, #424242);
   $hairline: if($is-dark, #616161, #e0e0e0);
@@ -84,7 +90,7 @@
         slide-toggle-disabled-unselected-track-color: $on-surface,
         slide-toggle-handle-elevation-shadow: elevation.get-box-shadow(1),
         slide-toggle-handle-surface-color: #fff,
-        slide-toggle-label-text-color: inspection.get-theme-color($theme, system, on-surface),
+        slide-toggle-label-text-color: map.get($system, on-surface),
         slide-toggle-selected-icon-color: $icon-color,
         slide-toggle-unselected-hover-handle-color: $on-surface-state-content,
         slide-toggle-unselected-focus-handle-color: $on-surface-state-content,
diff --git a/src/material/slide-toggle/_slide-toggle-theme.scss b/src/material/slide-toggle/_slide-toggle-theme.scss
index b3235f715cf4..183c5c01c1cb 100644
--- a/src/material/slide-toggle/_slide-toggle-theme.scss
+++ b/src/material/slide-toggle/_slide-toggle-theme.scss
@@ -16,10 +16,11 @@
   } @else {
     @include sass-utils.current-selector-or-root() {
       // TODO: See if this can be removed
-      @include token-utils.create-token-values-mixed(m2-slide-toggle.get-unthemable-tokens());
+      @include token-utils.create-token-values-mixed(m2-slide-toggle.get-unthemable-tokens($theme));
 
       .mat-mdc-slide-toggle {
-        @include token-utils.create-token-values-mixed(m2-slide-toggle.get-unthemable-tokens());
+        @include token-utils.create-token-values-mixed(
+            m2-slide-toggle.get-unthemable-tokens($theme));
       }
     }
   }