- Components
- theme
- colors
Colors
JK-UI semantic color tokens and palette policy
Color values live directly in the main CSS file declared in
components.json. Installing @jk-ui/base writes the default :root, .dark, and @theme inline variables there through the shadcn registry.Core tokens
| Token | Purpose |
|---|---|
background, foreground | Page background and body text |
card, card-foreground | Card surfaces |
popover, popover-foreground | Floating surfaces |
primary, primary-foreground | Primary actions and emphasis |
secondary, secondary-foreground | Secondary brand actions |
accent, accent-foreground | Accent emphasis |
muted, muted-foreground | Quiet surfaces and supporting text |
destructive, destructive-foreground | Destructive actions and errors |
success, warning, info | Status communication |
border, input, ring | Borders, controls, and focus |
Direct values
Semantic colors use direct values rather than mandatory shade palettes:
:root {
--primary: oklch(0.52 0.14 215);
--primary-foreground: oklch(1 0 0);
--success: oklch(0.52 0.14 160);
--warning: oklch(0.68 0.16 65);
--destructive: oklch(0.58 0.22 27);
}
JK-UI does not require
primary-50 through primary-950 when components only consume primary. Add a shade only when application code needs that shade.Gray is the exception: a full neutral scale is useful across text, surfaces, borders, charts, and skeleton states.
Tailwind mappings
The registry adds mappings such as these to
@theme inline in the same CSS file:@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-primary: var(--primary);
--color-destructive: var(--destructive);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
}
This exposes
bg-background, text-foreground, bg-primary, text-destructive, border-input, and ring-ring.Do not add redundant
--color-bg, --color-fg, or --color-danger aliases.