openvibers/openvibe.shoes Commits

Shoe buttons use the room's fill and on colours (#24)

OP OpenVibers committed 12 days ago · 586034b13f · 2 files, +18 −1

Changes

ddiff --git a/public/css/shoes.css b/public/css/shoes.css
iindex 3828d6a..b296b3d 100644
---- a/public/css/shoes.css
++++ b/public/css/shoes.css
@@@ -21,7 +21,7 @@
.sh-sec { margin: 34px 0 0; }
.sh-sec h2 { margin: 0 0 8px; font-size: clamp(20px, 2.4vw, 26px); }
.sh-sec h3 { margin: 0 0 4px; font-size: 15px; }
--.sh-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--room-accent, var(--accent)); border-radius: 10px; background: var(--room-accent, var(--accent)); color: #fff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
++.sh-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--room-fill, var(--accent)); border-radius: 10px; background: var(--room-fill, var(--accent)); color: var(--room-on, #fff); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.sh-btn svg { width: 18px; height: 18px; }
.sh-btn-quiet { background: transparent; color: var(--room-strong, var(--text-primary)); }
.sh-btn:hover { filter: brightness(1.06); }
ddiff --git a/test/button-contrast.test.js b/test/button-contrast.test.js
nnew file mode 100644
iindex 0000000..8f91412
---- /dev/null
++++ b/test/button-contrast.test.js
@@@ -0,0 +1,17 @@
++'use strict';
++/**
++ * WCAG 2.1 AA: white on the room accent read 2.5:1 on Vibe's salmon. The room kit gives every room a button pair,
++ * --room-fill and --room-on, made for a filled button; the plain accent is still the fallback for a roomless page.
++ */
++const assert = require('assert');
++const fs = require('fs');
++const path = require('path');
++
++const css = fs.readFileSync(path.join(__dirname, '..', 'public', 'css', 'shoes.css'), 'utf8');
++assert.match(
++ css,
++ /\.sh-btn \{[^\n]*border: 1px solid var\(--room-fill, var\(--accent\)\);[^\n]*background: var\(--room-fill, var\(--accent\)\); color: var\(--room-on, #fff\);/,
++ 'the main button fills with --room-fill and writes --room-on on it'
++);
++assert.ok(!/\.sh-btn \{[^\n]*background: var\(--room-accent, var\(--accent\)\)/.test(css), 'white text is not put on the raw room accent');
++console.log('button contrast: the room fill pair is used');