/* ============================================================================ tokens-iacb.css — FONTE ÚNICA das cores semânticas das telas custom (boards Razor) P7.3 (SESS-155). Irmão do js/tema-iacb.js, que é a fonte única do tema claro/escuro. POR QUE ESTE ARQUIVO EXISTE --------------------------- O "verde de sucesso" estava escrito em TRÊS valores diferentes espalhados pelos boards: #16A34A (Central, Painel de Uso, Provedores, Changelog, Painel de Acessos, Meu Painel), #1B5E20 (Aprovação, Documentos do Cidadão, Dashboard de Orçamentos, Kanban) e #198754 (importações e limpeza de cadastros). Mesma ideia, três tons — e nenhum lugar para consertar de uma vez. 🔴 ACHADO QUE MUDOU O DESENHO (SESS-155 — contraste calculado, não estimado) --------------------------------------------------------------------------- O plano mestre (§6.4) propunha padronizar TUDO no #16A34A. Isso teria REBAIXADO a acessibilidade: #16A34A sobre branco dá 3,30:1, abaixo do mínimo de 4,5:1 que a WCAG 2.1 AA exige para texto normal. As telas que hoje usam #1B5E20 (7,87:1) e #198754 (4,53:1) PASSAM — converter todas para #16A34A faria elas reprovarem. E o problema já existia onde o #16A34A é texto (status da chave em Provedores de LLM) ou fundo de texto branco (botão do Painel de Acessos, badge do Changelog). OS QUATRO PAPÉIS (a lição que este arquivo existe para não se perder) --------------------------------------------------------------------- "Cor de texto no tema escuro" e "fundo de badge com texto branco" são necessidades OPOSTAS: a primeira precisa ser clara, a segunda precisa continuar escura. Por isso cada família tem quatro papéis, e não uma cor: --ia- preenchimento decorativo (trilho, barra, gráfico, borda). Nada de texto por cima. --ia--texto cor de TEXTO/ÍCONE sobre o fundo do tema — escurece no tema claro, clareia no escuro. --ia--solido FUNDO de badge/botão com texto BRANCO — fica escuro nos DOIS temas, senão o texto branco some. --ia--fundo tinta suave de faixa/chip, par de `-texto`. --ia--borda borda do chip. Ratios verificados (WCAG 2.1; AA = 4,5:1 texto normal, 3,0:1 texto grande): #16A34A sobre branco ........ 3,30:1 ✗ texto ✓ decorativo #166534 sobre branco ........ 7,13:1 ✓ branco sobre #166534 .... 7,13:1 ✓ #166534 sobre #DCFCE7 ....... 6,49:1 ✓ (o par do chip de sucesso) #4ADE80 sobre #111B21 ...... 10,02:1 ✓ (texto no tema escuro) Os demais pares foram conferidos com a mesma conta e todos passam AA. POR QUE O VERDE DE TEXTO É #166534 E NÃO #15803D ------------------------------------------------- Os dois passam AA (7,13:1 e 5,02:1). Escolhido o #166534 por dois motivos práticos: (a) fica a 1,17x de luminância do #1B5E20 que Aprovação, Documentos do Cidadão, Dashboard de Orçamentos e Kanban já usam — a unificação dessas telas fica quase imperceptível, em vez de clarear um verde que hoje é escuro; e (b) é EXATAMENTE o verde dos chips da Central, tela que o dono já validou em uso. Padronizar no tom que a tela mais vista já usa é menos arriscado do que impor um tom novo a todas. COMO USAR --------- Sempre com fallback igual ao valor do tema claro: color: var(--ia-sucesso-texto, #166534); O fallback não é enfeite: se esta folha não carregar (cache velho, board copiado para outro host), sem ele o `var()` resolve para nada e o texto fica invisível. O teste `TokensDeCorDosBoardsTests` reprova fallback que divirja do token. ESCOPO ------ Adotada hoje: a família SUCESSO. As demais ficam definidas aqui como referência pronta (mesma receita, contraste já conferido) para o próximo board nascer certo. Migrar alerta/perigo/info é trabalho de outra sessão: cada troca é mudança visível em tela que o dono ainda não validou, e mudança visível se valida vendo. ============================================================================ */ /* Tema claro — vale para o documento inteiro, inclusive para os boards que ainda não têm alternador de tema (sem isto o `var()` não resolveria neles). */ :root { /* ── Sucesso: aprovado, concluído, online, ativo ───────────────────────── */ --ia-sucesso: #16A34A; --ia-sucesso-texto: #166534; --ia-sucesso-solido: #166534; --ia-sucesso-fundo: #DCFCE7; --ia-sucesso-borda: #86EFAC; /* ── Alerta: pendente, atenção, aguardando ─────────────────────────────── */ --ia-alerta: #D97706; --ia-alerta-texto: #B45309; --ia-alerta-solido: #B45309; --ia-alerta-fundo: #FFFBEB; --ia-alerta-borda: #FDE68A; /* ── Perigo: cancelado, erro, crítico ──────────────────────────────────── */ --ia-perigo: #DC2626; --ia-perigo-texto: #B91C1C; --ia-perigo-solido: #DC2626; --ia-perigo-fundo: #FEF2F2; --ia-perigo-borda: #FECACA; /* ── Informação: neutro informativo ────────────────────────────────────── */ --ia-info: #0284C7; --ia-info-texto: #0369A1; --ia-info-solido: #0369A1; --ia-info-fundo: #F0F9FF; --ia-info-borda: #BAE6FD; /* ── Marca: ação primária, link, foco ──────────────────────────────────── */ --ia-marca: #4F46E5; --ia-marca-texto: #4338CA; --ia-marca-solido: #4F46E5; } /* Tema escuro — os boards marcam o wrapper com data-tema="escuro" (js/tema-iacb.js). A declaração no wrapper vence a do :root em toda a sua subárvore, então cada board troca de paleta sozinho, sem precisar conhecer estes valores. */ [data-tema="escuro"] { --ia-sucesso: #4ADE80; --ia-sucesso-texto: #4ADE80; /* `-solido` NÃO é redeclarado de propósito: o #166534 do tema claro já dá 7,13:1 com texto branco, e badge de sucesso com fundo claro no tema escuro sumiria. */ --ia-sucesso-fundo: #14321F; --ia-sucesso-borda: #166534; --ia-alerta: #FBBF24; --ia-alerta-texto: #FBBF24; --ia-alerta-solido: #92400E; --ia-alerta-fundo: #3A2F13; --ia-alerta-borda: #78530F; --ia-perigo: #F87171; --ia-perigo-texto: #FCA5A5; --ia-perigo-solido: #991B1B; --ia-perigo-fundo: #3A1414; --ia-perigo-borda: #7F1D1D; --ia-info: #38BDF8; --ia-info-texto: #7DD3FC; --ia-info-solido: #075985; --ia-info-fundo: #0C2A3A; --ia-info-borda: #075985; --ia-marca: #818CF8; --ia-marca-texto: #A5B4FC; --ia-marca-solido: #4338CA; }