feat: fontbuilder to streamline font styling

Modules/Dashboard/Media/Details.qml

@@ -38,7 +38,7 @@ ColumnLayout {
 	CustomText {
 		Layout.fillWidth: true
 		text: Players.active?.trackTitle ?? ""
-		font.pointSize: Tokens.font.size.large
+		font: Tokens.font.title.large
 		elide: Text.ElideRight
 		animate: true
 	}
@@ -47,7 +47,7 @@ ColumnLayout {
 		Layout.fillWidth: true
 		text: Players.active?.trackArtist || qsTr("Unknown artist")
 		color: Colors.palette.m3onSurfaceVariant
-		font.pointSize: Tokens.font.size.normal
+		font: Tokens.font.title.medium
 		elide: Text.ElideRight
 		animate: true
 	}
@@ -56,7 +56,7 @@ ColumnLayout {
 		Layout.fillWidth: true
 		text: Players.active?.trackAlbum || qsTr("Unknown album")
 		color: Colors.palette.m3secondary
-		font.pointSize: Tokens.font.size.normal
+		font: Tokens.font.title.medium
 		elide: Text.ElideRight
 		animate: true
 	}
@@ -70,7 +70,7 @@ ColumnLayout {
 			id: timeMetrics
 
 			text: Players.active ? root.lengthStr(Math.max(Players.active.position, root.hasUnknownLength ? 0 : Players.active.length)).replace(/[1-9]/g, "0") : "00:00"
-			font.pointSize: Tokens.font.size.normal
+			font: Tokens.font.label.medium
 		}
 
 		CustomText {
@@ -128,7 +128,7 @@ ColumnLayout {
 			isRound: true
 			shapeMorph: true
 			checked: Players.active?.shuffle ?? false
-			font.pointSize: Tokens.font.size.large
+			font: Tokens.font.icon.builders.medium.weight(Font.Medium).build()
 			enabled: Players.active?.shuffleSupported
 			onClicked: Players.active.shuffle = !Players.active?.shuffle
 			implicitWidth: Math.round(implicitHeight * 0.9)
@@ -141,7 +141,7 @@ ColumnLayout {
 			icon: "skip_previous"
 			isRound: true
 			shapeMorph: true
-			font.pointSize: Tokens.font.size.extraLarge
+			font: Tokens.font.icon.large
 			enabled: Players.active?.canGoPrevious
 			onClicked: Players.active?.previous()
 		}
@@ -154,7 +154,7 @@ ColumnLayout {
 			shapeMorph: true
 			fillWidth: true
 			checked: Players.active?.isPlaying ?? false
-			font.pointSize: Tokens.font.size.extraLarge
+			font: Tokens.font.icon.large
 			enabled: Players.active?.canTogglePlaying
 			onClicked: Players.active?.togglePlaying()
 		}
@@ -166,7 +166,7 @@ ColumnLayout {
 			icon: "skip_next"
 			isRound: true
 			shapeMorph: true
-			font.pointSize: Tokens.font.size.extraLarge
+			font: Tokens.font.icon.large
 			enabled: Players.active?.canGoNext
 			onClicked: Players.active?.next()
 		}
@@ -177,7 +177,7 @@ ColumnLayout {
 			isRound: true
 			shapeMorph: true
 			checked: Players.active?.loopState === MprisLoopState.Track || Players.active?.loopState === MprisLoopState.Playlist
-			font.pointSize: Tokens.font.size.large
+			font: Tokens.font.icon.builders.medium.weight(Font.Medium).build()
 			enabled: Players.active?.loopSupported
 			onClicked: {
 				const state = Players.active.loopState;