Buttons style not updated on entity state

[RoboMagus]

I've spent some time creating the perfect little climate card for my needs, see config below, but it seems that the button icon colors as defined by each of their style: sections does not update when the entity is updated. E.g. I have it configured that when the climate state is set to auto, the auto button is highlighted green. This is the case when I freshly load the page or hit refresh. But when the state when loading the page is e.g. heat and by clicking the auto button the state changes to auto, all of the button colors stay as they are. However, the rest of the card does reflect this change...

Is that a bug, or something else I need to configure for this to function correctly?

Config:

type: custom:mini-climate
entity: climate.verwarming
name: Verwarming
icon: mdi:thermostat
card_mod:
  style: |
    .entity__icon {
      {% if is_state_attr(config.entity, 'hvac_action', 'off') %}
        color: var(--state-unavailable-color) !important;
      {% elif is_state_attr(config.entity, 'hvac_action', 'heating') %}
        color: var(--state-climate-heat-color) !important;
      {% else %}
        {% if state_attr(config.entity, 'current_temperature') >= state_attr(config.entity, 'temperature')  %}
          color: var(--state-icon-color) !important;
        {% else %}
          color: var(--state-climate-heat-cool-color) !important;
        {% endif %}
      {% endif %}
    }
    .entity__info__name_wrap {
      margin-right: 4px;
    }
    mc-button {
      margin-right: 4px;
    }
secondary_info:
  hide: false
  type: hvac-action
  source:
    'off':
      icon: mdi:radiator-off
      name: 'off'
    idle:
      icon: mdi:radiator-disabled
      name: idle
    heating:
      icon: mdi:radiator
      name: heating
swap_temperatures: true
target_temperature:
  min: 10
  max: 25
  step: 0.5
toggle:
  hide: true
  default: 'off'
hvac_mode:
  hide: true
fan_mode:
  hide: true
buttons:
  auto:
    type: button
    location: main
    icon: mdi:calendar-sync
    active: entity => entity.state == 'auto'
    style: >
      (value) => (value == 'auto' ? { color: 'var(--state-climate-auto-color)
      !important;' } : { color: 'var(--disabled-text-color) !important;' })
    toggle_action: >
      (state, entity) => this.call_service('climate', 'set_hvac_mode', {
      entity_id: entity.entity_id, hvac_mode: 'auto' })
  heat:
    type: button
    location: main
    icon: mdi:fire
    active: entity => entity.state == 'heat'
    style: >
      (value) => (value == 'heat' ? { color: 'var(--state-climate-heat-color)
      !important;' } : { color: 'var(--disabled-text-color) !important;' })
    toggle_action: >
      (state, entity) => this.call_service('climate', 'set_hvac_mode', {
      entity_id: entity.entity_id, hvac_mode: 'heat' })  
  'off':
    type: button
    location: main
    icon: mdi:power
    active: entity => entity.state == 'off'
    style: >
      (value) => (value == 'off' ? { color: 'var(--cyan-color) !important;' } :
      { color: 'var(--disabled-text-color) !important;' })
    toggle_action: >
      (state, entity) => this.call_service('climate', 'set_hvac_mode', {
      entity_id: entity.entity_id, hvac_mode: 'off' })

[regevbr]

I can confirm that this is an issue. I tried to fix it but currently can't as my expertise in front end is not that great. A PR will be more than welcome

[regevbr]

Ok managed to find the issue. It is actually a bug in lit library that doesn't handle setting important on styles. (I will add a reference to a github issue later).
To overcome it we need to do 3 things:

• override the state of each button, so it will not put the color attribute, which actually makes the important part crucial
• remove the important from all custom styels
• use entity.state in the custom style functions (as the first argument passed will now be the one we use in step 1)

This is very easy:

    state:
      mapper: |
        () => 'off';
    style: >
      (state, entity) => (entity.state == 'cool' ? { color:
      'var(--state-climate-cool-color)' } : { color:
      'var(--disabled-text-color)' })

Let me know if it works for you

[regevbr]

Issue: lit/lit#3767
PR to fix it: lit/lit#3768

[regevbr]

fixed in 2.4.5 Please note that in order for it to work you must remove the ; after all important tokens