@designcrowd/library.brand-page 6.2.11 → 6.2.12

package/lib/src/shared/navigation-style-settings/store/index.js

@@ -1,10 +1,12 @@
 import { NavigationDesktop, NavigationMobile, VIEWPORTS } from '@brand-page';
 import { NAVIGATION_DISPLAY, DEFAULT_TEXT_ALIGN, getDefaultSubNavBackgroundColor, } from '@brand-page';
 import { getNavThemeByTextStyle } from '@brand-page/utils/color.util';
+import { isCanonicalTextStyleType } from '@brand-page/utils/text-role-reconnect.util';
+import { normalizeTextStyleAgainstRole, omitTypography, pickTypography, } from '@brand-page/utils/text-style.util';
 import { availableNavigationStyleConfigs, navigationStyleTypeConfigs, } from '@brand-page-maker/models/navigation-style-configs';
 import { assertUnreachable } from '../../../helpers/ts.helper';
 import { defineStore } from 'pinia';
-import { useUiStyleSettingsStore } from '../../style-settings/store';
+import cloneDeep from 'lodash.clonedeep';
 import { useUiColorPaletteStore } from '../../color-palette/store';
 import { PAGE_SECTIONS } from '../../page-settings/models';
 export const createDefaultContentItemState = () => ({
@@ -34,18 +36,25 @@ export const useUiNavigationStyleSettingsStore = defineStore('uiNavigationStyleS
             this.navigationStyleTypeConfigs = navigationStyleTypeConfigs;
         },
         setState({ newState, }) {
-            this.$patch(Object.assign(newState));
+            // Replace each navigation whole: an object-form $patch deep-merges, so a key the new
+            // navigation leaves out (a role-linked link's typography) would survive from the old state.
+            this.$patch((state) => {
+                state.navigation[PAGE_SECTIONS.header] = cloneDeep(newState.navigation[PAGE_SECTIONS.header]);
+            });
         },
         setNavigationOrder({ section, renderAfterLogo, viewport, }) {
             this.navigation[section][viewport].renderAfterLogo = renderAfterLogo;
         },
-        _setDefaultButtonStyle({ displayType, section, style, viewport, }) {
+        _setDefaultButtonStyle({ displayType, section, style, viewport, ownsTypography = false, }) {
+            // A text-style write carries the whole typography, so a prop it leaves out (a Reset, a
+            // role pick) must not survive from the old style and keep overriding the role.
+            const base = (current) => ownsTypography ? omitTypography(current) : current;
             if (displayType.includes('hamburger')) {
-                this.navigation[section][viewport].hamburgerMenuStyle.defaultButtonStyle = Object.assign({}, this.navigation[section][viewport].hamburgerMenuStyle
-                    .defaultButtonStyle, style);
+                this.navigation[section][viewport].hamburgerMenuStyle.defaultButtonStyle = Object.assign({}, base(this.navigation[section][viewport].hamburgerMenuStyle
+                    .defaultButtonStyle), style);
                 return;
             }
-            this.navigation[section][viewport].defaultButtonStyle = Object.assign({}, this.navigation[section][viewport].defaultButtonStyle, style);
+            this.navigation[section][viewport].defaultButtonStyle = Object.assign({}, base(this.navigation[section][viewport].defaultButtonStyle), style);
         },
         _setSelectedButtonStyle({ displayType, section, style, viewport, }) {
             if (displayType !== NAVIGATION_DISPLAY.TAB_1 &&
@@ -78,25 +87,30 @@ export const useUiNavigationStyleSettingsStore = defineStore('uiNavigationStyleS
                 defaultButtonStyle;
             this.navigation[section][viewport].iconStyle = iconStyle;
         },
-        setDisplayType({ section, displayType, viewport, }) {
-            const uiStyleStore = useUiStyleSettingsStore();
+        setDisplayType({ section, displayType, viewport, headerBackgroundColor, pageBackgroundColor, }) {
             const paletteStore = useUiColorPaletteStore();
             this.navigation[section][viewport].displayType = displayType;
-            const currentTextStyleType = this.navigation[section][viewport].defaultButtonStyle.textStyleType;
+            const currentStyle = this.navigation[section][viewport].defaultButtonStyle;
+            const currentTextStyleType = currentStyle.textStyleType;
             const config = this.availableNavigationStyleConfigs.find((c) => c.displayType === displayType);
             if (!config) {
                 throw new Error('No config for display type');
             }
-            // Nav theme derives from the paragraphs text-style colour; the contrasting
-            // selected-text role is resolved against the live palette.
-            const theme = getNavThemeByTextStyle({
-                color: uiStyleStore.textStyles.textStyleOptions.paragraphs?.style?.color,
-            }, paletteStore.colors);
+            // BP-5969 (ADR-0022): the header nav themes off the LOGO, not the page's button
+            // styling — `getNavThemeByTextStyle` picks the first brand role legible on the header
+            // background (logo text, else logo background, else a neutral) and its contrasting pair.
+            const theme = getNavThemeByTextStyle(headerBackgroundColor, paletteStore.colors, pageBackgroundColor);
             // TODO - use constant instead of "hamburger"
             if (!displayType.includes('hamburger')) {
                 this._setButtonStyles({
                     section,
-                    defaultButtonStyle: config.defaultButtonStyle,
+                    // A layout sets the tab shape; a role-linked nav keeps its role and its own overrides.
+                    defaultButtonStyle: isCanonicalTextStyleType(currentTextStyleType)
+                        ? {
+                            ...omitTypography(config.defaultButtonStyle),
+                            ...pickTypography(currentStyle),
+                        }
+                        : config.defaultButtonStyle,
                     selectedButtonStyle: config.selectedButtonStyle,
                     iconStyle: config.iconStyle,
                     viewport,
@@ -165,6 +179,16 @@ export const useUiNavigationStyleSettingsStore = defineStore('uiNavigationStyleS
                 });
             }
         },
+        renormalizeTextStylesForRole(type, textStyleOptions) {
+            for (const viewport of [VIEWPORTS.desktop, VIEWPORTS.mobile]) {
+                const navigation = this.navigation[PAGE_SECTIONS.header][viewport];
+                for (const menu of [navigation, navigation.hamburgerMenuStyle]) {
+                    if (menu.defaultButtonStyle?.textStyleType !== type)
+                        continue;
+                    menu.defaultButtonStyle = normalizeTextStyleAgainstRole(menu.defaultButtonStyle, textStyleOptions);
+                }
+            }
+        },
         setNavigationStyleOptionValue({ section, option, value, viewport, }) {
             const displayType = this.navigation[section][viewport].displayType;
             switch (option) {
@@ -194,6 +218,7 @@ export const useUiNavigationStyleSettingsStore = defineStore('uiNavigationStyleS
                         section,
                         style: value,
                         viewport,
+                        ownsTypography: true,
                     });
                     break;
                 case 'selectedBackgroundColor':

package/lib/src/shared/page-settings/components/delete-page-modal/DeletePageModal.mixin.d.ts

@@ -35,8 +35,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onCancel?: ((...args: any[]) => any) | undefined;
     onConfirm?: ((...args: any[]) => any) | undefined;
 }>, {
+    isVisible: boolean;
     pageId: string;
     pageTitle: string;
-    isVisible: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/src/shared/page-settings/components/new-page-modal/NewPageModal.mixin.d.ts

@@ -35,6 +35,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             isHidden: boolean;
             pageId: string;
         }): void;
+        renormalizeTextStylesForRole(type: string, textStyleOptions: import("../../../../brand-page").TextStyleOptions | undefined): void;
         setPageSettingsSectionValue({ sectionName, propName, index, value, merge, viewport, }: {
             sectionName: import("../../store").PageSettingsSection;
             propName: keyof import("../../store").PageSettingsStateSectionStyles;

package/lib/src/shared/page-settings/components/page-settings/PageSettings.mixin.d.ts

@@ -3057,7 +3057,6 @@ declare const _default: import("vue").DefineComponent<{}, {
                     imageUrlOverride?: string | undefined;
                     imageTitleOverride?: string | undefined;
                 }[];
-                textFontFamily?: import("@brand-page").FontFamilyKey | undefined;
                 viewport: import("@brand-page").ViewportsType;
                 logoImageHeight: string | undefined;
                 logoImageWidth: string | undefined;
@@ -3286,7 +3285,6 @@ declare const _default: import("vue").DefineComponent<{}, {
                     imageUrlOverride?: string | undefined;
                     imageTitleOverride?: string | undefined;
                 }[];
-                textFontFamily?: import("@brand-page").FontFamilyKey | undefined;
                 viewport: import("@brand-page").ViewportsType;
                 logoImageHeight: string | undefined;
                 logoImageWidth: string | undefined;
@@ -3993,6 +3991,9 @@ declare const _default: import("vue").DefineComponent<{}, {
         setHideBranding(payload: {
             hideBranding: boolean;
         }): void;
+        setSaveContactButtonTextStyle(payload: {
+            buttonTextStyle: import("@brand-page").SaveContactOptions["buttonTextStyle"];
+        }): void;
         setSensitiveContent(payload: {
             sensitiveContent: string;
         }): void;
@@ -4055,7 +4056,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             brandPageType: import("@brand-page").BrandPageType;
         }): void;
         initialiseStoresByBrandPageModelAsync(brandPageModel: import("@brand-page").BrandPageModel): Promise<void>;
-        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, userPromptContentKey, showAiTemplatesTab, businessName, industry, layout, logoVariationImageUrls, shopConfigData: _shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
+        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, userPromptContentKey, showAiTemplatesTab, businessName, industry, layout, logoVariationImageUrls, shopConfigData: _shopConfigData, isServerRenderOverride, isBlankSite, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
         initialisePages({ pages, sections, }: {
             pages: import("@brand-page").PageModel[];
             sections: import("../../store").PageSettingsStateSections;
@@ -4170,6 +4171,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             isHidden: boolean;
             pageId: string;
         }): void;
+        renormalizeTextStylesForRole(type: string, textStyleOptions: import("@brand-page").TextStyleOptions | undefined): void;
         setPageSettingsSectionValue({ sectionName, propName, index, value, merge, viewport, }: {
             sectionName: PageSettingsSection;
             propName: keyof import("../../store").PageSettingsStateSectionStyles;
@@ -4615,6 +4617,12 @@ declare const _default: import("vue").DefineComponent<{}, {
             id: string;
             name: string;
         }): unknown;
+        renormalizeTextStylesForRole(type: string, previousRole?: Record<string, unknown>, active?: {
+            id: string;
+            name: string;
+            index?: number;
+            doc: unknown;
+        }): void;
         applyCardContrastToItem({ id }: {
             id: string;
         }): void;
@@ -4711,11 +4719,12 @@ declare const _default: import("vue").DefineComponent<{}, {
             renderAfterLogo: boolean;
             viewport: import("@brand-page").ViewportsType;
         }): void;
-        _setDefaultButtonStyle({ displayType, section, style, viewport, }: {
+        _setDefaultButtonStyle({ displayType, section, style, viewport, ownsTypography, }: {
             displayType: import("@brand-page").NavigationDisplayType;
             section: import("../../models").PageSection;
             style: BrandPageCssStyle;
             viewport: import("@brand-page").ViewportsType;
+            ownsTypography?: boolean;
         }): void;
         _setSelectedButtonStyle({ displayType, section, style, viewport, }: {
             displayType: import("@brand-page").NavigationDisplayType;
@@ -4742,11 +4751,14 @@ declare const _default: import("vue").DefineComponent<{}, {
             iconStyle: BrandPageCssStyle;
             viewport: import("@brand-page").ViewportsType;
         }): void;
-        setDisplayType({ section, displayType, viewport, }: {
+        setDisplayType({ section, displayType, viewport, headerBackgroundColor, pageBackgroundColor, }: {
             section: import("../../models").PageSection;
             displayType: import("@brand-page").NavigationDisplayType;
             viewport: import("@brand-page").ViewportsType;
+            headerBackgroundColor?: string;
+            pageBackgroundColor?: string;
         }): void;
+        renormalizeTextStylesForRole(type: string, textStyleOptions: import("@brand-page").TextStyleOptions | undefined): void;
         setNavigationStyleOptionValue({ section, option, value, viewport, }: {
             section: import("../../models").PageSection;
             option: import("../../../../brand-page-maker/models/navigation-style-configs").NavigationStyleConfigOption;

package/lib/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.d.ts

@@ -3014,7 +3014,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     imageUrlOverride?: string | undefined;
                     imageTitleOverride?: string | undefined;
                 }[];
-                textFontFamily?: import("@brand-page").FontFamilyKey | undefined;
                 viewport: ViewportsType;
                 logoImageHeight: string | undefined;
                 logoImageWidth: string | undefined;
@@ -3243,7 +3242,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     imageUrlOverride?: string | undefined;
                     imageTitleOverride?: string | undefined;
                 }[];
-                textFontFamily?: import("@brand-page").FontFamilyKey | undefined;
                 viewport: ViewportsType;
                 logoImageHeight: string | undefined;
                 logoImageWidth: string | undefined;
@@ -3448,6 +3446,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             isHidden: boolean;
             pageId: string;
         }): void;
+        renormalizeTextStylesForRole(type: string, textStyleOptions: import("@brand-page").TextStyleOptions | undefined): void;
         setPageSettingsSectionValue({ sectionName, propName, index, value, merge, viewport, }: {
             sectionName: import("../../store").PageSettingsSection;
             propName: keyof PageSettingsStateSectionStyles;
@@ -3503,9 +3502,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         buttonIconColor(): string | undefined;
         buttonShadowColor(): string;
         buttonSoftShadowColor(): string;
-        defaultTextColor(): string | undefined;
         selectedButtonStyleConfig(): import("../../../../brand-page-maker/models").ButtonStyleConfig | undefined;
-        selectedTextFontFamily(): import("@brand-page").FontFamilyKey;
     }, {
         initialise(options: {
             reset: boolean;
@@ -3525,9 +3522,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         _setSelectedButtonStyle(payload: {
             id: string;
         }): void;
-        _setTextFontFamily(payload: {
-            fontFamily: import("@brand-page").FontFamilyKey;
-        }): void;
         _setTextStyles(payload: Partial<import("@brand-page").TextStyles>): void;
         setAdminStyleOptionDefaultValues(): void;
         setTextStyleOption(payload: {
@@ -3551,9 +3545,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         setSelectedButtonStyle(payload: {
             id: string;
         }): void;
-        setTextFontFamily(payload: {
-            fontFamily: import("@brand-page").FontFamilyKey;
-        }): Promise<void>;
     }>;
     navigationStyleSettingsStore: import("pinia").Store<"uiNavigationStyleSettings", import("../../../navigation-style-settings/store").NavigationStyleSettingsState, {}, {
         initialise(options: {
@@ -3567,11 +3558,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             renderAfterLogo: boolean;
             viewport: ViewportsType;
         }): void;
-        _setDefaultButtonStyle({ displayType, section, style, viewport, }: {
+        _setDefaultButtonStyle({ displayType, section, style, viewport, ownsTypography, }: {
             displayType: NavigationDisplayType;
             section: PageSection;
             style: BrandPageCssStyle;
             viewport: ViewportsType;
+            ownsTypography?: boolean;
         }): void;
         _setSelectedButtonStyle({ displayType, section, style, viewport, }: {
             displayType: NavigationDisplayType;
@@ -3598,11 +3590,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             iconStyle: BrandPageCssStyle;
             viewport: ViewportsType;
         }): void;
-        setDisplayType({ section, displayType, viewport, }: {
+        setDisplayType({ section, displayType, viewport, headerBackgroundColor, pageBackgroundColor, }: {
             section: PageSection;
             displayType: NavigationDisplayType;
             viewport: ViewportsType;
+            headerBackgroundColor?: string;
+            pageBackgroundColor?: string;
         }): void;
+        renormalizeTextStylesForRole(type: string, textStyleOptions: import("@brand-page").TextStyleOptions | undefined): void;
         setNavigationStyleOptionValue({ section, option, value, viewport, }: {
             section: PageSection;
             option: import("../../../../brand-page-maker/models/navigation-style-configs").NavigationStyleConfigOption;
@@ -3610,6 +3605,59 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             viewport: ViewportsType;
         }): void;
     }>;
+    backgroundSettingsStore: import("pinia").Store<"uiBackgroundSettings", import("../../../background-settings/store").BackgroundSettingsState, {
+        hasMedia(): boolean;
+    }, {
+        onBackgroundChanged(): void;
+        setBackgroundStyle({ backgroundStyle, }: {
+            backgroundStyle: import("@brand-page").BackgroundStyle;
+        }): void;
+        setBackgroundShapes(payload: import("@brand-page").BackgroundShape[]): void;
+        setBackgroundPersonalisationRole(payload: {
+            personalisationRole: import("@brand-page").PersonalisationRole | undefined;
+        }): void;
+        setBackgroundShapeStyle(payload: BrandPageCssStyle): void;
+        setPrimaryBackgroundShapeStyle(payload: BrandPageCssStyle): void;
+        setBackgroundImageUrl({ backgroundImageUrl, }: {
+            backgroundImageUrl: string;
+        }): void;
+        addBackgroundShape({ shapeUrl, width, height, aspectRatio, }: {
+            shapeUrl: string;
+            width?: number;
+            height?: number;
+            aspectRatio?: number;
+        }): void;
+        deleteBackgroundShape({ shapeIndex }: {
+            shapeIndex: number;
+        }): void;
+        replaceBackgroundShape({ shapeIndex, shapeUrl, width, height, aspectRatio, }: {
+            shapeIndex: number;
+            shapeUrl: string;
+            width?: number;
+            height?: number;
+            aspectRatio?: number;
+        }): void;
+        setLogoColors({ logoColors }: import("../../../background-settings/background-settings-models").SetLogoColorsPayload): void;
+        clearUserImageBackgroundImageUrl(): void;
+        setAdminBackgroundOptionDefaultValues(): void;
+        setState(payload: import("../../../background-settings/models").BackgroundSetStatePayload): void;
+        setBackgroundStyles({ backgroundStyles, }: {
+            backgroundStyles: import("@brand-page").BackgroundStyles;
+        }): void;
+        setBackgroundShapeSettings(payload: import("../../../background-settings/background-settings-models").SetBackgroundShapeSettingsPayload): void;
+        setRecommendedLogoColors(payload: import("../../../background-settings/background-settings-models").SetRecommendedLogoColorsPayload): void;
+        setBackgroundMode(payload: {
+            backgroundMode: import("@brand-page-maker/stores").BrandPageSettingsMode;
+        }): void;
+        openShapePicker(intent: import("../../../background-settings/store").ShapePickerIntent): void;
+        closeShapePicker(): void;
+        setBackgroundMedia(payload: import("../../../my-uploads/models").MediaBaseSelectedPayload): void;
+        removeBackgroundVideo(): void;
+        resetMediaOverlayStyle(): void;
+        setMediaOverlayStyle({ mediaOverlayStyle, }: {
+            mediaOverlayStyle: Partial<BrandPageCssStyle>;
+        }): void;
+    }>;
     contentSettingsStore: import("pinia").Store<"uiContentSettings", import("../../../content-settings/store").ContentSettingsState, {
         contentErrorCount(): number;
         getContent(state: {
@@ -3980,6 +4028,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             id: string;
             name: string;
         }): unknown;
+        renormalizeTextStylesForRole(type: string, previousRole?: Record<string, unknown>, active?: {
+            id: string;
+            name: string;
+            index?: number;
+            doc: unknown;
+        }): void;
         applyCardContrastToItem({ id }: {
             id: string;
         }): void;
@@ -4654,6 +4708,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         setHideBranding(payload: {
             hideBranding: boolean;
         }): void;
+        setSaveContactButtonTextStyle(payload: {
+            buttonTextStyle: import("@brand-page").SaveContactOptions["buttonTextStyle"];
+        }): void;
         setSensitiveContent(payload: {
             sensitiveContent: string;
         }): void;
@@ -4716,7 +4773,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             brandPageType: import("@brand-page").BrandPageType;
         }): void;
         initialiseStoresByBrandPageModelAsync(brandPageModel: import("@brand-page").BrandPageModel): Promise<void>;
-        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, userPromptContentKey, showAiTemplatesTab, businessName, industry, layout, logoVariationImageUrls, shopConfigData: _shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
+        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, userPromptContentKey, showAiTemplatesTab, businessName, industry, layout, logoVariationImageUrls, shopConfigData: _shopConfigData, isServerRenderOverride, isBlankSite, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
         initialisePages({ pages, sections, }: {
             pages: import("@brand-page").PageModel[];
             sections: import("../../store").PageSettingsStateSections;

package/lib/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.js

@@ -4,8 +4,10 @@ import { PAGE_SECTIONS } from '../../models';
 import { BUTTON_LINK_TYPE, LOGO_SLIDER_DESKTOP_MAX, LOGO_SLIDER_DESKTOP_MIN, LOGO_SLIDER_MOBILE_MAX, LOGO_SLIDER_MOBILE_MIN, VIEWPORTS, getNavigationType, NAVIGATION_TYPE_DEFAULT_DISPLAY_TYPE, } from '@brand-page';
 import { UI_DEVICE_MODES, UI_EVENT_SOURCES } from '../../../models';
 import { isTransparentColour } from '@brand-page/utils/color.util';
+import { omitTypography } from '@brand-page/utils/text-style.util';
 import { useUiPageSettingsStore } from '../../store';
 import { useUiNavigationStyleSettingsStore } from '../../../navigation-style-settings/store';
+import { useUiBackgroundSettingsStore } from '../../../background-settings/store';
 import { useUiStyleSettingsStore } from '../../../style-settings/store';
 import { useUiContentSettingsStore } from '../../../content-settings/store';
 import { useBrandPageContainerStore, useBrandPageMakerStore, useLogoStore, useUiStore, } from '@brand-page-maker/stores';
@@ -62,6 +64,7 @@ export default defineComponent({
         const pageSettingsStore = useUiPageSettingsStore();
         const styleSettingsStore = useUiStyleSettingsStore();
         const navigationStyleSettingsStore = useUiNavigationStyleSettingsStore();
+        const backgroundSettingsStore = useUiBackgroundSettingsStore();
         const contentSettingsStore = useUiContentSettingsStore();
         const uiStore = useUiStore();
         const containerStore = useBrandPageContainerStore();
@@ -74,6 +77,7 @@ export default defineComponent({
             pageSettingsStore,
             styleSettingsStore,
             navigationStyleSettingsStore,
+            backgroundSettingsStore,
             contentSettingsStore,
             uiStore,
             containerStore,
@@ -294,6 +298,8 @@ export default defineComponent({
                 section: PAGE_SECTIONS.header,
                 displayType: displayType,
                 viewport: this.viewport,
+                headerBackgroundColor: this.header.backgroundStyle?.backgroundColor,
+                pageBackgroundColor: this.backgroundSettingsStore.backgroundStyles.style.background,
             });
         },
         handleHeaderNavigationTypeChange(navigationType) {
@@ -395,11 +401,13 @@ export default defineComponent({
             });
         },
         setTextStyleOption(propName, value) {
+            const current = this.sections[this.sectionName][this.viewport][propName];
+            // The field sends the whole typography, so a prop it leaves out (a Reset, a role pick)
+            // must not survive from the old style and keep overriding the role.
             this.pageSettingsStore.setPageSettingsSectionValue({
                 sectionName: this.sectionName,
                 propName,
-                value: value.value,
-                merge: true,
+                value: { ...omitTypography(current ?? {}), ...value.value },
                 viewport: this.viewport,
             });
         },

package/lib/src/shared/page-settings/store/page-settings-store.d.ts

@@ -1,6 +1,6 @@
 import type { ContentItem } from '../../content-settings/models';
 import { PageHeaderDesktop, PageHeaderMobile, PageFooterDesktop, PageFooterMobile, VIEWPORTS } from '@brand-page';
-import type { NavigationType } from '@brand-page';
+import type { NavigationType, TextStyleOptions } from '@brand-page';
 import type { Content, HeaderButton, ImageGalleryItem, LinksItem, LogoImageModel, ViewportsType, LogoTemplateImageModel, BrandPagePaymentConfig, BrandPagePaymentConfigCurrency } from '@brand-page';
 import type { ContentPage } from '../models';
 import { PAGE_SECTIONS } from '../models';
@@ -72,6 +72,7 @@ export declare const useUiPageSettingsStore: import("pinia").StoreDefinition<"ui
         isHidden: boolean;
         pageId: string;
     }): void;
+    renormalizeTextStylesForRole(type: string, textStyleOptions: TextStyleOptions | undefined): void;
     setPageSettingsSectionValue({ sectionName, propName, index, value, merge, viewport, }: {
         sectionName: PageSettingsSection;
         propName: keyof PageSettingsStateSectionStyles;

package/lib/src/shared/page-settings/store/page-settings-store.js

@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia';
 import { BUTTON_LINK_TYPE, PageHeaderDesktop, PageHeaderMobile, PageFooterDesktop, PageFooterMobile, VIEWPORTS, getNavigationType, } from '@brand-page';
+import { normalizeTextStyleAgainstRole } from '@brand-page/utils/text-style.util';
 import { v4 as uuid } from 'uuid';
 import { PAGE_SECTIONS } from '../models';
 import { toPageModels } from '../utils';
@@ -153,6 +154,22 @@ export const useUiPageSettingsStore = defineStore('uiPageSettings', {
         setPageVisibility({ isHidden, pageId, }) {
             this.pages.find((p) => p.id === pageId).isHidden = isHidden;
         },
+        renormalizeTextStylesForRole(type, textStyleOptions) {
+            for (const viewport of [VIEWPORTS.desktop, VIEWPORTS.mobile]) {
+                const footer = this.sections[PAGE_SECTIONS.footer][viewport];
+                if (footer.copyrightStyle?.textStyleType === type) {
+                    footer.copyrightStyle = normalizeTextStyleAgainstRole(footer.copyrightStyle, textStyleOptions);
+                }
+                const header = this.sections[PAGE_SECTIONS.header][viewport];
+                const buttonTextStyle = header.headerButton?.buttonTextStyle;
+                if (header.headerButton && buttonTextStyle?.textStyleType === type) {
+                    header.headerButton = {
+                        ...header.headerButton,
+                        buttonTextStyle: normalizeTextStyleAgainstRole(buttonTextStyle, textStyleOptions),
+                    };
+                }
+            }
+        },
         setPageSettingsSectionValue({ sectionName, propName, index, value, merge, viewport, }) {
             if (merge && index !== undefined) {
                 this.sections[sectionName][viewport][propName][index] = Object.assign({}, this.sections[sectionName][viewport][propName][index], value);

package/lib/src/shared/publish-brand-page-with-state/PublishBrandPageModalWithState.mixin.d.ts

@@ -132,6 +132,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         setHideBranding(payload: {
             hideBranding: boolean;
         }): void;
+        setSaveContactButtonTextStyle(payload: {
+            buttonTextStyle: import("../../brand-page").SaveContactOptions["buttonTextStyle"];
+        }): void;
         setSensitiveContent(payload: {
             sensitiveContent: string;
         }): void;
@@ -194,7 +197,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             brandPageType: import("../../brand-page").BrandPageType;
         }): void;
         initialiseStoresByBrandPageModelAsync(brandPageModel: import("../../brand-page").BrandPageModel): Promise<void>;
-        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, userPromptContentKey, showAiTemplatesTab, businessName, industry, layout, logoVariationImageUrls, shopConfigData: _shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
+        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, userPromptContentKey, showAiTemplatesTab, businessName, industry, layout, logoVariationImageUrls, shopConfigData: _shopConfigData, isServerRenderOverride, isBlankSite, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
         initialisePages({ pages, sections, }: {
             pages: import("../../brand-page").PageModel[];
             sections: import("../page-settings/store").PageSettingsStateSections;

package/lib/src/shared/rte-extensions/AutoLink.d.ts

@@ -0,0 +1,17 @@
+import { Extension } from '@tiptap/core';
+import type { EditorState } from 'prosemirror-state';
+import type { Mark } from 'prosemirror-model';
+/** A transaction carrying this meta skips the new-link styling pass below: a clipboard paste
+ * brings its own look (a copied link keeps its colour; a text-only paste brings no links), so
+ * neither wants AutoLink's "force blue + underline" treatment for a newly-created link. */
+export declare const AUTO_LINK_SKIP_STYLING_META = "autoLinkSkipStyling";
+/**
+ * The end-of-link detach a typed character gets right after a link's last position: the link
+ * mark (and its auto-blue colour, unless the user manually added an underline) drops from what
+ * comes next, so continuing to type doesn't extend the link. `null` when `pos` isn't at the end
+ * of a link — mid-link, or no link at all — so the caller keeps its own marks unchanged.
+ * Exported for `RteClipboard.ts`'s text-only paste, which takes the same detach a typed
+ * character would.
+ */
+export declare const linkDetachMarksAt: (state: EditorState, pos: number) => Mark[] | null;
+export declare const AutoLink: Extension<any, any>;