From fed5d7b63cd89cb53da747d8ba84ef9150cfba11 Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Wed, 11 Jan 2017 01:13:10 +0100
Subject: [PATCH] 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.
---
 src/demo-app/button-toggle/button-toggle-demo.html | 10 +++++++---
 src/demo-app/button-toggle/button-toggle-demo.ts   |  1 +
 src/lib/button-toggle/_button-toggle-theme.scss    |  9 ++++++++-
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/demo-app/button-toggle/button-toggle-demo.html b/src/demo-app/button-toggle/button-toggle-demo.html
index eaf7ac01dfc2..0d158c21ecc3 100644
--- a/src/demo-app/button-toggle/button-toggle-demo.html
+++ b/src/demo-app/button-toggle/button-toggle-demo.html
@@ -2,6 +2,10 @@
   <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">
@@ -9,14 +13,14 @@ <h1>Exclusive Selection</h1>
     <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>
 
diff --git a/src/demo-app/button-toggle/button-toggle-demo.ts b/src/demo-app/button-toggle/button-toggle-demo.ts
index 67726b664518..d03d18396bf2 100644
--- a/src/demo-app/button-toggle/button-toggle-demo.ts
+++ b/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',
diff --git a/src/lib/button-toggle/_button-toggle-theme.scss b/src/lib/button-toggle/_button-toggle-theme.scss
index 23ede0f16c3b..79760cca49dc 100644
--- a/src/lib/button-toggle/_button-toggle-theme.scss
+++ b/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);
   }
 }