add new themes global css rules and integrate it

assets/css/global.scss

@@ -3,6 +3,58 @@
  *
  * Quand c'est possible, préférer les règles par page, layout ou composant
  */
+
+.theme-primary {
+  background-color: rgb(var(--v-theme-primary)) !important;
+  color: rgb(var(--v-theme-n-primary)) !important;
+}
+
+.theme-secondary {
+  background-color: rgb(var(--v-theme-secondary)) !important;
+  color: rgb(var(--v-theme-n-secondary)) !important;
+}
+
+.theme-neutral-strong {
+  background-color: rgb(var(--v-theme-neutral-strong)) !important;
+  color: rgb(var(--v-theme-n-neutral-strong)) !important;
+}
+
+.theme-neutral {
+  background-color: rgb(var(--v-theme-neutral)) !important;
+  color: rgb(var(--v-theme-n-neutral)) !important;
+}
+
+.theme-neutral-soft {
+  background-color: rgb(var(--v-theme-neutral-soft)) !important;
+  color: rgb(var(--v-theme-n-neutral-soft)) !important;
+}
+
+.theme-danger {
+  background-color: rgb(var(--v-theme-danger)) !important;
+  color: rgb(var(--v-theme-n-danger)) !important;
+}
+
+.theme-success {
+  background-color: rgb(var(--v-theme-success)) !important;
+  color: rgb(var(--v-theme-n-success)) !important;
+}
+
+.theme-warning {
+  background-color: rgb(var(--v-theme-warning)) !important;
+  color: rgb(var(--v-theme-n-warning)) !important;
+}
+
+.theme-info {
+  background-color: rgb(var(--v-theme-info)) !important;
+  color: rgb(var(--v-theme-n-info)) !important;
+}
+
+.theme-x-create-btn {
+  background-color: rgb(var(--v-theme-x-create-btn)) !important;
+  color: rgb(var(--v-theme-n-x-create-btn)) !important;
+}
+
+
 // TODO: voir si certaines de ces règles ne devraient pas être rapatriées dans des pages, layouts, components
 
 header .v-toolbar__content {

components/Layout/AlertBar/Cotisation.vue

@@ -12,8 +12,7 @@ Barre d'alerte qui s'affiche pour donner l'état de la cotisation
         :text="$t(alert.text)"
         icon="fas fa-info-circle"
         :on-click="alert.callback"
-        background-color="ot-info"
-        text-color="ot-white"
+        class="theme-info"
     />
   </main>
 </template>

components/Layout/AlertBar/Env.vue

@@ -9,8 +9,8 @@ Barre d'alerte qui s'affiche lorsque l'utilisateur n'est pas dans un environneme
       v-if="show"
       :text="$t('not_production_environment', { env: env })"
       icon="fas fa-exclamation-triangle"
-      background-color="ot-warning"
-      text-color="ot-white" />
+      class="theme-warning"
+  />
 </template>
 
 <script setup lang="ts">

components/Layout/AlertBar/SuperAdmin.vue

@@ -6,11 +6,11 @@ Barre d'alerte qui s'affiche lorsque l'utilisateur est un super admin en mode sw
 
 <template>
   <!-- TODO : fonctionnement à valider -->
-  <UiSystemBar v-if="show" text-color="ot-danger">
+  <UiSystemBar v-if="show" text-color="danger">
     <v-icon small>fas fa-exclamation-triangle</v-icon>
     <span>{{ $t('super_admin_switch_account') }}</span>
 
-    <a v-if="url" :href="url" class="text-ot-black text-decoration-none">
+    <a v-if="url" :href="url" class="text-neutral-strong text-decoration-none">
       <strong>{{ $t('click_here') }}</strong>
     </a>
   </UiSystemBar>

components/Layout/AlertBar/SwitchUser.vue

@@ -6,7 +6,7 @@ Barre qui s'affiche lorsque l'utilisateur possède un compte multi user
 
 <template>
   <!-- TODO : fonctionnement à valider -->
-  <UiSystemBar v-if="show" text-color="ot-info">
+  <UiSystemBar v-if="show" text-color="info">
     <v-icon small icon="fas fa-info-circle" />
     <span v-html="$t('multi_account_alert', { fullname })" />
     <v-icon class="ml-1" small icon="fa fa-users" />

components/Layout/AlertBar/SwitchYear.vue

@@ -6,11 +6,11 @@ Barre d'alerte qui s'affiche lorsque l'utilisateur n'est pas sur l'année couran
 
 <template>
   <!-- TODO : fonctionnement à valider -->
-  <UiSystemBar v-if="show" text-color="ot-warning">
+  <UiSystemBar v-if="show" text-color="warning">
     {{$t('not_current_year')}}
 
     <a @click="resetYear">
-      <strong class="text-ot-black">
+      <strong class="text-neutral-strong">
         {{$t('not_current_year_reset')}}
       </strong>
     </a>

components/Layout/BannerTop.vue

@@ -1,14 +1,17 @@
-<!-- Troisième bandeau en partant du haut, contenant entre autre le numéro SIRET de l'organisation -->
+<!--
+Troisième bandeau en partant du haut, contenant entre autre le numéro SIRET de l'organisation
+-->
+<!-- TODO: voir si possible de trouver un nom plus spécifique -->
 
 <template>
   <v-row justify="center" align="center" class="bannerTopForm">
-    <v-col cols="3" class="ot-dark_grey ot-white--text">
+    <v-col cols="3" class="theme-neutral-strong">
       <slot name="block1" />
     </v-col>
-    <v-col cols="6" class="ot-white neutral-strong--text">
+    <v-col cols="6" class="theme-neutral">
       <slot name="block2" />
     </v-col>
-    <v-col cols="3" class="ot-light_grey neutral-strong--text">
+    <v-col cols="3" class="theme-neutral-soft">
       <slot name="block3" />
     </v-col>
   </v-row>

components/Layout/Dialog.vue

@@ -77,13 +77,13 @@ const props = defineProps({
 
   .modal-level-alert {
     .dialog-type{
-      background: rgb(var(--v-theme-ot-danger, #f56954));
+      background: rgb(var(--v-theme-danger, #f56954));
     }
   }
 
   .modal-level-warning {
     .dialog-type{
-      background: rgb(var(--v-theme-ot-warning, #f39c12));
+      background: rgb(var(--v-theme-warning, #f39c12));
     }
   }
 </style>

components/Layout/Header.vue

@@ -7,13 +7,13 @@ 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-primary text-ot-white"
+      class="theme-primary"
   >
     <template #prepend>
       <v-app-bar-nav-icon
           v-if="hasMainMenu"
           :icon="isMainMenuOpened ? 'mdi:mdi-menu-open' : 'mdi:mdi-menu'"
-          class="text-ot-white"
+          class="text-n-primary"
           @click="toggleMainMenu"
       />
     </template>
@@ -38,11 +38,11 @@ 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-secondary text-ot-white text-decoration-none"
+        class="text-body pa-3 ml-2 theme-secondary text-decoration-none"
         target="_blank"
     >
       <span class="d-none d-sm-none d-md-flex">{{ $t('help_access') }}</span>
-      <v-icon icon="fas fa-question-circle" class="d-sm-flex d-md-none" color="white" />
+      <v-icon icon="fas fa-question-circle" class="d-sm-flex d-md-none" color="n-secondary" />
     </a>
   </v-app-bar>
 </template>

components/Layout/Header/HomeBtn.vue

@@ -5,7 +5,7 @@
         icon="fas fa-home"
         size="small"
         :href="homeUrl"
-        class="ml-2 text-ot-white"
+        class="ml-2 text-n-primary"
     />
     <v-tooltip :activator="btn" :text="$t('welcome')" location="bottom" />
   </div>

components/Layout/Header/Menu.vue

@@ -26,7 +26,7 @@ header principal (configuration, paramètres du compte...)
       <v-icon
           v-else
           :icon="menu.icon.name"
-          class="text-ot-white"
+          class="text-n-primary"
       />
     </v-btn>
 
@@ -42,7 +42,7 @@ header principal (configuration, paramètres du compte...)
         @update:modelValue="onStateUpdated"
     >
       <v-card>
-        <v-card-title class="bg-neutral text-body-2 font-weight-bold">
+        <v-card-title class="theme-neutral text-body-2 font-weight-bold">
           {{$t(menu.label)}}
         </v-card-title>
 
@@ -59,7 +59,7 @@ header principal (configuration, paramètres du compte...)
                       <v-avatar v-if="menu.icon.avatarId || child.icon.avatarByDefault" size="30">
                         <UiImage :id="child.icon.avatarId" :defaultImage="child.icon.avatarByDefault" :width="30"></UiImage>
                       </v-avatar>
-                      <v-icon v-else class="text-ot-white" size="small">
+                      <v-icon v-else class="text-n-primary" size="small">
                         {{ child.icon.name }}
                       </v-icon>
                     </span>

components/Layout/Header/Notification.vue

@@ -11,7 +11,7 @@
         offset-y="17"
         :model-value="unreadNotification.length > 0"
         :content="unreadNotification.length">
-      <v-icon class="text-ot-white">
+      <v-icon class="text-n-primary">
         fa fa-bell
       </v-icon>
     </v-badge>
@@ -83,7 +83,7 @@
           style="width: 100%; height: 52px;"
         >
           <v-list-item-title
-              class="text-body-2 text-ot-white"
+              class="text-body-2 text-n-primary"
               v-text="$t('all_notification')"
           />
         </v-list-item>

components/Layout/Header/UniversalCreation/CreateButton.vue

@@ -6,7 +6,7 @@ bouton Créer
   <main>
     <v-btn
       elevation="2"
-      class="bg-ot-warning text-ot-white"
+      class="theme-x-create-btn"
       @click="showDialog=true"
     >
       {{ $t('create') }}
@@ -31,7 +31,7 @@ bouton Créer
       <template #dialogBtn>
         <div class="text-center">
           <v-btn
-            class="bg-ot-super-light-grey text-ot-black"
+            class="bg-ot-super-light-grey text-neutral-strong"
             @click="showDialog=false; step=1; type='home'"
           >
             {{ $t('cancel') }}
@@ -39,7 +39,7 @@ bouton Créer
 
           <v-btn
             v-if="step > 1"
-            class="bg-ot-super-light-grey text-ot-black"
+            class="theme-neutral-soft"
             @click="step=1; type='home'"
           >
             {{ $t('previous') }}

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-secondary text-neutral main-menu"
+      class="theme-secondary main-menu"
   >
     <template #prepend>
       <slot name="title"></slot>
@@ -19,6 +19,7 @@ Prend en paramètre une liste de ItemMenu et les met en forme
         active-class="active"
         class="left-menu"
     >
+      <!-- TODO: que se passe-t-il si le menu ne comprend qu'un seul MenuItem? -->
       <div v-for="(item, i) in menu.children" :key="i">
 
         <!-- Cas 1 : l'item n'a pas d'enfants, c'est un lien -->
@@ -29,7 +30,6 @@ 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-neutral"
           height="48px"
         ></v-list-item>
 
@@ -38,7 +38,6 @@ 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-neutral"
           v-model="item.expanded"
         >
           <template #activator="{ props }">
@@ -46,7 +45,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-neutral"
+                class="theme-secondary"
                 height="48px"
             ></v-list-item>
           </template>
@@ -60,7 +59,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-neutral-soft"
+            class="theme-secondary-alt"
           ></v-list-item>
         </v-list-group>
       </div>
@@ -159,11 +158,15 @@ onUnmounted(() => {
   :deep(.v-list-group__items .v-list-item)
   {
     border-left: 3px solid rgb(var(--v-theme-primary));
-    background: rgb(var(--v-theme-secondary-alt));
+    background-color: rgb(var(--v-theme-secondary-alt));
   }
 
   :deep(.v-list-group__items .v-list-item-title) {
-    color: rgb(var(--v-theme-ot-white));
+    color: rgb(var(--v-theme-n-secondary-alt));
+  }
+
+  :deep(.v-list-group__items .v-icon) {
+    color: rgb(var(--v-theme-n-secondary-alt));
   }
 
   :deep(.v-list-item .v-icon) {

components/Ui/Button/Delete.vue

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

components/Ui/Button/Submit.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-btn class="mr-4 primary ot-white--text" :class="hasOtherActions ? 'pr-0' : ''" @click="submitAction(mainAction)" ref="mainBtn">
+  <v-btn class="mr-4 theme-primary" :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 primary float-right">
+      <v-btn v-if="newLink" class="theme-primary float-right">
         <NuxtLink :to="newLink" class="no-decoration">
           <v-icon>fa-plus-circle</v-icon>
           <span>{{$t('add')}}</span>

components/Ui/ExpansionPanel.vue

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

components/Ui/Form.vue

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

components/Ui/Input/Image.vue

@@ -46,10 +46,10 @@ https://norserium.github.io/vue-advanced-cropper/
         </div>
       </template>
       <template #dialogBtn>
-        <v-btn class="mr-4 submitBtn neutral-strong ot-white--text" @click="$emit('close')">
+        <v-btn class="mr-4 submitBtn theme-neutral-strong" @click="$emit('close')">
           {{ $t('cancel') }}
         </v-btn>
-        <v-btn class="mr-4 submitBtn ot-danger ot-white--text" @click="save">
+        <v-btn class="mr-4 submitBtn theme-danger" @click="save">
           {{ $t('save') }}
         </v-btn>
       </template>

doc/colors.md

@@ -51,29 +51,19 @@ Enfin, un éventuel suffixe :
 Les couleurs du ou des thèmes sont enregistrées dans plugins/vuetify.ts
 
 
-| Nom                   | Usage                                                                                                                                         |
-|-----------------------|-----------------------------------------------------------------------------------------------------------------------------------------------|
-| 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-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
+| 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                                                                                                     |
+
 
 

pages/organization/index.vue

@@ -180,13 +180,13 @@ Contient toutes les informations sur l'organization courante
 <!--                              </template>-->
 <!--                              <template #card.text>-->
 <!--                                <span v-if="item.email"><strong>{{ $t('email') }}</strong> : {{ item.email }} <br></span>-->
-<!--                                <span v-if="item.emailInvalid" class="ot-danger&#45;&#45;text"><v-icon class="ot-danger&#45;&#45;text">mdi-alert</v-icon> <strong>{{ $t('emailInvalid') }}</strong> : {{ item.emailInvalid }} <br></span>-->
+<!--                                <span v-if="item.emailInvalid" class="danger&#45;&#45;text"><v-icon class="danger&#45;&#45;text">mdi-alert</v-icon> <strong>{{ $t('emailInvalid') }}</strong> : {{ item.emailInvalid }} <br></span>-->
 
 <!--                                <span v-if="item.telphone"><strong>{{ $t('telphone') }}</strong> : {{ formatPhoneNumber(item.telphone) }} <br></span>-->
-<!--                                <span v-if="item.telphoneInvalid" class="ot-danger&#45;&#45;text"><v-icon class="ot-danger&#45;&#45;text">mdi-alert</v-icon> <strong>{{ $t('telphoneInvalid') }}</strong> : {{ formatPhoneNumber(item.telphoneInvalid) }} <br></span>-->
+<!--                                <span v-if="item.telphoneInvalid" class="danger&#45;&#45;text"><v-icon class="danger&#45;&#45;text">mdi-alert</v-icon> <strong>{{ $t('telphoneInvalid') }}</strong> : {{ formatPhoneNumber(item.telphoneInvalid) }} <br></span>-->
 
 <!--                                <span v-if="item.mobilPhone"><strong>{{ $t('mobilPhone') }}</strong> : {{ formatPhoneNumber(item.mobilPhone) }} <br></span>-->
-<!--                                <span v-if="item.mobilPhoneInvalid" class="ot-danger&#45;&#45;text"><v-icon class="ot-danger&#45;&#45;text">mdi-alert</v-icon> <strong>{{ $t('mobilPhoneInvalid') }}</strong> : {{ formatPhoneNumber(item.mobilPhoneInvalid) }} </span>-->
+<!--                                <span v-if="item.mobilPhoneInvalid" class="danger&#45;&#45;text"><v-icon class="danger&#45;&#45;text">mdi-alert</v-icon> <strong>{{ $t('mobilPhoneInvalid') }}</strong> : {{ formatPhoneNumber(item.mobilPhoneInvalid) }} </span>-->
 <!--                              </template>-->
 <!--                            </UiCard>-->
 <!--                          </v-col>-->
@@ -421,10 +421,10 @@ Contient toutes les informations sur l'organization courante
 <!--                                <span v-if="item.bankName"><strong>{{ $t('bankName') }}</strong> : {{ item.bankName }} <br></span>-->
 
 <!--                                <span v-if="item.bic"><strong>{{ $t('bic') }}</strong> : {{ item.bic }} <br></span>-->
-<!--                                <span v-if="item.bicInvalid" class="ot-danger&#45;&#45;text"><v-icon class="ot-danger&#45;&#45;text">mdi-alert</v-icon> <strong>{{ $t('bicInvalid') }}</strong> : {{ item.bicInvalid }} <br></span>-->
+<!--                                <span v-if="item.bicInvalid" class="danger&#45;&#45;text"><v-icon class="danger&#45;&#45;text">mdi-alert</v-icon> <strong>{{ $t('bicInvalid') }}</strong> : {{ item.bicInvalid }} <br></span>-->
 
 <!--                                <span v-if="item.iban"><strong>{{ $t('iban') }}</strong> : {{ item.iban }} <br></span>-->
-<!--                                <span v-if="item.ibanInvalid" class="ot-danger&#45;&#45;text"><v-icon class="ot-danger&#45;&#45;text">mdi-alert</v-icon> <strong>{{ $t('ibanInvalid') }}</strong> : {{ item.ibanInvalid }} <br></span>-->
+<!--                                <span v-if="item.ibanInvalid" class="danger&#45;&#45;text"><v-icon class="danger&#45;&#45;text">mdi-alert</v-icon> <strong>{{ $t('ibanInvalid') }}</strong> : {{ item.ibanInvalid }} <br></span>-->
 
 <!--                              </template>-->
 <!--                            </UiCard>-->

plugins/vuetify.ts

@@ -30,7 +30,7 @@ export default defineNuxtPlugin(nuxtApp => {
                         'n-primary-alt': '#777777',
 
                         'secondary': '#324150',
-                        'n-secondary': '#ffffff',
+                        'n-secondary': '#f5f5f5',
 
                         'secondary-alt': '#2c3a48',
                         'n-secondary-alt': '#ffffff',
@@ -45,21 +45,22 @@ export default defineNuxtPlugin(nuxtApp => {
                         'n-neutral-soft': '#464646',
 
                         // Content
-                        'ot-danger': '#f56954',
-                        'n-ot-danger': '#ffffff',
+                        'danger': '#f56954',
+                        'n-danger': '#ffffff',
 
-                        'ot-success': '#00a65a',
-                        'n-ot-success': '#ffffff',
+                        'success': '#00a65a',
+                        'n-success': '#ffffff',
 
-                        'ot-warning': '#f39c12',
-                        'n-ot-warning': '#ffffff',
+                        'warning': '#f39c12',
+                        'n-warning': '#ffffff',
 
-                        'ot-info': '#3c8dbc',
-                        'n-ot-info': '#ffffff',
+                        'info': '#3c8dbc',
+                        'n-info': '#ffffff',
 
-                        // Special
-                        'ot-white': '#ffffff',  // ot-white
-                        'ot-black': '#000000'  // ot-black
+                        // Special cases
+                        // TODO: remove as soon as possible
+                        'x-create-btn': '#f39c12',
+                        'n-x-create-btn': '#ffffff',
                     }
                 }
             },