[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

closes odoo/design-themes#930

Related: odoo/odoo#180983
Signed-off-by: Benjamin Vray (bvr) <bvr@odoo.com>

theme_anelusia/views/snippets/s_big_number.xml

@@ -13,12 +13,12 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
-        <font class="text-gradient" style="background-image: linear-gradient(0deg, rgb(29, 32, 48) 25%, rgb(222, 222, 222) 80%);">
+        <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>

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">
+    <xpath expr="//h2/span" position="replace" mode="inner">
-        <font class="text-gradient" style="background-image: linear-gradient(0deg, rgb(165, 78, 223) 8%, rgb(222, 222, 222) 80%);">
+        <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>

theme_avantgarde/views/customizations.xml

@@ -603,12 +603,12 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
-        <font class="text-gradient" style="background-image: linear-gradient(0deg, rgb(56, 60, 214) 0%, rgb(255, 255, 255) 65%);">
+        <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>

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">
+    <xpath expr="//h2/span" 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>
+        <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>

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">
+    <xpath expr="//h2/span" position="replace" mode="inner">
-        <font style="color: rgb(165, 35, 91);">200+</font>
+        <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>

theme_bewise/views/customizations.xml

@@ -907,10 +907,10 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" 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>
+        <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>

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>

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>

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>

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>

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>

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>

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

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>

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>

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>

theme_monglia/views/customizations.xml

@@ -729,15 +729,15 @@
     <xpath expr="//div[hasclass('o_we_shape')]" position="replace"/>
 
     <!-- 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">
-        <font class="text-gradient" style="background-image: linear-gradient(0deg, rgb(237, 7, 104) 0%, rgb(222, 222, 222) 59%);">
+        <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>

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>

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>

theme_odoo_experts/views/snippets/s_big_number.xml

@@ -12,10 +12,10 @@
     <xpath expr="//div[hasclass('o_we_shape')]" position="replace"/>
 
     <!-- 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>

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>

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>

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>

theme_treehouse/views/snippets/s_big_number.xml

@@ -13,13 +13,13 @@
     <xpath expr="//div[hasclass('o_we_shape')]" position="replace"/>
 
     <!-- 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>

theme_vehicle/views/customizations.xml

@@ -717,12 +717,12 @@
     </xpath>
 
     <!-- Text -->
-    <xpath expr="//h2/div" position="replace" mode="inner">
+    <xpath expr="//h2/span" position="replace" mode="inner">
-        <font class="text-gradient" style="background-image: linear-gradient(0deg, rgb(29, 32, 48) 0%, rgb(222, 222, 222) 49%);">
+        <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>

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>

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>