twind/style matches property should be able to be a function that takes in the variants and outputs a tw class names as a string

[joseDaKing]

twind/style matches property should be able to be a function that takes in the variants and outputs a tw class names as a string. As of now, I cannot concat strings to form tw class names. The variants props that are set to false should indicate that they would be derived in the matches property.

const button = style({
  base: "",
  variants: {
    size: {
      sm: "",
      md: "",
      lg: ""
    },
    color: {
      secondary: false,
      primary: false,
      danger: false,
      success: false
    },
    variant: {
      filled: false,
      outlined: "inset ring-2 ",
      text: false
    },
    block: {
      true: ""
    }
  },
  defaults: {
    variant: "filled",
    color: "primary"
    size: "sm",
  },
  matches: ({ color, variant }) => {
    const colors = {
      secondary: "red",
      primary: "blue",
      danger: "yellow",
      success: "green"
    };

    const currentColor = colors[color];

    const colorLight = `${currentColor}-100`;

    const colorStrong = `${currentColor}-200`;
   
    const styles = {
      filled: `bg-${currentColor} hover:bg-${currentColor} text-white`,
      outlined: `ring-${currentColor} text-${currentColor} hover:text-${currentColor}`,
      text: `text-${currentColor} hover:text-${currentColor}`
    };
  },
})