Bring on gradient borders

shell/plugins/notifications/BarWidget.qml

@@ -130,14 +130,13 @@ BarWidget {
 
         Item { Layout.fillWidth: true }
 
-        Rectangle {
+        BorderSurface {
           id: dndPill
           Layout.preferredHeight: Math.max(Style.space(24), Style.font.bodySmall + Style.spacing.controlPaddingY * 2)
           Layout.preferredWidth: dndLabel.implicitWidth + dndGlyph.implicitWidth + Style.space(18)
           radius: Math.min(Style.space(12), root.cardRadius + Style.space(6))
           color: dndOn ? root.colAccent : root.colSurface
-          border.color: dndOn ? root.colAccent : root.colBorder
-          border.width: Style.normalBorderWidth
+          borderSpec: Border.flat(dndOn ? root.colAccent : root.colBorder, Style.normalBorderWidth)
 
           readonly property bool dndOn: !!root.notificationService && root.notificationService.doNotDisturb
 
@@ -228,13 +227,12 @@ BarWidget {
 
         Item { Layout.fillWidth: true }
 
-        Rectangle {
+        BorderSurface {
           Layout.preferredWidth: actionLabel.implicitWidth + Style.space(16)
           Layout.preferredHeight: Math.max(Style.space(22), Style.font.bodySmall + Style.spacing.controlPaddingY * 2)
           radius: Math.min(Style.space(6), root.cardRadius)
           color: actionArea.containsMouse ? root.colBorder : "transparent"
-          border.color: root.colBorder
-          border.width: Style.normalBorderWidth
+          borderSpec: Border.flat(root.colBorder, Style.normalBorderWidth)
 
           Text {
             id: actionLabel
@@ -272,7 +270,7 @@ BarWidget {
               : (onPending ? root.notificationService.pendingModel : root.notificationService.pastModel)
         visible: count > 0
 
-        delegate: Rectangle {
+        delegate: BorderSurface {
           id: rowCard
           required property int index
           required property string app
@@ -293,8 +291,7 @@ BarWidget {
           implicitHeight: rowContent.implicitHeight + Style.spacing.panelGap
           radius: root.cardRadius
           color: "transparent"
-          border.color: root.colBorder
-          border.width: Style.normalBorderWidth
+          borderSpec: Border.flat(root.colBorder, Style.normalBorderWidth)
 
           MouseArea {
             anchors.fill: parent
@@ -307,8 +304,8 @@ BarWidget {
             anchors.left: parent.left
             anchors.right: parent.right
             anchors.verticalCenter: parent.verticalCenter
-            anchors.leftMargin: Style.space(12)
-            anchors.rightMargin: Style.space(12)
+            anchors.leftMargin: rowCard.borderLeft + Style.space(12)
+            anchors.rightMargin: rowCard.borderRight + Style.space(12)
             spacing: Style.space(10)
 
             Item {

shell/plugins/notifications/components/NotificationCard.qml

@@ -6,9 +6,10 @@ import QtQuick
 import QtQuick.Layouts
 import Quickshell
 import qs.Commons
+import qs.Ui
 import "../NotificationLogic.js" as NotificationLogic
 
-Rectangle {
+BorderSurface {
   id: root
 
   property string app: ""
@@ -48,6 +49,7 @@ Rectangle {
   readonly property color dimColor: Qt.darker(Color.notifications.text, 1.4)
   readonly property color bodyColor: Qt.darker(Color.notifications.text, 1.15)
   readonly property color accentColor: urgency === 2 ? Color.urgent : (urgency === 0 ? dimColor : Color.notifications.countdown)
+  readonly property var cardBorderSpec: Border.surfaceSpec("notifications", "border", Color.notifications.border, Math.max(1, Style.space(2)))
 
   function sanitizeBody(s) {
     return NotificationLogic.sanitizeBody(s, app, appIcon)
@@ -62,13 +64,12 @@ Rectangle {
   }
 
   implicitWidth: Style.space(380)
-  // Add 2 * border.width so mainColumn (inset by border.width on top/left/right)
+  // Add vertical border insets so mainColumn (inset by border on top/left/right)
   // doesn't push content under the bottom edge.
-  implicitHeight: mainColumn.implicitHeight + border.width * 2
+  implicitHeight: mainColumn.implicitHeight + borderTop + borderBottom
   radius: cornerRadius
   color: Color.notifications.background
-  border.color: Color.notifications.border
-  border.width: Math.max(1, Style.space(2))
+  borderSpec: cardBorderSpec
   clip: true
 
   HoverHandler { id: hoverTracker }
@@ -86,9 +87,9 @@ Rectangle {
     anchors.top: parent.top
     anchors.left: parent.left
     anchors.right: parent.right
-    anchors.topMargin: root.border.width
-    anchors.leftMargin: root.border.width
-    anchors.rightMargin: root.border.width
+    anchors.topMargin: root.borderTop
+    anchors.leftMargin: root.borderLeft
+    anchors.rightMargin: root.borderRight
     spacing: 0
 
     // Text content.