feat(ui): tokenize soft-danger callouts for dark themes (LC-215) #257
Loading…
Reference in a new issue
No description provided.
Delete branch "feat/lc-215-danger-surface-tokens"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Summary
The "Delete account" panel and 19 other soft-danger callouts (admin error banners, enclave/home welcome banners, the bridge status chip, the DND chip, the blocked-list error) stayed bright red-on-pale-red in dark / hc-dark themes because they hardcoded Tailwind's
bg-red-50/border-red-300/text-red-800classes. Reported by user on staging: "the Delete account section looks very ugly in dark mode. It stays bright, even when the rest of the page is dark."Add two new palette tokens (
--danger-surface,--danger-border) per theme inserver/assets/main.css, expose them viaserver/tailwind.config.jsasbg-danger-surface/border-danger-border, and sweep the 20 sites onto the tokens.Per-theme values:
--danger-surface#fef2f2(red-50)#450a0a(red-950)#fee2e2(red-100)#0a0000--danger-border#fca5a5(red-300)#7f1d1d(red-900)#991b1b(red-800)#fecaca(red-200)Scope carve-out
layout.html:101call-stop button (bg-white text-red-700 hover:bg-red-50) sits inside the parentbg-red-600active-control banner atlayout.html:99, which is in the deferred call-UI palette cluster (LC-189 wrap-up). Tokenizing the child button while the parent stays hardcoded creates a slate-on-bright-red contrast inversion in dark mode. The pair will be swept together when the call-UI palette ticket lands.Similarly out of scope:
voice/page.html:34,layout.html:39,92solid-fill call buttons (bg-red-600) — call-UI palette.Test plan
cargo check -p lets-chat-serverclean.just build-cssemits.bg-danger-surface,.border-danger-border,.hover\:bg-danger-surfaceutility rules.grep --recursive --extended-regexp 'bg-red-(50|100|200|300)|border-red-(100|200|300|400)|text-red-(700|800|900)' server/templates/returns only thelayout.html:101carve-out hit./settingsDelete account panel reads as danger zone, not as bright glow blob in dark / hc-dark./admin/settingswith a forced error: banner themes correctly./admin/bridgeswith a stopped bridge: status chip themes./homewelcome flash error themes.LC-190 introduced the semantic color palette (`--surface`, `--content`, `--accent`, `--danger`, etc.) and LC-193 swept most templates onto it, but the soft-danger callout pattern (red-50 / red-100 surface + red-200 / red-300 border + red-700 / red-800 heading and copy) survived in 20 templates. Tailwind's hardcoded `red-*` shades are constant across themes, so on `[data-theme="dark"]` and `[data-theme="hc-dark"]` these panels stay bright red-on-pale-red while the rest of the page is slate-on-near-black. The most visible offender is the "Delete account" panel at the bottom of `/settings`; the same pattern repeats across 12 admin/room/settings error banners, 3 enclave/home welcome banners, the settings DND chip + sessions-revoke button + password-form error, the blocked-users list error, and the bridge status chip. Two new tokens (`--danger-surface`, `--danger-border`) added per theme in `server/assets/main.css`: - light: `#fef2f2` (red-50) / `#fca5a5` (red-300) — preserves the existing visual. - dark: `#450a0a` (red-950) / `#7f1d1d` (red-900) — dim red-tinted panel sits visibly against `--surface: #0f172a` slate-900. - hc-light: `#fee2e2` (red-100) / `#991b1b` (red-800) — bright surface, hard outline; matches hc posture. - hc-dark: `#0a0000` / `#fecaca` (red-200) — near-black surface, maximal-contrast outline; border carries the visual weight on pure-black ground. `server/tailwind.config.js` exposes `bg-danger-surface` + `border-danger-border` Tailwind utilities mapped to the two new vars; the existing `text-danger` already pulls `--danger`. Built CSS verified (the three new utility rules emit correctly under bun + tailwind). Sites swept: - 12 admin/room error banners (`admin/{bots, bridges, backup_restore, branding, slash_commands, outgoing_webhooks, link_filter, settings}.html`, `room/{webhooks, email_inboxes, feeds}.html`, `settings/api_tokens.html`): `bg-red-50 text-danger text-sm` -> `bg-danger-surface border border-danger-border text-danger text-sm`. - 4 enclave/home welcome banners (`enclave/{discover, settings, page, branding}.html`, `home/welcome.html`): `border border-red-200 bg-red-50 text-red-800` -> `border border-danger-border bg-danger-surface text-danger`. - `settings/blocked.html:35` and `settings/page.html:266`: `bg-red-100 text-red-800` filled error -> `bg-danger-surface border border-danger-border text-danger`. - `settings/page.html:200` DND chip: `bg-red-100 text-danger` -> `bg-danger-surface border border-danger-border text-danger`. - `settings/page.html:309` sessions-revoke button: `border-red-300 hover:bg-red-50` -> `border-danger-border hover:bg-danger-surface`. - `settings/page.html:353-367` Delete account panel: all 7 `bg-red-50`/`border-red-300`/`text-red-800` hits -> tokens. Button at L369 unchanged (already uses `bg-danger text-danger-content`). - `admin/bridges.html:84` errored-bridge status chip: `bg-red-100 text-danger` -> `bg-danger-surface border border-danger-border text-danger`. Scope carve-out (NOT swept here): `layout.html:101` call-stop button (`bg-white text-red-700 hover:bg-red-50`) sits inside the parent `bg-red-600` active-control banner at `layout.html:99`. The parent banner is in the deferred call-UI palette cluster (LC-189 wrap-up). Tokenizing the child button while the parent stays hardcoded creates a slate-on-bright-red contrast inversion in dark mode. The pair will be swept together when the call-UI palette ticket lands. Similarly, `voice/page.html:34`, `layout.html:39,92` solid-fill call buttons (`bg-red-600 hover:bg-red-700`) are call-UI palette and out of scope. Verified: `cargo check -p lets-chat-server` clean; `just build-css` produces the three new utility classes; grep confirms no `bg-red-(50|100|200|300)` / `border-red-(100|200|300|400)` / `text-red-(700|800|900)` remains outside the layout.html:101 carve-out. #LC-215