feat(widgets): implement smart transparency for auxiliary components

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",

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);
     }
   }
 }

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

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

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 {

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 {