[ BUG ] Toggle and Toggle Group do not work well on mobile (and a bit confusing on desktop)

[ammarfaris]

Describe the bug
It is similar to this opened issue shadcn-ui/ui#4457

I put the description here as well:

The Toggle button has the following background colors for the hover and on states:

• hover:bg-muted
• data-[state=on]:bg-accent

Unfortunately both these colors map to the same physical color (e.g. neutral-100 in light mode and neutral-800 in dark mode). This makes it very difficult to tell if the button is on or off in certain situations. The worst case is the Toggle button on a mobile which is in the off state, but still appears to be on. That's because on the mobile, the button stays in the hover mode even after it is tapped. The issue is less severe on the desktop where the confusion only occurs when you click the button and your cursor is still on it. In this case, even when the button is turned off, it shows the hover color giving the perception that it is on.

To Reproduce

1. Go to https://rnr-showcase.vercel.app/toggle & https://rnr-showcase.vercel.app/toggle-group on a mobile phone
2. Toggle the button on
3. Toggle the outline button off
4. The button appears as if it is on.

Expected behavior
The button should appear as off

Screenshots
Can be see from similar issue here: shadcn-ui/ui#4457

Platform (please complete the following information):

• Type: Browser
• OS: Both Android and iOS
• Browser: Both Chrome and Safari (Please test on the mobile devices)