[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, 13 insertions, 14 deletions

diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
index fbaa1557fa0..89fde8cba22 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -542,20 +542,19 @@ blockquote {
     }
 }
 @for $index from 1 through length($o-color-combinations) {
-    $config: nth($o-color-combinations, $index);
-    $-bg: map-get($config, 'bg');
-    $-text: map-get($config, 'text');
-    $-headings: map-get($config, 'headings');
-    $-h2: map-get($config, 'h2');
-    $-h3: map-get($config, 'h3');
-    $-h4: map-get($config, 'h4');
-    $-h5: map-get($config, 'h5');
-    $-h6: map-get($config, 'h6');
-    $-link: map-get($config, 'link');
-    $-btn-primary: map-get($config, 'btn-primary');
-    $-btn-primary-border: map-get($config, 'btn-primary-border');
-    $-btn-secondary: map-get($config, 'btn-secondary');
-    $-btn-secondary-border: map-get($config, 'btn-secondary-border');
+    $-bg: color('o-cc#{$index}-bg');
+    $-text: color('o-cc#{$index}-text');
+    $-headings: color('o-cc#{$index}-headings');
+    $-h2: color('o-cc#{$index}-h2');
+    $-h3: color('o-cc#{$index}-h3');
+    $-h4: color('o-cc#{$index}-h4');
+    $-h5: color('o-cc#{$index}-h5');
+    $-h6: color('o-cc#{$index}-h6');
+    $-link: color('o-cc#{$index}-link');
+    $-btn-primary: color('o-cc#{$index}-btn-primary');
+    $-btn-primary-border: color('o-cc#{$index}-btn-primary-border');
+    $-btn-secondary: color('o-cc#{$index}-btn-secondary');
+    $-btn-secondary-border: color('o-cc#{$index}-btn-secondary-border');
 
     // Those color classes color multiple elements when applied on a snippet.
     // Those rules are not important so that they can be overridden through