From e4ec3582b4e04ebb8ea047aa0cf59125b2d6ef6a Mon Sep 17 00:00:00 2001 From: bbedward Date: Fri, 2 Oct 2026 11:53:15 -0400 Subject: [PATCH] settings: raised content pane and surface tier ladder instead of dividers --- dank-qml-common | 2 +- flake.lock | 6 +-- quickshell/Common/Theme.qml | 1 + .../Modals/Changelog/ChangelogModal.qml | 1 - .../Clipboard/ClipboardImagePreview.qml | 1 - quickshell/Modals/Greeter/GreeterModal.qml | 3 +- quickshell/Modals/KeybindsContent.qml | 35 ++--------------- quickshell/Modals/ProcessListModal.qml | 17 ++++----- .../Modals/Settings/SettingsContent.qml | 10 ++--- quickshell/Modals/Settings/SettingsModal.qml | 38 +++++++++++++------ .../Modals/Settings/SettingsSidebar.qml | 20 +++------- .../Modules/Notepad/NotepadPopoutWindow.qml | 7 ++-- quickshell/Modules/Settings/AboutTab.qml | 6 +-- .../KeyboardLayoutOptions.qml | 2 +- quickshell/Modules/Settings/ChangelogTab.qml | 4 +- .../Modules/Settings/ColorDropdownRow.qml | 2 +- .../Settings/DisplayConfig/MonitorCanvas.qml | 3 +- .../Settings/DisplayConfig/MonitorRect.qml | 5 ++- .../DisplayConfig/NoBackendMessage.qml | 3 +- .../Settings/DisplayConfig/OutputCard.qml | 1 + .../Modules/Settings/DisplayConfigTab.qml | 7 ++-- .../Modules/Settings/GammaControlTab.qml | 2 +- quickshell/Modules/Settings/GreeterTab.qml | 2 +- quickshell/Modules/Settings/LockScreenTab.qml | 6 +-- .../Modules/Settings/NetworkCellularTab.qml | 4 +- .../Modules/Settings/NetworkEthernetTab.qml | 4 +- .../Modules/Settings/NetworkWifiTab.qml | 6 +-- .../Modules/Settings/PaletteInjectTab.qml | 2 +- quickshell/Modules/Settings/PluginBadge.qml | 3 +- quickshell/Modules/Settings/PluginBrowser.qml | 11 +++--- quickshell/Modules/Settings/PluginCard.qml | 4 +- .../Modules/Settings/PluginsHubHeader.qml | 3 +- quickshell/Modules/Settings/PowerSleepTab.qml | 1 + quickshell/Modules/Settings/PrinterTab.qml | 8 ++-- .../Settings/RegistryBrowserWindow.qml | 7 ++-- .../Modules/Settings/SoftwareUpdatesTab.qml | 8 ++-- .../Modules/Settings/ThemeColorsTab.qml | 8 ++-- .../Modules/Settings/TypographyMotionTab.qml | 2 +- .../Modules/Settings/WallpaperColorsTab.qml | 6 +-- .../Modules/Settings/WallpaperCyclingTab.qml | 4 +- .../Modules/Settings/WidgetPickerWindow.qml | 3 +- .../Settings/Widgets/AppBrowserPopup.qml | 3 +- .../Settings/Widgets/SettingsColorPicker.qml | 2 +- .../Settings/Widgets/SettingsDropdownRow.qml | 1 + .../Settings/Widgets/SettingsLayoutPicker.qml | 4 +- .../Widgets/SettingsLocationSection.qml | 4 +- .../Settings/Widgets/SettingsMetrics.qml | 13 +++++-- .../Modules/Settings/Widgets/SettingsPage.qml | 4 +- .../Widgets/SettingsScreenPositionPicker.qml | 2 +- .../Settings/Widgets/SettingsSidebarItem.qml | 2 +- .../Settings/Widgets/SettingsSwatchGrid.qml | 4 +- .../Widgets/SettingsWallpaperThumb.qml | 8 ++-- .../Modules/Settings/WindowRulesTab.qml | 3 +- 53 files changed, 155 insertions(+), 163 deletions(-) diff --git a/dank-qml-common b/dank-qml-common index fd2f92dc7..16c01d7c8 160000 --- a/dank-qml-common +++ b/dank-qml-common @@ -1 +1 @@ -Subproject commit fd2f92dc755aebc3ecda4b0ce3e27ce6d6ca9f92 +Subproject commit 16c01d7c8f55a98552abdb48105724720c19007b diff --git a/flake.lock b/flake.lock index 14ef96695..49e9fd555 100644 --- a/flake.lock +++ b/flake.lock @@ -3,11 +3,11 @@ "dank-qml-common": { "flake": false, "locked": { - "lastModified": 1790897239, - "narHash": "sha256-JgDpkgnLeNuLFLcxpo3oLJC7NC7uiM7+w+Jv1e4xlIM=", + "lastModified": 1790956339, + "narHash": "sha256-NxZipAzWqaXTFfa1BL+huPgdIydzdrE9hyk/WKuIXOg=", "owner": "AvengeMedia", "repo": "dank-qml-common", - "rev": "fd2f92dc755aebc3ecda4b0ce3e27ce6d6ca9f92", + "rev": "16c01d7c8f55a98552abdb48105724720c19007b", "type": "github" }, "original": { diff --git a/quickshell/Common/Theme.qml b/quickshell/Common/Theme.qml index 0a908af7e..e75af311a 100644 --- a/quickshell/Common/Theme.qml +++ b/quickshell/Common/Theme.qml @@ -1245,6 +1245,7 @@ Singleton { property real spacingM: 12 property real spacingL: 16 property real spacingXL: 24 + readonly property real windowInset: spacingM property real fontSizeSmall: Math.round(fontScale * 12) property real fontSizeMedium: Math.round(fontScale * 14) property real fontSizeLarge: Math.round(fontScale * 16) diff --git a/quickshell/Modals/Changelog/ChangelogModal.qml b/quickshell/Modals/Changelog/ChangelogModal.qml index c5ec75f99..284797b09 100644 --- a/quickshell/Modals/Changelog/ChangelogModal.qml +++ b/quickshell/Modals/Changelog/ChangelogModal.qml @@ -57,7 +57,6 @@ DankFloatingWindow { anchors.right: parent.right anchors.top: headerRow.bottom anchors.bottom: footerRow.top - anchors.topMargin: Theme.spacingS clip: true contentHeight: mainColumn.height + Theme.spacingL * 2 contentWidth: width diff --git a/quickshell/Modals/Clipboard/ClipboardImagePreview.qml b/quickshell/Modals/Clipboard/ClipboardImagePreview.qml index 06f07ae1d..9ee93adf5 100644 --- a/quickshell/Modals/Clipboard/ClipboardImagePreview.qml +++ b/quickshell/Modals/Clipboard/ClipboardImagePreview.qml @@ -103,7 +103,6 @@ ClippingRectangle { controls: null horizontalPadding: 0 verticalPadding: 0 - showDivider: false title: I18n.tr("Preview", "noun, clipboard image preview window title") onCloseRequested: root.closeRequested() } diff --git a/quickshell/Modals/Greeter/GreeterModal.qml b/quickshell/Modals/Greeter/GreeterModal.qml index 705f7d64b..a9f4bb85b 100644 --- a/quickshell/Modals/Greeter/GreeterModal.qml +++ b/quickshell/Modals/Greeter/GreeterModal.qml @@ -208,7 +208,6 @@ DankFloatingWindow { anchors.right: parent.right anchors.top: headerRow.bottom anchors.bottom: footerRow.top - anchors.topMargin: Theme.spacingS Loader { id: pageLoader @@ -239,7 +238,7 @@ DankFloatingWindow { Row { anchors.right: parent.right - anchors.rightMargin: Theme.spacingL + anchors.rightMargin: Theme.windowInset anchors.verticalCenter: parent.verticalCenter spacing: Theme.spacingM diff --git a/quickshell/Modals/KeybindsContent.qml b/quickshell/Modals/KeybindsContent.qml index 4866cc274..8c33df6b4 100644 --- a/quickshell/Modals/KeybindsContent.qml +++ b/quickshell/Modals/KeybindsContent.qml @@ -481,7 +481,8 @@ FocusScope { Item { anchors.fill: parent - anchors.margins: Theme.spacingL + anchors.margins: Theme.windowInset + anchors.topMargin: 0 // Sidebar Item { @@ -590,15 +591,6 @@ FocusScope { } } - // Divider between All and specific categories - Rectangle { - width: sidebarCol.width - Theme.spacingS * 2 - height: Theme.dividerWidth - anchors.horizontalCenter: parent.horizontalCenter - color: Theme.outlineVariant - opacity: 0.3 - } - // Category Tabs Repeater { model: content.dataModel.sortedKeys @@ -656,23 +648,11 @@ FocusScope { } } - // Vertical Divider between Sidebar and Main Content - Rectangle { - id: vDivider - anchors.left: sidebar.right - anchors.leftMargin: Theme.spacingM - anchors.top: parent.top - anchors.bottom: parent.bottom - width: Theme.dividerWidth - color: Theme.outlineVariant - opacity: 0.4 - } - // Main Content Area Item { id: mainArea - anchors.left: vDivider.right - anchors.leftMargin: Theme.spacingM + anchors.left: sidebar.right + anchors.leftMargin: Theme.spacingL anchors.right: parent.right anchors.top: parent.top anchors.bottom: parent.bottom @@ -718,13 +698,6 @@ FocusScope { font.weight: Theme.fontWeightMedium color: Theme.primary } - - Rectangle { - Layout.fillWidth: true - height: Theme.dividerWidth - color: Theme.outlineVariant - opacity: 0.3 - } } // Subcategories Repeater diff --git a/quickshell/Modals/ProcessListModal.qml b/quickshell/Modals/ProcessListModal.qml index 8393183e7..2568adcf7 100644 --- a/quickshell/Modals/ProcessListModal.qml +++ b/quickshell/Modals/ProcessListModal.qml @@ -211,9 +211,8 @@ DankFloatingWindow { DankNavigationBar { id: viewNavigation Layout.fillWidth: true - Layout.topMargin: Theme.spacingS - Layout.leftMargin: Theme.spacingL - Layout.rightMargin: Theme.spacingL + Layout.leftMargin: Theme.windowInset + Layout.rightMargin: Theme.windowInset nextFocusTarget: currentTab === 0 ? searchField : null model: [ { @@ -240,16 +239,16 @@ DankFloatingWindow { ProcessSummary { Layout.fillWidth: true Layout.fillHeight: false - Layout.leftMargin: Theme.spacingL - Layout.rightMargin: Theme.spacingL + Layout.leftMargin: Theme.windowInset + Layout.rightMargin: Theme.windowInset Layout.topMargin: Theme.spacingS visible: currentTab === 0 } RowLayout { Layout.fillWidth: true - Layout.leftMargin: Theme.spacingL - Layout.rightMargin: Theme.spacingL + Layout.leftMargin: Theme.windowInset + Layout.rightMargin: Theme.windowInset Layout.topMargin: Theme.spacingS spacing: Theme.spacingM visible: currentTab === 0 @@ -327,8 +326,8 @@ DankFloatingWindow { Rectangle { Layout.fillWidth: true Layout.preferredHeight: Theme.buttonHeightXS - Layout.leftMargin: Theme.spacingL - Layout.rightMargin: Theme.spacingL + Layout.leftMargin: Theme.windowInset + Layout.rightMargin: Theme.windowInset Layout.bottomMargin: Theme.spacingM color: "transparent" diff --git a/quickshell/Modals/Settings/SettingsContent.qml b/quickshell/Modals/Settings/SettingsContent.qml index 7a1fc64b0..68a3b4c2c 100644 --- a/quickshell/Modals/Settings/SettingsContent.qml +++ b/quickshell/Modals/Settings/SettingsContent.qml @@ -72,7 +72,7 @@ FocusScope { currentPageItem.forceActiveFocus(Qt.TabFocusReason); return; } - } while (!item.visible || !item.enabled || !_inViewport(item)); + } while (!item.visible || !item.enabled || !_inViewport(item)) item.forceActiveFocus(Qt.TabFocusReason); }); } @@ -124,7 +124,7 @@ FocusScope { item = item.nextItemInFocusChain(forward); if (!item || item === start || !_contains(page, item)) return false; - } while (!item.visible || !item.enabled); + } while (!item.visible || !item.enabled) item.forceActiveFocus(forward ? Qt.TabFocusReason : Qt.BacktabFocusReason); _reveal(item); return true; @@ -430,13 +430,13 @@ FocusScope { Column { anchors.fill: parent - anchors.leftMargin: root.isCompactMode ? Theme.spacingS : SettingsMetrics.scrollGutter - anchors.rightMargin: root.isCompactMode ? Theme.spacingS : SettingsMetrics.scrollGutter + anchors.leftMargin: SettingsMetrics.panePadding + anchors.rightMargin: SettingsMetrics.panePadding spacing: 0 Item { id: pageHeader - width: Math.min(root.pageContentMaxWidth, parent.width - Theme.spacingL * 2) + width: Math.min(root.pageContentMaxWidth, parent.width) anchors.horizontalCenter: parent.horizontalCenter height: Math.max(SettingsMetrics.pageHeaderHeight, pageHeading.implicitHeight + Theme.spacingM * 2) diff --git a/quickshell/Modals/Settings/SettingsModal.qml b/quickshell/Modals/Settings/SettingsModal.qml index 4a9154872..cf9ab1891 100644 --- a/quickshell/Modals/Settings/SettingsModal.qml +++ b/quickshell/Modals/Settings/SettingsModal.qml @@ -300,19 +300,26 @@ DankFloatingWindow { onCloseRequested: settingsModal.hide() } - Rectangle { + Item { id: readOnlyBanner property bool showBanner: (SettingsData._isReadOnly && SettingsData._hasUnsavedChanges) || (SessionData._isReadOnly && SessionData._hasUnsavedChanges) width: parent.width height: showBanner ? bannerContent.implicitHeight + Theme.spacingM * 2 : 0 - color: Theme.floatingWindowNestedSurface - border.width: Theme.layerOutlineWidth - border.color: Theme.outlineMedium visible: showBanner clip: true + Rectangle { + anchors.fill: parent + anchors.leftMargin: body.paneInset + anchors.rightMargin: body.paneInset + radius: SettingsMetrics.paneRadius + color: SettingsMetrics.paneColor + border.width: Theme.layerOutlineWidth + border.color: Theme.outlineMedium + } + Behavior on height { NumberAnimation { duration: SettingsMetrics.fadeDuration @@ -326,9 +333,10 @@ DankFloatingWindow { anchors.left: parent.left anchors.right: parent.right - anchors.verticalCenter: parent.verticalCenter - anchors.leftMargin: Theme.spacingL - anchors.rightMargin: Theme.spacingM + anchors.bottom: parent.bottom + anchors.bottomMargin: Theme.spacingM + anchors.leftMargin: body.paneInset + SettingsMetrics.panePadding + anchors.rightMargin: body.paneInset + SettingsMetrics.panePadding spacing: Theme.spacingM DankIcon { @@ -387,6 +395,9 @@ DankFloatingWindow { Item { id: body + + readonly property real paneInset: SettingsMetrics.paneMargin + width: parent.width height: parent.height - titleBar.height - readOnlyBanner.height clip: true @@ -414,12 +425,15 @@ DankFloatingWindow { x: { const flip = I18n.isRtl ? -1 : 1; if (settingsModal.isCompactMode) - return settingsModal.menuVisible ? body.width * flip : 0; - return I18n.isRtl ? 0 : sidebar.width; + return (settingsModal.menuVisible ? body.width * flip : 0) + body.paneInset; + return I18n.isRtl ? body.paneInset : sidebar.width; } - width: settingsModal.isCompactMode ? body.width : body.width - sidebar.width - height: body.height - color: settingsModal.isCompactMode ? Theme.floatingWindowSurface : "transparent" + width: settingsModal.isCompactMode ? body.width - body.paneInset * 2 : body.width - sidebar.width - body.paneInset + height: body.height - body.paneInset + radius: SettingsMetrics.paneRadius + color: SettingsMetrics.paneColor + border.width: Theme.layerOutlineWidth + border.color: Theme.outlineMedium clip: true Behavior on x { diff --git a/quickshell/Modals/Settings/SettingsSidebar.qml b/quickshell/Modals/Settings/SettingsSidebar.qml index 488955819..fea190602 100644 --- a/quickshell/Modals/Settings/SettingsSidebar.qml +++ b/quickshell/Modals/Settings/SettingsSidebar.qml @@ -90,7 +90,7 @@ Item { ancestor = ancestor.parent; if (!ancestor) return false; - } while (!item.visible || !item.enabled); + } while (!item.visible || !item.enabled) keyboardHighlightId = ""; item.forceActiveFocus(forward ? Qt.TabFocusReason : Qt.BacktabFocusReason); ensureRowVisible(item); @@ -219,19 +219,10 @@ Item { Component.onCompleted: GreeterService.refresh() - Rectangle { - anchors.right: parent.right - anchors.top: parent.top - anchors.bottom: parent.bottom - width: Theme.dividerWidth - color: Theme.outlineVariant - visible: !(root.parentModal?.isCompactMode ?? false) - } - DankSearchField { id: searchField - property real sideInset: root.searchActive ? Theme.spacingS : Theme.spacingL + property real sideInset: root.searchActive ? Theme.spacingS : SettingsMetrics.paneMargin Behavior on sideInset { enabled: Theme.currentAnimationSpeed !== SettingsData.AnimationSpeed.None @@ -247,7 +238,6 @@ Item { anchors.top: parent.top anchors.leftMargin: sideInset anchors.rightMargin: sideInset - anchors.topMargin: SettingsMetrics.searchBarGap height: SettingsMetrics.searchBarHeight placeholderText: I18n.tr("Search settings", "settings search field placeholder") onFocusStateChanged: hasFocus => { @@ -342,9 +332,9 @@ Item { Column { id: sidebarColumn width: parent.width - leftPadding: Theme.spacingL - rightPadding: Theme.spacingL - bottomPadding: Theme.spacingL + leftPadding: SettingsMetrics.paneMargin + rightPadding: SettingsMetrics.paneMargin + bottomPadding: SettingsMetrics.paneMargin spacing: SettingsMetrics.sidebarGroupGap ProfileSection { diff --git a/quickshell/Modules/Notepad/NotepadPopoutWindow.qml b/quickshell/Modules/Notepad/NotepadPopoutWindow.qml index 80a208033..d5399ddf9 100644 --- a/quickshell/Modules/Notepad/NotepadPopoutWindow.qml +++ b/quickshell/Modules/Notepad/NotepadPopoutWindow.qml @@ -59,10 +59,9 @@ DankFloatingWindow { anchors.left: parent.left anchors.right: parent.right anchors.bottom: parent.bottom - anchors.topMargin: Theme.spacingM - anchors.leftMargin: Theme.spacingM - anchors.rightMargin: Theme.spacingM - anchors.bottomMargin: Theme.spacingM + anchors.leftMargin: Theme.windowInset + anchors.rightMargin: Theme.windowInset + anchors.bottomMargin: Theme.windowInset inPopout: true surfaceVisible: win.visible onHideRequested: win.hide() diff --git a/quickshell/Modules/Settings/AboutTab.qml b/quickshell/Modules/Settings/AboutTab.qml index 8c7043aa7..e368089cf 100644 --- a/quickshell/Modules/Settings/AboutTab.qml +++ b/quickshell/Modules/Settings/AboutTab.qml @@ -223,7 +223,7 @@ Item { text: resourceButtonsRow.compactMode ? "" : I18n.tr("Docs") iconName: "menu_book" iconSize: 18 - backgroundColor: Theme.chipSurface + backgroundColor: SettingsMetrics.controlSurface textColor: Theme.surfaceText onClicked: Qt.openUrlExternally(Site.docs) } @@ -234,7 +234,7 @@ Item { text: resourceButtonsRow.compactMode ? "" : I18n.tr("Plugins") iconName: "extension" iconSize: 18 - backgroundColor: Theme.chipSurface + backgroundColor: SettingsMetrics.controlSurface textColor: Theme.surfaceText onClicked: Qt.openUrlExternally(Site.plugins) } @@ -245,7 +245,7 @@ Item { text: resourceButtonsRow.compactMode ? "" : "GitHub" iconName: "code" iconSize: 18 - backgroundColor: Theme.chipSurface + backgroundColor: SettingsMetrics.controlSurface textColor: Theme.surfaceText onClicked: Qt.openUrlExternally("https://github.com/AvengeMedia/DankMaterialShell") } diff --git a/quickshell/Modules/Settings/BarWidgetOptions/KeyboardLayoutOptions.qml b/quickshell/Modules/Settings/BarWidgetOptions/KeyboardLayoutOptions.qml index c34189791..c2e2e6da7 100644 --- a/quickshell/Modules/Settings/BarWidgetOptions/KeyboardLayoutOptions.qml +++ b/quickshell/Modules/Settings/BarWidgetOptions/KeyboardLayoutOptions.qml @@ -118,7 +118,7 @@ Column { width: overridesList.width height: 48 radius: Theme.cornerRadius - color: Theme.floatingWindowFieldColor + color: SettingsMetrics.controlColor border.width: 0 StyledText { diff --git a/quickshell/Modules/Settings/ChangelogTab.qml b/quickshell/Modules/Settings/ChangelogTab.qml index ad322c5b2..70a2c174c 100644 --- a/quickshell/Modules/Settings/ChangelogTab.qml +++ b/quickshell/Modules/Settings/ChangelogTab.qml @@ -36,7 +36,7 @@ Item { iconName: "refresh" busy: SystemUpdateService.isChecking enabled: !SystemUpdateService.isChecking - backgroundColor: Theme.chipSurface + backgroundColor: SettingsMetrics.controlSurface textColor: Theme.surfaceText onClicked: SystemUpdateService.loadReleases(true) } @@ -45,7 +45,7 @@ Item { anchors.verticalCenter: parent.verticalCenter text: I18n.tr("View on GitHub") iconName: "open_in_new" - backgroundColor: Theme.chipSurface + backgroundColor: SettingsMetrics.controlSurface textColor: Theme.surfaceText onClicked: Qt.openUrlExternally("https://github.com/AvengeMedia/DankMaterialShell/releases") } diff --git a/quickshell/Modules/Settings/ColorDropdownRow.qml b/quickshell/Modules/Settings/ColorDropdownRow.qml index 62723139f..ac72c0cd6 100644 --- a/quickshell/Modules/Settings/ColorDropdownRow.qml +++ b/quickshell/Modules/Settings/ColorDropdownRow.qml @@ -129,7 +129,7 @@ Column { width: parent.width - SettingsMetrics.rowPaddingH * 2 height: Theme.listItemHeight radius: Theme.cornerRadiusM - color: Theme.chipSurface + color: SettingsMetrics.controlColor activeFocusOnTab: root.currentMode === "custom" Accessible.role: Accessible.Button Accessible.name: I18n.tr("Custom color") diff --git a/quickshell/Modules/Settings/DisplayConfig/MonitorCanvas.qml b/quickshell/Modules/Settings/DisplayConfig/MonitorCanvas.qml index b188abca3..f682f2672 100644 --- a/quickshell/Modules/Settings/DisplayConfig/MonitorCanvas.qml +++ b/quickshell/Modules/Settings/DisplayConfig/MonitorCanvas.qml @@ -2,6 +2,7 @@ import QtQuick import qs.Common import qs.Services import qs.Widgets +import qs.Modules.Settings.Widgets Rectangle { id: root @@ -62,7 +63,7 @@ Rectangle { width: parent.width height: 280 radius: Theme.cornerRadius - color: Theme.floatingWindowNestedSurface + color: SettingsMetrics.rowColor border.color: Theme.outlineMedium border.width: Theme.layerOutlineWidth diff --git a/quickshell/Modules/Settings/DisplayConfig/MonitorRect.qml b/quickshell/Modules/Settings/DisplayConfig/MonitorRect.qml index ba97d463c..46c9572ee 100644 --- a/quickshell/Modules/Settings/DisplayConfig/MonitorRect.qml +++ b/quickshell/Modules/Settings/DisplayConfig/MonitorRect.qml @@ -2,6 +2,7 @@ import QtQuick import qs.Common import qs.Services import qs.Widgets +import qs.Modules.Settings.Widgets Rectangle { id: root @@ -29,14 +30,14 @@ Rectangle { color: { if (!isConnected) - return Theme.floatingWindowFieldColor; + return SettingsMetrics.controlColor; if (!isValidPosition) return Theme.withAlpha(Theme.error, 0.3); if (isDragging) return Theme.withAlpha(Theme.primary, 0.4); if (dragArea.containsMouse) return Theme.withAlpha(Theme.primary, 0.2); - return Theme.floatingWindowNestedSurface; + return SettingsMetrics.controlColor; } border.color: { diff --git a/quickshell/Modules/Settings/DisplayConfig/NoBackendMessage.qml b/quickshell/Modules/Settings/DisplayConfig/NoBackendMessage.qml index 7a10b6c96..7f5491714 100644 --- a/quickshell/Modules/Settings/DisplayConfig/NoBackendMessage.qml +++ b/quickshell/Modules/Settings/DisplayConfig/NoBackendMessage.qml @@ -1,6 +1,7 @@ import QtQuick import qs.Common import qs.Widgets +import qs.Modules.Settings.Widgets StyledRect { id: root @@ -11,7 +12,7 @@ StyledRect { width: parent.width height: messageContent.implicitHeight + Theme.spacingL * 2 radius: Theme.cornerRadius - color: Theme.floatingWindowNestedSurface + color: SettingsMetrics.rowColor border.color: Theme.outlineMedium border.width: Theme.layerOutlineWidth diff --git a/quickshell/Modules/Settings/DisplayConfig/OutputCard.qml b/quickshell/Modules/Settings/DisplayConfig/OutputCard.qml index 31c575dba..70f2f9be5 100644 --- a/quickshell/Modules/Settings/DisplayConfig/OutputCard.qml +++ b/quickshell/Modules/Settings/DisplayConfig/OutputCard.qml @@ -157,6 +157,7 @@ Column { DankDropdown { id: scaleDropdown downKeyOpens: false + backgroundColor: SettingsMetrics.controlSurface visible: !scaleRow.customMode width: Math.min(dropdownWidth, scaleRow.width - SettingsMetrics.rowPaddingH * 2) Accessible.name: scaleRow.title diff --git a/quickshell/Modules/Settings/DisplayConfigTab.qml b/quickshell/Modules/Settings/DisplayConfigTab.qml index 76c98c8df..2ad1ca8dd 100644 --- a/quickshell/Modules/Settings/DisplayConfigTab.qml +++ b/quickshell/Modules/Settings/DisplayConfigTab.qml @@ -141,6 +141,7 @@ Item { DankDropdown { id: profileDropdown downKeyOpens: false + backgroundColor: SettingsMetrics.controlSurface width: parent.width - newButton.width - editMonitorsButton.width - deleteButton.width - Theme.spacingS * 3 compactMode: true dropdownWidth: width @@ -166,7 +167,7 @@ Item { iconName: "add" text: "" horizontalPadding: Theme.spacingM - backgroundColor: Theme.chipSurface + backgroundColor: SettingsMetrics.controlSurface textColor: Theme.surfaceText enabled: !SettingsData.displayProfileAutoSelect onClicked: { @@ -181,7 +182,7 @@ Item { iconName: "edit" text: "" horizontalPadding: Theme.spacingM - backgroundColor: Theme.chipSurface + backgroundColor: SettingsMetrics.controlSurface textColor: Theme.surfaceText enabled: root.selectedProfileId !== "" && !SettingsData.displayProfileAutoSelect onClicked: root.openEditMonitorsDialog() @@ -193,7 +194,7 @@ Item { iconName: "delete" text: "" horizontalPadding: Theme.spacingM - backgroundColor: Theme.chipSurface + backgroundColor: SettingsMetrics.controlSurface textColor: Theme.error enabled: root.selectedProfileId !== "" && !SettingsData.displayProfileAutoSelect onClicked: root.showDeleteConfirmDialog = true diff --git a/quickshell/Modules/Settings/GammaControlTab.qml b/quickshell/Modules/Settings/GammaControlTab.qml index 92def50d4..1707cfbf3 100644 --- a/quickshell/Modules/Settings/GammaControlTab.qml +++ b/quickshell/Modules/Settings/GammaControlTab.qml @@ -19,7 +19,7 @@ Item { width: (parent.width - Theme.spacingM) / 2 height: tileColumn.implicitHeight + Theme.spacingM * 2 radius: Theme.cornerRadius - color: Theme.floatingWindowFieldColor + color: SettingsMetrics.controlColor border.color: Theme.floatingWindowFieldBorderColor border.width: Theme.outlineWidth diff --git a/quickshell/Modules/Settings/GreeterTab.qml b/quickshell/Modules/Settings/GreeterTab.qml index 9e2598a9c..7518a9d21 100644 --- a/quickshell/Modules/Settings/GreeterTab.qml +++ b/quickshell/Modules/Settings/GreeterTab.qml @@ -222,7 +222,7 @@ Item { monospace: true text: root.greeterStatusOutput tint: root.greeterStatusRunning ? Theme.surfaceVariantText : Theme.surfaceText - tintBackground: Theme.floatingWindowFieldColor + tintBackground: SettingsMetrics.controlColor } } diff --git a/quickshell/Modules/Settings/LockScreenTab.qml b/quickshell/Modules/Settings/LockScreenTab.qml index 54a44fdb7..a9be3d9c8 100644 --- a/quickshell/Modules/Settings/LockScreenTab.qml +++ b/quickshell/Modules/Settings/LockScreenTab.qml @@ -606,7 +606,7 @@ Item { width: 200 anchors.verticalCenter: parent.verticalCenter text: capturing ? I18n.tr("Press key...", "lock screen security key shortcut key combination capture prompt") : SettingsData.lockScreenSecurityKeyShortcut - backgroundColor: capturing ? Theme.selectedContainer : Theme.chipSurface + backgroundColor: capturing ? Theme.selectedContainer : SettingsMetrics.controlColor textColor: Theme.surfaceText property bool capturing: false @@ -809,7 +809,7 @@ Item { maxHeight: SettingsMetrics.noteMaxHeight text: root.authValidateMessage tint: !root.authValidateOk ? Theme.error : (root.authValidateWarn ? Theme.warning : Theme.surfaceVariantText) - tintBackground: Theme.floatingWindowFieldColor + tintBackground: SettingsMetrics.controlColor } SettingsDropdownRow { @@ -863,7 +863,7 @@ Item { maxHeight: SettingsMetrics.noteMaxHeight text: root.u2fValidateMessage tint: !root.u2fValidateOk ? Theme.error : (root.u2fValidateWarn ? Theme.warning : Theme.surfaceVariantText) - tintBackground: Theme.floatingWindowFieldColor + tintBackground: SettingsMetrics.controlColor } SettingsRow { diff --git a/quickshell/Modules/Settings/NetworkCellularTab.qml b/quickshell/Modules/Settings/NetworkCellularTab.qml index 06c83f52b..ee0211746 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.floatingWindowFieldColor + color: isConnected ? Theme.selectedContainer : modemMouseArea.containsMouse ? Theme.primaryHoverLight : SettingsMetrics.controlColor border.width: Theme.layerOutlineWidth border.color: Theme.outlineMedium @@ -212,7 +212,7 @@ Item { width: parent.width height: 56 radius: Theme.cornerRadius - color: isActive ? Theme.selectedContainer : profileMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.floatingWindowFieldColor + color: isActive ? Theme.selectedContainer : profileMouseArea.containsMouse ? Theme.primaryHoverLight : SettingsMetrics.controlColor border.color: Theme.outlineMedium border.width: Theme.layerOutlineWidth diff --git a/quickshell/Modules/Settings/NetworkEthernetTab.qml b/quickshell/Modules/Settings/NetworkEthernetTab.qml index df2a54dd2..0b6d9ed87 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.floatingWindowFieldColor + color: isConnected ? Theme.selectedContainer : ethDeviceMouseArea.containsMouse ? Theme.primaryHoverLight : SettingsMetrics.controlColor border.width: Theme.layerOutlineWidth border.color: Theme.outlineMedium clip: true @@ -312,7 +312,7 @@ Item { width: parent.width height: 48 radius: Theme.cornerRadius - color: modelData.isActive ? Theme.selectedContainer : wiredMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.floatingWindowFieldColor + color: modelData.isActive ? Theme.selectedContainer : wiredMouseArea.containsMouse ? Theme.primaryHoverLight : SettingsMetrics.controlColor border.width: Theme.layerOutlineWidth border.color: Theme.outlineMedium diff --git a/quickshell/Modules/Settings/NetworkWifiTab.qml b/quickshell/Modules/Settings/NetworkWifiTab.qml index 9196d9474..6a7aab381 100644 --- a/quickshell/Modules/Settings/NetworkWifiTab.qml +++ b/quickshell/Modules/Settings/NetworkWifiTab.qml @@ -920,7 +920,7 @@ Item { visible: hotspotCard.editing text: I18n.tr("Cancel", "cancel hotspot editing action") buttonHeight: 36 - backgroundColor: Theme.chipSurface + backgroundColor: SettingsMetrics.controlSurface textColor: Theme.surfaceText onClicked: hotspotCard.stopEditing() } @@ -931,7 +931,7 @@ Item { iconName: "edit" buttonHeight: 36 enabled: !NetworkService.hotspotEnabled && !hotspotCard.starting - backgroundColor: Theme.chipSurface + backgroundColor: SettingsMetrics.controlSurface textColor: Theme.surfaceText onClicked: hotspotCard.beginEditing() } @@ -942,7 +942,7 @@ Item { iconName: "save" buttonHeight: 36 enabled: hotspotCard.buildCanConfigure() - backgroundColor: Theme.chipSurface + backgroundColor: SettingsMetrics.controlSurface textColor: Theme.surfaceText onClicked: hotspotCard.saveOnly() } diff --git a/quickshell/Modules/Settings/PaletteInjectTab.qml b/quickshell/Modules/Settings/PaletteInjectTab.qml index 32f01be36..7a947df2b 100644 --- a/quickshell/Modules/Settings/PaletteInjectTab.qml +++ b/quickshell/Modules/Settings/PaletteInjectTab.qml @@ -56,7 +56,7 @@ Item { width: parent.width height: paletteColumn.implicitHeight + Theme.spacingM * 2 radius: Theme.cornerRadius - color: Theme.floatingWindowFieldColor + color: SettingsMetrics.controlColor Column { id: paletteColumn diff --git a/quickshell/Modules/Settings/PluginBadge.qml b/quickshell/Modules/Settings/PluginBadge.qml index 3cf9e1b83..f16eb704a 100644 --- a/quickshell/Modules/Settings/PluginBadge.qml +++ b/quickshell/Modules/Settings/PluginBadge.qml @@ -1,6 +1,7 @@ import QtQuick import qs.Common import qs.Widgets +import qs.Modules.Settings.Widgets Rectangle { id: root @@ -12,7 +13,7 @@ Rectangle { height: Theme.iconSize width: content.implicitWidth + Theme.spacingS * 2 radius: Theme.cornerRadiusS - color: Theme.chipSurface + color: SettingsMetrics.controlColor border.color: Theme.outlineVariant border.width: Theme.outlineWidth diff --git a/quickshell/Modules/Settings/PluginBrowser.qml b/quickshell/Modules/Settings/PluginBrowser.qml index ec7f8fd04..03be44161 100644 --- a/quickshell/Modules/Settings/PluginBrowser.qml +++ b/quickshell/Modules/Settings/PluginBrowser.qml @@ -615,7 +615,7 @@ RegistryBrowserWindow { visible: root.operationMessage !== "" tone: "primary" pad: Theme.spacingM - color: root.operationFailed ? Theme.errorContainer : surfaceColor + color: root.operationFailed ? Theme.errorContainer : SettingsMetrics.rowColor Accessible.name: root.operationMessage RowLayout { @@ -698,6 +698,7 @@ RegistryBrowserWindow { DankDropdown { Layout.fillWidth: true Layout.preferredHeight: Theme.buttonHeightS + backgroundColor: SettingsMetrics.controlSurface compactMode: true dropdownWidth: Math.max(Theme.smallBreakpoint / 2, categoryFiltersRow.width - categoryFilterLabel.implicitWidth - Theme.spacingS * 3) currentValue: root.categoryFilterLabelForKey(root.categoryFilter) @@ -779,7 +780,7 @@ RegistryBrowserWindow { horizontalPadding: 0 buttonHeight: Theme.buttonHeightXS text: modelData - backgroundColor: Theme.chipSurface + backgroundColor: SettingsMetrics.controlSurface textColor: Theme.onSurfaceVariant onClicked: root.scrollToLetter(modelData) } @@ -839,7 +840,7 @@ RegistryBrowserWindow { anchors.horizontalCenter: parent.horizontalCenter text: I18n.tr("Retry", "retry failed action button") iconName: "refresh" - backgroundColor: Theme.chipSurface + backgroundColor: SettingsMetrics.controlSurface textColor: Theme.surfaceText onClicked: root.refreshPlugins() } @@ -948,10 +949,10 @@ RegistryBrowserWindow { spacing: Theme.spacingL Rectangle { - width: Math.min(SettingsMetrics.contentMaxWidth, parent.width) + width: Math.min(SettingsMetrics.mediaMaxWidth, parent.width) height: Math.round(width * SettingsMetrics.choiceCardPreviewRatio) radius: Theme.cornerRadiusM - color: Theme.floatingWindowNestedSurface + color: SettingsMetrics.rowColor border.color: Theme.outlineMedium border.width: Theme.layerOutlineWidth diff --git a/quickshell/Modules/Settings/PluginCard.qml b/quickshell/Modules/Settings/PluginCard.qml index 0495e003e..025acf317 100644 --- a/quickshell/Modules/Settings/PluginCard.qml +++ b/quickshell/Modules/Settings/PluginCard.qml @@ -27,7 +27,7 @@ DankCard { implicitHeight: previewHeight + infoHeight + Theme.spacingS * 2 + Theme.spacingM radius: Theme.cornerRadiusM - color: Theme.floatingWindowNestedSurface + color: SettingsMetrics.rowColor border.color: focusRingShown ? Theme.focusRingColor : Theme.outlineMedium border.width: focusRingShown ? Theme.focusRingWidth : Theme.layerOutlineWidth pad: 0 @@ -46,7 +46,7 @@ DankCard { ClippingRectangle { anchors.fill: parent radius: Theme.cornerRadiusS - color: Theme.chipSurface + color: SettingsMetrics.controlColor CachingImage { id: cardPreview diff --git a/quickshell/Modules/Settings/PluginsHubHeader.qml b/quickshell/Modules/Settings/PluginsHubHeader.qml index 5f1f1bb8b..08ea1a292 100644 --- a/quickshell/Modules/Settings/PluginsHubHeader.qml +++ b/quickshell/Modules/Settings/PluginsHubHeader.qml @@ -432,6 +432,7 @@ Column { DankCard { id: storeCard + color: SettingsMetrics.rowColor width: parent.width implicitHeight: storeContent.implicitHeight + pad * 2 visible: root.plugins.length === 0 @@ -608,7 +609,7 @@ Column { pad: Theme.spacingL radius: Theme.cornerRadiusM readonly property string highlightKey: "installedPlugin:" + modelData.pluginId - color: SettingsSearchService.highlightSection === highlightKey ? Theme.blend(surfaceColor, Theme.primary, SettingsMetrics.highlightBlend) : surfaceColor + color: SettingsSearchService.highlightSection === highlightKey ? Theme.blend(SettingsMetrics.rowColor, Theme.primary, SettingsMetrics.highlightBlend) : SettingsMetrics.rowColor clickable: true Accessible.name: modelData.text onClicked: keyboard => root.parentModal?.navigateTo(modelData.id, keyboard) diff --git a/quickshell/Modules/Settings/PowerSleepTab.qml b/quickshell/Modules/Settings/PowerSleepTab.qml index 1d7344cff..2f3771c56 100644 --- a/quickshell/Modules/Settings/PowerSleepTab.qml +++ b/quickshell/Modules/Settings/PowerSleepTab.qml @@ -302,6 +302,7 @@ Item { DankDropdown { id: bootEntryDropdown downKeyOpens: false + backgroundColor: SettingsMetrics.controlSurface enabled: bootEntryPicker.options.length > 0 Accessible.name: bootEntryPicker.title width: Math.min(dropdownWidth, bootEntryPicker.width - SettingsMetrics.rowPaddingH * 2) diff --git a/quickshell/Modules/Settings/PrinterTab.qml b/quickshell/Modules/Settings/PrinterTab.qml index a9f82b193..cd81c185b 100644 --- a/quickshell/Modules/Settings/PrinterTab.qml +++ b/quickshell/Modules/Settings/PrinterTab.qml @@ -590,7 +590,7 @@ Item { text: printerDelegate.isStopped ? I18n.tr("Resume", "verb, button that resumes a paused printer") : I18n.tr("Pause") iconName: printerDelegate.isStopped ? "play_arrow" : "pause" buttonHeight: Theme.buttonHeightXS - backgroundColor: Theme.chipSurface + backgroundColor: SettingsMetrics.controlSurface textColor: Theme.surfaceText onClicked: { if (printerDelegate.isStopped) { @@ -605,7 +605,7 @@ Item { text: I18n.tr("Test page") iconName: "description" buttonHeight: Theme.buttonHeightXS - backgroundColor: Theme.chipSurface + backgroundColor: SettingsMetrics.controlSurface textColor: Theme.surfaceText onClicked: CupsService.printTestPage(printerDelegate.modelData) } @@ -614,7 +614,7 @@ Item { text: printerDelegate.printerData?.accepting ? I18n.tr("Reject jobs") : I18n.tr("Accept jobs") iconName: printerDelegate.printerData?.accepting ? "block" : "check_circle" buttonHeight: Theme.buttonHeightXS - backgroundColor: Theme.chipSurface + backgroundColor: SettingsMetrics.controlSurface textColor: Theme.surfaceText onClicked: { if (printerDelegate.printerData?.accepting) { @@ -643,7 +643,7 @@ Item { text: I18n.tr("Clear All") iconName: "delete_sweep" buttonHeight: Theme.buttonHeightXS - backgroundColor: Theme.chipSurface + backgroundColor: SettingsMetrics.controlSurface textColor: Theme.surfaceText onClicked: { purgeJobsConfirm.showWithOptions({ diff --git a/quickshell/Modules/Settings/RegistryBrowserWindow.qml b/quickshell/Modules/Settings/RegistryBrowserWindow.qml index 7b02e65d8..5afc63453 100644 --- a/quickshell/Modules/Settings/RegistryBrowserWindow.qml +++ b/quickshell/Modules/Settings/RegistryBrowserWindow.qml @@ -185,10 +185,9 @@ DankFloatingWindow { anchors.right: parent.right anchors.top: headerArea.bottom anchors.bottom: parent.bottom - anchors.leftMargin: Theme.spacingL - anchors.rightMargin: Theme.spacingL - anchors.topMargin: Theme.spacingM - anchors.bottomMargin: Theme.spacingL + anchors.leftMargin: Theme.windowInset + anchors.rightMargin: Theme.windowInset + anchors.bottomMargin: Theme.windowInset Item { id: browserBody diff --git a/quickshell/Modules/Settings/SoftwareUpdatesTab.qml b/quickshell/Modules/Settings/SoftwareUpdatesTab.qml index c598242e0..22c226a26 100644 --- a/quickshell/Modules/Settings/SoftwareUpdatesTab.qml +++ b/quickshell/Modules/Settings/SoftwareUpdatesTab.qml @@ -330,7 +330,7 @@ Item { buttonSize: Theme.buttonHeightS iconName: "refresh" iconColor: Theme.surfaceText - backgroundColor: Theme.chipSurface + backgroundColor: SettingsMetrics.controlSurface Accessible.name: I18n.tr("Check for updates") onClicked: SystemUpdateService.checkForUpdates() } @@ -439,7 +439,7 @@ Item { anchors.verticalCenter: parent.verticalCenter text: I18n.tr("Restart DMS") iconName: "restart_alt" - backgroundColor: Theme.chipSurface + backgroundColor: SettingsMetrics.controlSurface textColor: Theme.surfaceText onClicked: SystemUpdateService.restartShell() } @@ -477,7 +477,7 @@ Item { visible: root.systemCount > 0 && !SystemUpdateService.isUpgrading text: I18n.tr("Update All") iconName: "system_update_alt" - backgroundColor: Theme.chipSurface + backgroundColor: SettingsMetrics.controlSurface textColor: Theme.surfaceText enabled: !root.busy onClicked: root.runUpdateAll() @@ -556,7 +556,7 @@ Item { visible: root.upgradeFailed && !root.upgradeRunsInTerminal text: I18n.tr("Open in terminal") iconName: "terminal" - backgroundColor: Theme.chipSurface + backgroundColor: SettingsMetrics.controlSurface textColor: Theme.surfaceText onClicked: root.runUpdateAll(true) } diff --git a/quickshell/Modules/Settings/ThemeColorsTab.qml b/quickshell/Modules/Settings/ThemeColorsTab.qml index 3f465dcd9..c447b8a43 100644 --- a/quickshell/Modules/Settings/ThemeColorsTab.qml +++ b/quickshell/Modules/Settings/ThemeColorsTab.qml @@ -126,8 +126,8 @@ Item { clip: true DankButtonGroup { - arrowKeysSelect: false id: themeCategoryGroup + arrowKeysSelect: false anchors.horizontalCenter: parent.horizontalCenter buttonPadding: parent.width < 420 ? Theme.spacingS : Theme.spacingL minButtonWidth: parent.width < 420 ? 44 : 64 @@ -211,7 +211,7 @@ Item { width: 120 height: 90 radius: Theme.cornerRadius - color: Theme.floatingWindowFieldColor + color: SettingsMetrics.controlColor border.width: Theme.layerOutlineWidth border.color: Theme.outlineMedium @@ -666,8 +666,8 @@ Item { visible: variantSelector.isMultiVariant && variantSelector.flavorOptions.length > 1 DankButtonGroup { - arrowKeysSelect: false id: flavorButtonGroup + arrowKeysSelect: false anchors.horizontalCenter: parent.horizontalCenter property int _count: variantSelector.flavorNames.length property real _maxPerItem: _count > 1 ? (parent.width - (_count - 1) * spacing) / _count : parent.width @@ -743,8 +743,8 @@ Item { visible: !variantSelector.isMultiVariant && variantSelector.variantNames.length > 0 DankButtonGroup { - arrowKeysSelect: false id: variantButtonGroup + arrowKeysSelect: false anchors.horizontalCenter: parent.horizontalCenter property int _count: variantSelector.variantNames.length property real _maxPerItem: _count > 1 ? (parent.width - (_count - 1) * spacing) / _count : parent.width diff --git a/quickshell/Modules/Settings/TypographyMotionTab.qml b/quickshell/Modules/Settings/TypographyMotionTab.qml index 1e8a23d4a..da786c0cd 100644 --- a/quickshell/Modules/Settings/TypographyMotionTab.qml +++ b/quickshell/Modules/Settings/TypographyMotionTab.qml @@ -167,7 +167,7 @@ Item { width: motionPreview.laneWidth height: parent.height radius: Theme.cornerRadiusM - color: Theme.chipSurface + color: SettingsMetrics.controlColor StyledText { x: parent.width - width - Theme.spacingL diff --git a/quickshell/Modules/Settings/WallpaperColorsTab.qml b/quickshell/Modules/Settings/WallpaperColorsTab.qml index ca0a3c0ae..4307a9a9d 100644 --- a/quickshell/Modules/Settings/WallpaperColorsTab.qml +++ b/quickshell/Modules/Settings/WallpaperColorsTab.qml @@ -188,7 +188,7 @@ Column { id: hero readonly property bool stacked: width < SettingsMetrics.wallpaperHeroStackWidth - readonly property real thumbWidth: stacked ? width : Math.round(width * SettingsMetrics.wallpaperHeroSplit) + readonly property real thumbWidth: stacked ? width : Math.round(Math.min(width, SettingsMetrics.mediaMaxWidth) * SettingsMetrics.wallpaperHeroSplit) width: parent.width spacing: Theme.spacingL @@ -211,8 +211,8 @@ Column { spacing: Theme.spacingM DankButtonGroup { - arrowKeysSelect: false id: modeGroup + arrowKeysSelect: false width: parent.width fillWidth: true checkEnabled: false @@ -242,7 +242,7 @@ Column { SettingsGroup { id: navGroup width: parent.width - slotColor: Theme.foregroundColor(Theme.chipSurface, true) + slotColor: SettingsMetrics.controlColor SettingsNavRow { tab: "wallpaper" diff --git a/quickshell/Modules/Settings/WallpaperCyclingTab.qml b/quickshell/Modules/Settings/WallpaperCyclingTab.qml index 37bae85bf..e9036d1cf 100644 --- a/quickshell/Modules/Settings/WallpaperCyclingTab.qml +++ b/quickshell/Modules/Settings/WallpaperCyclingTab.qml @@ -149,7 +149,7 @@ Item { iconName: "skip_previous" iconSize: Theme.iconSizeMedium iconColor: Theme.surfaceText - backgroundColor: Theme.chipSurface + backgroundColor: SettingsMetrics.controlSurface enabled: root.canCycle Accessible.name: I18n.tr("Previous") anchors.verticalCenter: parent.verticalCenter @@ -161,7 +161,7 @@ Item { iconName: "skip_next" iconSize: Theme.iconSizeMedium iconColor: Theme.surfaceText - backgroundColor: Theme.chipSurface + backgroundColor: SettingsMetrics.controlSurface enabled: root.canCycle Accessible.name: I18n.tr("Next") anchors.verticalCenter: parent.verticalCenter diff --git a/quickshell/Modules/Settings/WidgetPickerWindow.qml b/quickshell/Modules/Settings/WidgetPickerWindow.qml index 27a48a63a..aea66c05b 100644 --- a/quickshell/Modules/Settings/WidgetPickerWindow.qml +++ b/quickshell/Modules/Settings/WidgetPickerWindow.qml @@ -178,7 +178,8 @@ DankFloatingWindow { Column { anchors.fill: parent - anchors.margins: Theme.spacingL + anchors.margins: Theme.windowInset + anchors.topMargin: 0 spacing: Theme.spacingM StyledText { diff --git a/quickshell/Modules/Settings/Widgets/AppBrowserPopup.qml b/quickshell/Modules/Settings/Widgets/AppBrowserPopup.qml index 89e0c82d4..dd8f2d017 100644 --- a/quickshell/Modules/Settings/Widgets/AppBrowserPopup.qml +++ b/quickshell/Modules/Settings/Widgets/AppBrowserPopup.qml @@ -72,7 +72,8 @@ DankFloatingWindow { Column { anchors.fill: parent - anchors.margins: Theme.spacingL + anchors.margins: Theme.windowInset + anchors.topMargin: 0 spacing: Theme.spacingM DankSearchField { diff --git a/quickshell/Modules/Settings/Widgets/SettingsColorPicker.qml b/quickshell/Modules/Settings/Widgets/SettingsColorPicker.qml index 610b113cd..794f66026 100644 --- a/quickshell/Modules/Settings/Widgets/SettingsColorPicker.qml +++ b/quickshell/Modules/Settings/Widgets/SettingsColorPicker.qml @@ -47,7 +47,7 @@ SettingsRow { width: (parent.width - Theme.spacingS * 2) / 3 height: Theme.listItemHeight + Theme.spacingXS radius: Theme.cornerRadius - color: root.colorMode === modelData.id ? Theme.primarySelected : Theme.chipSurface + color: root.colorMode === modelData.id ? Theme.primarySelected : SettingsMetrics.controlColor border.color: root.colorMode === modelData.id ? Theme.primary : Theme.withAlpha(Theme.primary, 0) border.width: Theme.outlineWidthFocused diff --git a/quickshell/Modules/Settings/Widgets/SettingsDropdownRow.qml b/quickshell/Modules/Settings/Widgets/SettingsDropdownRow.qml index ddd76c34d..7648428a3 100644 --- a/quickshell/Modules/Settings/Widgets/SettingsDropdownRow.qml +++ b/quickshell/Modules/Settings/Widgets/SettingsDropdownRow.qml @@ -42,6 +42,7 @@ SettingsRow { DankDropdown { id: dropdown downKeyOpens: false + backgroundColor: SettingsMetrics.controlSurface enabled: root.enabled Accessible.name: root.text Accessible.description: root.description + (root.description ? " ยท " : "") + currentValue diff --git a/quickshell/Modules/Settings/Widgets/SettingsLayoutPicker.qml b/quickshell/Modules/Settings/Widgets/SettingsLayoutPicker.qml index 83af55d7d..7dee54be6 100644 --- a/quickshell/Modules/Settings/Widgets/SettingsLayoutPicker.qml +++ b/quickshell/Modules/Settings/Widgets/SettingsLayoutPicker.qml @@ -106,7 +106,7 @@ GridLayout { implicitWidth: root.minimumCardWidth implicitHeight: Math.max(Math.round(Theme.fontSizeMedium * root.cardHeightRatio), cardContent.implicitHeight + Theme.spacingM * 2) radius: Theme.cornerRadius - color: Theme.floatingWindowNestedSurface + color: SettingsMetrics.rowColor border.width: isActive ? Theme.outlineWidthFocused : Theme.layerOutlineWidth border.color: isActive ? Theme.primary : Theme.outlineMedium @@ -146,7 +146,7 @@ GridLayout { width: Math.min(root.previewWidth, cardContent.width) height: Math.round(width * root.previewAspect) radius: Theme.spacingXS - color: Theme.chipSurface + color: SettingsMetrics.controlColor border.width: Theme.outlineWidth border.color: Theme.outline anchors.horizontalCenter: parent.horizontalCenter diff --git a/quickshell/Modules/Settings/Widgets/SettingsLocationSection.qml b/quickshell/Modules/Settings/Widgets/SettingsLocationSection.qml index 963a23a28..40d30d8a3 100644 --- a/quickshell/Modules/Settings/Widgets/SettingsLocationSection.qml +++ b/quickshell/Modules/Settings/Widgets/SettingsLocationSection.qml @@ -59,7 +59,7 @@ Column { height: Theme.iconButtonSize + Theme.spacingS text: "" placeholderText: "40.7128" - backgroundColor: Theme.floatingWindowFieldColor + backgroundColor: SettingsMetrics.controlSurface normalBorderColor: Theme.primarySelected keyNavigationTab: longitudeField @@ -97,7 +97,7 @@ Column { height: Theme.iconButtonSize + Theme.spacingS text: "" placeholderText: "-74.0060" - backgroundColor: Theme.floatingWindowFieldColor + backgroundColor: SettingsMetrics.controlSurface normalBorderColor: Theme.primarySelected keyNavigationBacktab: latitudeField diff --git a/quickshell/Modules/Settings/Widgets/SettingsMetrics.qml b/quickshell/Modules/Settings/Widgets/SettingsMetrics.qml index 1c3b05743..4615ca594 100644 --- a/quickshell/Modules/Settings/Widgets/SettingsMetrics.qml +++ b/quickshell/Modules/Settings/Widgets/SettingsMetrics.qml @@ -7,7 +7,8 @@ import qs.Common Singleton { readonly property real sidebarWidth: 320 readonly property real compactBreakpoint: 700 - readonly property real contentMaxWidth: 720 + readonly property real contentMaxWidth: Number.POSITIVE_INFINITY + readonly property real mediaMaxWidth: 720 readonly property real windowWidth: 1100 readonly property real windowHeight: 940 readonly property real windowMinWidth: 500 @@ -15,7 +16,9 @@ Singleton { readonly property real formDialogWidth: 640 readonly property real pagePaddingH: 40 readonly property real pagePaddingV: 32 - readonly property real scrollGutter: 32 + readonly property real paneMargin: Theme.windowInset + readonly property real panePadding: Theme.spacingXL + readonly property real paneRadius: Theme.cornerRadiusL readonly property real pageHeaderHeight: Theme.fontSizeXXLarge + Theme.spacingXL + Theme.spacingM readonly property real rowPaddingH: 20 readonly property real rowPaddingV: 16 @@ -46,7 +49,11 @@ Singleton { readonly property real previewTileMinWidth: 140 readonly property real emptyStateHeight: 100 readonly property real noteMaxHeight: 160 - readonly property color rowColor: Theme.foregroundColor(Theme.cardSurface, true) + readonly property color paneColor: Theme.floatingWindowNestedSurface + readonly property color sidebarRowColor: Theme.floatingWindowNestedSurface + readonly property color rowColor: Theme.foregroundColor(Theme.chipSurface, true) + readonly property color controlSurface: Theme.chipSurfaceNested + readonly property color controlColor: Theme.foregroundColor(controlSurface, true) readonly property color rowHighlightColor: Theme.withAlpha(Theme.primary, highlightBlend) readonly property color selectedRowColor: Theme.selectedContainer readonly property int transitionDuration: Theme.expressiveDurations.expressiveFastSpatial diff --git a/quickshell/Modules/Settings/Widgets/SettingsPage.qml b/quickshell/Modules/Settings/Widgets/SettingsPage.qml index 006deae19..8ffafb889 100644 --- a/quickshell/Modules/Settings/Widgets/SettingsPage.qml +++ b/quickshell/Modules/Settings/Widgets/SettingsPage.qml @@ -8,7 +8,7 @@ DankFlickable { default property alias content: column.data property alias spacing: column.spacing property alias columnWidth: column.width - property int contentMaxWidth: SettingsMetrics.contentMaxWidth + property real contentMaxWidth: SettingsMetrics.contentMaxWidth property Item fabBar: null anchors.fill: parent @@ -19,7 +19,7 @@ DankFlickable { Column { id: column topPadding: Theme.spacingXS - width: Math.min(root.contentMaxWidth, parent.width - Theme.spacingL * 2) + width: Math.min(root.contentMaxWidth, parent.width) bottomPadding: SettingsMetrics.pagePaddingV + (root.fabBar?.reservedHeight ?? 0) anchors.horizontalCenter: parent.horizontalCenter spacing: Theme.spacingL diff --git a/quickshell/Modules/Settings/Widgets/SettingsScreenPositionPicker.qml b/quickshell/Modules/Settings/Widgets/SettingsScreenPositionPicker.qml index 769594371..8ec526bc9 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.chipSurface + color: SettingsMetrics.controlColor border.width: Theme.outlineWidth border.color: Theme.outlineVariant diff --git a/quickshell/Modules/Settings/Widgets/SettingsSidebarItem.qml b/quickshell/Modules/Settings/Widgets/SettingsSidebarItem.qml index 10d68cc62..2a1b66b79 100644 --- a/quickshell/Modules/Settings/Widgets/SettingsSidebarItem.qml +++ b/quickshell/Modules/Settings/Widgets/SettingsSidebarItem.qml @@ -63,7 +63,7 @@ Rectangle { topRightRadius: topRadius bottomLeftRadius: bottomRadius bottomRightRadius: bottomRadius - color: active ? SettingsMetrics.selectedRowColor : SettingsMetrics.rowColor + color: active ? SettingsMetrics.selectedRowColor : SettingsMetrics.sidebarRowColor border.width: Theme.layerOutlineWidth border.color: Theme.outlineMedium diff --git a/quickshell/Modules/Settings/Widgets/SettingsSwatchGrid.qml b/quickshell/Modules/Settings/Widgets/SettingsSwatchGrid.qml index 5bce9119f..808c1b169 100644 --- a/quickshell/Modules/Settings/Widgets/SettingsSwatchGrid.qml +++ b/quickshell/Modules/Settings/Widgets/SettingsSwatchGrid.qml @@ -42,7 +42,7 @@ Flow { width: root.tileWidth height: root.compact ? root.compactTileHeight : media.height + label.implicitHeight + Theme.spacingS * 3 radius: Theme.cornerRadiusM - color: Theme.floatingWindowFieldColor + color: SettingsMetrics.controlColor border.width: isActive ? Theme.outlineWidthFocused : Theme.layerOutlineWidth border.color: isActive ? Theme.primary : Theme.outlineMedium @@ -133,7 +133,7 @@ Flow { visible: tile.deletable && !root.compact && (tile.activeFocus || activeFocus || hovered || tileState.containsMouse) iconName: "delete" iconColor: Theme.error - backgroundColor: Theme.floatingWindowFieldColor + backgroundColor: SettingsMetrics.controlSurface tooltipText: I18n.tr("Delete") onClicked: root.deleteRequested(tile.modelData.value) } diff --git a/quickshell/Modules/Settings/Widgets/SettingsWallpaperThumb.qml b/quickshell/Modules/Settings/Widgets/SettingsWallpaperThumb.qml index 5c236c54f..5f6620da6 100644 --- a/quickshell/Modules/Settings/Widgets/SettingsWallpaperThumb.qml +++ b/quickshell/Modules/Settings/Widgets/SettingsWallpaperThumb.qml @@ -21,7 +21,7 @@ Rectangle { height: width * SettingsMetrics.wallpaperThumbRatio radius: Theme.cornerRadiusM - color: isColor ? path : Theme.chipSurface + color: isColor ? path : SettingsMetrics.controlColor ClippingRectangle { anchors.fill: parent @@ -79,7 +79,7 @@ Rectangle { buttonSize: Theme.iconButtonSize iconName: "folder_open" iconSize: Theme.iconSizeMedium - backgroundColor: Theme.chipSurface + backgroundColor: SettingsMetrics.controlSurface iconColor: Theme.surfaceText Accessible.name: I18n.tr("Browse") onClicked: root.browse() @@ -89,7 +89,7 @@ Rectangle { buttonSize: Theme.iconButtonSize iconName: "palette" iconSize: Theme.iconSizeMedium - backgroundColor: Theme.chipSurface + backgroundColor: SettingsMetrics.controlSurface iconColor: Theme.surfaceText visible: root.allowColor tooltipText: I18n.tr("Custom") @@ -100,7 +100,7 @@ Rectangle { buttonSize: Theme.iconButtonSize iconName: "close" iconSize: Theme.iconSizeMedium - backgroundColor: Theme.chipSurface + backgroundColor: SettingsMetrics.controlSurface iconColor: Theme.error visible: root.path !== "" Accessible.name: I18n.tr("Clear") diff --git a/quickshell/Modules/Settings/WindowRulesTab.qml b/quickshell/Modules/Settings/WindowRulesTab.qml index 39ada45dd..669f109a5 100644 --- a/quickshell/Modules/Settings/WindowRulesTab.qml +++ b/quickshell/Modules/Settings/WindowRulesTab.qml @@ -344,6 +344,7 @@ Item { DankDropdown { id: windowSelector downKeyOpens: false + backgroundColor: SettingsMetrics.controlSurface anchors.verticalCenter: parent.verticalCenter dropdownWidth: Math.min(400, createRuleRow.width - SettingsMetrics.rowPaddingH * 2) compactMode: true @@ -526,7 +527,7 @@ Item { visible: externalCard.sourceFile.length > 0 anchors.verticalCenter: parent.verticalCenter text: externalCard.sourceFile - color: Theme.floatingWindowFieldColor + color: SettingsMetrics.controlColor textColor: Theme.surfaceVariantText }