[IMP] theme_avantgarde: update the theme

Theme Avantgarde's design has been completely revamped, focusing on
sectors such as the creativity industries, design, architecture, art or
museums, by adding the following improvements:

- Theme layout has changed to 'full'.
- Theme default palette has been changed to 'avantgarde-3'.
- Fonts have been reviewed, using 'Syne' by default and also adding
'Libre Baskerville' and 'Atkinson Hyperlegible' to the theme's font
list.
- Header and footer default values have been reviewed and changed to
'hamburger' (right-aligned) and 'descriptive'.
- Buttons' default design has been revamped, using now outline buttons
by default and removing the previous 'ripple' effect.
- Links are set to default, never using 'underline' decoration.
- Theme's tour has been reviewed and changed, using the following block
configuration: 's_cover' > 's_picture' > 's_three_columns' >
's_text_image' > 's_call_to_action'.
- Theme's snippets used in the tour have been revamped, by using
animated shapes ('s_cover', 's_text_image'), image shapes ('s_picture',
's_text_image'), and a new column design ('s_three_columns').
- Theme's tour snippets have also been optimised to be used in smaller
viewports.
- Theme's screenshot has been updated.

task-2573286

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

theme_avantgarde/static/src/js/tour.js

@@ -1,33 +1,26 @@
-odoo.define("theme_avantgarde.tour.avantgarde", function (require) {
-"use strict";
-
-const wTourUtils = require("website.tour_utils");
-var tour = require("web_tour.tour");
+/** @odoo-module */
+import wTourUtils from 'website.tour_utils';
 
 const snippets = [
     {
-        id: 's_title',
-        name: 'Title',
+        id: 's_cover',
+        name: 'Cover',
     },
     {
-        id: 's_carousel',
-        name: 'Carousel',
+        id: 's_picture',
+        name: 'Picture',
+    },
+    {
+        id: 's_three_columns',
+        name: 'Columns',
     },
     {
         id: 's_text_image',
-        name: 'Image - Text',
+        name: 'Text - Image',
     },
     {
-        id: 's_images_wall',
-        name: 'Images Wall',
-    },
-    {
-        id: 's_references',
-        name: 'References',
-    },
-    {
-        id: 's_quotes_carousel',
-        name: 'Quotes',
+        id: 's_call_to_action',
+        name: 'Call to Action',
     },
 ];
 
@@ -35,17 +28,11 @@ wTourUtils.registerThemeHomepageTour("avantgarde_tour", [
     wTourUtils.dragNDrop(snippets[0], 'top'),
     wTourUtils.clickOnText(snippets[0], 'h1', 'left'),
     wTourUtils.goBackToBlocks(),
-
     wTourUtils.dragNDrop(snippets[1], 'left'),
-
     wTourUtils.dragNDrop(snippets[2], 'bottom'),
     wTourUtils.clickOnSnippet(snippets[2], 'top'),
-    wTourUtils.changeBackgroundColor('top'),
-    wTourUtils.selectColorPalette(),
+    wTourUtils.changePaddingSize('top'),
     wTourUtils.goBackToBlocks(),
-
     wTourUtils.dragNDrop(snippets[3], 'top'),
-
     wTourUtils.dragNDrop(snippets[4], 'top'),
 ]);
-});

theme_avantgarde/static/src/scss/primary_variables.scss

@@ -88,8 +88,8 @@ $o-theme-color-palettes: map-merge($o-theme-color-palettes,
 // Fonts
 //------------------------------------------------------------------------------
 
-$o-theme-h1-font-size-multiplier: (48.83 / 16);
-$o-theme-h2-font-size-multiplier: (39.06 / 16);
+$o-theme-h1-font-size-multiplier: 3;
+$o-theme-h2-font-size-multiplier: 2.5;
 $o-theme-h3-font-size-multiplier: (31.25 / 16);
 $o-theme-h4-font-size-multiplier: (25.00 / 16);
 $o-theme-h5-font-size-multiplier: (20.00 / 16);
@@ -156,6 +156,18 @@ $o-theme-font-configs: (
         'family': ('Vollkorn', serif),
         'url': 'Vollkorn:300,300i,400,400i,700,700i',
     ),
+    'Libre Baskerville': (
+        'family': ('Libre Baskerville', serif),
+        'url': 'Libre+Baskerville:300,300i,400,400i,700,700i',
+    ),
+    'Atkinson Hyperlegible': (
+        'family': ('Atkinson Hyperlegible', serif),
+        'url': 'Atkinson+Hyperlegible:300,300i,400,400i,700,700i',
+    ),
+    'Syne': (
+        'family': ('Syne', serif),
+        'url': 'Syne:300,300i,400,400i,700,700i',
+    ),
 );
 
 //------------------------------------------------------------------------------
@@ -164,25 +176,23 @@ $o-theme-font-configs: (
 
 $o-website-values-palettes: (
     (
-        'color-palettes-name': 'avantgarde-1',
+        'color-palettes-name': 'avantgarde-3',
+        'layout': 'full',
 
-        'font-size-base': (14 / 16) * 1rem,
-        'font': 'Heebo',
-        'headings-font': 'Playfair Display',
-        'navbar-font': 'Playfair Display',
-        'buttons-font': 'Playfair Display',
+        'font-size-base': 1rem,
+        'font': 'Syne',
+        'headings-font': 'Syne',
+        'navbar-font': 'Syne',
+        'buttons-font': 'Syne',
 
-        'layout': 'boxed',
-        'header-template': 'magazine',
-        'hamburger-type': 'off-canvas',
-        'menu-box-shadow': false,
+        'header-template': 'hamburger',
+        'hamburger-type': 'default',
+        'hamburger-position': 'right',
 
-        'footer-template': 'centered',
+        'footer-template': 'descriptive',
 
-        'btn-ripple': true,
-        'btn-padding-y-lg': .6rem,
-        'btn-padding-x-lg': 2.2rem,
-        'link-underline': 'always',
+        'btn-primary-outline': true,
+        'link-underline': 'never',
     ),
 );
 
@@ -220,5 +230,5 @@ $o-color-palettes-compatibility-indexes: (
 // Shapes
 //------------------------------------------------------------------------------
 
-$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Blobs/01', (2: 2));
-$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Blobs/01_001', (2: 2));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Origins/18', (1: 3));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Origins/14_001', (3: 4, 4: rgba(0, 0, 0, 0)));