colors.md 3.8 KB

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