O Design System
da Razac, no ponto ideal.
Não é a réplica do que existe — é o de-para de cada componente, de hoje para o ideal. Tabelas, variações e boas práticas numa biblioteca única, com identidade própria e pronta pro dev consumir. As cores do produto seguem as atuais; a V2 traz as novas cores da Razac.
shadcn cru — tokens quebrados (texto sem contraste), cantos retos, sem variação cancel.
Pill, 6 variações (+ cancel vermelho), 3 tamanhos, foco visível, ícone esq/dir. Bate com o portal.
Markup solto, cada tela remontava do zero — densidade, zebra e ordenação inconsistentes.
Um <P2Table/> tipado, 3 variações, denso, seleção, ordenação, footer. Mesma tabela em toda tela.
Cor
Os tokens do produto seguem os atuais (a V2 troca por aqui). O namespacedsé a marca da ferramenta de DS — não aparece no produto.
Tipografia
Inter — pesos 400/500/600/700/800. Escala enxuta, anti-scroll.
Espaço & Grid
Grade de 4. Tudo encaixa em múltiplos — gutters, paddings, gaps.
Elevação & Raio
Movimento
Discreto e funcional. Entradas 200–240ms, easing suave. Nunca enfeite que atrapalha leitura.
Botões
shadcn cru — tokens quebrados (texto sem contraste), cantos retos, sem variação cancel.
Pill, 6 variações (+ cancel vermelho), 3 tamanhos, foco visível, ícone esq/dir. Bate com o portal.
| Prop | Tipo | Default | Descrição |
|---|---|---|---|
| variant | 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'cancel' | 'primary' | Estilo. cancel = texto vermelho do portal. |
| size | 'sm' | 'md' | 'lg' | 'md' | Altura 32 / 36 / 44. |
| icon / iconRight | LucideIcon | — | Ícone à esquerda / direita. |
| full | boolean | false | Ocupa 100% da largura. |
import { P2Button } from '@/components/portal2/kit'
<P2Button variant="primary" size="md" icon={Save}>
Salvar
</P2Button>
<P2Button variant="cancel">Cancelar</P2Button>Tabelas
Markup solto, cada tela remontava do zero — densidade, zebra e ordenação inconsistentes.
Um <P2Table/> tipado, 3 variações, denso, seleção, ordenação, footer. Mesma tabela em toda tela.
| Processo | Cliente | Canal | Etapa | |
|---|---|---|---|---|
| SKT0469-SCDI | Alessandra Aguiar | Verde | Desembaraço | USD 48.250 |
| CHB0086-ESDI | Beatriz Oliveira | Amarelo | Registro | USD 12.900 |
| RCH0002-SCDU | Riachuelo Knapp | Vermelho | Em trânsito | USD 91.430 |
- Valores numéricos sempre à direita.
- Cabeçalho em caixa-alta 12px, ink-subtle.
- Densa por padrão em telas operacionais (anti-scroll).
- Status via P2ChipDI / P2Tag — nunca cor solta na célula.
- Linha clicável só quando leva a um detalhe.
| Prop | Tipo | Default | Descrição |
|---|---|---|---|
| cols | P2Col<T>[] | — | Colunas tipadas: header, cell(row), align, sortable. |
| variant | 'default'|'striped'|'bordered' | 'default' | Zebra / divisórias. |
| dense | boolean | false | Altura de linha compacta. |
| selectable | boolean | — | Checkbox por linha + estado selecionado. |
| onRowClick | (row) => void | — | Abre o detalhe. |
const cols: P2Col<Processo>[] = [
{ key: 'proc', header: 'Processo', cell: (r) => <b>{r.proc}</b> },
{ key: 'valor', header: 'Valor', align: 'right', sortable: true,
cell: (r) => r.valor },
]
<P2Table cols={cols} rows={rows} variant="striped" dense selectable />Rateio — Alocar Contas-Projeto
Modal de rateio da nota de fornecedor por conta-projeto × processo (QIVE 1.4). Casca no novo primitivoP2Modal— fiel à referência do sistema (“Mensagens de validação”) e 100% tokenizado. Padrão atual = variação Linhas (feedback Gabriela): conta + processo trocáveis por linha, sem scroll lateral.
Rateio da nota por conta-projeto e processo, com validação do total e envio ao Conexos.
Modelo de Linhas — o padrão atual do rateio.
- Estrutura. Cada linha é um trio: conta-projeto + processo + valor. Os dois selects trocam na própria linha. A grade cresce só na vertical — sem scroll lateral.
- Adicionar. "Adicionar conta projeto" na última linha; o clique já abre o seletor de conta (menos passos).
- Sugestão (última zerada). Sobrando UMA linha em branco + valor em aberto, aparece "Usar R$ X" (o que falta pra fechar). Com UMA conta só, vira o botão "Alocar esse valor em aberto".
- Rodapé em 2 blocos. Bloco 1 = totais (neutro, só informação). Bloco 2 = status: âmbar (pendência) · vermelho (acima do total) · VERDE (100% + sem pendência → "Pronto para enviar" e libera o Enviar).
- Concluído. Ao enviar, fecha e marca "Enviado ao Conexos"; reabrir mostra o rateio salvo.
- Totais de apoio. Subtotal por conta-projeto (um chip por conta) + Total por processo em chips com barra (nunca vira coluna).
- Entrada. Abre só pelas três bolinhas (Ações) — na tela dedicada e em Documentos Tomados. Sem link/card solto.
- Linhas — padrão — feedback Gabriela
- Linhas · contas pré-carregadas — todas já disponíveis; zeradas somem ao salvar
- Matriz — processos em coluna — proposta anterior, comparação
| Prop | Tipo | Default | Descrição |
|---|---|---|---|
| open / onClose | boolean / ()=>void | — | Controle de abertura (via P2Modal). |
| layout | 'cards'|'matriz'|'linhas'|'linhas-todas' | — | Corpo do modal. Padrão atual = linhas. |
| doc | RateioDoc | — | numero, fornecedor, valorTotal, processos[]. |
| contasDisponiveis | ContaProjeto[] | — | Contas selecionáveis no dropdown. |
| initial | ContaAloc[] | — | Alocação inicial — identificadas() zera tudo. |
| onSalvar / onEnviar | (next) => void | — | Salvar (sempre) / Enviar (100% e sem zero). |
import { RateioModal, identificadas } from '@/components/screens/rateio-contas-projeto/RateioModal'
<RateioModal
open={open} onClose={() => setOpen(false)}
layout="linhas" // padrão atual (feedback Gabriela)
doc={{ numero, fornecedor, valorTotal, processos }}
contasDisponiveis={CONTAS}
initial={identificadas(IDENTIFICADAS, processos)}
onSalvar={setSaved}
onEnviar={enviarAoConexos}
/>Biblioteca
A biblioteca final é o kit do Portal 2.0 — tudo abaixo é o componente real, vivo, do mesmo arquivo que monta as telas.
Beatriz Oliveira
Nada encontrado
Ajuste os filtros.
Pílulas de canal recriadas com hex solto em cada tela.
P2ChipDI + P2Tag semânticos (6 tons), sempre via token.
Alturas e foco variando entre telas, label desalinhada.
P2Field + Input/Select/Search com altura 36, foco ring primary, erro e hint padronizados.
Cada protótipo refazia a casca; itens fora de ordem.
P2Shell único: sidebar dark + topbar com busca, avatar e ações.
Cards de número ad-hoc, sem delta padronizado.
P2KPI com label, valor, delta colorido e hint.
Como o dev consome
Três caminhos, do mais simples ao mais automatizado. Tudo aponta pra mesma fonte da verdade.
Tailwind config + CSS vars. O dev usa a classe, não o hex.
Importa o kit tipado. Props validadas, zero remontagem.
Code Connect liga o nó do Figma ao componente real.
// nunca o hex; sempre o token
<div className="bg-primary text-white rounded-card" />
<span className="text-canal-vermelho" />import { P2Table, P2Button } from '@/components/portal2/kit'
<P2Table cols={cols} rows={rows} dense selectable />
<P2Button variant="primary" icon={Save}>Salvar</P2Button>{
"color": {
"primary": "#4F46E5",
"canal-verde": "#16A34A",
"canal-vermelho":"#B91C1C"
},
"radius": { "card": "12px", "pill": "9999px" }
}// liga o nó do Figma ao componente do código
figma.connect(P2Button, 'https://figma.com/…?node-id=…', {
props: { variant: figma.enum('Variant', { Primary: 'primary' }) },
example: (p) => <P2Button variant={p.variant} />,
})Governança
Toda mudança de tela/componente reflete no DS — sempre.
Cor solta não passa em review. CI pode bloquear.
Entrada no kit → preview → doc com de-para.
history[] com data e PRJ; nada quebra silenciosamente.
O ideal evolui o real; não inventa divergência gratuita.
Todo upgrade documenta o hoje → ideal.