@ohhwells/bridge 0.1.143 → 0.1.144

package/dist/index.js

@@ -1428,6 +1428,52 @@ function assignmentFor(el, content, tokens) {
 function labelElement(el) {
   return el.querySelector('[data-ohw-editable="text"], [data-ohw-editable="plain"]') ?? (el.matches('[data-ohw-editable="text"], [data-ohw-editable="plain"]') ? el : null);
 }
+var BRAND_TRACK_PRECEDENCE = {
+  background: ["primary", "accent", "background", "surface", "on-primary", "text", "border", "text-muted"],
+  color: ["on-primary", "text", "primary", "accent", "text-muted", "background", "surface", "border"],
+  borderColor: ["border", "primary", "accent", "text", "on-primary", "background", "surface", "text-muted"]
+};
+var FONT_TRACK_VARS = ["--font-body", "--font-heading", "--font-display", "--brand-font-body", "--brand-font-heading"];
+function readRootVar(doc, name) {
+  const root = doc.documentElement;
+  return root.style.getPropertyValue(name).trim() || getComputedStyle(root).getPropertyValue(name).trim();
+}
+function sameColor(a, b) {
+  return Math.round(a.r) === Math.round(b.r) && Math.round(a.g) === Math.round(b.g) && Math.round(a.b) === Math.round(b.b) && Math.abs(a.a - b.a) < 0.02;
+}
+function brandTrackedColor(doc, color, roles) {
+  if (!color || color.includes("var(")) return color;
+  const parsed = parseColor(color);
+  if (!parsed || isTransparent(parsed)) return color;
+  for (const role of roles) {
+    const name = `--brand-${role}`;
+    const token = parseColor(readRootVar(doc, name));
+    if (token && !isTransparent(token) && sameColor(parsed, token)) return `var(${name}, ${color})`;
+  }
+  return color;
+}
+function brandTrackedChrome(doc, chrome) {
+  return {
+    ...chrome,
+    background: brandTrackedColor(doc, chrome.background, BRAND_TRACK_PRECEDENCE.background),
+    color: brandTrackedColor(doc, chrome.color, BRAND_TRACK_PRECEDENCE.color),
+    borderColor: brandTrackedColor(doc, chrome.borderColor, BRAND_TRACK_PRECEDENCE.borderColor)
+  };
+}
+function firstFamily(stack) {
+  const first = stack.split(",")[0]?.trim() ?? "";
+  return first.replace(/^['"]|['"]$/g, "").toLowerCase();
+}
+function brandTrackedFontFamily(doc, stack) {
+  if (!stack || stack.includes("var(")) return stack;
+  const family = firstFamily(stack);
+  if (!family) return stack;
+  for (const name of FONT_TRACK_VARS) {
+    const raw = readRootVar(doc, name);
+    if (raw && firstFamily(raw) === family) return `var(${name}, ${stack})`;
+  }
+  return stack;
+}
 var paintLockByEl = /* @__PURE__ */ new WeakMap();
 var paintObserverByEl = /* @__PURE__ */ new WeakMap();
 var paintingButton = false;
@@ -1454,7 +1500,7 @@ function paintButtonChrome(el, assignment, tokens) {
   el.style.borderRadius = px(origin.size.borderRadius);
   el.style.gap = geometry.gap;
   el.style.height = px(geometry.height);
-  el.style.fontFamily = typography.fontFamily;
+  el.style.fontFamily = brandTrackedFontFamily(el.ownerDocument, typography.fontFamily);
   el.style.fontWeight = typography.fontWeight;
   el.style.letterSpacing = typography.letterSpacing;
   el.style.textTransform = typography.textTransform;
@@ -1483,9 +1529,18 @@ function paintedTokensOf(el) {
   return paintLockByEl.get(el)?.tokens ?? null;
 }
 function applyButtonStyle(el, assignment, tokens) {
-  paintLockByEl.set(el, { assignment, tokens });
+  const doc = el.ownerDocument;
+  const tracked = {
+    ...tokens,
+    variants: {
+      primary: brandTrackedChrome(doc, tokens.variants.primary),
+      secondary: brandTrackedChrome(doc, tokens.variants.secondary),
+      ghost: brandTrackedChrome(doc, tokens.variants.ghost)
+    }
+  };
+  paintLockByEl.set(el, { assignment, tokens: tracked });
   paintingButton = true;
-  paintButtonChrome(el, assignment, tokens);
+  paintButtonChrome(el, assignment, tracked);
   paintingButton = false;
   guardTemplateHover(el);
 }
@@ -6966,8 +7021,8 @@ function applyBrandToDom(kit) {
   if (kit.fonts) {
     appliedFonts = applyFonts ? kit.fonts : null;
   }
+  for (const name of BUTTON_VAR_NAMES) root.style.removeProperty(name);
   if (kit.buttons) {
-    for (const name of BUTTON_VAR_NAMES) root.style.removeProperty(name);
     for (const [name, value] of Object.entries(buttonStyleVars({ ...kit, buttons: kit.buttons }))) root.style.setProperty(name, value);
   }
   syncButtonRules(kit.buttons ? kit : null);
@@ -10368,7 +10423,7 @@ function isChromeSection2(el) {
   if (CHROME_SECTION_IDS.has(el.getAttribute("data-ohw-section") ?? "")) return true;
   return el.tagName === "HEADER" || el.tagName === "FOOTER";
 }
-function readRootVar(name) {
+function readRootVar2(name) {
   if (typeof document === "undefined") return "";
   return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
 }
@@ -10408,14 +10463,14 @@ function humanizeFontFamily(name) {
   return name.replace(/^__/, "").replace(/_[0-9a-f]{6}$/i, "").replace(/_/g, " ").replace(/([a-z0-9])([A-Z])/g, "$1 $2").trim().replace(/\s+/g, " ").replace(/(^|\s)([a-z])/g, (_, sep, c) => sep + c.toUpperCase());
 }
 function readFontVar(name) {
-  return humanizeFontFamily(primaryFontFamily(readRootVar(name)));
+  return humanizeFontFamily(primaryFontFamily(readRootVar2(name)));
 }
 function deriveBrandOverride() {
-  const dark = readRootVar("--ohw-brand-dark");
-  const primary = readRootVar("--ohw-brand-primary");
-  const light = readRootVar("--ohw-brand-light");
+  const dark = readRootVar2("--ohw-brand-dark");
+  const primary = readRootVar2("--ohw-brand-primary");
+  const light = readRootVar2("--ohw-brand-light");
   if (!dark || !primary || !light) return null;
-  const accent = readRootVar("--ohw-brand-accent");
+  const accent = readRootVar2("--ohw-brand-accent");
   const heading = readFontVar("--font-heading") || readFontVar("--font-display");
   const body = readFontVar("--font-body");
   return {
@@ -10427,11 +10482,11 @@ function deriveBrandOverride() {
   };
 }
 function deriveTemplateBrandLive() {
-  const primary = readRootVar("--brand-primary") || readRootVar("--color-primary");
-  const dark = readRootVar("--brand-text") || readRootVar("--color-dark");
-  const light = readRootVar("--brand-background") || readRootVar("--color-light");
+  const primary = readRootVar2("--brand-primary") || readRootVar2("--color-primary");
+  const dark = readRootVar2("--brand-text") || readRootVar2("--color-dark");
+  const light = readRootVar2("--brand-background") || readRootVar2("--color-light");
   if (!dark || !primary || !light) return null;
-  const accent = readRootVar("--brand-accent") || readRootVar("--color-accent");
+  const accent = readRootVar2("--brand-accent") || readRootVar2("--color-accent");
   const heading = readFontVar("--brand-font-heading") || readFontVar("--font-heading") || readFontVar("--font-display");
   const body = readFontVar("--brand-font-body") || readFontVar("--font-body");
   return {
@@ -31255,7 +31310,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.142",
+        bridgeVersion: "0.1.143",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections