settings: cleanup pass to update shared surface tier roles

flake.lock

@@ -3,11 +3,11 @@
     "dank-qml-common": {
       "flake": false,
       "locked": {
-        "lastModified": 1790735794,
-        "narHash": "sha256-+N/tmoRkCCQng+JgZ3Qrb/vrjFihjw9kQgLTus7LwoA=",
+        "lastModified": 1790818052,
+        "narHash": "sha256-B4QALG/6pkJuxKOOSs7wU+qJdOXHWYUt2YK6E3Y5M84=",
         "owner": "AvengeMedia",
         "repo": "dank-qml-common",
-        "rev": "fc42c683c7fd16e7583536acabae54a5fd678fc3",
+        "rev": "fdd2dfe3f3444585bc1f44180837724abbdfe7f1",
         "type": "github"
       },
       "original": {

quickshell/Common/Theme.qml

@@ -565,6 +565,7 @@ Singleton {
     readonly property color notificationFloatingSurface: notificationForegroundLayers ? readableSurface : withAlpha(readableSurface, 0)
     readonly property color notificationFloatingSurfaceHigh: notificationForegroundLayers ? readableSurfaceHigh : withAlpha(readableSurfaceHigh, 0)
     readonly property color notificationNestedSurface: notificationFloatingSurfaceHigh
+    readonly property color notificationChipSurface: notificationForegroundLayers ? chipSurface : withAlpha(onSurface, stateLayerFocus)
     readonly property real blurLayerOutlineOpacity: Math.max(0, Math.min(1, typeof SettingsData === "undefined" ? 0 : (SettingsData.blurLayerOutlineOpacity ?? 0)))
     readonly property real layerOutlineOpacity: blurLayerOutlineOpacity
     readonly property int layerOutlineWidth: layerOutlineOpacity > 0 ? 1 : 0

quickshell/Modules/BuiltinDesktopPlugins/DesktopClockWidget.qml

@@ -81,7 +81,7 @@ Item {
     readonly property color handColorDim: Theme.withAlpha(accentColor, 0.65)
     readonly property color textColor: Theme.onSurface
     readonly property color subtleTextColor: Theme.onSurfaceVariant
-    readonly property color backgroundColor: Theme.withAlpha(Theme.surface, root.transparency)
+    readonly property color backgroundColor: Theme.withAlpha(Theme.hostSurface, root.transparency)
 
     readonly property bool showAnalogSeconds: cfg.showAnalogSeconds ?? true
     readonly property bool showDigitalSeconds: cfg.showDigitalSeconds ?? false

quickshell/Modules/BuiltinDesktopPlugins/SystemMonitorWidget.qml

@@ -68,8 +68,8 @@ Item {
         }
     }
 
-    readonly property color bgColor: Theme.withAlpha(Theme.surface, root.transparency)
-    readonly property color tileBg: Theme.withAlpha(Theme.surfaceContainerHigh, root.transparency)
+    readonly property color bgColor: Theme.withAlpha(Theme.hostSurface, root.transparency)
+    readonly property color tileBg: Theme.withAlpha(Theme.cardSurface, root.transparency)
     readonly property color textColor: Theme.surfaceText
     readonly property color dimColor: Theme.surfaceVariantText
 

quickshell/Modules/ControlCenter/Widgets/UserTile.qml

@@ -181,7 +181,7 @@ Item {
         iconSize: Theme.iconSizeSmall
         iconName: "shuffle"
         iconColor: Theme.onSurface
-        backgroundColor: Theme.surfaceContainerHighest
+        backgroundColor: Theme.chipSurfaceNested
         Accessible.name: I18n.tr("Shuffle")
         visible: root.editMode && avatar.visible
         onClicked: root.optionChanged("shape", WidgetUtils.nextUserShape(root.shape))

quickshell/Modules/DankBar/Widgets/RunningApps.qml

@@ -365,7 +365,7 @@ BasePill {
                         anchors.centerIn: parent
                         text: windowCount > 9 ? "9+" : windowCount
                         font.pixelSize: 9
-                        color: Theme.surface
+                        color: Theme.onPrimary
                     }
                 }
 

quickshell/Modules/DankBar/Widgets/WorkspaceSwitcher.qml

@@ -713,7 +713,8 @@ BasePill {
                     return colorFromMode(mode, unfocusedColor, effectiveCustomColor(root.opt("workspaceOccupiedCustomColor"), root.opt("workspaceUnfocusedMonitorOccupiedCustomColor")), Theme.secondary);
                 }
 
-                readonly property color urgentColor: colorFromMode(effectiveColorMode(root.opt("workspaceUrgentColorMode"), root.opt("workspaceUnfocusedMonitorUrgentColorMode")), Theme.error, effectiveCustomColor(root.opt("workspaceUrgentCustomColor"), root.opt("workspaceUnfocusedMonitorUrgentCustomColor")), Theme.error)
+                readonly property string urgentColorMode: effectiveColorMode(root.opt("workspaceUrgentColorMode"), root.opt("workspaceUnfocusedMonitorUrgentColorMode"))
+                readonly property color urgentColor: colorFromMode(urgentColorMode, Theme.error, effectiveCustomColor(root.opt("workspaceUrgentCustomColor"), root.opt("workspaceUnfocusedMonitorUrgentCustomColor")), Theme.error)
 
                 readonly property color focusedBorderColor: colorFromMode(effectiveColorMode(root.opt("workspaceFocusedBorderColor"), root.opt("workspaceUnfocusedMonitorBorderColor")), Theme.primary, effectiveCustomColor(root.opt("workspaceFocusedBorderCustomColor"), root.opt("workspaceUnfocusedMonitorBorderCustomColor")), Theme.primary)
 
@@ -727,6 +728,40 @@ BasePill {
                 readonly property color quickshellIconActiveColor: getContrastingIconColor(activeColor)
                 readonly property color quickshellIconInactiveColor: getContrastingIconColor(unfocusedColor)
 
+                function inkFromMode(mode, fill, fallbackInk) {
+                    switch (mode) {
+                    case "primary":
+                    case "pri":
+                        return Theme.onPrimary;
+                    case "primaryContainer":
+                        return Theme.onPrimaryContainer;
+                    case "secondaryContainer":
+                        return Theme.onSecondaryContainer;
+                    case "tertiaryContainer":
+                        return Theme.onTertiaryContainer;
+                    case "error":
+                    case "err":
+                        return Theme.onError;
+                    case "s":
+                    case "sc":
+                    case "sch":
+                    case "schh":
+                        return Theme.onSurface;
+                    case "secondary":
+                    case "sec":
+                    case "tertiary":
+                    case "ter":
+                    case "surfaceText":
+                    case "custom":
+                    case "none":
+                        return getContrastingIconColor(fill);
+                    default:
+                        return fallbackInk;
+                    }
+                }
+
+                readonly property color filledInk: isActive ? inkFromMode(activeColorMode, activeColor, Theme.onPrimary) : inkFromMode(urgentColorMode, urgentColor, Theme.onError)
+
                 readonly property color requestedColor: isActive ? activeColor : isUrgent ? urgentColor : isPlaceholder ? Theme.surfaceTextLight : isHovered ? Theme.withAlpha(unfocusedColor, root.hoverFadeAlpha) : isOccupied ? occupiedColor : unfocusedColor
 
                 property bool colorAnimationReady: false
@@ -1080,7 +1115,7 @@ BasePill {
                                         anchors.verticalCenter: parent.verticalCenter
                                         name: loadedIconData?.value ?? ""
                                         size: Theme.barTextSize(barThickness, barConfig?.fontScale, barConfig?.maximizeWidgetText)
-                                        color: (isActive || isUrgent) ? Theme.withAlpha(Theme.surfaceContainer, 0.95) : isPlaceholder ? Theme.surfaceTextAlpha : Theme.surfaceTextMedium
+                                        color: (isActive || isUrgent) ? filledInk : isPlaceholder ? Theme.surfaceTextAlpha : Theme.surfaceTextMedium
                                         weight: (isActive && !isPlaceholder) ? 500 : 400
                                     }
                                 }
@@ -1094,7 +1129,7 @@ BasePill {
                                         id: wsText
                                         anchors.verticalCenter: parent.verticalCenter
                                         text: loadedIconData?.value ?? ""
-                                        color: (isActive || isUrgent) ? Theme.withAlpha(Theme.surfaceContainer, 0.95) : isPlaceholder ? Theme.surfaceTextAlpha : Theme.surfaceTextMedium
+                                        color: (isActive || isUrgent) ? filledInk : isPlaceholder ? Theme.surfaceTextAlpha : Theme.surfaceTextMedium
                                         font.pixelSize: Theme.barTextSize(barThickness, barConfig?.fontScale, barConfig?.maximizeWidgetText)
                                         font.weight: (isActive && !isPlaceholder) ? Theme.fontWeightMedium : Theme.fontWeight
                                     }
@@ -1109,7 +1144,7 @@ BasePill {
                                         id: wsIndexText
                                         anchors.verticalCenter: parent.verticalCenter
                                         text: loadedHasIcon ? (record?.name ?? "") : root.getWorkspaceIndex(record, index)
-                                        color: (isActive || isUrgent) ? Theme.withAlpha(Theme.surfaceContainer, 0.95) : isPlaceholder ? Theme.surfaceTextAlpha : Theme.surfaceTextMedium
+                                        color: (isActive || isUrgent) ? filledInk : isPlaceholder ? Theme.surfaceTextAlpha : Theme.surfaceTextMedium
                                         font.pixelSize: Theme.barTextSize(barThickness, barConfig?.fontScale, barConfig?.maximizeWidgetText)
                                         font.weight: (isActive && !isPlaceholder) ? Theme.fontWeightMedium : Theme.fontWeight
                                     }
@@ -1251,7 +1286,7 @@ BasePill {
                                     anchors.horizontalCenter: parent.horizontalCenter
                                     name: loadedIconData?.value ?? ""
                                     size: Theme.barTextSize(barThickness, barConfig?.fontScale, barConfig?.maximizeWidgetText)
-                                    color: (isActive || isUrgent) ? Theme.withAlpha(Theme.surfaceContainer, 0.95) : isPlaceholder ? Theme.surfaceTextAlpha : Theme.surfaceTextMedium
+                                    color: (isActive || isUrgent) ? filledInk : isPlaceholder ? Theme.surfaceTextAlpha : Theme.surfaceTextMedium
                                     weight: (isActive && !isPlaceholder) ? 500 : 400
                                 }
 
@@ -1259,7 +1294,7 @@ BasePill {
                                     visible: loadedHasIcon && loadedIconData?.type === "text"
                                     anchors.horizontalCenter: parent.horizontalCenter
                                     text: loadedIconData?.value ?? ""
-                                    color: (isActive || isUrgent) ? Theme.withAlpha(Theme.surfaceContainer, 0.95) : isPlaceholder ? Theme.surfaceTextAlpha : Theme.surfaceTextMedium
+                                    color: (isActive || isUrgent) ? filledInk : isPlaceholder ? Theme.surfaceTextAlpha : Theme.surfaceTextMedium
                                     font.pixelSize: Theme.barTextSize(barThickness, barConfig?.fontScale, barConfig?.maximizeWidgetText)
                                     font.weight: (isActive && !isPlaceholder) ? Theme.fontWeightMedium : Theme.fontWeight
                                 }
@@ -1268,7 +1303,7 @@ BasePill {
                                     visible: (root.opt("showWorkspaceIndex") || root.opt("showWorkspaceName")) && !loadedHasIcon
                                     anchors.horizontalCenter: parent.horizontalCenter
                                     text: root.getWorkspaceIndex(record, index)
-                                    color: (isActive || isUrgent) ? Theme.withAlpha(Theme.surfaceContainer, 0.95) : isPlaceholder ? Theme.surfaceTextAlpha : Theme.surfaceTextMedium
+                                    color: (isActive || isUrgent) ? filledInk : isPlaceholder ? Theme.surfaceTextAlpha : Theme.surfaceTextMedium
                                     font.pixelSize: Theme.barTextSize(barThickness, barConfig?.fontScale, barConfig?.maximizeWidgetText)
                                     font.weight: (isActive && !isPlaceholder) ? Theme.fontWeightMedium : Theme.fontWeight
                                 }

quickshell/Modules/DankDash/Media/MediaDeviceRow.qml

@@ -77,7 +77,6 @@ SettingsRow {
                 fillTextColor: Theme.selectedContainer
                 trackColor: Theme.onPrimary
                 trackTextColor: Theme.onSelectedContainer
-                thumbOutlineColor: Theme.selectedContainer
                 Accessible.name: I18n.tr("Volume") + ": " + root.title
                 onVolumeChangedByUser: volume => {
                     const audio = root.node?.audio;

quickshell/Modules/DankDash/Media/MediaVolumeSlider.qml

@@ -27,7 +27,6 @@ DankSlider {
     minimum: 0
     maximum: Math.max(1, Math.round(maximumVolume))
     wheelStep: SettingsData.audioWheelScrollAmount
-    thumbOutlineColor: Theme.cardSurface
     fillColor: accent
     fillTextColor: accentText
     trackColor: MediaAccentService.accentTrack

quickshell/Modules/DankIsland/Activities/SystemLevelCompact.qml

@@ -45,7 +45,6 @@ Item {
         unit: root.systemModel.unit
         displayText: root.systemModel.displayValue
         sliderEnabled: root.systemModel.available
-        thumbOutlineColor: Theme.hostSurface
         onIconClicked: root.systemModel.toggleMute()
         onSliderValueChanged: newValue => root.systemModel.setRatio(newValue / Math.max(1, root.maximum))
     }

quickshell/Modules/DankIsland/Activities/SystemLevelExpanded.qml

@@ -65,7 +65,6 @@ Item {
             enabled: root.systemModel.available
             showValue: false
             unit: root.systemModel.unit
-            thumbOutlineColor: Theme.hostSurface
             valueOverride: Math.round(root.systemModel.value)
             onSliderValueChanged: newValue => root.systemModel.setRatio(newValue / maximum)
 

quickshell/Modules/Notepad/NotepadSettings.qml

@@ -67,7 +67,7 @@ Item {
         anchors.fill: parent
         visible: root.isVisible
         z: 50
-        color: Theme.withAlpha(Theme.surface, 0.85)
+        color: Theme.withAlpha(Theme.hostSurface, 0.85)
 
         WheelHandler {
             // Hold scroll so the editor beneath doesn't move while settings are open.

quickshell/Modules/Notifications/Center/HistoryNotificationCard.qml

@@ -11,7 +11,7 @@ Notifications.NotificationCard {
     property bool nested: false
 
     surfaceColor: Theme.foregroundColor(nested ? Theme.chipSurface : Theme.cardSurface, Theme.isFloatingWindow(root))
-    chipColor: nested ? Theme.withAlpha(Theme.onSurface, Theme.stateLayerFocus) : Theme.chipSurface
+    chipColor: nested ? Theme.withAlpha(Theme.onSurface, Theme.stateLayerFocus) : Theme.foregroundColor(Theme.chipSurface, Theme.isFloatingWindow(root))
 
     notificationData: ({
             appName: historyItem.appName || "",

quickshell/Modules/Notifications/Center/NotificationCard.qml

@@ -24,7 +24,7 @@ Item {
     property real contentOpacity: 1
     property real swipeBleed: 0
     readonly property color cardSurfaceColor: Theme.foregroundColor(nested ? Theme.chipSurface : Theme.cardSurface, Theme.isFloatingWindow(root))
-    readonly property color cardChipColor: nested ? Theme.withAlpha(Theme.onSurface, Theme.stateLayerFocus) : Theme.chipSurface
+    readonly property color cardChipColor: nested ? Theme.withAlpha(Theme.onSurface, Theme.stateLayerFocus) : Theme.foregroundColor(Theme.chipSurface, Theme.isFloatingWindow(root))
     readonly property real expandedTargetHeight: {
         let total = groupHeader.height;
         for (const child of expandedContent.children) {

quickshell/Modules/Notifications/Popup/NotificationPopup.qml

@@ -691,7 +691,7 @@ PanelWindow {
                     NotificationCard {
                         id: notificationCard
                         surfaceColor: Theme.notificationFloatingSurface
-                        chipColor: Theme.chipSurface
+                        chipColor: Theme.notificationChipSurface
                         width: parent.width
                         height: win.inlineHeightAnimating ? Math.min(targetHeight, cardSurface.height - win.timeoutRailClearance) : targetHeight
                         notificationData: win.notificationData

quickshell/Modules/OSD/MediaPlaybackOSD.qml

@@ -262,7 +262,7 @@ DankOSD {
                 Rectangle {
                     anchors.fill: parent
                     radius: Theme.fullRadius(width, height)
-                    color: Theme.surface
+                    color: Theme.hostSurface
                     opacity: 0.3
                 }
             }

quickshell/Modules/OSD/OsdLevelRow.qml

@@ -26,7 +26,6 @@ Item {
     property bool sliderEnabled: true
     property string sliderSize: "xs"
     property bool vertical: false
-    property color thumbOutlineColor: Theme.hostSurface
     property real horizontalPadding: -1
 
     readonly property bool containsMouse: levelSlider.containsMouse || icon.hovered || endIcon.hovered
@@ -95,7 +94,6 @@ Item {
             showValue: false
             unit: root.unit
             fillColor: root.fillColor
-            thumbOutlineColor: root.thumbOutlineColor
             valueOverride: root.value
             onSliderValueChanged: newValue => root.sliderValueChanged(newValue)
 

quickshell/Modules/Plugins/DesktopPluginWrapper.qml

@@ -636,7 +636,7 @@ Item {
                 width: helperRow.implicitWidth + Theme.spacingM * 2
                 height: 32
                 radius: Theme.cornerRadius
-                color: Theme.surface
+                color: Theme.hostSurface
 
                 Row {
                     id: helperRow

quickshell/Modules/Plugins/SliderSetting.qml

@@ -67,7 +67,6 @@ Column {
         iconsClickable: root.iconsClickable
         unit: root.unit
         wheelEnabled: false
-        thumbOutlineColor: Theme.withAlpha(Theme.cardSurface, Theme.popupTransparency)
         onSliderValueChanged: newValue => {
             root.value = newValue;
         }

quickshell/Modules/Settings/AudioTab.qml

@@ -15,7 +15,9 @@ Item {
 
     property var outputDevices: []
     property var inputDevices: []
-    property bool showEditDialog: false
+    property var parentModal: null
+    property bool renameOpen: false
+    property bool renameMounted: false
     property var editingDevice: null
     property string editingDeviceType: ""
     property string newDeviceName: ""
@@ -25,6 +27,33 @@ Item {
     property bool showHiddenOutputDevices: false
     property bool showHiddenInputDevices: false
 
+    function openRenameDialog(device, type) {
+        if (renameOpen)
+            return;
+        editingDevice = device;
+        editingDeviceType = type;
+        newDeviceName = AudioService.displayName(device);
+        renameOpen = true;
+        renameMounted = true;
+        if (renameLoader.item)
+            renameLoader.item.show();
+    }
+
+    function closeRenameDialog() {
+        if (!renameOpen)
+            return;
+        renameOpen = false;
+        if (renameLoader.item)
+            renameLoader.item.opened = false;
+    }
+
+    function saveDeviceName() {
+        if (!editingDevice || newDeviceName.trim() === "")
+            return;
+        AudioService.setDeviceAlias(editingDevice.name, newDeviceName);
+        closeRenameDialog();
+    }
+
     function persistHiddenOutputDeviceNames(deviceNames) {
         const uniqueNames = [...new Set(deviceNames)];
         hiddenOutputDeviceNames = uniqueNames;
@@ -188,10 +217,7 @@ Item {
                         showHideButton: true
 
                         onEditRequested: device => {
-                            root.editingDevice = device;
-                            root.editingDeviceType = "output";
-                            root.newDeviceName = AudioService.displayName(device);
-                            root.showEditDialog = true;
+                            root.openRenameDialog(device, "output");
                         }
 
                         onHideRequested: device => {
@@ -356,10 +382,7 @@ Item {
                             showHideButton: true
 
                             onEditRequested: device => {
-                                root.editingDevice = device;
-                                root.editingDeviceType = "input";
-                                root.newDeviceName = AudioService.displayName(device);
-                                root.showEditDialog = true;
+                                root.openRenameDialog(device, "input");
                             }
 
                             onHideRequested: device => {
@@ -452,7 +475,7 @@ Item {
     Rectangle {
         id: loadingOverlay
         anchors.fill: parent
-        color: Theme.withAlpha(Theme.surface, 0.9)
+        color: Theme.withAlpha(Theme.hostSurface, 0.9)
         visible: root.isReloadingAudio
         z: 100
 
@@ -460,30 +483,9 @@ Item {
             anchors.centerIn: parent
             spacing: Theme.spacingL
 
-            Rectangle {
-                width: 80
-                height: 80
-                radius: Theme.fullRadius(width, height)
-                color: Theme.primaryContainer
+            DankLoadingIndicator {
+                contained: true
                 anchors.horizontalCenter: parent.horizontalCenter
-
-                DankIcon {
-                    id: spinningIcon
-                    name: "refresh"
-                    size: 40
-                    color: Theme.accentOnPrimaryContainer
-                    anchors.centerIn: parent
-                    smoothTransform: loadingOverlay.visible
-
-                    RotationAnimator {
-                        target: spinningIcon
-                        from: 0
-                        to: 360
-                        duration: 1500
-                        loops: Animation.Infinite
-                        running: loadingOverlay.visible
-                    }
-                }
             }
 
             Column {
@@ -509,220 +511,83 @@ Item {
             }
         }
 
-        Behavior on opacity {
-            NumberAnimation {
-                duration: Theme.shortDuration
-                easing.type: Theme.standardEasing
-            }
-        }
     }
 
-    Rectangle {
-        id: dialogOverlay
+    Loader {
+        id: renameLoader
+        parent: root.parentModal?.modalFocusScope ?? root
         anchors.fill: parent
-        visible: root.showEditDialog
-        color: Theme.withAlpha(Theme.surface, 0.8)
         z: 1000
+        active: root.renameMounted
+        onLoaded: item.show()
 
-        MouseArea {
-            anchors.fill: parent
-            onClicked: {
-                root.showEditDialog = false;
-            }
-        }
+        sourceComponent: DankDialog {
+            id: renameDialog
 
-        Rectangle {
-            id: editDialog
-            anchors.centerIn: parent
-            width: Math.min(500, parent.width - Theme.spacingL * 4)
-            height: dialogContent.implicitHeight + Theme.spacingL * 2
-            radius: Theme.cornerRadius
-            color: Theme.floatingWindowNestedSurface
-            border.width: Theme.layerOutlineWidth
-            border.color: Theme.outlineMedium
-
-            MouseArea {
-                anchors.fill: parent
-                onClicked: {}
+            embedded: nativeWindow
+            opened: nativeWindow
+            maximumWidth: SettingsMetrics.formDialogWidth
+            surfaceColor: Theme.hostSurface
+            title: I18n.tr("Set custom device name")
+            supportingText: root.editingDevice?.name ?? ""
+            acceptEnabled: root.newDeviceName.trim() !== ""
+            onAccepted: root.saveDeviceName()
+            onRejected: root.closeRenameDialog()
+            onActiveChanged: {
+                if (!active && !root.renameOpen)
+                    root.renameMounted = false;
             }
 
-            Column {
-                id: dialogContent
-                anchors.fill: parent
-                anchors.margins: Theme.spacingL
-                spacing: Theme.spacingL
+            function show() {
+                nameInput.text = root.newDeviceName;
+                opened = true;
+                forceActiveFocus();
+                nameInput.forceActiveFocus();
+                nameInput.selectAll();
+            }
 
-                Row {
-                    width: parent.width
-                    spacing: Theme.spacingM
-
-                    DankIcon {
-                        name: root.editingDeviceType === "input" ? "mic" : "speaker"
-                        size: Theme.iconSizeLarge
-                        color: Theme.primary
-                        anchors.verticalCenter: parent.verticalCenter
-                    }
-
-                    Column {
-                        width: parent.width - Theme.iconSize - Theme.spacingM - 8
-                        spacing: Theme.spacingXS
-
-                        StyledText {
-                            text: I18n.tr("Set custom device name")
-                            font.pixelSize: Theme.fontSizeLarge
-                            font.weight: Theme.fontWeightMedium
-                            color: Theme.surfaceText
-                            width: parent.width
-                            wrapMode: Text.Wrap
-                            horizontalAlignment: Text.AlignLeft
-                        }
-
-                        StyledText {
-                            text: root.editingDevice?.name ?? ""
-                            font.pixelSize: Theme.fontSizeSmall
-                            color: Theme.surfaceVariantText
-                            width: parent.width
-                            elide: Text.ElideRight
-                            horizontalAlignment: Text.AlignLeft
-                        }
-
-                        StyledText {
-                            visible: AudioService.hasDeviceAlias(root.editingDevice?.name ?? "")
-                            text: I18n.tr("Original: %1", "Shows the original device name before renaming").arg(AudioService.originalName(root.editingDevice))
-                            font.pixelSize: Theme.fontSizeSmall
-                            color: Theme.surfaceVariantText
-                            width: parent.width
-                            elide: Text.ElideRight
-                            opacity: 0.7
-                            horizontalAlignment: Text.AlignLeft
-                        }
-                    }
+            actions: [
+                DankButton {
+                    text: I18n.tr("Cancel")
+                    backgroundColor: "transparent"
+                    textColor: Theme.primary
+                    onClicked: renameDialog.rejected()
+                },
+                DankButton {
+                    text: I18n.tr("Save")
+                    iconName: "check"
+                    enabled: renameDialog.acceptEnabled
+                    onClicked: root.saveDeviceName()
                 }
+            ]
 
-                Column {
-                    width: parent.width
-                    spacing: Theme.spacingM
+            StyledText {
+                visible: AudioService.hasDeviceAlias(root.editingDevice?.name ?? "")
+                text: I18n.tr("Original: %1", "Shows the original device name before renaming").arg(AudioService.originalName(root.editingDevice))
+                font.pixelSize: Theme.fontSizeSmall
+                color: Theme.surfaceVariantText
+                width: parent.width
+                elide: Text.ElideRight
+                horizontalAlignment: Text.AlignLeft
+            }
 
-                    DankTextField {
-                        id: nameInput
-                        outlined: true
-                        leftIconName: "edit"
-                        labelText: I18n.tr("Custom name")
-                        width: parent.width
-                        text: root.newDeviceName
-                        showClearButton: true
+            DankTextField {
+                id: nameInput
+                outlined: true
+                leftIconName: root.editingDeviceType === "input" ? "mic" : "speaker"
+                labelText: I18n.tr("Custom name")
+                width: parent.width
+                showClearButton: true
+                onTextChanged: root.newDeviceName = text
+            }
 
-                        onTextChanged: {
-                            root.newDeviceName = text;
-                        }
-
-                        Keys.onReturnPressed: {
-                            if (text.trim() !== "") {
-                                saveButtonMouseArea.clicked(null);
-                            }
-                        }
-
-                        Keys.onEscapePressed: {
-                            root.showEditDialog = false;
-                        }
-
-                        Component.onCompleted: {
-                            Qt.callLater(() => {
-                                forceActiveFocus();
-                                selectAll();
-                            });
-                        }
-                    }
-
-                    StyledText {
-                        width: parent.width
-                        text: I18n.tr("Press Enter and the audio system will restart to apply the change", "Audio device rename dialog hint")
-                        font.pixelSize: Theme.fontSizeSmall
-                        color: Theme.surfaceVariantText
-                        wrapMode: Text.WordWrap
-                        horizontalAlignment: Text.AlignLeft
-                    }
-                }
-
-                Row {
-                    LayoutMirroring.enabled: false
-                    width: parent.width
-                    spacing: Theme.spacingM
-                    layoutDirection: Qt.RightToLeft
-
-                    Rectangle {
-                        id: saveButton
-                        width: saveButtonContent.width + Theme.spacingL * 2
-                        height: Theme.iconButtonSize
-                        radius: Theme.cornerRadius
-                        color: saveButtonMouseArea.containsMouse ? Theme.blend(Theme.primary, Theme.onPrimary, Theme.stateLayerHover) : Theme.primary
-                        enabled: root.newDeviceName.trim() !== ""
-                        opacity: enabled ? 1.0 : 0.5
-
-                        Row {
-                            id: saveButtonContent
-                            anchors.centerIn: parent
-                            spacing: Theme.spacingS
-
-                            DankIcon {
-                                name: "check"
-                                size: Theme.iconSizeMedium
-                                color: Theme.onPrimary
-                                anchors.verticalCenter: parent.verticalCenter
-                            }
-
-                            StyledText {
-                                text: I18n.tr("Save")
-                                font.pixelSize: Theme.fontSizeMedium
-                                font.weight: Theme.fontWeightMedium
-                                color: Theme.onPrimary
-                                anchors.verticalCenter: parent.verticalCenter
-                            }
-                        }
-
-                        MouseArea {
-                            id: saveButtonMouseArea
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            cursorShape: Qt.PointingHandCursor
-                            enabled: parent.enabled
-                            onClicked: {
-                                if (root.editingDevice && root.newDeviceName.trim() !== "") {
-                                    AudioService.setDeviceAlias(root.editingDevice.name, root.newDeviceName);
-                                    root.showEditDialog = false;
-                                }
-                            }
-                        }
-                    }
-
-                    Rectangle {
-                        width: cancelButtonText.width + Theme.spacingL * 2
-                        height: Theme.iconButtonSize
-                        radius: Theme.cornerRadius
-                        color: cancelButtonMouseArea.containsMouse ? Theme.surfaceHover : Theme.withAlpha(Theme.surfaceHover, 0)
-                        border.width: Theme.outlineWidth
-                        border.color: Theme.outline
-
-                        StyledText {
-                            id: cancelButtonText
-                            text: I18n.tr("Cancel")
-                            font.pixelSize: Theme.fontSizeMedium
-                            font.weight: Theme.fontWeightMedium
-                            color: Theme.surfaceText
-                            anchors.centerIn: parent
-                        }
-
-                        MouseArea {
-                            id: cancelButtonMouseArea
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            cursorShape: Qt.PointingHandCursor
-                            onClicked: {
-                                root.showEditDialog = false;
-                            }
-                        }
-                    }
-                }
+            StyledText {
+                width: parent.width
+                text: I18n.tr("Press Enter and the audio system will restart to apply the change", "Audio device rename dialog hint")
+                font.pixelSize: Theme.fontSizeSmall
+                color: Theme.surfaceVariantText
+                wrapMode: Text.WordWrap
+                horizontalAlignment: Text.AlignLeft
             }
         }
     }

quickshell/Modules/Settings/BatteryTab.qml

@@ -132,12 +132,12 @@ done
 
                     Item {
                         width: parent.width
-                        height: 4
+                        height: Theme.spacingXS
 
                         Rectangle {
                             anchors.fill: parent
                             radius: Theme.fullRadius(width, height)
-                            color: Theme.withAlpha(Theme.primary, 0.16)
+                            color: Theme.withAlpha(root.batteryStatusColor, Theme.tonalTintAlpha)
                         }
 
                         Rectangle {

quickshell/Modules/Settings/ClipboardTab.qml

@@ -259,34 +259,10 @@ Item {
     SettingsPage {
         id: mainColumn
 
-        Rectangle {
-            width: parent.width
-            height: warningContent.implicitHeight + Theme.spacingM * 2
-            radius: Theme.cornerRadius
-            color: Theme.warningHover
+        SettingsNoteRow {
+            paintBackground: false
             visible: !DMSService.isConnected || configError
-
-            Row {
-                id: warningContent
-                anchors.fill: parent
-                anchors.margins: Theme.spacingM
-                spacing: Theme.spacingM
-
-                DankIcon {
-                    name: "info"
-                    size: Theme.iconSizeSmall
-                    color: Theme.warning
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-
-                StyledText {
-                    font.pixelSize: Theme.fontSizeSmall
-                    text: !DMSService.isConnected ? I18n.tr("DMS service is not connected. Clipboard settings are unavailable.") : I18n.tr("Failed to load clipboard configuration.")
-                    wrapMode: Text.WordWrap
-                    width: parent.width - Theme.iconSizeSmall - Theme.spacingM
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-            }
+            text: !DMSService.isConnected ? I18n.tr("DMS service is not connected. Clipboard settings are unavailable.") : I18n.tr("Failed to load clipboard configuration.")
         }
 
         SettingsCard {

quickshell/Modules/Settings/DesktopWidgetBrowser.qml

@@ -31,19 +31,17 @@ WidgetPickerWindow {
     Component {
         id: tileDelegate
 
-        Rectangle {
+        DankListItem {
             id: delegateRoot
 
             required property var modelData
             required property int index
 
             width: ListView.view.width
-            height: 72
-            radius: Theme.cornerRadius
-            property bool isSelected: root.keyboardNavigationActive && index === root.selectedIndex
-            color: isSelected ? Theme.selectedContainer : widgetArea.containsMouse ? Theme.primaryHover : Theme.floatingWindowNestedSurface
-            border.color: Theme.outlineMedium
-            border.width: Theme.layerOutlineWidth
+            implicitHeight: Theme.listItemTwoLineHeight
+            isSelected: root.keyboardNavigationActive && index === root.selectedIndex
+            Accessible.name: modelData.name || modelData.id
+            onClicked: root.addWidget(delegateRoot.modelData)
 
             Row {
                 anchors.fill: parent
@@ -51,10 +49,10 @@ WidgetPickerWindow {
                 spacing: Theme.spacingM
 
                 Rectangle {
-                    width: 44
-                    height: 44
+                    width: Theme.avatarSize
+                    height: Theme.avatarSize
                     radius: Theme.cornerRadius
-                    color: Theme.primarySelected
+                    color: Theme.withAlpha(Theme.primary, Theme.tonalTintAlpha)
                     anchors.verticalCenter: parent.verticalCenter
 
                     DankIcon {
@@ -68,7 +66,7 @@ WidgetPickerWindow {
                 Column {
                     anchors.verticalCenter: parent.verticalCenter
                     spacing: Theme.spacingXXS
-                    width: parent.width - 44 - Theme.iconSize - Theme.spacingM * 3
+                    width: parent.width - Theme.avatarSize - Theme.iconSizeMedium - Theme.spacingM * 3
 
                     Row {
                         spacing: Theme.spacingS
@@ -80,53 +78,19 @@ WidgetPickerWindow {
                             color: Theme.surfaceText
                         }
 
-                        Rectangle {
+                        PluginBadge {
                             visible: delegateRoot.modelData.featured || false
-                            width: featuredWidgetRow.implicitWidth + Theme.spacingXS * 2
-                            height: 18
-                            radius: Theme.fullRadius(width, height)
-                            color: Theme.withAlpha(Theme.secondary, 0.15)
-                            border.color: Theme.withAlpha(Theme.secondary, 0.4)
-                            border.width: Theme.outlineWidth
+                            iconName: "star"
+                            label: I18n.tr("featured")
+                            tone: Theme.secondary
                             anchors.verticalCenter: parent.verticalCenter
-
-                            Row {
-                                id: featuredWidgetRow
-                                anchors.centerIn: parent
-                                spacing: Theme.spacingXXS
-
-                                DankIcon {
-                                    name: "star"
-                                    size: 10
-                                    color: Theme.secondary
-                                    anchors.verticalCenter: parent.verticalCenter
-                                }
-
-                                StyledText {
-                                    anchors.verticalCenter: parent.verticalCenter
-                                    text: I18n.tr("featured")
-                                    font.pixelSize: Theme.fontSizeSmall - 2
-                                    color: Theme.secondary
-                                    font.weight: Theme.fontWeightMedium
-                                }
-                            }
                         }
 
-                        Rectangle {
+                        PluginBadge {
                             visible: delegateRoot.modelData.type === "plugin"
-                            width: pluginLabel.implicitWidth + Theme.spacingXS * 2
-                            height: 18
-                            radius: Theme.fullRadius(width, height)
-                            color: Theme.withAlpha(Theme.secondary, 0.15)
+                            label: I18n.tr("Plugin")
+                            tone: Theme.secondary
                             anchors.verticalCenter: parent.verticalCenter
-
-                            StyledText {
-                                id: pluginLabel
-                                anchors.centerIn: parent
-                                text: I18n.tr("Plugin")
-                                font.pixelSize: Theme.fontSizeSmall - 2
-                                color: Theme.secondary
-                            }
                         }
                     }
 
@@ -149,22 +113,6 @@ WidgetPickerWindow {
                     anchors.verticalCenter: parent.verticalCenter
                 }
             }
-
-            MouseArea {
-                id: widgetArea
-
-                anchors.fill: parent
-                hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor
-                onClicked: root.addWidget(delegateRoot.modelData)
-            }
-
-            Behavior on color {
-                ColorAnimation {
-                    duration: Theme.shortDuration
-                    easing.type: Theme.standardEasing
-                }
-            }
         }
     }
 }

quickshell/Modules/Settings/DesktopWidgetGroupSection.qml

@@ -85,17 +85,17 @@ Column {
             id: emptyDropZone
             width: parent.width
             height: Theme.listItemHeight
-            radius: Theme.cornerRadius
+            radius: Theme.groupedListOuterRadius
             visible: section.dragActive && section.instances.length === 0
             color: section.isDropTarget ? Theme.selectedContainer : "transparent"
-            border.width: Theme.layerOutlineWidth
+            border.width: Theme.outlineWidth
             border.color: section.isDropTarget ? Theme.primary : Theme.outline
 
             StyledText {
                 anchors.centerIn: parent
                 text: I18n.tr("Drop here")
                 font.pixelSize: Theme.fontSizeSmall
-                color: section.isDropTarget ? Theme.primary : Theme.surfaceVariantText
+                color: section.isDropTarget ? Theme.onSelectedContainer : Theme.surfaceVariantText
             }
         }
     }

quickshell/Modules/Settings/DesktopWidgetsTab.qml

@@ -307,137 +307,24 @@ Item {
             title: I18n.tr("Help", "noun, card title for desktop widget usage tips")
 
             SettingsRow {
-                body: Column {
-                    width: parent.width
-                    spacing: Theme.spacingM
+                iconName: "drag_pan"
+                iconBox: true
+                title: I18n.tr("Move", "verb, help item title for moving a desktop widget")
+                subtitle: I18n.tr("Right-click and drag anywhere on the widget")
+            }
 
-                    Row {
-                        width: parent.width
-                        spacing: Theme.spacingM
+            SettingsRow {
+                iconName: "open_in_full"
+                iconBox: true
+                title: I18n.tr("Resize", "verb, help item title for resizing a desktop widget")
+                subtitle: I18n.tr("Right-click and drag the bottom-right corner")
+            }
 
-                        Rectangle {
-                            width: 40
-                            height: 40
-                            radius: Theme.fullRadius(width, height)
-                            color: Theme.primarySelected
-
-                            DankIcon {
-                                anchors.centerIn: parent
-                                name: "drag_pan"
-                                size: Theme.iconSize
-                                color: Theme.primary
-                            }
-                        }
-
-                        Column {
-                            spacing: Theme.spacingXXS
-                            anchors.verticalCenter: parent.verticalCenter
-                            width: parent.width - 40 - Theme.spacingM
-
-                            StyledText {
-                                text: I18n.tr("Move", "verb, help item title for moving a desktop widget")
-                                font.pixelSize: Theme.fontSizeMedium
-                                font.weight: Theme.fontWeightMedium
-                                color: Theme.surfaceText
-                                width: parent.width
-                                horizontalAlignment: Text.AlignLeft
-                            }
-
-                            StyledText {
-                                text: I18n.tr("Right-click and drag anywhere on the widget")
-                                font.pixelSize: Theme.fontSizeSmall
-                                color: Theme.surfaceVariantText
-                                width: parent.width
-                                horizontalAlignment: Text.AlignLeft
-                            }
-                        }
-                    }
-
-                    Row {
-                        width: parent.width
-                        spacing: Theme.spacingM
-
-                        Rectangle {
-                            width: 40
-                            height: 40
-                            radius: Theme.fullRadius(width, height)
-                            color: Theme.primarySelected
-
-                            DankIcon {
-                                anchors.centerIn: parent
-                                name: "open_in_full"
-                                size: Theme.iconSize
-                                color: Theme.primary
-                            }
-                        }
-
-                        Column {
-                            spacing: Theme.spacingXXS
-                            anchors.verticalCenter: parent.verticalCenter
-                            width: parent.width - 40 - Theme.spacingM
-
-                            StyledText {
-                                text: I18n.tr("Resize", "verb, help item title for resizing a desktop widget")
-                                font.pixelSize: Theme.fontSizeMedium
-                                font.weight: Theme.fontWeightMedium
-                                color: Theme.surfaceText
-                                width: parent.width
-                                horizontalAlignment: Text.AlignLeft
-                            }
-
-                            StyledText {
-                                text: I18n.tr("Right-click and drag the bottom-right corner")
-                                font.pixelSize: Theme.fontSizeSmall
-                                color: Theme.surfaceVariantText
-                                width: parent.width
-                                horizontalAlignment: Text.AlignLeft
-                            }
-                        }
-                    }
-
-                    Row {
-                        width: parent.width
-                        spacing: Theme.spacingM
-
-                        Rectangle {
-                            width: 40
-                            height: 40
-                            radius: Theme.fullRadius(width, height)
-                            color: Theme.primarySelected
-
-                            DankIcon {
-                                anchors.centerIn: parent
-                                name: "drag_indicator"
-                                size: Theme.iconSize
-                                color: Theme.primary
-                            }
-                        }
-
-                        Column {
-                            spacing: Theme.spacingXXS
-                            anchors.verticalCenter: parent.verticalCenter
-                            width: parent.width - 40 - Theme.spacingM
-
-                            StyledText {
-                                text: I18n.tr("Reorder & group")
-                                font.pixelSize: Theme.fontSizeMedium
-                                font.weight: Theme.fontWeightMedium
-                                color: Theme.surfaceText
-                                width: parent.width
-                                horizontalAlignment: Text.AlignLeft
-                            }
-
-                            StyledText {
-                                text: I18n.tr("Drag a widget by its handle here to reorder it or drop it into another group")
-                                font.pixelSize: Theme.fontSizeSmall
-                                color: Theme.surfaceVariantText
-                                width: parent.width
-                                wrapMode: Text.WordWrap
-                                horizontalAlignment: Text.AlignLeft
-                            }
-                        }
-                    }
-                }
+            SettingsRow {
+                iconName: "drag_indicator"
+                iconBox: true
+                title: I18n.tr("Reorder & group")
+                subtitle: I18n.tr("Drag a widget by its handle here to reorder it or drop it into another group")
             }
         }
 

quickshell/Modules/Settings/LockScreenTab.qml

@@ -708,30 +708,23 @@ Item {
                     const prefs = SettingsData.screenPreferences?.lockScreen;
                     return Array.isArray(prefs) && !prefs.includes("all") && prefs.length > 0;
                 }
+                clickable: true
+                onClicked: {
+                    if (!PopoutService.colorPickerModal)
+                        return;
+                    PopoutService.colorPickerModal.selectedColor = SettingsData.lockScreenInactiveColor;
+                    PopoutService.colorPickerModal.pickerTitle = I18n.tr("Inactive display color");
+                    PopoutService.colorPickerModal.onColorSelectedCallback = function (selectedColor) {
+                        SettingsData.set("lockScreenInactiveColor", selectedColor);
+                    };
+                    PopoutService.colorPickerModal.show();
+                }
 
-                Rectangle {
-                    width: Theme.iconButtonSize
-                    height: Theme.iconButtonSize
-                    radius: Theme.cornerRadius
-                    color: SettingsData.lockScreenInactiveColor
-                    border.color: Theme.outline
-                    border.width: Theme.outlineWidth
+                DankColorSwatch {
+                    width: Theme.iconSizeMedium
+                    height: width
+                    swatchColor: SettingsData.lockScreenInactiveColor
                     anchors.verticalCenter: parent.verticalCenter
-
-                    MouseArea {
-                        anchors.fill: parent
-                        cursorShape: Qt.PointingHandCursor
-                        onClicked: {
-                            if (!PopoutService.colorPickerModal)
-                                return;
-                            PopoutService.colorPickerModal.selectedColor = SettingsData.lockScreenInactiveColor;
-                            PopoutService.colorPickerModal.pickerTitle = I18n.tr("Inactive display color");
-                            PopoutService.colorPickerModal.onColorSelectedCallback = function (selectedColor) {
-                                SettingsData.set("lockScreenInactiveColor", selectedColor);
-                            };
-                            PopoutService.colorPickerModal.show();
-                        }
-                    }
                 }
             }
         }

quickshell/Modules/Settings/NetworkCellularTab.qml

@@ -96,7 +96,7 @@ Item {
                                 width: parent.width
                                 height: 56
                                 radius: Theme.cornerRadius
-                                color: isConnected ? Theme.selectedContainer : modemMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.floatingWindowNestedSurface
+                                color: isConnected ? Theme.selectedContainer : modemMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.floatingWindowFieldColor
                                 border.width: Theme.layerOutlineWidth
                                 border.color: Theme.outlineMedium
 
@@ -152,36 +152,17 @@ Item {
                                     anchors.verticalCenter: parent.verticalCenter
                                     spacing: Theme.spacingXS
 
-                                    Rectangle {
-                                        width: 28
-                                        height: 28
-                                        radius: Theme.cornerRadiusL
-                                        color: modemActionBtn.containsMouse ? (modemDelegate.isConnected ? Theme.errorHover : Theme.primaryHover) : "transparent"
-
-                                        DankIcon {
-                                            anchors.centerIn: parent
-                                            name: modemDelegate.isConnected ? "link_off" : "link"
-                                            size: 18
-                                            color: modemActionBtn.containsMouse ? (modemDelegate.isConnected ? Theme.error : Theme.primary) : Theme.surfaceVariantText
-                                        }
-
-                                        MouseArea {
-                                            id: modemActionBtn
-                                            anchors.fill: parent
-                                            hoverEnabled: true
-                                            cursorShape: Qt.PointingHandCursor
-                                            onClicked: {
-                                                if (modemDelegate.isConnected)
-                                                    NetworkService.disconnectCellularDevice(modelData.name);
-                                                else
-                                                    NetworkService.connectCellular();
-                                            }
-                                        }
-
-                                        DankTooltipHost {
-                                            text: modemDelegate.isConnected ? I18n.tr("Disconnect") : I18n.tr("Connect")
-                                            target: parent
-                                            hoverArea: modemActionBtn
+                                    DankActionButton {
+                                        buttonSize: Theme.buttonHeightXXS
+                                        iconName: modemDelegate.isConnected ? "link_off" : "link"
+                                        iconColor: Theme.surfaceVariantText
+                                        stateColor: modemDelegate.isConnected ? Theme.error : Theme.primary
+                                        tooltipText: modemDelegate.isConnected ? I18n.tr("Disconnect") : I18n.tr("Connect")
+                                        onClicked: {
+                                            if (modemDelegate.isConnected)
+                                                NetworkService.disconnectCellularDevice(modelData.name);
+                                            else
+                                                NetworkService.connectCellular();
                                         }
                                     }
                                 }
@@ -231,7 +212,7 @@ Item {
                             width: parent.width
                             height: 56
                             radius: Theme.cornerRadius
-                            color: isActive ? Theme.selectedContainer : profileMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.floatingWindowNestedSurface
+                            color: isActive ? Theme.selectedContainer : profileMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.floatingWindowFieldColor
                             border.color: Theme.outlineMedium
                             border.width: Theme.layerOutlineWidth
 

quickshell/Modules/Settings/NetworkEthernetTab.qml

@@ -84,7 +84,7 @@ Item {
                                 width: parent.width
                                 height: isExpanded ? 56 + ethExpandedContent.height : 56
                                 radius: Theme.cornerRadius
-                                color: isConnected ? Theme.selectedContainer : ethDeviceMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.floatingWindowNestedSurface
+                                color: isConnected ? Theme.selectedContainer : ethDeviceMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.floatingWindowFieldColor
                                 border.width: Theme.layerOutlineWidth
                                 border.color: Theme.outlineMedium
                                 clip: true
@@ -172,65 +172,30 @@ Item {
                                             anchors.verticalCenter: parent.verticalCenter
                                             spacing: Theme.spacingXS
 
-                                            Rectangle {
-                                                Accessible.role: Accessible.Button
-                                                Accessible.name: isExpanded ? I18n.tr("Collapse") : I18n.tr("Expand")
-                                                width: 28
-                                                height: 28
-                                                radius: Theme.cornerRadiusL
-                                                color: ethExpandBtn.containsMouse ? Theme.surfacePressed : Theme.withAlpha(Theme.surfacePressed, 0)
+                                            DankActionButton {
+                                                buttonSize: Theme.buttonHeightXXS
+                                                iconName: isExpanded ? "expand_less" : "expand_more"
+                                                iconColor: Theme.surfaceText
+                                                tooltipText: isExpanded ? I18n.tr("Collapse") : I18n.tr("Expand")
                                                 visible: isConnected
-
-                                                DankIcon {
-                                                    anchors.centerIn: parent
-                                                    name: isExpanded ? "expand_less" : "expand_more"
-                                                    size: 18
-                                                    color: Theme.surfaceText
-                                                }
-
-                                                MouseArea {
-                                                    id: ethExpandBtn
-                                                    anchors.fill: parent
-                                                    hoverEnabled: true
-                                                    cursorShape: Qt.PointingHandCursor
-                                                    onClicked: {
-                                                        if (isExpanded) {
-                                                            root.expandedEthDevice = "";
-                                                        } else {
-                                                            root.expandedEthDevice = modelData.name;
-                                                            NetworkService.fetchWiredNetworkInfo(NetworkService.ethernetConnectionUuid);
-                                                        }
+                                                onClicked: {
+                                                    if (isExpanded) {
+                                                        root.expandedEthDevice = "";
+                                                    } else {
+                                                        root.expandedEthDevice = modelData.name;
+                                                        NetworkService.fetchWiredNetworkInfo(NetworkService.ethernetConnectionUuid);
                                                     }
                                                 }
                                             }
 
-                                            Rectangle {
-                                                width: 28
-                                                height: 28
-                                                radius: Theme.cornerRadiusL
-                                                color: ethDisconnectBtn.containsMouse ? Theme.errorHover : Theme.withAlpha(Theme.errorHover, 0)
+                                            DankActionButton {
+                                                buttonSize: Theme.buttonHeightXXS
+                                                iconName: "link_off"
+                                                iconColor: Theme.surfaceVariantText
+                                                stateColor: Theme.error
+                                                tooltipText: I18n.tr("Disconnect")
                                                 visible: isConnected
-
-                                                DankIcon {
-                                                    anchors.centerIn: parent
-                                                    name: "link_off"
-                                                    size: 18
-                                                    color: ethDisconnectBtn.containsMouse ? Theme.error : Theme.surfaceVariantText
-                                                }
-
-                                                MouseArea {
-                                                    id: ethDisconnectBtn
-                                                    anchors.fill: parent
-                                                    hoverEnabled: true
-                                                    cursorShape: Qt.PointingHandCursor
-                                                    onClicked: NetworkService.disconnectEthernetDevice(modelData.name)
-                                                }
-
-                                                DankTooltipHost {
-                                                    text: I18n.tr("Disconnect")
-                                                    target: parent
-                                                    hoverArea: ethDisconnectBtn
-                                                }
+                                                onClicked: NetworkService.disconnectEthernetDevice(modelData.name)
                                             }
                                         }
 
@@ -373,7 +338,7 @@ Item {
                                 width: parent.width
                                 height: 48
                                 radius: Theme.cornerRadius
-                                color: modelData.isActive ? Theme.selectedContainer : wiredMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.floatingWindowNestedSurface
+                                color: modelData.isActive ? Theme.selectedContainer : wiredMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.floatingWindowFieldColor
                                 border.width: Theme.layerOutlineWidth
                                 border.color: Theme.outlineMedium
 

quickshell/Modules/Settings/NetworkStatusTab.qml

@@ -65,9 +65,9 @@ Item {
                             spacing: Theme.spacingS
 
                             Rectangle {
-                                width: 8
-                                height: 8
-                                radius: Theme.cornerRadiusXS
+                                width: Theme.spacingS
+                                height: Theme.spacingS
+                                radius: Theme.fullRadius(width, height)
                                 anchors.verticalCenter: parent.verticalCenter
                                 color: {
                                     switch (NetworkService.networkStatus) {

quickshell/Modules/Settings/NotificationRulesTab.qml

@@ -289,7 +289,7 @@ Item {
                                 }
 
                                 Item {
-                                    width: Math.max(0, parent.width - parent.spacing - mutedAppLabel.width - unmuteBtn.width - mutedDeleteBtn.width - Theme.spacingS * 5)
+                                    width: Math.max(0, parent.width - mutedAppLabel.width - unmuteBtn.width - parent.spacing * 2)
                                     height: 1
                                 }
 
@@ -300,36 +300,6 @@ Item {
                                     textColor: Theme.primary
                                     onClicked: SettingsData.removeNotificationRule(modelData.index)
                                 }
-
-                                Item {
-                                    id: mutedDeleteBtn
-                                    Accessible.role: Accessible.Button
-                                    Accessible.name: I18n.tr("Remove")
-                                    width: 28
-                                    height: 28
-                                    anchors.verticalCenter: parent.verticalCenter
-
-                                    Rectangle {
-                                        anchors.fill: parent
-                                        radius: Theme.cornerRadius
-                                        color: mutedDeleteArea.containsMouse ? Theme.withAlpha(Theme.error, 0.2) : Theme.withAlpha(Theme.error, 0)
-                                    }
-
-                                    DankIcon {
-                                        anchors.centerIn: parent
-                                        name: "delete"
-                                        size: 18
-                                        color: mutedDeleteArea.containsMouse ? Theme.error : Theme.surfaceVariantText
-                                    }
-
-                                    MouseArea {
-                                        id: mutedDeleteArea
-                                        anchors.fill: parent
-                                        hoverEnabled: true
-                                        cursorShape: Qt.PointingHandCursor
-                                        onClicked: SettingsData.removeNotificationRule(modelData.index)
-                                    }
-                                }
                             }
                         }
                     }

quickshell/Modules/Settings/PaletteInjectTab.qml

@@ -91,34 +91,14 @@ Item {
                                         onToggled: checked => PaletteInjectService.updatePalette(paletteItem.index, "enabled", checked)
                                     }
 
-                                    Item {
-                                        id: deleteBtn
-                                        Accessible.role: Accessible.Button
-                                        Accessible.name: I18n.tr("Remove")
-                                        width: 28
-                                        height: 28
+                                    DankActionButton {
+                                        buttonSize: Theme.buttonHeightXXS
+                                        iconName: "delete"
+                                        iconColor: Theme.surfaceVariantText
+                                        stateColor: Theme.error
+                                        tooltipText: I18n.tr("Remove")
                                         anchors.verticalCenter: parent.verticalCenter
-
-                                        Rectangle {
-                                            anchors.fill: parent
-                                            radius: Theme.cornerRadius
-                                            color: deleteArea.containsMouse ? Theme.withAlpha(Theme.error, 0.2) : Theme.withAlpha(Theme.error, 0)
-                                        }
-
-                                        DankIcon {
-                                            anchors.centerIn: parent
-                                            name: "delete"
-                                            size: 18
-                                            color: deleteArea.containsMouse ? Theme.error : Theme.surfaceVariantText
-                                        }
-
-                                        MouseArea {
-                                            id: deleteArea
-                                            anchors.fill: parent
-                                            hoverEnabled: true
-                                            cursorShape: Qt.PointingHandCursor
-                                            onClicked: PaletteInjectService.removePalette(paletteItem.index)
-                                        }
+                                        onClicked: PaletteInjectService.removePalette(paletteItem.index)
                                     }
                                 }
 

quickshell/Modules/Settings/PluginBadge.qml

@@ -8,7 +8,6 @@ Rectangle {
     property string label: ""
     property string iconName: ""
     property color tone: Theme.primary
-    property bool onImage: false
 
     height: Theme.iconSize
     width: content.implicitWidth + Theme.spacingS * 2

quickshell/Modules/Settings/PluginCard.qml

@@ -99,7 +99,6 @@ DankCard {
                     label: modelData.label
                     iconName: modelData.icon
                     tone: PluginService.badgeTone(modelData.tone)
-                    onImage: true
                 }
             }
         }
@@ -111,7 +110,6 @@ DankCard {
             iconName: "thumb_up"
             label: root.plugin.upvotes || 0
             tone: Theme.primary
-            onImage: true
             visible: !!root.plugin.issueUrl
         }
     }

quickshell/Modules/Settings/SoundsTab.qml

@@ -138,34 +138,10 @@ Item {
             }
         }
 
-        Rectangle {
-            width: parent.width
-            height: notAvailableText.implicitHeight + Theme.spacingM * 2
-            radius: Theme.cornerRadius
-            color: Theme.warningHover
+        SettingsNoteRow {
+            paintBackground: false
             visible: MultimediaService.unavailable
-
-            Row {
-                anchors.fill: parent
-                anchors.margins: Theme.spacingM
-                spacing: Theme.spacingM
-
-                DankIcon {
-                    name: "info"
-                    size: Theme.iconSizeSmall
-                    color: Theme.warning
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-
-                StyledText {
-                    id: notAvailableText
-                    font.pixelSize: Theme.fontSizeSmall
-                    text: I18n.tr("System sounds are not available. Install %1 for sound support.", "sounds settings warning, %1 is a package name").arg(root.multimediaPackage)
-                    wrapMode: Text.WordWrap
-                    width: parent.width - Theme.iconSizeSmall - Theme.spacingM
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-            }
+            text: I18n.tr("System sounds are not available. Install %1 for sound support.", "sounds settings warning, %1 is a package name").arg(root.multimediaPackage)
         }
     }
 }

quickshell/Modules/Settings/ThemeAppsTab.qml

@@ -46,33 +46,10 @@ Item {
     SettingsPage {
         id: mainColumn
 
-        Rectangle {
-            width: parent.width
-            height: warningText.implicitHeight + Theme.spacingM * 2
-            radius: Theme.cornerRadius
-            color: Theme.warningHover
-
-            Row {
-                anchors.fill: parent
-                anchors.margins: Theme.spacingM
-                spacing: Theme.spacingM
-
-                DankIcon {
-                    name: "info"
-                    size: Theme.iconSizeSmall
-                    color: Theme.warning
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-
-                StyledText {
-                    id: warningText
-                    font.pixelSize: Theme.fontSizeSmall
-                    text: I18n.tr("The below settings will modify your GTK and Qt settings. If you wish to preserve your current configurations, please back them up (qt5ct.conf|qt6ct.conf|qtengine/config.json and ~/.config/gtk-3.0|gtk-4.0).")
-                    wrapMode: Text.WordWrap
-                    width: parent.width - Theme.iconSizeSmall - Theme.spacingM
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-            }
+        SettingsNoteRow {
+            paintBackground: false
+            noteIconName: "info"
+            text: I18n.tr("The below settings will modify your GTK and Qt settings. If you wish to preserve your current configurations, please back them up (qt5ct.conf|qt6ct.conf|qtengine/config.json and ~/.config/gtk-3.0|gtk-4.0).")
         }
 
         SettingsCard {
@@ -88,72 +65,22 @@ Item {
                     width: parent.width
                     spacing: Theme.spacingM
 
-                    Rectangle {
+                    DankButton {
                         width: (parent.width - Theme.spacingM) / 2
-                        height: 48
-                        radius: Theme.cornerRadius
-                        color: Theme.primaryHover
-
-                        Row {
-                            anchors.centerIn: parent
-                            spacing: Theme.spacingS
-
-                            DankIcon {
-                                name: "settings"
-                                size: 16
-                                color: Theme.primary
-                                anchors.verticalCenter: parent.verticalCenter
-                            }
-
-                            StyledText {
-                                text: I18n.tr("Apply GTK colors")
-                                font.pixelSize: Theme.fontSizeMedium
-                                color: Theme.primary
-                                font.weight: Theme.fontWeightMedium
-                                anchors.verticalCenter: parent.verticalCenter
-                            }
-                        }
-
-                        MouseArea {
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            cursorShape: Qt.PointingHandCursor
-                            onClicked: Theme.applyGtkColors()
-                        }
+                        iconName: "settings"
+                        text: I18n.tr("Apply GTK colors")
+                        backgroundColor: Theme.secondaryContainer
+                        textColor: Theme.onSecondaryContainer
+                        onClicked: Theme.applyGtkColors()
                     }
 
-                    Rectangle {
+                    DankButton {
                         width: (parent.width - Theme.spacingM) / 2
-                        height: 48
-                        radius: Theme.cornerRadius
-                        color: Theme.primaryHover
-
-                        Row {
-                            anchors.centerIn: parent
-                            spacing: Theme.spacingS
-
-                            DankIcon {
-                                name: "settings"
-                                size: 16
-                                color: Theme.primary
-                                anchors.verticalCenter: parent.verticalCenter
-                            }
-
-                            StyledText {
-                                text: I18n.tr("Apply Qt colors")
-                                font.pixelSize: Theme.fontSizeMedium
-                                color: Theme.primary
-                                font.weight: Theme.fontWeightMedium
-                                anchors.verticalCenter: parent.verticalCenter
-                            }
-                        }
-
-                        MouseArea {
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            cursorShape: Qt.PointingHandCursor
-                            onClicked: Theme.applyQtColors()
-                        }
+                        iconName: "settings"
+                        text: I18n.tr("Apply Qt colors")
+                        backgroundColor: Theme.secondaryContainer
+                        textColor: Theme.onSecondaryContainer
+                        onClicked: Theme.applyQtColors()
                     }
                 }
             }

quickshell/Modules/Settings/ThemeColorsTab.qml

@@ -207,13 +207,13 @@ Item {
                         width: 120
                         height: 90
                         radius: Theme.cornerRadius
-                        color: Theme.floatingWindowNestedSurface
+                        color: Theme.floatingWindowFieldColor
                         border.width: Theme.layerOutlineWidth
                         border.color: Theme.outlineMedium
 
                         ClippingRectangle {
                             anchors.fill: parent
-                            anchors.margins: 1
+                            anchors.margins: Theme.outlineWidth
                             radius: Theme.cornerRadius - Theme.outlineWidth
                             color: "transparent"
 
@@ -237,7 +237,7 @@ Item {
 
                         Rectangle {
                             anchors.fill: parent
-                            anchors.margins: 1
+                            anchors.margins: Theme.outlineWidth
                             radius: Theme.cornerRadius - Theme.outlineWidth
                             color: Theme.wallpaperPath && Theme.wallpaperPath.startsWith("#") ? Theme.wallpaperPath : Theme.withAlpha(Theme.wallpaperPath, 0)
                             visible: Theme.wallpaperPath && Theme.wallpaperPath.startsWith("#")
@@ -535,7 +535,7 @@ Item {
                                 width: themeGrid.cardWidth
                                 height: themeGrid.cardHeight
                                 radius: Theme.cornerRadius
-                                color: Theme.floatingWindowNestedSurface
+                                color: Theme.floatingWindowFieldColor
                                 border.color: isActive ? Theme.primary : Theme.outlineMedium
                                 border.width: isActive ? Theme.outlineWidthFocused : Theme.layerOutlineWidth
                                 scale: isActive ? 1.03 : 1
@@ -583,14 +583,15 @@ Item {
                                     anchors.right: parent.right
                                     anchors.bottom: parent.bottom
                                     height: themeGrid.cardWidth < 120 ? 18 : 22
-                                    radius: Theme.cornerRadius
-                                    color: Qt.rgba(0, 0, 0, 0.6)
+                                    bottomLeftRadius: parent.radius
+                                    bottomRightRadius: parent.radius
+                                    color: Theme.withAlpha(Theme.scrimColor, Theme.scrimAlpha)
 
                                     StyledText {
                                         anchors.centerIn: parent
                                         text: modelData.name
                                         font.pixelSize: themeGrid.cardWidth < 120 ? Theme.fontSizeSmall - 2 : Theme.fontSizeSmall
-                                        color: "white"
+                                        color: Theme.contrastLight
                                         font.weight: Theme.fontWeightMedium
                                         elide: Text.ElideRight
                                         width: parent.width - Theme.spacingXS * 2
@@ -604,7 +605,7 @@ Item {
                                     anchors.margins: themeGrid.cardWidth < 120 ? 2 : 4
                                     width: themeGrid.cardWidth < 120 ? 16 : 20
                                     height: width
-                                    radius: width / 2
+                                    radius: Theme.fullRadius(width, height)
                                     color: Theme.primary
                                     visible: themeCard.isActive
 
@@ -612,30 +613,21 @@ Item {
                                         anchors.centerIn: parent
                                         name: "check"
                                         size: themeGrid.cardWidth < 120 ? 10 : 14
-                                        color: Theme.surface
+                                        color: Theme.onPrimary
                                     }
                                 }
 
-                                Rectangle {
+                                DankBadge {
                                     anchors.top: parent.top
                                     anchors.left: parent.left
                                     anchors.margins: themeGrid.cardWidth < 120 ? 2 : 4
-                                    width: themeGrid.cardWidth < 120 ? 16 : 20
-                                    height: width
-                                    radius: width / 2
-                                    color: Theme.secondary
+                                    color: Theme.secondaryContainer
+                                    textColor: Theme.onSecondaryContainer
                                     visible: themeCard.hasVariants && !deleteButton.visible
-
-                                    StyledText {
-                                        anchors.centerIn: parent
-                                        text: {
-                                            if (themeCard.variants?.type === "multi")
-                                                return themeCard.variants?.accents?.length || 0;
-                                            return themeCard.variants?.options?.length || 0;
-                                        }
-                                        font.pixelSize: themeGrid.cardWidth < 120 ? Theme.fontSizeSmall - 4 : Theme.fontSizeSmall - 2
-                                        color: Theme.surface
-                                        font.weight: Theme.fontWeightMedium
+                                    text: {
+                                        if (themeCard.variants?.type === "multi")
+                                            return themeCard.variants?.accents?.length || 0;
+                                        return themeCard.variants?.options?.length || 0;
                                     }
                                 }
 
@@ -652,18 +644,19 @@ Item {
                                     }
                                 }
 
-                                Rectangle {
+                                DankActionButton {
                                     id: deleteButton
-                                    Accessible.role: Accessible.Button
-                                    Accessible.name: I18n.tr("Delete")
                                     anchors.top: parent.top
                                     anchors.left: parent.left
                                     anchors.margins: themeGrid.cardWidth < 120 ? 2 : 4
-                                    width: themeGrid.cardWidth < 120 ? 18 : 24
-                                    height: width
-                                    radius: width / 2
-                                    color: deleteMouseArea.containsMouse ? Theme.error : Qt.rgba(0, 0, 0, 0.6)
-                                    opacity: cardMouseArea.containsMouse || deleteMouseArea.containsMouse ? 1 : 0
+                                    buttonSize: themeGrid.cardWidth < 120 ? 18 : 24
+                                    iconName: "close"
+                                    iconSize: themeGrid.cardWidth < 120 ? 10 : 14
+                                    iconColor: Theme.contrastLight
+                                    backgroundColor: Theme.withAlpha(Theme.scrimColor, Theme.scrimAlpha)
+                                    stateColor: Theme.error
+                                    tooltipText: I18n.tr("Delete")
+                                    opacity: cardMouseArea.containsMouse || hovered ? 1 : 0
                                     visible: opacity > 0
 
                                     Behavior on opacity {
@@ -672,29 +665,16 @@ Item {
                                         }
                                     }
 
-                                    DankIcon {
-                                        anchors.centerIn: parent
-                                        name: "close"
-                                        size: themeGrid.cardWidth < 120 ? 10 : 14
-                                        color: "white"
-                                    }
-
-                                    MouseArea {
-                                        id: deleteMouseArea
-                                        anchors.fill: parent
-                                        hoverEnabled: true
-                                        cursorShape: Qt.PointingHandCursor
-                                        onClicked: {
-                                            ToastService.showInfo(I18n.tr("Uninstalling: %1", "uninstallation progress").arg(modelData.name));
-                                            DMSService.uninstallTheme(modelData.id, response => {
-                                                if (response.error) {
-                                                    ToastService.showError(I18n.tr("Uninstall failed: %1", "uninstallation error").arg(response.error));
-                                                    return;
-                                                }
-                                                ToastService.showInfo(I18n.tr("Uninstalled: %1", "uninstallation success").arg(modelData.name));
-                                                DMSService.listInstalledThemes();
-                                            });
-                                        }
+                                    onClicked: {
+                                        ToastService.showInfo(I18n.tr("Uninstalling: %1", "uninstallation progress").arg(modelData.name));
+                                        DMSService.uninstallTheme(modelData.id, response => {
+                                            if (response.error) {
+                                                ToastService.showError(I18n.tr("Uninstall failed: %1", "uninstallation error").arg(response.error));
+                                                return;
+                                            }
+                                            ToastService.showInfo(I18n.tr("Uninstalled: %1", "uninstallation success").arg(modelData.name));
+                                            DMSService.listInstalledThemes();
+                                        });
                                     }
                                 }
                             }
@@ -860,7 +840,7 @@ Item {
                         Grid {
                             id: accentColorsGrid
                             property int accentCount: variantSelector.activeThemeVariants?.accents?.length ?? 0
-                            property int dotSize: parent.width < 300 ? 28 : 32
+                            property int dotSize: parent.width < 300 ? Theme.buttonHeightXXS : Theme.buttonHeightXS
                             columns: accentCount > 0 ? Math.ceil(accentCount / 2) : 1
                             rowSpacing: Theme.spacingS
                             columnSpacing: Theme.spacingS
@@ -876,29 +856,16 @@ Item {
                                     property bool isSelected: accentId === variantSelector.selectedAccent
                                     width: accentColorsGrid.dotSize
                                     height: accentColorsGrid.dotSize
-                                    radius: width / 2
+                                    radius: Theme.fullRadius(width, height)
                                     color: modelData.color || modelData[variantSelector.selectedFlavor]?.primary || Theme.primary
                                     border.color: Theme.outline
                                     border.width: isSelected ? Theme.outlineWidthFocused : Theme.outlineWidth
                                     scale: isSelected ? 1.1 : 1
 
-                                    Rectangle {
-                                        width: accentNameText.contentWidth + Theme.spacingS * 2
-                                        height: accentNameText.contentHeight + Theme.spacingXS * 2
-                                        color: Theme.floatingWindowSurface
-                                        radius: Theme.cornerRadius
-                                        anchors.bottom: parent.top
-                                        anchors.bottomMargin: Theme.spacingXS
-                                        anchors.horizontalCenter: parent.horizontalCenter
-                                        visible: accentMouseArea.containsMouse
-
-                                        StyledText {
-                                            id: accentNameText
-                                            text: modelData.name
-                                            font.pixelSize: Theme.fontSizeSmall
-                                            color: Theme.surfaceText
-                                            anchors.centerIn: parent
-                                        }
+                                    DankTooltipHost {
+                                        text: modelData.name
+                                        target: parent
+                                        hoverArea: accentMouseArea
                                     }
 
                                     MouseArea {

quickshell/Modules/Settings/TypographyMotionTab.qml

@@ -166,7 +166,7 @@ Item {
                         id: springLane
                         width: motionPreview.laneWidth
                         height: parent.height
-                        radius: Theme.cornerRadiusL
+                        radius: Theme.cornerRadiusM
                         color: Theme.chipSurface
 
                         StyledText {

quickshell/Modules/Settings/WidgetSelectionPopup.qml

@@ -49,15 +49,13 @@ WidgetPickerWindow {
     Component {
         id: rowDelegate
 
-        Rectangle {
+        DankListItem {
             width: ListView.view.width
-            height: Math.max(60, textColumn.implicitHeight + 24)
-            radius: Theme.cornerRadius
-            property bool isSelected: root.keyboardNavigationActive && index === root.selectedIndex && !modelData.disabled
-            color: isSelected ? Theme.selectedContainer : widgetArea.containsMouse ? Theme.withAlpha(Theme.primary, root.blurActive ? 0.14 : 0.08) : Theme.floatingWindowNestedSurface
-            border.color: Theme.outlineMedium
-            border.width: Theme.layerOutlineWidth
-            antialiasing: true
+            implicitHeight: Math.max(Theme.listItemHeight, textColumn.implicitHeight + Theme.spacingM * 2)
+            isSelected: root.keyboardNavigationActive && index === root.selectedIndex && !modelData.disabled
+            enabled: !modelData.disabled
+            Accessible.name: modelData.text
+            onClicked: root.widgetChosen(modelData)
 
             Row {
                 anchors.fill: parent
@@ -104,23 +102,6 @@ WidgetPickerWindow {
                     anchors.verticalCenter: parent.verticalCenter
                 }
             }
-
-            MouseArea {
-                id: widgetArea
-
-                anchors.fill: parent
-                enabled: !modelData.disabled
-                hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor
-                onClicked: root.widgetChosen(modelData)
-            }
-
-            Behavior on color {
-                ColorAnimation {
-                    duration: Theme.shortDuration
-                    easing.type: Theme.standardEasing
-                }
-            }
         }
     }
 }

quickshell/Modules/Settings/Widgets/SettingsScreenPositionPicker.qml

@@ -131,7 +131,7 @@ Item {
         width: Math.min(root.width, SettingsMetrics.positionPickerMaxWidth)
         height: Math.round(width * SettingsMetrics.choiceCardPreviewRatio)
         radius: Theme.cornerRadiusM
-        color: Theme.surfaceContainerHighest
+        color: Theme.chipSurface
         border.width: Theme.outlineWidth
         border.color: Theme.outlineVariant
 

quickshell/Modules/Settings/Widgets/SettingsSliderRow.qml

@@ -15,7 +15,6 @@ SettingsRow {
     property alias showStops: slider.showStops
     property alias unit: slider.unit
     property alias decimals: slider.decimals
-    property alias thumbOutlineColor: slider.thumbOutlineColor
     property alias size: slider.size
 
     readonly property bool atMinimum: minimumLabel !== "" && slider.value === slider.minimum

quickshell/Modules/Settings/Widgets/SettingsSwatchGrid.qml

@@ -36,7 +36,7 @@ Flow {
             width: root.tileWidth
             height: root.compact ? root.compactTileHeight : swatch.height + label.implicitHeight + Theme.spacingS * 3
             radius: Theme.cornerRadiusM
-            color: Theme.floatingWindowNestedSurface
+            color: Theme.floatingWindowFieldColor
             border.width: isActive ? Theme.outlineWidthFocused : Theme.layerOutlineWidth
             border.color: isActive ? Theme.primary : Theme.outlineMedium
 

quickshell/Modules/Settings/WidgetsTab.qml

@@ -1,5 +1,4 @@
 import QtQuick
-import QtQuick.Layouts
 import Quickshell
 import qs.Common
 import qs.Services
@@ -537,42 +536,13 @@ Item {
     SettingsPage {
         id: mainColumn
 
-        StyledRect {
-            width: parent.width
-            height: barSelectorContent.implicitHeight + Theme.spacingL * 2
-            radius: Theme.cornerRadius
-            color: Theme.floatingWindowNestedSurface
-            border.color: Theme.outlineMedium
-            border.width: Theme.layerOutlineWidth
+        SettingsCard {
+            iconName: "toolbar"
+            title: I18n.tr("Bar")
             visible: hasMultipleBars
 
-            Column {
-                id: barSelectorContent
-                anchors.fill: parent
-                anchors.margins: Theme.spacingL
-                spacing: Theme.spacingM
-
-                Row {
-                    width: parent.width
-                    spacing: Theme.spacingM
-
-                    DankIcon {
-                        name: "toolbar"
-                        size: Theme.iconSize
-                        color: Theme.primary
-                        anchors.verticalCenter: parent.verticalCenter
-                    }
-
-                    StyledText {
-                        text: I18n.tr("Bar")
-                        font.pixelSize: Theme.fontSizeLarge
-                        font.weight: Theme.fontWeightMedium
-                        color: Theme.surfaceText
-                        anchors.verticalCenter: parent.verticalCenter
-                    }
-                }
-
-                DankButtonGroup {
+            SettingsRow {
+                body: DankButtonGroup {
                     id: barSelectorGroup
                     width: parent.width
                     model: SettingsData.barConfigs.map(cfg => cfg.name || ("Bar " + (SettingsData.barConfigs.indexOf(cfg) + 1)))
@@ -591,95 +561,25 @@ Item {
             }
         }
 
-        StyledRect {
-            width: parent.width
-            height: widgetManagementHeader.implicitHeight + Theme.spacingL * 2
-            radius: Theme.cornerRadius
-            color: Theme.floatingWindowNestedSurface
-            border.color: Theme.outlineMedium
-            border.width: Theme.layerOutlineWidth
+        SettingsCard {
+            iconName: "widgets"
+            title: I18n.tr("Sections", "bar widget settings heading for left, center, right sections")
 
-            Column {
-                id: widgetManagementHeader
-                anchors.fill: parent
-                anchors.margins: Theme.spacingL
-                spacing: Theme.spacingM
-
-                RowLayout {
-                    width: parent.width
-                    spacing: Theme.spacingM
-
-                    DankIcon {
-                        name: "widgets"
-                        size: Theme.iconSize
-                        color: Theme.primary
-                        Layout.alignment: Qt.AlignVCenter
-                    }
-
-                    StyledText {
-                        text: I18n.tr("Sections", "bar widget settings heading for left, center, right sections")
-                        font.pixelSize: Theme.fontSizeLarge
-                        font.weight: Theme.fontWeightMedium
-                        color: Theme.surfaceText
-                        Layout.alignment: Qt.AlignVCenter
-                    }
-
-                    Item {
-                        height: 1
-                        Layout.fillWidth: true
-                    }
-
-                    Rectangle {
-                        width: resetContentRow.implicitWidth + Theme.spacingM * 2
-                        height: 28
-                        radius: Theme.cornerRadius
-                        color: resetArea.containsMouse ? Theme.hoverTint(Theme.chipSurface) : Theme.chipSurface
-                        Layout.alignment: Qt.AlignVCenter
-                        border.width: 0
-
-                        Row {
-                            id: resetContentRow
-                            anchors.centerIn: parent
-                            spacing: Theme.spacingXS
-
-                            DankIcon {
-                                name: "refresh"
-                                size: 14
-                                color: Theme.surfaceText
-                                anchors.verticalCenter: parent.verticalCenter
-                            }
-
-                            StyledText {
-                                text: I18n.tr("Reset")
-                                font.pixelSize: Theme.fontSizeSmall
-                                font.weight: Theme.fontWeightMedium
-                                color: Theme.surfaceText
-                                anchors.verticalCenter: parent.verticalCenter
-                            }
-                        }
-
-                        MouseArea {
-                            id: resetArea
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            cursorShape: Qt.PointingHandCursor
-                            onClicked: {
-                                setWidgetsForSection("left", defaultLeftWidgets);
-                                setWidgetsForSection("center", defaultCenterWidgets);
-                                setWidgetsForSection("right", defaultRightWidgets);
-                            }
-                        }
-
-                        Behavior on color {
-                            ColorAnimation {
-                                duration: Theme.shortDuration
-                                easing.type: Theme.standardEasing
-                            }
-                        }
-                    }
+            headerActions: DankButton {
+                text: I18n.tr("Reset")
+                iconName: "refresh"
+                buttonHeight: Theme.buttonHeightXS
+                backgroundColor: Theme.secondaryContainer
+                textColor: Theme.onSecondaryContainer
+                onClicked: {
+                    setWidgetsForSection("left", defaultLeftWidgets);
+                    setWidgetsForSection("center", defaultCenterWidgets);
+                    setWidgetsForSection("right", defaultRightWidgets);
                 }
+            }
 
-                StyledText {
+            SettingsRow {
+                body: StyledText {
                     width: parent.width
                     text: I18n.tr("Drag the handle to reorder. Tap a widget for its settings, use the switch to hide it without changing spacing, or X to remove it.")
                     font.pixelSize: Theme.fontSizeSmall

quickshell/Modules/Settings/WorkspaceAppearanceColorOptions.qml

@@ -2,6 +2,7 @@ pragma ComponentBehavior: Bound
 
 import QtQuick
 import qs.Common
+import qs.Modules.Settings.Widgets
 
 Column {
     id: root
@@ -42,12 +43,7 @@ Column {
         onCustomColorSelected: selectedColor => root.store.set(root.focusedCustomColorKey, selectedColor.toString())
     }
 
-    Rectangle {
-        width: parent.width
-        height: 1
-        color: Theme.outline
-        opacity: 0.15
-    }
+    SettingsDivider {}
 
     ColorDropdownRow {
         text: I18n.tr("Occupied color")
@@ -63,11 +59,7 @@ Column {
         onCustomColorSelected: selectedColor => root.store.set(root.occupiedCustomColorKey, selectedColor.toString())
     }
 
-    Rectangle {
-        width: parent.width
-        height: 1
-        color: Theme.outline
-        opacity: 0.15
+    SettingsDivider {
         visible: root.occupiedColorVisible
     }
 
@@ -85,11 +77,7 @@ Column {
         onCustomColorSelected: selectedColor => root.store.set(root.unfocusedCustomColorKey, selectedColor.toString())
     }
 
-    Rectangle {
-        width: parent.width
-        height: 1
-        color: Theme.outline
-        opacity: 0.15
+    SettingsDivider {
         visible: root.urgentColorVisible
     }
 

quickshell/PLUGINS/ControlCenterDetailExample/DetailExampleWidget.qml

@@ -33,7 +33,7 @@ PluginComponent {
             id: detailRoot
             implicitHeight: detailColumn.implicitHeight + Theme.spacingM * 2
             radius: Theme.cornerRadius
-            color: Theme.surfaceContainerHigh
+            color: Theme.cardSurface
             border.width: 0
             visible: true
 
@@ -66,7 +66,7 @@ PluginComponent {
                         width: parent.width
                         height: 40
                         radius: Theme.cornerRadius
-                        color: optionMouseArea.containsMouse ? Theme.surfaceContainerHighest : Theme.withAlpha(Theme.surfaceContainerHighest, 0)
+                        color: optionMouseArea.containsMouse ? Theme.chipSurface : Theme.withAlpha(Theme.chipSurface, 0)
                         border.color: detailRoot.currentSelection === modelData ? Theme.primary : Theme.withAlpha(Theme.primary, 0)
                         border.width: detailRoot.currentSelection === modelData ? 2 : 0
 

quickshell/PLUGINS/ExampleCompositePlugin/CompositeBarWidget.qml

@@ -104,7 +104,7 @@ PluginComponent {
                         width: 45
                         height: 45
                         radius: Theme.cornerRadius
-                        color: emojiMouseArea.containsMouse ? Theme.surfaceContainerHighest : Theme.surfaceContainerHigh
+                        color: emojiMouseArea.containsMouse ? Theme.chipSurface : Theme.cardSurface
                         border.width: 0
 
                         StyledText {

quickshell/PLUGINS/ExampleCompositePlugin/CompositeDesktopWidget.qml

@@ -23,7 +23,7 @@ DesktopPluginComponent {
         id: background
         anchors.fill: parent
         radius: Theme.cornerRadius
-        color: Theme.surfaceContainer
+        color: Theme.hostSurface
         opacity: root.backgroundOpacity
     }
 

quickshell/PLUGINS/ExampleDesktopClock/DesktopClock.qml

@@ -23,7 +23,7 @@ DesktopPluginComponent {
         id: background
         anchors.fill: parent
         radius: Theme.cornerRadius
-        color: Theme.surfaceContainer
+        color: Theme.hostSurface
         opacity: root.backgroundOpacity
     }
 

quickshell/PLUGINS/ExampleEmojiPlugin/EmojiWidget.qml

@@ -104,7 +104,7 @@ PluginComponent {
                         width: 45
                         height: 45
                         radius: Theme.cornerRadius
-                        color: emojiMouseArea.containsMouse ? Theme.surfaceContainerHighest : Theme.surfaceContainerHigh
+                        color: emojiMouseArea.containsMouse ? Theme.chipSurface : Theme.cardSurface
                         border.width: 0
 
                         StyledText {

quickshell/PLUGINS/ExampleWithVariants/VariantSettings.qml

@@ -35,7 +35,7 @@ PluginSettings {
         width: parent.width
         height: addVariantColumn.implicitHeight + Theme.spacingL * 2
         radius: Theme.cornerRadius
-        color: Theme.surfaceContainerHigh
+        color: Theme.chipSurface
 
         Column {
             id: addVariantColumn
@@ -135,7 +135,7 @@ PluginSettings {
         width: parent.width
         height: Math.max(200, variantsColumn.implicitHeight + Theme.spacingL * 2)
         radius: Theme.cornerRadius
-        color: Theme.surfaceContainerHigh
+        color: Theme.chipSurface
 
         Column {
             id: variantsColumn
@@ -165,7 +165,7 @@ PluginSettings {
                     width: ListView.view.width
                     height: variantRow.implicitHeight + Theme.spacingM * 2
                     radius: Theme.cornerRadius
-                    color: variantMouseArea.containsMouse ? Theme.surfaceContainerHighest : Theme.surfaceContainer
+                    color: variantMouseArea.containsMouse ? Theme.chipSurfaceNested : Theme.chipSurface
 
                     Row {
                         id: variantRow
@@ -264,7 +264,7 @@ PluginSettings {
         width: parent.width
         height: instructionsColumn.implicitHeight + Theme.spacingL * 2
         radius: Theme.cornerRadius
-        color: Theme.surface
+        color: Theme.hostSurface
 
         Column {
             id: instructionsColumn

quickshell/PLUGINS/POPOUT_SERVICE.md

@@ -71,7 +71,7 @@ Rectangle {
 
     width: 100
     height: 30
-    color: Theme.surfaceContainerHigh
+    color: Theme.chipSurface
     radius: Theme.cornerRadius
 
     MouseArea {

quickshell/PLUGINS/README.md

@@ -122,7 +122,7 @@ PluginComponent {
             width: content.implicitWidth + Theme.spacingM * 2
             height: parent.widgetThickness
             radius: Theme.cornerRadius
-            color: Theme.surfaceContainerHigh
+            color: Theme.chipSurface
 
             StyledText {
                 id: content
@@ -202,7 +202,7 @@ PluginComponent {
     ccDetailContent: Component {
         Rectangle {
             implicitHeight: 200
-            color: Theme.surfaceContainerHigh
+            color: Theme.foregroundColor(Theme.cardSurface)
             radius: Theme.cornerRadius
             // Your detail UI here
         }
@@ -391,7 +391,7 @@ PluginSettings {
                 width: parent.width
                 height: 40
                 radius: Theme.cornerRadius
-                color: Theme.surfaceContainerHigh
+                color: Theme.chipSurface
 
                 StyledText {
                     anchors.left: parent.left
@@ -779,7 +779,7 @@ PluginComponent {
             width: content.implicitWidth + Theme.spacingM * 2
             height: parent.widgetThickness
             radius: Theme.cornerRadius
-            color: Theme.surfaceContainerHigh
+            color: Theme.chipSurface
 
             StyledText {
                 id: content
@@ -907,7 +907,7 @@ PluginComponent {
             width: textItem.implicitWidth + Theme.spacingM * 2
             height: parent.widgetThickness
             radius: Theme.cornerRadius
-            color: Theme.surfaceContainerHigh
+            color: Theme.chipSurface
 
             StyledText {
                 id: textItem
@@ -924,7 +924,7 @@ PluginComponent {
             width: parent.widgetThickness
             height: textItem.implicitWidth + Theme.spacingM * 2
             radius: Theme.cornerRadius
-            color: Theme.surfaceContainerHigh
+            color: Theme.chipSurface
 
             StyledText {
                 id: textItem
@@ -1674,7 +1674,7 @@ Item {
     Rectangle {
         anchors.fill: parent
         radius: Theme.cornerRadius
-        color: Theme.surfaceContainer
+        color: Theme.hostSurface
         opacity: 0.85
 
         // Widget content here

quickshell/PLUGINS/THEME_REFERENCE.md

@@ -53,16 +53,15 @@ Use `fullRadius()` for pills and round controls so lower strength values reduce
 ## Colors
 
 ### Surface Colors
+Pick the tier by what the surface sits on: a host floats over the desktop, a card sits in a host, a chip in a card, a nested chip in a chip.
 ```qml
-Theme.surface
-Theme.surfaceContainerLowest
-Theme.surfaceContainerLow
-Theme.surfaceContainer
-Theme.surfaceContainerHigh
-Theme.surfaceContainerHighest
+Theme.hostSurface        // popout, desktop widget or panel background
+Theme.cardSurface        // card inside a host
+Theme.chipSurface        // chip, row or field inside a card
+Theme.chipSurfaceNested  // chip inside a chip
 ```
 
-Use `Theme.foregroundColor(Theme.surfaceContainerHigh, Theme.isFloatingWindow(root))` for a nested fill that follows the foreground toggle and opacity. Outer floating windows use `Theme.floatingWindowSurface`. Pass raw surface colors to shared text fields; those widgets apply foreground opacity themselves.
+Each tier follows the user's surface overrides; the raw `Theme.surfaceContainer*` palette does not, so keep it for swatches and previews. Plugin settings already sit on a card, so their boxes start at `chipSurface`. Wrap fills in `Theme.foregroundColor(Theme.cardSurface, Theme.isFloatingWindow(root))` so they follow the foreground toggle and opacity. Outer floating windows use `Theme.floatingWindowSurface`. Pass raw surface colors to shared text fields; those widgets apply foreground opacity themselves. These roles need DMS 1.7 or newer, so set `"requires_dms": ">=1.7.0"` when you use them.
 
 ### Text Colors
 ```qml
@@ -76,7 +75,8 @@ Theme.outline           // Border/divider color
 Theme.primary
 Theme.onPrimary
 Theme.secondary
-Theme.onSecondary
+Theme.secondaryContainer
+Theme.onSecondaryContainer
 Theme.error
 Theme.warning
 Theme.success
@@ -84,8 +84,8 @@ Theme.success
 
 ### Special Functions
 ```qml
-Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
-Theme.foregroundColor(Theme.surfaceContainerHigh, Theme.isFloatingWindow(root))
+Theme.withAlpha(Theme.primary, Theme.stateLayerHover)
+Theme.foregroundColor(Theme.cardSurface, Theme.isFloatingWindow(root))
 ```
 
 ## Common Patterns
@@ -108,19 +108,24 @@ StyledText {
 ### Container with Border
 ```qml
 Rectangle {
-    color: Theme.surfaceContainerHigh
+    color: Theme.cardSurface
     radius: Theme.cornerRadius
-    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
-    border.width: 1
+    border.color: Theme.outlineVariant
+    border.width: Theme.outlineWidth
 }
 ```
 
 ### Hover Effect
+`StateLayer` draws the hover, press and ripple layers over its parent and takes clicks.
 ```qml
-MouseArea {
-    hoverEnabled: true
-    onEntered: parent.color = Qt.lighter(Theme.surfaceContainerHigh, 1.1)
-    onExited: parent.color = Theme.surfaceContainerHigh
+Rectangle {
+    color: Theme.chipSurface
+    radius: Theme.cornerRadius
+
+    StateLayer {
+        anchors.fill: parent
+        onClicked: root.activate()
+    }
 }
 ```
 

quickshell/Services/MediaAccentService.qml

@@ -27,7 +27,7 @@ Singleton {
 
     readonly property color accentContainer: _container(Theme.primaryContainer, Theme.isLightMode ? 0.3 : 0.55, Theme.isLightMode ? 0.9 : 0.42, 1.25)
     readonly property color accentSecondaryContainer: _container(Theme.secondaryContainer, Theme.isLightMode ? 0.12 : 0.22, Theme.isLightMode ? 0.94 : 0.3, 1.08)
-    readonly property color readableAccent: contrastTo(accent, Theme.onSurface, Theme.surfaceContainerHigh, 4.5)
+    readonly property color readableAccent: contrastTo(accent, Theme.onSurface, Theme.chipSurface, 4.5)
 
     property color onAccent
     property color onAccentContainer
@@ -123,7 +123,7 @@ Singleton {
         if (!MediaOptions.albumArtAccent || _accent === null)
             return fallback;
         const seed = Qt.hsva(Math.max(0, _accent.hsvHue), Math.min(_accent.hsvSaturation, saturationCap), value, 1);
-        return contrastTo(seed, Theme.onSurface, Theme.surfaceContainerHigh, cardContrast);
+        return contrastTo(seed, Theme.onSurface, Theme.chipSurface, cardContrast);
     }
 
     function _onContainer(fallback, saturationCap, container) {

quickshell/Widgets/MediaArtBackdrop.qml

@@ -90,7 +90,7 @@ Item {
     Rectangle {
         anchors.fill: parent
         radius: root.radius
-        color: Theme.surface
+        color: Theme.cardSurface
         opacity: root.surfaceTint
     }