replace all hardcoded colors by theme variables

components/Layout/Dialog.vue

@@ -7,14 +7,14 @@
     :content-class="contentClass"
   >
     <v-card class="d-flex flex-row">
-      <div class="dialog-type flex-column justify-center d-none d-sm-flex">
+      <div :class="'dialog-type flex-column justify-center d-none d-sm-flex theme-' + theme">
         <h3 class="d-flex">
           <slot name="dialogType" />
         </h3>
       </div>
 
       <div class="dialog-container d-flex flex-column flex-grow-1">
-        <v-card-title class="dialog-title">
+        <v-card-title class="dialog-title ">
           <slot name="dialogTitle" />
         </v-card-title>
 
@@ -34,8 +34,6 @@
 </template>
 
 <script setup lang="ts">
-import {useDisplay} from "vuetify";
-
 const props = defineProps({
   show: {
     type: Boolean,
@@ -44,20 +42,22 @@ const props = defineProps({
   contentClass: {
     type: String,
     required: false
+  },
+  theme: {
+    type: String,
+    required: false,
+    default: 'primary',
   }
 })
 </script>
 
 <style lang="scss" scoped>
   .dialog-title {
-    background: #e6e6e6;  /* !color! */
     padding-left: 40px;
     font-weight: normal;
   }
 
   .dialog-type {
-    background: rgb(var(--v-theme-primary, #00AD8E));
-    color: #fff;  /* !color! */
     width: 50px;
     min-height: 400px;
     padding: 25px 10px;

components/Layout/Header/Menu.vue

@@ -73,7 +73,7 @@ header principal (configuration, paramètres du compte...)
           </v-list>
         </v-card-text>
 
-        <v-card-actions v-if="menu.actions.length > 0" class="ma-0 pa-0 actions">
+        <v-card-actions v-if="menu.actions.length > 0" class="ma-0 pa-0 theme-primary">
           <template v-for="(action, index) in menu.actions" :key="index">
             <v-list-item
                 :id="action.label"
@@ -118,10 +118,3 @@ const onStateUpdated = (e: any) => {
 const btn = ref(null)
 
 </script>
-
-<style scoped lang="scss">
-  .actions {
-    background: rgb(var(--v-theme-primary));
-    color: white;
-  }
-</style>

components/Layout/Header/Notification.vue

@@ -6,7 +6,7 @@
       size="small"
   >
     <v-badge
-        color="orange"
+        color="warning"
         offset-x="-4"
         offset-y="17"
         :model-value="unreadNotification.length > 0"
@@ -69,21 +69,21 @@
         >
           <v-progress-circular
             indeterminate
-            color="grey lighten-1"
+            color="neutral"
           />
         </v-row>
       </v-card-text>
 
       <v-card-actions class="ma-0 pa-0">
         <v-list-item
-          id="all_notifications"
           :key="$t('all_notification')"
           :href="notificationUrl"
           router
+          class="theme-primary"
           style="width: 100%; height: 52px;"
         >
           <v-list-item-title
-              class="text-body-2 text-n-primary"
+              class="text-body-2"
               v-text="$t('all_notification')"
           />
         </v-list-item>
@@ -253,10 +253,6 @@ const notificationUrl = UrlUtils.join(runtimeConfig.baseUrlAdminLegacy, 'notific
 </script>
 
 <style scoped lang="scss">
-  #all_notifications{
-    background: rgb(var(--v-theme-primary, white));
-    color: white;
-  }
   .list_item{
     white-space: normal;
   }

components/Layout/Header/UniversalCreation/CreateButton.vue

@@ -31,7 +31,7 @@ bouton Créer
       <template #dialogBtn>
         <div class="text-center">
           <v-btn
-            class="bg-ot-super-light-grey text-neutral-strong"
+            class="theme-neutral-soft"
             @click="showDialog=false; step=1; type='home'"
           >
             {{ $t('cancel') }}

components/Layout/Header/UniversalCreation/GenerateCardsSteps.vue

@@ -221,7 +221,7 @@
         font-size: 13px;
         padding: 0;
         margin: 0;
-        color: #767676;  /* !color! */
+        color: var(--v-theme-neutral);
       }
     }
     &>div{

components/Layout/Header/UniversalCreation/TypeCard.vue

@@ -77,7 +77,7 @@
       font-size: 13px;
       padding: 0;
       margin: 0;
-      color: #767676;   /* !color! */
+      color: var(--v-theme-neutral);
     }
   }
 

components/Layout/SubHeader/DataTiming.vue

@@ -1,7 +1,6 @@
 <template>
   <main class="d-flex align-baseline">
-    <span v-show="mdAndUp" class="mr-2 text-ot-dark_grey font-weight-bold">{{ $t('display_data') }} : </span>
-
+    <span v-show="mdAndUp" class="mr-2 text-neutral-strong font-weight-bold">{{ $t('display_data') }} : </span>
     <v-btn-toggle
       ref="toggle"
       :model-value="historicalValue"

components/Layout/SubHeader/DataTimingRange.vue

@@ -91,14 +91,10 @@ if (accessProfileStore.historical.dateStart || accessProfileStore.historical.dat
 </script>
 
 <style scoped lang="scss">
-.v-btn--active .v-icon {
-  color: #FFF !important;  /* !color! */
-}
-
 .time-btn {
   border-width: 1px 1px 1px 0;
   border-style: solid;
-  border-color: rgba(0, 0, 0, 0.12) !important;  /* !color! */
+  border-color: rgb(var(--v-theme-neutral-strong)) !important;
 }
 
 .data-timing-range {

components/Ui/Form.vue

@@ -51,7 +51,7 @@ Formulaire générique
       :show="showDialog"
     >
       <template #dialogText>
-        <v-card-title class="text-h5 grey lighten-2">
+        <v-card-title class="text-h5 theme-neutral">
           {{ $t('caution') }}
         </v-card-title>
         <v-card-text>

components/Ui/Image.vue

@@ -24,7 +24,7 @@ Si la propriété 'upload' est à 'true', propose aussi un input pour uploader u
           >
             <v-progress-circular
               :indeterminate="true"
-              color="grey lighten-1"
+              color="neutral"
             />
           </v-row>
         </template>
@@ -125,10 +125,12 @@ onUnmounted(() => {
   div.image-wrapper {
     display: block;
     position: relative;
-    img{
+
+    img {
       max-width: 100%;
     }
-    .click-action{
+
+    .click-action {
       position: absolute;
       top:0;
       left:0;
@@ -137,13 +139,13 @@ onUnmounted(() => {
       background: transparent;
       opacity: 0;
       transition: all .2s;
-      &:hover{
+      &:hover {
         opacity: 1;
-        background:rgba(0,0,0,0.3);  /* !color! */
+        background: rgb(var(--v-theme-neutral-strong));
         cursor: pointer;
       }
-      i{
-        color: #fff;  /* !color! */
+      i {
+        color: rgb(var(--v-theme-n-neutral-strong));
         position: absolute;
         top: 50%;
         left: 50%;
@@ -152,7 +154,7 @@ onUnmounted(() => {
         z-index: 1;
         opacity: 1;
         &:hover{
-          color: rgba(#3fb37f, 0.7);   /* !color! */
+          color: rgb(var(--v-theme-primary-alt));
         }
       }
     }

components/Ui/Input/Image.vue

@@ -16,7 +16,7 @@ https://norserium.github.io/vue-advanced-cropper/
           >
             <v-progress-circular
               :indeterminate="true"
-              color="grey lighten-1">
+              color="neutral">
             </v-progress-circular>
           </v-row>
 
@@ -242,7 +242,7 @@ onUnmounted(() => {
     padding: 20px;
     display: block;
     &__cropper {
-       border: solid 1px #eee;   /* !color! */
+       border: solid 1px rgb(var(--v-theme-n-neutral-strong));;
        min-height: 500px;
        max-height: 500px;
      }
@@ -259,10 +259,10 @@ onUnmounted(() => {
       justify-content: center;
       height: 42px;
       width: 42px;
-      background: rgba(#3fb37f, 0.7);   /* !color! */
+      background: rgb(var(--v-theme-neutral));
       transition: background 0.5s;
       &:hover {
-        background: #3fb37f;   /* !color! */
+        background: rgb(var(--v-theme-primary-alt));
       }
     }
     &__buttons-wrapper {
@@ -273,16 +273,16 @@ onUnmounted(() => {
     &__button {
        border: none;
        outline: solid transparent;
-       color: white;
+       color: rgb(var(--v-theme-n-neutral));
        font-size: 16px;
        padding: 10px 20px;
-       background: #3fb37f;   /* !color! */
+       background: rgb(var(--v-theme-neutral));
        cursor: pointer;
        transition: background 0.5s;
        margin: 0 16px;
       &:hover,
       &:focus {
-         background: #38d890;   /* !color! */
+         background: rgb(var(--v-theme-primary-alt));
        }
       input {
         display: none;

components/Ui/Input/Phone.vue

@@ -100,8 +100,8 @@ const rules = [
 ]
 </script>
 
-<style>
+<style lang="scss">
 input:read-only{
-  color: #666 !important;   /* !color! */
+  color: rgb(var(--v-theme-n-neutral));
 }
 </style>

components/Ui/Input/Text.vue

@@ -123,8 +123,8 @@ const show = ref(false)
 
 </script>
 
-<style scoped>
+<style scoped lang="scss">
   input:read-only{
-    color: #666 !important;   /* !color! */
+    color: rgb(var(--v-theme-neutral));
   }
 </style>

components/Ui/Input/TextArea.vue

@@ -66,8 +66,8 @@ const {violation, onChange} = useFieldViolation(props.field, emit)
 
 </script>
 
-<style>
+<style lang="scss">
   input:read-only{
-    color: #666 !important;   /* !color! */
+    color: rgb(var(--v-theme-n-neutral));
   }
 </style>

components/Ui/SystemBar.vue

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

pages/poc/display.vue

@@ -32,7 +32,7 @@ const { data: file, pending, refresh } = fetch(File, 1)
 
 <style>
 a {
-  color: blue;
+  color: blue;  /* !color! */
   cursor: pointer;
 }
 a:hover {
@@ -40,7 +40,7 @@ a:hover {
 }
 
 button {
-  border: grey solid 1px;
+  border: grey solid 1px;   /* !color! */
   padding: 5px;
   margin: 5px;
   cursor: pointer;
@@ -49,6 +49,6 @@ button:hover {
   text-decoration: underline;
 }
 button:focus {
-  background-color: lightgrey;
+  background-color: lightgrey;   /* !color! */
 }
 </style>

pages/poc/index.vue

@@ -69,7 +69,7 @@
 
 <style>
 a {
-  color: blue;
+  color: blue;  /* !color! */
   cursor: pointer;
 }
 a:hover {
@@ -77,15 +77,17 @@ a:hover {
 }
 
 button {
-  border: grey solid 1px;
+  border: grey solid 1px;   /* !color! */
   padding: 5px;
   margin: 5px;
   cursor: pointer;
 }
+
 button:hover {
   text-decoration: underline;
 }
+
 button:focus {
-  background-color: lightgrey;
+  background-color: lightgrey;  /* !color! */
 }
 </style>

pages/poc/new.vue

@@ -43,7 +43,7 @@ const cancelAndGoBack = async () => {
 
 <style>
 a {
-  color: blue;
+  color: blue;   /* !color! */
   cursor: pointer;
 }
 a:hover {
@@ -51,7 +51,7 @@ a:hover {
 }
 
 button {
-  border: grey solid 1px;
+  border: grey solid 1px;  /* !color! */
   padding: 5px;
   margin: 5px;
   cursor: pointer;
@@ -60,7 +60,7 @@ button:hover {
   text-decoration: underline;
 }
 button:focus {
-  background-color: lightgrey;
+  background-color: lightgrey;  /* !color! */
 }
 
 form {

pages/subscription.vue

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

plugins/vuetify.ts

@@ -58,9 +58,11 @@ export default defineNuxtPlugin(nuxtApp => {
                         'n-info': '#ffffff',
 
                         // Special cases
-                        // TODO: remove as soon as possible
+                        // TODO: voir ceux dont on peut se passer
                         'x-create-btn': '#f39c12',
                         'n-x-create-btn': '#ffffff',
+
+                        'x-client-loader': '#2c3a48',
                     }
                 }
             },