open-index/open-npm huggingface dataset:
npm package: @raiadrogasil/pulso-design-tokens
Description: 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
Author: RD Saúde
Latest version: 2.0.0

# @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:

```bash
# 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:

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

2. 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.

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

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

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

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

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

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

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

5. Para conhecer nossa lista de tokens, consulte a [documentação oficial](https://pulso-storybook.rd.com.br/?path=/docs/design-tokens-v2--docs).

## 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:

```ts
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](https://gitlab.com/raiadrogasil/rd/designsystem/pulso-design-system/-/blob/main/LICENSE).​