bug: v.5.4.8+ btn-accent btn-ghost text color changed from primary to accent

[serhii-chernenko]

Reproduction URL (Required)

https://e3e54fb5-besidka-preview.chernenko.workers.dev/chats/new

What version of daisyUI are you using?

5.4.8

Which browsers are you seeing the problem on?

No response

Describe your issue

In my stable app version that used accent ghost buttons, the text was black (primary) in ghost mode until it was modified with btn-active. However, after upgrading to version 5.4.8 and above, I noticed that the default text color changed to pink (accent) instead of black.

Is it expected?

5.4.7:
https://www.besidka.com/chats/new

5.4.8+:
https://e3e54fb5-besidka-preview.chernenko.workers.dev/chats/new

[pdanpdan]

I think I was the author of the change in #4261
The change was intentional - the docs only ever had one example ghost button (without color modifier) and there was no specification to describe it as working otherwise.

5.4.7: https://play.tailwindcss.com/DWueaQrwis?file=css
5.4.8+: https://play.tailwindcss.com/3FgBTCHYrw?file=css

There is this #4325 (comment) that would somehow validate my choice, but is was after the change so it doesn't count :).

I put here 2 ways to change new behaviour: https://play.tailwindcss.com/YRvsEvncvt?file=css

• using text-base-content will change fg color in all states (I don't think you want this)
• the second version should be exactly what you were using before

[serhii-chernenko]

@pdanpdan, thanks for sharing! Honestly, I like your changes. I mean, it's kinda expected to see the text color of the button's main color (accent) appear instead of the primary one since the btn-active class is already in use. I just felt my UI looked broken after the upgrade, so I plan to make some adjustments soon 😄. I really appreciate your time, explanations, and insights.

[serhii-chernenko]

Actually, I found another issue. With the new btn-ghost style for the rest of button modifiers such as btn-primary, btn-secondary, and btn-neutral. it works only with contrast colors. But in my project, I just use --color-stone-800 (close to black) for all except the btn-accent style (it's pink). And with which I used to have an issue above.
Since it was OK with a light theme, I missed that it breaks btn-primary + btn-ghost in dark mode.

Light theme:

Dark theme:

Reproduce:
https://play.tailwindcss.com/MGmsBuHfeI?file=css

@pdanpdan I guess your solution #4261 wasn't carefully tested for all possible cases, especially for more monochrome colors.

I updated your light theme example with colored buttons with my one to highlight the issue more explicitly:
https://play.tailwindcss.com/XxE60RROHV?file=css

Actually, I guess you had the same issue for the Neutral button, that's a reason why bg-white was added here, not bg-base-100:

I guess it‘d be better if you discuss it with @saadeghi one more time.

[pdanpdan]

You mean you have a theme like this:

@plugin "daisyui/theme" {
  name: "halloween";
  default: true;
  prefersdark: false;
  color-scheme: "dark";
  --color-primary: var(--color-stone-800);
  --color-secondary: var(--color-stone-800);
  --color-neutral: var(--color-stone-800);
}

Here are the codepens for 5.4.7 and current

As you can see the buttons look bad even in 5.4.7.
About outline and dash - they are designed to work on a contrasting backgrounds, that is the reason why they are demo-ed on white.

For your special case you can go with this: https://play.tailwindcss.com/rWoMtHW5SB?file=css and revert to old behavior for ghost.

[serhii-chernenko]

@pdanpdan almost, but with -content variables as well.

More like this

5.4.7
https://play.tailwindcss.com/3K28BIXiUI?file=css

5.4.8+
https://play.tailwindcss.com/9VhvLV5Crm

Yep, I added a new utility btn-ghost-legacy to support both:
https://github.com/besidka/besidka/pull/120/changes#diff-f1655d310ce0526fb6b1bb7c2154dc212312202536bfe951f45ecaf5238d71e7

@utility btn-ghost-legacy {
  &:not(.btn-active, :hover, :active:focus, :focus-visible, input:checked:not(.filter .btn)) {
    --btn-fg: var(--color-base-content, currentColor);

    &.btn-disabled {
      @supports (color: color-mix(in lab, red, red)) {
        --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);
      }
    }
  }
}

But anyway, I still think, something went wrong due to case I shared above

[pdanpdan]

@serhii-chernenko please test https://play.tailwindcss.com/QZaRC8aifn?layout=preview (#4430) and see if it fixes your problem (and if you discover problems please report there)