Clean up colors code and add all missing domains (#14597)

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

@@ -120,8 +120,8 @@ const ENTITIES: HassEntity[] = [
   createEntity("calendar.off", "off"),
   createEntity("calendar.on", "on"),
   // Camera
-  createEntity("camera.off", "off"),
+  createEntity("camera.idle", "idle"),
-  createEntity("camera.on", "on"),
+  createEntity("camera.streaming", "streaming"),
   // Climate
   createEntity("climate.off", "off"),
   createEntity("climate.heat", "heat"),
@@ -155,6 +155,9 @@ const ENTITIES: HassEntity[] = [
   // Fan
   createEntity("fan.off", "off"),
   createEntity("fan.on", "on"),
+  // Camera
+  createEntity("group.off", "off"),
+  createEntity("group.on", "on"),
   // Humidifier
   createEntity("humidifier.off", "off"),
   createEntity("humidifier.on", "on"),
@@ -213,8 +216,9 @@ const ENTITIES: HassEntity[] = [
   createEntity("switch.switch_off", "off", "switch"),
   createEntity("switch.switch_on", "on", "switch"),
   // Timer
-  createEntity("timer.off", "off"),
+  createEntity("timer.idle", "idle"),
-  createEntity("timer.on", "on"),
+  createEntity("timer.active", "active"),
+  createEntity("timer.paused", "paused"),
   // Vacuum
   createEntity("vacuum.docked", "docked"),
   createEntity("vacuum.cleaning", "cleaning"),

src/common/entity/state_color.ts

@@ -10,6 +10,26 @@ import { sensorColor } from "./color/sensor_color";
 import { computeDomain } from "./compute_domain";
 import { stateActive } from "./state_active";
 
+const STATIC_COLORED_DOMAIN = new Set([
+  "alert",
+  "automation",
+  "calendar",
+  "camera",
+  "cover",
+  "fan",
+  "group",
+  "humidifier",
+  "input_boolean",
+  "light",
+  "media_player",
+  "remote",
+  "script",
+  "siren",
+  "switch",
+  "timer",
+  "vacuum",
+]);
+
 export const stateColorCss = (stateObj?: HassEntity, state?: string) => {
   if (!stateObj || !stateActive(stateObj, state)) {
     return `var(--rgb-disabled-color)`;
@@ -28,37 +48,23 @@ export const stateColor = (stateObj: HassEntity, state?: string) => {
   const compareState = state !== undefined ? state : stateObj?.state;
   const domain = computeDomain(stateObj.entity_id);
 
-  switch (domain) {
+  if (STATIC_COLORED_DOMAIN.has(domain)) {
-    case "automation":
+    return domain.replace("_", "-");
-      return "automation";
+  }
 
+  switch (domain) {
     case "alarm_control_panel":
       return alarmControlPanelColor(compareState);
 
     case "binary_sensor":
       return binarySensorColor(stateObj);
 
-    case "cover":
-      return "cover";
-
     case "climate":
       return climateColor(compareState);
 
-    case "fan":
-      return "fan";
-
     case "lock":
       return lockColor(compareState);
 
-    case "light":
-      return "light";
-
-    case "humidifier":
-      return "humidifier";
-
-    case "media_player":
-      return "media-player";
-
     case "person":
     case "device_tracker":
       return personColor(stateObj);
@@ -66,30 +72,9 @@ export const stateColor = (stateObj: HassEntity, state?: string) => {
     case "sensor":
       return sensorColor(stateObj);
 
-    case "vacuum":
-      return "vacuum";
-
-    case "siren":
-      return "siren";
-
     case "sun":
       return compareState === "above_horizon" ? "sun-day" : "sun-night";
 
-    case "switch":
-    case "input_boolean":
-      return "switch";
-
-    case "alert":
-      return "alert";
-
-    case "calendar":
-    case "camera":
-    case "remote":
-    case "script":
-    case "timer":
-    case "group":
-      return "active";
-
     case "update":
       return updateIsInstalling(stateObj as UpdateEntity)
         ? "update-installing"

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

@@ -564,7 +564,7 @@ export class HuiAreaCard
         --mdc-icon-button-size: 44px;
       }
       .on {
-        color: var(--paper-item-icon-active-color, #fdd835);
+        color: rgb(var(--rgb-state-light-color));
       }
     `;
   }

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

@@ -330,7 +330,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
       }
 
       .light-button.state-on {
-        color: var(--paper-item-icon-active-color, #fdd835);
+        color: rgb(var(--rgb-state-light-color));
       }
 
       .light-button.state-unavailable {

src/resources/ha-style.ts

@@ -59,8 +59,6 @@ documentContainer.innerHTML = `<custom-style>
 
       /* states */
       --state-icon-color: #44739e;
-      /* an active state is anything that would require attention */
-      --state-icon-active-color: #FDD835;
       /* an error state is anything that would be considered an error */
       /* --state-icon-error-color: #db4437; derived from error-color */
 
@@ -137,18 +135,28 @@ documentContainer.innerHTML = `<custom-style>
 
       /* rgb state color */
       --rgb-state-default-color: 68, 115, 158;
-      --rgb-state-active-color: var(--rgb-primary-color);
       --rgb-state-alarm-armed-color: var(--rgb-red-color);
-      --rgb-state-alarm-pending-color: var(--rgb-orange-color);
       --rgb-state-alarm-arming-color: var(--rgb-orange-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);
       --rgb-state-automation-color: var(--rgb-amber-color);
-      --rgb-state-binary-sensor-color: var(--rgb-primary-color);
       --rgb-state-binary-sensor-alerting-color: var(--rgb-red-color);
+      --rgb-state-binary-sensor-color: var(--rgb-blue-color);
+      --rgb-state-calendar-color: var(--rgb-blue-color);
+      --rgb-state-camera-color: var(--rgb-blue-color);
+      --rgb-state-climate-auto-color: var(--rgb-green-color);
+      --rgb-state-climate-cool-color: var(--rgb-blue-color);
+      --rgb-state-climate-dry-color: var(--rgb-orange-color);
+      --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-disabled-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);
       --rgb-state-humidifier-color: var(--rgb-blue-color);
+      --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);
@@ -156,6 +164,8 @@ documentContainer.innerHTML = `<custom-style>
       --rgb-state-media-player-color: var(--rgb-indigo-color);
       --rgb-state-person-home-color: var(--rgb-green-color);
       --rgb-state-person-zone-color: var(--rgb-blue-color);
+      --rgb-state-remote-color: var(--rgb-blue-color);
+      --rgb-state-script-color: var(--rgb-amber-color);
       --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);
@@ -164,16 +174,10 @@ documentContainer.innerHTML = `<custom-style>
       --rgb-state-sun-day-color: var(--rgb-amber-color);
       --rgb-state-sun-night-color: var(--rgb-deep-purple-color);
       --rgb-state-switch-color: var(--rgb-amber-color);
+      --rgb-state-timer-color: var(--rgb-amber-color);
       --rgb-state-update-color: var(--rgb-green-color);
       --rgb-state-update-installing-color: var(--rgb-orange-color);
       --rgb-state-vacuum-color: var(--rgb-teal-color);
-      --rgb-state-climate-auto-color: var(--rgb-green-color);
-      --rgb-state-climate-cool-color: var(--rgb-blue-color);
-      --rgb-state-climate-dry-color: var(--rgb-orange-color);
-      --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-state-default-color);
-      --rgb-state-climate-idle-color: var(--rgb-disabled-color);
 
       /* rgb state badge color */
       --rgb-badge-person-home-color: var(--rgb-state-person-home-color);