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

feat: replace qml config module with c++ module

Browse source
This commit is contained in:
2 * r + 2 * t 2026-04-11 21:18:56 +10:00
parent 0429650a6e
commit 3a37d77d1f
237 changed files with 2395 additions and 3626 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
components/Anim.qml
View file

@ -1,8 +1,8 @@
import QtQuick import QtQuick
import qs.config import Caelestia.Config
NumberAnimation { NumberAnimation {
duration: Appearance.anim.durations.normal duration: Tokens.anim.durations.normal
easing.type: Easing.BezierSpline easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.standard easing.bezierCurve: Tokens.anim.curves.standard
} }

6
components/CAnim.qml
View file

@ -1,8 +1,8 @@
import QtQuick import QtQuick
import qs.config import Caelestia.Config
ColorAnimation { ColorAnimation {
duration: Appearance.anim.durations.normal duration: Tokens.anim.durations.normal
easing.type: Easing.BezierSpline easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.standard easing.bezierCurve: Tokens.anim.curves.standard
} }

8
components/ConnectionHeader.qml
View file

@ -1,7 +1,7 @@
import QtQuick import QtQuick
import QtQuick.Layouts import QtQuick.Layouts
import qs.components import qs.components
import qs.config import Caelestia.Config
ColumnLayout { ColumnLayout {
id: root id: root
@ -9,14 +9,14 @@ ColumnLayout {
required property string icon required property string icon
required property string title required property string title
spacing: Appearance.spacing.normal spacing: Tokens.spacing.normal
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
MaterialIcon { MaterialIcon {
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
animate: true animate: true
text: root.icon text: root.icon
font.pointSize: Appearance.font.size.extraLarge * 3 font.pointSize: Tokens.font.size.extraLarge * 3
font.bold: true font.bold: true
} }
@ -24,7 +24,7 @@ ColumnLayout {
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
animate: true animate: true
text: root.title text: root.title
font.pointSize: Appearance.font.size.large font.pointSize: Tokens.font.size.large
font.bold: true font.bold: true
} }
} }

18
components/ConnectionInfoSection.qml
View file

@ -2,14 +2,14 @@ import QtQuick
import QtQuick.Layouts import QtQuick.Layouts
import qs.components import qs.components
import qs.services import qs.services
import qs.config import Caelestia.Config
ColumnLayout { ColumnLayout {
id: root id: root
required property var deviceDetails required property var deviceDetails
spacing: Appearance.spacing.small / 2 spacing: Tokens.spacing.small / 2
StyledText { StyledText {
text: qsTr("IP Address") text: qsTr("IP Address")
@ -18,40 +18,40 @@ ColumnLayout {
StyledText { StyledText {
text: root.deviceDetails?.ipAddress || qsTr("Not available") text: root.deviceDetails?.ipAddress || qsTr("Not available")
color: Colours.palette.m3outline color: Colours.palette.m3outline
font.pointSize: Appearance.font.size.small font.pointSize: Tokens.font.size.small
} }
StyledText { StyledText {
Layout.topMargin: Appearance.spacing.normal Layout.topMargin: Tokens.spacing.normal
text: qsTr("Subnet Mask") text: qsTr("Subnet Mask")
} }
StyledText { StyledText {
text: root.deviceDetails?.subnet || qsTr("Not available") text: root.deviceDetails?.subnet || qsTr("Not available")
color: Colours.palette.m3outline color: Colours.palette.m3outline
font.pointSize: Appearance.font.size.small font.pointSize: Tokens.font.size.small
} }
StyledText { StyledText {
Layout.topMargin: Appearance.spacing.normal Layout.topMargin: Tokens.spacing.normal
text: qsTr("Gateway") text: qsTr("Gateway")
} }
StyledText { StyledText {
text: root.deviceDetails?.gateway || qsTr("Not available") text: root.deviceDetails?.gateway || qsTr("Not available")
color: Colours.palette.m3outline color: Colours.palette.m3outline
font.pointSize: Appearance.font.size.small font.pointSize: Tokens.font.size.small
} }
StyledText { StyledText {
Layout.topMargin: Appearance.spacing.normal Layout.topMargin: Tokens.spacing.normal
text: qsTr("DNS Servers") text: qsTr("DNS Servers")
} }
StyledText { StyledText {
text: (root.deviceDetails && root.deviceDetails.dns && root.deviceDetails.dns.length > 0) ? root.deviceDetails.dns.join(", ") : qsTr("Not available") text: (root.deviceDetails && root.deviceDetails.dns && root.deviceDetails.dns.length > 0) ? root.deviceDetails.dns.join(", ") : qsTr("Not available")
color: Colours.palette.m3outline color: Colours.palette.m3outline
font.pointSize: Appearance.font.size.small font.pointSize: Tokens.font.size.small
wrapMode: Text.Wrap wrapMode: Text.Wrap
Layout.maximumWidth: parent.width Layout.maximumWidth: parent.width
} }

6
components/MaterialIcon.qml
View file

@ -1,12 +1,12 @@
import qs.services import qs.services
import qs.config import Caelestia.Config
StyledText { StyledText {
property real fill property real fill
property int grade: Colours.light ? 0 : -25 property int grade: Colours.light ? 0 : -25
font.family: Appearance.font.family.material font.family: Tokens.font.family.material
font.pointSize: Appearance.font.size.larger font.pointSize: Tokens.font.size.larger
font.variableAxes: ({ font.variableAxes: ({
FILL: fill.toFixed(1), FILL: fill.toFixed(1),
GRAD: grade, GRAD: grade,

8
components/PropertyRow.qml
View file

@ -2,7 +2,7 @@ import QtQuick
import QtQuick.Layouts import QtQuick.Layouts
import qs.components import qs.components
import qs.services import qs.services
import qs.config import Caelestia.Config
ColumnLayout { ColumnLayout {
id: root id: root
@ -11,16 +11,16 @@ ColumnLayout {
required property string value required property string value
property bool showTopMargin: false property bool showTopMargin: false
spacing: Appearance.spacing.small / 2 spacing: Tokens.spacing.small / 2
StyledText { StyledText {
Layout.topMargin: root.showTopMargin ? Appearance.spacing.normal : 0 Layout.topMargin: root.showTopMargin ? Tokens.spacing.normal : 0
text: root.label text: root.label
} }
StyledText { StyledText {
text: root.value text: root.value
color: Colours.palette.m3outline color: Colours.palette.m3outline
font.pointSize: Appearance.font.size.small font.pointSize: Tokens.font.size.small
} }
} }

10
components/SectionContainer.qml
View file

@ -2,19 +2,19 @@ import QtQuick
import QtQuick.Layouts import QtQuick.Layouts
import qs.components import qs.components
import qs.services import qs.services
import qs.config import Caelestia.Config
StyledRect { StyledRect {
id: root id: root
default property alias content: contentColumn.data default property alias content: contentColumn.data
property real contentSpacing: Appearance.spacing.larger property real contentSpacing: Tokens.spacing.larger
property bool alignTop: false property bool alignTop: false
Layout.fillWidth: true Layout.fillWidth: true
implicitHeight: contentColumn.implicitHeight + Appearance.padding.large * 2 implicitHeight: contentColumn.implicitHeight + Tokens.padding.large * 2
radius: Appearance.rounding.normal radius: Tokens.rounding.normal
color: Colours.transparency.enabled ? Colours.layer(Colours.palette.m3surfaceContainer, 2) : Colours.palette.m3surfaceContainerHigh color: Colours.transparency.enabled ? Colours.layer(Colours.palette.m3surfaceContainer, 2) : Colours.palette.m3surfaceContainerHigh
ColumnLayout { ColumnLayout {
@ -24,7 +24,7 @@ StyledRect {
anchors.right: parent.right anchors.right: parent.right
anchors.top: root.alignTop ? parent.top : undefined anchors.top: root.alignTop ? parent.top : undefined
anchors.verticalCenter: root.alignTop ? undefined : parent.verticalCenter anchors.verticalCenter: root.alignTop ? undefined : parent.verticalCenter
anchors.margins: Appearance.padding.large anchors.margins: Tokens.padding.large
spacing: root.contentSpacing spacing: root.contentSpacing
} }

6
components/SectionHeader.qml
View file

@ -2,7 +2,7 @@ import QtQuick
import QtQuick.Layouts import QtQuick.Layouts
import qs.components import qs.components
import qs.services import qs.services
import qs.config import Caelestia.Config
ColumnLayout { ColumnLayout {
id: root id: root
@ -13,9 +13,9 @@ ColumnLayout {
spacing: 0 spacing: 0
StyledText { StyledText {
Layout.topMargin: Appearance.spacing.large Layout.topMargin: Tokens.spacing.large
text: root.title text: root.title
font.pointSize: Appearance.font.size.larger font.pointSize: Tokens.font.size.larger
font.weight: 500 font.weight: 500
} }

6
components/StateLayer.qml
View file

@ -1,6 +1,6 @@
import QtQuick import QtQuick
import qs.services import qs.services
import qs.config import Caelestia.Config
MouseArea { MouseArea {
id: root id: root
@ -63,7 +63,7 @@ MouseArea {
properties: "implicitWidth,implicitHeight" properties: "implicitWidth,implicitHeight"
from: 0 from: 0
to: rippleAnim.radius * 2 to: rippleAnim.radius * 2
easing.bezierCurve: Appearance.anim.curves.standardDecel easing.bezierCurve: Tokens.anim.curves.standardDecel
} }
Anim { Anim {
target: ripple target: ripple
@ -83,7 +83,7 @@ MouseArea {
StyledRect { StyledRect {
id: ripple id: ripple
radius: Appearance.rounding.full radius: Tokens.rounding.full
color: root.color color: root.color
opacity: 0 opacity: 0

12
components/StyledText.qml
View file

@ -2,7 +2,7 @@ pragma ComponentBehavior: Bound
import QtQuick import QtQuick
import qs.services import qs.services
import qs.config import Caelestia.Config
Text { Text {
id: root id: root
@ -11,13 +11,13 @@ Text {
property string animateProp: "scale" property string animateProp: "scale"
property real animateFrom: 0 property real animateFrom: 0
property real animateTo: 1 property real animateTo: 1
property int animateDuration: Appearance.anim.durations.normal property int animateDuration: Tokens.anim.durations.normal
renderType: Text.NativeRendering renderType: Text.NativeRendering
textFormat: Text.PlainText textFormat: Text.PlainText
color: Colours.palette.m3onSurface color: Colours.palette.m3onSurface
font.family: Appearance.font.family.sans font.family: Tokens.font.family.sans
font.pointSize: Appearance.font.size.smaller font.pointSize: Tokens.font.size.smaller
Behavior on color { Behavior on color {
CAnim {} CAnim {}
@ -29,12 +29,12 @@ Text {
SequentialAnimation { SequentialAnimation {
Anim { Anim {
to: root.animateFrom to: root.animateFrom
easing.bezierCurve: Appearance.anim.curves.standardAccel easing.bezierCurve: Tokens.anim.curves.standardAccel
} }
PropertyAction {} PropertyAction {}
Anim { Anim {
to: root.animateTo to: root.animateTo
easing.bezierCurve: Appearance.anim.curves.standardDecel easing.bezierCurve: Tokens.anim.curves.standardDecel
} }
} }
} }

11
components/containers/StyledWindow.qml
View file

@ -1,11 +1,22 @@
import Quickshell import Quickshell
import Quickshell.Wayland import Quickshell.Wayland
import Caelestia.Config
// qmllint disable uncreatable-type // qmllint disable uncreatable-type
PanelWindow { PanelWindow {
// qmllint enable uncreatable-type // qmllint enable uncreatable-type
id: root
required property string name required property string name
default property alias contentData: scope.data
WlrLayershell.namespace: `caelestia-${name}` WlrLayershell.namespace: `caelestia-${name}`
color: "transparent" color: "transparent"
ConfigScope {
id: scope
anchors.fill: parent
screen: root.screen.name
}
} }

12
components/controls/CircularIndicator.qml
View file

@ -3,7 +3,7 @@ import QtQuick
import QtQuick.Templates import QtQuick.Templates
import Caelestia.Internal import Caelestia.Internal
import qs.services import qs.services
import qs.config import Caelestia.Config
BusyIndicator { BusyIndicator {
id: root id: root
@ -19,8 +19,8 @@ BusyIndicator {
Completing Completing
} }
property real implicitSize: Appearance.font.size.normal * 3 property real implicitSize: Tokens.font.size.normal * 3
property real strokeWidth: Appearance.padding.small * 0.8 property real strokeWidth: Tokens.padding.small * 0.8
property color fgColour: Colours.palette.m3primary property color fgColour: Colours.palette.m3primary
property color bgColour: Colours.palette.m3secondaryContainer property color bgColour: Colours.palette.m3secondaryContainer
@ -64,7 +64,7 @@ BusyIndicator {
transitions: Transition { transitions: Transition {
Anim { Anim {
properties: "opacity,internalStrokeWidth" properties: "opacity,internalStrokeWidth"
duration: manager.completeEndDuration * Appearance.anim.durations.scale duration: manager.completeEndDuration * Tokens.anim.durations.scale
} }
} }
@ -90,7 +90,7 @@ BusyIndicator {
property: "progress" property: "progress"
from: 0 from: 0
to: 1 to: 1
duration: manager.duration * Appearance.anim.durations.scale duration: manager.duration * Tokens.anim.durations.scale
} }
NumberAnimation { NumberAnimation {
@ -99,7 +99,7 @@ BusyIndicator {
property: "completeEndProgress" property: "completeEndProgress"
from: 0 from: 0
to: 1 to: 1
duration: manager.completeEndDuration * Appearance.anim.durations.scale duration: manager.completeEndDuration * Tokens.anim.durations.scale
onFinished: { onFinished: {
if (root.animState === CircularIndicator.Completing) if (root.animState === CircularIndicator.Completing)
root.animState = CircularIndicator.Stopped; root.animState = CircularIndicator.Stopped;

14
components/controls/CircularProgress.qml
View file

@ -2,16 +2,16 @@ import ".."
import QtQuick import QtQuick
import QtQuick.Shapes import QtQuick.Shapes
import qs.services import qs.services
import qs.config import Caelestia.Config
Shape { Shape {
id: root id: root
property real value property real value
property int startAngle: -90 property int startAngle: -90
property int strokeWidth: Appearance.padding.smaller property int strokeWidth: Tokens.padding.smaller
property int padding: 0 property int padding: 0
property int spacing: Appearance.spacing.small property int spacing: Tokens.spacing.small
property color fgColour: Colours.palette.m3primary property color fgColour: Colours.palette.m3primary
property color bgColour: Colours.palette.m3secondaryContainer property color bgColour: Colours.palette.m3secondaryContainer
@ -27,7 +27,7 @@ Shape {
fillColor: "transparent" fillColor: "transparent"
strokeColor: root.bgColour strokeColor: root.bgColour
strokeWidth: root.strokeWidth strokeWidth: root.strokeWidth
capStyle: Appearance.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap capStyle: Tokens.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
PathAngleArc { PathAngleArc {
startAngle: root.startAngle + 360 * root.vValue + root.gapAngle startAngle: root.startAngle + 360 * root.vValue + root.gapAngle
@ -40,7 +40,7 @@ Shape {
Behavior on strokeColor { Behavior on strokeColor {
CAnim { CAnim {
duration: Appearance.anim.durations.large duration: Tokens.anim.durations.large
} }
} }
} }
@ -49,7 +49,7 @@ Shape {
fillColor: "transparent" fillColor: "transparent"
strokeColor: root.fgColour strokeColor: root.fgColour
strokeWidth: root.strokeWidth strokeWidth: root.strokeWidth
capStyle: Appearance.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap capStyle: Tokens.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
PathAngleArc { PathAngleArc {
startAngle: root.startAngle startAngle: root.startAngle
@ -62,7 +62,7 @@ Shape {
Behavior on strokeColor { Behavior on strokeColor {
CAnim { CAnim {
duration: Appearance.anim.durations.large duration: Tokens.anim.durations.large
} }
} }
} }

48
components/controls/CollapsibleSection.qml
View file

@ -3,7 +3,7 @@ import QtQuick
import QtQuick.Layouts import QtQuick.Layouts
import qs.components import qs.components
import qs.services import qs.services
import qs.config import Caelestia.Config
ColumnLayout { ColumnLayout {
id: root id: root
@ -18,14 +18,14 @@ ColumnLayout {
signal toggleRequested signal toggleRequested
spacing: Appearance.spacing.small spacing: Tokens.spacing.small
Layout.fillWidth: true Layout.fillWidth: true
Item { Item {
id: sectionHeaderItem id: sectionHeaderItem
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: Math.max(titleRow.implicitHeight + Appearance.padding.normal * 2, 48) Layout.preferredHeight: Math.max(titleRow.implicitHeight + Tokens.padding.normal * 2, 48)
RowLayout { RowLayout {
id: titleRow id: titleRow
@ -33,13 +33,13 @@ ColumnLayout {
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: Appearance.padding.normal anchors.leftMargin: Tokens.padding.normal
anchors.rightMargin: Appearance.padding.normal anchors.rightMargin: Tokens.padding.normal
spacing: Appearance.spacing.normal spacing: Tokens.spacing.normal
StyledText { StyledText {
text: root.title text: root.title
font.pointSize: Appearance.font.size.larger font.pointSize: Tokens.font.size.larger
font.weight: 500 font.weight: 500
} }
@ -51,12 +51,12 @@ ColumnLayout {
text: "expand_more" text: "expand_more"
rotation: root.expanded ? 180 : 0 rotation: root.expanded ? 180 : 0
color: Colours.palette.m3onSurfaceVariant color: Colours.palette.m3onSurfaceVariant
font.pointSize: Appearance.font.size.normal font.pointSize: Tokens.font.size.normal
Behavior on rotation { Behavior on rotation {
Anim { Anim {
duration: Appearance.anim.durations.small duration: Tokens.anim.durations.small
easing.bezierCurve: Appearance.anim.curves.standard easing.bezierCurve: Tokens.anim.curves.standard
} }
} }
} }
@ -70,7 +70,7 @@ ColumnLayout {
anchors.fill: parent anchors.fill: parent
color: Colours.palette.m3onSurface color: Colours.palette.m3onSurface
radius: Appearance.rounding.normal radius: Tokens.rounding.normal
showHoverBackground: false showHoverBackground: false
} }
} }
@ -79,12 +79,12 @@ ColumnLayout {
id: contentWrapper id: contentWrapper
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: root.expanded ? (contentColumn.implicitHeight + Appearance.spacing.small * 2) : 0 Layout.preferredHeight: root.expanded ? (contentColumn.implicitHeight + Tokens.spacing.small * 2) : 0
clip: true clip: true
Behavior on Layout.preferredHeight { Behavior on Layout.preferredHeight {
Anim { Anim {
easing.bezierCurve: Appearance.anim.curves.standard easing.bezierCurve: Tokens.anim.curves.standard
} }
} }
@ -92,14 +92,14 @@ ColumnLayout {
id: backgroundRect id: backgroundRect
anchors.fill: parent anchors.fill: parent
radius: Appearance.rounding.normal radius: Tokens.rounding.normal
color: Colours.transparency.enabled ? Colours.layer(Colours.palette.m3surfaceContainer, root.nested ? 3 : 2) : (root.nested ? Colours.palette.m3surfaceContainerHigh : Colours.palette.m3surfaceContainer) color: Colours.transparency.enabled ? Colours.layer(Colours.palette.m3surfaceContainer, root.nested ? 3 : 2) : (root.nested ? Colours.palette.m3surfaceContainerHigh : Colours.palette.m3surfaceContainer)
opacity: root.showBackground && root.expanded ? 1.0 : 0.0 opacity: root.showBackground && root.expanded ? 1.0 : 0.0
visible: root.showBackground visible: root.showBackground
Behavior on opacity { Behavior on opacity {
Anim { Anim {
easing.bezierCurve: Appearance.anim.curves.standard easing.bezierCurve: Tokens.anim.curves.standard
} }
} }
} }
@ -109,16 +109,16 @@ ColumnLayout {
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
y: Appearance.spacing.small y: Tokens.spacing.small
anchors.leftMargin: Appearance.padding.normal anchors.leftMargin: Tokens.padding.normal
anchors.rightMargin: Appearance.padding.normal anchors.rightMargin: Tokens.padding.normal
anchors.bottomMargin: Appearance.spacing.small anchors.bottomMargin: Tokens.spacing.small
spacing: Appearance.spacing.small spacing: Tokens.spacing.small
opacity: root.expanded ? 1.0 : 0.0 opacity: root.expanded ? 1.0 : 0.0
Behavior on opacity { Behavior on opacity {
Anim { Anim {
easing.bezierCurve: Appearance.anim.curves.standard easing.bezierCurve: Tokens.anim.curves.standard
} }
} }
@ -126,12 +126,12 @@ ColumnLayout {
id: descriptionText id: descriptionText
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: root.description !== "" ? Appearance.spacing.smaller : 0 Layout.topMargin: root.description !== "" ? Tokens.spacing.smaller : 0
Layout.bottomMargin: root.description !== "" ? Appearance.spacing.small : 0 Layout.bottomMargin: root.description !== "" ? Tokens.spacing.small : 0
visible: root.description !== "" visible: root.description !== ""
text: root.description text: root.description
color: Colours.palette.m3onSurfaceVariant color: Colours.palette.m3onSurfaceVariant
font.pointSize: Appearance.font.size.small font.pointSize: Tokens.font.size.small
wrapMode: Text.Wrap wrapMode: Text.Wrap
} }
} }

20
components/controls/CustomSpinBox.qml
View file

@ -4,7 +4,7 @@ import ".."
import QtQuick import QtQuick
import QtQuick.Layouts import QtQuick.Layouts
import qs.services import qs.services
import qs.config import Caelestia.Config
RowLayout { RowLayout {
id: root id: root
@ -20,7 +20,7 @@ RowLayout {
signal valueModified(value: real) signal valueModified(value: real)
spacing: Appearance.spacing.small spacing: Tokens.spacing.small
onValueChanged: { onValueChanged: {
if (!root.isEditing) { if (!root.isEditing) {
@ -73,23 +73,23 @@ RowLayout {
root.isEditing = false; root.isEditing = false;
} }
padding: Appearance.padding.small padding: Tokens.padding.small
leftPadding: Appearance.padding.normal leftPadding: Tokens.padding.normal
rightPadding: Appearance.padding.normal rightPadding: Tokens.padding.normal
background: StyledRect { background: StyledRect {
implicitWidth: 100 implicitWidth: 100
radius: Appearance.rounding.small radius: Tokens.rounding.small
color: Colours.tPalette.m3surfaceContainerHigh color: Colours.tPalette.m3surfaceContainerHigh
} }
} }
StyledRect { StyledRect {
radius: Appearance.rounding.small radius: Tokens.rounding.small
color: Colours.palette.m3primary color: Colours.palette.m3primary
implicitWidth: implicitHeight implicitWidth: implicitHeight
implicitHeight: upIcon.implicitHeight + Appearance.padding.small * 2 implicitHeight: upIcon.implicitHeight + Tokens.padding.small * 2
StateLayer { StateLayer {
id: upState id: upState
@ -120,11 +120,11 @@ RowLayout {
} }
StyledRect { StyledRect {
radius: Appearance.rounding.small radius: Tokens.rounding.small
color: Colours.palette.m3primary color: Colours.palette.m3primary
implicitWidth: implicitHeight implicitWidth: implicitHeight
implicitHeight: downIcon.implicitHeight + Appearance.padding.small * 2 implicitHeight: downIcon.implicitHeight + Tokens.padding.small * 2
StateLayer { StateLayer {
id: downState id: downState

20
components/controls/FilledSlider.qml
View file

@ -3,7 +3,7 @@ import "../effects"
import QtQuick import QtQuick
import QtQuick.Templates import QtQuick.Templates
import qs.services import qs.services
import qs.config import Caelestia.Config
Slider { Slider {
id: root id: root
@ -16,7 +16,7 @@ Slider {
background: StyledRect { background: StyledRect {
color: Colours.layer(Colours.palette.m3surfaceContainer, 2) color: Colours.layer(Colours.palette.m3surfaceContainer, 2)
radius: Appearance.rounding.full radius: Tokens.rounding.full
StyledRect { StyledRect {
anchors.left: parent.left anchors.left: parent.left
@ -51,7 +51,7 @@ Slider {
anchors.fill: parent anchors.fill: parent
color: Colours.palette.m3inverseSurface color: Colours.palette.m3inverseSurface
radius: Appearance.rounding.full radius: Tokens.rounding.full
MouseArea { MouseArea {
id: handleInteraction id: handleInteraction
@ -70,8 +70,8 @@ Slider {
function update(): void { function update(): void {
animate = !moving; animate = !moving;
binding.when = moving; binding.when = moving;
font.pointSize = moving ? Appearance.font.size.small : Appearance.font.size.larger; font.pointSize = moving ? Tokens.font.size.small : Tokens.font.size.larger;
font.family = moving ? Appearance.font.family.sans : Appearance.font.family.material; font.family = moving ? Tokens.font.family.sans : Tokens.font.family.material;
} }
text: root.icon text: root.icon
@ -96,8 +96,8 @@ Slider {
target: icon target: icon
property: "scale" property: "scale"
to: 0 to: 0
duration: Appearance.anim.durations.normal / 2 duration: Tokens.anim.durations.normal / 2
easing.bezierCurve: Appearance.anim.curves.standardAccel easing.bezierCurve: Tokens.anim.curves.standardAccel
} }
ScriptAction { ScriptAction {
script: icon.update() script: icon.update()
@ -106,8 +106,8 @@ Slider {
target: icon target: icon
property: "scale" property: "scale"
to: 1 to: 1
duration: Appearance.anim.durations.normal / 2 duration: Tokens.anim.durations.normal / 2
easing.bezierCurve: Appearance.anim.curves.standardDecel easing.bezierCurve: Tokens.anim.curves.standardDecel
} }
} }
} }
@ -140,7 +140,7 @@ Slider {
Behavior on value { Behavior on value {
Anim { Anim {
duration: Appearance.anim.durations.large duration: Tokens.anim.durations.large
} }
} }
} }

6
components/controls/IconButton.qml
View file

@ -1,7 +1,7 @@
import ".." import ".."
import QtQuick import QtQuick
import qs.services import qs.services
import qs.config import Caelestia.Config
StyledRect { StyledRect {
id: root id: root
@ -15,7 +15,7 @@ StyledRect {
property alias icon: label.text property alias icon: label.text
property bool checked property bool checked
property bool toggle property bool toggle
property real padding: type === IconButton.Text ? Appearance.padding.small / 2 : Appearance.padding.smaller property real padding: type === IconButton.Text ? Tokens.padding.small / 2 : Tokens.padding.smaller
property alias font: label.font property alias font: label.font
property int type: IconButton.Filled property int type: IconButton.Filled
property bool disabled property bool disabled
@ -44,7 +44,7 @@ StyledRect {
onCheckedChanged: internalChecked = checked onCheckedChanged: internalChecked = checked
radius: internalChecked ? Appearance.rounding.small : implicitHeight / 2 * Math.min(1, Appearance.rounding.scale) radius: internalChecked ? Tokens.rounding.small : implicitHeight / 2 * Math.min(1, Tokens.rounding.scale)
color: type === IconButton.Text ? "transparent" : disabled ? disabledColour : internalChecked ? activeColour : inactiveColour color: type === IconButton.Text ? "transparent" : disabled ? disabledColour : internalChecked ? activeColour : inactiveColour
implicitWidth: implicitHeight implicitWidth: implicitHeight

10
components/controls/IconTextButton.qml
View file

@ -2,7 +2,7 @@ import ".."
import QtQuick import QtQuick
import QtQuick.Layouts import QtQuick.Layouts
import qs.services import qs.services
import qs.config import Caelestia.Config
StyledRect { StyledRect {
id: root id: root
@ -17,8 +17,8 @@ StyledRect {
property alias text: label.text property alias text: label.text
property bool checked property bool checked
property bool toggle property bool toggle
property real horizontalPadding: Appearance.padding.normal property real horizontalPadding: Tokens.padding.normal
property real verticalPadding: Appearance.padding.smaller property real verticalPadding: Tokens.padding.smaller
property alias font: label.font property alias font: label.font
property int type: IconTextButton.Filled property int type: IconTextButton.Filled
@ -36,7 +36,7 @@ StyledRect {
onCheckedChanged: internalChecked = checked onCheckedChanged: internalChecked = checked
radius: internalChecked ? Appearance.rounding.small : implicitHeight / 2 * Math.min(1, Appearance.rounding.scale) radius: internalChecked ? Tokens.rounding.small : implicitHeight / 2 * Math.min(1, Tokens.rounding.scale)
color: type === IconTextButton.Text ? "transparent" : internalChecked ? activeColour : inactiveColour color: type === IconTextButton.Text ? "transparent" : internalChecked ? activeColour : inactiveColour
implicitWidth: row.implicitWidth + horizontalPadding * 2 implicitWidth: row.implicitWidth + horizontalPadding * 2
@ -58,7 +58,7 @@ StyledRect {
id: row id: row
anchors.centerIn: parent anchors.centerIn: parent
spacing: Appearance.spacing.small spacing: Tokens.spacing.small
MaterialIcon { MaterialIcon {
id: iconLabel id: iconLabel

18
components/controls/Menu.qml
View file

@ -5,7 +5,7 @@ import "../effects"
import QtQuick import QtQuick
import QtQuick.Layouts import QtQuick.Layouts
import qs.services import qs.services
import qs.config import Caelestia.Config
Elevation { Elevation {
id: root id: root
@ -16,7 +16,7 @@ Elevation {
signal itemSelected(item: MenuItem) signal itemSelected(item: MenuItem)
radius: Appearance.rounding.small / 2 radius: Tokens.rounding.small / 2
level: 2 level: 2
implicitWidth: Math.max(200, column.implicitWidth) implicitWidth: Math.max(200, column.implicitWidth)
@ -46,8 +46,8 @@ Elevation {
readonly property bool active: modelData === root.active readonly property bool active: modelData === root.active
Layout.fillWidth: true Layout.fillWidth: true
implicitWidth: menuOptionRow.implicitWidth + Appearance.padding.normal * 2 implicitWidth: menuOptionRow.implicitWidth + Tokens.padding.normal * 2
implicitHeight: menuOptionRow.implicitHeight + Appearance.padding.normal * 2 implicitHeight: menuOptionRow.implicitHeight + Tokens.padding.normal * 2
color: Qt.alpha(Colours.palette.m3secondaryContainer, active ? 1 : 0) color: Qt.alpha(Colours.palette.m3secondaryContainer, active ? 1 : 0)
@ -67,8 +67,8 @@ Elevation {
id: menuOptionRow id: menuOptionRow
anchors.fill: parent anchors.fill: parent
anchors.margins: Appearance.padding.normal anchors.margins: Tokens.padding.normal
spacing: Appearance.spacing.small spacing: Tokens.spacing.small
MaterialIcon { MaterialIcon {
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
@ -102,14 +102,14 @@ Elevation {
Behavior on opacity { Behavior on opacity {
Anim { Anim {
duration: Appearance.anim.durations.expressiveDefaultSpatial duration: Tokens.anim.durations.expressiveDefaultSpatial
} }
} }
Behavior on implicitHeight { Behavior on implicitHeight {
Anim { Anim {
duration: Appearance.anim.durations.expressiveDefaultSpatial duration: Tokens.anim.durations.expressiveDefaultSpatial
easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
} }
} }
} }

10
components/controls/SpinBoxRow.qml
View file

@ -3,7 +3,7 @@ import QtQuick
import QtQuick.Layouts import QtQuick.Layouts
import qs.components import qs.components
import qs.services import qs.services
import qs.config import Caelestia.Config
StyledRect { StyledRect {
id: root id: root
@ -16,8 +16,8 @@ StyledRect {
property var onValueModified: function (value) {} property var onValueModified: function (value) {}
Layout.fillWidth: true Layout.fillWidth: true
implicitHeight: row.implicitHeight + Appearance.padding.large * 2 implicitHeight: row.implicitHeight + Tokens.padding.large * 2
radius: Appearance.rounding.normal radius: Tokens.rounding.normal
color: Colours.layer(Colours.palette.m3surfaceContainer, 2) color: Colours.layer(Colours.palette.m3surfaceContainer, 2)
Behavior on implicitHeight { Behavior on implicitHeight {
@ -30,8 +30,8 @@ StyledRect {
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.margins: Appearance.padding.large anchors.margins: Tokens.padding.large
spacing: Appearance.spacing.normal spacing: Tokens.spacing.normal
StyledText { StyledText {
Layout.fillWidth: true Layout.fillWidth: true

26
components/controls/SplitButton.qml
View file

@ -2,7 +2,7 @@ import ".."
import QtQuick import QtQuick
import QtQuick.Layouts import QtQuick.Layouts
import qs.services import qs.services
import qs.config import Caelestia.Config
Row { Row {
id: root id: root
@ -12,8 +12,8 @@ Row {
Tonal Tonal
} }
property real horizontalPadding: Appearance.padding.normal property real horizontalPadding: Tokens.padding.normal
property real verticalPadding: Appearance.padding.smaller property real verticalPadding: Tokens.padding.smaller
property int type: SplitButton.Filled property int type: SplitButton.Filled
property bool disabled property bool disabled
property bool menuOnTop property bool menuOnTop
@ -33,12 +33,12 @@ Row {
property color disabledColour: Qt.alpha(Colours.palette.m3onSurface, 0.1) property color disabledColour: Qt.alpha(Colours.palette.m3onSurface, 0.1)
property color disabledTextColour: Qt.alpha(Colours.palette.m3onSurface, 0.38) property color disabledTextColour: Qt.alpha(Colours.palette.m3onSurface, 0.38)
spacing: Math.floor(Appearance.spacing.small / 2) spacing: Math.floor(Tokens.spacing.small / 2)
StyledRect { StyledRect {
radius: implicitHeight / 2 * Math.min(1, Appearance.rounding.scale) radius: implicitHeight / 2 * Math.min(1, Tokens.rounding.scale)
topRightRadius: Appearance.rounding.small / 2 topRightRadius: Tokens.rounding.small / 2
bottomRightRadius: Appearance.rounding.small / 2 bottomRightRadius: Tokens.rounding.small / 2
color: root.disabled ? root.disabledColour : root.colour color: root.disabled ? root.disabledColour : root.colour
implicitWidth: textRow.implicitWidth + root.horizontalPadding * 2 implicitWidth: textRow.implicitWidth + root.horizontalPadding * 2
@ -62,7 +62,7 @@ Row {
anchors.centerIn: parent anchors.centerIn: parent
anchors.horizontalCenterOffset: Math.floor(root.verticalPadding / 4) anchors.horizontalCenterOffset: Math.floor(root.verticalPadding / 4)
spacing: Appearance.spacing.small spacing: Tokens.spacing.small
MaterialIcon { MaterialIcon {
id: iconLabel id: iconLabel
@ -86,7 +86,7 @@ Row {
Behavior on Layout.preferredWidth { Behavior on Layout.preferredWidth {
Anim { Anim {
easing.bezierCurve: Appearance.anim.curves.emphasized easing.bezierCurve: Tokens.anim.curves.emphasized
} }
} }
} }
@ -96,9 +96,9 @@ Row {
StyledRect { StyledRect {
id: expandBtn id: expandBtn
property real rad: root.expanded ? implicitHeight / 2 * Math.min(1, Appearance.rounding.scale) : Appearance.rounding.small / 2 property real rad: root.expanded ? implicitHeight / 2 * Math.min(1, Tokens.rounding.scale) : Tokens.rounding.small / 2
radius: implicitHeight / 2 * Math.min(1, Appearance.rounding.scale) radius: implicitHeight / 2 * Math.min(1, Tokens.rounding.scale)
topLeftRadius: rad topLeftRadius: rad
bottomLeftRadius: rad bottomLeftRadius: rad
color: root.disabled ? root.disabledColour : root.colour color: root.disabled ? root.disabledColour : root.colour
@ -157,8 +157,8 @@ Row {
anchors.top: parent.bottom anchors.top: parent.bottom
anchors.right: parent.right anchors.right: parent.right
anchors.topMargin: Appearance.spacing.small anchors.topMargin: Tokens.spacing.small
anchors.bottomMargin: Appearance.spacing.small anchors.bottomMargin: Tokens.spacing.small
} }
} }
} }

10
components/controls/SplitButtonRow.qml
View file

@ -5,7 +5,7 @@ import QtQuick
import QtQuick.Layouts import QtQuick.Layouts
import qs.components import qs.components
import qs.services import qs.services
import qs.config import Caelestia.Config
StyledRect { StyledRect {
id: root id: root
@ -21,8 +21,8 @@ StyledRect {
signal selected(item: MenuItem) signal selected(item: MenuItem)
Layout.fillWidth: true Layout.fillWidth: true
implicitHeight: row.implicitHeight + Appearance.padding.large * 2 implicitHeight: row.implicitHeight + Tokens.padding.large * 2
radius: Appearance.rounding.normal radius: Tokens.rounding.normal
color: Colours.layer(Colours.palette.m3surfaceContainer, 2) color: Colours.layer(Colours.palette.m3surfaceContainer, 2)
clip: false clip: false
@ -33,8 +33,8 @@ StyledRect {
id: row id: row
anchors.fill: parent anchors.fill: parent
anchors.margins: Appearance.padding.large anchors.margins: Tokens.padding.large
spacing: Appearance.spacing.normal spacing: Tokens.spacing.normal
StyledText { StyledText {
Layout.fillWidth: true Layout.fillWidth: true

8
components/controls/StyledInputField.qml
View file

@ -4,7 +4,7 @@ import ".."
import QtQuick import QtQuick
import qs.components import qs.components
import qs.services import qs.services
import qs.config import Caelestia.Config
Item { Item {
id: root id: root
@ -22,14 +22,14 @@ Item {
signal editingFinished signal editingFinished
implicitWidth: 70 implicitWidth: 70
implicitHeight: inputField.implicitHeight + Appearance.padding.small * 2 implicitHeight: inputField.implicitHeight + Tokens.padding.small * 2
StyledRect { StyledRect {
id: container id: container
anchors.fill: parent anchors.fill: parent
color: inputHover.containsMouse || inputField.activeFocus ? Colours.layer(Colours.palette.m3surfaceContainer, 3) : Colours.layer(Colours.palette.m3surfaceContainer, 2) color: inputHover.containsMouse || inputField.activeFocus ? Colours.layer(Colours.palette.m3surfaceContainer, 3) : Colours.layer(Colours.palette.m3surfaceContainer, 2)
radius: Appearance.rounding.small radius: Tokens.rounding.small
border.width: 1 border.width: 1
border.color: inputField.activeFocus ? Colours.palette.m3primary : Qt.alpha(Colours.palette.m3outline, 0.3) border.color: inputField.activeFocus ? Colours.palette.m3primary : Qt.alpha(Colours.palette.m3outline, 0.3)
opacity: root.enabled ? 1 : 0.5 opacity: root.enabled ? 1 : 0.5
@ -55,7 +55,7 @@ Item {
id: inputField id: inputField
anchors.centerIn: parent anchors.centerIn: parent
width: parent.width - Appearance.padding.normal width: parent.width - Tokens.padding.normal
horizontalAlignment: root.horizontalAlignment horizontalAlignment: root.horizontalAlignment
validator: root.validator validator: root.validator
readOnly: root.readOnly readOnly: root.readOnly

12
components/controls/StyledRadioButton.qml
View file

@ -2,12 +2,12 @@ import QtQuick
import QtQuick.Templates import QtQuick.Templates
import qs.components import qs.components
import qs.services import qs.services
import qs.config import Caelestia.Config
RadioButton { RadioButton {
id: root id: root
font.pointSize: Appearance.font.size.smaller font.pointSize: Tokens.font.size.smaller
implicitWidth: implicitIndicatorWidth + implicitContentWidth + contentItem.anchors.leftMargin implicitWidth: implicitIndicatorWidth + implicitContentWidth + contentItem.anchors.leftMargin
implicitHeight: Math.max(implicitIndicatorHeight, implicitContentHeight) implicitHeight: Math.max(implicitIndicatorHeight, implicitContentHeight)
@ -17,7 +17,7 @@ RadioButton {
implicitWidth: 20 implicitWidth: 20
implicitHeight: 20 implicitHeight: 20
radius: Appearance.rounding.full radius: Tokens.rounding.full
color: "transparent" color: "transparent"
border.color: root.checked ? Colours.palette.m3primary : Colours.palette.m3onSurfaceVariant border.color: root.checked ? Colours.palette.m3primary : Colours.palette.m3onSurfaceVariant
border.width: 2 border.width: 2
@ -28,7 +28,7 @@ RadioButton {
root.click(); root.click();
} }
anchors.margins: -Appearance.padding.smaller anchors.margins: -Tokens.padding.smaller
color: root.checked ? Colours.palette.m3onSurface : Colours.palette.m3primary color: root.checked ? Colours.palette.m3onSurface : Colours.palette.m3primary
z: -1 z: -1
} }
@ -38,7 +38,7 @@ RadioButton {
implicitWidth: 8 implicitWidth: 8
implicitHeight: 8 implicitHeight: 8
radius: Appearance.rounding.full radius: Tokens.rounding.full
color: Qt.alpha(Colours.palette.m3primary, root.checked ? 1 : 0) color: Qt.alpha(Colours.palette.m3primary, root.checked ? 1 : 0)
} }
@ -52,6 +52,6 @@ RadioButton {
font.pointSize: root.font.pointSize font.pointSize: root.font.pointSize
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.left: outerCircle.right anchors.left: outerCircle.right
anchors.leftMargin: Appearance.spacing.smaller anchors.leftMargin: Tokens.spacing.smaller
} }
} }

6
components/controls/StyledScrollBar.qml
View file

@ -2,7 +2,7 @@ import ".."
import QtQuick import QtQuick
import QtQuick.Templates import QtQuick.Templates
import qs.services import qs.services
import qs.config import Caelestia.Config
ScrollBar { ScrollBar {
id: root id: root
@ -45,7 +45,7 @@ ScrollBar {
} }
} }
} }
implicitWidth: Appearance.padding.small implicitWidth: Tokens.padding.small
contentItem: StyledRect { contentItem: StyledRect {
anchors.left: parent.left anchors.left: parent.left
@ -61,7 +61,7 @@ ScrollBar {
return 0.6; return 0.6;
return 0; return 0;
} }
radius: Appearance.rounding.full radius: Tokens.rounding.full
color: Colours.palette.m3secondary color: Colours.palette.m3secondary
MouseArea { MouseArea {

8
components/controls/StyledSlider.qml
View file

@ -2,7 +2,7 @@ import QtQuick
import QtQuick.Templates import QtQuick.Templates
import qs.components import qs.components
import qs.services import qs.services
import qs.config import Caelestia.Config
Slider { Slider {
id: root id: root
@ -18,7 +18,7 @@ Slider {
implicitWidth: root.handle.x - root.implicitHeight / 6 implicitWidth: root.handle.x - root.implicitHeight / 6
color: Colours.palette.m3primary color: Colours.palette.m3primary
radius: Appearance.rounding.full radius: Tokens.rounding.full
topRightRadius: root.implicitHeight / 15 topRightRadius: root.implicitHeight / 15
bottomRightRadius: root.implicitHeight / 15 bottomRightRadius: root.implicitHeight / 15
} }
@ -33,7 +33,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.m3surfaceContainerHighest color: Colours.palette.m3surfaceContainerHighest
radius: Appearance.rounding.full radius: Tokens.rounding.full
topLeftRadius: root.implicitHeight / 15 topLeftRadius: root.implicitHeight / 15
bottomLeftRadius: root.implicitHeight / 15 bottomLeftRadius: root.implicitHeight / 15
} }
@ -46,7 +46,7 @@ Slider {
implicitHeight: root.implicitHeight implicitHeight: root.implicitHeight
color: Colours.palette.m3primary color: Colours.palette.m3primary
radius: Appearance.rounding.full radius: Tokens.rounding.full
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent

22
components/controls/StyledSwitch.qml
View file

@ -3,7 +3,7 @@ import QtQuick
import QtQuick.Shapes import QtQuick.Shapes
import QtQuick.Templates import QtQuick.Templates
import qs.services import qs.services
import qs.config import Caelestia.Config
Switch { Switch {
id: root id: root
@ -14,21 +14,21 @@ Switch {
implicitHeight: implicitIndicatorHeight implicitHeight: implicitIndicatorHeight
indicator: StyledRect { indicator: StyledRect {
radius: Appearance.rounding.full radius: Tokens.rounding.full
color: root.checked ? Colours.palette.m3primary : Colours.layer(Colours.palette.m3surfaceContainerHighest, root.cLayer) 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: Tokens.font.size.normal + Tokens.padding.smaller * 2
StyledRect { StyledRect {
readonly property real nonAnimWidth: root.pressed ? implicitHeight * 1.3 : implicitHeight readonly property real nonAnimWidth: root.pressed ? implicitHeight * 1.3 : implicitHeight
radius: Appearance.rounding.full radius: Tokens.rounding.full
color: root.checked ? Colours.palette.m3onPrimary : Colours.layer(Colours.palette.m3outline, root.cLayer + 1) color: root.checked ? Colours.palette.m3onPrimary : Colours.layer(Colours.palette.m3outline, root.cLayer + 1)
x: root.checked ? parent.implicitWidth - nonAnimWidth - Appearance.padding.small / 2 : Appearance.padding.small / 2 x: root.checked ? parent.implicitWidth - nonAnimWidth - Tokens.padding.small / 2 : Tokens.padding.small / 2
implicitWidth: nonAnimWidth implicitWidth: nonAnimWidth
implicitHeight: parent.implicitHeight - Appearance.padding.small implicitHeight: parent.implicitHeight - Tokens.padding.small
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
StyledRect { StyledRect {
@ -83,15 +83,15 @@ Switch {
anchors.centerIn: parent anchors.centerIn: parent
width: height width: height
height: parent.implicitHeight - Appearance.padding.small * 2 height: parent.implicitHeight - Tokens.padding.small * 2
preferredRendererType: Shape.CurveRenderer preferredRendererType: Shape.CurveRenderer
asynchronous: true asynchronous: true
ShapePath { ShapePath {
strokeWidth: Appearance.font.size.larger * 0.15 strokeWidth: Tokens.font.size.larger * 0.15
strokeColor: root.checked ? Colours.palette.m3primary : Colours.palette.m3surfaceContainerHighest strokeColor: root.checked ? Colours.palette.m3primary : Colours.palette.m3surfaceContainerHighest
fillColor: "transparent" fillColor: "transparent"
capStyle: Appearance.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap capStyle: Tokens.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
startX: icon.start1.x startX: icon.start1.x
startY: icon.start1.y startY: icon.start1.y
@ -145,8 +145,8 @@ Switch {
} }
component PropAnim: PropertyAnimation { component PropAnim: PropertyAnimation {
duration: Appearance.anim.durations.normal duration: Tokens.anim.durations.normal
easing.type: Easing.BezierSpline easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.standard easing.bezierCurve: Tokens.anim.curves.standard
} }
} }

10
components/controls/StyledTextField.qml
View file

@ -4,15 +4,15 @@ import ".."
import QtQuick import QtQuick
import QtQuick.Controls import QtQuick.Controls
import qs.services import qs.services
import qs.config import Caelestia.Config
TextField { TextField {
id: root id: root
color: Colours.palette.m3onSurface color: Colours.palette.m3onSurface
placeholderTextColor: Colours.palette.m3outline placeholderTextColor: Colours.palette.m3outline
font.family: Appearance.font.family.sans font.family: Tokens.font.family.sans
font.pointSize: Appearance.font.size.smaller font.pointSize: Tokens.font.size.smaller
renderType: echoMode === TextField.Password ? TextField.QtRendering : TextField.NativeRendering renderType: echoMode === TextField.Password ? TextField.QtRendering : TextField.NativeRendering
cursorVisible: !readOnly cursorVisible: !readOnly
@ -25,7 +25,7 @@ TextField {
implicitWidth: 2 implicitWidth: 2
color: Colours.palette.m3primary color: Colours.palette.m3primary
radius: Appearance.rounding.normal radius: Tokens.rounding.normal
Connections { Connections {
function onCursorPositionChanged(): void { function onCursorPositionChanged(): void {
@ -61,7 +61,7 @@ TextField {
Behavior on opacity { Behavior on opacity {
Anim { Anim {
duration: Appearance.anim.durations.small duration: Tokens.anim.durations.small
} }
} }
} }

10
components/controls/SwitchRow.qml
View file

@ -3,7 +3,7 @@ import QtQuick
import QtQuick.Layouts import QtQuick.Layouts
import qs.components import qs.components
import qs.services import qs.services
import qs.config import Caelestia.Config
StyledRect { StyledRect {
id: root id: root
@ -13,8 +13,8 @@ StyledRect {
property var onToggled: function (checked) {} property var onToggled: function (checked) {}
Layout.fillWidth: true Layout.fillWidth: true
implicitHeight: row.implicitHeight + Appearance.padding.large * 2 implicitHeight: row.implicitHeight + Tokens.padding.large * 2
radius: Appearance.rounding.normal radius: Tokens.rounding.normal
color: Colours.layer(Colours.palette.m3surfaceContainer, 2) color: Colours.layer(Colours.palette.m3surfaceContainer, 2)
Behavior on implicitHeight { Behavior on implicitHeight {
@ -27,8 +27,8 @@ StyledRect {
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.margins: Appearance.padding.large anchors.margins: Tokens.padding.large
spacing: Appearance.spacing.normal spacing: Tokens.spacing.normal
StyledText { StyledText {
Layout.fillWidth: true Layout.fillWidth: true

8
components/controls/TextButton.qml
View file

@ -1,7 +1,7 @@
import ".." import ".."
import QtQuick import QtQuick
import qs.services import qs.services
import qs.config import Caelestia.Config
StyledRect { StyledRect {
id: root id: root
@ -15,8 +15,8 @@ StyledRect {
property alias text: label.text property alias text: label.text
property bool checked property bool checked
property bool toggle property bool toggle
property real horizontalPadding: Appearance.padding.normal property real horizontalPadding: Tokens.padding.normal
property real verticalPadding: Appearance.padding.smaller property real verticalPadding: Tokens.padding.smaller
property alias font: label.font property alias font: label.font
property int type: TextButton.Filled property int type: TextButton.Filled
@ -47,7 +47,7 @@ StyledRect {
onCheckedChanged: internalChecked = checked onCheckedChanged: internalChecked = checked
radius: internalChecked ? Appearance.rounding.small : implicitHeight / 2 * Math.min(1, Appearance.rounding.scale) radius: internalChecked ? Tokens.rounding.small : implicitHeight / 2 * Math.min(1, Tokens.rounding.scale)
color: type === TextButton.Text ? "transparent" : internalChecked ? activeColour : inactiveColour color: type === TextButton.Text ? "transparent" : internalChecked ? activeColour : inactiveColour
implicitWidth: label.implicitWidth + horizontalPadding * 2 implicitWidth: label.implicitWidth + horizontalPadding * 2

22
components/controls/ToggleButton.qml
View file

@ -6,7 +6,7 @@ import QtQuick.Layouts
import qs.components import qs.components
import qs.components.controls import qs.components.controls
import qs.services import qs.services
import qs.config import Caelestia.Config
StyledRect { StyledRect {
id: root id: root
@ -15,9 +15,9 @@ StyledRect {
property string icon property string icon
property string label property string label
property string accent: "Secondary" property string accent: "Secondary"
property real iconSize: Appearance.font.size.large property real iconSize: Tokens.font.size.large
property real horizontalPadding: Appearance.padding.large property real horizontalPadding: Tokens.padding.large
property real verticalPadding: Appearance.padding.normal property real verticalPadding: Tokens.padding.normal
property string tooltip: "" property string tooltip: ""
property bool hovered: false property bool hovered: false
@ -26,10 +26,10 @@ StyledRect {
Component.onCompleted: { Component.onCompleted: {
hovered = toggleStateLayer.containsMouse; hovered = toggleStateLayer.containsMouse;
} }
Layout.preferredWidth: implicitWidth + (toggleStateLayer.pressed ? Appearance.padding.normal * 2 : toggled ? Appearance.padding.small * 2 : 0) Layout.preferredWidth: implicitWidth + (toggleStateLayer.pressed ? Tokens.padding.normal * 2 : toggled ? Tokens.padding.small * 2 : 0)
implicitWidth: toggleBtnInner.implicitWidth + horizontalPadding * 2 implicitWidth: toggleBtnInner.implicitWidth + horizontalPadding * 2
implicitHeight: toggleBtnIcon.implicitHeight + verticalPadding * 2 implicitHeight: toggleBtnIcon.implicitHeight + verticalPadding * 2
radius: toggled || toggleStateLayer.pressed ? Appearance.rounding.small : Math.min(width, height) / 2 * Math.min(1, Appearance.rounding.scale) radius: toggled || toggleStateLayer.pressed ? Tokens.rounding.small : Math.min(width, height) / 2 * Math.min(1, Tokens.rounding.scale)
color: toggled ? Colours.palette[`m3${accent.toLowerCase()}`] : Colours.palette[`m3${accent.toLowerCase()}Container`] color: toggled ? Colours.palette[`m3${accent.toLowerCase()}`] : Colours.palette[`m3${accent.toLowerCase()}Container`]
Connections { Connections {
@ -57,7 +57,7 @@ StyledRect {
id: toggleBtnInner id: toggleBtnInner
anchors.centerIn: parent anchors.centerIn: parent
spacing: Appearance.spacing.normal spacing: Tokens.spacing.normal
MaterialIcon { MaterialIcon {
id: toggleBtnIcon id: toggleBtnIcon
@ -87,15 +87,15 @@ StyledRect {
Behavior on radius { Behavior on radius {
Anim { Anim {
duration: Appearance.anim.durations.expressiveFastSpatial duration: Tokens.anim.durations.expressiveFastSpatial
easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial easing.bezierCurve: Tokens.anim.curves.expressiveFastSpatial
} }
} }
Behavior on Layout.preferredWidth { Behavior on Layout.preferredWidth {
Anim { Anim {
duration: Appearance.anim.durations.expressiveFastSpatial duration: Tokens.anim.durations.expressiveFastSpatial
easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial easing.bezierCurve: Tokens.anim.curves.expressiveFastSpatial
} }
} }

4
components/controls/ToggleRow.qml
View file

@ -2,7 +2,7 @@ import QtQuick
import QtQuick.Layouts import QtQuick.Layouts
import qs.components import qs.components
import qs.components.controls import qs.components.controls
import qs.config import Caelestia.Config
RowLayout { RowLayout {
id: root id: root
@ -12,7 +12,7 @@ RowLayout {
property alias toggle: toggle property alias toggle: toggle
Layout.fillWidth: true Layout.fillWidth: true
spacing: Appearance.spacing.normal spacing: Tokens.spacing.normal
StyledText { StyledText {
Layout.fillWidth: true Layout.fillWidth: true

22
components/controls/Tooltip.qml
View file

@ -3,7 +3,7 @@ import QtQuick
import QtQuick.Controls import QtQuick.Controls
import qs.components.effects import qs.components.effects
import qs.services import qs.services
import qs.config import Caelestia.Config
Popup { Popup {
id: root id: root
@ -44,10 +44,10 @@ Popup {
let newX = targetCenterX - tooltipWidth / 2; let newX = targetCenterX - tooltipWidth / 2;
// Position tooltip above target // Position tooltip above target
let newY = targetPos.y - tooltipHeight - Appearance.spacing.small; let newY = targetPos.y - tooltipHeight - Tokens.spacing.small;
// Keep within bounds // Keep within bounds
const padding = Appearance.padding.normal; const padding = Tokens.padding.normal;
if (newX < padding) { if (newX < padding) {
newX = padding; newX = padding;
} else if (newX + tooltipWidth > (parent.width - padding)) { } else if (newX + tooltipWidth > (parent.width - padding)) {
@ -100,8 +100,8 @@ Popup {
property: "opacity" property: "opacity"
from: 0 from: 0
to: 1 to: 1
duration: Appearance.anim.durations.expressiveFastSpatial duration: Tokens.anim.durations.expressiveFastSpatial
easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial easing.bezierCurve: Tokens.anim.curves.expressiveFastSpatial
} }
} }
@ -110,19 +110,19 @@ Popup {
property: "opacity" property: "opacity"
from: 1 from: 1
to: 0 to: 0
duration: Appearance.anim.durations.expressiveFastSpatial duration: Tokens.anim.durations.expressiveFastSpatial
easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial easing.bezierCurve: Tokens.anim.curves.expressiveFastSpatial
} }
} }
contentItem: StyledRect { contentItem: StyledRect {
id: tooltipRect id: tooltipRect
implicitWidth: tooltipText.implicitWidth + Appearance.padding.normal * 2 implicitWidth: tooltipText.implicitWidth + Tokens.padding.normal * 2
implicitHeight: tooltipText.implicitHeight + Appearance.padding.smaller * 2 implicitHeight: tooltipText.implicitHeight + Tokens.padding.smaller * 2
color: Colours.palette.m3surfaceContainerHighest color: Colours.palette.m3surfaceContainerHighest
radius: Appearance.rounding.small radius: Tokens.rounding.small
antialiasing: true antialiasing: true
// Add elevation for depth // Add elevation for depth
@ -140,7 +140,7 @@ Popup {
text: root.text text: root.text
color: Colours.palette.m3onSurface color: Colours.palette.m3onSurface
font.pointSize: Appearance.font.size.small font.pointSize: Tokens.font.size.small
} }
} }

6
components/effects/InnerBorder.qml
View file

@ -4,7 +4,7 @@ import ".."
import QtQuick import QtQuick
import QtQuick.Effects import QtQuick.Effects
import qs.services import qs.services
import qs.config import Caelestia.Config
StyledRect { StyledRect {
property alias innerRadius: maskInner.radius property alias innerRadius: maskInner.radius
@ -37,8 +37,8 @@ StyledRect {
id: maskInner id: maskInner
anchors.fill: parent anchors.fill: parent
anchors.margins: Appearance.padding.normal anchors.margins: Tokens.padding.normal
radius: Appearance.rounding.small radius: Tokens.rounding.small
} }
} }
} }

12
components/filedialog/CurrentItem.qml
View file

@ -2,15 +2,15 @@ import ".."
import QtQuick import QtQuick
import QtQuick.Shapes import QtQuick.Shapes
import qs.services import qs.services
import qs.config import Caelestia.Config
Item { Item {
id: root id: root
required property var currentItem required property var currentItem
implicitWidth: content.implicitWidth + Appearance.padding.larger + content.anchors.rightMargin implicitWidth: content.implicitWidth + Tokens.padding.larger + content.anchors.rightMargin
implicitHeight: currentItem ? content.implicitHeight + Appearance.padding.normal + content.anchors.bottomMargin : 0 implicitHeight: currentItem ? content.implicitHeight + Tokens.padding.normal + content.anchors.bottomMargin : 0
Shape { Shape {
preferredRendererType: Shape.CurveRenderer preferredRendererType: Shape.CurveRenderer
@ -18,7 +18,7 @@ Item {
ShapePath { ShapePath {
id: path id: path
readonly property real rounding: Appearance.rounding.small readonly property real rounding: Tokens.rounding.small
readonly property bool flatten: root.implicitHeight < rounding * 2 readonly property bool flatten: root.implicitHeight < rounding * 2
readonly property real roundingY: flatten ? root.implicitHeight / 2 : rounding readonly property real roundingY: flatten ? root.implicitHeight / 2 : rounding
@ -76,8 +76,8 @@ Item {
anchors.right: parent.right anchors.right: parent.right
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.rightMargin: Appearance.padding.larger - Appearance.padding.small anchors.rightMargin: Tokens.padding.larger - Tokens.padding.small
anchors.bottomMargin: Appearance.padding.normal - Appearance.padding.small anchors.bottomMargin: Tokens.padding.normal - Tokens.padding.small
Connections { Connections {
function onCurrentItemChanged(): void { function onCurrentItemChanged(): void {

30
components/filedialog/DialogButtons.qml
View file

@ -1,7 +1,7 @@
import QtQuick.Layouts import QtQuick.Layouts
import qs.components import qs.components
import qs.services import qs.services
import qs.config import Caelestia.Config
StyledRect { StyledRect {
id: root id: root
@ -9,7 +9,7 @@ StyledRect {
required property var dialog required property var dialog
required property FolderContents folder required property FolderContents folder
implicitHeight: inner.implicitHeight + Appearance.padding.normal * 2 implicitHeight: inner.implicitHeight + Tokens.padding.normal * 2
color: Colours.tPalette.m3surfaceContainer color: Colours.tPalette.m3surfaceContainer
@ -17,9 +17,9 @@ StyledRect {
id: inner id: inner
anchors.fill: parent anchors.fill: parent
anchors.margins: Appearance.padding.normal anchors.margins: Tokens.padding.normal
spacing: Appearance.spacing.small spacing: Tokens.spacing.small
StyledText { StyledText {
text: qsTr("Filter:") text: qsTr("Filter:")
@ -28,14 +28,14 @@ StyledRect {
StyledRect { StyledRect {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
Layout.rightMargin: Appearance.spacing.normal Layout.rightMargin: Tokens.spacing.normal
color: Colours.tPalette.m3surfaceContainerHigh color: Colours.tPalette.m3surfaceContainerHigh
radius: Appearance.rounding.small radius: Tokens.rounding.small
StyledText { StyledText {
anchors.fill: parent anchors.fill: parent
anchors.margins: Appearance.padding.normal anchors.margins: Tokens.padding.normal
text: `${root.dialog.filterLabel} (${root.dialog.filters.map(f => `*.${f}`).join(", ")})` text: `${root.dialog.filterLabel} (${root.dialog.filters.map(f => `*.${f}`).join(", ")})`
} }
@ -43,10 +43,10 @@ StyledRect {
StyledRect { StyledRect {
color: Colours.tPalette.m3surfaceContainerHigh color: Colours.tPalette.m3surfaceContainerHigh
radius: Appearance.rounding.small radius: Tokens.rounding.small
implicitWidth: cancelText.implicitWidth + Appearance.padding.normal * 2 implicitWidth: cancelText.implicitWidth + Tokens.padding.normal * 2
implicitHeight: cancelText.implicitHeight + Appearance.padding.normal * 2 implicitHeight: cancelText.implicitHeight + Tokens.padding.normal * 2
StateLayer { StateLayer {
function onClicked(): void { function onClicked(): void {
@ -60,7 +60,7 @@ StyledRect {
id: selectText id: selectText
anchors.centerIn: parent anchors.centerIn: parent
anchors.margins: Appearance.padding.normal anchors.margins: Tokens.padding.normal
text: qsTr("Select") text: qsTr("Select")
color: root.dialog.selectionValid ? Colours.palette.m3onSurface : Colours.palette.m3outline color: root.dialog.selectionValid ? Colours.palette.m3onSurface : Colours.palette.m3outline
@ -69,10 +69,10 @@ StyledRect {
StyledRect { StyledRect {
color: Colours.tPalette.m3surfaceContainerHigh color: Colours.tPalette.m3surfaceContainerHigh
radius: Appearance.rounding.small radius: Tokens.rounding.small
implicitWidth: cancelText.implicitWidth + Appearance.padding.normal * 2 implicitWidth: cancelText.implicitWidth + Tokens.padding.normal * 2
implicitHeight: cancelText.implicitHeight + Appearance.padding.normal * 2 implicitHeight: cancelText.implicitHeight + Tokens.padding.normal * 2
StateLayer { StateLayer {
function onClicked(): void { function onClicked(): void {
@ -84,7 +84,7 @@ StyledRect {
id: cancelText id: cancelText
anchors.centerIn: parent anchors.centerIn: parent
anchors.margins: Appearance.padding.normal anchors.margins: Tokens.padding.normal
text: qsTr("Cancel") text: qsTr("Cancel")
} }

40
components/filedialog/FolderContents.qml
View file

@ -10,7 +10,7 @@ import qs.components.controls
import qs.components.filedialog import qs.components.filedialog
import qs.components.images import qs.components.images
import qs.services import qs.services
import qs.config import Caelestia.Config
import qs.utils import qs.utils
Item { Item {
@ -42,8 +42,8 @@ Item {
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
anchors.margins: Appearance.padding.small anchors.margins: Tokens.padding.small
radius: Appearance.rounding.small radius: Tokens.rounding.small
} }
} }
@ -59,14 +59,14 @@ Item {
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
text: "scan_delete" text: "scan_delete"
color: Colours.palette.m3outline color: Colours.palette.m3outline
font.pointSize: Appearance.font.size.extraLarge * 2 font.pointSize: Tokens.font.size.extraLarge * 2
font.weight: 500 font.weight: 500
} }
StyledText { StyledText {
text: qsTr("This folder is empty") text: qsTr("This folder is empty")
color: Colours.palette.m3outline color: Colours.palette.m3outline
font.pointSize: Appearance.font.size.large font.pointSize: Tokens.font.size.large
font.weight: 500 font.weight: 500
} }
} }
@ -80,10 +80,10 @@ Item {
id: view id: view
anchors.fill: parent anchors.fill: parent
anchors.margins: Appearance.padding.small + Appearance.padding.normal anchors.margins: Tokens.padding.small + Tokens.padding.normal
cellWidth: Sizes.itemWidth + Appearance.spacing.small cellWidth: Sizes.itemWidth + Tokens.spacing.small
cellHeight: Sizes.itemWidth + Appearance.spacing.small * 2 + Appearance.padding.normal * 2 + 1 cellHeight: Sizes.itemWidth + Tokens.spacing.small * 2 + Tokens.padding.normal * 2 + 1
clip: true clip: true
focus: true focus: true
@ -120,8 +120,8 @@ Item {
properties: "opacity,scale" properties: "opacity,scale"
from: 0 from: 0
to: 1 to: 1
duration: Appearance.anim.durations.expressiveDefaultSpatial duration: Tokens.anim.durations.expressiveDefaultSpatial
easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
} }
} }
@ -140,12 +140,12 @@ Item {
Anim { Anim {
properties: "opacity,scale" properties: "opacity,scale"
to: 1 to: 1
easing.bezierCurve: Appearance.anim.curves.standardDecel easing.bezierCurve: Tokens.anim.curves.standardDecel
} }
Anim { Anim {
properties: "x,y" properties: "x,y"
duration: Appearance.anim.durations.expressiveDefaultSpatial duration: Tokens.anim.durations.expressiveDefaultSpatial
easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
} }
} }
} }
@ -153,7 +153,7 @@ Item {
CurrentItem { CurrentItem {
anchors.right: parent.right anchors.right: parent.right
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.margins: Appearance.padding.small anchors.margins: Tokens.padding.small
currentItem: view.currentItem currentItem: view.currentItem
} }
@ -164,12 +164,12 @@ Item {
required property int index required property int index
required property FileSystemEntry modelData required property FileSystemEntry modelData
readonly property real nonAnimHeight: icon.implicitHeight + name.anchors.topMargin + name.implicitHeight + Appearance.padding.normal * 2 readonly property real nonAnimHeight: icon.implicitHeight + name.anchors.topMargin + name.implicitHeight + Tokens.padding.normal * 2
implicitWidth: Sizes.itemWidth implicitWidth: Sizes.itemWidth
implicitHeight: nonAnimHeight implicitHeight: nonAnimHeight
radius: Appearance.rounding.normal radius: Tokens.rounding.normal
color: Qt.alpha(Colours.tPalette.m3surfaceContainerHighest, GridView.isCurrentItem ? Colours.tPalette.m3surfaceContainerHighest.a : 0) color: Qt.alpha(Colours.tPalette.m3surfaceContainerHighest, GridView.isCurrentItem ? Colours.tPalette.m3surfaceContainerHighest.a : 0)
z: GridView.isCurrentItem || implicitHeight !== nonAnimHeight ? 1 : 0 z: GridView.isCurrentItem || implicitHeight !== nonAnimHeight ? 1 : 0
clip: true clip: true
@ -192,9 +192,9 @@ Item {
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: Appearance.padding.normal anchors.topMargin: Tokens.padding.normal
implicitSize: Sizes.itemWidth - Appearance.padding.normal * 2 implicitSize: Sizes.itemWidth - Tokens.padding.normal * 2
Component.onCompleted: { Component.onCompleted: {
const file = item.modelData; const file = item.modelData;
@ -215,8 +215,8 @@ Item {
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
anchors.top: icon.bottom anchors.top: icon.bottom
anchors.topMargin: Appearance.spacing.small anchors.topMargin: Tokens.spacing.small
anchors.margins: Appearance.padding.normal anchors.margins: Tokens.padding.normal
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
elide: item.GridView.isCurrentItem ? Text.ElideNone : Text.ElideRight elide: item.GridView.isCurrentItem ? Text.ElideNone : Text.ElideRight

32
components/filedialog/HeaderBar.qml
View file

@ -4,15 +4,15 @@ import ".."
import QtQuick import QtQuick
import QtQuick.Layouts import QtQuick.Layouts
import qs.services import qs.services
import qs.config import Caelestia.Config
StyledRect { StyledRect {
id: root id: root
required property var dialog required property var dialog
implicitWidth: inner.implicitWidth + Appearance.padding.normal * 2 implicitWidth: inner.implicitWidth + Tokens.padding.normal * 2
implicitHeight: inner.implicitHeight + Appearance.padding.normal * 2 implicitHeight: inner.implicitHeight + Tokens.padding.normal * 2
color: Colours.tPalette.m3surfaceContainer color: Colours.tPalette.m3surfaceContainer
@ -20,19 +20,19 @@ StyledRect {
id: inner id: inner
anchors.fill: parent anchors.fill: parent
anchors.margins: Appearance.padding.normal anchors.margins: Tokens.padding.normal
spacing: Appearance.spacing.small spacing: Tokens.spacing.small
Item { Item {
implicitWidth: implicitHeight implicitWidth: implicitHeight
implicitHeight: upIcon.implicitHeight + Appearance.padding.small * 2 implicitHeight: upIcon.implicitHeight + Tokens.padding.small * 2
StateLayer { StateLayer {
function onClicked(): void { function onClicked(): void {
root.dialog.cwd.pop(); root.dialog.cwd.pop();
} }
radius: Appearance.rounding.small radius: Tokens.rounding.small
disabled: root.dialog.cwd.length === 1 disabled: root.dialog.cwd.length === 1
} }
@ -49,7 +49,7 @@ StyledRect {
StyledRect { StyledRect {
Layout.fillWidth: true Layout.fillWidth: true
radius: Appearance.rounding.small radius: Tokens.rounding.small
color: Colours.tPalette.m3surfaceContainerHigh color: Colours.tPalette.m3surfaceContainerHigh
implicitHeight: pathComponents.implicitHeight + pathComponents.anchors.margins * 2 implicitHeight: pathComponents.implicitHeight + pathComponents.anchors.margins * 2
@ -58,10 +58,10 @@ StyledRect {
id: pathComponents id: pathComponents
anchors.fill: parent anchors.fill: parent
anchors.margins: Appearance.padding.small / 2 anchors.margins: Tokens.padding.small / 2
anchors.leftMargin: 0 anchors.leftMargin: 0
spacing: Appearance.spacing.small spacing: Tokens.spacing.small
Repeater { Repeater {
model: root.dialog.cwd model: root.dialog.cwd
@ -76,7 +76,7 @@ StyledRect {
Loader { Loader {
asynchronous: true asynchronous: true
Layout.rightMargin: Appearance.spacing.small Layout.rightMargin: Tokens.spacing.small
active: folder.index > 0 active: folder.index > 0
sourceComponent: StyledText { sourceComponent: StyledText {
text: "/" text: "/"
@ -86,8 +86,8 @@ StyledRect {
} }
Item { Item {
implicitWidth: homeIcon.implicitWidth + (homeIcon.active ? Appearance.padding.small : 0) + folderName.implicitWidth + Appearance.padding.normal * 2 implicitWidth: homeIcon.implicitWidth + (homeIcon.active ? Tokens.padding.small : 0) + folderName.implicitWidth + Tokens.padding.normal * 2
implicitHeight: folderName.implicitHeight + Appearance.padding.small * 2 implicitHeight: folderName.implicitHeight + Tokens.padding.small * 2
Loader { Loader {
asynchronous: true asynchronous: true
@ -98,7 +98,7 @@ StyledRect {
root.dialog.cwd = root.dialog.cwd.slice(0, folder.index + 1); root.dialog.cwd = root.dialog.cwd.slice(0, folder.index + 1);
} }
radius: Appearance.rounding.small radius: Tokens.rounding.small
} }
} }
@ -109,7 +109,7 @@ StyledRect {
anchors.left: parent.left anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: Appearance.padding.normal anchors.leftMargin: Tokens.padding.normal
active: folder.index === 0 && folder.modelData === "Home" active: folder.index === 0 && folder.modelData === "Home"
sourceComponent: MaterialIcon { sourceComponent: MaterialIcon {
@ -124,7 +124,7 @@ StyledRect {
anchors.left: homeIcon.right anchors.left: homeIcon.right
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: homeIcon.active ? Appearance.padding.small : 0 anchors.leftMargin: homeIcon.active ? Tokens.padding.small : 0
text: folder.modelData text: folder.modelData
color: folder.index < root.dialog.cwd.length - 1 ? Colours.palette.m3onSurfaceVariant : Colours.palette.m3onSurface color: folder.index < root.dialog.cwd.length - 1 ? Colours.palette.m3onSurfaceVariant : Colours.palette.m3onSurface

30
components/filedialog/Sidebar.qml
View file

@ -5,7 +5,7 @@ import QtQuick.Layouts
import qs.components import qs.components
import qs.components.filedialog import qs.components.filedialog
import qs.services import qs.services
import qs.config import Caelestia.Config
StyledRect { StyledRect {
id: root id: root
@ -13,7 +13,7 @@ StyledRect {
required property var dialog required property var dialog
implicitWidth: Sizes.sidebarWidth implicitWidth: Sizes.sidebarWidth
implicitHeight: inner.implicitHeight + Appearance.padding.normal * 2 implicitHeight: inner.implicitHeight + Tokens.padding.normal * 2
color: Colours.tPalette.m3surfaceContainer color: Colours.tPalette.m3surfaceContainer
@ -23,16 +23,16 @@ StyledRect {
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
anchors.top: parent.top anchors.top: parent.top
anchors.margins: Appearance.padding.normal anchors.margins: Tokens.padding.normal
spacing: Appearance.spacing.small / 2 spacing: Tokens.spacing.small / 2
StyledText { StyledText {
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
Layout.topMargin: Appearance.padding.small / 2 Layout.topMargin: Tokens.padding.small / 2
Layout.bottomMargin: Appearance.spacing.normal Layout.bottomMargin: Tokens.spacing.normal
text: qsTr("Files") text: qsTr("Files")
color: Colours.palette.m3onSurface color: Colours.palette.m3onSurface
font.pointSize: Appearance.font.size.larger font.pointSize: Tokens.font.size.larger
font.bold: true font.bold: true
} }
@ -46,9 +46,9 @@ StyledRect {
readonly property bool selected: modelData === root.dialog.cwd[root.dialog.cwd.length - 1] readonly property bool selected: modelData === root.dialog.cwd[root.dialog.cwd.length - 1]
Layout.fillWidth: true Layout.fillWidth: true
implicitHeight: placeInner.implicitHeight + Appearance.padding.normal * 2 implicitHeight: placeInner.implicitHeight + Tokens.padding.normal * 2
radius: Appearance.rounding.full radius: Tokens.rounding.full
color: Qt.alpha(Colours.palette.m3secondaryContainer, selected ? 1 : 0) color: Qt.alpha(Colours.palette.m3secondaryContainer, selected ? 1 : 0)
StateLayer { StateLayer {
@ -66,11 +66,11 @@ StyledRect {
id: placeInner id: placeInner
anchors.fill: parent anchors.fill: parent
anchors.margins: Appearance.padding.normal anchors.margins: Tokens.padding.normal
anchors.leftMargin: Appearance.padding.large anchors.leftMargin: Tokens.padding.large
anchors.rightMargin: Appearance.padding.large anchors.rightMargin: Tokens.padding.large
spacing: Appearance.spacing.normal spacing: Tokens.spacing.normal
MaterialIcon { MaterialIcon {
text: { text: {
@ -92,7 +92,7 @@ StyledRect {
return "folder"; return "folder";
} }
color: place.selected ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface color: place.selected ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface
font.pointSize: Appearance.font.size.large font.pointSize: Tokens.font.size.large
fill: place.selected ? 1 : 0 fill: place.selected ? 1 : 0
Behavior on fill { Behavior on fill {
@ -104,7 +104,7 @@ StyledRect {
Layout.fillWidth: true Layout.fillWidth: true
text: place.modelData text: place.modelData
color: place.selected ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface color: place.selected ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface
font.pointSize: Appearance.font.size.normal font.pointSize: Tokens.font.size.normal
elide: Text.ElideRight elide: Text.ElideRight
} }
} }

16
components/widgets/ExtraIndicator.qml
View file

@ -2,19 +2,19 @@ import ".."
import "../effects" import "../effects"
import QtQuick import QtQuick
import qs.services import qs.services
import qs.config import Caelestia.Config
StyledRect { StyledRect {
required property int extra required property int extra
anchors.right: parent.right anchors.right: parent.right
anchors.margins: Appearance.padding.normal anchors.margins: Tokens.padding.normal
color: Colours.palette.m3tertiary color: Colours.palette.m3tertiary
radius: Appearance.rounding.small radius: Tokens.rounding.small
implicitWidth: count.implicitWidth + Appearance.padding.normal * 2 implicitWidth: count.implicitWidth + Tokens.padding.normal * 2
implicitHeight: count.implicitHeight + Appearance.padding.small * 2 implicitHeight: count.implicitHeight + Tokens.padding.small * 2
opacity: extra > 0 ? 1 : 0 opacity: extra > 0 ? 1 : 0
scale: extra > 0 ? 1 : 0.5 scale: extra > 0 ? 1 : 0.5
@ -38,14 +38,14 @@ StyledRect {
Behavior on opacity { Behavior on opacity {
Anim { Anim {
duration: Appearance.anim.durations.expressiveFastSpatial duration: Tokens.anim.durations.expressiveFastSpatial
} }
} }
Behavior on scale { Behavior on scale {
Anim { Anim {
duration: Appearance.anim.durations.expressiveFastSpatial duration: Tokens.anim.durations.expressiveFastSpatial
easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial easing.bezierCurve: Tokens.anim.curves.expressiveFastSpatial
} }
} }
} }

14
config/Appearance.qml
View file

@ -1,14 +0,0 @@
pragma Singleton
import Quickshell
Singleton {
// Literally just here to shorten accessing stuff :woe:
// Also kinda so I can keep accessing it with `Appearance.xxx` instead of `Config.appearance.xxx`
readonly property AppearanceConfig.Rounding rounding: Config.appearance.rounding // qmllint disable missing-property
readonly property AppearanceConfig.Spacing spacing: Config.appearance.spacing // qmllint disable missing-property
readonly property AppearanceConfig.Padding padding: Config.appearance.padding // qmllint disable missing-property
readonly property AppearanceConfig.FontStuff font: Config.appearance.font // qmllint disable missing-property
readonly property AppearanceConfig.Anim anim: Config.appearance.anim // qmllint disable missing-property
readonly property AppearanceConfig.Transparency transparency: Config.appearance.transparency // qmllint disable missing-property
}

94
config/AppearanceConfig.qml
View file

@ -1,94 +0,0 @@
import Quickshell.Io
JsonObject {
property Rounding rounding: Rounding {}
property Spacing spacing: Spacing {}
property Padding padding: Padding {}
property FontStuff font: FontStuff {}
property Anim anim: Anim {}
property Transparency transparency: Transparency {}
component Rounding: JsonObject {
property real scale: 1
property int small: 12 * scale
property int normal: 17 * scale
property int large: 25 * scale
property int full: 1000 * scale
}
component Spacing: JsonObject {
property real scale: 1
property int small: 7 * scale
property int smaller: 10 * scale
property int normal: 12 * scale
property int larger: 15 * scale
property int large: 20 * scale
}
component Padding: JsonObject {
property real scale: 1
property int small: 5 * scale
property int smaller: 7 * scale
property int normal: 10 * scale
property int larger: 12 * scale
property int large: 15 * scale
}
component FontFamily: JsonObject {
property string sans: "Rubik"
property string mono: "CaskaydiaCove NF"
property string material: "Material Symbols Rounded"
property string clock: "Rubik"
}
component FontSize: JsonObject {
property real scale: 1
property int small: 11 * scale
property int smaller: 12 * scale
property int normal: 13 * scale
property int larger: 15 * scale
property int large: 18 * scale
property int extraLarge: 28 * scale
}
component FontStuff: JsonObject {
property FontFamily family: FontFamily {}
property FontSize size: FontSize {}
}
component AnimCurves: JsonObject {
property list<real> emphasized: [0.05, 0, 2 / 15, 0.06, 1 / 6, 0.4, 5 / 24, 0.82, 0.25, 1, 1, 1]
property list<real> emphasizedAccel: [0.3, 0, 0.8, 0.15, 1, 1]
property list<real> emphasizedDecel: [0.05, 0.7, 0.1, 1, 1, 1]
property list<real> standard: [0.2, 0, 0, 1, 1, 1]
property list<real> standardAccel: [0.3, 0, 1, 1, 1, 1]
property list<real> standardDecel: [0, 0, 0, 1, 1, 1]
property list<real> expressiveFastSpatial: [0.42, 1.67, 0.21, 0.9, 1, 1]
property list<real> expressiveDefaultSpatial: [0.38, 1.21, 0.22, 1, 1, 1]
property list<real> expressiveSlowSpatial: [0.39, 1.29, 0.35, 0.98, 1, 1]
}
component AnimDurations: JsonObject {
property real scale: 1
property int small: 200 * scale
property int normal: 400 * scale
property int large: 600 * scale
property int extraLarge: 1000 * scale
property int expressiveFastSpatial: 350 * scale
property int expressiveDefaultSpatial: 500 * scale
property int expressiveSlowSpatial: 650 * scale
}
component Anim: JsonObject {
property real mediaGifSpeedAdjustment: 300
property real sessionGifSpeed: 0.7
property AnimCurves curves: AnimCurves {}
property AnimDurations durations: AnimDurations {}
}
component Transparency: JsonObject {
property bool enabled: false
property real base: 0.85
property real layers: 0.4
}
}

37
config/BackgroundConfig.qml
View file

@ -1,37 +0,0 @@
import Quickshell.Io
JsonObject {
property bool enabled: true
property bool wallpaperEnabled: true
property DesktopClock desktopClock: DesktopClock {}
property Visualiser visualiser: Visualiser {}
component DesktopClock: JsonObject {
property bool enabled: false
property real scale: 1.0
property string position: "bottom-right"
property bool invertColors: false
property DesktopClockBackground background: DesktopClockBackground {}
property DesktopClockShadow shadow: DesktopClockShadow {}
}
component DesktopClockBackground: JsonObject {
property bool enabled: false
property real opacity: 0.7
property bool blur: true
}
component DesktopClockShadow: JsonObject {
property bool enabled: true
property real opacity: 0.7
property real blur: 0.4
}
component Visualiser: JsonObject {
property bool enabled: false
property bool autoHide: true
property bool blur: false
property real rounding: 1
property real spacing: 1
}
}

129
config/BarConfig.qml
View file

@ -1,129 +0,0 @@
import Quickshell.Io
JsonObject {
property bool persistent: true
property bool showOnHover: true
property int dragThreshold: 20
property ScrollActions scrollActions: ScrollActions {}
property Popouts popouts: Popouts {}
property Workspaces workspaces: Workspaces {}
property ActiveWindow activeWindow: ActiveWindow {}
property Tray tray: Tray {}
property Status status: Status {}
property Clock clock: Clock {}
property Sizes sizes: Sizes {}
property list<string> excludedScreens: []
property list<var> entries: [
{
id: "logo",
enabled: true
},
{
id: "workspaces",
enabled: true
},
{
id: "spacer",
enabled: true
},
{
id: "activeWindow",
enabled: true
},
{
id: "spacer",
enabled: true
},
{
id: "tray",
enabled: true
},
{
id: "clock",
enabled: true
},
{
id: "statusIcons",
enabled: true
},
{
id: "power",
enabled: true
}
]
component ScrollActions: JsonObject {
property bool workspaces: true
property bool volume: true
property bool brightness: true
}
component Popouts: JsonObject {
property bool activeWindow: true
property bool tray: true
property bool statusIcons: true
}
component Workspaces: JsonObject {
property int shown: 5
property bool activeIndicator: true
property bool occupiedBg: false
property bool showWindows: true
property bool showWindowsOnSpecialWorkspaces: showWindows
property int maxWindowIcons: 0 // 0 = unlimited
property bool activeTrail: false
property bool perMonitorWorkspaces: true
property string label: " " // if empty, will show workspace name's first letter
property string occupiedLabel: "󰮯"
property string activeLabel: "󰮯"
property string capitalisation: "preserve" // upper, lower, or preserve - relevant only if label is empty
property list<var> specialWorkspaceIcons: []
property list<var> windowIcons: [
{
regex: "steam(_app_(default|[0-9]+))?",
icon: "sports_esports"
}
]
}
component ActiveWindow: JsonObject {
property bool compact: false
property bool inverted: false
property bool showOnHover: true
}
component Tray: JsonObject {
property bool background: false
property bool recolour: false
property bool compact: false
property list<var> iconSubs: []
property list<string> hiddenIcons: []
}
component Status: JsonObject {
property bool showAudio: false
property bool showMicrophone: false
property bool showKbLayout: false
property bool showNetwork: true
property bool showWifi: true
property bool showBluetooth: true
property bool showBattery: true
property bool showLockStatus: true
}
component Clock: JsonObject {
property bool background: false
property bool showDate: false
property bool showIcon: true
}
component Sizes: JsonObject {
property int innerWidth: 40
property int windowPreviewSize: 400
property int trayMenuWidth: 300
property int batteryWidth: 250
property int networkWidth: 320
property int kbLayoutWidth: 320
}
}

10
config/BorderConfig.qml
View file

@ -1,10 +0,0 @@
import Quickshell.Io
import qs.config
JsonObject {
property int thickness: Config.appearance.padding.normal
property int rounding: Config.appearance.rounding.large
readonly property int minThickness: 2
readonly property int clampedThickness: Math.max(minThickness, thickness)
}

500
config/Config.qml
View file

@ -1,500 +0,0 @@
pragma Singleton
import QtQuick
import Quickshell
import Quickshell.Io
import Caelestia
import qs.utils
Singleton {
id: root
property alias appearance: adapter.appearance
property alias general: adapter.general
property alias background: adapter.background
property alias bar: adapter.bar
property alias border: adapter.border
property alias dashboard: adapter.dashboard
property alias controlCenter: adapter.controlCenter
property alias launcher: adapter.launcher
property alias notifs: adapter.notifs
property alias osd: adapter.osd
property alias session: adapter.session
property alias winfo: adapter.winfo
property alias lock: adapter.lock
property alias utilities: adapter.utilities
property alias sidebar: adapter.sidebar
property alias services: adapter.services
property alias paths: adapter.paths
property bool recentlySaved: false
// Public save function - call this to persist config changes
function save(): void {
saveTimer.restart();
recentlySaved = true;
recentSaveCooldown.restart();
}
// Helper function to serialize the config object
function serializeConfig(): var {
return {
appearance: serializeAppearance(),
general: serializeGeneral(),
background: serializeBackground(),
bar: serializeBar(),
border: serializeBorder(),
dashboard: serializeDashboard(),
controlCenter: serializeControlCenter(),
launcher: serializeLauncher(),
notifs: serializeNotifs(),
osd: serializeOsd(),
session: serializeSession(),
winfo: serializeWinfo(),
lock: serializeLock(),
utilities: serializeUtilities(),
sidebar: serializeSidebar(),
services: serializeServices(),
paths: serializePaths()
};
}
function serializeAppearance(): var {
return {
rounding: {
scale: appearance.rounding.scale
},
spacing: {
scale: appearance.spacing.scale
},
padding: {
scale: appearance.padding.scale
},
font: {
family: {
sans: appearance.font.family.sans,
mono: appearance.font.family.mono,
material: appearance.font.family.material,
clock: appearance.font.family.clock
},
size: {
scale: appearance.font.size.scale
}
},
anim: {
mediaGifSpeedAdjustment: 300,
sessionGifSpeed: 0.7,
durations: {
scale: appearance.anim.durations.scale
}
},
transparency: {
enabled: appearance.transparency.enabled,
base: appearance.transparency.base,
layers: appearance.transparency.layers
}
};
}
function serializeGeneral(): var {
return {
logo: general.logo,
excludedScreens: general.excludedScreens,
apps: {
terminal: general.apps.terminal,
audio: general.apps.audio,
playback: general.apps.playback,
explorer: general.apps.explorer
},
idle: {
lockBeforeSleep: general.idle.lockBeforeSleep,
inhibitWhenAudio: general.idle.inhibitWhenAudio,
timeouts: general.idle.timeouts
},
battery: {
warnLevels: general.battery.warnLevels,
criticalLevel: general.battery.criticalLevel
}
};
}
function serializeBackground(): var {
return {
enabled: background.enabled,
wallpaperEnabled: background.wallpaperEnabled,
desktopClock: {
enabled: background.desktopClock.enabled,
scale: background.desktopClock.scale,
position: background.desktopClock.position,
invertColors: background.desktopClock.invertColors,
background: {
enabled: background.desktopClock.background.enabled,
opacity: background.desktopClock.background.opacity,
blur: background.desktopClock.background.blur
},
shadow: {
enabled: background.desktopClock.shadow.enabled,
opacity: background.desktopClock.shadow.opacity,
blur: background.desktopClock.shadow.blur
}
},
visualiser: {
enabled: background.visualiser.enabled,
autoHide: background.visualiser.autoHide,
blur: background.visualiser.blur,
rounding: background.visualiser.rounding,
spacing: background.visualiser.spacing
}
};
}
function serializeBar(): var {
return {
persistent: bar.persistent,
showOnHover: bar.showOnHover,
dragThreshold: bar.dragThreshold,
scrollActions: {
workspaces: bar.scrollActions.workspaces,
volume: bar.scrollActions.volume,
brightness: bar.scrollActions.brightness
},
popouts: {
activeWindow: bar.popouts.activeWindow,
tray: bar.popouts.tray,
statusIcons: bar.popouts.statusIcons
},
workspaces: {
shown: bar.workspaces.shown,
activeIndicator: bar.workspaces.activeIndicator,
occupiedBg: bar.workspaces.occupiedBg,
showWindows: bar.workspaces.showWindows,
showWindowsOnSpecialWorkspaces: bar.workspaces.showWindowsOnSpecialWorkspaces,
maxWindowIcons: bar.workspaces.maxWindowIcons,
activeTrail: bar.workspaces.activeTrail,
perMonitorWorkspaces: bar.workspaces.perMonitorWorkspaces,
label: bar.workspaces.label,
occupiedLabel: bar.workspaces.occupiedLabel,
activeLabel: bar.workspaces.activeLabel,
capitalisation: bar.workspaces.capitalisation,
specialWorkspaceIcons: bar.workspaces.specialWorkspaceIcons,
windowIcons: bar.workspaces.windowIcons
},
activeWindow: {
compact: bar.activeWindow.compact,
inverted: bar.activeWindow.inverted,
showOnHover: bar.activeWindow.showOnHover
},
tray: {
background: bar.tray.background,
recolour: bar.tray.recolour,
compact: bar.tray.compact,
iconSubs: bar.tray.iconSubs,
hiddenIcons: bar.tray.hiddenIcons
},
status: {
showAudio: bar.status.showAudio,
showMicrophone: bar.status.showMicrophone,
showKbLayout: bar.status.showKbLayout,
showNetwork: bar.status.showNetwork,
showWifi: bar.status.showWifi,
showBluetooth: bar.status.showBluetooth,
showBattery: bar.status.showBattery,
showLockStatus: bar.status.showLockStatus
},
clock: {
background: bar.clock.background,
showDate: bar.clock.showDate,
showIcon: bar.clock.showIcon
},
entries: bar.entries,
excludedScreens: bar.excludedScreens
};
}
function serializeBorder(): var {
return {
thickness: border.thickness,
rounding: border.rounding
};
}
function serializeDashboard(): var {
return {
enabled: dashboard.enabled,
showOnHover: dashboard.showOnHover,
mediaUpdateInterval: dashboard.mediaUpdateInterval,
resourceUpdateInterval: dashboard.resourceUpdateInterval,
dragThreshold: dashboard.dragThreshold,
performance: {
showBattery: dashboard.performance.showBattery,
showGpu: dashboard.performance.showGpu,
showCpu: dashboard.performance.showCpu,
showMemory: dashboard.performance.showMemory,
showStorage: dashboard.performance.showStorage,
showNetwork: dashboard.performance.showNetwork
}
};
}
function serializeControlCenter(): var {
return {};
}
function serializeLauncher(): var {
return {
enabled: launcher.enabled,
showOnHover: launcher.showOnHover,
maxShown: launcher.maxShown,
maxWallpapers: launcher.maxWallpapers,
specialPrefix: launcher.specialPrefix,
actionPrefix: launcher.actionPrefix,
enableDangerousActions: launcher.enableDangerousActions,
dragThreshold: launcher.dragThreshold,
vimKeybinds: launcher.vimKeybinds,
favouriteApps: launcher.favouriteApps,
hiddenApps: launcher.hiddenApps,
useFuzzy: {
apps: launcher.useFuzzy.apps,
actions: launcher.useFuzzy.actions,
schemes: launcher.useFuzzy.schemes,
variants: launcher.useFuzzy.variants,
wallpapers: launcher.useFuzzy.wallpapers
},
actions: launcher.actions
};
}
function serializeNotifs(): var {
return {
expire: notifs.expire,
fullscreen: notifs.fullscreen,
defaultExpireTimeout: notifs.defaultExpireTimeout,
clearThreshold: notifs.clearThreshold,
expandThreshold: notifs.expandThreshold,
actionOnClick: notifs.actionOnClick,
groupPreviewNum: notifs.groupPreviewNum,
openExpanded: notifs.openExpanded
};
}
function serializeOsd(): var {
return {
enabled: osd.enabled,
hideDelay: osd.hideDelay,
enableBrightness: osd.enableBrightness,
enableMicrophone: osd.enableMicrophone
};
}
function serializeSession(): var {
return {
enabled: session.enabled,
dragThreshold: session.dragThreshold,
vimKeybinds: session.vimKeybinds,
icons: {
logout: session.icons.logout,
shutdown: session.icons.shutdown,
hibernate: session.icons.hibernate,
reboot: session.icons.reboot
},
commands: {
logout: session.commands.logout,
shutdown: session.commands.shutdown,
hibernate: session.commands.hibernate,
reboot: session.commands.reboot
}
};
}
function serializeWinfo(): var {
return {};
}
function serializeLock(): var {
return {
recolourLogo: lock.recolourLogo,
enableFprint: lock.enableFprint,
maxFprintTries: lock.maxFprintTries,
hideNotifs: lock.hideNotifs
};
}
function serializeUtilities(): var {
const vpnProviders = [];
for (let i = 0; i < utilities.vpn.provider.length; i++) {
const p = utilities.vpn.provider[i];
const provider = {
displayName: p.displayName,
enabled: p.enabled,
interface: p.interface,
name: p.name
};
if (p.connectCmd && p.connectCmd.length > 0) {
provider.connectCmd = p.connectCmd;
}
if (p.disconnectCmd && p.disconnectCmd.length > 0) {
provider.disconnectCmd = p.disconnectCmd;
}
vpnProviders.push(provider);
}
return {
enabled: utilities.enabled,
maxToasts: utilities.maxToasts,
toasts: {
configLoaded: utilities.toasts.configLoaded,
fullscreen: utilities.toasts.fullscreen,
chargingChanged: utilities.toasts.chargingChanged,
gameModeChanged: utilities.toasts.gameModeChanged,
dndChanged: utilities.toasts.dndChanged,
audioOutputChanged: utilities.toasts.audioOutputChanged,
audioInputChanged: utilities.toasts.audioInputChanged,
capsLockChanged: utilities.toasts.capsLockChanged,
numLockChanged: utilities.toasts.numLockChanged,
kbLayoutChanged: utilities.toasts.kbLayoutChanged,
vpnChanged: utilities.toasts.vpnChanged,
nowPlaying: utilities.toasts.nowPlaying
},
vpn: {
enabled: utilities.vpn.enabled,
provider: vpnProviders
},
quickToggles: utilities.quickToggles
};
}
function serializeSidebar(): var {
return {
enabled: sidebar.enabled,
dragThreshold: sidebar.dragThreshold
};
}
function serializeServices(): var {
return {
weatherLocation: services.weatherLocation,
useFahrenheit: services.useFahrenheit,
useFahrenheitPerformance: services.useFahrenheitPerformance,
useTwelveHourClock: services.useTwelveHourClock,
gpuType: services.gpuType,
visualiserBars: services.visualiserBars,
audioIncrement: services.audioIncrement,
brightnessIncrement: services.brightnessIncrement,
maxVolume: services.maxVolume,
smartScheme: services.smartScheme,
defaultPlayer: services.defaultPlayer,
playerAliases: services.playerAliases,
showLyrics: services.showLyrics,
lyricsBackend: services.lyricsBackend
};
}
function serializePaths(): var {
return {
wallpaperDir: paths.wallpaperDir,
lyricsDir: paths.lyricsDir,
sessionGif: paths.sessionGif,
mediaGif: paths.mediaGif,
noNotifsPic: paths.noNotifsPic,
lockNoNotifsPic: paths.lockNoNotifsPic
};
}
ElapsedTimer {
id: timer
}
Timer {
id: saveTimer
interval: 500
onTriggered: {
timer.restart();
try {
// Parse current config to preserve structure and comments if possible
let config = {};
try {
config = JSON.parse(fileView.text());
} catch (e) {
// If parsing fails, start with empty object
config = {};
}
// Update config with current values
config = root.serializeConfig();
// Save to file with pretty printing
fileView.setText(JSON.stringify(config, null, 2));
} catch (e) {
Toaster.toast(qsTr("Failed to serialize config"), e.message, "settings_alert", Toast.Error);
}
}
}
Timer {
id: recentSaveCooldown
interval: 2000
onTriggered: {
root.recentlySaved = false;
}
}
FileView {
id: fileView
path: `${Paths.config}/shell.json`
watchChanges: true
onFileChanged: {
// Prevent reload loop - don't reload if we just saved
if (!root.recentlySaved) {
timer.restart();
reload();
} else {
// Self-initiated save - reload without toast
reload();
}
}
onLoaded: {
try {
JSON.parse(text());
const elapsed = timer.elapsedMs();
// Only show toast for external changes (not our own saves) and when elapsed time is meaningful
if (adapter.utilities.toasts.configLoaded && !root.recentlySaved && elapsed > 0) { // qmllint disable unresolved-type
Toaster.toast(qsTr("Config loaded"), qsTr("Config loaded in %1ms").arg(elapsed), "rule_settings"); // qmllint disable unresolved-type
} else if (adapter.utilities.toasts.configLoaded && root.recentlySaved && elapsed > 0) { // qmllint disable unresolved-type
Toaster.toast(qsTr("Config saved"), qsTr("Config reloaded in %1ms").arg(elapsed), "rule_settings");
}
} catch (e) {
Toaster.toast(qsTr("Failed to load config"), e.message, "settings_alert", Toast.Error);
}
}
onLoadFailed: err => {
if (err !== FileViewError.FileNotFound)
Toaster.toast(qsTr("Failed to read config file"), FileViewError.toString(err), "settings_alert", Toast.Warning);
}
onSaveFailed: err => Toaster.toast(qsTr("Failed to save config"), FileViewError.toString(err), "settings_alert", Toast.Error)
JsonAdapter { // qmllint disable unresolved-type
id: adapter
property AppearanceConfig appearance: AppearanceConfig {}
property GeneralConfig general: GeneralConfig {}
property BackgroundConfig background: BackgroundConfig {}
property BarConfig bar: BarConfig {}
property BorderConfig border: BorderConfig {}
property DashboardConfig dashboard: DashboardConfig {}
property ControlCenterConfig controlCenter: ControlCenterConfig {}
property LauncherConfig launcher: LauncherConfig {}
property NotifsConfig notifs: NotifsConfig {}
property OsdConfig osd: OsdConfig {}
property SessionConfig session: SessionConfig {}
property WInfoConfig winfo: WInfoConfig {}
property LockConfig lock: LockConfig {}
property UtilitiesConfig utilities: UtilitiesConfig {}
property SidebarConfig sidebar: SidebarConfig {}
property ServiceConfig services: ServiceConfig {}
property UserPaths paths: UserPaths {}
}
}
}

10
config/ControlCenterConfig.qml
View file

@ -1,10 +0,0 @@
import Quickshell.Io
JsonObject {
property Sizes sizes: Sizes {}
component Sizes: JsonObject {
property real heightMult: 0.7
property real ratio: 16 / 9
}
}

40
config/DashboardConfig.qml
View file

@ -1,40 +0,0 @@
import Quickshell.Io
JsonObject {
property bool enabled: true
property bool showOnHover: true
property int mediaUpdateInterval: 500
property int resourceUpdateInterval: 1000
property int dragThreshold: 50
property bool showDashboard: true
property bool showMedia: true
property bool showPerformance: true
property bool showWeather: true
property Sizes sizes: Sizes {}
property Performance performance: Performance {}
component Performance: JsonObject {
property bool showBattery: true
property bool showGpu: true
property bool showCpu: true
property bool showMemory: true
property bool showStorage: true
property bool showNetwork: true
}
component Sizes: JsonObject {
readonly property int tabIndicatorHeight: 3
readonly property int tabIndicatorSpacing: 5
readonly property int infoWidth: 200
readonly property int infoIconSize: 25
readonly property int dateTimeWidth: 110
readonly property int mediaWidth: 200
readonly property int mediaProgressSweep: 180
readonly property int mediaProgressThickness: 8
readonly property int resourceProgessThickness: 10
readonly property int weatherWidth: 250
readonly property int mediaCoverArtSize: 150
readonly property int mediaVisualiserSize: 80
readonly property int resourceSize: 200
}
}

61
config/GeneralConfig.qml
View file

@ -1,61 +0,0 @@
import Quickshell.Io
JsonObject {
property string logo: ""
property list<string> excludedScreens: []
property Apps apps: Apps {}
property Idle idle: Idle {}
property Battery battery: Battery {}
component Apps: JsonObject {
property list<string> terminal: ["foot"]
property list<string> audio: ["pavucontrol"]
property list<string> playback: ["mpv"]
property list<string> explorer: ["thunar"]
}
component Idle: JsonObject {
property bool lockBeforeSleep: true
property bool inhibitWhenAudio: true
property list<var> timeouts: [
{
timeout: 180,
idleAction: "lock"
},
{
timeout: 300,
idleAction: "dpms off",
returnAction: "dpms on"
},
{
timeout: 600,
idleAction: ["systemctl", "suspend-then-hibernate"]
}
]
}
component Battery: JsonObject {
property list<var> warnLevels: [
{
level: 20,
title: qsTr("Low battery"),
message: qsTr("You might want to plug in a charger"),
icon: "battery_android_frame_2"
},
{
level: 10,
title: qsTr("Did you see the previous message?"),
message: qsTr("You should probably plug in a charger <b>now</b>"),
icon: "battery_android_frame_1"
},
{
level: 5,
title: qsTr("Critical battery level"),
message: qsTr("PLUG THE CHARGER RIGHT NOW!!"),
icon: "battery_android_alert",
critical: true
},
]
property int criticalLevel: 3
}
}

147
config/LauncherConfig.qml
View file

@ -1,147 +0,0 @@
import Quickshell.Io
JsonObject {
property bool enabled: true
property bool showOnHover: false
property int maxShown: 7
property int maxWallpapers: 9 // Warning: even numbers look bad
property string specialPrefix: "@"
property string actionPrefix: ">"
property bool enableDangerousActions: false // Allow actions that can cause losing data, like shutdown, reboot and logout
property int dragThreshold: 50
property bool vimKeybinds: false
property list<string> favouriteApps: []
property list<string> hiddenApps: []
property UseFuzzy useFuzzy: UseFuzzy {}
property Sizes sizes: Sizes {}
property list<var> actions: [
{
name: "Calculator",
icon: "calculate",
description: "Do simple math equations (powered by Qalc)",
command: ["autocomplete", "calc"],
enabled: true,
dangerous: false
},
{
name: "Scheme",
icon: "palette",
description: "Change the current colour scheme",
command: ["autocomplete", "scheme"],
enabled: true,
dangerous: false
},
{
name: "Wallpaper",
icon: "image",
description: "Change the current wallpaper",
command: ["autocomplete", "wallpaper"],
enabled: true,
dangerous: false
},
{
name: "Variant",
icon: "colors",
description: "Change the current scheme variant",
command: ["autocomplete", "variant"],
enabled: true,
dangerous: false
},
{
name: "Transparency",
icon: "opacity",
description: "Change shell transparency",
command: ["autocomplete", "transparency"],
enabled: false,
dangerous: false
},
{
name: "Random",
icon: "casino",
description: "Switch to a random wallpaper",
command: ["caelestia", "wallpaper", "-r"],
enabled: true,
dangerous: false
},
{
name: "Light",
icon: "light_mode",
description: "Change the scheme to light mode",
command: ["setMode", "light"],
enabled: true,
dangerous: false
},
{
name: "Dark",
icon: "dark_mode",
description: "Change the scheme to dark mode",
command: ["setMode", "dark"],
enabled: true,
dangerous: false
},
{
name: "Shutdown",
icon: "power_settings_new",
description: "Shutdown the system",
command: ["systemctl", "poweroff"],
enabled: true,
dangerous: true
},
{
name: "Reboot",
icon: "cached",
description: "Reboot the system",
command: ["systemctl", "reboot"],
enabled: true,
dangerous: true
},
{
name: "Logout",
icon: "exit_to_app",
description: "Log out of the current session",
command: ["loginctl", "terminate-user", ""],
enabled: true,
dangerous: true
},
{
name: "Lock",
icon: "lock",
description: "Lock the current session",
command: ["loginctl", "lock-session"],
enabled: true,
dangerous: false
},
{
name: "Sleep",
icon: "bedtime",
description: "Suspend then hibernate",
command: ["systemctl", "suspend-then-hibernate"],
enabled: true,
dangerous: false
},
{
name: "Settings",
icon: "settings",
description: "Configure the shell",
command: ["caelestia", "shell", "controlCenter", "open"],
enabled: true,
dangerous: false
}
]
component UseFuzzy: JsonObject {
property bool apps: false
property bool actions: false
property bool schemes: false
property bool variants: false
property bool wallpapers: false
}
component Sizes: JsonObject {
property int itemWidth: 600
property int itemHeight: 57
property int wallpaperWidth: 280
property int wallpaperHeight: 200
}
}

15
config/LockConfig.qml
View file

@ -1,15 +0,0 @@
import Quickshell.Io
JsonObject {
property bool recolourLogo: false
property bool enableFprint: true
property int maxFprintTries: 3
property bool hideNotifs: false
property Sizes sizes: Sizes {}
component Sizes: JsonObject {
property real heightMult: 0.7
property real ratio: 16 / 9
property int centerWidth: 600
}
}

19
config/NotifsConfig.qml
View file

@ -1,19 +0,0 @@
import Quickshell.Io
JsonObject {
property bool expire: true
property string fullscreen: "on"
property int defaultExpireTimeout: 5000
property real clearThreshold: 0.3
property int expandThreshold: 20
property bool actionOnClick: false
property int groupPreviewNum: 3
property bool openExpanded: false // Show the notifichation in expanded state when opening
property Sizes sizes: Sizes {}
component Sizes: JsonObject {
property int width: 400
property int image: 41
property int badge: 20
}
}

14
config/OsdConfig.qml
View file

@ -1,14 +0,0 @@
import Quickshell.Io
JsonObject {
property bool enabled: true
property int hideDelay: 2000
property bool enableBrightness: true
property bool enableMicrophone: false
property Sizes sizes: Sizes {}
component Sizes: JsonObject {
property int sliderWidth: 30
property int sliderHeight: 150
}
}

24
config/ServiceConfig.qml
View file

@ -1,24 +0,0 @@
import QtQuick
import Quickshell.Io
JsonObject {
property string weatherLocation: "" // A lat,long pair or empty for autodetection, e.g. "37.8267,-122.4233"
property bool useFahrenheit: [Locale.ImperialUSSystem, Locale.ImperialSystem].includes(Qt.locale().measurementSystem)
property bool useFahrenheitPerformance: [Locale.ImperialUSSystem, Locale.ImperialSystem].includes(Qt.locale().measurementSystem)
property bool useTwelveHourClock: Qt.locale().timeFormat(Locale.ShortFormat).toLowerCase().includes("a")
property string gpuType: ""
property int visualiserBars: 45
property real audioIncrement: 0.1
property real brightnessIncrement: 0.1
property real maxVolume: 1.0
property bool smartScheme: true
property string defaultPlayer: "Spotify"
property list<var> playerAliases: [
{
"from": "com.github.th_ch.youtube_music",
"to": "YT Music"
}
]
property bool showLyrics: false
property string lyricsBackend: "Auto"
}

29
config/SessionConfig.qml
View file

@ -1,29 +0,0 @@
import Quickshell.Io
JsonObject {
property bool enabled: true
property int dragThreshold: 30
property bool vimKeybinds: false
property Icons icons: Icons {}
property Commands commands: Commands {}
property Sizes sizes: Sizes {}
component Icons: JsonObject {
property string logout: "logout"
property string shutdown: "power_settings_new"
property string hibernate: "downloading"
property string reboot: "cached"
}
component Commands: JsonObject {
property list<string> logout: ["loginctl", "terminate-user", ""]
property list<string> shutdown: ["systemctl", "poweroff"]
property list<string> hibernate: ["systemctl", "hibernate"]
property list<string> reboot: ["systemctl", "reboot"]
}
component Sizes: JsonObject {
property int button: 80
}
}

11
config/SidebarConfig.qml
View file

@ -1,11 +0,0 @@
import Quickshell.Io
JsonObject {
property bool enabled: true
property int dragThreshold: 80
property Sizes sizes: Sizes {}
component Sizes: JsonObject {
property int width: 430
}
}

11
config/UserPaths.qml
View file

@ -1,11 +0,0 @@
import Quickshell.Io
import qs.utils
JsonObject {
property string wallpaperDir: `${Paths.pictures}/Wallpapers`
property string lyricsDir: `${Paths.home}/Music/lyrics/`
property string sessionGif: "root:/assets/kurukuru.gif"
property string mediaGif: "root:/assets/bongocat.gif"
property string noNotifsPic: "root:/assets/dino.png"
property string lockNoNotifsPic: "root:/assets/dino.png"
}

67
config/UtilitiesConfig.qml
View file

@ -1,67 +0,0 @@
import Quickshell.Io
JsonObject {
property bool enabled: true
property int maxToasts: 4
property Sizes sizes: Sizes {}
property Toasts toasts: Toasts {}
property Vpn vpn: Vpn {}
property list<var> quickToggles: [
{
id: "wifi",
enabled: true
},
{
id: "bluetooth",
enabled: true
},
{
id: "mic",
enabled: true
},
{
id: "settings",
enabled: true
},
{
id: "gameMode",
enabled: true
},
{
id: "dnd",
enabled: true
},
{
id: "vpn",
enabled: false
}
]
component Sizes: JsonObject {
property int width: 430
property int toastWidth: 430
}
component Toasts: JsonObject {
property bool configLoaded: true
property string fullscreen: "off"
property bool chargingChanged: true
property bool gameModeChanged: true
property bool dndChanged: true
property bool audioOutputChanged: true
property bool audioInputChanged: true
property bool capsLockChanged: true
property bool numLockChanged: true
property bool kbLayoutChanged: true
property bool kbLimit: true
property bool vpnChanged: true
property bool nowPlaying: false
}
component Vpn: JsonObject {
property bool enabled: false
property list<var> provider: []
}
}

10
config/WInfoConfig.qml
View file

@ -1,10 +0,0 @@
import Quickshell.Io
JsonObject {
property Sizes sizes: Sizes {}
component Sizes: JsonObject {
property real heightMult: 0.7
property real detailsWidth: 500
}
}

2
modules/BatteryMonitor.qml
View file

@ -2,7 +2,7 @@ import QtQuick
import Quickshell import Quickshell
import Quickshell.Services.UPower import Quickshell.Services.UPower
import Caelestia import Caelestia
import qs.config import Caelestia.Config
Scope { Scope {
id: root id: root

2
modules/IdleMonitors.qml
View file

@ -5,7 +5,7 @@ import Quickshell
import Quickshell.Wayland import Quickshell.Wayland
import Caelestia.Internal import Caelestia.Internal
import qs.services import qs.services
import qs.config import Caelestia.Config
Scope { Scope {
id: root id: root

10
modules/areapicker/Picker.qml
View file

@ -8,7 +8,7 @@ import Quickshell.Wayland
import Caelestia import Caelestia
import qs.components import qs.components
import qs.services import qs.services
import qs.config import Caelestia.Config
MouseArea { MouseArea {
id: root id: root
@ -167,7 +167,7 @@ MouseArea {
target: root target: root
property: "opacity" property: "opacity"
to: 0 to: 0
duration: Appearance.anim.durations.large duration: Tokens.anim.durations.large
} }
ExAnim { ExAnim {
target: root target: root
@ -278,7 +278,7 @@ MouseArea {
Behavior on opacity { Behavior on opacity {
Anim { Anim {
duration: Appearance.anim.durations.large duration: Tokens.anim.durations.large
} }
} }
@ -307,7 +307,7 @@ MouseArea {
} }
component ExAnim: Anim { component ExAnim: Anim {
duration: Appearance.anim.durations.expressiveDefaultSpatial duration: Tokens.anim.durations.expressiveDefaultSpatial
easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
} }
} }

10
modules/background/Background.qml
View file

@ -5,7 +5,7 @@ import Quickshell
import Quickshell.Wayland import Quickshell.Wayland
import qs.components.containers import qs.components.containers
import qs.services import qs.services
import qs.config import Caelestia.Config
Variants { Variants {
model: Config.background.enabled ? Screens.screens : [] model: Config.background.enabled ? Screens.screens : []
@ -56,8 +56,8 @@ Variants {
asynchronous: true asynchronous: true
active: Config.background.desktopClock.enabled active: Config.background.desktopClock.enabled
anchors.margins: Appearance.padding.large * 2 anchors.margins: Tokens.padding.large * 2
anchors.leftMargin: Appearance.padding.large * 2 + Config.bar.sizes.innerWidth + Math.max(Appearance.padding.smaller, Config.border.thickness) anchors.leftMargin: Tokens.padding.large * 2 + Config.bar.sizes.innerWidth + Math.max(Tokens.padding.smaller, Config.border.thickness)
state: Config.background.desktopClock.position state: Config.background.desktopClock.position
states: [ states: [
@ -146,8 +146,8 @@ Variants {
transitions: Transition { transitions: Transition {
AnchorAnimation { AnchorAnimation {
duration: Appearance.anim.durations.expressiveDefaultSpatial duration: Tokens.anim.durations.expressiveDefaultSpatial
easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
} }
} }

42
modules/background/DesktopClock.qml
View file

@ -5,7 +5,7 @@ import QtQuick.Effects
import QtQuick.Layouts import QtQuick.Layouts
import qs.components import qs.components
import qs.services import qs.services
import qs.config import Caelestia.Config
Item { Item {
id: root id: root
@ -23,8 +23,8 @@ Item {
readonly property color safeSecondary: useLightSet ? Colours.palette.m3secondaryContainer : Colours.palette.m3secondary readonly property color safeSecondary: useLightSet ? Colours.palette.m3secondaryContainer : Colours.palette.m3secondary
readonly property color safeTertiary: useLightSet ? Colours.palette.m3tertiaryContainer : Colours.palette.m3tertiary readonly property color safeTertiary: useLightSet ? Colours.palette.m3tertiaryContainer : Colours.palette.m3tertiary
implicitWidth: layout.implicitWidth + (Appearance.padding.large * 4 * root.clockScale) implicitWidth: layout.implicitWidth + (Tokens.padding.large * 4 * root.clockScale)
implicitHeight: layout.implicitHeight + (Appearance.padding.large * 2 * root.clockScale) implicitHeight: layout.implicitHeight + (Tokens.padding.large * 2 * root.clockScale)
Item { Item {
id: clockContainer id: clockContainer
@ -63,7 +63,7 @@ Item {
visible: root.bgEnabled visible: root.bgEnabled
anchors.fill: parent anchors.fill: parent
radius: Appearance.rounding.large * root.clockScale radius: Tokens.rounding.large * root.clockScale
opacity: Config.background.desktopClock.background.opacity opacity: Config.background.desktopClock.background.opacity
color: Colours.palette.m3surface color: Colours.palette.m3surface
@ -74,29 +74,29 @@ Item {
id: layout id: layout
anchors.centerIn: parent anchors.centerIn: parent
spacing: Appearance.spacing.larger * root.clockScale spacing: Tokens.spacing.larger * root.clockScale
RowLayout { RowLayout {
spacing: Appearance.spacing.small spacing: Tokens.spacing.small
StyledText { StyledText {
text: Time.hourStr text: Time.hourStr
font.pointSize: Appearance.font.size.extraLarge * 3 * root.clockScale font.pointSize: Tokens.font.size.extraLarge * 3 * root.clockScale
font.weight: Font.Bold font.weight: Font.Bold
color: root.safePrimary color: root.safePrimary
} }
StyledText { StyledText {
text: ":" text: ":"
font.pointSize: Appearance.font.size.extraLarge * 3 * root.clockScale font.pointSize: Tokens.font.size.extraLarge * 3 * root.clockScale
color: root.safeTertiary color: root.safeTertiary
opacity: 0.8 opacity: 0.8
Layout.topMargin: -Appearance.padding.large * 1.5 * root.clockScale Layout.topMargin: -Tokens.padding.large * 1.5 * root.clockScale
} }
StyledText { StyledText {
text: Time.minuteStr text: Time.minuteStr
font.pointSize: Appearance.font.size.extraLarge * 3 * root.clockScale font.pointSize: Tokens.font.size.extraLarge * 3 * root.clockScale
font.weight: Font.Bold font.weight: Font.Bold
color: root.safeSecondary color: root.safeSecondary
} }
@ -104,14 +104,14 @@ Item {
Loader { Loader {
asynchronous: true asynchronous: true
Layout.alignment: Qt.AlignTop Layout.alignment: Qt.AlignTop
Layout.topMargin: Appearance.padding.large * 1.4 * root.clockScale Layout.topMargin: Tokens.padding.large * 1.4 * root.clockScale
active: Config.services.useTwelveHourClock active: Config.services.useTwelveHourClock
visible: active visible: active
sourceComponent: StyledText { sourceComponent: StyledText {
text: Time.amPmStr text: Time.amPmStr
font.pointSize: Appearance.font.size.large * root.clockScale font.pointSize: Tokens.font.size.large * root.clockScale
color: root.safeSecondary color: root.safeSecondary
} }
} }
@ -120,9 +120,9 @@ Item {
StyledRect { StyledRect {
Layout.fillHeight: true Layout.fillHeight: true
Layout.preferredWidth: 4 * root.clockScale Layout.preferredWidth: 4 * root.clockScale
Layout.topMargin: Appearance.spacing.larger * root.clockScale Layout.topMargin: Tokens.spacing.larger * root.clockScale
Layout.bottomMargin: Appearance.spacing.larger * root.clockScale Layout.bottomMargin: Tokens.spacing.larger * root.clockScale
radius: Appearance.rounding.full radius: Tokens.rounding.full
color: root.safePrimary color: root.safePrimary
opacity: 0.8 opacity: 0.8
} }
@ -132,7 +132,7 @@ Item {
StyledText { StyledText {
text: Time.format("MMMM").toUpperCase() text: Time.format("MMMM").toUpperCase()
font.pointSize: Appearance.font.size.large * root.clockScale font.pointSize: Tokens.font.size.large * root.clockScale
font.letterSpacing: 4 font.letterSpacing: 4
font.weight: Font.Bold font.weight: Font.Bold
color: root.safeSecondary color: root.safeSecondary
@ -140,7 +140,7 @@ Item {
StyledText { StyledText {
text: Time.format("dd") text: Time.format("dd")
font.pointSize: Appearance.font.size.extraLarge * root.clockScale font.pointSize: Tokens.font.size.extraLarge * root.clockScale
font.letterSpacing: 2 font.letterSpacing: 2
font.weight: Font.Medium font.weight: Font.Medium
color: root.safePrimary color: root.safePrimary
@ -148,7 +148,7 @@ Item {
StyledText { StyledText {
text: Time.format("dddd") text: Time.format("dddd")
font.pointSize: Appearance.font.size.larger * root.clockScale font.pointSize: Tokens.font.size.larger * root.clockScale
font.letterSpacing: 2 font.letterSpacing: 2
color: root.safeSecondary color: root.safeSecondary
} }
@ -158,14 +158,14 @@ Item {
Behavior on clockScale { Behavior on clockScale {
Anim { Anim {
duration: Appearance.anim.durations.expressiveDefaultSpatial duration: Tokens.anim.durations.expressiveDefaultSpatial
easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
} }
} }
Behavior on implicitWidth { Behavior on implicitWidth {
Anim { Anim {
duration: Appearance.anim.durations.small duration: Tokens.anim.durations.small
} }
} }
} }

10
modules/background/Visualiser.qml
View file

@ -7,7 +7,7 @@ import Caelestia.Internal
import Caelestia.Services import Caelestia.Services
import qs.components import qs.components
import qs.services import qs.services
import qs.config import Caelestia.Config
Item { Item {
id: root id: root
@ -60,14 +60,14 @@ Item {
anchors.fill: parent anchors.fill: parent
anchors.margins: Config.border.thickness anchors.margins: Config.border.thickness
anchors.leftMargin: Visibilities.bars.get(root.screen).exclusiveZone + Appearance.spacing.small * Config.background.visualiser.spacing anchors.leftMargin: Visibilities.bars.get(root.screen).exclusiveZone + Tokens.spacing.small * Config.background.visualiser.spacing
values: Audio.cava.values values: Audio.cava.values
primaryColor: Qt.alpha(Colours.palette.m3primary, 0.7) primaryColor: Qt.alpha(Colours.palette.m3primary, 0.7)
secondaryColor: Qt.alpha(Colours.palette.m3inversePrimary, 0.7) secondaryColor: Qt.alpha(Colours.palette.m3inversePrimary, 0.7)
rounding: Appearance.rounding.small * Config.background.visualiser.rounding rounding: Tokens.rounding.small * Config.background.visualiser.rounding
spacing: Appearance.spacing.small * Config.background.visualiser.spacing spacing: Tokens.spacing.small * Config.background.visualiser.spacing
animationDuration: Appearance.anim.durations.normal animationDuration: Tokens.anim.durations.normal
Behavior on anchors.leftMargin { Behavior on anchors.leftMargin {
Anim {} Anim {}

18
modules/background/Wallpaper.qml
View file

@ -5,7 +5,7 @@ import qs.components
import qs.components.filedialog import qs.components.filedialog
import qs.components.images import qs.components.images
import qs.services import qs.services
import qs.config import Caelestia.Config
import qs.utils import qs.utils
Item { Item {
@ -43,30 +43,30 @@ Item {
Row { Row {
anchors.centerIn: parent anchors.centerIn: parent
spacing: Appearance.spacing.large spacing: Tokens.spacing.large
MaterialIcon { MaterialIcon {
text: "sentiment_stressed" text: "sentiment_stressed"
color: Colours.palette.m3onSurfaceVariant color: Colours.palette.m3onSurfaceVariant
font.pointSize: Appearance.font.size.extraLarge * 5 font.pointSize: Tokens.font.size.extraLarge * 5
} }
Column { Column {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
spacing: Appearance.spacing.small spacing: Tokens.spacing.small
StyledText { StyledText {
text: qsTr("Wallpaper missing?") text: qsTr("Wallpaper missing?")
color: Colours.palette.m3onSurfaceVariant color: Colours.palette.m3onSurfaceVariant
font.pointSize: Appearance.font.size.extraLarge * 2 font.pointSize: Tokens.font.size.extraLarge * 2
font.bold: true font.bold: true
} }
StyledRect { StyledRect {
implicitWidth: selectWallText.implicitWidth + Appearance.padding.large * 2 implicitWidth: selectWallText.implicitWidth + Tokens.padding.large * 2
implicitHeight: selectWallText.implicitHeight + Appearance.padding.small * 2 implicitHeight: selectWallText.implicitHeight + Tokens.padding.small * 2
radius: Appearance.rounding.full radius: Tokens.rounding.full
color: Colours.palette.m3primary color: Colours.palette.m3primary
FileDialog { FileDialog {
@ -94,7 +94,7 @@ Item {
text: qsTr("Set it now!") text: qsTr("Set it now!")
color: Colours.palette.m3onPrimary color: Colours.palette.m3onPrimary
font.pointSize: Appearance.font.size.large font.pointSize: Tokens.font.size.large
} }
} }
} }

6
modules/bar/Bar.qml
View file

@ -8,7 +8,7 @@ import QtQuick.Layouts
import Quickshell import Quickshell
import qs.components import qs.components
import qs.services import qs.services
import qs.config import Caelestia.Config
ColumnLayout { ColumnLayout {
id: root id: root
@ -17,7 +17,7 @@ ColumnLayout {
required property DrawerVisibilities visibilities required property DrawerVisibilities visibilities
required property BarPopouts.Wrapper popouts required property BarPopouts.Wrapper popouts
required property bool fullscreen required property bool fullscreen
readonly property int vPadding: Appearance.padding.large readonly property int vPadding: Tokens.padding.large
function closeTray(): void { function closeTray(): void {
if (!Config.bar.tray.compact) if (!Config.bar.tray.compact)
@ -102,7 +102,7 @@ ColumnLayout {
} }
} }
spacing: Appearance.spacing.normal spacing: Tokens.spacing.normal
Repeater { Repeater {
id: repeater id: repeater

10
modules/bar/BarWrapper.qml
View file

@ -3,7 +3,7 @@ pragma ComponentBehavior: Bound
import QtQuick import QtQuick
import Quickshell import Quickshell
import qs.components import qs.components
import qs.config import Caelestia.Config
import qs.utils import qs.utils
import qs.modules.bar.popouts as BarPopouts import qs.modules.bar.popouts as BarPopouts
@ -18,7 +18,7 @@ Item {
readonly property bool disabled: Strings.testRegexList(Config.bar.excludedScreens, screen.name) readonly property bool disabled: Strings.testRegexList(Config.bar.excludedScreens, screen.name)
readonly property int clampedWidth: Math.max(Config.border.minThickness, implicitWidth) readonly property int clampedWidth: Math.max(Config.border.minThickness, implicitWidth)
readonly property int padding: Math.max(Appearance.padding.smaller, Config.border.thickness) readonly property int padding: Math.max(Tokens.padding.smaller, Config.border.thickness)
readonly property int contentWidth: Config.bar.sizes.innerWidth + padding * 2 readonly property int contentWidth: Config.bar.sizes.innerWidth + padding * 2
readonly property int exclusiveZone: !disabled && (Config.bar.persistent || visibilities.bar) ? contentWidth : Config.border.thickness readonly property int exclusiveZone: !disabled && (Config.bar.persistent || visibilities.bar) ? contentWidth : Config.border.thickness
readonly property bool shouldBeVisible: !fullscreen && !disabled && (Config.bar.persistent || visibilities.bar || isHovered) readonly property bool shouldBeVisible: !fullscreen && !disabled && (Config.bar.persistent || visibilities.bar || isHovered)
@ -57,8 +57,8 @@ Item {
Anim { Anim {
target: root target: root
property: "implicitWidth" property: "implicitWidth"
duration: Appearance.anim.durations.expressiveDefaultSpatial duration: Tokens.anim.durations.expressiveDefaultSpatial
easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
} }
}, },
Transition { Transition {
@ -68,7 +68,7 @@ Item {
Anim { Anim {
target: root target: root
property: "implicitWidth" property: "implicitWidth"
easing.bezierCurve: Appearance.anim.curves.emphasized easing.bezierCurve: Tokens.anim.curves.emphasized
} }
} }
] ]

12
modules/bar/components/ActiveWindow.qml
View file

@ -3,7 +3,7 @@ pragma ComponentBehavior: Bound
import QtQuick import QtQuick
import qs.components import qs.components
import qs.services import qs.services
import qs.config import Caelestia.Config
import qs.utils import qs.utils
Item { Item {
@ -86,8 +86,8 @@ Item {
id: metrics id: metrics
text: root.windowTitle text: root.windowTitle
font.pointSize: Appearance.font.size.smaller font.pointSize: Tokens.font.size.smaller
font.family: Appearance.font.family.mono font.family: Tokens.font.family.mono
elide: Qt.ElideRight elide: Qt.ElideRight
elideWidth: root.maxHeight - icon.height elideWidth: root.maxHeight - icon.height
@ -101,8 +101,8 @@ Item {
Behavior on implicitHeight { Behavior on implicitHeight {
Anim { Anim {
duration: Appearance.anim.durations.expressiveDefaultSpatial duration: Tokens.anim.durations.expressiveDefaultSpatial
easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
} }
} }
@ -111,7 +111,7 @@ Item {
anchors.horizontalCenter: icon.horizontalCenter anchors.horizontalCenter: icon.horizontalCenter
anchors.top: icon.bottom anchors.top: icon.bottom
anchors.topMargin: Appearance.spacing.small anchors.topMargin: Tokens.spacing.small
font.pointSize: metrics.font.pointSize font.pointSize: metrics.font.pointSize
font.family: metrics.font.family font.family: metrics.font.family

16
modules/bar/components/Clock.qml
View file

@ -3,25 +3,25 @@ pragma ComponentBehavior: Bound
import QtQuick import QtQuick
import qs.components import qs.components
import qs.services import qs.services
import qs.config import Caelestia.Config
StyledRect { StyledRect {
id: root id: root
readonly property color colour: Colours.palette.m3tertiary readonly property color colour: Colours.palette.m3tertiary
readonly property int padding: Config.bar.clock.background ? Appearance.padding.normal : Appearance.padding.small readonly property int padding: Config.bar.clock.background ? Tokens.padding.normal : Tokens.padding.small
implicitWidth: Config.bar.sizes.innerWidth implicitWidth: Config.bar.sizes.innerWidth
implicitHeight: layout.implicitHeight + root.padding * 2 implicitHeight: layout.implicitHeight + root.padding * 2
color: Qt.alpha(Colours.tPalette.m3surfaceContainer, Config.bar.clock.background ? Colours.tPalette.m3surfaceContainer.a : 0) color: Qt.alpha(Colours.tPalette.m3surfaceContainer, Config.bar.clock.background ? Colours.tPalette.m3surfaceContainer.a : 0)
radius: Appearance.rounding.full radius: Tokens.rounding.full
Column { Column {
id: layout id: layout
anchors.centerIn: parent anchors.centerIn: parent
spacing: Appearance.spacing.small spacing: Tokens.spacing.small
Loader { Loader {
asynchronous: true asynchronous: true
@ -43,8 +43,8 @@ StyledRect {
horizontalAlignment: StyledText.AlignHCenter horizontalAlignment: StyledText.AlignHCenter
text: Time.format("ddd\nd") text: Time.format("ddd\nd")
font.pointSize: Appearance.font.size.smaller font.pointSize: Tokens.font.size.smaller
font.family: Appearance.font.family.sans font.family: Tokens.font.family.sans
color: root.colour color: root.colour
} }
@ -63,8 +63,8 @@ StyledRect {
horizontalAlignment: StyledText.AlignHCenter horizontalAlignment: StyledText.AlignHCenter
text: Time.format(Config.services.useTwelveHourClock ? "hh\nmm\nA" : "hh\nmm") text: Time.format(Config.services.useTwelveHourClock ? "hh\nmm\nA" : "hh\nmm")
font.pointSize: Appearance.font.size.smaller font.pointSize: Tokens.font.size.smaller
font.family: Appearance.font.family.mono font.family: Tokens.font.family.mono
color: root.colour color: root.colour
} }
} }

12
modules/bar/components/OsIcon.qml
View file

@ -2,14 +2,14 @@ import QtQuick
import qs.components import qs.components
import qs.components.effects import qs.components.effects
import qs.services import qs.services
import qs.config import Caelestia.Config
import qs.utils import qs.utils
Item { Item {
id: root id: root
implicitWidth: Math.round(Appearance.font.size.large * 1.2) implicitWidth: Math.round(Tokens.font.size.large * 1.2)
implicitHeight: Math.round(Appearance.font.size.large * 1.2) implicitHeight: Math.round(Tokens.font.size.large * 1.2)
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
@ -30,8 +30,8 @@ Item {
id: caelestiaLogo id: caelestiaLogo
Logo { Logo {
implicitWidth: Math.round(Appearance.font.size.large * 1.6) implicitWidth: Math.round(Tokens.font.size.large * 1.6)
implicitHeight: Math.round(Appearance.font.size.large * 1.6) implicitHeight: Math.round(Tokens.font.size.large * 1.6)
} }
} }
@ -40,7 +40,7 @@ Item {
ColouredIcon { ColouredIcon {
source: SysInfo.osLogo source: SysInfo.osLogo
implicitSize: Math.round(Appearance.font.size.large * 1.2) implicitSize: Math.round(Tokens.font.size.large * 1.2)
colour: Colours.palette.m3tertiary colour: Colours.palette.m3tertiary
} }
} }

10
modules/bar/components/Power.qml
View file

@ -1,14 +1,14 @@
import QtQuick import QtQuick
import qs.components import qs.components
import qs.services import qs.services
import qs.config import Caelestia.Config
Item { Item {
id: root id: root
required property DrawerVisibilities visibilities required property DrawerVisibilities visibilities
implicitWidth: icon.implicitHeight + Appearance.padding.small * 2 implicitWidth: icon.implicitHeight + Tokens.padding.small * 2
implicitHeight: icon.implicitHeight implicitHeight: icon.implicitHeight
StateLayer { StateLayer {
@ -20,8 +20,8 @@ Item {
anchors.fill: undefined anchors.fill: undefined
anchors.centerIn: parent anchors.centerIn: parent
implicitWidth: implicitHeight implicitWidth: implicitHeight
implicitHeight: icon.implicitHeight + Appearance.padding.small * 2 implicitHeight: icon.implicitHeight + Tokens.padding.small * 2
radius: Appearance.rounding.full radius: Tokens.rounding.full
} }
MaterialIcon { MaterialIcon {
@ -33,6 +33,6 @@ Item {
text: "power_settings_new" text: "power_settings_new"
color: Colours.palette.m3error color: Colours.palette.m3error
font.bold: true font.bold: true
font.pointSize: Appearance.font.size.normal font.pointSize: Tokens.font.size.normal
} }
} }

10
modules/bar/components/Settings.qml
View file

@ -1,13 +1,13 @@
import QtQuick import QtQuick
import qs.components import qs.components
import qs.services import qs.services
import qs.config import Caelestia.Config
import qs.modules.controlcenter import qs.modules.controlcenter
Item { Item {
id: root id: root
implicitWidth: icon.implicitHeight + Appearance.padding.small * 2 implicitWidth: icon.implicitHeight + Tokens.padding.small * 2
implicitHeight: icon.implicitHeight implicitHeight: icon.implicitHeight
StateLayer { StateLayer {
@ -21,8 +21,8 @@ Item {
anchors.fill: undefined anchors.fill: undefined
anchors.centerIn: parent anchors.centerIn: parent
implicitWidth: implicitHeight implicitWidth: implicitHeight
implicitHeight: icon.implicitHeight + Appearance.padding.small * 2 implicitHeight: icon.implicitHeight + Tokens.padding.small * 2
radius: Appearance.rounding.full radius: Tokens.rounding.full
} }
MaterialIcon { MaterialIcon {
@ -34,6 +34,6 @@ Item {
text: "settings" text: "settings"
color: Colours.palette.m3onSurface color: Colours.palette.m3onSurface
font.bold: true font.bold: true
font.pointSize: Appearance.font.size.normal font.pointSize: Tokens.font.size.normal
} }
} }

10
modules/bar/components/SettingsIcon.qml
View file

@ -1,13 +1,13 @@
import QtQuick import QtQuick
import qs.components import qs.components
import qs.services import qs.services
import qs.config import Caelestia.Config
import qs.modules.controlcenter import qs.modules.controlcenter
Item { Item {
id: root id: root
implicitWidth: icon.implicitHeight + Appearance.padding.small * 2 implicitWidth: icon.implicitHeight + Tokens.padding.small * 2
implicitHeight: icon.implicitHeight implicitHeight: icon.implicitHeight
StateLayer { StateLayer {
@ -21,8 +21,8 @@ Item {
anchors.fill: undefined anchors.fill: undefined
anchors.centerIn: parent anchors.centerIn: parent
implicitWidth: implicitHeight implicitWidth: implicitHeight
implicitHeight: icon.implicitHeight + Appearance.padding.small * 2 implicitHeight: icon.implicitHeight + Tokens.padding.small * 2
radius: Appearance.rounding.full radius: Tokens.rounding.full
} }
MaterialIcon { MaterialIcon {
@ -34,6 +34,6 @@ Item {
text: "settings" text: "settings"
color: Colours.palette.m3onSurface color: Colours.palette.m3onSurface
font.bold: true font.bold: true
font.pointSize: Appearance.font.size.normal font.pointSize: Tokens.font.size.normal
} }
} }

22
modules/bar/components/StatusIcons.qml
View file

@ -7,7 +7,7 @@ import Quickshell.Bluetooth
import Quickshell.Services.UPower import Quickshell.Services.UPower
import qs.components import qs.components
import qs.services import qs.services
import qs.config import Caelestia.Config
import qs.utils import qs.utils
StyledRect { StyledRect {
@ -17,11 +17,11 @@ StyledRect {
readonly property alias items: iconColumn readonly property alias items: iconColumn
color: Colours.tPalette.m3surfaceContainer color: Colours.tPalette.m3surfaceContainer
radius: Appearance.rounding.full radius: Tokens.rounding.full
clip: true clip: true
implicitWidth: Config.bar.sizes.innerWidth implicitWidth: Config.bar.sizes.innerWidth
implicitHeight: iconColumn.implicitHeight + Appearance.padding.normal * 2 - (Config.bar.status.showLockStatus && !Hypr.capsLock && !Hypr.numLock ? iconColumn.spacing : 0) implicitHeight: iconColumn.implicitHeight + Tokens.padding.normal * 2 - (Config.bar.status.showLockStatus && !Hypr.capsLock && !Hypr.numLock ? iconColumn.spacing : 0)
ColumnLayout { ColumnLayout {
id: iconColumn id: iconColumn
@ -29,9 +29,9 @@ StyledRect {
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.bottomMargin: Appearance.padding.normal anchors.bottomMargin: Tokens.padding.normal
spacing: Appearance.spacing.smaller / 2 spacing: Tokens.spacing.smaller / 2
// Lock keys status // Lock keys status
WrappedLoader { WrappedLoader {
@ -136,7 +136,7 @@ StyledRect {
animate: true animate: true
text: Hypr.kbLayout text: Hypr.kbLayout
color: root.colour color: root.colour
font.family: Appearance.font.family.mono font.family: Tokens.font.family.mono
} }
} }
@ -172,7 +172,7 @@ StyledRect {
active: Config.bar.status.showBluetooth active: Config.bar.status.showBluetooth
sourceComponent: ColumnLayout { sourceComponent: ColumnLayout {
spacing: Appearance.spacing.smaller / 2 spacing: Tokens.spacing.smaller / 2
// Bluetooth icon // Bluetooth icon
MaterialIcon { MaterialIcon {
@ -211,14 +211,14 @@ StyledRect {
Anim { Anim {
from: 1 from: 1
to: 0 to: 0
duration: Appearance.anim.durations.large duration: Tokens.anim.durations.large
easing.bezierCurve: Appearance.anim.curves.standardAccel easing.bezierCurve: Tokens.anim.curves.standardAccel
} }
Anim { Anim {
from: 0 from: 0
to: 1 to: 1
duration: Appearance.anim.durations.large duration: Tokens.anim.durations.large
easing.bezierCurve: Appearance.anim.curves.standardDecel easing.bezierCurve: Tokens.anim.curves.standardDecel
} }
} }
} }

24
modules/bar/components/Tray.qml
View file

@ -5,7 +5,7 @@ import Quickshell
import Quickshell.Services.SystemTray import Quickshell.Services.SystemTray
import qs.components import qs.components
import qs.services import qs.services
import qs.config import Caelestia.Config
StyledRect { StyledRect {
id: root id: root
@ -14,8 +14,8 @@ StyledRect {
readonly property alias items: items readonly property alias items: items
readonly property alias expandIcon: expandIcon readonly property alias expandIcon: expandIcon
readonly property int padding: Config.bar.tray.background ? Appearance.padding.normal : Appearance.padding.small readonly property int padding: Config.bar.tray.background ? Tokens.padding.normal : Tokens.padding.small
readonly property int spacing: Config.bar.tray.background ? Appearance.spacing.small : 0 readonly property int spacing: Config.bar.tray.background ? Tokens.spacing.small : 0
property bool expanded property bool expanded
@ -32,7 +32,7 @@ StyledRect {
implicitHeight: nonAnimHeight implicitHeight: nonAnimHeight
color: Qt.alpha(Colours.tPalette.m3surfaceContainer, (Config.bar.tray.background && items.count > 0) ? Colours.tPalette.m3surfaceContainer.a : 0) color: Qt.alpha(Colours.tPalette.m3surfaceContainer, (Config.bar.tray.background && items.count > 0) ? Colours.tPalette.m3surfaceContainer.a : 0)
radius: Appearance.rounding.full radius: Tokens.rounding.full
Column { Column {
id: layout id: layout
@ -40,7 +40,7 @@ StyledRect {
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: root.padding anchors.topMargin: root.padding
spacing: Appearance.spacing.small spacing: Tokens.spacing.small
opacity: root.expanded || !Config.bar.tray.compact ? 1 : 0 opacity: root.expanded || !Config.bar.tray.compact ? 1 : 0
@ -49,7 +49,7 @@ StyledRect {
properties: "scale" properties: "scale"
from: 0 from: 0
to: 1 to: 1
easing.bezierCurve: Appearance.anim.curves.standardDecel easing.bezierCurve: Tokens.anim.curves.standardDecel
} }
} }
@ -57,7 +57,7 @@ StyledRect {
Anim { Anim {
properties: "scale" properties: "scale"
to: 1 to: 1
easing.bezierCurve: Appearance.anim.curves.standardDecel easing.bezierCurve: Tokens.anim.curves.standardDecel
} }
Anim { Anim {
properties: "x,y" properties: "x,y"
@ -91,16 +91,16 @@ StyledRect {
sourceComponent: Item { sourceComponent: Item {
implicitWidth: expandIconInner.implicitWidth implicitWidth: expandIconInner.implicitWidth
implicitHeight: expandIconInner.implicitHeight - Appearance.padding.small * 2 implicitHeight: expandIconInner.implicitHeight - Tokens.padding.small * 2
MaterialIcon { MaterialIcon {
id: expandIconInner id: expandIconInner
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.bottomMargin: Config.bar.tray.background ? Appearance.padding.small : -Appearance.padding.small anchors.bottomMargin: Config.bar.tray.background ? Tokens.padding.small : -Tokens.padding.small
text: "expand_less" text: "expand_less"
font.pointSize: Appearance.font.size.large font.pointSize: Tokens.font.size.large
rotation: root.expanded ? 180 : 0 rotation: root.expanded ? 180 : 0
Behavior on rotation { Behavior on rotation {
@ -116,8 +116,8 @@ StyledRect {
Behavior on implicitHeight { Behavior on implicitHeight {
Anim { Anim {
duration: Appearance.anim.durations.expressiveDefaultSpatial duration: Tokens.anim.durations.expressiveDefaultSpatial
easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
} }
} }
} }

6
modules/bar/components/TrayItem.qml
View file

@ -4,7 +4,7 @@ import QtQuick
import Quickshell.Services.SystemTray import Quickshell.Services.SystemTray
import qs.components.effects import qs.components.effects
import qs.services import qs.services
import qs.config import Caelestia.Config
import qs.utils import qs.utils
MouseArea { MouseArea {
@ -13,8 +13,8 @@ MouseArea {
required property SystemTrayItem modelData required property SystemTrayItem modelData
acceptedButtons: Qt.LeftButton | Qt.RightButton acceptedButtons: Qt.LeftButton | Qt.RightButton
implicitWidth: Appearance.font.size.small * 2 implicitWidth: Tokens.font.size.small * 2
implicitHeight: Appearance.font.size.small * 2 implicitHeight: Tokens.font.size.small * 2
onClicked: event => { onClicked: event => {
if (event.button === Qt.LeftButton) if (event.button === Qt.LeftButton)

10
modules/bar/components/workspaces/ActiveIndicator.qml
View file

@ -2,7 +2,7 @@ import QtQuick
import qs.components import qs.components
import qs.components.effects import qs.components.effects
import qs.services import qs.services
import qs.config import Caelestia.Config
StyledRect { StyledRect {
id: root id: root
@ -42,9 +42,9 @@ StyledRect {
clip: true clip: true
y: offset + mask.y y: offset + mask.y
implicitWidth: Config.bar.sizes.innerWidth - Appearance.padding.small * 2 implicitWidth: Config.bar.sizes.innerWidth - Tokens.padding.small * 2
implicitHeight: size implicitHeight: size
radius: Appearance.rounding.full radius: Tokens.rounding.full
color: Colours.palette.m3primary color: Colours.palette.m3primary
Colouriser { Colouriser {
@ -70,7 +70,7 @@ StyledRect {
enabled: Config.bar.workspaces.activeTrail enabled: Config.bar.workspaces.activeTrail
EAnim { EAnim {
duration: Appearance.anim.durations.normal * 2 duration: Tokens.anim.durations.normal * 2
} }
} }
@ -93,6 +93,6 @@ StyledRect {
} }
component EAnim: Anim { component EAnim: Anim {
easing.bezierCurve: Appearance.anim.curves.emphasized easing.bezierCurve: Tokens.anim.curves.emphasized
} }
} }

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

@ -4,7 +4,7 @@ import QtQuick
import Quickshell import Quickshell
import qs.components import qs.components
import qs.services import qs.services
import qs.config import Caelestia.Config
Item { Item {
id: root id: root
@ -65,18 +65,18 @@ Item {
anchors.horizontalCenter: root.horizontalCenter anchors.horizontalCenter: root.horizontalCenter
y: (start?.y ?? 0) - 1 y: (start?.y ?? 0) - 1
implicitWidth: Config.bar.sizes.innerWidth - Appearance.padding.small * 2 + 2 implicitWidth: Config.bar.sizes.innerWidth - Tokens.padding.small * 2 + 2
implicitHeight: start && end ? end.y + end.size - start.y + 2 : 0 implicitHeight: start && end ? end.y + end.size - start.y + 2 : 0
color: Colours.layer(Colours.palette.m3surfaceContainerHigh, 2) color: Colours.layer(Colours.palette.m3surfaceContainerHigh, 2)
radius: Appearance.rounding.full radius: Tokens.rounding.full
scale: 0 scale: 0
Component.onCompleted: scale = 1 Component.onCompleted: scale = 1
Behavior on scale { Behavior on scale {
Anim { Anim {
easing.bezierCurve: Appearance.anim.curves.standardDecel easing.bezierCurve: Tokens.anim.curves.standardDecel
} }
} }

38
modules/bar/components/workspaces/SpecialWorkspaces.qml
View file

@ -7,7 +7,7 @@ import Quickshell.Hyprland
import qs.components import qs.components
import qs.components.effects import qs.components.effects
import qs.services import qs.services
import qs.config import Caelestia.Config
import qs.utils import qs.utils
Item { Item {
@ -31,7 +31,7 @@ Item {
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
radius: Appearance.rounding.full radius: Tokens.rounding.full
gradient: Gradient { gradient: Gradient {
orientation: Gradient.Vertical orientation: Gradient.Vertical
@ -60,7 +60,7 @@ Item {
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
radius: Appearance.rounding.full radius: Tokens.rounding.full
implicitHeight: parent.height / 2 implicitHeight: parent.height / 2
opacity: view.contentY > 0 ? 0 : 1 opacity: view.contentY > 0 ? 0 : 1
@ -74,9 +74,9 @@ Item {
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
radius: Appearance.rounding.full radius: Tokens.rounding.full
implicitHeight: parent.height / 2 implicitHeight: parent.height / 2
opacity: view.contentY < view.contentHeight - parent.height + Appearance.padding.small ? 0 : 1 opacity: view.contentY < view.contentHeight - parent.height + Tokens.padding.small ? 0 : 1
Behavior on opacity { Behavior on opacity {
Anim {} Anim {}
@ -88,7 +88,7 @@ Item {
id: view id: view
anchors.fill: parent anchors.fill: parent
spacing: Appearance.spacing.normal spacing: Tokens.spacing.normal
interactive: false interactive: false
currentIndex: model.values.findIndex(w => w.name === root.activeSpecial) currentIndex: model.values.findIndex(w => w.name === root.activeSpecial)
@ -119,7 +119,7 @@ Item {
properties: "scale" properties: "scale"
from: 0 from: 0
to: 1 to: 1
easing.bezierCurve: Appearance.anim.curves.standardDecel easing.bezierCurve: Tokens.anim.curves.standardDecel
} }
} }
@ -127,12 +127,12 @@ Item {
Anim { Anim {
property: "scale" property: "scale"
to: 0.5 to: 0.5
duration: Appearance.anim.durations.small duration: Tokens.anim.durations.small
} }
Anim { Anim {
property: "opacity" property: "opacity"
to: 0 to: 0
duration: Appearance.anim.durations.small duration: Tokens.anim.durations.small
} }
} }
@ -140,7 +140,7 @@ Item {
Anim { Anim {
properties: "scale" properties: "scale"
to: 1 to: 1
easing.bezierCurve: Appearance.anim.curves.standardDecel easing.bezierCurve: Tokens.anim.curves.standardDecel
} }
Anim { Anim {
properties: "x,y" properties: "x,y"
@ -151,7 +151,7 @@ Item {
Anim { Anim {
properties: "scale" properties: "scale"
to: 1 to: 1
easing.bezierCurve: Appearance.anim.curves.standardDecel easing.bezierCurve: Tokens.anim.curves.standardDecel
} }
Anim { Anim {
properties: "x,y" properties: "x,y"
@ -175,7 +175,7 @@ Item {
implicitHeight: (view.currentItem as SpecialWsDelegate)?.size ?? 0 implicitHeight: (view.currentItem as SpecialWsDelegate)?.size ?? 0
color: Colours.palette.m3tertiary color: Colours.palette.m3tertiary
radius: Appearance.rounding.full radius: Tokens.rounding.full
Colouriser { Colouriser {
source: view source: view
@ -192,13 +192,13 @@ Item {
Behavior on y { Behavior on y {
Anim { Anim {
easing.bezierCurve: Appearance.anim.curves.emphasized easing.bezierCurve: Tokens.anim.curves.emphasized
} }
} }
Behavior on implicitHeight { Behavior on implicitHeight {
Anim { Anim {
easing.bezierCurve: Appearance.anim.curves.emphasized easing.bezierCurve: Tokens.anim.curves.emphasized
} }
} }
} }
@ -213,7 +213,7 @@ Item {
drag.target: view.contentItem drag.target: view.contentItem
drag.axis: Drag.YAxis drag.axis: Drag.YAxis
drag.maximumY: 0 drag.maximumY: 0
drag.minimumY: Math.min(0, view.height - view.contentHeight - Appearance.padding.small) drag.minimumY: Math.min(0, view.height - view.contentHeight - Tokens.padding.small)
onPressed: event => startY = event.y onPressed: event => startY = event.y
@ -233,7 +233,7 @@ Item {
id: ws id: ws
required property HyprlandWorkspace modelData required property HyprlandWorkspace modelData
readonly property int size: label.Layout.preferredHeight + (hasWindows ? windows.implicitHeight + Appearance.padding.small : 0) readonly property int size: label.Layout.preferredHeight + (hasWindows ? windows.implicitHeight + Tokens.padding.small : 0)
property int wsId property int wsId
property string icon property string icon
property bool hasWindows property bool hasWindows
@ -284,7 +284,7 @@ Item {
asynchronous: true asynchronous: true
Layout.alignment: Qt.AlignHCenter | Qt.AlignTop Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
Layout.preferredHeight: Config.bar.sizes.innerWidth - Appearance.padding.small * 2 Layout.preferredHeight: Config.bar.sizes.innerWidth - Tokens.padding.small * 2
sourceComponent: ws.icon.length === 1 ? letterComp : iconComp sourceComponent: ws.icon.length === 1 ? letterComp : iconComp
@ -328,7 +328,7 @@ Item {
properties: "scale" properties: "scale"
from: 0 from: 0
to: 1 to: 1
easing.bezierCurve: Appearance.anim.curves.standardDecel easing.bezierCurve: Tokens.anim.curves.standardDecel
} }
} }
@ -336,7 +336,7 @@ Item {
Anim { Anim {
properties: "scale" properties: "scale"
to: 1 to: 1
easing.bezierCurve: Appearance.anim.curves.standardDecel easing.bezierCurve: Tokens.anim.curves.standardDecel
} }
Anim { Anim {
properties: "x,y" properties: "x,y"

10
modules/bar/components/workspaces/Workspace.qml
View file

@ -5,7 +5,7 @@ import QtQuick.Layouts
import Quickshell import Quickshell
import qs.components import qs.components
import qs.services import qs.services
import qs.config import Caelestia.Config
import qs.utils import qs.utils
ColumnLayout { ColumnLayout {
@ -18,7 +18,7 @@ ColumnLayout {
readonly property bool isWorkspace: true // Flag for finding workspace children readonly property bool isWorkspace: true // Flag for finding workspace children
// Unanimated prop for others to use as reference // Unanimated prop for others to use as reference
readonly property int size: implicitHeight + (hasWindows ? Appearance.padding.small : 0) readonly property int size: implicitHeight + (hasWindows ? Tokens.padding.small : 0)
readonly property int ws: groupOffset + index + 1 readonly property int ws: groupOffset + index + 1
readonly property bool isOccupied: occupied[ws] ?? false readonly property bool isOccupied: occupied[ws] ?? false
@ -33,7 +33,7 @@ ColumnLayout {
id: indicator id: indicator
Layout.alignment: Qt.AlignHCenter | Qt.AlignTop Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
Layout.preferredHeight: Config.bar.sizes.innerWidth - Appearance.padding.small * 2 Layout.preferredHeight: Config.bar.sizes.innerWidth - Tokens.padding.small * 2
animate: true animate: true
text: { text: {
@ -74,7 +74,7 @@ ColumnLayout {
properties: "scale" properties: "scale"
from: 0 from: 0
to: 1 to: 1
easing.bezierCurve: Appearance.anim.curves.standardDecel easing.bezierCurve: Tokens.anim.curves.standardDecel
} }
} }
@ -82,7 +82,7 @@ ColumnLayout {
Anim { Anim {
properties: "scale" properties: "scale"
to: 1 to: 1
easing.bezierCurve: Appearance.anim.curves.standardDecel easing.bezierCurve: Tokens.anim.curves.standardDecel
} }
Anim { Anim {
properties: "x,y" properties: "x,y"

14
modules/bar/components/workspaces/Workspaces.qml
View file

@ -6,7 +6,7 @@ import QtQuick.Layouts
import Quickshell import Quickshell
import qs.components import qs.components
import qs.services import qs.services
import qs.config import Caelestia.Config
StyledClippingRect { StyledClippingRect {
id: root id: root
@ -28,10 +28,10 @@ StyledClippingRect {
property real blur: onSpecial ? 1 : 0 property real blur: onSpecial ? 1 : 0
implicitWidth: Config.bar.sizes.innerWidth implicitWidth: Config.bar.sizes.innerWidth
implicitHeight: layout.implicitHeight + Appearance.padding.small * 2 implicitHeight: layout.implicitHeight + Tokens.padding.small * 2
color: Colours.tPalette.m3surfaceContainer color: Colours.tPalette.m3surfaceContainer
radius: Appearance.rounding.full radius: Tokens.rounding.full
Item { Item {
anchors.fill: parent anchors.fill: parent
@ -51,7 +51,7 @@ StyledClippingRect {
active: Config.bar.workspaces.occupiedBg active: Config.bar.workspaces.occupiedBg
anchors.fill: parent anchors.fill: parent
anchors.margins: Appearance.padding.small anchors.margins: Tokens.padding.small
sourceComponent: OccupiedBg { sourceComponent: OccupiedBg {
workspaces: workspaces workspaces: workspaces
@ -64,7 +64,7 @@ StyledClippingRect {
id: layout id: layout
anchors.centerIn: parent anchors.centerIn: parent
spacing: Math.floor(Appearance.spacing.small / 2) spacing: Math.floor(Tokens.spacing.small / 2)
Repeater { Repeater {
id: workspaces id: workspaces
@ -118,7 +118,7 @@ StyledClippingRect {
asynchronous: true asynchronous: true
anchors.fill: parent anchors.fill: parent
anchors.margins: Appearance.padding.small anchors.margins: Tokens.padding.small
active: opacity > 0 active: opacity > 0
@ -140,7 +140,7 @@ StyledClippingRect {
Behavior on blur { Behavior on blur {
Anim { Anim {
duration: Appearance.anim.durations.small duration: Tokens.anim.durations.small
} }
} }
} }

20
modules/bar/popouts/ActiveWindow.qml
View file

@ -4,7 +4,7 @@ import Quickshell.Wayland
import Quickshell.Widgets import Quickshell.Widgets
import qs.components import qs.components
import qs.services import qs.services
import qs.config import Caelestia.Config
import qs.utils import qs.utils
Item { Item {
@ -12,21 +12,21 @@ Item {
required property PopoutState popouts required property PopoutState popouts
implicitWidth: Hypr.activeToplevel ? child.implicitWidth : -Appearance.padding.large * 2 implicitWidth: Hypr.activeToplevel ? child.implicitWidth : -Tokens.padding.large * 2
implicitHeight: child.implicitHeight implicitHeight: child.implicitHeight
Column { Column {
id: child id: child
anchors.centerIn: parent anchors.centerIn: parent
spacing: Appearance.spacing.normal spacing: Tokens.spacing.normal
RowLayout { RowLayout {
id: detailsRow id: detailsRow
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
spacing: Appearance.spacing.normal spacing: Tokens.spacing.normal
IconImage { IconImage {
id: icon id: icon
@ -46,7 +46,7 @@ Item {
StyledText { StyledText {
Layout.fillWidth: true Layout.fillWidth: true
text: Hypr.activeToplevel?.title ?? "" text: Hypr.activeToplevel?.title ?? ""
font.pointSize: Appearance.font.size.normal font.pointSize: Tokens.font.size.normal
elide: Text.ElideRight elide: Text.ElideRight
} }
@ -59,8 +59,8 @@ Item {
} }
Item { Item {
implicitWidth: expandIcon.implicitHeight + Appearance.padding.small * 2 implicitWidth: expandIcon.implicitHeight + Tokens.padding.small * 2
implicitHeight: expandIcon.implicitHeight + Appearance.padding.small * 2 implicitHeight: expandIcon.implicitHeight + Tokens.padding.small * 2
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
@ -69,7 +69,7 @@ Item {
root.popouts.detachRequested("winfo"); root.popouts.detachRequested("winfo");
} }
radius: Appearance.rounding.normal radius: Tokens.rounding.normal
} }
MaterialIcon { MaterialIcon {
@ -80,14 +80,14 @@ Item {
text: "chevron_right" text: "chevron_right"
font.pointSize: Appearance.font.size.large font.pointSize: Tokens.font.size.large
} }
} }
} }
ClippingWrapperRectangle { ClippingWrapperRectangle {
color: "transparent" color: "transparent"
radius: Appearance.rounding.small radius: Tokens.rounding.small
ScreencopyView { ScreencopyView {
id: preview id: preview

20
modules/bar/popouts/Audio.qml
View file

@ -7,15 +7,15 @@ import Quickshell.Services.Pipewire
import qs.components import qs.components
import qs.components.controls import qs.components.controls
import qs.services import qs.services
import qs.config import Caelestia.Config
Item { Item {
id: root id: root
required property PopoutState popouts required property PopoutState popouts
implicitWidth: layout.implicitWidth + Appearance.padding.normal * 2 implicitWidth: layout.implicitWidth + Tokens.padding.normal * 2
implicitHeight: layout.implicitHeight + Appearance.padding.normal * 2 implicitHeight: layout.implicitHeight + Tokens.padding.normal * 2
ButtonGroup { ButtonGroup {
id: sinks id: sinks
@ -30,7 +30,7 @@ Item {
anchors.left: parent.left anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
spacing: Appearance.spacing.normal spacing: Tokens.spacing.normal
StyledText { StyledText {
text: qsTr("Output device") text: qsTr("Output device")
@ -53,7 +53,7 @@ Item {
} }
StyledText { StyledText {
Layout.topMargin: Appearance.spacing.smaller Layout.topMargin: Tokens.spacing.smaller
text: qsTr("Input device") text: qsTr("Input device")
font.weight: 500 font.weight: 500
} }
@ -72,15 +72,15 @@ Item {
} }
StyledText { StyledText {
Layout.topMargin: Appearance.spacing.smaller Layout.topMargin: Tokens.spacing.smaller
Layout.bottomMargin: -Appearance.spacing.small / 2 Layout.bottomMargin: -Tokens.spacing.small / 2
text: qsTr("Volume (%1)").arg(Audio.muted ? qsTr("Muted") : `${Math.round(Audio.volume * 100)}%`) text: qsTr("Volume (%1)").arg(Audio.muted ? qsTr("Muted") : `${Math.round(Audio.volume * 100)}%`)
font.weight: 500 font.weight: 500
} }
CustomMouseArea { CustomMouseArea {
Layout.fillWidth: true Layout.fillWidth: true
implicitHeight: Appearance.padding.normal * 3 implicitHeight: Tokens.padding.normal * 3
onWheel: event => { onWheel: event => {
if (event.angleDelta.y > 0) if (event.angleDelta.y > 0)
@ -105,10 +105,10 @@ Item {
IconTextButton { IconTextButton {
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: Appearance.spacing.normal Layout.topMargin: Tokens.spacing.normal
inactiveColour: Colours.palette.m3primaryContainer inactiveColour: Colours.palette.m3primaryContainer
inactiveOnColour: Colours.palette.m3onPrimaryContainer inactiveOnColour: Colours.palette.m3onPrimaryContainer
verticalPadding: Appearance.padding.small verticalPadding: Tokens.padding.small
text: qsTr("Open settings") text: qsTr("Open settings")
icon: "settings" icon: "settings"

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

@ -4,12 +4,12 @@ import QtQuick
import Quickshell.Services.UPower import Quickshell.Services.UPower
import qs.components import qs.components
import qs.services import qs.services
import qs.config import Caelestia.Config
Column { Column {
id: root id: root
spacing: Appearance.spacing.normal spacing: Tokens.spacing.normal
width: Config.bar.sizes.batteryWidth width: Config.bar.sizes.batteryWidth
StyledText { StyledText {
@ -45,11 +45,11 @@ Column {
height: active ? ((item as Item)?.implicitHeight ?? 0) : 0 height: active ? ((item as Item)?.implicitHeight ?? 0) : 0
sourceComponent: StyledRect { sourceComponent: StyledRect {
implicitWidth: child.implicitWidth + Appearance.padding.normal * 2 implicitWidth: child.implicitWidth + Tokens.padding.normal * 2
implicitHeight: child.implicitHeight + Appearance.padding.smaller * 2 implicitHeight: child.implicitHeight + Tokens.padding.smaller * 2
color: Colours.palette.m3error color: Colours.palette.m3error
radius: Appearance.rounding.normal radius: Tokens.rounding.normal
Column { Column {
id: child id: child
@ -58,7 +58,7 @@ Column {
Row { Row {
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
spacing: Appearance.spacing.small spacing: Tokens.spacing.small
MaterialIcon { MaterialIcon {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
@ -72,7 +72,7 @@ Column {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
text: qsTr("Performance Degraded") text: qsTr("Performance Degraded")
color: Colours.palette.m3onError color: Colours.palette.m3onError
font.family: Appearance.font.family.mono font.family: Tokens.font.family.mono
font.weight: 500 font.weight: 500
} }
@ -109,17 +109,17 @@ Column {
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
implicitWidth: saver.implicitHeight + balance.implicitHeight + perf.implicitHeight + Appearance.padding.normal * 2 + Appearance.spacing.large * 2 implicitWidth: saver.implicitHeight + balance.implicitHeight + perf.implicitHeight + Tokens.padding.normal * 2 + Tokens.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) + Tokens.padding.small * 2
color: Colours.tPalette.m3surfaceContainer color: Colours.tPalette.m3surfaceContainer
radius: Appearance.rounding.full radius: Tokens.rounding.full
StyledRect { StyledRect {
id: indicator id: indicator
color: Colours.palette.m3primary color: Colours.palette.m3primary
radius: Appearance.rounding.full radius: Tokens.rounding.full
state: profiles.current state: profiles.current
states: [ states: [
@ -148,9 +148,9 @@ Column {
transitions: Transition { transitions: Transition {
AnchorAnimation { AnchorAnimation {
duration: Appearance.anim.durations.normal duration: Tokens.anim.durations.normal
easing.type: Easing.BezierSpline easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.emphasized easing.bezierCurve: Tokens.anim.curves.emphasized
} }
} }
} }
@ -160,7 +160,7 @@ Column {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: Appearance.padding.small anchors.leftMargin: Tokens.padding.small
profile: PowerProfile.PowerSaver profile: PowerProfile.PowerSaver
icon: "energy_savings_leaf" icon: "energy_savings_leaf"
@ -180,7 +180,7 @@ Column {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: Appearance.padding.small anchors.rightMargin: Tokens.padding.small
profile: PowerProfile.Performance profile: PowerProfile.Performance
icon: "rocket_launch" icon: "rocket_launch"
@ -201,15 +201,15 @@ Column {
required property string icon required property string icon
required property int profile required property int profile
implicitWidth: icon.implicitHeight + Appearance.padding.small * 2 implicitWidth: icon.implicitHeight + Tokens.padding.small * 2
implicitHeight: icon.implicitHeight + Appearance.padding.small * 2 implicitHeight: icon.implicitHeight + Tokens.padding.small * 2
StateLayer { StateLayer {
function onClicked(): void { function onClicked(): void {
PowerProfiles.profile = parent.profile; PowerProfiles.profile = parent.profile;
} }
radius: Appearance.rounding.full radius: Tokens.rounding.full
color: profiles.current === parent.icon ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface color: profiles.current === parent.icon ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
} }
@ -219,7 +219,7 @@ Column {
anchors.centerIn: parent anchors.centerIn: parent
text: parent.icon text: parent.icon
font.pointSize: Appearance.font.size.large font.pointSize: Tokens.font.size.large
color: profiles.current === text ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface color: profiles.current === text ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
fill: profiles.current === text ? 1 : 0 fill: profiles.current === text ? 1 : 0

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

@ -7,7 +7,7 @@ import Quickshell.Bluetooth
import qs.components import qs.components
import qs.components.controls import qs.components.controls
import qs.services import qs.services
import qs.config import Caelestia.Config
import qs.utils import qs.utils
ColumnLayout { ColumnLayout {
@ -16,11 +16,11 @@ ColumnLayout {
required property PopoutState popouts required property PopoutState popouts
width: 300 width: 300
spacing: Appearance.spacing.small spacing: Tokens.spacing.small
StyledText { StyledText {
Layout.topMargin: Appearance.padding.normal Layout.topMargin: Tokens.padding.normal
Layout.rightMargin: Appearance.padding.small Layout.rightMargin: Tokens.padding.small
text: qsTr("Bluetooth") text: qsTr("Bluetooth")
font.weight: 500 font.weight: 500
} }
@ -46,8 +46,8 @@ ColumnLayout {
} }
StyledText { StyledText {
Layout.topMargin: Appearance.spacing.small Layout.topMargin: Tokens.spacing.small
Layout.rightMargin: Appearance.padding.small Layout.rightMargin: Tokens.padding.small
text: { text: {
const devices = Bluetooth.devices.values; // qmllint disable unresolved-type const devices = Bluetooth.devices.values; // qmllint disable unresolved-type
let available = qsTr("%1 device%2 available").arg(devices.length).arg(devices.length === 1 ? "" : "s"); let available = qsTr("%1 device%2 available").arg(devices.length).arg(devices.length === 1 ? "" : "s");
@ -57,7 +57,7 @@ ColumnLayout {
return available; return available;
} }
color: Colours.palette.m3onSurfaceVariant color: Colours.palette.m3onSurfaceVariant
font.pointSize: Appearance.font.size.small font.pointSize: Tokens.font.size.small
} }
Repeater { Repeater {
@ -72,8 +72,8 @@ ColumnLayout {
readonly property bool loading: modelData.state === BluetoothDeviceState.Connecting || modelData.state === BluetoothDeviceState.Disconnecting // qmllint disable unresolved-type readonly property bool loading: modelData.state === BluetoothDeviceState.Connecting || modelData.state === BluetoothDeviceState.Disconnecting // qmllint disable unresolved-type
Layout.fillWidth: true Layout.fillWidth: true
Layout.rightMargin: Appearance.padding.small Layout.rightMargin: Tokens.padding.small
spacing: Appearance.spacing.small spacing: Tokens.spacing.small
opacity: 0 opacity: 0
scale: 0.7 scale: 0.7
@ -96,8 +96,8 @@ ColumnLayout {
} }
StyledText { StyledText {
Layout.leftMargin: Appearance.spacing.small / 2 Layout.leftMargin: Tokens.spacing.small / 2
Layout.rightMargin: Appearance.spacing.small / 2 Layout.rightMargin: Tokens.spacing.small / 2
Layout.fillWidth: true Layout.fillWidth: true
text: device.modelData.name text: device.modelData.name
elide: Text.ElideRight elide: Text.ElideRight
@ -113,9 +113,9 @@ ColumnLayout {
id: connectBtn id: connectBtn
implicitWidth: implicitHeight implicitWidth: implicitHeight
implicitHeight: connectIcon.implicitHeight + Appearance.padding.small implicitHeight: connectIcon.implicitHeight + Tokens.padding.small
radius: Appearance.rounding.full radius: Tokens.rounding.full
color: Qt.alpha(Colours.palette.m3primary, device.modelData.state === BluetoothDeviceState.Connected ? 1 : 0) // qmllint disable unresolved-type color: Qt.alpha(Colours.palette.m3primary, device.modelData.state === BluetoothDeviceState.Connected ? 1 : 0) // qmllint disable unresolved-type
CircularIndicator { CircularIndicator {
@ -161,7 +161,7 @@ ColumnLayout {
device.modelData.forget(); device.modelData.forget();
} }
radius: Appearance.rounding.full radius: Tokens.rounding.full
} }
MaterialIcon { MaterialIcon {
@ -175,10 +175,10 @@ ColumnLayout {
IconTextButton { IconTextButton {
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: Appearance.spacing.normal Layout.topMargin: Tokens.spacing.normal
inactiveColour: Colours.palette.m3primaryContainer inactiveColour: Colours.palette.m3primaryContainer
inactiveOnColour: Colours.palette.m3onPrimaryContainer inactiveOnColour: Colours.palette.m3onPrimaryContainer
verticalPadding: Appearance.padding.small verticalPadding: Tokens.padding.small
text: qsTr("Open settings") text: qsTr("Open settings")
icon: "settings" icon: "settings"
@ -191,8 +191,8 @@ ColumnLayout {
property alias toggle: toggle property alias toggle: toggle
Layout.fillWidth: true Layout.fillWidth: true
Layout.rightMargin: Appearance.padding.small Layout.rightMargin: Tokens.padding.small
spacing: Appearance.spacing.normal spacing: Tokens.spacing.normal
StyledText { StyledText {
Layout.fillWidth: true Layout.fillWidth: true

6
modules/bar/popouts/ClipWrapper.qml
View file

@ -3,7 +3,7 @@ pragma ComponentBehavior: Bound
import QtQuick import QtQuick
import Quickshell import Quickshell
import qs.components import qs.components
import qs.config import Caelestia.Config
import qs.modules.bar.popouts // Need to import this module so the Wrapper type is the same as others import qs.modules.bar.popouts // Need to import this module so the Wrapper type is the same as others
Item { Item {
@ -35,8 +35,8 @@ Item {
Behavior on offsetScale { Behavior on offsetScale {
Anim { Anim {
duration: Appearance.anim.durations.expressiveDefaultSpatial duration: Tokens.anim.durations.expressiveDefaultSpatial
easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
} }
} }

10
modules/bar/popouts/Content.qml
View file

@ -5,7 +5,7 @@ import QtQuick
import Quickshell import Quickshell
import Quickshell.Services.SystemTray import Quickshell.Services.SystemTray
import qs.components import qs.components
import qs.config import Caelestia.Config
Item { Item {
id: root id: root
@ -14,14 +14,14 @@ Item {
readonly property Popout currentPopout: content.children.find(c => c.shouldBeActive) ?? null readonly property Popout currentPopout: content.children.find(c => c.shouldBeActive) ?? null
readonly property Item current: currentPopout?.item ?? null readonly property Item current: currentPopout?.item ?? null
implicitWidth: (currentPopout?.implicitWidth ?? 0) + Appearance.padding.large * 2 implicitWidth: (currentPopout?.implicitWidth ?? 0) + Tokens.padding.large * 2
implicitHeight: (currentPopout?.implicitHeight ?? 0) + Appearance.padding.large * 2 implicitHeight: (currentPopout?.implicitHeight ?? 0) + Tokens.padding.large * 2
Item { Item {
id: content id: content
anchors.fill: parent anchors.fill: parent
anchors.margins: Appearance.padding.large anchors.margins: Tokens.padding.large
Popout { Popout {
name: "activewindow" name: "activewindow"
@ -194,7 +194,7 @@ Item {
SequentialAnimation { SequentialAnimation {
Anim { Anim {
properties: "opacity,scale" properties: "opacity,scale"
duration: Appearance.anim.durations.small duration: Tokens.anim.durations.small
} }
PropertyAction { PropertyAction {
target: popout target: popout

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

@ -1,10 +1,10 @@
import QtQuick.Layouts import QtQuick.Layouts
import qs.components import qs.components
import qs.services import qs.services
import qs.config import Caelestia.Config
ColumnLayout { ColumnLayout {
spacing: Appearance.spacing.small spacing: Tokens.spacing.small
StyledText { StyledText {
text: qsTr("Capslock: %1").arg(Hypr.capsLock ? "Enabled" : "Disabled") text: qsTr("Capslock: %1").arg(Hypr.capsLock ? "Enabled" : "Disabled")

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

@ -6,7 +6,7 @@ import Quickshell
import qs.components import qs.components
import qs.components.controls import qs.components.controls
import qs.services import qs.services
import qs.config import Caelestia.Config
import qs.utils import qs.utils
ColumnLayout { ColumnLayout {
@ -19,15 +19,15 @@ ColumnLayout {
property var passwordNetwork: null property var passwordNetwork: null
property bool showPasswordDialog: false property bool showPasswordDialog: false
spacing: Appearance.spacing.small spacing: Tokens.spacing.small
width: Config.bar.sizes.networkWidth width: Config.bar.sizes.networkWidth
// Wireless section // Wireless section
StyledText { StyledText {
visible: root.view === "wireless" visible: root.view === "wireless"
Layout.preferredHeight: visible ? implicitHeight : 0 Layout.preferredHeight: visible ? implicitHeight : 0
Layout.topMargin: visible ? Appearance.padding.normal : 0 Layout.topMargin: visible ? Tokens.padding.normal : 0
Layout.rightMargin: Appearance.padding.small Layout.rightMargin: Tokens.padding.small
text: qsTr("Wireless") text: qsTr("Wireless")
font.weight: 500 font.weight: 500
} }
@ -43,11 +43,11 @@ ColumnLayout {
StyledText { StyledText {
visible: root.view === "wireless" visible: root.view === "wireless"
Layout.preferredHeight: visible ? implicitHeight : 0 Layout.preferredHeight: visible ? implicitHeight : 0
Layout.topMargin: visible ? Appearance.spacing.small : 0 Layout.topMargin: visible ? Tokens.spacing.small : 0
Layout.rightMargin: Appearance.padding.small Layout.rightMargin: Tokens.padding.small
text: qsTr("%1 networks available").arg(Nmcli.networks.length) // qmllint disable missing-property text: qsTr("%1 networks available").arg(Nmcli.networks.length) // qmllint disable missing-property
color: Colours.palette.m3onSurfaceVariant color: Colours.palette.m3onSurfaceVariant
font.pointSize: Appearance.font.size.small font.pointSize: Tokens.font.size.small
} }
Repeater { Repeater {
@ -70,8 +70,8 @@ ColumnLayout {
visible: root.view === "wireless" visible: root.view === "wireless"
Layout.preferredHeight: visible ? implicitHeight : 0 Layout.preferredHeight: visible ? implicitHeight : 0
Layout.fillWidth: true Layout.fillWidth: true
Layout.rightMargin: Appearance.padding.small Layout.rightMargin: Tokens.padding.small
spacing: Appearance.spacing.small spacing: Tokens.spacing.small
opacity: 0 opacity: 0
scale: 0.7 scale: 0.7
@ -97,12 +97,12 @@ ColumnLayout {
MaterialIcon { MaterialIcon {
visible: networkItem.modelData.isSecure visible: networkItem.modelData.isSecure
text: "lock" text: "lock"
font.pointSize: Appearance.font.size.small font.pointSize: Tokens.font.size.small
} }
StyledText { StyledText {
Layout.leftMargin: Appearance.spacing.small / 2 Layout.leftMargin: Tokens.spacing.small / 2
Layout.rightMargin: Appearance.spacing.small / 2 Layout.rightMargin: Tokens.spacing.small / 2
Layout.fillWidth: true Layout.fillWidth: true
text: networkItem.modelData.ssid text: networkItem.modelData.ssid
elide: Text.ElideRight elide: Text.ElideRight
@ -112,9 +112,9 @@ ColumnLayout {
StyledRect { StyledRect {
implicitWidth: implicitHeight implicitWidth: implicitHeight
implicitHeight: wirelessConnectIcon.implicitHeight + Appearance.padding.small implicitHeight: wirelessConnectIcon.implicitHeight + Tokens.padding.small
radius: Appearance.rounding.full radius: Tokens.rounding.full
color: Qt.alpha(Colours.palette.m3primary, networkItem.modelData.active ? 1 : 0) color: Qt.alpha(Colours.palette.m3primary, networkItem.modelData.active ? 1 : 0)
CircularIndicator { CircularIndicator {
@ -165,11 +165,11 @@ ColumnLayout {
StyledRect { StyledRect {
visible: root.view === "wireless" visible: root.view === "wireless"
Layout.preferredHeight: visible ? implicitHeight : 0 Layout.preferredHeight: visible ? implicitHeight : 0
Layout.topMargin: visible ? Appearance.spacing.small : 0 Layout.topMargin: visible ? Tokens.spacing.small : 0
Layout.fillWidth: true Layout.fillWidth: true
implicitHeight: rescanBtn.implicitHeight + Appearance.padding.small * 2 implicitHeight: rescanBtn.implicitHeight + Tokens.padding.small * 2
radius: Appearance.rounding.full radius: Tokens.rounding.full
color: Colours.palette.m3primaryContainer color: Colours.palette.m3primaryContainer
StateLayer { StateLayer {
@ -185,7 +185,7 @@ ColumnLayout {
id: rescanBtn id: rescanBtn
anchors.centerIn: parent anchors.centerIn: parent
spacing: Appearance.spacing.small spacing: Tokens.spacing.small
opacity: Nmcli.scanning ? 0 : 1 opacity: Nmcli.scanning ? 0 : 1
MaterialIcon { MaterialIcon {
@ -210,9 +210,9 @@ ColumnLayout {
CircularIndicator { CircularIndicator {
anchors.centerIn: parent anchors.centerIn: parent
strokeWidth: Appearance.padding.small / 2 strokeWidth: Tokens.padding.small / 2
bgColour: "transparent" bgColour: "transparent"
implicitSize: parent.implicitHeight - Appearance.padding.smaller * 2 implicitSize: parent.implicitHeight - Tokens.padding.smaller * 2
running: Nmcli.scanning running: Nmcli.scanning
} }
} }
@ -221,8 +221,8 @@ ColumnLayout {
StyledText { StyledText {
visible: root.view === "ethernet" visible: root.view === "ethernet"
Layout.preferredHeight: visible ? implicitHeight : 0 Layout.preferredHeight: visible ? implicitHeight : 0
Layout.topMargin: visible ? Appearance.padding.normal : 0 Layout.topMargin: visible ? Tokens.padding.normal : 0
Layout.rightMargin: Appearance.padding.small Layout.rightMargin: Tokens.padding.small
text: qsTr("Ethernet") text: qsTr("Ethernet")
font.weight: 500 font.weight: 500
} }
@ -230,11 +230,11 @@ ColumnLayout {
StyledText { StyledText {
visible: root.view === "ethernet" visible: root.view === "ethernet"
Layout.preferredHeight: visible ? implicitHeight : 0 Layout.preferredHeight: visible ? implicitHeight : 0
Layout.topMargin: visible ? Appearance.spacing.small : 0 Layout.topMargin: visible ? Tokens.spacing.small : 0
Layout.rightMargin: Appearance.padding.small Layout.rightMargin: Tokens.padding.small
text: qsTr("%1 devices available").arg(Nmcli.ethernetDevices.length) text: qsTr("%1 devices available").arg(Nmcli.ethernetDevices.length)
color: Colours.palette.m3onSurfaceVariant color: Colours.palette.m3onSurfaceVariant
font.pointSize: Appearance.font.size.small font.pointSize: Tokens.font.size.small
} }
Repeater { Repeater {
@ -256,8 +256,8 @@ ColumnLayout {
visible: root.view === "ethernet" visible: root.view === "ethernet"
Layout.preferredHeight: visible ? implicitHeight : 0 Layout.preferredHeight: visible ? implicitHeight : 0
Layout.fillWidth: true Layout.fillWidth: true
Layout.rightMargin: Appearance.padding.small Layout.rightMargin: Tokens.padding.small
spacing: Appearance.spacing.small spacing: Tokens.spacing.small
opacity: 0 opacity: 0
scale: 0.7 scale: 0.7
@ -281,8 +281,8 @@ ColumnLayout {
} }
StyledText { StyledText {
Layout.leftMargin: Appearance.spacing.small / 2 Layout.leftMargin: Tokens.spacing.small / 2
Layout.rightMargin: Appearance.spacing.small / 2 Layout.rightMargin: Tokens.spacing.small / 2
Layout.fillWidth: true Layout.fillWidth: true
text: ethernetItem.modelData.interface || qsTr("Unknown") text: ethernetItem.modelData.interface || qsTr("Unknown")
elide: Text.ElideRight elide: Text.ElideRight
@ -292,9 +292,9 @@ ColumnLayout {
StyledRect { StyledRect {
implicitWidth: implicitHeight implicitWidth: implicitHeight
implicitHeight: connectIcon.implicitHeight + Appearance.padding.small implicitHeight: connectIcon.implicitHeight + Tokens.padding.small
radius: Appearance.rounding.full radius: Tokens.rounding.full
color: Qt.alpha(Colours.palette.m3primary, ethernetItem.modelData.connected ? 1 : 0) color: Qt.alpha(Colours.palette.m3primary, ethernetItem.modelData.connected ? 1 : 0)
CircularIndicator { CircularIndicator {
@ -374,8 +374,8 @@ ColumnLayout {
property alias toggle: toggle property alias toggle: toggle
Layout.fillWidth: true Layout.fillWidth: true
Layout.rightMargin: Appearance.padding.small Layout.rightMargin: Tokens.padding.small
spacing: Appearance.spacing.normal spacing: Tokens.spacing.normal
StyledText { StyledText {
Layout.fillWidth: true Layout.fillWidth: true

28
modules/bar/popouts/TrayMenu.qml
View file

@ -6,7 +6,7 @@ import Quickshell
import Quickshell.Widgets import Quickshell.Widgets
import qs.components import qs.components
import qs.services import qs.services
import qs.config import Caelestia.Config
StackView { StackView {
id: root id: root
@ -45,8 +45,8 @@ StackView {
property bool isSubMenu property bool isSubMenu
property bool shown property bool shown
padding: Appearance.padding.smaller padding: Tokens.padding.smaller
spacing: Appearance.spacing.small spacing: Tokens.spacing.small
opacity: shown ? 1 : 0 opacity: shown ? 1 : 0
scale: shown ? 1 : 0.8 scale: shown ? 1 : 0.8
@ -81,7 +81,7 @@ StackView {
implicitWidth: Config.bar.sizes.trayMenuWidth implicitWidth: Config.bar.sizes.trayMenuWidth
implicitHeight: modelData.isSeparator ? 1 : children.implicitHeight implicitHeight: modelData.isSeparator ? 1 : children.implicitHeight
radius: Appearance.rounding.full radius: Tokens.rounding.full
color: modelData.isSeparator ? Colours.palette.m3outlineVariant : "transparent" color: modelData.isSeparator ? Colours.palette.m3outlineVariant : "transparent"
Loader { Loader {
@ -110,9 +110,9 @@ StackView {
} }
} }
anchors.margins: -Appearance.padding.small / 2 anchors.margins: -Tokens.padding.small / 2
anchors.leftMargin: -Appearance.padding.smaller anchors.leftMargin: -Tokens.padding.smaller
anchors.rightMargin: -Appearance.padding.smaller anchors.rightMargin: -Tokens.padding.smaller
radius: item.radius radius: item.radius
disabled: !item.modelData.enabled disabled: !item.modelData.enabled
@ -138,7 +138,7 @@ StackView {
id: label id: label
anchors.left: icon.right anchors.left: icon.right
anchors.leftMargin: icon.active ? Appearance.spacing.smaller : 0 anchors.leftMargin: icon.active ? Tokens.spacing.smaller : 0
text: labelMetrics.elidedText text: labelMetrics.elidedText
color: item.modelData.enabled ? Colours.palette.m3onSurface : Colours.palette.m3outline color: item.modelData.enabled ? Colours.palette.m3onSurface : Colours.palette.m3outline
@ -152,7 +152,7 @@ StackView {
font.family: label.font.family font.family: label.font.family
elide: Text.ElideRight elide: Text.ElideRight
elideWidth: Config.bar.sizes.trayMenuWidth - (icon.active ? icon.implicitWidth + label.anchors.leftMargin : 0) - (expand.active ? expand.implicitWidth + Appearance.spacing.normal : 0) elideWidth: Config.bar.sizes.trayMenuWidth - (icon.active ? icon.implicitWidth + label.anchors.leftMargin : 0) - (expand.active ? expand.implicitWidth + Tokens.spacing.normal : 0)
} }
Loader { Loader {
@ -180,7 +180,7 @@ StackView {
sourceComponent: Item { sourceComponent: Item {
implicitWidth: back.implicitWidth implicitWidth: back.implicitWidth
implicitHeight: back.implicitHeight + Appearance.spacing.small / 2 implicitHeight: back.implicitHeight + Tokens.spacing.small / 2
Item { Item {
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
@ -189,11 +189,11 @@ StackView {
StyledRect { StyledRect {
anchors.fill: parent anchors.fill: parent
anchors.margins: -Appearance.padding.small / 2 anchors.margins: -Tokens.padding.small / 2
anchors.leftMargin: -Appearance.padding.smaller anchors.leftMargin: -Tokens.padding.smaller
anchors.rightMargin: -Appearance.padding.smaller * 2 anchors.rightMargin: -Tokens.padding.smaller * 2
radius: Appearance.rounding.full radius: Tokens.rounding.full
color: Colours.palette.m3secondaryContainer color: Colours.palette.m3secondaryContainer
StateLayer { StateLayer {

56
modules/bar/popouts/WirelessPassword.qml
View file

@ -6,7 +6,7 @@ import Quickshell
import qs.components import qs.components
import qs.components.controls import qs.components.controls
import qs.services import qs.services
import qs.config import Caelestia.Config
import qs.utils import qs.utils
ColumnLayout { ColumnLayout {
@ -69,9 +69,9 @@ ColumnLayout {
} }
} }
spacing: Appearance.spacing.normal spacing: Tokens.spacing.normal
implicitWidth: 400 implicitWidth: 400
implicitHeight: content.implicitHeight + Appearance.padding.large * 2 implicitHeight: content.implicitHeight + Tokens.padding.large * 2
visible: shouldBeVisible || isClosing visible: shouldBeVisible || isClosing
enabled: shouldBeVisible && !isClosing enabled: shouldBeVisible && !isClosing
focus: enabled focus: enabled
@ -128,8 +128,8 @@ ColumnLayout {
StyledRect { StyledRect {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredWidth: 400 Layout.preferredWidth: 400
implicitHeight: content.implicitHeight + Appearance.padding.large * 2 implicitHeight: content.implicitHeight + Tokens.padding.large * 2
radius: Appearance.rounding.normal radius: Tokens.rounding.normal
color: Colours.tPalette.m3surfaceContainer color: Colours.tPalette.m3surfaceContainer
visible: root.shouldBeVisible || root.isClosing visible: root.shouldBeVisible || root.isClosing
opacity: root.shouldBeVisible && !root.isClosing ? 1 : 0 opacity: root.shouldBeVisible && !root.isClosing ? 1 : 0
@ -170,20 +170,20 @@ ColumnLayout {
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.margins: Appearance.padding.large anchors.margins: Tokens.padding.large
spacing: Appearance.spacing.normal spacing: Tokens.spacing.normal
MaterialIcon { MaterialIcon {
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
text: "lock" text: "lock"
font.pointSize: Appearance.font.size.extraLarge * 2 font.pointSize: Tokens.font.size.extraLarge * 2
} }
StyledText { StyledText {
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
text: qsTr("Enter password") text: qsTr("Enter password")
font.pointSize: Appearance.font.size.large font.pointSize: Tokens.font.size.large
font.weight: 500 font.weight: 500
} }
@ -201,7 +201,7 @@ ColumnLayout {
return qsTr("Network: Unknown"); return qsTr("Network: Unknown");
} }
color: Colours.palette.m3outline color: Colours.palette.m3outline
font.pointSize: Appearance.font.size.small font.pointSize: Tokens.font.size.small
} }
Timer { Timer {
@ -237,7 +237,7 @@ ColumnLayout {
id: statusText id: statusText
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
Layout.topMargin: Appearance.spacing.small Layout.topMargin: Tokens.spacing.small
visible: connectButton.connecting || connectButton.hasError visible: connectButton.connecting || connectButton.hasError
text: { text: {
if (connectButton.hasError) { if (connectButton.hasError) {
@ -249,10 +249,10 @@ ColumnLayout {
return ""; return "";
} }
color: connectButton.hasError ? Colours.palette.m3error : Colours.palette.m3onSurfaceVariant color: connectButton.hasError ? Colours.palette.m3error : Colours.palette.m3onSurfaceVariant
font.pointSize: Appearance.font.size.small font.pointSize: Tokens.font.size.small
font.weight: 400 font.weight: 400
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
Layout.maximumWidth: parent.width - Appearance.padding.large * 2 Layout.maximumWidth: parent.width - Tokens.padding.large * 2
} }
FocusScope { FocusScope {
@ -261,9 +261,9 @@ ColumnLayout {
property string passwordBuffer: "" property string passwordBuffer: ""
objectName: "passwordContainer" objectName: "passwordContainer"
Layout.topMargin: Appearance.spacing.large Layout.topMargin: Tokens.spacing.large
Layout.fillWidth: true Layout.fillWidth: true
implicitHeight: Math.max(48, charList.implicitHeight + Appearance.padding.normal * 2) implicitHeight: Math.max(48, charList.implicitHeight + Tokens.padding.normal * 2)
focus: true focus: true
activeFocusOnTab: true activeFocusOnTab: true
@ -336,7 +336,7 @@ ColumnLayout {
StyledRect { StyledRect {
anchors.fill: parent anchors.fill: parent
radius: Appearance.rounding.normal radius: Tokens.rounding.normal
color: passwordContainer.activeFocus ? Qt.lighter(Colours.tPalette.m3surfaceContainer, 1.05) : Colours.tPalette.m3surfaceContainer color: passwordContainer.activeFocus ? Qt.lighter(Colours.tPalette.m3surfaceContainer, 1.05) : Colours.tPalette.m3surfaceContainer
border.width: passwordContainer.activeFocus || connectButton.hasError ? 4 : (root.shouldBeVisible ? 1 : 0) border.width: passwordContainer.activeFocus || connectButton.hasError ? 4 : (root.shouldBeVisible ? 1 : 0)
border.color: { border.color: {
@ -369,7 +369,7 @@ ColumnLayout {
hoverEnabled: false hoverEnabled: false
cursorShape: Qt.IBeamCursor cursorShape: Qt.IBeamCursor
radius: Appearance.rounding.normal radius: Tokens.rounding.normal
} }
StyledText { StyledText {
@ -378,8 +378,8 @@ ColumnLayout {
anchors.centerIn: parent anchors.centerIn: parent
text: qsTr("Password") text: qsTr("Password")
color: Colours.palette.m3outline color: Colours.palette.m3outline
font.pointSize: Appearance.font.size.normal font.pointSize: Tokens.font.size.normal
font.family: Appearance.font.family.mono font.family: Tokens.font.family.mono
opacity: passwordContainer.passwordBuffer ? 0 : 1 opacity: passwordContainer.passwordBuffer ? 0 : 1
Behavior on opacity { Behavior on opacity {
@ -394,10 +394,10 @@ ColumnLayout {
anchors.centerIn: parent anchors.centerIn: parent
implicitWidth: fullWidth implicitWidth: fullWidth
implicitHeight: Appearance.font.size.normal implicitHeight: Tokens.font.size.normal
orientation: Qt.Horizontal orientation: Qt.Horizontal
spacing: Appearance.spacing.small / 2 spacing: Tokens.spacing.small / 2
interactive: false interactive: false
model: ScriptModel { model: ScriptModel {
@ -411,7 +411,7 @@ ColumnLayout {
implicitHeight: charList.implicitHeight implicitHeight: charList.implicitHeight
color: Colours.palette.m3onSurface color: Colours.palette.m3onSurface
radius: Appearance.rounding.small / 2 radius: Tokens.rounding.small / 2
opacity: 0 opacity: 0
scale: 0 scale: 0
@ -454,8 +454,8 @@ ColumnLayout {
Behavior on scale { Behavior on scale {
Anim { Anim {
duration: Appearance.anim.durations.expressiveFastSpatial duration: Tokens.anim.durations.expressiveFastSpatial
easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial easing.bezierCurve: Tokens.anim.curves.expressiveFastSpatial
} }
} }
} }
@ -467,15 +467,15 @@ ColumnLayout {
} }
RowLayout { RowLayout {
Layout.topMargin: Appearance.spacing.normal Layout.topMargin: Tokens.spacing.normal
Layout.fillWidth: true Layout.fillWidth: true
spacing: Appearance.spacing.normal spacing: Tokens.spacing.normal
TextButton { TextButton {
id: cancelButton id: cancelButton
Layout.fillWidth: true Layout.fillWidth: true
Layout.minimumHeight: Appearance.font.size.normal + Appearance.padding.normal * 2 Layout.minimumHeight: Tokens.font.size.normal + Tokens.padding.normal * 2
inactiveColour: Colours.palette.m3secondaryContainer inactiveColour: Colours.palette.m3secondaryContainer
inactiveOnColour: Colours.palette.m3onSecondaryContainer inactiveOnColour: Colours.palette.m3onSecondaryContainer
text: qsTr("Cancel") text: qsTr("Cancel")
@ -490,7 +490,7 @@ ColumnLayout {
property bool hasError: false property bool hasError: false
Layout.fillWidth: true Layout.fillWidth: true
Layout.minimumHeight: Appearance.font.size.normal + Appearance.padding.normal * 2 Layout.minimumHeight: Tokens.font.size.normal + Tokens.padding.normal * 2
inactiveColour: Colours.palette.m3primary inactiveColour: Colours.palette.m3primary
inactiveOnColour: Colours.palette.m3onPrimary inactiveOnColour: Colours.palette.m3onPrimary
text: qsTr("Connect") text: qsTr("Connect")

10
modules/bar/popouts/Wrapper.qml
View file

@ -6,7 +6,7 @@ import Quickshell.Hyprland
import Quickshell.Wayland import Quickshell.Wayland
import qs.components import qs.components
import qs.services import qs.services
import qs.config import Caelestia.Config
import qs.modules.controlcenter import qs.modules.controlcenter
import qs.modules.windowinfo import qs.modules.windowinfo
@ -32,13 +32,13 @@ Item {
property string detachedMode property string detachedMode
property string queuedMode property string queuedMode
property int animLength: Appearance.anim.durations.expressiveDefaultSpatial property int animLength: Tokens.anim.durations.expressiveDefaultSpatial
property list<real> animCurve: Appearance.anim.curves.expressiveDefaultSpatial property list<real> animCurve: Tokens.anim.curves.expressiveDefaultSpatial
function setAnims(detach: bool): void { function setAnims(detach: bool): void {
const type = `expressive${detach ? "Slow" : "Default"}Spatial`; const type = `expressive${detach ? "Slow" : "Default"}Spatial`;
animLength = Appearance.anim.durations[type]; animLength = Tokens.anim.durations[type];
animCurve = Appearance.anim.curves[type]; animCurve = Tokens.anim.curves[type];
} }
function detach(mode: string): void { function detach(mode: string): void {

32
modules/bar/popouts/kblayout/KbLayout.qml
View file

@ -5,7 +5,7 @@ import QtQuick.Controls
import QtQuick.Layouts import QtQuick.Layouts
import qs.components import qs.components
import qs.services import qs.services
import qs.config import Caelestia.Config
ColumnLayout { ColumnLayout {
id: root id: root
@ -14,7 +14,7 @@ ColumnLayout {
kb.refresh(); kb.refresh();
} }
spacing: Appearance.spacing.small spacing: Tokens.spacing.small
width: Config.bar.sizes.kbLayoutWidth width: Config.bar.sizes.kbLayoutWidth
Component.onCompleted: kb.start() Component.onCompleted: kb.start()
@ -24,8 +24,8 @@ ColumnLayout {
} }
StyledText { StyledText {
Layout.topMargin: Appearance.padding.normal Layout.topMargin: Tokens.padding.normal
Layout.rightMargin: Appearance.padding.small Layout.rightMargin: Tokens.padding.small
text: qsTr("Keyboard Layouts") text: qsTr("Keyboard Layouts")
font.weight: 500 font.weight: 500
} }
@ -36,14 +36,14 @@ ColumnLayout {
model: kb.visibleModel model: kb.visibleModel
Layout.fillWidth: true Layout.fillWidth: true
Layout.rightMargin: Appearance.padding.small Layout.rightMargin: Tokens.padding.small
Layout.topMargin: Appearance.spacing.small Layout.topMargin: Tokens.spacing.small
clip: true clip: true
interactive: true interactive: true
implicitHeight: Math.min(contentHeight, 320) implicitHeight: Math.min(contentHeight, 320)
visible: kb.visibleModel.count > 0 visible: kb.visibleModel.count > 0
spacing: Appearance.spacing.small spacing: Tokens.spacing.small
add: Transition { add: Transition {
NumberAnimation { NumberAnimation {
@ -88,7 +88,7 @@ ColumnLayout {
readonly property bool isDisabled: layoutIndex > 3 readonly property bool isDisabled: layoutIndex > 3
width: list.width width: list.width
height: Math.max(36, rowText.implicitHeight + Appearance.padding.small * 2) height: Math.max(36, rowText.implicitHeight + Tokens.padding.small * 2)
ToolTip.visible: isDisabled && layer.containsMouse ToolTip.visible: isDisabled && layer.containsMouse
ToolTip.text: "XKB limitation: maximum 4 layouts allowed" ToolTip.text: "XKB limitation: maximum 4 layouts allowed"
@ -104,7 +104,7 @@ ColumnLayout {
anchors.right: parent.right anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
implicitHeight: parent.height - 4 implicitHeight: parent.height - 4
radius: Appearance.rounding.full radius: Tokens.rounding.full
enabled: !kbDelegate.isDisabled enabled: !kbDelegate.isDisabled
} }
@ -114,8 +114,8 @@ ColumnLayout {
anchors.verticalCenter: layer.verticalCenter anchors.verticalCenter: layer.verticalCenter
anchors.left: layer.left anchors.left: layer.left
anchors.right: layer.right anchors.right: layer.right
anchors.leftMargin: Appearance.padding.small anchors.leftMargin: Tokens.padding.small
anchors.rightMargin: Appearance.padding.small anchors.rightMargin: Tokens.padding.small
text: kbDelegate.label text: kbDelegate.label
elide: Text.ElideRight elide: Text.ElideRight
opacity: kbDelegate.isDisabled ? 0.4 : 1.0 opacity: kbDelegate.isDisabled ? 0.4 : 1.0
@ -126,8 +126,8 @@ ColumnLayout {
Rectangle { Rectangle {
visible: kb.activeLabel.length > 0 visible: kb.activeLabel.length > 0
Layout.fillWidth: true Layout.fillWidth: true
Layout.rightMargin: Appearance.padding.small Layout.rightMargin: Tokens.padding.small
Layout.topMargin: Appearance.spacing.small Layout.topMargin: Tokens.spacing.small
implicitHeight: 1 implicitHeight: 1
color: Colours.palette.m3onSurfaceVariant color: Colours.palette.m3onSurfaceVariant
@ -139,9 +139,9 @@ ColumnLayout {
visible: kb.activeLabel.length > 0 visible: kb.activeLabel.length > 0
Layout.fillWidth: true Layout.fillWidth: true
Layout.rightMargin: Appearance.padding.small Layout.rightMargin: Tokens.padding.small
Layout.topMargin: Appearance.spacing.small Layout.topMargin: Tokens.spacing.small
spacing: Appearance.spacing.small spacing: Tokens.spacing.small
opacity: 1 opacity: 1
scale: 1 scale: 1

2
modules/bar/popouts/kblayout/KbLayoutModel.qml
View file

@ -3,7 +3,7 @@ pragma ComponentBehavior: Bound
import QtQuick import QtQuick
import Quickshell.Io import Quickshell.Io
import Caelestia import Caelestia
import qs.config import Caelestia.Config
// TODO: handle this better later // TODO: handle this better later

4
modules/controlcenter/ControlCenter.qml
View file

@ -6,13 +6,13 @@ import Quickshell
import qs.components import qs.components
import qs.components.controls import qs.components.controls
import qs.services import qs.services
import qs.config import Caelestia.Config
Item { Item {
id: root id: root
required property ShellScreen screen required property ShellScreen screen
readonly property int rounding: floating ? 0 : Appearance.rounding.normal readonly property int rounding: floating ? 0 : Tokens.rounding.normal
property alias floating: session.floating property alias floating: session.floating
property alias active: session.active property alias active: session.active

58
modules/controlcenter/NavRail.qml
View file

@ -5,7 +5,7 @@ import QtQuick.Layouts
import Quickshell import Quickshell
import qs.components import qs.components
import qs.services import qs.services
import qs.config import Caelestia.Config
import qs.modules.controlcenter import qs.modules.controlcenter
Item { Item {
@ -15,23 +15,23 @@ Item {
required property Session session required property Session session
required property bool initialOpeningComplete required property bool initialOpeningComplete
implicitWidth: layout.implicitWidth + Appearance.padding.larger * 4 implicitWidth: layout.implicitWidth + Tokens.padding.larger * 4
implicitHeight: layout.implicitHeight + Appearance.padding.large * 2 implicitHeight: layout.implicitHeight + Tokens.padding.large * 2
ColumnLayout { ColumnLayout {
id: layout id: layout
anchors.left: parent.left anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: Appearance.padding.larger * 2 anchors.leftMargin: Tokens.padding.larger * 2
spacing: Appearance.spacing.normal spacing: Tokens.spacing.normal
states: State { states: State {
name: "expanded" name: "expanded"
when: root.session.navExpanded when: root.session.navExpanded
PropertyChanges { PropertyChanges {
layout.spacing: Appearance.spacing.small layout.spacing: Tokens.spacing.small
} }
} }
@ -42,7 +42,7 @@ Item {
} }
Loader { Loader {
Layout.topMargin: Appearance.spacing.large Layout.topMargin: Tokens.spacing.large
asynchronous: true asynchronous: true
active: !root.session.floating active: !root.session.floating
visible: active visible: active
@ -51,10 +51,10 @@ Item {
readonly property int nonAnimWidth: normalWinIcon.implicitWidth + (root.session.navExpanded ? normalWinLabel.anchors.leftMargin + normalWinLabel.implicitWidth : 0) + normalWinIcon.anchors.leftMargin * 2 readonly property int nonAnimWidth: normalWinIcon.implicitWidth + (root.session.navExpanded ? normalWinLabel.anchors.leftMargin + normalWinLabel.implicitWidth : 0) + normalWinIcon.anchors.leftMargin * 2
implicitWidth: nonAnimWidth implicitWidth: nonAnimWidth
implicitHeight: root.session.navExpanded ? normalWinIcon.implicitHeight + Appearance.padding.normal * 2 : nonAnimWidth implicitHeight: root.session.navExpanded ? normalWinIcon.implicitHeight + Tokens.padding.normal * 2 : nonAnimWidth
color: Colours.palette.m3primaryContainer color: Colours.palette.m3primaryContainer
radius: Appearance.rounding.small radius: Tokens.rounding.small
StateLayer { StateLayer {
id: normalWinState id: normalWinState
@ -75,11 +75,11 @@ Item {
anchors.left: parent.left anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: Appearance.padding.large anchors.leftMargin: Tokens.padding.large
text: "select_window" text: "select_window"
color: Colours.palette.m3onPrimaryContainer color: Colours.palette.m3onPrimaryContainer
font.pointSize: Appearance.font.size.large font.pointSize: Tokens.font.size.large
fill: 1 fill: 1
} }
@ -88,7 +88,7 @@ Item {
anchors.left: normalWinIcon.right anchors.left: normalWinIcon.right
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: Appearance.spacing.normal anchors.leftMargin: Tokens.spacing.normal
text: qsTr("Float window") text: qsTr("Float window")
color: Colours.palette.m3onPrimaryContainer color: Colours.palette.m3onPrimaryContainer
@ -96,22 +96,22 @@ Item {
Behavior on opacity { Behavior on opacity {
Anim { Anim {
duration: Appearance.anim.durations.small duration: Tokens.anim.durations.small
} }
} }
} }
Behavior on implicitWidth { Behavior on implicitWidth {
Anim { Anim {
duration: Appearance.anim.durations.expressiveDefaultSpatial duration: Tokens.anim.durations.expressiveDefaultSpatial
easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
} }
} }
Behavior on implicitHeight { Behavior on implicitHeight {
Anim { Anim {
duration: Appearance.anim.durations.expressiveDefaultSpatial duration: Tokens.anim.durations.expressiveDefaultSpatial
easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
} }
} }
} }
@ -123,7 +123,7 @@ Item {
NavItem { NavItem {
required property int index required property int index
Layout.topMargin: index === 0 ? Appearance.spacing.large * 2 : 0 Layout.topMargin: index === 0 ? Tokens.spacing.large * 2 : 0
icon: PaneRegistry.getByIndex(index).icon icon: PaneRegistry.getByIndex(index).icon
label: PaneRegistry.getByIndex(index).label label: PaneRegistry.getByIndex(index).label
} }
@ -148,7 +148,7 @@ Item {
expandedLabel.opacity: 1 expandedLabel.opacity: 1
smallLabel.opacity: 0 smallLabel.opacity: 0
background.implicitWidth: icon.implicitWidth + icon.anchors.leftMargin * 2 + expandedLabel.anchors.leftMargin + expandedLabel.implicitWidth background.implicitWidth: icon.implicitWidth + icon.anchors.leftMargin * 2 + expandedLabel.anchors.leftMargin + expandedLabel.implicitWidth
background.implicitHeight: icon.implicitHeight + Appearance.padding.normal * 2 background.implicitHeight: icon.implicitHeight + Tokens.padding.normal * 2
item.implicitHeight: background.implicitHeight item.implicitHeight: background.implicitHeight
} }
} }
@ -156,24 +156,24 @@ Item {
transitions: Transition { transitions: Transition {
Anim { Anim {
property: "opacity" property: "opacity"
duration: Appearance.anim.durations.small duration: Tokens.anim.durations.small
} }
Anim { Anim {
properties: "implicitWidth,implicitHeight" properties: "implicitWidth,implicitHeight"
duration: Appearance.anim.durations.expressiveDefaultSpatial duration: Tokens.anim.durations.expressiveDefaultSpatial
easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
} }
} }
StyledRect { StyledRect {
id: background id: background
radius: Appearance.rounding.full radius: Tokens.rounding.full
color: Qt.alpha(Colours.palette.m3secondaryContainer, item.active ? 1 : 0) color: Qt.alpha(Colours.palette.m3secondaryContainer, item.active ? 1 : 0)
implicitWidth: icon.implicitWidth + icon.anchors.leftMargin * 2 implicitWidth: icon.implicitWidth + icon.anchors.leftMargin * 2
implicitHeight: icon.implicitHeight + Appearance.padding.small implicitHeight: icon.implicitHeight + Tokens.padding.small
StateLayer { StateLayer {
function onClicked(): void { function onClicked(): void {
@ -192,11 +192,11 @@ Item {
anchors.left: parent.left anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: Appearance.padding.large anchors.leftMargin: Tokens.padding.large
text: item.icon text: item.icon
color: item.active ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface color: item.active ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface
font.pointSize: Appearance.font.size.large font.pointSize: Tokens.font.size.large
fill: item.active ? 1 : 0 fill: item.active ? 1 : 0
Behavior on fill { Behavior on fill {
@ -209,7 +209,7 @@ Item {
anchors.left: icon.right anchors.left: icon.right
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: Appearance.spacing.normal anchors.leftMargin: Tokens.spacing.normal
opacity: 0 opacity: 0
text: item.label text: item.label
@ -222,10 +222,10 @@ Item {
anchors.horizontalCenter: icon.horizontalCenter anchors.horizontalCenter: icon.horizontalCenter
anchors.top: icon.bottom anchors.top: icon.bottom
anchors.topMargin: Appearance.spacing.small / 2 anchors.topMargin: Tokens.spacing.small / 2
text: item.label text: item.label
font.pointSize: Appearance.font.size.small font.pointSize: Tokens.font.size.small
font.capitalization: Font.Capitalize font.capitalization: Font.Capitalize
} }
} }

6
modules/controlcenter/Panes.qml
View file

@ -13,7 +13,7 @@ import QtQuick.Layouts
import Quickshell.Widgets import Quickshell.Widgets
import qs.components import qs.components
import qs.services import qs.services
import qs.config import Caelestia.Config
import qs.modules.controlcenter import qs.modules.controlcenter
ClippingRectangle { ClippingRectangle {
@ -58,7 +58,7 @@ ClippingRectangle {
Timer { Timer {
id: animationDelayTimer id: animationDelayTimer
interval: Appearance.anim.durations.normal interval: Tokens.anim.durations.normal
onTriggered: { onTriggered: {
layout.animationComplete = true; layout.animationComplete = true;
} }
@ -67,7 +67,7 @@ ClippingRectangle {
Timer { Timer {
id: initialOpeningTimer id: initialOpeningTimer
interval: Appearance.anim.durations.large interval: Tokens.anim.durations.large
running: true running: true
onTriggered: { onTriggered: {
layout.initialOpeningComplete = true; layout.initialOpeningComplete = true;

12
modules/controlcenter/WindowTitle.qml
View file

@ -2,7 +2,7 @@ import QtQuick
import Quickshell import Quickshell
import qs.components import qs.components
import qs.services import qs.services
import qs.config import Caelestia.Config
StyledRect { StyledRect {
id: root id: root
@ -10,7 +10,7 @@ StyledRect {
required property ShellScreen screen required property ShellScreen screen
required property Session session required property Session session
implicitHeight: text.implicitHeight + Appearance.padding.normal implicitHeight: text.implicitHeight + Tokens.padding.normal
color: Colours.tPalette.m3surfaceContainer color: Colours.tPalette.m3surfaceContainer
StyledText { StyledText {
@ -21,24 +21,24 @@ StyledRect {
text: qsTr("Caelestia Settings - %1").arg(root.session.active) text: qsTr("Caelestia Settings - %1").arg(root.session.active)
font.capitalization: Font.Capitalize font.capitalization: Font.Capitalize
font.pointSize: Appearance.font.size.larger font.pointSize: Tokens.font.size.larger
font.weight: 500 font.weight: 500
} }
Item { Item {
anchors.right: parent.right anchors.right: parent.right
anchors.top: parent.top anchors.top: parent.top
anchors.margins: Appearance.padding.normal anchors.margins: Tokens.padding.normal
implicitWidth: implicitHeight implicitWidth: implicitHeight
implicitHeight: closeIcon.implicitHeight + Appearance.padding.small implicitHeight: closeIcon.implicitHeight + Tokens.padding.small
StateLayer { StateLayer {
function onClicked(): void { function onClicked(): void {
QsWindow.window.destroy(); QsWindow.window.destroy();
} }
radius: Appearance.rounding.full radius: Tokens.rounding.full
} }
MaterialIcon { MaterialIcon {

14
modules/controlcenter/appearance/AppearancePane.qml
View file

@ -15,7 +15,7 @@ import qs.components.controls
import qs.components.effects import qs.components.effects
import qs.components.images import qs.components.images
import qs.services import qs.services
import qs.config import Caelestia.Config
import qs.utils import qs.utils
Item { Item {
@ -111,9 +111,9 @@ Item {
StyledText { StyledText {
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
Layout.bottomMargin: Appearance.spacing.normal Layout.bottomMargin: Tokens.spacing.normal
text: qsTr("Wallpaper") text: qsTr("Wallpaper")
font.pointSize: Appearance.font.size.extraLarge font.pointSize: Tokens.font.size.extraLarge
font.weight: 600 font.weight: 600
} }
@ -122,7 +122,7 @@ Item {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
Layout.bottomMargin: -Appearance.padding.large * 2 Layout.bottomMargin: -Tokens.padding.large * 2
asynchronous: true asynchronous: true
active: { active: {
@ -172,14 +172,14 @@ Item {
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
spacing: Appearance.spacing.small spacing: Tokens.spacing.small
RowLayout { RowLayout {
spacing: Appearance.spacing.smaller spacing: Tokens.spacing.smaller
StyledText { StyledText {
text: qsTr("Appearance") text: qsTr("Appearance")
font.pointSize: Appearance.font.size.large font.pointSize: Tokens.font.size.large
font.weight: 500 font.weight: 500
} }

Some files were not shown because too many files have changed in this diff Show more