@designcrowd/library.brand-page 6.2.15 → 6.2.16

package/src/brand-page/utils/migration/migration-22.ts

@@ -745,6 +745,66 @@ const captureNoRoleTextStyles = (
   return locations;
 };
 
+type ButtonLabelRole = {
+  holder: Record<string, unknown>;
+  key: string;
+  role: string | undefined;
+};
+
+/**
+ * A button label drew its own colour, else its role's colour, else inherited
+ * `buttonStyles.style.color` — never the base coat or a container default. B moves every label to
+ * Button text whatever role it was on, so record the role each colourless label drew before B;
+ * D bakes that colour onto the label (E hasn't cleared it yet).
+ */
+const captureButtonLabelRoles = (
+  brandPageModel: BrandPageModel,
+): ButtonLabelRole[] => {
+  const labels: ButtonLabelRole[] = [];
+  const record = (
+    holder: Record<string, unknown>,
+    key: string,
+    style: RawStyleObject | undefined,
+  ): void => {
+    if (style && isBlankColorValue(style.color)) {
+      labels.push({ holder, key, role: style.textStyleType });
+    }
+  };
+
+  for (const page of brandPageModel.pages ?? []) {
+    for (const content of page.contents ?? []) {
+      const fields = content as unknown as Record<string, unknown>;
+
+      for (const key of Object.keys(
+        CONTENT_TEXT_STYLE_PROPERTY_KEYS,
+      ) as ContentTextStylePropertyKey[]) {
+        if (key === 'buttonTextStyle' || isButtonLabelField(content, key)) {
+          record(fields, key, fields[key] as RawStyleObject | undefined);
+        }
+      }
+    }
+  }
+
+  for (const header of [
+    brandPageModel.pageHeaderDesktop,
+    brandPageModel.pageHeaderMobile,
+  ]) {
+    const headerButton = header?.headerButton;
+
+    if (headerButton) {
+      record(
+        headerButton as unknown as Record<string, unknown>,
+        'buttonTextStyle',
+        (headerButton.buttonTextStyle as RawStyleObject | undefined) ?? {
+          textStyleType: TEXT_STYLE_TYPES.buttons,
+        },
+      );
+    }
+  }
+
+  return labels;
+};
+
 /**
  * An RTE-eligible field that is a plain string, not a Tiptap doc. On an old site nothing
  * converts plain text → doc (migration-20 only converts HTML), so such a field renders via
@@ -777,14 +837,16 @@ const roleColour = (
  * and the role colour (E) changes no pixels. migration-21 already baked element→frame→role
  * colour into RTE runs, so the only uncoloured runs reaching here inherit the base coat;
  * non-RTE fields (21 left them alone) resolve element→container-default→role→base coat.
- * `buttonTextStyle` and a link button's `titleStyle` are excluded — the button label takes its
- * colour from `buttonStyles`, never the base coat. A social-links section's unset icon fill is
- * frozen here too.
+ * A button label (`buttonTextStyle`, a link button's `titleStyle`, the header button, Save
+ * Contact) never takes the base coat: it bakes the colour of the role it drew before B
+ * (`captureButtonLabelRoles`), else `buttonStyles.style.color`. A social-links section's unset
+ * icon fill is frozen here too.
  */
 export const bakeElementColours = (
   brandPageModel: BrandPageModel,
   options: TextStyleOptions,
   noRoleTextStyles: NoRoleTextStyles = new WeakMap(),
+  buttonLabelRoles: ButtonLabelRole[] = [],
 ): void => {
   const baseCoat = roleColour(options, 'paragraph1');
 
@@ -916,6 +978,37 @@ export const bakeElementColours = (
     }
   }
 
+  const buttonStyleColour = brandPageModel.styles?.buttonStyles?.style?.color;
+  const bakeLabel = (
+    style: RawStyleObject | undefined,
+    roleColourValue: string | undefined,
+  ): void => {
+    const colour = !isBlankColorValue(roleColourValue)
+      ? roleColourValue
+      : buttonStyleColour;
+
+    if (style && isBlankColorValue(style.color) && !isBlankColorValue(colour)) {
+      style.color = colour;
+    }
+  };
+
+  for (const { holder, key, role } of buttonLabelRoles) {
+    bakeLabel(
+      holder[key] as RawStyleObject | undefined,
+      roleColour(options, role),
+    );
+  }
+
+  // Save Contact drew the Buttons role's colour whatever its stored style held.
+  if (brandPageModel.brandPageType === BRAND_PAGE_TYPES.brandContact) {
+    bakeLabel(
+      brandPageModel.saveContactSettings?.buttonTextStyle as
+        | RawStyleObject
+        | undefined,
+      roleColour(options, TEXT_STYLE_TYPES.buttons),
+    );
+  }
+
   // Footer copyright is non-RTE text that resolved through role → base coat, but lives
   // OUTSIDE `pages[].contents`, so freeze it here too — else it loses its colour when E
   // clears the role and F removes the base coat (the copyright-on-dark-footer regression).
@@ -1328,11 +1421,17 @@ export const migration22 = async (
     seedRoleFonts(brandPageModel, options); // A2 — count the site's fonts onto each role family
 
     const noRoleTextStyles = captureNoRoleTextStyles(brandPageModel);
+    const buttonLabelRoles = captureButtonLabelRoles(brandPageModel);
 
     reconnectContentRoles(brandPageModel, targets, options); // B — seed button styles, reconnect every text field
     stripLiftContentRte(brandPageModel, options); // C — RTE baked → override
     await convertPlainRteFields(brandPageModel, options); // B1 — plain text → Tiptap doc (after C)
-    bakeElementColours(brandPageModel, options, noRoleTextStyles); // D — freeze resolved colour
+    bakeElementColours(
+      brandPageModel,
+      options,
+      noRoleTextStyles,
+      buttonLabelRoles,
+    ); // D — freeze resolved colour
     clearRoleColours(options); // E — retire role colour
     stripRteStyleColours(brandPageModel); // G — colour-decouple RTE style objects
   }