/* @ Tokens institucionais UERJ @ Fonte normativa: AEDA 020/REITORIA/2021, Anexo — Manual de Uso e Aplicação @ da Marca Uerj, 2ª ed., Comuns Editorial, 2023. @ Documentação: docs/marca-uerj/guia-marca.md @ @ Este arquivo NÃO aplica estilos. Só declara variáveis. @ Deve ser carregado antes de qualquer CSS que use os tokens. ***********************************************************************/ :root { /* === Paleta institucional ============================================ * Valores exatos do Manual de Marca. Fechada: "uso de cores não * descritas no manual" está na lista de usos não permitidos. * Não acrescentar cores novas — derivar por luminância (ver abaixo). */ --uerj-azul: #0072CE; /* Pantone 285 C · C90 M47 Y0 K0 · R0 G114 B206 */ --uerj-ouro: #AD841F; /* Pantone 1255 C · C3 M30 Y95 K29 · R173 G132 B31 */ --uerj-vermelho: #F9423A; /* Pantone Warm Red C · C0 M83 Y81 K0 · R249 G66 B58 */ --uerj-preto: #000000; /* C0 M0 Y0 K100 */ /* Equivalentes monocromáticos prescritos pelo Manual, para as versões * em tons de cinza e preto & branco da marca. */ --uerj-azul-mono: #000000; /* k100 */ --uerj-ouro-mono: #666666; /* k60 */ --uerj-vermelho-mono: #333333; /* k80 */ /* === Variantes acessíveis para texto ================================= * Contraste sobre fundo branco (WCAG 2.1): * * #0072CE azul 4.89:1 PASSA AA para texto normal * #AD841F ouro 3.44:1 FALHA — só componente de UI / texto grande * #F9423A vermelho 3.58:1 FALHA — só componente de UI / texto grande * * As variantes abaixo mantêm matiz (H) e saturação (S) idênticos aos da * paleta oficial, reduzindo apenas a luminância até superar 4.5:1 com * margem. São, portanto, variação de luminância da cor institucional — * não cores novas. */ --uerj-vermelho-texto: #D80F07; /* 5.26:1 · H 2.5° S 94.1% — de --uerj-vermelho */ --uerj-ouro-texto: #836417; /* 5.53:1 · H 42.7° S 69.6% — de --uerj-ouro */ --uerj-azul-texto: #0072CE; /* 4.89:1 — já conforme, sem alteração */ /* === Tokens funcionais =============================================== * Semântica de interface. Sempre apontam para um valor acessível. */ --uerj-erro-texto: var(--uerj-vermelho-texto); /* 5.26:1 — mensagens de erro */ --uerj-erro-borda: var(--uerj-vermelho); /* 3.58:1 — passa 3:1 para UI */ --uerj-obrigatorio: var(--uerj-vermelho-texto); /* asterisco de campo requerido */ --uerj-sucesso-texto: #006600; /* 7.24:1 — valor legado, já conforme */ /* === Tipografia ====================================================== * Clarendon BT Black e Univers 67 Condensed Bold são licenciadas e vivem * apenas DENTRO da marca (que é imagem) — não devem ser incorporadas. * Fira Sans é a família complementar institucional e é open source * (SIL OFL), portanto a única incorporável na interface. * * ATENÇÃO: os arquivos .woff2 de Fira Sans ainda NÃO foram adicionados * ao repositório. Enquanto isso, o fallback Verdana mantém exatamente o * comportamento atual — nenhuma tela muda. Ao adicionar as fontes, * declarar @font-face servindo localmente (não via CDN externa). */ --uerj-fonte: "Fira Sans", Verdana, Geneva, sans-serif; --uerj-fonte-condensed: "Fira Sans Condensed", "Fira Sans", Verdana, Geneva, sans-serif; } /* === TEMA ESCURO — PREPARADO, NÃO ATIVO ================================ * * NÃO DESCOMENTE ISOLADAMENTE. Ler os três bloqueios abaixo primeiro. * * Contexto: a paleta institucional INVERTE entre fundo claro e escuro. * Contraste medido (WCAG 2.1, texto normal exige 4.5:1): * * branco #121212 preto * #0072CE azul 4.89 ok 3.83 x 4.30 x * #AD841F ouro 3.44 x 5.44 ok 6.10 ok * #F9423A vermelho 3.58 x 5.24 ok 5.87 ok * #D80F07 vermelho-texto 5.26 ok 3.56 x 3.99 x * #836417 ouro-texto 5.53 ok 3.39 x 3.80 x * * Ou seja: as duas cores proibidas para texto no tema claro são justamente * as que funcionam no escuro — e as variantes escurecidas que criamos para * o tema claro reprovam no escuro. Os tokens acima são, hoje, exclusivos * de tema claro. * * No escuro a marca institucional volta a servir direto, sem derivação: * --uerj-ouro e --uerj-vermelho passam AA em seus valores oficiais. * A exceção é o azul, de luminância média, que reprova em qualquer fundo * escuro e exige a variante clareada #0089F7 (mesmos H 205° e S 100%). * * BLOQUEIOS ANTES DE ATIVAR: * * 1. NORMATIVO. O Manual de Marca determina que "a versão colorida da * marca deve ser aplicada somente em fundo branco". Em tema escuro a * marca colorida fica PROIBIDA — é obrigatório usar a versão negativa, * que a Comuns já fornece, ou inscrever a marca em retângulo branco ou * preto respeitando as margens mínimas. * * 2. CASO OMISSO. Nenhum dos manuais da Comuns contempla tema escuro — * foram escritos para impresso e web clara. Pela AEDA 020/2021, Art. 3º * alínea c, isso exige consulta prévia à Comuns (comuns@uerj.br). * Ver item #9 do backlog em docs/marca-uerj/guia-ux.md. * * 3. TÉCNICO. O sistema não tem superfícies escuras. Ativar só este bloco * troca a cor do TEXTO mantendo o fundo branco — o resultado é pior que * o atual, não melhor. Só faz sentido junto de um tema escuro real * (fundos, bordas, campos de formulário e os PNG/GIF de ícone, que hoje * são opacos e claros). * * Superfície de referência usada nos cálculos: #121212 (branco sobre ela * rende 18.73:1). Preto puro #000000 foi descartado por causar halation. * * @media (prefers-color-scheme: dark) { * :root { * -- Superfícies (não institucionais: são neutros de interface) -- * --uerj-superficie: #121212; * --uerj-superficie-alta: #1E1E1E; * --uerj-texto-primario: #FFFFFF; * * -- Institucionais: valores OFICIAIS voltam a servir -- * --uerj-ouro-texto: #AD841F; -- 5.44:1 -- * --uerj-azul-texto: #0089F7; -- 5.28:1 · clareado do 285 C -- * --uerj-vermelho-texto: #F9423A; -- 5.24:1 · Warm Red C puro -- * * -- Funcionais -- * --uerj-erro-texto: var(--uerj-vermelho-texto); * --uerj-erro-borda: var(--uerj-vermelho); * --uerj-obrigatorio: var(--uerj-vermelho-texto); * --uerj-sucesso-texto: #00A500; -- 5.69:1 · clareado de #006600 -- * } * } */