openvibers/openvibe.host Commits

Status words, lines and buttons follow the reader's theme (#242)

OP OpenVibers committed 12 days ago · 7b43ff50ec · 2 files, +22 −4

Changes

ddiff --git a/public/css/host.css b/public/css/host.css
iindex 0c27a5f..cbb3795 100644
---- a/public/css/host.css
++++ b/public/css/host.css
@@@ -1,7 +1,9 @@
/* OpenVibe.Host dashboard. Colours follow the shared theme tokens when theme-loader.js has run. */
:root { --hs-bg: var(--bg-primary, #0a0f1c); --hs-fg: var(--text-primary, #e6edf7); --hs-muted: var(--text-secondary, #9aa7bd);
-- --hs-card: var(--bg-secondary, #111a2c); --hs-line: rgba(255,255,255,.12); --hs-accent: var(--accent, #60a5fa);
-- --hs-ok: #34d399; --hs-warn: #fbbf24; --hs-bad: #f87171; }
++ --hs-card: var(--bg-secondary, #111a2c); --hs-line: var(--border, rgba(255,255,255,.12)); --hs-accent: var(--accent, #60a5fa);
++ --hs-ok: var(--success-text, #34d399); --hs-warn: var(--warning-text, #fbbf24); --hs-bad: var(--danger-text, #f87171); }
++/* Status words and lines use the theme's readable status colours; the fixed light green, amber and red were for dark
++ themes only (axe on Daylight: 1.8:1, 2026-11-01). Buttons wear the theme's strong accent and its own text colour. */
body { margin: 0; background: var(--hs-bg); color: var(--hs-fg); font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--hs-accent); }
.skip { position: absolute; left: -9999px; } .skip:focus { left: 1rem; top: 1rem; }
@@@ -22,9 +24,9 @@ fieldset.choice { display: flex; flex-direction: column; gap: .35rem; }
textarea { width: min(100%, 44rem); min-height: 6.5rem; font-family: ui-monospace, monospace; font-size: 13px; line-height: 1.5; }
strong.preview { color: var(--hs-warn); }
input, select, textarea { font: inherit; padding: .4rem .5rem; border-radius: 6px; border: 1px solid var(--hs-line); background: var(--hs-card); color: var(--hs-fg); }
--button, .button { font: inherit; padding: .45rem .9rem; border-radius: 6px; border: 0; background: var(--hs-accent); color: #0a0f1c; cursor: pointer; text-decoration: none; display: inline-block; }
++button, .button { font: inherit; padding: .45rem .9rem; border-radius: 6px; border: 0; background: var(--accent-strong, var(--hs-accent)); color: var(--on-accent-strong, #0a0f1c); cursor: pointer; text-decoration: none; display: inline-block; }
button.link { background: none; color: var(--hs-accent); padding: 0; text-decoration: underline; }
--button.danger, .danger { background: var(--hs-bad); color: #0a0f1c; } button.link.danger { background: none; color: var(--hs-bad); }
++button.danger, .danger { background: var(--danger, #f87171); color: #0a0f1c; } button.link.danger { background: none; color: var(--hs-bad); }
.notice { padding: .6rem .8rem; border-radius: 6px; background: var(--hs-card); border-left: 4px solid var(--hs-accent); }
.notice-error { border-left-color: var(--hs-bad); }
.ok { color: var(--hs-ok); } .warn { color: var(--hs-warn); }
ddiff --git a/test/theme-status.test.js b/test/theme-status.test.js
nnew file mode 100644
iindex 0000000..1868960
---- /dev/null
++++ b/test/theme-status.test.js
@@@ -0,0 +1,16 @@
++'use strict';
++// Host's status words ("Dropped 82.6%", "Rose 0.6%"), lines and buttons follow the reader's theme. The fixed light
++// green, amber and red suited dark themes only (axe on Daylight: 1.8:1, 2026-11-01), and buttons drew dark text on
++// the accent (3.6:1 on Daylight's violet).
++const assert = require('assert');
++const fs = require('fs');
++const path = require('path');
++
++const css = fs.readFileSync(path.join(__dirname, '..', 'public', 'css', 'host.css'), 'utf8');
++assert.match(css, /--hs-ok: var\(--success-text, #34d399\)/);
++assert.match(css, /--hs-warn: var\(--warning-text, #fbbf24\)/);
++assert.match(css, /--hs-bad: var\(--danger-text, #f87171\)/);
++assert.match(css, /--hs-line: var\(--border, rgba\(255,255,255,\.12\)\)/);
++assert.match(css, /button, \.button \{[^}]*background: var\(--accent-strong, var\(--hs-accent\)\); color: var\(--on-accent-strong, #0a0f1c\)/);
++assert.match(css, /button\.danger, \.danger \{ background: var\(--danger, #f87171\); color: #0a0f1c; \}/);
++console.log('theme status colours: all checks passed');