Lucas WintherandClaude Opus 5
bb3c661ef6
Sub-project 1 of the redesign. The diagnosis that shaped it: a design system already existed and was never wired up. src/index.css defined --paper, --ink and a muted teal with a contract document behind them, while the app painted itself with shadcn's default white and near-black. Those tokens reached the screen in exactly two places — the carry meter and the +/- number colours. TOKENS. Two layers: --budget-* is the app's own vocabulary, defined once per theme, and shadcn's whole variable set points at it, so every primitive inherits both themes rather than being fought. Light is cool paper with ink navy; dark is deep slate, never pure black, because a black ground makes the hairlines and the carry meter float. The brand teal is --primary, NOT --accent. That is precisely what the old bug got wrong: shadcn's --accent is a subtle hover BACKGROUND paired with --accent-foreground, so a saturated colour there turns every hover into a coloured slab with unreadable text. src/cssPairs.test.ts now makes the rule mechanical — redefining either half of a shadcn pair without the other fails the build, in any block. CONTRAST was computed, not eyeballed: the weakest text pair is 5.50:1 against a 4.5:1 requirement, and field borders clear the 3:1 non-text requirement on both of their backgrounds. Verified afterwards by reading the tokens back out of the live browser in both themes rather than trusting the arithmetic. TYPE. Inter and JetBrains Mono, self-hosted (SIL OFL, licences committed alongside), latin + latin-ext only. Not in index.css: Bun's CSS bundler resolves every url() from disk and inlines woff2 as base64 — relative or absolute, and a "file" loader override does not stop it — which made the stylesheet 303 KB of render-blocking bytes and defeated the unicode-range subsetting entirely. They are injected at boot from one definition instead, which is the only arrangement identical in dev and in a subpath build. THEME TOGGLE cycles system / light / dark, remembers the choice in localStorage (a per-device display preference does not belong in the exported budget), keeps following the OS while set to "system", and is applied by a tiny inline script before first paint so a dark-theme user never sees a white flash. Every storage access is wrapped: localStorage throws outright in some configurations, and a theme preference must never stop the app booting. A REGRESSION I CAUSED AND CAUGHT: renaming --rule to --budget-rule silently killed the carry meter. An undefined custom property inside linear-gradient() does not warn, does not throw and does not fall back — the declaration is invalid, so the element paints nothing. It looked like a missing feature. Only pixel-sampling a screenshot found it. src/ui/cssTokens.test.ts now fails if any TypeScript file references a token src/index.css does not define. Also: one Section/Stat card treatment applied across month, year, summary and settings; quiet uppercase table headers; row hover; the rule-editing and purchase-row actions revealed on hover instead of six always-on links; a scroll fade on the year matrix so it reads as "more to come" rather than clipped; and "September 2026" instead of "2026-09" as the month heading. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
79 lines
3.1 KiB
TypeScript
79 lines
3.1 KiB
TypeScript
/**
|
|
* The one definition of the app's @font-face rules, shared by `build.ts`
|
|
* (which writes it to dist/fonts.css) and the dev server (which generates it
|
|
* per request) — the same shape as src/manifest.ts, and for the same reason:
|
|
* two copies is how the manifest came to hardcode `scope: "/"`.
|
|
*
|
|
* Why this is NOT in src/index.css, where it belongs on the face of it: Bun's
|
|
* CSS bundler inlines every woff2 it finds behind a `url()` as base64,
|
|
* unconditionally — `loader: { ".woff2": "file" }` does not change it. That
|
|
* turned the stylesheet into 303 KB of render-blocking bytes AND defeated the
|
|
* `unicode-range` subsetting, since a subset embedded in the stylesheet is
|
|
* downloaded whether or not a single character needs it. Served as files, the
|
|
* browser fetches only the subsets a glyph actually requires.
|
|
*/
|
|
|
|
/** Ordered, and the order is asserted by src/fontCss.test.ts. */
|
|
export const FONT_FILES = [
|
|
"inter-latin.woff2",
|
|
"inter-latin-ext.woff2",
|
|
"jetbrains-mono-latin.woff2",
|
|
"jetbrains-mono-latin-ext.woff2",
|
|
] as const;
|
|
|
|
/** Google's subset ranges, kept verbatim so the browser can skip a whole file. */
|
|
const LATIN =
|
|
"U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, " +
|
|
"U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, " +
|
|
"U+2212, U+2215, U+FEFF, U+FFFD";
|
|
const LATIN_EXT =
|
|
"U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, " +
|
|
"U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, " +
|
|
"U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF";
|
|
|
|
interface Face {
|
|
family: string;
|
|
weight: string;
|
|
file: (typeof FONT_FILES)[number];
|
|
range: string;
|
|
}
|
|
|
|
const FACES: Face[] = [
|
|
{ family: "Inter", weight: "100 900", file: "inter-latin.woff2", range: LATIN },
|
|
{ family: "Inter", weight: "100 900", file: "inter-latin-ext.woff2", range: LATIN_EXT },
|
|
{ family: "JetBrains Mono", weight: "400 700", file: "jetbrains-mono-latin.woff2", range: LATIN },
|
|
{ family: "JetBrains Mono", weight: "400 700", file: "jetbrains-mono-latin-ext.woff2", range: LATIN_EXT },
|
|
];
|
|
|
|
/**
|
|
* `base` always ends in "/" (see normalizeBase). Urls must be absolute from
|
|
* it: this stylesheet lives at the deploy root but the document can be several
|
|
* segments deep, and a relative url would resolve against the document and
|
|
* 404 on every route deeper than the base.
|
|
*
|
|
* `font-display: swap` because the first paint is a table of figures the owner
|
|
* wants to read now; blocking that on a font download is the wrong trade.
|
|
*/
|
|
export function buildFontCss(base: string): string {
|
|
const header =
|
|
"/* Generated by src/fontCss.ts. Do not edit: build.ts writes this file\n" +
|
|
" and the dev server serves the same output. SIL OFL 1.1 — see\n" +
|
|
" src/fonts/OFL-Inter.txt and src/fonts/OFL-JetBrainsMono.txt. */\n";
|
|
|
|
return (
|
|
header +
|
|
FACES.map(
|
|
(face) => `
|
|
@font-face {
|
|
font-family: "${face.family}";
|
|
font-style: normal;
|
|
font-weight: ${face.weight};
|
|
font-display: swap;
|
|
src: url("${base}fonts/${face.file}") format("woff2");
|
|
unicode-range: ${face.range};
|
|
}`,
|
|
).join("\n") +
|
|
"\n"
|
|
);
|
|
}
|