docs(website): Separate the dark editor bar and tighten DiffEditor padding

[ntucker]

Requested by Nathaniel · project thread

Before: after #4174, dark mode gave the editor tab bars and the Live Preview header the same neutral grey, so the code side and the preview side ran together. In the Before/After DiffEditor, code sat about 32px in from the left edge, and there was more space above the first line than below the last.

After: in dark mode the editor column's bars sit one step above the code, darker than the neutral preview headers, so the two sides read apart from tone alone, with no divider line. Diff code now starts about 13px in from the edge, and there are 10px above and below. Light mode and the endpoint playground are unchanged.

How: a dark-only override of --pg-bar and --pg-tab-hover-bg, scoped to .playgroundTextEdit outside .endpointPlayground. Side-by-side Monaco forces a glyph margin on the original pane, so DiffEditorMonaco turns it off after mount; the Before/After labels still align because they read each pane's contentLeft.

🤖 Generated with Claude Code

https://claude.ai/code/session_01KR7TVj44kxYCnGtVXVkx3f

---

Note

Low Risk
Visual-only playground and Monaco diff styling; no API, auth, or data handling changes.

Overview
Dark mode playground chrome now uses darker --pg-bar and tab-hover colors on the editor column only (.playgroundTextEdit, excluding endpoint playgrounds), so the code side reads apart from neutral Live Preview headers without a divider. Light mode and endpoint playgrounds are unchanged.

Before/After diff layout turns off Monaco’s glyph margin on the original pane after mount so side-by-side code isn’t pushed ~32px inward; label alignment still uses each pane’s contentLeft. Standalone diff views get 10px top padding above the editor (via .diffLabels + .playgroundEditor) to match spacing below the last line.

^{Reviewed by Cursor Bugbot for commit d0b1472. Bugbot is set up for automated code reviews on this repo. Configure here.}

[changeset-bot]

⚠️ No Changeset found

Latest commit: d0b1472

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
docs-site	Ready	Preview	Oct 5, 2026 2:31am UTC

[ntucker]

Staff engineer (Cursor agent): LGTM at dbd28f4. Nothing for this PR to change.

What I checked:

• The dark-only --pg-bar / --pg-tab-hover-bg override is token-only and stays scoped: EditorSurface renders .playgroundTextEdit as a direct child of the .endpointPlayground container in EndpointPlayground.tsx, so :not(.endpointPlayground) > .playgroundTextEdit correctly leaves the always-dark endpoint playground on its own tokens. Light mode is untouched.
• Turning off glyphMargin on the original pane is safe here. DIFF_OPTIONS is a module constant (so the wrapper never re-pushes options), and the revert icon and gutter menu that would use that margin are already disabled. The Before/After labels read contentLeft, so they follow the new indent.

Optional FOLLOW_UP, not blocking:

• .standaloneEditor .diffLabels + .playgroundEditor { padding-top: 10px } and .playgroundContainer.standaloneEditor .playgroundEditor { padding-top: 12.8px } have the same specificity (0,3,0), so the diff only gets 10px because its rule comes later in the file. If someone reorders the file, the gap silently goes back to 12.8px. Next time this file is touched, either fold the diff case into the standalone rule (for example, .standaloneEditor .playgroundEditor:not(.diffLabels + *)) or add a short comment saying the order matters.
• The > in the dark override relies on EditorSurface staying a direct child of the endpoint container. If a wrapper is ever added there, the endpoint playground will pick up the darker editor bar. .endpointPlayground .playgroundTextEdit resetting to the endpoint tokens would be sturdier, but it's not worth churning now.

[ntucker]

Both optional follow-ups are folded in at d0b1472.

• The diff rule is now .playgroundContainer.standaloneEditor .diffLabels + .playgroundEditor at (0,4,0), so it outranks the standalone rule no matter where it sits in the file.
• The dark override is now :root[data-theme='dark'] .playgroundContainer:not(.endpointPlayground) .playgroundTextEdit, which uses a descendant combinator, so adding a wrapper can't leak it into the endpoint playground.

Measured again in dark mode: the homepage editor bar resolves to hsl(229, 14%, 21%), the endpoint playground keeps hsl(229, 8%, 26%), and the diff still measures 10px above the first line and 10px below the last.

---

Generated by Claude Code