internal: transparency support coming soon™

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

View file

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

View file

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

View file

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

View file

@ -8,12 +8,14 @@ import QtQuick.Shapes
Switch { Switch {
id: root id: root
property int cLayer: 1
implicitWidth: implicitIndicatorWidth implicitWidth: implicitIndicatorWidth
implicitHeight: implicitIndicatorHeight implicitHeight: implicitIndicatorHeight
indicator: StyledRect { indicator: StyledRect {
radius: Appearance.rounding.full 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 implicitWidth: implicitHeight * 1.7
implicitHeight: Appearance.font.size.normal + Appearance.padding.smaller * 2 implicitHeight: Appearance.font.size.normal + Appearance.padding.smaller * 2

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -51,7 +51,7 @@ Item {
readonly property Workspace start: root.workspaces[modelData.start - 1 - root.groupOffset] ?? null readonly property Workspace start: root.workspaces[modelData.start - 1 - root.groupOffset] ?? null
readonly property Workspace end: root.workspaces[modelData.end - 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 radius: Config.bar.workspaces.rounded ? Appearance.rounding.full : 0
x: start?.x ?? 0 x: start?.x ?? 0

View file

@ -112,7 +112,7 @@ Column {
implicitWidth: saver.implicitHeight + balance.implicitHeight + perf.implicitHeight + Appearance.padding.normal * 2 + Appearance.spacing.large * 2 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 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 radius: Appearance.rounding.full
StyledRect { StyledRect {

View file

@ -108,7 +108,7 @@ ColumnLayout {
implicitHeight: connectIcon.implicitHeight + Appearance.padding.small implicitHeight: connectIcon.implicitHeight + Appearance.padding.small
radius: Appearance.rounding.full 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 { StyledBusyIndicator {
anchors.centerIn: parent anchors.centerIn: parent

View file

@ -102,7 +102,7 @@ ColumnLayout {
implicitHeight: connectIcon.implicitHeight + Appearance.padding.small implicitHeight: connectIcon.implicitHeight + Appearance.padding.small
radius: Appearance.rounding.full 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 { StyledBusyIndicator {
anchors.centerIn: parent anchors.centerIn: parent
@ -156,7 +156,7 @@ ColumnLayout {
implicitHeight: rescanBtn.implicitHeight + Appearance.padding.small * 2 implicitHeight: rescanBtn.implicitHeight + Appearance.padding.small * 2
radius: Appearance.rounding.normal radius: Appearance.rounding.normal
color: Network.scanning ? Colours.palette.m3surfaceContainer : Colours.palette.m3primaryContainer color: Network.scanning ? Colours.tPalette.m3surfaceContainer : Colours.palette.m3primaryContainer
StateLayer { StateLayer {
color: Network.scanning ? Colours.palette.m3onSurface : Colours.palette.m3onPrimaryContainer color: Network.scanning ? Colours.palette.m3onSurface : Colours.palette.m3onPrimaryContainer

View file

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

View file

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

View file

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

View file

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

View file

@ -167,7 +167,7 @@ ColumnLayout {
anchors.right: parent.right anchors.right: parent.right
implicitHeight: deviceInner.implicitHeight + Appearance.padding.normal * 2 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 radius: Appearance.rounding.normal
StateLayer { StateLayer {
@ -191,7 +191,7 @@ ColumnLayout {
implicitHeight: icon.implicitHeight + Appearance.padding.normal * 2 implicitHeight: icon.implicitHeight + Appearance.padding.normal * 2
radius: Appearance.rounding.normal 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 { StyledRect {
anchors.fill: parent anchors.fill: parent

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -19,7 +19,7 @@ StyledRect {
readonly property bool hasAppIcon: modelData.appIcon.length > 0 readonly property bool hasAppIcon: modelData.appIcon.length > 0
readonly property int nonAnimHeight: Math.max(image.height, details.implicitHeight) + Appearance.padding.normal * 2 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 radius: Appearance.rounding.normal
implicitWidth: Config.notifs.sizes.width implicitWidth: Config.notifs.sizes.width
@ -113,7 +113,7 @@ StyledRect {
sourceComponent: StyledRect { sourceComponent: StyledRect {
radius: Appearance.rounding.full 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 implicitWidth: root.hasImage ? Config.notifs.sizes.badge : Config.notifs.sizes.image
implicitHeight: root.hasImage ? Config.notifs.sizes.badge : Config.notifs.sizes.image implicitHeight: root.hasImage ? Config.notifs.sizes.badge : Config.notifs.sizes.image

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 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 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 radius: Appearance.rounding.normal
implicitWidth: Config.notifs.sizes.width implicitWidth: Config.notifs.sizes.width
implicitHeight: inner.implicitHeight implicitHeight: inner.implicitHeight
@ -147,7 +147,7 @@ StyledRect {
sourceComponent: StyledRect { sourceComponent: StyledRect {
radius: Appearance.rounding.full 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 implicitWidth: root.hasImage ? Config.notifs.sizes.badge : Config.notifs.sizes.image
implicitHeight: 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 required property var modelData
radius: Appearance.rounding.full 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.preferredWidth: actionText.width + Appearance.padding.normal * 2
Layout.preferredHeight: actionText.height + Appearance.padding.small * 2 Layout.preferredHeight: actionText.height + Appearance.padding.small * 2

View file

@ -93,7 +93,7 @@ Column {
implicitHeight: Config.session.sizes.button implicitHeight: Config.session.sizes.button
radius: Appearance.rounding.large 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.onEnterPressed: Quickshell.execDetached(button.command)
Keys.onReturnPressed: Quickshell.execDetached(button.command) Keys.onReturnPressed: Quickshell.execDetached(button.command)

View file

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

View file

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

View file

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

View file

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

View file

@ -1,32 +1,41 @@
pragma Singleton pragma Singleton
pragma ComponentBehavior: Bound
import qs.config
import qs.utils import qs.utils
import Quickshell import Quickshell
import Quickshell.Io import Quickshell.Io
import QtQuick import QtQuick
import QtQuick.Controls
Singleton { Singleton {
id: root 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 bool showPreview
property string scheme property string scheme
property string flavour 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 M3Palette palette: showPreview ? preview : current
readonly property M3TPalette tPalette: M3TPalette {}
readonly property M3Palette current: M3Palette {} readonly property M3Palette current: M3Palette {}
readonly property M3Palette preview: M3Palette {} readonly property M3Palette preview: M3Palette {}
readonly property Transparency transparency: Transparency {} 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) if (!transparency.enabled)
return c; return c;
c = Qt.rgba(c.r, c.g, c.b, layer ? transparency.layers : transparency.base);
if (layer) return layer === 0 ? Qt.alpha(c, transparency.base) : alterColour(c, transparency.layers, layer ?? 1);
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;
} }
function on(c: color): color { function on(c: color): color {
@ -42,12 +51,13 @@ Singleton {
if (!isPreview) { if (!isPreview) {
root.scheme = scheme.name; root.scheme = scheme.name;
flavour = scheme.flavour; 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)) { 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)) if (colours.hasOwnProperty(propName))
colours[propName] = `#${colour}`; colours[propName] = `#${colour}`;
} }
@ -65,9 +75,66 @@ Singleton {
} }
component Transparency: QtObject { component Transparency: QtObject {
readonly property bool enabled: false property bool enabled: true
readonly property real base: 0.78 property real base: 0.8
readonly property real layers: 0.58 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 { component M3Palette: QtObject {
@ -125,20 +192,5 @@ Singleton {
property color m3tertiaryFixedDim: "#ECB8CD" property color m3tertiaryFixedDim: "#ECB8CD"
property color m3onTertiaryFixed: "#301121" property color m3onTertiaryFixed: "#301121"
property color m3onTertiaryFixedVariant: "#613B4C" 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"
} }
} }