Popup transparency option

Common/Prefs.qml

@@ -11,6 +11,7 @@ Singleton {
     property bool themeIsDynamic: false
     property bool isLightMode: false
     property real topBarTransparency: 0.75
+    property real popupTransparency: 0.92
     property var recentlyUsedApps: []
     
     // New global preferences
@@ -75,6 +76,8 @@ Singleton {
                 isLightMode = settings.isLightMode !== undefined ? settings.isLightMode : false
                 topBarTransparency = settings.topBarTransparency !== undefined ? 
                     (settings.topBarTransparency > 1 ? settings.topBarTransparency / 100.0 : settings.topBarTransparency) : 0.75
+                popupTransparency = settings.popupTransparency !== undefined ? 
+                    (settings.popupTransparency > 1 ? settings.popupTransparency / 100.0 : settings.popupTransparency) : 0.92
                 recentlyUsedApps = settings.recentlyUsedApps || []
                 use24HourClock = settings.use24HourClock !== undefined ? settings.use24HourClock : true
                 useFahrenheit = settings.useFahrenheit !== undefined ? settings.useFahrenheit : false
@@ -107,6 +110,7 @@ Singleton {
             themeIsDynamic,
             isLightMode,
             topBarTransparency,
+            popupTransparency,
             recentlyUsedApps,
             use24HourClock,
             useFahrenheit,
@@ -159,6 +163,12 @@ Singleton {
         saveSettings()
     }
     
+    function setPopupTransparency(transparency) {
+        console.log("Prefs setPopupTransparency called - popupTransparency:", transparency)
+        popupTransparency = transparency
+        saveSettings()
+    }
+    
     function addRecentApp(app) {
         if (!app) return
         

Common/Theme.qml

@@ -19,9 +19,25 @@ QtObject {
             Colors.colorsUpdated.connect(root.onColorsUpdated)
         }
         
+        // Initialize transparency values from Prefs
+        if (typeof Prefs !== "undefined") {
+            if (Prefs.popupTransparency !== undefined) {
+                root.popupTransparency = Prefs.popupTransparency
+            }
+            // Connect to transparency changes
+            if (Prefs.popupTransparencyChanged) {
+                Prefs.popupTransparencyChanged.connect(function() {
+                    if (typeof Prefs !== "undefined" && Prefs.popupTransparency !== undefined) {
+                        root.popupTransparency = Prefs.popupTransparency
+                    }
+                })
+            }
+        }
+        
         console.log("Theme initialized, waiting for Prefs to load settings and apply theme")
     }
     
+    
     // Handle successful color extraction
     function onColorsUpdated() {
         console.log("Colors updated successfully - switching to dynamic theme")
@@ -502,6 +518,37 @@ QtObject {
     property real opacityHigh: 0.87
     property real opacityFull: 1.0
     
+    // Transparency system - can be overridden by Prefs
+    property real panelTransparency: 0.85
+    property real popupTransparency: 0.92
+    
+    // Smart transparency functions for content-aware backgrounds
+    function getPopupBackgroundAlpha() {
+        return popupTransparency
+    }
+    
+    function getContentBackgroundAlpha() {
+        return popupTransparency
+    }
+    
+    function getPopupBorderAlpha() {
+        // Borders can be more transparent than the main content
+        return popupTransparency * 0.6
+    }
+    
+    // Convenience functions for themed backgrounds with transparency
+    function popupBackground() {
+        return Qt.rgba(surfaceContainer.r, surfaceContainer.g, surfaceContainer.b, popupTransparency)
+    }
+    
+    function contentBackground() {
+        return Qt.rgba(surfaceContainer.r, surfaceContainer.g, surfaceContainer.b, popupTransparency)
+    }
+    
+    function panelBackground() {
+        return Qt.rgba(surfaceContainer.r, surfaceContainer.g, surfaceContainer.b, panelTransparency)
+    }
+    
     property string iconFont: "Material Symbols Rounded"
     property string iconFontFilled: "Material Symbols Rounded"
     property int iconFontWeight: Font.Normal

Widgets/AppLauncher.qml

@@ -285,7 +285,7 @@ PanelWindow {
             leftMargin: Theme.spacingL
         }
         
-        color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.98)
+        color: Theme.popupBackground()
         radius: Theme.cornerRadiusXLarge
         
         // Material 3 elevation with multiple layers
@@ -437,7 +437,7 @@ PanelWindow {
                     width: parent.width
                     height: 52
                     radius: Theme.cornerRadiusLarge
-                    color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.6)
+                    color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.7)
                     border.width: searchField.activeFocus ? 2 : 1
                     border.color: searchField.activeFocus ? Theme.primary : 
                                   Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
@@ -550,8 +550,8 @@ PanelWindow {
                         width: 200
                         height: 36
                         radius: Theme.cornerRadius
-                        color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
+                        color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.4)
-                        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+                        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, Theme.getPopupBorderAlpha())
                         border.width: 1
                         
                         Row {
@@ -776,8 +776,8 @@ PanelWindow {
                     width: 200
                     height: Math.min(250, categories.length * 40 + Theme.spacingM * 2)
                     radius: Theme.cornerRadiusLarge
-                    color: Theme.surfaceContainer
+                    color: Theme.contentBackground()
-                    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+                    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, Theme.getPopupBorderAlpha())
                     border.width: 1
                     visible: showCategories
                     z: 1000

Widgets/BatteryControlPopup.qml

@@ -40,9 +40,9 @@ PanelWindow {
         height: Math.min(450, parent.height - Theme.barHeight - Theme.spacingS * 2)
         x: Math.max(Theme.spacingL, parent.width - width - Theme.spacingL)
         y: Theme.barHeight + Theme.spacingS
-        color: Theme.surfaceContainer
+        color: Theme.popupBackground()
         radius: Theme.cornerRadiusLarge
-        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, Theme.getPopupBorderAlpha())
         border.width: 1
         
         opacity: root.batteryPopupVisible ? 1.0 : 0.0

Widgets/ClipboardHistory.qml

@@ -184,9 +184,9 @@ PanelWindow {
         height: Math.min(500, parent.height - 100)
         anchors.centerIn: parent
         
-        color: activeTheme.surfaceContainer
+        color: activeTheme.popupBackground()
         radius: activeTheme.cornerRadiusXLarge
-        border.color: Qt.rgba(activeTheme.outline.r, activeTheme.outline.g, activeTheme.outline.b, 0.2)
+        border.color: Qt.rgba(activeTheme.outline.r, activeTheme.outline.g, activeTheme.outline.b, activeTheme.getPopupBorderAlpha())
         border.width: 1
         
         opacity: clipboardHistory.isVisible ? 1.0 : 0.0
@@ -300,8 +300,8 @@ PanelWindow {
                 width: parent.width
                 height: 48
                 radius: activeTheme.cornerRadiusLarge
-                color: Qt.rgba(activeTheme.surfaceVariant.r, activeTheme.surfaceVariant.g, activeTheme.surfaceVariant.b, 0.3)
+                color: Qt.rgba(activeTheme.surfaceVariant.r, activeTheme.surfaceVariant.g, activeTheme.surfaceVariant.b, activeTheme.getContentBackgroundAlpha() * 0.4)
-                border.color: searchField.focus ? activeTheme.primary : Qt.rgba(activeTheme.outline.r, activeTheme.outline.g, activeTheme.outline.b, 0.2)
+                border.color: searchField.focus ? activeTheme.primary : Qt.rgba(activeTheme.outline.r, activeTheme.outline.g, activeTheme.outline.b, activeTheme.getPopupBorderAlpha())
                 border.width: searchField.focus ? 2 : 1
                 
                 Row {
@@ -642,8 +642,8 @@ PanelWindow {
             width: 350
             height: 200  // Increased height for better spacing
             radius: activeTheme.cornerRadiusLarge
-            color: activeTheme.surfaceContainer
+            color: activeTheme.popupBackground()
-            border.color: Qt.rgba(activeTheme.outline.r, activeTheme.outline.g, activeTheme.outline.b, 0.3)
+            border.color: Qt.rgba(activeTheme.outline.r, activeTheme.outline.g, activeTheme.outline.b, activeTheme.getPopupBorderAlpha())
             border.width: 1
             visible: showClearConfirmation
             z: 1000

Widgets/ControlCenter/ControlCenterPopup.qml

@@ -37,9 +37,9 @@ PanelWindow {
         height: controlCenterPopup.powerOptionsExpanded ? 570 : 500
         x: Math.max(Theme.spacingL, parent.width - width - Theme.spacingL)
         y: Theme.barHeight + Theme.spacingXS
-        color: Theme.surfaceContainer
+        color: Theme.popupBackground()
         radius: Theme.cornerRadiusLarge
-        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, Theme.getPopupBorderAlpha())
         border.width: 1
         
         // TopBar dropdown animation - optimized for performance
@@ -122,8 +122,8 @@ PanelWindow {
                     width: parent.width
                     height: 90
                     radius: Theme.cornerRadiusLarge
-                    color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
+                    color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.4)
-                    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+                    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, Theme.getPopupBorderAlpha())
                     border.width: 1
                     
                     Row {
@@ -362,8 +362,8 @@ PanelWindow {
                     width: parent.width
                     height: controlCenterPopup.powerOptionsExpanded ? 60 : 0
                     radius: Theme.cornerRadius
-                    color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
+                    color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.4)
-                    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+                    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, Theme.getPopupBorderAlpha())
                     border.width: controlCenterPopup.powerOptionsExpanded ? 1 : 0
                     opacity: controlCenterPopup.powerOptionsExpanded ? 1.0 : 0.0
                     clip: true
@@ -635,7 +635,7 @@ PanelWindow {
                 width: parent.width
                 height: controlCenterPopup.powerOptionsExpanded ? 240 : 300
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.08)
+                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.1)
                 
                 Behavior on height {
                     NumberAnimation {

Widgets/NotificationHistoryPopup.qml

@@ -45,9 +45,9 @@ PanelWindow {
         height: 500
         x: parent.width - width - Theme.spacingL
         y: Theme.barHeight + Theme.spacingXS
-        color: Theme.surfaceContainer
+        color: Theme.popupBackground()
         radius: Theme.cornerRadiusLarge
-        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, Theme.getPopupBorderAlpha())
         border.width: 1
         
         // TopBar dropdown animation - slide down from bar (consistent with other TopBar widgets)

Widgets/NotificationPopup.qml

@@ -37,7 +37,7 @@ PanelWindow {
         anchors.topMargin: 16   // 16px from the top of this window
         anchors.rightMargin: 16  // 16px from the right edge
         
-        color: Theme.surfaceContainer
+        color: Theme.popupBackground()
         radius: Theme.cornerRadiusLarge
         border.width: 0  // Remove border completely
         

Widgets/PowerMenuPopup.qml

@@ -40,9 +40,9 @@ PanelWindow {
         height: 320  // Fixed height to prevent cropping
         x: Math.max(Theme.spacingL, parent.width - width - Theme.spacingL)
         y: Theme.barHeight + Theme.spacingXS
-        color: Theme.surfaceContainer
+        color: Theme.popupBackground()
         radius: Theme.cornerRadiusLarge
-        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, Theme.getPopupBorderAlpha())
         border.width: 1
         
         opacity: root.powerMenuVisible ? 1.0 : 0.0

Widgets/ProcessListDropdown.qml

@@ -53,8 +53,8 @@ PanelWindow {
         y: Theme.barHeight + Theme.spacingXS
         
         radius: Theme.cornerRadiusLarge
-        color: Theme.surfaceContainer
+        color: Theme.popupBackground()
-        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, Theme.getPopupBorderAlpha())
         border.width: 1
         clip: true
         
@@ -664,8 +664,8 @@ PanelWindow {
             width: 180
             height: menuColumn.implicitHeight + Theme.spacingS * 2
             radius: Theme.cornerRadiusLarge
-            color: Theme.surfaceContainer
+            color: Theme.popupBackground()
-            border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+            border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, Theme.getPopupBorderAlpha())
             border.width: 1
         
         // Material 3 drop shadow

Widgets/SettingsPopup.qml

@@ -48,9 +48,9 @@ PanelWindow {
         width: Math.min(600, parent.width - Theme.spacingXL * 2)
         height: Math.min(700, parent.height - Theme.spacingXL * 2)
         anchors.centerIn: parent
-        color: Theme.surfaceContainer
+        color: Theme.popupBackground()
         radius: Theme.cornerRadiusLarge
-        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, Theme.getPopupBorderAlpha())
         border.width: 1
         
         // Simple opacity and scale control tied directly to settingsVisible
@@ -451,6 +451,43 @@ PanelWindow {
                                 }
                             }
                             
+                            // Popup Transparency
+                            Column {
+                                width: parent.width
+                                spacing: Theme.spacingS
+                                
+                                Text {
+                                    text: "Popup Transparency"
+                                    font.pixelSize: Theme.fontSizeMedium
+                                    color: Theme.surfaceText
+                                    font.weight: Font.Medium
+                                }
+                                
+                                CustomSlider {
+                                    width: parent.width
+                                    value: Math.round(Prefs.popupTransparency * 100)
+                                    minimum: 0
+                                    maximum: 100
+                                    leftIcon: "blur_on"
+                                    rightIcon: "circle"
+                                    unit: "%"
+                                    showValue: true
+                                    
+                                    onSliderDragFinished: (finalValue) => {
+                                        let transparencyValue = finalValue / 100.0
+                                        Prefs.setPopupTransparency(transparencyValue)
+                                    }
+                                }
+                                
+                                Text {
+                                    text: "Adjust transparency for dialogs, menus, and popups"
+                                    font.pixelSize: Theme.fontSizeSmall
+                                    color: Theme.surfaceVariantText
+                                    wrapMode: Text.WordWrap
+                                    width: parent.width
+                                }
+                            }
+                            
                             // Theme Picker
                             Column {
                                 width: parent.width

Widgets/SpotlightLauncher.qml

@@ -306,9 +306,9 @@ PanelWindow {
             return Math.min(Math.max(baseHeight, 500), parent.height - 40)
         }
         anchors.centerIn: parent
-        color: Theme.surfaceContainer
+        color: Theme.popupBackground()
         radius: Theme.cornerRadiusXLarge
-        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, Theme.getPopupBorderAlpha())
         border.width: 1
         layer.enabled: true
         layer.effect: MultiEffect {
@@ -439,9 +439,9 @@ PanelWindow {
                     width: parent.width - 80 - Theme.spacingM // Leave space for view toggle buttons
                     height: 56
                     radius: Theme.cornerRadiusLarge
-                    color: Theme.surfaceVariant
+                    color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.7)
                     border.width: searchField.activeFocus ? 2 : 1
-                    border.color: searchField.activeFocus ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
+                    border.color: searchField.activeFocus ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, Theme.getPopupBorderAlpha())
                     Behavior on border.color { ColorAnimation { duration: Theme.shortDuration; easing.type: Theme.standardEasing } }
                     
                     Row { 

Widgets/TrayMenuPopup.qml

@@ -29,9 +29,9 @@ PanelWindow {
         y: root.trayMenuY
         width: Math.max(180, Math.min(300, menuList.maxTextWidth + Theme.spacingL * 2))
         height: Math.max(60, menuList.contentHeight + Theme.spacingS * 2)
-        color: Theme.surfaceContainer
+        color: Theme.popupBackground()
         radius: Theme.cornerRadiusLarge
-        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, Theme.getPopupBorderAlpha())
         border.width: 1
         
         // Material 3 drop shadow