prefers-color-scheme: dark issue with Accordion

[andredmelo]

Hi, First of all thanks for these amazing utilities!

I've ran into an issue and wanted to check if it's my lack of knowledge or a bug to report. When using the Accordion and styling the Header in its open and close states, it works fine for the default light mode but the dark mode doesn't seem to work:

<AccordionPrimitive.Header className="w-full h-full leading-[3rem]">
 <AccordionPrimitive.Trigger
  className={clsx(
   "group",
   "radix-state-open:rounded-t-xl radix-state-closed:rounded-xl",
   "focus:outline-none",
   "inline-flex w-full items-center justify-between px-10 md:px-16 py-6 md:py-10 text-left",
   "radix-state-open:bg-white radix-state-closed:bg-neutral-200 hover:bg-neutral-100",
   "radix-state-open:dark:bg-neutral-700 radix-state-closed:dark:bg-neutral-900 hover:dark:bg-neutral-800 transition-colors"
   )}
  >
  (...)
  </AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>

In the above code I get an error in VS Code saying 'radix-state-open:dark:bg-neutral-700' applies the same CSS properties as 'radix-state-closed:dark:bg-neutral-900'.(cssConflict).

The visual result on my end is that the bg radix-states are being applied in the light mode (for some also strange reason the hover state doesn't). And that in the dark mode they just don't get implemented at all defaulting to the light mode values (and ironically the hover state works!).

Is this some mistake of mine? Or a bug to report? Thank you

P.S.- If I remove the radix-states the hover works fine on both light and dark modes.

[ecklf]

You need to move dark in front of radix-state

-radix-state-open:dark:bg-neutral-700
+dark:radix-state-open:bg-neutral-700

[andredmelo]

Working beautifully now. Thanks!