@uniweb/theming 0.1.13 → 0.1.15

package/package.json

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

package/src/css-generator.js

@@ -321,6 +321,25 @@ function isGoogleFontsUrl(url) {
   }
 }
 
+/**
+ * Marker delimiting the font `<link>` block in a rendered `<head>`.
+ *
+ * More than one stage can write that block — a build's `transformIndexHtml`, a
+ * build's per-page post-processing, and the runtime's shared prerender seam —
+ * so each has to tell "already injected" from "never injected" rather than
+ * guess, and a page passing through several must still end up with exactly one
+ * copy. The theme `<style>` hangs that check on its `id="uniweb-theme"`;
+ * `<link>` tags have no natural id, hence a comment.
+ *
+ * It lives HERE, beside the code producing the block it marks, because its
+ * consumers sit in packages that cannot import one another: `@uniweb/build`
+ * (both its Vite plugin and its prerenderer) and `@uniweb/runtime`. Both
+ * already depend on `@uniweb/theming`, so this is the one home neither has to
+ * reach across a dependency boundary to read — and duplicating the literal is
+ * exactly how the two halves of a dedupe check drift apart.
+ */
+export const FONT_LINKS_MARKER = '<!--uniweb-fonts-->'
+
 /**
  * Generate font CSS and external link tags.
  *
@@ -597,10 +616,21 @@ export function generateThemeCSS(config = {}, options = {}) {
     sections.push(generateDarkSchemeCSS(appearance, contexts.dark, colorVars))
   }
 
-  // 7. Site background (if specified in theme.yml)
-  if (config.background) {
-    sections.push(`/* Site Background */\nbody {\n  background: ${config.background};\n}`)
-  }
+  // 7. Site background — the page behind the sections.
+  //
+  // Sections paint themselves (rule 3), and on a page whose sections run the
+  // full width that covers the viewport. It does not cover a layout with
+  // columns: a sidebar shell paints its rails and its article and leaves the
+  // space between them unpainted, which falls through to the browser's white —
+  // in both schemes, so dark mode shows a white page around dark panels.
+  //
+  // Defaulting to var(--section) means the page matches the sections sitting on
+  // it and flips with the visitor's choice, because that token already does. A
+  // site wanting a different canvas — a wash behind cards, an image — sets
+  // `background:` in theme.yml and replaces this.
+  sections.push(
+    `/* Site Background */\nbody {\n  background: ${config.background || 'var(--section)'};\n}`
+  )
 
   // 8. Inline text styles (if specified in theme.yml)
   if (config.inline && typeof config.inline === 'object') {

package/src/index.js

@@ -26,6 +26,7 @@ export {
   getDefaultContextTokens,
   getDefaultColors,
   extractUsedFamilies,
+  FONT_LINKS_MARKER,
 } from './css-generator.js'
 
 // Theme processing