From 5266776f5ef512e69f43cf0bf039ca4f411184f5 Mon Sep 17 00:00:00 2001
From: Yiran Mao <yiranmao@gmail.com>
Date: Fri, 8 Sep 2017 14:29:43 -0400
Subject: [PATCH] feat(button): create theme mixin for button (#1244)

---
 packages/mdc-button/_mixins.scss    | 123 ++++++++++++++++++++++---
 packages/mdc-button/_variables.scss |  18 ++++
 packages/mdc-button/mdc-button.scss | 138 +++++++++-------------------
 3 files changed, 172 insertions(+), 107 deletions(-)
 create mode 100644 packages/mdc-button/_variables.scss

diff --git a/packages/mdc-button/_mixins.scss b/packages/mdc-button/_mixins.scss
index 9d1fc145a1b..173b6d05f22 100644
--- a/packages/mdc-button/_mixins.scss
+++ b/packages/mdc-button/_mixins.scss
@@ -17,25 +17,122 @@
 @import "@material/ripple/mixins";
 @import "@material/theme/mixins";
 @import "@material/theme/variables";
+@import "./variables";
 
-@mixin mdc-button-filled_() {
-  @include mdc-ripple-base;
-  @include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .32));
-  @include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .32));
-  @include mdc-theme-prop(color, text-primary-on-dark);
+@mixin mdc-button-base_() {
+  @include mdc-typography(button);
 
-  background-color: black;
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  min-width: 88px;
+  height: $mdc-button-height;
+  padding: 0 16px;
+  border: none;
+  outline: none;
+  text-align: center;
+  user-select: none;
+  -webkit-appearance: none;
+  overflow: hidden;
+  vertical-align: middle;
 
-  @include mdc-theme-dark(".mdc-button") {
-    @include mdc-ripple-base;
-    @include mdc-ripple-bg((pseudo: "::before", base-color: black, opacity: .32));
-    @include mdc-ripple-fg((pseudo: "::after", base-color: black, opacity: .32));
-    @include mdc-theme-prop(color, text-primary-on-light);
+  // postcss-bem-linter: ignore
+  &:active {
+    outline: none;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+  }
+
+  &:disabled {
+    cursor: default;
+    pointer-events: none;
+  }
+}
+
+@mixin mdc-button--raised_() {
+  @include mdc-elevation(2);
+  @include mdc-elevation-transition;
+
+  &:hover,
+  &:focus {
+    @include mdc-elevation(4);
+  }
+
+  &:active {
+    @include mdc-elevation(8);
+  }
+
+  &:disabled {
+    @include mdc-elevation(0);
+  }
+}
+
+@mixin mdc-button--compact_() {
+  padding: 0 8px;
+}
+
+@mixin mdc-button--dense_() {
+  height: $mdc-dense-button-height;
+  font-size: .8125rem; // 13sp
+  line-height: $mdc-dense-button-height;
+}
+
+@mixin mdc-button-container-fill-color($color) {
+  // :not(:disabled) is used to support link styled as button
+  // as link does not support :enabled style
+  &:not(:disabled) {
+    @include mdc-theme-prop(background-color, $color);
+  }
+}
+
+@mixin mdc-button-stroke-color($color) {
+  &:not(:disabled) {
+    @include mdc-theme-prop(border-color, $color);
+  }
+}
+
+@mixin mdc-button-ink-color($color) {
+  &:not(:disabled) {
+    @include mdc-theme-prop(color, $color);
+  }
+}
 
-    background-color: white;
+@mixin mdc-button-ripple($ripple-config) {
+  &:not(:disabled) {
+    @include mdc-ripple-base;
+    @include mdc-ripple-bg(map-merge((pseudo: "::before"), $ripple-config));
+    @include mdc-ripple-fg(map-merge((pseudo: "::after"), $ripple-config));
 
     &:not(.mdc-ripple-upgraded) {
-      -webkit-tap-highlight-color: rgba(black, .18);
+      $tap-highlight-color: rgba(map-get($ripple-config, base-color), map-get($ripple-config, opacity));
+
+      @include mdc-theme-prop(-webkit-tap-highlight-color, $tap-highlight-color);
     }
   }
 }
+
+@mixin mdc-button-corner-radius($corner-radius) {
+  border-radius: $corner-radius;
+}
+
+@mixin mdc-button-stroke-width($stroke-width) {
+  border-width: $stroke-width;
+  line-height: $mdc-button-height - $stroke-width * 2;
+
+  // postcss-bem-linter: ignore
+  &.mdc-button--dense {
+    // Minus extra 1 to accommodate odd font size of dense button
+    line-height: $mdc-dense-button-height - $stroke-width * 2 - 1;
+  }
+}
+
+@mixin mdc-button-stroke-style($stroke-style) {
+  border-style: $stroke-style;
+}
diff --git a/packages/mdc-button/_variables.scss b/packages/mdc-button/_variables.scss
new file mode 100644
index 00000000000..18b13162003
--- /dev/null
+++ b/packages/mdc-button/_variables.scss
@@ -0,0 +1,18 @@
+//
+// Copyright 2017 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+$mdc-button-height: 36px;
+$mdc-dense-button-height: 32px;
diff --git a/packages/mdc-button/mdc-button.scss b/packages/mdc-button/mdc-button.scss
index 0533d384357..72562759946 100644
--- a/packages/mdc-button/mdc-button.scss
+++ b/packages/mdc-button/mdc-button.scss
@@ -23,102 +23,51 @@
 
 // postcss-bem-linter: define button
 .mdc-button {
-  @include mdc-ripple-base;
-  @include mdc-ripple-bg((pseudo: "::before"));
-  @include mdc-ripple-fg((pseudo: "::after"));
-  @include mdc-typography(button);
-  @include mdc-theme-prop(color, text-primary-on-light);
-
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  min-width: 88px;
-  height: 36px;
-  padding: 0 16px;
-  border: none;
-  border-radius: 4px;
-  outline: none;
-  background: transparent;
-  text-align: center;
-  user-select: none;
-  -webkit-appearance: none;
-  overflow: hidden;
-  vertical-align: middle;
-
-  // postcss-bem-linter: ignore
-  &:active {
-    outline: none;
-  }
-
-  &:hover {
-    cursor: pointer;
-  }
-
-  &::-moz-focus-inner {
-    padding: 0;
-    border: 0;
-  }
-
-  &:not(.mdc-ripple-upgraded) {
-    -webkit-tap-highlight-color: rgba(black, .3);
-  }
+  @include mdc-button-base_;
+  @include mdc-button-corner-radius(4px);
+  @include mdc-button-container-fill-color(transparent);
+  @include mdc-button-ink-color(text-primary-on-light);
+  @include mdc-button-ripple((base-color: black, opacity: .16));
 
   @include mdc-theme-dark(".mdc-button") {
-    @include mdc-ripple-base;
-    @include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .16));
-    @include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .16));
-    @include mdc-theme-prop(color, text-primary-on-dark);
-
-    &:not(.mdc-ripple-upgraded) {
-      -webkit-tap-highlight-color: rgba(white, .18);
-    }
+    @include mdc-button-ink-color(text-primary-on-dark);
+    @include mdc-button-ripple((base-color: white, opacity: .16));
   }
 }
 
 .mdc-button--raised,
 .mdc-button--unelevated {
-  @include mdc-button-filled_;
-}
+  @include mdc-button-container-fill-color(black);
+  @include mdc-button-ink-color(text-primary-on-dark);
+  @include mdc-button-ripple((base-color: white, opacity: .32));
 
-.mdc-button--raised {
-  @include mdc-elevation(2);
-  @include mdc-elevation-transition;
-
-  &:hover,
-  &:focus {
-    @include mdc-elevation(4);
+  @include mdc-theme-dark(".mdc-button") {
+    @include mdc-button-container-fill-color(white);
+    @include mdc-button-ink-color(text-primary-on-light);
+    @include mdc-button-ripple((base-color: black, opacity: .32));
   }
+}
 
-  &:active {
-    @include mdc-elevation(8);
-  }
+.mdc-button--raised {
+  @include mdc-button--raised_;
 }
 
 .mdc-button--stroked {
-  @include mdc-theme-prop(border-color, text-primary-on-light);
-
-  border-width: 2px;
-  border-style: solid;
-  line-height: 32px;
+  @include mdc-button-stroke-width(2px);
+  @include mdc-button-stroke-style(solid);
+  @include mdc-button-stroke-color(text-primary-on-light);
 
   @include mdc-theme-dark(".mdc-button") {
-    @include mdc-theme-prop(border-color, text-primary-on-dark);
-  }
-
-  // postcss-bem-linter: ignore
-  &.mdc-button--dense {
-    line-height: 27px;  // To accommodate odd font size of dense button
+    @include mdc-button-stroke-color(text-primary-on-dark);
   }
 }
 
 .mdc-button--compact {
-  padding: 0 8px;
+  @include mdc-button--compact_;
 }
 
 .mdc-button--dense {
-  height: 32px;
-  font-size: .8125rem; // 13sp
-  line-height: 32px;
+  @include mdc-button--dense_;
 }
 
 @each $theme-style in (primary, secondary) {
@@ -129,34 +78,40 @@
   .mdc-button--#{$modifier} {
     $theme-value: map-get($mdc-theme-property-values, $theme-style);
 
-    @include mdc-ripple-base;
-    @include mdc-ripple-bg((pseudo: "::before", base-color: $theme-value, opacity: .16));
-    @include mdc-ripple-fg((pseudo: "::after", base-color: $theme-value, opacity: .16));
-    @include mdc-theme-prop(color, $theme-style);
-
-    @include mdc-theme-dark(".mdc-button") {
+    &:not(:disabled) {
       @include mdc-ripple-base;
       @include mdc-ripple-bg((pseudo: "::before", base-color: $theme-value, opacity: .16));
       @include mdc-ripple-fg((pseudo: "::after", base-color: $theme-value, opacity: .16));
       @include mdc-theme-prop(color, $theme-style);
+
+      @include mdc-theme-dark(".mdc-button") {
+        @include mdc-ripple-base;
+        @include mdc-ripple-bg((pseudo: "::before", base-color: $theme-value, opacity: .16));
+        @include mdc-ripple-fg((pseudo: "::after", base-color: $theme-value, opacity: .16));
+        @include mdc-theme-prop(color, $theme-style);
+      }
     }
     // postcss-bem-linter: ignore
     &.mdc-button--raised,
     &.mdc-button--unelevated {
       $theme-value: map-get($mdc-theme-property-values, text-primary-on-#{$theme-style});
 
-      @include mdc-ripple-base;
-      @include mdc-ripple-bg((pseudo: "::before", base-color: $theme-value, opacity: .32));
-      @include mdc-ripple-fg((pseudo: "::after", base-color: $theme-value, opacity: .32));
-      @include mdc-theme-prop(background-color, $theme-style);
-      @include mdc-theme-prop(color, text-primary-on-#{$theme-style});
+      &:not(:disabled) {
+        @include mdc-ripple-base;
+        @include mdc-ripple-bg((pseudo: "::before", base-color: $theme-value, opacity: .32));
+        @include mdc-ripple-fg((pseudo: "::after", base-color: $theme-value, opacity: .32));
+        @include mdc-theme-prop(background-color, $theme-style);
+        @include mdc-theme-prop(color, text-primary-on-#{$theme-style});
+      }
     }
     // postcss-bem-linter: ignore
     &.mdc-button--stroked {
-      @include mdc-theme-prop(border-color, $theme-style);
-
-      @include mdc-theme-dark(".mdc-button") {
+      &:not(:disabled) {
         @include mdc-theme-prop(border-color, $theme-style);
+
+        @include mdc-theme-dark(".mdc-button") {
+          @include mdc-theme-prop(border-color, $theme-style);
+        }
       }
     }
   }
@@ -165,11 +120,9 @@
 // Disabled button styles need to be last to ensure they override other primary/accent/dark styles
 
 .mdc-button {
-  fieldset:disabled &,
   &:disabled {
+    background-color: transparent;
     color: rgba(black, .38);
-    cursor: default;
-    pointer-events: none;
 
     @include mdc-theme-dark(".mdc-button") {
       @include mdc-theme-prop(color, text-disabled-on-dark);
@@ -179,9 +132,7 @@
 
 .mdc-button--raised,
 .mdc-button--unelevated {
-  fieldset:disabled &,
   &:disabled {
-    @include mdc-elevation(0);
     @include mdc-theme-prop(color, text-primary-on-dark);
 
     background-color: rgba(black, .15);
@@ -195,7 +146,6 @@
 }
 
 .mdc-button--stroked {
-  fieldset:disabled &,
   &:disabled {
     border-color: rgba(black, .38);