@bygghammar/cms-platform 0.71.0 → 0.72.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.72.0
+
+- `HeroFullBlock`: four new "Text colour" options for busy media — light/dark text
+  with an opposite-colour outline, and light/dark text with a soft shadow. The
+  treatment applies to the eyebrow, title and body only; buttons, overlay and
+  header hero detection are unchanged, and existing pages keep `light`.
+
 ## 0.67.0
 
 - `CabinTabsBlock`: removed the mobile right-edge arrow hint; the horizontal tab

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.71.0",
+  "version": "0.72.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

@@ -943,6 +943,10 @@ function HeroFullInspector({ block, patch }: BlockPatchProps) {
         {sel("Text colour", "textTone", p.textTone ?? "light", [
           { value: "light", label: "Light text (dark media)" },
           { value: "dark", label: "Dark text (light media)" },
+          { value: "light-shadow", label: "Light text + soft shadow (best on photos)" },
+          { value: "dark-shadow", label: "Dark text + soft light shadow" },
+          { value: "light-outline", label: "Light text with dark outline" },
+          { value: "dark-outline", label: "Dark text with light outline" },
         ])}
         {sel("Title size", "titleSize", p.titleSize ?? "lg", [
           { value: "sm", label: "Small" },

package/src/blocks/components/HeroFullBlock.tsx

@@ -45,7 +45,26 @@ export function HeroFullBlock({ props: p }: { props: HeroFullProps }) {
 
   const align = p.textAlign ?? "left";
   const vertical = p.verticalAlign ?? "center";
-  const dark = (p.textTone ?? "light") === "light";
+  const tone = p.textTone ?? "light";
+  const dark = tone.startsWith("light");
+  // Legibility treatment for text sitting on detailed photos or video: an
+  // opposite-colour outline, or a soft shadow that keeps the typography clean.
+  const legibility = tone.endsWith("-outline")
+    ? ({
+        paintOrder: "stroke fill",
+        WebkitTextStrokeWidth: "0.045em",
+        WebkitTextStrokeColor: dark ? "#000" : "#fff",
+        textShadow: dark
+          ? "0 0 2px rgba(0,0,0,0.9)"
+          : "0 0 2px rgba(255,255,255,0.9)",
+      } as const)
+    : tone.endsWith("-shadow")
+      ? ({
+          textShadow: dark
+            ? "0 1px 2px rgba(0,0,0,0.55), 0 4px 18px rgba(0,0,0,0.45)"
+            : "0 1px 2px rgba(255,255,255,0.7), 0 4px 18px rgba(255,255,255,0.6)",
+        } as const)
+      : undefined;
   const mediaType = p.mediaType ?? "image";
 
   const image = p.image;
@@ -163,12 +182,16 @@ export function HeroFullBlock({ props: p }: { props: HeroFullProps }) {
         <div className={`flex w-full ${rowClass}`}>
           <div className={`flex w-full flex-col ${alignClass} ${WIDTHS[p.contentWidth ?? "normal"]} ${textColor}`}>
             {p.eyebrow ? (
-              <span className={`text-[0.65rem] uppercase tracking-[0.3em] md:text-[0.72rem] ${eyebrowColor}`}>
+              <span
+                style={legibility}
+                className={`text-[0.65rem] uppercase tracking-[0.3em] md:text-[0.72rem] ${eyebrowColor}`}
+              >
                 {t(p.eyebrow)}
               </span>
             ) : null}
             {p.title ? (
               <h1
+                style={legibility}
                 className={`mt-4 ${TITLE_SIZES[p.titleSize ?? "lg"]} leading-[1.02] tracking-[-0.02em] ${
                   (p.titleFont ?? "serif") === "serif" ? "font-serif" : "font-sans font-semibold"
                 } ${p.titleUppercase ? "uppercase tracking-[0.04em]" : ""} whitespace-pre-line`}
@@ -177,7 +200,7 @@ export function HeroFullBlock({ props: p }: { props: HeroFullProps }) {
               </h1>
             ) : null}
             {p.body ? (
-              <p className={`mt-5 whitespace-pre-line text-base leading-relaxed md:text-lg ${mutedColor} ${WIDTHS[p.contentWidth ?? "normal"] === "max-w-none" ? "" : ""}`}>
+              <p style={legibility} className={`mt-5 whitespace-pre-line text-base leading-relaxed md:text-lg ${mutedColor} ${WIDTHS[p.contentWidth ?? "normal"] === "max-w-none" ? "" : ""}`}>
                 {t(p.body)}
               </p>
             ) : null}

package/src/blocks/types.ts

@@ -173,7 +173,17 @@ export type HeroFullProps = {
   overlay?: "none" | "light" | "medium" | "strong" | "bottom" | "top" | "side";
   textAlign?: "left" | "center" | "right";
   verticalAlign?: "top" | "center" | "bottom";
-  textTone?: "light" | "dark";
+  /**
+   * Text colour and legibility treatment. The `light`/`dark` prefix decides the
+   * text colour; the suffix adds an outline or soft shadow for busy media.
+   */
+  textTone?:
+    | "light"
+    | "dark"
+    | "light-outline"
+    | "dark-outline"
+    | "light-shadow"
+    | "dark-shadow";
   contentWidth?: "narrow" | "normal" | "wide" | "full";
   titleSize?: "sm" | "md" | "lg" | "xl";
   titleFont?: "serif" | "sans";