From 939b3a80920558c2380ab9b0f004f73189173040 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Wed, 31 Jan 2024 18:48:58 +0100
Subject: [PATCH] Update button card styles (#19591)

---
 src/panels/lovelace/cards/hui-button-card.ts | 29 ++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-button-card.ts b/src/panels/lovelace/cards/hui-button-card.ts
index 4337a77b35..703ad164cf 100644
--- a/src/panels/lovelace/cards/hui-button-card.ts
+++ b/src/panels/lovelace/cards/hui-button-card.ts
@@ -191,6 +191,8 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
         @blur=${this.handleRippleBlur}
         @mousedown=${this.handleRippleActivate}
         @mouseup=${this.handleRippleDeactivate}
+        @mouseenter=${this.handleRippleMouseEnter}
+        @mouseleave=${this.handleRippleMouseLeave}
         @touchstart=${this.handleRippleActivate}
         @touchend=${this.handleRippleDeactivate}
         @touchcancel=${this.handleRippleDeactivate}
@@ -204,6 +206,9 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
         tabindex=${ifDefined(
           hasAction(this._config.tap_action) ? "0" : undefined
         )}
+        style=${styleMap({
+          "--state-color": colored ? this._computeColor(stateObj) : undefined,
+        })}
       >
         ${this._config.show_icon
           ? html`
@@ -217,7 +222,6 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
                 .hass=${this.hass}
                 .stateObj=${stateObj}
                 style=${styleMap({
-                  color: colored ? this._computeColor(stateObj) : undefined,
                   filter: colored ? stateColorBrightness(stateObj) : undefined,
                   height: this._config.icon_height
                     ? this._config.icon_height
@@ -280,23 +284,37 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
     this._rippleHandlers.startPress(evt);
   }
 
+  @eventOptions({ passive: true })
   private handleRippleDeactivate() {
     this._rippleHandlers.endPress();
   }
 
+  @eventOptions({ passive: true })
   private handleRippleFocus() {
     this._rippleHandlers.startFocus();
   }
 
+  @eventOptions({ passive: true })
   private handleRippleBlur() {
     this._rippleHandlers.endFocus();
   }
 
+  @eventOptions({ passive: true })
+  private handleRippleMouseEnter() {
+    this._rippleHandlers.startHover();
+  }
+
+  @eventOptions({ passive: true })
+  private handleRippleMouseLeave() {
+    this._rippleHandlers.endHover();
+  }
+
   static get styles(): CSSResultGroup {
     return [
       iconColorCSS,
       css`
         ha-card {
+          --mdc-ripple-color: var(--state-color);
           cursor: pointer;
           display: flex;
           flex-direction: column;
@@ -318,9 +336,11 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
         ha-state-icon {
           width: 40%;
           height: auto;
-          color: var(--paper-item-icon-color, #44739e);
+          max-height: 80%;
+          color: var(--state-color, var(--paper-item-icon-color, #44739e));
           --mdc-icon-size: 100%;
           --state-inactive-color: var(--paper-item-icon-color, #44739e);
+          transition: transform 180ms ease-in-out;
         }
 
         ha-state-icon + span {
@@ -332,6 +352,11 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
           outline: none;
         }
 
+        :host(:focus-visible) ha-state-icon,
+        :host(:active) ha-state-icon {
+          transform: scale(1.2);
+        }
+
         .state {
           font-size: 0.9rem;
           color: var(--secondary-text-color);