arthur/arthur-os
1
0
Fork 0
mirror of https://github.com/arthur-pbty/arthur-os.git synced 2026-08-01 20:28:16 +02:00
Code Issues Packages Projects Releases 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
bin/omarchy-dev-ui-preview
+1 -1
View File
@@ -2,4 +2,4 @@
# omarchy:summary=Open the omarchy-shell dev gallery (qs.Ui kit preview)
omarchy-shell-ipc shell summon omarchy.dev-gallery '{}'
omarchy-shell shell summon omarchy.dev-gallery '{}'
default/themed/shell.toml.tpl
+28 -2
View File
@@ -1,11 +1,37 @@
# Omarchy shell colors. Defaults derive from colors.toml; themes can ship
# themes/<name>/shell.toml to override individual keys.
# Omarchy shell surfaces. Colors derive from colors.toml; sizes and the
# typographic scale come from the keys below. Themes can ship
# themes/<name>/shell.toml to override any individual key.
[bar]
background = "{{ background }}"
text = "{{ foreground }}"
# Modules calling attention to themselves (recording, voxtype, alerts, updates)
active = "{{ color1 }}"
# Cross-axis size in px. size-horizontal is the height of top/bottom bars;
# size-vertical is the width of left/right bars.
size-horizontal = 26
size-vertical = 28
[font]
# base-size is the rem root for the type scale. Every Style.font.<token>
# derives from it (e.g. body = base, subtitle ≈ base * 1.083,
# heading ≈ base * 1.333). Clamped 11..13 by the shell — row heights are
# fixed until we ship matching spacing tokens, so growth would clip.
base-size = 12
# Per-token overrides, in px. Uncomment any to pin a specific size without
# affecting the rest of the scale. Useful for stylistic emphasis (a
# minimalist theme that wants a bigger heading without scaling everything).
# caption = 10
# body-small = 11
# body = 12
# subtitle = 13
# title = 14
# heading = 16
# display = 24
# display-large = 28
# icon-small = 11
# icon = 14
# icon-large = 18
[popups]
# Shared by every bar flyout. Body text inside flyouts is not separately
docs/omarchy-shell.md
+74
View File
@@ -99,6 +99,80 @@ Rules:
user `shell.json` exists, defaults are used verbatim. Once the user
customizes, `shell.json` is canonical — there is no deep-merge.
## Theme tokens
Themes ship colors in `themes/<name>/colors.toml` and surface roles +
sizing in `themes/<name>/shell.toml`. Defaults are generated from
`default/themed/shell.toml.tpl`; a theme may also drop a hand-written
`shell.toml` next to its `colors.toml` to override individual keys.
The shell exposes these tokens to QML via two singletons in
`qs.Commons`:
- `Color` — palette (`foreground`, `background`, `accent`, `urgent`)
and per-surface roles (`Color.bar.*`, `Color.popups.*`,
`Color.notifications.*`, `Color.menu.*`, `Color.imagePicker.*`).
- `Style` — structural tokens (`cornerRadius`, focus affordances),
the type scale (`Style.font.*`), and bar dimensions
(`Style.bar.sizeHorizontal` / `Style.bar.sizeVertical`).
### Typography
`[font] base-size` is the rem root for the scale. Every
`Style.font.<token>` derives from it via a fixed multiplier, so
bumping `base-size` rescales the whole shell proportionally:
| Token | Multiplier | Default |
|-----------------------|------------|---------|
| `Style.font.caption` | 0.833 | 10 |
| `Style.font.bodySmall` | 0.917 | 11 |
| `Style.font.body` | 1.0 | 12 |
| `Style.font.subtitle` | 1.083 | 13 |
| `Style.font.title` | 1.167 | 14 |
| `Style.font.heading` | 1.333 | 16 |
| `Style.font.display` | 2.0 | 24 |
| `Style.font.displayLarge` | 2.333 | 28 |
| `Style.font.iconSmall` | bodySmall | 11 |
| `Style.font.icon` | title | 14 |
| `Style.font.iconLarge` | 1.5 | 18 |
A theme can either scale everything by tweaking `base-size`:
```toml
[font]
base-size = 13 # roomier
```
…or pin individual tokens for stylistic emphasis without affecting
the rest of the scale:
```toml
[font]
base-size = 12
heading = 20
display-large = 36
```
Recognized override keys: `base-size`, `caption`, `body-small`,
`body`, `subtitle`, `title`, `heading`, `display`, `display-large`,
`icon-small`, `icon`, `icon-large`.
`base-size` is clamped to **11..13** because row heights and the bar
cross-axis size are fixed; per-token overrides aren't clamped. The
shell font family is the fontconfig `monospace` alias — themes don't
set it, the user does via `omarchy font set <name>`.
### Bar size
`[bar] size-horizontal` / `size-vertical` set the cross-axis dimension
of top/bottom and left/right bars respectively (in px):
```toml
[bar]
size-horizontal = 26 # top/bottom bar height
size-vertical = 28 # left/right bar width
```
## Custom bar modules
If a full plugin is overkill, declare a one-off module inline in
shell/Commons/Style.qml
+158 -9
View File
@@ -4,9 +4,9 @@ import Quickshell
import Quickshell.Io
// Shared structural style tokens for the shell. Color is the palette
// singleton; Style holds the *shape* and *focus-affordance* tokens that
// every panel surface and qs.Ui component should bind to so they stay
// in sync as the user toggles round/sharp corners or as themes change.
// singleton; Style holds everything else themes can influence — corner
// rounding, focus affordances, typography scale, and bar dimensions —
// so panels and qs.Ui components have a single source of truth.
//
// `cornerRadius` mirrors Hyprland's `decoration:rounding`. Themes ship
// their own rounding via theme/hyprland.lua; the user toggle via
@@ -15,9 +15,11 @@ import Quickshell.Io
// up the change here by re-running `hyprctl getoption` whenever either
// of those input files changes.
//
// Single source of truth lives in Hyprland; the shell follows. That
// means a theme that ships `rounding = 10` gives us 10px panels by
// default, and the round/sharp user toggle still works on top of it.
// Typography and bar size come from `theme/shell.toml`. `[font] base-size`
// is the rem root; every `Style.font.<token>` derives from it via the
// scale multipliers below unless the theme pins that specific token.
// `[bar] size-horizontal` / `size-vertical` set the cross-axis dimension
// for top/bottom and left/right bars respectively.
QtObject {
id: root
@@ -36,6 +38,69 @@ QtObject {
readonly property color hotFill: Qt.rgba(Color.foreground.r, Color.foreground.g, Color.foreground.b, 0.08)
readonly property color selectedFill: Qt.rgba(Color.foreground.r, Color.foreground.g, Color.foreground.b, 0.18)
// ---------------------------------------------------------- typography
//
// `fontFamily` defaults to "monospace" so the bar and every qs.Ui
// component follows the fontconfig alias `omarchy-font-set` writes.
// Themes can override per-token via [font] in shell.toml, but the
// family stays system-wide.
property string fontFamily: "monospace"
// The concrete family `monospace` resolves to right now, e.g.
// "JetBrainsMono Nerd Font". Bind `font.family` to `fontFamily` (so the
// alias path keeps working when the user runs `omarchy font set`), but
// read `resolvedFontFamily` when you want to *display* what's drawing.
property string resolvedFontFamily: "monospace"
// Clamped 11..13 by loadShell — bar height and row heights are fixed
// until we ship matching spacing tokens, so unbounded growth clips.
property int fontBaseSize: 12
// Parsed maps populated by loadShell. Keep them as plain dicts so
// reassigning the whole property fires reactive bindings.
property var fontOverrides: ({})
property var barOverrides: ({})
function fontPx(mult) {
return Math.max(1, Math.round(fontBaseSize * mult))
}
function fontToken(key, fallback) {
var v = fontOverrides[key]
var n = Number(v)
return (isFinite(n) && n > 0) ? Math.round(n) : fallback
}
function barToken(key, fallback) {
var v = barOverrides[key]
var n = Number(v)
return (isFinite(n) && n > 0) ? Math.round(n) : fallback
}
readonly property QtObject font: QtObject {
readonly property string family: root.fontFamily
readonly property string resolvedFamily: root.resolvedFontFamily
readonly property int baseSize: root.fontBaseSize
readonly property int caption: root.fontToken("caption", root.fontPx(0.833)) // 10
readonly property int bodySmall: root.fontToken("body-small", root.fontPx(0.917)) // 11
readonly property int body: root.fontToken("body", root.fontPx(1.0)) // 12
readonly property int subtitle: root.fontToken("subtitle", root.fontPx(1.083)) // 13
readonly property int title: root.fontToken("title", root.fontPx(1.167)) // 14
readonly property int heading: root.fontToken("heading", root.fontPx(1.333)) // 16
readonly property int display: root.fontToken("display", root.fontPx(2.0)) // 24
readonly property int displayLarge: root.fontToken("display-large", root.fontPx(2.333)) // 28
readonly property int iconSmall: root.fontToken("icon-small", bodySmall)
readonly property int icon: root.fontToken("icon", title)
readonly property int iconLarge: root.fontToken("icon-large", root.fontPx(1.5)) // 18
}
readonly property QtObject bar: QtObject {
readonly property int sizeHorizontal: root.barToken("size-horizontal", 26)
readonly property int sizeVertical: root.barToken("size-vertical", 28)
}
function refresh() {
hyprctlProc.running = true
}
@@ -50,6 +115,43 @@ QtObject {
}
}
// Parse [font] base-size + per-token overrides and [bar] size-* keys
// out of shell.toml. Color.qml owns the quoted-string side of the same
// file; we only care about the unquoted integer values here.
function loadShell(raw) {
var fontOut = {}
var barOut = {}
var nextBase = 12
var text = String(raw || "")
if (text) {
var lines = text.split("\n")
var section = ""
for (var i = 0; i < lines.length; i++) {
var line = lines[i].replace(/^\s+|\s+$/g, "")
if (!line || line.charAt(0) === "#") continue
var sectionMatch = line.match(/^\[([A-Za-z0-9_-]+)\]\s*(#.*)?$/)
if (sectionMatch) { section = sectionMatch[1]; continue }
var kv = line.match(/^([A-Za-z0-9_-]+)\s*=\s*(-?\d+)\s*(#.*)?$/)
if (!kv) continue
var key = kv[1]
var val = parseInt(kv[2], 10)
if (section === "font") {
if (key === "base-size") nextBase = val
else fontOut[key] = val
} else if (section === "bar" && (key === "size-horizontal" || key === "size-vertical")) {
barOut[key] = val
}
}
}
// Clamp the rem root. Per-token overrides aren't clamped — a theme
// that wants display-large = 64 should be allowed to ship it.
if (nextBase < 11) nextBase = 11
if (nextBase > 13) nextBase = 13
fontBaseSize = nextBase
fontOverrides = fontOut
barOverrides = barOut
}
property Process hyprctlProc: Process {
id: hyprctlProc
command: ["hyprctl", "-j", "getoption", "decoration:rounding"]
@@ -59,6 +161,34 @@ QtObject {
}
}
// Resolve the fontconfig alias to a concrete family name. `omarchy font
// set <name>` rewrites ~/.config/fontconfig/fonts.conf and restarts the
// shell, but rerun on file change anyway so manual edits propagate too.
function resolveFontFamily() {
fcMatchProc.running = true
}
property Process fcMatchProc: Process {
id: fcMatchProc
command: ["fc-match", "-f", "%{family[0]}", "monospace"]
stdout: StdioCollector {
waitForEnd: true
onStreamFinished: {
var name = String(text || "").trim()
if (name.length > 0) root.resolvedFontFamily = name
}
}
}
property FileView fontconfigFile: FileView {
path: Quickshell.env("HOME") + "/.config/fontconfig/fonts.conf"
watchChanges: true
printErrors: false
onFileChanged: root.resolveFontFamily()
onLoaded: root.resolveFontFamily()
onLoadFailed: root.resolveFontFamily()
}
// Re-poll Hyprland a beat after either input file changes. Hyprland's
// auto-reload runs asynchronously when its sourced .lua files change,
// so racing it with an immediate hyprctl gives the old value. 200ms is
@@ -71,12 +201,18 @@ QtObject {
}
// The theme name flips whenever `omarchy-theme-set` swaps the theme/
// symlink; that's when theme/hyprland.lua's `rounding` value changes.
// symlink; that's when theme/hyprland.lua's `rounding` value changes
// and the new theme/shell.toml drops into place. Force a reload of
// shell.toml here so we don't wait on the inotify watch — Color.qml
// uses the same tripwire for the same reason.
property FileView themeNameFile: FileView {
path: Quickshell.env("HOME") + "/.config/omarchy/current/theme.name"
watchChanges: true
printErrors: false
onFileChanged: refreshTimer.restart()
onFileChanged: {
refreshTimer.restart()
shellTomlFile.reload()
}
}
// `omarchy style corners <round|sharp>` creates or removes this flag file.
@@ -91,5 +227,18 @@ QtObject {
onLoadFailed: refreshTimer.restart()
}
Component.onCompleted: refresh()
property FileView shellTomlFile: FileView {
id: shellTomlFile
path: Quickshell.env("HOME") + "/.config/omarchy/current/theme/shell.toml"
watchChanges: true
printErrors: false
onLoaded: root.loadShell(text())
onLoadFailed: root.loadShell("")
onFileChanged: reload()
}
Component.onCompleted: {
refresh()
resolveFontFamily()
}
}
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
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
shell/ui/settings/DynamicSettingsForm.qml
+10 -9
View File
@@ -1,6 +1,7 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import qs.Commons
import qs.Ui
// Generic schema-driven settings form. The host panel passes:
@@ -16,8 +17,8 @@ Column {
property var schema: []
property var entry: ({})
property color foregroundColor: "#cacccc"
property string fontFamilyName: "JetBrainsMono Nerd Font"
property color foregroundColor: Color.foreground
property string fontFamilyName: Style.font.family
spacing: 10
width: parent ? parent.width : 0
@@ -45,7 +46,7 @@ Column {
text: modelData && modelData.label ? modelData.label : (modelData && modelData.key ? modelData.key : "")
color: Qt.darker(root.foregroundColor, 1.3)
font.family: root.fontFamilyName
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
font.bold: true
visible: text !== ""
}
@@ -55,7 +56,7 @@ Column {
text: modelData ? (modelData.description || "") : ""
color: Qt.darker(root.foregroundColor, 1.6)
font.family: root.fontFamilyName
font.pixelSize: 10
font.pixelSize: Style.font.caption
wrapMode: Text.WordWrap
width: parent.width
}
@@ -89,7 +90,7 @@ Column {
width: parent.width
foreground: root.foregroundColor
font.family: root.fontFamilyName
font.pixelSize: 12
font.pixelSize: Style.font.body
text: root.currentValue(field) === undefined ? "" : String(root.currentValue(field))
onEditingFinished: if (fieldKey) root.fieldChanged(fieldKey, text)
}
@@ -101,7 +102,7 @@ Column {
property string fieldKey: ""
property var field: ({})
font.family: root.fontFamilyName
font.pixelSize: 12
font.pixelSize: Style.font.body
text: field && field.label ? "" : ""
checked: !!root.currentValue(field)
onToggled: if (fieldKey) root.fieldChanged(fieldKey, checked)
@@ -115,7 +116,7 @@ Column {
property var field: ({})
width: parent.width
font.family: root.fontFamilyName
font.pixelSize: 12
font.pixelSize: Style.font.body
model: field && field.options ? field.options : []
currentIndex: {
var v = root.currentValue(field)
@@ -172,7 +173,7 @@ Column {
text: slider.value.toFixed(2)
color: root.foregroundColor
font.family: root.fontFamilyName
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
anchors.verticalCenter: parent.verticalCenter
}
}
@@ -185,6 +186,6 @@ Column {
text: "No settings."
color: Qt.darker(root.foregroundColor, 1.5)
font.family: root.fontFamilyName
font.pixelSize: 11
font.pixelSize: Style.font.bodySmall
}
}