openvibers/openvibe.meme Commits
Stickers and the root line read on every theme (#52)
Changes
@@@ -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; }nnew file mode 100644@@@ -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');
@@ -51,10 +51,10 @@ html.ov-motion .mm-tree-lines path:nth-child(n+4) { animation-delay: .5s; }
@@ -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); }
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 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 { 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-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;
.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; }
.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)); }
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; }
.mm-s2 { --d: .12s; } .mm-s3 { --d: .24s; }
new file mode 100644
new file mode 100644
@@ -0,0 +1,16 @@
@@ -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');