openvibers/openvibe.surf Commits
The demo HUD reads on every theme (#45)
Changes
@@@ -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; }nnew file mode 100644@@@ -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');
@@ -66,7 +66,7 @@ html.ov-motion .sf-run-speed i { animation: sf-speed 1.1s linear infinite; anima
@@ -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-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 { 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 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 { 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-bar i { display: block; height: 100%; background: #00bef6; border-radius: inherit; }
.sf-demo-run p { margin: 0; font-size: .8rem; opacity: .75; }
.sf-demo-run p { margin: 0; font-size: .8rem; opacity: .75; }
new file mode 100644
new file mode 100644
@@ -0,0 +1,15 @@
@@ -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');