@designcrowd/library.brand-page 5.18.2-ast-padding-1 → 5.18.2-ast-subnav-1

package/lib/src/{CreatedOnBrandCrowd-de-de-GFYl8DtL.js → CreatedOnBrandCrowd-de-de-BcE0fnK1.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-CRihSxY0.js";
+import { _ as t } from "./lib-BXKezSr4.js";
 const i = {}, h = {
   width: "275",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-en-us-D5CcXf2I.js → CreatedOnBrandCrowd-en-us-CSiIpDLD.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-CRihSxY0.js";
+import { _ as t } from "./lib-BXKezSr4.js";
 const i = {}, h = {
   width: "251",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-es-es-Cr7J3ooe.js → CreatedOnBrandCrowd-es-es-D_dx-lMy.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-CRihSxY0.js";
+import { _ as t } from "./lib-BXKezSr4.js";
 const i = {}, h = {
   width: "250",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-fr-BC1NFFIW.js → CreatedOnBrandCrowd-fr-ca-BR7qAax-.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-CRihSxY0.js";
+import { _ as t } from "./lib-BXKezSr4.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-ca-BC1NFFIW.js → CreatedOnBrandCrowd-fr-fr-BR7qAax-.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-CRihSxY0.js";
+import { _ as t } from "./lib-BXKezSr4.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-pt-BdiCcpwi.js → CreatedOnBrandCrowd-pt-br-D8L6aJoK.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-CRihSxY0.js";
+import { _ as t } from "./lib-BXKezSr4.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-br-BdiCcpwi.js → CreatedOnBrandCrowd-pt-pt-D8L6aJoK.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-CRihSxY0.js";
+import { _ as t } from "./lib-BXKezSr4.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnDcom-de-de-d4TmC_lo.js → CreatedOnDcom-de-de-Bo0WNPXh.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-CRihSxY0.js";
+import { _ as e } from "./lib-BXKezSr4.js";
 const M = {}, Z = {
   width: "242",
   height: "36",

package/lib/src/{CreatedOnDcom-en-us-DlvLEF-R.js → CreatedOnDcom-en-us-B0GDCSrA.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-CRihSxY0.js";
+import { _ as e } from "./lib-BXKezSr4.js";
 const i = {}, M = {
   width: "231",
   height: "36",

package/lib/src/{CreatedOnDcom-es-es-BulpVp3k.js → CreatedOnDcom-es-es-CDq2MPQJ.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-CRihSxY0.js";
+import { _ as e } from "./lib-BXKezSr4.js";
 const M = {}, Z = {
   width: "230",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-ca-M4xqunZe.js → CreatedOnDcom-fr-ca-B8L5Wjnk.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-CRihSxY0.js";
+import { _ as e } from "./lib-BXKezSr4.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-fr-BFqUXgzb.js → CreatedOnDcom-fr-fr-vpgsTke6.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-CRihSxY0.js";
+import { _ as e } from "./lib-BXKezSr4.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-br-CUVcVkV2.js → CreatedOnDcom-pt-br-CUMf_n7T.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-CRihSxY0.js";
+import { _ as M } from "./lib-BXKezSr4.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-pt-Dc4CZ4xW.js → CreatedOnDcom-pt-pt-B_Ek1lUj.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-CRihSxY0.js";
+import { _ as M } from "./lib-BXKezSr4.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/brand-page/components/contact-form/ContactForm.mixin.d.ts

@@ -45,10 +45,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }, {
     submitButtonStyle(): BrandPageCssStyle;
     submitButtonTextStyle(): BrandPageCssStyle;
-    contentPaddingStyle(): {
-        paddingTop: string;
-        paddingBottom: string;
-    };
     hasCard(): boolean;
     hasBgImage(): boolean;
     hasBgColor(): boolean;

package/lib/src/brand-page/components/contact-form/ContactForm.mixin.js

@@ -4,7 +4,7 @@ import { getEmailValidationError, getMessageValidationError, getNameValidationEr
 import brandPageClient from '../../clients/brand-page.client';
 import { isEmail } from '../../../utils/validator.util';
 import { ALIGN_CARD_CENTER, ALIGN_CARD_CENTER_IMAGE, ALIGN_CENTERED, ALIGN_LEFT_FULL_IMAGE, ALIGN_RIGHT_FULL_IMAGE, DISPLAY_STYLE_COLLAPSED, RECAPTCHA_ACTION_CONTACT_FORM, TEXT_ONLY, } from '../../constants';
-import { getRenderText, contentPaddingStyle as toContentPaddingStyle, } from '@brand-page/utils';
+import { getRenderText } from '@brand-page/utils';
 import { hasRTEContent } from '@brand-page-maker/utils';
 import { useReCaptcha } from '../../composables/recaptcha.composable';
 export default defineComponent({
@@ -64,9 +64,6 @@ export default defineComponent({
             };
             return buttonTextStyle;
         },
-        contentPaddingStyle() {
-            return toContentPaddingStyle(this.viewModel);
-        },
         hasCard() {
             return (this.viewModel.layoutStyle === ALIGN_CARD_CENTER ||
                 this.viewModel.layoutStyle === ALIGN_CARD_CENTER_IMAGE);
@@ -75,10 +72,9 @@ export default defineComponent({
             return this.viewModel.layoutStyle === ALIGN_CARD_CENTER_IMAGE;
         },
         hasBgColor() {
-            // Every brandSite layout applies the background colour on the section
-            // root (banner-style) so the padding control reveals it; for the image
-            // layouts it only shows in the padding bands around the image block.
-            return Boolean(this.viewModel.layoutStyle);
+            return (this.viewModel.layoutStyle === ALIGN_CARD_CENTER ||
+                this.viewModel.layoutStyle === TEXT_ONLY ||
+                this.viewModel.layoutStyle === ALIGN_CENTERED);
         },
         isCenteredLayout() {
             return (this.viewModel.layoutStyle === ALIGN_CARD_CENTER ||

package/lib/src/brand-page/components/image-gallery/ImageGallery.mixin.d.ts

@@ -23,10 +23,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {}, {
     imageModalSelectedImageIndex: number | undefined;
 }, {
-    contentPaddingStyle(): {
-        paddingTop: string;
-        paddingBottom: string;
-    };
     getContainerStyle(): BrandPageCssStyle;
     images(): any[] | undefined;
     galleryType(): GalleryType;

package/lib/src/brand-page/components/image-gallery/ImageGallery.mixin.js

@@ -1,5 +1,4 @@
 import { defineComponent } from 'vue';
-import { contentPaddingStyle as toContentPaddingStyle } from '@brand-page/utils';
 import ComponentCommonMixin from '../mixins/component-common.mixin';
 import ImageModalMixin from '../mixins/image-modal.mixin';
 import { GALLERY_TYPES } from '@brand-page/models';
@@ -30,9 +29,6 @@ export default defineComponent({
         };
     },
     computed: {
-        contentPaddingStyle() {
-            return toContentPaddingStyle(this.viewModel);
-        },
         getContainerStyle() {
             if (this.galleryType === 'carousel') {
                 const maxWidth = this.containerClientWidth

package/lib/src/brand-page/components/mailing-list/MailingList.mixin.d.ts

@@ -39,10 +39,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     isSubmitting: boolean;
     show: boolean;
 }, {
-    contentPaddingStyle(): {
-        paddingTop: string;
-        paddingBottom: string;
-    };
     hasNameError(): boolean;
     hasEmailError(): boolean;
     hasFormError(): boolean;

package/lib/src/brand-page/components/mailing-list/MailingList.mixin.js

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
 import brandPageClient from '../../clients/brand-page.client';
-import { getEmailValidationError, contentPaddingStyle as toContentPaddingStyle, } from '@brand-page/utils';
+import { getEmailValidationError } from '@brand-page/utils';
 import { contentSettingsTr, mailingListTr, } from '@src/composables/useTranslate';
 import { useReCaptcha } from '../../composables/recaptcha.composable';
 import { RECAPTCHA_ACTION_MAILING_LIST } from '../../constants';
@@ -51,9 +51,6 @@ export default defineComponent({
         }
     },
     computed: {
-        contentPaddingStyle() {
-            return toContentPaddingStyle(this.viewModel);
-        },
         hasNameError() {
             return !!this.nameError;
         },

package/lib/src/brand-page/components/payment/request-payment/RequestPayment.mixin.d.ts

@@ -21,10 +21,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     selectedPaymentOptionIds: string[];
     imageType: string;
 }, {
-    contentPaddingStyle(): {
-        paddingTop: string;
-        paddingBottom: string;
-    };
     isCustomerRequestDetailsValid(): boolean;
     paymentRequestDetails(): PaymentRequestDetails;
     paymentOptions(): PaymentOption[];

package/lib/src/brand-page/components/payment/request-payment/RequestPayment.mixin.js

@@ -2,7 +2,6 @@ import { defineComponent } from 'vue';
 import { PAYMENT_OPTION_DISPLAY_TYPES, PAYMENT_OPTION_IMAGE_TYPES, } from '../../../models';
 import { DEFAULT_CURRENCY_SYMBOL } from '../../../constants';
 import { addOpacityToHex } from '../../../utils/color.util';
-import { contentPaddingStyle as toContentPaddingStyle } from '../../../utils';
 import { RGBAtoHex } from '@utils/helpers';
 const MAX_CUSTOM_REQUEST_CHARS = 500;
 export default defineComponent({
@@ -29,9 +28,6 @@ export default defineComponent({
         };
     },
     computed: {
-        contentPaddingStyle() {
-            return toContentPaddingStyle(this.viewModel);
-        },
         isCustomerRequestDetailsValid() {
             return (!this.viewModel.requestPaymentConfig.isCustomerRequestDetailsEnabled ||
                 this.customerRequestDetails === undefined ||

package/lib/src/brand-page/components/payment/support-me/SupportMe.mixin.d.ts

@@ -17,10 +17,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     prevCustomAmount: string;
     customAmount: string;
 }, {
-    contentPaddingStyle(): {
-        paddingTop: string;
-        paddingBottom: string;
-    };
     isCustomAmountFieldVisible(): boolean;
     isCustomerMessageFieldVisible(): boolean;
     isCustomerMessageValid(): boolean;

package/lib/src/brand-page/components/payment/support-me/SupportMe.mixin.js

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
 import { SUPPORT_ME_CUSTOM_PRODUCT_NAME } from '../../../constants';
-import { isPaymentAmountValid, contentPaddingStyle as toContentPaddingStyle, } from '../../../utils';
+import { isPaymentAmountValid } from '../../../utils';
 import { DEFAULT_CURRENCY_SYMBOL, DEFAULT_CURRENCY_CODE, } from '../../../constants';
 import { paymentTr } from '@src/composables/useTranslate';
 const MAX_CUSTOM_MESSAGE_CHARS = 500;
@@ -24,9 +24,6 @@ export default defineComponent({
         };
     },
     computed: {
-        contentPaddingStyle() {
-            return toContentPaddingStyle(this.viewModel);
-        },
         isCustomAmountFieldVisible() {
             return this.viewModel.supportMeConfig.paymentOptions.some((o) => o.name === SUPPORT_ME_CUSTOM_PRODUCT_NAME);
         },

package/lib/src/brand-page/components/video/Video.mixin.d.ts

@@ -11,10 +11,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     isCollapsed: boolean;
     title: string;
 }, {
-    contentPaddingStyle(): {
-        paddingTop: string;
-        paddingBottom: string;
-    };
     arrowStyle(): BrandPageCssStyle;
     containerStyle(): BrandPageCssStyle;
     videoUrl(): string;

package/lib/src/brand-page/components/video/Video.mixin.js

@@ -1,5 +1,4 @@
 import { defineComponent } from 'vue';
-import { contentPaddingStyle as toContentPaddingStyle } from '@brand-page/utils';
 import ComponentCommonMixin from '../mixins/component-common.mixin';
 import { DISPLAY_STYLE_PREVIEW, DISPLAY_STYLE_COLLAPSED, } from '../../constants';
 export default defineComponent({
@@ -17,9 +16,6 @@ export default defineComponent({
         title: 'Video',
     }),
     computed: {
-        contentPaddingStyle() {
-            return toContentPaddingStyle(this.viewModel);
-        },
         arrowStyle() {
             return {
                 color: this.viewModel.buttonStyles.style?.color,

package/lib/src/brand-page/constants/misc.constants.d.ts

@@ -29,17 +29,6 @@ export declare const TEXT_ONLY = "text-only";
 export declare const ALIGN_LEFT_FULL_IMAGE = "left-aligned-full-image";
 export declare const ALIGN_RIGHT_FULL_IMAGE = "right-aligned-full-image";
 export declare const ALTERNATE_IMAGE = "alternate-image";
-/**
- * Padding Control (BP-5699): the top/bottom padding each Contact Form layout
- * had hard-coded before the sliders existed. Single source for new-block
- * defaults (content-settings) and the migration backfill for existing pages.
- * The image layouts (full-image divided and card-over-image) are 0: their
- * padding sits on the section root and reveals the background colour around
- * the image block (same as the banner), while the spacing inside/over the
- * image stays fixed — existing pages rendered the image flush to the section
- * edges.
- */
-export declare const CONTACT_FORM_LAYOUT_DEFAULT_PADDING: Record<string, number>;
 export declare const BIG_IMAGE = "big-image";
 export declare const MEDIA_ONLY = "media-only";
 export declare const COLUMNS = "columns";

package/lib/src/brand-page/constants/misc.constants.js

@@ -30,25 +30,6 @@ export const TEXT_ONLY = 'text-only';
 export const ALIGN_LEFT_FULL_IMAGE = 'left-aligned-full-image';
 export const ALIGN_RIGHT_FULL_IMAGE = 'right-aligned-full-image';
 export const ALTERNATE_IMAGE = 'alternate-image';
-/**
- * Padding Control (BP-5699): the top/bottom padding each Contact Form layout
- * had hard-coded before the sliders existed. Single source for new-block
- * defaults (content-settings) and the migration backfill for existing pages.
- * The image layouts (full-image divided and card-over-image) are 0: their
- * padding sits on the section root and reveals the background colour around
- * the image block (same as the banner), while the spacing inside/over the
- * image stays fixed — existing pages rendered the image flush to the section
- * edges.
- */
-export const CONTACT_FORM_LAYOUT_DEFAULT_PADDING = {
-    '': 0, // collapsible (default on Brand Page / Brand Contact)
-    [ALIGN_CENTERED]: 24,
-    [ALIGN_CARD_CENTER]: 32,
-    [ALIGN_CARD_CENTER_IMAGE]: 0,
-    [TEXT_ONLY]: 32,
-    [ALIGN_LEFT_FULL_IMAGE]: 0,
-    [ALIGN_RIGHT_FULL_IMAGE]: 0,
-};
 export const BIG_IMAGE = 'big-image';
 export const MEDIA_ONLY = 'media-only';
 export const COLUMNS = 'columns';

package/lib/src/brand-page/models/content.model.d.ts

@@ -47,8 +47,6 @@ export interface Content {
     id: string;
     type: ContentType;
     personalisationRole?: PersonalisationRole;
-    topPadding?: number;
-    bottomPadding?: number;
     imageUrlOverride?: string;
     imageUrlsOverride?: string;
     avatarImageUrlOverride?: string;

package/lib/src/brand-page/models/navigation-styles.model.d.ts

@@ -8,6 +8,7 @@ export declare class NavigationMenuStyles {
     subNavBackgroundColor?: string;
     constructor(options: Partial<NavigationMenuStyles>, defaultOptions: Partial<NavigationMenuStyles>);
 }
+export declare const getDefaultSubNavBackgroundColor: (defaultTextColor: string | undefined) => string | undefined;
 type NavigationStylesOptionType = Partial<Omit<NavigationDesktop | NavigationMobile, 'hamburgerMenuStyle'>> & {
     hamburgerMenuStyle?: Partial<NavigationMenuStyles>;
 };

package/lib/src/brand-page/models/navigation-styles.model.js

@@ -1,4 +1,4 @@
-import { DEFAULT_FONT_FAMILY_KEY, DEFAULT_FONT_STYLE, DEFAULT_TEXT_ALIGN, DEFAULT_TEXT_DECORATION, FONT_FAMILY_CONFIGS, FONT_SIZE_BODY, FONT_WEIGHT_NORMAL, defaultHamburgerNavigation, NAVIGATION_DISPLAY, } from '../constants';
+import { DEFAULT_FONT_FAMILY_KEY, DEFAULT_FONT_STYLE, DEFAULT_TEXT_ALIGN, DEFAULT_TEXT_DECORATION, FONT_FAMILY_CONFIGS, FONT_SIZE_BODY, FONT_WEIGHT_NORMAL, STYLE_THEME_KEYS, defaultHamburgerNavigation, NAVIGATION_DISPLAY, } from '../constants';
 import { VIEWPORTS } from './index';
 import { TEXT_STYLE_TYPES } from './index';
 import cloneDeep from 'lodash.clonedeep';
@@ -15,6 +15,17 @@ export class NavigationMenuStyles {
             options.subNavBackgroundColor ?? defaultOptions.subNavBackgroundColor;
     }
 }
+export const getDefaultSubNavBackgroundColor = (defaultTextColor) => {
+    if (defaultTextColor === STYLE_THEME_KEYS.LogoTextColor ||
+        defaultTextColor === STYLE_THEME_KEYS.LogoTextMultiColor) {
+        return STYLE_THEME_KEYS.LogoBackgroundColor;
+    }
+    if (defaultTextColor === STYLE_THEME_KEYS.LogoBackgroundColor ||
+        defaultTextColor === STYLE_THEME_KEYS.LogoBackgroundMultiColor) {
+        return STYLE_THEME_KEYS.LogoTextColor;
+    }
+    return undefined;
+};
 class NavigationStyles {
     displayType;
     renderAfterLogo;
@@ -59,7 +70,9 @@ class NavigationStyles {
             borderColor: theme?.primaryColor,
         }, option?.selectedButtonStyle || {});
         this.iconStyle = Object.assign({}, option?.iconStyle || {});
-        this.subNavBackgroundColor = option?.subNavBackgroundColor;
+        this.subNavBackgroundColor =
+            option?.subNavBackgroundColor ??
+                getDefaultSubNavBackgroundColor(this.defaultButtonStyle.color);
         this.isLogoVisible = option?.isLogoVisible || true;
         this.hamburgerMenuStyle = new NavigationMenuStyles(option?.hamburgerMenuStyle || {}, {
             defaultButtonStyle: {
@@ -81,6 +94,19 @@ class NavigationStyles {
             },
             subNavBackgroundColor: theme?.secondaryColor,
         });
+        // Default the hamburger sub nav to the opposite logo colour when the menu
+        // text is colour matched (e.g. logo text colour -> logo background colour).
+        // Runs on every load - so it also reaches sites already stamped at the latest
+        // model version, where the migration is version-gated out (bp-5454). Only an
+        // unset value or the legacy explicit default is upgraded, so a deliberate
+        // non-matched choice (or an already color matched value) is preserved.
+        const colorMatchedHamburgerSubNav = getDefaultSubNavBackgroundColor(this.hamburgerMenuStyle.defaultButtonStyle.color);
+        if (colorMatchedHamburgerSubNav &&
+            (this.hamburgerMenuStyle.subNavBackgroundColor === undefined ||
+                this.hamburgerMenuStyle.subNavBackgroundColor === theme?.secondaryColor)) {
+            this.hamburgerMenuStyle.subNavBackgroundColor =
+                colorMatchedHamburgerSubNav;
+        }
     }
 }
 export class NavigationDesktop extends NavigationStyles {

package/lib/src/brand-page/utils/index.d.ts

@@ -1,5 +1,4 @@
 export * from './style.util';
-export * from './content-padding.util';
 export * from './view-model.util';
 export * from './text.util';
 export * from './model.util';

package/lib/src/brand-page/utils/index.js

@@ -1,5 +1,4 @@
 export * from './style.util';
-export * from './content-padding.util';
 export * from './view-model.util';
 export * from './text.util';
 export * from './model.util';

package/lib/src/brand-page/utils/migration/migration-16.js

@@ -1,37 +1,52 @@
-import { CONTACT_FORM_LAYOUT_DEFAULT_PADDING } from '../../constants';
+import { STYLE_THEME_KEYS, NAVIGATION_DISPLAY } from '../../constants';
+import { getDefaultSubNavBackgroundColor } from '../../models';
 /**
- * Tier 2 Padding Control (BP-5699): blocks that already had hard-coded
- * top/bottom spacing. Backfill that spacing as the block's explicit
- * topPadding/bottomPadding so existing pages render unchanged once the spacing
- * moves to the Padding Control sliders. Type-scoped and idempotent — only the
- * listed types, and only when the value isn't already set.
+ * Migration 16: Default the sub nav background color to "color match on" for
+ * existing sites using the TAB_2 ("nav 2") or any hamburger display style.
+ *
+ * Before the sub nav background colour feature shipped, these styles defaulted
+ * to an explicit colour (e.g. the theme secondary colour for hamburger). This
+ * migration brings existing sites in line with the new default by setting the
+ * sub nav background colour to a logo theme key (color matched), unless the
+ * value is already color matched - in which case the user's choice is kept.
  */
-const TIER2_DEFAULT_PADDING = {
-    text: 12,
-    'images-section': 32,
-    'social-links': 32,
-    'shapes-section': 32,
-    'booking-section': 32,
+const isColorMatched = (color) => !!color && Object.values(STYLE_THEME_KEYS).includes(color);
+// Matches NavigationStyleSettings.getMenuStyles: hamburger styles live on the
+// hamburgerMenuStyle (looser `.includes` to catch any hamburger variant),
+// TAB_2 uses the top-level styles.
+const isHamburger = (displayType) => displayType.includes('hamburger');
+const isColorMatchTargetDisplayType = (displayType) => isHamburger(displayType) || displayType === NAVIGATION_DISPLAY.TAB_2;
+const applyDefaultSubNavColorMatch = (navigation) => {
+    if (!navigation?.displayType) {
+        return;
+    }
+    if (!isColorMatchTargetDisplayType(navigation.displayType)) {
+        return;
+    }
+    let menuStyles;
+    if (isHamburger(navigation.displayType)) {
+        navigation.hamburgerMenuStyle =
+            navigation.hamburgerMenuStyle ?? {};
+        menuStyles = navigation.hamburgerMenuStyle;
+    }
+    else {
+        menuStyles = navigation;
+    }
+    // Respect an existing color matched value so we don't clobber a deliberate choice.
+    if (isColorMatched(menuStyles.subNavBackgroundColor)) {
+        return;
+    }
+    // Only color match the sub nav when the default text color is itself color
+    // matched - in which case it takes the opposite logo color (e.g. logo text
+    // color -> logo background color). Otherwise leave the sub nav as-is.
+    const colorMatchedSubNav = getDefaultSubNavBackgroundColor(menuStyles.defaultButtonStyle?.color);
+    if (colorMatchedSubNav) {
+        menuStyles.subNavBackgroundColor = colorMatchedSubNav;
+    }
 };
 export const migration16 = async (migrationResult) => {
     const { brandPageModel } = migrationResult;
-    brandPageModel.pages.forEach((page) => {
-        page.contents.forEach((content) => {
-            // Contact Form's previous hard-coded spacing varies by layout, so it's
-            // keyed by layoutStyle rather than a single per-type value.
-            const value = content.type === 'contact-form'
-                ? CONTACT_FORM_LAYOUT_DEFAULT_PADDING[content.layoutStyle ?? '']
-                : TIER2_DEFAULT_PADDING[content.type];
-            if (value === undefined) {
-                return;
-            }
-            if (content.topPadding === undefined) {
-                content.topPadding = value;
-            }
-            if (content.bottomPadding === undefined) {
-                content.bottomPadding = value;
-            }
-        });
-    });
+    applyDefaultSubNavColorMatch(brandPageModel.pageHeaderDesktop?.navigation);
+    applyDefaultSubNavColorMatch(brandPageModel.pageHeaderMobile?.navigation);
     return migrationResult;
 };

package/lib/src/brand-page/utils/migration.util.js

@@ -119,7 +119,7 @@ const MIGRATION_TABLE = [
     {
         version: 16,
         migrateFn: migration16,
-        description: 'Tier 2 Padding Control (BP-5699): backfill existing top/bottom spacing as explicit padding for text (12px), images, social links, shapes and booking (32px), and contact form (per layout)',
+        description: 'Default sub nav background color to color match on for existing TAB_2 and hamburger navs',
     },
 ];
 export const GetLatestModelVersion = () => Math.max(...MIGRATION_TABLE.map((x) => x.version));

package/lib/src/brand-page-maker/components/admin-logo-settings/AdminLogoSettings.mixin.d.ts

@@ -8,8 +8,6 @@ declare const _default: import("vue").DefineComponent<{}, {
                 id: string;
                 type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                 personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
-                topPadding?: number | undefined;
-                bottomPadding?: number | undefined;
                 imageUrlOverride?: string | undefined;
                 imageUrlsOverride?: string | undefined;
                 avatarImageUrlOverride?: string | undefined;

package/lib/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.mixin.d.ts

@@ -496,8 +496,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         id: string;
                         type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
-                        topPadding?: number | undefined;
-                        bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
                         avatarImageUrlOverride?: string | undefined;
@@ -547,8 +545,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         id: string;
                         type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
-                        topPadding?: number | undefined;
-                        bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
                         avatarImageUrlOverride?: string | undefined;
@@ -598,8 +594,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         id: string;
                         type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
-                        topPadding?: number | undefined;
-                        bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
                         avatarImageUrlOverride?: string | undefined;
@@ -649,8 +643,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         id: string;
                         type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
-                        topPadding?: number | undefined;
-                        bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
                         avatarImageUrlOverride?: string | undefined;
@@ -700,8 +692,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         id: string;
                         type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
-                        topPadding?: number | undefined;
-                        bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
                         avatarImageUrlOverride?: string | undefined;
@@ -751,8 +741,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         id: string;
                         type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
-                        topPadding?: number | undefined;
-                        bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
                         avatarImageUrlOverride?: string | undefined;