diff --git a/gallery/src/pages/misc/entity-state.ts b/gallery/src/pages/misc/entity-state.ts index 35fe96528a..3e04eda8f0 100644 --- a/gallery/src/pages/misc/entity-state.ts +++ b/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.on", "on"), + createEntity("camera.idle", "idle"), + 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.on", "on"), + createEntity("timer.idle", "idle"), + createEntity("timer.active", "active"), + createEntity("timer.paused", "paused"), // Vacuum createEntity("vacuum.docked", "docked"), createEntity("vacuum.cleaning", "cleaning"), diff --git a/src/common/entity/state_color.ts b/src/common/entity/state_color.ts index 96bae8ef51..6ac74f5fa1 100644 --- a/src/common/entity/state_color.ts +++ b/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) { - case "automation": - return "automation"; + if (STATIC_COLORED_DOMAIN.has(domain)) { + return domain.replace("_", "-"); + } + 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" diff --git a/src/panels/lovelace/cards/hui-area-card.ts b/src/panels/lovelace/cards/hui-area-card.ts index 64104a6335..a2bf35cbbe 100644 --- a/src/panels/lovelace/cards/hui-area-card.ts +++ b/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)); } `; } diff --git a/src/panels/lovelace/cards/hui-light-card.ts b/src/panels/lovelace/cards/hui-light-card.ts index 37dcd61603..c1410dbc56 100644 --- a/src/panels/lovelace/cards/hui-light-card.ts +++ b/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 { diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts index 24ca54f038..63ed84aa9a 100644 --- a/src/resources/ha-style.ts +++ b/src/resources/ha-style.ts @@ -59,8 +59,6 @@ documentContainer.innerHTML = ` /* 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 = ` /* 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 = ` --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 = ` --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);