fix(button): focus state matches spec (#467)

* fix(button): focus state matches spec

* change all buttons to use the same focus styling technique

Author: jelbourn

src/components/button/_button-base.scss

@@ -63,6 +63,10 @@ $md-mini-fab-padding: 8px !default;
   &[disabled] {
     cursor: default;
   }
+
+  &.md-button-focus {
+    @include md-button-focus();
+  }
 }
 
 // Applies styles to buttons with backgrounds: raised, fab, and mini-fab
@@ -85,11 +89,6 @@ $md-mini-fab-padding: 8px !default;
     @include md-elevation(8);
   }
 
-  &.md-button-focus {
-    background-color: md-color($md-foreground, base, 0.12);
-    @include md-button-theme('background-color', 600);
-  }
-
   &[disabled] {
     box-shadow: none;
   }
@@ -110,8 +109,4 @@ $md-mini-fab-padding: 8px !default;
   i, md-icon {
     padding: $padding 0;
   }
-
-  &.md-button-focus {
-    background-color: md-color($md-accent, 600);
-  }
 }

src/components/button/_button-theme.scss

@@ -1,6 +1,5 @@
-
-// Applies specified coloring to three supported palettes
-@mixin md-button-theme ($property, $color: 'default', $opacity: 1) {
+/** Applies a property to an md-button element for each of the supported palettes. */
+@mixin md-button-theme($property, $color: 'default', $opacity: 1) {
   &.md-primary {
     #{$property}: md-color($md-primary, $color, $opacity);
   }
@@ -18,3 +17,33 @@
     }
   }
 }
+
+/** Applies a focus style to an md-button element for each of the supported palettes. */
+@mixin md-button-focus {
+  &::after {
+    // 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).
+    // We do this by placing an :after psuedo-element with the appropriate shade over the button.
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    content: '';
+    background-color: rgba(black, 0.12);
+    border-radius: inherit;
+    pointer-events: none;
+  }
+
+  &.md-primary::after {
+    background-color: md-color($md-primary, 0.12);
+  }
+
+  &.md-accent::after {
+    background-color: md-color($md-accent, 0.12);
+  }
+
+  &.md-warn::after {
+    background-color: md-color($md-warn, 0.12);
+  }
+}

src/components/button/button.scss

@@ -7,11 +7,6 @@
 [md-button] {
   @extend %md-button-base;
 
-  &:hover, &.md-button-focus {
-    background-color: md-color($md-foreground, base, 0.12);
-    @include md-button-theme('background-color', 0.12);
-  }
-
   &[disabled]:hover {
     &.md-primary, &.md-accent, &.md-warn, &:hover {
       background-color: transparent;
@@ -43,19 +38,20 @@
   line-height: $md-icon-button-line-height;
   border-radius: $md-icon-button-border-radius;
 
-  &.md-button-focus {
-    background-color: md-color($md-foreground, base, 0.12);
-    @include md-button-theme('background-color', 0.12);
-  }
-
   .md-button-wrapper > * {
     vertical-align: middle;
   }
 }
 
+// Only flat buttons and icon buttons (not raised or fabs) have a hover style.
+[md-button]:hover, [md-icon-button]:hover {
+  // Use the same visual treatment for hover as for focus.
+  @include md-button-focus();
+}
+
 // Applies a clearer border for high-contrast mode (a11y)
 @media screen and (-ms-high-contrast: active) {
   .md-raised-button, .md-fab, .md-mini-fab {
     border: 1px solid #fff;
   }
-}
+}