Visão geral

Tokens semânticos traduzem primitivos em intenção. É aqui que o Gremorie suporta múltiplos temas e modo escuro sem que componentes saibam disso.

Se primitivos são "que cores existem", os tokens semânticos são "o que essas cores significam". Em vez de pintar um botão como bg-gray-900, você pinta como bg-primary, e o significado de "primary" muda quando o tema muda.

Esta é a camada 2 de 3: ela consome primitivos e é consumida pelos componentes e pela camada de chart. O desenho completo está no modelo de três camadas.

A intenção como interface

Toda a chrome dos componentes Gremorie conversa com a camada semântica. Ela define um conjunto fixo de intenções, background, foreground, primary, border, ring, etc, que qualquer tema precisa preencher.

Intenção	O que representa
`background` / `foreground`	Superfície base e texto sobre ela
`card` / `popover`	Variações de superfície com elevação
`primary`	A ação principal - botão protagonista
`secondary`	Ação secundária, baixo contraste
`muted`	Texto e superfícies em segundo plano
`accent`	Hover, seleção, destaque sutil
`destructive`	Ações irreversíveis, erro
`border` / `input` / `ring`	Forms e estado de foco
`chart-1` ... `chart-5`	Séries categóricas para charts
`sidebar-*`	Variantes para a chrome de navegação

Seis temas, dois modos

O Gremorie embarca seis temas. O tema Default é a própria camada base; os outros cinco espelham a voz visual dos principais produtos de AI:

Default

A camada base em gray neutro. Conservador, profissional, sem identidade de marca.

Claude

Clay quente (terracota coral) sobre superfícies creme, apoio em taupe, display serifado.

ChatGPT

Acento emerald sobre superfície grafite flat, de sombras suaves.

Gemini

Azul Google com rampa de chart azul-para-roxo e o radius mais arredondado.

Perplexity

Turquesa verdadeiro sobre offblack. Sóbrio, compacto, o menor radius.

Mistral

Laranja flame com primary preto-sobre-laranja, direto da marca.

Cada tema entrega light e dark independentemente. O switch é uma única troca de atributo:

<html data-theme="claude">
  <!-- Claude, light -->
</html>
<html data-theme="gemini" class="dark">
  <!-- Gemini, dark -->
</html>

Componentes não sabem qual tema está ativo. Eles pedem bg-primary, e o navegador resolve o var(--primary) no contexto certo.

Como os tokens são definidos

A camada semântica base vive em packages/tokens/styles/theme.css (:root para light, .dark para dark). Cada tema nomeado é um arquivo de override em packages/tokens/styles/themes/<id>.css que remapeia só o que difere, referenciando primitivos via var(--color-<token>):

:root[data-theme='mistral'] {
  --primary: var(--color-orange-600);
  --primary-foreground: var(--color-gray-950);
  --accent: var(--color-orange-100);
  /* ... */
}

A consequência: ajuste o --color-orange-600 na camada primitive e o tema Mistral, junto com qualquer outro que referencie orange-600, atualiza automaticamente. Edite uma vez, cascateia. Tokens que um tema não sobrescreve resolvem para a camada base, então um tema de acento como o Mistral cabe em uma dúzia de linhas enquanto um tema de superfície completa como o Claude remapeia quase tudo.

Para a tabela completa

A página Colors tem o mapeamento intenção → valor (light e dark) para os seis temas. Use-a para entender por que um botão fica clay em um tema e emerald em outro, e para auditar se o seu próprio tema customizado está preenchendo as intenções com valores consistentes.

A regra de bolso: referencie primitivos via var(--color-<token>) sempre que um servir, para manter a cascata íntegra. Os temas embarcados só hardcodam OKLCH em superfícies espelhadas de produto sem primitivo equivalente.