#20561 New Tab composer: quiet focus rim and theme-surface fill

Lawrence's feedback on the New Tab composer, plus Leo's and cg-design-judge's follow-ups (10-14). I checked current feat-cmux-next first: both defects were still there.

• Focus ("don't like this focus thing"): focus drew a second ring over the box's one-device-pixel rim. It was one CSS pixel wide (two device pixels at 2x) and 40% accent, which under the default neutral accent is a bright light outline, and it still drew under appearance.borders none. Focus now keeps the rim at its own width (--cmux-hairline, #20481) and only lifts its tone 8% toward the text. borders: none clears the rim whether or not the box is focused. Increase Contrast keeps the shared focus ring.
• Fill ("same bg kinda weird"; Leo: the composer was darker than the page): a new token, --acpmux-composer-surface (composerStates.css), derived from the theme's opaque page color with light-dark(). In a light theme it is the page lifted toward white, so the composer is lighter than the page and near white. In a dark theme it is one small step toward the text, about where it was. The New Tab box and the chat composer both paint it, solid over a wallpaper. The New Tab hover lift (from base) now lays --cmux-hover over this surface instead of repainting the old tint.
• Shadow (cg-design-judge): both composers cast --elevation-1 in a light theme and no shadow in a dark one, where a drop shadow shows nothing. This uses #20519's scale tokens and adds no new shadow.

Ring, fill and shadow only. No layout changes, and the chat composer's focus ring is unchanged. Behaviour change: the New Tab box no longer follows a custom New Tab page surface override (appearance.surfaces) for its fill; it follows the page color the theme reports.

Testing

• webviews/test/newtab-quiet-focus.test.ts (Chromium, dark and light, 1x and 2x) covers:
  • the focus rim's width and tone, with no accent;
  • borders: none while focused;
  • both composers solid and lighter than the page;
  • the shadow: --elevation-1 in light, none in dark.
• Each part was committed red first: the whole file on the merge base, the fill cases on ec036cd472, and the shadow cases on 24fbd8f198 (the merged head). All green on the fix: CMUX_BROWSER_TESTS=1 bun test test/newtab-quiet-focus.test.ts.
• Updated composer-rim-hairline, new-tab-field-on-art and subtle-elevation to match. Those three and new-tab-omnibar-pointer are green locally.
• bun run check passed before the base merge. After it, I ran only the focused tests and the python checks (layers, type scale, system blue, text focus rings) because big-red is short on memory. CI web / react-apps-check runs the full check.
• In-app captures: Mac-built fleet DEV builds of the merge base (a661eeb684bc) and this head (cmux-ci jobs 98addb1c246aaba698068d14 and 0a5c31f99c2abd63e9cfcb3d), on capture slot cua-3, over the Starry Night wallpaper. Themes were switched live through the slot's own config. The mini's host name is masked.

New Tab composer, three light themes, unfocused and focused (left: before, right: after):

New Tab composer, default dark and three dark themes:

Chat composer, three light and four dark themes:

Focusing the New Tab composer (dark default, then Catppuccin Latte). I watched each clip: the rim stays one pixel and there is no flash.

	before	after
dark
Catppuccin Latte

Changelog

• Fixed: The composer no longer draws a bright outline when focused, and in light themes it is lighter than the page instead of a gray slab.

🤖 Generated with Claude Code