/* * AS MARCAS — os 17 tokens que giram com a instalação, mais os 4 neutros escuros. * * ARQUIVO GERADO por docs/design-tokens/gerar-paleta.mjs — NÃO EDITE À MÃO. * A fonte da verdade é a receita naquele arquivo (ADR-013). Uma edição aqui é perdida na próxima * execução, e — pior — não alcança o aplicativo Android, que é a divergência entre plataformas que * aquele ADR existe para impedir. * * node docs/design-tokens/gerar-paleta.mjs --alvo=web */ /* * Uma instalação é um MATIZ (ADR-003). O servidor escreve `data-marca` no `` a partir de * `config/autoload/local.php`, e é só isso que troca a identidade do produto inteiro. * * Esta folha é carregada IMEDIATAMENTE depois de `paleta.css`. Nenhum token aparece nas duas para * o mesmo mapa: no claro os quatro neutros são invariantes e ficam lá; no escuro eles são tingidos * ao matiz e ficam aqui (ADR-009), e o bloco escuro de `paleta.css` simplesmente não os declara. * * Acrescentar uma quarta instalação custa UMA LINHA em `MARCAS`, na receita, mais uma execução. */ /* AGERP — matiz 268°, tema claro. É a marca PADRÃO: responde também pelo `` que ainda não traz `data-marca`, de modo que os 17 papéis nunca ficam sem valor. */ html[data-marca="agerp"], html:not([data-marca]) { --acao: #3753B5; /* branco por cima: 6,8:1 (mín. 4,5) */ --acao-tinta: #213793; /* 9,9:1 no fundo · 10,3:1 na superfície */ --acao-tinta-media: #29419F; /* 8,6:1 no fundo · 8,9:1 na superfície */ --acao-tinta-clara: #3753B5; /* 6,6:1 no fundo · 6,8:1 na superfície */ --foco-anel: #15247E; /* 12,7:1 no fundo · 13,2:1 na superfície (mín. 3) */ --acao-tingido-fundo: #E6EBF6; /* superfície tingida — isento */ --acao-tingido-borda: #C0CCEA; /* 1,6:1 na superfície — contorno isento */ --acao-tingido-tinta: #15247E; /* 11,1:1 sobre --acao-tingido-fundo */ --marca-barra: #3753B5; /* branco por cima: 6,8:1 (mín. 4,5) — a barra superior — token próprio no escuro (ADR-008) */ --busca-contador-fundo: #15247E; /* --texto-sobre-acao por cima: 13,2:1 */ --panorama-mapa-fundo: #E6EBF6; /* a tela do mapa enquanto ele carrega — isento */ --aud-acao-fundo: #F0F4FB; /* indigo institucional a 6% — isento */ --aud-acao-tinta: #213793; /* 9,9:1 no fundo · 10,3:1 na superfície */ --aud-acao-borda: #C0CCE9; /* 1,6:1 na superfície — contorno isento */ --aud-foco: #3753B5; /* 6,6:1 no fundo — anel, mín. 3 */ --upload-fundo: #F8FAFF; /* superfície tingida — isento */ --upload-borda: #DDE1EB; /* isento */ } /* AGERP — matiz 268°, tema escuro. É a marca PADRÃO: responde também pelo `` que ainda não traz `data-marca`, de modo que os 17 papéis nunca ficam sem valor. */ html[data-marca="agerp"][data-tema-efetivo="escuro"], html:not([data-marca])[data-tema-efetivo="escuro"] { --acao: #3753B5; /* branco por cima: 6,8:1 — o mesmo do claro */ --acao-tinta: #98AADA; /* 8,1:1 no fundo · 6,0:1 na elevada */ --acao-tinta-media: #98AADA; /* 8,1:1 no fundo · 6,0:1 na elevada */ --acao-tinta-clara: #98AADA; /* 8,1:1 no fundo · 6,0:1 na elevada */ --foco-anel: #C0CCEA; /* 11,7:1 no fundo · 8,7:1 na elevada (mín. 3) */ --acao-tingido-fundo: #29419F; /* superfície tingida — isento */ --acao-tingido-borda: #526EC0; /* 3,5:1 na superfície (mín. 3) */ --acao-tingido-tinta: #FFFFFF; /* 8,9:1 sobre --acao-tingido-fundo */ --marca-barra: #13217A; /* branco por cima: 13,8:1 (mín. 4,5) — a barra superior — token próprio no escuro (ADR-008) */ --busca-contador-fundo: #526EC0; /* --texto-sobre-acao por cima: 4,8:1 */ --panorama-mapa-fundo: #1A1F2C; /* superfície tingida — isento */ --aud-acao-fundo: #172347; /* superfície tingida — isento */ --aud-acao-tinta: #98AADA; /* 8,1:1 no fundo · 6,0:1 na elevada */ --aud-acao-borda: #526EC0; /* 3,5:1 na superfície (mín. 3) */ --aud-foco: #C0CCE9; /* 11,7:1 no fundo — anel, mín. 3 */ --upload-fundo: #1A1F2C; /* superfície tingida — isento */ --upload-borda: #414757; /* isento */ --fundo: #101217; /* superfície da página — isento */ --superficie: #1C1E23; /* cartão, sidenav, tabela — isento */ --superficie-elevada: #2A2C31; /* diálogo, menu, select, calendário — isento */ --superficie-sobreposta: #36383D; /* zebra, hover, tooltip — isento */ } /* Maranhão Indígena — matiz 150°, tema claro. */ html[data-marca="indigena"] { --acao: #027031; /* branco por cima: 6,2:1 (mín. 4,5) */ --acao-tinta: #005221; /* 9,0:1 no fundo · 9,4:1 na superfície */ --acao-tinta-media: #005D26; /* 7,8:1 no fundo · 8,1:1 na superfície */ --acao-tinta-clara: #027031; /* 6,0:1 no fundo · 6,2:1 na superfície */ --foco-anel: #003F17; /* 11,7:1 no fundo · 12,2:1 na superfície (mín. 3) */ --acao-tingido-fundo: #E4EEE5; /* superfície tingida — isento */ --acao-tingido-borda: #B9D5BD; /* 1,6:1 na superfície — contorno isento */ --acao-tingido-tinta: #003F17; /* 10,3:1 sobre --acao-tingido-fundo */ --marca-barra: #027031; /* branco por cima: 6,2:1 (mín. 4,5) — a barra superior — token próprio no escuro (ADR-008) */ --busca-contador-fundo: #003F17; /* --texto-sobre-acao por cima: 12,2:1 */ --panorama-mapa-fundo: #E4EEE5; /* a tela do mapa enquanto ele carrega — isento */ --aud-acao-fundo: #EFF6F0; /* indigo institucional a 6% — isento */ --aud-acao-tinta: #005221; /* 9,0:1 no fundo · 9,4:1 na superfície */ --aud-acao-borda: #B9D5BE; /* 1,6:1 na superfície — contorno isento */ --aud-foco: #027031; /* 6,0:1 no fundo — anel, mín. 3 */ --upload-fundo: #F7FBF8; /* superfície tingida — isento */ --upload-borda: #DBE4DC; /* isento */ } /* Maranhão Indígena — matiz 150°, tema escuro. */ html[data-marca="indigena"][data-tema-efetivo="escuro"] { --acao: #027031; /* branco por cima: 6,2:1 — o mesmo do claro */ --acao-tinta: #8BB993; /* 8,4:1 no fundo · 6,2:1 na elevada */ --acao-tinta-media: #8BB993; /* 8,4:1 no fundo · 6,2:1 na elevada */ --acao-tinta-clara: #8BB993; /* 8,4:1 no fundo · 6,2:1 na elevada */ --foco-anel: #B9D5BD; /* 11,9:1 no fundo · 8,8:1 na elevada (mín. 3) */ --acao-tingido-fundo: #005D26; /* superfície tingida — isento */ --acao-tingido-borda: #2A8847; /* 3,7:1 na superfície (mín. 3) */ --acao-tingido-tinta: #FFFFFF; /* 8,1:1 sobre --acao-tingido-fundo */ --marca-barra: #003C16; /* branco por cima: 12,7:1 (mín. 4,5) — a barra superior — token próprio no escuro (ADR-008) */ --busca-contador-fundo: #298847; /* --texto-sobre-acao por cima: 4,5:1 */ --panorama-mapa-fundo: #162318; /* superfície tingida — isento */ --aud-acao-fundo: #042F12; /* superfície tingida — isento */ --aud-acao-tinta: #8BB993; /* 8,4:1 no fundo · 6,2:1 na elevada */ --aud-acao-borda: #298847; /* 3,7:1 na superfície (mín. 3) */ --aud-foco: #B9D5BE; /* 11,9:1 no fundo — anel, mín. 3 */ --upload-fundo: #162318; /* superfície tingida — isento */ --upload-borda: #3D4C40; /* isento */ --fundo: #0F1310; /* superfície da página — isento */ --superficie: #1B1F1C; /* cartão, sidenav, tabela — isento */ --superficie-elevada: #292E29; /* diálogo, menu, select, calendário — isento */ --superficie-sobreposta: #353A35; /* zebra, hover, tooltip — isento */ } /* Treinamento — matiz 45°, tema claro. */ html[data-marca="treinamento"] { --acao: #993D00; /* branco por cima: 7,0:1 (mín. 4,5) */ --acao-tinta: #712900; /* 10,0:1 no fundo · 10,4:1 na superfície */ --acao-tinta-media: #7E3000; /* 8,7:1 no fundo · 9,1:1 na superfície */ --acao-tinta-clara: #993D00; /* 6,7:1 no fundo · 7,0:1 na superfície */ --foco-anel: #581E00; /* 12,6:1 no fundo · 13,1:1 na superfície (mín. 3) */ --acao-tingido-fundo: #F5E8E2; /* superfície tingida — isento */ --acao-tingido-borda: #E6C4B5; /* 1,6:1 na superfície — contorno isento */ --acao-tingido-tinta: #581E00; /* 10,9:1 sobre --acao-tingido-fundo */ --marca-barra: #993D00; /* branco por cima: 7,0:1 (mín. 4,5) — a barra superior — token próprio no escuro (ADR-008) */ --busca-contador-fundo: #581E00; /* --texto-sobre-acao por cima: 13,1:1 */ --panorama-mapa-fundo: #F5E8E2; /* a tela do mapa enquanto ele carrega — isento */ --aud-acao-fundo: #FBF2EE; /* indigo institucional a 6% — isento */ --aud-acao-tinta: #712900; /* 10,0:1 no fundo · 10,4:1 na superfície */ --aud-acao-borda: #E5C4B5; /* 1,6:1 na superfície — contorno isento */ --aud-foco: #993D00; /* 6,7:1 no fundo — anel, mín. 3 */ --upload-fundo: #FEF9F6; /* superfície tingida — isento */ --upload-borda: #E9DED9; /* isento */ } /* Treinamento — matiz 45°, tema escuro. */ html[data-marca="treinamento"][data-tema-efetivo="escuro"] { --acao: #993D00; /* branco por cima: 7,0:1 — o mesmo do claro */ --acao-tinta: #D39D85; /* 8,0:1 no fundo · 5,9:1 na elevada */ --acao-tinta-media: #D39D85; /* 8,0:1 no fundo · 5,9:1 na elevada */ --acao-tinta-clara: #D39D85; /* 8,0:1 no fundo · 5,9:1 na elevada */ --foco-anel: #E6C4B5; /* 11,5:1 no fundo · 8,6:1 na elevada (mín. 3) */ --acao-tingido-fundo: #7E3000; /* superfície tingida — isento */ --acao-tingido-borda: #B15628; /* 3,4:1 na superfície (mín. 3) */ --acao-tingido-tinta: #FFFFFF; /* 9,1:1 sobre --acao-tingido-fundo */ --marca-barra: #541C00; /* branco por cima: 13,6:1 (mín. 4,5) — a barra superior — token próprio no escuro (ADR-008) */ --busca-contador-fundo: #B05628; /* --texto-sobre-acao por cima: 5,0:1 */ --panorama-mapa-fundo: #2A1B15; /* superfície tingida — isento */ --aud-acao-fundo: #401804; /* superfície tingida — isento */ --aud-acao-tinta: #D39D85; /* 8,0:1 no fundo · 5,9:1 na elevada */ --aud-acao-borda: #B05628; /* 3,3:1 na superfície (mín. 3) */ --aud-foco: #E5C4B5; /* 11,5:1 no fundo — anel, mín. 3 */ --upload-fundo: #2A1B15; /* superfície tingida — isento */ --upload-borda: #55433B; /* isento */ --fundo: #16110E; /* superfície da página — isento */ --superficie: #221D1A; /* cartão, sidenav, tabela — isento */ --superficie-elevada: #312B28; /* diálogo, menu, select, calendário — isento */ --superficie-sobreposta: #3D3734; /* zebra, hover, tooltip — isento */ }