/* -------------------------------------------------------------------------- css/39-tema-escuro.css - Kit de Padroes, Nivel 4 SS5 (Modo escuro) As duas regras do SS5 que sao MECANICAS -- valem para o portal inteiro sem revisar componente por componente. O resto do SS5 (trocar cor literal por token) e trabalho por componente e esta medido no commit. NAO MEXE NO [data-theme] das paginas hospitalares avulsas: os dois mecanismos seguem vivos por decisao, e este arquivo so fala de body.theme-dark. -------------------------------------------------------------------------- */ /* --- IMPRESSAO E PDF SAO SEMPRE CLAROS ------------------------------------ "Impressao e PDF sao sempre claros, qualquer que seja o tema na tela." Havia 6 blocos @media print no portal e NENHUM tratava o tema: quem estava no escuro imprimia a pagina escura -- tinta preta a rolo, ou texto claro que some no papel branco. COMO ISTO FUNCIONA, e por que nao ha nenhum valor de cor aqui: propriedade personalizada e HERDADA. Os valores claros vivem no :root (o ) e o tema escuro os sobrescreve no . Um `unset` no body devolve a heranca -- ou seja, o valor claro do :root, seja ele qual for hoje ou amanha. Repetir os valores claros aqui criaria uma terceira copia da paleta para apodrecer. Sao 102 tokens, e os 102 foram conferidos: todos existem tambem num contexto claro. Nenhum token e exclusivo do escuro, entao nenhum `unset` deixa buraco. Esta folha carrega por ultimo; por isso vence os blocos escuros sem precisar de especificidade inventada nem de !important. */ @media print { body.theme-dark { color-scheme: light; background: #fff; --acc: unset; --accent: unset; --accent-dark: unset; --accent-light: unset; --accent-muted: unset; --aga-campo-borda: unset; --aga-campo-borda-hover: unset; --aga-campo-foco: unset; --aga-campo-fundo: unset; --aga-grupo-fundo: unset; --au-acc: unset; --au-brand: unset; --au-brand2: unset; --au-err: unset; --au-glass: unset; --au-glass-brd: unset; --au-glass2: unset; --au-info: unset; --au-ink: unset; --au-ink-soft: unset; --au-lilac: unset; --au-line: unset; --au-ok: unset; --au-p0: unset; --au-p1: unset; --au-p2: unset; --au-p3: unset; --au-shadow: unset; --au-warn: unset; --bg-body: unset; --bg-panel: unset; --border: unset; --border-strong: unset; --brand: unset; --brand-soft: unset; --brand2: unset; --card: unset; --card-bg: unset; --danger: unset; --ds-t-soft: unset; --err: unset; --field-bg: unset; --field-border: unset; --fld-bd: unset; --glass: unset; --glass-brd: unset; --glass2: unset; --info: unset; --info-soft: unset; --ink: unset; --ink-soft: unset; --kb-ab: unset; --kb-c0: unset; --kb-c1: unset; --kb-c2: unset; --kb-c3: unset; --kb-c4: unset; --kb-c5: unset; --kb-card: unset; --kb-card-bd: unset; --kb-card-sh: unset; --kb-con: unset; --kb-cri: unset; --kb-surface: unset; --kb-surface-2: unset; --line: unset; --ok: unset; --ok-soft: unset; --olive-light: unset; --p0: unset; --p1: unset; --p2: unset; --p3: unset; --primary: unset; --primary-dark: unset; --primary-glass: unset; --primary-light: unset; --primary-muted: unset; --sg-ink: unset; --sg-line: unset; --sg-neutral: unset; --sg-tint: unset; --sg-tint-2: unset; --sg-tint-brd: unset; --sg-tint-soft: unset; --shadow: unset; --shadow-lg: unset; --shadow-sm: unset; --shadow-xl: unset; --shadow-xs: unset; --success: unset; --surface: unset; --surface-2: unset; --surface-3: unset; --text-light: unset; --text-main: unset; --text-muted: unset; --txt: unset; --txt-soft: unset; --ux-th-bg: unset; --warn: unset; --warn-soft: unset; } } /* --- IMAGEM COM FUNDO ASSUMIDO ------------------------------------------- "Brasao e QR contam com fundo branco atras. Caixa branca explicita em volta, nos dois temas -- como o rail ja faz." O brasao da prefeitura e o QR do aplicativo sao arte preta sobre transparente: no claro funcionam por acidente (o fundo da pagina e claro) e no escuro viram preto-no-escuro. A caixa vale nos DOIS temas, senao a correcao seria mais uma regra so-do-escuro -- que e o que o kit esta tentando desmontar. */ img[src*="brasao"], img[src*="regula-qr"], .ds-brasao img, .brasao img { background: #fff; border-radius: 6px; } /* --- O CARTAO PRECISA SER VISIVEL NO ESCURO ------------------------------- MEDIDO na tela: o cartao (--surface #232818) da 1,03:1 contra o canvas (#252a1c). Nao e pouco contraste, e contraste NENHUM -- o cartao simplesmente nao existe para o olho. No claro o problema nao aparece: o branco se destaca sozinho sobre o #e3ead8. A correcao e a que o kit manda, e nao e sombra: "Separacao no escuro e borda mais clara, jamais sombra" -- sombra preta sobre fundo escuro nao separa nada, e o portal tem cinco tokens de sombra escura fazendo exatamente isso. ONDE A CORRECAO MORA, e por que nao aqui: eu tinha escrito uma regra de borda neste arquivo e ela PERDIA. 22-glass-uniform.css:60 pinta a borda do vidro com `!important`, que vence especificidade e ordem. Vencer exigiria um segundo !important -- a guerra que o Nivel 1 desmontou. Entao a correcao entrou no TOKEN que aquela regra ja consome: --au-glass-brd, em aurora.css, passou a apontar para --surface-outline. Uma linha, sem briga, e todo componente que usa o token herda junto. Aqui fica so o que o token nao alcanca: os cartoes que nao sao .glass. */ body.theme-dark :is(.panel-container, .card, .modal-box) { border: 1px solid var(--surface-outline); } /* --- O MAPA TRAZ UI PROPRIA, E ELA NAO SABE DO TEMA ----------------------- MEDIDO no Centro de comando em modo escuro: o creditos do Leaflet ("(c) OpenStreetMap", "Leaflet") ficava em 1,02:1 e 1,03:1 — branco sobre o fundo branco translucido do proprio controle. Ilegivel. Nao e componente nosso, mas e a nossa tela: o Leaflet pinta .leaflet-control-attribution com rgba(255,255,255,.8) e deixa a cor do texto herdar — no claro herda escuro e funciona, no escuro herda claro e some. Aqui o controle ganha superficie e texto proprios, como qualquer outro componente do portal. */ body.theme-dark .leaflet-control-attribution { background: var(--surface); color: var(--text-muted); } body.theme-dark .leaflet-control-attribution a { color: var(--primary); }