add typography

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