openvibers/openvibe.bot Commits

The red token is defined, not drawn from itself (#403)

OP OpenVibers committed 1 days ago · de629ca500 · 2 files, +6 −1

:root set --danger: var(--danger, #e5484d), a cycle: CSS drops the value, and in
the overlay (where no theme mode sets it again) every red drew transparent, the
robot pill offline dot included. It is #e5484d now (a page theme still overrides
it), and the overlay CSS test refuses a property defined from itself.

Changes

ddiff --git a/public/panel.css b/public/panel.css
iindex 784f508..e756220 100644
---- a/public/panel.css
++++ b/public/panel.css
@@@ -7,7 +7,7 @@
    --bg: var(--bg-primary, #0d1117); --surface: var(--bg-card, #161b22); --raised: color-mix(in srgb, var(--surface) 84%, var(--text) 16%);
    --line: var(--border, #2d3540); --text: var(--text-primary, #e6edf3); --muted: var(--text-secondary, #8b96a3);
    --accent: #3d8bfd; --accent-ink: var(--on-accent, #fff); --ok: var(--success, #3fb950);
--  --warn: var(--warning, #d29922); --danger: var(--danger, #e5484d); --danger-deep: #a3191e;
++  --warn: var(--warning, #d29922); --danger: #e5484d; --danger-deep: #a3191e;
    /* Filled controls with white text use the strong shades: white on --accent is 3.3:1 and on --danger 3.9:1, under
       WCAG AA's 4.5:1; these are 5.2:1 and 5.0:1 (the network's readable accent fills). */
    --fill-accent: var(--accent-strong, #2563eb); --on-fill-accent: var(--on-accent-strong, #fff); --fill-danger: #d0343a;
ddiff --git a/test/overlay-controls-css.test.js b/test/overlay-controls-css.test.js
iindex 980c758..0edbba4 100644
---- a/test/overlay-controls-css.test.js
++++ b/test/overlay-controls-css.test.js
@@@ -35,4 +35,9 @@ const routes = fs.readFileSync(path.join(__dirname, '..', 'server', 'web', 'rout
  assert.ok(routes.includes("r.get('/panel/lock.svg', asset('lock.svg', 'image/svg+xml'))"), 'and the panel serves it');
  assert.ok(fs.existsSync(path.join(__dirname, '..', 'public', 'lock.svg')), 'the file exists');
  
++// 4. No custom property is defined from itself (`--danger: var(--danger, …)` is a cycle: the value is dropped, and every
++//    red in the overlay drew transparent, the robot pill's offline dot included).
++const cyclic = [...css.matchAll(/(--[a-z0-9-]+)\s*:\s*var\(\s*(--[a-z0-9-]+)/g)].filter((m) => m[1] === m[2]).map((m) => m[1]);
++assert.deepStrictEqual(cyclic, [], 'no custom property is defined from itself');
++
  console.log('overlay controls css: all checks passed');