feat(radio): Use new ripple mixins, and remove unnecessary mixin (#1476)

BREAKING CHANGE: The mdc-radio-ripple mixin has been removed; use mdc-ripple-color directly.

demos/radio.scss

@@ -17,6 +17,7 @@
 @import "./common";
 @import "../packages/mdc-form-field/mdc-form-field";
 @import "../packages/mdc-radio/mdc-radio";
+@import "../packages/mdc-ripple/mixins";
 @import "../packages/mdc-theme/color-palette";
 @import "../packages/mdc-typography/mdc-typography";
 
@@ -27,5 +28,5 @@
   @include mdc-radio-checked-stroke-color($color);
   @include mdc-radio-ink-color($material-color-orange-500);
   @include mdc-radio-focus-indicator-color($color);
-  @include mdc-radio-ripple((base-color: $color));
+  @include mdc-ripple-color($color, $mdc-radio-ripple-opacity);
 }

packages/mdc-radio/README.md

@@ -211,9 +211,8 @@ Mixin | Description
 `mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked radio
 `mdc-radio-ink-color($color)` | Sets the ink color
 `mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator
-`mdc-radio-ripple-color($ripple-config)` | Sets the ripple to the given [ripple configuration][ripple-readme]
 
-[ripple-readme]: https://github.com/material-components/material-components-web/blob/master/packages/mdc-ripple/README.md
+The ripple effect for the Radio Button component is styled using [MDC Ripple](../mdc-ripple) mixins.
 
 ### Caveat: Edge and CSS Variables
 

packages/mdc-radio/_mixins.scss

@@ -43,10 +43,3 @@
     @include mdc-theme-prop(background-color, $color, $edgeOptOut: true);
   }
 }
-
-@mixin mdc-radio-ripple($ripple-config) {
-  $ripple-config: map-merge((opacity: $mdc-radio-ripple-opacity, radius: 50%), $ripple-config);
-
-  @include mdc-ripple-bg(map-merge($ripple-config, (pseudo: "::before")));
-  @include mdc-ripple-fg(map-merge($ripple-config, (pseudo: "::after")));
-}

packages/mdc-radio/_variables.scss

@@ -19,4 +19,5 @@ $mdc-radio-ui-size: 20px;
 $mdc-radio-ui-pct: percentage($mdc-radio-ui-size / $mdc-radio-touch-area);
 $mdc-radio-transition-duration: 120ms;
 $mdc-radio-ripple-opacity: .14;
+$mdc-radio-ripple-radius: 50%;
 $mdc-radio-baseline-theme-color: secondary;

packages/mdc-radio/mdc-radio.scss

@@ -23,7 +23,6 @@
 
 // postcss-bem-linter: define radio
 .mdc-radio {
-  @include mdc-ripple-base;
   @include mdc-radio-unchecked-stroke-color(text-secondary-on-light);
 
   @include mdc-theme-dark {
@@ -33,7 +32,9 @@
   @include mdc-radio-checked-stroke-color($mdc-radio-baseline-theme-color);
   @include mdc-radio-ink-color($mdc-radio-baseline-theme-color);
   @include mdc-radio-focus-indicator-color($mdc-radio-baseline-theme-color);
-  @include mdc-radio-ripple((theme-style: $mdc-radio-baseline-theme-color));
+  @include mdc-ripple-surface;
+  @include mdc-ripple-color($mdc-radio-baseline-theme-color, $mdc-radio-ripple-opacity);
+  @include mdc-ripple-radius($mdc-radio-ripple-radius);
 
   display: inline-block;
   position: relative;