add state_color option to glance, button and state-icon (#4854)

* add state_color option to glance, button and state-icon

* address comments

* address comments

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

@@ -49,6 +49,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
       hold_action: { action: "more-info" },
       show_icon: true,
       show_name: true,
+      state_color: true,
     };
   }
 
@@ -148,7 +149,9 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
           ? html`
               <ha-icon
                 data-domain=${ifDefined(
-                  stateObj ? computeStateDomain(stateObj) : undefined
+                  this._config.state_color && stateObj
+                    ? computeStateDomain(stateObj)
+                    : undefined
                 )}
                 data-state=${ifDefined(
                   stateObj ? computeActiveState(stateObj) : undefined
@@ -226,7 +229,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
   }
 
   private _computeBrightness(stateObj: HassEntity | LightEntity): string {
-    if (!stateObj.attributes.brightness) {
+    if (!stateObj.attributes.brightness || !this._config?.state_color) {
       return "";
     }
     const brightness = stateObj.attributes.brightness;
@@ -234,7 +237,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
   }
 
   private _computeColor(stateObj: HassEntity | LightEntity): string {
-    if (!stateObj.attributes.hs_color) {
+    if (!stateObj.attributes.hs_color || !this._config?.state_color) {
       return "";
     }
     const [hue, sat] = stateObj.attributes.hs_color;

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

@@ -59,7 +59,7 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
   }
 
   public setConfig(config: GlanceCardConfig): void {
-    this._config = { theme: "default", ...config };
+    this._config = { theme: "default", state_color: true, ...config };
     const entities = processConfigEntities<GlanceConfigEntity>(config.entities);
 
     for (const entity of entities) {
@@ -237,7 +237,9 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
                 .stateObj=${stateObj}
                 .overrideIcon=${entityConf.icon}
                 .overrideImage=${entityConf.image}
-                stateColor
+                .stateColor=${(entityConf.state_color === false ||
+                  entityConf.state_color) ??
+                  this._config!.state_color}
               ></state-badge>
             `
           : ""}

src/panels/lovelace/cards/types.ts

@@ -57,6 +57,7 @@ export interface ButtonCardConfig extends LovelaceCardConfig {
   tap_action?: ActionConfig;
   hold_action?: ActionConfig;
   double_tap_action?: ActionConfig;
+  state_color?: boolean;
 }
 
 export interface EntityFilterCardConfig extends LovelaceCardConfig {
@@ -102,6 +103,7 @@ export interface GlanceConfigEntity extends ConfigEntity {
   show_last_changed?: boolean;
   image?: string;
   show_state?: boolean;
+  state_color?: boolean;
 }
 
 export interface GlanceCardConfig extends LovelaceCardConfig {
@@ -112,6 +114,7 @@ export interface GlanceCardConfig extends LovelaceCardConfig {
   theme?: string;
   entities: ConfigEntity[];
   columns?: number;
+  state_color?: boolean;
 }
 
 export interface IframeCardConfig extends LovelaceCardConfig {

src/panels/lovelace/elements/hui-state-icon-element.ts

@@ -32,7 +32,7 @@ export class HuiStateIconElement extends LitElement implements LovelaceElement {
       throw Error("Invalid Configuration: 'entity' required");
     }
 
-    this._config = config;
+    this._config = { state_color: true, ...config };
   }
 
   protected shouldUpdate(changedProps: PropertyValues): boolean {
@@ -71,7 +71,7 @@ export class HuiStateIconElement extends LitElement implements LovelaceElement {
           hasAction(this._config.tap_action) ? "0" : undefined
         )}
         .overrideIcon=${this._config.icon}
-        stateColor
+        .stateColor=${this._config.state_color}
       ></state-badge>
     `;
   }

src/panels/lovelace/elements/types.ts

@@ -59,6 +59,7 @@ export interface StateIconElementConfig extends LovelaceElementConfig {
   hold_action?: ActionConfig;
   double_tap_action?: ActionConfig;
   icon?: string;
+  state_color?: boolean;
 }
 
 export interface StateLabelElementConfig extends LovelaceElementConfig {