app/doc/colors.md

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