From 8c6fea5ef1a9bfdc7929d2512d019dff590966e3 Mon Sep 17 00:00:00 2001
From: prismiwi2015 <daniel.lopez@automattic.com>
Date: Mon, 24 Aug 2026 15:29:25 +0200
Subject: [PATCH] The preview's controls answer to the form theme, not the
 shell's
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

OpenStation paints raw controls in native window bodies with its own
tokens — `.os-window__body :is( input[type], select, textarea )` at
(0,2,1) — which outranks `.atf-form .atf-input` at (0,2,0). So a light
form theme previewed on a dark desktop theme rendered near-black selects
and inputs inside a white card, in the builder canvas, the Theme tab and
the Theme Studio alike.

A shield in builder.css restates only the properties the shell claims
(background-color, color, border-color, and the placeholder colour) with
the form's own tokens at (0,3,0), mirroring form.css's field-style
ladder in the same source order so the preview's internal cascade stays
exactly the front end's.

Verified on the 8889 site against the dark official OpenStation theme:
Clean previews light, Midnight previews with its own surface, the filled
variant keeps its --atf-surface-alt ground and transparent border.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DVAaHFURDGeBzeuWHZ2dcP
---
 assets/css/builder.css | 54 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)

diff --git a/assets/css/builder.css b/assets/css/builder.css
index ddf760c..507fb7f 100644
--- a/assets/css/builder.css
+++ b/assets/css/builder.css
@@ -1694,6 +1694,60 @@ html body.atf-drag-active [contenteditable="true"] {
 	background: #0a0d10;
 }
 
+/* --- The shell's control theming, kept out of the preview ------------------
+ *
+ * OpenStation paints raw controls in native window bodies with its own tokens:
+ * `.os-window__body :is( input[type="text"], …, select, textarea )` sets
+ * background-color, color and border-color to `--os-ui-*`, and weighs (0,2,1)
+ * — one point over `.atf-form .atf-input` at (0,2,0). So a light form theme
+ * previewed on a dark desktop theme got the desktop's ink: white labels on a
+ * white card around a near-black select. Same for `::placeholder`, which the
+ * shell also claims at (0,2,1).
+ *
+ * These rules restate ONLY the properties the shell claims, with the form's
+ * own tokens, at (0,3,0) — above anything the shell writes, below nothing else
+ * of ours that matters. They mirror form.css's field-style ladder (outline /
+ * filled / underline / none, hover and focus) in the same source order, so the
+ * preview's internal cascade stays exactly the front end's; if that ladder
+ * grows a variant, it must be mirrored here.
+ *
+ * The compound `.atfb-preview.atf-form` is deliberate: on the canvas the
+ * preview element IS the form element, so a descendant-only prefix would miss
+ * it. */
+:is( .atfs-preview__frame .atf-form, .atfb-preview.atf-form, .atf-block-preview .atf-form ) .atf-input {
+	background-color: var( --atf-surface );
+	color: var( --atf-text );
+	border-color: var( --atf-border );
+}
+
+:is( .atfs-preview__frame .atf-form, .atfb-preview.atf-form, .atf-block-preview .atf-form ) .atf-input::placeholder {
+	color: var( --atf-placeholder );
+}
+
+:is( .atfs-preview__frame .atf-fields-filled, .atfb-preview.atf-fields-filled, .atf-block-preview .atf-fields-filled ) .atf-input {
+	background-color: var( --atf-surface-alt );
+	border-color: transparent;
+}
+
+:is( .atfs-preview__frame .atf-fields-underline, .atfb-preview.atf-fields-underline, .atf-block-preview .atf-fields-underline ) .atf-input {
+	background-color: transparent;
+}
+
+:is( .atfs-preview__frame .atf-fields-none, .atfb-preview.atf-fields-none, .atf-block-preview .atf-fields-none ) .atf-input {
+	background-color: transparent;
+	border-color: transparent;
+}
+
+/* After the variants, as in form.css: focus's border beats filled's
+   transparent one. */
+:is( .atfs-preview__frame .atf-form, .atfb-preview.atf-form, .atf-block-preview .atf-form ) .atf-input:hover:not( :disabled ) {
+	border-color: var( --atf-border-focus );
+}
+
+:is( .atfs-preview__frame .atf-form, .atfb-preview.atf-form, .atf-block-preview .atf-form ) .atf-input:focus {
+	border-color: var( --atf-border-focus );
+}
+
 /* The pointer the admin page shows when the desktop shell is up and the native
    window is the real experience. */
 .atf-admin__pointer {