[FIX] web, website: restore background to notifications in front-end

Before this commit, `.bg-view` was set to `.o_notification`. This was
creating an issue in the front-end where `.bg-view` doesn't exist,
making the background of the notification transparent and ultimately
causing readability issues. Issue introduced in [1].

This commit changes the way we apply the background from a utility
class approach to a SCSS approach. That way, we can easily override
in `website.scss` with the `$body-color` of the website.

task-3716367
[1] 4e1f0b8ea522accae4860937c2fb3815281e8483

closes odoo/odoo#154081

X-original-commit: f8f8d2905db633cfaaa93b6cd163f4ab55dc4c8f
Signed-off-by: Pierre Paridans (app) <app@odoo.com>

addons/web/static/src/core/notifications/notification.scss

@@ -7,6 +7,7 @@
     z-index: $o-notification-zindex;
 
     .o_notification {
+        background-color: var(--Notification__background-color, #{$o-view-background-color}); // Needed to override the background in 'website.scss'
         border-left-width: $o-notification-border-left-width !important; // Overrides border-[x] utility classes
         box-shadow: $o-notification-shadow;
     }

addons/web/static/src/core/notifications/notification.xml

@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="web.NotificationWowl">
-        <div t-on-mouseenter="this.props.freeze" t-on-mouseleave="this.props.refresh" t-attf-class="o_notification {{props.className}} border border-{{props.type}} bg-view mb-2 position-relative"
+        <div t-on-mouseenter="this.props.freeze" t-on-mouseleave="this.props.refresh" t-attf-class="o_notification {{props.className}} border border-{{props.type}} mb-2 position-relative"
          role="alert" aria-live="assertive" aria-atomic="true">
             <strong t-if="props.title" t-attf-class="o_notification_title d-block text-{{props.type}} py-2 ps-3 pe-5" t-out="props.title"/>
             <button type="button" class="o_notification_close btn" aria-label="Close" t-on-click="props.close">

addons/website/static/src/scss/website.scss

@@ -1675,6 +1675,11 @@ input[value*="data-oe-translation-initial-sha"] {
     }
 }
 
+// Notification
+.o_notification_manager .o_notification {
+    --Notification__background-color: #{$body-bg};
+}
+
 //------------------------------------------------------------------------------
 // Website Animate
 //------------------------------------------------------------------------------