1 files changed, 63 insertions, 14 deletions
diff --git a/addons/web_editor/static/src/scss/bootstrap_overridden.scss b/addons/web_editor/static/src/scss/bootstrap_overridden.scss
index 15309f4de7f..2a0b900b10c 100644
--- a/addons/web_editor/static/src/scss/bootstrap_overridden.scss
+++ b/addons/web_editor/static/src/scss/bootstrap_overridden.scss
@@ -1,3 +1,5 @@
+// Hacky way to detect if its the backend or not
+$-is-backend: variable-exists('primary');
 
 // Automatically update bootstrap colors map (unused by BS itself)
 $-palette: nth($o-color-palettes, $o-color-palette-number);
@@ -6,28 +8,75 @@ $colors: map-merge($-palette, $colors);
 
 // Automatically extend bootstrap to create theme background/text/button classes
 $-palette: nth($o-theme-color-palettes, $o-theme-color-palette-number);
-$-main-color: map-get($-palette, 'primary');
+$-main-color: map-get($-palette, 'alpha');
 $-main-color-lightness: lightness($-main-color);
-$-palette: map-merge($-palette, (
-    // Compatibility: alpha and beta color exist but will now always be
-    // equal to primary and secondary colors
-    alpha: $-main-color,
-    beta: map-get($-palette, 'secondary'),
+$-palette: map-merge((
+    // alpha and beta colors are used to override primary and secondary BS4
+    // colors by default, so that theme colors affect the default Odoo layouts
+    primary: $-main-color,
+    secondary: map-get($-palette, 'beta'),
 
     // BS light and dark colors are not used for any BS component, just
     // for color utilities. By default, we set them to a very light and
-    // very dark version of a desaturate version of the primary color 
+    // very dark version of a desaturate version of the primary color
     light: lighten(desaturate($-main-color, 40%), min(70%, max(0%, 97% - $-main-color-lightness))), // Does not increase over 97% lightness
     dark: darken(desaturate($-main-color, 40%), min(70%, max(0%, $-main-color-lightness - 10%))), // Does not lower under 10% lightness
-));
+), $-palette);
+@if $-is-backend {
+    $-palette: map-remove($-palette, 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark');
+}
 $theme-colors: () !default;
 $theme-colors: map-merge($-palette, $theme-colors);
 
 // Extend grays with transparent ones (for some reason, BS4 create black-50 and
-// white-50 but does not allow overridding that with variables). Also add black
-// and white ones too as they were also not added by BS4...
+// white-50 but does not allow overridding that with variables), also use the
+// theme gray palette (which is supposed to at least declare white and black).
+$-palette: nth($o-gray-color-palettes, $o-gray-color-palette-number);
+$-palette: map-merge($o-transparent-grays, $-palette);
+@if $-is-backend {
+    $-palette: map-remove($-palette, '100', '200', '300', '400', '500', '600', '700', '800', '900');
+}
 $grays: () !default;
-$grays: map-merge(map-merge($o-transparent-grays, (
-    black: $black, // Note: those two needs to be redefined before bootstrap,
-    white: $white, // otherwise they do not exist yet
-)), $grays);
+$grays: map-merge($-palette, $grays);
+
+// Bootstrap use standard variables to define individual colors which are then
+// placed into a map which is then used to get the value of each individual
+// color. As BS4 allows to extend the map a priori to define our own colors,
+// it does not take care of making the standard variables match the values in
+// the user's map. The problem is that, at least for grays, bootstrap uses the
+// standard variables in its _variables.scss file, so if:
+//
+// User file:
+// $grays: (
+//     '100': blue,
+// );
+//
+// BS4:
+// $gray-100: gray !default;
+// $grays: () !default;
+// $grays: map-merge((
+//     '100': $gray-100,
+// ), $grays);
+//
+// -> Here gray('100') is blue but $gray-100 is still gray... so BS4 is not
+// correctly generated as BS4 uses $gray-100 in _variables.scss
+$primary: theme-color('primary') !default;
+$secondary: theme-color('secondary') !default;
+$success: theme-color('success') !default;
+$info: theme-color('info') !default;
+$warning: theme-color('warning') !default;
+$danger: theme-color('danger') !default;
+$light: theme-color('light') !default;
+$dark: theme-color('dark') !default;
+
+$white: gray('white') !default;
+$gray-100: gray('100') !default;
+$gray-200: gray('200') !default;
+$gray-300: gray('300') !default;
+$gray-400: gray('400') !default;
+$gray-500: gray('500') !default;
+$gray-600: gray('600') !default;
+$gray-700: gray('700') !default;
+$gray-800: gray('800') !default;
+$gray-900: gray('900') !default;
+$black: gray('black') !default;