@designcrowd/library.brand-page 6.2.11 → 6.2.12

package/lib/src/brand-page-maker/models/content-settings.js

@@ -1,7 +1,9 @@
-import { BrandPageModel, PageStyles, FORM_FIELD_IDS, PAYMENT_OPTION_DISPLAY_TYPES, PAYMENT_OPTION_IMAGE_TYPES, SOCIAL_LINKS_ICON_DISPLAY_STYLES, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop, MEDIA_TYPES, BUTTON_LINK_TYPE, DISPLAY_STYLE_PREVIEW, 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, DEFAULT_LOGO_TEXT_COLOR_RGB, EMPTY_LOGO_IMAGE_MODEL, BRAND_PAGE_TYPES, SENSITIVE_CONTENT_TYPES, CONTACT_FORM_LAYOUT_DEFAULT_PADDING, TESTIMONIAL_DEFAULT_PADDING, } from '@brand-page';
+import { BrandPageModel, PageStyles, FORM_FIELD_IDS, PAYMENT_OPTION_DISPLAY_TYPES, PAYMENT_OPTION_IMAGE_TYPES, SOCIAL_LINKS_ICON_DISPLAY_STYLES, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop, MEDIA_TYPES, BUTTON_LINK_TYPE, DISPLAY_STYLE_PREVIEW, SUPPORT_ME_CUSTOM_PRODUCT_NAME, DEFAULT_LOGO_HEIGHT, DEFAULT_LOGO_WIDTH, TEXT_STYLE_TYPES, TEXT_COLUMNS, DEFAULT_LOGO_BACKGROUND_COLOR_RGB, DEFAULT_LOGO_TEXT_COLOR_RGB, EMPTY_LOGO_IMAGE_MODEL, BRAND_PAGE_TYPES, SENSITIVE_CONTENT_TYPES, CONTACT_FORM_LAYOUT_DEFAULT_PADDING, TESTIMONIAL_DEFAULT_PADDING, } from '@brand-page';
 import * as uuid from 'uuid';
 import { getColorShades, DEFAULT_CARD_SURFACE_REFERENCE, } from '@brand-page/utils';
 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, iconUrl, options) => () => {
     let translatedTitle = '';
     switch (type) {
@@ -51,7 +53,7 @@ export const createInitialButtonContent = (type, iconUrl, options) => () => {
         title,
         titleStyle: {
             applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-            textStyleType: TEXT_STYLE_TYPES.buttons,
+            textStyleType: TEXT_STYLE_TYPES.button,
             textAlign: 'center',
         },
         url: '',
@@ -76,7 +78,7 @@ export const createInitialGeneralLinkContent = (type, iconUrl, options) => () =>
         page: '',
         titleStyle: {
             applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-            textStyleType: TEXT_STYLE_TYPES.buttons,
+            textStyleType: TEXT_STYLE_TYPES.button,
             textAlign: 'center',
         },
         fieldRole: 'button',
@@ -120,27 +122,27 @@ export const createInitialVideoContent = () => {
 export const createInitialProfileContent = (options) => {
     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',
         },
     };
@@ -149,17 +151,16 @@ export const createInitialTextContent = (options) => {
     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,
                     },
                 },
             ]
@@ -168,13 +169,9 @@ export const createInitialTextContent = (options) => {
         // Brand Site text blocks sit in a 12px outer padding; Brand Page / Brand Contact use 0.
         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],
@@ -219,17 +216,17 @@ export const createInitialMailingListContent = (options) => {
         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
@@ -241,7 +238,7 @@ export const createInitialMailingListContent = (options) => {
 export const createInitialRequestPaymentContent = (options) => {
     return {
         id: uuid.v4(),
-        description: '',
+        description: rteDoc(''),
         displayStyle: DISPLAY_STYLE_PREVIEW,
         requestPaymentConfig: {
             paymentOptions: [],
@@ -251,7 +248,7 @@ export const createInitialRequestPaymentContent = (options) => {
             paymentOptionImageType: PAYMENT_OPTION_IMAGE_TYPES.auto,
         },
         successMessage: '',
-        title: contentSettingsTr(`buyNowTitle`),
+        title: rteDoc(contentSettingsTr(`buyNowTitle`)),
         type: 'request-payment',
         topPadding: 0,
         bottomPadding: 0,
@@ -260,22 +257,25 @@ export const createInitialRequestPaymentContent = (options) => {
         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
@@ -287,35 +287,38 @@ export const createInitialRequestPaymentContent = (options) => {
 export const createInitialShopContent = (options) => {
     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: {},
@@ -342,35 +345,38 @@ export const createInitialSupportMeContent = (options) => {
             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
@@ -390,8 +396,8 @@ export const createInitialContactFormContent = (options) => {
     const padding = CONTACT_FORM_LAYOUT_DEFAULT_PADDING[layoutStyle] ?? 0;
     return {
         id: uuid.v4(),
-        title: contentSettingsTr(`contactUsTitle`),
-        description: '',
+        title: rteDoc(contentSettingsTr(`contactUsTitle`)),
+        description: rteDoc(''),
         buttonText: contentSettingsTr(`sendPlaceholder`),
         displayStyle: DISPLAY_STYLE_PREVIEW,
         layoutStyle,
@@ -456,7 +462,7 @@ export const createInitialContactFormContent = (options) => {
                 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:
@@ -468,20 +474,20 @@ export const createInitialContactFormContent = (options) => {
         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',
         },
     };
@@ -492,8 +498,12 @@ export const createInitialBannerSectionContent = (options) => {
         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: [],
@@ -501,12 +511,12 @@ export const createInitialBannerSectionContent = (options) => {
         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: {
@@ -517,7 +527,7 @@ export const createInitialBannerSectionContent = (options) => {
         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: {
@@ -529,8 +539,8 @@ export const createInitialBannerSectionContent = (options) => {
 export const createInitialBookingSectionContent = (options) => {
     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',
@@ -538,12 +548,12 @@ export const createInitialBookingSectionContent = (options) => {
         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: {},
@@ -551,7 +561,7 @@ export const createInitialBookingSectionContent = (options) => {
         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',
         },
     };
@@ -559,8 +569,8 @@ export const createInitialBookingSectionContent = (options) => {
 export const createInitialImagesSectionContent = (options) => {
     return {
         id: uuid.v4(),
-        title: contentSettingsTr(`imagesTitle`),
-        description: '',
+        title: rteDoc(contentSettingsTr(`imagesTitle`)),
+        description: rteDoc(''),
         type: 'images-section',
         topPadding: 32,
         bottomPadding: 32,
@@ -585,27 +595,27 @@ export const createInitialImagesSectionContent = (options) => {
         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',
         },
     };
@@ -613,7 +623,7 @@ export const createInitialImagesSectionContent = (options) => {
 export const createInitialTestimonialSectionContent = (options) => {
     return {
         id: uuid.v4(),
-        title: contentSettingsTr(`testimonialsTitle`),
+        title: rteDoc(contentSettingsTr(`testimonialsTitle`)),
         type: 'testimonial-section',
         displayStyle: 'centered',
         topPadding: TESTIMONIAL_DEFAULT_PADDING,
@@ -621,22 +631,22 @@ export const createInitialTestimonialSectionContent = (options) => {
         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: {},
@@ -647,19 +657,19 @@ export const createInitialAboutSectionContent = (options) => {
     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: {},
@@ -691,6 +701,27 @@ export const createDefaultLogoTheme = () => {
         },
     };
 };
+/**
+ * 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) => {
+    const onRole = (style, textStyleType) => ({ ...omitTypography(style), textStyleType });
+    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) => {
     return new BrandPageModel({
         brandPageType: brandPageType,
@@ -719,7 +750,7 @@ export const createInitialSocialLinksContent = (options) => {
         type: 'social-links',
         topPadding: 32,
         bottomPadding: 32,
-        title: contentSettingsTr(`followUsOnTitle`),
+        title: rteDoc(contentSettingsTr(`followUsOnTitle`)),
         links: [
             {
                 id: uuid.v4(),
@@ -761,7 +792,7 @@ export const createInitialSocialLinksContent = (options) => {
         backgroundStyles: {},
         titleStyle: {
             applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-            textStyleType: TEXT_STYLE_TYPES.titles,
+            textStyleType: TEXT_STYLE_TYPES.heading4,
             textAlign: 'center',
         },
     };
@@ -769,8 +800,8 @@ export const createInitialSocialLinksContent = (options) => {
 export const createInitialShapesSectionContent = (options) => {
     return {
         id: uuid.v4(),
-        title: contentSettingsTr(`shapesTitle`),
-        description: '',
+        title: rteDoc(contentSettingsTr(`shapesTitle`)),
+        description: rteDoc(''),
         type: 'shapes-section',
         topPadding: 32,
         bottomPadding: 32,
@@ -795,22 +826,22 @@ export const createInitialShapesSectionContent = (options) => {
         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/lib/src/brand-page-maker/stores/admin-logo-settings/admin-logo-settings-store-utils.d.ts

@@ -1,3 +1,3 @@
 import type { AdminPreviewLogoTemplateModel, AdminPreviewLogoTemplateTemplate } from './admin-logo-settings-store';
-import type { BrandPageType, ColorItem, Content } from '@brand-page';
-export declare const mapAdminPreviewLogoTemplateModelToAdminLogoTemplateTemplate: (contents: Content[], brandPageType: BrandPageType, colors: ColorItem[]) => (templateModel: AdminPreviewLogoTemplateModel) => AdminPreviewLogoTemplateTemplate;
+import type { BrandPageType, ColorItem, Content, TextStyles } from '@brand-page';
+export declare const mapAdminPreviewLogoTemplateModelToAdminLogoTemplateTemplate: (contents: Content[], brandPageType: BrandPageType, colors: ColorItem[], textStyles: TextStyles) => (templateModel: AdminPreviewLogoTemplateModel) => AdminPreviewLogoTemplateTemplate;

package/lib/src/brand-page-maker/stores/admin-logo-settings/admin-logo-settings-store-utils.js

@@ -1,13 +1,16 @@
 import { BrandPageModel, PageStyles } from '@brand-page';
 import { applyLogoThemeToBrandPageModel, parseLogoThemeToCssStyles, logoUtil, } from '@brand-page/utils';
-export const mapAdminPreviewLogoTemplateModelToAdminLogoTemplateTemplate = (contents, brandPageType, colors) => (templateModel) => {
+export const mapAdminPreviewLogoTemplateModelToAdminLogoTemplateTemplate = (contents, brandPageType, colors, textStyles) => (templateModel) => {
     const logoTheme = parseLogoThemeToCssStyles(templateModel.logoTheme);
     // `contents` hold `var(--palette-…)` references, so the card model must carry
     // the palette that DEFINES those ids — without it the card's scoped var block
     // emits nothing and every reference falls back to the maker canvas's `:root`,
     // painting all cards the same. The bake then anchors it to this template's
     // logo: roles 0/1 from the logoTheme, neutrals re-derived, customs untouched.
-    const { model } = applyLogoThemeToBrandPageModel(logoTheme, new BrandPageModel({ contents, styles: new PageStyles({ colors }) }));
+    const { model } = applyLogoThemeToBrandPageModel(logoTheme, new BrandPageModel({
+        contents,
+        styles: new PageStyles({ colors, textStyles }),
+    }));
     const templateModelLogoImage = logoUtil.safeGetLogoTemplateImageFromLogoTemplateImageUrl(templateModel.logoImageUrl);
     return {
         id: templateModel.logoTemplateToken,

package/lib/src/brand-page-maker/stores/admin-logo-settings/admin-logo-settings-store.js

@@ -5,6 +5,7 @@ import { useUiStore } from '../ui';
 import { useUiLogoSettingsStore, } from '@shared/logo-settings/store';
 import { useUiBackgroundSettingsStore } from '@shared/background-settings/store';
 import { useUiColorPaletteStore } from '@shared/color-palette/store';
+import { useUiStyleSettingsStore } from '@shared/style-settings/store';
 import { parseLogoThemeToCssStyles, logoUtil } from '@brand-page/utils';
 import { mapAdminPreviewLogoTemplateModelToAdminLogoTemplateTemplate } from './admin-logo-settings-store-utils';
 import { useBrandPageMakerStore } from '../brandpage-maker';
@@ -84,9 +85,9 @@ export const useAdminLogoSettingsStore = defineStore('adminLogoSettings', {
             const brandPageMakerStore = useBrandPageMakerStore();
             const contents = contentSettingsStore.items.map((i) => i.settings.content);
             return this.previewLogoTemplateModels.map(mapAdminPreviewLogoTemplateModelToAdminLogoTemplateTemplate(contents, brandPageMakerStore.brandPageType, 
-            // Contents and their palette travel together — the card scope must
-            // define every var(--id) the contents reference.
-            useUiColorPaletteStore().colors));
+            // Contents travel with the styles they reference — the card scope must define
+            // every var(--id) and every role the contents use.
+            useUiColorPaletteStore().colors, useUiStyleSettingsStore().textStyles));
         },
     },
 });