@loworbitstudio/visor-theme-engine 0.18.0 → 0.20.0

package/dist/adapters/index.d.ts

@@ -1,4 +1,4 @@
-import { k as GeneratedPrimitives, s as SemanticTokens, R as ResolvedThemeConfig } from '../types-Cvm7vFwe.js';
+import { k as GeneratedPrimitives, s as SemanticTokens, R as ResolvedThemeConfig } from '../types-BG-YT4JW.js';
 
 /**
  * Adapter types for the Visor theme engine.
@@ -37,6 +37,10 @@ interface NextJSAdapterOptions extends AdapterOptions {
      * `@layer visor-base` origination block that binds theme tokens to the page
      * root (default: true). Set false for consumers that ship Tailwind preflight
      * or their own reset. See VI-616.
+     *
+     * VI-638: the base block also carries `font-size: var(--font-size-base)`,
+     * which is how `typography.scale` reaches the page. A consumer that declines
+     * it must bind the base size itself — on `body`, not `:root`.
      */
     includeBaseLayer?: boolean;
 }

package/dist/adapters/index.js

@@ -8,6 +8,8 @@ import {
   collectBrandPassthrough,
   fontStack,
   generateDarkCss,
+  generateFontSizeDecls,
+  generateFontWeightDecls,
   generateHairlineDecls,
   generateIntentDecls,
   generateLightCss,
@@ -17,10 +19,11 @@ import {
   generateTextScaleAliasDecls,
   header,
   parseColor,
+  resolveComponentBindings,
   resolveThemeBrand,
   resolveThemeFonts,
   sectionComment
-} from "../chunk-BUWBBUFG.js";
+} from "../chunk-JDYLDGUN.js";
 
 // src/adapters/brand-passthrough.ts
 var SENTINEL_COLOR = "#ff00ff";
@@ -82,6 +85,42 @@ ${prefersInner}
   return blocks.filter(Boolean).join("\n\n");
 }
 
+// src/adapters/component-tokens-css.ts
+function indentBlock2(selector, decls) {
+  if (decls.length === 0) return "";
+  return [selector + " {", ...decls.map((d) => `  ${d}`), "}"].join("\n");
+}
+function declsFor(values) {
+  return Object.keys(values).sort().map((name) => `--${name}: ${values[name]};`);
+}
+function generateComponentTokensCss(tokens, selectors, colorScheme = "adaptive") {
+  const lightDecls = declsFor(tokens.light);
+  const darkDecls = declsFor(tokens.dark);
+  if (lightDecls.length === 0 && darkDecls.length === 0) return "";
+  const blocks = [
+    "/* \u2500\u2500 Component tokens (VI-625) \u2014 theme bindings for the admin-UI families \u2500\u2500 */"
+  ];
+  if (colorScheme === "dark-only") {
+    blocks.push(indentBlock2(selectors.light, darkDecls));
+    return blocks.filter(Boolean).join("\n\n");
+  }
+  if (colorScheme === "light-only") {
+    blocks.push(indentBlock2(selectors.light, lightDecls));
+    return blocks.filter(Boolean).join("\n\n");
+  }
+  if (lightDecls.length > 0) {
+    blocks.push(indentBlock2(selectors.light, lightDecls));
+  }
+  if (darkDecls.length > 0) {
+    blocks.push(indentBlock2(selectors.dark, darkDecls));
+    const prefersInner = indentBlock2(selectors.prefers, darkDecls).split("\n").map((l) => `  ${l}`).join("\n");
+    blocks.push(`@media (prefers-color-scheme: dark) {
+${prefersInner}
+}`);
+  }
+  return blocks.filter(Boolean).join("\n\n");
+}
+
 // src/adapters/layers.ts
 var LAYER_ORDER = "@layer visor-base, visor-primitives, visor-semantic, visor-brand, visor-adaptive, visor-bridge;";
 function wrapInLayer(layerName, css) {
@@ -175,7 +214,11 @@ function nextjsAdapter(input, options) {
     baseLines.push(
       block(scopePrefix ?? "body", [
         "font-family: var(--font-body);",
-        "font-size: 1rem;",
+        // VI-638: the scaled ramp is the single mechanism that sets type size,
+        // and the base step is what the page inherits. This binding lives on
+        // `body` (or the body-class scope), never `:root` — the ramp is
+        // expressed in `rem`, so a scaled root would multiply it a second time.
+        "font-size: var(--font-size-base, 1rem);",
         "color: var(--text-primary);",
         "background: var(--surface-page, var(--surface-background));"
       ])
@@ -269,6 +312,15 @@ ${inner.split("\n").map((l) => `  ${l}`).join("\n")}
   lines.push(
     wrapInLayer("visor-adaptive", adaptiveBody)
   );
+  const componentTokensCss = generateComponentTokensCss(
+    resolveComponentBindings(input.config.components),
+    { light: hostSelector, dark: darkSelectors.join(",\n"), prefers: prefersSelector },
+    colorScheme
+  );
+  if (componentTokensCss) {
+    lines.push("");
+    lines.push(wrapInLayer("visor-adaptive", componentTokensCss));
+  }
   if (includeFowt) {
     lines.push("");
     lines.push(
@@ -491,23 +543,8 @@ function generateTypographyDecls(config, aliases) {
   decls.push(`--font-heading: ${fontStack(headingFamily, aliases)};`);
   decls.push(`--font-body: ${fontStack(config.typography.body.family, aliases)};`);
   decls.push(`--font-mono: ${fontStack(config.typography.mono.family, aliases)};`);
-  const fontSizes = {
-    xs: 12,
-    sm: 14,
-    base: 16,
-    lg: 18,
-    xl: 20,
-    "2xl": 24,
-    "3xl": 30,
-    "4xl": 36
-  };
-  for (const [name, px] of Object.entries(fontSizes)) {
-    decls.push(`--font-size-${name}: ${px / 16}rem; /* ${px}px */`);
-  }
-  decls.push(`--font-weight-normal: ${config.typography.body.weight};`);
-  decls.push("--font-weight-medium: 500;");
-  decls.push(`--font-weight-semibold: ${config.typography.heading.weight};`);
-  decls.push("--font-weight-bold: 700;");
+  decls.push(...generateFontSizeDecls(config.typography.scale));
+  decls.push(...generateFontWeightDecls(config.typography));
   const lineHeights = {
     none: 1,
     tight: 1.25,
@@ -640,7 +677,6 @@ function docsAdapter(input, options) {
         fontLines.push("");
       }
     }
-    const scale = input.config.typography?.scale ?? 1;
     const emittedFamilies = /* @__PURE__ */ new Set();
     for (const font of fontSlots) {
       if (font && font.source === "visor-fonts" && !emittedFamilies.has(font.family)) {
@@ -654,9 +690,6 @@ function docsAdapter(input, options) {
           fontLines.push(`  font-weight: ${weight};`);
           fontLines.push(`  font-style: ${font.italic ? "italic" : "normal"};`);
           fontLines.push(`  font-display: ${font.display};`);
-          if (scale !== 1) {
-            fontLines.push(`  size-adjust: ${Math.round(scale * 100)}%;`);
-          }
           fontLines.push("}");
           fontLines.push("");
         }
@@ -666,7 +699,11 @@ function docsAdapter(input, options) {
   lines.push("\n/* \u2500\u2500 Section 1: Shared tokens (mode-independent) \u2500\u2500 */");
   const sharedDecls = [
     "min-height: 100vh;",
-    "font-size: 1rem;",
+    // VI-638: the scaled ramp is the single mechanism that sets type size, and
+    // the base step is what the page inherits. Safe here because the scope is a
+    // class on a wrapper, never `:root` — a scaled root would multiply the
+    // rem-expressed ramp a second time.
+    "font-size: var(--font-size-base, 1rem);",
     // BO-56: pin UA chrome to the brand's single mode (adaptive emits nothing).
     ...singleMode ? [`color-scheme: ${singleMode};`] : [],
     `background: var(--surface-page, var(--surface-background));`,
@@ -837,7 +874,17 @@ ${inner.split("\n").map((l) => `  ${l}`).join("\n")}
     },
     colorScheme
   );
-  const adaptiveLayer = wrapInLayer("visor-adaptive", lines.join("\n").trim());
+  const componentTokensCss = generateComponentTokensCss(
+    resolveComponentBindings(input.config.components),
+    {
+      light: lightSel,
+      dark: darkSel,
+      prefers: `${scopeClass}:not(.light):not(.theme-light):not([data-theme="light"])`
+    },
+    colorScheme
+  );
+  const adaptiveBody = [lines.join("\n").trim(), componentTokensCss].filter(Boolean).join("\n\n");
+  const adaptiveLayer = wrapInLayer("visor-adaptive", adaptiveBody);
   const semanticLayer = wrapInLayer("visor-semantic", semanticLines.join("\n").trim());
   const brandLayerBody = [brandResult.css, passthroughCss].filter(Boolean).join("\n\n");
   const brandLayer = wrapInLayer("visor-brand", brandLayerBody);