@sula-tech/design-tokens

Sulamérica Design Tokens

Documentação

• Wiki
• Decisões arquiteturais

Pre-requisitos

• Node >= 20.11.0 - consulte o arquivo .nvmrc

Estrutura de pastas

# Fontes, imagens, etc
/assets
|- fonts
   |- ...

# Resultado do transcode dos tokens (pasta temporária, será removida e migrada para outra abordagem de distribuição)
/build
|- compose
|- css
|- flutter
|- json
|- scss

# Configurações do Style Dictionary
/src

# Tokens exportados do Tokens Studio no Figma
# (será sincronizado automaticamente pela ferramenta - WIP)
/tokens
|- breakpoint
|- theme
|- **.json

Como utilizar

Os tokens estão distribuídos em um pacote NPM no npmjs.

Para instalar o pacote em seu projeto, basta rodar:

npm install @sula-tech/design-tokens

Desenvolvimento

Scripts

Para desenvolver e compilar os tokens, siga os passos abaixo:

# Instale as dependências
npm install

# Execute o script de compilação
npm run start:dev

Versão do Node necessária descrita no arquivo .nvmrc.

Se estiver utilizando NVM rode nvm use para obter automaticamente a versão.

PNPM

pnpm i

pnpm start:debug

Alterações de código

• Os tokens exportados no Tokens Studio devem ser atualizado na pasta /tokens.
• O arquivo principal com as configurações do Style Dictionary é o build-tokens.js.

Contribuindo

Para contribuir com o projeto abra uma discussão no repositório para alinhar a necessidade com os CODEOWNERS.