Cor da marca
Passe uma cor e receba uma escala de 11 passos com texto legível em cada um. Cada estilo decide onde a marca aparece.
// você vai aprender
- Como o
createBrandtransforma uma cor em 34 tokens - Por que o texto sobre a marca é sempre legível, seja qual for a cor
- Como a mesma cor aparece em estilos diferentes, e quais cores são as mais difíceis
Uma prop
Defina brand num StyleProvider com qualquer cor CSS: hex, rgb(), oklch(), uma cor com nome. Se você omitir, ela é herdada do provider pai; no topo, o padrão é o azul #2563eb.
<StyleProvider styleName="minimal" brand="#3fa34d">
<App />
</StyleProvider>
A barra de marca no topo deste site faz o mesmo para todas as prévias da página. Escolha uma cor lá e volte aqui.
A escala de 11 passos
O createBrand (de @camaleo/styles) converte a cor para OKLCH, mantém o matiz e monta os passos de 50 a 950 com luminosidade fixa, de 0,97 até 0,24. Os passos claros usam uma parte pequena do croma da cor, os do meio usam tudo; o que fica fora do sRGB é trazido de volta para dentro. Teste uma cor:
- 5019.4:1 contraste do texto
- 10017.2:1 contraste do texto
- 20014.5:1 contraste do texto
- 30011.2:1 contraste do texto
- 4008.3:1 contraste do texto
- 5006.2:1 contraste do texto
- 6004.7:1 contraste do texto
- 7006.7:1 contraste do texto
- 8009.6:1 contraste do texto
- 90012.7:1 contraste do texto
- 95016.1:1 contraste do texto
Cada passo vira três tokens, mais o --cml-brand com a cor que você passou:
| Token | O que é |
|---|---|
--cml-brand-600 | A cor do passo |
--cml-brand-600-fg | Preto ou branco, o que for mais legível sobre ela |
--cml-brand-600-hover | O passo deslocado 0,09 em luminosidade, para longe da cor do texto |
Você pode chamá-lo por conta própria, por exemplo para gravar os tokens num arquivo CSS estático durante o build:
import { createBrand } from "@camaleo/styles";
const vars = createBrand("#3fa34d");
// { "--cml-brand": "#3fa34d", "--cml-brand-50": "#…", "--cml-brand-50-fg": "#000000", … }
const css = `:root { ${Object.entries(vars).map(([k, v]) => `${k}: ${v};`).join(" ")} }`;
O createBrand lança um erro quando não consegue interpretar o texto. Se a cor vem das pessoas que usam o app, valide antes (ou capture o erro e volte para um padrão).
Como o contraste é garantido
O texto sobre um passo nunca é "a cor de texto da marca": é preto ou branco, escolhido passo a passo pelo contraste WCAG. Contra qualquer cor, o melhor entre preto e branco chega a pelo menos 4,58:1, então todo -fg passa de 4,5:1, seja qual for a entrada. As cores de hover se afastam dessa cor de texto, então o hover nunca reduz o contraste.
Os estilos não usam a escala crua; eles a mapeiam para tokens semânticos e escolhem os passos que funcionam nas superfícies deles:
| Estilo | --cml-accent (claro / escuro) |
|---|---|
| minimal, e os estilos que mantêm o padrão | 600 / 400 |
| cupertino | 600 nos dois modos |
| neubrutalism | 500 nos dois modos |
| material | 600 / 300 |
| progressive, y2k | 600 / 500 |
| retro | 800 / 600 |
| editorial | a cor da tinta; a marca indica foco e seleção |
O texto da marca na página (links, o anel de foco, informações) usa --cml-accent-text, que é 700 no modo claro e 300 no escuro no estilo padrão. O teste de matriz confere que ele fica em 4,5:1 sobre a superfície, e que o anel de foco e as bordas dos controles ficam em 3:1.
A mesma cor em 3 estilos
Uma marca, três estilos: cada um escolhe o próprio passo, então um amarelo que é preenchimento num estilo pode virar um dourado escuro em outro. Troque também o modo na barra "visualizar em".
minimal
neubrutalism
material
Cores difíceis
A maioria das cores é fácil. Estas cinco são as que quebram paletas ingênuas, e o teste de matriz roda cada estilo, no claro e no escuro, com cada uma delas:
| Cor | Por que é difícil |
|---|---|
Azul #2563eb | A padrão: texto preto até o passo 500, branco a partir do 600 (5,3:1) |
Amarelo #facc15 | Matiz muito claro: o passo 600 é um dourado escuro (#866c00) e texto amarelo sobre branco não passaria |
Ciano #22d3ee | Claro e saturado: branco sobre o passo 600 dá 4,86:1, o mais perto do mínimo entre os cinco |
Coral #ff7f50 | Preto e branco ficam quase iguais por volta dos passos 500 e 600 (5,35 e 5,46:1) |
Cinza #808080 | Nenhum croma, então a escala é só de cinzas |
Se a sua marca é uma cor clara como o amarelo, espere que os estilos que usam o passo 500 ou 600 como preenchimento a mostrem mais escura que o seu logo. É o preço do texto legível; use a cor exata em ilustrações e no marketing, não nos controles.
Antes de publicar
- A marca é definida uma vez, no provider do topo (ou no
<html>comstyleScopeProps) - Cores que vêm das pessoas são validadas antes de chegar ao
createBrand - Você muda o
--cml-accent, não um passo da marca, quando quer outro tom - Você conferiu a sua cor no claro e no escuro, em cada estilo que publica