openvibers/openvibe.casino Commits
Game names in the ladder read on every theme (#18)
Changes
@@@ -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; }nnew file mode 100644@@@ -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');
@@ -55,7 +55,7 @@
@@ -55,7 +55,7 @@
.cs-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.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 { 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-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-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 { 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; }
.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; }
new file mode 100644
new file mode 100644
@@ -0,0 +1,15 @@
@@ -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');