feat(fab): Add mdc-fab-accessible mixin

packages/mdc-fab/README.md

@@ -150,10 +150,20 @@ CSS Class | Description
 
 ### Sass Mixins
 
-The following mixins are intended for advanced users. By default a FAB will inherit its color from the theme.
-These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to 
-completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color.
-It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.
+The following mixin is intended for intermediate/advanced users. By default a FAB will inherit its color from
+the theme. This mixin will override the color of the FAB's container, but maintain accessibility standards for the ink and ripple. The mixin is intended for customizing a FAB's color to a non-theme color.
+
+#### `mdc-fab-accessible($container-color)`
+
+Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet 
+accessibility standards.
+
+---
+
+The following mixins are intended for advanced users. These mixins will override the color of the container, 
+ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of
+them, e.g. if you only need to override the ripple color. It is up to you to pick container, ink, and ripple 
+colors that work together, and meet accessibility standards.
 
 #### `mdc-fab-container-color($color)`
 

packages/mdc-fab/_mixins.scss

@@ -16,7 +16,25 @@
 @import "@material/animation/variables";
 @import "@material/elevation/mixins";
 @import "@material/ripple/mixins";
+@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);
+  }
+
+  @else {
+    @include mdc-fab-ink-color(text-primary-on-light);
+    @include mdc-fab-ripple(()); //default dark ripple
+  }
+}
 
 @mixin mdc-fab-container-color($color) {
   @include mdc-theme-prop(background-color, $color);

packages/mdc-fab/_variables.scss

@@ -0,0 +1,15 @@
+// Copyright 2017 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+$mdc-fab-light-ripple-config: (base-color: white, opacity: .16);

packages/mdc-fab/mdc-fab.scss

@@ -14,24 +14,23 @@
 
 @import "@material/theme/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((base-color: white, opacity: .16));
+  @include mdc-fab-ripple($mdc-fab-light-ripple-config);
 
   &:not(.mdc-ripple-upgraded) {
     -webkit-tap-highlight-color: rgba(0, 0, 0, .18);
   }
 }
 
 .mdc-fab--plain {
-  @include mdc-fab-container-color(white);
-  @include mdc-fab-ink-color(text-primary-on-light);
-  @include mdc-fab-ripple(()); // default dark ripple
+  @include mdc-fab-accessible(white);
 }
 
 .mdc-fab--mini {