new font???

Bar.qml

@@ -1,6 +1,7 @@
 pragma ComponentBehavior: Bound
 
 import QtQuick
+import QtQuick.Effects
 import QtQuick.Layouts
 import Quickshell
 import Quickshell.Io
@@ -72,16 +73,28 @@ Scope {
                 Region {
                     required property Item modelData
 
-                    x: modelData.x
+                    x: modelData.x + 9
                     y: modelData.y + backgroundRect.implicitHeight
                     width: modelData.width
-                    height: modelData.height
+                    height: panels.popouts.hasCurrent ? modelData.height + 70 : 0
                     intersection: Intersection.Subtract
                 }
             }
 
             Item {
                 anchors.fill: parent
+                opacity: Config.transparency.enabled ? DynamicColors.transparency.base : 1
+                layer.enabled: true
+                layer.effect: MultiEffect {
+                    shadowEnabled: true
+                    blurMax: 32
+                    shadowColor: Qt.alpha(DynamicColors.palette.m3shadow, 1)
+                }
+
+                Border {
+                    bar: backgroundRect
+                }
+
                 Backgrounds {
                     panels: panels
                     bar: backgroundRect
@@ -117,7 +130,7 @@ Scope {
                     anchors.right: parent.right
                     anchors.top: parent.top
                     implicitHeight: 34
-                    color: Config.useDynamicColors ? DynamicColors.tPalette.m3surface : Config.baseBgColor
+                    color: "transparent"
                     radius: 0
 
                     Behavior on color {

Clock.qml

@@ -1,8 +1,9 @@
 import QtQuick
 import qs.Config
 import qs.Modules
+import qs.Components
 
-Text {
+CustomText {
     text: Time.time
     color: Config.useDynamicColors ? DynamicColors.palette.m3tertiary : "white"
 

Components/CustomRadioButton.qml

@@ -14,8 +14,8 @@ RadioButton {
     indicator: Rectangle {
         id: outerCircle
 
-        implicitWidth: 20
+        implicitWidth: 16
-        implicitHeight: 20
+        implicitHeight: 16
         radius: 1000
         color: "transparent"
         border.color: root.checked ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurfaceVariant

Components/CustomSlider.qml

@@ -41,8 +41,9 @@ Slider {
     handle: CustomRect {
         x: root.visualPosition * root.availableWidth - implicitWidth / 2
 
-        implicitWidth: root.implicitHeight / 4.5
+        implicitWidth: 5
-        implicitHeight: root.implicitHeight
+        implicitHeight: 15
+        anchors.verticalCenter: parent.verticalCenter
 
         color: DynamicColors.palette.m3primary
         radius: 1000

Components/CustomText.qml

@@ -16,7 +16,7 @@ Text {
     renderType: Text.NativeRendering
     textFormat: Text.PlainText
     color: DynamicColors.palette.m3onSurface
-    font.family: "Rubik"
+    font.family: "Segoe UI Variable Text"
     font.pointSize: 12
 
     Behavior on color {

Config/Config.qml

@@ -19,6 +19,7 @@ Singleton {
     property alias background: adapter.background
     property alias useDynamicColors: adapter.useDynamicColors
     property alias barConfig: adapter.barConfig
+    property alias transparency: adapter.transparency
 
     FileView {
         id: root
@@ -46,6 +47,7 @@ Singleton {
             property BackgroundConfig background: BackgroundConfig {}
             property bool useDynamicColors: false
             property BarConfig barConfig: BarConfig {}
+            property Transparency transparency: Transparency {}
         }
     }
 }

Config/DynamicColors.qml

@@ -88,9 +88,9 @@ Singleton {
     }
 
     component Transparency: QtObject {
-        readonly property bool enabled: true
+        readonly property bool enabled: Config.transparency.enabled
-        readonly property real base: 0.85 - (root.light ? 0.1 : 0)
+        readonly property real base: Config.transparency.base - (root.light ? 0.1 : 0)
-        readonly property real layers: 0.4
+        readonly property real layers: Config.transparency.layers
     }
 
     component M3TPalette: QtObject {

Config/Transparency.qml

@@ -0,0 +1,7 @@
+import Quickshell.Io
+
+JsonObject {
+    property bool enabled: false
+    property real base: 0.85
+    property real layers: 0.4
+}

Modules/AudioPopup.qml

@@ -80,7 +80,7 @@ Item {
 
         CustomMouseArea {
             Layout.fillWidth: true
-            implicitHeight: 10 * 3
+            implicitHeight: 10
 
             CustomSlider {
                 anchors.left: parent.left
@@ -105,7 +105,7 @@ Item {
 
         CustomMouseArea {
             Layout.fillWidth: true
-            implicitHeight: 10 * 3
+            implicitHeight: 10
 
             CustomSlider {
                 anchors.left: parent.left
@@ -128,7 +128,7 @@ Item {
             implicitWidth: expandBtn.implicitWidth + 10 * 2
             implicitHeight: expandBtn.implicitHeight + 5
 
-            radius: 17
+            radius: 4
             color: DynamicColors.palette.m3primaryContainer
 
             StateLayer {
@@ -136,6 +136,7 @@ Item {
 
                 function onClicked(): void {
                     Quickshell.execDetached(["app2unit", "--", "pavucontrol"]);
+                    root.wrapper.hasCurrent = false;
                 }
             }
 
@@ -152,6 +153,7 @@ Item {
                 }
 
                 MaterialIcon {
+                    Layout.topMargin: 2
                     text: "chevron_right"
                     color: DynamicColors.palette.m3onPrimaryContainer
                     font.pointSize: 18

Modules/AudioWidget.qml

@@ -1,11 +1,10 @@
 import QtQuick
 import QtQuick.Layouts
-import Quickshell
 import Quickshell.Io
 import Quickshell.Services.Pipewire
-import Quickshell.Widgets
 import qs.Modules
 import qs.Config
+import qs.Components
 
 Item {
     id: root
@@ -42,7 +41,6 @@ Item {
             CAnim {}
         }
 
-        // Background circle
         Rectangle {
             anchors.centerIn: parent
             width: parent.width
@@ -53,244 +51,72 @@ Item {
             border.width: 0
         }
 
-        MouseArea {
+        RowLayout {
-            id: mouseArea
+            anchors {
-            anchors.fill: parent
+                fill: parent
-            hoverEnabled: true
+                leftMargin: 10
-            cursorShape: Qt.PointingHandCursor
+                rightMargin: 15
+            }
 
-            RowLayout {
+            MaterialIcon {
-                anchors {
+                Layout.alignment: Qt.AlignVCenter
-                    fill: parent
+                font.pixelSize: 18
-                    leftMargin: 10
+                text: "volume_up"
-                    rightMargin: 15
+                color: root.textColor
-                }
+            }
 
-                Text {
+            Rectangle {
-                    Layout.alignment: Qt.AlignVCenter
+                Layout.fillWidth: true
-                    font.family: "Material Symbols Rounded"
+
-                    font.pixelSize: 18
+                implicitHeight: 4
-                    text: "\ue050"  // volumeUp icon
+                radius: 20
-                    color: root.textColor
+                color: "#50ffffff"
-                    Behavior on color {
-                        CAnim {}
-                    }
-                }
 
                 Rectangle {
-                    Layout.fillWidth: true
+                    id: sinkVolumeBar
-
+                    anchors {
-                    implicitHeight: 4
+                        left: parent.left
-                    radius: 20
+                        top: parent.top
-                    color: "#50ffffff"
+                        bottom: parent.bottom
-
-                    Rectangle {
-                        id: sinkVolumeBar
-                        anchors {
-                            left: parent.left
-                            top: parent.top
-                            bottom: parent.bottom
-                        }
-
-                        implicitWidth: parent.width * ( Pipewire.defaultAudioSink?.audio.volume ?? 0 )
-                        radius: parent.radius
-                        color: root.textColor
                     }
 
-                    Rectangle {
+                    implicitWidth: parent.width * ( Pipewire.defaultAudioSink?.audio.volume ?? 0 )
-                        id: sinkGrabber
+                    radius: parent.radius
-                        visible: root.expanded
+                    color: root.textColor
-                        opacity: root.expanded ? 1 : 0
-                        width: sinkVolumeMouseArea.pressed ? 25 : 12
-                        height: sinkVolumeMouseArea.pressed ? 25 : 12
-                        radius: width / 2
-                        color: sinkVolumeMouseArea.containsMouse || sinkVolumeMouseArea.pressed ? (Config.useDynamicColors ? DynamicColors.palette.m3onSurface : "#ffffff") : (Config.useDynamicColors ? DynamicColors.palette.m3onSurfaceVariant : "#aaaaaa")
-                        border.color: "#40000000"
-                        border.width: 2
-                        anchors.verticalCenter: parent.verticalCenter
-                        x: sinkVolumeBar.width - width / 2
-
-                        Text {
-                            anchors.centerIn: parent
-                            anchors.verticalCenterOffset: text.length === 3 ? -0.5 : 0
-                            visible: sinkVolumeMouseArea.pressed
-                            font.pixelSize: text.length === 3 ? 10 : 12
-                            text: Math.round(( Pipewire.defaultAudioSink?.audio.volume ?? 0 ) * 100 ).toString()
-                        }
-
-                        Behavior on width {
-                            NumberAnimation {
-                                duration: 50
-                            }
-                        }
-
-                        Behavior on height {
-                            NumberAnimation {
-                                duration: 50
-                            }
-                        }
-
-                        Behavior on opacity {
-                            NumberAnimation {
-                                duration: 300
-                            }
-                        }
-
-                        Behavior on color {
-                            ColorAnimation {
-                                duration: 150
-                            }
-                        }
-                    }
-
-                    MouseArea {
-                        id: sinkVolumeMouseArea
-                        anchors.fill: parent
-                        anchors {
-                            leftMargin: 0
-                            rightMargin: 0
-                            topMargin: -10
-                            bottomMargin: -10
-                        }
-                        cursorShape: Qt.PointingHandCursor
-                        hoverEnabled: true
-
-                        onPressed: function( mouse ) {
-                            var newVolume = Math.max( 0, Math.min( 1, mouse.x / width ))
-                            if ( Pipewire.defaultAudioSink?.audio ) {
-                                Pipewire.defaultAudioSink.audio.volume = newVolume
-                            }
-                        }
-
-                        onPositionChanged: function( mouse ) {
-                            if ( pressed ) {
-                                var newVolume = Math.max( 0, Math.min( 1, mouse.x / width ))
-                                if ( Pipewire.defaultAudioSink?.audio ) {
-                                    Pipewire.defaultAudioSink.audio.volume = newVolume
-                                }
-                            }
-                        }
-                    }
                 }
+            }
 
-                Text {
+            MaterialIcon {
-                    Layout.alignment: Qt.AlignVCenter
+                Layout.alignment: Qt.AlignVCenter
-                    font.family: "Material Symbols Rounded"
+                font.pixelSize: 18
-                    font.pixelSize: 18
+                text: Pipewire.defaultAudioSource?.audio.muted ? "mic_off" : "mic"
-                    text: "\ue029"
+                color: ( Pipewire.defaultAudioSource?.audio.muted ?? false ) ? (Config.useDynamicColors ? DynamicColors.palette.m3error : "#ff4444") : root.textColor
+            }
+
+            Rectangle {
+                Layout.fillWidth: true
+
+                implicitHeight: 4
+                radius: 20
+                color: "#50ffffff"
+
+                Rectangle {
+                    id: sourceVolumeBar
+                    anchors {
+                        left: parent.left
+                        top: parent.top
+                        bottom: parent.bottom
+                    }
+
+                    implicitWidth: parent.width * ( Pipewire.defaultAudioSource?.audio.volume ?? 0 )
+                    radius: parent.radius
                     color: ( Pipewire.defaultAudioSource?.audio.muted ?? false ) ? (Config.useDynamicColors ? DynamicColors.palette.m3error : "#ff4444") : root.textColor
 
                     Behavior on color {
                         CAnim {}
                     }
                 }
-
-                Rectangle {
-                    Layout.fillWidth: true
-
-                    implicitHeight: 4
-                    radius: 20
-                    color: "#50ffffff"
-
-                    Rectangle {
-                        id: sourceVolumeBar
-                        anchors {
-                            left: parent.left
-                            top: parent.top
-                            bottom: parent.bottom
-                        }
-
-                        implicitWidth: parent.width * ( Pipewire.defaultAudioSource?.audio.volume ?? 0 )
-                        radius: parent.radius
-                        color: ( Pipewire.defaultAudioSource?.audio.muted ?? false ) ? (Config.useDynamicColors ? DynamicColors.palette.m3error : "#ff4444") : root.textColor
-
-                        Behavior on color {
-                            CAnim {}
-                        }
-                    }
-
-                    Rectangle {
-                        id: sourceGrabber
-                        visible: root.expanded
-                        opacity: root.expanded ? 1 : 0
-                        width: sourceVolumeMouseArea.pressed ? 25 : 12
-                        height: sourceVolumeMouseArea.pressed ? 25 : 12
-                        radius: width / 2
-                        color: sourceVolumeMouseArea.containsMouse || sourceVolumeMouseArea.pressed ? (Config.useDynamicColors ? DynamicColors.palette.m3onSurface : "#ffffff") : (Config.useDynamicColors ? DynamicColors.palette.m3onSurfaceVariant : "#aaaaaa")
-                        border.color: "#40000000"
-                        border.width: 2
-                        anchors.verticalCenter: parent.verticalCenter
-                        x: sourceVolumeBar.width - width / 2
-
-                        Text {
-                            anchors.centerIn: parent
-                            anchors.verticalCenterOffset: text.length === 3 ? -0.5 : 0
-                            visible: sourceVolumeMouseArea.pressed
-                            font.pixelSize: text.length === 3 ? 10 : 12
-                            text: Math.round(( Pipewire.defaultAudioSource?.audio.volume ?? 0 ) * 100 ).toString()
-                        }
-
-                        Behavior on width {
-                            NumberAnimation {
-                                duration: 50
-                            }
-                        }
-
-                        Behavior on height {
-                            NumberAnimation {
-                                duration: 50
-                            }
-                        }
-
-                        Behavior on opacity {
-                            NumberAnimation {
-                                duration: 300
-                            }
-                        }
-
-                        Behavior on color {
-                            ColorAnimation {
-                                duration: 150
-                            }
-                        }
-                    }
-
-                    MouseArea {
-                        id: sourceVolumeMouseArea
-                        anchors.fill: parent
-                        anchors {
-                            leftMargin: 0
-                            rightMargin: 0
-                            topMargin: -10
-                            bottomMargin: -10
-                        }
-                        cursorShape: Qt.PointingHandCursor
-                        hoverEnabled: true
-
-                        onPressed: function( mouse ) {
-                            var newVolume = Math.max( 0, Math.min( 1, mouse.x / width ))
-                            if ( Pipewire.defaultAudioSource?.audio ) {
-                                Pipewire.defaultAudioSource.audio.volume = newVolume
-                            }
-                        }
-
-                        onPositionChanged: function( mouse ) {
-                            if ( pressed ) {
-                                var newVolume = Math.max( 0, Math.min( 1, mouse.x / width ))
-                                if ( Pipewire.defaultAudioSource?.audio ) {
-                                    Pipewire.defaultAudioSource.audio.volume = newVolume
-                                }
-                            }
-                        }
-                    }
-                }
             }
         }
-
-        Process {
-            id: pavucontrolProc
-            command: ["pavucontrol"]
-            running: false
-        }
     }
 }

Modules/Background.qml

@@ -11,7 +11,7 @@ ShapePath {
     readonly property real roundingY: flatten ? wrapper.height / 2 : rounding
 
     strokeWidth: -1
-    fillColor: DynamicColors.tPalette.m3surface
+    fillColor: DynamicColors.palette.m3surface
 
     PathArc {
         relativeX: root.rounding

Modules/Bar/BarLoader.qml

@@ -45,7 +45,7 @@ RowLayout {
             const trayItem = item.items.itemAt(index);
             if (trayItem) {
                 popouts.currentName = `traymenu${index}`;
-                popouts.currentCenter = Qt.binding(() => trayItem.mapToItem(root, trayItem.implicitWidth / 2, 0).x);
+                popouts.currentCenter = Qt.binding(() => trayItem.mapToItem(root, trayItem.implicitWidth / 2 + 4, 0).x);
                 popouts.hasCurrent = true;
             } else {
                 popouts.hasCurrent = false;

Modules/Bar/Border.qml

@@ -0,0 +1,44 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Effects
+import qs.Modules
+import qs.Config
+import qs.Components
+
+Item {
+    id: root
+
+    required property Item bar
+
+    anchors.fill: parent
+
+    CustomRect {
+        anchors.fill: parent
+        color: DynamicColors.palette.m3surface
+
+        layer.enabled: true
+
+        layer.effect: MultiEffect {
+            maskSource: mask
+            maskEnabled: true
+            maskInverted: true
+            maskThresholdMin: 0.5
+            maskSpreadAtMin: 1
+        }
+    }
+
+    Item {
+        id: mask
+        anchors.fill: parent
+        layer.enabled: true
+        visible: false
+
+        Rectangle {
+            anchors.fill: parent
+            anchors.topMargin: root.bar.implicitHeight
+            topLeftRadius: 8
+            topRightRadius: 8
+        }
+    }
+}

Modules/NotifBell.qml

@@ -1,11 +1,12 @@
 import QtQuick
 import qs.Config
 import qs.Helpers
+import qs.Components
 
 Item {
     implicitWidth: 20
     implicitHeight: 18
-    Text {
+    MaterialIcon {
         id: notificationCenterIcon
         property color iconColor: Config.useDynamicColors ? DynamicColors.palette.m3tertiaryFixed : "white"
         text: HasNotifications.hasNotifications ? "\uf4fe" : "\ue7f4"

Modules/ResourceDetail.qml

@@ -2,6 +2,7 @@ import Quickshell
 import QtQuick
 import QtQuick.Layouts
 import qs.Config
+import qs.Components
 
 Item {
     id: root
@@ -27,17 +28,17 @@ Item {
             Layout.alignment: Qt.AlignLeft
             Layout.fillWidth: true
 
-            Text {
+            MaterialIcon {
                 font.family: "Material Symbols Rounded"
-                font.pixelSize: 32
+                font.pointSize: 28
                 text: root.iconString
                 color: root.textColor
             }
 
-            Text {
+            CustomText {
                 anchors.verticalCenter: parent.verticalCenter
                 text: root.resourceName
-                font.pixelSize: 14
+                font.pointSize: 12
                 color: root.textColor
             }
         }
@@ -64,10 +65,10 @@ Item {
             }
         }
 
-        Text {
+        CustomText {
             Layout.alignment: Qt.AlignLeft
             text: root.details
-            font.pixelSize: 12
+            font.pointSize: 10
             color: "#cccccc"
         }
     }

Modules/Resources.qml

@@ -7,6 +7,7 @@ import Quickshell.Wayland
 import qs.Modules
 import qs.Config
 import qs.Effects
+import qs.Components
 
 Item {
     id: root
@@ -31,15 +32,11 @@ Item {
             anchors.leftMargin: 5
             anchors.rightMargin: 5
 
-            Text {
+            MaterialIcon {
                 Layout.alignment: Qt.AlignVCenter
-                font.family: "Material Symbols Rounded"
                 font.pixelSize: 18
-                text: "\uf7a3"
+                text: "memory_alt"
                 color: root.textColor
-                Behavior on color {
-                    CAnim {}
-                }
             }
 
             Resource {
@@ -47,15 +44,11 @@ Item {
                 warningThreshold: 95
             }
 
-            Text {
+            MaterialIcon {
                 Layout.alignment: Qt.AlignVCenter
-                font.family: "Material Symbols Rounded"
                 font.pixelSize: 18
-                text: "\ue322"
+                text: "memory"
                 color: root.textColor
-                Behavior on color {
-                    CAnim {}
-                }
             }
 
             Resource {
@@ -63,30 +56,22 @@ Item {
                 warningThreshold: 80
             }
 
-            Text {
+            MaterialIcon {
                 Layout.alignment: Qt.AlignVCenter
-                font.family: "Material Symbols Rounded"
+                font.pixelSize: 18
-                font.pixelSize: 16
+                text: "gamepad"
-                text: "\ue30f"
                 color: root.textColor
-                Behavior on color {
-                    CAnim {}
-                }
             }
 
             Resource {
                 percentage: ResourceUsage.gpuUsage
             }
 
-            Text {
+            MaterialIcon {
                 Layout.alignment: Qt.AlignVCenter
-                font.family: "Material Symbols Rounded"
                 font.pixelSize: 18
-                text: "\ue30d"
+                text: "developer_board"
                 color: root.textColor
-                Behavior on color {
-                    CAnim {}
-                }
             }
 
             Resource {

Modules/TrayMenuPopout.qml

@@ -182,7 +182,7 @@ StackView {
 
                 Item {
                     anchors.bottom: parent.bottom
-                    implicitWidth: back.implicitWidth
+                    implicitWidth: back.implicitWidth + 10
                     implicitHeight: back.implicitHeight
 
                     CustomRect {

Modules/Workspaces.qml

@@ -63,9 +63,9 @@ Item {
                     height: 16
                     radius: height / 2
 
-                    color: modelData.id === Hyprland.focusedWorkspace.id ? ( Config.useDynamicColors ? DynamicColors.palette.m3primary : Config.accentColor.accents.primary ) : ( Config.useDynamicColors ? DynamicColors.palette.m3inverseOnSurface : "#606060" )
+                    color: modelData.id === Hyprland.focusedWorkspace.id ? ( Config.useDynamicColors ? DynamicColors.palette.m3primary : Config.accentColor.accents.primary ) : ( Config.useDynamicColors ? DynamicColors.palette.m3outline : "#606060" )
 
-                    border.color: modelData.id === Hyprland.focusedWorkspace.id ? ( Config.useDynamicColors ? DynamicColors.palette.m3onPrimary : Config.accentColor.accents.primaryAlt ) : ( Config.useDynamicColors ? DynamicColors.palette.m3inverseOnSurface : "#808080" )
+                    border.color: modelData.id === Hyprland.focusedWorkspace.id ? ( Config.useDynamicColors ? DynamicColors.palette.m3onPrimary : Config.accentColor.accents.primaryAlt ) : ( Config.useDynamicColors ? DynamicColors.palette.m3outlineVariant : "#808080" )
                     border.width: 1
 
                     visible: root.shouldShow( modelData.monitor )