Skip to content
zidane
UI kit reference

zidane-ui/uno

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

import { … } from 'zidane-ui/uno'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.

TypeScript
import { presetZidane } from 'zidane-ui/uno'

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

Functions#

crispPhosphorFunction#

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.

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

Type parameters

Type parameters
NameTypeDescription
Textends { icons: Record<string, { body: string }> }

Parameters

Parameters
NameTypeDescription
setT

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.

ui/src/uno.ts:148

presetZidaneFunction#

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.

TypeScript
function presetZidane(): Preset

Returns

Preset

The preset.

ui/src/uno.ts:165