Files
design-themes/theme_kiddo/static/src/scss/primary_variables.scss
T
Carlos Valverde 7411ad6b49 [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
2021-09-24 11:09:47 +00:00

190 lines
5.6 KiB
SCSS

//------------------------------------------------------------------------------
// Colors
//------------------------------------------------------------------------------
// Theme colors
$o-theme-color-palettes: map-merge($o-theme-color-palettes,
(
'kiddo-1': (
'alpha': #ffffff,
'beta': #47464b,
'gamma': #f3997b,
'delta': #add3ce,
'epsilon': #a7c7d5,
),
'kiddo-2': (
'alpha': #ffffff,
'beta': #d699ae,
'gamma': #B24774,
'delta': #72c2d0,
'epsilon': #ed8354,
),
'kiddo-3': (
'alpha': #ffffff,
'beta': #79CCC2,
'gamma': #F05A12,
'delta': #C5FFF8,
'epsilon': #0F7F72,
),
'kiddo-4': (
'alpha': #ffffff,
'beta': #53a1cc,
'gamma': #116899,
'delta': #aab3ca,
'epsilon': #ffc9c1,
),
'kiddo-5': (
'alpha': #ffffff,
'beta': #3b2c3c,
'gamma': #D2546D,
'delta': #303347,
'epsilon': #171827,
),
'kiddo-6': (
'alpha': #ffffff,
'beta': #2F343B,
'gamma': #C77966,
'delta': #703030,
'epsilon': #E3CDA4,
),
)
);
//------------------------------------------------------------------------------
// Fonts
//------------------------------------------------------------------------------
$o-theme-h1-font-size-multiplier: (40 / 14);
$o-theme-h2-font-size-multiplier: (32 / 14);
$o-theme-h3-font-size-multiplier: (28 / 14);
$o-theme-h4-font-size-multiplier: (24 / 14);
$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',
),
'Comic Neue': (
'family': ('Comic Neue', cursive), // font update - Comic Sans MS -> Comic Neue
'url': 'Comic+Neue:300,300i,400,400i,700,700i',
),
'Bubblegum Sans': (
'family': ('Bubblegum Sans', cursive), // font update - Fontastique -> Bubblegum+Sans
'url': 'Bubblegum+Sans:300,300i,400,400i,700,700i',
),
'Eagle Lake': (
'family': ('Eagle Lake', serif), // font update - Luminari -> Eagle Lake
'url': 'Eagle+Lake:300,300i,400,400i,700,700i',
),
'Marcellus': (
'family': ('Marcellus', sans-serif), // font update - Fecske -> Marcellus
'url': 'Marcellus:300,300i,400,400i,700,700i',
),
'Roboto': ( // stable ! Din -> Roboto
'family': ('Roboto', sans-serif),
'url': 'Roboto:300,300i,400,400i,700,700i',
),
'Oxygen': (
'family': ('Oxygen', sans-serif),
'url': 'Oxygen:300,300i,400,400i,700,700i',
),
'Cabin': (
'family': ('Cabin', sans-serif),
'url': 'Cabin:300,300i,400,400i,700,700i',
),
'Abel': (
'family': ('Abel', sans-serif),
'url': 'Abel:300,300i,400,400i,700,700i',
),
'Advent Pro': (
'family': ('Advent Pro', sans-serif),
'url': 'Advent+Pro:300,300i,400,400i,700,700i',
),
'Muli': (
'family': ('Muli', sans-serif),
'url': 'Muli:300,300i,400,400i,700,700i',
),
'Noto Sans': (
'family': ('Noto Sans', sans-serif),
'url': 'Noto+Sans:300,300i,400,400i,700,700i',
),
);
//------------------------------------------------------------------------------
// Website customizations
//------------------------------------------------------------------------------
$o-website-values-palettes: (
(
'color-palettes-name': 'kiddo-3',
'font-size-base': (14 / 16) * 1.075rem,
'header-font-size': 1.15rem,
'logo-height': 3rem,
'fixed-logo-height': 3rem,
'btn-border-radius': 2rem,
'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': 'Varela Round',
'navbar-font': 'Varela Round',
'buttons-font': 'Varela Round',
'link-underline': 'never',
'header-template': 'default',
'footer-template': 'descriptive',
'btn-primary-outline': true,
),
);
$o-palette-priority-prefix: 'kiddo';
$o-color-palettes-compatibility-indexes: (
1: 'kiddo-3',
2: 'kiddo-2',
3: 'kiddo-1',
4: 'kiddo-4',
5: 'generic-1',
6: 'generic-2',
7: 'generic-3',
8: 'generic-4',
9: 'generic-5',
10: 'generic-6',
11: 'generic-7',
12: 'generic-8',
13: 'generic-9',
14: 'generic-10',
15: 'generic-11',
16: 'generic-12',
17: 'generic-13',
18: 'generic-14',
19: 'generic-15',
20: 'generic-16',
21: 'generic-17',
);
$o-gray-color-palettes-compatibility-indexes: (
1: 'kiddo-1',
2: 'kiddo-2',
3: 'kiddo-3',
4: 'kiddo-4',
5: 'kiddo-5',
6: 'kiddo-6',
);
//------------------------------------------------------------------------------
// Shapes
//------------------------------------------------------------------------------
$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'));