@chai-ui/tokens
Tokens
The single source of every color, size and timing in Chai UI. One JSON file builds into CSS custom properties, JavaScript and TypeScript, and a Figma token set, and this page reads the same source. No component uses a hard-coded color.
- Root palette. The raw colors. Nothing uses them directly.
- Semantic roles. What a color is for, like
accentorcontrol-border. Use these in your own UI, and override them to restyle everything at once. - Component and Material tokens. Per-component hooks and the Material roles, both pointing at semantic roles. Override these to restyle one thing.
Root palette
Gray
Green
Amber
Red
Region
Single shades for the edit card's regions; region 6 uses red-40.
Semantic roles
Brand and state
The logo green, the text that sits on it, and the warning and danger colors behind stop, retry and failed evaluations.
Controls
The pure grays every component is built from: fills, hovers, borders, text and icons.
Overlays and media
Buttons and backdrops that sit on top of images and video, and the label on the dark fade under paginated media.
Edit regions
One color per marked region in the edit card: its box, number badge and Composer chip. White text on each is at least 4.7:1.
Material roles
The Material web components Chai renders (the switch, the submit button and the outlined text field) read --md-sys-color-* variables. Each one points at a Chai role, so Material follows Chai and never introduces a color of its own.
| Material role | Chai role | Value |
|---|---|---|
--md-sys-color-primary | accent | #009747 |
--md-sys-color-on-primary | control-surface-raised | #ffffff |
--md-sys-color-primary-container | accent-soft | #96f6c5 |
--md-sys-color-on-primary-container | accent-text | #006d32 |
--md-sys-color-secondary | accent | #009747 |
--md-sys-color-secondary-container | accent-soft | #96f6c5 |
--md-sys-color-on-secondary-container | accent-text | #006d32 |
--md-sys-color-tertiary-container | accent-soft | #96f6c5 |
--md-sys-color-on-tertiary-container | accent-text | #006d32 |
--md-sys-color-error | danger | #c14e42 |
--md-sys-color-on-error-container | danger | #c14e42 |
--md-sys-color-surface | control-surface-raised | #ffffff |
--md-sys-color-surface-container-low | control-surface | #f8f8f8 |
--md-sys-color-surface-container-high | control-surface-hover | #e9e9e9 |
--md-sys-color-surface-container-highest | control-track | #e0e0e0 |
--md-sys-color-on-surface | control-text-strong | #1a1a1a |
--md-sys-color-on-surface-variant | control-text | #4a4a4a |
--md-sys-color-outline | control-border | #8b8b8b |
--md-sys-color-shadow | media-backdrop | #000000 |
Component tokens
Components with their own look expose per-component hooks, each defaulting to a control role. Set one on the component's root class to restyle just that component, for example .chai-composer { --chai-composer-bg: … }.
--chai-composer-bg--chai-composer-border--chai-composer-text--chai-composer-placeholder--chai-composer-hover--chai-media-analyzer-bg--chai-media-analyzer-border--chai-media-analyzer-text--chai-media-analyzer-hover
Space
Radius
Typography
Families
Sizes
Weights
Line height
type.leading.tight | 1.15 |
type.leading.base | 1.45 |
type.leading.loose | 1.7 |
type.leading.title-large | 28px |
type.leading.title-medium | 24px |
type.leading.body-large | 24px |
type.leading.body-medium | 20px |
type.leading.label-large | 20px |
type.leading.label-small | 16px |
Motion
motion.duration.fast | 120ms |
motion.duration.base | 200ms |
motion.duration.slow | 360ms |
motion.duration.steep | 900ms |
motion.easing.standard | cubic-bezier(0.2, 0, 0, 1) |
motion.easing.growth | cubic-bezier(0.34, 1.2, 0.64, 1) |
Shadow and gradient
shadow.menugradient.aigradient.media-fade