Docs Getting started

Theming and skins

A host sends one theme over the Kit Harness Protocol; every kit, and every Tessera component in it, follows.

The theme

Hosts send theme in ui/initialize and ui/theme: a colour scheme and the 15 --kit-* theme tokens, applied to the document root; components read them through CSS variables. An app that is not a kit sets the same variables in its own stylesheet.

@kition/tessera-tokens gives every skin’s theme ready to send (SKINS.paper, SKINS.graphite), and its tests hold each skin to WCAG AA.

TSX

import { skinTheme } from '@kition/tessera-tokens'

kit.notify('ui/theme', { theme: skinTheme('graphite') })

Proposal: KitTheme 2.0

KHP-0007 (draft) widens the theme to 35 tokens with fallbacks (chrome, panels, fields, overlays, accents), adds density and icon style, and defines a portable skin.json.