Theme Matrix

Text colour utilities

these consume the accessible -text ramp, not the raw fills

on --retro-body-bg

primary · success · danger · warning · info · teal · pink · lime

bold · italic · underline · monospace · xs · sm · lg · xl

on --retro-bg

primary · success · danger · warning · info · teal · pink · lime

Body copy at the default size and leading, for reference.

Badges

fill + on-fill text + hover/active, all from tokens

primary success danger warning info secondary default
xs sm md lg xl xxl
neon neon neon pixel

Buttons

Alerts

Primary — on-fill text comes from --retro-primary-fg.
Success — this was white-on-#2ecc71 (2.10:1) in dark mode.
Danger alert message.
Warning alert message.
Info alert with a footer.
Footer text, previously hardcoded #0099b3.

Heading variants

retro-heading-primary
retro-heading-success
retro-heading-warning
retro-heading-danger
retro-heading-info
retro-heading-teal
retro-heading-pink
retro-heading-lime

combined with retro-heading-variant

primary
success
warning
danger
info
teal
pink
lime

Forms

Helper text uses --retro-text-muted.

Code block & syntax

.keyword was #000080 on #232323 — 1.02:1 in dark mode

// eleven token classes
const total = sum(42) + "px";
class Widget { size = 1; }
<div id="x">

Surfaces

Card header
Card content on --retro-card-content-bg.
Card footer
HeaderHeader
CellCell
StripedCell

Prose

The .retro-prose container caps the measure and opens up leading, so long-form pages stop running edge-to-edge lines. It is opt-in, because applying a max-width to every paragraph would break dashboard and form layouts.

A blockquote, now themed and measure-capped.