Theme consistency overhaul:

- Add surface shift option, start from surface by default (previously
  was surfaceContainer). Old colors can be attained by changing it back
to "container" in theme colors
- Remove borders on surface elements, mostly
- Fix popup distances
- Use surfaceContainer/sch by default on widgets

Common/SettingsData.qml

@@ -18,7 +18,7 @@ Singleton {
     property string matugenScheme: "scheme-tonal-spot"
     property real topBarTransparency: 0.75
     property real topBarWidgetTransparency: 0.85
-    property real popupTransparency: 0.92
+    property real popupTransparency: 1.0
     property real dockTransparency: 1
     property bool use24HourClock: true
     property bool useFahrenheit: false
@@ -130,7 +130,8 @@ Singleton {
     property bool topBarGothCornersEnabled: false
     property bool lockScreenShowPowerActions: true
     property bool hideBrightnessSlider: false
-    property string widgetBackgroundColor: "sth"
+    property string widgetBackgroundColor: "sch"
+    property string surfaceBase: "s"
     property int notificationTimeoutLow: 5000
     property int notificationTimeoutNormal: 5000
     property int notificationTimeoutCritical: 0
@@ -210,7 +211,7 @@ Singleton {
                 matugenScheme = settings.matugenScheme !== undefined ? settings.matugenScheme : "scheme-tonal-spot"
                 topBarTransparency = settings.topBarTransparency !== undefined ? (settings.topBarTransparency > 1 ? settings.topBarTransparency / 100 : settings.topBarTransparency) : 0.75
                 topBarWidgetTransparency = settings.topBarWidgetTransparency !== undefined ? (settings.topBarWidgetTransparency > 1 ? settings.topBarWidgetTransparency / 100 : settings.topBarWidgetTransparency) : 0.85
-                popupTransparency = settings.popupTransparency !== undefined ? (settings.popupTransparency > 1 ? settings.popupTransparency / 100 : settings.popupTransparency) : 0.92
+                popupTransparency = settings.popupTransparency !== undefined ? (settings.popupTransparency > 1 ? settings.popupTransparency / 100 : settings.popupTransparency) : 1.0
                 dockTransparency = settings.dockTransparency !== undefined ? (settings.dockTransparency > 1 ? settings.dockTransparency / 100 : settings.dockTransparency) : 1
                 use24HourClock = settings.use24HourClock !== undefined ? settings.use24HourClock : true
                 useFahrenheit = settings.useFahrenheit !== undefined ? settings.useFahrenheit : false
@@ -323,7 +324,8 @@ Singleton {
                 topBarGothCornersEnabled = settings.topBarGothCornersEnabled !== undefined ? settings.topBarGothCornersEnabled : false
                 lockScreenShowPowerActions = settings.lockScreenShowPowerActions !== undefined ? settings.lockScreenShowPowerActions : true
                 hideBrightnessSlider = settings.hideBrightnessSlider !== undefined ? settings.hideBrightnessSlider : false
-                widgetBackgroundColor = settings.widgetBackgroundColor !== undefined ? settings.widgetBackgroundColor : "sth"
+                widgetBackgroundColor = settings.widgetBackgroundColor !== undefined ? settings.widgetBackgroundColor : "sch"
+                surfaceBase = settings.surfaceBase !== undefined ? settings.surfaceBase : "s"
                 screenPreferences = settings.screenPreferences !== undefined ? settings.screenPreferences : ({})
                 applyStoredTheme()
                 detectAvailableIconThemes()
@@ -433,6 +435,7 @@ Singleton {
                                                 "lockScreenShowPowerActions": lockScreenShowPowerActions,
                                                 "hideBrightnessSlider": hideBrightnessSlider,
                                                 "widgetBackgroundColor": widgetBackgroundColor,
+                                                "surfaceBase": surfaceBase,
                                                 "notificationTimeoutLow": notificationTimeoutLow,
                                                 "notificationTimeoutNormal": notificationTimeoutNormal,
                                                 "notificationTimeoutCritical": notificationTimeoutCritical,
@@ -1054,6 +1057,14 @@ Singleton {
         saveSettings()
     }
 
+    function setSurfaceBase(base) {
+        surfaceBase = base
+        saveSettings()
+        if (typeof Theme !== "undefined") {
+            Theme.generateSystemThemesFromCurrentTheme()
+        }
+    }
+
     function setScreenPreferences(prefs) {
         screenPreferences = prefs
         saveSettings()

Common/StockThemes.js

@@ -10,7 +10,8 @@ const CatppuccinMocha = {
     backgroundText: "#cdd6f4",
     outline: "#6c7086",
     surfaceContainer: "#313244",
-    surfaceContainerHigh: "#585b70"
+    surfaceContainerHigh: "#585b70",
+    surfaceContainerHighest: "#7f849c"
 }
 
 const CatppuccinLatte = {
@@ -22,7 +23,8 @@ const CatppuccinLatte = {
     backgroundText: "#4c4f69",
     outline: "#9ca0b0",
     surfaceContainer: "#ccd0da",
-    surfaceContainerHigh: "#acb0be"
+    surfaceContainerHigh: "#acb0be",
+    surfaceContainerHighest: "#8c8fa1"
 }
 
 const CatppuccinVariants = {
@@ -118,16 +120,17 @@ const StockThemes = {
             primaryText: "#000000",
             primaryContainer: "#0d47a1",
             secondary: "#8ab4f8",
-            surface: "#1a1c1e",
+            surface: "#101418",
-            surfaceText: "#e3e8ef",
+            surfaceText: "#e0e2e8",
-            surfaceVariant: "#44464f",
+            surfaceVariant: "#42474e",
-            surfaceVariantText: "#c4c7c5",
+            surfaceVariantText: "#c2c7cf",
             surfaceTint: "#8ab4f8",
-            background: "#1a1c1e",
+            background: "#101418",
-            backgroundText: "#e3e8ef",
+            backgroundText: "#e0e2e8",
-            outline: "#8e918f",
+            outline: "#8c9199",
-            surfaceContainer: "#1e2023",
+            surfaceContainer: "#1d2024",
-            surfaceContainerHigh: "#292b2f"
+            surfaceContainerHigh: "#272a2f",
+            surfaceContainerHighest: "#32353a"
         },
         purple: {
             name: "Purple",
@@ -135,16 +138,17 @@ const StockThemes = {
             primaryText: "#381E72",
             primaryContainer: "#4F378B",
             secondary: "#CCC2DC",
-            surface: "#10121E",
+            surface: "#141218",
-            surfaceText: "#E6E0E9",
+            surfaceText: "#e6e0e9",
-            surfaceVariant: "#49454F",
+            surfaceVariant: "#49454e",
-            surfaceVariantText: "#CAC4D0",
+            surfaceVariantText: "#cac4cf",
             surfaceTint: "#D0BCFF",
-            background: "#10121E",
+            background: "#141218",
-            backgroundText: "#E6E0E9",
+            backgroundText: "#e6e0e9",
-            outline: "#938F99",
+            outline: "#948f99",
-            surfaceContainer: "#1D1B20",
+            surfaceContainer: "#211f24",
-            surfaceContainerHigh: "#2B2930"
+            surfaceContainerHigh: "#2b292f",
+            surfaceContainerHighest: "#36343a"
         },
         green: {
             name: "Green",
@@ -152,16 +156,17 @@ const StockThemes = {
             primaryText: "#000000",
             primaryContainer: "#1b5e20",
             secondary: "#81c995",
-            surface: "#0f1411",
+            surface: "#10140f",
-            surfaceText: "#e1f5e3",
+            surfaceText: "#e0e4db",
-            surfaceVariant: "#404943",
+            surfaceVariant: "#424940",
-            surfaceVariantText: "#c1cbc4",
+            surfaceVariantText: "#c2c9bd",
             surfaceTint: "#81c995",
-            background: "#0f1411",
+            background: "#10140f",
-            backgroundText: "#e1f5e3",
+            backgroundText: "#e0e4db",
-            outline: "#8b938c",
+            outline: "#8c9388",
-            surfaceContainer: "#1a1f1b",
+            surfaceContainer: "#1d211b",
-            surfaceContainerHigh: "#252a26"
+            surfaceContainerHigh: "#272b25",
+            surfaceContainerHighest: "#323630"
         },
         orange: {
             name: "Orange",
@@ -169,16 +174,17 @@ const StockThemes = {
             primaryText: "#000000",
             primaryContainer: "#3e2723",
             secondary: "#ffb74d",
-            surface: "#1c1410",
+            surface: "#1a120e",
-            surfaceText: "#f5f1ea",
+            surfaceText: "#f0dfd8",
-            surfaceVariant: "#4a453a",
+            surfaceVariant: "#52443d",
-            surfaceVariantText: "#cbc5b8",
+            surfaceVariantText: "#d7c2b9",
             surfaceTint: "#ffb74d",
-            background: "#1c1410",
+            background: "#1a120e",
-            backgroundText: "#f5f1ea",
+            backgroundText: "#f0dfd8",
-            outline: "#958f84",
+            outline: "#a08d85",
-            surfaceContainer: "#211e17",
+            surfaceContainer: "#271e1a",
-            surfaceContainerHigh: "#2c291f"
+            surfaceContainerHigh: "#322824",
+            surfaceContainerHighest: "#3d332e"
         },
         red: {
             name: "Red",
@@ -186,16 +192,17 @@ const StockThemes = {
             primaryText: "#000000",
             primaryContainer: "#4a0e0e",
             secondary: "#f28b82",
-            surface: "#1c1011",
+            surface: "#1a1110",
-            surfaceText: "#f5e8ea",
+            surfaceText: "#f1dedc",
-            surfaceVariant: "#4a3f41",
+            surfaceVariant: "#534341",
-            surfaceVariantText: "#cbc2c4",
+            surfaceVariantText: "#d8c2be",
             surfaceTint: "#f28b82",
-            background: "#1c1011",
+            background: "#1a1110",
-            backgroundText: "#f5e8ea",
+            backgroundText: "#f1dedc",
-            outline: "#958b8d",
+            outline: "#a08c89",
-            surfaceContainer: "#211b1c",
+            surfaceContainer: "#271d1c",
-            surfaceContainerHigh: "#2c2426"
+            surfaceContainerHigh: "#322826",
+            surfaceContainerHighest: "#3d3231"
         },
         cyan: {
             name: "Cyan",
@@ -203,16 +210,17 @@ const StockThemes = {
             primaryText: "#000000",
             primaryContainer: "#004d5c",
             secondary: "#4dd0e1",
-            surface: "#0f1617",
+            surface: "#0e1416",
-            surfaceText: "#e8f4f5",
+            surfaceText: "#dee3e5",
-            surfaceVariant: "#3f474a",
+            surfaceVariant: "#3f484a",
-            surfaceVariantText: "#c2c9cb",
+            surfaceVariantText: "#bfc8ca",
             surfaceTint: "#4dd0e1",
-            background: "#0f1617",
+            background: "#0e1416",
-            backgroundText: "#e8f4f5",
+            backgroundText: "#dee3e5",
-            outline: "#8c9194",
+            outline: "#899295",
-            surfaceContainer: "#1a1f20",
+            surfaceContainer: "#1b2122",
-            surfaceContainerHigh: "#252b2c"
+            surfaceContainerHigh: "#252b2c",
+            surfaceContainerHighest: "#303637"
         },
         pink: {
             name: "Pink",
@@ -220,16 +228,17 @@ const StockThemes = {
             primaryText: "#000000",
             primaryContainer: "#4a0e2f",
             secondary: "#f8bbd9",
-            surface: "#1a1014",
+            surface: "#191112",
-            surfaceText: "#f3e8ee",
+            surfaceText: "#f0dee0",
-            surfaceVariant: "#483f45",
+            surfaceVariant: "#524345",
-            surfaceVariantText: "#c9c2c7",
+            surfaceVariantText: "#d6c2c3",
             surfaceTint: "#f8bbd9",
-            background: "#1a1014",
+            background: "#191112",
-            backgroundText: "#f3e8ee",
+            backgroundText: "#f0dee0",
-            outline: "#938a90",
+            outline: "#9f8c8e",
-            surfaceContainer: "#1f1b1e",
+            surfaceContainer: "#261d1e",
-            surfaceContainerHigh: "#2a2428"
+            surfaceContainerHigh: "#312829",
+            surfaceContainerHighest: "#3c3233"
         },
         amber: {
             name: "Amber",
@@ -237,16 +246,17 @@ const StockThemes = {
             primaryText: "#000000",
             primaryContainer: "#4a3c00",
             secondary: "#ffd54f",
-            surface: "#1a1710",
+            surface: "#17130b",
-            surfaceText: "#f3f0e8",
+            surfaceText: "#ebe1d4",
-            surfaceVariant: "#49453a",
+            surfaceVariant: "#4d4639",
-            surfaceVariantText: "#cac5b8",
+            surfaceVariantText: "#d0c5b4",
             surfaceTint: "#ffd54f",
-            background: "#1a1710",
+            background: "#17130b",
-            backgroundText: "#f3f0e8",
+            backgroundText: "#ebe1d4",
-            outline: "#949084",
+            outline: "#998f80",
-            surfaceContainer: "#1f1e17",
+            surfaceContainer: "#231f17",
-            surfaceContainerHigh: "#2a281f"
+            surfaceContainerHigh: "#2e2921",
+            surfaceContainerHighest: "#39342b"
         },
         coral: {
             name: "Coral",
@@ -255,15 +265,16 @@ const StockThemes = {
             primaryContainer: "#8c1d18",
             secondary: "#f9dedc",
             surface: "#1a1110",
-            surfaceText: "#f1e8e7",
+            surfaceText: "#f1dedc",
-            surfaceVariant: "#4a4142",
+            surfaceVariant: "#534341",
-            surfaceVariantText: "#cdc2c1",
+            surfaceVariantText: "#d8c2bf",
             surfaceTint: "#ffb4ab",
             background: "#1a1110",
-            backgroundText: "#f1e8e7",
+            backgroundText: "#f1dedc",
-            outline: "#968b8a",
+            outline: "#a08c8a",
-            surfaceContainer: "#201a19",
+            surfaceContainer: "#271d1c",
-            surfaceContainerHigh: "#2b2221"
+            surfaceContainerHigh: "#322826",
+            surfaceContainerHighest: "#3d3231"
         },
         monochrome: {
             name: "Monochrome",
@@ -281,6 +292,7 @@ const StockThemes = {
             outline: "#929092",
             surfaceContainer: "#2a2a2a",
             surfaceContainerHigh: "#2a2a2b",
+            surfaceContainerHighest: "#353535",
             error: "#ffb4ab",
             warning: "#3f4759",
             info: "#595e6c",
@@ -294,16 +306,17 @@ const StockThemes = {
             primaryText: "#ffffff",
             primaryContainer: "#e3f2fd",
             secondary: "#42a5f5",
-            surface: "#fefefe",
+            surface: "#f7f9ff",
-            surfaceText: "#1a1c1e",
+            surfaceText: "#181c20",
-            surfaceVariant: "#e7e0ec",
+            surfaceVariant: "#dee3eb",
-            surfaceVariantText: "#49454f",
+            surfaceVariantText: "#42474e",
             surfaceTint: "#1976d2",
-            background: "#fefefe",
+            background: "#f7f9ff",
-            backgroundText: "#1a1c1e",
+            backgroundText: "#181c20",
-            outline: "#79747e",
+            outline: "#72777f",
-            surfaceContainer: "#f3f3f3",
+            surfaceContainer: "#eceef4",
-            surfaceContainerHigh: "#ececec"
+            surfaceContainerHigh: "#e6e8ee",
+            surfaceContainerHighest: "#e0e2e8"
         },
         purple: {
             name: "Purple Light",
@@ -311,16 +324,17 @@ const StockThemes = {
             primaryText: "#ffffff",
             primaryContainer: "#EADDFF",
             secondary: "#625B71",
-            surface: "#FFFBFE",
+            surface: "#fef7ff",
-            surfaceText: "#1C1B1F",
+            surfaceText: "#1d1b20",
-            surfaceVariant: "#E7E0EC",
+            surfaceVariant: "#e7e0eb",
-            surfaceVariantText: "#49454F",
+            surfaceVariantText: "#49454e",
             surfaceTint: "#6750A4",
-            background: "#FFFBFE",
+            background: "#fef7ff",
-            backgroundText: "#1C1B1F",
+            backgroundText: "#1d1b20",
-            outline: "#79747E",
+            outline: "#7a757f",
-            surfaceContainer: "#F3EDF7",
+            surfaceContainer: "#f2ecf4",
-            surfaceContainerHigh: "#ECE6F0"
+            surfaceContainerHigh: "#ece6ee",
+            surfaceContainerHighest: "#e6e0e9"
         },
         green: {
             name: "Green Light",
@@ -328,16 +342,17 @@ const StockThemes = {
             primaryText: "#ffffff",
             primaryContainer: "#e8f5e8",
             secondary: "#4caf50",
-            surface: "#fefefe",
+            surface: "#f7fbf1",
-            surfaceText: "#1a1c1e",
+            surfaceText: "#191d17",
-            surfaceVariant: "#e7e0ec",
+            surfaceVariant: "#dee5d8",
-            surfaceVariantText: "#49454f",
+            surfaceVariantText: "#424940",
             surfaceTint: "#2e7d32",
-            background: "#fefefe",
+            background: "#f7fbf1",
-            backgroundText: "#1a1c1e",
+            backgroundText: "#191d17",
-            outline: "#79747e",
+            outline: "#72796f",
-            surfaceContainer: "#f3f3f3",
+            surfaceContainer: "#ecefe6",
-            surfaceContainerHigh: "#ececec"
+            surfaceContainerHigh: "#e6e9e0",
+            surfaceContainerHighest: "#e0e4db"
         },
         orange: {
             name: "Orange Light",
@@ -345,16 +360,17 @@ const StockThemes = {
             primaryText: "#ffffff",
             primaryContainer: "#ffecb3",
             secondary: "#ff9800",
-            surface: "#fefefe",
+            surface: "#fff8f6",
-            surfaceText: "#1a1c1e",
+            surfaceText: "#221a16",
-            surfaceVariant: "#e7e0ec",
+            surfaceVariant: "#f4ded5",
-            surfaceVariantText: "#49454f",
+            surfaceVariantText: "#52443d",
             surfaceTint: "#e65100",
-            background: "#fefefe",
+            background: "#fff8f6",
-            backgroundText: "#1a1c1e",
+            backgroundText: "#221a16",
-            outline: "#79747e",
+            outline: "#85736c",
-            surfaceContainer: "#f3f3f3",
+            surfaceContainer: "#fceae3",
-            surfaceContainerHigh: "#ececec"
+            surfaceContainerHigh: "#f6e5de",
+            surfaceContainerHighest: "#f0dfd8"
         },
         red: {
             name: "Red Light",
@@ -362,16 +378,17 @@ const StockThemes = {
             primaryText: "#ffffff",
             primaryContainer: "#ffebee",
             secondary: "#f44336",
-            surface: "#fefefe",
+            surface: "#fff8f7",
-            surfaceText: "#1a1c1e",
+            surfaceText: "#231918",
-            surfaceVariant: "#e7e0ec",
+            surfaceVariant: "#f5ddda",
-            surfaceVariantText: "#49454f",
+            surfaceVariantText: "#534341",
             surfaceTint: "#d32f2f",
-            background: "#fefefe",
+            background: "#fff8f7",
-            backgroundText: "#1a1c1e",
+            backgroundText: "#231918",
-            outline: "#79747e",
+            outline: "#857370",
-            surfaceContainer: "#f3f3f3",
+            surfaceContainer: "#fceae7",
-            surfaceContainerHigh: "#ececec"
+            surfaceContainerHigh: "#f7e4e1",
+            surfaceContainerHighest: "#f1dedc"
         },
         cyan: {
             name: "Cyan Light",
@@ -379,16 +396,17 @@ const StockThemes = {
             primaryText: "#ffffff",
             primaryContainer: "#e0f2f1",
             secondary: "#00bcd4",
-            surface: "#fefefe",
+            surface: "#f5fafc",
-            surfaceText: "#1a1c1e",
+            surfaceText: "#171d1e",
-            surfaceVariant: "#e7e0ec",
+            surfaceVariant: "#dbe4e6",
-            surfaceVariantText: "#49454f",
+            surfaceVariantText: "#3f484a",
             surfaceTint: "#0097a7",
-            background: "#fefefe",
+            background: "#f5fafc",
-            backgroundText: "#1a1c1e",
+            backgroundText: "#171d1e",
-            outline: "#79747e",
+            outline: "#6f797b",
-            surfaceContainer: "#f3f3f3",
+            surfaceContainer: "#e9eff0",
-            surfaceContainerHigh: "#ececec"
+            surfaceContainerHigh: "#e3e9eb",
+            surfaceContainerHighest: "#dee3e5"
         },
         pink: {
             name: "Pink Light",
@@ -396,16 +414,17 @@ const StockThemes = {
             primaryText: "#ffffff",
             primaryContainer: "#fce4ec",
             secondary: "#e91e63",
-            surface: "#fefefe",
+            surface: "#fff8f7",
-            surfaceText: "#1a1c1e",
+            surfaceText: "#22191a",
-            surfaceVariant: "#e7e0ec",
+            surfaceVariant: "#f3dddf",
-            surfaceVariantText: "#49454f",
+            surfaceVariantText: "#524345",
             surfaceTint: "#c2185b",
-            background: "#fefefe",
+            background: "#fff8f7",
-            backgroundText: "#1a1c1e",
+            backgroundText: "#22191a",
-            outline: "#79747e",
+            outline: "#847375",
-            surfaceContainer: "#f3f3f3",
+            surfaceContainer: "#fbeaeb",
-            surfaceContainerHigh: "#ececec"
+            surfaceContainerHigh: "#f5e4e5",
+            surfaceContainerHighest: "#f0dee0"
         },
         amber: {
             name: "Amber Light",
@@ -413,16 +432,17 @@ const StockThemes = {
             primaryText: "#000000",
             primaryContainer: "#fff8e1",
             secondary: "#ffc107",
-            surface: "#fefefe",
+            surface: "#fff8f2",
-            surfaceText: "#1a1c1e",
+            surfaceText: "#1f1b13",
-            surfaceVariant: "#e7e0ec",
+            surfaceVariant: "#ede1cf",
-            surfaceVariantText: "#49454f",
+            surfaceVariantText: "#4d4639",
             surfaceTint: "#ff8f00",
-            background: "#fefefe",
+            background: "#fff8f2",
-            backgroundText: "#1a1c1e",
+            backgroundText: "#1f1b13",
-            outline: "#79747e",
+            outline: "#7f7667",
-            surfaceContainer: "#f3f3f3",
+            surfaceContainer: "#f6ecdf",
-            surfaceContainerHigh: "#ececec"
+            surfaceContainerHigh: "#f1e7d9",
+            surfaceContainerHighest: "#ebe1d4"
         },
         coral: {
             name: "Coral Light",
@@ -430,16 +450,17 @@ const StockThemes = {
             primaryText: "#ffffff",
             primaryContainer: "#ffdad6",
             secondary: "#ff5449",
-            surface: "#fefefe",
+            surface: "#fff8f7",
-            surfaceText: "#1a1c1e",
+            surfaceText: "#231918",
-            surfaceVariant: "#e7e0ec",
+            surfaceVariant: "#f5ddda",
-            surfaceVariantText: "#49454f",
+            surfaceVariantText: "#534341",
             surfaceTint: "#8c1d18",
-            background: "#fefefe",
+            background: "#fff8f7",
-            backgroundText: "#1a1c1e",
+            backgroundText: "#231918",
-            outline: "#79747e",
+            outline: "#857371",
-            surfaceContainer: "#f3f3f3",
+            surfaceContainer: "#fceae7",
-            surfaceContainerHigh: "#ececec"
+            surfaceContainerHigh: "#f6e4e2",
+            surfaceContainerHighest: "#f1dedc"
         },
         monochrome: {
             name: "Monochrome Light",

Common/Theme.qml

@@ -16,6 +16,8 @@ Singleton {
 
     readonly property bool envDisableMatugen: Quickshell.env("DMS_DISABLE_MATUGEN") === "1" || Quickshell.env("DMS_DISABLE_MATUGEN") === "true"
 
+    readonly property real popupDistance: 4
+
     property string currentTheme: "blue"
     property string currentThemeCategory: "generic"
     property bool isLightMode: false
@@ -120,6 +122,7 @@ Singleton {
                 "outline": getMatugenColor("outline", "#8e918f"),
                 "surfaceContainer": getMatugenColor("surface_container", "#1e2023"),
                 "surfaceContainerHigh": getMatugenColor("surface_container_high", "#292b2f"),
+                "surfaceContainerHighest": getMatugenColor("surface_container_highest", "#343740"),
                 "error": "#F2B8B5",
                 "warning": "#FF9800",
                 "info": "#2196F3",
@@ -154,7 +157,12 @@ Singleton {
     property color primaryText: currentThemeData.primaryText
     property color primaryContainer: currentThemeData.primaryContainer
     property color secondary: currentThemeData.secondary
-    property color surface: currentThemeData.surface
+    property color surface: {
+        if (typeof SettingsData !== "undefined" && SettingsData.surfaceBase === "s") {
+            return currentThemeData.background
+        }
+        return currentThemeData.surface
+    }
     property color surfaceText: currentThemeData.surfaceText
     property color surfaceVariant: currentThemeData.surfaceVariant
     property color surfaceVariantText: currentThemeData.surfaceVariantText
@@ -163,8 +171,24 @@ Singleton {
     property color backgroundText: currentThemeData.backgroundText
     property color outline: currentThemeData.outline
     property color outlineVariant: currentThemeData.outlineVariant || Qt.rgba(outline.r, outline.g, outline.b, 0.6)
-    property color surfaceContainer: currentThemeData.surfaceContainer
+    property color surfaceContainer: {
-    property color surfaceContainerHigh: currentThemeData.surfaceContainerHigh
+        if (typeof SettingsData !== "undefined" && SettingsData.surfaceBase === "s") {
+            return currentThemeData.surface
+        }
+        return currentThemeData.surfaceContainer
+    }
+    property color surfaceContainerHigh: {
+        if (typeof SettingsData !== "undefined" && SettingsData.surfaceBase === "s") {
+            return currentThemeData.surfaceContainer
+        }
+        return currentThemeData.surfaceContainerHigh
+    }
+    property color surfaceContainerHighest: {
+        if (typeof SettingsData !== "undefined" && SettingsData.surfaceBase === "s") {
+            return currentThemeData.surfaceContainerHigh
+        }
+        return currentThemeData.surfaceContainerHighest
+    }
 
     property color onSurface: surfaceText
     property color onSurfaceVariant: surfaceVariantText
@@ -367,7 +391,7 @@ Singleton {
     property real notepadTransparency: SettingsData.notepadTransparencyOverride >= 0 ? SettingsData.notepadTransparencyOverride : popupTransparency
 
     property var widgetBaseBackgroundColor: {
-        const colorMode = typeof SettingsData !== "undefined" ? SettingsData.widgetBackgroundColor : "sth"
+        const colorMode = typeof SettingsData !== "undefined" ? SettingsData.widgetBackgroundColor : "sch"
         switch (colorMode) {
             case "s":
                 return surface
@@ -388,7 +412,7 @@ Singleton {
     }
 
     property var widgetBackground: {
-        const colorMode = typeof SettingsData !== "undefined" ? SettingsData.widgetBackgroundColor : "sth"
+        const colorMode = typeof SettingsData !== "undefined" ? SettingsData.widgetBackgroundColor : "sch"
         switch (colorMode) {
             case "s":
                 return Qt.rgba(surface.r, surface.g, surface.b, widgetTransparency)
@@ -541,7 +565,8 @@ Singleton {
             "value": value,
             "mode": isLight ? "light" : "dark",
             "iconTheme": iconTheme || "System Default",
-            "matugenType": matugenType || "scheme-tonal-spot"
+            "matugenType": matugenType || "scheme-tonal-spot",
+            "surfaceBase": (typeof SettingsData !== "undefined" && SettingsData.surfaceBase) ? SettingsData.surfaceBase : "sc"
         }
 
         const json = JSON.stringify(desired)

Modals/ProcessListModal.qml

@@ -181,7 +181,7 @@ DankModal {
                 Rectangle {
                     Layout.fillWidth: true
                     height: 52
-                    color: Theme.surfaceSelected
+                    color: Theme.surfaceContainerHigh
                     radius: Theme.cornerRadius
                     border.color: Theme.outlineLight
                     border.width: 1
@@ -281,7 +281,7 @@ DankModal {
                     Layout.fillWidth: true
                     Layout.fillHeight: true
                     radius: Theme.cornerRadius
-                    color: Theme.surfaceLight
+                    color: Theme.surfaceContainerHigh
                     border.color: Theme.outlineLight
                     border.width: 1
 

Modals/Settings/PowerSettings.qml

@@ -31,7 +31,7 @@ Item {
                 radius: Theme.cornerRadius
                 color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
                 border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
-                border.width: 1
+                border.width: 0
 
                 Column {
                     id: timeoutSection

Modals/Spotlight/SpotlightContent.qml

@@ -95,7 +95,7 @@ Item {
                 width: parent.width - 80 - Theme.spacingM
                 height: 56
                 cornerRadius: Theme.cornerRadius
-                backgroundColor: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.7)
+                backgroundColor: Theme.surfaceContainerHigh
                 normalBorderColor: Theme.outlineMedium
                 focusedBorderColor: Theme.primary
                 leftIconName: "search"

Modals/Spotlight/SpotlightResults.qml

@@ -13,7 +13,7 @@ Rectangle {
     width: parent.width
     height: parent.height - y
     radius: Theme.cornerRadius
-    color: Theme.surfaceLight
+    color: Theme.surfaceContainerHigh
     border.color: Theme.outlineLight
     border.width: 1
 
@@ -75,7 +75,7 @@ Rectangle {
             width: ListView.view.width
             height: resultsList.itemHeight
             radius: Theme.cornerRadius
-            color: ListView.isCurrentItem ? Theme.primaryPressed : listMouseArea.containsMouse ? Theme.primaryHoverLight : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.03)
+            color: ListView.isCurrentItem ? Theme.primaryPressed : listMouseArea.containsMouse ? Theme.primaryHoverLight : "transparent"
             border.color: ListView.isCurrentItem ? Theme.primarySelected : Theme.outlineMedium
             border.width: ListView.isCurrentItem ? 2 : 1
 
@@ -238,7 +238,7 @@ Rectangle {
             width: resultsGrid.cellWidth - resultsGrid.cellPadding
             height: resultsGrid.cellHeight - resultsGrid.cellPadding
             radius: Theme.cornerRadius
-            color: resultsGrid.currentIndex === index ? Theme.primaryPressed : gridMouseArea.containsMouse ? Theme.primaryHoverLight : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.03)
+            color: resultsGrid.currentIndex === index ? Theme.primaryPressed : gridMouseArea.containsMouse ? Theme.primaryHoverLight : "transparent"
             border.color: resultsGrid.currentIndex === index ? Theme.primarySelected : Theme.outlineMedium
             border.width: resultsGrid.currentIndex === index ? 2 : 1
 

Modules/AppDrawer/AppDrawerPopout.qml

@@ -33,7 +33,7 @@ DankPopout {
     popupWidth: 520
     popupHeight: 600
     triggerX: Theme.spacingL
-    triggerY: Theme.barHeight - 4 + SettingsData.topBarSpacing + Theme.spacingXS
+    triggerY: Math.max(26 + SettingsData.topBarInnerPadding + 4, Theme.barHeight - 4 - (8 - SettingsData.topBarInnerPadding)) + SettingsData.topBarSpacing + SettingsData.topBarBottomGap - 2 + Theme.popupDistance
     triggerWidth: 40
     positioning: "center"
     screen: triggerScreen
@@ -95,7 +95,7 @@ DankPopout {
                     color: "transparent"
                     radius: parent.radius + Math.abs(modelData.margin)
                     border.color: modelData.color
-                    border.width: 1
+                    border.width: 0
                     z: modelData.z
                 }
             }
@@ -294,7 +294,7 @@ DankPopout {
                         radius: Theme.cornerRadius
                         color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.1)
                         border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.05)
-                        border.width: 1
+                        border.width: 0
 
                         DankListView {
                             id: appList
@@ -382,7 +382,7 @@ DankPopout {
                                             visible: !listIconImg.visible
                                             color: Theme.surfaceLight
                                             radius: Theme.cornerRadius
-                                            border.width: 1
+                                            border.width: 0
                                             border.color: Theme.primarySelected
 
                                             StyledText {
@@ -546,7 +546,7 @@ DankPopout {
                                             visible: !gridIconImg.visible
                                             color: Theme.surfaceLight
                                             radius: Theme.cornerRadius
-                                            border.width: 1
+                                            border.width: 0
                                             border.color: Theme.primarySelected
 
                                             StyledText {
@@ -653,7 +653,7 @@ DankPopout {
         radius: Theme.cornerRadius
         color: Theme.popupBackground()
         border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
-        border.width: 1
+        border.width: 0
         z: 1000
         opacity: menuVisible ? 1 : 0
         scale: menuVisible ? 1 : 0.85

Modules/ControlCenter/Components/ActionTile.qml

@@ -25,8 +25,7 @@ Rectangle {
 
     readonly property color _tileBgActive: Theme.primary
     readonly property color _tileBgInactive:
-        Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b,
+        Theme.surfaceContainerHigh
-                Theme.getContentBackgroundAlpha() * 0.60)
     readonly property color _tileRingActive:
         Qt.rgba(Theme.primaryText.r, Theme.primaryText.g, Theme.primaryText.b, 0.22)
 

Modules/ControlCenter/Components/EditControls.qml

@@ -29,7 +29,7 @@ Row {
         background: Rectangle {
             color: Theme.surfaceContainer
             border.color: Theme.primarySelected
-            border.width: 1
+            border.width: 0
             radius: Theme.cornerRadius
         }
 
@@ -72,9 +72,9 @@ Row {
                     width: 400 - Theme.spacingL * 2
                     height: 50
                     radius: Theme.cornerRadius
-                    color: widgetMouseArea.containsMouse ? Theme.primaryHover : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
+                    color: widgetMouseArea.containsMouse ? Theme.primaryHover : Theme.surfaceContainerHigh
                     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
-                    border.width: 1
+                    border.width: 0
 
                     Row {
                         anchors.fill: parent
@@ -138,7 +138,7 @@ Row {
         radius: Theme.cornerRadius
         color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12)
         border.color: Theme.primary
-        border.width: 1
+        border.width: 0
 
         Row {
             anchors.centerIn: parent
@@ -172,7 +172,7 @@ Row {
         radius: Theme.cornerRadius
         color: Qt.rgba(Theme.warning.r, Theme.warning.g, Theme.warning.b, 0.12)
         border.color: Theme.warning
-        border.width: 1
+        border.width: 0
 
         Row {
             anchors.centerIn: parent
@@ -206,7 +206,7 @@ Row {
         radius: Theme.cornerRadius
         color: Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.12)
         border.color: Theme.error
-        border.width: 1
+        border.width: 0
 
         Row {
             anchors.centerIn: parent

Modules/ControlCenter/Components/EditModeOverlay.qml

@@ -55,7 +55,7 @@ Item {
             radius: 12
             color: (widgetData?.width || 50) === 25 ? Theme.primary : Theme.primaryContainer
             border.color: Theme.primary
-            border.width: 1
+            border.width: 0
             visible: !isSlider
 
             StyledText {
@@ -85,7 +85,7 @@ Item {
             radius: 12
             color: (widgetData?.width || 50) === 50 ? Theme.primary : Theme.primaryContainer
             border.color: Theme.primary
-            border.width: 1
+            border.width: 0
 
             StyledText {
                 anchors.centerIn: parent
@@ -114,7 +114,7 @@ Item {
             radius: 12
             color: (widgetData?.width || 50) === 75 ? Theme.primary : Theme.primaryContainer
             border.color: Theme.primary
-            border.width: 1
+            border.width: 0
             visible: !isSlider
 
             StyledText {
@@ -144,7 +144,7 @@ Item {
             radius: 12
             color: (widgetData?.width || 50) === 100 ? Theme.primary : Theme.primaryContainer
             border.color: Theme.primary
-            border.width: 1
+            border.width: 0
 
             StyledText {
                 anchors.centerIn: parent
@@ -183,7 +183,7 @@ Item {
             radius: 8
             color: Theme.surfaceContainer
             border.color: Theme.outline
-            border.width: 1
+            border.width: 0
 
             DankIcon {
                 anchors.centerIn: parent
@@ -206,7 +206,7 @@ Item {
             radius: 8
             color: Theme.surfaceContainer
             border.color: Theme.outline
-            border.width: 1
+            border.width: 0
 
             DankIcon {
                 anchors.centerIn: parent

Modules/ControlCenter/Components/HeaderPane.qml

@@ -15,13 +15,10 @@ Rectangle {
 
     implicitHeight: 70
     radius: Theme.cornerRadius
-    color: Qt.rgba(Theme.surfaceVariant.r,
+    color: Theme.surfaceContainerHigh
-                   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.width: 1
+    border.width: 0
 
     Row {
         anchors.left: parent.left

Modules/ControlCenter/Components/PowerOptionsPane.qml

@@ -18,10 +18,7 @@ Item {
         width: parent.width
         height: 60
         radius: Theme.cornerRadius
-        color: Qt.rgba(Theme.surfaceVariant.r,
+        color: Theme.surfaceContainerHigh
-                       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.width: root.expanded ? 1 : 0

Modules/ControlCenter/Components/WidgetGrid.qml

@@ -418,7 +418,7 @@ Column {
                 anchors.centerIn: parent
                 width: parent.width
                 height: 14
-                property color sliderTrackColor: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.60)
+                property color sliderTrackColor: Theme.surfaceContainerHigh
             }
 
             EditModeOverlay {
@@ -447,7 +447,7 @@ Column {
                 anchors.centerIn: parent
                 width: parent.width
                 height: 14
-                property color sliderTrackColor: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.60)
+                property color sliderTrackColor: Theme.surfaceContainerHigh
             }
 
             EditModeOverlay {
@@ -476,7 +476,7 @@ Column {
                 anchors.centerIn: parent
                 width: parent.width
                 height: 14
-                property color sliderTrackColor: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.60)
+                property color sliderTrackColor: Theme.surfaceContainerHigh
             }
 
             EditModeOverlay {

Modules/ControlCenter/ControlCenterPopout.qml

@@ -49,7 +49,7 @@ DankPopout {
         }
     }
 
-    readonly property color _containerBg: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.60)
+    readonly property color _containerBg: Theme.surfaceContainerHigh
 
     function setTriggerPosition(x, y, width, section, screen) {
         StateUtils.setTriggerPosition(root, x, y, width, section, screen)
@@ -66,7 +66,7 @@ DankPopout {
     popupWidth: 550
     popupHeight: Math.min((triggerScreen?.height ?? 1080) - 100, contentLoader.item && contentLoader.item.implicitHeight > 0 ? contentLoader.item.implicitHeight + 20 : 400)
     triggerX: (triggerScreen?.width ?? 1920) - 600 - Theme.spacingL
-    triggerY: Theme.barHeight - 4 + SettingsData.topBarSpacing + Theme.spacingXS
+    triggerY: Theme.barHeight - 4 + SettingsData.topBarSpacing + Theme.popupDistance
     triggerWidth: 80
     positioning: "center"
     screen: triggerScreen
@@ -109,7 +109,7 @@ DankPopout {
             radius: Theme.cornerRadius
             border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                                   Theme.outline.b, 0.08)
-            border.width: 1
+            border.width: 0
             antialiasing: true
             smooth: true
 

Modules/ControlCenter/Details/AudioInputDetail.qml

@@ -14,9 +14,9 @@ Rectangle {
 
     implicitHeight: headerRow.height + (hasInputVolumeSliderInCC ? 0 : volumeSlider.height) + audioContent.height + Theme.spacingM
     radius: Theme.cornerRadius
-    color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.6)
+    color: Theme.surfaceContainerHigh
     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
-    border.width: 1
+    border.width: 0
     
     Row {
         id: headerRow
@@ -138,7 +138,7 @@ 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) : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, index % 2 === 0 ? 0.3 : 0.2)
+                    color: deviceMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Theme.surfaceContainerHigh
                     border.color: modelData === AudioService.source ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
                     border.width: modelData === AudioService.source ? 2 : 1
                     

Modules/ControlCenter/Details/AudioOutputDetail.qml

@@ -14,9 +14,9 @@ Rectangle {
 
     implicitHeight: headerRow.height + (!hasVolumeSliderInCC ? volumeSlider.height : 0) + audioContent.height + Theme.spacingM
     radius: Theme.cornerRadius
-    color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.6)
+    color: Theme.surfaceContainerHigh
     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
-    border.width: 1
+    border.width: 0
     
     Row {
         id: headerRow
@@ -143,7 +143,7 @@ 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) : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, index % 2 === 0 ? 0.3 : 0.2)
+                    color: deviceMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Theme.surfaceContainerHigh
                     border.color: modelData === AudioService.sink ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
                     border.width: modelData === AudioService.sink ? 2 : 1
                     

Modules/ControlCenter/Details/BatteryDetail.qml

@@ -9,9 +9,9 @@ import qs.Widgets
 Rectangle {
     implicitHeight: contentColumn.implicitHeight + Theme.spacingL * 2
     radius: Theme.cornerRadius
-    color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.6)
+    color: Theme.surfaceContainerHigh
     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
-    border.width: 1
+    border.width: 0
 
     function isActiveProfile(profile) {
         if (typeof PowerProfiles === "undefined") {
@@ -125,9 +125,8 @@ Rectangle {
                 width: (parent.width - Theme.spacingM) / 2
                 height: 64
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08)
+                color: Theme.surfaceContainerHighest
-                border.color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2)
+                border.width: 0
-                border.width: 1
 
                 Column {
                     anchors.centerIn: parent
@@ -161,9 +160,8 @@ Rectangle {
                 width: (parent.width - Theme.spacingM) / 2
                 height: 64
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08)
+                color: Theme.surfaceContainerHighest
-                border.color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2)
+                border.width: 0
-                border.width: 1
 
                 Column {
                     anchors.centerIn: parent
@@ -211,7 +209,7 @@ Rectangle {
             radius: Theme.cornerRadius
             color: Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.12)
             border.color: Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.3)
-            border.width: 1
+            border.width: 0
             visible: (typeof PowerProfiles !== "undefined") && PowerProfiles.degradationReason !== PerformanceDegradationReason.None
 
             Column {

Modules/ControlCenter/Details/BluetoothCodecSelector.qml

@@ -124,7 +124,7 @@ Item {
         radius: Theme.cornerRadius
         color: Theme.surfaceContainer
         border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
-        border.width: 1
+        border.width: 0
         opacity: modalVisible ? 1 : 0
         scale: modalVisible ? 1 : 0.9
 
@@ -213,7 +213,7 @@ Item {
                                 return "transparent";
                         }
                         border.color: "transparent"
-                        border.width: 1
+                        border.width: 0
 
                         Row {
                             anchors.left: parent.left

Modules/ControlCenter/Details/BluetoothDetail.qml

@@ -9,9 +9,9 @@ import qs.Widgets
 Rectangle {
     implicitHeight: BluetoothService.adapter && BluetoothService.adapter.enabled ? headerRow.height + bluetoothContent.height + Theme.spacingM : headerRow.height
     radius: Theme.cornerRadius
-    color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.6)
+    color: Theme.surfaceContainerHigh
     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
-    border.width: 1
+    border.width: 0
     
     property var bluetoothCodecModalRef: null
     
@@ -58,11 +58,11 @@ Rectangle {
             radius: 18
             color: {
                 if (!BluetoothService.adapter || !BluetoothService.adapter.enabled)
-                    return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
+                    return Theme.surfaceContainerHigh
                 return scanMouseArea.containsMouse ? Theme.surfaceContainerHigh : "transparent"
             }
             border.color: BluetoothService.adapter && BluetoothService.adapter.enabled ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
-            border.width: 1
+            border.width: 0
             visible: BluetoothService.adapter && BluetoothService.adapter.enabled
             
             Row {
@@ -159,7 +159,7 @@ Rectangle {
                             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 Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, index % 2 === 0 ? 0.3 : 0.2)
+                        return Theme.surfaceContainerHigh
                     }
                     border.color: {
                         if (modelData.state === BluetoothDeviceState.Connecting)
@@ -347,9 +347,9 @@ Rectangle {
                     width: parent.width
                     height: 50
                     radius: Theme.cornerRadius
-                    color: availableMouseArea.containsMouse && !isBusy ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.15)
+                    color: availableMouseArea.containsMouse && !isBusy ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Theme.surfaceContainerHigh
                     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
-                    border.width: 1
+                    border.width: 0
                     opacity: canConnect ? 1 : 0.6
                     
                     Row {
@@ -458,7 +458,7 @@ Rectangle {
         background: Rectangle {
             color: Theme.popupBackground()
             radius: Theme.cornerRadius
-            border.width: 1
+            border.width: 0
             border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
         }
         

Modules/ControlCenter/Details/DiskUsageDetail.qml

@@ -13,9 +13,9 @@ Rectangle {
 
     implicitHeight: diskContent.height + Theme.spacingM
     radius: Theme.cornerRadius
-    color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.6)
+    color: Theme.surfaceContainerHigh
     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
-    border.width: 1
+    border.width: 0
 
     Component.onCompleted: {
         DgopService.addRef(["diskmounts"])
@@ -76,7 +76,7 @@ Rectangle {
                     width: parent.width
                     height: 80
                     radius: Theme.cornerRadius
-                    color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, index % 2 === 0 ? 0.3 : 0.2)
+                    color: Theme.surfaceContainerHigh
                     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 : 1
 

Modules/ControlCenter/Details/NetworkDetail.qml

@@ -17,9 +17,9 @@ Rectangle {
         return headerRow.height + wifiOffContent.height + Theme.spacingM
     }
     radius: Theme.cornerRadius
-    color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.6)
+    color: Theme.surfaceContainerHigh
     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
-    border.width: 1
+    border.width: 0
     
     Component.onCompleted: {
         NetworkService.addRef()
@@ -158,7 +158,7 @@ Rectangle {
                 height: 36
                 radius: 18
                 color: enableWifiButton.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08)
-                border.width: 1
+                border.width: 0
                 border.color: Theme.primary
                 
                 StyledText {
@@ -242,7 +242,7 @@ Rectangle {
                     width: parent.width
                     height: 50
                     radius: Theme.cornerRadius
-                    color: networkMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, index % 2 === 0 ? 0.3 : 0.2)
+                    color: networkMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Theme.surfaceContainerHigh
                     border.color: modelData.ssid === NetworkService.currentWifiSSID ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
                     border.width: modelData.ssid === NetworkService.currentWifiSSID ? 2 : 1
                     
@@ -369,7 +369,7 @@ Rectangle {
         background: Rectangle {
             color: Theme.popupBackground()
             radius: Theme.cornerRadius
-            border.width: 1
+            border.width: 0
             border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
         }
         

Modules/ControlCenter/PowerMenu.qml

@@ -44,7 +44,7 @@ PanelWindow {
         radius: Theme.cornerRadius
         border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                               Theme.outline.b, 0.08)
-        border.width: 1
+        border.width: 0
         opacity: powerMenuVisible ? 1 : 0
         scale: powerMenuVisible ? 1 : 0.85
 

Modules/ControlCenter/Widgets/AudioSliderRow.qml

@@ -70,7 +70,7 @@ Row {
         unit: "%"
         valueOverride: actualVolumePercent
         thumbOutlineColor: Theme.surfaceContainer
-        trackColor: root.sliderTrackColor.a > 0 ? root.sliderTrackColor : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.60)
+        trackColor: root.sliderTrackColor.a > 0 ? root.sliderTrackColor : Theme.surfaceContainerHigh
         onSliderValueChanged: function(newValue) {
             if (defaultSink) {
                 defaultSink.audio.volume = newValue / 100.0

Modules/ControlCenter/Widgets/BrightnessSliderRow.qml

@@ -80,7 +80,7 @@ Row {
             }
         }
         thumbOutlineColor: Theme.surfaceContainer
-        trackColor: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.60)
+        trackColor: Theme.surfaceContainerHigh
     }
 
     Menu {
@@ -91,7 +91,7 @@ Row {
         background: Rectangle {
             color: Theme.popupBackground()
             radius: Theme.cornerRadius
-            border.width: 1
+            border.width: 0
             border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
         }
         

Modules/ControlCenter/Widgets/CompactSlider.qml

@@ -20,9 +20,9 @@ Rectangle {
     width: parent ? parent.width : 200
     height: 60
     radius: Theme.cornerRadius
-    color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.6)
+    color: Theme.surfaceContainerHigh
     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
-    border.width: 1
+    border.width: 0
     opacity: enabled ? 1.0 : 0.6
 
     Row {

Modules/ControlCenter/Widgets/CompoundPill.qml

@@ -27,13 +27,11 @@ Rectangle {
         return Theme.isLightMode ? Qt.darker(base, factor) : Qt.lighter(base, factor)
     }
 
-    readonly property color _containerBg:
+    readonly property color _containerBg: Theme.surfaceContainerHigh
-        Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b,
-                Theme.getContentBackgroundAlpha() * 0.60)
 
     color: _containerBg
     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.10)
-    border.width: 1
+    border.width: 0
     antialiasing: true
 
     readonly property color _labelPrimary: Theme.surfaceText

Modules/ControlCenter/Widgets/InputAudioSliderRow.qml

@@ -68,7 +68,7 @@ Row {
         unit: "%"
         valueOverride: actualVolumePercent
         thumbOutlineColor: Theme.surfaceContainer
-        trackColor: root.sliderTrackColor.a > 0 ? root.sliderTrackColor : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.60)
+        trackColor: root.sliderTrackColor.a > 0 ? root.sliderTrackColor : Theme.surfaceContainerHigh
         onSliderValueChanged: function(newValue) {
             if (defaultSource) {
                 defaultSource.audio.volume = newValue / 100.0

Modules/ControlCenter/Widgets/SmallBatteryButton.qml

@@ -25,9 +25,7 @@ Rectangle {
     }
 
     readonly property color _tileBgActive: Theme.primary
-    readonly property color _tileBgInactive:
+    readonly property color _tileBgInactive: Theme.surfaceContainerHigh
-        Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b,
-                Theme.getContentBackgroundAlpha() * 0.60)
     readonly property color _tileRingActive:
         Qt.rgba(Theme.primaryText.r, Theme.primaryText.g, Theme.primaryText.b, 0.22)
     readonly property color _tileIconActive: Theme.primaryContainer

Modules/ControlCenter/Widgets/SmallToggleButton.qml

@@ -26,9 +26,7 @@ Rectangle {
     }
 
     readonly property color _tileBgActive: Theme.primary
-    readonly property color _tileBgInactive:
+    readonly property color _tileBgInactive: Theme.surfaceContainerHigh
-        Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b,
-                Theme.getContentBackgroundAlpha() * 0.60)
     readonly property color _tileRingActive:
         Qt.rgba(Theme.primaryText.r, Theme.primaryText.g, Theme.primaryText.b, 0.22)
     readonly property color _tileIconActive: Theme.primaryContainer

Modules/ControlCenter/Widgets/ToggleButton.qml

@@ -23,15 +23,13 @@ Rectangle {
     }
 
     readonly property color _tileBgActive: Theme.primary
-    readonly property color _tileBgInactive:
+    readonly property color _tileBgInactive: Theme.surfaceContainerHigh
-        Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b,
-                Theme.getContentBackgroundAlpha() * 0.60)
     readonly property color _tileRingActive:
         Qt.rgba(Theme.primaryText.r, Theme.primaryText.g, Theme.primaryText.b, 0.22)
 
     color: isActive ? _tileBgActive : _tileBgInactive
     border.color: isActive ? _tileRingActive : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
-    border.width: isActive ? 1 : 1
+    border.width: 0
     opacity: enabled ? 1.0 : 0.6
 
     function hoverTint(base) {
@@ -39,9 +37,7 @@ Rectangle {
         return Theme.isLightMode ? Qt.darker(base, factor) : Qt.lighter(base, factor)
     }
 
-    readonly property color _containerBg:
+    readonly property color _containerBg: Theme.surfaceContainerHigh
-        Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b,
-                Theme.getContentBackgroundAlpha() * 0.60)
 
     Rectangle {
         anchors.fill: parent

Modules/DankDash/DankDashPopout.qml

@@ -34,7 +34,7 @@ DankPopout {
     popupWidth: 700
     popupHeight: contentLoader.item ? contentLoader.item.implicitHeight : 500
     triggerX: Screen.width - 620 - Theme.spacingL
-    triggerY: Theme.barHeight - 4 + SettingsData.topBarSpacing + Theme.spacingS
+    triggerY: Math.max(26 + SettingsData.topBarInnerPadding + 4, Theme.barHeight - 4 - (8 - SettingsData.topBarInnerPadding)) + SettingsData.topBarSpacing + SettingsData.topBarBottomGap - 2 + Theme.popupDistance
     triggerWidth: 80
     positioning: "center"
     shouldBeVisible: dashVisible

Modules/DankDash/MediaPlayerTab.qml

@@ -420,7 +420,7 @@ Item {
                                 width: parent.width
                                 height: 48
                                 radius: Theme.cornerRadius
-                                color: deviceMouseAreaLeft.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, index % 2 === 0 ? 0.3 : 0.2)
+                                color: deviceMouseAreaLeft.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Theme.surfaceContainerHigh
                                 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
                                 
@@ -563,7 +563,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) : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, index % 2 === 0 ? 0.3 : 0.2)
+                                color: playerMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Theme.surfaceContainerHigh
                                 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
 
@@ -837,7 +837,7 @@ Item {
                             width: 40
                             height: 40
                             radius: 20
-                            color: prevBtnArea.containsMouse ? Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.12) : "transparent"
+                            color: prevBtnArea.containsMouse ? Theme.surfaceContainerHigh : "transparent"
                             anchors.verticalCenter: parent.verticalCenter
 
                             DankIcon {
@@ -903,7 +903,7 @@ Item {
                             width: 40
                             height: 40
                             radius: 20
-                            color: nextBtnArea.containsMouse ? Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.12) : "transparent"
+                            color: nextBtnArea.containsMouse ? Theme.surfaceContainerHigh : "transparent"
                             anchors.verticalCenter: parent.verticalCenter
 
                             DankIcon {
@@ -1115,7 +1115,7 @@ Item {
                         width: parent.width
                         height: parent.height
                         anchors.centerIn: parent
-                        color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.5)
+                        color: Theme.surfaceContainerHigh
                         radius: Theme.cornerRadius
                     }
 

Modules/DankDash/Overview/CalendarOverviewCard.qml

@@ -84,7 +84,7 @@ Rectangle {
     }
 
     radius: Theme.cornerRadius
-    color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.1)
+    color: Theme.surfaceContainerHigh
     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.05)
     border.width: 1
 
@@ -345,7 +345,7 @@ Rectangle {
                     } else if (eventMouseArea.containsMouse) {
                         return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.06)
                     }
-                    return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.04)
+                    return Theme.surfaceContainerHigh
                 }
                 border.color: {
                     if (modelData.url && eventMouseArea.containsMouse) {

Modules/DankDash/Overview/Card.qml

@@ -8,7 +8,7 @@ Rectangle {
     property int pad: Theme.spacingM
     
     radius: Theme.cornerRadius
-    color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.2)
+    color: Theme.surfaceContainerHigh
     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
     border.width: 1
 

Modules/DankDash/Overview/MediaOverviewCard.qml

@@ -131,7 +131,7 @@ Card {
                 height: 28
                 radius: 14
                 anchors.verticalCenter: playPauseButton.verticalCenter
-                color: prevArea.containsMouse ? Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.12) : "transparent"
+                color: prevArea.containsMouse ? Theme.surfaceContainerHigh : "transparent"
 
                 DankIcon {
                     anchors.centerIn: parent
@@ -183,7 +183,7 @@ Card {
                 height: 28
                 radius: 14
                 anchors.verticalCenter: playPauseButton.verticalCenter
-                color: nextArea.containsMouse ? Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.12) : "transparent"
+                color: nextArea.containsMouse ? Theme.surfaceContainerHigh : "transparent"
 
                 DankIcon {
                     anchors.centerIn: parent

Modules/DankDash/WeatherTab.qml

@@ -231,7 +231,7 @@ Item {
                 Layout.fillWidth: true
                 Layout.fillHeight: true
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
+                color: Theme.surfaceContainerHigh
 
                 Column {
                     anchors.centerIn: parent
@@ -278,7 +278,7 @@ Item {
                 Layout.fillWidth: true
                 Layout.fillHeight: true
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
+                color: Theme.surfaceContainerHigh
 
                 Column {
                     anchors.centerIn: parent
@@ -325,7 +325,7 @@ Item {
                 Layout.fillWidth: true
                 Layout.fillHeight: true
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
+                color: Theme.surfaceContainerHigh
 
                 Column {
                     anchors.centerIn: parent
@@ -372,7 +372,7 @@ Item {
                 Layout.fillWidth: true
                 Layout.fillHeight: true
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
+                color: Theme.surfaceContainerHigh
 
                 Column {
                     anchors.centerIn: parent
@@ -419,7 +419,7 @@ Item {
                 Layout.fillWidth: true
                 Layout.fillHeight: true
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
+                color: Theme.surfaceContainerHigh
 
                 Column {
                     anchors.centerIn: parent
@@ -466,7 +466,7 @@ Item {
                 Layout.fillWidth: true
                 Layout.fillHeight: true
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
+                color: Theme.surfaceContainerHigh
 
                 Column {
                     anchors.centerIn: parent
@@ -554,7 +554,7 @@ Item {
                             return null
                         }
 
-                        color: isToday ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.1) : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.1)
+                        color: isToday ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.1) : Theme.surfaceContainerHigh
                         border.color: isToday ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3) : "transparent"
                         border.width: isToday ? 1 : 0
 

Modules/Notifications/Center/NotificationCenterPopout.qml

@@ -36,7 +36,7 @@ DankPopout {
     popupWidth: 400
     popupHeight: contentLoader.item ? contentLoader.item.implicitHeight : 400
     triggerX: Screen.width - 400 - Theme.spacingL
-    triggerY: Theme.barHeight - 4 + SettingsData.topBarSpacing + Theme.spacingXS
+    triggerY: Theme.barHeight - 4 + SettingsData.topBarSpacing + Theme.popupDistance
     triggerWidth: 40
     positioning: "center"
     screen: triggerScreen
@@ -117,7 +117,7 @@ DankPopout {
             color: Theme.popupBackground()
             radius: Theme.cornerRadius
             border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
-            border.width: 1
+            border.width: 0
             focus: true
 
             Component.onCompleted: {

Modules/Notifications/Popup/NotificationPopup.qml

@@ -134,7 +134,7 @@ PanelWindow {
             radius: Theme.cornerRadius
             color: Theme.popupBackground()
             border.color: notificationData && notificationData.urgency === NotificationUrgency.Critical ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3) : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
-            border.width: notificationData && notificationData.urgency === NotificationUrgency.Critical ? 2 : 1
+            border.width: notificationData && notificationData.urgency === NotificationUrgency.Critical ? 2 : 0
             clip: true
 
             Rectangle {

Modules/ProcessList/PerformanceTab.qml

@@ -40,7 +40,7 @@ Column {
         width: parent.width
         height: 200
         radius: Theme.cornerRadius
-        color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.04)
+        color: Theme.surfaceContainerHigh
         border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.06)
         border.width: 1
 
@@ -180,7 +180,7 @@ Column {
         width: parent.width
         height: 80
         radius: Theme.cornerRadius
-        color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.04)
+        color: Theme.surfaceContainerHigh
         border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.06)
         border.width: 1
 
@@ -350,7 +350,7 @@ Column {
             width: (parent.width - Theme.spacingM) / 2
             height: 80
             radius: Theme.cornerRadius
-            color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.04)
+            color: Theme.surfaceContainerHigh
             border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.06)
             border.width: 1
 
@@ -416,7 +416,7 @@ Column {
             width: (parent.width - Theme.spacingM) / 2
             height: 80
             radius: Theme.cornerRadius
-            color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.04)
+            color: Theme.surfaceContainerHigh
             border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.06)
             border.width: 1
 

Modules/ProcessList/ProcessListPopout.qml

@@ -40,7 +40,7 @@ DankPopout {
     popupWidth: 600
     popupHeight: 600
     triggerX: Screen.width - 600 - Theme.spacingL
-    triggerY: Theme.barHeight - 4 + SettingsData.topBarSpacing + Theme.spacingXS
+    triggerY: Math.max(26 + SettingsData.topBarInnerPadding + 4, Theme.barHeight - 4 - (8 - SettingsData.topBarInnerPadding)) + SettingsData.topBarSpacing + SettingsData.topBarBottomGap - 2 + Theme.popupDistance
     triggerWidth: 55
     positioning: "center"
     screen: triggerScreen
@@ -62,7 +62,7 @@ DankPopout {
             radius: Theme.cornerRadius
             color: Theme.popupBackground()
             border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
-            border.width: 1
+            border.width: 0
             clip: true
             antialiasing: true
             smooth: true
@@ -100,9 +100,9 @@ DankPopout {
                     Layout.fillWidth: true
                     height: systemOverview.height + Theme.spacingM * 2
                     radius: Theme.cornerRadius
-                    color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.2)
+                    color: Theme.surfaceContainerHigh
                     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
-                    border.width: 1
+                    border.width: 0
 
                     SystemOverview {
                         id: systemOverview
@@ -117,9 +117,9 @@ DankPopout {
                     Layout.fillWidth: true
                     Layout.fillHeight: true
                     radius: Theme.cornerRadius
-                    color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.1)
+                    color: Theme.surfaceContainerHigh
                     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.05)
-                    border.width: 1
+                    border.width: 0
 
                     ProcessListView {
                         anchors.fill: parent

Modules/ProcessList/SystemTab.qml

@@ -24,7 +24,7 @@ DankFlickable {
             width: parent.width
             height: systemInfoColumn.implicitHeight + 2 * Theme.spacingL
             radius: Theme.cornerRadius
-            color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.6)
+            color: Theme.surfaceContainerHigh
             border.width: 0
 
             Column {
@@ -386,7 +386,7 @@ DankFlickable {
             width: parent.width
             height: storageColumn.implicitHeight + 2 * Theme.spacingL
             radius: Theme.cornerRadius
-            color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.6)
+            color: Theme.surfaceContainerHigh
             border.width: 0
 
             Column {

Modules/Settings/AboutTab.qml

@@ -28,11 +28,10 @@ Item {
                 width: parent.width
                 height: asciiSection.implicitHeight + Theme.spacingL * 2
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
+                color: Theme.surfaceContainerHigh
-                               Theme.surfaceVariant.b, 0.3)
                 border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                                       Theme.outline.b, 0.2)
-                border.width: 1
+                border.width: 0
 
                 Column {
                     id: asciiSection
@@ -225,11 +224,10 @@ Item {
                 width: parent.width
                 height: projectSection.implicitHeight + Theme.spacingL * 2
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
+                color: Theme.surfaceContainerHigh
-                               Theme.surfaceVariant.b, 0.3)
                 border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                                       Theme.outline.b, 0.2)
-                border.width: 1
+                border.width: 0
 
                 Column {
                     id: projectSection
@@ -285,11 +283,10 @@ Item {
                 width: parent.width
                 height: techSection.implicitHeight + Theme.spacingL * 2
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
+                color: Theme.surfaceContainerHigh
-                               Theme.surfaceVariant.b, 0.3)
                 border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                                       Theme.outline.b, 0.2)
-                border.width: 1
+                border.width: 0
 
                 Column {
                     id: techSection
@@ -510,7 +507,7 @@ Item {
 
         color: Theme.surfaceContainer
         radius: Theme.cornerRadius
-        border.width: 1
+        border.width: 0
         border.color: Theme.outlineMedium
 
         x: hoveredButton ? hoveredButton.mapToItem(aboutTab, hoveredButton.width / 2, 0).x - width / 2 : 0

Modules/Settings/DisplaysTab.qml

@@ -80,9 +80,9 @@ Item {
                 width: parent.width
                 height: screensInfoSection.implicitHeight + Theme.spacingL * 2
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
+                color: Theme.surfaceContainerHigh
                 border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
-                border.width: 1
+                border.width: 0
 
                 Column {
                     id: screensInfoSection
@@ -146,7 +146,7 @@ Item {
                                 radius: Theme.cornerRadius
                                 color: Theme.surfaceContainerHigh
                                 border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
-                                border.width: 1
+                                border.width: 0
 
                                 Row {
                                     id: screenRow
@@ -222,9 +222,9 @@ Item {
                         width: parent.width
                         height: componentSection.implicitHeight + Theme.spacingL * 2
                         radius: Theme.cornerRadius
-                        color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
+                        color: Theme.surfaceContainerHigh
                         border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
-                        border.width: 1
+                        border.width: 0
 
                         Column {
                             id: componentSection

Modules/Settings/DockTab.qml

@@ -24,11 +24,10 @@ Item {
                 width: parent.width
                 height: enableDockSection.implicitHeight + Theme.spacingL * 2
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
+                color: Theme.surfaceContainerHigh
-                               Theme.surfaceVariant.b, 0.3)
                 border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                                       Theme.outline.b, 0.2)
-                border.width: 1
+                border.width: 0
 
                 Column {
                     id: enableDockSection
@@ -88,11 +87,10 @@ Item {
                 width: parent.width
                 height: autoHideSection.implicitHeight + Theme.spacingL * 2
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
+                color: Theme.surfaceContainerHigh
-                               Theme.surfaceVariant.b, 0.3)
                 border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                                       Theme.outline.b, 0.2)
-                border.width: 1
+                border.width: 0
                 visible: SettingsData.showDock
                 opacity: visible ? 1 : 0
 
@@ -161,11 +159,10 @@ Item {
                 width: parent.width
                 height: groupByAppSection.implicitHeight + Theme.spacingL * 2
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
+                color: Theme.surfaceContainerHigh
-                               Theme.surfaceVariant.b, 0.3)
                 border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                                       Theme.outline.b, 0.2)
-                border.width: 1
+                border.width: 0
                 visible: SettingsData.showDock
                 opacity: visible ? 1 : 0
 
@@ -234,11 +231,10 @@ Item {
                 width: parent.width
                 height: transparencySection.implicitHeight + Theme.spacingL * 2
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
+                color: Theme.surfaceContainerHigh
-                               Theme.surfaceVariant.b, 0.3)
                 border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                                       Theme.outline.b, 0.2)
-                border.width: 1
+                border.width: 0
                 visible: SettingsData.showDock
                 opacity: visible ? 1 : 0
 
@@ -278,6 +274,7 @@ Item {
                         unit: "%"
                         showValue: true
                         wheelEnabled: false
+                        thumbOutlineColor: Theme.surfaceContainerHigh
                         onSliderValueChanged: newValue => {
                                                   SettingsData.setDockTransparency(
                                                       newValue / 100)

Modules/Settings/LauncherTab.qml

@@ -23,11 +23,10 @@ Item {
                 width: parent.width
                 height: launchPrefixSection.implicitHeight + Theme.spacingL * 2
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
+                color: Theme.surfaceContainerHigh
-                               Theme.surfaceVariant.b, 0.3)
                 border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                                       Theme.outline.b, 0.2)
-                border.width: 1
+                border.width: 0
 
                 Column {
                     id: launchPrefixSection
@@ -79,11 +78,10 @@ Item {
                 width: parent.width
                 height: recentlyUsedSection.implicitHeight + Theme.spacingL * 2
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
+                color: Theme.surfaceContainerHigh
-                               Theme.surfaceVariant.b, 0.3)
                 border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                                       Theme.outline.b, 0.2)
-                border.width: 1
+                border.width: 0
 
                 Column {
                     id: recentlyUsedSection
@@ -184,7 +182,7 @@ Item {
                                 border.color: Qt.rgba(Theme.outline.r,
                                                       Theme.outline.g,
                                                       Theme.outline.b, 0.1)
-                                border.width: 1
+                                border.width: 0
 
                                 Row {
                                     anchors.left: parent.left

Modules/Settings/PersonalizationTab.qml

@@ -96,9 +96,9 @@ Item {
                 width: parent.width
                 height: wallpaperSection.implicitHeight + Theme.spacingL * 2
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
+                color: Theme.surfaceContainerHigh
                 border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
-                border.width: 1
+                border.width: 0
 
                 Column {
                     id: wallpaperSection
@@ -137,7 +137,7 @@ Item {
                             radius: Theme.cornerRadius
                             color: Theme.surfaceVariant
                             border.color: Theme.outline
-                            border.width: 1
+                            border.width: 0
 
                             CachingImage {
                                 anchors.fill: parent
@@ -377,7 +377,7 @@ Item {
                                         var currentWallpaper = SessionData.perMonitorWallpaper ? SessionData.getMonitorWallpaper(selectedMonitorName) : SessionData.wallpaperPath
                                         return (currentWallpaper && !currentWallpaper.startsWith("#") && !currentWallpaper.startsWith("we")) ? 1 : 0.5
                                     }
-                                    backgroundColor: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.5)
+                                    backgroundColor: Theme.surfaceContainerHigh
                                     iconColor: Theme.surfaceText
                                     onClicked: {
                                         if (SessionData.perMonitorWallpaper) {
@@ -400,7 +400,7 @@ Item {
                                         var currentWallpaper = SessionData.perMonitorWallpaper ? SessionData.getMonitorWallpaper(selectedMonitorName) : SessionData.wallpaperPath
                                         return (currentWallpaper && !currentWallpaper.startsWith("#") && !currentWallpaper.startsWith("we")) ? 1 : 0.5
                                     }
-                                    backgroundColor: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.5)
+                                    backgroundColor: Theme.surfaceContainerHigh
                                     iconColor: Theme.surfaceText
                                     onClicked: {
                                         if (SessionData.perMonitorWallpaper) {
@@ -867,9 +867,9 @@ Item {
                 width: parent.width
                 height: dynamicThemeSection.implicitHeight + Theme.spacingL * 2
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
+                color: Theme.surfaceContainerHigh
                 border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
-                border.width: 1
+                border.width: 0
 
                 Column {
                     id: dynamicThemeSection
@@ -972,9 +972,9 @@ Item {
                 width: parent.width
                 height: displaySection.implicitHeight + Theme.spacingL * 2
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
+                color: Theme.surfaceContainerHigh
                 border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
-                border.width: 1
+                border.width: 0
 
                 Column {
                     id: displaySection
@@ -1359,9 +1359,9 @@ Item {
                 width: parent.width
                 height: lockScreenSection.implicitHeight + Theme.spacingL * 2
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
+                color: Theme.surfaceContainerHigh
                 border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
-                border.width: 1
+                border.width: 0
 
                 Column {
                     id: lockScreenSection
@@ -1407,9 +1407,9 @@ Item {
                 width: parent.width
                 height: fontSection.implicitHeight + Theme.spacingL * 2
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
+                color: Theme.surfaceContainerHigh
                 border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
-                border.width: 1
+                border.width: 0
 
                 Column {
                     id: fontSection
@@ -1593,7 +1593,7 @@ Item {
                                 iconName: "remove"
                                 iconSize: Theme.iconSizeSmall
                                 enabled: SettingsData.fontScale > 1.0
-                                backgroundColor: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.5)
+                                backgroundColor: Theme.surfaceContainerHigh
                                 iconColor: Theme.surfaceText
                                 onClicked: {
                                     var newScale = Math.max(1.0, SettingsData.fontScale - 0.05)
@@ -1605,9 +1605,9 @@ Item {
                                 width: 60
                                 height: 32
                                 radius: Theme.cornerRadius
-                                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
+                                color: Theme.surfaceContainerHigh
                                 border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
-                                border.width: 1
+                                border.width: 0
 
                                 StyledText {
                                     anchors.centerIn: parent
@@ -1623,7 +1623,7 @@ Item {
                                 iconName: "add"
                                 iconSize: Theme.iconSizeSmall
                                 enabled: SettingsData.fontScale < 2.0
-                                backgroundColor: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.5)
+                                backgroundColor: Theme.surfaceContainerHigh
                                 iconColor: Theme.surfaceText
                                 onClicked: {
                                     var newScale = Math.min(2.0, SettingsData.fontScale + 0.05)

Modules/Settings/ThemeColorsTab.qml

@@ -106,11 +106,10 @@ Item {
                 width: parent.width
                 height: themeSection.implicitHeight + Theme.spacingL * 2
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
+                color: Theme.surfaceContainerHigh
-                               Theme.surfaceVariant.b, 0.3)
                 border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                                       Theme.outline.b, 0.2)
-                border.width: 1
+                border.width: 0
 
                 Column {
                     id: themeSection
@@ -137,6 +136,40 @@ Item {
                             color: Theme.surfaceText
                             anchors.verticalCenter: parent.verticalCenter
                         }
+
+                        Item {
+                            width: parent.width - parent.children[0].width - parent.children[1].width - surfaceBaseGroup.width - Theme.spacingM * 3
+                            height: 1
+                        }
+
+                        DankButtonGroup {
+                            id: surfaceBaseGroup
+                            property int currentSurfaceIndex: {
+                                switch (SettingsData.surfaceBase) {
+                                    case "sc": return 0
+                                    case "s": return 1
+                                    default: return 0
+                                }
+                            }
+
+                            model: ["Container", "Surface"]
+                            currentIndex: currentSurfaceIndex
+                            selectionMode: "single"
+                            anchors.verticalCenter: parent.verticalCenter
+
+                            buttonHeight: 20
+                            minButtonWidth: 48
+                            buttonPadding: Theme.spacingS
+                            checkIconSize: Theme.iconSizeSmall - 2
+                            textSize: Theme.fontSizeSmall - 2
+                            spacing: 1
+
+                            onSelectionChanged: (index, selected) => {
+                                if (!selected) return
+                                const surfaceOptions = ["sc", "s"]
+                                SettingsData.setSurfaceBase(surfaceOptions[index])
+                            }
+                        }
                     }
 
                     Column {
@@ -181,6 +214,7 @@ Item {
                         }
                     }
 
+
                     Column {
                         spacing: Theme.spacingM
                         anchors.horizontalCenter: parent.horizontalCenter
@@ -246,7 +280,7 @@ Item {
                                             height: nameText.contentHeight + Theme.spacingXS * 2
                                             color: Theme.surfaceContainer
                                             border.color: Theme.outline
-                                            border.width: 1
+                                            border.width: 0
                                             radius: Theme.cornerRadius
                                             anchors.bottom: parent.top
                                             anchors.bottomMargin: Theme.spacingXS
@@ -311,7 +345,7 @@ Item {
                                             height: nameText2.contentHeight + Theme.spacingXS * 2
                                             color: Theme.surfaceContainer
                                             border.color: Theme.outline
-                                            border.width: 1
+                                            border.width: 0
                                             radius: Theme.cornerRadius
                                             anchors.bottom: parent.top
                                             anchors.bottomMargin: Theme.spacingXS
@@ -382,7 +416,7 @@ Item {
                                             height: nameTextCat.contentHeight + Theme.spacingXS * 2
                                             color: Theme.surfaceContainer
                                             border.color: Theme.outline
-                                            border.width: 1
+                                            border.width: 0
                                             radius: Theme.cornerRadius
                                             anchors.bottom: parent.top
                                             anchors.bottomMargin: Theme.spacingXS
@@ -447,7 +481,7 @@ Item {
                                             height: nameTextCat2.contentHeight + Theme.spacingXS * 2
                                             color: Theme.surfaceContainer
                                             border.color: Theme.outline
-                                            border.width: 1
+                                            border.width: 0
                                             radius: Theme.cornerRadius
                                             anchors.bottom: parent.top
                                             anchors.bottomMargin: Theme.spacingXS
@@ -506,7 +540,7 @@ Item {
                                     radius: Theme.cornerRadius
                                     color: Theme.surfaceVariant
                                     border.color: Theme.outline
-                                    border.width: 1
+                                    border.width: 0
 
                                     CachingImage {
                                         anchors.fill: parent
@@ -693,11 +727,10 @@ Item {
                 width: parent.width
                 height: transparencySection.implicitHeight + Theme.spacingL * 2
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
+                color: Theme.surfaceContainerHigh
-                               Theme.surfaceVariant.b, 0.3)
                 border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                                       Theme.outline.b, 0.2)
-                border.width: 1
+                border.width: 0
 
                 Column {
                     id: transparencySection
@@ -747,6 +780,7 @@ Item {
                             unit: ""
                             showValue: true
                             wheelEnabled: false
+                            thumbOutlineColor: Theme.surfaceContainerHigh
                             onSliderValueChanged: newValue => {
                                                       SettingsData.setTopBarTransparency(
                                                           newValue / 100)
@@ -815,6 +849,7 @@ Item {
                             unit: ""
                             showValue: true
                             wheelEnabled: false
+                            thumbOutlineColor: Theme.surfaceContainerHigh
                             onSliderValueChanged: newValue => {
                                                       SettingsData.setTopBarWidgetTransparency(
                                                           newValue / 100)
@@ -843,6 +878,7 @@ Item {
                             unit: ""
                             showValue: true
                             wheelEnabled: false
+                            thumbOutlineColor: Theme.surfaceContainerHigh
                             onSliderValueChanged: newValue => {
                                                       SettingsData.setPopupTransparency(
                                                           newValue / 100)
@@ -850,6 +886,7 @@ Item {
                         }
                     }
 
+
                     Rectangle {
                         width: parent.width
                         height: 1
@@ -877,6 +914,7 @@ Item {
                             unit: ""
                             showValue: true
                             wheelEnabled: false
+                            thumbOutlineColor: Theme.surfaceContainerHigh
                             onSliderValueChanged: newValue => {
                                                       SettingsData.setCornerRadius(
                                                           newValue)
@@ -895,7 +933,7 @@ Item {
                                Theme.warning.b, 0.12)
                 border.color: Qt.rgba(Theme.warning.r, Theme.warning.g,
                                       Theme.warning.b, 0.3)
-                border.width: 1
+                border.width: 0
 
                 Row {
                     anchors.fill: parent
@@ -925,11 +963,10 @@ Item {
                 width: parent.width
                 height: iconThemeSection.implicitHeight + Theme.spacingL * 2
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
+                color: Theme.surfaceContainerHigh
-                               Theme.surfaceVariant.b, 0.3)
                 border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                                       Theme.outline.b, 0.2)
-                border.width: 1
+                border.width: 0
 
                 Column {
                     id: iconThemeSection
@@ -980,11 +1017,10 @@ Item {
                 width: parent.width
                 height: systemThemingSection.implicitHeight + Theme.spacingL * 2
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
+                color: Theme.surfaceContainerHigh
-                               Theme.surfaceVariant.b, 0.3)
                 border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                                       Theme.outline.b, 0.2)
-                border.width: 1
+                border.width: 0
                 visible: Theme.matugenAvailable
 
                 Column {
@@ -1024,7 +1060,7 @@ Item {
                             radius: Theme.cornerRadius
                             color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12)
                             border.color: Theme.primary
-                            border.width: 1
+                            border.width: 0
 
                             Row {
                                 anchors.centerIn: parent
@@ -1060,7 +1096,7 @@ Item {
                             radius: Theme.cornerRadius
                             color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12)
                             border.color: Theme.primary
-                            border.width: 1
+                            border.width: 0
 
                             Row {
                                 anchors.centerIn: parent

Modules/Settings/TimeTab.qml

@@ -24,11 +24,10 @@ Item {
                 width: parent.width
                 height: timeSection.implicitHeight + Theme.spacingL * 2
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
+                color: Theme.surfaceContainerHigh
-                               Theme.surfaceVariant.b, 0.3)
                 border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                                       Theme.outline.b, 0.2)
-                border.width: 1
+                border.width: 0
 
                 Column {
                     id: timeSection
@@ -89,11 +88,10 @@ Item {
                 width: parent.width
                 height: dateSection.implicitHeight + Theme.spacingL * 2
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
+                color: Theme.surfaceContainerHigh
-                               Theme.surfaceVariant.b, 0.3)
                 border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                                       Theme.outline.b, 0.2)
-                border.width: 1
+                border.width: 0
 
                 Column {
                     id: dateSection
@@ -280,12 +278,10 @@ Item {
                         width: parent.width
                         height: formatHelp.implicitHeight + Theme.spacingM * 2
                         radius: Theme.cornerRadius
-                        color: Qt.rgba(Theme.surfaceVariant.r,
+                        color: Theme.surfaceContainerHigh
-                                       Theme.surfaceVariant.g,
-                                       Theme.surfaceVariant.b, 0.2)
                         border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                                               Theme.outline.b, 0.1)
-                        border.width: 1
+                        border.width: 0
 
                         Column {
                             id: formatHelp

Modules/Settings/TopBarTab.qml

@@ -589,11 +589,10 @@ Item {
                 width: parent.width
                 height: topBarAutoHideSection.implicitHeight + Theme.spacingL * 2
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
+                color: Theme.surfaceContainerHigh
-                               Theme.surfaceVariant.b, 0.3)
                 border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                                       Theme.outline.b, 0.2)
-                border.width: 1
+                border.width: 0
 
                 Column {
                     id: topBarAutoHideSection
@@ -761,11 +760,10 @@ Item {
                 width: parent.width
                 height: topBarSpacingSection.implicitHeight + Theme.spacingL * 2
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
+                color: Theme.surfaceContainerHigh
-                               Theme.surfaceVariant.b, 0.3)
                 border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                                       Theme.outline.b, 0.2)
-                border.width: 1
+                border.width: 0
 
                 Column {
                     id: topBarSpacingSection
@@ -814,7 +812,7 @@ Item {
                             unit: ""
                             showValue: true
                             wheelEnabled: false
-                            thumbOutlineColor: Theme.surfaceContainer
+                            thumbOutlineColor: Theme.surfaceContainerHigh
                             onSliderValueChanged: newValue => {
                                                       SettingsData.setTopBarSpacing(
                                                           newValue)
@@ -842,7 +840,7 @@ Item {
                             unit: ""
                             showValue: true
                             wheelEnabled: false
-                            thumbOutlineColor: Theme.surfaceContainer
+                            thumbOutlineColor: Theme.surfaceContainerHigh
                             onSliderValueChanged: newValue => {
                                                       SettingsData.setTopBarBottomGap(
                                                           newValue)
@@ -870,7 +868,7 @@ Item {
                             unit: ""
                             showValue: true
                             wheelEnabled: false
-                            thumbOutlineColor: Theme.surfaceContainer
+                            thumbOutlineColor: Theme.surfaceContainerHigh
                             onSliderValueChanged: newValue => {
                                                       SettingsData.setTopBarInnerPadding(
                                                           newValue)
@@ -919,11 +917,10 @@ Item {
                 width: parent.width
                 height: widgetManagementSection.implicitHeight + Theme.spacingL * 2
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
+                color: Theme.surfaceContainerHigh
-                               Theme.surfaceVariant.b, 0.3)
                 border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                                       Theme.outline.b, 0.2)
-                border.width: 1
+                border.width: 0
 
                 Column {
                     id: widgetManagementSection
@@ -965,7 +962,7 @@ Item {
                             radius: Theme.cornerRadius
                             color: resetArea.containsMouse ? Theme.surfacePressed : Theme.surfaceVariant
                             Layout.alignment: Qt.AlignVCenter
-                            border.width: 1
+                            border.width: 0
                             border.color: resetArea.containsMouse ? Theme.outline : Qt.rgba(
                                                                         Theme.outline.r,
                                                                         Theme.outline.g,
@@ -1043,12 +1040,10 @@ Item {
                     width: parent.width
                     height: leftSection.implicitHeight + Theme.spacingL * 2
                     radius: Theme.cornerRadius
-                    color: Qt.rgba(Theme.surfaceVariant.r,
+                    color: Theme.surfaceContainerHigh
-                                   Theme.surfaceVariant.g,
-                                   Theme.surfaceVariant.b, 0.3)
                     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                                           Theme.outline.b, 0.2)
-                    border.width: 1
+                    border.width: 0
 
                     WidgetsTabSection {
                         id: leftSection
@@ -1117,12 +1112,10 @@ Item {
                     width: parent.width
                     height: centerSection.implicitHeight + Theme.spacingL * 2
                     radius: Theme.cornerRadius
-                    color: Qt.rgba(Theme.surfaceVariant.r,
+                    color: Theme.surfaceContainerHigh
-                                   Theme.surfaceVariant.g,
-                                   Theme.surfaceVariant.b, 0.3)
                     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                                           Theme.outline.b, 0.2)
-                    border.width: 1
+                    border.width: 0
 
                     WidgetsTabSection {
                         id: centerSection
@@ -1191,12 +1184,10 @@ Item {
                     width: parent.width
                     height: rightSection.implicitHeight + Theme.spacingL * 2
                     radius: Theme.cornerRadius
-                    color: Qt.rgba(Theme.surfaceVariant.r,
+                    color: Theme.surfaceContainerHigh
-                                   Theme.surfaceVariant.g,
-                                   Theme.surfaceVariant.b, 0.3)
                     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                                           Theme.outline.b, 0.2)
-                    border.width: 1
+                    border.width: 0
 
                     WidgetsTabSection {
                         id: rightSection

Modules/Settings/WeatherTab.qml

@@ -24,11 +24,10 @@ Item {
                 width: parent.width
                 height: enableWeatherSection.implicitHeight + Theme.spacingL * 2
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
+                color: Theme.surfaceContainerHigh
-                               Theme.surfaceVariant.b, 0.3)
                 border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                                       Theme.outline.b, 0.2)
-                border.width: 1
+                border.width: 0
 
                 Column {
                     id: enableWeatherSection
@@ -89,11 +88,10 @@ Item {
                 width: parent.width
                 height: temperatureSection.implicitHeight + Theme.spacingL * 2
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
+                color: Theme.surfaceContainerHigh
-                               Theme.surfaceVariant.b, 0.3)
                 border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                                       Theme.outline.b, 0.2)
-                border.width: 1
+                border.width: 0
                 visible: SettingsData.weatherEnabled
                 opacity: visible ? 1 : 0
 
@@ -163,11 +161,10 @@ Item {
                 width: parent.width
                 height: locationSection.implicitHeight + Theme.spacingL * 2
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
+                color: Theme.surfaceContainerHigh
-                               Theme.surfaceVariant.b, 0.3)
                 border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                                       Theme.outline.b, 0.2)
-                border.width: 1
+                border.width: 0
                 visible: SettingsData.weatherEnabled
                 opacity: visible ? 1 : 0
 

Modules/Settings/WidgetSelectionPopup.qml

@@ -103,7 +103,7 @@ Popup {
         color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g,
                        Theme.surfaceContainer.b, 1)
         border.color: Theme.primarySelected
-        border.width: 1
+        border.width: 0
         radius: Theme.cornerRadius
     }
 
@@ -192,7 +192,7 @@ Popup {
                 width: parent.width
                 height: 48
                 cornerRadius: Theme.cornerRadius
-                backgroundColor: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
+                backgroundColor: Theme.surfaceContainerHigh
                 normalBorderColor: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
                 focusedBorderColor: Theme.primary
                 leftIconName: "search"

Modules/Settings/WidgetTweaksTab.qml

@@ -24,11 +24,10 @@ Item {
                 width: parent.width
                 height: launcherButtonSection.implicitHeight + Theme.spacingL * 2
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
+                color: Theme.surfaceContainerHigh
-                               Theme.surfaceVariant.b, 0.3)
                 border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                                       Theme.outline.b, 0.2)
-                border.width: 1
+                border.width: 0
 
                 Column {
                     id: launcherButtonSection
@@ -128,6 +127,7 @@ Item {
                                 unit: "%"
                                 showValue: true
                                 wheelEnabled: false
+                                thumbOutlineColor: Theme.surfaceContainerHigh
                                 onSliderValueChanged: newValue => {
                                                           SettingsData.setOSLogoBrightness(
                                                               newValue / 100)
@@ -156,6 +156,7 @@ Item {
                                 unit: "%"
                                 showValue: true
                                 wheelEnabled: false
+                                thumbOutlineColor: Theme.surfaceContainerHigh
                                 onSliderValueChanged: newValue => {
                                                           SettingsData.setOSLogoContrast(
                                                               newValue / 100)
@@ -177,11 +178,10 @@ Item {
                 width: parent.width
                 height: workspaceSection.implicitHeight + Theme.spacingL * 2
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
+                color: Theme.surfaceContainerHigh
-                               Theme.surfaceVariant.b, 0.3)
                 border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                                       Theme.outline.b, 0.2)
-                border.width: 1
+                border.width: 0
 
                 Column {
                     id: workspaceSection
@@ -301,11 +301,10 @@ Item {
                 width: parent.width
                 height: mediaSection.implicitHeight + Theme.spacingL * 2
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
+                color: Theme.surfaceContainerHigh
-                               Theme.surfaceVariant.b, 0.3)
                 border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                                       Theme.outline.b, 0.2)
-                border.width: 1
+                border.width: 0
 
                 Column {
                     id: mediaSection
@@ -350,11 +349,10 @@ Item {
                 width: parent.width
                 height: runningAppsSection.implicitHeight + Theme.spacingL * 2
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
+                color: Theme.surfaceContainerHigh
-                               Theme.surfaceVariant.b, 0.3)
                 border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                                       Theme.outline.b, 0.2)
-                border.width: 1
+                border.width: 0
 
                 Column {
                     id: runningAppsSection
@@ -400,11 +398,10 @@ Item {
                 width: parent.width
                 height: workspaceIconsSection.implicitHeight + Theme.spacingL * 2
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
+                color: Theme.surfaceContainerHigh
-                               Theme.surfaceVariant.b, 0.3)
                 border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                                       Theme.outline.b, 0.2)
-                border.width: 1
+                border.width: 0
                 visible: SettingsData.hasNamedWorkspaces()
 
                 Column {
@@ -455,7 +452,7 @@ Item {
                             border.color: Qt.rgba(Theme.outline.r,
                                                   Theme.outline.g,
                                                   Theme.outline.b, 0.3)
-                            border.width: 1
+                            border.width: 0
 
                             Row {
                                 id: workspaceIconRow
@@ -522,7 +519,7 @@ Item {
                                     radius: Theme.cornerRadius
                                     color: clearMouseArea.containsMouse ? Theme.errorHover : Theme.surfaceContainer
                                     border.color: clearMouseArea.containsMouse ? Theme.error : Theme.outline
-                                    border.width: 1
+                                    border.width: 0
                                     anchors.verticalCenter: parent.verticalCenter
 
                                     DankIcon {

Modules/Settings/WidgetsTabSection.qml

@@ -82,7 +82,7 @@ Column {
                                    Theme.surfaceContainer.b, 0.8)
                     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                                           Theme.outline.b, 0.2)
-                    border.width: 1
+                    border.width: 0
 
                     DankIcon {
                         name: "drag_indicator"
@@ -259,7 +259,7 @@ Column {
                                 radius: Theme.cornerRadius
                                 color: Theme.surfaceContainer
                                 border.color: Theme.outline
-                                border.width: 1
+                                border.width: 0
                                 visible: warningArea.containsMouse
                                          && warningText !== ""
                                 opacity: visible ? 1 : 0
@@ -382,7 +382,7 @@ Column {
                                 radius: Theme.cornerRadius
                                 color: Theme.surfaceContainer
                                 border.color: Theme.outline
-                                border.width: 1
+                                border.width: 0
                                 visible: false
                                 opacity: visible ? 1 : 0
                                 x: -width - Theme.spacingS
@@ -560,7 +560,7 @@ Column {
                                                  Theme.surfaceVariant.b, 0.3)
         border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                               Theme.outline.b, 0.2)
-        border.width: 1
+        border.width: 0
         anchors.horizontalCenter: parent.horizontalCenter
 
         StyledText {
@@ -618,7 +618,7 @@ Column {
             color: Theme.popupBackground()
             radius: Theme.cornerRadius
             border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
-            border.width: 1
+            border.width: 0
         }
 
         contentItem: Item {

Modules/SystemUpdatePopout.qml

@@ -26,7 +26,7 @@ DankPopout {
     popupWidth: 400
     popupHeight: 500
     triggerX: Screen.width - 600 - Theme.spacingL
-    triggerY: Theme.barHeight - 4 + SettingsData.topBarSpacing + Theme.spacingXS
+    triggerY: Math.max(26 + SettingsData.topBarInnerPadding + 4, Theme.barHeight - 4 - (8 - SettingsData.topBarInnerPadding)) + SettingsData.topBarSpacing + SettingsData.topBarBottomGap - 2 + Theme.popupDistance
     triggerWidth: 55
     positioning: "center"
     screen: triggerScreen
@@ -70,7 +70,7 @@ DankPopout {
                     color: "transparent"
                     radius: parent.radius + Math.abs(modelData.margin)
                     border.color: modelData.color
-                    border.width: 1
+                    border.width: 0
                     z: modelData.z
                 }
             }
@@ -157,7 +157,7 @@ DankPopout {
                     radius: Theme.cornerRadius
                     color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.1)
                     border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.05)
-                    border.width: 1
+                    border.width: 0
 
                     Column {
                         anchors.fill: parent
@@ -208,7 +208,7 @@ DankPopout {
                                 radius: Theme.cornerRadius
                                 color: packageMouseArea.containsMouse ? Theme.primaryHoverLight : "transparent"
                                 border.color: Theme.outlineLight
-                                border.width: 1
+                                border.width: 0
 
                                 Row {
                                     anchors.fill: parent

Modules/TopBar/Battery.qml

@@ -80,7 +80,7 @@ Rectangle {
                 const currentScreen = parentScreen || Screen;
                 const screenX = currentScreen.x || 0;
                 const relativeX = globalPos.x - screenX;
-                popupTarget.setTriggerPosition(relativeX, barHeight + Theme.spacingXS, width, section, currentScreen);
+                popupTarget.setTriggerPosition(relativeX, barHeight + SettingsData.topBarSpacing + SettingsData.topBarBottomGap - 2 + Theme.popupDistance, width, section, currentScreen);
             }
             toggleBatteryPopup();
         }

Modules/TopBar/BatteryPopout.qml

@@ -45,7 +45,7 @@ DankPopout {
     popupWidth: 400
     popupHeight: contentLoader.item ? contentLoader.item.implicitHeight : 400
     triggerX: Screen.width - 380 - Theme.spacingL
-    triggerY: Theme.barHeight - 4 + SettingsData.topBarSpacing + Theme.spacingS
+    triggerY: Theme.barHeight - 4 + SettingsData.topBarSpacing + Theme.popupDistance
     triggerWidth: 70
     positioning: "center"
     screen: triggerScreen
@@ -60,7 +60,7 @@ DankPopout {
             color: Theme.popupBackground()
             radius: Theme.cornerRadius
             border.color: Theme.outlineMedium
-            border.width: 1
+            border.width: 0
             antialiasing: true
             smooth: true
             focus: true
@@ -96,7 +96,7 @@ DankPopout {
                 color: "transparent"
                 radius: parent.radius + 3
                 border.color: Qt.rgba(0, 0, 0, 0.05)
-                border.width: 1
+                border.width: 0
                 z: -3
             }
 
@@ -106,7 +106,7 @@ DankPopout {
                 color: "transparent"
                 radius: parent.radius + 2
                 border.color: Theme.shadowMedium
-                border.width: 1
+                border.width: 0
                 z: -2
             }
 
@@ -114,7 +114,7 @@ DankPopout {
                 anchors.fill: parent
                 color: "transparent"
                 border.color: Theme.outlineStrong
-                border.width: 1
+                border.width: 0
                 radius: parent.radius
                 z: -1
             }
@@ -304,9 +304,8 @@ DankPopout {
                         width: (parent.width - Theme.spacingM) / 2
                         height: 64
                         radius: Theme.cornerRadius
-                        color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08)
+                        color: Theme.surfaceContainerHigh
-                        border.color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2)
+                        border.width: 0
-                        border.width: 1
 
                         Column {
                             anchors.centerIn: parent
@@ -340,9 +339,8 @@ DankPopout {
                         width: (parent.width - Theme.spacingM) / 2
                         height: 64
                         radius: Theme.cornerRadius
-                        color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08)
+                        color: Theme.surfaceContainerHigh
-                        border.color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2)
+                        border.width: 0
-                        border.width: 1
 
                         Column {
                             anchors.centerIn: parent
@@ -390,7 +388,7 @@ DankPopout {
                     radius: Theme.cornerRadius
                     color: Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.12)
                     border.color: Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.3)
-                    border.width: 1
+                    border.width: 0
                     visible: (typeof PowerProfiles !== "undefined") && PowerProfiles.degradationReason !== PerformanceDegradationReason.None
 
                     Column {

Modules/TopBar/Clock.qml

@@ -84,7 +84,7 @@ Rectangle {
                 const currentScreen = parentScreen || Screen
                 const screenX = currentScreen.x || 0
                 const relativeX = globalPos.x - screenX
-                popupTarget.setTriggerPosition(relativeX, barHeight + Theme.spacingXS, width, section, currentScreen)
+                popupTarget.setTriggerPosition(relativeX, barHeight + SettingsData.topBarSpacing + SettingsData.topBarBottomGap - 2 + Theme.popupDistance, width, section, currentScreen)
             }
             root.clockClicked()
         }

Modules/TopBar/ControlCenterButton.qml

@@ -160,7 +160,7 @@ Rectangle {
                 const currentScreen = parentScreen || Screen;
                 const screenX = currentScreen.x || 0;
                 const relativeX = globalPos.x - screenX;
-                popupTarget.setTriggerPosition(relativeX, barHeight + Theme.spacingXS, width, section, currentScreen);
+                popupTarget.setTriggerPosition(relativeX, barHeight + SettingsData.topBarSpacing + SettingsData.topBarBottomGap - 2 + Theme.popupDistance, width, section, currentScreen);
             }
             root.clicked();
         }

Modules/TopBar/CpuMonitor.qml

@@ -47,7 +47,7 @@ Rectangle {
                 const currentScreen = parentScreen || Screen;
                 const screenX = currentScreen.x || 0;
                 const relativeX = globalPos.x - screenX;
-                popupTarget.setTriggerPosition(relativeX, barHeight + Theme.spacingXS, width, section, currentScreen);
+                popupTarget.setTriggerPosition(relativeX, barHeight + SettingsData.topBarSpacing + SettingsData.topBarBottomGap - 2 + Theme.popupDistance, width, section, currentScreen);
             }
             DgopService.setSortBy("cpu");
             if (root.toggleProcessList) {

Modules/TopBar/CpuTemperature.qml

@@ -47,7 +47,7 @@ Rectangle {
                 const currentScreen = parentScreen || Screen;
                 const screenX = currentScreen.x || 0;
                 const relativeX = globalPos.x - screenX;
-                popupTarget.setTriggerPosition(relativeX, barHeight + Theme.spacingXS, width, section, currentScreen);
+                popupTarget.setTriggerPosition(relativeX, barHeight + SettingsData.topBarSpacing + SettingsData.topBarBottomGap - 2 + Theme.popupDistance, width, section, currentScreen);
             }
             DgopService.setSortBy("cpu");
             if (root.toggleProcessList) {

Modules/TopBar/GpuTemperature.qml

@@ -121,7 +121,7 @@ Rectangle {
                 const currentScreen = parentScreen || Screen;
                 const screenX = currentScreen.x || 0;
                 const relativeX = globalPos.x - screenX;
-                popupTarget.setTriggerPosition(relativeX, barHeight + Theme.spacingXS, width, section, currentScreen);
+                popupTarget.setTriggerPosition(relativeX, barHeight + SettingsData.topBarSpacing + SettingsData.topBarBottomGap - 2 + Theme.popupDistance, width, section, currentScreen);
             }
             DgopService.setSortBy("cpu");
             if (root.toggleProcessList) {

Modules/TopBar/LauncherButton.qml

@@ -32,7 +32,7 @@ Item {
                 const currentScreen = parentScreen || Screen;
                 const screenX = currentScreen.x || 0;
                 const relativeX = globalPos.x - screenX;
-                popupTarget.setTriggerPosition(relativeX, barHeight + Theme.spacingXS, width, section, currentScreen);
+                popupTarget.setTriggerPosition(relativeX, barHeight + SettingsData.topBarSpacing + SettingsData.topBarBottomGap - 2 + Theme.popupDistance, width, section, currentScreen);
             }
             root.clicked();
         }

Modules/TopBar/Media.qml

@@ -212,7 +212,7 @@ Rectangle {
                             const currentScreen = root.parentScreen || Screen;
                             const screenX = currentScreen.x || 0;
                             const relativeX = globalPos.x - screenX;
-                            root.popupTarget.setTriggerPosition(relativeX, barHeight + Theme.spacingXS, root.width, root.section, currentScreen);
+                            root.popupTarget.setTriggerPosition(relativeX, barHeight + SettingsData.topBarSpacing + SettingsData.topBarBottomGap - 2 + Theme.popupDistance, root.width, root.section, currentScreen);
                         }
                         root.clicked();
                     }

Modules/TopBar/NotificationCenterButton.qml

@@ -61,7 +61,7 @@ Rectangle {
                 const currentScreen = parentScreen || Screen;
                 const screenX = currentScreen.x || 0;
                 const relativeX = globalPos.x - screenX;
-                popupTarget.setTriggerPosition(relativeX, barHeight + Theme.spacingXS, width, section, currentScreen);
+                popupTarget.setTriggerPosition(relativeX, barHeight + SettingsData.topBarSpacing + SettingsData.topBarBottomGap - 2 + Theme.popupDistance, width, section, currentScreen);
             }
             root.clicked();
         }

Modules/TopBar/RamMonitor.qml

@@ -47,7 +47,7 @@ Rectangle {
                 const currentScreen = parentScreen || Screen;
                 const screenX = currentScreen.x || 0;
                 const relativeX = globalPos.x - screenX;
-                popupTarget.setTriggerPosition(relativeX, barHeight + Theme.spacingXS, width, section, currentScreen);
+                popupTarget.setTriggerPosition(relativeX, barHeight + SettingsData.topBarSpacing + SettingsData.topBarBottomGap - 2 + Theme.popupDistance, width, section, currentScreen);
             }
             DgopService.setSortBy("memory");
             if (root.toggleProcessList) {

Modules/TopBar/SystemUpdate.qml

@@ -95,7 +95,7 @@ Rectangle {
                 const currentScreen = parentScreen || Screen;
                 const screenX = currentScreen.x || 0;
                 const relativeX = globalPos.x - screenX;
-                popupTarget.setTriggerPosition(relativeX, barHeight + Theme.spacingXS, width, section, currentScreen);
+                popupTarget.setTriggerPosition(relativeX, barHeight + SettingsData.topBarSpacing + SettingsData.topBarBottomGap - 2 + Theme.popupDistance, width, section, currentScreen);
             }
             root.clicked();
         }

Modules/TopBar/Vpn.qml

@@ -59,7 +59,7 @@ Rectangle {
                 const currentScreen = parentScreen || Screen;
                 const screenX = currentScreen.x || 0;
                 const relativeX = globalPos.x - screenX;
-                popupTarget.setTriggerPosition(relativeX, barHeight + Theme.spacingXS, width, section, currentScreen);
+                popupTarget.setTriggerPosition(relativeX, barHeight + SettingsData.topBarSpacing + SettingsData.topBarBottomGap - 2 + Theme.popupDistance, width, section, currentScreen);
             }
             root.toggleVpnPopup();
         }

Modules/TopBar/VpnPopout.qml

@@ -27,7 +27,7 @@ DankPopout {
     popupWidth: 360
     popupHeight: Math.min(Screen.height - 100, contentLoader.item ? contentLoader.item.implicitHeight : 260)
     triggerX: Screen.width - 380 - Theme.spacingL
-    triggerY: Theme.barHeight - 4 + SettingsData.topBarSpacing + Theme.spacingS
+    triggerY: Theme.barHeight - 4 + SettingsData.topBarSpacing + Theme.popupDistance
     triggerWidth: 70
     positioning: "center"
     screen: triggerScreen
@@ -42,7 +42,7 @@ DankPopout {
             color: Theme.popupBackground()
             radius: Theme.cornerRadius
             border.color: Theme.outlineMedium
-            border.width: 1
+            border.width: 0
             antialiasing: true
             smooth: true
             focus: true
@@ -60,7 +60,7 @@ DankPopout {
                 color: "transparent"
                 radius: parent.radius + 3
                 border.color: Qt.rgba(0, 0, 0, 0.05)
-                border.width: 1
+                border.width: 0
                 z: -3
             }
 
@@ -70,7 +70,7 @@ DankPopout {
                 color: "transparent"
                 radius: parent.radius + 2
                 border.color: Theme.shadowMedium
-                border.width: 1
+                border.width: 0
                 z: -2
             }
 
@@ -78,7 +78,7 @@ DankPopout {
                 anchors.fill: parent
                 color: "transparent"
                 border.color: Theme.outlineStrong
-                border.width: 1
+                border.width: 0
                 radius: parent.radius
                 z: -1
             }
@@ -142,7 +142,7 @@ DankPopout {
                     radius: Theme.cornerRadius
                     color: Qt.rgba(Theme.surfaceContainerHigh.r, Theme.surfaceContainerHigh.g, Theme.surfaceContainerHigh.b, Theme.getContentBackgroundAlpha() * 0.6)
                     border.color: Theme.outlineStrong
-                    border.width: 1
+                    border.width: 0
                     clip: true
 
                     Column {
@@ -193,7 +193,7 @@ DankPopout {
                                 visible: VpnService.connected
                                 width: 130
                                 Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
-                                border.width: 1
+                                border.width: 0
                                 border.color: Theme.outlineLight
 
                                 Row {

Modules/TopBar/Weather.qml

@@ -73,7 +73,7 @@ Rectangle {
                 const currentScreen = parentScreen || Screen;
                 const screenX = currentScreen.x || 0;
                 const relativeX = globalPos.x - screenX;
-                popupTarget.setTriggerPosition(relativeX, barHeight + Theme.spacingXS, width, section, currentScreen);
+                popupTarget.setTriggerPosition(relativeX, barHeight + SettingsData.topBarSpacing + SettingsData.topBarBottomGap - 2 + Theme.popupDistance, width, section, currentScreen);
             }
             root.clicked();
         }

Widgets/DankToggle.qml

@@ -36,7 +36,7 @@ Item {
         id: background
         anchors.fill: parent
         radius: showText ? Theme.cornerRadius : 0
-        color: showText ? Theme.surfaceHover : "transparent"
+        color: "transparent"
         visible: showText
 
         StateLayer {

docs/CUSTOM_THEMES.md

@@ -28,6 +28,7 @@ These are the essential colors that define your theme's appearance:
     "outline": "#80FF80",
     "surfaceContainer": "#1A2B1A",
     "surfaceContainerHigh": "#264026",
+    "surfaceContainerHighest": "#33553F",
     "error": "#FF0066",
     "warning": "#CCFF00",
     "info": "#00FFCC",
@@ -49,6 +50,7 @@ These are the essential colors that define your theme's appearance:
     "outline": "#4DCC4D",
     "surfaceContainer": "#F5FFF5",
     "surfaceContainerHigh": "#EBFFEB",
+    "surfaceContainerHighest": "#E1FFE1",
     "error": "#B3004D",
     "warning": "#99CC00",
     "info": "#00B899",
@@ -96,6 +98,7 @@ There are example themes you can start from:
 - `surfaceVariantText` - Text color for surfaceVariant backgrounds
 - `surfaceContainer` - Container surface color, slightly different from surface
 - `surfaceContainerHigh` - Elevated container color for layered interfaces
+- `surfaceContainerHighest` - Highest elevation container color for top-level surfaces
 
 **Background Colors**
 - `background` - Main background color for the entire interface

scripts/matugen-worker.sh

@@ -47,21 +47,25 @@ key_of() {
   local mode=$(echo "$json" | sed 's/.*"mode": *"\([^"]*\)".*/\1/')
   local icon=$(echo "$json" | sed 's/.*"iconTheme": *"\([^"]*\)".*/\1/')
   local matugen_type=$(echo "$json" | sed 's/.*"matugenType": *"\([^"]*\)".*/\1/')
+  local surface_base=$(echo "$json" | sed 's/.*"surfaceBase": *"\([^"]*\)".*/\1/')
   [[ -z "$icon" ]] && icon="System Default"
   [[ -z "$matugen_type" ]] && matugen_type="scheme-tonal-spot"
-  echo "${kind}|${value}|${mode}|${icon}|${matugen_type}" | sha256sum | cut -d' ' -f1
+  [[ -z "$surface_base" ]] && surface_base="sc"
+  echo "${kind}|${value}|${mode}|${icon}|${matugen_type}|${surface_base}" | sha256sum | cut -d' ' -f1
 }
 
 build_once() {
   local json="$1"
-  local kind value mode icon matugen_type
+  local kind value mode icon matugen_type surface_base
   kind=$(echo "$json" | sed 's/.*"kind": *"\([^"]*\)".*/\1/')
   value=$(echo "$json" | sed 's/.*"value": *"\([^"]*\)".*/\1/')
   mode=$(echo "$json" | sed 's/.*"mode": *"\([^"]*\)".*/\1/')
   icon=$(echo "$json" | sed 's/.*"iconTheme": *"\([^"]*\)".*/\1/')
   matugen_type=$(echo "$json" | sed 's/.*"matugenType": *"\([^"]*\)".*/\1/')
+  surface_base=$(echo "$json" | sed 's/.*"surfaceBase": *"\([^"]*\)".*/\1/')
   [[ -z "$icon" ]] && icon="System Default"
   [[ -z "$matugen_type" ]] && matugen_type="scheme-tonal-spot"
+  [[ -z "$surface_base" ]] && surface_base="sc"
 
   CONFIG_DIR="${CONFIG_DIR:-$HOME/.config}"
 
@@ -106,6 +110,34 @@ build_once() {
   sed -i "/\[templates\.gtk3\]/,/^$/ s|input_path = './matugen/templates/gtk-colors.css'|input_path = '$COLLOID_TEMPLATE'|" "$TMP_CFG"
   sed -i "s|input_path = './matugen/templates/|input_path = '$SHELL_DIR/matugen/templates/|g" "$TMP_CFG"
 
+  # Handle surface shifting if needed
+  if [[ "$surface_base" == "s" ]]; then
+    TMP_TEMPLATES_DIR="$(mktemp -d)"
+    trap 'rm -rf "$TMP_TEMPLATES_DIR"' RETURN
+
+    # Create shifted versions of templates
+    for template in "$SHELL_DIR/matugen/templates"/*.{css,conf,json,kdl,colors}; do
+      [[ -f "$template" ]] || continue
+      template_name="$(basename "$template")"
+      shifted_template="$TMP_TEMPLATES_DIR/$template_name"
+
+      # Apply surface shifting transformations
+      sed -e 's/{{colors\.surface\.default\.hex}}/{{colors.background.default.hex}}/g' \
+          -e 's/{{colors\.surface_container\.default\.hex}}/{{colors.surface.default.hex}}/g' \
+          -e 's/{{colors\.surface_container_high\.default\.hex}}/{{colors.surface_container.default.hex}}/g' \
+          -e 's/{{colors\.surface_container_highest\.default\.hex}}/{{colors.surface_container_high.default.hex}}/g' \
+          "$template" > "$shifted_template"
+    done
+
+    # Update config to use shifted templates
+    sed -i "s|input_path = '$SHELL_DIR/matugen/templates/|input_path = '$TMP_TEMPLATES_DIR/|g" "$TMP_CFG"
+
+    # Handle the special colloid template path
+    if [[ -f "$TMP_TEMPLATES_DIR/gtk3-colors.css" ]]; then
+      sed -i "/\[templates\.gtk3\]/,/^$/ s|input_path = '$COLLOID_TEMPLATE'|input_path = '$TMP_TEMPLATES_DIR/gtk3-colors.css'|" "$TMP_CFG"
+    fi
+  fi
+
   pushd "$SHELL_DIR" >/dev/null
   MAT_MODE=(-m "$mode")
   MAT_TYPE=(-t "$matugen_type")
@@ -129,21 +161,27 @@ build_once() {
   echo "[config]" > "$TMP_CONTENT_CFG"
   echo "" >> "$TMP_CONTENT_CFG"
   
+  # Use shifted templates for content config if surface_base is "s"
+  CONTENT_TEMPLATES_PATH="$SHELL_DIR/matugen/templates/"
+  if [[ "$surface_base" == "s" && -n "${TMP_TEMPLATES_DIR:-}" ]]; then
+    CONTENT_TEMPLATES_PATH="$TMP_TEMPLATES_DIR/"
+  fi
+
   if command -v ghostty >/dev/null 2>&1; then
     cat "$SHELL_DIR/matugen/configs/ghostty.toml" >> "$TMP_CONTENT_CFG"
-    sed -i "s|input_path = './matugen/templates/|input_path = '$SHELL_DIR/matugen/templates/|g" "$TMP_CONTENT_CFG"
+    sed -i "s|input_path = './matugen/templates/|input_path = '${CONTENT_TEMPLATES_PATH}|g" "$TMP_CONTENT_CFG"
     echo "" >> "$TMP_CONTENT_CFG"
   fi
-  
+
   if command -v kitty >/dev/null 2>&1; then
     cat "$SHELL_DIR/matugen/configs/kitty.toml" >> "$TMP_CONTENT_CFG"
-    sed -i "s|input_path = './matugen/templates/|input_path = '$SHELL_DIR/matugen/templates/|g" "$TMP_CONTENT_CFG"
+    sed -i "s|input_path = './matugen/templates/|input_path = '${CONTENT_TEMPLATES_PATH}|g" "$TMP_CONTENT_CFG"
     echo "" >> "$TMP_CONTENT_CFG"
   fi
-  
+
   if command -v dgop >/dev/null 2>&1; then
     cat "$SHELL_DIR/matugen/configs/dgop.toml" >> "$TMP_CONTENT_CFG"
-    sed -i "s|input_path = './matugen/templates/|input_path = '$SHELL_DIR/matugen/templates/|g" "$TMP_CONTENT_CFG"
+    sed -i "s|input_path = './matugen/templates/|input_path = '${CONTENT_TEMPLATES_PATH}|g" "$TMP_CONTENT_CFG"
     echo "" >> "$TMP_CONTENT_CFG"
   fi