[IMP] web_editor, website: add background shapes snippet option

This commit adds a new snippet option allowing the user to choose one of
a series of SVG shapes as their background, or to be overlaid over the
background image of a snippet and to customize the colors of those
shapes.

Part of https://github.com/odoo/odoo/pull/53017
task-2210790

closes odoo/odoo#53017

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

1 files changed, 98 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 f71d4d36184..0c483f9d668 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -578,3 +578,101 @@ $o-color-extras-nesting-selector: '&, .o_colored_level &';
         }
     }
 }
+
+// format: (module_name: (shape_filename: ('position': X, 'size': Y, 'colors': (1, [3], ...)), ...))
+$o-bg-shapes: ('web_editor': (
+    'Airy/01': ('position': bottom, 'size': 100% auto, 'colors': (1), 'repeat-y': false),
+    'Airy/02': ('position': top, 'size': 100% auto, 'colors': (1), 'repeat-y': false),
+    'Airy/03': ('position': top, 'size': 100% auto, 'colors': (5), 'repeat-y': false),
+    'Airy/04': ('position': center, 'size': 100% 100%, 'colors': (1), 'repeat-y': false),
+    'Airy/05': ('position': center, 'size': 100% 100%, 'colors': (1), 'repeat-y': false),
+    'Airy/06': ('position': bottom, 'size': 100% auto, 'colors': (2), 'repeat-y': false),
+    'Airy/07': ('position': top, 'size': 100% auto, 'colors': (2), 'repeat-y': false),
+    'Airy/08': ('position': bottom, 'size': 100% auto, 'colors': (1), 'repeat-y': false),
+    'Airy/09': ('position': top, 'size': 100% auto, 'colors': (1), 'repeat-y': false),
+    'Airy/10': ('position': bottom, 'size': 100% auto, 'colors': (5), 'repeat-y': false),
+    'Airy/11': ('position': top, 'size': 100% auto, 'colors': (5), 'repeat-y': false),
+    'Airy/12': ('position': top, 'size': 100% auto, 'colors': (1, 3), 'repeat-y': false),
+    'Airy/13': ('position': bottom, 'size': 100% auto, 'colors': (1, 4), 'repeat-y': false),
+    'Airy/14': ('position': bottom, 'size': 100% auto, 'colors': (1, 4), 'repeat-y': false),
+    'Blobs/01': ('position': top, 'size': 100% auto, 'colors': (2), 'repeat-y': false),
+    'Blobs/02': ('position': center, 'size': 100% 100%, 'colors': (1, 2), 'repeat-y': false),
+    'Blobs/03': ('position': top, 'size': 100% auto, 'colors': (2), 'repeat-y': false),
+    'Blobs/04': ('position': center, 'size': 100% auto, 'colors': (5), 'repeat-y': false),
+    'Blobs/05': ('position': bottom, 'size': 100% auto, 'colors': (1), 'repeat-y': false),
+    'Blobs/06': ('position': top, 'size': 100% auto, 'colors': (1), 'repeat-y': false),
+    'Blobs/07': ('position': top, 'size': 100% auto, 'colors': (5), 'repeat-y': false),
+    'Blobs/08': ('position': right, 'size': 100% auto, 'colors': (1), 'repeat-y': false),
+    'Blobs/09': ('position': bottom, 'size': 100% auto, 'colors': (3), 'repeat-y': false),
+    'Blobs/10': ('position': top, 'size': 100% auto, 'colors': (1, 5), 'repeat-y': false),
+    'Blobs/11': ('position': center, 'size': 100% auto, 'colors': (1), 'repeat-y': false),
+    'Blobs/12': ('position': bottom, 'size': 100% auto, 'colors': (1), 'repeat-y': false),
+    'Blocks/01': ('position': bottom, 'size': 100% auto, 'colors': (1, 3, 5), 'repeat-y': false),
+    'Blocks/02': ('position': top, 'size': 100% auto, 'colors': (1, 3, 5), 'repeat-y': false),
+    'Blocks/03': ('position': bottom, 'size': 100% auto, 'colors': (1, 4), 'repeat-y': false),
+    'Blocks/04': ('position': bottom, 'size': 100% auto, 'colors': (1, 2, 3, 5), 'repeat-y': false),
+    'Bold/01': ('position': top, 'size': 100% auto, 'colors': (2), 'repeat-y': false),
+    'Bold/02': ('position': bottom, 'size': 100% auto, 'colors': (1, 2, 3), 'repeat-y': false),
+    'Bold/03': ('position': bottom, 'size': 100% auto, 'colors': (1, 3, 5), 'repeat-y': false),
+    'Bold/04': ('position': top, 'size': 100% auto, 'colors': (2, 3), 'repeat-y': false),
+    'Bold/05': ('position': center, 'size': 100% auto, 'colors': (5), 'repeat-y': false),
+    'Bold/06': ('position': center, 'size': 100% auto, 'colors': (5), 'repeat-y': false),
+    'Bold/07': ('position': bottom, 'size': 100% auto, 'colors': (1, 2), 'repeat-y': false),
+    'Bold/08': ('position': top, 'size': 100% auto, 'colors': (1), 'repeat-y': false),
+    'Bold/09': ('position': bottom, 'size': 100% auto, 'colors': (2, 3), 'repeat-y': false),
+    'Bold/10': ('position': top, 'size': 100% auto, 'colors': (1, 3, 4, 5), 'repeat-y': false),
+    'Bold/11': ('position': bottom, 'size': 100% auto, 'colors': (1, 2, 3), 'repeat-y': false),
+    'Bold/12': ('position': center, 'size': 100% auto, 'colors': (1, 2, 5), 'repeat-y': false),
+    'Origins/01': ('position': bottom, 'size': 100% auto, 'colors': (2, 5), 'repeat-y': false),
+    'Origins/02': ('position': bottom, 'size': 100% auto, 'colors': (3), 'repeat-y': false),
+    'Origins/03': ('position': top, 'size': 100% auto, 'colors': (3), 'repeat-y': false),
+    'Origins/04': ('position': bottom, 'size': 100% auto, 'colors': (3), 'repeat-y': false),
+    'Origins/05': ('position': top, 'size': 100% auto, 'colors': (3), 'repeat-y': false),
+    'Origins/06': ('position': center, 'size': 100% auto, 'colors': (3), 'repeat-y': false),
+    'Origins/07': ('position': center, 'size': 100% 100%, 'colors': (3), 'repeat-y': false),
+    'Origins/08': ('position': bottom, 'size': 100% auto, 'colors': (3), 'repeat-y': false),
+    'Origins/09': ('position': top, 'size': 100% auto, 'colors': (1, 5), 'repeat-y': false),
+    'Origins/10': ('position': bottom, 'size': 100% auto, 'colors': (2, 5), 'repeat-y': false),
+    'Origins/11': ('position': bottom, 'size': 100% auto, 'colors': (3, 5), 'repeat-y': false),
+    'Origins/12': ('position': top, 'size': 100% auto, 'colors': (3, 5), 'repeat-y': false),
+    'Origins/13': ('position': center, 'size': 100% auto, 'colors': (3, 5), 'repeat-y': false),
+    'Origins/14': ('position': bottom, 'size': 100% auto, 'colors': (4), 'repeat-y': false),
+    'Origins/15': ('position': top, 'size': 100% auto, 'colors': (4), 'repeat-y': false),
+    'Rainy/01': ('position': bottom, 'size': 100% auto, 'colors': (1, 5), 'repeat-y': false),
+    'Rainy/02': ('position': top, 'size': 100% auto, 'colors': (1, 4, 5), 'repeat-y': false),
+    'Rainy/03': ('position': top, 'size': 100% auto, 'colors': (2, 4, 5), 'repeat-y': true),
+    'Rainy/04': ('position': top, 'size': 100% auto, 'colors': (1, 5), 'repeat-y': false),
+    'Rainy/05': ('position': top, 'size': 100% auto, 'colors': (1, 5), 'repeat-y': false),
+    'Rainy/06': ('position': bottom, 'size': 100% auto, 'colors': (1, 2, 3), 'repeat-y': false),
+    'Rainy/07': ('position': top, 'size': 100% auto, 'colors': (1, 2, 3), 'repeat-y': false),
+    'Rainy/08': ('position': top, 'size': 100% auto, 'colors': (1, 4), 'repeat-y': false),
+    'Rainy/09': ('position': top, 'size': 100% auto, 'colors': (1), 'repeat-y': false),
+    'Wavy/01': ('position': bottom, 'size': 100% auto, 'colors': (4), 'repeat-y': false),
+    'Wavy/02': ('position': top, 'size': 100% auto, 'colors': (4), 'repeat-y': false),
+    'Wavy/03': ('position': top, 'size': 100% auto, 'colors': (1, 2), 'repeat-y': false),
+    'Wavy/04': ('position': bottom, 'size': 100% auto, 'colors': (1, 5), 'repeat-y': false),
+    'Wavy/05': ('position': top, 'size': 100% auto, 'colors': (1, 5), 'repeat-y': false),
+    'Wavy/06': ('position': top, 'size': 100% auto, 'colors': (1, 3, 4, 5), 'repeat-y': false),
+    'Wavy/07': ('position': top, 'size': 100% auto, 'colors': (3), 'repeat-y': false),
+    'Wavy/08': ('position': top, 'size': 100% auto, 'colors': (2), 'repeat-y': false),
+    'Wavy/09': ('position': bottom, 'size': 100% auto, 'colors': (1, 5), 'repeat-y': false),
+    'Wavy/10': ('position': center, 'size': 100% auto, 'colors': (1, 2), 'repeat-y': false),
+    'Wavy/11': ('position': bottom, 'size': 100% auto, 'colors': (1, 4), 'repeat-y': false),
+    'Wavy/12': ('position': top, 'size': 100% auto, 'colors': (1), 'repeat-y': false),
+    'Wavy/13': ('position': bottom, 'size': 100% auto, 'colors': (4), 'repeat-y': false),
+    'Wavy/14': ('position': bottom, 'size': 100% auto, 'colors': (1, 3), 'repeat-y': false),
+    'Wavy/15': ('position': top, 'size': 100% auto, 'colors': (1), 'repeat-y': false),
+    'Wavy/16': ('position': bottom, 'size': 100% auto, 'colors': (1), 'repeat-y': false),
+    'Wavy/17': ('position': top, 'size': 100% auto, 'colors': (1), 'repeat-y': false),
+    'Wavy/18': ('position': bottom, 'size': 100% auto, 'colors': (5), 'repeat-y': false),
+    'Wavy/19': ('position': top, 'size': 100% auto, 'colors': (5), 'repeat-y': false),
+    'Wavy/20': ('position': bottom, 'size': 100% auto, 'colors': (2), 'repeat-y': false),
+    'Wavy/21': ('position': top, 'size': 100% auto, 'colors': (2), 'repeat-y': false),
+    'Wavy/22': ('position': bottom, 'size': 100% auto, 'colors': (3), 'repeat-y': false),
+    'Wavy/23': ('position': top, 'size': 100% auto, 'colors': (3), 'repeat-y': false),
+    'Zigs/01': ('position': bottom, 'size': 100% auto, 'colors': (2), 'repeat-y': false),
+    'Zigs/02': ('position': bottom, 'size': 100% auto, 'colors': (2), 'repeat-y': false),
+    'Zigs/03': ('position': top, 'size': 100% auto, 'colors': (1), 'repeat-y': true),
+    'Zigs/04': ('position': bottom, 'size': 100% auto, 'colors': (1), 'repeat-y': false),
+    'Zigs/05': ('position': bottom, 'size': 100% auto, 'colors': (3), 'repeat-y': false),
+));