Improve person/alarm/lock state (#14633)

* Opening device_class as alerting

* Don't use blue color for default active color

* Improve lock colors

* Green color for disarmed alarm

* Revert "Opening device_class as alerting"

This reverts commit b78342678d430eb3967f82e759342955b44417ad.

* Don't use active color

* Revert amber color because fixed in another PR

* Improve person, lock and alarm color state

* Sort variables

* Use alarm color in alarm card

src/common/entity/color/alarm_control_panel_color.ts

@@ -13,6 +13,8 @@ export const alarmControlPanelColor = (state?: string): string | undefined => {
       return "alarm-arming";
     case "triggered":
       return "alarm-triggered";
+    case "disarmed":
+      return "alarm-disarmed";
     default:
       return undefined;
   }

src/common/entity/color/lock_color.ts

@@ -1,5 +1,7 @@
 export const lockColor = (state?: string): string | undefined => {
   switch (state) {
+    case "unlocked":
+      return "lock-unlocked";
     case "locked":
       return "lock-locked";
     case "jammed":

src/common/entity/color/person_color.ts

@@ -2,6 +2,8 @@ export const personColor = (state: string): string | undefined => {
   switch (state) {
     case "home":
       return "person-home";
+    case "not_home":
+      return "person-not-home";
     default:
       return "person-zone";
   }

src/common/entity/state_active.ts

@@ -16,15 +16,15 @@ export function stateActive(stateObj: HassEntity, state?: string): boolean {
 
   // Custom cases
   switch (domain) {
+    case "alarm_control_panel":
+      return compareState !== "disarmed";
     case "cover":
       return !["closed", "closing"].includes(compareState);
     case "device_tracker":
     case "person":
       return compareState !== "not_home";
-    case "alarm_control_panel":
-      return compareState !== "disarmed";
     case "lock":
-      return compareState !== "unlocked";
+      return compareState !== "locked";
     case "media_player":
       return compareState !== "standby";
     case "vacuum":

src/common/entity/state_color.ts

@@ -11,7 +11,7 @@ import { sensorColor } from "./color/sensor_color";
 import { computeDomain } from "./compute_domain";
 import { stateActive } from "./state_active";
 
-const STATIC_COLORED_DOMAIN = new Set([
+const STATIC_ACTIVE_COLORED_DOMAIN = new Set([
   "alert",
   "automation",
   "calendar",
@@ -37,16 +37,16 @@ export const stateColorCss = (stateObj: HassEntity, state?: string) => {
     return `var(--rgb-state-unavailable-color)`;
   }
 
-  if (!stateActive(stateObj, state)) {
-    return `var(--rgb-state-inactive-color)`;
-  }
-
   const domainColor = stateColor(stateObj, state);
 
   if (domainColor) {
     return `var(--rgb-state-${domainColor}-color)`;
   }
 
+  if (!stateActive(stateObj, state)) {
+    return `var(--rgb-state-inactive-color)`;
+  }
+
   return undefined;
 };
 
@@ -54,7 +54,10 @@ export const stateColor = (stateObj: HassEntity, state?: string) => {
   const compareState = state !== undefined ? state : stateObj?.state;
   const domain = computeDomain(stateObj.entity_id);
 
-  if (STATIC_COLORED_DOMAIN.has(domain)) {
+  if (
+    STATIC_ACTIVE_COLORED_DOMAIN.has(domain) &&
+    stateActive(stateObj, state)
+  ) {
     return domain.replace("_", "-");
   }
 

src/components/chart/timeline-chart/timeline-color.ts

@@ -56,22 +56,19 @@ function computeTimelineStateColor(
     return rgb2hex(rgb);
   }
 
-  if (!stateActive(stateObj, state)) {
+  const color = stateColor(stateObj, state);
+
+  if (!color && !stateActive(stateObj, state)) {
     const rgb = cssToRgb("--rgb-state-inactive-color", computedStyles);
     if (!rgb) return undefined;
     return rgb2hex(rgb);
   }
 
-  const color = stateColor(stateObj, state);
-
-  if (!color) return undefined;
-
-  const domain = computeDomain(stateObj.entity_id);
-
   const rgb = cssToRgb(`--rgb-state-${color}-color`, computedStyles);
 
   if (!rgb) return undefined;
 
+  const domain = computeDomain(stateObj.entity_id);
   const shade = DOMAIN_STATE_SHADES[domain]?.[state] as number | number;
   if (!shade) {
     return rgb2hex(rgb);

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

@@ -269,12 +269,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
         flex-direction: column;
         align-items: center;
         box-sizing: border-box;
-        --alarm-color-disarmed: var(--label-badge-green);
-        --alarm-color-pending: var(--label-badge-yellow);
-        --alarm-color-triggered: var(--label-badge-red);
-        --alarm-color-armed: var(--label-badge-red);
-        --alarm-color-autoarm: rgba(0, 153, 255, 0.1);
-        --alarm-state-color: var(--alarm-color-armed);
+        --alarm-state-color: rgb(var(--rgb-state-alarm-armed-color));
       }
 
       ha-chip {
@@ -292,25 +287,25 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
       }
 
       .unavailable {
-        --alarm-state-color: var(--state-unavailable-color);
+        --alarm-state-color: rgb(var(--rgb-state-unavailable-color));
       }
 
       .disarmed {
-        --alarm-state-color: var(--alarm-color-disarmed);
+        --alarm-state-color: rgb(var(--rgb-state-alarm-disarmed-color));
       }
 
       .triggered {
-        --alarm-state-color: var(--alarm-color-triggered);
+        --alarm-state-color: rgb(var(--rgb-state-alarm-trigger-color));
         animation: pulse 1s infinite;
       }
 
       .arming {
-        --alarm-state-color: var(--alarm-color-pending);
+        --alarm-state-color: rgb(var(--rgb-state-alarm-arming-color));
         animation: pulse 1s infinite;
       }
 
       .pending {
-        --alarm-state-color: var(--alarm-color-pending);
+        --alarm-state-color: rgb(var(--rgb-state-alarm-pending-color));
         animation: pulse 1s infinite;
       }
 

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

@@ -22,11 +22,11 @@ function personBadgeIcon(entity: HassEntity) {
 function personBadgeColor(entity: HassEntity) {
   switch (entity.state) {
     case "home":
-      return "var(--rgb-badge-person-home-color)";
+      return "var(--rgb-state-person-home-color)";
     case "not_home":
-      return "var(--rgb-badge-person-not-home-color)";
+      return "var(--rgb-state-person-not-home-color)";
     default:
-      return "var(--rgb-badge-person-zone-color)";
+      return "var(--rgb-state-person-zone-color)";
   }
 }
 

src/resources/ha-style.ts

@@ -136,12 +136,13 @@ documentContainer.innerHTML = `<custom-style>
 
       /* rgb state color */
       --rgb-state-default-color: var(--rgb-dark-primary-color, 68, 115, 158);
-      --rgb-state-unavailable-color: var(--rgb-disabled-color);
       --rgb-state-inactive-color: var(--rgb-inactive-color);
+      --rgb-state-unavailable-color: var(--rgb-disabled-color);
 
-      /* rgb state color */
-      --rgb-state-alarm-armed-color: var(--rgb-red-color);
+      /* rgb state domain colors */
+      --rgb-state-alarm-armed-color: var(--rgb-green-color);
       --rgb-state-alarm-arming-color: var(--rgb-orange-color);
+      --rgb-state-alarm-disarmed-color: var(--rgb-inactive-color);
       --rgb-state-alarm-pending-color: var(--rgb-orange-color);
       --rgb-state-alarm-triggered-color: var(--rgb-red-color);
       --rgb-state-alert-color: var(--rgb-red-color);
@@ -164,10 +165,12 @@ documentContainer.innerHTML = `<custom-style>
       --rgb-state-input-boolean-color: var(--rgb-amber-color);
       --rgb-state-light-color: var(--rgb-amber-color);
       --rgb-state-lock-jammed-color: var(--rgb-red-color);
-      --rgb-state-lock-locked-color: var(--rgb-red-color);
+      --rgb-state-lock-locked-color: var(--rgb-green-color);
       --rgb-state-lock-pending-color: var(--rgb-orange-color);
+      --rgb-state-lock-unlocked-color: var(--rgb-red-color);
       --rgb-state-media-player-color: var(--rgb-indigo-color);
       --rgb-state-person-home-color: var(--rgb-green-color);
+      --rgb-state-person-not-home-color: var(--rgb-inactive-color);
       --rgb-state-person-zone-color: var(--rgb-blue-color);
       --rgb-state-remote-color: var(--rgb-amber-color);
       --rgb-state-script-color: var(--rgb-amber-color);
@@ -184,11 +187,6 @@ documentContainer.innerHTML = `<custom-style>
       --rgb-state-update-installing-color: var(--rgb-orange-color);
       --rgb-state-vacuum-color: var(--rgb-teal-color);
 
-      /* rgb state badge color */
-      --rgb-badge-person-home-color: var(--rgb-state-person-home-color);
-      --rgb-badge-person-zone-color: var(--rgb-state-person-zone-color);
-      --rgb-badge-person-not-home-color: var(--rgb-red-color);
-
       /* input components */
       --input-idle-line-color: rgba(0, 0, 0, 0.42);
       --input-hover-line-color: rgba(0, 0, 0, 0.87);