bug: the background of `btn-disabled` (or disabled `btn`) should be transparent if combined with `btn-ghost`

[tats-u]

What version of daisyUI are you using?

4.12.x

Which browsers are you seeing the problem on?

Chrome, Firefox

Reproduction URL

https://codepen.io/tats-u/pen/wvVLOJE

Describe your issue

<div><a href="//example.com/edit" class="btn btn-ghost btn-circle">✏</a> <span class="btn btn-ghost btn-disabled btn-circle">🗑️</span></div>
<div><button type="button" class="btn btn-ghost btn-circle">✏</button> <button type="button" disabled class="btn btn-ghost btn-circle">🗑️</button></div>
<div><button type="button" class="btn btn-primary btn-circle">✏</button> <button type="button" disabled class="btn btn-primary btn-circle">🗑️</button></div>

the background of disabled ghost buttons (the top 2 rows) should be transparent instead of gray.

[github-actions[bot]]

Thank you @tats-u 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]

Then it wouldn't be obvious that it's disabled…

We don't want users to click on a button and wonder why it's not working. It should look clearly disabled.

[tats-u]

Then it wouldn't be obvious that it's disabled…

https://codepen.io/tats-u/pen/eYqqLRg

The first one is sufficient. The disabled icons are sufficiently pale compared to active ones. I doubt users will mistakenly click them.

The disabled icons in the last one look too obtrusive due to the gray background. We have to add ! before bg-transparent to remove the background.

[tats-u]

At least users will try placing the mouse pointer on the "disabled" buttons with gray background once.

[tats-u]

I haven't seen the disabled ghost buttons with such a solid gray background surrounded by active ghost buttons.