@designcrowd/library.brand-page 5.8.7 → 5.8.9-kp-1

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

@@ -75,6 +75,9 @@ export default defineComponent({
     },
     methods: {
         async rerender() {
+            if (!this.originalSvgData) {
+                return;
+            }
             this.svgData = applyColorReplacementsToSvgString(this.originalSvgData, this.colorReplacements);
             this.svgData = this.svgData.replace('<svg ', `<svg ${this.svgAttributes} `);
         },

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

@@ -41,28 +41,6 @@ export declare const HEADER_CSRF_TOKEN = "csrf-token";
 export declare const STYLE_THEME_KEYS: Readonly<{
     LogoTextColor: "logo-text-color";
     LogoBackgroundColor: "logo-background-color";
-    LogoTextColor50: "logo-text-color-50";
-    LogoTextColor100: "logo-text-color-100";
-    LogoTextColor200: "logo-text-color-200";
-    LogoTextColor300: "logo-text-color-300";
-    LogoTextColor400: "logo-text-color-400";
-    LogoTextColor500: "logo-text-color-500";
-    LogoTextColor600: "logo-text-color-600";
-    LogoTextColor700: "logo-text-color-700";
-    LogoTextColor800: "logo-text-color-800";
-    LogoTextColor900: "logo-text-color-900";
-    LogoTextColor950: "logo-text-color-950";
-    LogoBackgroundColor50: "logo-background-color-50";
-    LogoBackgroundColor100: "logo-background-color-100";
-    LogoBackgroundColor200: "logo-background-color-200";
-    LogoBackgroundColor300: "logo-background-color-300";
-    LogoBackgroundColor400: "logo-background-color-400";
-    LogoBackgroundColor500: "logo-background-color-500";
-    LogoBackgroundColor600: "logo-background-color-600";
-    LogoBackgroundColor700: "logo-background-color-700";
-    LogoBackgroundColor800: "logo-background-color-800";
-    LogoBackgroundColor900: "logo-background-color-900";
-    LogoBackgroundColor950: "logo-background-color-950";
 }>;
 export declare const BoxShadowSpread = 0.5;
 export declare const ButtonBoxShadowSize = "3px 3px 0px 0px";

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

@@ -50,28 +50,6 @@ export const HEADER_CSRF_TOKEN = 'csrf-token';
 export const STYLE_THEME_KEYS = Object.freeze({
     LogoTextColor: 'logo-text-color',
     LogoBackgroundColor: 'logo-background-color',
-    LogoTextColor50: 'logo-text-color-50',
-    LogoTextColor100: 'logo-text-color-100',
-    LogoTextColor200: 'logo-text-color-200',
-    LogoTextColor300: 'logo-text-color-300',
-    LogoTextColor400: 'logo-text-color-400',
-    LogoTextColor500: 'logo-text-color-500',
-    LogoTextColor600: 'logo-text-color-600',
-    LogoTextColor700: 'logo-text-color-700',
-    LogoTextColor800: 'logo-text-color-800',
-    LogoTextColor900: 'logo-text-color-900',
-    LogoTextColor950: 'logo-text-color-950',
-    LogoBackgroundColor50: 'logo-background-color-50',
-    LogoBackgroundColor100: 'logo-background-color-100',
-    LogoBackgroundColor200: 'logo-background-color-200',
-    LogoBackgroundColor300: 'logo-background-color-300',
-    LogoBackgroundColor400: 'logo-background-color-400',
-    LogoBackgroundColor500: 'logo-background-color-500',
-    LogoBackgroundColor600: 'logo-background-color-600',
-    LogoBackgroundColor700: 'logo-background-color-700',
-    LogoBackgroundColor800: 'logo-background-color-800',
-    LogoBackgroundColor900: 'logo-background-color-900',
-    LogoBackgroundColor950: 'logo-background-color-950',
 });
 export const BoxShadowSpread = 0.5;
 export const ButtonBoxShadowSize = '3px 3px 0px 0px';

package/lib/src/brand-page/constants/sections/footer-display.constants.d.ts

@@ -11,5 +11,5 @@ export type FooterDisplayStyle = (typeof FOOTER_DISPLAY)[keyof typeof FOOTER_DIS
 interface FooterDisplayStyleConfig {
     option: ButtonGroupOption;
 }
-export declare const FOOTER_DISPLAY_STYLE_CONFIGS: FooterDisplayStyleConfig[];
+export declare const FOOTER_DISPLAY_STYLE_CONFIGS: () => FooterDisplayStyleConfig[];
 export {};

package/lib/src/brand-page/constants/sections/footer-display.constants.js

@@ -1,4 +1,5 @@
 import { ALIGN_CENTERED, ALIGN_JUSTIFIED } from '../misc.constants';
+import { tr, commonTr } from '../../../composables/useTranslate';
 export const FOOTER_DISPLAY = {
     /** @deprecated */
     ALIGN_CENTERED, // mapped to CENTERED
@@ -7,7 +8,7 @@ export const FOOTER_DISPLAY = {
     CENTERED: 'centered-menu',
     JUSTIFIED: 'justified-menu',
 };
-export const FOOTER_DISPLAY_STYLE_CONFIGS = [
+export const FOOTER_DISPLAY_STYLE_CONFIGS = () => [
     {
         option: {
             value: FOOTER_DISPLAY.CENTERED,
@@ -15,7 +16,7 @@ export const FOOTER_DISPLAY_STYLE_CONFIGS = [
             iconViewBox: '0 0 169 57',
             dataAttribute: FOOTER_DISPLAY.CENTERED,
             isSelected: false,
-            title: 'Centered',
+            title: commonTr('centered'),
         },
     },
     {
@@ -25,7 +26,7 @@ export const FOOTER_DISPLAY_STYLE_CONFIGS = [
             iconViewBox: '0 0 169 57',
             dataAttribute: FOOTER_DISPLAY.JUSTIFIED,
             isSelected: false,
-            title: 'Justified',
+            title: commonTr('justified'),
         },
     },
 ];

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

@@ -277,6 +277,7 @@ export interface TextMediaItem extends ImageItem {
 export interface TextShapeItem extends TextMediaItem {
     colorReplacements: ColorReplacement[];
     mediaType: 'shape';
+    aspectRatio?: number | null;
 }
 export interface ShapeItem extends ImageItem {
     colorReplacements: ColorReplacement[];

package/lib/src/brand-page/models/styles.model.js

@@ -1,4 +1,5 @@
 import { FONT_SIZE_HEADINGS, FONT_SIZE_TITLE, LINE_HEIGHT_HEADINGS, LINE_HEIGHT_TITLE, FONT_SIZE_BODY, LINE_HEIGHT_BODY, DISPLAY_TEXT_TITLE, DISPLAY_TEXT_HEADINGS, DISPLAY_TEXT_BODY, STYLE_THEME_KEYS, FONT_FAMILY_CONFIGS, DEFAULT_FONT_FAMILY_KEY, DISPlAY_TEXT_BUTTONS, } from '../constants';
+import { styleSettingsTr } from '../../composables/useTranslate';
 export const TEXT_STYLE_TYPES = {
     titles: 'titles',
     headings: 'headings',
@@ -81,13 +82,13 @@ export class TextStyles {
         this.textFontFamily = option.textFontFamily || DEFAULT_FONT_FAMILY_KEY;
         this.textStyleOptions = option.textStyleOptions
             ? {
-                [TEXT_STYLE_TYPES.titles]: new TextStyleOption(TEXT_STYLE_TYPES.titles, DISPLAY_TEXT_TITLE, option.textStyleOptions.titles ||
+                [TEXT_STYLE_TYPES.titles]: new TextStyleOption(TEXT_STYLE_TYPES.titles, styleSettingsTr('titles'), option.textStyleOptions.titles ||
                     createDefaultTitlesTextStyleOption()),
-                [TEXT_STYLE_TYPES.headings]: new TextStyleOption(TEXT_STYLE_TYPES.headings, DISPLAY_TEXT_HEADINGS, option.textStyleOptions.headings ||
+                [TEXT_STYLE_TYPES.headings]: new TextStyleOption(TEXT_STYLE_TYPES.headings, styleSettingsTr('headings'), option.textStyleOptions.headings ||
                     createDefaultHeadingsTextStyleOption()),
-                [TEXT_STYLE_TYPES.paragraphs]: new TextStyleOption(TEXT_STYLE_TYPES.paragraphs, DISPLAY_TEXT_BODY, option.textStyleOptions.paragraphs ||
+                [TEXT_STYLE_TYPES.paragraphs]: new TextStyleOption(TEXT_STYLE_TYPES.paragraphs, styleSettingsTr('paragraphs'), option.textStyleOptions.paragraphs ||
                     createDefaultParagraphTextStyleOption()),
-                [TEXT_STYLE_TYPES.buttons]: new TextStyleOption(TEXT_STYLE_TYPES.buttons, DISPlAY_TEXT_BUTTONS, option.textStyleOptions.buttons ||
+                [TEXT_STYLE_TYPES.buttons]: new TextStyleOption(TEXT_STYLE_TYPES.buttons, styleSettingsTr('buttons'), option.textStyleOptions.buttons ||
                     createDefaultButtonTextStyleOption()),
             }
             : createDefaultTextStyleOptions();

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

@@ -23,7 +23,8 @@ export interface UserPersonalisationSection {
     imageSearchTerms?: string[];
     imageUrls?: ImageUrl[];
     shapeSearchTerms?: string[];
-    shapes?: Shape[];
+    mainShapesCollection: ShapeAspectRatioCollection;
+    shapes: Shape[];
     items?: UserPersonalisationItem[];
 }
 export interface UserPersonalisationItem {
@@ -49,6 +50,25 @@ export interface Shape {
     shapeCategoryId: number;
     shapeCategory: any;
 }
+export interface ShapeEsModel {
+    token: string;
+    url: string;
+    categories: string[];
+    tags: string[];
+    enabled: boolean;
+    keepColor: boolean;
+    enabledToAdmin: boolean;
+}
+export interface ShapeAspectRatioCollection {
+    tall: ShapeEsModel[];
+    square: ShapeEsModel[];
+    wide: ShapeEsModel[];
+}
+export declare enum ShapeAspectRatioCategory {
+    Tall = "tall",
+    Square = "square",
+    Wide = "wide"
+}
 export type ContentPersonalisationMapping<T extends Content> = {
     [key in keyof UserPersonalisationSection]?: (keyof T)[];
 };

package/lib/src/brand-page/models/user-personalisation.model.js

@@ -1 +1,6 @@
-export {};
+export var ShapeAspectRatioCategory;
+(function (ShapeAspectRatioCategory) {
+    ShapeAspectRatioCategory["Tall"] = "tall";
+    ShapeAspectRatioCategory["Square"] = "square";
+    ShapeAspectRatioCategory["Wide"] = "wide";
+})(ShapeAspectRatioCategory || (ShapeAspectRatioCategory = {}));

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

@@ -1,4 +1,5 @@
 import type { LogoTheme, Theme } from '../models';
+import { type ColorInstance } from 'color';
 export declare const luminance: (r: number, g: number, b: number) => number;
 export declare const calculateLuminanceRatio: (color1: string, color2: string) => number;
 export declare const isHexTransparent: (hex: string) => boolean;
@@ -7,3 +8,4 @@ export declare const addTransparentAlphaChannelToHex: (hex: string) => string;
 export declare const addOpacityToHex: (hex: string, opacity: number) => string;
 export declare const setRgbAlpha: (rgb: string, alpha: number) => string;
 export declare const getThemeByTextStyleAndLogoTheme: (textStyle: BrandPageCssStyle, logoTheme: LogoTheme) => Theme;
+export declare const getNewColorBasedOnTargetColorTheme: (originalColor: string, targetColor: string) => ColorInstance | undefined;

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

@@ -1,5 +1,6 @@
 import isHexColor from 'validator/lib/isHexColor';
 import { hexToRGBA, isColor } from '../../utils/helpers';
+import Color, {} from 'color';
 // function from https://stackoverflow.com/a/9733420/3695983
 export const luminance = (r, g, b) => {
     const a = [r, g, b].map(function (v) {
@@ -62,3 +63,15 @@ export const getThemeByTextStyleAndLogoTheme = (textStyle, logoTheme) => {
         secondaryColor,
     };
 };
+export const getNewColorBasedOnTargetColorTheme = (originalColor, targetColor) => {
+    try {
+        const originalColorGrayScaled = Color(originalColor).grayscale().hsl();
+        const targetHslColor = Color(targetColor)
+            .hsl()
+            .lightness(originalColorGrayScaled.lightness());
+        return targetHslColor.rgb();
+    }
+    catch (e) {
+        return;
+    }
+};

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

@@ -1,4 +1,6 @@
+import { ShapeAspectRatioCategory } from '../models';
 import type { BrandPageModel, PageModel, PageStyles, UserPersonalisation, UserPersonalisationWithIndices } from '../models';
+export declare const filterPersonalisationByShapesAspectRatio: (personalisation: UserPersonalisationWithIndices, aspectRatio: ShapeAspectRatioCategory | null) => UserPersonalisationWithIndices;
 export declare const applyUserPersonalisationToBrandPageContentsAsync: (userPersonalisation: UserPersonalisationWithIndices, pages: PageModel[]) => Promise<{
     pages: PageModel[];
     isModified: boolean;

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

@@ -1,6 +1,8 @@
 import { DEFAULT_PERSONALISATION_MAPPING, PERSONALISATION_MAPPINGS, TEXT_MEDIA_CONTENT_TYPES, } from '../../brand-page-maker/constants/personalisation.constant';
-import { BRAND_PAGE_TYPES } from '../models';
+import { BRAND_PAGE_TYPES, ShapeAspectRatioCategory } from '../models';
 import { getColorReplacementsFromSvgString, getColorReplacementsFromSvgStringServer, } from './svg-color.util';
+const ASPECT_RATIO_LOWER_CUT_OFF = 0.5;
+const ASPECT_RATIO_UPPER_CUT_OFF = 1.5;
 const getPersonalisationMappingForContentType = (contentType) => {
     const baseMapping = Object.assign({}, DEFAULT_PERSONALISATION_MAPPING);
     const contentBasedMapping = PERSONALISATION_MAPPINGS[contentType];
@@ -49,7 +51,21 @@ const getPersonalisationValueAsync = async (section, property, value, brandPageT
             break;
         case 'imageSearchTerms':
         case 'shapeSearchTerms':
-            if (section.shapes) {
+            if (section.mainShapesCollection.tall.length > 0 ||
+                section.mainShapesCollection.square.length > 0 ||
+                section.mainShapesCollection.wide.length > 0) {
+                const aspectRatioCategory = section.mainShapesCollection.tall.length > 0
+                    ? ShapeAspectRatioCategory.Tall
+                    : section.mainShapesCollection.square.length > 0
+                        ? ShapeAspectRatioCategory.Square
+                        : ShapeAspectRatioCategory.Wide;
+                return {
+                    value: propertyValue[section.shapeIndex %
+                        section.mainShapesCollection[aspectRatioCategory].length],
+                    section,
+                };
+            }
+            else if (section.shapes) {
                 return {
                     value: propertyValue[section.shapeIndex % section.shapes.length],
                     section,
@@ -57,7 +73,33 @@ const getPersonalisationValueAsync = async (section, property, value, brandPageT
             }
             break;
         case 'shapes':
-            if (section.shapes) {
+            console.log(section.mainShapesCollection, 'NEW PERSONALISATION');
+            if (section.mainShapesCollection.tall.length > 0 ||
+                section.mainShapesCollection.square.length > 0 ||
+                section.mainShapesCollection.wide.length > 0) {
+                const aspectRatioCategory = section.mainShapesCollection.tall.length > 0
+                    ? ShapeAspectRatioCategory.Tall
+                    : section.mainShapesCollection.square.length > 0
+                        ? ShapeAspectRatioCategory.Square
+                        : ShapeAspectRatioCategory.Wide;
+                const shapeUrl = propertyValue[section.shapeIndex %
+                    section.mainShapesCollection[aspectRatioCategory].length].url;
+                const svgResponse = await (await fetch(shapeUrl)).text();
+                const colorReplacements = typeof DOMParser !== 'undefined'
+                    ? getColorReplacementsFromSvgString(svgResponse)
+                    : getColorReplacementsFromSvgStringServer(svgResponse);
+                return {
+                    value: shapeUrl,
+                    section: {
+                        ...section,
+                        shapeIndex: section.shapeIndex + 1,
+                    },
+                    valuesToUpdate: {
+                        colorReplacements,
+                    },
+                };
+            }
+            else if (section.shapes) {
                 const shapeUrl = propertyValue[section.shapeIndex % section.shapes.length].url;
                 const svgResponse = await (await fetch(shapeUrl)).text();
                 const colorReplacements = typeof DOMParser !== 'undefined'
@@ -163,6 +205,14 @@ const applyPersonalisationToBrandPageContentsRecursiveAsync = async (personalisa
                 continue;
             }
             if (value) {
+                if (mappingType === 'text-media-items' &&
+                    key === 'aspectRatio' &&
+                    !isNaN(Number(value))) {
+                    const aspectRatioIndex = Number(value);
+                    const aspectRatio = getShapeAspectRatioCategory(aspectRatioIndex);
+                    alert(aspectRatio);
+                    newPersonalisation = filterPersonalisationByShapesAspectRatio(newPersonalisation, aspectRatio);
+                }
                 const { personalisation: updatedPersonalisation, value: personalisationValue, valuesToUpdate: newValuesToUpdate, } = await getPersonalisationValueFromPropertyAsync(key, value, personalisationRole, newPersonalisation, mappingType);
                 newPersonalisation = updatedPersonalisation;
                 if (personalisationValue) {
@@ -204,6 +254,48 @@ const applyPersonalisationToBrandPageContentsRecursiveAsync = async (personalisa
     }
     return { newContents, isApplied, newPersonalisation };
 };
+export const filterPersonalisationByShapesAspectRatio = (personalisation, aspectRatio) => {
+    if (!aspectRatio) {
+        return personalisation;
+    }
+    const result = {
+        type: personalisation.type,
+    };
+    for (const sectionKey in personalisation) {
+        if (sectionKey === 'type')
+            continue;
+        const section = personalisation[sectionKey];
+        result[sectionKey] = {
+            ...section,
+            mainShapesCollection: {
+                tall: aspectRatio === 'tall'
+                    ? section.mainShapesCollection?.tall || []
+                    : [],
+                square: aspectRatio === 'square'
+                    ? section.mainShapesCollection?.square || []
+                    : [],
+                wide: aspectRatio === 'wide'
+                    ? section.mainShapesCollection?.wide || []
+                    : [],
+            },
+        };
+    }
+    return result;
+};
+const getShapeAspectRatioCategory = (aspectRatio) => {
+    if (!aspectRatio) {
+        return null;
+    }
+    else if (aspectRatio < ASPECT_RATIO_LOWER_CUT_OFF) {
+        return ShapeAspectRatioCategory.Tall;
+    }
+    else if (aspectRatio > ASPECT_RATIO_UPPER_CUT_OFF) {
+        return ShapeAspectRatioCategory.Wide;
+    }
+    else {
+        return ShapeAspectRatioCategory.Square;
+    }
+};
 export const applyUserPersonalisationToBrandPageContentsAsync = async (userPersonalisation, pages) => {
     let isModified = false;
     let currentPersonalisation = userPersonalisation;

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

@@ -1,12 +1,16 @@
 import type { BrandPageModel, LogoTheme, FabricLogoTheme, ButtonStyles, PageModel } from '../models';
 import { NavigationDesktop, NavigationMobile } from '../models';
 import { PageStyles, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop } from '../models';
-export declare const colorMatchCssKeyValue: (cssKey: string, cssValue: string, logoTheme: LogoTheme) => {
+export declare const colorMatchCssKeyValue: (cssKey: string, cssValue: string, logoTheme: LogoTheme, applyColorWithMatchingLuminance?: {
+    originalColor: string;
+}) => {
     cssValue: string;
     isModified: boolean;
 };
 type Style = Record<string, string | any>;
-export declare const applyLogoThemeToBrandPageStyleRecursive: (logoTheme: LogoTheme, style: Style | Style[]) => {
+export declare const applyLogoThemeToBrandPageStyleRecursive: (logoTheme: LogoTheme, attribute: string, style: Style | Style[], options?: {
+    isMultiColorShape: boolean;
+}) => {
     newStyle: Style | Style[];
     isApplied: boolean;
 };

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

@@ -2,7 +2,7 @@ import { VIEWPORTS, NavigationDesktop, NavigationMobile } from '../models';
 import { PageStyles, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop, } from '../models';
 import { STYLE_THEME_KEYS } from '../constants';
 import { arrayToLinearGradient, linearGradientToArray, isColorLinearGradient, RGBAtoHex, } from '../../utils/helpers';
-import { addTransparentAlphaChannelToHex, calculateLuminanceRatio, } from './color.util';
+import { addTransparentAlphaChannelToHex, calculateLuminanceRatio, getNewColorBasedOnTargetColorTheme, } from './color.util';
 import chroma from 'chroma-js';
 const MIN_LUM_RATIO = 0.3;
 const parseFabricColorToCssStyle = (fabricColor) => {
@@ -31,32 +31,43 @@ const getColorValueForCorrectCssProperty = (k, colorData) => {
         ? colorData.gradient
         : colorData.rgb;
 };
-export const colorMatchCssKeyValue = (cssKey, cssValue, logoTheme) => {
-    switch (cssValue) {
-        case STYLE_THEME_KEYS.LogoBackgroundColor:
-            cssValue = getColorValueForCorrectCssProperty(cssKey, logoTheme.logoBackgroundColor);
-            return { cssValue, isModified: true };
-        case STYLE_THEME_KEYS.LogoTextColor:
-            cssValue = getColorValueForCorrectCssProperty(cssKey, logoTheme.logoTextColor);
-            return { cssValue, isModified: true };
+export const colorMatchCssKeyValue = (cssKey, cssValue, logoTheme, applyColorWithMatchingLuminance) => {
+    if (applyColorWithMatchingLuminance?.originalColor) {
+        const styleThemeMatch = Object.values(STYLE_THEME_KEYS).find((k) => cssValue === k);
+        if (styleThemeMatch) {
+            const theme = styleThemeMatch.startsWith(STYLE_THEME_KEYS.LogoTextColor)
+                ? logoTheme.logoTextColor
+                : logoTheme.logoBackgroundColor;
+            let newColor = applyColorWithMatchingLuminance.originalColor;
+            try {
+                newColor = getNewColorBasedOnTargetColorTheme(applyColorWithMatchingLuminance.originalColor, theme.rgb).toString();
+            }
+            catch (e) { }
+            return { cssValue: newColor, isModified: true };
+        }
+    }
+    if (cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoTextColor, 'g'))) {
+        cssValue = getColorValueForCorrectCssProperty(cssKey, logoTheme.logoTextColor);
+        return { cssValue, isModified: true };
     }
-    const match = Object.values(STYLE_THEME_KEYS).find((k) => cssValue === k);
-    if (match) {
-        const split = match.split('-');
-        const colorShadeKey = split[split.length - 1];
-        const colorKey = match.startsWith(STYLE_THEME_KEYS.LogoBackgroundColor)
-            ? logoTheme.logoBackgroundColor
-            : logoTheme.logoTextColor;
-        return { cssValue: colorKey[colorShadeKey], isModified: true };
+    else if (cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoBackgroundColor, 'g'))) {
+        cssValue = getColorValueForCorrectCssProperty(cssKey, logoTheme.logoBackgroundColor);
+        return { cssValue, isModified: true };
     }
     return { cssValue, isModified: false };
 };
-export const applyLogoThemeToBrandPageStyleRecursive = (logoTheme, style) => {
+export const applyLogoThemeToBrandPageStyleRecursive = (logoTheme, attribute, style, options) => {
     let isApplied = false;
     let newStyle = {};
     if (Array.isArray(style)) {
         newStyle = style.map((s) => {
-            const output = applyLogoThemeToBrandPageStyleRecursive(logoTheme, s);
+            const isShapeColorReplacement = attribute === 'colorReplacements';
+            const output = applyLogoThemeToBrandPageStyleRecursive(logoTheme, attribute, s, isShapeColorReplacement
+                ? {
+                    isMultiColorShape: style.filter((x) => x.originalColor.toLowerCase() !== '' &&
+                        x.originalColor.toLowerCase() !== 'none').length > 1,
+                }
+                : undefined);
             isApplied = isApplied || output.isApplied;
             return output.newStyle;
         });
@@ -64,12 +75,17 @@ export const applyLogoThemeToBrandPageStyleRecursive = (logoTheme, style) => {
     else if (style && typeof style === 'object') {
         for (const [key, value] of Object.entries(style)) {
             if (typeof value === 'string') {
-                const output = colorMatchCssKeyValue(key, value, logoTheme);
+                const applyColorWithMatchingLuminance = options?.isMultiColorShape && key === `replacementColor`
+                    ? {
+                        originalColor: style[`originalColor`],
+                    }
+                    : undefined;
+                const output = colorMatchCssKeyValue(key, value, logoTheme, applyColorWithMatchingLuminance);
                 newStyle[key] = output.cssValue;
                 isApplied = isApplied || output.isModified;
             }
             else if (typeof value === 'object') {
-                const output = applyLogoThemeToBrandPageStyleRecursive(logoTheme, value);
+                const output = applyLogoThemeToBrandPageStyleRecursive(logoTheme, key, value);
                 newStyle[key] = output.newStyle;
                 isApplied = isApplied || output.isApplied;
                 // if (process.env.NODE_ENV !== 'production' && output.isApplied) {
@@ -115,7 +131,7 @@ export const applyLogoThemeToBrandPageNavigationStyles = (logoTheme, navigation)
             newNavigation[key] = value;
         }
         else {
-            const output = applyLogoThemeToBrandPageStyleRecursive(logoTheme, value);
+            const output = applyLogoThemeToBrandPageStyleRecursive(logoTheme, key, value);
             newNavigation[key] = output.newStyle;
             isModified = isModified || output.isApplied;
         }
@@ -139,7 +155,7 @@ export const applyLogoThemeToBrandPageHeaderStyles = (logoTheme, pageHeader) =>
             newPageHeader[key] = value;
         }
         else {
-            const output = applyLogoThemeToBrandPageStyleRecursive(logoTheme, value);
+            const output = applyLogoThemeToBrandPageStyleRecursive(logoTheme, key, value);
             newPageHeader[key] = output.newStyle;
             isModified = isModified || output.isApplied;
         }
@@ -162,7 +178,7 @@ export const applyLogoThemeToBrandPageFooterStyles = (logoTheme, pageFooter) =>
             newPageFooter[key] = value;
         }
         else {
-            const output = applyLogoThemeToBrandPageStyleRecursive(logoTheme, value);
+            const output = applyLogoThemeToBrandPageStyleRecursive(logoTheme, key, value);
             newPageFooter[key] = output.newStyle;
             isModified = isModified || output.isApplied;
         }
@@ -186,7 +202,7 @@ export const applyLogoThemeToContents = (logoTheme, pages) => {
                 .filter(([, v]) => typeof v === 'object')
                 .map(([k]) => k);
             for (const styleKey of styleKeys) {
-                const { newStyle, isApplied } = applyLogoThemeToBrandPageStyleRecursive(logoTheme, content[styleKey]);
+                const { newStyle, isApplied } = applyLogoThemeToBrandPageStyleRecursive(logoTheme, styleKey, content[styleKey]);
                 newContent[styleKey] = newStyle;
                 isModified = isModified || isApplied;
             }
@@ -202,13 +218,13 @@ export const applyLogoThemeToBrandPageStyles = (logoTheme, pageStyles) => {
     for (const [key, value] of Object.entries(pageStyles)) {
         if (Array.isArray(value)) {
             for (let i = 0; i < value.length; i++) {
-                const output = applyLogoThemeToBrandPageStyleRecursive(logoTheme, value[i]);
+                const output = applyLogoThemeToBrandPageStyleRecursive(logoTheme, `pageStyles`, value[i]);
                 newStyle[key] = output.newStyle;
                 isModified = isModified || output.isApplied;
             }
         }
         else {
-            const output = applyLogoThemeToBrandPageStyleRecursive(logoTheme, value);
+            const output = applyLogoThemeToBrandPageStyleRecursive(logoTheme, key, value);
             newStyle[key] = output.newStyle;
             isModified = isModified || output.isApplied;
         }

package/lib/src/brand-page-maker/components/admin-background-settings/AdminBackgroundSettings.mixin.d.ts

@@ -234,10 +234,11 @@ declare const _default: import("vue").DefineComponent<{}, {
         setBackgroundImageUrl({ backgroundImageUrl, }: {
             backgroundImageUrl: string;
         }): void;
-        addBackgroundShape({ shapeUrl, width, height, }: {
+        addBackgroundShape({ shapeUrl, width, height, aspectRatio, }: {
             shapeUrl: string;
             width?: number | undefined;
             height?: number | undefined;
+            aspectRatio?: number | undefined;
         }): void;
         deleteBackgroundShape({ shapeIndex }: {
             shapeIndex: number;
@@ -257,28 +258,6 @@ declare const _default: import("vue").DefineComponent<{}, {
     styleThemeKeys: Readonly<{
         LogoTextColor: "logo-text-color";
         LogoBackgroundColor: "logo-background-color";
-        LogoTextColor50: "logo-text-color-50";
-        LogoTextColor100: "logo-text-color-100";
-        LogoTextColor200: "logo-text-color-200";
-        LogoTextColor300: "logo-text-color-300";
-        LogoTextColor400: "logo-text-color-400";
-        LogoTextColor500: "logo-text-color-500";
-        LogoTextColor600: "logo-text-color-600";
-        LogoTextColor700: "logo-text-color-700";
-        LogoTextColor800: "logo-text-color-800";
-        LogoTextColor900: "logo-text-color-900";
-        LogoTextColor950: "logo-text-color-950";
-        LogoBackgroundColor50: "logo-background-color-50";
-        LogoBackgroundColor100: "logo-background-color-100";
-        LogoBackgroundColor200: "logo-background-color-200";
-        LogoBackgroundColor300: "logo-background-color-300";
-        LogoBackgroundColor400: "logo-background-color-400";
-        LogoBackgroundColor500: "logo-background-color-500";
-        LogoBackgroundColor600: "logo-background-color-600";
-        LogoBackgroundColor700: "logo-background-color-700";
-        LogoBackgroundColor800: "logo-background-color-800";
-        LogoBackgroundColor900: "logo-background-color-900";
-        LogoBackgroundColor950: "logo-background-color-950";
     }>;
     configOptions: {
         readonly style: "style";

package/lib/src/brand-page-maker/components/admin-logo-settings/AdminLogoSettings.mixin.d.ts

@@ -2,11 +2,11 @@ declare const _default: import("vue").DefineComponent<{}, {
     templates: import("vue").ComputedRef<import("../../stores/admin-logo-settings").AdminPreviewLogoTemplateTemplate[]>;
     items: import("vue").ComputedRef<{
         id: string;
-        type: "email" | "phone" | "logo" | "general-link" | "profile" | "website" | "image" | "video" | "text" | "facebook" | "twitter" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section";
+        type: "email" | "phone" | "image" | "logo" | "general-link" | "profile" | "website" | "video" | "text" | "facebook" | "twitter" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section";
         settings: {
             content: {
                 id: string;
-                type: "email" | "phone" | "logo" | "general-link" | "profile" | "website" | "image" | "video" | "text" | "facebook" | "twitter" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section";
+                type: "email" | "phone" | "image" | "logo" | "general-link" | "profile" | "website" | "video" | "text" | "facebook" | "twitter" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section";
                 personalisationRole?: "email" | "phone" | "profile" | "website" | "about" | "information" | "media" | undefined;
             };
             fields: Record<string, import("../../../shared/content-settings/models").ContentItemFieldSettings>;