Pin network overlay text to a fixed light palette so every theme stays legible (#6529)

* fix(network): pin overlay text to a fixed on-scrim palette

SpeedTestPanel and WifiQrPanel both draw over a hardcoded near-black
scrim, but their text/tick colors came from bar.foreground -- a color
themed to contrast with the *bar's* own background, which flips
dark/light per theme. On themes with a dark bar.foreground, digits
and labels went invisible against the black scrim, leaving only the
accent-colored arc/needle (Color.accent) visible.

Add a fixed white-based on-scrim palette (onScrim/onScrimDim) to both
overlays and route all text/tick colors through it, independent of
theme. bar.urgent stays theme-driven since it's a semantic color
already legible on near-black.

* Trim the on-scrim palette comments to the constraint

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* Pin overlay error text to a fixed on-scrim urgent color

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

---------

Co-authored-by: David Heinemeier Hansson <david@hey.com>
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Saman Shirdel
2026-08-05 13:04:49 -05:00
committed by GitHub
co-authored by Claude Fable 5 David Heinemeier Hansson
parent 75538f5927
commit 5d13b53eb5
2 changed files with 26 additions and 14 deletions
+11 -5
View File
@@ -25,6 +25,12 @@ PanelWindow {
readonly property bool showingQr: qrSize > 0 && !loading && error === ""
// The scrim below is a fixed near-black regardless of theme, so text on
// it needs a fixed light palette, not the themed bar.foreground.
readonly property color onScrim: "white"
readonly property color onScrimDim: Qt.rgba(1, 1, 1, 0.55)
readonly property color onScrimUrgent: "#ff6b6b"
signal closeRequested()
signal passwordToggleRequested()
@@ -84,7 +90,7 @@ PanelWindow {
Text {
text: (root.ssid || "Wi-Fi").toUpperCase()
color: Qt.darker(root.bar.foreground, 1.4)
color: root.onScrimDim
font.family: root.bar.fontFamily
font.pixelSize: Style.font.caption
font.bold: true
@@ -136,7 +142,7 @@ PanelWindow {
Text {
visible: root.loading
text: "Generating QR code…"
color: Qt.darker(root.bar.foreground, 1.3)
color: root.onScrimDim
font.family: root.bar.fontFamily
font.pixelSize: Style.font.bodySmall
Layout.fillWidth: true
@@ -146,7 +152,7 @@ PanelWindow {
Text {
visible: root.error !== ""
text: root.error
color: root.bar.urgent
color: root.onScrimUrgent
font.family: root.bar.fontFamily
font.pixelSize: Style.font.bodySmall
wrapMode: Text.Wrap
@@ -158,7 +164,7 @@ PanelWindow {
Text {
visible: root.showingQr
text: "Scan to join this network"
color: Qt.darker(root.bar.foreground, 1.3)
color: root.onScrimDim
font.family: root.bar.fontFamily
font.pixelSize: Style.font.bodySmall
Layout.fillWidth: true
@@ -170,7 +176,7 @@ PanelWindow {
text: root.passwordError !== "" ? root.passwordError
: root.passwordVisible ? root.password
: "Show password"
color: root.passwordError !== "" ? root.bar.urgent : root.bar.foreground
color: root.passwordError !== "" ? root.onScrimUrgent : root.onScrim
opacity: root.passwordVisible || root.passwordError !== "" ? 1 : 0.6
font.family: root.bar.fontFamily
font.pixelSize: Style.font.bodySmall