migrate styled-system

.storybook/main.js

@@ -29,7 +29,8 @@ module.exports = {
               // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
               require.resolve('babel-plugin-remove-graphql-queries'),
               // use babel-plugin-react-docgen to ensure PropTables still appear
-              require.resolve('babel-plugin-react-docgen')
+              require.resolve('babel-plugin-react-docgen'),
+              require.resolve('babel-plugin-styled-components')
             ]
           }
         }

.storybook/preview.js

@@ -1,9 +1,8 @@
-import { ThemeProvider } from 'styled-components'
 import { LocationProvider } from '@gatsbyjs/reach-router'
-
+import { ThemeProvider } from 'styled-components'
 import Flex from 'components/elements/Flex'
+import themeSpec, { theme } from 'theme'
 import React from 'react'
-import theme from 'theme'
 
 import '@storybook/addon-console'
 
@@ -24,13 +23,15 @@ window.___navigate = pathname => {
 
 export const decorators = [
   Story => (
-    <ThemeProvider theme={theme}>
+    <ThemeProvider theme={themeSpec}>
       <LocationProvider>
         <Flex
-          p={3}
-          justiContent='center'
-          alignItems='baseline'
-          flexDirection='column'
+          css={theme({
+            p: 3,
+            justifyContent: 'center',
+            alignItems: 'baseline',
+            flexDirection: 'column'
+          })}
         >
           <Story />
         </Flex>

package.json

@@ -109,8 +109,10 @@
     "@stripe/react-stripe-js": "~2.4.0",
     "@stripe/stripe-js": "~2.2.2",
     "@styled-system/prop-types": "~5.1.5",
+    "@techstack/styled-system": "~1.0.341",
     "@tippyjs/react": "~4.2.6",
     "@vercel/analytics": "~1.2.2",
+    "babel-plugin-styled-components": "~2.1.4",
     "beauty-error": "~1.2.18",
     "cssnano": "~6.0.2",
     "cssnano-preset-advanced": "~6.0.2",
@@ -135,7 +137,6 @@
     "mdx-scoped-runtime": "~0.8.0",
     "microsoft-capitalize": "~1.0.5",
     "normalize.css": "~8.0.1",
-    "palx": "~1.0.3",
     "path-browserify": "~1.0.1",
     "polished": "~4.3.1",
     "postcss": "~8.4.32",
@@ -152,7 +153,7 @@
     "react-twitter-widgets": "~1.11.0",
     "remark-slug": "~7.0.1",
     "sass": "~1.70.0",
-    "styled-components": "5",
+    "styled-components": "~6.1.6",
     "styled-is": "~1.3.0",
     "styled-system": "~5.1.5",
     "swr": "~2.2.4",

src/components/elements/BackgroundSlider/BackgroundSlider.js

@@ -16,7 +16,7 @@ const SliderContainerWrapper = styled('div')`
   animation-direction: ${props => props.animationDirection};
 `
 
-const SliderContainerChildren = styled.div`
+const SliderContainerChildren = styled('div')`
   display: inline-block;
 `
 

src/components/elements/BackgroundSlider/BackgroundSlider.stories.js

@@ -1,16 +1,17 @@
-import React from 'react'
-import { Story } from 'story'
+import { Microlink } from 'components/logos'
 import { storiesOf } from '@storybook/react'
+import { theme, transition } from 'theme'
 import styled from 'styled-components'
+import range from 'lodash/range'
+import { Story } from 'story'
+import React from 'react'
+
 import {
   Flex,
   Box,
   BackgroundSlider,
   BackgroundSliderContainer
 } from 'components/elements'
-import { transition } from 'theme'
-import range from 'lodash/range'
-import { Microlink } from 'components/logos'
 
 const NoWrap = styled(Flex)`
   white-space: nowrap;
@@ -29,13 +30,9 @@ const LogoWrap = styled(Box)`
   &:hover {
     opacity: 0.8;
   }
+  ${theme({ px: 4, display: 'inline-block' })}
 `
 
-LogoWrap.defaultProps = {
-  display: 'inline-block',
-  px: 4
-}
-
 const code = `
 import {
   BackgroundSliderContainer,
@@ -58,7 +55,7 @@ export default () => (
 
 storiesOf('Elements', module).add('BackgroundSlider', () => (
   <Story name='BackgroundSlider' code={code}>
-    <BackgroundSliderContainer py={0} px={0} maxWidth='100%'>
+    <BackgroundSliderContainer css={theme({ py: 0, px: 0, maxWidth: '100%' })}>
       <BackgroundSlider duration={80} animationDirection='reverse'>
         {range(30).map(index => (
           <LogoWrap key={index}>

src/components/elements/Badge/Badge.js

@@ -1,23 +1,28 @@
 import styled from 'styled-components'
+import { theme } from 'theme'
+
 import Text from '../Text'
 
 const Badge = styled(Text)`
   padding: 2px 12px;
   text-transform: uppercase;
   position: relative;
   vertical-align: middle;
+
+  ${theme({
+    letterSpacing: 2,
+    border: '0.5px solid',
+    fontSize: '12px',
+    fontWeight: 'bold',
+    bg: 'secondary',
+    borderRadius: 5,
+    fontFamily: 'sans',
+    color: 'white'
+  })}
 `
 
 Badge.defaultProps = {
-  letterSpacing: 2,
-  border: '0.5px solid',
-  as: 'span',
-  fontSize: '12px',
-  fontWeight: 'bold',
-  bg: 'secondary',
-  borderRadius: 5,
-  fontFamily: 'sans',
-  color: 'white'
+  as: 'span'
 }
 
 export default Badge

src/components/elements/Box.js

@@ -1,63 +1,17 @@
 import {
-  compose,
-  space,
+  border,
   color,
-  borders,
-  lineHeight,
-  width,
-  flex,
-  order,
-  alignSelf,
+  compose,
+  layout,
   position,
-  fontSize,
-  variant,
-  textAlign,
-  maxWidth,
-  boxShadow,
-  display,
-  height
-} from 'styled-system'
+  space,
+  variant
+} from '@techstack/styled-system'
 
 import styled from 'styled-components'
-import propTypes from '@styled-system/prop-types'
 
 const Box = styled('div')(
-  compose(
-    space,
-    textAlign,
-    maxWidth,
-    boxShadow,
-    display,
-    borders,
-    lineHeight,
-    height,
-    width,
-    fontSize,
-    color,
-    flex,
-    order,
-    alignSelf,
-    position,
-    variant({ key: 'boxStyles' })
-  )
+  compose(border, color, layout, position, space, variant({ key: 'button' }))
 )
 
-Box.propTypes = {
-  ...propTypes.space,
-  ...propTypes.textAlign,
-  ...propTypes.maxWidth,
-  ...propTypes.boxShadow,
-  ...propTypes.border,
-  ...propTypes.display,
-  ...propTypes.width,
-  ...propTypes.height,
-  ...propTypes.fontSize,
-  ...propTypes.color,
-  ...propTypes.flex,
-  ...propTypes.order,
-  ...propTypes.alignSelf,
-  ...propTypes.position,
-  ...propTypes.lineHeight
-}
-
 export default Box

src/components/elements/Button/Button.js

@@ -1,37 +1,78 @@
-import styled, { css } from 'styled-components'
-import { createCssState } from 'helpers/style'
-import { colors } from 'theme'
+import { transition, theme as themeProp, colors, space, gradient } from 'theme'
+import styled from 'styled-components'
+import Box from '../Box'
 
-import ButtonBase from './ButtonBase'
+const getVariant = ({ theme, variant }) => {
+  const { background = 'link', color = 'white' } =
+    theme.variants.buttons[variant] || {}
+  return { background, color }
+}
 
-export const hoverStyle = createCssState({
-  selector: '&:hover:not([disabled])',
-  state: 'hover',
-  css: css`
-    background-color: ${({ color }) => colors[color]};
-    color: ${({ bg }) => colors[bg]};
-    box-shadow: 0 0 0 1px ${({ bg }) => colors[bg]};
-  `
-})
+export const hoverStyle = ({ theme, variant }) => {
+  const { background, color } = getVariant({ theme, variant })
+  return {
+    cursor: 'pointer',
+    background: color,
+    color: background,
+    boxShadow: `0 0 0 1px ${colors[background]}`
+  }
+}
 
-export const disabledStyle = createCssState({
-  selector: '&:disabled',
-  state: 'disabled',
-  css: css`
+const Button = styled(Box)`
+  transition: background-color ${transition.medium}, color ${transition.medium},
+    box-shadow ${transition.medium};
+  appearance: none;
+  display: inline-block;
+  text-align: center;
+  text-decoration: none;
+  vertical-align: middle;
+  white-space: nowrap;
+  outline: 0;
+
+  ${({ variant }) =>
+    variant === 'gradient' &&
+    `
     &&& {
-      opacity: 0.8;
-      cursor: not-allowed;
-      background-color: ${colors.black05};
-      color: ${colors.black50};
-      cursor: not-allowed;
-      box-shadow: 0 0 0 1px ${colors.black20};
-      .path {
-        stroke: ${colors.black30};
+      transition: filter ${transition.medium};
+      background: ${gradient};
+      padding: ${space[1]};
+      &:hover {
+        box-shadow: none;
+        filter: hue-rotate(40deg);
       }
     }
-  `
-})
+  `}
+
+  ${({ theme, variant }) => {
+    const { background, color } = getVariant({ theme, variant })
+    return themeProp({
+      fontFamily: 'sans',
+      fontSize: 1,
+      fontWeight: 'bold',
+      px: 3,
+      py: 2,
+      border: 0,
+      borderRadius: 2,
+      background,
+      color,
+      boxShadow: variant === 'white' ? `0 0 0 1px ${color}` : undefined,
+      _hover: hoverStyle({ theme, variant }),
+      _disabled: {
+        opacity: 0.8,
+        cursor: 'not-allowed',
+        background: colors.black05,
+        color: colors.black50,
+        boxShadow: `0 0 0 1px ${colors.black20}`,
+        '.path': {
+          stroke: colors.black30
+        }
+      }
+    })
+  }}
+`
 
-const Button = styled(ButtonBase)(hoverStyle, disabledStyle)
+Button.defaultProps = {
+  as: 'button'
+}
 
 export default Button