theme: large consolidation of colors into Theme.qml, add

surfaceContainerLow/Lowest

quickshell/Common/StockThemes.js

@@ -17,6 +17,8 @@ const StockThemes = {
       background: "#101418",
       backgroundText: "#e0e2e8",
       outline: "#8c9199",
+      surfaceContainerLowest: "#0c1014",
+      surfaceContainerLow: "#191c20",
       surfaceContainer: "#1d2024",
       surfaceContainerHigh: "#272a2f",
       surfaceContainerHighest: "#32353a",
@@ -35,6 +37,8 @@ const StockThemes = {
       background: "#141218",
       backgroundText: "#e6e0e9",
       outline: "#948f99",
+      surfaceContainerLowest: "#100e14",
+      surfaceContainerLow: "#1d1b20",
       surfaceContainer: "#211f24",
       surfaceContainerHigh: "#2b292f",
       surfaceContainerHighest: "#36343a",
@@ -53,6 +57,8 @@ const StockThemes = {
       background: "#10140f",
       backgroundText: "#e0e4db",
       outline: "#8c9388",
+      surfaceContainerLowest: "#0c100b",
+      surfaceContainerLow: "#191d17",
       surfaceContainer: "#1d211b",
       surfaceContainerHigh: "#272b25",
       surfaceContainerHighest: "#323630",
@@ -71,6 +77,8 @@ const StockThemes = {
       background: "#1a120e",
       backgroundText: "#f0dfd8",
       outline: "#a08d85",
+      surfaceContainerLowest: "#160e0a",
+      surfaceContainerLow: "#231a16",
       surfaceContainer: "#271e1a",
       surfaceContainerHigh: "#322824",
       surfaceContainerHighest: "#3d332e",
@@ -89,6 +97,8 @@ const StockThemes = {
       background: "#1a1110",
       backgroundText: "#f1dedc",
       outline: "#a08c89",
+      surfaceContainerLowest: "#160d0c",
+      surfaceContainerLow: "#231918",
       surfaceContainer: "#271d1c",
       surfaceContainerHigh: "#322826",
       surfaceContainerHighest: "#3d3231",
@@ -107,6 +117,8 @@ const StockThemes = {
       background: "#0e1416",
       backgroundText: "#dee3e5",
       outline: "#899295",
+      surfaceContainerLowest: "#0a1012",
+      surfaceContainerLow: "#171d1e",
       surfaceContainer: "#1b2122",
       surfaceContainerHigh: "#252b2c",
       surfaceContainerHighest: "#303637",
@@ -125,6 +137,8 @@ const StockThemes = {
       background: "#191112",
       backgroundText: "#f0dee0",
       outline: "#9f8c8e",
+      surfaceContainerLowest: "#150d0e",
+      surfaceContainerLow: "#22191a",
       surfaceContainer: "#261d1e",
       surfaceContainerHigh: "#312829",
       surfaceContainerHighest: "#3c3233",
@@ -143,6 +157,8 @@ const StockThemes = {
       background: "#17130b",
       backgroundText: "#ebe1d4",
       outline: "#998f80",
+      surfaceContainerLowest: "#130f07",
+      surfaceContainerLow: "#1f1b13",
       surfaceContainer: "#231f17",
       surfaceContainerHigh: "#2e2921",
       surfaceContainerHighest: "#39342b",
@@ -161,6 +177,8 @@ const StockThemes = {
       background: "#1a1110",
       backgroundText: "#f1dedc",
       outline: "#a08c8a",
+      surfaceContainerLowest: "#160d0c",
+      surfaceContainerLow: "#231918",
       surfaceContainer: "#271d1c",
       surfaceContainerHigh: "#322826",
       surfaceContainerHighest: "#3d3231",
@@ -179,6 +197,8 @@ const StockThemes = {
       background: "#131315",
       backgroundText: "#e4e2e3",
       outline: "#929092",
+      surfaceContainerLowest: "#252525",
+      surfaceContainerLow: "#303030",
       surfaceContainer: "#353535",
       surfaceContainerHigh: "#424242",
       surfaceContainerHighest: "#505050",
@@ -203,6 +223,8 @@ const StockThemes = {
       background: "#f7f9ff",
       backgroundText: "#181c20",
       outline: "#72777f",
+      surfaceContainerLowest: "#f9fbff",
+      surfaceContainerLow: "#eef0f6",
       surfaceContainer: "#eceef4",
       surfaceContainerHigh: "#e6e8ee",
       surfaceContainerHighest: "#e0e2e8",
@@ -221,6 +243,8 @@ const StockThemes = {
       background: "#fef7ff",
       backgroundText: "#1d1b20",
       outline: "#7a757f",
+      surfaceContainerLowest: "#fff9ff",
+      surfaceContainerLow: "#f4eef6",
       surfaceContainer: "#f2ecf4",
       surfaceContainerHigh: "#ece6ee",
       surfaceContainerHighest: "#e6e0e9",
@@ -239,6 +263,8 @@ const StockThemes = {
       background: "#f7fbf1",
       backgroundText: "#191d17",
       outline: "#72796f",
+      surfaceContainerLowest: "#f9fdf3",
+      surfaceContainerLow: "#eef1e8",
       surfaceContainer: "#ecefe6",
       surfaceContainerHigh: "#e6e9e0",
       surfaceContainerHighest: "#e0e4db",
@@ -257,6 +283,8 @@ const StockThemes = {
       background: "#fff8f6",
       backgroundText: "#221a16",
       outline: "#85736c",
+      surfaceContainerLowest: "#fffaf8",
+      surfaceContainerLow: "#feece5",
       surfaceContainer: "#fceae3",
       surfaceContainerHigh: "#f6e5de",
       surfaceContainerHighest: "#f0dfd8",
@@ -275,6 +303,8 @@ const StockThemes = {
       background: "#fff8f7",
       backgroundText: "#231918",
       outline: "#857370",
+      surfaceContainerLowest: "#fffaf9",
+      surfaceContainerLow: "#feece9",
       surfaceContainer: "#fceae7",
       surfaceContainerHigh: "#f7e4e1",
       surfaceContainerHighest: "#f1dedc",
@@ -293,6 +323,8 @@ const StockThemes = {
       background: "#f5fafc",
       backgroundText: "#171d1e",
       outline: "#6f797b",
+      surfaceContainerLowest: "#f7fcfe",
+      surfaceContainerLow: "#ebf1f2",
       surfaceContainer: "#e9eff0",
       surfaceContainerHigh: "#e3e9eb",
       surfaceContainerHighest: "#dee3e5",
@@ -311,6 +343,8 @@ const StockThemes = {
       background: "#fff8f7",
       backgroundText: "#22191a",
       outline: "#847375",
+      surfaceContainerLowest: "#fffaf9",
+      surfaceContainerLow: "#fdeced",
       surfaceContainer: "#fbeaeb",
       surfaceContainerHigh: "#f5e4e5",
       surfaceContainerHighest: "#f0dee0",
@@ -329,6 +363,8 @@ const StockThemes = {
       background: "#fff8f2",
       backgroundText: "#1f1b13",
       outline: "#7f7667",
+      surfaceContainerLowest: "#fffaf4",
+      surfaceContainerLow: "#f8eee1",
       surfaceContainer: "#f6ecdf",
       surfaceContainerHigh: "#f1e7d9",
       surfaceContainerHighest: "#ebe1d4",
@@ -347,6 +383,8 @@ const StockThemes = {
       background: "#fff8f7",
       backgroundText: "#231918",
       outline: "#857371",
+      surfaceContainerLowest: "#fffaf9",
+      surfaceContainerLow: "#feece9",
       surfaceContainer: "#fceae7",
       surfaceContainerHigh: "#f6e4e2",
       surfaceContainerHighest: "#f1dedc",
@@ -365,6 +403,8 @@ const StockThemes = {
       background: "#ffffff",
       backgroundText: "#1a1a1a",
       outline: "#757577",
+      surfaceContainerLowest: "#fafafb",
+      surfaceContainerLow: "#ededef",
       surfaceContainer: "#e8e8ea",
       surfaceContainerHigh: "#dcdcde",
       surfaceContainerHighest: "#d0d0d2",

quickshell/Common/Theme.qml

@@ -463,6 +463,8 @@ Singleton {
                 "background": getMatugenColor("background", "#1a1c1e"),
                 "backgroundText": getMatugenColor("on_background", "#e3e8ef"),
                 "outline": getMatugenColor("outline", "#8e918f"),
+                "surfaceContainerLowest": getMatugenColor("surface_container_lowest", "#0e1013"),
+                "surfaceContainerLow": getMatugenColor("surface_container_low", "#181a1d"),
                 "surfaceContainer": getMatugenColor("surface_container", "#1e2023"),
                 "surfaceContainerHigh": getMatugenColor("surface_container_high", "#292b2f"),
                 "surfaceContainerHighest": getMatugenColor("surface_container_highest", "#343740"),
@@ -535,7 +537,9 @@ Singleton {
     property color background: currentThemeData.background
     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 outlineVariant: currentThemeData.outlineVariant || withAlpha(outline, 0.6)
+    property color surfaceContainerLowest: currentThemeData.surfaceContainerLowest || blend(surfaceContainer, surface, 1.2)
+    property color surfaceContainerLow: currentThemeData.surfaceContainerLow || blend(surface, surfaceContainer, 0.667)
     property color surfaceContainer: currentThemeData.surfaceContainer
     property color surfaceContainerHigh: currentThemeData.surfaceContainerHigh
     property color surfaceContainerHighest: currentThemeData.surfaceContainerHighest || surfaceContainerHigh
@@ -546,9 +550,9 @@ Singleton {
     property color onSurface: surfaceText
     property color onSurfaceVariant: surfaceVariantText
     property color onPrimary: primaryText
-    property color onSurface_12: Qt.rgba(onSurface.r, onSurface.g, onSurface.b, 0.12)
+    property color onSurface_12: withAlpha(onSurface, 0.12)
-    property color onSurface_38: Qt.rgba(onSurface.r, onSurface.g, onSurface.b, 0.38)
+    property color onSurface_38: withAlpha(onSurface, 0.38)
-    property color onSurfaceVariant_30: Qt.rgba(onSurfaceVariant.r, onSurfaceVariant.g, onSurfaceVariant.b, 0.30)
+    property color onSurfaceVariant_30: withAlpha(onSurfaceVariant, 0.30)
 
     property color error: currentThemeData.error || "#F2B8B5"
     property color warning: currentThemeData.warning || "#FF9800"
@@ -557,32 +561,32 @@ Singleton {
     property color tempDanger: "#ff5555"
     property color success: currentThemeData.success || "#4CAF50"
 
-    property color primaryHover: Qt.rgba(primary.r, primary.g, primary.b, 0.12)
+    property color primaryHover: withAlpha(primary, 0.12)
-    property color primaryHoverLight: Qt.rgba(primary.r, primary.g, primary.b, transparentBlurLayers ? 0.12 : 0.08)
+    property color primaryHoverLight: withAlpha(primary, transparentBlurLayers ? 0.12 : 0.08)
-    property color primaryPressed: Qt.rgba(primary.r, primary.g, primary.b, transparentBlurLayers ? 0.24 : 0.16)
+    property color primaryPressed: withAlpha(primary, transparentBlurLayers ? 0.24 : 0.16)
-    property color primarySelected: Qt.rgba(primary.r, primary.g, primary.b, 0.3)
+    property color primarySelected: withAlpha(primary, 0.3)
-    property color primaryBackground: Qt.rgba(primary.r, primary.g, primary.b, 0.04)
+    property color primaryBackground: withAlpha(primary, 0.04)
 
-    property color secondaryHover: Qt.rgba(secondary.r, secondary.g, secondary.b, 0.08)
+    property color secondaryHover: withAlpha(secondary, 0.08)
 
-    property color surfaceHover: Qt.rgba(surfaceVariant.r, surfaceVariant.g, surfaceVariant.b, 0.08)
+    property color surfaceHover: withAlpha(surfaceVariant, 0.08)
-    property color surfacePressed: Qt.rgba(surfaceVariant.r, surfaceVariant.g, surfaceVariant.b, 0.12)
+    property color surfacePressed: withAlpha(surfaceVariant, 0.12)
-    property color surfaceSelected: Qt.rgba(surfaceVariant.r, surfaceVariant.g, surfaceVariant.b, 0.15)
+    property color surfaceSelected: withAlpha(surfaceVariant, 0.15)
-    property color surfaceLight: Qt.rgba(surfaceVariant.r, surfaceVariant.g, surfaceVariant.b, transparentBlurLayers ? 0.3 : 0.1)
+    property color surfaceLight: withAlpha(surfaceVariant, transparentBlurLayers ? 0.3 : 0.1)
-    property color surfaceVariantAlpha: Qt.rgba(surfaceVariant.r, surfaceVariant.g, surfaceVariant.b, 0.2)
+    property color surfaceVariantAlpha: withAlpha(surfaceVariant, 0.2)
 
     readonly property bool blurForegroundLayers: BlurService.enabled && (typeof SettingsData === "undefined" || (SettingsData.blurForegroundLayers ?? true))
     readonly property bool transparentBlurLayers: BlurService.enabled && !blurForegroundLayers
     readonly property color readableSurface: withAlpha(surfaceContainer, popupTransparency)
     readonly property color readableSurfaceHigh: withAlpha(surfaceContainerHigh, popupTransparency)
-    readonly property color floatingSurface: transparentBlurLayers ? "transparent" : readableSurface
+    readonly property color floatingSurface: transparentBlurLayers ? withAlpha(readableSurface, 0) : readableSurface
-    readonly property color floatingSurfaceHigh: transparentBlurLayers ? "transparent" : readableSurfaceHigh
+    readonly property color floatingSurfaceHigh: transparentBlurLayers ? withAlpha(readableSurfaceHigh, 0) : readableSurfaceHigh
     readonly property color nestedSurface: floatingSurfaceHigh
     readonly property real blurLayerOutlineOpacity: Math.max(0, Math.min(1, typeof SettingsData === "undefined" ? 0.12 : (SettingsData.blurLayerOutlineOpacity ?? 0.12)))
     readonly property real layerOutlineOpacity: BlurService.enabled ? blurLayerOutlineOpacity : 0.08
     readonly property int layerOutlineWidth: BlurService.enabled && layerOutlineOpacity > 0 ? 1 : 0
-    property color surfaceTextHover: Qt.rgba(surfaceText.r, surfaceText.g, surfaceText.b, 0.08)
+    property color surfaceTextHover: withAlpha(surfaceText, 0.08)
-    property color surfaceTextAlpha: Qt.rgba(surfaceText.r, surfaceText.g, surfaceText.b, 0.3)
+    property color surfaceTextAlpha: withAlpha(surfaceText, 0.3)
 
     function roleColor(mode) {
         switch (mode) {
@@ -607,6 +611,10 @@ Singleton {
             return surfaceVariant;
         case "s":
             return surface;
+        case "scll":
+            return surfaceContainerLowest;
+        case "scl":
+            return surfaceContainerLow;
         case "sc":
             return surfaceContainer;
         case "sch":
@@ -619,19 +627,23 @@ Singleton {
         case "err":
             return error;
         default:
-            return "transparent";
+            return withAlpha(surface, 0);
         }
     }
-    property color surfaceTextLight: Qt.rgba(surfaceText.r, surfaceText.g, surfaceText.b, 0.06)
+    property color surfaceTextLight: withAlpha(surfaceText, 0.06)
-    property color surfaceTextMedium: Qt.rgba(surfaceText.r, surfaceText.g, surfaceText.b, 0.7)
+    property color surfaceTextSecondary: withAlpha(surfaceText, 0.6)
+    property color surfaceTextMedium: withAlpha(surfaceText, 0.7)
 
-    property color outlineButton: Qt.rgba(outline.r, outline.g, outline.b, 0.5)
+    property color outlineButton: withAlpha(outline, 0.5)
-    property color outlineLight: Qt.rgba(outline.r, outline.g, outline.b, BlurService.enabled ? Math.min(1, layerOutlineOpacity * 0.625) : 0.05)
+    property color outlineLight: withAlpha(outline, BlurService.enabled ? Math.min(1, layerOutlineOpacity * 0.625) : 0.05)
-    property color outlineMedium: Qt.rgba(outline.r, outline.g, outline.b, layerOutlineOpacity)
+    property color outlineMedium: withAlpha(outline, layerOutlineOpacity)
-    property color outlineStrong: Qt.rgba(outline.r, outline.g, outline.b, BlurService.enabled ? Math.min(1, layerOutlineOpacity * 1.5) : 0.12)
+    property color outlineStrong: withAlpha(outline, BlurService.enabled ? Math.min(1, layerOutlineOpacity * 1.5) : 0.12)
+    property color outlineHeavy: withAlpha(outline, 0.2)
 
-    property color errorHover: Qt.rgba(error.r, error.g, error.b, 0.12)
+    property color errorHover: withAlpha(error, 0.12)
-    property color errorPressed: Qt.rgba(error.r, error.g, error.b, 0.16)
+    property color errorPressed: withAlpha(error, 0.16)
+    property color errorSelected: withAlpha(error, 0.3)
+    property color warningHover: withAlpha(warning, 0.12)
 
     readonly property color ccTileActiveBg: {
         switch (SettingsData.controlCenterTileColorMode) {
@@ -681,13 +693,13 @@ Singleton {
     readonly property color ccTileRing: {
         switch (SettingsData.controlCenterTileColorMode) {
         case "primaryContainer":
-            return Qt.rgba(primary.r, primary.g, primary.b, 0.22);
+            return withAlpha(primary, 0.22);
         case "secondary":
-            return Qt.rgba(surfaceText.r, surfaceText.g, surfaceText.b, 0.22);
+            return withAlpha(surfaceText, 0.22);
         case "surfaceVariant":
-            return Qt.rgba(surfaceText.r, surfaceText.g, surfaceText.b, 0.22);
+            return withAlpha(surfaceText, 0.22);
         default:
-            return Qt.rgba(primaryText.r, primaryText.g, primaryText.b, 0.22);
+            return withAlpha(primaryText, 0.22);
         }
     }
 
@@ -720,11 +732,11 @@ Singleton {
     readonly property color buttonHover: {
         switch (SettingsData.buttonColorMode) {
         case "primaryContainer":
-            return Qt.rgba(primary.r, primary.g, primary.b, 0.12);
+            return withAlpha(primary, 0.12);
         case "secondary":
-            return Qt.rgba(surfaceText.r, surfaceText.g, surfaceText.b, 0.12);
+            return withAlpha(surfaceText, 0.12);
         case "surfaceVariant":
-            return Qt.rgba(surfaceText.r, surfaceText.g, surfaceText.b, 0.12);
+            return withAlpha(surfaceText, 0.12);
         default:
             return primaryHover;
         }
@@ -733,11 +745,11 @@ Singleton {
     readonly property color buttonPressed: {
         switch (SettingsData.buttonColorMode) {
         case "primaryContainer":
-            return Qt.rgba(primary.r, primary.g, primary.b, 0.16);
+            return withAlpha(primary, 0.16);
         case "secondary":
-            return Qt.rgba(surfaceText.r, surfaceText.g, surfaceText.b, 0.16);
+            return withAlpha(surfaceText, 0.16);
         case "surfaceVariant":
-            return Qt.rgba(surfaceText.r, surfaceText.g, surfaceText.b, 0.16);
+            return withAlpha(surfaceText, 0.16);
         default:
             return primaryPressed;
         }
@@ -1068,7 +1080,7 @@ Singleton {
     readonly property color connectedSurfaceColor: {
         if (typeof SettingsData === "undefined")
             return withAlpha(surfaceContainer, popupTransparency);
-        return isConnectedEffect ? Qt.rgba(SettingsData.effectiveFrameColor.r, SettingsData.effectiveFrameColor.g, SettingsData.effectiveFrameColor.b, SettingsData.frameOpacity) : withAlpha(surfaceContainer, popupTransparency);
+        return isConnectedEffect ? withAlpha(SettingsData.effectiveFrameColor, SettingsData.frameOpacity) : withAlpha(surfaceContainer, popupTransparency);
     }
     readonly property real connectedSurfaceRadius: isConnectedEffect ? connectedCornerRadius : cornerRadius
     readonly property bool connectedSurfaceBlurEnabled: (typeof SettingsData === "undefined") ? true : (!isConnectedEffect || SettingsData.frameBlurEnabled)
@@ -1468,7 +1480,7 @@ Singleton {
     property string currentThemeName: currentTheme
 
     function panelBackground() {
-        return Qt.rgba(surfaceContainer.r, surfaceContainer.g, surfaceContainer.b, panelTransparency);
+        return withAlpha(surfaceContainer, panelTransparency);
     }
 
     property real notepadTransparency: SettingsData.notepadTransparencyOverride >= 0 ? SettingsData.notepadTransparencyOverride : popupTransparency
@@ -1978,6 +1990,8 @@ Singleton {
     }
 
     function withAlpha(c, a) {
+        if (!c || c.r === undefined)
+            return Qt.rgba(0, 0, 0, 0);
         return Qt.rgba(c.r, c.g, c.b, a);
     }
 
@@ -1988,6 +2002,8 @@ Singleton {
     }
 
     function blendAlpha(c, a) {
+        if (!c || c.r === undefined)
+            return Qt.rgba(0, 0, 0, 0);
         return Qt.rgba(c.r, c.g, c.b, c.a * a);
     }
 

quickshell/Modals/AppPickerModal.qml

@@ -264,7 +264,7 @@ DankModal {
                             iconName: "view_list"
                             iconSize: 20
                             iconColor: root.viewMode === "list" ? Theme.primary : Theme.surfaceText
-                            backgroundColor: root.viewMode === "list" ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+                            backgroundColor: root.viewMode === "list" ? Theme.primaryHover : Theme.withAlpha(Theme.primaryHover, 0)
                             onClicked: {
                                 root.viewMode = "list";
                             }
@@ -276,7 +276,7 @@ DankModal {
                             iconName: "grid_view"
                             iconSize: 20
                             iconColor: root.viewMode === "grid" ? Theme.primary : Theme.surfaceText
-                            backgroundColor: root.viewMode === "grid" ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+                            backgroundColor: root.viewMode === "grid" ? Theme.primaryHover : Theme.withAlpha(Theme.primaryHover, 0)
                             onClicked: {
                                 root.viewMode = "grid";
                             }

quickshell/Modals/BluetoothPairingModal.qml

@@ -256,7 +256,7 @@ DankModal {
                             width: Math.max(70, cancelText.contentWidth + Theme.spacingM * 2)
                             height: 36
                             radius: Theme.cornerRadius
-                            color: cancelArea.containsMouse ? Theme.surfaceTextHover : "transparent"
+                            color: cancelArea.containsMouse ? Theme.surfaceTextHover : Theme.withAlpha(Theme.surfaceTextHover, 0)
                             border.color: Theme.surfaceVariantAlpha
                             border.width: 1
 

quickshell/Modals/Clipboard/ClipboardContent.qml

@@ -147,7 +147,7 @@ Item {
                 anchors.verticalCenter: parent.verticalCenter
                 iconName: "filter_list"
                 iconColor: modal.activeFilter !== "all" ? Theme.primary : Theme.surfaceText
-                backgroundColor: modal.activeFilter !== "all" ? Theme.primarySelected : "transparent"
+                backgroundColor: modal.activeFilter !== "all" ? Theme.primarySelected : Theme.withAlpha(Theme.primarySelected, 0)
                 tooltipText: I18n.tr("Filter by type", "Clipboard history type filter button tooltip")
                 onClicked: filterMenuLoader.item?.openDropdownMenu()
             }

quickshell/Modals/Clipboard/ClipboardContextMenu.qml

@@ -121,12 +121,12 @@ Item {
         const hostX = host?.alignedX;
         const hostY = host?.renderedAlignedY ?? host?.alignedY;
         const globalPos = (!isNaN(hostX) && !isNaN(hostY)) ? ({
-            x: screenX + hostX + x,
+                x: screenX + hostX + x,
-            y: screenY + hostY + y
+                y: screenY + hostY + y
-        }) : (parentHandler ? parentHandler.mapToGlobal(x, y) : ({
+            }) : (parentHandler ? parentHandler.mapToGlobal(x, y) : ({
-            x: screenX + x,
+                    x: screenX + x,
-            y: screenY + y
+                    y: screenY + y
-        }));
+                }));
 
         targetScreen = screenRef;
         anchorX = globalPos.x - screenX + 4;
@@ -258,7 +258,7 @@ Item {
                 height: root.effectiveMenuHeight
                 color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
                 radius: Theme.cornerRadius
-                border.color: BlurService.enabled ? BlurService.borderColor : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+                border.color: BlurService.enabled ? BlurService.borderColor : Theme.outlineMedium
                 border.width: BlurService.enabled ? BlurService.borderWidth : 1
                 opacity: root.openState ? 1 : 0
 
@@ -321,7 +321,7 @@ Item {
                                         anchors.centerIn: parent
                                         width: parent.width
                                         height: 1
-                                        color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+                                        color: Theme.outlineHeavy
                                     }
                                 }
 
@@ -330,7 +330,7 @@ Item {
                                     width: parent.width
                                     height: parent.height
                                     radius: Theme.cornerRadius
-                                    color: itemMouseArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : "transparent"
+                                    color: itemMouseArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(BlurService.hoverColor(Theme.widgetBaseHoverColor), 0)
 
                                     Row {
                                         anchors.left: parent.left

quickshell/Modals/Clipboard/ClipboardEditor.qml

@@ -419,7 +419,7 @@ Item {
                     implicitWidth: saveMenuRow.implicitWidth + Theme.spacingS * 2
                     implicitHeight: saveMenuRow.implicitHeight + Theme.spacingS * 2
                     radius: Theme.cornerRadius
-                    color: saveMenuSaveArea.containsMouse ? Theme.surfaceVariant : "transparent"
+                    color: saveMenuSaveArea.containsMouse ? Theme.surfaceVariant : Theme.withAlpha(Theme.surfaceVariant, 0)
 
                     Row {
                         id: saveMenuRow
@@ -457,7 +457,7 @@ Item {
                     implicitWidth: saveMenuCloseRow.implicitWidth + Theme.spacingS * 2
                     implicitHeight: saveMenuCloseRow.implicitHeight + Theme.spacingS * 2
                     radius: Theme.cornerRadius
-                    color: saveMenuCloseArea.containsMouse ? Theme.surfaceVariant : "transparent"
+                    color: saveMenuCloseArea.containsMouse ? Theme.surfaceVariant : Theme.withAlpha(Theme.surfaceVariant, 0)
 
                     Row {
                         id: saveMenuCloseRow
@@ -495,7 +495,7 @@ Item {
                     implicitWidth: saveMenuPasteRow.implicitWidth + Theme.spacingS * 2
                     implicitHeight: saveMenuPasteRow.implicitHeight + Theme.spacingS * 2
                     radius: Theme.cornerRadius
-                    color: saveMenuPasteArea.containsMouse ? Theme.surfaceVariant : "transparent"
+                    color: saveMenuPasteArea.containsMouse ? Theme.surfaceVariant : Theme.withAlpha(Theme.surfaceVariant, 0)
                     opacity: modal.wtypeAvailable ? 1 : 0.5
 
                     Row {

quickshell/Modals/Clipboard/ClipboardEntry.qml

@@ -110,7 +110,7 @@ Rectangle {
             iconName: "push_pin"
             iconSize: Theme.iconSize - 6
             iconColor: (entry.pinned || hasPinnedDuplicate) ? Theme.primary : Theme.surfaceText
-            backgroundColor: (entry.pinned || hasPinnedDuplicate) ? Theme.primarySelected : "transparent"
+            backgroundColor: (entry.pinned || hasPinnedDuplicate) ? Theme.primarySelected : Theme.withAlpha(Theme.primarySelected, 0)
             visible: root.showPinAction
             onClicked: {
                 if (entry.pinned) {
@@ -228,9 +228,9 @@ Rectangle {
         }
         onClicked: {
             if (SettingsData.clipboardClickToPaste) {
-                pasteRequested()
+                pasteRequested();
             } else {
-                copyRequested()
+                copyRequested();
             }
         }
     }

quickshell/Modals/Clipboard/ClipboardHeader.qml

@@ -38,7 +38,6 @@ Item {
             font.weight: Font.Medium
             anchors.verticalCenter: parent.verticalCenter
         }
-
     }
 
     Row {
@@ -50,7 +49,7 @@ Item {
             iconName: "push_pin"
             iconSize: Theme.iconSize - 4
             iconColor: header.activeTab === "saved" ? Theme.primary : Theme.surfaceText
-            backgroundColor: header.activeTab === "saved" ? Theme.primarySelected : "transparent"
+            backgroundColor: header.activeTab === "saved" ? Theme.primarySelected : Theme.withAlpha(Theme.primarySelected, 0)
             visible: header.pinnedCount > 0 || header.activeTab === "saved"
             tooltipText: header.activeTab === "saved" ? I18n.tr("Recent") : I18n.tr("Saved")
             onClicked: tabChanged(header.activeTab === "saved" ? "recents" : "saved")

quickshell/Modals/Clipboard/ClipboardKeyboardHints.qml

@@ -15,7 +15,7 @@ Rectangle {
 
     height: ClipboardConstants.keyboardHintsHeight
     radius: Theme.cornerRadius
-    color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.95)
+    color: Theme.withAlpha(Theme.surfaceContainer, 0.95)
     border.color: Theme.primary
     border.width: 2
     opacity: visible ? 1 : 0

quickshell/Modals/Common/ConfirmModal.qml

@@ -211,14 +211,14 @@ DankModal {
                         radius: Theme.cornerRadius
                         color: {
                             if (keyboardNavigation && selectedButton === 0) {
-                                return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12);
+                                return Theme.primaryHover;
                             } else if (cancelButton.containsMouse) {
                                 return Theme.surfacePressed;
                             } else {
                                 return Theme.surfaceVariantAlpha;
                             }
                         }
-                        border.color: (keyboardNavigation && selectedButton === 0) ? Theme.primary : "transparent"
+                        border.color: (keyboardNavigation && selectedButton === 0) ? Theme.primary : Theme.withAlpha(Theme.primary, 0)
                         border.width: (keyboardNavigation && selectedButton === 0) ? 1 : 0
 
                         StyledText {
@@ -249,14 +249,14 @@ DankModal {
                         color: {
                             const baseColor = confirmButtonColor;
                             if (keyboardNavigation && selectedButton === 1) {
-                                return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, 1);
+                                return Theme.withAlpha(baseColor, 1);
                             } else if (confirmButton.containsMouse) {
-                                return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, 0.9);
+                                return Theme.withAlpha(baseColor, 0.9);
                             } else {
                                 return baseColor;
                             }
                         }
-                        border.color: (keyboardNavigation && selectedButton === 1) ? "white" : "transparent"
+                        border.color: (keyboardNavigation && selectedButton === 1) ? "white" : Qt.rgba(1, 1, 1, 0)
                         border.width: (keyboardNavigation && selectedButton === 1) ? 1 : 0
 
                         StyledText {

quickshell/Modals/Common/DankModalConnected.qml

@@ -69,7 +69,7 @@ Item {
     property real cornerRadius: Theme.cornerRadius
     readonly property bool connectedSurfaceOverride: frameOwnsConnectedChrome
     readonly property color effectiveBackgroundColor: connectedSurfaceOverride ? Theme.connectedSurfaceColor : backgroundColor
-    readonly property color effectiveBorderColor: connectedSurfaceOverride ? "transparent" : borderColor
+    readonly property color effectiveBorderColor: connectedSurfaceOverride ? Theme.withAlpha(borderColor, 0) : borderColor
     readonly property real effectiveBorderWidth: connectedSurfaceOverride ? 0 : borderWidth
     readonly property real effectiveCornerRadius: connectedSurfaceOverride ? Theme.connectedSurfaceRadius : cornerRadius
     readonly property bool effectiveBlurEnabled: Theme.connectedSurfaceBlurEnabled
@@ -659,8 +659,8 @@ Item {
                             level: root.shadowLevel
                             fallbackOffset: root.shadowFallbackOffset
                             targetRadius: root.effectiveCornerRadius
-                            targetColor: root.frameOwnsConnectedChrome ? "transparent" : root.effectiveBackgroundColor
+                            targetColor: root.frameOwnsConnectedChrome ? Theme.withAlpha(root.effectiveBackgroundColor, 0) : root.effectiveBackgroundColor
-                            borderColor: root.frameOwnsConnectedChrome ? "transparent" : root.effectiveBorderColor
+                            borderColor: root.frameOwnsConnectedChrome ? Theme.withAlpha(root.effectiveBorderColor, 0) : root.effectiveBorderColor
                             borderWidth: root.frameOwnsConnectedChrome ? 0 : root.effectiveBorderWidth
                             shadowEnabled: !root.frameOwnsConnectedChrome && root.enableShadow && Theme.elevationEnabled && SettingsData.modalElevationEnabled && Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1"
                         }
@@ -669,7 +669,7 @@ Item {
                             anchors.fill: parent
                             radius: root.effectiveCornerRadius
                             color: "transparent"
-                            border.color: (root.connectedSurfaceOverride || root.frameOwnsConnectedChrome) ? "transparent" : BlurService.borderColor
+                            border.color: (root.connectedSurfaceOverride || root.frameOwnsConnectedChrome) ? Theme.withAlpha(BlurService.borderColor, 0) : BlurService.borderColor
                             border.width: (root.connectedSurfaceOverride || root.frameOwnsConnectedChrome) ? 0 : BlurService.borderWidth
                             z: 100
                         }

quickshell/Modals/Common/InputModal.qml

@@ -194,7 +194,7 @@ DankModal {
                     height: 40
                     radius: Theme.cornerRadius
                     color: Theme.surfaceVariantAlpha
-                    border.color: textInput.activeFocus ? Theme.primary : "transparent"
+                    border.color: textInput.activeFocus ? Theme.primary : Theme.withAlpha(Theme.primary, 0)
                     border.width: textInput.activeFocus ? 1 : 0
 
                     TextInput {
@@ -216,7 +216,7 @@ DankModal {
                             anchors.fill: parent
                             verticalAlignment: Text.AlignVCenter
                             font.pixelSize: Theme.fontSizeMedium
-                            color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.4)
+                            color: Theme.onSurface_38
                             text: root.inputPlaceholder
                             visible: textInput.text === "" && !textInput.activeFocus
                         }
@@ -238,14 +238,14 @@ DankModal {
                         radius: Theme.cornerRadius
                         color: {
                             if (root.keyboardNavigation && root.selectedButton === 0) {
-                                return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12);
+                                return Theme.primaryHover;
                             } else if (cancelButton.containsMouse) {
                                 return Theme.surfacePressed;
                             } else {
                                 return Theme.surfaceVariantAlpha;
                             }
                         }
-                        border.color: (root.keyboardNavigation && root.selectedButton === 0) ? Theme.primary : "transparent"
+                        border.color: (root.keyboardNavigation && root.selectedButton === 0) ? Theme.primary : Theme.withAlpha(Theme.primary, 0)
                         border.width: (root.keyboardNavigation && root.selectedButton === 0) ? 1 : 0
 
                         StyledText {
@@ -273,14 +273,14 @@ DankModal {
                         color: {
                             const baseColor = root.confirmButtonColor;
                             if (root.keyboardNavigation && root.selectedButton === 1) {
-                                return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, 1);
+                                return Theme.withAlpha(baseColor, 1);
                             } else if (confirmButton.containsMouse) {
-                                return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, 0.9);
+                                return Theme.withAlpha(baseColor, 0.9);
                             } else {
                                 return baseColor;
                             }
                         }
-                        border.color: (root.keyboardNavigation && root.selectedButton === 1) ? "white" : "transparent"
+                        border.color: (root.keyboardNavigation && root.selectedButton === 1) ? "white" : Qt.rgba(1, 1, 1, 0)
                         border.width: (root.keyboardNavigation && root.selectedButton === 1) ? 1 : 0
 
                         StyledText {

quickshell/Modals/DankLauncherV2/ActionPanel.qml

@@ -157,7 +157,7 @@ Rectangle {
                         width: actionContent.implicitWidth + Theme.spacingM * 2
                         height: actionsRow.height
                         radius: Theme.cornerRadius
-                        color: index === root.selectedActionIndex ? Theme.primaryHover : actionArea.containsMouse ? Theme.surfaceHover : "transparent"
+                        color: index === root.selectedActionIndex ? Theme.primaryHover : actionArea.containsMouse ? Theme.surfaceHover : Theme.withAlpha(Theme.surfaceHover, 0)
 
                         Row {
                             id: actionContent

quickshell/Modals/DankLauncherV2/DankLauncherV2ModalConnected.qml

@@ -168,7 +168,7 @@ Item {
         }
     }
     readonly property int borderWidth: SettingsData.dankLauncherV2BorderEnabled ? SettingsData.dankLauncherV2BorderThickness : 0
-    readonly property color effectiveBorderColor: connectedSurfaceOverride ? "transparent" : borderColor
+    readonly property color effectiveBorderColor: connectedSurfaceOverride ? Theme.withAlpha(borderColor, 0) : borderColor
     readonly property int effectiveBorderWidth: connectedSurfaceOverride ? 0 : borderWidth
     readonly property bool effectiveBlurEnabled: Theme.connectedSurfaceBlurEnabled
 
@@ -797,8 +797,8 @@ Item {
                         y: contentWrapper.y
                         level: root.shadowLevel
                         fallbackOffset: root.shadowFallbackOffset
-                        targetColor: root.frameOwnsConnectedChrome ? "transparent" : root.backgroundColor
+                        targetColor: root.frameOwnsConnectedChrome ? Theme.withAlpha(root.backgroundColor, 0) : root.backgroundColor
-                        borderColor: root.frameOwnsConnectedChrome ? "transparent" : root.effectiveBorderColor
+                        borderColor: root.frameOwnsConnectedChrome ? Theme.withAlpha(root.effectiveBorderColor, 0) : root.effectiveBorderColor
                         borderWidth: root.frameOwnsConnectedChrome ? 0 : root.effectiveBorderWidth
                         targetRadius: root.cornerRadius
                         shadowEnabled: !root.frameOwnsConnectedChrome && Theme.elevationEnabled && SettingsData.modalElevationEnabled && Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1"

quickshell/Modals/DankLauncherV2/GridItem.qml

@@ -36,7 +36,7 @@ Rectangle {
     readonly property int computedIconSize: Math.min(48, Math.max(32, width * 0.45))
 
     radius: Theme.cornerRadius
-    color: isSelected ? Theme.primaryPressed : isHovered ? Theme.primaryHoverLight : "transparent"
+    color: isSelected ? Theme.primaryPressed : isHovered ? Theme.primaryHoverLight : Theme.withAlpha(Theme.primaryHoverLight, 0)
 
     DankRipple {
         id: rippleLayer

quickshell/Modals/DankLauncherV2/LauncherContent.qml

@@ -381,7 +381,7 @@ FocusScope {
                         width: buttonContent.width + Theme.spacingM * 2
                         height: 28
                         radius: Theme.cornerRadius
-                        color: controller.searchMode === modelData.id ? Theme.buttonBg : modeArea.containsMouse ? Theme.surfaceContainerHighest : "transparent"
+                        color: controller.searchMode === modelData.id ? Theme.buttonBg : modeArea.containsMouse ? Theme.surfaceContainerHighest : Theme.withAlpha(Theme.surfaceContainerHighest, 0)
 
                         Row {
                             id: buttonContent
@@ -654,7 +654,7 @@ FocusScope {
                                 width: chipContent.width + Theme.spacingM * 2
                                 height: sortDropdown.height
                                 radius: Theme.cornerRadius
-                                color: controller.fileSearchType === modelData.id ? Theme.buttonBg : chipArea.containsMouse ? Theme.surfaceContainerHighest : "transparent"
+                                color: controller.fileSearchType === modelData.id ? Theme.buttonBg : chipArea.containsMouse ? Theme.surfaceContainerHighest : Theme.withAlpha(Theme.surfaceContainerHighest, 0)
 
                                 Row {
                                     id: chipContent
@@ -828,7 +828,7 @@ FocusScope {
                     width: 40
                     height: 40
                     radius: Theme.cornerRadius
-                    color: backButtonArea.containsMouse ? Theme.surfaceHover : "transparent"
+                    color: backButtonArea.containsMouse ? Theme.surfaceHover : Theme.withAlpha(Theme.surfaceHover, 0)
 
                     DankIcon {
                         anchors.centerIn: parent
@@ -1060,7 +1060,7 @@ FocusScope {
                     width: 90
                     height: 40
                     radius: Theme.cornerRadius
-                    color: saveButtonArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.9) : Theme.primary
+                    color: saveButtonArea.containsMouse ? Theme.withAlpha(Theme.primary, 0.9) : Theme.primary
 
                     StyledText {
                         text: I18n.tr("Save")

quickshell/Modals/DankLauncherV2/LauncherContextMenu.qml

@@ -507,7 +507,7 @@ Item {
                 height: root.effectiveMenuHeight
                 color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
                 radius: Theme.cornerRadius
-                border.color: BlurService.enabled ? BlurService.borderColor : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+                border.color: BlurService.enabled ? BlurService.borderColor : Theme.outlineMedium
                 border.width: BlurService.enabled ? BlurService.borderWidth : 1
                 opacity: root.openState ? 1 : 0
 
@@ -585,7 +585,7 @@ Item {
                                         anchors.centerIn: parent
                                         width: parent.width
                                         height: 1
-                                        color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+                                        color: Theme.outlineHeavy
                                     }
                                 }
 
@@ -596,9 +596,9 @@ Item {
                                     radius: Theme.cornerRadius
                                     color: {
                                         if (root.keyboardNavigation && root.selectedMenuIndex === menuItemDelegate.itemIndex) {
-                                            return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2);
+                                            return Theme.primaryPressed;
                                         }
-                                        return itemMouseArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : "transparent";
+                                        return itemMouseArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(BlurService.hoverColor(Theme.widgetBaseHoverColor), 0);
                                     }
 
                                     Row {

quickshell/Modals/DankLauncherV2/ResultItem.qml

@@ -37,7 +37,7 @@ Rectangle {
 
     width: parent?.width ?? 200
     height: 52
-    color: isSelected ? Theme.primaryPressed : isHovered ? Theme.primaryHoverLight : "transparent"
+    color: isSelected ? Theme.primaryPressed : isHovered ? Theme.primaryHoverLight : Theme.withAlpha(Theme.primaryHoverLight, 0)
     radius: Theme.cornerRadius
 
     DankRipple {
@@ -170,7 +170,7 @@ Rectangle {
             height: 28
             radius: 14
             anchors.verticalCenter: parent.verticalCenter
-            color: allModeToggleArea.containsMouse ? Theme.surfaceHover : "transparent"
+            color: allModeToggleArea.containsMouse ? Theme.surfaceHover : Theme.withAlpha(Theme.surfaceHover, 0)
 
             property bool isAllowed: {
                 if (root.item?.type !== "plugin_browse")

quickshell/Modals/DankLauncherV2/SectionHeader.qml

@@ -20,7 +20,7 @@ Rectangle {
 
     width: parent?.width ?? 200
     height: 32
-    color: isSticky ? "transparent" : (hoverArea.containsMouse ? Theme.surfaceHover : "transparent")
+    color: isSticky ? Theme.withAlpha(Theme.surfaceHover, 0) : (hoverArea.containsMouse ? Theme.surfaceHover : Theme.withAlpha(Theme.surfaceHover, 0))
     radius: Theme.cornerRadius
 
     MouseArea {
@@ -81,7 +81,7 @@ Rectangle {
             Rectangle {
                 anchors.fill: parent
                 radius: Theme.cornerRadius
-                color: chipArea.containsMouse || categoryPopup.visible ? Theme.surfaceContainerHigh : "transparent"
+                color: chipArea.containsMouse || categoryPopup.visible ? Theme.surfaceContainerHigh : Theme.withAlpha(Theme.surfaceContainerHigh, 0)
                 border.color: categoryPopup.visible ? Theme.primary : Theme.outlineMedium
                 border.width: categoryPopup.visible ? 2 : 1
             }
@@ -145,7 +145,7 @@ Rectangle {
 
                 contentItem: Rectangle {
                     radius: Theme.cornerRadius
-                    color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 1)
+                    color: Theme.withAlpha(Theme.surfaceContainer, 1)
                     border.color: Theme.primary
                     border.width: 2
 
@@ -179,7 +179,7 @@ Rectangle {
                             height: 32
                             radius: Theme.cornerRadius
                             readonly property bool isCurrent: categoryChip.currentCategory === modelData
-                            color: isCurrent ? Theme.primaryHover : catArea.containsMouse ? Theme.primaryHoverLight : "transparent"
+                            color: isCurrent ? Theme.primaryHover : catArea.containsMouse ? Theme.primaryHoverLight : Theme.withAlpha(Theme.primaryHoverLight, 0)
 
                             Row {
                                 anchors.left: parent.left
@@ -269,7 +269,7 @@ Rectangle {
                     width: 20
                     height: 20
                     radius: 4
-                    color: root.viewMode === modelData.mode ? Theme.primaryHover : modeArea.containsMouse ? Theme.surfaceHover : "transparent"
+                    color: root.viewMode === modelData.mode ? Theme.primaryHover : modeArea.containsMouse ? Theme.surfaceHover : Theme.withAlpha(Theme.surfaceHover, 0)
 
                     DankIcon {
                         anchors.centerIn: parent

quickshell/Modals/DankLauncherV2/SpotlightResultRow.qml

@@ -76,7 +76,7 @@ Rectangle {
     width: parent?.width ?? 200
     height: 64
     radius: Theme.cornerRadius
-    color: root.isSelected ? Theme.primaryPressed : root.isHovered ? Theme.primaryHoverLight : "transparent"
+    color: root.isSelected ? Theme.primaryPressed : root.isHovered ? Theme.primaryHoverLight : Theme.withAlpha(Theme.primaryHoverLight, 0)
 
     Behavior on color {
         ColorAnimation {
@@ -225,7 +225,7 @@ Rectangle {
             height: 28
             radius: height / 2
             anchors.verticalCenter: parent.verticalCenter
-            color: quickToggleArea.containsMouse ? Theme.surfaceHover : "transparent"
+            color: quickToggleArea.containsMouse ? Theme.surfaceHover : Theme.withAlpha(Theme.surfaceHover, 0)
 
             readonly property bool isAllowed: {
                 if (root.item?.type !== "plugin_browse")

quickshell/Modals/DankLauncherV2/TileItem.qml

@@ -19,7 +19,7 @@ Rectangle {
     signal rightClicked(real mouseX, real mouseY)
 
     radius: Theme.cornerRadius
-    color: isSelected ? Theme.primaryPressed : isHovered ? Theme.primaryPressed : "transparent"
+    color: isSelected ? Theme.primaryPressed : isHovered ? Theme.primaryPressed : Theme.withAlpha(Theme.primaryPressed, 0)
     border.width: isSelected ? 2 : 0
     border.color: Theme.primary
 
@@ -93,7 +93,7 @@ Rectangle {
 
                 Rectangle {
                     anchors.fill: parent
-                    color: root.isHovered ? Theme.withAlpha(Theme.surfaceVariant, 0.2) : "transparent"
+                    color: root.isHovered ? Theme.withAlpha(Theme.surfaceVariant, 0.2) : Theme.withAlpha(Theme.surfaceVariant, 0)
                 }
             }
 
@@ -155,7 +155,7 @@ Rectangle {
                 width: root.hasScreencopy ? 28 : 40
                 height: root.hasScreencopy ? 28 : 16
                 radius: root.hasScreencopy ? 14 : 4
-                color: root.hasScreencopy ? Theme.surfaceContainer : "transparent"
+                color: root.hasScreencopy ? Theme.surfaceContainer : Theme.withAlpha(Theme.surfaceContainer, 0)
                 visible: attributionImage.status === Image.Ready
                 opacity: 0.95
 

quickshell/Modals/DisplayConfirmationModal.qml

@@ -129,7 +129,7 @@ DankModal {
                             width: Math.max(70, revertText.contentWidth + Theme.spacingM * 2)
                             height: 36
                             radius: Theme.cornerRadius
-                            color: revertArea.containsMouse ? Theme.surfaceTextHover : "transparent"
+                            color: revertArea.containsMouse ? Theme.surfaceTextHover : Theme.withAlpha(Theme.surfaceTextHover, 0)
                             border.color: Theme.surfaceVariantAlpha
                             border.width: 1
 

quickshell/Modals/FileBrowser/FileBrowserGridDelegate.qml

@@ -136,9 +136,9 @@ StyledRect {
         if (keyboardNavigationActive && delegateRoot.index === selectedIndex)
             return Theme.surfacePressed;
 
-        return mouseArea.containsMouse ? Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency) : "transparent";
+        return mouseArea.containsMouse ? Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency) : Theme.withAlpha(Theme.surfaceContainerHigh, 0);
     }
-    border.color: keyboardNavigationActive && delegateRoot.index === selectedIndex ? Theme.primary : "transparent"
+    border.color: keyboardNavigationActive && delegateRoot.index === selectedIndex ? Theme.primary : Theme.withAlpha(Theme.primary, 0)
     border.width: (keyboardNavigationActive && delegateRoot.index === selectedIndex) ? 2 : 0
 
     Component.onCompleted: {

quickshell/Modals/FileBrowser/FileBrowserItemContextMenu.qml

@@ -89,7 +89,7 @@ Popup {
     contentItem: Rectangle {
         color: Theme.floatingSurface
         radius: Theme.cornerRadius
-        border.color: BlurService.enabled ? BlurService.borderColor : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+        border.color: BlurService.enabled ? BlurService.borderColor : Theme.outlineMedium
         border.width: BlurService.enabled ? BlurService.borderWidth : 1
 
         Column {
@@ -110,7 +110,7 @@ Popup {
                         if (!modelData.enabled || !area.containsMouse)
                             return "transparent";
                         if (modelData.dangerous)
-                            return Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.12);
+                            return Theme.errorHover;
                         return BlurService.hoverColor(Theme.widgetBaseHoverColor);
                     }
 

quickshell/Modals/FileBrowser/FileBrowserListDelegate.qml

@@ -139,9 +139,9 @@ StyledRect {
     color: {
         if (keyboardNavigationActive && listDelegateRoot.index === selectedIndex)
             return Theme.surfacePressed;
-        return listMouseArea.containsMouse ? Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency) : "transparent";
+        return listMouseArea.containsMouse ? Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency) : Theme.withAlpha(Theme.surfaceContainerHigh, 0);
     }
-    border.color: keyboardNavigationActive && listDelegateRoot.index === selectedIndex ? Theme.primary : "transparent"
+    border.color: keyboardNavigationActive && listDelegateRoot.index === selectedIndex ? Theme.primary : Theme.withAlpha(Theme.primary, 0)
     border.width: (keyboardNavigationActive && listDelegateRoot.index === selectedIndex) ? 2 : 0
 
     Component.onCompleted: {

quickshell/Modals/FileBrowser/FileBrowserNavigation.qml

@@ -26,7 +26,7 @@ Row {
         width: 32
         height: 32
         radius: Theme.cornerRadius
-        color: (backButtonMouseArea.containsMouse || (backButtonFocused && keyboardNavigationActive)) && currentPath !== homeDir ? Theme.surfaceVariant : "transparent"
+        color: (backButtonMouseArea.containsMouse || (backButtonFocused && keyboardNavigationActive)) && currentPath !== homeDir ? Theme.surfaceVariant : Theme.withAlpha(Theme.surfaceVariant, 0)
         opacity: currentPath !== homeDir ? 1 : 0
         anchors.verticalCenter: parent.verticalCenter
 
@@ -56,8 +56,8 @@ Row {
         StyledRect {
             anchors.fill: parent
             radius: Theme.cornerRadius
-            color: pathEditMode ? Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency) : "transparent"
+            color: pathEditMode ? Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency) : Theme.withAlpha(Theme.surfaceContainer, 0)
-            border.color: pathEditMode ? Theme.primary : "transparent"
+            border.color: pathEditMode ? Theme.primary : Theme.withAlpha(Theme.primary, 0)
             border.width: pathEditMode ? 1 : 0
             visible: !pathEditMode
 

quickshell/Modals/FileBrowser/FileBrowserSidebar.qml

@@ -34,7 +34,7 @@ StyledRect {
                 width: parent?.width ?? 0
                 height: 38
                 radius: Theme.cornerRadius
-                color: quickAccessMouseArea.containsMouse ? Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency) : (currentPath === modelData?.path ? Theme.surfacePressed : "transparent")
+                color: quickAccessMouseArea.containsMouse ? Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency) : (currentPath === modelData?.path ? Theme.surfacePressed : Theme.withAlpha(Theme.surfacePressed, 0))
 
                 Row {
                     anchors.fill: parent

quickshell/Modals/FileBrowser/FileBrowserSortMenu.qml

@@ -60,7 +60,7 @@ StyledRect {
                 width: sortColumn?.width ?? 0
                 height: 32
                 radius: Theme.cornerRadius
-                color: sortMouseArea.containsMouse ? Theme.surfaceVariant : (sortBy === modelData?.value ? Theme.surfacePressed : "transparent")
+                color: sortMouseArea.containsMouse ? Theme.surfaceVariant : (sortBy === modelData?.value ? Theme.surfacePressed : Theme.withAlpha(Theme.surfacePressed, 0))
 
                 Row {
                     anchors.fill: parent
@@ -114,7 +114,7 @@ StyledRect {
             width: sortColumn?.width ?? 0
             height: 32
             radius: Theme.cornerRadius
-            color: ascMouseArea.containsMouse ? Theme.surfaceVariant : (sortAscending ? Theme.surfacePressed : "transparent")
+            color: ascMouseArea.containsMouse ? Theme.surfaceVariant : (sortAscending ? Theme.surfacePressed : Theme.withAlpha(Theme.surfacePressed, 0))
 
             Row {
                 anchors.fill: parent
@@ -152,7 +152,7 @@ StyledRect {
             width: sortColumn?.width ?? 0
             height: 32
             radius: Theme.cornerRadius
-            color: descMouseArea.containsMouse ? Theme.surfaceVariant : (!sortAscending ? Theme.surfacePressed : "transparent")
+            color: descMouseArea.containsMouse ? Theme.surfaceVariant : (!sortAscending ? Theme.surfacePressed : Theme.withAlpha(Theme.surfacePressed, 0))
 
             Row {
                 anchors.fill: parent

quickshell/Modals/FileBrowser/FileInfo.qml

@@ -13,7 +13,7 @@ Rectangle {
 
     height: 200
     radius: Theme.cornerRadius
-    color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.95)
+    color: Theme.withAlpha(Theme.surfaceContainer, 0.95)
     border.color: Theme.secondary
     border.width: 2
     opacity: showFileInfo ? 1 : 0

quickshell/Modals/FileBrowser/KeyboardHints.qml

@@ -9,7 +9,7 @@ Rectangle {
 
     height: 80
     radius: Theme.cornerRadius
-    color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.95)
+    color: Theme.withAlpha(Theme.surfaceContainer, 0.95)
     border.color: Theme.primary
     border.width: 2
     opacity: showHints ? 1 : 0

quickshell/Modals/Greeter/GreeterStatusCard.qml

@@ -18,7 +18,7 @@ Rectangle {
     radius: Theme.cornerRadius
     color: bgColor
     border.width: selected ? 2 : 0
-    border.color: selected ? iconColor : "transparent"
+    border.color: selected ? iconColor : Theme.withAlpha(iconColor, 0)
     scale: mouseArea.pressed ? 0.97 : 1
 
     Behavior on scale {

quickshell/Modals/MuxModal.qml

@@ -414,7 +414,7 @@ DankModal {
                                 width: parent.width
                                 height: 64
                                 radius: Theme.cornerRadius
-                                color: muxModal.selectedIndex === index ? Theme.primaryContainer : (sessionMouse.containsMouse ? Theme.surfaceContainerHigh : "transparent")
+                                color: muxModal.selectedIndex === index ? Theme.primaryContainer : (sessionMouse.containsMouse ? Theme.surfaceContainerHigh : Theme.withAlpha(Theme.surfaceContainerHigh, 0))
 
                                 MouseArea {
                                     id: sessionMouse
@@ -478,7 +478,7 @@ DankModal {
                                         Layout.preferredHeight: 36
                                         radius: 18
                                         visible: MuxService.supportsRename
-                                        color: renameMouse.containsMouse ? Theme.surfaceContainerHighest : "transparent"
+                                        color: renameMouse.containsMouse ? Theme.surfaceContainerHighest : Theme.withAlpha(Theme.surfaceContainerHighest, 0)
 
                                         DankIcon {
                                             anchors.centerIn: parent
@@ -501,7 +501,7 @@ DankModal {
                                         Layout.preferredWidth: 36
                                         Layout.preferredHeight: 36
                                         radius: 18
-                                        color: deleteMouse.containsMouse ? Theme.errorContainer : "transparent"
+                                        color: deleteMouse.containsMouse ? Theme.errorContainer : Theme.withAlpha(Theme.errorContainer, 0)
 
                                         DankIcon {
                                             anchors.centerIn: parent

quickshell/Modals/PolkitAuthContent.qml

@@ -314,7 +314,7 @@ FocusScope {
                     width: Math.max(70, cancelText.contentWidth + Theme.spacingM * 2)
                     height: 36
                     radius: Theme.cornerRadius
-                    color: cancelArea.containsMouse ? Theme.surfaceTextHover : "transparent"
+                    color: cancelArea.containsMouse ? Theme.surfaceTextHover : Theme.withAlpha(Theme.surfaceTextHover, 0)
                     border.color: Theme.surfaceVariantAlpha
                     border.width: 1
                     enabled: !root.isLoading

quickshell/Modals/PowerMenuModal.qml

@@ -551,12 +551,12 @@ DankModal {
                         radius: Theme.cornerRadius
                         color: {
                             if (isSelected)
-                                return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12);
+                                return Theme.primaryHover;
                             if (mouseArea.containsMouse)
-                                return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08);
+                                return Theme.primaryHoverLight;
-                            return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.08);
+                            return Theme.surfaceHover;
                         }
-                        border.color: isSelected ? Theme.primary : "transparent"
+                        border.color: isSelected ? Theme.primary : Theme.withAlpha(Theme.primary, 0)
                         border.width: isSelected ? 2 : 0
 
                         Rectangle {
@@ -585,10 +585,10 @@ DankModal {
                                 width: parent.width * root.holdProgress
                                 color: {
                                     if (gridButtonRect.modelData === "poweroff")
-                                        return Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.3);
+                                        return Theme.errorSelected;
                                     if (gridButtonRect.modelData === "reboot")
-                                        return Qt.rgba(Theme.warning.r, Theme.warning.g, Theme.warning.b, 0.3);
+                                        return Theme.withAlpha(Theme.warning, 0.3);
-                                    return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3);
+                                    return Theme.primarySelected;
                                 }
                             }
                         }
@@ -626,13 +626,13 @@ DankModal {
                                 width: 20
                                 height: 16
                                 radius: 4
-                                color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.1)
+                                color: Theme.onSurface_12
                                 anchors.horizontalCenter: parent.horizontalCenter
 
                                 StyledText {
                                     text: gridButtonRect.actionData.key
                                     font.pixelSize: Theme.fontSizeSmall - 1
-                                    color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6)
+                                    color: Theme.surfaceTextSecondary
                                     font.weight: Font.Medium
                                     anchors.centerIn: parent
                                 }
@@ -688,12 +688,12 @@ DankModal {
                         radius: Theme.cornerRadius
                         color: {
                             if (isSelected)
-                                return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12);
+                                return Theme.primaryHover;
                             if (listMouseArea.containsMouse)
-                                return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08);
+                                return Theme.primaryHoverLight;
-                            return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.08);
+                            return Theme.surfaceHover;
                         }
-                        border.color: isSelected ? Theme.primary : "transparent"
+                        border.color: isSelected ? Theme.primary : Theme.withAlpha(Theme.primary, 0)
                         border.width: isSelected ? 2 : 0
 
                         Rectangle {
@@ -722,10 +722,10 @@ DankModal {
                                 width: parent.width * root.holdProgress
                                 color: {
                                     if (listButtonRect.modelData === "poweroff")
-                                        return Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.3);
+                                        return Theme.errorSelected;
                                     if (listButtonRect.modelData === "reboot")
-                                        return Qt.rgba(Theme.warning.r, Theme.warning.g, Theme.warning.b, 0.3);
+                                        return Theme.withAlpha(Theme.warning, 0.3);
-                                    return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3);
+                                    return Theme.primarySelected;
                                 }
                             }
                         }
@@ -770,7 +770,7 @@ DankModal {
                             width: 28
                             height: 20
                             radius: 4
-                            color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.1)
+                            color: Theme.onSurface_12
                             anchors {
                                 right: parent.right
                                 rightMargin: Theme.spacingM
@@ -780,7 +780,7 @@ DankModal {
                             StyledText {
                                 text: listButtonRect.actionData.key
                                 font.pixelSize: Theme.fontSizeSmall
-                                color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6)
+                                color: Theme.surfaceTextSecondary
                                 font.weight: Font.Medium
                                 anchors.centerIn: parent
                             }
@@ -820,7 +820,7 @@ DankModal {
                 DankIcon {
                     name: root.showHoldHint ? "warning" : "touch_app"
                     size: Theme.fontSizeSmall
-                    color: root.showHoldHint ? Theme.warning : Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6)
+                    color: root.showHoldHint ? Theme.warning : Theme.surfaceTextSecondary
                     anchors.verticalCenter: parent.verticalCenter
                 }
 
@@ -840,7 +840,7 @@ DankModal {
                         return I18n.tr("Hold to confirm (%1s)").arg(SettingsData.powerActionHoldDuration);
                     }
                     font.pixelSize: Theme.fontSizeSmall
-                    color: root.showHoldHint ? Theme.warning : Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6)
+                    color: root.showHoldHint ? Theme.warning : Theme.surfaceTextSecondary
                     anchors.verticalCenter: parent.verticalCenter
                 }
             }

quickshell/Modals/PowerProfileModal.qml

@@ -174,15 +174,15 @@ DankModal {
 
                             color: {
                                 if (isActive)
-                                    return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.16);
+                                    return Theme.primaryPressed;
                                 if (isSelected)
-                                    return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08);
+                                    return Theme.primaryHoverLight;
                                 if (mouseArea.containsMouse)
-                                    return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.12);
+                                    return Theme.surfacePressed;
-                                return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.06);
+                                return Theme.surfaceHover;
                             }
 
-                            border.color: isActive ? Theme.primary : (isSelected ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.5) : "transparent")
+                            border.color: isActive ? Theme.primary : (isSelected ? Theme.withAlpha(Theme.primary, 0.5) : Theme.withAlpha(Theme.primary, 0))
                             border.width: (isActive || isSelected) ? 2 : 0
 
                             // Shortcut Key Badge on Top-Right Corner
@@ -193,8 +193,8 @@ DankModal {
                                 width: 20
                                 height: 20
                                 radius: 4
-                                color: isActive ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2) : Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.08)
+                                color: isActive ? Theme.primaryPressed : Theme.surfaceTextHover
-                                border.color: isActive ? Theme.primary : "transparent"
+                                border.color: isActive ? Theme.primary : Theme.withAlpha(Theme.primary, 0)
                                 border.width: isActive ? 1 : 0
 
                                 StyledText {

quickshell/Modals/ProcessListModal.qml

@@ -195,7 +195,7 @@ FloatingWindow {
             width: 400
             height: 200
             radius: Theme.cornerRadius
-            color: Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.1)
+            color: Theme.errorHover
             border.color: Theme.error
             border.width: 2
             visible: !DgopService.dgopAvailable
@@ -326,8 +326,8 @@ FloatingWindow {
                             width: tabRowContent.implicitWidth + Theme.spacingM * 2
                             height: Math.round(Theme.fontSizeMedium * 3.1)
                             radius: Theme.cornerRadius
-                            color: currentTab === index ? Theme.primaryPressed : (tabMouseArea.containsMouse ? Theme.primaryHoverLight : "transparent")
+                            color: currentTab === index ? Theme.primaryPressed : (tabMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.withAlpha(Theme.primaryHoverLight, 0))
-                            border.color: currentTab === index ? Theme.primary : "transparent"
+                            border.color: currentTab === index ? Theme.primary : Theme.withAlpha(Theme.primary, 0)
                             border.width: currentTab === index ? 1 : 0
 
                             Row {

quickshell/Modals/WifiPasswordModal.qml

@@ -626,7 +626,7 @@ DankModal {
                     width: 20
                     height: 20
                     radius: 4
-                    color: checked ? Theme.primary : "transparent"
+                    color: checked ? Theme.primary : Theme.withAlpha(Theme.primary, 0)
                     border.color: checked ? Theme.primary : Theme.outlineButton
                     border.width: 2
 
@@ -667,7 +667,7 @@ DankModal {
                         width: Math.max(70, cancelText.contentWidth + Theme.spacingM * 2)
                         height: 36
                         radius: Theme.cornerRadius
-                        color: cancelArea.containsMouse ? Theme.surfaceTextHover : "transparent"
+                        color: cancelArea.containsMouse ? Theme.surfaceTextHover : Theme.withAlpha(Theme.surfaceTextHover, 0)
                         border.color: Theme.surfaceVariantAlpha
                         border.width: 1
 

quickshell/Modals/WindowRuleModal.qml

@@ -504,7 +504,7 @@ FloatingWindow {
             width: 20
             height: 20
             radius: 4
-            color: parent.indeterminate ? Theme.surfaceVariant : (checked ? Theme.primary : "transparent")
+            color: parent.indeterminate ? Theme.surfaceVariant : (checked ? Theme.primary : Theme.withAlpha(Theme.primary, 0))
             border.color: parent.indeterminate ? Theme.outlineButton : (checked ? Theme.primary : Theme.outlineButton)
             border.width: 2
             anchors.verticalCenter: parent.verticalCenter
@@ -1841,7 +1841,7 @@ FloatingWindow {
                     width: Math.max(70, cancelText.contentWidth + Theme.spacingM * 2)
                     height: 36
                     radius: Theme.cornerRadius
-                    color: cancelArea.containsMouse ? Theme.surfaceTextHover : "transparent"
+                    color: cancelArea.containsMouse ? Theme.surfaceTextHover : Theme.withAlpha(Theme.surfaceTextHover, 0)
                     border.color: Theme.surfaceVariantAlpha
                     border.width: 1
 

quickshell/Modals/WorkspaceRenameModal.qml

@@ -151,7 +151,7 @@ FloatingWindow {
                         width: Math.max(70, cancelText.contentWidth + Theme.spacingM * 2)
                         height: 36
                         radius: Theme.cornerRadius
-                        color: cancelArea.containsMouse ? Theme.surfaceTextHover : "transparent"
+                        color: cancelArea.containsMouse ? Theme.surfaceTextHover : Theme.withAlpha(Theme.surfaceTextHover, 0)
                         border.color: Theme.surfaceVariantAlpha
                         border.width: 1
 

quickshell/Modules/BuiltinDesktopPlugins/SystemMonitorWidget.qml

@@ -405,8 +405,8 @@ Item {
 
                                 var c = root.accentColor;
                                 var grad = ctx.createLinearGradient(0, 0, 0, height);
-                                grad.addColorStop(0, Qt.rgba(c.r, c.g, c.b, 0.3));
+                                grad.addColorStop(0, Theme.withAlpha(c, 0.3));
-                                grad.addColorStop(1, Qt.rgba(c.r, c.g, c.b, 0.05));
+                                grad.addColorStop(1, Theme.withAlpha(c, 0.05));
 
                                 ctx.fillStyle = grad;
                                 ctx.beginPath();
@@ -420,7 +420,7 @@ Item {
                                 ctx.closePath();
                                 ctx.fill();
 
-                                ctx.strokeStyle = Qt.rgba(c.r, c.g, c.b, 0.6);
+                                ctx.strokeStyle = Theme.withAlpha(c, 0.6);
                                 ctx.lineWidth = 1.5;
                                 ctx.beginPath();
                                 for (var j = 0; j < hist.length; j++) {
@@ -431,7 +431,7 @@ Item {
                                 ctx.stroke();
 
                                 if (hist2 && hist2.length >= 2) {
-                                    ctx.strokeStyle = Qt.rgba(c.r, c.g, c.b, 0.3);
+                                    ctx.strokeStyle = Theme.withAlpha(c, 0.3);
                                     ctx.lineWidth = 1;
                                     ctx.beginPath();
                                     for (var m = 0; m < hist2.length; m++) {

quickshell/Modules/ControlCenter/BuiltinPlugins/CupsWidget.qml

@@ -206,7 +206,7 @@ PluginComponent {
                 Rectangle {
                     height: 1
                     width: parent.width
-                    color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+                    color: Theme.outlineStrong
                 }
 
                 DankFlickable {

quickshell/Modules/ControlCenter/BuiltinPlugins/DisplayProfilesWidget.qml

@@ -96,7 +96,7 @@ PluginComponent {
                             width: autoLabel.implicitWidth + Theme.spacingL * 2
                             height: 28
                             radius: 14
-                            color: root.autoMode ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.16) : (autoMouseArea.containsMouse ? Theme.surfaceLight : "transparent")
+                            color: root.autoMode ? Theme.primaryPressed : (autoMouseArea.containsMouse ? Theme.surfaceLight : Theme.withAlpha(Theme.surfaceLight, 0))
                             border.color: root.autoMode ? Theme.primary : Theme.outlineMedium
                             border.width: root.autoMode ? 1 : Theme.layerOutlineWidth
 
@@ -170,7 +170,7 @@ PluginComponent {
                             radius: Theme.cornerRadius
                             color: {
                                 if (isActive)
-                                    return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12);
+                                    return Theme.primaryHover;
                                 if (profileMouseArea.containsMouse)
                                     return Theme.surfaceLight;
                                 return Theme.floatingSurface;

quickshell/Modules/ControlCenter/BuiltinPlugins/TailscaleWidget.qml

@@ -333,7 +333,7 @@ PluginComponent {
                                     width: peerListColumn.width
                                     height: peerCardColumn.implicitHeight + Theme.spacingS * 2
                                     radius: Theme.cornerRadius
-                                    color: modelData.hostname === (TailscaleService.selfNode ? TailscaleService.selfNode.hostname : "") ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Theme.surfaceContainerHighest
+                                    color: modelData.hostname === (TailscaleService.selfNode ? TailscaleService.selfNode.hostname : "") ? Theme.primaryHoverLight : Theme.surfaceContainerHighest
 
                                     property bool isSelf: modelData.hostname === (TailscaleService.selfNode ? TailscaleService.selfNode.hostname : "")
                                     property bool isExpanded: detailRoot.expandedHostname === modelData.hostname

quickshell/Modules/ControlCenter/Components/ActionTile.qml

@@ -43,7 +43,7 @@ Rectangle {
     Rectangle {
         anchors.fill: parent
         radius: Theme.cornerRadius
-        color: mouseArea.containsMouse ? hoverTint(root.color) : "transparent"
+        color: mouseArea.containsMouse ? hoverTint(root.color) : Theme.withAlpha(hoverTint(root.color), 0)
         opacity: mouseArea.containsMouse ? 0.08 : 0.0
 
         Behavior on opacity {

quickshell/Modules/ControlCenter/Components/DiskUsageWidgetConfigMenu.qml

@@ -13,7 +13,7 @@ Rectangle {
     height: menuColumn.implicitHeight + Theme.spacingS * 2
     radius: Theme.cornerRadius
     color: Theme.surfaceContainer
-    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.16)
+    border.color: Theme.outlineStrong
     border.width: 1
 
     MouseArea {

quickshell/Modules/ControlCenter/Components/DragDropWidgetWrapper.qml

@@ -337,7 +337,7 @@ Item {
 
     Rectangle {
         anchors.fill: parent
-        color: editMode ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : "transparent"
+        color: editMode ? Theme.primaryHoverLight : Theme.withAlpha(Theme.primaryHoverLight, 0)
         radius: Theme.cornerRadius
         border.color: "transparent"
         border.width: 0

quickshell/Modules/ControlCenter/Components/EditControls.qml

@@ -219,7 +219,7 @@ Row {
         width: (parent.width - Theme.spacingS * 2) / 3
         height: 48
         radius: Theme.cornerRadius
-        color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12)
+        color: Theme.primaryHover
         border.color: Theme.primary
         border.width: 0
 
@@ -253,7 +253,7 @@ Row {
         width: (parent.width - Theme.spacingS * 2) / 3
         height: 48
         radius: Theme.cornerRadius
-        color: Qt.rgba(Theme.warning.r, Theme.warning.g, Theme.warning.b, 0.12)
+        color: Theme.warningHover
         border.color: Theme.warning
         border.width: 0
 
@@ -287,7 +287,7 @@ Row {
         width: (parent.width - Theme.spacingS * 2) / 3
         height: 48
         radius: Theme.cornerRadius
-        color: Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.12)
+        color: Theme.errorHover
         border.color: Theme.error
         border.width: 0
 

quickshell/Modules/ControlCenter/Components/EditModeWidgetDelegate.qml

@@ -233,7 +233,7 @@ Item {
 
     Rectangle {
         anchors.fill: parent
-        color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08)
+        color: Theme.primaryHoverLight
         radius: Theme.cornerRadius
         border.color: "transparent"
         border.width: 0

quickshell/Modules/ControlCenter/Components/PowerButton.qml

@@ -15,7 +15,7 @@ Rectangle {
 
     height: 34
     radius: Theme.cornerRadius
-    color: mouseArea.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, 0.5)
+    color: mouseArea.containsMouse ? Theme.primaryHover : Theme.withAlpha(Theme.surfaceVariant, 0.5)
 
     Row {
         anchors.centerIn: parent

quickshell/Modules/ControlCenter/Details/AudioInputDetail.qml

@@ -77,7 +77,7 @@ Rectangle {
             height: Theme.iconSize + Theme.spacingS * 2
             anchors.verticalCenter: parent.verticalCenter
             radius: (Theme.iconSize + Theme.spacingS * 2) / 2
-            color: iconArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+            color: iconArea.containsMouse ? Theme.primaryHover : Theme.withAlpha(Theme.primaryHover, 0)
 
             DankRipple {
                 id: iconRipple
@@ -273,7 +273,7 @@ Rectangle {
                         radius: height / 2
                         color: {
                             const isThisDevicePinned = audioContent.getPinnedInputs().includes(modelData.name);
-                            return isThisDevicePinned ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Theme.withAlpha(Theme.surfaceText, 0.05);
+                            return isThisDevicePinned ? Theme.primaryHover : Theme.withAlpha(Theme.surfaceText, 0.05);
                         }
 
                         Row {

quickshell/Modules/ControlCenter/Details/AudioOutputDetail.qml

@@ -77,7 +77,7 @@ Rectangle {
             height: Theme.iconSize + Theme.spacingS * 2
             anchors.verticalCenter: parent.verticalCenter
             radius: (Theme.iconSize + Theme.spacingS * 2) / 2
-            color: iconArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+            color: iconArea.containsMouse ? Theme.primaryHover : Theme.withAlpha(Theme.primaryHover, 0)
 
             DankRipple {
                 id: muteRipple
@@ -282,7 +282,7 @@ Rectangle {
                         radius: height / 2
                         color: {
                             const isThisDevicePinned = audioContent.getPinnedOutputs().includes(modelData.name);
-                            return isThisDevicePinned ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Theme.withAlpha(Theme.surfaceText, 0.05);
+                            return isThisDevicePinned ? Theme.primaryHover : Theme.withAlpha(Theme.surfaceText, 0.05);
                         }
 
                         Row {
@@ -463,7 +463,7 @@ Rectangle {
                                 height: Theme.iconSize + Theme.spacingS * 2
                                 anchors.verticalCenter: parent.verticalCenter
                                 radius: Theme.cornerRadius
-                                color: appIconArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Theme.withAlpha(Theme.primary, 0)
+                                color: appIconArea.containsMouse ? Theme.primaryHover : Theme.withAlpha(Theme.primary, 0)
 
                                 DankRipple {
                                     id: appMuteRipple

quickshell/Modules/ControlCenter/Details/BatteryDetail.qml

@@ -214,8 +214,8 @@ Rectangle {
             width: parent.width
             height: degradationContent.implicitHeight + Theme.spacingL * 2
             radius: Theme.cornerRadius
-            color: Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.12)
+            color: Theme.errorHover
-            border.color: Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.3)
+            border.color: Theme.errorSelected
             border.width: 0
             visible: (typeof PowerProfiles !== "undefined") && PowerProfiles.degradationReason !== PerformanceDegradationReason.None
 
@@ -253,7 +253,7 @@ Rectangle {
                         StyledText {
                             text: (typeof PowerProfiles !== "undefined") ? PerformanceDegradationReason.toString(PowerProfiles.degradationReason) : ""
                             font.pixelSize: Theme.fontSizeSmall
-                            color: Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.8)
+                            color: Theme.withAlpha(Theme.error, 0.8)
                             wrapMode: Text.WordWrap
                             width: parent.width
                             horizontalAlignment: Text.AlignLeft

quickshell/Modules/ControlCenter/Details/BluetoothCodecSelector.qml

@@ -217,7 +217,7 @@ Item {
             Rectangle {
                 width: parent.width
                 height: 1
-                color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.05)
+                color: Theme.outlineLight
             }
 
             StyledText {

quickshell/Modules/ControlCenter/Details/BluetoothDetail.qml

@@ -114,7 +114,7 @@ Rectangle {
             width: 100
             height: 36
             radius: 18
-            color: scanMouseArea.containsMouse && adapterEnabled ? Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency) : "transparent"
+            color: scanMouseArea.containsMouse && adapterEnabled ? Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency) : Theme.withAlpha(Theme.surfaceContainerHigh, 0)
             border.color: adapterEnabled ? Theme.primary : Theme.outlineStrong
             border.width: 0
             visible: adapterEnabled
@@ -240,7 +240,7 @@ Rectangle {
 
                     color: {
                         if (isConnecting)
-                            return Qt.rgba(Theme.warning.r, Theme.warning.g, Theme.warning.b, 0.12);
+                            return Theme.warningHover;
                         if (deviceMouseArea.containsMouse)
                             return Theme.primaryHoverLight;
                         return Theme.surfaceLight;
@@ -339,7 +339,7 @@ Rectangle {
                         width: pinBluetoothRow.width + Theme.spacingS * 2
                         height: 28
                         radius: height / 2
-                        color: pairedDelegate.isPinned ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Theme.withAlpha(Theme.surfaceText, 0.05)
+                        color: pairedDelegate.isPinned ? Theme.primaryHover : Theme.withAlpha(Theme.surfaceText, 0.05)
 
                         Row {
                             id: pinBluetoothRow
@@ -447,7 +447,7 @@ Rectangle {
                     anchors.centerIn: parent
                     name: "sync"
                     size: 24
-                    color: Qt.rgba(Theme.surfaceText.r || 0.8, Theme.surfaceText.g || 0.8, Theme.surfaceText.b || 0.8, 0.4)
+                    color: Theme.onSurface_38
                     smoothTransform: BluetoothService.adapter?.discovering ?? false
 
                     RotationAnimator on rotation {
@@ -626,7 +626,7 @@ Rectangle {
             }
 
             background: Rectangle {
-                color: parent.hovered ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : "transparent"
+                color: parent.hovered ? Theme.primaryHoverLight : Theme.withAlpha(Theme.primaryHoverLight, 0)
                 radius: Theme.cornerRadius / 2
             }
 
@@ -655,7 +655,7 @@ Rectangle {
             }
 
             background: Rectangle {
-                color: parent.hovered ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : "transparent"
+                color: parent.hovered ? Theme.primaryHoverLight : Theme.withAlpha(Theme.primaryHoverLight, 0)
                 radius: Theme.cornerRadius / 2
             }
 
@@ -683,7 +683,7 @@ Rectangle {
             }
 
             background: Rectangle {
-                color: parent.hovered ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : "transparent"
+                color: parent.hovered ? Theme.primaryHoverLight : Theme.withAlpha(Theme.primaryHoverLight, 0)
                 radius: Theme.cornerRadius / 2
             }
 
@@ -707,7 +707,7 @@ Rectangle {
             }
 
             background: Rectangle {
-                color: parent.hovered ? Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.08) : "transparent"
+                color: parent.hovered ? Theme.errorHover : Theme.withAlpha(Theme.errorHover, 0)
                 radius: Theme.cornerRadius / 2
             }
 

quickshell/Modules/ControlCenter/Details/BrightnessDetail.qml

@@ -221,7 +221,7 @@ Rectangle {
                         width: globalPinRow.width + Theme.spacingS * 2
                         height: 28
                         radius: height / 2
-                        color: monitorHeader.currentDevicePinned ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.16) : Theme.withAlpha(Theme.surfaceText, 0.05)
+                        color: monitorHeader.currentDevicePinned ? Theme.primaryPressed : Theme.withAlpha(Theme.surfaceText, 0.05)
 
                         Row {
                             id: globalPinRow
@@ -282,7 +282,7 @@ Rectangle {
                     height: 100
                     radius: Theme.cornerRadius
                     color: Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
-                    border.color: selected ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+                    border.color: selected ? Theme.primary : Theme.outlineStrong
                     border.width: selected ? 2 : 0
 
                     Column {
@@ -476,7 +476,7 @@ Rectangle {
                                     height: 28
                                     radius: Theme.cornerRadius
                                     visible: root.screenName && root.screenName.length > 0 && DisplayService.devices && DisplayService.devices.length > 1
-                                    color: devicePinnedHere ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.16) : Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
+                                    color: devicePinnedHere ? Theme.primaryPressed : Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
 
                                     DankIcon {
                                         anchors.centerIn: parent
@@ -498,7 +498,7 @@ Rectangle {
                             width: parent.width
                             height: 24
                             radius: height / 2
-                            color: SessionData.getBrightnessExponential(modelData.name) ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Theme.withAlpha(Theme.surfaceText, 0.05)
+                            color: SessionData.getBrightnessExponential(modelData.name) ? Theme.primaryHover : Theme.withAlpha(Theme.surfaceText, 0.05)
 
                             Row {
                                 anchors.centerIn: parent

quickshell/Modules/ControlCenter/Details/DoNotDisturbDetail.qml

@@ -149,7 +149,7 @@ Rectangle {
                     width: (contentColumn.width - Theme.spacingS * 2) / 3
                     height: 36
                     radius: Theme.cornerRadius
-                    color: presetArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.16) : Theme.floatingSurface
+                    color: presetArea.containsMouse ? Theme.primaryPressed : Theme.floatingSurface
                     border.color: Theme.outlineStrong
                     border.width: 1
 
@@ -183,7 +183,7 @@ Rectangle {
                 width: (contentColumn.width - Theme.spacingS) / 2
                 height: 36
                 radius: Theme.cornerRadius
-                color: foreverArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.16) : Theme.floatingSurface
+                color: foreverArea.containsMouse ? Theme.primaryPressed : Theme.floatingSurface
                 border.color: Theme.outlineStrong
                 border.width: 1
 
@@ -221,7 +221,7 @@ Rectangle {
                 height: 36
                 radius: Theme.cornerRadius
                 visible: SessionData.doNotDisturb
-                color: offArea.containsMouse ? Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.18) : Theme.floatingSurface
+                color: offArea.containsMouse ? Theme.errorPressed : Theme.floatingSurface
                 border.color: Theme.outlineStrong
                 border.width: 1
 

quickshell/Modules/ControlCenter/Details/NetworkDetail.qml

@@ -219,7 +219,7 @@ Rectangle {
                 anchors.horizontalCenter: parent.horizontalCenter
                 name: "wifi_off"
                 size: 48
-                color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.5)
+                color: Theme.surfaceTextSecondary
             }
 
             StyledText {
@@ -236,7 +236,7 @@ Rectangle {
                 width: enableWifiLabel.implicitWidth + Theme.spacingL * 2
                 height: enableWifiLabel.implicitHeight + Theme.spacingM * 2
                 radius: height / 2
-                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)
+                color: enableWifiButton.containsMouse ? Theme.primaryHover : Theme.primaryHoverLight
                 border.width: 0
                 border.color: Theme.primary
 
@@ -398,7 +398,7 @@ Rectangle {
             color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
             radius: Theme.cornerRadius
             border.width: 0
-            border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+            border.color: Theme.outlineStrong
         }
 
         MenuItem {
@@ -415,7 +415,7 @@ Rectangle {
             }
 
             background: Rectangle {
-                color: parent.hovered ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : "transparent"
+                color: parent.hovered ? Theme.primaryHoverLight : Theme.withAlpha(Theme.primaryHoverLight, 0)
                 radius: Theme.cornerRadius / 2
             }
 
@@ -439,7 +439,7 @@ Rectangle {
             }
 
             background: Rectangle {
-                color: parent.hovered ? Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.08) : "transparent"
+                color: parent.hovered ? Theme.errorHover : Theme.withAlpha(Theme.errorHover, 0)
                 radius: Theme.cornerRadius / 2
             }
 
@@ -462,7 +462,7 @@ Rectangle {
             }
 
             background: Rectangle {
-                color: parent.hovered ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : "transparent"
+                color: parent.hovered ? Theme.primaryHoverLight : Theme.withAlpha(Theme.primaryHoverLight, 0)
                 radius: Theme.cornerRadius / 2
             }
 
@@ -494,7 +494,7 @@ Rectangle {
             anchors.centerIn: parent
             name: "refresh"
             size: 48
-            color: Qt.rgba(Theme.surfaceText.r || 0.8, Theme.surfaceText.g || 0.8, Theme.surfaceText.b || 0.8, 0.3)
+            color: Theme.surfaceTextAlpha
             smoothTransform: wifiScanningOverlay.visible
 
             RotationAnimator on rotation {
@@ -678,7 +678,7 @@ Rectangle {
                 width: pinWifiRow.width + Theme.spacingS * 2
                 height: pinWifiRow.implicitHeight + Theme.spacingXS * 2
                 radius: height / 2
-                color: wifiDelegate.isPinned ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Theme.withAlpha(Theme.surfaceText, 0.05)
+                color: wifiDelegate.isPinned ? Theme.primaryHover : Theme.withAlpha(Theme.surfaceText, 0.05)
 
                 Row {
                     id: pinWifiRow
@@ -796,7 +796,7 @@ Rectangle {
             color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
             radius: Theme.cornerRadius
             border.width: 0
-            border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+            border.color: Theme.outlineStrong
         }
 
         MenuItem {
@@ -813,7 +813,7 @@ Rectangle {
             }
 
             background: Rectangle {
-                color: parent.hovered ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : "transparent"
+                color: parent.hovered ? Theme.primaryHoverLight : Theme.withAlpha(Theme.primaryHoverLight, 0)
                 radius: Theme.cornerRadius / 2
             }
 
@@ -837,7 +837,7 @@ Rectangle {
             }
 
             background: Rectangle {
-                color: parent.hovered ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : "transparent"
+                color: parent.hovered ? Theme.primaryHoverLight : Theme.withAlpha(Theme.primaryHoverLight, 0)
                 radius: Theme.cornerRadius / 2
             }
 
@@ -862,7 +862,7 @@ Rectangle {
             }
 
             background: Rectangle {
-                color: parent.hovered ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : "transparent"
+                color: parent.hovered ? Theme.primaryHoverLight : Theme.withAlpha(Theme.primaryHoverLight, 0)
                 radius: Theme.cornerRadius / 2
             }
 
@@ -885,7 +885,7 @@ Rectangle {
             }
 
             background: Rectangle {
-                color: parent.hovered ? Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.08) : "transparent"
+                color: parent.hovered ? Theme.errorHover : Theme.withAlpha(Theme.errorHover, 0)
                 radius: Theme.cornerRadius / 2
             }
 

quickshell/Modules/ControlCenter/Widgets/AudioSliderRow.qml

@@ -21,7 +21,7 @@ Row {
         height: Theme.iconSize + Theme.spacingS * 2
         anchors.verticalCenter: parent.verticalCenter
         radius: (Theme.iconSize + Theme.spacingS * 2) / 2
-        color: iconArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Theme.withAlpha(Theme.primary, 0)
+        color: iconArea.containsMouse ? Theme.primaryHover : Theme.withAlpha(Theme.primary, 0)
 
         DankRipple {
             id: iconRipple

quickshell/Modules/ControlCenter/Widgets/BrightnessSliderRow.qml

@@ -94,7 +94,7 @@ Row {
         height: Theme.iconSize + Theme.spacingS * 2
         anchors.verticalCenter: parent.verticalCenter
         radius: (Theme.iconSize + Theme.spacingS * 2) / 2
-        color: iconArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Theme.withAlpha(Theme.primary, 0)
+        color: iconArea.containsMouse ? Theme.primaryHover : Theme.withAlpha(Theme.primary, 0)
 
         DankRipple {
             id: iconRipple

quickshell/Modules/ControlCenter/Widgets/CompoundPill.qml

@@ -47,7 +47,7 @@ Rectangle {
         return Theme.ccTileInactiveBg;
     }
     readonly property color _tileRingActive: Theme.ccTileRing
-    readonly property color _tileRingInactive: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.18)
+    readonly property color _tileRingInactive: Theme.outlineHeavy
     readonly property color _tileIconActive: Theme.ccTileActiveText
     readonly property color _tileIconInactive: Theme.ccTileInactiveIcon
 

quickshell/Modules/ControlCenter/Widgets/DiskUsagePill.qml

@@ -56,7 +56,7 @@ CompoundPill {
 
     iconColor: {
         if (!DgopService.dgopAvailable || !selectedMount) {
-            return Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.5);
+            return Theme.surfaceTextSecondary;
         }
         if (usagePercent > 90) {
             return Theme.error;

quickshell/Modules/ControlCenter/Widgets/ErrorPill.qml

@@ -12,7 +12,7 @@ StyledRect {
     property string secondaryMessage: ""
 
     radius: Theme.cornerRadius
-    color: Qt.rgba(Theme.warning.r, Theme.warning.g, Theme.warning.b, 0.1)
+    color: Theme.warningHover
     border.color: Theme.warning
     border.width: 1
 

quickshell/Modules/ControlCenter/Widgets/InputAudioSliderRow.qml

@@ -21,7 +21,7 @@ Row {
         height: Theme.iconSize + Theme.spacingS * 2
         anchors.verticalCenter: parent.verticalCenter
         radius: (Theme.iconSize + Theme.spacingS * 2) / 2
-        color: iconArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Theme.withAlpha(Theme.primary, 0)
+        color: iconArea.containsMouse ? Theme.primaryHover : Theme.withAlpha(Theme.primary, 0)
 
         DankRipple {
             id: iconRipple

quickshell/Modules/DankBar/DankBarContent.qml

@@ -1470,7 +1470,7 @@ Item {
             Rectangle {
                 anchors.fill: parent
                 color: "transparent"
-                border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.1)
+                border.color: Theme.outlineStrong
                 border.width: 1
                 radius: 2
                 visible: false

quickshell/Modules/DankBar/DankBarWindow.qml

@@ -299,7 +299,7 @@ PanelWindow {
     readonly property color _surfaceContainer: Theme.surfaceContainer
     readonly property string _barId: barConfig?.id ?? "default"
     property real _backgroundAlpha: barConfig?.transparency ?? 1.0
-    readonly property color _bgColor: (SettingsData.frameEnabled && usesFrameBarChrome) ? Qt.rgba(SettingsData.effectiveFrameColor.r, SettingsData.effectiveFrameColor.g, SettingsData.effectiveFrameColor.b, SettingsData.frameOpacity) : Theme.withAlpha(_surfaceContainer, _backgroundAlpha)
+    readonly property color _bgColor: (SettingsData.frameEnabled && usesFrameBarChrome) ? Theme.withAlpha(SettingsData.effectiveFrameColor, SettingsData.frameOpacity) : Theme.withAlpha(_surfaceContainer, _backgroundAlpha)
 
     function _updateBackgroundAlpha() {
         const live = SettingsData.barConfigs.find(c => c.id === _barId);

quickshell/Modules/DankBar/Popouts/BatteryPopout.qml

@@ -255,7 +255,7 @@ DankPopout {
                         width: 32
                         height: 32
                         radius: 16
-                        color: closeBatteryArea.containsMouse ? Theme.errorHover : "transparent"
+                        color: closeBatteryArea.containsMouse ? Theme.errorHover : Theme.withAlpha(Theme.errorHover, 0)
                         anchors.top: parent.top
 
                         DankIcon {
@@ -579,8 +579,8 @@ DankPopout {
                     width: parent.width
                     height: degradationContent.implicitHeight + Theme.spacingL * 2
                     radius: Theme.cornerRadius
-                    color: Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.12)
+                    color: Theme.errorHover
-                    border.color: Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.3)
+                    border.color: Theme.errorSelected
                     border.width: 0
                     visible: (typeof PowerProfiles !== "undefined") && PowerProfiles.degradationReason !== PerformanceDegradationReason.None
 
@@ -618,7 +618,7 @@ DankPopout {
                                 StyledText {
                                     text: (typeof PowerProfiles !== "undefined") ? PerformanceDegradationReason.toString(PowerProfiles.degradationReason) : ""
                                     font.pixelSize: Theme.fontSizeSmall
-                                    color: Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.8)
+                                    color: Theme.withAlpha(Theme.error, 0.8)
                                     wrapMode: Text.WordWrap
                                     width: parent.width
                                 }

quickshell/Modules/DankBar/Popouts/DWLLayoutPopout.qml

@@ -183,7 +183,7 @@ DankPopout {
                         width: 32
                         height: 32
                         radius: 16
-                        color: closeLayoutArea.containsMouse ? Theme.errorHover : "transparent"
+                        color: closeLayoutArea.containsMouse ? Theme.errorHover : Theme.withAlpha(Theme.errorHover, 0)
                         anchors.top: parent.top
 
                         DankIcon {
@@ -228,7 +228,7 @@ DankPopout {
                             width: parent.width
                             height: 40
                             radius: Theme.cornerRadius
-                            color: layoutArea.containsMouse ? Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency) : "transparent"
+                            color: layoutArea.containsMouse ? Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency) : Theme.withAlpha(Theme.surfaceContainerHighest, 0)
 
                             Row {
                                 anchors.left: parent.left

quickshell/Modules/DankBar/Popouts/SystemUpdatePopout.qml

@@ -282,7 +282,7 @@ DankPopout {
                 anchors.topMargin: Theme.spacingM
                 anchors.bottomMargin: Theme.spacingM
                 radius: Theme.cornerRadius
-                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.1)
+                color: Theme.surfaceLight
 
                 StyledText {
                     id: statusText
@@ -321,7 +321,7 @@ DankPopout {
                         width: ListView.view.width
                         height: 48
                         radius: Theme.cornerRadius
-                        color: packageMouseArea.containsMouse ? Theme.primaryHoverLight : "transparent"
+                        color: packageMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.withAlpha(Theme.primaryHoverLight, 0)
 
                         required property var modelData
 
@@ -338,7 +338,7 @@ DankPopout {
                                 width: 64
                                 height: 18
                                 radius: 9
-                                color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.18)
+                                color: Theme.primaryPressed
 
                                 StyledText {
                                     anchors.centerIn: parent

quickshell/Modules/DankBar/Widgets/AppsDock.qml

@@ -534,7 +534,7 @@ BasePill {
                 visible: isSeparator
                 width: root.isVerticalOrientation ? root.barThickness * 0.6 : 2
                 height: root.isVerticalOrientation ? 2 : root.barThickness * 0.6
-                color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
+                color: Theme.outlineHeavy
                 radius: 1
                 anchors.centerIn: parent
             }
@@ -631,7 +631,7 @@ BasePill {
                         if (appItem.isFocused && colorizeEnabled) {
                             return mouseArea.containsMouse ? Theme.withAlpha(Qt.lighter(appItem.activeOverlayColor, 1.3), 0.4) : Theme.withAlpha(appItem.activeOverlayColor, 0.3);
                         }
-                        return mouseArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : "transparent";
+                        return mouseArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(BlurService.hoverColor(Theme.widgetBaseHoverColor), 0);
                     }
 
                     border.width: dragHandler.dragging ? 2 : 0

quickshell/Modules/DankBar/Widgets/AppsDockContextMenu.qml

@@ -121,7 +121,7 @@ PanelWindow {
         height: Math.max(60, menuColumn.implicitHeight + Theme.spacingS * 2)
         color: Theme.floatingSurface
         radius: Theme.cornerRadius
-        border.color: BlurService.enabled ? BlurService.borderColor : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+        border.color: BlurService.enabled ? BlurService.borderColor : Theme.outlineMedium
         border.width: BlurService.enabled ? BlurService.borderWidth : 1
 
         opacity: root.visible ? 1 : 0
@@ -174,7 +174,7 @@ PanelWindow {
                     width: parent.width
                     height: 28
                     radius: Theme.cornerRadius
-                    color: windowArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : "transparent"
+                    color: windowArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(BlurService.hoverColor(Theme.widgetBaseHoverColor), 0)
 
                     StyledText {
                         anchors.left: parent.left
@@ -198,7 +198,7 @@ PanelWindow {
                         width: 20
                         height: 20
                         radius: 10
-                        color: closeMouseArea.containsMouse ? Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.2) : "transparent"
+                        color: closeMouseArea.containsMouse ? Theme.errorPressed : Theme.withAlpha(Theme.errorPressed, 0)
 
                         DankIcon {
                             anchors.centerIn: parent
@@ -254,7 +254,7 @@ PanelWindow {
                 }
                 width: parent.width
                 height: 1
-                color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+                color: Theme.outlineHeavy
             }
 
             Repeater {
@@ -264,7 +264,7 @@ PanelWindow {
                     width: parent.width
                     height: 28
                     radius: Theme.cornerRadius
-                    color: actionArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : "transparent"
+                    color: actionArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(BlurService.hoverColor(Theme.widgetBaseHoverColor), 0)
 
                     Row {
                         anchors.left: parent.left
@@ -331,7 +331,7 @@ PanelWindow {
                 }
                 width: parent.width
                 height: 1
-                color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+                color: Theme.outlineHeavy
             }
 
             Rectangle {
@@ -339,7 +339,7 @@ PanelWindow {
                 width: parent.width
                 height: 28
                 radius: Theme.cornerRadius
-                color: pinArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : "transparent"
+                color: pinArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(BlurService.hoverColor(Theme.widgetBaseHoverColor), 0)
 
                 StyledText {
                     anchors.left: parent.left
@@ -391,7 +391,7 @@ PanelWindow {
                 }
                 width: parent.width
                 height: 1
-                color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+                color: Theme.outlineHeavy
             }
 
             Rectangle {
@@ -399,7 +399,7 @@ PanelWindow {
                 width: parent.width
                 height: 28
                 radius: Theme.cornerRadius
-                color: nvidiaArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : "transparent"
+                color: nvidiaArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(BlurService.hoverColor(Theme.widgetBaseHoverColor), 0)
 
                 StyledText {
                     anchors.left: parent.left
@@ -441,7 +441,7 @@ PanelWindow {
                 width: parent.width
                 height: 28
                 radius: Theme.cornerRadius
-                color: closeArea.containsMouse ? Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.12) : "transparent"
+                color: closeArea.containsMouse ? Theme.errorHover : Theme.withAlpha(Theme.errorHover, 0)
 
                 StyledText {
                     anchors.left: parent.left

quickshell/Modules/DankBar/Widgets/AppsDockOverflowButton.qml

@@ -19,7 +19,7 @@ Item {
         width: root.iconSize
         height: root.iconSize
         radius: Theme.cornerRadius
-        color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, mouseArea.containsMouse ? 0.2 : 0.1)
+        color: Theme.withAlpha(Theme.primary, mouseArea.containsMouse ? 0.2 : 0.1)
 
         Behavior on color {
             ColorAnimation {

quickshell/Modules/DankBar/Widgets/ClipboardButton.qml

@@ -197,7 +197,7 @@ BasePill {
             height: Math.max(64, menuColumn.implicitHeight + Theme.spacingS * 2)
             color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
             radius: Theme.cornerRadius
-            border.color: BlurService.enabled ? BlurService.borderColor : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+            border.color: BlurService.enabled ? BlurService.borderColor : Theme.outlineMedium
             border.width: BlurService.enabled ? BlurService.borderWidth : 1
 
             opacity: contextMenuWindow.visible ? 1 : 0
@@ -234,7 +234,7 @@ BasePill {
                     width: parent.width
                     height: 30
                     radius: Theme.cornerRadius
-                    color: clearAllArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : "transparent"
+                    color: clearAllArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(BlurService.hoverColor(Theme.widgetBaseHoverColor), 0)
 
                     Row {
                         anchors.fill: parent
@@ -274,7 +274,7 @@ BasePill {
                     width: parent.width
                     height: 30
                     radius: Theme.cornerRadius
-                    color: savedItemsArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : "transparent"
+                    color: savedItemsArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(BlurService.hoverColor(Theme.widgetBaseHoverColor), 0)
 
                     Row {
                         anchors.fill: parent

quickshell/Modules/DankBar/Widgets/Media.qml

@@ -447,7 +447,7 @@ BasePill {
                         height: 20
                         radius: 10
                         anchors.verticalCenter: parent.verticalCenter
-                        color: prevArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : "transparent"
+                        color: prevArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(BlurService.hoverColor(Theme.widgetBaseHoverColor), 0)
                         visible: root.playerAvailable
                         opacity: (activePlayer && activePlayer.canGoPrevious) ? 1 : 0.3
 
@@ -500,7 +500,7 @@ BasePill {
                         height: 20
                         radius: 10
                         anchors.verticalCenter: parent.verticalCenter
-                        color: nextArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : "transparent"
+                        color: nextArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(BlurService.hoverColor(Theme.widgetBaseHoverColor), 0)
                         visible: playerAvailable
                         opacity: (activePlayer && activePlayer.canGoNext) ? 1 : 0.3
 

quickshell/Modules/DankBar/Widgets/NotepadButton.qml

@@ -271,7 +271,7 @@ BasePill {
             height: Math.max(60, menuColumn.implicitHeight + Theme.spacingS * 2)
             color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
             radius: Theme.cornerRadius
-            border.color: BlurService.enabled ? BlurService.borderColor : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+            border.color: BlurService.enabled ? BlurService.borderColor : Theme.outlineMedium
             border.width: BlurService.enabled ? BlurService.borderWidth : 1
 
             opacity: contextMenuWindow.visible ? 1 : 0
@@ -312,7 +312,7 @@ BasePill {
                         width: parent.width
                         height: 30
                         radius: Theme.cornerRadius
-                        color: tabArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : "transparent"
+                        color: tabArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(BlurService.hoverColor(Theme.widgetBaseHoverColor), 0)
 
                         Row {
                             anchors.fill: parent
@@ -354,7 +354,7 @@ BasePill {
                     width: parent.width
                     height: 30
                     radius: Theme.cornerRadius
-                    color: newNoteArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : "transparent"
+                    color: newNoteArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(BlurService.hoverColor(Theme.widgetBaseHoverColor), 0)
 
                     Row {
                         anchors.fill: parent

quickshell/Modules/DankBar/Widgets/RunningApps.qml

@@ -286,7 +286,7 @@ BasePill {
                             if (isFocused) {
                                 return mouseArea.containsMouse ? Theme.primarySelected : Theme.withAlpha(Theme.primary, 0.45);
                             }
-                            return mouseArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : "transparent";
+                            return mouseArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(BlurService.hoverColor(Theme.widgetBaseHoverColor), 0);
                         }
 
                         // App icon
@@ -530,7 +530,7 @@ BasePill {
                             if (isFocused) {
                                 return mouseArea.containsMouse ? Theme.primarySelected : Theme.withAlpha(Theme.primary, 0.45);
                             }
-                            return mouseArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : "transparent";
+                            return mouseArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(BlurService.hoverColor(Theme.widgetBaseHoverColor), 0);
                         }
 
                         IconImage {
@@ -861,12 +861,12 @@ BasePill {
                 color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
                 radius: Theme.cornerRadius
                 border.width: BlurService.enabled ? BlurService.borderWidth : 1
-                border.color: BlurService.enabled ? BlurService.borderColor : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+                border.color: BlurService.enabled ? BlurService.borderColor : Theme.outlineStrong
 
                 Rectangle {
                     anchors.fill: parent
                     radius: parent.radius
-                    color: closeMouseArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : "transparent"
+                    color: closeMouseArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(BlurService.hoverColor(Theme.widgetBaseHoverColor), 0)
                 }
 
                 StyledText {

quickshell/Modules/DankBar/Widgets/SystemTrayBar.qml

@@ -507,7 +507,7 @@ BasePill {
                         height: root.trayItemSize
                         anchors.centerIn: parent
                         radius: Theme.cornerRadius
-                        color: trayItemArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : "transparent"
+                        color: trayItemArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(BlurService.hoverColor(Theme.widgetBaseHoverColor), 0)
                         border.width: dragHandler.dragging ? 2 : 0
                         border.color: Theme.primary
                         opacity: dragHandler.dragging ? 0.8 : 1.0
@@ -640,7 +640,7 @@ BasePill {
                     height: root.trayItemSize
                     anchors.centerIn: parent
                     radius: Theme.cornerRadius
-                    color: caretArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : "transparent"
+                    color: caretArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(BlurService.hoverColor(Theme.widgetBaseHoverColor), 0)
 
                     DankIcon {
                         anchors.centerIn: parent
@@ -713,7 +713,7 @@ BasePill {
                 x: root.isVerticalOrientation ? Math.round((parent.width - width) / 2) : (root.reverseInlineHorizontal ? parent.width - width : 0)
                 y: root.isVerticalOrientation ? (root.reverseInlineVertical ? parent.height - height : 0) : Math.round((parent.height - height) / 2)
                 radius: Theme.cornerRadius
-                color: inlineTrayItemArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : "transparent"
+                color: inlineTrayItemArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(BlurService.hoverColor(Theme.widgetBaseHoverColor), 0)
                 opacity: root.inlineExpanded ? 1 : 0
 
                 Behavior on opacity {
@@ -833,7 +833,7 @@ BasePill {
                 height: root.trayItemSize
                 anchors.centerIn: parent
                 radius: Theme.cornerRadius
-                color: trayItemArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : "transparent"
+                color: trayItemArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(BlurService.hoverColor(Theme.widgetBaseHoverColor), 0)
                 border.width: dragHandler.dragging ? 2 : 0
                 border.color: Theme.primary
                 opacity: dragHandler.dragging ? 0.8 : 1.0
@@ -983,7 +983,7 @@ BasePill {
                     height: root.trayItemSize
                     anchors.centerIn: parent
                     radius: Theme.cornerRadius
-                    color: caretAreaVert.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : "transparent"
+                    color: caretAreaVert.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(BlurService.hoverColor(Theme.widgetBaseHoverColor), 0)
 
                     DankIcon {
                         anchors.centerIn: parent
@@ -1911,7 +1911,7 @@ BasePill {
                             visible: entryStack.count === 0
                             width: parent.width
                             height: 1
-                            color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+                            color: Theme.outlineHeavy
                         }
 
                         Rectangle {
@@ -1955,7 +1955,7 @@ BasePill {
                             visible: entryStack.count > 0
                             width: parent.width
                             height: 1
-                            color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+                            color: Theme.outlineHeavy
                         }
 
                         Repeater {
@@ -1969,7 +1969,7 @@ BasePill {
                                 radius: menuEntry?.isSeparator ? 0 : Theme.cornerRadius
                                 color: {
                                     if (menuEntry?.isSeparator)
-                                        return Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2);
+                                        return Theme.outlineHeavy;
                                     return itemArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(Theme.surfaceContainer, 0);
                                 }
 

quickshell/Modules/DankBar/Widgets/WorkspaceSwitcher.qml

@@ -831,7 +831,7 @@ Item {
                 const baseColor = Theme.widgetBaseBackgroundColor;
                 const transparency = (root.barConfig && root.barConfig.widgetTransparency !== undefined) ? root.barConfig.widgetTransparency : 1.0;
                 if (Theme.widgetBackgroundHasAlpha) {
-                    return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * transparency);
+                    return Theme.blendAlpha(baseColor, transparency);
                 }
                 return Theme.withAlpha(baseColor, transparency);
             }
@@ -1463,7 +1463,7 @@ Item {
                     radius: Theme.cornerRadius
                     color: "transparent"
                     border.width: (delegateRoot.focusedBorderEnabledForMonitor && isActive && !isPlaceholder) ? delegateRoot.focusedBorderThicknessForMonitor : 0
-                    border.color: (delegateRoot.focusedBorderEnabledForMonitor && isActive && !isPlaceholder) ? focusedBorderColor : "transparent"
+                    border.color: (delegateRoot.focusedBorderEnabledForMonitor && isActive && !isPlaceholder) ? focusedBorderColor : Theme.withAlpha(focusedBorderColor, 0)
 
                     Behavior on width {
                         NumberAnimation {
@@ -1505,7 +1505,7 @@ Item {
                     opacity: dragHandler.dragging ? 0.8 : 1.0
 
                     border.width: dragHandler.dragging ? 2 : (isUrgent ? 2 : (isDropTarget ? 2 : 0))
-                    border.color: dragHandler.dragging ? Theme.primary : (isUrgent ? urgentColor : (isDropTarget ? Theme.primary : "transparent"))
+                    border.color: dragHandler.dragging ? Theme.primary : (isUrgent ? urgentColor : (isDropTarget ? Theme.primary : Theme.withAlpha(Theme.primary, 0)))
 
                     transform: Translate {
                         x: root.isVertical ? 0 : (dragHandler.dragging ? dragHandler.dragAxisOffset : 0)
@@ -1585,7 +1585,7 @@ Item {
                                             anchors.verticalCenter: parent.verticalCenter
                                             name: loadedIconData?.value ?? ""
                                             size: Theme.barTextSize(barThickness, barConfig?.fontScale, barConfig?.maximizeWidgetText)
-                                            color: (isActive || isUrgent) ? Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.95) : isPlaceholder ? Theme.surfaceTextAlpha : Theme.surfaceTextMedium
+                                            color: (isActive || isUrgent) ? Theme.withAlpha(Theme.surfaceContainer, 0.95) : isPlaceholder ? Theme.surfaceTextAlpha : Theme.surfaceTextMedium
                                             weight: (isActive && !isPlaceholder) ? 500 : 400
                                         }
                                     }
@@ -1599,7 +1599,7 @@ Item {
                                             id: wsText
                                             anchors.verticalCenter: parent.verticalCenter
                                             text: loadedIconData?.value ?? ""
-                                            color: (isActive || isUrgent) ? Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.95) : isPlaceholder ? Theme.surfaceTextAlpha : Theme.surfaceTextMedium
+                                            color: (isActive || isUrgent) ? Theme.withAlpha(Theme.surfaceContainer, 0.95) : isPlaceholder ? Theme.surfaceTextAlpha : Theme.surfaceTextMedium
                                             font.pixelSize: Theme.barTextSize(barThickness, barConfig?.fontScale, barConfig?.maximizeWidgetText)
                                             font.weight: (isActive && !isPlaceholder) ? Font.DemiBold : Font.Normal
                                         }
@@ -1614,7 +1614,7 @@ Item {
                                             id: wsIndexText
                                             anchors.verticalCenter: parent.verticalCenter
                                             text: loadedHasIcon ? (modelData?.name ?? "") : root.getWorkspaceIndex(modelData, index)
-                                            color: (isActive || isUrgent) ? Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.95) : isPlaceholder ? Theme.surfaceTextAlpha : Theme.surfaceTextMedium
+                                            color: (isActive || isUrgent) ? Theme.withAlpha(Theme.surfaceContainer, 0.95) : isPlaceholder ? Theme.surfaceTextAlpha : Theme.surfaceTextMedium
                                             font.pixelSize: Theme.barTextSize(barThickness, barConfig?.fontScale, barConfig?.maximizeWidgetText)
                                             font.weight: (isActive && !isPlaceholder) ? Font.DemiBold : Font.Normal
                                         }
@@ -1767,7 +1767,7 @@ Item {
                                         anchors.horizontalCenter: parent.horizontalCenter
                                         name: loadedIconData?.value ?? ""
                                         size: Theme.barTextSize(barThickness, barConfig?.fontScale, barConfig?.maximizeWidgetText)
-                                        color: (isActive || isUrgent) ? Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.95) : isPlaceholder ? Theme.surfaceTextAlpha : Theme.surfaceTextMedium
+                                        color: (isActive || isUrgent) ? Theme.withAlpha(Theme.surfaceContainer, 0.95) : isPlaceholder ? Theme.surfaceTextAlpha : Theme.surfaceTextMedium
                                         weight: (isActive && !isPlaceholder) ? 500 : 400
                                     }
 
@@ -1775,7 +1775,7 @@ Item {
                                         visible: loadedHasIcon && loadedIconData?.type === "text"
                                         anchors.horizontalCenter: parent.horizontalCenter
                                         text: loadedIconData?.value ?? ""
-                                        color: (isActive || isUrgent) ? Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.95) : isPlaceholder ? Theme.surfaceTextAlpha : Theme.surfaceTextMedium
+                                        color: (isActive || isUrgent) ? Theme.withAlpha(Theme.surfaceContainer, 0.95) : isPlaceholder ? Theme.surfaceTextAlpha : Theme.surfaceTextMedium
                                         font.pixelSize: Theme.barTextSize(barThickness, barConfig?.fontScale, barConfig?.maximizeWidgetText)
                                         font.weight: (isActive && !isPlaceholder) ? Font.DemiBold : Font.Normal
                                     }
@@ -1784,7 +1784,7 @@ Item {
                                         visible: ((SettingsData.showWorkspaceIndex || SettingsData.showWorkspaceName) && !loadedHasIcon) || (loadedHasIcon && SettingsData.showWorkspaceName && hasWorkspaceName)
                                         anchors.horizontalCenter: parent.horizontalCenter
                                         text: loadedHasIcon ? (root.isVertical ? (modelData?.name ?? "").charAt(0) : (modelData?.name ?? "")) : root.getWorkspaceIndex(modelData, index)
-                                        color: (isActive || isUrgent) ? Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.95) : isPlaceholder ? Theme.surfaceTextAlpha : Theme.surfaceTextMedium
+                                        color: (isActive || isUrgent) ? Theme.withAlpha(Theme.surfaceContainer, 0.95) : isPlaceholder ? Theme.surfaceTextAlpha : Theme.surfaceTextMedium
                                         font.pixelSize: Theme.barTextSize(barThickness, barConfig?.fontScale, barConfig?.maximizeWidgetText)
                                         font.weight: (isActive && !isPlaceholder) ? Font.DemiBold : Font.Normal
                                     }

quickshell/Modules/DankDash/MediaDropdownOverlay.qml

@@ -317,8 +317,8 @@ Item {
                             width: parent.width
                             height: 48
                             radius: Theme.cornerRadius
-                            color: deviceMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Theme.nestedSurface
+                            color: deviceMouseArea.containsMouse ? Theme.primaryHover : Theme.nestedSurface
-                            border.color: modelData === AudioService.sink ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+                            border.color: modelData === AudioService.sink ? Theme.primary : Theme.outlineHeavy
                             border.width: modelData === AudioService.sink ? 2 : 1
 
                             Row {
@@ -509,8 +509,8 @@ 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) : Theme.nestedSurface
+                            color: playerMouseArea.containsMouse ? Theme.primaryHover : Theme.nestedSurface
-                            border.color: modelData === activePlayer ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+                            border.color: modelData === activePlayer ? Theme.primary : Theme.outlineHeavy
                             border.width: modelData === activePlayer ? 2 : 1
 
                             Row {

quickshell/Modules/DankDash/MediaPlayerTab.qml

@@ -360,14 +360,14 @@ Item {
         DankIcon {
             name: "music_note"
             size: Theme.iconSize * 3
-            color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.5)
+            color: Theme.surfaceTextSecondary
             anchors.horizontalCenter: parent.horizontalCenter
         }
 
         StyledText {
             text: I18n.tr("No Active Players")
             font.pixelSize: Theme.fontSizeLarge
-            color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.7)
+            color: Theme.surfaceTextMedium
             anchors.horizontalCenter: parent.horizontalCenter
         }
     }
@@ -425,7 +425,7 @@ Item {
                     StyledText {
                         text: activePlayer?.trackArtist || I18n.tr("Unknown Artist")
                         font.pixelSize: Theme.fontSizeMedium
-                        color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.8)
+                        color: Theme.surfaceTextMedium
                         width: parent.width
                         horizontalAlignment: Text.AlignHCenter
                         elide: Text.ElideRight
@@ -436,7 +436,7 @@ Item {
                     StyledText {
                         text: activePlayer?.trackAlbum || ""
                         font.pixelSize: Theme.fontSizeSmall
-                        color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6)
+                        color: Theme.surfaceTextSecondary
                         width: parent.width
                         horizontalAlignment: Text.AlignHCenter
                         elide: Text.ElideRight
@@ -531,7 +531,7 @@ Item {
                                 height: 40
                                 radius: 20
                                 anchors.centerIn: parent
-                                color: shuffleArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+                                color: shuffleArea.containsMouse ? Theme.primaryHover : Theme.withAlpha(Theme.primaryHover, 0)
 
                                 DankIcon {
                                     anchors.centerIn: parent
@@ -564,7 +564,7 @@ Item {
                                 height: 40
                                 radius: 20
                                 anchors.centerIn: parent
-                                color: prevBtnArea.containsMouse ? Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency) : "transparent"
+                                color: prevBtnArea.containsMouse ? Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency) : Theme.withAlpha(Theme.surfaceContainerHigh, 0)
 
                                 DankIcon {
                                     anchors.centerIn: parent
@@ -633,7 +633,7 @@ Item {
                                 height: 40
                                 radius: 20
                                 anchors.centerIn: parent
-                                color: nextBtnArea.containsMouse ? Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency) : "transparent"
+                                color: nextBtnArea.containsMouse ? Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency) : Theme.withAlpha(Theme.surfaceContainerHigh, 0)
 
                                 DankIcon {
                                     anchors.centerIn: parent
@@ -663,7 +663,7 @@ Item {
                                 height: 40
                                 radius: 20
                                 anchors.centerIn: parent
-                                color: repeatArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+                                color: repeatArea.containsMouse ? Theme.primaryHover : Theme.withAlpha(Theme.primaryHover, 0)
 
                                 DankIcon {
                                     anchors.centerIn: parent
@@ -719,7 +719,7 @@ Item {
         radius: 20
         x: isRightEdge ? Theme.spacingM : parent.width - 40 - Theme.spacingM
         y: 185
-        color: playerSelectorArea.containsMouse || playersExpanded ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2) : "transparent"
+        color: playerSelectorArea.containsMouse || playersExpanded ? Theme.primaryPressed : Theme.withAlpha(Theme.primaryPressed, 0)
         border.color: Theme.outlineStrong
         border.width: 1
         z: 100
@@ -786,7 +786,7 @@ Item {
         radius: 20
         x: isRightEdge ? Theme.spacingM : parent.width - 40 - Theme.spacingM
         y: 130
-        color: volumeButtonArea.containsMouse && volumeAvailable || volumeExpanded ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2) : "transparent"
+        color: volumeButtonArea.containsMouse && volumeAvailable || volumeExpanded ? Theme.primaryPressed : Theme.withAlpha(Theme.primaryPressed, 0)
         border.color: volumeAvailable ? Theme.outlineStrong : Theme.outlineMedium
         border.width: 1
         z: 101
@@ -798,7 +798,7 @@ Item {
             anchors.centerIn: parent
             name: getVolumeIcon()
             size: 18
-            color: volumeAvailable && currentVolume > 0 ? Theme.primary : Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, volumeAvailable ? 1.0 : 0.5)
+            color: volumeAvailable && currentVolume > 0 ? Theme.primary : Theme.withAlpha(Theme.surfaceText, volumeAvailable ? 1.0 : 0.5)
         }
 
         MouseArea {
@@ -849,7 +849,7 @@ Item {
         radius: 20
         x: isRightEdge ? Theme.spacingM : parent.width - 40 - Theme.spacingM
         y: 240
-        color: audioDevicesArea.containsMouse || devicesExpanded ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2) : "transparent"
+        color: audioDevicesArea.containsMouse || devicesExpanded ? Theme.primaryPressed : Theme.withAlpha(Theme.primaryPressed, 0)
         border.color: Theme.outlineStrong
         border.width: 1
         z: 100

quickshell/Modules/DankDash/Overview/CalendarOverviewCard.qml

@@ -228,8 +228,8 @@ Rectangle {
             visible: CalendarService && CalendarService.dankNeedsLaunch
             height: visible ? Math.max(28, warningRow.implicitHeight) + Theme.spacingS : 0
             radius: Theme.cornerRadius
-            color: Qt.rgba(Theme.warning.r, Theme.warning.g, Theme.warning.b, 0.12)
+            color: Theme.warningHover
-            border.color: Qt.rgba(Theme.warning.r, Theme.warning.g, Theme.warning.b, 0.35)
+            border.color: Theme.withAlpha(Theme.warning, 0.35)
             border.width: 1
 
             Row {
@@ -283,7 +283,7 @@ Rectangle {
                 anchors.left: parent.left
                 anchors.leftMargin: Theme.spacingS
                 radius: Theme.cornerRadius
-                color: backButtonArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+                color: backButtonArea.containsMouse ? Theme.primaryHover : Theme.withAlpha(Theme.primaryHover, 0)
 
                 DankIcon {
                     anchors.centerIn: parent
@@ -309,7 +309,7 @@ Rectangle {
                 anchors.rightMargin: Theme.spacingS
                 radius: Theme.cornerRadius
                 visible: CalendarService && CalendarService.canCreateEvents
-                color: addEventArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+                color: addEventArea.containsMouse ? Theme.primaryHover : Theme.withAlpha(Theme.primaryHover, 0)
 
                 DankIcon {
                     anchors.centerIn: parent
@@ -362,7 +362,7 @@ Rectangle {
                 width: 28
                 height: 28
                 radius: Theme.cornerRadius
-                color: prevMonthArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+                color: prevMonthArea.containsMouse ? Theme.primaryHover : Theme.withAlpha(Theme.primaryHover, 0)
 
                 DankIcon {
                     anchors.centerIn: parent
@@ -400,7 +400,7 @@ Rectangle {
                 width: 28
                 height: 28
                 radius: Theme.cornerRadius
-                color: todayArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+                color: todayArea.containsMouse ? Theme.primaryHover : Theme.withAlpha(Theme.primaryHover, 0)
 
                 DankIcon {
                     anchors.centerIn: parent
@@ -422,7 +422,7 @@ Rectangle {
                 width: 28
                 height: 28
                 radius: Theme.cornerRadius
-                color: nextMonthArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+                color: nextMonthArea.containsMouse ? Theme.primaryHover : Theme.withAlpha(Theme.primaryHover, 0)
 
                 DankIcon {
                     anchors.centerIn: parent
@@ -485,7 +485,7 @@ Rectangle {
                                     return root.getWeekNumber(rowDate);
                                 }
                                 font.pixelSize: Theme.fontSizeSmall
-                                color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6)
+                                color: Theme.surfaceTextSecondary
                                 font.weight: Font.Medium
                             }
                         }
@@ -522,7 +522,7 @@ Rectangle {
                                 anchors.centerIn: parent
                                 text: modelData
                                 font.pixelSize: Theme.fontSizeSmall
-                                color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6)
+                                color: Theme.surfaceTextSecondary
                                 font.weight: Font.Medium
                             }
                         }
@@ -565,16 +565,16 @@ Rectangle {
                                 anchors.centerIn: parent
                                 width: Math.min(parent.width - 4, parent.height - 4, 32)
                                 height: width
-                                color: isToday ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : dayArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : "transparent"
+                                color: isToday ? Theme.primaryHover : dayArea.containsMouse ? Theme.primaryHoverLight : Theme.withAlpha(Theme.primaryHoverLight, 0)
                                 radius: Theme.cornerRadius
-                                border.color: (isSelected && !isToday) ? Theme.primary : "transparent"
+                                border.color: (isSelected && !isToday) ? Theme.primary : Theme.withAlpha(Theme.primary, 0)
                                 border.width: (isSelected && !isToday) ? 1 : 0
 
                                 StyledText {
                                     anchors.centerIn: parent
                                     text: dayDate.getDate()
                                     font.pixelSize: Theme.fontSizeSmall
-                                    color: isToday ? Theme.primary : isCurrentMonth ? Theme.surfaceText : Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.4)
+                                    color: isToday ? Theme.primary : isCurrentMonth ? Theme.surfaceText : Theme.onSurface_38
                                     font.weight: isToday ? Font.Medium : Font.Normal
                                 }
 
@@ -817,13 +817,13 @@ Rectangle {
                         readonly property bool isTask: modelData && modelData.id && modelData.id.startsWith("task_")
                         readonly property color accentColor: {
                             if (isTask)
-                                return modelData.completed ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.4) : Theme.primary;
+                                return modelData.completed ? Theme.withAlpha(Theme.primary, 0.4) : Theme.primary;
                             return (modelData && modelData.color && modelData.color.length) ? modelData.color : Theme.primary;
                         }
-                        readonly property color surfaceColor: isDragging ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.15) : (eventMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.06) : Theme.nestedSurface)
+                        readonly property color surfaceColor: isDragging ? Theme.primaryPressed : (eventMouseArea.containsMouse ? Theme.primaryBackground : Theme.nestedSurface)
 
                         color: surfaceColor
-                        border.color: isDragging ? Theme.primary : (eventMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.15) : Theme.outlineMedium)
+                        border.color: isDragging ? Theme.primary : (eventMouseArea.containsMouse ? Theme.primaryPressed : Theme.outlineMedium)
                         border.width: (isDragging || eventMouseArea.containsMouse) ? 1 : Theme.layerOutlineWidth
 
                         scale: isDragging ? 1.02 : 1.0
@@ -894,7 +894,7 @@ Rectangle {
                                 anchors.centerIn: parent
                                 name: "drag_indicator"
                                 size: 14
-                                color: dragMouseArea.containsMouse ? Theme.primary : Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.3)
+                                color: dragMouseArea.containsMouse ? Theme.primary : Theme.surfaceTextAlpha
                             }
 
                             MouseArea {
@@ -953,7 +953,7 @@ Rectangle {
                                 anchors.centerIn: parent
                                 name: (modelData && modelData.completed) ? "check_box" : "check_box_outline_blank"
                                 size: 16
-                                color: (modelData && modelData.completed) ? Theme.primary : Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.4)
+                                color: (modelData && modelData.completed) ? Theme.primary : Theme.onSurface_38
                             }
                         }
 
@@ -972,7 +972,7 @@ Rectangle {
                                 width: parent.width
                                 text: modelData ? modelData.title : ""
                                 font.pixelSize: Theme.fontSizeSmall
-                                color: (modelData && modelData.id && modelData.id.startsWith("task_") && modelData.completed) ? Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.5) : Theme.surfaceText
+                                color: (modelData && modelData.id && modelData.id.startsWith("task_") && modelData.completed) ? Theme.surfaceTextSecondary : Theme.surfaceText
                                 font.weight: Font.Medium
                                 horizontalAlignment: Text.AlignLeft
                                 elide: Text.ElideRight
@@ -997,7 +997,7 @@ Rectangle {
                                     return "";
                                 }
                                 font.pixelSize: Theme.fontSizeSmall
-                                color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.7)
+                                color: Theme.surfaceTextMedium
                                 font.weight: Font.Normal
                                 horizontalAlignment: Text.AlignLeft
                                 visible: text !== "" && modelData && modelData.id && !modelData.id.startsWith("task_")
@@ -1071,14 +1071,14 @@ Rectangle {
                             anchors.rightMargin: Theme.spacingS
                             anchors.verticalCenter: parent.verticalCenter
                             radius: Theme.cornerRadius
-                            color: deleteMouseArea.containsMouse ? (taskItem.isEditing ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Qt.rgba(0.9, 0.2, 0.2, 0.15)) : "transparent"
+                            color: deleteMouseArea.containsMouse ? (taskItem.isEditing ? Theme.primaryHover : Qt.rgba(0.9, 0.2, 0.2, 0.15)) : Theme.withAlpha(Qt.rgba(0.9, 0.2, 0.2, 0.15), 0)
                             visible: modelData && modelData.id && modelData.id.startsWith("task_")
 
                             DankIcon {
                                 anchors.centerIn: parent
                                 name: taskItem.isEditing ? "close" : "delete"
                                 size: 14
-                                color: deleteMouseArea.containsMouse ? (taskItem.isEditing ? Theme.primary : Qt.rgba(0.9, 0.2, 0.2, 1.0)) : Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.4)
+                                color: deleteMouseArea.containsMouse ? (taskItem.isEditing ? Theme.primary : Qt.rgba(0.9, 0.2, 0.2, 1.0)) : Theme.onSurface_38
                             }
 
                             MouseArea {
@@ -1105,14 +1105,14 @@ Rectangle {
                             anchors.rightMargin: Theme.spacingXS
                             anchors.verticalCenter: parent.verticalCenter
                             radius: Theme.cornerRadius
-                            color: editMouseArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
+                            color: editMouseArea.containsMouse ? Theme.primaryHover : Theme.withAlpha(Theme.primaryHover, 0)
                             visible: modelData && modelData.id && modelData.id.startsWith("task_")
 
                             DankIcon {
                                 anchors.centerIn: parent
                                 name: taskItem.isEditing ? "check" : "edit"
                                 size: 14
-                                color: editMouseArea.containsMouse ? Theme.primary : Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.4)
+                                color: editMouseArea.containsMouse ? Theme.primary : Theme.onSurface_38
                             }
 
                             MouseArea {
@@ -1161,7 +1161,7 @@ Rectangle {
 
                 Text {
                     text: I18n.tr("Add a task...", "placeholder in the new-task input field")
-                    color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.4)
+                    color: Theme.onSurface_38
                     visible: taskInput.text.length === 0
                     font.pixelSize: Theme.fontSizeSmall
                     anchors.verticalCenter: parent.verticalCenter

quickshell/Modules/DankDash/Overview/ClockCard.qml

@@ -85,7 +85,7 @@ Card {
             StyledText {
                 text: String(systemClock?.date?.getSeconds()).padStart(2, '0')
                 font.pixelSize: 24
-                color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.7)
+                color: Theme.withAlpha(Theme.primary, 0.7)
                 font.weight: Font.Medium
                 horizontalAlignment: Text.AlignHCenter
             }
@@ -100,7 +100,7 @@ Card {
         StyledText {
             text: systemClock?.date?.toLocaleDateString(I18n.locale(), "MMM dd")
             font.pixelSize: Theme.fontSizeSmall
-            color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.7)
+            color: Theme.surfaceTextMedium
             anchors.horizontalCenter: parent.horizontalCenter
         }
     }

quickshell/Modules/DankDash/Overview/MediaOverviewCard.qml

@@ -48,14 +48,14 @@ Card {
         DankIcon {
             name: "music_note"
             size: Theme.iconSize
-            color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.5)
+            color: Theme.surfaceTextSecondary
             anchors.horizontalCenter: parent.horizontalCenter
         }
 
         StyledText {
             text: I18n.tr("No Media")
             font.pixelSize: Theme.fontSizeSmall
-            color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.7)
+            color: Theme.surfaceTextMedium
             anchors.horizontalCenter: parent.horizontalCenter
         }
     }
@@ -101,7 +101,7 @@ Card {
             StyledText {
                 text: activePlayer?.trackArtist || I18n.tr("Unknown Artist")
                 font.pixelSize: Theme.fontSizeSmall
-                color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.7)
+                color: Theme.surfaceTextMedium
                 width: parent.width
                 elide: Text.ElideRight
                 maximumLineCount: 1
@@ -131,7 +131,7 @@ Card {
                     height: 28
                     radius: 14
                     anchors.verticalCenter: playPauseButton.verticalCenter
-                    color: prevArea.containsMouse ? Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency) : "transparent"
+                    color: prevArea.containsMouse ? Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency) : Theme.withAlpha(Theme.surfaceContainerHigh, 0)
 
                     DankIcon {
                         anchors.centerIn: parent
@@ -176,7 +176,7 @@ Card {
                     height: 28
                     radius: 14
                     anchors.verticalCenter: playPauseButton.verticalCenter
-                    color: nextArea.containsMouse ? Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency) : "transparent"
+                    color: nextArea.containsMouse ? Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency) : Theme.withAlpha(Theme.surfaceContainerHigh, 0)
 
                     DankIcon {
                         anchors.centerIn: parent

quickshell/Modules/DankDash/Overview/SystemMonitorCard.qml

@@ -1,5 +1,4 @@
 import QtQuick
-import QtQuick.Effects
 import qs.Common
 import qs.Services
 import qs.Widgets
@@ -8,10 +7,10 @@ Card {
     id: root
 
     Component.onCompleted: {
-        DgopService.addRef(["cpu", "memory", "system"])
+        DgopService.addRef(["cpu", "memory", "system"]);
     }
     Component.onDestruction: {
-        DgopService.removeRef(["cpu", "memory", "system"])
+        DgopService.removeRef(["cpu", "memory", "system"]);
     }
 
     Row {
@@ -30,7 +29,7 @@ Card {
                 height: parent.height - Theme.iconSizeSmall - Theme.spacingS
                 radius: 4
                 anchors.horizontalCenter: parent.horizontalCenter
-                color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+                color: Theme.outlineHeavy
 
                 Rectangle {
                     width: parent.width
@@ -39,9 +38,11 @@ Card {
                     anchors.bottom: parent.bottom
                     anchors.horizontalCenter: parent.horizontalCenter
                     color: {
-                        if (DgopService.cpuUsage > 80) return Theme.error
+                        if (DgopService.cpuUsage > 80)
-                        if (DgopService.cpuUsage > 60) return Theme.warning
+                            return Theme.error;
-                        return Theme.primary
+                        if (DgopService.cpuUsage > 60)
+                            return Theme.warning;
+                        return Theme.primary;
                     }
 
                     Behavior on height {
@@ -63,9 +64,11 @@ Card {
                     anchors.horizontalCenter: parent.horizontalCenter
                     anchors.bottom: parent.bottom
                     color: {
-                        if (DgopService.cpuUsage > 80) return Theme.error
+                        if (DgopService.cpuUsage > 80)
-                        if (DgopService.cpuUsage > 60) return Theme.warning
+                            return Theme.error;
-                        return Theme.primary
+                        if (DgopService.cpuUsage > 60)
+                            return Theme.warning;
+                        return Theme.primary;
                     }
                 }
             }
@@ -82,7 +85,7 @@ Card {
                 height: parent.height - Theme.iconSizeSmall - Theme.spacingS
                 radius: 4
                 anchors.horizontalCenter: parent.horizontalCenter
-                color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+                color: Theme.outlineHeavy
 
                 Rectangle {
                     width: parent.width
@@ -91,9 +94,11 @@ Card {
                     anchors.bottom: parent.bottom
                     anchors.horizontalCenter: parent.horizontalCenter
                     color: {
-                        if (DgopService.cpuTemperature > 85) return Theme.error
+                        if (DgopService.cpuTemperature > 85)
-                        if (DgopService.cpuTemperature > 69) return Theme.warning
+                            return Theme.error;
-                        return Theme.primary
+                        if (DgopService.cpuTemperature > 69)
+                            return Theme.warning;
+                        return Theme.primary;
                     }
 
                     Behavior on height {
@@ -115,9 +120,11 @@ Card {
                     anchors.horizontalCenter: parent.horizontalCenter
                     anchors.bottom: parent.bottom
                     color: {
-                        if (DgopService.cpuTemperature > 85) return Theme.error
+                        if (DgopService.cpuTemperature > 85)
-                        if (DgopService.cpuTemperature > 69) return Theme.warning
+                            return Theme.error;
-                        return Theme.primary
+                        if (DgopService.cpuTemperature > 69)
+                            return Theme.warning;
+                        return Theme.primary;
                     }
                 }
             }
@@ -134,7 +141,7 @@ Card {
                 height: parent.height - Theme.iconSizeSmall - Theme.spacingS
                 radius: 4
                 anchors.horizontalCenter: parent.horizontalCenter
-                color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+                color: Theme.outlineHeavy
 
                 Rectangle {
                     width: parent.width
@@ -143,9 +150,11 @@ Card {
                     anchors.bottom: parent.bottom
                     anchors.horizontalCenter: parent.horizontalCenter
                     color: {
-                        if (DgopService.memoryUsage > 90) return Theme.error
+                        if (DgopService.memoryUsage > 90)
-                        if (DgopService.memoryUsage > 75) return Theme.warning
+                            return Theme.error;
-                        return Theme.primary
+                        if (DgopService.memoryUsage > 75)
+                            return Theme.warning;
+                        return Theme.primary;
                     }
 
                     Behavior on height {
@@ -167,9 +176,11 @@ Card {
                     anchors.horizontalCenter: parent.horizontalCenter
                     anchors.bottom: parent.bottom
                     color: {
-                        if (DgopService.memoryUsage > 90) return Theme.error
+                        if (DgopService.memoryUsage > 90)
-                        if (DgopService.memoryUsage > 75) return Theme.warning
+                            return Theme.error;
-                        return Theme.primary
+                        if (DgopService.memoryUsage > 75)
+                            return Theme.warning;
+                        return Theme.primary;
                     }
                 }
             }

quickshell/Modules/DankDash/Overview/UserInfoCard.qml

@@ -78,7 +78,7 @@ Card {
                         return "";
                     }
                     font.pixelSize: Theme.fontSizeSmall
-                    color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.8)
+                    color: Theme.surfaceTextMedium
                     anchors.verticalCenter: parent.verticalCenter
                     elide: Text.ElideRight
                     width: parent.parent.parent.parent.width - avatarContainer.width - Theme.spacingM * 3 - 16 - Theme.spacingS
@@ -100,7 +100,7 @@ Card {
                 StyledText {
                     text: DgopService.shortUptime ? I18n.tr("up", "uptime prefix, e.g. 'up 4h 2m'") + DgopService.shortUptime.slice(2) : I18n.tr("up", "uptime prefix, e.g. 'up 4h 2m'")
                     font.pixelSize: Theme.fontSizeSmall
-                    color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.7)
+                    color: Theme.surfaceTextMedium
                     anchors.verticalCenter: parent.verticalCenter
                 }
             }

quickshell/Modules/DankDash/Overview/WeatherOverviewCard.qml

@@ -29,7 +29,7 @@ Card {
         DankIcon {
             name: "cloud_off"
             size: 24
-            color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.5)
+            color: Theme.surfaceTextSecondary
             visible: !WeatherService.weather.loading
             anchors.horizontalCenter: parent.horizontalCenter
         }
@@ -37,7 +37,7 @@ Card {
         StyledText {
             text: I18n.tr("No Weather")
             font.pixelSize: Theme.fontSizeSmall
-            color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.7)
+            color: Theme.surfaceTextMedium
             visible: !WeatherService.weather.loading
             anchors.horizontalCenter: parent.horizontalCenter
         }
@@ -85,7 +85,7 @@ Card {
             StyledText {
                 text: WeatherService.getWeatherCondition(WeatherService.weather.wCode)
                 font.pixelSize: Theme.fontSizeSmall
-                color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.7)
+                color: Theme.surfaceTextMedium
                 elide: Text.ElideRight
                 width: parent.parent.parent.width - 48 - Theme.spacingL * 2
                 horizontalAlignment: Text.AlignLeft

quickshell/Modules/DankDash/WallpaperTab.qml

@@ -537,7 +537,7 @@ Item {
 
                         Rectangle {
                             anchors.fill: parent
-                            color: isSelected ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.15) : "transparent"
+                            color: isSelected ? Theme.primaryPressed : Theme.withAlpha(Theme.primaryPressed, 0)
                             radius: parent.radius
 
                             Behavior on color {
@@ -658,7 +658,8 @@ Item {
                                 sortMenu.visible = false;
                                 pageJumpPopup.visible = !pageJumpPopup.visible;
                             }
-                            onEntered: if (enabled) pageJumpTooltip.show(I18n.tr("Jump to page"), pageIndicator, 0, 0, "top")
+                            onEntered: if (enabled)
+                                pageJumpTooltip.show(I18n.tr("Jump to page"), pageIndicator, 0, 0, "top")
                             onExited: pageJumpTooltip.hide()
                         }
 

quickshell/Modules/DankDash/WeatherForecastCard.qml

@@ -104,7 +104,7 @@ Rectangle {
     ]
 
     color: isCurrent ? Theme.withAlpha(Theme.primary, 0.1) : Theme.nestedSurface
-    border.color: isCurrent ? Theme.withAlpha(Theme.primary, 0.3) : "transparent"
+    border.color: isCurrent ? Theme.withAlpha(Theme.primary, 0.3) : Theme.withAlpha(Theme.primary, 0)
     border.width: isCurrent ? 1 : 0
 
     Column {

quickshell/Modules/DankDash/WeatherTab.qml

@@ -512,7 +512,7 @@ Item {
                         anchors.verticalCenter: parent.verticalCenter
                         anchors.right: parent.right
                         enabled: Math.abs(dateStepper.currentDate - new Date()) > 1000
-                        iconColor: enabled ? Theme.blendAlpha(Theme.surfaceText, 0.5) : "transparent"
+                        iconColor: enabled ? Theme.blendAlpha(Theme.surfaceText, 0.5) : Theme.withAlpha(Theme.blendAlpha(Theme.surfaceText, 0.5), 0)
                         iconSize: 12
                         buttonSize: 20
                         iconName: "replay"

quickshell/Modules/Dock/Dock.qml

@@ -52,7 +52,7 @@ Variants {
         readonly property real dockFrameInset: dockGeometry.frameInset
         readonly property real surfaceRadius: usesConnectedFrameChrome ? Theme.connectedSurfaceRadius : Theme.cornerRadius
         readonly property color surfaceColor: usesConnectedFrameChrome ? Theme.connectedSurfaceColor : Theme.withAlpha(Theme.surfaceContainer, backgroundTransparency)
-        readonly property color surfaceBorderColor: usesConnectedFrameChrome ? "transparent" : BlurService.borderColor
+        readonly property color surfaceBorderColor: usesConnectedFrameChrome ? Theme.withAlpha(BlurService.borderColor, 0) : BlurService.borderColor
         readonly property real surfaceBorderWidth: usesConnectedFrameChrome ? 0 : BlurService.borderWidth
         readonly property real surfaceTopLeftRadius: usesConnectedFrameChrome && (SettingsData.dockPosition === SettingsData.Position.Top || SettingsData.dockPosition === SettingsData.Position.Left) ? 0 : surfaceRadius
         readonly property real surfaceTopRightRadius: usesConnectedFrameChrome && (SettingsData.dockPosition === SettingsData.Position.Top || SettingsData.dockPosition === SettingsData.Position.Right) ? 0 : surfaceRadius

quickshell/Modules/Dock/DockAppButton.qml

@@ -447,7 +447,7 @@ Item {
         Rectangle {
             anchors.fill: parent
             radius: Theme.cornerRadius
-            color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3)
+            color: Theme.primarySelected
             border.width: 2
             border.color: Theme.primary
             visible: dragging
@@ -593,7 +593,7 @@ Item {
                             if (isWindowFocused) {
                                 return Theme.primary;
                             }
-                            return Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6);
+                            return Theme.surfaceTextSecondary;
                         }
 
                         if (appData.type === "grouped" && appData.windowCount > 1) {
@@ -603,7 +603,7 @@ Item {
                             }
                         }
 
-                        return Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6);
+                        return Theme.surfaceTextSecondary;
                     }
                 }
             }
@@ -651,7 +651,7 @@ Item {
                             if (isWindowFocused) {
                                 return Theme.primary;
                             }
-                            return Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6);
+                            return Theme.surfaceTextSecondary;
                         }
 
                         if (appData.type === "grouped" && appData.windowCount > 1) {
@@ -661,7 +661,7 @@ Item {
                             }
                         }
 
-                        return Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6);
+                        return Theme.surfaceTextSecondary;
                     }
                 }
             }

quickshell/Modules/Dock/DockApps.qml

@@ -573,7 +573,7 @@ Item {
                         visible: itemData.type === "separator"
                         width: root.isVertical ? root.iconSize * 0.5 : 2
                         height: root.isVertical ? 2 : root.iconSize * 0.5
-                        color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
+                        color: Theme.outlineHeavy
                         radius: 1
                         anchors.centerIn: parent
                     }

quickshell/Modules/Dock/DockContextMenu.qml

@@ -34,7 +34,7 @@ DockContextMenuBase {
             width: parent.width
             height: 28
             radius: Theme.cornerRadius
-            color: windowArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : "transparent"
+            color: windowArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(BlurService.hoverColor(Theme.widgetBaseHoverColor), 0)
 
             StyledText {
                 anchors.left: parent.left
@@ -58,7 +58,7 @@ DockContextMenuBase {
                 width: 20
                 height: 20
                 radius: 10
-                color: closeMouseArea.containsMouse ? Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.2) : "transparent"
+                color: closeMouseArea.containsMouse ? Theme.errorPressed : Theme.withAlpha(Theme.errorPressed, 0)
 
                 DankIcon {
                     anchors.centerIn: parent
@@ -114,7 +114,7 @@ DockContextMenuBase {
         }
         width: parent.width
         height: 1
-        color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+        color: Theme.outlineHeavy
     }
 
     Repeater {
@@ -124,7 +124,7 @@ DockContextMenuBase {
             width: parent.width
             height: 28
             radius: Theme.cornerRadius
-            color: actionArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : "transparent"
+            color: actionArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(BlurService.hoverColor(Theme.widgetBaseHoverColor), 0)
 
             Row {
                 anchors.left: parent.left
@@ -191,7 +191,7 @@ DockContextMenuBase {
         }
         width: parent.width
         height: 1
-        color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+        color: Theme.outlineHeavy
     }
 
     Rectangle {
@@ -199,7 +199,7 @@ DockContextMenuBase {
         width: parent.width
         height: 28
         radius: Theme.cornerRadius
-        color: pinArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : "transparent"
+        color: pinArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(BlurService.hoverColor(Theme.widgetBaseHoverColor), 0)
 
         Row {
             anchors.left: parent.left
@@ -264,7 +264,7 @@ DockContextMenuBase {
         }
         width: parent.width
         height: 1
-        color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+        color: Theme.outlineHeavy
     }
 
     Rectangle {
@@ -272,7 +272,7 @@ DockContextMenuBase {
         width: parent.width
         height: 28
         radius: Theme.cornerRadius
-        color: nvidiaArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : "transparent"
+        color: nvidiaArea.containsMouse ? BlurService.hoverColor(Theme.widgetBaseHoverColor) : Theme.withAlpha(BlurService.hoverColor(Theme.widgetBaseHoverColor), 0)
 
         Row {
             anchors.left: parent.left
@@ -327,7 +327,7 @@ DockContextMenuBase {
         width: parent.width
         height: 28
         radius: Theme.cornerRadius
-        color: closeArea.containsMouse ? Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.12) : "transparent"
+        color: closeArea.containsMouse ? Theme.errorHover : Theme.withAlpha(Theme.errorHover, 0)
 
         Row {
             anchors.left: parent.left

quickshell/Modules/Dock/DockContextMenuBase.qml

@@ -157,7 +157,7 @@ PanelWindow {
         height: menuColumn.implicitHeight + Theme.spacingS * 2
         color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
         radius: Theme.cornerRadius
-        border.color: BlurService.enabled ? BlurService.borderColor : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+        border.color: BlurService.enabled ? BlurService.borderColor : Theme.outlineMedium
         border.width: BlurService.enabled ? BlurService.borderWidth : 1
 
         opacity: root.visible ? 1 : 0

quickshell/Modules/Dock/DockOverflowButton.qml

@@ -18,7 +18,7 @@ Item {
         width: actualIconSize
         height: actualIconSize
         radius: Theme.cornerRadius
-        color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, mouseArea.containsMouse ? 0.2 : 0.1)
+        color: Theme.withAlpha(Theme.primary, mouseArea.containsMouse ? 0.2 : 0.1)
 
         Behavior on color {
             ColorAnimation {

quickshell/Modules/Dock/DockTrashContextMenu.qml

@@ -39,7 +39,7 @@ DockContextMenuBase {
     Rectangle {
         width: parent.width
         height: 1
-        color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+        color: Theme.outlineHeavy
     }
 
     DockTrashMenuItem {

quickshell/Modules/Dock/DockTrashMenuItem.qml

@@ -19,7 +19,7 @@ Rectangle {
         if (!area.containsMouse || !enabled)
             return "transparent";
         if (isDestructive)
-            return Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.12);
+            return Theme.errorHover;
         return BlurService.hoverColor(Theme.widgetBaseHoverColor);
     }
 

quickshell/Modules/Greetd/GreeterContent.qml

@@ -1113,7 +1113,7 @@ Item {
 
                         clip: true
                         radius: Theme.cornerRadius
-                        color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.9)
+                        color: Theme.withAlpha(Theme.surfaceContainer, 0.9)
                         border.color: inputField.activeFocus ? Theme.primary : Qt.rgba(1, 1, 1, 0.3)
                         border.width: inputField.activeFocus ? 2 : 1
 

quickshell/Modules/Greetd/GreeterUserPicker.qml

@@ -118,8 +118,8 @@ Item {
                 width: userListView.width
                 height: root.rowHeight
                 radius: Theme.cornerRadius
-                color: userRowMouse.containsMouse ? Theme.surfacePressed : "transparent"
+                color: userRowMouse.containsMouse ? Theme.surfacePressed : Theme.withAlpha(Theme.surfacePressed, 0)
-                border.color: GreeterState.username === userRow.modelData.username ? Theme.primary : "transparent"
+                border.color: GreeterState.username === userRow.modelData.username ? Theme.primary : Theme.withAlpha(Theme.primary, 0)
                 border.width: GreeterState.username === userRow.modelData.username ? 1 : 0
 
                 RowLayout {
@@ -164,7 +164,7 @@ Item {
             height: root.actionRowHeight
             visible: root.manualEntryVisible
             radius: Theme.cornerRadius
-            color: manualEntryRowMouse.containsMouse ? Theme.surfacePressed : "transparent"
+            color: manualEntryRowMouse.containsMouse ? Theme.surfacePressed : Theme.withAlpha(Theme.surfacePressed, 0)
 
             RowLayout {
                 anchors.fill: parent
@@ -203,7 +203,7 @@ Item {
             height: root.actionRowHeight
             visible: root.autoLoginVisible
             radius: Theme.cornerRadius
-            color: autoLoginRowMouse.containsMouse ? Theme.surfacePressed : "transparent"
+            color: autoLoginRowMouse.containsMouse ? Theme.surfacePressed : Theme.withAlpha(Theme.surfacePressed, 0)
 
             RowLayout {
                 anchors.fill: parent

quickshell/Modules/Lock/LockPowerMenu.qml

@@ -559,12 +559,12 @@ Rectangle {
                             radius: Theme.cornerRadius
                             color: {
                                 if (isSelected)
-                                    return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12);
+                                    return Theme.primaryHover;
                                 if (mouseArea.containsMouse)
-                                    return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08);
+                                    return Theme.primaryHoverLight;
-                                return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.08);
+                                return Theme.surfaceHover;
                             }
-                            border.color: isSelected ? Theme.primary : "transparent"
+                            border.color: isSelected ? Theme.primary : Theme.withAlpha(Theme.primary, 0)
                             border.width: isSelected ? 2 : 0
 
                             Rectangle {
@@ -593,10 +593,10 @@ Rectangle {
                                     width: parent.width * root.holdProgress
                                     color: {
                                         if (gridButtonRect.modelData === "poweroff")
-                                            return Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.3);
+                                            return Theme.errorSelected;
                                         if (gridButtonRect.modelData === "reboot")
-                                            return Qt.rgba(Theme.warning.r, Theme.warning.g, Theme.warning.b, 0.3);
+                                            return Theme.withAlpha(Theme.warning, 0.3);
-                                        return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3);
+                                        return Theme.primarySelected;
                                     }
                                 }
                             }
@@ -634,13 +634,13 @@ Rectangle {
                                     width: 20
                                     height: 16
                                     radius: 4
-                                    color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.1)
+                                    color: Theme.onSurface_12
                                     anchors.horizontalCenter: parent.horizontalCenter
 
                                     StyledText {
                                         text: gridButtonRect.actionData.key
                                         font.pixelSize: Theme.fontSizeSmall - 1
-                                        color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6)
+                                        color: Theme.surfaceTextSecondary
                                         font.weight: Font.Medium
                                         anchors.centerIn: parent
                                     }
@@ -692,12 +692,12 @@ Rectangle {
                             radius: Theme.cornerRadius
                             color: {
                                 if (isSelected)
-                                    return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12);
+                                    return Theme.primaryHover;
                                 if (listMouseArea.containsMouse)
-                                    return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08);
+                                    return Theme.primaryHoverLight;
-                                return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.08);
+                                return Theme.surfaceHover;
                             }
-                            border.color: isSelected ? Theme.primary : "transparent"
+                            border.color: isSelected ? Theme.primary : Theme.withAlpha(Theme.primary, 0)
                             border.width: isSelected ? 2 : 0
 
                             Rectangle {
@@ -726,10 +726,10 @@ Rectangle {
                                     width: parent.width * root.holdProgress
                                     color: {
                                         if (listButtonRect.modelData === "poweroff")
-                                            return Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.3);
+                                            return Theme.errorSelected;
                                         if (listButtonRect.modelData === "reboot")
-                                            return Qt.rgba(Theme.warning.r, Theme.warning.g, Theme.warning.b, 0.3);
+                                            return Theme.withAlpha(Theme.warning, 0.3);
-                                        return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3);
+                                        return Theme.primarySelected;
                                     }
                                 }
                             }
@@ -772,7 +772,7 @@ Rectangle {
                                 width: 28
                                 height: 20
                                 radius: 4
-                                color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.1)
+                                color: Theme.onSurface_12
                                 anchors.right: parent.right
                                 anchors.rightMargin: Theme.spacingM
                                 anchors.verticalCenter: parent.verticalCenter
@@ -780,7 +780,7 @@ Rectangle {
                                 StyledText {
                                     text: listButtonRect.actionData.key
                                     font.pixelSize: Theme.fontSizeSmall
-                                    color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6)
+                                    color: Theme.surfaceTextSecondary
                                     font.weight: Font.Medium
                                     anchors.centerIn: parent
                                 }
@@ -820,7 +820,7 @@ Rectangle {
                     DankIcon {
                         name: root.showHoldHint ? "warning" : "touch_app"
                         size: Theme.fontSizeSmall
-                        color: root.showHoldHint ? Theme.warning : Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6)
+                        color: root.showHoldHint ? Theme.warning : Theme.surfaceTextSecondary
                         anchors.verticalCenter: parent.verticalCenter
                     }
 
@@ -841,7 +841,7 @@ Rectangle {
                             return I18n.tr("Hold to confirm (%1s)").arg(durationSec);
                         }
                         font.pixelSize: Theme.fontSizeSmall
-                        color: root.showHoldHint ? Theme.warning : Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6)
+                        color: root.showHoldHint ? Theme.warning : Theme.surfaceTextSecondary
                         anchors.verticalCenter: parent.verticalCenter
                     }
                 }