app/doc/colors.md

Définition des couleurs de l'UI

Conception des thèmes

Les couleurs qui caractérisent les thèmes sont découpées en 5 catégories:

1. Couleurs globales : la couleur est transversale à tous les éléments du layout de l'application
2. Header : couleurs particulières au header principal et à ses menus
3. Menu lateral (ou principal): couleurs particulières au menu lateral
4. Contenu: couleurs utilisées pour le contenu des pages
5. Cas particuliers (à réduire au minimum): ces couleurs sont utilisées pour un élément précis de l'interface

Pour certaines de ces couleurs, on pourra avoir une ou plusieurs alternatives, par exemple la variante d'une couleur lors du survol de la souris.

Règles de nommage

On construit le nom d'une variable de couleur de la manière suivante :

[category]-[name](-[suffix])

Si la partie 'name' comprend plusieurs mots, on les sépare, eux aussi, par des tirets -

Catégorie

Ensuite, on indique la catégorie de la couleur :

Catégorie	Identifiant
Globales	global-[color]
Header	header-[color]
Menu Lateral	menu-[color]
Contenu de la page	page-[color]
Cas particuliers	special-[color]

Suffixe (optionnel)

Enfin, un éventuel suffixe :

Suffixe	Signification
-alt	Couleur alternative, typiquement affichée au survol de la souris

Configuration et utilisation

Les couleurs du ou des thèmes sont enregistrées dans plugins/vuetify.ts

Nom	Usage
primary	Couleur principale, utilisée pour le header, les boutons submit, les notifications, les liens de type actions dans les menus, les liens, etc.
primary-alt	Une variante atténuée de la couleur principale, utilisée par exemple pour mettre en surbrillance des éléments au survol
secondary	Couleur secondaire, utilisée pour le menu lateral, le bouton accès aide et pour le fond d'écran de la page de login
secondary-alt	Variante de la couleur secondary, utilisée entre autres pour le fond des liens du menu lateral au survol
neutral-strong	Couleur de fond de certains boutons comme les boutons Annuler, et fond de certains encarts
neutral	Couleur de fond du subheader, des en-têtes des accordéons, du calendrier, des datatables, des boutons d'action
neutral-soft	Couleur du fond des pages, fond des notifications non lues...
danger	Fond des bandeaux et panneaux d'alerte signifiant un risque, couleur du texte de certains contenus décrivant un statut
success	Fond des bandeaux et panneaux d'alerte signifiant un succès, couleur du texte de certains contenus décrivant un statut
warning	Fond des bandeaux et panneaux d'alerte servant d'avertissement
info	Fond des bandeaux et panneaux informatifs