Just keep alpha in util

This commit is contained in:
David Heinemeier Hansson
2026-05-20 14:28:50 +02:00
parent c87bfb8da8
commit ce9afec2a8
6 changed files with 31 additions and 38 deletions
+2 -8
View File
@@ -31,18 +31,12 @@ QtObject {
if (typeof v !== "string" || v.length === 0) return fallback if (typeof v !== "string" || v.length === 0) return fallback
var n = Number(v) var n = Number(v)
if (!isFinite(n)) return fallback if (!isFinite(n)) return fallback
return Math.max(0, Math.min(1, n)) return Util.clampAlpha(n)
}
function alpha(c, opacity) {
if (!c) return Qt.rgba(0, 0, 0, opacity)
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. // Compose a color from a base-color key and its `-alpha` companion.
function composed(colorKey, alphaKey, colorFallback, alphaFallback) { function composed(colorKey, alphaKey, colorFallback, alphaFallback) {
return alpha(pick(colorKey, colorFallback), pickAlpha(alphaKey, alphaFallback)) return Util.alpha(pick(colorKey, colorFallback), pickAlpha(alphaKey, alphaFallback))
} }
readonly property QtObject bar: QtObject { readonly property QtObject bar: QtObject {
+12 -24
View File
@@ -51,14 +51,8 @@ QtObject {
return n === null ? fallback : n return n === null ? fallback : n
} }
function clampAlpha(value) {
var n = Number(value)
if (!isFinite(n)) return 0
return Math.max(0, Math.min(1, n))
}
function styleAlpha(key, fallback) { function styleAlpha(key, fallback) {
return clampAlpha(styleNum(key, fallback)) return Util.clampAlpha(styleNum(key, fallback))
} }
function styleString(key, fallback) { function styleString(key, fallback) {
@@ -92,12 +86,6 @@ QtObject {
readonly property real selectedBorderAlpha: styleAlpha("selected-border-alpha", 1.0) readonly property real selectedBorderAlpha: styleAlpha("selected-border-alpha", 1.0)
readonly property real focusBorderAlpha: styleAlpha("focus-border-alpha", hoverBorderAlpha) readonly property real focusBorderAlpha: styleAlpha("focus-border-alpha", hoverBorderAlpha)
function alpha(c, opacity) {
var a = clampAlpha(opacity)
if (!c) return Qt.rgba(0, 0, 0, a)
return Qt.rgba(c.r, c.g, c.b, a)
}
function colorFromHex(value, fallback) { function colorFromHex(value, fallback) {
var s = String(value || "").replace(/^\s+|\s+$/g, "") var s = String(value || "").replace(/^\s+|\s+$/g, "")
var shortHex = s.match(/^#([0-9A-Fa-f]{3})$/) var shortHex = s.match(/^#([0-9A-Fa-f]{3})$/)
@@ -158,17 +146,17 @@ QtObject {
return resolveStateColor(selectionColorToken, foreground, accent, urgent, foreground || Color.foreground) return resolveStateColor(selectionColorToken, foreground, accent, urgent, foreground || Color.foreground)
} }
function normalFillFor(foreground, accent, urgent) { return alpha(normalStateColor(foreground, accent, urgent), normalFillAlpha) } function normalFillFor(foreground, accent, urgent) { return Util.alpha(normalStateColor(foreground, accent, urgent), normalFillAlpha) }
function hoverFillFor(foreground, accent, urgent) { return alpha(hoverStateColor(foreground, accent, urgent), hoverFillAlpha) } function hoverFillFor(foreground, accent, urgent) { return Util.alpha(hoverStateColor(foreground, accent, urgent), hoverFillAlpha) }
function selectedFillFor(foreground, accent, urgent) { return alpha(selectedStateColor(foreground, accent, urgent), selectedFillAlpha) } function selectedFillFor(foreground, accent, urgent) { return Util.alpha(selectedStateColor(foreground, accent, urgent), selectedFillAlpha) }
function pressedFillFor(foreground, accent, urgent) { return alpha(pressedStateColor(foreground, accent, urgent), pressedFillAlpha) } function pressedFillFor(foreground, accent, urgent) { return Util.alpha(pressedStateColor(foreground, accent, urgent), pressedFillAlpha) }
function focusFillFor(foreground, accent, urgent) { return alpha(focusStateColor(foreground, accent, urgent), focusFillAlpha) } function focusFillFor(foreground, accent, urgent) { return Util.alpha(focusStateColor(foreground, accent, urgent), focusFillAlpha) }
function selectionFillFor(foreground, accent, urgent) { return alpha(selectionStateColor(foreground, accent, urgent), selectionFillAlpha) } function selectionFillFor(foreground, accent, urgent) { return Util.alpha(selectionStateColor(foreground, accent, urgent), selectionFillAlpha) }
function normalBorderFor(foreground, accent, urgent) { return alpha(normalStateColor(foreground, accent, urgent), normalBorderAlpha) } function normalBorderFor(foreground, accent, urgent) { return Util.alpha(normalStateColor(foreground, accent, urgent), normalBorderAlpha) }
function hoverBorderFor(foreground, accent, urgent) { return alpha(hoverStateColor(foreground, accent, urgent), hoverBorderAlpha) } function hoverBorderFor(foreground, accent, urgent) { return Util.alpha(hoverStateColor(foreground, accent, urgent), hoverBorderAlpha) }
function selectedBorderFor(foreground, accent, urgent) { return alpha(selectedStateColor(foreground, accent, urgent), selectedBorderAlpha) } function selectedBorderFor(foreground, accent, urgent) { return Util.alpha(selectedStateColor(foreground, accent, urgent), selectedBorderAlpha) }
function focusBorderFor(foreground, accent, urgent) { return alpha(focusStateColor(foreground, accent, urgent), focusBorderAlpha) } function focusBorderFor(foreground, accent, urgent) { return Util.alpha(focusStateColor(foreground, accent, urgent), focusBorderAlpha) }
// Convenience colors resolved against the foundational palette. // Convenience colors resolved against the foundational palette.
readonly property color normalFill: normalFillFor(Color.foreground, Color.accent, Color.urgent) readonly property color normalFill: normalFillFor(Color.foreground, Color.accent, Color.urgent)
@@ -180,7 +168,7 @@ QtObject {
readonly property color hoverBorderColor: hoverBorderFor(Color.foreground, Color.accent, Color.urgent) readonly property color hoverBorderColor: hoverBorderFor(Color.foreground, Color.accent, Color.urgent)
readonly property color selectedBorderColor: selectedBorderFor(Color.foreground, Color.accent, Color.urgent) readonly property color selectedBorderColor: selectedBorderFor(Color.foreground, Color.accent, Color.urgent)
readonly property color focusBorderColor: focusBorderFor(Color.foreground, Color.accent, Color.urgent) readonly property color focusBorderColor: focusBorderFor(Color.foreground, Color.accent, Color.urgent)
readonly property color selectedAccentFill: alpha(Color.accent, selectedFillAlpha) readonly property color selectedAccentFill: Util.alpha(Color.accent, selectedFillAlpha)
readonly property color selectionFill: selectionFillFor(Color.foreground, Color.accent, Color.urgent) readonly property color selectionFill: selectionFillFor(Color.foreground, Color.accent, Color.urgent)
// ---------------------------------------------------------- spacing // ---------------------------------------------------------- spacing
+13 -2
View File
@@ -6,12 +6,23 @@ import QtQuick
QtObject { QtObject {
id: root id: root
function clamp(value, min, max) {
var n = Number(value)
if (!isFinite(n)) return min
return Math.max(min, Math.min(max, n))
}
function clampAlpha(value) {
return clamp(value, 0, 1)
}
// Compose a base color with an opacity. Accepts a color object or a hex // Compose a base color with an opacity. Accepts a color object or a hex
// string; null/undefined yields transparent black at the requested alpha. // string; null/undefined yields transparent black at the requested alpha.
function alpha(c, opacity) { function alpha(c, opacity) {
if (!c) return Qt.rgba(0, 0, 0, opacity) var a = clampAlpha(opacity)
if (!c) return Qt.rgba(0, 0, 0, a)
if (typeof c === "string") c = Qt.color(c) if (typeof c === "string") c = Qt.color(c)
return Qt.rgba(c.r, c.g, c.b, opacity) return Qt.rgba(c.r, c.g, c.b, a)
} }
// file:// URL with each path segment percent-encoded so spaces and // file:// URL with each path segment percent-encoded so spaces and
+1 -1
View File
@@ -244,7 +244,7 @@ Item {
Rectangle { Rectangle {
width: parent.width width: parent.width
height: 1 height: 1
color: Style.alpha(root.foreground, 0.10) color: Util.alpha(root.foreground, 0.10)
} }
Item { Item {
+2 -2
View File
@@ -94,7 +94,7 @@ Item {
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.bottomMargin: Style.space(67) anchors.bottomMargin: Style.space(67)
color: Color.alpha(Color.background, 0.97) color: Util.alpha(Color.background, 0.97)
border.color: Color.popups.border border.color: Color.popups.border
border.width: Math.max(1, Style.space(2)) border.width: Math.max(1, Style.space(2))
radius: Style.cornerRadius radius: Style.cornerRadius
@@ -119,7 +119,7 @@ Item {
width: visible ? Style.space(142) : 0 width: visible ? Style.space(142) : 0
height: Math.max(Style.space(6), Style.spacing.sm) height: Math.max(Style.space(6), Style.spacing.sm)
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
color: Color.alpha(Color.popups.text, 0.45) color: Util.alpha(Color.popups.text, 0.45)
Rectangle { Rectangle {
height: parent.height height: parent.height
width: parent.width * (root.hasProgress ? root.value / root.maxValue : 0) width: parent.width * (root.hasProgress ? root.value / root.maxValue : 0)
+1 -1
View File
@@ -277,7 +277,7 @@ Item {
verticalAlignment: TextInput.AlignVCenter verticalAlignment: TextInput.AlignVCenter
activeFocusOnPress: true activeFocusOnPress: true
clip: true clip: true
selectionColor: Color.alpha(root.accent, 0.45) selectionColor: Util.alpha(root.accent, 0.45)
selectedTextColor: root.foreground selectedTextColor: root.foreground
font.family: root.fontFamily font.family: root.fontFamily
font.pixelSize: Style.font.iconLarge font.pixelSize: Style.font.iconLarge