Add state_color support to entity card (#9617)

src/components/entity/state-badge.ts

@@ -129,7 +129,9 @@ export class StateBadge extends LitElement {
   }
 
   static get styles(): CSSResultGroup {
-    return css`
+    return [
+      iconColorCSS,
+      css`
         :host {
           position: relative;
           display: inline-block;
@@ -158,9 +160,8 @@ export class StateBadge extends LitElement {
         .missing {
           color: #fce588;
         }
-
-      ${iconColorCSS}
-    `;
+      `,
+    ];
   }
 }
 

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

@@ -250,7 +250,9 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
   }
 
   static get styles(): CSSResultGroup {
-    return css`
+    return [
+      iconColorCSS,
+      css`
         ha-card {
           cursor: pointer;
           display: flex;
@@ -289,9 +291,8 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
           font-size: 0.9rem;
           color: var(--secondary-text-color);
         }
-
-      ${iconColorCSS}
-    `;
+      `,
+    ];
   }
 
   private _computeBrightness(stateObj: HassEntity | LightEntity): string {

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

@@ -7,13 +7,17 @@ import {
   TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../common/dom/fire_event";
+import { computeActiveState } from "../../../common/entity/compute_active_state";
 import { computeStateDisplay } from "../../../common/entity/compute_state_display";
+import { computeStateDomain } from "../../../common/entity/compute_state_domain";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import { stateIcon } from "../../../common/entity/state_icon";
 import { isValidEntityId } from "../../../common/entity/valid_entity_id";
 import { formatNumber } from "../../../common/string/format_number";
+import { iconColorCSS } from "../../../common/style/icon_color_css";
 import "../../../components/ha-card";
 import "../../../components/ha-icon";
 import { UNAVAILABLE_STATES } from "../../../data/entity";
@@ -106,6 +110,7 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
       `;
     }
 
+    const domain = computeStateDomain(stateObj);
     const showUnit = this._config.attribute
       ? this._config.attribute in stateObj.attributes
       : !UNAVAILABLE_STATES.includes(stateObj.state);
@@ -119,6 +124,13 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
           <div class="icon">
             <ha-icon
               .icon=${this._config.icon || stateIcon(stateObj)}
+              data-domain=${ifDefined(
+                this._config.state_color ||
+                  (domain === "light" && this._config.state_color !== false)
+                  ? domain
+                  : undefined
+              )}
+              data-state=${stateObj ? computeActiveState(stateObj) : ""}
             ></ha-icon>
           </div>
         </div>
@@ -189,7 +201,9 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
   }
 
   static get styles(): CSSResultGroup {
-    return css`
+    return [
+      iconColorCSS,
+      css`
         ha-card {
           height: 100%;
           display: flex;
@@ -238,7 +252,8 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
           font-size: 18px;
           color: var(--secondary-text-color);
         }
-    `;
+      `,
+    ];
   }
 }
 

src/panels/lovelace/cards/types.ts

@@ -39,6 +39,7 @@ export interface EntityCardConfig extends LovelaceCardConfig {
   attribute?: string;
   unit?: string;
   theme?: string;
+  state_color?: boolean;
 }
 
 export interface EntitiesCardEntityConfig extends EntityConfig {

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

@@ -1,7 +1,7 @@
 import "@polymer/paper-input/paper-input";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { assert, object, optional, string, assign } from "superstruct";
+import { assert, assign, boolean, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { stateIcon } from "../../../../common/entity/state_icon";
 import "../../../../components/entity/ha-entity-attribute-picker";
@@ -13,9 +13,9 @@ import "../../components/hui-entity-editor";
 import "../../components/hui-theme-select-editor";
 import { headerFooterConfigStructs } from "../../header-footer/structs";
 import { LovelaceCardEditor } from "../../types";
+import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
-import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
@@ -26,6 +26,7 @@ const cardConfigStruct = assign(
     attribute: optional(string()),
     unit: optional(string()),
     theme: optional(string()),
+    state_color: optional(boolean()),
     footer: optional(headerFooterConfigStructs),
   })
 );
@@ -64,6 +65,10 @@ export class HuiEntityCardEditor
     return this._config!.unit || "";
   }
 
+  get _state_color(): boolean {
+    return this._config!.state_color ?? false;
+  }
+
   get _theme(): string {
     return this._config!.theme || "";
   }
@@ -135,12 +140,27 @@ export class HuiEntityCardEditor
             @value-changed=${this._valueChanged}
           ></paper-input>
         </div>
+        <div class="side-by-side">
           <hui-theme-select-editor
             .hass=${this.hass}
             .value=${this._theme}
             .configValue=${"theme"}
             @value-changed=${this._valueChanged}
-        ></hui-theme-select-editor>
+          >
+          </hui-theme-select-editor>
+          <ha-formfield
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.state_color"
+            )}
+          >
+            <ha-switch
+              .checked=${this._config!.state_color}
+              .configValue=${"state_color"}
+              @change=${this._valueChanged}
+            >
+            </ha-switch>
+          </ha-formfield>
+        </div>
       </div>
     `;
   }