Cores e temas
A paleta é a da Chesslab, igual à do Gambito. O Roque soma rampas calculadas a partir dela, status e uma série de dados validada, e organiza tudo em seis temas por seção.
Paleta da marca
Seis cores, compartilhadas por qualquer sistema da Chesslab em --cl-*. Texto sobre Laranja e sobre Pistache é sempre Grafite: Neve sobre essas duas fica em 2,3:1 e 1,5:1.
Rampas
Onze passos por família, calculados em OKLCH por tools/cores.py. A cor da marca entra exata no passo de luminosidade mais próximo (contornado abaixo). Âmbar é derivado, entre o Laranja e o Pistache, e serve à atenção e aos dados. Componentes usam os semânticos do tema; as rampas ficam para decisões fixas.
Temas
Cada seção declara data-tema e só as variáveis semânticas mudam. Os nomes são os do Gambito; imagem é do Roque, para texto sobre foto. Fundos sólidos fortes (pistache, verde) aparecem pouco: o corpo da página é claro e névoa.
Semânticos
--rq-fundo · --rq-texto · --rq-realce…| Token | Uso |
|---|---|
--rq-fundo | Fundo da seção. |
--rq-superficie · --rq-superficie-alt | Painel elevado (popover, modal) e superfície afundada (hover de linha, cabeçalho de tabela). |
--rq-texto · --rq-texto-suave · --rq-texto-fraco | Texto principal, apoio (4,5:1 ou mais) e desabilitado ou decorativo. |
--rq-linha · --rq-linha-forte | Filete decorativo e borda de controle (3:1 ou mais). |
--rq-realce · --rq-sobre-realce | Ação primária, link e seleção; rótulo sobre ela. |
--rq-acento · --rq-sobre-acento | Conversão. Laranja com Grafite; no verde vira Pistache com Grafite e no pistache, Grafite com Neve. Laranja sólido não toca verde sólido. |
--rq-anel | Anel de foco: Verde no claro e na névoa, Pistache no escuro, no verde e na foto, Grafite no pistache. |
--rq-anel-acento | Anel de foco das ações em laranja (conversão, perigo): Grafite no claro e na névoa, Neve no escuro e na foto. No verde e no pistache, onde a ação não é laranja, o anel do tema. |
--rq-perigo-acao · --rq-sobre-perigo-acao | Botão de perigo: Laranja escurecido com o rótulo no fundo. No pistache vira Neve e no verde, Grafite, com o rótulo em perigo. |
--rq-sucesso · --rq-atencao · --rq-perigo · --rq-info | Status, sempre com ícone e texto. Cada um tem -fundo para alertas. |
--rq-grafico-fundo | Fundo de gráfico: Neve nos temas claros, Grafite nos escuros. As cores de dados foram validadas sobre esses dois. |
--rq-veu · --rq-veu-baixo · --rq-veu-topo | Véu de leitura sobre foto: da esquerda, de baixo e de cima. |
--rq-sombra-1 a -4 | Elevação, com a cor de sombra do tema. |
Status
Sucesso vem do Verde, atenção do Âmbar e perigo do Laranja escurecido até passar de 4,5:1, sem matiz novo. Informação é neutra. Status nunca depende só da cor: vai com ícone e texto. A demo segue o tema da barra.
Pedido confirmado
Meta do dia em risco
Confira o e-mail: falta o domínio.
Atualizado agora
Cores de dados
Seis cores em ordem fixa, atribuídas na sequência e nunca recicladas: a sétima série vira "Outros". Validadas com o validador de paleta da skill dataviz: CVD adjacente de 9,2 no claro e 9,1 no escuro, visão normal acima de 16, todas com 3:1 ou mais sobre o fundo do gráfico (--rq-grafico-fundo). Em dispersão e mapa, no máximo três (petróleo, âmbar, ameixa) e com rótulo direto.
Série categórica
--rq-dados-1 … --rq-dados-6Escala sequencial
--rq-seq-1 … --rq-seq-5Um matiz, do claro ao escuro, para magnitude. No tema escuro a ordem inverte: o passo mais próximo do fundo é o menor valor.
Contraste medido
Medido agora, neste navegador, a partir das variáveis de cada tema. Texto pede 4,5:1; borda de controle, anel e realce pedem 3:1. Um valor abaixo do mínimo aparece na cor de perigo.