@ohhwells/bridge 0.1.92-next.272 → 0.1.92-next.274

package/dist/index.cjs

@@ -1400,7 +1400,12 @@ function ButtonEl({
         textDecoration: "none",
         cursor: "pointer",
         ...buttonShellStyle(ctx, fullWidth),
-        ...secondary ? { border: `1px solid ${ctx.brand.palette.dark}`, color: ctx.brand.palette.dark } : { background: ctx.brand.palette.primary, color: ctx.buttonLabel ?? primaryButtonLabel(ctx.brand) }
+        ...secondary ? { border: `1px solid ${ctx.brand.palette.dark}`, color: ctx.brand.palette.dark } : (
+          // Off-band, prefer the template button's measured fill/label pair — a template may
+          // fill its CTAs with any token (hvac: accent bg, primary text). On an accent band
+          // the flipped palette keeps contrast, so the brand-driven colours stay.
+          !ctx.buttonLabel && ctx.buttonStyle?.background ? { background: ctx.buttonStyle.background, color: ctx.buttonStyle.color } : { background: ctx.brand.palette.primary, color: ctx.buttonLabel ?? primaryButtonLabel(ctx.brand) }
+        )
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...path ? textAttrs(ctx, `${path}.label`) : {}, children: str(slots.label) })
     }
@@ -2472,10 +2477,12 @@ function renderNode(node, ctx, path) {
                       cursor: "pointer",
                       // Shape/padding/typography follow the host template's own buttons.
                       ...buttonShellStyle(ctx),
-                      // Brand-styled: primary fill, brand-derived label colour (not a fixed token) so it
-                      // reads correctly on custom palettes.
-                      background: ctx.brand.palette.primary,
-                      color: ctx.buttonLabel ?? primaryButtonLabel(ctx.brand)
+                      // Brand-styled: the template button's measured fill/label pair off-band, else
+                      // primary fill with a brand-derived label so it reads on custom palettes.
+                      ...!ctx.buttonLabel && ctx.buttonStyle?.background ? { background: ctx.buttonStyle.background, color: ctx.buttonStyle.color } : {
+                        background: ctx.brand.palette.primary,
+                        color: ctx.buttonLabel ?? primaryButtonLabel(ctx.brand)
+                      }
                     },
                     children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...textAttrs(ctx, `${path}.c${i}.label`), children: str(cs.label) })
                   },
@@ -2684,11 +2691,19 @@ function deriveTemplateBrand() {
 }
 function deriveTemplateButtonStyle() {
   if (typeof document === "undefined") return null;
-  const btn = Array.from(document.querySelectorAll('[data-ohw-role="button"]')).find(
-    (el) => !el.closest(`[${CONTAINER_ATTR}]`)
-  );
+  const candidates = Array.from(
+    document.querySelectorAll('[data-ohw-role="button"]')
+  ).filter((el) => !el.closest(`[${CONTAINER_ATTR}]`));
+  const isFilled = (el) => {
+    const bg = getComputedStyle(el).backgroundColor;
+    if (!bg || bg === "transparent") return false;
+    const alpha = bg.match(/rgba?\([^)]*,\s*([\d.]+)\)$/);
+    return !alpha || parseFloat(alpha[1]) > 0;
+  };
+  const btn = candidates.find(isFilled) ?? candidates[0];
   if (!btn) return null;
   const cs = getComputedStyle(btn);
+  const filled = isFilled(btn);
   const corners = [
     cs.borderTopLeftRadius,
     cs.borderTopRightRadius,
@@ -2705,6 +2720,7 @@ function deriveTemplateButtonStyle() {
   return {
     radius: radius || "10px",
     padding: `${padY}px ${padX}px`,
+    ...filled ? { background: cs.backgroundColor, color: cs.color } : {},
     fontFamily: cs.fontFamily || "",
     fontSize: cs.fontSize || "",
     fontWeight: cs.fontWeight || "",