New variant API

packages/components/package.json

@@ -10,11 +10,7 @@
   },
   "dependencies": {
     "@emotion/core": "^10.0.0",
-    "@emotion/styled": "^10.0.0",
-    "@styled-system/color": "^5.1.2",
-    "@styled-system/should-forward-prop": "^5.1.2",
-    "@styled-system/space": "^5.1.2",
-    "@theme-ui/css": "^0.4.0-alpha.0"
+    "@theme-ui/core": "^0.4.0-alpha.0"
   },
   "peerDependencies": {
     "react": "^16.8.0"

packages/components/src/Alert.js

@@ -1,20 +1,26 @@
+/** @jsx jsx */
+import { jsx } from '@theme-ui/core'
 import React from 'react'
+import { useVariant } from './util'
 import Box from './Box'
 
-export const Alert = React.forwardRef((props, ref) => (
-  <Box
-    ref={ref}
-    {...props}
-    __themeKey="alerts"
-    __css={{
-      display: 'flex',
-      alignItems: 'center',
-      px: 3,
-      py: 2,
-      fontWeight: 'bold',
-      color: 'white',
-      bg: 'primary',
-      borderRadius: 4,
-    }}
-  />
-))
+export const Alert = React.forwardRef(function Alert({ variant, ...props }, ref) {
+  const variantStyle = useVariant('alerts', variant)
+  return (
+    <Box
+      ref={ref}
+      {...props}
+      __css={{
+        display: 'flex',
+        alignItems: 'center',
+        px: 3,
+        py: 2,
+        fontWeight: 'bold',
+        color: 'white',
+        bg: 'primary',
+        borderRadius: 4,
+        ...variantStyle,
+      }}
+    />
+  )
+})

packages/components/src/AspectImage.js

@@ -1,15 +1,22 @@
+/** @jsx jsx */
+import { jsx } from '@theme-ui/core'
 import React from 'react'
 import { AspectRatio } from './AspectRatio'
 import { Image } from './Image'
 
-export const AspectImage = React.forwardRef(({ ratio, ...props }, ref) => (
-  <AspectRatio ratio={ratio}>
-    <Image
-      ref={ref}
-      {...props}
-      __css={{
-        objectFit: 'cover',
-      }}
-    />
-  </AspectRatio>
-))
+export const AspectImage = React.forwardRef(function AspectImage(
+  { ratio, ...props },
+  ref
+) {
+  return (
+    <AspectRatio ratio={ratio}>
+      <Image
+        ref={ref}
+        {...props}
+        __css={{
+          objectFit: 'cover',
+        }}
+      />
+    </AspectRatio>
+  )
+})

packages/components/src/AspectRatio.js

@@ -1,16 +1,21 @@
+/** @jsx jsx */
+import { jsx } from '@theme-ui/core'
 import React from 'react'
 import Box from './Box'
 
-export const AspectRatio = React.forwardRef(
-  ({ ratio = 4 / 3, children, ...props }, ref) => (
+export const AspectRatio = React.forwardRef(function AspectRatio(
+  { ratio = 4 / 3, children, ...props },
+  ref
+) {
+  return (
     <Box
       ref={ref}
-      sx={{
+      __css={{
         position: 'relative',
         overflow: 'hidden',
       }}>
       <Box
-        sx={{
+        __css={{
           width: '100%',
           height: 0,
           paddingBottom: 100 / ratio + '%',
@@ -29,4 +34,4 @@ export const AspectRatio = React.forwardRef(
       </Box>
     </Box>
   )
-)
+})

packages/components/src/Avatar.js

@@ -1,15 +1,22 @@
+/** @jsx jsx */
+import { jsx } from '@theme-ui/core'
 import React from 'react'
 import { Image } from './Image'
 
-export const Avatar = React.forwardRef(({ size = 48, ...props }, ref) => (
-  <Image
-    ref={ref}
-    width={size}
-    height={size}
-    variant="avatar"
-    {...props}
-    __css={{
-      borderRadius: 9999,
-    }}
-  />
-))
+export const Avatar = React.forwardRef(function Avatar(
+  { size = 48, ...props },
+  ref
+) {
+  return (
+    <Image
+      ref={ref}
+      width={size}
+      height={size}
+      variant="avatar"
+      {...props}
+      __css={{
+        borderRadius: 9999,
+      }}
+    />
+  )
+})

packages/components/src/Badge.js

@@ -1,21 +1,30 @@
+/** @jsx jsx */
+import { jsx } from '@theme-ui/core'
 import React from 'react'
 import Box from './Box'
+import { useVariant } from './util'
 
-export const Badge = React.forwardRef((props, ref) => (
-  <Box
-    ref={ref}
-    {...props}
-    __themeKey="badges"
-    __css={{
-      display: 'inline-block',
-      verticalAlign: 'baseline',
-      fontSize: 0,
-      fontWeight: 'bold',
-      whiteSpace: 'nowrap',
-      px: 1,
-      borderRadius: 2,
-      color: 'white',
-      bg: 'primary',
-    }}
-  />
-))
+export const Badge = React.forwardRef(function Badge(
+  { variant, ...props },
+  ref
+) {
+  const variantStyle = useVariant('badges', variant)
+  return (
+    <Box
+      ref={ref}
+      {...props}
+      __css={{
+        display: 'inline-block',
+        verticalAlign: 'baseline',
+        fontSize: 0,
+        fontWeight: 'bold',
+        whiteSpace: 'nowrap',
+        px: 1,
+        borderRadius: 2,
+        color: 'white',
+        bg: 'primary',
+        ...variantStyle,
+      }}
+    />
+  )
+})

packages/components/src/Box.js

@@ -1,33 +1,16 @@
-import styled from '@emotion/styled'
-import { css, get } from '@theme-ui/css'
-import { createShouldForwardProp } from '@styled-system/should-forward-prop'
-import space from '@styled-system/space'
-import color from '@styled-system/color'
+/** @jsx jsx */
+import { jsx } from '@theme-ui/core'
 
-const shouldForwardProp = createShouldForwardProp([
-  ...space.propNames,
-  ...color.propNames,
-])
-
-const sx = props => css(props.sx)(props.theme)
-const base = props => css(props.__css)(props.theme)
-const variant = ({ theme, variant, __themeKey = 'variants' }) =>
-  css(get(theme, __themeKey + '.' + variant, get(theme, variant)))
-
-export const Box = styled('div', {
-  shouldForwardProp,
-})(
-  {
-    boxSizing: 'border-box',
-    margin: 0,
-    minWidth: 0,
-  },
-  base,
-  variant,
-  space,
-  color,
-  sx,
-  props => props.css
-)
+export const Box = ({ as = 'div', __css, ...props }) => {
+  return jsx(as, {
+    sx: {
+      boxSizing: 'border-box',
+      margin: 0,
+      minWidth: 0,
+      ...__css,
+    },
+    ...props,
+  })
+}
 
 export default Box

packages/components/src/Button.js

@@ -1,26 +1,34 @@
+/** @jsx jsx */
+import { jsx } from '@theme-ui/core'
 import React from 'react'
 import Box from './Box'
+import { useVariant } from './util'
 
-export const Button = React.forwardRef((props, ref) => (
-  <Box
-    ref={ref}
-    as="button"
-    variant="primary"
-    {...props}
-    __themeKey="buttons"
-    __css={{
-      appearance: 'none',
-      display: 'inline-block',
-      textAlign: 'center',
-      lineHeight: 'inherit',
-      textDecoration: 'none',
-      fontSize: 'inherit',
-      px: 3,
-      py: 2,
-      color: 'white',
-      bg: 'primary',
-      border: 0,
-      borderRadius: 4,
-    }}
-  />
-))
+export const Button = React.forwardRef(function Button(
+  { variant = 'primary', ...props },
+  ref
+) {
+  const variantStyle = useVariant('buttons', variant)
+  return (
+    <Box
+      ref={ref}
+      as="button"
+      {...props}
+      __css={{
+        appearance: 'none',
+        display: 'inline-block',
+        textAlign: 'center',
+        lineHeight: 'inherit',
+        textDecoration: 'none',
+        fontSize: 'inherit',
+        px: 3,
+        py: 2,
+        color: 'white',
+        bg: 'primary',
+        border: 0,
+        borderRadius: 4,
+        ...variantStyle,
+      }}
+    />
+  )
+})

packages/components/src/Card.js

@@ -1,6 +1,13 @@
+/** @jsx jsx */
+import { jsx } from '@theme-ui/core'
 import React from 'react'
 import Box from './Box'
+import { useVariant } from './util'
 
-export const Card = React.forwardRef((props, ref) => (
-  <Box ref={ref} variant="primary" {...props} __themeKey="cards" />
-))
+export const Card = React.forwardRef(function Card(
+  { variant = 'primary', ...props },
+  ref
+) {
+  const variantStyle = useVariant('cards', variant)
+  return <Box ref={ref} {...props} sx={variantStyle} />
+})

packages/components/src/Checkbox.js

@@ -1,6 +1,9 @@
+/** @jsx jsx */
+import { jsx } from '@theme-ui/core'
 import React from 'react'
 import Box from './Box'
 import SVG from './SVG'
+import { useVariant } from './util'
 
 const CheckboxChecked = props => (
   <SVG {...props}>
@@ -37,30 +40,32 @@ const CheckboxIcon = props => (
   </React.Fragment>
 )
 
-export const Checkbox = React.forwardRef(
-  ({ className, sx, variant = 'checkbox', ...props }, ref) => (
-    <Box>
+export const Checkbox = React.forwardRef(function Checkbox(
+  { className, variant = 'checkbox', ...props },
+  ref
+) {
+  const variantStyle = useVariant('forms', variant)
+  return (
+    <Box sx={variantStyle.container}>
       <Box
         ref={ref}
         as="input"
         type="checkbox"
         {...props}
-        sx={{
+        __css={{
           position: 'absolute',
           opacity: 0,
           zIndex: -1,
           width: 1,
           height: 1,
           overflow: 'hidden',
+          ...(variantStyle.input && { ...variantStyle.input }),
         }}
       />
       <Box
         as={CheckboxIcon}
         aria-hidden="true"
-        __themeKey="forms"
-        variant={variant}
         className={className}
-        sx={sx}
         __css={{
           mr: 2,
           borderRadius: 4,
@@ -72,8 +77,9 @@ export const Checkbox = React.forwardRef(
             color: 'primary',
             bg: 'highlight',
           },
+          ...(variantStyle.icon && { ...variantStyle.icon }),
         }}
       />
     </Box>
   )
-)
+})