CSS Vars with System Props

css-vars-system-props.js

// Box takes in props that then assigns each responsive prop to the appropriate breakpoint
// Negates needing to update breakpoints based on theme within the styled-component
const Box = styled.div`
  // base styles

  @media screen and (min-width: ${props => props.breakpoints.breakpointOne}) {
    // other styles
  }

  @media screen and (min-width: ${props => props.breakpoints.breakpointTwo}) {
    // other styles
  }
`

const WrappedBox = props => (
  <Box breakpoints={{breakpointOne: '25em', breakpointTwo: '32em'}} {...props} />
)

  // <Box color="$blue200" borderRadius="$pill" />
  // $blue200 maps to var(--color-blue200)

const theme = {
  colors: {
    blue200: 'blue'
  },
  radii: {
    small: 'small',
    large: 'large',
    pill: 'pill'
  }
}

const cssVars = makeVars(theme);
// cssVars:
// `
// --color-blue200: blue;
// --radii-small: small;
// --radii-large: large;
// --radii-pill: pill;
// `