Add the [data-variant-*] attribute to components

[fabio-algomera]

Hey!!! :)
After many tests to define the easiest and correct way of overriding component styling (following the documentation anyway) I came to the conclusion that I should set the styles in the app.css file.

However, there are some elements (e.g. buttons) that need different styling depending on the variant you are using, e.g.:

• Primary: I may want to change the background in the normal state and in the hover state;
• Outline: I may want to change the border in the normal state and in the hover state;

In this case, by selecting only [data-flux-button] I can't figure out which variant it refers to, resulting in going to affect buttons that I don't want to change.

My idea is to add, where there are variants present, a [data-variant-*] attribute so you can properly select the variant of the element you want to customize.

An example:

[data-flux-button] {
    // This apply the default style to all buttons
    @apply !shadow-none !rounded;
}
[data-flux-button][data-variant-primary].teal {
    // This apply the teal background color only in buttons with variant 'primary' e con classe 'teal'
    @apply !bg-teal-500 hover:!bg-teal-400;
}
[data-flux-button][data-variant-outline].teal {
    // This apply the teal border color only in buttons with variant 'primary' e con classe 'teal'
    @apply !border-teal-500 hover:!border-teal-400;
}

What are your opinions on this? :)

[jeffchown]

Like that idea, @fabio-algomera !

[fabioserembe]

Hi Jeff,
Thank you for the feedback.

I send a PR for adding data-variant to the Flux free components [#407].

Check it out! :)