From 7de7ae19bb8989dc52d4fa7bdc6b8be101f1fa2c Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Fri, 5 Sep 2025 22:41:21 -0400 Subject: [PATCH] add typography --- components/MprisController.qml | 4 +- components/StyledIconButton.qml | 2 +- components/StyledText.qml | 3 +- config/Dimensions.qml | 122 ------------------ config/Styling.qml | 86 ++++++------ modules/bar/components/Clock.qml | 7 - modules/bar/components/Cpu.qml | 4 +- modules/bar/components/Gpu.qml | 6 +- modules/bar/components/Memory.qml | 5 +- modules/bar/components/Network.qml | 6 +- modules/bar/components/Power.qml | 10 +- modules/bar/components/Storage.qml | 5 +- .../bar/components/hyprland/Workspaces.qml | 3 +- modules/bar/components/tray/Tray.qml | 3 +- 14 files changed, 77 insertions(+), 189 deletions(-) diff --git a/components/MprisController.qml b/components/MprisController.qml index a6b6a88..265d045 100644 --- a/components/MprisController.qml +++ b/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 { diff --git a/components/StyledIconButton.qml b/components/StyledIconButton.qml index bdfea7a..5a91ff4 100644 --- a/components/StyledIconButton.qml +++ b/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 diff --git a/components/StyledText.qml b/components/StyledText.qml index 0b1a44c..95ac150 100644 --- a/components/StyledText.qml +++ b/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 { diff --git a/config/Dimensions.qml b/config/Dimensions.qml index 6b3deaf..6298414 100644 --- a/config/Dimensions.qml +++ b/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 - } } diff --git a/config/Styling.qml b/config/Styling.qml index 4b1d7a4..467268d 100644 --- a/config/Styling.qml +++ b/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 - property int fast: 100 - property int normal: 200 - property int slow: 400 - property int verySlow: 1000 + readonly property int veryFast: 50 + readonly property int fast: 100 + readonly property int normal: 200 + readonly property int slow: 400 + 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}" - property string batteryFull: "\u{E059}" - property string batteryMedium: "\u{E05b}" - property string batteryLow: "\u{E05a}" - property string batteryWarning: "\u{E3b0}" - property string bell: "\u{E05d}" - property string bellRing: "\u{E224}" - property string bluetooth: "\u{E060}" - property string bluetoothConnected: "\u{E1b8}" - property string brickWall: "\u{E586}" - property string coffee: "\u{E09a}" - property string chevronLeft: "\u{E072}" - property string chevronRight: "\u{E073}" - property string cpu: "\u{E0ad}" - property string gpu: "\u{E66f}" - property string hardDrive: "\u{E0f1}" - property string memoryStick: "\u{E44a}" - property string pause: "\u{E132}" - property string play: "\u{E140}" - property string search: "\u{E155}" - property string skipBack: "\u{E163}" - property string skipForward: "\u{E164}" - property string stop: "\u{E132}" - property string square: "\u{E16B}" - property string wifiOff: "\u{E1af}" - property string wifiLow: "\u{E5fd}" - property string wifiHigh: "\u{E5fc}" - property string wifi: "\u{E1ae}" - property string triangle: "\u{E192}" - property string triangleDashed: "\u{E642}" + readonly property string batteryCharging: "\u{E058}" + readonly property string batteryFull: "\u{E059}" + readonly property string batteryMedium: "\u{E05b}" + readonly property string batteryLow: "\u{E05a}" + readonly property string batteryWarning: "\u{E3b0}" + readonly property string bell: "\u{E05d}" + readonly property string bellRing: "\u{E224}" + readonly property string bluetooth: "\u{E060}" + readonly property string bluetoothConnected: "\u{E1b8}" + readonly property string brickWall: "\u{E586}" + readonly property string coffee: "\u{E09a}" + readonly property string chevronLeft: "\u{E072}" + readonly property string chevronRight: "\u{E073}" + readonly property string cpu: "\u{E0ad}" + readonly property string gpu: "\u{E66f}" + readonly property string hardDrive: "\u{E0f1}" + readonly property string memoryStick: "\u{E44a}" + readonly property string pause: "\u{E132}" + readonly property string play: "\u{E140}" + readonly property string search: "\u{E155}" + readonly property string skipBack: "\u{E163}" + readonly property string skipForward: "\u{E164}" + readonly property string stop: "\u{E132}" + readonly property string square: "\u{E16B}" + readonly property string wifiOff: "\u{E1af}" + readonly property string wifiLow: "\u{E5fd}" + readonly property string wifiHigh: "\u{E5fc}" + readonly property string wifi: "\u{E1ae}" + readonly property string triangle: "\u{E192}" + readonly property string triangleDashed: "\u{E642}" } } diff --git a/modules/bar/components/Clock.qml b/modules/bar/components/Clock.qml index c18d940..9b483e5 100644 --- a/modules/bar/components/Clock.qml +++ b/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 diff --git a/modules/bar/components/Cpu.qml b/modules/bar/components/Cpu.qml index d627fb3..dda97c9 100644 --- a/modules/bar/components/Cpu.qml +++ b/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" diff --git a/modules/bar/components/Gpu.qml b/modules/bar/components/Gpu.qml index ee11e87..e7ee38b 100644 --- a/modules/bar/components/Gpu.qml +++ b/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" diff --git a/modules/bar/components/Memory.qml b/modules/bar/components/Memory.qml index 1f251e6..43aae51 100644 --- a/modules/bar/components/Memory.qml +++ b/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()}%` } } diff --git a/modules/bar/components/Network.qml b/modules/bar/components/Network.qml index 4fa89cd..47a0406 100644 --- a/modules/bar/components/Network.qml +++ b/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()}%` } } diff --git a/modules/bar/components/Power.qml b/modules/bar/components/Power.qml index 51bc4b9..0dfde02 100644 --- a/modules/bar/components/Power.qml +++ b/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 } diff --git a/modules/bar/components/Storage.qml b/modules/bar/components/Storage.qml index a7d189a..fdb1fd0 100644 --- a/modules/bar/components/Storage.qml +++ b/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()}%` } } diff --git a/modules/bar/components/hyprland/Workspaces.qml b/modules/bar/components/hyprland/Workspaces.qml index 44a3e16..5a4d10e 100644 --- a/modules/bar/components/hyprland/Workspaces.qml +++ b/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 { diff --git a/modules/bar/components/tray/Tray.qml b/modules/bar/components/tray/Tray.qml index ac343f8..0ffd814 100644 --- a/modules/bar/components/tray/Tray.qml +++ b/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