From 845b9695556c7548704f09d62a7dc696fbf7a40f Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Wed, 12 May 2021 10:29:54 +0000
Subject: [PATCH] [IMP] theme_*: remove hardcoded colors on shapes and snippets

Instead now use another custom mapping for the default colors of the
shapes which are used for the default homepage. This allows for the
built page to work with any color palette (especially useful for built
pages in the new configurator) and to handle footer/header connection.

Also change some shapes and default background colors to match what
the preview wanted directly (instead of relying on user asked change as
that would not be handled when generating the page automatically with
the configurator).

Part of https://github.com/odoo/design-themes/pull/2
task-2491890

closes odoo/design-themes#12

closes odoo/design-themes#13

Related: odoo/odoo#71665
Related: odoo/odoo#71699
X-original-commit: c483cf271956d2100223e7e1ec1256d8191f9de2
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 .../static/src/scss/primary_variables.scss     |  8 ++++++++
 .../views/snippets/s_call_to_action.xml        |  4 ++--
 theme_artists/views/snippets/s_parallax.xml    |  4 ++--
 theme_artists/views/snippets/s_text_image.xml  |  6 +++---
 .../views/snippets/s_three_columns.xml         |  4 ++--
 .../static/src/scss/primary_variables.scss     |  6 ++++++
 theme_avantgarde/views/customizations.xml      |  4 ++--
 .../static/src/scss/primary_variables.scss     |  6 ++++++
 theme_bewise/views/customizations.xml          |  4 ++--
 .../static/src/scss/primary_variables.scss     |  7 +++++++
 .../views/snippets/s_call_to_action.xml        |  4 ++--
 theme_clean/views/snippets/s_cover.xml         |  4 ++--
 theme_clean/views/snippets/s_text_image.xml    |  4 ++--
 .../static/src/scss/primary_variables.scss     |  8 ++++++++
 theme_cobalt/views/customizations.xml          |  8 ++++----
 .../static/src/scss/primary_variables.scss     |  8 ++++++++
 theme_kea/views/snippets/s_cover.xml           |  4 ++--
 theme_kea/views/snippets/s_image_text.xml      |  4 ++--
 theme_kea/views/snippets/s_references.xml      |  4 ++--
 .../static/src/scss/primary_variables.scss     |  9 +++++++++
 theme_kiddo/views/snippets/s_banner.xml        |  4 ++--
 .../views/snippets/s_call_to_action.xml        |  4 ++--
 theme_kiddo/views/snippets/s_image_text.xml    |  4 ++--
 theme_kiddo/views/snippets/s_three_columns.xml |  4 ++--
 theme_monglia/views/customizations.xml         |  4 ++--
 .../static/src/scss/primary_variables.scss     |  7 +++++++
 theme_notes/views/snippets/s_carousel.xml      |  6 +++---
 theme_notes/views/snippets/s_company_team.xml  |  4 ++--
 theme_notes/views/snippets/s_image_text.xml    |  6 +++---
 theme_notes/views/snippets/s_media_list.xml    | 10 +++++-----
 theme_odoo_experts/views/snippets/s_banner.xml |  2 +-
 .../static/src/scss/primary_variables.scss     |  8 ++++++++
 theme_orchid/views/snippets/s_image_text.xml   |  4 ++--
 theme_orchid/views/snippets/s_text_image.xml   |  4 ++--
 .../views/snippets/s_three_columns.xml         |  2 +-
 .../static/src/scss/primary_variables.scss     |  8 ++++++++
 theme_paptic/views/customizations.xml          | 18 +++++++++---------
 .../static/src/scss/primary_variables.scss     |  7 +++++++
 theme_real_estate/views/snippets/s_banner.xml  |  4 ++--
 .../views/snippets/s_image_text.xml            |  4 ++--
 .../views/snippets/s_quotes_carousel.xml       | 12 ++++++------
 theme_vehicle/views/customizations.xml         |  4 ++--
 42 files changed, 161 insertions(+), 79 deletions(-)

diff --git a/theme_artists/static/src/scss/primary_variables.scss b/theme_artists/static/src/scss/primary_variables.scss
index e9aa68e29..a7ffccbf9 100644
--- a/theme_artists/static/src/scss/primary_variables.scss
+++ b/theme_artists/static/src/scss/primary_variables.scss
@@ -119,3 +119,11 @@ $o-color-palettes-compatibility-indexes: (
     22: 'generic-16',
     23: 'generic-17',
 );
+
+//------------------------------------------------------------------------------
+// Shapes
+//------------------------------------------------------------------------------
+
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Airy/12', (3: 3));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Wavy/04', (5: 4));
+$o-bg-shapes: add-footer-shape-colors-mapping('web_editor', 'Airy/12', (3: 'footer'));
diff --git a/theme_artists/views/snippets/s_call_to_action.xml b/theme_artists/views/snippets/s_call_to_action.xml
index 9f3e9a175..90ec9855a 100644
--- a/theme_artists/views/snippets/s_call_to_action.xml
+++ b/theme_artists/views/snippets/s_call_to_action.xml
@@ -4,11 +4,11 @@
         <!-- Section -->
         <xpath expr="//section" position="attributes">
             <attribute name="class" add="pb152 pt64" remove="pb24 pt48" separator=" "/>
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Airy/12","colors":{"c1":"#ab44ff","c3":"o-color-5"},"flip":["y"]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Airy/12","flip":["y"]}</attribute>
         </xpath>
         <!-- Shape -->
         <xpath expr="//div[hasclass('container')]" position="before">
-            <div class="o_we_shape o_web_editor_Airy_12 o_we_flip_y" style="background-image: url('/web_editor/shape/web_editor/Airy/12.svg?c1=%23ab44ff&amp;c3=%23000000');"/>
+            <div class="o_we_shape o_web_editor_Airy_12 o_we_flip_y"/>
         </xpath>
         <!-- Paragraph -->
         <xpath expr="//h3" position="replace">
diff --git a/theme_artists/views/snippets/s_parallax.xml b/theme_artists/views/snippets/s_parallax.xml
index 9a679fbd9..20098e128 100644
--- a/theme_artists/views/snippets/s_parallax.xml
+++ b/theme_artists/views/snippets/s_parallax.xml
@@ -3,7 +3,7 @@
     <template id="s_parallax" inherit_id="website.s_parallax">
         <!-- Section -->
         <xpath expr="//section" position="attributes">
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Airy/12","colors":{"c1":"#ab44ff","c3":"o-color-2"},"flip":["y"]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Airy/12","flip":["y"]}</attribute>
         </xpath>
         <!-- Bg Image -->
         <xpath expr="//span[hasclass('s_parallax_bg')]" position="replace">
@@ -11,7 +11,7 @@
         </xpath>
         <!-- Shape -->
         <xpath expr="//section/*[last()]" position="before">
-            <div class="o_we_shape o_web_editor_Airy_12 o_we_flip_y" style="background-image: url('/web_editor/shape/web_editor/Airy/12.svg?c1=%23ab44ff&amp;c3=%233A3A3A');"/>
+            <div class="o_we_shape o_web_editor_Airy_12 o_we_flip_y"/>
         </xpath>
     </template>
 </odoo>
diff --git a/theme_artists/views/snippets/s_text_image.xml b/theme_artists/views/snippets/s_text_image.xml
index 454dd5c80..0eb6511e3 100644
--- a/theme_artists/views/snippets/s_text_image.xml
+++ b/theme_artists/views/snippets/s_text_image.xml
@@ -3,12 +3,12 @@
     <template id="s_text_image" inherit_id="website.s_text_image">
         <!-- Section -->
         <xpath expr="//section" position="attributes">
-            <attribute name="class" add="o_cc o_cc3" separator=" "/>
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Airy/12","colors":{"c1":"#ab44ff","c3":"o-color-1"},"flip":["y"]}</attribute>
+            <attribute name="class" add="o_cc o_cc3 pb128" separator=" "/>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/04"}</attribute>
         </xpath>
         <!-- Shape -->
         <xpath expr="//div[hasclass('container')]" position="before">
-            <div class="o_we_shape o_web_editor_Airy_12 o_we_flip_y" style="background-image: url('/web_editor/shape/web_editor/Airy/12.svg?c1=%23ab44ff&amp;c3=%23AB44FF');"/>
+            <div class="o_we_shape o_web_editor_Wavy_04" />
         </xpath>
         <!-- Paragraph -->
         <xpath expr="//div[hasclass('col-lg-6')]" position="replace">
diff --git a/theme_artists/views/snippets/s_three_columns.xml b/theme_artists/views/snippets/s_three_columns.xml
index 756a52b62..f1ea8bf15 100644
--- a/theme_artists/views/snippets/s_three_columns.xml
+++ b/theme_artists/views/snippets/s_three_columns.xml
@@ -4,11 +4,11 @@
         <!-- Section -->
         <xpath expr="//section" position="attributes">
             <attribute name="class" add="o_cc o_cc4" remove="bg-200" separator=" "/>
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Airy/12","colors":{"c1":"#ab44ff","c3":"o-color-2"},"flip":["y"]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Airy/12","flip":["y"]}</attribute>
         </xpath>
         <!-- Shape -->
         <xpath expr="//div[hasclass('container')]" position="before">
-            <div class="o_we_shape o_web_editor_Airy_12 o_we_flip_y" style="background-image: url('/web_editor/shape/web_editor/Airy/12.svg?c1=%23ab44ff&amp;c3=%233A3A3A');"/>
+            <div class="o_we_shape o_web_editor_Airy_12 o_we_flip_y"/>
         </xpath>
         <!-- Column 1 -->
         <xpath expr="//div[hasclass('card')]" position="attributes">
diff --git a/theme_avantgarde/static/src/scss/primary_variables.scss b/theme_avantgarde/static/src/scss/primary_variables.scss
index c78e6d8a8..e24711e84 100644
--- a/theme_avantgarde/static/src/scss/primary_variables.scss
+++ b/theme_avantgarde/static/src/scss/primary_variables.scss
@@ -215,3 +215,9 @@ $o-color-palettes-compatibility-indexes: (
     24: 'generic-16',
     25: 'generic-17',
 );
+
+//------------------------------------------------------------------------------
+// Shapes
+//------------------------------------------------------------------------------
+
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Blobs/01', (2: 2));
diff --git a/theme_avantgarde/views/customizations.xml b/theme_avantgarde/views/customizations.xml
index 974467b5e..ae1fdcdf4 100644
--- a/theme_avantgarde/views/customizations.xml
+++ b/theme_avantgarde/views/customizations.xml
@@ -79,10 +79,10 @@
 <!-- ======== REFERENCES ======== -->
  <template id="s_references" inherit_id="website.s_references" name="Avantgarde s_references">
     <xpath expr="//section" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Blobs/01","colors":{"c2":"o-color-3"},"flip":[]}</attribute>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Blobs/01","flip":[]}</attribute>
     </xpath>
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Blobs_01" style="background-image: url(&quot;/web_editor/shape/web_editor/Blobs/01.svg?c2=%23F7F7F7&quot;);"/>
+        <div class="o_we_shape o_web_editor_Blobs_01"/>
     </xpath>
 </template>
 
diff --git a/theme_bewise/static/src/scss/primary_variables.scss b/theme_bewise/static/src/scss/primary_variables.scss
index 816f7ba54..12a102585 100644
--- a/theme_bewise/static/src/scss/primary_variables.scss
+++ b/theme_bewise/static/src/scss/primary_variables.scss
@@ -150,3 +150,9 @@ $o-theme-color-palettes-compatibility-indexes: (
     3: 'bewise-3',
     4: 'bewise-4',
 );
+
+//------------------------------------------------------------------------------
+// Shapes
+//------------------------------------------------------------------------------
+
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Blobs/11', (1: 5));
diff --git a/theme_bewise/views/customizations.xml b/theme_bewise/views/customizations.xml
index 6961df9e0..72e555a3a 100644
--- a/theme_bewise/views/customizations.xml
+++ b/theme_bewise/views/customizations.xml
@@ -183,10 +183,10 @@
 <!-- ======== TEAM ======== -->
  <template id="s_company_team" inherit_id="website.s_company_team" name="Bewise s_company_team">
     <xpath expr="//section" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Blobs/01","colors":{"c2":"o-color-3"},"flip":["y"]}</attribute>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Blobs/09","flip":[]}</attribute>
     </xpath>
     <xpath expr="//section/div" position="before">
-        <div class="o_we_shape o_web_editor_Blobs_01 o_we_flip_y" style="background-image: url(&quot;/web_editor/shape/web_editor/Blobs/01.svg?c2=%23F0F4F4&quot;);"/>
+        <div class="o_we_shape o_web_editor_Blobs_09"/>
     </xpath>
 
     <xpath expr="//div[hasclass('s_nb_column_fixed')]/div//h4" position="replace">
diff --git a/theme_clean/static/src/scss/primary_variables.scss b/theme_clean/static/src/scss/primary_variables.scss
index 599e961d1..f88e480e8 100644
--- a/theme_clean/static/src/scss/primary_variables.scss
+++ b/theme_clean/static/src/scss/primary_variables.scss
@@ -239,3 +239,10 @@ $o-theme-color-palettes-compatibility-indexes: (
     5: 'clean-5',
     6: 'clean-6',
 );
+
+//------------------------------------------------------------------------------
+// Shapes
+//------------------------------------------------------------------------------
+
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Origins/14', (4: 4));
+$o-bg-shapes: add-header-shape-colors-mapping('web_editor', 'Origins/07_001', (3: 'menu', 5: 2));
diff --git a/theme_clean/views/snippets/s_call_to_action.xml b/theme_clean/views/snippets/s_call_to_action.xml
index 403074f2a..de64ebe5c 100644
--- a/theme_clean/views/snippets/s_call_to_action.xml
+++ b/theme_clean/views/snippets/s_call_to_action.xml
@@ -4,11 +4,11 @@
         <!-- Section -->
         <xpath expr="//section" position="attributes">
             <attribute name="class" add="pt80 o_cc2" remove="pt48 o_cc3" separator=" "/>
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/14","colors":{"c4":"o-color-1"},"flip":["y"]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/14", "flip":["y"]}</attribute>
         </xpath>
         <!-- Shape -->
         <xpath expr="//div[hasclass('container')]" position="before">
-            <div class="o_we_shape o_web_editor_Origins_14 o_we_flip_y" style="background-image: url('/web_editor/shape/web_editor/Origins/14.svg?c4=%233498DB');"/>
+            <div class="o_we_shape o_web_editor_Origins_14 o_we_flip_y"/>
         </xpath>
         <!-- Paragraph -->
         <xpath expr="//div[hasclass('col-lg-9')]" position="attributes">
diff --git a/theme_clean/views/snippets/s_cover.xml b/theme_clean/views/snippets/s_cover.xml
index b8a2ebcbb..244fbe488 100644
--- a/theme_clean/views/snippets/s_cover.xml
+++ b/theme_clean/views/snippets/s_cover.xml
@@ -4,7 +4,7 @@
         <!-- Section -->
         <xpath expr="//section" position="attributes">
             <attribute name="class" add="o_full_screen_height" separator=" "/>
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/12","colors":{"c3":"#e5edf2","c5":"#E5EDF2"},"flip":[]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/07_001","flip":[]}</attribute>
         </xpath>
         <!-- Title & Paragraph -->
         <xpath expr="//div[hasclass('container')]" position="replace">
@@ -20,7 +20,7 @@
         </xpath>
         <!-- Shape -->
         <xpath expr="//section//*[last()]" position="after">
-            <div class="o_we_shape o_web_editor_Origins_07"/>
+            <div class="o_we_shape o_web_editor_Origins_07_001"/>
         </xpath>
     </template>
 </odoo>
diff --git a/theme_clean/views/snippets/s_text_image.xml b/theme_clean/views/snippets/s_text_image.xml
index e750d3657..4fce2e9c9 100644
--- a/theme_clean/views/snippets/s_text_image.xml
+++ b/theme_clean/views/snippets/s_text_image.xml
@@ -4,11 +4,11 @@
         <!-- Section -->
         <xpath expr="//section" position="attributes">
             <attribute name="class" add="o_cc o_cc2" separator=" "/>
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/14","colors":{"c4":"o-color-1"},"flip":[]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/14","flip":[]}</attribute>
         </xpath>
         <!-- Shape -->
         <xpath expr="//div[hasclass('container')]" position="before">
-            <div class="o_we_shape o_web_editor_Origins_14" style="background-image: url('/web_editor/shape/web_editor/Origins/14.svg?c4=%233498DB');"/>
+            <div class="o_we_shape o_web_editor_Origins_14"/>
         </xpath>
         <!-- Title & Paragraph -->
         <xpath expr="//div[hasclass('col-lg-6')]" position="replace">
diff --git a/theme_cobalt/static/src/scss/primary_variables.scss b/theme_cobalt/static/src/scss/primary_variables.scss
index a6bce0e63..d795e4767 100644
--- a/theme_cobalt/static/src/scss/primary_variables.scss
+++ b/theme_cobalt/static/src/scss/primary_variables.scss
@@ -74,3 +74,11 @@ $o-color-palettes-compatibility-indexes: (
     17: 'generic-16',
     18: 'generic-17',
 );
+
+//------------------------------------------------------------------------------
+// Shapes
+//------------------------------------------------------------------------------
+
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Blobs/03', (2: 2));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Bold/01', (2: 2));
+$o-bg-shapes: add-footer-shape-colors-mapping('web_editor', 'Bold/01', (2: 'footer'));
diff --git a/theme_cobalt/views/customizations.xml b/theme_cobalt/views/customizations.xml
index 40c80c742..14242e6a5 100644
--- a/theme_cobalt/views/customizations.xml
+++ b/theme_cobalt/views/customizations.xml
@@ -45,11 +45,11 @@
 <template id="s_image_text" inherit_id="website.s_image_text" name="Cobalt s_image_text">
     <xpath expr="//section" position="attributes">
         <attribute name="class" add="pt152 pb128" remove="pt32 pb32" separator=" "/>
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Blobs/03","colors":{"c2":"o-color-3"},"flip":[]}</attribute>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Blobs/03","flip":[]}</attribute>
     </xpath>
 
     <xpath expr="//section/div" position="before">
-        <div class="o_we_shape o_web_editor_Blobs_03" style="background-image: url(&quot;/web_editor/shape/web_editor/Blobs/03.svg?c2=%23F6F4F2&quot;);"/>
+        <div class="o_we_shape o_web_editor_Blobs_03"/>
     </xpath>
 
     <xpath expr="//div[hasclass('col-lg-6')][2]" position="attributes">
@@ -137,10 +137,10 @@
 <template id="s_three_columns" inherit_id="website.s_three_columns" name="Cobalt s_three_columns">
     <xpath expr="//section" position="attributes">
         <attribute name="class" remove="bg-200 pt32 pb32" add="pt72 pb120" separator=" "/>
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Bold/01","colors":{"c2":"o-color-3"},"flip":["x"]}</attribute>
+        <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" style="background-image: url(&quot;/web_editor/shape/web_editor/Bold/01.svg?c2=%23F6F4F2&quot;);"/>
+        <div class="o_we_shape o_web_editor_Bold_01 o_we_flip_x"/>
     </xpath>
     <xpath expr="//div[hasclass('row')]" position="before">
         <h2 style="text-align: center;">Latest projects</h2>
diff --git a/theme_kea/static/src/scss/primary_variables.scss b/theme_kea/static/src/scss/primary_variables.scss
index b181c536a..ac8c90a49 100644
--- a/theme_kea/static/src/scss/primary_variables.scss
+++ b/theme_kea/static/src/scss/primary_variables.scss
@@ -161,3 +161,11 @@ $o-theme-color-palettes-compatibility-indexes: (
     5: 'kea-5',
     6: 'kea-6',
 );
+
+//------------------------------------------------------------------------------
+// Shapes
+//------------------------------------------------------------------------------
+
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Origins/03', (3: 5));
+$o-bg-shapes: add-header-shape-colors-mapping('web_editor', 'Origins/07_001', (3: 'menu'));
+$o-bg-shapes: add-footer-shape-colors-mapping('web_editor', 'Origins/14', (4: 'footer'));
diff --git a/theme_kea/views/snippets/s_cover.xml b/theme_kea/views/snippets/s_cover.xml
index 30243db40..0233e7605 100644
--- a/theme_kea/views/snippets/s_cover.xml
+++ b/theme_kea/views/snippets/s_cover.xml
@@ -4,7 +4,7 @@
         <!-- Section -->
         <xpath expr="//section" position="attributes">
             <attribute name="class" add="o_full_screen_height" separator=" "/>
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/07","colors":{"c3":"o-color-5"},"flip":[]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/07_001","flip":[]}</attribute>
         </xpath>
         <!-- Title & Paragraph -->
         <xpath expr="//div[hasclass('container')]" position="replace">
@@ -19,7 +19,7 @@
         </xpath>
         <!-- Shape -->
         <xpath expr="//section//*[last()]" position="after">
-            <div class="o_we_shape o_web_editor_Origins_07" style="background-image: url('/web_editor/shape/web_editor/Origins/07.svg?c3=%23333333');"/>
+            <div class="o_we_shape o_web_editor_Origins_07_001"/>
         </xpath>
     </template>
 </odoo>
diff --git a/theme_kea/views/snippets/s_image_text.xml b/theme_kea/views/snippets/s_image_text.xml
index 0c43ccfc0..3f374d083 100644
--- a/theme_kea/views/snippets/s_image_text.xml
+++ b/theme_kea/views/snippets/s_image_text.xml
@@ -4,11 +4,11 @@
         <!-- Section -->
         <xpath expr="//section" position="attributes">
             <attribute name="class" add="o_cc o_cc4 pt144" remove="pt32" separator=" "/>
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/03","colors":{"c3":"o-color-5"},"flip":["x"]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/03","flip":["x"]}</attribute>
         </xpath>
         <!-- Shape -->
         <xpath expr="//div[hasclass('container')]" position="before">
-            <div class="o_we_shape o_web_editor_Origins_03 o_we_flip_x" style="background-image: url('/web_editor/shape/web_editor/Origins/03.svg?c3=%23333333');"/>
+            <div class="o_we_shape o_web_editor_Origins_03 o_we_flip_x"/>
         </xpath>
         <!-- Title & Paragraph -->
         <xpath expr="(//div[hasclass('col-lg-6')])[2]" position="replace">
diff --git a/theme_kea/views/snippets/s_references.xml b/theme_kea/views/snippets/s_references.xml
index a0b4a06fc..3a75c9700 100644
--- a/theme_kea/views/snippets/s_references.xml
+++ b/theme_kea/views/snippets/s_references.xml
@@ -4,11 +4,11 @@
         <!-- Section -->
         <xpath expr="//section" position="attributes">
             <attribute name="class" add="o_cc o_cc4 pb64" remove="pb32" separator=" "/>
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/14","colors":{"c4":"o-color-5"},"flip":[]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/14","flip":[]}</attribute>
         </xpath>
         <!-- Shape -->
         <xpath expr="//div[hasclass('container')]" position="before">
-            <div class="o_we_shape o_web_editor_Origins_14" style="background-image: url('/web_editor/shape/web_editor/Origins/14.svg?c4=%23333333');"/>
+            <div class="o_we_shape o_web_editor_Origins_14"/>
         </xpath>
     </template>
 </odoo>
diff --git a/theme_kiddo/static/src/scss/primary_variables.scss b/theme_kiddo/static/src/scss/primary_variables.scss
index 0eec76a24..ff8acacf0 100644
--- a/theme_kiddo/static/src/scss/primary_variables.scss
+++ b/theme_kiddo/static/src/scss/primary_variables.scss
@@ -171,3 +171,12 @@ $o-gray-color-palettes-compatibility-indexes: (
     5: 'kiddo-5',
     6: 'kiddo-6',
 );
+
+//------------------------------------------------------------------------------
+// Shapes
+//------------------------------------------------------------------------------
+
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Wavy/13', (4: 4));
+$o-bg-shapes: add-extra-shape-colors-mapping('web_editor', 'Wavy/13', 'second', (4: 3));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Wavy/19', (5: 4));
+$o-bg-shapes: add-footer-shape-colors-mapping('web_editor', 'Wavy/22', (3: 'footer'));
diff --git a/theme_kiddo/views/snippets/s_banner.xml b/theme_kiddo/views/snippets/s_banner.xml
index b5cebbae3..e0de18b7d 100644
--- a/theme_kiddo/views/snippets/s_banner.xml
+++ b/theme_kiddo/views/snippets/s_banner.xml
@@ -3,11 +3,11 @@
     <template id="s_banner" inherit_id="website.s_banner">
         <!-- Section -->
         <xpath expr="//section" position="attributes">
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/13","colors":{"c4":"o-color-1"},"flip":[]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/13","flip":[]}</attribute>
         </xpath>
         <!-- Shape -->
         <xpath expr="//section/*[last()]" position="after">
-            <div class="o_we_shape o_web_editor_Wavy_13" style="background-image: url('/web_editor/shape/web_editor/Wavy/13.svg?c4=%23F3997B');"/>
+            <div class="o_we_shape o_web_editor_Wavy_13"/>
         </xpath>
         <!-- Paragraph -->
         <xpath expr="//div[hasclass('col-lg-6')]" position="replace">
diff --git a/theme_kiddo/views/snippets/s_call_to_action.xml b/theme_kiddo/views/snippets/s_call_to_action.xml
index f4bfe29f8..d1899d2d6 100644
--- a/theme_kiddo/views/snippets/s_call_to_action.xml
+++ b/theme_kiddo/views/snippets/s_call_to_action.xml
@@ -4,11 +4,11 @@
         <!-- Section -->
         <xpath expr="//section" position="attributes">
             <attribute name="class" add="o_half_screen_height" separator=" "/>
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/22","colors":{"c3":"o-color-1"},"flip":[]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/22","flip":[]}</attribute>
         </xpath>
         <!-- Shape -->
         <xpath expr="//div[hasclass('container')]" position="before">
-            <div class="o_we_shape o_web_editor_Wavy_22" style='background-image: url("/web_editor/shape/web_editor/Wavy/22.svg?c3=%23F3997B");'/>
+            <div class="o_we_shape o_web_editor_Wavy_22"/>
         </xpath>
         <!-- Paragraph -->
         <xpath expr="//div[hasclass('col-lg-9')]" position="replace">
diff --git a/theme_kiddo/views/snippets/s_image_text.xml b/theme_kiddo/views/snippets/s_image_text.xml
index 806369b0b..bbe6e9be0 100644
--- a/theme_kiddo/views/snippets/s_image_text.xml
+++ b/theme_kiddo/views/snippets/s_image_text.xml
@@ -4,11 +4,11 @@
         <!-- Section -->
         <xpath expr="//section" position="attributes">
             <attribute name="class" add="o_cc o_cc4 pb72" remove="pb32" separator=" "/>
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/13","colors":{"c4":"o-color-2"},"flip":["x"]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/13","flip":["x"]}</attribute>
         </xpath>
         <!-- Shape -->
         <xpath expr="//div[hasclass('container')]" position="before">
-            <div class="o_we_shape o_web_editor_Wavy_13 o_we_flip_x" style='background-image: url("/web_editor/shape/web_editor/Wavy/13.svg?c4=%2399869E");'/>
+            <div class="o_we_shape o_web_editor_Wavy_13 o_we_flip_x o_second_extra_shape_mapping"/>
         </xpath>
         <!-- Image -->
         <xpath expr="//img" position="attributes">
diff --git a/theme_kiddo/views/snippets/s_three_columns.xml b/theme_kiddo/views/snippets/s_three_columns.xml
index 2305be4c3..c3fc1ac3d 100644
--- a/theme_kiddo/views/snippets/s_three_columns.xml
+++ b/theme_kiddo/views/snippets/s_three_columns.xml
@@ -4,11 +4,11 @@
         <!-- Section -->
         <xpath expr="//section" position="attributes">
             <attribute name="class" add="o_cc o_cc3 pb152" remove="bg-200 pb32" separator=" "/>
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/19","colors":{"c5":"o-color-1"},"flip":[]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/19","flip":[]}</attribute>
         </xpath>
         <!-- Shape -->
         <xpath expr="//div[hasclass('container')]" position="before">
-            <div class="o_we_shape o_web_editor_Wavy_19" style='background-image: url("/web_editor/shape/web_editor/Wavy/19.svg?c5=%23F3997B");'/>
+            <div class="o_we_shape o_web_editor_Wavy_19"/>
         </xpath>
         <!-- Column 1 -->
         <xpath expr="//div[hasclass('card')]" position="attributes">
diff --git a/theme_monglia/views/customizations.xml b/theme_monglia/views/customizations.xml
index d7d3d1f17..141cd4c39 100644
--- a/theme_monglia/views/customizations.xml
+++ b/theme_monglia/views/customizations.xml
@@ -81,10 +81,10 @@
  <template id="s_media_list" inherit_id="website.s_media_list" name="Monglia s_media_list">
     <xpath expr="//section" position="attributes">
         <attribute name="class" add="o_cc o_cc2" remove="bg-200" separator=" "/>
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Airy/06","colors":{"c2":"o-color-1"},"flip":["x"]}</attribute>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Airy/06","flip":["x"]}</attribute>
     </xpath>
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Airy_06 o_we_flip_x" style="background-image: url(&quot;/web_editor/shape/web_editor/Airy/06.svg?c2=%23ED145B&quot;);"/>
+        <div class="o_we_shape o_web_editor_Airy_06 o_we_flip_x"/>
     </xpath>
 
     <xpath expr="//div[hasclass('container')]/div/div[1]//h3" position="replace">
diff --git a/theme_notes/static/src/scss/primary_variables.scss b/theme_notes/static/src/scss/primary_variables.scss
index b957c1d80..994132023 100644
--- a/theme_notes/static/src/scss/primary_variables.scss
+++ b/theme_notes/static/src/scss/primary_variables.scss
@@ -163,3 +163,10 @@ $o-theme-color-palettes-compatibility-indexes: (
     5: 'notes-5',
     6: 'notes-6',
 );
+
+//------------------------------------------------------------------------------
+// Shapes
+//------------------------------------------------------------------------------
+
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Blobs/04', (5: 4));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Blobs/01', (2: 5));
diff --git a/theme_notes/views/snippets/s_carousel.xml b/theme_notes/views/snippets/s_carousel.xml
index ede09b0db..1f3136090 100644
--- a/theme_notes/views/snippets/s_carousel.xml
+++ b/theme_notes/views/snippets/s_carousel.xml
@@ -3,7 +3,7 @@
     <template id="s_carousel" inherit_id="website.s_carousel">
         <!-- Slide 1 -->
         <xpath expr="//div[hasclass('carousel-content')]" position="replace">
-            <div class="carousel-content col-lg-6 p-5 o_cc o_cc5 shadow border" style="border-width: 2.5px !important; box-shadow: rgb(161, 192, 5) -20px 20px 0px 0px !important; border-color: rgb(161, 192, 5) !important;">
+            <div class="carousel-content col-lg-6 p-5 o_cc o_cc5 shadow border" style="border-width: 2.5px !important; box-shadow: rgb(44, 41, 39) -20px 20px 0px 0px !important; border-color: rgb(44, 41, 39) !important;">
                 <h2><font style="font-size: 62px;">Miraillet Festival</font></h2>
                 <p class="lead">From the 12th to the 17th of August, come and enjoy the atmosphere at the Mirallet Festival. Discover the line up below.</p>
                 <p><br/></p>
@@ -12,7 +12,7 @@
         </xpath>
         <!-- Slide 2 -->
         <xpath expr="(//div[hasclass('carousel-content')])[2]" position="replace">
-            <div class="carousel-content col-lg-8 offset-lg-2 mt48 pt48 pb40 text-center o_cc o_cc5 shadow border" style="border-width: 2.5px !important; box-shadow: rgb(161, 192, 5) 0px 20px 0px 0px !important; border-color: rgb(161, 192, 5) !important;">
+            <div class="carousel-content col-lg-8 offset-lg-2 mt48 pt48 pb40 text-center o_cc o_cc5 shadow border" style="border-width: 2.5px !important; box-shadow: rgb(44, 41, 39) 0px 20px 0px 0px !important; border-color: rgb(44, 41, 39) !important;">
                 <h2><font style="font-size: 62px;">6 Days Pass</font></h2>
                 <p class="lead">Tickets will be on sale soon. Do not miss our 6 Days Pass. Free camping!</p>
                 <p><br/></p>
@@ -21,7 +21,7 @@
         </xpath>
         <!-- Slide 3 -->
         <xpath expr="(//div[hasclass('carousel-content')])[3]" position="replace">
-            <div class="carousel-content col-lg-6 offset-lg-6 p-5 pt48 pb40 o_cc o_cc5 shadow border" style="border-width: 2.5px !important; box-shadow: rgb(161, 192, 5) 20px 20px 0px 0px !important; border-color: rgb(161, 192, 5) !important;">
+            <div class="carousel-content col-lg-6 offset-lg-6 p-5 pt48 pb40 o_cc o_cc5 shadow border" style="border-width: 2.5px !important; box-shadow: rgb(44, 41, 39) 20px 20px 0px 0px !important; border-color: rgb(44, 41, 39) !important;">
                 <h2><font style="font-size: 62px;">Recent Editions</font></h2>
                 <p class="lead">Discover what makes the reputation of the Miraillet festival through these after-movies.</p>
                 <p><br/></p>
diff --git a/theme_notes/views/snippets/s_company_team.xml b/theme_notes/views/snippets/s_company_team.xml
index e976dafb6..607f785a4 100644
--- a/theme_notes/views/snippets/s_company_team.xml
+++ b/theme_notes/views/snippets/s_company_team.xml
@@ -4,11 +4,11 @@
         <!-- Section -->
         <xpath expr="//section" position="attributes">
             <attribute name="class" add="pt144 o_cc o_cc5" remove="pt48" separator=" "/>
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Blobs/08","colors":{"c1":"o-color-1"},"flip":["x","y"]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Blobs/08","flip":["x","y"]}</attribute>
         </xpath>
         <!-- Shape -->
         <xpath expr="//div[hasclass('container')]" position="before">
-            <div class="o_we_shape o_web_editor_Blobs_08 o_we_flip_x o_we_flip_y" style="background-image: url('/web_editor/shape/web_editor/Blobs/08.svg?c1=%23A1C005');"/>
+            <div class="o_we_shape o_web_editor_Blobs_08 o_we_flip_x o_we_flip_y"/>
         </xpath>
         <!-- Title -->
         <xpath expr="//div[hasclass('row')]" position="before">
diff --git a/theme_notes/views/snippets/s_image_text.xml b/theme_notes/views/snippets/s_image_text.xml
index d8a8a9af2..d2fca0784 100644
--- a/theme_notes/views/snippets/s_image_text.xml
+++ b/theme_notes/views/snippets/s_image_text.xml
@@ -4,15 +4,15 @@
         <!-- Section -->
         <xpath expr="//section" position="attributes">
             <attribute name="class" add="o_cc o_cc5" separator=" "/>
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Blobs/04","colors":{"c5":"o-color-1"},"flip":["x"]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Blobs/04","flip":["x"]}</attribute>
         </xpath>
         <!-- Shape -->
         <xpath expr="//div[hasclass('container')]" position="before">
-            <div class="o_we_shape o_web_editor_Blobs_04 o_we_flip_x" style="background-image: url('/web_editor/shape/web_editor/Blobs/04.svg?c5=%23A1C005');"/>
+            <div class="o_we_shape o_web_editor_Blobs_04 o_we_flip_x"/>
         </xpath>
         <!-- Paragraph -->
         <xpath expr="(//div[hasclass('col-lg-6')])[2]" position="replace">
-            <div class="pb16 p-5 border pt32 offset-lg-2 col-lg-6 shadow o_cc o_cc4" style="border-width: 2.5px !important; border-color: rgb(33, 33, 33) !important; box-shadow: rgb(33, 33, 33) 20px -20px 0px 0px !important;">
+            <div class="pb16 p-5 border pt32 offset-lg-2 col-lg-6 shadow o_cc o_cc4" style="border-width: 2.5px !important; border-color: rgb(44, 41, 39) !important; box-shadow: rgb(44, 41, 39) 20px -20px 0px 0px !important;">
               <h2>History</h2>
               <p>The Miraillet Festival was born in 2002 from a common will of cultural, touristic and institutional actors of the region to propose a major cultural event in the very heart of the region during the summer period.</p>
               <p><a href="#" class="btn btn-dark mb-2">Discover more</a></p>
diff --git a/theme_notes/views/snippets/s_media_list.xml b/theme_notes/views/snippets/s_media_list.xml
index ffef90edc..a85869571 100644
--- a/theme_notes/views/snippets/s_media_list.xml
+++ b/theme_notes/views/snippets/s_media_list.xml
@@ -4,15 +4,15 @@
         <!-- Section -->
         <xpath expr="//section" position="attributes">
             <attribute name="class" add="o_cc o_cc4" remove="bg-200" separator=" "/>
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Blobs/01","colors":{"c2":"o-color-5"},"flip":["y"]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Blobs/01","flip":["y"]}</attribute>
         </xpath>
         <!-- Shape -->
         <xpath expr="//div[hasclass('container')]" position="before">
-            <div class="o_we_shape o_web_editor_Blobs_01 o_we_flip_y" style="background-image: url('/web_editor/shape/web_editor/Blobs/01.svg?c2=%23212121');"/>
+            <div class="o_we_shape o_web_editor_Blobs_01 o_we_flip_y"/>
         </xpath>
         <!-- Row 1 -->
         <xpath expr="(//div[hasclass('col-lg-12')])[1]/div" position="replace">
-            <div class="row s_col_no_resize s_col_no_bgcolor no-gutters border shadow align-items-center flex-row-reverse o_cc o_cc4" style="border-width: 2.5px !important; border-color: rgb(33, 33, 33) !important; box-shadow: rgb(33, 33, 33) 20px -20px 0px 0px !important;">
+            <div class="row s_col_no_resize s_col_no_bgcolor no-gutters border shadow align-items-center flex-row-reverse o_cc o_cc4" style="border-width: 2.5px !important; border-color: rgb(44, 41, 39) !important; box-shadow: rgb(44, 41, 39) 20px -20px 0px 0px !important;">
                 <div class="align-self-stretch s_media_list_img_wrapper col-lg-4">
                     <img src="/web/image/website.s_media_list_default_image_1" alt="" class="s_media_list_img h-100 w-100"/>
                 </div>
@@ -25,7 +25,7 @@
         </xpath>
         <!-- Row 2 -->
         <xpath expr="(//div[hasclass('col-lg-12')])[2]/div" position="replace">
-            <div class="row s_col_no_resize s_col_no_bgcolor no-gutters shadow border align-items-center o_cc o_cc4" style="border-width: 2.5px !important; box-shadow: rgb(33, 33, 33) 20px -20px 0px 0px !important; border-color: rgb(33, 33, 33) !important;">
+            <div class="row s_col_no_resize s_col_no_bgcolor no-gutters shadow border align-items-center o_cc o_cc4" style="border-width: 2.5px !important; box-shadow: rgb(44, 41, 39) 20px -20px 0px 0px !important; border-color: rgb(44, 41, 39) !important;">
                 <div class="align-self-stretch s_media_list_img_wrapper col-lg-4">
                     <img src="/web/image/website.s_media_list_default_image_2" alt="" class="s_media_list_img h-100 w-100"/>
                 </div>
@@ -37,7 +37,7 @@
         </xpath>
         <!-- Row 3 -->
         <xpath expr="(//div[hasclass('col-lg-12')])[3]/div" position="replace">
-            <div class="row s_col_no_resize s_col_no_bgcolor no-gutters o_cc o_cc5 border shadow align-items-center flex-row-reverse" style="border-width: 2.5px !important; border-color: rgb(161, 192, 5) !important; box-shadow: rgb(161, 192, 5) 20px -20px 0px 0px !important;">
+            <div class="row s_col_no_resize s_col_no_bgcolor no-gutters o_cc o_cc5 border shadow align-items-center flex-row-reverse" style="border-width: 2.5px !important; border-color: rgb(44, 41, 39) !important; box-shadow: rgb(44, 41, 39) 20px -20px 0px 0px !important;">
                 <div class="align-self-stretch s_media_list_img_wrapper col-lg-4">
                     <img src="/web/image/website.s_media_list_default_image_3" alt="" class="s_media_list_img h-100 w-100"/>
                 </div>
diff --git a/theme_odoo_experts/views/snippets/s_banner.xml b/theme_odoo_experts/views/snippets/s_banner.xml
index 28901d62b..1016db179 100644
--- a/theme_odoo_experts/views/snippets/s_banner.xml
+++ b/theme_odoo_experts/views/snippets/s_banner.xml
@@ -8,7 +8,7 @@
         <!-- Shadow -->
         <xpath expr="//div[hasclass('col-lg-6')]" position="attributes">
             <attribute name="class" add="rounded" separator=" "/>
-            <attribute name="style" add="box-shadow: rgb(39, 143, 132) 25px 25px 0px 0px !important; border-radius: 25px !important;" separator=" "/>
+            <attribute name="style" add="box-shadow: rgb(92, 92, 92) 25px 25px 0px 0px !important; border-radius: 25px !important;" separator=" "/>
         </xpath>
         <!-- Title -->
         <xpath expr="//h1" position="replace">
diff --git a/theme_orchid/static/src/scss/primary_variables.scss b/theme_orchid/static/src/scss/primary_variables.scss
index 634ddc877..985493d26 100644
--- a/theme_orchid/static/src/scss/primary_variables.scss
+++ b/theme_orchid/static/src/scss/primary_variables.scss
@@ -91,3 +91,11 @@ $o-color-palettes-compatibility-indexes: (
     22: 'generic-16',
     23: 'generic-17',
 );
+
+//------------------------------------------------------------------------------
+// Shapes
+//------------------------------------------------------------------------------
+
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Wavy/05', (1: 4, 5: 4));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Wavy/07', (3: 4));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Wavy/23', (3: 1));
diff --git a/theme_orchid/views/snippets/s_image_text.xml b/theme_orchid/views/snippets/s_image_text.xml
index 0c8014e7e..6cac1da86 100644
--- a/theme_orchid/views/snippets/s_image_text.xml
+++ b/theme_orchid/views/snippets/s_image_text.xml
@@ -3,11 +3,11 @@
     <template id="s_image_text" inherit_id="website.s_image_text">
         <!-- Section -->
         <xpath expr="//section" position="attributes">
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/07","colors":{"c3":"o-color-1"},"flip":["y"]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/07","flip":["y"]}</attribute>
         </xpath>
         <!-- Shape -->
         <xpath expr="//div[hasclass('container')]" position="before">
-            <div class="o_we_shape o_web_editor_Wavy_07 o_we_flip_y" style="background-image: url('/web_editor/shape/web_editor/Wavy/07.svg?c3=%23A1A52F');"/>
+            <div class="o_we_shape o_web_editor_Wavy_07 o_we_flip_y"/>
         </xpath>
         <!-- Title -->
         <xpath expr="//h2" position="replace">
diff --git a/theme_orchid/views/snippets/s_text_image.xml b/theme_orchid/views/snippets/s_text_image.xml
index ccb4e2cfa..6cccd8a93 100644
--- a/theme_orchid/views/snippets/s_text_image.xml
+++ b/theme_orchid/views/snippets/s_text_image.xml
@@ -4,11 +4,11 @@
         <!-- Section -->
         <xpath expr="//section" position="attributes">
             <attribute name="class" add="pt64" remove="pt32" separator=" "/>
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/06","colors":{"c1":"o-color-1","c3":"o-color-1","c4":"o-color-1","c5":"o-color-4"},"flip":["x","y"]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/05","flip":["x"]}</attribute>
         </xpath>
         <!-- Shape -->
         <xpath expr="//div[hasclass('container')]" position="before">
-            <div class="o_we_shape o_web_editor_Wavy_06 o_we_flip_x o_we_flip_y" style="background-image: url('/web_editor/shape/web_editor/Wavy/06.svg?c1=%23a1a52f&amp;c3=%23A1A52F&amp;c4=%23A1A52F&amp;c5=%23FFFFFF');"/>
+            <div class="o_we_shape o_web_editor_Wavy_05 o_we_flip_x"/>
         </xpath>
         <!-- Row -->
         <xpath expr="//div[hasclass('row')]" position="attributes">
diff --git a/theme_orchid/views/snippets/s_three_columns.xml b/theme_orchid/views/snippets/s_three_columns.xml
index 1901a54e8..e0bd94314 100644
--- a/theme_orchid/views/snippets/s_three_columns.xml
+++ b/theme_orchid/views/snippets/s_three_columns.xml
@@ -8,7 +8,7 @@
         </xpath>
         <!-- Shape -->
         <xpath expr="//div[hasclass('container')]" position="before">
-            <div class="o_we_shape o_web_editor_Wavy_23" style="background-image: url('/web_editor/shape/web_editor/Wavy/23.svg?c3=%23FFFFFF');"/>
+            <div class="o_we_shape o_web_editor_Wavy_23"/>
         </xpath>
         <!-- Container -->
         <xpath expr="//div[hasclass('container')]" position="attributes">
diff --git a/theme_paptic/static/src/scss/primary_variables.scss b/theme_paptic/static/src/scss/primary_variables.scss
index 4415cf643..9af7d15cd 100644
--- a/theme_paptic/static/src/scss/primary_variables.scss
+++ b/theme_paptic/static/src/scss/primary_variables.scss
@@ -79,3 +79,11 @@ $o-color-palettes-compatibility-indexes: (
     17: 'generic-16',
     18: 'generic-17',
 );
+
+//------------------------------------------------------------------------------
+// Shapes
+//------------------------------------------------------------------------------
+
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Blocks/04', (3: 1));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Origins/03', (3: 1));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Origins/01', (2: 3, 5: 3));
diff --git a/theme_paptic/views/customizations.xml b/theme_paptic/views/customizations.xml
index a9b32fba8..6db495fb1 100644
--- a/theme_paptic/views/customizations.xml
+++ b/theme_paptic/views/customizations.xml
@@ -23,11 +23,11 @@
 <template id="s_cover" inherit_id="website.s_cover" name="Paptic s_cover">
     <xpath expr="//section" position="attributes">
         <attribute name="class" add="pb0 pt192" remove="pt96 pb96 bg-black-50 s_parallax_is_fixed s_parallax" separator=" "/>
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Blocks/04","colors":{"c1":"#40FFFB","c2":"o-color-1","c3":"#FFFFFF","c5":"#9BA9BB"},"flip":["x"]}</attribute>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Blocks/04","flip":["x"]}</attribute>
     </xpath>
 
     <xpath expr="//section/div" position="before">
-        <div class="o_we_shape o_web_editor_Blocks_04 o_we_flip_x" style="background-image: url('/web_editor/shape/web_editor/Blocks/04.svg?c1=%2340FFFB&amp;c2=%236772E5&amp;c3=%23FFFFFF&amp;c5=%239BA9BB');"/>
+        <div class="o_we_shape o_web_editor_Blocks_04 o_we_flip_x"/>
     </xpath>
 
     <!-- Enable SVG dynamic color functionality -->
@@ -43,7 +43,7 @@
 
 
     <xpath expr="//h1" position="replace">
-        <h1 class="text-o-color-4">Grow your Business.
<br/>Optimize your time.</h1>
+        <h1 class="text-o-color-4">Grow your Business.<br/>Optimize your time.</h1>
     </xpath>
     <xpath expr="//p" position="replace">
         <p class="text-o-color-3">&#160;</p>
@@ -74,11 +74,11 @@
 <template id="s_image_text" inherit_id="website.s_image_text" name="Paptic s_image_text">
     <xpath expr="//section" position="attributes">
         <attribute name="class" add="pt96 pb16 o_cc o_cc3" remove="pt32 pb32" separator=" "/>
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/03","colors":{"c3":"o-color-4"},"flip":["x"]}</attribute>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/03","flip":["x"]}</attribute>
     </xpath>
 
     <xpath expr="//section/div" position="before">
-        <div class="o_we_shape o_web_editor_Origins_03 o_we_flip_x" style="background-image: url(&quot;/web_editor/shape/web_editor/Origins/03.svg?c3=%23FFFFFF&quot;);"></div>
+        <div class="o_we_shape o_web_editor_Origins_03 o_we_flip_x"></div>
     </xpath>
 
     <xpath expr="//img" position="attributes">
@@ -207,10 +207,10 @@
 <template id="s_three_columns" inherit_id="website.s_three_columns" name="Paptic s_three_columns">
     <xpath expr="//section" position="attributes">
         <attribute name="class" remove="bg-200 pt32 pb32 o_cc o_cc3" add="pt120 pb120" separator=" "/>
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/01","colors":{"c2":"o-color-3","c5":"o-color-3"},"flip":[]}</attribute>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/01","flip":[]}</attribute>
     </xpath>
     <xpath expr="//section/div" position="before">
-        <div class="o_we_shape o_web_editor_Origins_01" style="background-image: url(&quot;/web_editor/shape/web_editor/Origins/01.svg?c2=%23F6F9FC&amp;c5=%23F6F9FC&quot;);"></div>
+        <div class="o_we_shape o_web_editor_Origins_01"></div>
     </xpath>
     <xpath expr="//div[hasclass('row')]" position="before">
         <h3 style="text-align: center;">SUCCESS STORIES</h3>
@@ -243,11 +243,11 @@
 <template id="s_picture" inherit_id="website.s_picture" name="Paptic s_picture">
     <xpath expr="//section" position="attributes">
         <attribute name="class" add="pt72 o_cc o_cc1" remove="bg-200 pt48" separator=" "/>
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Bold/08","colors":{"c1":"#F5F9F9"},"flip":[]}</attribute>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Bold/08","flip":[]}</attribute>
     </xpath>
 
     <xpath expr="//section/div" position="before">
-        <div class="o_we_shape o_web_editor_Bold_08" style="background-image: url('/web_editor/shape/web_editor/Bold/08.svg?c1=%23F5F9F9');"></div>
+        <div class="o_we_shape o_web_editor_Bold_08"/>
     </xpath>
 
     <xpath expr="//img" position="attributes">
diff --git a/theme_real_estate/static/src/scss/primary_variables.scss b/theme_real_estate/static/src/scss/primary_variables.scss
index 4e4016634..97f10b258 100644
--- a/theme_real_estate/static/src/scss/primary_variables.scss
+++ b/theme_real_estate/static/src/scss/primary_variables.scss
@@ -113,3 +113,10 @@ $o-color-palettes-compatibility-indexes: (
     20: 'generic-16',
     21: 'generic-17',
 );
+
+//------------------------------------------------------------------------------
+// Shapes
+//------------------------------------------------------------------------------
+
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Origins/14', (4: 4));
+$o-bg-shapes: add-extra-shape-colors-mapping('web_editor', 'Origins/14', 'second', (4: 2));
diff --git a/theme_real_estate/views/snippets/s_banner.xml b/theme_real_estate/views/snippets/s_banner.xml
index 06100d313..c27a96b58 100644
--- a/theme_real_estate/views/snippets/s_banner.xml
+++ b/theme_real_estate/views/snippets/s_banner.xml
@@ -3,11 +3,11 @@
     <template id="s_banner" inherit_id="website.s_banner">
         <!-- Section -->
         <xpath expr="//section" position="attributes">
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/14","colors":{"c4":"o-color-1"},"flip":[]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/14","flip":[]}</attribute>
         </xpath>
         <!-- Shape -->
         <xpath expr="//section//*[last()]" position="after">
-            <div class="o_we_shape o_web_editor_Origins_14" style="background-image: url('/web_editor/shape/web_editor/Origins/14.svg?c4=%23539B80');"/>
+            <div class="o_we_shape o_web_editor_Origins_14"/>
         </xpath>
         <!-- Title -->
         <xpath expr="//h1" position="replace">
diff --git a/theme_real_estate/views/snippets/s_image_text.xml b/theme_real_estate/views/snippets/s_image_text.xml
index 85a0dcf3e..792a56e9f 100644
--- a/theme_real_estate/views/snippets/s_image_text.xml
+++ b/theme_real_estate/views/snippets/s_image_text.xml
@@ -4,11 +4,11 @@
         <!-- Section -->
         <xpath expr="//section" position="attributes">
             <attribute name="class" add="o_cc o_cc4 pb128" remove="pb32" separator=" "/>
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/14","colors":{"c4":"o-color-3"},"flip":[]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/14","flip":[]}</attribute>
         </xpath>
         <!-- Shape -->
         <xpath expr="//div[hasclass('container')]" position="before">
-            <div class="o_we_shape o_web_editor_Origins_14" style="background-image: url('/web_editor/shape/web_editor/Origins/14.svg?c4=%23F4F4F4');"/>
+            <div class="o_we_shape o_web_editor_Origins_14 o_second_extra_shape_mapping"/>
         </xpath>
         <!-- Paragraph -->
         <xpath expr="(//div[hasclass('col-lg-6')])[2]" position="replace">
diff --git a/theme_real_estate/views/snippets/s_quotes_carousel.xml b/theme_real_estate/views/snippets/s_quotes_carousel.xml
index ffa960f9d..b3b27b764 100644
--- a/theme_real_estate/views/snippets/s_quotes_carousel.xml
+++ b/theme_real_estate/views/snippets/s_quotes_carousel.xml
@@ -3,24 +3,24 @@
     <template id="s_quotes_carousel" inherit_id="website.s_quotes_carousel">
         <!-- Shape 1 -->
         <xpath expr="(//div[hasclass('carousel-item')])[1]" position="attributes">
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/14","colors":{"c4":"o-color-3"},"flip":["y"]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/14","flip":["y"]}</attribute>
         </xpath>
         <xpath expr="(//div[hasclass('carousel-item')])[1]/div" position="before">
-            <div class="o_we_shape o_web_editor_Origins_14 o_we_flip_y" style="background-image: url('/web_editor/shape/web_editor/Origins/14.svg?c4=%23F4F4F4');"/>
+            <div class="o_we_shape o_web_editor_Origins_14 o_we_flip_y o_second_extra_shape_mapping"/>
         </xpath>
         <!-- Shape 2 -->
         <xpath expr="(//div[hasclass('carousel-item')])[2]" position="attributes">
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/14","colors":{"c4":"o-color-3"},"flip":["y"]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/14","flip":["y"]}</attribute>
         </xpath>
         <xpath expr="(//div[hasclass('carousel-item')])[2]/div" position="before">
-            <div class="o_we_shape o_web_editor_Origins_14 o_we_flip_y" style="background-image: url('/web_editor/shape/web_editor/Origins/14.svg?c4=%23F4F4F4');"/>
+            <div class="o_we_shape o_web_editor_Origins_14 o_we_flip_y o_second_extra_shape_mapping"/>
         </xpath>
         <!-- Shape 3 -->
         <xpath expr="(//div[hasclass('carousel-item')])[3]" position="attributes">
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/14","colors":{"c4":"o-color-3"},"flip":["y"]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/14","flip":["y"]}</attribute>
         </xpath>
         <xpath expr="(//div[hasclass('carousel-item')])[3]/div" position="before">
-            <div class="o_we_shape o_web_editor_Origins_14 o_we_flip_y" style="background-image: url('/web_editor/shape/web_editor/Origins/14.svg?c4=%23F4F4F4');"/>
+            <div class="o_we_shape o_web_editor_Origins_14 o_we_flip_y o_second_extra_shape_mapping"/>
         </xpath>
         <!-- Quote 1 -->
         <xpath expr="(//div[hasclass('s_blockquote_content')])[1]/p" position="replace">
diff --git a/theme_vehicle/views/customizations.xml b/theme_vehicle/views/customizations.xml
index 2e48c6d19..94070bad4 100644
--- a/theme_vehicle/views/customizations.xml
+++ b/theme_vehicle/views/customizations.xml
@@ -121,10 +121,10 @@
 <template id="s_table_of_content" inherit_id="website.s_table_of_content" name="Vehicle s_table_of_content">
     <xpath expr="//section" position="attributes">
         <attribute name="class" add="pt88 pb128" remove="pt24 pb24" separator=" "/>
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Airy/10","colors":{"c5":"400"},"flip":[]}</attribute>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Airy/10","flip":[]}</attribute>
     </xpath>
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Airy_10" style='background-image: url("/web_editor/shape/web_editor/Airy/10.svg?c5=%23CED4DA");'/>
+        <div class="o_we_shape o_web_editor_Airy_10"/>
     </xpath>
 
     <xpath expr="//div[hasclass('s_table_of_content_main')]/section" position="replace">