@raiadrogasil/pulso-design-tokens

Pulso Design Tokens

Bem-vindo ao pacote de design tokens do Design System Pulso da RDSaúde. Este pacote visa garantir consistência visual e eficiência no desenvolvimento de interfaces.

O que são Design Tokens?

Design tokens são os blocos de construção fundamentais de um Design System. Eles são variáveis que armazenam informações de design como cores, tipografia, espaçamento, tamanhos e outros elementos estilísticos. Esses tokens são usados para garantir a consistência visual e facilitar a manutenção do design em diferentes plataformas e tecnologias.

Benefícios dos Design Tokens

1. Consistência: Garantem que todos os elementos de design sejam uniformes em todos os produtos e plataformas.
2. Escalabilidade: Facilitam a atualização e a manutenção dos estilos, permitindo mudanças rápidas e consistentes.
3. Colaboração: Melhoram a comunicação entre designers e desenvolvedores, fornecendo uma linguagem comum para descrever os estilos.
4. Automação: Permitem a automação de processos de design, como a geração de estilos e temas, simplificando a implementação e o ajuste dos designs.

Instalação

Para instalar o pacote, utilize o seguinte comando:

yarn add @raiadrogasil/pulso-design-tokens

Arquitetura

A estrutura do projeto Pulso Design Tokens é organizada da seguinte forma:

pulso-design-tokens/
├── scripts/                # Scripts utilitários para automações
├── src/                    # Código fonte do projeto
│   ├── @types/             # Definições de tipos TypeScript
│   │   └── pulso-tokens.d.ts
│   ├── css/                # Arquivos de estilo CSS para diferentes temas
│   │   ├── drogasil.css
│   │   ├── raia.css
│   │   └── rdsaudesistemas.css
│   ├── ts/                 # Arquivos TypeScript para diferentes temas
│   │   ├── drogasil.ts
│   │   ├── index.ts
│   │   ├── raia.ts
│   │   └── rdsaudesistemas.ts
│   └── utils/              # Utilitários e adaptadores
│       ├── get-pulso-theme.ts
│       ├── pulso-design-tokens-adapter.ts
│       └── index.ts
├── package.json            # Arquivo de configuração do npm
├── tsconfig.json           # Configuração do TypeScript
└── tsup.config.ts          # Configuração do TSUP

Descrição dos Diretórios

• scripts/: Scripts utilitários que auxiliam nas tarefas de automação dentro do projeto.
• src/: Diretório principal de código fonte do projeto.
  • @types/: Contém definições de tipos TypeScript específicos do projeto.
  • css/: Contém arquivos CSS para os diferentes temas utilizados pelo design system.
  • ts/: Contém arquivos TypeScript que definem tokens e configurações para diferentes temas.
  • utils/: Contém utilitários e adaptadores necessários para o funcionamento do design system.
• package.json: Arquivo de configuração do npm que gerencia as dependências e scripts do projeto.
• tsconfig.json: Arquivo de configuração do TypeScript.
• tsup.config.ts: Configuração do TSUP para compilar os arquivos TypeScript.

Integrações

Styled-Components

Se você estiver utilizando o ThemeProvider do Pulso, pode definir os novos tokens da seguinte forma:

import { RDSAUDESISTEMAS_TOKENS } from "@raiadrogasil/pulso-design-tokens";

<ThemeProvider theme={{
    ...oldTokens, /* @raiadrogasil/pulso-tokens */
    v2: RDSAUDESISTEMAS_TOKENS
}}>
    <App />
</ThemeProvider>

Caso não esteja utilizando o ThemeProvider do próprio styled-components, siga os passos abaixo:

1. Crie um arquivo styled.d.ts e cole o código abaixo para sobrescrever o tipo DefaultTheme e incluir os novos tokens:

import "styled-components";

import type { Tokens } from "@raiadrogasil/pulso-tokens";
import type { TPulsoTokens } from "@raiadrogasil/pulso-design-tokens";

declare module "styled-components" {
  export interface DefaultTheme extends Tokens {
    v2: TPulsoTokens;
  }
}

1. Utilize o ThemeProvider conforme o exemplo abaixo:

import { RDSAUDESISTEMAS_TOKENS } from "@raiadrogasil/pulso-design-tokens";

<ThemeProvider theme={{
    ...oldTokens, /* @raiadrogasil/pulso-tokens */
    v2: RDSAUDESISTEMAS_TOKENS
}}>
    <App />
</ThemeProvider>

Links úteis

• Documentação Oficial
• Storybook ReactJS
• Storybook React Native

---