From 5fb4286d9ea129005d7e86e73548f0c797ec47f3 Mon Sep 17 00:00:00 2001
From: tibssy <norbert.tiborcz@gmail.com>
Date: Tue, 10 Mar 2026 02:39:46 +0000
Subject: [PATCH] feat(widgets): implement smart transparency for auxiliary
 components

---
 Commons/Color.qml          | 11 +++++++++++
 Widgets/NBox.qml           |  5 +----
 Widgets/NIconButton.qml    |  2 +-
 Widgets/NIconButtonHot.qml |  2 +-
 Widgets/NTabBar.qml        |  2 +-
 Widgets/NTabButton.qml     |  4 ++--
 6 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/Commons/Color.qml b/Commons/Color.qml
index a70cb302b..c870bb727 100644
--- a/Commons/Color.qml
+++ b/Commons/Color.qml
@@ -324,6 +324,17 @@ Singleton {
     }
   }
 
+  // Smart alpha calculation: automatically makes light mode more transparent
+  function smartAlpha(baseColor, minAlpha = 0.4) {
+    let baseOpacity = Settings.data.ui.panelBackgroundOpacity;
+    let targetOpacity = Settings.data.colorSchemes.darkMode ? baseOpacity : Math.pow(baseOpacity, 2);
+    let alpha = Math.max(targetOpacity, minAlpha);
+
+    // Combine with the base color's existing alpha
+    let resultAlpha = Math.max(0, baseColor.a - (1.0 - alpha));
+    return Qt.alpha(baseColor, resultAlpha);
+  }
+
   readonly property var colorKeyModel: [
     {
       "key": "none",
diff --git a/Widgets/NBox.qml b/Widgets/NBox.qml
index d33149fe4..16a010799 100644
--- a/Widgets/NBox.qml
+++ b/Widgets/NBox.qml
@@ -24,10 +24,7 @@ Item {
         return root.color;
       }
 
-      // Reuse panel opacity, but limit it to 0.4
-      let alpha = Math.max(Settings.data.ui.panelBackgroundOpacity, 0.4);
-      alpha = Math.max(0, root.color.a - (1.0 - alpha));
-      return Qt.alpha(root.color, alpha);
+      return Color.smartAlpha(root.color);
     }
   }
 }
diff --git a/Widgets/NIconButton.qml b/Widgets/NIconButton.qml
index 7a7fa61d1..de57588dd 100644
--- a/Widgets/NIconButton.qml
+++ b/Widgets/NIconButton.qml
@@ -17,7 +17,7 @@ Item {
   property bool handleWheel: false
   property bool hovering: false
 
-  property color colorBg: Color.mSurfaceVariant
+  property color colorBg: Color.smartAlpha(Color.mSurfaceVariant)
   property color colorFg: Color.mPrimary
   property color colorBgHover: Color.mHover
   property color colorFgHover: Color.mOnHover
diff --git a/Widgets/NIconButtonHot.qml b/Widgets/NIconButtonHot.qml
index 7eccbe1d7..6f3761dfe 100644
--- a/Widgets/NIconButtonHot.qml
+++ b/Widgets/NIconButtonHot.qml
@@ -22,7 +22,7 @@ Rectangle {
   property bool pressed: false
 
   // Color properties
-  property color colorBg: Color.mSurfaceVariant
+  property color colorBg: Color.smartAlpha(Color.mSurfaceVariant)
   property color colorFg: Color.mPrimary
   property color colorBgHover: Color.mHover
   property color colorFgHover: Color.mOnHover
diff --git a/Widgets/NTabBar.qml b/Widgets/NTabBar.qml
index 89921b606..96edc3779 100644
--- a/Widgets/NTabBar.qml
+++ b/Widgets/NTabBar.qml
@@ -68,7 +68,7 @@ Rectangle {
   // Styling
   implicitWidth: tabRow.implicitWidth + (margins * 2)
   implicitHeight: tabHeight + (margins * 2)
-  color: Color.mSurfaceVariant
+  color: Color.smartAlpha(Color.mSurfaceVariant)
   radius: Style.iRadiusM
 
   RowLayout {
diff --git a/Widgets/NTabButton.qml b/Widgets/NTabButton.qml
index e0cf4a233..3e7b5db2a 100644
--- a/Widgets/NTabButton.qml
+++ b/Widgets/NTabButton.qml
@@ -33,8 +33,8 @@ Rectangle {
   topRightRadius: isLast ? Style.iRadiusM : Style.iRadiusXXXS
   bottomRightRadius: isLast ? Style.iRadiusM : Style.iRadiusXXXS
 
-  color: root.isHovered ? Color.mHover : (root.checked ? Color.mPrimary : Color.mSurface)
-  border.color: Color.mOutline
+  color: root.isHovered ? Color.mHover : (root.checked ? Color.mPrimary : "transparent")
+  border.color: root.checked ? Color.mPrimary : Color.mOutline
   border.width: Style.borderS
 
   Behavior on color {