material_components_web-sass 0.17.0 → 0.18.0

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

@@ -16,20 +16,43 @@
 
 @import "./functions";
 
-/*
-  Main theme colors.
-  If you're a user customizing your color scheme in SASS, these are probably the only variables you need to change.
-*/
-$mdc-theme-primary: #3f51b5 !default; /* Indigo 500 */
-$mdc-theme-accent: #ff4081 !default; /* Pink A200 */
-$mdc-theme-background: #fff !default; /* White */
+//
+// Main theme colors for your brand.
+//
+// If you're a user customizing your color scheme in SASS, these are probably the only variables you need to change.
+//
+
+$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;
+
+// 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-background: #fff !default; // White
+
+//
+// Which set of text colors to use for each main theme color (light or dark).
+//
 
-/* Which set of text colors to use for each main theme color (light or dark) */
 $mdc-theme-primary-tone: mdc-theme-light-or-dark($mdc-theme-primary);
-$mdc-theme-accent-tone: mdc-theme-light-or-dark($mdc-theme-accent);
+$mdc-theme-primary-light-tone: mdc-theme-light-or-dark($mdc-theme-primary-light);
+$mdc-theme-primary-dark-tone: mdc-theme-light-or-dark($mdc-theme-primary-dark);
+
+$mdc-theme-secondary-tone: mdc-theme-light-or-dark($mdc-theme-secondary);
+$mdc-theme-secondary-light-tone: mdc-theme-light-or-dark($mdc-theme-secondary-light);
+$mdc-theme-secondary-dark-tone: mdc-theme-light-or-dark($mdc-theme-secondary-dark);
+
 $mdc-theme-background-tone: mdc-theme-light-or-dark($mdc-theme-background);
 
-/* Text colors according to light vs dark and text type */
+//
+// Text colors according to light vs dark and text type.
+//
+
 $mdc-theme-text-colors: (
   dark: (
     primary: rgba(black, .87),
@@ -47,31 +70,70 @@ $mdc-theme-text-colors: (
   )
 );
 
-/* Primary text colors for each of the theme colors */
+//
+// Primary text colors for each of the theme colors.
+//
+
 $mdc-theme-property-values: (
+  // Primary
   primary: $mdc-theme-primary,
-  accent: $mdc-theme-accent,
+  primary-light: $mdc-theme-primary-light,
+  primary-dark: $mdc-theme-primary-dark,
+  // Secondary
+  secondary: $mdc-theme-secondary,
+  secondary-light: $mdc-theme-secondary-light,
+  secondary-dark: $mdc-theme-secondary-dark,
+  // Background
   background: $mdc-theme-background,
+  // Text-primary on "primary" background
   text-primary-on-primary: map-get(map-get($mdc-theme-text-colors, $mdc-theme-primary-tone), primary),
   text-secondary-on-primary: map-get(map-get($mdc-theme-text-colors, $mdc-theme-primary-tone), secondary),
   text-hint-on-primary: map-get(map-get($mdc-theme-text-colors, $mdc-theme-primary-tone), hint),
   text-disabled-on-primary: map-get(map-get($mdc-theme-text-colors, $mdc-theme-primary-tone), disabled),
   text-icon-on-primary: map-get(map-get($mdc-theme-text-colors, $mdc-theme-primary-tone), icon),
-  text-primary-on-accent: map-get(map-get($mdc-theme-text-colors, $mdc-theme-accent-tone), primary),
-  text-secondary-on-accent: map-get(map-get($mdc-theme-text-colors, $mdc-theme-accent-tone), secondary),
-  text-hint-on-accent: map-get(map-get($mdc-theme-text-colors, $mdc-theme-accent-tone), hint),
-  text-disabled-on-accent: map-get(map-get($mdc-theme-text-colors, $mdc-theme-accent-tone), disabled),
-  text-icon-on-accent: map-get(map-get($mdc-theme-text-colors, $mdc-theme-accent-tone), icon),
+  // Text-primary on "primary-light" background
+  text-primary-on-primary-light: map-get(map-get($mdc-theme-text-colors, $mdc-theme-primary-light-tone), primary),
+  text-secondary-on-primary-light: map-get(map-get($mdc-theme-text-colors, $mdc-theme-primary-light-tone), secondary),
+  text-hint-on-primary-light: map-get(map-get($mdc-theme-text-colors, $mdc-theme-primary-light-tone), hint),
+  text-disabled-on-primary-light: map-get(map-get($mdc-theme-text-colors, $mdc-theme-primary-light-tone), disabled),
+  text-icon-on-primary-light: map-get(map-get($mdc-theme-text-colors, $mdc-theme-primary-light-tone), icon),
+  // Text-primary on "primary-dark" background
+  text-primary-on-primary-dark: map-get(map-get($mdc-theme-text-colors, $mdc-theme-primary-dark-tone), primary),
+  text-secondary-on-primary-dark: map-get(map-get($mdc-theme-text-colors, $mdc-theme-primary-dark-tone), secondary),
+  text-hint-on-primary-dark: map-get(map-get($mdc-theme-text-colors, $mdc-theme-primary-dark-tone), hint),
+  text-disabled-on-primary-dark: map-get(map-get($mdc-theme-text-colors, $mdc-theme-primary-dark-tone), disabled),
+  text-icon-on-primary-dark: map-get(map-get($mdc-theme-text-colors, $mdc-theme-primary-dark-tone), icon),
+  // Text-primary on "secondary" background
+  text-primary-on-secondary: map-get(map-get($mdc-theme-text-colors, $mdc-theme-secondary-tone), primary),
+  text-secondary-on-secondary: map-get(map-get($mdc-theme-text-colors, $mdc-theme-secondary-tone), secondary),
+  text-hint-on-secondary: map-get(map-get($mdc-theme-text-colors, $mdc-theme-secondary-tone), hint),
+  text-disabled-on-secondary: map-get(map-get($mdc-theme-text-colors, $mdc-theme-secondary-tone), disabled),
+  text-icon-on-secondary: map-get(map-get($mdc-theme-text-colors, $mdc-theme-secondary-tone), icon),
+  // Text-primary on "secondary-light" background
+  text-primary-on-secondary-light: map-get(map-get($mdc-theme-text-colors, $mdc-theme-secondary-light-tone), primary),
+  text-secondary-on-secondary-light: map-get(map-get($mdc-theme-text-colors, $mdc-theme-secondary-light-tone), secondary),
+  text-hint-on-secondary-light: map-get(map-get($mdc-theme-text-colors, $mdc-theme-secondary-light-tone), hint),
+  text-disabled-on-secondary-light: map-get(map-get($mdc-theme-text-colors, $mdc-theme-secondary-light-tone), disabled),
+  text-icon-on-secondary-light: map-get(map-get($mdc-theme-text-colors, $mdc-theme-secondary-light-tone), icon),
+  // Text-primary on "secondary-dark" background
+  text-primary-on-secondary-dark: map-get(map-get($mdc-theme-text-colors, $mdc-theme-secondary-dark-tone), primary),
+  text-secondary-on-secondary-dark: map-get(map-get($mdc-theme-text-colors, $mdc-theme-secondary-dark-tone), secondary),
+  text-hint-on-secondary-dark: map-get(map-get($mdc-theme-text-colors, $mdc-theme-secondary-dark-tone), hint),
+  text-disabled-on-secondary-dark: map-get(map-get($mdc-theme-text-colors, $mdc-theme-secondary-dark-tone), disabled),
+  text-icon-on-secondary-dark: map-get(map-get($mdc-theme-text-colors, $mdc-theme-secondary-dark-tone), icon),
+  // Text-primary on "background" background
   text-primary-on-background: map-get(map-get($mdc-theme-text-colors, $mdc-theme-background-tone), primary),
   text-secondary-on-background: map-get(map-get($mdc-theme-text-colors, $mdc-theme-background-tone), secondary),
   text-hint-on-background: map-get(map-get($mdc-theme-text-colors, $mdc-theme-background-tone), hint),
   text-disabled-on-background: map-get(map-get($mdc-theme-text-colors, $mdc-theme-background-tone), disabled),
   text-icon-on-background: map-get(map-get($mdc-theme-text-colors, $mdc-theme-background-tone), icon),
+  // Text-primary on "light" background
   text-primary-on-light: map-get(map-get($mdc-theme-text-colors, dark), primary),
   text-secondary-on-light: map-get(map-get($mdc-theme-text-colors, dark), secondary),
   text-hint-on-light: map-get(map-get($mdc-theme-text-colors, dark), hint),
   text-disabled-on-light: map-get(map-get($mdc-theme-text-colors, dark), disabled),
   text-icon-on-light: map-get(map-get($mdc-theme-text-colors, dark), icon),
+  // Text-primary on "dark" background
   text-primary-on-dark: map-get(map-get($mdc-theme-text-colors, light), primary),
   text-secondary-on-dark: map-get(map-get($mdc-theme-text-colors, light), secondary),
   text-hint-on-dark: map-get(map-get($mdc-theme-text-colors, light), hint),

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

@@ -18,11 +18,11 @@
 
 :root {
   @each $style in map-keys($mdc-theme-property-values) {
-    --mdc-theme-#{$style}: map-get($mdc-theme-property-values, $style);
+    --mdc-theme-#{$style}: #{map-get($mdc-theme-property-values, $style)};
   }
 }
 
-/* Special case, so that .mdc-theme--background changes background color, not text color. */
+// Special case, so that .mdc-theme--background changes background color, not text color.
 .mdc-theme--background {
   @include mdc-theme-prop(background-color, background);
 }
@@ -35,8 +35,8 @@
   }
 }
 
-/* CSS rules for using primary and accent as background colors. */
-@each $style in ("primary", "accent") {
+// CSS rules for using primary and secondary (plus light/dark variants) as background colors.
+@each $style in ("primary", "primary-light", "primary-dark", "secondary", "secondary-light", "secondary-dark") {
   .mdc-theme--#{$style}-bg {
     @include mdc-theme-prop(background-color, $style, true);
   }

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

@@ -93,7 +93,7 @@
     cursor: pointer;
   }
 
-  &__icon:last-child {
+  &__icon:last-of-type {
     padding-right: 16px;
   }
 
@@ -136,7 +136,7 @@
 .mdc-toolbar--flexible {
   // stylelint-disable plugin/selector-bem-pattern
   // bem linter is disabled because it cannot correctly reconcile mdc prefix for css variables.
-  --mdc-toolbar-ratio-to-extend-flexible: $mdc-toolbar-ratio-to-extend-flexible;
+  --mdc-toolbar-ratio-to-extend-flexible: #{$mdc-toolbar-ratio-to-extend-flexible};
   // stylelint-enable plugin/selector-bem-pattern
 
   .mdc-toolbar__row:first-child {

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: material_components_web-sass
 version: !ruby/object:Gem::Version
-  version: 0.17.0
+  version: 0.18.0
 platform: ruby
 authors:
 - Dmitriy Tarasov
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-08-08 00:00:00.000000000 Z
+date: 2017-08-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: autoprefixer-rails
@@ -176,6 +176,7 @@ files:
 - vendor/assets/stylesheets/@material/tabs/tab-bar/mdc-tab-bar.scss
 - vendor/assets/stylesheets/@material/tabs/tab/mdc-tab.scss
 - vendor/assets/stylesheets/@material/textfield/mdc-textfield.scss
+- vendor/assets/stylesheets/@material/theme/_color_palette.scss
 - vendor/assets/stylesheets/@material/theme/_constants.scss
 - vendor/assets/stylesheets/@material/theme/_functions.scss
 - vendor/assets/stylesheets/@material/theme/_mixins.scss