Guide de style EVA

Rendu natif uniquement : aucun token du site ici, seulement les rôles d'EVA. La page tient les deux thèmes en parallèle, chacun dans son aperçu, de sorte qu'un coup de curseur se voit du même geste en clair et en sombre. Les curseurs portent les noms d'EVA mais écrivent des variables préfixées, remappées sur chaque aperçu : sans ce détour, les valeurs du site reprendraient la main, puisque les aperçus portent eux aussi un data-theme.

Ancres du thème clair

Ce que --current-lightness et --current-darkness valent quand le thème clair est actif.

Ancres du thème sombre
Rôle dark, l'encre

Une seule chroma et une seule teinte pour les deux thèmes : c'est le modèle d'EVA, seule la lightness bascule.

Rôle light, le fond
Rôle accent
Rôle brand

Dans EVA, les rôles dark et light empruntent sa teinte tant qu'on ne pose pas la leur. Ici elles sont posées, sur ce même bleu d'iris : bouger le brand seul ne déplacera donc rien, il faut bouger aussi les deux teintes du dessus.

Décalages de luminosité

Partagés par les cinq couleurs de base. L'aperçu clair prend -d et -b, le sombre prend -d_ et -b_ : à deux thèmes, une palette de neutres consomme les quatre créneaux, et --darker_ finit par porter une valeur positive. C'est la limite du jeu partagé, pas une coquille.

Décalage proportionnel

Nouveauté de la 2.4, et ce qui donne enfin sa place au second filet : un décalage peut viser une butée et n'en parcourir qu'une part. Ici la butée est le fond, et --dark-brighter est un décalage propre au rôle dark, donc libre alors que le --brighter partagé sert déjà à l'élévation.

Thème clair

Ce qui s'apprend en chemin

Direction artistique et développement web en freelance, depuis 2004. Ce paragraphe est en encre secondaire, celle qui porte le corps de texte courant.

Bande alternée, posée sur le second fond

Un panneau

Le texte d'une carte se pose sur la surface, jamais sur le fond de page.

Mention discrète, en encre tertiaire
MéthodeOpen source

brand

--brand
--brand_
--brand__
--brand___
--brand-d
--brand-b
--brand-d_
--brand-b_

accent

--accent
--accent_
--accent__
--accent___
--accent-d
--accent-b
--accent-d_
--accent-b_

extra

--extra
--extra_
--extra__
--extra___
--extra-d
--extra-b
--extra-d_
--extra-b_

dark

--dark
--dark_
--dark__
--dark___
--dark-d
--dark-b
--dark-d_
--dark-b_

light

--light
--light_
--light__
--light___
--light-d
--light-b
--light-d_
--light-b_

Thème sombre

Ce qui s'apprend en chemin

Direction artistique et développement web en freelance, depuis 2004. Ce paragraphe est en encre secondaire, celle qui porte le corps de texte courant.

Bande alternée, posée sur le second fond

Un panneau

Le texte d'une carte se pose sur la surface, jamais sur le fond de page.

Mention discrète, en encre tertiaire
MéthodeOpen source

brand

--brand
--brand_
--brand__
--brand___
--brand-d
--brand-b
--brand-d_
--brand-b_

accent

--accent
--accent_
--accent__
--accent___
--accent-d
--accent-b
--accent-d_
--accent-b_

extra

--extra
--extra_
--extra__
--extra___
--extra-d
--extra-b
--extra-d_
--extra-b_

dark

--dark
--dark_
--dark__
--dark___
--dark-d
--dark-b
--dark-d_
--dark-b_

light

--light
--light_
--light__
--light___
--light-d
--light-b
--light-d_
--light-b_

Le relevé

Ce que les huit rôles valent réellement dans chaque thème, alpha composé sur son fond. Le rapport est mesuré contre le pire des trois fonds que l'encre rencontre, pas seulement contre --bg : c'est lui qui décide du respect du plancher de 4,5:1.

RôleClairContrasteSombreContraste