Skip to content

Commit e757938

Browse files
jordanfulicyleaf
jordanful
authored and
icyleaf
committed
refactor(ui): derive font sizes from shared Style tokens
The overlay hardcoded 273 bare `font.pixelSize` integer literals across OmarchyBitwarden.qml and components/. That made it the one part of the shell that ignores `[font] base-size` in shell.toml: the bar, panels and every qs.Ui component derive their sizes from `Style.font.*`, which is itself derived from `Style.fontBaseSize` via `Style.fontScale`. A user who raises base-size for legibility saw everything scale except this plugin, which stayed fixed and looked progressively smaller next to the rest of the shell. It is especially visible on HiDPI monitors, where a 9-10px literal is the practical floor of readability. Map every literal onto the Style token that already equals it at the default base-size of 12, so rendering is unchanged out of the box: 8px -> Style.fontPx(0.667) 13px -> Style.font.subtitle 9px -> Style.fontPx(0.75) 14px -> Style.font.title 10px -> Style.font.caption 16px -> Style.font.heading 11px -> Style.font.bodySmall 20px -> Style.fontPx(1.667) 12px -> Style.font.body 22px -> Style.fontPx(1.833) 28px -> Style.font.displayLarge 36px -> Style.fontPx(3.0) Sizes with a matching semantic token use it; the handful without one go through `Style.fontPx(mult)`, the same helper the token definitions use, rather than staying literal. The three derived `*PixelSize` properties are converted at their declaration, so the sites reading them scale once rather than twice. `import qs.Commons` is added to the component files that lacked it; OmarchyBitwarden.qml already imported it. No visual change at the default base-size. tests/ is left alone: those are standalone harnesses rather than shipped UI.
1 parent a94b539 commit e757938

16 files changed

Lines changed: 289 additions & 273 deletions

‎components/ActionPaletteModal.qml‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import QtQuick
22
import QtQuick.Controls
33
import QtQuick.Layouts
4+
import qs.Commons
45

56
Rectangle {
67
id: paletteRoot
@@ -64,7 +65,7 @@ Rectangle {
6465
Text {
6566
text: "\uf0e7"
6667
font.family: paletteRoot.fontFamily
67-
font.pixelSize: 13
68+
font.pixelSize: Style.font.subtitle
6869
color: paletteRoot.accent
6970
}
7071

@@ -79,7 +80,7 @@ Rectangle {
7980
anchors.verticalCenter: parent.verticalCenter
8081
color: paletteRoot.foreground
8182
font.family: "sans-serif"
82-
font.pixelSize: 12
83+
font.pixelSize: Style.font.body
8384
selectByMouse: true
8485
clip: true
8586
text: paletteRoot.actionFilterQuery
@@ -146,15 +147,15 @@ Rectangle {
146147
text: "Type an action name..."
147148
color: Qt.darker(paletteRoot.foreground, 1.8)
148149
font.family: "sans-serif"
149-
font.pixelSize: 12
150+
font.pixelSize: Style.font.body
150151
visible: !paletteFilterInput.text
151152
}
152153
}
153154

154155
Text {
155156
text: "Esc"
156157
color: Qt.darker(paletteRoot.foreground, 1.8)
157-
font.pixelSize: 10
158+
font.pixelSize: Style.font.caption
158159
}
159160
}
160161

@@ -193,14 +194,14 @@ Rectangle {
193194
Text {
194195
text: modelData.icon || "\uf0e7"
195196
font.family: paletteRoot.fontFamily
196-
font.pixelSize: 13
197+
font.pixelSize: Style.font.subtitle
197198
color: actionDelegate.isSelected ? "#ffffff" : Qt.darker(paletteRoot.foreground, 1.3)
198199
}
199200

200201
Text {
201202
text: modelData.label || ""
202203
color: actionDelegate.isSelected ? "#ffffff" : paletteRoot.foreground
203-
font.pixelSize: 12
204+
font.pixelSize: Style.font.body
204205
font.weight: Font.Medium
205206
elide: Text.ElideRight
206207
Layout.fillWidth: true
@@ -220,7 +221,7 @@ Rectangle {
220221
anchors.centerIn: parent
221222
text: modelData.shortcut || ""
222223
color: Qt.darker(paletteRoot.foreground, 1.4)
223-
font.pixelSize: 10
224+
font.pixelSize: Style.font.caption
224225
}
225226
}
226227
}

‎components/AuthView.qml‎

Lines changed: 37 additions & 36 deletions
Large diffs are not rendered by default.

‎components/CategoryTabBar.qml‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import QtQuick
22
import QtQuick.Controls
33
import QtQuick.Layouts
4+
import qs.Commons
45

56
RowLayout {
67
id: tabRoot
@@ -81,7 +82,7 @@ RowLayout {
8182
Text {
8283
text: tabRoot.getCategoryLabel(cat)
8384
color: isSelected ? tabRoot.accent : (tabMouse.containsMouse ? tabRoot.foreground : Qt.darker(tabRoot.foreground, 1.3))
84-
font.pixelSize: 11
85+
font.pixelSize: Style.font.bodySmall
8586
font.weight: isSelected ? Font.DemiBold : Font.Normal
8687
}
8788

@@ -90,7 +91,7 @@ RowLayout {
9091
visible: count > 0
9192
text: count
9293
color: isSelected ? tabRoot.accent : Qt.darker(tabRoot.foreground, 1.8)
93-
font.pixelSize: 10
94+
font.pixelSize: Style.font.caption
9495
}
9596
}
9697

‎components/DependencyCheckView.qml‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import QtQuick
22
import QtQuick.Controls
33
import QtQuick.Layouts
4+
import qs.Commons
45

56
Item {
67
id: depViewRoot
@@ -208,14 +209,14 @@ Item {
208209
Text {
209210
text: "\uf0ad"
210211
font.family: depViewRoot.fontFamily
211-
font.pixelSize: 22
212+
font.pixelSize: Style.fontPx(1.833)
212213
color: depViewRoot.accent
213214
}
214215

215216
Text {
216217
text: "System Dependencies Required"
217218
color: depViewRoot.foreground
218-
font.pixelSize: 16
219+
font.pixelSize: Style.font.heading
219220
font.bold: true
220221
}
221222

@@ -232,7 +233,7 @@ Item {
232233
anchors.centerIn: parent
233234
text: "Prerequisite Setup"
234235
color: depViewRoot.accent
235-
font.pixelSize: 10
236+
font.pixelSize: Style.font.caption
236237
font.bold: true
237238
}
238239
}
@@ -241,7 +242,7 @@ Item {
241242
Text {
242243
text: "Omarchy Bitwarden requires native Arch / AUR packages to provide background encryption, system keyring session caching, and Wayland clipboard management."
243244
color: Qt.darker(depViewRoot.foreground, 1.6)
244-
font.pixelSize: 11
245+
font.pixelSize: Style.font.bodySmall
245246
wrapMode: Text.WordWrap
246247
Layout.fillWidth: true
247248
}
@@ -301,7 +302,7 @@ Item {
301302
Text {
302303
text: model.pkgName
303304
color: depViewRoot.foreground
304-
font.pixelSize: 13
305+
font.pixelSize: Style.font.subtitle
305306
font.bold: true
306307
}
307308

@@ -326,15 +327,15 @@ Item {
326327
if (model.pkgName === "omawarden") return depViewRoot.accent
327328
return Qt.darker(depViewRoot.foreground, 1.4)
328329
}
329-
font.pixelSize: 10
330+
font.pixelSize: Style.font.caption
330331
font.bold: true
331332
}
332333
}
333334

334335
Text {
335336
text: model.version ? ("v" + model.version) : ""
336337
color: "#a6e3a1"
337-
font.pixelSize: 11
338+
font.pixelSize: Style.font.bodySmall
338339
font.bold: true
339340
visible: model.status === "installed" && Boolean(model.version)
340341
}
@@ -343,14 +344,14 @@ Item {
343344
Text {
344345
text: model.title
345346
color: Qt.darker(depViewRoot.foreground, 1.3)
346-
font.pixelSize: 11
347+
font.pixelSize: Style.font.bodySmall
347348
font.weight: Font.DemiBold
348349
}
349350

350351
Text {
351352
text: model.description
352353
color: Qt.darker(depViewRoot.foreground, 1.6)
353-
font.pixelSize: 10
354+
font.pixelSize: Style.font.caption
354355
wrapMode: Text.WordWrap
355356
Layout.fillWidth: true
356357
}
@@ -400,7 +401,7 @@ Item {
400401
if (model.status === "checking") return "#f9e2af"
401402
return depViewRoot.foreground
402403
}
403-
font.pixelSize: 11
404+
font.pixelSize: Style.font.bodySmall
404405
font.bold: true
405406
}
406407
}
@@ -428,7 +429,7 @@ Item {
428429
anchors.centerIn: parent
429430
text: depViewRoot.isChecking ? "Checking..." : "↻ Recheck"
430431
color: depViewRoot.isChecking ? Qt.darker(depViewRoot.foreground, 2) : depViewRoot.foreground
431-
font.pixelSize: 11
432+
font.pixelSize: Style.font.bodySmall
432433
font.bold: true
433434
}
434435

@@ -470,7 +471,7 @@ Item {
470471
if (depViewRoot.isChecking || depViewRoot.isInstalling) return Qt.darker(depViewRoot.foreground, 2)
471472
return "#ffffff"
472473
}
473-
font.pixelSize: 12
474+
font.pixelSize: Style.font.body
474475
font.bold: true
475476
}
476477

@@ -488,7 +489,7 @@ Item {
488489
Text {
489490
text: "Automatically launches an Omarchy floating presentation terminal running paru / yay / pacman to install prerequisites."
490491
color: Qt.darker(depViewRoot.foreground, 2.2)
491-
font.pixelSize: 10
492+
font.pixelSize: Style.font.caption
492493
horizontalAlignment: Text.AlignHCenter
493494
Layout.fillWidth: true
494495
}

0 commit comments

Comments
 (0)