Use CSS colors for tile components (#14770)

* Do not use rgb colors for tile components

* Fixes gallery

* Change tile color

* Do not use rgb colors in tile button

gallery/src/pages/components/ha-bar-slider.ts

@@ -142,7 +142,8 @@ export class DemoHaBarSlider extends LitElement {
       }
       .custom {
         --slider-bar-color: #ffcf4c;
-        --slider-bar-background: #ffcf4c64;
+        --slider-bar-background: #ffcf4c;
+        --slider-bar-background-opacity: 0.2;
         --slider-bar-thickness: 100px;
         --slider-bar-border-radius: 24px;
       }

gallery/src/pages/components/ha-bar-switch.ts

@@ -115,8 +115,8 @@ export class DemoHaBarSwitch extends LitElement {
         font-weight: 600;
       }
       .custom {
-        --switch-bar-color-on: var(--rgb-green-color);
+        --switch-bar-on-color: rgb(var(--rgb-green-color));
-        --switch-bar-color-off: var(--rgb-red-color);
+        --switch-bar-off-color: rgb(var(--rgb-red-color));
         --switch-bar-thickness: 100px;
         --switch-bar-border-radius: 24px;
         --switch-bar-padding: 6px;

src/common/color/compute-color.ts

@@ -1,5 +1,3 @@
-import { hex2rgb } from "./convert-color";
-
 export const THEME_COLORS = new Set([
   "primary",
   "accent",
@@ -27,16 +25,9 @@ export const THEME_COLORS = new Set([
   "white",
 ]);
 
-export function computeRgbColor(color: string): string {
+export function computeCssColor(color: string): string {
   if (THEME_COLORS.has(color)) {
-    return `var(--rgb-${color}-color)`;
+    return `rgb(var(--rgb-${color}-color))`;
-  }
-  if (color.startsWith("#")) {
-    try {
-      return hex2rgb(color).join(", ");
-    } catch (err) {
-      return "";
-    }
   }
   return color;
 }

src/components/ha-bar-slider.ts

@@ -272,7 +272,8 @@ export class HaBarSlider extends LitElement {
       :host {
         display: block;
         --slider-bar-color: rgb(var(--rgb-primary-color));
-        --slider-bar-background: rgba(var(--rgb-disabled-color), 0.2);
+        --slider-bar-background: rgb(var(--rgb-disabled-color));
+        --slider-bar-background-opacity: 0.2;
         --slider-bar-thickness: 40px;
         --slider-bar-border-radius: 10px;
         height: var(--slider-bar-thickness);
@@ -301,6 +302,7 @@ export class HaBarSlider extends LitElement {
         height: 100%;
         width: 100%;
         background: var(--slider-bar-background);
+        opacity: var(--slider-bar-background-opacity);
       }
       .slider .slider-track-bar {
         --border-radius: var(--slider-bar-border-radius);

src/components/ha-bar-switch.ts

@@ -74,6 +74,7 @@ export class HaBarSwitch extends LitElement {
   protected render(): TemplateResult {
     return html`
       <div class="switch">
+        <div class="background"></div>
         <div class="button" aria-hidden="true">
           ${this.checked
             ? this.pathOn
@@ -91,8 +92,9 @@ export class HaBarSwitch extends LitElement {
     return css`
       :host {
         display: block;
-        --switch-bar-color-on: var(--rgb-primary-color);
+        --switch-bar-on-color: rgb(var(--rgb-primary-color));
-        --switch-bar-color-off: var(--rgb-disabled-color);
+        --switch-bar-off-color: rgb(var(--rgb-disabled-color));
+        --switch-bar-background-opacity: 0.2;
         --switch-bar-thickness: 40px;
         --switch-bar-border-radius: 12px;
         --switch-bar-padding: 4px;
@@ -109,11 +111,20 @@ export class HaBarSwitch extends LitElement {
         height: 100%;
         width: 100%;
         border-radius: var(--switch-bar-border-radius);
-        background-color: rgba(var(--switch-bar-color-off), 0.3);
+        overflow: hidden;
         padding: var(--switch-bar-padding);
-        transition: background-color 180ms ease-in-out;
         display: flex;
       }
+      .switch .background {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        background-color: var(--switch-bar-off-color);
+        transition: background-color 180ms ease-in-out;
+        opacity: var(--switch-bar-background-opacity);
+      }
       .switch .button {
         width: 50%;
         height: 100%;
@@ -123,18 +134,18 @@ export class HaBarSwitch extends LitElement {
         );
         transition: transform 180ms ease-in-out,
           background-color 180ms ease-in-out;
-        background-color: rgb(var(--switch-bar-color-off));
+        background-color: var(--switch-bar-off-color);
         color: white;
         display: flex;
         align-items: center;
         justify-content: center;
       }
-      :host([checked]) .switch {
+      :host([checked]) .switch .background {
-        background-color: rgba(var(--switch-bar-color-on), 0.3);
+        background-color: var(--switch-bar-on-color);
       }
       :host([checked]) .switch .button {
         transform: translateX(100%);
-        background-color: rgb(var(--switch-bar-color-on));
+        background-color: var(--switch-bar-on-color);
       }
       :host([reversed]) .switch {
         flex-direction: row-reverse;

src/components/tile/ha-tile-button.ts

@@ -41,7 +41,9 @@ export class HaTileButton extends LitElement {
         @touchcancel=${this.handleRippleDeactivate}
       >
         <slot></slot>
-        ${this._shouldRenderRipple ? html`<mwc-ripple></mwc-ripple>` : ""}
+        ${this._shouldRenderRipple && !this.disabled
+          ? html`<mwc-ripple></mwc-ripple>`
+          : ""}
       </button>
     `;
   }
@@ -79,9 +81,10 @@ export class HaTileButton extends LitElement {
   static get styles(): CSSResultGroup {
     return css`
       :host {
-        --icon-color: rgb(var(--color, var(--rgb-primary-text-color)));
+        --tile-button-icon-color: var(--primary-text-color);
-        --bg-color: rgba(var(--color, var(--rgb-disabled-color)), 0.2);
+        --tile-button-background-color: rgb(var(--rgb-disabled-color));
-        --mdc-ripple-color: rgba(var(--color, var(--rgb-disabled-color)));
+        --tile-button-background-opacity: 0.2;
+        --mdc-ripple-color: var(--tile-button-background-color);
         width: 40px;
         height: 40px;
         -webkit-tap-highlight-color: transparent;
@@ -97,25 +100,37 @@ export class HaTileButton extends LitElement {
         height: 100%;
         border-radius: 10px;
         border: none;
-        background-color: var(--bg-color);
-        transition: background-color 280ms ease-in-out, transform 180ms ease-out;
         margin: 0;
         padding: 0;
         box-sizing: border-box;
         line-height: 0;
         outline: none;
+        overflow: hidden;
+        background: none;
+      }
+      .button::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        background-color: var(--tile-button-background-color);
+        transition: background-color 180ms ease-in-out,
+          opacity 180ms ease-in-out;
+        opacity: var(--tile-button-background-opacity);
       }
       .button ::slotted(*) {
         --mdc-icon-size: 20px;
-        color: var(--icon-color);
+        transition: color 180ms ease-in-out;
+        color: var(--tile-button-icon-color);
         pointer-events: none;
       }
       .button:disabled {
         cursor: not-allowed;
-        background-color: rgba(var(--rgb-disabled-color), 0.2);
+        --tile-button-background-color: rgb(var(--rgb-disabled-color));
-      }
+        --tile-button-icon-color: var(--disabled-text-color);
-      .button:disabled ::slotted(*) {
+        --tile-button-background-opacity: 0.2;
-        color: rgb(var(--rgb-disabled-color));
       }
     `;
   }

src/components/tile/ha-tile-icon.ts

@@ -22,10 +22,20 @@ export class HaTileIcon extends LitElement {
   static get styles(): CSSResultGroup {
     return css`
       :host {
-        --icon-color: rgb(var(--color));
+        --tile-icon-color: rgb(var(--rgb-disabled-color));
-        --shape-color: rgba(var(--color), 0.2);
         --mdc-icon-size: 24px;
       }
+      .shape::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        background-color: var(--tile-icon-color);
+        transition: background-color 180ms ease-in-out;
+        opacity: 0.2;
+      }
       .shape {
         position: relative;
         width: 40px;
@@ -34,13 +44,13 @@ export class HaTileIcon extends LitElement {
         display: flex;
         align-items: center;
         justify-content: center;
-        background-color: var(--shape-color);
+        transition: color 180ms ease-in-out;
-        transition: background-color 180ms ease-in-out, color 180ms ease-in-out;
+        overflow: hidden;
       }
       .shape ha-icon,
       .shape ha-svg-icon {
         display: flex;
-        color: var(--icon-color);
+        color: var(--tile-icon-color);
         transition: color 180ms ease-in-out;
       }
     `;

src/components/tile/ha-tile-slider.ts

@@ -48,12 +48,16 @@ export class HaTileSlider extends LitElement {
     return css`
       ha-bar-slider {
         --slider-bar-color: var(
-          --tile-slider-bar-color,
+          --tile-slider-color,
           rgb(var(--rgb-primary-color))
         );
         --slider-bar-background: var(
-          --tile-slider-bar-background,
+          --tile-slider-background,
-          rgba(var(--rgb-disabled-color), 0.2)
+          rgb(var(--rgb-disabled-color))
+        );
+        --slider-bar-background-opacity: var(
+          --tile-slider-background-opacity,
+          0.2
         );
         --slider-bar-thickness: 40px;
         --slider-bar-border-radius: 10px;

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

@@ -4,7 +4,7 @@ import { HassEntity } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
-import { computeRgbColor } from "../../../common/color/compute-color";
+import { computeCssColor } from "../../../common/color/compute-color";
 import { hsv2rgb, rgb2hsv } from "../../../common/color/convert-color";
 import { DOMAINS_TOGGLE } from "../../../common/const";
 import { computeDomain } from "../../../common/entity/compute_domain";
@@ -131,7 +131,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
   private _computeStateColor = memoize((entity: HassEntity, color?: string) => {
     // Use custom color if active
     if (color) {
-      return stateActive(entity) ? computeRgbColor(color) : undefined;
+      return stateActive(entity) ? computeCssColor(color) : undefined;
     }
 
     // Use default color for person/device_tracker because color is on the badge
@@ -139,7 +139,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
       computeDomain(entity.entity_id) === "person" ||
       computeDomain(entity.entity_id) === "device_tracker"
     ) {
-      return "var(--rgb-state-default-color)";
+      return "rgb(var(--rgb-state-default-color))";
     }
 
     // Use light color if the light support rgb
@@ -158,11 +158,13 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
           hsvColor[1] = 0.4;
         }
       }
-      return hsv2rgb(hsvColor).join(",");
+      return `rgb(${hsv2rgb(hsvColor).join(",")})`;
     }
 
     // Fallback to state color
-    return stateColorCss(entity) ?? "var(--rgb-state-default-color)";
+    const stateColor =
+      stateColorCss(entity) ?? "var(--rgb-state-default-color)";
+    return `rgb(${stateColor})`;
   });
 
   private _computeStateDisplay(stateObj: HassEntity): TemplateResult | string {
@@ -226,11 +228,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
 
     if (!stateObj) {
       return html`
-        <ha-card
+        <ha-card class="disabled">
-          style=${styleMap({
-            "--tile-color": `var(--rgb-disabled-color)`,
-          })}
-        >
           <div class="tile">
             <div class="icon-container">
               <ha-tile-icon class="icon" .iconPath=${mdiHelp}></ha-tile-icon>
@@ -243,6 +241,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
               ></ha-tile-badge>
             </div>
             <ha-tile-info
+              class="info"
               .primary=${entityId}
               secondary=${this.hass.localize("ui.card.tile.not_found")}
             ></ha-tile-info>
@@ -311,6 +310,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
               : null}
           </div>
           <ha-tile-info
+            class="info"
             .primary=${name}
             .secondary=${stateDisplay}
             role="button"
@@ -364,13 +364,16 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
   static get styles(): CSSResultGroup {
     return css`
       :host {
-        --tile-color: var(--rgb-state-inactive-color);
+        --tile-color: rgb(var(--rgb-state-inactive-color));
         --tile-tap-padding: 6px;
         -webkit-tap-highlight-color: transparent;
       }
       ha-card {
         height: 100%;
       }
+      ha-card.disabled {
+        --tile-color: rgb(var(--rgb-disabled-color));
+      }
       [role="button"] {
         cursor: pointer;
       }
@@ -394,8 +397,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
         transition: transform 180ms ease-in-out;
       }
       .icon-container .icon {
-        --icon-color: rgb(var(--tile-color));
+        --tile-icon-color: var(--tile-color);
-        --shape-color: rgba(var(--tile-color), 0.2);
       }
       .icon-container .badge {
         position: absolute;
@@ -406,16 +408,28 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
       .icon-container[role="button"]:active {
         transform: scale(1.2);
       }
-      ha-tile-info {
+      .info {
+        position: relative;
         padding: var(--tile-tap-padding);
         flex: 1;
         min-width: 0;
         min-height: 40px;
-        border-radius: calc(var(--ha-card-border-radius, 10px) - 2px);
         transition: background-color 180ms ease-in-out;
       }
-      ha-tile-info:focus-visible {
+      .info::before {
-        background-color: rgba(var(--tile-color), 0.1);
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        border-radius: calc(var(--ha-card-border-radius, 10px) - 2px);
+        background-color: transparent;
+        opacity: 0.1;
+        transition: background-color ease-in-out 180ms;
+      }
+      .info:focus-visible::before {
+        background-color: var(--tile-color);
       }
     `;
   }

src/panels/lovelace/components/hui-color-picker.ts

@@ -3,7 +3,7 @@ import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import {
-  computeRgbColor,
+  computeCssColor,
   THEME_COLORS,
 } from "../../../common/color/compute-color";
 import { fireEvent } from "../../../common/dom/fire_event";
@@ -76,7 +76,7 @@ export class HuiColorPicker extends LitElement {
       <span
         class="circle-color"
         style=${styleMap({
-          "--circle-color": computeRgbColor(color),
+          "--circle-color": computeCssColor(color),
         })}
       ></span>
     `;
@@ -86,7 +86,7 @@ export class HuiColorPicker extends LitElement {
     return css`
       .circle-color {
         display: block;
-        background-color: rgb(var(--circle-color));
+        background-color: var(--circle-color);
         border-radius: 10px;
         width: 20px;
         height: 20px;

src/panels/lovelace/tile-features/hui-light-brightness-tile-feature.ts

@@ -73,8 +73,9 @@ class HuiLightBrightnessTileFeature
   static get styles() {
     return css`
       ha-tile-slider {
-        --tile-slider-bar-color: rgb(var(--tile-color));
+        --tile-slider-color: var(--tile-color);
-        --tile-slider-bar-background: rgba(var(--tile-color), 0.2);
+        --tile-slider-background: var(--tile-color);
+        --tile-slider-background-opacity: 0.2;
       }
       .container {
         padding: 0 12px 12px 12px;