From 7737d1e08e7f6c8120e98c2efaade6a22ef59219 Mon Sep 17 00:00:00 2001
From: Andrew Seguin <andrewjs@google.com>
Date: Wed, 30 Jul 2025 13:32:17 -0600
Subject: [PATCH 1/3] fix(material/core): special-case icon button color token

---
 src/dev-app/theme.scss                |  2 ++
 src/material/core/tokens/_system.scss | 15 +++++++++++++++
 2 files changed, 17 insertions(+)

diff --git a/src/dev-app/theme.scss b/src/dev-app/theme.scss
index 655662a8b6c0..b47cce88fb9f 100644
--- a/src/dev-app/theme.scss
+++ b/src/dev-app/theme.scss
@@ -23,6 +23,7 @@ $candy-app-theme: mat.m2-define-light-theme((
 
 @include mat.app-background();
 @include mat.elevation-classes();
+@include mat.m2-theme($candy-app-theme);
 
 // Include the default theme styles.
 @include mat.all-component-themes($candy-app-theme);
@@ -63,6 +64,7 @@ $candy-app-theme: mat.m2-define-light-theme((
   @include mat.all-component-colors($dark-colors);
   @include experimental.column-resize-color($dark-colors);
   @include experimental.popover-edit-color($dark-colors);
+  @include mat.m2-theme($dark-colors);
 
   // Include the dark theme colors for focus indicators.
   &.demo-strong-focus {
diff --git a/src/material/core/tokens/_system.scss b/src/material/core/tokens/_system.scss
index 55b0609ccc2d..53eed2b3a030 100644
--- a/src/material/core/tokens/_system.scss
+++ b/src/material/core/tokens/_system.scss
@@ -350,6 +350,21 @@
 
   @include _define-m2-system-vars(m2.md-sys-shape-values(), $overrides);
   @include _define-m2-system-vars(m2.md-sys-state-values(), $overrides);
+
+  // The icon button's color token is set to `inherit` for M2 and intended to display
+  // the color inherited from its parent element. This is crucial because it's unknown
+  // whether the icon button sits on a container with background like "surface" or "primary",
+  // where both may have different contrast colors like white or black.
+  // However, variables set to inherit AND define a fallback will always use the fallback,
+  // which is "on-surface-variant". This mixin now defines this value.
+  // To avoid this, and continue using `inherit` for the icon button color, set the color explicitly
+  // to the token without a fallback.
+  .mat-mdc-button-base.mat-mdc-icon-button {
+    &:not([disabled]),
+    &:not(.mat-mdc-button-disabled) {
+     color: var(--mat-icon-button-icon-color);
+   }
+  }
 }
 
 @mixin _define-m2-system-vars($vars, $overrides) {

From 977a07afe10af896b21106c0d039f679ccc0ee54 Mon Sep 17 00:00:00 2001
From: Andrew Seguin <andrewseguin@google.com>
Date: Thu, 31 Jul 2025 06:18:16 -0600
Subject: [PATCH 2/3] fix(material/core): remove [disabled]

---
 src/material/core/tokens/_system.scss | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/material/core/tokens/_system.scss b/src/material/core/tokens/_system.scss
index 53eed2b3a030..4b3af32df62e 100644
--- a/src/material/core/tokens/_system.scss
+++ b/src/material/core/tokens/_system.scss
@@ -359,11 +359,8 @@
   // which is "on-surface-variant". This mixin now defines this value.
   // To avoid this, and continue using `inherit` for the icon button color, set the color explicitly
   // to the token without a fallback.
-  .mat-mdc-button-base.mat-mdc-icon-button {
-    &:not([disabled]),
-    &:not(.mat-mdc-button-disabled) {
-     color: var(--mat-icon-button-icon-color);
-   }
+  .mat-mdc-button-base.mat-mdc-icon-button:not(.mat-mdc-button-disabled) {
+    color: var(--mat-icon-button-icon-color);
   }
 }
 

From 4178f31df0e314634222013181d37e285d20e04e Mon Sep 17 00:00:00 2001
From: Andrew Seguin <andrewseguin@google.com>
Date: Thu, 31 Jul 2025 08:00:13 -0600
Subject: [PATCH 3/3] fix(material/core): add validation against m3 theme
 configs

---
 src/dev-app/theme.scss                | 2 +-
 src/material/core/tokens/_system.scss | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/dev-app/theme.scss b/src/dev-app/theme.scss
index b47cce88fb9f..0d3eace594b7 100644
--- a/src/dev-app/theme.scss
+++ b/src/dev-app/theme.scss
@@ -59,12 +59,12 @@ $candy-app-theme: mat.m2-define-light-theme((
         typography: mat.m2-define-typography-config(),
       )
   );
+  @include mat.m2-theme($dark-colors);
 
   // Include the dark theme color styles.
   @include mat.all-component-colors($dark-colors);
   @include experimental.column-resize-color($dark-colors);
   @include experimental.popover-edit-color($dark-colors);
-  @include mat.m2-theme($dark-colors);
 
   // Include the dark theme colors for focus indicators.
   &.demo-strong-focus {
diff --git a/src/material/core/tokens/_system.scss b/src/material/core/tokens/_system.scss
index 4b3af32df62e..d45c5833e06b 100644
--- a/src/material/core/tokens/_system.scss
+++ b/src/material/core/tokens/_system.scss
@@ -18,6 +18,7 @@
 @use '../style/elevation';
 @use '../theming/config-validation';
 @use '../theming/definition';
+@use '../theming/inspection';
 @use '../theming/m2-inspection';
 @use '../theming/palettes';
 @use '../style/sass-utils';
@@ -322,6 +323,11 @@
 // Unlike M3's `mat.theme()`, this mixin does not replace the need to call
 // individual component theme mixins for Angular Material components.
 @mixin m2-theme($theme-config, $overrides: ()) {
+  @if inspection.get-theme-version($theme-config) == 1 {
+    @error '`m2-theme` mixin should only be called for M2 theme ' +
+        'configs created with define-light-theme or define-dark-theme';
+  }
+
   $config: m2-inspection.get-m2-config($theme-config);
 
   $color: map.get($config, color);