bug(mat-tab-group): ripple doesn't support custom theme with CSS variables

[Selindek]

Reproduction

https://stackblitz.com/edit/angular-qrscte

Steps to reproduce:

1. Choose Accent color as background
2. Click any of the tabs

Expected Behavior

The ripple effect during the click should have opacity.

Actual Behavior

Ripple is solid white, and doesn't have opacity.

Environment

• Angular: 12.2.7
• CDK/Material: 12.2.7
• Browser(s): tested on Chrome, Edge, Safari
• Operating System (e.g. Windows, macOS, Ubuntu): Tested on Windows and Mac

Comment

The same issue happens in mat-tab-nav-bar too.
It seems that the ripple effect cannot handle css variable as bacground-color, so it falls back to solid white instead.

[thomasturrell]

Issue #16653 seems to be related.

[literalpie]

There are similar problems for other components, for example the slide-toggle.

Is it a goal to support passing CSS variables into the theme in all components?

[thomasturrell]

There are similar problems for other components, for example the slide-toggle.

Is it a goal to support passing CSS variables into the theme in all components?

@literalpie Personally, I think it would be a worth while goal. Perhaps you would consider opening an issue for slide-toggle?