# autofill

> Overrides the browser's autofill background and text color under `&:-webkit-autofill`, so an autofilled input keeps the appearance every other input has.

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

Overrides the browser's autofill background and text color under
`&:-webkit-autofill`, so an autofilled input keeps the appearance every
other input has. Defaults to the system background/foreground tokens.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.autofill()` | `css({ "&:-webkit-autofill": { boxShadow: "0 0 0 1000px var(--ui-bg, Canvas) inset !important", WebkitBoxShadow: "0 0 0 1000px var(--ui-bg, Canvas) inset !important", WebkitTextFillColor: "var(--ui-fg, CanvasText) !important" } })` |

## Examples

### Basic example

Use `autofill()` to keep an autofilled field on the page's own background and text color. Let the browser fill the field to see it:

```tsx
<form mix={[...]}>
	<input
		type="email"
		name="email"
		autocomplete="email"
		placeholder="you@example.com"
		mix={[autofill(), ...]}
	/>
</form>
```

### Custom colors

Pass a background and a text color, like `brand.tint` and `brand.emphasis`, for a field that lives on a tinted surface:

```tsx
<form mix={[surface("brand.tinted"), rounded("lg"), p(4)]}>
	<input
		type="text"
		name="name"
		autocomplete="name"
		placeholder="Full name"
		mix={[autofill("brand.tint", "brand.emphasis"), ...]}
	/>
</form>
```

```ts
u.autofill("neutral.tint", "neutral")
```

## Applying on a state

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

```ts
u.hover(u.autofill())
```

## Responsive design

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

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

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

## Signature

```ts
u.autofill(background?: ColorValue | (string & {}), foreground?: ColorValue | (string & {}))
```