@designcrowd/library.brand-page 6.1.0-color-v2-2 → 6.1.0-websitev2-dev-2

package/lib/src/{CreatedOnBrandCrowd-de-de-CTx8-T31.js → CreatedOnBrandCrowd-de-de-D_qQ0sPW.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-m_M8_GjN.js → CreatedOnBrandCrowd-en-us-CNMxavFU.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-BoOw5YO_.js → CreatedOnBrandCrowd-es-es-Cyaiw1-R.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-DOfx40Df.js → CreatedOnBrandCrowd-fr-ca-DbniOtuE.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-DOfx40Df.js → CreatedOnBrandCrowd-fr-fr-DbniOtuE.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-BsJ3QVZp.js → CreatedOnBrandCrowd-pt-br-DI3JfwR8.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-BsJ3QVZp.js → CreatedOnBrandCrowd-pt-pt-DI3JfwR8.js}

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

package/lib/src/{CreatedOnDcom-de-de-hpqlRono.js → CreatedOnDcom-de-de-DqBzJ_O9.js}

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

package/lib/src/{CreatedOnDcom-en-us-CPzihoZH.js → CreatedOnDcom-en-us-B8uZjYMi.js}

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

package/lib/src/{CreatedOnDcom-es-es-CM2YfiOe.js → CreatedOnDcom-es-es-BOLxcx3H.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-DG1pvzFS.js → CreatedOnDcom-fr-ca-CbGneDvu.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-DBWxVv5V.js → CreatedOnDcom-fr-fr-B-UwXpW3.js}

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

package/lib/src/{CreatedOnDcom-pt-br-mXxA3CzG.js → CreatedOnDcom-pt-br-CRPrLx5_.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-13CFxCqT.js → CreatedOnDcom-pt-pt-4p2rdAnc.js}

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

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

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

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

@@ -2,7 +2,6 @@ import { defineComponent } from 'vue';
 import ComponentCommonMixin from '../mixins/component-common.mixin';
 import axios from 'axios';
 import { applyColorToSvgString } from '@brand-page/utils/svg-color.util';
-import { resolveColorReference, } from '@brand-page/utils/color-palette.util';
 import { isURL } from '../../../utils/validator.util';
 import { PROXY_SHAPE_URL_REGEX } from '@brand-page/constants';
 import { getRegexToMatchAttributeInSvgTag } from '@brand-page/utils/svg.util';
@@ -18,11 +17,6 @@ export default defineComponent({
             required: true,
         },
     },
-    inject: {
-        // BP-5886: getter for the page palette (provided by <Page>) to resolve
-        // `var(--id)` fills.
-        getPaletteColors: { default: undefined },
-    },
     data() {
         return {
             svgData: '',
@@ -54,18 +48,9 @@ export default defineComponent({
             }
             return this.viewModel.name;
         },
-        // BP-5886: the shape's colour with any palette `var(--id)` resolved to its
-        // concrete value — `var()` can't resolve inside the <img>-embedded SVG.
-        resolvedShapeColor() {
-            const getColors = this.getPaletteColors;
-            const colors = getColors?.() ?? [];
-            return resolveColorReference(this.viewModel?.style?.color, colors);
-        },
     },
     watch: {
-        // BP-5886: re-render when the resolved colour changes — covers both a direct
-        // colour edit and an edit to a referenced palette role.
-        resolvedShapeColor: {
+        'viewModel.style.color': {
             handler() {
                 this.render();
             },
@@ -161,8 +146,8 @@ export default defineComponent({
             else {
                 this.originalSvgData = this.viewModel.name;
             }
-            if (this.resolvedShapeColor) {
-                this.svgData = applyColorToSvgString(this.originalSvgData, this.resolvedShapeColor);
+            if (this.viewModel.style.color) {
+                this.svgData = applyColorToSvgString(this.originalSvgData, this.viewModel.style.color);
             }
             else {
                 this.svgData = this.originalSvgData;

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

@@ -30,7 +30,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     originalSvgData: string;
 }, {
     useObjectElement(): boolean;
-    resolvedColorReplacements(): ColorReplacement[];
     objectStyle(): {
         width?: undefined;
         height?: undefined;

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

@@ -2,7 +2,6 @@ import { defineComponent } from 'vue';
 import ComponentCommonMixin from '../mixins/component-common.mixin';
 import axios from 'axios';
 import { applyColorReplacementsToSvgString } from '@brand-page/utils/svg-color.util';
-import { resolveColorReference, } from '@brand-page/utils/color-palette.util';
 import { PROXY_SHAPE_URL_REGEX } from '@brand-page/constants';
 import { getRegexToMatchAttributeInSvgTag } from '@brand-page/utils/svg.util';
 export default defineComponent({
@@ -32,11 +31,6 @@ export default defineComponent({
             default: undefined,
         },
     },
-    inject: {
-        // BP-5886: getter for the page palette (provided by <Page>) — used to resolve
-        // `var(--id)` fills to concrete colours before the SVG is built.
-        getPaletteColors: { default: undefined },
-    },
     data() {
         return { svgData: '', svgDataObjectUrl: '', originalSvgData: '' };
     },
@@ -44,16 +38,6 @@ export default defineComponent({
         useObjectElement() {
             return !!this.imageUrl.match(PROXY_SHAPE_URL_REGEX);
         },
-        // BP-5886: colour replacements with any palette `var(--id)` resolved to its
-        // concrete value — `var()` can't resolve inside the <img>-embedded SVG.
-        resolvedColorReplacements() {
-            const getColors = this.getPaletteColors;
-            const colors = getColors?.() ?? [];
-            return (this.colorReplacements ?? []).map((c) => ({
-                ...c,
-                replacementColor: resolveColorReference(c.replacementColor, colors),
-            }));
-        },
         objectStyle() {
             if (!this.size) {
                 return {};
@@ -76,9 +60,7 @@ export default defineComponent({
         },
     },
     watch: {
-        // BP-5886: watch the RESOLVED replacements so the shape re-renders both when
-        // its own colours change and when a referenced palette colour is edited.
-        resolvedColorReplacements: {
+        colorReplacements: {
             handler(newVal, oldVal) {
                 if (newVal &&
                     oldVal &&
@@ -154,7 +136,7 @@ export default defineComponent({
             if (!this.originalSvgData) {
                 return;
             }
-            this.svgData = applyColorReplacementsToSvgString(this.originalSvgData, this.resolvedColorReplacements);
+            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/page/Page.mixin.d.ts

@@ -52,8 +52,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     styles: {};
 }, {
     brandPageToken(): string | null;
-    shouldEmitPaletteRoot(): boolean;
-    paletteRootStyleHtml(): string;
     contents(): ContentViewModel[];
     backgroundShapes(): BackgroundShape[];
     rootElementStyles(): BrandPageCssStyle;

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

@@ -1,6 +1,6 @@
-import { defineComponent, provide } from 'vue';
+import { defineComponent } from 'vue';
 import { DEFAULT_FONT_FAMILY_KEY, FALLBACK_FONT_FAMILIES, FONT_FAMILY_CONFIGS, } from '../../constants';
-import { getSlugFromContext, getPageHeadingText, buildPaletteRootCss, } from '@brand-page/utils';
+import { getSlugFromContext, getPageHeadingText } 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';
@@ -59,14 +59,6 @@ export default defineComponent({
         'save-contact-widget-click',
     ],
     setup(props) {
-        // BP-5886: shapes render as <img>-embedded SVG, an isolated document the
-        // `:root` palette block can't reach, so a `var(--id)` fill won't resolve.
-        // Provide the palette as a getter so the shape mixins can resolve their refs
-        // to concrete colours before building the SVG. A getter (not a provided ref)
-        // sidesteps Options-API inject ref-unwrapping ambiguity and stays reactive:
-        // calling it inside a shape's computed tracks `viewModel.styles.colors`, so
-        // shapes recolour when a referenced palette colour is edited.
-        provide('getPaletteColors', () => props.viewModel?.styles?.colors ?? []);
         return {
             fluidText: JSON.stringify({
                 default: props.context.brandPageType === BRAND_PAGE_TYPES.brandSite
@@ -85,17 +77,6 @@ export default defineComponent({
         brandPageToken() {
             return this.viewModel?.brandPageToken || null;
         },
-        // BP-5886 — global colour palette emitted as a single `:root` block.
-        // Only the published single-document surfaces emit the global block:
-        // template-grid cards get scoped vars (TemplatePreview) and the maker main
-        // preview emits from BrandPageMakerPage, so guard those out to avoid a
-        // duplicate / colliding `:root`.
-        shouldEmitPaletteRoot() {
-            return !this.context?.isTemplate && !this.context?.isPreview;
-        },
-        paletteRootStyleHtml() {
-            return buildPaletteRootCss(this.viewModel?.styles?.colors ?? []);
-        },
         contents() {
             return this.pageViewModel?.contents || [];
         },

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

@@ -53,7 +53,6 @@ export declare class PageStyles {
     logoStyles: LogoStyles;
     textStyles: TextStyles;
     galleryStyles: GalleryStyles;
-    colors: ColorItem[];
     constructor(option?: Partial<Omit<PageStyles, 'logoStyles' | 'buttonStyles' | 'backgroundStyles' | 'textStyles'>> & {
         logoStyles?: Partial<LogoStyles>;
         buttonStyles?: Partial<ButtonStyles>;
@@ -371,18 +370,6 @@ export interface ColorReplacement {
     originalColor: string;
     replacementColor: string;
 }
-/**
- * A single entry in the global colour palette (BP-5886).
- * `id` is the CSS-variable name emitted at :root (`--<id>`); elements reference
- * the colour via `var(--<id>)`. `value` is a concrete literal (rgb/#hex or a
- * gradient string). `palette` = the 4 static brand roles (`palette-0`…`palette-3`);
- * `custom` = one-off colours chosen on elements (`palette-custom-<uuid>`).
- */
-export interface ColorItem {
-    id: string;
-    value: string;
-    type: 'palette' | 'custom';
-}
 export interface TestimonialSectionContent extends Content {
     type: 'testimonial-section';
     title: string;

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

@@ -85,9 +85,6 @@ export class PageStyles {
     logoStyles;
     textStyles;
     galleryStyles;
-    // BP-5886 global colour palette. Non-nullable (default []) per the model
-    // reactivity rule; old persisted `styles` that omit it hydrate to [].
-    colors;
     constructor(option = {}) {
         this.backgroundStyles = new BackgroundStyles(option.backgroundStyles || {
             backgroundImageUrl: '',
@@ -112,7 +109,6 @@ export class PageStyles {
             ? new TextStyles(option.textStyles)
             : TextStyles.GetDefaultTextStyle();
         this.galleryStyles = new GalleryStyles(option.galleryStyles);
-        this.colors = option.colors ? option.colors.map((c) => ({ ...c })) : [];
     }
 }
 export const ASPECT_RATIOS = {

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

@@ -25,34 +25,16 @@ export const calculateLuminanceRatio = (color1, color2) => {
         : (color1luminance + 0.05) / (color2luminance + 0.05);
     return ratio;
 };
-// BP-5886: these helpers assume a `#rrggbb[aa]` hex. Under the palette model a
-// colour value may instead be a `var(--id)` reference (or a named colour /
-// gradient), and blindly substringing those yields garbage (e.g. `var(--p`),
-// which corrupts the picker swatch. Guard so a non-hex value passes through
-// untouched rather than being mangled.
-const isHashPrefixedHex = (value) => typeof value === 'string' && value.trim().startsWith('#');
 export const isHexTransparent = (hex) => {
-    if (!isHashPrefixedHex(hex)) {
-        return false;
-    }
     return hex.trim().substring(7, 9) === '00';
 };
 export const removeAlphaFromHex = (hex) => {
-    if (!isHashPrefixedHex(hex)) {
-        return hex;
-    }
     return hex.trim().substring(0, 7);
 };
 export const addTransparentAlphaChannelToHex = (hex) => {
-    if (!isHashPrefixedHex(hex)) {
-        return hex;
-    }
     return `${removeAlphaFromHex(hex)}00`;
 };
 export const addOpacityToHex = (hex, opacity) => {
-    if (!isHashPrefixedHex(hex)) {
-        return hex;
-    }
     return `${removeAlphaFromHex(hex)}${Math.round(opacity * 255).toString(16)}`;
 };
 export const setRgbAlpha = (rgb, alpha) => {

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { type BrandPageModel, type LogoImageModel, type LogoTheme } from '../models';
+import { type BrandPageModel, type LogoImageModel } from '../models';
 export interface MigrationData {
     brandPageModel: BrandPageModel;
     useOldLogoRenderSize: boolean;
@@ -8,7 +8,6 @@ export interface MigrationOptions {
     isUserDraft: boolean;
     isServerRender: boolean;
     disableLogoSizeMigration?: boolean;
-    logoTheme?: LogoTheme;
 }
 export declare const GetLatestModelVersion: () => number;
 export declare const migrateBrandPageModel: (brandPageModel: BrandPageModel, options: MigrationOptions) => Promise<MigrationData>;

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

@@ -22,7 +22,6 @@ import { migration16 } from './migration/migration-16';
 import { migration17 } from './migration/migration-17';
 import { migration18 } from './migration/migration-18';
 import { migration19 } from './migration/migration-19';
-import { migration20 } from './migration/migration-20';
 const MIGRATION_TABLE = [
     {
         version: 1,
@@ -150,15 +149,6 @@ const MIGRATION_TABLE = [
         runAlways: true,
         description: 'BP-5800: seed the button fill colour as each block’s own container colour so it is independent of the site button (existing sites render unchanged) — backgroundStyle for mailing-list, request-payment and support-me (all types); cardStyle for the BP/BC contact form (skipped on brand-site)',
     },
-    {
-        version: 20,
-        migrateFn: migration20,
-        // Version-gated (runs once, when modelVersion < 20): builds the palette + 4
-        // palette roles and referencifies every colour, then the model is stamped v20
-        // and never re-migrated. Idempotent if it ever re-runs (existing palette + only
-        // var() values). Ordered after migration19 so its seeded colours extract too.
-        description: 'BP-5886 Global Color V2: extract every colour into a central styles.colors palette (4 palette roles + palette-custom-<uuid>) and rewrite references to var(--id) — RTE, shapes, box-shadow, gradients included (lossless, once)',
-    },
 ];
 export const GetLatestModelVersion = () => Math.max(...MIGRATION_TABLE.map((x) => x.version));
 export const migrateBrandPageModel = async (brandPageModel, options) => {

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

@@ -1,19 +1,6 @@
-import type { BrandPageModel, LogoTheme, ThemeColor, FabricLogoTheme, ButtonStyles, PageModel, ColorItem } from '../models';
+import type { BrandPageModel, LogoTheme, ThemeColor, FabricLogoTheme, ButtonStyles, PageModel } from '../models';
 import { NavigationDesktop, NavigationMobile } from '../models';
 import { PageStyles, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop } from '../models';
-/**
- * BP-5886 — global colour palette emission.
- *
- * A `ColorItem` already holds one resolved value, so emission is a straight
- * `--id: value` map (no gradient/solid gating here — that's an authoring-time
- * concern). These are the single source of truth for the `:root` block across
- * the maker preview, the published `<Page>` (SSR), and template-grid cards.
- */
-export declare const paletteToCssVarDeclarations: (colors: ColorItem[]) => string;
-/** Full `<style>:root{…}</style>` block for `v-html` consumers (Page.vue, maker). */
-export declare const buildPaletteRootCss: (colors: ColorItem[]) => string;
-/** `{ '--id': 'value' }` for scoped inline `:style` consumers (template grid). */
-export declare const buildPaletteVarStyle: (colors: ColorItem[]) => Record<string, string>;
 /**
  * Simple utility to convert any color format to hex for consistent comparison
  */

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

@@ -6,34 +6,6 @@ import { addTransparentAlphaChannelToHex, calculateLuminanceRatio, getNewColorBa
 import { isRgbColor } from '@src/utils/helpers';
 import chroma from 'chroma-js';
 import { hasRTEContent, RTE_ALLOWED_SECTION_TYPES, } from '@brand-page-maker/utils';
-import { isColorVarReference } from './color-palette.util';
-/**
- * BP-5886 — global colour palette emission.
- *
- * A `ColorItem` already holds one resolved value, so emission is a straight
- * `--id: value` map (no gradient/solid gating here — that's an authoring-time
- * concern). These are the single source of truth for the `:root` block across
- * the maker preview, the published `<Page>` (SSR), and template-grid cards.
- */
-export const paletteToCssVarDeclarations = (colors) => (colors ?? [])
-    .filter((c) => c && c.id && c.value)
-    .map((c) => `--${c.id}: ${c.value};`)
-    .join('\n    ');
-/** Full `<style>:root{…}</style>` block for `v-html` consumers (Page.vue, maker). */
-export const buildPaletteRootCss = (colors) => {
-    const declarations = paletteToCssVarDeclarations(colors);
-    return declarations
-        ? `<style>
-  :root {
-    ${declarations}
-  }
-</style>`
-        : '';
-};
-/** `{ '--id': 'value' }` for scoped inline `:style` consumers (template grid). */
-export const buildPaletteVarStyle = (colors) => Object.fromEntries((colors ?? [])
-    .filter((c) => c && c.id && c.value)
-    .map((c) => [`--${c.id}`, c.value]));
 /**
  * Simple utility to convert any color format to hex for consistent comparison
  */
@@ -87,13 +59,6 @@ export const getColorValueForCorrectCssProperty = (k, colorData) => {
         : colorData.rgb;
 };
 export const colorMatchCssKeyValue = (cssKey, cssValue, logoTheme, applyColorWithMatchingLuminance) => {
-    // BP-5886: never bake a palette reference. Once a value is a `var(--id)` (from
-    // migration-20) it is resolved by the emitted :root block — the legacy logo
-    // theme bake must leave it untouched (the substring match below would otherwise
-    // rewrite `var(--logo-text-color)` back to rgb).
-    if (isColorVarReference(cssValue)) {
-        return { cssValue, isModified: false };
-    }
     if (applyColorWithMatchingLuminance?.originalColor) {
         let themeToApply;
         if (cssValue === STYLE_THEME_KEYS.LogoTextMultiColor) {
@@ -351,14 +316,6 @@ export const applyLogoThemeToBrandPageStyles = (logoTheme, pageStyles) => {
     let isModified = false;
     const newStyle = new PageStyles();
     for (const [key, value] of Object.entries(pageStyles)) {
-        // BP-5886: `colors` is the global palette (ColorItem[]), not an element
-        // style — preserve it verbatim. The logo-theme bake must never walk/rewrite
-        // the palette (the generic array branch below would collapse it to a single
-        // element and break every downstream `colors.map`).
-        if (key === 'colors') {
-            newStyle.colors = value;
-            continue;
-        }
         if (Array.isArray(value)) {
             for (let i = 0; i < value.length; i++) {
                 const output = applyLogoThemeToBrandPageStyleRecursive(logoTheme, `pageStyles`, value[i]);

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

@@ -649,7 +649,6 @@ export const mapToPageStyleViewModel = (pageStyles, options) => {
         logoStyles: pageStyles.logoStyles,
         textStyles: pageStyles.textStyles,
         galleryStyles: pageStyles.galleryStyles,
-        colors: pageStyles.colors ?? [],
     };
 };
 export const mapToPageHeaderViewModel = (pageHeader, pageStyles, pages, useOldLogoRenderSize = false) => {

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

@@ -1,4 +1,4 @@
-import type { ButtonWithModalContent, ProfileContent, TextContent, VideoContent, ImageContent, ContentType, ButtonStyles, LogoStyles, MapContent, ImageGalleryContent, GalleryStyles, MailingListContent, RequestPaymentContent, ShopContent, SupportMeContent, ContactFormContent, BannerSectionContent, BrandPageType, SocialLinksContent, TestimonialSectionContent, AboutSectionContent, DividerSectionContent, ShapesSectionContent, ButtonLinkType, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop, TextMediaItem, TextShapeItem, TextStyleDeclaration, AspectRatio, LogoImageModel, LogoTemplateImageModel, CookieOptions, BookingSectionContent, MediaTypes, TextStyles, BackgroundStyle, BackgroundShape, PersonalisationRole, SaveContactOptions, ColorItem } from './models';
+import type { ButtonWithModalContent, ProfileContent, TextContent, VideoContent, ImageContent, ContentType, ButtonStyles, LogoStyles, MapContent, ImageGalleryContent, GalleryStyles, MailingListContent, RequestPaymentContent, ShopContent, SupportMeContent, ContactFormContent, BannerSectionContent, BrandPageType, SocialLinksContent, TestimonialSectionContent, AboutSectionContent, DividerSectionContent, ShapesSectionContent, ButtonLinkType, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop, TextMediaItem, TextShapeItem, TextStyleDeclaration, AspectRatio, LogoImageModel, LogoTemplateImageModel, CookieOptions, BookingSectionContent, MediaTypes, TextStyles, BackgroundStyle, BackgroundShape, PersonalisationRole, SaveContactOptions } from './models';
 import type { ImagesSectionContentDisplayStyle } from './constants';
 export type ViewModelType = 'button' | 'image' | 'image-gallery' | 'logo' | 'map' | 'mailing-list' | 'profile' | 'support-me' | 'request-payment' | 'text' | 'video' | 'contact-form' | 'banner-section' | 'images-section' | 'about-section' | 'divider-section' | 'testimonial-section' | 'social-links' | 'shapes-section' | 'shop-section' | 'booking-section';
 export interface ContentViewModel {
@@ -150,7 +150,6 @@ export interface PageStylesViewModel {
     logoStyles: LogoStyles;
     textStyles: TextStyles;
     galleryStyles: GalleryStyles;
-    colors: ColorItem[];
 }
 export interface NavRouteViewModel {
     id: string;

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

@@ -1329,8 +1329,6 @@ declare const _default: import("vue").DefineComponent<{}, {
     styles: {};
 }, {
     brandPageToken(): string | null;
-    shouldEmitPaletteRoot(): boolean;
-    paletteRootStyleHtml(): string;
     contents(): ContentViewModel[];
     backgroundShapes(): import("@brand-page").BackgroundShape[];
     rootElementStyles(): BrandPageCssStyle;

package/lib/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.js

@@ -15,7 +15,6 @@ import { transformToRTE, RTE_ALLOWED_SECTION_TYPES, } from '@brand-page-maker/ut
 import { useExternalRichTextEditor } from '@brand-page-maker/composables/rich-text-editor/useRichTextEditor';
 import { useUiStyleSettingsStore } from '@shared/style-settings/store';
 import { STYLE_THEME_KEYS } from '@brand-page/constants';
-import { paletteToCssVarDeclarations } from '@brand-page/utils';
 import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
 export default defineComponent({
     mixins: [PageMixin],
@@ -104,23 +103,20 @@ export default defineComponent({
             };
         },
         styleHtml() {
-            // Legacy logo-theme vars (V1). Kept alongside the BP-5886 palette vars
-            // during the transition; once the palette is seeded (migration-20) its
-            // `common` entries reproduce these logo vars and this half is retired.
-            const legacyLogoVars = this.logoTheme
-                ? Object.entries(STYLE_THEME_KEYS)
-                    .map(([key, value]) => {
-                    const themeColor = key.includes('Background')
-                        ? this.logoTheme.logoBackgroundColor
-                        : this.logoTheme.logoTextColor;
-                    return themeColor?.rgb ? `--${value}: ${themeColor.rgb};` : '';
-                })
-                    .filter(Boolean)
-                    .join('\n    ')
-                : '';
-            // BP-5886 global colour palette → :root custom properties.
-            const paletteVars = paletteToCssVarDeclarations(this.viewModel?.styles?.colors ?? []);
-            const cssVariables = [legacyLogoVars, paletteVars]
+            if (!this.logoTheme) {
+                return '';
+            }
+            // Generate CSS variables for logo theme colors
+            const cssVariables = Object.entries(STYLE_THEME_KEYS)
+                .map(([key, value]) => {
+                const themeColor = key.includes('Background')
+                    ? this.logoTheme.logoBackgroundColor
+                    : this.logoTheme.logoTextColor;
+                if (themeColor?.rgb) {
+                    return `--${value}: ${themeColor.rgb};`;
+                }
+                return '';
+            })
                 .filter(Boolean)
                 .join('\n    ');
             return cssVariables

package/lib/src/brand-page-maker/components/color-picker/components/GradientColorSlider.mixin.d.ts

@@ -45,8 +45,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>> & Readonly<{
     "onUpdate:activeHandlerId"?: ((...args: any[]) => any) | undefined;
 }>, {
-    colors: unknown[];
     activeHandlerId: number;
+    colors: unknown[];
     maxNumberOfColors: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;