[IMP] theme_beauty: update the theme

This commit updates the theme to improve the design with new colors, new
pictures and new snippet customizations.

task-2573296

X-original-commit: 31948824e6
Part-of: odoo/design-themes#501

theme_beauty/static/description/index.html

@@ -7,7 +7,7 @@
     first projects on the web. Just drag & drop the new building blocks
     you need to easily build your layout. All layouts are made of sections,
     that you can easily combine to fit your specific project.</p>
-    <img src="beauty_description.png" class="img-fluid d-block mx-auto"/>
+    <img src="beauty_description.jpg" class="img-fluid d-block mx-auto"/>
     <hr>
 
     <h2 class="text-muted">Beauty Customization Tool</h2>

theme_beauty/static/src/js/tour.js

@@ -1,8 +1,6 @@
-odoo.define("theme_beauty.tour.beauty", function (require) {
-"use strict";
+/** @odoo-module */
 
-const wTourUtils = require("website.tour_utils");
-var tour = require("web_tour.tour");
+import wTourUtils from 'website.tour_utils';
 
 const snippets = [
     {
@@ -17,6 +15,10 @@ const snippets = [
         id: 's_title',
         name: 'Title',
     },
+    {
+        id: 's_product_list',
+        name: 'Items',
+    },
     {
         id: 's_company_team',
         name: 'Team',
@@ -35,8 +37,5 @@ wTourUtils.registerThemeHomepageTour("beauty_tour", [
     wTourUtils.dragNDrop(snippets[2]),
     wTourUtils.dragNDrop(snippets[3]),
     wTourUtils.dragNDrop(snippets[4]),
-    wTourUtils.clickOnSnippet(snippets[4]),
-    wTourUtils.changeBackgroundColor(),
-    wTourUtils.selectColorPalette(),
+    wTourUtils.dragNDrop(snippets[5]),
 ]);
-});

theme_beauty/static/src/scss/primary_variables.scss

@@ -2,12 +2,12 @@
 // Fonts
 //------------------------------------------------------------------------------
 
-$o-theme-h1-font-size-multiplier: (25 / 12);
-$o-theme-h2-font-size-multiplier: (18 / 12);
-$o-theme-h3-font-size-multiplier: (16 / 12);
-$o-theme-h4-font-size-multiplier: (14 / 12);
-$o-theme-h5-font-size-multiplier: 1;
-$o-theme-h6-font-size-multiplier: 1;
+$o-theme-h1-font-size-multiplier: (62 / 16);
+$o-theme-h2-font-size-multiplier: (48 / 16);
+$o-theme-h3-font-size-multiplier: (36 / 16);
+$o-theme-h4-font-size-multiplier: (28 / 16);
+$o-theme-h5-font-size-multiplier: (24 / 16);
+$o-theme-h6-font-size-multiplier: (21 / 16);
 
 $o-theme-font-configs: (
     'Heebo': (
@@ -46,6 +46,10 @@ $o-theme-font-configs: (
         'family': ('Muli', sans-serif),
         'url': 'Muli:300,300i,400,400i,700,700i',
     ),
+    'DM Serif Display': (
+        'family': ('DM Serif Display', serif),
+        'url': 'DM+Serif+Display:400,400i',
+    ),
 );
 
 //------------------------------------------------------------------------------
@@ -57,16 +61,24 @@ $o-website-values-palettes: (
         'color-palettes-name': 'beauty-1',
 
         'header-font-size': (18 / 16) * 1rem,
-        'btn-border-radius': .3125rem,
-        'btn-border-radius-lg': .3125rem,
-        'btn-border-radius-sm': .3125rem,
         'font': 'Questrial',
-        'headings-font': 'Questrial',
+        'headings-font': 'DM Serif Display',
         'navbar-font': 'Questrial',
         'buttons-font': 'Questrial',
         'header-template': 'Contact',
         'footer-template': 'default',
         'header-links-style': 'outline',
+
+        // Buttons
+        'btn-padding-y':                    .45rem,
+        'btn-padding-x':                    1.35rem,
+        'btn-padding-y-sm':                 .3rem,
+        'btn-padding-x-sm':                 .9rem,
+        'btn-padding-y-lg':                 .6rem,
+        'btn-padding-x-lg':                 1.8rem,
+        'btn-border-radius':                10rem,
+        'btn-border-radius-sm':             10rem,
+        'btn-border-radius-lg':             10rem,
     ),
 );
 
@@ -97,3 +109,11 @@ $o-color-palettes-compatibility-indexes: (
     22: 'generic-16',
     23: 'generic-17',
 );
+
+//------------------------------------------------------------------------------
+// Shapes
+//------------------------------------------------------------------------------
+
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Wavy/09', (1: 3, 5: 3));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Wavy/13_001', (1: 3));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Wavy/20', (2: 1));