Observações

Instalação

• Instalar biblioteca

npm i teste-design-system-02-lib

• Importar CSS no componente raiz do projeto

import "teste-design-system-02-lib/dist/styles.css";

• Importar família de fontes utilizada pelo Design System

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Inclusive+Sans:ital,wght@0,300..700;1,300..700&display=swap"
  rel="stylesheet"
/>

ou

@import url("https://fonts.googleapis.com/css2?family=Inclusive+Sans:ital,wght@0,300..700;1,300..700&display=swap");

• Sair utilizando os componentes

Preocupações e considerações

• A biblioteca utiliza Tailwind para estilizar os componentes, que já conta com um mecanismo de reset de estilos padrões do navegador. Portanto, não é necessário fazer nenhum estilo global "padrão".
  • Esse tipo de manipulação pode conflitar com os estilos Tailwind aplicados via classes, portanto use apenas em extrema necessidade, e com bastante carinho (:
• Variáveis da biblioteca estão disponíveis para a aplicação hospedeira, mas as classes Tailwind não. Portanto, caso queira utilizar Tailwind em seu projeto, é necessário configurar conforme documentação oficial.

Dúvidas

• Os ícones provenientes do Lucide serão importados aqui, e exportados depois? Ou de repente pede pra aplicação hospedeira utilizar direto?
  • Ou deixa apenas para componentes customizados pelos designers?