blur: stylize control center for blur mode

quickshell/Modals/Common/DankModal.qml

@@ -31,7 +31,7 @@ Item {
     property real animationOffset: Theme.spacingL
     property list<real> animationEnterCurve: Theme.expressiveCurves.expressiveDefaultSpatial
     property list<real> animationExitCurve: Theme.expressiveCurves.emphasized
-    property color backgroundColor: Theme.surfaceContainer
+    property color backgroundColor: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
     property color borderColor: Theme.outlineMedium
     property real borderWidth: 0
     property real cornerRadius: Theme.cornerRadius

quickshell/Modals/DankColorPickerModal.qml

@@ -132,7 +132,7 @@ DankModal {
 
     modalWidth: 680
     modalHeight: contentLoader.item ? contentLoader.item.implicitHeight + Theme.spacingM * 2 : 680
-    backgroundColor: Theme.surfaceContainer
+    backgroundColor: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
     cornerRadius: Theme.cornerRadius
     borderColor: Theme.outlineMedium
     borderWidth: 1

quickshell/Modules/ControlCenter/BuiltinPlugins/CupsWidget.qml

@@ -34,7 +34,7 @@ PluginComponent {
             id: detailRoot
             implicitHeight: detailColumn.implicitHeight + Theme.spacingM * 2
             radius: Theme.cornerRadius
-            color: Theme.surfaceContainerHigh
+            color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
 
             DankActionButton {
                 anchors.top: parent.top
@@ -252,7 +252,7 @@ PluginComponent {
                                 width: parent ? parent.width : 300
                                 height: 50
                                 radius: Theme.cornerRadius
-                                color: Theme.surfaceContainerHighest
+                                color: Theme.surfaceLight
                                 border.width: 1
                                 border.color: Theme.outlineLight
                                 opacity: 1.0

quickshell/Modules/ControlCenter/Components/EditControls.qml

@@ -33,7 +33,7 @@ Row {
         closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
 
         background: Rectangle {
-            color: Theme.surfaceContainer
+            color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
             border.color: Theme.primarySelected
             border.width: 0
             radius: Theme.cornerRadius

quickshell/Modules/ControlCenter/Details/AudioInputDetail.qml

@@ -207,9 +207,9 @@ Rectangle {
                     width: parent.width
                     height: 50
                     radius: Theme.cornerRadius
-                    color: deviceMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
-                    border.color: modelData === AudioService.source ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
-                    border.width: 0
+                    color: deviceMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.surfaceLight
+                    border.color: modelData === AudioService.source ? Theme.primary : Theme.outlineLight
+                    border.width: modelData === AudioService.source ? 2 : 1
 
                     Row {
                         anchors.left: parent.left

quickshell/Modules/ControlCenter/Details/AudioOutputDetail.qml

@@ -218,9 +218,9 @@ Rectangle {
                     width: parent.width
                     height: 50
                     radius: Theme.cornerRadius
-                    color: deviceMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
-                    border.color: modelData === AudioService.sink ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
-                    border.width: 0
+                    color: deviceMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.surfaceLight
+                    border.color: modelData === AudioService.sink ? Theme.primary : Theme.outlineLight
+                    border.width: modelData === AudioService.sink ? 2 : 1
 
                     DankRipple {
                         id: deviceRipple
@@ -397,9 +397,9 @@ Rectangle {
                     width: parent.width
                     height: 50
                     radius: Theme.cornerRadius
-                    color: Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
-                    border.color: modelData === AudioService.sink ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
-                    border.width: 0
+                    color: Theme.surfaceLight
+                    border.color: modelData === AudioService.sink ? Theme.primary : Theme.outlineLight
+                    border.width: modelData === AudioService.sink ? 2 : 1
 
                     Row {
                         anchors.left: parent.left

quickshell/Modules/ControlCenter/Details/BatteryDetail.qml

@@ -129,8 +129,9 @@ Rectangle {
                 width: (parent.width - Theme.spacingM) / 2
                 height: 64
                 radius: Theme.cornerRadius
-                color: Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
-                border.width: 0
+                color: Theme.surfaceLight
+                border.color: Theme.outlineLight
+                border.width: 1
 
                 Column {
                     anchors.centerIn: parent
@@ -164,8 +165,9 @@ Rectangle {
                 width: (parent.width - Theme.spacingM) / 2
                 height: 64
                 radius: Theme.cornerRadius
-                color: Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
-                border.width: 0
+                color: Theme.surfaceLight
+                border.color: Theme.outlineLight
+                border.width: 1
 
                 Column {
                     anchors.centerIn: parent

quickshell/Modules/ControlCenter/Details/BluetoothCodecSelector.qml

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

quickshell/Modules/ControlCenter/Details/BluetoothDetail.qml

@@ -229,7 +229,6 @@ Rectangle {
                     width: parent.width
                     height: 50
                     radius: Theme.cornerRadius
-                    border.width: 0
 
                     Component.onCompleted: {
                         if (!isConnected)
@@ -243,8 +242,8 @@ Rectangle {
                         if (isConnecting)
                             return Qt.rgba(Theme.warning.r, Theme.warning.g, Theme.warning.b, 0.12);
                         if (deviceMouseArea.containsMouse)
-                            return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08);
-                        return Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency);
+                            return Theme.primaryHoverLight;
+                        return Theme.surfaceLight;
                     }
 
                     border.color: {
@@ -252,8 +251,9 @@ Rectangle {
                             return Theme.warning;
                         if (isConnected)
                             return Theme.primary;
-                        return Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12);
+                        return Theme.outlineLight;
                     }
+                    border.width: (isConnecting || isConnected) ? 2 : 1
 
                     Row {
                         anchors.left: parent.left
@@ -490,9 +490,9 @@ Rectangle {
                     width: parent.width
                     height: 50
                     radius: Theme.cornerRadius
-                    color: availableMouseArea.containsMouse && isInteractive ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
-                    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
-                    border.width: 0
+                    color: availableMouseArea.containsMouse && isInteractive ? Theme.primaryHoverLight : Theme.surfaceLight
+                    border.color: Theme.outlineLight
+                    border.width: 1
                     opacity: isInteractive ? 1 : 0.6
 
                     Row {

quickshell/Modules/ControlCenter/Details/DiskUsageDetail.qml

@@ -79,9 +79,9 @@ Rectangle {
                     width: parent.width
                     height: 80
                     radius: Theme.cornerRadius
-                    color: Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
-                    border.color: modelData.mount === currentMountPath ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
-                    border.width: modelData.mount === currentMountPath ? 2 : 0
+                    color: Theme.surfaceLight
+                    border.color: modelData.mount === currentMountPath ? Theme.primary : Theme.outlineLight
+                    border.width: modelData.mount === currentMountPath ? 2 : 1
 
                     Row {
                         anchors.left: parent.left

quickshell/Modules/ControlCenter/Details/NetworkDetail.qml

@@ -308,9 +308,9 @@ Rectangle {
                     width: parent.width
                     height: wiredContentRow.implicitHeight + Theme.spacingM * 2
                     radius: Theme.cornerRadius
-                    color: wiredNetworkMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
-                    border.color: Theme.primary
-                    border.width: 0
+                    color: wiredNetworkMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.surfaceLight
+                    border.color: isActive ? Theme.primary : Theme.outlineLight
+                    border.width: isActive ? 2 : 1
 
                     Row {
                         id: wiredContentRow
@@ -565,9 +565,9 @@ Rectangle {
             width: wifiContent.width
             height: wifiContentRow.implicitHeight + Theme.spacingM * 2
             radius: Theme.cornerRadius
-            color: networkMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
-            border.color: wifiDelegate.isConnected ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
-            border.width: 0
+            color: networkMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.surfaceLight
+            border.color: wifiDelegate.isConnected ? Theme.primary : Theme.outlineLight
+            border.width: wifiDelegate.isConnected ? 2 : 1
 
             Row {
                 id: wifiContentRow

quickshell/Widgets/DankButtonGroup.qml

@@ -89,7 +89,7 @@ Row {
             width: Math.max(contentItem.implicitWidth + root.buttonPadding * 2, root.minButtonWidth) + (selected ? 4 : 0)
             height: root.buttonHeight
 
-            color: selected ? Theme.buttonBg : Theme.surfaceVariant
+            color: selected ? Theme.buttonBg : Theme.withAlpha(Theme.surfaceVariant, Theme.popupTransparency)
             border.color: "transparent"
             border.width: 0
 

quickshell/Widgets/DankOSD.qml

@@ -266,7 +266,7 @@ PanelWindow {
         scale: shouldBeVisible ? 1 : 0.9
 
         property bool childHovered: false
-        readonly property real popupSurfaceAlpha: SettingsData.popupTransparency
+        readonly property real popupSurfaceAlpha: Theme.popupTransparency
 
         Rectangle {
             id: background
@@ -286,7 +286,7 @@ PanelWindow {
             level: Theme.elevationLevel3
             fallbackOffset: 6
             targetRadius: Theme.cornerRadius
-            targetColor: Theme.surfaceContainer
+            targetColor: 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

@@ -576,14 +576,6 @@ Item {
                     }
                 }
 
-                Rectangle {
-                    anchors.fill: parent
-                    radius: Theme.cornerRadius
-                    color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
-                    border.color: BlurService.enabled ? BlurService.borderColor : Theme.outlineMedium
-                    border.width: BlurService.borderWidth
-                }
-
                 Loader {
                     id: contentLoader
                     anchors.fill: parent
@@ -591,6 +583,21 @@ Item {
                     asynchronous: false
                 }
             }
+
+            Rectangle {
+                width: parent.width
+                height: parent.height
+                x: contentWrapper.x
+                y: contentWrapper.y
+                opacity: contentWrapper.opacity
+                scale: contentWrapper.scale
+                visible: contentWrapper.visible
+                radius: Theme.cornerRadius
+                color: "transparent"
+                border.color: BlurService.enabled ? BlurService.borderColor : Theme.outlineMedium
+                border.width: BlurService.borderWidth
+                z: 100
+            }
         }
 
         Item {

quickshell/Widgets/VpnProfileDelegate.qml

@@ -238,7 +238,7 @@ Rectangle {
                         width: fieldContent.width + Theme.spacingM * 2
                         height: 32
                         radius: Theme.cornerRadius - 2
-                        color: Theme.surfaceContainerHigh
+                        color: Theme.surfaceLight
                         border.width: 1
                         border.color: Theme.outlineLight
 
@@ -272,7 +272,9 @@ Rectangle {
                 checked: configData ? (configData.autoconnect || false) : false
                 visible: !VPNService.configLoading && configData !== null
                 onToggled: checked => {
-                    VPNService.updateConfig(profile.uuid, {autoconnect: checked});
+                    VPNService.updateConfig(profile.uuid, {
+                        autoconnect: checked
+                    });
                 }
             }