# format-chips

A row of small, mono, uppercase **pills that hang off a reference link** — the
onward-format chips. Give the reader every route to the cited thing as compact
tappable chips, instead of one bare link.

- **Live:** https://assets.gf.cx/format-chips/
- **CSS:** https://assets.gf.cx/format-chips/format-chips.css

First shipped on growth.gf.cx video-teardowns as the **BOOK row**
(`BUY · LIBBY · PDF · EPUB` beside a cited book), then reused for **media rows**
(`LISTEN · CLIP · WATCH` beside a podcast/video source). This shelf entry is the
promotion of a pattern already applied on 4+ pages
(growth `/reading/`, `nilofer-…`, `richard-harpin-…`, `pedro-pina-…`) into one
source of truth, so the chip look can't drift page to page.

## Use

```html
<link rel="stylesheet" href="https://assets.gf.cx/format-chips/format-chips.css">

<!-- primary tier (.fmt) = first-party routes · alt tier (.fmt.alt) = the rest -->
<span class="fmts">
  <a class="fmt"     href="…" target="_blank" rel="noopener">buy</a>
  <a class="fmt"     href="…" target="_blank" rel="noopener">libby</a>
  <a class="fmt alt" href="…" target="_blank" rel="noopener">pdf</a>
  <a class="fmt alt" href="…" target="_blank" rel="noopener">epub</a>
</span>
```

The `.fmts` row is `inline-flex` and wraps, so it sits inline beside a link or
title and folds onto the next line on narrow screens.

## Classes

| Class      | Role                                                             |
| ---------- | --------------------------------------------------------------- |
| `.fmts`    | the row container (inline-flex, wraps)                           |
| `.fmt`     | a chip — **primary tier** (accent), for first-party routes       |
| `.fmt.alt` | **secondary tier** (clay), for the rest (e.g. PDF/EPUB mirrors)  |

## Theming

Chips recolour from two portfolio tokens, each with a hex fallback:

- `--accent` → primary chip fg + `color-mix`-derived tint
- `--clay`   → alt-tier chip fg + tint

Because the tint is `color-mix`-derived from the same token, one variable sets a
whole tier. Renders correctly on bare HTML via the fallbacks.

## Vocabulary conventions (not enforced — editorial)

- **Book:** `buy` · `libby` (first-party) → `pdf` · `epub` (alt)
- **Media:** `listen` / `watch` (first-party) → `clip` (alt)

The tier split is semantic: primary = the route you'd recommend, alt = the
also-available. Keep labels one short word, lowercase in markup (CSS uppercases).