@grapadigital/design-tokens

@grapadigital/design-tokens

Pacote de Design Tokens da Grapa Digital, contendo cores, tipografia, espaçamento, sombras e radius extraídos do web-grapa-hub. Este pacote é construído focado em Tailwind CSS v4.

Instalação

Em seu projeto (app consumidor), instale o pacote:

npm install @grapadigital/design-tokens

(Ou use pnpm add, yarn add, dependendo do seu package manager)

Configuração (Tailwind v4)

Como este pacote foca inteiramente no Tailwind v4, não há tailwind.config.js para atualizar. Tudo o que você precisa fazer é importar o arquivo CSS fornecido por este pacote no seu CSS global.

No seu arquivo CSS principal (ex: app.css ou globals.css):

@import "@grapadigital/design-tokens/styles.css";

/* Seus próprios estilos customizados aqui, se houver */

O que o styles.css inclui?

• @theme inline: Define todas as fontes, cores, e escalas de radius.
• Variáveis CSS Semânticas: No :root e .dark, disponibilizando cores dinâmicas (background, primary, success, error, etc) com o tema claro por padrão.
• Tipografia: Adiciona extensões de tamanho (de --text-2xs até --text-7xs).
• Fontes: Configura as fontes (Geist Variable, Geist Mono Variable, e Instrument Serif).

(Lembre-se: As fontes já são declaradas via dependência deste pacote, mas seu bundler deve conseguir resolvê-las. Caso não, você pode importar os arquivos de fonte diretamente da dependência no seu root).

Regras de Uso (Design System)

1. Uso Exclusivo de Variáveis Semânticas: Toda cor utilizada em novos componentes deve vir das variáveis expostas, nunca via hexadecimais hardcoded (ex: use bg-primary em vez de bg-[#5451a4]).
2. Cor de Marca: A única cor primária da marca é mapeada via primary (#5451a4 no claro, #5c5db4 no escuro).
3. Modo Escuro Obrigatório: Todo componente deve dar suporte ao modo escuro usando as classes geradas ou a custom-variant dark:. O pacote já traz dark: configurada nativamente na sintaxe do v4 (@custom-variant dark (&:is(.dark *));).
4. Cores de Feedback: Para sucesso, erro, aviso e informação, utilize sempre os tokens semânticos: bg-success, text-error, border-warning, bg-info-background, etc. Não use cores genéricas (green-500) em componentes.

Classes de Feedback Disponíveis

O pacote exporta a estrutura completa para criação de componentes complexos:

• --success, --success-foreground, --success-background, --success-border, --success-text
• --warning, --warning-foreground, --warning-background, --warning-border, --warning-text
• --error, --error-foreground, --error-background, --error-border, --error-text
• --info, --info-foreground, --info-background, --info-border, --info-text

O que gera classes utilitárias no Tailwind, como: bg-success-background, text-warning-text, border-error-border.

Migração de Tailwind v3 para v4

Este pacote já é implementado usando os novos padrões do Tailwind v4. Caso o seu projeto consuma este pacote mas ainda esteja no Tailwind v3, será necessário priorizar a migração do seu app para a versão 4, visto que este pacote não exporta presets JavaScript para o v3.