From 44b3badbcaabcf378bbb2d1941d2e92b3e6ac316 Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Fri, 17 Mar 2023 15:31:49 +0000
Subject: [PATCH] [FIX] theme_*: remove flip classes from theme snippets

Initially, the background shapes were flipped using only CSS. This was
done by adding the classes 'o_we_flip_x' or 'o_we_flip_y' to a shape to
flip it. However, this system caused issues as it sometimes left a gap
between two connected shapes. As a result, the system was changed with
this commit [1], and the classes 'o_we_flip_x' and 'o_we_flip_y' were no
longer used from this point on.

Despite this change, in our themes, we continued to use these obsolete
classes to define whether a shape should be flipped or not. This commit
addresses this by removing all instances of 'o_we_flip_x' and
'o_we_flip_y' classes that were still being used in theme snippets and
replacing them with the new system, where flipping is defined as a
parameter in the background image URL.

Note that in stable versions where we cannot modify theme snippets, we
have added code to automatically adapt the shapes to the new system
(in this commit [2]).

[1]: https://github.com/odoo/odoo/commit/42b3ad10e0b32b7fc72f801e2c67d6baf938c566
[2]: https://github.com/odoo/odoo/commit/256ff539afe331544ccb58848f1ecd0eecbe4daa

task-2824607

closes odoo/design-themes#639

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 theme_artists/views/snippets/s_banner.xml            |  2 +-
 theme_artists/views/snippets/s_call_to_action.xml    |  2 +-
 theme_artists/views/snippets/s_carousel.xml          |  2 +-
 theme_artists/views/snippets/s_color_blocks_2.xml    |  2 +-
 theme_artists/views/snippets/s_numbers.xml           |  2 +-
 theme_artists/views/snippets/s_parallax.xml          |  2 +-
 theme_avantgarde/views/customizations.xml            |  2 +-
 theme_aviato/views/snippets/s_cover.xml              |  2 +-
 theme_beauty/views/snippets/s_company_team.xml       |  2 +-
 theme_beauty/views/snippets/s_picture.xml            |  2 +-
 theme_beauty/views/snippets/s_title.xml              |  2 +-
 theme_bewise/views/customizations.xml                |  6 +++---
 theme_bistro/views/snippets/s_banner.xml             |  2 +-
 theme_bookstore/views/snippets/s_call_to_action.xml  |  2 +-
 theme_bookstore/views/snippets/s_product_catalog.xml |  2 +-
 theme_buzzy/views/snippets/s_color_blocks_2.xml      |  2 +-
 theme_clean/views/snippets/s_call_to_action.xml      |  2 +-
 theme_clean/views/snippets/s_comparisons.xml         |  2 +-
 theme_cobalt/views/customizations.xml                |  6 +++---
 theme_graphene/views/customizations.xml              |  4 ++--
 theme_kea/views/snippets/s_image_text.xml            |  2 +-
 theme_kea/views/snippets/s_picture.xml               |  2 +-
 theme_kea/views/snippets/s_text_image.xml            |  2 +-
 theme_kiddo/views/snippets/s_banner.xml              |  2 +-
 theme_kiddo/views/snippets/s_image_text.xml          |  2 +-
 theme_kiddo/views/snippets/s_picture.xml             |  4 ++--
 theme_kiddo/views/snippets/s_text_image.xml          |  2 +-
 theme_kiddo/views/snippets/s_three_columns.xml       |  2 +-
 theme_loftspace/views/snippets/s_color_blocks_2.xml  |  2 +-
 theme_loftspace/views/snippets/s_image_text.xml      |  2 +-
 theme_loftspace/views/snippets/s_numbers.xml         |  2 +-
 theme_monglia/views/customizations.xml               |  2 +-
 theme_nano/views/snippets/s_cover.xml                |  2 +-
 theme_nano/views/snippets/s_parallax.xml             |  2 +-
 theme_notes/views/snippets/s_banner.xml              |  2 +-
 theme_notes/views/snippets/s_carousel.xml            |  4 ++--
 theme_notes/views/snippets/s_media_list.xml          |  2 +-
 theme_odoo_experts/views/snippets/s_company_team.xml |  2 +-
 theme_odoo_experts/views/snippets/s_picture.xml      |  2 +-
 theme_odoo_experts/views/snippets/s_text_image.xml   |  2 +-
 theme_orchid/views/snippets/s_image_text.xml         |  2 +-
 theme_orchid/views/snippets/s_text_image.xml         |  2 +-
 theme_paptic/views/customizations.xml                | 12 ++++++------
 theme_real_estate/views/snippets/s_banner.xml        |  2 +-
 theme_vehicle/views/customizations.xml               |  2 +-
 theme_yes/views/snippets/s_image_gallery.xml         |  4 ++--
 theme_zap/views/snippets/s_banner.xml                |  2 +-
 47 files changed, 60 insertions(+), 60 deletions(-)

diff --git a/theme_artists/views/snippets/s_banner.xml b/theme_artists/views/snippets/s_banner.xml
index bd93fadc0..4d2c1b2b8 100644
--- a/theme_artists/views/snippets/s_banner.xml
+++ b/theme_artists/views/snippets/s_banner.xml
@@ -10,7 +10,7 @@
     <!-- Shape & filter -->
     <xpath expr="//div[hasclass('container')]" position="before">
         <div class="o_we_bg_filter" style="background-color: rgba(17, 13, 22, 0.85) !important;"/>
-        <div class="o_we_shape o_web_editor_Wavy_02_001 o_we_flip_y"/>
+        <div class="o_we_shape o_web_editor_Wavy_02_001" style="background-image: url('/web_editor/shape/web_editor/Wavy/02_001.svg?c3=o-color-5&amp;flip=y'); background-position: 50% 100%;"/>
     </xpath>
     <!-- Jumbotron -->
     <xpath expr="//div[hasclass('jumbotron')]" position="attributes">
diff --git a/theme_artists/views/snippets/s_call_to_action.xml b/theme_artists/views/snippets/s_call_to_action.xml
index a014872da..98e51f8c9 100644
--- a/theme_artists/views/snippets/s_call_to_action.xml
+++ b/theme_artists/views/snippets/s_call_to_action.xml
@@ -9,7 +9,7 @@
     </xpath>
     <!-- Shape -->
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Airy_12_001 o_we_flip_y"/>
+        <div class="o_we_shape o_web_editor_Airy_12_001" style="background-image: url('/web_editor/shape/web_editor/Airy/12_001.svg?c1=o-color-1&amp;c3=o-color-5&amp;flip=y'); background-position: 50% 100%;"/>
     </xpath>
     <!-- Title & Paragraph -->
     <xpath expr="//h3" position="replace" mode="inner">
diff --git a/theme_artists/views/snippets/s_carousel.xml b/theme_artists/views/snippets/s_carousel.xml
index 62b76a57a..56de5dd48 100644
--- a/theme_artists/views/snippets/s_carousel.xml
+++ b/theme_artists/views/snippets/s_carousel.xml
@@ -31,7 +31,7 @@
     <!-- Shape & filter -->
     <xpath expr="//div[hasclass('carousel-item')][2]//div[hasclass('container')]" position="before">
         <div class="o_we_bg_filter bg-black-25"/>
-        <div class="o_we_shape o_web_editor_Origins_16 o_we_flip_y"/>
+        <div class="o_we_shape o_web_editor_Origins_16" style="background-image: url('/web_editor/shape/web_editor/Origins/16.svg?c3=o-color-5&amp;flip=y'); background-position: 50% 50%;"/>
     </xpath>
     <!-- Content -->
     <xpath expr="//div[hasclass('carousel-item')][2]//div[hasclass('carousel-content')]" position="replace">
diff --git a/theme_artists/views/snippets/s_color_blocks_2.xml b/theme_artists/views/snippets/s_color_blocks_2.xml
index cd7dfca60..543573899 100644
--- a/theme_artists/views/snippets/s_color_blocks_2.xml
+++ b/theme_artists/views/snippets/s_color_blocks_2.xml
@@ -9,7 +9,7 @@
     </xpath>
     <!-- Left column - Shape -->
     <xpath expr="//div[hasclass('col-lg-6')]//i" position="before">
-        <div class="o_we_shape o_web_editor_Wavy_27 o_we_flip_x o_we_flip_y o_second_extra_shape_mapping"/>
+        <div class="o_we_shape o_web_editor_Wavy_27 o_second_extra_shape_mapping" style="background-image: url('/web_editor/shape/web_editor/Wavy/27.svg?c1=o-color-5&amp;c2=o-color-5&amp;flip=xy'); background-position: 50% 50%;"/>
     </xpath>
     <!-- Left column - Button -->
     <xpath expr="//div[hasclass('col-lg-6')]//a[hasclass('btn')]" position="attributes">
diff --git a/theme_artists/views/snippets/s_numbers.xml b/theme_artists/views/snippets/s_numbers.xml
index d9e20d19e..d25e8526a 100644
--- a/theme_artists/views/snippets/s_numbers.xml
+++ b/theme_artists/views/snippets/s_numbers.xml
@@ -9,7 +9,7 @@
     </xpath>
     <!-- Shape -->
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Airy_12_001 o_we_flip_x"/>
+        <div class="o_we_shape o_web_editor_Airy_12_001" style="background-image: url('/web_editor/shape/web_editor/Airy/12_001.svg?c1=o-color-1&amp;c3=o-color-5&amp;flip=x'); background-position: 50% 0%;"/>
     </xpath>
 </template>
 
diff --git a/theme_artists/views/snippets/s_parallax.xml b/theme_artists/views/snippets/s_parallax.xml
index 2026e1b5b..8101ec2f2 100644
--- a/theme_artists/views/snippets/s_parallax.xml
+++ b/theme_artists/views/snippets/s_parallax.xml
@@ -12,7 +12,7 @@
     </xpath>
     <!-- Shape -->
     <xpath expr="//section/*[last()]" position="before">
-        <div class="o_we_shape o_web_editor_Airy_12_001 o_we_flip_y"/>
+        <div class="o_we_shape o_web_editor_Airy_12_001" style="background-image: url('/web_editor/shape/web_editor/Airy/12_001.svg?c1=o-color-1&amp;c3=o-color-5&amp;flip=y'); background-position: 50% 100%;"/>
     </xpath>
 </template>
 
diff --git a/theme_avantgarde/views/customizations.xml b/theme_avantgarde/views/customizations.xml
index e1af768a7..46b13381f 100644
--- a/theme_avantgarde/views/customizations.xml
+++ b/theme_avantgarde/views/customizations.xml
@@ -11,7 +11,7 @@
         <attribute name="style" remove="background-position: 50% 0;" add="background-position: 50% 80%;" separator=";"/>
     </xpath>
     <xpath expr="//div[hasclass('s_allow_columns')]" position="before">
-        <div class="o_we_shape o_web_editor_Origins_18 o_we_flip_x"/>
+        <div class="o_we_shape o_web_editor_Origins_18" style="background-image: url('/web_editor/shape/web_editor/Origins/18.svg?c1=o-color-2&amp;flip=x'); background-position: 50% 50%;"/>
     </xpath>
     <xpath expr="//font" position="attributes">
         <attribute name="class" add="text-o-color-1 text-break" separator=" "/>
diff --git a/theme_aviato/views/snippets/s_cover.xml b/theme_aviato/views/snippets/s_cover.xml
index 5d461e4c1..399bbdc6c 100644
--- a/theme_aviato/views/snippets/s_cover.xml
+++ b/theme_aviato/views/snippets/s_cover.xml
@@ -12,7 +12,7 @@
     </xpath>
     <!-- Shape -->
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Wavy_21 o_we_flip_y"/>
+        <div class="o_we_shape o_web_editor_Wavy_21" style="background-image: url('/web_editor/shape/web_editor/Wavy/21.svg?c2=o-color-4&amp;flip=y'); background-position: 50% 100%;"/>
     </xpath>
     <!-- Title -->
     <xpath expr="//h1" position="replace" mode="inner">
diff --git a/theme_beauty/views/snippets/s_company_team.xml b/theme_beauty/views/snippets/s_company_team.xml
index 102fc7e18..75d8443cc 100644
--- a/theme_beauty/views/snippets/s_company_team.xml
+++ b/theme_beauty/views/snippets/s_company_team.xml
@@ -9,7 +9,7 @@
     </xpath>
     <!-- Shape -->
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Wavy_20 o_we_flip_y"/>
+        <div class="o_we_shape o_web_editor_Wavy_20" style="background-image: url('/web_editor/shape/web_editor/Wavy/20.svg?c2=o-color-4&amp;flip=y'); background-position: 50% 0%;"/>
     </xpath>
     <!-- Titles -->
     <xpath expr="(//div[hasclass('col-lg-8')])[1]/h4" position="replace" mode="inner">
diff --git a/theme_beauty/views/snippets/s_picture.xml b/theme_beauty/views/snippets/s_picture.xml
index d4bdf8ff1..752940d02 100644
--- a/theme_beauty/views/snippets/s_picture.xml
+++ b/theme_beauty/views/snippets/s_picture.xml
@@ -9,7 +9,7 @@
     </xpath>
     <!-- Shape -->
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Rainy_06 o_we_flip_x"/>
+        <div class="o_we_shape o_web_editor_Rainy_06" style="background-image: url('/web_editor/shape/web_editor/Rainy/06.svg?c1=o-color-1&amp;c2=o-color-2&amp;c3=o-color-3&amp;flip=x'); background-position: 50% 100%;"/>
     </xpath>
 </template>
 
diff --git a/theme_beauty/views/snippets/s_title.xml b/theme_beauty/views/snippets/s_title.xml
index 1bdef7d1b..f12326c8c 100644
--- a/theme_beauty/views/snippets/s_title.xml
+++ b/theme_beauty/views/snippets/s_title.xml
@@ -13,7 +13,7 @@
     </xpath>
     <!-- Shape -->
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Wavy_13_001 o_we_flip_y"/>
+        <div class="o_we_shape o_web_editor_Wavy_13_001" style="background-image: url('/web_editor/shape/web_editor/Wavy/13_001.svg?c1=o-color-2&amp;flip=y'); background-position: 50% 0%;"/>
     </xpath>
 </template>
 
diff --git a/theme_bewise/views/customizations.xml b/theme_bewise/views/customizations.xml
index eacd84b4e..6ea16fa2c 100644
--- a/theme_bewise/views/customizations.xml
+++ b/theme_bewise/views/customizations.xml
@@ -46,7 +46,7 @@
     <!-- Filter & shape -->
     <xpath expr="//div[hasclass('container')]" position="before">
         <div class="o_we_bg_filter bg-black-50"/>
-        <div class="o_we_shape o_web_editor_Origins_18 o_we_flip_x"/>
+        <div class="o_we_shape o_web_editor_Origins_18" style="background-image: url('/web_editor/shape/web_editor/Origins/18.svg?c1=o-color-1&amp;flip=x'); background-position: 50% 50%;"/>
     </xpath>
     <!-- Wrap -->
     <xpath expr="//div[hasclass('col-lg-6')]" position="attributes">
@@ -125,7 +125,7 @@
         <attribute name="data-oe-shape-data">{"shape":"web_editor/Blobs/11","flip":["x"]}</attribute>
     </xpath>
     <xpath expr="//section/div" position="before">
-        <div class="o_we_shape o_web_editor_Blobs_11 o_we_flip_x"/>
+        <div class="o_we_shape o_web_editor_Blobs_11" style="background-image: url('/web_editor/shape/web_editor/Blobs/11.svg?c1=o-color-1&amp;flip=x'); background-position: 50% 50%;"/>
     </xpath>
     <xpath expr="//h6" position="replace" mode="inner">
         Faculties
@@ -162,7 +162,7 @@
     </xpath>
     <!-- Shape -->
     <xpath expr="//ol[hasclass('carousel-indicators')]" position="before">
-        <div class="o_we_shape o_web_editor_Origins_14_001 o_we_flip_y"/>
+        <div class="o_we_shape o_web_editor_Origins_14_001" style="background-image: url('/web_editor/shape/web_editor/Origins/14_001.svg?c3=o-color-4&amp;c4=o-color-4&amp;flip=y'); background-position: 50% 0%;"/>
     </xpath>
     <!-- Slide #1 -->
     <xpath expr="//div[hasclass('carousel-item')]" position="attributes">
diff --git a/theme_bistro/views/snippets/s_banner.xml b/theme_bistro/views/snippets/s_banner.xml
index e49c692f0..41752cbbc 100644
--- a/theme_bistro/views/snippets/s_banner.xml
+++ b/theme_bistro/views/snippets/s_banner.xml
@@ -11,7 +11,7 @@
     </xpath>
     <xpath expr="//*[hasclass('s_parallax_bg')]" position="replace"/>
     <xpath expr="//*[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Origins_09_001 o_we_flip_x"/>
+        <div class="o_we_shape o_web_editor_Origins_09_001" style="background-image: url('/web_editor/shape/web_editor/Origins/09_001.svg?c3=o-color-2&amp;flip=x'); background-position: 50% 0%;"/>
     </xpath>
     <!-- Title -->
     <xpath expr="//h1" position="replace" mode="inner">
diff --git a/theme_bookstore/views/snippets/s_call_to_action.xml b/theme_bookstore/views/snippets/s_call_to_action.xml
index 61c90a797..5ab36b926 100644
--- a/theme_bookstore/views/snippets/s_call_to_action.xml
+++ b/theme_bookstore/views/snippets/s_call_to_action.xml
@@ -9,7 +9,7 @@
     </xpath>
     <!-- Shape -->
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Wavy_20 o_we_flip_y o_we_flip_x"/>
+        <div class="o_we_shape o_web_editor_Wavy_20" style="background-image: url('/web_editor/shape/web_editor/Wavy/20.svg?c2=o-color-5&amp;flip=xy'); background-position: 50% 0%;"/>
     </xpath>
     <!-- Paragraph #1 -->
     <xpath expr="//div[hasclass('col-lg-9')]" position="replace">
diff --git a/theme_bookstore/views/snippets/s_product_catalog.xml b/theme_bookstore/views/snippets/s_product_catalog.xml
index 1de3707af..22375fca0 100644
--- a/theme_bookstore/views/snippets/s_product_catalog.xml
+++ b/theme_bookstore/views/snippets/s_product_catalog.xml
@@ -10,7 +10,7 @@
     <!-- Shape and filter -->
     <xpath expr="//section/*" position="before">
         <div class="o_we_bg_filter" style="background-color: rgba(47, 47, 47, 0.7) !important;"/>
-        <div class="o_we_shape o_web_editor_Origins_17 o_we_flip_y"/>
+        <div class="o_we_shape o_web_editor_Origins_17" style="background-image: url('/web_editor/shape/web_editor/Origins/17.svg?c3=o-color-5&amp;flip=y'); background-position: 50% 50%;"/>
     </xpath>
 </template>
 
diff --git a/theme_buzzy/views/snippets/s_color_blocks_2.xml b/theme_buzzy/views/snippets/s_color_blocks_2.xml
index 6d1229fb5..2c0c8d7bf 100644
--- a/theme_buzzy/views/snippets/s_color_blocks_2.xml
+++ b/theme_buzzy/views/snippets/s_color_blocks_2.xml
@@ -9,7 +9,7 @@
     </xpath>
     <!-- Left block - Shape -->
     <xpath expr="//div[hasclass('row')]//div//i" position="before">
-        <div class="o_we_shape o_web_editor_Wavy_11 o_we_flip_y o_we_flip_x"/>
+        <div class="o_we_shape o_web_editor_Wavy_11" style="background-image: url('/web_editor/shape/web_editor/Wavy/11.svg?c1=o-color-5&amp;c4=o-color-5&amp;flip=xy'); background-position: 50% 0%;"/>
     </xpath>
     <!-- Right block -->
     <xpath expr="//div[hasclass('row')]//div[2]" position="attributes">
diff --git a/theme_clean/views/snippets/s_call_to_action.xml b/theme_clean/views/snippets/s_call_to_action.xml
index e3776c5a7..df17f2b52 100644
--- a/theme_clean/views/snippets/s_call_to_action.xml
+++ b/theme_clean/views/snippets/s_call_to_action.xml
@@ -9,7 +9,7 @@
     </xpath>
     <!-- Shape -->
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Origins_14_001 o_we_flip_y"/>
+        <div class="o_we_shape o_web_editor_Origins_14_001" style="background-image: url('/web_editor/shape/web_editor/Origins/14_001.svg?c3=o-color-4&amp;c4=o-color-3&amp;flip=y'); background-position: 50% 0%;"/>
     </xpath>
     <!-- Paragraph -->
     <xpath expr="//div[hasclass('col-lg-9')]" position="attributes">
diff --git a/theme_clean/views/snippets/s_comparisons.xml b/theme_clean/views/snippets/s_comparisons.xml
index db41e4330..3a7bf2f67 100644
--- a/theme_clean/views/snippets/s_comparisons.xml
+++ b/theme_clean/views/snippets/s_comparisons.xml
@@ -9,7 +9,7 @@
     </xpath>
     <!-- Shape -->
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Wavy_05 o_we_flip_y"/>
+        <div class="o_we_shape o_web_editor_Wavy_05" style="background-image: url('/web_editor/shape/web_editor/Wavy/05.svg?c1=o-color-1&amp;c5=o-color-5&amp;flip=y'); background-position: 50% 100%;"/>
     </xpath>
     <!-- Left card -->
     <xpath expr="//div[hasclass('card')]" position="attributes">
diff --git a/theme_cobalt/views/customizations.xml b/theme_cobalt/views/customizations.xml
index 033e1bd83..4244c87f5 100644
--- a/theme_cobalt/views/customizations.xml
+++ b/theme_cobalt/views/customizations.xml
@@ -9,7 +9,7 @@
         <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/11_001","flip":["y"]}</attribute>
     </xpath>
     <xpath expr="//section/div" position="before">
-        <div class="o_we_shape o_web_editor_Origins_11_001 o_we_flip_y"/>
+        <div class="o_we_shape o_web_editor_Origins_11_001" style="background-image: url('/web_editor/shape/web_editor/Origins/11_001.svg?c3=o-color-4&amp;c4=o-color-4&amp;flip=y'); background-position: 50% 100%;"/>
     </xpath>
     <xpath expr="//div[hasclass('col-lg-6')]" position="attributes">
         <attribute name="class" remove="jumbotron rounded pt32 pb32 o_cc o_cc1" separator=" "/>
@@ -141,7 +141,7 @@
         <attribute name="data-oe-shape-data">{"shape":"web_editor/Bold/01","flip":["x"]}</attribute>
     </xpath>
     <xpath expr="//section/div" position="before">
-        <div class="o_we_shape o_web_editor_Bold_01 o_we_flip_x"/>
+        <div class="o_we_shape o_web_editor_Bold_01" style="background-image: url('/web_editor/shape/web_editor/Bold/01.svg?c2=o-color-3&amp;flip=x'); background-position: 50% 0%;"/>
     </xpath>
     <xpath expr="//div[hasclass('row')]" position="before">
         <h2 style="text-align: center;">Latest projects</h2>
@@ -163,7 +163,7 @@
         <attribute name="data-oe-shape-data">{"shape":"web_editor/Bold/01","flip":["y"]}</attribute>
     </xpath>
     <xpath expr="//section/div" position="before">
-        <div class="o_we_shape o_web_editor_Bold_01 o_we_flip_y"></div>
+        <div class="o_we_shape o_web_editor_Bold_01" style="background-image: url('/web_editor/shape/web_editor/Bold/01.svg?c2=o-color-3&amp;flip=y'); background-position: 50% 100%;"></div>
     </xpath>
     <xpath expr="//div[hasclass('container')]" position="attributes">
         <attribute name="class" add="container-fluid px-5 px-lg-0" remove="container" separator=" "/>
diff --git a/theme_graphene/views/customizations.xml b/theme_graphene/views/customizations.xml
index d94f12f7d..4b5ce2d2c 100644
--- a/theme_graphene/views/customizations.xml
+++ b/theme_graphene/views/customizations.xml
@@ -44,7 +44,7 @@
         <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/02_001","flip":["x","y"]}</attribute>
     </xpath>
     <xpath expr="//section/div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Origins_02_001 o_second_extra_shape_mapping o_we_flip_x o_we_flip_y"/>
+        <div class="o_we_shape o_web_editor_Origins_02_001 o_second_extra_shape_mapping" style="background-image: url('/web_editor/shape/web_editor/Origins/02_001.svg?c4=o-color-3&amp;c5=rgba%280%2C%200%2C%200%2C%200%29&amp;flip=xy'); background-position: 50% 0%;"/>
     </xpath>
     <xpath expr="//h2" position="replace">
         <h3>Unique experiences to drive engagement</h3>
@@ -219,7 +219,7 @@
         <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/06_001","flip":["x"]}</attribute>
     </xpath>
     <xpath expr="//section/div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Origins_06_001 o_we_flip_x "/>
+        <div class="o_we_shape o_web_editor_Origins_06_001" style="background-image: url('/web_editor/shape/web_editor/Origins/06_001.svg?c3=o-color-3&amp;c4=o-color-4&amp;flip=x'); background-position: 50% 50%;"/>
     </xpath>
     <xpath expr="//div[hasclass('row')]/div//a" position="replace">
         <a href="/contactus" class="btn btn-primary mb-2">Start Now</a>
diff --git a/theme_kea/views/snippets/s_image_text.xml b/theme_kea/views/snippets/s_image_text.xml
index d46774cf1..6d5e16e67 100644
--- a/theme_kea/views/snippets/s_image_text.xml
+++ b/theme_kea/views/snippets/s_image_text.xml
@@ -9,7 +9,7 @@
     </xpath>
     <!-- Shape -->
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Wavy_22 o_we_flip_y"/>
+        <div class="o_we_shape o_web_editor_Wavy_22" style="background-image: url('/web_editor/shape/web_editor/Wavy/22.svg?c3=o-color-2&amp;flip=y'); background-position: 50% 0%;"/>
     </xpath>
     <!-- Image -->
     <xpath expr="//img" position="attributes">
diff --git a/theme_kea/views/snippets/s_picture.xml b/theme_kea/views/snippets/s_picture.xml
index 7121384af..a2a35fbf4 100644
--- a/theme_kea/views/snippets/s_picture.xml
+++ b/theme_kea/views/snippets/s_picture.xml
@@ -9,7 +9,7 @@
     </xpath>
     <!-- Shape -->
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Wavy_03 o_we_flip_y"/>
+        <div class="o_we_shape o_web_editor_Wavy_03" style="background-image: url('/web_editor/shape/web_editor/Wavy/03.svg?c1=o-color-1&amp;c2=o-color-2&amp;flip=y'); background-position: 50% 100%;"/>
     </xpath>
     <!-- Title -->
     <xpath expr="//h2" position="replace" mode="inner">
diff --git a/theme_kea/views/snippets/s_text_image.xml b/theme_kea/views/snippets/s_text_image.xml
index 8c32d65bd..302d89da4 100644
--- a/theme_kea/views/snippets/s_text_image.xml
+++ b/theme_kea/views/snippets/s_text_image.xml
@@ -9,7 +9,7 @@
     </xpath>
     <!-- Shape -->
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Wavy_22 o_we_flip_x o_second_extra_shape_mapping"/>
+        <div class="o_we_shape o_web_editor_Wavy_22 o_second_extra_shape_mapping" style="background-image: url('/web_editor/shape/web_editor/Wavy/22.svg?c3=o-color-2&amp;flip=x'); background-position: 50% 100%;"/>
     </xpath>
     <!-- Image -->
     <xpath expr="//img" position="attributes">
diff --git a/theme_kiddo/views/snippets/s_banner.xml b/theme_kiddo/views/snippets/s_banner.xml
index ee6cc4bbb..2bd65ba16 100644
--- a/theme_kiddo/views/snippets/s_banner.xml
+++ b/theme_kiddo/views/snippets/s_banner.xml
@@ -16,7 +16,7 @@
     <!-- Shape & filter -->
     <xpath expr="//div[hasclass('container')]" position="before">
         <div class="o_we_bg_filter" style="background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.15) 100%) !important;"/>
-        <div class="o_we_shape o_web_editor_Wavy_22 o_we_flip_x"/>
+        <div class="o_we_shape o_web_editor_Wavy_22" style="background-image: url('/web_editor/shape/web_editor/Wavy/22.svg?c3=o-color-3&amp;flip=x'); background-position: 50% 100%;"/>
     </xpath>
 
     <!-- Paragraph -->
diff --git a/theme_kiddo/views/snippets/s_image_text.xml b/theme_kiddo/views/snippets/s_image_text.xml
index 6ad590733..0b1b94b7a 100644
--- a/theme_kiddo/views/snippets/s_image_text.xml
+++ b/theme_kiddo/views/snippets/s_image_text.xml
@@ -10,7 +10,7 @@
 
     <!-- Shape -->
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Floats_13 o_we_flip_x"/>
+        <div class="o_we_shape o_web_editor_Floats_13" style="background-image: url('/web_editor/shape/web_editor/Floats/13.svg?c1=o-color-1&amp;c2=o-color-2&amp;c5=o-color-5&amp;flip=x'); background-position: 50% 50%;"/>
     </xpath>
 
     <!-- Last column -->
diff --git a/theme_kiddo/views/snippets/s_picture.xml b/theme_kiddo/views/snippets/s_picture.xml
index 337506c0f..e54694b6b 100644
--- a/theme_kiddo/views/snippets/s_picture.xml
+++ b/theme_kiddo/views/snippets/s_picture.xml
@@ -5,12 +5,12 @@
     <!-- Section -->
     <xpath expr="//section" position="attributes">
         <attribute name="class" add="o_colored_level o_cc4 pt96" remove="o_cc2 pt48" separator=" "/>
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/16"}</attribute>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/16","flip":["x"]}</attribute>
     </xpath>
 
     <!-- Shape -->
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Origins_16 o_we_flip_x"/>
+        <div class="o_we_shape o_web_editor_Origins_16" style="background-image: url('/web_editor/shape/web_editor/Origins/16.svg?c3=o-color-2&amp;flip=x'); background-position: 50% 50%;"/>
     </xpath>
 
     <!-- Heading -->
diff --git a/theme_kiddo/views/snippets/s_text_image.xml b/theme_kiddo/views/snippets/s_text_image.xml
index 36f2dbc6d..efb1b6bac 100644
--- a/theme_kiddo/views/snippets/s_text_image.xml
+++ b/theme_kiddo/views/snippets/s_text_image.xml
@@ -10,7 +10,7 @@
 
     <!-- Shape -->
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Floats_13 o_we_flip_y"/>
+        <div class="o_we_shape o_web_editor_Floats_13" style="background-image: url('/web_editor/shape/web_editor/Floats/13.svg?c1=o-color-1&amp;c2=o-color-2&amp;c5=o-color-5&amp;flip=y'); background-position: 50% 50%;"/>
     </xpath>
 
     <!-- First column -->
diff --git a/theme_kiddo/views/snippets/s_three_columns.xml b/theme_kiddo/views/snippets/s_three_columns.xml
index 2fa0754ec..30f94b4b8 100644
--- a/theme_kiddo/views/snippets/s_three_columns.xml
+++ b/theme_kiddo/views/snippets/s_three_columns.xml
@@ -10,7 +10,7 @@
 
     <!-- Shape -->
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Origins_14_001 o_we_flip_y"/>
+        <div class="o_we_shape o_web_editor_Origins_14_001" style="background-image: url('/web_editor/shape/web_editor/Origins/14_001.svg?c3=o-color-3&amp;c4=rgba%280%2C%200%2C%200%2C%200%29&amp;flip=y'); background-position: 50% 0%;"/>
     </xpath>
 
     <!-- Column n°1 -->
diff --git a/theme_loftspace/views/snippets/s_color_blocks_2.xml b/theme_loftspace/views/snippets/s_color_blocks_2.xml
index c84514803..7c51cb0fe 100644
--- a/theme_loftspace/views/snippets/s_color_blocks_2.xml
+++ b/theme_loftspace/views/snippets/s_color_blocks_2.xml
@@ -16,7 +16,7 @@
         <attribute name="data-oe-shape-data">{'shape':'web_editor/Airy/04_001','flip':['x']}</attribute>
     </xpath>
     <xpath expr="(//i)[2]" position="before">
-        <div class="o_we_shape o_web_editor_Airy_04_001 o_we_flip_x o_second_extra_shape_mapping"/>
+        <div class="o_we_shape o_web_editor_Airy_04_001 o_second_extra_shape_mapping" style="background-image: url('/web_editor/shape/web_editor/Airy/04_001.svg?c1=o-color-5&amp;flip=x'); background-position: 50% 50%;"/>
     </xpath>
 </template>
 
diff --git a/theme_loftspace/views/snippets/s_image_text.xml b/theme_loftspace/views/snippets/s_image_text.xml
index 8ebe9e722..62c527f01 100644
--- a/theme_loftspace/views/snippets/s_image_text.xml
+++ b/theme_loftspace/views/snippets/s_image_text.xml
@@ -9,7 +9,7 @@
     </xpath>
     <!-- Add shape -->
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Airy_10 o_we_flip_x"/>
+        <div class="o_we_shape o_web_editor_Airy_10" style="background-image: url('/web_editor/shape/web_editor/Airy/10.svg?c5=o-color-1&amp;flip=x'); background-position: 50% 100%;"/>
     </xpath>
     <!-- Img wrapper -->
     <xpath expr="//div[hasclass('row')]//div" position="attributes">
diff --git a/theme_loftspace/views/snippets/s_numbers.xml b/theme_loftspace/views/snippets/s_numbers.xml
index 2a2a5578d..11c3206f2 100644
--- a/theme_loftspace/views/snippets/s_numbers.xml
+++ b/theme_loftspace/views/snippets/s_numbers.xml
@@ -9,7 +9,7 @@
     </xpath>
     <!-- Add shape -->
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Airy_03_001 o_we_flip_y"/>
+        <div class="o_we_shape o_web_editor_Airy_03_001" style="background-image: url('/web_editor/shape/web_editor/Airy/03_001.svg?c5=o-color-1&amp;flip=y'); background-position: 50% 100%;"/>
     </xpath>
 </template>
 
diff --git a/theme_monglia/views/customizations.xml b/theme_monglia/views/customizations.xml
index d6da0aa52..2506ff144 100644
--- a/theme_monglia/views/customizations.xml
+++ b/theme_monglia/views/customizations.xml
@@ -99,7 +99,7 @@
         <attribute name="data-oe-shape-data">{"shape":"web_editor/Blocks/04","flip":["y"]}</attribute>
     </xpath>
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Blocks_04 o_we_flip_y o_second_extra_shape_mapping"/>
+        <div class="o_we_shape o_web_editor_Blocks_04 o_second_extra_shape_mapping" style="background-image: url('/web_editor/shape/web_editor/Blocks/04.svg?c1=o-color-1&amp;c2=o-color-2&amp;c3=o-color-3&amp;c5=o-color-5&amp;flip=y'); background-position: 50% 0%;"/>
     </xpath>
     <xpath expr="//div[hasclass('col-lg-6')]" position="attributes">
         <attribute name="class" remove="col-lg-6" add="col-lg-5 offset-lg-1" separator=" "/>
diff --git a/theme_nano/views/snippets/s_cover.xml b/theme_nano/views/snippets/s_cover.xml
index 5d94cdf3b..2b9299fbb 100644
--- a/theme_nano/views/snippets/s_cover.xml
+++ b/theme_nano/views/snippets/s_cover.xml
@@ -10,7 +10,7 @@
         <attribute name="style">background-image: url('/web/image/website.s_cover_default_image'); background-position: 50% 0;</attribute>
     </xpath>
     <xpath expr="//*[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Bold_12_001 o_we_flip_x"/>
+        <div class="o_we_shape o_web_editor_Bold_12_001" style="background-image: url('/web_editor/shape/web_editor/Bold/12_001.svg?c1=rgba%280%2C%200%2C%200%2C%200.5%29&amp;c2=rgba%280%2C%200%2C%200%2C%200.25%29&amp;c5=o-color-5&amp;flip=x'); background-position: 50% 50%;"/>
     </xpath>
     <xpath expr="//*[hasclass('s_parallax_bg')]" position="replace"/>
     <!-- Title & Text -->
diff --git a/theme_nano/views/snippets/s_parallax.xml b/theme_nano/views/snippets/s_parallax.xml
index a5fdae5b1..3312d270e 100644
--- a/theme_nano/views/snippets/s_parallax.xml
+++ b/theme_nano/views/snippets/s_parallax.xml
@@ -8,7 +8,7 @@
         <attribute name="data-oe-shape-data">{"shape":"web_editor/Rainy/10", "flip":["x","y"]}</attribute>
     </xpath>
     <xpath expr="//*[hasclass('oe_structure')]" position="before">
-        <div class="o_we_shape o_web_editor_Rainy_10 o_we_flip_x o_we_flip_y"/>
+        <div class="o_we_shape o_web_editor_Rainy_10" style="background-image: url('/web_editor/shape/web_editor/Rainy/10.svg?c1=o-color-1&amp;c3=o-color-3&amp;flip=xy'); background-position: 50% 50%;"/>
     </xpath>
     <!-- Content -->
     <xpath expr="//*[hasclass('oe_structure')]" position="inside">
diff --git a/theme_notes/views/snippets/s_banner.xml b/theme_notes/views/snippets/s_banner.xml
index ecb2042ef..5fde5fc86 100644
--- a/theme_notes/views/snippets/s_banner.xml
+++ b/theme_notes/views/snippets/s_banner.xml
@@ -10,7 +10,7 @@
     <!-- Filter & Shape -->
     <xpath expr="//div[hasclass('container')]" position="before">
         <div class="o_we_bg_filter bg-black-75"/>
-        <div class="o_we_shape o_web_editor_Floats_08 o_we_flip_x o_we_flip_y"/>
+        <div class="o_we_shape o_web_editor_Floats_08" style="background-image: url('/web_editor/shape/web_editor/Floats/08.svg?c1=o-color-1&amp;c2=o-color-2&amp;c3=o-color-3&amp;c5=o-color-1&amp;flip=xy'); background-position: 100% 100%;"/>
     </xpath>
     <!-- Jumbotron -->
     <xpath expr="//div[hasclass('jumbotron')]" position="attributes">
diff --git a/theme_notes/views/snippets/s_carousel.xml b/theme_notes/views/snippets/s_carousel.xml
index e05882a7a..3ab9ba0b9 100644
--- a/theme_notes/views/snippets/s_carousel.xml
+++ b/theme_notes/views/snippets/s_carousel.xml
@@ -17,7 +17,7 @@
     </xpath>
     <!-- Slide #1 - Shape -->
     <xpath expr="//div[hasclass('carousel-item')]//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Wavy_25 o_we_flip_y"/>
+        <div class="o_we_shape o_web_editor_Wavy_25" style="background-image: url('/web_editor/shape/web_editor/Wavy/25.svg?c1=o-color-5&amp;c2=o-color-5&amp;flip=y'); background-position: 50% 100%;"/>
     </xpath>
     <!-- Slide #2 -->
     <xpath expr="//div[hasclass('carousel-item')][2]" position="attributes">
@@ -51,7 +51,7 @@
     </xpath>
     <!-- Slide #3 - Shape -->
     <xpath expr="//div[hasclass('carousel-item')][3]//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Wavy_25 o_we_flip_y o_third_extra_shape_mapping"/>
+        <div class="o_we_shape o_web_editor_Wavy_25 o_third_extra_shape_mapping" style="background-image: url('/web_editor/shape/web_editor/Wavy/25.svg?c1=o-color-2&amp;c2=o-color-2&amp;flip=y'); background-position: 50% 100%;"/>
     </xpath>
 </template>
 
diff --git a/theme_notes/views/snippets/s_media_list.xml b/theme_notes/views/snippets/s_media_list.xml
index 1c625749c..aa2f1e948 100644
--- a/theme_notes/views/snippets/s_media_list.xml
+++ b/theme_notes/views/snippets/s_media_list.xml
@@ -9,7 +9,7 @@
     </xpath>
     <!-- Shape -->
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Blobs_01_001 o_we_flip_y"/>
+        <div class="o_we_shape o_web_editor_Blobs_01_001" style="background-image: url('/web_editor/shape/web_editor/Blobs/01_001.svg?c2=o-color-3&amp;flip=y'); background-position: 50% 100%;"/>
     </xpath>
 
     <!-- Row #1 -->
diff --git a/theme_odoo_experts/views/snippets/s_company_team.xml b/theme_odoo_experts/views/snippets/s_company_team.xml
index 7e53e7f62..6d304c791 100644
--- a/theme_odoo_experts/views/snippets/s_company_team.xml
+++ b/theme_odoo_experts/views/snippets/s_company_team.xml
@@ -9,7 +9,7 @@
     </xpath>
     <!-- Shape -->
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Origins_02_001 o_we_flip_x o_third_extra_shape_mapping"/>
+        <div class="o_we_shape o_web_editor_Origins_02_001 o_third_extra_shape_mapping" style="background-image: url('/web_editor/shape/web_editor/Origins/02_001.svg?c4=o-color-3&amp;c5=o-color-4&amp;flip=x'); background-position: 50% 100%;"/>
     </xpath>
 </template>
 
diff --git a/theme_odoo_experts/views/snippets/s_picture.xml b/theme_odoo_experts/views/snippets/s_picture.xml
index b4a597380..12a24a1a5 100644
--- a/theme_odoo_experts/views/snippets/s_picture.xml
+++ b/theme_odoo_experts/views/snippets/s_picture.xml
@@ -11,7 +11,7 @@
     <!-- Shape & filter -->
     <xpath expr="//div[hasclass('container')]" position="before">
         <div class="o_we_bg_filter bg-white-75"/>
-        <div class="o_we_shape o_web_editor_Wavy_08 o_we_flip_y"/>
+        <div class="o_we_shape o_web_editor_Wavy_08" style="background-image: url('/web_editor/shape/web_editor/Wavy/08.svg?c2=o-color-3&amp;flip=y'); background-position: 50% 100%;"/>
     </xpath>
     <!-- Title -->
     <xpath expr="//h2" position="replace">
diff --git a/theme_odoo_experts/views/snippets/s_text_image.xml b/theme_odoo_experts/views/snippets/s_text_image.xml
index a23b27a06..9ea522e3e 100644
--- a/theme_odoo_experts/views/snippets/s_text_image.xml
+++ b/theme_odoo_experts/views/snippets/s_text_image.xml
@@ -9,7 +9,7 @@
     </xpath>
     <!-- Shape -->
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Airy_12_001 o_we_flip_y"/>
+        <div class="o_we_shape o_web_editor_Airy_12_001" style="background-image: url('/web_editor/shape/web_editor/Airy/12_001.svg?c1=o-color-5&amp;c3=o-color-4&amp;flip=y'); background-position: 50% 100%;"/>
     </xpath>
     <!-- Column #1 -->
     <xpath expr="//div[hasclass('col-lg-6')]" position="attributes">
diff --git a/theme_orchid/views/snippets/s_image_text.xml b/theme_orchid/views/snippets/s_image_text.xml
index 5c4359339..6021dc401 100644
--- a/theme_orchid/views/snippets/s_image_text.xml
+++ b/theme_orchid/views/snippets/s_image_text.xml
@@ -9,7 +9,7 @@
     </xpath>
     <!-- Shape -->
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Wavy_04 o_we_flip_x"/>
+        <div class="o_we_shape o_web_editor_Wavy_04" style="background-image: url('/web_editor/shape/web_editor/Wavy/04.svg?c1=o-color-1&amp;c5=o-color-1&amp;flip=x'); background-position: 50% 100%;"/>
     </xpath>
     <!-- Text wrapper -->
     <xpath expr="//div[hasclass('col-lg-6')][2]" position="attributes">
diff --git a/theme_orchid/views/snippets/s_text_image.xml b/theme_orchid/views/snippets/s_text_image.xml
index c8ce350a1..dc0789a08 100644
--- a/theme_orchid/views/snippets/s_text_image.xml
+++ b/theme_orchid/views/snippets/s_text_image.xml
@@ -9,7 +9,7 @@
     </xpath>
     <!-- Shape -->
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Wavy_07 o_we_flip_x"/>
+        <div class="o_we_shape o_web_editor_Wavy_07" style="background-image: url('/web_editor/shape/web_editor/Wavy/07.svg?c3=o-color-1&amp;flip=x'); background-position: 50% 0%;"/>
     </xpath>
     <!-- Row -->
     <xpath expr="//div[hasclass('row')]" position="attributes">
diff --git a/theme_paptic/views/customizations.xml b/theme_paptic/views/customizations.xml
index 11bfd6b87..caff5bd4c 100644
--- a/theme_paptic/views/customizations.xml
+++ b/theme_paptic/views/customizations.xml
@@ -21,7 +21,7 @@
     </xpath>
 
     <xpath expr="//section/div" position="before">
-        <div class="o_we_shape o_web_editor_Blocks_04 o_we_flip_x"/>
+        <div class="o_we_shape o_web_editor_Blocks_04" style="background-image: url('/web_editor/shape/web_editor/Blocks/04.svg?c1=o-color-1&amp;c2=o-color-2&amp;c3=o-color-4&amp;c5=o-color-5&amp;flip=x'); background-position: 50% 100%;"/>
     </xpath>
 
     <!-- Enable SVG dynamic color functionality -->
@@ -73,7 +73,7 @@
     </xpath>
 
     <xpath expr="//section/div" position="before">
-        <div class="o_we_shape o_web_editor_Origins_02_001 o_we_flip_y"></div>
+        <div class="o_we_shape o_web_editor_Origins_02_001" style="background-image: url('/web_editor/shape/web_editor/Origins/02_001.svg?c4=o-color-4&amp;c5=o-color-2&amp;flip=y'); background-position: 50% 0%;"></div>
     </xpath>
 
     <xpath expr="//img" position="attributes">
@@ -303,7 +303,7 @@
     </xpath>
     <!-- Shape -->
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Airy_12_001 o_we_flip_y"/>
+        <div class="o_we_shape o_web_editor_Airy_12_001" style="background-image: url('/web_editor/shape/web_editor/Airy/12_001.svg?c1=o-color-5&amp;c3=o-color-4&amp;flip=y'); background-position: 50% 100%;"/>
     </xpath>
     <!-- Title -->
     <xpath expr="//h3" position="replace" mode="inner">
@@ -345,7 +345,7 @@
         <attribute name="data-oe-shape-data">{"shape":"web_editor/Blocks/03","flip":["y"]}</attribute>
     </xpath>
     <xpath expr="//div[hasclass('col-lg-6')]/i" position="before">
-        <div class="o_we_shape o_web_editor_Blocks_03 o_we_flip_y"/>
+        <div class="o_we_shape o_web_editor_Blocks_03" style="background-image: url('/web_editor/shape/web_editor/Blocks/03.svg?c1=o-color-1&amp;c4=o-color-4&amp;flip=y'); background-position: 50% 0%"/>
     </xpath>
     <!-- Right column -->
     <xpath expr="//div[hasclass('col-lg-6')][2]" position="attributes">
@@ -353,7 +353,7 @@
         <attribute name="data-oe-shape-data">{"shape":"web_editor/Blocks/03","flip":["x","y"]}</attribute>
     </xpath>
     <xpath expr="//div[hasclass('col-lg-6')][2]/i" position="before">
-        <div class="o_we_shape o_web_editor_Blocks_03 o_we_flip_x o_we_flip_y"/>
+        <div class="o_we_shape o_web_editor_Blocks_03" style="background-image: url('/web_editor/shape/web_editor/Blocks/03.svg?c1=o-color-1&amp;c4=o-color-4&amp;flip=xy'); background-position: 50% 0%"/>
     </xpath>
 </template>
 
@@ -390,7 +390,7 @@
     </xpath>
     <!-- Shape -->
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Origins_07_002 o_we_flip_x"/>
+        <div class="o_we_shape o_web_editor_Origins_07_002" style="background-image: url('/web_editor/shape/web_editor/Origins/07_002.svg?c3=o-color-4&amp;c4=o-color-2&amp;c5=o-color-4&amp;flip=x'); background-position: 50% 50%;"/>
     </xpath>
     <!-- Container -->
     <xpath expr="//div[hasclass('container')]" position="attributes">
diff --git a/theme_real_estate/views/snippets/s_banner.xml b/theme_real_estate/views/snippets/s_banner.xml
index ec4051f1e..b621bee72 100644
--- a/theme_real_estate/views/snippets/s_banner.xml
+++ b/theme_real_estate/views/snippets/s_banner.xml
@@ -10,7 +10,7 @@
 
     <xpath expr="//span[hasclass('s_parallax_bg')]" position="after">
         <div class="o_we_bg_filter bg-black-50"></div>
-        <div class="o_we_shape o_web_editor_Origins_18 o_we_flip_x"/>
+        <div class="o_we_shape o_web_editor_Origins_18" style="background-image: url('/web_editor/shape/web_editor/Origins/18.svg?c1=o-color-2&amp;flip=x'); background-position: 50% 50%;"/>
     </xpath>
 
     <!-- Title -->
diff --git a/theme_vehicle/views/customizations.xml b/theme_vehicle/views/customizations.xml
index 053f9e29c..f9b21b5da 100644
--- a/theme_vehicle/views/customizations.xml
+++ b/theme_vehicle/views/customizations.xml
@@ -7,7 +7,7 @@
         <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/18","flip":["x"]}</attribute>
     </xpath>
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Origins_18 o_we_flip_x"/>
+        <div class="o_we_shape o_web_editor_Origins_18" style="background-image: url('/web_editor/shape/web_editor/Origins/18.svg?c1=o-color-4&amp;flip=x'); background-position: 50% 50%;"/>
     </xpath>
     <xpath expr="//div[hasclass('jumbotron')]" position="attributes">
         <attribute name="class" remove="o_cc o_cc1" separator=" "/>
diff --git a/theme_yes/views/snippets/s_image_gallery.xml b/theme_yes/views/snippets/s_image_gallery.xml
index 946c3302f..4fcd3dfaa 100644
--- a/theme_yes/views/snippets/s_image_gallery.xml
+++ b/theme_yes/views/snippets/s_image_gallery.xml
@@ -5,11 +5,11 @@
     <!-- Section -->
     <xpath expr="//section" position="attributes">
         <attribute name="class" add="s_image_gallery_indicators_dots" remove="s_image_gallery_indicators_rounded" separator=" "/>
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Floats/12", "flip":["x","y"]}</attribute>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Floats/12", "flip":[]}</attribute>
     </xpath>
     <!-- Shape -->
     <xpath expr="//*[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Floats_12 o_we_flip_x o_we_flip_y"/>
+        <div class="o_we_shape o_web_editor_Floats_12"/>
     </xpath>
     <!-- Container -->
     <xpath expr="//*[hasclass('container')]" position="attributes">
diff --git a/theme_zap/views/snippets/s_banner.xml b/theme_zap/views/snippets/s_banner.xml
index 57e1a7f52..c54cb69bd 100644
--- a/theme_zap/views/snippets/s_banner.xml
+++ b/theme_zap/views/snippets/s_banner.xml
@@ -8,7 +8,7 @@
         <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/04_001","flip":["y"]}</attribute>
     </xpath>
     <xpath expr="//*[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Origins_04_001 o_we_flip_y"/>
+        <div class="o_we_shape o_web_editor_Origins_04_001" style="background-image: url('/web_editor/shape/web_editor/Origins/04_001.svg?c3=o-color-1&amp;flip=y'); background-position: 50% 100%;"/>
     </xpath>
     <!-- Column -->
     <xpath expr="//*[hasclass('col-lg-6')]" position="attributes">