Daisy UI v4

[technophile-04]

Description

Fixes #629

[rin-st]

lgtm!

[Pabl0cks]

GJ @technophile-04 !! Is looking good to me 🙌

Only found something a bit weird with the button background colors on hover, I'll send a couple of videos (very bad quality after compressing, can send uncompress in tg):

In the rainbowkit and faucet buttons is easier to see.

Check videos

[technophile-04]

Only found something a bit weird with the button background colors on hover,

Ohh yes didn't notice it initially, actually this behavior was updated in daisy UI v4 by default :(

Screen.Recording.2023-12-12.at.9.04.05.PM.mov

Left side is V4 and the right side is v3.

---

Tried digging in and the problem seems that DaisyUI v4 has removed the *-focus i.e they are also no more generating --sf (secondary-focus) color and --pf (primary-focus) color instead they are suggesting to manually do it with color-mix checkout the docs here -> Breaking changes-colorTheme

Daisy V4 hover classes	Dasiy V3 hover classes

---

Possible Solution :

After saadeghi/daisyui#2647 (comment) , I think it kind of makes sense to keep things as it since there is also no way to properly get the previous dasiyUI v3 effect.

We get the hsl value for --sf and hardcode them in tailwind.config.ts for .btn-secondary:hover similar for primary etc but if people update their theme color then they again need to manually update this too.

One improvement we can do is if we feel the black overlay is too much we can the overlay a bit lighter :

Before	After

Code for this in tailwind.config.ts :

  ".btn:hover": {
    backgroundColor: "color-mix(in oklab, oklch(var(--btn-color)), black 4%)",
    borderColor: "color-mix(in oklab, oklch(var(--btn-color)),black 4%)",
  },

Previous edit :

We can add something like this `tailwind.config.ts` :

".btn-secondary:hover": {
  backgroundColor: "color-mix(in oklab, oklch(var(--s)), black 7%)",
  borderColor: "color-mix(in oklab, oklch(var(--s)),black 7%)",
},

but then we have to do it for .btn-primary:hover etc too and not sure if we should tweak daisy UI defaults, also the above snipped doesn't seem to generate exact color as dasiUI v3 --sf :(

So not sure whether to keep it default as DasiyUI default or we tweak it ? cc @carletex @rin-st @sverps

will keep digging if we could find a better way to tweak it

Also created this saadeghi/daisyui#2647 just incase we get the proper solution

[Pabl0cks]

Awesome research @technophile-04 !!

Knowing this is an intended change from Daisy v4, I would probably just leave it like it is, and let users define the hover bg color on their apps (if they don't like the default hover effect).

[carletex]

Looking great @technophile-04.Thanks for this!

Left a comment with a couple of little things