refactor: popout layer consistency with border

Make them use the same background colour and rounding as the border

config/BackgroundConfig.qml

@@ -1,16 +0,0 @@
-pragma Singleton
-
-import Quickshell
-import QtQuick
-
-Singleton {
-    id: root
-
-    readonly property Border border: Border {}
-
-    component Border: QtObject {
-        readonly property bool enabled: false
-        readonly property int thickness: Appearance.padding.normal
-        readonly property int rounding: Appearance.rounding.large
-    }
-}

config/BorderConfig.qml

@@ -0,0 +1,13 @@
+pragma Singleton
+
+import "root:/services"
+import Quickshell
+import QtQuick
+
+Singleton {
+    id: root
+
+    readonly property color colour: Colours.palette.m3surface
+    readonly property int thickness: Appearance.padding.normal
+    readonly property int rounding: Appearance.rounding.large
+}

modules/background/Border.qml

@@ -1,3 +1,5 @@
+pragma ComponentBehavior: Bound
+
 import "root:/widgets"
 import "root:/services"
 import "root:/config"
@@ -18,10 +20,10 @@ Scope {
         exclusionMode: ExclusionMode.Ignore
 
         mask: Region {
-            x: BackgroundConfig.border.thickness
-            y: BackgroundConfig.border.thickness
-            width: win.screen.width - BackgroundConfig.border.thickness * 2
-            height: win.screen.height - BackgroundConfig.border.thickness * 2
+            x: BorderConfig.thickness
+            y: BorderConfig.thickness
+            width: win.screen.width - BorderConfig.thickness * 2
+            height: win.screen.height - BorderConfig.thickness * 2
             intersection: Intersection.Xor
         }
 
@@ -34,7 +36,7 @@ Scope {
             id: rect
 
             anchors.fill: parent
-            color: Colours.alpha(Colours.palette.m3surface, false)
+            color: Colours.alpha(BorderConfig.colour, false)
             visible: false
         }
 
@@ -47,8 +49,8 @@ Scope {
 
             Rectangle {
                 anchors.fill: parent
-                anchors.margins: BackgroundConfig.border.thickness
-                radius: BackgroundConfig.border.rounding
+                anchors.margins: BorderConfig.thickness
+                radius: BorderConfig.rounding
             }
         }
 
@@ -95,8 +97,8 @@ Scope {
     component ExclusionZone: StyledWindow {
         screen: root.screen
         name: "border-exclusion"
-        width: BackgroundConfig.border.thickness
-        height: BackgroundConfig.border.thickness
+        width: BorderConfig.thickness
+        height: BorderConfig.thickness
 
         anchors.top: true
         anchors.left: true

modules/launcher/Background.qml

@@ -8,7 +8,7 @@ Shape {
 
     required property real wrapperWidth
     required property real realWrapperHeight
-    readonly property int rounding: Appearance.rounding.large
+    readonly property int rounding: BorderConfig.rounding
     readonly property int roundingY: Math.min(rounding, realWrapperHeight / 2)
     readonly property real wrapperHeight: realWrapperHeight - 1 // Pixel issues :sob:
 
@@ -17,7 +17,7 @@ Shape {
 
     ShapePath {
         strokeWidth: -1
-        fillColor: Colours.palette.m3surface
+        fillColor: BorderConfig.colour
 
         startY: root.wrapperHeight
 

modules/osd/Background.qml

@@ -8,7 +8,7 @@ Shape {
 
     required property real realWrapperWidth
     required property real wrapperHeight
-    readonly property int rounding: Appearance.rounding.large
+    readonly property int rounding: BorderConfig.rounding
     readonly property int roundingX: Math.min(rounding, realWrapperWidth / 2)
     readonly property real wrapperWidth: realWrapperWidth - 1 // Pixel issues :sob:
 
@@ -17,7 +17,7 @@ Shape {
 
     ShapePath {
         strokeWidth: -1
-        fillColor: Colours.palette.m3surface
+        fillColor: BorderConfig.colour
 
         startX: root.wrapperWidth
 

widgets/StyledText.qml

@@ -9,6 +9,8 @@ Text {
 
     property bool animate: false
     property string animateProp: "scale"
+    property real animateFrom: 0
+    property real animateTo: 1
     property int animateDuration: Appearance.anim.durations.normal
 
     renderType: Text.NativeRendering
@@ -29,12 +31,12 @@ Text {
 
         SequentialAnimation {
             Anim {
-                to: 0
+                to: root.animateFrom
                 easing.bezierCurve: Appearance.anim.curves.standardAccel
             }
             PropertyAction {}
             Anim {
-                to: 1
+                to: root.animateTo
                 easing.bezierCurve: Appearance.anim.curves.standardDecel
             }
         }