Add color tokens for app-launcher

This commit is contained in:
Ryan Hughes
2026-05-19 15:54:00 -04:00
parent 109d17b95b
commit c26a957b8f
3 changed files with 41 additions and 9 deletions
+15
View File
@@ -88,6 +88,21 @@ text = "{{ foreground }}"
border = "{{ accent }}"
countdown = "{{ accent }}"
[app-launcher]
# Same six tokens as [menu], applied to the app launcher overlay. Alpha
# companions go from 0 (invisible) to 1 (opaque). Defaults mirror [menu]:
# subtle foreground-tinted fill on the selected row, no visible border,
# accent-colored text.
background = "{{ background }}"
text = "{{ foreground }}"
border = "{{ foreground }}"
border-alpha = 1.0
selected-background = "{{ foreground }}"
selected-background-alpha = 0.08
selected-text = "{{ accent }}"
selected-border = "{{ foreground }}"
selected-border-alpha = 0.25
[menu]
# Cards, rows, and selected-row treatment. Alpha companions (where present)
# go from 0 (invisible) to 1 (opaque). Defaults mirror the panel keyboard
+13 -2
View File
@@ -6,8 +6,8 @@ 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.tooltip.*,
// Color.notifications.*, Color.menu.*, Color.imagePicker.*) come from
// shell.toml, which is generated
// Color.notifications.*, Color.menu.*, Color.appLauncher.*,
// 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.
@@ -60,6 +60,17 @@ QtObject {
property color border: root.pick("notifications.border", root.accent)
property color countdown: root.pick("notifications.countdown", root.accent)
}
readonly property QtObject appLauncher: QtObject {
property color background: root.pick("app-launcher.background", root.background)
property color text: root.pick("app-launcher.text", root.foreground)
property color border: root.pick("app-launcher.border", root.foreground)
property real borderAlpha: root.pickAlpha("app-launcher.border-alpha", 1.0)
property color selectedBackground: root.pick("app-launcher.selected-background", root.foreground)
property real selectedBackgroundAlpha: root.pickAlpha("app-launcher.selected-background-alpha", 0.08)
property color selectedText: root.pick("app-launcher.selected-text", root.accent)
property color selectedBorder: root.pick("app-launcher.selected-border", root.foreground)
property real selectedBorderAlpha: root.pickAlpha("app-launcher.selected-border-alpha", 0.0)
}
readonly property QtObject menu: QtObject {
property color background: root.pick("menu.background", root.background)
property color text: root.pick("menu.text", root.foreground)
+13 -7
View File
@@ -19,10 +19,14 @@ Item {
property bool hoverArmed: false
property var filteredEntries: []
property color accent: Color.menu.selected
property color background: Color.menu.background
property color foreground: Color.menu.text
property color border: foreground
// Bound to the central [app-launcher] section in shell.toml via Color.qml.
// Each surface color composes with its alpha companion at render time.
property color background: Color.appLauncher.background
property color foreground: Color.appLauncher.text
property color border: Color.alpha(Color.appLauncher.border, Color.appLauncher.borderAlpha)
property color selectedBackground: Color.alpha(Color.appLauncher.selectedBackground, Color.appLauncher.selectedBackgroundAlpha)
property color selectedText: Color.appLauncher.selectedText
property color selectedBorder: Color.alpha(Color.appLauncher.selectedBorder, Color.appLauncher.selectedBorderAlpha)
property string fontFamily: Quickshell.env("OMARCHY_MENU_FONT") || "monospace"
property int cardWidth: 644
@@ -351,7 +355,9 @@ Item {
width: ListView.view.width
height: root.rowHeight
radius: 0
color: row.hasCursor ? root.withAlpha(root.foreground, 0.07) : "transparent"
color: row.hasCursor ? root.selectedBackground : "transparent"
border.color: row.hasCursor ? root.selectedBorder : "transparent"
border.width: (row.hasCursor && Color.appLauncher.selectedBorderAlpha > 0) ? Math.max(1, Style.normalBorderWidth) : 0
Item {
id: iconSlot
@@ -376,7 +382,7 @@ Item {
anchors.centerIn: parent
visible: appIcon.status === Image.Error
text: "?"
color: row.hasCursor ? root.accent : root.foreground
color: row.hasCursor ? root.selectedText : root.foreground
font.family: root.fontFamily
font.pixelSize: 18
}
@@ -389,7 +395,7 @@ Item {
anchors.rightMargin: 14
anchors.verticalCenter: parent.verticalCenter
text: row.name
color: row.hasCursor ? root.accent : root.foreground
color: row.hasCursor ? root.selectedText : root.foreground
font.family: root.fontFamily
font.pixelSize: 18
elide: Text.ElideRight