Paleta de Cores

Cores fixas definidas globalmente pelo Rocket. Independem das configurações do tema e podem ser usadas em qualquer arquivo SCSS ou CSS do seu tema. As variáveis com sufixo -color-contrast são calculadas automaticamente pelo Rocket para garantir contraste adequado sobre o --background-color configurado na loja.

Variável	Valor	Descrição
`--white`		Branco puro.
`--white-smoke`		Cinza muito claro.
`--black-dark`		Quase preto. Cor principal de texto.
`--black-dark-rgb`	`34, 34, 34`	Valor RGB de `--black-dark`, para uso em `rgba()`.
`--black-dark-color-contrast`	Calculado	Versão contrastante de `--black-dark` sobre o fundo da loja.
`--black-medium`		Cinza médio. Textos secundários.
`--black-medium-color-contrast`	Calculado	Versão contrastante de `--black-medium` sobre o fundo da loja.
`--black-light`		Cinza claro. Textos auxiliares e placeholders.
`--black-light-30`		Cinza claro com 30% de opacidade.
`--black-light-color-contrast`	Calculado	Versão contrastante de `--black-light` sobre o fundo da loja.
`--black-lightest`		Cinza bem claro. Bordas e divisores.
`--black-lightest-color-contrast`	Calculado	Versão contrastante de `--black-lightest` sobre o fundo.
`--background-contrasting-color`	Calculado	Branco ou preto — o que tiver maior contraste sobre o fundo da loja.
`--green`		Verde. Usado em contextos de sucesso.
`--green-color-contrast`	Calculado	Versão contrastante de `--green` sobre o fundo da loja.
`--neutral-color-low-dark`		Cinza-roxo escuro. Títulos de seções e subtítulos.
`--neutral-color-low-dark-color-contrast`	Calculado	Versão contrastante de `--neutral-color-low-dark`.
`--neutral-color-low-pure`		Quase preto. Overlays e modais escuros.
`--charcoal`		Carvão. Elementos de interface escuros.

Começando

Referência

Tema Rocket