# colorMix

> Builds a `color-mix(...)` value string for any color-accepting property.

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

Builds a `color-mix(...)` value string for any color-accepting property.
`colorSpace` is the raw interpolation space CSS expects (`"oklab"`,
`"srgb"`, `"hsl"`, ...).

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.colorMix("oklab", { color: "currentcolor", weight: 70 }, "transparent")` | `"color-mix(in oklab, currentcolor 70%, transparent)"` |

## Examples

### Basic example

Use `colorMix` to build a `color-mix()` value from a color space and its stops, and pass it to any color utility:

```tsx
<div mix={[...]}>
	<div
		mix={[
			bg(colorMix("oklab", { color: "var(--ui-brand-bg-solid)", weight: 20 }, "transparent")),
			fg(),
			...,
		]}
	>
		20%
	</div>
	<div
		mix={[
			bg(colorMix("oklab", { color: "var(--ui-brand-bg-solid)", weight: 50 }, "transparent")),
			fg(),
			...,
		]}
	>
		50%
	</div>
	<div
		mix={[
			bg(colorMix("oklab", { color: "var(--ui-brand-bg-solid)", weight: 80 }, "transparent")),
			fg("brand.onSolid"),
			...,
		]}
	>
		80%
	</div>
</div>
```

### Mixing two colors

Mix two colors by passing both as stops; the color space, like `oklch` or `srgb`, decides the hue halfway between them:

```tsx
<div mix={[...]}>
	<div
		mix={[
			bg(colorMix("srgb", "var(--ui-brand-bg-solid)", "var(--ui-success-bg-solid)")),
			fg("brand.onSolid"),
			...,
		]}
	>
		srgb
	</div>
	<div
		mix={[
			bg(colorMix("oklab", "var(--ui-brand-bg-solid)", "var(--ui-success-bg-solid)")),
			fg("brand.onSolid"),
			...,
		]}
	>
		oklab
	</div>
	<div
		mix={[
			bg(colorMix("oklch", "var(--ui-brand-bg-solid)", "var(--ui-success-bg-solid)")),
			fg("brand.onSolid"),
			...,
		]}
	>
		oklch
	</div>
</div>
```

### Deriving from the text color

Mix `currentcolor` to derive a border or a background from the element's own text color, whatever tone that is:

```tsx
<div mix={[...]}>
	<div
		mix={[
			fg("brand"),
			border({
				color: colorMix("oklab", { color: "currentcolor", weight: 40 }, "transparent"),
				width: 2,
			}),
			...,
		]}
	>
		brand
	</div>
	<div
		mix={[
			fg("danger"),
			border({
				color: colorMix("oklab", { color: "currentcolor", weight: 40 }, "transparent"),
				width: 2,
			}),
			...,
		]}
	>
		danger
	</div>
</div>
```

## Applying on a state

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

```ts
u.hover(u.colorMix("oklab", { color: "currentcolor", weight: 70 }, "transparent"))
```

## Responsive design

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

```ts
u.at("md", u.colorMix("oklab", { color: "currentcolor", weight: 70 }, "transparent"))
```

## Signature

```ts
u.colorMix(colorSpace: string, ...stops: ColorMixStop[])
```