c0b683e2f4
This commit introduces some adjustments to the dark mode color scheme and the use of bootstrap classes in Community. - Mini calendar contrast - The colors were not using variables, making them non dynamic and breaking the contrast in dark mode. - Avoid !important rules spreadsheet - Prior to this commit, spreadsheet top bar was using a `bg-white` class, making it pure black in dark mode. Since spreadsheet is designed with light colors and we don't provide a dark mode for it, we remove that class and set a `background-color` property using CSS in Enterprise. - Input color - This commit fixes the focus behavior on the searchbar in the control panel, the `command_palette_search`, and the `start a conversation` in discuss. - Copy clipboard field border color - Make use of the `text-primary` color for the copy to clipboard field We use the o-theme-color function to avoid an undefined since primary doesn't exist in the o-theme-text-color map in white mode. - Web_editor toolbar variables - The toolbar was using the `o-brand-primary` variable which was set to a darker shade. This caused issue when activating an option due to how vibrant the color is. - Improve the controls on border-color - Introducing a custom property on the border-color to allow further control on individual components (such as the popover). - Improve setting tabs colors use - Prior to this commit, the colors of the settings tabs menu were kinda inverted. The menu was light in dark mode and dark in light mode. We fix this by changing the values associated to the CSS variables in use. - Make model field selector dark mode proof - Fixing the design of the model field selector popover in both light and dark mode. Since the popover was using custom style with arbitrary values, it was not designed for the dark mode and had a lack of consistency. To improve the design, we use variables rather than custom style, and make sure the desired render is as close as before. - Sign colors use - This commit aims to improve the sign module in both light and dark mode. There were some readability issue with some `btn-light` having poor contrasts in both light and dark mode, and the use of some classes was a bit unexpected (e.g `card-header` to set a grey background with some padding). - Improve buttons design inside listview - Prior to this commit, this button was using custom CSS to make it look like a primary button, while it was using classes related to secondary buttons. We remove the custom CSS used to style it correctly and keep our button design consistent. - Messaging menu layout in mail - This commit aims to improve the design of the notifications displayed in the messaging menu. Prior to this commit, the notifications dropdown was using custom CSS variables overriding the regular behavior of our dropdowns. In fact, the layout was generating some friction: 1) Marking a notification as read would turn its background into a darker color 2) Effects like `:hover` were all based on the custom CSS variables resulting in an inconsistent layout. - Multi company selector adaptations - In darkmode the multi company selection was using the btn-light which creates a weird effect and overrides the dropdown default hover behavior This commit uses the btn-link to display an hover effect on the company switch and on the checkbox while blending with the background and the default dropdown hover effect. - Adapts default badge design - Improve the design of the default badges in dark mode. If you open the light mode, these badges are dark grey with a white text. If you switch to dark mode, they are dark grey but with a dark text, which makes them look either muted or off. We make use of SCSS variables to handle the color of the component, providing a good styling in both modes. - Fix kanban cards borders inside dropdown - Fixes the issue with the divider inside the kanban dropdown menu not showing in dark mode. To ensure it is visible, we assign it the `$dropdown-divider-bg`, which is the color it should use, as the horizontal divider above uses. - Fix tour pointer design for dark mode - This commit aims to insert the tour pointer and its content inside the styling we applied to our tooltip. To do so, we make sure it uses CSS variables, allowing more control and consistency, plus we replicate the overall look of our tooltips. - Fix `text-primary` on action background contrast - This commit improves the readability of our `text-primary` classes when it's used on a `$o-component-active-bg` background. Prior to this commit, the `text-primary` was not meeting the contrast standard, mainly when you were using the `CMD+K` shortcut on the app switcher. To prevent that, we changed the background to a `$o-component-active-bg` background with an opacity ensuring our text provides a good contrast. - Fix input states - Prior to this commit, the `--o-input-border-color` CSS variable was using the `$o-form-lightsecondary` variable to define the standard color of the `border-bottom` property of our inputs. This was conflicting since `$o-form-light-secondary` is also used to define the `background-color` of our table on focus. With this commit, we separate these two element with different variables to make sure they don't affect each others. - Fix kanban ghost background - Before this commit, if you created a project without any stage or element in it, the ghost cards that act like placeholders would be pure `#000` in dark mode, due to the `bg-white` class. This commit replaces that class with a `bg-light`, providing a better visual result in both light and dark mode. - Fix new message design - Improve the design of the new message element while inside Discuss, using our danger color, ensuring a good visual result in both modes. task-3201038 closes odoo/odoo#139966 Related: odoo/enterprise#49666 Signed-off-by: Pierre Paridans (app) <app@odoo.com> Co-authored-by: chgo-odoo <chgo@odoo.com> Co-authored-by: stefanorigano <sri@odoo.com>