From 95981721745869f6ee283a31af08d93b1b1cbcdc Mon Sep 17 00:00:00 2001 From: Claudecio Martins Date: Tue, 20 Oct 2026 21:27:51 -0300 Subject: [PATCH] docs(ui): update documentation for single light theme and rename ui layout doc --- README.md | 3 +- assets/README.md | 2 - docs/README.md | 4 +- ...erpro-layout-and-batch.md => ui-layout.md} | 41 +++++++++---------- .../src/main/resources/assets/README.md | 2 - 5 files changed, 23 insertions(+), 29 deletions(-) rename docs/{serpro-layout-and-batch.md => ui-layout.md} (50%) diff --git a/README.md b/README.md index 7de96ee..025ffdf 100644 --- a/README.md +++ b/README.md @@ -126,8 +126,7 @@ Para detalhes completos sobre arquitetura, protocolos e manuais técnicos, acess * 🩺 **[Diagnóstico e Troubleshooting](docs/diagnostics.md):** Auto-teste e guia de resolução de problemas. * 💿 **[Instalação e Empacotamento Nativo](docs/installation.md):** Distribuição via `jpackage` sem JRE pré-instalado. * ⚖️ **[Limitações Técnicas](docs/limitations.md):** Declaração de dependências conforme a Regra 23. -* 🛠️ **[Modo de Desenvolvimento](docs/development-mode.md):** Parâmetro `--dev` e certificados de teste. -* 🎨 **[Layout Dual-Theme e Assinatura em Lote](docs/serpro-layout-and-batch.md):** Design da UI e operações em lote. +* 🎨 **[Layout e Assinatura em Lote](docs/ui-layout.md):** Design da UI padronizada e operações em lote. --- diff --git a/assets/README.md b/assets/README.md index ee325f1..f18fdf6 100644 --- a/assets/README.md +++ b/assets/README.md @@ -25,8 +25,6 @@ assets/ │ ├── tutorial.svg # Ícone Tutorial e Ajuda (monitor com vídeo/play) │ ├── cert.svg # Ícone Certificados Digitais (pasta com cadeado seguro) │ ├── about.svg # Ícone Sobre o Sistema (círculo azul com 'i') -│ ├── sun.svg # Ícone Tema Claro (sol dourado com raios vetoriais) -│ ├── moon.svg # Ícone Tema Escuro (lua crescente azul/índigo) │ ├── shield.svg # Ícone Brasão de Segurança (CyberShield com chave interna) │ ├── seal.svg # Ícone Designer e Gerenciador de Selos Notariais │ ├── check.svg # Ícone Checkmark de sucesso e validação diff --git a/docs/README.md b/docs/README.md index 15af84b..a853bc3 100644 --- a/docs/README.md +++ b/docs/README.md @@ -27,7 +27,7 @@ Se você atua no desenvolvimento, manutenção ou auditoria do código-fonte do * **[Certificados A1, A3 e PKCS#11](a1-a3-certificates.md):** Funcionamento dos provedores `Pkcs12CertificateProvider`, `WindowsCertificateStoreProvider` (SunMSCAPI/CNG) e `Pkcs11CertificateProvider` (SunPKCS11), monitoramento dinâmico PC/SC (`SmartCardWatcher`) e extração de OIDs ICP-Brasil. * **[Assinaturas PDF (PAdES) e Selos Visuais SVG](pades.md):** Motor de assinatura PDFBox + Bouncy Castle, salvamento incremental, renderização de alta resolução (300 DPI Java2D) e gerenciamento de selos digitais. * **[Assinaturas XML (XAdES-BES e XMLDSig)](xml-xmldsig.md):** Conformidade com o padrão ETSI TS 101 903 / DOC-ICP-15.03 e suporte a notas fiscais eletrônicas (NF-e, CT-e, MDF-e, eSocial). -* **[Layout Dual-Theme e Assinatura em Lote](serpro-layout-and-batch.md):** Especificação de interface gráfica moderna, alternância dinâmica de tema (Claro/Escuro) e fila de processamento em lote. +* **[Layout de Interface e Assinatura em Lote](ui-layout.md):** Especificação de interface gráfica padronizada, acessibilidade WCAG AA e processamento em lote. * **[Modo de Desenvolvimento](development-mode.md):** Guia de inicialização em modo `--dev`, políticas de não utilização de mocks em produção e geração de certificados A1 de teste locais. --- @@ -66,7 +66,7 @@ Se você precisa implantar, homologar ou validar os aspectos de conformidade e s | [`browser-compatibility.md`](browser-compatibility.md) | Compatibilidade de navegadores, HTTPS para loopback e Private Network Access (PNA) | Integradores Web & Segurança | | [`ccsp-v1.schema.json`](ccsp-v1.schema.json) | JSON Schema formal e versionado do protocolo CCSP/1 | Integradores & QA | | [`sdk-release-process.md`](sdk-release-process.md) | Processo de publicação e release do SDK no registry npm privado | DevOps & Engenharia | -| [`serpro-layout-and-batch.md`](serpro-layout-and-batch.md) | Design de interface e processamento em lote | UI/UX & Desenvolvedores | +| [`ui-layout.md`](ui-layout.md) | Design de interface e processamento em lote | UI/UX & Desenvolvedores | --- diff --git a/docs/serpro-layout-and-batch.md b/docs/ui-layout.md similarity index 50% rename from docs/serpro-layout-and-batch.md rename to docs/ui-layout.md index b30203c..704f03b 100644 --- a/docs/serpro-layout-and-batch.md +++ b/docs/ui-layout.md @@ -1,32 +1,32 @@ -# Layout CyberCore Signer — Design Dual-Theme & Assinatura em Lote +# Layout e Interface Gráfica — CyberCore Signer -O **CyberCore Signer** adota uma interface gráfica que une a ergonomia de hub consolidada no mercado nacional com uma identidade visual moderna, autoral e com suporte dinâmico a **Tema Claro (Light)** e **Tema Escuro (Dark)**. +O **CyberCore Signer** adota uma interface gráfica profissional e moderna, com foco em usabilidade, segurança visual e conformidade rigorosa com os padrões de acessibilidade WCAG 2.1 (AA). --- ## 1. Identidade Visual e Filosofia de Design -Em conformidade com os requisitos do projeto, a interface **não é uma cópia datada**, mas sim uma evolução: -1. **Identidade CyberCore:** Logotipo central em cristal tridimensional e escudo criptográfico vetorial (`SvgIcons`), subtítulo "Agente Criptográfico Local • ICP-Brasil" e indicador de segurança em tempo real. -2. **Badge de Status Ativo:** Exibe o status da porta local (`● Agente Ativo • 127.0.0.1:21325`) com verde esmeralda no modo claro e verde neon no modo escuro. -3. **Alternador Dinâmico de Temas:** Botão pílula localizado no cabeçalho superior que permite ao usuário alternar instantaneamente entre **Modo Claro** e **Modo Escuro**: - - Ícone do Sol ☀️ para comutar para o tema Claro. - - Ícone da Lua 🌙 para comutar para o tema Escuro. - - Classe gerenciadora centralizada: [`ThemeManager.java`](file:///var/www/cybercore/cybercore-signer/modules/cybercore-ui/src/main/java/br/com/cybercore/signer/ui/theme/ThemeManager.java), que replica a escolha de tema para todos os diálogos secundários. +A interface foi estruturada com foco na clareza operacional e consistência ergonômica: +1. **Identidade CyberCore:** Logotipo central em cristal e escudo criptográfico vetorial (`SvgIcons`), subtítulo "Agente Criptográfico Local • ICP-Brasil" e indicador de segurança em tempo real. +2. **Badge de Status Ativo:** Exibe o status do agente e da porta local (`● Agente Ativo • 127.0.0.1:21325`) com indicação em verde esmeralda. +3. **Tema Único Padronizado:** Sistema visual unificado baseado em tokens CSS declarados em `.root`, garantindo contraste nítido, tipografia escalável e ausência de inconsistências de renderização. --- -## 2. Paleta de Cores dos Temas +## 2. Paleta de Cores e Tokens Semânticos -| Componente | Tema Claro (Light) | Tema Escuro (Dark) | +| Componente / Token | Valor Canônico | Descrição | |---|---|---| -| **Fundo da Janela** | `#f1f5f9` (Slate suave) | `#0b0f17` (Dark profundo) | -| **Header Superior** | `#ffffff`, borda `#e2e8f0` | `#121824`, borda `#1e293b` | -| **Cartões de Ação** | `#ffffff`, borda `#e2e8f0`, hover `#0284c7` | `#131c2e`, borda `#1e293b`, hover `#38bdf8` | -| **Texto dos Botões** | `#1e293b` (Cinza escuro de alto contraste) | `#f8fafc` (Branco gelo nítido) | -| **Painel Lateral** | `#ffffff`, borda `#e2e8f0` | `#121824`, borda `#1e293b` | -| **Badge de Status** | Fundo `#ecfdf5`, texto `#047857`, borda `#10b981` | Fundo `rgba(16, 185, 129, 0.15)`, texto `#34d399` | -| **Alternador de Tema** | Fundo `#ffffff`, borda `#cbd5e1`, hover `#0284c7` | Fundo `#1e293b`, borda `#334155`, hover `#38bdf8` | +| **Fundo da Janela** (`-fx-color-background`) | `#f1f5f9` | Tom slate neutro e suave para leitura prolongada | +| **Superfície de Cartões** (`-fx-color-surface`) | `#ffffff` | Branco puro para cartões, caixas e painéis | +| **Bordas Principais** (`-fx-color-border`) | `#cbd5e1` | Linhas de divisão estrutural com contraste seguro | +| **Bordas Suaves** (`-fx-color-border-subtle`) | `#e2e8f0` | Divisórias e contornos secundários | +| **Texto Primário** (`-fx-color-text`) | `#0f172a` | Texto de alto contraste (WCAG ratio ~ 15.8:1) | +| **Texto Atenuado** (`-fx-color-text-muted`) | `#475569` | Rótulos secundários e metadados (WCAG ratio ~ 6.8:1) | +| **Cor Primária** (`-fx-color-primary`) | `#0284c7` | Azul característico da marca CyberCore para ações padrão | +| **Sucesso** (`-fx-color-success`) | `#16a34a` | Indicadores de assinaturas válidas e status operacional | +| **Aviso** (`-fx-color-warning`) | `#d97706` | Alertas de atenção e certificados próximos ao vencimento | +| **Erro** (`-fx-color-error`) | `#dc2626` | Notificações de erro ou falha criptográfica | --- @@ -36,7 +36,7 @@ A interface principal organiza as operações em 6 cartões modernos com cantos | Posição | Operação | Descrição | |---|---|---| -| (0, 0) | **Assinar PDF** | Assinatura digital de documentos PDF com cálculo de hash SHA-256 e gravação de assinatura. | +| (0, 0) | **Assinar PDF** | Assinatura digital de documentos PDF (PAdES) com visualização e posicionamento interativo de selos. | | (1, 0) | **Assinar XML** | Assinatura de documentos XML (estruturas fiscais, NF-e, XMLDSig). | | (2, 0) | **Assinatura Atachada** | Assinatura embutida/anexada ao documento original (CAdES enveloped). | | (0, 1) | **Gerenciar Selos** | Abertura do Designer e Gerenciador de Selos Digitais visuais para PAdES. | @@ -52,7 +52,7 @@ Na coluna lateral direita, o usuário dispõe de atalhos rápidos para operaçõ 1. **` Logs`:** Visualizador de auditoria em tempo real, monitorando requisições locais CCSP/1 e eventos criptográficos. 2. **`⚙ Configurações`:** Gerenciador de origens web autorizadas, revogação de acessos e opções de PIN. 3. **`💻 Tutorial`:** Guia passo a passo interativo de uso do assinador e integração web. -4. **`🗂 Certificados`:** Lista de certificados ICP-Brasil instalados (Windows-MY, A1 e A3) e ferramenta para importação de certificados A1 (`.pfx` / `.p12`). +4. **`🗂 Certificados`:** Lista de certificados ICP-Brasil disponíveis (Windows Certificate Store, A1 e A3) e ferramenta para importação de certificados A1 (`.pfx` / `.p12`). 5. **`ℹ Sobre`:** Informações de versão, engine JCA/JCE e garantias de privacidade local. --- @@ -65,7 +65,6 @@ A funcionalidade de assinatura em lote permite: - Seleção do certificado digital ICP-Brasil desejado (com exibição de titular, CPF/CNPJ, tipo A1/A3 e validade). - Escolha da pasta de destino para os arquivos assinados (salvando arquivos `.p7s` correspondentes). - Execução assíncrona em thread isolada para manter a interface responsiva durante todo o lote. -- Compatibilidade automática com o tema ativo (Claro ou Escuro). --- diff --git a/modules/cybercore-ui/src/main/resources/assets/README.md b/modules/cybercore-ui/src/main/resources/assets/README.md index 91f8eef..43418c8 100644 --- a/modules/cybercore-ui/src/main/resources/assets/README.md +++ b/modules/cybercore-ui/src/main/resources/assets/README.md @@ -25,8 +25,6 @@ assets/ │ ├── tutorial.svg # Ícone Tutorial e Ajuda (monitor com vídeo/play) │ ├── cert.svg # Ícone Certificados Digitais (pasta com cadeado seguro) │ ├── about.svg # Ícone Sobre o Sistema (círculo azul com 'i') -│ ├── sun.svg # Ícone Tema Claro (sol dourado com raios vetoriais) -│ ├── moon.svg # Ícone Tema Escuro (lua crescente azul/índigo) │ ├── shield.svg # Ícone Brasão de Segurança (CyberShield com chave interna) │ ├── seal.svg # Ícone Designer e Gerenciador de Selos Notariais │ ├── check.svg # Ícone Checkmark de sucesso e validação