| 1 | import { readFileSync } from "node:fs"; |
| 2 | import { describe, expect, it } from "vitest"; |
| 3 | import { resolveWhale } from "./whale-tokens"; |
| 4 | |
| 5 | const CSS = readFileSync(new URL("../app/globals.css", import.meta.url), "utf8"); |
| 6 | |
| 7 | function selectorBlock(selector: string): string { |
| 8 | const match = CSS.match(new RegExp(`(?:^|\n)${selector.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}\\s*\\{([^}]*)\\}`, "s")); |
| 9 | if (!match) throw new Error(`Missing CSS selector: ${selector}`); |
| 10 | return match[1]; |
| 11 | } |
| 12 | |
| 13 | function selectorVars(selector: string): Record<string, string> { |
| 14 | const block = selectorBlock(selector); |
| 15 | const vars: Record<string, string> = {}; |
| 16 | // Values may be a literal hex or a `var(--whale-*)` reference into the |
| 17 | // generated app/tokens.css; non-color values (channel triples, lengths) are |
| 18 | // skipped, exactly as the hex-only regex used to skip them. |
| 19 | for (const match of block.matchAll(/--([\w-]+):\s*([^;]+);/g)) { |
| 20 | const value = resolveWhale(match[2].trim()); |
| 21 | if (/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(value)) vars[match[1]] = value; |
| 22 | } |
| 23 | return vars; |
| 24 | } |
| 25 | |
| 26 | function relativeLuminance(hex: string): number { |
| 27 | const full = hex.length === 4 ? hex.slice(1).split("").map((c) => c + c).join("") : hex.slice(1); |
| 28 | const channels = full |
| 29 | .match(/.{2}/g)! |
| 30 | .map((value) => Number.parseInt(value, 16) / 255) |
| 31 | .map((value) => (value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4)); |
| 32 | |
| 33 | return channels[0] * 0.2126 + channels[1] * 0.7152 + channels[2] * 0.0722; |
| 34 | } |
| 35 | |
| 36 | function contrastRatio(foreground: string, background: string): number { |
| 37 | const lighter = Math.max(relativeLuminance(foreground), relativeLuminance(background)); |
| 38 | const darker = Math.min(relativeLuminance(foreground), relativeLuminance(background)); |
| 39 | return (lighter + 0.05) / (darker + 0.05); |
| 40 | } |
| 41 | |
| 42 | describe("docs theme contrast contract", () => { |
| 43 | // Tidal Folio: paper is the site default (the bare `.docs-theme` block |
| 44 | // inherits the paper tokens from `:root`), and the whale's dark stage is |
| 45 | // the opt-in override, set through the shared below-the-waterline rule |
| 46 | // plus the docs-specific inks. Both are checked. |
| 47 | const belowWaterline = () => |
| 48 | selectorVars('.ocean-column,\n.site-footer,\nhtml[data-theme="dark"] .docs-portal'); |
| 49 | const themes = () => [ |
| 50 | { ...selectorVars(":root"), ...selectorVars(".docs-theme") }, |
| 51 | { |
| 52 | ...selectorVars(":root"), |
| 53 | ...belowWaterline(), |
| 54 | ...selectorVars('html[data-theme="dark"] .docs-theme'), |
| 55 | }, |
| 56 | ]; |
| 57 | |
| 58 | it("keeps current and hover sidebar text at WCAG AA contrast", () => { |
| 59 | for (const theme of themes()) { |
| 60 | const accent = theme["docs-accent"]; |
| 61 | const background = theme["paper"]; |
| 62 | expect(contrastRatio(accent, background)).toBeGreaterThanOrEqual(4.5); |
| 63 | } |
| 64 | expect(CSS).toMatch(/\.docs-sidebar-link:hover,\s*\.docs-sidebar-link-current\s*{[^}]*color:\s*var\(--docs-accent\)/s); |
| 65 | }); |
| 66 | |
| 67 | it("keeps secondary button text at WCAG AA contrast", () => { |
| 68 | for (const theme of themes()) { |
| 69 | const text = theme["docs-button-text"]; |
| 70 | const background = theme["docs-button-bg"]; |
| 71 | expect(contrastRatio(text, background)).toBeGreaterThanOrEqual(4.5); |
| 72 | } |
| 73 | expect(selectorBlock(".docs-theme .portal-button-secondary")).toContain( |
| 74 | "color: var(--docs-button-text)", |
| 75 | ); |
| 76 | }); |
| 77 | }); |
| 78 |