Separate transparent bar foreground from panel text

shell/Ui/Panel.qml

@@ -1,5 +1,6 @@
 import QtQuick
 import Quickshell.Io
+import qs.Commons
 
 // Base item for plugin popup widgets. Many first-party plugins expose a bar
 // button plus a popup from one QML entry point; this base owns the shared
@@ -18,6 +19,7 @@ Item {
   property bool popoutSwitchClosing: false
 
   readonly property bool opened: panelController.open
+  readonly property color barForeground: bar ? bar.barForeground : Color.foreground
 
   function open() { panelController.show() }
   function close() { panelController.hide() }

shell/Ui/WidgetButton.qml

@@ -8,7 +8,7 @@ Item {
   property string text: ""
   property string fontFamily: bar ? bar.fontFamily : Style.font.family
   property real fontSize: Style.font.body
-  property color foreground: bar ? bar.foreground : Color.foreground
+  property color foreground: bar ? bar.barForeground : Color.foreground
   property color activeColor: bar ? bar.urgent : Color.urgent
   property bool active: false
   property real horizontalMargin: 8.5

shell/plugins/bar/Bar.qml

@@ -51,12 +51,13 @@ Item {
   property color themeForeground: Color.bar.text
   property color themeContrastForeground: Color.background
   property color transparentForeground: Color.bar.text
-  property color foreground: useTransparentForeground ? transparentForeground : themeForeground
+  property color foreground: themeForeground
+  property color barForeground: useTransparentForeground ? transparentForeground : themeForeground
   property bool foregroundAnimationEnabled: true
   property color background: Color.bar.background
   property color urgent: Color.bar.active
 
-  Behavior on foreground { enabled: root.foregroundAnimationEnabled; ColorAnimation { duration: 420; easing.type: Easing.InOutCubic } }
+  Behavior on barForeground { enabled: root.foregroundAnimationEnabled; ColorAnimation { duration: 420; easing.type: Easing.InOutCubic } }
   Behavior on background { ColorAnimation { duration: 420; easing.type: Easing.InOutCubic } }
   Behavior on urgent { ColorAnimation { duration: 420; easing.type: Easing.InOutCubic } }
   property var tooltipTarget: null
@@ -1026,7 +1027,7 @@ Item {
         bottom: parent.bottom
       }
       width: 2
-      color: root.foreground
+      color: root.barForeground
       opacity: 0.9
     }
 
@@ -1038,7 +1039,7 @@ Item {
         bottom: parent.bottom
       }
       width: 2
-      color: root.foreground
+      color: root.barForeground
       opacity: 0.9
     }
 
@@ -1050,7 +1051,7 @@ Item {
         top: parent.top
       }
       height: 2
-      color: root.foreground
+      color: root.barForeground
       opacity: 0.9
     }
 
@@ -1062,7 +1063,7 @@ Item {
         bottom: parent.bottom
       }
       height: 2
-      color: root.foreground
+      color: root.barForeground
       opacity: 0.9
     }
 

shell/plugins/bar/widgets/ActiveWindow.qml

@@ -33,7 +33,7 @@ BarWidget {
       anchors.left: parent.left
       width: parent.width
       text: root.title
-      color: root.bar ? root.bar.foreground : Color.foreground
+      color: root.bar ? root.bar.barForeground : Color.foreground
       font.family: root.bar ? root.bar.fontFamily : Style.font.family
       font.pixelSize: Style.font.body
       elide: Text.ElideRight

shell/plugins/bar/widgets/LockKeys.qml

@@ -87,7 +87,7 @@ BarWidget {
     property bool active: false
 
     text: glyph
-    color: active ? (root.bar ? root.bar.foreground : Color.foreground) : Qt.rgba(0.7, 0.7, 0.7, 0.3)
+    color: active ? (root.bar ? root.bar.barForeground : Color.foreground) : Qt.rgba(0.7, 0.7, 0.7, 0.3)
     font.family: root.bar ? root.bar.fontFamily : Style.font.family
     font.pixelSize: Style.font.bodySmall
   }

shell/plugins/bar/widgets/SystemStats.qml

@@ -89,7 +89,7 @@ BarWidget {
     onTriggered: root.refresh()
   }
 
-  readonly property color statColor: bar ? bar.foreground : Color.foreground
+  readonly property color statColor: bar ? bar.barForeground : Color.foreground
 
   implicitWidth: button.implicitWidth
   implicitHeight: button.implicitHeight
@@ -167,7 +167,7 @@ BarWidget {
         title: "CPU"
         value: Math.round(root.cpuPercent) + "%"
         history: root.cpuHistory
-        barFg: root.statColor
+        barFg: root.bar.foreground
         fontFamily: root.bar.fontFamily
         width: parent.width
       }
@@ -176,7 +176,7 @@ BarWidget {
         title: "Memory"
         value: Math.round(root.memPercent) + "%"
         history: root.memHistory
-        barFg: root.statColor
+        barFg: root.bar.foreground
         fontFamily: root.bar.fontFamily
         width: parent.width
       }

shell/plugins/panels/dropbox/Panel.qml

@@ -36,6 +36,7 @@ Panel {
   readonly property color dim: Qt.darker(foreground, 1.55)
   readonly property string fontFamily: bar ? bar.fontFamily : Style.font.family
   readonly property color iconColor: dropbox.authenticated ? foreground : dim
+  readonly property color barIconColor: dropbox.authenticated ? barForeground : Qt.darker(barForeground, 1.55)
 
   function ensureCursor() {
     if (!dropbox.authenticated) {
@@ -168,7 +169,7 @@ Panel {
     DropboxIcon {
       anchors.centerIn: parent
       iconSize: Style.space(12)
-      color: root.iconColor
+      color: root.barIconColor
       opacity: dropbox.authenticated ? 1.0 : 0.6
     }
 

shell/plugins/panels/tailscale/Panel.qml

@@ -43,6 +43,7 @@ Panel {
   readonly property var exitNodes: tailscale.exitNodes
   readonly property bool showExitNodes: tailscale.running && exitNodes.length > 0
   readonly property color iconColor: tailscale.running ? foreground : dim
+  readonly property color barIconColor: tailscale.running ? barForeground : Qt.darker(barForeground, 1.55)
   readonly property color hoverFill: bar ? Style.hoverFillFor(bar.foreground, Color.accent) : "transparent"
   readonly property color selectedFill: bar ? Style.selectedFillFor(bar.foreground, Color.accent) : "transparent"
 
@@ -260,7 +261,7 @@ Panel {
       anchors.centerIn: parent
       anchors.verticalCenterOffset: -Style.space(1)
       iconSize: Style.space(12) * 0.85
-      color: root.iconColor
+      color: root.barIconColor
       badgeColor: root.urgent
       crossed: !tailscale.running && !tailscale.needsLogin
       warning: tailscale.needsLogin

shell/plugins/services/media/BarWidget.qml

@@ -34,7 +34,7 @@ BarWidget {
       id: glyph
       anchors.verticalCenter: parent.verticalCenter
       text: root.playIcon
-      color: activePlayer && activePlayer.isPlaying ? root.bar.foreground : Qt.darker(root.bar.foreground, 1.5)
+      color: activePlayer && activePlayer.isPlaying ? root.bar.barForeground : Qt.darker(root.bar.barForeground, 1.5)
       font.family: root.bar.fontFamily
       font.pixelSize: Style.font.body
       Behavior on color {
@@ -54,7 +54,7 @@ BarWidget {
       Text {
         id: labelText
         text: root.title + (root.artist ? "  ·  " + root.artist : "")
-        color: root.bar.foreground
+        color: root.bar.barForeground
         font.family: root.bar.fontFamily
         font.pixelSize: Style.font.body
         anchors.verticalCenter: parent.verticalCenter