feat(fab): Use new ripple mixins; remove unnecessary mixin/variable

packages/mdc-fab/README.md

@@ -135,9 +135,8 @@ Mixin | Description
 --- | ---
 `mdc-fab-container-color($color)` | Sets the container color to the given color
 `mdc-fab-ink-color($color)` | Sets the ink color to the given color
-`mdc-fab-ripple($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 FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.
 
 #### Caveat: Edge and CSS Variables
 

packages/mdc-fab/_mixins.scss

@@ -16,21 +16,22 @@
 @import "@material/elevation/mixins";
 @import "@material/elevation/variables";
 @import "@material/ripple/mixins";
+@import "@material/ripple/variables";
 @import "@material/theme/functions";
 @import "@material/theme/mixins";
-@import "./variables";
 
 @mixin mdc-fab-accessible($container-color) {
   @include mdc-fab-container-color($container-color);
+
   // Calculate whether to use dark or light text on top of given color.
   $light-or-dark-text: mdc-theme-light-or-dark($container-color);
 
   @if ($light-or-dark-text == "light") {
     @include mdc-fab-ink-color(text-primary-on-dark);
-    @include mdc-fab-ripple($mdc-fab-light-ripple-config);
+    @include mdc-ripple-color(text-primary-on-dark, $mdc-ripple-pressed-light-ink-opacity);
   } @else {
     @include mdc-fab-ink-color(text-primary-on-light);
-    @include mdc-fab-ripple(()); //default dark ripple
+    @include mdc-ripple-color(text-primary-on-light, $mdc-ripple-pressed-dark-ink-opacity);
   }
 }
 
@@ -42,16 +43,12 @@
   @include mdc-theme-prop(color, $color);
 }
 
-@mixin mdc-fab-ripple($ripple-config) {
-  @include mdc-ripple-bg(map-merge((pseudo: "::before"), $ripple-config));
-  @include mdc-ripple-fg(map-merge((pseudo: "::after"), $ripple-config));
-}
-
 $mdc-fab-icon-enter-delay_: 90ms;
 $mdc-fab-icon-enter-duration_: 180ms;
 
 @mixin mdc-fab-base_ {
-  @include mdc-ripple-base;
+  @include mdc-ripple-surface;
+  @include mdc-ripple-radius;
   @include mdc-elevation(6);
 
   display: inline-flex;

packages/mdc-fab/mdc-fab.scss

@@ -12,16 +12,17 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+@import "@material/ripple/mixins";
+@import "@material/ripple/variables";
 @import "./mixins";
-@import "./variables";
 
 // postcss-bem-linter: define fab
 
 .mdc-fab {
   @include mdc-fab-base_;
   @include mdc-fab-container-color(secondary);
   @include mdc-fab-ink-color(text-primary-on-secondary);
-  @include mdc-fab-ripple($mdc-fab-light-ripple-config);
+  @include mdc-ripple-color(text-primary-on-secondary, $mdc-ripple-pressed-dark-ink-opacity);
 
   &:not(.mdc-ripple-upgraded) {
     -webkit-tap-highlight-color: rgba(0, 0, 0, .18);