openvibers/openvibe.rent Commits

City pages: readable open-on-the-site host links (#184)

OP OpenVibers committed 12 days ago · 3b0f3d9ec4 · 2 files, +18 −1

The host line used --accent-text, which is --accent-strong in the Vibe
theme (#3472d8 on the #131c2e card, 3.7:1). It now mixes the accent
with the body text, readable on dark and light themes. A test pins the
rule.

Changes

ddiff --git a/public/css/everywhere.css b/public/css/everywhere.css
iindex e44c133..8afbd07 100644
---- a/public/css/everywhere.css
++++ b/public/css/everywhere.css
@@@ -9,7 +9,7 @@ a.ew-kind:hover { border-color: var(--accent, #3b82f6); }
  .ew-open { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--text-primary, #e6edf7); }
  .ew-open:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: 3px; border-radius: 6px; }
  .ew-name { font-weight: 700; font-size: 1.05rem; }
--.ew-host { font-size: .82rem; color: var(--accent-text, var(--accent, #3b82f6)); overflow-wrap: anywhere; }
++.ew-host { font-size: .82rem; color: color-mix(in srgb, var(--accent, #3b82f6) 60%, var(--text-primary, #e6edf7)); overflow-wrap: anywhere; }
  .ew-best { margin: 0; font-size: .9rem; color: var(--text-secondary, #96a7c2); }
  .everywhere-here { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
  @media (prefers-reduced-motion: reduce) { .ew-site, .ew-site:hover { transition: none; transform: none; } }
ddiff --git a/test/everywhere-colours.test.js b/test/everywhere-colours.test.js
nnew file mode 100644
iindex 0000000..39bf329
---- /dev/null
++++ b/test/everywhere-colours.test.js
@@@ -0,0 +1,17 @@
++'use strict';
++/**
++ * The "open on the site" host line is text, not a button: --accent-text is --accent-strong in the Vibe theme (#3472d8
++ * on the #131c2e card, 3.7:1), so the host mixes the accent with the body text — readable on the dark and light themes.
++ */
++const assert = require('assert');
++const fs = require('fs');
++const path = require('path');
++
++const css = fs.readFileSync(path.join(__dirname, '..', 'public', 'css', 'everywhere.css'), 'utf8');
++assert.match(
++    css,
++    /\.ew-host \{[^}]*color: color-mix\(in srgb, var\(--accent, #3b82f6\) 60%, var\(--text-primary, #e6edf7\)\)/,
++    'the host text mixes the accent with the body text'
++);
++assert.ok(!/\.ew-host \{[^}]*color: var\(--accent-text/.test(css), 'the host text is not the button fill');
++console.log('everywhere colours: the host text is readable on dark and light');