NPill + Clock color uniformisation

Modules/Bar/Widgets/Battery.qml

@@ -85,12 +85,8 @@ Item {
     id: pill
 
     rightOpen: BarWidgetRegistry.getNPillDirection(root)
-    icon: testMode ? BatteryService.getIcon(testPercent, testCharging, true) : BatteryService.getIcon(percent,
+    icon: testMode ? BatteryService.getIcon(testPercent, testCharging, true) : BatteryService.getIcon(percent, charging, isReady)
-                                                                                                      charging, isReady)
     text: (isReady || testMode) ? Math.round(percent) + "%" : "-"
-    textColor: charging ? Color.mPrimary : Color.mOnSurface
-    iconCircleColor: Color.mPrimary
-    collapsedIconColor: Color.mOnSurface
     autoHide: false
     forceOpen: isReady && (testMode || battery.isLaptopBattery) && alwaysShowPercentage
     disableOpen: (!isReady || (!testMode && !battery.isLaptopBattery))

Modules/Bar/Widgets/Brightness.qml

@@ -79,8 +79,6 @@ Item {
 
     rightOpen: BarWidgetRegistry.getNPillDirection(root)
     icon: getIcon()
-    iconCircleColor: Color.mPrimary
-    collapsedIconColor: Color.mOnSurface
     autoHide: false // Important to be false so we can hover as long as we want
     text: {
       var monitor = getMonitor()

Modules/Bar/Widgets/Clock.qml

@@ -60,6 +60,7 @@ Rectangle {
     anchors.centerIn: parent
     font.pointSize: Style.fontSizeS * scaling
     font.weight: Style.fontWeightBold
+    color: Color.mPrimary
   }
 
   NTooltip {

Modules/Bar/Widgets/KeyboardLayout.qml

@@ -25,8 +25,6 @@ Item {
     anchors.verticalCenter: parent.verticalCenter
     rightOpen: BarWidgetRegistry.getNPillDirection(root)
     icon: "keyboard"
-    iconCircleColor: Color.mPrimary
-    collapsedIconColor: Color.mOnSurface
     autoHide: false // Important to be false so we can hover as long as we want
     text: currentLayout
     tooltipText: "Keyboard layout: " + currentLayout

Modules/Bar/Widgets/Microphone.qml

@@ -92,8 +92,6 @@ Item {
 
     rightOpen: BarWidgetRegistry.getNPillDirection(root)
     icon: getIcon()
-    iconCircleColor: Color.mPrimary
-    collapsedIconColor: Color.mOnSurface
     autoHide: false // Important to be false so we can hover as long as we want
     text: Math.floor(AudioService.inputVolume * 100) + "%"
     forceOpen: alwaysShowPercentage

Modules/Bar/Widgets/Volume.qml

@@ -77,8 +77,6 @@ Item {
 
     rightOpen: BarWidgetRegistry.getNPillDirection(root)
     icon: getIcon()
-    iconCircleColor: Color.mPrimary
-    collapsedIconColor: Color.mOnSurface
     autoHide: false // Important to be false so we can hover as long as we want
     text: Math.floor(AudioService.volume * 100) + "%"
     forceOpen: alwaysShowPercentage

Widgets/NPill.qml

@@ -9,20 +9,15 @@ Item {
   property string icon: ""
   property string text: ""
   property string tooltipText: ""
-  property color pillColor: Color.mSurfaceVariant
-  property color textColor: Color.mOnSurface
-  property color iconCircleColor: Color.mPrimary
-  property color iconTextColor: Color.mSurface
-  property color collapsedIconColor: Color.mOnSurface
-
   property real sizeRatio: 0.8
   property bool autoHide: false
   property bool forceOpen: false
   property bool disableOpen: false
   property bool rightOpen: false
+  property bool hovered: false
 
   // Effective shown state (true if hovered/animated open or forced)
-  readonly property bool effectiveShown: forceOpen || showPill
+  readonly property bool revealed: forceOpen || showPill
 
   signal shown
   signal hidden
@@ -49,14 +44,14 @@ Item {
 
   Rectangle {
     id: pill
-    width: effectiveShown ? maxPillWidth : 1
+    width: revealed ? maxPillWidth : 1
     height: pillHeight
 
     x: rightOpen ? (iconCircle.x + iconCircle.width / 2) : // Opens right
                    (iconCircle.x + iconCircle.width / 2) - width // Opens left
 
-    opacity: effectiveShown ? Style.opacityFull : Style.opacityNone
+    opacity: revealed ? Style.opacityFull : Style.opacityNone
-    color: pillColor
+    color: Color.mSurfaceVariant
 
     topLeftRadius: rightOpen ? 0 : pillHeight * 0.5
     bottomLeftRadius: rightOpen ? 0 : pillHeight * 0.5
@@ -76,8 +71,8 @@ Item {
       text: root.text
       font.pointSize: Style.fontSizeXS * scaling
       font.weight: Style.fontWeightBold
-      color: textColor
+      color: Color.mPrimary
-      visible: effectiveShown
+      visible: revealed
     }
 
     Behavior on width {
@@ -101,8 +96,7 @@ Item {
     width: iconSize
     height: iconSize
     radius: width * 0.5
-    // When forced shown, match pill background; otherwise use accent when hovered
+    color: hovered && !forceOpen? Color.mPrimary : Color.mSurfaceVariant
-    color: forceOpen ? Color.mSurface : (showPill ? iconCircleColor : Color.mSurfaceVariant)
     anchors.verticalCenter: parent.verticalCenter
 
     x: rightOpen ? 0 : (parent.width - width)
@@ -117,9 +111,8 @@ Item {
     NIcon {
       icon: root.icon
       font.pointSize: Style.fontSizeM * scaling
-      // When forced shown, use pill text color; otherwise accent color when hovered
+      color: hovered && !forceOpen? Color.mOnPrimary : Color.mOnSurface
-      color: forceOpen ? textColor : (showPill ? iconTextColor : Color.mOnSurface)
+     // Center horizontally
-      // Center horizontally
       x: (iconCircle.width - width) / 2
       // Center vertically accounting for font metrics
       y: (iconCircle.height - height) / 2 + (height - contentHeight) / 2
@@ -216,6 +209,7 @@ Item {
     hoverEnabled: true
     acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
     onEntered: {
+      hovered = true
       root.entered()
       tooltip.show()
       if (disableOpen) {
@@ -226,6 +220,7 @@ Item {
       }
     }
     onExited: {
+      hovered = false
       root.exited()
       if (!forceOpen) {
         hide()