@designcrowd/library.brand-page 6.1.9 → 6.1.10-ai-websitev2-2

package/lib/src/{CreatedOnBrandCrowd-de-de-B6wH_6O0.js → CreatedOnBrandCrowd-de-de-C8cQoVXf.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-Czlo0S4b.js → CreatedOnBrandCrowd-en-us-D4Ywc92e.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-DRcRhTU3.js → CreatedOnBrandCrowd-es-es-B4Qe-WKo.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-D3WCuXaP.js → CreatedOnBrandCrowd-fr-ca-icZvGaBq.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-D3WCuXaP.js → CreatedOnBrandCrowd-fr-fr-icZvGaBq.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-BiwqhgUj.js → CreatedOnBrandCrowd-pt-br-KhqDjV4i.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-BiwqhgUj.js → CreatedOnBrandCrowd-pt-pt-KhqDjV4i.js}

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

package/lib/src/{CreatedOnDcom-de-de-CgweWwhx.js → CreatedOnDcom-de-de-C6s6dTrH.js}

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

package/lib/src/{CreatedOnDcom-en-us-B72Stil9.js → CreatedOnDcom-en-us-BH4f_1yF.js}

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

package/lib/src/{CreatedOnDcom-es-es-B8DUEkyW.js → CreatedOnDcom-es-es-CsgDdY33.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-BsEtFdO_.js → CreatedOnDcom-fr-ca-BNlKJJIS.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-DP72aeo7.js → CreatedOnDcom-fr-fr-B_ATyXn6.js}

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

package/lib/src/{CreatedOnDcom-pt-br-D0p8i5YP.js → CreatedOnDcom-pt-br-BFScUcR9.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-CI5q2DY1.js → CreatedOnDcom-pt-pt-k2dhotzC.js}

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

package/lib/src/brand-page/components/background-shape/BackgroundShape.mixin.d.ts

@@ -16,6 +16,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     backgroundShapesStyle(): BrandPageCssStyle;
     isFullBackground(): boolean;
     objectUrl(): string;
+    shapeColor(): string;
 }, {
     isValidSvgUrl(url: string): boolean;
     applySvgAttributes(svgData: string): string;

package/lib/src/brand-page/components/background-shape/BackgroundShape.mixin.js

@@ -48,9 +48,17 @@ export default defineComponent({
             }
             return this.viewModel.name;
         },
+        // A background shape's colour is stored as a palette REFERENCE (one colour per shape,
+        // so referencify includes it — unlike section-shape `replacementColor`, which stays
+        // raw). `Page.mixin.backgroundShapes` resolves it to a concrete value before it reaches
+        // this component, because the `<img>`-embedded SVG can't resolve `var()` itself — so by
+        // the time we read it here it is already concrete.
+        shapeColor() {
+            return this.viewModel?.style?.color;
+        },
     },
     watch: {
-        'viewModel.style.color': {
+        shapeColor: {
             handler() {
                 this.render();
             },
@@ -146,8 +154,8 @@ export default defineComponent({
             else {
                 this.originalSvgData = this.viewModel.name;
             }
-            if (this.viewModel.style.color) {
-                this.svgData = applyColorToSvgString(this.originalSvgData, this.viewModel.style.color);
+            if (this.shapeColor) {
+                this.svgData = applyColorToSvgString(this.originalSvgData, this.shapeColor);
             }
             else {
                 this.svgData = this.originalSvgData;

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

@@ -1,4 +1,5 @@
 import { defineComponent } from 'vue';
+import { sectionFrameStyle } from '@brand-page/utils/button.util';
 export default defineComponent({
     props: {
         canCollapse: {
@@ -40,11 +41,9 @@ export default defineComponent({
     }),
     computed: {
         containerStyle() {
-            const containerStyle = { ...this.buttonStyles };
-            const borderRadius = containerStyle.borderRadius;
-            if (borderRadius === '9999px') {
-                containerStyle.borderRadius = '26px';
-            }
+            const containerStyle = sectionFrameStyle(this.buttonStyles, {
+                pillRadius: '26px',
+            });
             // Guarded on backgroundColor so an empty {} never blanks the container
             // (BP/BC contact-form card colour defaults to the button fill).
             if (this.cardStyle?.backgroundColor) {

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

@@ -67,7 +67,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     renderText(): string;
     renderSuccessText(): string;
     successMessageColorStyle(): BrandPageCssStyle;
-    disclosureColor(): string | undefined;
 }, {
     submitContactForm(): Promise<void>;
     validateFormValues(): void;

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

@@ -5,7 +5,7 @@ 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';
-import { getRenderText, contentPaddingStyle as toContentPaddingStyle, mutedTextForBackground, backgroundColorFromStyle, } from '@brand-page/utils';
+import { getRenderText, contentPaddingStyle as toContentPaddingStyle, } from '@brand-page/utils';
 import { hasRTEContent } from '@brand-page-maker/utils';
 import { useReCaptcha } from '../../composables/recaptcha.composable';
 export default defineComponent({
@@ -158,26 +158,6 @@ export default defineComponent({
             }
             return {};
         },
-        disclosureColor() {
-            // Anchor the reCAPTCHA footnote to the surface it visually sits on, which
-            // differs by website type:
-            // - brandSite: the card style (card + divided layouts) or the section
-            //   background (other layouts).
-            // - brand.page / brand.contact: the container is the collapsible, whose
-            //   colour is the card colour (defaulting to the global button fill).
-            // Falls back to the title colour when there's no solid colour to anchor to.
-            const style = this.context.isBrandSite
-                ? this.hasCard || this.isDividedContent
-                    ? this.viewModel.cardStyle
-                    : this.hasBgColor
-                        ? this.viewModel.backgroundStyle
-                        : undefined
-                : this.viewModel.cardStyle?.backgroundColor
-                    ? this.viewModel.cardStyle
-                    : this.viewModel.buttonStyles?.style;
-            return (mutedTextForBackground(backgroundColorFromStyle(style)) ??
-                this.viewModel.titleStyle?.color);
-        },
     },
     watch: {
         fields(fields) {

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

@@ -48,7 +48,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     hasFormError(): boolean;
     isNameRequired(): boolean;
     hasSubmitError(): boolean;
-    disclosureColor(): string | undefined;
     buttonStyle(): BrandPageCssStyle;
     buttonText(): string;
     containerStyle(): BrandPageCssStyle;

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

@@ -1,6 +1,7 @@
 import { defineComponent } from 'vue';
 import brandPageClient from '../../clients/brand-page.client';
-import { getEmailValidationError, contentPaddingStyle as toContentPaddingStyle, isPreviewMode, mutedTextForBackground, backgroundColorFromStyle, } from '@brand-page/utils';
+import { getEmailValidationError, contentPaddingStyle as toContentPaddingStyle, isPreviewMode, } from '@brand-page/utils';
+import { sectionFrameStyle } from '@brand-page/utils/button.util';
 import { contentSettingsTr, mailingListTr, } from '@src/composables/useTranslate';
 import { useReCaptcha } from '../../composables/recaptcha.composable';
 import { RECAPTCHA_ACTION_MAILING_LIST } from '../../constants';
@@ -71,13 +72,6 @@ export default defineComponent({
         hasSubmitError() {
             return Boolean(this.submitError);
         },
-        disclosureColor() {
-            // The mailing-list box uses the button style as its background, so anchor
-            // the reCAPTCHA footnote to that. Falls back to the title colour when the
-            // background isn't a solid colour.
-            const bg = backgroundColorFromStyle(this.viewModel.styles?.style);
-            return mutedTextForBackground(bg) ?? this.viewModel.titleStyle?.color;
-        },
         buttonStyle() {
             const buttonStyle = { ...this.viewModel.styles?.style };
             if (buttonStyle.borderStyle !== 'solid') {
@@ -91,17 +85,14 @@ export default defineComponent({
             return (this.viewModel?.buttonText || contentSettingsTr('subscribePlaceholder'));
         },
         containerStyle() {
-            const buttonStyle = { ...this.viewModel.styles?.style };
-            const borderRadius = buttonStyle.borderRadius;
-            if (borderRadius === '9999px') {
-                buttonStyle.borderRadius = '24px';
-            }
+            const style = sectionFrameStyle(this.viewModel.styles?.style, {
+                pillRadius: '24px',
+            });
             // Own background colour decouples the container from the button fill (BP-5800).
             if (this.viewModel.backgroundStyle?.backgroundColor) {
-                buttonStyle.backgroundColor =
-                    this.viewModel.backgroundStyle.backgroundColor;
+                style.backgroundColor = this.viewModel.backgroundStyle.backgroundColor;
             }
-            return buttonStyle;
+            return style;
         },
         isFormDisabled() {
             return (this.hasFormError ||

package/lib/src/brand-page/components/media/Shape.mixin.js

@@ -60,6 +60,9 @@ export default defineComponent({
         },
     },
     watch: {
+        // Shape fills are raw colours, never palette references: an `<img>`-embedded SVG is
+        // an isolated document where `var()` never resolves, so the picker bakes each pick to
+        // a concrete value — nothing to resolve here, no palette to watch.
         colorReplacements: {
             handler(newVal, oldVal) {
                 if (newVal &&
@@ -136,7 +139,7 @@ export default defineComponent({
             if (!this.originalSvgData) {
                 return;
             }
-            this.svgData = applyColorReplacementsToSvgString(this.originalSvgData, this.colorReplacements);
+            this.svgData = applyColorReplacementsToSvgString(this.originalSvgData, this.colorReplacements ?? []);
             this.svgData = this.applySvgAttributes(this.svgData);
             const blob = new Blob([this.svgData], { type: 'image/svg+xml' });
             const oldSvgDataObjectUrl = this.svgDataObjectUrl;

package/lib/src/brand-page/components/navigation/navigation-side-menu/NavigationSideMenu.mixin.js

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue';
-import { isUnsetOrTransparentColor } from '../../../models';
+import { resolveSubNavItemBackgroundColor } from '../../../models';
 export default defineComponent({
     props: {
         context: {
@@ -76,16 +76,10 @@ export default defineComponent({
             const baseStyle = isActive
                 ? this.selectedButtonStyle
                 : this.defaultButtonStyle;
-            const subNavBackgroundColor = this.styles.hamburgerMenuStyle.subNavBackgroundColor ?? '#ffffff';
-            // An active sub-page uses the selected button colour, but when that colour
-            // is transparent/unset it must keep the sub-nav background colour rather
-            // than rendering transparent (BP-5751).
             return {
                 ...baseStyle,
                 paddingLeft: '32px',
-                backgroundColor: isActive && !isUnsetOrTransparentColor(baseStyle.backgroundColor)
-                    ? baseStyle.backgroundColor
-                    : subNavBackgroundColor,
+                backgroundColor: resolveSubNavItemBackgroundColor(isActive, baseStyle.backgroundColor, this.styles.hamburgerMenuStyle.subNavBackgroundColor),
             };
         },
         closeSideMenu() {

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

@@ -50,9 +50,21 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }, {
     isSideMenuOpen: boolean;
     styles: {};
+    pageScopeId: string;
 }, {
     brandPageToken(): string | null;
+    paletteStyleHtml(): string;
+    pageScopeAttrs(): Record<string, string | undefined>;
     contents(): ContentViewModel[];
+    /**
+     * Where background-shape colours stop being palette references: a shape is
+     * painted as an object-URL SVG, an isolated document where the page's `:root`
+     * custom properties do not apply and `var(--id)` resolves to nothing.
+     * Resolved here rather than inside `BackgroundShape`, keeping that component a
+     * pure painter free of the `provide('getPaletteColors')` coupling its tests
+     * exist to prevent. `resolveColorReference` passes non-references through
+     * untouched, so pre- and post-migration sites render side by side.
+     */
     backgroundShapes(): BackgroundShape[];
     rootElementStyles(): BrandPageCssStyle;
     rootBackgroundStyles(): BrandPageCssStyle;

package/lib/src/brand-page/components/page/Page.mixin.js

@@ -1,9 +1,14 @@
 import { defineComponent } from 'vue';
 import { DEFAULT_FONT_FAMILY_KEY, FALLBACK_FONT_FAMILIES, FONT_FAMILY_CONFIGS, } from '../../constants';
-import { getSlugFromContext, getPageHeadingText } from '@brand-page/utils';
+import { getSlugFromContext, getPageHeadingText, buildPaletteRootCss, buildPaletteScopedCss, PAGE_SCOPE_ID_ATTRIBUTE, resolveColorReference, } from '@brand-page/utils';
 import { findNavItemByRelativePath } from '@brand-page/utils/route.util';
 import { BRAND_PAGE_TYPES } from '@brand-page/models';
 import { hasProfileContent as checkHasProfileContent } from '@brand-page/utils/vcard.util';
+// Per-instance id for a `Page` instance. Deliberately generic — any per-instance
+// CSS/DOM anchor may target it; the scoped palette emission is just the first
+// consumer. A module counter rather than Vue's `useId()`, which is only unique
+// within one app instance, so two apps in a document would mint colliding ids.
+let pageScopeSeq = 0;
 export default defineComponent({
     props: {
         context: {
@@ -71,16 +76,62 @@ export default defineComponent({
         return {
             isSideMenuOpen: false,
             styles: {},
+            pageScopeId: '',
         };
     },
     computed: {
         brandPageToken() {
             return this.viewModel?.brandPageToken || null;
         },
+        // The one palette emitter and scoper — every surface renders `Page`, so the
+        // published site and the maker preview can't disagree about a colour.
+        // The selector switches by surface (see the page-owned-palette-scoping ADR):
+        // standalone emits `:root` (SSR'd, and it must reach teleported content);
+        // template cards emit a per-instance scoped block because a grid holds many
+        // palettes in one document and they all share the fixed `--palette-N` names.
+        paletteStyleHtml() {
+            const colors = this.viewModel?.styles?.colors ?? [];
+            return this.context?.isTemplate
+                ? buildPaletteScopedCss(colors, this.pageScopeId)
+                : buildPaletteRootCss(colors);
+        },
+        // Spread onto EVERY top-level node of Page's fragment (template mode only).
+        // The root-background/overlay siblings paint values that can hold
+        // `var(--palette-…)`, and a custom property applies to its own node too.
+        pageScopeAttrs() {
+            return {
+                [PAGE_SCOPE_ID_ATTRIBUTE]: this.context?.isTemplate
+                    ? this.pageScopeId
+                    : undefined,
+            };
+        },
         contents() {
             return this.pageViewModel?.contents || [];
         },
+        /**
+         * Where background-shape colours stop being palette references: a shape is
+         * painted as an object-URL SVG, an isolated document where the page's `:root`
+         * custom properties do not apply and `var(--id)` resolves to nothing.
+         * Resolved here rather than inside `BackgroundShape`, keeping that component a
+         * pure painter free of the `provide('getPaletteColors')` coupling its tests
+         * exist to prevent. `resolveColorReference` passes non-references through
+         * untouched, so pre- and post-migration sites render side by side.
+         */
         backgroundShapes() {
+            const palette = this.viewModel?.styles?.colors ?? [];
+            // `withRoleDefaults`: a blank/absent brand role paints the same default the
+            // emitted `:root` substitutes.
+            const withResolvedColor = (shape) => shape?.style?.color
+                ? {
+                    ...shape,
+                    style: {
+                        ...shape.style,
+                        color: resolveColorReference(shape.style.color, palette, {
+                            withRoleDefaults: true,
+                        }),
+                    },
+                }
+                : shape;
             const backgroundShapes = [
                 ...(this.viewModel?.styles?.backgroundStylesViewModel
                     ?.backgroundShapes || []),
@@ -99,7 +150,7 @@ export default defineComponent({
                     },
                 });
             }
-            return backgroundShapes;
+            return backgroundShapes.map(withResolvedColor);
         },
         rootElementStyles() {
             let styles = {};
@@ -110,7 +161,13 @@ export default defineComponent({
                     ...this.viewModel?.styles?.backgroundStylesViewModel?.style,
                 };
             }
-            Object.assign(styles, this.viewModel?.styles?.textStyles?.style);
+            // The page base coat — anything with no colour of its own inherits this
+            // (RTE text, form controls, SVG `currentColor` fills).
+            const baseTextColour = this.viewModel?.styles?.textStyles?.textStyleOptions?.paragraphs?.style
+                ?.color;
+            if (baseTextColour) {
+                styles.color = baseTextColour;
+            }
             const textFontFamilyKey = this.viewModel.styles?.textStyles.textFontFamily ||
                 DEFAULT_FONT_FAMILY_KEY;
             const textFontFamilyConfig = FONT_FAMILY_CONFIGS[textFontFamilyKey];
@@ -165,14 +222,18 @@ export default defineComponent({
             const hasMedia = bgViewModel?.mediaViewModel ||
                 (bgViewModel?.backgroundImageUrl &&
                     !bgViewModel.backgroundImageUrl.endsWith('.svg'));
-            const overlayStyle = bgViewModel?.mediaOverlayStyle;
-            const opacity = overlayStyle?.opacity ?? '0';
-            if (!hasMedia || Number(opacity) <= 0) {
+            if (!hasMedia) {
+                return null;
+            }
+            // `hasMedia` implies `bgViewModel` is defined, and the migration gate
+            // guarantees `mediaOverlayStyle` is a complete { backgroundColor, opacity }.
+            const overlayStyle = bgViewModel.mediaOverlayStyle;
+            if (Number(overlayStyle.opacity) <= 0) {
                 return null;
             }
             return {
-                background: overlayStyle?.backgroundColor || 'rgb(0,0,0)',
-                opacity: `${opacity}%`,
+                background: overlayStyle.backgroundColor,
+                opacity: `${overlayStyle.opacity}%`,
             };
         },
         showBrandCrowdLogo() {
@@ -333,6 +394,10 @@ export default defineComponent({
         },
     },
     created() {
+        // Minted once per instance, before first render (the scoped-mode computeds
+        // read it). Kept out of data() so data() stays side-effect-free.
+        pageScopeSeq += 1;
+        this.pageScopeId = `bp-page-scope-${pageScopeSeq}`;
         this.setRootStyles();
     },
     mounted() {

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

@@ -3,6 +3,7 @@ import brandPageClient from '../../clients/brand-page.client';
 import { DISPLAY_STYLE_COLLAPSED, DISPLAY_STYLE_PREVIEW, paymentProviders, } from '../../constants';
 import raygunUtil from '@brand-page/utils/raygun.util';
 import { isPreviewMode } from '@brand-page/utils';
+import { sectionFrameStyle } from '@brand-page/utils/button.util';
 import { paymentTr } from '@src/composables/useTranslate';
 const DEFAULT_PAYMENT_SUCCESS_MESSAGE = paymentTr(`defaultPaymentSuccessMessage`);
 const PAYMENT_CONFIG_ACTIVE = 'Active';
@@ -73,17 +74,14 @@ export default defineComponent({
             return this.paymentConfig.paymentOptions.filter((o) => this.paymentRequestDetails.selectedPaymentOptionIds.some((i) => o.id === i));
         },
         containerStyle() {
-            const buttonStyle = { ...this.viewModel.buttonStyles?.style };
-            const borderRadius = buttonStyle.borderRadius;
-            if (borderRadius === '9999px') {
-                buttonStyle.borderRadius = '26px';
-            }
+            const style = sectionFrameStyle(this.viewModel.buttonStyles?.style, {
+                pillRadius: '26px',
+            });
             // Own background colour decouples the container from the button fill (BP-5800).
             if (this.viewModel.backgroundStyle?.backgroundColor) {
-                buttonStyle.backgroundColor =
-                    this.viewModel.backgroundStyle.backgroundColor;
+                style.backgroundColor = this.viewModel.backgroundStyle.backgroundColor;
             }
-            return buttonStyle;
+            return style;
         },
         continueButtonStyle() {
             const buttonStyle = { ...this.viewModel.buttonStyles?.style };

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

@@ -1,9 +1,8 @@
 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 { withColorOpacity } from '../../../utils/color.util';
 import { contentPaddingStyle as toContentPaddingStyle, isPreviewMode, } from '../../../utils';
-import { RGBAtoHex } from '@utils/helpers';
 const MAX_CUSTOM_REQUEST_CHARS = 500;
 export default defineComponent({
     props: {
@@ -112,10 +111,11 @@ export default defineComponent({
             const style = isSelected
                 ? { ...baseButtonStyle, ...this.viewModel.selectedBorderColor }
                 : { ...baseButtonStyle, ...this.viewModel.defaultBorderColor };
+            // Unselected options sit at 60% so the selected one reads as solid.
+            // `withColorOpacity`, not `addOpacityToHex`: the colour may be a `var(--palette-n)`
+            // reference, and the hex helper drops the opacity on those.
             const borderOpacity = isSelected ? 1 : 0.6;
-            style.borderColor = !!style.borderColor
-                ? addOpacityToHex(RGBAtoHex(style.borderColor), borderOpacity)
-                : addOpacityToHex(RGBAtoHex(style.color), borderOpacity);
+            style.borderColor = withColorOpacity(style.borderColor || style.color, borderOpacity);
             return style;
         },
     },

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

@@ -1,5 +1,6 @@
 import { defineComponent } from 'vue';
 import { contentPaddingStyle as toContentPaddingStyle } from '@brand-page/utils';
+import { sectionFrameStyle } from '@brand-page/utils/button.util';
 import ComponentCommonMixin from '../mixins/component-common.mixin';
 import { DISPLAY_STYLE_PREVIEW, DISPLAY_STYLE_COLLAPSED, } from '../../constants';
 export default defineComponent({
@@ -26,12 +27,9 @@ export default defineComponent({
             };
         },
         containerStyle() {
-            const buttonStyle = { ...this.viewModel.buttonStyles?.style };
-            const borderRadius = buttonStyle.borderRadius;
-            if (borderRadius === '9999px') {
-                buttonStyle.borderRadius = '26px';
-            }
-            return buttonStyle;
+            return sectionFrameStyle(this.viewModel.buttonStyles?.style, {
+                pillRadius: '26px',
+            });
         },
         videoUrl() {
             return `${this.viewModel.videoUrl}?autoplay=${this.viewModel.autoplay ? '1' : '0'}&mute=${this.viewModel.mute ? '1' : '0'}`;

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

@@ -32,5 +32,6 @@ export declare const CONTENT_TEXT_STYLE_PROPERTY_KEYS: {
     readonly itemTextStyle: "itemTextStyle";
     readonly buttonTextStyle: "buttonTextStyle";
     readonly copyrightStyle: "copyrightStyle";
+    readonly successMessageStyle: "successMessageStyle";
 };
 export type ContentTextStylePropertyKey = keyof typeof CONTENT_TEXT_STYLE_PROPERTY_KEYS;

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

@@ -34,4 +34,5 @@ export const CONTENT_TEXT_STYLE_PROPERTY_KEYS = {
     itemTextStyle: 'itemTextStyle',
     buttonTextStyle: 'buttonTextStyle',
     copyrightStyle: 'copyrightStyle',
+    successMessageStyle: 'successMessageStyle',
 };