Skip to content

fix(ui): declare --destructive-foreground in :root and .dark - #1246

Open
rawdaymx wants to merge 1 commit into
ChatbotXIO:mainfrom
rawdaymx:fix/destructive-foreground-token
Open

rawdaymx wants to merge 1 commit into
ChatbotXIO:mainfrom
rawdaymx:fix/destructive-foreground-token

Conversation

@rawdaymx

Copy link
Copy Markdown
Contributor

Fixes #1240

What changed

--color-destructive-foreground is registered in @theme inline (so the
text-destructive-foreground utility exists), but --destructive-foreground itself was never
declared in :root or .dark — every other -foreground counterpart in the file has both.
Added the missing declarations:

:root {
  --destructive-foreground: oklch(0.985 0 0); /* white */
}
.dark {
  --destructive-foreground: oklch(0.145 0 0); /* near-black */
}

The two modes need different foregrounds — white only reads ~2.75:1 against --destructive in
dark mode, so this can't be fixed by hardcoding text-white at the two existing call sites
(prize-list-editor.tsx, sersavan/multi-select.tsx) instead of fixing the token.

Verification

Recomputed with standard WCAG 2.x contrast math:

value
light: white vs --destructive 4.67:1
dark: near-black vs --destructive (dark) 6.89:1
control — white vs --destructive (dark), to confirm the two modes actually need different foregrounds 2.75:1 (fails)

Both real pairs clear the 4.5:1 WCAG 1.4.3 text floor.

pnpm --filter @chatbotx.io/ui check-types and pnpm --filter @chatbotx.io/ui test both pass
(13/13 test files, 56/56 tests) against this change.

@github-actions github-actions Bot added the bug Something isn't working as expected label Sep 20, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working as expected

Projects

None yet

1 participant