diff --git a/addons/mail/static/src/components/activity/activity.scss b/addons/mail/static/src/components/activity/activity.scss
index 06e8c5eb63f..5addfd338bd 100644
--- a/addons/mail/static/src/components/activity/activity.scss
+++ b/addons/mail/static/src/components/activity/activity.scss
@@ -35,7 +35,7 @@
 }
 
 .o_Activity_note p {
-    margin-bottom: 0;
+    margin-bottom: map-get($spacers, 0);
 }
 
 .o_Activity_sidebar {
@@ -72,7 +72,7 @@
 }
 
 .o_mail_note_title + div p {
-    margin-bottom: 0;
+    margin-bottom: map-get($spacers, 0);
 }
 
 // ------------------------------------------------------------------
@@ -112,7 +112,7 @@ $o-mail-activity-today-color: o-text-color('warning') !default;
 }
 
 .o_Activity_detailsUserAvatar {
-    border-radius: 50%;
+    @extend .rounded-circle;
 }
 
 .o_Activity_dueDateText {
@@ -152,8 +152,8 @@ a:not([href]):not([tabindex]).o_Activity_detailsButton {
 }
 
 .o_Activity_iconContainer {
-    color: white;
-    border-color: white;
+    color: $white;
+    border-color: $white;
     border-radius: 100%;
     border-style: solid;
 }
@@ -178,7 +178,7 @@ a:not([href]):not([tabindex]).o_Activity_detailsButton {
 }
 
 .o_Activity_userAvatar {
-    border-radius: 50%;
+    @extend .rounded-circle;
 }
 
 .o_Activity_userName {
diff --git a/addons/mail/static/src/components/attachment/attachment.scss b/addons/mail/static/src/components/attachment/attachment.scss
index 583e5703691..fdb59dcf474 100644
--- a/addons/mail/static/src/components/attachment/attachment.scss
+++ b/addons/mail/static/src/components/attachment/attachment.scss
@@ -67,7 +67,7 @@
 
 .o_Attachment_image {
     flex-shrink: 0;
-    margin: 3px;
+    margin: map-get($spacers, 1);
 
     &.o-details-overlay {
         position: relative;
@@ -100,7 +100,7 @@
     flex-direction: row;
     justify-content: flex-end;
     left: 0;
-    padding: 10px;
+    padding: map-get($spacers, 2);
     position: absolute;
     right: 0;
     top: 0;
@@ -110,7 +110,7 @@
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
-    margin: 3px;
+    margin: map-get($spacers, 1);
     width: 200px;
 }
 
@@ -156,7 +156,7 @@
     }
 
     &.o-pretty {
-        color: white;
+        color: $white;
         background-color: $o-brand-primary;
 
         &:hover {
@@ -187,7 +187,7 @@
 .o_Attachment_imageOverlay {
     background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.9));
     border-radius: 5px;
-    color: white;
+    color: $white;
     opacity: 0;
 }
 
diff --git a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.scss b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.scss
index ba61160d41f..ea4b02a5c9f 100644
--- a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.scss
+++ b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.scss
@@ -4,8 +4,8 @@
 
 .o_AttachmentViewer {
     display: flex;
-    width: 100%;
-    height: 100%;
+    width: map-get($sizes, 100);
+    height: map-get($sizes, 100);
     flex-flow: column;
     align-items: center;
     z-index: -1;
@@ -149,18 +149,18 @@
 
 .o_AttachmentViewer_buttonNavigation {
     color: gray('400');
-    background-color: lighten(black, 15%);
+    background-color: lighten($black, 15%);
     border-radius: 100%;
     cursor: pointer;
 
     &:hover {
         color: lighten(gray('400'), 15%);
-        background-color: black;
+        background-color: $black;
     }
 }
 
 .o_AttachmentViewer_header {
-    background-color: rgba(0, 0, 0, 0.7);
+    background-color: rgba($black, 0.7);
     color: gray('400');
 }
 
@@ -183,7 +183,7 @@
 }
 
 .o_AttachmentViewer_toolbarButton {
-    background-color: lighten(black, 15%);
+    background-color: lighten($black, 15%);
 
     &.o_disabled {
         cursor: not-allowed;
@@ -195,20 +195,20 @@
         cursor: pointer;
 
         &:hover {
-            background-color: black;
+            background-color: $black;
             color: lighten(gray('400'), 15%);
         }
     }
 }
 
 .o_AttachmentViewer_view {
-    background-color: black;
-    box-shadow: 0 0 40px black;
+    background-color: $black;
+    box-shadow: 0 0 40px $black;
     outline: none;
     border: none;
 
     &.o_text {
-        background-color: white;
+        background-color: $white;
     }
 }
 
@@ -219,4 +219,3 @@
 .o_AttachmentViewer_viewImage {
     transition: transform 0.3s ease;
 }
-
diff --git a/addons/mail/static/src/components/chat_window/chat_window.scss b/addons/mail/static/src/components/chat_window/chat_window.scss
index 7b61cd3bc67..7261bc29cb9 100644
--- a/addons/mail/static/src/components/chat_window/chat_window.scss
+++ b/addons/mail/static/src/components/chat_window/chat_window.scss
@@ -37,8 +37,8 @@
 }
 
 .o_ChatWindow_newMessageForm {
-    padding: 3px;
-    margin-top: 3px;
+    padding: map-get($spacers, 1);
+    margin-top: map-get($spacers, 1);
     display: flex;
     align-items: center;
 }
@@ -48,7 +48,7 @@
 }
 
 .o_ChatWindow_newMessageFormLabel {
-    margin-right: 5px;
+    margin-right: map-get($spacers, 2);
     flex: 0 0 auto;
 }
 
@@ -63,17 +63,16 @@
 .o_ChatWindow {
     background-color: $o-mail-thread-window-bg;
     border-radius: 6px 6px 0 0;
-    box-shadow: -5px -5px 10px rgba(black, 0.09);
+    box-shadow: -5px -5px 10px rgba($black, 0.09);
     outline: none;
 
     &:not(.o-mobile) {
 
         &.o-focused {
-            box-shadow: -5px -5px 10px rgba(black, 0.18);
+            box-shadow: -5px -5px 10px rgba($black, 0.18);
         }
     }
 
-
     .o_Composer {
         border: 0;
     }
@@ -85,7 +84,7 @@
 
 .o_ChatWindow_newMessageFormInput {
     outline: none;
-    border: 1px solid gray('300'); // cancel firefox border on input focus
+    border: $border-width solid gray('300'); // cancel firefox border on input focus
 }
 
 .o_ChatWindow_thread .o_ThreadView_messageList {
diff --git a/addons/mail/static/src/components/chat_window_header/chat_window_header.scss b/addons/mail/static/src/components/chat_window_header/chat_window_header.scss
index c5c23634d20..6ca4c8b2f42 100644
--- a/addons/mail/static/src/components/chat_window_header/chat_window_header.scss
+++ b/addons/mail/static/src/components/chat_window_header/chat_window_header.scss
@@ -13,42 +13,42 @@
 }
 
 .o_ChatWindowHeader_command {
-    padding: 0 8px;
+    padding: map-get($spacers, 0) map-get($spacers, 3);
     display: flex;
-    height: 100%;
+    height: map-get($sizes, 100);
     align-items: center;
 
     &:hover {
-        background-color: rgba(0, 0, 0, 0.1);
+        background-color: rgba($black, 0.1);
     }
 }
 
 .o_ChatWindowHeader_commandBack {
-    margin-right: 5px;
+    margin-right: map-get($spacers, 2);
 }
 
 .o_ChatWindowHeader_item {
-    margin: 0 3px;
+    margin: map-get($spacers, 0) map-get($spacers, 1);
 
     &.o_ChatWindowHeader_rightArea {
-        margin-right: 0;
+        margin-right: map-get($spacers, 0);
     }
 
     &:first-child {
-        margin-left: 10px;
+        margin-left: map-get($spacers, 3);
 
         &.o_ChatWindowHeader_command {
-            margin-left: 0px; // no margin for commands
+            margin-left: map-get($spacers, 0); // no margin for commands
         }
     }
 
     &.o_ChatWindowHeader_rightArea:last-child .o_ChatWindowHeader_command {
-        margin-right: 0px; // no margin for commands
+        margin-right: map-get($spacers, 0); // no margin for commands
     }
 }
 
 .o_ChatWindowHeader_name {
-    max-height: 100%;
+    max-height: map-get($sizes, 100);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -56,7 +56,7 @@
 
 .o_ChatWindowHeader_rightArea {
     display: flex;
-    height: 100%;
+    height: map-get($sizes, 100);
     align-items: center;
 }
 
@@ -66,7 +66,7 @@
 
 .o_ChatWindowHeader {
     background-color: $o-brand-odoo;
-    color: white;
+    color: $white;
     cursor: pointer;
 
     &:not(.o-mobile) {
diff --git a/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.scss b/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.scss
index 119d61848ab..5125e0da015 100644
--- a/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.scss
+++ b/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.scss
@@ -20,27 +20,23 @@
     align-items: center;
     justify-content: center;
     flex: 1 1 auto;
-    max-width: 100%;
-}
-
-.o_ChatWindowHiddenMenu_dropdownToggleIcon {
-    margin-right: 1px;
+    max-width: map-get($sizes, 100);
 }
 
 .o_ChatWindowHiddenMenu_dropdownToggleItem {
-    margin: 0 3px;
+    margin: map-get($spacers, 0) map-get($spacers, 1);
 }
 
 .o_ChatWindowHiddenMenu_list {
     overflow: auto;
-    margin: 0;
-    padding: 0;
+    margin: map-get($spacers, 0);
+    padding: map-get($spacers, 0);
 }
 
 .o_ChatWindowHiddenMenu_listItem {
 
     &:not(:last-child) {
-        margin-bottom: 1px;
+        border-bottom: $border-width solid $border-color;
     }
 }
 
@@ -55,7 +51,7 @@
 .o_ChatWindowHiddenMenu_windowCounter {
     overflow: hidden;
     text-overflow: ellipsis;
-    margin-left: 1px;
+    margin-left: map-get($spacers, 1);
 }
 
 // ------------------------------------------------------------------
@@ -65,7 +61,7 @@
 .o_ChatWindowHiddenMenu {
     background-color: gray('900');
     border-radius: 6px 6px 0 0;
-    color: white;
+    color: $white;
     cursor: pointer;
 }
 
diff --git a/addons/mail/static/src/components/chatter/chatter.scss b/addons/mail/static/src/components/chatter/chatter.scss
index d722e03b93b..d9ae7a86c92 100644
--- a/addons/mail/static/src/components/chatter/chatter.scss
+++ b/addons/mail/static/src/components/chatter/chatter.scss
@@ -28,7 +28,7 @@
 // ------------------------------------------------------------------
 
 .o_Chatter {
-    background-color: white;
+    background-color: $white;
     border-color: $border-color;
 }
 
diff --git a/addons/mail/static/src/components/chatter_topbar/chatter_topbar.scss b/addons/mail/static/src/components/chatter_topbar/chatter_topbar.scss
index e24543477bf..036e6fc6cc2 100644
--- a/addons/mail/static/src/components/chatter_topbar/chatter_topbar.scss
+++ b/addons/mail/static/src/components/chatter_topbar/chatter_topbar.scss
@@ -26,11 +26,11 @@
 }
 
 .o_ChatterTopbar_buttonAttachmentsCountLoader {
-    margin-left: 2px;
+    margin-left: map-get($spacers, 1);
 }
 
 .o_ChatterTopbar_buttonCount {
-    padding-left: 0.25rem;
+    padding-left: map-get($spacers, 1);
 }
 
 .o_ChatterTopbar_buttonClose {
diff --git a/addons/mail/static/src/components/composer/composer.scss b/addons/mail/static/src/components/composer/composer.scss
index 9e4e32a3060..e0a1dd48ebb 100644
--- a/addons/mail/static/src/components/composer/composer.scss
+++ b/addons/mail/static/src/components/composer/composer.scss
@@ -16,11 +16,11 @@
         padding: map-get($spacers, 3) map-get($spacers, 3) map-get($spacers, 4) map-get($spacers, 1);
 
         &:not(.o-has-footer) {
-            padding-bottom: 20px;
+            padding-bottom: map-get($spacers, 4);
         }
 
         &:not(.o-has-header) {
-            padding-top: 20px;
+            padding-top: map-get($spacers, 4);
         }
     }
 }
@@ -30,7 +30,7 @@
         display: flex;
     }
     &:not(.o-composer-is-compact) {
-        margin-top: 10px;
+        margin-top: map-get($spacers, 2);
     }
 }
 
@@ -202,7 +202,7 @@
 }
 
 .o_Composer_buttonDiscard {
-    border: 1px solid lighten(gray('400'), 5%);
+    border: $border-width solid lighten(gray('400'), 5%);
 }
 
 .o_Composer_buttons {
@@ -210,7 +210,7 @@
 }
 
 .o_Composer_coreMain:not(.o-composer-is-compact) {
-    background: white;
+    background: $white;
     border: $border-width solid $border-color;
 
     // textarea should be all rounded but only when there is no subject field above
@@ -226,7 +226,7 @@
 .o_Composer_textInput {
     appearance: none;
     outline: none;
-    background-color: white;
+    background-color: $white;
     border: $border-width solid $border-color;
     border-right: 0;
 
@@ -242,7 +242,7 @@
 
 .o_Composer_toolButton {
     border: 0; // overrides bootstrap btn
-    background-color: white; // overrides bootstrap btn-light
+    background-color: $white; // overrides bootstrap btn-light
     color: gray('600'); // overrides bootstrap btn-light
     border-radius: 50%;
 
@@ -252,7 +252,7 @@
 }
 
 .o_Composer_toolButtons {
-    background-color: white;
+    background-color: $white;
     border-top: $border-width solid $border-color;
     border-bottom: $border-width solid $border-color;
 
@@ -262,7 +262,7 @@
     }
 
     &:last-child:not(.o-composer-has-current-partner-avatar) {
-        border-right: 1px solid lighten(gray('400'), 5%);
+        border-right: $border-width solid lighten(gray('400'), 5%);
     }
 }
 
diff --git a/addons/mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.scss b/addons/mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.scss
index c8b6b5adaba..6888160ff9d 100644
--- a/addons/mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.scss
+++ b/addons/mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.scss
@@ -1,5 +1,5 @@
 // Dirty fix: clear modal-body padding, otherwise it create space inside the
 // suggested_recipient list.
 .o_ComposerSuggestedRecipient .modal-body {
-    padding: 0;
+    padding: map-get($spacers, 0);
 }
diff --git a/addons/mail/static/src/components/composer_suggestion/composer_suggestion.scss b/addons/mail/static/src/components/composer_suggestion/composer_suggestion.scss
index 4083c149001..4e474355600 100644
--- a/addons/mail/static/src/components/composer_suggestion/composer_suggestion.scss
+++ b/addons/mail/static/src/components/composer_suggestion/composer_suggestion.scss
@@ -12,7 +12,7 @@
     // avoid shrinking part 1 because it is more important than part 2
     // because no shrink, ensure it cannot overflow with a max-width
     flex: 0 0 auto;
-    max-width: 100%;
+    max-width: map-get($sizes, 100);
     overflow: hidden;
     padding-inline-end: map-get($spacers, 2);
     text-overflow: ellipsis;
diff --git a/addons/mail/static/src/components/composer_suggestion/composer_suggestion.xml b/addons/mail/static/src/components/composer_suggestion/composer_suggestion.xml
index 787b5aedf13..db90d379946 100644
--- a/addons/mail/static/src/components/composer_suggestion/composer_suggestion.xml
+++ b/addons/mail/static/src/components/composer_suggestion/composer_suggestion.xml
@@ -17,7 +17,7 @@
                 </t>
                 <t t-if="isPartner">
                     <PartnerImStatusIcon
-                        class="o_ComposerSuggestion_partnerImStatusIcon"
+                        class="o_ComposerSuggestion_partnerImStatusIcon mr-1"
                         hasBackground="false"
                         partnerLocalId="record.localId"
                     />
diff --git a/addons/mail/static/src/components/composer_suggestion_list/composer_suggestion_list.scss b/addons/mail/static/src/components/composer_suggestion_list/composer_suggestion_list.scss
index fa8d375ea95..f6f9a32d104 100644
--- a/addons/mail/static/src/components/composer_suggestion_list/composer_suggestion_list.scss
+++ b/addons/mail/static/src/components/composer_suggestion_list/composer_suggestion_list.scss
@@ -5,7 +5,7 @@
 .o_ComposerSuggestionList {
     position: absolute;
     // prevent suggestion items from overflowing
-    width: 100%;
+    width: map-get($sizes, 100);
 
     &.o-lowPosition {
         bottom: 0;
@@ -14,12 +14,12 @@
 
 .o_ComposerSuggestionList_drop {
     // prevent suggestion items from overflowing
-    width: 100%;
+    width: map-get($sizes, 100);
 }
 
 .o_ComposerSuggestionList_list {
     // prevent suggestion items from overflowing
-    width: 100%;
+    width: map-get($sizes, 100);
     // prevent from overflowing chat window, must be smaller than its height
     // minus the max height taken by composer and attachment list
     max-height: 150px;
diff --git a/addons/mail/static/src/components/composer_text_input/composer_text_input.scss b/addons/mail/static/src/components/composer_text_input/composer_text_input.scss
index 7bfd8aa4b12..e821065ba5b 100644
--- a/addons/mail/static/src/components/composer_text_input/composer_text_input.scss
+++ b/addons/mail/static/src/components/composer_text_input/composer_text_input.scss
@@ -16,7 +16,7 @@
 }
 
 .o_ComposerTextInput_textareaStyle {
-    padding: 10px;
+    padding: 10px; // carefully crafted to have the text in the middle in chat window
     resize: none;
     border-radius: $o-mail-rounded-rectangle-border-radius-lg;
     border: none;
diff --git a/addons/mail/static/src/components/dialog/dialog.scss b/addons/mail/static/src/components/dialog/dialog.scss
index fa17dac0ef1..14c1cf31753 100644
--- a/addons/mail/static/src/components/dialog/dialog.scss
+++ b/addons/mail/static/src/components/dialog/dialog.scss
@@ -19,5 +19,5 @@
 // ------------------------------------------------------------------
 
 .o_Dialog {
-    background-color: rgba(0, 0, 0, 0.7);
+    background-color: rgba($black, 0.7);
 }
diff --git a/addons/mail/static/src/components/discuss/discuss.scss b/addons/mail/static/src/components/discuss/discuss.scss
index 5cddf1017ba..61d6f661bfe 100644
--- a/addons/mail/static/src/components/discuss/discuss.scss
+++ b/addons/mail/static/src/components/discuss/discuss.scss
@@ -13,7 +13,7 @@
 
 .o_Discuss {
     display: flex;
-    height: 100%;
+    height: map-get($sizes, 100);
     min-height: 0;
 
     &.o-mobile {
@@ -23,12 +23,12 @@
 }
 
 .o_Discuss_chatWindowHeader {
-    width: 100%;
+    width: map-get($sizes, 100);
     flex: 0 0 auto;
 }
 
 .o_Discuss_content {
-    height: 100%;
+    height: map-get($sizes, 100);
     overflow: auto;
     flex: 1 1 auto;
     display: flex;
@@ -43,46 +43,46 @@
 }
 
 .o_Discuss_messagingNotInitializedIcon {
-    margin-right: 3px;
+    margin-right: map-get($spacers, 1);
 }
 
 .o_Discuss_mobileAddItemHeader {
     display: flex;
     justify-content: center;
-    width: 100%;
-    padding: 0 10px;
+    width: map-get($sizes, 100);
+    padding: map-get($spacers, 0) map-get($spacers, 3);
 }
 
 .o_Discuss_mobileAddItemHeaderInput {
     flex: 1 1 auto;
-    margin-bottom: 8px;
-    padding: 8px;
+    margin-bottom: map-get($spacers, 3);
+    padding: map-get($spacers, 2);
 }
 
 .o_Discuss_mobileMailboxSelection {
-    width: 100%;
+    width: map-get($sizes, 100);
 }
 
 .o_Discuss_mobileNavbar {
-    width: 100%;
+    width: map-get($sizes, 100);
 }
 
 .o_Discuss_noThread {
     display: flex;
     flex: 1 1 auto;
-    width: 100%;
+    width: map-get($sizes, 100);
     align-items: center;
     justify-content: center;
 }
 
 .o_Discuss_replyingToMessageComposer {
-    width: 100%;
+    width: map-get($sizes, 100);
 }
 
 .o_Discuss_sidebar {
-    height: 100%;
+    height: map-get($sizes, 100);
     overflow: auto;
-    padding-top: 10px;
+    padding-top: map-get($spacers, 3);
     flex: 0 0 auto;
 }
 
@@ -90,12 +90,12 @@
     flex: 1 1 auto;
 
     &.o-mobile {
-        width: 100%;
+        width: map-get($sizes, 100);
     }
 }
 
 .o_Discuss_notificationList {
-    width: 100%;
+    width: map-get($sizes, 100);
     flex: 1 1 auto;
 }
 // ------------------------------------------------------------------
@@ -103,12 +103,12 @@
 // ------------------------------------------------------------------
 
 .o_Discuss.o-mobile {
-    background-color: white;
+    background-color: $white;
 }
 
 .o_Discuss_mobileAddItemHeaderInput {
     appearance: none;
-    border: 1px solid gray('400');
+    border: $border-width solid gray('400');
     border-radius: 5px;
     outline: none;
 }
diff --git a/addons/mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection.scss b/addons/mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection.scss
index b620e2f1328..8dfb6436ebd 100644
--- a/addons/mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection.scss
+++ b/addons/mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection.scss
@@ -9,7 +9,7 @@
 
 .o_DiscussMobileMailboxSelection_button {
     flex: 1 1 0;
-    padding: 8px;
+    padding: map-get($spacers, 2);
     z-index: 1;
 
     &.o-active {
diff --git a/addons/mail/static/src/components/drop_zone/drop_zone.scss b/addons/mail/static/src/components/drop_zone/drop_zone.scss
index 202e4ceb3ea..119da547560 100644
--- a/addons/mail/static/src/components/drop_zone/drop_zone.scss
+++ b/addons/mail/static/src/components/drop_zone/drop_zone.scss
@@ -7,8 +7,8 @@
     position: absolute;
     top: 0;
     left: 0;
-    height: 100%;
-    width: 100%;
+    height: map-get($sizes, 100);
+    width: map-get($sizes, 100);
     z-index: 1;
     align-items: center;
     justify-content: center;
diff --git a/addons/mail/static/src/components/emojis_popover/emojis_popover.scss b/addons/mail/static/src/components/emojis_popover/emojis_popover.scss
index 3a4559ae2d0..cbcd411f1cb 100644
--- a/addons/mail/static/src/components/emojis_popover/emojis_popover.scss
+++ b/addons/mail/static/src/components/emojis_popover/emojis_popover.scss
@@ -10,7 +10,7 @@
 
 .o_EmojisPopover_emoji {
     font-size: 1.1em;
-    margin: 3px;
+    margin: map-get($spacers, 1);
 }
 
 // ------------------------------------------------------------------
diff --git a/addons/mail/static/src/components/message/message.scss b/addons/mail/static/src/components/message/message.scss
index 69cd872682a..2a742fb3947 100644
--- a/addons/mail/static/src/components/message/message.scss
+++ b/addons/mail/static/src/components/message/message.scss
@@ -12,8 +12,8 @@
 }
 
 .o_Message_authorAvatar {
-    height: 100%;
-    width: 100%;
+    height: map-get($sizes, 100);
+    width: map-get($sizes, 100);
     object-fit: cover;
 }
 
@@ -56,12 +56,12 @@
         // It's acceptable not to manage overflow of these tags for the moment.
         // It also excludes all div in li because 1st leaf and div child of list overflow
         // may impact the bullet point (at least it does on Safari).
-        max-width: 100%;
+        max-width: map-get($sizes, 100);
         overflow-x: auto;
     }
 
     img {
-        max-width: 100%;
+        max-width: map-get($sizes, 100);
         height: auto;
     }
 }
@@ -199,7 +199,7 @@
 // ------------------------------------------------------------------
 
 .o_Message {
-    background-color: white;
+    background-color: $white;
 
     &:hover, &.o-clicked {
 
@@ -217,7 +217,7 @@
     }
 
     .o_Message_partnerImStatusIcon {
-        color: white;
+        color: $white;
     }
 
     &.o-not-discussion {
diff --git a/addons/mail/static/src/components/message_author_prefix/message_author_prefix.scss b/addons/mail/static/src/components/message_author_prefix/message_author_prefix.scss
index 362eaeb5b92..5d99866c624 100644
--- a/addons/mail/static/src/components/message_author_prefix/message_author_prefix.scss
+++ b/addons/mail/static/src/components/message_author_prefix/message_author_prefix.scss
@@ -3,7 +3,7 @@
 // ------------------------------------------------------------------
 
 .o_MessageAuthorPrefixIcon {
-    margin-right: 3px;
+    margin-right: map-get($spacers, 1);
 }
 
 // ------------------------------------------------------------------
diff --git a/addons/mail/static/src/components/message_list/message_list.scss b/addons/mail/static/src/components/message_list/message_list.scss
index d465f44027f..e559859d17e 100644
--- a/addons/mail/static/src/components/message_list/message_list.scss
+++ b/addons/mail/static/src/components/message_list/message_list.scss
@@ -13,20 +13,20 @@
     }
 
     &:not(.o-empty) {
-        padding-bottom: 15px;
+        padding-bottom: map-get($spacers, 4);
     }
 }
 
 .o_MessageList_empty {
     flex: 1 1 auto;
-    height: 100%;
-    width: 100%;
+    height: map-get($sizes, 100);
+    width: map-get($sizes, 100);
     align-self: center;
     display: flex;
     flex-flow: column;
     align-items: center;
     justify-content: center;
-    padding: 20px;
+    padding: map-get($spacers, 4);
     line-height: 2.5rem;
 }
 
@@ -35,7 +35,7 @@
 }
 
 .o_MessageList_isLoadingMoreIcon {
-    margin-right: 3px;
+    margin-right: map-get($spacers, 1);
 }
 
 .o_MessageList_loadMore {
@@ -45,12 +45,12 @@
 .o_MessageList_separator {
     display: flex;
     align-items: center;
-    padding: 0 0;
+    padding: map-get($spacers, 0) map-get($spacers, 0);
     flex: 0 0 auto;
 }
 
 .o_MessageList_separatorDate {
-    padding: 15px 0;
+    padding: map-get($spacers, 4) map-get($spacers, 0);
 }
 
 .o_MessageList_separatorLine {
@@ -60,12 +60,12 @@
 
 .o_MessageList_separatorNewMessages {
     // bug with safari: container does not auto-grow from child size
-    padding: 0 0;
-    margin-right: 15px;
+    padding: map-get($spacers, 0) map-get($spacers, 0);
+    margin-right: map-get($spacers, 4);
 }
 
 .o_MessageList_separatorLabel {
-    padding: 0 10px;
+    padding: map-get($spacers, 0) map-get($spacers, 3);
 }
 
 // ------------------------------------------------------------------
@@ -73,7 +73,7 @@
 // ------------------------------------------------------------------
 
 .o_MessageList {
-    background-color: white;
+    background-color: $white;
 }
 
 .o_MessageList_empty {
@@ -119,7 +119,7 @@
 }
 
 .o_MessageList_separatorLabel {
-    background-color: white;
+    background-color: $white;
 }
 
 // ------------------------------------------------------------------
diff --git a/addons/mail/static/src/components/messaging_menu/messaging_menu.scss b/addons/mail/static/src/components/messaging_menu/messaging_menu.scss
index 585049c1942..0f03eb25f4f 100644
--- a/addons/mail/static/src/components/messaging_menu/messaging_menu.scss
+++ b/addons/mail/static/src/components/messaging_menu/messaging_menu.scss
@@ -11,8 +11,8 @@
 .o_MessagingMenu_dropdownMenu {
     display: flex;
     flex-flow: column;
-    padding-top: 0;
-    padding-bottom: 0;
+    padding-top: map-get($spacers, 0);
+    padding-bottom: map-get($spacers, 0);
     overflow-y: auto;
     /**
      * Override from bootstrap .dropdown-menu to fix top alignment with other
@@ -47,7 +47,7 @@
         bottom: 0;
         left: 0;
         right: 0;
-        width: 100%;
+        width: map-get($sizes, 100);
         margin: 0;
         max-height: none;
     }
@@ -66,16 +66,16 @@
             "top"
             "bottom";
         grid-template-rows: auto auto;
-        padding: 5px
+        padding: map-get($spacers, 2);
     }
 }
 
 .o_MessagingMenu_dropdownLoadingIcon {
-    margin-right: 3px;
+    margin-right: map-get($spacers, 1);
 }
 
 .o_MessagingMenu_icon {
-    font-size: larger
+    font-size: larger;
 }
 
 .o_MessagingMenu_loading {
@@ -92,8 +92,8 @@
 
 .o_MessagingMenu_mobileNewMessageInput {
     grid-area: bottom;
-    padding: 8px;
-    margin-top: 10px
+    padding: map-get($spacers, 2);
+    margin-top: map-get($spacers, 2);
 }
 
 .o_MessagingMenu_notificationList.o-mobile {
@@ -108,7 +108,7 @@
 
 // Make hightlight more consistent, due to messaging menu looking quite similar to discuss app in mobile
 .o_MessagingMenu.o-is-open {
-    background-color: rgba(black, 0.1);
+    background-color: rgba($black, 0.1);
 }
 
 .o_MessagingMenu_counter {
@@ -120,13 +120,13 @@
 }
 
 .o_MessagingMenu_dropdownMenuHeader {
-    border-bottom: 1px solid gray('400');
+    border-bottom: $border-width solid gray('400');
     z-index: 1;
 }
 
 .o_MessagingMenu_mobileNewMessageInput {
     appearance: none;
-    border: 1px solid gray('400');
+    border: $border-width solid gray('400');
     border-radius: 5px;
     outline: none;
 }
diff --git a/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.scss b/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.scss
index df0611f9115..f0529d1970f 100644
--- a/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.scss
+++ b/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.scss
@@ -13,7 +13,7 @@
     flex-flow: column;
     align-items: center;
     flex: 1 1 0;
-    padding: 8px;
+    padding: map-get($spacers, 2);
 }
 
 .o_MobileMessagingNavbar_tabIcon {
@@ -30,7 +30,7 @@
 // ------------------------------------------------------------------
 
 .o_MobileMessagingNavbar {
-    background-color: white;
+    background-color: $white;
     box-shadow: 0 0 8px gray('400');
 }
 
diff --git a/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.scss b/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.scss
index 608c281aa0a..dc541f1779e 100644
--- a/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.scss
+++ b/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.scss
@@ -15,12 +15,6 @@
     transform: scale(1.5);
 }
 
-.o-background {
-    transform: scale(1);
-    margin-inline-end: map-get($spacers, 1);
-    margin-top: 2px;
-}
-
 // ------------------------------------------------------------------
 // Style
 // ------------------------------------------------------------------
@@ -32,7 +26,7 @@
 }
 
 .o_PartnerImStatusIcon_innerBackground {
-    color: white;
+    color: $white;
 }
 
 .o_PartnerImStatusIcon_icon {
@@ -53,7 +47,3 @@
         color: $o-enterprise-primary-color;
     }
 }
-
-
-
-
diff --git a/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.xml b/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.xml
index ca20a547f2b..e184fc7886c 100644
--- a/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.xml
+++ b/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.xml
@@ -5,7 +5,6 @@
         <span class="o_PartnerImStatusIcon fa-stack"
             t-att-class="{
                 'o-away': partner and partner.im_status === 'away',
-                'o-background': !props.hasBackground,
                 'o-bot': partner and env.messaging.partnerRoot === partner,
                 'o-has-open-chat': props.hasOpenChat,
                 'o-offline': partner and partner.im_status === 'offline',
diff --git a/addons/mail/static/src/components/thread_view/thread_view.scss b/addons/mail/static/src/components/thread_view/thread_view.scss
index 7a9df9bbd54..70010e62f0c 100644
--- a/addons/mail/static/src/components/thread_view/thread_view.scss
+++ b/addons/mail/static/src/components/thread_view/thread_view.scss
@@ -47,5 +47,5 @@
 }
 
 .o_ThreadView_loadingIcon {
-    margin-right: 3px;
+    margin-right: map-get($spacers, 1);
 }
diff --git a/addons/mail/static/src/scss/kanban_view.scss b/addons/mail/static/src/scss/kanban_view.scss
index 02e11eb1047..ba6f1620e64 100644
--- a/addons/mail/static/src/scss/kanban_view.scss
+++ b/addons/mail/static/src/scss/kanban_view.scss
@@ -3,7 +3,7 @@ $o-kanban-attachement-image-size: 80px;
 .o_kanban_view {
 
     .o_kanban_record.o_kanban_attachment {
-        padding: 0;
+        padding: map-get($spacers, 0);
 
         .o_kanban_image {
             width: $o-kanban-attachement-image-size;