Migração

A versão 3 traz um novo Design, tokens em camadas e temas multi-brand.

Da versão 2 para a 3

Cores e fontes

• Primária #EC2474. --color-brand-secondary agora é rosa claro #F6DAE5, com texto em --color-brand-secondary-fg (#AE1C57); para fundos escuros use --color-brand-navy.
• Status: danger #D92D20, success #34C759, info #007AFF, warning #FFCC00. Texto #101828, borda #D0D5DD.
• Títulos em VAG Rundschrift D e o resto em Poppins (antes Poppins e Inter). As fontes ficam em fonts.css, opcional.

Componentes

• AppButton: a prop variant foi removida (use appearance e tone); alturas sm 36, md 40 e lg 44 (antes 32, 40 e 48); borda de 1px; sem movimento no hover; desabilitado sem opacidade. --button-shadow-hover virou --button-shadow e shadow-button-hover virou shadow-button. O texto do contorno warning é #806600.

• AppInput: a borda e o foco ficam na caixa .app-input-group; as classes app-input--sm|md|lg|error viraram app-input-group--sm|md|error e o tamanho lg foi removido.

• Typography: h1 a h4 usam VAG Rundschrift D, com tamanhos que diminuem abaixo de 768px; caption tem 13px e footnote 14px.

• AppModal: deixou de ler os tokens legados. Troque:

  Antes	Agora
  --Fundo-Alternativo	--app-modal-surface
  --Texto	--app-modal-text
  --Titulos	--app-modal-title
  --brand-navy	--color-brand-navy (também tinge fundo escurecido, divisor e sombra)

Tokens e temas

Nenhum token foi renomeado. O que é novo:

• Contrato da marca com pares de texto: --color-brand-primary-foreground, --color-brand-secondary-hover e --color-brand-<status>-foreground.
• A marca vale em qualquer elemento com data-brand e o modo em data-theme; antes, só no :root.
• Modo escuro (data-theme="dark"), densidade (data-density) e presets em themes/*.css.
• No Tailwind 4, as entradas do @theme que apontam para tokens derivados foram para @theme inline.

Novidades

AppTextarea, AppTag, AppPaymentIcon, AppPagination, AppThumb, AppSkeleton, AppCard, AppTabs, AppAlert, AppPasswordInput, AppFileUpload e 1.806 ícones em @handsondigital/idplugger-ui/icons.

Da versão 1

Antes, o consumidor configurava o Tailwind para varrer dist/. Agora remova esse content/@source e importe style.css. As classes dos componentes passaram a ser BEM (app-button, app-button--primary-solid, app-input…).