Tokens

Os nomes de todo valor do Feitio: de onde vêm, como usar no CSS e no TypeScript, e a lista inteira.

O que são

Todo valor do Feitio (cor, espaço, letra, canto, duração) é um token com nome. Ninguém escreve um valor à mão: escreve o nome, e o valor vem do tema e do modo.

De onde vêm

• A fonte é JSON no formato aberto DTCG, em tokens/: base.tokens.json para o que não muda com o tema, e um arquivo por tema e modo em tokens/themes/.
• bun run build gera as variáveis CSS (css/tokens.css) e os nomes em TypeScript (js/tokens.ts).
• bun run check testa o contraste de cada par de cor e se toda cor cabe numa tela comum (sRGB).

Como usar

CSS

.minha-area {
  padding: var(--feitio-space-5) var(--feitio-space-4);
  border-radius: var(--feitio-radius);
  background: var(--feitio-color-surface-raised);
}

TypeScript

js/tokens.ts exporta cada nome com a variável dele, e o tipo TokenName: um nome errado não compila.

import { tokens, type TokenName } from '@feitio/core/js/tokens.ts';

const gap: TokenName = 'space.4';
element.style.gap = tokens[gap];   // 'var(--feitio-space-4)'

Os tokens de base

Os mesmos em todo tema e modo.

Os papéis de cor

Os valores da casa, de dia e à noite. Uma fachada preenche os mesmos nomes com outros valores.

Regras

• Nada de valor escrito à mão onde existe um token.
• Um token novo entra no JSON, nunca no CSS gerado: o build sobrescreve o que for editado à mão.
• Cor nova passa pelo teste de contraste antes de entrar.