Variants

[sapegin]

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>

[roginfarrer]

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.