search

saadeghi / daisyui

🌼 🌼 🌼 🌼 🌼  The most popular, free and open-source Tailwind CSS component library
https://daisyui.com
MIT License
33.13k stars 1.27k forks source link

bug: Disabled inputs and buttons have inconsistent styling #2865

Open TheWilley opened 6 months ago

TheWilley commented 6 months ago

What version of daisyUI are you using?

v4.7.2

Which browsers are you seeing the problem on?

Chrome

Reproduction URL

https://play.tailwindcss.com/Q8tDkINpUK

Describe your issue

The styling applied to disabled elements seems to be inconsistent between buttons and inputs. For example, when using the dark theme, a disabled button has a light gray tone, while a disabled input has a dark gray tone. From a UXD standpoint, this is confusing as it's unclear what is disabled and what is not. This inconsistency appears to apply to all themes.

github-actions[bot] commented 6 months ago

Thank you @TheWilley 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.

TheWilley commented 6 months ago

I think I may have found something after some further research. It seems like the button uses bg-neutral: https://github.com/saadeghi/daisyui/blob/32ce5dd500e6518689901e3918ab6b0e7eadeb9f/src/components/styled/button.css#L336

while the input uses border-base-200 and bg-base-200: https://github.com/saadeghi/daisyui/blob/32ce5dd500e6518689901e3918ab6b0e7eadeb9f/src/components/styled/input.css#L80

And therefore the color differences.