openvibers/openvibe.shoes Commits

Price drops and stale offers use the theme's readable status colours (#22)

OP OpenVibers committed 12 days ago · 8619092610 · 2 files, +20 −3

Changes

ddiff --git a/public/css/shoes.css b/public/css/shoes.css
iindex cac7175..3828d6a 100644
---- a/public/css/shoes.css
++++ b/public/css/shoes.css
@@@ -13,9 +13,11 @@
.sh-lede { margin: 0; color: var(--text-secondary, #96a7c2); line-height: 1.6; font-size: 16.5px; }
.sh-muted { color: var(--text-muted, #7386a3); }
.sh-fine { margin: 10px 0 0; color: var(--text-muted, #7386a3); font-size: 13px; line-height: 1.55; }
--.sh-good { color: var(--ok, #34d399); font-weight: 700; }
--.sh-stale { color: var(--warn, #fbbf24); font-weight: 700; }
--.sh-fresh { color: var(--success-text, var(--ok, #34d399)); font-weight: 700; }
++/* Status words use the theme's readable status colours (--ok/--warn are defined by no theme: pale green and amber
++ on light themes). */
++.sh-good { color: var(--success-text, #34d399); font-weight: 700; }
++.sh-stale { color: var(--warning-text, #fbbf24); font-weight: 700; }
++.sh-fresh { color: var(--success-text, #34d399); font-weight: 700; }
.sh-sec { margin: 34px 0 0; }
.sh-sec h2 { margin: 0 0 8px; font-size: clamp(20px, 2.4vw, 26px); }
.sh-sec h3 { margin: 0 0 4px; font-size: 15px; }
ddiff --git a/test/status-colours.test.js b/test/status-colours.test.js
nnew file mode 100644
iindex 0000000..442e127
---- /dev/null
++++ b/test/status-colours.test.js
@@@ -0,0 +1,15 @@
++'use strict';
++/**
++ * Status words ("fresh", "stale", "−$20 from list") use the theme's readable status colours. --ok and --warn are
++ * defined by no theme, so their pale green and amber fallbacks showed on light themes.
++ */
++const assert = require('assert');
++const fs = require('fs');
++const path = require('path');
++
++const css = fs.readFileSync(path.join(__dirname, '..', 'public', 'css', 'shoes.css'), 'utf8');
++assert.match(css, /\.sh-good \{ color: var\(--success-text,/);
++assert.match(css, /\.sh-stale \{ color: var\(--warning-text,/);
++assert.match(css, /\.sh-fresh \{ color: var\(--success-text,/);
++assert.ok(!/var\(--(ok|warn)\b/.test(css), 'no colour names a variable no theme defines');
++console.log('status colours: all checks passed');