diff --git a/src/main.ts b/src/main.ts index a6872026..e05327e1 100644 --- 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 index 7e85f2ca..69a39591 100644 --- a/src/styles.css +++ b/src/styles.css @@ -15,6 +15,8 @@ } paper-button { + --pbs-button-rgb-fallback: 68, 115, 158; + color: var( --pbs-button-color, rgb( @@ -22,7 +24,10 @@ paper-button { --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)) + ) ) ) )