feat: add ColorSelect

src/components/Button/index.tsx

@@ -5,10 +5,10 @@ import { Wrapper } from './styles'
 
 type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   children: ReactNode
-  theme?: ButtonVariantProps['theme']
-  schema?: ButtonVariantProps['schema']
-  outline?: ButtonVariantProps['outline']
+  colorSchema?: ButtonVariantProps['colorSchema']
+  styleSchema?: ButtonVariantProps['styleSchema']
   font?: ButtonVariantProps['font']
+  outline?: ButtonVariantProps['outline']
 }
 
 export function Button({ children, ...rest }: ButtonProps) {

src/components/Button/styles.ts

@@ -1,6 +1,6 @@
 import { Colors, styled, theme, VariantProps } from '../../styles/stitches.config'
 
-const themeVariantFn = (
+const colorSchemaFn = (
   lightColor: Colors,
   regularColor: Colors,
   darkColor: Colors,
@@ -51,32 +51,28 @@ export const Wrapper = styled('button', {
   },
 
   variants: {
-    theme: {
-      slate: themeVariantFn('slate50', 'slate600', 'slate700', 'slate800'),
-      gray: themeVariantFn('gray50', 'gray600', 'gray700', 'gray800'),
-      zinc: themeVariantFn('zinc50', 'zinc600', 'zinc700', 'zinc800'),
-      neutral: themeVariantFn('neutral50', 'neutral600', 'neutral700', 'neutral800'),
-      stone: themeVariantFn('stone50', 'stone600', 'stone700', 'stone800'),
-      red: themeVariantFn('red50', 'red600', 'red700', 'red800'),
-      orange: themeVariantFn('orange50', 'orange600', 'orange700', 'orange800'),
-      amber: themeVariantFn('amber50', 'amber600', 'amber700', 'amber800'),
-      yellow: themeVariantFn('yellow50', 'yellow600', 'yellow700', 'yellow800'),
-      lime: themeVariantFn('lime50', 'lime600', 'lime700', 'lime800'),
-      green: themeVariantFn('green50', 'green600', 'green700', 'green800'),
-      emerald: themeVariantFn('emerald50', 'emerald600', 'emerald700', 'emerald800'),
-      teal: themeVariantFn('teal50', 'teal600', 'teal700', 'teal800'),
-      cyan: themeVariantFn('cyan50', 'cyan600', 'cyan700', 'cyan800'),
-      sky: themeVariantFn('sky50', 'sky600', 'sky700', 'sky800'),
-      blue: themeVariantFn('blue50', 'blue600', 'blue700', 'blue800'),
-      indigo: themeVariantFn('indigo50', 'indigo600', 'indigo700', 'indigo800'),
-      violet: themeVariantFn('violet50', 'violet600', 'violet700', 'violet800'),
-      purple: themeVariantFn('purple50', 'purple600', 'purple700', 'purple800'),
-      fuchsia: themeVariantFn('fuchsia50', 'fuchsia600', 'fuchsia700', 'fuchsia800'),
-      pink: themeVariantFn('pink50', 'pink600', 'pink700', 'pink800'),
-      rose: themeVariantFn('rose50', 'rose600', 'rose700', 'rose800')
+    colorSchema: {
+      slate: colorSchemaFn('slate50', 'slate600', 'slate700', 'slate800'),
+      red: colorSchemaFn('red50', 'red600', 'red700', 'red800'),
+      orange: colorSchemaFn('orange50', 'orange600', 'orange700', 'orange800'),
+      amber: colorSchemaFn('amber50', 'amber600', 'amber700', 'amber800'),
+      yellow: colorSchemaFn('yellow50', 'yellow600', 'yellow700', 'yellow800'),
+      lime: colorSchemaFn('lime50', 'lime600', 'lime700', 'lime800'),
+      green: colorSchemaFn('green50', 'green600', 'green700', 'green800'),
+      emerald: colorSchemaFn('emerald50', 'emerald600', 'emerald700', 'emerald800'),
+      teal: colorSchemaFn('teal50', 'teal600', 'teal700', 'teal800'),
+      cyan: colorSchemaFn('cyan50', 'cyan600', 'cyan700', 'cyan800'),
+      sky: colorSchemaFn('sky50', 'sky600', 'sky700', 'sky800'),
+      blue: colorSchemaFn('blue50', 'blue600', 'blue700', 'blue800'),
+      indigo: colorSchemaFn('indigo50', 'indigo600', 'indigo700', 'indigo800'),
+      violet: colorSchemaFn('violet50', 'violet600', 'violet700', 'violet800'),
+      purple: colorSchemaFn('purple50', 'purple600', 'purple700', 'purple800'),
+      fuchsia: colorSchemaFn('fuchsia50', 'fuchsia600', 'fuchsia700', 'fuchsia800'),
+      pink: colorSchemaFn('pink50', 'pink600', 'pink700', 'pink800'),
+      rose: colorSchemaFn('rose50', 'rose600', 'rose700', 'rose800')
     },
 
-    schema: {
+    styleSchema: {
       square: {
         borderRadius: '0'
       },
@@ -109,120 +105,100 @@ export const Wrapper = styled('button', {
 
   compoundVariants: [
     {
-      theme: 'slate',
+      colorSchema: 'slate',
       outline: true,
       css: outlineVariantFn('slate600')
     },
     {
-      theme: 'gray',
-      outline: true,
-      css: outlineVariantFn('gray600')
-    },
-    {
-      theme: 'zinc',
-      outline: true,
-      css: outlineVariantFn('zinc600')
-    },
-    {
-      theme: 'neutral',
-      outline: true,
-      css: outlineVariantFn('neutral600')
-    },
-    {
-      theme: 'stone',
-      outline: true,
-      css: outlineVariantFn('stone600')
-    },
-    {
-      theme: 'red',
+      colorSchema: 'red',
       outline: true,
       css: outlineVariantFn('red600')
     },
     {
-      theme: 'orange',
+      colorSchema: 'orange',
       outline: true,
       css: outlineVariantFn('orange600')
     },
     {
-      theme: 'amber',
+      colorSchema: 'amber',
       outline: true,
       css: outlineVariantFn('amber600')
     },
     {
-      theme: 'yellow',
+      colorSchema: 'yellow',
       outline: true,
       css: outlineVariantFn('yellow600')
     },
     {
-      theme: 'lime',
+      colorSchema: 'lime',
       outline: true,
       css: outlineVariantFn('lime600')
     },
     {
-      theme: 'green',
+      colorSchema: 'green',
       outline: true,
       css: outlineVariantFn('green600')
     },
     {
-      theme: 'emerald',
+      colorSchema: 'emerald',
       outline: true,
       css: outlineVariantFn('emerald600')
     },
     {
-      theme: 'teal',
+      colorSchema: 'teal',
       outline: true,
       css: outlineVariantFn('teal600')
     },
     {
-      theme: 'cyan',
+      colorSchema: 'cyan',
       outline: true,
       css: outlineVariantFn('cyan600')
     },
     {
-      theme: 'sky',
+      colorSchema: 'sky',
       outline: true,
       css: outlineVariantFn('sky600')
     },
     {
-      theme: 'blue',
+      colorSchema: 'blue',
       outline: true,
       css: outlineVariantFn('blue600')
     },
     {
-      theme: 'indigo',
+      colorSchema: 'indigo',
       outline: true,
       css: outlineVariantFn('indigo600')
     },
     {
-      theme: 'violet',
+      colorSchema: 'violet',
       outline: true,
       css: outlineVariantFn('violet600')
     },
     {
-      theme: 'purple',
+      colorSchema: 'purple',
       outline: true,
       css: outlineVariantFn('purple600')
     },
     {
-      theme: 'fuchsia',
+      colorSchema: 'fuchsia',
       outline: true,
       css: outlineVariantFn('fuchsia600')
     },
     {
-      theme: 'pink',
+      colorSchema: 'pink',
       outline: true,
       css: outlineVariantFn('pink600')
     },
     {
-      theme: 'rose',
+      colorSchema: 'rose',
       outline: true,
       css: outlineVariantFn('rose600')
     }
   ],
 
   defaultVariants: {
-    theme: 'teal',
-    schema: 'pill',
+    colorSchema: 'teal',
+    styleSchema: 'pill',
     font: 'roboto',
     outline: false
   }