[IMP] website, *: allow to use a color preset for menu and footer

*: web_editor, web

Also now allows to control the copyright section color.

This commit also allows to use color name alias when the user choose
one of the 5 main colors or a gray color for one component (e.g. if the
user picks 'o-color-1' as the color for its text in preset 4, then it
will no longer be linked to the current css color of 'o-color-1' but to
'o-color-1' directly; meaning that if that color changes in the future,
so will the text of preset 4).

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

1 files changed, 17 insertions, 0 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 5f6f97a5e74..7f985dfe4e3 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -338,6 +338,10 @@ $o-color-palettes: (
         'o-color-3': #F8F9FA,
         'o-color-4': #FFFFFF,
         'o-color-5': #343a40,
+
+        'menu': 2,
+        'footer': 2,
+        'copyright': 5,
     ),
 ) !default;
 $o-color-palette-number: 1 !default;
@@ -449,3 +453,16 @@ $o-we-translated-content-color: rgb(120, 215, 110) !default;
 // snippets will have problem because of this; this is a limitation of the
 // system until a better solution is found.
 $o-color-extras-nesting-selector: '&, .o_colored_level &';
+
+// Apply colors according to the given identifier. Can either be a preset
+// number, a color name or a css color.
+@mixin o-apply-colors($identifier, $background: $body-bg) {
+    $-related-color: o-related-color($identifier, $max-recursions: 10);
+    @if type-of($-related-color) == 'number' {
+        // This is a preset to be applied, just extend it. This should probably
+        // be avoided and use the class in XML if possible.
+        @extend .o_cc#{$-related-color};
+    } @else {
+        @include o-bg-color(o-color($-related-color), $background: $background);
+    }
+}