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

Add missing alpha tokens

Browse Source
This commit is contained in:
Ryan Hughes
2026-05-19 15:54:00 -04:00
parent c26a957b8f
commit 6f72604f2c
8 changed files with 97 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
shell/Commons/Color.qml
+43 -31
View File
@@ -38,63 +38,75 @@ QtObject {
return Math.max(0, Math.min(1, n))
}
function alpha(c, opacity) {
if (!c) return Qt.rgba(0, 0, 0, opacity)
// pick() returns raw strings from shell.toml; convert to a color object
// so .r/.g/.b are defined. Color objects pass through unchanged.
if (typeof c === "string") c = Qt.color(c)
return Qt.rgba(c.r, c.g, c.b, opacity)
}
// Compose a color from a base-color key and its `-alpha` companion,
// applying the alpha to the resolved color. Used by every surface that
// exposes an alpha companion so consumers can read a single ready-to-use
// value rather than composing themselves.
function composed(colorKey, alphaKey, colorFallback, alphaFallback) {
return alpha(pick(colorKey, colorFallback), pickAlpha(alphaKey, alphaFallback))
}
// Surface roles. Each property reads its shell.toml override if set,
// otherwise falls back to a foundational palette token.
// otherwise falls back to a foundational palette token. Color values are
// pre-composed with their `-alpha` companion where one exists, so
// consumers can drop them straight into a Rectangle.color binding.
readonly property QtObject bar: QtObject {
property color background: root.pick("bar.background", root.background)
property color background: root.composed("bar.background", "bar.background-alpha", root.background, 1.0)
property color text: root.pick("bar.text", root.foreground)
property color active: root.pick("bar.active", root.urgent)
}
readonly property QtObject popups: QtObject {
property color background: root.pick("popups.background", root.background)
property color border: root.pick("popups.border", root.pick("notifications.border", root.accent))
property color background: root.composed("popups.background", "popups.background-alpha", root.background, 1.0)
property color border: root.composed("popups.border", "popups.border-alpha", root.pick("notifications.border", root.accent), 1.0)
}
readonly property QtObject tooltip: QtObject {
property color background: root.pick("tooltip.background", root.background)
// Default background-alpha 0.97 matches the legacy tooltip opacity so
// existing themes look identical until they override it.
property color background: root.composed("tooltip.background", "tooltip.background-alpha", root.background, 0.97)
property color text: root.pick("tooltip.text", root.foreground)
property color border: root.pick("tooltip.border", root.foreground)
property color border: root.composed("tooltip.border", "tooltip.border-alpha", root.foreground, 1.0)
}
readonly property QtObject notifications: QtObject {
property color background: root.pick("notifications.background", root.background)
property color background: root.composed("notifications.background", "notifications.background-alpha", root.background, 1.0)
property color text: root.pick("notifications.text", root.foreground)
property color border: root.pick("notifications.border", root.accent)
property color border: root.composed("notifications.border", "notifications.border-alpha", root.accent, 1.0)
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 background: root.composed("app-launcher.background", "app-launcher.background-alpha", root.background, 0.95)
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 border: root.composed("app-launcher.border", "app-launcher.border-alpha", root.foreground, 1.0)
property color selectedBackground: root.composed("app-launcher.selected-background", "app-launcher.selected-background-alpha", root.foreground, 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)
property color selectedBorder: root.composed("app-launcher.selected-border", "app-launcher.selected-border-alpha", root.foreground, 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)
property color border: root.pick("menu.border", root.foreground)
property real borderAlpha: root.pickAlpha("menu.border-alpha", 1.0)
// Defaults mirror the panel cursor: a subtle foreground-tint fill,
// no visible border, accent text. Themes override any of these
// (including the alpha companions) per surface.
property color selectedBackground: root.pick("menu.selected-background", root.pick("menu.selected", root.foreground))
property real selectedBackgroundAlpha: root.pickAlpha("menu.selected-background-alpha", 0.08)
property color background: root.composed("menu.background", "menu.background-alpha", root.background, 1.0)
property color text: root.pick("menu.text", root.foreground)
property color border: root.composed("menu.border", "menu.border-alpha", root.foreground, 1.0)
property color selectedBackground: root.composed("menu.selected-background", "menu.selected-background-alpha", root.pick("menu.selected", root.foreground), 0.08)
property color selectedText: root.pick("menu.selected-text", root.accent)
property color selectedBorder: root.pick("menu.selected-border", root.foreground)
property real selectedBorderAlpha: root.pickAlpha("menu.selected-border-alpha", 0.0)
property color selectedBorder: root.composed("menu.selected-border", "menu.selected-border-alpha", root.foreground, 0.0)
}
readonly property QtObject imagePicker: QtObject {
property color background: root.pick("image-picker.background", root.background)
// Defaults reflect what the picker hard-coded before alphas were
// themable: scrim background at 0.5, unselected carousel borders at
// 0.28, selected border fully opaque.
property color background: root.composed("image-picker.background", "image-picker.background-alpha", root.background, 0.5)
property color text: root.pick("image-picker.text", root.foreground)
property color selectedBorder: root.pick("image-picker.selected-border", root.accent)
property color unselectedBorder: root.pick("image-picker.unselected-border", root.foreground)
}
function alpha(c, opacity) {
if (!c) return Qt.rgba(0, 0, 0, opacity)
return Qt.rgba(c.r, c.g, c.b, opacity)
property color selectedBorder: root.composed("image-picker.selected-border", "image-picker.selected-border-alpha", root.accent, 1.0)
property color unselectedBorder: root.composed("image-picker.unselected-border", "image-picker.unselected-border-alpha", root.foreground, 0.28)
}
function loadColors(raw) {
shell/Ui/Button.qml
-1
View File
@@ -108,7 +108,6 @@ Rectangle {
border.color: root.tooltipBorder
border.width: Math.max(1, Style.normalBorderWidth)
radius: 0
opacity: 0.97
}
contentItem: Text {
text: root.tooltipText
shell/Ui/PanelToolTip.qml
-1
View File
@@ -32,7 +32,6 @@ ToolTip {
border.color: root.panelBorder
border.width: Style.normalBorderWidth
radius: Style.cornerRadius
opacity: 0.97
}
contentItem: Text {
shell/plugins/app-launcher/AppLauncher.qml
+7 -6
View File
@@ -20,13 +20,14 @@ Item {
property var filteredEntries: []
// Bound to the central [app-launcher] section in shell.toml via Color.qml.
// Each surface color composes with its alpha companion at render time.
// Each color already includes its alpha companion (composed in the
// singleton), so consumers can drop them straight into a Rectangle.
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 border: Color.appLauncher.border
property color selectedBackground: Color.appLauncher.selectedBackground
property color selectedText: Color.appLauncher.selectedText
property color selectedBorder: Color.alpha(Color.appLauncher.selectedBorder, Color.appLauncher.selectedBorderAlpha)
property color selectedBorder: Color.appLauncher.selectedBorder
property string fontFamily: Quickshell.env("OMARCHY_MENU_FONT") || "monospace"
property int cardWidth: 644
@@ -248,7 +249,7 @@ Item {
height: Math.min(root.cardHeight, panel.height - Style.gapsOut * 2)
radius: Style.cornerRadius
anchors.centerIn: parent
color: root.withAlpha(root.background, 0.95)
color: root.background
border.color: root.border
border.width: 2
clip: true
@@ -357,7 +358,7 @@ Item {
radius: 0
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
border.width: (row.hasCursor && root.selectedBorder.a > 0) ? Math.max(1, Style.normalBorderWidth) : 0
Item {
id: iconSlot
shell/plugins/bar/Bar.qml
-1
View File
@@ -687,7 +687,6 @@ Item {
border.color: Color.tooltip.border
border.width: 1
radius: Style.cornerRadius
opacity: 0.97
Text {
id: tooltipLabel
shell/plugins/image-picker/ImagePicker.qml
+2 -2
View File
@@ -440,7 +440,7 @@ Item {
Rectangle {
anchors.fill: parent
visible: root.opened && root.imagesLoaded
color: root.withAlpha(root.background, 0.5)
color: root.background
}
MouseArea {
@@ -592,7 +592,7 @@ Item {
preferredRendererType: Shape.CurveRenderer
ShapePath {
fillColor: "transparent"
strokeColor: item.selected ? root.selectedBorder : root.withAlpha(root.unselectedBorder, 0.28)
strokeColor: item.selected ? root.selectedBorder : root.unselectedBorder
strokeWidth: item.selected ? 3 : 1
startX: item.topLeft; startY: 0
PathLine { x: item.topRight; y: 0 }
shell/plugins/menu/Menu.qml
+7 -6
View File
@@ -62,14 +62,15 @@ Item {
property var navStack: []
property var providersLoaded: ({})
property var providerQueue: []
// Bound to the central [menu] section in shell.toml via Color.qml. Each
// surface color composes with its alpha companion at render time.
// Bound to the central [menu] section in shell.toml via Color.qml.
// Each color already includes its alpha companion (composed in the
// singleton), so consumers can drop them straight into a Rectangle.
property color background: Color.menu.background
property color foreground: Color.menu.text
property color border: Color.alpha(Color.menu.border, Color.menu.borderAlpha)
property color selectedBackground: Color.alpha(Color.menu.selectedBackground, Color.menu.selectedBackgroundAlpha)
property color border: Color.menu.border
property color selectedBackground: Color.menu.selectedBackground
property color selectedText: Color.menu.selectedText
property color selectedBorder: Color.alpha(Color.menu.selectedBorder, Color.menu.selectedBorderAlpha)
property color selectedBorder: Color.menu.selectedBorder
readonly property int cornerRadius: Style.cornerRadius
property int contentMargin: Style.spacing.panelPadding
property int headerHeight: Math.max(Style.space(34), Style.font.title + Style.spacing.controlPaddingY * 2)
@@ -1083,7 +1084,7 @@ Item {
radius: root.cornerRadius
color: row.hasCursor ? root.selectedBackground : "transparent"
border.color: row.hasCursor ? root.selectedBorder : "transparent"
border.width: (row.hasCursor && Color.menu.selectedBorderAlpha > 0) ? Style.hoverBorderWidth : 0
border.width: (row.hasCursor && root.selectedBorder.a > 0) ? Style.hoverBorderWidth : 0
Rectangle {
visible: false