Why ngwr provides this
Type is the one system every screen touches, and hand-rolled heading styles drift apart the moment two people write CSS. Routing every text role through one directive means a theme override re-skins the whole app, and the roles stay a closed set instead of a pile of one-off classes.
Selector
Attribute directive — it styles the host element, never replaces it.
Inputs
The complete surface — five inputs, no outputs, no public methods.
| Name | Description | Type | Default |
|---|---|---|---|
variant | The text role. Drives size, weight, leading and — for some variants — colour. code additionally implies mono. | WrTypographyVariant | 'body' |
tone | Colour override. null emits no tone class at all, leaving each variant its own colour — body and headings read --wr-color-on-surface, lead / caption / overline are muted, link is primary. Set a tone only to depart from that. | WrTypographyTone | null | null |
align | Horizontal alignment. null emits no class, so the element inherits alignment from its container. | WrTypographyAlign | null | null |
truncate | Clip overflow to one line with an ellipsis. Coerced, so the bare attribute works. Forces display: inline-block on the host. | boolean | false |
mono | Switch to --wr-font-family-mono. Coerced, so the bare attribute works. Implied by variant="code". | boolean | false |
Variants
WrTypographyVariant in full. Several carry their own colour, which is what tone: null preserves.
| Name | Description | Type | Default |
|---|---|---|---|
display | Hero headline. The only fluid size. | clamp(--wr-text-4xl, 6vw, 3.75rem) | — |
h1 … h6 | The heading ladder. | --wr-text-3xl … --wr-text-base | — |
lead | Intro paragraph under a heading. | --wr-text-lg · muted | — |
body | Default. Running text. | --wr-text-base | — |
small | Small print. | --wr-text-sm | — |
caption | Captions, helper text. | --wr-text-xs · muted | — |
overline | Section label above a heading. | --wr-text-xs · uppercase · muted | — |
code | Inline code. Implies mono; sized in em so it tracks its context. | tinted inline chip · 0.875em | — |
list | Applies to the list element itself; markers and nesting are styled from the element type. | ul / ol / dl aware | — |
link | Inline link styling. | primary | — |
Emitted classes
The directive binds [class] to a single computed string. Useful when you need to target its output from your own stylesheet.
| Name | Description | Type | Default |
|---|---|---|---|
wr-typography | Base class. Sets margin, font family, and --wr-color-on-surface. | always | — |
wr-typography--{variant} | One per variant — always emitted, since variant always resolves. | always | — |
wr-typography--tone-{tone} | Omitted entirely when tone is null. | when `tone` is set | — |
wr-typography--align-{align} | Omitted entirely when align is null. | when `align` is set | — |
wr-typography--truncate | Adds the ellipsis clamp. | when `truncate` | — |
wr-typography--mono | The one implicit rule in the directive. | when `mono` or `variant="code"` | — |