[REF] web, web_editor, *: review theme color extensions

* survey, website_slides

Before this commit, the web_editor app created bg and text classes its
own way for theming (alpha, beta, grays, ...). Now the system is far
more automatic by extending BS4 color maps.

7 files changed, 102 insertions, 4 deletions

diff --git a/addons/web/static/src/scss/bootstrap_overridden_frontend.scss b/addons/web/static/src/scss/bootstrap_overridden_frontend.scss
index e69de29bb2d..19ced6c9d8f 100644
--- a/addons/web/static/src/scss/bootstrap_overridden_frontend.scss
+++ b/addons/web/static/src/scss/bootstrap_overridden_frontend.scss
@@ -0,0 +1,3 @@
+
+$black: black;
+$white: white;
diff --git a/addons/web/static/src/scss/bs_mixins_overrides.scss b/addons/web/static/src/scss/bs_mixins_overrides.scss
new file mode 100644
index 00000000000..fd08c94a217
--- /dev/null
+++ b/addons/web/static/src/scss/bs_mixins_overrides.scss
@@ -0,0 +1,38 @@
+//------------------------------------------------------------------------------
+// Bootstrap Mixins and Functions Extensions
+// Those will affect the way bootstrap is generated wherever bootstrap is used
+//------------------------------------------------------------------------------
+
+// Override background utilities so that they come with a default contrasted
+// color (especially useful in the frontend editor for example). Also modifies
+// the way .text-muted elements are rendered in those environments.
+@mixin bg-variant($parent, $color, $text-color: null) {
+    #{$parent} {
+        $-yiq-color: if($text-color, $text-color, color-yiq($color));
+        background-color: $color !important;
+        color: $-yiq-color; // not important so that text utilities still work
+
+        .text-muted {
+            color: rgba($-yiq-color, 0.4) !important;
+        }
+    }
+    a#{$parent},
+    button#{$parent} {
+        $-darken-color: darken($color, 10%);
+        @include hover-focus {
+            background-color: $-darken-color !important;
+            color: if($text-color, $text-color, color-yiq($-darken-color));
+        }
+    }
+}
+@mixin bg-gradient-variant($parent, $color, $text-color: null) {
+    #{$parent} {
+        $-yiq-color: if($text-color, $text-color, color-yiq($color));
+        background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
+        color: $-yiq-color;
+
+        .text-muted {
+            color: rgba($-yiq-color, 0.4) !important;
+        }
+    }
+}
diff --git a/addons/web/static/src/scss/import_bootstrap.scss b/addons/web/static/src/scss/import_bootstrap.scss
deleted file mode 100644
index cbd46a7afcf..00000000000
--- a/addons/web/static/src/scss/import_bootstrap.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "bootstrap";
diff --git a/addons/web/static/src/scss/import_bootstrap_part1.scss b/addons/web/static/src/scss/import_bootstrap_part1.scss
new file mode 100644
index 00000000000..09f4d3579ac
--- /dev/null
+++ b/addons/web/static/src/scss/import_bootstrap_part1.scss
@@ -0,0 +1,11 @@
+
+// This file is importing bootstrap. While a simple "import "bootstrap";"
+// should be enough, this does not allow overridding mixins. Overridding mixins
+// is necessary for some of our need and allow to generate more efficient CSS
+// than adding more rules. This file instead copies the first part of the
+// content of the "bootstrap.scss" files to allow adding mixin overrides in
+// between.
+
+@import "functions";
+@import "variables";
+@import "mixins";
diff --git a/addons/web/static/src/scss/import_bootstrap_part2.scss b/addons/web/static/src/scss/import_bootstrap_part2.scss
new file mode 100644
index 00000000000..c15793019ad
--- /dev/null
+++ b/addons/web/static/src/scss/import_bootstrap_part2.scss
@@ -0,0 +1,40 @@
+
+// This file is importing bootstrap. While a simple "import "bootstrap";"
+// should be enough, this does not allow overridding mixins. Overridding mixins
+// is necessary for some of our need and allow to generate more efficient CSS
+// than adding more rules. This file instead copies the second part of the
+// content of the "bootstrap.scss" files to allow adding mixin overrides in
+// between.
+
+@import "root";
+@import "reboot";
+@import "type";
+@import "images";
+@import "code";
+@import "grid";
+@import "tables";
+@import "forms";
+@import "buttons";
+@import "transitions";
+@import "dropdown";
+@import "button-group";
+@import "input-group";
+@import "custom-forms";
+@import "nav";
+@import "navbar";
+@import "card";
+@import "breadcrumb";
+@import "pagination";
+@import "badge";
+@import "jumbotron";
+@import "alert";
+@import "progress";
+@import "media";
+@import "list-group";
+@import "close";
+@import "modal";
+@import "tooltip";
+@import "popover";
+@import "carousel";
+@import "utilities";
+@import "print";
diff --git a/addons/web/views/report_templates.xml b/addons/web/views/report_templates.xml
index 6acea265082..3782a58435f 100644
--- a/addons/web/views/report_templates.xml
+++ b/addons/web/views/report_templates.xml
@@ -5,7 +5,7 @@
     <template id="report_assets_common">
         <t t-call="web._assets_helpers"/>
 
-        <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/import_bootstrap.scss"/>
+        <t t-call="web._assets_bootstrap"/>
         <link href="/base/static/src/css/description.css" rel="stylesheet" type="text/css"/>
 
         <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/web_editor.common.scss"/>
diff --git a/addons/web/views/webclient_templates.xml b/addons/web/views/webclient_templates.xml
index 57a580e0f13..de7dd3198f9 100644
--- a/addons/web/views/webclient_templates.xml
+++ b/addons/web/views/webclient_templates.xml
@@ -4,6 +4,7 @@
         <link rel="stylesheet" type="text/scss" href="/web/static/lib/bootstrap/scss/_functions.scss"/>
         <link rel="stylesheet" type="text/scss" href="/web/static/lib/bootstrap/scss/_mixins.scss"/>
         <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/utils.scss"/>
+        <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/bs_mixins_overrides.scss"/>
     </template>
 
     <template id="_assets_primary_variables">
@@ -35,6 +36,12 @@
         <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/bootstrap_overridden_frontend.scss"/>
     </template>
 
+    <template id="_assets_bootstrap">
+        <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/import_bootstrap_part1.scss"/>
+        <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/bs_mixins_overrides.scss"/>
+        <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/import_bootstrap_part2.scss"/>
+    </template>
+
     <template id="assets_common" name="Common Assets (used in backend interface and website)">
         <t t-call="web._assets_helpers"/>
 
@@ -128,7 +135,7 @@
     <template id="assets_backend" name="Backend Assets (used in backend interface)">
         <t t-call="web._assets_backend_helpers"/>
 
-        <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/import_bootstrap.scss"/>
+        <t t-call="web._assets_bootstrap"/>
         <link rel="stylesheet" type="text/scss" href="/web/static/lib/tempusdominus/tempusdominus.scss"/>
 
         <link rel="stylesheet" type="text/css" href="/base/static/src/css/modules.css"/>
@@ -294,7 +301,7 @@
     <template id="web.assets_frontend" name="Website Assets">
         <t t-call="web._assets_frontend_helpers"/>
 
-        <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/import_bootstrap.scss"/>
+        <t t-call="web._assets_bootstrap"/>
         <link rel="stylesheet" type="text/scss" href="/web/static/lib/tempusdominus/tempusdominus.scss"/>
 
         <script type="text/javascript" src="/web/static/src/js/services/session.js"></script>