mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
fix(ui): restore light-mode switch thumb contrast (#50828)
## Problem After the primary colour split in #50697, the checked Switch thumb was always `bg-black`. That reads well on `primary-bright` in dark mode, but looks wrong in light mode where the knob should be white-ish. ## Solution Use `bg-primary-foreground` for the checked thumb. That is the paired content-on-primary token (near-white in light, dark surface in dark), so it contrasts on the `primary-bright` track without hardcoding black/white. | Before | After | | --- | --- | | <img width="452" height="192" alt="CleanShot 2026-09-24 at 12 08 18@2x" src="https://github.com/user-attachments/assets/43e6068b-f434-4260-87c2-3680e4fc87f0" /> | <img width="410" height="198" alt="CleanShot 2026-09-24 at 12 07 50@2x" src="https://github.com/user-attachments/assets/bf15075c-a4c6-4fa1-a14f-1e52b9b0cd4f" /> | ## Review instructions 1. Open the [Switch](https://design-system-git-dnywh-fix-switch-thumb-light-supabase.vercel.app/design-system/docs/components/switch) page on the design-system deploy preview. 2. In light mode, turn a switch on: the knob should be white-ish on the green track. 3. Switch to dark mode and turn a switch on: the knob should be dark on the green track.
This commit is contained in:
1 parent
6817c483a7
commit
f815e190be
1 file changed
+1
-1
@@ -23,7 +23,7 @@ const switchRootVariants = cva(
|
||||
)
|
||||
|
||||
const switchThumbVariants = cva(
|
||||
'pointer-events-none block rounded-full bg-foreground-lighter data-[state=checked]:bg-black shadow-lg ring-0 transition-transform',
|
||||
'pointer-events-none block rounded-full bg-foreground-lighter data-[state=checked]:bg-primary-foreground shadow-lg ring-0 transition-transform',
|
||||
{
|
||||
variants: {
|
||||
size: {
|
||||
|
||||
Reference in new issue
Block a user