feat(button): Add button ripple-states mixin, for simpler customizati…

…on of button ripple color.

PiperOrigin-RevId: 310161679

packages/mdc-button/_mixins.scss

@@ -143,8 +143,7 @@ $ripple-target: ".mdc-button__ripple";
     @include ripple-mixins.surface($query: $query, $ripple-target: $ripple-target);
     @include ripple-mixins.radius-bounded(
       $query: $query, $ripple-target: $ripple-target);
-    @include ripple-mixins.states(
-      $color: primary, $query: $query, $ripple-target: $ripple-target);
+    @include ripple-states($color: primary, $query: $query);
 
     #{$ripple-target} {
       @include feature-targeting-mixins.targets($feat-structure) {
@@ -170,24 +169,29 @@ $ripple-target: ".mdc-button__ripple";
 
   .mdc-button--raised,
   .mdc-button--unelevated {
-    @include ripple-mixins.states(
-      $color: on-primary, $query: $query, $ripple-target: $ripple-target);
+    @include ripple-states($color: on-primary, $query: $query);
   }
 }
 
+///
+/// Sets ripple color for button.
+///
+@mixin ripple-states($color, $query: feature-targeting-functions.all()) {
+  @include ripple-mixins.states(
+    $color: $color, $query: $query, $ripple-target: $ripple-target);
+}
+
 @mixin filled-accessible($container-fill-color, $query: feature-targeting-functions.all()) {
   $fill-tone: theme-functions.tone($container-fill-color);
 
   @include container-fill-color($container-fill-color, $query);
 
   @if ($fill-tone == "dark") {
     @include ink-color(text-primary-on-dark, $query);
-    @include ripple-mixins.states(
-      $color: text-primary-on-dark, $query: $query, $ripple-target: $ripple-target);
+    @include ripple-states($color: text-primary-on-dark, $query: $query);
   } @else {
     @include ink-color(text-primary-on-light, $query);
-    @include ripple-mixins.states(
-      $color: text-primary-on-light, $query: $query, $ripple-target: $ripple-target);
+    @include ripple-states($color: text-primary-on-light, $query: $query);
   }
 }