openvibers/openvibe.today Commits

Done pills read on dark (#59)

OP OpenVibers committed 13 days ago · cb50f5fd3f · 2 files, +16 −1

Changes

ddiff --git a/public/css/today.css b/public/css/today.css
iindex 6bebaf4..1b5a451 100644
---- a/public/css/today.css
++++ b/public/css/today.css
@@@ -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; } }
ddiff --git a/test/contrast.test.js b/test/contrast.test.js
nnew file mode 100644
iindex 0000000..694c157
---- /dev/null
++++ b/test/contrast.test.js
@@@ -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');