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
+5 -4
View File
@@ -13,6 +13,7 @@ import qs.Services
WidgetBase {
id: root
readonly property font font: Tokens.font.clock.family(Config.appearance.font.family.clock).build()
readonly property color contentColor: screenState.dashboard ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
readonly property string effectiveFormat: {
let fmt = Config.general.dateFormat;
@@ -57,7 +58,7 @@ WidgetBase {
anchors.centerIn: parent
color: root.contentColor
font.family: Config.appearance.font.family.mono // qmllint disable incompatible-type
font: root.font
height: implicitHeight
text: Time.dateStr
visible: root.horizontal
@@ -84,7 +85,7 @@ WidgetBase {
Layout.alignment: Qt.AlignHCenter
color: root.contentColor
font.family: Config.appearance.font.family.mono // qmllint disable incompatible-type
font: root.font
text: Qt.formatDateTime(Time.date, modelData)
Behavior on color {
@@ -114,7 +115,7 @@ WidgetBase {
Layout.alignment: Qt.AlignHCenter
color: root.contentColor
font.family: Config.appearance.font.family.mono // qmllint disable incompatible-type
font: root.font
text: {
if (modelData.includes("h"))
return Time.hourStr;
@@ -135,7 +136,7 @@ WidgetBase {
CustomText {
Layout.alignment: Qt.AlignHCenter
color: root.contentColor
font.family: Config.appearance.font.family.mono // qmllint disable incompatible-type
font: root.font
text: Qt.formatDateTime(Time.date, "AP")
visible: Config.services.useTwelveHourClock && root.formatParts.timeTokens.length > 0
@@ -28,8 +28,7 @@ Row {
CustomText {
color: Battery.getColors(root.percentage, root.devState).fg
font.pointSize: Tokens.font.size.larger / 1.5
font.weight: 800
font: Tokens.font.body.builders.small.size(11).weight(Font.Bold).build()
height: track.height
horizontalAlignment: Text.AlignHCenter
text: Math.round(root.percentage * 100)
@@ -60,8 +59,7 @@ Row {
clip: true
color: Battery.getColors(root.percentage, root.devState).bg
font.pointSize: Tokens.font.size.larger / 1.5
font.weight: 800
font: Tokens.font.body.builders.small.size(11).weight(Font.Bold).build()
height: track.height
horizontalAlignment: Text.AlignHCenter
text: Math.round(root.percentage * 100)
+2 -3
View File
@@ -25,12 +25,11 @@ WidgetBase {
animate: true
color: root.tempEnabled ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
fill: root.tempEnabled ? 1 : 0
font.pointSize: Tokens.font.size.larger
fontStyle: Tokens.font.icon.small
text: root.tempEnabled ? "lightbulb" : "light_off"
Behavior on fill {
Anim {
}
Anim {}
}
}
}
+4 -8
View File
@@ -19,14 +19,12 @@ WidgetBase {
Behavior on implicitHeight {
enabled: !root.horizontal
Anim {
}
Anim {}
}
Behavior on implicitWidth {
enabled: root.horizontal
Anim {
}
Anim {}
}
TextMetrics {
@@ -47,15 +45,14 @@ WidgetBase {
columns: root.horizontal ? -1 : 1
Behavior on implicitWidth {
Anim {
}
Anim {}
}
MaterialIcon {
Layout.alignment: root.horizontal ? Qt.AlignVCenter : Qt.AlignHCenter
animate: true
color: Players.active?.isPlaying ? Colors.palette.m3primary : Colors.palette.m3onSurface
font.pointSize: Tokens.font.size.larger
fontStyle: Tokens.font.icon.small
text: Players.active?.isPlaying ? "music_note" : "music_off"
}
@@ -65,7 +62,6 @@ WidgetBase {
Layout.alignment: root.horizontal ? Qt.AlignVCenter : Qt.AlignHCenter
animate: true
color: Players.active?.isPlaying ? Colors.palette.m3primary : Colors.palette.m3onSurface
font.pointSize: Tokens.font.size.normal
horizontalAlignment: Text.AlignHCenter
implicitHeight: root.horizontal ? root.implicitHeight : root.textWidth
implicitWidth: root.horizontal ? root.textWidth : root.implicitWidth
+3 -5
View File
@@ -22,16 +22,14 @@ WidgetBase {
anchors.centerIn: parent
color: root.screenState.sidebar ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
fill: root.screenState.sidebar ? 1 : 0
font.pointSize: Tokens.font.size.larger
fontStyle: Tokens.font.icon.size(16).build()
text: NotifServer.list.length ? "\uf4fe" : "\ue7f4"
Behavior on color {
CAnim {
}
CAnim {}
}
Behavior on fill {
Anim {
}
Anim {}
}
}
+2 -3
View File
@@ -27,8 +27,7 @@ GridLayout {
percentage: 0
Behavior on animatedPercentage {
Anim {
}
Anim {}
}
Component.onCompleted: animatedPercentage = percentage
@@ -44,7 +43,7 @@ GridLayout {
Layout.preferredWidth: 16
color: root.iconColor
font.pointSize: Tokens.font.size.larger
fontStyle: Tokens.font.icon.small
text: root.icon
}
@@ -13,19 +13,16 @@ MaterialIcon {
animate: true
color: Audio.muted ? Colors.palette.m3error : Colors.palette.m3onSurface
fill: 1
font.pointSize: Tokens.font.size.larger
fontStyle: Tokens.font.icon.small
text: Audio.muted ? "volume_off" : "volume_up"
Behavior on Layout.maximumWidth {
Anim {
}
Anim {}
}
Behavior on opacity {
Anim {
}
Anim {}
}
Behavior on scale {
Anim {
}
Anim {}
}
}
@@ -13,19 +13,16 @@ MaterialIcon {
animate: true
color: (Audio.sourceMuted ?? false) ? Colors.palette.m3error : Colors.palette.m3onSurface
fill: 1
font.pointSize: Tokens.font.size.larger
fontStyle: Tokens.font.icon.small
text: Audio.sourceMuted ? "mic_off" : "mic"
Behavior on Layout.maximumWidth {
Anim {
}
Anim {}
}
Behavior on opacity {
Anim {
}
Anim {}
}
Behavior on scale {
Anim {
}
Anim {}
}
}
@@ -15,20 +15,16 @@ Item {
implicitWidth: currentItem?.implicitWidth ?? 0
Behavior on Layout.preferredHeight {
Anim {
}
Anim {}
}
Behavior on Layout.preferredWidth {
Anim {
}
Anim {}
}
Behavior on opacity {
Anim {
}
Anim {}
}
Behavior on scale {
Anim {
}
Anim {}
}
Component.onCompleted: Battery.startDaemon()
@@ -67,7 +63,7 @@ Item {
Layout.alignment: Qt.AlignVCenter
animate: true
fill: 1
font.pointSize: Tokens.font.size.larger
fontStyle: Tokens.font.icon.small
text: {
if (PowerProfiles.profile === PowerProfile.PowerSaver)
return "energy_savings_leaf";
+1 -2
View File
@@ -27,14 +27,13 @@ WidgetBase {
MaterialIcon {
Layout.alignment: root.horizontal ? Qt.AlignVCenter : Qt.AlignHCenter
font.pointSize: root.horizontal ? Tokens.font.size.larger : Tokens.font.size.large
fontStyle: Tokens.font.icon.small
text: "package_2"
}
CustomText {
Layout.alignment: root.horizontal ? Qt.AlignVCenter : Qt.AlignHCenter
color: root.textColor
font.pointSize: Tokens.font.size.normal
text: root.countUpdates
}
}
+2 -4
View File
@@ -52,8 +52,7 @@ Item {
elide: Qt.ElideRight
elideWidth: root.maxSize - (root.horizontal ? root.current.anchors.leftMargin : 0)
font.family: "Rubik"
font.pointSize: Tokens.font.size.normal
font: Tokens.font.body.small
text: Hypr.activeToplevel?.title ?? qsTr("Desktop")
onElideWidthChanged: root.current.text = elidedText
@@ -81,8 +80,7 @@ Item {
width: root.horizontal ? implicitWidth : implicitHeight
Behavior on opacity {
Anim {
}
Anim {}
}
transform: [
Translate {
+2 -3
View File
@@ -181,8 +181,7 @@ Column {
}
]
transitions: Transition {
AnchorAnim {
}
AnchorAnim {}
}
}
@@ -246,7 +245,7 @@ Column {
anchors.centerIn: parent
color: profiles.current === text ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
fill: profiles.current === text ? 1 : 0
font.pointSize: Tokens.font.size.large * 2
fontStyle: Tokens.font.icon.extraLarge
grade: Colors.light ? 0 : (text === "balance" ? -25 : 0)
text: parent.icon
+6 -6
View File
@@ -39,7 +39,7 @@ CustomClippingRect {
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
color: Colors.tPalette.m3onSurfaceVariant
font.pointSize: Tokens.font.size.extraLarge * 3
fontStyle: Tokens.font.icon.builders.large.size(48).weight(Font.DemiBold).build()
horizontalAlignment: Text.AlignHCenter
text: "check"
}
@@ -89,7 +89,7 @@ CustomClippingRect {
anchors.rightMargin: Tokens.padding.small
MaterialIcon {
font.pointSize: Tokens.font.size.large * 2
fontStyle: Tokens.font.icon.extraLarge
text: "package_2"
}
@@ -100,7 +100,7 @@ CustomClippingRect {
Layout.fillWidth: true
Layout.preferredHeight: 25
elide: Text.ElideRight
font.pointSize: Tokens.font.size.large
font: Tokens.font.title.medium
text: update.sections[0]
}
@@ -122,7 +122,7 @@ CustomClippingRect {
Layout.preferredWidth: 125
animate: true
color: Colors.palette.m3tertiary
font.pointSize: Tokens.font.size.large
font: Tokens.font.title.medium
horizontalAlignment: Text.AlignHCenter
marqueeEnabled: true
pauseMs: 4000
@@ -133,7 +133,7 @@ CustomClippingRect {
MaterialIcon {
Layout.fillHeight: true
color: Colors.palette.m3secondary
font.pointSize: Tokens.font.size.extraLarge
fontStyle: Tokens.font.icon.large
horizontalAlignment: Text.AlignHCenter
text: "arrow_right_alt"
verticalAlignment: Text.AlignVCenter
@@ -146,7 +146,7 @@ CustomClippingRect {
Layout.preferredWidth: 120
animate: true
color: Colors.palette.m3primary
font.pointSize: Tokens.font.size.large
font: Tokens.font.title.medium
horizontalAlignment: Text.AlignHCenter
marqueeEnabled: true
pauseMs: 4000