## 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]`.