openvibers/openvibe.network Commits
Intent labels read on Daylight (#497)
Changes
@@@ -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}nnew file mode 100644@@@ -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');
@@ -107,7 +107,7 @@ a{color:inherit}
@@ -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}
.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{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>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: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.match{border-color:var(--accent);background:var(--bg-hover)}
.intent.dim{opacity:.38}
.intent.dim{opacity:.38}
new file mode 100644
new file mode 100644
@@ -0,0 +1,17 @@
@@ -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');