From 648bc54db19ee3b385233c6ea9ecd4a269ce2548 Mon Sep 17 00:00:00 2001 From: Ryan Hughes Date: Mon, 18 May 2026 11:33:19 -0400 Subject: [PATCH] Unify font sizes through qs.Commons.Style Themes now drive typography the same way they drive colors: one [font] base-size in shell.toml is the rem root, and every Style.font. (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 '. 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). --- bin/omarchy-dev-ui-preview | 2 +- default/themed/shell.toml.tpl | 30 +- docs/omarchy-shell.md | 74 +++++ shell/Commons/Style.qml | 167 +++++++++- shell/Ui/ChoiceButton.qml | 4 +- shell/Ui/Dropdown.qml | 10 +- shell/Ui/NumberField.qml | 6 +- shell/Ui/PanelActionButton.qml | 8 +- shell/Ui/PanelSectionHeader.qml | 7 +- shell/Ui/PanelToolTip.qml | 9 +- shell/Ui/PillButton.qml | 12 +- shell/Ui/SearchableDropdown.qml | 16 +- shell/Ui/TextField.qml | 2 + shell/Ui/Toggle.qml | 6 +- shell/Ui/WidgetButton.qml | 13 +- shell/plugins/background/Background.qml | 4 + shell/plugins/bar/Bar.qml | 35 +- shell/plugins/bar/widgets/activeWindow.qml | 3 +- shell/plugins/bar/widgets/audioPanel.qml | 39 +-- shell/plugins/bar/widgets/bluetoothPanel.qml | 13 +- shell/plugins/bar/widgets/calendar.qml | 7 +- shell/plugins/bar/widgets/keyboardLayout.qml | 3 +- shell/plugins/bar/widgets/lockKeys.qml | 3 +- shell/plugins/bar/widgets/media.qml | 14 +- shell/plugins/bar/widgets/monitorPanel.qml | 17 +- shell/plugins/bar/widgets/networkPanel.qml | 37 ++- .../bar/widgets/notificationCenter.qml | 20 +- shell/plugins/bar/widgets/systemStats.qml | 11 +- shell/plugins/bar/widgets/weatherFlyout.qml | 32 +- .../clipboard-picker/ClipboardPicker.qml | 10 +- shell/plugins/dev-gallery/GalleryPanel.qml | 307 +++++++++++++++--- shell/plugins/dev-gallery/manifest.json | 2 +- shell/plugins/emoji-picker/EmojiPicker.qml | 8 +- shell/plugins/image-picker/ImagePicker.qml | 4 +- shell/plugins/menu/Menu.qml | 16 +- .../components/NotificationCard.qml | 6 +- shell/plugins/osd/Osd.qml | 8 +- shell/plugins/polkit/PolkitAgent.qml | 6 +- shell/plugins/settings/SettingsPanel.qml | 40 +-- .../plugins/settings/components/NDropdown.qml | 17 +- shell/ui/settings/DynamicSettingsForm.qml | 19 +- 41 files changed, 762 insertions(+), 285 deletions(-) diff --git a/bin/omarchy-dev-ui-preview b/bin/omarchy-dev-ui-preview index eb948689..3c209d10 100755 --- a/bin/omarchy-dev-ui-preview +++ b/bin/omarchy-dev-ui-preview @@ -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 '{}' diff --git a/default/themed/shell.toml.tpl b/default/themed/shell.toml.tpl index 10ea286a..d57393aa 100644 --- a/default/themed/shell.toml.tpl +++ b/default/themed/shell.toml.tpl @@ -1,11 +1,37 @@ -# Omarchy shell colors. Defaults derive from colors.toml; themes can ship -# themes//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//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. +# 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 diff --git a/docs/omarchy-shell.md b/docs/omarchy-shell.md index 957e0f95..cec2e279 100644 --- a/docs/omarchy-shell.md +++ b/docs/omarchy-shell.md @@ -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//colors.toml` and surface roles + +sizing in `themes//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.` 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 `. + +### 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 diff --git a/shell/Commons/Style.qml b/shell/Commons/Style.qml index 2baa023b..e514bfb0 100644 --- a/shell/Commons/Style.qml +++ b/shell/Commons/Style.qml @@ -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.` 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 ` 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 ` 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() + } } diff --git a/shell/Ui/ChoiceButton.qml b/shell/Ui/ChoiceButton.qml index c006f01d..611f1b2e 100644 --- a/shell/Ui/ChoiceButton.qml +++ b/shell/Ui/ChoiceButton.qml @@ -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) diff --git a/shell/Ui/Dropdown.qml b/shell/Ui/Dropdown.qml index e679d77d..bfac99e2 100644 --- a/shell/Ui/Dropdown.qml +++ b/shell/Ui/Dropdown.qml @@ -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 } diff --git a/shell/Ui/NumberField.qml b/shell/Ui/NumberField.qml index e2ab8b1b..63b4c3ca 100644 --- a/shell/Ui/NumberField.qml +++ b/shell/Ui/NumberField.qml @@ -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 { diff --git a/shell/Ui/PanelActionButton.qml b/shell/Ui/PanelActionButton.qml index 333beed1..675046a2 100644 --- a/shell/Ui/PanelActionButton.qml +++ b/shell/Ui/PanelActionButton.qml @@ -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 diff --git a/shell/Ui/PanelSectionHeader.qml b/shell/Ui/PanelSectionHeader.qml index 2e23cd86..249842b7 100644 --- a/shell/Ui/PanelSectionHeader.qml +++ b/shell/Ui/PanelSectionHeader.qml @@ -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 diff --git a/shell/Ui/PanelToolTip.qml b/shell/Ui/PanelToolTip.qml index 318af851..7b561712 100644 --- a/shell/Ui/PanelToolTip.qml +++ b/shell/Ui/PanelToolTip.qml @@ -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 diff --git a/shell/Ui/PillButton.qml b/shell/Ui/PillButton.qml index cf5bdc49..e85a220f 100644 --- a/shell/Ui/PillButton.qml +++ b/shell/Ui/PillButton.qml @@ -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 diff --git a/shell/Ui/SearchableDropdown.qml b/shell/Ui/SearchableDropdown.qml index a61a9d30..e0036913 100644 --- a/shell/Ui/SearchableDropdown.qml +++ b/shell/Ui/SearchableDropdown.qml @@ -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 } diff --git a/shell/Ui/TextField.qml b/shell/Ui/TextField.qml index bc71cd3e..8a68710d 100644 --- a/shell/Ui/TextField.qml +++ b/shell/Ui/TextField.qml @@ -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 diff --git a/shell/Ui/Toggle.qml b/shell/Ui/Toggle.qml index e1ff9ba6..76a17cd7 100644 --- a/shell/Ui/Toggle.qml +++ b/shell/Ui/Toggle.qml @@ -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) diff --git a/shell/Ui/WidgetButton.qml b/shell/Ui/WidgetButton.qml index 8f59b8d6..0eb933f3 100644 --- a/shell/Ui/WidgetButton.qml +++ b/shell/Ui/WidgetButton.qml @@ -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 diff --git a/shell/plugins/background/Background.qml b/shell/plugins/background/Background.qml index b5e2db3d..efef5ec1 100644 --- a/shell/plugins/background/Background.qml +++ b/shell/plugins/background/Background.qml @@ -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 = "" diff --git a/shell/plugins/bar/Bar.qml b/shell/plugins/bar/Bar.qml index c6ce3630..21971725 100644 --- a/shell/plugins/bar/Bar.qml +++ b/shell/plugins/bar/Bar.qml @@ -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) } } diff --git a/shell/plugins/bar/widgets/activeWindow.qml b/shell/plugins/bar/widgets/activeWindow.qml index 1ae22766..963a34f2 100644 --- a/shell/plugins/bar/widgets/activeWindow.qml +++ b/shell/plugins/bar/widgets/activeWindow.qml @@ -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 } diff --git a/shell/plugins/bar/widgets/audioPanel.qml b/shell/plugins/bar/widgets/audioPanel.qml index 442aeeb3..61893aae 100644 --- a/shell/plugins/bar/widgets/audioPanel.qml +++ b/shell/plugins/bar/widgets/audioPanel.qml @@ -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 diff --git a/shell/plugins/bar/widgets/bluetoothPanel.qml b/shell/plugins/bar/widgets/bluetoothPanel.qml index 51986fae..b9b5fb78 100644 --- a/shell/plugins/bar/widgets/bluetoothPanel.qml +++ b/shell/plugins/bar/widgets/bluetoothPanel.qml @@ -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 } diff --git a/shell/plugins/bar/widgets/calendar.qml b/shell/plugins/bar/widgets/calendar.qml index c289a5a2..0cac7919 100644 --- a/shell/plugins/bar/widgets/calendar.qml +++ b/shell/plugins/bar/widgets/calendar.qml @@ -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 } } diff --git a/shell/plugins/bar/widgets/keyboardLayout.qml b/shell/plugins/bar/widgets/keyboardLayout.qml index a4f0519b..1ab15bc7 100644 --- a/shell/plugins/bar/widgets/keyboardLayout.qml +++ b/shell/plugins/bar/widgets/keyboardLayout.qml @@ -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() } diff --git a/shell/plugins/bar/widgets/lockKeys.qml b/shell/plugins/bar/widgets/lockKeys.qml index 191bfd45..71e803de 100644 --- a/shell/plugins/bar/widgets/lockKeys.qml +++ b/shell/plugins/bar/widgets/lockKeys.qml @@ -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 } } diff --git a/shell/plugins/bar/widgets/media.qml b/shell/plugins/bar/widgets/media.qml index 2d743df4..2742d720 100644 --- a/shell/plugins/bar/widgets/media.qml +++ b/shell/plugins/bar/widgets/media.qml @@ -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 !== "" diff --git a/shell/plugins/bar/widgets/monitorPanel.qml b/shell/plugins/bar/widgets/monitorPanel.qml index 851dad98..7c676232 100644 --- a/shell/plugins/bar/widgets/monitorPanel.qml +++ b/shell/plugins/bar/widgets/monitorPanel.qml @@ -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 { diff --git a/shell/plugins/bar/widgets/networkPanel.qml b/shell/plugins/bar/widgets/networkPanel.qml index 3c3a9762..e8fe13d6 100644 --- a/shell/plugins/bar/widgets/networkPanel.qml +++ b/shell/plugins/bar/widgets/networkPanel.qml @@ -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 diff --git a/shell/plugins/bar/widgets/notificationCenter.qml b/shell/plugins/bar/widgets/notificationCenter.qml index 2ce4c703..b21b0d69 100644 --- a/shell/plugins/bar/widgets/notificationCenter.qml +++ b/shell/plugins/bar/widgets/notificationCenter.qml @@ -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 } } } diff --git a/shell/plugins/bar/widgets/systemStats.qml b/shell/plugins/bar/widgets/systemStats.qml index 3cc99185..fdba597f 100644 --- a/shell/plugins/bar/widgets/systemStats.qml +++ b/shell/plugins/bar/widgets/systemStats.qml @@ -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 } } diff --git a/shell/plugins/bar/widgets/weatherFlyout.qml b/shell/plugins/bar/widgets/weatherFlyout.qml index 94c15197..4e31b6ce 100644 --- a/shell/plugins/bar/widgets/weatherFlyout.qml +++ b/shell/plugins/bar/widgets/weatherFlyout.qml @@ -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 } } } diff --git a/shell/plugins/clipboard-picker/ClipboardPicker.qml b/shell/plugins/clipboard-picker/ClipboardPicker.qml index d1382fe5..368179d3 100644 --- a/shell/plugins/clipboard-picker/ClipboardPicker.qml +++ b/shell/plugins/clipboard-picker/ClipboardPicker.qml @@ -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 } diff --git a/shell/plugins/dev-gallery/GalleryPanel.qml b/shell/plugins/dev-gallery/GalleryPanel.qml index 64fe53e5..627531f2 100644 --- a/shell/plugins/dev-gallery/GalleryPanel.qml +++ b/shell/plugins/dev-gallery/GalleryPanel.qml @@ -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 `." + 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 } } } diff --git a/shell/plugins/dev-gallery/manifest.json b/shell/plugins/dev-gallery/manifest.json index 0f2fe26a..4a37137b 100644 --- a/shell/plugins/dev-gallery/manifest.json +++ b/shell/plugins/dev-gallery/manifest.json @@ -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" } diff --git a/shell/plugins/emoji-picker/EmojiPicker.qml b/shell/plugins/emoji-picker/EmojiPicker.qml index 0f38c648..6a959679 100644 --- a/shell/plugins/emoji-picker/EmojiPicker.qml +++ b/shell/plugins/emoji-picker/EmojiPicker.qml @@ -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 } diff --git a/shell/plugins/image-picker/ImagePicker.qml b/shell/plugins/image-picker/ImagePicker.qml index e1ce47d0..19c03ab5 100644 --- a/shell/plugins/image-picker/ImagePicker.qml +++ b/shell/plugins/image-picker/ImagePicker.qml @@ -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 } diff --git a/shell/plugins/menu/Menu.qml b/shell/plugins/menu/Menu.qml index 3c0c38dc..ffcb9cef 100644 --- a/shell/plugins/menu/Menu.qml +++ b/shell/plugins/menu/Menu.qml @@ -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 } diff --git a/shell/plugins/notifications/components/NotificationCard.qml b/shell/plugins/notifications/components/NotificationCard.qml index 38fe679e..b1d9ac82 100644 --- a/shell/plugins/notifications/components/NotificationCard.qml +++ b/shell/plugins/notifications/components/NotificationCard.qml @@ -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 diff --git a/shell/plugins/osd/Osd.qml b/shell/plugins/osd/Osd.qml index 48449dda..639df146 100644 --- a/shell/plugins/osd/Osd.qml +++ b/shell/plugins/osd/Osd.qml @@ -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 diff --git a/shell/plugins/polkit/PolkitAgent.qml b/shell/plugins/polkit/PolkitAgent.qml index 9c2e0db2..fc89891b 100644 --- a/shell/plugins/polkit/PolkitAgent.qml +++ b/shell/plugins/polkit/PolkitAgent.qml @@ -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 } diff --git a/shell/plugins/settings/SettingsPanel.qml b/shell/plugins/settings/SettingsPanel.qml index d90f8110..c329dd35 100644 --- a/shell/plugins/settings/SettingsPanel.qml +++ b/shell/plugins/settings/SettingsPanel.qml @@ -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" diff --git a/shell/plugins/settings/components/NDropdown.qml b/shell/plugins/settings/components/NDropdown.qml index 71883d05..6d8c3f0a 100644 --- a/shell/plugins/settings/components/NDropdown.qml +++ b/shell/plugins/settings/components/NDropdown.qml @@ -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 diff --git a/shell/ui/settings/DynamicSettingsForm.qml b/shell/ui/settings/DynamicSettingsForm.qml index 658fd8a1..f77cbcb6 100644 --- a/shell/ui/settings/DynamicSettingsForm.qml +++ b/shell/ui/settings/DynamicSettingsForm.qml @@ -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 } }