| name | shadcn |
| description | shadcn/ui under the ONE 6-token design system — CSS var tokens only, no hex, add components via the CLI. Invoke when editing src/components/ui/ or adding a primitive. |
shadcn/ui in the ONE design system
The 33 primitives in src/components/ui/ are vendored shadcn. They are styled by the 6-token system — they reference CSS vars, never literal colors.
The token rule
Components use bg-background, text-font, border-border, bg-primary text-on-primary, etc. These map to --color-* declared in Layout.astro. Never a hex literal, raw hsl(), or a Tailwind palette utility (bg-zinc-500) — the design-check hook blocks them.
Muted text: text-font/60. Faint: text-font/40. Borders: border-font/10.
Adding a component
bunx shadcn@latest add dialog
Then sweep the generated file: replace any bg-zinc-* / hardcoded colors with the 6-token equivalents before committing. The design-check hook will flag what you miss.
Don't
- Don't add ONE/SDK imports into
ui/ — primitives stay pure and portable.
- Don't introduce a 7th color token — compose from the 6 + invariants (white/black/transparent/destructive/success).
