From 80b441aa75ccc218a82d415b37a483403cf345a6 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 6 Oct 2026 19:29:23 +0000 Subject: [PATCH 1/8] enhance(website): Give the dark playground preview the editor's indigo The dark Live Preview used a neutral grey body and a lighter grey header beside the indigo editor. It now takes the editor's hue a half step above the code, its header matches the editor tab bar, and fields and plain buttons sit in the code color with indigo borders. Co-Authored-By: Claude Opus 5.5 (1M context) Claude-Session: https://claude.ai/code/session_017PRuhAftAGskjoHVcigUFk --- .../components/Playground/styles.module.css | 29 +++++++++++++++---- 1 file changed, 24 insertions(+), 5 deletions(-) diff --git a/website/src/components/Playground/styles.module.css b/website/src/components/Playground/styles.module.css index bb55a52b6907..037a32d311a5 100644 --- a/website/src/components/Playground/styles.module.css +++ b/website/src/components/Playground/styles.module.css @@ -96,11 +96,9 @@ --pg-tab-selected: #e3e8f2; --pg-tab-selected-bg: var(--monoco-code-background); } -/* Dark mode: the editor column sits a step above the code, darker than the - neutral preview headers, so the two sides read apart without a divider */ -:root[data-theme='dark'] - .playgroundContainer:not(.endpointPlayground) - .playgroundTextEdit { +/* Dark mode: the whole frame takes the code's indigo. Bars sit a step above + the code, and the preview a half step, so the top row reads as one band */ +:root[data-theme='dark'] .playgroundContainer:not(.endpointPlayground) { --pg-bar: hsl(229, 14%, 21%); --pg-tab-hover-bg: hsl(229, 14%, 26%); } @@ -280,6 +278,27 @@ div.playgroundTextEdit > .playgroundHeader.subtabs { --pg-tab-selected: var(--pg-tab-hover); } +:root[data-theme='dark'] .playgroundPreview { + --pg-preview-bg: hsl(229, 17%, 19%); + background-color: var(--pg-preview-bg); + /* Controls read these for fills and borders: wells in the code color */ + --ifm-background-surface-color: var(--monoco-code-background); + --ifm-color-emphasis-400: hsl(229, 12%, 31%); +} +/* DesignSystem gives dark fields a neutral emphasis-100 fill instead */ +:root[data-theme='dark'] + .playgroundPreview + :global(.rt-TextFieldRoot:not(.small)), +:root[data-theme='dark'] .playgroundPreview :global(.rt-TextAreaRoot) { + background-color: var(--monoco-code-background); +} +/* The floating label straddles the field's top edge, so it blends into both */ +:root[data-theme='dark'] .playgroundPreview :global(.rt-TextFieldLabel) { + background: linear-gradient( + var(--pg-preview-bg) 50%, + var(--monoco-code-background) 50% + ); +} :root .playgroundPreview { --ifm-heading-margin-bottom: 0.3ex; --ifm-heading-font-weight: 500; From 190e3239322628278e913af42b4b4d71047eee41 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 6 Oct 2026 19:31:59 +0000 Subject: [PATCH 2/8] enhance(website): Match the dark board demo to the indigo preview Co-Authored-By: Claude Opus 5.5 (1M context) Claude-Session: https://claude.ai/code/session_017PRuhAftAGskjoHVcigUFk --- website/src/components/Playground/styles.module.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/website/src/components/Playground/styles.module.css b/website/src/components/Playground/styles.module.css index 037a32d311a5..c71c6915890c 100644 --- a/website/src/components/Playground/styles.module.css +++ b/website/src/components/Playground/styles.module.css @@ -425,6 +425,17 @@ div.playgroundTextEdit > .playgroundHeader.subtabs { padding: 0.25rem 0.5rem; margin-bottom: 0.3rem; } +/* Dark: a well in the code color with cards lifted to the bar, as light + mode lifts white cards off a grey column */ +:root[data-theme='dark'] .playgroundPreview :global(.boardColumn) { + background: var(--monoco-code-background); +} +:root[data-theme='dark'] + .playgroundPreview + :global(.boardColumn) + :global(.listItem) { + background: var(--pg-bar); +} .playgroundPreview :global(.boardColumn) button { margin: 0; padding: 0 4px; From 3d3b0abb0df01789c74710145627cacfbf94a7b1 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 6 Oct 2026 19:38:42 +0000 Subject: [PATCH 3/8] =?UTF-8?q?enhance(website):=20Draw=20the=20Live=20Pre?= =?UTF-8?q?view=20dot=20instead=20of=20the=20=F0=9F=94=B4=20emoji?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The emoji rendered differently on every OS and was the only full-color glyph in the playground chrome. Co-Authored-By: Claude Opus 5.5 (1M context) Claude-Session: https://claude.ai/code/session_017PRuhAftAGskjoHVcigUFk --- .../Playground/preview/PreviewWrapper.tsx | 15 +++++++++------ .../src/components/Playground/styles.module.css | 17 +++++++++++++++++ 2 files changed, 26 insertions(+), 6 deletions(-) diff --git a/website/src/components/Playground/preview/PreviewWrapper.tsx b/website/src/components/Playground/preview/PreviewWrapper.tsx index c83b9b02f804..01c3936d2d7e 100644 --- a/website/src/components/Playground/preview/PreviewWrapper.tsx +++ b/website/src/components/Playground/preview/PreviewWrapper.tsx @@ -8,12 +8,15 @@ export default function PreviewWrapper({ children, headerControls }: Props) { return (
- - 🔴 Live Preview - + + {headerControls}
{children}
diff --git a/website/src/components/Playground/styles.module.css b/website/src/components/Playground/styles.module.css index c71c6915890c..ab1d65a7c60f 100644 --- a/website/src/components/Playground/styles.module.css +++ b/website/src/components/Playground/styles.module.css @@ -590,6 +590,23 @@ div.fixtureJson { left: 0.75rem; } +/* Live Preview label: a drawn dot renders the same on every OS, unlike 🔴 */ +.liveLabel { + display: inline-flex; + align-items: center; + gap: 0.6em; +} +.liveDot { + width: 0.55em; + height: 0.55em; + border-radius: 50%; + flex: none; + /* keep the ring inside the header's padding */ + margin-inline-start: 3px; + background: #ff5f56; + box-shadow: 0 0 0 3px rgba(255, 95, 86, 0.2); +} + /* Preview header badge (Playground `renderCount`) */ .previewHeader { display: flex; From 02a4718a5e20c2e18592478185af6a2d750b4ca2 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 7 Oct 2026 02:02:35 +0000 Subject: [PATCH 4/8] enhance(website): Retheme dark preview fills through emphasis-100 Fields and board columns already read --ifm-color-emphasis-100, so one token replaces two selector overrides. The live dot is now a pseudo-element. Co-Authored-By: Claude Opus 5.5 (1M context) Claude-Session: https://claude.ai/code/session_017PRuhAftAGskjoHVcigUFk --- .../Playground/preview/PreviewWrapper.tsx | 1 - .../components/Playground/styles.module.css | 22 ++++++------------- 2 files changed, 7 insertions(+), 16 deletions(-) diff --git a/website/src/components/Playground/preview/PreviewWrapper.tsx b/website/src/components/Playground/preview/PreviewWrapper.tsx index 01c3936d2d7e..e773b46bec5e 100644 --- a/website/src/components/Playground/preview/PreviewWrapper.tsx +++ b/website/src/components/Playground/preview/PreviewWrapper.tsx @@ -9,7 +9,6 @@ export default function PreviewWrapper({ children, headerControls }: Props) {
-