import { Component } from '@angular/core';
import { WrTypography } from 'ngwr/typography';
@Component({ imports: [WrTypography] })
export class MyComponent {}wrTypography
Style any text element with a shared text role.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Selector
Put it on the element you already have and pick a variant.
Inputs
| Name | Description | Type | Default |
|---|---|---|---|
variant | The text role: size, weight, leading and, for some variants, colour. | WrTypographyVariant | 'body' |
tone | Colour override. null keeps the variant colour; base turns a muted variant to the page ink. | WrTypographyTone | null | null |
align | Text alignment. null inherits it. | WrTypographyAlign | null | null |
truncate | One line with an ellipsis. Sets display: inline-block. | boolean | false |
mono | Monospace font. On by default for variant="code". | boolean | false |
Variants
Some variants have their own colour, which tone overrides.
| 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-5xl … --wr-text-lg | — |
lead | Intro paragraph under a heading. | --wr-text-xl · 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. | tinted inline chip · 0.875em | — |
list | Put it on the ul, ol or dl itself. | ul / ol / dl aware · muted | — |
link | Inline link styling. | primary | — |
Emitted classes
Target these 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 | — |
wr-typography--tone-{tone} | Absent when tone is null. | when `tone` is set | — |
wr-typography--align-{align} | Absent when align is null. | when `align` is set | — |
wr-typography--truncate | Adds the ellipsis clamp. | when `truncate` | — |
wr-typography--mono | Monospace font. | when `mono` or `variant="code"` | — |
CSS variables
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/typography's own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-typeset-body | light-dark(var(--wr-color-gray-700), var(--wr-color-gray-300)) | .wr-typeset |
--wr-typeset-bold | var(--wr-color-primary-ink) | .wr-typeset |
--wr-typeset-bullets | var(--wr-color-primary) | .wr-typeset |
--wr-typeset-captions | light-dark(var(--wr-color-gray-500), var(--wr-color-gray-400)) | .wr-typeset |
--wr-typeset-code | var(--wr-color-on-surface) | .wr-typeset |
--wr-typeset-counters | light-dark(var(--wr-color-gray-500), var(--wr-color-gray-400)) | .wr-typeset |
--wr-typeset-headings | var(--wr-color-on-surface) | .wr-typeset |
--wr-typeset-hr | light-dark(var(--wr-color-gray-200), var(--wr-color-gray-700)) | .wr-typeset |
--wr-typeset-lead | light-dark(var(--wr-color-gray-600), var(--wr-color-gray-400)) | .wr-typeset |
--wr-typeset-links | var(--wr-color-on-surface) | .wr-typeset |
--wr-typeset-pre-bg | var(--wr-color-fill) | .wr-typeset |
--wr-typeset-quote-borders | light-dark(var(--wr-color-gray-200), var(--wr-color-gray-700)) | .wr-typeset |
--wr-typeset-quotes | var(--wr-color-on-surface) | .wr-typeset |
--wr-typeset-td-borders | light-dark(var(--wr-color-gray-200), var(--wr-color-gray-700)) | .wr-typeset |
--wr-typeset-th-borders | light-dark(var(--wr-color-gray-300), var(--wr-color-gray-600)) | .wr-typeset |
--wr-typography-font-family | var(--wr-font-family-base) | .wr-typography +2 variant overrides |
--wr-typography-font-size | var(--wr-text-base) | .wr-typography +13 variant overrides |
--wr-typography-font-weight | var(--wr-font-weight-regular) | .wr-typography +11 variant overrides |
--wr-typography-letter-spacing | var(--wr-tracking-normal) | .wr-typography +4 variant overrides |
--wr-typography-line-height | var(--wr-leading-normal) | .wr-typography +12 variant overrides |
--wr-typography-list-dd-font-size | var(--wr-text-lg) | .wr-typography |
--wr-typography-list-dd-font-weight | var(--wr-font-weight-medium) | .wr-typography |
--wr-typography-list-dt-border | var(--wr-border-base) | .wr-typography |
--wr-typography-list-dt-margin-bottom | var(--wr-space-xs) | .wr-typography |
--wr-typography-list-dt-margin-top | var(--wr-space-md) | .wr-typography |
--wr-typography-list-dt-padding-top | var(--wr-space-md) | .wr-typography |
--wr-typography-list-margin-top | var(--wr-space-xs) | .wr-typography |
--wr-typography-list-padding-start | var(--wr-space-xl) | .wr-typography |
--wr-typography-padding-x | 0 | .wr-typography +1 variant override |
--wr-typography-padding-y | 0 | .wr-typography +1 variant override |
--wr-typography-radius | var(--wr-border-radius-sm) | .wr-typography |
See also
Guide Typography guideThe variants in use.Guide Typography tokensThe --wr-text-* scale.Guide ThemingChange the tokens.Guide StylesPick a text style and see the tokens behind it.Guide Headings & displayHeadings from display down to h6.Guide ParagraphsStyle running text, from lead paragraphs to captions.Pipe wrTruncateShorten a string and end it with an ellipsis.