@designcrowd/library.brand-page 6.2.11 → 6.2.12

package/src/brand-page-maker/models/content-settings.ts

@@ -15,8 +15,6 @@ import {
   SUPPORT_ME_CUSTOM_PRODUCT_NAME,
   DEFAULT_LOGO_HEIGHT,
   DEFAULT_LOGO_WIDTH,
-  FONT_SIZE_BODY,
-  LINE_HEIGHT_BODY,
   TEXT_STYLE_TYPES,
   TEXT_COLUMNS,
   DEFAULT_LOGO_BACKGROUND_COLOR_RGB,
@@ -53,6 +51,8 @@ import type {
   SupportMeContent,
   ShopContent,
   BookingSectionContent,
+  TextStyleDeclaration,
+  TextStyleType,
 } from '@brand-page';
 import * as uuid from 'uuid';
 import type { CreateInitialContentFunction } from './content-settings-configs';
@@ -62,6 +62,8 @@ import {
 } from '@brand-page/utils';
 import type { CreateInitialContentOptions } from '@shared/content-settings/models';
 import { contentSettingsTr } from '@src/composables/useTranslate';
+import { rteDoc } from '@shared/rte-render.util';
+import { omitTypography } from '@shared/text-role-typography.util';
 
 export const createInitialButtonContent =
   (type: ContentType, iconUrl: string, options?: CreateInitialContentOptions) =>
@@ -118,7 +120,7 @@ export const createInitialButtonContent =
       title,
       titleStyle: {
         applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-        textStyleType: TEXT_STYLE_TYPES.buttons,
+        textStyleType: TEXT_STYLE_TYPES.button,
         textAlign: 'center',
       },
       url: '',
@@ -149,7 +151,7 @@ export const createInitialGeneralLinkContent =
       page: '',
       titleStyle: {
         applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-        textStyleType: TEXT_STYLE_TYPES.buttons,
+        textStyleType: TEXT_STYLE_TYPES.button,
         textAlign: 'center',
       },
       fieldRole: 'button',
@@ -199,27 +201,27 @@ export const createInitialProfileContent = (
 ): ProfileContent => {
   return {
     id: uuid.v4(),
-    description: contentSettingsTr(`defaultDescription`),
+    description: rteDoc(contentSettingsTr(`defaultDescription`)),
     avatarImageUrl: '',
-    name: contentSettingsTr(`nameTitle`),
-    title: contentSettingsTr(`titleTitle`),
+    name: rteDoc(contentSettingsTr(`nameTitle`)),
+    title: rteDoc(contentSettingsTr(`titleTitle`)),
     type: 'profile',
     backgroundColor: {},
     colorReplacements: [],
     mediaType: 'image',
     titleStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.paragraphs,
+      textStyleType: TEXT_STYLE_TYPES.paragraph2,
       textAlign: 'center',
     },
     descriptionStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.paragraphs,
+      textStyleType: TEXT_STYLE_TYPES.paragraph2,
       textAlign: 'center',
     },
     nameStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.headings,
+      textStyleType: TEXT_STYLE_TYPES.heading5,
       textAlign: 'center',
     },
   };
@@ -231,19 +233,18 @@ export const createInitialTextContent = (
   return {
     iconUrl: '',
     id: uuid.v4(),
-    text: contentSettingsTr(`defaultTextValue`),
+    text: rteDoc(contentSettingsTr(`defaultTextValue`)),
     textItems:
       options?.brandPageType === 'brandSite'
         ? [
             {
               id: uuid.v4(),
-              text: contentSettingsTr(`defaultTextValue`),
+              text: rteDoc(contentSettingsTr(`defaultTextValue`)),
               textStyle: {
                 applyAutoScale:
                   options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-                fontSize: FONT_SIZE_BODY,
                 textAlign: 'left',
-                textStyleType: TEXT_STYLE_TYPES.paragraphs,
+                textStyleType: TEXT_STYLE_TYPES.paragraph2,
               },
             },
           ]
@@ -253,13 +254,9 @@ export const createInitialTextContent = (
     topPadding: options?.brandPageType === BRAND_PAGE_TYPES.brandSite ? 12 : 0,
     bottomPadding:
       options?.brandPageType === BRAND_PAGE_TYPES.brandSite ? 12 : 0,
-    textSize: {
-      fontSize: FONT_SIZE_BODY,
-      lineHeight: LINE_HEIGHT_BODY,
-    },
     textStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.paragraphs,
+      textStyleType: TEXT_STYLE_TYPES.paragraph2,
       textAlign: 'center',
     },
     columnStyle: TEXT_COLUMNS[1],
@@ -309,17 +306,17 @@ export const createInitialMailingListContent = (
     type: 'mailing-list',
     topPadding: 0,
     bottomPadding: 0,
-    title: contentSettingsTr(`mailingListTitle`),
+    title: rteDoc(contentSettingsTr(`mailingListTitle`)),
     buttonText: contentSettingsTr(`subscribePlaceholder`),
     acceptedFields: 'emailOnly',
     titleStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.headings,
+      textStyleType: TEXT_STYLE_TYPES.heading5,
       textAlign: 'center',
     },
     buttonTextStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.buttons,
+      textStyleType: TEXT_STYLE_TYPES.button,
       textAlign: 'center',
     },
     // Card surface defaults to the neutral-light role — a light panel any global text
@@ -334,7 +331,7 @@ export const createInitialRequestPaymentContent = (
 ): RequestPaymentContent => {
   return {
     id: uuid.v4(),
-    description: '',
+    description: rteDoc(''),
     displayStyle: DISPLAY_STYLE_PREVIEW,
     requestPaymentConfig: {
       paymentOptions: [],
@@ -344,7 +341,7 @@ export const createInitialRequestPaymentContent = (
       paymentOptionImageType: PAYMENT_OPTION_IMAGE_TYPES.auto,
     },
     successMessage: '',
-    title: contentSettingsTr(`buyNowTitle`),
+    title: rteDoc(contentSettingsTr(`buyNowTitle`)),
     type: 'request-payment',
     topPadding: 0,
     bottomPadding: 0,
@@ -353,22 +350,25 @@ export const createInitialRequestPaymentContent = (
     selectedBorderColor: {},
     titleStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.paragraphs,
+      textStyleType: TEXT_STYLE_TYPES.paragraph2,
       textAlign: 'center',
     },
     descriptionStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.paragraphs,
+      textStyleType: TEXT_STYLE_TYPES.paragraph2,
       textAlign: 'center',
     },
+    successMessageStyle: {
+      textStyleType: TEXT_STYLE_TYPES.paragraph2,
+    },
     itemTextStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.paragraphs,
+      textStyleType: TEXT_STYLE_TYPES.paragraph2,
       textAlign: 'left',
     },
     buttonTextStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.buttons,
+      textStyleType: TEXT_STYLE_TYPES.button,
       textAlign: 'center',
     },
     // Card surface defaults to the neutral-light role — a light panel any global text
@@ -383,35 +383,38 @@ export const createInitialShopContent = (
 ): ShopContent => {
   return {
     id: uuid.v4(),
-    description: '',
+    description: rteDoc(''),
     topPadding: 16,
     bottomPadding: 16,
     products: [],
     displayStyle: PAYMENT_OPTION_DISPLAY_TYPES.thumbnail,
     aspectRatio: PAYMENT_OPTION_IMAGE_TYPES.auto,
-    title: contentSettingsTr(`shopTitle`),
+    title: rteDoc(contentSettingsTr(`shopTitle`)),
     type: 'shop-section',
     fillColor: {},
     successMessage: '',
     defaultBorderColor: {},
     titleStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.titles,
+      textStyleType: TEXT_STYLE_TYPES.heading4,
       textAlign: 'center',
     },
     descriptionStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.paragraphs,
+      textStyleType: TEXT_STYLE_TYPES.paragraph2,
       textAlign: 'center',
     },
+    successMessageStyle: {
+      textStyleType: TEXT_STYLE_TYPES.paragraph2,
+    },
     itemTextStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.paragraphs,
+      textStyleType: TEXT_STYLE_TYPES.paragraph2,
       textAlign: 'left',
     },
     buttonTextStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.buttons,
+      textStyleType: TEXT_STYLE_TYPES.button,
       textAlign: 'center',
     },
     backgroundStyle: {},
@@ -441,35 +444,38 @@ export const createInitialSupportMeContent = (
       isCustomerMessageEnabled: true,
     },
     displayStyle: DISPLAY_STYLE_PREVIEW,
-    title: contentSettingsTr(`supportMeTitle`),
+    title: rteDoc(contentSettingsTr(`supportMeTitle`)),
     successMessage: contentSettingsTr(`successSupportPlaceholder`),
-    description: contentSettingsTr(`makeADonationDescription`),
+    description: rteDoc(contentSettingsTr(`makeADonationDescription`)),
     type: 'support-me',
     topPadding: 0,
     bottomPadding: 0,
     titleStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.headings,
+      textStyleType: TEXT_STYLE_TYPES.heading5,
       textAlign: 'center',
     },
     headingStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.paragraphs,
+      textStyleType: TEXT_STYLE_TYPES.paragraph2,
       textAlign: 'center',
     },
     descriptionStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.paragraphs,
+      textStyleType: TEXT_STYLE_TYPES.paragraph2,
       textAlign: 'center',
     },
+    successMessageStyle: {
+      textStyleType: TEXT_STYLE_TYPES.paragraph2,
+    },
     itemTextStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.paragraphs,
+      textStyleType: TEXT_STYLE_TYPES.paragraph2,
       textAlign: 'center',
     },
     buttonTextStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.buttons,
+      textStyleType: TEXT_STYLE_TYPES.button,
       textAlign: 'center',
     },
     // Card surface defaults to the neutral-light role — a light panel any global text
@@ -497,8 +503,8 @@ export const createInitialContactFormContent: CreateInitialContentFunction<
 
   return {
     id: uuid.v4(),
-    title: contentSettingsTr(`contactUsTitle`),
-    description: '',
+    title: rteDoc(contentSettingsTr(`contactUsTitle`)),
+    description: rteDoc(''),
     buttonText: contentSettingsTr(`sendPlaceholder`),
     displayStyle: DISPLAY_STYLE_PREVIEW,
     layoutStyle,
@@ -563,7 +569,7 @@ export const createInitialContactFormContent: CreateInitialContentFunction<
         type: 'text',
       },
     ],
-    successMessage: contentSettingsTr(`formSuccessMessage`),
+    successMessage: rteDoc(contentSettingsTr(`formSuccessMessage`)),
     responseEmail: options?.userState.emailAddress || '',
     type: 'contact-form',
     // brand-site: card layouts default to the logo bg. brand-page/brand-contact:
@@ -576,20 +582,20 @@ export const createInitialContactFormContent: CreateInitialContentFunction<
     backgroundStyle: {},
     titleStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.titles,
+      textStyleType: TEXT_STYLE_TYPES.heading4,
       textAlign: 'center',
     },
     descriptionStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.paragraphs,
+      textStyleType: TEXT_STYLE_TYPES.paragraph2,
       textAlign: 'center',
     },
     successMessageStyle: {
-      textStyleType: TEXT_STYLE_TYPES.paragraphs,
+      textStyleType: TEXT_STYLE_TYPES.paragraph2,
     },
     buttonTextStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.buttons,
+      textStyleType: TEXT_STYLE_TYPES.button,
       textAlign: 'center',
     },
   };
@@ -603,8 +609,12 @@ export const createInitialBannerSectionContent: CreateInitialContentFunction<
     topPadding: 32,
     bottomPadding: 32,
     imageUrl: '',
-    title: contentSettingsTr(`thisIsABannerTitle`),
-    description: '',
+    // BP-5969: RTE fields are authored as Tiptap docs at their SOURCE (the factory), not plain
+    // strings that a later step converts. Colour + role typography are baked into the doc by the
+    // init step (applyTextContrast + authorContentRteFields); textAlign is stamped there from the
+    // style, so it isn't duplicated here. Empty description is still a doc (empty paragraph).
+    title: rteDoc(contentSettingsTr(`thisIsABannerTitle`)),
+    description: rteDoc(''),
     buttonText: contentSettingsTr(`getStartedButtonText`),
     url: '',
     colorReplacements: [],
@@ -612,12 +622,12 @@ export const createInitialBannerSectionContent: CreateInitialContentFunction<
     displayStyle: 'centered',
     descriptionStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.paragraphs,
+      textStyleType: TEXT_STYLE_TYPES.paragraph2,
       textAlign: 'center',
     },
     titleStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.titles,
+      textStyleType: TEXT_STYLE_TYPES.heading4,
       textAlign: 'center',
     },
     cardStyle: {
@@ -628,7 +638,7 @@ export const createInitialBannerSectionContent: CreateInitialContentFunction<
     buttonLinkType: BUTTON_LINK_TYPE.url,
     buttonTextStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.buttons,
+      textStyleType: TEXT_STYLE_TYPES.button,
       textAlign: 'center',
     },
     overlayColor: {
@@ -643,8 +653,8 @@ export const createInitialBookingSectionContent: CreateInitialContentFunction<
 > = (options?: CreateInitialContentOptions) => {
   return {
     id: uuid.v4(),
-    title: contentSettingsTr(`defaultBookingTitle`),
-    description: contentSettingsTr(`defaultBookingDescription`),
+    title: rteDoc(contentSettingsTr(`defaultBookingTitle`)),
+    description: rteDoc(contentSettingsTr(`defaultBookingDescription`)),
     buttonText: contentSettingsTr(`bookNowLabel`),
     url: '',
     type: 'booking-section',
@@ -652,12 +662,12 @@ export const createInitialBookingSectionContent: CreateInitialContentFunction<
     bottomPadding: 32,
     descriptionStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.paragraphs,
+      textStyleType: TEXT_STYLE_TYPES.paragraph2,
       textAlign: 'center',
     },
     titleStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.titles,
+      textStyleType: TEXT_STYLE_TYPES.heading4,
       textAlign: 'center',
     },
     backgroundStyle: {},
@@ -665,7 +675,7 @@ export const createInitialBookingSectionContent: CreateInitialContentFunction<
     buttonLinkType: BUTTON_LINK_TYPE.url,
     buttonTextStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.buttons,
+      textStyleType: TEXT_STYLE_TYPES.button,
       textAlign: 'center',
     },
   };
@@ -676,8 +686,8 @@ export const createInitialImagesSectionContent: CreateInitialContentFunction<
 > = (options?: CreateInitialContentOptions) => {
   return {
     id: uuid.v4(),
-    title: contentSettingsTr(`imagesTitle`),
-    description: '',
+    title: rteDoc(contentSettingsTr(`imagesTitle`)),
+    description: rteDoc(''),
     type: 'images-section',
     topPadding: 32,
     bottomPadding: 32,
@@ -702,27 +712,27 @@ export const createInitialImagesSectionContent: CreateInitialContentFunction<
     cardStyle: {},
     titleStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.titles,
+      textStyleType: TEXT_STYLE_TYPES.heading4,
       textAlign: 'center',
     },
     descriptionStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.paragraphs,
+      textStyleType: TEXT_STYLE_TYPES.paragraph2,
       textAlign: 'center',
     },
     headingStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.headings,
+      textStyleType: TEXT_STYLE_TYPES.heading5,
       textAlign: 'center',
     },
     paragraphStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.paragraphs,
+      textStyleType: TEXT_STYLE_TYPES.paragraph2,
       textAlign: 'center',
     },
     buttonTextStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.buttons,
+      textStyleType: TEXT_STYLE_TYPES.button,
       textAlign: 'center',
     },
   };
@@ -733,7 +743,7 @@ export const createInitialTestimonialSectionContent: CreateInitialContentFunctio
 > = (options?: CreateInitialContentOptions) => {
   return {
     id: uuid.v4(),
-    title: contentSettingsTr(`testimonialsTitle`),
+    title: rteDoc(contentSettingsTr(`testimonialsTitle`)),
     type: 'testimonial-section',
     displayStyle: 'centered',
     topPadding: TESTIMONIAL_DEFAULT_PADDING,
@@ -741,22 +751,22 @@ export const createInitialTestimonialSectionContent: CreateInitialContentFunctio
     items: [],
     titleStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.titles,
+      textStyleType: TEXT_STYLE_TYPES.heading4,
       textAlign: 'center',
     },
     testimonialStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.headings,
+      textStyleType: TEXT_STYLE_TYPES.heading5,
       textAlign: 'center',
     },
     nameStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.paragraphs,
+      textStyleType: TEXT_STYLE_TYPES.paragraph2,
       textAlign: 'center',
     },
     positionStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.paragraphs,
+      textStyleType: TEXT_STYLE_TYPES.paragraph2,
       textAlign: 'center',
     },
     backgroundStyle: {},
@@ -770,19 +780,19 @@ export const createInitialAboutSectionContent: CreateInitialContentFunction<
   return {
     id: uuid.v4(),
     imageUrl: '',
-    title: contentSettingsTr(`aboutSectionTitle`),
+    title: rteDoc(contentSettingsTr(`aboutSectionTitle`)),
     type: 'about-section',
     displayStyle: 'centered',
-    paragraph: '',
+    paragraph: rteDoc(''),
     colorReplacements: [],
     titleStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.titles,
+      textStyleType: TEXT_STYLE_TYPES.heading4,
       textAlign: 'center',
     },
     paragraphStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.paragraphs,
+      textStyleType: TEXT_STYLE_TYPES.paragraph2,
       textAlign: 'center',
     },
     backgroundStyle: {},
@@ -819,6 +829,47 @@ export const createDefaultLogoTheme = (): LogoTheme => {
   };
 };
 
+/**
+ * Runs after migration on a blank site, so its header and footer text starts on its role with no
+ * typography of its own. The blank model has no version, so every migration runs on it and keeps the
+ * retired look as that text's own values; the model defaults can't change because released
+ * migrations read them. The Save Contact label (brand.contact only) joins the same pass: migration-22
+ * seeds it with typography of its own too.
+ */
+export const applyBlankSiteTextRoles = (model: BrandPageModel): void => {
+  const onRole = <T extends TextStyleDeclaration>(
+    style: T,
+    textStyleType: TextStyleType,
+  ): T => ({ ...omitTypography(style), textStyleType }) as T;
+
+  for (const footer of [model.pageFooterDesktop, model.pageFooterMobile]) {
+    footer.copyrightStyle = onRole(
+      footer.copyrightStyle,
+      TEXT_STYLE_TYPES.paragraph2,
+    );
+  }
+
+  for (const header of [model.pageHeaderDesktop, model.pageHeaderMobile]) {
+    const { navigation } = header;
+
+    navigation.defaultButtonStyle = onRole(
+      navigation.defaultButtonStyle,
+      TEXT_STYLE_TYPES.paragraph1,
+    );
+    navigation.hamburgerMenuStyle.defaultButtonStyle = onRole(
+      navigation.hamburgerMenuStyle.defaultButtonStyle,
+      TEXT_STYLE_TYPES.button,
+    );
+  }
+
+  if (model.saveContactSettings?.buttonTextStyle) {
+    model.saveContactSettings.buttonTextStyle = onRole(
+      model.saveContactSettings.buttonTextStyle,
+      TEXT_STYLE_TYPES.button,
+    );
+  }
+};
+
 export const createInitialBrandPage = (
   brandPageType: BrandPageType,
 ): BrandPageModel => {
@@ -852,7 +903,7 @@ export const createInitialSocialLinksContent = (
     type: 'social-links',
     topPadding: 32,
     bottomPadding: 32,
-    title: contentSettingsTr(`followUsOnTitle`),
+    title: rteDoc(contentSettingsTr(`followUsOnTitle`)),
     links: [
       {
         id: uuid.v4(),
@@ -894,7 +945,7 @@ export const createInitialSocialLinksContent = (
     backgroundStyles: {},
     titleStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.titles,
+      textStyleType: TEXT_STYLE_TYPES.heading4,
       textAlign: 'center',
     },
   };
@@ -905,8 +956,8 @@ export const createInitialShapesSectionContent: CreateInitialContentFunction<
 > = (options?: CreateInitialContentOptions) => {
   return {
     id: uuid.v4(),
-    title: contentSettingsTr(`shapesTitle`),
-    description: '',
+    title: rteDoc(contentSettingsTr(`shapesTitle`)),
+    description: rteDoc(''),
     type: 'shapes-section',
     topPadding: 32,
     bottomPadding: 32,
@@ -931,22 +982,22 @@ export const createInitialShapesSectionContent: CreateInitialContentFunction<
     size: '4rem',
     titleStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.titles,
+      textStyleType: TEXT_STYLE_TYPES.heading4,
       textAlign: 'center',
     },
     descriptionStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.paragraphs,
+      textStyleType: TEXT_STYLE_TYPES.paragraph2,
       textAlign: 'center',
     },
     headingStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.headings,
+      textStyleType: TEXT_STYLE_TYPES.heading5,
       textAlign: 'center',
     },
     paragraphStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.paragraphs,
+      textStyleType: TEXT_STYLE_TYPES.paragraph2,
       textAlign: 'center',
     },
   };

package/src/brand-page-maker/stores/admin-logo-settings/admin-logo-settings-store-utils.test.ts

@@ -1,8 +1,9 @@
 import { describe, expect, test } from 'vitest';
 import { mapAdminPreviewLogoTemplateModelToAdminLogoTemplateTemplate } from './admin-logo-settings-store-utils';
 import type { AdminPreviewLogoTemplateModel } from './admin-logo-settings-store';
-import { BRAND_PAGE_TYPES } from '@brand-page';
+import { BRAND_PAGE_TYPES, TextStyles } from '@brand-page';
 import type { ColorItem } from '@brand-page';
+import { CANONICAL_TEXT_STYLE_TYPES } from '@brand-page/models/styles.model';
 
 // rgba(0,0,0,1) → #000000 · rgba(241,176,74,1) → #f1b04a (canonicalSolidHex)
 const previewModel = (
@@ -33,13 +34,27 @@ const paletteFixture = (): ColorItem[] => [
 const mapWith = (
   colors: ColorItem[],
   templateModel: AdminPreviewLogoTemplateModel = previewModel(),
+  textStyles: TextStyles = new TextStyles(),
 ) =>
   mapAdminPreviewLogoTemplateModelToAdminLogoTemplateTemplate(
     [],
     BRAND_PAGE_TYPES.default,
     colors,
+    textStyles,
   )(templateModel);
 
+const ROLE = CANONICAL_TEXT_STYLE_TYPES[0];
+
+const workingTextStyles = (): TextStyles => {
+  const textStyles = new TextStyles();
+
+  textStyles.textStyleOptions[ROLE].style.fontSize = '99px';
+  textStyles.textStyleOptions[ROLE].style.fontFamily = 'Pacifico';
+  textStyles.textStyleOptions[ROLE].isModified = true;
+
+  return textStyles;
+};
+
 const rolesById = (colors: ColorItem[] = []): Record<string, string> =>
   Object.fromEntries(colors.map((c) => [c.id, c.value ?? '']));
 
@@ -112,4 +127,51 @@ describe('mapAdminPreviewLogoTemplateModelToAdminLogoTemplateTemplate', () => {
     expect(custom).toBeDefined();
     expect(working).not.toContain(custom);
   });
+
+  // The card's scoped role block outranks the canvas's global one, so a card built on default
+  // roles paints default typography whatever the Style tab says.
+  test('carries the working text style roles, so a card paints the canvas typography', () => {
+    const { brandPageModel } = mapWith(
+      paletteFixture(),
+      previewModel(),
+      workingTextStyles(),
+    );
+    const role = brandPageModel.styles?.textStyles.textStyleOptions[ROLE];
+
+    expect(role?.style.fontSize).toBe('99px');
+    expect(role?.style.fontFamily).toBe('Pacifico');
+    expect(role?.isModified).toBe(true);
+  });
+
+  test('every template over the same working roles agrees on them', () => {
+    const textStyles = workingTextStyles();
+    const first = mapWith(paletteFixture(), previewModel(), textStyles);
+    const second = mapWith(
+      paletteFixture(),
+      previewModel({ logoTemplateToken: 'logo-template-2' }),
+      textStyles,
+    );
+
+    expect(
+      first.brandPageModel.styles?.textStyles.textStyleOptions[ROLE].style,
+    ).toEqual(
+      second.brandPageModel.styles?.textStyles.textStyleOptions[ROLE].style,
+    );
+  });
+
+  test('the card model does not share role style objects with the working roles', () => {
+    const working = workingTextStyles();
+    const { brandPageModel } = mapWith(
+      paletteFixture(),
+      previewModel(),
+      working,
+    );
+    const cardRole = brandPageModel.styles!.textStyles.textStyleOptions[ROLE];
+
+    expect(cardRole.style).not.toBe(working.textStyleOptions[ROLE].style);
+
+    cardRole.style.fontSize = '1px';
+
+    expect(working.textStyleOptions[ROLE].style.fontSize).toBe('99px');
+  });
 });