Add tooltip color tokens

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 }}"

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

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.*,
+// Per-surface roles (Color.bar.*, Color.popups.*, Color.tooltip.*,
-// Color.menu.*, Color.imagePicker.*) come from shell.toml, which is generated
+// 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)

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.
+  // Tooltip palette. Auto-rendered if tooltipText is set. Defaults pull
-  property color tooltipBackground: Color.background
+  // from [tooltip] in shell.toml; override per-instance only when a button
-  property color tooltipForeground: foreground
+  // 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

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
   }
 }

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 panelForeground: Color.tooltip.text
-  property color panelBackground: Color.background
+  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

shell/plugins/bar/Bar.qml

@@ -683,8 +683,8 @@ Item {
         id: tooltipBubble
         implicitWidth: tooltipLabel.implicitWidth + 20
         implicitHeight: tooltipLabel.implicitHeight + 14
-        color: root.background
+        color: Color.tooltip.background
-        border.color: root.foreground
+        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

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

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

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
       }
     }

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

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
                     }
 

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)