From d64bb98bb4cefc3cc2e57be7085304fcfd519292 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Tue, 13 Dec 2022 12:11:09 +0100
Subject: [PATCH] Fix binary sensor color when off (#14735)

---
 src/common/entity/color/battery_color.ts       |  2 +-
 src/common/entity/color/binary_sensor_color.ts |  9 ++++++++-
 src/common/entity/color/update_color.ts        | 15 +++++++++++++++
 src/common/entity/state_color.ts               |  8 +++-----
 src/resources/ha-style.ts                      |  1 -
 5 files changed, 27 insertions(+), 8 deletions(-)
 create mode 100644 src/common/entity/color/update_color.ts

diff --git a/src/common/entity/color/battery_color.ts b/src/common/entity/color/battery_color.ts
index daa3715450..b10c5144fe 100644
--- a/src/common/entity/color/battery_color.ts
+++ b/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";
diff --git a/src/common/entity/color/binary_sensor_color.ts b/src/common/entity/color/binary_sensor_color.ts
index 0d7949b39a..f3458214fd 100644
--- a/src/common/entity/color/binary_sensor_color.ts
+++ b/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";
diff --git a/src/common/entity/color/update_color.ts b/src/common/entity/color/update_color.ts
new file mode 100644
index 0000000000..b034239e95
--- /dev/null
+++ b/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";
+};
diff --git a/src/common/entity/state_color.ts b/src/common/entity/state_color.ts
index aed20531e3..613ce4e7d8 100644
--- a/src/common/entity/state_color.ts
+++ b/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;
diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts
index 07b2fbde32..ab7b577356 100644
--- a/src/resources/ha-style.ts
+++ b/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);