fix(ui): tokenize remaining .lc-md + .lc-quote-bar slate/blue (LC-226) #270

Merged

nrupard merged 1 commit from feat/lc-226-lc-md-quote-bar-tokenize into main

2026-05-29 20:54:39 +02:00

nrupard commented

2026-05-29 20:51:41 +02:00

Owner

Summary

Follow-up to LC-221. The LC-221 sweep tokenized .lc-md del / a / a:hover and swapped 4 prose-tagged sites onto .lc-md. Code review flagged six more .lc-md rules + the entire .lc-quote-* block as same-drift but punted to keep LC-221 scoped to the user-reported link color complaint.

What ships

.lc-md rules (server/assets/main.css:362-411):

blockquote border-left: #cbd5e1 → var(--border-strong); color: #475569 → var(--content-muted)
table th/td border: #e2e8f0 → var(--border)
th background: #f1f5f9 → var(--surface-sunken)
hr border-top: #e2e8f0 → var(--border)
inline code bg: #f1f5f9 → var(--surface-sunken); color: #0f172a → var(--content)
pre bg + !important: #f8fafc → var(--surface-elevated); border: #e2e8f0 → var(--border)

.lc-quote-* block (lines 420-494):

All slate references → var(--content) / var(--content-muted) / var(--content-subtle) / var(--border-strong) / var(--surface) / var(--surface-sunken)
.lc-quote-bar blue references → var(--accent) (border-left), var(--accent-surface) (background), var(--accent-surface-content) (color, LC-222 contrast-aware foreground)

Dark-mode posture follows LC-222: --accent-surface-content flips to var(--content) (slate-200) so chip text reads against the dim blue-900 quote-bar.

Out of scope

.lc-voice border #e2e8f0 (line 503) — voice player is its own component, not markdown / quote.

Test plan

just build-css clean.
cargo check -p lets-chat-server clean.
AC grep on .lc-md block: only LC-221 doc-comment quoting old hex values returns (#64748b, #2563eb). .lc-quote-* AC grep returns nothing.
Visual smoke on staging under all 4 themes (light, dark, hc-light, hc-dark): room description with code block, blockquote, hr, table, quoted-reply chip in composer. All themed correctly.
WCAG AA contrast verified for inline-code on --surface-sunken and code-block text on --surface-elevated across themes.

## Summary Follow-up to LC-221. The LC-221 sweep tokenized `.lc-md del / a / a:hover` and swapped 4 prose-tagged sites onto `.lc-md`. Code review flagged six more `.lc-md` rules + the entire `.lc-quote-*` block as same-drift but punted to keep LC-221 scoped to the user-reported link color complaint. ## What ships **`.lc-md` rules (`server/assets/main.css:362-411`):** - blockquote border-left: `#cbd5e1` → `var(--border-strong)`; color: `#475569` → `var(--content-muted)` - table th/td border: `#e2e8f0` → `var(--border)` - th background: `#f1f5f9` → `var(--surface-sunken)` - hr border-top: `#e2e8f0` → `var(--border)` - inline code bg: `#f1f5f9` → `var(--surface-sunken)`; color: `#0f172a` → `var(--content)` - pre bg + `!important`: `#f8fafc` → `var(--surface-elevated)`; border: `#e2e8f0` → `var(--border)` **`.lc-quote-*` block (lines 420-494):** - All slate references → `var(--content)` / `var(--content-muted)` / `var(--content-subtle)` / `var(--border-strong)` / `var(--surface)` / `var(--surface-sunken)` - `.lc-quote-bar` blue references → `var(--accent)` (border-left), `var(--accent-surface)` (background), `var(--accent-surface-content)` (color, LC-222 contrast-aware foreground) Dark-mode posture follows LC-222: `--accent-surface-content` flips to `var(--content)` (slate-200) so chip text reads against the dim blue-900 quote-bar. ## Out of scope `.lc-voice` border `#e2e8f0` (line 503) — voice player is its own component, not markdown / quote. ## Test plan - [x] `just build-css` clean. - [x] `cargo check -p lets-chat-server` clean. - [x] AC grep on `.lc-md` block: only LC-221 doc-comment quoting old hex values returns (`#64748b`, `#2563eb`). `.lc-quote-*` AC grep returns nothing. - [ ] Visual smoke on staging under all 4 themes (light, dark, hc-light, hc-dark): room description with code block, blockquote, hr, table, quoted-reply chip in composer. All themed correctly. - [ ] WCAG AA contrast verified for inline-code on `--surface-sunken` and code-block text on `--surface-elevated` across themes.

nrupard added 1 commit

2026-05-29 20:51:41 +02:00

fix(ui): tokenize remaining .lc-md + .lc-quote-bar hardcoded slate/blue (LC-226)

check-secrets / Nosey parker (push) Successful in 7s

Details

check-secrets / TruffleHog (push) Successful in 7s

Details

check-secrets / Kingfisher (push) Successful in 9s

Details

check-secrets / Nosey parker (pull_request) Successful in 3s

Details

check-secrets / Kingfisher (pull_request) Successful in 6s

Details

check-secrets / TruffleHog (pull_request) Successful in 5s

Details

Check / clippy + fmt + tests (pull_request) Successful in 2m7s

Details

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

Details

0be2446ffe

Follow-up to LC-221. The LC-221 sweep tokenized `.lc-md del / a / a:hover` and swapped 4 prose-tagged sites onto `.lc-md`. The code review flagged six more `.lc-md` rules + the entire `.lc-quote-bar` block as same-drift-class but punted to keep LC-221 scoped to the user-reported link-color complaint.

Hardcoded slate / blue hex values in `.lc-md` rules (`server/assets/main.css`):
- `.lc-md blockquote` border-left `#cbd5e1` (slate-300) -> `var(--border-strong)`; color `#475569` (slate-600) -> `var(--content-muted)`.
- `.lc-md th, td` border `#e2e8f0` (slate-200) -> `var(--border)`.
- `.lc-md th` background `#f1f5f9` (slate-100) -> `var(--surface-sunken)`.
- `.lc-md hr` border-top `#e2e8f0` -> `var(--border)`.
- `.lc-md code:not(pre code)` background `#f1f5f9` -> `var(--surface-sunken)`; color `#0f172a` (slate-900) -> `var(--content)`.
- `.lc-md pre` background `#f8fafc` (slate-50) -> `var(--surface-elevated)`; border `#e2e8f0` -> `var(--border)`; the syntect-override `!important` rule keeps the same token.

`.lc-quote-bar` block (lines 420-494) tokenized:
- `.lc-quote-chip` border-left, background, color, hover-bg -> `var(--border-strong)`, `var(--surface)`, `var(--content-muted)`, `var(--surface-sunken)`.
- `.lc-quote-author` / `.lc-quote-bar-clear:hover` color `#1e293b` (slate-800) -> `var(--content)`.
- `.lc-quote-excerpt` / `.lc-quote-bar-excerpt` color `#475569` -> `var(--content-muted)`.
- `.lc-quote-deleted` color `#94a3b8` (slate-400) -> `var(--content-subtle)`.
- `.lc-quote-bar` border-left `#2563eb` (blue-600) -> `var(--accent)` (LC-96 brand-tracking); background `#eff6ff` (blue-50) -> `var(--accent-surface)` (LC-222 dim brand-tinted in dark); color `#1e293b` -> `var(--accent-surface-content)` (LC-222 contrast-aware foreground, slate-200 in dark / accent in light).
- `.lc-quote-bar-label`, `.lc-quote-bar-clear` color `#64748b` (slate-500) -> `var(--content-muted)`.
- `.lc-quote-bar-clear:hover` -> `var(--content)`.

Dark-mode contrast verified via the LC-222 posture: `.lc-quote-bar` body color uses `--accent-surface-content` which flips to `var(--content)` (slate-200) on dark theme so the chip text reads against the dim blue-900 surface (saturated `--accent` text on `--accent-surface` was the LC-222 dark-mode WCAG AA failure).

The `.lc-voice` rule below uses `#e2e8f0` for the voice-player border (line 503); not part of LC-226 since the voice player is its own component, not markdown. Track separately if needed.

Verified: `just build-css` clean, `cargo check -p lets-chat-server` clean. AC grep: `awk '/\.lc-md/,/^\}$/{ if ($0 ~ /#[0-9a-f]{3,6}/) print }' server/assets/main.css` returns only the LC-221 doc-comment reference (`#64748b` and `#2563eb` quoted as old values); same grep on `.lc-quote-*` returns nothing.

#LC-226