fix(material/expansion): align state layer colors (#31236)

# Conflicts:
#	src/material/expansion/_m2-expansion.scss

Author: andrewseguin

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),