Repository navigation
Subtle elevation: one shared shadow scale, no big halos - #20519
Conversation
Red: --acpmux-popup-elevation stacks a composer-edge hairline on the one already in --ui-popup-shadow. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
--acpmux-popup-elevation stacked a 0.5px composer-edge hairline on the hairline already in --ui-popup-shadow. It now is the shared popup shadow, so every menu and popover has one edge. Increase Contrast colors that one edge in the popup's ink, which the composer-edge hairline did before. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
![cmux-autofix[bot]](https://github.githubassets.com/images/gravatars/gravatar-user-420.png){kind=avatar}
- vp fmt webviews/src/agent-session/acpmux/modelPickerLayout.ts Autofix-Run: https://github.com/manaflow-ai/cmux/actions/runs/38520503432
… it under borders none Red: the pages' .ui-popup and the chat find bar draw a border over the --ui-popup-shadow hairline, and appearance.borders none leaves the hairline drawn. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…s it The pages' .ui-popup drew a 1px border over the --ui-popup-shadow hairline; it now draws no border. The chat find bar keeps its border (its focus cue) and casts --ui-popup-drop, the shadow without the hairline. appearance.borders none sets --ui-popup-edge transparent. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…' into op-next-theme/popup-one-hairline
…irline # Conflicts: # webviews/src/agent-session/acpmux/modelPickerLayout.ts
Keeps cmux-autofix's vp fmt of the base file, which the base merge replaced with the unformatted copy; react-apps-check fails on it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Red on base: the composer's 0.5px rim is half a device pixel at 1x and 0.625 at 1.25x, and it ignores appearance.borders none. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The composer's and the New Tab box's rims were 0.5px inset box-shadows and their focus rings 1px. macOS WebKit snaps an inset shadow's inner edge to device pixels but not its rounded clip, so on a 1x display (and at a fractional page zoom or uiScale) the rim lost whole edges and the arcs next to them. desktop.ts now sets --cmux-hairline (one device pixel) and --cmux-hairline-ring (the whole device pixels nearest 1px) from devicePixelRatio and follows its changes; both rims and every composer focus ring use them. The composer rim clears with appearance.borders none. The composerStates.css base :focus-within rule, always overridden by composerLocation.css, is gone. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…oncentric Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- vp fmt webviews/src/agent-session/acpmux/App.tsx - vp fmt webviews/src/agent-session/acpmux/modelPickerLayout.ts - vp fmt webviews/src/agent-session/acpmux/subagents/subagents.gallery.ts - vp fmt webviews/src/agent-session/acpmux/summary/SubagentStatusList.tsx - vp fmt webviews/src/agent-session/acpmux/summary/cardState.ts Autofix-Run: https://github.com/manaflow-ai/cmux/actions/runs/38525593431
Page zoom and uiScale changes resize the viewport but may not change the resolution media query, so the tokens also update on resize. One query is watched per document. The rim test now asserts the composer's rim and focus-ring alphas and that the shell rim exists. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…ric' into op-next-theme/focus-ring-concentric
- regenerated schemas/defaults/cmux-next.json Autofix-Run: https://github.com/manaflow-ai/cmux/actions/runs/38529373177
…' into op-next-theme/subtle-elevation
…me/subtle-elevation
Web: subtle-elevation.test.ts reads every stylesheet and fails on any blurred drop layer that is not --elevation-1/--elevation-2, on tokens past 8px blur or 16% alpha, and on the swept surfaces not naming the scale. Native: the scale API (PopupStyle.elevation1/elevation2, not yet used) and SubtleElevationTests, which fail while hover cards, toasts, the palette, tab lifts, the drag ghost and the dock backdrop cast their own shadows. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Web: --elevation-1 (0 1px 2px, 7%; 12% dark) and --elevation-2 (0 2px 6px, 11%; 16% dark) in pages/shared/desktop.css. --ui-popup-drop is the raised step, so every menu and popover follows; the composer, New Tab box, find bars, palettes, sheets, hover toolbars, dialogs and cards drop their own 0 8-16px 24-44px halos (up to 35%) for the scale, keeping their rims. Native: PopupStyle.elevation1/elevation2 (same numbers) replace the popup's own shadow values. Hover cards, toasts, the palette, page info, the omnibar, a lifted tab, group chip or sidebar row, the tab drag ghost (28% at radius 10), the dock backdrop (an opaque radius-12 halo), task cards and the page-info switch knob all cast a step of the scale. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configuration
You can disable this status message by setting the Use the checkbox below for a quick retry:
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
red: web / Web status; do not merge until green; see lane-rules |
|
Unclear: CI failed on
Not re-run automatically: Written by |
|
Agents: |
…ecked Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
Bead |
|
cmux-next tour of The tour job failed before the tour ran (build or setup); the run log has the output. The tour produced no media. Tours are data in |
This comment has been minimized.
This comment has been minimized.
- SubtleElevationTests: TabCell is not a view; walk its layer instead. - Keep the OptChat inspector's own tip shadow: it is a standalone page bundled into optchat-chief without the desktop layer, so the scale's tokens are undefined there (and its committed page stays current). - --ui-popup-drop and the gallery shell window fall back to the same step where desktop.css is not loaded, so an undefined token never drops a popup's whole shadow and rim; the sidebar prototype loads desktop.css. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…theme/subtle-elevation # Conflicts: # webviews/src/agent-session/acpmux/composerLocation.css # webviews/src/agent-session/acpmux/newtab/screen.css # webviews/src/pages/shared/desktop.css
- regenerated schemas/defaults/cmux-next.json Autofix-Run: https://github.com/manaflow-ai/cmux/actions/runs/38542222416
…theme/subtle-elevation # Conflicts: # Packages/macOS/CmuxNext/Sources/CmuxNextBrowser/PageInfo/UI/PageInfoPanel.swift # webviews/src/agent-session/acpmux/conversation/conversation.css # webviews/src/ui/popupSurface.css # webviews/test/popup-one-hairline.test.ts
…theme/subtle-elevation
- vp fmt webviews/test/ime-composition-keys.test.ts Autofix-Run: https://github.com/manaflow-ai/cmux/actions/runs/38564033187
Bugbot needs on-demand usage enabledBugbot uses usage-based billing for this team and requires on-demand usage to be enabled. A team admin can enable on-demand usage in the Cursor dashboard. |
…theme/subtle-elevation # Conflicts: # webviews/src/agent-session/acpmux/styles.css
![Fix with [code]smith](https://pr-comments-assets.blacksmith.sh/codesmith/fix-with-codesmith-light.svg)
- vp fmt webviews/src/pages/home-channels/AttachmentViews.tsx - vp fmt webviews/src/pages/home-channels/Composer.tsx - vp fmt webviews/src/pages/home-channels/HomeChannelsPage.tsx - vp fmt webviews/src/pages/home-channels/attachmentService.ts - vp fmt webviews/src/pages/home-channels/icons.tsx Autofix-Run: https://github.com/manaflow-ai/cmux/actions/runs/38577497492
Menus, popovers, the composer, the New Tab box, find bars, palettes, sheets and the tab drag ghost each cast their own drop shadow, many of them big and soft (
0 16px 34pxat 28-30%,0 12px 40pxat 22%, an opaque 12 pt halo around a docked column). Every shadow now comes from one two-step scale, the same numbers on the web and in AppKit: a tight, low-alpha drop under the surface, with the thin rim carrying the edge. Nothing gets a new look; shadows only get smaller.Built on current base, which has #20461 (one popup hairline) and #20481 (device-pixel rims). The rims are untouched; only the drops change.
Tokens
pages/shared/desktop.css)PopupStyle)--elevation-1/.elevation10 1px 2pxblack 7% (dark 12%)--elevation-2/.elevation20 2px 6pxblack 11% (dark 16%)prefers-color-scheme: dark, ordata-theme="dark"in the agent pane).--ui-popup-dropis nowvar(--elevation-2), so--ui-popup-shadowand--acpmux-popup-elevation(every Base UI menu and pane popover) follow. Rims stay separate: webviews: popups draw one hairline, not two #20461's--ui-popup-edgehairline and Composer and New Tab rims draw one device pixel, concentric at every scale #20481's--cmux-hairlinerings are untouched.Elevation(offset, blur, alpha,layerRadius= blur / 2 for Core Animation,layerOffset(flipped:),shadow()forNSShadow).PopupStyle.standard.elevationis.elevation2, and the oldshadowOffset/shadowBlur/shadowAlpha/shadow()are gone, so no call site can keep its own numbers.appearance.borders = noneclears rims only, so shadows stay. Reduce Transparency and Increase Contrast behave as before.Inventory (before → after)
Web (
webviews/src):.nt-popover,.lg-paletteui/popupSurface.css--ui-popup-drop0 2px 8px12%--elevation-22841396bacpmux/composerLocation.css0 8px 24px18%--elevation-20f8d6805(#20303)acpmux/composerLocation.css0 4px 14px10%--elevation-20f8d6805acpmux/newtab/screen.css0 12px 32px -18px40%--elevation-2663bd736acpmux/styles.css0 12px 32px -18px40%--elevation-2b75d89c9acpmux/styles.css0 1px 2px25%--elevation-1b75d89c9acpmux/styles.css0 16px 40px35%--elevation-2e2e74d24acpmux/styles.css0 8px 24px35%--elevation-2bd5b4722acpmux/conversation/conversation.css0 4px 14px18%--elevation-2622e57eeacpmux/conversation/conversation.css0 4px 14px14% +0 1px 2px10%--elevation-2641a5af3acpmux/threadMinimap/threadMinimap.css0 4px 14px9%--elevation-2225ea274acpmux/handoff/styles.css0 4px 16px12% (text color)--elevation-2a15090ffacpmux/addProject.css0 12px 36px27%--elevation-2224eda31acpmux/composerAttachments.css0 16px 44px28% /0 8px 24px18% /0 1px 2px15%-2/-2/-1e08117d6acpmux/composerControls.css0 1px 3px20%--elevation-18a44d921pages/shared/desktop.css0 2px 8px16%--elevation-266dd3104pages/shared/pageBase.css0 6px 24px18%--elevation-282ae6117pages/markdown/styles.css0 6px 24px18%--elevation-268855685pages/cloud/styles.css0 12px 40px22%--elevation-2bdaaf04cui/ui.css.ui-sheet0 -8px 30px22%--elevation-2d5189aabpages/home-channels/ledger.css-12px 0 32px -16px35%--elevation-2c93267a0pages/home-channels/styles.css0 2px 8px12%--elevation-29f8d556cicon-picker/styles.css0 4px 18px16%--elevation-26d7b696aviewer-empty/styles.css0 14px 44px24%--elevation-299df3371styles.css0 16px 34px28-30%--elevation-214aa604estyles.css0 8px 24px18%--elevation-2d13dde39styles.css0 6px 18px22%--elevation-214aa604estyles.css-18px 0 42px34%--elevation-2b129a866styles.css0 1px 2px10% +0 2px 8px6%--elevation-1ed02a9900 24px 64px50%--elevation-2Native (
Packages/macOS/CmuxNext):CmuxNextDesign/PopupStyle.swiftPopupHostView.elevation2e17da11bCmuxNextDesign/Toast/CmuxToastView.swift.elevation2NSShadow)CmuxNextPalette/PaletteContentView.swift,PageInfoPanel.swift(now drawn byPopupHostView).elevation2CmuxNextBrowser/UI/OmnibarViews.swift.elevation2shadow)CmuxNextBrowser/UI/OmnibarViews.swift.elevation2ff755beaCmuxNextApp/Drag/TabDragGhostPanel.swift.elevation2a367ef42TabCell.swift,TabGroupChipCell.swift,DragLiftView.swift.elevation216566c51CmuxNextLayout/Views/DockBackdropView.swift.elevation2fa21a064CmuxNextTasks/Views/TasksBoardView.swift.elevation1/.elevation22964b216PageInfoToggle.swift.elevation1ddeefff0Left as they are:
ShortcutHintChipView, Lawrence's): CA radius 2 at 22% black. Tight, so unchanged; the alpha is above the scale's 16% cap, noted here rather than changed.PopupHostView, so it follows the shared value swap. Its openers and code are untouched (deferred to Lawrence's chief).0 -8px 30px), the diff file-search drawer (-18px 0 42px) and the Channels side sheet (-12px 0 32px -16px). Their rims carry the edge now.0 4px 14px18%): a standalone page bundled into optchat-chief without the desktop layer, so the tokens are undefined there; the web ratchet skips it.hasShadow = trueon the native tooltip, Quick Composer, restart notice, feed, notifications, update sheet and onboarding drag panels): AppKit's own panel shadow.PaneOverlayViewring glow, launch mark), which are colored rings, not elevation.Captures
Fleet DEV builds on a cua-4 capture slot, the same seeded window: before = feat-cmux-next
772b6ea30a5b(build nxtip3-v1), after = this branch10d7d6927907(build subtleelev2). Dark, light, and dark over a desktop wallpaper. Each still is before | after. The mini's host name is blurred.The difference is easiest to see on the New Tab box (right pane: the soft 32px halo under it is gone), the model picker and the command palette (a tight edge instead of a spread). The hover card was already on the shared popup shadow, so it changes only slightly.
Recording (dark, 8 s, watched): the main window from both builds side by side.
debug.window_recordcaptures the main window only, so it shows the composer and New Tab box at rest; the menus, palette and hover card are in the stills above.plan image 20519/dark-1-composer.jpg
plan image 20519/dark-2-model-picker.jpg
plan image 20519/dark-3-palette.jpg
plan image 20519/dark-4-hover-card.jpg
plan image 20519/light-1-composer.jpg
plan image 20519/light-2-model-picker.jpg
plan image 20519/light-3-palette.jpg
plan image 20519/light-4-hover-card.jpg
plan image 20519/wallpaper-1-composer.jpg
plan image 20519/wallpaper-2-model-picker.jpg
plan image 20519/wallpaper-3-palette.jpg
plan image 20519/wallpaper-4-hover-card.jpg
plan gif 20519/elevation-dark-before-after.gif (from elevation-dark-before-after.mp4)
plan video 20519/elevation-dark-before-after.mp4
uploaded 20519/dark-1-composer.jpg
uploaded 20519/dark-2-model-picker.jpg
uploaded 20519/dark-3-palette.jpg
uploaded 20519/dark-4-hover-card.jpg
uploaded 20519/light-1-composer.jpg
uploaded 20519/light-2-model-picker.jpg
uploaded 20519/light-3-palette.jpg
uploaded 20519/light-4-hover-card.jpg
uploaded 20519/wallpaper-1-composer.jpg
uploaded 20519/wallpaper-2-model-picker.jpg
uploaded 20519/wallpaper-3-palette.jpg
uploaded 20519/wallpaper-4-hover-card.jpg
uploaded 20519/elevation-dark-before-after.gif
uploaded 20519/elevation-dark-before-after.mp4
Full quality: elevation-dark-before-after.mp4
Not captured: a toast, a tab drag and a native context menu. A no-activate slot can't raise them without closing tabs. The toast, the tab drag ghost and the lifted tab are covered by
SubtleElevationTestsbelow.Testing (red and green)
heavy --mem 4G bun test test/subtle-elevation.test.ts: red on2da8059cd2ac(38 of 39 failed: no tokens, 30+ literal blurred drops, every swept surface on its own shadow) → green on the head (39/39). It fails on any blurred drop that is not--elevation-1/2, on tokens over 8px blur or 16% alpha (light and dark), when the native numbers drift from the web ones, and when a swept surface stops naming the scale.run-swift-testing-suites.sh Packages/macOS/CmuxNext(Xcode 26.6, aws-m4pro):2da8059cd2ac(step keyop-next-theme-shadows-red-2da8059cd2ac…):SubtleElevationTests7 of 8 failed with 18 issues, for example the drag ghost at radius 10 / 28%, a lifted tab at radius 8, and the paletteNSShadowat blur 8 / 12%. Every other suite passed.10d7d6927907(op-next-theme-shadows-green-10d7d6927907…): 291/291 suites PASS,SubtleElevationTests8/8. The updatedPolishCalmChromeTests,PaletteShadowTestsandOmnibarCardElevationTestspass too.AcpmuxBundleReplacedTestsskipped: the head's cmux-tui tree isn't published). That is unrelated to this change.noNativeShadowPassesTheCapwas added after the red run, so its red is not recorded.popup-surface.test.ts(browser lane, CI only; it now readselevation2) andui-rules.check-theme-scope,check-system-blue,check-motion,crash_ratchet(ok),check-no-godfiles --base <merge-base>(no touched file flagged),vp check, type-scale, text-focus.check-concurrency(ControlWorkspaceInfoCache.swift)lint-ios-package-conventions(PaneAnimationsSetting.swift)check-layers(summary.css raw z-index)TabCellisn't a view), the OptChat inspector's committed page went stale, and a host without desktop.css would lose the popup shadow and rim (--ui-popup-dropnow falls back to the same step).Changelog
Changed: Menus, popovers, cards and the composer use a subtle shadow instead of a large soft one.
🤖 Generated with Claude Code