fix(chips): handle ripple color in theme using CSS variables

The ripple color for selected chips is set through `rgba` which won't work properly if the theme uses CSS variables. These changes add a fallback.

Author: crisbeto

src/material/chips/_chips-theme.scss

@@ -19,7 +19,15 @@ $mat-chip-remove-font-size: 18px;
   @include mat-chips-color(mat-color($palette, default-contrast), mat-color($palette));
 
   .mat-ripple-element {
-    background: mat-color($palette, default-contrast, 0.1);
+    $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;
+    }
   }
 }