Bring on gradient borders

shell/plugins/panels/network/Panel.qml

@@ -741,15 +741,14 @@ Panel {
 
             Item { width: Math.max(0, parent.width - parent.children[0].width - heroDetailPill.implicitWidth); height: 1 }
 
-            Rectangle {
+            BorderSurface {
               id: heroDetailPill
               visible: heroSsid.detail !== ""
               implicitWidth: heroDetail.implicitWidth + Style.space(10)
               implicitHeight: heroDetail.implicitHeight + Style.space(4)
               anchors.verticalCenter: parent.verticalCenter
               color: "transparent"
-              border.color: Style.normalBorderFor(root.bar.foreground)
-              border.width: Style.normalBorderWidth
+              borderSpec: Border.controlSpec("normal", root.bar.foreground, Color.accent)
               radius: Style.cornerRadius
 
               Text {
@@ -1139,12 +1138,11 @@ Panel {
           font.pixelSize: Style.font.subtitle
         }
 
-        Rectangle {
+        BorderSurface {
           anchors.fill: parent
           visible: row.forgetFocused
           color: Style.hoverFillFor(root.bar.urgent, root.bar.urgent)
-          border.color: Style.hoverBorderFor(root.bar.urgent, root.bar.urgent)
-          border.width: Style.hoverBorderWidth
+          borderSpec: Border.controlSpec("hover-cursor", root.bar.urgent, root.bar.urgent)
           radius: Style.cornerRadius
           z: -1
         }
@@ -1256,7 +1254,7 @@ Panel {
         Component.onCompleted: if (visible) Qt.callLater(forceActiveFocus)
       }
 
-      Rectangle {
+      BorderSurface {
         id: statusMsgWrapper
         visible: row.isBusy || row.isFailed
         anchors.left: parent.left
@@ -1264,8 +1262,7 @@ Panel {
         anchors.verticalCenter: parent.verticalCenter
         height: Style.spacing.controlHeight
         color: Style.normalFillFor(root.bar.foreground)
-        border.color: Style.normalBorderFor(root.bar.foreground)
-        border.width: Style.normalBorderWidth
+        borderSpec: Border.controlSpec("normal", root.bar.foreground, Color.accent)
         radius: Style.cornerRadius
 
         Text {

shell/plugins/panels/tailscale/Panel.qml

@@ -1022,10 +1022,9 @@ Panel {
             event.accepted = true
           }
         }
-        background: Rectangle {
+        background: BorderSurface {
           color: Color.background
-          border.color: root.dim
-          border.width: 1
+          borderSpec: Border.flat(root.dim, 1)
           radius: Style.cornerRadius
         }
 

shell/plugins/panels/tailscale/TailscaleIcon.qml

@@ -1,5 +1,6 @@
 import QtQuick
 import qs.Commons
+import qs.Ui
 
 Item {
   id: root
@@ -42,7 +43,7 @@ Item {
     rotation: -45
   }
 
-  Rectangle {
+  BorderSurface {
     visible: root.warning
     width: Math.max(7, parent.width * 0.42)
     height: width
@@ -50,8 +51,7 @@ Item {
     color: root.badgeColor
     anchors.right: parent.right
     anchors.bottom: parent.bottom
-    border.color: Color.popups.background
-    border.width: 1
+    borderSpec: Border.flat(Color.popups.background, 1)
 
     Text {
       anchors.centerIn: parent