@fairyxtopia/design-tokens

Documentação Detalhada da Engine de Tokens "Design Tokens"

Introdução a Tokens de Design e Style Dictionary

Tokens de Design são, essencialmente, variáveis que armazenam valores de design, como cores, fontes, espaçamentos, etc. Eles ajudam a manter a consistência no design em diferentes plataformas e projetos. Por exemplo, um token de cor pode ser definido uma vez e usado em vários lugares, garantindo que a mesma cor seja aplicada consistentemente.

Style Dictionary é uma ferramenta que permite gerenciar esses tokens de design. Ela transforma tokens definidos em formatos como JSON em estilos utilizáveis para diferentes plataformas (por exemplo, CSS para web, XML para Android, etc.). Estrutura do Projeto "Design Tokens"

O projeto está estruturado em várias pastas e arquivos importantes:

Pasta src: Contém o código-fonte da engine de tokens.
    brand.js: Gerencia tokens específicos de marcas.
    build.js: Constrói os tokens a partir dos dados brutos.
    config.js: Configurações para o processamento dos tokens.
    index.js: Ponto de entrada do código, orquestra a execução dos scripts.

Pasta tokens: Contém os tokens brutos (normalmente vindos do Figma) organizados por marcas, temas e modos.

Pasta dist: Armazena os tokens processados em formatos prontos para uso (CSS, SCSS).

Descrição Detalhada dos Scripts

brand.js:
    Função: Organiza os tokens por marca, tema e modo.
    Processo: Lê diretórios e subdiretórios, criando um array de tokens organizados.
    Importância: Fundamental para a personalização e organização detalhada dos tokens.

build.js:
    Função: Transforma tokens brutos em formatos utilizáveis.
    Processo: Usa o Style Dictionary para processar os tokens conforme as configurações definidas em config.js.
    Importância: Peça central no processo de transformação dos tokens.

config.js:
    Função: Define como os tokens serão transformados.
    Processo: Configura o Style Dictionary com filtros e formatos específicos para diferentes plataformas (CSS, SCSS).
    Importância: Permite a flexibilidade e customização na transformação dos tokens.

index.js:
    Função: Coordena a execução dos scripts e inicia o processo de construção dos tokens.
    Processo: Chama getBrands para obter tokens organizados, calcula os caminhos de construção e utiliza buildTokens para processar os tokens.
    Importância: Ponto de partida para a execução da engine de tokens, orquestrando todo o processo.

Processo de Geração de Tokens

Extração de Tokens: Inicialmente, os tokens são extraídos do Figma e organizados na pasta tokens.

Organização dos Tokens: brand.js organiza esses tokens por marca, tema e modo.

Construção dos Tokens: build.js, usando as configurações de config.js, transforma esses tokens em formatos prontos para uso. Isso envolve converter os dados JSON em estilos CSS, SCSS, etc.

Output Final: Os tokens transformados são salvos na pasta dist, prontos para serem integrados em projetos de desenvolvimento web ou outras plataformas.

Conclusão

Esta documentação apresenta uma visão geral da engine de tokens "Design Tokens". O projeto demonstra uma abordagem modular e flexível para gerenciar e transformar tokens de design, desde a sua extração até a geração de estilos prontos para uso em diversas plataformas. Esta engine é um exemplo prático de como os tokens de design podem ser eficientemente gerenciados e aplicados em diferentes contextos de desenvolvimento.

Instale as dependências (uso o Npm para gerenciar os pacotes):

  npm

Para fazer o build da aplicação:

  npm build

A pasta gerada é dist.

Para publicar o pacote:

  npm publish --access public