fix(ui): tokenize .lc-md + swap 4 prose-slate no-ops onto lc-md (LC-221) #264

Merged

nrupard merged 1 commit from feat/lc-221-markdown-tokenize into main

2026-05-29 19:55:31 +02:00

nrupard commented

2026-05-29 19:48:56 +02:00

Owner

Summary

Two markdown styling drift bugs.

1. prose prose-slate no-ops. Four templates wrapped rendered Markdown in prose prose-slate max-w-none text-sm: room/info.html:35,53, room/wiki_view.html:4, room/description_view.html:4. The Tailwind Typography plugin is NOT installed (server/tailwind.config.js and server/package.json carry no reference). Class strings resolved to nothing; room descriptions and wikis rendered with browser defaults — huge <h1> margins, blue underline <a> that does not theme. On [data-theme="dark"] the visited-link purple sat on near-black and was nearly unreadable.

Swap to lc-md text-sm so the four sites render identically with the rest of the app's inline Markdown surfaces (messages, threads, edit-history).

2. .lc-md itself bypassed LC-190 tokens. main.css:275-277 carried hardcoded #64748b (slate-500) on .lc-md del and #2563eb (blue-600) on .lc-md a. Constant across all four themes; link rendered fixed blue regardless of the operator's branded accent.

Tokenize:

.lc-md del -> color: var(--content-muted) (same muted color message timestamps use).
.lc-md a -> color: var(--accent) (follows the operator brand + theme).
.lc-md a:hover -> color: var(--accent-hover) plus the existing underline (previously hover only added underline, no color shift).

Out of scope

.lc-quote-bar and .lc-quote-deleted styles (main.css:373-415) still use hardcoded slate/blue hex values. Quote-chip styles are a separate surface; tokenizing them belongs in a quote-chip ticket, not the markdown sweep.

Test plan

just build-css clean.
cargo check -p lets-chat-server clean.
grep --recursive --extended-regexp 'prose-(slate|gray|zinc|neutral|stone)' server/templates/ returns no results.
Visual smoke on staging under all four themes: room with a description containing # Heading, **bold**, *italic*, ~~strike~~, [link](https://example.com), - list item, > quote. Heading renders with .lc-md-sized text; link reads as the operator brand color; hover deepens.

## Summary Two markdown styling drift bugs. **1. `prose prose-slate` no-ops.** Four templates wrapped rendered Markdown in `prose prose-slate max-w-none text-sm`: `room/info.html:35,53`, `room/wiki_view.html:4`, `room/description_view.html:4`. The Tailwind Typography plugin is NOT installed (`server/tailwind.config.js` and `server/package.json` carry no reference). Class strings resolved to nothing; room descriptions and wikis rendered with browser defaults — huge `<h1>` margins, blue underline `<a>` that does not theme. On `[data-theme="dark"]` the visited-link purple sat on near-black and was nearly unreadable. Swap to `lc-md text-sm` so the four sites render identically with the rest of the app's inline Markdown surfaces (messages, threads, edit-history). **2. `.lc-md` itself bypassed LC-190 tokens.** `main.css:275-277` carried hardcoded `#64748b` (slate-500) on `.lc-md del` and `#2563eb` (blue-600) on `.lc-md a`. Constant across all four themes; link rendered fixed blue regardless of the operator's branded accent. Tokenize: - `.lc-md del` -> `color: var(--content-muted)` (same muted color message timestamps use). - `.lc-md a` -> `color: var(--accent)` (follows the operator brand + theme). - `.lc-md a:hover` -> `color: var(--accent-hover)` plus the existing underline (previously hover only added underline, no color shift). ## Out of scope `.lc-quote-bar` and `.lc-quote-deleted` styles (`main.css:373-415`) still use hardcoded slate/blue hex values. Quote-chip styles are a separate surface; tokenizing them belongs in a quote-chip ticket, not the markdown sweep. ## Test plan - [x] `just build-css` clean. - [x] `cargo check -p lets-chat-server` clean. - [x] `grep --recursive --extended-regexp 'prose-(slate|gray|zinc|neutral|stone)' server/templates/` returns no results. - [ ] Visual smoke on staging under all four themes: room with a description containing `# Heading`, `**bold**`, `*italic*`, `~~strike~~`, `[link](https://example.com)`, `- list item`, `> quote`. Heading renders with `.lc-md`-sized text; link reads as the operator brand color; hover deepens.

nrupard added 1 commit

2026-05-29 19:48:56 +02:00

fix(ui): tokenize .lc-md + swap 4 prose-slate no-ops onto lc-md (LC-221)

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

Details

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

Details

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

Details

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

Details

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

Details

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

Details

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

Details

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

Details

8ec1b7fc34

Two related markdown styling bugs.

First, `server/templates/room/info.html:35,53`, `room/wiki_view.html:4`, and `room/description_view.html:4` wrapped rendered Markdown in `prose prose-slate max-w-none text-sm`. `prose` and `prose-slate` are Tailwind Typography plugin classes; the plugin is NOT installed (no `@tailwindcss/typography` in `server/tailwind.config.js` or `server/package.json`). The class strings resolved to nothing, so room descriptions and wiki content rendered with browser-default `<h1>` (huge margins), browser-default `<a>` (blue underline that does not theme), and zero spacing rules. On `[data-theme="dark"]` the visited-link purple sat on near-black surface, nearly unreadable.

The rest of the app already uses an in-tree `.lc-md` class (`server/assets/main.css:266-323`) for inline-rendered Markdown in messages, threads, and edit-history. Switch the four prose-tagged sites to `lc-md text-sm` so they render identically with the rest of the app.

Second, the `.lc-md` rules themselves at `main.css:275-277` carried hardcoded `#64748b` (slate-500) and `#2563eb` (blue-600) on `.lc-md del` and `.lc-md a`. Constant across all four themes; on dark / hc-dark the link rendered fixed blue regardless of the operator's branded accent, and the strikethrough color did not change. Replace with the LC-190 palette tokens:

- `.lc-md del { color: var(--content-muted) }` (same muted color as message timestamps already use)
- `.lc-md a { color: var(--accent) }` (follows the operator brand + theme)
- `.lc-md a:hover { color: var(--accent-hover) ... }` (deepens to the brand-accent shade on hover; previously hover only added underline, no color shift)

Out of scope: `.lc-quote-bar` / `.lc-quote-deleted` (lines 373-415) still use hardcoded slate / blue hex values. Quote-chip styles are a separate surface; tokenizing them belongs in a quote-chip ticket, not the markdown sweep.

Verified: `just build-css` clean, `cargo check -p lets-chat-server` clean, grep `--recursive --extended-regexp 'prose-(slate|gray|zinc|neutral|stone)' server/templates/` returns no results.

#LC-221