6.6 KiB
6.6 KiB
Sistema de Ícones — CyberCore Signer
Este documento estabelece as especificações de design, gramática visual, convenções de código e diretrizes de renderização do sistema de ícones do CyberCore Signer.
1. Gramática Visual e Grid Base
O sistema de ícones do CyberCore Signer foi projetado para oferecer clareza, consistência corporativa e alta fidelidade tanto no Modo Claro quanto no Modo Escuro, além de suporte a telas com alta densidade de pixels (HiDPI / Retina).
| Parâmetro | Especificação | Descrição |
|---|---|---|
| ViewBox Canônico | 0 0 24 24 |
Todos os ícones são desenhados em um canvas quadrado padronizado de 24×24 pixels. |
| Safe Area | 2px em todas as bordas |
Os grafismos principais ficam contidos na área útil de 20×20px (coordenadas de 2 a 22). |
| Stroke (Espessura) | 1.75px a 2.0px |
Traços consistentes entre todos os glifos vetoriais, proporcionando peso uniforme. |
| Cantos e Terminações | round |
stroke-linecap="round" e stroke-linejoin="round" para um visual moderno e suave. |
| Texto Embutido | Nenhum (Proibido) |
Ícones não devem incorporar elementos <text>. Toda semântica é transmitida por formas puras e labels da interface. |
2. Paleta de Cores e Tintas Semânticas
Os ícones utilizam currentColor como tinta principal, permitindo repintura dinâmica e herança das cores dos tokens do tema ativo:
| Papel | Token / Cor Modo Claro | Token / Cor Modo Escuro | Uso |
|---|---|---|---|
Tinta Principal (currentColor) |
#1E293B (-fx-color-text) |
#F1F5F9 (-fx-color-text) |
Linhas de contorno, silhuetas e glifos primários. |
| Acento Primário | #0288D1 (-fx-color-primary) |
#38BDF8 (-fx-color-primary) |
Elementos de destaque, dobras de documentos, escudos. |
| Sucesso | #10B981 (-fx-color-success) |
#34D399 (-fx-color-success) |
Confirmações, validações concluídas (check, validate). |
| Alerta / Atenção | #F59E0B (-fx-color-warning) |
#FBBF24 (-fx-color-warning) |
Avisos de validade próxima, selos e certificações (seal). |
| Erro / Perigo | #EF4444 (-fx-color-error) |
#F87171 (-fx-color-error) |
Ações destrutivas, falhas de assinatura (error, exit). |
| Atenuado / Muted | #64748B (-fx-color-text-muted) |
#94A3B8 (-fx-color-text-muted) |
Guias internas, linhas secundárias, fechar (close). |
3. Escala de Tamanhos Padronizados
Para manter a consistência da interface, os ícones devem ser consumidos exclusivamente através dos 5 tamanhos canônicos definidos na fachada Icons:
16px 20px 24px 32px 40px
[ Micro ] [ Pequeno ] [ Padrão ] [ Médio ] [ Grande ]
SIZE_16(16×16 px): Badges de status de certificado, botões auxiliares pequenos de janelas de diálogo (ex.: fechar, atualizar).SIZE_20(20×20 px): Menus secundários, botões de ação secundária, itens compactos em listas.SIZE_24(24×24 px): Tamanho padrão de componentes, botões de barra lateral do Hub, campos com ícone prefixado.SIZE_32(32×32 px): Cabeçalhos de diálogos de aprovação CCSP, títulos de assistentes.SIZE_40(40×40 px): Cartões e botões do painel principal (Hub de Ações Rápidas).
4. Catálogo dos Ícones Vetoriais
| Arquivo SVG | Glifo / Nome | Propósito e Uso na Aplicação |
|---|---|---|
pdf.svg |
Icons.pdf() |
Assinatura de documentos PDF e fluxos PAdES. |
xml.svg |
Icons.xml() |
Assinatura de documentos XML e notas fiscais (XMLDSig). |
file.svg |
Icons.file() |
Assinatura de arquivos e digests genéricos. |
attached.svg |
Icons.attached() |
Assinatura atachada / envelopada (CAdES Attached). |
batch.svg |
Icons.batch() |
Assinatura de múltiplos documentos em lote. |
co-sign.svg |
Icons.coSign() |
Adição de co-assinatura em documento já assinado. |
timestamp.svg |
Icons.timestamp() |
Aplicação de carimbo do tempo (TSA). |
ltv.svg |
Icons.ltv() |
Assinatura com validação de longo prazo (LTV). |
validate.svg |
Icons.validate() |
Validador de integridade e assinaturas digitais. |
validate-timestamp.svg |
Icons.validateTimestamp() |
Validador específico de carimbos de tempo. |
seal.svg |
Icons.seal() |
Gerenciamento e aplicação de selos visuais. |
seal-icp-brasil.svg |
Icons.sealIcpBrasil() |
Selo vetorial oficial padrão ICP-Brasil. |
cert.svg |
Icons.certificates() |
Gerenciamento e seleção de certificados A1 e A3. |
shield.svg |
Icons.shield() |
Segurança, proteção e integridade do agente. |
settings.svg |
Icons.settings() |
Painel de configurações e preferências locais. |
logs.svg |
Icons.logs() |
Visualizador de registros de auditoria e logs locais. |
tutorial.svg |
Icons.tutorial() |
Guia interativo e tutorial de primeiros passos. |
about.svg |
Icons.about() |
Diálogo sobre o CyberCore Signer, versão e licença. |
exit.svg |
Icons.exit() |
Confirmação e encerramento do agente desktop. |
refresh.svg |
Icons.refresh() |
Atualizar lista de certificados e recarregar dados. |
sun.svg |
Icons.sun() |
Alternador para Modo Claro. |
moon.svg |
Icons.moon() |
Alternador para Modo Escuro. |
arrow-right.svg |
Icons.arrowRight() |
Navegação para próximo passo ou expansão. |
close.svg |
Icons.close() |
Fechar diálogo, dispensar notificação ou cancelar. |
check.svg |
Icons.check() |
Operação concluída com sucesso ou item selecionado. |
error.svg |
Icons.error() |
Alerta de falha, cancelamento ou erro de hardware. |
star.svg |
Icons.star() |
Certificado padrão ou favorito selecionado. |
zoom-in.svg |
Icons.zoomIn() |
Aumentar zoom na visualização de documento ou selo. |
zoom-out.svg |
Icons.zoomOut() |
Reduzir zoom na visualização de documento ou selo. |
zoom-fit.svg |
Icons.zoomFit() |
Ajustar visualização à tela ou página inteira. |
5. Implementação Técnica
Fachada Icons
A classe br.com.cybercore.signer.ui.components.Icons centraliza a instanciação:
// Tamanho padrão (24px) com cor do tema ativo:
Node icon = Icons.settings();
// Tamanho específico:
Node refresh = Icons.refresh(Icons.SIZE_16);
// Tinta customizada:
Node custom = Icons.of("pdf", Icons.SIZE_40, Color.web("#0288D1"));
Repintura Dinâmica
Ao registrar alteração de tema em ThemeManager, os nós de ícone baseados em currentColor recebem automaticamente o listener e atualizam suas cores em tempo real sem necessidade de recriar a janela.