Filosofia

O adila.co UI é um design system distribuído como pacote React. Ele oferece componentes acessíveis, tokens consistentes e uma base visual pronta para os seus produtos. Estas são as decisões que guiam cada componente.

Você é dono do código

O pacote mantém os componentes versionados e prontos para consumo, sem exigir configuração adicional de Tailwind. A aplicação importa os componentes e estilos diretamente de @adila-sh/ui, com versões controladas pelo projeto consumidor.

Acessibilidade primeiro, estilo por cima

Todo componente é construído com foco em acessibilidade: foco, navegação por teclado, ARIA e gestão de estado já vêm resolvidos. Nós adicionamos aparência e movimento por cima — sem comprometer o comportamento. O resultado é acessível por padrão, não por esforço posterior.

Uma única fonte de verdade

Os componentes publicados são exatamente os que renderizam o preview ao vivo nesta documentação. Não existe uma versão "de exemplo" e outra "de produção": o pacote e os docs compartilham a mesma fonte de componentes.

Tokens em OKLCH, light e dark obrigatórios

As cores são definidas em OKLCH — espaço perceptualmente uniforme, onde ajustar luminosidade não distorce o matiz. Os neutros são cinza de verdade (chroma zero, sem tinta), e há um acento: o indigo adila.co. Todo token existe em light e em dark; nenhum modo é uma reflexão tardia do outro.

Movimento com propósito

Animação serve para esclarecer o fluxo, nunca para decorar. Só animamos propriedades amigáveis ao compositor (transform, opacity, clip-path), com durações curtas, e sempre respeitando prefers-reduced-motion. Uma interface que se move demais cansa; uma que não responde parece quebrada. Buscamos o meio.

Composição sobre configuração

Em vez de um componente gigante cheio de props booleanas, preferimos peças pequenas que se compõem — data-slot, subcomponentes e variantes. Isso mantém a API previsível e deixa você montar exatamente o que precisa, sem lutar contra abstrações que tentaram adivinhar seu caso de uso.

Geometria e densidade

O sistema usa três raios: 8 px para detalhes, 12 px para campos e controles e 20 px para painéis. Botões continuam com formato pill. --radius controla a escala inteira, sem exigir ajustes em cada componente.

Campos, ações e tabs compartilham 40 px de altura. Controles compactos usam 32 px, e ações grandes usam 48 px. Cards têm 24 px de espaçamento, ou 16 px na versão compacta. Esses valores vivem nos tokens --control-height, --control-height-sm, --control-height-lg, --control-padding-inline, --panel-spacing e --panel-spacing-sm.

No tema claro, o branco dos campos e cards se separa das superfícies neutras. No escuro, a hierarquia entre página, sidebar, card e popover continua explícita. As cores de estado e os anéis de foco mantêm seus contratos de contraste.