@uniweb/theming 0.1.4 → 0.1.6

package/package.json

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

package/src/css-generator.js

@@ -210,32 +210,56 @@ const GENERIC_FAMILIES = new Set([
   'inherit', 'initial', 'revert', 'unset',
 ])
 
+// Foundation `font-*` vars that are CSS longhands, not typefaces — never
+// treat their value as a family to load.
+const NON_FAMILY_FONT_VARS = new Set([
+  'font-weight', 'font-style', 'font-size', 'font-stretch',
+  'font-feature-settings', 'font-variation-settings', 'font-variant',
+  'font-kerning', 'font-optical-sizing', 'font-synthesis',
+  'font-size-adjust', 'font-smoothing', 'font-palette', 'font-language-override',
+])
+
 /**
- * Extract font family names actually used by body/heading/mono slots.
+ * Extract the font family names the site actually references.
  *
- * Only considers slots the user explicitly configured (tracked via _userSlots
- * from the processor). Default system font stacks are ignored so they don't
- * trigger unnecessary font loading.
+ * Two sources count as "used":
+ *   1. The `body`/`heading`/`mono` slots the user explicitly configured
+ *      (tracked via _userSlots from the processor). Default system stacks are
+ *      ignored so they don't trigger unnecessary font loading.
+ *   2. Foundation `font-*` vars (e.g. an editorial `font-serif`). A foundation
+ *      can declare a themeable typeface beyond the three built-in roles; the
+ *      site sets its value and loads it with `fonts.import` / `fonts.faces`.
+ *      Without counting these, such a family is filtered out as "unused" and
+ *      never loads — capping a foundation at the three role slots.
  *
- * @param {Object} fonts - Font configuration
- * @returns {Set<string>} Lowercase family names referenced by user-set slots
+ * @param {Object} fonts - Font configuration (may carry _userSlots)
+ * @param {Object} [foundationVars] - Resolved foundation vars (name → { default } | value)
+ * @returns {Set<string>} Lowercase family names referenced by the site
  */
-function extractUsedFamilies(fonts) {
+function extractUsedFamilies(fonts, foundationVars = {}) {
   const used = new Set()
-  const slots = fonts._userSlots || ['body', 'heading', 'mono']
-
-  for (const slot of slots) {
-    const value = fonts[slot]
-    if (!value) continue
 
+  const addFamiliesFrom = (value) => {
+    if (typeof value !== 'string') return
     for (const segment of value.split(',')) {
       const name = segment.trim().replace(/^["']|["']$/g, '').toLowerCase()
-      if (name && !GENERIC_FAMILIES.has(name)) {
-        used.add(name)
-      }
+      // Skip generics, empties, and numeric/length tokens (a weight "600" or
+      // size "1rem" a non-family font-* var might carry).
+      if (!name || GENERIC_FAMILIES.has(name) || /^\d/.test(name)) continue
+      used.add(name)
     }
   }
 
+  const slots = fonts._userSlots || ['body', 'heading', 'mono']
+  for (const slot of slots) {
+    addFamiliesFrom(fonts[slot])
+  }
+
+  for (const [name, config] of Object.entries(foundationVars)) {
+    if (!name.startsWith('font-') || NON_FAMILY_FONT_VARS.has(name)) continue
+    addFamiliesFrom(typeof config === 'object' ? config?.default : config)
+  }
+
   return used
 }
 
@@ -288,11 +312,11 @@ function isGoogleFontsUrl(url) {
  * @param {Object} fonts - Font configuration
  * @returns {{ css: string, links: string }} css for <style>, links for <head>
  */
-function generateFontCSS(fonts = {}) {
+function generateFontCSS(fonts = {}, foundationVars = {}) {
   const cssLines = []
   const linkTags = []
 
-  const usedFamilies = extractUsedFamilies(fonts)
+  const usedFamilies = extractUsedFamilies(fonts, foundationVars)
 
   // --- @font-face rules from faces[] (filtered to used families) ---
   // Also generate <link rel="preload"> hints so browsers fetch fonts early
@@ -358,16 +382,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 +420,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'),
@@ -469,7 +526,9 @@ export function generateThemeCSS(config = {}) {
   const sections = []
 
   // 1. Font face rules and variables (links returned separately)
-  const fontResult = generateFontCSS(fonts)
+  //    foundationVars is passed so families referenced by a foundation `font-*`
+  //    var (e.g. an editorial `font-serif`) survive the used-family filter.
+  const fontResult = generateFontCSS(fonts, foundationVars)
   if (fontResult.css) {
     sections.push('/* Typography */\n' + fontResult.css)
   }