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
+4 -5
View File
@@ -60,12 +60,11 @@ ItemList {
anchors.centerIn: parent
color: device.active ? Colors.palette.m3onPrimary : Colors.palette.m3onSecondaryContainer
fill: device.active ? 1 : 0
font.pointSize: Tokens.font.size.large
fontStyle: Tokens.font.icon.medium
text: root.iconName
Behavior on fill {
Anim {
}
Anim {}
}
}
}
@@ -73,13 +72,13 @@ ItemList {
CustomText {
Layout.fillWidth: true
elide: Text.ElideRight
font.pointSize: Tokens.font.size.smaller
font: Tokens.font.body.small
text: device.modelData?.description || device.modelData?.name || qsTr("Unknown")
}
MaterialIcon {
color: Colors.palette.m3primary
font.pointSize: Tokens.font.size.large
fontStyle: Tokens.font.icon.medium
opacity: device.active ? 1 : 0
text: "check"
+3 -5
View File
@@ -35,8 +35,7 @@ Item {
smoothing: Tokens.rounding.largeIncreased
Behavior on color {
CAnim {
}
CAnim {}
}
}
@@ -49,8 +48,7 @@ Item {
radius: root.open ? Tokens.rounding.largeIncreased : Tokens.rounding.largeIncreased
Behavior on anchors.margins {
Anim {
}
Anim {}
}
Behavior on radius {
Anim {
@@ -122,7 +120,7 @@ Item {
anchors.centerIn: parent
color: Colors.palette.m3onSurfaceVariant
font.pointSize: Tokens.font.size.normal
fontStyle: Tokens.font.icon.medium
text: "view_apps"
}
}
+1 -1
View File
@@ -185,7 +185,7 @@ Item {
spacing: 0
CustomText {
font.pointSize: Tokens.font.size.large
font: Tokens.font.title.builders.large.weight(Font.Normal).build()
text: root.header
}
@@ -65,7 +65,6 @@ DialogRowButton {
anchors.verticalCenter: parent.verticalCenter
color: item.selected ? Colors.palette.m3onTertiaryContainer : Colors.palette.m3onSurface
elide: Text.ElideRight
font.pointSize: Tokens.font.size.smaller
text: root.labelFor(item.modelData)
}
@@ -76,7 +75,7 @@ DialogRowButton {
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
color: Colors.palette.m3onTertiaryContainer
font.pointSize: Tokens.font.size.normal
fontStyle: Tokens.font.icon.medium
opacity: item.selected ? 1 : 0
text: "check"
+4 -4
View File
@@ -24,7 +24,7 @@ ConnectedRect {
MaterialIcon {
color: root.iconColor
font.pointSize: Tokens.font.size.small
fontStyle: Tokens.font.icon.small
text: root.icon
}
}
@@ -53,14 +53,14 @@ ConnectedRect {
Layout.fillWidth: true
elide: Text.ElideRight
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
}
CustomText {
Layout.fillWidth: true
color: Colors.palette.m3outline
elide: Text.ElideRight
font.pointSize: Tokens.font.size.small
font: Tokens.font.label.small
text: root.subtext
visible: root.subtext
}
@@ -72,7 +72,7 @@ ConnectedRect {
Layout.maximumWidth: root.width / 2
color: Colors.palette.m3onSurfaceVariant
elide: Text.ElideRight
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
horizontalAlignment: Text.AlignRight
}
}
+3 -4
View File
@@ -23,8 +23,7 @@ ConnectedRect {
implicitHeight: (showList && list.count > 0 ? list.contentHeight : placeholder.implicitHeight + Tokens.padding.extraLarge * 2) + extraHeight
Behavior on implicitHeight {
Anim {
}
Anim {}
}
Loader {
@@ -46,7 +45,7 @@ ConnectedRect {
Layout.alignment: Qt.AlignHCenter
animate: true
color: Colors.palette.m3outline
font.pointSize: Tokens.font.size.large
fontStyle: Tokens.font.icon.large
text: root.placeholderIcon
}
@@ -54,7 +53,7 @@ ConnectedRect {
Layout.alignment: Qt.AlignHCenter
animate: true
color: Colors.palette.m3outline
font.pointSize: Tokens.font.size.large
font: Tokens.font.body.large
text: root.placeholderText
}
}
+5 -8
View File
@@ -54,14 +54,12 @@ ListView {
}
}
Behavior on implicitHeight {
Anim {
}
Anim {}
}
model: DelegateModel {
id: visualModel
delegate: ListRow {
}
delegate: ListRow {}
model: ScriptModel {
id: valuesModel
}
@@ -280,7 +278,7 @@ ListView {
id: dragIcon
color: Qt.alpha(Colors.palette.m3onSurfaceVariant, enabledSwitch.checked ? 1 : 0.5)
font.pointSize: Tokens.font.size.normal
fontStyle: Tokens.font.icon.medium
text: "drag_indicator"
}
@@ -290,7 +288,6 @@ ListView {
Layout.fillWidth: true
color: Qt.alpha(Colors.palette.m3onSurface, enabledSwitch.checked ? 1 : 0.5)
elide: Text.ElideRight
font.pointSize: Tokens.font.size.smaller
text: root.labelFor(item.modelData)
}
@@ -298,13 +295,13 @@ ListView {
id: enabledSwitch
checked: root.toggledFor(item.modelData)
font.pointSize: Tokens.font.size.normal
font: Tokens.font.icon.medium
onToggled: root.itemToggled(item.DelegateModel.itemsIndex, checked)
}
IconButton {
font.pointSize: Tokens.font.size.large
font: Tokens.font.icon.medium
icon: "delete"
inactiveOnColor: Colors.palette.m3error
isRound: true
+3 -66
View File
@@ -1,71 +1,8 @@
pragma ComponentBehavior: Bound
import QtQuick
import QtQuick.Layouts
import qs.Components
import ZShell.Config
import qs.Services
ConnectedRect {
id: root
property alias icon: icon.text
property alias status: status.text
property alias text: label.text
signal clicked
Layout.fillWidth: true
implicitHeight: navLayout.implicitHeight + navLayout.anchors.margins * 2
StateLayer {
onClicked: root.clicked()
}
RowLayout {
id: navLayout
anchors.fill: parent
anchors.leftMargin: Tokens.padding.largeIncreased
anchors.margins: Tokens.padding.small
anchors.rightMargin: Tokens.padding.largeIncreased
spacing: Tokens.spacing.medium
MaterialIcon {
id: icon
color: Colors.palette.m3onSurfaceVariant
font.pointSize: Tokens.font.size.large
}
ColumnLayout {
Layout.fillWidth: true
spacing: 0
CustomText {
id: label
Layout.fillWidth: true
elide: Text.ElideRight
font.pointSize: Tokens.font.size.small
}
CustomText {
id: status
Layout.fillWidth: true
animate: true
color: Colors.palette.m3outline
elide: Text.ElideRight
font.pointSize: Tokens.font.size.small
visible: text
}
}
MaterialIcon {
color: Colors.palette.m3onSurfaceVariant
font.pointSize: Tokens.font.size.normal
text: "chevron_right"
}
}
RowButton {
trailingIcon: "chevron_right"
subLabel.animate: true
}
+2 -1
View File
@@ -134,6 +134,7 @@ ColumnLayout {
inactiveOnColor: Colors.palette.m3onSurfaceVariant
isRound: true
type: IconButton.Tonal
font: Tokens.font.icon.medium
onClicked: root.sState.closeSubPage()
}
@@ -142,7 +143,7 @@ ColumnLayout {
CustomText {
Layout.fillWidth: true
elide: Text.ElideRight
font.pointSize: Tokens.font.size.large
font: Tokens.font.title.large
text: root.title
}
}
+3 -3
View File
@@ -40,7 +40,7 @@ ConnectedRect {
id: icon
color: Colors.palette.m3onSurfaceVariant
font.pointSize: Tokens.font.size.larger
fontStyle: Tokens.font.icon.medium
}
ColumnLayout {
@@ -52,7 +52,7 @@ ConnectedRect {
Layout.fillWidth: true
elide: Text.ElideRight
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
}
CustomText {
@@ -62,7 +62,7 @@ ConnectedRect {
animate: true
color: Colors.palette.m3outline
elide: Text.ElideRight
font.pointSize: Tokens.font.size.small
font: Tokens.font.label.small
visible: text
}
}
+3 -4
View File
@@ -51,7 +51,7 @@ ConnectedRect {
visible: root.icon !== ""
fill: 1
text: root.icon
font.pointSize: Tokens.font.size.normal
fontStyle: Tokens.font.icon.medium
}
Column {
@@ -66,7 +66,6 @@ ConnectedRect {
anchors.left: parent.left
anchors.right: parent.right
elide: Text.ElideRight
font.pointSize: Tokens.font.size.small
}
CustomText {
@@ -76,7 +75,7 @@ ConnectedRect {
anchors.right: parent.right
color: Colors.palette.m3outline
elide: Text.ElideRight
font.pointSize: Tokens.font.size.small
font: Tokens.font.label.small
visible: text
}
}
@@ -108,7 +107,7 @@ ConnectedRect {
sourceComponent: MaterialIcon {
color: Colors.palette.m3onSurfaceVariant
font.pointSize: Tokens.font.size.normal
fontStyle: Tokens.font.icon.medium
text: root.trailingIcon
}
}
+4 -5
View File
@@ -70,7 +70,6 @@ DialogRowButton {
anchors.verticalCenter: parent.verticalCenter
color: item.selected ? Colors.palette.m3onTertiaryContainer : Colors.palette.m3onSurface
elide: Text.ElideRight
font.pointSize: Tokens.font.size.smaller
text: item.modelData
}
@@ -81,7 +80,7 @@ DialogRowButton {
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
color: Colors.palette.m3onTertiaryContainer
font.pointSize: Tokens.font.size.normal
fontStyle: Tokens.font.icon.medium
opacity: item.selected ? 1 : 0
text: "check"
@@ -100,12 +99,12 @@ DialogRowButton {
Layout.fillWidth: true
bg.border.color: Colors.palette.m3outlineVariant
bg.color: Colors.tPalette.m3surfaceContainerLowest
clearIcon.font.pointSize: Tokens.font.size.large
clearIcon.font: Tokens.font.icon.medium
clearIcon.padding: Tokens.padding.extraSmall
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
placeholderText: qsTr("Search...")
searchIcon.anchors.leftMargin: Tokens.padding.large
searchIcon.font.pointSize: Tokens.font.size.large
searchIcon.fontStyle: Tokens.font.icon.medium
Behavior on bg.border.color {
CAnim {}
+1 -1
View File
@@ -13,5 +13,5 @@ CustomText {
Layout.topMargin: first ? 0 : Tokens.spacing.largeIncreased - ((parent as ColumnLayout).spacing ?? 0)
color: Colors.palette.m3onSurfaceVariant
elide: Text.ElideRight
font.pointSize: Tokens.font.size.normal
font: Tokens.font.label.medium
}
+2 -2
View File
@@ -40,14 +40,14 @@ ConnectedRect {
Layout.fillWidth: true
elide: Text.ElideRight
font.pointSize: Tokens.font.size.smaller
font: Tokens.font.body.small
}
CustomText {
Layout.fillWidth: true
color: Colors.palette.m3outline
elide: Text.ElideRight
font.pointSize: Tokens.font.size.small
font: Tokens.font.label.small
text: root.subtext
visible: root.subtext
}
+2 -2
View File
@@ -40,14 +40,14 @@ ConnectedRect {
Layout.fillWidth: true
elide: Text.ElideRight
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
}
CustomText {
id: valueLabel
color: Colors.palette.m3outline
font.pointSize: Tokens.font.size.small
font: Tokens.font.body.small
}
}
+2 -2
View File
@@ -39,14 +39,14 @@ ConnectedRect {
Layout.fillWidth: true
elide: Text.ElideRight
font.pointSize: Tokens.font.size.smaller
font: Tokens.font.body.small
}
CustomText {
Layout.fillWidth: true
color: Colors.palette.m3outline
elide: Text.ElideRight
font.pointSize: Tokens.font.size.small
font: Tokens.font.label.small
text: root.subtext
visible: root.subtext
}
-1
View File
@@ -62,7 +62,6 @@ ConnectedRect {
visible: root.subtext
text: input.isError && root.errorText ? root.errorText : root.subtext
color: input.isError && root.errorText ? Colors.palette.m3error : Colors.palette.m3outline
font.pointSize: Tokens.font.size.small
elide: Text.ElideRight
animate: root.errorText
}
+1 -1
View File
@@ -193,7 +193,7 @@ Item {
spacing: 0
CustomText {
font.pointSize: Tokens.font.size.large
font: Tokens.font.title.builders.large.weight(Font.Normal).build()
text: root.header
}
+2 -2
View File
@@ -34,14 +34,14 @@ ConnectedRect {
CustomText {
id: text
font.pointSize: Tokens.font.size.smaller
font: Tokens.font.body.small
}
CustomText {
id: subtext
color: Colors.palette.m3outline
font.pointSize: Tokens.font.size.small
font: Tokens.font.label.small
wrapMode: Text.WordWrap
}
}
+2 -2
View File
@@ -137,7 +137,7 @@ ColumnLayout {
CustomText {
id: startSeparator
font.pointSize: Tokens.font.size.extraLarge
font: Tokens.font.body.builders.large.size(28).weight(Font.DemiBold).build()
text: ":"
}
@@ -360,7 +360,7 @@ ColumnLayout {
CustomText {
id: endSeparator
font.pointSize: Tokens.font.size.extraLarge
font: Tokens.font.body.builders.large.size(28).weight(Font.DemiBold).build()
text: ":"
}
+3 -2
View File
@@ -20,6 +20,7 @@ CustomSwitch {
Layout.fillWidth: true
cLayer: 2
font: Tokens.font.body.small
horizontalPadding: Tokens.padding.largeIncreased
implicitHeight: Math.max(implicitContentHeight, implicitIndicatorHeight) + verticalPadding * 2
implicitWidth: implicitContentWidth + implicitIndicatorWidth + horizontalPadding * 2
@@ -59,7 +60,7 @@ CustomSwitch {
anchors.left: parent.left
anchors.right: parent.right
elide: Text.ElideRight
font.pointSize: Tokens.font.size.smaller
font: root.font
opacity: root.enabled ? 1 : 0.5
text: root.text
@@ -75,7 +76,7 @@ CustomSwitch {
anchors.right: parent.right
color: Colors.palette.m3outline
elide: Text.ElideRight
font.pointSize: Tokens.font.size.small
font: Tokens.font.label.small
opacity: root.enabled ? 1 : 0.5
text: root.subtext
visible: root.subtext