feat(ui): tokenize soft-success + soft-warning callouts (LC-224) #267
Loading…
Reference in a new issue
No description provided.
Delete branch "feat/lc-224-success-warning-tokenize"
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
Sibling to LC-215 (danger) and LC-222 (accent) — same sweep for success and warning surface families. Flagged during LC-221 review: the bridge healthy + stale chips stayed bright pale-green / pale-amber in dark mode while LC-215 fixed the errored chip to dim red, creating a three-chip mismatch on
/admin/bridges. Same hardcodedbg-green-*/bg-amber-*shape repeats across ~22 sites.Palette additions
Six new tokens per theme (3 per family).
*-surface-contentfollows the LC-222 contrast lesson: dark themes flip to--content(slate-200) so text reads on the dim surface; saturated success/warning text on green-950 / amber-950 would fail WCAG AA. Light + hc themes use the saturated dark-green / amber for affordance.--success-surface#f0fdf4(green-50)#052e16(green-950)#dcfce7(green-100)#0a0a0a--success-border#86efac(green-300)#14532d(green-900)#15803d(green-700)#bbf7d0(green-200)--success-surface-content#047857(emerald-700)var(--content)var(--success)var(--success)--warning-surface#fffbeb(amber-50)#451a03(amber-950)#fef3c7(amber-100)#0a0a0a--warning-border#fcd34d(amber-300)#78350f(amber-900)#b45309(amber-700)#fde68a(amber-200)--warning-surface-contentvar(--warning)var(--content)var(--warning)var(--warning)Tailwind utilities exposed:
bg-{success,warning}-surface,border-{success,warning}-border,text-{success,warning}-surface-content.Sweep (22 sites across 21 files)
#avatarTest plan
just build-cssemits all 6 new utility rules.cargo check -p lets-chat-serverclean.bg-(green|emerald)-(50|100|200)/bg-amber-(50|100|200)/border-(green|amber)-(100|200|300|400)/text-(green|emerald)-(700|800)/text-amber-(700|800)remains inserver/templates/.Out of scope
bg-red-*(LC-215).bg-success/bg-warningbuttons — none exist today.text-success/text-warningstandalone uses (short text on neutral ground) stay as-is.Sibling to LC-215 (danger) and LC-222 (accent) — same sweep for the success and warning surface families. Reported during LC-221 review: the bridge healthy + stale chips stayed bright pale-green / pale-amber in dark mode while LC-215 fixed the errored chip to dim red, creating a three-chip mismatch on `/admin/bridges`. The same hardcoded `bg-green-*` / `bg-amber-*` shape repeats across ~22 sites — saved banners, missing-secret callouts, pinned strip, retention preview, public-enclave chip, mention-popover broadcast avatar, bookmark icons, flash messages, the message-actor webhook badge, and the email-verified / unverified status pills. Six new palette tokens (3 per family), per theme, in `server/assets/main.css`: | Token | Light | Dark | hc-light | hc-dark | |--------------------|----------------------|-----------------------|----------------------|----------------------| | `--success-surface` | `#f0fdf4` (green-50) | `#052e16` (green-950) | `#dcfce7` (green-100) | `#0a0a0a` | | `--success-border` | `#86efac` (green-300)| `#14532d` (green-900) | `#15803d` (green-700)| `#bbf7d0` (green-200)| | `--success-surface-content` | `#047857` (emerald-700)| `var(--content)` | `var(--success)` | `var(--success)` | | `--warning-surface` | `#fffbeb` (amber-50) | `#451a03` (amber-950) | `#fef3c7` (amber-100)| `#0a0a0a` | | `--warning-border` | `#fcd34d` (amber-300)| `#78350f` (amber-900) | `#b45309` (amber-700)| `#fde68a` (amber-200)| | `--warning-surface-content` | `var(--warning)` | `var(--content)` | `var(--warning)` | `var(--warning)` | Foreground tokens follow the LC-222 contrast lesson: dark themes flip the `*-surface-content` to `--content` (slate-200) so text reads on the dim surface (saturated success/warning text would fail WCAG AA on green-950 / amber-950, same shape as the LC-222 dark-mode `text-accent on bg-accent-surface` failure). Light themes use the saturated dark-green / amber text for affordance. Tailwind utilities exposed via `server/tailwind.config.js`: `bg-success-surface`, `border-success-border`, `text-success-surface-content`, and the warning equivalents. Template sweep (22 sites across 21 files): **Saved / created success banners (10 sites):** `admin/anti_spam.html`, `admin/branding.html`, `admin/settings.html:51,128,131`, `enclave/branding.html`, `settings/page.html:12,263,288`. `bg-green-50 text-success text-sm` (and `bg-green-100 text-green-800` variants) -> `bg-success-surface border border-success-border text-success-surface-content text-sm`. **Created-token blocks (7 sites):** `admin/bots`, `admin/outgoing_webhooks`, `admin/bridges`, `settings/api_tokens`, `room/webhooks`, `room/feeds`, `room/email_inboxes`. Outer `bg-green-50 border border-green-200` + inner monospace token `border-green-200` -> tokens (outer gets surface-content text, inner code keeps `bg-surface-elevated` with tokenized border). **Missing-secret warning callouts (5 sites):** `admin/bots`, `admin/bridges`, `room/webhooks`, `room/email_inboxes`, `room/feeds`. `bg-amber-50 text-warning text-sm` -> tokens. **Stronger warning callouts (3 sites):** `admin/backup_restore`, `admin/settings`, `room/retention_preview`. `border border-amber-300 bg-amber-50` variants -> `bg-warning-surface border border-warning-border text-warning-surface-content`. **Pinned strip (1 site):** `partials/pinned_strip.html` `border-b border-border bg-amber-50` -> `border-b border-warning-border bg-warning-surface`. **Chips (3 sites):** `admin/bridges.html` healthy + stale bridge chips, `admin/enclaves.html` + `enclave/page.html` public-enclave badge. `bg-green-100 text-emerald-700` / `bg-amber-100 text-warning` / `bg-emerald-100 text-emerald-700` -> `bg-{success,warning}-surface text-{success,warning}-surface-content`. No border on chips per the LC-215 chip-vs-panel carve-out. **Standalone text-emerald-700 (3 sites):** bookmark icon in `room/message.html`, flash messages in `enclave/group_member_row_result.html` + `invite_row_result.html`. `text-emerald-700` -> `text-success-surface-content` (works as standalone text on neutral surface because the token value is dark green in light themes; reads on dark surface in dark themes via the slate-200 flip). **Webhook actor badge in message.html:26 + mention-popover broadcast avatar:** `bg-emerald-100 text-emerald-700` -> `bg-success-surface text-success-surface-content`. The LC-198 wrap-up note flagged actor badges as deferred but this commit folds them in since the swap is mechanically the same. **Email verified / unverified pills (`settings/page.html:91,93`):** `bg-green-100 text-green-800` -> `bg-success-surface border border-success-border text-success-surface-content`; `bg-amber-100 text-amber-800` -> `bg-warning-surface border border-warning-border text-warning-surface-content`. Out of scope: - `bg-red-*` already swept by LC-215. - Solid-fill `bg-success` / `bg-warning` buttons (none exist today; would use existing `*-content` tokens for foreground). - `text-success` / `text-warning` standalone uses (verified email checkmark text, pinned strip pin icon, etc.) stay as the saturated text color; they sit on the page or warning-surface ground and are short enough to absorb the contrast trade-off. Verified: `just build-css` emits all 6 new utility rules (`.bg-success-surface`, `.bg-warning-surface`, `.border-success-border`, `.border-warning-border`, `.text-success-surface-content`, `.text-warning-surface-content`). `cargo check -p lets-chat-server` clean. Grep AC clean: `grep --recursive --extended-regexp 'bg-(green|emerald)-(50|100|200)|bg-amber-(50|100|200)|border-(green|amber)-(100|200|300|400)|text-(green|emerald)-(700|800)|text-amber-(700|800)' server/templates/` returns no results. #LC-224