Tokens e temas

Os tokens seguem o método do IBM Carbon, em três camadas:

1. Paleta (--tj-navy-900, --tj-blue-500…): os valores. Nenhum componente usa a paleta direto.
2. Papéis (--tj-background, --tj-layer-01, --tj-text-primary…): o que cada valor faz. Um tema troca só esta camada.
3. Componentes: usam apenas os papéis.

A marca vem do portal tjes.jus.br: cabeçalho #0c0a39, azul do logo #1e84ff, rosa #f6adcd e azul de ação #2d66f4. A fonte é a Roboto, a mesma do portal.

Tema claro e escuro

import { setTheme, initTheme } from '@lab-inovacao/design-system'

initTheme()        // aplica o tema salvo ou o do sistema operacional
setTheme('dark')   // troca e lembra a escolha

O tema vale para a página inteira (data-theme no <html>) ou só para um trecho, com data-theme="dark" num elemento.

Espaço

Base de 4 px. O número do token é o múltiplo de 4: --tj-space-2 = 8 px, --tj-space-4 = 16 px, --tj-space-6 = 24 px.

Token	Valor	Uso
--tj-space-1	4 px	ícone e texto
--tj-space-2	8 px	dentro de um controle
--tj-space-3	12 px	padding de controle, entre botões
--tj-space-4	16 px	entre componentes irmãos
--tj-space-6	24 px	padding de cartão, entre blocos
--tj-space-8	32 px	margem da página, entre seções