@raiadrogasil/pulso-design-tokens

@raiadrogasil/pulso-design-tokens

Pacote de design tokens do Design System Pulso da RD Saúde, garantindo consistência visual e eficiência no desenvolvimento de interfaces. Este pacote facilita a implementação de padrões de design coerentes e reutilizáveis, otimizando o processo de criação de interfaces de usuário modernas e acessíveis.

Instalação

Para instalar a biblioteca, você pode executar um dos seguintes comandos conforme a sua preferência de gerenciador de pacotes:

# Usando NPM
npm install @raiadrogasil/pulso-design-tokens

# Usando Yarn
yarn add @raiadrogasil/pulso-design-tokens

# Usando PNPM
pnpm add @raiadrogasil/pulso-design-tokens

Observação: A versão do seu Node.js precisa ser superior ou igual a 16.

Como utilizar?

1. Comece importando a biblioteca @raiadrogasil/pulso-design-tokens no seu arquivo:

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

1. No exemplo acima, foi importada a constante RDSAUDESISTEMAS_TOKENS, que é um objeto contendo todos os tokens da marca. Alternativamente, você pode importar as constantes DROGASIL_TOKENS e RAIA_TOKENS se precisar dos tokens específicos dessas marcas.

import { DROGASIL_TOKENS, RAIA_TOKENS } from "@raiadrogasil/pulso-design-tokens"

1. A seguir, um exemplo de utilização em um componente React:

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

export function Home() {
    const { colorActionFillBrandPrimaryEnabled } = RDSAUDESISTEMAS_TOKENS

    return (
        <div
            style={{
                backgroundColor: colorActionFillBrandPrimaryEnabled
            }}
        >
            <h1>Home</h1>
        </div>
    )
}

1. Se você deseja usar variáveis CSS, também é possível. Veja o exemplo abaixo de como utilizar:

import "@raiadrogasil/pulso-design-tokens/styles.css"

1. Para conhecer nossa lista de tokens, consulte a documentação oficial.

TypeScript

Para ajudar com a tipagem dos tokens, nossa biblioteca disponibiliza um tipo TPulsoTokens para melhorar a autocompletação do seu editor de código. Exemplo de uso:

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

Este tipo permite que você obtenha sugestões inteligentes e verificação de tipos ao utilizar os tokens em seu projeto.

Licença

Para utilizar este pacote, leia a licença completa acessando o link.​