[FIX] mass_mailing: adapt themes custom bg colors to BS4

Mass mailing themes are redefining some bg-* classes their own way...
unfortunately that way was not working anymore with BS3. This commit
adapts the CSS code to solve the problem but ideally, themes should be
refactored to be more BS4 compliant.

opw-2032131

closes odoo/odoo#35333

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

2 files changed, 33 insertions, 13 deletions

diff --git a/addons/mass_mailing/static/src/scss/themes/theme_basic.scss b/addons/mass_mailing/static/src/scss/themes/theme_basic.scss
index 00f3a6304bc..d65ea077f5f 100644
--- a/addons/mass_mailing/static/src/scss/themes/theme_basic.scss
+++ b/addons/mass_mailing/static/src/scss/themes/theme_basic.scss
@@ -1,3 +1,32 @@
+
+// TODO remove in master
+// Themes scss have to use bg-variant and text-emphasis-variant mixins of BS4
+// to properly work. That use was introduced as a fix in 12.0... but the BS4
+// mixins are unavailable in the mailing assets. As a stable fix cannot
+// introduce static code which requires an XML update to not crash, the mixins
+// were duplicated here instead.
+@mixin bg-variant($parent, $color) {
+    #{$parent} {
+        background-color: $color !important;
+    }
+    a#{$parent},
+    button#{$parent} {
+        &:hover, &:focus {
+            background-color: darken($color, 10%) !important;
+        }
+    }
+}
+@mixin text-emphasis-variant($parent, $color) {
+    #{$parent} {
+        color: $color !important;
+    }
+    a#{$parent} {
+        &:hover, &:focus {
+            color: darken($color, 10%) !important;
+        }
+    }
+}
+
 // ============================
 // Mass Mailing "Theme Basic"
 // ============================
diff --git a/addons/mass_mailing/static/src/scss/themes/theme_default.scss b/addons/mass_mailing/static/src/scss/themes/theme_default.scss
index 2fcc5bf2915..a2443fa01db 100644
--- a/addons/mass_mailing/static/src/scss/themes/theme_default.scss
+++ b/addons/mass_mailing/static/src/scss/themes/theme_default.scss
@@ -23,19 +23,10 @@ $o-mm-def-btn-bg        : $o-mm-def-color-gamma;
 $o-mm-def-btn-text      : $o-mm-def-color-beta;
 
 // ===== Colors =====
-.bg-beta {
-    background-color: $o-mm-def-color-zeta;
-    color:  $o-mm-def-color-beta;
-}
-.text-beta {
-    color: $o-mm-def-color-zeta;
-}
-.bg-delta {
-    background-color: $o-mm-def-color-eta;
-}
-.bg-gray-lighter {
-    background-color: $o-mm-def-color-alpha;
-}
+@include bg-variant(".bg-beta", $o-mm-def-color-zeta);
+@include text-emphasis-variant(".text-beta", $o-mm-def-color-zeta);
+@include bg-variant(".bg-delta", $o-mm-def-color-eta);
+@include bg-variant(".bg-gray-lighter", $o-mm-def-color-alpha);
 
 td {
     // Default browser style but needed so that alignment works on some mail