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

4
Widgets/NBox.qml
View file

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

2
Widgets/NBusyIndicator.qml
View file

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

4
Widgets/NCard.qml
View file

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

16
Widgets/NCircleStat.qml
View file

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

16
Widgets/NComboBox.qml
View file

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

2
Widgets/NDivider.qml
View file

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

6
Widgets/NIconButton.qml
View file

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

10
Widgets/NPill.qml
View file

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

4
Widgets/NRadioButton.qml
View file

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

14
Widgets/NSlider.qml
View file

@ -27,13 +27,13 @@ Slider {
width: root.availableWidth
height: implicitHeight
radius: height / 2
color: Colors.surfaceVariant
color: Colors.colorSurfaceVariant
Rectangle {
id: activeTrack
width: root.visualPosition * parent.width
height: parent.height
color: Colors.accentPrimary
color: Colors.colorPrimary
radius: parent.radius
}
@ -43,7 +43,7 @@ Slider {
width: knobDiameter + cutoutExtra
height: knobDiameter + cutoutExtra
radius: width / 2
color: root.cutoutColor !== undefined ? root.cutoutColor : Colors.backgroundPrimary
color: root.cutoutColor !== undefined ? root.cutoutColor : Colors.colorSurface
x: Math.max(0, Math.min(parent.width - width,
root.visualPosition * (parent.width - root.knobDiameter) - cutoutExtra / 2))
y: (parent.height - height) / 2
@ -61,7 +61,7 @@ Slider {
anchors.fill: knob
source: knob
shadowEnabled: true
shadowColor: Colors.shadow
shadowColor: Colors.colorShadow
shadowOpacity: 0.25
shadowHorizontalOffset: 0
shadowVerticalOffset: 1
@ -73,8 +73,8 @@ Slider {
implicitWidth: knobDiameter
implicitHeight: knobDiameter
radius: width * 0.5
color: root.pressed ? Colors.surfaceVariant : Colors.surface
border.color: Colors.accentPrimary
color: root.pressed ? Colors.colorSurfaceVariant : Colors.colorSurface
border.color: Colors.colorPrimary
border.width: Math.max(1, Style.borderThick * scaling)
// Press feedback halo (using accent color, low opacity)
@ -83,7 +83,7 @@ Slider {
width: parent.width + 8 * scaling
height: parent.height + 8 * scaling
radius: width / 2
color: Colors.accentPrimary
color: Colors.colorPrimary
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.pointSize: Style.fontSizeMedium * scaling
font.weight: Style.fontWeightRegular
color: Colors.textPrimary
color: Colors.colorOnSurface
}

14
Widgets/NTextInput.qml
View file

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

16
Widgets/NToggle.qml
View file

@ -27,13 +27,13 @@ RowLayout {
text: label
font.pointSize: Style.fontSizeMedium * scaling
font.weight: Style.fontWeightBold
color: Colors.textPrimary
color: Colors.colorOnSurface
}
NText {
text: description
font.pointSize: Style.fontSizeSmall * scaling
color: Colors.textSecondary
color: Colors.colorOnSurface
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
@ -45,16 +45,16 @@ RowLayout {
implicitWidth: root.baseSize * 1.625 * scaling
implicitHeight: root.baseSize * scaling
radius: height * 0.5
color: value ? Colors.accentPrimary : Colors.surfaceVariant
border.color: value ? Colors.accentPrimary : Colors.outline
color: value ? Colors.colorPrimary : Colors.colorSurface
border.color: value ? Colors.colorPrimary : Colors.colorOutline
border.width: Math.max(1, Style.borderMedium * scaling)
Rectangle {
implicitWidth: (root.baseSize - 4) * scaling
implicitHeight: (root.baseSize - 4) * scaling
implicitWidth: (root.baseSize - 5) * scaling
implicitHeight: (root.baseSize - 5) * scaling
radius: height * 0.5
color: Colors.surface
border.color: hovering ? Colors.textDisabled : Colors.outline
color: value ? Colors.colorOnSurface : Colors.colorPrimary //Colors.onBackground : Colors.colorSecondary
border.color: value ? Colors.colorSurface: Colors.colorSurface
border.width: Math.max(1, Style.borderMedium * scaling)
y: 2 * scaling
x: value ? switcher.width - width - 2 * scaling : 2 * scaling

13
Widgets/NTooltip.qml
View file

@ -135,17 +135,8 @@ Window {
id: tooltipRect
anchors.fill: parent
radius: Style.radiusMedium * scaling
gradient: Gradient {
GradientStop {
position: 0.0
color: Colors.backgroundSecondary
}
GradientStop {
position: 1.0
color: Colors.backgroundTertiary
}
}
border.color: Colors.outline
color: Colors.colorSurface
border.color: Colors.colorOutline
border.width: Math.max(1, Style.borderThin * scaling)
z: 1