@designcrowd/library.brand-page 5.18.4 → 5.18.5

package/lib/src/shared/logo-settings/store/editable-logo-store.d.ts

@@ -74,8 +74,9 @@ export interface EditableLogoState {
     logoTemplateMetadata: string;
     isLogoDraftSaved: boolean;
     isTextOnlyLogo: boolean;
+    variationsByDraftToken: Record<string, EditableLogoVariation[]>;
 }
-export type SetStateAsyncPayload = Omit<EditableLogoState, 'enableEditMode' | 'editableLogoVariations'>;
+export type SetStateAsyncPayload = Omit<EditableLogoState, 'enableEditMode' | 'editableLogoVariations' | 'variationsByDraftToken'>;
 export declare const useUiEditableLogoStore: import("pinia").StoreDefinition<"uiEditableLogo", EditableLogoState, {
     getLogoPrimaryText: (state: {
         enableEditMode: boolean;
@@ -167,6 +168,7 @@ export declare const useUiEditableLogoStore: import("pinia").StoreDefinition<"ui
         logoTemplateMetadata: string;
         isLogoDraftSaved: boolean;
         isTextOnlyLogo: boolean;
+        variationsByDraftToken: Record<string, EditableLogoVariation[]>;
     } & import("pinia").PiniaCustomStateProperties<EditableLogoState>) => () => string | undefined;
 }, {
     setStateAsync(payload: {
@@ -184,6 +186,8 @@ export declare const useUiEditableLogoStore: import("pinia").StoreDefinition<"ui
     getEditableLogoVariationByVariationId(id: number): any;
     getEditableLogoVariationByBase64(base64: string): any;
     updateEditableLogoImageUrlAsync(defaultPrimaryText?: string, overrideLogoVariation?: number | undefined, layout?: string): Promise<void>;
+    stampLogoBase64IntoBrandPageData(overrideLogoVariation?: number): void;
+    restoreVariationsForDraftToken(logoDraftToken: string): boolean;
     updateMetadataAsync(defaultPrimaryText?: string, resetLogoTemplateMetadata?: boolean, layout?: string): Promise<void>;
     updateEditableLogoImageByVariationAsync(editableLogoVariation: EditableLogoVariation, defaultPrimaryText?: string, layout?: string): Promise<ModifyLogoDataResponse | null>;
     getDraftMetadata(logoDraftToken: string): string | undefined;

package/lib/src/shared/logo-settings/store/editable-logo-store.js

@@ -74,6 +74,7 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
         },
         makerFonts: [],
         isLogoDraftSaved: false,
+        variationsByDraftToken: {},
     }),
     actions: {
         async setStateAsync(payload) {
@@ -217,6 +218,17 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
         async updateEditableLogoImageUrlAsync(defaultPrimaryText, overrideLogoVariation, layout) {
             const tasks = this.editableLogoVariations.map((x) => this.updateEditableLogoImageByVariationAsync(x, defaultPrimaryText, layout));
             await Promise.all(tasks);
+            this.stampLogoBase64IntoBrandPageData(overrideLogoVariation);
+            // Cache per draft token so BYO undo can restore without re-rendering.
+            if (this.logoDraftToken) {
+                this.variationsByDraftToken[this.logoDraftToken] =
+                    this.editableLogoVariations.map((v) => ({ ...v }));
+            }
+        },
+        // Stamp editableLogoVariations[*].base64 across header/footer + every
+        // LogoContent. Called by the live edit path post-render, and by
+        // undo/redo to repopulate the stripped logoImageBase64Url fields.
+        stampLogoBase64IntoBrandPageData(overrideLogoVariation) {
             const pageSettingStore = useUiPageSettingsStore();
             [PAGE_SECTIONS.header, PAGE_SECTIONS.footer].forEach((section) => {
                 [VIEWPORTS.desktop, VIEWPORTS.mobile].forEach((viewport) => {
@@ -243,6 +255,15 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
                 });
             });
         },
+        // Restore variations grid for a draft token from the per-token cache.
+        // Returns true on cache hit.
+        restoreVariationsForDraftToken(logoDraftToken) {
+            const cached = this.variationsByDraftToken[logoDraftToken];
+            if (!cached)
+                return false;
+            this.editableLogoVariations = cached.map((v) => ({ ...v }));
+            return true;
+        },
         async updateMetadataAsync(defaultPrimaryText, resetLogoTemplateMetadata = false, layout) {
             const result = await this.postEditableLogoRequestAsync({
                 returnJson: true,
@@ -285,6 +306,13 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
             const logoDraft = logoStore.getLogoDraftAssetByToken(this.logoDraftToken);
             if (logoDraft) {
                 logoDraft.metadata = metadata;
+                // Refresh the template-asset stamp in case the active asset has
+                // changed since this draft was first registered (e.g. successive
+                // BYO uploads that share an existing draft token would otherwise
+                // keep pointing at an older template).
+                if (logoStore.logoTemplateAsset) {
+                    logoDraft.templateAsset = { ...logoStore.logoTemplateAsset };
+                }
             }
             else {
                 logoStore.addLogoDraftAsset({
@@ -293,6 +321,9 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
                         metadata,
                         tick: Date.now(),
                         isByo: logoStore.logoTemplateAsset?.isByo || false,
+                        templateAsset: logoStore.logoTemplateAsset
+                            ? { ...logoStore.logoTemplateAsset }
+                            : undefined,
                     },
                 });
             }

package/lib/src/shared/navigation-style-settings/components/navigation-style-settings/NavigationStyleSettings.mixin.js

@@ -31,17 +31,19 @@ export default defineComponent({
     computed: {
         colorPickerValue() {
             return (option) => {
-                return this.valueFuncDict[option]()
-                    ? RGBAtoHex(this.valueFuncDict[option]())
-                    : '';
+                const raw = this.valueFuncDict[option]();
+                if (raw) {
+                    return RGBAtoHex(raw);
+                }
+                if (option === 'defaultBackgroundColor' ||
+                    option === 'selectedBackgroundColor') {
+                    return 'transparent';
+                }
+                return '';
             };
         },
         navigationStyleOptions() {
-            const options = this.availableNavigationStyleConfigs.find((c) => c.displayType === this.value.displayType)?.options ?? [];
-            if (!this.isAdmin && this.value.displayType.includes('hamburger')) {
-                return options.filter((o) => o !== 'subNavBackgroundColor');
-            }
-            return options;
+            return (this.availableNavigationStyleConfigs.find((c) => c.displayType === this.value.displayType)?.options ?? []);
         },
         isOptionColorMatched() {
             return (option) => {

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

@@ -1,5 +1,5 @@
 import { NavigationDesktop, NavigationMobile, VIEWPORTS } from '@brand-page';
-import { NAVIGATION_DISPLAY, DEFAULT_TEXT_ALIGN, STYLE_THEME_KEYS, } from '@brand-page';
+import { NAVIGATION_DISPLAY, DEFAULT_TEXT_ALIGN, getDefaultSubNavBackgroundColor, } from '@brand-page';
 import { getThemeByTextStyleAndLogoTheme } from '@brand-page/utils/color.util';
 import { availableNavigationStyleConfigs, navigationStyleTypeConfigs, } from '@brand-page-maker/models/navigation-style-configs';
 import { assertUnreachable } from '../../../helpers/ts.helper';
@@ -7,17 +7,6 @@ import { defineStore } from 'pinia';
 import { useUiStore } from '@brand-page-maker/stores';
 import { useUiStyleSettingsStore } from '../../style-settings/store';
 import { PAGE_SECTIONS } from '../../page-settings/models';
-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;
-};
 export const createDefaultContentItemState = () => ({
     isCollapsed: true,
     groups: {},

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

@@ -3124,6 +3124,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         canUseGettyVideos: boolean;
         canUseGoogleAdsense: boolean;
         googleAdsenseEnabled: boolean;
+        canUseUndoRedo: boolean;
     }>;
     isAdmin: import("vue").ComputedRef<boolean>;
     isBrandSite: import("vue").ComputedRef<boolean>;
@@ -3835,16 +3836,21 @@ declare const _default: import("vue").DefineComponent<{}, {
         hideChangeTemplateConfirmModal(): void;
         onBackgroundChanged(): void;
         onChangeTemplateConfirmModalCancel(): void;
-        onChangeTemplateConfirmModalConfirm(): void;
+        onChangeTemplateConfirmModalConfirm(): Promise<void>;
         onContentChanged(): void;
         onStyleChanged(): void;
-        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): void;
+        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): Promise<void>;
         setSelectedTabName(payload: any): void;
         showNextNotificationMessage(): Promise<void>;
         updateContent<TContent extends Content, P extends {
             id: string;
             content: TContent;
         }>(payload: P): Promise<void>;
+        _captureTemplateSwitchIfEnabled(): void;
+        applyHistorySnapshot(snapshot: import("@brand-page").BrandPageModel, activePageId?: string | undefined, logoEditsStr?: string | undefined): Promise<void>;
+        _syncLogoSettingsFromSnapshot(snapshot: import("@brand-page").BrandPageModel, logoEditsStr?: string | undefined): Promise<void>;
+        _navigateToActivePage(activePageId?: string | undefined): void;
+        _fallbackSidebarIfSelectedContentMissing(snapshot: import("@brand-page").BrandPageModel): void;
         export(): import("@brand-page").BrandPageModel;
         setBrandPageType({ brandPageType }: {
             brandPageType: "default" | "brandSite" | "brandContact";
@@ -4787,6 +4793,22 @@ declare const _default: import("vue").DefineComponent<{}, {
     onDraggingEnd: (ev?: any, routeId?: string, previousParentRouteId?: string) => void;
     eventTracker: {
         sendShippingToggleEvent: (isEnabled: boolean) => void;
+        sendUndoEvent: (props: {
+            entries_count: number;
+            actor: string | undefined;
+        }) => void;
+        sendRedoEvent: (props: {
+            entries_count: number;
+            actor: string | undefined;
+        }) => void;
+        sendHistoryCappedEvent: (props: {
+            entries_count: number;
+            size_bytes: number;
+        }) => void;
+        sendHistoryOversizedEvent: (props: {
+            attempted_bytes: number;
+            source: string;
+        }) => void;
         sendSaveContactEvent: () => void;
         sendStartForFreeEvent: () => void;
         sendFooterLinkClickEvent: (linkType: "watermark_logo" | "create_your_website") => void;

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

@@ -4269,6 +4269,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             logoTemplateMetadata: string;
             isLogoDraftSaved: boolean;
             isTextOnlyLogo: boolean;
+            variationsByDraftToken: Record<string, import("@shared/logo-settings/store").EditableLogoVariation[]>;
         } & import("pinia").PiniaCustomStateProperties<import("@shared/logo-settings/store").EditableLogoState>) => () => string | undefined;
     }, {
         setStateAsync(payload: {
@@ -4286,6 +4287,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         getEditableLogoVariationByVariationId(id: number): any;
         getEditableLogoVariationByBase64(base64: string): any;
         updateEditableLogoImageUrlAsync(defaultPrimaryText?: string | undefined, overrideLogoVariation?: number | undefined, layout?: string | undefined): Promise<void>;
+        stampLogoBase64IntoBrandPageData(overrideLogoVariation?: number | undefined): void;
+        restoreVariationsForDraftToken(logoDraftToken: string): boolean;
         updateMetadataAsync(defaultPrimaryText?: string | undefined, resetLogoTemplateMetadata?: boolean, layout?: string | undefined): Promise<void>;
         updateEditableLogoImageByVariationAsync(editableLogoVariation: import("@shared/logo-settings/store").EditableLogoVariation, defaultPrimaryText?: string | undefined, layout?: string | undefined): Promise<import("../../../../clients/fabric-render-client").ModifyLogoDataResponse | null>;
         getDraftMetadata(logoDraftToken: string): string | undefined;
@@ -4393,16 +4396,21 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         hideChangeTemplateConfirmModal(): void;
         onBackgroundChanged(): void;
         onChangeTemplateConfirmModalCancel(): void;
-        onChangeTemplateConfirmModalConfirm(): void;
+        onChangeTemplateConfirmModalConfirm(): Promise<void>;
         onContentChanged(): void;
         onStyleChanged(): void;
-        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): void;
+        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): Promise<void>;
         setSelectedTabName(payload: any): void;
         showNextNotificationMessage(): Promise<void>;
         updateContent<TContent extends import("@brand-page").Content, P extends {
             id: string;
             content: TContent;
         }>(payload: P): Promise<void>;
+        _captureTemplateSwitchIfEnabled(): void;
+        applyHistorySnapshot(snapshot: import("@brand-page").BrandPageModel, activePageId?: string | undefined, logoEditsStr?: string | undefined): Promise<void>;
+        _syncLogoSettingsFromSnapshot(snapshot: import("@brand-page").BrandPageModel, logoEditsStr?: string | undefined): Promise<void>;
+        _navigateToActivePage(activePageId?: string | undefined): void;
+        _fallbackSidebarIfSelectedContentMissing(snapshot: import("@brand-page").BrandPageModel): void;
         export(): import("@brand-page").BrandPageModel;
         setBrandPageType({ brandPageType }: {
             brandPageType: "default" | "brandSite" | "brandContact";

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

@@ -173,16 +173,21 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         hideChangeTemplateConfirmModal(): void;
         onBackgroundChanged(): void;
         onChangeTemplateConfirmModalCancel(): void;
-        onChangeTemplateConfirmModalConfirm(): void;
+        onChangeTemplateConfirmModalConfirm(): Promise<void>;
         onContentChanged(): void;
         onStyleChanged(): void;
-        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): void;
+        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): Promise<void>;
         setSelectedTabName(payload: any): void;
         showNextNotificationMessage(): Promise<void>;
         updateContent<TContent extends import("@brand-page/models").Content, P extends {
             id: string;
             content: TContent;
         }>(payload: P): Promise<void>;
+        _captureTemplateSwitchIfEnabled(): void;
+        applyHistorySnapshot(snapshot: import("@brand-page/models").BrandPageModel, activePageId?: string | undefined, logoEditsStr?: string | undefined): Promise<void>;
+        _syncLogoSettingsFromSnapshot(snapshot: import("@brand-page/models").BrandPageModel, logoEditsStr?: string | undefined): Promise<void>;
+        _navigateToActivePage(activePageId?: string | undefined): void;
+        _fallbackSidebarIfSelectedContentMissing(snapshot: import("@brand-page/models").BrandPageModel): void;
         export(): import("@brand-page/models").BrandPageModel;
         setBrandPageType({ brandPageType }: {
             brandPageType: "default" | "brandSite" | "brandContact";
@@ -479,6 +484,22 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }>;
     eventTracker: {
         sendShippingToggleEvent: (isEnabled: boolean) => void;
+        sendUndoEvent: (props: {
+            entries_count: number;
+            actor: string | undefined;
+        }) => void;
+        sendRedoEvent: (props: {
+            entries_count: number;
+            actor: string | undefined;
+        }) => void;
+        sendHistoryCappedEvent: (props: {
+            entries_count: number;
+            size_bytes: number;
+        }) => void;
+        sendHistoryOversizedEvent: (props: {
+            attempted_bytes: number;
+            source: string;
+        }) => void;
         sendSaveContactEvent: () => void;
         sendStartForFreeEvent: () => void;
         sendFooterLinkClickEvent: (linkType: "watermark_logo" | "create_your_website") => void;

package/lib/src/shared/side-bar/components/SideBarTabButton.mixin.d.ts

@@ -17,6 +17,22 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     isDesignCom: import("vue").ComputedRef<boolean>;
     eventTracker: {
         sendShippingToggleEvent: (isEnabled: boolean) => void;
+        sendUndoEvent: (props: {
+            entries_count: number;
+            actor: string | undefined;
+        }) => void;
+        sendRedoEvent: (props: {
+            entries_count: number;
+            actor: string | undefined;
+        }) => void;
+        sendHistoryCappedEvent: (props: {
+            entries_count: number;
+            size_bytes: number;
+        }) => void;
+        sendHistoryOversizedEvent: (props: {
+            attempted_bytes: number;
+            source: string;
+        }) => void;
         sendSaveContactEvent: () => void;
         sendStartForFreeEvent: () => void;
         sendFooterLinkClickEvent: (linkType: "watermark_logo" | "create_your_website") => void;

package/lib/src/shared/style-settings/components/StyleSettings.mixin.d.ts

@@ -565,16 +565,21 @@ declare const _default: import("vue").DefineComponent<{}, {
         hideChangeTemplateConfirmModal(): void;
         onBackgroundChanged(): void;
         onChangeTemplateConfirmModalCancel(): void;
-        onChangeTemplateConfirmModalConfirm(): void;
+        onChangeTemplateConfirmModalConfirm(): Promise<void>;
         onContentChanged(): void;
         onStyleChanged(): void;
-        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): void;
+        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): Promise<void>;
         setSelectedTabName(payload: any): void;
         showNextNotificationMessage(): Promise<void>;
         updateContent<TContent extends import("@brand-page").Content, P extends {
             id: string;
             content: TContent;
         }>(payload: P): Promise<void>;
+        _captureTemplateSwitchIfEnabled(): void;
+        applyHistorySnapshot(snapshot: import("@brand-page").BrandPageModel, activePageId?: string | undefined, logoEditsStr?: string | undefined): Promise<void>;
+        _syncLogoSettingsFromSnapshot(snapshot: import("@brand-page").BrandPageModel, logoEditsStr?: string | undefined): Promise<void>;
+        _navigateToActivePage(activePageId?: string | undefined): void;
+        _fallbackSidebarIfSelectedContentMissing(snapshot: import("@brand-page").BrandPageModel): void;
         export(): import("@brand-page").BrandPageModel;
         setBrandPageType({ brandPageType }: {
             brandPageType: "default" | "brandSite" | "brandContact";
@@ -915,6 +920,22 @@ declare const _default: import("vue").DefineComponent<{}, {
     }>;
     eventTracker: {
         sendShippingToggleEvent: (isEnabled: boolean) => void;
+        sendUndoEvent: (props: {
+            entries_count: number;
+            actor: string | undefined;
+        }) => void;
+        sendRedoEvent: (props: {
+            entries_count: number;
+            actor: string | undefined;
+        }) => void;
+        sendHistoryCappedEvent: (props: {
+            entries_count: number;
+            size_bytes: number;
+        }) => void;
+        sendHistoryOversizedEvent: (props: {
+            attempted_bytes: number;
+            source: string;
+        }) => void;
         sendSaveContactEvent: () => void;
         sendStartForFreeEvent: () => void;
         sendFooterLinkClickEvent: (linkType: "watermark_logo" | "create_your_website") => void;

package/lib/src/shared/template-settings/components/TemplatesSettings.mixin.d.ts

@@ -565,6 +565,22 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     isDesignCom: import("vue").ComputedRef<boolean>;
     eventTracker: {
         sendShippingToggleEvent: (isEnabled: boolean) => void;
+        sendUndoEvent: (props: {
+            entries_count: number;
+            actor: string | undefined;
+        }) => void;
+        sendRedoEvent: (props: {
+            entries_count: number;
+            actor: string | undefined;
+        }) => void;
+        sendHistoryCappedEvent: (props: {
+            entries_count: number;
+            size_bytes: number;
+        }) => void;
+        sendHistoryOversizedEvent: (props: {
+            attempted_bytes: number;
+            source: string;
+        }) => void;
         sendSaveContactEvent: () => void;
         sendStartForFreeEvent: () => void;
         sendFooterLinkClickEvent: (linkType: "watermark_logo" | "create_your_website") => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.18.4",
+  "version": "5.18.5",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/brand-page/components/button/Button.vue

@@ -253,21 +253,13 @@ const onCloseModal = (): void => {
   text-decoration: none;
 }
 
-/* Shape-library icons (vector, nested in .c-shape, no class on the img):
-   render at the default icon size, centered in normal flow like the SVG icons. */
 .bp-button :deep(.c-button__icon-img img) {
   @apply tw-object-cover tw-max-w-none;
-  width: var(--icon-w);
-  height: var(--icon-h);
-}
-
-/* Raster image thumbnails (FallbackImage renders <img class="c-image">):
-   render larger/prominent and centered over the icon slot. */
-.bp-button :deep(.c-button__icon-img img.c-image) {
   --icon-img-size: 2.3rem;
+  --icon-img-offset-x: calc((var(--button-p-x) - var(--button-p-y)) * 2);
   position: absolute;
   top: calc(var(--icon-img-size) / -2 + var(--icon-h) / 2);
-  left: calc(var(--icon-img-size) / -2 + var(--icon-w) / 2);
+  left: calc(var(--icon-img-size) / -2 + var(--icon-img-offset-x));
   width: var(--icon-img-size);
   height: var(--icon-img-size);
 }

package/src/brand-page/components/contact-form/ContactForm.vue

@@ -286,7 +286,7 @@
                   {{ value.error }}
                 </p>
               </div>
-              <div class="tw-flex tw-w-full tw-justify-start tw-col-span-2">
+              <div class="tw-flex tw-w-full tw-justify-center tw-col-span-2">
                 <button
                   v-if="isSubmitButtonVisible"
                   class="tw-block tw-border-0 tw-py-2 tw-select-none tw-text-base tw-text-center tw-w-fit hover:tw-cursor-pointer tw-px-8 tw-py-3 c-button-full"
@@ -417,7 +417,7 @@
                       </p>
                     </div>
                     <div
-                      class="tw-flex tw-w-full tw-justify-start tw-col-span-2"
+                      class="tw-flex tw-w-full tw-justify-center tw-col-span-2"
                     >
                       <button
                         v-if="isSubmitButtonVisible"

package/src/brand-page/components/navigation/navigation-side-menu/NavigationSideMenu.vue

@@ -119,7 +119,10 @@ export default {
 }
 
 .c-sidebar {
-  @apply tw-h-full tw-fixed tw-inset-0 tw-bg-white tw-z-50 tw-transition-all tw-duration-300 tw-ease-out tw-w-80;
+  /* No hardcoded background: the panel background comes from the hamburger
+     defaultButtonStyle (bound via :style), so a transparent/unset default bg
+     renders transparent instead of being forced white  */
+  @apply tw-h-full tw-fixed tw-inset-0 tw-z-50 tw-transition-all tw-duration-300 tw-ease-out tw-w-80;
   max-width: 66%;
 }
 

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

@@ -6,6 +6,7 @@ import {
   FONT_FAMILY_CONFIGS,
   FONT_SIZE_BODY,
   FONT_WEIGHT_NORMAL,
+  STYLE_THEME_KEYS,
   defaultHamburgerNavigation,
   type NavigationDisplayType,
   NAVIGATION_DISPLAY,
@@ -50,6 +51,43 @@ export class NavigationMenuStyles {
   }
 }
 
+export const getDefaultSubNavBackgroundColor = (
+  defaultTextColor: string | undefined,
+): string | undefined => {
+  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;
+};
+
+/**
+ * The hamburger sub nav background colour is auto color-matched only when the
+ * user has not deliberately set it - i.e. it has no value or is transparent.
+ * Any explicit colour (a hex) or an already color-matched key is preserved.
+ */
+export const isUnsetOrTransparentColor = (
+  color: string | undefined | null,
+): boolean => {
+  if (color == null) {
+    return true;
+  }
+
+  const normalised = color.trim().toLowerCase();
+
+  return normalised === '' || normalised === 'transparent';
+};
+
 type NavigationStylesOptionType = Partial<
   Omit<NavigationDesktop | NavigationMobile, 'hamburgerMenuStyle'>
 > & {
@@ -148,7 +186,7 @@ abstract class NavigationStyles implements NavigationMenuStyles {
           color: theme?.secondaryColor,
           backgroundColor: theme?.primaryColor,
         },
-        subNavBackgroundColor: theme?.secondaryColor,
+        // No sub nav default: a hex here defeats migration-16's colour match.
       },
     );
   }

package/src/brand-page/utils/__snapshots__/migration.util.test.ts.snap

@@ -454,7 +454,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         },
       },
     },
-    "v": 15,
+    "v": 16,
   },
   "useOldLogoRenderSize": true,
 }
@@ -897,7 +897,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
-    "v": 15,
+    "v": 16,
   },
   "useOldLogoRenderSize": true,
 }
@@ -1347,7 +1347,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
-    "v": 15,
+    "v": 16,
   },
   "useOldLogoRenderSize": true,
 }