add typography

This commit is contained in:
Benjamin Palko 2025-09-05 22:41:21 -04:00
parent 205ad37e3e
commit 7de7ae19bb
14 changed files with 77 additions and 189 deletions

View file

@ -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 {

View file

@ -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

View file

@ -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 {

View file

@ -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
}
}

View file

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

View file

@ -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

View file

@ -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"

View file

@ -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"

View file

@ -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()}%`
}
}

View file

@ -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()}%`
}
}

View file

@ -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
}

View file

@ -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()}%`
}
}

View file

@ -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 {

View file

@ -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