From a96d6126a8df406b8bb363e008c622087374832c Mon Sep 17 00:00:00 2001
From: Daniel Soares <daniel.soares@me.com>
Date: Sat, 11 Dec 2021 01:48:15 -0300
Subject: [PATCH] feat: add base styles

---
 src/components/Button/index.tsx |  13 ++
 src/components/Button/styles.ts | 214 +++++++++++++++++++++++++++
 src/pages/index.tsx             |  26 +++-
 src/styles/stitches.config.ts   | 246 +++++++++++++++++++++++++++++++-
 4 files changed, 497 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Button/index.tsx
 create mode 100644 src/components/Button/styles.ts

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
new file mode 100644
index 0000000..547c7c3
--- /dev/null
+++ b/src/components/Button/index.tsx
@@ -0,0 +1,13 @@
+import { VariantProps } from '@stitches/react'
+import { ButtonHTMLAttributes, ReactNode } from 'react'
+
+import { Wrapper } from './styles'
+
+type ButtonProps = VariantProps<typeof Wrapper> &
+  ButtonHTMLAttributes<HTMLButtonElement> & {
+    children: ReactNode
+  }
+
+export function Button({ children, ...rest }: ButtonProps) {
+  return <Wrapper {...rest}>{children}</Wrapper>
+}
diff --git a/src/components/Button/styles.ts b/src/components/Button/styles.ts
new file mode 100644
index 0000000..7e6c2d0
--- /dev/null
+++ b/src/components/Button/styles.ts
@@ -0,0 +1,214 @@
+import { styled, theme } from '../../styles/stitches.config'
+
+type Color = keyof typeof theme.colors
+
+const colorVariantFn = (
+  lightColor: Color,
+  regularColor: Color,
+  darkColor: Color,
+  darkerColor: Color
+) => ({
+  background: theme.colors[regularColor],
+  borderColor: theme.colors[regularColor],
+  color: theme.colors[lightColor],
+
+  '&:hover': {
+    background: theme.colors[darkColor],
+    borderColor: theme.colors[darkColor]
+  },
+
+  '&:active': {
+    background: theme.colors[darkerColor],
+    borderColor: theme.colors[darkerColor]
+  }
+})
+
+const outlineVariantFn = (lightColor: Color, regularColor: Color, darkColor: Color) => ({
+  color: theme.colors[darkColor],
+
+  '&:hover': {
+    background: theme.colors[lightColor]
+  },
+
+  '&:active': {
+    background: theme.colors[regularColor]
+  }
+})
+
+export const Wrapper = styled('button', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '100%',
+  height: '3rem',
+  borderWidth: '2.5px',
+  borderStyle: 'solid',
+  fontSize: '1rem',
+  fontWeight: 'bold',
+  cursor: 'pointer',
+  transition: 'all 0.25s ease-in-out',
+
+  '&:hover': {
+    transform: 'translateY(-0.15rem)'
+  },
+
+  variants: {
+    color: {
+      slate: colorVariantFn('slate50', 'slate600', 'slate700', 'slate800'),
+      gray: colorVariantFn('gray50', 'gray600', 'gray700', 'gray800'),
+      zinc: colorVariantFn('zinc50', 'zinc600', 'zinc700', 'zinc800'),
+      neutral: colorVariantFn('neutral50', 'neutral600', 'neutral700', 'neutral800'),
+      stone: colorVariantFn('stone50', 'stone600', 'stone700', 'stone800'),
+      red: colorVariantFn('red50', 'red600', 'red700', 'red800'),
+      orange: colorVariantFn('orange50', 'orange600', 'orange700', 'orange800'),
+      amber: colorVariantFn('amber50', 'amber600', 'amber700', 'amber800'),
+      yellow: colorVariantFn('yellow50', 'yellow600', 'yellow700', 'yellow800'),
+      lime: colorVariantFn('lime50', 'lime600', 'lime700', 'lime800'),
+      green: colorVariantFn('green50', 'green600', 'green700', 'green800'),
+      emerald: colorVariantFn('emerald50', 'emerald600', 'emerald700', 'emerald800'),
+      teal: colorVariantFn('teal50', 'teal600', 'teal700', 'teal800'),
+      cyan: colorVariantFn('cyan50', 'cyan600', 'cyan700', 'cyan800'),
+      sky: colorVariantFn('sky50', 'sky600', 'sky700', 'sky800'),
+      blue: colorVariantFn('blue50', 'blue600', 'blue700', 'blue800'),
+      indigo: colorVariantFn('indigo50', 'indigo600', 'indigo700', 'indigo800'),
+      violet: colorVariantFn('violet50', 'violet600', 'violet700', 'violet800'),
+      purple: colorVariantFn('purple50', 'purple600', 'purple700', 'purple800'),
+      fuchsia: colorVariantFn('fuchsia50', 'fuchsia600', 'fuchsia700', 'fuchsia800'),
+      pink: colorVariantFn('pink50', 'pink600', 'pink700', 'pink800'),
+      rose: colorVariantFn('rose50', 'rose600', 'rose700', 'rose800')
+    },
+
+    schema: {
+      square: {
+        borderRadius: '0'
+      },
+      rounded: {
+        borderRadius: '0.5rem'
+      },
+      pill: {
+        borderRadius: '9999px'
+      },
+      outline: {
+        background: 'transparent'
+      }
+    }
+  },
+
+  compoundVariants: [
+    {
+      color: 'slate',
+      schema: 'outline',
+      css: outlineVariantFn('slate50', 'slate100', 'slate600')
+    },
+    {
+      color: 'gray',
+      schema: 'outline',
+      css: outlineVariantFn('gray50', 'gray100', 'gray600')
+    },
+    {
+      color: 'zinc',
+      schema: 'outline',
+      css: outlineVariantFn('zinc50', 'zinc100', 'zinc600')
+    },
+    {
+      color: 'neutral',
+      schema: 'outline',
+      css: outlineVariantFn('neutral50', 'neutral100', 'neutral600')
+    },
+    {
+      color: 'stone',
+      schema: 'outline',
+      css: outlineVariantFn('stone50', 'stone100', 'stone600')
+    },
+    {
+      color: 'red',
+      schema: 'outline',
+      css: outlineVariantFn('red50', 'red100', 'red600')
+    },
+    {
+      color: 'orange',
+      schema: 'outline',
+      css: outlineVariantFn('orange50', 'orange100', 'orange600')
+    },
+    {
+      color: 'amber',
+      schema: 'outline',
+      css: outlineVariantFn('amber50', 'amber100', 'amber600')
+    },
+    {
+      color: 'yellow',
+      schema: 'outline',
+      css: outlineVariantFn('yellow50', 'yellow100', 'yellow600')
+    },
+    {
+      color: 'lime',
+      schema: 'outline',
+      css: outlineVariantFn('lime50', 'lime100', 'lime600')
+    },
+    {
+      color: 'green',
+      schema: 'outline',
+      css: outlineVariantFn('green50', 'green100', 'green600')
+    },
+    {
+      color: 'emerald',
+      schema: 'outline',
+      css: outlineVariantFn('emerald50', 'emerald100', 'emerald600')
+    },
+    {
+      color: 'teal',
+      schema: 'outline',
+      css: outlineVariantFn('teal50', 'teal100', 'teal600')
+    },
+    {
+      color: 'cyan',
+      schema: 'outline',
+      css: outlineVariantFn('cyan50', 'cyan100', 'cyan600')
+    },
+    {
+      color: 'sky',
+      schema: 'outline',
+      css: outlineVariantFn('sky50', 'sky100', 'sky600')
+    },
+    {
+      color: 'blue',
+      schema: 'outline',
+      css: outlineVariantFn('blue50', 'blue100', 'blue600')
+    },
+    {
+      color: 'indigo',
+      schema: 'outline',
+      css: outlineVariantFn('indigo50', 'indigo100', 'indigo600')
+    },
+    {
+      color: 'violet',
+      schema: 'outline',
+      css: outlineVariantFn('violet50', 'violet100', 'violet600')
+    },
+    {
+      color: 'purple',
+      schema: 'outline',
+      css: outlineVariantFn('purple50', 'purple100', 'purple600')
+    },
+    {
+      color: 'fuchsia',
+      schema: 'outline',
+      css: outlineVariantFn('fuchsia50', 'fuchsia100', 'fuchsia600')
+    },
+    {
+      color: 'pink',
+      schema: 'outline',
+      css: outlineVariantFn('pink50', 'pink100', 'pink600')
+    },
+    {
+      color: 'rose',
+      schema: 'outline',
+      css: outlineVariantFn('rose50', 'rose100', 'rose600')
+    }
+  ],
+
+  defaultVariants: {
+    color: 'teal',
+    schema: 'outline'
+  }
+})
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 496f337..5b24a67 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,7 +1,31 @@
+import { Button } from '../components/Button'
+
 export default function Home() {
+  const links = [
+    {
+      label: 'Home',
+      href: '#'
+    },
+    {
+      label: 'About',
+      href: '/about'
+    },
+    {
+      label: 'Contact',
+      href: '/contact'
+    }
+  ]
+
   return (
     <div>
-      <h1>Hello</h1>
+      {links.map(link => (
+        <>
+          <Button color="sky" schema="square" key={link.href}>
+            {link.label}
+          </Button>
+          <br />
+        </>
+      ))}
     </div>
   )
 }
diff --git a/src/styles/stitches.config.ts b/src/styles/stitches.config.ts
index eb22cee..5a34f6a 100644
--- a/src/styles/stitches.config.ts
+++ b/src/styles/stitches.config.ts
@@ -1,5 +1,249 @@
 import { createStitches } from '@stitches/react'
 
 export const { css, styled, globalCss, theme, keyframes, getCssText } = createStitches({
-  theme: {}
+  theme: {
+    colors: {
+      slate50: '#f8fafc',
+      slate100: '#f1f5f9',
+      slate200: '#e2e8f0',
+      slate300: '#cbd5e1',
+      slate400: '#94a3b8',
+      slate500: '#64748b',
+      slate600: '#475569',
+      slate700: '#334155',
+      slate800: '#1e293b',
+      slate900: '#0f172a',
+
+      gray50: '#f9fafb',
+      gray100: '#f3f4f6',
+      gray200: '#e5e7eb',
+      gray300: '#d1d5db',
+      gray400: '#9ca3af',
+      gray500: '#6b7280',
+      gray600: '#4b5563',
+      gray700: '#374151',
+      gray800: '#1f2937',
+      gray900: '#111827',
+
+      zinc50: '#fafafa',
+      zinc100: '#f4f4f5',
+      zinc200: '#e4e4e7',
+      zinc300: '#d4d4d8',
+      zinc400: '#a1a1aa',
+      zinc500: '#71717a',
+      zinc600: '#52525b',
+      zinc700: '#3f3f46',
+      zinc800: '#27272a',
+      zinc900: '#18181b',
+
+      neutral50: '#fafafa',
+      neutral100: '#f5f5f5',
+      neutral200: '#e5e5e5',
+      neutral300: '#d4d4d4',
+      neutral400: '#a3a3a3',
+      neutral500: '#737373',
+      neutral600: '#525252',
+      neutral700: '#404040',
+      neutral800: '#262626',
+      neutral900: '#171717',
+
+      stone50: '#fafaf9',
+      stone100: '#f5f5f4',
+      stone200: '#e7e5e4',
+      stone300: '#d6d3d1',
+      stone400: '#a8a29e',
+      stone500: '#78716c',
+      stone600: '#57534e',
+      stone700: '#44403c',
+      stone800: '#292524',
+      stone900: '#1c1917',
+
+      red50: '#fef2f2',
+      red100: '#fee2e2',
+      red200: '#fecaca',
+      red300: '#fca5a5',
+      red400: '#f87171',
+      red500: '#ef4444',
+      red600: '#dc2626',
+      red700: '#b91c1c',
+      red800: '#991b1b',
+      red900: '#7f1d1d',
+
+      orange50: '#fff7ed',
+      orange100: '#ffedd5',
+      orange200: '#fed7aa',
+      orange300: '#fdba74',
+      orange400: '#fb923c',
+      orange500: '#f97316',
+      orange600: '#ea580c',
+      orange700: '#c2410c',
+      orange800: '#9a3412',
+      orange900: '#7c2d12',
+
+      amber50: '#fffbeb',
+      amber100: '#fef3c7',
+      amber200: '#fde68a',
+      amber300: '#fcd34d',
+      amber400: '#fbbf24',
+      amber500: '#f59e0b',
+      amber600: '#d97706',
+      amber700: '#b45309',
+      amber800: '#92400e',
+      amber900: '#78350f',
+
+      yellow50: '#fefce8',
+      yellow100: '#fef9c3',
+      yellow200: '#fef08a',
+      yellow300: '#fde047',
+      yellow400: '#facc15',
+      yellow500: '#eab308',
+      yellow600: '#ca8a04',
+      yellow700: '#a16207',
+      yellow800: '#854d0e',
+      yellow900: '#713f12',
+
+      lime50: '#f7fee7',
+      lime100: '#ecfccb',
+      lime200: '#d9f99d',
+      lime300: '#bef264',
+      lime400: '#a3e635',
+      lime500: '#84cc16',
+      lime600: '#65a30d',
+      lime700: '#4d7c0f',
+      lime800: '#3f6212',
+      lime900: '#365314',
+
+      green50: '#f0fdf4',
+      green100: '#dcfce7',
+      green200: '#bbf7d0',
+      green300: '#86efac',
+      green400: '#4ade80',
+      green500: '#22c55e',
+      green600: '#16a34a',
+      green700: '#15803d',
+      green800: '#166534',
+      green900: '#14532d',
+
+      emerald50: '#ecfdf5',
+      emerald100: '#d1fae5',
+      emerald200: '#a7f3d0',
+      emerald300: '#6ee7b7',
+      emerald400: '#34d399',
+      emerald500: '#10b981',
+      emerald600: '#059669',
+      emerald700: '#047857',
+      emerald800: '#065f46',
+      emerald900: '#064e3b',
+
+      teal50: '#f0fdfa',
+      teal100: '#ccfbf1',
+      teal200: '#99f6e4',
+      teal300: '#5eead4',
+      teal400: '#2dd4bf',
+      teal500: '#14b8a6',
+      teal600: '#0d9488',
+      teal700: '#0f766e',
+      teal800: '#115e59',
+      teal900: '#134e4a',
+
+      cyan50: '#ecfeff',
+      cyan100: '#cffafe',
+      cyan200: '#a5f3fc',
+      cyan300: '#67e8f9',
+      cyan400: '#22d3ee',
+      cyan500: '#06b6d4',
+      cyan600: '#0891b2',
+      cyan700: '#0e7490',
+      cyan800: '#155e75',
+      cyan900: '#164e63',
+
+      sky50: '#f0f9ff',
+      sky100: '#e0f2fe',
+      sky200: '#bae6fd',
+      sky300: '#7dd3fc',
+      sky400: '#38bdf8',
+      sky500: '#0ea5e9',
+      sky600: '#0284c7',
+      sky700: '#0369a1',
+      sky800: '#075985',
+      sky900: '#0c4a6e',
+
+      blue50: '#eff6ff',
+      blue100: '#dbeafe',
+      blue200: '#bfdbfe',
+      blue300: '#93c5fd',
+      blue400: '#60a5fa',
+      blue500: '#3b82f6',
+      blue600: '#2563eb',
+      blue700: '#1d4ed8',
+      blue800: '#1e40af',
+      blue900: '#1e3a8a',
+
+      indigo50: '#eef2ff',
+      indigo100: '#e0e7ff',
+      indigo200: '#c7d2fe',
+      indigo300: '#a5b4fc',
+      indigo400: '#818cf8',
+      indigo500: '#6366f1',
+      indigo600: '#4f46e5',
+      indigo700: '#4338ca',
+      indigo800: '#3730a3',
+      indigo900: '#312e81',
+
+      violet50: '#f5f3ff',
+      violet100: '#ede9fe',
+      violet200: '#ddd6fe',
+      violet300: '#c4b5fd',
+      violet400: '#a78bfa',
+      violet500: '#8b5cf6',
+      violet600: '#7c3aed',
+      violet700: '#6d28d9',
+      violet800: '#5b21b6',
+      violet900: '#4c1d95',
+
+      purple50: '#faf5ff',
+      purple100: '#f3e8ff',
+      purple200: '#e9d5ff',
+      purple300: '#d8b4fe',
+      purple400: '#c084fc',
+      purple500: '#a855f7',
+      purple600: '#9333ea',
+      purple700: '#7e22ce',
+      purple800: '#6b21a8',
+      purple900: '#581c87',
+
+      fuchsia50: '#fdf4ff',
+      fuchsia100: '#fae8ff',
+      fuchsia200: '#f5d0fe',
+      fuchsia300: '#f0abfc',
+      fuchsia400: '#e879f9',
+      fuchsia500: '#d946ef',
+      fuchsia600: '#c026d3',
+      fuchsia700: '#a21caf',
+      fuchsia800: '#86198f',
+      fuchsia900: '#701a75',
+
+      pink50: '#fdf2f8',
+      pink100: '#fce7f3',
+      pink200: '#fbcfe8',
+      pink300: '#f9a8d4',
+      pink400: '#f472b6',
+      pink500: '#ec4899',
+      pink600: '#db2777',
+      pink700: '#be185d',
+      pink800: '#9d174d',
+      pink900: '#831843',
+
+      rose50: '#fff1f2',
+      rose100: '#ffe4e6',
+      rose200: '#fecdd3',
+      rose300: '#fda4af',
+      rose400: '#fb7185',
+      rose500: '#f43f5e',
+      rose600: '#e11d48',
+      rose700: '#be123c',
+      rose800: '#9f1239',
+      rose900: '#881337'
+    }
+  }
 })