overhaul style

Colors.qml

@@ -8,6 +8,9 @@ import qs.settings
 Singleton {
     id: root
     property alias c: colors
+    property string accent: colors[Config.cfg.appearance.accent]
+    property string font: colors.base05
+
     FileView {
         id: colorView
         path: Qt.resolvedUrl(Quickshell.shellDir + "/schemes/" + Config.cfg.appearance.currentTheme)

modules/applets/WallPicker.qml

@@ -9,6 +9,8 @@ import qs.settings
 Rectangle {
     id: wallPicker
     color: "transparent"
+    radius: Config.cfg.appearance.rounding
+    clip: true
     MouseArea {
         anchors.fill: parent
         acceptedButtons: Qt.AllButtons
@@ -16,7 +18,7 @@ Rectangle {
     Rectangle {
         id: container
         anchors.fill: parent
-        color: Colors.c.base00
+        color: Colors.c.base01
         radius: Config.cfg.appearance.rounding
         GridView {
             id: wallpaperLayout
@@ -24,7 +26,7 @@ Rectangle {
             snapMode: GridView.SnapOneRow
             flow: GridView.FlowTopToBottom
             cellHeight: container.height
-            cellWidth: container.width / 6
+            cellWidth: 300
             anchors.fill: parent
             anchors.centerIn: parent
             anchors.margins: 10
@@ -33,7 +35,7 @@ Rectangle {
                 id: wallTile
                 clip: true
                 required property var modelData
-                radius: Config.cfg.appearance.rounding / 1.5
+                radius: Config.cfg.appearance.rounding - 10
                 color: 'transparent'
                 implicitWidth: wallpaperLayout.cellWidth - 20
                 implicitHeight: wallpaperLayout.cellHeight - 20

modules/bar/Bar.qml

@@ -23,11 +23,13 @@ Variants {
         margins.left: Config.cfg.bar.floating ? 10 : 0
         margins.right: Config.cfg.bar.floating ? 10 : 0
         Rectangle {
-            color: Colors.c.base01
+            color: Colors.c.base00
             radius: Config.cfg.bar.floating ? Config.cfg.appearance.rounding : 0
 	    anchors.fill: parent
 	    implicitHeight: parent.height
 	    anchors.centerIn: parent
+	    border.width: 1
+	    border.color: Colors.c.base03
             RowLayout {
 		anchors.leftMargin: 4
                 anchors.left: parent.left

modules/bar/Ws.qml

@@ -17,12 +17,13 @@ BarComponent {
         spacing: 4
         Repeater {
             model: WindowManager.screenProjection(root.barScreen).windowsets
-            delegate: BarComponent {
+            delegate: Rectangle {
                 id: wsContainer
                 required property var modelData
+		radius: Config.cfg.appearance.rounding
                 implicitWidth: 16
 		implicitHeight: implicitWidth
-                color: modelData.active ? Colors.c.base0D : 'transparent'
+                color: modelData.active ? Colors.accent : 'transparent'
                 MouseArea {
                     id: clickHandler
                     anchors.fill: parent
@@ -34,9 +35,8 @@ BarComponent {
                     id: wsText
                     anchors.centerIn: parent
                     text: parent.modelData.name
-                    color: parent.modelData.shouldDisplay ? parent.modelData.active ? Colors.c.base00 : Colors.c.base0D : Colors.c.base05
+                    color: parent.modelData.shouldDisplay ? parent.modelData.active ? Colors.c.base00 : Colors.font : Colors.font
-		    opacity: parent.modelData.shouldDisplay ? 1.0 : 0.3
+		    opacity: parent.modelData.shouldDisplay ? 1.0 : 0.2
-		    font.bold: true
                 }
             }
         }

modules/overlays/Top.qml

@@ -88,7 +88,6 @@ Variants {
                 height: contentHeight
                 interactive: false
                 visible: count > 0 && Compositor.focusedScreen === root.modelData
-
                 model: NotiServer.notifications
                 spacing: 6
                 delegate: NotiCard {
@@ -106,8 +105,7 @@ Variants {
                 anchors.bottom: parent.bottom
                 anchors.left: parent.left
                 anchors.right: parent.right
-                anchors.margins: 20
+                anchors.margins: 30
-                implicitWidth: 1000
                 implicitHeight: 200
                 Behavior on opacity {
                     NumberAnimation {

settings/Config.qml

@@ -28,6 +28,7 @@ Singleton {
         adapter: JsonAdapter {
             id: cfg
             property JsonObject appearance: JsonObject {
+		property string accent: "base0D"
                 property string font: "Iosevka"
                 property int fontSize: 14
                 property int iconSize: 16

settings/settings.json

@@ -1,18 +1,19 @@
 {
     "appearance": {
-        "currentTheme": "base16-catppuccin-mocha.json",
+        "accent": "base0D",
-        "font": "Roboto",
+        "currentTheme": "base16-gruvbox-dark.json",
+        "font": "Inter",
         "fontSize": 14,
-        "iconSize": 18,
+        "iconSize": 16,
         "rounding": 24
     },
     "bar": {
         "floating": true,
         "height": 40,
-        "opacity": 1
+        "opacity": 0.2
     },
     "wallpaper": {
         "wallDir": "/home/lucy/.walls/",
-        "wallpaper": "/home/lucy/.walls/walkingcastle.png"
+        "wallpaper": "/home/lucy/.walls/lain_wallpaper.png"
     }
 }

widgets/BarComponent.qml

@@ -4,8 +4,11 @@ import qs
 import qs.settings
 
 Rectangle {
+    property color accent: Colors.c.base02
     property bool active: false
-    color: active ? Colors.c.base03 : Colors.c.base02
+    color: active ? Colors.c.base02 : Colors.c.base01
     implicitHeight: Config.cfg.bar.height - 8
     radius: Config.cfg.appearance.rounding - 4
+    border.width: 1
+    border.color: Colors.c.base03
 }

widgets/StyledIcon.qml

@@ -5,20 +5,17 @@ import QtQuick.Effects
 import qs
 import qs.settings
 
-
 IconImage {
     id: root
     required property string iconName
     property bool fill: true
-    source: Qt.resolvedUrl(
+    source: Qt.resolvedUrl(fill ? Quickshell.shellDir + "/assets/phosphor-icons/fill/" + iconName + "-fill.svg" : Quickshell.shellDir + "/assets/phosphor-icons/regular/" + iconName + ".svg")
-	fill ? Quickshell.shellDir + "/assets/phosphor-icons/fill/" + iconName + "-fill.svg" :
-	    Quickshell.shellDir + "/assets/phosphor-icons/regular/" + iconName + ".svg")
     width: Config.cfg.appearance.iconSize
     height: Config.cfg.appearance.iconSize
     layer.enabled: true
     layer.effect: MultiEffect {
-        colorization: 0.5
+        colorization: 1.0
-        colorizationColor: Colors.c.base0D
+        colorizationColor: Colors.font
         brightness: 1.0
     }
 }

widgets/StyledText.qml

@@ -3,7 +3,7 @@ import qs
 import qs.settings
 
 Text {
-    color: Colors.c.base05
+    color: Colors.font
     font.family: Config.cfg.appearance.font
     font.pixelSize: Config.cfg.appearance.fontSize
 }