From 81eff0d23493586d9313861df2e812ec144d3a7e Mon Sep 17 00:00:00 2001 From: quadbyte Date: Mon, 18 Aug 2025 16:10:29 -0400 Subject: [PATCH] Reworked the bar display colors/capsule, etc... --- Assets/ColorScheme/Gruvbox.json | 2 +- Commons/Color.qml | 10 ++--- Commons/Style.qml | 1 + Modules/Bar/ActiveWindow.qml | 4 +- Modules/Bar/Bar.qml | 42 ++----------------- Modules/Bar/Battery.qml | 5 +-- Modules/Bar/Bluetooth.qml | 1 - Modules/Bar/Clock.qml | 42 ++++++++++++------- Modules/Bar/MediaMini.qml | 2 +- Modules/Bar/NotificationHistory.qml | 6 ++- Modules/Bar/ScreenRecorderIndicator.qml | 18 ++++++++ Modules/Bar/SidePanelToggle.qml | 36 ++++++++++++++++ Modules/Bar/SystemMonitor.qml | 4 +- Modules/Bar/Tray.qml | 14 +++++-- Modules/Bar/WiFi.qml | 8 +++- Modules/Bar/Workspace.qml | 4 +- Modules/Notification/Notification.qml | 1 - Modules/SidePanel/Cards/PowerProfilesCard.qml | 12 +++--- Modules/SidePanel/Cards/UtilitiesCard.qml | 3 +- Modules/SidePanel/PowerMenu.qml | 30 ++++++++----- Widgets/NIconButton.qml | 15 ++++--- Widgets/NPill.qml | 4 +- 22 files changed, 156 insertions(+), 108 deletions(-) create mode 100644 Modules/Bar/ScreenRecorderIndicator.qml create mode 100644 Modules/Bar/SidePanelToggle.qml diff --git a/Assets/ColorScheme/Gruvbox.json b/Assets/ColorScheme/Gruvbox.json index 4dd33db..81269a7 100644 --- a/Assets/ColorScheme/Gruvbox.json +++ b/Assets/ColorScheme/Gruvbox.json @@ -12,7 +12,7 @@ "mOnSurface": "#fbf1c7", "mSurfaceVariant": "#3c3836", "mOnSurfaceVariant": "#ebdbb2", - "mOutline": "#504945", + "mOutline": "#57514e", "mShadow": "#282828" }, "light": { diff --git a/Commons/Color.qml b/Commons/Color.qml index 773d488..221716f 100644 --- a/Commons/Color.qml +++ b/Commons/Color.qml @@ -6,9 +6,10 @@ import Quickshell.Io import qs.Commons import qs.Services + /* - Although Noctalia is not strictly a Material Design project, it supports both a predefined - color scheme and dynamic color generation from the wallpaper (using Matugen). + Noctalia is not strictly a Material Design project, it supports both some predefined + color schemes and dynamic color generation from the wallpaper (using Matugen). We ultimately decided to use a restricted set of colors that follows the Material Design 3 naming convention. @@ -16,7 +17,6 @@ import qs.Services NOTE: All color names are prefixed with 'm' (e.g., mPrimary) to prevent QML from misinterpreting them as signals (e.g., the 'onPrimary' property name). */ - Singleton { id: root @@ -88,7 +88,7 @@ Singleton { property color mSecondary: customColorsData.mSecondary property color mOnSecondary: customColorsData.mOnSecondary - + property color mTertiary: customColorsData.mTertiary property color mOnTertiary: customColorsData.mOnTertiary @@ -97,7 +97,7 @@ Singleton { property color mSurface: customColorsData.mSurface property color mOnSurface: customColorsData.mOnSurface - + property color mSurfaceVariant: customColorsData.mSurfaceVariant property color mOnSurfaceVariant: customColorsData.mOnSurfaceVariant diff --git a/Commons/Style.qml b/Commons/Style.qml index cf33680..c8b42b3 100644 --- a/Commons/Style.qml +++ b/Commons/Style.qml @@ -61,6 +61,7 @@ Singleton { // Dimensions property int barHeight: 36 + property int capsuleHeight: (barHeight * 0.73) property int baseWidgetSize: 32 property int sliderWidth: 200 diff --git a/Modules/Bar/ActiveWindow.qml b/Modules/Bar/ActiveWindow.qml index 024ad6e..1335a45 100644 --- a/Modules/Bar/ActiveWindow.qml +++ b/Modules/Bar/ActiveWindow.qml @@ -54,11 +54,9 @@ Row { Rectangle { // Let the Rectangle size itself based on its content (the Row) width: row.width + Style.marginM * scaling * 2 - height: Math.round(Style.barHeight * 0.75 * scaling) + height: Math.round(Style.capsuleHeight * scaling) radius: Math.round(Style.radiusM * scaling) color: Color.mSurfaceVariant - border.color: Color.mOutline - border.width: Math.max(1, Math.round(Style.borderS * scaling)) anchors.verticalCenter: parent.verticalCenter diff --git a/Modules/Bar/Bar.qml b/Modules/Bar/Bar.qml index 2b02104..e39d2cc 100644 --- a/Modules/Bar/Bar.qml +++ b/Modules/Bar/Bar.qml @@ -82,19 +82,8 @@ Variants { anchors.verticalCenter: bar.verticalCenter spacing: Style.marginS * scaling - // Screen Recording Indicator - NIconButton { - id: screenRecordingIndicator - icon: "videocam" - tooltipText: "Screen Recording Active" - sizeMultiplier: 0.8 - showBorder: false - showFilled: ScreenRecorderService.isRecording - visible: ScreenRecorderService.isRecording + ScreenRecorderIndicator { anchors.verticalCenter: parent.verticalCenter - onClicked: { - ScreenRecorderService.toggleRecording() - } } Tray { @@ -112,6 +101,7 @@ Variants { Bluetooth { anchors.verticalCenter: parent.verticalCenter } + Battery { anchors.verticalCenter: parent.verticalCenter } @@ -139,33 +129,7 @@ Variants { // demoPanel.isLoaded = !demoPanel.isLoaded // } // } - NIconButton { - id: sidePanelToggle - icon: "widgets" - tooltipText: "Open Side Panel" - sizeMultiplier: 0.8 - showBorder: false - anchors.verticalCenter: parent.verticalCenter - onClicked: { - // Map this button's center to the screen and open the side panel below it - const localCenterX = width / 2 - const localCenterY = height / 2 - const globalPoint = mapToItem(null, localCenterX, localCenterY) - if (sidePanel.isLoaded) { - // Call hide() instead of directly setting isLoaded to false - if (sidePanel.item && sidePanel.item.hide) { - sidePanel.item.hide() - } else { - sidePanel.isLoaded = false - } - } else if (sidePanel.openAt) { - sidePanel.openAt(globalPoint.x, screen) - } else { - // Fallback: toggle if API unavailable - sidePanel.isLoaded = true - } - } - } + SidePanelToggle {} } } } diff --git a/Modules/Bar/Battery.qml b/Modules/Bar/Battery.qml index dc9fba1..0fbfff1 100644 --- a/Modules/Bar/Battery.qml +++ b/Modules/Bar/Battery.qml @@ -10,7 +10,7 @@ NPill { id: root // Test mode - property bool testMode: false + property bool testMode: true property int testPercent: 49 property bool testCharging: false @@ -52,9 +52,6 @@ NPill { icon: root.batteryIcon() text: Math.round(root.percent) + "%" - pillColor: Color.mSurfaceVariant - iconCircleColor: Color.mPrimary - iconTextColor: Color.mSurface textColor: charging ? Color.mPrimary : Color.mOnSurface tooltipText: { let lines = [] diff --git a/Modules/Bar/Bluetooth.qml b/Modules/Bar/Bluetooth.qml index 6536a82..fc21efd 100644 --- a/Modules/Bar/Bluetooth.qml +++ b/Modules/Bar/Bluetooth.qml @@ -12,7 +12,6 @@ NIconButton { readonly property bool bluetoothEnabled: Settings.data.network.bluetoothEnabled sizeMultiplier: 0.8 - showBorder: false visible: bluetoothEnabled icon: { diff --git a/Modules/Bar/Clock.qml b/Modules/Bar/Clock.qml index a2af29f..e20f3e3 100644 --- a/Modules/Bar/Clock.qml +++ b/Modules/Bar/Clock.qml @@ -4,25 +4,35 @@ import qs.Services import qs.Widgets // Clock Icon with attached calendar -NClock { +Rectangle { id: root + width: clock.width + Style.marginM * 2 * scaling + height: Math.round(Style.capsuleHeight * scaling) + radius: Math.round(Style.radiusM * scaling) + color: Color.mSurfaceVariant - NTooltip { - id: tooltip - text: Time.dateString - target: root - } + NClock { + id: clock + anchors.verticalCenter: parent.verticalCenter + anchors.horizontalCenter: parent.horizontalCenter - onEntered: { - if (!calendarPanel.isLoaded) { - tooltip.show() + NTooltip { + id: tooltip + text: Time.dateString + target: clock + } + + onEntered: { + if (!calendarPanel.isLoaded) { + tooltip.show() + } + } + onExited: { + tooltip.hide() + } + onClicked: { + tooltip.hide() + calendarPanel.isLoaded = !calendarPanel.isLoaded } } - onExited: { - tooltip.hide() - } - onClicked: { - tooltip.hide() - calendarPanel.isLoaded = !calendarPanel.isLoaded - } } diff --git a/Modules/Bar/MediaMini.qml b/Modules/Bar/MediaMini.qml index ee7599a..d41451f 100644 --- a/Modules/Bar/MediaMini.qml +++ b/Modules/Bar/MediaMini.qml @@ -28,7 +28,7 @@ Row { // Let the Rectangle size itself based on its content (the Row) width: row.width + Style.marginM * scaling * 2 - height: Math.round(Style.barHeight * 0.75 * scaling) + height: Math.round(Style.capsuleHeight * scaling) radius: Math.round(Style.radiusM * scaling) color: Color.mSurfaceVariant border.color: Color.mOutline diff --git a/Modules/Bar/NotificationHistory.qml b/Modules/Bar/NotificationHistory.qml index ad6f6bd..e1dbc3b 100644 --- a/Modules/Bar/NotificationHistory.qml +++ b/Modules/Bar/NotificationHistory.qml @@ -12,9 +12,13 @@ NIconButton { visible: Settings.data.bar.showNotificationsHistory sizeMultiplier: 0.8 - showBorder: false icon: "notifications" tooltipText: "Notification History" + colorBg: Color.mSurfaceVariant + colorFg: Color.mOnSurface + colorBorder: Color.transparent + colorBorderHover: Color.transparent + onClicked: { if (!notificationHistoryPanel.active) { notificationHistoryPanel.isLoaded = true diff --git a/Modules/Bar/ScreenRecorderIndicator.qml b/Modules/Bar/ScreenRecorderIndicator.qml new file mode 100644 index 0000000..f7606c9 --- /dev/null +++ b/Modules/Bar/ScreenRecorderIndicator.qml @@ -0,0 +1,18 @@ +import qs.Commons +import qs.Services +import qs.Widgets + +// Screen Recording Indicator +NIconButton { + id: screenRecordingIndicator + icon: "videocam" + tooltipText: "Screen Recording Active\nClick To Stop Recording" + sizeMultiplier: 0.8 + colorBg: Color.mPrimary + colorFg: Color.mOnPrimary + visible: ScreenRecorderService.isRecording + anchors.verticalCenter: parent.verticalCenter + onClicked: { + ScreenRecorderService.toggleRecording() + } +} diff --git a/Modules/Bar/SidePanelToggle.qml b/Modules/Bar/SidePanelToggle.qml new file mode 100644 index 0000000..4fcb347 --- /dev/null +++ b/Modules/Bar/SidePanelToggle.qml @@ -0,0 +1,36 @@ +import Quickshell +import qs.Commons +import qs.Widgets + +NIconButton { + id: sidePanelToggle + icon: "widgets" + tooltipText: "Open Side Panel" + sizeMultiplier: 0.8 + + colorBg: Color.mSurfaceVariant + colorFg: Color.mOnSurface + colorBorder: Color.transparent + colorBorderHover: Color.transparent + + anchors.verticalCenter: parent.verticalCenter + onClicked: { + // Map this button's center to the screen and open the side panel below it + const localCenterX = width / 2 + const localCenterY = height / 2 + const globalPoint = mapToItem(null, localCenterX, localCenterY) + if (sidePanel.isLoaded) { + // Call hide() instead of directly setting isLoaded to false + if (sidePanel.item && sidePanel.item.hide) { + sidePanel.item.hide() + } else { + sidePanel.isLoaded = false + } + } else if (sidePanel.openAt) { + sidePanel.openAt(globalPoint.x, screen) + } else { + // Fallback: toggle if API unavailable + sidePanel.isLoaded = true + } + } +} diff --git a/Modules/Bar/SystemMonitor.qml b/Modules/Bar/SystemMonitor.qml index ded564e..860adf3 100644 --- a/Modules/Bar/SystemMonitor.qml +++ b/Modules/Bar/SystemMonitor.qml @@ -14,11 +14,9 @@ Row { // Let the Rectangle size itself based on its content (the Row) width: row.width + Style.marginM * scaling * 2 - height: Math.round(Style.barHeight * 0.75 * scaling) + height: Math.round(Style.capsuleHeight * scaling) radius: Math.round(Style.radiusM * scaling) color: Color.mSurfaceVariant - border.color: Color.mOutline - border.width: Math.max(1, Math.round(Style.borderS * scaling)) anchors.verticalCenter: parent.verticalCenter diff --git a/Modules/Bar/Tray.qml b/Modules/Bar/Tray.qml index f351a60..7c793a6 100644 --- a/Modules/Bar/Tray.qml +++ b/Modules/Bar/Tray.qml @@ -9,18 +9,24 @@ import qs.Commons import qs.Services import qs.Widgets -Item { +Rectangle { readonly property real itemSize: 24 * scaling visible: Settings.data.bar.showTray - width: tray.width - height: itemSize + width: tray.width + Style.marginM * scaling * 2 + + height: Math.round(Style.capsuleHeight * scaling) + radius: Math.round(Style.radiusM * scaling) + color: Color.mSurfaceVariant + + Layout.alignment: Qt.AlignVCenter Row { id: tray + anchors.verticalCenter: parent.verticalCenter + anchors.horizontalCenter: parent.horizontalCenter spacing: Style.marginS * scaling - Layout.alignment: Qt.AlignVCenter Repeater { id: repeater diff --git a/Modules/Bar/WiFi.qml b/Modules/Bar/WiFi.qml index 9e2011b..203ab7f 100644 --- a/Modules/Bar/WiFi.qml +++ b/Modules/Bar/WiFi.qml @@ -11,9 +11,15 @@ NIconButton { id: root readonly property bool wifiEnabled: Settings.data.network.wifiEnabled + sizeMultiplier: 0.8 - showBorder: false visible: wifiEnabled + + colorBg: Color.mSurfaceVariant + colorFg: Color.mOnSurface + colorBorder: Color.transparent + colorBorderHover: Color.transparent + icon: { let connected = false let signalStrength = 0 diff --git a/Modules/Bar/Workspace.qml b/Modules/Bar/Workspace.qml index f757015..220a6b3 100644 --- a/Modules/Bar/Workspace.qml +++ b/Modules/Bar/Workspace.qml @@ -116,11 +116,9 @@ Item { id: workspaceBackground width: parent.width - Style.marginS * scaling * 2 - height: Math.round(Style.barHeight * 0.75 * scaling) + height: Math.round(Style.capsuleHeight * scaling) radius: Math.round(Style.radiusM * scaling) color: Color.mSurfaceVariant - border.color: Color.mOutline - border.width: Math.max(1, Math.round(Style.borderS * scaling)) anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter diff --git a/Modules/Notification/Notification.qml b/Modules/Notification/Notification.qml index c98cd5b..6d436e6 100644 --- a/Modules/Notification/Notification.qml +++ b/Modules/Notification/Notification.qml @@ -187,7 +187,6 @@ Variants { icon: "close" tooltipText: "Close" sizeMultiplier: 0.8 - showBorder: false anchors.top: parent.top anchors.right: parent.right anchors.margins: Style.marginS * scaling diff --git a/Modules/SidePanel/Cards/PowerProfilesCard.qml b/Modules/SidePanel/Cards/PowerProfilesCard.qml index 1ef174f..4c574b0 100644 --- a/Modules/SidePanel/Cards/PowerProfilesCard.qml +++ b/Modules/SidePanel/Cards/PowerProfilesCard.qml @@ -31,8 +31,8 @@ NBox { tooltipText: "Set Performance Power Profile" enabled: hasPP opacity: enabled ? Style.opacityFull : Style.opacityMedium - showFilled: enabled && powerProfiles.profile === PowerProfile.Performance - showBorder: !enabled || powerProfiles.profile !== PowerProfile.Performance + colorBg: (enabled && powerProfiles.profile === PowerProfile.Performance) ? Color.mPrimary : Color.mSurfaceVariant + colorFg: (enabled && powerProfiles.profile === PowerProfile.Performance) ? Color.mOnPrimary : Color.mPrimary onClicked: { if (enabled) { powerProfiles.profile = PowerProfile.Performance @@ -45,8 +45,8 @@ NBox { tooltipText: "Set Balanced Power Profile" enabled: hasPP opacity: enabled ? Style.opacityFull : Style.opacityMedium - showFilled: enabled && powerProfiles.profile === PowerProfile.Balanced - showBorder: !enabled || powerProfiles.profile !== PowerProfile.Balanced + colorBg: (enabled && powerProfiles.profile === PowerProfile.Balanced) ? Color.mPrimary : Color.mSurfaceVariant + colorFg: (enabled && powerProfiles.profile === PowerProfile.Balanced) ? Color.mOnPrimary : Color.mPrimary onClicked: { if (enabled) { powerProfiles.profile = PowerProfile.Balanced @@ -59,8 +59,8 @@ NBox { tooltipText: "Set Eco Power Profile" enabled: hasPP opacity: enabled ? Style.opacityFull : Style.opacityMedium - showFilled: enabled && powerProfiles.profile === PowerProfile.PowerSaver - showBorder: !enabled || powerProfiles.profile !== PowerProfile.PowerSaver + colorBg: (enabled && powerProfiles.profile === PowerProfile.PowerSaver) ? Color.mPrimary : Color.mSurfaceVariant + colorFg: (enabled && powerProfiles.profile === PowerProfile.PowerSaver) ? Color.mOnPrimary : Color.mPrimary onClicked: { if (enabled) { powerProfiles.profile = PowerProfile.PowerSaver diff --git a/Modules/SidePanel/Cards/UtilitiesCard.qml b/Modules/SidePanel/Cards/UtilitiesCard.qml index 39b035c..9bc0739 100644 --- a/Modules/SidePanel/Cards/UtilitiesCard.qml +++ b/Modules/SidePanel/Cards/UtilitiesCard.qml @@ -24,7 +24,8 @@ NBox { NIconButton { icon: "videocam" tooltipText: ScreenRecorderService.isRecording ? "Stop Screen Recording" : "Start Screen Recording" - showFilled: ScreenRecorderService.isRecording + colorBg: ScreenRecorderService.isRecording ? Color.mPrimary : Color.mSurfaceVariant + colorFg: ScreenRecorderService.isRecording ? Color.mOnPrimary : Color.mPrimary onClicked: { ScreenRecorderService.toggleRecording() } diff --git a/Modules/SidePanel/PowerMenu.qml b/Modules/SidePanel/PowerMenu.qml index ad9b1e3..84ee679 100644 --- a/Modules/SidePanel/PowerMenu.qml +++ b/Modules/SidePanel/PowerMenu.qml @@ -13,6 +13,9 @@ NPanel { id: powerMenu visible: false + property var entriesCount: 5 + property var entryHeight: Style.baseWidgetSize * scaling + // Anchors will be set by the parent component function show() { visible = true @@ -24,7 +27,7 @@ NPanel { Rectangle { width: 160 * scaling - height: 220 * scaling + height: (entryHeight * entriesCount) + (Style.marginS * entriesCount * scaling) radius: Style.radiusM * scaling border.color: Color.mOutline border.width: Math.max(1, Style.borderS * scaling) @@ -55,7 +58,7 @@ NPanel { // Lock Rectangle { Layout.fillWidth: true - Layout.preferredHeight: Style.barHeight * scaling + Layout.preferredHeight: entryHeight radius: Style.radiusS * scaling color: lockButtonArea.containsMouse ? Color.mTertiary : Color.transparent @@ -80,9 +83,10 @@ NPanel { anchors.verticalCenterOffset: 1 * scaling } - Text { + NText { text: "Lock Screen" color: lockButtonArea.containsMouse ? Color.mOnTertiary : Color.mOnSurface + font.pointSize: Style.fontSizeS * scaling verticalAlignment: Text.AlignVCenter anchors.verticalCenter: parent.verticalCenter anchors.verticalCenterOffset: 1 * scaling @@ -109,7 +113,7 @@ NPanel { // Suspend Rectangle { Layout.fillWidth: true - Layout.preferredHeight: Style.barHeight * scaling + Layout.preferredHeight: entryHeight radius: Style.radiusS * scaling color: suspendButtonArea.containsMouse ? Color.mTertiary : Color.transparent @@ -134,9 +138,10 @@ NPanel { anchors.verticalCenterOffset: 1 * scaling } - Text { + NText { text: "Suspend" color: suspendButtonArea.containsMouse ? Color.mOnTertiary : Color.mOnSurface + font.pointSize: Style.fontSizeS * scaling verticalAlignment: Text.AlignVCenter anchors.verticalCenter: parent.verticalCenter anchors.verticalCenterOffset: 1 * scaling @@ -161,7 +166,7 @@ NPanel { // Reboot Rectangle { Layout.fillWidth: true - Layout.preferredHeight: Style.barHeight * scaling + Layout.preferredHeight: entryHeight radius: Style.radiusS * scaling color: rebootButtonArea.containsMouse ? Color.mTertiary : Color.transparent @@ -186,9 +191,10 @@ NPanel { anchors.verticalCenterOffset: 1 * scaling } - Text { + NText { text: "Reboot" color: rebootButtonArea.containsMouse ? Color.mOnTertiary : Color.mOnSurface + font.pointSize: Style.fontSizeS * scaling verticalAlignment: Text.AlignVCenter anchors.verticalCenter: parent.verticalCenter anchors.verticalCenterOffset: 1 * scaling @@ -213,7 +219,7 @@ NPanel { // Logout Rectangle { Layout.fillWidth: true - Layout.preferredHeight: Style.barHeight * scaling + Layout.preferredHeight: entryHeight radius: Style.radiusS * scaling color: logoutButtonArea.containsMouse ? Color.mTertiary : Color.transparent @@ -238,9 +244,10 @@ NPanel { anchors.verticalCenterOffset: 1 * scaling } - Text { + NText { text: "Logout" color: logoutButtonArea.containsMouse ? Color.mOnTertiary : Color.mOnSurface + font.pointSize: Style.fontSizeS * scaling verticalAlignment: Text.AlignVCenter anchors.verticalCenter: parent.verticalCenter anchors.verticalCenterOffset: 1 * scaling @@ -265,7 +272,7 @@ NPanel { // Shutdown Rectangle { Layout.fillWidth: true - Layout.preferredHeight: Style.barHeight * scaling + Layout.preferredHeight: entryHeight radius: Style.radiusS * scaling color: shutdownButtonArea.containsMouse ? Color.mTertiary : Color.transparent @@ -290,9 +297,10 @@ NPanel { anchors.verticalCenterOffset: 1 * scaling } - Text { + NText { text: "Shutdown" color: shutdownButtonArea.containsMouse ? Color.mOnTertiary : Color.mOnSurface + font.pointSize: Style.fontSizeS * scaling verticalAlignment: Text.AlignVCenter anchors.verticalCenter: parent.verticalCenter anchors.verticalCenterOffset: 1 * scaling diff --git a/Widgets/NIconButton.qml b/Widgets/NIconButton.qml index 86a1bb7..c1b0e43 100644 --- a/Widgets/NIconButton.qml +++ b/Widgets/NIconButton.qml @@ -12,12 +12,17 @@ Rectangle { property real size: Style.baseWidgetSize * sizeMultiplier * scaling property string icon property string tooltipText - property bool showBorder: true - property bool showFilled: false property bool enabled: true property bool hovering: false property real fontPointSize: Style.fontSizeM + property color colorBg: Color.mSurfaceVariant + property color colorFg: Color.mPrimary + property color colorBgHover: Color.mPrimary + property color colorFgHover: Color.mOnPrimary + property color colorBorder: Color.mOutline + property color colorBorderHover: Color.mOutline + signal entered signal exited signal clicked @@ -25,9 +30,9 @@ Rectangle { implicitWidth: size implicitHeight: size - color: (root.hovering || showFilled) ? Color.mPrimary : Color.transparent + color: root.hovering ? colorBgHover : colorBg radius: width * 0.5 - border.color: showBorder ? Color.mPrimary : Color.transparent + border.color: root.hovering ? colorBorderHover : colorBorder border.width: Math.max(1, Style.borderS * scaling) NIcon { @@ -37,7 +42,7 @@ Rectangle { anchors.verticalCenterOffset: 0 text: root.icon font.pointSize: root.fontPointSize * scaling - color: (root.hovering || showFilled) ? Color.mOnPrimary : showBorder ? Color.mPrimary : Color.mOnSurface + color: root.hovering ? colorFgHover : colorFg horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter opacity: root.enabled ? Style.opacityFull : Style.opacityMedium diff --git a/Widgets/NPill.qml b/Widgets/NPill.qml index 77c43c8..d56cb46 100644 --- a/Widgets/NPill.qml +++ b/Widgets/NPill.qml @@ -80,7 +80,7 @@ Item { width: iconSize height: iconSize radius: width * 0.5 - color: showPill ? iconCircleColor : Color.transparent + color: showPill ? iconCircleColor : Color.mSurfaceVariant anchors.verticalCenter: parent.verticalCenter anchors.right: parent.right @@ -94,7 +94,7 @@ Item { NIcon { text: root.icon font.pointSize: Style.fontSizeM * scaling - color: showPill ? iconTextColor : collapsedIconColor + color: showPill ? iconTextColor : Color.mOnSurface anchors.centerIn: parent } }