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: 8 24; /* ⟶ theme.space.* */
margin: 48 8; /* ⟶ 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>
)