openvibers/openvibe.meme Commits

Stickers and the root line read on every theme (#52)

OP OpenVibers committed 12 days ago · 287e6a85a4 · 2 files, +18 −2

Changes

ddiff --git a/public/css/meme.css b/public/css/meme.css
iindex 7f363cb..8c326ff 100644
---- a/public/css/meme.css
++++ b/public/css/meme.css
@@@ -51,10 +51,10 @@ html.ov-motion .mm-tree-lines path:nth-child(n+4) { animation-delay: .5s; }
background: var(--bg-card, #0f1729); border: 1px solid color-mix(in srgb, var(--room-accent) 45%, var(--border, #1f2d47)); box-shadow: 0 8px 22px rgba(0, 0, 0, .22); }
.mm-node small { font-weight: 600; color: var(--text-muted, #7386a3); font-size: .7rem; }
.mm-node-root { left: 50%; top: 22%; padding: 10px 16px; font-size: .95rem; background: var(--room-fill); color: var(--room-on); border-color: transparent; }
--.mm-node-root small { color: inherit; opacity: .75; }
++.mm-node-root small { color: inherit; opacity: .92; }
.mm-n1 { left: 23%; top: 67%; } .mm-n2 { left: 50%; top: 67%; } .mm-n3 { left: 77%; top: 67%; }
.mm-sticker { position: absolute; padding: 4px 10px; border-radius: 8px; font: 900 .78rem/1 Impact, 'Arial Black', sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #fff;
-- background: color-mix(in srgb, var(--room-accent) 70%, #000); rotate: -8deg; box-shadow: 0 6px 14px rgba(0, 0, 0, .25); }
++ background: color-mix(in srgb, var(--room-accent) 58%, #000); rotate: -8deg; box-shadow: 0 6px 14px rgba(0, 0, 0, .25); }
.mm-s1 { left: 6%; top: 88%; } .mm-s2 { left: 31%; top: 90%; rotate: 7deg; } .mm-s3 { left: 82%; top: 89%; rotate: -4deg; }
html.ov-motion .mm-sticker { animation: mm-fan .7s cubic-bezier(.2,.9,.3,1.3) both; animation-delay: calc(.9s + var(--d, 0s)); }
.mm-s2 { --d: .12s; } .mm-s3 { --d: .24s; }
ddiff --git a/test/contrast.test.js b/test/contrast.test.js
nnew file mode 100644
iindex 0000000..958c409
---- /dev/null
++++ b/test/contrast.test.js
@@@ -0,0 +1,16 @@
++'use strict';
++// WCAG 2.1 AA: white sticker text was 4.4:1 on a 70% room-accent fill, and the root node's small line was 4.1:1
++// at .75 opacity. The sticker fill is now 58% accent and the root line sits at .92.
++// 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', 'meme.css'), 'utf8');
++assert.ok(
++ css.includes('background: color-mix(in srgb, var(--room-accent) 58%, #000); rotate: -8deg;'),
++ 'the sticker fill darkens the room accent under white text'
++);
++assert.ok(!css.includes('var(--room-accent) 70%, #000'), 'the 70% sticker fill is gone');
++assert.ok(css.includes('.mm-node-root small { color: inherit; opacity: .92; }'), 'the root node small line is .92, not .75');
++console.log('contrast: stickers and the root line read');