@bygghammar/cms-platform 0.69.0 → 0.70.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.69.0",
+  "version": "0.70.0",
   "description": "Shared CMS platform: blocks, block types, i18n core, UI primitives and design-token contract used by every Bygghammar/Voyara site.",
   "type": "module",
   "sideEffects": [

package/src/backoffice/inspectors/blocks.tsx

@@ -5,6 +5,7 @@
  * stay in each site's own inspector router.
  */
 import { useEffect, useMemo, useState } from "react";
+import { BUTTON_COLOR_DEFAULTS, type ButtonColors } from "../../blocks/button-colors";
 import type {
   BlockInstance,
   BlockProps,
@@ -1281,6 +1282,12 @@ function LinkTilesInspector({ block, patch }: BlockPatchProps) {
         </label>
         <TextField label="Anchor id" value={p.anchor} onChange={(v) => update({ ...p, anchor: v })} />
       </InspectorSection>
+      <InspectorSection title="Button colours">
+        <ButtonColorFields
+          value={p.buttonColors}
+          onChange={(next) => update({ ...p, buttonColors: next })}
+        />
+      </InspectorSection>
       <InspectorSection title={`Tiles (${items.length})`}>
         <div className="space-y-4">
           {items.map((item, i) => (
@@ -1503,6 +1510,64 @@ function CabinTabsInspector({ block, patch }: BlockPatchProps) {
   );
 }
 
+/* ---------------- Button colours ---------------- */
+/**
+ * Colour controls for a block's CTA button. Empty values mean "use the brand
+ * default", which matches the shared price-table button.
+ */
+function ButtonColorFields({
+  value,
+  onChange,
+}: {
+  value?: ButtonColors;
+  onChange: (next: ButtonColors) => void;
+}) {
+  const v = value ?? {};
+  const row = (label: string, key: keyof ButtonColors) => {
+    const current = v[key]?.trim() || "";
+    const swatch = current.startsWith("#") ? current : "#ffffff";
+    return (
+      <label key={key} className="block space-y-1.5">
+        <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">{label}</span>
+        <span className="flex items-center gap-2">
+          <input
+            type="color"
+            value={swatch}
+            onChange={(e) => onChange({ ...v, [key]: e.target.value })}
+            className="h-9 w-12 shrink-0 cursor-pointer border border-ink/15 bg-white p-0.5"
+            aria-label={`${label} colour picker`}
+          />
+          <input
+            type="text"
+            value={current}
+            placeholder={BUTTON_COLOR_DEFAULTS[key]}
+            onChange={(e) => onChange({ ...v, [key]: e.target.value })}
+            className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea"
+          />
+        </span>
+      </label>
+    );
+  };
+  return (
+    <>
+      <p className="text-xs leading-relaxed text-ink/60">
+        Leave a field empty to use the site default. Accepts hex values such as #ff4f9a.
+      </p>
+      {row("Background", "bg")}
+      {row("Text", "text")}
+      {row("Background on hover", "hoverBg")}
+      {row("Text on hover", "hoverText")}
+      <button
+        type="button"
+        onClick={() => onChange({})}
+        className="text-xs uppercase tracking-[0.18em] text-ink/60 underline hover:text-ink"
+      >
+        Reset to defaults
+      </button>
+    </>
+  );
+}
+
 /* ---------------- Price table ---------------- */
 function PriceTableInspector({ block, patch }: BlockPatchProps) {
   const p = (block.props ?? {}) as PriceTableProps;
@@ -1532,6 +1597,12 @@ function PriceTableInspector({ block, patch }: BlockPatchProps) {
         <LocalizedField label="Button label" value={p.ctaLabel} onChange={(v) => update({ ...p, ctaLabel: v })} />
         <TextField label="Button link" value={p.ctaHref} placeholder="/boka" onChange={(v) => update({ ...p, ctaHref: v })} />
       </InspectorSection>
+      <InspectorSection title="Button colours">
+        <ButtonColorFields
+          value={p.ctaColors}
+          onChange={(next) => update({ ...p, ctaColors: next })}
+        />
+      </InspectorSection>
       <InspectorSection title="Layout">
         <label className="block space-y-1.5">
           <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">Columns (desktop)</span>

package/src/blocks/button-colors.ts

@@ -0,0 +1,46 @@
+import type { CSSProperties } from "react";
+
+/**
+ * Editable colours for a block's call-to-action button.
+ * Every value is a plain CSS colour string (hex, rgb(), oklch(), var(--token)).
+ * Empty/undefined values fall back to the brand defaults below, which match the
+ * shared price-table CTA styling.
+ */
+export type ButtonColors = {
+  /** Background colour. */
+  bg?: string;
+  /** Label colour. */
+  text?: string;
+  /** Background colour on hover/focus. */
+  hoverBg?: string;
+  /** Label colour on hover/focus. */
+  hoverText?: string;
+};
+
+export const BUTTON_COLOR_DEFAULTS: Required<ButtonColors> = {
+  bg: "var(--sea)",
+  text: "#ffffff",
+  hoverBg: "var(--brass)",
+  hoverText: "#ffffff",
+};
+
+/**
+ * Tailwind classes that read the CSS variables produced by
+ * {@link buttonColorStyle}. Kept as a static literal so the compiler keeps them.
+ */
+export const BUTTON_COLOR_CLASS =
+  "bg-[var(--btn-bg)] text-[var(--btn-text)] transition-colors hover:bg-[var(--btn-bg-hover)] hover:text-[var(--btn-text-hover)] focus-visible:bg-[var(--btn-bg-hover)] focus-visible:text-[var(--btn-text-hover)]";
+
+/** Inline CSS variables for a button's colours, with brand defaults applied. */
+export function buttonColorStyle(colors?: ButtonColors): CSSProperties {
+  const bg = colors?.bg?.trim() || BUTTON_COLOR_DEFAULTS.bg;
+  const text = colors?.text?.trim() || BUTTON_COLOR_DEFAULTS.text;
+  const hoverBg = colors?.hoverBg?.trim() || BUTTON_COLOR_DEFAULTS.hoverBg;
+  const hoverText = colors?.hoverText?.trim() || BUTTON_COLOR_DEFAULTS.hoverText;
+  return {
+    ["--btn-bg" as string]: bg,
+    ["--btn-text" as string]: text,
+    ["--btn-bg-hover" as string]: hoverBg,
+    ["--btn-text-hover" as string]: hoverText,
+  } as CSSProperties;
+}

package/src/blocks/components/LinkTilesBlock.tsx

@@ -2,6 +2,7 @@ import { useT } from "../../i18n";
 import { Reveal } from "../../ui/Reveal";
 import { FocalImage } from "../../host";
 import type { LinkTilesProps, LinkTilesItem } from "../types";
+import { BUTTON_COLOR_CLASS, buttonColorStyle, type ButtonColors } from "../button-colors";
 
 const TONE: Record<string, string> = {
   white: "bg-white",
@@ -36,12 +37,14 @@ function Tile({
   rounded,
   overlay,
   labelAlign,
+  buttonColors,
 }: {
   item: LinkTilesItem;
   aspectClass: string;
   rounded: boolean;
   overlay: "none" | "light" | "medium" | "strong" | "brand";
   labelAlign: "left" | "center";
+  buttonColors?: ButtonColors;
 }) {
   const { t } = useT();
   const label = t(item.label);
@@ -80,7 +83,10 @@ function Tile({
           </span>
         ) : null}
         {label ? (
-          <span className="mt-3 inline-flex items-center justify-center bg-sea px-6 py-3 text-xs uppercase tracking-[0.22em] text-ink shadow-lg transition-colors hover:bg-ink hover:text-paper">
+          <span
+            style={buttonColorStyle(buttonColors)}
+            className={`mt-3 inline-flex items-center justify-center px-6 py-3 text-xs uppercase tracking-[0.22em] shadow-lg ${BUTTON_COLOR_CLASS}`}
+          >
             {label}
           </span>
         ) : null}
@@ -172,6 +178,7 @@ export function LinkTilesBlock({ props }: { props: LinkTilesProps }) {
                 rounded={props.rounded ?? false}
                 overlay={props.overlay ?? "medium"}
                 labelAlign={props.labelAlign ?? "left"}
+                buttonColors={props.buttonColors}
               />
             ))}
           </div>

package/src/blocks/components/PriceTableBlock.tsx

@@ -1,4 +1,5 @@
 import { useT } from "../../i18n";
+import { BUTTON_COLOR_CLASS, buttonColorStyle } from "../button-colors";
 import { Reveal } from "../../ui/Reveal";
 import type { PriceTableProps } from "../types";
 
@@ -143,7 +144,8 @@ export function PriceTableBlock({ props }: { props: PriceTableProps }) {
           {props.ctaLabel && props.ctaHref ? (
             <a
               href={props.ctaHref}
-              className="inline-flex items-center bg-sea px-6 py-3 text-[0.7rem] uppercase tracking-[0.22em] text-white hover:bg-brass"
+              style={buttonColorStyle(props.ctaColors)}
+              className={`inline-flex items-center px-6 py-3 text-[0.7rem] uppercase tracking-[0.22em] ${BUTTON_COLOR_CLASS}`}
             >
               {t(props.ctaLabel)}
             </a>

package/src/blocks/index.ts

@@ -11,3 +11,9 @@ export { MediaSplitBlock } from "./components/MediaSplitBlock";
 export { PriceTableBlock } from "./components/PriceTableBlock";
 export { ProseBlock } from "./components/ProseBlock";
 export { RichTextBlock } from "./components/RichTextBlock";
+export {
+  BUTTON_COLOR_CLASS,
+  BUTTON_COLOR_DEFAULTS,
+  buttonColorStyle,
+  type ButtonColors,
+} from "./button-colors";

package/src/blocks/types.ts

@@ -1,3 +1,4 @@
+import type { ButtonColors } from "./button-colors";
 import type { LocalizedString } from "../i18n";
 
 /**
@@ -344,6 +345,8 @@ export type LinkTilesItem = {
 };
 
 export type LinkTilesProps = {
+  /** Colours for the tile label buttons. */
+  buttonColors?: ButtonColors;
   eyebrow?: Partial<LocalizedString>;
   title?: Partial<LocalizedString>;
   lead?: Partial<LocalizedString>;
@@ -408,6 +411,8 @@ export type PriceGroup = {
 };
 
 export type PriceTableProps = {
+  /** Colours for the CTA button. */
+  ctaColors?: ButtonColors;
   eyebrow?: Partial<LocalizedString>;
   title?: Partial<LocalizedString>;
   lead?: Partial<LocalizedString>;

package/src/site/SiteHeader.tsx

@@ -212,8 +212,15 @@ export function SiteHeader({
   useEffect(() => {
     const detect = () => setDarkHero(Boolean(document.querySelector('[data-site-hero="dark"]')));
     detect();
-    const timer = setTimeout(detect, 150);
-    return () => clearTimeout(timer);
+    // Blocks stream in after the route commits, so keep watching the document
+    // until the hero (or its absence) is settled.
+    const observer = new MutationObserver(detect);
+    observer.observe(document.body, { childList: true, subtree: true });
+    const stop = setTimeout(() => observer.disconnect(), 3000);
+    return () => {
+      observer.disconnect();
+      clearTimeout(stop);
+    };
   }, [pathname]);
 
   const lightText = (lightTextPaths.includes(pathname) || darkHero) && !scrolled;