dms(blur): Dank all the things

quickshell/Common/SettingsData.qml

@@ -188,11 +188,15 @@ Singleton {
     onBarElevationEnabledChanged: saveSettings()
     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

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, BlurService.enabled ? 0.12 : 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, BlurService.enabled ? 0.24 : 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,19 +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, BlurService.enabled ? 0.3 : 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 color nestedSurface: BlurService.enabled ? "transparent" : withAlpha(surfaceContainerHigh, popupTransparency)
+    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, BlurService.enabled ? 0 : 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, BlurService.enabled ? 0 : 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)
@@ -589,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":
@@ -616,8 +631,6 @@ Singleton {
     }
 
     readonly property color ccTileRing: {
-        if (BlurService.enabled)
-            return "transparent";
         switch (SettingsData.controlCenterTileColorMode) {
         case "primaryContainer":
             return Qt.rgba(primary.r, primary.g, primary.b, 0.22);

quickshell/Common/settings/SettingsSpec.js

@@ -59,9 +59,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 },

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

@@ -376,7 +376,7 @@ Item {
         anchors.top: parent.top
         height: 32
         z: 101
-        color: BlurService.enabled ? "transparent" : Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+        color: Theme.floatingSurface
         visible: stickyHeaderSection !== null
 
         readonly property int versionTrigger: root.controller?.viewModeVersion ?? 0

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 : 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

@@ -509,7 +509,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
             }
         }
     }
@@ -531,7 +532,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) {
@@ -554,7 +556,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: Theme.outlineMedium
-    border.width: 0
+    border.width: Theme.layerOutlineWidth
 
     Row {
         anchors.left: parent.left

quickshell/Modules/ControlCenter/ControlCenterPopout.qml

@@ -41,7 +41,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);
@@ -210,7 +210,11 @@ DankPopout {
                 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 [];

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: 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: Theme.outlineMedium
-    border.width: 0
+    border.width: Theme.layerOutlineWidth
 
     property var bluetoothCodecModalRef: null
     property var devicesBeingPaired: new Set()

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: 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: Theme.outlineMedium
-    border.width: 0
+    border.width: Theme.layerOutlineWidth
 
     property real nowMs: Date.now()
 
@@ -149,7 +149,7 @@ 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: Theme.outlineStrong
                     border.width: 1
 
@@ -183,7 +183,7 @@ 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: Theme.outlineStrong
                 border.width: 1
 
@@ -221,7 +221,7 @@ 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: Theme.outlineStrong
                 border.width: 1
 

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.nestedSurface
+    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.nestedSurface
+    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.nestedSurface
+    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.nestedSurface
+    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.nestedSurface
+    readonly property color _containerBg: Theme.ccPillInactiveBg
 
     Rectangle {
         anchors.fill: parent

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/DankDash/MediaDropdownOverlay.qml

@@ -89,8 +89,8 @@ Item {
         x: isRightEdge ? anchorPos.x : anchorPos.x - width
         y: anchorPos.y - height / 2
         radius: Theme.cornerRadius * 2
-        color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+        color: Theme.floatingSurface
-        border.color: BlurService.enabled ? "transparent" : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
+        border.color: Theme.outlineStrong
         border.width: 1
 
         opacity: dropdownType === 1 ? 1 : 0
@@ -229,8 +229,8 @@ Item {
         x: isRightEdge ? anchorPos.x : anchorPos.x - width
         y: anchorPos.y - height / 2
         radius: Theme.cornerRadius * 2
-        color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+        color: Theme.floatingSurface
-        border.color: BlurService.enabled ? "transparent" : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.6)
+        border.color: Theme.outlineStrong
         border.width: 2
 
         opacity: dropdownType === 2 ? 1 : 0
@@ -301,7 +301,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
 
@@ -383,8 +383,8 @@ Item {
         x: isRightEdge ? anchorPos.x : anchorPos.x - width
         y: anchorPos.y - height / 2
         radius: Theme.cornerRadius * 2
-        color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+        color: Theme.floatingSurface
-        border.color: BlurService.enabled ? "transparent" : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.6)
+        border.color: Theme.outlineStrong
         border.width: 2
 
         opacity: dropdownType === 3 ? 1 : 0
@@ -455,7 +455,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

@@ -628,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: BlurService.enabled ? "transparent" : 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
@@ -671,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: BlurService.enabled ? "transparent" : 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
@@ -748,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: BlurService.enabled ? "transparent" : 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/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

@@ -31,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
@@ -49,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 {

quickshell/Modules/Notifications/Center/NotificationCard.qml

@@ -39,7 +39,7 @@ Rectangle {
     readonly property real targetHeight: expanded ? (expandedContent.height + cardPadding * 2) : (baseCardHeight + collapsedContent.extraHeight)
     radius: Theme.cornerRadius
     scale: (cardHoverHandler.hovered ? 1.004 : 1.0) * listLevelAdjacentScaleInfluence
-    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
     readonly property var shadowElevation: Theme.elevationLevel1
     readonly property real baseShadowBlurPx: (shadowElevation && shadowElevation.blurPx !== undefined) ? shadowElevation.blurPx : 4
     readonly property real hoverShadowBlurBoost: cardHoverHandler.hovered ? Math.min(2, baseShadowBlurPx * 0.25) : 0
@@ -99,7 +99,7 @@ Rectangle {
         if (keyboardNavigationActive && expanded && selectedNotificationIndex >= 0) {
             return Theme.primaryHoverLight;
         }
-        return Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency);
+        return Theme.floatingSurfaceHigh;
     }
     border.color: {
         if (isGroupSelected && keyboardNavigationActive) {
@@ -111,7 +111,7 @@ Rectangle {
         if (notificationGroup?.latestNotification?.urgency === NotificationUrgency.Critical) {
             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 (isGroupSelected && keyboardNavigationActive) {
@@ -123,7 +123,7 @@ Rectangle {
         if (notificationGroup?.latestNotification?.urgency === NotificationUrgency.Critical) {
             return 2;
         }
-        return 0;
+        return Theme.layerOutlineWidth;
     }
     clip: false
 
@@ -500,8 +500,8 @@ Rectangle {
                             return expandedBaseHeight;
                         }
                         radius: Theme.cornerRadius
-                        color: isSelected ? Theme.primaryPressed : Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+                        color: isSelected ? Theme.primaryPressed : Theme.nestedSurface
-                        border.color: isSelected ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.4) : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.05)
+                        border.color: isSelected ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.4) : Theme.outlineMedium
                         border.width: 1
 
                         Behavior on border.color {

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/Notifications/Popup/NotificationPopup.qml

@@ -409,9 +409,9 @@ PanelWindow {
             sourceRect.width: Math.max(0, content.width - (content.cardInset * 2))
             sourceRect.height: Math.max(0, content.height - (content.cardInset * 2))
             sourceRect.radius: Theme.cornerRadius
-            sourceRect.color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+            sourceRect.color: Theme.readableSurface
-            sourceRect.border.color: notificationData && notificationData.urgency === NotificationUrgency.Critical ? Theme.withAlpha(Theme.primary, 0.3) : Theme.withAlpha(Theme.outline, 0.08)
+            sourceRect.border.color: notificationData && notificationData.urgency === NotificationUrgency.Critical ? Theme.withAlpha(Theme.primary, 0.3) : Theme.outlineMedium
-            sourceRect.border.width: notificationData && notificationData.urgency === NotificationUrgency.Critical ? 2 : 0
+            sourceRect.border.width: notificationData && notificationData.urgency === NotificationUrgency.Critical ? 2 : 1
 
             Rectangle {
                 x: bgShadowLayer.sourceRect.x
@@ -448,9 +448,10 @@ PanelWindow {
             anchors.fill: parent
             anchors.margins: content.cardInset
             radius: Theme.cornerRadius
+            antialiasing: true
             color: "transparent"
-            border.color: BlurService.borderColor
+            border.color: BlurService.enabled ? BlurService.borderColor : Theme.outlineMedium
-            border.width: BlurService.borderWidth
+            border.width: BlurService.enabled ? BlurService.borderWidth : 1
             z: 100
         }
 

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

@@ -1843,6 +1843,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"]
@@ -1886,12 +1913,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/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/DankPopout.qml

@@ -594,9 +594,10 @@ Item {
                 scale: contentWrapper.scale
                 visible: contentWrapper.visible
                 radius: Theme.cornerRadius
+                antialiasing: true
                 color: "transparent"
                 border.color: BlurService.enabled ? BlurService.borderColor : Theme.outlineMedium
-                border.width: BlurService.borderWidth
+                border.width: BlurService.enabled ? BlurService.borderWidth : 1
                 z: 100
             }
         }

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: Theme.withAlpha(slider.trackColor, Theme.popupTransparency)
+            color: Theme.withAlpha(slider.trackColor, slider.trackOpacity)
             anchors.verticalCenter: parent.verticalCenter
             clip: false
 

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

@@ -2870,6 +2870,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",
@@ -4533,6 +4587,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",
@@ -6555,27 +6630,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",
@@ -6746,6 +6800,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",