# Cor

Papel creme, tinta quente e um laranja vivo. A cor do Feitio é pouca de propósito: o requinte está em quantas cores ficam de fora.

## Os papéis

Nenhum componente conhece uma cor; conhece um papel: superfície, texto, acento. Cada tema preenche os mesmos papéis, e é por isso que trocar de tema, ou de dia para noite, não quebra nada.

**surface**o fundo da página

**surface-raised**blocos sobre a página

**surface-top**papel sobreposto

**text**texto principal

**text-soft**texto de apoio

**accent**a ação principal, o foco

**accent-strong**links e notas

**ok**deu certo: musgo

**warn**atenção: mostarda

**error**deu errado: vinho

Também: `on-accent` (texto sobre o laranja), `line` (linhas finas), `shadow` (a sombra do papel) e uma superfície para cada estado (`ok-surface`, `warn-surface`, `error-surface`).

## Regras

### Um laranja por tela

O acento vai na ação principal e em nada mais. Links e notas usam o laranja forte, mais escuro, que lê como texto.

Faça assim

Salvar alterações[Veja o histórico.](#um-laranja)

Um laranja na ação; o link no laranja forte, que não compete.

Não faça

**Configurações**Salvar

Título e botão em laranja: o olho não sabe para onde ir.

### A cor nunca fala sozinha

Um estado sempre vem com ícone e palavra, para quem não distingue cores e para quem imprime em preto e branco.

Faça assim

No arFora do ar

Ícone, palavra e cor juntos.

Não faça

Duas bolinhas: para quem não distingue as cores, são iguais.

### O erro é vinho, nunca laranja

O vinho foi puxado para longe do laranja para um erro nunca parecer a ação principal.

### Nada de cor escrita direto

Sempre o papel, `var(--feitio-color-…)`. Uma cor escrita à mão não muda à noite nem numa fachada.

## Dia e noite

A noite não é o dia invertido. Cada papel tem um valor próprio no escuro: o papel vira carvão quente, o creme vira a tinta, e o laranja dos links acende para continuar legível. O laranja da ação principal é o mesmo nos dois modos, fundo, com o texto creme. Sem escolha da página, o Feitio segue o modo do sistema.

**De dia**

Creme, tinta quase preta, laranja.

Salvar

`surface: oklch(96% 0.018 80)`

**À noite**

Carvão quente, creme como tinta, o mesmo laranja.

Salvar

`surface: oklch(22% 0.016 55)`

## Fachadas

-   Um trabalho de fora (a página de uma loja) ganha uma fachada: um tema que só troca as cores, preenchendo os mesmos papéis.
-   Letra, forma, espaço e movimento continuam do Feitio.
-   A fachada nasce só de dia e ganha noite quando o trabalho pedir.
-   O teste de contraste vale para ela também: uma fachada que não passa não entra.

## Contraste

Todo par que carrega texto ou significado passa o WCAG 2.2 AA, de dia e à noite: 4,5 para texto, 3 para formas. O teste do Feitio confere cada par e reprova o build se algum cair.

Par

Uso

Dia

Noite

Mínimo

`text / surface`

texto principal

13,9

14,1

4,5

`text-soft / surface`

texto de apoio

6,4

8,1

4,5

`accent-strong / surface`

links e notas

5,8

8,0

4,5

`on-accent / accent`

texto do botão principal

5,0

5,0

4,5

`accent / surface`

botão principal, foco

4,8

3,2

3

`warn / warn-surface`

aviso de atenção

4,8

7,5

4,5

A conta do WCAG 2 dá nota alta demais para texto escuro sobre cor saturada de tom médio: o laranja antigo, com texto escuro, passava com 5,2 e mesmo assim cansava a leitura. Por isso o laranja é fundo e o texto em cima é creme; a medida perceptual (APCA) confirma, com Lc 79 contra 40 de antes.