fix(material/tabs): incorrect ripple color when CSS variables are use…

…d for theme (#23686)

Fixes that a tab group with a background color has a solid ripple color when the theme is based on CSS variables.

Fixes #23681.

(cherry picked from commit 9109c3c)

src/material/tabs/_tabs-theme.scss

@@ -126,15 +126,19 @@
 
   > .mat-tab-header .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,
   > .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
-    border-color: theming.get-color-from-palette($background-color, default-contrast, 0.4);
+    // Set the color opacity via `opacity`, rather than `rgba`, because it may be a CSS variable.
+    border-color: theming.get-color-from-palette($background-color, default-contrast, 1);
+    opacity: 0.4;
   }
 
   // Set ripples color to be the contrast color of the new background. Otherwise the ripple
   // color will be based on the app background color.
   > .mat-tab-header .mat-ripple-element,
   > .mat-tab-link-container .mat-ripple-element,
   > .mat-tab-header-pagination .mat-ripple-element {
-    background-color: theming.get-color-from-palette($background-color, default-contrast, 0.12);
+    // Set the color opacity via `opacity`, rather than `rgba`, because it may be a CSS variable.
+    background-color: theming.get-color-from-palette($background-color, default-contrast, 1);
+    opacity: 0.12;
   }
 }