Pular para o conteúdo principal

CronosPay UI Patterns (Tailwind-first)

Este documento define os padrões visuais para telas de listagem (cards, filtros, tabelas e ícones) e como aplicar com Tailwind sem criar CSS por página.

1) Tokens obrigatórios​

  • Cores de superfície, texto e borda devem ser centralizadas em tailwind.config.js (theme.extend.colors.cp).
  • Radius e shadow devem usar valores únicos para o sistema (ex.: rounded-cp, shadow-cp).
  • Estados de status devem usar sempre o mesmo mapeamento:
    • Ativo → verde
    • Bloqueado → amarelo/laranja
    • Inativo → cinza
    • Pendente → âmbar

2) Estrutura padrão de listagem​

Toda tela de listagem deve seguir esta ordem:

  1. header da página (título + descrição)
  2. card de conteúdo
  3. filterbar (busca + filtros)
  4. table-wrap com table
  5. paginação/ordenação (cp-table)

3) Contrato mínimo de HTML​

<section class="cp-list-card">
  <div class="cp-list-filterbar">
    <input class="cp-filter-input search-input" data-cp-table-target="minhaTabela" />
    <select class="cp-filter-select cp-tom-select" data-cp-table-target="minhaTabela" data-cp-table-filter-col="6"></select>
  </div>

  <div class="cp-table-wrap">
    <table id="minhaTabela" class="cp-table cp-data-table" data-cp-table>
      <thead>...</thead>
      <tbody>...</tbody>
    </table>
  </div>
</section>

4) Regras de implementação​

  • Evitar CSS inline para layout/cores.
  • Evitar estilo exclusivo para uma única tela de listagem.
  • Ações de linha devem usar cp-icon-btn (ou classe equivalente no Tailwind).
  • Foco de teclado deve ser sempre visível (focus-visible).
  • Tabela precisa ter estado vazio padronizado.

5) Migração recomendada​

  1. Aplicar padrão em Usuários Ativos (piloto).
  2. Reaplicar em White Label > Listar.
  3. Reaplicar em Gestão > Planos.
  4. Remover CSS duplicado por página após cada migração.