typography
text-decoration-line
Applies text-decoration-line from a bare value, or sets only the given keys from a text-decoration options object.
import { textDecoration } from "@sdxc/u/typography";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.textDecoration() | css({ textDecorationLine: "underline" }) |
u.textDecoration("line-through") | css({ textDecorationLine: "line-through" }) |
u.textDecoration({ line: "underline", color: "brand", offset: 3 }) | css({ textDecorationLine: "underline", textDecorationColor: "var(--ui-brand-fg)", textUnderlineOffset: "3px" }) |
u.textDecoration({ style: "wavy", color: "danger", thickness: "from-font" }) | css({ textDecorationStyle: "wavy", textDecorationColor: "var(--ui-danger-fg)", textDecorationThickness: "from-font" }) |
Using a custom value
Every scale argument also takes a raw CSS value, which passes through untouched.
u.textDecoration()Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.textDecoration())Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.textDecoration())Customizing the theme
The custom properties this utility reads, which a theme redefines.
| Variable |
|---|
--ui-brand-fg |
--ui-danger-fg |
Signature
u.textDecoration(value?: TextDecorationLineValue)