Variants
sapegin opened this issue · comments
Is there a way to define variants like in styled-system?
export const Text = styled.p<Props>(
{
boxSizing: 'border-box',
},
variant({
scale: 'textStyles',
prop: 'variant',
// Trigger the new styled-system variants API
// Actual variant to be defined in site-specific themes
variants: { _: {} },
}),
space,
layout,
typography,
color,
border,
shadow
);
So you could define multiple props in the theme file:
const theme = {
textStyles: {
base: {
color: 'base',
fontFamily: 'base',
fontWeight: 'base',
lineHeight: 'base',
letterSpacing: 'base',
fontSize: 'm',
},
large: {
color: 'base',
fontFamily: 'base',
fontWeight: 'base',
lineHeight: 'base',
letterSpacing: 'base',
fontSize: 'l',
},
},
}
And use the component like this:
<Text variant="large">Hello</Text>
Not at the moment. That's probably next for this library, and I've been thinking about incorporating some of the API innovations from newer libraries, like Stitches, that supports compound variants.