feat: fontbuilder to streamline font styling

This commit is contained in:
2026-09-30 14:23:31 +02:00
parent 2c90339c77
commit f825e4d53b
115 changed files with 1687 additions and 916 deletions
+12 -25
View File
@@ -28,27 +28,21 @@ ColumnLayout {
CustomText {
Layout.alignment: Qt.AlignVCenter
color: Colors.palette.m3secondary
font.bold: true
font.family: Config.appearance.font.family.clock
font.pointSize: Math.floor(Tokens.font.size.extraLarge * 3 * root.centerScale)
font: Tokens.font.headline.builders.large.scale(3 * root.centerScale).weight(Font.Bold).width(30).build()
text: Time.hourStr
}
CustomText {
Layout.alignment: Qt.AlignVCenter
color: Colors.palette.m3primary
font.bold: true
font.family: Config.appearance.font.family.clock
font.pointSize: Math.floor(Tokens.font.size.extraLarge * 3 * root.centerScale)
font: Tokens.font.headline.builders.large.scale(3 * root.centerScale).weight(Font.Bold).width(30).build()
text: ":"
}
CustomText {
Layout.alignment: Qt.AlignVCenter
color: Colors.palette.m3secondary
font.bold: true
font.family: Config.appearance.font.family.clock
font.pointSize: Math.floor(Tokens.font.size.extraLarge * 3 * root.centerScale)
font: Tokens.font.headline.builders.large.scale(3 * root.centerScale).weight(Font.Bold).width(30).build()
text: Time.minuteStr
}
}
@@ -57,9 +51,7 @@ ColumnLayout {
Layout.alignment: Qt.AlignHCenter
Layout.topMargin: -Tokens.padding.large * 2
color: Colors.palette.m3tertiary
font.bold: true
font.family: Config.appearance.font.family.mono
font.pointSize: Math.floor(Tokens.font.size.extraLarge * root.centerScale)
font: Tokens.font.title.builders.medium.weight(Font.DemiBold).build()
text: Time.format("dddd, d MMMM yyyy")
}
@@ -74,7 +66,7 @@ ColumnLayout {
MaterialIcon {
anchors.centerIn: parent
color: Colors.palette.m3onSurfaceVariant
font.pointSize: Math.floor(root.centerWidth / 4)
fontStyle: Tokens.font.icon.size(root.centerWidth / 4).build()
text: "person"
}
@@ -144,8 +136,7 @@ ColumnLayout {
}
Behavior on opacity {
Anim {
}
Anim {}
}
}
@@ -159,6 +150,7 @@ ColumnLayout {
id: inputField
pam: root.lock.pam
centerScale: root.centerScale
}
CustomRect {
@@ -180,7 +172,6 @@ ColumnLayout {
anchors.centerIn: parent
color: root.lock.pam.buffer ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
font.weight: 500
text: "arrow_forward"
}
}
@@ -193,8 +184,7 @@ ColumnLayout {
implicitHeight: Math.max(message.implicitHeight, stateMessage.implicitHeight)
Behavior on implicitHeight {
Anim {
}
Anim {}
}
CustomText {
@@ -226,7 +216,7 @@ ColumnLayout {
anchors.right: parent.right
animateProp: "opacity"
color: Colors.palette.m3onSurfaceVariant
font.family: Config.appearance.font.family.mono
font: Tokens.font.body.small
horizontalAlignment: Qt.AlignHCenter
lineHeight: 1.2
opacity: shouldBeVisible && !message.msg ? 1 : 0
@@ -234,12 +224,10 @@ ColumnLayout {
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
Behavior on opacity {
Anim {
}
Anim {}
}
Behavior on scale {
Anim {
}
Anim {}
}
onMsgChanged: {
@@ -295,8 +283,7 @@ ColumnLayout {
anchors.left: parent.left
anchors.right: parent.right
color: Colors.palette.m3error
font.family: Config.appearance.font.family.mono
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
horizontalAlignment: Qt.AlignHCenter
opacity: 0
scale: 0.7
+6 -9
View File
@@ -14,6 +14,7 @@ Item {
property string buffer
required property Pam pam
required property real centerScale
readonly property alias placeholder: placeholder
Layout.fillHeight: true
@@ -41,8 +42,7 @@ Item {
anchors.centerIn: parent
animate: true
color: root.pam.passwd.active ? Colors.palette.m3secondary : Colors.palette.m3outline
font.family: Config.appearance.font.family.mono
font.pointSize: Tokens.font.size.normal
font: Tokens.font.body.builders.medium.scale(root.centerScale).width(110).build()
opacity: root.buffer ? 0 : 1
text: {
if (root.pam.passwd.active)
@@ -53,8 +53,7 @@ Item {
}
Behavior on opacity {
Anim {
}
Anim {}
}
}
@@ -84,12 +83,11 @@ Item {
implicitHeight: charList.implicitHeight
implicitWidth: implicitHeight
opacity: 0
radius: Tokens.rounding.small / 2
radius: Tokens.rounding.full
scale: 0
Behavior on opacity {
Anim {
}
Anim {}
}
Behavior on scale {
Anim {
@@ -137,8 +135,7 @@ Item {
Behavior on implicitWidth {
id: imWidthBehavior
Anim {
}
Anim {}
}
model: ScriptModel {
values: root.buffer.split("")
+1 -2
View File
@@ -236,8 +236,7 @@ WlSessionLockSurface {
id: lockIcon
anchors.centerIn: parent
font.bold: true
font.pointSize: Tokens.font.size.extraLarge * 4
fontStyle: Tokens.font.icon.builders.extraLarge.scale(4).weight(Font.Bold).build()
text: "lock"
}
+1 -2
View File
@@ -57,7 +57,7 @@ CustomClippingRect {
animate: true
color: Colors.palette.m3primary
elide: Text.ElideRight
font.pointSize: Tokens.font.size.normal
font: Tokens.font.title.large
horizontalAlignment: Text.AlignHCenter
text: (Players.active?.trackTitle ?? qsTr("Nothing playing")) || qsTr("Unknown track")
}
@@ -67,7 +67,6 @@ CustomClippingRect {
animate: true
color: Colors.palette.m3onSurfaceVariant
elide: Text.ElideRight
font.pointSize: Tokens.font.size.small
horizontalAlignment: Text.AlignHCenter
text: (Players.active?.trackArtist ?? qsTr("Try playing some music!")) || qsTr("Unknown artist")
}
+2 -5
View File
@@ -66,9 +66,7 @@ ColumnLayout {
CustomText {
Layout.alignment: Qt.AlignHCenter
color: Colors.palette.m3outlineVariant
font.family: Config.appearance.font.family.mono
font.pointSize: Tokens.font.size.large
font.weight: 500
font: Tokens.font.headline.builders.small.width(90).build()
text: qsTr("No Notifications")
}
}
@@ -94,8 +92,7 @@ ColumnLayout {
to: 1
}
}
delegate: NotifGroup {
}
delegate: NotifGroup {}
displaced: Transition {
Anim {
properties: "opacity,scale"
+8 -12
View File
@@ -80,7 +80,7 @@ CustomRect {
MaterialIcon {
color: root.urgency === "critical" ? Colors.palette.m3onError : root.urgency === "low" ? Colors.palette.m3onSurface : Colors.palette.m3onSecondaryContainer
font.pointSize: Tokens.font.size.large
fontStyle: Tokens.font.icon.large
text: Icons.getNotifIcon(root.notifs[0]?.summary, root.urgency)
}
}
@@ -133,14 +133,14 @@ CustomRect {
Layout.fillWidth: true
color: Colors.palette.m3onSurfaceVariant
elide: Text.ElideRight
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
text: root.modelData
}
CustomText {
animate: true
color: Colors.palette.m3outline
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
text: root.notifs[0]?.timeStr ?? ""
}
@@ -153,12 +153,10 @@ CustomRect {
radius: Tokens.rounding.full
Behavior on Layout.preferredWidth {
Anim {
}
Anim {}
}
Behavior on opacity {
Anim {
}
Anim {}
}
StateLayer {
@@ -181,7 +179,7 @@ CustomRect {
Layout.leftMargin: Tokens.padding.extraSmall / 2
animate: true
color: root.urgency === "critical" ? Colors.palette.m3onError : Colors.palette.m3onSurface
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
text: root.notifs.length
}
@@ -261,8 +259,7 @@ CustomRect {
opacity: root.expanded ? 1 : 0
Behavior on opacity {
Anim {
}
Anim {}
}
sourceComponent: ColumnLayout {
Repeater {
@@ -270,8 +267,7 @@ CustomRect {
values: root.notifs.slice(Config.notifs.groupPreviewNum)
}
NotifLine {
}
NotifLine {}
}
}
}
+2 -3
View File
@@ -70,14 +70,13 @@ CustomRect {
implicitSize: width
Behavior on clampedVal {
Anim {
}
Anim {}
}
MaterialIcon {
anchors.centerIn: parent
color: res.fgColor
font.pointSize: Tokens.font.size.extraLarge
fontStyle: Tokens.font.icon.extraLarge
text: res.icon
}
}
+4 -4
View File
@@ -16,7 +16,7 @@ ColumnLayout {
Layout.alignment: Qt.AlignHCenter
animate: true
color: Colors.palette.m3onSurfaceVariant
font.pointSize: Tokens.font.size.large
font: Tokens.font.title.large
text: Weather.description
}
@@ -29,7 +29,7 @@ ColumnLayout {
animate: true
color: Colors.palette.m3primary
font.pointSize: Tokens.font.size.large
font: Tokens.font.body.large
text: Weather.temp
}
@@ -44,7 +44,7 @@ ColumnLayout {
Layout.alignment: Qt.AlignHCenter
animate: true
color: Colors.palette.m3onSurfaceVariant
font.pointSize: Tokens.font.size.large
font: Tokens.font.body.large
text: qsTr("Feels like %1").arg(Weather.temp)
visible: root.rootHeight > 550
}
@@ -53,7 +53,7 @@ ColumnLayout {
Layout.alignment: Qt.AlignHCenter
animate: true
color: Colors.palette.m3onSurfaceVariant
font.pointSize: Tokens.font.size.normal
font: Tokens.font.body.normal
text: {
const today = Weather.forecast[0];
return qsTr("High %1 • Low %2").arg(Weather.formatTemp(today?.maxTempC)).arg(Weather.formatTemp(today?.minTempC));
+6 -7
View File
@@ -24,14 +24,14 @@ CustomRect {
MaterialIcon {
Layout.topMargin: Math.round(fontInfo.pointSize * 0.12)
font.pointSize: Tokens.font.size.normal
fontStyle: Tokens.font.icon.medium
text: "schedule"
}
CustomText {
id: title
font.pointSize: Tokens.font.size.normal
font: Tokens.font.title.medium
text: qsTr("Hourly forecast")
}
}
@@ -65,8 +65,7 @@ CustomRect {
shape: MaterialShape.Cookie4Sided
Behavior on color {
CAnim {
}
CAnim {}
}
CustomText {
@@ -74,7 +73,7 @@ CustomRect {
anchors.centerIn: parent
color: hour.index === Weather.currentHourIndex ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
font.pointSize: Tokens.font.size.normal
font: Tokens.font.body.medium
text: Weather.formatTemp(hour.cond.tempC).slice(0, -1) // Remove C/F
}
}
@@ -82,7 +81,7 @@ CustomRect {
MaterialIcon {
Layout.alignment: Qt.AlignHCenter
color: Colors.palette.m3secondary
font.pointSize: Tokens.font.size.extraLarge
fontStyle: Tokens.font.icon.extraLarge
text: hour.cond.icon
}
@@ -96,7 +95,7 @@ CustomRect {
Layout.alignment: Qt.AlignHCenter
Layout.topMargin: Tokens.spacing.extraSmall
color: Colors.palette.m3onSurfaceVariant
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
text: hour.index === 0 ? qsTr("Now") : Qt.formatDateTime(new Date(hour.cond.timestamp.replace("T", " ")), Config.services.useTwelveHourClock ? "ha" : "hh:00")
}
}