trdr-tokens

Os design tokens da TRDR: CSS variables, tema Tailwind v4, tipos TypeScript e o índice reverso que as ferramentas de conformidade consomem.

A fonte é o Figma. Um script converte o dump de variáveis para o formato DTCG em src/**/*.tokens.json, e o build gera tudo o mais. Nada em dist/ se edita à mão.

Instalação

npm i trdr-tokens

@import "trdr-tokens/tokens.css";   /* as CSS variables, dark e light */
@import "trdr-tokens/theme.css";    /* o tema Tailwind v4, se voce usa Tailwind */
@import "trdr-tokens/index.css";    /* os dois */

O que sai do build

| Arquivo | Conteúdo | |---|---| | tokens.css | :root com o tema escuro e [data-theme="light"] com o claro. Os semânticos saem como var(--primitivo), então trocar a marca é mudar um lugar | | theme.css | @theme inline do Tailwind v4, em duas camadas: o vocabulário shadcn aliasado para tokens TRDR, e os nomes TRDR nativos | | tokens.js e tokens.d.ts | objeto tipado com autocomplete de todo nome de token | | tokens.json | catálogo com valor nos dois temas, referência, descrição e o nome shadcn correspondente | | mappings.json | índice reverso: dado um hex ou um px encontrado no código, qual token e qual utilitário usar | | designtokens.md | a documentação, gerada |

O contrato de nomes

Os nomes de CSS variable não mudam. Projetos TRDR e a skill /trdr-design já publicada dependem deles. Um gate no CI compara o build com o tokens.css que está em produção e falha em qualquer divergência não declarada.

Vocabulário

Duas camadas, ambas válidas no Tailwind.

Contrato shadcn, o preferencial: bg-background text-foreground bg-card bg-primary text-primary-foreground bg-muted text-muted-foreground bg-accent bg-destructive border-border ring-ring

Tokens TRDR nativos, para o que não tem equivalente shadcn: bg-surface-secondary text-content-tertiary border-border-subtle text-context-trading-up text-content-brand

Escalas: espaçamento p-md gap-sm; raio rounded-md; texto text-h1 a text-h7, text-b1 a text-b5, text-l2 text-l3, text-aux; família font-display (DM Sans), font-sans (Inter), font-mono (JetBrains Mono).

O text-h* traz tamanho, altura de linha, peso e tracking, mas não a família. Heading é sempre font-display text-h3.

As variáveis de fonte precisam ser declaradas pelo consumidor. tokens.css registra --font-dm-sans, --font-inter e --font-jetbrains-mono via @property com um initial-value textual, então a ausência delas não invalida --font-primary inteiro (era o que acontecia antes: IACVT, fonte cai no padrão do navegador, sem erro nenhum). Mas o @property é rede de segurança, não solução: sem a variável declarada via next/font, o texto renderiza no fallback genérico, não na família de verdade. Veja packages/ui/README.md para o bloco de next/font completo.

Regra que vale para quem consome

Semântico na interface, nunca primitivo. --color-neutral-800 diz que a cor é um cinza; --surface-secondary diz para que ela serve. Só o segundo acompanha a troca de tema e a evolução da marca. Os primitivos estão documentados para referência, não para uso.

Licença

MIT