fix(ui): align chrome, scrims and modal text to RBX tokens

[tyreseluo]

Colour-only work: six commits, each reviewable on its own. No behaviour changes.

Why

The surfaces the user looks at most were drawn from one-off literals that matched nothing else in the app, so the same concept — selected, hovered, dimmed, muted text, "this is a bot" — rendered differently depending on which file it lived in.

What changed

Timeline chrome. Reaction chips hovered #fef65b highlighter yellow with pure-black text and a bespoke green/grey pair; they now use the accent pair the app already uses for selection. Mention pills drop the black pill (and the #d91b38 red for self-mentions) for two tiers of the same accent — quiet chip for others, filled for you or @room. Links were browser-default blue and turned green on hover (shared by message links, settings and previews), so RBX_LINK_HOVER is added once rather than patched three times. Unread badges keep the conventional red but take RBX_DANGER_FG instead of pure #FF0000, and "marked unread" moves off the logo cyan.

Scrims, selection, modal text. Overlays dimmed at three different values (RBX_SCRIM, #000000BB, #000000b2) — all five backdrops now share one. The autocomplete highlighted its selected row in dodger blue while floating over the teal composer. room_settings_modal.rs wrapped tokenised chrome around 19 literals including five levels of text grey; it now has zero hardcoded colours.

Sticker picker and media players. Three files drew from a Tailwind palette with no RBX reference at all — 56 literals → tokens, including the players' #ff4444 error red. The sticker picker's primary button also leaves the deprecated legacy blue.

Bot badge. One concept had four definitions and three appearances: solid legacy-blue block in the rooms list and room title, soft accent chip in the message header, capitalised "Bot" in the member list. All now match the timeline chip. (The rooms-list pill's comment claimed it "reproduces the timeline's bot badge look" while drawing solid blue.)

Bot card and code paths. The agent card used seven hand-picked blue-greys, each within ~2% of a real token — the near-miss that made it read as faintly "off" against the approval card nested inside it. Separately, a bot's inline code changed shade between messages depending on whether the body contained a fenced block (markdown widget, blue-tinted) or not (HTML widget, neutral grey); both now use RBX_BG_SUNKEN. Expanding a small-state group also shifted its summary 7px left, now aligned.

One regression, caught and fixed in-branch

Pointing four styles.rs colours at RBX_* looked correct and compiled clean, but shared/mod.rs registers styles before design_tokens, so the names did not exist yet:

[E] src/shared/styles.rs:216 - property RBX_BG_SURFACE not found in prototype chain

They fell back to a grey default, turning day dividers, small state events and the "new message" marker into grey blocks. cargo check passes either way — it only surfaces in the running app's log. Reverted to literals mirroring the token values, with a comment recording why they must stay literal. Every other file in this branch registers after design_tokens, so their token references are fine; styles.rs is the only module with this hazard.

Testing

cargo test --lib --features agent_chat — 579 pass. Ran the app against a live agent-chat room and stepped through reaction hover/selected, self vs other mentions, link hover, unread badges, all five overlays, the autocomplete popup, the settings and sticker modals, audio/video messages, bot badges on all four surfaces, and the small-state group toggle. Confirmed from the app log that no RBX_* property fails to resolve.

Deliberately not included

• Legacy blue migration. COLOR_ACTIVE_PRIMARY has ~43 call sites, but design_tokens.rs states blue is "migrated per surface as §5 refactors land". Only the bot-badge surface is migrated here; a global flip is the maintainer's call.
• Three genuine defects, better as their own PR than mixed into colour work: folding can trigger mid-stream and swallow the typewriter cursor (regression from feat(timeline): make long agent replies scannable #274); link_preview.rs slices description by byte offset and panics on mixed CJK/ASCII; populate_message_view resets bot-card visibility on the Text/Notice path only, so a recycled slot can show a previous bot reply's body under a redacted or image message.

🤖 Generated with Claude Code