Add variants to jsx source

Thanks for the great library 👍

Is your feature request related to a problem? Please describe. Expose the variant api via custom jsxImport source without having to handle it directly in non-theme-ui components.

Describe the solution you’d like I think the variant api is pretty great. Would you be open to add it into the jsx parser?

That is, for components that are built outside of theme-ui, in addition to sx and css, it would be helpful if the import source would also handle variant. If I had access to the handler from Box

const variant = ({ theme, variant, __themeKey = 'variants' }) =>
  css(get(theme, __themeKey + '.' + variant, get(theme, variant)))

it would allow me to include it for free through my codebase

export interface MyCustomProps extends ExistingProps {
    sx?: SxProp;
    variant?: string;
}

Describe alternatives you’ve considered No alternatives, just an api that makes non-theme-ui components more theme-ui-like

Additional context In my case, I am introducing theme-ui into an existing React codebase, and this would facilitate adoption with a shared api by only adding the requisite comment at the top of the file.

[hasparus]

Hey nrakochy. Thanks for the issue!

I’d like to know what @lachlanjc thinks, but I’d rather not add anything like this to the public API.

1. There is an alternative: You can use

sx={{ variant: 'my-variant' }}

1. variant, unlike sx is a pretty common word to appear in React props. I would rather not put my hands on it and proclaim that all variant props will now belong to Theme UI. We don’t have to look far for a problem — a global variant would conflict with components in @theme-ui/components (The behaviour of <Button variant={} /> would be different depending on JSX pragma being set or not.)

[lachlanjc]

Yep, we’re happy to link to other libraries on the https://theme-ui.com/resources page!