Curated themes

Preview Available in release assets

Ship 5 complete, named theme mappings: Paper (warm serif reading), Market (warm commercial accent), Night Signal (dark native color scheme), Blueprint (cool structured presentation), High Contrast (system color roles).

Curated themes primary example

<div class="thin-grid">
  <section data-theme="paper">
    <h2>Paper</h2>
    <p>Warm serif reading.</p>
  </section>
  <section data-theme="market">
    <h2>Market</h2>
    <p>Warm commercial accent.</p>
  </section>
  <section data-theme="night-signal">
    <h2>Night Signal</h2>
    <p>Dark native color scheme.</p>
  </section>
  <section data-theme="blueprint">
    <h2>Blueprint</h2>
    <p>Cool structured presentation.</p>
  </section>
  <section data-theme="high-contrast">
    <h2>High Contrast</h2>
    <p>System color roles.</p>
  </section>
</div>

Show code

<div class="thin-grid">
  <section data-theme="paper">
    <h2>Paper</h2>
    <p>Warm serif reading.</p>
  </section>
  <section data-theme="market">
    <h2>Market</h2>
    <p>Warm commercial accent.</p>
  </section>
  <section data-theme="night-signal">
    <h2>Night Signal</h2>
    <p>Dark native color scheme.</p>
  </section>
  <section data-theme="blueprint">
    <h2>Blueprint</h2>
    <p>Cool structured presentation.</p>
  </section>
  <section data-theme="high-contrast">
    <h2>High Contrast</h2>
    <p>System color roles.</p>
  </section>
</div>

Anatomy

Paper mapping
Market mapping
Night Signal dark mapping
Blueprint mapping
High Contrast system-color mapping

Variants and sizes

Paper
Market
Night Signal
Blueprint
High Contrast

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

States and difficult content

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Light schemes
Dark scheme
System colors
Native controls
Keyboard focus
Reduced motion
Nested scopes

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Themes alter semantic token values and native color-scheme hints only; no client script is required.

Accessibility

Night Signal declares a dark native color scheme. High Contrast uses system colors in forced-colors mode. Every mapping is validated against the contrast requirements in tokens/contrast.ts. Theme mappings are a starting contract, not a substitute for reviewing real content, status cues, focus, zoom, and forced-colors behavior.

Contract: PLATFORM
Basis: Native CSS layout and document defaults over semantic HTML; no APG widget

API

Load /themes.css for all mappings or /themes/{name}.css for one mapping, then author the matching data-theme value. Theme names are paper, market, night-signal, blueprint, and high-contrast. Load /fonts.css separately to opt into the named families.

Behavior tier: css-only

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Semantic content and browser color defaults remain without a curated mapping.

Assets and dependencies

/themes.css
/themes/paper.css
/themes/market.css
/themes/night-signal.css
/themes/blueprint.css
/themes/high-contrast.css

Dependencies: None

Source: packages/ui/src/tokens/themes.ts

Composition

Derived from the examples and style specs, not authored.

Composes

Grid