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.

[joffreypersia]

I hope it will be merged soon :)

[nicolaslefresne]

I don't think it will get merged, from what I can understand from @calebporzio posts, a theme feature is on its way, this will probably solve the issues this PR is fixing.

[calebporzio]

Closing this because we have theming now so the demand for this would be less. Thanks!

[fabio-algomera]

Closing this because we have theming now so the demand for this would be less. Thanks!

Hi Caleb,
thank you for your response and the work you are doing.

However, I think this PR (maybe improved?) may give a bit more customization regarding component variants.

The theming that has been implemented obviously is very useful but, for example in the buttons, it only sets the main (primary) color with the chosen color but does not change the other variants in any way (outline and fillable, for example, remain in the default color).

If I am wrong or misunderstand, please correct me.

Thanks again for the work you are doing!