Default variant inputs and buttons have different styling

[marchershey]

Flux version

2.0.4

Livewire version

3.6.1

Tailwind version

4.0.9

Browser and Operating System

Brave on Windows 11

What is the problem?

Was the default variants on buttons and input fields intended to be different in dark mode?

They are similar in light mode.

To be honest, I'm not a huge fan of the transparency in elements, because having different backgrounds cause the same type of elements to look different.

As I look at the photos above, they don't look horrible, so here's the full element in dark mode.

In my opinion, having the default variants on buttons and inputs be different looks bad. If this was intended, please close this and discard my feedback.

I'd like to add that all of the above elements are default components from Flux. Copy and pasted.

Also, I'm fulling aware that I can just flux:publish the component and change it myself, but I thought this feedback was worth just enough to report, and I'm not a huge fan of keeping up with all the changes I've made to stock components.

One last thing, I know that variant="primary" should be used for the sign in button, but there are certain scenarios that people need to use the default input with a default button, such as the following:

Note

The following screenshots were taken directly from the documentation

or

The inputs are also different than the menu items active state as well:

Anyways... thanks for taking the time to read this! Please feel free to throw this one out. I just wanted to give some feedback.

Code snippets

    <flux:card class="w-full max-w-sm space-y-6 min-w-xs">
        <div class="text-center">
            <flux:heading size="lg">Sign in to continue</flux:heading>
        </div>
        <div class="flex flex-col space-y-3">
            <flux:button class="w-full" icon="google">Sign in with Google</flux:button>
            <flux:button class="w-full" icon="facebook">Sign in with Facebook</flux:button>
            <flux:button class="w-full" icon="apple">Sign in with Apple</flux:button>
        </div>
        <flux:separator />
        <div class="text-center">
            <flux:subheading>or use your email address</flux:subheading>
        </div>
        <flux:input type="email" placeholder="Enter your email address" />
        <flux:button class="w-full">Sign in</flux:button>
        <div class="text-center text-xs flex justify-center space-x-5">
            <flux:link href="#">Can't sign in?</flux:link>
            <flux:link href="{{ route('auth.register') }}">Create an account</flux:link>
        </div>
    </flux:card>

How do you expect it to work?

I'd love to see the default variants on inputs and button to be the same in both dark and light mode.

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[bridgeyuwa]

We all suck at design.

@calebporzio where is @hugosaintemarie ?

😁

[jfrosorio]

I'd like to through something related to this discussion:

flux:sidebar.item uses outline icons by default, while flux:menu.item uses mini icons by default.

Both components represent menu-like items with a very similar API, so this difference is surprising and not obvious to me. Also, I can't find any documentation about this. Clarifying or aligning this behaviour would improve consistency and discoverability.