Ir ao conteúdo
SEED engenhariaDesign System

Componentes

0. Fundamentos de componente

seed-componentes.md v1.43 · §00seção 2 de 9800-fundamentos-de-componente-valem-para-todos-os.md · MD5 9a87a77f

Título completo no canon: Fundamentos de componente (valem para todos os blocos)

  1. Toda cor via token semântico (--seed-action-primary), nunca primitivo, nunca hex. Dark mode vem de graça.
  2. Estados obrigatórios em todo componente interativo: default · hover · active/pressed · focus-visible · disabled · loading (quando houver operação assíncrona). Componente sem os 6 documentados não é "pronto".
  3. Foco sempre visível: box-shadow: var(--seed-focus-ring) — nunca outline: none sem substituto.
  4. Alvo de toque ≥44×44px no tamanho padrão (WCAG 2.2 / mobile). Tamanhos densos (sm) são para interfaces desktop de alta densidade.
  5. Motion produtivo: transições de estado usam --seed-dur-productive-fast (100ms) com --seed-ease-productive. Nada de animação expressiva em micro-interação.
    • ⭐ --seed-ease-out = cubic-bezier(.2,.8,.4,1) — FIXADO em 2026-08-26, por medição. Esta spec o usava quatro vezes (thumb do switch 120 ms · toast 160 ms · barra de progresso 200 ms · modal/drawer) e nunca dizia o valor, então o acervo tinha dois: .2,.8,.4,1 em 3 artefatos e .2,.7,.3,1 em 2.
    • ⚠ A medição mostrou que os dois são a mesma curva. Resolvendo o bézier em 21 instantes de um movimento de 120 ms, a diferença máxima é 1,5% do percurso e, em tempo, 0,3 ms. A 60 Hz um quadro dura 16,7 ms — 0,3 ms é 1/56 de um quadro. Não existe monitor onde essa diferença apareça. Escolheu-se a de maior uso, que também é a que faz o conserto ser de 2 arquivos e não de 3.
    • ⭐⭐ E o mesmo teste respondeu a pergunta que ninguém tinha feito: --seed-ease-out deve existir, ou era apelido de --seed-ease-productive? Contra o productive, a diferença é 36,8% do percurso e 24,9 ms — quase um quadro e meio, 83 vezes maior que a diferença entre as duas candidatas. São curvas diferentes de verdade, então o token merece existir. Sem o número, essa pergunta se responderia por gosto.
  6. Status de maturidade por componente: rascunho → estável → depreciado.
  7. Microcopy é parte do componente — cada spec define as regras de texto no tom SEED (direto, acolhedor, sem floreio).
  8. Responsivo por padrão (v0.7 — diretriz de paridade mobile/app, 2026-08-02). Todo componente especifica seu comportamento em superfície de toque: o que empilha, o que vira full-width, o que muda de tamanho. Largura sempre fluida dentro do layout (breakpoints oficiais nos tokens v1.2 §2.9; pior caso de teste: 360px). Hover é progressivo, nunca portador único de informação — não existe hover no toque; toda informação apresentada em hover precisa de equivalente acessível por toque/foco. Campos usam --seed-fs-field-touch (16px) em pointer: coarse. Motivo: apps serão produzidos e o uso mobile supera o desktop; nenhum bloco nasce desktop-first.
Esc