Refactor state function

src/common/entity/color/battery_color.ts

@@ -1,15 +1,13 @@
-export const batteryStateColorProperty = (
-  state: string
-): string | undefined => {
+export const batteryStateColor = (state: string): string | undefined => {
   const value = Number(state);
   if (isNaN(value)) {
     return undefined;
   }
   if (value >= 70) {
-    return "--state-sensor-battery-high-color";
+    return "var(--state-sensor-battery-high-color)";
   }
   if (value >= 30) {
-    return "--state-sensor-battery-medium-color";
+    return "var(--state-sensor-battery-medium-color)";
   }
-  return "--state-sensor-battery-low-color";
+  return "var(--state-sensor-battery-low-color)";
 };

src/common/entity/state_active.ts

@@ -5,12 +5,15 @@ import { computeDomain } from "./compute_domain";
 export function stateActive(stateObj: HassEntity, state?: string): boolean {
   const domain = computeDomain(stateObj.entity_id);
   const compareState = state !== undefined ? state : stateObj?.state;
+  return domainStateActive(domain, compareState);
+}
 
+export function domainStateActive(domain: string, state: string) {
   if (["button", "event", "input_button", "scene"].includes(domain)) {
-    return compareState !== UNAVAILABLE;
+    return state !== UNAVAILABLE;
   }
 
-  if (isUnavailableState(compareState)) {
+  if (isUnavailableState(state)) {
     return false;
   }
 
@@ -18,40 +21,40 @@ export function stateActive(stateObj: HassEntity, state?: string): boolean {
   // such as "alert" where "off" is still a somewhat active state and
   // therefore gets a custom color and "idle" is instead the state that
   // matches what most other domains consider inactive.
-  if (compareState === OFF && domain !== "alert") {
+  if (state === OFF && domain !== "alert") {
     return false;
   }
 
   // Custom cases
   switch (domain) {
     case "alarm_control_panel":
-      return compareState !== "disarmed";
+      return state !== "disarmed";
     case "alert":
       // "on" and "off" are active, as "off" just means alert was acknowledged but is still active
-      return compareState !== "idle";
+      return state !== "idle";
     case "cover":
-      return compareState !== "closed";
+      return state !== "closed";
     case "device_tracker":
     case "person":
-      return compareState !== "not_home";
+      return state !== "not_home";
     case "lawn_mower":
-      return ["mowing", "error"].includes(compareState);
+      return ["mowing", "error"].includes(state);
     case "lock":
-      return compareState !== "locked";
+      return state !== "locked";
     case "media_player":
-      return compareState !== "standby";
+      return state !== "standby";
     case "vacuum":
-      return !["idle", "docked", "paused"].includes(compareState);
+      return !["idle", "docked", "paused"].includes(state);
     case "valve":
-      return compareState !== "closed";
+      return state !== "closed";
     case "plant":
-      return compareState === "problem";
+      return state === "problem";
     case "group":
-      return ["on", "home", "open", "locked", "problem"].includes(compareState);
+      return ["on", "home", "open", "locked", "problem"].includes(state);
     case "timer":
-      return compareState === "active";
+      return state === "active";
     case "camera":
-      return compareState === "streaming";
+      return state === "streaming";
   }
 
   return true;

src/common/entity/state_color.ts

@@ -1,13 +1,11 @@
 /** Return a color representing a state. */
 import type { HassEntity } from "home-assistant-js-websocket";
-import { UNAVAILABLE } from "../../data/entity";
 import type { GroupEntity } from "../../data/group";
 import { computeGroupDomain } from "../../data/group";
-import { computeCssVariable } from "../../resources/css-variables";
 import { slugify } from "../string/slugify";
-import { batteryStateColorProperty } from "./color/battery_color";
+import { batteryStateColor } from "./color/battery_color";
 import { computeDomain } from "./compute_domain";
-import { stateActive } from "./state_active";
+import { domainStateActive } from "./state_active";
 
 const STATE_COLORED_DOMAIN = new Set([
   "alarm_control_panel",
@@ -42,73 +40,20 @@ const STATE_COLORED_DOMAIN = new Set([
   "water_heater",
 ]);
 
-export const stateColorCss = (stateObj: HassEntity, state?: string) => {
-  const compareState = state !== undefined ? state : stateObj?.state;
-  if (compareState === UNAVAILABLE) {
-    return `var(--state-unavailable-color)`;
-  }
-
-  const properties = stateColorProperties(stateObj, state);
-  if (properties) {
-    return computeCssVariable(properties);
-  }
-
-  return undefined;
-};
-
-export const domainStateColorProperties = (
-  domain: string,
+export const stateColor = (
+  element: HTMLElement | CSSStyleDeclaration,
   stateObj: HassEntity,
   state?: string
-): string[] => {
-  const compareState = state !== undefined ? state : stateObj.state;
-  const active = stateActive(stateObj, state);
-
-  return domainColorProperties(
-    domain,
-    stateObj.attributes.device_class,
-    compareState,
-    active
-  );
-};
-
-export const domainColorProperties = (
-  domain: string,
-  deviceClass: string | undefined,
-  state: string,
-  active: boolean
 ) => {
-  const properties: string[] = [];
-
-  const stateKey = slugify(state, "_");
-  const activeKey = active ? "active" : "inactive";
-
-  if (deviceClass) {
-    properties.push(`--state-${domain}-${deviceClass}-${stateKey}-color`);
-  }
-
-  properties.push(
-    `--state-${domain}-${stateKey}-color`,
-    `--state-${domain}-${activeKey}-color`,
-    `--state-${activeKey}-color`
-  );
-
-  return properties;
-};
-
-export const stateColorProperties = (
-  stateObj: HassEntity,
-  state?: string
-): string[] | undefined => {
-  const compareState = state !== undefined ? state : stateObj?.state;
   const domain = computeDomain(stateObj.entity_id);
   const dc = stateObj.attributes.device_class;
+  const compareState = state !== undefined ? state : stateObj.state;
 
   // Special rules for battery coloring
   if (domain === "sensor" && dc === "battery") {
-    const property = batteryStateColorProperty(compareState);
+    const property = batteryStateColor(compareState);
     if (property) {
-      return [property];
+      return property;
     }
   }
 
@@ -116,17 +61,52 @@ export const stateColorProperties = (
   if (domain === "group") {
     const groupDomain = computeGroupDomain(stateObj as GroupEntity);
     if (groupDomain && STATE_COLORED_DOMAIN.has(groupDomain)) {
-      return domainStateColorProperties(groupDomain, stateObj, state);
+      return domainStateColor(element, groupDomain, undefined, compareState);
     }
   }
 
   if (STATE_COLORED_DOMAIN.has(domain)) {
-    return domainStateColorProperties(domain, stateObj, state);
+    return domainStateColor(element, domain, dc, compareState);
   }
 
   return undefined;
 };
 
+export const domainStateColor = (
+  element: HTMLElement | CSSStyleDeclaration,
+  domain: string,
+  deviceClass: string | undefined,
+  state: string
+) => {
+  const style =
+    element instanceof CSSStyleDeclaration
+      ? element
+      : getComputedStyle(element);
+
+  const stateKey = slugify(state, "_");
+
+  const active = domainStateActive(domain, state);
+  const activeKey = active ? "active" : "inactive";
+
+  const variables = [
+    `--state-${domain}-${stateKey}-color`,
+    `--state-${domain}-${activeKey}-color`,
+    `--state-${activeKey}-color`,
+  ];
+
+  if (deviceClass) {
+    variables.unshift(`--state-${domain}-${deviceClass}-${stateKey}-color`);
+  }
+
+  for (const variable of variables) {
+    const value = style.getPropertyValue(variable).trim();
+    if (value) {
+      return value;
+    }
+  }
+  return undefined;
+};
+
 export const stateColorBrightness = (stateObj: HassEntity): string => {
   if (
     stateObj.attributes.brightness &&

src/components/chart/timeline-color.ts

@@ -3,7 +3,7 @@ import { getGraphColorByIndex } from "../../common/color/colors";
 import { hex2rgb, lab2hex, rgb2lab } from "../../common/color/convert-color";
 import { labBrighten } from "../../common/color/lab";
 import { computeDomain } from "../../common/entity/compute_domain";
-import { stateColorProperties } from "../../common/entity/state_color";
+import { stateColor } from "../../common/entity/state_color";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
 import { computeCssValue } from "../../resources/css-variables";
 
@@ -30,22 +30,16 @@ function computeTimelineStateColor(
     return computeCssValue("--history-unknown-color", computedStyles);
   }
 
-  const properties = stateColorProperties(stateObj, state);
+  const color = stateColor(computedStyles, stateObj, state);
 
-  if (!properties) {
-    return undefined;
-  }
-
-  const rgb = computeCssValue(properties, computedStyles);
-
-  if (!rgb) return undefined;
+  if (!color) return undefined;
 
   const domain = computeDomain(stateObj.entity_id);
   const shade = DOMAIN_STATE_SHADES[domain]?.[state] as number | number;
   if (!shade) {
-    return rgb;
+    return color;
   }
-  return lab2hex(labBrighten(rgb2lab(hex2rgb(rgb)), shade));
+  return lab2hex(labBrighten(rgb2lab(hex2rgb(color)), shade));
 }
 
 let colorIndex = 0;

src/components/entity/state-badge.ts

@@ -9,7 +9,7 @@ import { computeDomain } from "../../common/entity/compute_domain";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import {
   stateColorBrightness,
-  stateColorCss,
+  stateColor,
 } from "../../common/entity/state_color";
 import { iconColorCSS } from "../../common/style/icon_color_css";
 import { cameraUrlWithWidthHeight } from "../../data/camera";
@@ -148,7 +148,7 @@ export class StateBadge extends LitElement {
           // Externally provided overriding color wins over state color
           iconStyle.color = this.color;
         } else if (this._stateColor) {
-          const color = stateColorCss(stateObj);
+          const color = stateColor(this, stateObj);
           if (color) {
             iconStyle.color = color;
           }
@@ -169,7 +169,8 @@ export class StateBadge extends LitElement {
           if (stateObj.attributes.hvac_action) {
             const hvacAction = stateObj.attributes.hvac_action;
             if (hvacAction in CLIMATE_HVAC_ACTION_TO_MODE) {
-              iconStyle.color = stateColorCss(
+              iconStyle.color = stateColor(
+                this,
                 stateObj,
                 CLIMATE_HVAC_ACTION_TO_MODE[hvacAction]
               )!;

src/dialogs/more-info/components/lights/light-color-temp-picker.ts

@@ -10,7 +10,7 @@ import {
   temperature2rgb,
 } from "../../../../common/color/convert-light-color";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { stateColorCss } from "../../../../common/entity/state_color";
+import { stateColor } from "../../../../common/entity/state_color";
 import { throttle } from "../../../../common/util/throttle";
 import "../../../../components/ha-control-slider";
 import { UNAVAILABLE } from "../../../../data/entity";
@@ -66,7 +66,7 @@ class LightColorTempPicker extends LitElement {
       this.stateObj.attributes.max_color_temp_kelvin ?? DEFAULT_MAX_KELVIN;
 
     const gradient = this._generateTemperatureGradient(minKelvin!, maxKelvin);
-    const color = stateColorCss(this.stateObj);
+    const color = stateColor(this, this.stateObj);
 
     return html`
       <ha-control-slider

src/dialogs/more-info/controls/more-info-alarm_control_panel.ts

@@ -2,7 +2,7 @@ import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
-import { stateColorCss } from "../../../common/entity/state_color";
+import { stateColor } from "../../../common/entity/state_color";
 import "../../../components/ha-control-button";
 import "../../../components/ha-state-icon";
 import type { AlarmControlPanelEntity } from "../../../data/alarm_control_panel";
@@ -32,7 +32,7 @@ class MoreInfoAlarmControlPanel extends LitElement {
       return nothing;
     }
 
-    const color = stateColorCss(this.stateObj);
+    const color = stateColor(this, this.stateObj);
     const style = {
       "--icon-color": color,
     };

src/dialogs/more-info/controls/more-info-lock.ts

@@ -3,7 +3,7 @@ import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
-import { stateColorCss } from "../../../common/entity/state_color";
+import { stateColor } from "../../../common/entity/state_color";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-attributes";
 import "../../../components/ha-control-button";
@@ -82,7 +82,7 @@ class MoreInfoLock extends LitElement {
 
     const supportsOpen = supportsFeature(this.stateObj, LockEntityFeature.OPEN);
 
-    const color = stateColorCss(this.stateObj);
+    const color = stateColor(this, this.stateObj);
     const style = {
       "--state-color": color,
     };

src/panels/lovelace/badges/hui-entity-badge.ts

@@ -11,7 +11,7 @@ import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import { stateActive } from "../../../common/entity/state_active";
-import { stateColorCss } from "../../../common/entity/state_color";
+import { stateColor } from "../../../common/entity/state_color";
 import "../../../components/ha-badge";
 import "../../../components/ha-ripple";
 import "../../../components/ha-state-icon";
@@ -132,7 +132,7 @@ export class HuiEntityBadge extends LitElement implements LovelaceBadge {
       }
 
       // Fallback to state color
-      return stateColorCss(stateObj);
+      return stateColor(this, stateObj);
     }
   );
 

src/panels/lovelace/card-features/hui-alarm-modes-card-feature.ts

@@ -5,7 +5,7 @@ import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { computeDomain } from "../../../common/entity/compute_domain";
-import { stateColorCss } from "../../../common/entity/state_color";
+import { stateColor } from "../../../common/entity/state_color";
 import "../../../components/ha-control-button";
 import "../../../components/ha-control-button-group";
 import "../../../components/ha-control-select";
@@ -143,7 +143,7 @@ class HuiAlarmModeCardFeature
       return nothing;
     }
 
-    const color = stateColorCss(this._stateObj);
+    const color = stateColor(this, this._stateObj);
 
     const supportedModes = supportedAlarmModes(this._stateObj).reverse();
 

src/panels/lovelace/card-features/hui-area-controls-card-feature.ts

@@ -11,14 +11,13 @@ import {
   toggleGroupEntities,
 } from "../../../common/entity/group_entities";
 import { stateActive } from "../../../common/entity/state_active";
-import { domainColorProperties } from "../../../common/entity/state_color";
+import { domainStateColor } from "../../../common/entity/state_color";
 import "../../../components/ha-control-button";
 import "../../../components/ha-control-button-group";
 import "../../../components/ha-domain-icon";
 import "../../../components/ha-svg-icon";
 import type { AreaRegistryEntry } from "../../../data/area_registry";
 import { forwardHaptic } from "../../../data/haptics";
-import { computeCssVariable } from "../../../resources/css-variables";
 import type { HomeAssistant } from "../../../types";
 import type { AreaCardFeatureContext } from "../cards/hui-area-card";
 import type { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
@@ -258,14 +257,12 @@ class HuiAreaControlsCardFeature
             ? ensureArray(button.filter.device_class)[0]
             : undefined;
 
-          const activeColor = computeCssVariable(
-            domainColorProperties(domain, deviceClass, groupState, true)
-          );
+          const color = domainStateColor(this, domain, deviceClass, groupState);
 
           return html`
             <ha-control-button
               style=${styleMap({
-                "--active-color": activeColor,
+                "--active-color": color,
               })}
               .title=${label}
               aria-label=${label}

src/panels/lovelace/card-features/hui-climate-hvac-modes-card-feature.ts

@@ -5,7 +5,7 @@ import { customElement, property, query, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { computeDomain } from "../../../common/entity/compute_domain";
-import { stateColorCss } from "../../../common/entity/state_color";
+import { stateColor } from "../../../common/entity/state_color";
 import "../../../components/ha-control-select";
 import type { ControlSelectOption } from "../../../components/ha-control-select";
 import "../../../components/ha-control-select-menu";
@@ -145,7 +145,7 @@ class HuiClimateHvacModesCardFeature
       return null;
     }
 
-    const color = stateColorCss(this._stateObj);
+    const color = stateColor(this, this._stateObj);
 
     const ordererHvacModes = (this._stateObj.attributes.hvac_modes || [])
       .concat()

src/panels/lovelace/card-features/hui-cover-position-card-feature.ts

@@ -5,7 +5,7 @@ import { computeCssColor } from "../../../common/color/compute-color";
 import { computeAttributeNameDisplay } from "../../../common/entity/compute_attribute_display";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { stateActive } from "../../../common/entity/state_active";
-import { stateColorCss } from "../../../common/entity/state_color";
+import { stateColor } from "../../../common/entity/state_color";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-control-slider";
 import { CoverEntityFeature, type CoverEntity } from "../../../data/cover";
@@ -84,11 +84,11 @@ class HuiCoverPositionCardFeature
 
     const value = Math.max(Math.round(percentage), 0);
 
-    const openColor = stateColorCss(this._stateObj, "open");
+    const openColor = stateColor(this, this._stateObj, "open");
 
     const color = this.color
       ? computeCssColor(this.color)
-      : stateColorCss(this._stateObj);
+      : stateColor(this, this._stateObj);
 
     const style = {
       "--feature-color": color,

src/panels/lovelace/card-features/hui-cover-tilt-position-card-feature.ts

@@ -4,7 +4,7 @@ import { styleMap } from "lit/directives/style-map";
 import { computeCssColor } from "../../../common/color/compute-color";
 import { computeAttributeNameDisplay } from "../../../common/entity/compute_attribute_display";
 import { computeDomain } from "../../../common/entity/compute_domain";
-import { stateColorCss } from "../../../common/entity/state_color";
+import { stateColor } from "../../../common/entity/state_color";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import type { CoverEntity } from "../../../data/cover";
 import { CoverEntityFeature } from "../../../data/cover";
@@ -84,11 +84,11 @@ class HuiCoverTiltPositionCardFeature
 
     const value = Math.max(Math.round(percentage), 0);
 
-    const openColor = stateColorCss(this._stateObj, "open");
+    const openColor = stateColor(this, this._stateObj, "open");
 
     const color = this.color
       ? computeCssColor(this.color)
-      : stateColorCss(this._stateObj);
+      : stateColor(this, this._stateObj);
 
     const style = {
       "--feature-color": color,

src/panels/lovelace/card-features/hui-fan-oscillate-card-feature.ts

@@ -4,7 +4,7 @@ import { LitElement, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { computeDomain } from "../../../common/entity/compute_domain";
-import { stateColorCss } from "../../../common/entity/state_color";
+import { stateColor } from "../../../common/entity/state_color";
 import "../../../components/ha-control-select";
 import type { ControlSelectOption } from "../../../components/ha-control-select";
 import { UNAVAILABLE } from "../../../data/entity";
@@ -112,7 +112,7 @@ class HuiFanOscillateCardFeature
       return null;
     }
 
-    const color = stateColorCss(this._stateObj);
+    const color = stateColor(this, this._stateObj);
 
     const yesNo = ["no", "yes"] as const;
     const options = yesNo.map<ControlSelectOption>((oscillating) => ({

src/panels/lovelace/card-features/hui-humidifier-toggle-card-feature.ts

@@ -4,7 +4,7 @@ import { LitElement, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { computeDomain } from "../../../common/entity/compute_domain";
-import { stateColorCss } from "../../../common/entity/state_color";
+import { stateColor } from "../../../common/entity/state_color";
 import "../../../components/ha-control-select";
 import type { ControlSelectOption } from "../../../components/ha-control-select";
 import { UNAVAILABLE } from "../../../data/entity";
@@ -117,7 +117,7 @@ class HuiHumidifierToggleCardFeature
       return null;
     }
 
-    const color = stateColorCss(this._stateObj);
+    const color = stateColor(this, this._stateObj);
 
     const options = ["off", "on"].map<ControlSelectOption>((entityState) => ({
       value: entityState,

src/panels/lovelace/card-features/hui-target-temperature-card-feature.ts

@@ -5,7 +5,7 @@ import { styleMap } from "lit/directives/style-map";
 import { UNIT_F } from "../../../common/const";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
-import { stateColorCss } from "../../../common/entity/state_color";
+import { stateColor } from "../../../common/entity/state_color";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import { debounce } from "../../../common/util/debounce";
 import "../../../components/ha-control-button-group";
@@ -192,7 +192,7 @@ class HuiTargetTemperatureCardFeature
       return nothing;
     }
 
-    const stateColor = stateColorCss(this._stateObj);
+    const color = stateColor(this, this._stateObj);
     const digits = this._step.toString().split(".")?.[1]?.length ?? 0;
 
     const options = {
@@ -221,7 +221,7 @@ class HuiTargetTemperatureCardFeature
               "temperature"
             )}
             style=${styleMap({
-              "--control-number-buttons-focus-color": stateColor,
+              "--control-number-buttons-focus-color": color,
             })}
             .disabled=${this._stateObj!.state === UNAVAILABLE}
             .locale=${this.hass.locale}

src/panels/lovelace/card-features/hui-toggle-card-feature.ts

@@ -14,7 +14,7 @@ import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
 import { computeDomain } from "../../../common/entity/compute_domain";
-import { stateColorCss } from "../../../common/entity/state_color";
+import { stateColor } from "../../../common/entity/state_color";
 import "../../../components/ha-control-button";
 import "../../../components/ha-control-button-group";
 import "../../../components/ha-control-switch";
@@ -134,7 +134,7 @@ class HuiToggleCardFeature extends LitElement implements LovelaceCardFeature {
     }
 
     const onColor = "var(--feature-color)";
-    const offColor = stateColorCss(this._stateObj, "off");
+    const offColor = stateColor(this, this._stateObj, "off");
 
     const isOn = this._stateObj.state === "on";
     const isOff = this._stateObj.state === "off";

src/panels/lovelace/card-features/hui-valve-open-close-card-feature.ts

@@ -5,7 +5,7 @@ import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { supportsFeature } from "../../../common/entity/supports-feature";
-import { stateColorCss } from "../../../common/entity/state_color";
+import { stateColor } from "../../../common/entity/state_color";
 import "../../../components/ha-control-button";
 import "../../../components/ha-control-button-group";
 import "../../../components/ha-svg-icon";
@@ -125,8 +125,8 @@ class HuiValveOpenCloseCardFeature
     }
 
     // Determine colors and active states for toggle-style UI
-    const openColor = stateColorCss(this._stateObj, "open");
-    const closedColor = stateColorCss(this._stateObj, "closed");
+    const openColor = stateColor(this, this._stateObj, "open");
+    const closedColor = stateColor(this, this._stateObj, "closed");
     const openIcon = mdiValveOpen;
     const closedIcon = mdiValveClosed;
 

src/panels/lovelace/card-features/hui-valve-position-card-feature.ts

@@ -5,7 +5,7 @@ import { computeCssColor } from "../../../common/color/compute-color";
 import { computeAttributeNameDisplay } from "../../../common/entity/compute_attribute_display";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { stateActive } from "../../../common/entity/state_active";
-import { stateColorCss } from "../../../common/entity/state_color";
+import { stateColor } from "../../../common/entity/state_color";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-control-slider";
 import { ValveEntityFeature, type ValveEntity } from "../../../data/valve";
@@ -84,11 +84,11 @@ class HuiValvePositionCardFeature
 
     const value = Math.max(Math.round(percentage), 0);
 
-    const openColor = stateColorCss(this._stateObj, "open");
+    const openColor = stateColor(this, this._stateObj, "open");
 
     const color = this.color
       ? computeCssColor(this.color)
-      : stateColorCss(this._stateObj);
+      : stateColor(this, this._stateObj);
 
     const style = {
       "--feature-color": color,

src/panels/lovelace/card-features/hui-water-heater-operation-modes-card-feature.ts

@@ -3,7 +3,7 @@ import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { computeDomain } from "../../../common/entity/compute_domain";
-import { stateColorCss } from "../../../common/entity/state_color";
+import { stateColor } from "../../../common/entity/state_color";
 import "../../../components/ha-control-button";
 import "../../../components/ha-control-button-group";
 import "../../../components/ha-control-select";
@@ -130,7 +130,7 @@ class HuiWaterHeaterOperationModeCardFeature
       return null;
     }
 
-    const color = stateColorCss(this._stateObj);
+    const color = stateColor(this, this._stateObj);
 
     const orderedModes = (this._stateObj.attributes.operation_list || [])
       .concat()

src/panels/lovelace/cards/hui-alarm-panel-card.ts

@@ -7,7 +7,7 @@ import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../common/dom/fire_event";
-import { stateColorCss } from "../../../common/entity/state_color";
+import { stateColor } from "../../../common/entity/state_color";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/chips/ha-assist-chip";
 import "../../../components/ha-button";
@@ -241,7 +241,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
           <ha-assist-chip
             filled
             style=${styleMap({
-              "--alarm-state-color": stateColorCss(stateObj),
+              "--alarm-state-color": stateColor(this, stateObj),
             })}
             class=${classMap({ [stateObj.state]: true })}
             @click=${this._handleMoreInfo}

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

@@ -18,7 +18,7 @@ import { computeStateDomain } from "../../../common/entity/compute_state_domain"
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import {
   stateColorBrightness,
-  stateColorCss,
+  stateColor,
 } from "../../../common/entity/state_color";
 import { isValidEntityId } from "../../../common/entity/valid_entity_id";
 import { iconColorCSS } from "../../../common/style/icon_color_css";
@@ -341,11 +341,15 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
     if (stateObj.attributes.hvac_action) {
       const hvacAction = stateObj.attributes.hvac_action;
       if (hvacAction in CLIMATE_HVAC_ACTION_TO_MODE) {
-        return stateColorCss(stateObj, CLIMATE_HVAC_ACTION_TO_MODE[hvacAction]);
+        return stateColor(
+          this,
+          stateObj,
+          CLIMATE_HVAC_ACTION_TO_MODE[hvacAction]
+        );
       }
       return undefined;
     }
-    const iconColor = stateColorCss(stateObj);
+    const iconColor = stateColor(this, stateObj);
     if (iconColor) {
       return iconColor;
     }

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

@@ -11,7 +11,7 @@ import { computeStateDomain } from "../../../common/entity/compute_state_domain"
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import {
   stateColorBrightness,
-  stateColorCss,
+  stateColor,
 } from "../../../common/entity/state_color";
 import { isValidEntityId } from "../../../common/entity/valid_entity_id";
 import {
@@ -203,14 +203,18 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
     if (stateObj.attributes.hvac_action) {
       const hvacAction = stateObj.attributes.hvac_action;
       if (hvacAction in CLIMATE_HVAC_ACTION_TO_MODE) {
-        return stateColorCss(stateObj, CLIMATE_HVAC_ACTION_TO_MODE[hvacAction]);
+        return stateColor(
+          this,
+          stateObj,
+          CLIMATE_HVAC_ACTION_TO_MODE[hvacAction]
+        );
       }
       return undefined;
     }
     if (stateObj.attributes.rgb_color) {
       return `rgb(${stateObj.attributes.rgb_color.join(",")})`;
     }
-    const iconColor = stateColorCss(stateObj);
+    const iconColor = stateColor(this, stateObj);
     if (iconColor) {
       return iconColor;
     }

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

@@ -7,7 +7,7 @@ import { styleMap } from "lit/directives/style-map";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeStateName } from "../../../common/entity/compute_state_name";
-import { stateColorCss } from "../../../common/entity/state_color";
+import { stateColor } from "../../../common/entity/state_color";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-button";
 import type { HumidifierEntity } from "../../../data/humidifier";
@@ -135,7 +135,7 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
 
     const name = this._config!.name || computeStateName(stateObj);
 
-    const color = stateColorCss(stateObj);
+    const color = stateColor(this, stateObj);
 
     const controlMaxWidth = this._resizeController.value
       ? `${this._resizeController.value}px`

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

@@ -7,7 +7,7 @@ import { styleMap } from "lit/directives/style-map";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeStateName } from "../../../common/entity/compute_state_name";
-import { stateColorCss } from "../../../common/entity/state_color";
+import { stateColor } from "../../../common/entity/state_color";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-button";
 import type { ClimateEntity } from "../../../data/climate";
@@ -127,7 +127,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
 
     const name = this._config!.name || computeStateName(stateObj);
 
-    const color = stateColorCss(stateObj);
+    const color = stateColor(this, stateObj);
 
     const controlMaxWidth = this._resizeController.value
       ? `${this._resizeController.value}px`

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

@@ -11,7 +11,7 @@ import { DOMAINS_TOGGLE } from "../../../common/const";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import { stateActive } from "../../../common/entity/state_active";
-import { stateColorCss } from "../../../common/entity/state_color";
+import { stateColor } from "../../../common/entity/state_color";
 import "../../../components/ha-card";
 import "../../../components/ha-ripple";
 import "../../../components/ha-state-icon";
@@ -202,7 +202,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
       }
 
       // Fallback to state color
-      return stateColorCss(entity);
+      return stateColor(this, entity);
     }
   );
 
@@ -323,7 +323,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
                 .stateObj=${stateObj}
                 .hass=${this.hass}
               ></ha-state-icon>
-              ${renderTileBadge(stateObj, this.hass)}
+              ${renderTileBadge(this, stateObj, this.hass)}
             </ha-tile-icon>
             <ha-tile-info
               id="info"

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

@@ -1,13 +1,17 @@
 import { html, nothing } from "lit";
 import { styleMap } from "lit/directives/style-map";
-import { stateColorCss } from "../../../../../common/entity/state_color";
+import { stateColor } from "../../../../../common/entity/state_color";
 import "../../../../../components/ha-attribute-icon";
 import "../../../../../components/tile/ha-tile-badge";
 import type { ClimateEntity } from "../../../../../data/climate";
 import { CLIMATE_HVAC_ACTION_TO_MODE } from "../../../../../data/climate";
 import type { RenderBadgeFunction } from "./tile-badge";
 
-export const renderClimateBadge: RenderBadgeFunction = (stateObj, hass) => {
+export const renderClimateBadge: RenderBadgeFunction = (
+  element,
+  stateObj,
+  hass
+) => {
   const hvacAction = (stateObj as ClimateEntity).attributes.hvac_action;
 
   if (!hvacAction || hvacAction === "off") {
@@ -17,7 +21,8 @@ export const renderClimateBadge: RenderBadgeFunction = (stateObj, hass) => {
   return html`
     <ha-tile-badge
       style=${styleMap({
-        "--tile-badge-background-color": stateColorCss(
+        "--tile-badge-background-color": stateColor(
+          element,
           stateObj,
           CLIMATE_HVAC_ACTION_TO_MODE[hvacAction]
         ),

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

@@ -1,13 +1,17 @@
 import { html, nothing } from "lit";
 import { styleMap } from "lit/directives/style-map";
-import { stateColorCss } from "../../../../../common/entity/state_color";
+import { stateColor } from "../../../../../common/entity/state_color";
 import "../../../../../components/ha-attribute-icon";
 import "../../../../../components/tile/ha-tile-badge";
 import type { HumidifierEntity } from "../../../../../data/humidifier";
 import { HUMIDIFIER_ACTION_MODE } from "../../../../../data/humidifier";
 import type { RenderBadgeFunction } from "./tile-badge";
 
-export const renderHumidifierBadge: RenderBadgeFunction = (stateObj, hass) => {
+export const renderHumidifierBadge: RenderBadgeFunction = (
+  element,
+  stateObj,
+  hass
+) => {
   const action = (stateObj as HumidifierEntity).attributes.action;
 
   if (!action || action === "off") {
@@ -17,7 +21,8 @@ export const renderHumidifierBadge: RenderBadgeFunction = (stateObj, hass) => {
   return html`
     <ha-tile-badge
       style=${styleMap({
-        "--tile-badge-background-color": stateColorCss(
+        "--tile-badge-background-color": stateColor(
+          element,
           stateObj,
           HUMIDIFIER_ACTION_MODE[action]
         ),

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

@@ -2,7 +2,7 @@ import { mdiHome, mdiHomeExportOutline } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { html } from "lit";
 import { styleMap } from "lit/directives/style-map";
-import { stateColorCss } from "../../../../../common/entity/state_color";
+import { stateColor } from "../../../../../common/entity/state_color";
 import "../../../../../components/ha-icon";
 import "../../../../../components/ha-svg-icon";
 import "../../../../../components/tile/ha-tile-badge";
@@ -20,7 +20,11 @@ function getZone(entity: HassEntity, hass: HomeAssistant) {
   return zones.find((z) => state === z.attributes.friendly_name);
 }
 
-export const renderPersonBadge: RenderBadgeFunction = (stateObj, hass) => {
+export const renderPersonBadge: RenderBadgeFunction = (
+  element,
+  stateObj,
+  hass
+) => {
   const zone = getZone(stateObj, hass);
 
   const zoneIcon = zone?.attributes.icon;
@@ -29,7 +33,7 @@ export const renderPersonBadge: RenderBadgeFunction = (stateObj, hass) => {
     return html`
       <ha-tile-badge
         style=${styleMap({
-          "--tile-badge-background-color": stateColorCss(stateObj),
+          "--tile-badge-background-color": stateColor(element, stateObj),
         })}
       >
         <ha-icon .icon=${zoneIcon}></ha-icon>
@@ -43,7 +47,7 @@ export const renderPersonBadge: RenderBadgeFunction = (stateObj, hass) => {
   return html`
     <ha-tile-badge
       style=${styleMap({
-        "--tile-badge-background-color": stateColorCss(stateObj),
+        "--tile-badge-background-color": stateColor(element, stateObj),
       })}
     >
       <ha-svg-icon .path=${defaultIcon}></ha-svg-icon>

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

@@ -13,11 +13,16 @@ import "../../../../../components/tile/ha-tile-badge";
 import "../../../../../components/ha-svg-icon";
 
 export type RenderBadgeFunction = (
+  element: HTMLElement,
   stateObj: HassEntity,
   hass: HomeAssistant
 ) => TemplateResult | typeof nothing;
 
-export const renderTileBadge: RenderBadgeFunction = (stateObj, hass) => {
+export const renderTileBadge: RenderBadgeFunction = (
+  element,
+  stateObj,
+  hass
+) => {
   if (stateObj.state === UNKNOWN) {
     return nothing;
   }
@@ -36,11 +41,11 @@ export const renderTileBadge: RenderBadgeFunction = (stateObj, hass) => {
   switch (domain) {
     case "person":
     case "device_tracker":
-      return renderPersonBadge(stateObj, hass);
+      return renderPersonBadge(element, stateObj, hass);
     case "climate":
-      return renderClimateBadge(stateObj, hass);
+      return renderClimateBadge(element, stateObj, hass);
     case "humidifier":
-      return renderHumidifierBadge(stateObj, hass);
+      return renderHumidifierBadge(element, stateObj, hass);
     default:
       return nothing;
   }

src/panels/lovelace/heading-badges/hui-entity-heading-badge.ts

@@ -9,7 +9,7 @@ import { hsv2rgb, rgb2hex, rgb2hsv } from "../../../common/color/convert-color";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import { stateActive } from "../../../common/entity/state_active";
-import { stateColorCss } from "../../../common/entity/state_color";
+import { stateColor } from "../../../common/entity/state_color";
 import "../../../components/ha-heading-badge";
 import "../../../components/ha-state-icon";
 import type { ActionHandlerEvent } from "../../../data/lovelace/action_handler";
@@ -97,7 +97,7 @@ export class HuiEntityHeadingBadge
           return rgb2hex(hsv2rgb(hsvColor));
         }
         // Fallback to state color
-        return stateColorCss(entity);
+        return stateColor(this, entity);
       }
 
       if (color) {

src/state-control/alarm_control_panel/ha-state-control-alarm_control_panel-modes.ts

@@ -3,7 +3,7 @@ import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
-import { stateColorCss } from "../../common/entity/state_color";
+import { stateColor } from "../../common/entity/state_color";
 import { supportsFeature } from "../../common/entity/supports-feature";
 import "../../components/ha-control-select";
 import type { ControlSelectOption } from "../../components/ha-control-select";
@@ -71,7 +71,7 @@ export class HaStateControlAlarmControlPanelModes extends LitElement {
   }
 
   protected render() {
-    const color = stateColorCss(this.stateObj);
+    const color = stateColor(this, this.stateObj);
 
     const modes = this._modes(this.stateObj);
 

src/state-control/climate/ha-state-control-climate-humidity.ts

@@ -4,7 +4,7 @@ import { LitElement, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { stateActive } from "../../common/entity/state_active";
-import { domainStateColorProperties } from "../../common/entity/state_color";
+import { stateColor } from "../../common/entity/state_color";
 import { supportsFeature } from "../../common/entity/supports-feature";
 import { clamp } from "../../common/number/clamp";
 import { debounce } from "../../common/util/debounce";
@@ -15,7 +15,6 @@ import "../../components/ha-svg-icon";
 import type { ClimateEntity } from "../../data/climate";
 import { ClimateEntityFeature } from "../../data/climate";
 import { UNAVAILABLE } from "../../data/entity";
-import { computeCssVariable } from "../../resources/css-variables";
 import type { HomeAssistant } from "../../types";
 import {
   createStateControlCircularSliderController,
@@ -172,14 +171,7 @@ export class HaStateControlClimateHumidity extends LitElement {
     const active = stateActive(this.stateObj);
 
     // Use humidifier state color
-    const stateColor = computeCssVariable(
-      domainStateColorProperties(
-        "humidifier",
-        this.stateObj,
-        active ? "on" : "off"
-      )
-    );
-
+    const color = stateColor(this, this.stateObj);
     const targetHumidity = this._targetHumidity;
     const currentHumidity = this.stateObj.attributes.current_humidity;
 
@@ -196,7 +188,7 @@ export class HaStateControlClimateHumidity extends LitElement {
         <div
           class="container${containerSizeClass}"
           style=${styleMap({
-            "--state-color": stateColor,
+            "--state-color": color,
           })}
         >
           <ha-control-circular-slider

src/state-control/climate/ha-state-control-climate-temperature.ts

@@ -6,7 +6,6 @@ import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
 import { UNIT_F } from "../../common/const";
 import { stateActive } from "../../common/entity/state_active";
-import { stateColorCss } from "../../common/entity/state_color";
 import { supportsFeature } from "../../common/entity/supports-feature";
 import { clamp } from "../../common/number/clamp";
 import { formatNumber } from "../../common/number/format_number";
@@ -28,6 +27,7 @@ import {
   createStateControlCircularSliderController,
   stateControlCircularSliderStyle,
 } from "../state-control-circular-slider-style";
+import { stateColor } from "../../common/entity/state_color";
 
 type Target = "value" | "low" | "high";
 
@@ -189,8 +189,8 @@ export class HaStateControlClimateTemperature extends LitElement {
   }
 
   private _renderTemperatureButtons(target: Target, colored?: boolean) {
-    const lowColor = stateColorCss(this.stateObj, "heat");
-    const highColor = stateColorCss(this.stateObj, "cool");
+    const lowColor = stateColor(this, this.stateObj, "heat");
+    const highColor = stateColor(this, this.stateObj, "cool");
 
     const color =
       colored && stateActive(this.stateObj)
@@ -414,13 +414,14 @@ export class HaStateControlClimateTemperature extends LitElement {
     const action = this.stateObj.attributes.hvac_action;
     const active = stateActive(this.stateObj);
 
-    const stateColor = stateColorCss(this.stateObj);
-    const lowColor = stateColorCss(this.stateObj, active ? "heat" : "off");
-    const highColor = stateColorCss(this.stateObj, active ? "cool" : "off");
+    const color = stateColor(this, this.stateObj);
+    const lowColor = stateColor(this, this.stateObj, active ? "heat" : "off");
+    const highColor = stateColor(this, this.stateObj, active ? "cool" : "off");
 
     let actionColor: string | undefined;
     if (action && action !== "idle" && action !== "off" && active) {
-      actionColor = stateColorCss(
+      actionColor = stateColor(
+        this,
         this.stateObj,
         CLIMATE_HVAC_ACTION_TO_MODE[action]
       );
@@ -448,7 +449,7 @@ export class HaStateControlClimateTemperature extends LitElement {
         <div
           class="container${containerSizeClass}"
           style=${styleMap({
-            "--state-color": stateColor,
+            "--state-color": color,
             "--action-color": actionColor,
           })}
         >

src/state-control/cover/ha-state-control-cover-position.ts

@@ -3,7 +3,7 @@ import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { computeAttributeNameDisplay } from "../../common/entity/compute_attribute_display";
-import { stateColorCss } from "../../common/entity/state_color";
+import { stateColor } from "../../common/entity/state_color";
 import "../../components/ha-control-slider";
 import type { CoverEntity } from "../../data/cover";
 import { UNAVAILABLE } from "../../data/entity";
@@ -37,8 +37,8 @@ export class HaStateControlCoverPosition extends LitElement {
   }
 
   protected render(): TemplateResult {
-    const openColor = stateColorCss(this.stateObj, "open");
-    const color = stateColorCss(this.stateObj);
+    const openColor = stateColor(this, this.stateObj, "open");
+    const color = stateColor(this, this.stateObj);
 
     return html`
       <ha-control-slider

src/state-control/cover/ha-state-control-cover-tilt-position.ts

@@ -3,7 +3,7 @@ import { css, html, LitElement, unsafeCSS } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { computeAttributeNameDisplay } from "../../common/entity/compute_attribute_display";
-import { stateColorCss } from "../../common/entity/state_color";
+import { stateColor } from "../../common/entity/state_color";
 import "../../components/ha-control-slider";
 import type { CoverEntity } from "../../data/cover";
 import { UNAVAILABLE } from "../../data/entity";
@@ -67,8 +67,8 @@ export class HaStateControlInfoCoverTiltPosition extends LitElement {
   }
 
   protected render(): TemplateResult {
-    const openColor = stateColorCss(this.stateObj, "open");
-    const color = stateColorCss(this.stateObj);
+    const openColor = stateColor(this, this.stateObj, "open");
+    const color = stateColor(this, this.stateObj);
 
     return html`
       <ha-control-slider

src/state-control/cover/ha-state-control-cover-toggle.ts

@@ -4,7 +4,7 @@ import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
-import { stateColorCss } from "../../common/entity/state_color";
+import { stateColor } from "../../common/entity/state_color";
 import "../../components/ha-control-button";
 import "../../components/ha-control-switch";
 import "../../components/ha-state-icon";
@@ -52,8 +52,8 @@ export class HaStateControlCoverToggle extends LitElement {
   }
 
   protected render(): TemplateResult {
-    const onColor = stateColorCss(this.stateObj, "open");
-    const offColor = stateColorCss(this.stateObj, "closed");
+    const onColor = stateColor(this, this.stateObj, "open");
+    const offColor = stateColor(this, this.stateObj, "closed");
 
     const isOn =
       this.stateObj.state === "open" ||

src/state-control/fan/ha-state-control-fan-speed.ts

@@ -3,7 +3,7 @@ import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { computeAttributeNameDisplay } from "../../common/entity/compute_attribute_display";
 import { stateActive } from "../../common/entity/state_active";
-import { stateColorCss } from "../../common/entity/state_color";
+import { stateColor } from "../../common/entity/state_color";
 import "../../components/ha-control-select";
 import type { ControlSelectOption } from "../../components/ha-control-select";
 import "../../components/ha-control-slider";
@@ -73,7 +73,7 @@ export class HaStateControlFanSpeed extends LitElement {
   }
 
   protected render() {
-    const color = stateColorCss(this.stateObj);
+    const color = stateColor(this, this.stateObj);
 
     const speedCount = computeFanSpeedCount(this.stateObj);
 

src/state-control/ha-state-control-toggle.ts

@@ -7,7 +7,7 @@ import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
 import { computeDomain } from "../common/entity/compute_domain";
 import { stateActive } from "../common/entity/state_active";
-import { stateColorCss } from "../common/entity/state_color";
+import { stateColor } from "../common/entity/state_color";
 import "../components/ha-control-button";
 import "../components/ha-control-switch";
 import { UNAVAILABLE, UNKNOWN } from "../data/entity";
@@ -65,8 +65,8 @@ export class HaStateControlToggle extends LitElement {
   }
 
   protected render(): TemplateResult {
-    const onColor = stateColorCss(this.stateObj, "on");
-    const offColor = stateColorCss(this.stateObj, "off");
+    const onColor = stateColor(this, this.stateObj, "on");
+    const offColor = stateColor(this, this.stateObj, "off");
 
     const isOn = this.stateObj.state === "on";
     const isOff = this.stateObj.state === "off";

src/state-control/humidifier/ha-state-control-humidifier-humidity.ts

@@ -4,7 +4,7 @@ import { LitElement, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { stateActive } from "../../common/entity/state_active";
-import { stateColorCss } from "../../common/entity/state_color";
+import { stateColor } from "../../common/entity/state_color";
 import { clamp } from "../../common/number/clamp";
 import { debounce } from "../../common/util/debounce";
 import "../../components/ha-big-number";
@@ -248,14 +248,15 @@ export class HaStateControlHumidifierHumidity extends LitElement {
   }
 
   protected render() {
-    const stateColor = stateColorCss(this.stateObj);
+    const color = stateColor(this, this.stateObj);
     const active = stateActive(this.stateObj);
 
     const action = this.stateObj.attributes.action;
 
     let actionColor: string | undefined;
     if (action && action !== "idle" && action !== "off" && active) {
-      actionColor = stateColorCss(
+      actionColor = stateColor(
+        this,
         this.stateObj,
         HUMIDIFIER_ACTION_MODE[action]
       );
@@ -277,7 +278,7 @@ export class HaStateControlHumidifierHumidity extends LitElement {
         <div
           class="container${containerSizeClass}"
           style=${styleMap({
-            "--state-color": stateColor,
+            "--state-color": color,
             "--action-color": actionColor,
           })}
         >
@@ -303,7 +304,7 @@ export class HaStateControlHumidifierHumidity extends LitElement {
       <div
         class="container${containerSizeClass}"
         style=${styleMap({
-          "--state-color": stateColor,
+          "--state-color": color,
           "--action-color": actionColor,
         })}
       >

src/state-control/light/ha-state-control-light-brightness.ts

@@ -4,7 +4,7 @@ import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { hsv2rgb, rgb2hex, rgb2hsv } from "../../common/color/convert-color";
 import { stateActive } from "../../common/entity/state_active";
-import { stateColorCss } from "../../common/entity/state_color";
+import { stateColor } from "../../common/entity/state_color";
 import "../../components/ha-control-slider";
 import { UNAVAILABLE } from "../../data/entity";
 import type { LightEntity } from "../../data/light";
@@ -41,7 +41,7 @@ export class HaStateControlLightBrightness extends LitElement {
   }
 
   protected render(): TemplateResult {
-    let color = stateColorCss(this.stateObj);
+    let color = stateColor(this, this.stateObj);
 
     if (this.stateObj.attributes.rgb_color) {
       const hsvColor = rgb2hsv(this.stateObj.attributes.rgb_color);

src/state-control/lock/ha-state-control-lock-toggle.ts

@@ -3,7 +3,7 @@ import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
-import { stateColorCss } from "../../common/entity/state_color";
+import { stateColor } from "../../common/entity/state_color";
 import "../../components/ha-control-button";
 import "../../components/ha-control-switch";
 import "../../components/ha-state-icon";
@@ -82,7 +82,7 @@ export class HaStateControlLockToggle extends LitElement {
     const locking = this.stateObj.state === "locking";
     const unlocking = this.stateObj.state === "unlocking";
 
-    const color = stateColorCss(this.stateObj);
+    const color = stateColor(this, this.stateObj);
 
     if (this.stateObj.state === UNKNOWN) {
       return html`

src/state-control/valve/ha-state-control-valve-position.ts

@@ -3,7 +3,7 @@ import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { computeAttributeNameDisplay } from "../../common/entity/compute_attribute_display";
-import { stateColorCss } from "../../common/entity/state_color";
+import { stateColor } from "../../common/entity/state_color";
 import "../../components/ha-control-slider";
 import type { CoverEntity } from "../../data/cover";
 import { UNAVAILABLE } from "../../data/entity";
@@ -37,7 +37,7 @@ export class HaStateControlValvePosition extends LitElement {
   }
 
   protected render(): TemplateResult {
-    const color = stateColorCss(this.stateObj);
+    const color = stateColor(this, this.stateObj);
 
     return html`
       <ha-control-slider

src/state-control/valve/ha-state-control-valve-toggle.ts

@@ -4,7 +4,7 @@ import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
-import { stateColorCss } from "../../common/entity/state_color";
+import { stateColor } from "../../common/entity/state_color";
 import "../../components/ha-control-button";
 import "../../components/ha-control-switch";
 import "../../components/ha-state-icon";
@@ -52,8 +52,8 @@ export class HaStateControlValveToggle extends LitElement {
   }
 
   protected render(): TemplateResult {
-    const onColor = stateColorCss(this.stateObj, "open");
-    const offColor = stateColorCss(this.stateObj, "closed");
+    const onColor = stateColor(this, this.stateObj, "open");
+    const offColor = stateColor(this, this.stateObj, "closed");
 
     const isOn =
       this.stateObj.state === "open" ||

src/state-control/water_heater/ha-state-control-water_heater-temperature.ts

@@ -5,7 +5,7 @@ import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { UNIT_F } from "../../common/const";
 import { stateActive } from "../../common/entity/state_active";
-import { stateColorCss } from "../../common/entity/state_color";
+import { stateColor } from "../../common/entity/state_color";
 import { supportsFeature } from "../../common/entity/supports-feature";
 import { clamp } from "../../common/number/clamp";
 import { debounce } from "../../common/util/debounce";
@@ -179,7 +179,7 @@ export class HaStateControlWaterHeaterTemperature extends LitElement {
       WaterHeaterEntityFeature.TARGET_TEMPERATURE
     );
 
-    const stateColor = stateColorCss(this.stateObj);
+    const color = stateColor(this, this.stateObj);
     const active = stateActive(this.stateObj);
 
     const containerSizeClass = this._sizeController.value
@@ -195,7 +195,7 @@ export class HaStateControlWaterHeaterTemperature extends LitElement {
         <div
           class="container${containerSizeClass}"
           style=${styleMap({
-            "--state-color": stateColor,
+            "--state-color": color,
           })}
         >
           <ha-control-circular-slider
@@ -226,7 +226,7 @@ export class HaStateControlWaterHeaterTemperature extends LitElement {
       <div
         class="container${containerSizeClass}"
         style=${styleMap({
-          "--state-color": stateColor,
+          "--state-color": color,
         })}
       >
         <ha-control-circular-slider

test/common/entity/color/battery_color.test.ts

@@ -1,31 +1,31 @@
 import { describe, it, expect } from "vitest";
-import { batteryStateColorProperty } from "../../../../src/common/entity/color/battery_color";
+import { batteryStateColor } from "../../../../src/common/entity/color/battery_color";
 
 describe("battery_color", () => {
   it("should return green for high battery level", () => {
-    let color = batteryStateColorProperty("70");
+    let color = batteryStateColor("70");
     expect(color).toBe("--state-sensor-battery-high-color");
-    color = batteryStateColorProperty("200");
+    color = batteryStateColor("200");
     expect(color).toBe("--state-sensor-battery-high-color");
   });
 
   it("should return yellow for medium battery level", () => {
-    let color = batteryStateColorProperty("69.99");
+    let color = batteryStateColor("69.99");
     expect(color).toBe("--state-sensor-battery-medium-color");
-    color = batteryStateColorProperty("30");
+    color = batteryStateColor("30");
     expect(color).toBe("--state-sensor-battery-medium-color");
   });
 
   it("should return red for low battery level", () => {
-    let color = batteryStateColorProperty("29.999");
+    let color = batteryStateColor("29.999");
     expect(color).toBe("--state-sensor-battery-low-color");
-    color = batteryStateColorProperty("-20");
+    color = batteryStateColor("-20");
     expect(color).toBe("--state-sensor-battery-low-color");
   });
 
   // add nan test
   it("should return undefined for non-numeric state", () => {
-    const color = batteryStateColorProperty("not a number");
+    const color = batteryStateColor("not a number");
     expect(color).toBe(undefined);
   });
 });