refactor: use m2 system-level state layer opacities (#31199)

andrewseguin · web-flow · commit aa195ca5439b · 2025-05-23T14:30:56.000-06:00
* refactor: use system-level state layer opacities

# Conflicts:
#	src/material/button/_m2-fab.scss
#	src/material/core/m2/_theming.scss

* refactor: fix
diff --git 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
@@ -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
@@ -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,62 +53,64 @@
   );
 
   @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:
         inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
     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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,19 +38,19 @@
 
 // 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;
     $grey-50: map.get(m2-palette.$grey-palette, 50);
     $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
@@ -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
@@ -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
diff --git a/src/material/list/_m2-list.scss b/src/material/list/_m2-list.scss
diff --git a/src/material/slide-toggle/_m2-slide-toggle.scss b/src/material/slide-toggle/_m2-slide-toggle.scss
diff --git a/src/material/slide-toggle/_slide-toggle-theme.scss b/src/material/slide-toggle/_slide-toggle-theme.scss

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,8 @@`
`15`	`15`	`@include token-utils.create-token-values(map.get(m3-button-toggle.get-tokens($theme), base));`
`16`	`16`	`} @else {`
`17`	`17`	`@include sass-utils.current-selector-or-root() {`
`18`		`- @include token-utils.create-token-values-mixed(m2-button-toggle.get-unthemable-tokens());`
	`18`	`+ @include token-utils.create-token-values-mixed(`
	`19`	`+ m2-button-toggle.get-unthemable-tokens($theme));`
`19`	`20`	`}`
`20`	`21`	`}`
`21`	`22`	`}`
Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@`
`15`	`15`	`@include token-utils.create-token-values(map.get(m3-checkbox.get-tokens($theme), base));`
`16`	`16`	`} @else {`
`17`	`17`	`@include sass-utils.current-selector-or-root() {`
`18`		`- @include token-utils.create-token-values-mixed(m2-checkbox.get-unthemable-tokens());`
	`18`	`+ @include token-utils.create-token-values-mixed(m2-checkbox.get-unthemable-tokens($theme));`
`19`	`19`	`}`
`20`	`20`	`}`
`21`	`21`	`}`