Support rgb state color css variables

Fix for HA 2022.12
jcwillox · Dec 11, 2022 · 5d922a8 · 5d922a8
1 parent 04f7521
commit 5d922a8
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 4 deletions.
diff --git a/src/const.ts b/src/const.ts
@@ -12,6 +12,9 @@ export const DOMAINS_TOGGLE = new Set([
 ]);
 
 export const STATES_ON = new Set(["open", "unlocked", "on"]);
+export const STATE_ON = "on";
+export const STATE_OFF = "off";
+
 export const STATE_UNAVAILABLE = "unavailable";
 
 export const TEMPLATE_OPTIONS = ["name", "icon", "image", "state"];
diff --git a/src/main.ts b/src/main.ts
@@ -5,6 +5,8 @@ import { handleAction, hasAction } from "./action";
 import { hass } from "card-tools/src/hass";
 import {
   DOMAINS_TOGGLE,
+  STATE_OFF,
+  STATE_ON,
   STATE_UNAVAILABLE,
   STATES_ON,
   TEMPLATE_OPTIONS
@@ -227,7 +229,12 @@ export class PaperButtonsRow extends LitElement {
                 (config.entity != undefined &&
                   this.hass!.states[config.entity]) ||
                 undefined;
+              const domain = config.entity && computeDomain(config.entity);
               const styles = this._getStyles(config);
+              const buttonStyles = {
+                ...this._getStateStyles(domain, stateObj?.state),
+                ...(styles.button || {})
+              } as StyleInfo;
 
               return html`
                 <paper-button
@@ -237,7 +244,7 @@ export class PaperButtonsRow extends LitElement {
                     hasDoubleClick: hasAction(config.double_tap_action),
                     repeat: config.hold_action?.repeat
                   })}"
-                  style="${styleMap((styles.button || {}) as StyleInfo)}"
+                  style="${styleMap(buttonStyles)}"
                   class="${this._getClass(stateObj?.state)}"
                   title="${computeTooltip(this.hass!, config)}"
                 >
@@ -337,6 +344,21 @@ export class PaperButtonsRow extends LitElement {
     return "";
   }
 
+  _getStateStyles(domain?: string, state?: string): StyleInfo {
+    if (!domain || !state || state == STATE_OFF || state == STATE_UNAVAILABLE)
+      return {};
+
+    domain = domain.replace(/_/g, "-");
+    state = state.replace(/_/g, "-");
+
+    return {
+      "--pbs-button-rgb-state-color":
+        state == STATE_ON
+          ? `var(--rgb-state-${domain}-color)`
+          : `var(--rgb-state-${domain}-${state}-color)`
+    };
+  }
+
   _getRippleClass(config: ButtonConfig) {
     if (config.layout?.length === 1 && config.layout[0] === "icon") {
       return "circle";

diff --git a/src/styles.css b/src/styles.css
@@ -11,7 +11,19 @@
 }
 
 paper-button {
-  color: var(--paper-item-icon-color);
+  color: var(
+    --pbs-button-color,
+    rgb(
+      var(
+        --pbs-button-rgb-color,
+        var(--pbs-button-rgb-state-color, var(--rgb-state-default-color))
+      )
+    )
+  );
+  background-color: var(
+    --pbs-button-bg-color,
+    rgba(var(--pbs-button-rgb-bg-color), var(--pbs-button-rgb-bg-opacity, 1))
+  );
   padding: 6px;
   cursor: pointer;
   position: relative;
@@ -31,11 +43,35 @@ ha-icon {
 }
 
 .button-active {
-  color: var(--paper-item-icon-active-color);
+  color: var(
+    --paper-item-icon-active-color,
+    var(
+      --pbs-button-active-color,
+      rgb(
+        var(
+          --pbs-button-rgb-active-color,
+          var(--pbs-button-rgb-state-color, var(--rgb-state-default-color))
+        )
+      )
+    )
+  );
+  background-color: var(
+    --pbs-button-bg-active-color,
+    rgba(
+      var(--pbs-button-rgb-bg-active-color, var(--pbs-button-rgb-bg-color)),
+      var(
+        --pbs-button-rgb-bg-active-opacity,
+        var(--pbs-button-rgb-bg-opacity, 1)
+      )
+    )
+  );
 }
 
 .button-unavailable {
-  color: var(--state-icon-unavailable-color);
+  color: var(
+    --pbs-button-unavailable-color,
+    rgb(var(--pbs-button-rgb-unavailable-color, var(--rgb-disabled-color)))
+  );
 }
 
 .image {