Ipê: um design system acessível para React

Por que criar um

Eu queria que design e código lessem cor, tipografia e espaçamento do mesmo lugar. No Ipê, os tokens ficam em JSON, sincronizam com o Figma pelo Tokens Studio e são compilados pelo Style Dictionary em variáveis CSS com os mesmos nomes das variáveis do Figma. Uma mudança num lugar chega aos dois.

O que tem dentro

• Badge, Button, Checkbox, Dialog, DropdownMenu, Input, Switch, Tabs, Textarea, Toast, Tooltip.
• Temas claro e escuro a partir de tokens semânticos, seguindo o sistema ou um atributo data-theme.
• CSS puro, com um preset opcional para Tailwind CSS v4.
• Storybook que alterna cada story entre inglês e português, e entre claro e escuro.

Como é testado

Cada story roda num Chromium de verdade em todo pull request, no claro e no escuro, com seu teste de interação e uma auditoria do axe-core que inclui contraste de cor. Todo par de cores é conferido com a WCAG 2.2, incluindo a regra de 3:1 para bordas de campos de formulário.

O ciclo de QA depois da 1.0

Depois da primeira versão, testei o Ipê com um plano de teste e 24 casos de teste, incluindo leitor de tela (NVDA), zoom e alto contraste do Windows. O resultado foram 6 relatórios de bug, entre eles:

• O Switch sumia no alto contraste do Windows.
• A aba selecionada ficava igual às outras.
• O contador do Textarea era lido como "9/280", sem contexto.
• O Checkbox tinha 22px, abaixo do tamanho mínimo de alvo de 24px (WCAG 2.5.8).

Cada correção saiu na versão 1.0.1 com um teste de regressão, para não voltar sem ninguém perceber.

Versões

As versões seguem o versionamento semântico, com o Changesets escrevendo o changelog. A 2.0.0 foi uma versão major porque removeu primitivas de cor antigas em favor de uma paleta neutra; ela também marcou os componentes como client components para funcionarem dentro de Server Components do Next.js.

Changelog · Notas de acessibilidade