Cores

Os papéis de cor do tema, com os valores do claro e do escuro.

Use o papel, não o valor. Cada linha mostra o papel, o valor nos dois temas e copia var(--nome) ao clicar. Os valores são lidos das folhas de estilo em tempo de execução: se o tema mudar, a página muda junto.

Superfícies

Degraus de fundo: do conteúdo ao cartão. A moldura do Shell é mais escura que o conteúdo.

Texto

Texto principal, secundário e de apoio.

Ação

Cor da marca e foco. Nunca vira estado.

Estado

Só para estados reais. Os tokens com sufixo text servem a texto sobre superfície.

Bordas

Separador só onde comunica estrutura.

Moldura e ambiente

A moldura do Shell (trilho, sidebar, topbar) e o brilho do gradiente do rodapé da sidebar.

Gráfico

Séries de gráfico. Nunca para estado.

Escalas Derivadas

Quando precisar de um degrau intermediário, derive-o do papel com color-mix sobre a superfície, em vez de inventar uma cor. Clique em um degrau para copiar a expressão.

Neutra

--foreground sobre --surface. Divisores, hovers e estados desabilitados.

Claro

Escuro

Acento

--accent sobre --surface. Fundos suaves de seleção e de destaque.

Claro

Escuro

Sucesso

--success sobre --surface. Só para estados reais de sucesso.

Claro

Escuro

Cautela

--warning sobre --surface. Só para atenção e atraso.

Claro

Escuro

Perigo

--danger sobre --surface. Só para erro e ação destrutiva.

Claro

Escuro

Contraste

Pares de texto e fundo, medidos no navegador com os valores efetivos de cada tema. O mínimo é 4,5:1 para texto.

Texto sobre fundo	Uso	Claro	Escuro
`foreground / background`	Texto principal sobre o conteúdo	—	—
`foreground / surface`	Texto principal sobre cartões	—	—
`muted / background`	Texto secundário sobre o conteúdo	—	—
`muted / surface`	Texto secundário sobre cartões	—	—
`foreground / chrome`	Texto da moldura do Shell	—	—
`field-placeholder / field-background`	Placeholder dentro do campo	—	—
`muted / field-background`	Prefixo e sufixo do campo	—	—
`accent-foreground / accent`	Rótulo do botão primário	—	—
`link / surface`	Links sobre cartões	—	—
`success-text / surface`	Texto de sucesso	—	—
`warning-text / surface`	Texto de cautela	—	—
`danger-text / surface`	Texto de erro	—	—

Uso

Moldura do Shell em chrome, conteúdo em background, cartões em surface.
Tokens com sufixo text são texto de estado sobre superfície; sem o sufixo, são preenchimento.
Cor de acento e cor de gráfico nunca viram estado.

Faça

Pedir a cor pelo papel: var(--danger-text) para um erro, bg-surface para um cartão.

Evite

Copiar o valor oklch(...) ou um hex para dentro do componente.