fix(color): inactive card background no longer inactive color when colour_type: card and color set. (#987)

BREAKING CHANGE: Card background color will always be `var
(--card-background-color)` when state is inactive and `color_type:
card`. You can set card background with state.

Fixes #754

Author: dcapslock

README.md

@@ -106,7 +106,7 @@ Lovelace Button card for your entities.
 | `group_expand` | boolean | false | `true` \| `false` | When `true`, if any of the entities triggering a card update is a group, it will auto-expand the group and the card will update on any child entity state change. This works with nested groups too. See [triggers_update](#triggers_update) |
 | `icon` | string | optional | `mdi:air-conditioner` | Icon to display. Will be overridden by the icon defined in a state (if present). Defaults to the entity icon. Hide with `show_icon: false`. Supports templates, see [templates](#javascript-templates) |
 | `color_type` | string | `icon` | `icon` \| `card` \| `blank-card` \| `label-card` | Color either the background of the card or the icon inside the card. Setting this to `card` enable automatic `font` and `icon` color. This allows the text/icon to be readable even if the background color is bright/dark. Additional color-type options `blank-card` and `label-card` can be used for organisation (see examples). |
-| `color` | string | optional | `auto` \| `auto-no-temperature` \| `rgb(28, 128, 199)` | Color of the icon/card. `auto` sets the color based on the color of a light including the temperature of the light. Setting this to `auto-no-temperature` will behave like home-assistant's default, ignoring the temperature of the light. By default, if the entity state is `off`, the color will be `var(--paper-item-icon-color)`, for `on` it will be `var(--paper-item-icon-active-color)` and for any other state it will be `var(--primary-text-color)`. You can redefine each colors using `state` |
+| `color` | string | optional | `auto` \| `auto-no-temperature` \| `rgb(28, 128, 199)` | Color of the icon/card. `auto` sets the color based on the color of a light including the temperature of the light. Setting this to `auto-no-temperature` will behave like home-assistant's default, ignoring the temperature of the light. By default, if the entity state is `off`, the color will be `var(--state-inactive-color)` for icon and `var (--card-background-color)` for card, for `on` it will be `var(--state-active-color)` and for any other state it will be `var(--primary-text-color)`. You can redefine each colors using `state` |
 | `size` | string | `40%` | `20px` | Size of the icon. Can be percentage or pixel |
 | `aspect_ratio` | string | optional | `1/1`, `2/1`, `1/1.5`, ... | See [here](#aspect-ratio) for an example. Aspect ratio of the card. `1/1` being a square. This will auto adapt to your screen size |
 | `tap_action` | object | optional | See [Action](#Action) | Define the type of action on click, if undefined, toggle will be used for domains that support toggle, or button press for input_button. |

src/button-card.ts

@@ -983,6 +983,8 @@ class ButtonCard extends LitElement {
       if (this._stateObj) {
         if (stateActive(this._stateObj)) {
           color = this._config?.color || color;
+        } else {
+          color = stateColorCss(this._stateObj, this._stateObj.state, this._config?.color_type) || DEFAULT_COLOR;
         }
       } else {
         color = this._config.color;

test/ui-lovelace.yaml

@@ -853,6 +853,28 @@ views:
                       card:
                         - height: 200px
 
+      - type: vertical-stack
+        cards:
+          - type: 'custom:button-card'
+            color_type: label-card
+            styles:
+              card:
+                - font-weight: bold
+                - text-transform: uppercase
+            name: Color custom
+          - type: horizontal-stack
+            cards:
+              - type: 'custom:button-card'
+                entity: switch.skylight
+                color_type: icon
+                color: lightpink
+                name: 'color_type: icon'
+              - type: 'custom:button-card'
+                color_type: card
+                color: lightpink
+                entity: switch.skylight
+                name: 'color_type: card'
+
       - type: vertical-stack
         cards:
           - type: 'custom:button-card'