Design System

Tokens, componentes e utilitários JS do eeBox. Tudo nesta página é o código real do tema; mude o tema (claro/escuro) ou o tamanho da interface e veja os componentes acompanharem.

assets/css/tokens.css → tokens (cores, tipografia, espaço, raios, sombras, movimento, camadas) assets/css/ds.css → componentes ui-* assets/js/ui.js → Liloo.ui (formatadores, máscaras, validação, avatar, vazio, modal, store)

Cores

Use sempre tokens semânticos. No tema escuro, só os tokens mudam.

Superfícies e texto

Marca e estados

Identificação (avatares, agendas, etiquetas)

Tipografia

Inter. Corpo dos módulos em --ds-text-md (14px); chat em --ds-text-base (15px).

Espaço e raios

Espaçamento (escala de 4px)

Raios

Sombras e movimento

--ds-shadow-sm · md · lg

--ds-ease: cubic-bezier(.22, 1, .36, 1) --ds-dur-fast: .15s --ds-dur: .2s --ds-dur-slow: .4s Camadas: sticky 8 · gaveta 10 · módulo no celular 25 · popover 50 · modal 70 · visualizador 80 · aviso 90

Botões

<button class="ui-btn ui-btn--primary">…</button>   variações: --primary --accent --ghost --danger --icon --pill · tamanhos: --sm --lg

Chips, abas e segmentos

Campos

Nome * Tipo WhatsAppMáscara: Liloo.ui.mask.phone CPF/CNPJ Observações

Linha com interruptorui-switch-row + .switch

Selos e avatares

NeutroDestaqueVendido PendenteAtrasadoInfo 3

Painéis, cards e listas

Clientes148

Vendido

Conversão32%

Painel ui-panel

Agrupa um bloco de conteúdo (relatórios, configurações).

ui-card ui-card--interactive

Vazio, modal e avisos

const dados = await Liloo.ui.modal({
  title: 'Novo contato', submit: 'Salvar', size: 'md',
  body: `<label class="ui-field"><span class="ui-label">Nome</span><input class="ui-input" name="name" required /></label>`,
  validate: (d) => d.name.length < 2 ? 'Nome muito curto' : ''
});  // → { name } | null (cancelado) | { action } (botão extra)

Liloo.ui (JS)

Utilitários compartilhados — não recrie nos módulos. Exemplos calculados ao vivo:

Regras

Cores, raios, sombras e tamanhos vêm de tokens.css. Módulos mapeiam suas variáveis para tokens (ex.: --crm-line: var(--ds-line)).
Telas e módulos novos usam os componentes ui-*. Classes com prefixo de módulo (crm-, ct-, agd-…) só para o que é exclusivo daquele módulo.
Formatação, máscara, validação, avatar, estado vazio e modal: sempre Liloo.ui.
Posicionar elementos com medidas do navegador: use Liloo.rect / vw / vh / pt (respeitam o zoom da interface).
Altura de tela cheia: var(--vh100) ou as classes h-dvh/min-h-dvh (já compensadas pelo zoom).
Módulos montam num contêiner próprio (.artifact-mount); registre eventos nele, nunca no document sem remover no destroy().
Alvos de toque com pelo menos 32px no celular; textos longos com ui-truncate; nada pode vazar na horizontal.