diff --git a/packages/mdc-fab/README.md b/packages/mdc-fab/README.md index 16d32fc7ebb..f147874574a 100644 --- a/packages/mdc-fab/README.md +++ b/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)` diff --git a/packages/mdc-fab/_mixins.scss b/packages/mdc-fab/_mixins.scss index e12c8326782..217b52a13ea 100644 --- a/packages/mdc-fab/_mixins.scss +++ b/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); diff --git a/packages/mdc-fab/_variables.scss b/packages/mdc-fab/_variables.scss new file mode 100644 index 00000000000..a4720bd64f1 --- /dev/null +++ b/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); diff --git a/packages/mdc-fab/mdc-fab.scss b/packages/mdc-fab/mdc-fab.scss index f957e55d690..dc3419adbeb 100644 --- a/packages/mdc-fab/mdc-fab.scss +++ b/packages/mdc-fab/mdc-fab.scss @@ -14,6 +14,7 @@ @import "@material/theme/variables"; @import "./mixins"; +@import "./variables"; // postcss-bem-linter: define fab @@ -21,7 +22,7 @@ @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); @@ -29,9 +30,7 @@ } .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 {