Webstar/LibrePortal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(webui): make Remove instance readable on the dark themes

Browse Source 
The button drew its text from --status-danger, which is tuned as a FILL
colour — the confirm button in the remove modal sits white text on top of
it, and there it is correct. Reused as text on the app's own background
it measures 3.79:1 on nebula, 3.84 on dark-blue and 3.95 on the example
theme, all under the 4.5:1 AA floor, which is why the control read as
barely there. Light is the only theme where the same value passes, at
4.53:1, so brightening it globally would have fixed three themes by
breaking the fourth.

Two jobs, two values. --status-danger-text is now defined per theme:
#f87171 on the dark ones (6.29-6.47:1) and #c92a37 on light (5.43:1, up
from 4.53). #f87171 is not a new invention — it is the red the CVE
severity chips already use for exactly this job, so danger-as-text now
looks the same wherever it appears.

The border follows the text so the two stay coherent, and both fall back
to --status-danger, leaving any theme without the token no worse off
than before. The filled modal button is deliberately untouched: white on
#dc3545 was never the problem.

Other danger-as-text call sites exist (loading screen, network notifier)
and would likely benefit, but they render on their own backgrounds
rather than the app surface, so they are not assumed to share the
measurement.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
librelad 2026-08-20 22:31:11 +01:00
parent 4aaf68c101
commit 325f8f3be8
5 changed files with 30 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
containers/libreportal/frontend/components/apps/core/css/apps.css
View File

@ -612,13 +612,19 @@
font-weight: 600;
cursor: pointer;
background: transparent;
color: var(--status-danger, #e5484d);
border: 1px solid rgba(var(--status-danger-rgb, 229, 72, 77), 0.45);
/* The TEXT variant, not the fill one. --status-danger is tuned to sit under
white (as the confirm button in the modal does), and reused as text on the
app's own background it measures 3.8:1 on all three dark themes — under the
4.5:1 AA floor, which is why this button read as barely there. The token
falls back to --status-danger so a theme that has not defined it is no
worse off than before. */
color: var(--status-danger-text, var(--status-danger, #e5484d));
border: 1px solid rgba(var(--status-danger-text-rgb, var(--status-danger-rgb, 229, 72, 77)), 0.5);
transition: background 0.15s, border-color 0.15s;
}
.instance-remove:hover {
background: rgba(var(--status-danger-rgb, 229, 72, 77), 0.12);
border-color: var(--status-danger, #e5484d);
background: rgba(var(--status-danger-text-rgb, var(--status-danger-rgb, 229, 72, 77)), 0.14);
border-color: var(--status-danger-text, var(--status-danger, #e5484d));
}
/* Modal */

5
containers/libreportal/frontend/themes/dark-blue/theme.css
View File

@ -31,6 +31,11 @@
--status-danger: #dc3545;
--status-danger-hover: #c82333;
--status-danger-rgb: 220, 53, 69;
/* Danger as TEXT on this theme's own background. --status-danger is tuned as a
FILL (white sits on top of it); reused as text it drops to 3.8:1 here, under
the 4.5:1 AA floor. Two jobs, two values. */
--status-danger-text: #f87171;
--status-danger-text-rgb: 248, 113, 113;
--status-warning: #ffc107;
--status-warning-rgb: 255, 193, 7;
--status-info: #17a2b8;

5
containers/libreportal/frontend/themes/example/theme.css
View File

@ -53,6 +53,11 @@
--status-danger: #dc3545;
--status-danger-hover: #c82333;
--status-danger-rgb: 220, 53, 69;
/* Danger as TEXT on this theme's own background. --status-danger is tuned as a
FILL (white sits on top of it); reused as text it drops to 3.8:1 here, under
the 4.5:1 AA floor. Two jobs, two values. */
--status-danger-text: #f87171;
--status-danger-text-rgb: 248, 113, 113;
--status-warning: #ffc107;
--status-warning-rgb: 255, 193, 7;
--status-info: #17a2b8;

5
containers/libreportal/frontend/themes/light/theme.css
View File

@ -31,6 +31,11 @@
--status-danger: #dc3545;
--status-danger-hover: #c82333;
--status-danger-rgb: 220, 53, 69;
/* Danger as TEXT on this theme's own background. --status-danger is tuned as a
FILL (white sits on top of it); reused as text it drops to 3.8:1 here, under
the 4.5:1 AA floor. Two jobs, two values. */
--status-danger-text: #c92a37;
--status-danger-text-rgb: 201, 42, 55;
--status-warning: #ff9800;
--status-warning-rgb: 255, 152, 0;
--status-info: #17a2b8;

5
containers/libreportal/frontend/themes/nebula/theme.css
View File

@ -38,6 +38,11 @@
--status-danger: #dc3545;
--status-danger-hover: #c82333;
--status-danger-rgb: 220, 53, 69;
/* Danger as TEXT on this theme's own background. --status-danger is tuned as a
FILL (white sits on top of it); reused as text it drops to 3.8:1 here, under
the 4.5:1 AA floor. Two jobs, two values. */
--status-danger-text: #f87171;
--status-danger-text-rgb: 248, 113, 113;
--status-warning: #ffc107;
--status-warning-rgb: 255, 193, 7;
--status-info: #17a2b8;