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

Switched to Material3 colors principle

Browse source 
- works with matugen only for now
- need to restore rosepine
This commit is contained in:
quadbyte 2025-08-14 18:19:02 -04:00
parent 7fced5df95
commit 73c7ba8cdc
55 changed files with 519 additions and 583 deletions
Download patch file Download diff file Expand all files Collapse all files

26
Modules/Settings/SettingsPanel.qml
View file

@ -158,9 +158,9 @@ NLoader {
Rectangle {
id: bgRect
color: Colors.backgroundPrimary
color: Colors.colorSurface
radius: Style.radiusLarge * scaling
border.color: Colors.backgroundTertiary
border.color: Colors.colorOutlineVariant
border.width: Math.max(1, Style.borderMedium * scaling)
layer.enabled: true
width: (screen.width * 0.5) * scaling
@ -209,10 +209,10 @@ NLoader {
id: sidebar
Layout.preferredWidth: 260 * scaling
Layout.fillHeight: true
radius: Style.radiusMedium * scaling
color: Colors.backgroundSecondary
border.color: Colors.outline
color: Colors.colorSurfaceVariant
border.color: Colors.colorOutlineVariant
border.width: Math.max(1, Style.borderThin * scaling)
radius: Style.radiusMedium * scaling
Column {
anchors.fill: parent
@ -229,7 +229,7 @@ NLoader {
width: parent.width
height: 32 * scaling // Back to original height
radius: Style.radiusSmall * scaling
color: selected ? Colors.accentPrimary : (tabItem.hovering ? Colors.hover : "transparent")
color: selected ? Colors.colorPrimary : (tabItem.hovering ? Colors.colorTertiary : "transparent")
border.color: "transparent"
border.width: 0
@ -238,24 +238,28 @@ NLoader {
// Subtle hover effect: only icon/text color tint on hover
property bool hovering: false
property color tabTextColor: selected ? Colors.colorOnPrimary : (tabItem.hovering ? Colors.colorOnTertiary : Colors.colorOnSurface)
RowLayout {
anchors.fill: parent
anchors.leftMargin: Style.marginSmall * scaling
anchors.rightMargin: Style.marginSmall * scaling
spacing: Style.marginSmall * scaling
// Tab icon on the left side
NText {
text: modelData.icon
color: tabTextColor
font.family: "Material Symbols Outlined"
font.variableAxes: {
"wght": (Font.Normal + Font.Bold) / 2.0
}
font.pointSize: Style.fontSizeLarge * scaling
color: selected ? Colors.onAccent : (tabItem.hovering ? Colors.onAccent : Colors.textSecondary)
}
// Tab label on the left side
NText {
text: modelData.label
color: selected ? Colors.onAccent : (tabItem.hovering ? Colors.onAccent : Colors.textPrimary)
color: tabTextColor
font.pointSize: Style.fontSizeMedium * scaling
font.weight: Style.fontWeightBold
Layout.fillWidth: true
@ -281,8 +285,8 @@ NLoader {
Layout.fillWidth: true
Layout.fillHeight: true
radius: Style.radiusMedium * scaling
color: Colors.surfaceVariant
border.color: Colors.outline
color: Colors.colorSurfaceVariant
border.color: Colors.colorOutlineVariant
border.width: Math.max(1, Style.borderThin * scaling)
clip: true
@ -302,7 +306,7 @@ NLoader {
text: panel.tabsModel[currentTabIndex].label
font.pointSize: Style.fontSizeLarge * scaling
font.weight: Style.fontWeightBold
color: Colors.accentPrimary
color: Colors.colorPrimary
Layout.fillWidth: true
}
NIconButton {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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