# forced-color-adjust

> Applies `forced-color-adjust`, defaulting to `"none"` so author colours survive where colour itself carries the information — swatches, chart legends, syntax highlighting.

```ts
import { forcedColorAdjust } from "@sdxc/u/a11y";
```

Applies `forced-color-adjust`, defaulting to `"none"` so author colours
survive where colour itself carries the information — swatches, chart
legends, syntax highlighting. Scope it with `u.forcedColors()`.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.forcedColorAdjust()` | `css({ forcedColorAdjust: "none" })` |
| `u.forcedColorAdjust("preserve-parent-color")` | `css({ forcedColorAdjust: "preserve-parent-color" })` |

## Examples

### Basic example

Use `forcedColorAdjust()`, scoped with `forcedColors()`, to keep colors that carry meaning. Turn on a forced-colors mode to compare:

```tsx
<div mix={[...]}>
	<div
		mix={[
			bg("success.solid"),
			fg("success.onSolid"),
			forcedColors(forcedColorAdjust()),
			...,
		]}
	>
		Up
	</div>
	<div
		mix={[
			bg("warning.solid"),
			fg("warning.onSolid"),
			forcedColors(forcedColorAdjust()),
			...,
		]}
	>
		Flat
	</div>
	<div
		mix={[
			bg("danger.solid"),
			fg("danger.onSolid"),
			forcedColors(forcedColorAdjust()),
			...,
		]}
	>
		Down
	</div>
</div>
```

### Keeping the parent's color

Pass `preserve-parent-color` to opt out of forced colors while still inheriting the color the system gives the parent:

```tsx
<p mix={[fg("brand"), inlineFlex(), gap(2), ...]}>
	<svg
		mix={[fill("currentColor"), forcedColors(forcedColorAdjust("preserve-parent-color"))]}
		viewBox="0 0 24 24"
		width={20}
		height={20}
		aria-hidden="true"
	>
		<path d="M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.2l-6.1 3.4 1.4-6.8L2.2 9.1l6.9-.8z" />
	</svg>
	Featured
</p>
```

## Applying on a state

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

```ts
u.hover(u.forcedColorAdjust())
```

## Responsive design

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

```ts
u.at("md", u.forcedColorAdjust())
```

## Signature

```ts
u.forcedColorAdjust(value?: ForcedColorAdjustValue)
```