feat: fontbuilder to streamline font styling

Modules/Notifications/Notification.qml

@@ -94,8 +94,7 @@ CustomRect {
 			implicitHeight: root.nonAnimHeight
 
 			Behavior on implicitHeight {
-				Anim {
-				}
+				Anim {}
 			}
 
 			Loader {
@@ -171,6 +170,7 @@ CustomRect {
 						sourceComponent: MaterialIcon {
 							color: root.modelData.urgency === NotificationUrgency.Critical ? Colors.palette.m3onError : root.modelData.urgency === NotificationUrgency.Low ? Colors.palette.m3onSurface : Colors.palette.m3onSecondaryContainer
 							text: Icons.getNotifIcon(root.modelData.summary, root.modelData.urgency)
+							fontStyle: Tokens.font.icon.medium
 						}
 					}
 				}
@@ -222,6 +222,7 @@ CustomRect {
 				maximumLineCount: 1
 				opacity: root.expanded ? 1 : 0
 				text: appNameMetrics.elidedText
+				font: Tokens.font.label.medium
 
 				Behavior on opacity {
 					Anim {
@@ -246,14 +247,12 @@ CustomRect {
 				anchors.leftMargin: Tokens.spacing.small
 				anchors.top: parent.top
 				animate: true
-				font.pointSize: Tokens.font.size.small
 				height: implicitHeight
 				maximumLineCount: 1
 				text: summaryMetrics.elidedText
 
 				Behavior on height {
-					Anim {
-					}
+					Anim {}
 				}
 				states: State {
 					name: "expanded"
@@ -281,8 +280,7 @@ CustomRect {
 						property: "topMargin"
 					}
 
-					AnchorAnim {
-					}
+					AnchorAnim {}
 				}
 			}
 
@@ -303,6 +301,7 @@ CustomRect {
 				anchors.top: parent.top
 				color: Colors.palette.m3onSurfaceVariant
 				text: "•"
+				font: Tokens.font.body.small
 
 				states: State {
 					name: "expanded"
@@ -314,8 +313,7 @@ CustomRect {
 					}
 				}
 				transitions: Transition {
-					AnchorAnim {
-					}
+					AnchorAnim {}
 				}
 			}
 
@@ -327,7 +325,7 @@ CustomRect {
 				anchors.top: parent.top
 				animate: true
 				color: Colors.palette.m3onSurfaceVariant
-				font.pointSize: Tokens.font.size.small
+				font: Tokens.font.body.small
 				horizontalAlignment: Text.AlignLeft
 				text: root.modelData.timeStr
 			}
@@ -355,14 +353,13 @@ CustomRect {
 					anchors.verticalCenterOffset: root.expanded ? -1 : 1
 					rotation: root.expanded ? 180 : 0
 					text: "expand_more"
+					fontStyle: Tokens.font.icon.medium
 
 					Behavior on anchors.verticalCenterOffset {
-						Anim {
-						}
+						Anim {}
 					}
 					Behavior on rotation {
-						Anim {
-						}
+						Anim {}
 					}
 				}
 			}
@@ -376,7 +373,7 @@ CustomRect {
 				anchors.top: summary.bottom
 				animate: true
 				color: Colors.palette.m3onSurfaceVariant
-				font.pointSize: Tokens.font.size.small
+				font: Tokens.font.body.small
 				opacity: root.expanded ? 0 : 1
 				text: bodyPreviewMetrics.elidedText
 				textFormat: Text.MarkdownText
@@ -407,6 +404,7 @@ CustomRect {
 				animate: true
 				color: Colors.palette.m3onSurfaceVariant
 				height: text ? implicitHeight : 0
+				font: Tokens.font.body.medium
 				opacity: root.expanded ? 1 : 0
 				text: root.modelData.body
 				textFormat: Text.MarkdownText
@@ -447,6 +445,7 @@ CustomRect {
 					enabled: root.expanded
 					fillWidth: root.modelData.actions.length === 0
 					icon: "close"
+					font: Tokens.font.icon.builders.small.size(14).build()
 					inactiveColor: root.modelData.urgency === NotificationUrgency.Critical ? Colors.palette.m3secondary : Colors.layer(Colors.palette.m3surfaceContainerHighest, 2)
 					inactiveOnColor: root.modelData.urgency === NotificationUrgency.Critical ? Colors.palette.m3onSecondary : Colors.palette.m3onSurfaceVariant
 					isRound: true
@@ -464,7 +463,6 @@ CustomRect {
 
 						enabled: root.expanded
 						fillWidth: true
-						font.pointSize: Tokens.font.size.small
 						implicitWidth: label.implicitWidth
 						inactiveColor: root.modelData.urgency === NotificationUrgency.Critical ? Colors.palette.m3secondary : Colors.layer(Colors.palette.m3surfaceContainerHighest, 2)
 						inactiveOnColor: root.modelData.urgency === NotificationUrgency.Critical ? Colors.palette.m3onSecondary : Colors.palette.m3onSurfaceVariant
@@ -493,6 +491,7 @@ CustomRect {
 					label.animate: true
 					padding: Tokens.padding.extraSmall
 					shapeMorph: true
+					font: Tokens.font.icon.builders.small.size(14).build()
 
 					onClicked: {
 						Quickshell.clipboardText = root.modelData.body;

Modules/Notifications/Sidebar/NotifDock.qml

@@ -37,19 +37,15 @@ Item {
 			anchors.leftMargin: root.notifCount > 0 ? 0 : -width - titleText.anchors.leftMargin
 			anchors.verticalCenter: parent.verticalCenter
 			color: Colors.palette.m3outline
-			font.family: "CaskaydiaCove NF"
-			font.pointSize: 13
-			font.weight: 500
+			font: Tokens.font.label.large
 			opacity: root.notifCount > 0 ? 1 : 0
 			text: root.notifCount
 
 			Behavior on anchors.leftMargin {
-				Anim {
-				}
+				Anim {}
 			}
 			Behavior on opacity {
-				Anim {
-				}
+				Anim {}
 			}
 		}
 
@@ -62,9 +58,7 @@ Item {
 			anchors.verticalCenter: parent.verticalCenter
 			color: Colors.palette.m3outline
 			elide: Text.ElideRight
-			font.family: "CaskaydiaCove NF"
-			font.pointSize: 13
-			font.weight: 500
+			font: Tokens.font.label.large
 			text: root.notifCount > 0 ? qsTr("notification%1").arg(root.notifCount === 1 ? "" : "s") : qsTr("Notifications")
 		}
 	}
@@ -86,8 +80,7 @@ Item {
 			opacity: root.notifCount > 0 ? 0 : 1
 
 			Behavior on opacity {
-				Anim {
-				}
+				Anim {}
 			}
 			sourceComponent: ColumnLayout {
 				spacing: 20
@@ -95,9 +88,7 @@ Item {
 				CustomText {
 					Layout.alignment: Qt.AlignHCenter
 					color: Colors.palette.m3outlineVariant
-					font.family: "CaskaydiaCove NF"
-					font.pointSize: 18
-					font.weight: 500
+					font: Tokens.font.headline.builders.small.width(90).build()
 					text: qsTr("No Notifications")
 				}
 			}
@@ -160,20 +151,17 @@ Item {
 		scale: root.notifCount > 0 ? 1 : 0.5
 
 		Behavior on opacity {
-			Anim {
-			}
+			Anim {}
 		}
 		Behavior on scale {
-			Anim {
-			}
+			Anim {}
 		}
 		sourceComponent: IconButton {
 			id: clearBtn
 
-			font.pointSize: Math.round(18 * 1.2)
+			font: Tokens.font.icon.large
 			icon: "clear_all"
-			padding: 8
-			radius: Tokens.rounding.full
+			isRound: true
 
 			onClicked: clearTimer.start()
 

Modules/Notifications/Sidebar/Utils/Cards/Record.qml

@@ -13,7 +13,6 @@ CustomRect {
 
 	required property ScreenState screenState
 
-
 	Layout.fillWidth: true
 	color: Colors.tPalette.m3surfaceContainer
 	implicitHeight: layout.implicitHeight + layout.anchors.margins * 2
@@ -46,7 +45,7 @@ CustomRect {
 					anchors.horizontalCenterOffset: -0.5
 					anchors.verticalCenterOffset: 1.5
 					color: Recorder.running ? Colors.palette.m3onSecondary : Colors.palette.m3onSecondaryContainer
-					font.pointSize: Tokens.font.size.large
+					fontStyle: Tokens.font.icon.large
 					text: "screen_record"
 				}
 			}
@@ -58,7 +57,7 @@ CustomRect {
 				CustomText {
 					Layout.fillWidth: true
 					elide: Text.ElideRight
-					font.pointSize: Tokens.font.size.normal
+					font: Tokens.font.body.medium
 					text: qsTr("Screen Recorder")
 				}
 
@@ -66,7 +65,7 @@ CustomRect {
 					Layout.fillWidth: true
 					color: Colors.palette.m3onSurfaceVariant
 					elide: Text.ElideRight
-					font.pointSize: Tokens.font.size.small
+					font: Tokens.font.body.small
 					text: Recorder.paused ? qsTr("Recording paused") : Recorder.running ? qsTr("Recording running") : qsTr("Recording off")
 				}
 			}
@@ -126,8 +125,7 @@ CustomRect {
 
 				enabled: false
 
-				Anim {
-				}
+				Anim {}
 			}
 			Behavior on running {
 				SequentialAnimation {
@@ -155,8 +153,7 @@ CustomRect {
 						value: true
 					}
 
-					PropertyAction {
-					}
+					PropertyAction {}
 
 					PropertyAction {
 						property: "enabled"
@@ -207,8 +204,7 @@ CustomRect {
 				radius: Tokens.rounding.full
 
 				Behavior on implicitWidth {
-					Anim {
-					}
+					Anim {}
 				}
 				SequentialAnimation on opacity {
 					alwaysRunToEnd: true
@@ -236,13 +232,13 @@ CustomRect {
 					anchors.centerIn: parent
 					animate: true
 					color: Recorder.paused ? Colors.palette.m3onTertiary : Colors.palette.m3onError
-					font.family: Config.appearance.font.family.mono
+					font: Tokens.font.mono.small
 					text: Recorder.paused ? "PAUSED" : "REC"
 				}
 			}
 
 			CustomText {
-				font.pointSize: Tokens.font.size.normal
+				font: Tokens.font.body.medium
 				text: {
 					const elapsed = Recorder.elapsed;
 
@@ -266,8 +262,9 @@ CustomRect {
 
 			IconButton {
 				checked: Recorder.paused
-				font.pointSize: Tokens.font.size.large
+				font: Tokens.font.icon.medium
 				icon: Recorder.paused ? "play_arrow" : "pause"
+				isRound: true
 				isToggle: true
 				label.animate: true
 				type: IconButton.Tonal
@@ -279,8 +276,9 @@ CustomRect {
 			}
 
 			IconButton {
-				font.pointSize: Tokens.font.size.large
+				font: Tokens.font.icon.medium
 				icon: "stop"
+				isRound: true
 				inactiveColor: Colors.palette.m3error
 				inactiveOnColor: Colors.palette.m3onError
 

Modules/Notifications/Sidebar/Utils/Cards/RecordingList.qml

@@ -29,14 +29,14 @@ ColumnLayout {
 
 			MaterialIcon {
 				Layout.alignment: Qt.AlignVCenter
-				font.pointSize: Tokens.font.size.large
+				fontStyle: Tokens.font.icon.large
 				text: "list"
 			}
 
 			CustomText {
 				Layout.alignment: Qt.AlignVCenter
 				Layout.fillWidth: true
-				font.pointSize: Tokens.font.size.normal
+				font: Tokens.font.body.medium
 				text: qsTr("Recordings")
 			}
 
@@ -177,7 +177,7 @@ ColumnLayout {
 					Layout.alignment: Qt.AlignHCenter
 					Layout.preferredHeight: root.screenState.recordingListExpanded ? implicitHeight : 0
 					color: Colors.palette.m3outline
-					font.pointSize: Tokens.font.size.extraLarge
+					fontStyle: Tokens.font.icon.extraLarge
 					opacity: root.screenState.recordingListExpanded ? 1 : 0
 					scale: root.screenState.recordingListExpanded ? 1 : 0
 					text: "scan_delete"

Modules/Notifications/Sidebar/Utils/Cards/Toggles.qml

@@ -53,7 +53,7 @@ CustomRect {
 		spacing: Tokens.spacing.medium
 
 		CustomText {
-			font.pointSize: Tokens.font.size.normal
+			font: Tokens.font.body.medium
 			text: qsTr("Quick Toggles")
 		}
 

Modules/Notifications/Sidebar/Utils/IdleInhibit.qml

@@ -15,8 +15,7 @@ CustomRect {
 	radius: Tokens.rounding.small
 
 	Behavior on implicitHeight {
-		Anim {
-		}
+		Anim {}
 	}
 
 	RowLayout {
@@ -39,7 +38,7 @@ CustomRect {
 
 				anchors.centerIn: parent
 				color: IdleInhibitor.enabled ? Colors.palette.m3onSecondary : Colors.palette.m3onSecondaryContainer
-				font.pointSize: 18
+				fontStyle: Tokens.font.icon.large
 				text: "coffee"
 			}
 		}
@@ -51,7 +50,7 @@ CustomRect {
 			CustomText {
 				Layout.fillWidth: true
 				elide: Text.ElideRight
-				font.pointSize: 13
+				font: Tokens.font.body.medium
 				text: qsTr("Keep Awake")
 			}
 
@@ -59,7 +58,7 @@ CustomRect {
 				Layout.fillWidth: true
 				color: Colors.palette.m3onSurfaceVariant
 				elide: Text.ElideRight
-				font.pointSize: 11
+				font: Tokens.font.body.small
 				text: IdleInhibitor.enabled ? qsTr("Preventing sleep mode") : qsTr("Normal power management")
 			}
 		}
@@ -83,16 +82,13 @@ CustomRect {
 		scale: IdleInhibitor.enabled ? 1 : 0.5
 
 		Behavior on anchors.bottomMargin {
-			Anim {
-			}
+			Anim {}
 		}
 		Behavior on opacity {
-			Anim {
-			}
+			Anim {}
 		}
 		Behavior on scale {
-			Anim {
-			}
+			Anim {}
 		}
 		sourceComponent: CustomRect {
 			color: Colors.palette.m3primary
@@ -105,7 +101,7 @@ CustomRect {
 
 				anchors.centerIn: parent
 				color: Colors.palette.m3onPrimary
-				font.pointSize: Math.round(11 * 0.9)
+				font: Tokens.font.body.builders.small.size(Math.round(Tokens.font.body.small.pointSize * 0.9)).build()
 				text: qsTr("Active since %1").arg(Qt.formatTime(IdleInhibitor.enabledSince, Config.services.useTwelveHourClock ? "hh:mm a" : "hh:mm"))
 			}
 		}