openvibers/openvibe.surf Commits

The demo HUD reads on every theme (#45)

OP OpenVibers committed 12 days ago · b62990af65 · 2 files, +16 −1

Changes

ddiff --git a/public/css/surf.css b/public/css/surf.css
iindex 843eac1..711352e 100644
---- a/public/css/surf.css
++++ b/public/css/surf.css
@@@ -66,7 +66,7 @@ html.ov-motion .sf-run-speed i { animation: sf-speed 1.1s linear infinite; anima
.sf-demo-run { display: grid; gap: 10px; padding: 16px; border-radius: 18px; background: #0b0f17; color: #e9f2ff; border: 1px solid color-mix(in srgb, var(--room-accent) 35%, transparent); }
.sf-demo-hud { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-weight: 700; font-size: .85rem; }
.sf-demo-hud b { font: 800 1.8rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
--.sf-demo-hud .is-good { color: var(--success-text, #4ade80); font-variant-numeric: tabular-nums; }
++.sf-demo-hud .is-good { color: #4ade80; font-variant-numeric: tabular-nums; }
.sf-demo-bar { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.sf-demo-bar i { display: block; height: 100%; background: #00bef6; border-radius: inherit; }
.sf-demo-run p { margin: 0; font-size: .8rem; opacity: .75; }
ddiff --git a/test/contrast.test.js b/test/contrast.test.js
nnew file mode 100644
iindex 0000000..c5f9270
---- /dev/null
++++ b/test/contrast.test.js
@@@ -0,0 +1,15 @@
++'use strict';
++// WCAG 2.1 AA: the demo HUD is always dark, so the theme's success text (dark green on light themes) was 3.5:1
++// there. The HUD now pins the kit's #4ade80 instead of the theme token.
++// node test/contrast.test.js
++const assert = require('assert');
++const fs = require('fs');
++const path = require('path');
++
++const css = fs.readFileSync(path.join(__dirname, '..', 'public', 'css', 'surf.css'), 'utf8');
++assert.ok(
++ css.includes('.sf-demo-hud .is-good { color: #4ade80; font-variant-numeric: tabular-nums; }'),
++ 'the demo HUD keeps the kit success green whatever the theme'
++);
++assert.ok(!css.includes('.sf-demo-hud .is-good { color: var(--success-text, #4ade80);'), 'the demo HUD no longer takes the theme success text');
++console.log('contrast: the demo HUD reads on every theme');