status-pill

A small mono lifecycle badge that sits under a record title. Five semantic variants, driven from one JSON state-vocabulary, themed from the active gf.cx design-system palette. Lifted from home.gf.cx/returns.

The five variants

Note: service shares the resolved green — it's a confirmation, the 🔧 sets it apart from ✓ resolved. The loud orange is the warning variant (high-visibility), not a confirmation colour.

Design-system colours referenced

Each variant maps to a colour active in the portfolio palette (via a CSS custom property with a hex fallback), so pills theme automatically on any surface that defines the tokens.

Data-driven pattern

Tag each pill with data-state (+ optional data-detail), keep one JSON vocabulary on the page, and let status-pill.js compose every pill. The variant class is the no-JS fallback. The two pills below are rendered from the vocabulary at the bottom of this page:

<!-- one vocabulary per page -->
<script type="application/json" data-status-pill>
{ "refund-issued":    { "label": "Resolved · refund issued", "variant": "resolved" },
  "service-complete": { "label": "Service complete",         "variant": "service" } }
</script>

<!-- pills carry only the key + detail -->
<span class="status-pill" data-state="refund-issued"
      data-detail="$551.19 · 12 Jun 2026"></span>

Docs: README · Vocabulary: states.example.json · Source: github · In use: home.gf.cx/returns