refractor shadows

.config/quickshell/modules/cheatsheet/Cheatsheet.qml

@@ -57,13 +57,8 @@ Scope { // Scope
 
 
             // Background
-            RectangularShadow {
+            StyledRectangularShadow {
-                anchors.fill: cheatsheetBackground
+                target: cheatsheetBackground
-                radius: cheatsheetBackground.radius
-                blur: 1.2 * Appearance.sizes.elevationMargin
-                spread: 1
-                color: Appearance.colors.colShadow
-                cached: true
             }
             Rectangle {
                 id: cheatsheetBackground

.config/quickshell/modules/common/widgets/NotificationGroup.qml

@@ -105,14 +105,9 @@ Item { // Notification group area
         }
     }
 
-    
+    StyledRectangularShadow {
-    RectangularShadow {
+        target: background
         visible: popup
-        anchors.fill: background
-        radius: background.radius
-        blur: 1.2 * Appearance.sizes.elevationMargin
-        spread: 1
-        color: Appearance.colors.colShadow
     }
     Rectangle { // Background of the notification
         id: background

.config/quickshell/modules/common/widgets/StyledRectangularShadow.qml

@@ -0,0 +1,13 @@
+import QtQuick
+import QtQuick.Effects
+import "root:/modules/common"
+
+RectangularShadow {
+    required property var target
+    anchors.fill: target
+    radius: target.radius
+    blur: 1.2 * Appearance.sizes.elevationMargin
+    spread: 1
+    color: Appearance.colors.colShadow
+    cached: true
+}

.config/quickshell/modules/dock/Dock.qml

@@ -75,13 +75,8 @@ Scope { // Scope
                         implicitWidth: dockRow.implicitWidth + 5 * 2
                         height: parent.height - Appearance.sizes.elevationMargin - Appearance.sizes.hyprlandGapsOut
 
-                        RectangularShadow {
+                        StyledRectangularShadow {
-                            anchors.fill: dockVisualBackground
+                            target: dockVisualBackground
-                            radius: dockVisualBackground.radius
-                            blur: 1.2 * Appearance.sizes.elevationMargin
-                            spread: 1
-                            color: Appearance.colors.colShadow
-                            cached: true
                         }
                         Rectangle {
                             id: dockVisualBackground

.config/quickshell/modules/mediaControls/PlayerControl.qml

@@ -104,13 +104,8 @@ Item { // Player instance
 
     }
 
-    RectangularShadow {
+    StyledRectangularShadow {
-        anchors.fill: background
+        target: background
-        radius: background.radius
-        blur: 1.2 * Appearance.sizes.elevationMargin
-        spread: 1
-        color: Appearance.colors.colShadow
-        cached: true
     }
     Rectangle { // Background
         id: background

.config/quickshell/modules/onScreenDisplay/OsdValueIndicator.qml

@@ -25,12 +25,8 @@ Item {
     implicitWidth: Appearance.sizes.osdWidth
     implicitHeight: valueIndicator.implicitHeight
 
-    RectangularShadow {
+    StyledRectangularShadow {
-        anchors.fill: valueIndicator
+        target: valueIndicator
-        radius: valueIndicator.radius
-        blur: 1.2 * Appearance.sizes.elevationMargin
-        spread: 1
-        color: Appearance.colors.colShadow
     }
     WrapperRectangle {
         id: valueIndicator

.config/quickshell/modules/overview/OverviewWidget.qml

@@ -49,12 +49,8 @@ Item {
     property Component windowComponent: OverviewWindow {}
     property list<OverviewWindow> windowWidgets: []
 
-    RectangularShadow { // Background shadow
+    StyledRectangularShadow {
-        anchors.fill: overviewBackground
+        target: overviewBackground
-        radius: overviewBackground.radius
-        blur: 1.2 * Appearance.sizes.elevationMargin
-        spread: 1
-        color: Appearance.colors.colShadow
     }
     Rectangle { // Background
         id: overviewBackground

.config/quickshell/modules/overview/SearchWidget.qml

@@ -169,12 +169,8 @@ Item { // Wrapper
         }
     }
 
-    RectangularShadow { // Background shadow
+    StyledRectangularShadow {
-        anchors.fill: searchWidgetContent
+        target: searchWidgetContent
-        radius: searchWidgetContent.radius
-        blur: 1.2 * Appearance.sizes.elevationMargin
-        spread: 1
-        color: Appearance.colors.colShadow
     }
     Rectangle { // Background
         id: searchWidgetContent

.config/quickshell/modules/sidebarLeft/SidebarLeft.qml

@@ -65,12 +65,8 @@ Scope { // Scope
             }
 
             // Background
-            RectangularShadow { // Background shadow
+            StyledRectangularShadow {
-                anchors.fill: sidebarLeftBackground
+                target: sidebarLeftBackground
-                radius: sidebarLeftBackground.radius
-                blur: 1.2 * Appearance.sizes.elevationMargin
-                spread: 1
-                color: Appearance.colors.colShadow
             }
             Rectangle {
                 id: sidebarLeftBackground

.config/quickshell/modules/sidebarLeft/anime/BooruImage.qml

@@ -124,12 +124,8 @@ Button {
                 width: contextMenu.width
                 height: contextMenu.height
 
-                RectangularShadow { // Background shadow
+                StyledRectangularShadow {
-                    anchors.fill: contextMenu
+                    target: contextMenu
-                    radius: contextMenu.radius
-                    blur: 1.2 * Appearance.sizes.elevationMargin
-                    spread: 1
-                    color: Appearance.colors.colShadow
                 }
                 Rectangle {
                     id: contextMenu

.config/quickshell/modules/sidebarRight/SidebarRight.qml

@@ -60,12 +60,8 @@ Scope {
                 implicitHeight: sidebarRightBackground.implicitHeight
                 implicitWidth: sidebarRightBackground.implicitWidth
 
-                RectangularShadow { // Background shadow
+                StyledRectangularShadow {
-                    anchors.fill: sidebarRightBackground
+                    target: sidebarRightBackground
-                    radius: sidebarRightBackground.radius
-                    blur: 1.2 * Appearance.sizes.elevationMargin
-                    spread: 1
-                    color: Appearance.colors.colShadow
                 }
                 Rectangle {
                     id: sidebarRightBackground

.config/quickshell/modules/sidebarRight/todo/TodoWidget.qml

@@ -152,12 +152,9 @@ Item {
     }
 
     // + FAB
-    RectangularShadow { // Background shadow
+    StyledRectangularShadow {
-        anchors.fill: fabButton
+        target: fabButton
         radius: Appearance.rounding.normal
-        blur: 1.2 * Appearance.sizes.elevationMargin
-        spread: 1
-        color: Appearance.colors.colShadow
     }
     Button { 
         id: fabButton