ZacharyZhang-NY/omarchycn
2
3
Fork 0
Code Issues Pull Requests 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/plugins/background/Background.qml
+4
View File
@@ -81,6 +81,10 @@ Item {
NoctaliaCommons.Color.resumeThemeReloads()
NoctaliaCommons.Color.loadColors(pendingColorsRaw)
NoctaliaCommons.Color.loadShell(pendingShellRaw)
// Style watches the same shell.toml for [font] and [bar] sizing; push
// synchronously so the type scale flips with the background instead of
// waiting on inotify debounce.
NoctaliaCommons.Style.loadShell(pendingShellRaw)
pendingThemeVersion = -1
pendingColorsRaw = ""
pendingShellRaw = ""
shell/plugins/bar/Bar.qml
+18 -17
View File
@@ -44,9 +44,10 @@ Item {
property bool transparent: false
property int barConfigSerial: 0
property string position: "top"
// "monospace" resolves through fontconfig at paint time, so changing the
// system font (via `omarchy-font-set`) updates the bar without a reload.
property string fontFamily: "monospace"
// Resolves through fontconfig at paint time (Style.font.family defaults
// to "monospace"), so changing the system font (via `omarchy-font-set`)
// updates the bar without a reload.
property string fontFamily: Style.font.family
// Bound to the central Color singleton so the bar tracks shell.toml's
// [bar] section. Property names kept for the rest of this file's bindings.
property color foreground: Color.bar.text
@@ -80,7 +81,7 @@ Item {
}
readonly property bool vertical: position === "left" || position === "right"
readonly property int barSize: vertical ? 28 : 26
readonly property int barSize: vertical ? Style.bar.sizeVertical : Style.bar.sizeHorizontal
signal indicatorsRefreshRequested()
@@ -713,7 +714,7 @@ Item {
text: root.tooltipText
color: root.foreground
font.family: root.fontFamily
font.pixelSize: 12
font.pixelSize: Style.font.body
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
@@ -1073,7 +1074,7 @@ Item {
property bool active: false
property bool keepSpace: false
property string fontFamily: root.fontFamily
property real fontSize: 12
property real fontSize: Style.font.body
property real horizontalMargin: 7.5
property real rightExtraMargin: 0
property real verticalPadding: 6
@@ -1097,7 +1098,7 @@ Item {
text: buttonRoot.text
color: buttonRoot.active ? root.urgent : root.foreground
font.family: buttonRoot.fontFamily
font.pointSize: buttonRoot.fontSize * 0.75
font.pixelSize: buttonRoot.fontSize
renderType: Text.NativeRendering
rotation: buttonRoot.textRotation
horizontalAlignment: Text.AlignHCenter
@@ -1118,7 +1119,7 @@ Item {
}
component IndicatorModule: ModuleButton {
fontSize: 10
fontSize: Style.font.caption
horizontalMargin: 5
verticalPadding: 5
}
@@ -1171,7 +1172,7 @@ Item {
component UpdateModule: ModuleButton {
text: root.updateAvailable ? "" : ""
fontSize: 10
fontSize: Style.font.caption
tooltipText: root.updateAvailable ? "Omarchy update available" : ""
onPressed: function() { root.run("omarchy-launch-floating-terminal-with-presentation omarchy-update") }
}
@@ -1483,7 +1484,7 @@ Item {
text: "Tray icons"
color: root.foreground
font.family: root.fontFamily
font.pixelSize: 12
font.pixelSize: Style.font.body
font.bold: true
}
@@ -1491,7 +1492,7 @@ Item {
text: "Pinned icons stay visible. Hidden icons never show."
color: Qt.darker(root.foreground, 1.4)
font.family: root.fontFamily
font.pixelSize: 10
font.pixelSize: Style.font.caption
wrapMode: Text.WordWrap
width: parent.width
}
@@ -1501,7 +1502,7 @@ Item {
text: "No tray items reporting."
color: Qt.darker(root.foreground, 1.5)
font.family: root.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
font.italic: true
}
@@ -1546,7 +1547,7 @@ Item {
text: rowRoot.displayName
color: root.foreground
font.family: root.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
elide: Text.ElideRight
}
@@ -1559,8 +1560,8 @@ Item {
foreground: root.foreground
horizontalPadding: 8
verticalPadding: 3
iconSize: 11
fontSize: 11
iconSize: Style.font.bodySmall
fontSize: Style.font.bodySmall
onClicked: trayRoot.togglePin(rowRoot.itemId)
}
@@ -1574,8 +1575,8 @@ Item {
foreground: root.foreground
horizontalPadding: 8
verticalPadding: 3
iconSize: 11
fontSize: 11
iconSize: Style.font.bodySmall
fontSize: Style.font.bodySmall
onClicked: trayRoot.toggleHide(rowRoot.itemId)
}
}
shell/plugins/bar/widgets/activeWindow.qml
+2 -1
View File
@@ -1,6 +1,7 @@
import QtQuick
import Quickshell
import Quickshell.Wayland
import qs.Commons
Item {
id: root
@@ -42,7 +43,7 @@ Item {
text: root.title
color: root.bar ? root.bar.foreground : "#cacccc"
font.family: root.bar ? root.bar.fontFamily : "JetBrainsMono Nerd Font"
font.pixelSize: 12
font.pixelSize: Style.font.body
elide: Text.ElideRight
opacity: 0.85
}
shell/plugins/bar/widgets/audioPanel.qml
+20 -19
View File
@@ -4,6 +4,7 @@ import Quickshell
import Quickshell.Io
import Quickshell.Services.Pipewire
import qs.Ui
import qs.Commons
Item {
id: root
@@ -356,7 +357,7 @@ Item {
anchors.fill: parent
bar: root.bar
text: root.outputIcon()
fontSize: 12
fontSize: Style.font.body
onPressed: function(b) {
if (b === Qt.RightButton) root.toggleOutputMute()
else if (b === Qt.MiddleButton) root.bar.run("omarchy-launch-audio")
@@ -428,7 +429,7 @@ Item {
text: "Output"
foreground: root.bar.foreground
fontFamily: root.bar.fontFamily
fontSize: 11
fontSize: Style.font.bodySmall
anchors.verticalCenter: parent.verticalCenter
}
@@ -436,7 +437,7 @@ Item {
text: root.sink ? "· " + root.nodeLabel(root.sink) : ""
color: Qt.darker(root.bar.foreground, 1.8)
font.family: root.bar.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
elide: Text.ElideRight
width: parent.width - 70
anchors.verticalCenter: parent.verticalCenter
@@ -467,7 +468,7 @@ Item {
text: root.outputIcon()
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 16
font.pixelSize: Style.font.heading
width: 22
horizontalAlignment: Text.AlignHCenter
anchors.verticalCenter: parent.verticalCenter
@@ -500,7 +501,7 @@ Item {
text: Math.round((outputSlider.dragging ? outputSlider.liveValue : root.outputVolume) * 100) + "%"
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
width: 36
horizontalAlignment: Text.AlignRight
anchors.verticalCenter: parent.verticalCenter
@@ -547,7 +548,7 @@ Item {
text: "Input"
foreground: root.bar.foreground
fontFamily: root.bar.fontFamily
fontSize: 11
fontSize: Style.font.bodySmall
anchors.verticalCenter: parent.verticalCenter
}
@@ -555,7 +556,7 @@ Item {
text: root.source ? "· " + root.nodeLabel(root.source) : ""
color: Qt.darker(root.bar.foreground, 1.8)
font.family: root.bar.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
elide: Text.ElideRight
width: parent.width - 56
anchors.verticalCenter: parent.verticalCenter
@@ -584,7 +585,7 @@ Item {
text: root.inputIcon()
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 16
font.pixelSize: Style.font.heading
width: 22
horizontalAlignment: Text.AlignHCenter
anchors.verticalCenter: parent.verticalCenter
@@ -617,7 +618,7 @@ Item {
text: Math.round((inputSlider.dragging ? inputSlider.liveValue : root.inputVolume) * 100) + "%"
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
width: 36
horizontalAlignment: Text.AlignRight
anchors.verticalCenter: parent.verticalCenter
@@ -660,7 +661,7 @@ Item {
text: "Playing"
foreground: root.bar.foreground
fontFamily: root.bar.fontFamily
fontSize: 11
fontSize: Style.font.bodySmall
}
Repeater {
@@ -712,7 +713,7 @@ Item {
text: root.sinkGlyph(sinkRow.node)
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 14
font.pixelSize: Style.font.title
width: 22
horizontalAlignment: Text.AlignHCenter
anchors.verticalCenter: parent.verticalCenter
@@ -722,7 +723,7 @@ Item {
text: root.nodeLabel(sinkRow.node)
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 12
font.pixelSize: Style.font.body
elide: Text.ElideRight
width: parent.width - 22 - 14 - 16
anchors.verticalCenter: parent.verticalCenter
@@ -732,7 +733,7 @@ Item {
text: sinkRow.isActive ? "󰄬" : ""
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 13
font.pixelSize: Style.font.subtitle
width: 14
horizontalAlignment: Text.AlignRight
anchors.verticalCenter: parent.verticalCenter
@@ -779,7 +780,7 @@ Item {
text: root.sourceGlyph(sourceRow.node)
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 14
font.pixelSize: Style.font.title
width: 22
horizontalAlignment: Text.AlignHCenter
anchors.verticalCenter: parent.verticalCenter
@@ -789,7 +790,7 @@ Item {
text: root.nodeLabel(sourceRow.node)
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 12
font.pixelSize: Style.font.body
elide: Text.ElideRight
width: parent.width - 22 - 14 - 16
anchors.verticalCenter: parent.verticalCenter
@@ -799,7 +800,7 @@ Item {
text: sourceRow.isActive ? "󰄬" : ""
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 13
font.pixelSize: Style.font.subtitle
width: 14
horizontalAlignment: Text.AlignRight
anchors.verticalCenter: parent.verticalCenter
@@ -855,7 +856,7 @@ Item {
text: streamRow.streamMuted ? "󰝟" : "󰕾"
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 12
font.pixelSize: Style.font.body
width: 14
horizontalAlignment: Text.AlignHCenter
anchors.verticalCenter: parent.verticalCenter
@@ -875,7 +876,7 @@ Item {
text: root.streamLabel(streamRow.node)
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
elide: Text.ElideRight
width: parent.width - streamMuteIcon.width - streamPct.width - 12
anchors.verticalCenter: parent.verticalCenter
@@ -886,7 +887,7 @@ Item {
text: Math.round(streamRow.streamVolume * 100) + "%"
color: Qt.darker(root.bar.foreground, 1.5)
font.family: root.bar.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
width: 36
horizontalAlignment: Text.AlignRight
anchors.verticalCenter: parent.verticalCenter
shell/plugins/bar/widgets/bluetoothPanel.qml
+7 -6
View File
@@ -4,6 +4,7 @@ import Quickshell
import Quickshell.Io
import Quickshell.Bluetooth
import qs.Ui
import qs.Commons
Item {
id: root
@@ -395,7 +396,7 @@ Item {
text: "Bluetooth"
foreground: root.bar.foreground
fontFamily: root.bar.fontFamily
fontSize: 11
fontSize: Style.font.bodySmall
anchors.verticalCenter: parent.verticalCenter
}
@@ -403,7 +404,7 @@ Item {
text: "· " + (root.adapter && root.adapter.enabled ? "On" : "Off")
color: Qt.darker(root.bar.foreground, 1.8)
font.family: root.bar.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
anchors.verticalCenter: parent.verticalCenter
}
}
@@ -501,7 +502,7 @@ Item {
: "No paired devices. Tap the scan icon to find new ones."
color: Qt.darker(root.bar.foreground, 1.5)
font.family: root.bar.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
wrapMode: Text.WordWrap
width: deviceList.width
}
@@ -672,7 +673,7 @@ Item {
text: row.isConnected ? "󰂱" : "󰂯"
color: row.statusColor
font.family: root.bar.fontFamily
font.pixelSize: 16
font.pixelSize: Style.font.heading
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
}
@@ -715,7 +716,7 @@ Item {
text: root.deviceLabel(row.dev) || "Device"
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 12
font.pixelSize: Style.font.body
elide: Text.ElideRight
width: parent.width
}
@@ -724,7 +725,7 @@ Item {
text: row.statusText
color: row.statusColor
font.family: root.bar.fontFamily
font.pixelSize: 10
font.pixelSize: Style.font.caption
elide: Text.ElideRight
width: parent.width
}
shell/plugins/bar/widgets/calendar.qml
+4 -3
View File
@@ -2,6 +2,7 @@ import QtQuick
import QtQuick.Layouts
import Quickshell
import qs.Ui
import qs.Commons
Item {
id: root
@@ -110,7 +111,7 @@ Item {
text: Qt.formatDate(root.viewMonth, "MMMM yyyy")
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 14
font.pixelSize: Style.font.title
font.bold: true
}
@@ -146,7 +147,7 @@ Item {
text: modelData
color: Qt.darker(root.bar.foreground, 1.6)
font.family: root.bar.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
font.bold: true
}
}
@@ -187,7 +188,7 @@ Item {
text: dayDate.getDate()
color: isToday ? root.bar.background : (inMonth ? root.bar.foreground : Qt.darker(root.bar.foreground, 2.2))
font.family: root.bar.fontFamily
font.pixelSize: 12
font.pixelSize: Style.font.body
font.bold: isToday
}
}
shell/plugins/bar/widgets/keyboardLayout.qml
+2 -1
View File
@@ -3,6 +3,7 @@ import Quickshell
import Quickshell.Hyprland
import Quickshell.Io
import qs.Ui
import qs.Commons
Item {
id: root
@@ -76,7 +77,7 @@ Item {
anchors.fill: parent
bar: root.bar
text: root.layoutLabel
fontSize: 10
fontSize: Style.font.caption
horizontalMargin: 6
tooltipText: root.layoutFull
onPressed: function() { root.cycleLayout() }
shell/plugins/bar/widgets/lockKeys.qml
+2 -1
View File
@@ -1,6 +1,7 @@
import QtQuick
import Quickshell
import Quickshell.Io
import qs.Commons
Item {
id: root
@@ -96,6 +97,6 @@ Item {
text: glyph
color: active ? (root.bar ? root.bar.foreground : "#cacccc") : Qt.rgba(0.7, 0.7, 0.7, 0.3)
font.family: root.bar ? root.bar.fontFamily : "JetBrainsMono Nerd Font"
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
}
}
shell/plugins/bar/widgets/media.qml
+7 -7
View File
@@ -2,6 +2,7 @@ import QtQuick
import Quickshell
import Quickshell.Services.Mpris
import qs.Ui
import qs.Commons
Item {
id: root
@@ -52,8 +53,7 @@ Item {
text: root.playIcon
color: activePlayer && activePlayer.isPlaying ? root.bar.foreground : Qt.darker(root.bar.foreground, 1.5)
font.family: root.bar.fontFamily
font.pixelSize: 12
font.pixelSize: Style.font.body
Behavior on color { ColorAnimation { duration: 160 } }
}
@@ -70,7 +70,7 @@ Item {
text: root.title + (root.artist ? " · " + root.artist : "")
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 12
font.pixelSize: Style.font.body
anchors.verticalCenter: parent.verticalCenter
property bool needsScroll: implicitWidth > scrollClip.width
@@ -154,7 +154,7 @@ Item {
text: "󰝚"
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 28
font.pixelSize: Style.font.displayLarge
}
}
@@ -166,7 +166,7 @@ Item {
text: root.title || "Nothing playing"
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 13
font.pixelSize: Style.font.subtitle
font.bold: true
elide: Text.ElideRight
width: parent.width
@@ -176,7 +176,7 @@ Item {
text: root.artist
color: Qt.darker(root.bar.foreground, 1.3)
font.family: root.bar.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
elide: Text.ElideRight
width: parent.width
visible: text !== ""
@@ -186,7 +186,7 @@ Item {
text: root.activePlayer && root.activePlayer.trackAlbum ? root.activePlayer.trackAlbum : ""
color: Qt.darker(root.bar.foreground, 1.6)
font.family: root.bar.fontFamily
font.pixelSize: 10
font.pixelSize: Style.font.caption
elide: Text.ElideRight
width: parent.width
visible: text !== ""
shell/plugins/bar/widgets/monitorPanel.qml
+9 -8
View File
@@ -3,6 +3,7 @@ import QtQuick.Controls
import Quickshell
import Quickshell.Io
import qs.Ui
import qs.Commons
Item {
id: root
@@ -353,7 +354,7 @@ Item {
anchors.fill: parent
bar: root.bar
text: "󰍹"
fontSize: 13
fontSize: Style.font.subtitle
onPressed: function(b) { root.popupOpen = !root.popupOpen }
onWheelMoved: function(delta) {
if (root.brightnessAvailable) root.setBrightness(root.brightnessPercent + (delta > 0 ? 5 : -5))
@@ -403,7 +404,7 @@ Item {
text: "Brightness"
foreground: root.bar.foreground
fontFamily: root.bar.fontFamily
fontSize: 11
fontSize: Style.font.bodySmall
}
CursorSurface {
@@ -427,7 +428,7 @@ Item {
text: "󰃠"
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 16
font.pixelSize: Style.font.heading
width: 22
horizontalAlignment: Text.AlignHCenter
anchors.verticalCenter: parent.verticalCenter
@@ -455,7 +456,7 @@ Item {
text: Math.round(brightnessSlider.dragging ? brightnessSlider.liveValue : root.brightnessPercent) + "%"
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
width: 36
horizontalAlignment: Text.AlignRight
anchors.verticalCenter: parent.verticalCenter
@@ -475,7 +476,7 @@ Item {
text: "No controllable backlight found"
color: Qt.darker(root.bar.foreground, 1.5)
font.family: root.bar.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
}
}
@@ -488,7 +489,7 @@ Item {
text: "Scale"
foreground: root.bar.foreground
fontFamily: root.bar.fontFamily
fontSize: 11
fontSize: Style.font.bodySmall
}
Row {
@@ -509,7 +510,7 @@ Item {
tooltipBackground: root.bar.background
tooltipForeground: root.bar.foreground
fontFamily: root.bar.fontFamily
fontSize: 11
fontSize: Style.font.bodySmall
horizontalPadding: 0
verticalPadding: 6
active: root.normalizeScale(root.monitorScale) === root.normalizeScale(modelData)
@@ -536,7 +537,7 @@ Item {
text: "Monitors"
foreground: root.bar.foreground
fontFamily: root.bar.fontFamily
fontSize: 11
fontSize: Style.font.bodySmall
}
Repeater {
shell/plugins/bar/widgets/networkPanel.qml
+19 -18
View File
@@ -3,6 +3,7 @@ import QtQuick.Controls
import Quickshell
import Quickshell.Io
import qs.Ui
import qs.Commons
Item {
id: root
@@ -663,7 +664,7 @@ iwctl station "$station" get-networks rssi-dbms 2>/dev/null \\
text: root.icon
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 22
font.pixelSize: Style.font.display
anchors.verticalCenter: parent.verticalCenter
}
@@ -675,7 +676,7 @@ iwctl station "$station" get-networks rssi-dbms 2>/dev/null \\
text: root.info.iface || (root.kind === "disconnected" ? "Disconnected" : "No connection")
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 13
font.pixelSize: Style.font.subtitle
font.bold: true
}
Text {
@@ -691,7 +692,7 @@ iwctl station "$station" get-networks rssi-dbms 2>/dev/null \\
visible: text !== ""
color: Qt.darker(root.bar.foreground, 1.4)
font.family: root.bar.fontFamily
font.pixelSize: 10
font.pixelSize: Style.font.caption
}
}
}
@@ -732,14 +733,14 @@ iwctl station "$station" get-networks rssi-dbms 2>/dev/null \\
text: "IP address"
color: Qt.darker(root.bar.foreground, 1.4)
font.family: root.bar.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
}
Text {
visible: !!root.info.ip
text: (root.info.ip || "") + (root.info.prefix ? "/" + root.info.prefix : "")
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
}
// Gateway.
@@ -748,14 +749,14 @@ iwctl station "$station" get-networks rssi-dbms 2>/dev/null \\
text: "Gateway"
color: Qt.darker(root.bar.foreground, 1.4)
font.family: root.bar.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
}
Text {
visible: !!root.info.gateway
text: root.info.gateway || ""
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
}
// Ethernet link speed / duplex.
@@ -764,14 +765,14 @@ iwctl station "$station" get-networks rssi-dbms 2>/dev/null \\
text: "Link"
color: Qt.darker(root.bar.foreground, 1.4)
font.family: root.bar.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
}
Text {
visible: root.info.type === "ethernet" && !!root.info.speed
text: root.formatSpeed(root.info.speed || "") + (root.info.duplex ? " · " + root.info.duplex + " duplex" : "")
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
}
// Wi-Fi signal.
@@ -780,14 +781,14 @@ iwctl station "$station" get-networks rssi-dbms 2>/dev/null \\
text: "Signal"
color: Qt.darker(root.bar.foreground, 1.4)
font.family: root.bar.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
}
Text {
visible: root.info.type === "wifi" && !!root.info.signal_dbm
text: (root.info.signal_dbm || "") + " dBm"
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
}
// Wi-Fi tx bitrate.
@@ -796,14 +797,14 @@ iwctl station "$station" get-networks rssi-dbms 2>/dev/null \\
text: "Link rate"
color: Qt.darker(root.bar.foreground, 1.4)
font.family: root.bar.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
}
Text {
visible: root.info.type === "wifi" && !!root.info.bitrate
text: root.info.bitrate || ""
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
}
}
@@ -1048,7 +1049,7 @@ iwctl known-networks list 2>/dev/null \\
text: row.net ? root.wifiIconFor(row.net.signal) : ""
color: row.statusColor
font.family: root.bar.fontFamily
font.pixelSize: 14
font.pixelSize: Style.font.title
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
}
@@ -1083,7 +1084,7 @@ iwctl known-networks list 2>/dev/null \\
text: "󰌾"
color: Qt.darker(root.bar.foreground, 1.4)
font.family: root.bar.fontFamily
font.pixelSize: 13
font.pixelSize: Style.font.subtitle
}
Column {
@@ -1101,7 +1102,7 @@ iwctl known-networks list 2>/dev/null \\
text: row.net ? (row.net.ssid || "Hidden") : ""
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 12
font.pixelSize: Style.font.body
elide: Text.ElideRight
width: parent.width
}
@@ -1116,7 +1117,7 @@ iwctl known-networks list 2>/dev/null \\
height: visible ? implicitHeight : 0
color: row.statusColor
font.family: root.bar.fontFamily
font.pixelSize: 10
font.pixelSize: Style.font.caption
elide: Text.ElideRight
width: parent.width
}
@@ -1146,7 +1147,7 @@ iwctl known-networks list 2>/dev/null \\
password: true
placeholderText: "Passphrase"
font.family: root.bar.fontFamily
font.pixelSize: 12
font.pixelSize: Style.font.body
foreground: root.bar.foreground
horizontalPadding: 8
verticalPadding: 6
shell/plugins/bar/widgets/notificationCenter.qml
+11 -9
View File
@@ -125,7 +125,7 @@ Item {
text: "Notifications"
font.family: root.bar ? root.bar.fontFamily : ""
color: root.colForeground
font.pixelSize: 14
font.pixelSize: Style.font.title
font.bold: true
}
@@ -151,7 +151,7 @@ Item {
text: dndPill.dndOn ? "󰂛" : "󰂚"
font.family: root.bar ? root.bar.fontFamily : ""
color: dndPill.dndOn ? Color.background : root.colDim
font.pixelSize: 12
font.pixelSize: Style.font.body
anchors.verticalCenter: parent.verticalCenter
}
@@ -160,7 +160,7 @@ Item {
text: dndPill.dndOn ? "DND on" : "DND off"
font.family: root.bar ? root.bar.fontFamily : ""
color: dndPill.dndOn ? Color.background : root.colDim
font.pixelSize: 10
font.pixelSize: Style.font.caption
font.bold: true
anchors.verticalCenter: parent.verticalCenter
}
@@ -198,7 +198,7 @@ Item {
text: modelData.label + (modelData.count > 0 ? " " + modelData.count : "")
font.family: root.bar ? root.bar.fontFamily : ""
color: parent.isActive ? root.colForeground : root.colDim
font.pixelSize: 12
font.pixelSize: Style.font.body
font.bold: parent.isActive
}
@@ -243,7 +243,7 @@ Item {
text: root.activeTab === "pending" ? "Mark all as seen" : "Clear recent"
font.family: root.bar ? root.bar.fontFamily : ""
color: root.colForeground
font.pixelSize: 10
font.pixelSize: Style.font.caption
}
MouseArea {
@@ -342,7 +342,7 @@ Item {
text: rowCard.summary
font.family: root.bar ? root.bar.fontFamily : ""
color: root.colForeground
font.pixelSize: 13
font.pixelSize: Style.font.subtitle
font.bold: true
wrapMode: Text.WordWrap
elide: Text.ElideRight
@@ -356,7 +356,7 @@ Item {
font.family: root.bar ? root.bar.fontFamily : ""
textFormat: Text.PlainText
color: root.colDim
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
wrapMode: Text.WordWrap
elide: Text.ElideRight
maximumLineCount: 2
@@ -375,7 +375,7 @@ Item {
text: "✕"
font.family: root.bar ? root.bar.fontFamily : ""
color: root.colDim
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
}
MouseArea {
@@ -409,6 +409,8 @@ Item {
text: "󰂚"
font.family: root.bar ? root.bar.fontFamily : ""
color: root.colBorder
// Deliberately oversized empty-state glyph; doesn't follow the
// Style.font.* scale because it's a one-off decorative element.
font.pixelSize: 36
}
@@ -421,7 +423,7 @@ Item {
? "Nothing waiting for you"
: "No past notifications"
color: root.colDim
font.pixelSize: 12
font.pixelSize: Style.font.body
}
}
}
shell/plugins/bar/widgets/systemStats.qml
+6 -5
View File
@@ -2,6 +2,7 @@ import QtQuick
import Quickshell
import Quickshell.Io
import qs.Ui
import qs.Commons
Item {
id: root
@@ -188,7 +189,7 @@ Item {
text: "System"
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 12
font.pixelSize: Style.font.body
font.bold: true
}
@@ -217,13 +218,13 @@ Item {
text: "Load"
color: Qt.darker(root.bar.foreground, 1.5)
font.family: root.bar.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
}
Text {
text: root.loadAvg.toFixed(2)
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
}
}
}
@@ -246,14 +247,14 @@ Item {
text: detail.title
color: Qt.darker(detail.barFg, 1.4)
font.family: detail.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
}
Item { width: detail.width - parent.children[0].implicitWidth - parent.children[2].implicitWidth; height: 1 }
Text {
text: detail.value
color: detail.barFg
font.family: detail.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
}
}
shell/plugins/bar/widgets/weatherFlyout.qml
+18 -14
View File
@@ -351,6 +351,8 @@ Item {
text: root.label || "—"
color: root.bar.foreground
font.family: root.bar.fontFamily
// Decorative condition emoji; intentionally larger than the
// Style.font.* scale's displayLarge (28).
font.pixelSize: 64
}
@@ -363,6 +365,8 @@ Item {
text: root.reportTempNum || "—"
color: root.bar.foreground
font.family: root.bar.fontFamily
// Hero temperature read-out; deliberately oversized, outside
// the Style.font.* scale.
font.pixelSize: 56
font.bold: true
}
@@ -370,7 +374,7 @@ Item {
text: root.current ? root.tempUnit : ""
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 22
font.pixelSize: Style.font.display
anchors.top: tempBig.top
anchors.topMargin: 10
}
@@ -392,14 +396,14 @@ Item {
text: "" // nf-fa-map_marker
color: Qt.darker(root.bar.foreground, 1.4)
font.family: root.bar.fontFamily
font.pixelSize: 12
font.pixelSize: Style.font.body
anchors.verticalCenter: parent.verticalCenter
}
Text {
text: (root.reportLocation || "").toUpperCase()
color: Qt.darker(root.bar.foreground, 1.4)
font.family: root.bar.fontFamily
font.pixelSize: 12
font.pixelSize: Style.font.body
font.letterSpacing: 1
anchors.verticalCenter: parent.verticalCenter
}
@@ -415,14 +419,14 @@ Item {
text: "FEELS"
color: Qt.darker(root.bar.foreground, 1.5)
font.family: root.bar.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
font.letterSpacing: 1
}
Text {
text: root.reportFeels
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 15
font.pixelSize: Style.font.title
}
}
@@ -432,14 +436,14 @@ Item {
text: "WIND"
color: Qt.darker(root.bar.foreground, 1.5)
font.family: root.bar.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
font.letterSpacing: 1
}
Text {
text: root.reportWind
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 15
font.pixelSize: Style.font.title
}
}
@@ -449,14 +453,14 @@ Item {
text: "HUMID"
color: Qt.darker(root.bar.foreground, 1.5)
font.family: root.bar.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
font.letterSpacing: 1
}
Text {
text: root.reportHumidity
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 15
font.pixelSize: Style.font.title
}
}
}
@@ -468,7 +472,7 @@ Item {
text: "Fetching forecast…"
color: Qt.darker(root.bar.foreground, 1.5)
font.family: root.bar.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
font.italic: true
}
@@ -506,7 +510,7 @@ Item {
text: root.dayIcon(modelData)
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 24
font.pixelSize: Style.font.display
}
Column {
@@ -517,7 +521,7 @@ Item {
text: root.dayName(modelData.date).toUpperCase()
color: Qt.darker(root.bar.foreground, 1.4)
font.family: root.bar.fontFamily
font.pixelSize: 10
font.pixelSize: Style.font.caption
font.letterSpacing: 1
}
@@ -528,13 +532,13 @@ Item {
text: root.bareTempForDay(modelData, "max")
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 12
font.pixelSize: Style.font.body
}
Text {
text: root.bareTempForDay(modelData, "min")
color: Qt.darker(root.bar.foreground, 1.5)
font.family: root.bar.fontFamily
font.pixelSize: 12
font.pixelSize: Style.font.body
}
}
}
shell/plugins/clipboard-picker/ClipboardPicker.qml
+5 -5
View File
@@ -241,7 +241,7 @@ Item {
color: root.foreground
opacity: root.filterText ? 1 : 0.58
font.family: root.fontFamily
font.pixelSize: 16
font.pixelSize: Style.font.heading
elide: Text.ElideRight
}
}
@@ -299,7 +299,7 @@ Item {
text: parent.parent.isPassword ? "••••••••" : (parent.parent.previewType === "text" ? parent.parent.previewText : "Image")
color: index === root.selectedIndex ? root.accent : root.foreground
font.family: root.fontFamily
font.pixelSize: 14
font.pixelSize: Style.font.title
font.italic: parent.parent.previewType === "file" || parent.parent.isPassword
opacity: (parent.parent.previewType === "file" || parent.parent.isPassword) ? 0.6 : 1.0
elide: Text.ElideRight
@@ -339,7 +339,7 @@ Item {
text: parent.activeRow ? (parent.activeRow.isPassword ? "••••••••" : parent.activeRow.previewText) : ""
color: root.foreground
font.family: root.fontFamily
font.pixelSize: 14
font.pixelSize: Style.font.title
wrapMode: Text.WrapAnywhere
elide: Text.ElideRight
verticalAlignment: Text.AlignTop
@@ -365,7 +365,7 @@ Item {
color: root.accent
opacity: 0.8
font.family: root.fontFamily
font.pixelSize: 28
font.pixelSize: Style.font.displayLarge
horizontalAlignment: Text.AlignHCenter
width: parent.width
}
@@ -375,7 +375,7 @@ Item {
color: root.foreground
opacity: 0.7
font.family: root.fontFamily
font.pixelSize: 14
font.pixelSize: Style.font.title
horizontalAlignment: Text.AlignHCenter
width: parent.width
}
shell/plugins/dev-gallery/GalleryPanel.qml
+254 -53
View File
@@ -5,8 +5,8 @@ import qs.Ui
import qs.Commons
// Visual reference + live playground for omarchy-shell's common UI
// components. Summoned via:
// omarchy-shell-ipc shell summon omarchy.dev-gallery "{}"
// components. Summon with `omarchy dev ui-preview`, or directly via:
// omarchy-shell shell summon omarchy.dev-gallery "{}"
//
// Every section here renders the REAL component (not a copy) so the
// gallery doubles as a smoke test. When you add a new common component,
@@ -21,9 +21,11 @@ Item {
function open(payloadJson) {
closingFromHost = false
window.visible = true
// Defer focus so the FloatingWindow's content tree is in place; the
// hasCursor bindings on each demo target scroll themselves into view
// via onHasCursorChanged, so no explicit scroll call is needed here.
Qt.callLater(function() {
if (keyCatcher) keyCatcher.forceActiveFocus()
ensureCursorVisible(currentTarget())
})
}
@@ -334,14 +336,14 @@ Item {
text: "Omarchy shell · dev gallery"
color: root.foreground
font.family: root.fontFamily
font.pixelSize: 18
font.pixelSize: Style.font.iconLarge
font.bold: true
}
Text {
text: "Live previews of every type exported from qs.Ui. Use this as the visual reference when porting panels or building plugins. j/k or arrows to walk; h/l within rows; Enter to activate; Esc to close."
color: Qt.darker(root.foreground, 1.4)
font.family: root.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
width: parent.width
wrapMode: Text.WordWrap
}
@@ -358,7 +360,7 @@ Item {
text: "Conventions"
color: root.foreground
font.family: root.fontFamily
font.pixelSize: 13
font.pixelSize: Style.font.subtitle
font.bold: true
}
@@ -384,7 +386,7 @@ Item {
wrapMode: Text.WordWrap
color: Qt.darker(root.foreground, 1.4)
font.family: root.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
text: "Theme. qs.Commons.Style exposes cornerRadius (mirrored from Hyprland's decoration:rounding), focusBorderColor / focusFillColor / focusBorderWidth (derived from Color.accent), and hotFill (the shared hover/cursor tint). qs.Commons.Color exposes foreground / background / accent / urgent plus per-surface roles. Components default-bind to these so a caller with no overrides matches the active theme."
}
Text {
@@ -392,7 +394,7 @@ Item {
wrapMode: Text.WordWrap
color: Qt.darker(root.foreground, 1.4)
font.family: root.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
text: "Single cursor. Most reusable panel primitives expose hasCursor: bool and emit hovered(bool); a few (like PanelSlider) defer to their own focus handling. The panel root owns focusSection + selectedIndex; each element binds hasCursor: root.focusSection === 'X' && root.selectedIndex === N, and onHovered updates the same state. One highlight on screen, keyboard and mouse always agree. See plugins/bar/widgets/audioPanel.qml for the canonical recipe."
}
Text {
@@ -400,7 +402,7 @@ Item {
wrapMode: Text.WordWrap
color: Qt.darker(root.foreground, 1.4)
font.family: root.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
text: "Popups + editors. Dropdown / SearchableDropdown expose popupOpen plus open() / close() / toggle(); inline TextField uses activeFocus. While any of those own the keys, set PanelKeyCatcher.blocked so the panel's cursor model freezes and the active widget handles input."
}
Text {
@@ -408,7 +410,7 @@ Item {
wrapMode: Text.WordWrap
color: Qt.darker(root.foreground, 1.4)
font.family: root.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
text: "Adding a component. Drop the QML in Ui/, add a line to Ui/qmldir, then add a section here using the real type (not a copy). The gallery doubles as a smoke test — if a component starts misbehaving this is the fastest place to see it."
}
}
@@ -417,6 +419,205 @@ Item {
PanelSeparator { foreground: root.foreground }
// ---- Typography --------------------------------------------------
Column {
width: parent.width
spacing: 8
Text {
text: "Typography"
color: root.foreground
font.family: root.fontFamily
font.pixelSize: Style.font.subtitle
font.bold: true
}
Text {
text: "Style.font.* is the shell-wide type scale. Themes ship a single "
+ "[font] base-size in shell.toml (clamped 11..13); every token derives from "
+ "it via a fixed multiplier, so changing base-size rescales the whole shell "
+ "proportionally. Themes can also pin individual tokens (caption, heading, "
+ "display, etc.) for stylistic emphasis. The family follows the fontconfig "
+ "monospace alias \u2014 set it with `omarchy font set <name>`."
color: Qt.darker(root.foreground, 1.5)
font.family: root.fontFamily
font.pixelSize: Style.font.bodySmall
width: parent.width
wrapMode: Text.WordWrap
}
Rectangle {
width: parent.width
implicitHeight: typeCol.implicitHeight + 24
color: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.04)
radius: Style.cornerRadius
border.color: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.10)
border.width: 1
Column {
id: typeCol
anchors.left: parent.left
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: 14
anchors.rightMargin: 14
spacing: 10
Text {
text: "Scale"
color: Qt.darker(root.foreground, 1.4)
font.family: root.fontFamily
font.pixelSize: Style.font.caption
font.bold: true
}
// Every Style.font.* token rendered at its actual size. The
// model is data, not a Component graph, so this list stays
// in lockstep with the singleton without manual upkeep.
Repeater {
model: [
{ key: "caption", size: Style.font.caption, sample: "Section header text" },
{ key: "bodySmall", size: Style.font.bodySmall, sample: "Secondary / tooltip text" },
{ key: "body", size: Style.font.body, sample: "Default label and control text" },
{ key: "subtitle", size: Style.font.subtitle, sample: "Row title text" },
{ key: "title", size: Style.font.title, sample: "Card title text" },
{ key: "heading", size: Style.font.heading, sample: "Panel heading" },
{ key: "display", size: Style.font.display, sample: "Display text" },
{ key: "displayLarge", size: Style.font.displayLarge, sample: "Display large" },
{ key: "iconSmall", size: Style.font.iconSmall, sample: "\uf004 \uf005 \uf02d" },
{ key: "icon", size: Style.font.icon, sample: "\uf004 \uf005 \uf02d" },
{ key: "iconLarge", size: Style.font.iconLarge, sample: "\uf004 \uf005 \uf02d" }
]
delegate: Item {
required property var modelData
width: typeCol.width
implicitHeight: Math.max(metaCol.implicitHeight, sampleText.implicitHeight)
Column {
id: metaCol
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
width: 140
spacing: 1
Text {
text: "Style.font." + modelData.key
color: root.foreground
font.family: root.fontFamily
font.pixelSize: Style.font.bodySmall
}
Text {
text: modelData.size + " px"
color: Qt.darker(root.foreground, 1.5)
font.family: root.fontFamily
font.pixelSize: Style.font.caption
}
}
Text {
id: sampleText
anchors.left: metaCol.right
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: 16
text: modelData.sample
color: root.foreground
font.family: root.fontFamily
font.pixelSize: modelData.size
elide: Text.ElideRight
}
}
}
Rectangle {
width: parent.width
height: 1
color: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.10)
}
Text {
text: "Theme tokens"
color: Qt.darker(root.foreground, 1.4)
font.family: root.fontFamily
font.pixelSize: Style.font.caption
font.bold: true
}
Grid {
columns: 2
columnSpacing: 16
rowSpacing: 4
width: parent.width
Text {
text: "Style.font.family"
color: Qt.darker(root.foreground, 1.5)
font.family: root.fontFamily
font.pixelSize: Style.font.bodySmall
}
Text {
text: Style.font.family
color: root.foreground
font.family: root.fontFamily
font.pixelSize: Style.font.bodySmall
}
Text {
text: "Style.font.resolvedFamily"
color: Qt.darker(root.foreground, 1.5)
font.family: root.fontFamily
font.pixelSize: Style.font.bodySmall
}
Text {
text: Style.font.resolvedFamily
color: root.foreground
font.family: root.fontFamily
font.pixelSize: Style.font.bodySmall
}
Text {
text: "Style.font.baseSize"
color: Qt.darker(root.foreground, 1.5)
font.family: root.fontFamily
font.pixelSize: Style.font.bodySmall
}
Text {
text: Style.font.baseSize + " px"
color: root.foreground
font.family: root.fontFamily
font.pixelSize: Style.font.bodySmall
}
Text {
text: "Style.bar.sizeHorizontal"
color: Qt.darker(root.foreground, 1.5)
font.family: root.fontFamily
font.pixelSize: Style.font.bodySmall
}
Text {
text: Style.bar.sizeHorizontal + " px"
color: root.foreground
font.family: root.fontFamily
font.pixelSize: Style.font.bodySmall
}
Text {
text: "Style.bar.sizeVertical"
color: Qt.darker(root.foreground, 1.5)
font.family: root.fontFamily
font.pixelSize: Style.font.bodySmall
}
Text {
text: Style.bar.sizeVertical + " px"
color: root.foreground
font.family: root.fontFamily
font.pixelSize: Style.font.bodySmall
}
}
}
}
}
PanelSeparator { foreground: root.foreground }
// ---- PanelSectionHeader ------------------------------------------
Column {
width: parent.width
@@ -426,14 +627,14 @@ Item {
text: "PanelSectionHeader"
color: root.foreground
font.family: root.fontFamily
font.pixelSize: 13
font.pixelSize: Style.font.subtitle
font.bold: true
}
Text {
text: "Small-caps-style intro label for a section."
color: Qt.darker(root.foreground, 1.5)
font.family: root.fontFamily
font.pixelSize: 10
font.pixelSize: Style.font.caption
}
Rectangle {
@@ -467,7 +668,7 @@ Item {
text: "Playing"
foreground: root.foreground
fontFamily: root.fontFamily
fontSize: 11
fontSize: Style.font.bodySmall
}
}
}
@@ -482,14 +683,14 @@ Item {
text: "PanelSeparator"
color: root.foreground
font.family: root.fontFamily
font.pixelSize: 13
font.pixelSize: Style.font.subtitle
font.bold: true
}
Text {
text: "1px horizontal rule. Default 0.12 alpha on foreground; tweak via strength."
color: Qt.darker(root.foreground, 1.5)
font.family: root.fontFamily
font.pixelSize: 10
font.pixelSize: Style.font.caption
}
Rectangle {
@@ -525,14 +726,14 @@ Item {
text: "CursorSurface"
color: root.foreground
font.family: root.fontFamily
font.pixelSize: 13
font.pixelSize: Style.font.subtitle
font.bold: true
}
Text {
text: "Single highlight chrome for keyboard+mouse navigable items. Press h/l (anywhere in this window) to move the demo cursor. The middle item is also marked `current` to show how the two states layer."
color: Qt.darker(root.foreground, 1.5)
font.family: root.fontFamily
font.pixelSize: 10
font.pixelSize: Style.font.caption
width: parent.width
wrapMode: Text.WordWrap
}
@@ -582,7 +783,7 @@ Item {
text: modelData.label
color: root.foreground
font.family: root.fontFamily
font.pixelSize: 12
font.pixelSize: Style.font.body
elide: Text.ElideRight
}
@@ -610,14 +811,14 @@ Item {
text: "PillButton"
color: root.foreground
font.family: root.fontFamily
font.pixelSize: 13
font.pixelSize: Style.font.subtitle
font.bold: true
}
Text {
text: "Compact rounded button with optional icon, label, tooltip, and `active` highlight. Used inside panels for inline actions (Refresh, DNS pills, Bluetooth header)."
color: Qt.darker(root.foreground, 1.5)
font.family: root.fontFamily
font.pixelSize: 10
font.pixelSize: Style.font.caption
width: parent.width
wrapMode: Text.WordWrap
}
@@ -713,14 +914,14 @@ Item {
text: "CursorPill"
color: root.foreground
font.family: root.fontFamily
font.pixelSize: 13
font.pixelSize: Style.font.subtitle
font.bold: true
}
Text {
text: "PillButton with panel-cursor wiring. Bind hasCursor to your cursor state and onHovered to update it on mouse enter; clicks come from PillButton's clicked() signal. Use this for any \"pick one in a row\" UI (wifi DNS pills, bluetooth header actions). Click below or press h/l to walk the demo cursor."
color: Qt.darker(root.foreground, 1.5)
font.family: root.fontFamily
font.pixelSize: 10
font.pixelSize: Style.font.caption
width: parent.width
wrapMode: Text.WordWrap
}
@@ -773,14 +974,14 @@ Item {
text: "PanelActionButton"
color: root.foreground
font.family: root.fontFamily
font.pixelSize: 13
font.pixelSize: Style.font.subtitle
font.bold: true
}
Text {
text: "22×22 right-edge action button. Two flavors via hoverColor: default (foreground tint, e.g. confirm) and urgent (red tint, e.g. forget/unpair). Hover and click states are intrinsic; the row that owns it stays responsible for the cursor highlight."
color: Qt.darker(root.foreground, 1.5)
font.family: root.fontFamily
font.pixelSize: 10
font.pixelSize: Style.font.caption
width: parent.width
wrapMode: Text.WordWrap
}
@@ -847,7 +1048,7 @@ Item {
foreground: root.foreground
panelBackground: root.background
fontFamily: root.fontFamily
fontSize: 13
fontSize: Style.font.subtitle
size: 26
focusable: true
hasCursor: root.focusSection === "panel-action-button" && root.selectedIndex === 3
@@ -869,14 +1070,14 @@ Item {
text: "PanelToolTip"
color: root.foreground
font.family: root.fontFamily
font.pixelSize: 13
font.pixelSize: Style.font.subtitle
font.bold: true
}
Text {
text: "Hover the swatch below to see the styled tooltip. Use this whenever a custom button or row needs a hover hint."
color: Qt.darker(root.foreground, 1.5)
font.family: root.fontFamily
font.pixelSize: 10
font.pixelSize: Style.font.caption
width: parent.width
wrapMode: Text.WordWrap
}
@@ -901,7 +1102,7 @@ Item {
text: "hover me"
color: root.foreground
font.family: root.fontFamily
font.pixelSize: 12
font.pixelSize: Style.font.body
}
MouseArea {
@@ -935,14 +1136,14 @@ Item {
text: "Slider"
color: root.foreground
font.family: root.fontFamily
font.pixelSize: 13
font.pixelSize: Style.font.subtitle
font.bold: true
}
Text {
text: "Volume / progress slider. Drag, click anywhere on the track, or scroll the wheel."
color: Qt.darker(root.foreground, 1.5)
font.family: root.fontFamily
font.pixelSize: 10
font.pixelSize: Style.font.caption
width: parent.width
wrapMode: Text.WordWrap
}
@@ -981,7 +1182,7 @@ Item {
text: "󰕾"
color: root.foreground
font.family: root.fontFamily
font.pixelSize: 16
font.pixelSize: Style.font.heading
width: 22
horizontalAlignment: Text.AlignHCenter
anchors.verticalCenter: parent.verticalCenter
@@ -1000,7 +1201,7 @@ Item {
text: Math.round((demoSlider.dragging ? demoSlider.liveValue : sliderRow.demoVolume) * 100) + "%"
color: root.foreground
font.family: root.fontFamily
font.pixelSize: 12
font.pixelSize: Style.font.body
width: 38
horizontalAlignment: Text.AlignRight
anchors.verticalCenter: parent.verticalCenter
@@ -1018,14 +1219,14 @@ Item {
text: "ChoiceButton"
color: root.foreground
font.family: root.fontFamily
font.pixelSize: 13
font.pixelSize: Style.font.subtitle
font.bold: true
}
Text {
text: "A single button in a mutually-exclusive choice group. Selected styling uses the accent fill+border; focus styling uses the Style.focusBorderColor outline so keyboard nav can land on a non-selected option without it reading as the chosen one."
color: Qt.darker(root.foreground, 1.5)
font.family: root.fontFamily
font.pixelSize: 10
font.pixelSize: Style.font.caption
width: parent.width
wrapMode: Text.WordWrap
}
@@ -1081,14 +1282,14 @@ Item {
text: "TextField"
color: root.foreground
font.family: root.fontFamily
font.pixelSize: 13
font.pixelSize: Style.font.subtitle
font.bold: true
}
Text {
text: "Single-line input. Inherits Qt Quick Controls TextField, swaps in the kit's focus chrome and selection styling. Toggle `password: true` for masked entry."
color: Qt.darker(root.foreground, 1.5)
font.family: root.fontFamily
font.pixelSize: 10
font.pixelSize: Style.font.caption
width: parent.width
wrapMode: Text.WordWrap
}
@@ -1117,7 +1318,7 @@ Item {
foreground: root.foreground
accent: root.accent
font.family: root.fontFamily
font.pixelSize: 12
font.pixelSize: Style.font.body
hasCursor: !activeFocus && root.focusSection === "text-field" && root.selectedIndex === 0
onHoveredChanged: if (hovered) {
root.focusSection = "text-field"; root.selectedIndex = 0
@@ -1139,7 +1340,7 @@ Item {
foreground: root.foreground
accent: root.accent
font.family: root.fontFamily
font.pixelSize: 12
font.pixelSize: Style.font.body
hasCursor: !activeFocus && root.focusSection === "text-field" && root.selectedIndex === 1
onHoveredChanged: if (hovered) {
root.focusSection = "text-field"; root.selectedIndex = 1
@@ -1165,14 +1366,14 @@ Item {
text: "NumberField"
color: root.foreground
font.family: root.fontFamily
font.pixelSize: 13
font.pixelSize: Style.font.subtitle
font.bold: true
}
Text {
text: "Labeled spin box for integer settings. Up/down arrows step the value; the field accepts typed input. Pair with `from`/`to`/`stepSize` to constrain range."
color: Qt.darker(root.foreground, 1.5)
font.family: root.fontFamily
font.pixelSize: 10
font.pixelSize: Style.font.caption
width: parent.width
wrapMode: Text.WordWrap
}
@@ -1216,14 +1417,14 @@ Item {
text: "Toggle"
color: root.foreground
font.family: root.fontFamily
font.pixelSize: 13
font.pixelSize: Style.font.subtitle
font.bold: true
}
Text {
text: "Title + description + switch. Click anywhere on the row to flip; caller updates `checked` in response. Same focus tokens as ChoiceButton."
color: Qt.darker(root.foreground, 1.5)
font.family: root.fontFamily
font.pixelSize: 10
font.pixelSize: Style.font.caption
width: parent.width
wrapMode: Text.WordWrap
}
@@ -1277,14 +1478,14 @@ Item {
text: "Dropdown"
color: root.foreground
font.family: root.fontFamily
font.pixelSize: 13
font.pixelSize: Style.font.subtitle
font.bold: true
}
Text {
text: "Themed single-select with a panel-styled popup. Tab to focus the trigger, Enter/Space opens, j/k or arrows walk options, Enter selects. Options can be plain strings or { value, label } objects."
color: Qt.darker(root.foreground, 1.5)
font.family: root.fontFamily
font.pixelSize: 10
font.pixelSize: Style.font.caption
width: parent.width
wrapMode: Text.WordWrap
}
@@ -1333,14 +1534,14 @@ Item {
text: "SearchableDropdown"
color: root.foreground
font.family: root.fontFamily
font.pixelSize: 13
font.pixelSize: Style.font.subtitle
font.bold: true
}
Text {
text: "Dropdown with an embedded filter input. Type to narrow the list, Down to jump from the search to the first match, Enter to select. Use this for the bar settings \"+ Add widget\" picker and any other long-list selector."
color: Qt.darker(root.foreground, 1.5)
font.family: root.fontFamily
font.pixelSize: 10
font.pixelSize: Style.font.caption
width: parent.width
wrapMode: Text.WordWrap
}
@@ -1406,14 +1607,14 @@ Item {
text: "Composed example"
color: root.foreground
font.family: root.fontFamily
font.pixelSize: 13
font.pixelSize: Style.font.subtitle
font.bold: true
}
Text {
text: "A miniature wifi-style row built from CursorSurface + PanelActionButton + PanelToolTip. This is what new panel rows should look like — no inline Rectangle/Text/MouseArea reimplementation."
color: Qt.darker(root.foreground, 1.5)
font.family: root.fontFamily
font.pixelSize: 10
font.pixelSize: Style.font.caption
width: parent.width
wrapMode: Text.WordWrap
}
@@ -1472,7 +1673,7 @@ Item {
text: "󰖩"
color: root.foreground
font.family: root.fontFamily
font.pixelSize: 14
font.pixelSize: Style.font.title
}
PanelActionButton {
@@ -1499,7 +1700,7 @@ Item {
text: "HughesWiFi"
color: root.foreground
font.family: root.fontFamily
font.pixelSize: 12
font.pixelSize: Style.font.body
elide: Text.ElideRight
width: parent.width
}
@@ -1507,7 +1708,7 @@ Item {
text: "Connected"
color: root.foreground
font.family: root.fontFamily
font.pixelSize: 10
font.pixelSize: Style.font.caption
elide: Text.ElideRight
width: parent.width
}
@@ -1546,7 +1747,7 @@ Item {
text: "󰖩"
color: Qt.darker(root.foreground, 1.4)
font.family: root.fontFamily
font.pixelSize: 14
font.pixelSize: Style.font.title
}
Text {
@@ -1556,7 +1757,7 @@ Item {
text: "HughesATT"
color: root.foreground
font.family: root.fontFamily
font.pixelSize: 12
font.pixelSize: Style.font.body
}
}
}
shell/plugins/dev-gallery/manifest.json
+1 -1
View File
@@ -4,7 +4,7 @@
"name": "Dev gallery",
"version": "1.0.0",
"author": "Omarchy",
"description": "Visual reference for omarchy-shell common UI components. Summon with: omarchy-shell-ipc shell summon omarchy.dev-gallery '{}'",
"description": "Visual reference for omarchy-shell common UI components. Summon with: omarchy-shell shell summon omarchy.dev-gallery '{}' (or run: omarchy dev ui-preview).",
"kinds": ["panel"],
"activation": "on-demand",
"entryPoints": { "panel": "GalleryPanel.qml" }
shell/plugins/emoji-picker/EmojiPicker.qml
+4 -4
View File
@@ -249,7 +249,7 @@ Item {
color: root.foreground
opacity: root.filterText ? 1 : 0.58
font.family: root.fontFamily
font.pixelSize: 16
font.pixelSize: Style.font.heading
elide: Text.ElideRight
}
}
@@ -279,7 +279,7 @@ Item {
Text {
text: parent.emoji
font.family: root.fontFamily
font.pixelSize: 24
font.pixelSize: Style.font.display
anchors.centerIn: parent
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
@@ -308,7 +308,7 @@ Item {
color: root.accent
opacity: 0.8
font.family: root.fontFamily
font.pixelSize: 28
font.pixelSize: Style.font.displayLarge
horizontalAlignment: Text.AlignHCenter
width: parent.width
}
@@ -318,7 +318,7 @@ Item {
color: root.foreground
opacity: 0.7
font.family: root.fontFamily
font.pixelSize: 14
font.pixelSize: Style.font.title
horizontalAlignment: Text.AlignHCenter
width: parent.width
}
shell/plugins/image-picker/ImagePicker.qml
+2 -2
View File
@@ -642,7 +642,7 @@ Item {
color: root.foreground
style: Text.Outline
styleColor: root.withAlpha(root.background, 0.7)
font.pixelSize: 24
font.pixelSize: Style.font.display
font.weight: Font.DemiBold
horizontalAlignment: Text.AlignHCenter
elide: Text.ElideRight
@@ -659,7 +659,7 @@ Item {
opacity: 0.85
style: Text.Outline
styleColor: root.withAlpha(root.background, 0.7)
font.pixelSize: 14
font.pixelSize: Style.font.title
horizontalAlignment: Text.AlignHCenter
elide: Text.ElideRight
}
shell/plugins/menu/Menu.qml
+8 -8
View File
@@ -871,7 +871,7 @@ Item {
color: root.foreground
opacity: root.filterText ? 1 : 0.58
font.family: root.fontFamily
font.pixelSize: 16
font.pixelSize: Style.font.heading
elide: Text.ElideRight
}
@@ -946,7 +946,7 @@ Item {
color: index === root.selectedIndex ? root.accent : root.foreground
opacity: row.kind === "back" ? 0.7 : 1
font.family: root.fontFamily
font.pixelSize: 18
font.pixelSize: Style.font.iconLarge
width: 36
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
@@ -970,7 +970,7 @@ Item {
text: row.label
color: index === root.selectedIndex ? root.accent : root.foreground
font.family: root.fontFamily
font.pixelSize: 16
font.pixelSize: Style.font.heading
font.weight: Font.Medium
elide: Text.ElideRight
}
@@ -982,7 +982,7 @@ Item {
color: root.foreground
opacity: 0.52
font.family: root.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
elide: Text.ElideRight
}
}
@@ -1001,7 +1001,7 @@ Item {
color: root.foreground
opacity: 0.45
font.family: root.fontFamily
font.pixelSize: 12
font.pixelSize: Style.font.body
anchors.verticalCenter: parent.verticalCenter
}
@@ -1010,7 +1010,7 @@ Item {
color: index === root.selectedIndex ? root.accent : root.foreground
opacity: row.kind === "menu" || row.kind === "link" ? 0.36 : 0
font.family: root.fontFamily
font.pixelSize: 16
font.pixelSize: Style.font.heading
font.weight: Font.Normal
anchors.verticalCenter: parent.verticalCenter
}
@@ -1036,7 +1036,7 @@ Item {
color: root.accent
opacity: 0.8
font.family: root.fontFamily
font.pixelSize: 28
font.pixelSize: Style.font.displayLarge
horizontalAlignment: Text.AlignHCenter
width: 320
}
@@ -1046,7 +1046,7 @@ Item {
color: root.foreground
opacity: 0.7
font.family: root.fontFamily
font.pixelSize: 14
font.pixelSize: Style.font.title
horizontalAlignment: Text.AlignHCenter
width: 320
}
shell/plugins/notifications/components/NotificationCard.qml
+3 -3
View File
@@ -200,7 +200,7 @@ Rectangle {
text: root.glyph
color: Color.notifications.text
font.family: root.fontFamily
font.pixelSize: 18
font.pixelSize: Style.font.iconLarge
}
}
@@ -215,7 +215,7 @@ Rectangle {
text: root.summary
font.family: "Liberation Sans"
color: Color.notifications.text
font.pixelSize: 14
font.pixelSize: Style.font.title
font.bold: true
wrapMode: Text.WordWrap
elide: Text.ElideRight
@@ -230,7 +230,7 @@ Rectangle {
textFormat: Text.StyledText
font.family: "Liberation Sans"
color: root.bodyColor
font.pixelSize: 14
font.pixelSize: Style.font.title
wrapMode: Text.WordWrap
elide: Text.ElideRight
maximumLineCount: 3
shell/plugins/osd/Osd.qml
+4 -4
View File
@@ -109,8 +109,8 @@ Item {
anchors.verticalCenter: parent.verticalCenter
horizontalAlignment: Text.AlignHCenter
text: root.icon
font.family: "JetBrainsMono Nerd Font"
font.pixelSize: 27
font.family: Style.font.family
font.pixelSize: Style.font.displayLarge
color: Color.foreground
}
Rectangle {
@@ -129,9 +129,9 @@ Item {
width: root.hasProgress ? 41 : 190
anchors.verticalCenter: parent.verticalCenter
text: root.message
font.family: "JetBrainsMono Nerd Font"
font.family: Style.font.family
font.bold: true
font.pixelSize: 14
font.pixelSize: Style.font.title
color: Color.foreground
elide: Text.ElideRight
maximumLineCount: 1
shell/plugins/polkit/PolkitAgent.qml
+3 -3
View File
@@ -269,7 +269,7 @@ Item {
text: "\uf023"
color: root.errorFlash ? Color.urgent : root.accent
font.family: root.fontFamily
font.pixelSize: 20
font.pixelSize: Style.font.iconLarge
width: 26
height: root.fieldHeight
horizontalAlignment: Text.AlignHCenter
@@ -289,7 +289,7 @@ Item {
selectionColor: root.withAlpha(root.accent, 0.45)
selectedTextColor: root.foreground
font.family: root.fontFamily
font.pixelSize: 19
font.pixelSize: Style.font.iconLarge
echoMode: root.responseVisible ? TextInput.Normal : TextInput.Password
passwordCharacter: "\u2022"
color: root.errorFlash ? Color.urgent : root.foreground
@@ -314,7 +314,7 @@ Item {
color: root.errorFlash ? Color.urgent : root.foreground
opacity: root.errorFlash ? 1 : 0.36
font.family: root.fontFamily
font.pixelSize: 19
font.pixelSize: Style.font.iconLarge
elide: Text.ElideRight
visible: passwordInput.visible && passwordInput.text.length === 0
}
shell/plugins/settings/SettingsPanel.qml
+20 -20
View File
@@ -559,7 +559,7 @@ Item {
text: "Omarchy Bar Settings"
color: root.foreground
font.family: root.fontFamily
font.pixelSize: 16
font.pixelSize: Style.font.heading
font.bold: true
anchors.left: parent.left
anchors.leftMargin: 18
@@ -570,7 +570,7 @@ Item {
text: "~/.config/omarchy/shell.json"
color: Qt.darker(root.foreground, 1.8)
font.family: root.fontFamily
font.pixelSize: 10
font.pixelSize: Style.font.caption
anchors.right: parent.right
anchors.rightMargin: 18
anchors.verticalCenter: parent.verticalCenter
@@ -651,7 +651,7 @@ Item {
text: root.widgetName(root.widgetDialogEntry.id || "")
color: root.foreground
font.family: root.fontFamily
font.pixelSize: 14
font.pixelSize: Style.font.title
font.bold: true
}
@@ -659,7 +659,7 @@ Item {
text: root.widgetDescription(root.widgetDialogEntry.id || "")
color: Qt.darker(root.foreground, 1.4)
font.family: root.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
@@ -709,7 +709,7 @@ Item {
text: "Bar"
color: root.foreground
font.family: root.fontFamily
font.pixelSize: 18
font.pixelSize: Style.font.iconLarge
font.bold: true
}
@@ -717,7 +717,7 @@ Item {
text: "Drag widgets between the bar's three sections, drop in plugin widgets, and tweak per-widget options. Auto-saves to shell.json."
color: Qt.darker(root.foreground, 1.6)
font.family: root.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
@@ -819,7 +819,7 @@ Item {
text: "Position"
color: Qt.darker(root.foreground, 1.4)
font.family: root.fontFamily
font.pixelSize: 10
font.pixelSize: Style.font.caption
font.bold: true
}
@@ -869,7 +869,7 @@ Item {
text: section.sectionLabel
color: root.foreground
font.family: root.fontFamily
font.pixelSize: 13
font.pixelSize: Style.font.subtitle
font.bold: true
Layout.alignment: Qt.AlignVCenter
}
@@ -878,7 +878,7 @@ Item {
text: "· " + section.entries.length + (section.entries.length === 1 ? " widget" : " widgets")
color: Qt.darker(root.foreground, 1.5)
font.family: root.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
Layout.alignment: Qt.AlignVCenter
}
@@ -947,7 +947,7 @@ Item {
text: "Empty — add a widget"
color: Qt.darker(root.foreground, 1.5)
font.family: root.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
}
}
}
@@ -984,7 +984,7 @@ Item {
foreground: root.foreground
panelBackground: root.background
fontFamily: root.fontFamily
fontSize: 13
fontSize: Style.font.subtitle
size: 26
focusable: true
onClicked: root.moveEntry(card.sectionKey, card.entryIndex, card.entryIndex - 1)
@@ -995,7 +995,7 @@ Item {
foreground: root.foreground
panelBackground: root.background
fontFamily: root.fontFamily
fontSize: 13
fontSize: Style.font.subtitle
size: 26
focusable: true
onClicked: root.moveEntry(card.sectionKey, card.entryIndex, card.entryIndex + 1)
@@ -1006,7 +1006,7 @@ Item {
foreground: root.foreground
panelBackground: root.background
fontFamily: root.fontFamily
fontSize: 13
fontSize: Style.font.subtitle
size: 26
focusable: true
visible: card.hasSettings
@@ -1019,7 +1019,7 @@ Item {
hoverColor: root.urgent
panelBackground: root.background
fontFamily: root.fontFamily
fontSize: 13
fontSize: Style.font.subtitle
size: 26
focusable: true
onClicked: root.removeEntry(card.sectionKey, card.entryIndex)
@@ -1038,7 +1038,7 @@ Item {
text: card.displayName
color: root.foreground
font.family: root.fontFamily
font.pixelSize: 12
font.pixelSize: Style.font.body
font.bold: true
elide: Text.ElideRight
width: parent.width
@@ -1048,7 +1048,7 @@ Item {
text: card.description
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
}
@@ -1126,7 +1126,7 @@ Item {
foreground: root.foreground
accent: root.accent
font.family: root.fontFamily
font.pixelSize: 12
font.pixelSize: Style.font.body
onEditingFinished: if (fieldKey) calForm.fieldChanged(fieldKey, text)
}
@@ -1134,7 +1134,7 @@ Item {
text: "Horizontal format"
color: Qt.darker(root.foreground, 1.4)
font.family: root.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
}
CalendarField {
fieldKey: "format"
@@ -1145,7 +1145,7 @@ Item {
text: "Alternate format (click to swap)"
color: Qt.darker(root.foreground, 1.4)
font.family: root.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
}
CalendarField {
fieldKey: "formatAlt"
@@ -1156,7 +1156,7 @@ Item {
text: "Vertical format (left/right bars)"
color: Qt.darker(root.foreground, 1.4)
font.family: root.fontFamily
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
}
CalendarField {
fieldKey: "verticalFormat"
shell/plugins/settings/components/NDropdown.qml
+9 -8
View File
@@ -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