block/themes-earthen
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(earthen): bundle Fraunces + Work Sans via @font-face + preset typography refs

Browse Source 
Host BundledFonts is inert, so declare the two fonts.json families as
@font-face against /templates/earthen/fonts/*.woff2 and point every preset's
typography.fontHeading/fontBody at template:earthen:<Family> so --font-heading
and --font-body resolve to the bundled faces.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Alex Dunmow 2026-07-06 21:14:29 +08:00
parent 46a45d7160
commit 51d12fd6a1
2 changed files with 32 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
manifest.yaml
View File

@ -114,6 +114,17 @@ css:
/* All colour values reference the 19-token HSL custom properties so they */ /* All colour values reference the 19-token HSL custom properties so they */
/* shift with the active preset (mossbed, clay-field, wet-loam). */ /* shift with the active preset (mossbed, clay-field, wet-loam). */
/* Bundled faces. The host does not yet emit @font-face for fonts.json
* (LoadedPlugin.BundledFonts is inert), so the theme declares them itself
* against the served /templates/earthen/fonts/... paths. Presets set
* typography.fontHeading/body to template:earthen:<Family> so
* --font-heading/--font-body resolve to these families. Families/weights
* match fonts.json exactly. */
@font-face { font-family: 'Fraunces'; src: url('/templates/earthen/fonts/fraunces-latin-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/templates/earthen/fonts/fraunces-latin-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('/templates/earthen/fonts/worksans-latin-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('/templates/earthen/fonts/worksans-latin-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
/* Paper grain backdrop — a single inline SVG noise pattern keeps page weight /* Paper grain backdrop — a single inline SVG noise pattern keeps page weight
inside the marketplace gate (≤ 81920 bytes). */ inside the marketplace gate (≤ 81920 bytes). */
.bg-paper-grain { .bg-paper-grain {

20
presets.json
View File

@ -5,6 +5,10 @@
"description": "Cream paper, deep moss primary, terracotta accent — the canonical Earthen look.", "description": "Cream paper, deep moss primary, terracotta accent — the canonical Earthen look.",
"theme": { "theme": {
"mode": "both", "mode": "both",
"typography": {
"fontHeading": "template:earthen:Fraunces",
"fontBody": "template:earthen:Work Sans"
},
"lightColors": { "lightColors": {
"background": "40 30% 96%", "background": "40 30% 96%",
"foreground": "120 25% 14%", "foreground": "120 25% 14%",
@ -55,6 +59,10 @@
"description": "Warm terracotta-led palette tuned for farm-stand and outdoor-brand sites.", "description": "Warm terracotta-led palette tuned for farm-stand and outdoor-brand sites.",
"theme": { "theme": {
"mode": "light", "mode": "light",
"typography": {
"fontHeading": "template:earthen:Fraunces",
"fontBody": "template:earthen:Work Sans"
},
"lightColors": { "lightColors": {
"background": "30 35% 95%", "background": "30 35% 95%",
"foreground": "20 35% 16%", "foreground": "20 35% 16%",
@ -84,6 +92,10 @@
"description": "Deep night-soil tones for conservation orgs that need quiet authority.", "description": "Deep night-soil tones for conservation orgs that need quiet authority.",
"theme": { "theme": {
"mode": "dark", "mode": "dark",
"typography": {
"fontHeading": "template:earthen:Fraunces",
"fontBody": "template:earthen:Work Sans"
},
"darkColors": { "darkColors": {
"background": "90 20% 6%", "background": "90 20% 6%",
"foreground": "60 20% 90%", "foreground": "60 20% 90%",
@ -113,6 +125,10 @@
"description": "Pale sage paper and honey light, misty forest dark — a softer, hopeful reading of the palette.", "description": "Pale sage paper and honey light, misty forest dark — a softer, hopeful reading of the palette.",
"theme": { "theme": {
"mode": "both", "mode": "both",
"typography": {
"fontHeading": "template:earthen:Fraunces",
"fontBody": "template:earthen:Work Sans"
},
"lightColors": { "lightColors": {
"background": "70 25% 95%", "background": "70 25% 95%",
"foreground": "130 20% 16%", "foreground": "130 20% 16%",
@ -163,6 +179,10 @@
"description": "Terracotta-led warm clay in light, firelight ember over deep loam in dark — moss becomes the accent.", "description": "Terracotta-led warm clay in light, firelight ember over deep loam in dark — moss becomes the accent.",
"theme": { "theme": {
"mode": "both", "mode": "both",
"typography": {
"fontHeading": "template:earthen:Fraunces",
"fontBody": "template:earthen:Work Sans"
},
"lightColors": { "lightColors": {
"background": "28 38% 95%", "background": "28 38% 95%",
"foreground": "18 40% 15%", "foreground": "18 40% 15%",