/* ===================================================================== Sistema de design do curso de SMC Toda cor, tamanho e espacamento do produto sai daqui. Nenhum outro arquivo escreve cor na mao — e isso que permite trocar o visual inteiro mexendo em um lugar so, e e isso que `testes/app/tema.test.js` vigia. A ideia que organiza tudo: a tela tem TRES linguagens visuais que nunca se misturam. 1. MERCADO — o dado. Verde de alta, vermelho de baixa. Saturado, so nas velas. Segue a convencao do mercado, porque o aluno vai sair daqui para uma corretora de verdade. 2. VOCE — a acao do aluno. Azul-tinta. A zona que ele arrasta, o foco de teclado, o controle ativo. Azul nunca aparece como dado e nunca aparece como veredito. 3. CORRECAO — o julgamento. Ciano, ambar e magenta, em escada de luminosidade. Fora da familia do mercado de proposito: pintar a zona de acerto de verde sobre um grafico cheio de velas verdes seria misturar o sinal da correcao com o dado. E a resposta certa — o gabarito — nao tem cor nenhuma: e giz claro sobre o grafico escuro, com traco tracejado. A verdade nao e uma cor, e a luz. Isso tambem resolve o problema de acessibilidade mais chato: branco tracejado nao se confunde com nada, para nenhum tipo de visao. Cada valor abaixo foi escolhido por numero, nao por gosto. Os numeros estao nos comentarios e sao verificados pelos testes. ===================================================================== */ :root { /* O curso tem um tema so, o escuro. Sem esta linha, quem usa o sistema no modo claro via barras de rolagem, caixas de texto e botoes de radio nativos claros sobre a pagina escura. */ color-scheme: dark; /* --------------------------------------------------------------- SUPERFICIES Grafite neutro, nao azul-marinho. O grafico e a coisa mais viva da tela; o resto e a mesa em que ele esta apoiado. --------------------------------------------------------------- */ --cor-fundo: #0E1116; /* pagina e area do grafico */ --cor-superficie: #161A21; /* paineis e cartoes */ --cor-superficie-alta: #1F242D; /* elemento elevado, hover, campo */ --cor-borda: #2A3038; /* divisao discreta entre blocos */ --cor-borda-forte: #3D4552; /* contorno de controle interativo */ /* --------------------------------------------------------------- TEXTO --------------------------------------------------------------- */ --cor-texto: #E6E9EF; /* 15.6:1 sobre o fundo */ --cor-texto-suave: #98A1AE; /* 7.2:1 sobre o fundo, 6.0:1 sobre a superficie alta — passa AA nas tres superficies. O tom anterior (#787b86) dava 4.2:1 e reprovava. */ --cor-texto-sobre-cor: #0B0E12; /* texto de botao com fundo colorido: 4.6:1 no pior caso (fundo de erro) */ /* --------------------------------------------------------------- MERCADO — as velas Convencao verde/vermelho, mantida de proposito. A convencao sozinha nao serve a daltonicos, entao alta e baixa tambem estao separadas por luminosidade (L 0.42 contra 0.19): sob protanopia sobra 2.98:1 e sob deuteranopia 1.54:1 de contraste entre as duas. Quem desenha as velas tem liberdade de reforcar isso com corpo cheio na alta e corpo vazado na baixa — a cor sozinha nunca deveria carregar a informacao. --------------------------------------------------------------- */ --cor-alta: #20C678; /* 8.5:1 sobre o fundo */ --cor-baixa: #DF3C29; /* 4.3:1 sobre o fundo */ /* Grade e eixo sao coisas diferentes, e por isso tem tokens diferentes. A grade e andaime: 1.63:1, deliberadamente abaixo do minimo de 3:1 — uma grade que cumprisse 3:1 viraria uma gaiola competindo com as velas, que sao o conteudo. O eixo, esse sim, e estrutura que precisa ser lida, e cumpre 3.1:1. O valor antigo da grade era 1.32:1, quase invisivel; 1.63 e o ponto em que a linha de 1px aparece sem gritar. */ --cor-grade: #323945; --cor-eixo: #5A6371; /* --------------------------------------------------------------- VOCE — a marcacao do aluno e o foco de teclado A interacao principal e arrastar o mouse. Quem navega por teclado precisa de um anel que apareca em qualquer superficie: 10.6:1 sobre o fundo, 8.8:1 sobre a superficie alta. --------------------------------------------------------------- */ --cor-zona-borda: #6D9BF2; /* 6.9:1 sobre o fundo */ --cor-zona: rgba(109, 155, 242, 0.16); /* achata em #1D2739, 1.26:1 — marca a regiao sem esconder a vela que esta embaixo */ --cor-foco: #9FC4FF; /* --------------------------------------------------------------- GABARITO — a resposta certa, mostrada junto com a marcacao do aluno Giz quente sobre grafite. Sem matiz, entao nao disputa com nenhuma das outras familias e funciona em qualquer daltonismo. Desenhe sempre tracejado (--tracejado-gabarito): e a forma, nao a cor, que separa "resposta certa" de "seu veredito". --------------------------------------------------------------- */ --cor-zona-gabarito-borda: #F2EDE1; /* 16.2:1 sobre o fundo */ --cor-zona-gabarito: rgba(242, 237, 225, 0.09); /* --------------------------------------------------------------- CORRECAO — acertou, acertou em parte, errou Escada de luminosidade, de claro para escuro: L 0.68 / 0.38 / 0.20. Os tres se separam por brilho antes de se separarem por matiz, que e o que faz a escada sobreviver a protanopia e deuteranopia: visao normal protanopia deuteranopia acerto x parcial 1.71 2.03 1.55 parcial x erro 1.70 1.87 1.61 acerto x erro 2.92 3.80 2.49 O par antigo (acerto verde, erro vermelho) dava 1.07 sob deuteranopia — literalmente a mesma cor. --------------------------------------------------------------- */ --cor-acerto: #A1E2EE; /* gelo — 13.2:1 sobre o fundo */ --cor-parcial: #D79A1F; /* ambar — 7.7:1 */ --cor-erro: #D23EAA; /* magenta — 4.5:1 */ /* Preenchimento das zonas corrigidas. Translucidos porque a zona e pintada POR CIMA das velas e o aluno precisa continuar vendo o preco que esta debaixo dela. Os alfas sao diferentes de proposito: cada um foi calibrado para o mesmo peso visual final (1.36 a 1.40:1 sobre o fundo), para que nenhum veredito pareca mais importante que o outro so por causa do brilho da tinta. */ --cor-acerto-preenchimento: rgba(161, 226, 238, 0.15); --cor-parcial-preenchimento: rgba(215, 154, 31, 0.19); --cor-erro-preenchimento: rgba(210, 62, 170, 0.28); /* --------------------------------------------------------------- TIPOGRAFIA Sem fonte de terceiros: a aplicacao e estatica e abre offline, entao nao ha CDN. O carater vem do ajuste, nao da fonte — titulo com entreletra fechada, etiqueta em caixa alta com entreletra aberta. A decisao que importa e a segunda pilha: TODO numero — preco, hora, porcentagem de acerto — vai em monoespacada com algarismo tabular. Numero que dança de largura em cima de um eixo de preco e ruido. --------------------------------------------------------------- */ --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --fonte-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace; --variante-numerica: tabular-nums lining-nums; --texto-eixo: 11px; /* rotulo dentro do grafico */ --texto-mini: 13px; /* etiqueta, legenda, dado secundario */ --texto-p: 15px; /* leitura corrida da explicacao */ --texto-titulo: 20px; /* titulo de secao */ --texto-display: 28px; /* abertura de aula, veredito da correcao */ --peso-normal: 400; --peso-medio: 500; --peso-forte: 650; --altura-linha: 1.6; /* texto corrido */ --altura-linha-densa: 1.25; /* titulo e tabela de dados */ --espaco-letra-titulo: -0.015em; --espaco-letra-etiqueta: 0.08em; /* --------------------------------------------------------------- ESPACAMENTO — escala de 4px, para tudo alinhar sem decisao caso a caso --------------------------------------------------------------- */ --e1: 4px; --e2: 8px; --e3: 16px; --e4: 24px; --e5: 40px; --e6: 64px; /* --------------------------------------------------------------- FORMA Canto curto: instrumento de precisao nao tem canto arredondado. O raio maior fica so para o painel que envolve o grafico. --------------------------------------------------------------- */ --raio: 3px; --raio-grande: 8px; --traco-zona: 2px; /* espessura da borda de qualquer zona */ --tracejado-gabarito: 7px 5px; /* padrao de tracejado so do gabarito */ --anel-foco: 2px; --anel-foco-recuo: 2px; --transicao: 160ms ease; --transicao-lenta: 320ms cubic-bezier(0.2, 0.7, 0.3, 1); } /* ===================================================================== Camada base — o minimo para que qualquer tela ja nasca correta ===================================================================== */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--cor-fundo); color: var(--cor-texto); font-family: var(--fonte); font-size: var(--texto-p); font-weight: var(--peso-normal); line-height: var(--altura-linha); -webkit-font-smoothing: antialiased; } h1, h2, h3 { margin: 0; font-weight: var(--peso-forte); line-height: var(--altura-linha-densa); letter-spacing: var(--espaco-letra-titulo); } /* Todo numero da interface. Aplicada tambem ao eixo de preco do grafico quando ele for HTML em vez de canvas. */ .numero { font-family: var(--fonte-mono); font-variant-numeric: var(--variante-numerica); } /* Eyebrow / rotulo de secao. Caixa alta pede entreletra aberta, senao as letras colam. */ .etiqueta { font-size: var(--texto-mini); font-weight: var(--peso-medio); letter-spacing: var(--espaco-letra-etiqueta); text-transform: uppercase; color: var(--cor-texto-suave); } ::selection { background: var(--cor-zona); color: var(--cor-texto); } /* Foco de teclado. Aparece so para quem navega por teclado, e usa recuo para nao encostar na borda do proprio elemento. */ :focus-visible { outline: var(--anel-foco) solid var(--cor-foco); outline-offset: var(--anel-foco-recuo); border-radius: var(--raio); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }