saadeghi / daisyui

๐ŸŒผ ๐ŸŒผ ๐ŸŒผ ๐ŸŒผ ๐ŸŒผ โ€ƒThe most popular, free and open-source Tailwind CSS component library
https://daisyui.com
MIT License
34.14k stars 1.3k forks source link

bug: Only last color definition in theme override is applied #3168

Closed suburbanworrier closed 4 weeks ago

suburbanworrier commented 3 months ago

What version of daisyUI are you using?

v4.12.10

Which browsers are you seeing the problem on?

All browsers

Reproduction URL

https://play.tailwindcss.com/HPwAYbvcas?file=config

Describe your issue

Overriding one of the standard colors works fine by redefining the css var in tailwind.config.js

Overriding multiple colors introduces quirks with seemingly only the final var being honoured.

However in making the Tailwind Play file I noticed that it was possible to successfully override both the primary and secondary color but never all three of "primary", "secondary" and "accent".

I initially mocked this up in a Stackblitz at https://stackblitz.com/edit/daisyui-sveltekit-3ys4xm?file=tailwind.config.cjs where I've updated daisyUI to the latest version. Toggling the order of lines 17 & 18 in tailwind.config.cjs exposes the problem as I initially saw it.

Both of these showcase an issue I'm seeing in a larger SvelteKit project where I'm attempting to style button text color.

github-actions[bot] commented 3 months ago

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

suburbanworrier commented 4 weeks ago

More than happy to put some effort in to resolve this but honestly I'd need pointing in the right direction.

saadeghi commented 4 weeks ago

In config, it must be accent-content because we process the built-in colors to generate the missing ones with a valid contrast.

light: {
  ...require('daisyui/src/theming/themes')['light'],
-  '--pc': '99% 0 0',
-  '--ac': '100% 0 0',
+  'primary-content': 'oklch(99% 0 0)',
+  'accent-content': 'oklch(100% 0 0)',
},

Docs: https://daisyui.com/docs/themes/#-5

I know it can be confusing where to use color name like --ac and where to use accent-content. It will be only CSS variable in daisyUI 5 to avoid confusion.

suburbanworrier commented 3 weeks ago

Many thanks for providing the answer ๐Ÿ™‡