feat: improve button implementation GH-24

colors, inverse colors, and loading state

Author: RickEyre

packages/panda-san/src/core/button.scss

@@ -1,4 +1,3 @@
-@import 'button';
 @import 'colors';
 @import 'reset';
 @import 'utils';

packages/panda-san/src/core/index.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); }
+  }
+}

packages/panda-san/src/elements/button.scss

@@ -0,0 +1 @@
+@import 'button';

packages/panda-san/src/elements/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';

packages/panda-san/src/index.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
+);

packages/panda-san/src/variables/button.scss

@@ -1,5 +1,6 @@
 @import 'breakpoints';
 @import 'colors';
+@import 'button';
 @import 'container';
 @import 'font';
 @import 'form';