From 0f39106b5617b5696289817996b0997fc75970bb Mon Sep 17 00:00:00 2001
From: Stephen Abello <stephen.abello@combodo.com>
Date: Tue, 2 Sep 2025 16:30:20 +0200
Subject: [PATCH] =?UTF-8?q?=20N=C2=B07761=20-=20De-hardcode=20SCSS=20value?=
 =?UTF-8?q?s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/backoffice/_shame.scss                    | 37 +++++---
 .../application/bulk/_bulk-modify.scss        |  8 +-
 .../linked-set/_linked-set-selector.scss      | 12 ++-
 css/backoffice/blocks-integrations/_all.scss  |  2 +-
 .../_medallion-with-blocklist.scss            |  8 +-
 ...shboard.scss => _prop-within-details.scss} |  4 -
 .../_tab-container-within-panel.scss          | 17 ++--
 .../datatable/_datatable-within-panel.scss    |  5 +-
 .../_object-details-with-tab-container.scss   |  4 +-
 .../components/dashlet/_dashlet.scss          | 23 ++---
 .../components/datatable/_datatable.scss      |  6 +-
 .../components/input/_input-image.scss        |  2 +-
 .../components/input/_input-richtext.scss     | 13 ++-
 .../components/input/_input-select-icon.scss  |  6 +-
 .../components/input/_input-select.scss       | 10 ++-
 .../components/input/_input-text.scss         |  7 +-
 .../components/input/_input-toggler.scss      |  6 +-
 css/backoffice/components/input/_input.scss   |  7 +-
 .../popover-menu/_popover-menu.scss           |  8 +-
 css/backoffice/layout/_all.scss               |  1 +
 css/backoffice/layout/_content.scss           |  9 +-
 css/backoffice/layout/_details.scss           |  9 ++
 css/backoffice/layout/_navigation-menu.scss   |  4 +-
 .../activity-panel/_activity-entry.scss       |  5 +-
 .../activity-panel/_activity-panel.scss       |  5 +-
 .../activity-panel/_caselog-entry-form.scss   |  2 +-
 .../layout/dashboard/_dashboard-editor.scss   | 10 ++-
 .../layout/dashboard/_dashboard.scss          | 86 ++++++++++++-------
 .../layout/multi-column/_column.scss          | 13 ++-
 .../layout/multi-column/_multi-column.scss    |  2 +-
 .../layout/object/_object-details.scss        |  6 +-
 .../wizard-container/_wizard-container.scss   |  3 +-
 css/backoffice/pages/_attachments.scss        |  7 +-
 css/backoffice/pages/_audit.scss              |  9 +-
 css/backoffice/pages/_csv-import.scss         |  9 +-
 css/backoffice/pages/_data-synchro.scss       | 12 ++-
 css/backoffice/pages/_datamodel-viewer.scss   |  6 +-
 css/backoffice/pages/_impact-analysis.scss    |  8 +-
 .../pages/_notifications-center.scss          |  3 +-
 css/backoffice/pages/_notifications.scss      | 10 ++-
 css/backoffice/pages/_oauth.wizard.scss       |  8 +-
 css/backoffice/pages/_preferences.scss        | 14 ++-
 css/backoffice/themes/page-banner.scss        |  7 +-
 .../utils/helpers/_text-decoration.scss       |  7 +-
 css/backoffice/utils/mixins/_selectable.scss  |  9 +-
 45 files changed, 303 insertions(+), 146 deletions(-)
 rename css/backoffice/blocks-integrations/{_add-to-dashboard.scss => _prop-within-details.scss} (88%)
 create mode 100644 css/backoffice/layout/_details.scss

diff --git a/css/backoffice/_shame.scss b/css/backoffice/_shame.scss
index 758b06689..8b6664258 100644
--- a/css/backoffice/_shame.scss
+++ b/css/backoffice/_shame.scss
@@ -39,6 +39,23 @@
 //
 // .site-nav a { color:#BADA55!important; }
 
+$ibo-shame--switch--width: 36px !default;
+$ibo-shame--switch--height: 20px !default;
+
+$ibo-shame--slider--background-color: $ibo-color-secondary-600 !default;
+
+$ibo-shame--slider--before--height: 15px !default;
+$ibo-shame--slider--before--width: 15px !default;
+$ibo-shame--slider--before--background-color: $ibo-color-secondary-300 !default;
+
+$ibo-shame--slider--is-checked--background-color: $ibo-color-primary-600 !default;
+
+$ibo-shame--slider--is-focus--box-shadow: 0 0 1px $ibo-color-primary-600 !default;
+
+$ibo-shame--slider--is-round--border-radius: 20px !default;
+$ibo-shame--slider--is-round--before--border-radius: 7px !default;
+
+
 // N°2847 - Recolor svg illustrations with iTop's primary color
 .ibo-svg-illustration--container > svg *[fill="#6c63ff"]{
 	fill: $ibo-svg-illustration--fill;
@@ -56,8 +73,8 @@
 .switch {
   position: relative;
   display: inline-block;
-  width: 36px;
-  height: 20px;
+  width: $ibo-shame--switch--width;
+  height: $ibo-shame--switch--height;
   vertical-align: baseline;
 }
 
@@ -74,27 +91,27 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: $ibo-color-secondary-600;
+  background-color: $ibo-shame--slider--background-color;
   transition: .4s;
 }
 
 .slider:before {
   position: absolute;
   content: "";
-  height: 15px;
-  width: 15px;
+  height: $ibo-shame--slider--before--height;
+  width: $ibo-shame--slider--before--width;
   left: 3px;
   bottom: 3px;
-  background-color: $ibo-color-secondary-300;
+  background-color: $ibo-shame--slider--before--background-color;
   transition: .4s;
 }
 
 input:checked + .slider {
-  background-color: $ibo-color-primary-600;
+  background-color: $ibo-shame--slider--is-checked--background-color;
 }
 
 input:focus + .slider {
-  box-shadow: 0 0 1px $ibo-color-primary-600;
+  box-shadow: $ibo-shame--slider--is-focus--box-shadow;
 }
 
 input:checked + .slider:before {
@@ -103,9 +120,9 @@ input:checked + .slider:before {
 
 /* Rounded sliders */
 .slider.round {
-  border-radius: 20px;
+  border-radius: $ibo-shame--slider--is-round--border-radius;
 }
 
 .slider.round:before {
-  border-radius: 7px;
+  border-radius: $ibo-shame--slider--is-round--before--border-radius;
 }
diff --git a/css/backoffice/application/bulk/_bulk-modify.scss b/css/backoffice/application/bulk/_bulk-modify.scss
index 06b403e7a..7474f76ce 100644
--- a/css/backoffice/application/bulk/_bulk-modify.scss
+++ b/css/backoffice/application/bulk/_bulk-modify.scss
@@ -3,12 +3,14 @@
  * @license     http://opensource.org/licenses/AGPL-3.0
  */
 
-.ibo-bulk--bulk-modify--incompatible-attribute {
+$ibo-bulk--bulk-modify--incompatible-attribute--color--margin-right: $ibo-vendors-selectize--item--icon--margin-right !default;
+$ibo-bulk--bulk-modify--incompatible-attribute--color: $ibo-color-information-500 !default;
 
+.ibo-bulk--bulk-modify--incompatible-attribute {
   &:before{
-    margin-right: $ibo-vendors-selectize--item--icon--margin-right;
+    margin-right: $ibo-bulk--bulk-modify--incompatible-attribute--color--margin-right;
     @extend %fa-solid-base;
     content: '\f05a';
-    color: $ibo-color-information-500;
+    color: $ibo-bulk--bulk-modify--incompatible-attribute--color;
   }
 }
\ No newline at end of file
diff --git a/css/backoffice/application/linked-set/_linked-set-selector.scss b/css/backoffice/application/linked-set/_linked-set-selector.scss
index ad9afef4e..d770b60d2 100644
--- a/css/backoffice/application/linked-set/_linked-set-selector.scss
+++ b/css/backoffice/application/linked-set/_linked-set-selector.scss
@@ -3,12 +3,16 @@
  * @license     http://opensource.org/licenses/AGPL-3.0
  */
 
+$ibo-linked-set--bulk-tooltip-info--content: '\f05a' !default;
+$ibo-linked-set--bulk-tooltip-info--color: $ibo-color-information-500 !default;
+$ibo-linked-set--bulk-tooltip-info--margin-right: $ibo-vendors-selectize--item--icon--margin-right !default;
+
 .ibo-linked-set--bulk-tooltip-info {
-  font-size: $ibo-font-size-100;
+  @extend %ibo-font-ral-nor-100;
   &:before{
-    margin-right: $ibo-vendors-selectize--item--icon--margin-right;
+    margin-right: $ibo-linked-set--bulk-tooltip-info--margin-right;
     @extend %fa-solid-base;
-    content: '\f05a';
-    color: $ibo-color-information-500;
+    content: $ibo-linked-set--bulk-tooltip-info--content;
+    color: $ibo-linked-set--bulk-tooltip-info--color;
   }
 }
\ No newline at end of file
diff --git a/css/backoffice/blocks-integrations/_all.scss b/css/backoffice/blocks-integrations/_all.scss
index 8d296a0bd..4a5c31d67 100644
--- a/css/backoffice/blocks-integrations/_all.scss
+++ b/css/backoffice/blocks-integrations/_all.scss
@@ -16,7 +16,7 @@
 @import "panel/all";
 @import "pill/all";
 @import "dashlet/all";
-@import "add-to-dashboard";
+@import "prop-within-details";
 @import "caselog-entry-form-within-activity-panel";
 @import "tab-container-within-panel";
 @import "medallion-with-blocklist";
diff --git a/css/backoffice/blocks-integrations/_medallion-with-blocklist.scss b/css/backoffice/blocks-integrations/_medallion-with-blocklist.scss
index 227782a9e..58362951b 100644
--- a/css/backoffice/blocks-integrations/_medallion-with-blocklist.scss
+++ b/css/backoffice/blocks-integrations/_medallion-with-blocklist.scss
@@ -3,13 +3,17 @@
  * @license     http://opensource.org/licenses/AGPL-3.0
  */
 
+$ibo-medallion-with-blocklist--icon--image--margin-x: auto !default;
+$ibo-medallion-with-blocklist--icon--image--margin-y: 0 !default;
+$ibo-medallion-with-blocklist--icon--description--margin-top: $ibo-spacing-400 !default;
+
 .ibo-block-list--medallion{
   flex-direction: column;
   align-items: center;
   > .ibo-medallion-icon--image{
-    margin: 0 auto;
+    margin: $ibo-medallion-with-blocklist--icon--image--margin-y $ibo-medallion-with-blocklist--icon--image--margin-x;
     ~ .ibo-medallion-icon--description{
-      margin-top: 12px;
+      margin-top: $ibo-medallion-with-blocklist--icon--description--margin-top;
     }
   }
   > .ibo-medallion-icon--description{
diff --git a/css/backoffice/blocks-integrations/_add-to-dashboard.scss b/css/backoffice/blocks-integrations/_prop-within-details.scss
similarity index 88%
rename from css/backoffice/blocks-integrations/_add-to-dashboard.scss
rename to css/backoffice/blocks-integrations/_prop-within-details.scss
index 7ad7b37fa..2f5ff22c6 100644
--- a/css/backoffice/blocks-integrations/_add-to-dashboard.scss
+++ b/css/backoffice/blocks-integrations/_prop-within-details.scss
@@ -9,8 +9,4 @@
 
 .ibo-details .ibo-prop--apply {
   display: table-column;
-}
-
-.ibo-details {
-  margin-top: 5px;
 }
\ No newline at end of file
diff --git a/css/backoffice/blocks-integrations/_tab-container-within-panel.scss b/css/backoffice/blocks-integrations/_tab-container-within-panel.scss
index abf93c492..28a3660ac 100644
--- a/css/backoffice/blocks-integrations/_tab-container-within-panel.scss
+++ b/css/backoffice/blocks-integrations/_tab-container-within-panel.scss
@@ -15,6 +15,13 @@ $ibo-panel-with-tab-container--margin-bottom: -1 * $ibo-panel--body--padding-bot
 
 $ibo-panel-with-tab-container--tab-toggler--font-size--is-sticking: $ibo-font-size-100 !default;
 
+$ibo-tab-container-within-panel--tabs-list--padding-top: $ibo-spacing-800 !default;
+// I'm not sure where these values come from, might need to be replaced by variables
+$ibo-tab-container-within-panel--tabs-list--min-width: calc(32px + 90px + 32px) !default;
+$ibo-tab-container-within-panel--tabs-header--height: $ibo-spacing-800 !default;
+$ibo-tab-container-within-panel--tabs--list--is-sticking--z-index: 10 !default;
+$ibo-tab-container-within-panel--tabs--list--is-sticking--is-not-vertical--padding-left: $ibo-spacing-0 !default;
+
 // Note: We use the child ">" selector to ensure this applies only to the child tab container, not another one that would be nested
 .ibo-panel {
 	> .ibo-panel--body {
@@ -35,15 +42,15 @@ $ibo-panel-with-tab-container--tab-toggler--font-size--is-sticking: $ibo-font-si
         flex-direction: row;
 
         > .ibo-tab-container--tabs-list {
-          padding-top: 50px;
+          padding-top: $ibo-tab-container-within-panel--tabs-list--padding-top;
           flex-direction: column;
           height: auto;
           padding-left: unset;
           margin-right: unset;
-          min-width: calc(32px + 90px + 32px);
+          min-width: $ibo-tab-container-within-panel--tabs-list--min-width;
 
           > .ibo-tab-container--tab-header {
-            height: 50px;
+            height: $ibo-tab-container-within-panel--tabs-header--height;
             width: 100%;
             justify-content: left;
 
@@ -68,12 +75,12 @@ $ibo-panel-with-tab-container--tab-toggler--font-size--is-sticking: $ibo-font-si
       > .ibo-tab-container {
         > .ibo-tab-container--tabs-list.ibo-is-sticking {
           position: fixed;
-          z-index: 10;
+          z-index: $ibo-tab-container-within-panel--tabs--list--is-sticking--z-index;
         }
 
         &:not(.ibo-is-vertical){
           > .ibo-tab-container--tabs-list.ibo-is-sticking {
-            padding-left: 0;
+            padding-left: $ibo-tab-container-within-panel--tabs--list--is-sticking--is-not-vertical--padding-left;
 
             .ibo-tab-container--tab-toggler,
             .ibo-tab-container--extra-tabs-list-toggler {
diff --git a/css/backoffice/blocks-integrations/datatable/_datatable-within-panel.scss b/css/backoffice/blocks-integrations/datatable/_datatable-within-panel.scss
index d1d2cb60f..a018fe932 100644
--- a/css/backoffice/blocks-integrations/datatable/_datatable-within-panel.scss
+++ b/css/backoffice/blocks-integrations/datatable/_datatable-within-panel.scss
@@ -3,8 +3,11 @@
  * @license     http://opensource.org/licenses/AGPL-3.0
  */
 
+$ibo-datatable-within-panel--panel-body--width: 100% !default;
+
+
 .ibo-panel .ibo-panel--body{
   .ibo-datatable{
-    width: 100%
+    width: $ibo-datatable-within-panel--panel-body--width;
   }
 }
\ No newline at end of file
diff --git a/css/backoffice/blocks-integrations/object/_object-details-with-tab-container.scss b/css/backoffice/blocks-integrations/object/_object-details-with-tab-container.scss
index d4708e068..a3f6fd68c 100644
--- a/css/backoffice/blocks-integrations/object/_object-details-with-tab-container.scss
+++ b/css/backoffice/blocks-integrations/object/_object-details-with-tab-container.scss
@@ -3,6 +3,8 @@
  * @license     http://opensource.org/licenses/AGPL-3.0
  */
 
+$ibo-object-details-with-tab-container--tab-list--padding-left: calc(#{$ibo-object-details--icon--spacing--as-medallion} + #{$ibo-object-details--icon--size} + #{$ibo-object-details--icon--spacing--as-medallion} - #{$ibo-tab-container--tab-toggler--padding-x}) !default;
+
 // Note: We use the child ">" selector to ensure this applies only the child tab container, not another one that would be nested
 .ibo-object-details.ibo-has-medallion-icon {
   > .ibo-panel--body {
@@ -10,7 +12,7 @@
     > .ibo-tab-container:not(.ibo-is-vertical) {
       > .ibo-tab-container--tabs-list {
         // Align tab toggler's title with the panel's title
-        padding-left: calc(#{$ibo-object-details--icon--spacing--as-medallion} + #{$ibo-object-details--icon--size} + #{$ibo-object-details--icon--spacing--as-medallion} - #{$ibo-tab-container--tab-toggler--padding-x});
+        padding-left: $ibo-object-details-with-tab-container--tab-list--padding-left;
       }
     }
   }
diff --git a/css/backoffice/components/dashlet/_dashlet.scss b/css/backoffice/components/dashlet/_dashlet.scss
index 16aaf7472..51b301b3a 100644
--- a/css/backoffice/components/dashlet/_dashlet.scss
+++ b/css/backoffice/components/dashlet/_dashlet.scss
@@ -9,6 +9,12 @@ $ibo-dashlet--width--is-inline: auto !default;
 $ibo-dashlet--elements-spacing-x: $ibo-spacing-600 !default;
 $ibo-dashlet--elements-spacing-y: $ibo-spacing-600 !default;
 
+$ibo-dashlet-blocker--z-index: 9 !default; /* To be above calendar links & all, but below .close-box (9) */
+$ibo-dashlet-blocker--top: 0 !default;
+$ibo-dashlet-blocker--left: 0 !default;
+$ibo-dashlet-blocker--width: 100% !default;
+$ibo-dashlet-blocker--height: 100% !default;
+
 /* Rules */
 .ibo-dashlet {
   position: relative;
@@ -23,18 +29,13 @@ $ibo-dashlet--elements-spacing-y: $ibo-spacing-600 !default;
 .ibo-dashlet--is-inline {
   width: $ibo-dashlet--width--is-inline;
 }
-.ibo-details > .ibo-prop--apply {
-  display: table-column;
-}
-.ibo-details{
-  margin-top: 5px;
-}
+
 .ibo-dashlet-blocker{
   position: absolute;
-  z-index: 9; /* To be above calendar links & all, but below .close-box (9) */
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  z-index: $ibo-dashlet-blocker--z-index;
+  top: $ibo-dashlet-blocker--top;
+  left: $ibo-dashlet-blocker--left;
+  width: $ibo-dashlet-blocker--width;
+  height: $ibo-dashlet-blocker--height;
   cursor: not-allowed;
 }
\ No newline at end of file
diff --git a/css/backoffice/components/datatable/_datatable.scss b/css/backoffice/components/datatable/_datatable.scss
index c7fe7f27f..b0893415a 100644
--- a/css/backoffice/components/datatable/_datatable.scss
+++ b/css/backoffice/components/datatable/_datatable.scss
@@ -24,6 +24,8 @@ $ibo-datatable--sort-order--color: $ibo-color-primary-600 !default;
 
 $ibo-fieldsorter--selected--background-color: $ibo-color-blue-200 !default;
 
+$ibo-datatable--selected-result-count--padding-right: 0.2em !default;
+$ibo-datatable--selected-result-count--padding-left: 0.1em !default;
 
 /* CSS variables (can be changed directly from the browser) */
 :root {
@@ -134,8 +136,8 @@ $ibo-fieldsorter--selected--background-color: $ibo-color-blue-200 !default;
 }
 
 .ibo-datatable--selected-count, .ibo-datatable--result-count{
-  padding-right: 0.2em;
-  padding-left: 0.1em;
+  padding-right: $ibo-datatable--selected-result-count--padding-right;
+  padding-left: $ibo-datatable--selected-result-count--padding-left;
 }
 
 //
diff --git a/css/backoffice/components/input/_input-image.scss b/css/backoffice/components/input/_input-image.scss
index ab0cc8772..745b2ffb0 100644
--- a/css/backoffice/components/input/_input-image.scss
+++ b/css/backoffice/components/input/_input-image.scss
@@ -3,7 +3,7 @@
  * @license     http://opensource.org/licenses/AGPL-3.0
  */
 
-$ibo-input-image--image-view--min-height: 96px !default;
+$ibo-input-image--image-view--min-height: $ibo-size-500 !default;
 $ibo-input-image--image-view--background-color: $ibo-color-grey-200 !default;
 $ibo-input-image--image-view--border-radius: $ibo-border-radius-500 !default;
 
diff --git a/css/backoffice/components/input/_input-richtext.scss b/css/backoffice/components/input/_input-richtext.scss
index a79ddbf5c..5fa8b1e40 100644
--- a/css/backoffice/components/input/_input-richtext.scss
+++ b/css/backoffice/components/input/_input-richtext.scss
@@ -1,5 +1,14 @@
+/*
+ * @copyright   Copyright (C) 2010-2025 Combodo SAS
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+
+$ibo-input-richtext-placeholder--height: $ibo-size-600 !default;
+$ibo-input-richtext-placeholder--width: 100% !default;
+
 .ibo-input-richtext-placeholder{
-  height: 200px;
-  width: 100%;
+  height: $ibo-input-richtext-placeholder--height;
+  width: $ibo-input-richtext-placeholder--width;
   visibility: hidden;
 }
\ No newline at end of file
diff --git a/css/backoffice/components/input/_input-select-icon.scss b/css/backoffice/components/input/_input-select-icon.scss
index 1e0878ce3..37fe3fa53 100644
--- a/css/backoffice/components/input/_input-select-icon.scss
+++ b/css/backoffice/components/input/_input-select-icon.scss
@@ -3,6 +3,8 @@
  * @license     http://opensource.org/licenses/AGPL-3.0
  */
 
+$ibo-input-select-icon--menu--icon--max-height: 100% !default;
+$ibo-input-select-icon--menu--icon--max-width: 100% !default;
 $ibo-input-select-icon--icon--padding-right: $ibo-spacing-200 !default;
 
 $ibo-input-select-icon--menu--z-index: 21 !default;
@@ -16,8 +18,8 @@ $ibo-input-select-icon--menu--icon--margin-right: 10px !default;
   display: inline-flex;
   text-align: left;
 	>img{
-		max-height: 100%;
-		max-width: 100%;
+		max-height: $ibo-input-select-icon--menu--icon--max-height;
+		max-width: $ibo-input-select-icon--menu--icon--max-width;
 		padding-right: $ibo-input-select-icon--icon--padding-right;
 	}
   >span{
diff --git a/css/backoffice/components/input/_input-select.scss b/css/backoffice/components/input/_input-select.scss
index 4fd9ad9f8..fed2f93eb 100644
--- a/css/backoffice/components/input/_input-select.scss
+++ b/css/backoffice/components/input/_input-select.scss
@@ -20,6 +20,7 @@ $ibo-input-select-selectize--item--active--background-color: $ibo-color-blue-100
 
 $ibo-input-select-wrapper--width: 100% !default;
 
+$ibo-input-select-wrapper--after--content: "\f0d7" !default;
 $ibo-input-select-wrapper--after--right: 8px !default;
 $ibo-input-select-wrapper--after--height: 28px !default;
 $ibo-input-select-wrapper--after--margin-left: -16px !default;
@@ -32,6 +33,7 @@ $ibo-input-select--action-button--height: 28px !default;
 $ibo-input-select--action-button--width: 23px !default;
 $ibo-input-select--action-button--margin-top: $ibo-spacing-0 !default;
 $ibo-input-select--action-button--margin-right: 3px !default;
+$ibo-input-select--action-button--font-size: $ibo-font-size-100 !default;
 $ibo-input-select--action-button--background-color: inherit !default;
 $ibo-input-select--action-button--color: $ibo-color-grey-800 !default;
 $ibo-input-select--action-button--padding-x: $ibo-spacing-100 !default;
@@ -57,7 +59,7 @@ $ibo-input-select--autocomplete-item-image--border: 1px solid $ibo-color-grey-60
     min-width: $ibo-input-select-selectize--value--min-midth !important;
 
     input {
-      border-width: 0px;
+      border-width: 0;
       color: inherit;
       border-color: $ibo-color-white-100;
       padding-left: $ibo-input-select--padding-x;
@@ -121,7 +123,7 @@ $ibo-input-select--autocomplete-item-image--border: 1px solid $ibo-color-grey-60
 .ibo-input-select-wrapper::after{
 	position: absolute;
   z-index: 1;
-	content: "\f0d7";
+	content: $ibo-input-select-wrapper--after--content;
 	font-family: "Font Awesome 5 Free";
 	font-weight: 600;
 
@@ -145,7 +147,7 @@ $ibo-input-select--autocomplete-item-image--border: 1px solid $ibo-color-grey-60
 .ibo-input-select-wrapper--with-buttons:not(.ibo-input-select-autocomplete-wrapper)::after {
   position: absolute;
   z-index: 1;
-  content: "\f0d7";
+  content: $ibo-input-select-wrapper--after--content;
   font-family: "Font Awesome 5 Free";
   font-weight: 600;
   cursor: pointer;
@@ -168,7 +170,7 @@ $ibo-input-select--autocomplete-item-image--border: 1px solid $ibo-color-grey-60
   margin-top: $ibo-input-select--action-button--margin-top;
   margin-right: $ibo-input-select--action-button--margin-right;
 
-  font-size: $ibo-font-size-100;
+  font-size: $ibo-input-select--action-button--font-size;
   background-color: $ibo-input-select--action-button--background-color;
   color: $ibo-input-select--action-button--color;
   padding: $ibo-input-select--action-button--padding-y $ibo-input-select--action-button--padding-x;
diff --git a/css/backoffice/components/input/_input-text.scss b/css/backoffice/components/input/_input-text.scss
index d0a5c1d41..c42172ea4 100644
--- a/css/backoffice/components/input/_input-text.scss
+++ b/css/backoffice/components/input/_input-text.scss
@@ -8,6 +8,9 @@ $ibo-input-text--min-height: 12rem !default;
 $ibo-input-text--padding-x: $ibo-spacing-400 !default;
 $ibo-input-text--padding-y: 10px !default;
 
+$ibo-input-text--export--width: 100% !default;
+$ibo-input-text--export--min-height: 15em !default;
+
 .ibo-input-text {
   width: $ibo-input-text--width;
   min-height: $ibo-input-text--min-height;
@@ -23,6 +26,6 @@ $ibo-input-text--padding-y: 10px !default;
 }
 
 .ibo-input-text--export {
-  width: 100%;
-  min-height: 15em;
+  width: $ibo-input-text--export--width;
+  min-height: $ibo-input-text--export--min-height;
 }
\ No newline at end of file
diff --git a/css/backoffice/components/input/_input-toggler.scss b/css/backoffice/components/input/_input-toggler.scss
index f16adc46d..90b11a49a 100644
--- a/css/backoffice/components/input/_input-toggler.scss
+++ b/css/backoffice/components/input/_input-toggler.scss
@@ -9,6 +9,8 @@ $ibo-toggler--wrapper--height: 20px !default;
 $ibo-toggler--slider--border-radius: $ibo-border-radius-900 !default;
 $ibo-toggler--slider--background-color: $ibo-color-secondary-600 !default;
 
+$ibo-toggler--slider--before--left: 3px !default;
+$ibo-toggler--slider--before--bottom: 3px !default;
 $ibo-toggler--slider--before--height: 15px !default;
 $ibo-toggler--slider--before--width: 15px !default;
 $ibo-toggler--slider--before--border-radius: $ibo-border-radius-full !default;
@@ -46,8 +48,8 @@ $ibo-toggler--label--margin-left: 4px !default;
 .ibo-toggler--slider:before {
   content: "";
   position: absolute;
-  left: 3px;
-  bottom: 3px;
+  left: $ibo-toggler--slider--before--left;
+  bottom: $ibo-toggler--slider--before--bottom;
   height: $ibo-toggler--slider--before--height;
   width: $ibo-toggler--slider--before--width;
   border-radius: $ibo-toggler--slider--before--border-radius;
diff --git a/css/backoffice/components/input/_input.scss b/css/backoffice/components/input/_input.scss
index c98e104c2..8b9ea2a13 100644
--- a/css/backoffice/components/input/_input.scss
+++ b/css/backoffice/components/input/_input.scss
@@ -27,6 +27,9 @@ $ibo-input--disabled--background-color: $ibo-color-grey-300 !default;
 $ibo-input--placeholder--color: $ibo-color-grey-700 !default;
 
 $ibo-input-wrapper--is-error--border-color: $ibo-color-red-600 !default;
+$ibo-input-wrapper--vanilla--is-error--border: 0 !default;
+$ibo-input-wrapper--vanilla--is-error--background-color: $ibo-color-transparent !default;
+
 $ibo-field-validation: $ibo-color-red-700 !default;
 
 $ibo-input--margin-x: $ibo-spacing-200 !default;
@@ -62,8 +65,8 @@ textarea.ibo-input{
     border-color: $ibo-input-wrapper--is-error--border-color;
   }
   .ibo-input-vanilla input{
-    border: 0;
-    background-color: #11ffee00;
+    border: $ibo-input-wrapper--vanilla--is-error--border;
+    background-color: $ibo-input-wrapper--vanilla--is-error--background-color;
   }
 }
 input.ibo-input-vanilla{
diff --git a/css/backoffice/components/popover-menu/_popover-menu.scss b/css/backoffice/components/popover-menu/_popover-menu.scss
index 8d9480ece..f66f7c3aa 100644
--- a/css/backoffice/components/popover-menu/_popover-menu.scss
+++ b/css/backoffice/components/popover-menu/_popover-menu.scss
@@ -10,6 +10,10 @@ $ibo-popover-menu--padding: $ibo-spacing-0 !default;
 
 $ibo-popover-menu--toggler-visual-hint--margin-left: 0.5rem !default;
 
+$ibo-popover-menu--section--height: 100% !default;
+$ibo-popover-menu--section--margin-x: $ibo-spacing-0 !default;
+$ibo-popover-menu--section--margin-y: $ibo-spacing-0 !default;
+
 $ibo-popover-menu--section-border-radius: $ibo-popover-menu--border-radius !default;
 
 .ibo-popover-menu {
@@ -35,8 +39,8 @@ $ibo-popover-menu--section-border-radius: $ibo-popover-menu--border-radius !defa
   display: flex;
   flex-direction: column;
   align-self: flex-start;
-  margin: $ibo-spacing-0 $ibo-spacing-0;
-  width: 100%;
+  margin: $ibo-popover-menu--section--margin-y $ibo-popover-menu--section--margin-x;
+  width: $ibo-popover-menu--section--height;
   white-space: nowrap;
   overflow: hidden; /* To avoid first/last entries of the menu to have no border-radius on hover */
 
diff --git a/css/backoffice/layout/_all.scss b/css/backoffice/layout/_all.scss
index 9634b4175..584fa15c6 100644
--- a/css/backoffice/layout/_all.scss
+++ b/css/backoffice/layout/_all.scss
@@ -6,6 +6,7 @@
 @import "navigation-menu";
 @import "top-bar";
 @import "content";
+@import "details";
 @import "tab-container/tab-container";
 @import "tab-container/tab";
 @import "multi-column/multi-column";
diff --git a/css/backoffice/layout/_content.scss b/css/backoffice/layout/_content.scss
index 5e235e34c..2709514a5 100644
--- a/css/backoffice/layout/_content.scss
+++ b/css/backoffice/layout/_content.scss
@@ -2,6 +2,9 @@
  * @copyright   Copyright (C) 2010-2024 Combodo SAS
  * @license     http://opensource.org/licenses/AGPL-3.0
  */
+$ibo-v-spacer--padding-top: 1em !default;
+$ibo-side-content--background-color: $ibo-content-block--background-color !default;
+$ibo-side-content--border-left: $ibo-content-block--border !default;
 
 /* Note: We have to wrap it in the ID in order to overload its rules, otherwise, the ID takes over the simple CSS class... */
 #ibo-center-container {
@@ -16,10 +19,10 @@
 }
 
 .ibo-v-spacer {
-  padding-top: 1em;
+  padding-top: $ibo-v-spacer--padding-top;
 }
 
 #ibo-side-content {
-  background-color: $ibo-content-block--background-color;
-  border-left: $ibo-content-block--border;
+  background-color: $ibo-side-content--background-color;
+  border-left: $ibo-side-content--border-left;
 }
diff --git a/css/backoffice/layout/_details.scss b/css/backoffice/layout/_details.scss
new file mode 100644
index 000000000..3da7f2391
--- /dev/null
+++ b/css/backoffice/layout/_details.scss
@@ -0,0 +1,9 @@
+/*
+ * @copyright   Copyright (C) 2010-2025 Combodo SAS
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+$ibo-details--margin-top: 5px !default;
+
+.ibo-details {
+  margin-top: $ibo-details--margin-top;
+}
\ No newline at end of file
diff --git a/css/backoffice/layout/_navigation-menu.scss b/css/backoffice/layout/_navigation-menu.scss
index 9cf793ca4..86abfc572 100644
--- a/css/backoffice/layout/_navigation-menu.scss
+++ b/css/backoffice/layout/_navigation-menu.scss
@@ -218,7 +218,8 @@ $ibo-navigation-menu--user-info--height--is-expanded: 100% !default;
 		.ibo-navigation-menu--body{
 			width: $ibo-navigation-menu--body--width-expanded;
 
-			.ibo-navigation-menu--toggler-bar{
+      /* Values are hardcoded to ease the animation and there's no point in overloading them */
+      .ibo-navigation-menu--toggler-bar{
 				&:nth-child(1){
 					top: 4px;
 					left: 7px;
@@ -412,6 +413,7 @@ $ibo-navigation-menu--user-info--height--is-expanded: 100% !default;
 	transition: all 0.2s linear;
 	background-color: $ibo-navigation-menu--body--text-color;
 
+  /* Values are hardcoded to ease the animation and there's no point in overloading them */
 	&:nth-child(1){
 		top: 0;
 	}
diff --git a/css/backoffice/layout/activity-panel/_activity-entry.scss b/css/backoffice/layout/activity-panel/_activity-entry.scss
index 783d68c76..7c19ac891 100644
--- a/css/backoffice/layout/activity-panel/_activity-entry.scss
+++ b/css/backoffice/layout/activity-panel/_activity-entry.scss
@@ -18,6 +18,7 @@ $ibo-activity-entry--medallion--has-no-image--background-color: $ibo-color-blue-
 $ibo-activity-entry--medallion--has-no-image--text-color: $ibo-color-white-100 !default;
 $ibo-activity-entry--medallion--has-no-image--border: 1px solid $ibo-color-grey-200 !default;
 
+$ibo-activity-entry--information--margin-to-side: $ibo-spacing-0 !default;
 $ibo-activity-entry--information--margin-to-other-side: $ibo-activity-entry--medallion--diameter + $ibo-activity-entry--medallion--margin-with-information !default;
 
 $ibo-activity-entry--main-information--padding-x: $ibo-spacing-500 !default;
@@ -88,7 +89,7 @@ $ibo-activity-panel--load-all-entries--is-hover--margin-left: ($ibo-activity-pan
 			margin-left: $ibo-activity-entry--medallion--margin-with-information;
 		}
 		.ibo-activity-entry--information{
-			margin-right: 0;
+			margin-right: $ibo-activity-entry--information--margin-to-side;
 			margin-left: $ibo-activity-entry--information--margin-to-other-side;
 		}
 		.ibo-activity-entry--main-information{
@@ -109,7 +110,7 @@ $ibo-activity-panel--load-all-entries--is-hover--margin-left: ($ibo-activity-pan
 	&:not(.ibo-is-current-user){
 		.ibo-activity-entry--information{
 			margin-right: $ibo-activity-entry--information--margin-to-other-side;
-			margin-left: 0;
+			margin-left: $ibo-activity-entry--information--margin-to-side;
 		}
 		/* Bubble tip on the left for last entry of the group */
 		&:last-child{
diff --git a/css/backoffice/layout/activity-panel/_activity-panel.scss b/css/backoffice/layout/activity-panel/_activity-panel.scss
index 408ef4a66..8f65f44ff 100644
--- a/css/backoffice/layout/activity-panel/_activity-panel.scss
+++ b/css/backoffice/layout/activity-panel/_activity-panel.scss
@@ -104,6 +104,7 @@ $ibo-activity-panel--add-caselog-entry-button--icon--line-height: 33px !default;
 $ibo-activity-panel--entry-forms-confirmation-explanation--spacing: $ibo-spacing-500 !default;
 $ibo-activity-panel--entry-forms-confirmation-preference-input--spacing: 0.5rem !default;
 
+$ibo-activity-panel--closed-cover--z-index: 2 !default;
 $ibo-activity-panel--closed-cover--background-color: $ibo-activity-panel--header--background-color !default;
 $ibo-activity-panel--open-icon--margin-left: 0.75rem !default;
 
@@ -433,14 +434,12 @@ $ibo-activity-panel--open-icon--margin-left: 0.75rem !default;
 .ibo-activity-panel--closed-cover {
   display: none;
   position: absolute;
-  z-index: 2; // Above the compose button and all
-  // padding-top: 64px;
+  z-index: $ibo-activity-panel--closed-cover--z-index; // Above the compose button and all
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   @extend %ibo-fully-centered-content;
-  // align-items: flex-start;
   background-color: $ibo-activity-panel--closed-cover--background-color;
   cursor: pointer;
 }
diff --git a/css/backoffice/layout/activity-panel/_caselog-entry-form.scss b/css/backoffice/layout/activity-panel/_caselog-entry-form.scss
index 4d71a8711..d26b085a2 100644
--- a/css/backoffice/layout/activity-panel/_caselog-entry-form.scss
+++ b/css/backoffice/layout/activity-panel/_caselog-entry-form.scss
@@ -11,7 +11,7 @@ $ibo-caselog-entry-form--actions--margin-top: $ibo-spacing-300 !default;
 $ibo-caselog-entry-form--actions--margin-bottom: $ibo-caselog-entry-form--actions--margin-top !default;
 
 $ibo-caselog-entry-form--lock-indicator--margin-top: $ibo-caselog-entry-form--padding-bottom !default;
-$ibo-caselog-entry-form--lock-icon--size: 32px !default;
+$ibo-caselog-entry-form--lock-icon--size: $ibo-size-350 !default;
 $ibo-caselog-entry-form--lock-icon--text-color: $ibo-color-grey-50 !default;
 $ibo-caselog-entry-form--lock-icon--background-color: $ibo-color-grey-800 !default;
 $ibo-caselog-entry-form--lock-icon--border-radius: $ibo-border-radius-full !default;
diff --git a/css/backoffice/layout/dashboard/_dashboard-editor.scss b/css/backoffice/layout/dashboard/_dashboard-editor.scss
index 93654c483..af107bc21 100644
--- a/css/backoffice/layout/dashboard/_dashboard-editor.scss
+++ b/css/backoffice/layout/dashboard/_dashboard-editor.scss
@@ -25,6 +25,10 @@ $ibo-dashboard-editor--delete-dashlet-icon--right: 9px !default;
 $ibo-dashboard-editor--delete-dashlet-icon--padding: $ibo-spacing-100 6px !default;
 $ibo-dashboard-editor--delete-dashlet-icon--z-index: 21 !default;
 
+$ibo-dashlet--properties--padding-bottom: 20px !default;
+$ibo-dashlet--properties--table--width: 100% !default;
+$ibo-dashlet--properties--table--cell--margin-bottom: 14px !default;
+
 
 .ibo-dashboard-editor--pane{
 	flex-grow: 1;
@@ -47,13 +51,13 @@ $ibo-dashboard-editor--delete-dashlet-icon--z-index: 21 !default;
 .ibo-dashlet--properties{
 	display: flex;
 	flex-direction: column;
-	padding-bottom: 20px;
+	padding-bottom: $ibo-dashlet--properties--padding-bottom;
 	table{
-    width: 100%;
+    width: $ibo-dashlet--properties--table--width;
     text-align: left;
 
     td, th {
-      margin-bottom: 14px;
+      margin-bottom: $ibo-dashlet--properties--table--cell--margin-bottom;
 
       .ibo-field {
         @extend %ibo-font-size-100;
diff --git a/css/backoffice/layout/dashboard/_dashboard.scss b/css/backoffice/layout/dashboard/_dashboard.scss
index 8bb8b96cd..74404cc38 100644
--- a/css/backoffice/layout/dashboard/_dashboard.scss
+++ b/css/backoffice/layout/dashboard/_dashboard.scss
@@ -7,8 +7,38 @@
 $ibo-dashboard--grid--width: 100% !default;
 $ibo-dashboard--grid--elements-spacing-x: $ibo-dashlet--elements-spacing-x !default;
 $ibo-dashboard--grid--elements-spacing-y: $ibo-dashlet--elements-spacing-y !default;
+$ibo-dashboard--grid--edit-mode--margin: 1px !default;
+$ibo-dashboard--grid--edit-mode--border-color: $ibo-color-grey-400 !default;
+$ibo-dashboard--grid--edit-mode--border: 2px $ibo-dashboard--grid--edit-mode--border-color dashed !default;
+$ibo-dashboard--grid--edit-mode--width: 100% !default;
+$ibo-dashboard--grid--edit-mode--min-height: 40px !default;
+
 $ibo-dashboard--top-bar-padding-bottom: 20px !default;
 
+$ibo-dashboard--selector--margin-left: $ibo-spacing-400 !default;
+$ibo-dashboard--selector--margin-right: 1 !default;
+$ibo-dashboard--selector--hover--background-color: $ibo-color-secondary-100 !default;
+$ibo-dashboard--selector--hover--border-radius: $ibo-button--border-radius !default;
+$ibo-dashboard--selector--selector-label--margin-x: 10px !default;
+
+$ibo-dashboard--switch--width: 30px !default;
+$ibo-dashboard--switch--height: $ibo-size-300 !default;
+
+$ibo-dashboard--slider--before--content: "\f007" !default;
+$ibo-dashboard--slider--before--font-size: $ibo-font-size-50 !default;
+$ibo-dashboard--slider--before--color: $ibo-color-secondary-800 !default;
+$ibo-dashboard--slider--before--right: 5px !default;
+$ibo-dashboard--slider--before--bottom: 3px !default;
+
+$ibo-dashboard--slider--after--content: "\f1ad" !default;
+$ibo-dashboard--slider--after--font-size: $ibo-font-size-150 !default;
+$ibo-dashboard--slider--after--color: $ibo-color-primary-600 !default;
+$ibo-dashboard--slider--after--left: 6px !default;
+$ibo-dashboard--slider--after--bottom: 1px !default;
+
+
+
+
 /* Rules */
 .ibo-dashboard--top-bar {
   @extend %ibo-full-height-content;
@@ -30,18 +60,18 @@ $ibo-dashboard--top-bar-padding-bottom: 20px !default;
 .ibo-dashboard--selector {
   display: flex;
   align-items: center;
-  margin-left: 12px;
-  margin-right: 1px;
+  margin-left: $ibo-dashboard--selector--margin-left;
+  margin-right: $ibo-dashboard--selector--margin-right;
 
   &:hover {
-    background-color: $ibo-color-secondary-100;
-    border-radius: $ibo-button--border-radius;
+    background-color: $ibo-dashboard--selector--hover--background-color;
+    border-radius: $ibo-dashboard--selector--hover--border-radius;
   }
 
   .selector-label {
     display: inline-block;
-    margin-left: 10px;
-    margin-right: 10px;
+    margin-left: $ibo-dashboard--selector--selector-label--margin-x;
+    margin-right: $ibo-dashboard--selector--selector-label--margin-x;
     vertical-align: super;
   }
 }
@@ -75,7 +105,7 @@ $ibo-dashboard--top-bar-padding-bottom: 20px !default;
   margin: calc(-1 * #{$ibo-dashboard--grid--elements-spacing-y} / 2) calc(-1 * #{$ibo-dashboard--grid--elements-spacing-x} / 2); /* Because of the margin all around the dashlets, we need to compensate it */
   min-width: 0;
 
-  /* Compensate negative margin on inner borders to simulate egal dashlets spacing between columns */
+  /* Compensate negative margin on inner borders to simulate equal dashlets spacing between columns */
   &:not(:last-child) {
     margin-right: 0;
   }
@@ -85,10 +115,10 @@ $ibo-dashboard--top-bar-padding-bottom: 20px !default;
   }
 
   &.edit_mode {
-    margin: 1px;
-    border: 2px #ccc dashed;
-    width: 100%;
-    min-height: 40px;
+    margin: $ibo-dashboard--grid--edit-mode--margin;
+    border: $ibo-dashboard--grid--edit-mode--border;
+    width: $ibo-dashboard--grid--edit-mode--width;
+    min-height: $ibo-dashboard--grid--edit-mode--min-height;
   }
 }
 
@@ -98,8 +128,8 @@ $ibo-dashboard--top-bar-padding-bottom: 20px !default;
 .ibo-dashboard--switch {
   position: relative;
   display: inline-block;
-  width: 30px;
-  height: 24px;
+  width: $ibo-dashboard--switch--width;
+  height: $ibo-dashboard--switch--height;
   vertical-align: baseline;
 }
 
@@ -119,31 +149,29 @@ $ibo-dashboard--top-bar-padding-bottom: 20px !default;
 }
 
 .ibo-dashboard--slider:before {
+  @extend %fa-solid-base;
+  content: $ibo-dashboard--slider--before--content;
+  font-size: $ibo-dashboard--slider--before--font-size;
+  color: $ibo-dashboard--slider--before--color;
   position: absolute;
-  right: 5px;
-  bottom: 3px;
-  color: $ibo-color-secondary-800;
-  content: "\f007";
-  font-family: "Font Awesome 5 Free", serif;
-  font-size: $ibo-font-size-50;
-  font-weight: 900;
+  right: $ibo-dashboard--slider--before--right;
+  bottom: $ibo-dashboard--slider--before--bottom;
 }
 
 .ibo-dashboard--slider:after {
+  @extend %fa-solid-base;
+  content: $ibo-dashboard--slider--after--content;
+  font-size: $ibo-dashboard--slider--after--font-size;
+  color: $ibo-dashboard--slider--after--color;
   position: absolute;
-  left: 6px;
-  bottom: 1px;
-  color: $ibo-color-primary-600;
-  content: "\f1ad";
-  font-family: "Font Awesome 5 Free", serif;
-  font-size: $ibo-font-size-150;
-  font-weight: 900;
+  left: $ibo-dashboard--slider--after--left;
+  bottom: $ibo-dashboard--slider--after--bottom;
 }
 
 input:checked + .ibo-dashboard--slider:before {
-  content: "\f1ad";
+  content: $ibo-dashboard--slider--after--content;
 }
 
 input:checked + .ibo-dashboard--slider:after {
-  content: "\f007";
+  content: $ibo-dashboard--slider--before--content;
 }
diff --git a/css/backoffice/layout/multi-column/_column.scss b/css/backoffice/layout/multi-column/_column.scss
index c803fae54..a494c1345 100644
--- a/css/backoffice/layout/multi-column/_column.scss
+++ b/css/backoffice/layout/multi-column/_column.scss
@@ -4,10 +4,15 @@
  */
 
 $ibo-column--min-width: 300px !default;
-$ibo-mini-column--min-width: 30px !default;
 $ibo-column--padding-x: abs($ibo-multi-column--margin-x) !default;
 $ibo-column--padding-y: $ibo-spacing-0 !default;
 
+$ibo-mini-column--min-width: 30px !default;
+$ibo-mini-column--padding-x: $ibo-column--padding-x !default;
+$ibo-mini-column--padding-y: $ibo-column--padding-y !default;
+$ibo-mini-column--button-margin-left: $ibo-spacing-0 !default;
+$ibo-mini-column--button-margin-right: $ibo-spacing-0 !default;
+
 $ibo-column--margin-bottom--is-last-element: $ibo-spacing-800 !default;
 
 .ibo-column {
@@ -26,14 +31,14 @@ $ibo-column--margin-bottom--is-last-element: $ibo-spacing-800 !default;
   min-width: $ibo-mini-column--min-width;
   flex-grow: 1;
   flex-shrink: 1;
-  padding: $ibo-column--padding-y $ibo-column--padding-x;
+  padding: $ibo-mini-column--padding-y $ibo-mini-column--padding-x;
   flex-basis: 10%;
   display: flex;
   flex-direction: column;
   
   >.ibo-button{
-    margin-left: 0;
-    margin-right: 0;
+    margin-left: $ibo-mini-column--button-margin-left;
+    margin-right: $ibo-mini-column--button-margin-right;
   }
   &:not(:last-child) {
     margin-bottom: $ibo-column--margin-bottom--is-last-element;
diff --git a/css/backoffice/layout/multi-column/_multi-column.scss b/css/backoffice/layout/multi-column/_multi-column.scss
index 41edcfe67..75d495047 100644
--- a/css/backoffice/layout/multi-column/_multi-column.scss
+++ b/css/backoffice/layout/multi-column/_multi-column.scss
@@ -3,7 +3,7 @@
  * @license     http://opensource.org/licenses/AGPL-3.0
  */
 
-$ibo-multi-column--margin-x: -16px !default; /* This is to compensate columns padding and make the whole multicolumn align with the parent borders (cf. Bootstrap rows / cols) */
+$ibo-multi-column--margin-x: -$ibo-spacing-500 !default; /* This is to compensate columns padding and make the whole multicolumn align with the parent borders (cf. Bootstrap rows / cols) */
 $ibo-multi-column--margin-y: $ibo-spacing-0 !default;
 
 .ibo-multi-column {
diff --git a/css/backoffice/layout/object/_object-details.scss b/css/backoffice/layout/object/_object-details.scss
index c4a05cdd2..8ff0b00f9 100644
--- a/css/backoffice/layout/object/_object-details.scss
+++ b/css/backoffice/layout/object/_object-details.scss
@@ -16,6 +16,8 @@ $ibo-object-details--icon--spacing--as-medallion--is-sticking: $ibo-object-detai
 $ibo-object-details--status-dot--size: 10px !default;
 $ibo-object-details--status-dot--spacing: $ibo-spacing-300 !default;
 $ibo-object-details--status-dot--border-radius: $ibo-border-radius-full !default;
+$ibo-object-details--status--class--before--content: "(" !default;
+$ibo-object-details--status--class--after--content: ")" !default;
 
 $ibo-object-details--tag--sibling-spacing: $ibo-spacing-400 !default;
 $ibo-object-details--tag--color: $ibo-panel--subtitle--color !default;
@@ -86,11 +88,11 @@ $ibo-object-details--header-right--padding-right--is-sticking: $ibo-spacing-300
   display: inline-flex; /* To avoid having spaces around the class name due to the indentation */
 
   &::before {
-    content: "(";
+    content: $ibo-object-details--status--class--before--content;
   }
 
   &::after {
-    content: ")";
+    content: $ibo-object-details--status--class--after--content;
   }
 }
 
diff --git a/css/backoffice/layout/wizard-container/_wizard-container.scss b/css/backoffice/layout/wizard-container/_wizard-container.scss
index 2ad5ab002..904343c60 100644
--- a/css/backoffice/layout/wizard-container/_wizard-container.scss
+++ b/css/backoffice/layout/wizard-container/_wizard-container.scss
@@ -5,12 +5,13 @@
 
 $ibo-wizard-container--padding: 10px $ibo-spacing-500 !default;
 $ibo-wizard-container--background-color: $ibo-color-blue-200 !default;
+$ibo-wizard-container--border-radius: $ibo-border-radius-300 !default;
 $ibo-wizard-container--border-color: $ibo-color-blue-600 !default;
 $ibo-wizard-container--border-width: 3px !default;
 
 .ibo-wizard-container {
 	padding: $ibo-wizard-container--padding;
 	background: $ibo-wizard-container--background-color;
-	border-radius: $ibo-border-radius-300;
+	border-radius: $ibo-wizard-container--border-radius;
 	border-left: $ibo-wizard-container--border-width solid $ibo-wizard-container--border-color;
 }
\ No newline at end of file
diff --git a/css/backoffice/pages/_attachments.scss b/css/backoffice/pages/_attachments.scss
index 0a6a1efe8..7a3be6ce7 100644
--- a/css/backoffice/pages/_attachments.scss
+++ b/css/backoffice/pages/_attachments.scss
@@ -63,11 +63,10 @@ $ibo-attachment--tab-header--drop-in--icon--color: $ibo-color-blue-600 !default;
     background-color: $ibo-attachment--tab-header--drop-in--background-color;
     color: $ibo-attachment--tab-header--drop-in--color;
     > a::after{
-      padding-left: $ibo-attachment--tab-header--drop-in--icon--padding-left;
-      font-family: "Font Awesome 5 Free";
       content: $ibo-attachment--tab-header--drop-in--icon--content;
-      font-weight: 900;
-      color: $ibo-color-blue-600;
+      @extend %fa-solid-base;
+      padding-left: $ibo-attachment--tab-header--drop-in--icon--padding-left;
+      color: $ibo-attachment--tab-header--drop-in--icon--color;
     }
   }
 }
\ No newline at end of file
diff --git a/css/backoffice/pages/_audit.scss b/css/backoffice/pages/_audit.scss
index 9788558ed..f39c24b1b 100644
--- a/css/backoffice/pages/_audit.scss
+++ b/css/backoffice/pages/_audit.scss
@@ -19,18 +19,19 @@ $ibo-audit--audit-line--csv-download--height: 2.5em !default;
 $ibo-audit--audit-line--status-indicator--diameter: 12px !default;
 $ibo-audit--audit-line--status-indicator--margin-right: 5px !default;
 
-
+/* Use semantic colors to ease accessibility */
 $ibo-audit--status--color: (
   'red': (
-    $ibo-color-red-700,
+    $ibo-color-danger-700,
   ),
   'orange': (
-    $ibo-color-orange-700,
+    $ibo-color-warning-700,
   ),
   'green': (
-    $ibo-color-green-800,
+    $ibo-color-success-800,
   ),
 );
+
 @each $sColor, $aAttributes in $ibo-audit--status--color {
   $bg-color: nth($aAttributes, 1);
   .ibo-audit--audit-category--panel .ibo-panel--body {
diff --git a/css/backoffice/pages/_csv-import.scss b/css/backoffice/pages/_csv-import.scss
index 19bc963ce..929ffbef9 100644
--- a/css/backoffice/pages/_csv-import.scss
+++ b/css/backoffice/pages/_csv-import.scss
@@ -7,6 +7,7 @@ $ibo-csv-import--cell-message--padding-top: 3px !default;
 $ibo-csv-import--cell-modified--color: $ibo-color-blue-700 !default;
 $ibo-csv-import--cell-error--color: $ibo-color-red-700 !default;
 $ibo-csv-import--row--border-color: $ibo-color-grey-400 !default;
+$ibo-csv-import--row--border:  1px $ibo-csv-import--row--border-color solid !default;
 $ibo-csv-import--row-error--background-color: $ibo-color-red-200 !default;
 $ibo-csv-import--download-file--color: $ibo-color-primary-400 !default;
 $ibo-csv-import--download-file--font-size: 4em !default;
@@ -31,20 +32,20 @@ div.ibo-csv-import--cell-message {
 }
 
 tr.ibo-csv-import--row-unchanged td {
-  border-bottom: 1px $ibo-csv-import--row--border-color solid;
+  border-bottom: $ibo-csv-import--row--border;
 }
 
 .wizContainer table tr.ibo-csv-import--row-error td {
-  border-bottom: 1px $ibo-csv-import--row--border-color solid;
+  border-bottom: $ibo-csv-import--row--border;
   background-color: $ibo-csv-import--row-error--background-color;
 }
 
 tr.ibo-csv-import--row-modified td {
-  border-bottom: 1px $ibo-csv-import--row--border-color solid;
+  border-bottom: $ibo-csv-import--row--border;
 }
 
 tr.ibo-csv-import--row-added td {
-  border-bottom: 1px $ibo-csv-import--row--border-color solid;
+  border-bottom: $ibo-csv-import--row--border;
 }
 
 .ibo-csv-import--download-file {
diff --git a/css/backoffice/pages/_data-synchro.scss b/css/backoffice/pages/_data-synchro.scss
index 39cd4af82..956329ce7 100644
--- a/css/backoffice/pages/_data-synchro.scss
+++ b/css/backoffice/pages/_data-synchro.scss
@@ -11,6 +11,9 @@ $ibo-data-synchro-source--replicas-table--cell--arrow--min-width: 100px !default
 
 $ibo-data-synchro-source--replicas-status--warning--margin: $ibo-spacing-0 5px $ibo-spacing-0 $ibo-spacing-300 !default;
 
+$ibo-data-synchro-source--replicas-status-separator--border-color: $ibo-color-white-100 !default;
+$ibo-data-synchro-source--replicas-status-separator--border: 2px solid $ibo-data-synchro-source--replicas-status-separator--border-color !default;
+
 $ibo-data-synchro-source--replicas-status--color: (
         'grey': (
                 $ibo-color-grey-400,
@@ -42,6 +45,10 @@ $ibo-data-synchro-source--replicas-status--color: (
         ),
 ) !default;
 
+$ibo-data-synchro-source--synoptics--cell--arrow--border-color: $ibo-color-grey-50 !default;
+$ibo-data-synchro-source--synoptics--cell--arrow--border: 2px solid $ibo-data-synchro-source--synoptics--cell--arrow--border-color !default;
+
+
 @each $sColor, $aAttributes in $ibo-data-synchro-source--replicas-status--color {
   $bg-color: nth($aAttributes, 1);
   $color: nth($aAttributes, 2);
@@ -50,8 +57,9 @@ $ibo-data-synchro-source--replicas-status--color: (
       background-color: $bg-color;
   }
 }
+
 .ibo-data-synchro-source--replicas-status-separator {
-  border-top: 2px solid $ibo-color-white-100;
+  border-top: $ibo-data-synchro-source--replicas-status-separator--border-color;
 }
 
 .ibo-data-synchro-source--replicas-status.ibo-is-light{
@@ -67,7 +75,7 @@ $ibo-data-synchro-source--replicas-status--color: (
   text-align: center;
   &.arrow {
     min-width: $ibo-data-synchro-source--replicas-table--cell--arrow--min-width;
-    border-top: 2px solid $ibo-color-grey-50;
+    border-top: $ibo-data-synchro-source--synoptics--cell--arrow--border;
   }
 }
 .ibo-data-synchro-source--replicas-status--warning{
diff --git a/css/backoffice/pages/_datamodel-viewer.scss b/css/backoffice/pages/_datamodel-viewer.scss
index 5a655186f..99c296bc7 100644
--- a/css/backoffice/pages/_datamodel-viewer.scss
+++ b/css/backoffice/pages/_datamodel-viewer.scss
@@ -29,12 +29,14 @@ $ibo-datamodel-viewer--schema--self-referencing--hover--fill: $ibo-datamodel-vie
 $ibo-datamodel-viewer--schema--tooltip--fill: $ibo-color-white-100 !default;
 $ibo-datamodel-viewer--schema--tooltip--background-color: $ibo-color-grey-900 !default;
 $ibo-datamodel-viewer--schema--tooltip--border-color: $ibo-color-grey-700 !default;
+$ibo-datamodel-viewer--schema--tooltip--border: 1px solid $ibo-datamodel-viewer--schema--tooltip--border-color !default;
 $ibo-datamodel-viewer--schema--tooltip--border-radius: $ibo-border-radius-300 !default;
 
 $ibo-datamodel-viewer--schema--tooltip--icon--font-size: $ibo-font-size-100 !default;
 $ibo-datamodel-viewer--schema--tooltip--span--margin: 3px !default;
 
 $ibo-datamodel-viewer--schema--tooltip-top--border-color: $ibo-color-grey-700 !default;
+$ibo-datamodel-viewer--schema--tooltip-top--border: 1px solid $ibo-datamodel-viewer--schema--tooltip-top--border-color !default;
 $ibo-datamodel-viewer--schema--tooltip-top--padding: 3px !default;
 
 $ibo-datamodel-viewer--lifecycle-image--margin-bottom: $ibo-spacing-500 !default;
@@ -116,7 +118,7 @@ $ibo-datamodel-viewer--lifecycle-image--margin-bottom: $ibo-spacing-500 !default
   position: fixed;
   text-align: center;
   background: $ibo-datamodel-viewer--schema--tooltip--fill;
-  border: 1px solid $ibo-datamodel-viewer--schema--tooltip--border-color;
+  border: $ibo-datamodel-viewer--schema--tooltip--border;
   border-radius: $ibo-datamodel-viewer--schema--tooltip--border-radius;
   pointer-events: none;
   fill: $ibo-datamodel-viewer--schema--tooltip--background-color;
@@ -132,7 +134,7 @@ $ibo-datamodel-viewer--lifecycle-image--margin-bottom: $ibo-spacing-500 !default
 
 #tooltipD3_top {
   @extend %ibo-font-ral-bol-100;
-  border-bottom: 1px solid $ibo-datamodel-viewer--schema--tooltip-top--border-color;
+  border-bottom: $ibo-datamodel-viewer--schema--tooltip-top--border;
   padding: $ibo-datamodel-viewer--schema--tooltip-top--padding;
 }
 
diff --git a/css/backoffice/pages/_impact-analysis.scss b/css/backoffice/pages/_impact-analysis.scss
index 31375bea1..81d3ef63b 100644
--- a/css/backoffice/pages/_impact-analysis.scss
+++ b/css/backoffice/pages/_impact-analysis.scss
@@ -22,6 +22,10 @@ $ibo-display-graph--search-box--criterion--content--padding-x: 15px !default;
 
 $ibo-display-graph--search-box--criterion--content--checkbox--margin-right: 10px !default;
 
+$ibo-display-graph--graph-grouping-threshold--padding-right: $ibo-spacing-0 !default;
+
+$ibo-display-graph--impacted-placeholder-height: $ibo-size-650 !default;
+
 .itop-simple-graph {
   margin-top: $ibo-simple-graph--margin-top;
   border: 1px dotted transparent;
@@ -83,7 +87,7 @@ $ibo-display-graph--search-box--criterion--content--checkbox--margin-right: 10px
 }
 #graph_grouping_threshold{
   width: auto;
-  padding-right: 0;
+  padding-right: $ibo-display-graph--graph-grouping-threshold--padding-right;
 }  
 .ibo-display-graph--search-box {
   .sf_criterion_area{
@@ -121,5 +125,5 @@ $ibo-display-graph--search-box--criterion--content--checkbox--margin-right: 10px
   }
 }
 #impacted_objects_lists_placeholder, #impacted_groups_placeholder{
-  height: 250px;
+  height: $ibo-display-graph--impacted-placeholder-height;
 }
diff --git a/css/backoffice/pages/_notifications-center.scss b/css/backoffice/pages/_notifications-center.scss
index 6fe771fb9..45cd8b146 100644
--- a/css/backoffice/pages/_notifications-center.scss
+++ b/css/backoffice/pages/_notifications-center.scss
@@ -2,6 +2,7 @@
  * @copyright   Copyright (C) 2010-2024 Combodo SARL
  * @license     http://opensource.org/licenses/AGPL-3.0
  */
+$ibo-input-select--notification-item--mixed-value--font-size: $ibo-font-size-100 !default;
 $ibo-input-select--notification-item--mixed-value--color: $ibo-color-primary-800 !default;
 $ibo-input-select--notification-item--mixed-value--margin-left: 4px !default;
 
@@ -12,7 +13,7 @@ $ibo-input-select--notification-item--mixed-value--margin-left: 4px !default;
 }
 
 .ibo-input-select--notification-item--mixed-value{
-  font-size: $ibo-font-size-100;
+  font-size: $ibo-input-select--notification-item--mixed-value--font-size;
   color: $ibo-input-select--notification-item--mixed-value--color;
   margin-left: $ibo-input-select--notification-item--mixed-value--margin-left;
 }
\ No newline at end of file
diff --git a/css/backoffice/pages/_notifications.scss b/css/backoffice/pages/_notifications.scss
index 25cf94a1d..de9d78405 100644
--- a/css/backoffice/pages/_notifications.scss
+++ b/css/backoffice/pages/_notifications.scss
@@ -4,11 +4,15 @@
  */
 
 $ibo-notifications--view-all--container--grid-gap: $ibo-spacing-600 !default;
+$ibo-notifications--view-all--container--object-summary--title--font-size: $ibo-font-size-250 !default;
+$ibo-notifications--view-all--container--object-summary--toolbar--min-width: $ibo-size-500 !default;
 $ibo-notifications--view-all--container--object-summary--panel--body--max-height: 400px !default;
 
 $ibo-notifications--view-all--item--unread--highlight--background-color: $ibo-color-red-600 !default;
 $ibo-notifications--view-all--item--read--highlight--background-color: $ibo-color-grey-200 !default;
 
+$ibo-notifications--view-all--container--read-unread--action--margin-left: $ibo-spacing-0 !default;
+
 $ibo-notifications--view-all--container--large--grid-template-columns: repeat(3, 1fr) !default;
 $ibo-notifications--view-all--container--medium--grid-template-columns: repeat(2, 1fr) !default;
 $ibo-notifications--view-all--container--small--grid-template-columns: repeat(1, 1fr) !default;
@@ -20,10 +24,10 @@ $ibo-notifications--view-all--empty--svg--max-width: 30% !default;
   display: grid;
   grid-gap: $ibo-notifications--view-all--container--grid-gap;
   .ibo-object-summary  .ibo-panel--title{
-    font-size: $ibo-font-size-250;
+    font-size: $ibo-notifications--view-all--container--object-summary--title--font-size;
   }  
   .ibo-object-summary  .ibo-panel--toolbar{
-    min-width: 102px;
+    min-width: $ibo-notifications--view-all--container--object-summary--toolbar--min-width;
   }
   .ibo-object-summary > .ibo-panel--body{
     box-shadow: none;
@@ -59,7 +63,7 @@ $ibo-notifications--view-all--empty--svg--max-width: 30% !default;
   
 .ibo-notifications--view-all--container {
   .ibo-notifications--view-all--read-action, .ibo-notifications--view-all--unread-action {
-    margin-left: 0 !important;
+    margin-left: $ibo-notifications--view-all--container--read-unread--action--margin-left !important;
   }
 }
 
diff --git a/css/backoffice/pages/_oauth.wizard.scss b/css/backoffice/pages/_oauth.wizard.scss
index 04fb33089..9ff2f515b 100644
--- a/css/backoffice/pages/_oauth.wizard.scss
+++ b/css/backoffice/pages/_oauth.wizard.scss
@@ -1,3 +1,9 @@
+/*
+ * @copyright   Copyright (C) 2010-2024 Combodo SAS
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+$ibo-oauth-wizard--illustration--svg--max-height: $ibo-size-700 !default;
+
 .ibo-oauth-wizard .ibo-panel--body{
   .ibo-oauth-wizard--form--container{
     display: flex;
@@ -8,7 +14,7 @@
 
   }
   .ibo-oauth-wizard--illustration svg{
-    max-height: 400px;
+    max-height: $ibo-oauth-wizard--illustration--svg--max-height;
   }
 }
 #ibo-oauth-wizard--conf--result{
diff --git a/css/backoffice/pages/_preferences.scss b/css/backoffice/pages/_preferences.scss
index 99271bc0f..ed2230198 100644
--- a/css/backoffice/pages/_preferences.scss
+++ b/css/backoffice/pages/_preferences.scss
@@ -9,6 +9,8 @@ $ibo-preferences--user-preferences--picture-placeholder--image--diameter: 54px !
 $ibo-preferences--user-preferences--picture-placeholder--image--border-radius: $ibo-border-radius-full !default;
 $ibo-preferences--user-preferences--picture-placeholder--image--margin: $ibo-spacing-400 !default;
 $ibo-preferences--user-preferences--picture-placeholder--image--background-color: $ibo-color-grey-300 !default;
+$ibo-preferences--user-preferences--picture-placeholder--image--border-color: $ibo-preferences--user-preferences--picture-placeholder--image--background-color !default;
+$ibo-preferences--user-preferences--picture-placeholder--image--border: solid 3px $ibo-preferences--user-preferences--picture-placeholder--image--border-color !default;
 
 $ibo-preferences--user-preferences--picture-placeholder--image--active--border-color: $ibo-color-blue-800;
 $ibo-preferences--user-preferences--picture-placeholder--image--hover--border-color: $ibo-color-blue-600;
@@ -18,6 +20,8 @@ $ibo-keyboard-shortcut--shortcut--width: 30% !default;
 $ibo-keyboard-shortcut--input--color: $ibo-color-grey-800 !default;
 $ibo-keyboard-shortcut--input--background-color: transparent !default;
 $ibo-keyboard-shortcut--input--border-color: $ibo-color-grey-500 !default;
+$ibo-keyboard-shortcut--input--border:  1px solid $ibo-keyboard-shortcut--input--border-color !default;
+$ibo-keyboard-shortcut--input--border-bottom:  2px solid $ibo-keyboard-shortcut--input--border-color !default;
 $ibo-keyboard-shortcut--input--border-radius: $ibo-border-radius-300 !default;
 $ibo-keyboard-shortcut--input--padding-y: $ibo-spacing-100 !default;
 $ibo-keyboard-shortcut--input--padding-x: $ibo-spacing-200 !default;
@@ -26,6 +30,8 @@ $ibo-keyboard-shortcut--input--margin-bottom: 5px !default;
 $ibo-keyboard-shortcut--input--is-focus--color: $ibo-color-primary-800 !default;
 $ibo-keyboard-shortcut--input--is-focus--border-color: $ibo-color-primary-600 !default;
 
+$ibo-favorite-organizations--toolbar--padding-top: $ibo-button--padding-y/2 !default;
+
 #ibo-main-content >.ibo-panel{
   margin-left: $ibo-preferences--panel--margin-x;
   margin-right: $ibo-preferences--panel--margin-x;
@@ -41,7 +47,7 @@ $ibo-keyboard-shortcut--input--is-focus--border-color: $ibo-color-primary-600 !d
   width: $ibo-preferences--user-preferences--picture-placeholder--image--diameter;
   border-radius: $ibo-preferences--user-preferences--picture-placeholder--image--border-radius;
   margin: $ibo-preferences--user-preferences--picture-placeholder--image--margin;
-  border: solid 3px $ibo-preferences--user-preferences--picture-placeholder--image--background-color;
+  border: $ibo-preferences--user-preferences--picture-placeholder--image--border;
 
   > img{
     border-radius: $ibo-preferences--user-preferences--picture-placeholder--image--border-radius;
@@ -72,8 +78,8 @@ $ibo-keyboard-shortcut--input--is-focus--border-color: $ibo-color-primary-600 !d
 
   color: $ibo-keyboard-shortcut--input--color;
   background-color: $ibo-keyboard-shortcut--input--background-color;
-  border: 1px solid $ibo-keyboard-shortcut--input--border-color;
-  border-bottom: 2px solid $ibo-keyboard-shortcut--input--border-color;
+  border: $ibo-keyboard-shortcut--input--border;
+  border-bottom: $ibo-keyboard-shortcut--input--border-bottom;
   border-radius: $ibo-keyboard-shortcut--input--border-radius;
 
   padding: $ibo-keyboard-shortcut--input--padding-y $ibo-keyboard-shortcut--input--padding-x;
@@ -92,5 +98,5 @@ $ibo-keyboard-shortcut--input--is-focus--border-color: $ibo-color-primary-600 !d
 }
 
 #ibo-favorite-organizations .ibo-datatable--toolbar {
-  padding-top: $ibo-button--padding-y/2;
+  padding-top: $ibo-favorite-organizations--toolbar--padding-top;
 }
\ No newline at end of file
diff --git a/css/backoffice/themes/page-banner.scss b/css/backoffice/themes/page-banner.scss
index c03554ab8..5b00615cc 100644
--- a/css/backoffice/themes/page-banner.scss
+++ b/css/backoffice/themes/page-banner.scss
@@ -6,14 +6,15 @@
 $ibo-page-banner--background-color: $ibo-color-red-600 !default;
 $ibo-page-banner--text-color: $ibo-color-red-100 !default;
 $ibo-page-banner--text-content: "THIS IS NOT PRODUCTION INSTANCE" !default;
-
+$ibo-page-banner--padding: 0.2 !default;
+$ibo-page-banner--font-size: 1rem !default;
 
 #ibo-page-banner::before {
   display: block;
   width: 100%;
-  padding: 0.2rem;
+  padding: $ibo-page-banner--padding;
   text-align: center;
-  font-size: 1rem;
+  font-size: $ibo-page-banner--font-size;
   background: $ibo-page-banner--background-color;
   color: $ibo-page-banner--text-color;
   content: $ibo-page-banner--text-content;
diff --git a/css/backoffice/utils/helpers/_text-decoration.scss b/css/backoffice/utils/helpers/_text-decoration.scss
index 516f9d27b..b5b73b0f6 100644
--- a/css/backoffice/utils/helpers/_text-decoration.scss
+++ b/css/backoffice/utils/helpers/_text-decoration.scss
@@ -19,6 +19,9 @@ $ibo-hyperlink-text-decoration--on-hover: $common-hyperlink-text-decoration--on-
 $ibo-hyperlink-color--on-active: $common-hyperlink-color--on-active !default;
 $ibo-hyperlink-text-decoration--on-active: $common-hyperlink-text-decoration--on-active !default;
 
+$ibo-paragraph--spacing-top: 0.25em !default;
+$ibo-paragraph--spacing-bottom: 0.25em !default;
+
 $ibo-figure--spacing-x: $common-figure--spacing-x !default; /* Mind that this matches Bulma rule for figure */
 $ibo-figure--spacing-y: $common-figure--spacing-y !default;
 
@@ -122,8 +125,8 @@ $ibo-figure--spacing-y: $common-figure--spacing-y !default;
   }
 
   p {
-    margin-top: 0.25em;
-    margin-bottom: 0.25em;
+    margin-top: $ibo-paragraph--spacing-top;
+    margin-bottom: $ibo-paragraph--spacing-bottom;
   }
 
   figure {
diff --git a/css/backoffice/utils/mixins/_selectable.scss b/css/backoffice/utils/mixins/_selectable.scss
index 327a91f3d..d714a3805 100644
--- a/css/backoffice/utils/mixins/_selectable.scss
+++ b/css/backoffice/utils/mixins/_selectable.scss
@@ -3,12 +3,15 @@
  * @license     http://opensource.org/licenses/AGPL-3.0
  */
 
+$ibo-selectable--content: ' ' !default;
 $ibo-selectable--background-color: $common-selectable--background-color !default;
 
+$ibo-selectable--hover--content: '\f058' !default;
 $ibo-selectable--hover--color: $common-selectable--hover--color !default;
 $ibo-selectable--hover--background-color: $common-selectable--hover--background-color !default;
 $ibo-selectable--hover--background-opacity: $common-selectable--hover--background-opacity !default;
 
+$ibo-selected--content: '\f058' !default;
 $ibo-selected--color: $common-selected--color !default;
 $ibo-selected--background-color: $common-selected--background-color !default;
 $ibo-selected--background-opacity: $common-selected--background-opacity !default;
@@ -17,21 +20,21 @@ $ibo-selected--hover--background-color: $common-selected--hover--background-colo
 $ibo-selected--hover--background-opacity: $common-selected--hover--background-opacity !default;
 
 @mixin ibo-selectable {
-  content: ' ';
+  content: $ibo-selectable--content;
   @extend %fa-solid-base;
   background-color: $ibo-selectable--background-color;
   cursor: pointer;
 }
 @mixin ibo-selectable-hover {
   @extend %fa-regular-base;
-  content: '\f058';
+  content: $ibo-selectable--hover--content;
   color: $ibo-selectable--hover--color;
   background-color: transparentize($ibo-selectable--hover--background-color, $ibo-selectable--hover--background-opacity);
 }
 
 @mixin ibo-selected {
   @extend %fa-solid-base;
-  content: '\f058';
+  content: $ibo-selected--content;
   color: $ibo-selected--color;
   background-color: transparentize($ibo-selected--background-color, $ibo-selected--background-opacity);
 }