add typography

components/MprisController.qml

@@ -21,7 +21,7 @@ Loader {
             id: text
             Layout.alignment: Qt.AlignHCenter
             text: `${root.player.trackTitle} - ${root.player.trackArtist}`
-            font.pixelSize: Dimensions.mpris.fontSize
+            font.pixelSize: Styling.typography.textSize.base
         }
 
         RowLayout {
@@ -57,7 +57,7 @@ Loader {
                 }
                 return `${formatTime(root.player.position / 60)}:${formatTime(root.player.position % 60)} - ${formatTime(root.player.length / 60)}:${formatTime(root.player.length % 60)}`;
             }
-            font.pixelSize: Dimensions.mpris.fontSize
+            font.pixelSize: Styling.typography.textSize.sm
         }
 
         StyledSlider {

components/StyledIconButton.qml

@@ -10,7 +10,7 @@ RoundButton {
     property int rotation: 0
 
     font.family: Styling.lucide.font.family
-    font.pixelSize: 19
+    font.pixelSize: 16
     radius: 8
     padding: 8
 

components/StyledText.qml

@@ -2,7 +2,8 @@ import qs.config
 import QtQuick
 
 Text {
-    font.family: Theme.fontFamily
+    font.family: Styling.typography.fontFamily
+    font.pixelSize: Styling.typography.textSize.base
     color: Styling.theme.basecontent
     Behavior on color {
         ColorAnimation {

config/Dimensions.qml

@@ -9,20 +9,6 @@ Singleton {
     property int radius: 8
 
     property Bar bar: Bar {}
-    property Mpris mpris: Mpris {}
-    property Clock clock: Clock {}
-    property Pipewire pipewire: Pipewire {}
-    property Network network: Network {}
-    property Bluetooth bluetooth: Bluetooth {}
-    property Storage storage: Storage {}
-    property Memory memory: Memory {}
-    property Cpu cpu: Cpu {}
-    property Gpu gpu: Gpu {}
-    property Caffeine caffeine: Caffeine {}
-    property Notifications notifications: Notifications {}
-    property Workspace workspace: Workspace {}
-    property Tray tray: Tray {}
-    property TrayMenu trayMenu: TrayMenu {}
 
     component Bar: QtObject {
         property int spacing: 8
@@ -33,112 +19,4 @@ Singleton {
         property int verticalPadding: 2
         property int horizontalPadding: 8
     }
-
-    component Mpris: QtObject {
-        property int fontSize: 14
-        property int height: 30
-        property int horizontalPadding: 8
-        property int verticalPadding: 6
-    }
-
-    component Clock: QtObject {
-        property int fontSize: 14
-        property int height: 30
-        property int horizontalPadding: 8
-        property int verticalPadding: 6
-    }
-
-    component Pipewire: QtObject {
-        property int fontSize: 14
-        property int height: 30
-        property int horizontalPadding: 8
-        property int verticalPadding: 6
-    }
-
-    component Network: QtObject {
-        property int iconSize: 14
-        property int fontSize: 14
-        property int height: 30
-        property int horizontalPadding: 8
-        property int verticalPadding: 6
-    }
-
-    component Bluetooth: QtObject {
-        property int fontSize: 16
-        property int height: 30
-        property int horizontalPadding: 8
-        property int verticalPadding: 6
-    }
-
-    component Storage: QtObject {
-        property int iconSize: 14
-        property int fontSize: 14
-        property int height: 30
-        property int horizontalPadding: 8
-        property int verticalPadding: 6
-    }
-
-    component Memory: QtObject {
-        property int iconSize: 14
-        property int fontSize: 14
-        property int height: 30
-        property int horizontalPadding: 8
-        property int verticalPadding: 6
-    }
-
-    component Cpu: QtObject {
-        property int iconSize: 14
-        property int fontSize: 14
-        property int height: 30
-        property int horizontalPadding: 8
-        property int verticalPadding: 6
-    }
-
-    component Gpu: QtObject {
-        property int iconSize: 14
-        property int fontSize: 14
-        property int height: 30
-        property int horizontalPadding: 8
-        property int verticalPadding: 6
-    }
-
-    component Caffeine: QtObject {
-        property int fontSize: 16
-        property int height: 30
-        property int horizontalPadding: 8
-        property int verticalPadding: 6
-    }
-
-    component Notifications: QtObject {
-        property int fontSize: 16
-        property int height: 30
-        property int horizontalPadding: 8
-        property int verticalPadding: 6
-    }
-
-    component Workspace: QtObject {
-        property int spacing: 5
-        property int iconSize: 16
-        property int width: 30
-        property int height: 30
-        property int verticalPadding: 6
-        property int horizontalPadding: 7
-    }
-
-    component Tray: QtObject {
-        property int spacing: 5
-        property int iconSize: 18
-        property int width: 30
-        property int height: 30
-        property int verticalPadding: 6
-        property int horizontalPadding: 7
-    }
-
-    component TrayMenu: QtObject {
-        property int fontSize: 10
-        property int width: 30
-        property int height: 30
-        property int verticalPadding: 6
-        property int horizontalPadding: 7
-    }
 }

config/Styling.qml

@@ -6,19 +6,31 @@ import Quickshell
 Singleton {
     id: root
 
-    readonly property Lucide lucide: Lucide {}
     readonly property Animations animations: Animations {}
+    readonly property Typography typography: Typography {}
     readonly property var theme: Theme.palette
+    readonly property Lucide lucide: Lucide {}
 
     component Animations: QtObject {
-        property AnimationSpeed speed: AnimationSpeed {}
+        readonly property AnimationSpeed speed: AnimationSpeed {}
     }
     component AnimationSpeed: QtObject {
-        property int veryFast: 50
+        readonly property int veryFast: 50
-        property int fast: 100
+        readonly property int fast: 100
-        property int normal: 200
+        readonly property int normal: 200
-        property int slow: 400
+        readonly property int slow: 400
-        property int verySlow: 1000
+        readonly property int verySlow: 1000
+    }
+
+    component Typography: QtObject {
+        readonly property string fontFamily: "JetBrainsMono Nerd Font"
+        readonly property FontSize textSize: FontSize {}
+    }
+    component FontSize: QtObject {
+        readonly property int sm: 12
+        readonly property int base: 14
+        readonly property int lg: 18
+        readonly property int xl: 24
     }
 
     component Lucide: Item {
@@ -32,35 +44,35 @@ Singleton {
         }
     }
     component LucideIcons: QtObject {
-        property string batteryCharging: "\u{E058}"
+        readonly property string batteryCharging: "\u{E058}"
-        property string batteryFull: "\u{E059}"
+        readonly property string batteryFull: "\u{E059}"
-        property string batteryMedium: "\u{E05b}"
+        readonly property string batteryMedium: "\u{E05b}"
-        property string batteryLow: "\u{E05a}"
+        readonly property string batteryLow: "\u{E05a}"
-        property string batteryWarning: "\u{E3b0}"
+        readonly property string batteryWarning: "\u{E3b0}"
-        property string bell: "\u{E05d}"
+        readonly property string bell: "\u{E05d}"
-        property string bellRing: "\u{E224}"
+        readonly property string bellRing: "\u{E224}"
-        property string bluetooth: "\u{E060}"
+        readonly property string bluetooth: "\u{E060}"
-        property string bluetoothConnected: "\u{E1b8}"
+        readonly property string bluetoothConnected: "\u{E1b8}"
-        property string brickWall: "\u{E586}"
+        readonly property string brickWall: "\u{E586}"
-        property string coffee: "\u{E09a}"
+        readonly property string coffee: "\u{E09a}"
-        property string chevronLeft: "\u{E072}"
+        readonly property string chevronLeft: "\u{E072}"
-        property string chevronRight: "\u{E073}"
+        readonly property string chevronRight: "\u{E073}"
-        property string cpu: "\u{E0ad}"
+        readonly property string cpu: "\u{E0ad}"
-        property string gpu: "\u{E66f}"
+        readonly property string gpu: "\u{E66f}"
-        property string hardDrive: "\u{E0f1}"
+        readonly property string hardDrive: "\u{E0f1}"
-        property string memoryStick: "\u{E44a}"
+        readonly property string memoryStick: "\u{E44a}"
-        property string pause: "\u{E132}"
+        readonly property string pause: "\u{E132}"
-        property string play: "\u{E140}"
+        readonly property string play: "\u{E140}"
-        property string search: "\u{E155}"
+        readonly property string search: "\u{E155}"
-        property string skipBack: "\u{E163}"
+        readonly property string skipBack: "\u{E163}"
-        property string skipForward: "\u{E164}"
+        readonly property string skipForward: "\u{E164}"
-        property string stop: "\u{E132}"
+        readonly property string stop: "\u{E132}"
-        property string square: "\u{E16B}"
+        readonly property string square: "\u{E16B}"
-        property string wifiOff: "\u{E1af}"
+        readonly property string wifiOff: "\u{E1af}"
-        property string wifiLow: "\u{E5fd}"
+        readonly property string wifiLow: "\u{E5fd}"
-        property string wifiHigh: "\u{E5fc}"
+        readonly property string wifiHigh: "\u{E5fc}"
-        property string wifi: "\u{E1ae}"
+        readonly property string wifi: "\u{E1ae}"
-        property string triangle: "\u{E192}"
+        readonly property string triangle: "\u{E192}"
-        property string triangleDashed: "\u{E642}"
+        readonly property string triangleDashed: "\u{E642}"
     }
 }

modules/bar/components/Clock.qml

@@ -1,16 +1,9 @@
 import qs.components
-import qs.config
-import qs.widgets
 import Quickshell
 
 StyledLabel {
     StyledText {
-        id: text
-
-        font.pixelSize: Dimensions.clock.fontSize
-
         text: ` ${Qt.formatDateTime(clock.date, "hh:mm:ss AP")}`
-
         SystemClock {
             id: clock
             precision: SystemClock.Seconds

modules/bar/components/Cpu.qml

@@ -15,13 +15,13 @@ StyledButton {
     }
 
     contentItem: RowLayout {
-        id: row
 
         spacing: 0
 
         Ref {
             service: SystemInfo
         }
+
         LucideIcon {
             text: Styling.lucide.icons.cpu
             color: root.hovered ? Styling.theme.primarycontent : Styling.theme.basecontent
@@ -30,10 +30,8 @@ StyledButton {
         StyledText {
             id: text
 
-            font.pixelSize: Dimensions.cpu.fontSize
             text: ` ${(SystemInfo.cpuPerc * 100).toFixed().toString().padStart(2, "_")}%`
             color: root.hovered ? Styling.theme.primarycontent : Styling.theme.basecontent
-
             states: [
                 State {
                     name: "showTemp"

modules/bar/components/Gpu.qml

@@ -11,17 +11,17 @@ StyledButton {
     property bool showTemp: false
 
     onClicked: {
-        root.showTemp = !root.showTemp;
+        showTemp = !showTemp;
     }
 
     contentItem: RowLayout {
-        id: row
 
         spacing: 0
 
         Ref {
             service: SystemInfo
         }
+
         LucideIcon {
             text: Styling.lucide.icons.gpu
             color: root.hovered ? Styling.theme.primarycontent : Styling.theme.basecontent
@@ -30,10 +30,8 @@ StyledButton {
         StyledText {
             id: text
 
-            font.pixelSize: Dimensions.gpu.fontSize
             text: ` ${(SystemInfo.gpuPerc * 100).toFixed().toString().padStart(2, "_")}%`
             color: root.hovered ? Styling.theme.primarycontent : Styling.theme.basecontent
-
             states: [
                 State {
                     name: "temp"

modules/bar/components/Memory.qml

@@ -6,17 +6,18 @@ import QtQuick
 import QtQuick.Layouts
 
 StyledLabel {
+
     RowLayout {
+
         Ref {
             service: SystemInfo
         }
+
         LucideIcon {
             text: Styling.lucide.icons.memoryStick
         }
 
         StyledText {
-            id: text
-            font.pixelSize: Dimensions.memory.fontSize
             text: ` ${(SystemInfo.memPerc * 100).toFixed()}%`
         }
     }

modules/bar/components/Network.qml

@@ -6,15 +6,16 @@ import QtQuick
 import QtQuick.Layouts
 
 StyledLabel {
+
     RowLayout {
+
         Ref {
             service: NetworkService
         }
+
         LucideIcon {
             id: icon
-
             text: Styling.lucide.icons.wifiOff
-
             states: [
                 State {
                     name: "high"
@@ -48,7 +49,6 @@ StyledLabel {
 
         StyledText {
             id: text
-            font.pixelSize: Dimensions.network.fontSize
             text: ` ${(NetworkService.active?.strength ?? 0).toFixed()}%`
         }
     }

modules/bar/components/Power.qml

@@ -9,10 +9,16 @@ StyledButton {
     property UPowerDevice laptopBattery: UPower.devices.values.find(device => device.isLaptopBattery) ?? null
     property bool isCritical: laptopBattery?.percentage < 0.10
 
+    visible: laptopBattery
+
     contentItem: RowLayout {
+
         spacing: 4
+
         LucideIcon {
+
             Layout.alignment: Qt.AlignVCenter
+
             color: {
                 if (root.isCritical) {
                     return Styling.theme.error;
@@ -22,7 +28,6 @@ StyledButton {
                 }
                 return Styling.theme.basecontent;
             }
-            font.pixelSize: 16
             text: {
                 if (root.laptopBattery?.state == UPowerDeviceState.Charging) {
                     return Styling.lucide.icons.batteryCharging;
@@ -41,7 +46,9 @@ StyledButton {
         }
 
         StyledText {
+
             Layout.alignment: Qt.AlignVCenter
+
             color: {
                 if (root.isCritical) {
                     return Styling.theme.error;
@@ -54,5 +61,4 @@ StyledButton {
             text: `${(root.laptopBattery?.percentage.toFixed(2) * 100)}%`
         }
     }
-    visible: laptopBattery
 }

modules/bar/components/Storage.qml

@@ -6,17 +6,20 @@ import QtQuick
 import QtQuick.Layouts
 
 StyledLabel {
+
     RowLayout {
+
         Ref {
             service: SystemInfo
         }
+
         LucideIcon {
             text: Styling.lucide.icons.hardDrive
         }
 
         StyledText {
             id: text
-            font.pixelSize: Dimensions.storage.fontSize
+
             text: ` ${(SystemInfo.storagePerc * 100).toFixed()}%`
         }
     }

modules/bar/components/hyprland/Workspaces.qml

@@ -1,6 +1,5 @@
 pragma ComponentBehavior: Bound
 
-import qs.config
 import QtQuick
 import QtQuick.Layouts
 import Quickshell.Hyprland
@@ -8,7 +7,7 @@ import Quickshell.Hyprland
 RowLayout {
     id: root
 
-    spacing: Dimensions.workspace.spacing
+    spacing: 4
 
     Repeater {
 

modules/bar/components/tray/Tray.qml

@@ -1,6 +1,5 @@
 pragma ComponentBehavior: Bound
 
-import qs.config
 import QtQuick
 import QtQuick.Layouts
 import Quickshell.Services.SystemTray
@@ -8,7 +7,7 @@ import Quickshell.Services.SystemTray
 RowLayout {
     id: root
 
-    spacing: Dimensions.tray.spacing
+    spacing: 4
 
     Repeater {
         model: SystemTray.items