fix(slider): BREAKING: change default color to accent

As per the spec, sliders should be accent by default. If you wish to
retain the primary color, apply the `md-primary` class to the slider.

Update demos accordingly.

Author: rschmukler

docs/content/Theming/03_configuring_a_theme.md

@@ -7,8 +7,8 @@
 By default your Angular Material application will use the default theme, a theme
 that is pre-configured with the following palettes for intention groups:
 
-- *primary* - blue
-- *accent* - green
+- *primary* - indigo
+- *accent* - pink
 - *warn* - red
 - *background* - grey (note that white is in this palette)
 

src/components/slider/demoBasicUsage/index.html

@@ -10,7 +10,7 @@ <h3>
       <div flex="10" layout layout-align="center center">
         <span>R</span>
       </div>
-      <md-slider flex min="0" max="255" ng-model="color.red" aria-label="red" id="red-slider" class="md-warn">
+      <md-slider flex min="0" max="255" ng-model="color.red" aria-label="red" id="red-slider" class="">
       </md-slider>
       <div flex="20" layout layout-align="center center">
         <input type="number" ng-model="color.red" aria-label="red" aria-controls="red-slider">
@@ -39,9 +39,28 @@ <h3>
       </div>
     </div>
 
-    <h3>Rating: {{rating}}/5</h3>
-    <md-slider md-discrete ng-model="rating" step="1" min="1" max="5" aria-label="rating">
-    </md-slider>
+    <h3>Rating: {{rating}}/5 - demo of theming classes</h3>
+    <div layout>
+      <div flex="10" layout layout-align="center center">
+        <span>default</span>
+      </div>
+      <md-slider flex md-discrete ng-model="rating" step="1" min="1" max="5" aria-label="rating">
+      </md-slider>
+    </div>
+    <div layout>
+      <div flex="10" layout layout-align="center center">
+        <span>md-warn</span>
+      </div>
+      <md-slider flex class="md-warn" md-discrete ng-model="rating" step="1" min="1" max="5" aria-label="rating">
+      </md-slider>
+    </div>
+    <div layout>
+      <div flex="10" layout layout-align="center center">
+        <span>md-primary</span>
+      </div>
+      <md-slider flex class="md-primary" md-discrete ng-model="rating" step="1" min="1" max="5" aria-label="rating">
+      </md-slider>
+    </div>
 
     <h3>Disabled</h3>
     <md-slider ng-model="disabled1" ng-disabled="true" aria-label="Disabled 1"></md-slider>

src/components/slider/slider-theme.scss

@@ -20,24 +20,24 @@ md-slider.md-THEME_NAME-theme {
   }
 
   .md-track.md-track-fill {
-    background-color: '{{primary-color}}';
+    background-color: '{{accent-color}}';
   }
   .md-thumb:after {
-    border-color: '{{primary-color}}';
-    background-color: '{{primary-color}}';
+    border-color: '{{accent-color}}';
+    background-color: '{{accent-color}}';
   }
   .md-sign {
-    background-color: '{{primary-color}}';
+    background-color: '{{accent-color}}';
     &:after {
-      border-top-color: '{{primary-color}}';
+      border-top-color: '{{accent-color}}';
     }
   }
   .md-thumb-text {
-    color: '{{primary-contrast}}';
+    color: '{{accent-contrast}}';
   }
 
   &.md-warn {
-    .md-track-fill {
+    .md-track.md-track-fill {
       background-color: '{{warn-color}}';
     }
     .md-thumb:after {
@@ -57,7 +57,7 @@ md-slider.md-THEME_NAME-theme {
   }
 
   &.md-primary {
-    .md-track-fill {
+    .md-track.md-track-fill {
       background-color: '{{primary-color}}';
     }
     .md-thumb:after {