add doc/colors, review assets

assets/css/global.scss

@@ -1,3 +1,10 @@
+/**
+ * Ces règles s'appliqueront à toutes les pages, layouts et components de l'application
+ *
+ * Quand c'est possible, préférer les règles par page, layout ou composant
+ */
+// TODO: voir si certaines de ces règles ne devraient pas être rapatriées dans des pages, layouts, components
+
 header .v-toolbar__content {
   padding-right: 0;
 }

assets/css/import.scss

@@ -0,0 +1 @@
+// TODO: utilité?

assets/css/settings.scss

@@ -1,7 +0,0 @@
-@use 'vuetify/settings' with (
-  //$btn-text-transform: none,
-
-  //$breadcrumbs-padding: 5px 5px,
-  //$breadcrumbs-even-child-padding: 0 10px,
-  $body-font-family: 'Source Sans Pro' !important,
-);

assets/css/vuetify.scss

@@ -0,0 +1,8 @@
+/**
+ * Redéfinit les variables globales vuetify
+ *
+ * @see https://next.vuetifyjs.com/en/features/sass-variables/#basic-usage
+ */
+
+@use 'vuetify/settings' with (
+);

doc/colors.md

@@ -0,0 +1,29 @@
+
+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                                      |
+| _ot-grey_             | Utilisée pour le fond de certains boutons comme les boutons Annuler, et comme fond de certains encarts                                        |
+| ot-header-menu        | Couleur de fond des titres des menus du header                                                                                                |
+| _ot-light-grey_       | Couleur de fond du subheader, des en-têtes des accordéons, du calendrier, des datatables, des boutons d'action                                |
+| _ot-super-light-grey_ | Couleur du nom de la structure dans le header, du fond des pages, fond des notifications non lues                                             |
+| ot-danger             | Fond des bandeaux et panneaux d'alerte signifiant un risque, couleur du texte de certains contenus décrivant un statut                        |
+| ot-success            | Fond des bandeaux et panneaux d'alerte signifiant un succès, couleur du texte de certains contenus décrivant un statut                        |
+| ot-warning            | Fond des bandeaux et panneaux d'alerte servant d'avertissement                                                                                |
+| ot-info               | Fond des bandeaux et panneaux informatifs                                                                                                     |
+| ot-menu-color         | Couleur du texte des éléments du menu latéral                                                                                                 |
+| ot-content-color      | Couleur par défaut du texte de tous les contenus, donc de tous les éléments à l'exception du header et du menu lateral                        |
+| ot-border-menu        | Bordure des éléments des menus du header                                                                                                      |
+| _ot-white_            | Couleur des textes sur un fond de type sombre                                                                                                 |
+| _ot-black_            | Couleur des textes sur un fond de type light                                                                                                  |
+
+> En italique: couleur à renommer
+
+> TODO: voir si indispensable de garder la classe de couleur 'ot-header-menu'
+> TODO: voir si indispensable de garder la classe de couleur 'ot-menu-color'
+> TODO: revoir les nommages greys, white, black

nuxt.config.ts

@@ -123,6 +123,9 @@ export default defineNuxtConfig({
             }
         },
     },
+    vuetify: {
+        styles: { configFile: 'src/vuetify.scss' }
+    },
     i18n: {
         langDir: 'lang',
         lazy: true,

plugins/vuetify.ts

@@ -14,28 +14,31 @@ export default defineNuxtPlugin(nuxtApp => {
             messages: { fr }
         },
         theme: {
-            defaultTheme: 'otLightTheme',
+            defaultTheme: 'light',
             themes: {
-                otLightTheme: {
+                light: {
                     dark: false,
                     colors: {
-                        'ot-green': '#00ad8e',
-                        'ot-light-green': '#a9e0d6',
-                        'ot-dark-grey': '#324150',
-                        'ot-dark-grey-hover': '#2c3a48',
-                        'ot-grey': '#777777',
-                        'ot-header-menu': '#ECE7E5',
-                        'ot-light-grey': '#f5f5f5',
-                        'ot-super-light-grey': '#ecf0f5',
-                        'ot-danger': '#f56954',
-                        'ot-success': '#00a65a',
-                        'ot-warning': '#f39c12',
-                        'ot-info': '#3c8dbc',
-                        'ot-menu-color': '#b8c7ce',
-                        'ot-content-color': '#ecf0f4',
-                        'ot-border-menu': '#f4f4f4',
-                        'ot-white': '#ffffff',
-                        'ot-black': '#000000'
+                        /**
+                         * @see Cf. doc/colors.md pour le rôle de chaque couleur
+                         */
+                        'primary': '#00ad8e',   // ot-green
+                        'primary-alt': '#a9e0d6',   // ot-light-green
+                        'secondary': '#324150',   // ot-dark-grey
+                        'secondary-alt': '#2c3a48',   // ot-dark-grey-hover
+                        'ot-grey': '#777777',    // ot-grey
+                        'ot-header-menu': '#ECE7E5',   // ot-header-menu
+                        'ot-light-grey': '#f5f5f5',   // ot-light-grey
+                        'ot-super-light-grey': '#ecf0f5',   // ot-super-light-grey
+                        'ot-danger': '#f56954',   // ot-danger
+                        'ot-success': '#00a65a',   // ot-success
+                        'ot-warning': '#f39c12',   // ot-warning
+                        'ot-info': '#3c8dbc',   // ot-info
+                        'ot-menu-color': '#b8c7ce',  // ot-menu-color
+                        'ot-content-color': '#ecf0f4',  // ot-content-color
+                        'ot-border-menu': '#f4f4f4',  // ot-border-menu
+                        'ot-white': '#ffffff',  // ot-white
+                        'ot-black': '#000000'  // ot-black
                     }
                 }
             },