@designcrowd/library.brand-page 5.18.0 → 5.18.1-ast-subnav-1

package/lib/src/{CreatedOnBrandCrowd-de-de-xmkupPus.js → CreatedOnBrandCrowd-de-de-BVQ6v5iF.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-Ck7EdTtb.js → CreatedOnBrandCrowd-en-us-BAXsbII6.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-BC8sJuDH.js → CreatedOnBrandCrowd-es-es-BKjwXAV9.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-CN-UBe1q.js → CreatedOnBrandCrowd-fr-ca-DgJpb30Y.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-CN-UBe1q.js → CreatedOnBrandCrowd-fr-fr-DgJpb30Y.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-CajQyNkx.js → CreatedOnBrandCrowd-pt-br-BfC500bz.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-CajQyNkx.js → CreatedOnBrandCrowd-pt-pt-BfC500bz.js}

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

package/lib/src/{CreatedOnDcom-de-de-BRCNMmDq.js → CreatedOnDcom-de-de-DG8dKY-w.js}

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

package/lib/src/{CreatedOnDcom-en-us-BzQDtZhc.js → CreatedOnDcom-en-us-CwLYNttA.js}

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

package/lib/src/{CreatedOnDcom-es-es-D-qAM4Cd.js → CreatedOnDcom-es-es-D0TOef2a.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-CZ1irFOc.js → CreatedOnDcom-fr-ca-Vd8SwzhX.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-Gb5BCF0N.js → CreatedOnDcom-fr-fr-DWMTg7RN.js}

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

package/lib/src/{CreatedOnDcom-pt-br-CAQV0q6o.js → CreatedOnDcom-pt-br-6zSoonTF.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-D6tQdQFh.js → CreatedOnDcom-pt-pt-G1tInrxA.js}

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

package/lib/src/brand-page/models/navigation-styles.model.d.ts

@@ -8,6 +8,7 @@ export declare class NavigationMenuStyles {
     subNavBackgroundColor?: string;
     constructor(options: Partial<NavigationMenuStyles>, defaultOptions: Partial<NavigationMenuStyles>);
 }
+export declare const getDefaultSubNavBackgroundColor: (defaultTextColor: string | undefined) => string | undefined;
 type NavigationStylesOptionType = Partial<Omit<NavigationDesktop | NavigationMobile, 'hamburgerMenuStyle'>> & {
     hamburgerMenuStyle?: Partial<NavigationMenuStyles>;
 };

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

@@ -1,4 +1,4 @@
-import { DEFAULT_FONT_FAMILY_KEY, DEFAULT_FONT_STYLE, DEFAULT_TEXT_ALIGN, DEFAULT_TEXT_DECORATION, FONT_FAMILY_CONFIGS, FONT_SIZE_BODY, FONT_WEIGHT_NORMAL, defaultHamburgerNavigation, NAVIGATION_DISPLAY, } from '../constants';
+import { DEFAULT_FONT_FAMILY_KEY, DEFAULT_FONT_STYLE, DEFAULT_TEXT_ALIGN, DEFAULT_TEXT_DECORATION, FONT_FAMILY_CONFIGS, FONT_SIZE_BODY, FONT_WEIGHT_NORMAL, STYLE_THEME_KEYS, defaultHamburgerNavigation, NAVIGATION_DISPLAY, } from '../constants';
 import { VIEWPORTS } from './index';
 import { TEXT_STYLE_TYPES } from './index';
 import cloneDeep from 'lodash.clonedeep';
@@ -15,6 +15,17 @@ export class NavigationMenuStyles {
             options.subNavBackgroundColor ?? defaultOptions.subNavBackgroundColor;
     }
 }
+export const getDefaultSubNavBackgroundColor = (defaultTextColor) => {
+    if (defaultTextColor === STYLE_THEME_KEYS.LogoTextColor ||
+        defaultTextColor === STYLE_THEME_KEYS.LogoTextMultiColor) {
+        return STYLE_THEME_KEYS.LogoBackgroundColor;
+    }
+    if (defaultTextColor === STYLE_THEME_KEYS.LogoBackgroundColor ||
+        defaultTextColor === STYLE_THEME_KEYS.LogoBackgroundMultiColor) {
+        return STYLE_THEME_KEYS.LogoTextColor;
+    }
+    return undefined;
+};
 class NavigationStyles {
     displayType;
     renderAfterLogo;
@@ -59,7 +70,9 @@ class NavigationStyles {
             borderColor: theme?.primaryColor,
         }, option?.selectedButtonStyle || {});
         this.iconStyle = Object.assign({}, option?.iconStyle || {});
-        this.subNavBackgroundColor = option?.subNavBackgroundColor;
+        this.subNavBackgroundColor =
+            option?.subNavBackgroundColor ??
+                getDefaultSubNavBackgroundColor(this.defaultButtonStyle.color);
         this.isLogoVisible = option?.isLogoVisible || true;
         this.hamburgerMenuStyle = new NavigationMenuStyles(option?.hamburgerMenuStyle || {}, {
             defaultButtonStyle: {

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

@@ -0,0 +1,2 @@
+import type { MigrationData } from '../migration.util';
+export declare const migration16: (migrationResult: MigrationData) => Promise<MigrationData>;

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

@@ -0,0 +1,52 @@
+import { STYLE_THEME_KEYS, NAVIGATION_DISPLAY } from '../../constants';
+import { getDefaultSubNavBackgroundColor } from '../../models';
+/**
+ * Migration 16: Default the sub nav background color to "color match on" for
+ * existing sites using the TAB_2 ("nav 2") or any hamburger display style.
+ *
+ * Before the sub nav background colour feature shipped, these styles defaulted
+ * to an explicit colour (e.g. the theme secondary colour for hamburger). This
+ * migration brings existing sites in line with the new default by setting the
+ * sub nav background colour to a logo theme key (color matched), unless the
+ * value is already color matched - in which case the user's choice is kept.
+ */
+const COLOR_MATCH_DISPLAY_TYPES = [
+    NAVIGATION_DISPLAY.TAB_2,
+    NAVIGATION_DISPLAY.HAMBURGER_1,
+    NAVIGATION_DISPLAY.HAMBURGER_2,
+    NAVIGATION_DISPLAY.HAMBURGER_3,
+    NAVIGATION_DISPLAY.HAMBURGER_4,
+];
+const isColorMatched = (color) => !!color && Object.values(STYLE_THEME_KEYS).includes(color);
+const applyDefaultColorMatch = (navigation) => {
+    if (!navigation?.displayType) {
+        return;
+    }
+    if (!COLOR_MATCH_DISPLAY_TYPES.includes(navigation.displayType)) {
+        return;
+    }
+    // Mirror NavigationStyleSettings.getMenuStyles: hamburger styles live on the
+    // hamburgerMenuStyle, every other display type uses the top-level styles.
+    let menuStyles;
+    if (navigation.displayType.includes('hamburger')) {
+        navigation.hamburgerMenuStyle =
+            navigation.hamburgerMenuStyle ?? {};
+        menuStyles = navigation.hamburgerMenuStyle;
+    }
+    else {
+        menuStyles = navigation;
+    }
+    // Respect an existing color matched value so we don't clobber a deliberate choice.
+    if (isColorMatched(menuStyles.subNavBackgroundColor)) {
+        return;
+    }
+    menuStyles.subNavBackgroundColor =
+        getDefaultSubNavBackgroundColor(menuStyles.defaultButtonStyle?.color) ??
+            STYLE_THEME_KEYS.LogoTextColor;
+};
+export const migration16 = async (migrationResult) => {
+    const { brandPageModel } = migrationResult;
+    applyDefaultColorMatch(brandPageModel.pageHeaderDesktop?.navigation);
+    applyDefaultColorMatch(brandPageModel.pageHeaderMobile?.navigation);
+    return migrationResult;
+};

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

@@ -18,6 +18,7 @@ import { migration12_1 } from './migration/migration-12_1';
 import { migration13 } from './migration/migration-13';
 import { migration14 } from './migration/migration-14';
 import { migration15 } from './migration/migration-15';
+import { migration16 } from './migration/migration-16';
 const MIGRATION_TABLE = [
     {
         version: 1,
@@ -115,6 +116,11 @@ const MIGRATION_TABLE = [
         migrateFn: migration15,
         description: 'Adding default mediaOverlayStyle to background styles',
     },
+    {
+        version: 16,
+        migrateFn: migration16,
+        description: 'Default sub nav background color to color match on for existing TAB_2 and hamburger navs',
+    },
 ];
 export const GetLatestModelVersion = () => Math.max(...MIGRATION_TABLE.map((x) => x.version));
 export const migrateBrandPageModel = async (brandPageModel, options) => {

package/lib/src/css/library.brand-page-brandCrowd.min.css

@@ -7980,27 +7980,35 @@ body {
           transform: scale(1.025);
 }
 
-.c-color[data-v-4dd5f95d] {
+.c-color[data-v-1d49adfe] {
   -webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
           box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
 }
-.c-color[data-v-4dd5f95d]:hover {
+.c-color[data-v-1d49adfe]:hover {
   -webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
           box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
   -webkit-transform: scale(1.025);
           transform: scale(1.025);
 }
-.c-color[data-v-4dd5f95d] {
+.c-color[data-v-1d49adfe] {
   -webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
           box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
 }
-.c-color[data-v-4dd5f95d]:hover {
+.c-color[data-v-1d49adfe]:hover {
   -webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
           box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
   -webkit-transform: scale(1.025);
           transform: scale(1.025);
 }
-.maker-color-palette__popup[data-v-4dd5f95d] {
+.c-transparent[data-v-1d49adfe] {
+  background: linear-gradient(
+    135deg,
+    transparent calc(50% - 1.5px),
+    red 50%,
+    transparent calc(50% + 1.5px)
+  );
+}
+.maker-color-palette__popup[data-v-1d49adfe] {
   position: absolute;
   padding: 0.625rem;
   background: white;
@@ -8014,13 +8022,13 @@ body {
   height: fit-content;
   max-width: 100%;
 }
-.maker-color-palette__widget-body[data-v-4dd5f95d] {
+.maker-color-palette__widget-body[data-v-1d49adfe] {
   height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
   padding: 0.625rem;
 }
-.picker-button[data-v-4dd5f95d] {
+.picker-button[data-v-1d49adfe] {
   width: 100%;
   border: 1px solid #878787;
   text-transform: uppercase;
@@ -8029,14 +8037,14 @@ body {
   cursor: pointer;
 }
 @media print, screen and (min-width: 40em) {
-.maker-color-palette__popup[data-v-4dd5f95d] {
+.maker-color-palette__popup[data-v-1d49adfe] {
     bottom: initial;
     height: auto;
     top: 1.25rem;
     width: calc(100% - 36px);
 }
 }
-.maker-text-color__icon[data-v-4dd5f95d] {
+.maker-text-color__icon[data-v-1d49adfe] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -8050,7 +8058,7 @@ body {
   height: 32px;
   margin-top: 15px;
 }
-.maker-text-color__icon .active[data-v-4dd5f95d] {
+.maker-text-color__icon .active[data-v-1d49adfe] {
   font-weight: bold;
   background: #e3e3e3;
 }
@@ -8991,7 +8999,7 @@ input[type='number'][data-v-b7154ee1] {
   color: #686e7d;
 }
 
-.page-settings-section-style_option-title[data-v-e6909f88] {
+.page-settings-section-style_option-title[data-v-c93e7fd0] {
     font-family: Lato, Helvetica, sans-serif;
     font-size: 0.875rem;
     line-height: 1.25rem;

package/lib/src/css/library.brand-page-brandPage.min.css

@@ -8313,27 +8313,35 @@ body {
           transform: scale(1.025);
 }
 
-.c-color[data-v-4dd5f95d] {
+.c-color[data-v-1d49adfe] {
   -webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
           box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
 }
-.c-color[data-v-4dd5f95d]:hover {
+.c-color[data-v-1d49adfe]:hover {
   -webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
           box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
   -webkit-transform: scale(1.025);
           transform: scale(1.025);
 }
-.c-color[data-v-4dd5f95d] {
+.c-color[data-v-1d49adfe] {
   -webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
           box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
 }
-.c-color[data-v-4dd5f95d]:hover {
+.c-color[data-v-1d49adfe]:hover {
   -webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
           box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
   -webkit-transform: scale(1.025);
           transform: scale(1.025);
 }
-.maker-color-palette__popup[data-v-4dd5f95d] {
+.c-transparent[data-v-1d49adfe] {
+  background: linear-gradient(
+    135deg,
+    transparent calc(50% - 1.5px),
+    red 50%,
+    transparent calc(50% + 1.5px)
+  );
+}
+.maker-color-palette__popup[data-v-1d49adfe] {
   position: absolute;
   padding: 0.625rem;
   background: white;
@@ -8347,13 +8355,13 @@ body {
   height: fit-content;
   max-width: 100%;
 }
-.maker-color-palette__widget-body[data-v-4dd5f95d] {
+.maker-color-palette__widget-body[data-v-1d49adfe] {
   height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
   padding: 0.625rem;
 }
-.picker-button[data-v-4dd5f95d] {
+.picker-button[data-v-1d49adfe] {
   width: 100%;
   border: 1px solid #878787;
   text-transform: uppercase;
@@ -8362,14 +8370,14 @@ body {
   cursor: pointer;
 }
 @media print, screen and (min-width: 40em) {
-.maker-color-palette__popup[data-v-4dd5f95d] {
+.maker-color-palette__popup[data-v-1d49adfe] {
     bottom: initial;
     height: auto;
     top: 1.25rem;
     width: calc(100% - 36px);
 }
 }
-.maker-text-color__icon[data-v-4dd5f95d] {
+.maker-text-color__icon[data-v-1d49adfe] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -8383,7 +8391,7 @@ body {
   height: 32px;
   margin-top: 15px;
 }
-.maker-text-color__icon .active[data-v-4dd5f95d] {
+.maker-text-color__icon .active[data-v-1d49adfe] {
   font-weight: bold;
   background: #e3e3e3;
 }
@@ -9324,7 +9332,7 @@ input[type='number'][data-v-b7154ee1] {
   color: #686e7d;
 }
 
-.page-settings-section-style_option-title[data-v-e6909f88] {
+.page-settings-section-style_option-title[data-v-c93e7fd0] {
     font-family: Lato, Helvetica, sans-serif;
     font-size: 0.875rem;
     line-height: 1.25rem;

package/lib/src/css/library.brand-page-designCom.min.css

@@ -8010,27 +8010,35 @@ body {
           transform: scale(1.025);
 }
 
-.c-color[data-v-4dd5f95d] {
+.c-color[data-v-1d49adfe] {
   -webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
           box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
 }
-.c-color[data-v-4dd5f95d]:hover {
+.c-color[data-v-1d49adfe]:hover {
   -webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
           box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
   -webkit-transform: scale(1.025);
           transform: scale(1.025);
 }
-.c-color[data-v-4dd5f95d] {
+.c-color[data-v-1d49adfe] {
   -webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
           box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
 }
-.c-color[data-v-4dd5f95d]:hover {
+.c-color[data-v-1d49adfe]:hover {
   -webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
           box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
   -webkit-transform: scale(1.025);
           transform: scale(1.025);
 }
-.maker-color-palette__popup[data-v-4dd5f95d] {
+.c-transparent[data-v-1d49adfe] {
+  background: linear-gradient(
+    135deg,
+    transparent calc(50% - 1.5px),
+    red 50%,
+    transparent calc(50% + 1.5px)
+  );
+}
+.maker-color-palette__popup[data-v-1d49adfe] {
   position: absolute;
   padding: 0.625rem;
   background: white;
@@ -8044,13 +8052,13 @@ body {
   height: fit-content;
   max-width: 100%;
 }
-.maker-color-palette__widget-body[data-v-4dd5f95d] {
+.maker-color-palette__widget-body[data-v-1d49adfe] {
   height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
   padding: 0.625rem;
 }
-.picker-button[data-v-4dd5f95d] {
+.picker-button[data-v-1d49adfe] {
   width: 100%;
   border: 1px solid #878787;
   text-transform: uppercase;
@@ -8059,14 +8067,14 @@ body {
   cursor: pointer;
 }
 @media print, screen and (min-width: 40em) {
-.maker-color-palette__popup[data-v-4dd5f95d] {
+.maker-color-palette__popup[data-v-1d49adfe] {
     bottom: initial;
     height: auto;
     top: 1.25rem;
     width: calc(100% - 36px);
 }
 }
-.maker-text-color__icon[data-v-4dd5f95d] {
+.maker-text-color__icon[data-v-1d49adfe] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -8080,7 +8088,7 @@ body {
   height: 32px;
   margin-top: 15px;
 }
-.maker-text-color__icon .active[data-v-4dd5f95d] {
+.maker-text-color__icon .active[data-v-1d49adfe] {
   font-weight: bold;
   background: #e3e3e3;
 }
@@ -9021,7 +9029,7 @@ input[type='number'][data-v-b7154ee1] {
   color: #686e7d;
 }
 
-.page-settings-section-style_option-title[data-v-e6909f88] {
+.page-settings-section-style_option-title[data-v-c93e7fd0] {
     font-family: Inter, Helvetica, sans-serif;
     font-size: 0.875rem;
     line-height: 1.25rem;

package/lib/src/css/library.brand-page-preview.min.css

@@ -7724,27 +7724,35 @@ to {
           transform: scale(1.025);
 }
 
-.bp .c-color[data-v-4dd5f95d] {
+.bp .c-color[data-v-1d49adfe] {
   -webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
           box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
 }
-.bp .c-color[data-v-4dd5f95d]:hover {
+.bp .c-color[data-v-1d49adfe]:hover {
   -webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
           box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
   -webkit-transform: scale(1.025);
           transform: scale(1.025);
 }
-.bp .c-color[data-v-4dd5f95d] {
+.bp .c-color[data-v-1d49adfe] {
   -webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
           box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
 }
-.bp .c-color[data-v-4dd5f95d]:hover {
+.bp .c-color[data-v-1d49adfe]:hover {
   -webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
           box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
   -webkit-transform: scale(1.025);
           transform: scale(1.025);
 }
-.bp .maker-color-palette__popup[data-v-4dd5f95d] {
+.bp .c-transparent[data-v-1d49adfe] {
+  background: linear-gradient(
+    135deg,
+    transparent calc(50% - 1.5px),
+    red 50%,
+    transparent calc(50% + 1.5px)
+  );
+}
+.bp .maker-color-palette__popup[data-v-1d49adfe] {
   position: absolute;
   padding: 0.625rem;
   background: white;
@@ -7758,13 +7766,13 @@ to {
   height: fit-content;
   max-width: 100%;
 }
-.bp .maker-color-palette__widget-body[data-v-4dd5f95d] {
+.bp .maker-color-palette__widget-body[data-v-1d49adfe] {
   height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
   padding: 0.625rem;
 }
-.bp .picker-button[data-v-4dd5f95d] {
+.bp .picker-button[data-v-1d49adfe] {
   width: 100%;
   border: 1px solid #878787;
   text-transform: uppercase;
@@ -7773,14 +7781,14 @@ to {
   cursor: pointer;
 }
 @media print, screen and (min-width: 40em) {
-.bp .maker-color-palette__popup[data-v-4dd5f95d] {
+.bp .maker-color-palette__popup[data-v-1d49adfe] {
     bottom: initial;
     height: auto;
     top: 1.25rem;
     width: calc(100% - 36px);
 }
 }
-.bp .maker-text-color__icon[data-v-4dd5f95d] {
+.bp .maker-text-color__icon[data-v-1d49adfe] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -7794,7 +7802,7 @@ to {
   height: 32px;
   margin-top: 15px;
 }
-.bp .maker-text-color__icon .active[data-v-4dd5f95d] {
+.bp .maker-text-color__icon .active[data-v-1d49adfe] {
   font-weight: bold;
   background: #e3e3e3;
 }
@@ -8735,7 +8743,7 @@ input[type='number'][data-v-b7154ee1] {
   color: #686e7d;
 }
 
-.bp .page-settings-section-style_option-title[data-v-e6909f88] {
+.bp .page-settings-section-style_option-title[data-v-c93e7fd0] {
     font-family: Lato, Helvetica, sans-serif;
     font-size: 0.875rem;
     line-height: 1.25rem;