Merge branch 'dev' into consistent-light-icon

src/common/entity/color/battery_color.ts

@@ -1,7 +1,7 @@
 export const batteryStateColor = (state: string) => {
   const value = Number(state);
   if (isNaN(value)) {
-    return "sensor-battery-unknown";
+    return undefined;
   }
   if (value >= 70) {
     return "sensor-battery-high";

src/common/entity/color/binary_sensor_color.ts

@@ -1,4 +1,5 @@
 import { HassEntity } from "home-assistant-js-websocket";
+import { stateActive } from "../state_active";
 
 const ALERTING_DEVICE_CLASSES = new Set([
   "battery",
@@ -12,9 +13,15 @@ const ALERTING_DEVICE_CLASSES = new Set([
   "tamper",
 ]);
 
-export const binarySensorColor = (stateObj: HassEntity): string | undefined => {
+export const binarySensorColor = (
+  stateObj: HassEntity,
+  state: string
+): string | undefined => {
   const deviceClass = stateObj?.attributes.device_class;
 
+  if (!stateActive(stateObj, state)) {
+    return undefined;
+  }
   return deviceClass && ALERTING_DEVICE_CLASSES.has(deviceClass)
     ? "binary-sensor-alerting"
     : "binary-sensor";

src/common/entity/color/update_color.ts

@@ -0,0 +1,15 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import { UpdateEntity, updateIsInstalling } from "../../../data/update";
+import { stateActive } from "../state_active";
+
+export const updateColor = (
+  stateObj: HassEntity,
+  state: string
+): string | undefined => {
+  if (!stateActive(stateObj, state)) {
+    return undefined;
+  }
+  return updateIsInstalling(stateObj as UpdateEntity)
+    ? "update-installing"
+    : "update";
+};

src/common/entity/state_color.ts

@@ -1,13 +1,13 @@
 /** Return an color representing a state. */
 import { HassEntity } from "home-assistant-js-websocket";
 import { UNAVAILABLE } from "../../data/entity";
-import { UpdateEntity, updateIsInstalling } from "../../data/update";
 import { alarmControlPanelColor } from "./color/alarm_control_panel_color";
 import { binarySensorColor } from "./color/binary_sensor_color";
 import { climateColor } from "./color/climate_color";
 import { lockColor } from "./color/lock_color";
 import { personColor } from "./color/person_color";
 import { sensorColor } from "./color/sensor_color";
+import { updateColor } from "./color/update_color";
 import { computeDomain } from "./compute_domain";
 import { stateActive } from "./state_active";
 
@@ -66,7 +66,7 @@ export const stateColor = (stateObj: HassEntity, state?: string) => {
       return alarmControlPanelColor(compareState);
 
     case "binary_sensor":
-      return binarySensorColor(stateObj);
+      return binarySensorColor(stateObj, compareState);
 
     case "climate":
       return climateColor(compareState);
@@ -85,9 +85,7 @@ export const stateColor = (stateObj: HassEntity, state?: string) => {
       return compareState === "above_horizon" ? "sun-day" : "sun-night";
 
     case "update":
-      return updateIsInstalling(stateObj as UpdateEntity)
-        ? "update-installing"
-        : "update";
+      return updateColor(stateObj, compareState);
   }
 
   return undefined;

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

@@ -311,7 +311,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
   }
 
   private _computeBrightness(stateObj: HassEntity | LightEntity): string {
-    if (stateObj.attributes.brightness && stateActive(stateObj)) {
+    if (stateObj.attributes.brightness) {
       const brightness = stateObj.attributes.brightness;
       return `brightness(${(brightness + 245) / 5}%)`;
     }
@@ -321,7 +321,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
   private _computeColor(
     stateObj: HassEntity | LightEntity
   ): string | undefined {
-    if (stateObj.attributes.rgb_color && stateActive(stateObj)) {
+    if (stateObj.attributes.rgb_color) {
       return `rgb(${stateObj.attributes.rgb_color.join(",")})`;
     }
     const iconColor = stateColorCss(stateObj);

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

@@ -9,6 +9,7 @@ import { hsv2rgb, rgb2hsv } from "../../../common/color/convert-color";
 import { DOMAINS_TOGGLE } from "../../../common/const";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateDisplay } from "../../../common/entity/compute_state_display";
+import { stateActive } from "../../../common/entity/state_active";
 import { stateColorCss } from "../../../common/entity/state_color";
 import { stateIconPath } from "../../../common/entity/state_icon_path";
 import { blankBeforePercent } from "../../../common/translations/blank_before_percent";
@@ -128,9 +129,9 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
   }
 
   private _computeStateColor = memoize((entity: HassEntity, color?: string) => {
-    // Use custom color
+    // Use custom color if active
     if (color) {
-      return computeRgbColor(color);
+      return stateActive(entity) ? computeRgbColor(color) : undefined;
     }
 
     // Use default color for person/device_tracker because color is on the badge
@@ -363,7 +364,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
   static get styles(): CSSResultGroup {
     return css`
       :host {
-        --tile-color: var(--rgb-state-default-color);
+        --tile-color: var(--rgb-state-inactive-color);
         --tile-tap-padding: 6px;
         -webkit-tap-highlight-color: transparent;
       }

src/panels/lovelace/entity-rows/hui-select-entity-row.ts

@@ -9,6 +9,7 @@ import {
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
+import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import "../../../components/ha-select";
 import { UNAVAILABLE } from "../../../data/entity";
@@ -76,15 +77,14 @@ class HuiSelectEntityRow extends LitElement implements LovelaceRow {
             ? stateObj.attributes.options.map(
                 (option) =>
                   html`
-                    <mwc-list-item .value=${option}
-                      >${(stateObj.attributes.device_class &&
-                        this.hass!.localize(
-                          `component.select.state.${stateObj.attributes.device_class}.${option}`
-                        )) ||
-                      this.hass!.localize(
-                        `component.select.state._.${option}`
-                      ) ||
-                      option}
+                    <mwc-list-item .value=${option}>
+                      ${computeStateDisplay(
+                        this.hass!.localize,
+                        stateObj,
+                        this.hass!.locale,
+                        this.hass!.entities,
+                        option
+                      )}
                     </mwc-list-item>
                   `
               )

src/resources/ha-style.ts

@@ -176,7 +176,6 @@ documentContainer.innerHTML = `<custom-style>
       --rgb-state-sensor-battery-high-color: var(--rgb-green-color);
       --rgb-state-sensor-battery-low-color: var(--rgb-red-color);
       --rgb-state-sensor-battery-medium-color: var(--rgb-orange-color);
-      --rgb-state-sensor-battery-unknown-color: var(--rgb-off-color);
       --rgb-state-siren-color: var(--rgb-red-color);
       --rgb-state-sun-day-color: var(--rgb-amber-color);
       --rgb-state-sun-night-color: var(--rgb-deep-purple-color);

src/state-summary/state-card-select.ts

@@ -8,6 +8,7 @@ import "../components/entity/state-badge";
 import { UNAVAILABLE } from "../data/entity";
 import { SelectEntity, setSelectOption } from "../data/select";
 import type { HomeAssistant } from "../types";
+import { computeStateDisplay } from "../common/entity/compute_state_display";
 
 @customElement("state-card-select")
 class StateCardSelect extends LitElement {
@@ -31,12 +32,13 @@ class StateCardSelect extends LitElement {
           (option) =>
             html`
               <mwc-list-item .value=${option}>
-                ${(this.stateObj.attributes.device_class &&
-                  this.hass.localize(
-                    `component.select.state.${this.stateObj.attributes.device_class}.${option}`
-                  )) ||
-                this.hass.localize(`component.select.state._.${option}`) ||
-                option}
+                ${computeStateDisplay(
+                  this.hass.localize,
+                  this.stateObj,
+                  this.hass.locale,
+                  this.hass.entities,
+                  option
+                )}
               </mwc-list-item>
             `
         )}