diff --git a/src/material/expansion/_m2-expansion.scss b/src/material/expansion/_m2-expansion.scss
index bfed41bd078f..b438c0bd18aa 100644
--- a/src/material/expansion/_m2-expansion.scss
+++ b/src/material/expansion/_m2-expansion.scss
@@ -17,13 +17,14 @@
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   $system: m2-utils.get-system($theme);
-
   @return (
     expansion-container-background-color: map.get($system, surface),
     expansion-container-text-color: map.get($system, on-surface),
     expansion-actions-divider-color: map.get($system, outline),
-    expansion-header-hover-state-layer-color: inspection.get-theme-color($theme, background, hover),
-    expansion-header-focus-state-layer-color: inspection.get-theme-color($theme, background, hover),
+    expansion-header-hover-state-layer-color: m3-utils.color-with-opacity(
+        map.get($system, on-surface), map.get($system, hover-state-layer-opacity)),
+    expansion-header-focus-state-layer-color: m3-utils.color-with-opacity(
+        map.get($system, on-surface), map.get($system, focus-state-layer-opacity)),
     expansion-header-disabled-state-text-color:
         m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
     expansion-header-text-color: map.get($system, on-surface),