meta: transparency fixes

- fixes #949 - transparency not working > 95% - fixes #947 - dont apply opacity to windows, defer to window-rules
2026-01-25 05:52:50 -05:00 · 2025-12-08 11:43:29 -05:00
parent cd580090dc
commit bb7f7083b9
19 changed files with 105 additions and 135 deletions
--- a/quickshell/Modals/FileBrowser/FileBrowserModal.qml
+++ b/quickshell/Modals/FileBrowser/FileBrowserModal.qml
@@ -35,7 +35,7 @@ FloatingWindow {
    minimumSize: Qt.size(500, 400)
    implicitWidth: 800
    implicitHeight: 600
-    color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+    color: Theme.surfaceContainer
    visible: false

    onVisibleChanged: {
--- a/quickshell/Modals/NotificationModal.qml
+++ b/quickshell/Modals/NotificationModal.qml
@@ -59,6 +59,7 @@ DankModal {

    modalWidth: 500
    modalHeight: 700
+    backgroundColor: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
    visible: false
    onBackgroundClicked: hide()
    onOpened: () => {
--- a/quickshell/Modals/PolkitAuthModal.qml
+++ b/quickshell/Modals/PolkitAuthModal.qml
@@ -45,7 +45,7 @@ FloatingWindow {
    title: I18n.tr("Authentication")
    minimumSize: Qt.size(420, calculatedHeight)
    maximumSize: Qt.size(420, calculatedHeight)
-    color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+    color: Theme.surfaceContainer
    visible: false

    onVisibleChanged: {
--- a/quickshell/Modals/ProcessListModal.qml
+++ b/quickshell/Modals/ProcessListModal.qml
@@ -66,7 +66,7 @@ FloatingWindow {
    minimumSize: Qt.size(650, 400)
    implicitWidth: 900
    implicitHeight: 680
-    color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+    color: Theme.surfaceContainer
    visible: false

    onVisibleChanged: {
--- a/quickshell/Modals/Settings/SettingsModal.qml
+++ b/quickshell/Modals/Settings/SettingsModal.qml
@@ -60,7 +60,7 @@ FloatingWindow {
    minimumSize: Qt.size(500, 400)
    implicitWidth: 800
    implicitHeight: 940
-    color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+    color: Theme.surfaceContainer
    visible: false

    onIsCompactModeChanged: {
--- a/quickshell/Modals/WifiPasswordModal.qml
+++ b/quickshell/Modals/WifiPasswordModal.qml
@@ -191,7 +191,7 @@ FloatingWindow {
    title: isVpnPrompt ? I18n.tr("VPN Password") : I18n.tr("Wi-Fi Password")
    minimumSize: Qt.size(420, calculatedHeight)
    maximumSize: Qt.size(420, calculatedHeight)
-    color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+    color: Theme.surfaceContainer
    visible: false

    onVisibleChanged: {
--- a/quickshell/Modules/AppDrawer/AppDrawerPopout.qml
+++ b/quickshell/Modules/AppDrawer/AppDrawerPopout.qml
@@ -97,7 +97,7 @@ DankPopout {

            property alias searchField: searchField

-            color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+            color: "transparent"
            radius: Theme.cornerRadius
            antialiasing: true
            smooth: true
--- a/quickshell/Modules/ControlCenter/ControlCenterPopout.qml
+++ b/quickshell/Modules/ControlCenter/ControlCenterPopout.qml
@@ -113,11 +113,7 @@ DankPopout {
            implicitHeight: mainColumn.implicitHeight + Theme.spacingM
            property alias bluetoothCodecSelector: bluetoothCodecSelector

-            color: {
-                const transparency = Theme.popupTransparency;
-                const surface = Theme.surfaceContainer || Qt.rgba(0.1, 0.1, 0.1, 1);
-                return Qt.rgba(surface.r, surface.g, surface.b, transparency);
-            }
+            color: "transparent"
            radius: Theme.cornerRadius
            border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
            border.width: 0
--- a/quickshell/Modules/DankBar/Popouts/BatteryPopout.qml
+++ b/quickshell/Modules/DankBar/Popouts/BatteryPopout.qml
@@ -1,9 +1,6 @@
 import QtQuick
-import QtQuick.Controls
 import Quickshell
 import Quickshell.Services.UPower
-import Quickshell.Wayland
-import Quickshell.Widgets
 import qs.Common
 import qs.Services
 import qs.Widgets
@@ -26,13 +23,12 @@ DankPopout {
    function setProfile(profile) {
        if (typeof PowerProfiles === "undefined") {
            ToastService.showError("power-profiles-daemon not available");
-            return ;
+            return;
        }
        PowerProfiles.profile = profile;
        if (PowerProfiles.profile !== profile) {
            ToastService.showError("Failed to set power profile");
        }
-
    }

    popupWidth: 400
@@ -48,7 +44,7 @@ DankPopout {
            id: batteryContent

            implicitHeight: contentColumn.implicitHeight + Theme.spacingL * 2
-            color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+            color: "transparent"
            radius: Theme.cornerRadius
            border.color: Theme.outlineMedium
            border.width: 0
@@ -59,9 +55,8 @@ DankPopout {
                if (root.shouldBeVisible) {
                    forceActiveFocus();
                }
-
            }
-            Keys.onPressed: function(event) {
+            Keys.onPressed: function (event) {
                if (event.key === Qt.Key_Escape) {
                    root.close();
                    event.accepted = true;
@@ -71,11 +66,10 @@ DankPopout {
            Connections {
                function onShouldBeVisibleChanged() {
                    if (root.shouldBeVisible) {
-                        Qt.callLater(function() {
+                        Qt.callLater(function () {
                            batteryContent.forceActiveFocus();
                        });
                    }
-
                }

                target: root
@@ -246,7 +240,8 @@ DankPopout {

                        StyledText {
                            text: {
-                                if (!BatteryService.batteryAvailable) return "Power profile management available"
+                                if (!BatteryService.batteryAvailable)
+                                    return "Power profile management available";
                                const time = BatteryService.formatTimeRemaining();
                                if (time !== "Unknown") {
                                    return BatteryService.isCharging ? `Time until full: ${time}` : `Time remaining: ${time}`;
@@ -470,14 +465,14 @@ DankPopout {
                                            StyledText {
                                                text: {
                                                    if (!modelData.healthSupported || modelData.healthPercentage <= 0)
-                                                        return "N/A"
-                                                    return `${Math.round(modelData.healthPercentage)}%`
+                                                        return "N/A";
+                                                    return `${Math.round(modelData.healthPercentage)}%`;
                                                }
                                                font.pixelSize: Theme.fontSizeSmall
                                                color: {
                                                    if (!modelData.healthSupported || modelData.healthPercentage <= 0)
-                                                        return Theme.surfaceText
-                                                    return modelData.healthPercentage < 80 ? Theme.error : Theme.surfaceText
+                                                        return Theme.surfaceText;
+                                                    return modelData.healthPercentage < 80 ? Theme.error : Theme.surfaceText;
                                                }
                                                font.weight: Font.Bold
                                                anchors.horizontalCenter: parent.horizontalCenter
@@ -526,10 +521,7 @@ DankPopout {
                                            spacing: 2

                                            StyledText {
-                                                text: modelData.state === UPowerDeviceState.Charging
-                                                                          ? I18n.tr("To Full")
-                                                                          : modelData.state === UPowerDeviceState.Discharging
-                                                                              ? I18n.tr("Left") : ""
+                                                text: modelData.state === UPowerDeviceState.Charging ? I18n.tr("To Full") : modelData.state === UPowerDeviceState.Discharging ? I18n.tr("Left") : ""
                                                font.pixelSize: Theme.fontSizeSmall
                                                color: Theme.surfaceTextMedium
                                                font.weight: Font.Medium
@@ -538,17 +530,14 @@ DankPopout {

                                            StyledText {
                                                text: {
-                                                      const time = modelData.state === UPowerDeviceState.Charging
-                                                                   ? modelData.timeToFull
-                                                                   : modelData.state === UPowerDeviceState.Discharging && BatteryService.changeRate > 0
-                                                                       ? (3600 * modelData.energy) / BatteryService.changeRate : 0
+                                                    const time = modelData.state === UPowerDeviceState.Charging ? modelData.timeToFull : modelData.state === UPowerDeviceState.Discharging && BatteryService.changeRate > 0 ? (3600 * modelData.energy) / BatteryService.changeRate : 0;

                                                    if (!time || time <= 0 || time > 86400)
-                                                        return "N/A"
+                                                        return "N/A";

-                                                    const hours = Math.floor(time / 3600)
-                                                    const minutes = Math.floor((time % 3600) / 60)
-                                                    return hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`
+                                                    const hours = Math.floor(time / 3600);
+                                                    const minutes = Math.floor((time % 3600) / 60);
+                                                    return hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`;
                                                }
                                                font.pixelSize: Theme.fontSizeSmall
                                                color: Theme.surfaceText
@@ -566,8 +555,9 @@ DankPopout {
                DankButtonGroup {
                    property var profileModel: (typeof PowerProfiles !== "undefined") ? [PowerProfile.PowerSaver, PowerProfile.Balanced].concat(PowerProfiles.hasPerformanceProfile ? [PowerProfile.Performance] : []) : [PowerProfile.PowerSaver, PowerProfile.Balanced, PowerProfile.Performance]
                    property int currentProfileIndex: {
-                        if (typeof PowerProfiles === "undefined") return 1
-                        return profileModel.findIndex(profile => root.isActiveProfile(profile))
+                        if (typeof PowerProfiles === "undefined")
+                            return 1;
+                        return profileModel.findIndex(profile => root.isActiveProfile(profile));
                    }

                    model: profileModel.map(profile => Theme.getPowerProfileLabel(profile))
@@ -575,8 +565,9 @@ DankPopout {
                    selectionMode: "single"
                    anchors.horizontalCenter: parent.horizontalCenter
                    onSelectionChanged: (index, selected) => {
-                        if (!selected) return
-                        root.setProfile(profileModel[index])
+                        if (!selected)
+                            return;
+                        root.setProfile(profileModel[index]);
                    }
                }

@@ -634,5 +625,4 @@ DankPopout {
            }
        }
    }
-
-}
+}
--- a/quickshell/Modules/DankBar/Popouts/DWLLayoutPopout.qml
+++ b/quickshell/Modules/DankBar/Popouts/DWLLayoutPopout.qml
@@ -1,8 +1,4 @@
 import QtQuick
-import QtQuick.Controls
-import Quickshell
-import Quickshell.Wayland
-import Quickshell.Widgets
 import qs.Common
 import qs.Services
 import qs.Widgets
@@ -15,31 +11,31 @@ DankPopout {
    property var triggerScreen: null

    function setTriggerPosition(x, y, width, section, screen, barPosition, barThickness, barSpacing, barConfig) {
-        triggerX = x
-        triggerY = y
-        triggerWidth = width
-        triggerSection = section
-        root.screen = screen
+        triggerX = x;
+        triggerY = y;
+        triggerWidth = width;
+        triggerSection = section;
+        root.screen = screen;

-        storedBarThickness = barThickness !== undefined ? barThickness : (Theme.barHeight - 4)
-        storedBarSpacing = barSpacing !== undefined ? barSpacing : 4
-        storedBarConfig = barConfig
+        storedBarThickness = barThickness !== undefined ? barThickness : (Theme.barHeight - 4);
+        storedBarSpacing = barSpacing !== undefined ? barSpacing : 4;
+        storedBarConfig = barConfig;

-        const pos = barPosition !== undefined ? barPosition : 0
-        const bottomGap = barConfig ? (barConfig.bottomGap !== undefined ? barConfig.bottomGap : 0) : 0
+        const pos = barPosition !== undefined ? barPosition : 0;
+        const bottomGap = barConfig ? (barConfig.bottomGap !== undefined ? barConfig.bottomGap : 0) : 0;

-        setBarContext(pos, bottomGap)
+        setBarContext(pos, bottomGap);

-        updateOutputState()
+        updateOutputState();
    }

    onScreenChanged: updateOutputState()

    function updateOutputState() {
        if (screen && DwlService.dwlAvailable) {
-            outputState = DwlService.getOutputState(screen.name)
+            outputState = DwlService.getOutputState(screen.name);
        } else {
-            outputState = null
+            outputState = null;
        }
    }

@@ -47,56 +43,56 @@ DankPopout {
    property string currentLayoutSymbol: outputState?.layoutSymbol || ""

    readonly property var layoutNames: ({
-        "CT": I18n.tr("Center Tiling"),
-        "G": I18n.tr("Grid"),
-        "K": I18n.tr("Deck"),
-        "M": I18n.tr("Monocle"),
-        "RT": I18n.tr("Right Tiling"),
-        "S": I18n.tr("Scrolling"),
-        "T": I18n.tr("Tiling"),
-        "VG": I18n.tr("Vertical Grid"),
-        "VK": I18n.tr("Vertical Deck"),
-        "VS": I18n.tr("Vertical Scrolling"),
-        "VT": I18n.tr("Vertical Tiling")
-    })
+            "CT": I18n.tr("Center Tiling"),
+            "G": I18n.tr("Grid"),
+            "K": I18n.tr("Deck"),
+            "M": I18n.tr("Monocle"),
+            "RT": I18n.tr("Right Tiling"),
+            "S": I18n.tr("Scrolling"),
+            "T": I18n.tr("Tiling"),
+            "VG": I18n.tr("Vertical Grid"),
+            "VK": I18n.tr("Vertical Deck"),
+            "VS": I18n.tr("Vertical Scrolling"),
+            "VT": I18n.tr("Vertical Tiling")
+        })

    readonly property var layoutIcons: ({
-        "CT": "view_compact",
-        "G": "grid_view",
-        "K": "layers",
-        "M": "fullscreen",
-        "RT": "view_sidebar",
-        "S": "view_carousel",
-        "T": "view_quilt",
-        "VG": "grid_on",
-        "VK": "view_day",
-        "VS": "scrollable_header",
-        "VT": "clarify"
-    })
+            "CT": "view_compact",
+            "G": "grid_view",
+            "K": "layers",
+            "M": "fullscreen",
+            "RT": "view_sidebar",
+            "S": "view_carousel",
+            "T": "view_quilt",
+            "VG": "grid_on",
+            "VK": "view_day",
+            "VS": "scrollable_header",
+            "VT": "clarify"
+        })

    function getLayoutName(symbol) {
-        return layoutNames[symbol] || symbol
+        return layoutNames[symbol] || symbol;
    }

    function getLayoutIcon(symbol) {
-        return layoutIcons[symbol] || "view_quilt"
+        return layoutIcons[symbol] || "view_quilt";
    }

    Connections {
        target: DwlService
        function onStateChanged() {
-            updateOutputState()
+            updateOutputState();
        }
    }

    onShouldBeVisibleChanged: {
        if (shouldBeVisible) {
-            updateOutputState()
+            updateOutputState();
        }
    }

    Component.onCompleted: {
-        updateOutputState()
+        updateOutputState();
    }

    popupWidth: 300
@@ -111,7 +107,7 @@ DankPopout {
            id: layoutContent

            implicitHeight: contentColumn.implicitHeight + Theme.spacingL * 2
-            color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+            color: "transparent"
            radius: Theme.cornerRadius
            border.color: Theme.outlineMedium
            border.width: 0
@@ -121,14 +117,14 @@ DankPopout {

            Component.onCompleted: {
                if (root.shouldBeVisible) {
-                    forceActiveFocus()
+                    forceActiveFocus();
                }
            }

            Keys.onPressed: event => {
                if (event.key === Qt.Key_Escape) {
-                    root.close()
-                    event.accepted = true
+                    root.close();
+                    event.accepted = true;
                }
            }

@@ -137,8 +133,8 @@ DankPopout {
                function onShouldBeVisibleChanged() {
                    if (root.shouldBeVisible) {
                        Qt.callLater(() => {
-                            layoutContent.forceActiveFocus()
-                        })
+                            layoutContent.forceActiveFocus();
+                        });
                    }
                }
            }
@@ -212,7 +208,7 @@ DankPopout {
                            hoverEnabled: true
                            cursorShape: Qt.PointingHandCursor
                            onPressed: {
-                                root.close()
+                                root.close();
                            }
                        }
                    }
@@ -282,14 +278,14 @@ DankPopout {
                                cursorShape: Qt.PointingHandCursor
                                onPressed: {
                                    if (!root.triggerScreen) {
-                                        return
+                                        return;
                                    }
                                    if (!DwlService.dwlAvailable) {
-                                        return
+                                        return;
                                    }

-                                    DwlService.setLayout(root.triggerScreen.name, index)
-                                    root.close()
+                                    DwlService.setLayout(root.triggerScreen.name, index);
+                                    root.close();
                                }
                            }

--- a/quickshell/Modules/DankBar/Popouts/VpnPopout.qml
+++ b/quickshell/Modules/DankBar/Popouts/VpnPopout.qml
@@ -36,7 +36,7 @@ DankPopout {
            id: content

            implicitHeight: contentColumn.height + Theme.spacingL * 2
-            color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+            color: "transparent"
            radius: Theme.cornerRadius
            border.color: Theme.outlineMedium
            border.width: 0
--- a/quickshell/Modules/DankDash/DankDashPopout.qml
+++ b/quickshell/Modules/DankDash/DankDashPopout.qml
@@ -167,7 +167,7 @@ DankPopout {
            id: mainContainer

            implicitHeight: contentColumn.height + Theme.spacingM * 2
-            color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+            color: "transparent"
            radius: Theme.cornerRadius
            focus: true

--- a/quickshell/Modules/Notifications/Center/NotificationCenterPopout.qml
+++ b/quickshell/Modules/Notifications/Center/NotificationCenterPopout.qml
@@ -124,7 +124,7 @@ DankPopout {
                return Math.max(300, Math.min(baseHeight, maxHeight));
            }

-            color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+            color: "transparent"
            radius: Theme.cornerRadius
            border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
            border.width: 0
--- a/quickshell/Modules/Plugins/PluginPopout.qml
+++ b/quickshell/Modules/Plugins/PluginPopout.qml
@@ -1,5 +1,4 @@
 import QtQuick
-import Quickshell.Wayland
 import qs.Common
 import qs.Widgets

@@ -25,7 +24,7 @@ DankPopout {
            id: popoutContainer

            implicitHeight: popoutColumn.implicitHeight + Theme.spacingL * 2
-            color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+            color: "transparent"
            radius: Theme.cornerRadius
            border.width: 0
            antialiasing: true
@@ -34,14 +33,14 @@ DankPopout {

            Component.onCompleted: {
                if (root.shouldBeVisible) {
-                    forceActiveFocus()
+                    forceActiveFocus();
                }
            }

            Keys.onPressed: event => {
                if (event.key === Qt.Key_Escape) {
-                    root.close()
-                    event.accepted = true
+                    root.close();
+                    event.accepted = true;
                }
            }

@@ -50,8 +49,8 @@ DankPopout {
                function onShouldBeVisibleChanged() {
                    if (root.shouldBeVisible) {
                        Qt.callLater(() => {
-                            popoutContainer.forceActiveFocus()
-                        })
+                            popoutContainer.forceActiveFocus();
+                        });
                    }
                }
            }
@@ -70,12 +69,12 @@ DankPopout {

                    onLoaded: {
                        if (item && "closePopout" in item) {
-                            item.closePopout = function() {
-                                root.close()
-                            }
+                            item.closePopout = function () {
+                                root.close();
+                            };
                        }
                        if (item) {
-                            root.contentHeight = Qt.binding(() => item.implicitHeight + Theme.spacingS * 2)
+                            root.contentHeight = Qt.binding(() => item.implicitHeight + Theme.spacingS * 2);
                        }
                    }
                }
--- a/quickshell/Modules/ProcessList/ProcessListPopout.qml
+++ b/quickshell/Modules/ProcessList/ProcessListPopout.qml
@@ -1,11 +1,5 @@
 import QtQuick
-import QtQuick.Controls
-import QtQuick.Effects
 import QtQuick.Layouts
-import Quickshell
-import Quickshell.Io
-import Quickshell.Wayland
-import Quickshell.Widgets
 import qs.Common
 import qs.Modules.ProcessList
 import qs.Services
@@ -57,7 +51,7 @@ DankPopout {
            id: processListContent

            radius: Theme.cornerRadius
-            color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+            color: "transparent"
            border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
            border.width: 0
            clip: true
@@ -70,7 +64,7 @@ DankPopout {
                }
                processContextMenu.parent = processListContent;
            }
-            Keys.onPressed: (event) => {
+            Keys.onPressed: event => {
                if (event.key === Qt.Key_Escape) {
                    processListPopout.close();
                    event.accepted = true;
@@ -108,7 +102,6 @@ DankPopout {
                        anchors.centerIn: parent
                        width: parent.width - Theme.spacingM * 2
                    }
-
                }

                Rectangle {
@@ -124,13 +117,8 @@ DankPopout {
                        anchors.margins: Theme.spacingS
                        contextMenu: processContextMenu
                    }
-
                }
-
            }
-
        }
-
    }
-
 }
--- a/quickshell/Modules/Settings/PluginBrowser.qml
+++ b/quickshell/Modules/Settings/PluginBrowser.qml
@@ -106,7 +106,7 @@ FloatingWindow {
    minimumSize: Qt.size(450, 400)
    implicitWidth: 600
    implicitHeight: 650
-    color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+    color: Theme.surfaceContainer
    visible: false

    onVisibleChanged: {
@@ -537,7 +537,7 @@ FloatingWindow {
        title: I18n.tr("Third-Party Plugin Warning")
        implicitWidth: 500
        implicitHeight: 350
-        color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+        color: Theme.surfaceContainer
        visible: false

        FocusScope {
--- a/quickshell/Modules/Settings/WidgetSelectionPopup.qml
+++ b/quickshell/Modules/Settings/WidgetSelectionPopup.qml
@@ -93,7 +93,7 @@ FloatingWindow {
    minimumSize: Qt.size(400, 350)
    implicitWidth: 500
    implicitHeight: 550
-    color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+    color: Theme.surfaceContainer
    visible: false

    onVisibleChanged: {
--- a/quickshell/Modules/SystemUpdatePopout.qml
+++ b/quickshell/Modules/SystemUpdatePopout.qml
@@ -36,7 +36,7 @@ DankPopout {
        Rectangle {
            id: updaterPanel

-            color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+            color: "transparent"
            radius: Theme.cornerRadius
            antialiasing: true
            smooth: true
--- a/quickshell/Widgets/DankPopout.qml
+++ b/quickshell/Widgets/DankPopout.qml
@@ -396,7 +396,6 @@ Item {
                Item {
                    id: bgShadowLayer
                    anchors.fill: parent
-                    visible: contentWrapper.popupSurfaceAlpha >= 0.95
                    layer.enabled: Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1"
                    layer.smooth: false
                    layer.textureSize: Qt.size(Math.round(width * root.dpr), Math.round(height * root.dpr))
@@ -421,6 +420,7 @@ Item {
                    DankRectangle {
                        anchors.fill: parent
                        radius: Theme.cornerRadius
+                        color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
                    }
                }