Composer: a subtler, glassy focus ring

Merged
TE
19d ago
+36-4

A focused composer now steps its one-device-pixel rim 22% toward the text instead of 30%, so focus reads quieter. That's still well above the 8% step the 10-14 focus audit found invisible. Over art (data-cmux-see-through), focus also brightens the glass card's top-lit rim from #21786, so it looks like light catching a raised pane of glass. The ring itself stays a hairline and never gets heavier.

It uses only existing tokens (--acpmux-composer-edge-focus, --acpmux-composer-rim, --cmux-tone-light) and has no motion. Reduce Transparency draws no rim layer, so it keeps the plain step. Increase Contrast keeps the shared focus ring, and appearance.borders none still clears the rim. The ring stays on the owning card through :has(:focus-visible), never on the field. The New Tab box reads the same --acpmux-composer-edge-focus token, so its focus step gets subtler too. Its glass rim is unchanged.

Testing

composer-rim-hairline.test.ts is real Chromium computing the card's box-shadow. It now expects the 22% step, and it has a new test: over art, keyboard focus brightens the top-lit rim while keeping one quiet ring.

Run on huge-blue with CMUX_BROWSER_TESTS=1 bun test <file> from webviews/:

  • Test-only commit 02213772: the three scale tests fail on the focus alpha (expected 0.3604, received 0.426). -t brightens fails with "focus brightens the top-lit rim".
  • Head 6312d76b: composer-rim-hairline.test.ts 7/7, newtab-quiet-focus.test.ts all pass, focus-visuals.test.ts all pass.

Observed / Not run

  • I ran the above. CI's web react-apps-check stops at the eager-JS-budget step, which also fails on base, before it reaches the webview tests, so CI doesn't cover these tests.
  • I haven't looked at it in a live app build.

Changelog

Changed: The composer's focus ring is subtler, and over art focus brightens the glass edge instead.

🤖 Generated with Claude Code


View with [code]smith Autofix with [code]smith
Need help on this PR? Tag @codesmith-bot with what you need.


Summary by cubic

Makes the composer's focus ring subtler: the one-pixel rim steps 22% toward the text instead of 30%. Over art, keyboard focus now brightens the glass card's top-lit rim instead of making the ring heavier.

Testing

  • Updates composer-rim-hairline.test.ts to expect the 22% step and adds a Chromium test for the glass-rim brightening over art.
  • All 7 tests pass on head; CI doesn't exercise these webview tests.