Content

ProseList .

Listas com marcador dash (técnico) ou dot (benefício), escopadas para não vazar na UI.

ProseList · light surface

Prose marker list. Two variants: dash (green horizontal bar, --text-accent) for dense/technical lists; dot (green filled circle, --accent-dot) for benefit/highlight lists. Max one dot list per article. Markers are component-scoped — structurally cannot leak to UI labels. Real <ul>/<li> semantics for AT.

marker="dash" — technical/spec list (items prop)

Green dash (--text-accent = green-700 on light). Dense technical enumerations. Marker via ::before pseudo-element — decorative, not read by AT.

  • Role tokens re-resolve per surface — no per-component hex overrides
  • display → 36→72px clamp; --size-h1 raised to 52px to close the gap
  • Marker CSS is scoped to .prose-list--dash li::before — cannot reach labels
  • npx astro check + npm run build must both stay green (zero type errors)

marker="dot" — benefit/highlight list (slot API) · MAX ONE per article

Green dot (--accent-dot = green-500 on light). Benefit/advantage lists. Uses the default slot so the consumer controls <li> markup directly.

  • One token system, four named surfaces — zero per-surface overrides
  • Surface-aware role tokens: --text-accent is green-700 light, green-400 dark
  • Strict TypeScript Props contracts carry intent across sessions

marker="dash" — slotted <li>s (slot API)

Both prop and slot APIs render the same markup. The slot lets consumers pass structured <li> content (links, inline code, etc.).

  • Semantic <ul> — AT announces "list, 3 items"
  • Decorative ::before pseudo — content:"" for dot, inline shape for dash
  • Color is decoration only — text and list semantics carry meaning

ProseList · dark surface (carbon)

data-surface="carbon" — --text-accent resolves to --green-400 (electric); --accent-dot also resolves to --green-400. Both markers re-theme automatically — zero overrides in ProseList.astro.

marker="dash" · carbon surface

  • --text-accent → --green-400 on dark (electric) — dash turns electric green
  • No overrides in ProseList.astro — the surface cascade does all the work
  • Role tokens: the only way colour should reach a component

marker="dot" · carbon surface

  • --accent-dot → --green-400 on dark surfaces — dot turns electric
  • Same token, same cascade — both markers unified on dark
  • Brand dot signature reads consistently on every named surface