From ba3680ed489e36c106578f790459084649e74bd0 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Tue, 16 Jan 2024 11:38:39 +0100
Subject: [PATCH] fix(material-experimental/theming): align M3 icon buttons
 with spec

Fixes the following issues with the M3 icon buttons:
* They didn't have the right size. In M3 icon buttons are a bit smaller.
* The disabled color opacity wasn't being applied.
* The button didn't have the right color.
---
 .../theming/_m3-density.scss                  |  2 +-
 .../theming/_m3-tokens.scss                   | 27 ++++++++++++++++++-
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/material-experimental/theming/_m3-density.scss b/src/material-experimental/theming/_m3-density.scss
index d5583e6fb04d..bd3ac530dfc1 100644
--- a/src/material-experimental/theming/_m3-density.scss
+++ b/src/material-experimental/theming/_m3-density.scss
@@ -41,7 +41,7 @@ $_density-tokens: (
     container-height: (40px, 36px, 32px, 28px),
   ),
   (mdc, icon-button): (
-    state-layer-size: (48px, 44px, 40px, 36px, 32px, 28px),
+    state-layer-size: (40px, 36px, 32px, 28px, 24px, 20px),
   ),
   (mdc, linear-progress): (),
   (mdc, list): (
diff --git a/src/material-experimental/theming/_m3-tokens.scss b/src/material-experimental/theming/_m3-tokens.scss
index 8445355d7551..6fda4bc962bf 100644
--- a/src/material-experimental/theming/_m3-tokens.scss
+++ b/src/material-experimental/theming/_m3-tokens.scss
@@ -415,6 +415,26 @@
   );
 }
 
+/// Fixes inconsistent values in the icon button tokens so that they can produce valid styles.
+/// @param {Map} $initial-tokens Map of icon button tokens currently being generated.
+/// @param {Map} $all-tokens Map of all icon button tokens, including hardcoded values.
+/// @return {Map} The given tokens, with the invalid values replaced with valid ones.
+@function _fix-icon-button-tokens($tokens, $all-tokens) {
+  $rename-keys: (
+    unselected-icon-color: icon-color,
+  );
+
+  $remapped-tokens: _rename-map-keys($tokens, $rename-keys);
+  $remapped-all-tokens: _rename-map-keys($all-tokens, $rename-keys);
+
+  @return _combine-color-tokens($remapped-tokens, $remapped-all-tokens, (
+    (
+      color: disabled-icon-color,
+      opacity: disabled-icon-opacity,
+    ),
+  ));
+}
+
 /// Generates a set of namespaced tokens for all components.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $include-non-systemized Whether to include non-systemized tokens
@@ -509,7 +529,12 @@
     ),
     _namespace-tokens(
       (mdc, icon-button),
-      mdc-tokens.md-comp-icon-button-values($systems, $exclude-hardcoded),
+      _fix-icon-button-tokens(
+        mdc-tokens.md-comp-icon-button-values($systems, $exclude-hardcoded),
+        // Need to pass in the hardcoded values, because they
+        // include opacities that are used for the disabled state.
+        mdc-tokens.md-comp-icon-button-values($systems, false)
+      ),
       $token-slots
     ),
     _namespace-tokens(