# color

> Applies `color` (foreground text color).

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

Applies `color` (foreground text color). Called with no value it resolves
the tiny system default (`var(--ui-fg, CanvasText)`); called with a bare
tone it defaults to that tone's plain `fg` weight.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.fg()` | `css({ color: "var(--ui-fg, CanvasText)" })` |
| `u.fg("brand.muted")` | `css({ color: "var(--ui-brand-fg-muted)" })` |
| `u.fg("brand")` | `css({ color: "var(--ui-brand-fg)" })` |

## Examples

### Basic example

Use `fg` to set the text color of an element, from the page's default `fg()` to a tone and weight like `neutral.muted`:

```tsx
<div mix={[...]}>
	<p mix={[fg(), ...]}>fg() reads the page's own text color.</p>
	<p mix={[fg("neutral.muted"), ...]}>fg("neutral.muted") is for secondary copy.</p>
	<p mix={[fg("brand"), ...]}>fg("brand") draws the eye to a link or an accent.</p>
</div>
```

### Text weights

A bare tone resolves its plain `fg` weight; add `muted` or `emphasis` for a softer or a stronger one:

```tsx
<div mix={[...]}>
	<p mix={[fg("danger.muted"), ...]}>fg("danger.muted")</p>
	<p mix={[fg("danger"), ...]}>fg("danger")</p>
	<p mix={[fg("danger.emphasis"), ...]}>fg("danger.emphasis")</p>
</div>
```

### Text on solid backgrounds

Pair a `solid` background with the same tone's `onSolid` text weight, like `brand.onSolid`, so the text keeps its contrast:

```tsx
<div mix={[...]}>
	<div mix={[bg("brand.solid"), fg("brand.onSolid"), ...]}>fg("brand.onSolid")</div>
	<div mix={[bg("neutral.solid"), fg("neutral.onSolid"), ...]}>
		fg("neutral.onSolid")
	</div>
	<div mix={[bg("success.solid"), fg("success.onSolid"), ...]}>
		fg("success.onSolid")
	</div>
</div>
```

### Palette shades and arbitrary colors

Use a palette shade like `color.brand.400`, or any CSS color function, when no tone names the color:

```tsx
<div mix={[...]}>
	<p mix={[fg("color.brand.400"), ...]}>fg("color.brand.400")</p>
	<p mix={[fg("color.success.600"), ...]}>fg("color.success.600")</p>
	<p mix={[fg("oklch(0.65 0.2 30)"), ...]}>fg("oklch(0.65 0.2 30)")</p>
</div>
```

## Applying on a state

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

```ts
u.hover(u.fg())
```

## Responsive design

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

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

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

## Signature

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