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

//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
        },
    //...
    }
  }
}