From fd34195fd486619941437228050b03a0129cc600 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dario=20=C5=A0o=C4=87?= <soc.darioo@gmail.com>
Date: Sat, 8 Mar 2025 15:57:33 +0100
Subject: [PATCH] feat(material/button): add missing tokens for hover, focus,
 and active pseudo-classes

Add missing tokens for overriding hover, focus, and active outlines,
as well as the label styling of the `outlined-button` in Angular Material.

Fixes #30573
---
 src/material/button/button.scss                 | 17 +++++++++++++++++
 .../core/tokens/m2/mdc/_outlined-button.scss    | 11 +++++++++--
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/material/button/button.scss b/src/material/button/button.scss
index e82f5305d9d1..a37df7bb627c 100644
--- a/src/material/button/button.scss
+++ b/src/material/button/button.scss
@@ -258,6 +258,23 @@
       @include token-utils.create-token-slot(border-color, outline-color);
     }
 
+    &:hover {
+      @include token-utils.create-token-slot(border-color, hover-outline-color);
+      @include token-utils.create-token-slot(color, hover-label-text-color);
+    }
+
+    &.cdk-program-focused,
+    &.cdk-keyboard-focused,
+    &.mat-mdc-button-disabled-interactive:focus {
+      @include token-utils.create-token-slot(border-color, focus-outline-color);
+      @include token-utils.create-token-slot(color, focus-label-text-color);
+    }
+
+    &:active {
+      @include token-utils.create-token-slot(border-color, pressed-outline-color);
+      @include token-utils.create-token-slot(color, pressed-label-text-color);
+    }
+
     // We need to re-apply the disabled tokens since MDC uses
     // `:disabled` which doesn't apply to anchors.
     @include button-base.mat-private-button-disabled {
diff --git a/src/material/core/tokens/m2/mdc/_outlined-button.scss b/src/material/core/tokens/m2/mdc/_outlined-button.scss
index 8240384bf5a8..f03fd1b328c2 100644
--- a/src/material/core/tokens/m2/mdc/_outlined-button.scss
+++ b/src/material/core/tokens/m2/mdc/_outlined-button.scss
@@ -61,13 +61,20 @@ $prefix: (mdc, outlined-button);
     rgba(if($is-dark, #fff, #000), 0.12),
     inspection.get-theme-color($theme, foreground, divider)
   );
+  $color: inspection.get-theme-color($theme, foreground, text, 1);
 
   @return (
+    outline-color: $outline,
     disabled-outline-color: $outline,
+    hover-outline-color: $outline,
+    focus-outline-color: $outline,
+    pressed-outline-color: $outline,
     disabled-label-text-color: inspection.get-theme-color($theme, foreground, disabled-button,
       if($is-dark, 0.5, 0.38)),
-    label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
-    outline-color: $outline,
+    hover-label-text-color: $color,
+    focus-label-text-color: $color,
+    pressed-label-text-color: $color,
+    label-text-color: $color,
   );
 }