ASIMOV Design System - Banco Original

O Asimov é o design system do Banco Original, contendo todos os tokens que são utilizados para garantir a consistência visual e funcional em todas as interfaces digitais. Ele reúne princípios de design exclusivos e um conjunto completo de recursos, incluindo tokens de design reutilizáveis.

Índice

• Descrição
• Tokens Disponíveis
• Instalação
  • Via NPM
  • Via Azure DevOps
• Como Contribuir
• Licença
• Contato

Descrição

Este projeto fornece os tokens essenciais que compõem a base do Asimov Design System, permitindo que desenvolvedores e designers trabalhem em harmonia, mantendo consistência em todos os produtos e interfaces digitais.

Tokens Disponíveis

• Breakpoints: Definem os pontos de interrupção usados para criar layouts responsivos. Eles ajudam a adaptar o design a diferentes tamanhos de tela, como dispositivos móveis, tablets e desktops.
• Colors: Paleta de cores utilizada no design system, garantindo que todos os componentes sigam a mesma identidade visual.
• Font: Tipografia padrão e suas variações, como tamanho, peso e estilo. Mantém a uniformidade na aplicação de texto.
• Gap: Espaçamentos entre elementos em componentes ou layouts, garantindo respiro visual e organização.
• Grid: Sistema de grid que define a estrutura de layouts e a organização dos elementos nas páginas.
• Icons: Coleção de ícones usados no sistema para melhorar a comunicação visual e facilitar a usabilidade.
• Modes: Define diferentes modos de visualização, como claro e escuro, permitindo a adaptação da interface para ambientes variados.
• Padding: Definem os preenchimentos internos dos componentes, criando espaços internos consistentes entre conteúdo e bordas.
• Scales: Escalas de tamanho e proporção para elementos de interface, como fontes, ícones e botões.
• Shape: Define a forma e bordas dos componentes, como cantos arredondados, criando uma identidade visual coesa.
• Size: Tamanhos de elementos como botões e campos de entrada, para garantir legibilidade e acessibilidade.
• Space: Sistema de espaçamento que define margens e preenchimentos em torno dos elementos, criando harmonia no layout.
• TextStyle: Estilos de texto que incluem variações de tipografia, como negrito, itálico, e tamanhos pré-definidos para cabeçalhos e parágrafos.

Instalação

Via NPM

Para instalar os tokens via NPM, execute:

npm install base-theme-test-ds

Usando Yarn:

yarn add base-theme-test-ds

Via Azure DevOps

Caso esteja utilizando o Azure DevOps, siga os passos abaixo:

1. Configure o feed do Azure DevOps no seu arquivo .npmrc:

   registry=https://registry.npmjs.org/
   //registry.npmjs.org/:_authToken=SEU_TOKEN_NPM
   
   @seu-escopo:registry=https://pkgs.dev.azure.com/sua-organizacao/_packaging/seu-feed/npm/registry/
   //pkgs.dev.azure.com/sua-organizacao/_packaging/seu-feed/npm/registry/:username=SEU_USUÁRIO
   //pkgs.dev.azure.com/sua-organizacao/_packaging/seu-feed/npm/registry/:_password=SEU_TOKEN_PAT
   //pkgs.dev.azure.com/sua-organizacao/_packaging/seu-feed/npm/registry/:email=SEU_EMAIL

2. Instale o pacote:

   npm install @original/base-theme-test-ds

Como Contribuir

Contribuições são bem-vindas! Siga os passos abaixo:

1. Faça um fork do projeto.
2. Crie uma branch para sua feature: git checkout -b minha-nova-feature.
3. Commit suas mudanças: git commit -m 'Adiciona nova feature'.
4. Faça o push para a branch: git push origin minha-nova-feature.
5. Abra um Pull Request.

Licença

Este projeto está licenciado sob a Licença MIT.

Contato

Para dúvidas ou sugestões:

• Email: [email protected]