Fix climate hvac action color (#14747)

gallery/src/pages/misc/entity-state.ts

@@ -130,6 +130,17 @@ const ENTITIES: HassEntity[] = [
   createEntity("climate.auto", "auto"),
   createEntity("climate.dry", "dry"),
   createEntity("climate.fan_only", "fan_only"),
+  createEntity("climate.auto_idle", "auto", undefined, { hvac_action: "idle" }),
+  createEntity("climate.auto_off", "auto", undefined, { hvac_action: "off" }),
+  createEntity("climate.auto_heating", "auto", undefined, {
+    hvac_action: "heating",
+  }),
+  createEntity("climate.auto_cooling", "auto", undefined, {
+    hvac_action: "cooling",
+  }),
+  createEntity("climate.auto_dry", "auto", undefined, {
+    hvac_action: "drying",
+  }),
   // Cover
   createEntity("cover.closing", "closing"),
   createEntity("cover.closed", "closed"),

src/common/entity/color/climate_color.ts

@@ -1,3 +1,13 @@
+import { HvacAction } from "../../../data/climate";
+
+export const CLIMATE_HVAC_ACTION_COLORS: Record<HvacAction, string> = {
+  cooling: "var(--rgb-state-climate-cool-color)",
+  drying: "var(--rgb-state-climate-dry-color)",
+  heating: "var(--rgb-state-climate-heat-color)",
+  idle: "var(--rgb-state-climate-idle-color)",
+  off: "var(--rgb-state-climate-off-color)",
+};
+
 export const climateColor = (state: string): string | undefined => {
   switch (state) {
     case "auto":

src/components/entity/state-badge.ts

@@ -11,6 +11,7 @@ import {
 import { property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
+import { CLIMATE_HVAC_ACTION_COLORS } from "../../common/entity/color/climate_color";
 import { computeDomain } from "../../common/entity/compute_domain";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { stateActive } from "../../common/entity/state_active";
@@ -34,7 +35,7 @@ export class StateBadge extends LitElement {
   @property({ type: Boolean, reflect: true, attribute: "icon" })
   private _showIcon = true;
 
-  @state() private _iconStyle: { [name: string]: string } = {};
+  @state() private _iconStyle: { [name: string]: string | undefined } = {};
 
   private get _stateColor() {
     const domain = this.stateObj
@@ -127,6 +128,14 @@ export class StateBadge extends LitElement {
           // lowest brightness will be around 50% (that's pretty dark)
           iconStyle.filter = `brightness(${(brightness + 245) / 5}%)`;
         }
+        if (stateObj.attributes.hvac_action) {
+          const hvacAction = stateObj.attributes.hvac_action;
+          if (["heating", "cooling", "drying"].includes(hvacAction)) {
+            iconStyle.color = `rgb(${CLIMATE_HVAC_ACTION_COLORS[hvacAction]})`;
+          } else {
+            delete iconStyle.color;
+          }
+        }
       }
     } else if (this.overrideImage) {
       let imageUrl = this.overrideImage;

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

@@ -21,6 +21,7 @@ import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import { DOMAINS_TOGGLE } from "../../../common/const";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
+import { CLIMATE_HVAC_ACTION_COLORS } from "../../../common/entity/color/climate_color";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
@@ -316,12 +317,17 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
     return "";
   }
 
-  private _computeColor(
+  private _computeColor(stateObj: HassEntity): string | undefined {
-    stateObj: HassEntity | LightEntity
-  ): string | undefined {
     if (stateObj.attributes.rgb_color) {
       return `rgb(${stateObj.attributes.rgb_color.join(",")})`;
     }
+    if (stateObj.attributes.hvac_action) {
+      const hvacAction = stateObj.attributes.hvac_action;
+      if (["heating", "cooling", "drying"].includes(hvacAction)) {
+        return `rgb(${CLIMATE_HVAC_ACTION_COLORS[hvacAction]})`;
+      }
+      return undefined;
+    }
     const iconColor = stateColorCss(stateObj);
     if (iconColor) {
       return `rgb(${iconColor})`;

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

@@ -12,6 +12,7 @@ import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../common/dom/fire_event";
+import { CLIMATE_HVAC_ACTION_COLORS } from "../../../common/entity/color/climate_color";
 import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
 import { computeStateName } from "../../../common/entity/compute_state_name";
@@ -28,7 +29,6 @@ import "../../../components/ha-card";
 import "../../../components/ha-icon";
 import { UNAVAILABLE_STATES } from "../../../data/entity";
 import { formatAttributeValue } from "../../../data/entity_attributes";
-import { LightEntity } from "../../../data/light";
 import { HomeAssistant } from "../../../types";
 import { computeCardSize } from "../common/compute-card-size";
 import { findEntities } from "../common/find-entities";
@@ -193,9 +193,14 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
     `;
   }
 
-  private _computeColor(
+  private _computeColor(stateObj: HassEntity): string | undefined {
-    stateObj: HassEntity | LightEntity
+    if (stateObj.attributes.hvac_action) {
-  ): string | undefined {
+      const hvacAction = stateObj.attributes.hvac_action;
+      if (["heating", "cooling", "drying"].includes(hvacAction)) {
+        return `rgb(${CLIMATE_HVAC_ACTION_COLORS[hvacAction]})`;
+      }
+      return undefined;
+    }
     const iconColor = stateColorCss(stateObj);
     if (iconColor) {
       return `rgb(${iconColor})`;

src/panels/lovelace/cards/tile/badges/tile-badge-climate.ts

@@ -5,17 +5,10 @@ import {
   mdiSnowflake,
   mdiWaterPercent,
 } from "@mdi/js";
+import { CLIMATE_HVAC_ACTION_COLORS } from "../../../../../common/entity/color/climate_color";
 import { ClimateEntity, HvacAction } from "../../../../../data/climate";
 import { ComputeBadgeFunction } from "./tile-badge";
 
-export const CLIMATE_HVAC_ACTION_COLORS: Record<HvacAction, string> = {
-  cooling: "var(--rgb-state-climate-cool-color)",
-  drying: "var(--rgb-state-climate-dry-color)",
-  heating: "var(--rgb-state-climate-heat-color)",
-  idle: "var(--rgb-state-climate-idle-color)",
-  off: "var(--rgb-state-climate-off-color)",
-};
-
 export const CLIMATE_HVAC_ACTION_ICONS: Record<HvacAction, string> = {
   cooling: mdiSnowflake,
   drying: mdiWaterPercent,

src/resources/ha-style.ts

@@ -156,7 +156,7 @@ documentContainer.innerHTML = `<custom-style>
       --rgb-state-climate-fan-only-color: var(--rgb-cyan-color);
       --rgb-state-climate-heat-color: var(--rgb-deep-orange-color);
       --rgb-state-climate-heat-cool-color: var(--rgb-amber-color);
-      --rgb-state-climate-idle-color: var(--rgb-off-color);
+      --rgb-state-climate-idle-color: var(--rgb-grey-color);
       --rgb-state-cover-color: var(--rgb-purple-color);
       --rgb-state-fan-color: var(--rgb-cyan-color);
       --rgb-state-group-color: var(--rgb-amber-color);