diff --git a/containers/libreportal/frontend/components/apps/core/css/apps.css b/containers/libreportal/frontend/components/apps/core/css/apps.css index 4fdc49b..b0f49f0 100644 --- a/containers/libreportal/frontend/components/apps/core/css/apps.css +++ b/containers/libreportal/frontend/components/apps/core/css/apps.css @@ -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 */ diff --git a/containers/libreportal/frontend/themes/dark-blue/theme.css b/containers/libreportal/frontend/themes/dark-blue/theme.css index fd991b2..dd8043e 100644 --- a/containers/libreportal/frontend/themes/dark-blue/theme.css +++ b/containers/libreportal/frontend/themes/dark-blue/theme.css @@ -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; diff --git a/containers/libreportal/frontend/themes/example/theme.css b/containers/libreportal/frontend/themes/example/theme.css index 72dac83..afb7a2c 100644 --- a/containers/libreportal/frontend/themes/example/theme.css +++ b/containers/libreportal/frontend/themes/example/theme.css @@ -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; diff --git a/containers/libreportal/frontend/themes/light/theme.css b/containers/libreportal/frontend/themes/light/theme.css index 6423156..43c3be3 100644 --- a/containers/libreportal/frontend/themes/light/theme.css +++ b/containers/libreportal/frontend/themes/light/theme.css @@ -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; diff --git a/containers/libreportal/frontend/themes/nebula/theme.css b/containers/libreportal/frontend/themes/nebula/theme.css index 909d20c..ccc4cef 100644 --- a/containers/libreportal/frontend/themes/nebula/theme.css +++ b/containers/libreportal/frontend/themes/nebula/theme.css @@ -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;