[IMP] web_editor: allow to change default shape color mapping

A shape is made of different colors which are mapped to user color
combination colors (e.g. if a shape use the #3AADAA color, it is by
default mapped to color combination background color n°4). We allow
to change that arbitrary mapping for each shape should a theme want it
(for example so that its built default page can use that shape with
a different color without having to hardcode it).

Part of https://github.com/odoo/odoo/pull/68336
task-2491890

X-original-commit: 2be9718e686e97e30a043a687be725c9a986ea7a

addons/web_editor/static/src/scss/web_editor.frontend.scss

@@ -47,8 +47,9 @@
         @each $shape, $style in $shapes {
             $url-params: '';
             $colors: map-get($style, 'colors');
+            $color-to-cc-bg-map: map-merge($default-color-to-cc-bg-map, map-get($style, 'color-to-cc-bg-map') or ());
             @each $i in $colors {
-                $cc: map-get($default-color-to-cc-bg-map, $i);
+                $cc: map-get($color-to-cc-bg-map, $i);
                 // %23 is the url-encoded form of '#'
                 $color: str-replace("#{o-color('o-cc#{$cc}-bg')}", '#', '%23');
                 $url-params: '#{$url-params}&c#{$i}=#{$color}';

addons/web_editor/static/src/scss/web_editor.variables.scss

@@ -750,3 +750,13 @@ $o-bg-shapes: ('web_editor': (
     'Zigs/04': ('position': bottom, 'size': 100% auto, 'colors': (1), 'repeat-y': false),
     'Zigs/05': ('position': bottom, 'size': 100% auto, 'colors': (3), 'repeat-y': false),
 ));
+
+@function change-shape-colors-mapping($module, $shape-name, $mapping, $shapes: $o-bg-shapes) {
+    $-module-shapes: map-get($shapes, $module);
+    $-modified-module-shapes: map-merge($-module-shapes, (
+        $shape-name: map-merge(map-get($-module-shapes, $shape-name), ('color-to-cc-bg-map': $mapping)),
+    ));
+    @return map-merge($shapes, (
+        $module: $-modified-module-shapes,
+    ));
+}