twind-react icon indicating copy to clipboard operation
twind-react copied to clipboard

Add support for mixin with twind/style, the same as in stitches

Open joseDaKing opened this issue 4 years ago • 0 comments

Add support for mixin with twind/style, the same as in stitches

import { style } from "twind/style";

const blockMixin = style({
  base: "block w-full",
  variants: {
    inline: "inline-block w-auto"
  }
});

const Button = const Button = styled("button", blockMixin, {
  base: `
    appearance-none border-none bg-transparent
    rounded-full px-2.5
  `,

  variants: {
    size: {
      sm: `text-sm h-6`,
      md: `text-base h-9`,
    },

    variant: {
      gray: `
        bg-gray-500
        hover:bg-gray-600
      `,
      primary: `
        text-white bg-purple-500
        hover:bg-purple-600
      `,
    },
    outlined: {
      true: `bg-transparent ring-1`,
    },
  },

  defaults: {
    variant: "gray",
    size: "sm",
  },

  matches: [
    {
      variant: "gray",
      outlined: true,
      use: `ring-gray-500`,
    },
    {
      variant: "primary",
      outlined: true,
      use: `text-purple-500 ring-gray-500 hover:text-white`,
    },
  ],
})

joseDaKing avatar Oct 19 '21 12:10 joseDaKing