## 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                                                                                                     |