rename theme color, points hardcoded colors, update doc

assets/css/global.scss

@@ -22,7 +22,7 @@ header .v-toolbar__content {
 }
 
 .v-application a {
-  color: rgb(var(--v-theme-ot-green))
+  color: rgb(var(--v-theme-primary))
 }
 
 .v-menu__content {
@@ -45,7 +45,7 @@ header .v-toolbar__content {
   .v-list{
     .v-list-item{
       border-bottom: 1px solid;
-      border-bottom-color: rgb(var(--v-theme-ot-border-menu));
+      border-bottom-color: rgb(var(--v-theme-neutral));
     }
   }
 }

components/Layout/BannerTop.vue

@@ -5,10 +5,10 @@
     <v-col cols="3" class="ot-dark_grey ot-white--text">
       <slot name="block1" />
     </v-col>
-    <v-col cols="6" class="ot-white ot-grey--text">
+    <v-col cols="6" class="ot-white neutral-strong--text">
       <slot name="block2" />
     </v-col>
-    <v-col cols="3" class="ot-light_grey ot-grey--text">
+    <v-col cols="3" class="ot-light_grey neutral-strong--text">
       <slot name="block3" />
     </v-col>
   </v-row>

components/Layout/Dialog.vue

@@ -50,14 +50,14 @@ const props = defineProps({
 
 <style lang="scss" scoped>
   .dialog-title {
-    background: #e6e6e6;
+    background: #e6e6e6;  /* !color! */
     padding-left: 40px;
     font-weight: normal;
   }
 
   .dialog-type {
-    background: rgb(var(--v-theme-ot-green, #00AD8E));
-    color: #fff;
+    background: rgb(var(--v-theme-primary, #00AD8E));
+    color: #fff;  /* !color! */
     width: 50px;
     min-height: 400px;
     padding: 25px 10px;

components/Layout/Header.vue

@@ -7,7 +7,7 @@ Contient entre autres le nom de l'organisation, l'accès à l'aide et aux préf
   <v-app-bar
       order="0"
       density="compact"
-      class="bg-ot-green text-ot-white"
+      class="bg-primary text-ot-white"
   >
     <template #prepend>
       <v-app-bar-nav-icon
@@ -38,7 +38,7 @@ Contient entre autres le nom de l'organisation, l'accès à l'aide et aux préf
 
     <a
         :href="runtimeConfig.supportUrl"
-        class="text-body pa-3 ml-2 bg-ot-dark-grey text-ot-white text-decoration-none"
+        class="text-body pa-3 ml-2 bg-secondary text-ot-white text-decoration-none"
         target="_blank"
     >
       <span class="d-none d-sm-none d-md-flex">{{ $t('help_access') }}</span>

components/Layout/Header/Menu.vue

@@ -42,7 +42,7 @@ header principal (configuration, paramètres du compte...)
         @update:modelValue="onStateUpdated"
     >
       <v-card>
-        <v-card-title class="ot-header-menu text-body-2 font-weight-bold">
+        <v-card-title class="bg-neutral text-body-2 font-weight-bold">
           {{$t(menu.label)}}
         </v-card-title>
 
@@ -121,7 +121,7 @@ const btn = ref(null)
 
 <style scoped lang="scss">
   .actions {
-    background: rgb(var(--v-theme-ot-green));
+    background: rgb(var(--v-theme-primary));
     color: white;
   }
 </style>

components/Layout/Header/Notification.vue

@@ -26,7 +26,7 @@
       v-model="isOpen"
   >
     <v-card max-width="400">
-      <v-card-title class="ot-header-menu text-body-2 font-weight-bold">
+      <v-card-title class="bg-neutral text-body-2 font-weight-bold">
         {{ $t('notification') }}
       </v-card-title>
 
@@ -254,13 +254,13 @@ const notificationUrl = UrlUtils.join(runtimeConfig.baseUrlAdminLegacy, 'notific
 
 <style scoped lang="scss">
   #all_notifications{
-    background: rgb(var(--v-theme-ot-green, white));
+    background: rgb(var(--v-theme-primary, white));
     color: white;
   }
   .list_item{
     white-space: normal;
   }
   .unread{
-    background: #ecf0f5;
+    background: rgb(var(--v-theme-global-neutral-soft, white));
   }
 </style>

components/Layout/Header/UniversalCreation/GenerateCardsSteps.vue

@@ -206,14 +206,14 @@
     .icon{
       i{
         font-size: 50px;
-        color: var(--v-theme-ot-grey, #777777);
+        color: var(--v-theme-neutral-strong, #777777);
       }
     }
     .infos-container{
       padding: 15px 0;
       h4{
         font-size: 15px;
-        color: var(--v-theme-ot-green, #00AD8E);
+        color: var(--v-theme-primary, #00AD8E);
         font-weight: bold;
         margin-bottom: 6px;
       }
@@ -221,7 +221,7 @@
         font-size: 13px;
         padding: 0;
         margin: 0;
-        color: #767676;
+        color: #767676;  /* !color! */
       }
     }
     &>div{

components/Layout/Header/UniversalCreation/TypeCard.vue

@@ -60,7 +60,7 @@
   .icon {
     i{
       font-size: 50px;
-      color: rgb(var(--v-theme-ot-grey, #777777));
+      color: rgb(var(--v-theme-neutral-strong, #777777));
     }
   }
 
@@ -69,7 +69,7 @@
 
     h4 {
       font-size: 15px;
-      color: rgb(var(--v-theme-ot-green, #00AD8E));
+      color: rgb(var(--v-theme-primary, #00AD8E));
       font-weight: bold;
       margin-bottom: 6px;
     }
@@ -77,7 +77,7 @@
       font-size: 13px;
       padding: 0;
       margin: 0;
-      color: #767676;
+      color: #767676;   /* !color! */
     }
   }
 

components/Layout/MainMenu.vue

@@ -8,7 +8,7 @@ Prend en paramètre une liste de ItemMenu et les met en forme
       v-model="displayMenu"
       :rail="isRail"
       :disable-resize-watcher="true"
-      class="bg-ot-dark-grey text-ot-menu-color main-menu"
+      class="bg-secondary text-neutral main-menu"
   >
     <template #prepend>
       <slot name="title"></slot>
@@ -29,7 +29,7 @@ Prend en paramètre une liste de ItemMenu et les met en forme
           :href="!isInternalLink(item) ? item.to : undefined"
           :to="isInternalLink(item) ? item.to : undefined"
           exact
-          class="text-ot-menu-color"
+          class="text-neutral"
           height="48px"
         ></v-list-item>
 
@@ -38,7 +38,7 @@ Prend en paramètre une liste de ItemMenu et les met en forme
           v-else
           expand-icon="fas fa-angle-right"
           collapse-icon="fas fa-angle-down"
-          class="text-ot-menu-color"
+          class="text-neutral"
           v-model="item.expanded"
         >
           <template #activator="{ props }">
@@ -46,7 +46,7 @@ Prend en paramètre une liste de ItemMenu et les met en forme
                 v-bind="props"
                 :prepend-icon="item.icon.name"
                 :title="$t(item.label)"
-                class="text-ot-menu-color"
+                class="text-neutral"
                 height="48px"
             ></v-list-item>
           </template>
@@ -60,7 +60,7 @@ Prend en paramètre une liste de ItemMenu et les met en forme
             :to="isInternalLink(child) ? child.to : undefined"
             exact
             height="48px"
-            class="text-ot-white"
+            class="text-neutral-soft"
           ></v-list-item>
         </v-list-group>
       </div>
@@ -123,7 +123,7 @@ onUnmounted(() => {
   :deep(.v-icon),
   {
     font-size: 14px;
-    color: rgb(var(--v-theme-ot-menu-color));
+    color: rgb(var(--v-theme-neutral));
   }
 
   .v-list-item__prepend {
@@ -150,7 +150,7 @@ onUnmounted(() => {
   .v-list-group--no-action > .v-list-group__header,
   .v-list-item
   {
-    border-left:3px solid rgb(var(--v-theme-ot-dark-grey));
+    border-left:3px solid rgb(var(--v-theme-secondary));
     height: 48px;
   }
 
@@ -158,8 +158,8 @@ onUnmounted(() => {
   .v-list-item.active,
   :deep(.v-list-group__items .v-list-item)
   {
-    border-left: 3px solid rgb(var(--v-theme-ot-green));
-    background: rgb(var(--v-theme-ot-dark-grey-hover));
+    border-left: 3px solid rgb(var(--v-theme-primary));
+    background: rgb(var(--v-theme-secondary-alt));
   }
 
   :deep(.v-list-group__items .v-list-item-title) {

components/Layout/SubHeader/ActivityYear.vue

@@ -3,14 +3,14 @@
     <span v-show="mdAndUp" class="mr-2 font-weight-bold">{{ $t(label) }} : </span>
 
     <UiXeditableText
-      class="activity-year-input bg-ot-light-grey"
+      class="activity-year-input bg-neutral"
       type="number"
       :data="currentActivityYear"
       @update="setActivityYear"
     >
       <template #xeditable.read="{inputValue}">
-        <v-icon aria-hidden="false" size="small" class="text-ot-green mr-1" icon="fas fa-edit" />
-        <strong class="text-ot-green">
+        <v-icon aria-hidden="false" size="small" class="text-primary mr-1" icon="fas fa-edit" />
+        <strong class="text-primary">
           {{ inputValue }}
           <span v-if="yearPlusOne">
             / {{ parseInt(inputValue) + 1 }}

components/Layout/SubHeader/DataTiming.vue

@@ -11,7 +11,7 @@
       divider
       border
       :rounded="true"
-      class="bg-ot-light-grey toggle-btn"
+      class="bg-neutral toggle-btn"
       @update:modelValue="onUpdate"
     >
       <v-btn
@@ -37,7 +37,7 @@ import {useDisplay, useTheme} from "vuetify";
 import Access from "~/models/Access/Access";
 
 // TODO: en v3.0.5, pas de solution documentée pour renseigner directement la couleur dans le template, à revoir
-const color = useTheme().current.value.colors['ot-green']
+const color = useTheme().current.value.colors['primary']
 
 const { setDirty } = useFormStore()
 const accessProfileStore = useAccessProfileStore()
@@ -86,6 +86,6 @@ const onUpdate = async (newValue: Array<string>) => {
   }
 
   .v-btn.btn-selected {
-    background-color: rgb(var(--v-theme-ot-green)) !important;
+    background-color: rgb(var(--v-theme-primary)) !important;
   }
 </style>

components/Layout/SubHeader/DataTimingRange.vue

@@ -24,7 +24,7 @@
         elevation="0"
         @click="show = !show"
     >
-      <v-icon icon="fas fa-history" color="ot-grey" class="font-weight-normal" style="font-size: 14px;" />
+      <v-icon icon="fas fa-history" color="neutral-strong" class="font-weight-normal" style="font-size: 14px;" />
     </v-btn>
 
     <v-tooltip location="bottom" :activator="btn">
@@ -92,13 +92,13 @@ if (accessProfileStore.historical.dateStart || accessProfileStore.historical.dat
 
 <style scoped lang="scss">
 .v-btn--active .v-icon {
-  color: #FFF !important;
+  color: #FFF !important;  /* !color! */
 }
 
 .time-btn {
   border-width: 1px 1px 1px 0;
   border-style: solid;
-  border-color: rgba(0, 0, 0, 0.12) !important;
+  border-color: rgba(0, 0, 0, 0.12) !important;  /* !color! */
 }
 
 .data-timing-range {

components/Layout/SubHeader/PersonnalizedList.vue

@@ -2,7 +2,7 @@
   <main>
     <span
         ref="btn"
-        class="text-ot-green"
+        class="text-primary"
         style="cursor: pointer;"
     >
       {{ $t('my_list') }}

components/Layout/Subheader.vue

@@ -6,7 +6,7 @@ Contient entre autres le breadcrumb, les commandes de changement d'année et les
 <template>
   <main>
     <v-card
-      class="d-md-flex bg-ot-light-grey text-body-2 px-2"
+      class="d-md-flex bg-neutral text-body-2 px-2"
       flat
     >
       <LayoutSubHeaderBreadcrumbs v-if="mdAndUp" class="mr-auto d-flex" />
@@ -50,7 +50,7 @@ Contient entre autres le breadcrumb, les commandes de changement d'année et les
 <style scoped lang="scss">
 
 main {
-  color: rgb(var(--v-theme-ot-grey));
+  color: rgb(var(--v-theme-neutral-strong));
   font-size: 12px;
 }
 

components/Ui/Button/Delete.vue

@@ -19,7 +19,7 @@ Bouton Delete avec modale de confirmation de la suppression
         </v-card-text>
       </template>
       <template #dialogBtn>
-        <v-btn class="mr-4 submitBtn ot-grey ot-white--text" @click="closeDialog">
+        <v-btn class="mr-4 submitBtn neutral-strong ot-white--text" @click="closeDialog">
           {{ $t('cancel') }}
         </v-btn>
         <v-btn class="mr-4 submitBtn ot-danger ot-white--text" @click="deleteItem">

components/Ui/Button/Submit.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-btn class="mr-4 ot-green ot-white--text" :class="hasOtherActions ? 'pr-0' : ''" @click="submitAction(mainAction)" ref="mainBtn">
+  <v-btn class="mr-4 primary ot-white--text" :class="hasOtherActions ? 'pr-0' : ''" @click="submitAction(mainAction)" ref="mainBtn">
 
     {{ $t(mainAction) }}
 

components/Ui/Collection.vue

@@ -9,7 +9,7 @@
       <slot name="list.item" v-bind="{items}" />
 
       <!-- New button -->
-      <v-btn v-if="newLink" class="ot-white--text ot-green float-right">
+      <v-btn v-if="newLink" class="ot-white--text primary float-right">
         <NuxtLink :to="newLink" class="no-decoration">
           <v-icon>fa-plus-circle</v-icon>
           <span>{{$t('add')}}</span>

components/Ui/ExpansionPanel.vue

@@ -6,9 +6,9 @@ Panneaux déroulants de type "accordéon"
 
 <template>
   <v-expansion-panel :value="title">
-    <v-expansion-panel-title color="ot-light-grey">
+    <v-expansion-panel-title color="neutral">
       <template v-slot:default="{ expanded }">
-        <v-icon class="text-ot-white bg-ot-green icon">
+        <v-icon class="text-ot-white bg-primary icon">
           {{ icon }}
         </v-icon>
         {{ $t(title) }}

components/Ui/Form.vue

@@ -60,10 +60,10 @@ Formulaire générique
         </v-card-text>
       </template>
       <template #dialogBtn>
-        <v-btn class="mr-4 submitBtn ot-green ot-white--text" @click="closeDialog">
+        <v-btn class="mr-4 submitBtn primary ot-white--text" @click="closeDialog">
           {{ $t('back_to_form') }}
         </v-btn>
-        <v-btn class="mr-4 submitBtn ot-green ot-white--text" @click="saveAndQuit">
+        <v-btn class="mr-4 submitBtn primary ot-white--text" @click="saveAndQuit">
           {{ $t('save_and_quit') }}
         </v-btn>
         <v-btn class="mr-4 submitBtn ot-danger ot-white--text" @click="quitForm">

components/Ui/Image.vue

@@ -139,11 +139,11 @@ onUnmounted(() => {
       transition: all .2s;
       &:hover{
         opacity: 1;
-        background:rgba(0,0,0,0.3);
+        background:rgba(0,0,0,0.3);  /* !color! */
         cursor: pointer;
       }
       i{
-        color: #fff;
+        color: #fff;  /* !color! */
         position: absolute;
         top: 50%;
         left: 50%;
@@ -152,7 +152,7 @@ onUnmounted(() => {
         z-index: 1;
         opacity: 1;
         &:hover{
-          color: rgba(#3fb37f, 0.7);
+          color: rgba(#3fb37f, 0.7);   /* !color! */
         }
       }
     }

components/Ui/Input/DatePicker.vue

@@ -35,7 +35,7 @@ Sélecteur de dates
       <v-date-picker
           v-model="datesParsed"
           :range="range"
-          color="ot-green lighten-1"
+          color="primary lighten-1"
           @input="dateOpen = range && datesParsed.length < 2"
       />
     </v-menu>

components/Ui/Input/Image.vue

@@ -46,7 +46,7 @@ https://norserium.github.io/vue-advanced-cropper/
         </div>
       </template>
       <template #dialogBtn>
-        <v-btn class="mr-4 submitBtn ot-grey ot-white--text" @click="$emit('close')">
+        <v-btn class="mr-4 submitBtn neutral-strong ot-white--text" @click="$emit('close')">
           {{ $t('cancel') }}
         </v-btn>
         <v-btn class="mr-4 submitBtn ot-danger ot-white--text" @click="save">
@@ -242,7 +242,7 @@ onUnmounted(() => {
     padding: 20px;
     display: block;
     &__cropper {
-       border: solid 1px #eee;
+       border: solid 1px #eee;   /* !color! */
        min-height: 500px;
        max-height: 500px;
      }
@@ -259,10 +259,10 @@ onUnmounted(() => {
       justify-content: center;
       height: 42px;
       width: 42px;
-      background: rgba(#3fb37f, 0.7);
+      background: rgba(#3fb37f, 0.7);   /* !color! */
       transition: background 0.5s;
       &:hover {
-        background: #3fb37f;
+        background: #3fb37f;   /* !color! */
       }
     }
     &__buttons-wrapper {
@@ -276,13 +276,13 @@ onUnmounted(() => {
        color: white;
        font-size: 16px;
        padding: 10px 20px;
-       background: #3fb37f;
+       background: #3fb37f;   /* !color! */
        cursor: pointer;
        transition: background 0.5s;
        margin: 0 16px;
       &:hover,
       &:focus {
-         background: #38d890;
+         background: #38d890;   /* !color! */
        }
       input {
         display: none;

components/Ui/Input/Phone.vue

@@ -102,6 +102,6 @@ const rules = [
 
 <style>
 input:read-only{
-  color: #666 !important;
+  color: #666 !important;   /* !color! */
 }
 </style>

components/Ui/Input/Text.vue

@@ -125,6 +125,6 @@ const show = ref(false)
 
 <style scoped>
   input:read-only{
-    color: #666 !important;
+    color: #666 !important;   /* !color! */
   }
 </style>

components/Ui/Input/TextArea.vue

@@ -68,6 +68,6 @@ const {violation, onChange} = useFieldViolation(props.field, emit)
 
 <style>
   input:read-only{
-    color: #666 !important;
+    color: #666 !important;   /* !color! */
   }
 </style>

components/Ui/SystemBar.vue

@@ -30,12 +30,12 @@ System bars
     backgroundColor: {
       type: String,
       required: false,
-      default: '#eeeeee'
+      default: '#eeeeee'   // !color!
     },
     textColor: {
       type: String,
       required: false,
-      default: '#5f5f5f'
+      default: '#5f5f5f'   // !color!
     },
     onClick: {
       type: Function,

components/Ui/Xeditable/Text.vue

@@ -18,14 +18,14 @@ Utilisé par exemple pour le choix de l'année active
       <v-icon
           icon="fas fa-check"
           aria-hidden="false"
-          class="valid icons text-ot-green"
+          class="valid icons text-primary"
           size="small"
           @click="update"
       />
       <v-icon
           icon="fas fa-times"
           aria-hidden="false"
-          class="cancel icons text-ot-grey"
+          class="cancel icons text-neutral-strong"
           size="small"
           @click="close"
       />

doc/colors.md

@@ -1,29 +1,79 @@
 
+## Définition des couleurs de l'UI
+
+### Conception des thèmes 
+
+Les couleurs qui caractérisent les thèmes sont découpées en 5 catégories:
+
+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 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])`
+
+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 :
+
+| Catégorie          | Identifiant       |
+|--------------------|-------------------|
+| Globales           | `global-[color]`  |
+| Header             | `header-[color]`  |
+| Menu Lateral       | `menu-[color]`    |
+| Contenu de la page | `page-[color]`    |
+| Cas particuliers   | `special-[color]` |
+
+
+##### Suffixe (optionnel)
+
+Enfin, un éventuel suffixe :
+
+| Suffixe | Signification                                                    |
+|---------|------------------------------------------------------------------|
+| `-alt`  | Couleur alternative, typiquement affichée au survol de la souris |
+
+
+
+
+### Configuration et utilisation
+
 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                                             |
+| global-primary        | Couleur principale, utilisée pour le header, les boutons submit, les notifications, les liens de type actions dans les menus, les liens, etc. |
+| global-primary-alt    | Une variante atténuée de la couleur principale, utilisée par exemple pour mettre en surbrillance des éléments au survol                       |
+| global-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                           |
+| global-secondary-alt  | Variante de la couleur secondary, utilisée entre autres pour le fond des liens du menu lateral au survol                                      |
+| global-neutral-strong | Couleur de fond de certains boutons comme les boutons Annuler, et fond de certains encarts                                                    |
+| global-neutral        | Couleur de fond du subheader, des en-têtes des accordéons, du calendrier, des datatables, des boutons d'action                                |
+| global-neutral-soft  | Couleur 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
+
+

pages/organization/index.vue

@@ -372,7 +372,7 @@ Contient toutes les informations sur l'organization courante
 <!--                    loaderType="text"-->
 <!--                  >-->
 <!--                    <template #list.item="{items}">-->
-<!--                      <h4 class="ot-grey&#45;&#45;text font-weight-regular">{{$t('organizationArticle')}}</h4>-->
+<!--                      <h4 class="neutral-strong&#45;&#45;text font-weight-regular">{{$t('organizationArticle')}}</h4>-->
 <!--                      <UiTemplateDataTable-->
 <!--                        :headers="[-->
 <!--                          { text: $t('title'), value: 'title' },-->

pages/poc.vue

@@ -12,6 +12,6 @@
 
 <style scoped lang="scss">
   h1 {
-    color: rgb(var(--v-theme-ot-green))
+    color: rgb(var(--v-theme-primary))
   }
 </style>

pages/subscription.vue

@@ -327,10 +327,10 @@ Page 'Mon abonnement'
 
     .v-col {
       min-width: 260px;
-      border: solid 1px #e0e0e0;
+      border: solid 1px #e0e0e0;   /* !color! */
 
       .v-row:nth-child(1) {
-        background: rgb(var(--v-theme-ot-green));
+        background: rgb(var(--v-theme-primary));
         height: 64px;
         color: white;
         font-size: 15px;
@@ -359,7 +359,7 @@ Page 'Mon abonnement'
     .v-row {
       padding: 12px 18px;
       vertical-align: top;
-      border-bottom: solid 1px #e0e0e0;
+      border-bottom: solid 1px #e0e0e0;   /* !color! */
     }
     .v-row:last-child {
       border: none;

plugins/vuetify.ts

@@ -22,21 +22,42 @@ export default defineNuxtPlugin(nuxtApp => {
                         /**
                          * @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
+                        // Global
+                        'primary': '#00ad8e',
+                        'n-primary': '#ffffff',
+
+                        'primary-alt': '#a9e0d6',
+                        'n-primary-alt': '#777777',
+
+                        'secondary': '#324150',
+                        'n-secondary': '#ffffff',
+
+                        'secondary-alt': '#2c3a48',
+                        'n-secondary-alt': '#ffffff',
+
+                        'neutral-strong': '#777777',
+                        'n-neutral-strong': '#ecf0f5',
+
+                        'neutral': '#f5f5f5',
+                        'n-neutral': '#767676',
+
+                        'neutral-soft': '#ecf0f5',
+                        'n-neutral-soft': '#464646',
+
+                        // Content
+                        'ot-danger': '#f56954',
+                        'n-ot-danger': '#ffffff',
+
+                        'ot-success': '#00a65a',
+                        'n-ot-success': '#ffffff',
+
+                        'ot-warning': '#f39c12',
+                        'n-ot-warning': '#ffffff',
+
+                        'ot-info': '#3c8dbc',
+                        'n-ot-info': '#ffffff',
+
+                        // Special
                         'ot-white': '#ffffff',  // ot-white
                         'ot-black': '#000000'  // ot-black
                     }