refactor(ripple): Add CSS custom property support to MDC ripple

PiperOrigin-RevId: 341078189

Author: abhiomkar

packages/mdc-ripple/_ripple-theme.scss

@@ -29,6 +29,8 @@
 @use '@material/animation/variables' as variables2;
 @use '@material/base/mixins' as base-mixins;
 @use '@material/feature-targeting/feature-targeting';
+@use '@material/theme/css';
+@use '@material/theme/custom-properties';
 @use '@material/theme/theme';
 @use '@material/theme/theme-color';
 
@@ -70,11 +72,18 @@ $pressed-light-ink-opacity: 0.32 !default;
 ) {
   $feat-color: feature-targeting.create-target($query, color);
 
+  @if not custom-properties.is-custom-prop($color) {
+    $color: custom-properties.create(
+      --mdc-ripple-color,
+      theme-color.get-custom-property($color)
+    );
+  }
+
   #{$ripple-target}::before,
   #{$ripple-target}::after {
     @include feature-targeting.targets($feat-color) {
       @if color.alpha(theme-color.prop-value($color)) > 0 {
-        @include theme.prop(background-color, $color);
+        @include theme.property(background-color, $color);
       } @else {
         // If a color with 0 alpha is specified, don't render the ripple pseudo-elements at all.
         // This avoids unnecessary transitions and overflow.
@@ -131,11 +140,15 @@ $pressed-light-ink-opacity: 0.32 !default;
   $feat-color: feature-targeting.create-target($query, color);
 
   // Background wash styles, for both CSS-only and upgraded stateful surfaces
-  &:hover {
+  &:hover,
+  &.mdc-ripple-surface--hover {
     #{$ripple-target}::before {
       // Opacity falls under color because the chosen opacity is color-dependent in typical usage
       @include feature-targeting.targets($feat-color) {
-        opacity: $opacity;
+        @include theme.property(
+          opacity,
+          custom-properties.create(--mdc-ripple-hover-opacity, $opacity)
+        );
       }
     }
   }
@@ -192,7 +205,10 @@ $pressed-light-ink-opacity: 0.32 !default;
   }
 
   @include feature-targeting.targets($feat-color) {
-    opacity: $opacity;
+    @include theme.property(
+      opacity,
+      custom-properties.create(--mdc-ripple-focus-opacity, $opacity)
+    );
   }
 }
 
@@ -222,15 +238,18 @@ $pressed-light-ink-opacity: 0.32 !default;
 
         // Opacity falls under color because the chosen opacity is color-dependent in typical usage
         @include feature-targeting.targets($feat-color) {
-          opacity: $opacity;
+          @include theme.property(
+            opacity,
+            custom-properties.create(--mdc-ripple-press-opacity, $opacity)
+          );
         }
       }
     }
   }
 
   &.mdc-ripple-upgraded {
     @include feature-targeting.targets($feat-color) {
-      --mdc-ripple-fg-opacity: #{$opacity};
+      --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, #{$opacity});
     }
   }
 }
@@ -270,7 +289,13 @@ $pressed-light-ink-opacity: 0.32 !default;
     #{$ripple-target}::before {
       // Opacity falls under color because the chosen opacity is color-dependent.
       @include feature-targeting.targets($feat-color) {
-        opacity: $activated-opacity;
+        @include theme.property(
+          opacity,
+          custom-properties.create(
+            --mdc-ripple-activated-opacity,
+            $activated-opacity
+          )
+        );
       }
     }
 
@@ -300,7 +325,13 @@ $pressed-light-ink-opacity: 0.32 !default;
     #{$ripple-target}::before {
       // Opacity falls under color because the chosen opacity is color-dependent.
       @include feature-targeting.targets($feat-color) {
-        opacity: $selected-opacity;
+        @include theme.property(
+          opacity,
+          custom-properties.create(
+            --mdc-ripple-selected-opacity,
+            $selected-opacity
+          )
+        );
       }
     }
 

packages/mdc-ripple/_ripple.scss

@@ -28,37 +28,48 @@
 @use '@material/animation/functions' as functions2;
 @use '@material/animation/variables' as variables2;
 @use '@material/base/mixins' as base-mixins;
+@use '@material/theme/custom-properties';
 @use '@material/feature-targeting/feature-targeting';
 @use '@material/theme/theme';
 @use '@material/theme/theme-color';
 @use './ripple-theme';
 
-@mixin core-styles($query: feature-targeting.all()) {
-  // postcss-bem-linter: define ripple-surface
-
+@mixin core-styles(
+  $query: feature-targeting.all(),
+  // TODO(b/151931961): Remove this param once resolved.
+    $include-will-change: true
+) {
   $feat-structure: feature-targeting.create-target($query, structure);
 
   .mdc-ripple-surface {
-    @include surface($query: $query);
+    @include surface(
+      $include-will-change: $include-will-change,
+      $query: $query
+    );
     @include ripple-theme.states($query: $query);
     @include radius-bounded($query: $query);
     @include surface-styles($query: $query);
+  }
 
-    &[data-mdc-ripple-is-unbounded] {
-      @include radius-unbounded($query: $query);
-      @include unbounded-styles($query: $query);
-    }
-
-    &--primary {
-      @include ripple-theme.states(primary, $query: $query);
-    }
-
-    &--accent {
-      @include ripple-theme.states(secondary, $query: $query);
-    }
+  .mdc-ripple-surface[data-mdc-ripple-is-unbounded],
+  .mdc-ripple-upgraded--unbounded {
+    @include radius-unbounded($query: $query);
+    @include unbounded-styles($query: $query);
   }
+}
 
-  // postcss-bem-linter: end
+/// Sets all states (including hover, focus, press, activated and selected) with
+/// given color as base color.
+///
+/// This mixin is for internal use only. Use `ripple-theme.states($color)` mixin
+/// to set interactive states (hover, focus & press) color.
+///
+/// @param {Color|String} $color - Target base color. Can be valid CSS color or
+///     a color string literal (i.e., `primary`, `secondary`, etc).
+@mixin states-for-color($color, $query: feature-targeting.all()) {
+  @include ripple-theme.states($color, $query: $query);
+  @include ripple-theme.states-activated($color, $query: $query);
+  @include ripple-theme.states-selected($color, $query: $query);
 }
 
 @mixin surface-styles($query: feature-targeting.all()) {
@@ -133,7 +144,20 @@
     }
 
     @include feature-targeting.targets($feat-structure) {
-      z-index: 1; // Ensure that the ripple wash for hover/focus states is displayed on top of positioned child elements
+      // Ensure that the ripple wash for hover/focus states is displayed on top of positioned child elements
+      @include theme.property(
+        z-index,
+        custom-properties.create(--mdc-ripple-z-index, 1)
+      );
+    }
+  }
+
+  #{$ripple-target}::after {
+    @include feature-targeting.targets($feat-structure) {
+      @include theme.property(
+        z-index,
+        custom-properties.create(--mdc-ripple-z-index, 0)
+      );
     }
   }
 

packages/mdc-theme/_theme-color.scss

@@ -246,3 +246,31 @@ $property-values: (
 @function text-emphasis($emphasis) {
   @return map.get($text-emphasis, $emphasis);
 }
+
+///
+/// @param {Color|String} Color property key name (i.e., `primary`, `secondary`,
+///     etc).
+/// @return Returns custom property map containing CSS custom property and
+///     fallback value (i.e., (varname: ..., fallback: ...). Returns color if
+///     valid color value is provided. Throws error otherwise.
+/// @examples
+///   1. get-custom-property(primary)
+///   => (varname: --mdc-theme-primary, fallback: #6200ee)
+///
+///   2. get-custom-property(#fff)
+///   => #fff
+///
+@function get-custom-property($color) {
+  @if custom-properties.is-custom-prop($color) or
+    is-valid-theme-prop-value_($color)
+  {
+    @return $color;
+  } @else if map.has-key($property-values, $color) {
+    @return custom-properties.create(
+      --mdc-theme-#{$color},
+      map.get($property-values, $color)
+    );
+  } @else {
+    @error "Invalid theme property: '#{$style}'. Choose one of: #{map.keys($property-values)}";
+  }
+}

packages/mdc-theme/_theme.scss

@@ -121,8 +121,7 @@
     );
   } @else if map.has-key(theme-color.$property-values, $value) {
     // $value is a theme property String
-    $fallback: map.get(theme-color.$property-values, $value);
-    $custom-prop: custom-properties.create(--mdc-theme-#{$value}, $fallback);
+    $custom-prop: theme-color.get-custom-property($value);
     @include custom-properties.apply(
       $property,
       $custom-prop,