|
|
@@ -1,69 +1,59 @@
|
|
|
|
|
|
## Définition des couleurs de l'UI
|
|
|
|
|
|
-### Conception des thèmes
|
|
|
+### Configuration et utilisation
|
|
|
+
|
|
|
+Les couleurs du ou des thèmes sont enregistrées dans `plugins/vuetify.ts`
|
|
|
|
|
|
-Les couleurs qui caractérisent les thèmes sont découpées en 5 catégories:
|
|
|
+| 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 |
|
|
|
|
|
|
-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 chacune de ces couleurs, on définit une ou plusieurs couleurs complémentaires, comme les couleurs `n-[color]` (voir plus bas)
|
|
|
|
|
|
-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])`
|
|
|
+`([prefix]-)[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 :
|
|
|
+##### Préfixe (optionnel)
|
|
|
|
|
|
-| Catégorie | Identifiant |
|
|
|
-|--------------------|-------------------|
|
|
|
-| Globales | `global-[color]` |
|
|
|
-| Header | `header-[color]` |
|
|
|
-| Menu Lateral | `menu-[color]` |
|
|
|
-| Contenu de la page | `page-[color]` |
|
|
|
-| Cas particuliers | `special-[color]` |
|
|
|
+Pour chaque couleur du thème, on définira des couleurs nommées `n-[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)
|
|
|
|
|
|
-Enfin, un éventuel suffixe :
|
|
|
+Un éventuel suffixe pourra aussi permettre de définir des variantes :
|
|
|
|
|
|
| Suffixe | Signification |
|
|
|
|---------|------------------------------------------------------------------|
|
|
|
| `-alt` | Couleur alternative, typiquement affichée au survol de la souris |
|
|
|
|
|
|
|
|
|
+### 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.
|
|
|
|
|
|
-### Configuration et utilisation
|
|
|
-
|
|
|
-Les couleurs du ou des thèmes sont enregistrées dans plugins/vuetify.ts
|
|
|
+Ces classes sont définies dans le fichier `assets/css/theme.scss`
|
|
|
|
|
|
|
|
|
-| 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 |
|
|
|
|
|
|
|
|
|
|
Olivier Massot