UaiUI
Sistema de design com bordas retas, sombras duras e temas por tokens. Cada componente tem preview, código e requisitos de acessibilidade.
Tokens e temas
As variables do Figma são a fonte de verdade. Um script as converte em tokens.css, e os componentes só leem essas propriedades.
Camadas
| Coleção no Figma | Modos | Papel |
|---|---|---|
| Escala | Valor | Medidas base: 0, 2, 4, 8, 12, 16, 24 e 44 px. |
| Dimensões | Valor | Borda, sombra, raio, anel de foco e movimento. |
| Primitivos | Claro, Escuro | Paletas por família, papel (surface, txtOn, border, txt) e nível (20 a 180). |
| Semântica | Positiva | Papéis de interface e níveis de comportamento (lightest, active, normal, action, pressed, darkest). |
| Componente | Valor | Um token por parte do componente, apontando para a semântica. |
| Densidade | Desktop, Mobile, Compacto | Todos os tamanhos dos componentes. |
As propriedades CSS seguem o nome da variable com barras trocadas por hífens: button/padding-x vira --button-padding-x.
Usar no projeto
O pacote publica só os tokens e o CSS dos componentes.
@import 'uaiui-ds/tokens-wrapper.css';
@import 'uaiui-ds/components/button.css';
@import 'uaiui-ds/components/accordion.css';
@import 'uaiui-ds/components/toast.css';Os tokens valem só dentro do wrapper .uaiui; nada vai para o :root:
<div class="uaiui">…componentes…</div>
<div class="uaiui" data-uaiui-theme="dark" data-uaiui-density="compact">…</div>- Tema:
data-uaiui-theme="dark". Sem atributo vale o claro, sem seguirprefers-color-scheme. - Densidade:
data-uaiui-density="mobile|compact". Sem atributo, Desktop.
Atualizar a partir do Figma
- Exporte as variables para
tokens/figma-variables.txt(uma linha por variable, um valor por modo). - Rode
npm run tokens. O script gerasrc/styles/tokens.css.
Só entram no arquivo os tokens que os componentes publicados usam. Ao documentar um componente novo, acrescente as variables dele ao arquivo de exportação.
Amostra de cores
- ui-bg-page
- ui-bg-panel
- ui-fg-default
- ui-fg-muted
- ui-brand-band
- interface-function-primary-normal-background
- interface-function-secondary-normal-background
- interface-function-error-normal-background
- success-behavior-normal-surface
- warning-behavior-normal-surface
- info-behavior-normal-surface