# accent-color

> Applies `accent-color`, the property native form controls (`checkbox`, `radio`, `range`, `progress`) read for their own painted color.

```ts
import { accent } from "@sdxc/u/color";
```

Applies `accent-color`, the property native form controls (`checkbox`,
`radio`, `range`, `progress`) read for their own painted color. Defaults
to the brand solid color so a bare `u.accent()` always resolves.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.accent()` | `css({ accentColor: "var(--ui-brand-bg-solid)" })` |
| `u.accent("danger")` | `css({ accentColor: "var(--ui-danger-bg-solid)" })` |

## Examples

### Basic example

Use `accent()` to color the parts a browser paints in a native checkbox, radio, range or progress bar:

```tsx
<div mix={[...]}>
	<input type="checkbox" checked mix={[accent()]} aria-label="Checkbox" />
	<input type="radio" checked mix={[accent()]} aria-label="Radio" />
	<input type="range" mix={[accent()]} aria-label="Range" />
	<progress value={60} max={100} mix={[accent()]} />
</div>
```

### Tones

Pass a tone, like `success` or `danger`, to paint a control in that tone's solid color:

```tsx
<div mix={[...]}>
	<input type="checkbox" checked mix={[accent("success")]} aria-label="Success" />
	<input type="checkbox" checked mix={[accent("warning")]} aria-label="Warning" />
	<input type="checkbox" checked mix={[accent("danger")]} aria-label="Danger" />
	<input type="range" mix={[accent("danger")]} aria-label="Danger range" />
</div>
```

### Palette shades and arbitrary colors

Pass a palette shade like `color.brand.300`, or any CSS color function, for a color no tone names:

```tsx
<div mix={[...]}>
	<input type="range" mix={[accent("color.brand.300")]} aria-label="Light brand" />
	<input type="range" mix={[accent("oklch(0.7 0.18 150)")]} aria-label="Green" />
</div>
```

## Applying on a state

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

```ts
u.hover(u.accent())
```

## Responsive design

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

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

## Customizing your theme

### Customizing colors

Define a palette as `--ui-color-{name}-{50..950}` and map a tone onto it with the `--ui-{tone}-*` variables, the way `theme.css` maps the built-in ones:

```css
:root {
	--ui-color-info-50: oklch(0.97 0.02 230);
	--ui-color-info-200: oklch(0.88 0.06 230);
	--ui-color-info-500: oklch(0.62 0.16 230);
	--ui-color-info-600: oklch(0.52 0.18 230);
	--ui-color-info-900: oklch(0.3 0.1 230);

	--ui-info-bg-tint: var(--ui-color-info-50);
	--ui-info-bg-solid: var(--ui-color-info-600);
	--ui-info-fg: var(--ui-color-info-600);
	--ui-info-fg-muted: var(--ui-color-info-500);
	--ui-info-fg-emphasis: var(--ui-color-info-900);
	--ui-info-fg-on-solid: white;
	--ui-info-border: var(--ui-color-info-200);
	--ui-info-border-strong: var(--ui-color-info-600);
	--ui-info-ring: var(--ui-color-info-500);
}
```

```ts
declare module "@sdxc/u" {
	interface ColorPalettes {
		info: true;
	}
	interface SemanticTones {
		info: true;
	}
}
```

The new name is then accepted wherever the scale is:

```ts
accent("info")
```

## Signature

```ts
u.accent(value?: ColorValue | (string & {}))
```