[ @sdxc/u/typography ]
text
Applies font-size and its paired line-height from the named text scale through matching var(--ui-text-*) / var(--ui-leading-*) properties, so an extended name inherits a sensible default leading before defining one.
import { text } from "@sdxc/u/typography";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.text("lg") | css({ fontSize: "var(--ui-text-lg, 1.125rem)", lineHeight: "var(--ui-leading-lg, calc(1.75 / 1.125))" }) |
Examples
Basic example
Use text(name) with a step of the text scale, like text("sm") or text("xl"), to set an element's font size together with its line height:
text("sm")
The quick brown fox jumps over the lazy dog.
text("base")
The quick brown fox jumps over the lazy dog.
text("lg")
The quick brown fox jumps over the lazy dog.
text("xl")
The quick brown fox jumps over the lazy dog.
text("2xl")
The quick brown fox jumps over the lazy dog.
<div mix={[...]}>
<div>
<p mix={[...]}>text("sm")</p>
<p mix={[text("sm")]}>The quick brown fox jumps over the lazy dog.</p>
</div>
<div>
<p mix={[...]}>text("base")</p>
<p mix={[text("base")]}>The quick brown fox jumps over the lazy dog.</p>
</div>
<div>
<p mix={[...]}>text("lg")</p>
<p mix={[text("lg")]}>The quick brown fox jumps over the lazy dog.</p>
</div>
<div>
<p mix={[...]}>text("xl")</p>
<p mix={[text("xl")]}>The quick brown fox jumps over the lazy dog.</p>
</div>
<div>
<p mix={[...]}>text("2xl")</p>
<p mix={[text("2xl")]}>The quick brown fox jumps over the lazy dog.</p>
</div>
</div>Paired line height
Every step brings the line height that suits it, so wrapped text stays readable from text("sm") up to text("2xl"):
text("sm")
The kettle clicked off just as the rain started, and for a minute the whole kitchen smelled of wet pavement and black tea.
text("2xl")
The kettle clicked off just as the rain started, and for a minute the whole kitchen smelled of wet pavement and black tea.
<div mix={[grid(), gridTemplate({ columns: "1fr 1fr" }), gap(8)]}>
<div>
<p mix={[...]}>text("sm")</p>
<p mix={[text("sm")]}>
The kettle clicked off just as the rain started, and for a minute the whole kitchen
smelled of wet pavement and black tea.
</p>
</div>
<div>
<p mix={[...]}>text("2xl")</p>
<p mix={[text("2xl")]}>
The kettle clicked off just as the rain started, and for a minute the whole kitchen
smelled of wet pavement and black tea.
</p>
</div>
</div>Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.text("lg"))Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.text("lg"))Customizing your theme
Customizing text sizes
Redefine a --ui-text-* variable to change a step, or declare a new one with the line height it sets beside it:
:root {
--ui-text-10xl: 10rem;
--ui-leading-10xl: 1;
}declare module "@sdxc/u" {
interface TextSizes {
"10xl": true;
}
}The new name is then accepted wherever the scale is:
text("10xl")Customizing line heights
Each named line height reads a --ui-leading-* variable before its built-in value, so a theme retunes one by declaring it:
:root {
--ui-leading-relaxed: 1.7;
}Every call that names the step now reads the new value:
leading("relaxed")Signature
u.text(name: TextSizeName | (string & {}))