feat: border + colour changes

config/Appearance.qml

@@ -8,7 +8,6 @@ import Qt.labs.platform
 Singleton {
     id: root
 
-    property bool borders: true
     property bool light: false
     readonly property Transparency transparency: Transparency {}
     readonly property Rounding rounding: Rounding {}

config/BackgroundConfig.qml

@@ -0,0 +1,16 @@
+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/BarConfig.qml

@@ -19,8 +19,7 @@ Singleton {
         property int totalHeight: height
         property int height: 40
         property int innerHeight: 30
-        property int floatingGap: 10
-        property int floatingGapLarge: 15
+        property int floatingGap: 10 + BackgroundConfig.border.thickness
         property int maxLabelWidth: 600
         property int maxLabelHeight: 400
     }

modules/background/Background.qml

@@ -0,0 +1,34 @@
+import "root:/widgets"
+import "root:/config"
+import Quickshell
+import Quickshell.Wayland
+import QtQuick
+import QtQuick.Effects
+
+Variants {
+    model: Quickshell.screens
+
+    Scope {
+        id: scope
+
+        required property ShellScreen modelData
+
+        Border {
+            screen: scope.modelData
+        }
+
+        StyledWindow {
+            id: win
+
+            screen: scope.modelData
+            name: "background"
+            exclusionMode: ExclusionMode.Ignore
+            layer: WlrLayer.Background
+
+            anchors.top: true
+            anchors.bottom: true
+            anchors.left: true
+            anchors.right: true
+        }
+    }
+}

modules/background/Border.qml

@@ -0,0 +1,57 @@
+import "root:/widgets"
+import "root:/config"
+import Quickshell
+import QtQuick
+import QtQuick.Effects
+
+StyledWindow {
+    id: win
+
+    name: "border"
+    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
+        intersection: Intersection.Xor
+    }
+
+    anchors.top: true
+    anchors.bottom: true
+    anchors.left: true
+    anchors.right: true
+
+    StyledRect {
+        id: rect
+
+        anchors.fill: parent
+        color: Appearance.alpha(Appearance.colours.m3surface, false)
+        visible: false
+    }
+
+    Item {
+        id: mask
+
+        anchors.fill: parent
+        layer.enabled: true
+        visible: false
+
+        Rectangle {
+            anchors.fill: parent
+            anchors.margins: BackgroundConfig.border.thickness
+            radius: BackgroundConfig.border.rounding
+        }
+    }
+
+    MultiEffect {
+        anchors.fill: parent
+        maskEnabled: true
+        maskInverted: true
+        maskSource: mask
+        source: rect
+        maskThresholdMin: 0.5
+        maskSpreadAtMin: 1
+    }
+}

modules/bar/Panel.qml

@@ -16,7 +16,7 @@ StyledRect {
     }
 
     vertical: BarConfig.vertical
-    color: Appearance.alpha(Appearance.colours.m3surfaceContainer, false)
+    color: Appearance.alpha(Appearance.colours.m3surface, false)
     anchors.fill: parent
 
     BoxLayout {

modules/bar/Pills.qml

@@ -20,10 +20,9 @@ BoxLayout {
     spacing: Appearance.padding.large
 
     anchors.fill: parent
-    anchors.leftMargin: get(BarConfig.sizes.floatingGapLarge, BarConfig.sizes.floatingGap)
-    anchors.topMargin: get(BarConfig.sizes.floatingGap, BarConfig.sizes.floatingGapLarge)
-    anchors.rightMargin: get(BarConfig.sizes.floatingGapLarge, 0)
-    anchors.bottomMargin: get(0, BarConfig.sizes.floatingGapLarge)
+    anchors.margins: BarConfig.sizes.floatingGap
+    anchors.rightMargin: get(BarConfig.sizes.floatingGap, 0)
+    anchors.bottomMargin: get(0, BarConfig.sizes.floatingGap)
 
     Pill {
         OsIcon {
@@ -126,7 +125,7 @@ BoxLayout {
     }
 
     component Pill: PaddedRect {
-        color: Appearance.alpha(Appearance.colours.m3surfaceContainer, false)
+        color: Appearance.alpha(Appearance.colours.m3surface, false)
         radius: Appearance.rounding.full
         padding: BarConfig.vertical ? [Appearance.padding.large, 0] : [0, Appearance.padding.large]
 

modules/launcher/AppList.qml

@@ -39,7 +39,7 @@ ListView {
 
     highlight: StyledRect {
         radius: Appearance.rounding.normal
-        color: Appearance.alpha(Appearance.colours.m3surfaceContainerHighest, true)
+        color: Appearance.alpha(Appearance.colours.m3surfaceContainerHigh, true)
     }
 
     delegate: isAction ? actionItem : appItem

modules/launcher/Background.qml

@@ -16,7 +16,7 @@ Shape {
 
     ShapePath {
         strokeWidth: -1
-        fillColor: Appearance.colours.m3surfaceContainer
+        fillColor: Appearance.colours.m3surface
 
         startY: root.wrapperHeight
 

modules/launcher/Content.qml

@@ -24,7 +24,7 @@ Item {
     StyledRect {
         id: listWrapper
 
-        color: Appearance.alpha(Appearance.colours.m3surfaceContainerHigh, true)
+        color: Appearance.alpha(Appearance.colours.m3surfaceContainer, true)
         radius: root.rounding
 
         implicitWidth: list.width + root.padding * 2
@@ -61,7 +61,7 @@ Item {
         placeholderText: qsTr(`Type "${LauncherConfig.actionPrefix}" for commands`)
 
         background: StyledRect {
-            color: Appearance.alpha(Appearance.colours.m3surfaceContainerHigh, true)
+            color: Appearance.alpha(Appearance.colours.m3surfaceContainer, true)
             radius: root.rounding
         }
 

modules/launcher/ContentList.qml

@@ -139,7 +139,7 @@ Item {
             id: icon
 
             text: "manage_search"
-            color: Appearance.colours.m3outline
+            color: Appearance.colours.m3onSurfaceVariant
             font.pointSize: Appearance.font.size.extraLarge
 
             anchors.verticalCenter: parent.verticalCenter
@@ -153,7 +153,7 @@ Item {
             anchors.verticalCenter: parent.verticalCenter
 
             text: qsTr("No results")
-            color: Appearance.colours.m3outline
+            color: Appearance.colours.m3onSurfaceVariant
             font.pointSize: Appearance.font.size.larger
             font.weight: 500
         }

modules/launcher/Launcher.qml

@@ -25,6 +25,7 @@ Scope {
                 item: wrapper
             }
 
+            margins.bottom: BackgroundConfig.border.thickness
             anchors.top: true
             anchors.left: true
             anchors.bottom: true

modules/osd/Background.qml

@@ -16,7 +16,7 @@ Shape {
 
     ShapePath {
         strokeWidth: -1
-        fillColor: Appearance.colours.m3surfaceContainer
+        fillColor: Appearance.colours.m3surface
 
         startX: root.wrapperWidth
 

modules/osd/Osd.qml

@@ -64,6 +64,7 @@ Variants {
                     item: wrapper
                 }
 
+                margins.right: BackgroundConfig.border.thickness
                 anchors.left: true
                 anchors.right: true
                 height: wrapper.height

shell.qml

@@ -1,10 +1,12 @@
 import "modules/bar"
 import "modules/launcher"
 import "modules/osd"
+import "modules/background"
 import Quickshell
 
 ShellRoot {
     Bar {}
     Launcher {}
     Osd {}
+    Background {}
 }

widgets/VerticalSlider.qml

@@ -12,7 +12,7 @@ Slider {
     orientation: Qt.Vertical
 
     background: StyledRect {
-        color: Appearance.alpha(Appearance.colours.m3surfaceContainerHigh, true)
+        color: Appearance.alpha(Appearance.colours.m3surfaceContainer, true)
         radius: Appearance.rounding.full
 
         StyledRect {
@@ -57,7 +57,7 @@ Slider {
 
                 animate: true
                 text: root.icon
-                color: Appearance.colours.m3onPrimary
+                color: Appearance.colours.m3onInverseSurface
                 anchors.centerIn: parent
 
                 states: State {