finalize themes

assets/css/theme.scss

@@ -1,54 +1,54 @@
 
 .theme-primary {
   background-color: rgb(var(--v-theme-primary)) !important;
-  color: rgb(var(--v-theme-n-primary)) !important;
+  color: rgb(var(--v-theme-on-primary)) !important;
 }
 
 .theme-secondary {
   background-color: rgb(var(--v-theme-secondary)) !important;
-  color: rgb(var(--v-theme-n-secondary)) !important;
+  color: rgb(var(--v-theme-on-secondary)) !important;
 }
 
 .theme-neutral-strong {
   background-color: rgb(var(--v-theme-neutral-strong)) !important;
-  color: rgb(var(--v-theme-n-neutral-strong)) !important;
+  color: rgb(var(--v-theme-on-neutral-strong)) !important;
 }
 
 .theme-neutral {
   background-color: rgb(var(--v-theme-neutral)) !important;
-  color: rgb(var(--v-theme-n-neutral)) !important;
+  color: rgb(var(--v-theme-on-neutral)) !important;
 
   a {
-    color: rgb(var(--v-theme-nc-neutral)) !important;
+    color: rgb(var(--v-theme-on-neutral--clickable)) !important;
   }
 }
 
 .theme-neutral-soft {
   background-color: rgb(var(--v-theme-neutral-soft)) !important;
-  color: rgb(var(--v-theme-n-neutral-soft)) !important;
+  color: rgb(var(--v-theme-on-neutral-soft)) !important;
 }
 
 .theme-danger {
   background-color: rgb(var(--v-theme-danger)) !important;
-  color: rgb(var(--v-theme-n-danger)) !important;
+  color: rgb(var(--v-theme-on-danger)) !important;
 }
 
 .theme-success {
   background-color: rgb(var(--v-theme-success)) !important;
-  color: rgb(var(--v-theme-n-success)) !important;
+  color: rgb(var(--v-theme-on-success)) !important;
 }
 
 .theme-warning {
   background-color: rgb(var(--v-theme-warning)) !important;
-  color: rgb(var(--v-theme-n-warning)) !important;
+  color: rgb(var(--v-theme-on-warning)) !important;
 }
 
 .theme-info {
   background-color: rgb(var(--v-theme-info)) !important;
-  color: rgb(var(--v-theme-n-info)) !important;
+  color: rgb(var(--v-theme-on-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;
+  color: rgb(var(--v-theme-on-x-create-btn)) !important;
 }

components/Layout/Header.vue

@@ -13,7 +13,6 @@ Contient entre autres le nom de l'organisation, l'accès à l'aide et aux préf
       <v-app-bar-nav-icon
           v-if="hasMainMenu"
           :icon="isMainMenuOpened ? 'mdi:mdi-menu-open' : 'mdi:mdi-menu'"
-          class="text-n-primary"
           @click="toggleMainMenu"
       />
     </template>
@@ -36,7 +35,7 @@ Contient entre autres le nom de l'organisation, l'accès à l'aide et aux préf
 
     <LayoutHeaderMenu name="Configuration" />
 
-    <LayoutHeaderMenu name="Account" color="n-primary" icon="fas fa-sun" />
+    <LayoutHeaderMenu name="Account" color="on-primary" icon="fas fa-sun" />
 
     <a
         :href="runtimeConfig.supportUrl"
@@ -44,7 +43,7 @@ Contient entre autres le nom de l'organisation, l'accès à l'aide et aux préf
         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="n-secondary" />
+      <v-icon icon="fas fa-question-circle" class="d-sm-flex d-md-none" color="on-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-n-primary"
+        class="ml-2 on-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-n-primary"
+          class="on-primary"
       />
     </v-btn>
 
@@ -46,7 +46,7 @@ header principal (configuration, paramètres du compte...)
           {{$t(menu.label)}}
         </v-card-title>
 
-        <v-card-text class="ma-0 pa-0 header-menu theme-neutral">
+        <v-card-text class="ma-0 pa-0 header-menu">
           <v-list density="compact" :subheader="true">
             <template v-for="(child, index) in menu.children" :key="index">
               <v-list-item
@@ -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" />
                       </v-avatar>
-                      <v-icon v-else class="text-n-primary" size="small">
+                      <v-icon v-else class="on-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-n-primary">
+      <v-icon class="on-primary">
         fa fa-bell
       </v-icon>
     </v-badge>

components/Layout/MainMenu.vue

@@ -122,7 +122,7 @@ onUnmounted(() => {
   :deep(.v-icon),
   {
     font-size: 14px;
-    color: rgb(var(--v-theme-n-secondary), 0.7);
+    color: rgb(var(--v-theme-on-secondary), 0.7);
   }
 
   .v-list-item__prepend {
@@ -162,11 +162,11 @@ onUnmounted(() => {
   }
 
   :deep(.v-list-group__items .v-list-item-title) {
-    color: rgb(var(--v-theme-n-secondary-alt));
+    color: rgb(var(--v-theme-on-secondary-alt));
   }
 
   :deep(.v-list-group__items .v-icon) {
-    color: rgb(var(--v-theme-n-secondary-alt));
+    color: rgb(var(--v-theme-on-secondary-alt));
   }
 
   :deep(.v-list-item .v-icon) {

components/Layout/SubHeader/ActivityYear.vue

@@ -1,6 +1,6 @@
 <template>
   <main class="d-flex flex-row align-center">
-    <span v-show="mdAndUp" class="mr-2 font-weight-bold">{{ $t(label) }} : </span>
+    <span v-show="mdAndUp" class="mr-2 font-weight-bold on-neutral">{{ $t(label) }} : </span>
 
     <UiXeditableText
       class="activity-year-input"
@@ -9,13 +9,15 @@
       @update="setActivityYear"
     >
       <template #xeditable.read="{inputValue}">
-        <v-icon aria-hidden="false" size="small" class="text-nc-neutral mr-1" icon="fas fa-edit" />
-        <strong class="text-nc-neutral">
-          {{ inputValue }}
-          <span v-if="yearPlusOne">
-            / {{ parseInt(inputValue) + 1 }}
-          </span>
-        </strong>
+        <div class="d-flex align-center on-neutral--clickable">
+          <v-icon aria-hidden="false" size="small" class="mr-1" icon="fas fa-edit" />
+          <strong >
+            {{ inputValue }}
+            <span v-if="yearPlusOne">
+              / {{ parseInt(inputValue) + 1 }}
+            </span>
+          </strong>
+        </div>
       </template>
     </UiXeditableText>
   </main>

components/Layout/SubHeader/Breadcrumbs.vue

@@ -46,7 +46,7 @@ const items: ComputedRef<Array<AnyJson>> = computed(() => {
 
 <style scoped lang="scss">
 :deep(a.v-breadcrumbs-item--disabled) {
-  color: rgb(var(--v-theme-n-neutral)) !important;
+  color: rgb(var(--v-theme-on-neutral)) !important;
   opacity: 1 !important;
 }
 </style>

components/Layout/SubHeader/DataTiming.vue

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

components/Layout/SubHeader/DataTimingRange.vue

@@ -1,7 +1,7 @@
 <template>
   <main class="d-flex align-center data-timing-range">
     <div v-if="show" class="d-flex align-center" style="max-height: 100%">
-      <span class="pl-2 mr-2 font-weight-bold">
+      <span class="pl-2 mr-2 font-weight-bold on-neutral">
         {{ $t('period_choose') }}
       </span>
 
@@ -24,7 +24,7 @@
         elevation="0"
         @click="show = !show"
     >
-      <v-icon icon="fas fa-history" color="neutral-strong" class="font-weight-normal" style="font-size: 14px;" />
+      <v-icon icon="fas fa-history" class="font-weight-normal" style="font-size: 14px;" />
     </v-btn>
 
     <v-tooltip location="bottom" :activator="btn">
@@ -94,7 +94,6 @@ if (accessProfileStore.historical.dateStart || accessProfileStore.historical.dat
 .time-btn {
   border-width: 1px 1px 1px 0;
   border-style: solid;
-  border-color: rgb(var(--v-theme-neutral-strong)) !important;
 }
 
 .data-timing-range {

components/Ui/Image.vue

@@ -145,7 +145,7 @@ onUnmounted(() => {
         cursor: pointer;
       }
       i {
-        color: rgb(var(--v-theme-n-neutral-strong));
+        color: rgb(var(--v-theme-on-neutral-strong));
         position: absolute;
         top: 50%;
         left: 50%;

components/Ui/Input/Image.vue

@@ -242,7 +242,7 @@ onUnmounted(() => {
     padding: 20px;
     display: block;
     &__cropper {
-       border: solid 1px rgb(var(--v-theme-n-neutral-strong));;
+       border: solid 1px rgb(var(--v-theme-on-neutral-strong));;
        min-height: 500px;
        max-height: 500px;
      }
@@ -273,7 +273,7 @@ onUnmounted(() => {
     &__button {
        border: none;
        outline: solid transparent;
-       color: rgb(var(--v-theme-n-neutral));
+       color: rgb(var(--v-theme-on-neutral));
        font-size: 16px;
        padding: 10px 20px;
        background: rgb(var(--v-theme-neutral));

components/Ui/Input/Phone.vue

@@ -102,6 +102,6 @@ const rules = [
 
 <style lang="scss">
 input:read-only{
-  color: rgb(var(--v-theme-n-neutral));
+  color: rgb(var(--v-theme-on-neutral));
 }
 </style>

components/Ui/Input/TextArea.vue

@@ -68,6 +68,6 @@ const {violation, onChange} = useFieldViolation(props.field, emit)
 
 <style lang="scss">
   input:read-only{
-    color: rgb(var(--v-theme-n-neutral));
+    color: rgb(var(--v-theme-on-neutral));
   }
 </style>

components/Ui/SystemBar.vue

@@ -35,7 +35,7 @@ System bars
     textColor: {
       type: String,
       required: false,
-      default: 'n-neutral-soft'
+      default: 'on-neutral-soft'
     },
     onClick: {
       type: Function,

config/theme.ts

@@ -1,32 +1,44 @@
+import { ThemeDefinition } from 'vuetify'
 
 interface Theme {
     dark: boolean,
     colors: {
+        /**
+         * @see Cf. doc/colors.md pour le rôle de chaque couleur
+         */
+        // Global
+        'background': string,
+        'on-background': string,
+        'surface': string,
+        'on-surface': string,
         'primary': string,
-        'n-primary': string,
+        'on-primary': string,
         'primary-alt': string,
-        'n-primary-alt': string,
+        'on-primary-alt': string,
         'secondary': string,
-        'n-secondary': string,
+        'on-secondary': string,
         'secondary-alt': string,
-        'n-secondary-alt': string,
+        'on-secondary-alt': string,
         'neutral-strong': string,
-        'n-neutral-strong': string,
+        'on-neutral-strong': string,
         'neutral': string,
-        'n-neutral': string,
-        'nc-neutral': string,
+        'on-neutral': string,
+        'on-neutral--clickable': string,
         'neutral-soft': string,
-        'n-neutral-soft': string,
+        'on-neutral-soft': string,
         'danger': string,
-        'n-danger': string,
+        'on-danger': string,
         'success': string,
-        'n-success': string,
+        'on-success': string,
         'warning': string,
-        'n-warning': string,
+        'on-warning': string,
         'info': string,
-        'n-info': string,
+        'on-info': string,
+
+        // Special cases
+        // TODO: voir ceux dont on peut se passer
         'x-create-btn': string,
-        'n-x-create-btn': string
+        'on-x-create-btn': string
     }
 }
 
@@ -34,99 +46,98 @@ interface Theme {
 export const lightTheme: Theme = {
     dark: false,
     colors: {
-        /**
-         * @see Cf. doc/colors.md pour le rôle de chaque couleur
-         */
-        // Global
+        'background': '#ecf0f5',
+        'on-background': '#000000',
+
+        'surface': '#ffffff',
+        'on-surface': '#000000',
+
         'primary': '#00ad8e',
-        'n-primary': '#ffffff',
+        'on-primary': '#ffffff',
 
         'primary-alt': '#a9e0d6',
-        'n-primary-alt': '#777777',
+        'on-primary-alt': '#777777',
 
         'secondary': '#324150',
-        'n-secondary': '#f5f5f5',
+        'on-secondary': '#f5f5f5',
 
         'secondary-alt': '#2c3a48',
-        'n-secondary-alt': '#ffffff',
+        'on-secondary-alt': '#ffffff',
 
         'neutral-strong': '#777777',
-        'n-neutral-strong': '#ecf0f5',
+        'on-neutral-strong': '#ecf0f5',
 
         'neutral': '#e6e6e6',
-        'n-neutral': '#666666',
-        'nc-neutral': '#00997d',
+        'on-neutral': '#666666',
+        'on-neutral--clickable': '#00997d',
 
         'neutral-soft': '#ecf0f5',
-        'n-neutral-soft': '#464646',
+        'on-neutral-soft': '#464646',
 
         // Content
         'danger': '#f56954',
-        'n-danger': '#ffffff',
+        'on-danger': '#ffffff',
 
         'success': '#00a65a',
-        'n-success': '#ffffff',
+        'on-success': '#ffffff',
 
         'warning': '#f39c12',
-        'n-warning': '#ffffff',
+        'on-warning': '#ffffff',
 
         'info': '#3c8dbc',
-        'n-info': '#ffffff',
+        'on-info': '#ffffff',
 
-        // Special cases
-        // TODO: voir ceux dont on peut se passer
         'x-create-btn': '#f39c12',
-        'n-x-create-btn': '#ffffff',
+        'on-x-create-btn': '#ffffff',
     }
 }
 
 export const darkTheme: Theme = {
     dark: true,
     colors: {
-        /**
-         * @see Cf. doc/colors.md pour le rôle de chaque couleur
-         */
-        // Global
+        'background': '#1a1a1a',
+        'on-background': '#ffffff',
+
+        'surface': '#262626',
+        'on-surface': '#ffffff',
+
         'primary': '#00ad8e',
-        'n-primary': '#ffffff',
+        'on-primary': '#ffffff',
 
         'primary-alt': '#a9e0d6',
-        'n-primary-alt': '#777777',
+        'on-primary-alt': '#777777',
 
         'secondary': '#324150',
-        'n-secondary': '#f5f5f5',
+        'on-secondary': '#f5f5f5',
 
         'secondary-alt': '#2c3a48',
-        'n-secondary-alt': '#ffffff',
+        'on-secondary-alt': '#ffffff',
 
         'neutral-strong': '#595959',
-        'n-neutral-strong': '#ecf0f5',
+        'on-neutral-strong': '#ecf0f5',
 
         'neutral': '#324150',
-        'n-neutral': '#f5f5f5',
-        'nc-neutral': '#a9e0d6',
+        'on-neutral': '#cccccc',
+        'on-neutral--clickable': '#a9e0d6',
 
         'neutral-soft': '#090c11',
-        'n-neutral-soft': '#cccccc',
+        'on-neutral-soft': '#cccccc',
 
         // Content
         'danger': '#f56954',
-        'n-danger': '#ffffff',
+        'on-danger': '#ffffff',
 
         'success': '#00a65a',
-        'n-success': '#ffffff',
+        'on-success': '#ffffff',
 
         'warning': '#f39c12',
-        'n-warning': '#ffffff',
+        'on-warning': '#ffffff',
 
-        // TODO: on ne pourrait pas utiliser la couleur 'success' à la place?
         'info': '#3c8dbc',
-        'n-info': '#ffffff',
+        'on-info': '#ffffff',
 
-        // Special cases
-        // TODO: voir ceux dont on peut se passer
         'x-create-btn': '#f39c12',
-        'n-x-create-btn': '#ffffff',
+        'on-x-create-btn': '#ffffff',
     }
 }
 

doc/colors.md

@@ -1,12 +1,18 @@
 
 ## Définition des couleurs de l'UI
 
+### Thèmes vuetify
+
+> Voir ici: https://next.vuetifyjs.com/en/features/theme/
+
 ### Configuration et utilisation
 
 Les couleurs du ou des thèmes sont enregistrées dans `plugins/vuetify.ts`
 
 | Nom            | Usage                                                                                                                                         |
 |----------------|-----------------------------------------------------------------------------------------------------------------------------------------------|
+| background     | Fond par défaut des contenus                                                                                                                  |
+| surface        | Fond des components                                                                                                                           |
 | 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                           |
@@ -19,31 +25,32 @@ Les couleurs du ou des thèmes sont enregistrées dans `plugins/vuetify.ts`
 | warning        | Fond des bandeaux et panneaux d'alerte servant d'avertissement                                                                                |
 | info           | Fond des bandeaux et panneaux informatifs                                                                                                     |
 
-Pour chacune de ces couleurs, on définit une ou plusieurs couleurs complémentaires, comme les couleurs `n-[color]` (voir plus bas)
+Pour chacune de ces couleurs, on définit une ou plusieurs couleurs complémentaires, comme les couleurs `on-[color]` (voir plus bas)
 
+On trouvera aussi des couleurs en `x-[color]`: ce sont des couleurs particulières appliquées à un élément précis. Ces 
+couleurs sont appelées à disparaitre à terme.
 
 ### Règles de nommage
 
 On construit le nom d'une variable de couleur de la manière suivante :
 
-`([prefix]-)[name](-[suffix])`
+`([prefix]-)[name](--[suffix])`
 
 Si la partie 'name' comprend plusieurs mots, on les sépare, eux aussi, par des tirets `-`
 
 
 ##### Préfixe (optionnel)
 
-Pour chaque couleur du thème, on définira des couleurs nommées `n-[color]` qui correspondent au "négatif" de la couleur,
+Pour chaque couleur du thème, on définira des couleurs nommées `on-[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)
 
-Un éventuel suffixe pourra aussi permettre de définir des variantes :
+Un éventuel suffixe pourra aussi permettre de définir des variantes applicable à certains éléments.
 
-| Suffixe | Signification                                                    |
-|---------|------------------------------------------------------------------|
-| `-alt`  | Couleur alternative, typiquement affichée au survol de la souris |
+Par exemple, une couleur `on-color--clickable` sera une variante de la couleur `on-color` applicable aux éléments 
+cliquables, comme les liens.
 
 
 ### Thèmes SCSS
@@ -53,6 +60,12 @@ au fond de l'élément et à son contenu.
 
 Ces classes sont définies dans le fichier `assets/css/theme.scss`
 
+> Dans la majorité des cas, appliquer la classe vuetify `bg-[color]` aura le même effet que d'appliquer la classe 
+`theme-[color]`. Mais il peut arriver que certains thèmes définis dans cette application implémentent des règles 
+spéciales pour certains éléments, comme la couleur des liens d'un thème par exemple. 
+C'est pourquoi il vaut mieux utiliser les classes `theme-[color]`.
+
+
 
 
 

pages/subscription.vue

@@ -327,12 +327,12 @@ Page 'Mon abonnement'
 
     .v-col {
       min-width: 260px;
-      border: solid 1px rgb(var(--v-theme-n-primary));
+      border: solid 1px rgb(var(--v-theme-on-primary));
 
       .v-row:nth-child(1) {
         background: rgb(var(--v-theme-primary));
         height: 64px;
-        color: rgb(var(--v-theme-n-primary));
+        color: rgb(var(--v-theme-on-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 rgb(var(--v-theme-n-primary));
+      border-bottom: solid 1px rgb(var(--v-theme-on-primary));
     }
     .v-row:last-child {
       border: none;