## Définition des couleurs de l'UI

### Thèmes vuetify

> Voir ici: https://next.vuetifyjs.com/en/features/theme/

### Configuration et utilisation

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

| Nom            | Usage                                                                                                                                         |
|----------------|-----------------------------------------------------------------------------------------------------------------------------------------------|
| background     | Fond par défaut des contenus                                                                                                                  |
| surface        | Fond des components                                                                                                                           |
| 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                                                                                                     |

Pour chacune de ces couleurs, on définit une ou plusieurs couleurs complémentaires, comme les couleurs `on-[color]` (voir plus bas)

On trouvera aussi des couleurs en `x-[color]`: ce sont des couleurs particulières appliquées à un élément précis. Ces 
couleurs sont appelées à disparaitre à terme.

### Règles de nommage

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

`([prefix]-)[name](--[suffix])`

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


##### Préfixe (optionnel)

Pour chaque couleur du thème, on définira des couleurs nommées `on-[color]` qui correspondent au "négatif" de la couleur,
et qui permet de rendre du contenu visible sur un fond de la couleur `color`.


##### Suffixe (optionnel)

Un éventuel suffixe pourra aussi permettre de définir des variantes applicable à certains éléments.

Par exemple, une couleur `on-color--clickable` sera une variante de la couleur `on-color` applicable aux éléments 
cliquables, comme les liens.


### Thèmes SCSS

Pour chaque couleur du thème, on a défini des classes css `theme-[color]` qui appliqueront les règles à la fois sur 
au fond de l'élément et à son contenu.

Ces classes sont définies dans le fichier `assets/css/theme.scss`

> Dans la majorité des cas, appliquer la classe vuetify `bg-[color]` aura le même effet que d'appliquer la classe 
`theme-[color]`. Mais il peut arriver que certains thèmes définis dans cette application implémentent des règles 
spéciales pour certains éléments, comme la couleur des liens d'un thème par exemple. 
C'est pourquoi il vaut mieux utiliser les classes `theme-[color]`.