Customisation

Colour

All colours derive from one accent, which follows currentColor. color can be set on the icon or any ancestor:

html

<span style="color: #14B8A6"><kubai-icon name="leaf"></kubai-icon></span>

Colours are derived with CSS color-mix(), so a transition on color cross-fades all gradients:

css

.kubai-icon { transition: color .3s ease; }

Badges

The corner badge on badged icons (folder-plus, user-check) defaults to a dark disc with a white glyph. badgeColor recolours the disc; badgeColor="semantic" applies a colour per badge: green for add and done, red for remove and cancel, amber for warnings.

tsx

<FolderPlus />                          {/* dark badge */}
<FolderPlus badgeColor="semantic" />    {/* green plus */}
<FolderPlus badgeColor="#7C3AED" />

CSS properties

Property	Controls
`--ki-c`	Fill base for gradients and light marks. Default: currentColor.
`--ki-e`	Edge base for outlines and deep marks. Default: `--ki-c`.
`--ki-w`	Marks drawn white on mid-tone bodies.
`--ki-b`	Corner badge disc colour. Default: neutral dark grey.
`--ki-l`	Fade of large solid fills to white at the top (0% to 100%).

variant="soft" sets all of these except --ki-b.

Size

Icons are drawn on a 31-unit canvas and are legible from 16px. At 24px and below, plain icons are preferred to badged versions.

Motion

Every motion runs for 460ms on cubic-bezier(.22, 1, .36, 1) and starts from the current on-screen state, so it can reverse midway. Under prefers-reduced-motion, icons jump to the end pose.