Include data-flux-variant in rendered HTML

[TimBroddin]

Hi,

Thanks for this amazing library 🙏 While looking to customize the button with a different background color, I discovered that the suggested code applies this to all button variations (including the outline).

[data-flux-button] {
    @apply bg-indigo-600 dark:bg-indigo-400 hover:bg-indigo-700 dark:hover:bg-indigo-300;
}

As a workaround I published the button component, and edited it to output the variant as well:

    <flux:button-or-link :$type :attributes="$attributes->class($classes)" data-flux-button data-flux-variant="{{ $variant }}">

This way I can style only the primary buttons as:

[data-flux-button][data-flux-variant="primary"] {
    @apply bg-indigo-600 dark:bg-indigo-400 hover:bg-indigo-700 dark:hover:bg-indigo-300;
}

Would it be an idea to include this functionality in every component of Flux Pro? This (or having CSS variables for styling) would make customization much easier.