feat(button-toggle): align with 2018 material design spec

Aligns the button toggle component with the latest Material design spec.

Author: crisbeto

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

@@ -5,28 +5,48 @@
 @mixin mat-button-toggle-theme($theme) {
   $foreground: map-get($theme, foreground);
   $background: map-get($theme, background);
+  $divider-color: mat-color($foreground, divider);
 
   .mat-button-toggle {
-    color: mat-color($foreground, hint-text);
+    color: mat-color($foreground, text);
+    background: mat-color($background, card);
 
     .mat-button-toggle-focus-overlay {
-      background-color: mat-color($background, focused-button);
+      background-color: mat-color($background, focused-button, 1);
+    }
+
+    .mat-button-toggle-group & + & {
+      border-left: solid 1px $divider-color;
+    }
+
+    [dir='rtl'] .mat-button-toggle-group & + & {
+      border-left: none;
+      border-right: solid 1px $divider-color;
+    }
+
+    .mat-button-toggle-vertical & + & {
+      border-left: none;
+      border-right: none;
+      border-top: solid 1px $divider-color;
     }
   }
 
   .mat-button-toggle-checked {
     background-color: mat-color($background, selected-button);
-    color: mat-color($foreground, secondary-text);
   }
 
   .mat-button-toggle-disabled {
-    background-color: mat-color($background, disabled-button-toggle);
     color: mat-color($foreground, disabled-button);
 
     &.mat-button-toggle-checked {
       background-color: mat-color($background, selected-disabled-button);
     }
   }
+
+  .mat-button-toggle-standalone,
+  .mat-button-toggle-group {
+    border: solid 1px $divider-color;
+  }
 }
 
 @mixin mat-button-toggle-typography($config) {

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

@@ -3,26 +3,19 @@
 @import '../core/style/layout-common';
 @import '../../cdk/a11y/a11y';
 
-$mat-button-toggle-padding: 0 16px !default;
-$mat-button-toggle-height: 36px !default;
-$mat-button-toggle-border-radius: 2px !default;
+$mat-button-toggle-padding: 0 12px !default;
+$mat-button-toggle-height: 48px !default;
+$mat-button-toggle-border-radius: 4px !default;
 
 .mat-button-toggle-standalone,
 .mat-button-toggle-group {
-  @include mat-elevation(2);
   position: relative;
   display: inline-flex;
   flex-direction: row;
-
   border-radius: $mat-button-toggle-border-radius;
-
   cursor: pointer;
   white-space: nowrap;
   overflow: hidden;
-
-  @include cdk-high-contrast {
-    outline: solid 1px;
-  }
 }
 
 .mat-button-toggle-vertical {
@@ -44,19 +37,16 @@ $mat-button-toggle-border-radius: 2px !default;
   position: relative;
   -webkit-tap-highlight-color: transparent;
 
+  &:hover .mat-button-toggle-focus-overlay {
+    opacity: 0.04;
+  }
+
   // Similar to components like the checkbox, slide-toggle and radio, we cannot show the focus
   // overlay for `.cdk-program-focused` because mouse clicks on the <label> element would be always
   // treated as programmatic focus.
   // TODO(paul): support `program` as well. See https://github.com/angular/material2/issues/9889
-  &.cdk-keyboard-focused {
-    .mat-button-toggle-focus-overlay {
-      opacity: 1;
-
-      // In high contrast mode `opacity: 1` will show the overlay as solid so we fall back 0.5.
-      @include cdk-high-contrast {
-        opacity: 0.5;
-      }
-    }
+  &.cdk-keyboard-focused .mat-button-toggle-focus-overlay {
+    opacity: 0.12;
   }
 }