feat(theme): global floating window styling & transparency settings

quickshell/Common/Theme.qml

@@ -350,6 +350,8 @@ Singleton {
     readonly property color readableSurfaceHigh: withAlpha(surfaceContainerHigh, popupTransparency)
     readonly property color floatingSurface: foregroundLayers ? readableSurface : withAlpha(readableSurface, 0)
     readonly property color floatingSurfaceHigh: foregroundLayers ? readableSurfaceHigh : withAlpha(readableSurfaceHigh, 0)
+    readonly property color floatingWindowSurface: readableSurface
+    readonly property color notepadWindowSurface: withAlpha(surfaceContainer, notepadTransparency)
     readonly property color nestedSurface: floatingSurfaceHigh
     readonly property color notificationFloatingSurface: notificationForegroundLayers ? readableSurface : withAlpha(readableSurface, 0)
     readonly property color notificationFloatingSurfaceHigh: notificationForegroundLayers ? readableSurfaceHigh : withAlpha(readableSurfaceHigh, 0)

quickshell/Modals/PolkitAuthContent.qml

@@ -13,6 +13,17 @@ FocusScope {
     property bool awaitingFprintForPassword: false
     property var windowControls: null
     readonly property int inputFieldHeight: Theme.fontSizeMedium + Theme.spacingL * 2
+    readonly property bool _blurActive: Theme.blurForegroundLayers || Theme.transparentBlurLayers
+    readonly property real _fieldAlpha: {
+        if (Theme.transparentBlurLayers)
+            return 0.28;
+        if (Theme.blurForegroundLayers)
+            return Math.max(Theme.popupTransparency, 0.62);
+        return Theme.popupTransparency;
+    }
+    readonly property color _fieldColor: Theme.withAlpha(Theme.surfaceContainerHigh, _fieldAlpha)
+    readonly property color _fieldBorderColor: Theme.withAlpha(Theme.outline, _blurActive ? 0.16 : Theme.layerOutlineOpacity)
+    readonly property color _fieldFocusedBorderColor: Theme.withAlpha(Theme.primary, _blurActive ? 0.72 : 1.0)
 
     property string polkitEtcPamText: ""
     property string polkitLibPamText: ""
@@ -202,7 +213,7 @@ FocusScope {
             StyledText {
                 text: root.currentFlow?.message ?? ""
                 font.pixelSize: Theme.fontSizeMedium
-                color: Theme.surfaceTextMedium
+                color: Theme.surfaceText
                 width: parent.width
                 wrapMode: Text.Wrap
                 maximumLineCount: 2
@@ -272,9 +283,10 @@ FocusScope {
 
             width: parent.width
             height: root.inputFieldHeight
-            backgroundColor: Theme.surfaceHover
+            cornerRadius: Theme.cornerRadius
-            normalBorderColor: Theme.outlineStrong
+            backgroundColor: root._fieldColor
-            focusedBorderColor: Theme.primary
+            normalBorderColor: root._fieldBorderColor
+            focusedBorderColor: root._fieldFocusedBorderColor
             borderWidth: 1
             focusedBorderWidth: 2
             leftIconName: root.polkitPamHasFprint ? "fingerprint" : ""
@@ -352,7 +364,7 @@ FocusScope {
                         anchors.centerIn: parent
                         text: I18n.tr("Authenticate")
                         font.pixelSize: Theme.fontSizeMedium
-                        color: Theme.background
+                        color: Theme.primaryText
                         font.weight: Font.Medium
                     }
 

quickshell/Modals/PolkitAuthModal.qml

@@ -29,7 +29,7 @@ FloatingWindow {
     title: I18n.tr("Authentication")
     minimumSize: Qt.size(460, 220)
     maximumSize: Qt.size(460, 220)
-    color: Theme.surfaceContainer
+    color: Theme.floatingWindowSurface
     visible: false
 
     onClosed: hide()
@@ -53,6 +53,25 @@ 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: "transparent"
+        border.color: BlurService.borderColor
+        border.width: BlurService.borderWidth
+        antialiasing: true
+        z: 100
+    }
+
     Loader {
         id: contentLoader
         anchors.fill: parent

quickshell/Modals/Settings/SettingsModal.qml

@@ -8,6 +8,7 @@ import qs.Widgets
 FloatingWindow {
     id: settingsModal
 
+    property bool disablePopupTransparency: true
     property var profileBrowser: profileBrowserLoader.item
     property var wallpaperBrowser: wallpaperBrowserLoader.item
 
@@ -95,7 +96,7 @@ FloatingWindow {
     minimumSize: Qt.size(500, 400)
     implicitWidth: 900
     implicitHeight: screen ? Math.min(940, screen.height - 100) : 940
-    color: Theme.surfaceContainer
+    color: Theme.floatingWindowSurface
     visible: false
 
     onClosed: hide()
@@ -120,6 +121,25 @@ FloatingWindow {
         }
     }
 
+    WindowBlur {
+        targetWindow: settingsModal
+        blurX: 0
+        blurY: 0
+        blurWidth: settingsModal.visible ? settingsModal.width : 0
+        blurHeight: settingsModal.visible ? settingsModal.height : 0
+        blurRadius: Theme.cornerRadius
+    }
+
+    Rectangle {
+        anchors.fill: parent
+        radius: Theme.cornerRadius
+        color: "transparent"
+        border.color: BlurService.borderColor
+        border.width: BlurService.borderWidth
+        antialiasing: true
+        z: 100
+    }
+
     Loader {
         active: settingsModal.visible
         sourceComponent: Component {
@@ -180,8 +200,6 @@ FloatingWindow {
     FocusScope {
         id: contentFocusScope
 
-        property bool disablePopupTransparency: true
-
         LayoutMirroring.enabled: I18n.isRtl
         LayoutMirroring.childrenInherit: true
 
@@ -203,12 +221,6 @@ FloatingWindow {
                     onDoubleClicked: windowControls.tryToggleMaximize()
                 }
 
-                Rectangle {
-                    anchors.fill: parent
-                    color: Theme.surfaceContainer
-                    opacity: 0.5
-                }
-
                 Row {
                     anchors.left: parent.left
                     anchors.leftMargin: Theme.spacingL

quickshell/Modals/Settings/SettingsSidebar.qml

@@ -641,7 +641,7 @@ Rectangle {
     implicitWidth: __calculatedWidth
     width: __calculatedWidth
     height: parent.height
-    color: Theme.surfaceContainer
+    color: "transparent"
     radius: Theme.cornerRadius
 
     Component.onCompleted: {

quickshell/Modules/Notepad/NotepadPopoutWindow.qml

@@ -8,6 +8,7 @@ import qs.Modules.Notepad
 FloatingWindow {
     id: win
 
+    property bool disablePopupTransparency: true
     property alias shouldBeVisible: win.visible
     property alias notepad: notepad
 
@@ -27,7 +28,7 @@ FloatingWindow {
     minimumSize: Qt.size(360, 320)
     implicitWidth: 640
     implicitHeight: 760
-    color: Theme.surfaceContainer
+    color: Theme.notepadWindowSurface
     visible: false
 
     onVisibleChanged: {
@@ -38,9 +39,27 @@ FloatingWindow {
         }
     }
 
-    // A compositor close (e.g. niri close-window)
     onClosed: win.visible = false
 
+    WindowBlur {
+        targetWindow: win
+        blurX: 0
+        blurY: 0
+        blurWidth: win.visible ? win.width : 0
+        blurHeight: win.visible ? win.height : 0
+        blurRadius: Theme.cornerRadius
+    }
+
+    Rectangle {
+        anchors.fill: parent
+        radius: Theme.cornerRadius
+        color: "transparent"
+        border.color: BlurService.borderColor
+        border.width: BlurService.borderWidth
+        antialiasing: true
+        z: 100
+    }
+
     Item {
         anchors.fill: parent
 
@@ -58,12 +77,6 @@ FloatingWindow {
                 onDoubleClicked: windowControls.tryToggleMaximize()
             }
 
-            Rectangle {
-                anchors.fill: parent
-                color: Theme.surfaceContainerHigh
-                opacity: 0.5
-            }
-
             Row {
                 anchors.left: parent.left
                 anchors.leftMargin: Theme.spacingM

quickshell/Modules/Settings/ThemeColorsTab.qml

@@ -1728,7 +1728,7 @@ Item {
                     tags: ["surface", "popup", "transparency", "opacity", "modal"]
                     settingKey: "popupTransparency"
                     text: I18n.tr("Surface Opacity")
-                    description: I18n.tr("Controls opacity of shell surfaces, popouts, and modals")
+                    description: I18n.tr("Controls opacity of shell surfaces, popouts, modals, and floating windows", "Surface Opacity setting description including floating DMS windows")
                     visible: !themeColorsTab.connectedFrameModeActive
                     value: Math.round(SettingsData.popupTransparency * 100)
                     minimum: 0

quickshell/Modules/Settings/Widgets/SettingsCard.qml

@@ -38,7 +38,9 @@ StyledRect {
         return h;
     }
     radius: Theme.cornerRadius
-    color: Theme.surfaceContainerHigh
+    color: Theme.nestedSurface
+    border.color: Theme.outlineMedium
+    border.width: Theme.layerOutlineWidth
 
     readonly property bool collapsed: collapsible && !expanded
     readonly property bool hasHeader: root.title !== "" || root.iconName !== ""

quickshell/Modules/Settings/Widgets/SettingsSliderCard.qml

@@ -35,7 +35,9 @@ StyledRect {
     width: parent?.width ?? 0
     height: Theme.spacingL * 2 + contentColumn.height
     radius: Theme.cornerRadius
-    color: Theme.surfaceContainerHigh
+    color: Theme.nestedSurface
+    border.color: Theme.outlineMedium
+    border.width: Theme.layerOutlineWidth
 
     Component.onCompleted: {
         if (!settingKey)

quickshell/Modules/Settings/Widgets/SettingsToggleCard.qml

@@ -29,7 +29,9 @@ StyledRect {
     width: parent?.width ?? 0
     height: Theme.spacingL * 2 + mainColumn.height
     radius: Theme.cornerRadius
-    color: Theme.surfaceContainerHigh
+    color: Theme.nestedSurface
+    border.color: Theme.outlineMedium
+    border.width: Theme.layerOutlineWidth
 
     Component.onCompleted: {
         if (!settingKey)

quickshell/translations/settings_search_index.json

@@ -4563,6 +4563,7 @@
       "appearance",
       "colors",
       "controls",
+      "floating",
       "look",
       "modal",
       "modals",
@@ -4575,9 +4576,10 @@
       "surface",
       "surfaces",
       "theme",
-      "transparency"
+      "transparency",
+      "windows"
     ],
-    "description": "Controls opacity of shell surfaces, popouts, and modals"
+    "description": "Controls opacity of shell surfaces, popouts, modals, and floating windows"
   },
   {
     "section": "syncModeWithPortal",

quickshell/translations/template.json

@@ -4277,9 +4277,9 @@
     "comment": ""
   },
   {
-    "term": "Controls opacity of shell surfaces, popouts, and modals",
+    "term": "Controls opacity of shell surfaces, popouts, modals, and floating windows",
     "translation": "",
-    "context": "Controls opacity of shell surfaces, popouts, and modals",
+    "context": "Surface Opacity setting description including floating DMS windows",
     "reference": "",
     "comment": ""
   },