| ink #F3F1EC | 15.11 : 1 |
| teal #1AC7B6 | 8.03 : 1 |
| pink #FF6CA0 | 6.42 : 1 |
| violet #A78BFA | 6.27 : 1 (tightest) |
| yellow #FFD24D | 11.84 : 1 |
Caveat accent word in the accent color, no brush. The one word carries script + color as a single focal point.
five. not five.<span class="cav" style="color:var(--teal)">five.</span> /* font-size:1.5em; no brush */
Deeper accent fill, lighter accent text — the flip from light. All pass 7:1+ on surface.
.b-teal{background:rgba(26,199,182,.16);
color:#5FE6D6}
Surface pill, hairline border, mono index. Hover fills accent tint via --rc.
background:var(--surface); border:1px solid var(--line)
Callouts sit on the raised surface, one step lighter than the page, so they lift off the charcoal without a heavy border.
Raised surface, 3px accent left-border, mono label.
background:var(--surface); border-left:3px solid var(--gc)
# page is dark, code goes deeper --paper: #1A1C20 # page --surface: #232630 # cards --surface-2: #2B2F3A # code
The page is already dark, so code drops to the deepest surface to stay distinct. Hairline border added for edge definition.
bg #2B2F3A + 1px var(--line) border
Any link must set its own ink color.
color:var(--ink)..cross a{color:var(--ink);
text-decoration:none;font-weight:600}
The window itself already renders on --surface-2 even inside the light-mode page — a "dark island" by design, per that page's own comment header. Nothing to remap; only the outer .term-trigger button (currently background:#fff) would need a dark surface if reused directly on a dark page.
The left-hand .inspector-code pane is already --surface-2 in the light page. Only the right-hand .inspector-detail panel (currently var(--g-panel), a light surface) needs a dark remap — same treatment as the Modal's explanation pane, below.
backdrop-filter and mask-image have no color of their own — they blur and fade whatever sits behind them, on either theme. Zero delta to the four-layer stack itself; only the demo frame's chrome (.sb-frame, .sb-content text) needs dark tokens if the demo is reused here.
The one-variable, five-surface trick doesn't change on dark — --hero-accent is still read by var() in the same five places. The whole delta is which hex the variable resolves to: #6FD05F (dark green) instead of light's #5CB84E.
The correctness mechanics — backdrop-click math, native Escape, focus return on the dialog's close event — have no theme dependency at all. The delta is entirely visual: ::backdrop goes to color-mix(in srgb, black 55%, transparent), and the drawer surface moves from white to var(--surface).
.drawer[open]::backdrop{
background:color-mix(in srgb, black 60%, transparent)}
.drawer-explanation{background:var(--surface)}
Unlike Terminal and the inspector's code pane, Tab Lab lived entirely on light chrome (#fff tab cards, var(--paper) result rows). This one needed the full treatment: tabs move to var(--surface), the active tab's inset border stays the lifted accent, result dl cells move to var(--surface) with var(--line) dividers.
Same as Tab Lab — the #fff cards move to var(--surface), and each card's colored top-border draws from the lifted accent set instead of the light one (--green here is #6FD05F, not #5CB84E). The rotate-to-vertical breakpoint is untouched; it's layout, not color.
The recipe was already theme-safe by construction — color-mix(in srgb, var(--accent) 15%, transparent) reads whatever accent it's handed. Handed the lifted dark accents instead of light ones (tint bumped to 18% here; 15% read slightly muddy against charcoal), the badge just works. No new class, no new property.
This file had no --fail before this section — every dark accent so far was one of the vibrant eight, none of them a semantic failure color. Added --fail:#FF5C61 / --fail-ink:#FFA8AB to the root above, lifted the same way as the rest. Unselected buttons move from #fff to var(--surface); the selected-teal treatment reuses the lifted teal already in this file.
.meter-track's empty-state background moves from var(--line) (light, #E6E3DA) to this file's own --line (#363A44) — already correct by virtue of reusing the file's own root. The one real addition: the near-limit gradient now has --fail/--fail-ink to draw from, same as Verdict Buttons above.