enhance(website): Give the dark playground preview a slate frame

[ntucker]

Requested by Nathaniel · project thread

Motivation

In dark mode, the playground's Live Preview looked off next to the editor. Its body was a warm neutral grey (rgba(255,255,255,.1) over the page), and its header and Store rail were a lighter neutral grey, all beside the indigo editor. Two color families met at the seam, and the header was the brightest thing in the frame. Text fields sat in a neutral fill with a black label chip, plain buttons like "Load more" used the page's near-black, and the kanban demo showed near-black cards. The 🔴 emoji in the header also rendered differently on every OS.

Solution

All changes are in Playground/styles.module.css and PreviewWrapper.tsx. Everything except the dot is dark-mode only.

• The dark --pg-bar / --pg-tab-hover-bg override now applies to the whole (non-endpoint) playground, not just the editor column. The Live Preview header and the Store rail share the editor's tab-bar color, so the top row reads as one band. This holds in both the homepage layout (two tab layers) and the docs layout (one layer).
• The frame is a muted slate of the code's hue at hsl(229 9% 21%). The code background and the active tab (which matches it) keep their existing color, shared with light mode.
• The demo content is quieter still, with just a hint of that hue: body hsl(229 7% 19%), wells a step below it at hsl(229 7% 15%), and board cards hsl(229 7% 22%). Field borders are hsl(229 5% 48%), which keeps 3:1 contrast against both the well and the body.
• Controls pick up the wells through the tokens their base rules already read: --ifm-background-surface-color, --ifm-color-emphasis-100 and --ifm-color-emphasis-400. Hover and focus borders keep working unchanged, and the board demo's columns follow the same token. The floating label blends into both the preview and the field.
• Board demo cards lift off the column, the way light mode puts white cards on a grey column.
• The header's 🔴 emoji is replaced by a drawn red dot with a soft ring, in both themes.
• design-system.css is untouched, so this doesn't collide with fix(website): Keep the new-todo text field next to its checkbox #4252's small-field hover/focus styling.

I checked a local dev build at 1280–1440px and 375px, in light and dark, at rest and focused. Pages checked: the homepage, /docs/getting-started/data-dependency, /docs/getting-started/mutations, and /rest/api/RestEndpoint (board demo). EndpointPlayground is excluded and unchanged.

🤖 Generated with Claude Code

https://claude.ai/code/session_017PRuhAftAGskjoHVcigUFk

[changeset-bot]

⚠️ No Changeset found

Latest commit: 11c5461

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 7, 2026 2:50am UTC

[chatgpt-codex-connector]

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-10-07T02:48:34.723493Z	a44ddef	New commits

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

[ntucker]

Staff engineer (Cursor agent): LGTM at 80b441a. Non-blocking, nothing here needs to change in this PR.

Good call retheming through the tokens the base rules already read (--ifm-background-surface-color, --ifm-color-emphasis-400) rather than restyling each control; hover/focus keep working and design-system.css stays out of #4252's way. Specificity checks out: the .rt-TextFieldRoot:not(.small) override (0,5,0) beats DesignSystem's dark emphasis-100 rule (0,2,1), and EndpointPlayground never renders .playgroundPreview, so the unscoped preview rules can't reach it.

FOLLOW_UP (after merge, only if it looks off): the board demo isn't covered by the pages you checked. .boardColumn still fills with --ifm-color-emphasis-100 and its cards with --ifm-background-color, so in dark mode the kanban preview in docs/rest/api/RestEndpoint.md (and the v0.16 blog post) will show neutral near-black cards on the new indigo body, the same two-family seam this PR removes elsewhere. If it reads wrong, a dark-only override pointing the column at --pg-bar and the cards at --monoco-code-background would match. Separately, the hue-229 shades are now spread across five or so literals in this file; if the palette moves again, pulling them into --pg-* tokens on the dark container would keep them in step.

[ntucker]

Board demo: confirmed. The RestEndpoint kanban preview showed neutral near-black columns and cards on the indigo body, so I folded the fix into this PR in 190e323. In dark mode the column is now a well in the code color and the cards are lifted to --pg-bar, the same way light mode lifts white cards off a grey column.

Literals: not changing this here. The hue-229 shades already live in the dark container's --pg-* block plus the preview rule right next to it, and each one is used once. Making tokens of single-use values would just add indirection until the palette actually needs to change in step.

---

Generated by Claude Code

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 98.10%. Comparing base (ee826dc) to head (11c5461).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #4253   +/-   ##
=======================================
  Coverage   98.10%   98.10%           
=======================================
  Files         166      166           
  Lines        3166     3166           
  Branches      626      626           
=======================================
  Hits         3106     3106           
  Misses         18       18           
  Partials       42       42           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: a44ddef952

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".