Support custom color configuration in button card (#27029)

* Support custom color configuration in button card

* Fix lint issue

* Fix logic for light domain

* Implement state_color migration

src/panels/lovelace/cards/hui-button-card.ts

@@ -49,6 +49,8 @@ import type {
   LovelaceGridOptions,
 } from "../types";
 import type { ButtonCardConfig } from "./types";
+import { computeCssColor } from "../../../common/color/compute-color";
+import { stateActive } from "../../../common/entity/state_active";
 
 export const getEntityDefaultButtonAction = (entityId?: string) =>
   entityId && DOMAINS_TOGGLE.has(computeDomain(entityId))
@@ -122,11 +124,6 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
   })
   _entity?: EntityRegistryDisplayEntry;
 
-  private _getStateColor(stateObj: HassEntity, config: ButtonCardConfig) {
-    const domain = stateObj ? computeStateDomain(stateObj) : undefined;
-    return config && (config.state_color ?? domain === "light");
-  }
-
   public getCardSize(): number {
     return (
       (this._config?.show_icon ? 4 : 0) + (this._config?.show_name ? 1 : 0)
@@ -166,7 +163,8 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
       double_tap_action: { action: "none" },
       show_icon: true,
       show_name: true,
-      state_color: true,
+      color:
+        config.color ?? (config.state_color === false ? "none" : undefined),
       ...config,
     };
   }
@@ -189,8 +187,6 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
       ? this._config.name || (stateObj ? computeStateName(stateObj) : "")
       : "";
 
-    const colored = stateObj && this._getStateColor(stateObj, this._config);
-
     return html`
       <ha-card
         @action=${this._handleAction}
@@ -205,7 +201,10 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
           hasAction(this._config.tap_action) ? "0" : undefined
         )}
         style=${styleMap({
-          "--state-color": colored ? this._computeColor(stateObj) : undefined,
+          "--state-color":
+            this._config.color !== "none"
+              ? this._computeColor(stateObj, this._config)
+              : undefined,
         })}
       >
         <ha-ripple></ha-ripple>
@@ -221,7 +220,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
                 .hass=${this.hass}
                 .stateObj=${stateObj}
                 style=${styleMap({
-                  filter: colored ? stateColorBrightness(stateObj) : undefined,
+                  filter: stateObj ? stateColorBrightness(stateObj) : undefined,
                   height: this._config.icon_height
                     ? this._config.icon_height
                     : undefined,
@@ -334,7 +333,20 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
     ];
   }
 
-  private _computeColor(stateObj: HassEntity): string | undefined {
+  private _computeColor(
+    stateObj: HassEntity | undefined,
+    config: ButtonCardConfig
+  ): string | undefined {
+    if (config.color) {
+      return !stateObj || stateActive(stateObj)
+        ? computeCssColor(config.color)
+        : undefined;
+    }
+
+    if (!stateObj) {
+      return undefined;
+    }
+
     if (stateObj.attributes.rgb_color) {
       return `rgb(${stateObj.attributes.rgb_color.join(",")})`;
     }

src/panels/lovelace/cards/types.ts

@@ -136,8 +136,10 @@ export interface ButtonCardConfig extends LovelaceCardConfig {
   tap_action?: ActionConfig;
   hold_action?: ActionConfig;
   double_tap_action?: ActionConfig;
+  /** @deprecated use `color` instead */
   state_color?: boolean;
   show_state?: boolean;
+  color?: string;
 }
 
 export interface EnergyCardBaseConfig extends LovelaceCardConfig {

src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts

@@ -32,6 +32,8 @@ const cardConfigStruct = assign(
     double_tap_action: optional(actionConfigStruct),
     theme: optional(string()),
     show_state: optional(boolean()),
+    state_color: optional(boolean()),
+    color: optional(string()),
   })
 );
 
@@ -46,6 +48,19 @@ export class HuiButtonCardEditor
 
   public setConfig(config: ButtonCardConfig): void {
     assert(config, cardConfigStruct);
+
+    // Migrate state_color to color
+    if (config.state_color !== undefined) {
+      config = {
+        ...config,
+        color: config.state_color ? undefined : "none",
+      };
+      delete config.state_color;
+
+      fireEvent(this, "config-changed", { config: config });
+      return;
+    }
+
     this._config = config;
   }
 
@@ -53,11 +68,11 @@ export class HuiButtonCardEditor
     (entityId: string | undefined) =>
       [
         { name: "entity", selector: { entity: {} } },
+        { name: "name", selector: { text: {} } },
         {
           name: "",
           type: "grid",
           schema: [
-            { name: "name", selector: { text: {} } },
             {
               name: "icon",
               selector: {
@@ -67,6 +82,18 @@ export class HuiButtonCardEditor
                 icon_entity: "entity",
               },
             },
+            { name: "icon_height", selector: { text: { suffix: "px" } } },
+            {
+              name: "color",
+              selector: {
+                ui_color: {
+                  default_color: "state",
+                  include_state: true,
+                  include_none: true,
+                },
+              },
+            },
+            { name: "theme", selector: { theme: {} } },
           ],
         },
         {
@@ -79,14 +106,6 @@ export class HuiButtonCardEditor
             { name: "show_icon", selector: { boolean: {} } },
           ],
         },
-        {
-          name: "",
-          type: "grid",
-          schema: [
-            { name: "icon_height", selector: { text: { suffix: "px" } } },
-            { name: "theme", selector: { theme: {} } },
-          ],
-        },
         {
           name: "interactions",
           type: "expandable",