openvibers/openvibe.space Commits

Event template: filled buttons on the deeper pink (#171)

OP OpenVibers committed 12 days ago · 4a55d66f7a · 2 files, +2 −1

Changes

ddiff --git a/templates/spaces/site-event.html b/templates/spaces/site-event.html
iindex 5ffc4c3..2f5d4ac 100644
---- a/templates/spaces/site-event.html
++++ b/templates/spaces/site-event.html
@@@ -23,7 +23,7 @@
.hero p { color: var(--muted); font-size: 1.15rem; margin: 0 auto 26px; max-width: 46ch; }
.facts { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.facts span { padding: 8px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-weight: 600; font-size: .95rem; }
-- .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 700 1rem system-ui, sans-serif; text-decoration: none; cursor: pointer; }
++ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--accent-text); color: var(--on-accent); font: 700 1rem system-ui, sans-serif; text-decoration: none; cursor: pointer; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
section { padding-block: 48px; }
h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom: 20px; }
ddiff --git a/test/templates-contrast.test.js b/test/templates-contrast.test.js
iindex 6ebcc85..5c1a381 100644
---- a/test/templates-contrast.test.js
++++ b/test/templates-contrast.test.js
@@@ -12,6 +12,7 @@ const read = (id) => fs.readFileSync(path.join(__dirname, '..', 'templates', 'sp
const event = read('site-event');
assert.match(event, /--accent-text:\s*#b8326f;/, 'the event page has the readable text pink on white');
++assert.match(event, /\.btn \{[^}]*background: var\(--accent-text\); color: var\(--on-accent\);/, 'its filled buttons carry white on the deep pink (5.6:1), not on #d9468a (4.0:1)');
assert.match(event, /@media \(prefers-color-scheme: dark\)[^{]*\{[^}]*--accent-text:\s*#ff7ab6;/, 'and the brighter pink on the dark page');
assert.match(event, /\.date \{[^}]*color: var\(--accent-text\)/, 'the date uses the text pink');
assert.match(event, /\.timeline time \{[^}]*color: var\(--accent-text\)/, 'the event times use the text pink');