refactor(switch): move core ripple opacity logic from switch to ripple (

material-components#5160)

packages/mdc-ripple/README.md

@@ -67,9 +67,7 @@ In order to fully style the ripple effect for different states (hover/focus/pres
   @include mdc-ripple-surface;
   @include mdc-ripple-radius-bounded;
   @include mdc-states-base-color(black);
-  @include mdc-states-hover-opacity(.1);
-  @include mdc-states-focus-opacity(.3);
-  @include mdc-states-press-opacity(.4);
+  @include mdc-states-opacities((hover: .1, focus: .3, press: .4));
 }
 ```
 
@@ -109,12 +107,12 @@ These mixins can also be used to emit activated or selected styles, by applying
 Mixin | Description
 --- | ---
 `mdc-states-base-color($color)` | Mandatory. Sets up base state styles using the provided color
-`mdc-states-hover-opacity($opacity)` | Mandatory. Adds styles for hover state using the provided opacity
-`mdc-states-focus-opacity($opacity, $has-nested-focusable-element)` | Mandatory. Adds styles for focus state using the provided opacity
-`mdc-states-press-opacity($opacity)` | Mandatory. Adds styles for press state using the provided opacity
+`mdc-states-opacities($opacity-map, $has-nested-focusable-element)` | Sets the opacity of the ripple in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify one or more of these states as keys. States not specified in the map resort to default opacity values.
 
 > _NOTE_: `$has-nested-focusable-element` defaults to `false` but should be set to `true` if the component contains a focusable element (e.g. an input) inside the root element.
 
+> _DEPRECATED_: The individual mixins `mdc-states-hover-opacity($opacity)`, `mdc-states-focus-opacity($opacity, $has-nested-focusable-element)`, and `mdc-states-press-opacity($opacity)` are deprecated in favor of the unified `mdc-states-opacities($opacity-map, $has-nested-focusable-element)` mixin above.
+
 #### Sass Functions
 
 Function | Description

packages/mdc-ripple/_mixins.scss

@@ -201,6 +201,26 @@
   }
 }
 
+///
+/// Customizes ripple opacities in `hover`, `focus`, or `press` states
+/// @param {map} $opacity-map - map specifying custom opacity of zero or more states
+/// @param {bool} $has-nested-focusable-element - whether the component contains a focusable element in the root
+///
+@mixin mdc-states-opacities($opacity-map: (), $has-nested-focusable-element: false, $query: mdc-feature-all()) {
+  // Ensure sufficient specificity to override base state opacities
+  @if map-has-key($opacity-map, hover) {
+    @include mdc-states-hover-opacity(map-get($opacity-map, hover), $query: $query);
+  }
+
+  @if map-has-key($opacity-map, focus) {
+    @include mdc-states-focus-opacity(map-get($opacity-map, focus), $has-nested-focusable-element, $query: $query);
+  }
+
+  @if map-has-key($opacity-map, press) {
+    @include mdc-states-press-opacity(map-get($opacity-map, press), $query: $query);
+  }
+}
+
 @mixin mdc-states-hover-opacity($opacity, $query: mdc-feature-all()) {
   $feat-color: mdc-feature-create-target($query, color);
 

packages/mdc-switch/_mixins.scss

@@ -192,23 +192,15 @@
   }
 }
 
+///
 /// Customizes ripple opacities surrounding the thumb in `hover`, `focus`, or `press` states
 /// The customizations apply to both on and off switches to ensure symmetry
 /// @param {map} $opacity-map - map specifying custom opacity of zero or more states
+///
 @mixin mdc-switch-ripple-states-opacity($opacity-map: (), $query: mdc-feature-all()) {
   // Ensure sufficient specificity to override base state opacities
   &.mdc-switch .mdc-switch__thumb-underlay {
-    @if map-has-key($opacity-map, "hover") {
-      @include mdc-states-hover-opacity(map-get($opacity-map, "hover"), $query);
-    }
-
-    @if map-has-key($opacity-map, "focus") {
-      @include mdc-states-focus-opacity(map-get($opacity-map, "focus"), $query);
-    }
-
-    @if map-has-key($opacity-map, "press") {
-      @include mdc-states-press-opacity(map-get($opacity-map, "press"), $query);
-    }
+    @include mdc-states-opacities($opacity-map, $query: $query);
   }
 }