luci-mod-dashboard: fix low contrast of muted elements

[eamonxg]

Pull request details

Description

The dashboard's muted text used --text-color-low, the step closest to the page
background, which left everything it paints hard to read: the ifacebox property
labels in the wireless tab (Devices Connected, Channel, Bitrate, Encryption,
BSSID), the chart axis ticks and bar labels, the chart legends, and the donut
caption and percentages.

They are all normal-size text, so the token now takes --text-color-high and the
muted look is carried by size and weight instead of colour. --text-color-medium
was the first attempt, but bootstrap has no step between medium and high and
medium still reads poorly on a dark background — see the review thread.

The donut track and the no-signal bar are not text and must not follow the token
up to full emphasis. The track was drawn in --dashboard-surface-alt, a hair off
the card background, and the bar rode the muted text token, which is backwards
for "no data". Both now use --dashboard-border, the colour the chart gridlines
already use.

Swaps in custom.css only, no markup or layout change:

	before	after
--dashboard-text-muted	--text-color-low	--text-color-high
its light fallback	#6b7280	#4b5563
donut track	--dashboard-surface-alt	--dashboard-border
no-signal bar	--dashboard-text-muted	--dashboard-border

Bootstrap and footstrap define the colour tokens, so there the muted text now
lands on the same colour the theme already uses for its own body text. Material,
openwrt and openwrt-2020 define none of them and fall back to the literal; that
literal moves one step darker because the old one did not clear AA on the grey
card backgrounds those themes use.

Screenshot or video of changes (if applicable)

Bootstrap Dark.

Before — --text-color-low, full dashboard

After — --text-color-high

The wireless tab's ifacebox labels, the worst case on the page:

Why not --text-color-medium

The intermediate step, same router and same moment:

Maintainer (preferred)

@hnyman @systemcrash

---

Tested on

OpenWrt version: OpenWrt SNAPSHOT (r0-b88dfb6), JDCloud RE-CS-02
LuCI version: LuCI Master (26.255.67071~8a2a924)
Web browser(s): Chrome 153.0.8010.48

---

Checklist

• (Nice to have) Includes what Issue it closes (e.g. openwrt/luci#issue-number).
• (Nice to have) Includes what it depends on (e.g. openwrt/packages#pr-number in sister repo).

[openwrt-ai]

Reviewed 1 new commit.

---

Generated by Claude Code

[openwrt-ai]

4.0:1 is still below the 4.5:1 AA floor, and every consumer of this token is normal-size text under WCAG: .dashboard-donut-label at 9px, the [10.5px axis and bar labels](https://github.com/openwrt/luci/blob/2a0d3da984cb4b997b7b9b6036cb279c09115c9f/modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/css/custom.css#L261-L266),`` and the 11.5–12.5px legend and net-field labels. Is stopping one step short deliberate — bootstrap has no token between medium and high — or should these use --text-color-high and carry the muted hierarchy through size/weight instead?

---

Generated by Claude Code

[eamonxg]

--text-color-high would meet the AA floor, but then the difference between a
property and its value becomes much less obvious.

Same router, same moment, only the token changed:

--text-color-medium

--text-color-high

Not sure which trade-off is the right one here.

@hnyman — would you mind taking a look and letting me know which you'd
prefer? Happy to update either way.

[hnyman]

I prefer good contrast, so the "medium" with muted gray text on black background looks really hard to read.
So, the text-color-high is natural preference for me.

[eamonxg]

Thanks — switched to --text-color-high, pushed as c690cec.