The token contract

A skin is not a stylesheet — it is a set of values for a fixed contract. Every Semitexa skin emits the same design tokens as CSS custom properties, so a component can reference --ui-accent-brand and be certain it exists, in light and dark, in every skin. The contract is the stable seam between "what it looks like" (the skin) and "what it is" (the component).

Eight families

The contract groups into eight token families:

• Surfaces — --ui-surface-page, --ui-surface-panel, --ui-surface-raised, --ui-surface-sunken
• Text — --ui-text-primary, --ui-text-muted, --ui-text-on-accent
• Accent — --ui-accent-brand (and secondary)
• State — --ui-state-success, --ui-state-warning, --ui-state-danger
• Border — --ui-border-subtle, --ui-border-strong
• Radius — --ui-radius-sm/md/lg, plus none and pill
• Motion — --ui-motion-duration-*
• Type — --ui-font-sans, --ui-font-mono

Each token is emitted with light-dark(…, …), so a single declaration carries both modes and the colour-mode toggle repaints the whole UI by switching one attribute. The swatches above are real tokens — flip the theme and watch the contract repaint.

Because every skin fills the same slots, re-theming is swapping one tokens.css, light/dark is two value sets of one contract, and multi-tenant theming is a lookup — all without touching a component. This is the substrate the token-driven UI pillar builds on.