Cores
O que você vai aprender
- Pra que serve o sistema de esquemas de cores
- Como ele se conecta com a configuração "Esquema de cores" que aparece em quase toda section/block
Pra que serve
Define os esquemas de cores da loja (ex: "Esquema 1", "Esquema 6"), cada um com seu próprio conjunto completo de cores. Não existe uma cor única "de fundo" ou "de texto" pra loja toda, cada esquema define esse conjunto, e é isso que a configuração Esquema de cores (presente em quase toda section e em muitos blocks, como Grupo, Cartão de produto, Botões de compra) escolhe entre.
Trocar uma cor dentro de um esquema aqui muda automaticamente tudo que estiver usando aquele esquema pela loja, sem precisar editar section por section.
Como configurar
Cada esquema de cores tem os seguintes grupos:
Base
| Configuração | Pra que serve |
|---|---|
| Plano de fundo | Cor de fundo padrão do esquema. |
| Títulos | Cor dos textos de título (H1 a H6). |
| Texto | Cor do texto comum (parágrafo). |
| Cor primária | Cor de destaque, usada em links e elementos de ênfase. |
| Cor primária (hover) | Cor ao passar o mouse sobre um elemento com a cor primária. |
| Bordas | Cor padrão de bordas. |
| Cor de sombra | Cor usada como base pra sombras. |
Botão primário / Botão secundário
Cada um com: Fundo, Texto, Bordas, e a versão "hover" de cada um desses três (cor ao passar o mouse).
Campos de entrada
Fundo, Texto, Bordas, e Fundo (hover).
Variantes / Variantes selecionadas
Cada grupo com: Fundo, Texto, Bordas, e a versão "hover" de cada um. "Variantes" controla a aparência normal dos seletores de variante em botão (ver Seletor de variantes), "Variantes selecionadas" controla a aparência de qual valor está escolhido no momento.
Boas práticas
- Crie esquemas com contraste suficiente entre Plano de fundo e Texto/Títulos antes de aplicar num bloco grande da página (ex: um Hero inteiro), problemas de legibilidade normalmente vêm de esquemas pensados só pra pequenos detalhes, não pra ocupar a tela toda.
- Ao criar uma nova section/block com "Herdar esquema de cores" desativado, revise se o esquema escolhido manualmente ainda bate com o restante da página ao redor, é fácil esquecer e deixar um trecho destoando visualmente do resto.