cmux next: menus, pickers and popovers are liquid glass like the native context menu

Closed
LU
14d ago
+144-33

cmux's own menus (model picker, access, effort, the Aa reading settings, diff toolbar menus) did not look like the macOS 26 context menu that opens next to them. On plain glass (the default) they now take its look on top of the shared .ui-glass: a neutral tint over a blurred backdrop, 12pt corners, and a light rim inside a dark line.

  • Native menu look (ui/popupSurface.css): on plain glass, .ui-popup.ui-glass takes --surface-menu-tint (dark gray at 25% on dark, white at 60% on light), --surface-menu-blur (blur(20px) saturate(1.3)), a 1pt light rim (--ui-popup-rim) inside a one-device-pixel dark line (--ui-popup-outline), over the shared popup drop. The tint is measured from the native dark menu over a flat page and over a wallpaper, and it is never the theme color, as the system menu's is not. The lens and spectrum modes keep their own glass.
  • Shape: --ui-popup-radius is 12pt and rows 8pt, concentric with the 4pt padding. --ui-popup-shadow carries the same edge, so a popup that is not .ui-glass (the summary card) matches.
  • Outside .ui-glass: the page menu, the diff viewer's toolbar menus, branch picker and file tree menu, and the code editor's suggest, hover, find, parameter hints, rename and quick input widgets use the same tint and blur (--surface-menu, pages/shared/desktop.css).
  • Native: FloatingGlassStyle.menu and Glass.makeMenuPanel (neutral Liquid Glass, 12pt). Used by the Cmd-K actions menu, page menus past the window edge (WebPopupHost), Chief settings and the icon picker. Before macOS 26 they sample behind their window.
  • Reduce Transparency: every one is the solid popup surface with no blur, as before. data-borders="none" clears the rim and the line; Increase Contrast still sets the edge color.

Unchanged: palettes, toolbars, dialogs and hover cards keep their current surfaces. The Extensions menu keeps its theme card: with 40 extensions the glass open missed its frame budget (ExtensionsMenuPerformanceTests). The omnibar suggestions, the Home recipient autocomplete and Monaco's right-click menu do not use these surfaces yet.

Changelog

  • Changed: menus, pickers and popovers are Liquid Glass, like the macOS context menu.
Preview

Tests

  • popup-surface.test.ts (Chromium and WebKit): the page menu and the editor widgets join the glass list; every pane popup casts the same edge as the context menu; the shadow check skips the dark line (a spread layer, not a drop).
  • popup-one-hairline.test.ts: the one inset edge is the 1pt rim (--cmux-hairline-ring).
  • scripts/cmux-next/check-layers.py: accepts backdrop-filter: var(--surface-menu-blur), which is none under Reduce Transparency.

Observed / Not run

  • Observed: prepush-gate.py clean, web typecheck clean, the two popup tests above and subtle-elevation.test.ts pass locally in both engines. The Swift compile passes (tagged build). A tagged build shows the menus over a wallpaper theme.
  • Not run: Swift tests (CI). Light mode was not compared against a native light menu.

No capture: this Mac has no fleet access for cmux-ci capture; the recording above is from a tagged build of this branch on macOS 26, dark mode.