how can I make my component variants editable throughout MyPlugin options?

[yaman3bd]

I am building a component library and I want to use Tailwind Variants I am working on allowing the user to add his custom theme not only dark/light so the variants must be editable through the plugin options but I could not find out how can I make that, it's not mentioned in the docs and I did not find any relevant example
also, I want a way to allow the user to add his own custom variants like:
the default variants for the button: outline, soft, etc...
I want a way to allow the user to add a new variant that is not supported by my library

any idea on how could I do what I want?

[jrgarciadev]

Hey @yaman3bd it is out of the tailwind-variants scope, I recommend you to take a look at this library, https://github.com/L-Blondy/tw-colors

[yaman3bd]

thanks a lot for your recommendation, but I do not what to make the themes I think I did not explain what I want very well,
I want to use tailwind-variants to style my components let's take the button component as an example with the default variant: ghost
so I would make my setup like this:

import { tv } from 'tailwind-variants';
 
const button = tv({
  variants: {
    variant: {
      ghost: "some-classes",
    },
  }
 });
 
return (
  <button className={button({ variant: 'ghost' })}>Click me</button>
)

and maybe the styles are totally different from my default design system so I want to allow my library consumer to make edits to the ghost variant itself like this:

/** @type {import('tailwindcss').Config} */
export default {
  plugins: [
    myPluginCore(() => ({
      btn: {
        variants: {
          ghost: "some-new-classes"
        }
      }
    }))
  ]
};

and I want to allow the user to add new variants like:

/** @type {import('tailwindcss').Config} */
export default {
  plugins: [
    myPluginCore(() => ({
      btn: {
        variants: {
          ghost: "some-new-classes",
+        "my-new-variant": "some-variant"
        }
      }
    }))
  ]
};

so in this case, how can I tell tailwind-variants to use the modified variants instead of the defaults?
and expose the newly added variants to tailwind-variants so I can say:

<MyButton variant="my-new-variant"/>

and show the component with the new variant?

I could make what I want using tailwindcss plugin API , but I am looking into smth that I could use tailwind-variants API to get the advantage of: base, compoundVariants, defaultVariants, slots etc..