Theme token editorPro

Edit a generated app's tokens and watch the preview follow as you drag: OKLCH sliders with tracks drawn in the color, radius and font, presets, a WCAG contrast check that updates live, and Copy CSS.

Markdown

On this page

ProDrag the primary hue in OKLCH and the booking page follows while contrast is checked against WCAG.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/theme-token-editor

Usage

tsx

import { ThemeTokenEditor, themeTokensToStyle } from "@/components/ui/chatcn/pro/theme-token-editor"

<ThemeTokenEditor tokens={tokens} base={inCode} value={values} onValueChange={setValues} pairs={pairs} />
<div style={themeTokensToStyle(values)}><GeneratedApp /></div>

Tokens are CSS variables. Colors are oklch(L C H) strings; colors outside sRGB get a note. pairs lists foreground and background tokens to check: AA at 4.5, or 3 for large text. themeTokensToCss returns the :root block that Copy CSS writes.

Examples

States

ProFailing contrast with a color outside sRGB and disabled.

Props

Prop	Type	Notes
`tokens`	`ThemeTokenDef[]`	`color`, `length` (`min`, `max`, `step`) or `font` (`options`)
`value`, `defaultValue`, `onValueChange`	`Record<string, string>`	Every change, live while you drag
`base`	`Record<string, string>`	The app's current tokens; changed ones get a reset dot
`pairs`	`{ label, foreground, background, large? }[]`	Checked against WCAG
`presets`	`{ name, values }[]`	Apply several tokens at once
`defaultOpenToken`, `disabled`	`string`, `boolean`

Keyboard

Key	Action
`Enter` `Space` on a color	Open its OKLCH sliders
Arrow keys on a slider	One step, `Shift` ten; `PageUp` `PageDown` a tenth of the range; `Home` `End`

Accessibility

Sliders read out lightness in percent, chroma and hue in degrees. Contrast results are read as the ratio and pass or fail with what is needed, and each carries a check or a cross.
Color rows are disclosure buttons; presets are a radio group.

Motion

None beyond press feedback: the preview updates in the same frame as the slider.