openvibers/openvibe.blog Commits
Buttons and .button links are --on-accent-strong on --accent-strong (openvibe-shared 1.13.0 tokens, 4.5:1 in every theme) instead of white on --accent (3.67:1, axe color-contrast serious on the 404 page's "The OpenVibe blog" link; found by the browser check, Host scripts/browser-check.js, WS-Q task 3); test/css-contrast.test.js
Changes
@@@ -45,7 +45,8 @@ label input[type=checkbox] { margin-right: 6px; }input, textarea, select { width: 100%; font: inherit; color: var(--text-primary); background: var(--bg-input, #0d1424); border: 1px solid var(--border-light, #2c3d5c); border-radius: 6px; padding: 8px 10px; }input[type=checkbox] { width: auto; }textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; }--button, .button { display: inline-block; margin-top: 10px; font: inherit; font-weight: 600; background: var(--accent, #3b82f6); color: var(--on-accent, #fff); border: 0; border-radius: 6px; padding: 8px 16px; cursor: pointer; text-decoration: none; }++/* --accent-strong / --on-accent-strong (openvibe-shared 1.13.0) read at 4.5:1 in every theme; white on --accent was 3.67:1. */++button, .button { display: inline-block; margin-top: 10px; font: inherit; font-weight: 600; background: var(--accent-strong, #1d4ed8); color: var(--on-accent-strong, #fff); border: 0; border-radius: 6px; padding: 8px 16px; cursor: pointer; text-decoration: none; }button.danger { background: var(--danger, #ef4444); }form.inline { display: inline; }form.inline button { margin: 0 0 0 8px; padding: 2px 10px; font-size: .85rem; }nnew file mode 100644@@@ -0,0 +1,13 @@++'use strict';++// Buttons (and .button links, the 404 page's "The OpenVibe blog") are --on-accent-strong on --accent-strong, which++// openvibe-shared derives at 4.5:1 or better in every theme; white on --accent read 3.67:1 (axe color-contrast,++// found by the browser check, OpenVibe.Host scripts/browser-check.js).++const assert = require('assert');++const fs = require('fs');++const path = require('path');++++const css = fs.readFileSync(path.join(__dirname, '..', 'public', 'css', 'blog.css'), 'utf8');++const rule = css.match(/button, \.button \{[^}]*\}/);++assert.ok(rule, 'the button rule');++assert.match(rule[0], /background: var\(--accent-strong, #1d4ed8\); color: var\(--on-accent-strong, #fff\);/);++console.log('css contrast: buttons use the 4.5:1 accent pair');
@@ -45,7 +45,8 @@ label input[type=checkbox] { margin-right: 6px; }
@@ -45,7 +45,8 @@ label input[type=checkbox] { margin-right: 6px; }
input, textarea, select { width: 100%; font: inherit; color: var(--text-primary); background: var(--bg-input, #0d1424); border: 1px solid var(--border-light, #2c3d5c); border-radius: 6px; padding: 8px 10px; }
input, textarea, select { width: 100%; font: inherit; color: var(--text-primary); background: var(--bg-input, #0d1424); border: 1px solid var(--border-light, #2c3d5c); border-radius: 6px; padding: 8px 10px; }
input[type=checkbox] { width: auto; }
input[type=checkbox] { width: auto; }
textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; }
textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; }
-button, .button { display: inline-block; margin-top: 10px; font: inherit; font-weight: 600; background: var(--accent, #3b82f6); color: var(--on-accent, #fff); border: 0; border-radius: 6px; padding: 8px 16px; cursor: pointer; text-decoration: none; }
+/* --accent-strong / --on-accent-strong (openvibe-shared 1.13.0) read at 4.5:1 in every theme; white on --accent was 3.67:1. */
+button, .button { display: inline-block; margin-top: 10px; font: inherit; font-weight: 600; background: var(--accent-strong, #1d4ed8); color: var(--on-accent-strong, #fff); border: 0; border-radius: 6px; padding: 8px 16px; cursor: pointer; text-decoration: none; }
button.danger { background: var(--danger, #ef4444); }
button.danger { background: var(--danger, #ef4444); }
form.inline { display: inline; }
form.inline { display: inline; }
form.inline button { margin: 0 0 0 8px; padding: 2px 10px; font-size: .85rem; }
form.inline button { margin: 0 0 0 8px; padding: 2px 10px; font-size: .85rem; }
new file mode 100644
new file mode 100644
@@ -0,0 +1,13 @@
@@ -0,0 +1,13 @@
+'use strict';
+// Buttons (and .button links, the 404 page's "The OpenVibe blog") are --on-accent-strong on --accent-strong, which
+// openvibe-shared derives at 4.5:1 or better in every theme; white on --accent read 3.67:1 (axe color-contrast,
+// found by the browser check, OpenVibe.Host scripts/browser-check.js).
+const assert = require('assert');
+const fs = require('fs');
+const path = require('path');
+
+const css = fs.readFileSync(path.join(__dirname, '..', 'public', 'css', 'blog.css'), 'utf8');
+const rule = css.match(/button, \.button \{[^}]*\}/);
+assert.ok(rule, 'the button rule');
+assert.match(rule[0], /background: var\(--accent-strong, #1d4ed8\); color: var\(--on-accent-strong, #fff\);/);
+console.log('css contrast: buttons use the 4.5:1 accent pair');