From 3d1fc22f5ec6b914e3be3d43cafc0c511c24c446 Mon Sep 17 00:00:00 2001
From: "Chrysanthe (chgo)" <chgo@odoo.com>
Date: Sun, 22 Sep 2024 17:38:16 +0200
Subject: [PATCH] [FIX] theme_*: fix `s_big_number` wrong implementation

*: anelusia, artists, avantgarde, aviato, beauty, bewise, bistro,
bookstore, buzzy, clean, cobalt, enark, graphene, kea, kiddo, loftspace,
monglia, nano, notes, odoo_experts, orchid, paptic, real_estate,
treehouse, vehicle, yes, zap

This commit aims to fix a wrong implementation of gradients on the
`s_big_number` snippet within the context of the web editor.

Prior to this commit, the `s_big_number` snippet was using a gradient
composed of the right color, but being declared as `RGB` values.

While this is working as expected and looking like it uses the right
`--o-color-*`, it's indeed working with the specific color applied in
first place. If a user changes the color palette of the website, the
snippet will look terrible as it doesn't adapt to the new palette.

This commit fixes the issue by using the right implementation with CSS
variables.

It also reviews a wrong structure using `<div>` while it should use the
right html tag.

task-4202371
---
 theme_anelusia/views/snippets/s_big_number.xml     | 6 +++---
 theme_artists/views/snippets/s_big_number.xml      | 8 ++++----
 theme_avantgarde/views/customizations.xml          | 6 +++---
 theme_aviato/views/snippets/s_big_number.xml       | 8 ++++----
 theme_beauty/views/snippets/s_big_number.xml       | 8 ++++----
 theme_bewise/views/customizations.xml              | 6 +++---
 theme_bistro/views/snippets/s_big_number.xml       | 6 +++---
 theme_bookstore/views/snippets/s_big_number.xml    | 2 +-
 theme_buzzy/views/snippets/s_big_number.xml        | 5 +----
 theme_clean/views/snippets/s_big_number.xml        | 5 +----
 theme_cobalt/views/customizations.xml              | 2 +-
 theme_enark/views/snippets/s_big_number.xml        | 8 ++++----
 theme_graphene/views/customizations.xml            | 5 +----
 theme_kea/views/snippets/s_big_number.xml          | 4 ++--
 theme_kiddo/views/snippets/s_big_number.xml        | 4 ++--
 theme_loftspace/views/snippets/s_big_number.xml    | 6 +++---
 theme_monglia/views/customizations.xml             | 8 ++++----
 theme_nano/views/snippets/s_big_number.xml         | 6 +++---
 theme_notes/views/snippets/s_big_number.xml        | 6 +++---
 theme_odoo_experts/views/snippets/s_big_number.xml | 4 ++--
 theme_orchid/views/snippets/s_big_number.xml       | 4 ++--
 theme_paptic/views/customizations.xml              | 6 +++---
 theme_real_estate/views/snippets/s_big_number.xml  | 6 +++---
 theme_treehouse/views/snippets/s_big_number.xml    | 6 +++---
 theme_vehicle/views/customizations.xml             | 6 +++---
 theme_yes/views/snippets/s_big_number.xml          | 6 +++---
 theme_zap/views/snippets/s_big_number.xml          | 4 ++--
 27 files changed, 71 insertions(+), 80 deletions(-)

diff --git a/theme_anelusia/views/snippets/s_big_number.xml b/theme_anelusia/views/snippets/s_big_number.xml
index 4fd3a4f50f..97d4f0b54b 100644
--- a/theme_anelusia/views/snippets/s_big_number.xml
+++ b/theme_anelusia/views/snippets/s_big_number.xml
@@ -13,12 +13,12 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="replace" mode="inner">
-        <font class="text-gradient" style="background-image: linear-gradient(0deg, rgb(29, 32, 48) 25%, rgb(222, 222, 222) 80%);">
+    <xpath expr="//h2/span" position="replace" mode="inner">
+        <font class="text-gradient" style="background-image: linear-gradient(15deg, var(--o-color-1) 25%, var(--o-color-5) 100%);">
             100+
         </font>
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         happy customers
     </xpath>
 </template>
diff --git a/theme_artists/views/snippets/s_big_number.xml b/theme_artists/views/snippets/s_big_number.xml
index c473da6f05..b43940d641 100644
--- a/theme_artists/views/snippets/s_big_number.xml
+++ b/theme_artists/views/snippets/s_big_number.xml
@@ -13,15 +13,15 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="attributes">
+    <xpath expr="//h2/span" position="attributes">
         <attribute name="style" add="font-size: 7.75rem;" remove="font-size: 10.75rem;" separator=";"/>
     </xpath>
-    <xpath expr="//h2/div" position="replace" mode="inner">
-        <font class="text-gradient" style="background-image: linear-gradient(0deg, rgb(165, 78, 223) 8%, rgb(222, 222, 222) 80%);">
+    <xpath expr="//h2/span" position="replace" mode="inner">
+        <font class="text-gradient" style="background-image: linear-gradient(0deg, var(--o-color-1) 25%, var(--o-color-4) 90%);">
             250+
         </font>
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         songs released
     </xpath>
 </template>
diff --git a/theme_avantgarde/views/customizations.xml b/theme_avantgarde/views/customizations.xml
index 312515f5b5..2b3e9c29c1 100644
--- a/theme_avantgarde/views/customizations.xml
+++ b/theme_avantgarde/views/customizations.xml
@@ -600,12 +600,12 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="replace" mode="inner">
-        <font class="text-gradient" style="background-image: linear-gradient(0deg, rgb(56, 60, 214) 0%, rgb(255, 255, 255) 65%);">
+    <xpath expr="//h2/span" position="replace" mode="inner">
+        <font class="text-gradient" style="background-image: linear-gradient(0deg, var(--o-color-1) 0%, var(--o-color-4) 90%);">
             50+
         </font>
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         projects shipped
     </xpath>
 </template>
diff --git a/theme_aviato/views/snippets/s_big_number.xml b/theme_aviato/views/snippets/s_big_number.xml
index ece1499699..75386a5319 100644
--- a/theme_aviato/views/snippets/s_big_number.xml
+++ b/theme_aviato/views/snippets/s_big_number.xml
@@ -14,13 +14,13 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="attributes">
+    <xpath expr="//h2/span" position="attributes">
         <attribute name="style" add="font-size: 7.75rem;" remove="font-size: 10.75rem;" separator=";"/>
     </xpath>
-    <xpath expr="//h2/div" position="replace" mode="inner">
-        <font class="text-gradient" style="background-image: linear-gradient(0deg, rgb(244, 168, 26) 0%, rgb(222, 222, 222) 58%);">100+</font>
+    <xpath expr="//h2/span" position="replace" mode="inner">
+        <font class="text-gradient" style="background-image: linear-gradient(0deg, var(--o-color-1) 0%, var(--o-color-4) 90%);">100+</font>
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         destinations available
     </xpath>
 </template>
diff --git a/theme_beauty/views/snippets/s_big_number.xml b/theme_beauty/views/snippets/s_big_number.xml
index 4b1246c774..7efefd07cd 100644
--- a/theme_beauty/views/snippets/s_big_number.xml
+++ b/theme_beauty/views/snippets/s_big_number.xml
@@ -14,13 +14,13 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="attributes">
+    <xpath expr="//h2/span" position="attributes">
         <attribute name="style" add="font-size: 7.75rem;" remove="font-size: 10.75rem;" separator=";"/>
     </xpath>
-    <xpath expr="//h2/div" position="replace" mode="inner">
-        <font style="color: rgb(165, 35, 91);">200+</font>
+    <xpath expr="//h2/span" position="replace" mode="inner">
+        <font style="color: var(--o-color-1)">200+</font>
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         happy customers
     </xpath>
 </template>
diff --git a/theme_bewise/views/customizations.xml b/theme_bewise/views/customizations.xml
index a35689cbd1..a7dc727e36 100644
--- a/theme_bewise/views/customizations.xml
+++ b/theme_bewise/views/customizations.xml
@@ -900,10 +900,10 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="replace" mode="inner">
-        <font class="text-gradient" style="background-image: linear-gradient(0deg, rgb(29, 32, 48) 0%, rgb(222, 222, 222) 56%);">60+</font>
+    <xpath expr="//h2/span" position="replace" mode="inner">
+        <font class="text-gradient" style="background-image: linear-gradient(0deg, var(--o-color-1) 0%, var(--o-color-4) 90%);">60+</font>
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         academic programs available
     </xpath>
 </template>
diff --git a/theme_bistro/views/snippets/s_big_number.xml b/theme_bistro/views/snippets/s_big_number.xml
index 4d505df4de..93f8725457 100644
--- a/theme_bistro/views/snippets/s_big_number.xml
+++ b/theme_bistro/views/snippets/s_big_number.xml
@@ -13,14 +13,14 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
         350+
     </xpath>
-    <xpath expr="//h2/div" position="attributes">
+    <xpath expr="//h2/span" position="attributes">
         <attribute name="style" remove="font-size: 10.75rem;" add="font-size: 7.75rem;" separator=";"/>
         350+
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         happy guests served
     </xpath>
 </template>
diff --git a/theme_bookstore/views/snippets/s_big_number.xml b/theme_bookstore/views/snippets/s_big_number.xml
index ff93e20eeb..460361c5ed 100644
--- a/theme_bookstore/views/snippets/s_big_number.xml
+++ b/theme_bookstore/views/snippets/s_big_number.xml
@@ -13,7 +13,7 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
         90%
     </xpath>
 </template>
diff --git a/theme_buzzy/views/snippets/s_big_number.xml b/theme_buzzy/views/snippets/s_big_number.xml
index 57ad281776..70861c30b3 100644
--- a/theme_buzzy/views/snippets/s_big_number.xml
+++ b/theme_buzzy/views/snippets/s_big_number.xml
@@ -14,12 +14,9 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
         90%
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="attributes">
-        <attribute name="style" add="font-size: 7.75rem;" remove="font-size: 2.25rem;" separator=";"/>
-    </xpath>
 </template>
 
 </odoo>
diff --git a/theme_clean/views/snippets/s_big_number.xml b/theme_clean/views/snippets/s_big_number.xml
index 57ad281776..70861c30b3 100644
--- a/theme_clean/views/snippets/s_big_number.xml
+++ b/theme_clean/views/snippets/s_big_number.xml
@@ -14,12 +14,9 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
         90%
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="attributes">
-        <attribute name="style" add="font-size: 7.75rem;" remove="font-size: 2.25rem;" separator=";"/>
-    </xpath>
 </template>
 
 </odoo>
diff --git a/theme_cobalt/views/customizations.xml b/theme_cobalt/views/customizations.xml
index 8f4d19ee6f..e39d96ee54 100644
--- a/theme_cobalt/views/customizations.xml
+++ b/theme_cobalt/views/customizations.xml
@@ -575,7 +575,7 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
         90%
     </xpath>
 </template>
diff --git a/theme_enark/views/snippets/s_big_number.xml b/theme_enark/views/snippets/s_big_number.xml
index f0ae2d9e59..9b2cd036ce 100644
--- a/theme_enark/views/snippets/s_big_number.xml
+++ b/theme_enark/views/snippets/s_big_number.xml
@@ -4,20 +4,20 @@
 <template id="s_big_number" inherit_id="website.s_big_number">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Bold/03"}</attribute>
+        <attribute name="data-oe-shape-data">"shape":"web_editor/Rainy/09_001"</attribute>
         <attribute name="class" add="o_cc1" remove="o_cc5" separator=" "/>
     </xpath>
 
     <!-- Shape -->
     <xpath expr="//div[hasclass('o_we_shape')]" position="replace">
-        <div class="o_we_shape o_web_editor_Bold_03" style="background-image: url('/web_editor/shape/web_editor/Bold/03.svg?c1=o-color-3&amp;c3=o-color-3&amp;c5=o-color-3&amp;');"/>
+        <div class="o_we_shape o_web_editor_Rainy_09_001"/>
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
         80+
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         projects shipped
     </xpath>
 </template>
diff --git a/theme_graphene/views/customizations.xml b/theme_graphene/views/customizations.xml
index 574264f3fd..028a33a1eb 100644
--- a/theme_graphene/views/customizations.xml
+++ b/theme_graphene/views/customizations.xml
@@ -587,12 +587,9 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
         90%
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="attributes">
-        <attribute name="style" add="font-size: 7.75rem;" remove="font-size: 2.25rem;" separator=";"/>
-    </xpath>
 </template>
 
 <!-- ===== WAVY GRID ======== -->
diff --git a/theme_kea/views/snippets/s_big_number.xml b/theme_kea/views/snippets/s_big_number.xml
index be97bb0aff..24f5c3b390 100644
--- a/theme_kea/views/snippets/s_big_number.xml
+++ b/theme_kea/views/snippets/s_big_number.xml
@@ -14,10 +14,10 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
         80+
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         satisfied clients
     </xpath>
 </template>
diff --git a/theme_kiddo/views/snippets/s_big_number.xml b/theme_kiddo/views/snippets/s_big_number.xml
index 253816c788..dffa5a4b80 100644
--- a/theme_kiddo/views/snippets/s_big_number.xml
+++ b/theme_kiddo/views/snippets/s_big_number.xml
@@ -14,10 +14,10 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
         80+
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         families trusted us
     </xpath>
 </template>
diff --git a/theme_loftspace/views/snippets/s_big_number.xml b/theme_loftspace/views/snippets/s_big_number.xml
index 5145e9006d..b5afbbaf39 100644
--- a/theme_loftspace/views/snippets/s_big_number.xml
+++ b/theme_loftspace/views/snippets/s_big_number.xml
@@ -14,13 +14,13 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="attributes">
+    <xpath expr="//h2/span" position="attributes">
         <attribute name="style" add="font-size: 7.75rem;" remove="font-size: 10.75rem;" separator=";"/>
     </xpath>
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
         250+
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         satisfied clients
     </xpath>
 </template>
diff --git a/theme_monglia/views/customizations.xml b/theme_monglia/views/customizations.xml
index 665672ab05..11ebfe6058 100644
--- a/theme_monglia/views/customizations.xml
+++ b/theme_monglia/views/customizations.xml
@@ -706,15 +706,15 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="attributes">
+    <xpath expr="//h2/span" position="attributes">
         <attribute name="style" add="font-size: 7.75rem;" remove="font-size: 10.75rem;" separator=";"/>
     </xpath>
-    <xpath expr="//h2/div" position="replace" mode="inner">
-        <font class="text-gradient" style="background-image: linear-gradient(0deg, rgb(237, 7, 104) 0%, rgb(222, 222, 222) 59%);">
+    <xpath expr="//h2/span" position="replace" mode="inner">
+        <font class="text-gradient" style="background-image: linear-gradient(0deg, var(--o-color-1) 0%, var(--o-color-4) 75%);">
             250+
         </font>
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         events organized
     </xpath>
 </template>
diff --git a/theme_nano/views/snippets/s_big_number.xml b/theme_nano/views/snippets/s_big_number.xml
index 8e708a3291..041827ffda 100644
--- a/theme_nano/views/snippets/s_big_number.xml
+++ b/theme_nano/views/snippets/s_big_number.xml
@@ -14,13 +14,13 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="attributes">
+    <xpath expr="//h2/span" position="attributes">
         <attribute name="style" add="font-size: 7.75rem;" remove="font-size: 10.75rem;" separator=";"/>
     </xpath>
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
         250+
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         satisfied clients
     </xpath>
 </template>
diff --git a/theme_notes/views/snippets/s_big_number.xml b/theme_notes/views/snippets/s_big_number.xml
index 95ce9c048c..981e4b67b2 100644
--- a/theme_notes/views/snippets/s_big_number.xml
+++ b/theme_notes/views/snippets/s_big_number.xml
@@ -14,13 +14,13 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="attributes">
+    <xpath expr="//h2/span" position="attributes">
         <attribute name="style" add="font-size: 7.75rem;" remove="font-size: 10.75rem;" separator=";"/>
     </xpath>
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
         20M
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         Monthly listeners on streaming platforms
     </xpath>
 </template>
diff --git a/theme_odoo_experts/views/snippets/s_big_number.xml b/theme_odoo_experts/views/snippets/s_big_number.xml
index f328d2ea85..df7dda09bc 100644
--- a/theme_odoo_experts/views/snippets/s_big_number.xml
+++ b/theme_odoo_experts/views/snippets/s_big_number.xml
@@ -13,10 +13,10 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="attributes">
+    <xpath expr="//h2/span" position="attributes">
         <attribute name="style" add="font-size: 7.75rem;" remove="font-size: 10.75rem;" separator=";"/>
     </xpath>
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
         90%
     </xpath>
 </template>
diff --git a/theme_orchid/views/snippets/s_big_number.xml b/theme_orchid/views/snippets/s_big_number.xml
index 95ffdb7573..30f028ffe3 100644
--- a/theme_orchid/views/snippets/s_big_number.xml
+++ b/theme_orchid/views/snippets/s_big_number.xml
@@ -13,10 +13,10 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
         50+
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         varieties of flowers to choose from
     </xpath>
 </template>
diff --git a/theme_paptic/views/customizations.xml b/theme_paptic/views/customizations.xml
index 60acc48567..65ea42599d 100644
--- a/theme_paptic/views/customizations.xml
+++ b/theme_paptic/views/customizations.xml
@@ -675,13 +675,13 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="attributes">
+    <xpath expr="//h2/span" position="attributes">
         <attribute name="style" add="font-size: 9.375rem;" remove="font-size: 10.75rem;" separator=";"/>
     </xpath>
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
         85%
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         customers satisfaction
     </xpath>
 </template>
diff --git a/theme_real_estate/views/snippets/s_big_number.xml b/theme_real_estate/views/snippets/s_big_number.xml
index 2898992980..0730e40ba3 100644
--- a/theme_real_estate/views/snippets/s_big_number.xml
+++ b/theme_real_estate/views/snippets/s_big_number.xml
@@ -14,13 +14,13 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="attributes">
+    <xpath expr="//h2/span" position="attributes">
         <attribute name="style" add="font-size: 9.375rem;" remove="font-size: 10.75rem;" separator=";"/>
     </xpath>
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
         85%
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         customers satisfaction
     </xpath>
 </template>
diff --git a/theme_treehouse/views/snippets/s_big_number.xml b/theme_treehouse/views/snippets/s_big_number.xml
index ee00a7272f..f255b41627 100644
--- a/theme_treehouse/views/snippets/s_big_number.xml
+++ b/theme_treehouse/views/snippets/s_big_number.xml
@@ -14,13 +14,13 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="attributes">
+    <xpath expr="//h2/span" position="attributes">
         <attribute name="style" add="font-size: 7.75rem;" remove="font-size: 10.75rem;" separator=";"/>
     </xpath>
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
         1,250
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         trees planted since last year
     </xpath>
 </template>
diff --git a/theme_vehicle/views/customizations.xml b/theme_vehicle/views/customizations.xml
index 3039862527..1258561b6f 100644
--- a/theme_vehicle/views/customizations.xml
+++ b/theme_vehicle/views/customizations.xml
@@ -746,12 +746,12 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="replace" mode="inner">
-        <font class="text-gradient" style="background-image: linear-gradient(0deg, rgb(29, 32, 48) 0%, rgb(222, 222, 222) 49%);">
+    <xpath expr="//h2/span" position="replace" mode="inner">
+        <font class="text-gradient" style="background-image: linear-gradient(0deg, var(--o-color-5) 0%, var(--o-color-4) 90%);">
             87%
         </font>
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         customer satisfaction
     </xpath>
 </template>
diff --git a/theme_yes/views/snippets/s_big_number.xml b/theme_yes/views/snippets/s_big_number.xml
index ca58a83da1..003ee6bc4d 100644
--- a/theme_yes/views/snippets/s_big_number.xml
+++ b/theme_yes/views/snippets/s_big_number.xml
@@ -14,13 +14,13 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="attributes">
+    <xpath expr="//h2/span" position="attributes">
         <attribute name="style" add="font-size: 6.25rem;" remove="font-size: 10.75rem;" separator=";"/>
     </xpath>
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
         1,500+
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="replace" mode="inner">
+    <xpath expr="//p/span" position="replace" mode="inner">
         personalized invitations created
     </xpath>
 </template>
diff --git a/theme_zap/views/snippets/s_big_number.xml b/theme_zap/views/snippets/s_big_number.xml
index 74af91f268..8701e4ae76 100644
--- a/theme_zap/views/snippets/s_big_number.xml
+++ b/theme_zap/views/snippets/s_big_number.xml
@@ -13,10 +13,10 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="attributes">
+    <xpath expr="//h2/span" position="attributes">
         <attribute name="style" add="font-size: 9.375rem;" remove="font-size: 10.75rem;" separator=";"/>
     </xpath>
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
         90%
     </xpath>
 </template>