# zidane-ui/uno

> The kit's design tokens as a UnoCSS preset, plus a crisp Phosphor icon loader.

Import: `import { … } from 'zidane-ui/uno'`. Source: [ui/src/uno.ts](https://github.com/Tahul/zidane/blob/main/ui/src/uno.ts).

Use this entry point in an app that styles with UnoCSS. `presetZidane()` maps token classes such as `bg-zg-raised` to the kit's `--zg-*` variables, and `crispPhosphor` keeps Phosphor icons sharp at small sizes. It needs the optional `unocss` package; see [Styling](https://zidane.si/docs/ui-kit.md#styling).

```ts
import { presetZidane } from 'zidane-ui/uno'

export default {
  content: { filesystem: ['src/**/*.{ts,tsx}', 'node_modules/zidane-ui/dist/**/*.js'] },
  presets: [presetZidane()],
}
```

## Functions

### `crispPhosphor`

Function.

Phosphor, drawn to stay crisp at interface sizes. Its regular icons are
filled outlines on a 256 grid with a 16-unit stroke: at the 10 to 14px the
kit uses, that is 0.6 to 0.9px, which lands between device pixels and
antialiases unevenly (stair-stepped curves, half-faded lines). Each regular
icon is drawn with its bold outline instead (the same shape, a 24-unit
stroke, 1.3px at 14px), still named `i-ph-<name>`; `-fill`, `-duotone`
and the other weights stay as they are. Wrap the loaded collection
(`@iconify-json/ph`) in it, in `presetIcons`' `collections.ph` loader.

```ts
function crispPhosphor<T extends { icons: Record<string, { body: string }> }>(set: T): T
```

**Type parameters**

- `T` (`extends { icons: Record<string, { body: string }> }`)

**Parameters**

- `set` (`T`): The loaded Phosphor collection, such as the `@iconify-json/ph` JSON.

**Returns** `T`: The same collection with each regular icon drawn as its bold outline.

Source: [ui/src/uno.ts:148](https://github.com/Tahul/zidane/blob/main/ui/src/uno.ts#L148)

### `presetZidane`

Function.

Returns the UnoCSS preset of the kit. It maps classes such as `bg-zg-raised`, `text-zg-muted`
and `bg-zg-danger/10` to the `--zg-*` tokens, and adds the motion durations and easings, the
layer `z-index` values and the disabled opacity. Add it after `presetUno` in the `presets`
list.

```ts
function presetZidane(): Preset
```

**Returns** `Preset`: The preset.

Source: [ui/src/uno.ts:165](https://github.com/Tahul/zidane/blob/main/ui/src/uno.ts#L165)