Instalação e tema

Num projeto gerado pelo Studio, tudo isto já vem configurado. Esta página é para quando adicionas o Design System a uma aplicação existente, ou queres perceber e personalizar a configuração.

RequisitosCopy Anchor Link

InstalarCopy Anchor Link

pnpm add @igrp/igrp-framework-react-design-system

O pacote vive no registry da NOSi — ver a nota sobre o --registry em CLI.

Configurar o CSSCopy Anchor Link

O Design System não traz CSS compilado: a tua aplicação compila o Tailwind e lê as classes usadas pelos componentes. No CSS principal (por exemplo src/styles/globals.css):

@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

/* lê a tua aplicação e o Design System */
@source "../**/*.{ts,tsx,js,jsx}";
@source "../../node_modules/@igrp/igrp-framework-react-design-system/dist/**/*.{js,jsx,ts,tsx,mjs,cjs}";

/* tokens do tema */
@import "@igrp/igrp-framework-react-design-system/tokens";

/* opcional: os teus overrides */
@import "./themes.css";

Usar os componentesCopy Anchor Link

'use client';

import { IGRPButton, IGRPCard, IGRPInputText, useIGRPToast } from '@igrp/igrp-framework-react-design-system';

Os componentes IGRP* são componentes de cliente — o ficheiro que os importa precisa de 'use client'.

TokensCopy Anchor Link

As cores, raios e estados vêm de variáveis CSS definidas em :root e .dark. Usa sempre as classes semânticas (bg-primary, text-muted-foreground, border-border…), nunca cores Tailwind cruas — é isso que faz o dark mode e os temas funcionarem.

Dark modeCopy Anchor Link

O dark mode é a classe .dark num elemento pai (normalmente <html>). Com next-themes:

import { ThemeProvider } from 'next-themes';

<ThemeProvider attribute="class" defaultTheme="system">
  {children}
</ThemeProvider>

Para a barra do browser em mobile acompanhar o tema, usa useIGRPMetaColor() no layout.

Personalizar o temaCopy Anchor Link

Sobrepõe os tokens num ficheiro teu, carregado depois do import dos tokens:

:root {
  --primary: oklch(0.62 0.13 230);
  --primary-foreground: oklch(0.985 0 0);
}

.dark {
  --primary: oklch(0.72 0.12 230);
  --primary-foreground: oklch(0.205 0 0);
}

/* variantes de tema ativáveis por classe */
.theme-green {
  --primary: var(--color-green-600);
}

Componentes descontinuadosCopy Anchor Link