Pick any line to see why it is the way it is: the commit, the pull request and issue it came from, and what the agent was thinking.
| Merge branch 'worktree-agent-ad7c6d88d93adc817' | 1 | import assert from "node:assert/strict"; |
| 2 | import { readFileSync } from "node:fs"; | |
| 3 | import { test } from "node:test"; | |
| 4 | ||
| 5 | // The shared tokens every site draws from (packages/theme/tokens.css). | |
| 6 | const css = readFileSync(new URL("../../../../packages/theme/tokens.css", import.meta.url), "utf8"); | |
| 7 | ||
| 8 | function token(name: string): string { | |
| 9 | const found = css.match(new RegExp(`--g1t-${name}:\\s*(#[0-9a-f]{6});`, "i")); | |
| 10 | assert.ok(found, `--g1t-${name} is a six-digit hex colour`); | |
| 11 | return found[1].toLowerCase(); | |
| 12 | } | |
| 13 | ||
| 14 | function luminance(hex: string): number { | |
| 15 | const [r, g, b] = [1, 3, 5] | |
| 16 | .map((i) => parseInt(hex.slice(i, i + 2), 16) / 255) | |
| 17 | .map((c) => (c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4)); | |
| 18 | return 0.2126 * r + 0.7152 * g + 0.0722 * b; | |
| 19 | } | |
| 20 | ||
| 21 | function contrast(a: string, b: string): number { | |
| 22 | const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x); | |
| 23 | return (hi + 0.05) / (lo + 0.05); | |
| 24 | } | |
| 25 | ||
| 26 | test("the accent is the logo's lavender, and mint means success", () => { | |
| 27 | assert.equal(token("accent"), "#b6a8ff"); | |
| 28 | assert.equal(token("success"), "#86efc4"); | |
| 29 | }); | |
| 30 | ||
| 31 | test("merged reads apart from the accent", () => { | |
| 32 | assert.notEqual(token("merged"), token("accent")); | |
| 33 | assert.notEqual(token("merged"), token("success")); | |
| 34 | }); | |
| 35 | ||
| 36 | test("text colours meet WCAG AA on every surface", () => { | |
| 37 | for (const surface of ["bg", "surface", "raised"]) { | |
| 38 | for (const ink of ["fg", "muted", "accent", "success", "merged", "info", "warn", "danger"]) { | |
| 39 | const ratio = contrast(token(ink), token(surface)); | |
| 40 | assert.ok(ratio >= 4.5, `--g1t-${ink} on --g1t-${surface} is ${ratio.toFixed(2)}:1`); | |
| 41 | } | |
| 42 | } | |
| 43 | }); | |
| 44 | ||
| 45 | test("the dark base reads on an accent or success button", () => { | |
| 46 | for (const fill of ["accent", "accent-hover", "success"]) { | |
| 47 | const ratio = contrast(token("bg"), token(fill)); | |
| 48 | assert.ok(ratio >= 4.5, `--g1t-bg on --g1t-${fill} is ${ratio.toFixed(2)}:1`); | |
| 49 | } | |
| 50 | }); | |
| 51 | ||
| 52 | test("focus borders in the dim accent stand out from the page", () => { | |
| 53 | assert.ok(contrast(token("accent-dim"), token("bg")) >= 3); | |
| 54 | }); | |
| You choose how g1t looks: Auto follows your system, Light and Dark stay put, set from the account menu, the phone's You and help sheet, Settings → Account or the command palette; the page is drawn in your choice from the first byte, every colour has a light value that reads at 4.5:1 or better, code and diffs are highlighted for both, diagrams and the document editor follow along, the product tour and the g1t mark's avatar stay dark, and Dark is what you see until you choose; the workspaces guide says how. | 55 | |
| 56 | // The light palette (Appearance, lib/theme.ts): the same names after `light-`. | |
| 57 | ||
| 58 | test("the light accent is a deeper lavender, and light success is green", () => { | |
| 59 | assert.equal(token("light-accent"), "#6b52c8"); | |
| 60 | assert.equal(token("light-success"), "#0d7a52"); | |
| 61 | }); | |
| 62 | ||
| 63 | test("every dark token has a light one", () => { | |
| 64 | const dark = [...css.matchAll(/--g1t-(?!light-|font-)([a-z-]+):/g)].map((match) => match[1]); | |
| 65 | assert.ok(dark.length > 10); | |
| 66 | for (const name of dark) token(`light-${name}`); | |
| 67 | }); | |
| 68 | ||
| 69 | test("light text colours meet WCAG AA on every light surface", () => { | |
| 70 | for (const surface of ["bg", "surface", "raised"]) { | |
| 71 | for (const ink of ["fg", "fg-soft", "muted", "faint", "accent", "accent-hover", "success", "merged", "info", "warn", "danger"]) { | |
| 72 | const ratio = contrast(token(`light-${ink}`), token(`light-${surface}`)); | |
| 73 | assert.ok(ratio >= 4.5, `--g1t-light-${ink} on --g1t-light-${surface} is ${ratio.toFixed(2)}:1`); | |
| 74 | } | |
| 75 | } | |
| 76 | }); | |
| 77 | ||
| 78 | test("the light page reads on an accent or success button", () => { | |
| 79 | for (const fill of ["accent", "accent-hover", "success"]) { | |
| 80 | const ratio = contrast(token("light-bg"), token(`light-${fill}`)); | |
| 81 | assert.ok(ratio >= 4.5, `--g1t-light-bg on --g1t-light-${fill} is ${ratio.toFixed(2)}:1`); | |
| 82 | } | |
| 83 | }); | |
| 84 | ||
| 85 | test("light focus borders in the dim accent stand out from the page", () => { | |
| 86 | assert.ok(contrast(token("light-accent-dim"), token("light-bg")) >= 3); | |
| 87 | }); |
This file's history is long; its oldest lines are credited to the oldest commit read.