Public: anyone can read this; the crew can change it.
The standards pages' two raw colours become design tokens #3611
Check · Review · Land · Live done — Landed and live in production.
mason/forge:mason/3556-the-standards-pages-two-raw-colours-beco → main 3 commits fork
3 files
changed +10
−11
docs/design/baseline.json −9
| @@ -1,14 +1,5 @@ | ||
| 1 | 1 | { |
| 2 | 2 | "files": { |
| 3 | "src/web/standards.ts": { | |
| 4 | "colour": 2, | |
| 5 | "size": 0, | |
| 6 | "motion": 0, | |
| 7 | "forced": 0, | |
| 8 | "focus": 0, | |
| 9 | "input": 0, | |
| 10 | "target": 0 | |
| 11 | }, | |
| 12 | 3 | "src/web/style/components.ts": { |
| 13 | 4 | "colour": 3, |
| 14 | 5 | "size": 2, |
src/web/standards.ts +5 −2
| @@ -22,6 +22,7 @@ | ||
| 22 | 22 | |
| 23 | 23 | import releases from "../core/releases.json" with { type: "json" }; |
| 24 | 24 | import { markPng, type MarkShape } from "../design/mark.ts"; |
| 25 | import { metaThemeColor } from "../design/themes.ts"; | |
| 25 | 26 | import { BODY_MAX, TITLE_MAX } from "../core/reports.ts"; |
| 26 | 27 | import { llmsRepos, sitemapRepos } from "../core/listings.ts"; |
| 27 | 28 | import { canRead, getRepo } from "../core/repos.ts"; |
| @@ -178,8 +179,10 @@ export function webManifest(ctx: Ctx): Response { | ||
| 178 | 179 | method: "GET", |
| 179 | 180 | params: { title: "title", text: "text", url: "url" }, |
| 180 | 181 | }, |
| 181 | background_color: "#fafafa", | |
| 182 | theme_color: "#fafafa", | |
| 182 | // The default light theme's ground, read from the theme registry | |
| 183 | // so the installed app's splash matches the page it opens on. | |
| 184 | background_color: metaThemeColor("light"), | |
| 185 | theme_color: metaThemeColor("light"), | |
| 183 | 186 | icons: [ |
| 184 | 187 | { src: "/icons/forge-192.png", sizes: "192x192", type: "image/png" }, |
| 185 | 188 | { src: "/icons/forge-512.png", sizes: "512x512", type: "image/png" }, |
test/standards.test.ts +5
| @@ -236,10 +236,15 @@ describe("what the open web expects", () => { | ||
| 236 | 236 | name: string; |
| 237 | 237 | display: string; |
| 238 | 238 | start_url: string; |
| 239 | background_color: string; | |
| 240 | theme_color: string; | |
| 239 | 241 | icons: { src: string; sizes: string; purpose?: string }[]; |
| 240 | 242 | }; |
| 241 | 243 | expect(m.display).toBe("standalone"); |
| 242 | 244 | expect(m.start_url).toBe("/"); |
| 245 | // The splash and chrome are the default light theme's ground. | |
| 246 | expect(m.background_color).toBe("#fafafa"); | |
| 247 | expect(m.theme_color).toBe("#fafafa"); | |
| 243 | 248 | expect(m.icons.some((i) => i.purpose === "maskable")).toBe(true); |
| 244 | 249 | for (const icon of m.icons) { |
| 245 | 250 | const png = await fetch(`${base}${icon.src}`); |
new above
offline