Theme buttons

[heavy onyx]

The fab button didn't really changed. Just the color and I removed all caps.

I think you can theme the border radius. I'll check the variable for you later

[heavy onyx]

set --ha-button-radius currently it's set to pill 9999px

[amber wyvern]

nice, I added it to the other variables```
ha-card-border-radius: 0px
ha-dialog-border-radius: var(--ha-card-border-radius)
ha-config-card-border-radius: var(--ha-card-border-radius)
feature-border-radius: var(--ha-card-border-radius)
ha-button-radius: var(--ha-card-border-radius)

much better 😉 still there is a lot of padding, and the min-width is not enough for those smaller buttons. It's less obtrusive in squared mode now, but for the default theme, those Blue blobs are really unattractive imho.

[heavy onyx]

This blue blobs are bugs and shouldn't be there

Fix is already merged

[amber wyvern]

I now notice the new buttons and styling are also used for scripts.. of course, when using any other theme than default, those are now terribly out of design... could you help me with the variable names that are used on these buttons, so I can set my theme colors on them please?

i did check https://github.com/home-assistant/frontend/blob/c2ca556151194555cf665d78341297173defa4a7/src/components/ha-button.ts#L81and https://github.com/home-assistant/frontend/blob/c2ca556151194555cf665d78341297173defa4a7/src/resources/theme/color/semantic.globals.ts but is has been made so complex, that it isnt easy to find the right colors there...

[heavy onyx]

You have to set all colors of --color-primary-(5-95)

[heavy onyx]

So just set all of these core primary colors. And the semantics are build up on them

    --color-primary-05: #001721;
    --color-primary-10: #002e3e;
    --color-primary-20: #004156;
    --color-primary-30: #006787;
    --color-primary-40: #009ac7;
    --color-primary-50: #18bcf2;
    --color-primary-60: #37c8fd;
    --color-primary-70: #7bd4fb;
    --color-primary-80: #b9e6fc;
    --color-primary-90: #dff3fc;
    --color-primary-95: #eff9fe;

This is the beginning of our design system. We just use it for buttons now. But when we hopefully sometime use it on most parts of the software it will be really cool.

[amber wyvern]

Yes I found them, but we need to know when to use which semantics I guess. Check the update img I posted in the general beta. Which semantics are used there?

[amber wyvern]

well, for now, it produces a lot of undocumented color clash in peoples themes. I get that changes will occur over time.
It would however be nice if the semantics would be explained and documented, so we at least have an idea which is used where.

[heavy onyx]

@rich kindle can you imagin doing a PR for this?

[rich kindle]

I think some notes in the files itself are doable at this stage yes

[amber wyvern]

getting back to this:

• shouldnt this variable really be named ha-button-border-radius and be consistent with all other theme variables using border-radius
• shouldn't this be also used on the buttons we get in the config/integrations/devices/helpers

the latter: it would make those buttons very nicely consistent throughout the interface and in my case show as

set to

Ill FR that in a new discussion

[amber wyvern]

I take it this is what you added now: https://github.com/home-assistant/frontend/pull/26381/files. I fear that is hardly useful for us to recover from this breaking change in color styles throughout the UI, and to even think about starting to adapt our themes...

It's not only those buttons, but trickles down much further into the other frontend elements too.

plain example once more. Notice the primary color is the darker gray. Also set for the icons in my themes. All of a sudden there now is the bright blue button, which is clashing completely. No way to change that in themes, without understanding which button does what where, or what semantic is used. Btw note the Ga in that button is not centered and its all core :

entities:
  - type: button
    icon: mdi:script-text
    name: Logviewer
    action_name: Ga
    tap_action:
      action: navigate
      navigation_path: /hassio/ingress/a0d7b954_logviewer```

we need to change at least 4 colors for this now? probably more because this is only the button, and the label has its own variables. what is normal, what is loud... the issues pile up when one wants to get their theme back in order... really sorry, dont want to be a criticaster, but this is really huge....

Just one more pic of a Dark theme....

[rich kindle]

This has already been fixed by @heavy onyx

[amber wyvern]

Yes, hoping to see the release with this soon, thx! Did you also consider setting that border-radius variable to the other buttons in the integrations dashboard etc?

[rich kindle]

All FAB (floating button in the lower-right) will have this

[amber wyvern]

cool. I just noticed 2 other type buttons that are not styled the same way: in the integrations dashboard, we have buttons for Stop ignoring and Enable (Stop disabling).. these are shown like in images. Is that per design?

[rich kindle]

These are mapped mostly as they were. There is a lot more we can do for the integrations page to make it more readable than just change the priority of the buttons.

[rich kindle]

I'd let @heavy onyx or other devs answer more accurately on this point, but in a nutshell we need to migrate away from Google MWC components in the source code. This means replacing a component that is built "one way" to another one that is build "another way". Both components serve the same case (like a button is a button), but underneath they need new variables to be themable (because Google and WA does it differently).

With the release of the new button we support semantic tokens, which aim to color all components that use them. At the start it's just the <ha-button> in the future there will be more components tha can use the same tokens.

With the new button you can theme any of the variables here and change for example all fill primary quiet/normal/loud to a different color palete just chainging the "primary" in --ha-color-primary-xx to something else, and do the same for the on primary quiet/normal/loud

[amber wyvern]

thanks for your expo here, appreciated. I need to consume all of this 😉 But I did understand that link and yes, notice the quiet/normal/loud. What is not clear to me yet, is which buttons use what, and when.

given my lets say 4 main themes, with 4 different primary colors and backgrounds, I suppose for all of those, Id need to set all of those variants, which is a heck of a job....

btw, thanks for the border-radius on the other buttons too! looks so much more in style with the main theme

    ha-card-border-radius: var(--border-radius-square) #0px
    ha-dialog-border-radius: var(--ha-card-border-radius)
    ha-config-card-border-radius: var(--ha-card-border-radius)
    feature-border-radius: var(--ha-card-border-radius)
    ha-button-border-radius: var(--ha-card-border-radius)```

1 more ask if I may please: Youve set the --border-radius-square to be 0, and not 0px. I am aware that is completely valid Css, and used that before in my themes. Until we noticed there was a certain problem, and it boiled down to the variable not having 0px but 0. I will find it for you, my memory fails me now. Would it be possible to set that in core to 0px too? (so I can use the official variable like ha-card-border-radius: var(--border-radius-square) in stead of ha-card-border-radius: 0px

[amber wyvern]

there is progress! based on that list of colors and my primary color (that is -40 isnt it?) being #636B75 I've set this scheme for the full list:

  color-primary-0: '#0f1114'
  color-primary-1: '#1c1f23'
  color-primary-20: '#363b41'
  color-primary-30: '#4c525b'
  color-primary-40: '#636B75'
  color-primary-50: '#7d8690'
  color-primary-60: '#99a1ab'
  color-primary-70: '#b5bcc5'
  color-primary-80: '#d1d7db'
  color-primary-90: '#e8edf0'
  color-primary-95: '#f4f7f9'

which returns a much more fitting color set

dark red and dark blue are also better, though still too bright for my taste. But, that is taste, and can be changed

[amber wyvern]

compare these now, much better!

[heavy onyx]

0px is invalid as far as I know. When 0 then you don't write px

[amber wyvern]

fwiw, could be helpful for others I've adapted all themes with the new color cycle based on -40 being primary color in https://gist.github.com/Mariusthvdb/73e64dac944209b82fd774cd525d05d7

sweet

[amber wyvern]

its not invalid, but might be unnecessary. border-width: 0 meaning no border, and border-width: 0px meaning a border of 0px..... philosophical.
Except: Unitless 0 as length won't work in calc() and other math functions. You have to write 0px... I believe that was the exact issue we had. but again, I need to look it up