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
-51
View File
@@ -1,51 +0,0 @@
pragma ComponentBehavior: Bound
import QtQuick
import QtQuick.Layouts
import qs.Components
import ZShell.Config
import qs.Helpers
import qs.Services
Item {
id: root
anchors.bottom: parent.bottom
anchors.top: parent.top
implicitWidth: 110
ColumnLayout {
anchors.left: parent.left
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
spacing: 0
CustomText {
Layout.alignment: Qt.AlignHCenter
Layout.bottomMargin: -(font.pointSize * 0.4)
color: Colors.palette.m3secondary
font.family: "Rubik"
font.pointSize: 18
font.weight: 600
text: Time.hourStr
}
CustomText {
Layout.alignment: Qt.AlignHCenter
color: Colors.palette.m3primary
font.family: "Rubik"
font.pointSize: 18 * 0.9
text: "•••"
}
CustomText {
Layout.alignment: Qt.AlignHCenter
Layout.topMargin: -(font.pointSize * 0.4)
color: Colors.palette.m3secondary
font.family: "Rubik"
font.pointSize: 18
font.weight: 600
text: Time.minuteStr
}
}
}
+2 -5
View File
@@ -23,8 +23,7 @@ Row {
MaterialIcon {
anchors.centerIn: parent
fill: 1
font.pointSize: Math.floor(info.implicitHeight / 2) || 1
grade: 200
fontStyle: Tokens.font.icon.large
text: "person"
}
@@ -65,7 +64,6 @@ Row {
anchors.leftMargin: icon.anchors.leftMargin
anchors.verticalCenter: icon.verticalCenter
elide: Text.ElideRight
font.pointSize: 13
text: `: ${SystemInfo.osPrettyName || SystemInfo.osName}`
width: Config.dashboard.sizes.infoWidth
}
@@ -103,7 +101,7 @@ Row {
anchors.leftMargin: (Config.dashboard.sizes.infoIconSize - implicitWidth) / 2
color: line.colour
fill: 1
font.pointSize: 13
fontStyle: Tokens.font.icon.small
text: line.icon
}
@@ -114,7 +112,6 @@ Row {
anchors.leftMargin: icon.anchors.leftMargin
anchors.verticalCenter: icon.verticalCenter
elide: Text.ElideNone
font.pointSize: 13
text: `: ${line.text}`
width: Config.dashboard.sizes.infoWidth
}
+2 -3
View File
@@ -19,7 +19,7 @@ Item {
anchors.verticalCenter: parent.verticalCenter
animate: true
color: Colors.palette.m3secondary
font.pointSize: 54
fontStyle: Tokens.font.icon.extraLarge
text: Weather.icon
}
@@ -35,8 +35,7 @@ Item {
anchors.horizontalCenter: parent.horizontalCenter
animate: true
color: Colors.palette.m3primary
font.pointSize: Tokens.font.size.extraLarge
font.weight: 500
font: Tokens.font.body.large
text: Weather.temp
}
+3 -3
View File
@@ -108,7 +108,7 @@ Item {
anchors.centerIn: parent
text: "queue_music"
font.pointSize: Tokens.font.size.large
fontStyle: Tokens.font.icon.large
color: Colors.palette.m3onPrimaryContainer
}
}
@@ -116,13 +116,13 @@ Item {
CustomText {
Layout.alignment: Qt.AlignHCenter
text: qsTr("Nothing playing")
font.pointSize: Tokens.font.size.normal
font: Tokens.font.body.medium
}
CustomText {
text: qsTr("Play something for it to show up here!")
color: Colors.palette.m3onSurfaceVariant
font.pointSize: Tokens.font.size.large
font: Tokens.font.body.large
}
}
}
+9 -9
View File
@@ -38,7 +38,7 @@ ColumnLayout {
CustomText {
Layout.fillWidth: true
text: Players.active?.trackTitle ?? ""
font.pointSize: Tokens.font.size.large
font: Tokens.font.title.large
elide: Text.ElideRight
animate: true
}
@@ -47,7 +47,7 @@ ColumnLayout {
Layout.fillWidth: true
text: Players.active?.trackArtist || qsTr("Unknown artist")
color: Colors.palette.m3onSurfaceVariant
font.pointSize: Tokens.font.size.normal
font: Tokens.font.title.medium
elide: Text.ElideRight
animate: true
}
@@ -56,7 +56,7 @@ ColumnLayout {
Layout.fillWidth: true
text: Players.active?.trackAlbum || qsTr("Unknown album")
color: Colors.palette.m3secondary
font.pointSize: Tokens.font.size.normal
font: Tokens.font.title.medium
elide: Text.ElideRight
animate: true
}
@@ -70,7 +70,7 @@ ColumnLayout {
id: timeMetrics
text: Players.active ? root.lengthStr(Math.max(Players.active.position, root.hasUnknownLength ? 0 : Players.active.length)).replace(/[1-9]/g, "0") : "00:00"
font.pointSize: Tokens.font.size.normal
font: Tokens.font.label.medium
}
CustomText {
@@ -128,7 +128,7 @@ ColumnLayout {
isRound: true
shapeMorph: true
checked: Players.active?.shuffle ?? false
font.pointSize: Tokens.font.size.large
font: Tokens.font.icon.builders.medium.weight(Font.Medium).build()
enabled: Players.active?.shuffleSupported
onClicked: Players.active.shuffle = !Players.active?.shuffle
implicitWidth: Math.round(implicitHeight * 0.9)
@@ -141,7 +141,7 @@ ColumnLayout {
icon: "skip_previous"
isRound: true
shapeMorph: true
font.pointSize: Tokens.font.size.extraLarge
font: Tokens.font.icon.large
enabled: Players.active?.canGoPrevious
onClicked: Players.active?.previous()
}
@@ -154,7 +154,7 @@ ColumnLayout {
shapeMorph: true
fillWidth: true
checked: Players.active?.isPlaying ?? false
font.pointSize: Tokens.font.size.extraLarge
font: Tokens.font.icon.large
enabled: Players.active?.canTogglePlaying
onClicked: Players.active?.togglePlaying()
}
@@ -166,7 +166,7 @@ ColumnLayout {
icon: "skip_next"
isRound: true
shapeMorph: true
font.pointSize: Tokens.font.size.extraLarge
font: Tokens.font.icon.large
enabled: Players.active?.canGoNext
onClicked: Players.active?.next()
}
@@ -177,7 +177,7 @@ ColumnLayout {
isRound: true
shapeMorph: true
checked: Players.active?.loopState === MprisLoopState.Track || Players.active?.loopState === MprisLoopState.Playlist
font.pointSize: Tokens.font.size.large
font: Tokens.font.icon.builders.medium.weight(Font.Medium).build()
enabled: Players.active?.loopSupported
onClicked: {
const state = Players.active.loopState;
+4 -4
View File
@@ -179,7 +179,7 @@ Item {
CustomText {
text: qsTr("Loading lyrics...")
color: Colors.palette.m3onSurfaceVariant
font.pointSize: Tokens.font.size.normal
font: Tokens.font.body.normal
}
}
@@ -204,14 +204,14 @@ Item {
MaterialIcon {
Layout.alignment: Qt.AlignHCenter
text: "sentiment_sad"
font.pointSize: Tokens.font.size.extraLarge
fontStyle: Tokens.font.icon.extraLarge
color: Colors.palette.m3outline
}
CustomText {
text: qsTr("No lyrics found")
color: Colors.palette.m3outline
font.pointSize: Tokens.font.size.normal
font: Tokens.font.body.medium
}
}
}
@@ -258,7 +258,7 @@ Item {
text: modelData || ". . ."
color: ListView.isCurrentItem ? Colors.palette.m3primary : mouse.containsMouse ? Colors.palette.m3onSurface : Colors.palette.m3outline
font.pointSize: Tokens.font.size.medium
font: Tokens.font.body.medium
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
layer.enabled: effectScale > 0
@@ -23,13 +23,13 @@ Item {
MaterialIcon {
Layout.topMargin: Math.round(fontInfo.pointSize * 0.12)
text: "lyrics"
font.pointSize: Tokens.font.size.large
fontStyle: Tokens.font.icon.large
}
CustomText {
Layout.fillWidth: true
text: qsTr("Lyrics")
font.pointSize: Tokens.font.size.large
font: Tokens.font.body.large
}
LyricsInfo {}
+2 -2
View File
@@ -184,7 +184,7 @@ Item {
text: Lyrics.loading ? qsTr("Loading...") : qsTr("No lyrics found")
color: Colors.palette.m3onSurfaceVariant
font.pointSize: Tokens.font.size.normal
font: Tokens.font.body.medium
animate: true
}
}
@@ -206,7 +206,7 @@ Item {
anchors.centerIn: parent
text: "more_vert"
font.pointSize: Tokens.font.size.large
fontStyle: Tokens.font.icon.medium
}
}
}
+1 -1
View File
@@ -162,7 +162,7 @@ Item {
text: tab.iconName
color: tab.current ? Colors.palette.m3primary : Colors.palette.m3onSurfaceVariant
fill: tab.current ? 1 : 0
font.pointSize: Tokens.font.size.large
fontStyle: Tokens.font.icon.medium
Behavior on fill {
Anim {
+2 -2
View File
@@ -48,7 +48,7 @@ RowLayout {
MaterialIcon {
text: "device_thermostat"
font.pointSize: Tokens.font.size.large
fontStyle: Tokens.font.icon.medium
color: Colors.palette.m3secondary
}
@@ -99,7 +99,7 @@ RowLayout {
MaterialIcon {
text: "water_drop"
font.pointSize: Tokens.font.size.large
fontStyle: Tokens.font.icon.medium
color: Colors.palette.m3tertiary
}
+15 -14
View File
@@ -31,13 +31,13 @@ Item {
CustomText {
text: Weather.city || qsTr("Loading...")
font.pointSize: Tokens.font.size.large
font: Tokens.font.body.builders.large.size(24).weight(Font.DemiBold).build()
color: Colors.palette.m3onSurface
}
CustomText {
text: new Date().toLocaleDateString(Qt.locale("en_US"), "dddd, MMMM d")
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
color: Colors.palette.m3onSurfaceVariant
}
}
@@ -114,7 +114,7 @@ Item {
Layout.leftMargin: Tokens.padding.medium
visible: forecastRepeater.count > 0
text: qsTr("7-day forecast")
font.pointSize: Tokens.font.size.normal
font: Tokens.font.body.builders.medium.weight(Font.DemiBold).build()
color: Colors.palette.m3onSurface
}
@@ -148,7 +148,7 @@ Item {
CustomText {
Layout.alignment: Qt.AlignHCenter
text: forecastItem.index === 0 ? qsTr("Today", "forecast column") : new Date(forecastItem.modelData.date).toLocaleDateString(Qt.locale("en_US"), "ddd")
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.builders.medium.weight(Font.DemiBold).build()
color: Colors.palette.m3primary
}
@@ -156,7 +156,7 @@ Item {
Layout.topMargin: -Tokens.spacing.extraSmall
Layout.alignment: Qt.AlignHCenter
text: new Date(forecastItem.modelData.date).toLocaleDateString(Qt.locale("en_US"), "MMM d")
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
opacity: 0.7
color: Colors.palette.m3onSurfaceVariant
}
@@ -164,7 +164,7 @@ Item {
MaterialIcon {
Layout.alignment: Qt.AlignHCenter
text: forecastItem.modelData.icon
font.pointSize: Tokens.font.size.extraLarge
fontStyle: Tokens.font.icon.extraLarge
color: Colors.palette.m3secondary
}
@@ -175,7 +175,7 @@ Item {
const max = Weather.formatTemp(forecastItem.modelData.maxTempC, true);
return qsTr("%1 / %2", "min/max temperature").arg(min).arg(max);
}
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.builders.small.weight(Font.DemiBold).build()
color: Colors.palette.m3tertiary
}
}
@@ -204,7 +204,7 @@ Item {
MaterialIcon {
text: detailRoot.icon
color: detailRoot.colour
font.pointSize: Tokens.font.size.large
fontStyle: Tokens.font.icon.large
anchors.verticalCenter: parent.verticalCenter
}
@@ -214,20 +214,20 @@ Item {
CustomText {
text: detailRoot.label
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
opacity: 0.7
horizontalAlignment: Text.AlignLeft
}
CustomText {
text: detailRoot.value
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.builders.small.weight(Font.DemiBold).build()
horizontalAlignment: Text.AlignLeft
}
}
}
}
component WeatherStat: Row {
component WeatherStat: RowLayout {
id: weatherStat
property string icon
@@ -239,19 +239,20 @@ Item {
MaterialIcon {
text: weatherStat.icon
font.pointSize: Tokens.font.size.extraLarge
fontStyle: Tokens.font.icon.extraLarge
color: weatherStat.colour
}
Column {
Layout.alignment: Qt.AlignVCenter
CustomText {
text: weatherStat.label
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
color: Colors.palette.m3onSurfaceVariant
}
CustomText {
text: weatherStat.value
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.builders.small.weight(Font.DemiBold).build()
color: Colors.palette.m3onSurface
}
}