fix(web): add --destructive-text token for legible dark-mode destructive text #463

Merged

nrupard merged 1 commit from fix/BUNYIP-464-destructive-text-token into main

2026-08-04 20:16:19 +02:00

nrupard commented

2026-08-04 20:08:07 +02:00

Owner

What

Adds a --destructive-text semantic token (mapped to the text-destructive-text utility) and rewires every destructive FOREGROUND text/label site to it. bg-destructive / text-destructive-foreground / border-destructive are untouched.

Why

.dark --destructive (0 62% 45%) is legible as a background under white, but as foreground text it is ~2.5:1 (AA fail) for error boxes, validation, alert banners, and delete/revoke button labels. Lightening the shared token would break white-on-red bg-destructive, so a separate --destructive-text (dark: 0 75% 65%, red-400 range) fixes text without touching backgrounds. UI audit (BUNYIP-455) finding F20 (the chosen two-token approach).

Scope

input.css: --destructive-text in all 4 theme blocks + the @theme inline mapping. ~29 foreground-text sites -> text-destructive-text (error boxes, inline validation, auth banners, delete/clear-2FA/revoke/remove-photo buttons and their hover: companions). Decorative destructive icons left as-is (graphical 3:1, not text).

Verify

just check-container passes. Tailwind generates text-destructive-text from the new @theme entry at the CSS build (image build runs bun run build:css).

Closes BUNYIP-464.

## What Adds a `--destructive-text` semantic token (mapped to the `text-destructive-text` utility) and rewires every destructive FOREGROUND text/label site to it. `bg-destructive` / `text-destructive-foreground` / `border-destructive` are untouched. ## Why `.dark --destructive` (0 62% 45%) is legible as a background under white, but as foreground text it is ~2.5:1 (AA fail) for error boxes, validation, alert banners, and delete/revoke button labels. Lightening the shared token would break white-on-red `bg-destructive`, so a separate `--destructive-text` (dark: 0 75% 65%, red-400 range) fixes text without touching backgrounds. UI audit (BUNYIP-455) finding F20 (the chosen two-token approach). ## Scope input.css: `--destructive-text` in all 4 theme blocks + the `@theme inline` mapping. ~29 foreground-text sites -> `text-destructive-text` (error boxes, inline validation, auth banners, delete/clear-2FA/revoke/remove-photo buttons and their `hover:` companions). Decorative destructive icons left as-is (graphical 3:1, not text). ## Verify `just check-container` passes. Tailwind generates `text-destructive-text` from the new `@theme` entry at the CSS build (image build runs `bun run build:css`). Closes BUNYIP-464.

nrupard added 1 commit

2026-08-04 20:08:08 +02:00

fix(web): add a --destructive-text token for legible dark-mode destructive text

E2E PR gate / Install + reachability (no deployment secrets) (pull_request) Successful in 15s

Details

Check / fmt + clippy + build + tests (pull_request) Successful in 4m12s

Details

Create release / Create release from merged PR (pull_request) Has been skipped

Details

e9b39f90fc

The .dark --destructive token (input.css, 0 62% 45%) is a mid-red: fine as bg-destructive under white, but as FOREGROUND text it lands at ~2.5:1 (AA fail) for error boxes, inline validation, delete/revoke button labels, and destructive alert banners. Rather than lighten the shared token (which would break white-on-red bg-destructive), add a dedicated --destructive-text token: light-mode keeps the same value, dark-mode uses a lighter 0 75% 65% (red-400 range, matching the two Danger Zones' proven 5.51:1), high-contrast blocks mirror their destructive. Map it in @theme inline as --color-destructive-text so Tailwind generates the text-destructive-text utility.

Rewire every destructive FOREGROUND text/label use to text-destructive-text: error_box (ui.rs), the destructive dashboard error box, content/auth inline validation, the auth-page destructive banners, and the admin/settings delete / clear-2FA / revoke / remove-photo buttons (including their hover: companions so hover stays legible). bg-destructive, text-destructive-foreground, and border-destructive are untouched; the four decorative destructive icons (graphical, 3:1 threshold) are left as-is. Found by the 2026-08-04 UI audit (BUNYIP-455), finding F20.

#BUNYIP-464

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Signed-off-by: nrupard <natrsmith11@gmail.com>