[IMP] web, mail: introduce bg-view class

Since the view's background-color has been historically white, the
`bg-white` class has been used to make match several UI components.

Despite working for the default color-scheme, this approach leads to
inconsistencies when the default view's background-color changes, eg.
dark-mode.

This commit introduce 'bg-view' to set any element to match the view's
background-color, whatever it is.

Commit preparatory to the introduction of dark-mode.

task-2710677

Part-of: odoo/odoo#102868

addons/mail/static/src/components/chatter/chatter.xml

@@ -3,7 +3,7 @@
 
     <t t-name="mail.Chatter" owl="1">
         <t t-if="chatter">
-            <div class="o_Chatter position-relative flex-grow-1 flex-column d-flex w-100 bg-white" t-attf-class="{{ className }}" t-ref="root">
+            <div class="o_Chatter position-relative flex-grow-1 flex-column d-flex w-100 bg-view" t-attf-class="{{ className }}" t-ref="root">
                 <t t-if="chatter.dropZoneView">
                     <DropZone
                         className="'o_Chatter_dropZone'"

addons/mail/static/src/components/message_list/message_list.xml

@@ -3,7 +3,7 @@
 
     <t t-name="mail.MessageList" owl="1">
         <t t-if="messageListView">
-            <div class="o_MessageList d-flex flex-column bg-white overflow-auto" t-att-class="{ 'o-empty align-items-center justify-content-center': messageListView.threadViewOwner.messages.length === 0, 'pb-4': messageListView.threadViewOwner.messages.length !== 0 }" t-attf-class="{{ className }}" t-on-scroll="onScroll" t-ref="root">
+            <div class="o_MessageList bg-view d-flex flex-column overflow-auto" t-att-class="{ 'o-empty align-items-center justify-content-center': messageListView.threadViewOwner.messages.length === 0, 'pb-4': messageListView.threadViewOwner.messages.length !== 0 }" t-attf-class="{{ className }}" t-on-scroll="onScroll" t-ref="root">
                 <!-- No result messages -->
                 <t t-if="messageListView.threadViewOwner.threadCache.orderedNonEmptyMessages.length === 0">
                     <div class="o_MessageList_empty o_MessageList_item d-flex flex-grow-1 flex-column align-items-center justify-content-center align-self-center w-100 h-100 p-4 text-center text-muted fst-italic">

addons/web/static/src/legacy/xml/search_panel.xml

@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
 <t t-name="web.Legacy.SearchPanel" owl="1">
-    <div class="o_search_panel flex-grow-0 flex-shrink-0 border-end pe-2 pb-5 ps-4 h-100 bg-white overflow-auto" t-att-class="props.className" t-ref="legacySearchPanel">
+    <div class="o_search_panel flex-grow-0 flex-shrink-0 border-end pe-2 pb-5 ps-4 h-100 bg-view overflow-auto" t-att-class="props.className" t-ref="legacySearchPanel">
         <section t-foreach="model.get('sections', s => !s.empty)" t-as="section" t-key="section.id"
             t-attf-class="o_search_panel_section o_search_panel_{{ section.type }}"
             >

addons/web/static/src/scss/utilities_custom.scss

@@ -74,6 +74,16 @@ $utilities: map-merge(
                 values: $utilities-opacity,
             ),
         ),
+        "background-color": map-merge(
+            map-get($utilities, "background-color"),
+            (
+                values: map-merge($utilities-bg-colors,
+                    (
+                      "view": $o-view-background-color,
+                    )
+                )
+            )
+        ),
         "rounded-top": (
             property: border-top-left-radius border-top-right-radius,
             class: rounded-top,

addons/web/static/src/search/search_panel/search_panel.xml

@@ -11,7 +11,7 @@
 </t>
 
 <t t-name="web.SearchPanelContent" owl="1">
-    <div class="o_search_panel flex-grow-0 flex-shrink-0 border-end pe-2 pb-5 ps-4 h-100 bg-white overflow-auto" t-att-class="env.searchModel.searchPanelInfo.className" t-ref="root">
+    <div class="o_search_panel flex-grow-0 flex-shrink-0 border-end pe-2 pb-5 ps-4 h-100 bg-view overflow-auto" t-att-class="env.searchModel.searchPanelInfo.className" t-ref="root">
         <section t-foreach="sections" t-as="section" t-key="section.id"
             t-attf-class="o_search_panel_section o_search_panel_{{ section.type }}"
             >