feat(button): Support state-layer-color theming for buttons and icon-…

…buttons

PiperOrigin-RevId: 572985469

packages/mdc-button/_button-shared-theme.scss

@@ -112,12 +112,12 @@ $disabled-container-color: rgba(
   $icon-size: map.get($theme, with-icon-icon-size);
   @include _icon-size($icon-size, $query: $query);
 
-  @include _states-colors(
-    (
-      focus: map.get($theme, focus-state-layer-color),
+  @include ripple-theme.states-colors(
+    $color-map: (
       hover: map.get($theme, hover-state-layer-color),
-      pressed: map.get($theme, pressed-state-layer-color),
+      press: map.get($theme, pressed-state-layer-color),
     ),
+    $ripple-target: button-ripple.$ripple-target,
     $query: $query
   );
 
@@ -647,25 +647,6 @@ $disabled-container-color: rgba(
   }
 }
 
-@mixin _states-colors($color-map, $query: feature-targeting.all()) {
-  $hover: map.get($color-map, hover);
-
-  $hover-value: if(
-    custom-properties.is-custom-prop($hover),
-    custom-properties.get-fallback($hover),
-    $hover
-  );
-  // TODO(b/191298796): support focused & pressed key colors.
-
-  @if $hover-value != null {
-    @include ripple-theme.states-base-color(
-      $color: $hover,
-      $ripple-target: button-ripple.$ripple-target,
-      $query: $query
-    );
-  }
-}
-
 @mixin _label-text-typography(
   $typography-map,
   $query: feature-targeting.all()

packages/mdc-icon-button/_icon-button-theme.scss

@@ -121,6 +121,14 @@ $light-theme: (
     $ripple-target: $ripple-target
   );
 
+  @include ripple-theme.states-colors(
+    (
+      hover: map.get($theme, hover-state-layer-color),
+      press: map.get($theme, pressed-state-layer-color),
+    ),
+    $ripple-target: $ripple-target
+  );
+
   @include _focus-ring-color(map.get($theme, 'focus-ring-color'));
   @include _focus-ring-offset(map.get($theme, 'focus-ring-offset'));
 }

packages/mdc-ripple/_ripple-theme.scss

@@ -113,6 +113,7 @@ $_ripple-theme: (
 
   // TODO(b/191298796): Support states layer color for every interactive states.
   // Use only hover state layer color, ignoring focus and pressed color.
+  // Consider replacing states-base-color with states-colors.
   @include internal-theme-styles($theme, $ripple-target);
 }
 
@@ -137,6 +138,7 @@ $_ripple-theme: (
   );
 }
 
+/// @deprecated Use states-colors instead.
 @mixin states-base-color(
   $color,
   $query: feature-targeting.all(),
@@ -161,6 +163,35 @@ $_ripple-theme: (
   }
 }
 
+///
+/// Customizes ripple color in `hover` and `press` states
+/// @param {map} $color-map - map specifying custom opacity of zero or more states
+/// @param {string} $ripple-target - the optional selector for the ripple element
+///
+@mixin states-colors(
+  $color-map: (),
+  $ripple-target: '&',
+  $query: feature-targeting.all()
+) {
+  $feat-color: feature-targeting.create-target($query, color);
+
+  @if map.get($color-map, hover) {
+    @include hover-state-layer-selector($ripple-target) {
+      @include feature-targeting.targets($feat-color) {
+        @include theme.property(background-color, map.get($color-map, hover));
+      }
+    }
+  }
+
+  @if map.get($color-map, press) {
+    @include press-state-layer-selector($ripple-target) {
+      @include feature-targeting.targets($feat-color) {
+        @include theme.property(background-color, map.get($color-map, press));
+      }
+    }
+  }
+}
+
 ///
 /// Customizes ripple opacities in `hover`, `focus`, or `press` states
 /// @param {map} $opacity-map - map specifying custom opacity of zero or more states
@@ -299,15 +330,14 @@ $_ripple-theme: (
     }
 
     &:not(.mdc-ripple-upgraded) {
-      // Apply press additively by using the ::after pseudo-element
-      #{$ripple-target}::after {
+      @include press-state-layer-selector($ripple-target) {
         @include feature-targeting.targets($feat-animation) {
           transition: opacity $fade-out-duration linear;
         }
       }
 
       &:active {
-        #{$ripple-target}::after {
+        @include press-state-layer-selector($ripple-target) {
           @include feature-targeting.targets($feat-animation) {
             transition-duration: $fade-in-duration;
           }
@@ -543,8 +573,21 @@ $_ripple-theme: (
   @return map.get($opacity-map, $state);
 }
 
+/// @deprecated Use hover-state-layer-selector instead.
 @mixin states-background-selector($ripple-target) {
+  @include hover-state-layer-selector($ripple-target) {
+    @content;
+  }
+}
+
+@mixin hover-state-layer-selector($ripple-target) {
   #{$ripple-target}::before {
     @content;
   }
 }
+
+@mixin press-state-layer-selector($ripple-target) {
+  #{$ripple-target}::after {
+    @content;
+  }
+}