feat(theming): change default color of components that should be accent

BREAKING CHANGE: As per the
[spec](http://www.google.com/design/spec/style/color.html#color-ui-color-application)
this commit changes the default color palette of FABs, checkboxes, radio
buttons, sliders and switches to the accent palette.

closes #1255

Author: rschmukler

src/components/button/button-theme.scss

@@ -32,10 +32,17 @@ md-toolbar .md-button.md-THEME_NAME-theme.md-fab {
 
   &.md-fab {
     border-radius: $button-fab-border-radius;
+    background-color: '{{accent-color}}';
+    color: '{{accent-contrast}}';
+    &:not([disabled]) {
+      &:hover, 
+      &:focus {
+        background-color: '{{accent-A700}}';
+      }
+    }
   }
 
-  &.md-raised,
-  &.md-fab {
+  &.md-raised {
     color: '{{background-contrast}}';
     background-color: '{{background-500-0.185}}';
     &:not([disabled]) {

src/components/button/button.js

@@ -26,6 +26,10 @@ angular.module('material.components.button', [
  * If you supply a `href` or `ng-href` attribute, it will become an `<a>` element. Otherwise, it will
  * become a `<button>` element.
  *
+ * As per the [material design spec](http://www.google.com/design/spec/style/color.html#color-ui-color-application)
+ * the FAB button is in the accent color by default. The primary color palette may be used with
+ * the `md-primary` class.
+ *
  * @param {boolean=} md-no-ink If present, disable ripple ink effects.
  * @param {expression=} ng-disabled En/Disable based on the expression
  * @param {string=} aria-label Adds alternative text to button for accessibility, useful for icon buttons.

src/components/button/demoBasicUsage/index.html

@@ -22,7 +22,7 @@
             <md-icon icon="/img/icons/ic_access_time_24px.svg" style="width: 24px; height: 24px;"></md-icon>
         </md-button>
 
-      <md-button class="md-fab" aria-label="New document">
+      <md-button class="md-fab md-primary" aria-label="New document">
         <md-icon icon="/img/icons/ic_insert_drive_file_24px.svg" style="width: 24px; height: 24px;"></md-icon>
       </md-button>
 

src/components/checkbox/checkbox-theme.scss

@@ -1,7 +1,7 @@
 md-checkbox.md-THEME_NAME-theme {
 
   .md-ripple {
-    color: '{{primary-600}}';
+    color: '{{accent-600}}';
   }
   &.md-checked .md-ripple {
     color: '{{background-600}}';
@@ -11,17 +11,17 @@ md-checkbox.md-THEME_NAME-theme {
     border-color: '{{foreground-2}}';
   }
   &.md-checked .md-icon {
-    background-color: '{{primary-color-0.87}}';
+    background-color: '{{accent-color-0.87}}';
   }
 
   &.md-checked .md-icon:after {
     border-color: '{{background-200}}';
   }
 
   &:not([disabled]) {
-    &.md-accent {
+    &.md-primary {
       .md-ripple {
-        color: '{{accent-600}}';
+        color: '{{primary-600}}';
       }
       &.md-checked .md-ripple {
         color: '{{background-600}}';
@@ -31,7 +31,7 @@ md-checkbox.md-THEME_NAME-theme {
         border-color: '{{foreground-2}}';
       }
       &.md-checked .md-icon {
-        background-color: '{{accent-color-0.87}}';
+        background-color: '{{primary-color-0.87}}';
       }
 
       &.md-checked .md-icon:after {

src/components/checkbox/checkbox.js

@@ -20,6 +20,10 @@ angular.module('material.components.checkbox', [
  * @description
  * The checkbox directive is used like the normal [angular checkbox](https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D).
  *
+ * As per the [material design spec](http://www.google.com/design/spec/style/color.html#color-ui-color-application)
+ * the checkbox is in the accent color by default. The primary color palette may be used with
+ * the `md-primary` class.
+ *
  * @param {string} ng-model Assignable angular expression to data-bind to.
  * @param {string=} name Property name of the form under which the control is published.
  * @param {expression=} ng-true-value The value to which the expression should be set when selected.

src/components/checkbox/demoBasicUsage/index.html

@@ -17,7 +17,7 @@
     Checkbox: Disabled, Checked
   </md-checkbox>
 
-  <md-checkbox md-no-ink aria-label="Checkbox No Ink" ng-model="data.cb5" class="md-accent">
-    Checkbox (md-accent): No Ink
+  <md-checkbox md-no-ink aria-label="Checkbox No Ink" ng-model="data.cb5" class="md-primary">
+    Checkbox (md-primary): No Ink
   </md-checkbox>
 </div>

src/components/radioButton/radio-button-theme.scss

@@ -5,32 +5,32 @@ md-radio-button.md-THEME_NAME-theme {
   }
 
   .md-on {
-    background-color: '{{primary-color-0.87}}';
+    background-color: '{{accent-color-0.87}}';
   }
   &.md-checked .md-off {
-    border-color: '{{primary-color-0.87}}';
+    border-color: '{{accent-color-0.87}}';
   }
   &.md-checked .md-ink-ripple {
-    color: '{{primary-color-0.87}}';
+    color: '{{accent-color-0.87}}';
   }
   .md-container .md-ripple {
-    color: '{{primary-600}}';
+    color: '{{accent-600}}';
   }
 
   &:not([disabled]) {
 
-    &.md-accent {
+    &.md-primary {
       .md-on {
-        background-color: '{{accent-color-0.87}}';
+        background-color: '{{primary-color-0.87}}';
       }
       &.md-checked .md-off {
-        border-color: '{{accent-color-0.87}}';
+        border-color: '{{primary-color-0.87}}';
       }
       &.md-checked .md-ink-ripple {
-        color: '{{accent-color-0.87}}';
+        color: '{{primary-color-0.87}}';
       }
       .md-container .md-ripple {
-        color: '{{accent-600}}';
+        color: '{{primary-600}}';
       }
     }
 

src/components/radioButton/radioButton.js

@@ -25,6 +25,10 @@ angular.module('material.components.radioButton', [
  * container for the 1..n grouped radio buttons; specified using nested
  * `<md-radio-button>` tags.
  *
+ * As per the [material design spec](http://www.google.com/design/spec/style/color.html#color-ui-color-application)
+ * the radio button is in the accent color by default. The primary color palette may be used with
+ * the `md-primary` class.
+ *
  * Note: `<md-radio-group>` and `<md-radio-button>` handle tabindex differently
  * than the native `<input type='radio'>` controls. Whereas the native controls
  * force the user to tab through all the radio buttons, `<md-radio-group>`

src/components/slider/slider-theme.scss

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

src/components/slider/slider.js

@@ -19,6 +19,10 @@ angular.module('material.components.slider', [
  * The `<md-slider>` component allows the user to choose from a range of
  * values.
  *
+ * As per the [material design spec](http://www.google.com/design/spec/style/color.html#color-ui-color-application)
+ * the slider is in the accent color by default. The primary color palette may be used with
+ * the `md-primary` class.
+ *
  * It has two modes: 'normal' mode, where the user slides between a wide range
  * of values, and 'discrete' mode, where the user slides between only a few
  * select values.