# contrastMore

> Sugar over `media("(prefers-contrast: more)", input)`.

```ts
import { contrastMore } from "@sdxc/u/responsive";
```

Sugar over `media("(prefers-contrast: more)", input)`.

The theme layer already strengthens every tone's `border` here; reach for
this wrapper to strengthen other properties, like a muted foreground.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.contrastMore(u.fg("neutral.emphasis"))` | `css({ "@media (prefers-contrast: more)": { color: "var(--ui-neutral-fg-emphasis)" } })` |

## Examples

### Basic example

Use `contrastMore(...)` to apply utilities when the reader asks for more contrast. Turn on Increase contrast in your system's accessibility settings, or emulate `prefers-contrast: more` in your browser's dev tools, to see the hint darken:

```tsx
<label mix={[vstack({ gap: 2 }), ...]}>
	<span>Email</span>
	<input type="email" placeholder="you@example.com" mix={[...]} />
	<span mix={[fg("neutral.muted"), contrastMore(fg("neutral.emphasis"))]}>
		We never share it.
	</span>
</label>
```

## Applying on a state

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

```ts
u.hover(u.contrastMore(u.fg("neutral.emphasis")))
```

## 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
bg("info")
```

## Signature

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