From 5c90983dd4c3ff96e5625ebda0054a1ac1256227 Mon Sep 17 00:00:00 2001
From: wyzula-jan <jan.wyzula@psi.ch>
Date: Tue, 2 Dec 2025 10:27:31 +0100
Subject: [PATCH] fix(notification_banner): better contrast in light mode

---
 .../notification_banner.py                    | 77 +++++++++++++++----
 1 file changed, 61 insertions(+), 16 deletions(-)

diff --git a/bec_widgets/widgets/containers/main_window/addons/notification_center/notification_banner.py b/bec_widgets/widgets/containers/main_window/addons/notification_center/notification_banner.py
index e048e048..d449d70f 100644
--- a/bec_widgets/widgets/containers/main_window/addons/notification_center/notification_banner.py
+++ b/bec_widgets/widgets/containers/main_window/addons/notification_center/notification_banner.py
@@ -14,7 +14,7 @@ from __future__ import annotations
 import json
 import sys
 from datetime import datetime
-from enum import Enum, auto
+from enum import Enum
 from typing import Literal
 from uuid import uuid4
 
@@ -28,6 +28,7 @@ from qtpy.QtWidgets import QApplication, QFrame, QMainWindow, QScrollArea, QWidg
 
 from bec_widgets import SafeProperty, SafeSlot
 from bec_widgets.utils import BECConnector
+from bec_widgets.utils.colors import apply_theme
 from bec_widgets.utils.widget_io import WidgetIO
 
 
@@ -53,10 +54,10 @@ DARK_PALETTE = {
 }
 
 LIGHT_PALETTE = {
-    "base": "#e9ecef",
-    "title": "#212121",
-    "body": "#424242",
-    "separator": "rgba(0,0,0,40)",
+    "base": "#f5f5f7",
+    "title": "#111827",
+    "body": "#374151",
+    "separator": "rgba(15,23,42,40)",
 }
 
 
@@ -108,6 +109,7 @@ class NotificationToast(QFrame):
         self._kind = kind if isinstance(kind, SeverityKind) else SeverityKind(kind)
         self._traceback = traceback
         self._accent_color = QtGui.QColor(SEVERITY[self._kind.value]["color"])
+        self._accent_alpha = 50
         self.setFrameShape(QtWidgets.QFrame.StyledPanel)
 
         self.created = datetime.now()
@@ -379,22 +381,31 @@ class NotificationToast(QFrame):
 
         # buttons (text colour)
         base_btn_color = palette["title"]
+        card_bg = QtGui.QColor(palette["base"])
+        # tune card background and hover contrast per theme
+        if theme == "light":
+            card_bg.setAlphaF(0.98)
+            btn_hover = self._accent_color.darker(105).name()
+        else:
+            card_bg.setAlphaF(0.88)
+            btn_hover = self._accent_color.name()
+
         self.setStyleSheet(
-            """
-            #NotificationToast {
-                background: transparent;
+            f"""
+            #NotificationToast {{
+                background: {card_bg.name(QtGui.QColor.HexArgb)};
                 border-radius: 12px;
-                color: %s;
-            }
-            #NotificationToast QPushButton {
+                color: {base_btn_color};
+                border: 1px solid {palette["separator"]};
+            }}
+            #NotificationToast QPushButton {{
                 background: transparent;
                 border: none;
-                color: %s;
+                color: {base_btn_color};
                 font-size: 14px;
-            }
-            #NotificationToast QPushButton:hover { color: %s; }
+            }}
+            #NotificationToast QPushButton:hover {{ color: {btn_hover}; }}
             """
-            % (base_btn_color, base_btn_color, self._accent_color.name())
         )
         # traceback panel colours
         trace_bg = "#1e1e1e" if theme == "dark" else "#f0f0f0"
@@ -407,6 +418,37 @@ class NotificationToast(QFrame):
             """
         )
 
+        # icon glyph vs badge background: darker badge, lighter icon in light mode
+        icon_fg = "#ffffff" if theme == "light" else self._accent_color.name()
+        icon = material_icon(
+            icon_name=SEVERITY[self._kind.value]["icon"],
+            color=icon_fg,
+            filled=True,
+            size=(24, 24),
+            convert_to_pixmap=False,
+        )
+        self._icon_btn.setIcon(icon)
+
+        badge_bg = QtGui.QColor(self._accent_color)
+        if theme == "light":
+            # darken and strengthen the badge on light cards for contrast
+            badge_bg = badge_bg.darker(115)
+            badge_bg.setAlphaF(0.70)
+        else:
+            badge_bg.setAlphaF(0.30)
+        icon_bg = badge_bg.name(QtGui.QColor.HexArgb)
+        self._icon_btn.setStyleSheet(
+            f"""
+            QToolButton {{
+                background: {icon_bg};
+                border: none;
+                border-radius: 20px;
+            }}
+            """
+        )
+
+        # stronger accent wash in light mode, slightly stronger in dark too
+        self._accent_alpha = 110 if theme == "light" else 60
         self.update()
 
     ########################################
@@ -488,7 +530,9 @@ class NotificationToast(QFrame):
         # accent gradient, fades to transparent
         grad = QtGui.QLinearGradient(0, 0, self.width() * 0.7, 0)
         accent = QtGui.QColor(self._accent_color)
-        accent.setAlpha(50)
+        if getattr(self, "_theme", "dark") == "light":
+            accent = accent.darker(115)
+        accent.setAlpha(getattr(self, "_accent_alpha", 50))
         grad.setColorAt(0.0, accent)
         fade = QtGui.QColor(self._accent_color)
         fade.setAlpha(0)
@@ -1223,6 +1267,7 @@ class DemoWindow(QMainWindow):  # pragma: no cover
 
 def main():  # pragma: no cover
     app = QtWidgets.QApplication(sys.argv)
+    apply_theme("dark")
     win = DemoWindow()
     win.show()
     sys.exit(app.exec())