Component Local Variants

[kennetpostigo]

Hi 👋,

I started using dripsy recently and I saw variants as part of the theme API and I thought that was tight! However, one thing that I think would also add extra flexibility is the ability to create component-local variants using styled().

Something like:

const Button = styled('button', {
  // base styles
  variants: {
    color: {
      violet: {
        backgroundColor: 'blueviolet',
        color: 'white',
        '&:hover': {
          backgroundColor: 'darkviolet',
        },
      },
      gray: {
        backgroundColor: 'gainsboro',
        '&:hover': {
          backgroundColor: 'lightgray',
        },
      },
    },
  },
});

// Used somewhere like: 
<Button color="violet">Button</Button>;

Stitches has a wonderful variants api, that a few styling libraries have copied over like vanilla-extract, etc. I think it would be nice to have something like this in dripsy too.

Is this something the dripsy team might consider adding in the future?

[nandorojo]

Hey, yeah this is a good idea! Currently we have this API:

styled(View)((props: { color?: 'violet' }) => ({
  ...(props.color == 'violet' && { bg: 'blueviolet' })
}))

But I suppose a more dedicated variants API could be useful too.