[IMP] *: make customize dialog generic and improve options

* web, web_editor, website, website_theme_install, portal,
  theme_default, theme_bootswatch

The purpose of this task is to make the customize dialog as generic as
possible, that is theme-independant:

1) The design is now totally generic (Odoo visuals)
2) The XML definition is form-view like. This allows themes to extend
   the dialog without any risk of breaking the style and also allows to
   not care about lots of technical details.
3) New options have been included. Those were themes options that are
   now generic and which themes can simply adapt without touching the
   customize modal (navbar colors, footer color, navbar layout, fonts,
   body background, ...).

The color palette can now also be customized with user colors.

Using sass functionnalities, color palettes and fonts integration is now
a lot better.

Thanks to @qha-odoo for the original design.

task-31677

1 files changed, 21 insertions, 7 deletions

diff --git a/addons/web_editor/static/src/scss/bootstrap_overridden.scss b/addons/web_editor/static/src/scss/bootstrap_overridden.scss
index edd79516154..15309f4de7f 100644
--- a/addons/web_editor/static/src/scss/bootstrap_overridden.scss
+++ b/addons/web_editor/static/src/scss/bootstrap_overridden.scss
@@ -1,13 +1,27 @@
 
+// Automatically update bootstrap colors map (unused by BS itself)
+$-palette: nth($o-color-palettes, $o-color-palette-number);
+$colors: () !default;
+$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-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'),
+
+    // 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 
+    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
+));
 $theme-colors: () !default;
-$theme-colors: map-merge((
-    'alpha': $color-alpha,
-    'beta': $color-beta,
-    'gamma': $color-gamma,
-    'delta': $color-delta,
-    'epsilon': $color-epsilon,
-), $theme-colors);
+$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