Use active color for position cover tile feature even if it's closed (#17685)

src/dialogs/more-info/components/cover/ha-more-info-cover-position.ts

@@ -35,7 +35,9 @@ export class HaMoreInfoCoverPosition extends LitElement {
   }
 
   protected render(): TemplateResult {
-    const color = stateColorCss(this.stateObj);
+    const forcedState = this.stateObj.state === "closed" ? "open" : undefined;
+
+    const color = stateColorCss(this.stateObj, forcedState);
 
     return html`
       <ha-control-slider
@@ -68,8 +70,6 @@ export class HaMoreInfoCoverPosition extends LitElement {
         height: 45vh;
         max-height: 320px;
         min-height: 200px;
-        /* Force inactive state to be colored for the slider */
-        --state-cover-inactive-color: var(--state-cover-active-color);
         --control-slider-thickness: 100px;
         --control-slider-border-radius: 24px;
         --control-slider-color: var(--primary-color);

src/dialogs/more-info/components/cover/ha-more-info-cover-tilt-position.ts

@@ -72,8 +72,9 @@ export class HaMoreInfoCoverTiltPosition extends LitElement {
   }
 
   protected render(): TemplateResult {
-    const color = stateColorCss(this.stateObj);
+    const forcedState = this.stateObj.state === "closed" ? "open" : undefined;
-    const isUnavailable = this.stateObj.state === UNAVAILABLE;
+
+    const color = stateColorCss(this.stateObj, forcedState);
 
     return html`
       <ha-control-slider
@@ -93,7 +94,7 @@ export class HaMoreInfoCoverTiltPosition extends LitElement {
           "--control-slider-color": color,
           "--control-slider-background": color,
         })}
-        .disabled=${isUnavailable}
+        .disabled=${this.stateObj.state === UNAVAILABLE}
       >
         <div slot="background" class="gradient"></div>
       </ha-control-slider>
@@ -106,8 +107,6 @@ export class HaMoreInfoCoverTiltPosition extends LitElement {
         height: 45vh;
         max-height: 320px;
         min-height: 200px;
-        /* Force inactive state to be colored for the slider */
-        --state-cover-inactive-color: var(--state-cover-active-color);
         --control-slider-thickness: 100px;
         --control-slider-border-radius: 24px;
         --control-slider-color: var(--primary-color);

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

@@ -424,6 +424,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
     if (this.hass) {
       element.hass = this.hass;
       (element as LovelaceTileFeature).stateObj = stateObj;
+      (element as LovelaceTileFeature).color = this._config!.color;
     }
 
     return html`${element}`;

src/panels/lovelace/tile-features/hui-cover-position-tile-feature.ts

@@ -1,15 +1,18 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { styleMap } from "lit/directives/style-map";
+import { computeCssColor } from "../../../common/color/compute-color";
+import { computeAttributeNameDisplay } from "../../../common/entity/compute_attribute_display";
 import { computeDomain } from "../../../common/entity/compute_domain";
+import { stateActive } from "../../../common/entity/state_active";
+import { stateColorCss } from "../../../common/entity/state_color";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import { CoverEntityFeature } from "../../../data/cover";
+import { UNAVAILABLE } from "../../../data/entity";
 import { HomeAssistant } from "../../../types";
 import { LovelaceTileFeature } from "../types";
 import { CoverPositionTileFeatureConfig } from "./types";
-import { stateActive } from "../../../common/entity/state_active";
-import { computeAttributeNameDisplay } from "../../../common/entity/compute_attribute_display";
-import { UNAVAILABLE } from "../../../data/entity";
 
 export const supportsCoverPositionTileFeature = (stateObj: HassEntity) => {
   const domain = computeDomain(stateObj.entity_id);
@@ -28,6 +31,8 @@ class HuiCoverPositionTileFeature
 
   @property({ attribute: false }) public stateObj?: HassEntity;
 
+  @property({ attribute: false }) public color?: string;
+
   @state() private _config?: CoverPositionTileFeatureConfig;
 
   static getStubConfig(): CoverPositionTileFeatureConfig {
@@ -59,24 +64,36 @@ class HuiCoverPositionTileFeature
 
     const value = Math.max(Math.round(percentage), 0);
 
-    return html` <div class="container">
+    const forcedState = this.stateObj.state === "closed" ? "open" : undefined;
-      <ha-control-slider
+
-        .value=${value}
+    const color = this.color
-        min="0"
+      ? computeCssColor(this.color)
-        max="100"
+      : stateColorCss(this.stateObj, forcedState);
-        step="1"
+
-        inverted
+    const style = {
-        show-handle
+      "--color": color,
-        @value-changed=${this._valueChanged}
+    };
-        .ariaLabel=${computeAttributeNameDisplay(
+
-          this.hass.localize,
+    return html`
-          this.stateObj,
+      <div class="container" style=${styleMap(style)}>
-          this.hass.entities,
+        <ha-control-slider
-          "current_position"
+          .value=${value}
-        )}
+          min="0"
-        .disabled=${this.stateObj!.state === UNAVAILABLE}
+          max="100"
-      ></ha-control-slider>
+          step="1"
-    </div>`;
+          inverted
+          show-handle
+          @value-changed=${this._valueChanged}
+          .ariaLabel=${computeAttributeNameDisplay(
+            this.hass.localize,
+            this.stateObj,
+            this.hass.entities,
+            "current_position"
+          )}
+          .disabled=${this.stateObj!.state === UNAVAILABLE}
+        ></ha-control-slider>
+      </div>
+    `;
   }
 
   private _valueChanged(ev: CustomEvent) {
@@ -92,9 +109,8 @@ class HuiCoverPositionTileFeature
   static get styles() {
     return css`
       ha-control-slider {
-        /* Force inactive state to be colored for the slider */
+        --control-slider-color: var(--color);
-        --control-slider-color: var(--tile-color);
+        --control-slider-background: var(--color);
-        --control-slider-background: var(--tile-color);
         --control-slider-background-opacity: 0.2;
         --control-slider-thickness: 40px;
         --control-slider-border-radius: 10px;

src/panels/lovelace/tile-features/hui-cover-tilt-position-tile-feature.ts

@@ -1,8 +1,11 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { styleMap } from "lit/directives/style-map";
+import { computeCssColor } from "../../../common/color/compute-color";
 import { computeAttributeNameDisplay } from "../../../common/entity/compute_attribute_display";
 import { computeDomain } from "../../../common/entity/compute_domain";
+import { stateColorCss } from "../../../common/entity/state_color";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import { CoverEntity, CoverEntityFeature } from "../../../data/cover";
 import { UNAVAILABLE } from "../../../data/entity";
@@ -30,6 +33,8 @@ class HuiCoverTiltPositionTileFeature
 
   @property({ attribute: false }) public stateObj?: CoverEntity;
 
+  @property({ attribute: false }) public color?: string;
+
   @state() private _config?: CoverTiltPositionTileFeatureConfig;
 
   static getStubConfig(): CoverTiltPositionTileFeatureConfig {
@@ -59,8 +64,18 @@ class HuiCoverTiltPositionTileFeature
 
     const value = Math.max(Math.round(percentage), 0);
 
+    const forcedState = this.stateObj.state === "closed" ? "open" : undefined;
+
+    const color = this.color
+      ? computeCssColor(this.color)
+      : stateColorCss(this.stateObj, forcedState);
+
+    const style = {
+      "--color": color,
+    };
+
     return html`
-      <div class="container">
+      <div class="container" style=${styleMap(style)}>
         <ha-control-slider
           .value=${value}
           min="0"
@@ -96,8 +111,8 @@ class HuiCoverTiltPositionTileFeature
     return css`
       ha-control-slider {
         /* Force inactive state to be colored for the slider */
-        --control-slider-color: var(--tile-color);
+        --control-slider-color: var(--color);
-        --control-slider-background: var(--tile-color);
+        --control-slider-background: var(--color);
         --control-slider-background-opacity: 0.2;
         --control-slider-thickness: 40px;
         --control-slider-border-radius: 10px;

src/panels/lovelace/types.ts

@@ -116,6 +116,7 @@ export interface LovelaceTileFeature extends HTMLElement {
   hass?: HomeAssistant;
   stateObj?: HassEntity;
   setConfig(config: LovelaceTileFeatureConfig);
+  color?: string;
 }
 
 export interface LovelaceTileFeatureConstructor