Feedback on Ripple Effect

[jhemak]

Checklist

• I updated the card to the latest version available
• I cleared the cache of my browser

Describe the bug
Thank you for the ripple feature! I have two observations:

(1) I had to change --button-card-ripple-hover-opacity from the default of 0.08 to 0.04 in order to manage the built-in Tile card. Not sure if that is something you want to update in the default or not but wanted to share.

(2) Can you clarify what it means for --button-card-ripple-color to "follow color of button card"? I have been unsuccessful in finding out which "color" option to update in order to get the ripple to follow it. Instead, I had to use --button-card-ripple-color': '#9e9e9e... again, to match the default tile card. I'd rather set the color as you intend and have the ripple follow.

Version of the card
Version: 5.0.2

To Reproduce
See above

Screenshots
If applicable, add screenshots to help explain your problem.

Expected behavior
A clear and concise description of what you expected to happen.

Desktop (please complete the following information):

• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[dcapslock]

Hi, thanks for the feedback.

(1) I had to change --button-card-ripple-hover-opacity from the default of 0.08 to 0.04 in order to manage the built-in Tile card. Not sure if that is something you want to update in the default or not but wanted to share.

Noting that while ha-ripple itself defaults to 0.08, that indeed hui-button-card and hui-badge do set to 0.04. @RomRider do you agree that button-card should take on same as hui-button-card?

(2) Can you clarify what it means for --button-card-ripple-color to "follow color of button card"? I have been unsuccessful in finding out which "color" option to update in order to get the ripple to follow it. Instead, I had to use --button-card-ripple-color': '#9e9e9e... again, to match the default tile card. I'd rather set the color as you intend and have the ripple follow.

When you say tile do you mean badge? I am assuming so as this is the only place I see that that grey is used for ripple. button-card logic is the same used to color the icon/card, using state logic if an entity is provided with special case for lights, which usually leads to -state-inactive-color for a non colored entity, non light entity. If no entity is used, button-card color logic falls back to --primary-text-color which will be used for ripple. This is likely where a difference is. A standard button with no entity will use --state-color for ripple where as a badge with a non-colored entity will use --badge-color which is #9e9e9e by default. So I believe what you need to do is set --button-card-ripple-color: var(--badge-color) for where you wish your button-card to emulate a badge. As button-card does not try to emulate badges, there is no color mode to set to achieve what you wish and you will always need to set --button-card-ripple-color.

[RomRider]

@RomRider do you agree that button-card should take on same as hui-button-card?

Sure, makes sense.

[dcapslock]

Sure, makes sense.

OK. Will submit a PR.

[jhemak]

Thank you both!

@dcapslock - really appreciate your great explanation! I realized after reading your message that I was not originally comparing with Tile Card but rather with a Mushroom Template card in which I was using the color #9e9e9e. My apologies! I did try switching to --button-card-ripple-color: var(--badge-color) instead of --button-card-ripple-color: '#9e9e9e' but there was just the slightest visual mismatch. So I kept the latter in place.

As another test, however, I added a standard Tile Card with a script as the entity. The icon for that was #9e9e9e by default, and the ripple perfectly matches what I had in my original Mushroom Template example.

[dcapslock]

As another test, however, I added a standard Tile Card with a script as the entity. The icon for that was #9e9e9e by default, and the ripple perfectly matches what I had in my original Mushroom Template example.

When you say test are you still trying to show an inconsistency? If you set opacity to --button-card-ripple-hover-opacity: 0.04 then all should match.

[jhemak]

If I use this:

type: tile
entity: script.script_name_here
vertical: false
features_position: bottom

the ripple is grey and perfectly matches a custom button card where I include:

--button-card-ripple-hover-opacity: 0.04
--button-card-ripple-color: #9e9e9e

If my custom button card includes only the opacity line, the match is close but not perfect.

I'm only sharing this in case you expected the ripple to automatically match in this Tile Card example since it was a true Tile Card and not a badge.

[dcapslock]

Got it. The difference is between button-card default --primary-text-color #141414 (ripple: rgba(20,20,20,0.04)) and badge/tiles defaults --badge-color/--tile-color #9e9e9e (ripple: rgba(158,158,158,0.04)). As the button-card default is longstanding I recommend a status quo.

[Mariusthvdb]

When you say tile do you mean badge? I am assuming so as this is the only place I see that that grey is used for ripple. button-card logic is the same used to color the icon/card, using state logic if an entity is provided with special case for lights, which usually leads to -state-inactive-color for a non colored entity, non light entity. If no entity is used, button-card color logic falls back to --primary-text-color which will be used for ripple. This is likely where a difference is. A standard button with no entity will use --state-color for ripple where as a badge with a non-colored entity will use --badge-color which is #9e9e9e by default. So I believe what you need to do is set --button-card-ripple-color: var(--badge-color) for where you wish your button-card to emulate a badge. As button-card does not try to emulate badges, there is no color mode to set to achieve what you wish and you will always need to set --button-card-ripple-color.

this is a fine summary, and, in a more polished style, should really be added to the documentation. Since the new functionality of custom:button-card is so beautiful, people will want to use that ripple, and I foresee many questions.... a quick lookup table would help answering those questions.

Or, hopefully prevent them even ;-)

[dcapslock]

Perhaps a discussion item as this depends on CSS in HA which is always subject to change.

[github-actions]

🎉 This issue has been resolved in version 5.1.0-dev.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀