open-index/open-npm huggingface dataset:
npm package: @instivo-ds/tokens
Description: tokens package
Author: Instivo
Latest version: 1.4.0

<div align="center">
    <img src="../../apps/docs/public/assets/logo.png" />
</div>
</br>
<h1 align="center">Design System</h1>
</br>
</br>

## :bubles: @instivo-ds

Com o objetivo de uniformizar a identidade visual da _Instivo_ e acelerar o tempo de desenvolvimento dos projetos, foi criado este monorepo, que contempla os seguintes pacotes:

- :package: @instivo-ds/react - Pacote contendo os componentes de ui para projetos __React__
- :artist_palette: @instivo-ds/tokens - Pacote contendo os tokens que servem de base ao _Design System_
- :hammer_and_wrench: @instivo-ds/eslint-config - Pacote contendo configuração de acordo com o style guide da _Instivo_
- :hammer_and_pick: @instivo-ds/ts-config - Pacote operacional, que oferece configuração ao _TypeScript_

####


## Como instalar e utilizar

:artist_palette: Para utilizar o pacote de tokens, como uma extensão do [Tailwind](https://tailwindcss.com/docs/installation), você precisa ter o __Tailwind__ intalado e configurado na sua aplicação, então:

1. Instale o pacote:

```
$ npm i @instivo-ds/tokens
```

2. Faça um extensão dos tokens:

```javascript
//No arquivo tailwind.config.js

//...
import { colors } from "@instivo-ds/tokens"

module.exports = {
  //...
  theme: {
    //...
    extend: {
        colors: {
          primary: colors["instivo-green"],
          neutral: colors["gray-rock"],
          warning: colors["orange-juice"],
          success: colors["green-deco"],
          error: colors["blue-wade"],
          info: colors["blue-wade"],
          white: colors.white,
          black: colors.black
        },
    //...
    }
  }
}
```