Esquemas de cor
Sete esquemas, cada um com tema claro e escuro: índigo, azul, laranja, dois verdes (esmeralda e floresta) e dois vermelhos (carmim e cereja). O esquema troca a cor de ação e o tom dos neutros. Status, lacre, tinta da assinatura e a paleta dos gráficos ficam iguais em todos.
Como funciona
Os semânticos não apontam direto para uma cor: apontam para dois apelidos, scheme-50…950 (cor de ação) e ground-50…950 (fundos, textos e bordas). Cada esquema só troca para onde esses apelidos apontam. Por isso claro, escuro e as ilhas .theme-light e .theme-dark funcionam em qualquer esquema sem regra extra.
Índigo
Tinta de caneta e neutros de papel. O esquema padrão.
Azul
Azul vivo e neutros frios, puxados para o azul.
Laranja
Laranja queimado e neutros quentes, puxados para a areia.
Esmeralda
Verde-azulado fresco e neutros verde-acinzentados.
Floresta
Verde profundo e neutros de musgo, puxados para o oliva.
Carmim
Vermelho quente e neutros de argila.
Cereja
Vermelho-cereja e neutros rosados.
Uso
Use o botão de cor no rodapé da barra lateral para ver todo o styleguide em outro esquema. A escolha fica salva neste navegador.
<!-- Esquema padrão (índigo): nenhum atributo -->
<html lang="pt-BR">
<!-- Azul no tema claro -->
<html lang="pt-BR" data-scheme="blue">
<!-- Laranja no tema escuro -->
<html lang="pt-BR" data-scheme="orange" class="dark">
<!-- Um trecho com esquema e tema próprios: precisa das duas coisas -->
<div data-scheme="blue" class="theme-dark">…</div>