# divide

> Applies a divider border between every child except the last, along `axis`.

```ts
import { divide } from "@sdxc/u/overflow";
```

Applies a divider border between every child except the last, along `axis`.
A number in the color position is read as the border width, so a width can
be set alone; a color name resolves through the semantic and palette tokens.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.divide()` | `css({ "& > *:not(:last-child)": { borderStyle: "solid", borderBlockEndWidth: "1px", borderBlockEndColor: "var(--ui-border, color-mix(in oklab, CanvasText 16%, transparent))" } })` |
| `u.divide("block", "brand", 2)` | `css({ "& > *:not(:last-child)": { borderStyle: "solid", borderBlockEndWidth: "2px", borderBlockEndColor: "var(--ui-brand-border)" } })` |
| `u.divide("block", 2)` | `css({ "& > *:not(:last-child)": { borderStyle: "solid", borderBlockEndWidth: "2px", borderBlockEndColor: "var(--ui-border, color-mix(in oklab, CanvasText 16%, transparent))" } })` |

## Examples

### Basic example

Use `divide()` on a parent to draw a border between each of its children, stacked along the block axis:

```tsx
<ul mix={[divide(), ...]}>
	<li mix={[p(3)]}>Inbox</li>
	<li mix={[p(3)]}>Drafts</li>
	<li mix={[p(3)]}>Archive</li>
</ul>
```

### Dividing a row

Pass `"inline"` to divide children laid out side by side:

```tsx
<div mix={[hstack(), divide("inline"), ...]}>
	<span mix={[pi(4)]}>Bold</span>
	<span mix={[pi(4)]}>Italic</span>
	<span mix={[pi(4)]}>Underline</span>
</div>
```

### Color and width

Pass a color token and a width in pixels, like `divide("block", "brand", 2)`, or a width alone, like `divide("block", 3)`:

```tsx
<div mix={[...]}>
	<ul mix={[divide("block", "brand", 2), ...]}>
		<li mix={[p(3)]}>One</li>
		<li mix={[p(3)]}>Two</li>
		<li mix={[p(3)]}>Three</li>
	</ul>
	<ul mix={[divide("block", 3), ...]}>
		<li mix={[p(3)]}>One</li>
		<li mix={[p(3)]}>Two</li>
		<li mix={[p(3)]}>Three</li>
	</ul>
</div>
```

## Applying on a state

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

```ts
u.hover(u.divide())
```

## Responsive design

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

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

## 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.divide(axis?: DivideAxis, colorOrWidth?: ColorValue | (string & {}) | number, maybeWidth?: number)
```