fix(button): ripple color not correct for standard, icon and stroked buttons

[devversion]

With c3a8d0c, we already ensured that the text color is inherited in order to make sure that buttons without a background color are readable on various themed backgrounds (e.g. themed toolbars)

This is a follow-up that ensures that the ripple color for such transparent buttons is contrasting to the background color (e.g. in themed toolbars).

Fixes #13232

[devversion]

I just realize that there is something that won't work like before. If a developer has a button and sets a custom color for the button, the ripple color will also be based on that custom color (which doesn't look bad; just breaking). Before this change, the ripple color was just kept black.

Not sure what's the best solution here. We can also just change the ripple color of transparent buttons inside of the toolbar theme. This would work, but isn't a solution for other themed elements.

[jelbourn]

Does this match what mdc does?

[devversion]

By looking at it, it looks like they do nothing about buttons inside a toolbar. They have some special CSS class for icon buttons, but otherwise normal buttons are just invisible inside of the toolbar.

^{https://stackblitz.com/edit/mdc-js-demo}

[jelbourn]

LGTM

[jelbourn]

Actually, this is blocked until we finish the 2018 spec updates inside google.

[mhebrard]

FYI I notice a similar problem on chips:
on selection, the background color change, but the ripple is always black
(do not follow the contract color from the theme)

[devversion]

@mhebrard Yeah, there is already a fix pending for this issue. #13271

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}