Carregando…Carregando…Carregando…Carregando…Paleta de design tokens: brand intents, semantics, surfaces, texto e escala.
$ npx kikitocn add colorsimport { Colors } from "@/components/ui/cn/colors/Colors";
export function ColorsExample() {
return (
<Colors />
);
}Brand Colors — Patina / Kinpaku / Violet / Rose
Cada intent expõe 6 variantes. --ks-primary, --ks-secondary etc. são aliases semânticos. As swatches refletem o tema atual (light / dark).
Semantic Intents — Danger / Success / Warning / Info / Neutral
Aliases Semânticos
Use --ks-primary / --ks-secondary / --ks-tertiary nos componentes. Os aliases resolvem dinamicamente ao alterar o token de marca.
| Alias | Brand token | base | hover | deep | soft | fg |
|---|---|---|---|---|---|---|
--ks-primary | --ks-patina | |||||
--ks-secondary | --ks-kinpaku | |||||
--ks-tertiary | --ks-violet | |||||
--ks-quaternary | --ks-rose | |||||
--ks-neutral | --ks-neutral-btn |
Surfaces — Lacquer / Graphite
lacquer-deep
dark: oklch(8% .006 95)
light: oklch(96% 0 0)
lacquer
dark: oklch(13% .006 95)
light: oklch(99% 0 0)
lacquer-raised
dark: oklch(14.5% 0 0)
light: oklch(100% 0 0)
lacquer-float
dark: oklch(18% .004 95)
light: oklch(98% 0 0)
lacquer-sunken
dark: oklch(10% .006 95)
light: oklch(95% 0 0)
graphite
dark: oklch(20% .004 95)
light: oklch(96% 0 0)
graphite-2
dark: oklch(27% .003 95)
light: oklch(93% 0 0)
Text
text
dark: oklch(87% 0 0)
light: oklch(18% 0 0)
text-muted
dark: oklch(62% 0 0)
light: oklch(46% 0 0)
text-faint
dark: oklch(42% 0 0)
light: oklch(65% 0 0)
Border Radius
xs2pxsm6pxmd10pxlg14pxxl20px2xl28pxpill9999px--ks-radius-xs2px--ks-radius-sm6px--ks-radius-md10px--ks-radius-lg14px--ks-radius-xl20px--ks-radius-2xl28px--ks-radius-pill9999pxSpacing Scale
--spacing-xs8px--spacing-sm12px--spacing-md16px--spacing-lg24px--spacing-xl32px--spacing-2xl48pxEasing Curves
--ease-out-quintcubic-bezier(0.22, 1, 0.36, 1)--ease-in-out-quartcubic-bezier(0.76, 0, 0.24, 1)--ease-springcubic-bezier(0.34, 1.56, 0.64, 1)