@designcrowd/library.brand-page 6.0.18 → 6.0.19-ast-btns-2

package/lib/src/{CreatedOnBrandCrowd-de-de-CIrk6Brm.js → CreatedOnBrandCrowd-de-de-BI4rJV_V.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-CvXk0moH.js → CreatedOnBrandCrowd-en-us-Crf-sBeO.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-BhtZbjjU.js → CreatedOnBrandCrowd-es-es-DE_kK1yb.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-B6TD57O-.js → CreatedOnBrandCrowd-fr-ca-BXhEu1vY.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-B6TD57O-.js → CreatedOnBrandCrowd-fr-fr-BXhEu1vY.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-Bto0xOtS.js → CreatedOnBrandCrowd-pt-br-DG1azcKI.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-Bto0xOtS.js → CreatedOnBrandCrowd-pt-pt-DG1azcKI.js}

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

package/lib/src/{CreatedOnDcom-de-de-2h2W3y5z.js → CreatedOnDcom-de-de-BFL99-ya.js}

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

package/lib/src/{CreatedOnDcom-en-us-D6Jgk6yv.js → CreatedOnDcom-en-us-DqWMpFgs.js}

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

package/lib/src/{CreatedOnDcom-es-es-sBCqYQIm.js → CreatedOnDcom-es-es-Ds0zIzXx.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-C8hg5hTU.js → CreatedOnDcom-fr-ca-X-GSmpwv.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-_DP1Umyh.js → CreatedOnDcom-fr-fr-Cm1eyNiD.js}

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

package/lib/src/{CreatedOnDcom-pt-br-BdwYAy5p.js → CreatedOnDcom-pt-br-BUOePaaJ.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-Bm1NHVaH.js → CreatedOnDcom-pt-pt-CJSZsybQ.js}

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

package/lib/src/brand-page/components/collapsible/Collapsible.mixin.d.ts

@@ -25,6 +25,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: false;
         default: undefined;
     };
+    backgroundStyle: {
+        type: PropType<BrandPageCssStyle>;
+        required: false;
+        default: undefined;
+    };
     context: {
         type: PropType<BrandPageContext>;
         required: true;
@@ -61,6 +66,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: false;
         default: undefined;
     };
+    backgroundStyle: {
+        type: PropType<BrandPageCssStyle>;
+        required: false;
+        default: undefined;
+    };
     context: {
         type: PropType<BrandPageContext>;
         required: true;
@@ -68,6 +78,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>> & Readonly<{}>, {
     titleStyle: BrandPageCssStyle;
     cardStyle: BrandPageCssStyle;
+    backgroundStyle: BrandPageCssStyle;
     buttonStyles: BrandPageCssStyle;
     canCollapse: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/lib/src/brand-page/components/collapsible/Collapsible.mixin.js

@@ -25,6 +25,11 @@ export default defineComponent({
             required: false,
             default: undefined,
         },
+        backgroundStyle: {
+            type: Object,
+            required: false,
+            default: undefined,
+        },
         context: {
             type: Object,
             required: true,
@@ -43,6 +48,11 @@ export default defineComponent({
             if (this.cardStyle) {
                 containerStyle.backgroundColor = this.cardStyle.backgroundColor;
             }
+            // Own background colour decouples the container from the button fill (BP-5800).
+            // Guarded on backgroundColor so an empty {} never blanks the container.
+            if (this.backgroundStyle?.backgroundColor) {
+                containerStyle.backgroundColor = this.backgroundStyle.backgroundColor;
+            }
             return containerStyle;
         },
         arrowStyle() {

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

@@ -43,6 +43,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     isSubmitting: boolean;
     submitError: string | undefined;
 }, {
+    isDecorativeSubmitStyle(): boolean;
     submitButtonStyle(): BrandPageCssStyle;
     submitButtonTextStyle(): BrandPageCssStyle;
     contentPaddingStyle(): {

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

@@ -1,6 +1,7 @@
 import { defineComponent } from 'vue';
 import { FORM_FIELD_TYPES } from '@brand-page/models';
 import { getEmailValidationError, getMessageValidationError, getNameValidationError, getPhoneValidationError, } from '@brand-page/utils';
+import { isDecorativeButtonStyle } from '../../utils/button.util';
 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';
@@ -44,6 +45,12 @@ export default defineComponent({
         submitError: undefined,
     }),
     computed: {
+        // Decorative styles (brushstroke/arrow/paper) render a shape that needs width
+        // to read — at pure w-fit the arrow chevron collapses. Give the submit button a
+        // ~200px min-width so the decoration looks intentional without going full-width.
+        isDecorativeSubmitStyle() {
+            return isDecorativeButtonStyle(this.viewModel.buttonStyles?.selectedButtonStyleId);
+        },
         submitButtonStyle() {
             const buttonStyle = { ...this.viewModel.buttonStyles?.style };
             const buttonTextStyle = {

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

@@ -94,6 +94,11 @@ export default defineComponent({
             if (borderRadius === '9999px') {
                 buttonStyle.borderRadius = '24px';
             }
+            // Own background colour decouples the container from the button fill (BP-5800).
+            if (this.viewModel.backgroundStyle?.backgroundColor) {
+                buttonStyle.backgroundColor =
+                    this.viewModel.backgroundStyle.backgroundColor;
+            }
             return buttonStyle;
         },
         isFormDisabled() {

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

@@ -77,6 +77,11 @@ export default defineComponent({
             if (borderRadius === '9999px') {
                 buttonStyle.borderRadius = '26px';
             }
+            // Own background colour decouples the container from the button fill (BP-5800).
+            if (this.viewModel.backgroundStyle?.backgroundColor) {
+                buttonStyle.backgroundColor =
+                    this.viewModel.backgroundStyle.backgroundColor;
+            }
             return buttonStyle;
         },
         continueButtonStyle() {

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

@@ -195,6 +195,7 @@ export interface MailingListContent extends Content {
     buttonText: string;
     titleStyle: TextStyleDeclaration;
     buttonTextStyle: TextStyleDeclaration;
+    backgroundStyle?: BrandPageCssStyle;
 }
 export declare const FORM_FIELD_TYPES: {
     readonly text: "text";

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

@@ -134,6 +134,7 @@ export interface RequestPaymentContent extends Content {
     descriptionStyle?: TextStyleDeclaration;
     itemTextStyle: TextStyleDeclaration;
     buttonTextStyle?: TextStyleDeclaration;
+    backgroundStyle?: BrandPageCssStyle;
 }
 export interface ShopContentConfig extends PaymentConfig {
     paymentOptionDisplayType: PaymentOptionDisplayType;
@@ -174,6 +175,7 @@ export interface SupportMeContent extends Content {
     descriptionStyle: TextStyleDeclaration;
     buttonTextStyle: TextStyleDeclaration;
     itemTextStyle: TextStyleDeclaration;
+    backgroundStyle?: BrandPageCssStyle;
 }
 export interface CreateStripePaymentIntentResponse {
     paymentIntent: StripePaymentIntent;

package/lib/src/brand-page/utils/button.util.d.ts

@@ -5,3 +5,8 @@ import type { ButtonStyles } from '../models';
  * @returns The calculated box shadow CSS value
  */
 export declare const getBoxShadowValue: (buttonStyles: ButtonStyles) => string;
+export declare const BUTTON_STYLE_BRUSHSTROKE = "BUTTON_STYLE_19";
+export declare const BUTTON_STYLE_ARROW = "BUTTON_STYLE_20";
+export declare const BUTTON_STYLE_PAPER = "BUTTON_STYLE_21";
+export declare const DECORATIVE_BUTTON_STYLE_IDS: string[];
+export declare const isDecorativeButtonStyle: (styleId?: string) => boolean;

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

@@ -27,3 +27,16 @@ export const getBoxShadowValue = (buttonStyles) => {
     }
     return boxShadowValue;
 };
+// The "decorative" button styles — brushstroke / arrow / torn-paper — whose visual
+// is drawn by ButtonStyleWrapper rather than plain CSS. Their banner-like SVG
+// decoration needs the button to be reasonably wide to render legibly, so narrow
+// (w-fit) hosts should widen when one of these is active (BP-5800).
+export const BUTTON_STYLE_BRUSHSTROKE = 'BUTTON_STYLE_19';
+export const BUTTON_STYLE_ARROW = 'BUTTON_STYLE_20';
+export const BUTTON_STYLE_PAPER = 'BUTTON_STYLE_21';
+export const DECORATIVE_BUTTON_STYLE_IDS = [
+    BUTTON_STYLE_BRUSHSTROKE,
+    BUTTON_STYLE_ARROW,
+    BUTTON_STYLE_PAPER,
+];
+export const isDecorativeButtonStyle = (styleId) => !!styleId && DECORATIVE_BUTTON_STYLE_IDS.includes(styleId);

package/lib/src/brand-page/utils/migration/migration-19.d.ts

@@ -0,0 +1,2 @@
+import type { MigrationData } from '../migration.util';
+export declare const migration19: (migrationResult: MigrationData) => Promise<MigrationData>;

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

@@ -0,0 +1,48 @@
+import { BRAND_PAGE_TYPES } from '../../models';
+/**
+ * BP-5800 — decouple the section container background from the global button fill.
+ *
+ * These blocks' outer container historically took its background from the button
+ * fill colour (`containerStyle = { ...buttonStyles }`). They now own a
+ * `backgroundStyle`; seed its `backgroundColor` from the current button fill so
+ * existing sites render identically while the colour becomes independently editable.
+ *
+ * runAlways + idempotent: only seeds when the colour is unset, so it never overrides
+ * a colour the user has set.
+ */
+const CONTAINER_BACKGROUND_TYPES = new Set([
+    'contact-form',
+    'mailing-list',
+    'request-payment',
+    'support-me',
+]);
+export const migration19 = async (migrationResult) => {
+    const { brandPageModel } = migrationResult;
+    const buttonFill = brandPageModel.styles?.buttonStyles?.style?.backgroundColor;
+    if (buttonFill === undefined) {
+        return migrationResult;
+    }
+    const isBrandSite = brandPageModel.brandPageType === BRAND_PAGE_TYPES.brandSite;
+    brandPageModel.pages.forEach((page) => {
+        page.contents.forEach((content) => {
+            if (!CONTAINER_BACKGROUND_TYPES.has(content.type)) {
+                return;
+            }
+            // contact-form already paints its own backgroundStyle on brand-site (default
+            // transparent); only its BP/BC container takes the button fill. mailing-list /
+            // payment use the button-fill container on every type, so they always seed.
+            if (content.type === 'contact-form' && isBrandSite) {
+                return;
+            }
+            const block = content;
+            if (block.backgroundStyle?.backgroundColor !== undefined) {
+                return;
+            }
+            block.backgroundStyle = {
+                ...block.backgroundStyle,
+                backgroundColor: buttonFill,
+            };
+        });
+    });
+    return migrationResult;
+};

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

@@ -21,6 +21,7 @@ import { migration15 } from './migration/migration-15';
 import { migration16 } from './migration/migration-16';
 import { migration17 } from './migration/migration-17';
 import { migration18 } from './migration/migration-18';
+import { migration19 } from './migration/migration-19';
 const MIGRATION_TABLE = [
     {
         version: 1,
@@ -138,6 +139,14 @@ const MIGRATION_TABLE = [
         migrateFn: migration18,
         description: 'BP-5603: backfill stable item ids on all nested items (gallery/section/testimonial/text items, section + footer social links) — the item id is now non-nullable',
     },
+    {
+        version: 19,
+        migrateFn: migration19,
+        // runAlways: re-apply on every load so already-published sites pick up the seed
+        // without a version bump. Idempotent — only seeds backgroundColor when unset.
+        runAlways: true,
+        description: 'BP-5800: seed own container backgroundStyle from the button fill colour for contact-form, mailing-list, request-payment and support-me so the container background is independent of the site button (existing sites render unchanged)',
+    },
 ];
 export const GetLatestModelVersion = () => Math.max(...MIGRATION_TABLE.map((x) => x.version));
 export const migrateBrandPageModel = async (brandPageModel, options) => {

package/lib/src/brand-page/utils/view-model.util.js

@@ -526,6 +526,7 @@ const mapToShapesSectionViewModel = (content, styles, brandPageType) => {
 };
 const mapToShopViewModel = (content, styles) => {
     const buttonStyles = new ButtonStyles({
+        selectedButtonStyleId: styles.buttonStyles.selectedButtonStyleId,
         style: {
             ...styles.buttonStyles.style,
         },

package/lib/src/brand-page-maker/constants/config-settings-constant.js

@@ -4,7 +4,7 @@ import * as uuid from 'uuid';
 import { colorConvertor, backgroundColorConvertor, borderColorConvertor, displayStyleConvertor, galleryTypeConvertor, imageAspectRatioConvertor, textAlignmentOptionsConvertor, videoContentStateConvertor, fillColorConvertor, bannerAlignDisplayStyleConvertor, aboutDisplayStyleConvertor, dividerStyleConvertor, shapeSizeOptionsConvertor, buttonLinkStyleConvertor, textSizeValueConvertor, textColumnStyleConvertor, contactLayoutStyleConvertor, paymentLinkDisplayStyleConvertor, shopDisplayConvertor, shopAspectRatioConvertor, } from '../convertors';
 import { ALIGN_CENTERED, DISPLAY_STYLE_COLLAPSED, DISPLAY_STYLE_PREVIEW, } from '@brand-page';
 import { imageFieldVisibilityAssessor, imageOptionVisibilityAssessor, imageGalleryFieldVisibilityAssessor, cardFillVisibilityAssessor, mediaSectionItemsFieldTypeAssessor, dividerToggleFieldVisibilityAssessor, shapeSectionItemsFieldTypeAssessor, colorReplacementVisibilityTypeAssessor, colorReplacementProfileVisibilityTypeAssessor, colorReplacementIconVisibilityTypeAssessor, imagesSectionCardStyleVisibilityAssessor, contactCardDisplayTypeVisibilityAssessor, imageUrlVisibilityAssessor, displayTypeVisibilityAssessor, logoFieldVisibilityAssessor, shapesSectionCardStyleVisibilityAssessor, shopImageOptionVisibilityAssessor, shopItemColorVisibility, personalisationOverrideVisibility, } from '../assessors';
-import { logoBackgroundColorDefaultGetter, paymentFillColorFieldDefaultGetter, paymentTextAndBorderColorFieldDefaultGetter, shopBorderColorFieldDefaultGetter, shopFillColorFieldDefaultGetter, textColorFieldDefaultGetter, } from '../default-getters';
+import { contactFormBackgroundColorDefaultGetter, logoBackgroundColorDefaultGetter, paymentFillColorFieldDefaultGetter, paymentTextAndBorderColorFieldDefaultGetter, shopBorderColorFieldDefaultGetter, shopFillColorFieldDefaultGetter, textColorFieldDefaultGetter, } from '../default-getters';
 import { socialLinksIconDisplayStyleConvertor } from '../convertors/social-links-icon-display-style.convertor';
 import { getTextMediaOptionsConverterByMediaType } from '../convertors/text-image-display-style.convertor';
 import { testimonialDisplayStyleConvertor } from '../convertors/testimonial-display-style-convertor';
@@ -455,6 +455,10 @@ const testimonialReplaceImageSettings = () => ({
     desiredWidth: undefined,
     mediaType: MEDIA_TYPES.image,
 });
+// Transparent bg is disallowed on the single-page side (brand-page /
+// brand-contact) so the added background colour stays a solid backdrop for the
+// decorative button styles (BP-5800); brand-site sections keep transparent.
+const disableTransparentOffBrandSite = (brandPageType) => brandPageType !== BRAND_PAGE_TYPES.brandSite;
 export const LOGO_SETTINGS_CONFIG = () => ({
     createInitialContent: createInitialLogoContent,
     type: 'logo',
@@ -1463,6 +1467,17 @@ export const MAILING_LIST_CONTENT_SETTINGS_CONFIG = () => ({
         titleStyle: DEFAULT_TITLE_STYLE_SETTINGS_FILED_WITH_TITLE(),
         buttonTextStyle: DEFAULT_BUTTON_TEXT_STYLE_FIELD(),
         ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
+        backgroundStyle: {
+            type: 'color',
+            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,
+            defaultValue: {},
+            isInline: true,
+            showToggle: false,
+            title: contentSettingsTr(`backgroundColorTitle`),
+            disableTransparent: disableTransparentOffBrandSite,
+            valueConvertor: backgroundColorConvertor,
+            defaultGetter: paymentFillColorFieldDefaultGetter,
+        },
     },
     isEnabled: true,
     isLocked: false,
@@ -1634,6 +1649,17 @@ export const REQUEST_PAYMENT_CONTENT_SETTINGS_CONFIG = () => ({
             label: contentSettingsTr(`buttonTextStyleLabel`),
         },
         ...PADDING_CONTROL_FIELDS(REQUEST_PAYMENT_GROUPS.style),
+        backgroundStyle: {
+            type: 'color',
+            groupId: REQUEST_PAYMENT_GROUPS.style,
+            defaultValue: {},
+            isInline: true,
+            showToggle: false,
+            title: contentSettingsTr(`backgroundColorTitle`),
+            disableTransparent: disableTransparentOffBrandSite,
+            valueConvertor: backgroundColorConvertor,
+            defaultGetter: paymentFillColorFieldDefaultGetter,
+        },
     },
     isEnabled: (features) => features.canAddRequestPaymentContents,
     isLocked: false,
@@ -1699,6 +1725,17 @@ export const SUPPORT_ME_CONTENT_SETTINGS_CONFIG = () => ({
         },
         buttonTextStyle: DEFAULT_BUTTON_TEXT_STYLE_FIELD(),
         ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
+        backgroundStyle: {
+            type: 'color',
+            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,
+            defaultValue: {},
+            isInline: true,
+            showToggle: false,
+            title: contentSettingsTr(`backgroundColorTitle`),
+            disableTransparent: disableTransparentOffBrandSite,
+            valueConvertor: backgroundColorConvertor,
+            defaultGetter: paymentFillColorFieldDefaultGetter,
+        },
     },
     isEnabled: (features) => features.canAddRequestPaymentContents,
     isLocked: false,
@@ -1846,7 +1883,9 @@ export const CONTACT_FORM_SETTINGS_CONFIG = () => ({
             isInline: true,
             showToggle: false,
             title: contentSettingsTr(`backgroundColorTitle`),
+            disableTransparent: disableTransparentOffBrandSite,
             valueConvertor: backgroundColorConvertor,
+            defaultGetter: contactFormBackgroundColorDefaultGetter,
         },
     },
     isEnabled: true,
@@ -2663,6 +2702,7 @@ export const SHOP_SECTION_SETTINGS_CONFIG = () => ({
             isInline: true,
             showToggle: false,
             title: contentSettingsTr(`backgroundColorTitle`),
+            disableTransparent: disableTransparentOffBrandSite,
             valueConvertor: backgroundColorConvertor,
         },
     },

package/lib/src/brand-page-maker/default-getters/contact-form-background-color.default-getter.d.ts

@@ -0,0 +1,8 @@
+import type { DefaultGetter } from '../models';
+/**
+ * Contact-form "Background color" default (BP-5800). On brand-page/brand-contact the
+ * collapsible container takes the button fill, so default the picker to it. On
+ * brand-site the field is the section background behind the card (its own "Card color"),
+ * which stays transparent — so no default there.
+ */
+export declare const contactFormBackgroundColorDefaultGetter: DefaultGetter<BrandPageCssStyle>;

package/lib/src/brand-page-maker/default-getters/contact-form-background-color.default-getter.js

@@ -0,0 +1,16 @@
+import { RGBAtoHex } from '@utils/helpers';
+import { BRAND_PAGE_TYPES } from '@brand-page';
+/**
+ * Contact-form "Background color" default (BP-5800). On brand-page/brand-contact the
+ * collapsible container takes the button fill, so default the picker to it. On
+ * brand-site the field is the section background behind the card (its own "Card color"),
+ * which stays transparent — so no default there.
+ */
+export const contactFormBackgroundColorDefaultGetter = (brandPage) => {
+    if (brandPage.brandPageType === BRAND_PAGE_TYPES.brandSite) {
+        return {};
+    }
+    return {
+        backgroundColor: RGBAtoHex(brandPage.styles.buttonStyles.style.backgroundColor),
+    };
+};

package/lib/src/brand-page-maker/default-getters/index.d.ts

@@ -2,3 +2,4 @@ export * from './text-color.default-getter';
 export * from './payment-fill-color.default-getter';
 export * from './payment-text-and-border-color.default-getter';
 export * from './logo-background-fill.default-getter';
+export * from './contact-form-background-color.default-getter';

package/lib/src/brand-page-maker/default-getters/index.js

@@ -2,3 +2,4 @@ export * from './text-color.default-getter';
 export * from './payment-fill-color.default-getter';
 export * from './payment-text-and-border-color.default-getter';
 export * from './logo-background-fill.default-getter';
+export * from './contact-form-background-color.default-getter';

package/lib/src/brand-page-maker/models/button-styles-config.js

@@ -352,7 +352,11 @@ export const availableButtonStyleConfigs = [
         iconName: 'button-brushstroke',
         iconViewBox: '0 0 60 20',
         options: ['buttonFillColor', 'buttonIconColor'],
-        brandPageType: [BRAND_PAGE_TYPES.default, BRAND_PAGE_TYPES.brandContact],
+        brandPageType: [
+            BRAND_PAGE_TYPES.default,
+            BRAND_PAGE_TYPES.brandContact,
+            BRAND_PAGE_TYPES.brandSite,
+        ],
     },
     {
         id: 'BUTTON_STYLE_20',
@@ -369,7 +373,11 @@ export const availableButtonStyleConfigs = [
         iconName: 'button-arrow',
         iconViewBox: '0 0 60 20',
         options: ['buttonFillColor', 'buttonIconColor'],
-        brandPageType: [BRAND_PAGE_TYPES.default, BRAND_PAGE_TYPES.brandContact],
+        brandPageType: [
+            BRAND_PAGE_TYPES.default,
+            BRAND_PAGE_TYPES.brandContact,
+            BRAND_PAGE_TYPES.brandSite,
+        ],
     },
     {
         id: 'BUTTON_STYLE_21',
@@ -386,6 +394,10 @@ export const availableButtonStyleConfigs = [
         iconName: 'button-paper',
         iconViewBox: '0 0 60 20',
         options: ['buttonFillColor', 'buttonIconColor'],
-        brandPageType: [BRAND_PAGE_TYPES.default, BRAND_PAGE_TYPES.brandContact],
+        brandPageType: [
+            BRAND_PAGE_TYPES.default,
+            BRAND_PAGE_TYPES.brandContact,
+            BRAND_PAGE_TYPES.brandSite,
+        ],
     },
 ];

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

@@ -90,7 +90,7 @@ export interface ContentSettingsField<TContent> {
     variant?: VariantDisplayModes | ((brandPageType: BrandPageType) => VariantDisplayModes);
     replaceImageSettings?: ContentReplaceImageSettings<TContent>;
     showToggle?: boolean;
-    disableTransparent?: boolean;
+    disableTransparent?: boolean | ((brandPageType: BrandPageType) => boolean);
     valueConvertor?: ValueConvertor<any, any>;
     canReplace?: boolean;
     placeholderAssessor?: PlaceholderTypeAssessor<TContent>;

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

@@ -232,6 +232,7 @@ export const createInitialMailingListContent = (options) => {
             textStyleType: TEXT_STYLE_TYPES.buttons,
             textAlign: 'center',
         },
+        backgroundStyle: {},
     };
 };
 export const createInitialRequestPaymentContent = (options) => {
@@ -274,6 +275,7 @@ export const createInitialRequestPaymentContent = (options) => {
             textStyleType: TEXT_STYLE_TYPES.buttons,
             textAlign: 'center',
         },
+        backgroundStyle: {},
     };
 };
 export const createInitialShopContent = (options) => {
@@ -365,6 +367,7 @@ export const createInitialSupportMeContent = (options) => {
             textStyleType: TEXT_STYLE_TYPES.buttons,
             textAlign: 'center',
         },
+        backgroundStyle: {},
     };
 };
 export const createInitialContactFormContent = (options) => {