fix(button-toggle): make conform with design specs (#2570)

Makes the button-toggle more conform with the Material Design specifications.

* The specifications don't describe much but it's obvious that unselected items should not have the default text color.
* Reduces the color intensity of disabled button toggles because those should be very similar to normal buttons.

Author: devversion

src/demo-app/button-toggle/button-toggle-demo.html

@@ -2,21 +2,25 @@
   <md-checkbox (change)="isVertical = $event.checked">Show Button Toggles Vertical</md-checkbox>
 </p>
 
+<p>
+  <md-checkbox (change)="isDisabled = $event.checked">Disable Button Toggle Items</md-checkbox>
+</p>
+
 <h1>Exclusive Selection</h1>
 
 <section class="demo-section">
   <md-button-toggle-group name="alignment" [vertical]="isVertical">
     <md-button-toggle value="left"><md-icon>format_align_left</md-icon></md-button-toggle>
     <md-button-toggle value="center"><md-icon>format_align_center</md-icon></md-button-toggle>
     <md-button-toggle value="right"><md-icon>format_align_right</md-icon></md-button-toggle>
-    <md-button-toggle value="justify" disabled><md-icon>format_align_justify</md-icon></md-button-toggle>
+    <md-button-toggle value="justify" [disabled]="isDisabled"><md-icon>format_align_justify</md-icon></md-button-toggle>
   </md-button-toggle-group>
 </section>
 
 <h1>Disabled Group</h1>
 
 <section class="demo-section">
-  <md-button-toggle-group name="checkbox" [vertical]="isVertical" disabled>
+  <md-button-toggle-group name="checkbox" [vertical]="isVertical" [disabled]="isDisabled">
     <md-button-toggle value="bold">
       <md-icon class="md-24">format_bold</md-icon>
     </md-button-toggle>
@@ -35,7 +39,7 @@ <h1>Multiple Selection</h1>
     <md-button-toggle>Flour</md-button-toggle>
     <md-button-toggle>Eggs</md-button-toggle>
     <md-button-toggle>Sugar</md-button-toggle>
-    <md-button-toggle disabled>Milk (disabled)</md-button-toggle>
+    <md-button-toggle [disabled]="isDisabled">Milk</md-button-toggle>
   </md-button-toggle-group>
 </section>
 

src/demo-app/button-toggle/button-toggle-demo.ts

@@ -9,6 +9,7 @@ import {UniqueSelectionDispatcher} from '@angular/material';
 })
 export class ButtonToggleDemo {
   isVertical = false;
+  isDisabled = false;
   favoritePie = 'Apple';
   pieOptions = [
     'Apple',

src/lib/button-toggle/_button-toggle-theme.scss

@@ -4,11 +4,18 @@
 
 @mixin md-button-toggle-theme($theme) {
   $foreground: map-get($theme, foreground);
+  $background: map-get($theme, background);
+
+  .md-button-toggle-label-content {
+    color: md-color($foreground, hint-text);
+  }
 
   .md-button-toggle-checked .md-button-toggle-label-content {
     background-color: md-color($md-grey, 300);
+    color: md-color($foreground, base);
   }
   .md-button-toggle-disabled .md-button-toggle-label-content {
-    background-color: md-color($foreground, disabled);
+    background-color: map_get($md-grey, 200);
+    color: md-color($foreground, disabled-button);
   }
 }