feat(linear-progress): Add color theme mixins and remove --accent (#1541)

BREAKING CHANGE: The `mdc-linear-progres--accent` modifier class has been removed. Use Sass color mixins instead.

Resolves #1148

Author: acdvorak

demos/linear-progress.html

@@ -161,7 +161,7 @@
           </figure>
 
           <figure class="linear-progress-demo">
-            <div role="progressbar" class="mdc-linear-progress mdc-linear-progress--accent">
+            <div role="progressbar" class="mdc-linear-progress demo-linear-progress--custom" data-buffer="true">
               <div class="mdc-linear-progress__buffering-dots"></div>
               <div class="mdc-linear-progress__buffer"></div>
               <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
@@ -171,7 +171,7 @@
                 <span class="mdc-linear-progress__bar-inner"></span>
               </div>
             </div>
-            <figcaption>Secondary Color</figcaption>
+            <figcaption>Custom Colors with Buffer</figcaption>
           </figure>
 
         </fieldset>

demos/linear-progress.scss

@@ -17,3 +17,9 @@
 @import "./common";
 @import "../packages/mdc-linear-progress/mdc-linear-progress";
 @import "../packages/mdc-typography/mdc-typography";
+@import "../packages/mdc-theme/color-palette";
+
+.demo-linear-progress--custom {
+  @include mdc-linear-progress-bar-color($material-color-red-500);
+  @include mdc-linear-progress-buffer-color($material-color-red-100);
+}

packages/mdc-linear-progress/README.md

@@ -59,7 +59,13 @@ The provided modifiers are:
 | --------------------- | ------------------------------------------------------- |
 | `mdc-linear-progress--indeterminate`   | Puts the linear progress indicator in an indeterminate state. |
 | `mdc-linear-progress--reversed`  | Reverses the direction of the linear progress indicator.   |
-| `mdc-linear-progress--accent` | Colors the linear progress indicator with the secondary color. |
+
+### Sass Mixins
+
+Mixin | Description
+--- | ---
+`mdc-linear-progress-bar-color($color)` | Sets the color of the progress bar
+`mdc-linear-progress-buffer-color($color)` | Sets the color of the buffer bar and dots
 
 ### Using the Foundation Class
 

packages/mdc-linear-progress/_mixins.scss

@@ -0,0 +1,52 @@
+// 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.
+
+@import "@material/theme/mixins";
+@import "@material/theme/variables"; // for mdc-theme-prop-value
+
+@mixin mdc-linear-progress-bar-color($color) {
+  .mdc-linear-progress__bar-inner {
+    @include mdc-theme-prop(background-color, $color);
+  }
+}
+
+@mixin mdc-linear-progress-buffer-color($color) {
+  // We need to escape the '#' character as "%23" for SVG because '#' is a reserved character in URIs.
+  $color-value-for-css: mdc-theme-prop-value($color);
+  $color-value-for-svg: mdc-linear-progress-str-replace_(#{$color-value-for-css}, "#", "%23");
+
+  .mdc-linear-progress__buffering-dots {
+    // SVG is optimized for data URI (https://codepen.io/tigt/post/optimizing-svgs-in-data-uris)
+    // stylelint-disable-next-line function-url-quotes
+    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' preserveAspectRatio='none slice'%3E%3Ccircle cx='1' cy='1' r='1' fill='#{$color-value-for-svg}'/%3E%3C/svg%3E");
+  }
+
+  .mdc-linear-progress__buffer {
+    background-color: $color-value-for-css;
+  }
+}
+
+// Based on https://css-tricks.com/snippets/sass/str-replace-function/
+@function mdc-linear-progress-str-replace_($string, $search, $replace) {
+  $index: str-index($string, $search);
+
+  @if $index {
+    $head: str-slice($string, 1, $index - 1);
+    $tail: mdc-linear-progress-str-replace_(str-slice($string, $index + str-length($search)), $search, $replace);
+
+    @return $head + $replace + $tail;
+  }
+
+  @return $string;
+}

packages/mdc-linear-progress/_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-linear-progress-baseline-buffer-color: #e6e6e6;

packages/mdc-linear-progress/mdc-linear-progress.scss

@@ -13,10 +13,14 @@
 // limitations under the License.
 
 @import "@material/animation/functions";
-@import "@material/theme/mixins";
 @import "./keyframes";
+@import "./mixins";
+@import "./variables";
 
 .mdc-linear-progress {
+  @include mdc-linear-progress-bar-color(primary);
+  @include mdc-linear-progress-buffer-color($mdc-linear-progress-baseline-buffer-color);
+
   position: relative;
   width: 100%;
   height: 4px;
@@ -34,27 +38,18 @@
   }
 
   &__bar-inner {
-    @include mdc-theme-prop(background-color, primary);
-
     display: inline-block;
     position: absolute;
     width: 100%;
     height: 100%;
     animation: none;
   }
 
-  &--accent .mdc-linear-progress__bar-inner {
-    @include mdc-theme-prop(background-color, secondary);
-  }
-
   &__buffering-dots {
     position: absolute;
     width: 100%;
     height: 100%;
     animation: buffering 250ms infinite linear;
-    // SVG is optimized for data URI (https://codepen.io/tigt/post/optimizing-svgs-in-data-uris)
-    // stylelint-disable-next-line function-url-quotes
-    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' preserveAspectRatio='none slice'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23e6e6e6'/%3E%3C/svg%3E");
     background-repeat: repeat-x;
     background-size: 10px 4px;
   }
@@ -65,7 +60,6 @@
     height: 100%;
     transform-origin: top left;
     transition: mdc-animation-exit-temporary(transform, 250ms);
-    background-color: #e6e6e6;
   }
 
   &__secondary-bar {