mca/parking_solution
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 10 Wiki Activity

feat(web): self-host Chakra Petch as the app's primary face

Browse Source 
The booth is an offline appliance — no webfont CDN — so the font ships
from public/fonts/chakra-petch: latin subset (covers en + sq ë/ç), the
weights the UI actually uses (400/600/700 + 400 italic, ~40 KB total),
SIL OFL license alongside the files. Chakra Petch leads all four family
tokens (mono/display/ui/body) with the previous stacks kept as fallback;
index.html preloads the two everywhere-weights so first paint doesn't
flash the fallback. Not a true monospace — .num/.tabular still request
tabular figures and columns verified aligned in the built app.

Claude-Session: https://claude.ai/code/session_01Xcm6ikLgGoCxxHrxtjkk5V
This commit is contained in:
Julian Çuni
2026-07-05 15:23:15 +02:00
parent fd9885e9ec
commit dc2cdc0a91
7 changed files with 142 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/index.css
+45 -10
View File
@@ -13,9 +13,42 @@
exposed as utilities (night-*, ink-*, paper-*, flag/amber/green/blue, the
spacing/type/shadow scales) for new work.
Offline appliance: NO webfont @import (no network at runtime). Goldplay (the
TRM display face) is not self-hosted yet — display/heading text falls back to
a clean sans stack; wire local Goldplay @font-face here if it's wanted. */
Offline appliance: NO webfont @import (no network at runtime). The primary
face is Chakra Petch, SELF-HOSTED from public/fonts/chakra-petch (SIL OFL,
license alongside the files) — latin subset only (covers en + sq ë/ç), the
weights the UI actually uses (400/600/700 + 400 italic). Not a true
monospace: it stays FIRST in --font-mono for the look, with the real mono
stack behind it as fallback; .num/.tabular still request tabular figures. */
@font-face {
font-family: "Chakra Petch";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/fonts/chakra-petch/chakra-petch-latin-400.woff2") format("woff2");
}
@font-face {
font-family: "Chakra Petch";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/fonts/chakra-petch/chakra-petch-latin-600.woff2") format("woff2");
}
@font-face {
font-family: "Chakra Petch";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/fonts/chakra-petch/chakra-petch-latin-700.woff2") format("woff2");
}
@font-face {
font-family: "Chakra Petch";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/fonts/chakra-petch/chakra-petch-latin-400-italic.woff2") format("woff2");
}
@theme {
/* ============================================================
TERMINAL ACCENTS — aligned onto TRM's exact values.
@@ -92,13 +125,15 @@
--color-viz-8: #5a5a53;
/* ---------- TYPE — families ---------- */
/* Mono is the booth's primary face (data-dense, tabular). Display/UI fall
back to a clean sans (Goldplay not self-hosted — see header note). */
--font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular",
"Menlo", "Consolas", monospace;
--font-display: "Goldplay", "Helvetica Neue", Arial, sans-serif;
--font-ui: "Goldplay", "Helvetica Neue", Arial, sans-serif;
--font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
/* Chakra Petch (self-hosted, see @font-face above) is the booth's primary
face everywhere — it leads every stack so headings, body, and the
`font-mono` chrome all render with it; the stacks behind it are the
pre-2026-07-05 fallbacks for glyphs outside the latin subset. */
--font-mono: "Chakra Petch", "JetBrains Mono", "IBM Plex Mono", ui-monospace,
"SFMono-Regular", "Menlo", "Consolas", monospace;
--font-display: "Chakra Petch", "Helvetica Neue", Arial, sans-serif;
--font-ui: "Chakra Petch", "Helvetica Neue", Arial, sans-serif;
--font-body: "Chakra Petch", "Inter", "Helvetica Neue", Arial, sans-serif;
/* ---------- TYPE — scale (TRM, optimised for data density) ---------- */
--text-overline: 11px;