feat: add fallback color

jcwillox · Feb 14, 2023 · 9b74ee8 · 9b74ee8
1 parent f5e58e3
commit 9b74ee8
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 6 deletions.
diff --git a/src/main.ts b/src/main.ts
@@ -242,6 +242,7 @@ export class PaperButtonsRow extends LitElement {
               const domain = config.entity && computeDomain(config.entity);
               const styles = this._getStyles(config);
               const buttonStyles = {
+                ...this._getBaseStyles(),
                 ...this._getStateStyles(domain, stateObj),
                 ...(styles.button || {}),
               } as StyleInfo;
@@ -373,13 +374,15 @@ export class PaperButtonsRow extends LitElement {
     return "";
   }
 
-  _getStateStyles(domain?: string, stateObj?: HassEntity): StyleInfo {
+  _getBaseStyles(): StyleInfo {
     const hex = getComputedStyle(this).getPropertyValue("--state-icon-color");
-    const base = {
+    return {
       "--rgb-state-default-color": this._hexToRgb(hex)?.join(", "),
     };
+  }
 
-    if (!domain || !stateObj) return base;
+  _getStateStyles(domain?: string, stateObj?: HassEntity): StyleInfo {
+    if (!domain || !stateObj) return {};
 
     if (stateObj.attributes.rgb_color) {
       return {
@@ -394,7 +397,7 @@ export class PaperButtonsRow extends LitElement {
       }
     }
 
-    return base;
+    return {};
   }
 
   _getStateColor = (stateObj: HassEntity, domain?: string) => {

diff --git a/src/styles.css b/src/styles.css
@@ -15,14 +15,19 @@
 }
 
 paper-button {
+  --pbs-button-rgb-fallback: 68, 115, 158;
+
   color: var(
     --pbs-button-color,
     rgb(
       var(
         --pbs-button-rgb-color,
         var(
           --pbs-button-rgb-state-color,
-          var(--pbs-button-rgb-default-color, var(--rgb-state-default-color))
+          var(
+            --pbs-button-rgb-default-color,
+            var(--rgb-state-default-color, var(--pbs-button-rgb-fallback))
+          )
         )
       )
     )
@@ -31,6 +36,7 @@ paper-button {
     --pbs-button-bg-color,
     rgba(var(--pbs-button-rgb-bg-color), var(--pbs-button-rgb-bg-opacity, 1))
   );
+
   padding: 6px;
   cursor: pointer;
   position: relative;
@@ -59,7 +65,10 @@ ha-icon {
           --pbs-button-rgb-active-color,
           var(
             --pbs-button-rgb-state-color,
-            var(--pbs-button-rgb-default-color, var(--rgb-state-default-color))
+            var(
+              --pbs-button-rgb-default-color,
+              var(--rgb-state-default-color, var(--pbs-button-rgb-fallback))
+            )
           )
         )
       )