have Tile card containers and buttons follow HA border-radius theme variable

[Mariusthvdb]

trying to get the Tile card buttons and containers in style with my 0px default border-radius set in my themes, this is a bit of an issue.... I did manage to find some options using card_mod, but, as these elements are all named differently per device the tile cards are controlling, that modding is very complex, and prone to errors:

the tile cards seem to follow the hard-coded 10 px

and Id love to be able to have them follow my theme settings.

currently we need to do something like:

      type: tile
      card_mod:
        style:
          hui-card-features $ hui-target-temperature-card-feature $: |
            ha-control-number-buttons {
              --control-number-buttons-border-radius: var(--ha-card-border-radius);
            }

          hui-card-features $:
            hui-climate-preset-modes-card-feature $:
              ha-control-select$: |
                .container {
                  --control-select-border-radius: var(--ha-card-border-radius);
                }

and this does not yet set the border-radius on the buttons in:

this is a FR to have a tile card variable control these border-radius's, so the user can set it in the theme for all Tile card features for light, climate, alarm_panel, slider etc etc

Ofc, if there already is such a variable, please let me know so I can delete this Discussion/FR and apologize for missing that in https://github.com/home-assistant/frontend/blob/dev/src/panels/lovelace/cards/hui-tile-card.ts

[Mariusthvdb]

found the button to be moldable like this:

      card_mod:
        style:
          hui-card-features $ hui-target-temperature-card-feature $: |
            ha-control-number-buttons {
              --control-number-buttons-border-radius: var(--ha-card-border-radius);
            }

          hui-card-features $:
            hui-climate-preset-modes-card-feature $:
              ha-control-select$: |
                .container {
                  --control-select-border-radius: var(--ha-card-border-radius);
                  --control-select-button-border-radius: var(--ha-card-border-radius);
                }

resulting in the desired 0 border-radius on all parts of the interface of the tile:

and also when hovering:

fan tile is somewhat more involved, using a variable, and a direct element:

style:
  hui-card-features $:
    hui-fan-speed-card-feature $:
      ha-control-slider$: |
        .container {
          --control-slider-border-radius: var(--ha-card-border-radius);
        }
        .slider .slider-track-bar {
          border-radius: var(--ha-card-border-radius) !important;
        }

to be able to result in

given the complexity of the above modding, the ask remains:
please have these variables available for theming

[Mariusthvdb]

Ive made an overview post in the community for the Tiles on all domains I use, which illustrates the efforts we need to do for such a simple thing, it the elements in the Tile card would simply follow ha-card-border-radius, or if that cant be done, use a themeable variable used throughout.

[ChristophCaina]

I would really appreciate, if this would be possible with a simple theme-variable.

Something like

• feature-border
• feature-border-radius

[Mariusthvdb]

Testing 2024.8 beta, I just noticed the succes of the overview post has now been obliterated.... the mods no longer kick in and all we get is the default border-radius back

Not sure what has changed. personally I didnt change anything in my themes, so hope/fear it is something on core HA Frontend that was changed

[Mariusthvdb]

Could it be this is introduced in ha 2024.8:

    feature-border-radius: 0
    control-slider-border-radius: 0
    control-button-border-radius: 0
    control-select-button-border-radius: 0

I see them in inspector now (and my memory is blank on those)... so if new, that would be magic.

However, they dont work just yet... at least, I set the above section in my theme, and still all show rounded 18

Hope Paul can give some clarification here.

[Mariusthvdb]

nevermind, I had a brainflush.... the variables Are already used in my own mods....

Yet, I wonder why we can not use them in the themes then.

[ChristophCaina]

yes, I would really appreciate this option - rather than "card-modding" more cards as already done for 'basic' stuff like state based icon colors... ;)

[Mariusthvdb]

for the moment, I am completely lost on the why these no longer function. Dom path seems unchanged, my themes are unchanged, and the mods are unchanged....

---EDIT---
must be this PR that was merged in 2024.8 to adjust Tile card features amongst other things
https://github.com/home-assistant/frontend/pull/21311/files