fix(material/core): avoid solid ripples in buttons (#28717)

The changes from #28664 appear to have caused ripples to be solid in some setups. These changes add a fallback to the old behavior if that's the case.

Fixes #28706.

(cherry picked from commit 438ff93)

Author: crisbeto

src/material/core/tokens/m2/mat/_fab-small.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
 @use '../../../theming/theming';
@@ -63,8 +64,9 @@ $prefix: (mat, fab-small);
   $foreground-color: null;
   $state-layer-color: null;
   $ripple-color: null;
+  $contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
 
-  @if (token-utils.$private-is-internal-build) {
+  @if (token-utils.$private-is-internal-build or meta.type-of($contrast-color) != 'color') {
     $is-dark: inspection.get-theme-type($theme) == dark;
     $container-color: inspection.get-theme-color($theme, $palette-name);
     $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);

src/material/core/tokens/m2/mat/_fab.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
 @use '../../../theming/theming';
@@ -63,8 +64,9 @@ $prefix: (mat, fab);
   $foreground-color: null;
   $state-layer-color: null;
   $ripple-color: null;
+  $contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
 
-  @if (token-utils.$private-is-internal-build) {
+  @if (token-utils.$private-is-internal-build or meta.type-of($contrast-color) != 'color') {
     $is-dark: inspection.get-theme-type($theme) == dark;
     $container-color: inspection.get-theme-color($theme, $palette-name);
     $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);

src/material/core/tokens/m2/mat/_filled-button.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
 @use '../../../theming/theming';
@@ -58,10 +59,11 @@ $prefix: (mat, filled-button);
 @function private-get-color-palette-color-tokens($theme, $palette-name) {
   $state-layer-color: null;
   $ripple-color: null;
+  $contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
 
   // Ideally we would derive all values directly from the theme, but it causes a lot of regressions
   // internally. For now we fall back to the old hardcoded behavior only for internal apps.
-  @if (token-utils.$private-is-internal-build) {
+  @if (token-utils.$private-is-internal-build or meta.type-of($contrast-color) != 'color') {
     $is-dark: inspection.get-theme-type($theme) == dark;
     $container-color: inspection.get-theme-color($theme, $palette-name);
     $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);

src/material/core/tokens/m2/mat/_icon-button.scss

@@ -47,10 +47,14 @@ $prefix: (mat, icon-button);
 // Generates the mapping for the properties that change based on the button palette color.
 @function private-get-color-palette-color-tokens($theme, $palette-name) {
   $color: inspection.get-theme-color($theme, $palette-name);
+  $ripple-opacity: 0.1;
 
   @return (
     state-layer-color: $color,
-    ripple-color: if(meta.type-of($color) == color, rgba($color, 0.1), $color),
+    ripple-color: if(
+      meta.type-of($color) == color,
+      rgba($color, $ripple-opacity),
+      inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
   );
 }
 

src/material/core/tokens/m2/mat/_outlined-button.scss

@@ -57,10 +57,14 @@ $prefix: (mat, outlined-button);
 // Generates the mapping for the properties that change based on the button palette color.
 @function private-get-color-palette-color-tokens($theme, $palette-name) {
   $color: inspection.get-theme-color($theme, $palette-name);
+  $ripple-opacity: 0.1;
 
   @return (
     state-layer-color: $color,
-    ripple-color: if(meta.type-of($color) == color, rgba($color, 0.1), $color),
+    ripple-color: if(
+      meta.type-of($color) == color,
+      rgba($color, $ripple-opacity),
+      inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
   );
 }
 

src/material/core/tokens/m2/mat/_protected-button.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
 @use '../../../theming/theming';
@@ -58,10 +59,11 @@ $prefix: (mat, protected-button);
 @function private-get-color-palette-color-tokens($theme, $palette-name) {
   $state-layer-color: null;
   $ripple-color: null;
+  $contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
 
   // Ideally we would derive all values directly from the theme, but it causes a lot of regressions
   // internally. For now we fall back to the old hardcoded behavior only for internal apps.
-  @if (token-utils.$private-is-internal-build) {
+  @if (token-utils.$private-is-internal-build or meta.type-of($contrast-color) != 'color') {
     $is-dark: inspection.get-theme-type($theme) == dark;
     $container-color: inspection.get-theme-color($theme, $palette-name);
     $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);

src/material/core/tokens/m2/mat/_text-button.scss

@@ -60,10 +60,14 @@ $prefix: (mat, text-button);
 // Generates the mapping for the properties that change based on the button palette color.
 @function private-get-color-palette-color-tokens($theme, $palette-name) {
   $color: inspection.get-theme-color($theme, $palette-name);
+  $ripple-opacity: 0.1;
 
   @return (
     state-layer-color: $color,
-    ripple-color: if(meta.type-of($color) == color, rgba($color, 0.1), $color),
+    ripple-color: if(
+      meta.type-of($color) == color,
+      rgba($color, $ripple-opacity),
+      inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
   );
 }