Feature: Upgrade stitches to beta

.lintstagedrc

@@ -1,5 +1,5 @@
 {
-  "src/**/*.{js, ts, tsx}": [
+  "src/**/*.{js,ts,tsx}": [
     "node_modules/.bin/eslint --fix --cache --quiet",
     "node_modules/.bin/prettier --config .prettierrc --write",
     "node_modules/.bin/jest --bail --findRelatedTests",

jest.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   roots: ['<rootDir>/src'],
-  snapshotSerializers: ['jest-stitches'],
+  snapshotSerializers: ['@atom-learning/jest-stitches'],
   collectCoverage: true,
   coveragePathIgnorePatterns: ['/src/stitches.ts'],
   testPathIgnorePatterns: ['/node_modules/'],

package.json

@@ -38,7 +38,8 @@
     }
   ],
   "devDependencies": {
-    "@atom-learning/theme": "0.1.0-beta.4",
+    "@atom-learning/jest-stitches": "^1.0.7",
+    "@atom-learning/theme": "0.1.0-beta.5",
     "@babel/plugin-transform-modules-commonjs": "^7.12.1",
     "@babel/preset-react": "^7.12.10",
     "@babel/preset-typescript": "^7.12.7",
@@ -69,7 +70,6 @@
     "jest": "^26.6.3",
     "jest-axe": "^4.1.0",
     "jest-dom": "^4.0.0",
-    "jest-stitches": "^1.0.4",
     "lint-staged": "^10.5.3",
     "microbundle": "^0.13.0",
     "npm-run-all": "^4.1.5",
@@ -89,7 +89,9 @@
   "dependencies": {
     "@radix-ui/react-checkbox": "^0.0.4",
     "@radix-ui/react-icons": "^1.0.1",
-    "@stitches/react": "0.0.3-canary.4"
+    "@stitches/react": "0.1.0-canary.5",
+    "@types/react": "^17.0.2",
+    "@types/resize-observer-browser": "^0.1.5"
   },
   "husky": {
     "hooks": {

sandbox/index.tsx

@@ -2,9 +2,9 @@ import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import { reset } from 'stitches-reset'
 
-import { Box, css } from '../dist'
+import { Box, globalCss } from '../dist'
 
-css.global(reset)()
+globalCss(reset)()
 
 const App = () => {
   return <Box />

src/components/box/__snapshots__/Box.test.tsx.snap

@@ -1,33 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Box component renders 1`] = `
-._Fgykb {
-  margin-top: auto;
+.sx03kze6obnf--css {
+  margin: auto;
 }
 
-._bVZaHo {
-  margin-right: auto;
-}
-
-._kSJetr {
-  margin-bottom: auto;
-}
-
-._jbMiSP {
-  margin-left: auto;
-}
-
-._SOQhS {
+.sx03kze6obnf--css {
   height: 100px;
-}
-
-._ffzcdL {
   width: 100px;
 }
 
 <div>
   <div
-    class="_ffzcdL _SOQhS _jbMiSP _kSJetr _bVZaHo _Fgykb scid-PJLV"
+    class="sx03kze sx03kze6obnf--css"
   >
     BOX
   </div>

src/components/button/Button.tsx

@@ -1,8 +1,7 @@
-import { StitchesProps } from '@stitches/react'
+import { StitchesVariants } from '@stitches/react'
 import * as React from 'react'
 
 import { styled } from '~/stitches'
-import { Override } from '~/utilities/types'
 
 const getButtonOutlineVariant = (baseColor: string, interactColor: string) => ({
   color: baseColor,
@@ -11,7 +10,7 @@ const getButtonOutlineVariant = (baseColor: string, interactColor: string) => ({
     color: interactColor,
     backgroundColor: 'white'
   },
-  ':active': {
+  '&:active': {
     color: baseColor
   },
   '&[disabled]': {
@@ -22,15 +21,15 @@ const getButtonOutlineVariant = (baseColor: string, interactColor: string) => ({
 const getButtonSolidVariant = (baseColor: string, interactColor: string) => ({
   backgroundColor: baseColor,
   color: 'white',
-  '&[disabled]': {
-    backgroundColor: '$tonal300',
-    color: '$tonal600'
-  },
   '&:not([disabled]):hover, &:not([disabled]):focus': {
     backgroundColor: interactColor
   },
-  ':active': {
+  '&:active': {
     backgroundColor: baseColor
+  },
+  '&[disabled]': {
+    backgroundColor: '$tonal300',
+    color: '$tonal600'
   }
 })
 
@@ -79,62 +78,62 @@ const StyledButton = styled('button', {
         '&[disabled]': { backgroundColor: 'white' }
       }
     }
-  }
-})
+  },
 
-// Appearance Solid
-StyledButton.compoundVariant(
-  { theme: 'primary', appearance: 'solid' },
-  getButtonSolidVariant('$primary500', '$primary900')
-)
-StyledButton.compoundVariant(
-  { theme: 'secondary', appearance: 'solid' },
-  getButtonSolidVariant('$secondary500', '$secondary700')
-)
-StyledButton.compoundVariant(
-  { theme: 'tertiary', appearance: 'solid' },
-  getButtonSolidVariant('$tertiary500', '$tertiary700')
-)
-StyledButton.compoundVariant(
-  { theme: 'success', appearance: 'solid' },
-  getButtonSolidVariant('$success', '$successDark')
-)
-StyledButton.compoundVariant(
-  { theme: 'warning', appearance: 'solid' },
-  getButtonSolidVariant('$warning', '$warningDark')
-)
-StyledButton.compoundVariant(
-  { theme: 'danger', appearance: 'solid' },
-  getButtonSolidVariant('$danger', '$dangerDark')
-)
+  compoundVariants: [
+    // Appearance Solid
+    {
+      theme: 'primary',
+      appearance: 'solid',
+      css: getButtonSolidVariant('$primary500', '$primary900')
+    },
+    {
+      theme: 'secondary',
+      appearance: 'solid',
+      css: getButtonSolidVariant('$secondary500', '$secondary700')
+    },
+    {
+      theme: 'tertiary',
+      appearance: 'solid',
+      css: getButtonSolidVariant('$tertiary500', '$tertiary700')
+    },
+    {
+      theme: 'success',
+      appearance: 'solid',
+      css: getButtonSolidVariant('$success', '$successDark')
+    },
+    {
+      theme: 'warning',
+      appearance: 'solid',
+      css: getButtonSolidVariant('$warning', '$warningDark')
+    },
+    {
+      theme: 'danger',
+      appearance: 'solid',
+      css: getButtonSolidVariant('$danger', '$dangerDark')
+    },
 
-// Appearance Outline
-StyledButton.compoundVariant(
-  { theme: 'primary', appearance: 'outline' },
-  getButtonOutlineVariant('$primary500', '$primary900')
-)
-StyledButton.compoundVariant(
-  { theme: 'secondary', appearance: 'outline' },
-  getButtonOutlineVariant('$secondary500', '$secondary900')
-)
-StyledButton.compoundVariant(
-  { theme: 'tertiary', appearance: 'outline' },
-  getButtonOutlineVariant('$tertiary500', '$tertiary700')
-)
+    // Appearance Outline
+    {
+      theme: 'primary',
+      appearance: 'outline',
+      css: getButtonOutlineVariant('$primary500', '$primary900')
+    },
+    {
+      theme: 'secondary',
+      appearance: 'outline',
+      css: getButtonOutlineVariant('$secondary500', '$secondary900')
+    },
+    {
+      theme: 'tertiary',
+      appearance: 'outline',
+      css: getButtonOutlineVariant('$tertiary500', '$tertiary700')
+    }
+  ]
+})
 
-type ButtonProps = Override<
-  StitchesProps<typeof StyledButton>,
-  {
-    theme?:
-      | 'primary'
-      | 'secondary'
-      | 'tertiary'
-      | 'success'
-      | 'warning'
-      | 'danger'
-    appearance?: 'solid' | 'outline'
-  }
->
+type ButtonProps = React.ComponentPropsWithoutRef<typeof StyledButton> &
+  StitchesVariants<typeof StyledButton>
 
 export const Button: React.FC<ButtonProps> = ({
   theme = 'primary',