ZacharyZhang-NY/omarchycn
2
2
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases 3 Wiki Activity

Add tooltip color tokens

Browse Source
This commit is contained in:
Ryan Hughes
2026-05-19 15:16:10 -04:00
parent 441072db52
commit 15f461c1df
13 changed files with 34 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
default/themed/shell.toml.tpl
+6
View File
@@ -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
+2 -1
View File
@@ -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
+8 -2
View File
@@ -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)
shell/Ui/Button.qml
+7 -4
View File
@@ -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
shell/Ui/PanelActionButton.qml
-3
View File
@@ -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
+8 -6
View File
@@ -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
shell/plugins/bar/Bar.qml
+3 -3
View File
@@ -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
shell/plugins/bar/widgets/bluetoothPanel.qml
-3
View File
@@ -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
-2
View File
@@ -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
-10
View File
@@ -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
-2
View File
@@ -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
-6
View File
@@ -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
-4
View File
@@ -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)