# Couleur

Papel crème, encre chaude et orange vif. Feitio utilise peu de couleur par intention : le raffinement réside dans combien de couleurs restent à l'extérieur.

## Rôles

Aucun composant ne connaît une couleur ; il connaît un rôle : surface, texte, accent. Chaque thème remplit les mêmes rôles, c'est pourquoi changer de thème, ou de jour en nuit, ne brise rien.

**surface**the page background

**surface-raised**blocks on the page

**surface-top**lifted paper

**text**main text

**text-soft**supporting text

**accent**the main action, focus

**accent-strong**links and notes

**ok**it worked: moss

**warn**attention: mustard

**error**it failed: wine

De plus : `on-accent` (texte sur l'orange), `line` (lignes), `shadow` (l'ombre du papier) et une surface pour chaque statut (`ok-surface`, `warn-surface`, `error-surface`).

## Règles

### Un orange par écran

L'accent va sur l'action principale et rien d'autre. Les liens et les notes utilisent l'orange fort, plus sombre, qui se lit comme du texte.

Do

Enregistrer les modifications[Voir l'historique.](#um-laranja)

Un orange sur l'action ; le lien dans l'orange fort, qui ne concourt pas.

Don’t

**Paramètres**Enregistrer

Titre et bouton en orange : l'œil ne sait pas où aller.

### La couleur ne parle jamais seule

Un statut est toujours accompagné d'une icône et d'un mot, pour les personnes qui ne peuvent pas distinguer les couleurs et pour l'impression en noir et blanc.

Do

OnlineOffline

Icone, mot et couleur ensemble.

Don’t

Deux points : pour les personnes qui ne peuvent pas distinguer les couleurs, ils sont identiques.

### L'erreur est du vin, jamais de l'orange

Le vin a été séparé de l'orange afin qu'une erreur n'aie jamais l'apparence de l'action principale.

### Aucune couleur écrite à la main

Toujours le rôle, `var(--feitio-color-…)`. Une couleur écrite à la main ne change pas la nuit ou sur une façade.

## Jour et nuit

La nuit n'est pas le jour inversé. Chaque rôle a sa propre valeur dans l'obscurité : le papier devient un charbon chaud, le crème devient l'encre, et l'orange des liens s'allume pour rester lisible. L'orange de l'action principale est identique dans les deux modes, profond, avec du texte en crème. Sans choix depuis la page, Feitio suit le mode système.

**By day**

Crème, encre presque noire, orange.

Save

`surface: oklch(96% 0.018 80)`

**At night**

Charbon chaud, crème comme encre, le même orange.

Save

`surface: oklch(22% 0.016 55)`

## Façades

-   À l'extérieur du travail (une page de boutique) on obtient une façade : un thème qui ne change que les couleurs, remplissant les mêmes rôles.
-   La typographie, la forme, l'espace et le mouvement restent de Feitio.
-   Une façade naît en version jour et obtient une version nocturne lorsque le travail le demande.
-   Le test de contraste s'applique également : une façade qui échoue ne pénètre pas.

## Contraste

Tout couple portant du texte ou un sens passe WCAG 2.2 AA, jour et nuit : 4,5 pour le texte, 3 pour les formes. Le test de Feitio vérifie chaque couple et rejette la construction si l'un échoue.

Pair

Utiliser

Jour

Nuit

Minimum

`text / surface`

texte principal

13,9

14,1

4,5

`text-soft / surface`

texte d'appui

6,4

8,1

4,5

`accent-strong / surface`

liens et notes

5,8

8,0

4,5

`on-accent / accent`

texte du bouton principal

5,0

5,0

4,5

`accent / surface`

bouton principal, focus

4,8

3,2

3

`warn / warn-surface`

notice d'attention

4,8

7,5

4,5

La formule du WCAG 2 surestime le texte sombre sur des couleurs de teinte moyenne saturées : l'ancien orange, avec un texte sombre, a passé avec 5.2 et fatigue toujours les yeux. Ainsi, l'orange est profond et le texte dessus est crème ; la mesure perceptuelle (APCA) confirme cela, avec Lc 79 contre 40 auparavant.