Introdução
O IDPlugger UI (@handsondigital/idplugger-ui) é a biblioteca de UI para os hotsites da plataforma IDPlugger,
reunindo componentes React, tokens de design, temas de marca e ícones, é a base para os novos hotsites que usam a
plataforma.
Princípios
Seção intitulada “Princípios”- Multi-Marcas: Através dos tokens, troque a identidade dos componentes usando as variáveis
--color-brand-*,--font-brand-*e--radius-brand, no:rootou num elemento comdata-brand. - Acessível por padrão: Os componentes usam semântica HTML e ARIA, e o contraste dos pares de texto é medido em claro e escuro em cada marca.
- Sem Tailwind obrigatório: O CSS vem pronto em
style.css; quem usa Tailwind 3 ou 4 tem variantes para integrar. - Documentado para desenvolvedores e agentes de IA: Os mesmos componentes alimentam este portal, o Storybook e o manifest lido pelo servidor MCP.
O que vem no pacote
Seção intitulada “O que vem no pacote”| Entrada | Conteúdo |
|---|---|
@handsondigital/idplugger-ui |
Componentes React (lista completa em Componentes) |
@handsondigital/idplugger-ui/icons |
1.806 ícones, um componente por ícone |
@handsondigital/idplugger-ui/tokens.css |
Tokens: primitivos, contrato da marca, semânticos (claro e escuro), componentes e densidade |
@handsondigital/idplugger-ui/fonts.css |
Fontes da identidade idPlugger (Poppins e VAG Rundschrift D); opcional |
@handsondigital/idplugger-ui/style.css |
CSS de todos os componentes |
@handsondigital/idplugger-ui/style.layer.css |
O mesmo CSS em @layer idplugger-ui, para Tailwind 4 |
@handsondigital/idplugger-ui/css/<Componente>.css |
CSS de um componente, com as dependências (css/layer/ para Tailwind 4) |
@handsondigital/idplugger-ui/themes/*.css |
Presets de marca (idplugger, campaign-orange) |
@handsondigital/idplugger-ui/tokens.dtcg.json |
Tokens em DTCG para designers e ferramentas |
Requisitos
Seção intitulada “Requisitos”- React e ReactDOM 18 ou superior.
- Navegadores com suporte a
color-mix()(Chrome 111, Safari 16.2, Firefox 113 ou superiores).