diff --git a/dank-qml-common b/dank-qml-common index ed962e6c0..3ceee0174 160000 --- a/dank-qml-common +++ b/dank-qml-common @@ -1 +1 @@ -Subproject commit ed962e6c03f38cd1bc24d617d1ed551989a9eb70 +Subproject commit 3ceee0174f558a0908eea83910f07af24dc8dc73 diff --git a/flake.lock b/flake.lock index bb0fd5f93..1955156ce 100644 --- a/flake.lock +++ b/flake.lock @@ -3,11 +3,11 @@ "dank-qml-common": { "flake": false, "locked": { - "lastModified": 1790620949, - "narHash": "sha256-GtqOop7cBhuRo8K8iUbIwrAGGwh/gDv2czNkBv/sTBo=", + "lastModified": 1790625801, + "narHash": "sha256-0Kp9h1acdzOHcSixIXV5TCOfDsWzrOnfW9JX6/RaeuA=", "owner": "AvengeMedia", "repo": "dank-qml-common", - "rev": "ed962e6c03f38cd1bc24d617d1ed551989a9eb70", + "rev": "3ceee0174f558a0908eea83910f07af24dc8dc73", "type": "github" }, "original": { diff --git a/quickshell/Common/Theme.qml b/quickshell/Common/Theme.qml index b91ef7b81..908de6274 100644 --- a/quickshell/Common/Theme.qml +++ b/quickshell/Common/Theme.qml @@ -244,7 +244,7 @@ Singleton { "primaryContainer": getMatugenColorForMode(colorMode, "primary_container", "#1976d2"), "onPrimaryContainer": getMatugenColorForMode(colorMode, "on_primary_container"), "secondary": getMatugenColorForMode(colorMode, "secondary", "#8ab4f8"), - "secondaryContainer": getMatugenColorForMode(colorMode, "secondary_container", getMatugenColorForMode(colorMode, "surface_container_high", "#292b2f")), + "secondaryContainer": getMatugenColorForMode(colorMode, "secondary_container"), "onSecondaryContainer": getMatugenColorForMode(colorMode, "on_secondary_container"), "tertiary": getMatugenColorForMode(colorMode, "tertiary", "#efb8c8"), "tertiaryContainer": getMatugenColorForMode(colorMode, "tertiary_container", getMatugenColorForMode(colorMode, "surface_container_high", "#292b2f")), @@ -411,9 +411,11 @@ Singleton { property color primaryContainer: currentThemeData.primaryContainer || blend(surfaceContainerHigh, primary, 0.45) property color secondaryContainer: currentThemeData.secondaryContainer || blend(surfaceContainerHigh, secondary, 0.35) property color tertiaryContainer: currentThemeData.tertiaryContainer || blend(surfaceContainerHigh, tertiary, 0.35) - readonly property bool tonalPrimaryContainer: Contrast.isTonal(primaryContainer, surfaceText) - readonly property color selectedContainer: tonalPrimaryContainer ? primaryContainer : Contrast.tintedContainer(surfaceContainerHigh, primary, surfaceText) - readonly property color accentOnPrimaryContainer: Contrast.ratio(primary, primaryContainer) >= 3 ? primary : onPrimaryContainer + readonly property real selectedContainerTint: currentThemeData.selectedContainerTint ?? 0.2 + readonly property bool themedSelectedContainer: !!currentThemeData.secondaryContainer && Contrast.isTonal(secondaryContainer, onSecondaryContainer) && Contrast.isTonal(secondaryContainer, surfaceText) + readonly property color selectedContainer: currentThemeData.selectedContainer || (themedSelectedContainer ? secondaryContainer : Contrast.subtleTint(surfaceContainerHigh, primary, surfaceText, selectedContainerTint)) + readonly property color accentOnSelectedContainer: currentThemeData.accentOnSelectedContainer || (Contrast.ratio(primary, selectedContainer) >= 3 ? primary : onSelectedContainer) + readonly property color accentOnPrimaryContainer: currentThemeData.accentOnPrimaryContainer || (Contrast.ratio(primary, primaryContainer) >= 3 ? primary : onPrimaryContainer) readonly property var accents: Accents.derive(primary, isLightMode, currentThemeData.accents ?? null) property color inverseSurface: currentThemeData.inverseSurface || surfaceText property color inverseOnSurface: currentThemeData.inverseOnSurface || surface @@ -481,7 +483,7 @@ Singleton { Binding { target: root property: "onSelectedContainer" - value: root.tonalPrimaryContainer ? root.onPrimaryContainer : root.surfaceText + value: root.currentThemeData.onSelectedContainer || (root.currentThemeData.selectedContainer ? Contrast.readableOn(root.selectedContainer, root.onContainerCandidates) : root.themedSelectedContainer ? root.onSecondaryContainer : root.surfaceText) } ] readonly property var onContainerCandidates: [surfaceText, surface, contrastLight, contrastDark] diff --git a/quickshell/Modals/PowerProfileModal.qml b/quickshell/Modals/PowerProfileModal.qml index 4e13278e9..0939ed526 100644 --- a/quickshell/Modals/PowerProfileModal.qml +++ b/quickshell/Modals/PowerProfileModal.qml @@ -188,7 +188,7 @@ DankModal { color: { if (isActive) - return Theme.primaryPressed; + return Theme.selectedContainer; if (isSelected) return Theme.primaryHoverLight; if (mouseArea.containsMouse) @@ -196,8 +196,8 @@ DankModal { return Theme.floatingWindowNestedSurface; } - border.color: isActive ? Theme.primary : (isSelected ? Theme.withAlpha(Theme.primary, 0.5) : Theme.outlineMedium) - border.width: (isActive || isSelected) ? Theme.outlineWidthFocused : Theme.layerOutlineWidth + border.color: isSelected ? Theme.focusRingColor : Theme.outlineMedium + border.width: isSelected ? Theme.outlineWidthFocused : Theme.layerOutlineWidth // Shortcut Key Badge on Top-Right Corner Rectangle { @@ -207,15 +207,13 @@ DankModal { width: 20 height: 20 radius: Theme.cornerRadiusXS - color: isActive ? Theme.primaryPressed : Theme.chipSurface - border.color: isActive ? Theme.primary : Theme.withAlpha(Theme.primary, 0) - border.width: isActive ? 1 : 0 + color: Theme.chipSurface StyledText { text: (index + 1).toString() font.pixelSize: Theme.fontSizeSmall font.weight: Theme.fontWeightMedium - color: isActive ? Theme.primary : Theme.surfaceTextMedium + color: isActive ? Theme.accentOnSelectedContainer : Theme.surfaceTextMedium anchors.centerIn: parent } } @@ -227,7 +225,7 @@ DankModal { DankIcon { name: Theme.getPowerProfileIcon(modelData) size: Theme.iconSize + 16 - color: isActive ? Theme.primary : Theme.surfaceText + color: isActive ? Theme.accentOnSelectedContainer : Theme.surfaceText filled: isActive anchors.horizontalCenter: parent.horizontalCenter } @@ -235,7 +233,7 @@ DankModal { StyledText { text: Theme.getPowerProfileLabel(modelData) font.pixelSize: Theme.fontSizeMedium - color: isActive ? Theme.primary : Theme.surfaceText + color: isActive ? Theme.onSelectedContainer : Theme.surfaceText font.weight: Theme.fontWeightMedium anchors.horizontalCenter: parent.horizontalCenter } diff --git a/quickshell/Modules/ControlCenter/BuiltinPlugins/DisplayProfilesWidget.qml b/quickshell/Modules/ControlCenter/BuiltinPlugins/DisplayProfilesWidget.qml index 7f0cae1ce..78bb4fa2f 100644 --- a/quickshell/Modules/ControlCenter/BuiltinPlugins/DisplayProfilesWidget.qml +++ b/quickshell/Modules/ControlCenter/BuiltinPlugins/DisplayProfilesWidget.qml @@ -106,7 +106,6 @@ PluginComponent { iconName: "monitor" title: modelData.name active: modelData.id === root.activeProfileId && !root.autoMode - showActiveCheck: true enabled: !root.autoMode clickable: true onClicked: DisplayConfigState.activateProfile(modelData.id) diff --git a/quickshell/Modules/ControlCenter/Details/AudioInputDetail.qml b/quickshell/Modules/ControlCenter/Details/AudioInputDetail.qml index 3efae7356..b948c2257 100644 --- a/quickshell/Modules/ControlCenter/Details/AudioInputDetail.qml +++ b/quickshell/Modules/ControlCenter/Details/AudioInputDetail.qml @@ -88,7 +88,6 @@ Item { title: AudioService.displayName(modelData) subtitle: active ? I18n.tr("Active") : I18n.tr("Available") active: modelData === AudioService.source - showActiveCheck: true clickable: true onClicked: { if (modelData?.name) diff --git a/quickshell/Modules/ControlCenter/Details/AudioOutputDetail.qml b/quickshell/Modules/ControlCenter/Details/AudioOutputDetail.qml index 40f8b0582..e75458868 100644 --- a/quickshell/Modules/ControlCenter/Details/AudioOutputDetail.qml +++ b/quickshell/Modules/ControlCenter/Details/AudioOutputDetail.qml @@ -91,7 +91,6 @@ Item { title: AudioService.displayName(modelData) subtitle: active ? I18n.tr("Active") : I18n.tr("Available") active: modelData === AudioService.sink - showActiveCheck: true clickable: true onClicked: { if (modelData?.name) diff --git a/quickshell/Modules/ControlCenter/Details/AudioPortSelector.qml b/quickshell/Modules/ControlCenter/Details/AudioPortSelector.qml index 14dfa7d23..a45dd608e 100644 --- a/quickshell/Modules/ControlCenter/Details/AudioPortSelector.qml +++ b/quickshell/Modules/ControlCenter/Details/AudioPortSelector.qml @@ -118,7 +118,6 @@ CcSheetDialog { return ""; } active: modelData.name === root.currentPort - showActiveCheck: true enabled: !unavailable && !root.isLoading clickable: !active onClicked: root.selectPort(modelData.name) diff --git a/quickshell/Modules/ControlCenter/Details/BluetoothCodecSelector.qml b/quickshell/Modules/ControlCenter/Details/BluetoothCodecSelector.qml index 309d4468b..a7038224e 100644 --- a/quickshell/Modules/ControlCenter/Details/BluetoothCodecSelector.qml +++ b/quickshell/Modules/ControlCenter/Details/BluetoothCodecSelector.qml @@ -109,7 +109,6 @@ CcSheetDialog { title: modelData.name subtitle: modelData.description active: modelData.name === root.currentCodec - showActiveCheck: true enabled: !root.isLoading clickable: !active onClicked: root.selectCodec(modelData.profile) diff --git a/quickshell/Modules/ControlCenter/Details/BluetoothDetail.qml b/quickshell/Modules/ControlCenter/Details/BluetoothDetail.qml index 3e3b96498..cda7dc7b4 100644 --- a/quickshell/Modules/ControlCenter/Details/BluetoothDetail.qml +++ b/quickshell/Modules/ControlCenter/Details/BluetoothDetail.qml @@ -257,7 +257,7 @@ Item { iconColor: { if (isConnecting) return Theme.warning; - return isConnected ? Theme.primary : Theme.surfaceText; + return contentColor; } active: isConnected title: deviceName diff --git a/quickshell/Modules/ControlCenter/Details/BrightnessDetail.qml b/quickshell/Modules/ControlCenter/Details/BrightnessDetail.qml index 4234b47b6..0c8165152 100644 --- a/quickshell/Modules/ControlCenter/Details/BrightnessDetail.qml +++ b/quickshell/Modules/ControlCenter/Details/BrightnessDetail.qml @@ -183,7 +183,6 @@ Item { iconName: root.deviceIcon(modelData, deviceBrightness) active: deviceName === root.currentDeviceName - showActiveCheck: true title: BrightnessService.deviceTitle(modelData) subtitle: deviceName + " • " + root.deviceClassLabel(modelData) trailingBadge: Math.round(deviceBrightness) + "%" diff --git a/quickshell/Modules/ControlCenter/Details/DiskUsageDetail.qml b/quickshell/Modules/ControlCenter/Details/DiskUsageDetail.qml index 76a23fe89..36fe2c605 100644 --- a/quickshell/Modules/ControlCenter/Details/DiskUsageDetail.qml +++ b/quickshell/Modules/ControlCenter/Details/DiskUsageDetail.qml @@ -64,10 +64,9 @@ Item { return Theme.error; if (usage > CcMetrics.diskWarnPercent) return Theme.warning; - return active ? Theme.primary : Theme.surfaceText; + return contentColor; } active: modelData.mount === root.currentMountPath - showActiveCheck: true title: modelData.mount === "/" ? I18n.tr("Root Filesystem") : modelData.mount subtitle: `${modelData.used || "?"} / ${modelData.size || "?"}` + (modelData.mount === "/" ? "" : " • " + modelData.mount) trailingBadge: usage.toFixed(0) + "%" diff --git a/quickshell/Modules/ControlCenter/Details/NetworkDetail.qml b/quickshell/Modules/ControlCenter/Details/NetworkDetail.qml index fa09ad111..1724a61d8 100644 --- a/quickshell/Modules/ControlCenter/Details/NetworkDetail.qml +++ b/quickshell/Modules/ControlCenter/Details/NetworkDetail.qml @@ -446,7 +446,6 @@ Item { iconName: "lan" active: modelData.isActive - showActiveCheck: true title: modelData.id || I18n.tr("Unknown Config") subtitle: active ? I18n.tr("Connected") : I18n.tr("Available") clickable: true diff --git a/quickshell/Modules/ControlCenter/Details/VpnProfileDelegate.qml b/quickshell/Modules/ControlCenter/Details/VpnProfileDelegate.qml index c5c40a46a..68ba4bfac 100644 --- a/quickshell/Modules/ControlCenter/Details/VpnProfileDelegate.qml +++ b/quickshell/Modules/ControlCenter/Details/VpnProfileDelegate.qml @@ -67,7 +67,7 @@ CcListRow { } iconName: isConnecting ? "" : (isActive ? "vpn_lock" : (hasError ? "error" : "vpn_key_off")) - iconColor: hasError ? Theme.error : (isActive ? Theme.primary : Theme.surfaceText) + iconColor: hasError ? Theme.error : contentColor active: isActive title: profile?.name ?? "" subtitle: isConnecting ? I18n.tr("Connecting...") : (hasError ? DMSNetworkService.vpnError : VPNService.getVpnTypeFromProfile(profile)) diff --git a/quickshell/Modules/ControlCenter/Widgets/CcListRow.qml b/quickshell/Modules/ControlCenter/Widgets/CcListRow.qml index a04a651f6..87f1f170b 100644 --- a/quickshell/Modules/ControlCenter/Widgets/CcListRow.qml +++ b/quickshell/Modules/ControlCenter/Widgets/CcListRow.qml @@ -2,26 +2,10 @@ import QtQuick import qs.Common import qs.Modules.ControlCenter import qs.Modules.Settings.Widgets -import qs.Widgets SettingsRow { - id: root - - property bool active: false - property bool showActiveCheck: false - paddingH: CcMetrics.rowPaddingH paddingV: CcMetrics.rowPaddingV rowColor: CcMetrics.rowColor - iconColor: active ? Theme.primary : Theme.surfaceText - - Loader { - anchors.verticalCenter: parent.verticalCenter - active: root.active && root.showActiveCheck - sourceComponent: DankIcon { - name: "check" - size: Theme.iconSize - color: Theme.primary - } - } + iconColor: active ? Theme.accentOnSelectedContainer : Theme.surfaceText } diff --git a/quickshell/Modules/ControlCenter/Widgets/CcTileActions.qml b/quickshell/Modules/ControlCenter/Widgets/CcTileActions.qml index 8fb16d1ad..4e8de8533 100644 --- a/quickshell/Modules/ControlCenter/Widgets/CcTileActions.qml +++ b/quickshell/Modules/ControlCenter/Widgets/CcTileActions.qml @@ -31,7 +31,6 @@ CcTileContent { iconName: modelData.icon || "" active: modelData.active ?? false enabled: modelData.enabled !== false - showActiveCheck: true clickable: true paddingH: Theme.spacingM onClicked: modelData.trigger() diff --git a/quickshell/Modules/DankBar/Popouts/DWLLayoutPopout.qml b/quickshell/Modules/DankBar/Popouts/DWLLayoutPopout.qml index 68709618d..eafb8d00f 100644 --- a/quickshell/Modules/DankBar/Popouts/DWLLayoutPopout.qml +++ b/quickshell/Modules/DankBar/Popouts/DWLLayoutPopout.qml @@ -193,7 +193,7 @@ DankPopout { DankIcon { name: root.getLayoutIcon(layoutRow.modelData) size: Theme.iconSizeMedium - color: layoutRow.isActive ? Theme.primary : layoutRow.contentColor + color: layoutRow.contentColor anchors.verticalCenter: parent.verticalCenter } @@ -204,7 +204,7 @@ DankPopout { StyledText { text: root.getLayoutName(layoutRow.modelData) font.pixelSize: Theme.fontSizeMedium - color: layoutRow.isActive ? Theme.primary : layoutRow.contentColor + color: layoutRow.contentColor font.weight: layoutRow.isActive ? Theme.fontWeightMedium : Theme.fontWeight } diff --git a/quickshell/Modules/DankDash/Media/MediaDeviceRow.qml b/quickshell/Modules/DankDash/Media/MediaDeviceRow.qml index 98fba29e4..373f420f1 100644 --- a/quickshell/Modules/DankDash/Media/MediaDeviceRow.qml +++ b/quickshell/Modules/DankDash/Media/MediaDeviceRow.qml @@ -27,8 +27,8 @@ SettingsRow { clickable: true paddingH: Theme.spacingL paddingV: Theme.spacingL - rowColor: selected ? Theme.selectedContainer : Theme.secondaryContainer - titleColor: selected ? Theme.onSelectedContainer : Theme.onSecondaryContainer + rowColor: selected ? Theme.selectedContainer : Theme.chipSurface + titleColor: selected ? Theme.onSelectedContainer : Theme.surfaceText subtitleColor: titleColor topRadius: Theme.cornerRadiusLIncreased bottomRadius: Theme.cornerRadiusLIncreased @@ -39,7 +39,7 @@ SettingsRow { width: Theme.iconButtonSize height: width radius: Theme.fullRadius(width, height) - color: root.selected ? Theme.onPrimary : Theme.chipSurface + color: root.selected ? Theme.onPrimary : Theme.chipSurfaceNested DankIcon { anchors.centerIn: parent diff --git a/quickshell/Modules/Notepad/NotepadTabs.qml b/quickshell/Modules/Notepad/NotepadTabs.qml index 48d7672ed..32a4550ca 100644 --- a/quickshell/Modules/Notepad/NotepadTabs.qml +++ b/quickshell/Modules/Notepad/NotepadTabs.qml @@ -140,7 +140,7 @@ Column { id: tabRect anchors.fill: parent radius: Theme.cornerRadius - color: isActive ? Theme.primaryPressed : isHovered ? Theme.primaryHoverLight : Theme.withAlpha(Theme.primaryPressed, 0) + color: isActive ? Theme.selectedContainer : isHovered ? Theme.primaryHoverLight : Theme.withAlpha(Theme.primaryPressed, 0) border.width: isActive || dragging ? 0 : 1 border.color: dragging ? Theme.primary : Theme.outlineMedium clip: true @@ -164,7 +164,7 @@ Column { return prefix + (modelData.title || "Untitled"); } font.pixelSize: Theme.fontSizeSmall - color: isActive ? Theme.primary : Theme.surfaceText + color: isActive ? Theme.onSelectedContainer : Theme.surfaceText font.weight: Theme.fontWeightMedium elide: Text.ElideMiddle maximumLineCount: 1 @@ -221,9 +221,9 @@ Column { } Rectangle { + id: tabCloseButton Accessible.role: Accessible.Button Accessible.name: I18n.tr("Close") - id: tabCloseButton width: 20 height: 20 radius: Theme.cornerRadius diff --git a/quickshell/Modules/Notifications/NotificationCard.qml b/quickshell/Modules/Notifications/NotificationCard.qml index 28ad381be..eeda92732 100644 --- a/quickshell/Modules/Notifications/NotificationCard.qml +++ b/quickshell/Modules/Notifications/NotificationCard.qml @@ -73,7 +73,7 @@ Rectangle { topRightRadius: topLeftRadius bottomLeftRadius: lastInGroup ? outerRadius : radius bottomRightRadius: bottomLeftRadius - color: surfaceColor + color: keyboardSelected ? Theme.selectedContainer : surfaceColor border.width: Theme.layerOutlineWidth border.color: Theme.outlineMedium clip: true diff --git a/quickshell/Modules/Settings/DesktopWidgetBrowser.qml b/quickshell/Modules/Settings/DesktopWidgetBrowser.qml index ceb4bcd03..33746f125 100644 --- a/quickshell/Modules/Settings/DesktopWidgetBrowser.qml +++ b/quickshell/Modules/Settings/DesktopWidgetBrowser.qml @@ -41,9 +41,9 @@ WidgetPickerWindow { height: 72 radius: Theme.cornerRadius property bool isSelected: root.keyboardNavigationActive && index === root.selectedIndex - color: isSelected ? Theme.primarySelected : widgetArea.containsMouse ? Theme.primaryHover : Theme.floatingWindowNestedSurface - border.color: isSelected ? Theme.primary : Theme.outlineMedium - border.width: isSelected ? Theme.outlineWidthFocused : Theme.layerOutlineWidth + color: isSelected ? Theme.selectedContainer : widgetArea.containsMouse ? Theme.primaryHover : Theme.floatingWindowNestedSurface + border.color: Theme.outlineMedium + border.width: Theme.layerOutlineWidth Row { anchors.fill: parent diff --git a/quickshell/Modules/Settings/NetworkCellularTab.qml b/quickshell/Modules/Settings/NetworkCellularTab.qml index 8d9399886..5ac4e04f2 100644 --- a/quickshell/Modules/Settings/NetworkCellularTab.qml +++ b/quickshell/Modules/Settings/NetworkCellularTab.qml @@ -96,9 +96,9 @@ Item { width: parent.width height: 56 radius: Theme.cornerRadius - color: modemMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.floatingWindowNestedSurface - border.width: isConnected ? Theme.outlineWidthFocused : Theme.layerOutlineWidth - border.color: isConnected ? Theme.primary : Theme.outlineMedium + color: isConnected ? Theme.selectedContainer : modemMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.floatingWindowNestedSurface + border.width: Theme.layerOutlineWidth + border.color: Theme.outlineMedium Row { anchors.left: parent.left @@ -111,7 +111,7 @@ Item { DankIcon { name: "network_cell" size: 20 - color: modemDelegate.isConnected ? Theme.primary : Theme.surfaceText + color: modemDelegate.isConnected ? Theme.accentOnSelectedContainer : Theme.surfaceText anchors.verticalCenter: parent.verticalCenter } @@ -123,7 +123,7 @@ Item { StyledText { text: modelData.name || I18n.tr("Unknown") font.pixelSize: Theme.fontSizeMedium - color: modemDelegate.isConnected ? Theme.primary : Theme.surfaceText + color: modemDelegate.isConnected ? Theme.onSelectedContainer : Theme.surfaceText font.weight: Theme.fontWeightMedium elide: Text.ElideRight width: parent.width @@ -231,9 +231,9 @@ Item { width: parent.width height: 56 radius: Theme.cornerRadius - color: profileMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.floatingWindowNestedSurface - border.color: isActive ? Theme.primary : Theme.outlineMedium - border.width: isActive ? Theme.outlineWidthFocused : Theme.layerOutlineWidth + color: isActive ? Theme.selectedContainer : profileMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.floatingWindowNestedSurface + border.color: Theme.outlineMedium + border.width: Theme.layerOutlineWidth Row { anchors.left: parent.left @@ -246,7 +246,7 @@ Item { DankIcon { name: "sim_card" size: 20 - color: profileDelegate.isActive ? Theme.primary : Theme.surfaceText + color: profileDelegate.isActive ? Theme.accentOnSelectedContainer : Theme.surfaceText anchors.verticalCenter: parent.verticalCenter } @@ -258,7 +258,7 @@ Item { StyledText { text: modelData.id || I18n.tr("Unknown") font.pixelSize: Theme.fontSizeMedium - color: profileDelegate.isActive ? Theme.primary : Theme.surfaceText + color: profileDelegate.isActive ? Theme.onSelectedContainer : Theme.surfaceText font.weight: Theme.fontWeightMedium elide: Text.ElideRight width: parent.width diff --git a/quickshell/Modules/Settings/NetworkEthernetTab.qml b/quickshell/Modules/Settings/NetworkEthernetTab.qml index 95576486f..d461afd5b 100644 --- a/quickshell/Modules/Settings/NetworkEthernetTab.qml +++ b/quickshell/Modules/Settings/NetworkEthernetTab.qml @@ -84,9 +84,9 @@ Item { width: parent.width height: isExpanded ? 56 + ethExpandedContent.height : 56 radius: Theme.cornerRadius - color: ethDeviceMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.floatingWindowNestedSurface - border.width: isConnected ? Theme.outlineWidthFocused : Theme.layerOutlineWidth - border.color: isConnected ? Theme.primary : Theme.outlineMedium + color: isConnected ? Theme.selectedContainer : ethDeviceMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.floatingWindowNestedSurface + border.width: Theme.layerOutlineWidth + border.color: Theme.outlineMedium clip: true Behavior on height { @@ -115,7 +115,7 @@ Item { DankIcon { name: "lan" size: 20 - color: isConnected ? Theme.primary : Theme.surfaceText + color: isConnected ? Theme.accentOnSelectedContainer : Theme.surfaceText anchors.verticalCenter: parent.verticalCenter } @@ -127,7 +127,7 @@ Item { StyledText { text: modelData.name || I18n.tr("Unknown") font.pixelSize: Theme.fontSizeMedium - color: isConnected ? Theme.primary : Theme.surfaceText + color: isConnected ? Theme.onSelectedContainer : Theme.surfaceText font.weight: Theme.fontWeightMedium elide: Text.ElideRight width: parent.width @@ -152,7 +152,7 @@ Item { } } font.pixelSize: Theme.fontSizeSmall - color: isConnected ? Theme.primary : Theme.surfaceVariantText + color: isConnected ? Theme.onSelectedContainer : Theme.surfaceVariantText } StyledText { @@ -380,9 +380,9 @@ Item { width: parent.width height: 48 radius: Theme.cornerRadius - color: wiredMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.floatingWindowNestedSurface - border.width: modelData.isActive ? Theme.outlineWidthFocused : Theme.layerOutlineWidth - border.color: modelData.isActive ? Theme.primary : Theme.outlineMedium + color: modelData.isActive ? Theme.selectedContainer : wiredMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.floatingWindowNestedSurface + border.width: Theme.layerOutlineWidth + border.color: Theme.outlineMedium Row { anchors.left: parent.left @@ -393,7 +393,7 @@ Item { DankIcon { name: "lan" size: 20 - color: modelData.isActive ? Theme.primary : Theme.surfaceText + color: modelData.isActive ? Theme.accentOnSelectedContainer : Theme.surfaceText anchors.verticalCenter: parent.verticalCenter } @@ -404,14 +404,14 @@ Item { StyledText { text: modelData.id || I18n.tr("Unknown") font.pixelSize: Theme.fontSizeMedium - color: modelData.isActive ? Theme.primary : Theme.surfaceText + color: modelData.isActive ? Theme.onSelectedContainer : Theme.surfaceText font.weight: Theme.fontWeightMedium } StyledText { text: modelData.isActive ? I18n.tr("Active") : "" font.pixelSize: Theme.fontSizeSmall - color: Theme.primary + color: Theme.onSelectedContainer visible: modelData.isActive } } diff --git a/quickshell/Modules/Settings/NetworkVpnTab.qml b/quickshell/Modules/Settings/NetworkVpnTab.qml index e45c25347..de2423089 100644 --- a/quickshell/Modules/Settings/NetworkVpnTab.qml +++ b/quickshell/Modules/Settings/NetworkVpnTab.qml @@ -191,9 +191,9 @@ Item { width: parent.width height: isExpanded ? 56 + vpnExpandedContent.height : 56 radius: Theme.cornerRadius - color: vpnRowArea.containsMouse ? Theme.primaryHoverLight : (isActive ? Theme.primaryPressed : Theme.floatingWindowNestedSurface) - border.width: isActive ? Theme.outlineWidthFocused : Theme.layerOutlineWidth - border.color: isActive ? Theme.primary : Theme.outlineMedium + color: isActive ? Theme.selectedContainer : vpnRowArea.containsMouse ? Theme.primaryHoverLight : Theme.floatingWindowNestedSurface + border.width: Theme.layerOutlineWidth + border.color: Theme.outlineMedium opacity: DMSNetworkService.isBusy ? 0.6 : 1.0 clip: true @@ -226,7 +226,7 @@ Item { DankIcon { name: isActive ? "vpn_lock" : "vpn_key_off" size: 20 - color: isActive ? Theme.primary : Theme.surfaceText + color: isActive ? Theme.accentOnSelectedContainer : Theme.surfaceText anchors.verticalCenter: parent.verticalCenter } @@ -239,7 +239,7 @@ Item { text: modelData.name font.pixelSize: Theme.fontSizeMedium font.weight: Theme.fontWeightMedium - color: isActive ? Theme.primary : Theme.surfaceText + color: isActive ? Theme.onSelectedContainer : Theme.surfaceText elide: Text.ElideRight width: parent.width horizontalAlignment: Text.AlignLeft @@ -248,7 +248,7 @@ Item { StyledText { text: VPNService.getVpnTypeFromProfile(modelData) font.pixelSize: Theme.fontSizeSmall - color: Theme.surfaceVariantText + color: isActive ? Theme.onSelectedContainer : Theme.surfaceVariantText anchors.left: parent.left } } diff --git a/quickshell/Modules/Settings/NetworkWifiTab.qml b/quickshell/Modules/Settings/NetworkWifiTab.qml index 4fe404846..e547e8e91 100644 --- a/quickshell/Modules/Settings/NetworkWifiTab.qml +++ b/quickshell/Modules/Settings/NetworkWifiTab.qml @@ -317,8 +317,9 @@ Item { visible: NetworkService.wifiEnabled && !NetworkService.wifiToggling SettingsRow { + id: wifiNetworkRow title: wifiNetworkDelegate.modelData.ssid || I18n.tr("Unknown") - titleColor: wifiNetworkDelegate.isConnected ? Theme.primary : Theme.surfaceText + active: wifiNetworkDelegate.isConnected subtitle: { const parts = [wifiNetworkDelegate.isConnecting ? I18n.tr("Connecting...") : (wifiNetworkDelegate.isConnected ? I18n.tr("Connected") : (wifiNetworkDelegate.modelData.secured ? I18n.tr("Secured", "adjective, wifi network requires a password, opposite of open") : I18n.tr("Open", "network security type", true)))]; if (wifiNetworkDelegate.modelData.saved) @@ -328,7 +329,7 @@ Item { parts.push(wifiNetworkDelegate.modelData.signal + "%"); return parts.join(" • "); } - subtitleColor: wifiNetworkDelegate.isConnecting ? Theme.warning : (wifiNetworkDelegate.isConnected ? Theme.primary : Theme.surfaceVariantText) + subtitleColor: wifiNetworkDelegate.isConnecting ? Theme.warning : supportingContentColor clickable: !NetworkService.isWifiConnecting || wifiNetworkDelegate.isConnected onClicked: { WifiConnectionActions.connectToNetwork(wifiNetworkDelegate.modelData, { @@ -357,7 +358,7 @@ Item { return "wifi_1_bar"; } size: Theme.iconSizeMedium - color: wifiNetworkDelegate.isConnected ? Theme.primary : Theme.surfaceText + color: wifiNetworkRow.contentColor anchors.verticalCenter: parent.verticalCenter } ] @@ -566,8 +567,9 @@ Item { spacing: Theme.groupedListGap SettingsRow { + id: savedWifiRow title: savedWifiDelegate.modelData.ssid || I18n.tr("Unknown") - titleColor: savedWifiDelegate.isConnected ? Theme.primary : Theme.surfaceText + active: savedWifiDelegate.isConnected subtitle: { if (savedWifiDelegate.isConnecting) return I18n.tr("Connecting..."); @@ -577,7 +579,7 @@ Item { parts.push(I18n.tr("Hidden")); return parts.join(" • "); } - subtitleColor: savedWifiDelegate.isConnecting ? Theme.warning : (savedWifiDelegate.isConnected ? Theme.primary : Theme.surfaceVariantText) + subtitleColor: savedWifiDelegate.isConnecting ? Theme.warning : supportingContentColor clickable: !savedWifiDelegate.isOutOfRange && (!NetworkService.isWifiConnecting || savedWifiDelegate.isConnected) onClicked: { if (savedWifiDelegate.isOutOfRange) @@ -611,7 +613,7 @@ Item { return "wifi_1_bar"; } size: Theme.iconSizeMedium - color: savedWifiDelegate.isConnected ? Theme.primary : Theme.surfaceText + color: savedWifiRow.contentColor anchors.verticalCenter: parent.verticalCenter } ] diff --git a/quickshell/Modules/Settings/WidgetSelectionPopup.qml b/quickshell/Modules/Settings/WidgetSelectionPopup.qml index c17318fd3..21cc636de 100644 --- a/quickshell/Modules/Settings/WidgetSelectionPopup.qml +++ b/quickshell/Modules/Settings/WidgetSelectionPopup.qml @@ -54,9 +54,9 @@ WidgetPickerWindow { height: Math.max(60, textColumn.implicitHeight + 24) radius: Theme.cornerRadius property bool isSelected: root.keyboardNavigationActive && index === root.selectedIndex && !modelData.disabled - color: isSelected ? Theme.withAlpha(Theme.primary, root.blurActive ? 0.22 : 0.16) : widgetArea.containsMouse ? Theme.withAlpha(Theme.primary, root.blurActive ? 0.14 : 0.08) : Theme.floatingWindowNestedSurface - border.color: isSelected ? Theme.primary : Theme.outlineMedium - border.width: isSelected ? Theme.outlineWidthFocused : Theme.layerOutlineWidth + 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 Row { diff --git a/quickshell/Modules/Settings/Widgets/AppBrowserPopup.qml b/quickshell/Modules/Settings/Widgets/AppBrowserPopup.qml index 99a8d2ca8..e501845fb 100644 --- a/quickshell/Modules/Settings/Widgets/AppBrowserPopup.qml +++ b/quickshell/Modules/Settings/Widgets/AppBrowserPopup.qml @@ -112,7 +112,7 @@ DankFloatingWindow { readonly property bool isSelected: root.keyboardNavigationActive && index === root.selectedIndex - color: isSelected ? Theme.withAlpha(Theme.primary, 0.16) : appArea.containsMouse ? Theme.withAlpha(Theme.primary, 0.08) : Theme.floatingWindowNestedSurface + color: isSelected ? Theme.selectedContainer : appArea.containsMouse ? Theme.withAlpha(Theme.primary, 0.08) : Theme.floatingWindowNestedSurface border.color: isSelected ? Theme.primary : Theme.outlineMedium border.width: isSelected ? Theme.outlineWidthFocused : Theme.layerOutlineWidth diff --git a/quickshell/Modules/Settings/Widgets/SettingsMetrics.qml b/quickshell/Modules/Settings/Widgets/SettingsMetrics.qml index da34af7d5..e88448831 100644 --- a/quickshell/Modules/Settings/Widgets/SettingsMetrics.qml +++ b/quickshell/Modules/Settings/Widgets/SettingsMetrics.qml @@ -42,7 +42,7 @@ Singleton { readonly property real swatchTileMinWidth: 96 readonly property color rowColor: Theme.foregroundColor(Theme.cardSurface, true) readonly property color rowHighlightColor: Theme.withAlpha(Theme.primary, highlightBlend) - readonly property color selectedRowColor: Theme.blend(rowColor, Theme.onSurface, Theme.stateLayerDrag) + readonly property color selectedRowColor: Theme.selectedContainer readonly property int transitionDuration: Theme.expressiveDurations.expressiveFastSpatial readonly property int fadeDuration: Theme.expressiveDurations.expressiveEffects readonly property int pageSettleFrames: 2 diff --git a/quickshell/Modules/Settings/Widgets/SettingsRow.qml b/quickshell/Modules/Settings/Widgets/SettingsRow.qml index b171530e8..da56f623a 100644 --- a/quickshell/Modules/Settings/Widgets/SettingsRow.qml +++ b/quickshell/Modules/Settings/Widgets/SettingsRow.qml @@ -22,19 +22,22 @@ T.Control { property string title: "" property bool singleLineTitle: false property string subtitle: "" - property color subtitleColor: Theme.surfaceVariantText + property color subtitleColor: supportingContentColor property string iconName: "" property bool iconBox: false property bool clickable: false property bool showChevron: false property string trailingBadge: "" - property color trailingBadgeColor: Theme.surfaceVariantText + property color trailingBadgeColor: supportingContentColor property bool paintBackground: !(parent?.isSettingsGroupHost ?? false) property real paddingH: SettingsMetrics.rowPaddingH property real paddingV: SettingsMetrics.rowPaddingV property color rowColor: SettingsMetrics.rowColor - property color iconColor: Theme.primary - property color titleColor: Theme.surfaceText + property bool active: false + readonly property color contentColor: active ? Theme.onSelectedContainer : Theme.surfaceText + readonly property color supportingContentColor: active ? Theme.onSelectedContainer : Theme.surfaceVariantText + property color iconColor: active ? Theme.accentOnSelectedContainer : Theme.primary + property color titleColor: contentColor property var resetStore: SettingsData property var resetKeys: settingKey !== "" && resetStore === SettingsData && SettingsData.hasSetting(settingKey) ? [settingKey] : [] @@ -123,7 +126,7 @@ T.Control { Rectangle { anchors.fill: parent visible: root.paintBackground - color: root.isHighlighted ? Theme.blend(root.rowColor, Theme.primary, SettingsMetrics.highlightBlend) : root.rowColor + color: root.active ? Theme.selectedContainer : root.isHighlighted ? Theme.blend(root.rowColor, Theme.primary, SettingsMetrics.highlightBlend) : root.rowColor border.width: Theme.layerOutlineWidth border.color: Theme.outlineMedium topLeftRadius: root.topRadius @@ -134,8 +137,8 @@ T.Control { Rectangle { anchors.fill: parent - visible: !root.paintBackground && root.isHighlighted - color: SettingsMetrics.rowHighlightColor + visible: !root.paintBackground && (root.active || root.isHighlighted) + color: root.active ? Theme.selectedContainer : SettingsMetrics.rowHighlightColor topLeftRadius: root.topRadius topRightRadius: root.topRadius bottomLeftRadius: root.bottomRadius @@ -146,7 +149,7 @@ T.Control { id: stateLayer anchors.fill: parent visible: root.clickable - color: Theme.surfaceText + color: root.contentColor opacity: !root.enabled ? 0 : (clickControl.down ? Theme.stateLayerPressed : (clickControl.hovered ? Theme.stateLayerHover : 0)) topLeftRadius: root.topRadius topRightRadius: root.topRadius @@ -166,7 +169,7 @@ T.Control { DankRipple { id: ripple visible: root.clickable - rippleColor: Theme.surfaceText + rippleColor: root.contentColor topLeftRadius: root.topRadius topRightRadius: root.topRadius bottomLeftRadius: root.bottomRadius @@ -332,7 +335,7 @@ T.Control { DankIcon { name: "chevron_right" size: Theme.iconSize - color: Theme.surfaceVariantText + color: root.supportingContentColor rotation: I18n.isRtl ? 180 : 0 visible: root.showChevron anchors.verticalCenter: parent.verticalCenter diff --git a/quickshell/Modules/Settings/Widgets/SettingsSidebarItem.qml b/quickshell/Modules/Settings/Widgets/SettingsSidebarItem.qml index 3bcb2295a..99b22ca17 100644 --- a/quickshell/Modules/Settings/Widgets/SettingsSidebarItem.qml +++ b/quickshell/Modules/Settings/Widgets/SettingsSidebarItem.qml @@ -128,7 +128,7 @@ Rectangle { text: root.title font.pixelSize: Theme.fontSizeMedium font.weight: Theme.fontWeightMedium - color: Theme.surfaceText + color: root.active ? Theme.onSelectedContainer : Theme.surfaceText wrapMode: Text.WordWrap horizontalAlignment: Text.AlignLeft } @@ -137,7 +137,7 @@ Rectangle { width: parent.width text: root.hint font.pixelSize: Theme.fontSizeSmall - color: Theme.surfaceVariantText + color: root.active ? Theme.onSelectedContainer : Theme.surfaceVariantText wrapMode: Text.WordWrap maximumLineCount: 2 elide: Text.ElideRight diff --git a/quickshell/tests/qml/theme-selected-container.qml b/quickshell/tests/qml/theme-selected-container.qml index c938bba76..df1205ec1 100644 --- a/quickshell/tests/qml/theme-selected-container.qml +++ b/quickshell/tests/qml/theme-selected-container.qml @@ -46,9 +46,21 @@ ShellRoot { Theme.customThemeData = nord; Theme.currentTheme = "custom"; check(readable(Theme.onSelectedContainer, Theme.selectedContainer, 4.5), "selection text readable on tinted fill"); + check(readable(Theme.surfaceText, Theme.selectedContainer, 4.5), "surface text readable on the selected fill"); + check(readable(Theme.accentOnSelectedContainer, Theme.selectedContainer, 3), "selected icon readable"); + check(Contrast.ratio(Theme.selectedContainer, Theme.surfaceContainerHigh) > 1.05, "selected fill differs from the row surface"); check(readable(Theme.onPrimaryContainer, Theme.primaryContainer, 4.5), "derived onPrimaryContainer readable"); check(readable(Theme.accentOnPrimaryContainer, Theme.primaryContainer, 3), "icon box glyph readable"); check(readable(Theme.onSecondaryContainer, Theme.secondaryContainer, 4.5), "derived onSecondaryContainer readable"); + + Theme.customThemeData = Object.assign({}, nord, { + "selectedContainer": "#5e81ac", + "onSelectedContainer": "#eceff4", + "accentOnSelectedContainer": "#a3be8c", + "accentOnPrimaryContainer": "#bf616a" + }); + check(Theme.selectedContainer.toString() === "#5e81ac" && Theme.onSelectedContainer.toString() === "#eceff4", "explicit selection colors are not derived over"); + check(Theme.accentOnSelectedContainer.toString() === "#a3be8c" && Theme.accentOnPrimaryContainer.toString() === "#bf616a", "explicit accent colors are not derived over"); console.log(root.failed ? "FIXTURE_FAIL see above" : "FIXTURE_PASS"); Qt.quit(); }