feat(switch): add ripple opacity customization mixins (#5126)

packages/mdc-switch/README.md

@@ -132,6 +132,7 @@ Mixin | Description
 `mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.
 `mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.
 `mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.
+`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.
 
 ## `MDCSwitch` Properties and Methods
 

packages/mdc-switch/_mixins.scss

@@ -192,6 +192,26 @@
   }
 }
 
+/// 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);
+    }
+  }
+}
+
 //
 // Private
 //