feat(ui): tokenize accent / focus-ring drift (LC-222) #265

Merged

nrupard merged 2 commits from feat/lc-222-accent-focus-tokenize into main 2026-05-29 20:19:52 +02:00

Conversation 0 Commits 2 Files changed 16 +54 -15

nrupard commented 2026-05-29 20:07:13 +02:00

Owner

Copy link

Summary

LC-190 introduced semantic --accent + --ring tokens with per-theme values; LC-193 swept most surfaces onto them. Eleven templates still carried hardcoded blue-* Tailwind classes. In dark / hc-dark mode the active sidebar row stayed pale-blue on near-black, the mention popover / poll voted-bar / settings device chip / reply-count chip all rendered the same un-themed pale-blue glow, and the focus ring stayed blue-500 instead of theming to --ring.

Palette additions

• --accent-surface per theme (light #dbeafe, dark #1e3a8a, hc-light #dbeafe, hc-dark #0a0a0a). Mirrors LC-215's --danger-surface.
• Tailwind bg-accent-surface utility exposed via tailwind.config.js.

Template sweep (11 + 1 sites)

Focus rings (6): focus:ring-blue-500 -> focus:ring-ring. Sites: sidebar_room_row, sidebar_peer_row, sidebar_nav, sidebar_self, notify_dropdown, own_avatar_oob.

Active sidebar row tint (2): bg-blue-100 font-semibold text-blue-900 -> bg-accent-surface font-semibold text-accent. Sites: sidebar_room_row, sidebar_peer_row.

Accent-tinted surfaces (5): reply-count chip, file-drop overlay, "this device" chip, poll voted-by-me bar + button border/ring, mention popover @-avatar.

Out of scope

• .lc-quote-bar blue chrome in main.css (separate quote-chip ticket).
• .lc-md code-block / blockquote / table hardcoded slate styles flagged during LC-221 review (separate "expand LC-221 sweep" follow-up).

Test plan

• just build-css clean.
• cargo check -p lets-chat-server clean.
• grep --recursive --extended-regexp 'focus:ring-blue-|bg-blue-(100|500|600|700|800|900|50)|text-blue-(700|800|900)|hover:bg-blue-|border-blue-|ring-blue-' server/templates/ returns no results.
• Visual smoke on staging under all four themes (light, dark, hc-light, hc-dark): tab through sidebar (focus ring), open a room (active row tint), open a poll + vote (voted bar), type @ (popover avatar), drag file over composer (overlay), settings session list ("this device" chip).
• Operator-brand smoke: set a non-blue brand color in admin branding; verify all newly-tokenized surfaces follow.

## Summary LC-190 introduced semantic `--accent` + `--ring` tokens with per-theme values; LC-193 swept most surfaces onto them. Eleven templates still carried hardcoded `blue-*` Tailwind classes. In dark / hc-dark mode the active sidebar row stayed pale-blue on near-black, the mention popover / poll voted-bar / settings device chip / reply-count chip all rendered the same un-themed pale-blue glow, and the focus ring stayed `blue-500` instead of theming to `--ring`. ## Palette additions - `--accent-surface` per theme (light `#dbeafe`, dark `#1e3a8a`, hc-light `#dbeafe`, hc-dark `#0a0a0a`). Mirrors LC-215's `--danger-surface`. - Tailwind `bg-accent-surface` utility exposed via `tailwind.config.js`. ## Template sweep (11 + 1 sites) **Focus rings (6):** `focus:ring-blue-500` -> `focus:ring-ring`. Sites: `sidebar_room_row`, `sidebar_peer_row`, `sidebar_nav`, `sidebar_self`, `notify_dropdown`, `own_avatar_oob`. **Active sidebar row tint (2):** `bg-blue-100 font-semibold text-blue-900` -> `bg-accent-surface font-semibold text-accent`. Sites: `sidebar_room_row`, `sidebar_peer_row`. **Accent-tinted surfaces (5):** reply-count chip, file-drop overlay, "this device" chip, poll voted-by-me bar + button border/ring, mention popover `@`-avatar. ## Out of scope - `.lc-quote-bar` blue chrome in main.css (separate quote-chip ticket). - `.lc-md` code-block / blockquote / table hardcoded slate styles flagged during LC-221 review (separate "expand LC-221 sweep" follow-up). ## Test plan - [x] `just build-css` clean. - [x] `cargo check -p lets-chat-server` clean. - [x] `grep --recursive --extended-regexp 'focus:ring-blue-|bg-blue-(100|500|600|700|800|900|50)|text-blue-(700|800|900)|hover:bg-blue-|border-blue-|ring-blue-' server/templates/` returns no results. - [ ] Visual smoke on staging under all four themes (light, dark, hc-light, hc-dark): tab through sidebar (focus ring), open a room (active row tint), open a poll + vote (voted bar), type `@` (popover avatar), drag file over composer (overlay), settings session list ("this device" chip). - [ ] Operator-brand smoke: set a non-blue brand color in admin branding; verify all newly-tokenized surfaces follow.

nrupard added 1 commit 2026-05-29 20:07:13 +02:00

feat(ui): tokenize accent / focus-ring drift (LC-222) ... eecea878e3

LC-190 introduced semantic `--accent` + `--ring` tokens with per-theme values; LC-193 swept most surfaces onto them. Eleven templates still carried hardcoded `blue-*` Tailwind classes for accent-tinted surfaces and focus rings. Surfaced during the LC-189 polish triage: in dark / hc-dark mode the active sidebar row stayed bright pale-blue on near-black, the mention popover avatar / poll voted-bar / settings device chip / reply-count chip all rendered the same un-themed pale-blue glow, and the focus ring stayed `blue-500` instead of theming to `--ring` (white on hc-dark, brand-primary on light).

Two new palette additions in `server/assets/main.css`:

- `--accent-surface` per theme (light `#dbeafe` blue-100, dark `#1e3a8a` blue-900, hc-light `#dbeafe`, hc-dark `#0a0a0a` parity with `--surface-elevated`). Mirrors LC-215's `--danger-surface` for soft accent fills.
- Tailwind `bg-accent-surface` utility added to `server/tailwind.config.js`.

Template sweep (11 sites + 1 added):

**Focus rings (6 sites):** `partials/sidebar_room_row.html:2`, `partials/sidebar_peer_row.html:2`, `partials/sidebar_nav.html:41`, `partials/sidebar_self.html:7`, `room/notify_dropdown.html:4`, `status/own_avatar_oob.html:1` swap `focus:ring-blue-500` -> `focus:ring-ring` (Tailwind ringColor.DEFAULT already mapped to `var(--ring)` in `tailwind.config.js`). Keyboard focus now visibly contrasts across all four themes (most notably white on hc-dark, where the previous `blue-500` was a low-contrast accent against near-black).

**Active-row tint (2 sites):** `partials/sidebar_room_row.html:2` and `partials/sidebar_peer_row.html:2` `bg-blue-100 font-semibold text-blue-900` -> `bg-accent-surface font-semibold text-accent`. Active sidebar row now uses the brand-tinted accent shade in light, dim brand-blue-900 in dark, near-black + accent-text in hc-dark.

**Accent-tinted surfaces (5 sites):**
- `room/reply_count.html:7` reply-count chip `bg-blue-50 text-blue-700 hover:bg-blue-100` -> `bg-accent-surface text-accent hover:bg-accent-surface`.
- `room/composer.html:164` file-drop overlay `bg-blue-900/40` -> `bg-accent/40`.
- `settings/page.html:297` "this device" chip `bg-blue-100 text-blue-800` -> `bg-accent-surface text-accent`.
- `partials/poll_block.html:25-26` voted-poll button + voted-by-me bar: `border-blue-500 ring-1 ring-blue-500` -> `border-accent ring-1 ring-ring`, `bg-blue-100` -> `bg-accent-surface`. (Ring + border were originally out of LC-222 scope but are the same drift pattern; consolidated here.)
- `partials/mention_popover.html:11` `@`-avatar chip `bg-blue-100 text-blue-700` -> `bg-accent-surface text-accent`.

Out of scope:
- `.lc-quote-bar` blue chrome in `main.css` (separate quote-chip ticket).
- `.lc-md` code-block / blockquote / table hardcoded slate styles flagged during LC-221 review (separate "expand LC-221 sweep" follow-up).

Verified: `just build-css` clean (Tailwind picks up `.bg-accent-surface` + `.focus\:ring-ring`), `cargo check -p lets-chat-server` clean. Grep AC clean: `grep --recursive --extended-regexp 'focus:ring-blue-|bg-blue-(100|500|600|700|800|900|50)|text-blue-(700|800|900)|hover:bg-blue-|border-blue-|ring-blue-' server/templates/` returns no results.

#LC-222

nrupard referenced this pull request from a commit 2026-05-29 20:15:41 +02:00

fix(ui): code-review fixes for LC-222 accent / focus-ring sweep

nrupard added 1 commit 2026-05-29 20:15:41 +02:00

fix(ui): code-review fixes for LC-222 accent / focus-ring sweep ... 8488a19838

Three findings addressed in one follow-up commit so PR #265 ships clean.

1. `server/tailwind.config.js` `focus:ring-ring` class did not resolve. Tailwind's `ringColor.DEFAULT` is only used when the class is literally `ring` (no suffix); the `ring-{name}` form needs a sibling named key. Built CSS dump confirmed `.focus\:ring-ring:focus` was never emitted, so `focus:ring-2` was falling back to Tailwind's preflight default `--tw-ring-color: rgba(147,197,253,.5)` instead of `var(--ring)`. Added `ring: "var(--ring)"` sibling under `ringColor` so the class now emits `.focus\:ring-ring:focus{--tw-ring-color:var(--ring)}` (verified in the regenerated tailwind-built.css).

2. `text-accent` on `bg-accent-surface` failed WCAG AA in dark mode. Dark `--accent` is `#2563eb` (blue-600) and dark `--accent-surface` was `#1e3a8a` (blue-900). Both dark blues; contrast ~1.9:1, well below 4.5:1 normal-text minimum. Active sidebar row text was nearly invisible. Introduced `--accent-surface-content` per theme: light + hc-light + hc-dark use `var(--accent)` (blue-600 on blue-100 = ~4.5:1, blue-700 on blue-100 = ~6.5:1, blue-300 on near-black = ~9.5:1); dark theme flips to `var(--content)` (slate-200) so text reads against the dim blue-900 surface (high contrast). Exposed as `text-accent-surface-content` via `tailwind.config.js`. Swept all six sites that pair the soft surface with text: `sidebar_room_row`, `sidebar_peer_row`, `reply_count`, `settings/page` "this device" chip, `mention_popover` `@`-avatar, and the two reaction-bar sites added in this commit.

3. Missed sweep sites caught by post-PR grep: `partials/reaction_bar.html` and `ws/reaction_update.html` viewer-reacted state `bg-blue-200` -> `bg-accent-surface text-accent-surface-content`; `server/assets/devices.js:209` inline JS HTML `text-blue-600 hover:underline` -> `text-accent hover:underline`. All same drift class as the original PR scope; should have been included from the start.

Verified: `just build-css` emits `.focus\:ring-ring:focus{--tw-ring-color:var(--ring)}`, `.bg-accent-surface{background-color:var(--accent-surface)}`, `.text-accent-surface-content{color:var(--accent-surface-content)}`. `cargo check -p lets-chat-server` clean. Grep AC clean across the broader pattern: `grep --recursive --extended-regexp 'focus:ring-blue-|bg-blue-(100|500|600|700|800|900|50|200)|text-blue-(600|700|800|900)|hover:bg-blue-|border-blue-|ring-blue-' server/templates/ server/assets/*.js` returns no results.

#LC-222

nrupard merged commit 1f4e4062c3 into main 2026-05-29 20:19:52 +02:00

nrupard referenced this pull request from a commit 2026-05-29 20:19:52 +02:00

Merge pull request 'feat(ui): tokenize accent / focus-ring drift (LC-222)' (#265) from feat/lc-222-accent-focus-tokenize into main

nrupard deleted branch feat/lc-222-accent-focus-tokenize 2026-05-29 20:19:52 +02:00

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels

No items

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

psa-systems/lets-chat!265

No description provided.