fix(material/chips): fix ripple element opacity when using CSS variable theming (#17576)

* Fix (chips): Opacity is not added to the ripple element when using CSS variables to define a custom theme

* Fix (chips): Opacity is not added to the ripple element when using CSS variables to define a custom theme

* fix(material/chips): fix ripple element opacity when using CSS variable theming

Author: JoakimZebic

src/material/chips/_chips-theme.scss

@@ -15,19 +15,25 @@ $mat-chip-remove-font-size: 18px;
   }
 }
 
+
+// Applies the background color for a ripple element.
+// If the color value provided is not a Sass color,
+// we assume that we've been given a CSS variable.
+// Since we can't perform alpha-blending on a CSS variable,
+// we instead add the opacity directly to the ripple element.
+@mixin _mat-chips-ripple-background($palette, $default-contrast, $opacity) {
+  $background-color: mat-color($palette, $default-contrast, $opacity);
+  background-color: $background-color;
+  @if (type-of($background-color) != color) {
+    opacity: $opacity;
+  }
+}
+
 @mixin mat-chips-theme-color($palette) {
   @include mat-chips-color(mat-color($palette, default-contrast), mat-color($palette));
 
   .mat-ripple-element {
-    $ripple-opacity: 0.1;
-    $ripple-color: mat-color($palette, default-contrast, $ripple-opacity);
-    background-color: $ripple-color;
-
-    // If the ripple color is a CSS variable, `mat-color` will
-    // return a solid color so we have to apply the opacity separately.
-    @if (type-of($ripple-color) != color) {
-      opacity: $ripple-opacity;
-    }
+   @include _mat-chips-ripple-background($palette, default-contrast, 0.1);
   }
 }