feat: add outline variant on buttons

Author: gregberge

packages/shared/core/Button.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { darken } from 'polished'
+import { darken, transparentize } from 'polished'
 import { Button as ReakitButton } from 'reakit/Button'
 import { th, system } from '@xstyled/system'
 import { node, bool, oneOf, string, oneOfType } from 'prop-desc'
@@ -17,7 +17,7 @@ import {
 
 export const Button = createComponent({
   name: 'Button',
-  render: props => {
+  render: ({ variant, outline, ...props }) => {
     return <ReakitButton {...props} />
   },
   theme: [
@@ -32,6 +32,7 @@ export const Button = createComponent({
       },
       components: {
         Button: p => {
+          const { outline } = p
           const scale = p.scale || 'base'
           const baseColor =
             p.variant === null ? null : th.color(p.variant || 'primary')(p)
@@ -61,6 +62,7 @@ export const Button = createComponent({
             }
 
             ${baseColor &&
+              !outline &&
               css`
                 color: ${colorYik(baseColor)(p)};
                 background-color: ${baseColor};
@@ -76,6 +78,27 @@ export const Button = createComponent({
                 }
               `(p)}
 
+            ${baseColor &&
+              outline &&
+              css`
+                color: ${darken(0.05, baseColor)};
+                background-color: transparent;
+                border: 1;
+                border-color: ${baseColor};
+
+                &:focus {
+                  ${p.theme.mixins.controlFocus(baseColor)(p)};
+                  border-color: ${baseColor};
+                }
+
+                &:not(:disabled):hover,
+                &:not(:disabled):active {
+                  color: ${darken(0.1, baseColor)};
+                  border-color: ${darken(0.05, baseColor)};
+                  background-color: ${transparentize(0.8, baseColor)};
+                }
+              `}
+
             && {
               ${system(p)}
             }

website/src/pages/docs/button.mdx

@@ -38,6 +38,55 @@ function Example() {
 render(<Example />)
 ```
 
+## Outline
+
+Add `outline` prop to use the outline variant of buttons.
+
+```jsx live noInline
+import React from 'react'
+import { Button, Boxer } from '@smooth-ui/core-sc'
+
+function Example() {
+  return (
+    <Boxer my={10}>
+      <Button outline>Default (primary)</Button>
+      <Button outline variant="primary">
+        Primary
+      </Button>
+      <Button outline variant="secondary">
+        Secondary
+      </Button>
+      <Button outline variant="success">
+        Success
+      </Button>
+      <Button outline variant="danger">
+        Danger
+      </Button>
+      <Button outline variant="warning">
+        Warning
+      </Button>
+      <Button outline variant="info">
+        Info
+      </Button>
+      <Button outline variant="light">
+        Light
+      </Button>
+      <Button outline variant="dark">
+        Dark
+      </Button>
+      <Button outline variant="#804FCE">
+        Custom color
+      </Button>
+      <Button outline variant={null}>
+        No variant
+      </Button>
+    </Boxer>
+  )
+}
+
+render(<Example />)
+```
+
 ## Scales
 
 Set scales using `scale` prop like `"xs"`, `"sm"`, `"lg"` or `"xl"`. The default scale is `"base"`.