[bug]: Checkbox component with conflicting base styles

[Geezgus]

Describe the bug

This isn't a bug, per se, but styles like

"dark:data-[state=checked]:bg-slate-900"
# with
"dark:data-[state=checked]:bg-slate-50"

or

"dark:aria-invalid:ring-red-500/40"
# with
"dark:aria-invalid:ring-red-900/20"

are conflicting. This triggers annoying IDE warnings.

I didn't have the time yet to try to fix this, but if someone can before me, that'd be nice!

Affected component/components

Checkbox

How to reproduce

Simply install the component

Codesandbox/StackBlitz link

No response

Logs

System Info

OS: WSL 2 Ubuntu
Package manager: NPM

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues