openvibers/openvibe.food Commits
The budget tier badge reads on white (WCAG AA) (#178)
Changes
@@@ -16,7 +16,8 @@.dv-kit-name { font-weight: 700; color: var(--text-primary, #e6edf7); text-decoration: none; }.dv-kit-name:hover { text-decoration: underline; text-underline-offset: 3px; }.dv-tier { justify-self: start; font-size: .72rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border-light, #2c3d5c); }--.dv-budget { color: color-mix(in srgb, #22c55e 75%, var(--text-primary, #e6edf7)); border-color: rgba(74, 222, 128, .45); }++/* 75% green + the theme's text was #209a52 on white (3.61:1) in Daylight; the success text pair reads 5.4:1. */++.dv-budget { color: var(--success-text, #15803d); border-color: rgba(74, 222, 128, .45); }.dv-mid { color: color-mix(in srgb, #3b82f6 75%, var(--text-primary, #e6edf7)); border-color: rgba(96, 165, 250, .45); }.dv-premium { color: color-mix(in srgb, #d946ef 75%, var(--text-primary, #e6edf7)); border-color: rgba(240, 171, 252, .45); }.dv-watch { white-space: nowrap; }@@@ -5,10 +5,19 @@* by tier with their plans pages and a Watch link; Food never fetches the apps; the home and the navbar link it.*/const assert = require('assert');++const fs = require('fs');++const path = require('path');const { boot, check, done } = require('./helpers/boot');const delivery = require('../server/food/delivery');++const css = fs.readFileSync(path.join(__dirname, '..', 'public', 'css', 'delivery.css'), 'utf8');++(async () => {++ await check('the budget tier reads on white; no colour mix left in its text', () => {++ assert.ok(css.includes('.dv-budget { color: var(--success-text, #15803d); border-color: rgba(74, 222, 128, .45); }'), 'the budget tier uses the success text token');++ assert.ok(!/\.dv-budget \{[^}]*color-mix/.test(css), 'the budget tier text is not a mix');++ });++await check('one query, every app\'s own search, encoded; nothing for an empty query', () => {const links = delivery.linksFor(' pad thai & spring rolls ');assert.deepStrictEqual(links.map((l) => l.id), ['doordash', 'ubereats', 'grubhub', 'seamless', 'caviar', 'instacart']);
@@ -16,7 +16,8 @@
@@ -16,7 +16,8 @@
.dv-kit-name { font-weight: 700; color: var(--text-primary, #e6edf7); text-decoration: none; }
.dv-kit-name { font-weight: 700; color: var(--text-primary, #e6edf7); text-decoration: none; }
.dv-kit-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.dv-kit-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.dv-tier { justify-self: start; font-size: .72rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border-light, #2c3d5c); }
.dv-tier { justify-self: start; font-size: .72rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border-light, #2c3d5c); }
-.dv-budget { color: color-mix(in srgb, #22c55e 75%, var(--text-primary, #e6edf7)); border-color: rgba(74, 222, 128, .45); }
+/* 75% green + the theme's text was #209a52 on white (3.61:1) in Daylight; the success text pair reads 5.4:1. */
+.dv-budget { color: var(--success-text, #15803d); border-color: rgba(74, 222, 128, .45); }
.dv-mid { color: color-mix(in srgb, #3b82f6 75%, var(--text-primary, #e6edf7)); border-color: rgba(96, 165, 250, .45); }
.dv-mid { color: color-mix(in srgb, #3b82f6 75%, var(--text-primary, #e6edf7)); border-color: rgba(96, 165, 250, .45); }
.dv-premium { color: color-mix(in srgb, #d946ef 75%, var(--text-primary, #e6edf7)); border-color: rgba(240, 171, 252, .45); }
.dv-premium { color: color-mix(in srgb, #d946ef 75%, var(--text-primary, #e6edf7)); border-color: rgba(240, 171, 252, .45); }
.dv-watch { white-space: nowrap; }
.dv-watch { white-space: nowrap; }
@@ -5,10 +5,19 @@
@@ -5,10 +5,19 @@
* by tier with their plans pages and a Watch link; Food never fetches the apps; the home and the navbar link it.
* by tier with their plans pages and a Watch link; Food never fetches the apps; the home and the navbar link it.
*/
*/
const assert = require('assert');
const assert = require('assert');
+const fs = require('fs');
+const path = require('path');
const { boot, check, done } = require('./helpers/boot');
const { boot, check, done } = require('./helpers/boot');
const delivery = require('../server/food/delivery');
const delivery = require('../server/food/delivery');
+const css = fs.readFileSync(path.join(__dirname, '..', 'public', 'css', 'delivery.css'), 'utf8');
+
(async () => {
(async () => {
+ await check('the budget tier reads on white; no colour mix left in its text', () => {
+ assert.ok(css.includes('.dv-budget { color: var(--success-text, #15803d); border-color: rgba(74, 222, 128, .45); }'), 'the budget tier uses the success text token');
+ assert.ok(!/\.dv-budget \{[^}]*color-mix/.test(css), 'the budget tier text is not a mix');
+ });
+
await check('one query, every app\'s own search, encoded; nothing for an empty query', () => {
await check('one query, every app\'s own search, encoded; nothing for an empty query', () => {
const links = delivery.linksFor(' pad thai & spring rolls ');
const links = delivery.linksFor(' pad thai & spring rolls ');
assert.deepStrictEqual(links.map((l) => l.id), ['doordash', 'ubereats', 'grubhub', 'seamless', 'caviar', 'instacart']);
assert.deepStrictEqual(links.map((l) => l.id), ['doordash', 'ubereats', 'grubhub', 'seamless', 'caviar', 'instacart']);