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

package/src/brand-page-maker/constants/config-settings-constant.ts

@@ -201,6 +201,34 @@ const SETTINGS_STYLE_FIElD_GROUPS = (): ContentSettingsFieldGroup[] => {
   ];
 };
 
+/**
+ * Shared Top/Bottom padding sliders (BP-5687). Reuses the same `slider` control
+ * as the Divider block (track + editable number box), range 0–100, continuous.
+ * Spread into a block's `fields` to expose the Padding Control on that block.
+ * Pass the Style field-group id for blocks that use grouped panels.
+ */
+const PADDING_CONTROL_FIELDS = (
+  groupId?: string,
+): {
+  topPadding: ContentSettingsField<Content>;
+  bottomPadding: ContentSettingsField<Content>;
+} => ({
+  topPadding: {
+    type: 'slider',
+    title: contentSettingsTr(`topPaddingTitle`),
+    minLength: 0,
+    maxLength: 100,
+    groupId,
+  },
+  bottomPadding: {
+    type: 'slider',
+    title: contentSettingsTr(`bottomPaddingTitle`),
+    minLength: 0,
+    maxLength: 100,
+    groupId,
+  },
+});
+
 const DEFAULT_TITLE_STYLE_SETTINGS_FILED =
   (): ContentSettingsField<Content> => ({
     type: 'text-style',
@@ -1097,6 +1125,7 @@ export const IMAGE_GALLERY_CONTENT_SETTINGS_CONFIG = (): ContentSettingsConfig<
       defaultValue: false,
       visibilityAssessor: imageGalleryFieldVisibilityAssessor,
     },
+    ...PADDING_CONTROL_FIELDS(),
   },
   isEnabled: true,
   isLocked: (features) => !features.canAddImageContents,
@@ -1136,6 +1165,7 @@ export const VIDEO_CONTENT_SETTINGS_CONFIG = (): ContentSettingsConfig<
       label: contentSettingsTr(`muteLabel`),
       valueConvertor: videoContentStateConvertor,
     },
+    ...PADDING_CONTROL_FIELDS(),
   },
   isEnabled: true,
   isLocked: (features) => !features.canAddVideoContents,
@@ -1278,6 +1308,7 @@ export const TEXT_CONTENT_SETTINGS_CONFIG = (): ContentSettingsConfig<
       variant: 'icon',
       visibilityAssessor: brandSiteTypeVisibilityAssessor,
     },
+    ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
     backgroundColor: {
       type: 'color',
       defaultValue: {},
@@ -1736,6 +1767,7 @@ export const MAP_CONTENT_SETTINGS_CONFIG =
         type: 'address',
         title: contentSettingsTr(`addressTitle`),
       },
+      ...PADDING_CONTROL_FIELDS(),
     },
     isEnabled: true,
     isLocked: (features) => !features.canAddMapContents,
@@ -1787,6 +1819,7 @@ export const MAILING_LIST_CONTENT_SETTINGS_CONFIG =
       },
       titleStyle: DEFAULT_TITLE_STYLE_SETTINGS_FILED_WITH_TITLE(),
       buttonTextStyle: DEFAULT_BUTTON_TEXT_STYLE_FIELD(),
+      ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
     },
     isEnabled: true,
     isLocked: false,
@@ -1971,6 +2004,7 @@ export const REQUEST_PAYMENT_CONTENT_SETTINGS_CONFIG =
         defaultValue: {},
         label: contentSettingsTr(`buttonTextStyleLabel`),
       },
+      ...PADDING_CONTROL_FIELDS(REQUEST_PAYMENT_GROUPS.style),
     },
     isEnabled: (features) => features.canAddRequestPaymentContents,
     isLocked: false,
@@ -2038,6 +2072,7 @@ export const SUPPORT_ME_CONTENT_SETTINGS_CONFIG =
         label: contentSettingsTr(`itemStyleLabel`),
       },
       buttonTextStyle: DEFAULT_BUTTON_TEXT_STYLE_FIELD(),
+      ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
     },
     isEnabled: (features) => features.canAddRequestPaymentContents,
     isLocked: false,
@@ -2170,6 +2205,7 @@ export const CONTACT_FORM_SETTINGS_CONFIG =
         variant: 'icon',
         visibilityAssessor: brandSiteTypeVisibilityAssessor,
       },
+      ...PADDING_CONTROL_FIELDS(CONTACT_FORM_GROUPS.style),
       titleStyle: DEFAULT_TITLE_STYLE_SETTINGS_FILED_WITH_TITLE(),
       descriptionStyle: DEFAULT_DESCRIPTION_STYLE_FILED(),
       buttonTextStyle: DEFAULT_BUTTON_TEXT_STYLE_FIELD(),
@@ -2229,6 +2265,7 @@ export const BANNER_SECTION_SETTINGS_CONFIG =
         groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,
         variant: 'icon',
       },
+      ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
       overlayColor: {
         type: 'color',
         title: contentSettingsTr(`overlayColorTitle`),
@@ -2507,6 +2544,7 @@ export const ABOUT_SECTION_SETTINGS_CONFIG =
         groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,
         variant: 'icon',
       },
+      ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
       titleStyle: DEFAULT_TITLE_STYLE_SETTINGS_FILED_WITH_TITLE(),
       paragraphStyle: {
         type: 'text-style',
@@ -2594,6 +2632,7 @@ export const IMAGES_SECTION_SETTINGS_CONFIG =
     ],
     fields: {
       displayStyle: TEXT_MEDIA_DISPLAY_STYLE_FIELD(MEDIA_TYPES.image),
+      ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
       aspectRatio: {
         type: 'radio',
         role: 'multi',
@@ -2793,6 +2832,7 @@ export const SOCIAL_LINKS_SETTINGS_CONFIG =
         optionsConvertor: socialLinksIconDisplayStyleConvertor,
         variant: 'icon',
       },
+      ...PADDING_CONTROL_FIELDS(SOCIAL_LINKS_GROUPS.style),
       titleStyle: {
         type: 'text-style',
         groupId: SOCIAL_LINKS_GROUPS.style,
@@ -2905,6 +2945,7 @@ export const SHAPES_SECTION_SETTINGS_CONFIG =
     ],
     fields: {
       displayStyle: TEXT_MEDIA_DISPLAY_STYLE_FIELD(MEDIA_TYPES.shape),
+      ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
       size: IMAGE_SIZE_FIELD(),
       title: TEXT_MEDIA_TITLE_FIELD(),
       description: TEXT_MEDIA_DESCRIPTION_FIELD(),
@@ -2942,6 +2983,7 @@ export const SHAPES_SECTION_SETTINGS_CONFIG =
             ? MAX_BS_MEDIA_AND_IMAGE_ITEMS
             : MAX_BP_MEDIA_AND_IMAGE_ITEMS,
       },
+      ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
     },
     isEnabled: true,
     isLocked: false,
@@ -3166,6 +3208,7 @@ export const BOOKING_SECTION_SETTINGS_CONFIG =
         visibilityAssessor: (c, b) =>
           personalisationOverrideVisibility(c, b, 'buttonText'),
       },
+      ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
       backgroundStyle: {
         type: 'color',
         groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,

package/src/brand-page-maker/convertors/about-display-style.convertor.ts

@@ -6,6 +6,7 @@ import {
   ALIGN_RIGHT_ALIGNED,
   ALIGN_RIGHT_FULL_IMAGE,
   TEXT_ONLY,
+  aboutDisplayStyleDefaultPadding,
 } from '@brand-page/constants';
 
 import type { AboutSectionContent } from '@brand-page';
@@ -76,11 +77,18 @@ export const aboutDisplayStyleConvertor: ValueConvertor<
   convertBack(config: ButtonGroupConfig): Partial<AboutSectionContent> {
     const selectedOption = config.options.find((v) => v.isSelected);
 
+    // Switching display style adopts that style's canonical look — like the
+    // textAlign reset below — including its default block padding. The two
+    // full-image styles default to 0 (image flush to the edges); the rest to 32.
+    const padding = aboutDisplayStyleDefaultPadding(selectedOption?.value);
+
     if (!selectedOption || selectedOption.value === ALIGN_CENTERED) {
       const textAlign = 'center';
 
       return {
         displayStyle: selectedOption?.value,
+        topPadding: padding,
+        bottomPadding: padding,
         titleStyle: {
           textAlign,
         },
@@ -94,6 +102,8 @@ export const aboutDisplayStyleConvertor: ValueConvertor<
 
     return {
       displayStyle: selectedOption?.value,
+      topPadding: padding,
+      bottomPadding: padding,
       titleStyle: {
         textAlign,
       },

package/src/brand-page-maker/convertors/banner-align-display-style.convertor.ts

@@ -15,6 +15,7 @@ import {
   ALIGN_TOP_FULL_IMAGE,
   ALIGN_BOTTOM_FULL_IMAGE,
   ALIGN_MIDDLE_FULL_IMAGE,
+  bannerDisplayStyleDefaultPadding,
 } from '@brand-page/constants';
 import type { BannerSectionContent } from '@brand-page';
 
@@ -172,8 +173,15 @@ export const bannerAlignDisplayStyleConvertor: ValueConvertor<
       textAlign = 'center';
     }
 
+    // Switching display style adopts that style's canonical look — like the
+    // textAlign resets above — including its default block padding. Full-bleed
+    // image styles default to 0 (image flush to the edges); the rest to 32.
+    const padding = bannerDisplayStyleDefaultPadding(selectedOption?.value);
+
     return {
       displayStyle: selectedOption?.value,
+      topPadding: padding,
+      bottomPadding: padding,
       titleStyle: {
         textAlign,
       },

package/src/brand-page-maker/convertors/contact-layout-style.convertor.test.ts

@@ -0,0 +1,50 @@
+import { describe, test, expect } from 'vitest';
+import { contactLayoutStyleConvertor } from './contact-layout-style.convertor';
+import {
+  ALIGN_CENTERED,
+  ALIGN_CARD_CENTER,
+  ALIGN_CARD_CENTER_IMAGE,
+  ALIGN_LEFT_FULL_IMAGE,
+  TEXT_ONLY,
+} from '@brand-page/constants';
+
+const configWithSelected = (selected: string) => ({
+  options: contactLayoutStyleConvertor
+    .convert(selected)
+    .options.map((option) => ({
+      ...option,
+      isSelected: option.value === selected,
+    })),
+});
+
+describe('contact-layout-style.convertor', () => {
+  test.each([
+    [ALIGN_CARD_CENTER, 32, 'center'],
+    [ALIGN_CENTERED, 24, 'center'],
+    [ALIGN_CARD_CENTER_IMAGE, 0, 'center'],
+    [TEXT_ONLY, 32, 'left'],
+    [ALIGN_LEFT_FULL_IMAGE, 0, 'left'],
+  ])(
+    'convertBack should apply the default padding and text alignment for %s',
+    (layoutStyle, padding, textAlign) => {
+      const result = contactLayoutStyleConvertor.convertBack(
+        configWithSelected(layoutStyle),
+      );
+
+      expect(result).toStrictEqual({
+        layoutStyle,
+        topPadding: padding,
+        bottomPadding: padding,
+        titleStyle: {
+          textAlign,
+        },
+        descriptionStyle: {
+          textAlign,
+        },
+        buttonTextStyle: {
+          textAlign: 'center',
+        },
+      });
+    },
+  );
+});

package/src/brand-page-maker/convertors/contact-layout-style.convertor.ts

@@ -6,6 +6,7 @@ import {
   ALIGN_CARD_CENTER_IMAGE,
   TEXT_ONLY,
   ALIGN_CARD_CENTER,
+  CONTACT_FORM_LAYOUT_DEFAULT_PADDING,
 } from '@brand-page/constants';
 import type { ContactFormContent } from '@brand-page';
 
@@ -84,8 +85,15 @@ export const contactLayoutStyleConvertor: ValueConvertor<
       textAlign = 'left';
     }
 
+    // Switching layout adopts that layout's canonical look — same as the
+    // textAlign resets below — including its default block padding.
+    const padding =
+      CONTACT_FORM_LAYOUT_DEFAULT_PADDING[selectedOption?.value ?? ''] ?? 0;
+
     return {
       layoutStyle: selectedOption?.value,
+      topPadding: padding,
+      bottomPadding: padding,
       titleStyle: {
         textAlign,
       },

package/src/brand-page-maker/models/content-settings.ts

@@ -24,6 +24,7 @@ import {
   EMPTY_LOGO_IMAGE_MODEL,
   BRAND_PAGE_TYPES,
   SENSITIVE_CONTENT_TYPES,
+  CONTACT_FORM_LAYOUT_DEFAULT_PADDING,
 } from '@brand-page';
 import type {
   ButtonContent,
@@ -171,6 +172,8 @@ export const createInitialImageGalleryContent = (): ImageGalleryContent => {
     galleryStyles: {
       galleryType: 'grid',
     },
+    topPadding: 0,
+    bottomPadding: 0,
   };
 };
 
@@ -182,6 +185,8 @@ export const createInitialVideoContent = (): VideoContent => {
     displayStyle: DISPLAY_STYLE_PREVIEW,
     mute: false,
     videoUrl: '',
+    topPadding: 0,
+    bottomPadding: 0,
   };
 };
 
@@ -239,6 +244,8 @@ export const createInitialTextContent = (
           ]
         : undefined,
     type: 'text',
+    topPadding: 12,
+    bottomPadding: 12,
     textSize: {
       fontSize: FONT_SIZE_BODY,
       lineHeight: LINE_HEIGHT_BODY,
@@ -282,6 +289,8 @@ export const createInitialMapContent = (): MapContent => {
       formattedAddress: '',
       placeId: '',
     },
+    topPadding: 0,
+    bottomPadding: 0,
   };
 };
 
@@ -291,6 +300,8 @@ export const createInitialMailingListContent = (
   return {
     id: uuid.v4(),
     type: 'mailing-list',
+    topPadding: 0,
+    bottomPadding: 0,
     title: contentSettingsTr(`mailingListTitle`),
     buttonText: contentSettingsTr(`subscribePlaceholder`),
     acceptedFields: 'emailOnly',
@@ -324,6 +335,8 @@ export const createInitialRequestPaymentContent = (
     successMessage: '',
     title: contentSettingsTr(`buyNowTitle`),
     type: 'request-payment',
+    topPadding: 0,
+    bottomPadding: 0,
     fillColor: {},
     defaultBorderColor: {},
     selectedBorderColor: {},
@@ -356,6 +369,8 @@ export const createInitialShopContent = (
   return {
     id: uuid.v4(),
     description: '',
+    topPadding: 16,
+    bottomPadding: 16,
     products: [],
     displayStyle: PAYMENT_OPTION_DISPLAY_TYPES.thumbnail,
     aspectRatio: PAYMENT_OPTION_IMAGE_TYPES.auto,
@@ -415,6 +430,8 @@ export const createInitialSupportMeContent = (
     successMessage: contentSettingsTr(`successSupportPlaceholder`),
     description: contentSettingsTr(`makeADonationDescription`),
     type: 'support-me',
+    topPadding: 0,
+    bottomPadding: 0,
     titleStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
       textStyleType: TEXT_STYLE_TYPES.headings,
@@ -453,14 +470,21 @@ export const createInitialContactFormContent: CreateInitialContentFunction<
     console.error('userState.emailAddress should not be undefined');
   }
 
+  // New blocks inherit the padding their initial layout previously had
+  // hard-coded — same source as the migration backfill for existing pages.
+  const layoutStyle =
+    options?.brandPageType === 'brandSite' ? 'center-card-aligned' : '';
+  const padding = CONTACT_FORM_LAYOUT_DEFAULT_PADDING[layoutStyle] ?? 0;
+
   return {
     id: uuid.v4(),
     title: contentSettingsTr(`contactUsTitle`),
     description: '',
     buttonText: contentSettingsTr(`sendPlaceholder`),
     displayStyle: DISPLAY_STYLE_PREVIEW,
-    layoutStyle:
-      options?.brandPageType === 'brandSite' ? 'center-card-aligned' : '',
+    layoutStyle,
+    topPadding: padding,
+    bottomPadding: padding,
     imageUrl: '',
     fields: [
       {
@@ -553,6 +577,8 @@ export const createInitialBannerSectionContent: CreateInitialContentFunction<
 > = (options?: CreateInitialContentOptions) => {
   return {
     id: uuid.v4(),
+    topPadding: 32,
+    bottomPadding: 32,
     imageUrl: '',
     title: contentSettingsTr(`thisIsABannerTitle`),
     description: '',
@@ -599,6 +625,8 @@ export const createInitialBookingSectionContent: CreateInitialContentFunction<
     buttonText: contentSettingsTr(`bookNowLabel`),
     url: '',
     type: 'booking-section',
+    topPadding: 32,
+    bottomPadding: 32,
     descriptionStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
       textStyleType: TEXT_STYLE_TYPES.paragraphs,
@@ -628,6 +656,8 @@ export const createInitialImagesSectionContent: CreateInitialContentFunction<
     title: contentSettingsTr(`imagesTitle`),
     description: '',
     type: 'images-section',
+    topPadding: 32,
+    bottomPadding: 32,
     displayStyle: 'centered',
     aspectRatio: 'Default',
     areImagesFullWidth: false,
@@ -731,6 +761,8 @@ export const createInitialAboutSectionContent: CreateInitialContentFunction<
       textAlign: 'center',
     },
     backgroundStyle: {},
+    topPadding: 32,
+    bottomPadding: 32,
   };
 };
 
@@ -793,6 +825,8 @@ export const createInitialSocialLinksContent = (
   return {
     id: uuid.v4(),
     type: 'social-links',
+    topPadding: 32,
+    bottomPadding: 32,
     title: contentSettingsTr(`followUsOnTitle`),
     links: [
       {
@@ -846,6 +880,8 @@ export const createInitialShapesSectionContent: CreateInitialContentFunction<
     title: contentSettingsTr(`shapesTitle`),
     description: '',
     type: 'shapes-section',
+    topPadding: 32,
+    bottomPadding: 32,
     displayStyle: 'centered',
     items: [
       {

package/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.test.ts

@@ -9,10 +9,14 @@ import {
   BrandPageModel,
   type ContactFormContent,
   emptyGlobalTextStyleDeclaration,
+  HEADER_DISPLAY,
   type LogoTheme,
+  NAVIGATION_DISPLAY,
   type PageStyles,
+  STYLE_THEME_KEYS,
   VIEWPORTS,
 } from '@brand-page';
+import { useUiNavigationStyleSettingsStore } from '@shared/navigation-style-settings/store';
 import {
   DEFAULT_LOGO_HEIGHT,
   DEFAULT_LOGO_WIDTH,
@@ -302,6 +306,45 @@ describe('brand page maker store module', () => {
     );
   });
 
+  // bp-5634: the sub nav default is applied when content is first materialised. The
+  // admin maker loads a template (no designDraftToken => isUserDraft === false), so a
+  // colour-matched menu font colour-matches the sub nav on load. (Existing user drafts
+  // are skipped — covered by migration-16.test.ts.)
+  test('hamburger template in admin colour-matches the sub nav when the font is matched', async () => {
+    useBrandPageMakerUserStore().setUserState({ isAdmin: true });
+
+    const store = useBrandPageMakerStore();
+
+    const hamburgerHeader = (displayStyle: string) => ({
+      displayStyle,
+      navigation: {
+        displayType: NAVIGATION_DISPLAY.HAMBURGER_1,
+        hamburgerMenuStyle: {
+          defaultButtonStyle: { color: STYLE_THEME_KEYS.LogoTextColor },
+        },
+      },
+    });
+
+    await store.initialise({
+      ...INITIALISE_PAYLOAD,
+      brandPage: {
+        ...BRAND_PAGE,
+        pageHeaderDesktop: hamburgerHeader(HEADER_DISPLAY.DESKTOP_HAMBURGER_1),
+        pageHeaderMobile: hamburgerHeader(HEADER_DISPLAY.MOBILE_HAMBURGER_1),
+      },
+    });
+    await store.initialiseAdminMaker({ models: [] });
+
+    const hamburger =
+      useUiNavigationStyleSettingsStore().navigation[PAGE_SECTIONS.header][
+        VIEWPORTS.desktop
+      ].hamburgerMenuStyle;
+
+    expect(hamburger.subNavBackgroundColor).toBe(
+      STYLE_THEME_KEYS.LogoBackgroundColor,
+    );
+  });
+
   test('brand page maker module should returns distinct brand page content type', async () => {
     // Arrange
     const store = useBrandPageMakerStore();

package/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.ts

@@ -71,7 +71,6 @@ import { useAdminLogoSettingsStore } from '../admin-logo-settings';
 import type { PageSettingsStateSections } from '@shared/page-settings/store';
 import { useUiPageSettingsStore } from '@shared/page-settings/store';
 import {
-  isColorMatched,
   mapBrandPageContentToContentSettingsItem,
   removeContentFieldValues,
   removeLogoTemplateModel,
@@ -1098,19 +1097,6 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
           },
         });
 
-        if (userStore.isAdmin && !this.isUserDraft) {
-          for (const viewport of [VIEWPORTS.desktop, VIEWPORTS.mobile]) {
-            const hamburger =
-              navigationStyleSettingsStore.navigation[PAGE_SECTIONS.header][
-                viewport
-              ].hamburgerMenuStyle;
-
-            if (isColorMatched(hamburger.subNavBackgroundColor)) {
-              hamburger.subNavBackgroundColor = undefined;
-            }
-          }
-        }
-
         uiStore.setThirdPartySettings({
           thirdPartySettings: {
             unsplashApplicationName,

package/src/bundles/bundled-translations.de-DE.json

@@ -1527,6 +1527,8 @@
     "iconFillColorTitle": "Farbe der Symbolfüllung",
     "iconBackgroundColorTitle": "Symbolhintergrundfarbe",
     "paddingTitle": "Polsterung",
+    "topPaddingTitle": "Polsterung oben",
+    "bottomPaddingTitle": "Polsterung unten",
     "dividerStyleTitle": "Trennlinienstil",
     "dividerColorTitle": "Trennlinienfarbe",
     "addItemTitle": "Artikel hinzufügen",

package/src/bundles/bundled-translations.es-ES.json

@@ -1527,6 +1527,8 @@
     "iconFillColorTitle": "Color de relleno del icono",
     "iconBackgroundColorTitle": "Color de fondo del icono",
     "paddingTitle": "Relleno",
+    "topPaddingTitle": "Relleno superior",
+    "bottomPaddingTitle": "Relleno inferior",
     "dividerStyleTitle": "Estilo del divisor",
     "dividerColorTitle": "Color del separador",
     "addItemTitle": "Añadir artículo",

package/src/bundles/bundled-translations.fr-CA.json

@@ -1527,6 +1527,8 @@
     "iconFillColorTitle": "Couleur de remplissage de l’icône",
     "iconBackgroundColorTitle": "Couleur d’arrière-plan de l’icône",
     "paddingTitle": "Marges intérieures",
+    "topPaddingTitle": "Marge intérieure supérieure",
+    "bottomPaddingTitle": "Marges intérieures inférieures",
     "dividerStyleTitle": "Style de séparateur",
     "dividerColorTitle": "Couleur du séparateur",
     "addItemTitle": "Ajouter un article",

package/src/bundles/bundled-translations.fr-FR.json

@@ -1527,6 +1527,8 @@
     "iconFillColorTitle": "Couleur de remplissage de l’icône",
     "iconBackgroundColorTitle": "Couleur d’arrière-plan de l’icône",
     "paddingTitle": "Marges intérieures",
+    "topPaddingTitle": "Marges intérieures supérieures",
+    "bottomPaddingTitle": "Marges intérieures inférieures",
     "dividerStyleTitle": "Style de séparateur",
     "dividerColorTitle": "Couleur du séparateur",
     "addItemTitle": "Ajouter un article",

package/src/bundles/bundled-translations.json

@@ -1527,6 +1527,8 @@
     "iconFillColorTitle": "Icon fill color",
     "iconBackgroundColorTitle": "Icon background color",
     "paddingTitle": "Padding",
+    "topPaddingTitle": "Top padding",
+    "bottomPaddingTitle": "Bottom padding",
     "dividerStyleTitle": "Divider Style",
     "dividerColorTitle": "Divider color",
     "addItemTitle": "Add Item",

package/src/bundles/bundled-translations.pt-BR.json

@@ -1527,6 +1527,8 @@
     "iconFillColorTitle": "Cor de preenchimento do ícone",
     "iconBackgroundColorTitle": "Cor de fundo do ícone",
     "paddingTitle": "Preenchimento",
+    "topPaddingTitle": "Preenchimento superior",
+    "bottomPaddingTitle": "Preenchimento inferior",
     "dividerStyleTitle": "Estilo do separador",
     "dividerColorTitle": "Cor do separador",
     "addItemTitle": "Adicionar item",

package/src/bundles/bundled-translations.pt-PT.json

@@ -1527,6 +1527,8 @@
     "iconFillColorTitle": "Cor de preenchimento do ícone",
     "iconBackgroundColorTitle": "Cor de fundo do ícone",
     "paddingTitle": "Preenchimento",
+    "topPaddingTitle": "Preenchimento superior",
+    "bottomPaddingTitle": "Preenchimento inferior",
     "dividerStyleTitle": "Estilo do separador",
     "dividerColorTitle": "Cor do separador",
     "addItemTitle": "Adicionar Item",

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

@@ -269,12 +269,17 @@ const onColorMatchToggled = (value: boolean) => {
     } else {
       newColor.value = STYLE_THEME_KEYS.LogoTextColor;
     }
+  } else if (props.name === 'background') {
+    newColor.value = '';
+  } else if (props.disableTransparent) {
+    // Fields that disallow transparent (e.g. font colour) must not fall back to
+    // transparent when color match is turned off - resolve to the actual logo colour.
+    newColor.value =
+      color.value === STYLE_THEME_KEYS.LogoBackgroundColor
+        ? props.logoTheme.logoBackgroundColor.rgb
+        : props.logoTheme.logoTextColor.rgb;
   } else {
-    if (props.name === 'background') {
-      newColor.value = '';
-    } else {
-      newColor.value = 'transparent';
-    }
+    newColor.value = 'transparent';
   }
 
   changeColor();

package/src/shared/content-settings/components/content-settings/i18n/content-settings.de-DE.json

@@ -113,6 +113,8 @@
     "iconFillColorTitle": "Farbe der Symbolfüllung",
     "iconBackgroundColorTitle": "Symbolhintergrundfarbe",
     "paddingTitle": "Polsterung",
+    "topPaddingTitle": "Polsterung oben",
+    "bottomPaddingTitle": "Polsterung unten",
     "dividerStyleTitle": "Trennlinienstil",
     "dividerColorTitle": "Trennlinienfarbe",
     "addItemTitle": "Artikel hinzufügen",

package/src/shared/content-settings/components/content-settings/i18n/content-settings.es-ES.json

@@ -113,6 +113,8 @@
     "iconFillColorTitle": "Color de relleno del icono",
     "iconBackgroundColorTitle": "Color de fondo del icono",
     "paddingTitle": "Relleno",
+    "topPaddingTitle": "Relleno superior",
+    "bottomPaddingTitle": "Relleno inferior",
     "dividerStyleTitle": "Estilo del divisor",
     "dividerColorTitle": "Color del separador",
     "addItemTitle": "Añadir artículo",

package/src/shared/content-settings/components/content-settings/i18n/content-settings.fr-CA.json

@@ -113,6 +113,8 @@
     "iconFillColorTitle": "Couleur de remplissage de l’icône",
     "iconBackgroundColorTitle": "Couleur d’arrière-plan de l’icône",
     "paddingTitle": "Marges intérieures",
+    "topPaddingTitle": "Marge intérieure supérieure",
+    "bottomPaddingTitle": "Marges intérieures inférieures",
     "dividerStyleTitle": "Style de séparateur",
     "dividerColorTitle": "Couleur du séparateur",
     "addItemTitle": "Ajouter un article",

package/src/shared/content-settings/components/content-settings/i18n/content-settings.fr-FR.json

@@ -113,6 +113,8 @@
     "iconFillColorTitle": "Couleur de remplissage de l’icône",
     "iconBackgroundColorTitle": "Couleur d’arrière-plan de l’icône",
     "paddingTitle": "Marges intérieures",
+    "topPaddingTitle": "Marges intérieures supérieures",
+    "bottomPaddingTitle": "Marges intérieures inférieures",
     "dividerStyleTitle": "Style de séparateur",
     "dividerColorTitle": "Couleur du séparateur",
     "addItemTitle": "Ajouter un article",

package/src/shared/content-settings/components/content-settings/i18n/content-settings.json

@@ -113,6 +113,8 @@
     "iconFillColorTitle": "Icon fill color",
     "iconBackgroundColorTitle": "Icon background color",
     "paddingTitle": "Padding",
+    "topPaddingTitle": "Top padding",
+    "bottomPaddingTitle": "Bottom padding",
     "dividerStyleTitle": "Divider Style",
     "dividerColorTitle": "Divider color",
     "addItemTitle": "Add Item",