openvibers/openvibe.live Commits

The chat send button takes the on-accent ink (#633)

OP OpenVibers committed 6 days ago · dbbfb04240 · 2 files, +43 −3

Its fill is --accent-dark, so it takes the ink drawn for an accent fill, not the theme's page ink.
In daylight #1a1a2e sat on #6d28d9 at 2.40:1 — below even the 3:1 a UI icon needs; the white icon
disappeared. Measured at 390 px, signed out, on openvibe.live/chat. The dark theme went from 5.69:1
to 6.70:1.

Hover kept the same fill and brightens it instead of swapping to --accent, where neither black
(3.9:1 on daylight's #7a4ddb) nor white (3.68:1 on Vibe's #3b82f6) reads in both modes. The
touch-device override that put the page ink back is gone with it.

Changes

ddiff --git a/public/css/style.css b/public/css/style.css
iindex b96c1b4c..2f6d1675 100644
---- a/public/css/style.css
++++ b/public/css/style.css
@@@ -3098,11 +3098,11 @@ a.pulse-card:hover { border-color: var(--accent); transform: translateY(-2px); }
      position: absolute; right: 4px; bottom: 4px;
      padding: 6px 8px; background: var(--accent-dark);
      border: none; border-radius: var(--radius);
--    color: var(--text-primary); font-size: 0.85rem;
++    color: var(--on-accent, #fff); font-size: 0.85rem;
      cursor: pointer; transition: background var(--ov-dur-2, 0.15s);
      z-index: 1;
  }
--.chat-send-btn:hover { background: var(--accent); color: #000; }
++.chat-send-btn:hover { background: var(--accent-dark); color: var(--on-accent, #fff); filter: brightness(1.18); }
  .chat-tools-row {
      display: flex; gap: 4px; align-items: center;
      padding: 4px 0 0;
@@@ -7766,7 +7766,6 @@ body.fabs-tucked .messenger-toggle, body.fabs-tucked .floating-chat-fab, body.fa
  @media (hover: none) {
      .stream-card:hover { transform: none; border-color: var(--border); box-shadow: none; }
      .paste-card:hover { transform: none; border-color: var(--border); box-shadow: none; }
--    .chat-send-btn:hover { background: var(--accent-dark); color: var(--text-primary); }
      .btn:hover { filter: none; }
  }
  
ddiff --git a/test/send-button-ink.test.js b/test/send-button-ink.test.js
nnew file mode 100644
iindex 00000000..23df633b
---- /dev/null
++++ b/test/send-button-ink.test.js
@@@ -0,0 +1,41 @@
++/**
++ * The chat send button sits on an accent fill, so it takes the on-accent ink. It used to take
++ * `var(--text-primary)`, which is the theme's *page* ink: fine on the dark themes (near-white on
++ * #1d4ed8) and unreadable on the light ones, where daylight's #1a1a2e sat on #6d28d9 at 2.4:1
++ * (measured at 390 px, signed out, openvibe.live/chat). That is below even the 3:1 a UI icon needs.
++ *
++ *   node test/send-button-ink.test.js
++ */
++'use strict';
++const assert = require('assert');
++const fs = require('fs');
++const path = require('path');
++
++const css = fs.readFileSync(path.join(__dirname, '..', 'public', 'css', 'style.css'), 'utf8');
++
++// Every rule that paints the send button: selector, then its declarations.
++const rules = [...css.matchAll(/([^{}]*\.chat-send-btn[^{}]*)\{([^{}]*)\}/g)]
++    .map(([, sel, body]) => ({ sel: sel.trim().split('\n').pop().trim(), body }))
++    .filter((r) => r.sel.startsWith('.chat-send-btn') || r.sel.includes('.chat-send-btn'));
++
++assert.ok(rules.length >= 2, `found the send button's rules (${rules.length})`);
++
++for (const r of rules) {
++    const color = (/(?:^|;|\s)color:\s*([^;]+)/.exec(r.body) || [])[1];
++    const overrides = /\.chat-send-btn/.test(r.sel) && !/^\.chat-send-btn(\.[\w-]+)?(:[\w-]+)?$/.test(r.sel.split(',')[0].trim());
++    if (!color || overrides) continue;   // layout-only or a wider context rule
++    assert.ok(
++        /var\(--on-accent\b/.test(color),
++        `${r.sel}: "${color.trim()}" is the page ink; an accent fill takes var(--on-accent, #fff)`
++    );
++}
++
++// The touch-device block must not put the page ink back on the fill.
++const touch = /@media \(hover: none\) \{([\s\S]*?)\n\}/.exec(css);
++assert.ok(touch, 'the touch-device block is still there');
++assert.ok(
++    !/\.chat-send-btn:hover\s*\{[^}]*color:\s*var\(--text-primary\)/.test(touch[1]),
++    'the touch-device hover rule still paints the page ink on the send button'
++);
++
++console.log(`send button ink: ${rules.length} rules take the on-accent ink`);