107 lines
6.6 KiB
Markdown
107 lines
6.6 KiB
Markdown
# 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:
|
||
```java
|
||
// 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.
|