refactor: migrate components to new font API

This commit is contained in:
2 * r + 2 * t 2026-04-21 01:02:03 +10:00
parent 79217c46ea
commit 3a30fcc730
17 changed files with 31 additions and 48 deletions

View file

@ -16,15 +16,13 @@ ColumnLayout {
Layout.alignment: Qt.AlignHCenter
animate: true
text: root.icon
font.pointSize: Tokens.font.size.extraLarge * 3
font.bold: true
font: Tokens.font.icon.builders.extraLarge.size(Tokens.font.icon.extraLarge.pointSize * 3).weight(Font.Bold).build()
}
StyledText {
Layout.alignment: Qt.AlignHCenter
animate: true
text: root.title
font.pointSize: Tokens.font.size.large
font.bold: true
font: Tokens.font.title.builders.medium.weight(Font.Bold).build()
}
}

View file

@ -18,7 +18,7 @@ ColumnLayout {
StyledText {
text: root.deviceDetails?.ipAddress || qsTr("Not available")
color: Colours.palette.m3outline
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
}
StyledText {
@ -29,7 +29,7 @@ ColumnLayout {
StyledText {
text: root.deviceDetails?.subnet || qsTr("Not available")
color: Colours.palette.m3outline
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
}
StyledText {
@ -40,7 +40,7 @@ ColumnLayout {
StyledText {
text: root.deviceDetails?.gateway || qsTr("Not available")
color: Colours.palette.m3outline
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
}
StyledText {
@ -51,7 +51,7 @@ ColumnLayout {
StyledText {
text: (root.deviceDetails && root.deviceDetails.dns && root.deviceDetails.dns.length > 0) ? root.deviceDetails.dns.join(", ") : qsTr("Not available")
color: Colours.palette.m3outline
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
wrapMode: Text.Wrap
Layout.maximumWidth: parent.width
}

View file

@ -5,12 +5,5 @@ StyledText {
property real fill
property int grade: Colours.light ? 0 : -25
font.family: Tokens.font.family.material
font.pointSize: Tokens.font.size.larger
font.variableAxes: ({
FILL: fill.toFixed(1),
GRAD: grade,
opsz: fontInfo.pixelSize,
wght: fontInfo.weight
})
font: Tokens.font.icon.builders.large.vaxis("FILL", fill.toFixed(1)).vaxis("GRAD", grade).vaxis("opsz", fontInfo.pixelSize).vaxis("wght", fontInfo.weight).build()
}

View file

@ -21,6 +21,6 @@ ColumnLayout {
StyledText {
text: root.value
color: Colours.palette.m3outline
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
}
}

View file

@ -15,8 +15,7 @@ ColumnLayout {
StyledText {
Layout.topMargin: Tokens.spacing.largeIncreased
text: root.title
font.pointSize: Tokens.font.size.larger
font.weight: 500
font: Tokens.font.title.builders.medium.weight(500).build()
}
StyledText {

View file

@ -16,8 +16,7 @@ Text {
renderType: Text.NativeRendering
textFormat: Text.PlainText
color: Colours.palette.m3onSurface
font.family: Tokens.font.family.sans
font.pointSize: Tokens.font.size.smaller
font: Tokens.font.body.small
Behavior on color {
CAnim {}

View file

@ -19,8 +19,8 @@ BusyIndicator {
Completing
}
property real implicitSize: Tokens.font.size.normal * 3
property real strokeWidth: Tokens.padding.extraSmall * 0.8
property real implicitSize: Tokens.font.body.medium.pointSize * 3
property real strokeWidth: Tokens.padding.small * 0.8
property color fgColour: Colours.palette.m3primary
property color bgColour: Colours.palette.m3secondaryContainer

View file

@ -38,8 +38,7 @@ ColumnLayout {
StyledText {
text: root.title
font.pointSize: Tokens.font.size.larger
font.weight: 500
font: Tokens.font.title.builders.medium.weight(500).build()
}
Item {
@ -50,7 +49,7 @@ ColumnLayout {
text: "expand_more"
rotation: root.expanded ? 180 : 0
color: Colours.palette.m3onSurfaceVariant
font.pointSize: Tokens.font.size.normal
font: Tokens.font.icon.medium
Behavior on rotation {
Anim {
@ -122,7 +121,7 @@ ColumnLayout {
visible: root.description !== ""
text: root.description
color: Colours.palette.m3onSurfaceVariant
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
wrapMode: Text.Wrap
}
}

View file

@ -70,8 +70,7 @@ Slider {
function update(): void {
animate = !moving;
binding.when = moving;
font.pointSize = moving ? Tokens.font.size.small : Tokens.font.size.larger;
font.family = moving ? Tokens.font.family.sans : Tokens.font.family.material;
font = moving ? Tokens.font.body.small : Tokens.font.icon.large;
}
text: root.icon

View file

@ -7,7 +7,7 @@ import qs.services
RadioButton {
id: root
font.pointSize: Tokens.font.size.smaller
font: Tokens.font.body.small
implicitWidth: implicitIndicatorWidth + implicitContentWidth + contentItem.anchors.leftMargin
implicitHeight: Math.max(implicitIndicatorHeight, implicitContentHeight)
@ -46,7 +46,7 @@ RadioButton {
contentItem: StyledText {
text: root.text
font.pointSize: root.font.pointSize
font: root.font
anchors.verticalCenter: parent.verticalCenter
anchors.left: outerCircle.right
anchors.leftMargin: Tokens.spacing.medium

View file

@ -18,7 +18,7 @@ Switch {
color: root.checked ? Colours.palette.m3primary : Colours.layer(Colours.palette.m3surfaceContainerHighest, root.cLayer)
implicitWidth: implicitHeight * 1.7
implicitHeight: Tokens.font.size.normal + Tokens.padding.large
implicitHeight: Tokens.font.body.medium.pointSize + Tokens.padding.smaller * 2
StyledRect {
readonly property real nonAnimWidth: root.pressed ? implicitHeight * 1.3 : implicitHeight
@ -88,7 +88,7 @@ Switch {
asynchronous: true
ShapePath {
strokeWidth: root.Tokens.font.size.larger * 0.15
strokeWidth: root.Tokens.font.body.large.pointSize * 0.15
strokeColor: root.checked ? Colours.palette.m3primary : Colours.palette.m3surfaceContainerHighest
fillColor: "transparent"
capStyle: root.Tokens.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap

View file

@ -11,8 +11,7 @@ TextField {
color: Colours.palette.m3onSurface
placeholderTextColor: Colours.palette.m3outline
font.family: Tokens.font.family.sans
font.pointSize: Tokens.font.size.smaller
font: Tokens.font.body.small
renderType: echoMode === TextField.Password ? TextField.QtRendering : TextField.NativeRendering
cursorVisible: !readOnly

View file

@ -14,7 +14,7 @@ StyledRect {
property string icon
property string label
property string accent: "Secondary"
property real iconSize: Tokens.font.size.large
property real iconSize: Tokens.font.icon.large.pointSize
property real horizontalPadding: Tokens.padding.large
property real verticalPadding: Tokens.padding.medium
property string tooltip: ""
@ -61,7 +61,7 @@ StyledRect {
fill: root.toggled ? 1 : 0
text: root.icon
color: root.toggled ? Colours.palette[`m3on${root.accent}`] : Colours.palette[`m3on${root.accent}Container`]
font.pointSize: root.iconSize
font: Tokens.font.icon.builders.large.size(root.iconSize).build()
Behavior on fill {
Anim {}

View file

@ -138,7 +138,7 @@ Popup {
text: root.text
color: Colours.palette.m3onSurface
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
}
}

View file

@ -59,15 +59,13 @@ Item {
Layout.alignment: Qt.AlignHCenter
text: "scan_delete"
color: Colours.palette.m3outline
font.pointSize: Tokens.font.size.extraLarge * 2
font.weight: 500
font: Tokens.font.icon.builders.extraLarge.size(Tokens.font.icon.extraLarge.pointSize * 2).weight(500).build()
}
StyledText {
text: qsTr("This folder is empty")
color: Colours.palette.m3outline
font.pointSize: Tokens.font.size.large
font.weight: 500
font: Tokens.font.body.builders.large.weight(500).build()
}
}

View file

@ -78,7 +78,7 @@ StyledRect {
sourceComponent: StyledText {
text: "/"
color: Colours.palette.m3onSurfaceVariant
font.bold: true
font: Tokens.font.body.builders.small.weight(Font.Bold).build()
}
}
@ -125,7 +125,7 @@ StyledRect {
text: folder.modelData
color: folder.index < root.dialog.cwd.length - 1 ? Colours.palette.m3onSurfaceVariant : Colours.palette.m3onSurface
font.bold: true
font: Tokens.font.body.builders.small.weight(Font.Bold).build()
}
}
}

View file

@ -32,8 +32,7 @@ StyledRect {
Layout.bottomMargin: Tokens.spacing.medium
text: qsTr("Files")
color: Colours.palette.m3onSurface
font.pointSize: Tokens.font.size.larger
font.bold: true
font: Tokens.font.body.builders.large.weight(Font.Bold).build()
}
Repeater {
@ -91,7 +90,7 @@ StyledRect {
return "folder";
}
color: place.selected ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface
font.pointSize: Tokens.font.size.large
font: Tokens.font.icon.large
fill: place.selected ? 1 : 0
Behavior on fill {
@ -103,7 +102,7 @@ StyledRect {
Layout.fillWidth: true
text: place.modelData
color: place.selected ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface
font.pointSize: Tokens.font.size.normal
font: Tokens.font.body.medium
elide: Text.ElideRight
}
}