bug(MatButton): Button ripple effect doesn't support custom theme with CSS variables

[harshainative]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

15.2.8

Description

Ripple effect on buttons when using CSS variables to load palettes doesn't have opacity.
This issue was fixed in the discussion below.
#16652

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-moeuaj?file=src%2Fmain.ts
Steps to reproduce:

1. Click on the blue button which has color loaded from palette based on CSS variables (to support dynamic theming).

Expected Behavior

Ripple effect should be rendered with opacity.

Actual Behavior

Ripple effect shows the color without opacity.

Environment

• Angular: 17.0.6
• CDK/Material: 17.0.4
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[crisbeto]

Setting up palettes with variables like this has never been supported. See the discussion in #25981.

[harshainative]

Thank you for the reply. Though the loading of themes via CSS variables might not be officially supported, it was working in @angular/material@15.2.8. I have created an example which is same as the one shared in the bug report but using material@15.2.8. The ripple effect is working perfectly in this example. Could you please have a look at it.

https://stackblitz.com/edit/stackblitz-starters-76nppp?file=src%2Fmain.ts

[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.}