Text sizes now follow a --font-scale variable that is 1 on wider screens and
8/7 below 768px, so the 14px base text reads at 16px on phones (Safari stops
zooming into fields at that size) and every other size grows by the same
ratio. One-off pixel sizes in the shell move onto the shared text tokens so
they scale too. The stage subtitle now truncates inside the screen instead
of spilling past both edges.
Claude-Session: https://claude.ai/code/session_01PFEDgbyJm12ExL3Kn4Dk8B
Co-authored-by: Claude <noreply@anthropic.com>
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.
Claude-Session: https://claude.ai/code/session_01SSVQGR4WU92LaddTP19GcQ
Co-authored-by: Claude <noreply@anthropic.com>
