Lost default state color after HA update to 2023.2

[gianlucasullazzo]

The problem

I lost all default state color after HA update. Now all icons are white and no color change when status update. This is my default config:

base_config:
  layout:
    - icon
    icon:
      '--mdc-icon-size': 30px
    button:
      padding: 8px

What version of Paper Buttons Row has the issue?

2.0.0

What version of Home Assistant are you running?

2023.2.1

What version of the Frontend are you running?

20230202.0 - latest

Example YAML snippet

- type: custom:paper-buttons-row
    base_config:
      layout:
        - icon
        icon:
          '--mdc-icon-size': 30px
        button:
          padding: 8px

Anything in the logs that might be useful for us?

No response

Additional information

No response

[jcwillox]

Yeah how unfortunate they completely changed the state-color spec, at least its "official" now, https://www.home-assistant.io/integrations/frontend/#state-color.

The migration to the new spec is not particularly straightforward, I'll try to get this fixed as soon as possible, but for now, if anyone wants they can recreate the missing CSS variables themselves by defining, for example, --rgb-state-climate-fan-only-color: 0, 187, 212 in their theme or in the button styles.

[jcwillox]

Should be fixed in https://github.com/jcwillox/lovelace-paper-buttons-row/releases/tag/2.0.1

[gianlucasullazzo]

Hi @jcwillox, thanks for reply and work. Unfortunately not fixed. Also lost states label with last release.

[jcwillox]

@gianlucasullazzo have you tried clearing the browser cache (usually ctrl+shift+r to force reload). The default state color was still broken so that might be the issue you're still having, release https://github.com/jcwillox/lovelace-paper-buttons-row/releases/tag/2.1.0 should fix that too.

I'm not too sure what you mean by missing the states label, could you perhaps share a screenshot?

[gianlucasullazzo]

Yes, sure. I also browse in incognito. I noticed a js error in console: I don't know if it's related to paper button row or something else. I'm using default dark theme (if it can help you).

Here the screenshot:

And this is how it appeared some days ago:

[klimbna]

Hi. The color label is working. But the state of the object is gone.

[gianlucasullazzo]

Hi, @jcwillox 2.1.1 resolved default state color for icon and state label visible again. Unfortunately, active color for icon is still broken but I guess you're in the know. correct?

[jcwillox]

@gianlucasullazzo hmm, actually the state colors are working for me, would you be able to share the config for those buttons that aren't working? also, are all your paper-buttons having that issue or only some? If it's all of them then maybe it's not finding the --state-icon-color CSS variable, though if you're on 2023.2, then that's unlikely.

[gianlucasullazzo]

@jcwillox , I'm experiencig issue with all my paper-buttons (except when I define a styles: button: color ) Here an extraction of my configuration (it's an element of picture-elements)

type: custom:paper-buttons-row 
base_config:
  layout:
    - icon
  style:
    state:
      color: white
    icon:
      '--mdc-icon-size': 30px
    button:
      padding: 8px
style:
  top: 82%
  left: 5%
  transform: none
  font-size: 10px
buttons:
  - entity: input_boolean.enable_smart_heating
    icon: mdi:radiator
    tap_action:
      action: call-service
      service: homeassistant.toggle
      service_data:
        entity_id:
          - input_boolean.enable_smart_heating

[jcwillox]

Thanks!

Odd, this is what I get with the config you gave and with enabling state I'll try and add a fallback for when there's no default

A couple of tips for that config btw, style doesn't work on the root, but styles does, also within the base config styles is now preferred over style, and the default tap action for input_boolean should be already be toggle.

  - type: custom:paper-buttons-row
    base_config:
      layout: icon_state
      styles:
        state:
          color: white
        icon:
          '--mdc-icon-size': 30px
        button:
          padding: 8px
    styles:
      top: 82%
      left: 5%
      transform: none
      font-size: 10px
    buttons:
      - entity: input_boolean.test
        icon: mdi:radiator

[gianlucasullazzo]

@jcwillox what about the color when input_boolean.test is true? In my mind it should be "yellow". Correct?

[jcwillox]

Ahh you nailed it, yes they should! Home Assistant uses that yellow colour elsewhere for inputs. I assumed everything was correct, because switches were using that yellow colour when on. I'll check in the morning why it can't find the right state colour for input booleans.

[gianlucasullazzo]

@jcwillox I checked with some of my entities:

Also automation and groups have the same issue.

[jcwillox]

Thanks, https://github.com/jcwillox/lovelace-paper-buttons-row/releases/tag/2.1.2 should finally fix these outstanding issues. It will now fallback to state-active-color if the state is "on" just like HA does.

[sbernesto]

I currently have version 2.1.3 installed and in the browser it works fine, but in the IOS app you don't see the color changes

[jcwillox]

@sbernesto does it work in the IOS browser, if it's just in the app then it might be a caching issue, and you could try clearing the app's cache. There's also an issue with the config you posted on line 4 you assign a string to state_styles which is not valid and may be why the colours are breaking.