@designcrowd/library.brand-page 5.8.7 → 5.8.8

package/lib/src/shared/content-settings/components/color-field/ColorField.mixin.d.ts

@@ -7,11 +7,12 @@ import type { UpdateItemValuePayload } from '../../models';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     id: {
         type: StringConstructor;
-        required: true;
+        required: false;
+        default: string;
     };
     isToggled: {
         type: BooleanConstructor;
-        required: true;
+        required: false;
     };
     name: {
         type: StringConstructor;
@@ -271,28 +272,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     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";
     }>;
     popup: boolean;
 }, {
@@ -308,11 +287,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "on-toggle-state-change")[], "update:modelValue" | "on-toggle-state-change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     id: {
         type: StringConstructor;
-        required: true;
+        required: false;
+        default: string;
     };
     isToggled: {
         type: BooleanConstructor;
-        required: true;
+        required: false;
     };
     name: {
         type: StringConstructor;
@@ -369,11 +349,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     "onOn-toggle-state-change"?: ((...args: any[]) => any) | undefined;
 }>, {
+    id: string;
     label: string;
     disableTransparent: boolean;
     valueConvertor: ValueConvertor<string | BrandPageCssStyle, string | undefined, string | BrandPageCssStyle>;
     showGradients: boolean;
     useV2: boolean;
+    isToggled: boolean;
     toggleUniqueId: string;
     enableColorMatch: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/lib/src/shared/content-settings/components/color-field/ColorField.mixin.js

@@ -11,11 +11,12 @@ export default defineComponent({
     props: {
         id: {
             type: String,
-            required: true,
+            required: false,
+            default: '',
         },
         isToggled: {
             type: Boolean,
-            required: true,
+            required: false,
         },
         name: {
             type: String,

package/lib/src/shared/style-settings/components/StyleSettings.mixin.d.ts

@@ -852,28 +852,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";
     }>;
     isColorMatch: {};
     popup: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.8.7",
+  "version": "5.8.8",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",
@@ -64,6 +64,7 @@
     "axios": "1.6.7",
     "chroma-js": "2.4.2",
     "click-outside-vue3": "4.0.1",
+    "color": "5.0.0",
     "config": "3.3.10",
     "core-js": "3.35.1",
     "css-color-names": "1.0.1",

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

@@ -85,6 +85,10 @@ export default defineComponent({
   },
   methods: {
     async rerender() {
+      if (!this.originalSvgData) {
+        return;
+      }
+
       this.svgData = applyColorReplacementsToSvgString(
         this.originalSvgData,
         this.colorReplacements,

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

@@ -67,28 +67,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;

package/src/brand-page/utils/color.util.test.ts

@@ -0,0 +1,47 @@
+import { getNewColorBasedOnTargetColorTheme } from './color.util';
+
+describe('color.util - getNewColorBasedOnTargetColorTheme', () => {
+  [
+    {
+      original: '#2B2B2B',
+      expectedNewColor: 'rgb(58, 23, 63)',
+    },
+    {
+      original: '#FFB751',
+      expectedNewColor: 'rgb(215, 164, 222)',
+    },
+    {
+      original: '#FFE070',
+      expectedNewColor: 'rgb(233, 205, 237)',
+    },
+    {
+      original: '#789461',
+      expectedNewColor: 'rgb(177, 77, 191)',
+    },
+    {
+      original: '#8CAD72',
+      expectedNewColor: 'rgb(191, 110, 203)',
+    },
+    {
+      original: '#A4CB85',
+      expectedNewColor: 'rgb(209, 150, 217)',
+    },
+    {
+      original: '#000',
+      expectedNewColor: 'rgb(0, 0, 0)',
+    },
+    {
+      original: '#fff',
+      expectedNewColor: 'rgb(255, 255, 255)',
+    },
+  ].forEach((testItem) => {
+    test(`given value ${testItem.original} should return expected new color ${testItem.expectedNewColor}`, () => {
+      const newColor = getNewColorBasedOnTargetColorTheme(
+        testItem.original,
+        '#ab43ba',
+      );
+
+      expect(newColor?.toString()).equals(testItem.expectedNewColor);
+    });
+  });
+});

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

@@ -1,6 +1,7 @@
 import isHexColor from 'validator/lib/isHexColor';
 import { hexToRGBA, isColor } from '../../utils/helpers';
 import type { LogoTheme, Theme } from '../models';
+import Color, { type ColorInstance } from 'color';
 
 // function from https://stackoverflow.com/a/9733420/3695983
 export const luminance = (r: number, g: number, b: number): number => {
@@ -95,3 +96,20 @@ export const getThemeByTextStyleAndLogoTheme = (
     secondaryColor,
   };
 };
+
+export const getNewColorBasedOnTargetColorTheme = (
+  originalColor: string,
+  targetColor: string,
+): ColorInstance | undefined => {
+  try {
+    const originalColorGrayScaled = Color(originalColor).grayscale().hsl();
+
+    const targetHslColor = Color(targetColor)
+      .hsl()
+      .lightness(originalColorGrayScaled.lightness());
+
+    return targetHslColor.rgb();
+  } catch (e) {
+    return;
+  }
+};

package/src/brand-page/utils/style.util.test.ts

@@ -253,6 +253,7 @@ describe('style.util', () => {
     // Act
     const { newStyle } = applyLogoThemeToBrandPageStyleRecursive(
       logoTheme,
+      'style',
       style,
     );
 

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

@@ -24,6 +24,7 @@ import {
 import {
   addTransparentAlphaChannelToHex,
   calculateLuminanceRatio,
+  getNewColorBasedOnTargetColorTheme,
 } from './color.util';
 import chroma from 'chroma-js';
 
@@ -70,34 +71,49 @@ export const colorMatchCssKeyValue = (
   cssKey: string,
   cssValue: string,
   logoTheme: LogoTheme,
+  applyColorWithMatchingLuminance?: {
+    originalColor: string;
+  },
 ): { cssValue: string; isModified: boolean } => {
-  switch (cssValue) {
-    case STYLE_THEME_KEYS.LogoBackgroundColor:
-      cssValue = getColorValueForCorrectCssProperty(
-        cssKey,
-        logoTheme.logoBackgroundColor,
-      );
+  if (applyColorWithMatchingLuminance?.originalColor) {
+    const styleThemeMatch = Object.values(STYLE_THEME_KEYS).find(
+      (k) => cssValue === k,
+    );
 
-      return { cssValue, isModified: true };
-    case STYLE_THEME_KEYS.LogoTextColor:
-      cssValue = getColorValueForCorrectCssProperty(
-        cssKey,
-        logoTheme.logoTextColor,
-      );
+    if (styleThemeMatch) {
+      const theme = styleThemeMatch.startsWith(STYLE_THEME_KEYS.LogoTextColor)
+        ? logoTheme.logoTextColor
+        : logoTheme.logoBackgroundColor;
+
+      let newColor = applyColorWithMatchingLuminance.originalColor;
 
-      return { cssValue, isModified: true };
+      try {
+        newColor = getNewColorBasedOnTargetColorTheme(
+          applyColorWithMatchingLuminance.originalColor,
+          theme.rgb,
+        )!.toString();
+      } catch (e) {}
+
+      return { cssValue: newColor, isModified: true };
+    }
   }
 
-  const match = Object.values(STYLE_THEME_KEYS).find((k) => cssValue === k);
+  if (cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoTextColor, 'g'))) {
+    cssValue = getColorValueForCorrectCssProperty(
+      cssKey,
+      logoTheme.logoTextColor,
+    );
 
-  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, isModified: true };
+  } else if (
+    cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoBackgroundColor, 'g'))
+  ) {
+    cssValue = getColorValueForCorrectCssProperty(
+      cssKey,
+      logoTheme.logoBackgroundColor,
+    );
 
-    return { cssValue: colorKey[colorShadeKey], isModified: true };
+    return { cssValue, isModified: true };
   }
 
   return { cssValue, isModified: false };
@@ -107,7 +123,11 @@ type Style = Record<string, string | any>;
 
 export const applyLogoThemeToBrandPageStyleRecursive = (
   logoTheme: LogoTheme,
+  attribute: string,
   style: Style | Style[],
+  options?: {
+    isMultiColorShape: boolean;
+  },
 ): {
   newStyle: Style | Style[];
   isApplied: boolean;
@@ -117,7 +137,23 @@ export const applyLogoThemeToBrandPageStyleRecursive = (
 
   if (Array.isArray(style)) {
     newStyle = style.map((s: Style) => {
-      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;
 
@@ -126,13 +162,26 @@ export const applyLogoThemeToBrandPageStyleRecursive = (
   } 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,
+          key,
           value as Style,
         );
 
@@ -207,7 +256,11 @@ export const applyLogoThemeToBrandPageNavigationStyles = (
     if (typeof value === 'string' || typeof value === 'boolean') {
       newNavigation[key] = value;
     } else {
-      const output = applyLogoThemeToBrandPageStyleRecursive(logoTheme, value);
+      const output = applyLogoThemeToBrandPageStyleRecursive(
+        logoTheme,
+        key,
+        value,
+      );
 
       newNavigation[key] = output.newStyle;
       isModified = isModified || output.isApplied;
@@ -246,7 +299,11 @@ export const applyLogoThemeToBrandPageHeaderStyles = (
     ) {
       newPageHeader[key] = value;
     } else {
-      const output = applyLogoThemeToBrandPageStyleRecursive(logoTheme, value);
+      const output = applyLogoThemeToBrandPageStyleRecursive(
+        logoTheme,
+        key,
+        value,
+      );
 
       newPageHeader[key] = output.newStyle;
       isModified = isModified || output.isApplied;
@@ -284,7 +341,11 @@ export const applyLogoThemeToBrandPageFooterStyles = (
     ) {
       newPageFooter[key] = value;
     } else {
-      const output = applyLogoThemeToBrandPageStyleRecursive(logoTheme, value);
+      const output = applyLogoThemeToBrandPageStyleRecursive(
+        logoTheme,
+        key,
+        value,
+      );
 
       newPageFooter[key] = output.newStyle;
       isModified = isModified || output.isApplied;
@@ -323,6 +384,7 @@ export const applyLogoThemeToContents = (
       for (const styleKey of styleKeys) {
         const { newStyle, isApplied } = applyLogoThemeToBrandPageStyleRecursive(
           logoTheme,
+          styleKey,
           content[styleKey],
         );
 
@@ -351,6 +413,7 @@ export const applyLogoThemeToBrandPageStyles = (
       for (let i = 0; i < value.length; i++) {
         const output = applyLogoThemeToBrandPageStyleRecursive(
           logoTheme,
+          `pageStyles`,
           value[i],
         );
 
@@ -358,7 +421,11 @@ export const applyLogoThemeToBrandPageStyles = (
         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/src/shared/content-settings/components/color-field/ColorField.mixin.ts

@@ -25,11 +25,12 @@ export default defineComponent({
   props: {
     id: {
       type: String,
-      required: true,
+      required: false,
+      default: '',
     },
     isToggled: {
       type: Boolean,
-      required: true,
+      required: false,
     },
     name: {
       type: String,

package/src/shared/content-settings/components/color-replacements-field/ColorReplacementsField.vue

@@ -12,7 +12,9 @@
       >{{ label }}
     </span>
     <Toggle
-      v-if="isAdmin && colorReplacements && colorReplacements.length > 0"
+      v-if="
+        isAdmin && data.colorReplacements && data.colorReplacements.length > 0
+      "
       :id="`${id}-${name}-color-matched${toggleIdSuffix}`"
       :model-value="isOptionColorMatched"
       color="info"
@@ -21,11 +23,14 @@
       @update:model-value="onColorMatchToggled"
     />
     <div
-      class="tw-flex tw-flex-wrap tw-gap-2"
-      :class="{ 'tw-flex-col': isOptionColorMatched }"
+      class="tw-flex tw-flex-wrap"
+      :class="{
+        'tw-flex-col': isOptionColorMatched,
+        'tw-gap-2': !isOptionColorMatched,
+      }"
     >
       <div
-        v-for="(colorReplacement, index) in colorReplacements"
+        v-for="(colorReplacement, index) in data.colorReplacements"
         :key="`${colorReplacement.attribute}-${colorReplacement.originalColor}`"
       >
         <ColorField
@@ -37,47 +42,131 @@
           :logo-theme="logoTheme"
           @update:model-value="onColorPickerInput($event, index)"
         />
-        <!-- Start Admin Style Theme Key Select -->
-        <div v-else class="tw-flex tw-gap-2 tw-items-center">
-          <div
-            class="tw-w-4 tw-h-4 tw-rounded tw-border tw-border-solid tw-border-grayscale-500"
-            :style="{ backgroundColor: colorReplacement.originalColor }"
-          />
-          <select
-            class="c-select c-button-style tw-flex-grow tw-border tw-appearance-none tw-border-none tw-h-10 tw-pl-2 tw-rounded tw-cursor-pointer tw-transition-all tw-duration-300 tw-bg-white"
-            @change.stop="
-              onColorPickerInputDropdown($event.target.value, index)
-            "
+      </div>
+      <div
+        v-if="
+          isAdmin &&
+          data.colorReplacements &&
+          data.colorReplacements.length > 0 &&
+          isOptionColorMatched
+        "
+      >
+        <select
+          class="c-select c-button-style tw-flex-grow tw-border tw-appearance-none tw-border-none tw-h-10 tw-pl-2 tw-rounded tw-cursor-pointer tw-transition-all tw-duration-300 tw-bg-white"
+          @change.stop="
+            onColorPickerInputDropdown(($event!.target as any).value)
+          "
+        >
+          <option
+            v-for="(styleThemeKey, styleKeyThemeIndex) in data.styleThemeKeys"
+            :key="styleKeyThemeIndex"
+            :value="styleThemeKey"
+            :selected="styleThemeKey === selectedColor"
           >
-            <option
-              v-for="(styleThemeKey, styleKeyThemeIndex) in styleThemeKeys"
-              :key="styleKeyThemeIndex"
-              :value="styleThemeKey"
-              :selected="
-                styleThemeKey === colorReplacement.replacementColor
-                  ? 'selected'
-                  : null
-              "
-            >
-              {{ styleThemeKey }}
-            </option>
-          </select>
-        </div>
-        <!-- End Admin Style Theme Key Select -->
+            {{ styleThemeKey }}
+          </option>
+        </select>
       </div>
     </div>
   </div>
 </template>
-<script>
+<script setup lang="ts">
 import { Toggle } from '@designcrowd/fe-shared-lib';
-import ColorReplacementsFieldMixin from './ColorReplacementsField.mixin.ts';
 import ColorField from '../../../content-settings/components/color-field/ColorField.vue';
+import type { ColorReplacement, LogoTheme } from '../../../../brand-page';
+import { reactive, watch, computed } from 'vue';
+import { STYLE_THEME_KEYS } from '../../../../brand-page/constants';
+import cloneDeep from 'lodash.clonedeep';
+import debounce from 'lodash.debounce';
+import { isColorMatched } from '../../../../brand-page-maker/utils';
+import type { DebounceHandle } from 'lodash.debounce';
+import type { UpdateItemValuePayload } from '../../../content-settings/models';
+
+const DEBOUNCE_WAIT_IN_MS = 10;
+
+const props = defineProps<{
+  id: string;
+  name: string;
+  value: ColorReplacement[];
+  isAdmin: boolean;
+  label?: string;
+  toggleUniqueId?: string;
+  logoTheme: LogoTheme;
+}>();
 
-export default {
-  components: {
-    Toggle,
-    ColorField,
+const emit = defineEmits(['update:modelValue']);
+
+const changeColor = () => {
+  emit('update:modelValue', {
+    id: props.id,
+    name: props.name,
+    value: data.colorReplacements,
+  });
+};
+
+const data = reactive<{
+  colorReplacements: ColorReplacement[];
+  changeColorDebounce: DebounceHandle;
+  styleThemeKeys: typeof STYLE_THEME_KEYS;
+}>({
+  colorReplacements: cloneDeep(props.value),
+  changeColorDebounce: debounce(changeColor, DEBOUNCE_WAIT_IN_MS),
+  styleThemeKeys: STYLE_THEME_KEYS,
+});
+
+watch(
+  () => props.value,
+  (newVal: ColorReplacement[]) => {
+    data.colorReplacements = cloneDeep(newVal);
   },
-  mixins: [ColorReplacementsFieldMixin],
+);
+
+const selectedColor = computed(
+  () => data.colorReplacements[0]?.replacementColor,
+);
+
+const isOptionColorMatched = computed(() =>
+  data.colorReplacements?.every((x) => isColorMatched(x.replacementColor)),
+);
+
+const toggleIdSuffix = computed(() =>
+  props.toggleUniqueId ? `-${props.toggleUniqueId}` : '',
+);
+
+const onColorPickerInput = (
+  color: UpdateItemValuePayload<string>,
+  index: number,
+) => {
+  if (color) {
+    if (typeof color.value === 'string') {
+      data.colorReplacements[index].replacementColor = color.value;
+    }
+  }
+
+  data.changeColorDebounce();
+};
+
+const onColorPickerInputDropdown = (color: string) => {
+  if (typeof color === 'string') {
+    data.colorReplacements.forEach((c) => {
+      c.replacementColor = color;
+    });
+  }
+
+  data.changeColorDebounce();
+};
+
+const onColorMatchToggled = (value: boolean) => {
+  if (value) {
+    data.colorReplacements.forEach((x) => {
+      x.replacementColor = STYLE_THEME_KEYS.LogoTextColor;
+    });
+  } else {
+    data.colorReplacements.forEach((x) => {
+      x.replacementColor = x.originalColor;
+    });
+  }
+
+  data.changeColorDebounce();
 };
 </script>