Problem
On the home page hero ("Real HTML first. JavaScript only when it earns it."),
the left-hand components/like-button.ts code pane is hardcoded to a dark
editor background in BOTH themes. In light theme this reads as an unstyled
black box, inconsistent with every other code window on the same page (the
"whole stack, in three files" section) and with /docs code blocks, which
all pick up the theme automatically.
Found live on https://webjs.dev during post-merge QA of the brand/design
system PR (#1179): reproduced identically on the Railway origin
(https://webjs.up.railway.app, bypassing any CDN cache), so it is a genuine
defect in the shipped code, not a caching artifact.
Design / approach
Two other code windows on the same page (codeWindow(), used for the
"whole stack, in three files" cards) already get this right: they use
bg-bg-elev (a semantic token that flips with the theme) plus the shared
.t-* syntax-highlight classes, which already have a :root[data-theme='dark']
override in public/input.css. The hero pane should use exactly that pattern
instead of its own hardcoded override.
Implementation notes (for the implementing agent)
- Where to edit:
website/app/page.ts: the inline <style> block (around L161-174) has
.stage-code { background: oklch(0.09 0.005 60); } plus
.stage-code > div:first-child, .stage-code pre overrides forcing dark
colors unconditionally. Delete this block. The .stage-code div itself
(around L231, <div class="stage-code min-w-0 border-b ...">) needs
bg-bg-elev added to its class list (matching the WIN constant used by
codeWindow() at L95) so it participates in the normal theme flip instead.
website/public/input.css: around L258-268, a
.stage-code .t-str / .t-kw / .t-fn / ... block hardcodes the same
syntax colors used by the dark-mode override at L270-280. Delete it; the
base .t-* rules (L250-257) plus the existing
:root[data-theme='dark'] .t-* / @media (prefers-color-scheme: dark)
rules (L270-280) already produce the correct light/dark colors with no
per-component override needed.
- Landmines: the removed CSS custom properties (
--code-tag, --code-attr,
etc.) set inside .stage-code pre are NOT read by the highlight()
tokenizer output (.t-* classes) that actually renders inside that <pre>;
they were dead overrides layered on top of the real (also-overridden) .t-*
rules. Confirm nothing else in app/page.ts reads those same
--code-tag/--code-attr/--code-str vars in a way that depended on the
.stage-code-scoped values specifically (the root-level :root /
:root[data-theme='dark'] definitions at L118-139 remain and still drive
the editor-mockup panels further down the page, e.g. L298+).
- Invariants:
references/styling.md / AGENTS.md "Styling: Tailwind-first"
say prefer semantic tokens (bg-bg-elev) over hand-rolled color values;
this fix is a straightforward application of that rule to a component that
had drifted from it.
- Tests + docs: this is website-local presentation, no framework API change,
so no AGENTS.md / skill update needed. Verify with webjs check (website)
and npm test (unit + browser), plus a manual light/dark screenshot check
of the hero section (no existing test pins this CSS, per a repo-wide grep).
Acceptance criteria
Problem
On the home page hero ("Real HTML first. JavaScript only when it earns it."),
the left-hand
components/like-button.tscode pane is hardcoded to a darkeditor background in BOTH themes. In light theme this reads as an unstyled
black box, inconsistent with every other code window on the same page (the
"whole stack, in three files" section) and with
/docscode blocks, whichall pick up the theme automatically.
Found live on https://webjs.dev during post-merge QA of the brand/design
system PR (#1179): reproduced identically on the Railway origin
(https://webjs.up.railway.app, bypassing any CDN cache), so it is a genuine
defect in the shipped code, not a caching artifact.
Design / approach
Two other code windows on the same page (
codeWindow(), used for the"whole stack, in three files" cards) already get this right: they use
bg-bg-elev(a semantic token that flips with the theme) plus the shared.t-*syntax-highlight classes, which already have a:root[data-theme='dark']override in
public/input.css. The hero pane should use exactly that patterninstead of its own hardcoded override.
Implementation notes (for the implementing agent)
website/app/page.ts: the inline<style>block (around L161-174) has.stage-code { background: oklch(0.09 0.005 60); }plus.stage-code > div:first-child,.stage-code preoverrides forcing darkcolors unconditionally. Delete this block. The
.stage-codediv itself(around L231,
<div class="stage-code min-w-0 border-b ...">) needsbg-bg-elevadded to its class list (matching theWINconstant used bycodeWindow()at L95) so it participates in the normal theme flip instead.website/public/input.css: around L258-268, a.stage-code .t-str/.t-kw/.t-fn/ ... block hardcodes the samesyntax colors used by the dark-mode override at L270-280. Delete it; the
base
.t-*rules (L250-257) plus the existing:root[data-theme='dark'] .t-*/@media (prefers-color-scheme: dark)rules (L270-280) already produce the correct light/dark colors with no
per-component override needed.
--code-tag,--code-attr,etc.) set inside
.stage-code preare NOT read by thehighlight()tokenizer output (
.t-*classes) that actually renders inside that<pre>;they were dead overrides layered on top of the real (also-overridden)
.t-*rules. Confirm nothing else in
app/page.tsreads those same--code-tag/--code-attr/--code-strvars in a way that depended on the.stage-code-scoped values specifically (the root-level:root/:root[data-theme='dark']definitions at L118-139 remain and still drivethe editor-mockup panels further down the page, e.g. L298+).
references/styling.md/ AGENTS.md "Styling: Tailwind-first"say prefer semantic tokens (
bg-bg-elev) over hand-rolled color values;this fix is a straightforward application of that rule to a component that
had drifted from it.
so no
AGENTS.md/ skill update needed. Verify withwebjs check(website)and
npm test(unit + browser), plus a manual light/dark screenshot checkof the hero section (no existing test pins this CSS, per a repo-wide grep).
Acceptance criteria
components/like-button.tspane background matches the"whole stack, in three files" code windows in both light and dark theme
webjs checkpasses with no new violationsnpm test(unit + browser) passes with no regressions.stage-codeor its removed CSS customproperties anywhere in
website/