From e94c564364cb82b5f2371706bcb723541e3752a4 Mon Sep 17 00:00:00 2001
From: TJ Egan <twegan@us.ibm.com>
Date: Thu, 13 Apr 2017 10:29:23 -0500
Subject: [PATCH] feat(buttons): add theme variables, move vars to vars file

---
 src/components/button/_mixins.scss | 182 -----------------------------
 src/globals/scss/_colors.scss      |  27 -----
 src/globals/scss/_vars.scss        |  37 ++++++
 3 files changed, 37 insertions(+), 209 deletions(-)

diff --git a/src/components/button/_mixins.scss b/src/components/button/_mixins.scss
index 652134fa661e..daf77f5c1979 100644
--- a/src/components/button/_mixins.scss
+++ b/src/components/button/_mixins.scss
@@ -1,41 +1,3 @@
-$button-font-weight: 700 !default;
-$button-font-size: .875rem !default;
-$button-border-radius: 0 !default;
-$button-height: 40px !default;
-$button-padding: 0 1rem !default;
-$button-padding-sm: 0 .5rem !default;
-$button-border-width: 2px !default;
-
-$button-font-weight: 400;
-$button-font-size: 1rem;
-$button-border-radius: 1rem;
-$button-height: 32px;
-$button-padding: 0 2rem;
-$button-padding-sm: 0 1rem;
-$button-border-width: 1px;
-
-
-// Watson
-$brand-01: #047cc0;
-$brand-02: #175d8d;
-$brand-03: #95c4f3;
-$inverse-01: #ffffff;
-$ui-01: #f6f6f6;
-$ui-02: #ffffff;
-$ui-03: #eaeaea;
-$ui-04: #eaeaea;
-$ui-05: #777677;
-$text-01: #272727;
-$text-02: #595859;
-$text-03: #777677;
-$field-01: #eaeaea;
-$support-01: #e62325;
-$support-02: #34bc6e;
-$support-03: #fed500;
-$support-04: #5c1f1b;
-$nav-01: #1b2834;
-$nav-02: #1c496d;
-
 @mixin button-base {
   @include reset;
   @include helvetica;
@@ -70,7 +32,6 @@ $nav-02: #1c496d;
     width: rem(16px);
     height: rem(16px);
     margin-left: .5rem;
-    transition-duration: $transition--base;
   }
 }
 
@@ -99,146 +60,3 @@ $nav-02: #1c496d;
     fill: $icon-color;
   }
 }
-
-/* ☠️️ Deprecated - after updating the following components, can be deleted in 7.x
-  - footer
-  - form
-  - modal
-*/
-
-@mixin btn--browser-fixes {
-  $class: &;
-
-  @at-root button#{$class} {
-    // CSS selector becomes: button.& {}, where & === is whatever class the ampersand equals
-    // <button> elements cannot be used as flex containers
-    display: inline-block;
-
-    svg {
-      // Vertically centering icon inside <button>
-      position: relative;
-      vertical-align: middle;
-      top: -1px;
-    }
-
-    // Targets IE10+ browsers
-    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-      // Reset <svg> position for vertical centering
-      svg { top: 0; }
-    }
-  }
-
-  &::-moz-focus-inner {
-    // Reset intrisic padding in Firefox (see #731)
-    padding: 0;
-    border: 0;
-  }
-}
-
-@mixin btn--base {
-  @include reset;
-  @include btn--browser-fixes;
-  @include helvetica;
-  @include font-smoothing;
-  @include letter-spacing;
-  @include font-size('14');
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  font-weight: 700;
-  height: rem(40px);
-  padding: 0 1rem;
-  text-align: center;
-  text-decoration: none;
-  transition-duration: $transition--base;
-  transition-timing-function: ease-in;
-  white-space: nowrap;
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: .5;
-  }
-
-  &:focus {
-    @include focus-outline;
-  }
-
-  svg {
-    width: rem(16px);
-    height: rem(16px);
-    margin-left: .5rem;
-  }
-}
-
-
-@mixin btn--primary(
-  $bg: $brand-01,
-  $hover-bg: $brand-02,
-  $text: $inverse-01
-) {
-  @include btn--base;
-  color: $text;
-  background-color: $bg;
-  border: 2px solid transparent;
-
-  &:hover,
-  &:focus {
-    background-color: $hover-bg;
-
-    &:disabled {
-      background-color: $bg;
-    }
-  }
-
-  &:active {
-    background-color: darken($bg, 20%);
-  }
-}
-
-@mixin btn--secondary(
-  $hover-bg: $brand-01,
-  $text: $hover-bg,
-  $hover-text: $inverse-01
-) {
-  @include btn--base;
-  color: $text;
-  background-color: transparent;
-  border: 2px solid $hover-bg;
-
-  &:hover,
-  &:focus {
-    color: $hover-text;
-    background-color: $hover-bg;
-
-    &:disabled {
-      color: $text;
-      background-color: transparent;
-    }
-  }
-
-  &:active {
-    background-color: darken($hover-bg, 20%);
-  }
-}
-
-@mixin btn--danger {
-  @include btn--base;
-  color: $ui-05;
-  background-color: transparent;
-  border: 2px solid currentColor;
-
-  &:hover,
-  &:focus {
-    color: $inverse-01;
-    border: 2px solid transparent;
-    background-color: $support-01;
-
-    &:disabled {
-      color: $inverse-01;
-      background-color: transparent;
-      border: 2px solid currentColor;
-    }
-  }
-}
diff --git a/src/globals/scss/_colors.scss b/src/globals/scss/_colors.scss
index 2e9ee2cd8a15..8f2613150349 100644
--- a/src/globals/scss/_colors.scss
+++ b/src/globals/scss/_colors.scss
@@ -54,30 +54,3 @@ $color__purple-20: #d7aaff !default;
 $color__purple-30: #ba8ff7 !default;
 $color__purple-40: #af6ee8 !default;
 $color__purple-60: #734098 !default;
-
-// 7.x -- Light UI Colors
-$brand-01: $color__blue-51 !default;
-$brand-02: $color__blue-40 !default;
-$brand-03: $color__teal-20 !default;
-$inverse-01: $color__white !default;
-$ui-01: $color__white !default;
-$ui-02: $color__gray-3 !default;
-$ui-03: $color__gray-2 !default;
-$ui-04: $color__gray-1 !default;
-$ui-05: $color__navy-gray-7 !default;
-$text-01: $color__blue-90 !default;
-$text-02: $color__navy-gray-6 !default;
-$text-03: $color__navy-gray-6 !default;
-$field-01: rgba($color__blue-51, .1) !default;
-$support-01: $color__red-50 !default;
-$support-02: $color__green-40 !default;
-$support-03: $color__yellow-30 !default;
-$support-04: $color__blue-30 !default;
-$nav-01: $color__navy-gray-1 !default;
-$nav-02: $color__blue-90 !default;
-$nav-03: $color__purple-30 !default;
-$nav-04: $color__purple-60 !default;
-$nav-05: $color__teal-40 !default;
-$nav-06: $color__teal-50 !default;
-$nav-07: $color__blue-30 !default;
-$nav-08: $color__blue-51 !default;
diff --git a/src/globals/scss/_vars.scss b/src/globals/scss/_vars.scss
index dfa458ca9b39..bdc677071ccd 100644
--- a/src/globals/scss/_vars.scss
+++ b/src/globals/scss/_vars.scss
@@ -2,3 +2,40 @@ $bx--ease-in: cubic-bezier(.25, 0, 1, 1); // Used primarily for removing element
 $bx--ease-out: cubic-bezier(0, 0, .25, 1); // Used for adding elements to the screen or changing on-screen states at a users's input.
 $bx--standard-easing: cubic-bezier(.5, 0, .1, 1); // Used for the majority of animations.
 $transition--base: 250ms;
+
+
+// Color Theme Variables
+$brand-01: $color__blue-51 !default;
+$brand-02: $color__blue-40 !default;
+$brand-03: $color__teal-20 !default;
+$inverse-01: $color__white !default;
+$ui-01: $color__white !default;
+$ui-02: $color__gray-3 !default;
+$ui-03: $color__gray-2 !default;
+$ui-04: $color__gray-1 !default;
+$ui-05: $color__navy-gray-7 !default;
+$text-01: $color__blue-90 !default;
+$text-02: $color__navy-gray-6 !default;
+$text-03: $color__navy-gray-6 !default;
+$field-01: rgba($color__blue-51, .1) !default;
+$support-01: $color__red-50 !default;
+$support-02: $color__green-40 !default;
+$support-03: $color__yellow-30 !default;
+$support-04: $color__blue-30 !default;
+$nav-01: $color__navy-gray-1 !default;
+$nav-02: $color__blue-90 !default;
+$nav-03: $color__purple-30 !default;
+$nav-04: $color__purple-60 !default;
+$nav-05: $color__teal-40 !default;
+$nav-06: $color__teal-50 !default;
+$nav-07: $color__blue-30 !default;
+$nav-08: $color__blue-51 !default;
+
+// Button Theme Variables
+$button-font-weight: 700 !default;
+$button-font-size: .875rem !default;
+$button-border-radius: 0 !default;
+$button-height: 40px !default;
+$button-padding: 0 1rem !default;
+$button-padding-sm: 0 .5rem !default;
+$button-border-width: 2px !default;