feat(StatusBadge): introduce `borderColor` and `hoverBorderColor`

`StatusBadge` uses a border with same color as its underlying component
to create "fake space" (see `StatusNavTabButton`).

The color depends on the parent component background and its state,
which the `StatusBadge` doesn't know about by itself, so the border color
has to be set explicity whereever it's desired.

This commit introduces (default) colors for the border based on where
badge is used.

ui/StatusQ/sandbox/Layout.qml

@@ -28,6 +28,8 @@ GridLayout {
             icon.name: "chat"
             badge.value: 33
             badge.visible: true
+            badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+            badge.border.width: 2
             tooltip.text: "Chat"
         }
     }
@@ -37,6 +39,8 @@ GridLayout {
             icon.name: "chat"
             badge.value: 33
             badge.visible: true
+            badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+            badge.border.width: 2
             tooltip.text: "Chat"
         }
 
@@ -72,7 +76,7 @@ GridLayout {
                 badge.visible: true
                 badge.anchors.rightMargin: 4
                 badge.anchors.topMargin: 5
-                badge.border.color: Theme.palette.statusAppNavBar.backgroundColor
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
                 badge.border.width: 2
 
                 tooltip.text: "Profile"
@@ -85,6 +89,8 @@ GridLayout {
             icon.name: "chat"
             badge.value: 33
             badge.visible: true
+            badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+            badge.border.width: 2
             tooltip.text: "Chat"
         }
 
@@ -118,6 +124,8 @@ GridLayout {
             icon.name: "chat"
             badge.value: 33
             badge.visible: true
+            badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+            badge.border.width: 2
             tooltip.text: "Chat"
         }
 
@@ -166,7 +174,7 @@ GridLayout {
                 badge.visible: true
                 badge.anchors.rightMargin: 4
                 badge.anchors.topMargin: 5
-                badge.border.color: Theme.palette.statusAppNavBar.backgroundColor
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
                 badge.border.width: 2
 
                 tooltip.text: "Profile"
@@ -180,6 +188,8 @@ GridLayout {
             icon.name: "chat"
             badge.value: 33
             badge.visible: true
+            badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
+            badge.border.width: 2
             tooltip.text: "Chat"
         }
 
@@ -247,7 +257,7 @@ GridLayout {
                 badge.visible: true
                 badge.anchors.rightMargin: 4
                 badge.anchors.topMargin: 5
-                badge.border.color: Theme.palette.statusAppNavBar.backgroundColor
+                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
                 badge.border.width: 2
 
                 tooltip.text: "Profile"

ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml

@@ -139,6 +139,8 @@ ThemePalette {
 
     property QtObject statusBadge: QtObject {
         property color foregroundColor: baseColor3
+        property color borderColor: baseColor5
+        property color hoverBorderColor: "#353A4D"
     }
 }
 

ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml

@@ -139,6 +139,8 @@ ThemePalette {
 
     property QtObject statusBadge: QtObject {
         property color foregroundColor: white
+        property color borderColor: baseColor4
+        property color hoverBorderColor: "#DDE3F3"
     }
 }
 

ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml

@@ -100,6 +100,8 @@ QtObject {
 
     property QtObject statusBadge: QtObject {
         property color foregroundColor
+        property color borderColor
+        property color hoverBorderColor
     }
 
     function alphaColor(color, alpha) {