# marker

> Applies the given utilities to a list item's marker or a `<summary>` disclosure triangle via `::marker`; only `color`, `font-*`, and `content` apply.

```ts
import { marker } from "@sdxc/u/state";
```

Applies the given utilities to a list item's marker or a `<summary>`
disclosure triangle via `::marker`; only `color`, `font-*`, and `content`
apply. Use `u.listStyle("none")` to remove the marker along with its space.

## 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>`:

```tsx
<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:

```tsx
<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.

```ts
u.at("md", u.marker(u.fg("neutral.muted")))
```

## Signature

```ts
u.marker(input: UtilityInput<Node>)
```