Chips
A small inline label — a count, tag, status or scrap of metadata. .chip on an inline element, usually a <span>.
On its own a chip is --jf-font-size-sm: New
Sizing in text
Inside a heading a chip scales to 0.6em of that heading and lifts slightly off the baseline, so it reads as part of the line rather than a box bolted on. It never drops below its standalone size — the rule is max(0.6em, var(--jf-font-size-sm)) — so it stays legible in a small heading or in body copy, where 0.6em alone would land under 10px. In a paragraph there's no lift; at near-parity size the chip sits on the baseline like any other inline element.
Every level, plus a paragraph and a standalone chip for reference. The chip tracks the heading down to h4, then flattens out — h5, h6 and <p> all sit on the floor, at the same size as the bare chip at the bottom:
Watery beasts 12
Watery beasts 12
Watery beasts 12
Watery beasts 12
Watery beasts 12
Watery beasts 12
Watery beasts 12 — in a paragraph.
Watery beasts 12 is the floor, matching a standalone 12.
| Context | Parent size | Chip |
|---|---|---|
| h1 | 36–48px | 21.6–28.8px |
| h2 | 30–36px | 18–21.6px |
| h3 | 24–30px | 14.4–18px |
| h4 | 20–24px | 14–14.4px — floor engages |
| h5 / h6 / p | 16–20px | 14px — floored |
| li / td / standalone | — | 14px — no rule applies |
Only <h1>–<h6> and <p> are targeted. Elsewhere — a <li>, a table cell, a .chip-list — the chip keeps its own size, which is the figure the floor lands on anyway, so every body-text context agrees.
Override: change $chip-font-size (or --jf-font-size-sm at runtime) to move the floor and the standalone size together; write your own h1 .chip { font-size: … } to change the ratio.
Variants
One modifier changes the colour: a palette family (.primary, .secondary, .success, .warning, .error), .soft (neutral, lifted off the canvas), .inverse (the opposite of the current surface), or .outline (border only, text inherits).
default primary secondary success warning error soft inverse outline outline primary
Grouping
- .chip-group — chips butt together into one segmented pill (shared corners). Good for a key/value pair: version5.0
- .chip-list — a wrapping, evenly-spaced row of separate chips or groups.
- Nest a .chip inside a .chip for a count-within-a-label: Errors 14
Overriding
- One chip / a scoped rule — set the --jf-chip-* custom properties (tabled below) on .chip or a scoped selector.
- A new colour everywhere — add a family to $colors; .chip.{family} is generated.
- Shape / size — the Sass variables below, before import.
Variables
Sass variables
| Name | Default | Notes |
|---|---|---|
| $generate-chips | true | Emit the .chip CSS at all. |
| $chip-padding | 0.25em 0.3em | Inner padding (em, so it tracks the chip's font size). |
| $chip-font-size | token(font-size-sm) | Chip text size — and the floor for a chip inside a heading or paragraph (see Sizing in text). Emitted as a var(), so overriding --jf-font-size-sm moves both. |
| $chip-font-weight | get-weight(normal) | Chip text weight. |
| $chip-border-radius | token(radius-sm) | Corner radius. .chip-group zeroes the inner corners so the group reads as one pill. |
| $chip-border-width | token(border-width) | Border width. The border is always solid, and takes the chip's own theme colour — so on a filled chip it's invisible, and on .outline it's the whole look. |
Custom properties
| Name | Default | Notes |
|---|---|---|
| --jf-chip-color-theme | neutral / subtle | Fill and border colour. The family / .soft / .inverse modifiers repoint it; .outline keeps it on the border and drops the fill. |
| --jf-chip-color-text | --jf-color-on-neutral-subtle | Text colour, contrast-picked against the fill. .outline sets it to inherit so the chip takes the surrounding text colour. |