Utilities
Typography
Generated from the registry, so this page can't drift from the compiler.
font
Sets the font family.
Syntax
font(value)
font[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | fonts token | sans serif mono |
| var(--name) | See type |
Examples and generated CSS
font(sans)
font(mono)
font['Inter',sans-serif].font\(mono\) {
font-family: var(--croff-font-mono);
}
.font\(sans\) {
font-family: var(--croff-font-sans);
}
.font\[\'Inter\'\,sans-serif\] {
font-family: 'Inter',sans-serif;
}Theme behavior
Reads tokens from fonts. A token compiles to its custom property, so changing it in your theme changes every use.
Responsive and state usage
md:font(sans)
hover:font(sans)
lg:focus:font(sans)text-size
Sets the font size.
Syntax
text-size(value)
text-size[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | textSizes token | xs sm md lg xl 2xl 3xl 4xl 5xl 6xl |
| var(--name) | See type |
Examples and generated CSS
text-size(lg)
md:text-size(4xl)
text-size[clamp(1rem,2vw,2rem)].text-size\(lg\) {
font-size: var(--croff-text-size-lg);
}
.text-size\[clamp\(1rem\,2vw\,2rem\)\] {
font-size: clamp(1rem,2vw,2rem);
}
@media (min-width: 768px) {
.md\:text-size\(4xl\) {
font-size: var(--croff-text-size-4xl);
}
}Theme behavior
Reads tokens from textSizes. A token compiles to its custom property, so changing it in your theme changes every use.
Responsive and state usage
md:text-size(lg)
hover:text-size(lg)
lg:focus:text-size(lg)text-weight
Sets the font weight.
Syntax
text-weight(value)
text-weight[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | textWeights token | light normal medium semibold bold black |
| var(--name) | See type |
Examples and generated CSS
text-weight(bold)
text-weight[650].text-weight\(bold\) {
font-weight: var(--croff-text-weight-bold);
}
.text-weight\[650\] {
font-weight: 650;
}Theme behavior
Reads tokens from textWeights. A token compiles to its custom property, so changing it in your theme changes every use.
Responsive and state usage
md:text-weight(bold)
hover:text-weight(bold)
lg:focus:text-weight(bold)text-color
Sets the text color. Exactly the same as color, which is the preferred name.
Syntax
text-color(value)
text-color[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | colors token | brand brand-dark dark light muted white black gray-100 gray-200 gray-300 gray-400 gray-500 gray-600 gray-700 gray-800 gray-900 red amber green blue |
| keyword | transparent current inherit | |
| var(--name) | See type | |
| alpha(color,0–100) | See type |
Examples and generated CSS
text-color(light)
text-color(alpha(light,60))
hover:text-color(brand)
text-color[#ff00aa].text-color\(alpha\(light\,60\)\) {
color: color-mix(in srgb, var(--croff-color-light) 60%, transparent);
}
.text-color\(light\) {
color: var(--croff-color-light);
}
.text-color\[\#ff00aa\] {
color: #ff00aa;
}
.hover\:text-color\(brand\):hover {
color: var(--croff-color-brand);
}Theme behavior
Reads tokens from colors. A token compiles to its custom property, so changing it in your theme changes every use.
Responsive and state usage
md:text-color(light)
hover:text-color(light)
lg:focus:text-color(light)color
Sets the text color.
Syntax
color(value)
color[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | colors token | brand brand-dark dark light muted white black gray-100 gray-200 gray-300 gray-400 gray-500 gray-600 gray-700 gray-800 gray-900 red amber green blue |
| keyword | transparent current inherit | |
| var(--name) | See type | |
| alpha(color,0–100) | See type |
Examples and generated CSS
color(white)
color(alpha(light,60))
hover:color(brand)
md:hover:color(brand)
color(var(--accent))
color[#ff00aa].color\(alpha\(light\,60\)\) {
color: color-mix(in srgb, var(--croff-color-light) 60%, transparent);
}
.color\(var\(--accent\)\) {
color: var(--accent);
}
.color\(white\) {
color: var(--croff-color-white);
}
.color\[\#ff00aa\] {
color: #ff00aa;
}
.hover\:color\(brand\):hover {
color: var(--croff-color-brand);
}
@media (min-width: 768px) {
.md\:hover\:color\(brand\):hover {
color: var(--croff-color-brand);
}
}Theme behavior
Reads tokens from colors. A token compiles to its custom property, so changing it in your theme changes every use. If both color and text-color apply to an element, color wins.
Responsive and state usage
md:color(white)
hover:color(white)
lg:focus:color(white)text-align
Aligns text.
Syntax
text-align(value)Accepted values
| Argument | Type | Values |
|---|---|---|
value | keyword | left center right justify start end |
Examples and generated CSS
text-align(center)
md:text-align(left).text-align\(center\) {
text-align: center;
}
@media (min-width: 768px) {
.md\:text-align\(left\) {
text-align: left;
}
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme.
Responsive and state usage
md:text-align(center)
hover:text-align(center)
lg:focus:text-align(center)line-height
Sets the line height.
Syntax
line-height(value)
line-height[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | lineHeights token | none tight snug normal relaxed loose |
| var(--name) | See type |
Examples and generated CSS
line-height(tight)
line-height[1.1].line-height\(tight\) {
line-height: var(--croff-line-height-tight);
}
.line-height\[1\.1\] {
line-height: 1.1;
}Theme behavior
Reads tokens from lineHeights. A token compiles to its custom property, so changing it in your theme changes every use.
Responsive and state usage
md:line-height(tight)
hover:line-height(tight)
lg:focus:line-height(tight)letter-spacing
Sets the space between letters.
Syntax
letter-spacing(value)
letter-spacing[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | letterSpacings token | tight normal wide wider widest |
| var(--name) | See type |
Examples and generated CSS
letter-spacing(wide)
letter-spacing[-0.04em].letter-spacing\(wide\) {
letter-spacing: var(--croff-letter-spacing-wide);
}
.letter-spacing\[-0\.04em\] {
letter-spacing: -0.04em;
}Theme behavior
Reads tokens from letterSpacings. A token compiles to its custom property, so changing it in your theme changes every use.
Responsive and state usage
md:letter-spacing(wide)
hover:letter-spacing(wide)
lg:focus:letter-spacing(wide)text-decoration
Sets the text decoration line.
Syntax
text-decoration(value)Accepted values
| Argument | Type | Values |
|---|---|---|
value | keyword | none underline overline line-through |
Examples and generated CSS
text-decoration(underline)
hover:text-decoration(none).text-decoration\(underline\) {
text-decoration-line: underline;
}
.hover\:text-decoration\(none\):hover {
text-decoration-line: none;
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme.
Responsive and state usage
md:text-decoration(underline)
hover:text-decoration(underline)
lg:focus:text-decoration(underline)text-transform
Changes text capitalization.
Syntax
text-transform(value)Accepted values
| Argument | Type | Values |
|---|---|---|
value | keyword | none uppercase lowercase capitalize |
Examples and generated CSS
text-transform(uppercase).text-transform\(uppercase\) {
text-transform: uppercase;
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme.
Responsive and state usage
md:text-transform(uppercase)
hover:text-transform(uppercase)
lg:focus:text-transform(uppercase)whitespace
Controls how whitespace and wrapping behave.
Syntax
whitespace(value)Accepted values
| Argument | Type | Values |
|---|---|---|
value | keyword | normal nowrap pre pre-line pre-wrap break-spaces |
Examples and generated CSS
whitespace(nowrap)
whitespace(pre-wrap).whitespace\(nowrap\) {
white-space: nowrap;
}
.whitespace\(pre-wrap\) {
white-space: pre-wrap;
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme.
Responsive and state usage
md:whitespace(nowrap)
hover:whitespace(nowrap)
lg:focus:whitespace(nowrap)