From 4d9950191096f6fd7fe20bebb38b622735f19177 Mon Sep 17 00:00:00 2001
From: Rick Eyre <rick.eyre@outlook.com>
Date: Thu, 9 Apr 2020 21:45:10 -0400
Subject: [PATCH] feat: improve button implementation GH-24

colors, inverse colors, and loading state
---
 packages/panda-san/src/core/button.scss      |  8 ---
 packages/panda-san/src/core/index.scss       |  1 -
 packages/panda-san/src/elements/button.scss  | 66 ++++++++++++++++++++
 packages/panda-san/src/elements/index.scss   |  1 +
 packages/panda-san/src/index.scss            |  1 +
 packages/panda-san/src/variables/button.scss | 14 +++++
 packages/panda-san/src/variables/index.scss  |  1 +
 7 files changed, 83 insertions(+), 9 deletions(-)
 delete mode 100644 packages/panda-san/src/core/button.scss
 create mode 100644 packages/panda-san/src/elements/button.scss
 create mode 100644 packages/panda-san/src/elements/index.scss
 create mode 100644 packages/panda-san/src/variables/button.scss

diff --git a/packages/panda-san/src/core/button.scss b/packages/panda-san/src/core/button.scss
deleted file mode 100644
index 6e42239..0000000
--- a/packages/panda-san/src/core/button.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.button {
-  @extend %base-font;
-  background-color: transparent;
-  border: solid px-to-rem(2px);
-  border-radius: px-to-rem(5px);
-  color: inherit;
-  padding: px-to-rem(12px) px-to-rem(60px);
-}
diff --git a/packages/panda-san/src/core/index.scss b/packages/panda-san/src/core/index.scss
index e6354e0..f791a30 100644
--- a/packages/panda-san/src/core/index.scss
+++ b/packages/panda-san/src/core/index.scss
@@ -1,4 +1,3 @@
-@import 'button';
 @import 'colors';
 @import 'reset';
 @import 'utils';
diff --git a/packages/panda-san/src/elements/button.scss b/packages/panda-san/src/elements/button.scss
new file mode 100644
index 0000000..ea22012
--- /dev/null
+++ b/packages/panda-san/src/elements/button.scss
@@ -0,0 +1,66 @@
+.button {
+  @extend %base-font;
+  align-items: center;
+  background-color: map-get($button-default-type, background-color);
+  border: solid px-to-rem(2px) map-get($button-default-type, background-color);
+  border-radius: px-to-rem(5px);
+  color: map-get($button-default-type, color);
+  display: flex;
+  justify-content: center;
+  padding: px-to-rem(12px) px-to-rem(60px);
+
+  &--is-loading {
+    color: transparent !important;
+    pointer-events: none;
+
+    &::after {
+      animation: button-spin 1.2s linear infinite;
+      border: 0.2em solid map-get($button-default-type, color);
+      border-radius: 50%;
+      border-right-color: transparent;
+      content: '';
+      display: block;
+      height: 1.2em;
+      position: absolute;
+      width: 1.2em;
+    }
+  }
+
+  &--is-inverse {
+    background-color: transparent;
+    color: map-get($button-default-type, background-color);
+
+    &.button--is-loading::after {
+      border-color: map-get($button-default-type, background-color);
+      border-right-color: transparent;
+    }
+  }
+
+  @each $type, $config in $button-types {
+    &--is-#{$type} {
+      background-color: map-get($config, background-color);
+      border-color: map-get($config, background-color);
+      color: map-get($config, color);
+
+      &.button--is-loading::after {
+        border-color: map-get($config, color);
+        border-right-color: transparent;
+      }
+
+      &.button--is-inverse {
+        background-color: transparent;
+        color: map-get($config, background-color);
+
+        &.button--is-loading::after {
+          border-color: map-get($config, background-color);
+          border-right-color: transparent;
+        }
+      }
+    }
+  }
+
+  @keyframes button-spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+}
diff --git a/packages/panda-san/src/elements/index.scss b/packages/panda-san/src/elements/index.scss
new file mode 100644
index 0000000..2d43224
--- /dev/null
+++ b/packages/panda-san/src/elements/index.scss
@@ -0,0 +1 @@
+@import 'button';
diff --git a/packages/panda-san/src/index.scss b/packages/panda-san/src/index.scss
index 1586248..ddc5ee4 100644
--- a/packages/panda-san/src/index.scss
+++ b/packages/panda-san/src/index.scss
@@ -1,6 +1,7 @@
 @import 'variables/index';
 @import 'mixins/index';
 @import 'content/index';
+@import 'elements/index';
 @import 'core/index';
 @import 'form/index';
 @import 'layout/index';
diff --git a/packages/panda-san/src/variables/button.scss b/packages/panda-san/src/variables/button.scss
new file mode 100644
index 0000000..5d453f0
--- /dev/null
+++ b/packages/panda-san/src/variables/button.scss
@@ -0,0 +1,14 @@
+$button-types: (
+  primary: (background-color: $yellow, color: $white),
+  yellow: (background-color: $yellow, color: $white),
+  red: (background-color: $red, color: $white),
+  blue: (background-color: $blue, color: $white),
+  green: (background-color: $green, color: $white),
+  grey: (background-color: $grey, color: $black),
+  white: (background-color: $white, color: $black),
+  black: (background-color: $black, color: $white)
+);
+
+$button-default-type: (
+  background-color: $grey, color: $black
+);
diff --git a/packages/panda-san/src/variables/index.scss b/packages/panda-san/src/variables/index.scss
index 4244315..8323c33 100644
--- a/packages/panda-san/src/variables/index.scss
+++ b/packages/panda-san/src/variables/index.scss
@@ -1,5 +1,6 @@
 @import 'breakpoints';
 @import 'colors';
+@import 'button';
 @import 'container';
 @import 'font';
 @import 'form';