never/noctalia-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Renamed all color names so they are shorter

Browse source
This commit is contained in:
quadbyte 2025-08-14 19:52:03 -04:00
parent 9e51fdc932
commit 06f8f93f83
51 changed files with 423 additions and 440 deletions
Download patch file Download diff file Expand all files Collapse all files

30
Assets/Matugen/templates/noctalia.json
View file

@ -1,21 +1,21 @@
{ {
"colorPrimary": "{{colors.primary.default.hex}}", "mPrimary": "{{colors.primary.default.hex}}",
"colorOnPrimary": "{{colors.on_primary.default.hex}}", "mOnPrimary": "{{colors.on_primary.default.hex}}",
"colorSecondary": "{{colors.secondary.default.hex}}", "mSecondary": "{{colors.secondary.default.hex}}",
"colorOnSecondary": "{{colors.on_secondary.default.hex}}", "mOnSecondary": "{{colors.on_secondary.default.hex}}",
"colorTertiary": "{{colors.tertiary.default.hex}}", "mTertiary": "{{colors.tertiary.default.hex}}",
"colorOnTertiary": "{{colors.on_tertiary.default.hex}}", "mOnTertiary": "{{colors.on_tertiary.default.hex}}",
"colorError": "{{colors.error.default.hex}}", "mError": "{{colors.error.default.hex}}",
"colorOnError": "{{colors.on_error.default.hex}}", "mOnError": "{{colors.on_error.default.hex}}",
"colorSurface": "{{colors.surface.default.hex}}", "mSurface": "{{colors.surface.default.hex}}",
"colorOnSurface": "{{colors.on_surface.default.hex}}", "mOnSurface": "{{colors.on_surface.default.hex}}",
"colorSurfaceVariant": "{{colors.surface_variant.default.hex}}", "mSurfaceVariant": "{{colors.surface_variant.default.hex}}",
"colorOnSurfaceVariant": "{{colors.on_surface_variant.default.hex}}", "mOnSurfaceVariant": "{{colors.on_surface_variant.default.hex}}",
"colorOutline": "{{colors.outline.default.hex}}", "mOutline": "{{colors.outline.default.hex}}",
"colorOutlineVariant": "{{colors.outline_variant.default.hex}}", "mOutlineVariant": "{{colors.outline_variant.default.hex}}",
"colorShadow": "{{colors.shadow.default.hex}}" "mShadow": "{{colors.shadow.default.hex}}"
} }

48
Modules/AppLauncher/AppLauncher.qml
View file

@ -254,19 +254,19 @@ NLoader {
width: Math.min(700 * scaling, parent.width * 0.75) width: Math.min(700 * scaling, parent.width * 0.75)
height: Math.min(550 * scaling, parent.height * 0.8) height: Math.min(550 * scaling, parent.height * 0.8)
radius: 32 * scaling radius: 32 * scaling
color: Colors.colorSurface color: Colors.mSurface
border.color: Colors.colorOutline border.color: Colors.mOutline
border.width: Style.borderThin * scaling border.width: Style.borderThin * scaling
// Subtle gradient background // Subtle gradient background
gradient: Gradient { gradient: Gradient {
GradientStop { GradientStop {
position: 0.0 position: 0.0
color: Qt.lighter(Colors.colorSurface, 1.02) color: Qt.lighter(Colors.mSurface, 1.02)
} }
GradientStop { GradientStop {
position: 1.0 position: 1.0
color: Qt.darker(Colors.colorSurface, 1.1) color: Qt.darker(Colors.mSurface, 1.1)
} }
} }
@ -281,8 +281,8 @@ NLoader {
Layout.preferredHeight: 40 * scaling Layout.preferredHeight: 40 * scaling
Layout.bottomMargin: Style.marginMedium * scaling Layout.bottomMargin: Style.marginMedium * scaling
radius: 20 * scaling radius: 20 * scaling
color: Colors.colorSurface color: Colors.mSurface
border.color: searchInput.activeFocus ? Colors.colorPrimary : Colors.colorOutline border.color: searchInput.activeFocus ? Colors.mPrimary : Colors.mOutline
border.width: searchInput.activeFocus ? 2 : 1 border.width: searchInput.activeFocus ? 2 : 1
Row { Row {
@ -294,14 +294,14 @@ NLoader {
text: "search" text: "search"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pointSize: 16 * scaling font.pointSize: 16 * scaling
color: searchInput.activeFocus ? Colors.colorPrimary : Colors.colorOnSurface color: searchInput.activeFocus ? Colors.mPrimary : Colors.mOnSurface
} }
TextField { TextField {
id: searchInput id: searchInput
placeholderText: "Search applications..." placeholderText: "Search applications..."
color: Colors.colorOnSurface color: Colors.mOnSurface
placeholderTextColor: Colors.colorOnSurface placeholderTextColor: Colors.mOnSurface
background: null background: null
font.pointSize: 13 * scaling font.pointSize: 13 * scaling
Layout.fillWidth: true Layout.fillWidth: true
@ -309,8 +309,8 @@ NLoader {
searchText = text searchText = text
selectedIndex = 0 // Reset selection when search changes selectedIndex = 0 // Reset selection when search changes
} }
selectedTextColor: Colors.colorOnSurface selectedTextColor: Colors.mOnSurface
selectionColor: Colors.colorPrimary selectionColor: Colors.mPrimary
padding: 0 padding: 0
verticalAlignment: TextInput.AlignVCenter verticalAlignment: TextInput.AlignVCenter
leftPadding: 0 leftPadding: 0
@ -319,14 +319,14 @@ NLoader {
bottomPadding: 0 bottomPadding: 0
font.bold: true font.bold: true
Component.onCompleted: { Component.onCompleted: {
contentItem.cursorColor = Colors.colorOnSurface contentItem.cursorColor = Colors.mOnSurface
contentItem.verticalAlignment = TextInput.AlignVCenter contentItem.verticalAlignment = TextInput.AlignVCenter
// Focus the search bar by default // Focus the search bar by default
Qt.callLater(() => { Qt.callLater(() => {
searchInput.forceActiveFocus() searchInput.forceActiveFocus()
}) })
} }
onActiveFocusChanged: contentItem.cursorColor = Colors.colorOnSurface onActiveFocusChanged: contentItem.cursorColor = Colors.mOnSurface
Keys.onDownPressed: selectNext() Keys.onDownPressed: selectNext()
Keys.onUpPressed: selectPrev() Keys.onUpPressed: selectPrev()
@ -369,10 +369,10 @@ NLoader {
height: 56 * scaling height: 56 * scaling
radius: 16 * scaling radius: 16 * scaling
property bool isSelected: index === selectedIndex property bool isSelected: index === selectedIndex
color: (appCardArea.containsMouse || isSelected) ? Qt.darker(Colors.colorPrimary, color: (appCardArea.containsMouse || isSelected) ? Qt.darker(Colors.mPrimary,
1.1) : Colors.colorSurface 1.1) : Colors.mSurface
border.color: (appCardArea.containsMouse border.color: (appCardArea.containsMouse
|| isSelected) ? Colors.colorPrimary : "transparent" || isSelected) ? Colors.mPrimary : "transparent"
border.width: (appCardArea.containsMouse || isSelected) ? 2 : 0 border.width: (appCardArea.containsMouse || isSelected) ? 2 : 0
Behavior on color { Behavior on color {
@ -403,8 +403,8 @@ NLoader {
Layout.preferredWidth: 40 * scaling Layout.preferredWidth: 40 * scaling
Layout.preferredHeight: 40 * scaling Layout.preferredHeight: 40 * scaling
radius: 14 * scaling radius: 14 * scaling
color: appCardArea.containsMouse ? Qt.darker(Colors.colorPrimary, color: appCardArea.containsMouse ? Qt.darker(Colors.mPrimary,
1.1) : Colors.colorSurfaceVariant 1.1) : Colors.mSurfaceVariant
property bool iconLoaded: (modelData.isCalculator || modelData.isClipboard property bool iconLoaded: (modelData.isCalculator || modelData.isClipboard
|| modelData.isCommand) || (iconImg.status === Image.Ready || modelData.isCommand) || (iconImg.status === Image.Ready
&& iconImg.source !== "" && iconImg.source !== ""
@ -439,7 +439,7 @@ NLoader {
anchors.fill: parent anchors.fill: parent
anchors.margins: 6 * scaling anchors.margins: 6 * scaling
radius: 10 * scaling radius: 10 * scaling
color: Colors.colorPrimary color: Colors.mPrimary
opacity: 0.3 opacity: 0.3
visible: !parent.iconLoaded visible: !parent.iconLoaded
} }
@ -451,7 +451,7 @@ NLoader {
text: modelData.name ? modelData.name.charAt(0).toUpperCase() : "?" text: modelData.name ? modelData.name.charAt(0).toUpperCase() : "?"
font.pointSize: 18 * scaling font.pointSize: 18 * scaling
font.weight: Font.Bold font.weight: Font.Bold
color: Colors.colorPrimary color: Colors.mPrimary
} }
Behavior on color { Behavior on color {
@ -470,7 +470,7 @@ NLoader {
text: modelData.name || "Unknown" text: modelData.name || "Unknown"
font.pointSize: 14 * scaling font.pointSize: 14 * scaling
font.weight: Font.Bold font.weight: Font.Bold
color: Colors.colorOnSurface color: Colors.mOnSurface
elide: Text.ElideRight elide: Text.ElideRight
Layout.fillWidth: true Layout.fillWidth: true
} }
@ -479,7 +479,7 @@ NLoader {
text: modelData.isCalculator ? (modelData.expr + " = " + modelData.result) : modelData.isClipboard ? modelData.content : modelData.isCommand ? modelData.content : (modelData.genericName || modelData.comment || "") text: modelData.isCalculator ? (modelData.expr + " = " + modelData.result) : modelData.isClipboard ? modelData.content : modelData.isCommand ? modelData.content : (modelData.genericName || modelData.comment || "")
font.pointSize: 11 * scaling font.pointSize: 11 * scaling
color: (appCardArea.containsMouse color: (appCardArea.containsMouse
|| isSelected) ? Colors.colorOnSurface : Colors.colorOnSurface || isSelected) ? Colors.mOnSurface : Colors.mOnSurface
elide: Text.ElideRight elide: Text.ElideRight
Layout.fillWidth: true Layout.fillWidth: true
visible: text !== "" visible: text !== ""
@ -506,7 +506,7 @@ NLoader {
NText { NText {
text: searchText.trim() !== "" ? "No applications found" : "No applications available" text: searchText.trim() !== "" ? "No applications found" : "No applications available"
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeLarge * scaling
color: Colors.colorOnSurface color: Colors.mOnSurface
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
Layout.fillWidth: true Layout.fillWidth: true
visible: filteredEntries.length === 0 visible: filteredEntries.length === 0
@ -520,7 +520,7 @@ NLoader {
">calc") ? `${filteredEntries.length} result${filteredEntries.length ">calc") ? `${filteredEntries.length} result${filteredEntries.length
!== 1 ? 's' : ''}` : `${filteredEntries.length} application${filteredEntries.length !== 1 ? 's' : ''}` !== 1 ? 's' : ''}` : `${filteredEntries.length} application${filteredEntries.length !== 1 ? 's' : ''}`
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeSmall * scaling
color: Colors.colorOnSurface color: Colors.mOnSurface
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
Layout.fillWidth: true Layout.fillWidth: true
visible: searchText.trim() !== "" visible: searchText.trim() !== ""

4
Modules/Audio/CircularSpectrum.qml
View file

@ -5,8 +5,8 @@ Item {
id: root id: root
property int innerRadius: 32 * scaling property int innerRadius: 32 * scaling
property int outerRadius: 64 * scaling property int outerRadius: 64 * scaling
property color fillColor: Colors.colorPrimary property color fillColor: Colors.mPrimary
property color strokeColor: Colors.colorOnSurface property color strokeColor: Colors.mOnSurface
property int strokeWidth: 0 * scaling property int strokeWidth: 0 * scaling
property var values: [] property var values: []
property int usableOuter: 64 property int usableOuter: 64

4
Modules/Audio/LinearSpectrum.qml
View file

@ -3,8 +3,8 @@ import qs.Services
Item { Item {
id: root id: root
property color fillColor: Colors.colorPrimary property color fillColor: Colors.mPrimary
property color strokeColor: Colors.colorOnSurface property color strokeColor: Colors.mOnSurface
property int strokeWidth: 0 property int strokeWidth: 0
property var values: [] property var values: []

2
Modules/Background/Overview.qml
View file

@ -62,7 +62,7 @@ NLoader {
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
color: Qt.rgba(Colors.colorSurface.r, Colors.colorSurface.g, Colors.colorSurface.b, 0.5) color: Qt.rgba(Colors.mSurface.r, Colors.mSurface.g, Colors.mSurface.b, 0.5)
} }
} }
} }

2
Modules/Background/ScreenCorners.qml
View file

@ -17,7 +17,7 @@ NLoader {
required property ShellScreen modelData required property ShellScreen modelData
// Visible ring color // Visible ring color
property color ringColor: Colors.colorSurface property color ringColor: Colors.mSurface
// The amount subtracted from full size for the inner cutout // The amount subtracted from full size for the inner cutout
// Inner size = full size - borderWidth (per axis) // Inner size = full size - borderWidth (per axis)
property int borderWidth: Style.borderMedium property int borderWidth: Style.borderMedium

2
Modules/Bar/Bar.qml
View file

@ -36,7 +36,7 @@ Variants {
id: bar id: bar
anchors.fill: parent anchors.fill: parent
color: Colors.colorSurface color: Colors.mSurface
layer.enabled: true layer.enabled: true
} }

8
Modules/Bar/Battery.qml
View file

@ -51,10 +51,10 @@ NPill {
icon: root.batteryIcon() icon: root.batteryIcon()
text: Math.round(root.percent) + "%" text: Math.round(root.percent) + "%"
pillColor: Colors.colorSurfaceVariant pillColor: Colors.mSurfaceVariant
iconCircleColor: Colors.colorPrimary iconCircleColor: Colors.mPrimary
iconTextColor: Colors.colorSurface iconTextColor: Colors.mSurface
textColor: charging ? Colors.colorPrimary : Colors.colorOnSurface textColor: charging ? Colors.mPrimary : Colors.mOnSurface
tooltipText: { tooltipText: {
let lines = [] let lines = []

6
Modules/Bar/SystemMonitor.qml
View file

@ -23,7 +23,7 @@ Row {
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeLarge * scaling
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
color: Colors.colorPrimary color: Colors.mPrimary
} }
NText { NText {
@ -45,7 +45,7 @@ Row {
text: "thermometer" text: "thermometer"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeLarge * scaling
color: Colors.colorPrimary color: Colors.mPrimary
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
} }
@ -68,7 +68,7 @@ Row {
text: "memory" text: "memory"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeLarge * scaling
color: Colors.colorPrimary color: Colors.mPrimary
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
} }

18
Modules/Bar/TrayMenu.qml
View file

@ -73,8 +73,8 @@ PopupWindow {
Rectangle { Rectangle {
id: bg id: bg
anchors.fill: parent anchors.fill: parent
color: Colors.colorSurface color: Colors.mSurface
border.color: Colors.colorOutline border.color: Colors.mOutline
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderThin * scaling)
radius: Style.radiusMedium * scaling radius: Style.radiusMedium * scaling
z: 0 z: 0
@ -112,7 +112,7 @@ PopupWindow {
Rectangle { Rectangle {
id: bg id: bg
anchors.fill: parent anchors.fill: parent
color: mouseArea.containsMouse ? Colors.colorTertiary : "transparent" color: mouseArea.containsMouse ? Colors.mTertiary : "transparent"
radius: Style.radiusSmall * scaling radius: Style.radiusSmall * scaling
visible: !(modelData?.isSeparator ?? false) visible: !(modelData?.isSeparator ?? false)
@ -126,7 +126,7 @@ PopupWindow {
id: text id: text
Layout.fillWidth: true Layout.fillWidth: true
color: (modelData?.enabled color: (modelData?.enabled
?? true) ? (mouseArea.containsMouse ? Colors.colorOnSurface : Colors.colorOnSurface) : Colors.textDisabled ?? true) ? (mouseArea.containsMouse ? Colors.mOnSurface : Colors.mOnSurface) : Colors.textDisabled
text: modelData?.text ?? "" text: modelData?.text ?? ""
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeSmall * scaling
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
@ -148,7 +148,7 @@ PopupWindow {
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeSmall * scaling
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
visible: modelData?.hasChildren ?? false visible: modelData?.hasChildren ?? false
color: Colors.colorOnSurface color: Colors.mOnSurface
} }
} }
@ -308,8 +308,8 @@ PopupWindow {
Rectangle { Rectangle {
id: bg id: bg
anchors.fill: parent anchors.fill: parent
color: Colors.colorSurface color: Colors.mSurface
border.color: Colors.colorOutline border.color: Colors.mOutline
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderThin * scaling)
radius: Style.radiusMedium * scaling radius: Style.radiusMedium * scaling
z: 0 z: 0
@ -347,10 +347,10 @@ PopupWindow {
Rectangle { Rectangle {
id: bg id: bg
anchors.fill: parent anchors.fill: parent
color: mouseArea.containsMouse ? Colors.colorTertiary : "transparent" color: mouseArea.containsMouse ? Colors.mTertiary : "transparent"
radius: Style.radiusSmall * scaling radius: Style.radiusSmall * scaling
visible: !(modelData?.isSeparator ?? false) visible: !(modelData?.isSeparator ?? false)
property color hoverTextColor: mouseArea.containsMouse ? Colors.colorOnSurface : Colors.colorOnSurface property color hoverTextColor: mouseArea.containsMouse ? Colors.mOnSurface : Colors.mOnSurface
RowLayout { RowLayout {
anchors.fill: parent anchors.fill: parent

4
Modules/Bar/Volume.qml
View file

@ -38,8 +38,8 @@ Item {
NPill { NPill {
id: pill id: pill
icon: getIcon() icon: getIcon()
iconCircleColor: Colors.colorPrimary iconCircleColor: Colors.mPrimary
collapsedIconColor: Colors.colorOnSurface collapsedIconColor: Colors.mOnSurface
autoHide: true autoHide: true
text: Math.floor(Audio.volume * 100) + "%" text: Math.floor(Audio.volume * 100) + "%"
tooltipText: "Volume: " + Math.round( tooltipText: "Volume: " + Math.round(

40
Modules/Bar/WiFiMenu.qml
View file

@ -67,9 +67,9 @@ NLoader {
Rectangle { Rectangle {
id: wifiMenuRect id: wifiMenuRect
color: Colors.colorSurface color: Colors.mSurface
radius: Style.radiusMedium * scaling radius: Style.radiusMedium * scaling
border.color: Colors.colorSurfaceVariant border.color: Colors.mSurfaceVariant
border.width: Math.max(1, Style.borderMedium * scaling) border.width: Math.max(1, Style.borderMedium * scaling)
width: 340 * scaling width: 340 * scaling
height: 320 * scaling height: 320 * scaling
@ -119,14 +119,14 @@ NLoader {
text: "wifi" text: "wifi"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXL * scaling
color: Colors.colorPrimary color: Colors.mPrimary
} }
NText { NText {
text: "WiFi" text: "WiFi"
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeLarge * scaling
font.bold: true font.bold: true
color: Colors.colorOnSurface color: Colors.mOnSurface
Layout.fillWidth: true Layout.fillWidth: true
} }
@ -180,7 +180,7 @@ NLoader {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: Style.baseWidgetSize * 1.5 * scaling Layout.preferredHeight: Style.baseWidgetSize * 1.5 * scaling
radius: Style.radiusMedium * scaling radius: Style.radiusMedium * scaling
color: modelData.connected ? Colors.colorPrimary : (networkMouseArea.containsMouse ? Colors.colorTertiary : "transparent") color: modelData.connected ? Colors.mPrimary : (networkMouseArea.containsMouse ? Colors.mTertiary : "transparent")
RowLayout { RowLayout {
anchors.fill: parent anchors.fill: parent
@ -191,7 +191,7 @@ NLoader {
text: network.signalIcon(modelData.signal) text: network.signalIcon(modelData.signal)
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXL * scaling
color: modelData.connected ? Colors.colorSurface : (networkMouseArea.containsMouse ? Colors.colorSurface : Colors.colorOnSurface) color: modelData.connected ? Colors.mSurface : (networkMouseArea.containsMouse ? Colors.mSurface : Colors.mOnSurface)
} }
ColumnLayout { ColumnLayout {
@ -204,7 +204,7 @@ NLoader {
font.pointSize: Style.fontSizeNormal * scaling font.pointSize: Style.fontSizeNormal * scaling
elide: Text.ElideRight elide: Text.ElideRight
Layout.fillWidth: true Layout.fillWidth: true
color: modelData.connected ? Colors.colorSurface : (networkMouseArea.containsMouse ? Colors.colorSurface : Colors.colorOnSurface) color: modelData.connected ? Colors.mSurface : (networkMouseArea.containsMouse ? Colors.mSurface : Colors.mOnSurface)
} }
// Security Protocol // Security Protocol
@ -213,14 +213,14 @@ NLoader {
font.pointSize: Style.fontSizeTiny * scaling font.pointSize: Style.fontSizeTiny * scaling
elide: Text.ElideRight elide: Text.ElideRight
Layout.fillWidth: true Layout.fillWidth: true
color: modelData.connected ? Colors.colorSurface : (networkMouseArea.containsMouse ? Colors.colorSurface : Colors.colorOnSurface) color: modelData.connected ? Colors.mSurface : (networkMouseArea.containsMouse ? Colors.mSurface : Colors.mOnSurface)
} }
NText { NText {
visible: network.connectStatusSsid === modelData.ssid && network.connectStatus === "error" visible: network.connectStatusSsid === modelData.ssid && network.connectStatus === "error"
&& network.connectError.length > 0 && network.connectError.length > 0
text: network.connectError text: network.connectError
color: Colors.colorError color: Colors.mError
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeSmall * scaling
elide: Text.ElideRight elide: Text.ElideRight
Layout.fillWidth: true Layout.fillWidth: true
@ -236,7 +236,7 @@ NLoader {
NBusyIndicator { NBusyIndicator {
visible: network.connectingSsid === modelData.ssid visible: network.connectingSsid === modelData.ssid
running: network.connectingSsid === modelData.ssid running: network.connectingSsid === modelData.ssid
color: Colors.colorPrimary color: Colors.mPrimary
anchors.centerIn: parent anchors.centerIn: parent
size: Style.baseWidgetSize * 0.7 * scaling size: Style.baseWidgetSize * 0.7 * scaling
} }
@ -257,7 +257,7 @@ NLoader {
text: "error" text: "error"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeSmall * scaling
color: Colors.colorError color: Colors.mError
anchors.centerIn: parent anchors.centerIn: parent
} }
} }
@ -266,7 +266,7 @@ NLoader {
visible: modelData.connected visible: modelData.connected
text: "connected" text: "connected"
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeSmall * scaling
color: modelData.connected ? Colors.colorSurface : (networkMouseArea.containsMouse ? Colors.colorSurface : Colors.colorOnSurface) color: modelData.connected ? Colors.mSurface : (networkMouseArea.containsMouse ? Colors.mSurface : Colors.mOnSurface)
} }
} }
@ -298,7 +298,7 @@ NLoader {
Layout.preferredHeight: modelData.ssid === passwordPromptSsid && showPasswordPrompt ? 60 : 0 Layout.preferredHeight: modelData.ssid === passwordPromptSsid && showPasswordPrompt ? 60 : 0
Layout.margins: 8 Layout.margins: 8
visible: modelData.ssid === passwordPromptSsid && showPasswordPrompt visible: modelData.ssid === passwordPromptSsid && showPasswordPrompt
color: Colors.colorSurfaceVariant color: Colors.mSurfaceVariant
radius: Style.radiusSmall * scaling radius: Style.radiusSmall * scaling
RowLayout { RowLayout {
@ -314,7 +314,7 @@ NLoader {
anchors.fill: parent anchors.fill: parent
radius: 8 radius: 8
color: "transparent" color: "transparent"
border.color: passwordInputField.activeFocus ? Colors.colorPrimary : Colors.colorOutline border.color: passwordInputField.activeFocus ? Colors.mPrimary : Colors.mOutline
border.width: 1 border.width: 1
TextInput { TextInput {
@ -323,7 +323,7 @@ NLoader {
anchors.margins: Style.marginMedium * scaling anchors.margins: Style.marginMedium * scaling
text: passwordInput text: passwordInput
font.pointSize: Style.fontSizeMedium * scaling font.pointSize: Style.fontSizeMedium * scaling
color: Colors.colorOnSurface color: Colors.mOnSurface
verticalAlignment: TextInput.AlignVCenter verticalAlignment: TextInput.AlignVCenter
clip: true clip: true
focus: true focus: true
@ -350,8 +350,8 @@ NLoader {
Layout.preferredWidth: 80 Layout.preferredWidth: 80
Layout.preferredHeight: 36 Layout.preferredHeight: 36
radius: Style.radiusMedium * scaling radius: Style.radiusMedium * scaling
color: Colors.colorPrimary color: Colors.mPrimary
border.color: Colors.colorPrimary border.color: Colors.mPrimary
border.width: 0 border.width: 0
Behavior on color { Behavior on color {
@ -363,7 +363,7 @@ NLoader {
NText { NText {
anchors.centerIn: parent anchors.centerIn: parent
text: "Connect" text: "Connect"
color: Colors.colorSurface color: Colors.mSurface
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeSmall * scaling
} }
@ -375,8 +375,8 @@ NLoader {
} }
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
hoverEnabled: true hoverEnabled: true
onEntered: parent.color = Qt.darker(Colors.colorPrimary, 1.1) onEntered: parent.color = Qt.darker(Colors.mPrimary, 1.1)
onExited: parent.color = Colors.colorPrimary onExited: parent.color = Colors.mPrimary
} }
} }
} }

22
Modules/Bar/Workspace.qml
View file

@ -18,7 +18,7 @@ Item {
property ListModel localWorkspaces: ListModel {} property ListModel localWorkspaces: ListModel {}
property real masterProgress: 0.0 property real masterProgress: 0.0
property bool effectsActive: false property bool effectsActive: false
property color effectColor: Colors.colorPrimary property color effectColor: Colors.mPrimary
property int horizontalPadding: Math.round(16 * s) property int horizontalPadding: Math.round(16 * s)
property int spacingBetweenPills: Math.round(8 * s) property int spacingBetweenPills: Math.round(8 * s)
@ -72,7 +72,7 @@ Item {
} }
function triggerUnifiedWave() { function triggerUnifiedWave() {
effectColor = Colors.colorPrimary effectColor = Colors.mPrimary
masterAnimation.restart() masterAnimation.restart()
} }
@ -108,7 +108,7 @@ Item {
const ws = localWorkspaces.get(i) const ws = localWorkspaces.get(i)
if (ws.isFocused === true) { if (ws.isFocused === true) {
root.triggerUnifiedWave() root.triggerUnifiedWave()
root.workspaceChanged(ws.id, Colors.colorPrimary) root.workspaceChanged(ws.id, Colors.mPrimary)
break break
} }
} }
@ -121,12 +121,12 @@ Item {
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
radius: Math.round(12 * s) radius: Math.round(12 * s)
color: Colors.colorSurfaceVariant color: Colors.mSurfaceVariant
border.color: Colors.colorOutlineVariant border.color: Colors.mOutlineVariant
border.width: Math.max(1, Math.round(1 * s)) border.width: Math.max(1, Math.round(1 * s))
layer.enabled: true layer.enabled: true
layer.effect: MultiEffect { layer.effect: MultiEffect {
shadowColor: Colors.colorShadow shadowColor: Colors.mShadow
shadowVerticalOffset: 0 shadowVerticalOffset: 0
shadowHorizontalOffset: 0 shadowHorizontalOffset: 0
shadowOpacity: 0.10 shadowOpacity: 0.10
@ -166,15 +166,15 @@ Item {
} }
color: { color: {
if (model.isFocused) if (model.isFocused)
return Colors.colorPrimary return Colors.mPrimary
if (model.isUrgent) if (model.isUrgent)
return Colors.colorError return Colors.mError
if (model.isActive || model.isOccupied) if (model.isActive || model.isOccupied)
return Colors.colorSecondary return Colors.mSecondary
if (model.isUrgent) if (model.isUrgent)
return Colors.colorError return Colors.mError
return Colors.colorOutline return Colors.mOutline
} }
scale: model.isFocused ? 1.0 : 0.9 scale: model.isFocused ? 1.0 : 0.9
z: 0 z: 0

12
Modules/Calendar/Calendar.qml
View file

@ -63,9 +63,9 @@ NLoader {
Rectangle { Rectangle {
id: calendarRect id: calendarRect
color: Colors.colorSurface color: Colors.mSurface
radius: Style.radiusMedium * scaling radius: Style.radiusMedium * scaling
border.color: Colors.colorSurfaceVariant border.color: Colors.mSurfaceVariant
border.width: Math.max(1, Style.borderMedium * scaling) border.width: Math.max(1, Style.borderMedium * scaling)
width: 340 * scaling width: 340 * scaling
height: 320 * scaling // Reduced height to eliminate bottom space height: 320 * scaling // Reduced height to eliminate bottom space
@ -135,7 +135,7 @@ NLoader {
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
font.pointSize: Style.fontSizeMedium * scaling font.pointSize: Style.fontSizeMedium * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.colorPrimary color: Colors.mPrimary
} }
NIconButton { NIconButton {
@ -172,7 +172,7 @@ NLoader {
let dayIndex = (firstDay + index) % 7 let dayIndex = (firstDay + index) % 7
return Qt.locale().dayName(dayIndex, Locale.ShortFormat) return Qt.locale().dayName(dayIndex, Locale.ShortFormat)
} }
color: Colors.colorSecondary color: Colors.mSecondary
font.pointSize: Style.fontSizeMedium * scaling font.pointSize: Style.fontSizeMedium * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
@ -210,12 +210,12 @@ NLoader {
width: (Style.baseWidgetSize * scaling) width: (Style.baseWidgetSize * scaling)
height: (Style.baseWidgetSize * scaling) height: (Style.baseWidgetSize * scaling)
radius: Style.radiusSmall * scaling radius: Style.radiusSmall * scaling
color: model.today ? Colors.colorPrimary : "transparent" color: model.today ? Colors.mPrimary : "transparent"
NText { NText {
anchors.centerIn: parent anchors.centerIn: parent
text: model.day text: model.day
color: model.today ? Colors.onAccent : Colors.colorOnSurface color: model.today ? Colors.onAccent : Colors.mOnSurface
opacity: model.month === grid.month ? Style.opacityHeavy : Style.opacityLight opacity: model.month === grid.month ? Style.opacityHeavy : Style.opacityLight
font.pointSize: (Style.fontSizeMedium * scaling) font.pointSize: (Style.fontSizeMedium * scaling)
font.weight: model.today ? Style.fontWeightBold : Style.fontWeightRegular font.weight: model.today ? Style.fontWeightBold : Style.fontWeightRegular

18
Modules/Demo/DemoPanel.qml
View file

@ -68,9 +68,9 @@ NLoader {
Rectangle { Rectangle {
id: bgRect id: bgRect
color: Colors.colorSurfaceVariant color: Colors.mSurfaceVariant
radius: Style.radiusMedium * scaling radius: Style.radiusMedium * scaling
border.color: Colors.colorOutlineVariant border.color: Colors.mOutlineVariant
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderThin * scaling)
width: 500 * scaling width: 500 * scaling
height: 700 * scaling height: 700 * scaling
@ -115,7 +115,7 @@ NLoader {
NText { NText {
text: "DemoPanel" text: "DemoPanel"
color: Colors.colorPrimary color: Colors.mPrimary
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
@ -130,7 +130,7 @@ NLoader {
spacing: Style.marginLarge * scaling spacing: Style.marginLarge * scaling
NText { NText {
text: "Scaling" text: "Scaling"
color: Colors.colorSecondary color: Colors.mSecondary
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
} }
NText { NText {
@ -173,7 +173,7 @@ NLoader {
spacing: Style.marginLarge * scaling spacing: Style.marginLarge * scaling
NText { NText {
text: "NIconButton" text: "NIconButton"
color: Colors.colorSecondary color: Colors.mSecondary
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
} }
@ -193,7 +193,7 @@ NLoader {
spacing: Style.marginMedium * scaling spacing: Style.marginMedium * scaling
NText { NText {
text: "NToggle" text: "NToggle"
color: Colors.colorSecondary color: Colors.mSecondary
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
} }
@ -215,7 +215,7 @@ NLoader {
spacing: Style.marginMedium * scaling spacing: Style.marginMedium * scaling
NText { NText {
text: "NComboBox" text: "NComboBox"
color: Colors.colorSecondary color: Colors.mSecondary
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
} }
@ -240,7 +240,7 @@ NLoader {
spacing: Style.marginMedium * scaling spacing: Style.marginMedium * scaling
NText { NText {
text: "NTextInput" text: "NTextInput"
color: Colors.colorSecondary color: Colors.mSecondary
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
} }
@ -263,7 +263,7 @@ NLoader {
spacing: Style.marginMedium * scaling spacing: Style.marginMedium * scaling
NText { NText {
text: "NBusyIndicator" text: "NBusyIndicator"
color: Colors.colorSecondary color: Colors.mSecondary
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
} }

12
Modules/Dock/Dock.qml
View file

@ -104,7 +104,7 @@ NLoader {
id: dockContainer id: dockContainer
width: dock.width + 40 width: dock.width + 40
height: 50 height: 50
color: Colors.colorSurface color: Colors.mSurface
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
topLeftRadius: 20 topLeftRadius: 20
@ -203,7 +203,7 @@ NLoader {
text: appButton.appId ? appButton.appId.charAt(0).toUpperCase() : "?" text: appButton.appId ? appButton.appId.charAt(0).toUpperCase() : "?"
font.pixelSize: 14 font.pixelSize: 14
font.bold: true font.bold: true
color: appButton.isActive ? Colors.colorPrimary : Colors.colorOnSurface color: appButton.isActive ? Colors.mPrimary : Colors.mOnSurface
} }
MouseArea { MouseArea {
@ -253,7 +253,7 @@ NLoader {
visible: isActive visible: isActive
width: 20 width: 20
height: 3 height: 3
color: Colors.colorPrimary color: Colors.mPrimary
radius: 1.5 radius: 1.5
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
@ -292,8 +292,8 @@ NLoader {
width: 80 width: 80
height: 32 height: 32
radius: 8 radius: 8
color: closeMouseArea.containsMouse ? Colors.colorTertiary : Colors.colorSurface color: closeMouseArea.containsMouse ? Colors.mTertiary : Colors.mSurface
border.color: Colors.colorOutline border.color: Colors.mOutline
border.width: 1 border.width: 1
x: { x: {
@ -315,7 +315,7 @@ NLoader {
anchors.centerIn: parent anchors.centerIn: parent
text: "Close" text: "Close"
font.pixelSize: 14 font.pixelSize: 14
color: Colors.colorOnSurface color: Colors.mOnSurface
} }
MouseArea { MouseArea {

70
Modules/LockScreen/LockScreen.qml
View file

@ -138,7 +138,7 @@ WlSessionLock {
width: Math.random() * 4 + 2 width: Math.random() * 4 + 2
height: width height: width
radius: width * 0.5 radius: width * 0.5
color: Qt.rgba(Colors.colorPrimary.r, Colors.colorPrimary.g, Colors.colorPrimary.b, 0.3) color: Qt.rgba(Colors.mPrimary.r, Colors.mPrimary.g, Colors.mPrimary.b, 0.3)
x: Math.random() * parent.width x: Math.random() * parent.width
y: Math.random() * parent.height y: Math.random() * parent.height
@ -181,7 +181,7 @@ WlSessionLock {
font.pointSize: Style.fontSizeXXL * 6 font.pointSize: Style.fontSizeXXL * 6
font.weight: Font.Bold font.weight: Font.Bold
font.letterSpacing: -2 font.letterSpacing: -2
color: Colors.colorOnSurface color: Colors.mOnSurface
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
SequentialAnimation on scale { SequentialAnimation on scale {
@ -205,7 +205,7 @@ WlSessionLock {
font.family: "Inter" font.family: "Inter"
font.pointSize: Style.fontSizeXL font.pointSize: Style.fontSizeXL
font.weight: Font.Light font.weight: Font.Light
color: Colors.colorOnSurface color: Colors.mOnSurface
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
width: timeText.width width: timeText.width
} }
@ -222,7 +222,7 @@ WlSessionLock {
height: 120 * Scaling.scale(screen) height: 120 * Scaling.scale(screen)
radius: width * 0.5 radius: width * 0.5
color: "transparent" color: "transparent"
border.color: Colors.colorPrimary border.color: Colors.mPrimary
border.width: 3 * Scaling.scale(screen) border.width: 3 * Scaling.scale(screen)
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
@ -233,7 +233,7 @@ WlSessionLock {
height: parent.height + 24 * Scaling.scale(screen) height: parent.height + 24 * Scaling.scale(screen)
radius: width * 0.5 radius: width * 0.5
color: "transparent" color: "transparent"
border.color: Qt.rgba(Colors.colorPrimary.r, Colors.colorPrimary.g, Colors.colorPrimary.b, 0.3) border.color: Qt.rgba(Colors.mPrimary.r, Colors.mPrimary.g, Colors.mPrimary.b, 0.3)
border.width: 2 * Scaling.scale(screen) border.width: 2 * Scaling.scale(screen)
z: -1 z: -1
@ -301,8 +301,8 @@ WlSessionLock {
id: terminalBackground id: terminalBackground
anchors.fill: parent anchors.fill: parent
radius: 16 radius: 16
color: Colors.applyOpacity(Colors.colorSurface, "E6") color: Colors.applyOpacity(Colors.mSurface, "E6")
border.color: Colors.colorPrimary border.color: Colors.mPrimary
border.width: 2 * Scaling.scale(screen) border.width: 2 * Scaling.scale(screen)
// Scanline effect // Scanline effect
@ -311,7 +311,7 @@ WlSessionLock {
Rectangle { Rectangle {
width: parent.width width: parent.width
height: 1 height: 1
color: Colors.applyOpacity(Colors.colorPrimary, "1A") color: Colors.applyOpacity(Colors.mPrimary, "1A")
y: index * 10 y: index * 10
opacity: 0.3 opacity: 0.3
@ -333,7 +333,7 @@ WlSessionLock {
Rectangle { Rectangle {
width: parent.width width: parent.width
height: 40 * Scaling.scale(screen) height: 40 * Scaling.scale(screen)
color: Colors.applyOpacity(Colors.colorPrimary, "33") color: Colors.applyOpacity(Colors.mPrimary, "33")
topLeftRadius: 14 topLeftRadius: 14
topRightRadius: 14 topRightRadius: 14
@ -344,7 +344,7 @@ WlSessionLock {
Text { Text {
text: "SECURE TERMINAL" text: "SECURE TERMINAL"
color: Colors.colorOnSurface color: Colors.mOnSurface
font.family: "DejaVu Sans Mono" font.family: "DejaVu Sans Mono"
font.pointSize: Style.fontSizeLarge font.pointSize: Style.fontSizeLarge
font.weight: Font.Bold font.weight: Font.Bold
@ -370,7 +370,7 @@ WlSessionLock {
Text { Text {
text: "root@noctalia:~$" text: "root@noctalia:~$"
color: Colors.colorPrimary color: Colors.mPrimary
font.family: "DejaVu Sans Mono" font.family: "DejaVu Sans Mono"
font.pointSize: Style.fontSizeLarge font.pointSize: Style.fontSizeLarge
font.weight: Font.Bold font.weight: Font.Bold
@ -379,7 +379,7 @@ WlSessionLock {
Text { Text {
id: welcomeText id: welcomeText
text: "" text: ""
color: Colors.colorOnSurface color: Colors.mOnSurface
font.family: "DejaVu Sans Mono" font.family: "DejaVu Sans Mono"
font.pointSize: Style.fontSizeLarge font.pointSize: Style.fontSizeLarge
property int currentIndex: 0 property int currentIndex: 0
@ -408,7 +408,7 @@ WlSessionLock {
Text { Text {
text: "root@noctalia:~$" text: "root@noctalia:~$"
color: Colors.colorPrimary color: Colors.mPrimary
font.family: "DejaVu Sans Mono" font.family: "DejaVu Sans Mono"
font.pointSize: Style.fontSizeLarge font.pointSize: Style.fontSizeLarge
font.weight: Font.Bold font.weight: Font.Bold
@ -416,7 +416,7 @@ WlSessionLock {
Text { Text {
text: "sudo unlock_session" text: "sudo unlock_session"
color: Colors.colorOnSurface color: Colors.mOnSurface
font.family: "DejaVu Sans Mono" font.family: "DejaVu Sans Mono"
font.pointSize: Style.fontSizeLarge font.pointSize: Style.fontSizeLarge
} }
@ -429,7 +429,7 @@ WlSessionLock {
visible: false visible: false
font.family: "DejaVu Sans Mono" font.family: "DejaVu Sans Mono"
font.pointSize: Style.fontSizeLarge font.pointSize: Style.fontSizeLarge
color: Colors.colorOnSurface color: Colors.mOnSurface
echoMode: TextInput.Password echoMode: TextInput.Password
passwordCharacter: "*" passwordCharacter: "*"
passwordMaskDelay: 0 passwordMaskDelay: 0
@ -456,7 +456,7 @@ WlSessionLock {
Text { Text {
id: asterisksText id: asterisksText
text: "*".repeat(passwordInput.text.length) text: "*".repeat(passwordInput.text.length)
color: Colors.colorOnSurface color: Colors.mOnSurface
font.family: "DejaVu Sans Mono" font.family: "DejaVu Sans Mono"
font.pointSize: Style.fontSizeLarge font.pointSize: Style.fontSizeLarge
visible: passwordInput.activeFocus visible: passwordInput.activeFocus
@ -483,7 +483,7 @@ WlSessionLock {
Rectangle { Rectangle {
width: 8 * Scaling.scale(screen) width: 8 * Scaling.scale(screen)
height: 20 * Scaling.scale(screen) height: 20 * Scaling.scale(screen)
color: Colors.colorPrimary color: Colors.mPrimary
visible: passwordInput.activeFocus visible: passwordInput.activeFocus
anchors.left: asterisksText.right anchors.left: asterisksText.right
anchors.leftMargin: 2 * Scaling.scale(screen) anchors.leftMargin: 2 * Scaling.scale(screen)
@ -506,7 +506,7 @@ WlSessionLock {
// Status messages // Status messages
Text { Text {
text: lock.authenticating ? "Authenticating..." : (lock.errorMessage !== "" ? "Authentication failed." : "") text: lock.authenticating ? "Authenticating..." : (lock.errorMessage !== "" ? "Authentication failed." : "")
color: lock.authenticating ? Colors.colorPrimary : (lock.errorMessage !== "" ? Colors.colorError : "transparent") color: lock.authenticating ? Colors.mPrimary : (lock.errorMessage !== "" ? Colors.mError : "transparent")
font.family: "DejaVu Sans Mono" font.family: "DejaVu Sans Mono"
font.pointSize: Style.fontSizeLarge font.pointSize: Style.fontSizeLarge
Layout.fillWidth: true Layout.fillWidth: true
@ -530,9 +530,9 @@ WlSessionLock {
width: 120 * Scaling.scale(screen) width: 120 * Scaling.scale(screen)
height: 40 * Scaling.scale(screen) height: 40 * Scaling.scale(screen)
radius: 12 radius: 12
color: executeButtonArea.containsMouse ? Colors.colorPrimary : Colors.applyOpacity( color: executeButtonArea.containsMouse ? Colors.mPrimary : Colors.applyOpacity(
Colors.colorPrimary, "33") Colors.mPrimary, "33")
border.color: Colors.colorPrimary border.color: Colors.mPrimary
border.width: 1 border.width: 1
enabled: !lock.authenticating enabled: !lock.authenticating
Layout.alignment: Qt.AlignRight Layout.alignment: Qt.AlignRight
@ -541,7 +541,7 @@ WlSessionLock {
Text { Text {
anchors.centerIn: parent anchors.centerIn: parent
text: lock.authenticating ? "EXECUTING" : "EXECUTE" text: lock.authenticating ? "EXECUTING" : "EXECUTE"
color: executeButtonArea.containsMouse ? Colors.onAccent : Colors.colorPrimary color: executeButtonArea.containsMouse ? Colors.onAccent : Colors.mPrimary
font.family: "DejaVu Sans Mono" font.family: "DejaVu Sans Mono"
font.pointSize: Style.fontSizeMedium font.pointSize: Style.fontSizeMedium
font.weight: Font.Bold font.weight: Font.Bold
@ -595,7 +595,7 @@ WlSessionLock {
anchors.fill: parent anchors.fill: parent
radius: parent.radius radius: parent.radius
color: "transparent" color: "transparent"
border.color: Colors.applyOpacity(Colors.colorPrimary, "4D") border.color: Colors.applyOpacity(Colors.mPrimary, "4D")
border.width: 1 border.width: 1
z: -1 z: -1
@ -631,9 +631,9 @@ WlSessionLock {
width: 64 * Scaling.scale(screen) width: 64 * Scaling.scale(screen)
height: 64 * Scaling.scale(screen) height: 64 * Scaling.scale(screen)
radius: 32 radius: 32
color: Qt.rgba(Colors.colorError.r, Colors.colorError.g, Colors.colorError.b, color: Qt.rgba(Colors.mError.r, Colors.mError.g, Colors.mError.b,
shutdownArea.containsMouse ? 0.9 : 0.2) shutdownArea.containsMouse ? 0.9 : 0.2)
border.color: Colors.colorError border.color: Colors.mError
border.width: 2 * Scaling.scale(screen) border.width: 2 * Scaling.scale(screen)
// Glow effect // Glow effect
@ -643,7 +643,7 @@ WlSessionLock {
height: parent.height + 10 * Scaling.scale(screen) height: parent.height + 10 * Scaling.scale(screen)
radius: width * 0.5 radius: width * 0.5
color: "transparent" color: "transparent"
border.color: Qt.rgba(Colors.colorError.r, Colors.colorError.g, Colors.colorError.b, 0.3) border.color: Qt.rgba(Colors.mError.r, Colors.mError.g, Colors.mError.b, 0.3)
border.width: 2 * Scaling.scale(screen) border.width: 2 * Scaling.scale(screen)
opacity: shutdownArea.containsMouse ? 1 : 0 opacity: shutdownArea.containsMouse ? 1 : 0
z: -1 z: -1
@ -672,7 +672,7 @@ WlSessionLock {
text: "power_settings_new" text: "power_settings_new"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 28 * Scaling.scale(screen) font.pixelSize: 28 * Scaling.scale(screen)
color: shutdownArea.containsMouse ? Colors.onAccent : Colors.colorError color: shutdownArea.containsMouse ? Colors.onAccent : Colors.mError
} }
Behavior on color { Behavior on color {
@ -689,9 +689,9 @@ WlSessionLock {
width: 64 * Scaling.scale(screen) width: 64 * Scaling.scale(screen)
height: 64 * Scaling.scale(screen) height: 64 * Scaling.scale(screen)
radius: 32 radius: 32
color: Qt.rgba(Colors.colorPrimary.r, Colors.colorPrimary.g, Colors.colorPrimary.b, color: Qt.rgba(Colors.mPrimary.r, Colors.mPrimary.g, Colors.mPrimary.b,
rebootArea.containsMouse ? 0.9 : 0.2) rebootArea.containsMouse ? 0.9 : 0.2)
border.color: Colors.colorPrimary border.color: Colors.mPrimary
border.width: 2 * Scaling.scale(screen) border.width: 2 * Scaling.scale(screen)
// Glow effect // Glow effect
@ -701,7 +701,7 @@ WlSessionLock {
height: parent.height + 10 * Scaling.scale(screen) height: parent.height + 10 * Scaling.scale(screen)
radius: width * 0.5 radius: width * 0.5
color: "transparent" color: "transparent"
border.color: Qt.rgba(Colors.colorPrimary.r, Colors.colorPrimary.g, Colors.colorPrimary.b, 0.3) border.color: Qt.rgba(Colors.mPrimary.r, Colors.mPrimary.g, Colors.mPrimary.b, 0.3)
border.width: 2 * Scaling.scale(screen) border.width: 2 * Scaling.scale(screen)
opacity: rebootArea.containsMouse ? 1 : 0 opacity: rebootArea.containsMouse ? 1 : 0
z: -1 z: -1
@ -729,7 +729,7 @@ WlSessionLock {
text: "refresh" text: "refresh"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 28 * Scaling.scale(screen) font.pixelSize: 28 * Scaling.scale(screen)
color: rebootArea.containsMouse ? Colors.onAccent : Colors.colorPrimary color: rebootArea.containsMouse ? Colors.onAccent : Colors.mPrimary
} }
Behavior on color { Behavior on color {
@ -746,9 +746,9 @@ WlSessionLock {
width: 64 * Scaling.scale(screen) width: 64 * Scaling.scale(screen)
height: 64 * Scaling.scale(screen) height: 64 * Scaling.scale(screen)
radius: 32 radius: 32
color: Qt.rgba(Colors.colorSecondary.r, Colors.colorSecondary.g, Colors.colorSecondary.b, color: Qt.rgba(Colors.mSecondary.r, Colors.mSecondary.g, Colors.mSecondary.b,
logoutArea.containsMouse ? 0.9 : 0.2) logoutArea.containsMouse ? 0.9 : 0.2)
border.color: Colors.colorSecondary border.color: Colors.mSecondary
border.width: 2 * Scaling.scale(screen) border.width: 2 * Scaling.scale(screen)
// Glow effect // Glow effect
@ -758,7 +758,7 @@ WlSessionLock {
height: parent.height + 10 * Scaling.scale(screen) height: parent.height + 10 * Scaling.scale(screen)
radius: width * 0.5 radius: width * 0.5
color: "transparent" color: "transparent"
border.color: Qt.rgba(Colors.colorSecondary.r, Colors.colorSecondary.g, Colors.colorSecondary.b, 0.3) border.color: Qt.rgba(Colors.mSecondary.r, Colors.mSecondary.g, Colors.mSecondary.b, 0.3)
border.width: 2 * Scaling.scale(screen) border.width: 2 * Scaling.scale(screen)
opacity: logoutArea.containsMouse ? 1 : 0 opacity: logoutArea.containsMouse ? 1 : 0
z: -1 z: -1
@ -788,7 +788,7 @@ WlSessionLock {
text: "exit_to_app" text: "exit_to_app"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 28 * Scaling.scale(screen) font.pixelSize: 28 * Scaling.scale(screen)
color: logoutArea.containsMouse ? Colors.onAccent : Colors.colorSecondary color: logoutArea.containsMouse ? Colors.onAccent : Colors.mSecondary
} }
Behavior on color { Behavior on color {

14
Modules/Notification/Notification.qml
View file

@ -63,9 +63,9 @@ PanelWindow {
height: Math.max(80 * scaling, contentColumn.implicitHeight + (Style.marginMedium * 2 * scaling)) height: Math.max(80 * scaling, contentColumn.implicitHeight + (Style.marginMedium * 2 * scaling))
clip: true clip: true
radius: Style.radiusMedium * scaling radius: Style.radiusMedium * scaling
border.color: Colors.colorPrimary border.color: Colors.mPrimary
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderThin * scaling)
color: Colors.colorSurface color: Colors.mSurface
// Animation properties // Animation properties
property real scaleValue: 0.8 property real scaleValue: 0.8
@ -133,14 +133,14 @@ PanelWindow {
spacing: Style.marginSmall * scaling spacing: Style.marginSmall * scaling
NText { NText {
text: (model.appName || model.desktopEntry) || "Unknown App" text: (model.appName || model.desktopEntry) || "Unknown App"
color: Colors.colorSecondary color: Colors.mSecondary
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeSmall * scaling
} }
Rectangle { Rectangle {
width: 6 * scaling width: 6 * scaling
height: 6 * scaling height: 6 * scaling
radius: 3 * scaling radius: 3 * scaling
color: (model.urgency === NotificationUrgency.Critical) ? Colors.colorError : (model.urgency === NotificationUrgency.Low) ? Colors.colorOnSurface : Colors.colorPrimary color: (model.urgency === NotificationUrgency.Critical) ? Colors.mError : (model.urgency === NotificationUrgency.Low) ? Colors.mOnSurface : Colors.mPrimary
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
} }
Item { Item {
@ -148,7 +148,7 @@ PanelWindow {
} }
NText { NText {
text: notificationService.formatTimestamp(model.timestamp) text: notificationService.formatTimestamp(model.timestamp)
color: Colors.colorOnSurface color: Colors.mOnSurface
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeSmall * scaling
} }
} }
@ -157,7 +157,7 @@ PanelWindow {
text: model.summary || "No summary" text: model.summary || "No summary"
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeLarge * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.colorOnSurface color: Colors.mOnSurface
wrapMode: Text.Wrap wrapMode: Text.Wrap
width: 300 * scaling width: 300 * scaling
maximumLineCount: 3 maximumLineCount: 3
@ -167,7 +167,7 @@ PanelWindow {
NText { NText {
text: model.body || "" text: model.body || ""
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeSmall * scaling
color: Colors.colorOnSurface color: Colors.mOnSurface
wrapMode: Text.Wrap wrapMode: Text.Wrap
width: 300 * scaling width: 300 * scaling
maximumLineCount: 5 maximumLineCount: 5

16
Modules/Notification/NotificationHistoryPanel.qml
View file

@ -65,9 +65,9 @@ NLoader {
Rectangle { Rectangle {
id: notificationRect id: notificationRect
color: Colors.colorSurface color: Colors.mSurface
radius: Style.radiusMedium * scaling radius: Style.radiusMedium * scaling
border.color: Colors.colorSurfaceVariant border.color: Colors.mSurfaceVariant
border.width: Math.max(1, Style.borderMedium * scaling) border.width: Math.max(1, Style.borderMedium * scaling)
width: 400 * scaling width: 400 * scaling
height: 500 * scaling height: 500 * scaling
@ -117,14 +117,14 @@ NLoader {
text: "notifications" text: "notifications"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXL * scaling
color: Colors.colorPrimary color: Colors.mPrimary
} }
NText { NText {
text: "Notification History" text: "Notification History"
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeLarge * scaling
font.bold: true font.bold: true
color: Colors.colorOnSurface color: Colors.mOnSurface
Layout.fillWidth: true Layout.fillWidth: true
} }
@ -159,7 +159,7 @@ NLoader {
width: notificationList ? (notificationList.width - 20) : 380 * scaling width: notificationList ? (notificationList.width - 20) : 380 * scaling
height: Math.max(80, notificationContent.height + 30) height: Math.max(80, notificationContent.height + 30)
radius: Style.radiusMedium * scaling radius: Style.radiusMedium * scaling
color: notificationMouseArea.containsMouse ? Colors.colorPrimary : "transparent" color: notificationMouseArea.containsMouse ? Colors.mPrimary : "transparent"
RowLayout { RowLayout {
anchors { anchors {
@ -179,7 +179,7 @@ NLoader {
text: (summary || "No summary").substring(0, 100) text: (summary || "No summary").substring(0, 100)
font.pointSize: Style.fontSizeMedium * scaling font.pointSize: Style.fontSizeMedium * scaling
font.weight: Font.Medium font.weight: Font.Medium
color: notificationMouseArea.containsMouse ? Colors.colorSurface : Colors.colorOnSurface color: notificationMouseArea.containsMouse ? Colors.mSurface : Colors.mOnSurface
wrapMode: Text.Wrap wrapMode: Text.Wrap
width: parent.width - 30 width: parent.width - 30
maximumLineCount: 2 maximumLineCount: 2
@ -189,7 +189,7 @@ NLoader {
NText { NText {
text: (body || "").substring(0, 150) text: (body || "").substring(0, 150)
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeSmall * scaling
color: notificationMouseArea.containsMouse ? Colors.colorSurface : Colors.colorOnSurface color: notificationMouseArea.containsMouse ? Colors.mSurface : Colors.mOnSurface
wrapMode: Text.Wrap wrapMode: Text.Wrap
width: parent.width - 30 width: parent.width - 30
maximumLineCount: 3 maximumLineCount: 3
@ -199,7 +199,7 @@ NLoader {
NText { NText {
text: NotificationService.formatTimestamp(timestamp) text: NotificationService.formatTimestamp(timestamp)
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeSmall * scaling
color: notificationMouseArea.containsMouse ? Colors.colorSurface : Colors.colorOnSurface color: notificationMouseArea.containsMouse ? Colors.mSurface : Colors.mOnSurface
} }
} }
} }

18
Modules/Settings/SettingsPanel.qml
View file

@ -158,9 +158,9 @@ NLoader {
Rectangle { Rectangle {
id: bgRect id: bgRect
color: Colors.colorSurface color: Colors.mSurface
radius: Style.radiusLarge * scaling radius: Style.radiusLarge * scaling
border.color: Colors.colorOutlineVariant border.color: Colors.mOutlineVariant
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderThin * scaling)
layer.enabled: true layer.enabled: true
width: (screen.width * 0.5) * scaling width: (screen.width * 0.5) * scaling
@ -209,8 +209,8 @@ NLoader {
id: sidebar id: sidebar
Layout.preferredWidth: 260 * scaling Layout.preferredWidth: 260 * scaling
Layout.fillHeight: true Layout.fillHeight: true
color: Colors.colorSurfaceVariant color: Colors.mSurfaceVariant
border.color: Colors.colorOutlineVariant border.color: Colors.mOutlineVariant
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderThin * scaling)
radius: Style.radiusMedium * scaling radius: Style.radiusMedium * scaling
@ -229,7 +229,7 @@ NLoader {
width: parent.width width: parent.width
height: 32 * scaling // Back to original height height: 32 * scaling // Back to original height
radius: Style.radiusSmall * scaling radius: Style.radiusSmall * scaling
color: selected ? Colors.colorPrimary : (tabItem.hovering ? Colors.colorTertiary : "transparent") color: selected ? Colors.mPrimary : (tabItem.hovering ? Colors.mTertiary : "transparent")
border.color: "transparent" border.color: "transparent"
border.width: 0 border.width: 0
@ -238,7 +238,7 @@ NLoader {
// Subtle hover effect: only icon/text color tint on hover // Subtle hover effect: only icon/text color tint on hover
property bool hovering: false property bool hovering: false
property color tabTextColor: selected ? Colors.colorOnPrimary : (tabItem.hovering ? Colors.colorOnTertiary : Colors.colorOnSurface) property color tabTextColor: selected ? Colors.mOnPrimary : (tabItem.hovering ? Colors.mOnTertiary : Colors.mOnSurface)
RowLayout { RowLayout {
anchors.fill: parent anchors.fill: parent
@ -284,8 +284,8 @@ NLoader {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
radius: Style.radiusMedium * scaling radius: Style.radiusMedium * scaling
color: Colors.colorSurfaceVariant color: Colors.mSurfaceVariant
border.color: Colors.colorOutlineVariant border.color: Colors.mOutlineVariant
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderThin * scaling)
clip: true clip: true
@ -305,7 +305,7 @@ NLoader {
text: panel.tabsModel[currentTabIndex].label text: panel.tabsModel[currentTabIndex].label
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeLarge * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.colorPrimary color: Colors.mPrimary
Layout.fillWidth: true Layout.fillWidth: true
} }
NIconButton { NIconButton {

30
Modules/Settings/Tabs/About.qml
View file

@ -59,7 +59,7 @@ ColumnLayout {
text: "Noctalia: quiet by design" text: "Noctalia: quiet by design"
font.pointSize: Style.fontSizeXXL * scaling font.pointSize: Style.fontSizeXXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.colorOnSurface color: Colors.mOnSurface
Layout.alignment: Qt.AlignCenter Layout.alignment: Qt.AlignCenter
Layout.bottomMargin: Style.marginSmall * scaling Layout.bottomMargin: Style.marginSmall * scaling
} }
@ -67,7 +67,7 @@ ColumnLayout {
NText { NText {
text: "It may just be another quickshell setup but it won't get in your way." text: "It may just be another quickshell setup but it won't get in your way."
font.pointSize: Style.fontSizeMedium * scaling font.pointSize: Style.fontSizeMedium * scaling
color: Colors.colorOnSurface color: Colors.mOnSurface
Layout.alignment: Qt.AlignCenter Layout.alignment: Qt.AlignCenter
Layout.bottomMargin: Style.marginLarge * scaling Layout.bottomMargin: Style.marginLarge * scaling
} }
@ -80,25 +80,25 @@ ColumnLayout {
NText { NText {
text: "Latest Version:" text: "Latest Version:"
color: Colors.colorOnSurface color: Colors.mOnSurface
Layout.alignment: Qt.AlignRight Layout.alignment: Qt.AlignRight
} }
NText { NText {
text: root.latestVersion text: root.latestVersion
color: Colors.colorOnSurface color: Colors.mOnSurface
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
} }
NText { NText {
text: "Installed Version:" text: "Installed Version:"
color: Colors.colorOnSurface color: Colors.mOnSurface
Layout.alignment: Qt.AlignRight Layout.alignment: Qt.AlignRight
} }
NText { NText {
text: root.currentVersion text: root.currentVersion
color: Colors.colorOnSurface color: Colors.mOnSurface
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
} }
} }
@ -109,8 +109,8 @@ ColumnLayout {
Layout.preferredWidth: updateText.implicitWidth + 46 * scaling Layout.preferredWidth: updateText.implicitWidth + 46 * scaling
Layout.preferredHeight: 32 * scaling Layout.preferredHeight: 32 * scaling
radius: Style.radiusLarge * scaling radius: Style.radiusLarge * scaling
color: updateArea.containsMouse ? Colors.colorPrimary : "transparent" color: updateArea.containsMouse ? Colors.mPrimary : "transparent"
border.color: Colors.colorPrimary border.color: Colors.mPrimary
border.width: 1 border.width: 1
visible: { visible: {
if (root.currentVersion === "Unknown" || root.latestVersion === "Unknown") if (root.currentVersion === "Unknown" || root.latestVersion === "Unknown")
@ -138,14 +138,14 @@ ColumnLayout {
text: "system_update" text: "system_update"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pointSize: 18 * scaling font.pointSize: 18 * scaling
color: updateArea.containsMouse ? Colors.colorSurface : Colors.colorPrimary color: updateArea.containsMouse ? Colors.mSurface : Colors.mPrimary
} }
NText { NText {
id: updateText id: updateText
text: "Download latest release" text: "Download latest release"
font.pointSize: 14 * scaling font.pointSize: 14 * scaling
color: updateArea.containsMouse ? Colors.colorSurface : Colors.colorPrimary color: updateArea.containsMouse ? Colors.mSurface : Colors.mPrimary
} }
} }
@ -171,7 +171,7 @@ ColumnLayout {
text: `Shout-out to our ${root.contributors.length} awesome contributors!` text: `Shout-out to our ${root.contributors.length} awesome contributors!`
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeLarge * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.colorOnSurface color: Colors.mOnSurface
Layout.alignment: Qt.AlignCenter Layout.alignment: Qt.AlignCenter
Layout.topMargin: Style.marginLarge * 2 Layout.topMargin: Style.marginLarge * 2
} }
@ -199,7 +199,7 @@ ColumnLayout {
width: contributorsGrid.cellWidth - Style.marginLarge * scaling width: contributorsGrid.cellWidth - Style.marginLarge * scaling
height: contributorsGrid.cellHeight - Style.marginTiny * scaling height: contributorsGrid.cellHeight - Style.marginTiny * scaling
radius: Style.radiusLarge * scaling radius: Style.radiusLarge * scaling
color: contributorArea.containsMouse ? Colors.colorTertiary : "transparent" color: contributorArea.containsMouse ? Colors.mTertiary : "transparent"
RowLayout { RowLayout {
anchors.fill: parent anchors.fill: parent
@ -216,7 +216,7 @@ ColumnLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: Style.marginTiny * scaling anchors.margins: Style.marginTiny * scaling
fallbackIcon: "person" fallbackIcon: "person"
borderColor: Colors.colorPrimary borderColor: Colors.mPrimary
borderWidth: Math.max(1, Style.borderMedium * scaling) borderWidth: Math.max(1, Style.borderMedium * scaling)
imageRadius: width * 0.5 imageRadius: width * 0.5
} }
@ -230,7 +230,7 @@ ColumnLayout {
NText { NText {
text: modelData.login || "Unknown" text: modelData.login || "Unknown"
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: contributorArea.containsMouse ? Colors.colorSurface : Colors.colorOnSurface color: contributorArea.containsMouse ? Colors.mSurface : Colors.mOnSurface
elide: Text.ElideRight elide: Text.ElideRight
Layout.fillWidth: true Layout.fillWidth: true
} }
@ -239,7 +239,7 @@ ColumnLayout {
text: (modelData.contributions || 0) + " " + ((modelData.contributions text: (modelData.contributions || 0) + " " + ((modelData.contributions
|| 0) === 1 ? "commit" : "commits") || 0) === 1 ? "commit" : "commits")
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeSmall * scaling
color: contributorArea.containsMouse ? Colors.colorSurface : Colors.colorOnSurface color: contributorArea.containsMouse ? Colors.mSurface : Colors.mOnSurface
} }
} }
} }

20
Modules/Settings/Tabs/Audio.qml
View file

@ -49,7 +49,7 @@ ColumnLayout {
text: "Audio" text: "Audio"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.colorOnSurface color: Colors.mOnSurface
Layout.bottomMargin: Style.marginSmall * scaling Layout.bottomMargin: Style.marginSmall * scaling
} }
@ -70,13 +70,13 @@ ColumnLayout {
NText { NText {
text: "Master Volume" text: "Master Volume"
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.colorOnSurface color: Colors.mOnSurface
} }
NText { NText {
text: "System-wide volume level" text: "System-wide volume level"
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeSmall * scaling
color: Colors.colorOnSurface color: Colors.mOnSurface
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
Layout.fillWidth: true Layout.fillWidth: true
} }
@ -110,7 +110,7 @@ ColumnLayout {
NText { NText {
text: Math.floor(Audio.volume * 100) + "%" text: Math.floor(Audio.volume * 100) + "%"
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
color: Colors.colorOnSurface color: Colors.mOnSurface
} }
} }
} }
@ -149,7 +149,7 @@ ColumnLayout {
text: "Audio Devices" text: "Audio Devices"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.colorOnSurface color: Colors.mOnSurface
Layout.bottomMargin: Style.marginSmall * scaling Layout.bottomMargin: Style.marginSmall * scaling
} }
@ -168,13 +168,13 @@ ColumnLayout {
text: "Output Device" text: "Output Device"
font.pointSize: Style.fontSizeMedium * scaling font.pointSize: Style.fontSizeMedium * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.colorOnSurface color: Colors.mOnSurface
} }
NText { NText {
text: "Select the desired audio output device" text: "Select the desired audio output device"
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeSmall * scaling
color: Colors.colorOnSurface color: Colors.mOnSurface
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
Layout.fillWidth: true Layout.fillWidth: true
} }
@ -207,13 +207,13 @@ ColumnLayout {
text: "Input Device" text: "Input Device"
font.pointSize: Style.fontSizeMedium * scaling font.pointSize: Style.fontSizeMedium * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.colorOnSurface color: Colors.mOnSurface
} }
NText { NText {
text: "Select desired audio input device" text: "Select desired audio input device"
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeSmall * scaling
color: Colors.colorOnSurface color: Colors.mOnSurface
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
Layout.fillWidth: true Layout.fillWidth: true
} }
@ -247,7 +247,7 @@ ColumnLayout {
text: "Audio Visualizer" text: "Audio Visualizer"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.colorOnSurface color: Colors.mOnSurface
Layout.bottomMargin: Style.marginSmall * scaling Layout.bottomMargin: Style.marginSmall * scaling
} }

2
Modules/Settings/Tabs/Bar.qml
View file

@ -36,7 +36,7 @@ ColumnLayout {
text: "Components" text: "Components"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.colorOnSurface color: Colors.mOnSurface
} }
NToggle { NToggle {

10
Modules/Settings/Tabs/Display.qml
View file

@ -44,7 +44,7 @@ Item {
text: "Per‑monitor configuration" text: "Per‑monitor configuration"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.colorOnSurface color: Colors.mOnSurface
} }
Repeater { Repeater {
@ -52,8 +52,8 @@ Item {
delegate: Rectangle { delegate: Rectangle {
Layout.fillWidth: true Layout.fillWidth: true
radius: Style.radiusMedium * scaling radius: Style.radiusMedium * scaling
color: Colors.colorSurface color: Colors.mSurface
border.color: Colors.colorOutline border.color: Colors.mOutline
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderThin * scaling)
implicitHeight: contentCol.implicitHeight + Style.marginXL * 2 * scaling implicitHeight: contentCol.implicitHeight + Style.marginXL * 2 * scaling
@ -67,13 +67,13 @@ Item {
text: (modelData.name || "Unknown") text: (modelData.name || "Unknown")
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeLarge * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.colorSecondary color: Colors.mSecondary
} }
NText { NText {
text: `Resolution: ${modelData.width}x${modelData.height} - Position: (${modelData.x}, ${modelData.y})` text: `Resolution: ${modelData.width}x${modelData.height} - Position: (${modelData.x}, ${modelData.y})`
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeSmall * scaling
color: Colors.colorOnSurface color: Colors.mOnSurface
} }
ColumnLayout { ColumnLayout {

6
Modules/Settings/Tabs/General.qml
View file

@ -36,7 +36,7 @@ ColumnLayout {
text: "General Settings" text: "General Settings"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.colorOnSurface color: Colors.mOnSurface
} }
// Profile section // Profile section
@ -55,7 +55,7 @@ ColumnLayout {
height: 64 * scaling height: 64 * scaling
imagePath: Settings.data.general.avatarImage imagePath: Settings.data.general.avatarImage
fallbackIcon: "person" fallbackIcon: "person"
borderColor: Colors.colorPrimary borderColor: Colors.mPrimary
borderWidth: Math.max(1, Style.borderMedium) borderWidth: Math.max(1, Style.borderMedium)
} }
@ -87,7 +87,7 @@ ColumnLayout {
text: "User Interface" text: "User Interface"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.colorOnSurface color: Colors.mOnSurface
Layout.bottomMargin: Style.marginSmall * scaling Layout.bottomMargin: Style.marginSmall * scaling
} }

2
Modules/Settings/Tabs/Misc.qml
View file

@ -36,7 +36,7 @@ ColumnLayout {
text: "Miscellaneous Settings" text: "Miscellaneous Settings"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.colorOnSurface color: Colors.mOnSurface
Layout.bottomMargin: Style.marginSmall * scaling Layout.bottomMargin: Style.marginSmall * scaling
} }
} }

2
Modules/Settings/Tabs/Network.qml
View file

@ -38,7 +38,7 @@ ColumnLayout {
text: "Interfaces" text: "Interfaces"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.colorOnSurface color: Colors.mOnSurface
} }
NToggle { NToggle {

6
Modules/Settings/Tabs/ScreenRecorder.qml
View file

@ -36,7 +36,7 @@ ColumnLayout {
text: "Recording" text: "Recording"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.colorOnSurface color: Colors.mOnSurface
Layout.bottomMargin: Style.marginSmall * scaling Layout.bottomMargin: Style.marginSmall * scaling
} }
@ -87,7 +87,7 @@ ColumnLayout {
text: "Video Settings" text: "Video Settings"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.colorOnSurface color: Colors.mOnSurface
Layout.bottomMargin: Style.marginSmall * scaling Layout.bottomMargin: Style.marginSmall * scaling
} }
@ -155,7 +155,7 @@ ColumnLayout {
text: "Audio Settings" text: "Audio Settings"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.colorOnSurface color: Colors.mOnSurface
Layout.bottomMargin: Style.marginSmall * scaling Layout.bottomMargin: Style.marginSmall * scaling
} }

6
Modules/Settings/Tabs/TimeWeather.qml
View file

@ -36,7 +36,7 @@ ColumnLayout {
text: "Location" text: "Location"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.colorOnSurface color: Colors.mOnSurface
Layout.bottomMargin: Style.marginSmall * scaling Layout.bottomMargin: Style.marginSmall * scaling
} }
@ -73,7 +73,7 @@ ColumnLayout {
text: "Time Format" text: "Time Format"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.colorOnSurface color: Colors.mOnSurface
Layout.bottomMargin: 8 Layout.bottomMargin: 8
} }
@ -111,7 +111,7 @@ ColumnLayout {
text: "Weather" text: "Weather"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.colorOnSurface color: Colors.mOnSurface
Layout.bottomMargin: Style.marginSmall * scaling Layout.bottomMargin: Style.marginSmall * scaling
} }

24
Modules/Settings/Tabs/Wallpaper.qml
View file

@ -36,7 +36,7 @@ ColumnLayout {
text: "Directory" text: "Directory"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.colorOnSurface color: Colors.mOnSurface
Layout.bottomMargin: Style.marginSmall * scaling Layout.bottomMargin: Style.marginSmall * scaling
} }
@ -78,7 +78,7 @@ ColumnLayout {
text: "Automation" text: "Automation"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.colorOnSurface color: Colors.mOnSurface
Layout.bottomMargin: Style.marginSmall * scaling Layout.bottomMargin: Style.marginSmall * scaling
} }
@ -111,13 +111,13 @@ ColumnLayout {
NText { NText {
text: "Wallpaper Interval" text: "Wallpaper Interval"
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.colorOnSurface color: Colors.mOnSurface
} }
NText { NText {
text: "How often to change wallpapers automatically (in seconds)" text: "How often to change wallpapers automatically (in seconds)"
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeSmall * scaling
color: Colors.colorOnSurface color: Colors.mOnSurface
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
Layout.fillWidth: true Layout.fillWidth: true
} }
@ -137,7 +137,7 @@ ColumnLayout {
stepSize: 10 stepSize: 10
value: Settings.data.wallpaper.randomInterval value: Settings.data.wallpaper.randomInterval
onPressedChanged: Settings.data.wallpaper.randomInterval = Math.round(value) onPressedChanged: Settings.data.wallpaper.randomInterval = Math.round(value)
cutoutColor: Colors.colorSurface cutoutColor: Colors.mSurface
} }
} }
} }
@ -158,7 +158,7 @@ ColumnLayout {
text: "SWWW" text: "SWWW"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.colorOnSurface color: Colors.mOnSurface
Layout.bottomMargin: 8 Layout.bottomMargin: 8
} }
@ -212,13 +212,13 @@ ColumnLayout {
NText { NText {
text: "Transition FPS" text: "Transition FPS"
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.colorOnSurface color: Colors.mOnSurface
} }
NText { NText {
text: "Frames per second for transition animations" text: "Frames per second for transition animations"
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeSmall * scaling
color: Colors.colorOnSurface color: Colors.mOnSurface
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
Layout.fillWidth: true Layout.fillWidth: true
} }
@ -238,7 +238,7 @@ ColumnLayout {
stepSize: 5 stepSize: 5
value: Settings.data.wallpaper.swww.transitionFps value: Settings.data.wallpaper.swww.transitionFps
onPressedChanged: Settings.data.wallpaper.swww.transitionFps = Math.round(value) onPressedChanged: Settings.data.wallpaper.swww.transitionFps = Math.round(value)
cutoutColor: Colors.colorSurface cutoutColor: Colors.mSurface
} }
} }
@ -251,13 +251,13 @@ ColumnLayout {
NText { NText {
text: "Transition Duration" text: "Transition Duration"
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.colorOnSurface color: Colors.mOnSurface
} }
NText { NText {
text: "Duration of transition animations in seconds" text: "Duration of transition animations in seconds"
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeSmall * scaling
color: Colors.colorOnSurface color: Colors.mOnSurface
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
Layout.fillWidth: true Layout.fillWidth: true
} }
@ -277,7 +277,7 @@ ColumnLayout {
stepSize: 0.05 stepSize: 0.05
value: Settings.data.wallpaper.swww.transitionDuration value: Settings.data.wallpaper.swww.transitionDuration
onPressedChanged: Settings.data.wallpaper.swww.transitionDuration = value onPressedChanged: Settings.data.wallpaper.swww.transitionDuration = value
cutoutColor: Colors.colorSurface cutoutColor: Colors.mSurface
} }
} }
} }

36
Modules/Settings/Tabs/WallpaperSelector.qml
View file

@ -32,15 +32,15 @@ Item {
text: "Current Wallpaper" text: "Current Wallpaper"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.colorOnSurface color: Colors.mOnSurface
} }
Rectangle { Rectangle {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 120 * scaling Layout.preferredHeight: 120 * scaling
radius: Style.radiusMedium * scaling radius: Style.radiusMedium * scaling
color: Colors.colorSurface color: Colors.mSurface
border.color: Colors.colorOutline border.color: Colors.mOutline
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderThin * scaling)
clip: true clip: true
@ -50,7 +50,7 @@ Item {
anchors.margins: Style.marginSmall * scaling anchors.margins: Style.marginSmall * scaling
imagePath: Wallpapers.currentWallpaper imagePath: Wallpapers.currentWallpaper
fallbackIcon: "image" fallbackIcon: "image"
borderColor: Colors.colorOutline borderColor: Colors.mOutline
borderWidth: Math.max(1, Style.borderThin * scaling) borderWidth: Math.max(1, Style.borderThin * scaling)
imageRadius: Style.radiusMedium * scaling imageRadius: Style.radiusMedium * scaling
} }
@ -73,12 +73,12 @@ Item {
text: "Wallpaper Selector" text: "Wallpaper Selector"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.colorOnSurface color: Colors.mOnSurface
} }
NText { NText {
text: "Click on a wallpaper to set it as your current wallpaper" text: "Click on a wallpaper to set it as your current wallpaper"
color: Colors.colorOnSurface color: Colors.mOnSurface
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
Layout.fillWidth: true Layout.fillWidth: true
} }
@ -86,7 +86,7 @@ Item {
NText { NText {
text: Settings.data.wallpaper.swww.enabled ? "Wallpapers will change with " + Settings.data.wallpaper.swww.transitionType text: Settings.data.wallpaper.swww.enabled ? "Wallpapers will change with " + Settings.data.wallpaper.swww.transitionType
+ " transition" : "Wallpapers will change instantly" + " transition" : "Wallpapers will change instantly"
color: Colors.colorOnSurface color: Colors.mOnSurface
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeSmall * scaling
visible: Settings.data.wallpaper.swww.enabled visible: Settings.data.wallpaper.swww.enabled
} }
@ -147,8 +147,8 @@ Item {
width: wallpaperGridView.itemSize width: wallpaperGridView.itemSize
height: Math.floor(wallpaperGridView.itemSize * 0.67) height: Math.floor(wallpaperGridView.itemSize * 0.67)
radius: Style.radiusMedium * scaling radius: Style.radiusMedium * scaling
color: isSelected ? Colors.colorPrimary : Colors.colorSurface color: isSelected ? Colors.mPrimary : Colors.mSurface
border.color: isSelected ? Colors.colorSecondary : Colors.colorOutline border.color: isSelected ? Colors.mSecondary : Colors.mOutline
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderThin * scaling)
clip: true clip: true
@ -170,8 +170,8 @@ Item {
width: 20 * scaling width: 20 * scaling
height: 20 * scaling height: 20 * scaling
radius: width / 2 radius: width / 2
color: Colors.colorPrimary color: Colors.mPrimary
border.color: Colors.colorOutline border.color: Colors.mOutline
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderThin * scaling)
visible: isSelected visible: isSelected
@ -180,14 +180,14 @@ Item {
text: "check" text: "check"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeSmall * scaling
color: Colors.colorOnPrimary color: Colors.mOnPrimary
} }
} }
// Hover effect // Hover effect
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
color: Colors.colorOnSurface color: Colors.mOnSurface
opacity: mouseArea.containsMouse ? 0.1 : 0 opacity: mouseArea.containsMouse ? 0.1 : 0
radius: parent.radius radius: parent.radius
@ -213,9 +213,9 @@ Item {
// Empty state // Empty state
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
color: Colors.colorSurface color: Colors.mSurface
radius: Style.radiusMedium * scaling radius: Style.radiusMedium * scaling
border.color: Colors.colorOutline border.color: Colors.mOutline
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderThin * scaling)
visible: folderModel.count === 0 && !Wallpapers.scanning visible: folderModel.count === 0 && !Wallpapers.scanning
@ -227,20 +227,20 @@ Item {
text: "folder_open" text: "folder_open"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeLarge * scaling
color: Colors.colorOnSurface color: Colors.mOnSurface
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
} }
NText { NText {
text: "No wallpapers found" text: "No wallpapers found"
color: Colors.colorOnSurface color: Colors.mOnSurface
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
} }
NText { NText {
text: "Make sure your wallpaper directory is configured and contains image files" text: "Make sure your wallpaper directory is configured and contains image files"
color: Colors.colorOnSurface color: Colors.mOnSurface
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
Layout.preferredWidth: 300 * scaling Layout.preferredWidth: 300 * scaling

42
Modules/SidePanel/Cards/MediaCard.qml
View file

@ -40,12 +40,12 @@ NBox {
text: "album" text: "album"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeXXL * 2.5 * scaling font.pointSize: Style.fontSizeXXL * 2.5 * scaling
color: Colors.colorOnSurfaceVariant color: Colors.mOnSurfaceVariant
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
} }
NText { NText {
text: "No media player detected" text: "No media player detected"
color: Colors.colorOnSurfaceVariant color: Colors.mOnSurfaceVariant
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
} }
@ -76,7 +76,7 @@ NBox {
// implicitWidth: 120 * scaling // implicitWidth: 120 * scaling
// implicitHeight: 30 * scaling // implicitHeight: 30 * scaling
color: "transparent" color: "transparent"
border.color: playerSelector.activeFocus ? Colors.colorTertiary : Colors.colorOutline border.color: playerSelector.activeFocus ? Colors.mTertiary : Colors.mOutline
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderThin * scaling)
radius: Style.radiusMedium * scaling radius: Style.radiusMedium * scaling
} }
@ -87,7 +87,7 @@ NBox {
rightPadding: playerSelector.indicator.width + playerSelector.spacing rightPadding: playerSelector.indicator.width + playerSelector.spacing
text: playerSelector.displayText text: playerSelector.displayText
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeSmall * scaling
color: Colors.colorOnSurface color: Colors.mOnSurface
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight elide: Text.ElideRight
} }
@ -98,7 +98,7 @@ NBox {
text: "arrow_drop_down" text: "arrow_drop_down"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXL * scaling
color: Colors.colorOnSurface color: Colors.mOnSurface
horizontalAlignment: Text.AlignRight horizontalAlignment: Text.AlignRight
} }
@ -119,8 +119,8 @@ NBox {
} }
background: Rectangle { background: Rectangle {
color: Colors.colorSurface color: Colors.mSurface
border.color: Colors.colorOutline border.color: Colors.mOutline
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderThin * scaling)
radius: Style.radiusTiny * scaling radius: Style.radiusTiny * scaling
} }
@ -131,7 +131,7 @@ NBox {
contentItem: NText { contentItem: NText {
text: modelData.identity text: modelData.identity
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeSmall * scaling
color: highlighted ? Colors.colorSurface : Colors.colorOnSurface color: highlighted ? Colors.mSurface : Colors.mOnSurface
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight elide: Text.ElideRight
} }
@ -139,7 +139,7 @@ NBox {
background: Rectangle { background: Rectangle {
width: popup.width - Style.marginSmall * scaling * 2 width: popup.width - Style.marginSmall * scaling * 2
color: highlighted ? Colors.colorTertiary : "transparent" color: highlighted ? Colors.mTertiary : "transparent"
radius: Style.radiusTiny * scaling radius: Style.radiusTiny * scaling
} }
} }
@ -160,8 +160,8 @@ NBox {
width: 90 * scaling width: 90 * scaling
height: 90 * scaling height: 90 * scaling
radius: width * 0.5 radius: width * 0.5
color: trackArt.visible ? Colors.colorPrimary : "transparent" color: trackArt.visible ? Colors.mPrimary : "transparent"
border.color: trackArt.visible ? Colors.colorOutline : "transparent" border.color: trackArt.visible ? Colors.mOutline : "transparent"
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderThin * scaling)
clip: true clip: true
@ -173,7 +173,7 @@ NBox {
anchors.margins: Style.marginTiny * scaling anchors.margins: Style.marginTiny * scaling
imagePath: MediaPlayer.trackArtUrl imagePath: MediaPlayer.trackArtUrl
fallbackIcon: "image" fallbackIcon: "image"
borderColor: Colors.colorOutline borderColor: Colors.mOutline
borderWidth: Math.max(1, Style.borderThin * scaling) borderWidth: Math.max(1, Style.borderThin * scaling)
imageRadius: width * 0.5 imageRadius: width * 0.5
} }
@ -208,7 +208,7 @@ NBox {
NText { NText {
visible: MediaPlayer.trackArtist !== "" visible: MediaPlayer.trackArtist !== ""
text: MediaPlayer.trackArtist text: MediaPlayer.trackArtist
color: Colors.colorOnSurface color: Colors.mOnSurface
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeSmall * scaling
elide: Text.ElideRight elide: Text.ElideRight
Layout.fillWidth: true Layout.fillWidth: true
@ -217,7 +217,7 @@ NBox {
NText { NText {
visible: MediaPlayer.trackAlbum !== "" visible: MediaPlayer.trackAlbum !== ""
text: MediaPlayer.trackAlbum text: MediaPlayer.trackAlbum
color: Colors.colorOnSurface color: Colors.mOnSurface
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeSmall * scaling
elide: Text.ElideRight elide: Text.ElideRight
Layout.fillWidth: true Layout.fillWidth: true
@ -232,7 +232,7 @@ NBox {
width: parent.width width: parent.width
height: 4 * scaling height: 4 * scaling
radius: Style.radiusSmall * scaling radius: Style.radiusSmall * scaling
color: Colors.colorSurfaceVariant color: Colors.mSurfaceVariant
Layout.fillWidth: true Layout.fillWidth: true
property real progressRatio: { property real progressRatio: {
@ -247,7 +247,7 @@ NBox {
width: progressBarBackground.progressRatio * parent.width width: progressBarBackground.progressRatio * parent.width
height: parent.height height: parent.height
radius: parent.radius radius: parent.radius
color: Colors.colorPrimary color: Colors.mPrimary
Behavior on width { Behavior on width {
NumberAnimation { NumberAnimation {
@ -262,8 +262,8 @@ NBox {
width: 16 * scaling width: 16 * scaling
height: 16 * scaling height: 16 * scaling
radius: width * 0.5 radius: width * 0.5
color: Colors.colorPrimary color: Colors.mPrimary
border.color: Colors.colorSurface border.color: Colors.mSurface
border.width: Math.max(1 * Style.borderMedium * scaling) border.width: Math.max(1 * Style.borderMedium * scaling)
x: Math.max(0, Math.min(parent.width - width, progressFill.width - width / 2)) x: Math.max(0, Math.min(parent.width - width, progressFill.width - width / 2))
@ -336,7 +336,7 @@ NBox {
width: 300 * scaling width: 300 * scaling
height: 80 * scaling height: 80 * scaling
values: Cava.values values: Cava.values
fillColor: Colors.colorOnSurface fillColor: Colors.mOnSurface
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
} }
} }
@ -346,8 +346,8 @@ NBox {
// values: Cava.values // values: Cava.values
// innerRadius: 30 * scaling // Position just outside 60x60 album art // innerRadius: 30 * scaling // Position just outside 60x60 album art
// outerRadius: 48 * scaling // Extend bars outward from album art // outerRadius: 48 * scaling // Extend bars outward from album art
// fillColor: Colors.colorPrimary // fillColor: Colors.mPrimary
// strokeColor: Colors.colorPrimary // strokeColor: Colors.mPrimary
// strokeWidth: 0 * scaling // strokeWidth: 0 * scaling
// } // }
} }

4
Modules/SidePanel/Cards/ProfileCard.qml
View file

@ -33,7 +33,7 @@ NBox {
height: Style.baseWidgetSize * 1.25 * scaling height: Style.baseWidgetSize * 1.25 * scaling
imagePath: Settings.data.general.avatarImage imagePath: Settings.data.general.avatarImage
fallbackIcon: "person" fallbackIcon: "person"
borderColor: Colors.colorPrimary borderColor: Colors.mPrimary
borderWidth: Math.max(1, Style.borderMedium * scaling) borderWidth: Math.max(1, Style.borderMedium * scaling)
} }
@ -46,7 +46,7 @@ NBox {
} }
NText { NText {
text: `System Uptime: ${uptimeText}` text: `System Uptime: ${uptimeText}`
color: Colors.colorOnSurface color: Colors.mOnSurface
} }
} }

8
Modules/SidePanel/Cards/WeatherCard.qml
View file

@ -30,7 +30,7 @@ NBox {
text: weatherReady ? Location.weatherSymbolFromCode(Location.data.weather.current_weather.weathercode) : "" text: weatherReady ? Location.weatherSymbolFromCode(Location.data.weather.current_weather.weathercode) : ""
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeXXL * 1.5 * scaling font.pointSize: Style.fontSizeXXL * 1.5 * scaling
color: Colors.colorPrimary color: Colors.mPrimary
} }
ColumnLayout { ColumnLayout {
@ -91,13 +91,13 @@ NBox {
spacing: Style.marginSmall * scaling spacing: Style.marginSmall * scaling
NText { NText {
text: Qt.formatDateTime(new Date(Location.data.weather.daily.time[index]), "ddd") text: Qt.formatDateTime(new Date(Location.data.weather.daily.time[index]), "ddd")
color: Colors.colorOnSurface color: Colors.mOnSurface
} }
NText { NText {
text: Location.weatherSymbolFromCode(Location.data.weather.daily.weathercode[index]) text: Location.weatherSymbolFromCode(Location.data.weather.daily.weathercode[index])
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXL * scaling
color: Colors.colorPrimary color: Colors.mPrimary
} }
NText { NText {
text: { text: {
@ -112,7 +112,7 @@ NBox {
return `${max}°/${min}°` return `${max}°/${min}°`
} }
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeSmall * scaling
color: Colors.colorOnSurfaceVariant color: Colors.mOnSurfaceVariant
} }
} }
} }

34
Modules/SidePanel/PowerMenu.qml
View file

@ -25,9 +25,9 @@ NPanel {
width: 160 * scaling width: 160 * scaling
height: 220 * scaling height: 220 * scaling
radius: Style.radiusMedium * scaling radius: Style.radiusMedium * scaling
border.color: Colors.colorOutline border.color: Colors.mOutline
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderThin * scaling)
color: Colors.colorSurface color: Colors.mSurface
visible: true visible: true
z: 9999 z: 9999
@ -56,7 +56,7 @@ NPanel {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 36 * scaling Layout.preferredHeight: 36 * scaling
radius: Style.radiusSmall * scaling radius: Style.radiusSmall * scaling
color: lockButtonArea.containsMouse ? Colors.colorTertiary : "transparent" color: lockButtonArea.containsMouse ? Colors.mTertiary : "transparent"
Item { Item {
anchors.left: parent.left anchors.left: parent.left
@ -79,7 +79,7 @@ NPanel {
font.variableAxes: { font.variableAxes: {
"wght": (Font.Normal + Font.Bold) / 2.0 "wght": (Font.Normal + Font.Bold) / 2.0
} }
color: lockButtonArea.containsMouse ? Colors.colorOnTertiary : Colors.colorOnSurface color: lockButtonArea.containsMouse ? Colors.mOnTertiary : Colors.mOnSurface
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: 1 * scaling anchors.verticalCenterOffset: 1 * scaling
@ -87,7 +87,7 @@ NPanel {
Text { Text {
text: "Lock Screen" text: "Lock Screen"
color: lockButtonArea.containsMouse ? Colors.colorOnTertiary : Colors.colorOnSurface color: lockButtonArea.containsMouse ? Colors.mOnTertiary : Colors.mOnSurface
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: 1 * scaling anchors.verticalCenterOffset: 1 * scaling
@ -116,7 +116,7 @@ NPanel {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 36 * scaling Layout.preferredHeight: 36 * scaling
radius: Style.radiusSmall * scaling radius: Style.radiusSmall * scaling
color: suspendButtonArea.containsMouse ? Colors.colorTertiary : "transparent" color: suspendButtonArea.containsMouse ? Colors.mTertiary : "transparent"
Item { Item {
anchors.left: parent.left anchors.left: parent.left
@ -139,7 +139,7 @@ NPanel {
font.variableAxes: { font.variableAxes: {
"wght": (Font.Normal + Font.Bold) / 2.0 "wght": (Font.Normal + Font.Bold) / 2.0
} }
color: suspendButtonArea.containsMouse ? Colors.colorOnTertiary : Colors.colorOnSurface color: suspendButtonArea.containsMouse ? Colors.mOnTertiary : Colors.mOnSurface
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: 1 * scaling anchors.verticalCenterOffset: 1 * scaling
@ -147,7 +147,7 @@ NPanel {
Text { Text {
text: "Suspend" text: "Suspend"
color: suspendButtonArea.containsMouse ? Colors.colorOnTertiary : Colors.colorOnSurface color: suspendButtonArea.containsMouse ? Colors.mOnTertiary : Colors.mOnSurface
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: 1 * scaling anchors.verticalCenterOffset: 1 * scaling
@ -174,7 +174,7 @@ NPanel {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 36 * scaling Layout.preferredHeight: 36 * scaling
radius: Style.radiusSmall * scaling radius: Style.radiusSmall * scaling
color: rebootButtonArea.containsMouse ? Colors.colorTertiary : "transparent" color: rebootButtonArea.containsMouse ? Colors.mTertiary : "transparent"
Item { Item {
anchors.left: parent.left anchors.left: parent.left
@ -197,7 +197,7 @@ NPanel {
font.variableAxes: { font.variableAxes: {
"wght": (Font.Normal + Font.Bold) / 2.0 "wght": (Font.Normal + Font.Bold) / 2.0
} }
color: rebootButtonArea.containsMouse ? Colors.colorOnTertiary : Colors.colorOnSurface color: rebootButtonArea.containsMouse ? Colors.mOnTertiary : Colors.mOnSurface
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: 1 * scaling anchors.verticalCenterOffset: 1 * scaling
@ -205,7 +205,7 @@ NPanel {
Text { Text {
text: "Reboot" text: "Reboot"
color: rebootButtonArea.containsMouse ? Colors.colorOnTertiary : Colors.colorOnSurface color: rebootButtonArea.containsMouse ? Colors.mOnTertiary : Colors.mOnSurface
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: 1 * scaling anchors.verticalCenterOffset: 1 * scaling
@ -232,7 +232,7 @@ NPanel {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 36 * scaling Layout.preferredHeight: 36 * scaling
radius: Style.radiusSmall * scaling radius: Style.radiusSmall * scaling
color: logoutButtonArea.containsMouse ? Colors.colorTertiary : "transparent" color: logoutButtonArea.containsMouse ? Colors.mTertiary : "transparent"
Item { Item {
anchors.left: parent.left anchors.left: parent.left
@ -255,7 +255,7 @@ NPanel {
font.variableAxes: { font.variableAxes: {
"wght": (Font.Normal + Font.Bold) / 2.0 "wght": (Font.Normal + Font.Bold) / 2.0
} }
color: logoutButtonArea.containsMouse ? Colors.colorOnTertiary : Colors.colorOnSurface color: logoutButtonArea.containsMouse ? Colors.mOnTertiary : Colors.mOnSurface
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: 1 * scaling anchors.verticalCenterOffset: 1 * scaling
@ -263,7 +263,7 @@ NPanel {
Text { Text {
text: "Logout" text: "Logout"
color: logoutButtonArea.containsMouse ? Colors.colorOnTertiary : Colors.colorOnSurface color: logoutButtonArea.containsMouse ? Colors.mOnTertiary : Colors.mOnSurface
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: 1 * scaling anchors.verticalCenterOffset: 1 * scaling
@ -290,7 +290,7 @@ NPanel {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 36 * scaling Layout.preferredHeight: 36 * scaling
radius: Style.radiusSmall * scaling radius: Style.radiusSmall * scaling
color: shutdownButtonArea.containsMouse ? Colors.colorTertiary : "transparent" color: shutdownButtonArea.containsMouse ? Colors.mTertiary : "transparent"
Item { Item {
anchors.left: parent.left anchors.left: parent.left
@ -313,7 +313,7 @@ NPanel {
font.variableAxes: { font.variableAxes: {
"wght": (Font.Normal + Font.Bold) / 2.0 "wght": (Font.Normal + Font.Bold) / 2.0
} }
color: shutdownButtonArea.containsMouse ? Colors.colorOnTertiary : Colors.colorOnSurface color: shutdownButtonArea.containsMouse ? Colors.mOnTertiary : Colors.mOnSurface
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: 1 * scaling anchors.verticalCenterOffset: 1 * scaling
@ -321,7 +321,7 @@ NPanel {
Text { Text {
text: "Shutdown" text: "Shutdown"
color: shutdownButtonArea.containsMouse ? Colors.colorOnTertiary : Colors.colorOnSurface color: shutdownButtonArea.containsMouse ? Colors.mOnTertiary : Colors.mOnSurface
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: 1 * scaling anchors.verticalCenterOffset: 1 * scaling

4
Modules/SidePanel/SidePanel.qml
View file

@ -81,9 +81,9 @@ NLoader {
// Inline helpers moved to dedicated widgets: NCard and NCircleStat // Inline helpers moved to dedicated widgets: NCard and NCircleStat
Rectangle { Rectangle {
id: panelBackground id: panelBackground
color: Colors.colorSurface color: Colors.mSurface
radius: Style.radiusLarge * scaling radius: Style.radiusLarge * scaling
border.color: Colors.colorOutlineVariant border.color: Colors.mOutlineVariant
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderThin * scaling)
layer.enabled: true layer.enabled: true
width: 460 * scaling width: 460 * scaling

163
Services/Colors.qml
View file

@ -6,38 +6,36 @@ import Quickshell.Io
import qs.Services import qs.Services
// -------------------------------- // --------------------------------
// Material3 Colors // Noctalia Colors - Material Design 3
// We only use a subset of all materials colors to avoid complexity // We only use a very small subset of all available m3 colors to avoid complexity
Singleton { Singleton {
id: root id: root
// --- Key Colors: These are the main accent colors that define your app's theme
property color mPrimary: useCustom ? customColors.mPrimary : defaultColors.mPrimary
property color mOnPrimary: useCustom ? customColors.mOnPrimary : defaultColors.mOnPrimary
property color mSecondary: useCustom ? customColors.mSecondary : defaultColors.mSecondary
property color mOnSecondary: useCustom ? customColors.mOnSecondary : defaultColors.mOnSecondary
property color mTertiary: useCustom ? customColors.mTertiary : defaultColors.mTertiary
property color mOnTertiary: useCustom ? customColors.mOnTertiary : defaultColors.mOnTertiary
// --- Utility Colors: These colors serve specific, universal purposes like indicating errors
property color mError: useCustom ? customColors.mError : defaultColors.mError
property color mOnError: useCustom ? customColors.mOnError : defaultColors.mOnError
// --- Surface and Variant Colors: These provide additional options for surfaces and their contents, creating visual hierarchy
property color mSurface: useCustom ? customColors.mSurface : defaultColors.mSurface
property color mOnSurface: useCustom ? customColors.mOnSurface : defaultColors.mOnSurface
property color mSurfaceVariant: useCustom ? customColors.mSurfaceVariant : defaultColors.mSurfaceVariant
property color mOnSurfaceVariant: useCustom ? customColors.mOnSurfaceVariant : defaultColors.mOnSurfaceVariant
property color mOutline: useCustom ? customColors.mOutline : defaultColors.mOutline
property color mOutlineVariant: useCustom ? customColors.mOutlineVariant : defaultColors.mOutlineVariant
property color mShadow: useCustom ? customColors.mShadow : defaultColors.mShadow
// ----------- // -----------
// Check if we should use custom colors // Check if we should use custom colors
property bool useCustom: Settings.data.wallpaper.generateColors && customColorsFile.loaded property bool useCustom: (Settings.data.wallpaper.generateColors && customColorsFile.loaded)
// --- Key Colors
property color colorPrimary: useCustom ? customColors.colorPrimary : defaultTheme.colorPrimary
property color colorOnPrimary: useCustom ? customColors.colorOnPrimary : defaultTheme.colorOnPrimary
property color colorSecondary: useCustom ? customColors.colorSecondary : defaultTheme.colorSecondary
property color colorOnSecondary: useCustom ? customColors.colorOnSecondary : defaultTheme.colorOnSecondary
property color colorTertiary: useCustom ? customColors.colorTertiary : defaultTheme.colorTertiary
property color colorOnTertiary: useCustom ? customColors.colorOnTertiary : defaultTheme.colorOnTertiary
// --- Utility Colors
property color colorError: useCustom ? customColors.colorError : defaultTheme.colorError
property color colorOnError: useCustom ? customColors.colorOnError : defaultTheme.colorOnError
// --- Surface and Variant Colors
property color colorSurface: useCustom ? customColors.colorSurface : defaultTheme.colorSurface
property color colorOnSurface: useCustom ? customColors.colorOnSurface : defaultTheme.colorOnSurface
property color colorSurfaceVariant: useCustom ? customColors.colorSurfaceVariant : defaultTheme.colorSurfaceVariant
property color colorOnSurfaceVariant: useCustom ? customColors.colorOnSurfaceVariant : defaultTheme.colorOnSurfaceVariant
property color colorOutline: useCustom ? customColors.colorOutline : defaultTheme.colorOutline
property color colorOutlineVariant: useCustom ? customColors.colorOutlineVariant : defaultTheme.colorOutlineVariant
property color colorShadow: useCustom ? customColors.colorShadow : defaultTheme.colorShadow
// ----------- // -----------
function applyOpacity(color, opacity) { function applyOpacity(color, opacity) {
@ -46,63 +44,53 @@ Singleton {
} }
// -------------------------------- // --------------------------------
// Default theme colors - RosePine // Default colors: RosePine
QtObject { QtObject {
id: defaultTheme id: defaultColors
// // --- Key Colors: These are the main accent colors that define your app's theme. property color mPrimary: "#ebbcba"
property color colorPrimary: "#ebbcba" // The main brand color, used most frequently. property color mOnPrimary: "#191724"
property color colorOnPrimary: "#191724" // Color for text/icons on a Primary background. property color mSecondary: "#31748f"
property color mOnSecondary: "#e0def4"
property color mTertiary: "#9ccfd8"
property color mOnTertiary: "#191724"
property color colorSecondary: "#31748f" // An accent color for less prominent components. property color mError: "#eb6f92"
property color colorOnSecondary: "#e0def4" // Color for text/icons on a Secondary background. property color mOnError: "#191724"
property color colorTertiary: "#9ccfd8" // A contrasting accent color used for things like highlights or special actions. property color mSurface: "#191724"
property color colorOnTertiary: "#191724" // Color for text/icons on a Tertiary background. property color mOnSurface: "#e0def4"
property color mSurfaceVariant: "#26233a"
// --- Utility colorColors: These colors serve specific, universal purposes like indicating errors or providing neutral backgrounds. property color mOnSurfaceVariant: "#908caa"
property color colorError: "#eb6f92" // Indicates an error state. property color mOutline: "#44415a"
property color colorOnError: "#191724" // Color for text/icons on an Error background. property color mOutlineVariant: "#514e6c"
property color mShadow: "#191724"
// --- Surface colorand Variant Colors: These provide additional options for surfaces and their contents, creating visual hierarchy.
property color colorSurface: "#191724" // The color for component surfaces like cards, sheets, and menus.
property color colorOnSurface: "#e0def4" // The primary color for text/icons on a Surface background.
property color colorSurfaceVariant: "#26233a" // A surface color with a slightly different tint for differentiation.
property color colorOnSurfaceVariant: "#908caa" // The color for less prominent text/icons on a Surface.
property color colorOutline: "#44415a" // The color for component outlines, like text fields or buttons.
property color colorOutlineVariant: "#514e6c" // A subtler outline color for decorative elements or dividers.
property color colorShadow: "#191724" // The color used for shadows to create elevation.
} }
// ---------------------------------------------------------------- // ----------------------------------------------------------------
// Custom colors (loaded from colors.json) // Custom colors loaded from colors.json
// These can be generated by matugen or simply come from a well know color scheme (Dracula, Gruvbox, Nord, ...) // These can be generated by matugen or simply come from a well know color scheme (Dracula, Gruvbox, Nord, ...)
QtObject { QtObject {
id: customColors id: customColors
// --- Key Colors property color mPrimary: customColorsData.mPrimary
property color colorPrimary: customColorsData.colorPrimary property color mOnPrimary: customColorsData.mOnPrimary
property color colorOnPrimary: customColorsData.colorOnPrimary property color mSecondary: customColorsData.mSecondary
property color mOnSecondary: customColorsData.mOnSecondary
property color mTertiary: customColorsData.mTertiary
property color mOnTertiary: customColorsData.mOnTertiary
property color colorSecondary: customColorsData.colorSecondary property color mError: customColorsData.mError
property color colorOnSecondary: customColorsData.colorOnSecondary property color mOnError: customColorsData.mOnError
property color colorTertiary: customColorsData.colorTertiary property color mSurface: customColorsData.mSurface
property color colorOnTertiary: customColorsData.colorOnTertiary property color mOnSurface: customColorsData.mOnSurface
property color mSurfaceVariant: customColorsData.mSurfaceVariant
// --- Utility Colors property color mOnSurfaceVariant: customColorsData.mOnSurfaceVariant
property color colorError: customColorsData.colorError property color mOutline: customColorsData.mOutline
property color colorOnError: customColorsData.colorOnError property color mOutlineVariant: customColorsData.mOutlineVariant
property color mShadow: customColorsData.mShadow
// --- Surface and Variant Colors
property color colorSurface: customColorsData.colorSurface
property color colorOnSurface: customColorsData.colorOnSurface
property color colorSurfaceVariant: customColorsData.colorSurfaceVariant
property color colorOnSurfaceVariant: customColorsData.colorOnSurfaceVariant
property color colorOutline: customColorsData.colorOutline
property color colorOutlineVariant: customColorsData.colorOutlineVariant
property color colorShadow: customColorsData.colorShadow
} }
// FileView to load custom colors data from colors.json // FileView to load custom colors data from colors.json
@ -121,28 +109,23 @@ Singleton {
JsonAdapter { JsonAdapter {
id: customColorsData id: customColorsData
// --- Key Colors property color mPrimary: defaultColors.mPrimary
property color colorPrimary: defaultTheme.colorPrimary property color mOnPrimary: defaultColors.mOnPrimary
property color colorOnPrimary: defaultTheme.colorOnPrimary property color mSecondary: defaultColors.mSecondary
property color mOnSecondary: defaultColors.mOnSecondary
property color mTertiary: defaultColors.mTertiary
property color mOnTertiary: defaultColors.mOnTertiary
property color colorSecondary: defaultTheme.colorSecondary property color mError: defaultColors.mError
property color colorOnSecondary: defaultTheme.colorOnSecondary property color mOnError: defaultColors.mOnError
property color colorTertiary: defaultTheme.colorTertiary property color mSurface: defaultColors.mSurface
property color colorOnTertiary: defaultTheme.colorOnTertiary property color mOnSurface: defaultColors.mOnSurface
property color mSurfaceVariant: defaultColors.mSurfaceVariant
// --- Utility Colors property color mOnSurfaceVariant: defaultColors.mOnSurfaceVariant
property color colorError: defaultTheme.colorError property color mOutline: defaultColors.mOutline
property color colorOnError: defaultTheme.colorOnError property color mOutlineVariant: defaultColors.mOutlineVariant
property color mShadow: defaultColors.mShadow
// --- Surface and Variant Colors
property color colorSurface: defaultTheme.colorSurface
property color colorOnSurface: defaultTheme.colorOnSurface
property color colorSurfaceVariant: defaultTheme.colorSurfaceVariant
property color colorOnSurfaceVariant: defaultTheme.colorOnSurfaceVariant
property color colorOutline: defaultTheme.colorOutline
property color colorOutlineVariant: defaultTheme.colorOutlineVariant
property color colorShadow: defaultTheme.colorShadow
} }
} }
} }

4
Widgets/NBox.qml
View file

@ -11,9 +11,9 @@ Rectangle {
implicitWidth: childrenRect.width implicitWidth: childrenRect.width
implicitHeight: childrenRect.height implicitHeight: childrenRect.height
color: Colors.colorSurfaceVariant color: Colors.mSurfaceVariant
radius: Style.radiusMedium * scaling radius: Style.radiusMedium * scaling
border.color: Colors.colorOutlineVariant border.color: Colors.mOutlineVariant
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderThin * scaling)
clip: true clip: true
} }

2
Widgets/NBusyIndicator.qml
View file

@ -7,7 +7,7 @@ Item {
readonly property real scaling: Scaling.scale(screen) readonly property real scaling: Scaling.scale(screen)
property bool running: true property bool running: true
property color color: Colors.colorPrimary property color color: Colors.mPrimary
property int size: Style.baseWidgetSize * scaling property int size: Style.baseWidgetSize * scaling
property int strokeWidth: Style.borderThick * scaling property int strokeWidth: Style.borderThick * scaling
property int duration: 1000 property int duration: 1000

4
Widgets/NCard.qml
View file

@ -10,8 +10,8 @@ Rectangle {
implicitWidth: childrenRect.width implicitWidth: childrenRect.width
implicitHeight: childrenRect.height implicitHeight: childrenRect.height
color: Colors.colorSurface color: Colors.mSurface
radius: Style.radiusMedium * scaling radius: Style.radiusMedium * scaling
border.color: Colors.colorSurfaceVariant border.color: Colors.mSurfaceVariant
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderThin * scaling)
} }

16
Widgets/NCircleStat.qml
View file

@ -18,9 +18,9 @@ Rectangle {
width: 68 * scaling width: 68 * scaling
height: 92 * scaling height: 92 * scaling
color: flat ? "transparent" : Colors.colorSurface color: flat ? "transparent" : Colors.mSurface
radius: Style.radiusSmall * scaling radius: Style.radiusSmall * scaling
border.color: flat ? "transparent" : Colors.colorSurfaceVariant border.color: flat ? "transparent" : Colors.mSurfaceVariant
border.width: flat ? 0 : Math.max(1, Style.borderThin * scaling) border.width: flat ? 0 : Math.max(1, Style.borderThin * scaling)
clip: true clip: true
@ -58,14 +58,14 @@ Rectangle {
ctx.reset() ctx.reset()
ctx.lineWidth = 6 * root.scaling * contentScale ctx.lineWidth = 6 * root.scaling * contentScale
// Track uses surfaceVariant for stronger contrast // Track uses surfaceVariant for stronger contrast
ctx.strokeStyle = Colors.colorSurface ctx.strokeStyle = Colors.mSurface
ctx.beginPath() ctx.beginPath()
ctx.arc(cx, cy, r, start, endBg) ctx.arc(cx, cy, r, start, endBg)
ctx.stroke() ctx.stroke()
// Value arc // Value arc
const ratio = Math.max(0, Math.min(1, root.value / 100)) const ratio = Math.max(0, Math.min(1, root.value / 100))
const end = start + (endBg - start) * ratio const end = start + (endBg - start) * ratio
ctx.strokeStyle = Colors.colorPrimary ctx.strokeStyle = Colors.mPrimary
ctx.beginPath() ctx.beginPath()
ctx.arc(cx, cy, r, start, end) ctx.arc(cx, cy, r, start, end)
ctx.stroke() ctx.stroke()
@ -79,7 +79,7 @@ Rectangle {
text: `${root.value}${root.suffix}` text: `${root.value}${root.suffix}`
font.pointSize: Style.fontSizeMedium * scaling * contentScale font.pointSize: Style.fontSizeMedium * scaling * contentScale
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.colorOnSurface color: Colors.mOnSurface
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
} }
@ -89,8 +89,8 @@ Rectangle {
width: 28 * scaling * contentScale width: 28 * scaling * contentScale
height: width height: width
radius: width / 2 radius: width / 2
color: Colors.colorSurface color: Colors.mSurface
// border.color: Colors.colorPrimary // border.color: Colors.mPrimary
// border.width: Math.max(1, Style.borderThin * scaling) // border.width: Math.max(1, Style.borderThin * scaling)
anchors.right: parent.right anchors.right: parent.right
anchors.top: parent.top anchors.top: parent.top
@ -102,7 +102,7 @@ Rectangle {
text: root.icon text: root.icon
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeLargeXL * scaling * contentScale font.pointSize: Style.fontSizeLargeXL * scaling * contentScale
color: Colors.colorOnSurface color: Colors.mOnSurface
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
} }

16
Widgets/NComboBox.qml
View file

@ -29,13 +29,13 @@ ColumnLayout {
text: label text: label
font.pointSize: Style.fontSizeMedium * scaling font.pointSize: Style.fontSizeMedium * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.colorOnSurface color: Colors.mOnSurface
} }
NText { NText {
text: description text: description
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeSmall * scaling
color: Colors.colorOnSurface color: Colors.mOnSurface
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
} }
} }
@ -56,8 +56,8 @@ ColumnLayout {
background: Rectangle { background: Rectangle {
implicitWidth: 120 * scaling implicitWidth: 120 * scaling
implicitHeight: preferredHeight implicitHeight: preferredHeight
color: Colors.colorSurface color: Colors.mSurface
border.color: combo.activeFocus ? Colors.colorTertiary : Colors.colorOutline border.color: combo.activeFocus ? Colors.mTertiary : Colors.mOutline
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderThin * scaling)
radius: Style.radiusMedium * scaling radius: Style.radiusMedium * scaling
} }
@ -97,8 +97,8 @@ ColumnLayout {
} }
background: Rectangle { background: Rectangle {
color: Colors.colorSurfaceVariant color: Colors.mSurfaceVariant
border.color: Colors.colorOutline border.color: Colors.mOutline
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderThin * scaling)
radius: Style.radiusMedium * scaling radius: Style.radiusMedium * scaling
} }
@ -112,14 +112,14 @@ ColumnLayout {
text: (combo.model.indexOf(modelData) >= 0 && combo.model.indexOf( text: (combo.model.indexOf(modelData) >= 0 && combo.model.indexOf(
modelData) < root.optionsLabels.length) ? root.optionsLabels[combo.model.indexOf(modelData)] : "" modelData) < root.optionsLabels.length) ? root.optionsLabels[combo.model.indexOf(modelData)] : ""
font.pointSize: Style.fontSizeMedium * scaling font.pointSize: Style.fontSizeMedium * scaling
color: highlighted ? Colors.colorSurface : Colors.colorOnSurface color: highlighted ? Colors.mSurface : Colors.mOnSurface
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight elide: Text.ElideRight
} }
background: Rectangle { background: Rectangle {
width: combo.width - Style.marginMedium * scaling * 3 width: combo.width - Style.marginMedium * scaling * 3
color: highlighted ? Colors.colorTertiary : "transparent" color: highlighted ? Colors.mTertiary : "transparent"
radius: Style.radiusSmall * scaling radius: Style.radiusSmall * scaling
} }
} }

2
Widgets/NDivider.qml
View file

@ -6,5 +6,5 @@ import qs.Services
Rectangle { Rectangle {
width: parent.width width: parent.width
height: Math.max(1, Style.borderThin * scaling) height: Math.max(1, Style.borderThin * scaling)
color: Colors.colorOutline color: Colors.mOutline
} }

6
Widgets/NIconButton.qml
View file

@ -26,9 +26,9 @@ Rectangle {
implicitWidth: size implicitWidth: size
implicitHeight: size implicitHeight: size
color: (root.hovering || showFilled) ? Colors.colorPrimary : "transparent" color: (root.hovering || showFilled) ? Colors.mPrimary : "transparent"
radius: width * 0.5 radius: width * 0.5
border.color: showBorder ? Colors.colorPrimary : "transparent" border.color: showBorder ? Colors.mPrimary : "transparent"
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderThin * scaling)
NText { NText {
@ -43,7 +43,7 @@ Rectangle {
"wght": (Font.Normal + Font.Bold) / 2.0 "wght": (Font.Normal + Font.Bold) / 2.0
} }
color: (root.hovering color: (root.hovering
|| showFilled) ? Colors.colorOnPrimary : showBorder ? Colors.colorPrimary : Colors.colorOnSurface || showFilled) ? Colors.mOnPrimary : showBorder ? Colors.mPrimary : Colors.mOnSurface
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
opacity: root.enabled ? Style.opacityFull : Style.opacityMedium opacity: root.enabled ? Style.opacityFull : Style.opacityMedium

10
Widgets/NPill.qml
View file

@ -10,11 +10,11 @@ Item {
property string icon: "" property string icon: ""
property string text: "" property string text: ""
property string tooltipText: "" property string tooltipText: ""
property color pillColor: Colors.colorSurfaceVariant property color pillColor: Colors.mSurfaceVariant
property color textColor: Colors.colorOnSurface property color textColor: Colors.mOnSurface
property color iconCircleColor: Colors.colorPrimary property color iconCircleColor: Colors.mPrimary
property color iconTextColor: Colors.colorSurface property color iconTextColor: Colors.mSurface
property color collapsedIconColor: Colors.colorOnSurface property color collapsedIconColor: Colors.mOnSurface
property real sizeMultiplier: 0.8 property real sizeMultiplier: 0.8
property bool autoHide: false property bool autoHide: false

4
Widgets/NRadioButton.qml
View file

@ -13,7 +13,7 @@ RadioButton {
implicitHeight: 20 * scaling implicitHeight: 20 * scaling
radius: width * 0.5 radius: width * 0.5
color: "transparent" color: "transparent"
border.color: root.checked ? Colors.colorPrimary : Colors.colorOnSurface border.color: root.checked ? Colors.mPrimary : Colors.mOnSurface
border.width: 2 border.width: 2
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
@ -23,7 +23,7 @@ RadioButton {
implicitHeight: Style.marginSmall * scaling implicitHeight: Style.marginSmall * scaling
radius: width * 0.5 radius: width * 0.5
color: Qt.alpha(Colors.colorPrimary, root.checked ? 1 : 0) color: Qt.alpha(Colors.mPrimary, root.checked ? 1 : 0)
} }
Behavior on border.color { Behavior on border.color {

16
Widgets/NSlider.qml
View file

@ -27,13 +27,13 @@ Slider {
width: root.availableWidth width: root.availableWidth
height: implicitHeight height: implicitHeight
radius: height / 2 radius: height / 2
color: Colors.colorSurface color: Colors.mSurface
Rectangle { Rectangle {
id: activeTrack id: activeTrack
width: root.visualPosition * parent.width width: root.visualPosition * parent.width
height: parent.height height: parent.height
color: Colors.colorPrimary color: Colors.mPrimary
radius: parent.radius radius: parent.radius
} }
@ -43,7 +43,7 @@ Slider {
width: knobDiameter + cutoutExtra width: knobDiameter + cutoutExtra
height: knobDiameter + cutoutExtra height: knobDiameter + cutoutExtra
radius: width / 2 radius: width / 2
color: root.cutoutColor !== undefined ? root.cutoutColor : Colors.colorSurface color: root.cutoutColor !== undefined ? root.cutoutColor : Colors.mSurface
x: Math.max(0, Math.min(parent.width - width, x: Math.max(0, Math.min(parent.width - width,
root.visualPosition * (parent.width - root.knobDiameter) - cutoutExtra / 2)) root.visualPosition * (parent.width - root.knobDiameter) - cutoutExtra / 2))
y: (parent.height - height) / 2 y: (parent.height - height) / 2
@ -56,12 +56,12 @@ Slider {
x: root.leftPadding + root.visualPosition * (root.availableWidth - width) x: root.leftPadding + root.visualPosition * (root.availableWidth - width)
y: root.topPadding + root.availableHeight / 2 - height / 2 y: root.topPadding + root.availableHeight / 2 - height / 2
// Subtle shadow for a more polished look (keeps theme colors) // Subtle shadow for a more polished look
MultiEffect { MultiEffect {
anchors.fill: knob anchors.fill: knob
source: knob source: knob
shadowEnabled: true shadowEnabled: true
shadowColor: Colors.colorShadow shadowColor: Colors.mShadow
shadowOpacity: 0.25 shadowOpacity: 0.25
shadowHorizontalOffset: 0 shadowHorizontalOffset: 0
shadowVerticalOffset: 1 shadowVerticalOffset: 1
@ -73,8 +73,8 @@ Slider {
implicitWidth: knobDiameter implicitWidth: knobDiameter
implicitHeight: knobDiameter implicitHeight: knobDiameter
radius: width * 0.5 radius: width * 0.5
color: root.pressed ? Colors.colorSurfaceVariant : Colors.colorSurface color: root.pressed ? Colors.mSurfaceVariant : Colors.mSurface
border.color: Colors.colorPrimary border.color: Colors.mPrimary
border.width: Math.max(1, Style.borderThick * scaling) border.width: Math.max(1, Style.borderThick * scaling)
// Press feedback halo (using accent color, low opacity) // Press feedback halo (using accent color, low opacity)
@ -83,7 +83,7 @@ Slider {
width: parent.width + 8 * scaling width: parent.width + 8 * scaling
height: parent.height + 8 * scaling height: parent.height + 8 * scaling
radius: width / 2 radius: width / 2
color: Colors.colorPrimary color: Colors.mPrimary
opacity: root.pressed ? 0.16 : 0.0 opacity: root.pressed ? 0.16 : 0.0
} }
} }

2
Widgets/NText.qml
View file

@ -10,5 +10,5 @@ Text {
font.family: Settings.data.ui.fontFamily font.family: Settings.data.ui.fontFamily
font.pointSize: Style.fontSizeMedium * scaling font.pointSize: Style.fontSizeMedium * scaling
font.weight: Style.fontWeightRegular font.weight: Style.fontWeightRegular
color: Colors.colorOnSurface color: Colors.mOnSurface
} }

14
Widgets/NTextInput.qml
View file

@ -29,13 +29,13 @@ Item {
text: label text: label
font.pointSize: Style.fontSizeMedium * scaling font.pointSize: Style.fontSizeMedium * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.colorOnSurface color: Colors.mOnSurface
} }
NText { NText {
text: description text: description
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeSmall * scaling
color: Colors.colorOnSurface color: Colors.mOnSurface
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
Layout.fillWidth: true Layout.fillWidth: true
} }
@ -47,8 +47,8 @@ Item {
implicitWidth: root.width implicitWidth: root.width
implicitHeight: Style.baseWidgetSize * 1.35 * scaling implicitHeight: Style.baseWidgetSize * 1.35 * scaling
radius: Style.radiusMedium * scaling radius: Style.radiusMedium * scaling
color: Colors.colorSurface color: Colors.mSurface
border.color: Colors.colorOutline border.color: Colors.mOutline
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderThin * scaling)
// Focus ring // Focus ring
@ -56,7 +56,7 @@ Item {
anchors.fill: parent anchors.fill: parent
radius: frame.radius radius: frame.radius
color: "transparent" color: "transparent"
border.color: input.activeFocus ? Colors.colorTertiary : "transparent" border.color: input.activeFocus ? Colors.mTertiary : "transparent"
border.width: input.activeFocus ? Math.max(1, Style.borderThin * scaling) : 0 border.width: input.activeFocus ? Math.max(1, Style.borderThin * scaling) : 0
} }
@ -74,8 +74,8 @@ Item {
echoMode: TextInput.Normal echoMode: TextInput.Normal
readOnly: root.readOnly readOnly: root.readOnly
enabled: root.enabled enabled: root.enabled
color: Colors.colorOnSurface color: Colors.mOnSurface
placeholderTextColor: Colors.colorOnSurface placeholderTextColor: Colors.mOnSurface
background: null background: null
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeSmall * scaling
onEditingFinished: root.editingFinished() onEditingFinished: root.editingFinished()

12
Widgets/NToggle.qml
View file

@ -27,13 +27,13 @@ RowLayout {
text: label text: label
font.pointSize: Style.fontSizeMedium * scaling font.pointSize: Style.fontSizeMedium * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.colorOnSurface color: Colors.mOnSurface
} }
NText { NText {
text: description text: description
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeSmall * scaling
color: Colors.colorOnSurface color: Colors.mOnSurface
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
Layout.fillWidth: true Layout.fillWidth: true
} }
@ -45,16 +45,16 @@ RowLayout {
implicitWidth: root.baseSize * 1.625 * scaling implicitWidth: root.baseSize * 1.625 * scaling
implicitHeight: root.baseSize * scaling implicitHeight: root.baseSize * scaling
radius: height * 0.5 radius: height * 0.5
color: value ? Colors.colorPrimary : Colors.colorSurface color: value ? Colors.mPrimary : Colors.mSurface
border.color: value ? Colors.colorPrimary : Colors.colorOutline border.color: value ? Colors.mPrimary : Colors.mOutline
border.width: Math.max(1, Style.borderMedium * scaling) border.width: Math.max(1, Style.borderMedium * scaling)
Rectangle { Rectangle {
implicitWidth: (root.baseSize - 5) * scaling implicitWidth: (root.baseSize - 5) * scaling
implicitHeight: (root.baseSize - 5) * scaling implicitHeight: (root.baseSize - 5) * scaling
radius: height * 0.5 radius: height * 0.5
color: value ? Colors.colorOnPrimary: Colors.colorPrimary color: value ? Colors.mOnPrimary: Colors.mPrimary
border.color: value ? Colors.colorSurface : Colors.colorSurface border.color: value ? Colors.mSurface : Colors.mSurface
border.width: Math.max(1, Style.borderMedium * scaling) border.width: Math.max(1, Style.borderMedium * scaling)
y: 2 * scaling y: 2 * scaling
x: value ? switcher.width - width - 2 * scaling : 2 * scaling x: value ? switcher.width - width - 2 * scaling : 2 * scaling

4
Widgets/NTooltip.qml
View file

@ -135,8 +135,8 @@ Window {
id: tooltipRect id: tooltipRect
anchors.fill: parent anchors.fill: parent
radius: Style.radiusMedium * scaling radius: Style.radiusMedium * scaling
color: Colors.colorSurface color: Colors.mSurface
border.color: Colors.colorOutline border.color: Colors.mOutline
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderThin * scaling)
z: 1 z: 1