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

package/lib/src/{CreatedOnBrandCrowd-de-de-CE83hdjG.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-DKf-xyAs.js";
+import { _ as t } from "./lib-DhEJMZFn.js";
 const i = {}, h = {
   width: "275",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-en-us-DJTsOp2C.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-DKf-xyAs.js";
+import { _ as t } from "./lib-DhEJMZFn.js";
 const i = {}, h = {
   width: "251",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-es-es-D3R4iuPK.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-DKf-xyAs.js";
+import { _ as t } from "./lib-DhEJMZFn.js";
 const i = {}, h = {
   width: "250",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-fr-BIdcegm7.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-DKf-xyAs.js";
+import { _ as t } from "./lib-DhEJMZFn.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-ca-BIdcegm7.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-DKf-xyAs.js";
+import { _ as t } from "./lib-DhEJMZFn.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-pt-BlhdQ-hB.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-DKf-xyAs.js";
+import { _ as t } from "./lib-DhEJMZFn.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-br-BlhdQ-hB.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-DKf-xyAs.js";
+import { _ as t } from "./lib-DhEJMZFn.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnDcom-de-de-DRgpaO7O.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-DKf-xyAs.js";
+import { _ as e } from "./lib-DhEJMZFn.js";
 const M = {}, Z = {
   width: "242",
   height: "36",

package/lib/src/{CreatedOnDcom-en-us-MlAviIXv.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-DKf-xyAs.js";
+import { _ as e } from "./lib-DhEJMZFn.js";
 const i = {}, M = {
   width: "231",
   height: "36",

package/lib/src/{CreatedOnDcom-es-es-CyUO5i1i.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-DKf-xyAs.js";
+import { _ as e } from "./lib-DhEJMZFn.js";
 const M = {}, Z = {
   width: "230",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-ca-B5Q6_p6m.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-DKf-xyAs.js";
+import { _ as e } from "./lib-DhEJMZFn.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-fr-CFT3tntA.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-DKf-xyAs.js";
+import { _ as e } from "./lib-DhEJMZFn.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-br-C70p2WXo.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-DKf-xyAs.js";
+import { _ as M } from "./lib-DhEJMZFn.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-pt-D3qQBqFK.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-DKf-xyAs.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,8 +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';
-import { migration21 } from './migration/migration-21';
 const MIGRATION_TABLE = [
     {
         version: 1,
@@ -151,27 +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)',
-    },
-    {
-        version: 21,
-        migrateFn: migration21,
-        // Prerequisite for colour strategies touching text. Phase 1 makes `color`
-        // cascade (element wins over its global text style) instead of being dropped;
-        // this clears the element colours that are shadowed TODAY so none of them
-        // spring to life when the cascade ships. Lossless — those values render
-        // nowhere under current semantics. MUST ship in the same release as the
-        // resolver change (decision 0005: no flag on a persisted-model migration).
-        // Ordered after migration20 so it sees referencified var(--id) colours.
-        description: 'BP-5886 colour strategies Phase 1: drop element text `color` that is shadowed by the linked global text style (dead data today) so the new colour cascade does not resurface it',
-    },
 ];
 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

@@ -30,29 +30,6 @@ const applyDefaultViewModelTextStyle = (textStyle) => {
         wordBreak: 'normal',
     });
 };
-/**
- * BP-5886 colour-strategies Phase 1 — **`color` cascades; typography does not.**
- *
- * A global text style (`textStyleOptions[type]`) is a *default* for colour: the
- * element's own `color` wins and only falls back to the global style's. Every
- * other property still comes from the global style wholesale (see each caller) —
- * that all-or-nothing behaviour is deliberately unchanged for now. Do not
- * "fix" the inconsistency by reverting this; the resolution is to make every
- * property cascade (see the plan's Follow-on).
- *
- * Before this, all four resolvers replaced the element's style with the global
- * one and dropped `color` entirely, which made writing `color` onto a text
- * element a silent no-op on render — the reason colour strategies could not
- * touch text.
- *
- * The **site-wide default** (`textStyles.style.color`) is deliberately NOT in
- * this chain: it reaches the text by CSS inheritance from the root element
- * (`Page.mixin.ts` → `rootElementStyles`), exactly as it does today. So
- * `undefined` here is a valid result meaning "inherit", and the mappers must not
- * pre-seed the site default into an element style (that would read as an element
- * override and beat the global text style).
- */
-const resolveTextColor = (elementStyle, globalStyle) => elementStyle?.color || globalStyle?.color;
 const getTextStyleByContentTextStyle = (contentTextStyle, textStyleOptions) => {
     if (!contentTextStyle) {
         return undefined;
@@ -60,8 +37,8 @@ const getTextStyleByContentTextStyle = (contentTextStyle, textStyleOptions) => {
     if (contentTextStyle.textStyleType) {
         const textStyle = textStyleOptions[contentTextStyle.textStyleType].style;
         return Object.assign({}, textStyle, {
-            // Links keep a concrete last resort — they must never inherit.
-            color: resolveTextColor(contentTextStyle, textStyle) ||
+            color: textStyle.color ||
+                contentTextStyle.color ||
                 FALLBACK_DEFAULT_LINK_COLOR,
             fontWeight: textStyle.fontWeight || undefined,
             fontStyle: textStyle.fontStyle || undefined,
@@ -80,7 +57,6 @@ const getCopyrightTextStyle = (contentTextStyle, textStyleOptions) => {
             return applyDefaultViewModelTextStyle(Object.assign({}, textStyleOption, {
                 applyAutoScale: contentTextStyle.applyAutoScale,
                 textAlign: contentTextStyle.textAlign || DEFAULT_TEXT_ALIGN,
-                color: resolveTextColor(contentTextStyle, textStyleOption),
             }));
         }
     }
@@ -95,7 +71,6 @@ const getTextStyleByContentTextStyleProperty = (content, contentPropKey, textSty
                 applyAutoScale: contentTextStyle.applyAutoScale,
                 textAlign: contentTextStyle.textAlign || DEFAULT_TEXT_ALIGN,
                 textStyleType: contentTextStyle.textStyleType,
-                color: resolveTextColor(contentTextStyle, textStyleOption.style),
             }));
         }
     }
@@ -119,7 +94,6 @@ const applyViewModelTextItemTextStyles = (textItems, styles) => {
                 applyAutoScale: itemTextStyle.applyAutoScale,
                 textAlign: itemTextStyle.textAlign || DEFAULT_TEXT_ALIGN,
                 textStyleType: itemTextStyle.textStyleType || undefined,
-                color: resolveTextColor(itemTextStyle, textStyleOption?.style),
             };
         }
         return {
@@ -579,15 +553,22 @@ const mapToTestimonialSectionViewModel = (content, styles) => {
         ...content,
         role: content.type,
         type: 'testimonial-section',
-        // BP-5886 Phase 1: no `color` pre-seed here. These four are all
-        // CONTENT_TEXT_STYLE_PROPERTY_KEYS, so `applyViewModelTextStyles` resolves
-        // them — and seeding the site-wide default would read as an element
-        // override in `resolveTextColor`, beating the global text style. The site
-        // default still reaches them by root-element CSS inheritance.
-        titleStyle: { ...content.titleStyle },
-        nameStyle: { ...content.nameStyle },
-        positionStyle: { ...content.positionStyle },
-        testimonialStyle: { ...content.testimonialStyle },
+        titleStyle: {
+            color: styles.textStyles.style.color,
+            ...content.titleStyle,
+        },
+        nameStyle: {
+            color: styles.textStyles.style.color,
+            ...content.nameStyle,
+        },
+        positionStyle: {
+            color: styles.textStyles.style.color,
+            ...content.positionStyle,
+        },
+        testimonialStyle: {
+            color: styles.textStyles.style.color,
+            ...content.testimonialStyle,
+        },
         isFullWidth: true,
     }, styles);
 };
@@ -596,12 +577,10 @@ const mapToSocialLinksViewModel = (content, styles, brandPageType) => {
         ...content,
         role: content.type,
         type: 'social-links',
-        // BP-5886 Phase 1: `titleStyle` loses its `color` pre-seed (see the
-        // testimonial mapper). `iconFillStyles` KEEPS its seed — it is not a
-        // CONTENT_TEXT_STYLE_PROPERTY_KEYS entry, so no resolver ever touches it
-        // and this is the only thing supplying the icon colour. It is also a
-        // `fill`, not a `color`, so `resolveTextColor` does not apply.
-        titleStyle: { ...content.titleStyle },
+        titleStyle: {
+            color: styles.textStyles.style.color,
+            ...content.titleStyle,
+        },
         iconFillStyles: {
             fill: styles.textStyles?.style.color,
             ...content.iconFillStyles,
@@ -670,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) => {