/* ============================================================ Camino School, Design tokens v2 ("Carbono") Restyle p/ o novo design system (handoff Claude Design). MODELO DE COR (ler antes de mexer): - DEFAULT monocromático "carbono": accent = quase-preto no claro, quase-branco no escuro (neutro, profissional). - A escola troca SÓ a cor principal (--brand, via Config). Quando troca, o --accent passa a ser essa cor, muda os BOTÕES primários, foco e seleção. O resto da interface segue neutro carbono. - --brand NÃO setado => accent = carbono (default do tema). --brand setado (cor da escola) => accent = a cor (nos 2 temas). (web/js/theme.js só seta --brand quando a escola escolheu uma cor != carbono.) - Dois temas: claro (default) e escuro ([data-theme="dark"]). - Tokens de cor vêm do DS: --text-1/2/3, --surface/-2/-3, --border/-strong, --st-*-soft/-fg (status), --bubble, etc. Os nomes ANTIGOS (--primary, --ink, --line, --rose…) continuam como ALIASES no fim deste arquivo, então o código atual pega o visual novo sem reescrever tudo de uma vez. ============================================================ */ /* #224 (26/10, pedido do dono): a fonte da casa e a Inter, a mesma da Fundacao 2.0; a Geist Mono fica so para numero e codigo */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap'); /* ---- TEMA CLARO (default) ---- */ :root, [data-theme="light"] { /* neutros carbono */ --board:#e6eaef; --bg:#eef1f5; --surface:#ffffff; --surface-2:#eef1f5; --surface-3:#e3e9ef; --nav:#ffffff; --border:#e2e8ee; --border-strong:#cbd4dd; --grid:#eef1f5; /* #470 - borda da caixa de marcar vazia no claro: 3,24:1 no pior fundo (o --line-2 media 1,23:1 e a caixa sumia em Perfis e Equipe) */ --control-border:#76818d; /* --text-3 ERA #8b97a3 e era ILEGÍVEL no CLARO, o irmão exato do episódio de 13/08 no tema escuro (comentário lá embaixo). Medido em 24/08 na página viva: 2,63:1 sobre --bg, 2,43:1 sobre --surface-3 e 2,98:1 até sobre o branco puro, quando texto pequeno exige 4,5:1. E ele não é detalhe: é a tinta do rodapé, da legenda, do "sem dados" do painel de doc viva e dos textos de apoio da casa inteira. #5b6773 é a MESMA cor, só escurecida: 5,78:1 sobre --surface, 5,10:1 sobre --bg/--surface-2, 4,78:1 sobre --board e 4,73:1 sobre --surface-3 (o fundo mais escuro em que ele cai). Passa nos cinco, e a hierarquia continua de pé, porque --text-2 mede 6,50:1 e --text-1 mede 14,99:1 sobre o mesmo fundo. */ --text-1:#10151b; --text-2:#4c5763; --text-3:#5b6773; --focus:#3a6ea5; /* ACCENT: carbono por default; a escola pinta via --brand-override (Config). theme.js só seta --brand-override quando a cor != carbono. */ --accent: var(--brand-override, #161b21); /* A LETRA DE CIMA DO BOTÃO PRIMÁRIO NÃO PODE SER CRAVADA. Ela era #fff no claro e quase-preto no escuro, o que só está certo quando o accent é o carbono do tema. Assim que a escola pinta a marca, quem manda é a cor DELA: branco sobre um amarelo claro some no tema claro, e o quase-preto some sobre um azul escuro no tema escuro, medido em 3,42:1 no botao "Reivindicar" do mapa de prospecção, com a cor da escola 1 do DEV (#0E7490). Quem decide agora é o theme.js: ele conhece a cor da marca, calcula a luminância dela UMA vez e escreve --brand-fg-override com o lado que ganha. Sem marca (carbono), o valor de reserva abaixo vale e nada muda. */ --accent-fg: var(--brand-fg-override, #ffffff); --accent-hover: color-mix(in srgb, var(--accent) 82%, #000); /* O accent tem DOIS empregos que pedem contraste oposto: fundo de botão (aí a letra é --accent-fg) e a própria LETRA de um rótulo sobre a superfície. No claro os dois coincidem; no escuro, não, por isso o token existe. Quem usar o accent como cor de TEXTO usa este, e a tela funciona nos dois temas. */ --accent-ink: var(--accent); /* status (semânticos, fixos) */ --st-success-fg:#2f6b4f; --st-success-soft:#e7f1eb; --st-success-bar:#3a9c70; /* --st-warning-fg ERA #86692c e passava raspando ou reprovava: 4,39:1 dentro da própria pílula âmbar (--st-warning-soft) e 4,22:1 sobre --surface-3, que é onde o veredito do painel cai. #795e28 é o mesmo âmbar escurecido: 5,18:1 na pílula, 6,10:1 sobre o branco e 4,98:1 no pior fundo claro. Ele nunca é FUNDO (quem faz fundo é --st-warning-soft e --st-warning-bar), então escurecer só ganha contraste, nunca perde. */ --st-warning-fg:#795e28; --st-warning-soft:#f4ecda; --st-warning-bar:#cc9a33; --st-danger-fg:#9b3b3b; --st-danger-soft:#f4e4e4; --st-danger-bar:#cc5151; --st-info-fg:#39598a; --st-info-soft:#e6ecf5; --st-info-bar:#4a82cf; --st-neutral-fg:#4c5763; --st-neutral-soft:#eaeef2; /* #4621, VETO (roxo): a PROIBIÇÃO, que não é gravidade médica. Nasceu no Cardápio: a cozinha tem três avisos com pesos diferentes, e dois deles já tinham cor no sistema (alergia = danger, restrição = warning). O terceiro, "esta criança não pode carne de porco por cunho religioso", não é leve nem grave: é ABSOLUTO, e não cabe na régua de gravidade. Sem token próprio ele cairia em `--purple`, que é ALIAS de `--st-info` (azul) desde a migração dos nomes antigos, ou seja, a proibição sairia com a mesma cor do aviso informativo, e o dono desenhou roxo. Medido: #6f4595 sobre #f0e8f7 dá 5,94:1 no claro e #bfa0dd sobre #20182c dá 7,56:1 no escuro, na mesma faixa dos outros status da casa (4,39 a 6,32 no claro). */ --st-veto-fg:#6f4595; --st-veto-soft:#f0e8f7; --danger-solid:#b23b3b; --danger-solid-fg:#fff; /* #6394: o verde cheio da chave Presente, par do vermelho acima. Letra branca: 5,05:1. */ --success-solid:#2e7d4f; --success-solid-fg:#fff; /* componentes */ --sel-bg:#eef2f7; --sel-border:#aebccb; --code-bg:#f4f6f9; --bubble: color-mix(in srgb, var(--accent) 92%, transparent); --bubble-fg:#ffffff; /* PAPEL DO QR (#3691): o unico fundo do sistema que NAO vira com o tema. O leitor de codigo precisa de contraste escuro-sobre-claro; QR escuro em fundo escuro simplesmente nao le. Por isso este token NAO e redeclarado no bloco [data-theme="dark"], a ausencia ali e a decisao, nao um esquecimento. */ --qr-papel:#ffffff; /* #6054 - visor de imagem: escuro nos dois temas, como o papel do QR; estes dois tokens tambem NAO entram no bloco [data-theme="dark"] */ --visor-fundo:rgba(8,10,14,.9); --visor-fg:#ffffff; /* #228 - a folha de exemplo da previa de Documentos: imita o papel impresso, branco nos dois temas (tambem NAO entram no bloco dark) */ --folha-papel:#ffffff; --folha-tinta:#1b2430; --folha-tinta-2:#3a4552; --folha-tinta-3:#5b6773; /* #81 - o terminal do Lyceum (o extrato do que passou pela linha): escuro nos dois temas, como o visor; o verde e o vermelho sao os do tema escuro (no claro, o vermelho do estado media 2,77:1 nesse fundo). NAO entram no bloco dark */ --terminal-fundo:#0f1117; --terminal-tinta:#d7dae0; --terminal-ok:#83bb9e; --terminal-erro:#cf8b8b; /* rotulo (%) DENTRO das barras de progresso dos placares (Inicio): laranja Office sobre a trilha clara; no tema escuro a trilha e escura, entao o rotulo fica claro */ --rotulo-barra:#ED7D31; /* #338 - o rotulo (%) quando cai em cima da barra pintada (78% ou mais): laranja Office nos dois temas, porque a barra e a mesma nos dois; e as categorias do placar da equipe, tambem iguais nos dois temas, com letra escura em cima */ --rotulo-sobre-barra:#ED7D31; --gamif-ouro:#FFC000; --gamif-prata:#BFBFBF; --gamif-bronze:#F2AA84; --gamif-sem:#D9D9D9; --gamif-letra:#10141a; /* #387 - o nivel do selo das trilhas do Academy (bronze, prata, ouro, diamante): as mesmas cores que o console cravava, agora token */ --acd-nivel-bronze:#8c5a2b; --acd-nivel-prata:#9ca3af; --acd-nivel-ouro:#d4af37; --acd-nivel-diamante:#67e8f9; /* raios (DS: sharp) */ --r:5px; --r-sm:4px; /* sombra (clara) */ --sh-1: 0 1px 2px rgba(16,21,27,.05), 0 1px 3px rgba(16,21,27,.04); --sh-2: 0 2px 8px rgba(16,21,27,.07), 0 8px 24px rgba(16,21,27,.05); --sh-3: 0 8px 28px rgba(16,21,27,.10), 0 20px 48px rgba(16,21,27,.08); /* tipografia */ --font: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'Geist Mono', ui-monospace, monospace; /* #338 - a escala de letra de 6 tamanhos (grupo tipo da analise de UX #318); o mapa de cada tamanho antigo para o token mora em scripts/escala_de_letra.py. O subtitulo e 16px: abaixo disso o Safari do iPhone aproxima a tela ao tocar num campo. */ --fs-legenda: 11px; --fs-corpo-pequeno: 12px; --fs-corpo: 13px; --fs-subtitulo: 16px; --fs-titulo: 20px; --fs-numero: 28px; /* #405 - a barra lateral volta a letra de antes do #338 (ordem do dono de 07/11): fora da escala de proposito, so no menu */ --fs-menu-grupo: 14.5px; --fs-menu-item: 13.5px; /* ========================================================================== #4233: A RÉGUA DE QUEBRAS (três quebras e quatro pisos), do estudo #4202. POR QUE ESTA LISTA EXISTE. O estudo contou 13 cortes de largura em 12 números diferentes (520, 560, 640, 760, 820, 880, 900, 920, 1024, 1100, 1101, 1600) espalhados por 5 arquivos, e 27 pisos de coluna diferentes, de 110 a 330px. Não havia régua: havia 27. Aqui ficam os NÚMEROS OFICIAIS, num lugar só, para ninguém inventar o décimo terceiro. AS TRÊS QUEBRAS (e o teto): uma coluna .... até 560px ...... celular em pé e deitado coluna e meia . 561 a 900px .... tablet, notebook a 150% duas mãos ..... 901 a 1500px ... o desktop de hoje teto .......... acima de 1500px a leitura para de crescer OS QUATRO PISOS DE COLUNA, no lugar dos 27, para usar em `repeat(auto-fill, minmax(var(--piso-…), 1fr))`. DUAS RESSALVAS HONESTAS, para não virar promessa maior do que é: (a) `@media` não lê variável de CSS, as três quebras aqui são o CONTRATO escrito, e o número tem de ser repetido à mão na regra. O teste `tests/test_4233_regua_de_quebras.py` é quem confere que o que eu escrevo de novo usa 560/900/1500 e não um número inventado. (b) O estudo pede mais do que isto: medir o CONTEÚDO (`@container`) em vez da janela, e migrar as 15 faixas do 920. Isso NÃO foi feito aqui, mexe em 179 grades e nas 5 folhas de uma vez, e pede cartão próprio. ========================================================================== */ --q-uma-coluna: 560px; --q-coluna-e-meia: 900px; --q-duas-maos: 1500px; --piso-numero: 140px; /* cartão de número (KPI) */ --piso-cartao: 200px; /* cartão pequeno */ --piso-conteudo: 280px; /* cartão de conteúdo */ --piso-painel: 340px; /* painel */ /* #4561 - altura util do console: a janela menos as faixas do topo (--faixas-topo, medido pelo JS) */ --altura-tela: calc(100vh - var(--faixas-topo, 0px)); color-scheme: light; } /* ---- TEMA ESCURO ---- */ [data-theme="dark"] { --board:#080a0d; --bg:#0d1116; --surface:#14191f; --surface-2:#1b2128; --surface-3:#232b34; --nav:#0f141a; --border:#262e38; --border-strong:#343f4a; --grid:#1c232b; /* --text-3 ERA #69737f e era ILEGÍVEL no escuro. Medido no board de Achados e Perdidos e na Fundação (13/08): 3,67:1 sobre --surface e 3,37:1 sobre --surface-2, abaixo dos 4,5:1 que texto pequeno exige. E ele não é detalhe: é o resumo do card, o contador da coluna, o "DEV", o "Update:", o carimbo do rodapé. 13 das 15 reprovações da Fundação eram esta linha sozinha. #8b95a1 mede 5,8:1 sobre --surface, 5,2:1 sobre --surface-2 e 4,7:1 sobre --surface-3 (o fundo mais claro em que ele cai), passa nos três, e continua nitidamente abaixo do --text-2, que é o que faz dele um texto terciário. O tema CLARO não muda aqui: ele tem o mesmo defeito, mas em outra conta, e mexer nele repinta o produto inteiro, foi para card próprio. */ --text-1:#f1f5f9; --text-2:#a7b2bd; --text-3:#8b95a1; --focus:#7aa6d6; --accent: var(--brand-override, #f1f5f9); --accent-fg: var(--brand-fg-override, #10151b); /* ver o comentário no bloco claro */ --accent-hover: color-mix(in srgb, var(--accent) 82%, #fff); /* --accent-ink: o accent USADO COMO LETRA (ver o bloco claro). No escuro a cor da escola precisa ser clareada, senão ela não se lê. Com a cor da escola 1 do DEV (#0E7490) o accent cru media 3,3:1 sobre o card, o nome da coluna no pé de cada cartão do board era um dos reprovados. Clareado dá 8,9:1. Sem cor de escola (carbono) o accent já é #f1f5f9 e a mistura devolve ele mesmo, nada muda para quem não pintou a marca. */ --accent-ink: color-mix(in srgb, var(--accent) 42%, #f1f5f9); --st-success-fg:#83bb9e; --st-success-soft:#16241c; --st-success-bar:#5fb98c; --st-warning-fg:#cdb077; --st-warning-soft:#26200f; --st-warning-bar:#d4ab52; --st-danger-fg:#cf8b8b; --st-danger-soft:#271a1a; --st-danger-bar:#d97070; --st-info-fg:#90b1d9; --st-info-soft:#172131; --st-info-bar:#7aa6d6; --st-neutral-fg:#a7b2bd; --st-neutral-soft:#1f262e; /* #4621: o roxo do VETO clareado (ver o bloco claro). Cravar o roxo escuro nos dois temas faria a etiqueta de proibição sumir no fundo escuro, que é a pedra do `hex cravado nasce para fundo branco`. */ --st-veto-fg:#bfa0dd; --st-veto-soft:#20182c; /* #bf5757 com letra branca media 4,45:1, passava raspando por baixo do piso de 4,5:1 do texto pequeno (o botão "Puxar das escolas" do board). Meio tom mais fundo resolve sem mudar a cor de nada: 4,76:1. */ --danger-solid:#ba5252; --danger-solid-fg:#fff; --success-solid:#357f53; --success-solid-fg:#fff; /* #6394: letra branca 4,87:1 */ --sel-bg:#1a222c; --sel-border:#3c4a59; --code-bg:#0b0f14; /* #6444 - borda da caixa de marcar vazia: 3,37:1 no pior fundo do escuro (a de antes media 1,33:1 ali); o claro ganhou o dele no #470 */ --control-border:#707c8a; --bubble:#2b333d; --bubble-fg:#f1f5f9; /* rotulo claro: a trilha da barra e escura no tema escuro (contraste) */ --rotulo-barra:#f1f5f9; --sh-1: 0 1px 2px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.32); --sh-2: 0 2px 8px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.38); --sh-3: 0 8px 28px rgba(0,0,0,.55), 0 20px 48px rgba(0,0,0,.45); color-scheme: dark; } /* ============================================================ ALIASES de compatibilidade, os nomes ANTIGOS usados no código atual (3.231 refs) apontam para os tokens NOVOS. Assim o visual novo é aplicado sem reescrever os inline de uma vez. À medida que migramos tela a tela p/ classes, estes aliases vão sumindo. ============================================================ */ :root, [data-theme="light"], [data-theme="dark"] { /* marca / primário -> accent. --brand é alias SEMPRE definido (= accent), para os 100+ var(--brand) diretos do app resolverem sob o carbono (quando não há override). */ --brand: var(--accent); --primary: var(--accent); --primary-press: var(--accent-hover); --on-primary: var(--accent-fg); --primary-soft: color-mix(in srgb, var(--accent) 12%, var(--surface)); --primary-soft-2: color-mix(in srgb, var(--accent) 22%, var(--surface)); /* tinta / linhas -> text / border */ --ink: var(--text-1); --ink-2: var(--text-2); --ink-3: var(--text-3); --line: var(--border); --line-2: var(--border-strong); /* acentos semânticos antigos -> status do DS */ --teal: var(--st-info-fg); --teal-soft: var(--st-info-soft); --teal-bg: var(--st-info-soft); --amber: var(--st-warning-fg); --amber-bg: var(--st-warning-soft); --teal-soft-2: var(--st-info-soft); --green-soft: var(--st-success-soft); --rose-soft: var(--st-danger-soft); --amber-border: color-mix(in srgb, var(--st-warning-fg) 34%, var(--surface)); --green: var(--st-success-fg); --green-bg: var(--st-success-soft); --purple: var(--st-info-fg); --purple-bg: var(--st-info-soft); --rose: var(--st-danger-fg); --rose-bg: var(--st-danger-soft); /* raios antigos -> escala nova (sharp) */ --r-card: var(--r); --r-card-l: 8px; --r-btn: var(--r); --r-chip: 999px; --r-field: var(--r); /* FAB com a cor do accent */ --sh-fab: 0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent), 0 2px 6px color-mix(in srgb, var(--accent) 22%, transparent); /* fonte de display (DS usa a mesma família) */ --font-display: var(--font); } /* #6381: O CROMO, a barra lateral na cor da escola (a barra de cima das páginas não muda). Quem escreve os três `-override` é o web/js/theme.js, com a conta de contraste (a letra que passa de 4,5:1 sobre a cor dela, e o fundo ajustado quando a cor fica no meio do caminho). Escola sem cor (carbono): os três ficam vazios e o cromo cai no neutro do tema, a superfície e a tinta de sempre. O resto é a letra misturada com transparência: hover, grupo aberto, linha do grupo e a barra de rolagem (branca sobre cor escura, preta sobre cor clara). */ :root, [data-theme="light"], [data-theme="dark"] { --cromo-bg: var(--cromo-bg-override, var(--surface)); --cromo-fg: var(--cromo-fg-override, var(--text-1)); --cromo-fg-2: var(--cromo-fg-2-override, var(--text-2)); --cromo-linha: color-mix(in srgb, var(--cromo-fg) 24%, transparent); --cromo-hover: color-mix(in srgb, var(--cromo-fg) 8%, transparent); --cromo-aberto: color-mix(in srgb, var(--cromo-fg) 6%, transparent); --cromo-barra: color-mix(in srgb, var(--cromo-fg) 55%, transparent); } /* ============================================================ DS 2.0, decisões fechadas na "Biblioteca de Componentes 2.0" (pacote do dono, 27/07, #3789). Só ADIÇÃO: nenhum token antigo sai daqui e nenhum muda de valor. ============================================================ */ :root, [data-theme="light"], [data-theme="dark"] { /* Escala oficial de botão (lote 1, decisão 5): md 46px = app, toque e ação primária (o padrão do código); sm 36px = console/barra densa, SÓ onde há ponteiro. O 38px que aparece em telas é ruído e deve virar sm. */ --h-btn-md: 46px; --h-btn-sm: 36px; /* Anel de foco padrão (lote 1, decisão 1, aprovada e ausente no código até agora): o anel dos campos vale para TUDO que é clicável, em :focus-visible. Aplicado em components.css. */ --anel-foco: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); /* A escada de z-index vira token (sugestão do lote 3, existia só em comentário). Para item NOVO; nenhum valor antigo muda por isto. EXCEÇÃO REGISTRADA (lote 1, decisão 4): .hs-modal-bg segue em 200, pode ser band-aid de um empilhamento específico; não mexer sem investigar quem depende dele. */ --z-modal: 9000; --z-dropdown: 9600; --z-toast: 9990; --z-upload: 99990; } /* #354 - AS PECAS DA CASA: os tokens do Comunicador viraram os da casa (ordem do dono de 07/11, "o comunicador e o modelo"). Os valores sao os que o Comunicador sempre teve, e o escopo .cv2 (web/css/comunicador-v2/base.css) passou a herdar daqui. As pecas moram em components.css (prefixo casa-), o comportamento em web/js/casa-pecas.js e a regra em web/padrao-comunicador.html. A escala de letra das pecas e a do #338 (--fs-legenda 11, --fs-corpo-pequeno 12, --fs-corpo 13, --fs-subtitulo 16, --fs-titulo 20). */ :root, [data-theme="light"] { --casa-fundo: #F3F5F6; --casa-superficie: #FFFFFF; --casa-tinta: #111827; --casa-sub: #6B7280; --casa-linha: #E5E7EB; --casa-chip: #F1F3F4; --casa-sombra: 0 1px 2px rgba(17, 24, 39, .05), 0 4px 12px rgba(17, 24, 39, .05); --casa-sombra-gaveta: 0 8px 28px rgba(17, 24, 39, .16); --casa-petroleo: #1E7B79; --casa-petroleo-fg: #FFFFFF; --casa-petroleo-suave: #E7F1F1; --casa-trilho: #D1D5DB; /* #354 - a cor da escola como letra e como fundo suave: o theme.js faz a conta de contraste (tintaDaCasa); sem cor, o petroleo num suave mais claro que o do Comunicador (#E7F1F1 dava 4,38:1 com a letra petroleo; 7% da 4,6:1) */ --casa-principal-tinta: var(--casa-tinta-claro-override, var(--casa-petroleo)); --casa-principal-suave: var(--casa-suave-claro-override, color-mix(in srgb, var(--casa-petroleo) 7%, var(--casa-superficie))); } [data-theme="dark"] { --casa-fundo: #0d1116; --casa-superficie: #14191f; --casa-tinta: #f1f5f9; --casa-sub: #a7b2bd; --casa-linha: #262e38; --casa-chip: #1b2128; --casa-sombra: 0 1px 2px rgba(0, 0, 0, .40), 0 4px 12px rgba(0, 0, 0, .30); --casa-sombra-gaveta: 0 8px 28px rgba(0, 0, 0, .55); --casa-petroleo: #5FB3B0; --casa-petroleo-fg: #0d1116; --casa-petroleo-suave: #16292A; --casa-trilho: #3a4450; --casa-principal-tinta: var(--casa-tinta-escuro-override, var(--casa-petroleo)); --casa-principal-suave: var(--casa-suave-escuro-override, color-mix(in srgb, var(--casa-petroleo) 14%, var(--casa-superficie))); } :root, [data-theme="light"], [data-theme="dark"] { /* #354 - o botao principal na cor da barra lateral da escola (escolha 1 do dono de 07/11); sem cor, o petroleo */ --casa-principal: var(--cromo-bg-override, var(--casa-petroleo)); --casa-principal-fg: var(--cromo-fg-override, var(--casa-petroleo-fg)); --casa-raio: 12px; --casa-raio-controle: 10px; --casa-altura-controle: 40px; --casa-lateral: 352px; --casa-veu: rgba(10, 14, 22, .45); /* #376 - o veu forte e o da letra pequena sobre foto: com a foto mais clara (branca a .6) a letra branca da 5,08:1; o .45 dava 3,09:1 */ --casa-veu-forte: rgba(10, 14, 22, .6); /* #376 - letra sobre o veu da foto: branca nos dois temas (o veu e escuro nos dois) */ --casa-sobre-veu: #FFFFFF; --casa-fonte: Inter, system-ui, -apple-system, sans-serif; } * { box-sizing: border-box; } /* #4574: A COR DO AVATAR DE PESSOA. Ela vivia cravada como #00A79C em sete lugares do console, e a inicial em cima dela e BRANCA (`.av` usa --accent-fg). Medido na tela de Pessoas: 27 dos 28 avatares davam 3,00:1, a letra dentro do circulo e texto, e texto pequeno pede 4,5:1. O turquesa continua turquesa, meio tom mais fundo: 5,36:1. Vira token porque sete copias do mesmo hex divergem no dia em que alguem corrigir uma. O turquesa CLARO nao morre: ele segue na paleta que a escola escolhe como marca (la a letra de cima e decidida por luminancia desde o commit 8446673) e nos avatares de canal abaixo, que nao levam letra. */ :root, [data-theme="light"], [data-theme="dark"] { --av-pessoa: #00786F; } /* ---- Avatares de canal: o "principal" segue o accent; os demais, status ---- */ .ch-after { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 78%, #fff), var(--accent)); } .ch-early { background: linear-gradient(135deg,#27C2A8,#00A79C); } .ch-food { background: linear-gradient(135deg,#F4A23B,#E8821E); } .ch-library { background: linear-gradient(135deg,#9B7BF0,#7A5AF0); } .ch-coord { background: linear-gradient(135deg,#FF8FA3,#E0567A); } .ch-health { background: linear-gradient(135deg,#FF6F6F,#E04848); } .ch-finance { background: linear-gradient(135deg,#3DB39E,#1E8E7A); } .ch-direc { background: linear-gradient(135deg,#6478FF,#3F51E0); } /* ============================================================ Primitivas compartilhadas (app + web) ============================================================ */ .hs-btn { font-family: var(--font); font-weight: 600; font-size: var(--fs-subtitulo); border: none; border-radius: var(--r); padding: 0 18px; height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; white-space: nowrap; transition: background .15s, transform .08s, box-shadow .15s; -webkit-tap-highlight-color: transparent; } .hs-btn:active { transform: scale(.985); } .hs-btn--primary { background: var(--accent); color: var(--accent-fg); } .hs-btn--primary:hover { background: var(--accent-hover); } .hs-btn--ghost { background: var(--surface-3); color: var(--text-1); } .hs-btn--ghost:hover { background: var(--border); } .hs-btn--outline { background: transparent; color: var(--text-1); box-shadow: inset 0 0 0 1.5px var(--border-strong); } .hs-btn--outline:hover { background: var(--surface-2); } .hs-btn--block { width: 100%; } /* ============================================================================ #3828/#3829/#3833: A REGRA QUE FALTAVA, e ela explica SEIS cards de uma vez. O dono relatou, em telas diferentes, sempre a mesma coisa: "o pai vê o botão de publicar conquista", "vê novo evento e validar ingresso", "vê Minha disponibilidade". O código SEMPRE escondeu esses botões, `botao.hidden = true` está lá, escrito, desde o dia em que cada tela nasceu. O QUE ACONTECIA: `hidden` só esconde porque o navegador traz `[hidden] { display:none }` na folha DELE. Basta uma folha NOSSA dizer `display` para aquele elemento e a nossa vence, é regra de cascata, folha do autor ganha da folha do navegador. Como toda primitiva do design system declara o próprio display (`inline-flex` no botão e no chip, `flex` no avatar), o atributo `hidden` virou decoração em TODO botão do sistema. Um `if` correto no JavaScript, escondendo nada. Estas três linhas devolvem o significado do `hidden`. Sem !important: a especificidade de `.hs-btn[hidden]` (0,2,0) já vence `.hs-btn` (0,1,0). REGRA PARA QUEM VIER DEPOIS: primitiva nova que declare `display` entra NESTA lista no mesmo commit. Senão nasce com o mesmo buraco. #3826 (28/07), e nasceu mesmo. A Cantina da família mostrava as abas da escola ("Vender", "Itens") porque `.seg` declara `display:inline-flex` e não estava aqui: o `abas.hidden = true` do JavaScript não escondia nada. Sétimo card da mesma raiz. A regra acima não é conselho, é o que separa este defeito de voltar numa oitava tela. */ /* #4321 (10/08), DÉCIMA vez, e desta vez foi a `.hs-seg`. Medindo a rolagem lateral da Galeria em 360px eu esbarrei nela por acidente: as abas "Publicadas / Aguardando aprovação / Recusadas" mediam 365px numa tela onde cabem 344, só que elas NÃO DEVIAM ESTAR ALI. O `web/js/galeria.js` escreve `barra.hidden = ehFamilia` desde que a tela nasceu; como `.hs-seg` declara `display:inline-flex` e não estava nesta lista, o atributo não escondia nada e a FAMÍLIA via a fila de moderação da escola. Não é só enfeite: são os nomes de três estados internos ("aguardando aprovação", "recusadas") aparecendo para o pai. Conferido no arquivo: `.hs-seg[hidden]` existe em um lugar só, esta barra. */ /* #4320 (10/08), DÉCIMA PRIMEIRA: `.hs-grupo-acoes`. Ela declara `display:inline-flex`, e por isso a poda de grupo vazio precisava escrever `g.style.display='none'` na mão para conseguir escondê-la. Estilo na mão é uma porta que não se fecha: quem revela botão por papel DEPOIS do boot chamava a poda de novo e não conseguia trazer a engrenagem de volta. Com esta linha, `grupo.hidden = true` volta a bastar e a decisão é reversível. */ .hs-btn[hidden], .hs-chip[hidden], .hs-av[hidden], .seg[hidden], .hs-seg[hidden], .hs-grupo-acoes[hidden] { display: none; } .hs-chip { font-family: var(--font); display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--r-chip); font-size: var(--fs-corpo); font-weight: 600; line-height: 1; background: var(--surface-3); color: var(--text-2); border: 1px solid transparent; white-space: nowrap; cursor: pointer; transition: all .14s; } .hs-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--sh-1); } .hs-av { border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-family: var(--font); overflow: hidden; background-size: cover; background-position: center; } /* Barra de rolagem tematizada (segue o accent) */ * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong)) transparent; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid var(--board); background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent) 45%, var(--border-strong)); background-clip: padding-box; border: 3px solid var(--board); } ::-webkit-scrollbar-track { background: transparent; } .hs-scroll::-webkit-scrollbar { width: 9px; height: 9px; } .hs-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } .hs-scroll::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent) 45%, var(--border-strong)); background-clip: padding-box; } .hs-scroll::-webkit-scrollbar-track { background: transparent; } .no-sb::-webkit-scrollbar { display: none; } .no-sb { scrollbar-width: none; } .dot-unread { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } @keyframes hs-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes hs-pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } } @keyframes hs-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes hs-scrim { from { opacity: 0; } to { opacity: 1; } } @keyframes hs-spin { to { transform: rotate(360deg); } } @keyframes hs-check-pop { 0%{transform:scale(0)} 60%{transform:scale(1.15)} 100%{transform:scale(1)} } @keyframes hs-scan { 0%,100%{top:18%} 50%{top:82%} } @keyframes hs-pulse { 0%{transform:scale(1);opacity:.6} 100%{transform:scale(1.6);opacity:0} } @keyframes hs-push-in { from{opacity:0; transform:translateY(-120%);} to{opacity:1; transform:translateY(0);} } /* ══ #5108: a paleta FECHADA das etiquetas de comunicado ═══════════════════ * * POR QUE TOKENS PRÓPRIOS, e não os status que já existem. A casa tem quatro * cores semânticas (info, sucesso, aviso, perigo) e elas SIGNIFICAM alguma coisa: * vermelho é erro. Uma etiqueta chamada "Vermelho" que a secretaria criou para * marcar passeios não é um erro, e pintá-la com `--st-danger` faria toda tela * cheia de etiquetas parecer um painel em pane. Cor de etiqueta é decorativa, e * decorativo e semântico misturados é como um sistema perde os dois. * * POR QUE FECHADA, e não um seletor de cor. O News deixa a categoria como texto * livre e o banco tem "Pedagogico" duas vezes; cor livre daria o mesmo, com * agravante: cor escolhida a dedo nasce para fundo branco e fica ilegível no tema * escuro. Foi o defeito medido no #4813 (2,63:1 onde se pede 4,5:1). * * MEDIDO em 03/09, contraste da letra sobre o próprio fundo da etiqueta, nos dois * temas, e REMEDIDO em 17/09 (#6022) quando a paleta passou de 8 para 16 cores. * São 32 combinações; a pior continua sendo o verde claro, com 5,25:1, e o piso * para texto pequeno é 4,5:1. Mexeu numa cor, mede de novo: a régua do #6022 * (tests/test_6022_etiquetas_16_cores.py) recalcula os 32 números a partir destes * pares e reprova abaixo de 4,5:1. * * AS OITO NOVAS (grafite, marrom, laranja, amarelo, oliva, esmeralda, anil e * magenta) foram escolhidas por medida: além do contraste, a distância OKLab para * as vizinhas, para que 16 etiquetas lado a lado não virem pares quase iguais. As * oito de antes não mudaram um dígito. A ordem é a do círculo de cores, dos neutros * ao rosa, a mesma de CORES_TAG no servidor. * * QUEM DIFERENCIA AS 16 É A LETRA, NÃO O FUNDO. Medido em 17/09: a menor distância * OKLab entre duas LETRAS é 0,031 (verde e esmeralda no escuro), acima do que o olho * separa; entre dois FUNDOS é 0,008 (magenta e rosa no claro), praticamente a mesma * cor. Por isso o seletor de cor do cadastro mostra uma bolinha na cor da letra, e * não um botão pintado só de fundo. * * claro: cinza 7,01 grafite 10,30 marrom 5,77 vermelho 6,04 * laranja 5,93 ambar 5,71 amarelo 5,70 oliva 5,63 * verde 5,25 esmeralda 5,53 turquesa 6,01 azul 6,36 * anil 5,85 roxo 6,41 magenta 6,09 rosa 5,96 * escuro: cinza 7,45 grafite 9,07 marrom 7,94 vermelho 7,50 * laranja 7,90 ambar 8,53 amarelo 7,98 oliva 8,13 * verde 8,56 esmeralda 8,14 turquesa 8,27 azul 8,10 * anil 7,95 roxo 7,88 magenta 7,79 rosa 7,93 * ------------------------------------------------------------------------- */ :root, [data-theme="light"] { --tag-cinza-fg: #4a5057; --tag-cinza-bg: #eceef0; --tag-grafite-fg: #2a2e34; --tag-grafite-bg: #dde0e4; --tag-marrom-fg: #715440; --tag-marrom-bg: #f3e9e2; --tag-vermelho-fg: #8f3b3b; --tag-vermelho-bg: #f6e5e5; --tag-laranja-fg: #8c4411; --tag-laranja-bg: #fde6da; --tag-ambar-fg: #7a5518; --tag-ambar-bg: #f6ecda; --tag-amarelo-fg: #695b05; --tag-amarelo-bg: #f1ecd2; --tag-oliva-fg: #506325; --tag-oliva-bg: #e7efd9; --tag-verde-fg: #3d6b45; --tag-verde-bg: #e4efe6; --tag-esmeralda-fg: #196958; --tag-esmeralda-bg: #ddf0ea; --tag-turquesa-fg: #1f6068; --tag-turquesa-bg: #dfeeef; --tag-azul-fg: #33557f; --tag-azul-bg: #e3ebf5; --tag-anil-fg: #4d5397; --tag-anil-bg: #e7eafa; --tag-roxo-fg: #5f4487; --tag-roxo-bg: #ece5f4; --tag-magenta-fg: #7c3f7e; --tag-magenta-bg: #f4e6f4; --tag-rosa-fg: #8c3a63; --tag-rosa-bg: #f7e4ee; } [data-theme="dark"] { --tag-cinza-fg: #b0b6bd; --tag-cinza-bg: #22262a; --tag-grafite-fg: #d9dfe5; --tag-grafite-bg: #32363a; --tag-marrom-fg: #ccb1a0; --tag-marrom-bg: #26201c; --tag-vermelho-fg: #dda0a0; --tag-vermelho-bg: #2a1c1c; --tag-laranja-fg: #e4a886; --tag-laranja-bg: #2d1d14; --tag-ambar-fg: #dcb877; --tag-ambar-bg: #282016; --tag-amarelo-fg: #c6b874; --tag-amarelo-bg: #252214; --tag-oliva-fg: #adc188; --tag-oliva-bg: #1f2418; --tag-verde-fg: #9dc8a6; --tag-verde-bg: #1a241c; --tag-esmeralda-fg: #8bc5b5; --tag-esmeralda-bg: #162521; --tag-turquesa-fg: #8fc6cc; --tag-turquesa-bg: #16262a; --tag-azul-fg: #9dbbe0; --tag-azul-bg: #1a222d; --tag-anil-fg: #acb3e8; --tag-anil-bg: #1e2030; --tag-roxo-fg: #c1abe0; --tag-roxo-bg: #241d2e; --tag-magenta-fg: #d4a5d5; --tag-magenta-bg: #291d29; --tag-rosa-fg: #e0a3c2; --tag-rosa-bg: #2b1b24; }