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:
Danny White authored and GitHub committed 2026-09-24 14:41:21 +10:00
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: {