[IMP] web_editor: allow color combinations specific override and access

Now, the colors used in a color combination are accessible and possible
to override through the BS $colors map, with a specific prefix
(o-cc for "color combination").

So, to access the 'headings' color of the color combination 3, use:

color('o-cc3-headings');

If you don't need to completely override a color combinations preset,
you can override what you want through a color palette:

$o-color-palettes: (
    (
        'text': red,
        'o-cc4-btn-primary': 'alpha',
        // ...
    )
);

As our current system allows the user to customize colors of the color
palette (like for menu, default text, etc), this will allow to easily
give them the possibility to override combinations colors in a future
update.

Part of https://github.com/odoo/odoo/pull/45856
task-2197038

1 files changed, 16 insertions, 19 deletions

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 ecfda70dd87..3be0284d254 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -371,46 +371,43 @@ $o-gray-color-palettes: (
 $o-gray-color-palette-number: 1 !default;
 
 // Color combinations
+$o-base-color-combination: (
+    'bg': 'white',
+    'text': null, // Default to better contrast with the 'bg'
+    'headings': null, // Default to 'text'
+    'h2': null, // Default to 'h(x-1)'
+    'h3': null,
+    'h4': null,
+    'h5': null,
+    'h6': null,
+    'link': null, // Default to BS 'primary' (= first odoo color)
+    'btn-primary': null, // Default to BS 'primary' (= first odoo color)
+    'btn-primary-border': null, // Default to 'btn-primary'
+    'btn-secondary': null, // Default to BS 'secondary' (= second odoo color)
+    'btn-secondary-border': null, // Default to 'btn-secondary'
+);
 $o-color-combinations-presets: (
     (
         (
-            'bg': #FFFFFF,
-            'text': null,
-            'headings': null,
-            'link': null,
-            'btn-primary': null,
-            'btn-secondary': null,
+            // See $o-base-color-combination
         ),
         (
             'bg': 'gamma',
-            'text': null,
             'headings': 'alpha',
-            'link': null,
-            'btn-primary': null,
-            'btn-secondary': null,
         ),
         (
             'bg': 'beta',
-            'text': null,
-            'headings': null,
-            'link': null,
-            'btn-primary': null,
             'btn-secondary': 'gamma',
         ),
         (
             'bg': 'alpha',
-            'text': null,
-            'headings': null,
             'link': 'epsilon',
             'btn-primary': 'epsilon',
             'btn-secondary': 'gamma',
         ),
         (
             'bg': 'epsilon',
-            'text': null,
             'headings': 'delta',
-            'link': null,
-            'btn-primary': null,
             'btn-secondary': 'gamma',
         ),
     ),