[IMP] website, *: introduce new classes to color snippets

*: web, web_editor, website_blog, website_event

New o_cc${xxx} classes where ${xxx} is a number [1-5] to style snippets:
they come with a background color, a text color, headings colors, a
link color, primary button colors and secondary button colors which
will later be possible to customize by the user.

The classes are made so that they are working on two levels. So if a
column receives a color class and the snippet too, everything will work
fine. More than 2 levels are not supported and the editor is made so
those cases should not appear. See o_colored_level class.

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

1 files changed, 61 insertions, 8 deletions

diff --git a/addons/web_editor/static/src/scss/secondary_variables.scss b/addons/web_editor/static/src/scss/secondary_variables.scss
index fa8f1a39120..52030130514 100644
--- a/addons/web_editor/static/src/scss/secondary_variables.scss
+++ b/addons/web_editor/static/src/scss/secondary_variables.scss
@@ -6,9 +6,6 @@
 // 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);
-}
 
 // Theme colors
 $o-theme-color-palette: nth($o-theme-color-palettes, $o-theme-color-palette-number) !default;
@@ -27,9 +24,6 @@ $o-theme-color-palette: map-merge((
     '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);
-}
 
 // Gray colors
 // Extend grays with transparent ones (for some reason, BS4 create black-50 and
@@ -37,6 +31,65 @@ $o-theme-color-palette: map-merge($o-base-theme-color-palette, o-map-omit($o-the
 $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-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);
+
+// Color combinations
+$o-color-combinations: nth($o-color-combinations-presets, $o-color-combinations-preset-number) !default;
+
+$o-color-system-initialized: false;
+
+// Returns:
+// - true if the given name is a css color or null
+// - false if a potential valid color name
+// - throws an error if the given arg cannot reference a color
+@function check-color-identifier-type($name) {
+    $-type: type-of($name);
+    @if $-type == 'color' or $-type == 'null' {
+        @return true;
+    } @else if $-type != 'string' {
+        @error "Color name '#{$name}' is of unsupported type '#{$-type}'";
+    }
+    @return false;
+}
+// Looks up for the color related to the given name in the related odoo palettes
+// following redirection a maximum number of time (by default none).
+@function o-related-color($name, $max-recursions: 0, $original-name: $name) {
+    @if $max-recursions < 0 or check-color-identifier-type($name) {
+        @return $name;
+    }
+
+    $-value: null;
+    @if map-has-key($o-color-palette, $name) {
+        $-value: map-get($o-color-palette, $name);
+    } @else if map-has-key($o-theme-color-palette, $name) {
+        $-value: map-get($o-theme-color-palette, $name);
+    } @else if map-has-key($o-gray-color-palette, $name) {
+        $-value: map-get($o-gray-color-palette, $name);
+    }
+    @return o-related-color($-value, $max-recursions - 1, $original-name);
+}
+// Function which allows to retrieve a color value from a name, the color being
+// either in $theme-colors, $grays or $colors maps. If those maps are not
+// initialized yet, it will look up the color in the related odoo palettes.
+@function o-color($name) {
+    @if check-color-identifier-type($name) {
+        @return $name;
+    }
+
+    // When the system is initialized, it means that the bootstrap maps have
+    // been configured and contain a direct mapping between color name -> css
+    // value. We can thus search in those.
+    @if $o-color-system-initialized {
+        @if map-has-key($colors, $name) {
+            @return color($name);
+        }
+        @if map-has-key($theme-colors, $name) {
+            @return theme-color($name);
+        }
+        @if map-has-key($grays, $name) {
+            @return gray($name);
+        }
+    }
+
+    // If not initialized, search the css color value in selected color palettes
+    @return o-related-color($name, $max-recursions: 10);
 }