tudor/school_compare
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(design): correct the font assertion and make the Leaflet overrides win
PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 1m3s
Details
PR Checks / Backend Smoke (pull_request) Successful in 8s
Details
PR Checks / Build Backend (no push) (pull_request) Successful in 10s
Details
PR Checks / Build Frontend (no push) (pull_request) Successful in 49s
Details
PR Checks / Build Pipeline (no push) (pull_request) Successful in 10s
Details
PR Checks / AI Code Review (Claude) (pull_request) Successful in 2m10s
Details

Browse Source 
Two follow-ups from watching the staging E2E run and re-auditing the live site.

The typeface gate failed, but the site was right. Staging now serves
"Schibsted Grotesk", "Schibsted Grotesk Fallback", …, -apple-system, sans-serif
— exactly what it should. My assertion was /Times|serif$/, and `serif$` matches
the tail of `sans-serif`, so a healthy stack could never pass. It now checks
the FIRST family in the stack (the only one actually requested) and matches
Times as a whole word. Also asserts running prose resolves to Literata, which
the earlier version never covered.

The Leaflet overrides from the previous fix never took effect. leaflet.css is
imported from a client component, so its chunk loads after globals.css; at
equal specificity (both bare `.leaflet-container`) the later sheet wins.
Verified on the live page: my rule sat at stylesheet index 0, Leaflet's at
index 3, and the attribution link was still #0078A8. Prefixing the overrides
with `html` takes them to 0,1,1, which beats a bare class regardless of load
order — injecting that on the live page turned the background to
rgb(233,232,226) and the link to rgb(88,74,155).

The palette gate would have caught this, except it skipped everything inside
.leaflet-container to avoid flagging OSM tile imagery — which also skipped
Leaflet's own chrome. Narrowed the exemption to .leaflet-tile-pane so the map
controls are now covered.

Also dropped the duplicated family name from the font tokens: next/font
already expands the variable to the family plus its metric-matched fallback,
so the stack was naming Schibsted Grotesk twice. It looked like a safety net
but wasn't — an unresolvable var() with no fallback invalidates the whole
declaration, so the literal after it never gets a turn.

Verified against live staging: body and headings resolve to Schibsted Grotesk,
prose to Literata, the search input is --text-primary rather than pure black,
and the higher-specificity Leaflet rules win when injected.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Tudor
2026-08-06 14:04:36 +01:00
co-authored by Claude Opus 5
parent 2433101fa0
commit 45a3e7fb8f
2 changed files with 44 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nextjs-app/app/globals.css
+21 -9
View File
@@ -121,10 +121,17 @@
--scrim: rgba(22, 32, 42, 0.55);
/* ── Type ───────────────────────────────────────────────────────── */
--font-display: var(--font-schibsted), 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
--font-ui: var(--font-schibsted), 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
--font-data: var(--font-schibsted), 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
--font-prose: var(--font-literata), 'Literata', Georgia, serif;
/* next/font already expands --font-schibsted to the family plus its
metric-matched fallback, so naming the family again here only made the
stack say it twice. It read like a safety net but wasn't one: a var()
with no fallback that resolves to nothing invalidates the whole
declaration, so the literal after it never gets a turn. The real
safeguard is that these classes sit on <html>, where :root can see
them — see app/layout.tsx. */
--font-display: var(--font-schibsted), -apple-system, BlinkMacSystemFont, sans-serif;
--font-ui: var(--font-schibsted), -apple-system, BlinkMacSystemFont, sans-serif;
--font-data: var(--font-schibsted), -apple-system, BlinkMacSystemFont, sans-serif;
--font-prose: var(--font-literata), Georgia, serif;
/* Type scale, 1.2 ratio off a 1rem base. New work should use these
rather than inventing another font-size. */
@@ -421,28 +428,33 @@ table,
* bar would otherwise sit on a near-black page.
*
* The tiles themselves stay as OSM renders them; only the chrome is ours.
*
* Every selector here is prefixed with `html` on purpose. leaflet.css is
* imported from a client component, so its chunk loads AFTER globals.css; at
* equal specificity the later sheet wins and these overrides lose silently.
* The `html` prefix takes them to 0,1,1 so load order stops mattering.
*/
.leaflet-container {
html .leaflet-container {
background: var(--bg-secondary);
font-family: var(--font-ui);
}
.leaflet-control-attribution {
html .leaflet-control-attribution {
background: rgba(var(--text-inverse-rgb), 0.82);
color: var(--text-muted);
}
.leaflet-control-attribution a {
html .leaflet-control-attribution a {
color: var(--brand);
}
.leaflet-bar a {
html .leaflet-bar a {
background: var(--bg-card);
color: var(--text-primary);
border-bottom-color: var(--border);
}
.leaflet-bar a:hover {
html .leaflet-bar a:hover {
background: var(--bg-secondary);
color: var(--text-primary);
}