openvibers/openvibe.casino Commits

Game names in the ladder read on every theme (#18)

OP OpenVibers committed 12 days ago · c8ba3d766b · 2 files, +16 −1

Changes

ddiff --git a/public/css/casino.css b/public/css/casino.css
iindex 4a22b6d..ffd9905 100644
---- a/public/css/casino.css
++++ b/public/css/casino.css
@@@ -55,7 +55,7 @@
.cs-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cs-ladder a { display: grid; grid-template-columns: 96px minmax(0, 220px) minmax(0, 1fr) 72px; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 10px; color: var(--ovk-text); text-decoration: none; }
.cs-ladder a:hover { background: var(--ovk-panel); }
--.cs-l-game { font-size: 13px; font-weight: 700; color: var(--tone); }
++.cs-l-game { font-size: 13px; font-weight: 700; color: color-mix(in srgb, var(--tone) 55%, var(--text-primary, #e6edf7)); }
.cs-l-bet { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-l-bar { height: 10px; border-radius: 5px; background: var(--ovk-panel-2); overflow: hidden; }
.cs-l-bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--tone); transform-origin: 0 50%; animation: csGrow var(--ov-dur-4, .52s) var(--ov-ease-out, ease-out) both; }
ddiff --git a/test/contrast.test.js b/test/contrast.test.js
nnew file mode 100644
iindex 0000000..45e9443
---- /dev/null
++++ b/test/contrast.test.js
@@@ -0,0 +1,15 @@
++'use strict';
++// WCAG 2.1 AA: the ladder's game names were their fixed tone colour as text (3.4:1 on white, 3.6:1 on dark).
++// The tone now mixes 55% into the theme's text colour, so the name keeps its hue and gains the contrast.
++// 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', 'casino.css'), 'utf8');
++assert.ok(
++ css.includes('color: color-mix(in srgb, var(--tone) 55%, var(--text-primary, #e6edf7));'),
++ 'game names mix the ladder tone with the theme text colour'
++);
++assert.ok(!css.includes('.cs-l-game { font-size: 13px; font-weight: 700; color: var(--tone); }'), 'the bare tone colour is gone');
++console.log('contrast: game names read on every theme');