/* ============================================================================ Academia Desinflame — MODO ESCURO / CORREÇÕES DE ESTILO CRAVADO (dark-fixes.css) ---------------------------------------------------------------------------- COMPLEMENTA `dark-tokens.css`. NÃO redefine token nenhum. Este arquivo trata SÓ o que a inversão de tokens NÃO alcança: cor CRAVADA em estilo inline dentro do bundle (`app/assets/*.js`) e alguns atributos SVG. ORDEM DE CARGA (obrigatória, no do index.html): assets/index-*.css -> x8-brand.css -> dark-tokens.css -> ESTE ---------------------------------------------------------------------------- COMO ESTE ARQUIVO CONSEGUE MIRAR ESTILO INLINE O React escreve `style={{...}}` no atributo `style`, e o CSSOM NORMALIZA o valor antes de serializar. Medido no app real (localhost:4700), não suposto: {background:"#fff"} -> style="background: rgb(255, 255, 255);" {background:"#FFFFFF"} -> style="background: rgb(255, 255, 255);" {backgroundColor:"#fff"} -> style="background-color: rgb(255, 255, 255);" {color:"#fff"} -> style="color: rgb(255, 255, 255);" {color:"#0A1F3B"} -> style="color: rgb(var(--x8nt));" {background:"rgba(var(--x8nt),0.5)"} -> style="background: rgba(var(--x8nt),0.5);" {color:"var(--via-navy, #0A1F3B)"} -> style="color: var(--via-navy, #0A1F3B);" (verbatim) Duas consequências que ditam TODOS os seletores abaixo: 1. hex vira `rgb(...)` COM espaço depois da vírgula. O bundle escreve `rgba(var(--x8nt),.5)` (sem espaço), mas o seletor precisa de `rgba(10, 31, 59`. 2. `var(...)` é preservado LITERALMENTE, com o espaçamento do fonte. Por isso cada regra cobre as 3 formas que existem no bundle: `var(--via-navy, #0A1F3B)` (807x) `var(--via-navy,#0A1F3B)` (9x) `var(--via-navy)` (281x) e por isso NUNCA usamos `[style*="var(--via-navy"]` solto — esse prefixo também casaria com `--via-navy-05`, `--via-navy-10`, etc. (medido: numa página só, 12 falsos positivos contra 1 acerto). `!important` aparece onde o alvo é estilo inline — é a única forma de vencer. ---------------------------------------------------------------------------- PREMISSA HERDADA DE dark-tokens.css (confirmada na leitura do arquivo) --via-navy: #FAFAFA (era #0A1F3B — a tinta virou QUASE-BRANCA) --via-white: #0A0A0A (o papel virou QUASE-PRETO) --via-text-inverse: #0A0A0A globalmente, #EDEDED dentro de escopos escuros É essa inversão que cria os bugs das seções 1 a 4: onde o bundle assumiu "navy = escuro" para pintar um FUNDO, o fundo virou claro — e o texto branco cravado por cima sumiu. ============================================================================ */ /* ============================================================================ 0. VARIÁVEIS LOCAIS DESTE ARQUIVO Prefixo `--x8f-` para nunca colidir com `--via-*` nem com `--x8-*`. ============================================================================ */ :root[data-theme="dark"] { --x8f-on-light: #0A0A0A; /* texto sobre superfície de ênfase CLARA */ --x8f-on-light-2: rgba(10, 10, 10, .62); --x8f-on-light-3: rgba(10, 10, 10, .45); --x8f-ink: #EDEDED; /* texto primário sobre preto */ --x8f-ink-2: #A1A1A1; --x8f-ink-3: #8F8F8F; --x8f-line: rgba(255, 255, 255, .10); --x8f-line-2: rgba(255, 255, 255, .14); --x8f-tile: #EDEDED; /* fundo das "plaquinhas" de logo */ } /* ============================================================================ 1. [P0] PÍLULA BRANCA COM TEXTO NAVY -> BRANCO SOBRE BRANCO ---------------------------------------------------------------------------- O padrão mais grave do bundle: botão de ênfase desenhado para viver sobre um herói navy, com o FUNDO branco cravado e o TEXTO vindo do token. background:"#fff", color:"var(--via-navy, #0A1F3B)" No claro: pílula branca, texto navy. No escuro, `--via-navy` virou #FAFAFA -> BRANCO SOBRE BRANCO. Texto sumiu por completo. Confirmado ao vivo em /profile: 2 elementos ("Editar perfil" + o botão de trocar foto). 10 ocorrências no bundle: ProfilePage-B8jxMZtC.js (2 — pílula "Editar perfil" + FAB da foto) MemberDetailModal-C2_1Vd_n.js (2) CelebrationScene-DfRnVUZ1.js (2) ToolDetailView-CQ8j8-eE.js (1 — "Abrir ferramenta") ViaMentoriasNextCard-Cj932pkQ.js (1) ViaCursoResumo-D5Izry6b.js (1) ViaBuilderV3Solution-CDiohriR.js (1) DECISÃO: mantemos o fundo BRANCO. É exatamente o botão primário do Resend (fundo branco / texto preto) e é coerente com `.via-btn--primary`, que a inversão de tokens já transformou em branco-com-texto-preto sozinho. Só o texto precisa voltar a ser escuro. ============================================================================ */ /* ATENÇÃO À SINTAXE: os dois `:is()` ficam COLADOS (sem espaço) — é um seletor COMPOSTO, "o MESMO elemento tem fundo branco E texto navy". Com espaço viraria combinador descendente e não casaria nada (erro que custou uma rodada de validação; medido: 0 acertos vs 2 esperados). */ :root[data-theme="dark"] :is([style*="background: rgb(255, 255, 255)"],[style*="background-color: rgb(255, 255, 255)"]):is([style*="color: var(--via-navy,"],[style*="color: var(--via-navy)"],[style*="color: var(--via-text-primary"],[style*="color: var(--via-accent,"],[style*="color: var(--via-accent)"]) { color: var(--x8f-on-light) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18) !important; /* anel Resend */ } /* Descendentes da pílula (ícone Phosphor com `color` próprio, contador, chevron...). Aqui o espaço é PROPOSITAL: é combinador descendente. Os ícones que usam `currentColor` já herdam; estes cravam a cor. */ :root[data-theme="dark"] :is([style*="background: rgb(255, 255, 255)"],[style*="background-color: rgb(255, 255, 255)"]) :is([style*="color: var(--via-navy,"],[style*="color: var(--via-navy)"],[style*="color: var(--via-text-primary"],[style*="color: rgb(255, 255, 255)"]) { color: var(--x8f-on-light) !important; } /* ============================================================================ 2. [P0] SUPERFÍCIE `var(--via-navy)` COM TEXTO BRANCO CRAVADO ---------------------------------------------------------------------------- O espelho do problema anterior. O bundle usa navy como FUNDO em 152 lugares (`background: var(--via-navy...)`) e crava `color:"#fff"` por cima. Com `--via-navy: #FAFAFA`, o fundo clareou e o texto branco sumiu. Motivadores (grep de pares fundo+texto no MESMO objeto de estilo): A) background navy + color #fff .............. 5 C) background linear-gradient(navy) + #fff ... 8 Arquivos: ViaBuilderV3Solution, ViaCursoResumo, CelebrationScene, MentorshipsV2, index-CyCzNdJm, SolutionQuickLook, BuilderViaPreview, BuilderV2Solution, dashboardSimple, SidebarShowcase, RenewalUserTable. Exemplos reais: AdminUsers-BvUuBnG8.js -> const re="var(--via-navy, #0A1F3B)"; {background:re, color:"#FFFFFF"} (badge "admin") AdminUserActivity-*.js -> {background:r, color:"#FFFFFF"} (badge "Muito Ativo") ViaCursoResumo-*.js -> {background:"linear-gradient(180deg, var(--via-navy, #0A1F3B), var(--via-navy-deep, #02162A))", boxShadow:"inset 0 1px 0 rgba(255,255,255,0.15), var(--via-shadow-md)", color:"#fff"} DECISÃO: igual à seção 1 — deixamos a superfície CLARA (é o "sólido de ênfase" do tema) e escurecemos o texto. Manter coerência com o botão primário vale mais do que preservar o chip escuro caso a caso. EXCEÇÃO: o pill do menu ativo, que `dark-tokens.css` (seção 15) já força para #1A1A1A com texto branco — o escopo `.via-sb` abaixo protege isso. ============================================================================ */ /* 2a. o próprio elemento carrega fundo navy + texto branco. O pill do menu ativo NÃO entra: ele não crava `#fff`, usa `var(--via-text-inverse)` — e dark-tokens.css já o resolve dentro de `.via-sb`. Portanto não é preciso excluir `.via-sb` aqui. */ :root[data-theme="dark"] :is([style*="background: var(--via-navy,"],[style*="background: var(--via-navy)"],[style*="background-color: var(--via-navy,"],[style*="background-color: var(--via-navy)"]):is([style*="color: rgb(255, 255, 255)"],[style*="color: rgba(255, 255, 255"]) { color: var(--x8f-on-light) !important; } /* 2b. gradiente navy (180deg em 52 lugares, 135/90/160/150deg no resto). Composto: o mesmo elemento tem o gradiente e o texto branco. O risco de falso positivo (gradiente cinza + borda navy no mesmo style) é aceitável porque a regra só troca a cor do texto. `.via-sb` fica de fora porque lá o pill deve permanecer ESCURO com texto branco (Resend), e dark-tokens.css seção 15 já cuida disso. */ :root[data-theme="dark"] [style*="background: linear-gradient"]:is([style*="var(--via-navy,"],[style*="var(--via-navy)"]):is([style*="color: rgb(255, 255, 255)"],[style*="color: rgba(255, 255, 255"]):not(.via-sb *) { color: var(--x8f-on-light) !important; } /* 2c. FILHOS. Rótulo, contador e caption dentro do chip cravam o branco por conta própria — `color` não herda quando o filho declara o seu. Ex.: useViaMetricsBodyScope-*.js e ViaCursoResumo-*.js: dentro de
*/ :root[data-theme="dark"] :is([style*="background: var(--via-navy,"], [style*="background: var(--via-navy)"], [style*="background-color: var(--via-navy,"], [style*="background-color: var(--via-navy)"]) :is([style*="color: rgb(255, 255, 255)"], [style*="color: rgba(255, 255, 255"]) { color: var(--x8f-on-light) !important; } :root[data-theme="dark"] :is([style*="background: var(--via-navy,"], [style*="background: var(--via-navy)"]) :is([style*="color: rgba(255, 255, 255, 0.5"], [style*="color: rgba(255, 255, 255, 0.6"], [style*="color: rgba(255, 255, 255, 0.7"]) { color: var(--x8f-on-light-2) !important; } /* 2e. FILHOS DE SUPERFÍCIE COM **GRADIENTE** NAVY. Buraco encontrado só na varredura de contraste ao vivo (/tools): a 2c acima não pega este caso, porque o pai tem background: linear-gradient(180deg, var(--via-navy) 0%, ...) e portanto NÃO contém a substring "background: var(--via-navy)". Caso real — chip de filtro SELECIONADO em ToolsCatalogHeader-CaZ6CH3s.js: O rótulo já ficava certo (o token `--via-text-inverse` inverte sozinho), mas o contador media contraste 1.00 — branco sobre branco, ilegível. */ :root[data-theme="dark"] [style*="background: linear-gradient"]:is([style*="var(--via-navy,"],[style*="var(--via-navy)"]):not([style*="transparent"]) :is([style*="color: rgb(255, 255, 255)"],[style*="color: rgba(255, 255, 255"]) { color: var(--x8f-on-light) !important; } /* 2f. E o FUNDO desses filhos: `rgba(255,255,255,.10~.25)` era um véu claro sobre navy; sobre a superfície já clara vira invisível. Vira véu escuro. */ :root[data-theme="dark"] :is([style*="background: var(--via-navy,"], [style*="background: var(--via-navy)"], [style*="background: rgb(255, 255, 255)"], [style*="background: linear-gradient"]:is([style*="var(--via-navy,"],[style*="var(--via-navy)"]):not([style*="transparent"])) :is([style*="background: rgba(255, 255, 255, 0.1"], [style*="background: rgba(255, 255, 255, 0.2"], [style*="background-color: rgba(255, 255, 255, 0.1"], [style*="background-color: rgba(255, 255, 255, 0.2"]) { background: rgba(10, 10, 10, .10) !important; } /* 2d. o realce `inset 0 1px 0 rgba(255,255,255,.15/.16/.18)` que o bundle põe no topo desses chips era um brilho sobre navy; sobre superfície clara vira uma linha branca invisível — e a sombra `rgba(10,31,59,...)` some no preto. Troca por um anel neutro, que é como o Resend separa superfícies. */ :root[data-theme="dark"] :is([style*="background: var(--via-navy,"], [style*="background: var(--via-navy)"])[style*="inset"] { box-shadow: 0 0 0 1px rgba(255, 255, 255, .16) !important; } /* ============================================================================ 2B. [P0] "VIDRO BRANCO" CRAVADO INLINE -> CARD BRANCO COM TEXTO BRANCO ---------------------------------------------------------------------------- O pior bug encontrado, e o mais fácil de passar batido: vários componentes NÃO usam `var(--via-glass-card)` — eles reescrevem o gradiente de vidro à mão, com rgba branco cravado. A inversão de tokens não alcança nada disso. Resultado: o card continua BRANCO enquanto o texto dentro dele vem de `var(--via-text-primary)` (agora #EDEDED) -> BRANCO SOBRE BRANCO. Flagrado ao vivo em /tools: 13 elementos numa tela só (cabeçalho da página + todos os cards de ferramenta). O título "Claude Code" media `color: rgb(237,237,237)` sobre `rgba(255,255,255,0.92)`. 11 ocorrências no bundle: ToolsCatalogHeader-CaZ6CH3s.js x2 <- os cards de /tools e o header background:"linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.78) 45%, rgba(247,248,250,0.62) 100%)" ConsultorIAChat-BoFfM07W.js x3 (135deg, 0.72/0.75) AdminTeamManagement-CWex1WTo.js x3 (135deg 0.85, 180deg 0.6, shimmer 90deg) index-CyCzNdJm.js x2 (0.99 — barra/menu) dashboardSimple-eG5SVa00.js x1 DUAS EXCLUSÕES obrigatórias no seletor (ambas verificadas ao vivo): :not([style*="transparent"]) — descarta o shimmer de skeleton do AdminTeamManagement (`90deg, transparent, rgba(255,255,255,.7), transparent`), que deve continuar sendo um brilho passando. :not([style*="color-mix"]) — descarta a plaquinha do ToolLogo, que cai aqui por causa do `box-shadow: rgba(255,255,255,0.95) inset` e deve continuar CLARA (seção 6). Sem esta exclusão: 25 acertos, 12 errados. Nota de serialização: o CSSOM REMOVE `180deg` (é o default) do atributo style — vira `linear-gradient(rgba(255, 255, 255, 0.92) 0%, ...)`. Por isso o seletor não pode depender do ângulo; casa pelas paradas de cor. ============================================================================ */ :root[data-theme="dark"] [style*="background: linear-gradient"]:is([style*="rgba(255, 255, 255, 0.5"],[style*="rgba(255, 255, 255, 0.6"],[style*="rgba(255, 255, 255, 0.7"],[style*="rgba(255, 255, 255, 0.8"],[style*="rgba(255, 255, 255, 0.9"]):not([style*="transparent"]):not([style*="color-mix"]) { /* superfície do Resend: quase-preto elevado, separado por borda, não por sombra. Mantemos o backdrop-filter que o bundle já aplica. */ background: linear-gradient(180deg, #131315 0%, #0E0E10 100%) !important; border-color: var(--x8f-line) !important; } /* O mesmo bloco costuma trazer `boxShadow` com realce branco no topo (`inset 0 1px 0 rgba(255,255,255,.7/.95)`) — desenhado para simular vidro sobre fundo claro. Sobre preto vira um risco branco. */ :root[data-theme="dark"] [style*="background: linear-gradient"]:is([style*="rgba(255, 255, 255, 0.7"],[style*="rgba(255, 255, 255, 0.8"],[style*="rgba(255, 255, 255, 0.9"]):not([style*="transparent"]):not([style*="color-mix"])[style*="inset"] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 8px 24px rgba(0, 0, 0, .55) !important; } /* ============================================================================ 3. [P0] TEXTO NAVY CRAVADO EM rgba() -> PRETO SOBRE PRETO ---------------------------------------------------------------------------- Categoria mais NUMEROSA e a que aparece em TODA página. O bundle escreve a cor do texto como rgba navy literal, sem passar por token nenhum: color:"rgba(var(--x8nt),0.52)" (títulos de seção da sidebar) color:"rgba(var(--x8nt),0.68)" (badge "novo") Confirmado ao vivo (localhost:4700, qualquer rota): 7 elementos por página — os

"APRENDIZADO" / "FERRAMENTAS" / "MINHA CONTA" e os selos "novo". Sem esta regra eles ficam PRETO SOBRE PRETO: ilegíveis. Censo do bundle: 33 ocorrências em `color` + 22 em `border-color` + 11 `borderBottom` + 10 `borderTop` + 7 `borderLeft` (total 1105 rgba escuros literais somando background/border/box-shadow — os de background/sombra são inofensivos: viram invisíveis, não ilegíveis). Faixas de alpha mapeadas para a escala de cinza do Resend em vez de white-alpha crua, para não gerar texto "sujo" sobre preto puro. ============================================================================ */ /* 3a. alphas altos (>= .7) = texto primário */ :root[data-theme="dark"] :is([style*="color: rgba(10, 31, 59, 0.7"], [style*="color: rgba(10, 31, 59, 0.8"], [style*="color: rgba(10, 31, 59, 0.9"], [style*="color: rgba(10, 31, 59, 1"], [style*="color: rgba(2, 22, 42, 0.7"], [style*="color: rgba(2, 22, 42, 0.8"], [style*="color: rgba(2, 22, 42, 0.9"]) { color: var(--x8f-ink) !important; } /* 3b. alphas médios (.5 a .69) = texto secundário. Cobre o .52 dos títulos de seção da sidebar e o .68 do badge "novo". */ :root[data-theme="dark"] :is([style*="color: rgba(10, 31, 59, 0.5"], [style*="color: rgba(10, 31, 59, 0.6"], [style*="color: rgba(2, 22, 42, 0.5"], [style*="color: rgba(2, 22, 42, 0.6"]) { color: var(--x8f-ink-2) !important; } /* 3c. alphas baixos (< .5) = texto terciário/faint */ :root[data-theme="dark"] :is([style*="color: rgba(10, 31, 59, 0.1"], [style*="color: rgba(10, 31, 59, 0.2"], [style*="color: rgba(10, 31, 59, 0.3"], [style*="color: rgba(10, 31, 59, 0.4"], [style*="color: rgba(2, 22, 42, 0.3"], [style*="color: rgba(2, 22, 42, 0.4"]) { color: var(--x8f-ink-3) !important; } /* 3d. RESSALVA: se esse texto navy-alpha estiver DENTRO de uma pílula branca (seção 1), clarear seria o erro inverso. Reafirma escuro ali. Vem depois das 3a-3c de propósito: mesma especificidade, ganha a última. */ :root[data-theme="dark"] :is([style*="background: rgb(255, 255, 255)"], [style*="background-color: rgb(255, 255, 255)"]) [style*="color: rgba(10, 31, 59"] { color: var(--x8f-on-light-2) !important; } /* ============================================================================ 4. [P0] HEX ESCURO CRAVADO EM `color` ---------------------------------------------------------------------------- Poucos, mas ilegíveis. Levantados por grep de `color:"#..."` no bundle: color:"#0A1F3B" x2 AdminUserActivity-CnW5x8j5.js -> rgb(var(--x8nt)) color:"#3D5570" x6 (slate médio-escuro) -> rgb(61, 85, 112) color:"#5C6677" x2 -> rgb(92, 102, 119) color:"#6B7F94" x2 -> rgb(107, 127, 148) color:"#010F1D" -> rgb(1, 15, 29) color:"#0a1f1f", "#333", "#444", "#666", "#495057", "#4b5563" (1 cada, telas de debug/erro e o preview de e-mail do admin) Os azuis CLAROS do mesmo censo (#9FC1EC, #D7E3F4, #DCE9F8, #F3F5F8, #9FC1E8) NÃO entram: já contrastam com preto. ============================================================================ */ :root[data-theme="dark"] :is([style*="color: rgb(var(--x8nt))"], [style*="color: rgb(2, 22, 42)"], [style*="color: rgb(1, 15, 29)"], [style*="color: rgb(0, 0, 0)"], [style*="color: rgb(17, 17, 17)"], [style*="color: rgb(51, 51, 51)"], [style*="color: rgb(68, 68, 68)"]) { color: var(--x8f-ink) !important; } :root[data-theme="dark"] :is([style*="color: rgb(61, 85, 112)"], [style*="color: rgb(92, 102, 119)"], [style*="color: rgb(107, 127, 148)"], [style*="color: rgb(102, 102, 102)"], [style*="color: rgb(73, 80, 87)"], [style*="color: rgb(75, 85, 99)"]) { color: var(--x8f-ink-2) !important; } /* ============================================================================ 5. [P1] PAINÉIS BRANCOS QUE DEVEM CONTINUAR BRANCOS ---------------------------------------------------------------------------- Conclusão contra-intuitiva da auditoria: dos ~24 brancos cravados, a MAIORIA está CERTA em permanecer branca. Só o texto por cima precisava de conserto (seção 1). Inventário e veredito: MANTER BRANCO (é papel/mídia, não superfície de UI): AdminEmailTemplates-CmANTsOX.js