[FIX] web_editor, website: review default palette system

Before this commit, this was done:

1) Primary variables (app order):

(a) web_editor: define palettes (color + theme + gray), only 1 empty
                one. Mark the first ones as the selected ones.

(b) website: fill all defined palettes with the website-related
             color key and values (body, menu, logo-height, etc).
             + define "website values" palette.

2) Secondary variables (reverse app order):

(c) website: merge the user palettes on top of the selected palettes
             (so user values overriding values added in (a) and (b)),
             the resulting palettes are added in palettes lists and the
             selected palette numbers are set to select those ones.
             + final selection of "website values" palette.

(d) web_editor: final selection of the selected color palette amongst
                the color palettes.

--

The problem with all of this is that the definition of palettes
in themes (occuring between step (b) and (c)) never received the
website-related color key and values of step (b) and were thus forced
to redefine all of those by themself even if they wanted to use the
default website one.

This commit changes the system so that step (a) and (b) now define
"base" palettes (color, theme, gray, website values) and step (c) and
(d) now merge the final selected palettes with those "base" palettes.
This is in fact theoratically more efficient and allows to not force
themes to define every possible palette value we might introduce.

closes odoo/odoo#47097

Related: odoo/design-themes#216
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

2 files changed, 26 insertions, 11 deletions

diff --git a/addons/web_editor/static/src/scss/secondary_variables.scss b/addons/web_editor/static/src/scss/secondary_variables.scss
index e4355eeaa2b..fa8f1a39120 100644
--- a/addons/web_editor/static/src/scss/secondary_variables.scss
+++ b/addons/web_editor/static/src/scss/secondary_variables.scss
@@ -5,6 +5,7 @@
 
 // Colors
 $o-color-palette: nth($o-color-palettes, $o-color-palette-number) !default;
+$o-color-palette: map-merge($o-base-color-palette, o-map-omit($o-color-palette));
 @function palette-color($key) {
     @return map-get($o-color-palette, $key);
 }
@@ -25,6 +26,7 @@ $o-theme-color-palette: map-merge((
     'light': lighten(desaturate($-main-color, 80%), min(70%, max(0%, 97% - $-main-color-lightness))), // Does not increase over 97% lightness
     'dark': darken(desaturate($-main-color, 80%), min(70%, max(0%, $-main-color-lightness - 10%))), // Does not lower under 10% lightness
 ), o-map-omit($o-theme-color-palette));
+$o-theme-color-palette: map-merge($o-base-theme-color-palette, o-map-omit($o-theme-color-palette));
 @function palette-theme-color($key) {
     @return map-get($o-theme-color-palette, $key);
 }
@@ -33,7 +35,8 @@ $o-theme-color-palette: map-merge((
 // Extend grays with transparent ones (for some reason, BS4 create black-50 and
 // white-50 but does not allow overridding that with variables).
 $o-gray-color-palette: nth($o-gray-color-palettes, $o-gray-color-palette-number) !default;
-$o-gray-color-palette: map-merge($o-transparent-grays, $o-gray-color-palette);
+$o-gray-color-palette: map-merge($o-transparent-grays, o-map-omit($o-gray-color-palette));
+$o-gray-color-palette: map-merge($o-base-gray-color-palette, o-map-omit($o-gray-color-palette));
 @function palette-gray($key) {
     @return map-get($o-gray-color-palette, $key);
 }
diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss
index 5abbc9ac284..97951f635cd 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -281,15 +281,26 @@ $o-we-toolbar-height: 32px;
 
 // Edition colors
 
+// Note: the "base" palettes contain all possible keys a palette should or
+// must contain, with a default value which should work in use cases where it
+// will be used. Any palette defined by an app will be merged with the base
+// palette once selected to ensure it works.
+
 // Colors
+$o-base-color-palette: () !default;
 $o-color-palettes: (
-    (
-
-    ),
+    (),
 ) !default;
-$o-color-palette-number: 1;
+$o-color-palette-number: 1 !default;
 
 // Theme colors
+$o-base-theme-color-palette: (
+    'alpha': white,
+    'beta': white,
+    'gamma': white,
+    'delta': white,
+    'epsilon': white,
+) !default;
 $o-theme-color-palettes: (
     (
         'alpha': $o-enterprise-primary-color,
@@ -299,9 +310,13 @@ $o-theme-color-palettes: (
         'epsilon': #E46F78,
     ),
 ) !default;
-$o-theme-color-palette-number: 1;
+$o-theme-color-palette-number: 1 !default;
 
 // Greyscale transparent colours
+$o-base-gray-color-palette: (
+    'white': #FFFFFF, // Those two will enforce the creation of bg-white
+    'black': #000000, // and bg-black classes.
+) !default;
 $o-transparent-grays: (
     'black-15': rgba(black, 0.15),
     'black-25': rgba(black, 0.25),
@@ -313,12 +328,9 @@ $o-transparent-grays: (
     'white-85': rgba(white, 0.85),
 ) !default;
 $o-gray-color-palettes: (
-    (
-        'white': #FFFFFF, // Those two will enforce the creation of bg-white
-        'black': #000000, // and bg-black classes.
-    ),
+    (),
 ) !default;
-$o-gray-color-palette-number: 1;
+$o-gray-color-palette-number: 1 !default;
 
 // Translations
 $o-we-content-to-translate-color: rgb(255, 255, 90) !default;