Unify font sizes through qs.Commons.Style

Themes now drive typography the same way they drive colors: one [font]
base-size in shell.toml is the rem root, and every Style.font.<token>
(caption, bodySmall, body, subtitle, title, heading, display,
displayLarge, iconSmall, icon, iconLarge) derives from it via a fixed
multiplier. Themes can also pin individual tokens for stylistic
emphasis. base-size is clamped 11..13 until row-height tokens exist.

Bar dimensions move to the same singleton: [bar] size-horizontal /
size-vertical replace the hardcoded 26/28 in Bar.qml, exposed as
Style.bar.sizeHorizontal / sizeVertical.

Style.qml also resolves the fontconfig 'monospace' alias via fc-match
and exposes Style.font.resolvedFamily so panels can display the
concrete family. Watches ~/.config/fontconfig/fonts.conf so it tracks
'omarchy font set <name>'.

The qs.Ui kit (PillButton, Dropdown, Toggle, TextField, etc.) and
every first-party plugin (bar widgets, settings, menu, clipboard,
emoji, polkit, notifications, osd, image-picker, dev-gallery) now
bind to Style.font.* instead of pixel literals. Only three deliberate
display-scale outliers remain: the notification empty-state glyph and
the weather flyout's hero temperature pair, all commented.

Background plugin's applyTheme IPC fast-path also pushes shell.toml to
Style so theme swaps update typography and bar size without waiting
for inotify debounce.

Dev gallery (omarchy dev ui-preview) now ships a Typography section
that renders the full scale and theme tokens live, and its summon
command is fixed (omarchy-shell-ipc -> omarchy-shell).
This commit is contained in:
Ryan Hughes
2026-05-18 11:33:19 -04:00
parent c26cf49f7d
commit 648bc54db1
41 changed files with 762 additions and 285 deletions
@@ -1,5 +1,6 @@
import QtQuick
import QtQuick.Controls
import qs.Commons
// Themed ComboBox + popup. Anchors below the trigger, paints with the host
// shell's foreground/background palette, and inherits the shell-wide corner
@@ -10,10 +11,10 @@ Item {
property string label: ""
property string value: ""
property var options: []
property color foreground: "#cacccc"
property color background: "#101315"
property color accent: "#cacccc"
property string fontFamily: "monospace"
property color foreground: Color.foreground
property color background: Color.background
property color accent: Color.accent
property string fontFamily: Style.font.family
property int cornerRadius: 0
property int rowHeight: 28
property int popupRowHeight: 28
@@ -33,7 +34,7 @@ Item {
text: root.label
color: Qt.darker(root.foreground, 1.4)
font.family: root.fontFamily
font.pixelSize: 10
font.pixelSize: Style.font.caption
font.bold: true
}
@@ -42,7 +43,7 @@ Item {
width: parent.width
height: root.rowHeight
font.family: root.fontFamily
font.pixelSize: 12
font.pixelSize: Style.font.body
model: root.options
currentIndex: {
for (var i = 0; i < model.length; i++) if (model[i] === root.value) return i
@@ -76,7 +77,7 @@ Item {
text: "▾"
color: Qt.darker(root.foreground, 1.2)
font.family: root.fontFamily
font.pixelSize: 10
font.pixelSize: Style.font.caption
}
popup: Popup {
@@ -115,7 +116,7 @@ Item {
text: String(modelData)
color: index === combo.highlightedIndex ? root.accent : root.foreground
font.family: root.fontFamily
font.pixelSize: 12
font.pixelSize: Style.font.body
leftPadding: 10
rightPadding: 10
verticalAlignment: Text.AlignVCenter