[ @sdxc/u/typography ]

text-transform

Applies text-transform.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { textTransform } from "@sdxc/u/typography";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.textTransform("uppercase")`	`css({ textTransform: "uppercase" })`

Examples

Basic example

Use textTransform("uppercase"), textTransform("lowercase") or textTransform("capitalize") to change how text is cased on screen, and textTransform("none") to keep it as written:

textTransform("none")

The quick brown fox jumps over the lazy dog.

textTransform("uppercase")

The quick brown fox jumps over the lazy dog.

textTransform("lowercase")

The quick brown fox jumps over the lazy dog.

textTransform("capitalize")

The quick brown fox jumps over the lazy dog.

<div mix={[...]}>
	<div>
		<p mix={[...]}>textTransform("none")</p>
		<p mix={[textTransform("none")]}>The quick brown fox jumps over the lazy dog.</p>
	</div>
	<div>
		<p mix={[...]}>textTransform("uppercase")</p>
		<p mix={[textTransform("uppercase")]}>The quick brown fox jumps over the lazy dog.</p>
	</div>
	<div>
		<p mix={[...]}>textTransform("lowercase")</p>
		<p mix={[textTransform("lowercase")]}>The quick brown fox jumps over the lazy dog.</p>
	</div>
	<div>
		<p mix={[...]}>textTransform("capitalize")</p>
		<p mix={[textTransform("capitalize")]}>The quick brown fox jumps over the lazy dog.</p>
	</div>
</div>

Applying on a state

Wrap the call in a state utility to scope it to one selector.

u.hover(u.textTransform("uppercase"))

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", u.textTransform("uppercase"))

Signature

u.textTransform(value: TextTransformValue)