@designcrowd/library.brand-page 5.18.4 → 5.18.6-ast-padding-1

package/src/brand-page/utils/migration/migration-16.test.ts

@@ -0,0 +1,319 @@
+import { describe, test, expect } from 'vitest';
+import { migration16 } from './migration-16';
+import type { MigrationData, MigrationOptions } from '../migration.util';
+import { STYLE_THEME_KEYS, NAVIGATION_DISPLAY } from '../../constants';
+import { NavigationDesktop } from '../../models';
+
+const createMigrationData = (brandPageModel: any): MigrationData => ({
+  brandPageModel,
+  useOldLogoRenderSize: false,
+});
+
+// The sub nav default is applied when content is first materialised — a template
+// load, the create-draft flow, or the admin maker (isUserDraft === false). An
+// existing user draft already carries its resolved value, so it is skipped.
+const APPLY_DEFAULTS: MigrationOptions = {
+  isUserDraft: false,
+  isServerRender: false,
+};
+const EXISTING_DRAFT_SKIP: MigrationOptions = {
+  isUserDraft: true,
+  isServerRender: false,
+};
+
+const desktopNav = (displayType: string, overrides: any = {}) => ({
+  pageHeaderDesktop: {
+    navigation: {
+      displayType,
+      defaultButtonStyle: {},
+      hamburgerMenuStyle: { defaultButtonStyle: {} },
+      ...overrides,
+    },
+  },
+});
+
+describe('migration16', () => {
+  test('sets color matched sub nav bg for TAB_2 using the top-level styles', async () => {
+    const model = desktopNav(NAVIGATION_DISPLAY.TAB_2, {
+      defaultButtonStyle: { color: STYLE_THEME_KEYS.LogoTextColor },
+    });
+
+    const result = await migration16(
+      createMigrationData(model),
+      APPLY_DEFAULTS,
+    );
+
+    expect(
+      result.brandPageModel.pageHeaderDesktop.navigation.subNavBackgroundColor,
+    ).toBe(STYLE_THEME_KEYS.LogoBackgroundColor);
+  });
+
+  test('sets color matched sub nav bg on hamburgerMenuStyle when unset (vice versa: logo bg text -> logo text sub nav)', async () => {
+    const model = desktopNav(NAVIGATION_DISPLAY.HAMBURGER_1, {
+      hamburgerMenuStyle: {
+        defaultButtonStyle: { color: STYLE_THEME_KEYS.LogoBackgroundColor },
+      },
+    });
+
+    const result = await migration16(
+      createMigrationData(model),
+      APPLY_DEFAULTS,
+    );
+
+    const nav = result.brandPageModel.pageHeaderDesktop.navigation;
+
+    expect(nav.hamburgerMenuStyle.subNavBackgroundColor).toBe(
+      STYLE_THEME_KEYS.LogoTextColor,
+    );
+    // top-level value untouched for hamburger
+    expect(nav.subNavBackgroundColor).toBeUndefined();
+  });
+
+  test('preserves an explicit hex hamburger sub nav even when the text is color matched (admin choice)', async () => {
+    const model = desktopNav(NAVIGATION_DISPLAY.HAMBURGER_1, {
+      hamburgerMenuStyle: {
+        defaultButtonStyle: { color: STYLE_THEME_KEYS.LogoTextColor },
+        subNavBackgroundColor: 'rgb(10,20,30)',
+      },
+    });
+
+    const result = await migration16(
+      createMigrationData(model),
+      APPLY_DEFAULTS,
+    );
+
+    expect(
+      result.brandPageModel.pageHeaderDesktop.navigation.hamburgerMenuStyle
+        .subNavBackgroundColor,
+    ).toBe('rgb(10,20,30)');
+  });
+
+  test('color matches an empty-string hamburger sub nav when the text is color matched', async () => {
+    const model = desktopNav(NAVIGATION_DISPLAY.HAMBURGER_1, {
+      hamburgerMenuStyle: {
+        defaultButtonStyle: { color: STYLE_THEME_KEYS.LogoTextColor },
+        subNavBackgroundColor: '',
+      },
+    });
+
+    const result = await migration16(
+      createMigrationData(model),
+      APPLY_DEFAULTS,
+    );
+
+    expect(
+      result.brandPageModel.pageHeaderDesktop.navigation.hamburgerMenuStyle
+        .subNavBackgroundColor,
+    ).toBe(STYLE_THEME_KEYS.LogoBackgroundColor);
+  });
+
+  test('color matches a transparent hamburger sub nav when the text is color matched', async () => {
+    const model = desktopNav(NAVIGATION_DISPLAY.HAMBURGER_1, {
+      hamburgerMenuStyle: {
+        defaultButtonStyle: { color: STYLE_THEME_KEYS.LogoTextColor },
+        subNavBackgroundColor: 'transparent',
+      },
+    });
+
+    const result = await migration16(
+      createMigrationData(model),
+      APPLY_DEFAULTS,
+    );
+
+    expect(
+      result.brandPageModel.pageHeaderDesktop.navigation.hamburgerMenuStyle
+        .subNavBackgroundColor,
+    ).toBe(STYLE_THEME_KEYS.LogoBackgroundColor);
+  });
+
+  test('leaves an empty hamburger sub nav untouched when text color is not color matched', async () => {
+    const model = desktopNav(NAVIGATION_DISPLAY.HAMBURGER_1, {
+      hamburgerMenuStyle: {
+        defaultButtonStyle: { color: 'rgb(50,50,50)' },
+        subNavBackgroundColor: '',
+      },
+    });
+
+    const result = await migration16(
+      createMigrationData(model),
+      APPLY_DEFAULTS,
+    );
+
+    expect(
+      result.brandPageModel.pageHeaderDesktop.navigation.hamburgerMenuStyle
+        .subNavBackgroundColor,
+    ).toBe('');
+  });
+
+  test('leaves hamburger sub nav unset when default text color is not color matched', async () => {
+    const model = desktopNav(NAVIGATION_DISPLAY.HAMBURGER_2, {
+      hamburgerMenuStyle: {
+        defaultButtonStyle: { color: 'rgb(50,50,50)' },
+      },
+    });
+
+    const result = await migration16(
+      createMigrationData(model),
+      APPLY_DEFAULTS,
+    );
+
+    expect(
+      result.brandPageModel.pageHeaderDesktop.navigation.hamburgerMenuStyle
+        .subNavBackgroundColor,
+    ).toBeUndefined();
+  });
+
+  test('keeps an already color matched value', async () => {
+    const model = desktopNav(NAVIGATION_DISPLAY.HAMBURGER_1, {
+      hamburgerMenuStyle: {
+        defaultButtonStyle: { color: STYLE_THEME_KEYS.LogoTextColor },
+        subNavBackgroundColor: STYLE_THEME_KEYS.LogoBackgroundColor,
+      },
+    });
+
+    const result = await migration16(
+      createMigrationData(model),
+      APPLY_DEFAULTS,
+    );
+
+    expect(
+      result.brandPageModel.pageHeaderDesktop.navigation.hamburgerMenuStyle
+        .subNavBackgroundColor,
+    ).toBe(STYLE_THEME_KEYS.LogoBackgroundColor);
+  });
+
+  test('applies to all display types: TAB_1 color matches when unset', async () => {
+    const model = desktopNav(NAVIGATION_DISPLAY.TAB_1, {
+      defaultButtonStyle: { color: STYLE_THEME_KEYS.LogoTextColor },
+    });
+
+    const result = await migration16(
+      createMigrationData(model),
+      APPLY_DEFAULTS,
+    );
+
+    expect(
+      result.brandPageModel.pageHeaderDesktop.navigation.subNavBackgroundColor,
+    ).toBe(STYLE_THEME_KEYS.LogoBackgroundColor);
+  });
+
+  test('existing user draft is left untouched, even when the font is matched and the sub nav is unset', async () => {
+    const model = desktopNav(NAVIGATION_DISPLAY.HAMBURGER_1, {
+      hamburgerMenuStyle: {
+        defaultButtonStyle: { color: STYLE_THEME_KEYS.LogoTextColor },
+      },
+    });
+
+    const result = await migration16(
+      createMigrationData(model),
+      EXISTING_DRAFT_SKIP,
+    );
+
+    expect(
+      result.brandPageModel.pageHeaderDesktop.navigation.hamburgerMenuStyle
+        .subNavBackgroundColor,
+    ).toBeUndefined();
+  });
+
+  test('existing user draft keeps a deliberate transparent sub nav (not re-matched on load)', async () => {
+    const model = desktopNav(NAVIGATION_DISPLAY.HAMBURGER_1, {
+      hamburgerMenuStyle: {
+        defaultButtonStyle: { color: STYLE_THEME_KEYS.LogoTextColor },
+        subNavBackgroundColor: 'transparent',
+      },
+    });
+
+    const result = await migration16(
+      createMigrationData(model),
+      EXISTING_DRAFT_SKIP,
+    );
+
+    expect(
+      result.brandPageModel.pageHeaderDesktop.navigation.hamburgerMenuStyle
+        .subNavBackgroundColor,
+    ).toBe('transparent');
+  });
+
+  test('migrates mobile navigation as well', async () => {
+    const model = {
+      pageHeaderMobile: {
+        navigation: {
+          displayType: NAVIGATION_DISPLAY.HAMBURGER_3,
+          hamburgerMenuStyle: {
+            defaultButtonStyle: { color: STYLE_THEME_KEYS.LogoTextColor },
+          },
+        },
+      },
+    };
+
+    const result = await migration16(
+      createMigrationData(model),
+      APPLY_DEFAULTS,
+    );
+
+    expect(
+      result.brandPageModel.pageHeaderMobile.navigation.hamburgerMenuStyle
+        .subNavBackgroundColor,
+    ).toBe(STYLE_THEME_KEYS.LogoBackgroundColor);
+  });
+
+  test('handles missing navigation gracefully', async () => {
+    const result = await migration16(createMigrationData({}), APPLY_DEFAULTS);
+
+    expect(result.brandPageModel).toEqual({});
+  });
+
+  // Materialisation path (create-draft / server render): NavigationDesktop is
+  // constructed WITH a theme. The constructor must leave the sub nav unset, else the
+  // baked hex would defeat the migration when the default is applied.
+  const theme = {
+    primaryColor: 'rgb(0,0,0)',
+    secondaryColor: 'rgb(255,255,255)',
+  };
+
+  test('materialised hamburger content (colour-matched font, theme passed) colour-matches the sub nav', async () => {
+    const navigation = new NavigationDesktop(
+      {
+        displayType: NAVIGATION_DISPLAY.HAMBURGER_1,
+        hamburgerMenuStyle: {
+          defaultButtonStyle: { color: STYLE_THEME_KEYS.LogoTextColor },
+        },
+      },
+      theme,
+    );
+
+    expect(navigation.hamburgerMenuStyle.subNavBackgroundColor).toBeUndefined();
+
+    const result = await migration16(
+      createMigrationData({ pageHeaderDesktop: { navigation } }),
+      APPLY_DEFAULTS,
+    );
+
+    expect(
+      result.brandPageModel.pageHeaderDesktop.navigation.hamburgerMenuStyle
+        .subNavBackgroundColor,
+    ).toBe(STYLE_THEME_KEYS.LogoBackgroundColor);
+  });
+
+  test('leaves the sub nav untoggled when the default text color is not colour matched', async () => {
+    const navigation = new NavigationDesktop(
+      {
+        displayType: NAVIGATION_DISPLAY.HAMBURGER_1,
+        hamburgerMenuStyle: {
+          defaultButtonStyle: { color: 'rgb(50,50,50)' },
+        },
+      },
+      theme,
+    );
+
+    const result = await migration16(
+      createMigrationData({ pageHeaderDesktop: { navigation } }),
+      APPLY_DEFAULTS,
+    );
+
+    expect(
+      result.brandPageModel.pageHeaderDesktop.navigation.hamburgerMenuStyle
+        .subNavBackgroundColor,
+    ).toBeUndefined();
+  });
+});

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

@@ -0,0 +1,75 @@
+import type { MigrationData, MigrationOptions } from '../migration.util';
+import {
+  getDefaultSubNavBackgroundColor,
+  isUnsetOrTransparentColor,
+} from '../../models';
+import type {
+  NavigationDesktop,
+  NavigationMobile,
+  NavigationMenuStyles,
+} from '../../models';
+
+/**
+ * Migration 16: default the sub nav background colour to "colour matched" (the opposite
+ * logo colour) when the menu font is itself colour matched and the sub nav has no
+ * deliberate value. The default is applied ONCE, when content is first materialised — a
+ * template load, the create-draft flow, or the admin maker (isUserDraft === false). An
+ * existing user draft already carries its resolved value (including a deliberate
+ * transparent/explicit choice), so it is left untouched.
+ */
+
+// Hamburger keeps its styles on hamburgerMenuStyle; every other nav type uses the
+// top-level navigation styles. (This only locates the styles - the rule itself is uniform.)
+const isHamburger = (displayType: string): boolean =>
+  displayType.includes('hamburger');
+
+const applyDefaultSubNavColorMatch = (
+  navigation: NavigationDesktop | NavigationMobile | undefined,
+): void => {
+  if (!navigation?.displayType) {
+    return;
+  }
+
+  let menuStyles: NavigationMenuStyles | NavigationDesktop | NavigationMobile;
+
+  if (isHamburger(navigation.displayType)) {
+    navigation.hamburgerMenuStyle =
+      navigation.hamburgerMenuStyle ?? ({} as NavigationMenuStyles);
+    menuStyles = navigation.hamburgerMenuStyle;
+  } else {
+    menuStyles = navigation;
+  }
+
+  // Leave a deliberately-set colour (an explicit hex or an already colour-matched key).
+  if (!isUnsetOrTransparentColor(menuStyles.subNavBackgroundColor)) {
+    return;
+  }
+
+  // Only when the menu font is itself colour matched: take the opposite logo colour
+  // (the helper returns undefined when the font is not colour matched).
+  const colorMatchedSubNav = getDefaultSubNavBackgroundColor(
+    menuStyles.defaultButtonStyle?.color,
+  );
+
+  if (colorMatchedSubNav) {
+    menuStyles.subNavBackgroundColor = colorMatchedSubNav;
+  }
+};
+
+export const migration16 = async (
+  migrationResult: MigrationData,
+  options: MigrationOptions,
+): Promise<MigrationData> => {
+  // Skip user drafts (isUserDraft === true) — they already have their value. Only
+  // templates (isUserDraft === false) get the sub nav default.
+  if (options.isUserDraft) {
+    return migrationResult;
+  }
+
+  const { brandPageModel } = migrationResult;
+
+  applyDefaultSubNavColorMatch(brandPageModel.pageHeaderDesktop?.navigation);
+  applyDefaultSubNavColorMatch(brandPageModel.pageHeaderMobile?.navigation);
+
+  return migrationResult;
+};

package/src/brand-page/utils/migration/migration-17.ts

@@ -0,0 +1,73 @@
+import type { MigrationData } from '../migration.util';
+import type {
+  AboutSectionContent,
+  BannerSectionContent,
+  ContactFormContent,
+} from '../../models';
+import {
+  CONTACT_FORM_LAYOUT_DEFAULT_PADDING,
+  aboutDisplayStyleDefaultPadding,
+  bannerDisplayStyleDefaultPadding,
+} from '../../constants';
+
+/**
+ * Padding Control backfill (BP-5699 Tier 2, BP-5700 Store): blocks that already
+ * had hard-coded top/bottom spacing. Backfill that spacing as the block's explicit
+ * topPadding/bottomPadding so existing pages render unchanged once the spacing
+ * moves to the Padding Control sliders. Type-scoped and idempotent — only the
+ * listed types, and only when the value isn't already set.
+ */
+const BLOCK_DEFAULT_PADDING: Partial<Record<string, number>> = {
+  text: 12,
+  'images-section': 32,
+  'social-links': 32,
+  'shapes-section': 32,
+  'booking-section': 32,
+  'shop-section': 16,
+};
+
+export const migration17 = async (
+  migrationResult: MigrationData,
+): Promise<MigrationData> => {
+  const { brandPageModel } = migrationResult;
+
+  brandPageModel.pages.forEach((page) => {
+    page.contents.forEach((content) => {
+      // Contact Form, Banner and About previously varied their hard-coded spacing by
+      // layout/display style (full-bleed image layouts had no outer padding), so they're
+      // keyed by that rather than a single per-type value.
+      let value: number | undefined;
+
+      if (content.type === 'contact-form') {
+        value =
+          CONTACT_FORM_LAYOUT_DEFAULT_PADDING[
+            (content as ContactFormContent).layoutStyle ?? ''
+          ];
+      } else if (content.type === 'banner-section') {
+        value = bannerDisplayStyleDefaultPadding(
+          (content as BannerSectionContent).displayStyle,
+        );
+      } else if (content.type === 'about-section') {
+        value = aboutDisplayStyleDefaultPadding(
+          (content as AboutSectionContent).displayStyle,
+        );
+      } else {
+        value = BLOCK_DEFAULT_PADDING[content.type];
+      }
+
+      if (value === undefined) {
+        return;
+      }
+
+      if (content.topPadding === undefined) {
+        content.topPadding = value;
+      }
+
+      if (content.bottomPadding === undefined) {
+        content.bottomPadding = value;
+      }
+    });
+  });
+
+  return migrationResult;
+};

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

@@ -24,6 +24,12 @@ import {
   createInitialTestimonialSectionContent,
 } from '@brand-page-maker/models';
 import {
+  ALIGN_CARD_CENTER_IMAGE,
+  ALIGN_LEFT_FULL_IMAGE,
+  ALIGN_RIGHT_FULL_IMAGE,
+  ALIGN_TOP_FULL_IMAGE,
+  ALIGN_BOTTOM_FULL_IMAGE,
+  ALIGN_MIDDLE_FULL_IMAGE,
   DEFAULT_LETTER_SPACING,
   LINE_HEIGHT_BODY,
   LINE_HEIGHT_HEADINGS,
@@ -1464,6 +1470,145 @@ describe('migration.util', () => {
       expect(content.layoutStyle).toBe(TEXT_ONLY);
     });
 
+    test('migration17 should backfill contact form padding from its layout style', async () => {
+      const model = await migrateBrandPageModel(getBsModel(), {
+        isUserDraft: false,
+        isServerRender: false,
+      });
+
+      const collapsible = model.brandPageModel.pages[3]
+        .contents[0] as ContactFormContent;
+      const textOnly = model.brandPageModel.pages[3]
+        .contents[1] as ContactFormContent;
+
+      expect(collapsible.topPadding).toBe(0);
+      expect(collapsible.bottomPadding).toBe(0);
+      expect(textOnly.topPadding).toBe(32);
+      expect(textOnly.bottomPadding).toBe(32);
+    });
+
+    test.each([
+      [ALIGN_LEFT_FULL_IMAGE],
+      [ALIGN_RIGHT_FULL_IMAGE],
+      [ALIGN_CARD_CENTER_IMAGE],
+    ])(
+      'migration17 should backfill zero padding for the %s contact form layout',
+      async (layoutStyle) => {
+        const brandPageModel = getBsModel();
+
+        (
+          brandPageModel.pages[3].contents[1] as ContactFormContent
+        ).layoutStyle = layoutStyle;
+
+        const model = await migrateBrandPageModel(brandPageModel, {
+          isUserDraft: false,
+          isServerRender: false,
+        });
+
+        const content = model.brandPageModel.pages[3]
+          .contents[1] as ContactFormContent;
+
+        expect(content.topPadding).toBe(0);
+        expect(content.bottomPadding).toBe(0);
+      },
+    );
+
+    test('migration17 should not overwrite contact form padding that is already set', async () => {
+      const brandPageModel = getBsModel();
+
+      (brandPageModel.pages[3].contents[1] as ContactFormContent).topPadding =
+        10;
+
+      const model = await migrateBrandPageModel(brandPageModel, {
+        isUserDraft: false,
+        isServerRender: false,
+      });
+
+      const content = model.brandPageModel.pages[3]
+        .contents[1] as ContactFormContent;
+
+      expect(content.topPadding).toBe(10);
+      expect(content.bottomPadding).toBe(32);
+    });
+
+    test('migration17 should backfill 32 padding for standard banner display styles', async () => {
+      const model = await migrateBrandPageModel(getBsModel(), {
+        isUserDraft: false,
+        isServerRender: false,
+      });
+
+      // pages[0].contents[0] is a 'centered' banner (standard, not full-bleed).
+      const banner = model.brandPageModel.pages[0]
+        .contents[0] as BannerSectionContent;
+
+      expect(banner.topPadding).toBe(32);
+      expect(banner.bottomPadding).toBe(32);
+    });
+
+    test.each([
+      [ALIGN_LEFT_FULL_IMAGE],
+      [ALIGN_RIGHT_FULL_IMAGE],
+      [ALIGN_TOP_FULL_IMAGE],
+      [ALIGN_BOTTOM_FULL_IMAGE],
+      [ALIGN_MIDDLE_FULL_IMAGE],
+    ])(
+      'migration17 should backfill zero padding for the %s full-bleed banner style',
+      async (displayStyle) => {
+        const brandPageModel = getBsModel();
+
+        (
+          brandPageModel.pages[0].contents[0] as BannerSectionContent
+        ).displayStyle = displayStyle;
+
+        const model = await migrateBrandPageModel(brandPageModel, {
+          isUserDraft: false,
+          isServerRender: false,
+        });
+
+        const banner = model.brandPageModel.pages[0]
+          .contents[0] as BannerSectionContent;
+
+        expect(banner.topPadding).toBe(0);
+        expect(banner.bottomPadding).toBe(0);
+      },
+    );
+
+    test('migration17 should backfill 32 padding for standard about display styles', async () => {
+      const model = await migrateBrandPageModel(getBsModel(), {
+        isUserDraft: false,
+        isServerRender: false,
+      });
+
+      // pages[0].contents[2] is a 'centered' about section (standard, not full-image).
+      const about = model.brandPageModel.pages[0]
+        .contents[2] as AboutSectionContent;
+
+      expect(about.topPadding).toBe(32);
+      expect(about.bottomPadding).toBe(32);
+    });
+
+    test.each([[ALIGN_LEFT_FULL_IMAGE], [ALIGN_RIGHT_FULL_IMAGE]])(
+      'migration17 should backfill zero padding for the %s full-image about style',
+      async (displayStyle) => {
+        const brandPageModel = getBsModel();
+
+        (
+          brandPageModel.pages[0].contents[2] as AboutSectionContent
+        ).displayStyle = displayStyle;
+
+        const model = await migrateBrandPageModel(brandPageModel, {
+          isUserDraft: false,
+          isServerRender: false,
+        });
+
+        const about = model.brandPageModel.pages[0]
+          .contents[2] as AboutSectionContent;
+
+        expect(about.topPadding).toBe(0);
+        expect(about.bottomPadding).toBe(0);
+      },
+    );
+
     test('migrateNewLogoLogic should migrate logoDraftToken and logoVariation', () => {
       const oldTemplate: BrandPageData = {
         pages: [

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

@@ -18,6 +18,8 @@ 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';
+import { migration17 } from './migration/migration-17';
 
 export interface MigrationData {
   brandPageModel: BrandPageModel;
@@ -141,6 +143,23 @@ const MIGRATION_TABLE = [
     migrateFn: migration15,
     description: 'Adding default mediaOverlayStyle to background styles',
   },
+  {
+    version: 16,
+    migrateFn: migration16,
+    runAlways: true,
+    description:
+      'Default sub nav background color to color match on for TAB_2 and hamburger navs depending on font color only on first load flow',
+  },
+  {
+    version: 17,
+    migrateFn: migration17,
+    // runAlways: re-apply on every load (ticket stack) so already-migrated pages
+    // pick up newly-added block defaults (e.g. Store) without a new migration.
+    // Idempotent — only backfills when topPadding/bottomPadding aren't already set.
+    runAlways: true,
+    description:
+      'Padding Control backfill (BP-5699 Tier 2 + BP-5700 Store): backfill existing top/bottom spacing as explicit padding for text (12px), images/social links/shapes/booking (32px), store (16px), contact form (per layout), banner and about (per display style)',
+  },
 ] as MigrationTableItem[];
 
 export const GetLatestModelVersion = () =>

package/src/brand-page-maker/components/color-palette/BpColorPalette.vue

@@ -27,8 +27,9 @@
           </div>
           <button
             v-else
-            :style="generateStyle(color)"
+            :style="color === 'transparent' ? undefined : generateStyle(color)"
             class="c-color tw-bg-transparent tw-block tw-w-full tw-h-full tw-border-none tw-rounded tw-cursor-pointer tw-transition-all tw-duration-300 tw-ease-out"
+            :class="{ 'c-transparent': color === 'transparent' }"
             @click="onClick"
           />
         </div>
@@ -197,12 +198,13 @@ const clickOutside = (event: MouseEvent): void => {
   box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
   transform: scale(1.025);
 }
-.c-color {
-  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
-}
-.c-color:hover {
-  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
-  transform: scale(1.025);
+.c-transparent {
+  background: linear-gradient(
+    135deg,
+    transparent calc(50% - 1.5px),
+    red 50%,
+    transparent calc(50% + 1.5px)
+  );
 }
 .maker-color-palette__popup {
   position: absolute;