Colors

Tokens semânticos são intenções — primary, foreground, border. Cada tema preenche essas intenções com primitivos diferentes, e cada modo (light / dark) traz seu próprio mapeamento. Esta página é a tabela de verdade para os quatro temas embarcados.

Como ler as tabelas

• A coluna Light mostra a swatch resolvida do primitivo referenciado no estado claro.
• A coluna Dark mostra a swatch resolvida no estado escuro.
• As colunas Primitivo trazem o nome do primitivo apontado via var(--color-<token>).

Se você está auditando um componente que parece "errado" em algum tema, comece por aqui — comparar a intenção (e.g. --primary) com o primitivo apontado em cada tema diz se a inconsistência é da chrome do componente ou do mapeamento do tema.

Default (Neutral)

Tema base, espelha o `npx shadcn init` com `baseColor: neutral`. Ponto de partida quando o produto ainda não tem voz cromática.

--radius: 0.625rem · selector [data-theme="default"]

Light	Dark	Token	Primitivo (light)	Primitivo (dark)
		--background	white	neutral-950
		--foreground	neutral-950	neutral-50
		--card	white	neutral-900
		--card-foreground	neutral-950	neutral-50
		--popover	white	neutral-900
		--popover-foreground	neutral-950	neutral-50
		--primary	neutral-900	neutral-50
		--primary-foreground	neutral-50	neutral-900
		--secondary	neutral-100	neutral-800
		--secondary-foreground	neutral-900	neutral-50
		--muted	neutral-100	neutral-800
		--muted-foreground	neutral-500	neutral-400
		--accent	neutral-100	neutral-800
		--accent-foreground	neutral-900	neutral-50
		--destructive	red-600	red-700
		--destructive-foreground	neutral-50	neutral-50
		--border	neutral-200	neutral-700
		--input	neutral-200	neutral-700
		--ring	neutral-400	neutral-500
		--sidebar	neutral-50	neutral-900
		--sidebar-foreground	neutral-950	neutral-50
		--sidebar-primary	neutral-900	neutral-50
		--sidebar-primary-foreground	neutral-50	neutral-900
		--sidebar-accent	neutral-100	neutral-800
		--sidebar-accent-foreground	neutral-900	neutral-50
		--sidebar-border	neutral-200	neutral-700
		--sidebar-ring	neutral-400	neutral-500

Amber Minimal

Importado do tweakcn. Brand amber sobre neutros frios — funciona para produtos warm-tech, fitness, criativo. Toque institucional sem perder personalidade.

--radius: 0.375rem · selector [data-theme="amber-minimal"]

Light	Dark	Token	Primitivo (light)	Primitivo (dark)
		--background	white	neutral-900
		--foreground	neutral-800	neutral-200
		--card	white	neutral-800
		--card-foreground	neutral-800	neutral-200
		--popover	white	neutral-800
		--popover-foreground	neutral-800	neutral-200
		--primary	amber-500	amber-500
		--primary-foreground	black	black
		--secondary	gray-100	neutral-800
		--secondary-foreground	gray-600	neutral-200
		--muted	gray-50	olive-900
		--muted-foreground	gray-500	neutral-400
		--accent	amber-50	amber-800
		--accent-foreground	amber-800	amber-200
		--destructive	red-500	red-500
		--destructive-foreground	white	white
		--border	gray-200	neutral-700
		--input	gray-200	neutral-700
		--ring	amber-500	amber-500
		--sidebar	gray-50	olive-950
		--sidebar-foreground	neutral-800	neutral-200
		--sidebar-primary	amber-500	amber-500
		--sidebar-primary-foreground	white	white
		--sidebar-accent	amber-50	amber-800
		--sidebar-accent-foreground	amber-800	amber-200
		--sidebar-border	gray-200	neutral-700
		--sidebar-ring	amber-500	amber-500

Amethyst Haze

Lavanda dessaturada sobre mauve. Personalidade etérea — aproxima de produtos editoriais, contemplativos, AI-first. O brand aqui é discreto: o tom do produto vem mais do espaçamento e da tipografia.

--radius: 0.5rem · selector [data-theme="amethyst-haze"]

Light	Dark	Token	Primitivo (light)	Primitivo (dark)
		--background	slate-50	mauve-900
		--foreground	gray-700	zinc-200
		--card	white	mauve-800
		--card-foreground	gray-700	zinc-200
		--popover	white	mauve-800
		--popover-foreground	gray-700	zinc-200
		--primary	slate-500	slate-400
		--primary-foreground	slate-50	mauve-900
		--secondary	violet-200	slate-600
		--secondary-foreground	gray-700	zinc-200
		--muted	gray-300	mauve-800
		--muted-foreground	mauve-500	zinc-400
		--accent	rose-300	mauve-700
		--accent-foreground	mauve-700	red-200
		--destructive	red-400	red-400
		--destructive-foreground	slate-50	mauve-900
		--border	mauve-300	slate-800
		--input	gray-200	gray-800
		--ring	slate-500	slate-400
		--sidebar	mauve-100	mauve-900
		--sidebar-foreground	gray-700	zinc-200
		--sidebar-primary	slate-500	slate-400
		--sidebar-primary-foreground	slate-50	mauve-900
		--sidebar-accent	rose-300	mauve-700
		--sidebar-accent-foreground	mauve-700	red-200
		--sidebar-border	mauve-300	gray-800
		--sidebar-ring	slate-500	slate-400

Claude

Stone, taupe, olive e amber. Pegada terrosa, editorial, próxima de papel. Funciona para AI consumer-facing, conteúdo longo-form, marcas com personalidade humana.

--radius: 0.5rem · selector [data-theme="claude"]

Light	Dark	Token	Primitivo (light)	Primitivo (dark)
		--background	stone-50	neutral-800
		--foreground	taupe-700	taupe-300
		--card	stone-50	neutral-800
		--card-foreground	neutral-900	stone-50
		--popover	white	olive-800
		--popover-foreground	taupe-800	stone-200
		--primary	amber-700	amber-600
		--primary-foreground	white	white
		--secondary	olive-200	stone-50
		--secondary-foreground	stone-600	olive-800
		--muted	olive-200	stone-900
		--muted-foreground	olive-500	olive-400
		--accent	olive-200	stone-900
		--accent-foreground	taupe-800	olive-100
		--destructive	neutral-900	red-500
		--destructive-foreground	white	white
		--border	olive-300	neutral-700
		--input	olive-400	stone-600
		--ring	amber-700	amber-600
		--sidebar	stone-50	neutral-800
		--sidebar-foreground	taupe-700	taupe-300
		--sidebar-primary	amber-700	amber-600
		--sidebar-primary-foreground	white	white
		--sidebar-accent	olive-200	stone-900
		--sidebar-accent-foreground	taupe-800	olive-100
		--sidebar-border	olive-300	neutral-700
		--sidebar-ring	amber-700	amber-600

Sobre os tokens de sidebar

Os --sidebar-* são uma família paralela que cobre a chrome de navegação lateral. Eles existem porque sidebars são surfaces muitas vezes pintadas distintas do background (mais escuras, mais claras, contrastantes). Manter intenções dedicadas evita o truque de "background com tint" que se quebra ao mudar de tema.

Editando ou adicionando temas

A receita curta:

1. Crie um novo arquivo em packages/kds/src/styles/tokens/semantic/colors-<id>.css.
2. Defina os dois selectors:

   [data-theme="<id>"] { /* light */ }
   [data-theme="<id>"].dark { /* dark */ }

3. Preencha todas as 27 intenções da tabela acima — light e dark — referenciando primitivos via var(--color-<token>).
4. Importe o arquivo no entry CSS principal do KDS.
5. Audite rodando o tema na app e comparando com os componentes principais.

Não é trabalho pequeno — preencher 54 valores (27 × 2) sem que nada quebre exige rodar componentes em todos os estados. Por isso a KDS embarca apenas quatro temas curados.