material_components_web-sass 0.19.0 → 0.20.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 8bc374604a8e6e5c0784cb0dd4b49a1c31008ea7
-  data.tar.gz: b272cd91af045421a3f3566b9e176e0bb3e29c4d
+  metadata.gz: d8ca8d42be1db8293e67a81ea8982e79f83a046c
+  data.tar.gz: d273a3510c91da3706a0d025f3c362d14efe8555
 SHA512:
-  metadata.gz: 0a2cee9844bdf1c46f683e8000304160f0bab9aa208a531951a8af43506994ef435f16df8518b7e3f3e86e2f9ae025f91fed531dc8097255aabfad95f2fb9cc1
-  data.tar.gz: a8d6f8c0566c203bc2cad947352bf3d82586fdd09fa0c2a8ebdc3ea8c9d46c150903069c9ff001c8f6aafa3c45bb8a26efe0fdf9950d6dee6fcb2d58fad6c7c2
+  metadata.gz: 42483b7070fc79daa3e449c3c67aa5fd8f50e960c103c22a5fe72af7126616d20262404ccf9455d3bbc1cd782ef24b6ddc9d1f69d9a9aa31f9abae1167202c5a
+  data.tar.gz: 6c66d8344e4ad7cff4f95a3591ee0ca481e7fae829ca349fb7de97d69fb21ff268a82c7d96ca7bcc2a969dee83455b54eb03a7002f6d5a572b71b9be4182d663

data/CHANGELOG.md

@@ -1,3 +1,12 @@
+## 0.20.0 (2017-09-06)
+
+- Update assets to match upstream version
+
+Library version: 
+
+- Material Components for the web v0.20.0
+- Material Icons v3.0.0
+
 ## 0.19.0 (2017-08-27)
 
 - Update assets to match upstream version

data/lib/material_components_web/sass/version.rb

@@ -1,5 +1,5 @@
 module MaterialComponentsWeb
   module Sass
-    VERSION = '0.19.0'.freeze
+    VERSION = '0.20.0'.freeze
   end
 end

data/vendor/assets/javascripts/material-components-web.js

@@ -1039,21 +1039,17 @@ function detectEdgePseudoVarBug(windowObj) {
   // Detect versions of Edge with buggy var() support
   // See: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11495448/
   var document = windowObj.document;
-  var className = 'test-edge-css-var';
-  var styleNode = document.createElement('style');
-  document.head.appendChild(styleNode);
-  var sheet = styleNode.sheet;
-  // Internet Explorer 11 requires indices to always be specified to insertRule
-  sheet.insertRule(':root { --' + className + ': 1px solid #000; }', 0);
-  sheet.insertRule('.' + className + ' { visibility: hidden; }', 1);
-  sheet.insertRule('.' + className + '::before { border: var(--' + className + '); }', 2);
   var node = document.createElement('div');
-  node.className = className;
+  node.className = 'mdc-ripple-surface--test-edge-var-bug';
   document.body.appendChild(node);
-  // Bug exists if ::before style ends up propagating to the parent element
-  var hasPseudoVarBug = windowObj.getComputedStyle(node).borderTopStyle === 'solid';
+
+  // The bug exists if ::before style ends up propagating to the parent element.
+  // Additionally, getComputedStyle returns null in iframes with display: "none" in Firefox,
+  // but Firefox is known to support CSS custom properties correctly.
+  // See: https://bugzilla.mozilla.org/show_bug.cgi?id=548397
+  var computedStyle = windowObj.getComputedStyle(node);
+  var hasPseudoVarBug = computedStyle !== null && computedStyle.borderTopStyle === 'solid';
   node.remove();
-  styleNode.remove();
   return hasPseudoVarBug;
 }
 
@@ -11872,6 +11868,11 @@ var MDCTextfield = function (_MDCComponent) {
     set: function set(disabled) {
       this.foundation_.setDisabled(disabled);
     }
+  }, {
+    key: 'valid',
+    set: function set(valid) {
+      this.foundation_.setValid(valid);
+    }
   }], [{
     key: 'attachTo',
     value: function attachTo(root) {
@@ -11983,6 +11984,7 @@ var MDCTextfieldFoundation = function (_MDCFoundation) {
     _this.inputKeydownHandler_ = function () {
       return _this.receivedUserInput_ = true;
     };
+    _this.useCustomValidityChecking_ = false;
     return _this;
   }
 
@@ -12039,27 +12041,34 @@ var MDCTextfieldFoundation = function (_MDCFoundation) {
     value: function deactivateFocus_() {
       var _MDCTextfieldFoundati2 = MDCTextfieldFoundation.cssClasses,
           FOCUSED = _MDCTextfieldFoundati2.FOCUSED,
-          INVALID = _MDCTextfieldFoundati2.INVALID,
           LABEL_FLOAT_ABOVE = _MDCTextfieldFoundati2.LABEL_FLOAT_ABOVE;
 
       var input = this.getNativeInput_();
-      var isValid = input.checkValidity();
 
       this.adapter_.removeClass(FOCUSED);
       if (!input.value && !this.isBadInput_()) {
         this.adapter_.removeClassFromLabel(LABEL_FLOAT_ABOVE);
         this.receivedUserInput_ = false;
       }
+      if (!this.useCustomValidityChecking_) {
+        this.changeValidity_(input.checkValidity());
+      }
+    }
+  }, {
+    key: 'changeValidity_',
+    value: function changeValidity_(isValid) {
+      var INVALID = MDCTextfieldFoundation.cssClasses.INVALID;
+
       if (isValid) {
         this.adapter_.removeClass(INVALID);
       } else {
         this.adapter_.addClass(INVALID);
       }
-      this.updateHelptextOnDeactivation_(isValid);
+      this.updateHelptext_(isValid);
     }
   }, {
-    key: 'updateHelptextOnDeactivation_',
-    value: function updateHelptextOnDeactivation_(isValid) {
+    key: 'updateHelptext_',
+    value: function updateHelptext_(isValid) {
       var _MDCTextfieldFoundati3 = MDCTextfieldFoundation.cssClasses,
           HELPTEXT_PERSISTENT = _MDCTextfieldFoundati3.HELPTEXT_PERSISTENT,
           HELPTEXT_VALIDATION_MSG = _MDCTextfieldFoundati3.HELPTEXT_VALIDATION_MSG;
@@ -12122,6 +12131,12 @@ var MDCTextfieldFoundation = function (_MDCFoundation) {
         badInput: false
       };
     }
+  }, {
+    key: 'setValid',
+    value: function setValid(isValid) {
+      this.useCustomValidityChecking_ = true;
+      this.changeValidity_(isValid);
+    }
   }]);
 
   return MDCTextfieldFoundation;

data/vendor/assets/stylesheets/@material/button/_mixins.scss

@@ -18,7 +18,7 @@
 @import "@material/theme/mixins";
 @import "@material/theme/variables";
 
-@mixin mdc-button-filled() {
+@mixin mdc-button-filled_() {
   @include mdc-ripple-base;
   @include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .32));
   @include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .32));

data/vendor/assets/stylesheets/@material/button/mdc-button.scss

@@ -77,7 +77,7 @@
 
 .mdc-button--raised,
 .mdc-button--unelevated {
-  @include mdc-button-filled;
+  @include mdc-button-filled_;
 }
 
 .mdc-button--raised {
@@ -94,6 +94,23 @@
   }
 }
 
+.mdc-button--stroked {
+  @include mdc-theme-prop(border-color, text-primary-on-light);
+
+  border-width: 2px;
+  border-style: solid;
+  line-height: 32px;
+
+  @include mdc-theme-dark(".mdc-button") {
+    @include mdc-theme-prop(border-color, text-primary-on-dark);
+  }
+
+  // postcss-bem-linter: ignore
+  &.mdc-button--dense {
+    line-height: 27px;  // To accommodate odd font size of dense button
+  }
+}
+
 .mdc-button--compact {
   padding: 0 8px;
 }
@@ -134,6 +151,14 @@
       @include mdc-theme-prop(background-color, $theme-style);
       @include mdc-theme-prop(color, text-primary-on-#{$theme-style});
     }
+    // postcss-bem-linter: ignore
+    &.mdc-button--stroked {
+      @include mdc-theme-prop(border-color, $theme-style);
+
+      @include mdc-theme-dark(".mdc-button") {
+        @include mdc-theme-prop(border-color, $theme-style);
+      }
+    }
   }
 }
 
@@ -168,4 +193,15 @@
     }
   }
 }
+
+.mdc-button--stroked {
+  fieldset:disabled &,
+  &:disabled {
+    border-color: rgba(black, .38);
+
+    @include mdc-theme-dark(".mdc-button") {
+      @include mdc-theme-prop(border-color, text-disabled-on-dark);
+    }
+  }
+}
 // postcss-bem-linter: end

data/vendor/assets/stylesheets/@material/checkbox/_keyframes.scss

@@ -14,6 +14,7 @@
 // limitations under the License.
 //
 
+@import "@material/animation/variables";
 @import "@material/theme/mixins";
 @import "./variables";
 
@@ -74,7 +75,7 @@
   }
 
   50% {
-    @include mdc-animation-deceleration-curve;
+    animation-timing-function: $mdc-animation-deceleration-curve-timing-function;
   }
 
   100% {
@@ -99,8 +100,7 @@
 
 @keyframes mdc-checkbox-checked-unchecked-checkmark-path {
   from {
-    @include mdc-animation-acceleration-curve;
-
+    animation-timing-function: $mdc-animation-acceleration-curve-timing-function;
     opacity: 1;
     stroke-dashoffset: 0;
   }
@@ -113,10 +113,9 @@
 
 @keyframes mdc-checkbox-checked-indeterminate-checkmark {
   from {
+    animation-timing-function: $mdc-animation-deceleration-curve-timing-function;
     transform: rotate(0deg);
     opacity: 1;
-
-    @include mdc-animation-deceleration-curve;
   }
 
   to {
@@ -140,10 +139,9 @@
 
 @keyframes mdc-checkbox-checked-indeterminate-mixedmark {
   from {
+    animation-timing-function: mdc-animation-deceleration-curve-timing-function;
     transform: rotate(-45deg);
     opacity: 0;
-
-    @include mdc-animation-deceleration-curve;
   }
 
   to {

data/vendor/assets/stylesheets/@material/checkbox/mdc-checkbox.scss

@@ -15,16 +15,11 @@
 //
 
 @import "@material/animation/functions";
-@import "@material/animation/mixins";
 @import "@material/ripple/mixins";
 @import "@material/rtl/mixins";
 @import "./variables";
 @import "./keyframes";
 
-@function mdc-checkbox-transition($property, $timing-function, $delay: 0ms, $duration: $mdc-checkbox-transition-duration) {
-  @return $property $duration $timing-function $delay;
-}
-
 @function mdc-checkbox-transition-enter($property, $delay: 0ms, $duration: $mdc-checkbox-transition-duration) {
   @return mdc-animation-enter($property, $duration, $delay);
 }

data/vendor/assets/stylesheets/@material/dialog/mdc-dialog.scss

@@ -39,7 +39,7 @@ $mdc-dialog-dark-theme-bg-color: #303030 !default;
   width: 100%;
   height: 100%;
   visibility: hidden;
-  z-index: 2;
+  z-index: 5;
 
   &__backdrop {
     position: fixed;
@@ -141,10 +141,10 @@ $mdc-dialog-dark-theme-bg-color: #303030 !default;
         @include mdc-rtl-reflexive-box(margin, right, 0);
       }
     }
+  }
 
-    &__action {
-      @include mdc-theme-prop(color, secondary);
-    }
+  &__action {
+    @include mdc-theme-prop(color, secondary);
   }
 
   // TODO: Replace with breakpoint variable

data/vendor/assets/stylesheets/@material/fab/_mixins.scss

@@ -0,0 +1,99 @@
+// Copyright 2016 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.
+
+@import "@material/animation/functions";
+@import "@material/animation/variables";
+@import "@material/elevation/mixins";
+@import "@material/ripple/mixins";
+@import "@material/theme/mixins";
+
+@mixin mdc-fab-container-color($color) {
+  @include mdc-theme-prop(background-color, $color);
+}
+
+@mixin mdc-fab-ink-color($color) {
+  @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));
+}
+
+@mixin mdc-fab-base_ {
+  @include mdc-ripple-base;
+
+  display: inline-flex;
+  position: relative;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  padding: 0;
+  transition: box-shadow 280ms $mdc-animation-standard-curve-timing-function;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  user-select: none;
+  box-sizing: border-box;
+  fill: currentColor;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  overflow: hidden;
+
+  @include mdc-elevation(6);
+
+  &:active {
+    @include mdc-elevation(12);
+  }
+
+  &:active,
+  &:focus {
+    // TODO(acdvorak): Should this be paired with states and/or ripple? We don't want to disable outline
+    // (an accessibility/usability feature) unless we're confident that there is also a visual indication that the
+    // element has focus. If the client has customized the DOM in some unexpected way, and is certain that another
+    // element will receive focus instead, they can always override this property manually in their CSS.
+    outline: none;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+  }
+
+  // This allows for using SVGs within them to align properly in all browsers.
+  // Can remove once: https://bugzilla.mozilla.org/show_bug.cgi?id=1294515 is resolved.
+
+  // stylelint-disable selector-max-type
+  // postcss-bem-linter: ignore
+  > svg {
+    width: 100%;
+  }
+  // stylelint-enable selector-max-type
+}
+
+@mixin mdc-fab--mini_ {
+  width: 40px;
+  height: 40px;
+}
+
+@mixin mdc-fab__icon_ {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}

data/vendor/assets/stylesheets/@material/fab/mdc-fab.scss

@@ -12,98 +12,34 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-@import "@material/animation/functions";
-@import "@material/animation/variables";
-@import "@material/elevation/mixins";
-@import "@material/ripple/mixins";
-@import "@material/theme/mixins";
+@import "@material/theme/variables";
+@import "./mixins";
 
 // postcss-bem-linter: define fab
-.mdc-fab {
-  @include mdc-ripple-base;
-  @include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .16));
-  @include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .16));
 
-  display: inline-flex;
-  position: relative;
-  justify-content: center;
-  width: 56px;
-  height: 56px;
-  padding: 0;
-  transition: box-shadow 280ms $mdc-animation-standard-curve-timing-function;
-  border: none;
-  border-radius: 50%;
-  cursor: pointer;
-  user-select: none;
-  box-sizing: border-box;
-  fill: currentColor;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  overflow: hidden;
+.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));
 
   &:not(.mdc-ripple-upgraded) {
     -webkit-tap-highlight-color: rgba(0, 0, 0, .18);
   }
+}
 
-  @include mdc-theme-prop(background-color, secondary);
-  @include mdc-theme-prop(color, text-primary-on-secondary);
-  @include mdc-elevation(6);
-
-  &--mini {
-    width: 40px;
-    height: 40px;
-  }
-
-  &--plain {
-    background-color: white;
-
-    @include mdc-theme-prop(color, text-primary-on-light);
-    @include mdc-ripple-bg((pseudo: "::before"));
-    @include mdc-ripple-fg((pseudo: "::after"));
-  }
-
-  &:active,
-  &:focus {
-    outline: none;
-  }
-
-  &:active {
-    @include mdc-elevation(12);
-  }
-
-  &:hover {
-    cursor: pointer;
-  }
-
-  &::-moz-focus-inner {
-    padding: 0;
-    border: 0;
-  }
-
-  // This allows for using SVGs within them to align properly in all browsers.
-  // Can remove once: https://bugzilla.mozilla.org/show_bug.cgi?id=1294515 is resolved.
-
-  // stylelint-disable selector-max-type
-  // postcss-bem-linter: ignore
-  > svg {
-    width: 100%;
-  }
-  // stylelint-enable selector-max-type
+.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
+}
 
-  fieldset:disabled &,
-  &:disabled {
-    background-color: rgba(0, 0, 0, .12);
-    color: rgba(0, 0, 0, .26);
-    cursor: default;
-    pointer-events: none;
-  }
+.mdc-fab--mini {
+  @include mdc-fab--mini_;
 }
 
 .mdc-fab__icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
+  @include mdc-fab__icon_;
 }
 
 // postcss-bem-linter: end

data/vendor/assets/stylesheets/@material/ripple/mdc-ripple.scss

@@ -54,4 +54,20 @@
   }
 }
 
+// Styles used to detect buggy behavior of CSS custom properties in Edge
+// See: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11495448/
+
+.mdc-ripple-surface--test-edge-var-bug {
+  // stylelint-disable plugin/selector-bem-pattern
+  // bem linter is disabled because it cannot correctly reconcile mdc prefix for css variables.
+  --mdc-ripple-surface-test-edge-var: 1px solid #000;
+  // stylelint-enable plugin/selector-bem-pattern
+
+  visibility: hidden;
+
+  &::before {
+    border: var(--mdc-ripple-surface-test-edge-var);
+  }
+}
+
 // postcss-bem-linter: end

data/vendor/assets/stylesheets/@material/switch/_variables.scss

@@ -28,6 +28,3 @@ $mdc-switch-unchecked-track-color-dark: #fff;
 $mdc-switch-unchecked-focus-ring-color-dark: #f1f1f1;
 $mdc-switch-disabled-knob-color: #bdbdbd;
 $mdc-switch-disabled-knob-color-dark: #424242;
-
-$mdc-switch-transition-duration: 175ms;
-$mdc-switch-transition-curve: cubic-bezier(.4, 0, .2, 1);

data/vendor/assets/stylesheets/@material/switch/mdc-switch.scss

@@ -12,15 +12,13 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-@import "@material/animation/functions";
 @import "@material/animation/variables";
 @import "@material/elevation/mixins";
 @import "@material/theme/mixins";
-@import "./mixins";
 @import "./variables";
 
 @function mdc-switch-transition($property) {
-  @return $property 90ms $mdc-switch-transition-curve;
+  @return $property 90ms $mdc-animation-standard-curve-timing-function;
 }
 
 // postcss-bem-linter: define switch

data/vendor/assets/stylesheets/@material/theme/_functions.scss

@@ -16,6 +16,11 @@
 
 @import "./constants";
 
+// Used by the functions below to shift a color's luminance by approximately
+// one index within its tonal palette.
+// E.g., shift from Red 500 to Red 400 or Red 600.
+$_mdc-theme-tonal-offset: 7%;
+
 // Calculate the luminance for a color.
 // See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
 @function mdc-theme-luminance($color) {
@@ -51,3 +56,65 @@
     @return "light";
   }
 }
+
+// lighten() and darken() require values to be between 0% and 100%.
+@function mdc-theme-clamp-percentage_($percentage) {
+  @return max(0%, min(100%, $percentage));
+}
+
+// Generate light and dark variants of the given color, offset by approximately
+// the specified number of indexes within the color's tonal palette.
+@function mdc-theme-tonal-variants_($color, $num-indexes: 2) {
+  $luminance: mdc-theme-luminance($color) * 100%;
+  $amount-1x: mdc-theme-clamp-percentage_($_mdc-theme-tonal-offset * $num-indexes);
+  $amount-2x: mdc-theme-clamp-percentage_($_mdc-theme-tonal-offset * $num-indexes * 2);
+  $lower-bound: $amount-1x;
+  $upper-bound: 100% - $lower-bound;
+
+  @if $luminance <= $lower-bound {
+    @return (
+      dark: lighten($color, $amount-1x),
+      light: lighten($color, $amount-2x)
+    );
+  }
+
+  @else if $luminance >= $upper-bound {
+    @return (
+      dark: darken($color, $amount-2x),
+      light: darken($color, $amount-1x)
+    );
+  }
+
+  @else {
+    @return (
+      dark: darken($color, $amount-1x),
+      light: lighten($color, $amount-1x)
+    );
+  }
+}
+
+// Darken the given color by approximately the specified number of indexes
+// within its tonal palette.
+//
+// If the color is already very dark, it will be lightened instead of darkened
+// to ensure that the returned value is visually distinct from the input color.
+//
+// If the color is very light, it will be darkened twice as much as usual to
+// ensure that the returned value is visually distinct from the light variant
+// (which will actually end up being a dark shade).
+@function mdc-theme-dark-variant($color, $num-indexes: 2) {
+  @return map-get(mdc-theme-tonal-variants_($color, $num-indexes), dark);
+}
+
+// Lighten the given color by approximately the specified number of indexes
+// within its tonal palette.
+//
+// If the color is already very light, it will be darkened instead of lightened
+// to ensure that the returned value is visually distinct from the input color.
+//
+// If the color is very dark, it will be lightened twice as much as usual to
+// ensure that the returned value is visually distinct from the dark variant
+// (which will actually end up being a light tint).
+@function mdc-theme-light-variant($color, $num-indexes: 2) {
+  @return map-get(mdc-theme-tonal-variants_($color, $num-indexes), light);
+}

data/vendor/assets/stylesheets/@material/theme/_mixins.scss

@@ -18,22 +18,36 @@
 
 // Applies the correct theme color style to the specified property.
 // $property is typically color or background-color, but can be any CSS property that accepts color values.
-// $style should be one of the map keys in $mdc-theme-property-values (_variables.scss).
+// $style should be one of the map keys in $mdc-theme-property-values (_variables.scss), or a literal color value.
 @mixin mdc-theme-prop($property, $style, $important: false) {
-  @if not map-has-key($mdc-theme-property-values, $style) {
-    @error "Invalid style: '#{$style}'. Choose one of: #{map-keys($mdc-theme-property-values)}";
-  }
+  @if type-of($style) == "color" {
+    @if $important {
+      #{$property}: $style !important;
+    }
 
-  @if $important {
-    /* @alternate */
-    #{$property}: map-get($mdc-theme-property-values, $style) !important;
-    #{$property}: var(--mdc-theme-#{$style}, map-get($mdc-theme-property-values, $style)) !important;
+    @else {
+      #{$property}: $style;
+    }
   }
 
   @else {
-    /* @alternate */
-    #{$property}: map-get($mdc-theme-property-values, $style);
-    #{$property}: var(--mdc-theme-#{$style}, map-get($mdc-theme-property-values, $style));
+    @if not map-has-key($mdc-theme-property-values, $style) {
+      @error "Invalid style: '#{$style}'. Choose one of: #{map-keys($mdc-theme-property-values)}";
+    }
+
+    $value: map-get($mdc-theme-property-values, $style);
+
+    @if $important {
+      /* @alternate */
+      #{$property}: $value !important;
+      #{$property}: var(--mdc-theme-#{$style}, $value) !important;
+    }
+
+    @else {
+      /* @alternate */
+      #{$property}: $value;
+      #{$property}: var(--mdc-theme-#{$style}, $value);
+    }
   }
 }
 

data/vendor/assets/stylesheets/@material/theme/_variables.scss

@@ -23,15 +23,15 @@
 //
 
 $mdc-theme-primary: #3f51b5 !default; // Indigo 500
-$mdc-theme-primary-light: lighten($mdc-theme-primary, 14%) !default;
-$mdc-theme-primary-dark: darken($mdc-theme-primary, 14%) !default;
+$mdc-theme-primary-light: mdc-theme-light-variant($mdc-theme-primary) !default;
+$mdc-theme-primary-dark: mdc-theme-dark-variant($mdc-theme-primary) !default;
 
 // The $mdc-theme-accent variable is DEPRECATED - it exists purely for backward compatibility.
 // The $mdc-theme-secondary* variables should be used for all new projects.
 $mdc-theme-accent: #ff4081 !default; // Pink A200
 $mdc-theme-secondary: $mdc-theme-accent !default;
-$mdc-theme-secondary-light: lighten($mdc-theme-secondary, 14%) !default;
-$mdc-theme-secondary-dark: darken($mdc-theme-secondary, 14%) !default;
+$mdc-theme-secondary-light: mdc-theme-light-variant($mdc-theme-secondary) !default;
+$mdc-theme-secondary-dark: mdc-theme-dark-variant($mdc-theme-secondary) !default;
 
 $mdc-theme-background: #fff !default; // White
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: material_components_web-sass
 version: !ruby/object:Gem::Version
-  version: 0.19.0
+  version: 0.20.0
 platform: ruby
 authors:
 - Dmitriy Tarasov
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-08-27 00:00:00.000000000 Z
+date: 2017-09-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: autoprefixer-rails
@@ -145,6 +145,7 @@ files:
 - vendor/assets/stylesheets/@material/elevation/_mixins.scss
 - vendor/assets/stylesheets/@material/elevation/_variables.scss
 - vendor/assets/stylesheets/@material/elevation/mdc-elevation.scss
+- vendor/assets/stylesheets/@material/fab/_mixins.scss
 - vendor/assets/stylesheets/@material/fab/mdc-fab.scss
 - vendor/assets/stylesheets/@material/fonts/material-icons.scss
 - vendor/assets/stylesheets/@material/fonts/roboto.scss
@@ -169,7 +170,6 @@ files:
 - vendor/assets/stylesheets/@material/slider/mdc-slider.scss
 - vendor/assets/stylesheets/@material/snackbar/_variables.scss
 - vendor/assets/stylesheets/@material/snackbar/mdc-snackbar.scss
-- vendor/assets/stylesheets/@material/switch/_mixins.scss
 - vendor/assets/stylesheets/@material/switch/_variables.scss
 - vendor/assets/stylesheets/@material/switch/mdc-switch.scss
 - vendor/assets/stylesheets/@material/tabs/mdc-tabs.scss
@@ -210,7 +210,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.6.12
+rubygems_version: 2.6.13
 signing_key: 
 specification_version: 4
 summary: Material Components for the web (MDC-Web) with Material Icons and Roboto

data/vendor/assets/stylesheets/@material/switch/_mixins.scss

@@ -1,18 +0,0 @@
-// 
-// Copyright 2016 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.
-// 
-
-@function mdc-switch-transition($property, $timing-function, $duration: $mdc-switch-transition-duration) {
-  @return $property $duration $timing-function;
-}