nosignal/nosignal-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

internal: transparency support coming soon™

Browse source 
Also fix media player selector text colour
Fix colour preview not resetting light/dark mode
This commit is contained in:
2 * r + 2 * t 2025-08-08 19:32:38 +10:00
parent 964d5deaa2
commit 5b8edfc1e2
45 changed files with 169 additions and 112 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/controls/CustomSpinBox.qml
View file

@ -30,7 +30,7 @@ RowLayout {
background: StyledRect {
implicitWidth: 100
radius: Appearance.rounding.small
color: Colours.palette.m3surfaceContainerHigh
color: Colours.tPalette.m3surfaceContainerHigh
}
}

6
components/controls/FilledSlider.qml
View file

@ -14,7 +14,7 @@ Slider {
orientation: Qt.Vertical
background: StyledRect {
color: Colours.alpha(Colours.palette.m3surfaceContainer, true)
color: Colours.tPalette.m3surfaceContainer
radius: Appearance.rounding.full
StyledRect {
@ -24,7 +24,7 @@ Slider {
y: root.handle.y
implicitHeight: parent.height - y
color: Colours.alpha(Colours.palette.m3secondary, true)
color: Colours.palette.m3secondary
radius: parent.radius
}
}
@ -49,7 +49,7 @@ Slider {
anchors.fill: parent
color: Colours.alpha(Colours.palette.m3inverseSurface, true)
color: Colours.palette.m3inverseSurface
radius: Appearance.rounding.full
MouseArea {

2
components/controls/StyledSlider.qml
View file

@ -32,7 +32,7 @@ Slider {
implicitWidth: parent.width - root.handle.x - root.handle.implicitWidth - root.implicitHeight / 6
color: Colours.palette.m3surfaceContainer
color: Colours.tPalette.m3surfaceContainer
radius: Appearance.rounding.full
topLeftRadius: root.implicitHeight / 15
bottomLeftRadius: root.implicitHeight / 15

4
components/controls/StyledSwitch.qml
View file

@ -8,12 +8,14 @@ import QtQuick.Shapes
Switch {
id: root
property int cLayer: 1
implicitWidth: implicitIndicatorWidth
implicitHeight: implicitIndicatorHeight
indicator: StyledRect {
radius: Appearance.rounding.full
color: root.checked ? Colours.palette.m3primary : Colours.palette.m3surfaceContainerHighest
color: root.checked ? Colours.palette.m3primary : Colours.layer(Colours.palette.m3surfaceContainerHighest, root.cLayer)
implicitWidth: implicitHeight * 1.7
implicitHeight: Appearance.font.size.normal + Appearance.padding.smaller * 2

2
components/effects/InnerBorder.qml
View file

@ -15,7 +15,7 @@ StyledRect {
property alias bottomThickness: maskInner.anchors.bottomMargin
anchors.fill: parent
color: Colours.palette.m3surfaceContainer
color: Colours.tPalette.m3surfaceContainer
layer.enabled: true
layer.effect: MultiEffect {

2
components/filedialog/CurrentItem.qml
View file

@ -23,7 +23,7 @@ Item {
readonly property real roundingY: flatten ? root.implicitHeight / 2 : rounding
strokeWidth: -1
fillColor: Colours.palette.m3surfaceContainer
fillColor: Colours.tPalette.m3surfaceContainer
startX: root.implicitWidth
startY: root.implicitHeight

8
components/filedialog/DialogButtons.qml
View file

@ -11,7 +11,7 @@ StyledRect {
implicitHeight: inner.implicitHeight + Appearance.padding.normal * 2
color: Colours.palette.m3surfaceContainer
color: Colours.tPalette.m3surfaceContainer
RowLayout {
id: inner
@ -30,7 +30,7 @@ StyledRect {
Layout.fillHeight: true
Layout.rightMargin: Appearance.spacing.normal
color: Colours.palette.m3surfaceContainerHigh
color: Colours.tPalette.m3surfaceContainerHigh
radius: Appearance.rounding.small
StyledText {
@ -42,7 +42,7 @@ StyledRect {
}
StyledRect {
color: Colours.palette.m3surfaceContainerHigh
color: Colours.tPalette.m3surfaceContainerHigh
radius: Appearance.rounding.small
implicitWidth: cancelText.implicitWidth + Appearance.padding.normal * 2
@ -68,7 +68,7 @@ StyledRect {
}
StyledRect {
color: Colours.palette.m3surfaceContainerHigh
color: Colours.tPalette.m3surfaceContainerHigh
radius: Appearance.rounding.small
implicitWidth: cancelText.implicitWidth + Appearance.padding.normal * 2

2
components/filedialog/FileDialog.qml
View file

@ -50,7 +50,7 @@ LazyLoader {
implicitWidth: 1000
implicitHeight: 600
color: Colours.palette.m3surface
color: Colours.tPalette.m3surface
title: loader.title
onVisibleChanged: {

4
components/filedialog/FolderContents.qml
View file

@ -22,7 +22,7 @@ Item {
StyledRect {
anchors.fill: parent
color: Colours.palette.m3surfaceContainer
color: Colours.tPalette.m3surfaceContainer
layer.enabled: true
layer.effect: MultiEffect {
@ -124,7 +124,7 @@ Item {
implicitHeight: nonAnimHeight
radius: Appearance.rounding.normal
color: Qt.alpha(Colours.palette.m3surfaceContainerHighest, GridView.isCurrentItem ? 1 : 0)
color: Qt.alpha(Colours.tPalette.m3surfaceContainerHighest, GridView.isCurrentItem ? 1 : 0)
z: GridView.isCurrentItem || implicitHeight !== nonAnimHeight ? 1 : 0
clip: true

4
components/filedialog/HeaderBar.qml
View file

@ -14,7 +14,7 @@ StyledRect {
implicitWidth: inner.implicitWidth + Appearance.padding.normal * 2
implicitHeight: inner.implicitHeight + Appearance.padding.normal * 2
color: Colours.palette.m3surfaceContainer
color: Colours.tPalette.m3surfaceContainer
RowLayout {
id: inner
@ -50,7 +50,7 @@ StyledRect {
Layout.fillWidth: true
radius: Appearance.rounding.small
color: Colours.palette.m3surfaceContainerHigh
color: Colours.tPalette.m3surfaceContainerHigh
implicitHeight: pathComponents.implicitHeight + pathComponents.anchors.margins * 2

2
components/filedialog/Sidebar.qml
View file

@ -14,7 +14,7 @@ StyledRect {
implicitWidth: Sizes.sidebarWidth
implicitHeight: inner.implicitHeight + Appearance.padding.normal * 2
color: Colours.palette.m3surfaceContainer
color: Colours.tPalette.m3surfaceContainer
ColumnLayout {
id: inner

4
modules/bar/Bar.qml
View file

@ -90,7 +90,7 @@ Item {
anchors.topMargin: Appearance.spacing.normal
radius: Appearance.rounding.full
color: Colours.palette.m3surfaceContainer
color: Colours.tPalette.m3surfaceContainer
implicitWidth: workspacesInner.implicitWidth + Appearance.padding.small * 2
implicitHeight: workspacesInner.implicitHeight + Appearance.padding.small * 2
@ -152,7 +152,7 @@ Item {
anchors.bottomMargin: Appearance.spacing.normal
radius: Appearance.rounding.full
color: Colours.palette.m3surfaceContainer
color: Colours.tPalette.m3surfaceContainer
implicitHeight: statusIconsInner.implicitHeight + Appearance.padding.normal * 2

2
modules/bar/components/workspaces/OccupiedBg.qml
View file

@ -51,7 +51,7 @@ Item {
readonly property Workspace start: root.workspaces[modelData.start - 1 - root.groupOffset] ?? null
readonly property Workspace end: root.workspaces[modelData.end - 1 - root.groupOffset] ?? null
color: Colours.alpha(Colours.palette.m3surfaceContainerHigh, true)
color: Colours.tPalette.m3surfaceContainerHigh
radius: Config.bar.workspaces.rounded ? Appearance.rounding.full : 0
x: start?.x ?? 0

2
modules/bar/popouts/Battery.qml
View file

@ -112,7 +112,7 @@ Column {
implicitWidth: saver.implicitHeight + balance.implicitHeight + perf.implicitHeight + Appearance.padding.normal * 2 + Appearance.spacing.large * 2
implicitHeight: Math.max(saver.implicitHeight, balance.implicitHeight, perf.implicitHeight) + Appearance.padding.small * 2
color: Colours.palette.m3surfaceContainer
color: Colours.tPalette.m3surfaceContainer
radius: Appearance.rounding.full
StyledRect {

2
modules/bar/popouts/Bluetooth.qml
View file

@ -108,7 +108,7 @@ ColumnLayout {
implicitHeight: connectIcon.implicitHeight + Appearance.padding.small
radius: Appearance.rounding.full
color: device.modelData.state === BluetoothDeviceState.Connected ? Colours.palette.m3primary : Colours.palette.m3surface
color: device.modelData.state === BluetoothDeviceState.Connected ? Colours.palette.m3primary : Colours.tPalette.m3surface
StyledBusyIndicator {
anchors.centerIn: parent

4
modules/bar/popouts/Network.qml
View file

@ -102,7 +102,7 @@ ColumnLayout {
implicitHeight: connectIcon.implicitHeight + Appearance.padding.small
radius: Appearance.rounding.full
color: networkItem.modelData.active ? Colours.palette.m3primary : Colours.palette.m3surface
color: networkItem.modelData.active ? Colours.palette.m3primary : Colours.tPalette.m3surface
StyledBusyIndicator {
anchors.centerIn: parent
@ -156,7 +156,7 @@ ColumnLayout {
implicitHeight: rescanBtn.implicitHeight + Appearance.padding.small * 2
radius: Appearance.rounding.normal
color: Network.scanning ? Colours.palette.m3surfaceContainer : Colours.palette.m3primaryContainer
color: Network.scanning ? Colours.tPalette.m3surfaceContainer : Colours.palette.m3primaryContainer
StateLayer {
color: Network.scanning ? Colours.palette.m3onSurface : Colours.palette.m3onPrimaryContainer

2
modules/controlcenter/ControlCenter.qml
View file

@ -58,7 +58,7 @@ Item {
topLeftRadius: root.rounding
bottomLeftRadius: root.rounding
implicitWidth: navRail.implicitWidth
color: Colours.palette.m3surfaceContainer
color: Colours.tPalette.m3surfaceContainer
CustomMouseArea {
anchors.fill: parent

2
modules/controlcenter/WindowFactory.qml
View file

@ -25,7 +25,7 @@ Singleton {
property alias active: cc.active
property alias navExpanded: cc.navExpanded
color: Colours.palette.m3surface
color: Colours.tPalette.m3surface
onVisibleChanged: {
if (!visible)

2
modules/controlcenter/WindowTitle.qml
View file

@ -11,7 +11,7 @@ StyledRect {
required property Session session
implicitHeight: text.implicitHeight + Appearance.padding.normal
color: Colours.palette.m3surfaceContainer
color: Colours.tPalette.m3surfaceContainer
StyledText {
id: text

8
modules/controlcenter/bluetooth/Details.qml
View file

@ -64,7 +64,7 @@ Item {
implicitHeight: deviceStatus.implicitHeight + Appearance.padding.large * 2
radius: Appearance.rounding.normal
color: Colours.palette.m3surfaceContainer
color: Colours.tPalette.m3surfaceContainer
ColumnLayout {
id: deviceStatus
@ -118,7 +118,7 @@ Item {
implicitHeight: deviceProps.implicitHeight + Appearance.padding.large * 2
radius: Appearance.rounding.normal
color: Colours.palette.m3surfaceContainer
color: Colours.tPalette.m3surfaceContainer
ColumnLayout {
id: deviceProps
@ -326,7 +326,7 @@ Item {
implicitHeight: deviceInfo.implicitHeight + Appearance.padding.large * 2
radius: Appearance.rounding.normal
color: Colours.palette.m3surfaceContainer
color: Colours.tPalette.m3surfaceContainer
ColumnLayout {
id: deviceInfo
@ -652,6 +652,8 @@ Item {
StyledSwitch {
id: toggle
cLayer: 2
}
}

4
modules/controlcenter/bluetooth/DeviceList.qml
View file

@ -167,7 +167,7 @@ ColumnLayout {
anchors.right: parent.right
implicitHeight: deviceInner.implicitHeight + Appearance.padding.normal * 2
color: Qt.alpha(Colours.palette.m3surfaceContainer, root.session.bt.active === modelData ? 1 : 0)
color: Qt.alpha(Colours.tPalette.m3surfaceContainer, root.session.bt.active === modelData ? 1 : 0)
radius: Appearance.rounding.normal
StateLayer {
@ -191,7 +191,7 @@ ColumnLayout {
implicitHeight: icon.implicitHeight + Appearance.padding.normal * 2
radius: Appearance.rounding.normal
color: device.connected ? Colours.palette.m3primaryContainer : device.modelData.bonded ? Colours.palette.m3secondaryContainer : Colours.palette.m3surfaceContainerHigh
color: device.connected ? Colours.palette.m3primaryContainer : device.modelData.bonded ? Colours.palette.m3secondaryContainer : Colours.tPalette.m3surfaceContainerHigh
StyledRect {
anchors.fill: parent

8
modules/controlcenter/bluetooth/Settings.qml
View file

@ -48,7 +48,7 @@ ColumnLayout {
implicitHeight: adapterStatus.implicitHeight + Appearance.padding.large * 2
radius: Appearance.rounding.normal
color: Colours.palette.m3surfaceContainer
color: Colours.tPalette.m3surfaceContainer
ColumnLayout {
id: adapterStatus
@ -109,7 +109,7 @@ ColumnLayout {
implicitHeight: adapterSettings.implicitHeight + Appearance.padding.large * 2
radius: Appearance.rounding.normal
color: Colours.palette.m3surfaceContainer
color: Colours.tPalette.m3surfaceContainer
ColumnLayout {
id: adapterSettings
@ -474,7 +474,7 @@ ColumnLayout {
implicitHeight: adapterInfo.implicitHeight + Appearance.padding.large * 2
radius: Appearance.rounding.normal
color: Colours.palette.m3surfaceContainer
color: Colours.tPalette.m3surfaceContainer
ColumnLayout {
id: adapterInfo
@ -535,6 +535,8 @@ ColumnLayout {
StyledSwitch {
id: toggle
cLayer: 2
}
}

2
modules/dashboard/Dash.qml
View file

@ -84,6 +84,6 @@ GridLayout {
component Rect: StyledRect {
radius: Appearance.rounding.small
color: Colours.palette.m3surfaceContainer
color: Colours.tPalette.m3surfaceContainer
}
}

10
modules/dashboard/Media.qml
View file

@ -125,7 +125,7 @@ Item {
implicitWidth: Config.dashboard.sizes.mediaCoverArtSize
implicitHeight: Config.dashboard.sizes.mediaCoverArtSize
color: Colours.palette.m3surfaceContainerHigh
color: Colours.tPalette.m3surfaceContainerHigh
radius: Appearance.rounding.full
MaterialIcon {
@ -330,7 +330,7 @@ Item {
fontSize: Appearance.font.size.larger
padding: Appearance.padding.small
fill: false
color: Colours.palette.m3surfaceContainer
color: Colours.tPalette.m3surfaceContainer
function onClicked(): void {
Players.active?.raise();
@ -348,7 +348,7 @@ Item {
implicitWidth: slider.implicitWidth * 0.6
implicitHeight: currentPlayer.implicitHeight + Appearance.padding.smaller * 2
radius: Appearance.rounding.normal
color: Colours.palette.m3surfaceContainer
color: Colours.tPalette.m3surfaceContainer
z: 1
StateLayer {
@ -373,7 +373,7 @@ Item {
Layout.fillWidth: true
Layout.maximumWidth: playerSelector.implicitWidth - implicitHeight - parent.spacing - Appearance.padding.normal * 2
text: Players.active?.identity ?? "No players"
color: Colours.palette.m3onSecondaryContainer
color: Players.active ? Colours.palette.m3onSurface : Colours.palette.m3onSurfaceVariant
elide: Text.ElideRight
}
}
@ -480,7 +480,7 @@ Item {
fontSize: Appearance.font.size.larger
padding: Appearance.padding.small
fill: false
color: Colours.palette.m3surfaceContainer
color: Colours.tPalette.m3surfaceContainer
function onClicked(): void {
Players.active?.quit();

4
modules/dashboard/dash/Media.qml
View file

@ -38,7 +38,7 @@ Item {
ShapePath {
fillColor: "transparent"
strokeColor: Colours.palette.m3surfaceContainerHigh
strokeColor: Colours.layer(Colours.palette.m3surfaceContainerHigh, 2)
strokeWidth: Config.dashboard.sizes.mediaProgressThickness
capStyle: ShapePath.RoundCap
@ -94,7 +94,7 @@ Item {
anchors.margins: Appearance.padding.large + Config.dashboard.sizes.mediaProgressThickness + Appearance.spacing.small
implicitHeight: width
color: Colours.palette.m3surfaceContainerHigh
color: Colours.tPalette.m3surfaceContainerHigh
radius: Appearance.rounding.full
MaterialIcon {

2
modules/dashboard/dash/Resources.qml
View file

@ -55,7 +55,7 @@ Row {
implicitWidth: Config.dashboard.sizes.resourceProgessThickness
color: Colours.palette.m3surfaceContainerHigh
color: Colours.layer(Colours.palette.m3surfaceContainerHigh, 2)
radius: Appearance.rounding.full
StyledRect {

2
modules/dashboard/dash/User.qml
View file

@ -21,7 +21,7 @@ Row {
implicitHeight: info.implicitHeight
radius: Appearance.rounding.large
color: Colours.palette.m3surfaceContainerHigh
color: Colours.tPalette.m3surfaceContainerHigh
MaterialIcon {
anchors.centerIn: parent

17
modules/drawers/Backgrounds.qml
View file

@ -20,45 +20,44 @@ Shape {
anchors.margins: Config.border.thickness
anchors.leftMargin: bar.implicitWidth
preferredRendererType: Shape.CurveRenderer
opacity: Colours.transparency.enabled ? Colours.transparency.base : 1
Osd.Background {
wrapper: panels.osd
wrapper: root.panels.osd
startX: root.width - panels.session.width
startX: root.width - root.panels.session.width
startY: (root.height - wrapper.height) / 2 - rounding
}
Notifications.Background {
wrapper: panels.notifications
wrapper: root.panels.notifications
startX: root.width
startY: 0
}
Session.Background {
wrapper: panels.session
wrapper: root.panels.session
startX: root.width
startY: (root.height - wrapper.height) / 2 - rounding
}
Launcher.Background {
wrapper: panels.launcher
wrapper: root.panels.launcher
startX: (root.width - wrapper.width) / 2 - rounding
startY: root.height
}
Dashboard.Background {
wrapper: panels.dashboard
wrapper: root.panels.dashboard
startX: (root.width - wrapper.width) / 2 - rounding
startY: 0
}
BarPopouts.Background {
wrapper: panels.popouts
wrapper: root.panels.popouts
invertBottomRounding: wrapper.y + wrapper.height + 1 >= root.height
startX: wrapper.x
@ -66,7 +65,7 @@ Shape {
}
Utilities.Background {
wrapper: panels.utilities
wrapper: root.panels.utilities
startX: root.width
startY: root.height

2
modules/drawers/Border.qml
View file

@ -15,7 +15,7 @@ Item {
StyledRect {
anchors.fill: parent
color: Colours.alpha(Colours.palette.m3surface, false)
color: Colours.palette.m3surface
layer.enabled: true
layer.effect: MultiEffect {

1
modules/drawers/Drawers.qml
View file

@ -88,6 +88,7 @@ Variants {
Item {
anchors.fill: parent
opacity: Colours.transparency.enabled ? Colours.transparency.base : 1
layer.enabled: true
layer.effect: MultiEffect {
shadowEnabled: true

2
modules/launcher/Content.qml
View file

@ -44,7 +44,7 @@ Item {
StyledRect {
id: searchWrapper
color: Colours.alpha(Colours.palette.m3surfaceContainer, true)
color: Colours.tPalette.m3surfaceContainer
radius: Appearance.rounding.full
anchors.left: parent.left

2
modules/launcher/items/ActionItem.qml
View file

@ -58,7 +58,7 @@ Item {
text: root.modelData?.desc ?? ""
font.pointSize: Appearance.font.size.small
color: Colours.alpha(Colours.palette.m3outline, true)
color: Colours.tPalette.m3outline
elide: Text.ElideRight
width: root.width - icon.width - Appearance.rounding.normal * 2

2
modules/launcher/items/AppItem.qml
View file

@ -61,7 +61,7 @@ Item {
text: (root.modelData?.comment || root.modelData?.genericName || root.modelData?.name) ?? ""
font.pointSize: Appearance.font.size.small
color: Colours.alpha(Colours.palette.m3outline, true)
color: Colours.tPalette.m3outline
elide: Text.ElideRight
width: root.width - icon.width - Appearance.rounding.normal * 2

2
modules/launcher/items/VariantItem.qml
View file

@ -58,7 +58,7 @@ Item {
text: root.modelData?.description ?? ""
font.pointSize: Appearance.font.size.small
color: Colours.alpha(Colours.palette.m3outline, true)
color: Colours.tPalette.m3outline
elide: Text.ElideRight
width: root.width - icon.width - Appearance.rounding.normal * 2

14
modules/lock/Backgrounds.qml
View file

@ -37,7 +37,7 @@ Item {
id: base
anchors.fill: parent
color: Colours.alpha(Colours.palette.m3surface, false)
color: Colours.tPalette.m3surface
layer.enabled: true
layer.effect: MultiEffect {
@ -86,7 +86,7 @@ Item {
readonly property real roundingY: flatten ? height / 2 : rounding
strokeWidth: -1
fillColor: Colours.palette.m3surface
fillColor: Colours.tPalette.m3surface
startX: (innerMask.width - width) / 2 - rounding
@ -153,7 +153,7 @@ Item {
readonly property real roundingY: flatten ? height / 2 : rounding
strokeWidth: -1
fillColor: Colours.palette.m3surface
fillColor: Colours.tPalette.m3surface
startX: (innerMask.width - width) / 2 - rounding
startY: Math.ceil(innerMask.height)
@ -221,7 +221,7 @@ Item {
readonly property real roundingY: height < rounding * 2 ? height / 2 : rounding
strokeWidth: -1
fillColor: Colours.palette.m3surface
fillColor: Colours.tPalette.m3surface
startY: Math.ceil(innerMask.height) - height - roundingY
@ -286,7 +286,7 @@ Item {
readonly property real roundingY: height < rounding * 2 ? height / 2 : rounding
strokeWidth: -1
fillColor: root.isNormal ? Colours.palette.m3surface : "transparent"
fillColor: root.isNormal ? Colours.tPalette.m3surface : "transparent"
startX: root.isLarge ? 0 : Math.ceil(innerMask.width)
startY: root.isLarge ? height + roundingY : Math.ceil(innerMask.height) - height - roundingY
@ -351,7 +351,7 @@ Item {
readonly property real roundingY: height < rounding * 2 ? height / 2 : rounding
strokeWidth: -1
fillColor: root.isLarge ? Colours.palette.m3surface : "transparent"
fillColor: root.isLarge ? Colours.tPalette.m3surface : "transparent"
startX: Math.ceil(innerMask.width)
startY: Math.ceil(innerMask.height) - height - rounding
@ -416,7 +416,7 @@ Item {
readonly property real roundingY: height < rounding * 2 ? height / 2 : rounding
strokeWidth: -1
fillColor: root.isLarge ? Colours.palette.m3surface : "transparent"
fillColor: root.isLarge ? Colours.tPalette.m3surface : "transparent"
startX: Math.ceil(innerMask.width)
startY: height + rounding

4
modules/lock/Input.qml
View file

@ -31,7 +31,7 @@ ColumnLayout {
implicitHeight: Config.lock.sizes.faceSize
radius: Appearance.rounding.large
color: Colours.palette.m3surfaceContainer
color: Colours.tPalette.m3surfaceContainer
MaterialIcon {
anchors.centerIn: parent
@ -77,7 +77,7 @@ ColumnLayout {
Layout.preferredHeight: Appearance.font.size.normal + Appearance.padding.large * 2
focus: true
color: Colours.palette.m3surfaceContainer
color: Colours.tPalette.m3surfaceContainer
radius: Appearance.rounding.small
clip: true

4
modules/lock/MediaPlaying.qml
View file

@ -47,7 +47,7 @@ RowLayout {
ClippingWrapperRectangle {
anchors.fill: parent
color: Colours.palette.m3surfaceContainerHigh
color: Colours.tPalette.m3surfaceContainerHigh
radius: Appearance.rounding.small
rotation: 9
@ -91,7 +91,7 @@ RowLayout {
StyledClippingRect {
anchors.fill: parent
color: Colours.palette.m3surfaceContainerHigh
color: Colours.tPalette.m3surfaceContainerHigh
radius: Appearance.rounding.small
border.width: Config.lock.sizes.mediaCoverBorder

4
modules/lock/Notification.qml
View file

@ -19,7 +19,7 @@ StyledRect {
readonly property bool hasAppIcon: modelData.appIcon.length > 0
readonly property int nonAnimHeight: Math.max(image.height, details.implicitHeight) + Appearance.padding.normal * 2
color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3secondaryContainer : Colours.palette.m3surfaceContainer
color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3secondaryContainer : Colours.tPalette.m3surfaceContainer
radius: Appearance.rounding.normal
implicitWidth: Config.notifs.sizes.width
@ -113,7 +113,7 @@ StyledRect {
sourceComponent: StyledRect {
radius: Appearance.rounding.full
color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3error : root.modelData.urgency === NotificationUrgency.Low ? Colours.palette.m3surfaceContainerHighest : Colours.palette.m3tertiaryContainer
color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3error : root.modelData.urgency === NotificationUrgency.Low ? Colours.tPalette.m3surfaceContainerHighest : Colours.palette.m3tertiaryContainer
implicitWidth: root.hasImage ? Config.notifs.sizes.badge : Config.notifs.sizes.image
implicitHeight: root.hasImage ? Config.notifs.sizes.badge : Config.notifs.sizes.image

6
modules/notifications/Notification.qml
View file

@ -20,7 +20,7 @@ StyledRect {
readonly property int nonAnimHeight: summary.implicitHeight + (root.expanded ? appName.height + body.height + actions.height + actions.anchors.topMargin : bodyPreview.height) + inner.anchors.margins * 2
property bool expanded
color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3secondaryContainer : Colours.palette.m3surfaceContainer
color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3secondaryContainer : Colours.tPalette.m3surfaceContainer
radius: Appearance.rounding.normal
implicitWidth: Config.notifs.sizes.width
implicitHeight: inner.implicitHeight
@ -147,7 +147,7 @@ StyledRect {
sourceComponent: StyledRect {
radius: Appearance.rounding.full
color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3error : root.modelData.urgency === NotificationUrgency.Low ? Colours.palette.m3surfaceContainerHighest : Colours.palette.m3tertiaryContainer
color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3error : root.modelData.urgency === NotificationUrgency.Low ? Colours.layer(Colours.palette.m3surfaceContainerHighest, 2) : Colours.palette.m3tertiaryContainer
implicitWidth: root.hasImage ? Config.notifs.sizes.badge : Config.notifs.sizes.image
implicitHeight: root.hasImage ? Config.notifs.sizes.badge : Config.notifs.sizes.image
@ -450,7 +450,7 @@ StyledRect {
required property var modelData
radius: Appearance.rounding.full
color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3secondary : Colours.palette.m3surfaceContainerHigh
color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3secondary : Colours.tPalette.m3surfaceContainerHigh
Layout.preferredWidth: actionText.width + Appearance.padding.normal * 2
Layout.preferredHeight: actionText.height + Appearance.padding.small * 2

2
modules/session/Content.qml
View file

@ -93,7 +93,7 @@ Column {
implicitHeight: Config.session.sizes.button
radius: Appearance.rounding.large
color: button.activeFocus ? Colours.palette.m3secondaryContainer : Colours.palette.m3surfaceContainer
color: button.activeFocus ? Colours.palette.m3secondaryContainer : Colours.tPalette.m3surfaceContainer
Keys.onEnterPressed: Quickshell.execDetached(button.command)
Keys.onReturnPressed: Quickshell.execDetached(button.command)

1
modules/utilities/Background.qml
View file

@ -1,6 +1,5 @@
import qs.services
import qs.config
import Quickshell
import QtQuick
import QtQuick.Shapes

2
modules/windowinfo/Buttons.qml
View file

@ -81,7 +81,7 @@ ColumnLayout {
readonly property int wsId: Math.floor((Hyprland.activeWsId - 1) / 10) * 10 + index + 1
readonly property bool isCurrent: root.client?.workspace.id === wsId
color: isCurrent ? Colours.palette.m3surfaceContainerHighest : Colours.palette.m3tertiaryContainer
color: isCurrent ? Colours.tPalette.m3surfaceContainerHighest : Colours.palette.m3tertiaryContainer
onColor: isCurrent ? Colours.palette.m3onSurface : Colours.palette.m3onTertiaryContainer
text: wsId
disabled: isCurrent

2
modules/windowinfo/Preview.qml
View file

@ -29,7 +29,7 @@ Item {
implicitWidth: view.implicitWidth
color: Colours.palette.m3surfaceContainer
color: Colours.tPalette.m3surfaceContainer
radius: Appearance.rounding.small
Loader {

4
modules/windowinfo/WindowInfo.qml
View file

@ -38,7 +38,7 @@ Item {
Layout.fillWidth: true
Layout.fillHeight: true
color: Colours.palette.m3surfaceContainer
color: Colours.tPalette.m3surfaceContainer
radius: Appearance.rounding.normal
Details {
@ -50,7 +50,7 @@ Item {
Layout.fillWidth: true
Layout.preferredHeight: buttons.implicitHeight
color: Colours.palette.m3surfaceContainer
color: Colours.tPalette.m3surfaceContainer
radius: Appearance.rounding.normal
Buttons {

112
services/Colours.qml
View file

@ -1,32 +1,41 @@
pragma Singleton
pragma ComponentBehavior: Bound
import qs.config
import qs.utils
import Quickshell
import Quickshell.Io
import QtQuick
import QtQuick.Controls
Singleton {
id: root
readonly property list<string> colourNames: ["rosewater", "flamingo", "pink", "mauve", "red", "maroon", "peach", "yellow", "green", "teal", "sky", "sapphire", "blue", "lavender"]
property bool showPreview
property string scheme
property string flavour
property bool light
readonly property bool light: showPreview ? previewLight : currentLight
property bool currentLight
property bool previewLight
readonly property M3Palette palette: showPreview ? preview : current
readonly property M3TPalette tPalette: M3TPalette {}
readonly property M3Palette current: M3Palette {}
readonly property M3Palette preview: M3Palette {}
readonly property Transparency transparency: Transparency {}
function alpha(c: color, layer: bool): color {
function alterColour(c: color, a: real, layer: int): color {
const luminance = Math.sqrt(0.299 * (c.r ** 2) + 0.587 * (c.g ** 2) + 0.114 * (c.b ** 2));
const scale = (luminance + (!light || layer == 1 ? 1 : -layer / 2) * (light ? 0.1 : 0.3) * (1 - transparency.base)) / luminance;
const r = Math.max(0, Math.min(1, c.r * scale));
const g = Math.max(0, Math.min(1, c.g * scale));
const b = Math.max(0, Math.min(1, c.b * scale));
return Qt.rgba(r, g, b, a);
}
function layer(c: color, layer: var): color {
if (!transparency.enabled)
return c;
c = Qt.rgba(c.r, c.g, c.b, layer ? transparency.layers : transparency.base);
if (layer)
c.hsvValue = Math.max(0, Math.min(1, c.hslLightness + (light ? -0.2 : 0.2))); // TODO: edit based on colours (hue or smth)
return c;
return layer === 0 ? Qt.alpha(c, transparency.base) : alterColour(c, transparency.layers, layer ?? 1);
}
function on(c: color): color {
@ -42,12 +51,13 @@ Singleton {
if (!isPreview) {
root.scheme = scheme.name;
flavour = scheme.flavour;
currentLight = scheme.mode === "light";
} else {
previewLight = scheme.mode === "light";
}
light = scheme.mode === "light";
for (const [name, colour] of Object.entries(scheme.colours)) {
const propName = colourNames.includes(name) ? name : `m3${name}`;
const propName = `m3${name}`;
if (colours.hasOwnProperty(propName))
colours[propName] = `#${colour}`;
}
@ -65,9 +75,66 @@ Singleton {
}
component Transparency: QtObject {
readonly property bool enabled: false
readonly property real base: 0.78
readonly property real layers: 0.58
property bool enabled: true
property real base: 0.8
property real layers: 0.75
}
component M3TPalette: M3Palette {
m3primary_paletteKeyColor: root.layer(root.palette.m3primary_paletteKeyColor)
m3secondary_paletteKeyColor: root.layer(root.palette.m3secondary_paletteKeyColor)
m3tertiary_paletteKeyColor: root.layer(root.palette.m3tertiary_paletteKeyColor)
m3neutral_paletteKeyColor: root.layer(root.palette.m3neutral_paletteKeyColor)
m3neutral_variant_paletteKeyColor: root.layer(root.palette.m3neutral_variant_paletteKeyColor)
m3background: root.layer(root.palette.m3background, 0)
m3onBackground: root.layer(root.palette.m3onBackground)
m3surface: root.layer(root.palette.m3surface, 0)
m3surfaceDim: root.layer(root.palette.m3surfaceDim, 0)
m3surfaceBright: root.layer(root.palette.m3surfaceBright, 0)
m3surfaceContainerLowest: root.layer(root.palette.m3surfaceContainerLowest)
m3surfaceContainerLow: root.layer(root.palette.m3surfaceContainerLow)
m3surfaceContainer: root.layer(root.palette.m3surfaceContainer)
m3surfaceContainerHigh: root.layer(root.palette.m3surfaceContainerHigh)
m3surfaceContainerHighest: root.layer(root.palette.m3surfaceContainerHighest)
m3onSurface: root.layer(root.palette.m3onSurface)
m3surfaceVariant: root.layer(root.palette.m3surfaceVariant, 0)
m3onSurfaceVariant: root.layer(root.palette.m3onSurfaceVariant)
m3inverseSurface: root.layer(root.palette.m3inverseSurface, 0)
m3inverseOnSurface: root.layer(root.palette.m3inverseOnSurface)
m3outline: root.layer(root.palette.m3outline)
m3outlineVariant: root.layer(root.palette.m3outlineVariant)
m3shadow: root.layer(root.palette.m3shadow)
m3scrim: root.layer(root.palette.m3scrim)
m3surfaceTint: root.layer(root.palette.m3surfaceTint)
m3primary: root.layer(root.palette.m3primary)
m3onPrimary: root.layer(root.palette.m3onPrimary)
m3primaryContainer: root.layer(root.palette.m3primaryContainer)
m3onPrimaryContainer: root.layer(root.palette.m3onPrimaryContainer)
m3inversePrimary: root.layer(root.palette.m3inversePrimary)
m3secondary: root.layer(root.palette.m3secondary)
m3onSecondary: root.layer(root.palette.m3onSecondary)
m3secondaryContainer: root.layer(root.palette.m3secondaryContainer)
m3onSecondaryContainer: root.layer(root.palette.m3onSecondaryContainer)
m3tertiary: root.layer(root.palette.m3tertiary)
m3onTertiary: root.layer(root.palette.m3onTertiary)
m3tertiaryContainer: root.layer(root.palette.m3tertiaryContainer)
m3onTertiaryContainer: root.layer(root.palette.m3onTertiaryContainer)
m3error: root.layer(root.palette.m3error)
m3onError: root.layer(root.palette.m3onError)
m3errorContainer: root.layer(root.palette.m3errorContainer)
m3onErrorContainer: root.layer(root.palette.m3onErrorContainer)
m3primaryFixed: root.layer(root.palette.m3primaryFixed)
m3primaryFixedDim: root.layer(root.palette.m3primaryFixedDim)
m3onPrimaryFixed: root.layer(root.palette.m3onPrimaryFixed)
m3onPrimaryFixedVariant: root.layer(root.palette.m3onPrimaryFixedVariant)
m3secondaryFixed: root.layer(root.palette.m3secondaryFixed)
m3secondaryFixedDim: root.layer(root.palette.m3secondaryFixedDim)
m3onSecondaryFixed: root.layer(root.palette.m3onSecondaryFixed)
m3onSecondaryFixedVariant: root.layer(root.palette.m3onSecondaryFixedVariant)
m3tertiaryFixed: root.layer(root.palette.m3tertiaryFixed)
m3tertiaryFixedDim: root.layer(root.palette.m3tertiaryFixedDim)
m3onTertiaryFixed: root.layer(root.palette.m3onTertiaryFixed)
m3onTertiaryFixedVariant: root.layer(root.palette.m3onTertiaryFixedVariant)
}
component M3Palette: QtObject {
@ -125,20 +192,5 @@ Singleton {
property color m3tertiaryFixedDim: "#ECB8CD"
property color m3onTertiaryFixed: "#301121"
property color m3onTertiaryFixedVariant: "#613B4C"
property color rosewater: "#B8C4FF"
property color flamingo: "#DBB9F8"
property color pink: "#F3B3E3"
property color mauve: "#D0BDFE"
property color red: "#F8B3D1"
property color maroon: "#F6B2DA"
property color peach: "#E4B7F4"
property color yellow: "#C3C0FF"
property color green: "#ADC6FF"
property color teal: "#D4BBFC"
property color sky: "#CBBEFF"
property color sapphire: "#BDC2FF"
property color blue: "#C7BFFF"
property color lavender: "#EAB5ED"
}
}