feat: fontbuilder to streamline font styling

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")
 		}