[IMP] theme_kiddo: update the theme

Theme Kiddo's design has been revamped by adding the following
improvements:

- Theme palette has been changed, using less contrasted colours.
- Fonts have been reviewed, replacing 'Bubblegum Sans' with 'Varela
Round'.
- Header and footer default values have been reviewed and changed to
'default' and 'descriptive'.
- Buttons' default design has been revamped, using now outline buttons
by default.
- Theme's tour has been reviewed and changed, using 's_picture' as a
third block.
- Theme's screenshot and description have been updated.
- Theme's tour snippet design has been revamped, by using animated
shapes ('s_banner', 's_picture'), new shapes ('s_image_text',
's_call_to_action'), a bg video + img placeholder ('s_banner'), a
illustration with dynamic colours ('s_image_text'), a new copywriting
('s_picture'), better text block design ('s_banner'), better design in
smaller viewports ('s_banner', 's_product_list') and a brand new
snippet design ('s_product_list').
- In order to add a better integration with the Website Configurator,
's_cover' design has also been improved.

Additionally, duplicated commented text lines in
'bootstrap_overridden.scss' have been removed.

task-2573229

X-original-commit: 0173ac6c44
Part-of: odoo/design-themes#501
This commit is contained in:
Carlos Valverde
2021-06-16 09:22:48 +00:00
committed by qsm-odoo
parent 93809e1584
commit 7411ad6b49
24 changed files with 1219 additions and 429 deletions
-1
View File
@@ -1,7 +1,6 @@
// The yiq lightness value that determines when the lightness of color changes from "dark" to "light".
// Acceptable values are between 0 and 255.
// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
$yiq-contrasted-threshold: 150 !default;
// Shadow
@@ -62,6 +62,10 @@ $o-theme-h5-font-size-multiplier: (20 / 14);
$o-theme-h6-font-size-multiplier: (16 / 14);
$o-theme-font-configs: (
'Varela Round': (
'family': ('Varela Round', sans-serif),
'url': 'Varela+Round:300,300i,400,400i,600,600i',
),
'Montserrat': (
'family': ('Montserrat', sans-serif), // font update - Proxima -> Montserrat
'url': 'Montserrat:300,300i,400,400i,600,600i',
@@ -118,31 +122,35 @@ $o-theme-font-configs: (
$o-website-values-palettes: (
(
'color-palettes-name': 'kiddo-1',
'color-palettes-name': 'kiddo-3',
'font-size-base': (14 / 16) * 1.075rem,
'header-font-size': 1.25rem,
'header-font-size': 1.15rem,
'logo-height': 3rem,
'fixed-logo-height': 3rem,
'btn-border-radius': 2rem,
'btn-padding-y': .75rem,
'btn-padding-x': 1.75rem,
'btn-border-radius-lg': 2rem,
'btn-padding-y': .5rem,
'btn-padding-x': 1.25rem,
'btn-padding-y-lg': .75rem,
'btn-padding-x-lg': 1.5rem,
'font': 'Montserrat',
'headings-font': 'Bubblegum Sans',
'navbar-font': 'Bubblegum Sans',
'buttons-font': 'Bubblegum Sans',
'headings-font': 'Varela Round',
'navbar-font': 'Varela Round',
'buttons-font': 'Varela Round',
'link-underline': 'never',
'header-template': 'centered_logo',
'footer-template': 'minimalist',
'header-template': 'default',
'footer-template': 'descriptive',
'btn-primary-outline': true,
),
);
$o-palette-priority-prefix: 'kiddo';
$o-color-palettes-compatibility-indexes: (
1: 'kiddo-1',
1: 'kiddo-3',
2: 'kiddo-2',
3: 'kiddo-3',
3: 'kiddo-1',
4: 'kiddo-4',
5: 'generic-1',
6: 'generic-2',
@@ -176,8 +184,6 @@ $o-gray-color-palettes-compatibility-indexes: (
// 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: add-extra-shape-colors-mapping('web_editor', 'Wavy/13_001', 'second', (1: 3));
$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Wavy/19', (5: 4));
$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Origins/14_001', (3: 2, 4: rgba(0, 0, 0, 0)));
$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Origins/16', (3: 3));
$o-bg-shapes: add-footer-shape-colors-mapping('web_editor', 'Wavy/22', (3: 'footer'));