openvibers/openvibe.shoes Commits
Shoe buttons use the room's fill and on colours (#24)
Changes
@@@ -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); }nnew file mode 100644@@@ -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');
@@ -21,7 +21,7 @@
@@ -21,7 +21,7 @@
.sh-sec { margin: 34px 0 0; }
.sh-sec { margin: 34px 0 0; }
.sh-sec h2 { margin: 0 0 8px; font-size: clamp(20px, 2.4vw, 26px); }
.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-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 svg { width: 18px; height: 18px; }
.sh-btn-quiet { background: transparent; color: var(--room-strong, var(--text-primary)); }
.sh-btn-quiet { background: transparent; color: var(--room-strong, var(--text-primary)); }
.sh-btn:hover { filter: brightness(1.06); }
.sh-btn:hover { filter: brightness(1.06); }
new file mode 100644
new file mode 100644
@@ -0,0 +1,17 @@
@@ -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');