ZacharyZhang-NY/omarchycn
3
4
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases 5 Wiki Activity

Unify font sizes through qs.Commons.Style

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
shell/Ui/ChoiceButton.qml
+2 -2
View File
@@ -26,8 +26,8 @@ Rectangle {
property color foreground: Color.foreground
property color background: Color.background
property color accent: Color.accent
property string fontFamily: "monospace"
property real fontSize: 12
property string fontFamily: Style.font.family
property real fontSize: Style.font.body
signal clicked()
signal hovered(bool isHovered)
shell/Ui/Dropdown.qml
+5 -5
View File
@@ -26,7 +26,7 @@ Item {
property color background: Color.popups.background
property color popupBorder: Color.popups.border
property color accent: Color.accent
property string fontFamily: "JetBrainsMono Nerd Font"
property string fontFamily: Style.font.family
property int rowHeight: 28
property int popupRowHeight: 28
property bool showLabel: true
@@ -74,7 +74,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
}
@@ -118,7 +118,7 @@ Item {
text: root.currentLabel()
color: root.foreground
font.family: root.fontFamily
font.pixelSize: 12
font.pixelSize: Style.font.body
elide: Text.ElideRight
}
@@ -130,7 +130,7 @@ Item {
text: "󰅀"
color: Qt.darker(root.foreground, 1.2)
font.family: root.fontFamily
font.pixelSize: 12
font.pixelSize: Style.font.body
}
MouseArea {
@@ -219,7 +219,7 @@ Item {
text: root.optionLabel(modelData)
color: index === optionList.currentIndex ? root.accent : root.foreground
font.family: root.fontFamily
font.pixelSize: 12
font.pixelSize: Style.font.body
elide: Text.ElideRight
}
shell/Ui/NumberField.qml
+3 -3
View File
@@ -12,8 +12,8 @@ Column {
property int stepSize: 1
property color foreground: Color.foreground
property color accent: Color.accent
property string fontFamily: "JetBrainsMono Nerd Font"
property real fontSize: 12
property string fontFamily: Style.font.family
property real fontSize: Style.font.body
property real fieldWidth: 120
property bool hasCursor: false
property alias field: spin
@@ -28,7 +28,7 @@ Column {
text: root.label
color: Qt.darker(root.foreground, 1.4)
font.family: root.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
}
QQC.SpinBox {
shell/Ui/PanelActionButton.qml
+4 -4
View File
@@ -29,11 +29,11 @@ Rectangle {
property string iconText: ""
property string tooltipText: ""
property color foreground: "#cacccc"
property color foreground: Color.foreground
property color hoverColor: foreground
property color panelBackground: "#101315"
property string fontFamily: "JetBrainsMono Nerd Font"
property real fontSize: 14
property color panelBackground: Color.background
property string fontFamily: Style.font.family
property real fontSize: Style.font.icon
property real size: 22
property bool focusable: false
shell/Ui/PanelSectionHeader.qml
+4 -3
View File
@@ -1,4 +1,5 @@
import QtQuick
import qs.Commons
// Small-caps-style label that introduces a panel section ("DNS provider",
// "Wi-Fi networks", "Output device", "Paired devices"). Sits between a
@@ -6,9 +7,9 @@ import QtQuick
Text {
id: root
property color foreground: "#cacccc"
property string fontFamily: "JetBrainsMono Nerd Font"
property real fontSize: 10
property color foreground: Color.foreground
property string fontFamily: Style.font.family
property real fontSize: Style.font.caption
color: Qt.darker(foreground, 1.4)
font.family: fontFamily
shell/Ui/PanelToolTip.qml
+5 -4
View File
@@ -1,5 +1,6 @@
import QtQuick
import QtQuick.Controls
import qs.Commons
// Styled wrapper around Qt Quick Controls ToolTip. Drop-in: declare inside
// the hovered item and bind `visible` to the hover state, e.g.
@@ -16,10 +17,10 @@ import QtQuick.Controls
ToolTip {
id: root
property color panelForeground: "#cacccc"
property color panelBackground: "#101315"
property string fontFamily: "JetBrainsMono Nerd Font"
property real fontSize: 11
property color panelForeground: Color.foreground
property color panelBackground: Color.background
property string fontFamily: Style.font.family
property real fontSize: Style.font.bodySmall
delay: 400
padding: 0
shell/Ui/PillButton.qml
+6 -6
View File
@@ -8,15 +8,15 @@ Rectangle {
property string text: ""
property string iconText: ""
property string tooltipText: ""
property color foreground: "#cacccc"
property color foreground: Color.foreground
property color background: "transparent"
property color hoverBackground: Qt.rgba(foreground.r, foreground.g, foreground.b, 0.08)
property color pressedBackground: Qt.rgba(foreground.r, foreground.g, foreground.b, 0.22)
property color tooltipBackground: "#101315"
property color tooltipBackground: Color.background
property color tooltipForeground: foreground
property string fontFamily: "JetBrainsMono Nerd Font"
property real fontSize: 12
property real iconSize: 14
property string fontFamily: Style.font.family
property real fontSize: Style.font.body
property real iconSize: Style.font.icon
property real iconRotation: 0
property real horizontalPadding: 10
property real verticalPadding: 6
@@ -66,7 +66,7 @@ Rectangle {
text: root.tooltipText
color: root.tooltipForeground
font.family: root.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
leftPadding: 10
rightPadding: 10
topPadding: 6
shell/Ui/SearchableDropdown.qml
+8 -8
View File
@@ -29,7 +29,7 @@ Item {
property color background: Color.popups.background
property color popupBorder: Color.popups.border
property color accent: Color.accent
property string fontFamily: "JetBrainsMono Nerd Font"
property string fontFamily: Style.font.family
property int rowHeight: 28
property int popupRowHeight: 28
property int popupMinHeight: 220
@@ -96,7 +96,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
}
@@ -140,7 +140,7 @@ Item {
text: root.currentLabel() || root.triggerLabel || root.placeholderText
color: (root.currentLabel() || root.triggerLabel) ? root.foreground : Qt.darker(root.foreground, 1.5)
font.family: root.fontFamily
font.pixelSize: 12
font.pixelSize: Style.font.body
elide: Text.ElideRight
}
@@ -152,7 +152,7 @@ Item {
text: "󰅀"
color: Qt.darker(root.foreground, 1.2)
font.family: root.fontFamily
font.pixelSize: 12
font.pixelSize: Style.font.body
}
MouseArea {
@@ -204,7 +204,7 @@ Item {
foreground: root.foreground
accent: root.accent
font.family: root.fontFamily
font.pixelSize: 12
font.pixelSize: Style.font.body
onTextChanged: {
root.recomputeFiltered()
@@ -247,7 +247,7 @@ Item {
text: root.emptyText
color: Qt.darker(root.foreground, 1.6)
font.family: root.fontFamily
font.pixelSize: 12
font.pixelSize: Style.font.body
}
ListView {
@@ -312,7 +312,7 @@ Item {
text: root.optionLabel(modelData)
color: index === resultList.currentIndex ? root.accent : root.foreground
font.family: root.fontFamily
font.pixelSize: 12
font.pixelSize: Style.font.body
elide: Text.ElideRight
width: parent.width
}
@@ -321,7 +321,7 @@ Item {
text: root.optionDescription(modelData)
color: Qt.darker(root.foreground, 1.5)
font.family: root.fontFamily
font.pixelSize: 10
font.pixelSize: Style.font.caption
elide: Text.ElideRight
width: parent.width
}
shell/Ui/TextField.qml
+2
View File
@@ -37,6 +37,8 @@ TextField {
readonly property bool _focused: activeFocus || hasCursor
echoMode: password ? TextInput.Password : TextInput.Normal
font.family: Style.font.family
font.pixelSize: Style.font.body
color: foreground
selectionColor: selectionTint
selectedTextColor: foreground
shell/Ui/Toggle.qml
+3 -3
View File
@@ -32,9 +32,9 @@ Rectangle {
property color foreground: Color.foreground
property color accent: Color.accent
property string fontFamily: "monospace"
property real titleSize: 13
property real descriptionSize: 10
property string fontFamily: Style.font.family
property real titleSize: Style.font.subtitle
property real descriptionSize: Style.font.caption
signal clicked()
signal hovered(bool isHovered)
shell/Ui/WidgetButton.qml
+7 -6
View File
@@ -1,14 +1,15 @@
import QtQuick
import qs.Commons
Item {
id: root
property var bar: null
property string text: ""
property string fontFamily: bar ? bar.fontFamily : "JetBrainsMono Nerd Font"
property real fontSize: 12
property color foreground: bar ? bar.foreground : "#cacccc"
property color activeColor: bar ? bar.urgent : "#a55555"
property string fontFamily: bar ? bar.fontFamily : Style.font.family
property real fontSize: Style.font.body
property color foreground: bar ? bar.foreground : Color.foreground
property color activeColor: bar ? bar.urgent : Color.urgent
property bool active: false
property real horizontalMargin: 8.5
property real rightExtraMargin: 0
@@ -23,7 +24,7 @@ Item {
signal wheelMoved(int delta)
readonly property bool vertical: bar ? bar.vertical : false
readonly property int barSize: bar ? bar.barSize : 26
readonly property int barSize: bar ? bar.barSize : Style.bar.sizeHorizontal
visible: text !== "" || keepSpace
opacity: text === "" ? 0 : 1
@@ -41,7 +42,7 @@ Item {
text: root.text
color: root.active ? root.activeColor : root.foreground
font.family: root.fontFamily
font.pointSize: root.fontSize * 0.75
font.pixelSize: root.fontSize
renderType: Text.NativeRendering
rotation: root.textRotation
horizontalAlignment: Text.AlignHCenter