A new way to style components 💅

Consistent theme based CSS

const Button = styled.a`
  /* This renders the buttons above... Edit me! */
  border: 2; /* ⟶ 2px solid */
  color: white; /* ⟶ theme.colors.white */
  border-color: primary; /* ⟶ theme.colors.primary */
  border-radius: medium; /* ⟶ theme.radii.medium */
  padding: 2 4; /* ⟶ theme.space.* */
  margin: 5 2; /* ⟶ theme.space.* */
  background-color: primary; /* ⟶ theme.colors.primary */
  display: inline-block;
  transition: background-color 300ms, color 300ms;

  &:hover {
    color: white;
    background-color: primaryLight;
  }

  ${p => p.secondary && css`
    color: primary;
    background-color: transparent;

    &:hover {
      color: white;
      background-color: primary;
    }
  `}
`

const theme = {
  colors: {
    primary: 'palevioletred',
    primaryLight: 'pink',
    secondary: 'gray'
  },
  radii: {
    medium: 3,
  }
}

render(
  <ThemeProvider theme={theme}>
    <>
      <Button
        href="https://github.com/smooth-code/xstyled"
        target="_blank"
        rel="noopener"
      >
        GitHub
      </Button>
      <Button
        as={Link}
        variant="secondary"
        to="/docs/getting-started/"
        secondary
      >
        Getting Started
      </Button>
    </>
  </ThemeProvider>
)