@uniweb/theming 0.1.4 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/theming",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Theming utilities for the Uniweb platform — shade generation, CSS generation, theme processing",
   "type": "module",
   "exports": {

package/src/css-generator.js

@@ -358,16 +358,22 @@ function generateFontCSS(fonts = {}) {
     }
 
     if (allFamilies.length > 0) {
-      const merged = new URL('https://fonts.googleapis.com/css2')
-      for (const f of allFamilies) {
-        merged.searchParams.append('family', f)
-      }
-      merged.searchParams.set('display', display)
+      // Build the css2 URL by hand. Google's css2 axis syntax uses ':' ',' ';'
+      // '@' as LITERAL separators and '+' for spaces. URLSearchParams.toString()
+      // percent-encodes all of them (%3A/%2C/%3B/%40), producing a URL that
+      // parses but is non-canonical — it only loads because Google's server
+      // decodes it leniently. A strict Google Fonts mirror/proxy or a future API
+      // change could reject it. Emit the canonical literal form instead.
+      // (getAll() already decoded '+'/'%20' to spaces, so restore spaces to '+'.)
+      const familyQuery = allFamilies
+        .map((f) => `family=${f.trim().replace(/\s+/g, '+')}`)
+        .join('&')
+      const href = `https://fonts.googleapis.com/css2?${familyQuery}&display=${display}`
 
       linkTags.unshift(
         `<link rel="preconnect" href="https://fonts.googleapis.com">`,
         `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>`,
-        `<link rel="stylesheet" href="${merged.toString()}">`,
+        `<link rel="stylesheet" href="${href}">`,
       )
     }
   }
@@ -390,6 +396,33 @@ function generateFontCSS(fonts = {}) {
     cssLines.push('}')
   }
 
+  // --- Apply font families to elements ---
+  // Defining --font-* on :root is not enough — something must actually set
+  // `font-family` on rendered elements, the same way colors get an application
+  // rule ([id^="section-"] { background-color: var(--section) }). Without this
+  // the font vars are orphaned and text never picks them up, even though the
+  // vars are set and the @import/@font-face load. Only apply slots the SITE
+  // explicitly set (fonts._userSlots) so a foundation's own default typography
+  // is left untouched when theme.yml doesn't override that slot.
+  const userSlots = new Set(fonts._userSlots || [])
+  const applyRules = []
+  if (userSlots.has('body')) {
+    applyRules.push('body { font-family: var(--font-body); }')
+  }
+  if (userSlots.has('heading')) {
+    // Only the prominent headings — display/heading faces are drawn for large
+    // sizes; h4–h6 usually render at or near body size where a display face
+    // reads awkwardly, so they stay in the body font.
+    applyRules.push('h1, h2, h3 { font-family: var(--font-heading); }')
+  }
+  if (userSlots.has('mono')) {
+    applyRules.push('code, pre, kbd, samp { font-family: var(--font-mono); }')
+  }
+  if (applyRules.length > 0) {
+    cssLines.push('')
+    cssLines.push(...applyRules)
+  }
+
   return {
     css: cssLines.join('\n'),
     links: linkTags.join('\n'),