From 15f461c1df3ae50fb40dc6eda7ab6677a66491cf Mon Sep 17 00:00:00 2001 From: Ryan Hughes Date: Tue, 19 May 2026 15:16:08 -0400 Subject: [PATCH] Add tooltip color tokens --- default/themed/shell.toml.tpl | 6 ++++++ docs/omarchy-shell.md | 3 ++- shell/Commons/Color.qml | 10 ++++++++-- shell/Ui/Button.qml | 11 +++++++---- shell/Ui/PanelActionButton.qml | 3 --- shell/Ui/PanelToolTip.qml | 14 ++++++++------ shell/plugins/bar/Bar.qml | 6 +++--- shell/plugins/bar/widgets/bluetoothPanel.qml | 3 --- shell/plugins/bar/widgets/monitorPanel.qml | 2 -- shell/plugins/bar/widgets/networkPanel.qml | 10 ---------- shell/plugins/bar/widgets/powerPanel.qml | 2 -- shell/plugins/dev-gallery/GalleryPanel.qml | 6 ------ shell/plugins/settings/SettingsPanel.qml | 4 ---- 13 files changed, 34 insertions(+), 46 deletions(-) diff --git a/default/themed/shell.toml.tpl b/default/themed/shell.toml.tpl index 9045f7d0..8569cf6a 100644 --- a/default/themed/shell.toml.tpl +++ b/default/themed/shell.toml.tpl @@ -75,6 +75,12 @@ base-size = 12 background = "{{ background }}" border = "{{ accent }}" +[tooltip] +# Hover tooltips across the bar, panels, and buttons. +background = "{{ background }}" +text = "{{ foreground }}" +border = "{{ foreground }}" + [notifications] background = "{{ background }}" text = "{{ foreground }}" diff --git a/docs/omarchy-shell.md b/docs/omarchy-shell.md index 3849921c..d052d92f 100644 --- a/docs/omarchy-shell.md +++ b/docs/omarchy-shell.md @@ -115,7 +115,8 @@ The shell exposes these tokens to QML via two singletons in - `Color` — palette (`foreground`, `background`, `accent`, `urgent`) and per-surface roles (`Color.bar.*`, `Color.popups.*`, - `Color.notifications.*`, `Color.menu.*`, `Color.imagePicker.*`). + `Color.tooltip.*`, `Color.notifications.*`, `Color.menu.*`, + `Color.imagePicker.*`). - `Style` — structural tokens (`cornerRadius`), shared interactive state tokens/helpers, spacing (`Style.spacing.*` / `Style.space(px)`), the type scale (`Style.font.*`), and bar dimensions diff --git a/shell/Commons/Color.qml b/shell/Commons/Color.qml index be83847f..50c209e8 100644 --- a/shell/Commons/Color.qml +++ b/shell/Commons/Color.qml @@ -5,8 +5,9 @@ import Quickshell.Io // Single source of truth for shell color surfaces. Top-level tokens // (foreground/background/accent/urgent) come from the theme's colors.toml. -// Per-surface roles (Color.bar.*, Color.popups.*, Color.notifications.*, -// Color.menu.*, Color.imagePicker.*) come from shell.toml, which is generated +// Per-surface roles (Color.bar.*, Color.popups.*, Color.tooltip.*, +// Color.notifications.*, Color.menu.*, Color.imagePicker.*) come from +// shell.toml, which is generated // per theme from default/themed/shell.toml.tpl (or shipped directly by a // theme to override). Surfaces that don't appear in shell.toml fall back to // the foundational palette, so themes can ship partial overrides. @@ -40,6 +41,11 @@ QtObject { property color background: root.pick("popups.background", root.background) property color border: root.pick("popups.border", root.pick("notifications.border", root.accent)) } + readonly property QtObject tooltip: QtObject { + property color background: root.pick("tooltip.background", root.background) + property color text: root.pick("tooltip.text", root.foreground) + property color border: root.pick("tooltip.border", root.foreground) + } readonly property QtObject notifications: QtObject { property color background: root.pick("notifications.background", root.background) property color text: root.pick("notifications.text", root.foreground) diff --git a/shell/Ui/Button.qml b/shell/Ui/Button.qml index 29f2ee5f..415d1671 100644 --- a/shell/Ui/Button.qml +++ b/shell/Ui/Button.qml @@ -46,9 +46,12 @@ Rectangle { property real verticalPadding: Style.spacing.controlPaddingY property bool leftAlign: false - // Tooltip palette. Auto-rendered if tooltipText is set. - property color tooltipBackground: Color.background - property color tooltipForeground: foreground + // Tooltip palette. Auto-rendered if tooltipText is set. Defaults pull + // from [tooltip] in shell.toml; override per-instance only when a button + // intentionally wants a tooltip that diverges from the theme. + property color tooltipBackground: Color.tooltip.background + property color tooltipForeground: Color.tooltip.text + property color tooltipBorder: Color.tooltip.border signal clicked() signal rightClicked() @@ -102,7 +105,7 @@ Rectangle { padding: 0 background: Rectangle { color: root.tooltipBackground - border.color: root.tooltipForeground + border.color: root.tooltipBorder border.width: Math.max(1, Style.normalBorderWidth) radius: 0 opacity: 0.97 diff --git a/shell/Ui/PanelActionButton.qml b/shell/Ui/PanelActionButton.qml index c4fb8410..5871b79d 100644 --- a/shell/Ui/PanelActionButton.qml +++ b/shell/Ui/PanelActionButton.qml @@ -31,7 +31,6 @@ Rectangle { property string tooltipText: "" property color foreground: Color.foreground property color hoverColor: foreground - property color panelBackground: Color.background property string fontFamily: Style.font.family property real fontSize: Style.font.icon property real size: Math.max(Style.space(22), fontSize + Style.spacing.sm * 2) @@ -99,8 +98,6 @@ Rectangle { PanelToolTip { visible: root.tooltipText !== "" && mouse.containsMouse text: root.tooltipText - panelForeground: root.foreground - panelBackground: root.panelBackground fontFamily: root.fontFamily } } diff --git a/shell/Ui/PanelToolTip.qml b/shell/Ui/PanelToolTip.qml index ac14ef72..84d7312b 100644 --- a/shell/Ui/PanelToolTip.qml +++ b/shell/Ui/PanelToolTip.qml @@ -7,18 +7,20 @@ import qs.Commons // PanelToolTip { // visible: mouse.containsMouse // text: "Forget network" -// panelForeground: bar.foreground -// panelBackground: bar.background -// fontFamily: bar.fontFamily // } // +// Defaults pull from [tooltip] in shell.toml via Color.tooltip.*. Override +// the panel* properties per-instance only when you need a tooltip that +// intentionally diverges from the theme. +// // Property names are prefixed `panel*` to avoid clashing with ToolTip's // built-in `background`/`font` properties. ToolTip { id: root - property color panelForeground: Color.foreground - property color panelBackground: Color.background + property color panelForeground: Color.tooltip.text + property color panelBackground: Color.tooltip.background + property color panelBorder: Color.tooltip.border property string fontFamily: Style.font.family property real fontSize: Style.font.bodySmall @@ -27,7 +29,7 @@ ToolTip { background: Rectangle { color: root.panelBackground - border.color: Style.normalBorderFor(root.panelForeground, Color.accent) + border.color: root.panelBorder border.width: Style.normalBorderWidth radius: Style.cornerRadius opacity: 0.97 diff --git a/shell/plugins/bar/Bar.qml b/shell/plugins/bar/Bar.qml index 5628924d..f9032240 100644 --- a/shell/plugins/bar/Bar.qml +++ b/shell/plugins/bar/Bar.qml @@ -683,8 +683,8 @@ Item { id: tooltipBubble implicitWidth: tooltipLabel.implicitWidth + 20 implicitHeight: tooltipLabel.implicitHeight + 14 - color: root.background - border.color: root.foreground + color: Color.tooltip.background + border.color: Color.tooltip.border border.width: 1 radius: Style.cornerRadius opacity: 0.97 @@ -693,7 +693,7 @@ Item { id: tooltipLabel anchors.centerIn: parent text: root.tooltipText - color: root.foreground + color: Color.tooltip.text font.family: root.fontFamily font.pixelSize: Style.font.body horizontalAlignment: Text.AlignHCenter diff --git a/shell/plugins/bar/widgets/bluetoothPanel.qml b/shell/plugins/bar/widgets/bluetoothPanel.qml index 5baf51ae..cbff342a 100644 --- a/shell/plugins/bar/widgets/bluetoothPanel.qml +++ b/shell/plugins/bar/widgets/bluetoothPanel.qml @@ -516,8 +516,6 @@ Item { property bool pillEnabled: true signal activated() - tooltipBackground: root.bar.background - tooltipForeground: root.bar.foreground foreground: root.bar.foreground fontFamily: root.bar.fontFamily horizontalPadding: Style.spacing.md @@ -685,7 +683,6 @@ Item { tooltipText: row.isConnected ? "Disconnect" : "Forget" foreground: root.bar.foreground hoverColor: root.bar.urgent - panelBackground: root.bar.background fontFamily: root.bar.fontFamily onClicked: { if (!row.dev) return diff --git a/shell/plugins/bar/widgets/monitorPanel.qml b/shell/plugins/bar/widgets/monitorPanel.qml index c551be23..13ba8ff5 100644 --- a/shell/plugins/bar/widgets/monitorPanel.qml +++ b/shell/plugins/bar/widgets/monitorPanel.qml @@ -500,8 +500,6 @@ Item { text: modelData + "x" foreground: root.bar.foreground background: "transparent" - tooltipBackground: root.bar.background - tooltipForeground: root.bar.foreground fontFamily: root.bar.fontFamily fontSize: Style.font.bodySmall horizontalPadding: 0 diff --git a/shell/plugins/bar/widgets/networkPanel.qml b/shell/plugins/bar/widgets/networkPanel.qml index 90dfa962..deb71b73 100644 --- a/shell/plugins/bar/widgets/networkPanel.qml +++ b/shell/plugins/bar/widgets/networkPanel.qml @@ -748,7 +748,6 @@ fi tooltipText: "Toggle Wi-Fi" foreground: root.bar.foreground hoverColor: root.bar.foreground // Override the dimming behavior - panelBackground: root.bar.background fontFamily: root.bar.fontFamily enabled: true onClicked: { @@ -805,7 +804,6 @@ fi tooltipText: "Disconnect" foreground: root.bar.foreground hoverColor: root.bar.urgent - panelBackground: root.bar.background fontFamily: root.bar.fontFamily anchors.verticalCenter: parent.verticalCenter onHovered: function(h) { @@ -823,8 +821,6 @@ fi iconText: "󰑐" iconSpinning: root.scanning tooltipText: "Refresh" - tooltipBackground: root.bar.background - tooltipForeground: root.bar.foreground foreground: root.bar.foreground horizontalPadding: Style.spacing.controlGap verticalPadding: Style.spacing.labelGap @@ -1005,8 +1001,6 @@ fi text: provider foreground: root.bar.foreground - tooltipBackground: root.bar.background - tooltipForeground: root.bar.foreground fontFamily: root.bar.fontFamily horizontalPadding: Style.spacing.controlPaddingX verticalPadding: Style.spacing.controlPaddingY @@ -1153,7 +1147,6 @@ iwctl known-networks list 2>/dev/null \\ tooltipText: "Forget network" foreground: root.bar.foreground hoverColor: root.bar.urgent - panelBackground: root.bar.background fontFamily: root.bar.fontFamily onClicked: if (row.net) root.forget(row.net.ssid) } @@ -1296,7 +1289,6 @@ iwctl known-networks list 2>/dev/null \\ iconText: "󰄬" tooltipText: "Connect" foreground: root.bar.foreground - panelBackground: root.bar.background fontFamily: root.bar.fontFamily onClicked: if (row.net) root.connectWithPassphrase(row.net.ssid, pwField.text) } @@ -1370,8 +1362,6 @@ iwctl known-networks list 2>/dev/null \\ PanelToolTip { visible: valueMouse.enabled && valueMouse.containsMouse text: tooltipText - panelForeground: root.bar.foreground - panelBackground: root.bar.background fontFamily: root.bar.fontFamily } } diff --git a/shell/plugins/bar/widgets/powerPanel.qml b/shell/plugins/bar/widgets/powerPanel.qml index ba6b3aeb..e2530950 100644 --- a/shell/plugins/bar/widgets/powerPanel.qml +++ b/shell/plugins/bar/widgets/powerPanel.qml @@ -280,8 +280,6 @@ printf 'time\t%s\n' "$($OMARCHY_PATH/bin/omarchy-battery-remaining-time 2>/dev/n required property int index text: String(modelData).charAt(0).toUpperCase() + String(modelData).slice(1) foreground: root.bar.foreground - tooltipBackground: root.bar.background - tooltipForeground: root.bar.foreground fontFamily: root.bar.fontFamily horizontalPadding: Style.spacing.controlPaddingX verticalPadding: Style.spacing.controlPaddingY diff --git a/shell/plugins/dev-gallery/GalleryPanel.qml b/shell/plugins/dev-gallery/GalleryPanel.qml index 5633c11d..86d188d3 100644 --- a/shell/plugins/dev-gallery/GalleryPanel.qml +++ b/shell/plugins/dev-gallery/GalleryPanel.qml @@ -1088,7 +1088,6 @@ Item { iconText: "󰄬" tooltipText: "Confirm (default flavor)" foreground: root.foreground - panelBackground: root.background fontFamily: root.fontFamily hasCursor: root.focusSection === "panel-action-button" && root.selectedIndex === 0 onHovered: function(h) { @@ -1102,7 +1101,6 @@ Item { tooltipText: "Forget network (urgent flavor)" foreground: root.foreground hoverColor: root.urgent - panelBackground: root.background fontFamily: root.fontFamily hasCursor: root.focusSection === "panel-action-button" && root.selectedIndex === 1 onHovered: function(h) { @@ -1115,7 +1113,6 @@ Item { iconText: "󰄬" tooltipText: "Disabled — type a passphrase first" foreground: root.foreground - panelBackground: root.background fontFamily: root.fontFamily enabled: false hasCursor: root.focusSection === "panel-action-button" && root.selectedIndex === 2 @@ -1129,7 +1126,6 @@ Item { iconText: "󰒓" tooltipText: "Focusable (settings form button)" foreground: root.foreground - panelBackground: root.background fontFamily: root.fontFamily fontSize: Style.font.subtitle size: Style.space(26) @@ -1203,7 +1199,6 @@ Item { visible: tipMouse.containsMouse || tipSwatch.focused text: "Styled tooltip — drop into any panel" panelForeground: root.foreground - panelBackground: root.background fontFamily: root.fontFamily } } @@ -1700,7 +1695,6 @@ Item { tooltipText: "Forget network" foreground: root.foreground hoverColor: root.urgent - panelBackground: root.background fontFamily: root.fontFamily } diff --git a/shell/plugins/settings/SettingsPanel.qml b/shell/plugins/settings/SettingsPanel.qml index 20ba46df..eee1b769 100644 --- a/shell/plugins/settings/SettingsPanel.qml +++ b/shell/plugins/settings/SettingsPanel.qml @@ -1072,7 +1072,6 @@ Item { iconText: "󰁝" tooltipText: "Move up" foreground: root.foreground - panelBackground: root.background fontFamily: root.fontFamily fontSize: Style.font.subtitle size: Style.space(26) @@ -1086,7 +1085,6 @@ Item { iconText: "󰁅" tooltipText: "Move down" foreground: root.foreground - panelBackground: root.background fontFamily: root.fontFamily fontSize: Style.font.subtitle size: Style.space(26) @@ -1100,7 +1098,6 @@ Item { iconText: "󰒓" tooltipText: "Settings" foreground: root.foreground - panelBackground: root.background fontFamily: root.fontFamily fontSize: Style.font.subtitle size: Style.space(26) @@ -1117,7 +1114,6 @@ Item { tooltipText: "Remove" foreground: root.urgent hoverColor: root.urgent - panelBackground: root.background fontFamily: root.fontFamily fontSize: Style.font.subtitle size: Style.space(26)