bar tooltips: use correct color, add subhead text

.config/quickshell/ii/modules/bar/BatteryPopup.qml

@@ -10,14 +10,37 @@ Rectangle {
     readonly property real margin: 10
     implicitWidth: columnLayout.implicitWidth + margin * 2
     implicitHeight: columnLayout.implicitHeight + margin * 2
-    color: Appearance.colors.colTooltip
+    color: Appearance.colors.colSurfaceContainer
     radius: Appearance.rounding.small
     clip: true
 
     ColumnLayout {
         id: columnLayout
         anchors.centerIn: parent
-        spacing: 8
+        spacing: 4
+
+        // Header
+        RowLayout {
+            id: header
+            spacing: 5
+
+            MaterialSymbol {
+                fill: 0
+                font.weight: Font.Medium
+                text: "battery_android_full"
+                iconSize: Appearance.font.pixelSize.large
+                color: Appearance.colors.colOnSurfaceVariant
+            }
+
+            StyledText {
+                text: "Battery"
+                font {
+                    weight: Font.Medium
+                    pixelSize: Appearance.font.pixelSize.normal
+                }
+                color: Appearance.colors.colOnSurfaceVariant
+            }
+        }
 
         // This row is hidden when the battery is full.
         RowLayout {
@@ -30,14 +53,25 @@ Rectangle {
             }
             visible: rowVisible
             opacity: rowVisible ? 1 : 0
-            Behavior on opacity { NumberAnimation { duration: 500 } }
+            Behavior on opacity {
+                NumberAnimation {
+                    duration: 500
+                }
+            }
 
-            MaterialSymbol { text: "schedule"; color: Appearance.colors.colOnTooltip }
+            MaterialSymbol {
-            StyledText { text: Battery.isCharging ? Translation.tr("Time to full:") : Translation.tr("Time to empty:"); color: Appearance.colors.colOnTooltip }
+                text: "schedule"
+                color: Appearance.colors.colOnSurfaceVariant
+                iconSize: Appearance.font.pixelSize.large
+            }
+            StyledText {
+                text: Battery.isCharging ? Translation.tr("Time to full:") : Translation.tr("Time to empty:")
+                color: Appearance.colors.colOnSurfaceVariant
+            }
             StyledText {
                 Layout.fillWidth: true
                 horizontalAlignment: Text.AlignRight
-                color: Appearance.colors.colOnTooltip
+                color: Appearance.colors.colOnSurfaceVariant
                 text: {
                     function formatTime(seconds) {
                         var h = Math.floor(seconds / 3600);
@@ -62,27 +96,17 @@ Rectangle {
             property bool rowVisible: !(Battery.chargeState != 4 && Battery.energyRate == 0)
             visible: rowVisible
             opacity: rowVisible ? 1 : 0
-            Behavior on opacity { NumberAnimation { duration: 500 } }
+            Behavior on opacity {
-
+                NumberAnimation {
-            MaterialSymbol {
+                    duration: 500
-                text: {
-                    if (Battery.isCharging) {
-                        return "power";
-                    } else if (Battery.percentage >= 0.8) {
-                        return "battery_full";
-                    } else if (Battery.percentage >= 0.6) {
-                        return "battery_5_bar";
-                    } else if (Battery.percentage >= 0.4) {
-                        return "battery_4_bar";
-                    } else if (Battery.percentage >= 0.2) {
-                        return "battery_2_bar";
-                    } else {
-                        return "battery_0_bar";
-                    }
                 }
-                color: Appearance.colors.colOnTooltip
             }
 
+            MaterialSymbol {
+                text: "bolt"
+                color: Appearance.colors.colOnSurfaceVariant
+                iconSize: Appearance.font.pixelSize.large
+            }
 
             StyledText {
                 text: {
@@ -94,13 +118,13 @@ Rectangle {
                         return Translation.tr("Discharging:");
                     }
                 }
-                color: Appearance.colors.colOnTooltip
+                color: Appearance.colors.colOnSurfaceVariant
             }
 
             StyledText {
                 Layout.fillWidth: true
                 horizontalAlignment: Text.AlignRight
-                color: Appearance.colors.colOnTooltip
+                color: Appearance.colors.colOnSurfaceVariant
                 text: {
                     if (Battery.chargeState == 4) {
                         return "";
@@ -110,6 +134,5 @@ Rectangle {
                 }
             }
         }
-
     }
 }

.config/quickshell/ii/modules/bar/ClockWidget.qml

@@ -39,80 +39,6 @@ Item {
     property string formattedUptime: DateTime.uptime
     property string todosSection: getUpcomingTodos()
 
-    MouseArea {
-        id: mouseArea
-        anchors.fill: parent
-        hoverEnabled: true
-        acceptedButtons: Qt.NoButton
-    }
-
-    StyledPopup {
-        hoverTarget: mouseArea
-        contentComponent: Rectangle {
-            id: datePopup
-            readonly property real margin: 12
-            implicitWidth: columnLayout.implicitWidth + margin * 2
-            implicitHeight: columnLayout.implicitHeight + margin * 2
-            color: Appearance.colors.colTooltip
-            radius: Appearance.rounding.small
-            clip: true
-
-            ColumnLayout {
-                id: columnLayout
-                anchors.centerIn: parent
-                spacing: 8
-
-                // Date + Time row
-                RowLayout {
-                    spacing: 5
-                    Layout.fillWidth: true
-                    StyledText {
-                        Layout.fillWidth: true
-                        horizontalAlignment: Text.AlignLeft
-                        color: Appearance.colors.colOnTooltip
-                        text: `${root.formattedDate} • ${root.formattedTime}`
-                    }
-                }
-
-                // Uptime row
-                RowLayout {
-                    spacing: 5
-                    Layout.fillWidth: true
-                    MaterialSymbol { text: "timelapse"; color: Appearance.colors.colOnTooltip }
-                    StyledText { text: Translation.tr("System uptime:"); color: Appearance.colors.colOnTooltip }
-                    StyledText {
-                        Layout.fillWidth: true
-                        horizontalAlignment: Text.AlignRight
-                        color: Appearance.colors.colOnTooltip
-                        text: root.formattedUptime
-                    }
-                }
-
-                // Tasks
-                ColumnLayout {
-                    spacing: 2
-                    Layout.fillWidth: true
-
-                    RowLayout {
-                        spacing: 5
-                        Layout.fillWidth: true
-                        MaterialSymbol { text: "checklist"; color: Appearance.colors.colOnTooltip }
-                        StyledText { text: Translation.tr("To Do:"); color: Appearance.colors.colOnTooltip }
-                    }
-
-                    StyledText {
-                        Layout.fillWidth: true
-                        topPadding: 5
-                        horizontalAlignment: Text.AlignLeft
-                        wrapMode: Text.Wrap
-                        color: Appearance.colors.colOnTooltip
-                        text: root.todosSection
-                    }
-                }
-            }
-        }
-    }
-
     RowLayout {
         id: rowLayout
         anchors.centerIn: parent
@@ -140,4 +66,84 @@ Item {
 
     }
 
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        hoverEnabled: true
+        acceptedButtons: Qt.NoButton
+    }
+
+    StyledPopup {
+        hoverTarget: mouseArea
+        contentComponent: Rectangle {
+            id: datePopup
+            readonly property real margin: 12
+            implicitWidth: columnLayout.implicitWidth + margin * 2
+            implicitHeight: columnLayout.implicitHeight + margin * 2
+            color: Appearance.colors.colSurfaceContainer
+            radius: Appearance.rounding.small
+            clip: true
+
+            ColumnLayout {
+                id: columnLayout
+                anchors.centerIn: parent
+                spacing: 4
+
+                // Date + Time row
+                RowLayout {
+                    spacing: 5
+
+                    MaterialSymbol {
+                        fill: 0
+                        font.weight: Font.Medium
+                        text: "calendar_month"
+                        iconSize: Appearance.font.pixelSize.large
+                        color: Appearance.colors.colOnSurfaceVariant
+                    }
+                    StyledText {
+                        horizontalAlignment: Text.AlignLeft
+                        color: Appearance.colors.colOnSurfaceVariant
+                        text: `${root.formattedDate} • ${root.formattedTime}`
+                        font.weight: Font.Medium
+                    }
+                }
+
+                // Uptime row
+                RowLayout {
+                    spacing: 5
+                    Layout.fillWidth: true
+                    MaterialSymbol { text: "timelapse"; color: Appearance.colors.colOnSurfaceVariant; font.pixelSize: Appearance.font.pixelSize.large }
+                    StyledText { text: Translation.tr("System uptime:"); color: Appearance.colors.colOnSurfaceVariant }
+                    StyledText {
+                        Layout.fillWidth: true
+                        horizontalAlignment: Text.AlignRight
+                        color: Appearance.colors.colOnSurfaceVariant
+                        text: root.formattedUptime
+                    }
+                }
+
+                // Tasks
+                ColumnLayout {
+                    spacing: 0
+                    Layout.fillWidth: true
+
+                    RowLayout {
+                        spacing: 4
+                        Layout.fillWidth: true
+                        MaterialSymbol { text: "checklist"; color: Appearance.colors.colOnSurfaceVariant; font.pixelSize: Appearance.font.pixelSize.large }
+                        StyledText { text: Translation.tr("To Do:"); color: Appearance.colors.colOnSurfaceVariant }
+                    }
+
+                    StyledText {
+                        Layout.fillWidth: true
+                        horizontalAlignment: Text.AlignLeft
+                        wrapMode: Text.Wrap
+                        color: Appearance.colors.colOnSurfaceVariant
+                        text: root.todosSection
+                    }
+                }
+            }
+        }
+    }
+
 }

.config/quickshell/ii/modules/bar/Resource.qml

@@ -10,6 +10,9 @@ Item {
     id: root
     required property string iconName
     required property double percentage
+    property var tooltipData: [{ icon: "info", label: "System resource", value: "" }]
+    property var tooltipHeaderIcon
+    property var tooltipHeaderText
     property bool shown: true
     clip: true
     visible: width > 0 && height > 0
@@ -21,95 +24,6 @@ Item {
         return (kb / (1024 * 1024)).toFixed(1) + " GB"
     }
 
-    // Generate tooltip content based on resource type
-    property var tooltipData: {
-        switch(iconName) {
-            case "memory":
-                return [
-                    { icon: "memory", label: Translation.tr("Memory Usage"), value: "" },
-                    { icon: "clock_loader_60", label: Translation.tr("Used:"), value: formatKB(ResourceUsage.memoryUsed) },
-                    { icon: "check_circle", label: Translation.tr("Free:"), value: formatKB(ResourceUsage.memoryFree) },
-                    { icon: "empty_dashboard", label: Translation.tr("Total:"), value: formatKB(ResourceUsage.memoryTotal) },
-                ]
-            case "swap_horiz":
-                return ResourceUsage.swapTotal > 0 ?
-                [
-                    { icon: "swap_horiz", label: Translation.tr("Swap Usage"), value: "" },
-                    { icon: "clock_loader_60", label: Translation.tr("Used:"), value: formatKB(ResourceUsage.swapUsed) },
-                    { icon: "check_circle", label: Translation.tr("Free:"), value: formatKB(ResourceUsage.swapFree) },
-                    { icon: "empty_dashboard", label: Translation.tr("Total:"), value: formatKB(ResourceUsage.swapTotal) },
-                ] :
-                [
-                    { icon: "swap_horiz", label: Translation.tr("Swap:"), value: Translation.tr("Not configured") }
-                ]
-            case "settings_slow_motion":
-                return [
-                    { icon: "settings_slow_motion", label: Translation.tr("CPU Usage"), value: "" },
-                    { icon: "bolt", label: Translation.tr("Load:"), value: (ResourceUsage.cpuUsage > 0.8 ?
-                        Translation.tr("High") :
-                        ResourceUsage.cpuUsage > 0.4 ? Translation.tr("Medium") : Translation.tr("Low"))
-                        + ` (${Math.round(ResourceUsage.cpuUsage * 100)}%)`
-                    }
-                ]
-            default:
-                return [
-                    { icon: "info", label: Translation.tr("System Resource"), value: "" }
-                ]
-        }
-    }
-
-    MouseArea {
-        id: mouseArea
-        anchors.fill: parent
-        hoverEnabled: true
-        acceptedButtons: Qt.NoButton
-        enabled: resourceRowLayout.x >= 0 && root.width > 0 && root.visible
-    }
-
-    StyledPopup {
-        hoverTarget: mouseArea
-        contentComponent: Rectangle {
-            id: resourcePopup
-            readonly property real margin: 10
-            implicitWidth: columnLayout.implicitWidth + margin * 2
-            implicitHeight: columnLayout.implicitHeight + margin * 2
-            color: Appearance.colors.colTooltip
-            radius: Appearance.rounding.small
-            clip: true
-
-            ColumnLayout {
-                id: columnLayout
-                anchors.centerIn: parent
-                spacing: 6
-
-                Repeater {
-                    model: root.tooltipData
-                    delegate: RowLayout {
-                        spacing: 5
-                        Layout.fillWidth: true
-
-                        MaterialSymbol {
-                            text: modelData.icon
-                            color: Appearance.colors.colOnTooltip
-                        }
-                        StyledText {
-                            text: modelData.label
-                            color: Appearance.colors.colOnTooltip
-                        }
-                        StyledText {
-                            Layout.fillWidth: true
-                            horizontalAlignment: Text.AlignRight
-                            visible: modelData.value !== ""
-                            color: Appearance.colors.colOnTooltip
-                            text: modelData.value
-                        }
-                    }
-                }
-
-            }
-        }
-    }
-
     RowLayout {
         spacing: 4
         id: resourceRowLayout
@@ -146,6 +60,83 @@ Item {
 
     }
 
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        hoverEnabled: true
+        acceptedButtons: Qt.NoButton
+        enabled: resourceRowLayout.x >= 0 && root.width > 0 && root.visible
+    }
+
+    StyledPopup {
+        hoverTarget: mouseArea
+        contentComponent: Rectangle {
+            id: resourcePopup
+            readonly property real margin: 10
+            implicitWidth: columnLayout.implicitWidth + margin * 2
+            implicitHeight: columnLayout.implicitHeight + margin * 2
+            color: Appearance.colors.colSurfaceContainer
+            radius: Appearance.rounding.small
+            clip: true
+
+            ColumnLayout {
+                id: columnLayout
+                anchors.centerIn: parent
+                spacing: 4
+
+                // Header
+                RowLayout {
+                    id: header
+                    spacing: 5
+
+                    MaterialSymbol {
+                        fill: 0
+                        font.weight: Font.Medium
+                        text: root.tooltipHeaderIcon
+                        iconSize: Appearance.font.pixelSize.large
+                        color: Appearance.colors.colOnSurfaceVariant
+                    }
+
+                    StyledText {
+                        text: root.tooltipHeaderText
+                        font {
+                            weight: Font.Medium
+                            pixelSize: Appearance.font.pixelSize.normal
+                        }
+                        color: Appearance.colors.colOnSurfaceVariant
+                    }
+                }
+
+                // Info rows
+                Repeater {
+                    model: root.tooltipData
+                    delegate: RowLayout {
+                        spacing: 5
+                        Layout.fillWidth: true
+
+                        MaterialSymbol {
+                            text: modelData.icon
+                            color: Appearance.colors.colOnSurfaceVariant
+                            iconSize: Appearance.font.pixelSize.large
+                        }
+                        StyledText {
+                            text: modelData.label
+                            color: Appearance.colors.colOnSurfaceVariant
+                        }
+                        StyledText {
+                            Layout.fillWidth: true
+                            horizontalAlignment: Text.AlignRight
+                            visible: modelData.value !== ""
+                            color: Appearance.colors.colOnSurfaceVariant
+                            text: modelData.value
+                        }
+                    }
+                }
+
+            }
+        }
+    }
+
     Behavior on implicitWidth {
         NumberAnimation {
             duration: Appearance.animation.elementMove.duration

.config/quickshell/ii/modules/bar/Resources.qml

@@ -1,6 +1,7 @@
 import qs.modules.common
 import qs.modules.common.widgets
 import qs.services
+import qs
 import QtQuick
 import QtQuick.Layouts
 
@@ -22,6 +23,14 @@ Item {
         Resource {
             iconName: "memory"
             percentage: ResourceUsage.memoryUsedPercentage
+
+            tooltipHeaderIcon: "memory"
+            tooltipHeaderText: Translation.tr("Memory usage")
+            tooltipData: [
+                { icon: "clock_loader_60", label: Translation.tr("Used:"), value: formatKB(ResourceUsage.memoryUsed) },
+                { icon: "check_circle", label: Translation.tr("Free:"), value: formatKB(ResourceUsage.memoryFree) },
+                { icon: "empty_dashboard", label: Translation.tr("Total:"), value: formatKB(ResourceUsage.memoryTotal) },
+            ]
         }
 
         Resource {
@@ -31,6 +40,16 @@ Item {
                 (MprisController.activePlayer?.trackTitle == null) ||
                 root.alwaysShowAllResources
             Layout.leftMargin: shown ? 4 : 0
+
+            tooltipHeaderIcon: "swap_horiz"
+            tooltipHeaderText: Translation.tr("Swap usage")
+            tooltipData: ResourceUsage.swapTotal > 0 ? [
+                { icon: "clock_loader_60", label: Translation.tr("Used:"), value: formatKB(ResourceUsage.swapUsed) },
+                { icon: "check_circle", label: Translation.tr("Free:"), value: formatKB(ResourceUsage.swapFree) },
+                { icon: "empty_dashboard", label: Translation.tr("Total:"), value: formatKB(ResourceUsage.swapTotal) },
+            ] : [
+                { icon: "swap_horiz", label: Translation.tr("Swap:"), value: Translation.tr("Not configured") }
+            ]
         }
 
         Resource {
@@ -40,6 +59,16 @@ Item {
                 !(MprisController.activePlayer?.trackTitle?.length > 0) ||
                 root.alwaysShowAllResources
             Layout.leftMargin: shown ? 4 : 0
+
+            tooltipHeaderIcon: "settings_slow_motion"
+            tooltipHeaderText: Translation.tr("CPU usage")
+            tooltipData: [
+                { icon: "bolt", label: Translation.tr("Load:"), value: (ResourceUsage.cpuUsage > 0.8 ?
+                    Translation.tr("High") :
+                    ResourceUsage.cpuUsage > 0.4 ? Translation.tr("Medium") : Translation.tr("Low"))
+                    + ` (${Math.round(ResourceUsage.cpuUsage * 100)}%)`
+                }
+            ]
         }
 
     }

.config/quickshell/ii/modules/bar/weather/WeatherCard.qml

@@ -7,7 +7,7 @@ import qs.modules.common.widgets
 Rectangle {
     id: root
     radius: Appearance.rounding.small
-    color: Appearance.colors.colTooltip
+    color: Appearance.colors.colSurfaceContainerHigh
     implicitWidth: columnLayout.implicitWidth + 14 * 2
     implicitHeight: columnLayout.implicitHeight + 14 * 2
     Layout.fillWidth: parent
@@ -26,19 +26,19 @@ Rectangle {
                 id: symbol
                 fill: 0
                 iconSize: Appearance.font.pixelSize.normal
-                color: Appearance.colors.colOnTooltip
+                color: Appearance.colors.colOnSurfaceVariant
             }
             StyledText {
                 id: title
                 font.pixelSize: Appearance.font.pixelSize.smaller
-                color: Appearance.colors.colOnTooltip
+                color: Appearance.colors.colOnSurfaceVariant
             }
         }
         StyledText {
             id: value
             Layout.alignment: Qt.AlignHCenter
             font.pixelSize: Appearance.font.pixelSize.small
-            color: Appearance.colors.colOnTooltip
+            color: Appearance.colors.colOnSurfaceVariant
         }
     }
 }

.config/quickshell/ii/modules/bar/weather/WeatherPopup.qml

@@ -11,7 +11,7 @@ Rectangle {
     readonly property real margin: 10
     implicitWidth: columnLayout.implicitWidth + margin * 2
     implicitHeight: columnLayout.implicitHeight + margin * 2
-    color: Appearance.colors.colTooltip
+    color: Appearance.colors.colSurfaceContainer
     radius: Appearance.rounding.small
     clip: true
 
@@ -26,20 +26,23 @@ Rectangle {
         RowLayout {
             id: header
             spacing: 5
-            Layout.fillWidth: parent
             Layout.alignment: Qt.AlignHCenter
+
             MaterialSymbol {
                 fill: 0
+                font.weight: Font.Medium
                 text: "location_on"
-                iconSize: Appearance.font.pixelSize.huge
+                iconSize: Appearance.font.pixelSize.large
-                color: Appearance.colors.colOnTooltip
+                color: Appearance.colors.colOnSurfaceVariant
             }
 
             StyledText {
                 text: Weather.data.city
-                font.pixelSize: Appearance.font.pixelSize.title
+                font {
-                font.family: Appearance.font.family.title
+                    weight: Font.Medium
-                color: Appearance.colors.colOnTooltip
+                    pixelSize: Appearance.font.pixelSize.normal
+                }
+                color: Appearance.colors.colOnSurfaceVariant
             }
         }
 

.config/quickshell/ii/modules/common/Appearance.qml

@@ -141,6 +141,8 @@ Singleton {
         property color colSurfaceContainerHighest: ColorUtils.transparentize(m3colors.m3surfaceContainerHighest, root.contentTransparency)
         property color colSurfaceContainerHighestHover: ColorUtils.mix(m3colors.m3surfaceContainerHighest, m3colors.m3onSurface, 0.95)
         property color colSurfaceContainerHighestActive: ColorUtils.mix(m3colors.m3surfaceContainerHighest, m3colors.m3onSurface, 0.85)
+        property color colOnSurface: m3colors.m3onSurface
+        property color colOnSurfaceVariant: m3colors.m3onSurfaceVariant
         property color colTooltip: m3colors.m3inverseSurface
         property color colOnTooltip: m3colors.m3inverseOnSurface
         property color colScrim: ColorUtils.transparentize(m3colors.m3scrim, 0.5)