@lernapps/app-templates 0.3.0 → 0.3.1

package/dist/explainer-e2e.mjs

@@ -822,6 +822,22 @@ function explainerTests(root = ".") {
 function explainerRuntimeTests(root = ".") {
 	explainerSuite(root, "runtime");
 }
+/** The contrast ratio (WCAG 2.1) of two computed `rgb(…)` colours. */
+function contrastOf(foreground, background) {
+	const luminance = (colour) => {
+		const [red, green, blue] = (colour.match(/[\d.]+/g) ?? [
+			"0",
+			"0",
+			"0"
+		]).slice(0, 3).map((value) => {
+			const channel = Number(value) / 255;
+			return channel <= .03928 ? channel / 12.92 : ((channel + .055) / 1.055) ** 2.4;
+		});
+		return .2126 * red + .7152 * green + .0722 * blue;
+	};
+	const [light, dark] = [luminance(foreground), luminance(background)].sort((a, b) => b - a);
+	return (light + .05) / (dark + .05);
+}
 /** Only at desktop width, in a test of what does not depend on the width; what a page shows is tested at 360 px too. */
 const desktopOnly = (page) => test.skip((page.viewportSize()?.width ?? 0) <= 400, "only at desktop width");
 function explainerSuite(root, part) {
@@ -858,6 +874,21 @@ function explainerSuite(root, part) {
 					await expectNojs(page, item);
 					await expectVideos(page, item);
 				});
+				for (const scheme of ["light", "dark"]) test.describe(`${scheme} mode`, () => {
+					test.use({ colorScheme: scheme });
+					for (const item of (app.pages[lang] ?? []).filter((entry) => entry.figures.length > 0)) test(`${item.url || "./"}: the text of the drawn figures has 4.5:1 against the page`, async ({ page }) => {
+						await page.goto(`./${item.url}`);
+						const colours = await page.evaluate(() => {
+							const background = getComputedStyle(document.body).backgroundColor;
+							return [...document.querySelectorAll(".block-drawing text")].map((text) => ({
+								text: text.textContent ?? "",
+								fill: getComputedStyle(text).fill,
+								background
+							}));
+						});
+						for (const { text, fill, background } of colours) expect(contrastOf(fill, background), `"${text}" (${fill} on ${background}) in ${scheme} mode`).toBeGreaterThanOrEqual(4.5);
+					});
+				});
 				for (const item of app.others[lang] ?? []) test(`${item.url || "./"}: its heading, its links and anchors, its languages`, async ({ page }) => {
 					await page.goto(`./${item.url}`);
 					await expect(page.locator("main h1")).toHaveText(item.title);

package/explainer/package.json

@@ -9,7 +9,7 @@
   },
   "devDependencies": {
     "@lernapps/app-templates": "file:..",
-    "@lernapps/tooling": "0.3.1",
+    "@lernapps/tooling": "0.5.2",
     "vite-plus": "1.4.0"
   },
   "overrides": {

package/interactive/package.json

@@ -9,7 +9,7 @@
   },
   "devDependencies": {
     "@lernapps/app-templates": "file:..",
-    "@lernapps/tooling": "0.3.1",
+    "@lernapps/tooling": "0.5.2",
     "vite-plus": "1.4.0"
   },
   "overrides": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lernapps/app-templates",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "The templates of the archetypes of lernapps.net apps, and the runtime of each archetype that apps depend on (the quiz: engine, build step, styles, end-to-end tests, the schema of the question bank, the questions it shares with the explainer are in ./questions; the explainer: build step, client module with its exercises, the islands of its Vue components, styles, end-to-end tests, the schema of its content; the interactive archetype: build step, the start page and the app page around the app's own Vue components and core, its playthroughs, styles, end-to-end tests, the schemas of its start page and its playthroughs)",
   "license": "MIT",
   "repository": {

package/quiz/package.json

@@ -9,7 +9,7 @@
   },
   "devDependencies": {
     "@lernapps/app-templates": "file:..",
-    "@lernapps/tooling": "0.3.1",
+    "@lernapps/tooling": "0.5.2",
     "vite-plus": "1.4.0"
   },
   "overrides": {

package/runtime/explainer/e2e.ts

@@ -852,6 +852,19 @@ export function explainerRuntimeTests(root = "."): void {
   explainerSuite(root, "runtime");
 }
 
+/** The contrast ratio (WCAG 2.1) of two computed `rgb(…)` colours. */
+function contrastOf(foreground: string, background: string): number {
+  const luminance = (colour: string) => {
+    const [red, green, blue] = (colour.match(/[\d.]+/g) ?? ["0", "0", "0"]).slice(0, 3).map((value) => {
+      const channel = Number(value) / 255;
+      return channel <= 0.03928 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
+    });
+    return 0.2126 * red! + 0.7152 * green! + 0.0722 * blue!;
+  };
+  const [light, dark] = [luminance(foreground), luminance(background)].sort((a, b) => b - a);
+  return (light! + 0.05) / (dark! + 0.05);
+}
+
 /** Only at desktop width, in a test of what does not depend on the width; what a page shows is tested at 360 px too. */
 const desktopOnly = (page: Page) => test.skip((page.viewportSize()?.width ?? 0) <= 400, "only at desktop width");
 
@@ -905,6 +918,33 @@ function explainerSuite(root: string, part: "content" | "runtime"): void {
             });
           }
 
+          for (const scheme of ["light", "dark"] as const) {
+            test.describe(`${scheme} mode`, () => {
+              test.use({ colorScheme: scheme });
+              for (const item of (app.pages[lang] ?? []).filter((entry) => entry.figures.length > 0)) {
+                test(`${item.url || "./"}: the text of the drawn figures has 4.5:1 against the page`, async ({
+                  page,
+                }) => {
+                  await page.goto(`./${item.url}`);
+                  const colours = await page.evaluate(() => {
+                    const background = getComputedStyle(document.body).backgroundColor;
+                    return [...document.querySelectorAll(".block-drawing text")].map((text) => ({
+                      text: text.textContent ?? "",
+                      fill: getComputedStyle(text).fill,
+                      background,
+                    }));
+                  });
+                  for (const { text, fill, background } of colours) {
+                    expect(
+                      contrastOf(fill, background),
+                      `"${text}" (${fill} on ${background}) in ${scheme} mode`,
+                    ).toBeGreaterThanOrEqual(4.5);
+                  }
+                });
+              }
+            });
+          }
+
           for (const item of app.others[lang] ?? []) {
             test(`${item.url || "./"}: its heading, its links and anchors, its languages`, async ({ page }) => {
               await page.goto(`./${item.url}`);

package/runtime/explainer/explainer.css

@@ -759,22 +759,6 @@ button.explainer-help:focus-visible {
   border-bottom: 0;
 }
 
-.explainer-drawing .fig-on {
-  fill: var(--page-accent);
-}
-
-.explainer-drawing .fig-off {
-  fill: var(--page-background);
-}
-
-.explainer-drawing .fig-line {
-  stroke: var(--page-muted);
-}
-
-.explainer-drawing .fig-text {
-  fill: var(--page-text);
-}
-
 /* The choice of the learner's assistant on the start page, shown once the client module runs */
 .explainer-tutor-choice[hidden] {
   display: none;

package/runtime/shared/blocks/blocks.css

@@ -30,6 +30,24 @@
   height: auto;
 }
 
+/* The drawings take the page's colours, so they follow the dark mode too (the attributes in figures.ts are the fallback
+   for an SVG outside a page) */
+.block-drawing .fig-on {
+  fill: var(--page-accent);
+}
+
+.block-drawing .fig-off {
+  fill: var(--page-background);
+}
+
+.block-drawing .fig-line {
+  stroke: var(--page-muted);
+}
+
+.block-drawing .fig-text {
+  fill: var(--page-text);
+}
+
 .block-hundred-grid {
   width: 16rem;
 }