[REF] web,*: each module handle its own dark mode variables

Instead of having a dedicated module for all-things dark mode related,
this commit moves the (S)CSS files into their respecting modules and
uses `web` and `web_enterprise` to provide the base infrastructure for
the dark mode (cf. dedicated assets bundle).

Note:
Don't forget that you have to handle 2 cases:
1: SCSS variables must be placed BEFORE bright ones
2: CSS variables must be placed AFTER

task-2710677

Part-of: odoo/odoo#102868

addons/hr_holidays/__manifest__.py

@@ -83,6 +83,14 @@ A synchronization with an internal agenda (Meetings of the CRM module) is also p
             'hr_holidays/static/src/tours/*.js',
             'hr_holidays/static/src/radio_image_field/*.js',
             'hr_holidays/static/src/radio_image_field/*.xml',
+
+            # Don't include dark mode files in light mode
+            ('remove', 'hr_holidays/static/src/views/**/*.dark.scss'),
+            ('remove', 'hr_holidays/static/src/dashboard/**/*.dark.scss'),
+        ],
+        "web.dark_mode_assets_backend": [
+            'hr_holidays/static/src/views/**/*.dark.scss',
+            'hr_holidays/static/src/dashboard/**/*.dark.scss',
         ],
         'web.tests_assets': [
             'hr_holidays/static/tests/helpers/**/*',

addons/hr_holidays/static/src/dashboard/time_off_card.dark.scss

@@ -0,0 +1,6 @@
+// = HR Holidays
+// ============================================================================
+// No CSS hacks, variables overrides only
+.o_timeoff_card {
+    --timeOffCard-icon-filter: invert(1) brightness(2);
+}

addons/hr_holidays/static/src/views/calendar/filter_panel/calendar_filter_panel.dark.scss

@@ -0,0 +1,8 @@
+// = HR Holidays
+// ============================================================================
+// No CSS hacks, variables overrides only
+.o_calendar_filter {
+    --calendarFilter-icon--plain: url("/hr/static/src/img/icons/plain_dark.svg");
+    --calendarFilter-icon--hatched: url("/hr/static/src/img/icons/hatched_dark.svg");
+    --calendarFilter-icon--line: url("/hr/static/src/img/icons/line_dark.svg");
+}

addons/mail/__manifest__.py

@@ -204,6 +204,12 @@ For more specific needs, you may also assign custom-defined actions
             'mail/static/src/webclient/commands/*.js',
             'mail/static/src/widgets/*/*.js',
             'mail/static/src/widgets/*/*.scss',
+
+            # Don't include dark mode files in light mode
+            ('remove', 'mail/static/src/components/*/*.dark.scss'),
+        ],
+        "web.dark_mode_assets_backend": [
+            'mail/static/src/components/*/*.dark.scss',
         ],
         'web.assets_backend_prod_only': [
             'mail/static/src/main.js',

addons/mail/static/src/components/attachment_viewer/attachment_viewer.dark.scss

@@ -0,0 +1,7 @@
+// = Attachment Viewer View
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.o_AttachmentViewer_toolbarButton {
+    --AttachmentViewer_toolbarButton-background-color: #{$o-gray-200};
+}

addons/mail/static/src/components/call_action_list/call_action_list.dark.scss

@@ -0,0 +1,7 @@
+// = Call Action List View
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.o_CallActionList_button:not(.btn-danger) {
+    --CallActionList_button-background-color: #{$o-gray-200};
+}

addons/mail/static/src/components/call_participant_card/call_participant_card.dark.scss

@@ -0,0 +1,7 @@
+// = Call Participant Card View
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.o_CallParticipantCard_avatarFrame {
+    --CallParticipantCard_avatarFrame-background-color: #{$o-gray-100};
+}

addons/mail/static/src/components/call_view/call_view.dark.scss

@@ -0,0 +1,7 @@
+// = Call View
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.o_CallView {
+    --CallView-background-color: #{$o-gray-100};
+}

addons/mail/static/src/components/chat_window_header/chat_window_header.dark.scss

@@ -0,0 +1,7 @@
+// = ChatWindow Header View
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.o_ChatWindowHeader {
+    --ChatWindowHeader-background-color: #{$o-gray-100};
+}

addons/mail/static/src/components/emoji_category_bar_view/emoji_category_bar_view.dark.scss

@@ -0,0 +1,7 @@
+// = Emoji Category Bar View
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.o_EmojiCategoryBarView {
+    --EmojiCategoryBarView-background-color: #{$o-gray-100};
+}

addons/mail/static/src/components/message_action_list/message_action_list.dark.scss

@@ -0,0 +1,7 @@
+// = Message Action List View
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.o_MessageActionList {
+    --MessageActionList-background-color: #{$o-gray-100};
+}

addons/mail/static/src/components/message_action_view/message_action_view.dark.scss

@@ -0,0 +1,7 @@
+// = Message Action View
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.o_MessageActionView {
+    --MessageActionView-background-color--hover: #{$o-gray-300};
+}

addons/web/__manifest__.py

@@ -524,6 +524,9 @@ This module provides the core of the Odoo Web Client.
         "web.dark_mode_assets_backend": [
             ('include', 'web.assets_backend'),
         ],
+        "web.dark_mode_variables": [
+            ('before', 'base/static/src/scss/onboarding.variables.scss', 'base/static/src/scss/onboarding.variables.dark.scss'),
+        ],
 
         # ---------------------------------------------------------------------
         # SUB BUNDLES

addons/web_editor/__manifest__.py

@@ -113,6 +113,13 @@ Odoo Web Editor widget.
             'web_editor/static/src/js/backend/**/*',
             'web_editor/static/src/xml/backend.xml',
         ],
+        "web.dark_mode_assets_backend": [
+            'web_editor/static/src/scss/odoo-editor/powerbox.dark.scss',
+            'web_editor/static/src/scss/odoo-editor/tablepicker.dark.scss',
+            'web_editor/static/src/scss/odoo-editor/tableui.dark.scss',
+            'web_editor/static/src/scss/wysiwyg.dark.scss',
+            'web_editor/static/src/scss/web_editor.common.dark.scss',
+        ],
         'web.assets_frontend_minimal': [
             'web_editor/static/src/js/frontend/loader_loading.js',
         ],

addons/web_editor/static/src/scss/odoo-editor/powerbox.dark.scss

@@ -0,0 +1,16 @@
+// = Notes powerbox
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.oe-powerbox-wrapper {
+    --oePowerbox__wrapper-bg: #{$o-gray-300};
+
+    --oePowerbox__category-color: #{$o-gray-700};
+
+    --oePowerbox__commandName-bg: #{$o-gray-200};
+    --oePowerbox__commandName-color: #{$o-gray-900};
+    --oePowerbox__commandDescription-color: #{$o-gray-500};
+
+    --oePowerbox__commandImg-bg: #{$o-gray-400};
+    --oePowerbox__commandImg-color: #{$o-gray-900};
+}

addons/web_editor/static/src/scss/odoo-editor/tablepicker.dark.scss

@@ -0,0 +1,13 @@
+// = Knowledge: Table
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.oe-tablepicker-wrapper {
+    --oeTablepicker__wrapper-bg: #{$o-gray-300};
+    --oeTablepicker-color-accent: #{$o-brand-primary};
+}
+
+.oe-tablepicker {
+    --oeTablepicker__cell-bg: #{$o-gray-200};
+}
+

addons/web_editor/static/src/scss/odoo-editor/tableui.dark.scss

@@ -0,0 +1,11 @@
+// = Table UI
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.o_table_ui {
+    --o-table-ui-bg: #{$o-gray-300};
+    --o-table-ui-color: #{$o-gray-900};
+    --o-table-ui-border: #{$o-gray-200};
+    --o-table-ui-hover: #{$o-gray-200};
+}
+

addons/web_editor/static/src/scss/web_editor.common.dark.scss

@@ -0,0 +1,7 @@
+// = Web Editor Common Variables
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.o_we_search_prompt {
+    --WebEditor__SearchPromptArrow-filter: invert(1);
+}

addons/web_editor/static/src/scss/wysiwyg.dark.scss

@@ -0,0 +1,17 @@
+// = Wysiwyg Variables
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.oe-toolbar.oe-floating {
+    --o-we-toolbar-bg: #{$o-gray-300};
+    --o-we-toolbar-bg-active: #{$o-gray-400};
+    --o-we-toolbar-border: #{$o-gray-200};
+    --o-we-toolbar-color-text: #{$o-gray-800};
+    --o-we-toolbar-color-accent: #{$o-brand-primary};
+    --o-we-toolbar-color-clickable: #{$o-gray-800};
+    --o-we-toolbar-color-clickable-active: #{$o-black};
+}
+
+.o_link_dialog_preview {
+    --o-link-dialog-preview-border: #{$border-width} solid #{$border-color};
+}

addons/website/__manifest__.py

@@ -182,6 +182,15 @@
             'website/static/src/components/views/*',
             'website/static/src/services/website_service.js',
             'website/static/src/js/utils.js',
+
+            # Don't include dark mode files in light mode
+            ('remove', 'website/static/src/client_actions/*/*.dark.scss'),
+        ],
+        "web.dark_mode_assets_backend": [
+            'website/static/src/components/dialog/*.dark.scss',
+            'website/static/src/scss/website.backend.dark.scss',
+            'website/static/src/client_actions/*/*.dark.scss',
+            'website/static/src/components/website_loader/website_loader.dark.scss'
         ],
         'web.assets_common': [
             'website/static/src/js/tours/tour_utils.js',
@@ -274,6 +283,9 @@
             'website/static/src/client_actions/*/*.xml',
             'website/static/src/components/website_loader/*.xml',
             'website/static/src/js/backend/**/*',
+
+            # Don't include dark mode files in light mode
+            ('remove', 'website/static/src/components/dialog/*.dark.scss'),
         ],
         'website.test_bundle': [
             '/web/static/lib/qweb/qweb2.js',

addons/website/static/src/client_actions/configurator/configurator.dark.scss

@@ -0,0 +1,6 @@
+// = Website Configuration
+// ============================================================================
+// No CSS hacks, variables overrides only
+.o_configurator_odoo_logo {
+    --configurator-logo: url(/web/static/img/odoo_logo_dark.svg);
+}

addons/website/static/src/components/dialog/seo.dark.scss

@@ -0,0 +1,6 @@
+// = Website SEO
+// ============================================================================
+// No CSS hacks, variables overrides only
+.oe_seo_configuration {
+    --seo__preview-title-color: #8ab4f8; // Google Search dark-mode color
+}

addons/website/static/src/components/website_loader/website_loader.dark.scss

@@ -0,0 +1,6 @@
+// = Website Loader
+// ============================================================================
+// No CSS hacks, variables overrides only
+.o_website_loader_container {
+    --website-loader-color: #FFFFFF;
+}

addons/website/static/src/scss/website.backend.dark.scss

@@ -0,0 +1,7 @@
+// = Website Backend
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.o_demo_background {
+    --Dashboard__demoBackground: url("/website/static/src/img/website_dashboard_visit_demo_dark_mode.png");
+}

odoo/addons/base/static/src/scss/onboarding.variables.dark.scss

@@ -0,0 +1,18 @@
+// = Onboarding Colors
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+$o-onboarding-colors: (
+    'blue': (
+        'bg': (#215e72, #1c3d4e),
+        'ui': (#db851e, #c0ad73),
+    ),
+    'orange': (
+        'bg': (#5c4436, #784536),
+        'ui': ($o-brand-primary, #68B3C9),
+    ),
+    'violet': (
+        'bg': (#424a7d, #333e6a),
+        'ui': (#db851e, #c0ad73),
+    ),
+) !default;