default ripple color

[Mariusthvdb]

updated to 5.0.0.dev-4 and get the shiny ripple effect

which is really sweet and nears the effect we have on Stock Tile cards, so my compliments for that, thank you very much.

However.....

there is always a catch. In my 'Grey'oish main theme, the hove is slightly yellow and the tap is even more yellow, which clashes with the themes main settings.
So, my ask is, where these colors are derived, and, if they should not be calculated from the primary-color somehow.

let me show what I see

my sun down theme makes it even clearer....

I only have this template

styles_ripple:
  styles:
    card:
      - --button-card-ripple-pressed-opacity: 0.5

[dcapslock]

As per doco, follows the button card color logic. So if you have an entity you will get the state active/inactive color. Easy way to check/test what is going on is to look in developer tools for browser and you will see that the --button-card-ripple is set aas a style on button-card. This is dynamically generated using the same logic for card/icon color. So this will be based on your config.

Easy way to override is with a style like you do for pressed opacity. Or check out what button-card is using for these buttons and override that in your theme.

[Mariusthvdb]

so that would mean this probably is safest to set, overriding all, and simply explicitly stating the ripple color:

      - --button-card-ripple-color: var(--primary-color)

but please do make the option to set none on ripple?

otoh, it is as simple as setting

      - --button-card-ripple-color: none

Maybe just add that to the documentation ;-)

[emufan]

We could add an option to disable the ripple entirely. What @dcapslock was saying is that button-card is overriding the value of --state-inactive-color... it shouldn't so I'll fix that.

Is there an option now to disable the ripple completely?

[dcapslock]

Only by styling.

[RomRider]

Maybe we can add a show_ripple: true/false config option which doesn't render the element if false?

[RomRider]

This will be available with #1076