chromatic

Chromatic é uma ferramenta para gerenciar sistemas de design gerando arquivos específicos de plataforma a partir de um arquivo de origem que descreve design tokens. O README o descreve como um sistema de build para sistemas de design multiplataforma usando design tokens. Arquivos de tokens podem conter expressões ricas em uma sintaxe natural. Exemplos incluem operações aritméticas como 18pt + 5px, unidades como 12px, funções como rgb(), mix(), e saturate(), e referências a outros tokens. Um token chamado primary-hue pode ser definido como 210deg, primary pode ser definido como hsl({primary-hue}, 100%, 40%), e primary-dark pode referenciar primary com uma transformação darken. Isso permite que as definições de tokens permaneçam compactas, expressando ainda assim as relações entre os valores. Chromatic suporta temas. Cada token pode ter uma variante de tema, como dark e light, ou layouts compact e cozy. Os artefatos de saída necessários são gerados automaticamente. Por exemplo, um token cta-button-background pode definir valores separados para temas dark e light. O suporte a temas também é demonstrado através de imports: um arquivo de tema dark pode ser importado em um arquivo de token base para que a saída gerada contenha tanto os valores padrão quanto os temáticos. A ferramenta visa ser zero-conf. Um arquivo de token simples escrito em YAML ou JSON é suficiente para começar. Chromatic também é customizável quando necessário: os usuários podem escrever ou modificar o formato dos arquivos de saída para atender aos seus requisitos. Além disso, está disponível como uma API que pode ser invocada a partir de um sistema de build. Chromatic é multiplataforma. A partir de um único arquivo de token, ele pode gerar artefatos específicos de plataforma para a web em Sass e CSS, para iOS em formatos JSON e plist, e para Android em XML. Também pode gerar um guia de estilo como um arquivo HTML. As instruções de início no README cobrem a instalação do pacote globalmente com npm install -g @arnog/chromatic, a criação de um diretório de exemplo com chromatic example ./test, e a execução de chromatic ./test -o tokens.scss ou chromatic ./test -o tokens.html. Os usuários também podem escrever seu próprio arquivo de token. Um arquivo tokens.yaml com valores de background e body-color pode ser convertido com chromatic tokens.yaml -o tokens.scss, produzindo variáveis Sass com flags padrão. Um arquivo de tema dark pode definir theme: dark e tokens como background e body-color, e então ser importado no arquivo de token principal. A saída CSS gerada inclui propriedades customizadas de nível root e um seletor de tema dark com propriedades customizadas data-theme='dark'.