From d6fa701543241964f588c75772ab1230d64dc116 Mon Sep 17 00:00:00 2001 From: David Heinemeier Hansson Date: Wed, 27 May 2026 14:23:13 +0200 Subject: [PATCH] Separate transparent bar foreground from panel text --- shell/Ui/Panel.qml | 2 ++ shell/Ui/WidgetButton.qml | 2 +- shell/plugins/bar/Bar.qml | 13 +++++++------ shell/plugins/bar/widgets/ActiveWindow.qml | 2 +- shell/plugins/bar/widgets/LockKeys.qml | 2 +- shell/plugins/bar/widgets/SystemStats.qml | 6 +++--- shell/plugins/panels/dropbox/Panel.qml | 3 ++- shell/plugins/panels/tailscale/Panel.qml | 3 ++- shell/plugins/services/media/BarWidget.qml | 4 ++-- 9 files changed, 21 insertions(+), 16 deletions(-) diff --git a/shell/Ui/Panel.qml b/shell/Ui/Panel.qml index 2fa3c70f..7b7dfdf8 100644 --- a/shell/Ui/Panel.qml +++ b/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() } diff --git a/shell/Ui/WidgetButton.qml b/shell/Ui/WidgetButton.qml index e929c220..951cb4af 100644 --- a/shell/Ui/WidgetButton.qml +++ b/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 diff --git a/shell/plugins/bar/Bar.qml b/shell/plugins/bar/Bar.qml index e4ebd7e1..4491268a 100644 --- a/shell/plugins/bar/Bar.qml +++ b/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 } diff --git a/shell/plugins/bar/widgets/ActiveWindow.qml b/shell/plugins/bar/widgets/ActiveWindow.qml index a6dcd469..97ccce8d 100644 --- a/shell/plugins/bar/widgets/ActiveWindow.qml +++ b/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 diff --git a/shell/plugins/bar/widgets/LockKeys.qml b/shell/plugins/bar/widgets/LockKeys.qml index 9ba5adfd..0c5f2bc9 100644 --- a/shell/plugins/bar/widgets/LockKeys.qml +++ b/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 } diff --git a/shell/plugins/bar/widgets/SystemStats.qml b/shell/plugins/bar/widgets/SystemStats.qml index 6a33630a..0d10d1ad 100644 --- a/shell/plugins/bar/widgets/SystemStats.qml +++ b/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 } diff --git a/shell/plugins/panels/dropbox/Panel.qml b/shell/plugins/panels/dropbox/Panel.qml index 598b7520..e5debe14 100644 --- a/shell/plugins/panels/dropbox/Panel.qml +++ b/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 } diff --git a/shell/plugins/panels/tailscale/Panel.qml b/shell/plugins/panels/tailscale/Panel.qml index fd36b239..c61c2000 100644 --- a/shell/plugins/panels/tailscale/Panel.qml +++ b/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 diff --git a/shell/plugins/services/media/BarWidget.qml b/shell/plugins/services/media/BarWidget.qml index 05341ce4..3766c0e4 100644 --- a/shell/plugins/services/media/BarWidget.qml +++ b/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