[ @sdxc/u/state ]
marker
Applies the given utilities to a list item's marker or a <summary> disclosure triangle via ::marker; only color, font-*, and content apply.
import { marker } from "@sdxc/u/state";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.marker(u.fg("neutral.muted")) | css({ "&::marker": { color: "..." } }) |
Examples
Basic example
Wrap utilities in marker() to style a list item's bullet or number. Set it on each <li>:
- Install the package
- Import the utilities
- Mix them into an element
<ul mix={[listStyle("disc"), pis(5), vstack({ gap: 1 }), ...]}>
<li mix={[marker(fg("brand"))]}>Install the package</li>
<li mix={[marker(fg("brand"))]}>Import the utilities</li>
<li mix={[marker(fg("brand"))]}>Mix them into an element</li>
</ul>Numbers and disclosure triangles
Numbered lists and a <summary>'s triangle are markers too. Click the summary to open it:
- Build
- Migrate
- Deploy
Release notes
Every package now ships its own README.<div mix={[...]}>
<ol mix={[listStyle("decimal"), pis(6), ...]}>
<li mix={[marker([fg("neutral.muted"), weight("bold")])]}>Build</li>
<li mix={[marker([fg("neutral.muted"), weight("bold")])]}>Migrate</li>
<li mix={[marker([fg("neutral.muted"), weight("bold")])]}>Deploy</li>
</ol>
<details mix={[...]}>
<summary mix={[cursor("pointer"), weight("semibold"), marker(fg("brand"))]}>
Release notes
</summary>
Every package now ships its own README.
</details>
</div>Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.marker(u.fg("neutral.muted")))Signature
u.marker(input: UtilityInput<Node>)