[REF] *: review scss variables handling

Unlike LESS, SCSS variables are not lazy loaded. Our system has thus
to be updated. This commit creates new templates which are t-called
in assets bundles (to replace the old less_helpers template):

- web._assets_utils: regroups the mixins and functions which *can*
  (and so should) be available in every asset bundle

- web._assets_primary_variables: regroups the variables (or mixins
  used as variables) which *can* (and so should) be available in
  every asset bundle

- web._assets_secondary_variables: same as above but provides an
  environnement where all the 'primary' ones are accessible. This is
  for example useful to handle the community/enterprise split:

  // Community primary variables
  $o-pink-color: pink; // enterprise color
  $o-brand-primary: blue;

  // Enterprise primary variables
  $o-brand-primary: $o-pink-color;

  // Community secondary variables
  $o-my-darker-primary: darken($o-brand-primary, 5%);

  => If there was only one variable template, enterprise edition would
     have been able to define its primary color at the end but the
     darker primary would not have been updated. Using the "!default"
     system and putting enterprise definition above would not have
     solved the problem as the $o-pink-color would not have been
     accessible.

- web._assets_backend_helpers: regroups the variables, mixins and
  functions which *can* (and so should) be available in the backend
  asset bundle only. This is especially (only?) useful for bootstrap
  variables overriddes.

- web._assets_frontend_helpers: regroups the variables, mixins and
  functions which *can* (and so should) be available in the frontend
  asset bundle only. This is especially (only?) useful for bootstrap
  variables overriddes.

Note: bootstrap variables are not accessible in any of those anymore.
If you have variables that should depend on bootstrap, you have 3
solutions:

- Find another way: your variable is probably useless, use bootstrap
  variables directly or create a variable that will influence the
  value of bootstrap variables. E.g. instead of declaring:
  `$myvar: $bootstrapvar * 3`
  and using $myvar alone, declare:
  `$myvar: 3` and use `$myvar * $bootstrapvar` where needed.

- Declare a copy of the bootstrap variable and use that one. In that
  case, you should also force-set the real bootstrap one to be sure
  they match (this should be done in appropriate templates mentioned
  above). E.g.
  ```
  $o-boostrapvar: 5;
  ...
  $boostrapvar: $o-bootstrapvar;
  ```

- Set your variable to null and set it to your bootstrap expression
  in the file you will need it (where bootstrap variables are accessible)
  without forgetting to add the !default flag to allow overriddes.
  ```
  $myvar: null;
  ...
  $myvar: $bootstrapvar * 5 !default;
  ```

This commit also partly changes the variable names to follow the
convention:
$o-<app_id>-<name> where 'app_id' is the current's app name or a
meaningful unique identifier ("theme" for all themes for example, as
no multiple themes can be installed).

10 files changed, 76 insertions, 77 deletions

diff --git a/addons/mail/static/src/scss/chat_window.scss b/addons/mail/static/src/scss/chat_window.scss
index 8d43b2b9013..93ab8248b6b 100644
--- a/addons/mail/static/src/scss/chat_window.scss
+++ b/addons/mail/static/src/scss/chat_window.scss
@@ -1,22 +1,17 @@
-$o-chat-window-bg: #FAFAFA;
-$o-chat-window-width: 325px;
-$o-mail-chatter-gap: 10px; // has to be defined here as this file is both in
-                           // backend and other assets (livechat)
-$o-chat-header-height: 46px;
-$o-chat-window-zindex: $zindex-modal + 1;
+$o-mail-chat-window-zindex: $zindex-modal + 1 !default;
 
 .o_chat_window {
     @include o-flex-display;
     @include o-flex-flow(column, nowrap);
     position: fixed;
-    width: $o-chat-window-width;
+    width: $o-mail-chat-window-width;
     max-width: 100%;
     height: 400px;
     max-height: 100%;
     font-size: 12px;
-    background-color: $o-chat-window-bg;
+    background-color: $o-mail-chat-window-bg;
     border-radius: 6px 6px 0 0;
-    z-index: $o-chat-window-zindex;
+    z-index: $o-mail-chat-window-zindex;
     box-shadow: -5px -5px 10px rgba(black, 0.18);
 
     @media (max-width: $screen-xs-max) {
@@ -39,11 +34,11 @@ $o-chat-window-zindex: $zindex-modal + 1;
         padding: $o-mail-chatter-gap*0.5 $o-mail-chatter-gap;
         border-radius: 3px 3px 0 0;
         border-bottom: 1px solid $gray-lighter-dark;
-        background-color: $odoo-brand-primary;
+        background-color: $o-brand-primary;
         padding: 8px;
 
         @media (max-width: $screen-xs-max) {
-            height: $o-chat-header-height;
+            height: $o-mail-chat-header-height;
             padding-top: 12px;
             border-radius: 0px;
             .o_chat_title {
@@ -82,7 +77,7 @@ $o-chat-window-zindex: $zindex-modal + 1;
         .o_thread_date_separator {
             margin: 0px 0px 15px 0px;
             .o_thread_date {
-                background-color: $o-chat-window-bg;
+                background-color: $o-mail-chat-window-bg;
             }
         }
         .o_thread_message {
@@ -119,7 +114,7 @@ $o-chat-window-zindex: $zindex-modal + 1;
 
         .o_total_unread_counter {
             @include o-position-absolute(-10px, 0, auto, auto);
-            background-color: $odoo-brand-optional;
+            background-color: $o-brand-optional;
             padding: 0 2px;
             font-size: smaller;
         }
@@ -129,7 +124,7 @@ $o-chat-window-zindex: $zindex-modal + 1;
     }
 
     > ul {
-        max-width: $o-chat-window-width;
+        max-width: $o-mail-chat-window-width;
         padding: 0;
 
         > li.o_chat_header {
@@ -139,7 +134,7 @@ $o-chat-window-zindex: $zindex-modal + 1;
                 border-top: 1px solid white;
             }
             &:hover {
-                background-color: darken($odoo-brand-primary, 10%);
+                background-color: darken($o-brand-primary, 10%);
             }
         }
     }
diff --git a/addons/mail/static/src/scss/chatter.scss b/addons/mail/static/src/scss/chatter.scss
index ba863a5c664..314eb9b8bac 100644
--- a/addons/mail/static/src/scss/chatter.scss
+++ b/addons/mail/static/src/scss/chatter.scss
@@ -10,19 +10,19 @@
     }
 
     .o_chatter_topbar {
-        height: $odoo-statusbar-height;
+        height: $o-statusbar-height;
         position: relative;
         margin: $grid-gutter-width*0.5 0 0;
         padding: 0;
         @include o-flex-display;
 
         > .btn {
-            height: $odoo-statusbar-height + 1;
+            height: $o-statusbar-height + 1;
             border: 1px solid transparent;
         }
 
         > .o_followers {
-            height: $odoo-statusbar-height + 1;
+            height: $o-statusbar-height + 1;
             border-bottom: 1px solid transparent;
             @include o-flex(1,1,auto);
         }
@@ -35,7 +35,7 @@
             border-bottom-color: $gray-lighter-dark;
 
             &.o_active {
-                color: $odoo-brand-primary;
+                color: $o-brand-primary;
                 background-color: $gray-lighter;
                 border-color: $gray-lighter-dark;
                 border-width: 1px 1px 0;
diff --git a/addons/mail/static/src/scss/composer.scss b/addons/mail/static/src/scss/composer.scss
index b19cde9fb2c..477a7e536e1 100644
--- a/addons/mail/static/src/scss/composer.scss
+++ b/addons/mail/static/src/scss/composer.scss
@@ -75,7 +75,7 @@
         }
         @media (max-width: $screen-xs-max) {
             .o_composer_button_send {
-                color: $odoo-brand-optional;
+                color: $o-brand-optional;
             }
         }
     }
@@ -95,13 +95,13 @@
 
     // Both inline and not-inline design. Mini-composer disabled.
     &:not(.o_chat_mini_composer) {
-        padding:  $mail-thread-avatar-size*0.5;
-        padding-left: $grid-gutter-width*0.5 + $mail-thread-avatar-size + $o-mail-chatter-gap;
+        padding:  $o-mail-thread-avatar-size*0.5;
+        padding-left: $grid-gutter-width*0.5 + $o-mail-thread-avatar-size + $o-mail-chatter-gap;
         border: 1px solid $gray-lighter-dark;
         border-top: none;
 
         .o_chatter_avatar {
-            @include o-position-absolute(0, $left:  -$mail-thread-avatar-size - $o-mail-chatter-gap);
+            @include o-position-absolute(0, $left:  -$o-mail-thread-avatar-size - $o-mail-chatter-gap);
         }
 
         .o_chatter_composer_info, .o_composer_suggested_partners {
@@ -193,7 +193,7 @@
                 border-radius: 0 3px 3px 0;
                 // Make the button appear as the same size as the subject input
                 padding: 10px $padding-base-horizontal;
-                border: 1px solid darken($odoo-brand-optional, 5%);
+                border: 1px solid darken($o-brand-optional, 5%);
                 border-left-width: 0;
             }
         }
@@ -296,7 +296,7 @@ $o-mail-attachment-margin: 5px;
         @include o-text-overflow(block);
 
         a {
-            @include o-hover-text-color($default-color: $odoo-main-text-color, $hover-color: $headings-color);
+            @include o-hover-text-color($default-color: $o-main-text-color, $hover-color: $headings-color);
         }
     }
 
@@ -423,7 +423,7 @@ $o-mail-attachment-margin: 5px;
     }
 }
 .o_modal_fullscreen {
-    z-index: $o-chat-window-zindex + 1;
+    z-index: $o-mail-chat-window-zindex + 1;
 
     .o_viewer_content {
         position: relative;
diff --git a/addons/mail/static/src/scss/discuss.scss b/addons/mail/static/src/scss/discuss.scss
index 58473d6ad40..de129eaee4c 100644
--- a/addons/mail/static/src/scss/discuss.scss
+++ b/addons/mail/static/src/scss/discuss.scss
@@ -1,7 +1,6 @@
 // ------------------------------------------------------------------
 // Layout
 // ------------------------------------------------------------------
-$mail-chat-sidebar-width: 250px;
 
 .o_mail_chat {
     @include o-position-absolute(0, 0, 0, 0);
@@ -14,7 +13,7 @@ $mail-chat-sidebar-width: 250px;
         color: white;
         text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
         @include o-flex-display;
-        border-bottom: 1px solid $odoo-main-color-muted;
+        border-bottom: 1px solid $o-main-color-muted;
 
         .o_mail_request_permission {
             @include o-flex-display;
@@ -38,19 +37,19 @@ $mail-chat-sidebar-width: 250px;
     }
 
     .o_mail_chat_sidebar {
-        width: $mail-chat-sidebar-width;
+        width: $o-mail-chat-sidebar-width;
         height: 100%;
         float: left;
         overflow: auto;
-        padding: $odoo-horizontal-padding 0;
+        padding: $o-horizontal-padding 0;
 
         @media (min-width: $screen-lg-min) {
-            width: $mail-chat-sidebar-width + 50px;
+            width: $o-mail-chat-sidebar-width + 50px;
         }
 
         .o_mail_sidebar_title {
             @include o-flex-display;
-            padding: 6px $odoo-horizontal-padding 0 $odoo-horizontal-padding;
+            padding: 6px $o-horizontal-padding 0 $o-horizontal-padding;
             align-items: center;
             justify-content: space-between;
             h4 {
@@ -67,7 +66,7 @@ $mail-chat-sidebar-width: 250px;
         .o_mail_chat_channel_item {
             @include o-flex-display;
             width: 100%;
-            padding: 2px $odoo-horizontal-padding 2px ($odoo-horizontal-padding + 12px); // compensate icon
+            padding: 2px $o-horizontal-padding 2px ($o-horizontal-padding + 12px); // compensate icon
 
             .o_channel_name {
                 @include o-flex(1, 1, auto);
@@ -87,7 +86,7 @@ $mail-chat-sidebar-width: 250px;
             }
 
             &.o_mail_chat_title_main {
-                padding: $padding-base-vertical $odoo-horizontal-padding;
+                padding: $padding-base-vertical $o-horizontal-padding;
                 margin-bottom: 2px;
             }
         }
@@ -98,7 +97,7 @@ $mail-chat-sidebar-width: 250px;
 
         .o_mail_add_channel {
             width: 100%;
-            padding: 5px ($odoo-horizontal-padding + 23px); // compensate icon
+            padding: 5px ($o-horizontal-padding + 23px); // compensate icon
             position: relative;
 
             > input {
@@ -115,14 +114,14 @@ $mail-chat-sidebar-width: 250px;
         @include o-flex-display;
         @include o-flex-flow(column, nowrap);
         height: 100%;
-        margin-left: $mail-chat-sidebar-width;
+        margin-left: $o-mail-chat-sidebar-width;
         position: relative;
         @media (min-width: $screen-sm-min) {
             overflow: auto;
         }
 
         @media (min-width: $screen-lg-min) {
-            margin-left: $mail-chat-sidebar-width + 50px;
+            margin-left: $o-mail-chat-sidebar-width + 50px;
         }
 
         .o_mail_thread {
@@ -151,7 +150,6 @@ $mail-chat-sidebar-width: 250px;
 // ------------------------------------------------------------------
 // Style
 // ------------------------------------------------------------------
-$sidebar-icon-opacity: 0.7;
 
 .o_mail_chat {
     .o_mail_chat_sidebar {
@@ -165,13 +163,13 @@ $sidebar-icon-opacity: 0.7;
                 background-color: darken($gray-dark,2%);
 
                 .o_mail_partner_unpin, .o_mail_channel_settings {
-                    opacity: $sidebar-icon-opacity;
+                    opacity: $o-mail-sidebar-icon-opacity;
                 }
             }
 
             &.o_active {
                 background-color: $gray-darker;
-                box-shadow: inset 3px 0 0 $odoo-brand-optional;
+                box-shadow: inset 3px 0 0 $o-brand-optional;
             }
 
             .o_mail_hash {
@@ -188,7 +186,7 @@ $sidebar-icon-opacity: 0.7;
 
             > .badge {
                 color: white;
-                background-color: $odoo-brand-optional;
+                background-color: $o-brand-optional;
                 font-size: 10px;
                 line-height: 16px;
                 height: 18px;
@@ -230,7 +228,7 @@ $sidebar-icon-opacity: 0.7;
             }
             .o_add {
                 cursor: pointer;
-                @include o-hover-opacity($sidebar-icon-opacity, 1);
+                @include o-hover-opacity($o-mail-sidebar-icon-opacity, 1);
                 @include o-hover-text-color($gray-light, white);
             }
         }
@@ -244,7 +242,7 @@ $sidebar-icon-opacity: 0.7;
         .o_thread_message {
             opacity: 0.5;
             &.o_thread_selected_message {
-                padding: 4px $odoo-horizontal-padding;
+                padding: 4px $o-horizontal-padding;
                 opacity: 1;
                 background-color: lightgray;
             }
@@ -256,7 +254,7 @@ $sidebar-icon-opacity: 0.7;
     font-size: 1em;
     position: relative;
     &.o_user_online {
-        color: $odoo-brand-optional;
+        color: $o-brand-optional;
     }
     &.o_user_idle {
         color: $brand-warning;
@@ -358,7 +356,7 @@ $sidebar-icon-opacity: 0.7;
 .o_mail_channel_preview {
     @include o-flex-display;
     background-color: $gray-lighter;
-    color: $odoo-main-text-color;
+    color: $o-main-text-color;
     cursor: pointer;
     overflow: hidden;
     position: relative;
@@ -399,14 +397,14 @@ $sidebar-icon-opacity: 0.7;
             }
             .o_last_message_date {
                 @include o-flex(0, 0, auto);
-                color: $odoo-main-color-muted;
+                color: $o-main-color-muted;
                 font-weight: 500;
             }
         }
         .o_last_message_preview {
             width: 100%;
             max-height: 20px;
-            color: $odoo-main-color-muted;
+            color: $o-main-color-muted;
             @include o-text-overflow;
         }
     }
@@ -421,7 +419,7 @@ $sidebar-icon-opacity: 0.7;
                     font-weight: 700;
                 }
                 .o_last_message_date {
-                    color: $odoo-brand-optional;
+                    color: $o-brand-optional;
                 }
             }
         }
@@ -429,7 +427,6 @@ $sidebar-icon-opacity: 0.7;
 }
 
 @media (max-width: $screen-xs-max) {
-    $o-mail-chatter-mobile-gap: 2%;
 
     .o_main_navbar > ul.o_menu_systray > li.open .dropdown-menu {
         border: none;
@@ -485,7 +482,7 @@ $sidebar-icon-opacity: 0.7;
             }
 
             &.active > span {
-                color: $odoo-brand-optional;
+                color: $o-brand-optional;
             }
         }
     }
diff --git a/addons/mail/static/src/scss/extended_chat_window.scss b/addons/mail/static/src/scss/extended_chat_window.scss
index 9e0174654b1..774a37c6120 100644
--- a/addons/mail/static/src/scss/extended_chat_window.scss
+++ b/addons/mail/static/src/scss/extended_chat_window.scss
@@ -17,7 +17,7 @@
         }
 
         .o_mail_thread {
-            background-color: $odoo-webclient-background-color;
+            background-color: $o-webclient-background-color;
         }
 
         .o_chat_composer {
diff --git a/addons/mail/static/src/scss/followers.scss b/addons/mail/static/src/scss/followers.scss
index 5b7ff2b886f..573f13e35b2 100644
--- a/addons/mail/static/src/scss/followers.scss
+++ b/addons/mail/static/src/scss/followers.scss
@@ -91,19 +91,19 @@
             font-size: small;
 
             .o_partner {
-                $partner-avatar-size: 24px;
                 position: relative; // required for old design compatibility
+
                 > a {
                     max-width: 160px;
                     overflow: hidden;
                     white-space: nowrap;
                     text-overflow: ellipsis;
-                    height: $partner-avatar-size;
-                    padding: 3px $partner-avatar-size + 8px;
+                    height: $o-mail-partner-avatar-size;
+                    padding: 3px $o-mail-partner-avatar-size + 8px;
                 }
                 > img {
                     @include o-position-absolute;
-                    width: $partner-avatar-size;
+                    width: $o-mail-partner-avatar-size;
                 }
                 .o_remove_follower {
                     @include o-position-absolute(6px, 5px);
diff --git a/addons/mail/static/src/scss/mail_activity.scss b/addons/mail/static/src/scss/mail_activity.scss
index 58f00c1f4e5..f835275e873 100644
--- a/addons/mail/static/src/scss/mail_activity.scss
+++ b/addons/mail/static/src/scss/mail_activity.scss
@@ -150,7 +150,7 @@
             padding: 0px 0px;
 
             & > li:last-child {
-                background-color: $odoo-brand-lightsecondary;
+                background-color: $o-brand-lightsecondary;
                 color: $gray-dark;
                 line-height: 3em;
             }
@@ -166,7 +166,7 @@
                     &.o_activity_label {
                         line-height: 2.5em;
                         padding: 0px 5px;
-                        background-color: $odoo-brand-lightsecondary;
+                        background-color: $o-brand-lightsecondary;
                     }
 
                     &.o_schedule_activity {
diff --git a/addons/mail/static/src/scss/systray.scss b/addons/mail/static/src/scss/systray.scss
index c06bde1d3f1..fd799cb9cc7 100644
--- a/addons/mail/static/src/scss/systray.scss
+++ b/addons/mail/static/src/scss/systray.scss
@@ -21,7 +21,7 @@
     }
     .o_notification_counter {
         @include o-position-absolute($top: 20%, $right: 1px);
-        background: $odoo-brand-optional;
+        background: $o-brand-optional;
         color: white;
         padding: 0em 0.3em;
         font-size: 0.7em;
@@ -34,7 +34,7 @@
             @include o-flex-display;
             @include o-align-items(center);
             @include o-justify-content(center);
-            color: $odoo-main-text-color;
+            color: $o-main-text-color;
             height: 50px;
         }
 
@@ -48,9 +48,9 @@
                 padding: 5px;
             }
             .o_filter_button {
-                color: $odoo-main-color-muted;
+                color: $o-main-color-muted;
                 &:hover, &.active {
-                    color: $odoo-brand-optional;
+                    color: $o-brand-optional;
                 }
                 &.active {
                     cursor: default;
@@ -130,7 +130,7 @@
                 left: 0px;
                 right: 0px;
                 background-color: white;
-                color: $odoo-main-text-color;
+                color: $o-main-text-color;
             }
         }
     }
diff --git a/addons/mail/static/src/scss/thread.scss b/addons/mail/static/src/scss/thread.scss
index 4a2edb68913..0529238a36e 100644
--- a/addons/mail/static/src/scss/thread.scss
+++ b/addons/mail/static/src/scss/thread.scss
@@ -25,30 +25,30 @@
 
     .o_thread_new_messages_separator {
         margin-bottom: 15px;
-        border-bottom: solid lighten($odoo-brand-primary, 15%) 1px;
+        border-bottom: solid lighten($o-brand-primary, 15%) 1px;
         text-align: right;
         .o_thread_separator_label {
             position: relative;
             top: 8px;
             padding: 0 10px;
             background: white;
-            color: lighten($odoo-brand-primary, 15%);
+            color: lighten($o-brand-primary, 15%);
             font-size: smaller;
         }
     }
 
     .o_thread_message {
         @include o-flex-display;
-        padding: 4px $odoo-horizontal-padding;
+        padding: 4px $o-horizontal-padding;
         margin-bottom: 0px;
 
         &.o_mail_not_discussion {
-            background-color: $mail-thread-note;
+            background-color: rgba($gray-lighter-dark, 0.5);
             border-bottom: 1px solid $gray-lighter-darker;
         }
 
         .o_thread_message_sidebar {
-            @include o-flex(0, 0, $mail-thread-avatar-size);
+            @include o-flex(0, 0, $o-mail-thread-avatar-size);
             margin-right: 10px;
             margin-top: 2px;
             text-align: center;
@@ -60,7 +60,7 @@
             }
 
             .o_thread_message_avatar {
-                max-width: $mail-thread-avatar-size;
+                max-width: $o-mail-thread-avatar-size;
             }
             .o_thread_message_side_date {
                 margin-left: -5px;
@@ -77,17 +77,17 @@
             cursor: pointer;
             opacity: 0;
             &.fa-star {
-                opacity: $mail-thread-icon-opacity;
+                opacity: $o-mail-thread-icon-opacity;
                 color: gold;
             }
         }
 
         &:hover, &.o_thread_selected_message {
             .o_thread_message_side_date {
-                opacity: $mail-thread-side-date-opacity;
+                opacity: $o-mail-thread-side-date-opacity;
             }
             .o_thread_icon {
-                opacity: $mail-thread-icon-opacity;
+                opacity: $o-mail-thread-icon-opacity;
                 &:hover {
                     opacity: 1;
                 }
@@ -222,6 +222,6 @@
 
 .o_web_client.o_touch_device {
     .o_mail_thread .o_thread_icon {
-        opacity: $mail-thread-icon-opacity;
+        opacity: $o-mail-thread-icon-opacity;
     }
 }
diff --git a/addons/mail/static/src/scss/variables.scss b/addons/mail/static/src/scss/variables.scss
index ce498f2d03e..c3086ce579d 100644
--- a/addons/mail/static/src/scss/variables.scss
+++ b/addons/mail/static/src/scss/variables.scss
@@ -1,5 +1,12 @@
-// FIXME moved here since scss convertion
-$mail-thread-avatar-size: 36px;
-$mail-thread-icon-opacity: 0.6;
-$mail-thread-side-date-opacity: 0.6;
-$mail-thread-note: rgba($gray-lighter-dark, 0.5);
+$o-mail-thread-avatar-size: 36px !default;
+$o-mail-thread-icon-opacity: 0.6 !default;
+$o-mail-thread-side-date-opacity: 0.6 !default;
+$o-mail-chat-window-bg: #FAFAFA !default;
+$o-mail-chat-window-width: 325px !default;
+$o-mail-chatter-gap: 10px !default;
+$o-mail-chatter-mobile-gap: 2% !default;
+$o-mail-chat-header-height: 46px !default;
+$o-mail-attachment-image-size: 100px !default;
+$o-mail-sidebar-icon-opacity: 0.7 !default;
+$o-mail-chat-sidebar-width: 250px !default;
+$o-mail-partner-avatar-size: 24px !default;