Transparent unavailable state in history (#14710)

* Use transparent color for unavailable state for history

* Remove inactive color

* Only color active state for badge icon

* Simplify condition

* Update src/components/chart/timeline-chart/textbar-element.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/common/color/compute-color.ts

@@ -4,7 +4,6 @@ export const THEME_COLORS = new Set([
   "primary",
   "accent",
   "disabled",
-  "inactive",
   "red",
   "pink",
   "purple",

src/components/chart/timeline-chart/textbar-element.ts

@@ -37,8 +37,11 @@ export class TextBarElement extends BarElement {
     }
     const textColor =
       options.textColor ||
-      (options.backgroundColor &&
+      (options?.backgroundColor === "transparent"
-        (luminosity(hex2rgb(options.backgroundColor)) > 0.5 ? "#000" : "#fff"));
+        ? "transparent"
+        : luminosity(hex2rgb(options.backgroundColor)) > 0.5
+        ? "#000"
+        : "#fff");
 
     // ctx.font = "12px arial";
     ctx.fillStyle = textColor;

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

@@ -51,9 +51,7 @@ function computeTimelineStateColor(
   stateObj?: HassEntity
 ): string | undefined {
   if (!stateObj || state === UNAVAILABLE) {
-    const rgb = cssToRgb("--rgb-state-unavailable-color", computedStyles);
+    return "transparent";
-    if (!rgb) return undefined;
-    return rgb2hex(rgb);
   }
 
   const color = stateColor(stateObj, state);

src/components/entity/state-badge.ts

@@ -107,27 +107,25 @@ export class StateBadge extends LitElement {
         }
         hostStyle.backgroundImage = `url(${imageUrl})`;
         this._showIcon = false;
-      } else if (this._stateColor) {
+      } else if (this._stateColor && stateActive(stateObj)) {
         const color = stateColorCss(stateObj);
         if (color) {
           iconStyle.color = `rgb(${color})`;
         }
-        if (stateActive(stateObj)) {
+        if (stateObj.attributes.rgb_color) {
-          if (stateObj.attributes.rgb_color) {
+          iconStyle.color = `rgb(${stateObj.attributes.rgb_color.join(",")})`;
-            iconStyle.color = `rgb(${stateObj.attributes.rgb_color.join(",")})`;
+        }
-          }
+        if (stateObj.attributes.brightness) {
-          if (stateObj.attributes.brightness) {
+          const brightness = stateObj.attributes.brightness;
-            const brightness = stateObj.attributes.brightness;
+          if (typeof brightness !== "number") {
-            if (typeof brightness !== "number") {
+            const errorMessage = `Type error: state-badge expected number, but type of ${
-              const errorMessage = `Type error: state-badge expected number, but type of ${
+              stateObj.entity_id
-                stateObj.entity_id
+            }.attributes.brightness is ${typeof brightness} (${brightness})`;
-              }.attributes.brightness is ${typeof brightness} (${brightness})`;
+            // eslint-disable-next-line
-              // eslint-disable-next-line
+            console.warn(errorMessage);
-              console.warn(errorMessage);
-            }
-            // lowest brightness will be around 50% (that's pretty dark)
-            iconStyle.filter = `brightness(${(brightness + 245) / 5}%)`;
           }
+          // lowest brightness will be around 50% (that's pretty dark)
+          iconStyle.filter = `brightness(${(brightness + 245) / 5}%)`;
         }
       }
     } else if (this.overrideImage) {

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

@@ -156,8 +156,8 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
       ? this._config.name || (stateObj ? computeStateName(stateObj) : "")
       : "";
 
-    const colored = stateObj && this.getStateColor(stateObj, this._config);
+    const active = stateObj && stateActive(stateObj);
-    const active = stateObj && colored && stateActive(stateObj);
+    const colored = active && this.getStateColor(stateObj, this._config);
 
     return html`
       <ha-card
@@ -316,7 +316,9 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
     return "";
   }
 
-  private _computeColor(stateObj: HassEntity | LightEntity): string {
+  private _computeColor(
+    stateObj: HassEntity | LightEntity
+  ): string | undefined {
     if (stateObj.attributes.rgb_color && stateActive(stateObj)) {
       return `rgb(${stateObj.attributes.rgb_color.join(",")})`;
     }
@@ -324,7 +326,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
     if (iconColor) {
       return `rgb(${iconColor})`;
     }
-    return "";
+    return undefined;
   }
 
   private _handleAction(ev: ActionHandlerEvent) {

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

@@ -133,8 +133,8 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
 
     const name = this._config.name || computeStateName(stateObj);
 
-    const colored = stateObj && this.getStateColor(stateObj, this._config);
+    const active = stateObj && stateActive(stateObj);
-    const active = stateObj && colored && stateActive(stateObj);
+    const colored = active && this.getStateColor(stateObj, this._config);
 
     return html`
       <ha-card @click=${this._handleClick} tabindex="0">
@@ -193,12 +193,14 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
     `;
   }
 
-  private _computeColor(stateObj: HassEntity | LightEntity): string {
+  private _computeColor(
+    stateObj: HassEntity | LightEntity
+  ): string | undefined {
     const iconColor = stateColorCss(stateObj);
     if (iconColor) {
       return `rgb(${iconColor})`;
     }
-    return "";
+    return undefined;
   }
 
   protected shouldUpdate(changedProps: PropertyValues): boolean {

src/resources/ha-style.ts

@@ -107,7 +107,6 @@ documentContainer.innerHTML = `<custom-style>
       --rgb-primary-color: 3, 169, 244;
       --rgb-accent-color: 255, 152, 0;
       --rgb-disabled-color: 189, 189, 189;
-      --rgb-inactive-color: 114, 114, 114;
       --rgb-primary-text-color: 33, 33, 33;
       --rgb-secondary-text-color: 114, 114, 114;
       --rgb-text-primary-color: 255, 255, 255;
@@ -136,13 +135,13 @@ documentContainer.innerHTML = `<custom-style>
 
       /* rgb state color */
       --rgb-state-default-color: var(--rgb-dark-primary-color, 68, 115, 158);
-      --rgb-state-inactive-color: var(--rgb-inactive-color);
+      --rgb-state-inactive-color: var(--rgb-grey-color);
       --rgb-state-unavailable-color: var(--rgb-disabled-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-disarmed-color: var(--rgb-grey-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);
@@ -170,7 +169,7 @@ documentContainer.innerHTML = `<custom-style>
       --rgb-state-lock-unlocked-color: var(--rgb-red-color);
       --rgb-state-media-player-color: var(--rgb-light-blue-color);
       --rgb-state-person-home-color: var(--rgb-green-color);
-      --rgb-state-person-not-home-color: var(--rgb-inactive-color);
+      --rgb-state-person-not-home-color: var(--rgb-grey-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);

src/resources/styles.ts

@@ -49,7 +49,6 @@ export const darkStyles = {
   "map-filter":
     "invert(.9) hue-rotate(170deg) brightness(1.5) contrast(1.2) saturate(.3)",
   "rgb-disabled-color": "70, 70, 70",
-  "rgb-inactive-color": "141, 141, 141",
 };
 
 export const derivedStyles = {