Add state_color support to entity card (#9617)

src/components/entity/state-badge.ts

@@ -129,38 +129,39 @@ export class StateBadge extends LitElement {
   }
 
   static get styles(): CSSResultGroup {
-    return css`
-      :host {
-        position: relative;
-        display: inline-block;
-        width: 40px;
-        color: var(--paper-item-icon-color, #44739e);
-        border-radius: 50%;
-        height: 40px;
-        text-align: center;
-        background-size: cover;
-        line-height: 40px;
-        vertical-align: middle;
-        box-sizing: border-box;
-      }
-      :host(:focus) {
-        outline: none;
-      }
-      :host(:not([icon]):focus) {
-        border: 2px solid var(--divider-color);
-      }
-      :host([icon]:focus) {
-        background: var(--divider-color);
-      }
-      ha-icon {
-        transition: color 0.3s ease-in-out, filter 0.3s ease-in-out;
-      }
-      .missing {
-        color: #fce588;
-      }
-
-      ${iconColorCSS}
-    `;
+    return [
+      iconColorCSS,
+      css`
+        :host {
+          position: relative;
+          display: inline-block;
+          width: 40px;
+          color: var(--paper-item-icon-color, #44739e);
+          border-radius: 50%;
+          height: 40px;
+          text-align: center;
+          background-size: cover;
+          line-height: 40px;
+          vertical-align: middle;
+          box-sizing: border-box;
+        }
+        :host(:focus) {
+          outline: none;
+        }
+        :host(:not([icon]):focus) {
+          border: 2px solid var(--divider-color);
+        }
+        :host([icon]:focus) {
+          background: var(--divider-color);
+        }
+        ha-icon {
+          transition: color 0.3s ease-in-out, filter 0.3s ease-in-out;
+        }
+        .missing {
+          color: #fce588;
+        }
+      `,
+    ];
   }
 }
 

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

@@ -250,48 +250,49 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
   }
 
   static get styles(): CSSResultGroup {
-    return css`
-      ha-card {
-        cursor: pointer;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        text-align: center;
-        padding: 4% 0;
-        font-size: 1.2rem;
-        height: 100%;
-        box-sizing: border-box;
-        justify-content: center;
-        position: relative;
-      }
+    return [
+      iconColorCSS,
+      css`
+        ha-card {
+          cursor: pointer;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          text-align: center;
+          padding: 4% 0;
+          font-size: 1.2rem;
+          height: 100%;
+          box-sizing: border-box;
+          justify-content: center;
+          position: relative;
+        }
 
-      ha-card:focus {
-        outline: none;
-      }
+        ha-card:focus {
+          outline: none;
+        }
 
-      ha-icon {
-        width: 40%;
-        height: auto;
-        color: var(--paper-item-icon-color, #44739e);
-        --mdc-icon-size: 100%;
-      }
+        ha-icon {
+          width: 40%;
+          height: auto;
+          color: var(--paper-item-icon-color, #44739e);
+          --mdc-icon-size: 100%;
+        }
 
-      ha-icon + span {
-        margin-top: 8px;
-      }
+        ha-icon + span {
+          margin-top: 8px;
+        }
 
-      ha-icon,
-      span {
-        outline: none;
-      }
+        ha-icon,
+        span {
+          outline: none;
+        }
 
-      .state {
-        font-size: 0.9rem;
-        color: var(--secondary-text-color);
-      }
-
-      ${iconColorCSS}
-    `;
+        .state {
+          font-size: 0.9rem;
+          color: var(--secondary-text-color);
+        }
+      `,
+    ];
   }
 
   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,56 +201,59 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
   }
 
   static get styles(): CSSResultGroup {
-    return css`
-      ha-card {
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        cursor: pointer;
-        outline: none;
-      }
+    return [
+      iconColorCSS,
+      css`
+        ha-card {
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          cursor: pointer;
+          outline: none;
+        }
 
-      .header {
-        display: flex;
-        padding: 8px 16px 0;
-        justify-content: space-between;
-      }
+        .header {
+          display: flex;
+          padding: 8px 16px 0;
+          justify-content: space-between;
+        }
 
-      .name {
-        color: var(--secondary-text-color);
-        line-height: 40px;
-        font-weight: 500;
-        font-size: 16px;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
+        .name {
+          color: var(--secondary-text-color);
+          line-height: 40px;
+          font-weight: 500;
+          font-size: 16px;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
 
-      .icon {
-        color: var(--state-icon-color, #44739e);
-        line-height: 40px;
-      }
+        .icon {
+          color: var(--state-icon-color, #44739e);
+          line-height: 40px;
+        }
 
-      .info {
-        padding: 0px 16px 16px;
-        margin-top: -4px;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        line-height: 28px;
-      }
+        .info {
+          padding: 0px 16px 16px;
+          margin-top: -4px;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          line-height: 28px;
+        }
 
-      .value {
-        font-size: 28px;
-        margin-right: 4px;
-      }
+        .value {
+          font-size: 28px;
+          margin-right: 4px;
+        }
 
-      .measurement {
-        font-size: 18px;
-        color: var(--secondary-text-color);
-      }
-    `;
+        .measurement {
+          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>
-        <hui-theme-select-editor
-          .hass=${this.hass}
-          .value=${this._theme}
-          .configValue=${"theme"}
-          @value-changed=${this._valueChanged}
-        ></hui-theme-select-editor>
+        <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>
+          <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>
     `;
   }