feat(ui): one seamless surface — two-plane workbench backgrounds (0299) - #474
Merged
Conversation
added 8 commits
July 11, 2026 23:02
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Signed-off-by: xNet Test <test@xnet.dev>
…nd-b) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Signed-off-by: xNet Test <test@xnet.dev>
…s hardcoded palette colors Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Signed-off-by: xNet Test <test@xnet.dev>
…ews ratchet (0299) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Signed-off-by: xNet Test <test@xnet.dev>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Signed-off-by: xNet Test <test@xnet.dev>
…ody portals Two gaps found during live verification: - :root aliases (--background/--secondary/--muted) substitute var(--surface-*) at :root and inherit the RESOLVED neutral value — .wb-root's ramp never reached them. Re-declared inside the scope. - Menus/selects/dialogs portal to <body>, outside .wb-root, so they resolved the neutral ramp. body:has(.wb-root) extends the palette to portal layers. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Signed-off-by: xNet Test <test@xnet.dev>
Signed-off-by: xNet Test <test@xnet.dev>
…or-consistency-910697
Contributor
|
Preview removed for PR #474. |
Contributor
🖼️ UI changes in this PRInteractionsAuto-captured by CI · run. Informational — not a blocking check. |
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Signed-off-by: xNet Test <test@xnet.dev>
Signed-off-by: xNet Test <test@xnet.dev>
crs48
added a commit
that referenced
this pull request
Jul 12, 2026
Follow-up to #474 (0299 two-plane backgrounds): chrome islands — sidebar, status bar, dock, right context panel, dev-tools toggle, mobile shell islands — no longer cast a drop shadow. They sit flat on the canvas with the hairline border alone drawing the edge. Overlays (modals, menus, dev-tools panel) keep `shadow-pop` so they still read as floating. Removes the `--isl-shadow` token (both `.wb-root` scopes), the `shadow-isl` Tailwind mapping, and all `shadow-isl` class uses; updates the DESIGN_SYSTEM.md doctrine accordingly. Verified live: chrome island `box-shadow` computes to `none`; the dev-tools overlay retains its `--pop-shadow` values. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Implements docs/explorations/0299 — collapses workbench backgrounds to two planes so the whole shell reads as one solid surface.
What changed
Plane A — the paper (
--canvas). Inside.wb-root,--surface-0(and the re-declared--background/--background-subtlealiases) now alias--canvas, so tab content — page editor, database view, settings, chat, canvas — is pixel-identical to the backdrop behind the islands in both modes. Redundant view-root base paints removed (PageView, ChannelView, ThreadPane, settings route, SettingsView, PanelViewHost); hosts paint the plane.Plane B — the islands (
--island-b).--island-popand--popovernow alias--island-b, so modals, the dev-tools panel, floating menus, popovers/selects/command palette, and sheets all share the exact fill of the sidebar and status-bar islands. Elevation is carried byshadow-isl/shadow-pop+ hairline, never by a different fill.Two verification-driven fixes beyond the exploration plan (details in the doc's Implementation Notes):
:rootaliases substitutevar()at:rootand inherit the resolved neutral value —bg-background/bg-secondary/bg-mutednever saw the wb ramp. Re-declared inside.wb-root.<body>, outside.wb-root;body:has(.wb-root)extends the palette to portal layers.Cleanups + guard: DatabaseView's hardcoded
bg-white dark:bg-gray-900popovers → tokens; FormShareBar/ShareDialog raw palette classes → tokens; new CI gatepnpm check:surface-tokens(hard-zero in web/ui/devtools/react with a justified allowlist; ratchet baseline 183 for the packages/views legacy reservoir).Verification
Live-verified in the running app (light + dark): settings and page-editor tabs paint zero backgrounds different from the canvas; dev-tools panel, dropdown menus, and sidebar islands compute the same
background-color; linear/cozy/true-black variants compose unchanged. Full dom test project (2879 tests) and typecheck green.🤖 Generated with Claude Code