Ghost buttons: one balanced primitive for icon+label buttons (cx-s6zvc)
Icon+label ghost buttons now share one primitive with optical padding, so their hover pills look even and their rows read tight (cx-s6zvc, Leo's polish note).
The primitive (webviews/src/ui/ghost.css, .ui-ghost):
- Optical balance: the inset before an icon is the inset after the label minus the icon's side bearing. A 14 px stroke icon's ink starts about 2 px inside its box, so at 28 px tall that's 6 px before the icon and 8 px after the label. A trailing chevron sets its own bearing.
- Icon-to-label gap: 6 px.
- Rows (
.ui-ghost-row): 2 px apart, tighter than a button's own inset, so neighboring hover pills nearly touch. - Labels: medium weight (500), with Apple's tracking for the size (0 at 12 px).
- Small size (
.ui-ghost-sm): 22 px tall, 4.5/6 px insets, 4 px gap, for the composer footer.
The agent pane doesn't load ui.css, so the pane imports ghost.css on its own, and ui.css imports it for the other pages. Callers keep their own colors.
Moved onto it:
| Surface | Before | After |
|---|---|---|
| New Tab tools (Changes, Terminal, Files, Side chat) | 11 px before icon, 9 px gap, 10 px after label, weight 400 | 6 / 6 / 8, weight 500; Terminal's menu chevron 20 px wide instead of 28 |
| No-agent "Integrate a harness" | same as the tools | same as the tools |
| Composer footer folder and branch | 6 px before icon, 4 px gap, 6 px before the chevron (ink 2.5 px heavier on the left) | 4.5 / 4 / 2 (ink even) |
| Other New Tab style's "All chats ›" | link with no padding | ghost button, row hangs 8 px so the text keeps its edge |
Checked, not changed: the settings rows and the toolbars have no icon+label buttons. Their buttons are text-only (Commit, Push, settings buttons) or icon-only. op-next-motion's removal of Integrate a harness from the tools row landed during this PR; the base merge takes that.
Before and after: this PR's gallery render jobs (base vs head) show the New Tab page and agent-pane.composer-context. These are the stages the test measures.
Verification
- Red, then green:
test/ghost-button-balance.test.ts(Chromium, on the real gallery stages). Red on base plus the test: New Tab's ink before the icon vs. the inset after the label off by 3 px; the footer's folder vs. chevron off by 2.5 px. Green: 2 pass. bun run check,ui-rules,gallery-coverage,composer-location-side,new-tab-no-agent,new-tab-default-agentandchat-new-worktreepass.- No new strings.
Changelog
- Changed: icon and label buttons (New Tab tools, the composer's folder and branch) have even padding and sit closer together.
🤖 Generated with Claude Code
![View with [code]smith](https://pr-comments-assets.blacksmith.sh/codesmith/view-with-codesmith-dark-v3.svg)
![Autofix with [code]smith](https://pr-comments-assets.blacksmith.sh/codesmith/autofix-with-codesmith-dark.svg)
Need help on this PR? Tag @codesmith-bot with what you need. Autofix is disabled.
Summary by cubic
Fixes uneven padding on icon+label ghost buttons so hover pills look optically balanced: the inset before an icon is now the inset after the label minus the icon's side bearing, and rows of buttons sit tight together.
Refactors
- Moves New Tab tools, "Integrate a harness", the composer footer's folder and branch, and the other New Tab style's "All chats ›" onto the shared
.ui-ghostprimitive; callers keep their own colors. - The agent pane imports
ghost.csson its own since it doesn't loadui.css;ui.cssimports it for other pages. - Adds a Chromium test measuring the real gallery stages: New Tab's ink imbalance dropped from 3 px to within 0.6 px, the footer's from 2.5 px.