Cor
Papel creme, tinta quente e um laranja vivo. A cor do Feitio é pouca de propósito: o requinte está em quantas cores ficam de fora.
Nesta página
Os papéis
Nenhum componente conhece uma cor; conhece um papel: superfície, texto, acento. Cada tema preenche os mesmos papéis, e é por isso que trocar de tema, ou de dia para noite, não quebra nada.
Também: on-accent (texto sobre o laranja), line (linhas finas), shadow (a sombra do papel) e uma superfície para cada estado (ok-surface, warn-surface, error-surface).
Regras
Um laranja por tela
O acento vai na ação principal e em nada mais. Links e notas usam o laranja forte, mais escuro, que lê como texto.
Não faça
Título e botão em laranja: o olho não sabe para onde ir.
A cor nunca fala sozinha
Um estado sempre vem com ícone e palavra, para quem não distingue cores e para quem imprime em preto e branco.
Faça assim
Ícone, palavra e cor juntos.
Não faça
Duas bolinhas: para quem não distingue as cores, são iguais.
O erro é vinho, nunca laranja
O vinho foi puxado para longe do laranja para um erro nunca parecer a ação principal.
Nada de cor escrita direto
Sempre o papel, var(--feitio-color-…). Uma cor escrita à mão não muda à noite nem numa fachada.
Dia e noite
A noite não é o dia invertido. Cada papel tem um valor próprio no escuro: o papel vira carvão quente, o creme vira a tinta, e o laranja dos links acende para continuar legível. O laranja da ação principal é o mesmo nos dois modos, fundo, com o texto creme. Sem escolha da página, o Feitio segue o modo do sistema.
Creme, tinta quase preta, laranja.
surface: oklch(96% 0.018 80)
Carvão quente, creme como tinta, o mesmo laranja.
surface: oklch(22% 0.016 55)
Fachadas
- Um trabalho de fora (a página de uma loja) ganha uma fachada: um tema que só troca as cores, preenchendo os mesmos papéis.
- Letra, forma, espaço e movimento continuam do Feitio.
- A fachada nasce só de dia e ganha noite quando o trabalho pedir.
- O teste de contraste vale para ela também: uma fachada que não passa não entra.
Contraste
Todo par que carrega texto ou significado passa o WCAG 2.2 AA, de dia e à noite: 4,5 para texto, 3 para formas. O teste do Feitio confere cada par e reprova o build se algum cair.
| Par | Uso | Dia | Noite | Mínimo |
|---|---|---|---|---|
text / surface | texto principal | 13,9 | 14,1 | 4,5 |
text-soft / surface | texto de apoio | 6,4 | 8,1 | 4,5 |
accent-strong / surface | links e notas | 5,8 | 8,0 | 4,5 |
on-accent / accent | texto do botão principal | 5,0 | 5,0 | 4,5 |
accent / surface | botão principal, foco | 4,8 | 3,2 | 3 |
warn / warn-surface | aviso de atenção | 4,8 | 7,5 | 4,5 |
A conta do WCAG 2 dá nota alta demais para texto escuro sobre cor saturada de tom médio: o laranja antigo, com texto escuro, passava com 5,2 e mesmo assim cansava a leitura. Por isso o laranja é fundo e o texto em cima é creme; a medida perceptual (APCA) confirma, com Lc 79 contra 40 de antes.