openvibers/openvibe.today Commits
Done pills read on dark (#59)
Changes
@@@ -36,7 +36,7 @@ html, body { margin: 0; background: var(--bg-primary, #0a0f1c); color: var(--tex.td-pill.is-live { background: var(--live-red, #e11d48); color: #fff; }.td-pill.is-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: td-pulse 1.4s ease-in-out infinite; }.td-pill.is-off { background: color-mix(in srgb, var(--text-muted, #7386a3) 22%, transparent); color: var(--text-secondary, #96a7c2); }--.td-pill.is-done { background: color-mix(in srgb, var(--text-muted, #7386a3) 14%, transparent); color: var(--text-muted, #7386a3); }++.td-pill.is-done { background: color-mix(in srgb, var(--text-muted, #7386a3) 14%, transparent); color: var(--text-secondary, #9aa7bd); }.td-tag { display: inline-flex; padding: 1px 8px; border-radius: 999px; font-size: .7rem; font-weight: 700; color: var(--text-secondary, #96a7c2); border: 1px solid var(--border, #1f2d47); white-space: nowrap; }.td-tag.is-remind { border-color: color-mix(in srgb, var(--room-accent) 55%, var(--border, #1f2d47)); color: var(--room-strong); }@keyframes td-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }nnew file mode 100644@@@ -0,0 +1,15 @@++'use strict';++// WCAG 2.1 AA: the done pill was muted text on a 14% muted wash (4.4:1 on dark). The text now uses the theme's++// secondary colour on the same wash.++// node test/contrast.test.js++const assert = require('assert');++const fs = require('fs');++const path = require('path');++++const css = fs.readFileSync(path.join(__dirname, '..', 'public', 'css', 'today.css'), 'utf8');++assert.ok(++ css.includes('.td-pill.is-done { background: color-mix(in srgb, var(--text-muted, #7386a3) 14%, transparent); color: var(--text-secondary, #9aa7bd); }'),++ 'the done pill takes the secondary text colour on its muted wash'++);++assert.ok(!css.includes('.td-pill.is-done { background: color-mix(in srgb, var(--text-muted, #7386a3) 14%, transparent); color: var(--text-muted, #7386a3); }'), 'the muted done text is gone');++console.log('contrast: the done pill reads on dark');
@@ -36,7 +36,7 @@ html, body { margin: 0; background: var(--bg-primary, #0a0f1c); color: var(--tex
@@ -36,7 +36,7 @@ html, body { margin: 0; background: var(--bg-primary, #0a0f1c); color: var(--tex
.td-pill.is-live { background: var(--live-red, #e11d48); color: #fff; }
.td-pill.is-live { background: var(--live-red, #e11d48); color: #fff; }
.td-pill.is-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: td-pulse 1.4s ease-in-out infinite; }
.td-pill.is-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: td-pulse 1.4s ease-in-out infinite; }
.td-pill.is-off { background: color-mix(in srgb, var(--text-muted, #7386a3) 22%, transparent); color: var(--text-secondary, #96a7c2); }
.td-pill.is-off { background: color-mix(in srgb, var(--text-muted, #7386a3) 22%, transparent); color: var(--text-secondary, #96a7c2); }
-.td-pill.is-done { background: color-mix(in srgb, var(--text-muted, #7386a3) 14%, transparent); color: var(--text-muted, #7386a3); }
+.td-pill.is-done { background: color-mix(in srgb, var(--text-muted, #7386a3) 14%, transparent); color: var(--text-secondary, #9aa7bd); }
.td-tag { display: inline-flex; padding: 1px 8px; border-radius: 999px; font-size: .7rem; font-weight: 700; color: var(--text-secondary, #96a7c2); border: 1px solid var(--border, #1f2d47); white-space: nowrap; }
.td-tag { display: inline-flex; padding: 1px 8px; border-radius: 999px; font-size: .7rem; font-weight: 700; color: var(--text-secondary, #96a7c2); border: 1px solid var(--border, #1f2d47); white-space: nowrap; }
.td-tag.is-remind { border-color: color-mix(in srgb, var(--room-accent) 55%, var(--border, #1f2d47)); color: var(--room-strong); }
.td-tag.is-remind { border-color: color-mix(in srgb, var(--room-accent) 55%, var(--border, #1f2d47)); color: var(--room-strong); }
@keyframes td-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes td-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
new file mode 100644
new file mode 100644
@@ -0,0 +1,15 @@
@@ -0,0 +1,15 @@
+'use strict';
+// WCAG 2.1 AA: the done pill was muted text on a 14% muted wash (4.4:1 on dark). The text now uses the theme's
+// secondary colour on the same wash.
+// node test/contrast.test.js
+const assert = require('assert');
+const fs = require('fs');
+const path = require('path');
+
+const css = fs.readFileSync(path.join(__dirname, '..', 'public', 'css', 'today.css'), 'utf8');
+assert.ok(
+ css.includes('.td-pill.is-done { background: color-mix(in srgb, var(--text-muted, #7386a3) 14%, transparent); color: var(--text-secondary, #9aa7bd); }'),
+ 'the done pill takes the secondary text colour on its muted wash'
+);
+assert.ok(!css.includes('.td-pill.is-done { background: color-mix(in srgb, var(--text-muted, #7386a3) 14%, transparent); color: var(--text-muted, #7386a3); }'), 'the muted done text is gone');
+console.log('contrast: the done pill reads on dark');