Added “data-variant” attribute to components

[fabioserembe]

Hello everyone!!!

I posted this PR that adds the data-variant attribute to Flux (free) components.
This PR solves the [#393] discussion that I had started a couple of days ago..

The problem

I found myself in a situation where I had to apply a style to buttons (selectable via the data-flux-button attribute), but this style was being applied globally without distinction of the button variant.

So the idea was to add, where possible, a data-variant attribute that could come in handy in case you want to apply a certain style only to certain variants and not to all of them.

Video example

data-variant.example.mov

Code

<flux:button variant="primary" class="teal">Primary</flux:button>
<flux:button variant="outline" class="teal">Outline</flux:button>

[data-flux-button][data-variant="primary"].teal { @apply !bg-teal-500 !text-white hover:!bg-teal-400; }
[data-flux-button][data-variant="outline"].teal { @apply !bg-transparent !border-teal-500 !text-teal-500 hover:!border-teal-400; }

I'm excited to hear your thoughts!! What do you think? Can it be useful?

Thank you so much for the incredible work you do!!!

Regards,
Fabio

[seabasss]

I was just going to suggest this! Excellent!

[nicolaslefresne]

Very very useful change, thank you, can't wait to see it implemented!

[helderneves91]

Would be very happy with this new feature. To be consistent, it could have the badge color names.

[fabio-algomera]

Would be very happy with this new feature. To be consistent, it could have the badge color names.

Theoretically, this approach should be taken with all components that have a variant. Also in Pro version.

[helderneves91]

@calebporzio have you thought about this?

In a project I have a button that opens a modal with reports.
Would be awesome if the button is red if we don't have reports and green if we have reports.

UX would be greatly improved.

[nicolaslefresne]

In my understanding it would also be the only way to easily add a layer of color customization to the buttons?
I love the style of flux components, but I really would like to add a twist of color on primary ones. Having access to data-variant would allow to set specific colors for them.

[joffreypersia]

Please @calebporzio can you consider adding attribute variant to the DOM so we can customize the colors more granularly ?

[edwinvdpol]

Can't we use TailwindCSS 4.0 when it's stable to customize the color scheme via theme variables?

What if the CSS classes are named for example text-flux-100 or text-primary-100 (based on variant, or other unique 'identifier' other than zinc), you could do something like below in Tailwind CSS v4 to overwrite the color(s):

@theme {
  --color-primary-100: oklch(0.99 0 0);
  --color-primary-200: oklch(0.98 0.04 113.22);
  --color-primary-300: oklch(0.94 0.11 115.03);
  ...
}

Or, use CSS variables / arbitrary values instead.