Create the button component with vanilla-extract

package.json

@@ -11,6 +11,9 @@
   "dependencies": {
     "@styled-system/css": "^5.1.5",
     "@styled-system/should-forward-prop": "^5.1.5",
+    "@vanilla-extract/css": "^1.14.1",
+    "@vanilla-extract/recipes": "^0.5.1",
+    "@vanilla-extract/sprinkles": "^1.6.1",
     "react-select": "^5.8.0",
     "styled-system": "^5.1.5"
   },
@@ -46,9 +49,11 @@
     "@types/react-dom": "^18.2.19",
     "@types/styled-system": "^5.1.22",
     "@types/styled-system__css": "^5.0.21",
+    "@vanilla-extract/vite-plugin": "^4.0.4",
     "babel-plugin-inline-react-svg": "^2.0.2",
     "babel-plugin-styled-components": "^2.1.4",
     "cheerio": "^1.0.0-rc.12",
+    "css-loader": "^6.10.0",
     "gh-pages": "^6.1.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -67,6 +72,7 @@
     "rollup-plugin-typescript2": "^0.36.0",
     "rollup-plugin-visualizer": "^5.12.0",
     "storybook": "^7.6.17",
+    "style-loader": "^3.3.4",
     "styled-components": "^6.1.8",
     "ts-jest": "^29.1.2",
     "tslib": "^2.6.2",

src/components/ButtonVE.css.ts

@@ -0,0 +1,142 @@
+import { createGlobalTheme } from '@vanilla-extract/css'
+import { recipe } from '@vanilla-extract/recipes'
+import { sprinkles } from './ButtonVESprinkles.css'
+
+export const vars = createGlobalTheme(':root', {
+  color: {
+    blue: {
+      '100': '#c9e8ff',
+      '200': '#8dd5f8',
+      '300': '#5db8fe',
+      '400': '#37a6ed',
+      '500': '#0588cb',
+      '600': '#0f77b8',
+      '700': '#056aa6',
+      '800': '#005f9c',
+      '900': '#005a99',
+    },
+  },
+  fontSize: {
+    sm: { fontSize: '0.875rem', lineHeight: '1.25rem' },
+  },
+  space: {
+    sm: '0.5rem',
+  },
+})
+
+export const button = recipe({
+  base: {
+    display: 'flex',
+    justifyItems: 'center',
+    alignItems: 'center',
+    borderRadius: 999,
+    cursor: 'pointer',
+    fontFamily: 'inherit',
+    // display: 'inline-block',
+    textTransform: 'capitalize',
+    // textAlign: 'center',
+    letterSpacing: '0.5px',
+    // verticalAlign: 'middle',
+    // Gets rid of tap active state
+    WebkitTapHighlightColor: 'transparent',
+    transition: '.2s ease-out',
+    outline: 0,
+    borderWidth: '2px',
+    borderStyle: 'solid',
+    ':focus-visible': {
+      transition: 'none',
+      outline: '2px solid',
+      outlineColor: vars.color.blue[500],
+      outlineOffset: '1px',
+    },
+  },
+  variants: {
+    variant: {
+      primary: {
+        background: vars.color.blue[500],
+        color: 'white',
+        borderColor: vars.color.blue[500],
+        ':hover': {
+          background: vars.color.blue[900],
+          borderColor: vars.color.blue[900],
+        },
+      },
+      dark: {
+        background: 'black',
+        borderColor: 'black',
+        color: 'white',
+        ':hover': {
+          background: 'black',
+          borderColor: 'black',
+        },
+      },
+    },
+    size: {
+      s: [{ padding: '0.25rem 1rem' }, sprinkles({ textStyle: 'sm' })],
+      m: [{ padding: '0.5rem 1.5rem' }, sprinkles({ textStyle: 'md' })],
+      l: [{ padding: '0.5rem 2rem' }, sprinkles({ textStyle: 'xxl' })],
+      xl: [{ padding: '0.875rem 4rem' }, sprinkles({ textStyle: 'xxl' })],
+    },
+    hollow: {
+      true: { background: 'transparent' },
+    },
+  },
+  defaultVariants: {
+    size: 'm',
+    hollow: false,
+    variant: 'primary',
+  },
+  compoundVariants: [
+    {
+      variants: {
+        variant: 'primary',
+        hollow: true,
+      },
+      style: {
+        background: 'transparent',
+        color: vars.color.blue[500],
+        ':hover': {
+          background: 'transparent',
+          borderColor: vars.color.blue[900],
+          color: vars.color.blue[900],
+        },
+      },
+    },
+  ],
+})
+
+// export const storybookButton = style({
+//   fontFamily: 'Nunito Sans , Helvetica Neue , Helvetica , Arial , sans-serif',
+//   fontWeight: '700',
+//   border: '0',
+//   borderRadius: '3em',
+//   cursor: 'pointer',
+//   display: 'inline-block',
+//   lineHeight: '1',
+// });
+
+// export const storybookButtonLarge = style({
+//   fontSize: '16px',
+//   padding: '12px 24px',
+// });
+
+// export const storybookButtonMedium = style({
+//   fontSize: '14px',
+//   padding: '11px 20px',
+// });
+
+// export const storybookButtonPrimary = style({
+//   color: 'white',
+//   backgroundColor: '#1ea7fd',
+// });
+
+// export const storybookButtonSecondary = style({
+//   color: '#333',
+//   backgroundColor: 'transparent',
+//   boxShadow: 'rgba(0,0,0,0.15) 0px 0px 0px 1px inset',
+// });
+
+// export const storybookButtonSmall = style({
+//   fontSize: '12px',
+//   padding: '10px 16px',
+// });

src/components/ButtonVE.tsx

@@ -0,0 +1,56 @@
+import React, { forwardRef } from 'react'
+import { button } from './ButtonVE.css'
+import { sprinkles } from './ButtonVESprinkles.css'
+
+type Size = 's' | 'm' | 'l' | 'xl'
+type Variant = 'primary' | 'dark'
+
+console.log(' sprinkles', sprinkles({ textStyle: 'sm' }))
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  disabled?: boolean
+  inverted?: boolean
+  hollow?: boolean
+  variant?: Variant
+  size?: Size
+  startIcon?: React.ReactNode
+  endIcon?: React.ReactNode
+}
+
+const Button = forwardRef(
+  (
+    {
+      hollow = false,
+      inverted = false,
+      disabled = false,
+      variant = 'primary',
+      size = 'm',
+      type = 'button',
+      children,
+      startIcon,
+      endIcon,
+      ...rest
+    }: ButtonProps,
+    ref,
+  ) => {
+    return (
+      <button
+        className={button({
+          variant,
+          size,
+          hollow,
+        })}
+        type={type}
+        {...ref}
+        {...rest}
+      >
+        {startIcon && <span className="icon">{startIcon}</span>}
+        {children}
+        {endIcon && <span className="icon">{endIcon}</span>}
+      </button>
+    )
+  },
+)
+
+export default Button

src/components/ButtonVESprinkles.css.ts

@@ -0,0 +1,17 @@
+import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles'
+
+const properties = defineProperties({
+  properties: {
+    textStyle: {
+      sm: { fontSize: '0.875rem', lineHeight: '1.25rem' },
+      md: { fontSize: '1rem', lineHeight: '1.5rem' },
+      lg: { fontSize: '1.125rem', lineHeight: '1.75rem' },
+      xl: { fontSize: '1.25rem', lineHeight: '1.75rem' },
+      xxl: { fontSize: '1.5rem', lineHeight: '2rem' },
+    },
+  },
+})
+
+export const sprinkles = createSprinkles(properties)
+
+export type Sprinkles = Parameters<typeof sprinkles>[0]

stories/ButtonVE.stories.tsx

@@ -0,0 +1,51 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+import { BsTwitter } from 'react-icons/bs'
+import Box from '../src/components/Box'
+import Button from '../src/components/ButtonVE'
+
+const meta = {
+  title: 'Components/ButtonVE',
+  component: Button,
+  tags: ['autodocs'],
+  argTypes: {
+    onClick: { action: 'clicked' },
+    hollow: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    inverted: { control: 'boolean' },
+  },
+} satisfies Meta<typeof Button>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: {
+    children: 'Button',
+  },
+}
+
+export const ColorVariant: Story = {
+  args: {
+    variant: 'dark',
+    children: 'Button',
+    size: 's',
+    endIcon: <BsTwitter />,
+  },
+}
+
+export const Hollow: Story = {
+  args: {
+    hollow: true,
+    size: 'l',
+    children: 'Button',
+  },
+}
+
+export const LongButton = () => {
+  return (
+    <Box width="300px">
+      <Button>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Button>
+    </Box>
+  )
+}

vite.config.ts

@@ -1,7 +1,8 @@
+import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'
 import react from '@vitejs/plugin-react'
 import { defineConfig } from 'vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), vanillaExtractPlugin()],
 })