Chips: Opacity is not added to the ripple element when using CSS variables to define a custom theme

[JoakimZebic]

In the bug demo below, I use CSS variables to define a custom theme (so I can change it dynamically). Please see the 'styles.scss' file.

Demo: https://stackblitz.com/github/JoakimZebic/angular-material-chips-bug-report

Steps to reproduce:

1. Click on any 'colored' chips

Expected Behavior
Ripple effect should have opacity.

Actual Behavior
Ripple is a solid color (depending on the contrast color of the theme) and doesn't have opacity.

Environment

• Angular: 7.2.0
• CDK/Material: 7.3.7
• Browser(s): Chrome, Firefox
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

[JoakimZebic]

I submitted a PR for this bug fix:
Fix mat-chips ripple element background (opacity) when using CSS variable theming
#17576

[JoakimZebic]

Fix mat-chips ripple element background (opacity) when using CSS variable theming
#17576

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