feat(button): align with 2018 material design spec

Aligns the button component with the latest Material design spec. Includes moving away from centering with `line-height`, in favor of using flexbox. Using the `line-height` ends up being fiddly and isn't quite centered in some cases like the stroked buttons.

Author: crisbeto

src/lib/button/_button-base.scss

@@ -6,31 +6,26 @@
 
 // Flat and raised button standards
 $mat-button-padding: 0 16px !default;
-$mat-button-min-width: 88px !default;
+$mat-button-min-width: 64px !default;
 $mat-button-margin: 0 !default;
-$mat-button-line-height: 36px !default;
-$mat-button-border-radius: 2px !default;
+$mat-button-height: 36px !default;
+$mat-button-border-radius: 4px !default;
 $mat-button-focus-transition: opacity 200ms $swift-ease-in-out-timing-function,
                               background-color 200ms $swift-ease-in-out-timing-function !default;
 
-// Stroked Button standards
-$mat-stroked-button-line-height: $mat-button-line-height - 2;
 // Stroked button padding is 1px less horizontally than default/flat/raised
 // button's padding.
 $mat-stroked-button-padding: 0 15px;
 
 // Icon Button standards
 $mat-icon-button-size: 40px !default;
 $mat-icon-button-border-radius: 50% !default;
-$mat-icon-button-line-height: 24px !default;
 
 // Fab standards
 $mat-fab-border-radius: 50% !default;
 $mat-fab-size: 56px !default;
-$mat-fab-padding: 16px !default;
 
 $mat-mini-fab-size: 40px !default;
-$mat-mini-fab-padding: 8px !default;
 
 // Applies base styles to all button types.
 @mixin mat-button-base {
@@ -44,13 +39,13 @@ $mat-mini-fab-padding: 8px !default;
   display: inline-block;
   white-space: nowrap;
   text-decoration: none;
-  vertical-align: baseline;
+  vertical-align: middle;
   text-align: center;
 
   // Sizing.
   margin: $mat-button-margin;
   min-width: $mat-button-min-width;
-  line-height: $mat-button-line-height;
+  height: $mat-button-height;
   padding: $mat-button-padding;
   border-radius: $mat-button-border-radius;
 
@@ -64,7 +59,7 @@ $mat-mini-fab-padding: 8px !default;
 
   &.cdk-keyboard-focused, &.cdk-program-focused {
     .mat-button-focus-overlay {
-      opacity: 1;
+      opacity: 0.12;
     }
   }
 
@@ -96,7 +91,7 @@ $mat-mini-fab-padding: 8px !default;
 }
 
 // Applies styles to fab and mini-fab button types only
-@mixin mat-fab($size, $padding) {
+@mixin mat-fab($size) {
   @include mat-raised-button;
   @include mat-overridable-elevation(6);
 
@@ -113,10 +108,4 @@ $mat-mini-fab-padding: 8px !default;
   &:not([disabled]):active {
     @include mat-overridable-elevation(12);
   }
-
-  .mat-button-wrapper {
-    padding: $padding 0;
-    display: inline-block;
-    line-height: $mat-icon-button-line-height;
-  }
 }

src/lib/button/_button-theme.scss

@@ -8,15 +8,15 @@
   $warn: map-get($theme, warn);
 
   &.mat-primary .mat-button-focus-overlay {
-    background-color: mat-color($primary, 0.12);
+    background-color: mat-color($primary);
   }
 
   &.mat-accent .mat-button-focus-overlay {
-    background-color: mat-color($accent, 0.12);
+    background-color: mat-color($accent);
   }
 
   &.mat-warn .mat-button-focus-overlay {
-    background-color: mat-color($warn, 0.12);
+    background-color: mat-color($warn);
   }
 
   &[disabled] .mat-button-focus-overlay {
@@ -91,6 +91,16 @@
     @include _mat-button-ripple-color($theme, default);
   }
 
+  .mat-button-focus-overlay {
+    background: map_get($foreground, base);
+  }
+
+  // Note: this needs a bit extra specificity, because we're not guaranteed the inclusion
+  // order of the theme styles and the button reset may end up resetting this as well.
+  .mat-stroked-button:not(.mat-button-disabled) {
+    border-color: mat-color($foreground, divider);
+  }
+
   .mat-flat-button, .mat-raised-button, .mat-fab, .mat-mini-fab {
     // Default font and background color when not using any color palette.
     color: mat-color($foreground, text);
@@ -111,6 +121,9 @@
 @mixin mat-button-typography($config) {
   .mat-button, .mat-raised-button, .mat-icon-button, .mat-stroked-button,
   .mat-flat-button, .mat-fab, .mat-mini-fab {
+    // TODO(crisbeto): take this from the typography config once it supports `letter-spacing`.
+    letter-spacing: 0.08929em;
+
     font: {
       family: mat-font-family($config, button);
       size: mat-font-size($config, button);

src/lib/button/button.scss

@@ -19,7 +19,7 @@
 // Use the same visual treatment for hover as for focus.
 .mat-button:hover .mat-button-focus-overlay,
 .mat-stroked-button:hover .mat-button-focus-overlay {
-  opacity: 1;
+  opacity: 0.04;
 }
 
 // Disable the hover styles on non-hover devices. Since this is more of a progressive
@@ -38,22 +38,20 @@
 
 .mat-stroked-button {
   @include mat-overridable-elevation(0);
-
-  border: 1px solid currentColor;
   padding: $mat-stroked-button-padding;
-  line-height: $mat-stroked-button-line-height;
+  border: solid 1px currentColor;
 }
 
 .mat-flat-button {
   @include mat-overridable-elevation(0);
 }
 
 .mat-fab {
-  @include mat-fab($mat-fab-size, $mat-fab-padding);
+  @include mat-fab($mat-fab-size);
 }
 
 .mat-mini-fab {
-  @include mat-fab($mat-mini-fab-size, $mat-mini-fab-padding);
+  @include mat-fab($mat-mini-fab-size);
 }
 
 .mat-icon-button {
@@ -66,13 +64,7 @@
   height: $mat-icon-button-size;
 
   flex-shrink: 0;
-
-  line-height: $mat-icon-button-size;
   border-radius: $mat-icon-button-border-radius;
-
-  i, .mat-icon {
-    line-height: $mat-icon-button-line-height;
-  }
 }
 
 // The ripple container and focus overlay should match the bounds of the entire button.
@@ -93,9 +85,6 @@
 
 // Element that overlays the button to show focus and hover effects.
 .mat-button-focus-overlay {
-  // The button spec calls for focus on raised buttons (and FABs) to be indicated with a
-  // black, 12% opacity shade over the normal color (for both light and dark themes).
-  background-color: rgba(black, 0.12);
   border-radius: inherit;
   opacity: 0;
 
@@ -121,12 +110,12 @@
   z-index: 1;
 }
 
-// Elements inside of all type of buttons should be vertical aligned in the middle.
-.mat-button, .mat-flat-button, .mat-stroked-button, .mat-raised-button, .mat-icon-button,
-.mat-fab, .mat-mini-fab {
-  .mat-button-wrapper > * {
-    vertical-align: middle;
-  }
+.mat-button-wrapper {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
 }
 
 // Align icon-buttons correctly inside of standard, fill, and outline form-field appearances.

src/lib/form-field/form-field-legacy.scss

@@ -25,7 +25,6 @@ $mat-form-field-legacy-underline-height: 1px !default;
     // Allow icon buttons in a prefix or suffix to adapt to the correct size.
     .mat-icon-button {
       font: inherit;
-      vertical-align: baseline;
 
       .mat-icon {
         font-size: inherit;