Sunday, October 8, 2023
1 change · master
Enhancements to existing features
The default Odoo website theme has been refreshed with updated colors, typography, spacing, borders, shadows, and imagery. This improves the out-of-the-box look of websites and makes common elements like buttons, inputs, snippets, and pagination more consistent and readable across website pages and related apps.
Original PR description
Impacted modules (*): `website_sale`, `website_forum`, `website_blog`, `website_customer`, `website_mass_mailing`, `website_event_exhibitor`, `website_event_track`, `web_slides`, `web_editor` The…
Impacted modules (*): `website_sale`, `website_forum`, `website_blog`, `website_customer`, `website_mass_mailing`, `website_event_exhibitor`, `website_event_track`, `web_slides`, `web_editor` The main goal of this PR is to modernize the default website theme by: - Improving the color palette, the typography, the border radiuses, the shadows, the imagery - Refactoring the default Bootstrap components with a better color management and default styles - Reworking some snippet's color behaviour and layout ### Default theme improvements _**Default color palette:**_ The palette has been "milkyfied", using modern and dynamic tones while matching the Odoo brand. | Before | After | |--------|--------| |  |  | _**Typography:**_ - `h1`, `h2`, `h3` size have been increased a bit - Color preset 2 (CC2): Headings are now using `o-color-5` (dark) instead of `o-color-1` (primary) so that they don't look clickable - Lead paragraph's `line-height` and `margin-bottom` are now based on the editor's values - `$font-weight-bold` is now `600` by default as it looks cleaner that default bootstrap's `700`. Note that font families that don't contain a `600` weight value will fallback to `700` automatically _**Border colors:**_ The default border-color values have been harmonized and now provide a predictable result when transitioning between color-presets. `$border-color` is now using a CSS variable that makes the boostrap components and utility classes match better with the chosen color-preset. The color of the border inside a preset is now a `color-mix` generating slightly transparent version of it's text-color _**Border radius:**_ Border radius has been increased. With default bootstrap values, the difference between `.rounded-1` and `.rounded-3` was almost invisible. | Before | After | |--------|--------| <img width="809" alt="Screenshot 2023-09-25 at 12 12 30" src="https://github.com/odoo/odoo/assets/110090660/95eeb86e-a911-4d7b-9fd9-f6bbe6c75720"> | <img width="815" alt="Screenshot 2023-09-25 at 12 12 23" src="https://github.com/odoo/odoo/assets/110090660/7a810f0c-20a3-4ced-93f5-a94634cf4181"> | _**Box shadows:**_ Shadows are more subtle and diffused. | Before | After | |--------|--------|  |  | ------------------------------------------------------------------------------------------------ ### Updated components | Name | Notes | Before | After | |----------|--------|--------|--------| | Accordions | Reset to bootstrap default: borders are back, arrow is now pointing bottom | <img width="390" alt="Screenshot 2023-09-25 at 11 28 39" src="https://github.com/odoo/odoo/assets/110090660/f0a635f7-1edd-46fc-b4df-21905afc78ba"> | <img width="400" alt="Screenshot 2023-09-25 at 11 29 04" src="https://github.com/odoo/odoo/assets/110090660/c087a49a-cb48-4cd9-a9f1-2506ca9fff23"> | | Alerts | Added a dark background behind the icon. | <img width="665" alt="Screenshot 2023-09-25 at 11 10 06" src="https://github.com/odoo/odoo/assets/110090660/240f21a8-b599-43d2-95c4-91333384b344"> | <img width="659" alt="Screenshot 2023-09-25 at 11 25 20" src="https://github.com/odoo/odoo/assets/110090660/112ee9dc-4ec9-409d-aba4-eeb5a46e7762"> | | Badges | The full colored background was making badges too close from buttons, we switched to lighter and subtle colors. Note that the ability to apply arbitrary colors has been removed since to use the "Style" drop-down ensures consistency and avoids issues related to text readability. | <img width="475" alt="Screenshot 2023-09-25 at 11 00 23" src="https://github.com/odoo/odoo/assets/110090660/cf99cffa-5037-4362-be60-6068719bdc69"> | <img width="534" alt="Screenshot 2023-09-25 at 11 00 15" src="https://github.com/odoo/odoo/assets/110090660/4cf7c551-da83-4aa4-afdb-b2adbdf2f709"> | | Buttons | Large buttons are now way bigger and fully rounded to stand out more when used as CTAs. Padding has been increased a bit to let the label more room to breath. | <img width="706" alt="Screenshot 2023-09-25 at 11 23 02" src="https://github.com/odoo/odoo/assets/110090660/26f19c7e-004f-4bc0-a952-82db5a99d9d0"> | <img width="766" alt="Screenshot 2023-09-25 at 11 22 22" src="https://github.com/odoo/odoo/assets/110090660/57d9be44-e99b-4812-818c-bdd7c08d0049"> | | Button Groups | Light button groups now have a specific active state style. This combo `button-group` + `btn-light` is used widely trough the modules, we made it generic. | <img width="425" alt="Screenshot 2023-09-25 at 11 05 11" src="https://github.com/odoo/odoo/assets/110090660/a830295d-0791-4f3a-bf97-e69a79587263"> | <img width="471" alt="Screenshot 2023-09-25 at 11 04 54" src="https://github.com/odoo/odoo/assets/110090660/691fba59-a6f3-45a1-893f-9b3d95a05fed"> | | Inputs | Input background is now based on o-cc2 (light). Note that if o-cc2 is applied to the parent of the input, the background changes back to white and a border is added | default: <img width="441" alt="Screenshot 2023-09-25 at 11 05 32" src="https://github.com/odoo/odoo/assets/110090660/699cadd8-03b3-45a1-a165-e4beb42295c2"> focus: <img width="446" alt="Screenshot 2023-09-25 at 11 05 45" src="https://github.com/odoo/odoo/assets/110090660/e77e6cba-6512-4106-b89f-d563cd6d0723"> | default: <img width="439" alt="Screenshot 2023-09-25 at 11 05 27" src="https://github.com/odoo/odoo/assets/110090660/add950ef-ce29-45db-bf12-fefd917fb0a4"> focus: <img width="441" alt="Screenshot 2023-09-25 at 11 05 39" src="https://github.com/odoo/odoo/assets/110090660/d4b60b83-19a8-473a-a8e9-4a515ce97c0f"> o-cc2:  | | Pagination  | | <img width="276" alt="Screenshot 2023-09-25 at 11 05 54" src="https://github.com/odoo/odoo/assets/110090660/9007a356-8142-4057-a640-aad8f0ea0785"> | <img width="284" alt="Screenshot 2023-09-25 at 11 05 59" src="https://github.com/odoo/odoo/assets/110090660/cef6a86b-542b-47b3-9c01-f2ebaa058eaa"> | ------------------------------------------------------------------------------------------------ ### Snippet improvements - Improvement of the snippet colors. Some color-presets were not applied correctly on several snippets, this was fixed mostly by using `(bg-)o-color-x` classes. Some others were using color combination that would not match together and have been improved. - Snippet's imagery have been reworked with more modern, minimalistic and clean images - Snippets were using `btn-primary` too much, we swapped some of them with `btn-secondary` and `btn-link` too add more variety and not have multiple CTA displayed in the viewport at the same time. - `s_banner` snippet was redesign to look more modern and to better showcase the full potential of the web_editor by creating a creative image collage using grid by default in the snippet. Before:  After:  - `s_text_cover`'s text column has been a bit widened. ------------------------------------------------------------------------------------------------ ### Modules bugfixes and improvements `website_forum`: - `o_wforum_forums_index_list`'s card's colors are now dynamic based on the background we use - Popover shadow color has been reset to bootstrap default for a better result on dark backgrounds - Structure has been aligned with `website_sale' 's structure (sidebar inside the container) `website_blog`: - Navigation alignment has been fixed and now takes the full container width `website_sale`: - Product list: view switcher (`o_wsale_apply_layout`) is now using the new `btn-light` active state, `.o_wsale_offcanvas`'s background color is now based on page background, `.o_wsale_offcanvas`'s accordions have been reset to bootstrap default, spacing issues in `products_header` have been fixed, - Cart's badge is now hidden when the product count is 0 - "Add to cart" button in product detail page has been changed from a large button to a regular button as the new `btn-lg` style doesn't fit in this kind of layout `web_slides`: - A small layout issue in the trucated list of badges (created by the new badge style) has been fixed ------------------------------------------------------------------------------------------------ ### Other changes - Bootstrap `$light` (bg-light, btn-light...) is now equal to CC2. That way, the user is now allowed to customize the "system" UI elements (e.g. website_sale filters) that are using this light color. - Update of the BS Debug page: we completed this page with the missing components to have a better overview of the overrides done on bootstrap variables and components. It will also be useful to the advanced users trying to achieve a high level of customisation of their website. - Default theme screenshot and tour (onboarding) have been updated. - `increase-contrast()` lightness limit: Increase the function's maximum lightness amount from 15% to 20%. The new value is still arbitrary but provides better results with the default color palette. This PR is very important to continue some of the tasks the design team is working on as the concerned modules will highly benefit from these improvements (event: task-3083658, appointment: task-3098386, headers: task-3060986). This is also a step forward to make possible the use of dark-mode color palettes by the users. - https://github.com/odoo/design-themes/pull/687 task-3097005 Co-authored-by: Antoine (anso) [anso@odoo.com](mailto:anso@odoo.com) Co-authored-by: Brieuc-brd [brd@odoo.com](mailto:brd@odoo.com) Co-authored-by: stefanorigano [sri@odoo.com](mailto:sri@odoo.com) --- I confirm I have signed the CLA and read the PR guidelines at www.odoo.com/submit-pr