[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

@@ -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">

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">

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">

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">

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>
 

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>
 

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=" "/>

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">

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">

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>
 

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>
 

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">

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">

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">

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>
 

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">

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">

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">

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=" "/>

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>

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">

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">

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">

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 -->

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 -->

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 -->

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 -->

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 -->

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>
 

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">

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>
 

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=" "/>

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 -->

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">

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">

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>
 

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 -->

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>
 

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">

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">

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">

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">

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">

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 -->

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=" "/>

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">

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">