openvibers/openvibe.network Commits

Intent labels read on Daylight (#497)

OP OpenVibers committed 12 days ago · 492b1ae71d · 2 files, +18 −1

Changes

ddiff --git a/public/index.html b/public/index.html
iindex 7c06e830..b44117cf 100644
---- a/public/index.html
++++ b/public/index.html
@@@ -107,7 +107,7 @@ a{color:inherit}
.intents{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}
.intent{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:12px;border:1px solid var(--border);background:color-mix(in srgb,var(--bg-secondary) 80%,transparent);text-decoration:none;color:inherit;transition:border-color var(--ov-dur-2, .15s),background var(--ov-dur-2, .15s),opacity var(--ov-dur-2, .15s),transform var(--ov-dur-2, .15s);height:100%}
.intent>i{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:10px;font-size:15px;color:var(--accent-light);background:color-mix(in srgb,var(--accent) 14%,transparent)}
--.intent b{display:block;font-size:14.5px;letter-spacing:-.1px}.intent-n{display:inline-block;margin-top:5px;padding:1px 7px;border-radius:999px;font-style:normal;font-size:11px;font-weight:650;color:var(--accent-light);background:color-mix(in srgb,var(--accent) 14%,transparent)}.intent small{display:block;color:var(--text-secondary);font-size:12.5px;line-height:1.4;margin-top:1px}
++.intent b{display:block;font-size:14.5px;letter-spacing:-.1px}.intent-n{display:inline-block;margin-top:5px;padding:1px 7px;border-radius:999px;font-style:normal;font-size:11px;font-weight:650;color:color-mix(in srgb,var(--accent) 60%,var(--text-primary));background:color-mix(in srgb,var(--accent) 14%,transparent)}.intent small{display:block;color:var(--text-secondary);font-size:12.5px;line-height:1.4;margin-top:1px}
.intent:hover,.intent:focus-visible{border-color:var(--accent);background:var(--bg-hover);outline:0;transform:translateY(-1px)}
.intent.match{border-color:var(--accent);background:var(--bg-hover)}
.intent.dim{opacity:.38}
ddiff --git a/test/contrast.test.js b/test/contrast.test.js
nnew file mode 100644
iindex 00000000..c283848a
---- /dev/null
++++ b/test/contrast.test.js
@@@ -0,0 +1,17 @@
++'use strict';
++// WCAG 2.1 AA: the intent chip's label was accent-light on a 14% accent wash (4.2:1 on Daylight).
++// It now mixes the accent 60% into the theme text colour; the intent icon keeps its accent-light tone.
++// node test/contrast.test.js
++const assert = require('assert');
++const fs = require('fs');
++const path = require('path');
++
++const html = fs.readFileSync(path.join(__dirname, '..', 'public', 'index.html'), 'utf8');
++const rule = html.match(/\.intent-n\{[^}]*\}/);
++assert.ok(rule, 'the .intent-n rule is present');
++assert.ok(
++ rule[0].includes('color:color-mix(in srgb,var(--accent) 60%,var(--text-primary));background:color-mix(in srgb,var(--accent) 14%,transparent)}'),
++ 'the intent label mixes the accent into the text colour and keeps its wash'
++);
++assert.ok(rule[0].includes('color:color-mix(in srgb,var(--accent) 60%,var(--text-primary))'), 'the label never falls back to accent-light');
++console.log('contrast: the intent label reads on Daylight');