The composer, the shell frame and sidebar, the right side panel and the
create-bot modal were hard-coded dark while the text on them follows the
theme, so in the light theme the typed draft, the sidebar rows and the
side panel forms rendered dark on dark.
- Composer: the island uses the card and foreground tokens; attach, stop
and chips use border and foreground tokens, and send is the default
primary button. The focus and shadow utilities on the bar are removed:
.apple-island always overrode them, so they never rendered.
- Shell frame and page background use the background token. The frame's
radial gradient never rendered under Tailwind v4 and is dropped.
- Sidebar: the panel uses the sidebar tokens on desktop too. The main
conversation, roster, project and Heute rows share one token-based
row style; muted text measures 4.4:1 on the light sidebar, so row
times use a dimmed foreground instead.
- Side panel and create-bot modal use background, popover and overlay
tokens. Settings helper texts and inactive tabs use the full muted
color, which stays above 4.5:1 in light.
- Stage vignette, stage pill, ensemble and hero orb, and the transcript
paths behind the call overlay use tokens.
- E2E: chat-contrast.spec.ts gains a shell test that measures the
composer draft, sidebar rows, the new bot form and the bot settings
form in both themes and captures screenshots.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SSVQGR4WU92LaddTP19GcQ
Chat markdown hard-coded a near-white text color, so on light surfaces
(ask cards, delegated task briefs, peer and file previews) the text was
white on white. The desktop conversation panel and the bubble and glass
surfaces were hard-coded dark while the text on them follows the theme,
so in the light theme the user's own messages rendered as empty pills.
- Chat markdown uses the foreground token; heading, code and quote colors
come from the shared @rakazo/chat-ui markdown styles instead of
white/emerald overrides. Quotes read in the body color, as on mobile,
so they stay legible in the dimmed transcript.
- User bubbles use the chat-user tokens; bubble and glass card surfaces use
card and border tokens.
- The conversation panel uses the background token on desktop too, as it
already did on mobile. Bot reply footers, summary cards, quick prompt
chips, the awareness strip and the chart expand button drop hard-coded
white/zinc/emerald classes that would vanish on that panel.
- New web E2E measures the contrast of the user's messages, a markdown bot
reply, a delegated brief and an ask card in a group transcript in both
themes and captures screenshots.
Claude-Session: https://claude.ai/code/session_01WnqLpAn8253EY1eCLKVJb2
Co-authored-by: Claude <noreply@anthropic.com>
