Troupe tokens

Text

One class, troupe-text, on any text element: six typographic roles and five tones. The element stays the consumer's choice. Switch the brand: the font family and sizes change visibly, nothing in the component does.

Variants

Default: data-variant="body", which also applies when the attribute is missing. display, headline and title use the heading family; lead, body and caption the body family. A variant sets the look only: data-variant="headline" does not make an element a heading, the <h2> does.

display

Autumn season

headline

Three plays, one evening

title

Doors open at seven

lead

An introductory paragraph sets the scene before the details.

body

Running text carries most of a page. Tickets can be reserved in advance or bought at the door.

caption

Photo: the ensemble, opening night

Tones

Default: data-tone="default", which also applies when the attribute is missing. inverse is for color.surface.inverse and is shown on that surface.

default

Tone default

subtle

Tone subtle

inverse

Tone inverse, on the inverse surface

danger

Tone danger

success

Tone success

Emphasis

There is no bold attribute. Use the native <strong> and <em>: Text gives strong the font.weight.strong weight and em italics.

Tickets can be reserved in advance or bought at the door.

Fonts

The package does not load fonts and ships no @font-face rules (ADR 0001). The tokens give a fallback stack per brand; the consumer loads any web font. Without one, the browser uses the first installed font in the stack, which is why the families look different between machines. This site loads none either.

Reduced motion

No motion. Text has no transitions, animations or states, so prefers-reduced-motion changes nothing (ADR 0003).

Usage

<link rel="stylesheet" href="@iahola/troupe-tokens/troupe.css">
<link rel="stylesheet" href="@iahola/troupe-components/text/styles.css">

<h2 class="troupe-text" data-variant="headline">Three plays, one evening</h2>
<p class="troupe-text" data-variant="lead">An introductory paragraph.</p>
<p class="troupe-text">Tickets can be <strong>reserved</strong> in advance.</p>
<p class="troupe-text" data-variant="caption" data-tone="subtle">Updated 4 October</p>

Full specification: packages/components/text/README.md. In a Card, content brings its own typography with Text (ADR 0006).