bug: button with btn-outline btn-neutral btn-active together are illegible

[kuchta]

Reproduction URL (Required)

https://play.tailwindcss.com/8VYfzZ7imo

What version of daisyUI are you using?

5.6.3

Which browsers are you seeing the problem on?

Chrome

Describe your issue

if I use all three modifiers (btn-outline btn-neutral btn-active) button text is illegible basically under any theme

[github-actions]

Thank you @kuchta for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[saadeghi]

How do you expect it to look like?

[pdanpdan]

I think there is a problem with the fg color applied by .btn-active
https://play.tailwindcss.com/IQfmVG6wiE
https://play.tailwindcss.com/rSE8vDTtsC
On all colors and styles except filled

[kuchta]

I don't care @saadeghi, just not like these (in first 5 themes)

[saadeghi]

I don't care @saadeghi, just not like these (in first 5 themes)

I understand, I'm asking what's your expected behavior when you use btn-outline btn-neutral btn-active together?
Do you want it to look like btn-neutral btn-active?

[kuchta]

In one application if you open settings, you will find a bunch of radix buttons. They just looked best with btn-outline and btn-neutral.

Previously (until 5.6.0 inclusive) it looked like this:

After 5.6.0:

[pdanpdan]

I would go with this solution based on original v5.6.0
https://play.tailwindcss.com/sPXfTBbgOU?file=css
https://play.tailwindcss.com/rGoNXzAOLR (.btn-active should go in l3)

It simply extracts the .btn-active in a utility class
I'll produce a more extensive test in a few minutes.

https://play.tailwindcss.com/qx1Ms6aB6V?file=css

It breaks the active bg color when there is no .btn-<color>

Some progress - it looks good to me but I haven't check all buttons.
https://play.tailwindcss.com/8TMTe9K1mF

After testing it looks pretty good.
I also added a test with @apply
https://play.tailwindcss.com/sjdEhqrqph?layout=preview&file=css

[pdanpdan]

@saadeghi
I'm sorry - it looks like I got the wrong layer for .btn-active - it should be @layer daisyui.l1.l2 - in fact it should be between l3 and l2

In the example it works because the selector forces higher specificity, but a simple .btn-active does not work

I got it:

• .btn-active should be in l2
• .btn @layer daisyui.l1.l2 should be .btn @layer daisyui.l1
  So that active is applied after outline/... and hover is applied after active

[kuchta]

Thank you, @pdanpdan . It's finally working. 🎉

JFYI a lot of themes are not very usable now. You can check it at https://kuchta.github.io/radixverse

Abyss:

Aqua:

Cmyk:

Coffee:

Cyberpunk:

Dark:

Dim:

Etc...

[saadeghi]

I wouldn't suggest using btn-outline btn-neutral classes here.

• ✅ Neutral is a dark color. It makes the button dark.
• ✅ btn-outline removes the button background color, sets the color to border and text instead.

Both class names are working as expected.

This would look good on top of bright section like an image. But this is not a good place to use them both at the same time.

I would suggest removing btn-neutral class or at lease don't use it with btn-outline at the same time on a base-* color background.

Please let me know if you have any questions.