From a8623e3ccb8a09bfcd5f793f23687282f5c6dd64 Mon Sep 17 00:00:00 2001 From: purian23 Date: Wed, 30 Sep 2026 21:35:40 -0400 Subject: [PATCH] settings: cleanup pass to update shared surface tier roles --- dank-qml-common | 2 +- flake.lock | 6 +- quickshell/Common/Theme.qml | 1 + .../DesktopClockWidget.qml | 2 +- .../SystemMonitorWidget.qml | 4 +- .../ControlCenter/Widgets/UserTile.qml | 2 +- .../Modules/DankBar/Widgets/RunningApps.qml | 2 +- .../DankBar/Widgets/WorkspaceSwitcher.qml | 49 ++- .../Modules/DankDash/Media/MediaDeviceRow.qml | 1 - .../DankDash/Media/MediaVolumeSlider.qml | 1 - .../Activities/SystemLevelCompact.qml | 1 - .../Activities/SystemLevelExpanded.qml | 1 - .../Modules/Notepad/NotepadSettings.qml | 2 +- .../Center/HistoryNotificationCard.qml | 2 +- .../Notifications/Center/NotificationCard.qml | 2 +- .../Notifications/Popup/NotificationPopup.qml | 2 +- quickshell/Modules/OSD/MediaPlaybackOSD.qml | 2 +- quickshell/Modules/OSD/OsdLevelRow.qml | 2 - .../Modules/Plugins/DesktopPluginWrapper.qml | 2 +- quickshell/Modules/Plugins/SliderSetting.qml | 1 - quickshell/Modules/Settings/AudioTab.qml | 333 ++++++------------ quickshell/Modules/Settings/BatteryTab.qml | 4 +- quickshell/Modules/Settings/ClipboardTab.qml | 30 +- .../Modules/Settings/DesktopWidgetBrowser.qml | 84 +---- .../Settings/DesktopWidgetGroupSection.qml | 6 +- .../Modules/Settings/DesktopWidgetsTab.qml | 145 +------- quickshell/Modules/Settings/LockScreenTab.qml | 37 +- .../Modules/Settings/NetworkCellularTab.qml | 45 +-- .../Modules/Settings/NetworkEthernetTab.qml | 75 ++-- .../Modules/Settings/NetworkStatusTab.qml | 6 +- .../Modules/Settings/NotificationRulesTab.qml | 32 +- .../Modules/Settings/PaletteInjectTab.qml | 34 +- quickshell/Modules/Settings/PluginBadge.qml | 1 - quickshell/Modules/Settings/PluginCard.qml | 2 - quickshell/Modules/Settings/SoundsTab.qml | 30 +- quickshell/Modules/Settings/ThemeAppsTab.qml | 105 +----- .../Modules/Settings/ThemeColorsTab.qml | 117 +++--- .../Modules/Settings/TypographyMotionTab.qml | 2 +- .../Modules/Settings/WidgetSelectionPopup.qml | 31 +- .../Widgets/SettingsScreenPositionPicker.qml | 2 +- .../Settings/Widgets/SettingsSliderRow.qml | 1 - .../Settings/Widgets/SettingsSwatchGrid.qml | 2 +- quickshell/Modules/Settings/WidgetsTab.qml | 142 ++------ .../WorkspaceAppearanceColorOptions.qml | 20 +- .../DetailExampleWidget.qml | 4 +- .../CompositeBarWidget.qml | 2 +- .../CompositeDesktopWidget.qml | 2 +- .../ExampleDesktopClock/DesktopClock.qml | 2 +- .../ExampleEmojiPlugin/EmojiWidget.qml | 2 +- .../ExampleWithVariants/VariantSettings.qml | 8 +- quickshell/PLUGINS/POPOUT_SERVICE.md | 2 +- quickshell/PLUGINS/README.md | 14 +- quickshell/PLUGINS/THEME_REFERENCE.md | 39 +- quickshell/Services/MediaAccentService.qml | 4 +- quickshell/Widgets/MediaArtBackdrop.qml | 2 +- 55 files changed, 394 insertions(+), 1060 deletions(-) diff --git a/dank-qml-common b/dank-qml-common index fc42c683c..fdd2dfe3f 160000 --- a/dank-qml-common +++ b/dank-qml-common @@ -1 +1 @@ -Subproject commit fc42c683c7fd16e7583536acabae54a5fd678fc3 +Subproject commit fdd2dfe3f3444585bc1f44180837724abbdfe7f1 diff --git a/flake.lock b/flake.lock index 0a24f8763..6ea0223f5 100644 --- a/flake.lock +++ b/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": { diff --git a/quickshell/Common/Theme.qml b/quickshell/Common/Theme.qml index a0b56390a..0a908af7e 100644 --- a/quickshell/Common/Theme.qml +++ b/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 diff --git a/quickshell/Modules/BuiltinDesktopPlugins/DesktopClockWidget.qml b/quickshell/Modules/BuiltinDesktopPlugins/DesktopClockWidget.qml index 336130948..336ec3681 100644 --- a/quickshell/Modules/BuiltinDesktopPlugins/DesktopClockWidget.qml +++ b/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 diff --git a/quickshell/Modules/BuiltinDesktopPlugins/SystemMonitorWidget.qml b/quickshell/Modules/BuiltinDesktopPlugins/SystemMonitorWidget.qml index 9c2bb7694..fc4a21cee 100644 --- a/quickshell/Modules/BuiltinDesktopPlugins/SystemMonitorWidget.qml +++ b/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 diff --git a/quickshell/Modules/ControlCenter/Widgets/UserTile.qml b/quickshell/Modules/ControlCenter/Widgets/UserTile.qml index 0130769e6..9e60492b8 100644 --- a/quickshell/Modules/ControlCenter/Widgets/UserTile.qml +++ b/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)) diff --git a/quickshell/Modules/DankBar/Widgets/RunningApps.qml b/quickshell/Modules/DankBar/Widgets/RunningApps.qml index f8ac8d94e..311f50d32 100644 --- a/quickshell/Modules/DankBar/Widgets/RunningApps.qml +++ b/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 } } diff --git a/quickshell/Modules/DankBar/Widgets/WorkspaceSwitcher.qml b/quickshell/Modules/DankBar/Widgets/WorkspaceSwitcher.qml index b1e645013..bc5fac336 100644 --- a/quickshell/Modules/DankBar/Widgets/WorkspaceSwitcher.qml +++ b/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 } diff --git a/quickshell/Modules/DankDash/Media/MediaDeviceRow.qml b/quickshell/Modules/DankDash/Media/MediaDeviceRow.qml index 373f420f1..a4d754902 100644 --- a/quickshell/Modules/DankDash/Media/MediaDeviceRow.qml +++ b/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; diff --git a/quickshell/Modules/DankDash/Media/MediaVolumeSlider.qml b/quickshell/Modules/DankDash/Media/MediaVolumeSlider.qml index 3dfaf9741..1de6fcb97 100644 --- a/quickshell/Modules/DankDash/Media/MediaVolumeSlider.qml +++ b/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 diff --git a/quickshell/Modules/DankIsland/Activities/SystemLevelCompact.qml b/quickshell/Modules/DankIsland/Activities/SystemLevelCompact.qml index 2d8ce61b1..7e1822e4e 100644 --- a/quickshell/Modules/DankIsland/Activities/SystemLevelCompact.qml +++ b/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)) } diff --git a/quickshell/Modules/DankIsland/Activities/SystemLevelExpanded.qml b/quickshell/Modules/DankIsland/Activities/SystemLevelExpanded.qml index f25450b79..0fb51a454 100644 --- a/quickshell/Modules/DankIsland/Activities/SystemLevelExpanded.qml +++ b/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) diff --git a/quickshell/Modules/Notepad/NotepadSettings.qml b/quickshell/Modules/Notepad/NotepadSettings.qml index e2c1fd12e..e35f59b87 100644 --- a/quickshell/Modules/Notepad/NotepadSettings.qml +++ b/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. diff --git a/quickshell/Modules/Notifications/Center/HistoryNotificationCard.qml b/quickshell/Modules/Notifications/Center/HistoryNotificationCard.qml index 54f09c095..acd0fe8f6 100644 --- a/quickshell/Modules/Notifications/Center/HistoryNotificationCard.qml +++ b/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 || "", diff --git a/quickshell/Modules/Notifications/Center/NotificationCard.qml b/quickshell/Modules/Notifications/Center/NotificationCard.qml index 8657d1822..800ea0a54 100644 --- a/quickshell/Modules/Notifications/Center/NotificationCard.qml +++ b/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) { diff --git a/quickshell/Modules/Notifications/Popup/NotificationPopup.qml b/quickshell/Modules/Notifications/Popup/NotificationPopup.qml index e56ec495b..fe3a7f82b 100644 --- a/quickshell/Modules/Notifications/Popup/NotificationPopup.qml +++ b/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 diff --git a/quickshell/Modules/OSD/MediaPlaybackOSD.qml b/quickshell/Modules/OSD/MediaPlaybackOSD.qml index fc285e787..3a74c3b43 100644 --- a/quickshell/Modules/OSD/MediaPlaybackOSD.qml +++ b/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 } } diff --git a/quickshell/Modules/OSD/OsdLevelRow.qml b/quickshell/Modules/OSD/OsdLevelRow.qml index ac3a0f982..19d6a468c 100644 --- a/quickshell/Modules/OSD/OsdLevelRow.qml +++ b/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) diff --git a/quickshell/Modules/Plugins/DesktopPluginWrapper.qml b/quickshell/Modules/Plugins/DesktopPluginWrapper.qml index 361227863..f5d4385a4 100644 --- a/quickshell/Modules/Plugins/DesktopPluginWrapper.qml +++ b/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 diff --git a/quickshell/Modules/Plugins/SliderSetting.qml b/quickshell/Modules/Plugins/SliderSetting.qml index a0ed8af81..deffd10ce 100644 --- a/quickshell/Modules/Plugins/SliderSetting.qml +++ b/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; } diff --git a/quickshell/Modules/Settings/AudioTab.qml b/quickshell/Modules/Settings/AudioTab.qml index b451423f9..f6e7a1ce2 100644 --- a/quickshell/Modules/Settings/AudioTab.qml +++ b/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 } } } diff --git a/quickshell/Modules/Settings/BatteryTab.qml b/quickshell/Modules/Settings/BatteryTab.qml index 53b89f33d..41808490c 100644 --- a/quickshell/Modules/Settings/BatteryTab.qml +++ b/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 { diff --git a/quickshell/Modules/Settings/ClipboardTab.qml b/quickshell/Modules/Settings/ClipboardTab.qml index dc7c1c340..6525711a6 100644 --- a/quickshell/Modules/Settings/ClipboardTab.qml +++ b/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 { diff --git a/quickshell/Modules/Settings/DesktopWidgetBrowser.qml b/quickshell/Modules/Settings/DesktopWidgetBrowser.qml index 33746f125..3a109baa9 100644 --- a/quickshell/Modules/Settings/DesktopWidgetBrowser.qml +++ b/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 - } - } } } } diff --git a/quickshell/Modules/Settings/DesktopWidgetGroupSection.qml b/quickshell/Modules/Settings/DesktopWidgetGroupSection.qml index 430eab50e..691f1a048 100644 --- a/quickshell/Modules/Settings/DesktopWidgetGroupSection.qml +++ b/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 } } } diff --git a/quickshell/Modules/Settings/DesktopWidgetsTab.qml b/quickshell/Modules/Settings/DesktopWidgetsTab.qml index fc1e03347..a25377bf9 100644 --- a/quickshell/Modules/Settings/DesktopWidgetsTab.qml +++ b/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") } } diff --git a/quickshell/Modules/Settings/LockScreenTab.qml b/quickshell/Modules/Settings/LockScreenTab.qml index 1e97d2cad..1dbafd0be 100644 --- a/quickshell/Modules/Settings/LockScreenTab.qml +++ b/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(); - } - } } } } diff --git a/quickshell/Modules/Settings/NetworkCellularTab.qml b/quickshell/Modules/Settings/NetworkCellularTab.qml index 5ac4e04f2..a6520aa76 100644 --- a/quickshell/Modules/Settings/NetworkCellularTab.qml +++ b/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 diff --git a/quickshell/Modules/Settings/NetworkEthernetTab.qml b/quickshell/Modules/Settings/NetworkEthernetTab.qml index 82a59a6e5..3481889a3 100644 --- a/quickshell/Modules/Settings/NetworkEthernetTab.qml +++ b/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 diff --git a/quickshell/Modules/Settings/NetworkStatusTab.qml b/quickshell/Modules/Settings/NetworkStatusTab.qml index 24511778e..d9ec5c612 100644 --- a/quickshell/Modules/Settings/NetworkStatusTab.qml +++ b/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) { diff --git a/quickshell/Modules/Settings/NotificationRulesTab.qml b/quickshell/Modules/Settings/NotificationRulesTab.qml index 9d848eb54..a712b103c 100644 --- a/quickshell/Modules/Settings/NotificationRulesTab.qml +++ b/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) - } - } } } } diff --git a/quickshell/Modules/Settings/PaletteInjectTab.qml b/quickshell/Modules/Settings/PaletteInjectTab.qml index be35d3236..729cbab54 100644 --- a/quickshell/Modules/Settings/PaletteInjectTab.qml +++ b/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) } } diff --git a/quickshell/Modules/Settings/PluginBadge.qml b/quickshell/Modules/Settings/PluginBadge.qml index 4eec7374e..3cf9e1b83 100644 --- a/quickshell/Modules/Settings/PluginBadge.qml +++ b/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 diff --git a/quickshell/Modules/Settings/PluginCard.qml b/quickshell/Modules/Settings/PluginCard.qml index 7700b725a..0495e003e 100644 --- a/quickshell/Modules/Settings/PluginCard.qml +++ b/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 } } diff --git a/quickshell/Modules/Settings/SoundsTab.qml b/quickshell/Modules/Settings/SoundsTab.qml index 00d603b2e..499062337 100644 --- a/quickshell/Modules/Settings/SoundsTab.qml +++ b/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) } } } diff --git a/quickshell/Modules/Settings/ThemeAppsTab.qml b/quickshell/Modules/Settings/ThemeAppsTab.qml index 9273b0500..2b7cb079d 100644 --- a/quickshell/Modules/Settings/ThemeAppsTab.qml +++ b/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() } } } diff --git a/quickshell/Modules/Settings/ThemeColorsTab.qml b/quickshell/Modules/Settings/ThemeColorsTab.qml index 54a140f2d..8ac587c93 100644 --- a/quickshell/Modules/Settings/ThemeColorsTab.qml +++ b/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 { diff --git a/quickshell/Modules/Settings/TypographyMotionTab.qml b/quickshell/Modules/Settings/TypographyMotionTab.qml index ccc368653..f3c0ee224 100644 --- a/quickshell/Modules/Settings/TypographyMotionTab.qml +++ b/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 { diff --git a/quickshell/Modules/Settings/WidgetSelectionPopup.qml b/quickshell/Modules/Settings/WidgetSelectionPopup.qml index 21cc636de..cb74357af 100644 --- a/quickshell/Modules/Settings/WidgetSelectionPopup.qml +++ b/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 - } - } } } } diff --git a/quickshell/Modules/Settings/Widgets/SettingsScreenPositionPicker.qml b/quickshell/Modules/Settings/Widgets/SettingsScreenPositionPicker.qml index 9d531ed93..769594371 100644 --- a/quickshell/Modules/Settings/Widgets/SettingsScreenPositionPicker.qml +++ b/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 diff --git a/quickshell/Modules/Settings/Widgets/SettingsSliderRow.qml b/quickshell/Modules/Settings/Widgets/SettingsSliderRow.qml index de6ac42a3..c9c8a8b74 100644 --- a/quickshell/Modules/Settings/Widgets/SettingsSliderRow.qml +++ b/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 diff --git a/quickshell/Modules/Settings/Widgets/SettingsSwatchGrid.qml b/quickshell/Modules/Settings/Widgets/SettingsSwatchGrid.qml index 35d2891b1..76980cefa 100644 --- a/quickshell/Modules/Settings/Widgets/SettingsSwatchGrid.qml +++ b/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 diff --git a/quickshell/Modules/Settings/WidgetsTab.qml b/quickshell/Modules/Settings/WidgetsTab.qml index 084dd1459..dc5c0f684 100644 --- a/quickshell/Modules/Settings/WidgetsTab.qml +++ b/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 diff --git a/quickshell/Modules/Settings/WorkspaceAppearanceColorOptions.qml b/quickshell/Modules/Settings/WorkspaceAppearanceColorOptions.qml index 63a8f2c1f..6748c5bf2 100644 --- a/quickshell/Modules/Settings/WorkspaceAppearanceColorOptions.qml +++ b/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 } diff --git a/quickshell/PLUGINS/ControlCenterDetailExample/DetailExampleWidget.qml b/quickshell/PLUGINS/ControlCenterDetailExample/DetailExampleWidget.qml index eb49e75e7..f8e5228fd 100644 --- a/quickshell/PLUGINS/ControlCenterDetailExample/DetailExampleWidget.qml +++ b/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 diff --git a/quickshell/PLUGINS/ExampleCompositePlugin/CompositeBarWidget.qml b/quickshell/PLUGINS/ExampleCompositePlugin/CompositeBarWidget.qml index 8bc736b92..34ab28762 100644 --- a/quickshell/PLUGINS/ExampleCompositePlugin/CompositeBarWidget.qml +++ b/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 { diff --git a/quickshell/PLUGINS/ExampleCompositePlugin/CompositeDesktopWidget.qml b/quickshell/PLUGINS/ExampleCompositePlugin/CompositeDesktopWidget.qml index a5ef7f874..036b92d5b 100644 --- a/quickshell/PLUGINS/ExampleCompositePlugin/CompositeDesktopWidget.qml +++ b/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 } diff --git a/quickshell/PLUGINS/ExampleDesktopClock/DesktopClock.qml b/quickshell/PLUGINS/ExampleDesktopClock/DesktopClock.qml index a5ef7f874..036b92d5b 100644 --- a/quickshell/PLUGINS/ExampleDesktopClock/DesktopClock.qml +++ b/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 } diff --git a/quickshell/PLUGINS/ExampleEmojiPlugin/EmojiWidget.qml b/quickshell/PLUGINS/ExampleEmojiPlugin/EmojiWidget.qml index 8e5d236ae..722b22866 100644 --- a/quickshell/PLUGINS/ExampleEmojiPlugin/EmojiWidget.qml +++ b/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 { diff --git a/quickshell/PLUGINS/ExampleWithVariants/VariantSettings.qml b/quickshell/PLUGINS/ExampleWithVariants/VariantSettings.qml index 6007c26de..037070af1 100644 --- a/quickshell/PLUGINS/ExampleWithVariants/VariantSettings.qml +++ b/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 diff --git a/quickshell/PLUGINS/POPOUT_SERVICE.md b/quickshell/PLUGINS/POPOUT_SERVICE.md index e4f556f6d..5fdac1eb2 100644 --- a/quickshell/PLUGINS/POPOUT_SERVICE.md +++ b/quickshell/PLUGINS/POPOUT_SERVICE.md @@ -71,7 +71,7 @@ Rectangle { width: 100 height: 30 - color: Theme.surfaceContainerHigh + color: Theme.chipSurface radius: Theme.cornerRadius MouseArea { diff --git a/quickshell/PLUGINS/README.md b/quickshell/PLUGINS/README.md index 759e7aac5..fd694247d 100644 --- a/quickshell/PLUGINS/README.md +++ b/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 diff --git a/quickshell/PLUGINS/THEME_REFERENCE.md b/quickshell/PLUGINS/THEME_REFERENCE.md index 3616e861f..922f5960d 100644 --- a/quickshell/PLUGINS/THEME_REFERENCE.md +++ b/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() + } } ``` diff --git a/quickshell/Services/MediaAccentService.qml b/quickshell/Services/MediaAccentService.qml index cb222a58c..b53386add 100644 --- a/quickshell/Services/MediaAccentService.qml +++ b/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) { diff --git a/quickshell/Widgets/MediaArtBackdrop.qml b/quickshell/Widgets/MediaArtBackdrop.qml index 5fa9e6af2..613182bba 100644 --- a/quickshell/Widgets/MediaArtBackdrop.qml +++ b/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 }