Sync up Frame w/Master branch updates

.github/workflows/run-ppa.yml

@@ -243,7 +243,7 @@ jobs:
             fi
             echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
             # ppa-upload.sh uploads to questing + resolute when series is omitted
-            if ! bash distro/scripts/ppa-upload.sh "$PKG" "$PPA_NAME" ${REBUILD_RELEASE:+"$REBUILD_RELEASE"}; then
+            if ! bash distro/scripts/ppa-upload.sh "$PKG" "$PPA_NAME" "" ${REBUILD_RELEASE:+"$REBUILD_RELEASE"}; then
               echo "::error::Upload failed for $PKG"
               exit 1
             fi

flake.lock

@@ -39,16 +39,16 @@
         ]
       },
       "locked": {
-        "lastModified": 1766725085,
+        "lastModified": 1776854048,
-        "narHash": "sha256-O2aMFdDUYJazFrlwL7aSIHbUSEm3ADVZjmf41uBJfHs=",
+        "narHash": "sha256-lLbV66V3RMNp1l8/UelmR4YzoJ5ONtgvEtiUMJATH/o=",
         "ref": "refs/heads/master",
-        "rev": "41828c4180fb921df7992a5405f5ff05d2ac2fff",
+        "rev": "783c953987dc56ff0601abe6845ed96f1d00495a",
-        "revCount": 715,
+        "revCount": 806,
         "type": "git",
         "url": "https://git.outfoxxed.me/quickshell/quickshell"
       },
       "original": {
-        "rev": "41828c4180fb921df7992a5405f5ff05d2ac2fff",
+        "rev": "783c953987dc56ff0601abe6845ed96f1d00495a",
         "type": "git",
         "url": "https://git.outfoxxed.me/quickshell/quickshell"
       }

flake.nix

@@ -4,7 +4,7 @@
   inputs = {
     nixpkgs.url = "github:nixos/nixpkgs/nixos-unstable";
     quickshell = {
-      url = "git+https://git.outfoxxed.me/quickshell/quickshell?rev=41828c4180fb921df7992a5405f5ff05d2ac2fff";
+      url = "git+https://git.outfoxxed.me/quickshell/quickshell?rev=783c953987dc56ff0601abe6845ed96f1d00495a";
       inputs.nixpkgs.follows = "nixpkgs";
     };
     flake-compat = {

quickshell/Common/KeybindActions.js

@@ -161,10 +161,16 @@ const NIRI_ACTIONS = {
         { id: "focus-monitor-right", label: "Focus Monitor Right" },
         { id: "focus-monitor-down", label: "Focus Monitor Down" },
         { id: "focus-monitor-up", label: "Focus Monitor Up" },
-        { id: "move-column-to-monitor-left", label: "Move to Monitor Left" },
+        { id: "move-column-to-monitor-left", label: "Move Column to Monitor Left" },
-        { id: "move-column-to-monitor-right", label: "Move to Monitor Right" },
+        { id: "move-column-to-monitor-right", label: "Move Column to Monitor Right" },
-        { id: "move-column-to-monitor-down", label: "Move to Monitor Down" },
+        { id: "move-column-to-monitor-down", label: "Move Column to Monitor Down" },
-        { id: "move-column-to-monitor-up", label: "Move to Monitor Up" }
+        { id: "move-column-to-monitor-up", label: "Move Column to Monitor Up" },
+        { id: "move-workspace-to-monitor-left", label: "Move Workspace to Monitor Left" },
+        { id: "move-workspace-to-monitor-right", label: "Move Workspace to Monitor Right" },
+        { id: "move-workspace-to-monitor-down", label: "Move Workspace to Monitor Down" },
+        { id: "move-workspace-to-monitor-up", label: "Move Workspace to Monitor Up" },
+        { id: "move-workspace-to-monitor-next", label: "Move Workspace to Next Monitor" },
+        { id: "move-workspace-to-monitor-previous", label: "Move Workspace to Previous Monitor" }
     ],
     "Screenshot": [
         { id: "screenshot", label: "Screenshot (Interactive)" },

quickshell/Common/SettingsData.qml

@@ -207,11 +207,15 @@ Singleton {
 
     property bool blurEnabled: false
     onBlurEnabledChanged: saveSettings()
+    property bool blurForegroundLayers: true
+    onBlurForegroundLayersChanged: saveSettings()
+    property real blurLayerOutlineOpacity: 0.12
+    onBlurLayerOutlineOpacityChanged: saveSettings()
     property string blurBorderColor: "outline"
     onBlurBorderColorChanged: saveSettings()
     property string blurBorderCustomColor: "#ffffff"
     onBlurBorderCustomColorChanged: saveSettings()
-    property real blurBorderOpacity: 1.0
+    property real blurBorderOpacity: 0.35
     onBlurBorderOpacityChanged: saveSettings()
     property string wallpaperFillMode: "Fill"
     property bool blurredWallpaperLayer: false
@@ -275,7 +279,9 @@ Singleton {
     property int selectedGpuIndex: 0
     property var enabledGpuPciIds: []
     property bool showSystemTray: true
-    property bool systemTrayMonochromeIcons: false
+    property string systemTrayIconTintMode: "none"
+    property int systemTrayIconTintSaturation: 50
+    property int systemTrayIconTintStrength: 135
     property bool showClock: true
     property bool showNotificationButton: true
     property bool showBattery: true

quickshell/Common/Theme.qml

@@ -549,8 +549,8 @@ Singleton {
     property color success: currentThemeData.success || "#4CAF50"
 
     property color primaryHover: Qt.rgba(primary.r, primary.g, primary.b, 0.12)
-    property color primaryHoverLight: Qt.rgba(primary.r, primary.g, primary.b, 0.08)
+    property color primaryHoverLight: Qt.rgba(primary.r, primary.g, primary.b, transparentBlurLayers ? 0.12 : 0.08)
-    property color primaryPressed: Qt.rgba(primary.r, primary.g, primary.b, 0.16)
+    property color primaryPressed: Qt.rgba(primary.r, primary.g, primary.b, transparentBlurLayers ? 0.24 : 0.16)
     property color primarySelected: Qt.rgba(primary.r, primary.g, primary.b, 0.3)
     property color primaryBackground: Qt.rgba(primary.r, primary.g, primary.b, 0.04)
 
@@ -559,17 +559,28 @@ Singleton {
     property color surfaceHover: Qt.rgba(surfaceVariant.r, surfaceVariant.g, surfaceVariant.b, 0.08)
     property color surfacePressed: Qt.rgba(surfaceVariant.r, surfaceVariant.g, surfaceVariant.b, 0.12)
     property color surfaceSelected: Qt.rgba(surfaceVariant.r, surfaceVariant.g, surfaceVariant.b, 0.15)
-    property color surfaceLight: Qt.rgba(surfaceVariant.r, surfaceVariant.g, surfaceVariant.b, 0.1)
+    property color surfaceLight: Qt.rgba(surfaceVariant.r, surfaceVariant.g, surfaceVariant.b, transparentBlurLayers ? 0.3 : 0.1)
     property color surfaceVariantAlpha: Qt.rgba(surfaceVariant.r, surfaceVariant.g, surfaceVariant.b, 0.2)
+
+    readonly property bool blurForegroundLayers: BlurService.enabled && (typeof SettingsData === "undefined" || (SettingsData.blurForegroundLayers ?? true))
+    readonly property bool transparentBlurLayers: BlurService.enabled && !blurForegroundLayers
+    readonly property color readableSurface: withAlpha(surfaceContainer, popupTransparency)
+    readonly property color readableSurfaceHigh: withAlpha(surfaceContainerHigh, popupTransparency)
+    readonly property color floatingSurface: transparentBlurLayers ? "transparent" : readableSurface
+    readonly property color floatingSurfaceHigh: transparentBlurLayers ? "transparent" : readableSurfaceHigh
+    readonly property color nestedSurface: floatingSurfaceHigh
+    readonly property real blurLayerOutlineOpacity: Math.max(0, Math.min(1, typeof SettingsData === "undefined" ? 0.12 : (SettingsData.blurLayerOutlineOpacity ?? 0.12)))
+    readonly property real layerOutlineOpacity: BlurService.enabled ? blurLayerOutlineOpacity : 0.08
+    readonly property int layerOutlineWidth: BlurService.enabled && layerOutlineOpacity > 0 ? 1 : 0
     property color surfaceTextHover: Qt.rgba(surfaceText.r, surfaceText.g, surfaceText.b, 0.08)
     property color surfaceTextAlpha: Qt.rgba(surfaceText.r, surfaceText.g, surfaceText.b, 0.3)
     property color surfaceTextLight: Qt.rgba(surfaceText.r, surfaceText.g, surfaceText.b, 0.06)
     property color surfaceTextMedium: Qt.rgba(surfaceText.r, surfaceText.g, surfaceText.b, 0.7)
 
     property color outlineButton: Qt.rgba(outline.r, outline.g, outline.b, 0.5)
-    property color outlineLight: Qt.rgba(outline.r, outline.g, outline.b, 0.05)
+    property color outlineLight: Qt.rgba(outline.r, outline.g, outline.b, BlurService.enabled ? Math.min(1, layerOutlineOpacity * 0.625) : 0.05)
-    property color outlineMedium: Qt.rgba(outline.r, outline.g, outline.b, 0.08)
+    property color outlineMedium: Qt.rgba(outline.r, outline.g, outline.b, layerOutlineOpacity)
-    property color outlineStrong: Qt.rgba(outline.r, outline.g, outline.b, 0.12)
+    property color outlineStrong: Qt.rgba(outline.r, outline.g, outline.b, BlurService.enabled ? Math.min(1, layerOutlineOpacity * 1.5) : 0.12)
 
     property color errorHover: Qt.rgba(error.r, error.g, error.b, 0.12)
     property color errorPressed: Qt.rgba(error.r, error.g, error.b, 0.16)
@@ -587,6 +598,12 @@ Singleton {
         }
     }
 
+    readonly property color ccTileInactiveBg: transparentBlurLayers ? withAlpha(surfaceContainerHigh, 0.16) : (blurForegroundLayers ? withAlpha(surfaceContainerHigh, Math.min(popupTransparency, 0.24)) : withAlpha(surfaceContainer, popupTransparency))
+    readonly property color ccPillInactiveBg: transparentBlurLayers ? withAlpha(surfaceContainerHigh, 0.08) : nestedSurface
+    readonly property color ccPillInactiveHoverBg: transparentBlurLayers ? withAlpha(primary, 0.10) : primaryPressed
+    readonly property color ccSliderTrackColor: transparentBlurLayers ? surfaceText : surfaceContainerHigh
+    readonly property real ccSliderTrackOpacity: transparentBlurLayers ? 0.18 : popupTransparency
+
     readonly property color ccTileActiveText: {
         switch (SettingsData.controlCenterTileColorMode) {
         case "primaryContainer":

quickshell/Common/settings/SettingsSpec.js

@@ -63,9 +63,11 @@ var SPEC = {
     popoutElevationEnabled: { def: true },
     barElevationEnabled: { def: true },
     blurEnabled: { def: false },
+    blurForegroundLayers: { def: true },
+    blurLayerOutlineOpacity: { def: 0.12, coerce: percentToUnit },
     blurBorderColor: { def: "outline" },
     blurBorderCustomColor: { def: "#ffffff" },
-    blurBorderOpacity: { def: 1.0, coerce: percentToUnit },
+    blurBorderOpacity: { def: 0.35, coerce: percentToUnit },
     wallpaperFillMode: { def: "Fill" },
     blurredWallpaperLayer: { def: false },
     blurWallpaperOnOverview: { def: false },
@@ -83,7 +85,9 @@ var SPEC = {
     selectedGpuIndex: { def: 0 },
     enabledGpuPciIds: { def: [] },
     showSystemTray: { def: true },
-    systemTrayMonochromeIcons: { def: false },
+    systemTrayIconTintMode: { def: "none" },
+    systemTrayIconTintSaturation: { def: 50 },
+    systemTrayIconTintStrength: { def: 135 },
     showClock: { def: true },
     showNotificationButton: { def: true },
     showBattery: { def: true },

quickshell/Modals/Clipboard/ClipboardKeyboardController.qml

@@ -53,6 +53,19 @@ QtObject {
         }
     }
 
+    function togglePinSelected() {
+        const entries = modal.activeTab === "saved" ? ClipboardService.pinnedEntries : ClipboardService.unpinnedEntries;
+        if (!entries || entries.length === 0 || ClipboardService.selectedIndex < 0 || ClipboardService.selectedIndex >= entries.length) {
+            return;
+        }
+        const selectedEntry = entries[ClipboardService.selectedIndex];
+        if (modal.activeTab === "saved") {
+            modal.unpinEntry(selectedEntry);
+        } else {
+            modal.pinEntry(selectedEntry);
+        }
+    }
+
     function handleKey(event) {
         switch (event.key) {
         case Qt.Key_Escape:
@@ -65,6 +78,12 @@ QtObject {
             return;
         case Qt.Key_Down:
         case Qt.Key_Tab:
+            if (event.key === Qt.Key_Tab && (event.modifiers & Qt.ControlModifier)) {
+                modal.activeTab = modal.activeTab === "saved" ? "recents" : "saved";
+                ClipboardService.selectedIndex = 0;
+                event.accepted = true;
+                return;
+            }
             if (!ClipboardService.keyboardNavigationActive) {
                 ClipboardService.keyboardNavigationActive = true;
                 ClipboardService.selectedIndex = 0;
@@ -75,6 +94,12 @@ QtObject {
             return;
         case Qt.Key_Up:
         case Qt.Key_Backtab:
+            if (event.key === Qt.Key_Backtab && (event.modifiers & Qt.ControlModifier)) {
+                modal.activeTab = modal.activeTab === "saved" ? "recents" : "saved";
+                ClipboardService.selectedIndex = 0;
+                event.accepted = true;
+                return;
+            }
             if (!ClipboardService.keyboardNavigationActive) {
                 ClipboardService.keyboardNavigationActive = true;
                 ClipboardService.selectedIndex = 0;
@@ -121,6 +146,12 @@ QtObject {
                     event.accepted = true;
                 }
                 return;
+            case Qt.Key_S:
+                if (ClipboardService.keyboardNavigationActive) {
+                    togglePinSelected();
+                    event.accepted = true;
+                }
+                return;
             }
         }
 

quickshell/Modals/Clipboard/ClipboardKeyboardHints.qml

@@ -9,8 +9,8 @@ Rectangle {
     property bool enterToPaste: false
     readonly property string hintsText: {
         if (!wtypeAvailable)
-            return I18n.tr("Shift+Del: Clear All • Esc: Close");
+            return I18n.tr("Ctrl+Tab: Switch Tab • Ctrl+S: Pin/Unpin • Shift+Del: Clear All • Esc: Close");
-        return enterToPaste ? I18n.tr("Shift+Enter: Copy • Shift+Del: Clear All • Esc: Close", "Keyboard hints when enter-to-paste is enabled") : I18n.tr("Shift+Enter: Paste • Shift+Del: Clear All • Esc: Close");
+        return enterToPaste ? I18n.tr("Ctrl+Tab: Switch Tab • Ctrl+S: Pin/Unpin • Shift+Enter: Copy • Shift+Del: Clear All • Esc: Close", "Keyboard hints when enter-to-paste is enabled") : I18n.tr("Ctrl+Tab: Switch Tab • Ctrl+S: Pin/Unpin • Shift+Enter: Paste • Shift+Del: Clear All • Esc: Close");
     }
 
     height: ClipboardConstants.keyboardHintsHeight

quickshell/Modals/DankLauncherV2/LauncherContextMenu.qml

@@ -372,7 +372,7 @@ Popup {
             anchors.fill: parent
             implicitWidth: Math.max(180, menuColumn.implicitWidth + Theme.spacingS * 2)
             implicitHeight: menuColumn.implicitHeight + Theme.spacingS * 2
-            color: BlurService.enabled ? Theme.surfaceContainer : Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+            color: Theme.floatingSurface
             radius: Theme.cornerRadius
             border.color: BlurService.enabled ? BlurService.borderColor : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
             border.width: BlurService.enabled ? BlurService.borderWidth : 1

quickshell/Modals/DankLauncherV2/ResultsList.qml

@@ -58,9 +58,9 @@ Item {
                         item: items[i],
                         flatIndex: flatIdx,
                         sectionId: sectionId,
-                        height: 52
+                        height: 56
                     });
-                    cumY += 52;
+                    cumY += 56;
                 }
             } else {
                 var cols = root.controller?.getGridColumns(sectionId) ?? root.gridColumns;
@@ -190,124 +190,135 @@ Item {
         }
     }
 
-    DankListView {
+    Item {
-        id: mainListView
+        id: listClip
         anchors.fill: parent
+        anchors.topMargin: BlurService.enabled && stickyHeader.visible ? 32 : 0
         clip: true
-        scrollBarTopMargin: (root.controller?.sections?.length > 0) ? 32 : 0
 
-        model: ScriptModel {
+        DankListView {
-            values: root._visualRows
+            id: mainListView
-            objectProp: "_rowId"
+            y: -listClip.anchors.topMargin
-        }
+            width: parent.width
+            height: parent.height + listClip.anchors.topMargin
+            clip: true
+            scrollBarTopMargin: (root.controller?.sections?.length > 0) ? 32 : 0
 
-        add: null
+            model: ScriptModel {
-        remove: null
+                values: root._visualRows
-        displaced: null
+                objectProp: "_rowId"
-        move: null
-
-        delegate: Item {
-            id: delegateRoot
-            required property var modelData
-            required property int index
-
-            width: mainListView.width
-            height: modelData?.height ?? 52
-
-            SectionHeader {
-                anchors.fill: parent
-                visible: delegateRoot.modelData?.type === "header"
-                section: delegateRoot.modelData?.section ?? null
-                controller: root.controller
-                viewMode: {
-                    var vt = root.controller?.viewModeVersion ?? 0;
-                    void (vt);
-                    return root.controller?.getSectionViewMode(delegateRoot.modelData?.sectionId ?? "") ?? "list";
-                }
-                canChangeViewMode: {
-                    var vt = root.controller?.viewModeVersion ?? 0;
-                    void (vt);
-                    return root.controller?.canChangeSectionViewMode(delegateRoot.modelData?.sectionId ?? "") ?? false;
-                }
-                canCollapse: root.controller?.canCollapseSection(delegateRoot.modelData?.sectionId ?? "") ?? false
             }
 
-            ResultItem {
+            add: null
-                anchors.fill: parent
+            remove: null
-                visible: delegateRoot.modelData?.type === "list_item"
+            displaced: null
-                item: delegateRoot.modelData?.type === "list_item" ? (delegateRoot.modelData?.item ?? null) : null
+            move: null
-                isSelected: delegateRoot.modelData?.type === "list_item" && (delegateRoot.modelData?.flatIndex ?? -1) === root.controller?.selectedFlatIndex
-                controller: root.controller
-                flatIndex: delegateRoot.modelData?.type === "list_item" ? (delegateRoot.modelData?.flatIndex ?? -1) : -1
 
-                onClicked: {
+            delegate: Item {
-                    if (root.controller && delegateRoot.modelData?.item) {
+                id: delegateRoot
-                        root.controller.executeItem(delegateRoot.modelData.item);
+                required property var modelData
+                required property int index
+
+                width: mainListView.width
+                height: modelData?.height ?? 52
+
+                SectionHeader {
+                    anchors.fill: parent
+                    visible: delegateRoot.modelData?.type === "header"
+                    section: delegateRoot.modelData?.section ?? null
+                    controller: root.controller
+                    viewMode: {
+                        var vt = root.controller?.viewModeVersion ?? 0;
+                        void (vt);
+                        return root.controller?.getSectionViewMode(delegateRoot.modelData?.sectionId ?? "") ?? "list";
+                    }
+                    canChangeViewMode: {
+                        var vt = root.controller?.viewModeVersion ?? 0;
+                        void (vt);
+                        return root.controller?.canChangeSectionViewMode(delegateRoot.modelData?.sectionId ?? "") ?? false;
+                    }
+                    canCollapse: root.controller?.canCollapseSection(delegateRoot.modelData?.sectionId ?? "") ?? false
+                }
+
+                ResultItem {
+                    anchors.fill: parent
+                    anchors.topMargin: 2
+                    anchors.bottomMargin: 2
+                    visible: delegateRoot.modelData?.type === "list_item"
+                    item: delegateRoot.modelData?.type === "list_item" ? (delegateRoot.modelData?.item ?? null) : null
+                    isSelected: delegateRoot.modelData?.type === "list_item" && (delegateRoot.modelData?.flatIndex ?? -1) === root.controller?.selectedFlatIndex
+                    controller: root.controller
+                    flatIndex: delegateRoot.modelData?.type === "list_item" ? (delegateRoot.modelData?.flatIndex ?? -1) : -1
+
+                    onClicked: {
+                        if (root.controller && delegateRoot.modelData?.item) {
+                            root.controller.executeItem(delegateRoot.modelData.item);
+                        }
+                    }
+
+                    onRightClicked: (mouseX, mouseY) => {
+                        root.itemRightClicked(delegateRoot.modelData?.flatIndex ?? -1, delegateRoot.modelData?.item ?? null, mouseX, mouseY);
                     }
                 }
 
-                onRightClicked: (mouseX, mouseY) => {
+                Row {
-                    root.itemRightClicked(delegateRoot.modelData?.flatIndex ?? -1, delegateRoot.modelData?.item ?? null, mouseX, mouseY);
+                    id: gridRowContent
-                }
+                    anchors.fill: parent
-            }
+                    visible: delegateRoot.modelData?.type === "grid_row"
 
-            Row {
+                    Repeater {
-                id: gridRowContent
+                        model: delegateRoot.modelData?.type === "grid_row" ? (delegateRoot.modelData?.items ?? []) : []
-                anchors.fill: parent
-                visible: delegateRoot.modelData?.type === "grid_row"
 
-                Repeater {
+                        Item {
-                    model: delegateRoot.modelData?.type === "grid_row" ? (delegateRoot.modelData?.items ?? []) : []
+                            id: gridCellDelegate
+                            required property var modelData
+                            required property int index
 
-                    Item {
+                            readonly property real cellWidth: delegateRoot.modelData?.viewMode === "tile" ? Math.floor(delegateRoot.width / 3) : Math.floor(delegateRoot.width / (delegateRoot.modelData?.cols ?? root.gridColumns))
-                        id: gridCellDelegate
-                        required property var modelData
-                        required property int index
 
-                        readonly property real cellWidth: delegateRoot.modelData?.viewMode === "tile" ? Math.floor(delegateRoot.width / 3) : Math.floor(delegateRoot.width / (delegateRoot.modelData?.cols ?? root.gridColumns))
+                            width: cellWidth
+                            height: delegateRoot.height
 
-                        width: cellWidth
+                            GridItem {
-                        height: delegateRoot.height
+                                width: parent.width - 4
+                                height: parent.height - 4
+                                anchors.centerIn: parent
+                                visible: delegateRoot.modelData?.viewMode === "grid"
+                                item: gridCellDelegate.modelData?.item ?? null
+                                isSelected: (gridCellDelegate.modelData?.flatIndex ?? -1) === root.controller?.selectedFlatIndex
+                                controller: root.controller
+                                flatIndex: gridCellDelegate.modelData?.flatIndex ?? -1
 
-                        GridItem {
+                                onClicked: {
-                            width: parent.width - 4
+                                    if (root.controller && gridCellDelegate.modelData?.item) {
-                            height: parent.height - 4
+                                        root.controller.executeItem(gridCellDelegate.modelData.item);
-                            anchors.centerIn: parent
+                                    }
-                            visible: delegateRoot.modelData?.viewMode === "grid"
+                                }
-                            item: gridCellDelegate.modelData?.item ?? null
-                            isSelected: (gridCellDelegate.modelData?.flatIndex ?? -1) === root.controller?.selectedFlatIndex
-                            controller: root.controller
-                            flatIndex: gridCellDelegate.modelData?.flatIndex ?? -1
 
-                            onClicked: {
+                                onRightClicked: (mouseX, mouseY) => {
-                                if (root.controller && gridCellDelegate.modelData?.item) {
+                                    root.itemRightClicked(gridCellDelegate.modelData?.flatIndex ?? -1, gridCellDelegate.modelData?.item ?? null, mouseX, mouseY);
-                                    root.controller.executeItem(gridCellDelegate.modelData.item);
                                 }
                             }
 
-                            onRightClicked: (mouseX, mouseY) => {
+                            TileItem {
-                                root.itemRightClicked(gridCellDelegate.modelData?.flatIndex ?? -1, gridCellDelegate.modelData?.item ?? null, mouseX, mouseY);
+                                width: parent.width - 4
-                            }
+                                height: parent.height - 4
-                        }
+                                anchors.centerIn: parent
+                                visible: delegateRoot.modelData?.viewMode === "tile"
+                                item: gridCellDelegate.modelData?.item ?? null
+                                isSelected: (gridCellDelegate.modelData?.flatIndex ?? -1) === root.controller?.selectedFlatIndex
+                                controller: root.controller
+                                flatIndex: gridCellDelegate.modelData?.flatIndex ?? -1
 
-                        TileItem {
+                                onClicked: {
-                            width: parent.width - 4
+                                    if (root.controller && gridCellDelegate.modelData?.item) {
-                            height: parent.height - 4
+                                        root.controller.executeItem(gridCellDelegate.modelData.item);
-                            anchors.centerIn: parent
+                                    }
-                            visible: delegateRoot.modelData?.viewMode === "tile"
-                            item: gridCellDelegate.modelData?.item ?? null
-                            isSelected: (gridCellDelegate.modelData?.flatIndex ?? -1) === root.controller?.selectedFlatIndex
-                            controller: root.controller
-                            flatIndex: gridCellDelegate.modelData?.flatIndex ?? -1
-
-                            onClicked: {
-                                if (root.controller && gridCellDelegate.modelData?.item) {
-                                    root.controller.executeItem(gridCellDelegate.modelData.item);
                                 }
-                            }
 
-                            onRightClicked: (mouseX, mouseY) => {
+                                onRightClicked: (mouseX, mouseY) => {
-                                root.itemRightClicked(gridCellDelegate.modelData?.flatIndex ?? -1, gridCellDelegate.modelData?.item ?? null, mouseX, mouseY);
+                                    root.itemRightClicked(gridCellDelegate.modelData?.flatIndex ?? -1, gridCellDelegate.modelData?.item ?? null, mouseX, mouseY);
+                                }
                             }
                         }
                     }
@@ -365,7 +376,7 @@ Item {
         anchors.top: parent.top
         height: 32
         z: 101
-        color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+        color: Theme.floatingSurface
         visible: stickyHeaderSection !== null
 
         readonly property int versionTrigger: root.controller?.viewModeVersion ?? 0

quickshell/Modals/DankLauncherV2/Section.qml

@@ -50,7 +50,7 @@ Item {
             id: listComponent
 
             Column {
-                spacing: 2
+                spacing: 4
                 width: contentLoader.width
 
                 Repeater {

quickshell/Modules/ControlCenter/BuiltinPlugins/CupsWidget.qml

@@ -34,7 +34,9 @@ PluginComponent {
             id: detailRoot
             implicitHeight: detailColumn.implicitHeight + Theme.spacingM * 2
             radius: Theme.cornerRadius
-            color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+            color: Theme.nestedSurface
+            border.color: Theme.outlineMedium
+            border.width: Theme.layerOutlineWidth
 
             DankActionButton {
                 anchors.top: parent.top

quickshell/Modules/ControlCenter/Components/ActionTile.qml

@@ -27,12 +27,12 @@ Rectangle {
     }
 
     readonly property color _tileBgActive: Theme.ccTileActiveBg
-    readonly property color _tileBgInactive: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    readonly property color _tileBgInactive: Theme.ccPillInactiveBg
     readonly property color _tileRingActive: Theme.ccTileRing
 
     color: isActive ? _tileBgActive : _tileBgInactive
-    border.color: isActive ? _tileRingActive : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+    border.color: isActive ? _tileRingActive : Theme.outlineMedium
-    border.width: isActive ? 1 : 1
+    border.width: isActive ? 1 : Theme.layerOutlineWidth
     opacity: enabled ? 1.0 : 0.6
 
     function hoverTint(base) {

quickshell/Modules/ControlCenter/Components/DragDropGrid.qml

@@ -575,7 +575,8 @@ Column {
                 anchors.centerIn: parent
                 width: parent.width
                 height: 14
-                property color sliderTrackColor: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+                sliderTrackColor: Theme.ccSliderTrackColor
+                sliderTrackOpacity: Theme.ccSliderTrackOpacity
             }
         }
     }
@@ -597,7 +598,8 @@ Column {
                 instanceId: widgetData.instanceId || ""
                 screenName: root.screenName
                 parentScreen: root.parentScreen
-                property color sliderTrackColor: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+                sliderTrackColor: Theme.ccSliderTrackColor
+                sliderTrackOpacity: Theme.ccSliderTrackOpacity
 
                 onIconClicked: {
                     if (!root.editMode && DisplayService.devices && DisplayService.devices.length > 1) {
@@ -620,7 +622,8 @@ Column {
                 anchors.centerIn: parent
                 width: parent.width
                 height: 14
-                property color sliderTrackColor: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+                sliderTrackColor: Theme.ccSliderTrackColor
+                sliderTrackOpacity: Theme.ccSliderTrackOpacity
             }
         }
     }

quickshell/Modules/ControlCenter/Components/EditControls.qml

@@ -1,5 +1,6 @@
 import QtQuick
-import QtQuick.Controls
+import Quickshell
+import Quickshell.Wayland
 import qs.Common
 import qs.Widgets
 
@@ -10,7 +11,11 @@ Row {
     LayoutMirroring.childrenInherit: true
 
     property var availableWidgets: []
-    property Item popoutContent: null
+    property var popupScreen: null
+    property real popoutX: 0
+    property real popoutY: 0
+    property real popoutWidth: 0
+    property real popoutHeight: 0
 
     signal addWidget(string widgetId)
     signal resetToDefault
@@ -19,121 +24,190 @@ Row {
     height: 48
     spacing: Theme.spacingS
 
-    onAddWidget: addWidgetPopup.close()
+    function openWidgetLibrary() {
+        if (popupScreen)
+            addWidgetWindow.screen = popupScreen;
+        addWidgetWindow.visible = true;
+    }
 
-    Popup {
+    function closeWidgetLibrary() {
-        id: addWidgetPopup
+        addWidgetWindow.visible = false;
-        parent: popoutContent
+    }
-        x: parent ? Math.round((parent.width - width) / 2) : 0
-        y: parent ? Math.round((parent.height - height) / 2) : 0
-        width: 400
-        height: 300
-        modal: false
-        focus: true
-        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
 
-        background: Rectangle {
+    onAddWidget: closeWidgetLibrary()
-            color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+    onVisibleChanged: {
-            border.color: Theme.primarySelected
+        if (!visible)
-            border.width: 0
+            closeWidgetLibrary();
-            radius: Theme.cornerRadius
+    }
+
+    PanelWindow {
+        id: addWidgetWindow
+
+        screen: root.popupScreen
+        visible: false
+        color: "transparent"
+
+        WlrLayershell.namespace: "dms:control-center-widget-library"
+        WlrLayershell.layer: WlrLayershell.Overlay
+        WlrLayershell.exclusiveZone: -1
+        WlrLayershell.keyboardFocus: visible ? WlrKeyboardFocus.Exclusive : WlrKeyboardFocus.None
+
+        anchors {
+            top: true
+            left: true
+            right: true
+            bottom: true
         }
 
-        contentItem: Item {
+        readonly property bool blurActive: Theme.blurForegroundLayers || Theme.transparentBlurLayers
+        readonly property real surfaceAlpha: blurActive ? Math.min(Theme.popupTransparency, Theme.transparentBlurLayers ? 0.24 : 0.72) : Theme.popupTransparency
+        readonly property real rowAlpha: blurActive ? Math.min(Theme.popupTransparency, Theme.transparentBlurLayers ? 0.10 : 0.52) : Theme.popupTransparency
+        readonly property int panelWidth: 400
+        readonly property int panelHeight: 300
+
+        WindowBlur {
+            targetWindow: addWidgetWindow
+            blurX: widgetLibraryPanel.x
+            blurY: widgetLibraryPanel.y
+            blurWidth: addWidgetWindow.visible ? widgetLibraryPanel.width : 0
+            blurHeight: addWidgetWindow.visible ? widgetLibraryPanel.height : 0
+            blurRadius: Theme.cornerRadius
+        }
+
+        MouseArea {
             anchors.fill: parent
-            anchors.margins: Theme.spacingL
+            acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
+            onClicked: root.closeWidgetLibrary()
+        }
 
-            Row {
+        FocusScope {
-                id: headerRow
+            anchors.fill: parent
-                anchors.top: parent.top
+            focus: addWidgetWindow.visible
-                anchors.left: parent.left
-                anchors.right: parent.right
-                spacing: Theme.spacingM
 
-                DankIcon {
+            Keys.onEscapePressed: event => {
-                    name: "add_circle"
+                root.closeWidgetLibrary();
-                    size: Theme.iconSize
+                event.accepted = true;
-                    color: Theme.primary
+            }
-                    anchors.verticalCenter: parent.verticalCenter
+        }
-                }
 
-                Typography {
+        Rectangle {
-                    text: I18n.tr("Add Widget")
+            id: widgetLibraryPanel
-                    style: Typography.Style.Subtitle
+
-                    color: Theme.surfaceText
+            width: addWidgetWindow.panelWidth
-                    anchors.verticalCenter: parent.verticalCenter
+            height: addWidgetWindow.panelHeight
-                }
+            x: Math.round((root.popoutWidth > 0 ? root.popoutX + (root.popoutWidth - width) / 2 : (addWidgetWindow.width - width) / 2))
+            y: Math.round((root.popoutHeight > 0 ? root.popoutY + (root.popoutHeight - height) / 2 : (addWidgetWindow.height - height) / 2))
+            radius: Theme.cornerRadius
+            color: Theme.withAlpha(Theme.surfaceContainer, addWidgetWindow.surfaceAlpha)
+            border.color: addWidgetWindow.blurActive ? Theme.outlineMedium : Theme.primarySelected
+            border.width: addWidgetWindow.blurActive ? Theme.layerOutlineWidth : 0
+            antialiasing: true
+
+            MouseArea {
+                anchors.fill: parent
+                acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
+                onClicked: mouse => mouse.accepted = true
             }
 
-            DankListView {
+            Item {
-                anchors.top: headerRow.bottom
+                anchors.fill: parent
-                anchors.topMargin: Theme.spacingM
+                anchors.margins: Theme.spacingL
-                anchors.left: parent.left
-                anchors.right: parent.right
-                anchors.bottom: parent.bottom
-                spacing: Theme.spacingS
-                clip: true
-                model: root.availableWidgets
 
-                delegate: Rectangle {
+                Row {
-                    width: 400 - Theme.spacingL * 2
+                    id: headerRow
-                    height: 50
+                    anchors.top: parent.top
-                    radius: Theme.cornerRadius
+                    anchors.left: parent.left
-                    color: widgetMouseArea.containsMouse ? Theme.primaryHover : Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+                    anchors.right: parent.right
-                    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+                    spacing: Theme.spacingM
-                    border.width: 0
 
-                    Row {
+                    DankIcon {
-                        anchors.fill: parent
+                        name: "add_circle"
-                        anchors.margins: Theme.spacingM
+                        size: Theme.iconSize
-                        spacing: Theme.spacingM
+                        color: Theme.primary
-
+                        anchors.verticalCenter: parent.verticalCenter
-                        DankIcon {
-                            name: modelData.icon
-                            size: Theme.iconSize
-                            color: Theme.primary
-                            anchors.verticalCenter: parent.verticalCenter
-                        }
-
-                        Column {
-                            anchors.verticalCenter: parent.verticalCenter
-                            spacing: 2
-                            width: 400 - Theme.spacingL * 2 - Theme.iconSize - Theme.spacingM * 3 - Theme.iconSize
-
-                            Typography {
-                                text: modelData.text
-                                style: Typography.Style.Body
-                                color: Theme.surfaceText
-                                elide: Text.ElideRight
-                                width: parent.width
-                                horizontalAlignment: Text.AlignLeft
-                            }
-
-                            Typography {
-                                text: modelData.description
-                                style: Typography.Style.Caption
-                                color: Theme.outline
-                                elide: Text.ElideRight
-                                width: parent.width
-                                horizontalAlignment: Text.AlignLeft
-                            }
-                        }
-
-                        DankIcon {
-                            name: "add"
-                            size: Theme.iconSize - 4
-                            color: Theme.primary
-                            anchors.verticalCenter: parent.verticalCenter
-                        }
                     }
 
-                    MouseArea {
+                    Typography {
-                        id: widgetMouseArea
+                        text: I18n.tr("Add Widget")
-                        anchors.fill: parent
+                        style: Typography.Style.Subtitle
-                        hoverEnabled: true
+                        color: Theme.surfaceText
-                        cursorShape: Qt.PointingHandCursor
+                        anchors.verticalCenter: parent.verticalCenter
-                        onClicked: {
+                    }
-                            root.addWidget(modelData.id);
+                }
+
+                DankListView {
+                    id: widgetList
+
+                    anchors.top: headerRow.bottom
+                    anchors.topMargin: Theme.spacingM
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    anchors.bottom: parent.bottom
+                    spacing: Theme.spacingS
+                    clip: true
+                    model: root.availableWidgets
+
+                    delegate: Rectangle {
+                        width: widgetList.width
+                        height: 50
+                        radius: Theme.cornerRadius
+                        color: widgetMouseArea.containsMouse ? Theme.withAlpha(Theme.primary, addWidgetWindow.blurActive ? 0.12 : 0.08) : Theme.withAlpha(Theme.surfaceContainerHigh, addWidgetWindow.rowAlpha)
+                        border.color: Theme.outlineMedium
+                        border.width: Theme.layerOutlineWidth
+                        antialiasing: true
+
+                        Row {
+                            anchors.fill: parent
+                            anchors.margins: Theme.spacingM
+                            spacing: Theme.spacingM
+
+                            DankIcon {
+                                name: modelData.icon
+                                size: Theme.iconSize
+                                color: Theme.primary
+                                anchors.verticalCenter: parent.verticalCenter
+                            }
+
+                            Column {
+                                anchors.verticalCenter: parent.verticalCenter
+                                spacing: 2
+                                width: parent.width - Theme.iconSize * 2 - Theme.spacingM * 3
+
+                                Typography {
+                                    text: modelData.text
+                                    style: Typography.Style.Body
+                                    color: Theme.surfaceText
+                                    elide: Text.ElideRight
+                                    width: parent.width
+                                    horizontalAlignment: Text.AlignLeft
+                                }
+
+                                Typography {
+                                    text: modelData.description
+                                    style: Typography.Style.Caption
+                                    color: Theme.outline
+                                    elide: Text.ElideRight
+                                    width: parent.width
+                                    horizontalAlignment: Text.AlignLeft
+                                }
+                            }
+
+                            DankIcon {
+                                name: "add"
+                                size: Theme.iconSize - 4
+                                color: Theme.primary
+                                anchors.verticalCenter: parent.verticalCenter
+                            }
+                        }
+
+                        MouseArea {
+                            id: widgetMouseArea
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: {
+                                root.addWidget(modelData.id);
+                            }
                         }
                     }
                 }
@@ -171,7 +245,7 @@ Row {
         MouseArea {
             anchors.fill: parent
             cursorShape: Qt.PointingHandCursor
-            onClicked: addWidgetPopup.open()
+            onClicked: root.openWidgetLibrary()
         }
     }
 

quickshell/Modules/ControlCenter/Components/HeaderPane.qml

@@ -21,9 +21,9 @@ Rectangle {
 
     implicitHeight: 70
     radius: Theme.cornerRadius
-    color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    color: Theme.nestedSurface
-    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+    border.color: Theme.outlineMedium
-    border.width: 0
+    border.width: Theme.layerOutlineWidth
 
     Row {
         anchors.left: parent.left

quickshell/Modules/ControlCenter/ControlCenterPopout.qml

@@ -75,7 +75,7 @@ DankPopout {
         }
     }
 
-    readonly property color _containerBg: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    readonly property color _containerBg: Theme.nestedSurface
 
     function openWithSection(section) {
         StateUtils.openWithSection(root, section);
@@ -286,7 +286,11 @@ DankPopout {
                         id: editControls
                         width: parent.width
                         visible: editMode
-                        popoutContent: controlContent
+                        popupScreen: root.screen
+                        popoutX: root.alignedX
+                        popoutY: root.alignedY
+                        popoutWidth: root.alignedWidth
+                        popoutHeight: root.alignedHeight
                         availableWidgets: {
                             if (!editMode)
                                 return [];
@@ -294,9 +298,6 @@ DankPopout {
                             const allWidgets = widgetModel.baseWidgetDefinitions.concat(widgetModel.getPluginWidgets());
                             return allWidgets.filter(w => w.allowMultiple || !existingIds.includes(w.id));
                         }
-                        onAddWidget: widgetId => widgetModel.addWidget(widgetId)
-                        onResetToDefault: () => widgetModel.resetToDefault()
-                        onClearAll: () => widgetModel.clearAll()
                     }
                 }
             }

quickshell/Modules/ControlCenter/Details/AudioInputDetail.qml

@@ -18,9 +18,9 @@ Rectangle {
 
     implicitHeight: headerRow.height + (hasInputVolumeSliderInCC ? 0 : volumeSlider.height) + audioContent.height + Theme.spacingM
     radius: Theme.cornerRadius
-    color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    color: Theme.nestedSurface
-    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+    border.color: Theme.outlineMedium
-    border.width: 0
+    border.width: Theme.layerOutlineWidth
 
     Row {
         id: headerRow
@@ -123,6 +123,8 @@ Rectangle {
             unit: "%"
             valueOverride: actualVolumePercent
             thumbOutlineColor: Theme.surfaceVariant
+            trackColor: Theme.ccSliderTrackColor
+            trackOpacity: Theme.ccSliderTrackOpacity
 
             onSliderValueChanged: function (newValue) {
                 if (AudioService.source && AudioService.source.audio) {

quickshell/Modules/ControlCenter/Details/AudioOutputDetail.qml

@@ -18,9 +18,9 @@ Rectangle {
 
     implicitHeight: headerRow.height + (!hasVolumeSliderInCC ? volumeSlider.height : 0) + audioContent.height + Theme.spacingM
     radius: Theme.cornerRadius
-    color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    color: Theme.nestedSurface
-    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+    border.color: Theme.outlineMedium
-    border.width: 0
+    border.width: Theme.layerOutlineWidth
 
     Row {
         id: headerRow
@@ -132,6 +132,8 @@ Rectangle {
             unit: "%"
             valueOverride: actualVolumePercent
             thumbOutlineColor: Theme.surfaceVariant
+            trackColor: Theme.ccSliderTrackColor
+            trackOpacity: Theme.ccSliderTrackOpacity
 
             onSliderValueChanged: function (newValue) {
                 if (AudioService.sink && AudioService.sink.audio) {
@@ -448,6 +450,7 @@ Rectangle {
                         Item {
                             id: appVolumeRow
                             property color sliderTrackColor: "transparent"
+                            property real sliderTrackOpacity: Theme.ccSliderTrackOpacity
                             anchors.centerIn: parent
 
                             height: 40
@@ -519,7 +522,8 @@ Rectangle {
                                 unit: "%"
                                 valueOverride: actualVolumePercent
                                 thumbOutlineColor: Theme.surfaceContainer
-                                trackColor: appVolumeRow.sliderTrackColor.a > 0 ? appVolumeRow.sliderTrackColor : Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+                                trackColor: appVolumeRow.sliderTrackColor.a > 0 ? appVolumeRow.sliderTrackColor : Theme.ccSliderTrackColor
+                                trackOpacity: appVolumeRow.sliderTrackOpacity
 
                                 onSliderValueChanged: function (newValue) {
                                     if (modelData) {

quickshell/Modules/ControlCenter/Details/BatteryDetail.qml

@@ -12,9 +12,9 @@ Rectangle {
 
     implicitHeight: contentColumn.implicitHeight + Theme.spacingL * 2
     radius: Theme.cornerRadius
-    color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    color: Theme.nestedSurface
-    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+    border.color: Theme.outlineMedium
-    border.width: 0
+    border.width: Theme.layerOutlineWidth
 
     function isActiveProfile(profile) {
         if (typeof PowerProfiles === "undefined") {

quickshell/Modules/ControlCenter/Details/BluetoothCodecSelector.qml

@@ -153,9 +153,9 @@ Item {
         width: 320
         height: contentColumn.implicitHeight + Theme.spacingL * 2
         radius: Theme.cornerRadius
-        color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+        color: Theme.floatingSurface
-        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+        border.color: Theme.outlineMedium
-        border.width: 0
+        border.width: Theme.layerOutlineWidth
         opacity: modalVisible ? 1 : 0
         scale: modalVisible ? 1 : 0.9
 

quickshell/Modules/ControlCenter/Details/BluetoothDetail.qml

@@ -20,9 +20,9 @@ Rectangle {
         return headerRow.height + bluetoothContent.height + Theme.spacingM;
     }
     radius: Theme.cornerRadius
-    color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    color: Theme.nestedSurface
-    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+    border.color: Theme.outlineMedium
-    border.width: 0
+    border.width: Theme.layerOutlineWidth
 
     property var bluetoothCodecModalRef: null
     property var devicesBeingPaired: new Set()
@@ -115,7 +115,7 @@ Rectangle {
             height: 36
             radius: 18
             color: scanMouseArea.containsMouse && adapterEnabled ? Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency) : "transparent"
-            border.color: adapterEnabled ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+            border.color: adapterEnabled ? Theme.primary : Theme.outlineStrong
             border.width: 0
             visible: adapterEnabled
 
@@ -434,7 +434,7 @@ Rectangle {
             Rectangle {
                 width: parent.width
                 height: 1
-                color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+                color: Theme.outlineStrong
                 visible: pairedRepeater.count > 0 && availableRepeater.count > 0
             }
 
@@ -609,7 +609,7 @@ Rectangle {
             color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
             radius: Theme.cornerRadius
             border.width: 0
-            border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+            border.color: Theme.outlineStrong
         }
 
         MenuItem {

quickshell/Modules/ControlCenter/Details/BrightnessDetail.qml

@@ -106,9 +106,9 @@ Rectangle {
         return brightnessContent.height + Theme.spacingM;
     }
     radius: Theme.cornerRadius
-    color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    color: Theme.nestedSurface
-    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+    border.color: Theme.outlineMedium
-    border.width: 0
+    border.width: Theme.layerOutlineWidth
 
     DankFlickable {
         id: brightnessContent

quickshell/Modules/ControlCenter/Details/DiskUsageDetail.qml

@@ -16,9 +16,9 @@ Rectangle {
 
     implicitHeight: diskContent.height + Theme.spacingM
     radius: Theme.cornerRadius
-    color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    color: Theme.nestedSurface
-    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+    border.color: Theme.outlineMedium
-    border.width: 0
+    border.width: Theme.layerOutlineWidth
 
     Component.onCompleted: {
         DgopService.addRef(["diskmounts"]);

quickshell/Modules/ControlCenter/Details/DoNotDisturbDetail.qml

@@ -10,9 +10,9 @@ Rectangle {
 
     implicitHeight: contentColumn.implicitHeight + Theme.spacingL * 2
     radius: Theme.cornerRadius
-    color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    color: Theme.nestedSurface
-    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+    border.color: Theme.outlineMedium
-    border.width: 0
+    border.width: Theme.layerOutlineWidth
 
     property real nowMs: Date.now()
 
@@ -149,8 +149,8 @@ Rectangle {
                     width: (contentColumn.width - Theme.spacingS * 2) / 3
                     height: 36
                     radius: Theme.cornerRadius
-                    color: presetArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.16) : Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+                    color: presetArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.16) : Theme.floatingSurface
-                    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+                    border.color: Theme.outlineStrong
                     border.width: 1
 
                     StyledText {
@@ -183,8 +183,8 @@ Rectangle {
                 width: (contentColumn.width - Theme.spacingS) / 2
                 height: 36
                 radius: Theme.cornerRadius
-                color: foreverArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.16) : Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+                color: foreverArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.16) : Theme.floatingSurface
-                border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+                border.color: Theme.outlineStrong
                 border.width: 1
 
                 Row {
@@ -221,8 +221,8 @@ Rectangle {
                 height: 36
                 radius: Theme.cornerRadius
                 visible: SessionData.doNotDisturb
-                color: offArea.containsMouse ? Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.18) : Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+                color: offArea.containsMouse ? Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.18) : Theme.floatingSurface
-                border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+                border.color: Theme.outlineStrong
                 border.width: 1
 
                 Row {

quickshell/Modules/ControlCenter/Details/NetworkDetail.qml

@@ -22,9 +22,9 @@ Rectangle {
         return headerRow.height + wifiOffContent.height + Theme.spacingM;
     }
     radius: Theme.cornerRadius
-    color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    color: Theme.nestedSurface
-    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+    border.color: Theme.outlineMedium
-    border.width: 0
+    border.width: Theme.layerOutlineWidth
 
     Component.onCompleted: {
         NetworkService.addRef();

quickshell/Modules/ControlCenter/Widgets/AudioSliderRow.qml

@@ -11,6 +11,7 @@ Row {
 
     property var defaultSink: AudioService.sink
     property color sliderTrackColor: "transparent"
+    property real sliderTrackOpacity: Theme.ccSliderTrackOpacity
 
     height: 40
     spacing: 0
@@ -80,7 +81,8 @@ Row {
         unit: "%"
         valueOverride: actualVolumePercent
         thumbOutlineColor: Theme.surfaceContainer
-        trackColor: root.sliderTrackColor.a > 0 ? root.sliderTrackColor : Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+        trackColor: root.sliderTrackColor.a > 0 ? root.sliderTrackColor : Theme.ccSliderTrackColor
+        trackOpacity: root.sliderTrackOpacity
 
         onSliderValueChanged: function (newValue) {
             if (defaultSink?.audio) {

quickshell/Modules/ControlCenter/Widgets/BrightnessSliderRow.qml

@@ -13,6 +13,8 @@ Row {
     property string instanceId: ""
     property string screenName: ""
     property var parentScreen: null
+    property color sliderTrackColor: "transparent"
+    property real sliderTrackOpacity: Theme.ccSliderTrackOpacity
 
     signal iconClicked
 
@@ -184,7 +186,8 @@ Row {
             }
         }
         thumbOutlineColor: Theme.surfaceContainer
-        trackColor: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+        trackColor: root.sliderTrackColor.a > 0 ? root.sliderTrackColor : Theme.ccSliderTrackColor
+        trackOpacity: root.sliderTrackOpacity
 
         Binding on value {
             value: root.targetBrightness

quickshell/Modules/ControlCenter/Widgets/CompactSlider.qml

@@ -20,9 +20,9 @@ Rectangle {
     width: parent ? parent.width : 200
     height: 60
     radius: Theme.cornerRadius
-    color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    color: Theme.nestedSurface
-    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+    border.color: Theme.outlineMedium
-    border.width: 0
+    border.width: Theme.layerOutlineWidth
     opacity: enabled ? 1.0 : 0.6
 
     Row {
@@ -64,6 +64,8 @@ Rectangle {
             minimum: Math.round(root.minimumValue * 100)
             maximum: Math.round(root.maximumValue * 100)
             value: Math.round(root.value * 100)
+            trackColor: Theme.ccSliderTrackColor
+            trackOpacity: Theme.ccSliderTrackOpacity
             onSliderValueChanged: root.sliderValueChanged(newValue / 100.0)
         }
     }

quickshell/Modules/ControlCenter/Widgets/CompoundPill.qml

@@ -29,23 +29,21 @@ Rectangle {
         return Theme.isLightMode ? Qt.darker(base, factor) : Qt.lighter(base, factor);
     }
 
-    readonly property color _containerBg: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    readonly property color _containerBg: Theme.ccPillInactiveBg
 
     color: {
-        const baseColor = bodyMouse.containsMouse ? Theme.primaryPressed : _containerBg;
+        const baseColor = bodyMouse.containsMouse ? Theme.ccPillInactiveHoverBg : _containerBg;
         return baseColor;
     }
-    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.10)
+    border.color: Theme.outlineMedium
-    border.width: 0
+    border.width: Theme.layerOutlineWidth
     antialiasing: true
 
     readonly property color _labelPrimary: Theme.surfaceText
     readonly property color _labelSecondary: Theme.surfaceVariantText
     readonly property color _tileBgActive: Theme.ccTileActiveBg
     readonly property color _tileBgInactive: {
-        const transparency = Theme.popupTransparency;
+        return Theme.ccTileInactiveBg;
-        const surface = Theme.surfaceContainer || Qt.rgba(0.1, 0.1, 0.1, 1);
-        return Qt.rgba(surface.r, surface.g, surface.b, transparency);
     }
     readonly property color _tileRingActive: Theme.ccTileRing
     readonly property color _tileRingInactive: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.18)
@@ -92,8 +90,8 @@ Rectangle {
             anchors.verticalCenter: parent.verticalCenter
             radius: _tileRadius
             color: isActive ? _tileBgActive : _tileBgInactive
-            border.color: isActive ? _tileRingActive : "transparent"
+            border.color: isActive ? _tileRingActive : Theme.outlineMedium
-            border.width: isActive ? 1 : 0
+            border.width: isActive ? 1 : Theme.layerOutlineWidth
             antialiasing: true
 
             Rectangle {

quickshell/Modules/ControlCenter/Widgets/InputAudioSliderRow.qml

@@ -11,6 +11,7 @@ Row {
 
     property var defaultSource: AudioService.source
     property color sliderTrackColor: "transparent"
+    property real sliderTrackOpacity: Theme.ccSliderTrackOpacity
 
     height: 40
     spacing: 0
@@ -73,7 +74,8 @@ Row {
         unit: "%"
         valueOverride: actualVolumePercent
         thumbOutlineColor: Theme.surfaceContainer
-        trackColor: root.sliderTrackColor.a > 0 ? root.sliderTrackColor : Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+        trackColor: root.sliderTrackColor.a > 0 ? root.sliderTrackColor : Theme.ccSliderTrackColor
+        trackOpacity: root.sliderTrackOpacity
         onSliderValueChanged: function (newValue) {
             if (defaultSource?.audio) {
                 SessionData.suppressOSDTemporarily();

quickshell/Modules/ControlCenter/Widgets/SmallBatteryButton.qml

@@ -28,7 +28,7 @@ Rectangle {
     }
 
     readonly property color _tileBgActive: Theme.ccTileActiveBg
-    readonly property color _tileBgInactive: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    readonly property color _tileBgInactive: Theme.ccPillInactiveBg
     readonly property color _tileRingActive: Theme.ccTileRing
     readonly property color _tileIconActive: Theme.ccTileActiveText
     readonly property color _tileIconInactive: Theme.ccTileInactiveIcon
@@ -36,11 +36,11 @@ Rectangle {
     color: {
         if (isActive)
             return _tileBgActive;
-        const baseColor = mouseArea.containsMouse ? Theme.primaryPressed : _tileBgInactive;
+        const baseColor = mouseArea.containsMouse ? Theme.ccPillInactiveHoverBg : _tileBgInactive;
         return baseColor;
     }
-    border.color: isActive ? _tileRingActive : "transparent"
+    border.color: isActive ? _tileRingActive : Theme.outlineMedium
-    border.width: isActive ? 1 : 0
+    border.width: isActive ? 1 : Theme.layerOutlineWidth
     antialiasing: true
     opacity: enabled ? 1.0 : 0.6
 

quickshell/Modules/ControlCenter/Widgets/SmallDiskUsageButton.qml

@@ -38,11 +38,11 @@ Rectangle {
         return Theme.isLightMode ? Qt.darker(base, factor) : Qt.lighter(base, factor);
     }
 
-    readonly property color _tileBg: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    readonly property color _tileBg: Theme.ccPillInactiveBg
 
-    color: mouseArea.containsMouse ? Theme.primaryPressed : _tileBg
+    color: mouseArea.containsMouse ? Theme.ccPillInactiveHoverBg : _tileBg
-    border.color: "transparent"
+    border.color: Theme.outlineMedium
-    border.width: 0
+    border.width: Theme.layerOutlineWidth
     antialiasing: true
     opacity: enabled ? 1.0 : 0.6
 

quickshell/Modules/ControlCenter/Widgets/SmallToggleButton.qml

@@ -26,7 +26,7 @@ Rectangle {
     }
 
     readonly property color _tileBgActive: Theme.ccTileActiveBg
-    readonly property color _tileBgInactive: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    readonly property color _tileBgInactive: Theme.ccPillInactiveBg
     readonly property color _tileRingActive: Theme.ccTileRing
     readonly property color _tileIconActive: Theme.ccTileActiveText
     readonly property color _tileIconInactive: Theme.ccTileInactiveIcon
@@ -34,11 +34,11 @@ Rectangle {
     color: {
         if (isActive)
             return _tileBgActive;
-        const baseColor = mouseArea.containsMouse ? Theme.primaryPressed : _tileBgInactive;
+        const baseColor = mouseArea.containsMouse ? Theme.ccPillInactiveHoverBg : _tileBgInactive;
         return baseColor;
     }
-    border.color: isActive ? _tileRingActive : "transparent"
+    border.color: isActive ? _tileRingActive : Theme.outlineMedium
-    border.width: isActive ? 1 : 0
+    border.width: isActive ? 1 : Theme.layerOutlineWidth
     antialiasing: true
     opacity: enabled ? 1.0 : 0.6
 

quickshell/Modules/ControlCenter/Widgets/ToggleButton.qml

@@ -26,17 +26,17 @@ Rectangle {
     }
 
     readonly property color _tileBgActive: Theme.ccTileActiveBg
-    readonly property color _tileBgInactive: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    readonly property color _tileBgInactive: Theme.ccPillInactiveBg
     readonly property color _tileRingActive: Theme.ccTileRing
 
     color: {
         if (isActive)
             return _tileBgActive;
-        const baseColor = mouseArea.containsMouse ? Theme.primaryPressed : _tileBgInactive;
+        const baseColor = mouseArea.containsMouse ? Theme.ccPillInactiveHoverBg : _tileBgInactive;
         return baseColor;
     }
-    border.color: isActive ? _tileRingActive : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+    border.color: isActive ? _tileRingActive : Theme.outlineMedium
-    border.width: 0
+    border.width: isActive ? 1 : Theme.layerOutlineWidth
     opacity: enabled ? 1.0 : 0.6
 
     function hoverTint(base) {
@@ -44,7 +44,7 @@ Rectangle {
         return Theme.isLightMode ? Qt.darker(base, factor) : Qt.lighter(base, factor);
     }
 
-    readonly property color _containerBg: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    readonly property color _containerBg: Theme.ccPillInactiveBg
 
     Rectangle {
         anchors.fill: parent

quickshell/Modules/DankBar/BarCanvas.qml

@@ -59,7 +59,7 @@ Item {
     // M3 elevation shadow — Level 2 baseline (navigation bar), with per-bar override support
     readonly property bool hasPerBarOverride: (barConfig?.shadowIntensity ?? 0) > 0
     readonly property var elevLevel: Theme.elevationLevel2
-    readonly property bool shadowEnabled: (Theme.elevationEnabled && (typeof SettingsData !== "undefined" ? (SettingsData.barElevationEnabled ?? true) : false)) || hasPerBarOverride
+    readonly property bool shadowEnabled: !BlurService.enabled && ((Theme.elevationEnabled && (typeof SettingsData !== "undefined" ? (SettingsData.barElevationEnabled ?? true) : false)) || hasPerBarOverride)
     readonly property string autoBarShadowDirection: isTop ? "top" : (isBottom ? "bottom" : (isLeft ? "left" : (isRight ? "right" : "top")))
     readonly property string globalShadowDirection: Theme.elevationLightDirection === "autoBar" ? autoBarShadowDirection : Theme.elevationLightDirection
     readonly property string perBarShadowDirectionMode: barConfig?.shadowDirectionMode ?? "inherit"

quickshell/Modules/DankBar/Popouts/BatteryPopout.qml

@@ -287,7 +287,7 @@ DankPopout {
                         width: (parent.width - Theme.spacingM) / 2
                         height: 64
                         radius: Theme.cornerRadius
-                        color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+                        color: Theme.nestedSurface
                         border.width: 0
 
                         Column {
@@ -322,7 +322,7 @@ DankPopout {
                         width: (parent.width - Theme.spacingM) / 2
                         height: 64
                         radius: Theme.cornerRadius
-                        color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+                        color: Theme.nestedSurface
                         border.width: 0
 
                         Column {
@@ -373,7 +373,7 @@ DankPopout {
                             width: parent.width
                             height: batteryColumn.implicitHeight + Theme.spacingM * 2
                             radius: Theme.cornerRadius
-                            color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+                            color: Theme.nestedSurface
                             border.width: 0
 
                             Column {
@@ -443,7 +443,7 @@ DankPopout {
                                         width: (parent.width - Theme.spacingS * 2) / 3
                                         height: 48
                                         radius: Theme.cornerRadius
-                                        color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+                                        color: Theme.nestedSurface
                                         border.width: 0
 
                                         Column {
@@ -480,7 +480,7 @@ DankPopout {
                                         width: (parent.width - Theme.spacingS * 2) / 3
                                         height: 48
                                         radius: Theme.cornerRadius
-                                        color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+                                        color: Theme.nestedSurface
                                         border.width: 0
 
                                         Column {
@@ -509,7 +509,7 @@ DankPopout {
                                         width: (parent.width - Theme.spacingS * 2) / 3
                                         height: 48
                                         radius: Theme.cornerRadius
-                                        color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+                                        color: Theme.nestedSurface
                                         border.width: 0
 
                                         Column {

quickshell/Modules/DankBar/Widgets/AppsDockContextMenu.qml

@@ -119,7 +119,7 @@ PanelWindow {
 
         width: Math.min(400, Math.max(180, menuColumn.implicitWidth + Theme.spacingS * 2))
         height: Math.max(60, menuColumn.implicitHeight + Theme.spacingS * 2)
-        color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+        color: Theme.floatingSurface
         radius: Theme.cornerRadius
         border.color: BlurService.enabled ? BlurService.borderColor : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
         border.width: BlurService.enabled ? BlurService.borderWidth : 1

quickshell/Modules/DankBar/Widgets/FocusedApp.qml

@@ -42,19 +42,26 @@ BasePill {
         const active = ToplevelManager.activeToplevel;
 
         if (!active) {
-            // Only clear if our tracked window is no longer alive
             if (activeWindow) {
-                const alive = ToplevelManager.toplevels?.values;
+                if (CompositorService.isNiri) {
-                if (alive && !Array.from(alive).some(t => t === activeWindow))
+                    if (NiriService.currentOutput === (parentScreen?.name ?? ""))
-                    activeWindow = null;
+                        activeWindow = null;
+                } else {
+                    const alive = ToplevelManager.toplevels?.values;
+                    if (alive && !Array.from(alive).some(t => t === activeWindow))
+                        activeWindow = null;
+                }
             }
             return;
         }
 
         if (!parentScreen || CompositorService.filterCurrentDisplay([active], parentScreen?.name)?.length > 0) {
             activeWindow = active;
+        } else if (activeWindow) {
+            const alive = ToplevelManager.toplevels?.values;
+            if (alive && !Array.from(alive).some(t => t === activeWindow))
+                activeWindow = null;
         }
-        // else: active window is on a different screen so keep the previous value
     }
 
     Component.onCompleted: {
@@ -65,7 +72,8 @@ BasePill {
     Connections {
         target: ToplevelManager
         function onActiveToplevelChanged() {
-            root.updateActiveWindow();
+            if (!CompositorService.isNiri)
+                root.updateActiveWindow();
         }
     }
 
@@ -76,6 +84,16 @@ BasePill {
         }
     }
 
+    Connections {
+        target: CompositorService.isNiri ? NiriService : null
+        function onWindowsChanged() {
+            root.updateActiveWindow();
+        }
+        function onCurrentOutputChanged() {
+            root.updateActiveWindow();
+        }
+    }
+
     Connections {
         target: DesktopEntries
         function onApplicationsChanged() {
@@ -107,21 +125,17 @@ BasePill {
     }
     readonly property bool hasWindowsOnCurrentWorkspace: {
         if (CompositorService.isNiri) {
-            let currentWorkspaceId = null;
+            if (!activeWindow || !(activeWindow.title || activeWindow.appId))
-            for (var i = 0; i < NiriService.allWorkspaces.length; i++) {
-                const ws = NiriService.allWorkspaces[i];
-                if (ws.is_focused) {
-                    currentWorkspaceId = ws.id;
-                    break;
-                }
-            }
-
-            if (!currentWorkspaceId) {
                 return false;
-            }
+            if (NiriService.currentOutput !== (parentScreen?.name ?? ""))
-
+                return true;
-            const workspaceWindows = NiriService.windows.filter(w => w.workspace_id === currentWorkspaceId);
+            const focusedWin = NiriService.windows.find(w => w.is_focused);
-            return workspaceWindows.length > 0 && activeWindow && (activeWindow.title || activeWindow.appId);
+            if (!focusedWin)
+                return false;
+            const screenWsIds = new Set(
+                NiriService.allWorkspaces.filter(ws => ws.output === parentScreen.name).map(ws => ws.id)
+            );
+            return screenWsIds.has(focusedWin.workspace_id);
         }
 
         if (CompositorService.isHyprland) {

quickshell/Modules/DankBar/Widgets/SystemTrayBar.qml

@@ -152,6 +152,59 @@ BasePill {
                 item: item
             }))
     readonly property var hiddenBarItems: allSortedTrayItems.filter(item => SessionData.isHiddenTrayId(root.getTrayItemKey(item)))
+    readonly property string trayIconTintMode: {
+        const configuredMode = SettingsData.systemTrayIconTintMode || "none";
+        switch (configuredMode) {
+        case "monochrome":
+        case "primary":
+        case "secondary":
+            return configuredMode;
+        default:
+            return "none";
+        }
+    }
+    readonly property bool trayIconTintEnabled: trayIconTintMode !== "none"
+    readonly property real trayIconTintSaturationAmount: {
+        const raw = SettingsData.systemTrayIconTintSaturation;
+        const value = (raw === undefined || raw === null) ? 50 : raw;
+        return Math.max(0, Math.min(100, value)) / 100;
+    }
+    readonly property real trayIconTintStrengthAmount: {
+        const raw = SettingsData.systemTrayIconTintStrength;
+        const value = (raw === undefined || raw === null) ? 135 : raw;
+        return Math.max(0, Math.min(200, value)) / 100;
+    }
+    readonly property real trayIconSaturation: {
+        switch (trayIconTintMode) {
+        case "monochrome":
+            return -1;
+        case "primary":
+        case "secondary":
+            return -root.trayIconTintSaturationAmount;
+        default:
+            return 0;
+        }
+    }
+    readonly property real trayIconColorization: {
+        switch (trayIconTintMode) {
+        case "primary":
+        case "secondary":
+            return root.trayIconTintStrengthAmount;
+        default:
+            return 0;
+        }
+    }
+    readonly property color trayIconTintColor: {
+        switch (trayIconTintMode) {
+        case "primary":
+            return Theme.primary;
+        case "secondary":
+            return Theme.secondary;
+        default:
+            return Theme.surfaceText;
+        }
+    }
+
     readonly property bool reverseInlineHorizontal: !useOverflowPopup && !isVerticalOrientation && section === "right"
     readonly property bool reverseInlineVertical: !useOverflowPopup && isVerticalOrientation && section === "right"
     readonly property var displayedMainBarItems: reverseInlineHorizontal ? [...mainBarItems].reverse() : mainBarItems
@@ -367,9 +420,11 @@ BasePill {
                             smooth: true
                             mipmap: true
                             visible: status === Image.Ready
-                            layer.enabled: SettingsData.systemTrayMonochromeIcons
+                            layer.enabled: root.trayIconTintEnabled
                             layer.effect: MultiEffect {
-                                saturation: -1
+                                saturation: root.trayIconSaturation
+                                colorization: root.trayIconColorization
+                                colorizationColor: root.trayIconTintColor
                             }
                         }
 
@@ -586,9 +641,11 @@ BasePill {
                     smooth: true
                     mipmap: true
                     visible: status === Image.Ready
-                    layer.enabled: SettingsData.systemTrayMonochromeIcons
+                    layer.enabled: root.trayIconTintEnabled
                     layer.effect: MultiEffect {
-                        saturation: -1
+                        saturation: root.trayIconSaturation
+                        colorization: root.trayIconColorization
+                        colorizationColor: root.trayIconTintColor
                     }
                 }
 
@@ -718,9 +775,11 @@ BasePill {
                     smooth: true
                     mipmap: true
                     visible: status === Image.Ready
-                    layer.enabled: SettingsData.systemTrayMonochromeIcons
+                    layer.enabled: root.trayIconTintEnabled
                     layer.effect: MultiEffect {
-                        saturation: -1
+                        saturation: root.trayIconSaturation
+                        colorization: root.trayIconColorization
+                        colorizationColor: root.trayIconTintColor
                     }
                 }
 
@@ -1178,7 +1237,7 @@ BasePill {
                 targetRadius: Theme.cornerRadius
                 sourceRect.antialiasing: true
                 sourceRect.smooth: true
-                shadowEnabled: Theme.elevationEnabled && SettingsData.popoutElevationEnabled
+                shadowEnabled: Theme.elevationEnabled && SettingsData.popoutElevationEnabled && !BlurService.enabled
                 layer.smooth: true
                 layer.textureSize: Qt.size(Math.round(width * overflowMenu.dpr * 2), Math.round(height * overflowMenu.dpr * 2))
                 layer.textureMirroring: ShaderEffectSource.MirrorVertically
@@ -1223,9 +1282,11 @@ BasePill {
                             smooth: true
                             mipmap: true
                             visible: status === Image.Ready
-                            layer.enabled: SettingsData.systemTrayMonochromeIcons
+                            layer.enabled: root.trayIconTintEnabled
                             layer.effect: MultiEffect {
-                                saturation: -1
+                                saturation: root.trayIconSaturation
+                                colorization: root.trayIconColorization
+                                colorizationColor: root.trayIconTintColor
                             }
                         }
 
@@ -1627,7 +1688,7 @@ BasePill {
                         targetColor: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
                         targetRadius: Theme.cornerRadius
                         sourceRect.antialiasing: true
-                        shadowEnabled: Theme.elevationEnabled && SettingsData.popoutElevationEnabled
+                        shadowEnabled: Theme.elevationEnabled && SettingsData.popoutElevationEnabled && !BlurService.enabled
                         layer.smooth: true
                         layer.textureSize: Qt.size(Math.round(width * menuWindow.dpr), Math.round(height * menuWindow.dpr))
                         layer.textureMirroring: ShaderEffectSource.MirrorVertically

quickshell/Modules/DankDash/DankDashPopout.qml

@@ -81,6 +81,7 @@ DankPopout {
             isRightEdge: root.__dropdownRightEdge
             activePlayer: root.__dropdownPlayer
             allPlayers: root.__dropdownPlayers
+            targetWindow: root.backgroundWindow
             onCloseRequested: root.__hideDropdowns()
             onPanelEntered: root.__stopCloseTimer()
             onPanelExited: root.__startCloseTimer()

quickshell/Modules/DankDash/MediaDropdownOverlay.qml

@@ -15,6 +15,7 @@ Item {
     property var allPlayers: []
     property point anchorPos: Qt.point(0, 0)
     property bool isRightEdge: false
+    property var targetWindow: null
 
     property bool __isChromeBrowser: {
         if (!activePlayer?.identity)
@@ -56,6 +57,30 @@ Item {
         });
     }
 
+    readonly property Item __activePanel: {
+        switch (dropdownType) {
+        case 1:
+            return volumePanel;
+        case 2:
+            return audioDevicesPanel;
+        case 3:
+            return playersPanel;
+        default:
+            return null;
+        }
+    }
+
+    WindowBlur {
+        targetWindow: root.targetWindow
+        readonly property bool active: root.__activePanel !== null && root.__activePanel.visible && root.__activePanel.opacity > 0
+        readonly property real s: root.__activePanel ? Math.min(1, root.__activePanel.scale) : 1
+        blurX: root.__activePanel ? root.__activePanel.x + root.__activePanel.width * (1 - s) * 0.5 : 0
+        blurY: root.__activePanel ? root.__activePanel.y + root.__activePanel.height * (1 - s) * 0.5 : 0
+        blurWidth: active ? root.__activePanel.width * s : 0
+        blurHeight: active ? root.__activePanel.height * s : 0
+        blurRadius: Theme.cornerRadius * 2
+    }
+
     Rectangle {
         id: volumePanel
         visible: dropdownType === 1 && volumeAvailable
@@ -64,8 +89,8 @@ Item {
         x: isRightEdge ? anchorPos.x : anchorPos.x - width
         y: anchorPos.y - height / 2
         radius: Theme.cornerRadius * 2
-        color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.95)
+        color: Theme.floatingSurface
-        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
+        border.color: Theme.outlineStrong
         border.width: 1
 
         opacity: Theme.isDirectionalEffect ? 1 : (dropdownType === 1 ? 1 : 0)
@@ -100,7 +125,7 @@ Item {
             borderColor: volumePanel.border.color
             borderWidth: volumePanel.border.width
             shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
-            shadowEnabled: Theme.elevationEnabled
+            shadowEnabled: Theme.elevationEnabled && !BlurService.enabled
         }
 
         MouseArea {
@@ -127,23 +152,26 @@ Item {
                     width: parent.width
                     height: parent.height
                     anchors.centerIn: parent
-                    color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+                    color: Theme.withAlpha(Theme.outline, Theme.popupTransparency)
                     radius: Theme.cornerRadius
                 }
 
                 Rectangle {
+                    readonly property real ratio: volumeAvailable ? Math.min(1.0, currentVolume) : 0
+                    readonly property real thumbHeight: 4
                     width: parent.width
-                    height: volumeAvailable ? (Math.min(1.0, currentVolume) * parent.height) : 0
+                    height: Math.max(0, ratio * (parent.height - thumbHeight) - 3)
                     anchors.bottom: parent.bottom
                     anchors.horizontalCenter: parent.horizontalCenter
                     color: Theme.primary
-                    bottomLeftRadius: Theme.cornerRadius
+                    radius: Theme.cornerRadius
-                    bottomRightRadius: Theme.cornerRadius
+                    topLeftRadius: 0
+                    topRightRadius: 0
                 }
 
                 Rectangle {
                     width: parent.width + 8
-                    height: 8
+                    height: 4
                     radius: Theme.cornerRadius
                     y: {
                         const ratio = volumeAvailable ? Math.min(1.0, currentVolume) : 0;
@@ -152,8 +180,7 @@ Item {
                     }
                     anchors.horizontalCenter: parent.horizontalCenter
                     color: Theme.primary
-                    border.width: 3
+                    border.width: 0
-                    border.color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 1.0)
                 }
 
                 MouseArea {
@@ -203,8 +230,8 @@ Item {
         x: isRightEdge ? anchorPos.x : anchorPos.x - width
         y: anchorPos.y - height / 2
         radius: Theme.cornerRadius * 2
-        color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.98)
+        color: Theme.floatingSurface
-        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.6)
+        border.color: Theme.outlineStrong
         border.width: 2
 
         opacity: Theme.isDirectionalEffect ? 1 : (dropdownType === 2 ? 1 : 0)
@@ -239,7 +266,7 @@ Item {
             borderColor: audioDevicesPanel.border.color
             borderWidth: audioDevicesPanel.border.width
             shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
-            shadowEnabled: Theme.elevationEnabled
+            shadowEnabled: Theme.elevationEnabled && !BlurService.enabled
         }
 
         Column {
@@ -276,7 +303,7 @@ Item {
                             width: parent.width
                             height: 48
                             radius: Theme.cornerRadius
-                            color: deviceMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+                            color: deviceMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Theme.nestedSurface
                             border.color: modelData === AudioService.sink ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
                             border.width: modelData === AudioService.sink ? 2 : 1
 
@@ -358,8 +385,8 @@ Item {
         x: isRightEdge ? anchorPos.x : anchorPos.x - width
         y: anchorPos.y - height / 2
         radius: Theme.cornerRadius * 2
-        color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.98)
+        color: Theme.floatingSurface
-        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.6)
+        border.color: Theme.outlineStrong
         border.width: 2
 
         opacity: Theme.isDirectionalEffect ? 1 : (dropdownType === 3 ? 1 : 0)
@@ -394,7 +421,7 @@ Item {
             borderColor: playersPanel.border.color
             borderWidth: playersPanel.border.width
             shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
-            shadowEnabled: Theme.elevationEnabled
+            shadowEnabled: Theme.elevationEnabled && !BlurService.enabled
         }
 
         Column {
@@ -431,7 +458,7 @@ Item {
                             width: parent.width
                             height: 48
                             radius: Theme.cornerRadius
-                            color: playerMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+                            color: playerMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Theme.nestedSurface
                             border.color: modelData === activePlayer ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
                             border.width: modelData === activePlayer ? 2 : 1
 

quickshell/Modules/DankDash/MediaPlayerTab.qml

@@ -2,7 +2,6 @@ import QtQuick
 import QtQuick.Effects
 import QtQuick.Layouts
 import Quickshell.Services.Mpris
-import Quickshell.Io
 import qs.Common
 import qs.Services
 import qs.Widgets
@@ -629,7 +628,7 @@ Item {
         x: isRightEdge ? Theme.spacingM : parent.width - 40 - Theme.spacingM
         y: 185
         color: playerSelectorArea.containsMouse || playersExpanded ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2) : "transparent"
-        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
+        border.color: Theme.outlineStrong
         border.width: 1
         z: 100
         visible: (allPlayers?.length || 0) >= 1
@@ -672,7 +671,7 @@ Item {
         x: isRightEdge ? Theme.spacingM : parent.width - 40 - Theme.spacingM
         y: 130
         color: volumeButtonArea.containsMouse && volumeAvailable || volumeExpanded ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2) : "transparent"
-        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, volumeAvailable ? 0.3 : 0.15)
+        border.color: volumeAvailable ? Theme.outlineStrong : Theme.outlineMedium
         border.width: 1
         z: 101
         enabled: volumeAvailable
@@ -749,7 +748,7 @@ Item {
         x: isRightEdge ? Theme.spacingM : parent.width - 40 - Theme.spacingM
         y: 240
         color: audioDevicesArea.containsMouse || devicesExpanded ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2) : "transparent"
-        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
+        border.color: Theme.outlineStrong
         border.width: 1
         z: 100
 

quickshell/Modules/DankDash/Overview/CalendarOverviewCard.qml

@@ -126,8 +126,8 @@ Rectangle {
     }
 
     radius: Theme.cornerRadius
-    color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    color: Theme.nestedSurface
-    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.05)
+    border.color: Theme.outlineMedium
     border.width: 1
 
     Column {
@@ -446,7 +446,7 @@ Rectangle {
                     } else if (eventMouseArea.containsMouse) {
                         return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.06);
                     }
-                    return Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency);
+                    return Theme.nestedSurface;
                 }
                 border.color: {
                     if (modelData.url && eventMouseArea.containsMouse) {
@@ -454,9 +454,9 @@ Rectangle {
                     } else if (eventMouseArea.containsMouse) {
                         return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.15);
                     }
-                    return "transparent";
+                    return Theme.outlineMedium;
                 }
-                border.width: 1
+                border.width: eventMouseArea.containsMouse ? 1 : Theme.layerOutlineWidth
 
                 Rectangle {
                     width: 3

quickshell/Modules/DankDash/Overview/Card.qml

@@ -10,8 +10,8 @@ Rectangle {
     property int pad: Theme.spacingM
 
     radius: Theme.cornerRadius
-    color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    color: Theme.nestedSurface
-    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+    border.color: Theme.outlineMedium
     border.width: 1
 
     default property alias content: contentItem.data

quickshell/Modules/DankDash/WeatherForecastCard.qml

@@ -103,7 +103,7 @@ Rectangle {
         }
     ]
 
-    color: isCurrent ? Theme.withAlpha(Theme.primary, 0.1) : Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    color: isCurrent ? Theme.withAlpha(Theme.primary, 0.1) : Theme.nestedSurface
     border.color: isCurrent ? Theme.withAlpha(Theme.primary, 0.3) : "transparent"
     border.width: isCurrent ? 1 : 0
 

quickshell/Modules/DankDash/WeatherTab.qml

@@ -213,8 +213,8 @@ Item {
             width: parent.width
             height: heroContent.height + Theme.spacingL * 2
             radius: Theme.cornerRadius
-            color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+            color: Theme.nestedSurface
-            border.color: Theme.withAlpha(Theme.outline, 0.08)
+            border.color: Theme.outlineMedium
             border.width: 1
 
             Column {

quickshell/Modules/Notifications/Center/DndDurationMenu.qml

@@ -107,7 +107,7 @@ Rectangle {
 
     implicitWidth: Math.max(220, menuColumn.implicitWidth + Theme.spacingM * 2)
     implicitHeight: menuColumn.implicitHeight + Theme.spacingM * 2
-    color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+    color: Theme.floatingSurface
     radius: Theme.cornerRadius
     border.color: BlurService.enabled ? BlurService.borderColor : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
     border.width: BlurService.enabled ? BlurService.borderWidth : 1

quickshell/Modules/Notifications/Center/HistoryNotificationCard.qml

@@ -1,5 +1,4 @@
 import QtQuick
-import QtQuick.Effects
 import Quickshell
 import qs.Common
 import qs.Services
@@ -32,7 +31,7 @@ Rectangle {
     height: baseCardHeight + contentItem.extraHeight
     radius: Theme.cornerRadius
     clip: false
-    readonly property bool shadowsAllowed: Theme.elevationEnabled && Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1"
+    readonly property bool shadowsAllowed: Theme.elevationEnabled && Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1" && !BlurService.enabled
 
     ElevationShadow {
         id: shadowLayer
@@ -50,21 +49,21 @@ Rectangle {
     color: {
         if (isSelected && keyboardNavigationActive)
             return Theme.primaryPressed;
-        return Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency);
+        return Theme.floatingSurfaceHigh;
     }
     border.color: {
         if (isSelected && keyboardNavigationActive)
             return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.5);
         if (historyItem.urgency === 2)
             return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3);
-        return Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.05);
+        return Theme.outlineMedium;
     }
     border.width: {
         if (isSelected && keyboardNavigationActive)
             return 1.5;
         if (historyItem.urgency === 2)
             return 2;
-        return 0;
+        return Theme.layerOutlineWidth;
     }
 
     Behavior on border.color {
@@ -137,12 +136,10 @@ Rectangle {
                     return "";
                 const appIcon = historyItem.appIcon;
                 if (!appIcon)
-                    return iconFromImage ? Paths.resolveIconUrl(iconFromImage) : "";
+                    return "";
                 if (appIcon.startsWith("file://") || appIcon.startsWith("http://") || appIcon.startsWith("https://") || appIcon.includes("/"))
                     return appIcon;
-                if (appIcon.startsWith("material:") || appIcon.startsWith("svg:") || appIcon.startsWith("unicode:") || appIcon.startsWith("image:"))
+                return "";
-                    return "";
-                return Paths.resolveIconPath(appIcon);
             }
 
             hasImage: hasNotificationImage

quickshell/Modules/Notifications/Center/NotificationHeader.qml

@@ -128,7 +128,9 @@ Item {
                     height: Theme.iconSize + Theme.spacingS
                     radius: Theme.cornerRadius
                     visible: root.currentTab === 0 ? NotificationService.notifications.length > 0 : NotificationService.historyList.length > 0
-                    color: clearArea.containsMouse ? Theme.primaryHoverLight : Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+                    color: clearArea.containsMouse ? Theme.primaryHoverLight : Theme.nestedSurface
+                    border.color: Theme.outlineMedium
+                    border.width: Theme.layerOutlineWidth
 
                     Row {
                         id: clearButtonContent

quickshell/Modules/Notifications/Center/NotificationSettings.qml

@@ -14,8 +14,8 @@ Rectangle {
     visible: expanded
     clip: true
     radius: Theme.cornerRadius
-    color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.3)
+    color: Theme.nestedSurface
-    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.1)
+    border.color: Theme.outlineMedium
     border.width: 1
 
     Behavior on height {

quickshell/Modules/ProcessList/DisksView.qml

@@ -33,7 +33,7 @@ Item {
             Layout.fillWidth: true
             Layout.preferredHeight: 80
             radius: Theme.cornerRadius
-            color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+            color: Theme.nestedSurface
 
             RowLayout {
                 anchors.fill: parent
@@ -110,7 +110,7 @@ Item {
             Layout.fillWidth: true
             Layout.fillHeight: true
             radius: Theme.cornerRadius
-            color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+            color: Theme.nestedSurface
 
             ColumnLayout {
                 anchors.fill: parent

quickshell/Modules/ProcessList/PerformanceView.qml

@@ -163,7 +163,7 @@ Item {
         property color extraInfoColor: Theme.surfaceVariantText
 
         radius: Theme.cornerRadius
-        color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+        color: Theme.nestedSurface
         border.color: Theme.outlineLight
         border.width: 1
 

quickshell/Modules/ProcessList/ProcessContextMenu.qml

@@ -185,7 +185,7 @@ Popup {
     }
 
     contentItem: Rectangle {
-        color: BlurService.enabled ? Theme.surfaceContainer : Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+        color: Theme.floatingSurface
         radius: Theme.cornerRadius
         border.color: BlurService.enabled ? BlurService.borderColor : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
         border.width: BlurService.enabled ? BlurService.borderWidth : 1

quickshell/Modules/ProcessList/ProcessListPopout.qml

@@ -357,7 +357,7 @@ DankPopout {
                     Layout.fillWidth: true
                     Layout.fillHeight: true
                     radius: Theme.cornerRadius
-                    color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+                    color: Theme.nestedSurface
                     clip: true
 
                     ProcessesView {

quickshell/Modules/ProcessList/SystemView.qml

@@ -23,7 +23,7 @@ Item {
             Layout.fillWidth: true
             Layout.preferredHeight: systemInfoColumn.implicitHeight + Theme.spacingM * 2
             radius: Theme.cornerRadius
-            color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+            color: Theme.nestedSurface
 
             ColumnLayout {
                 id: systemInfoColumn
@@ -96,7 +96,7 @@ Item {
             Layout.fillWidth: true
             Layout.fillHeight: true
             radius: Theme.cornerRadius
-            color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+            color: Theme.nestedSurface
 
             ColumnLayout {
                 anchors.fill: parent

quickshell/Modules/Settings/ThemeColorsTab.qml

@@ -1854,6 +1854,33 @@ Item {
                     onToggled: checked => SettingsData.set("blurEnabled", checked)
                 }
 
+                SettingsToggleRow {
+                    tab: "theme"
+                    tags: ["blur", "foreground", "layers", "contrast", "glass", "frosted"]
+                    settingKey: "blurForegroundLayers"
+                    text: I18n.tr("Foreground Layers")
+                    description: I18n.tr("Show foreground surfaces on blurred panels for stronger contrast")
+                    checked: SettingsData.blurForegroundLayers ?? true
+                    visible: BlurService.available && (SettingsData.blurEnabled ?? false)
+                    enabled: BlurService.available
+                    onToggled: checked => SettingsData.set("blurForegroundLayers", checked)
+                }
+
+                SettingsSliderRow {
+                    tab: "theme"
+                    tags: ["blur", "foreground", "layers", "outline", "border", "cards", "widgets", "notifications", "control center"]
+                    settingKey: "blurLayerOutlineOpacity"
+                    text: I18n.tr("Layer Outline Opacity")
+                    description: I18n.tr("Controls outlines around blurred foreground cards, pills, and notification cards")
+                    visible: BlurService.available && (SettingsData.blurEnabled ?? false)
+                    value: Math.round((SettingsData.blurLayerOutlineOpacity ?? 0.12) * 100)
+                    minimum: 0
+                    maximum: 40
+                    unit: "%"
+                    defaultValue: 12
+                    onSliderValueChanged: newValue => SettingsData.set("blurLayerOutlineOpacity", newValue / 100)
+                }
+
                 SettingsDropdownRow {
                     tab: "theme"
                     tags: ["blur", "border", "outline", "edge"]
@@ -1897,12 +1924,13 @@ Item {
                     tags: ["blur", "border", "opacity"]
                     settingKey: "blurBorderOpacity"
                     text: I18n.tr("Blur Border Opacity")
+                    description: I18n.tr("Controls the outer edge of protocol-blurred windows")
                     visible: SettingsData.blurEnabled
-                    value: Math.round((SettingsData.blurBorderOpacity ?? 1.0) * 100)
+                    value: Math.round((SettingsData.blurBorderOpacity ?? 0.35) * 100)
                     minimum: 0
                     maximum: 100
                     unit: "%"
-                    defaultValue: 100
+                    defaultValue: 35
                     onSliderValueChanged: newValue => SettingsData.set("blurBorderOpacity", newValue / 100)
                 }
             }

quickshell/Modules/Settings/WidgetSelectionPopup.qml

@@ -14,6 +14,10 @@ FloatingWindow {
     property int selectedIndex: -1
     property bool keyboardNavigationActive: false
     property var parentModal: null
+    readonly property bool blurActive: Theme.blurForegroundLayers || Theme.transparentBlurLayers
+    readonly property real surfaceAlpha: blurActive ? Math.min(Theme.popupTransparency, Theme.transparentBlurLayers ? 0.36 : 0.78) : 1.0
+    readonly property real fieldAlpha: blurActive ? Math.min(Theme.popupTransparency, Theme.transparentBlurLayers ? 0.18 : 0.62) : 1.0
+    readonly property real rowAlpha: blurActive ? Math.min(Theme.popupTransparency, Theme.transparentBlurLayers ? 0.12 : 0.52) : 0.30
 
     signal widgetSelected(string widgetId, string targetSection)
 
@@ -94,7 +98,7 @@ FloatingWindow {
     minimumSize: Qt.size(400, 350)
     implicitWidth: 500
     implicitHeight: 550
-    color: Theme.surfaceContainer
+    color: blurActive ? "transparent" : Theme.surfaceContainer
     visible: false
 
     onVisibleChanged: {
@@ -119,6 +123,24 @@ FloatingWindow {
         });
     }
 
+    WindowBlur {
+        targetWindow: root
+        blurX: 0
+        blurY: 0
+        blurWidth: root.visible ? root.width : 0
+        blurHeight: root.visible ? root.height : 0
+        blurRadius: Theme.cornerRadius
+    }
+
+    Rectangle {
+        anchors.fill: parent
+        radius: Theme.cornerRadius
+        color: Theme.withAlpha(Theme.surfaceContainer, root.surfaceAlpha)
+        border.color: root.blurActive ? Theme.outlineMedium : "transparent"
+        border.width: root.blurActive ? Theme.layerOutlineWidth : 0
+        antialiasing: true
+    }
+
     FocusScope {
         id: widgetKeyHandler
 
@@ -184,8 +206,7 @@ FloatingWindow {
 
                 Rectangle {
                     anchors.fill: parent
-                    color: Theme.surfaceContainer
+                    color: Theme.withAlpha(Theme.surfaceContainerHigh, root.blurActive ? 0.20 : 0.50)
-                    opacity: 0.5
                 }
 
                 Row {
@@ -258,7 +279,7 @@ FloatingWindow {
                         width: parent.width
                         height: 48
                         cornerRadius: Theme.cornerRadius
-                        backgroundColor: Theme.surfaceContainerHigh
+                        backgroundColor: Theme.withAlpha(Theme.surfaceContainerHigh, root.fieldAlpha)
                         normalBorderColor: Theme.outlineMedium
                         focusedBorderColor: Theme.primary
                         leftIconName: "search"
@@ -302,9 +323,10 @@ FloatingWindow {
                             height: 60
                             radius: Theme.cornerRadius
                             property bool isSelected: root.keyboardNavigationActive && index === root.selectedIndex
-                            color: isSelected ? Theme.primarySelected : widgetArea.containsMouse ? Theme.primaryHover : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
+                            color: isSelected ? Theme.withAlpha(Theme.primary, root.blurActive ? 0.22 : 0.16) : widgetArea.containsMouse ? Theme.withAlpha(Theme.primary, root.blurActive ? 0.14 : 0.08) : Theme.withAlpha(Theme.surfaceVariant, root.rowAlpha)
-                            border.color: isSelected ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+                            border.color: isSelected ? Theme.primary : Theme.outlineMedium
-                            border.width: isSelected ? 2 : 1
+                            border.width: isSelected ? 2 : Theme.layerOutlineWidth
+                            antialiasing: true
 
                             Row {
                                 anchors.fill: parent

quickshell/Modules/Toast.qml

@@ -89,9 +89,9 @@ PanelWindow {
             case ToastService.levelWarn:
                 return Theme.warning;
             case ToastService.levelInfo:
-                return Theme.surfaceContainer;
+                return Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency);
             default:
-                return Theme.surfaceContainer;
+                return Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency);
             }
         }
         radius: Theme.cornerRadius

quickshell/Services/BlurService.qml

@@ -18,7 +18,7 @@ Singleton {
     readonly property color borderColor: {
         if (!enabled)
             return "transparent";
-        const opacity = SettingsData.blurBorderOpacity ?? 0.5;
+        const opacity = SettingsData.blurBorderOpacity ?? 0.35;
         switch (SettingsData.blurBorderColor ?? "outline") {
         case "primary":
             return Theme.withAlpha(Theme.primary, opacity);

quickshell/Services/CompositorService.qml

@@ -371,8 +371,21 @@ Singleton {
     function filterCurrentDisplay(toplevels, screenName) {
         if (!toplevels || toplevels.length === 0 || !screenName)
             return toplevels;
-        if (useNiriSorting)
+        if (useNiriSorting) {
+            const active = ToplevelManager.activeToplevel;
+            if (active && toplevels.length === 1 && toplevels[0] === active) {
+                if (NiriService.currentOutput !== screenName)
+                    return [];
+                const focusedWin = NiriService.windows.find(nw => nw.is_focused);
+                if (!focusedWin)
+                    return [];
+                const screenWsIds = new Set(
+                    NiriService.allWorkspaces.filter(ws => ws.output === screenName).map(ws => ws.id)
+                );
+                return screenWsIds.has(focusedWin.workspace_id) ? toplevels : [];
+            }
             return NiriService.filterCurrentDisplay(toplevels, screenName);
+        }
         if (isHyprland)
             return filterHyprlandCurrentDisplaySafe(toplevels, screenName);
         return toplevels;

quickshell/Widgets/CachingImage.qml

@@ -1,4 +1,5 @@
 import QtQuick
+import Quickshell.Io
 import qs.Common
 
 Item {
@@ -68,11 +69,11 @@ Item {
         smooth: true
 
         onStatusChanged: {
-            if (source == root.cachePath && status === Image.Error) {
+            if (source === root.cachePath && status === Image.Error) {
                 source = root.encodedImagePath;
                 return;
             }
-            if (root.isRemoteUrl || source != root.encodedImagePath || status !== Image.Ready || !root.cachePath)
+            if (root.isRemoteUrl || source !== root.encodedImagePath || status !== Image.Ready || !root.cachePath)
                 return;
             Paths.mkdir(Paths.imagecache);
             const grabPath = root.cachePath;
@@ -82,6 +83,22 @@ Item {
         }
     }
 
+    Process {
+        id: cacheProbe
+
+        property string cachePath: ""
+        property string fallbackSource: ""
+
+        running: false
+        command: ["test", "-f", cachePath]
+
+        onExited: exitCode => {
+            if (cacheProbe.cachePath !== root.cachePath)
+                return;
+            staticImg.source = exitCode === 0 ? cacheProbe.cachePath : cacheProbe.fallbackSource;
+        }
+    }
+
     onImagePathChanged: {
         if (!imagePath) {
             staticImg.source = "";
@@ -97,6 +114,13 @@ Item {
         const hash = djb2Hash(normalizedPath);
         const cPath = hash ? `${Paths.stringify(Paths.imagecache)}/${hash}@${maxCacheSize}x${maxCacheSize}.png` : "";
         const encoded = "file://" + normalizedPath.split('/').map(s => encodeURIComponent(s)).join('/');
-        staticImg.source = cPath || encoded;
+        if (!cPath) {
+            staticImg.source = encoded;
+            return;
+        }
+        cacheProbe.running = false;
+        cacheProbe.cachePath = cPath;
+        cacheProbe.fallbackSource = encoded;
+        cacheProbe.running = true;
     }
 }

quickshell/Widgets/DankOSD.qml

@@ -272,7 +272,7 @@ PanelWindow {
             id: background
             anchors.fill: parent
             radius: Theme.cornerRadius
-            color: Theme.withAlpha(Theme.surfaceContainer, osdContainer.popupSurfaceAlpha)
+            color: Theme.transparentBlurLayers ? "transparent" : Theme.withAlpha(Theme.surfaceContainer, osdContainer.popupSurfaceAlpha)
             border.color: BlurService.enabled ? BlurService.borderColor : Theme.outlineMedium
             border.width: BlurService.enabled ? BlurService.borderWidth : 1
             z: -1
@@ -286,7 +286,7 @@ PanelWindow {
             level: Theme.elevationLevel3
             fallbackOffset: 6
             targetRadius: Theme.cornerRadius
-            targetColor: Theme.withAlpha(Theme.surfaceContainer, osdContainer.popupSurfaceAlpha)
+            targetColor: Theme.transparentBlurLayers ? "transparent" : Theme.withAlpha(Theme.surfaceContainer, osdContainer.popupSurfaceAlpha)
             borderColor: Theme.outlineMedium
             borderWidth: 1
             shadowEnabled: Theme.elevationEnabled && SettingsData.popoutElevationEnabled && Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1"

quickshell/Widgets/DankSlideout.qml

@@ -134,7 +134,7 @@ PanelWindow {
 
             Rectangle {
                 anchors.fill: parent
-                color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, contentRect.effectiveTransparency)
+                color: Theme.transparentBlurLayers ? "transparent" : Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, contentRect.effectiveTransparency)
                 radius: Theme.cornerRadius
                 border.color: BlurService.enabled ? BlurService.borderColor : Theme.outlineMedium
                 border.width: BlurService.borderWidth

quickshell/Widgets/DankSlider.qml

@@ -22,6 +22,7 @@ Item {
 
     property color thumbOutlineColor: Theme.surfaceContainer
     property color trackColor: enabled ? Theme.outline : Theme.outline
+    property real trackOpacity: Theme.popupTransparency
 
     signal sliderValueChanged(int newValue)
     signal sliderDragFinished(int finalValue)
@@ -63,7 +64,7 @@ Item {
             width: parent.width - (leftIconWidth + rightIconWidth + (slider.leftIcon.length > 0 ? Theme.spacingM : 0) + (slider.rightIcon.length > 0 ? Theme.spacingM : 0))
             height: 12
             radius: Theme.cornerRadius
-            color: slider.trackColor
+            color: Theme.withAlpha(slider.trackColor, slider.trackOpacity)
             anchors.verticalCenter: parent.verticalCenter
             clip: false
 
@@ -71,13 +72,16 @@ Item {
                 id: sliderFill
                 height: parent.height
                 radius: Theme.cornerRadius
+                topRightRadius: 0
+                bottomRightRadius: 0
                 width: {
                     const range = slider.maximum - slider.minimum;
                     const rawRatio = range === 0 ? 0 : (slider.value - slider.minimum) / range;
                     const ratio = slider.centerMinimum ? (0.5 + rawRatio * 0.5) : rawRatio;
                     const travel = sliderTrack.width - sliderHandle.width;
-                    const center = (travel * ratio) + sliderHandle.width / 2;
+                    const handleLeft = travel * ratio;
-                    return Math.max(0, Math.min(sliderTrack.width, center));
+                    const endPoint = handleLeft - 3;
+                    return Math.max(0, Math.min(sliderTrack.width, endPoint));
                 }
                 color: slider.enabled ? Theme.primary : Theme.withAlpha(Theme.onSurface, 0.12)
             }
@@ -87,8 +91,8 @@ Item {
 
                 property bool active: sliderMouseArea.containsMouse || sliderMouseArea.pressed || slider.isDragging
 
-                width: 8
+                width: 4
-                height: 24
+                height: 20
                 radius: Theme.cornerRadius
                 x: {
                     const range = slider.maximum - slider.minimum;
@@ -99,7 +103,7 @@ Item {
                 }
                 anchors.verticalCenter: parent.verticalCenter
                 color: slider.enabled ? Theme.primary : Theme.withAlpha(Theme.onSurface, 0.12)
-                border.width: 3
+                border.width: 0
                 border.color: slider.thumbOutlineColor
 
                 StyledRect {

quickshell/Widgets/DankTooltip.qml

@@ -2,7 +2,6 @@ import QtQuick
 import Quickshell
 import Quickshell.Wayland
 import qs.Common
-import qs.Services
 
 PanelWindow {
     id: root
@@ -72,10 +71,10 @@ PanelWindow {
 
     Rectangle {
         anchors.fill: parent
-        color: BlurService.enabled ? Theme.surfaceContainerHigh : Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+        color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
         radius: Theme.cornerRadius
-        border.width: BlurService.enabled ? BlurService.borderWidth : 1
+        border.width: 1
-        border.color: BlurService.enabled ? BlurService.borderColor : Theme.outlineMedium
+        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
 
         Text {
             id: textContent

quickshell/Widgets/DankTooltipV2.qml

@@ -1,7 +1,6 @@
 import QtQuick
 import QtQuick.Controls
 import qs.Common
-import qs.Services
 
 Item {
     id: root
@@ -112,10 +111,10 @@ Item {
         dim: false
 
         background: Rectangle {
-            color: BlurService.enabled ? Theme.surfaceContainerHigh : Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+            color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
             radius: Theme.cornerRadius
-            border.width: BlurService.enabled ? BlurService.borderWidth : 1
+            border.width: 1
-            border.color: BlurService.enabled ? BlurService.borderColor : Theme.outlineMedium
+            border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
         }
 
         contentItem: Text {

quickshell/Widgets/VpnDetailContent.qml

@@ -19,7 +19,9 @@ Rectangle {
 
     implicitHeight: 32 + 1 + listHeight + Theme.spacingS * 4 + Theme.spacingM * 2
     radius: Theme.cornerRadius
-    color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    color: Theme.nestedSurface
+    border.color: Theme.outlineMedium
+    border.width: Theme.layerOutlineWidth
 
     FileBrowserSurfaceModal {
         id: fileBrowser

quickshell/translations/settings_search_index.json

@@ -914,6 +914,31 @@
     ],
     "icon": "visibility_off"
   },
+  {
+    "section": "trayIconTint",
+    "label": "System Tray Icon Tint",
+    "tabIndex": 3,
+    "category": "Dank Bar",
+    "keywords": [
+      "bar",
+      "dank",
+      "icon",
+      "icons",
+      "monochrome",
+      "panel",
+      "primary",
+      "secondary",
+      "saturation",
+      "status",
+      "statusbar",
+      "strength",
+      "taskbar",
+      "tint",
+      "tray"
+    ],
+    "icon": "filter_b_and_w",
+    "description": "Choose monochrome or a theme color tint for system tray icons"
+  },
   {
     "section": "workspaceDragReorder",
     "label": "Drag to Reorder",
@@ -2870,6 +2895,60 @@
       "tint"
     ]
   },
+  {
+    "section": "blurForegroundLayers",
+    "label": "Foreground Layers",
+    "tabIndex": 10,
+    "category": "Theme & Colors",
+    "keywords": [
+      "appearance",
+      "blur",
+      "blurred",
+      "colors",
+      "contrast",
+      "foreground",
+      "frosted",
+      "glass",
+      "layers",
+      "look",
+      "panels",
+      "scheme",
+      "show",
+      "stronger",
+      "style",
+      "surfaces",
+      "theme"
+    ],
+    "description": "Show foreground surfaces on blurred panels for stronger contrast"
+  },
+  {
+    "section": "blurLayerOutlineOpacity",
+    "label": "Layer Outline Opacity",
+    "tabIndex": 10,
+    "category": "Theme & Colors",
+    "keywords": [
+      "appearance",
+      "blur",
+      "border",
+      "cards",
+      "colors",
+      "contrast",
+      "control",
+      "foreground",
+      "frosted",
+      "glass",
+      "intensity",
+      "layers",
+      "notifications",
+      "opacity",
+      "outline",
+      "pills",
+      "surfaces",
+      "theme",
+      "widgets"
+    ],
+    "description": "Controls outlines around blurred foreground cards, pills, and notification cards"
+  },
   {
     "section": "matugenTemplateGtk",
     "label": "GTK",
@@ -4534,6 +4613,27 @@
     ],
     "description": "Automatically lock the screen when DMS starts"
   },
+  {
+    "section": "lockBeforeSuspend",
+    "label": "Lock before suspend",
+    "tabIndex": 11,
+    "category": "Lock Screen",
+    "keywords": [
+      "automatic",
+      "automatically",
+      "before",
+      "lock",
+      "login",
+      "password",
+      "prepares",
+      "screen",
+      "security",
+      "sleep",
+      "suspend",
+      "system"
+    ],
+    "description": "Automatically lock the screen when the system prepares to suspend"
+  },
   {
     "section": "lockScreenNotificationMode",
     "label": "Notification Display",
@@ -6556,27 +6656,6 @@
     "icon": "schedule",
     "description": "Gradually fade the screen before locking with a configurable grace period"
   },
-  {
-    "section": "lockBeforeSuspend",
-    "label": "Lock before suspend",
-    "tabIndex": 21,
-    "category": "Power & Sleep",
-    "keywords": [
-      "automatically",
-      "before",
-      "energy",
-      "lock",
-      "power",
-      "prepares",
-      "screen",
-      "security",
-      "shutdown",
-      "sleep",
-      "suspend",
-      "system"
-    ],
-    "description": "Automatically lock the screen when the system prepares to suspend"
-  },
   {
     "section": "fadeToLockGracePeriod",
     "label": "Lock fade grace period",
@@ -6747,6 +6826,29 @@
       "turn"
     ]
   },
+  {
+    "section": "postLockMonitorTimeout",
+    "label": "Turn off monitors after lock",
+    "tabIndex": 21,
+    "category": "Power & Sleep",
+    "keywords": [
+      "after",
+      "display",
+      "energy",
+      "lock",
+      "monitor",
+      "monitors",
+      "off",
+      "post",
+      "power",
+      "screen",
+      "shutdown",
+      "sleep",
+      "suspend",
+      "timeout",
+      "turn"
+    ]
+  },
   {
     "section": "powerMenuGridLayout",
     "label": "Use Grid Layout",