From 79801e02104b828215a52bb029bc465af37693c6 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Wed, 19 Sep 2018 23:21:34 +0200
Subject: [PATCH] feat(button): align with 2018 material design spec (#13083)

Aligns the button component with the latest Material design spec.

This includes the changes from #12537 and #13011.
---
 src/lib/button/_button-base.scss  |  9 ++++-----
 src/lib/button/_button-theme.scss | 16 ++++++++++++---
 src/lib/button/button.scss        | 33 ++++++++++++++++---------------
 3 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/src/lib/button/_button-base.scss b/src/lib/button/_button-base.scss
index d14bb436d61..b64ad7fa35c 100644
--- a/src/lib/button/_button-base.scss
+++ b/src/lib/button/_button-base.scss
@@ -6,17 +6,16 @@
 
 // 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-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-line-height: $mat-button-line-height - 2;
 $mat-stroked-button-padding: 0 15px;
 
 // Icon Button standards
@@ -64,7 +63,7 @@ $mat-mini-fab-padding: 8px !default;
 
   &.cdk-keyboard-focused, &.cdk-program-focused {
     .mat-button-focus-overlay {
-      opacity: 1;
+      opacity: 0.12;
     }
   }
 
diff --git a/src/lib/button/_button-theme.scss b/src/lib/button/_button-theme.scss
index 27266c3524b..0a4162ca7dd 100644
--- a/src/lib/button/_button-theme.scss
+++ b/src/lib/button/_button-theme.scss
@@ -9,15 +9,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 {
@@ -92,6 +92,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);
diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss
index 00011df81f8..adac06d933f 100644
--- a/src/lib/button/button.scss
+++ b/src/lib/button/button.scss
@@ -4,40 +4,45 @@
 @import '../core/style/layout-common';
 @import '../../cdk/a11y/a11y';
 
-.mat-button, .mat-icon-button, .mat-stroked-button, .mat-flat-button {
-  @include mat-button-base;
-}
-
 .mat-button, .mat-icon-button {
   .mat-button-focus-overlay {
-
     opacity: 0;
   }
 }
 
 // Only flat and stroked buttons (not raised, FABs or icon buttons) have a hover style.
 // 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;
+.mat-button:hover,
+.mat-stroked-button:hover {
+  .mat-button-focus-overlay {
+    opacity: 0.04;
+  }
 }
 
 // Disable the hover styles on non-hover devices. Since this is more of a progressive
 // enhancement and not all desktop browsers support this kind of media query, we can't
 // use something like `@media (hover)`.
 @media (hover: none) {
-  .mat-button:hover .mat-button-focus-overlay,
-  .mat-stroked-button:hover .mat-button-focus-overlay {
-    opacity: 0;
+  .mat-button:hover,
+  .mat-stroked-button:hover {
+    .mat-button-focus-overlay {
+      opacity: 0;
+    }
   }
 }
 
+// Should be placed after the `:hover` styles so the focused
+// styling coming in from `mat-button-base` takes precedence.
+.mat-button, .mat-icon-button, .mat-stroked-button, .mat-flat-button {
+  @include mat-button-base;
+}
+
 .mat-raised-button {
   @include mat-raised-button;
 }
 
 .mat-stroked-button {
-  border:  1px solid currentColor;
+  border: 1px solid currentColor;
   padding: $mat-stroked-button-padding;
   line-height: $mat-stroked-button-line-height;
 }
@@ -60,7 +65,6 @@
   height: $mat-icon-button-size;
 
   flex-shrink: 0;
-
   line-height: $mat-icon-button-size;
   border-radius: $mat-icon-button-border-radius;
 
@@ -87,9 +91,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;