@designcrowd/library.brand-page 6.2.3 → 6.2.4

package/src/metadata-builder/builders/section-field-utils.test.ts

@@ -0,0 +1,83 @@
+import { describe, expect, it } from 'vitest';
+import type { Content } from '../../brand-page/models';
+import { applyStyleFields } from './section-field-utils';
+
+/**
+ * Regression tests for the AI QA 2026-07-05 rerun P0: a colour-only *_style
+ * patch left the field's existing inline textStyle marks (old colour) in
+ * place — inline marks override the style layer at render, so recoloured
+ * bands showed invisible old-colour text. applyStyleFields now propagates a
+ * new style colour into the stored RTE HTML when the patch carries no new
+ * text for that field.
+ */
+describe('applyStyleFields inline-colour propagation', () => {
+  const makeContent = (): Content =>
+    ({
+      type: 'about-section',
+      title: '<h3><span style="color: #111111">Fine Grooming</span></h3>',
+      titleStyle: { color: '#111111', fontSize: '2.188em' },
+      paragraph: '<p><span style="color: #111111">Body copy</span></p>',
+      paragraphStyle: { color: '#111111' },
+    }) as unknown as Content;
+
+  const recolour = (html: string, color: string): string =>
+    html.replace(/color: #[0-9a-fA-F]{6}/g, `color: ${color}`);
+
+  it('colour-only patch recolours the existing inline marks', () => {
+    const content = makeContent();
+
+    applyStyleFields(
+      content,
+      { title_style: { color: '#f8f2e9' } },
+      'about-section',
+      undefined,
+      recolour,
+    );
+
+    const record = content as unknown as Record<string, unknown>;
+
+    expect(record.title).toContain('color: #f8f2e9');
+    expect((record.titleStyle as Record<string, unknown>).color).toBe(
+      '#f8f2e9',
+    );
+    // Untouched fields keep their marks.
+    expect(record.paragraph).toContain('color: #111111');
+  });
+
+  it('does NOT rewrite marks when the patch also carries new text for the field', () => {
+    const content = makeContent();
+
+    applyStyleFields(
+      content,
+      {
+        title: { type: 'doc', content: [] },
+        title_style: { color: '#f8f2e9' },
+      },
+      'about-section',
+      undefined,
+      recolour,
+    );
+
+    // The builder's own text path owns the rewrite — HTML left alone here.
+    expect((content as unknown as Record<string, unknown>).title).toContain(
+      'color: #111111',
+    );
+  });
+
+  it('merged style keeps non-colour properties from the current style', () => {
+    const content = makeContent();
+
+    applyStyleFields(
+      content,
+      { title_style: { color: '#f8f2e9' } },
+      'about-section',
+      undefined,
+      recolour,
+    );
+
+    const style = (content as unknown as Record<string, unknown>)
+      .titleStyle as Record<string, unknown>;
+
+    expect(style.fontSize).toBe('2.188em');
+  });
+});

package/src/metadata-builder/builders/section-field-utils.ts

@@ -9,6 +9,10 @@ import {
   isTiptapDocument,
   type SectionToolArguments,
 } from '../parsers/section-tool-arguments';
+import { hasRTEContent } from '../../brand-page-maker/utils';
+import { useExternalRichTextEditor } from '../../brand-page-maker/composables/rich-text-editor/useRichTextEditor';
+import { applyStyleToRTEText } from '../helpers/rte.helpers';
+import type { TextStyleDeclaration } from '../../brand-page/models';
 import { getSectionFieldMap, getStyleFieldMap } from './section-field-maps';
 
 /**
@@ -186,36 +190,83 @@ export const applyDetachedStyleOverride = <T extends object>(
     ...updates,
   }) as T;
 
+/**
+ * Rewrites the stored RTE HTML's inline colour marks. Injectable for tests;
+ * the default uses the external Tiptap editor (font-propagation precedent).
+ */
+export type ApplyColorToRTE = (html: string, color: string) => string;
+
 export const applyStyleFields = (
   content: Content,
   args: SectionToolArguments,
   sectionType: string,
   textStyleOptions?: TextStyleOptions,
+  applyColor?: ApplyColorToRTE,
 ): void => {
   const styleMap = getStyleFieldMap(sectionType);
 
   if (!styleMap) return;
 
   const record = content as IndexableContent;
+  let editor:
+    | ReturnType<typeof useExternalRichTextEditor>['externalEditor']
+    | undefined;
+  const applyColorToHtml: ApplyColorToRTE =
+    applyColor ??
+    ((html, color) => {
+      editor = editor ?? useExternalRichTextEditor().externalEditor;
+
+      return applyStyleToRTEText(editor, html, {
+        color,
+      } as TextStyleDeclaration);
+    });
 
-  for (const [aiKey, modelKey] of Object.entries(styleMap)) {
-    if (!(aiKey in args) || !args[aiKey] || typeof args[aiKey] !== 'object')
-      continue;
-
-    const aiStyle = args[aiKey] as Record<string, unknown>;
-    const filtered: Record<string, unknown> = {};
-
-    for (const [k, v] of Object.entries(aiStyle)) {
-      const normalized = normalizeStyleValue(k, v);
-
-      if (normalized !== undefined) filtered[k] = normalized;
+  try {
+    for (const [aiKey, modelKey] of Object.entries(styleMap)) {
+      if (!(aiKey in args) || !args[aiKey] || typeof args[aiKey] !== 'object')
+        continue;
+
+      const aiStyle = args[aiKey] as Record<string, unknown>;
+      const filtered: Record<string, unknown> = {};
+
+      for (const [k, v] of Object.entries(aiStyle)) {
+        const normalized = normalizeStyleValue(k, v);
+
+        if (normalized !== undefined) filtered[k] = normalized;
+      }
+
+      const resolved = resolveGlobalPresetIntoStyle(
+        content[modelKey] as object,
+        textStyleOptions,
+      );
+
+      record[modelKey] = { ...resolved, ...filtered, textStyleType: undefined };
+
+      // A colour patch without new text leaves the field's EXISTING inline
+      // textStyle marks in place — and inline marks override every style layer
+      // at render, so the old colour survives on a recoloured band (invisible
+      // text, AI QA 2026-07-05 rerun). Propagate the new colour into the
+      // stored HTML, mirroring global-font-propagation for font families.
+      const textKey = modelKey.endsWith('Style')
+        ? modelKey.slice(0, -'Style'.length)
+        : undefined;
+      const textAiKey = aiKey.endsWith('_style')
+        ? aiKey.slice(0, -'_style'.length)
+        : undefined;
+      const newColor = filtered.color;
+
+      if (
+        textKey &&
+        typeof newColor === 'string' &&
+        newColor &&
+        !(textAiKey && textAiKey in args) &&
+        typeof record[textKey] === 'string' &&
+        hasRTEContent(record[textKey] as string)
+      ) {
+        record[textKey] = applyColorToHtml(record[textKey] as string, newColor);
+      }
     }
-
-    const resolved = resolveGlobalPresetIntoStyle(
-      content[modelKey] as object,
-      textStyleOptions,
-    );
-
-    record[modelKey] = { ...resolved, ...filtered, textStyleType: undefined };
+  } finally {
+    editor?.destroy();
   }
 };

package/src/metadata-builder/builders/section-rules/support-me.rules.ts

@@ -0,0 +1,39 @@
+import {
+  MAX_TITLE_LENGTH,
+  MAX_DESCRIPTION_LENGTH,
+} from '../../../brand-page/constants/font.constants';
+import {
+  DISPLAY_STYLE_PREVIEW,
+  DISPLAY_STYLE_COLLAPSED,
+} from '../../../brand-page/constants';
+import {
+  enumCheck,
+  runChecks,
+  styleCheck,
+  textCheck,
+  type SectionCheck,
+  type ValidationContext,
+} from '../../sanitizers/section-args-validator';
+
+const CHECKS: SectionCheck[] = [
+  textCheck('title', MAX_TITLE_LENGTH),
+  textCheck('description', MAX_DESCRIPTION_LENGTH),
+  textCheck('success_message', MAX_DESCRIPTION_LENGTH),
+  styleCheck('title_style'),
+  styleCheck('heading_style'),
+  styleCheck('description_style'),
+  styleCheck('item_text_style'),
+  styleCheck('button_text_style'),
+  enumCheck(
+    'display_style',
+    [DISPLAY_STYLE_PREVIEW, DISPLAY_STYLE_COLLAPSED],
+    'support-me',
+  ),
+];
+
+export function validateSupportMe(
+  args: Record<string, unknown>,
+  ctx: ValidationContext,
+): string[] {
+  return runChecks(CHECKS, args, ctx);
+}

package/src/metadata-builder/helpers/rte.helpers.ts

@@ -1,7 +1,88 @@
 import type { RichTextValue } from '../../brand-page';
-import { renderRteToHtml } from '../../brand-page-maker/utils';
+import type { TextStyleDeclaration } from '../../brand-page/models/styles.model';
+import { renderRteToHtml, getRTEColor } from '../../brand-page-maker/utils';
+import { getRenderText } from '../../brand-page/utils';
+import { ESCAPED_NEWLINE_CHARACTER } from '../../constants/ui';
+import type { Editor } from '@tiptap/vue-3';
 import { isTiptapDocument } from '../parsers/section-tool-arguments';
 
+/**
+ * Applies a TextStyleDeclaration to RTE HTML by loading it into the given
+ * (external/headless) Tiptap editor and rewriting inline marks via command
+ * chains. DOM-bound — client-only callers (font propagation, section style
+ * fields).
+ */
+export const applyStyleToRTEText = (
+  externalEditor: Editor,
+  contentText: string,
+  newContentStyle: TextStyleDeclaration,
+) => {
+  if (!contentText) {
+    return contentText;
+  }
+
+  const content = contentText.includes(ESCAPED_NEWLINE_CHARACTER)
+    ? getRenderText(contentText)
+    : contentText;
+
+  externalEditor.commands.setContent(content);
+
+  let chain = externalEditor.chain().selectAll();
+
+  if (newContentStyle?.fontFamily) {
+    chain = chain.setFontFamily(newContentStyle.fontFamily);
+  }
+
+  if (newContentStyle?.fontSize) {
+    chain = chain.setFontSize(newContentStyle.fontSize);
+  }
+
+  if (newContentStyle?.letterSpacing) {
+    chain = chain.setLetterSpacing(newContentStyle.letterSpacing);
+  }
+
+  if (newContentStyle?.lineHeight) {
+    chain = chain.setLineHeight(newContentStyle.lineHeight);
+  }
+
+  if (newContentStyle?.color) {
+    chain = chain.setMark('textStyle', {
+      color: getRTEColor(newContentStyle.color, 'text'),
+    });
+  }
+
+  if ('backgroundColor' in (newContentStyle || {})) {
+    chain = newContentStyle.backgroundColor
+      ? chain.setMark('highlight', {
+          color: getRTEColor(newContentStyle.backgroundColor, 'background'),
+        })
+      : chain.unsetHighlight();
+  }
+
+  if (newContentStyle?.textAlign) {
+    chain = chain.setTextAlign(newContentStyle.textAlign);
+  }
+
+  const hasStrike = newContentStyle?.textDecoration?.includes('line-through');
+  const hasUnderline = newContentStyle?.textDecoration?.includes('underline');
+
+  chain = hasStrike ? chain.setStrike() : chain.unsetStrike();
+  chain = hasUnderline ? chain.setUnderline() : chain.unsetUnderline();
+
+  chain =
+    newContentStyle?.fontWeight === 'bold'
+      ? chain.setBold()
+      : chain.unsetBold();
+  chain =
+    newContentStyle?.fontStyle === 'italic'
+      ? chain.setItalic()
+      : chain.unsetItalic();
+
+  chain.run();
+
+  return externalEditor.getHTML();
+};
+
 /**
  * Converts a Tiptap JSON document (ProseMirror document model) to an HTML
  * string via Tiptap's schema-driven static renderer (renderRteToHtml →

package/src/metadata-builder/metadata-executor.ts

@@ -12,6 +12,7 @@ import {
 import {
   BannerSectionBuilder,
   BookingSectionBuilder,
+  SupportMeBuilder,
   AboutSectionBuilder,
   ContactFormBuilder,
   DividerSectionBuilder,
@@ -50,6 +51,7 @@ const getBuilderRegistry = (): Record<BuilderType, BuilderConstructor> => ({
   // Section builders (create)
   [BUILDER_TYPES.CREATE_BANNER_SECTION]: BannerSectionBuilder,
   [BUILDER_TYPES.CREATE_BOOKING_SECTION]: BookingSectionBuilder,
+  [BUILDER_TYPES.CREATE_SUPPORT_ME]: SupportMeBuilder,
   [BUILDER_TYPES.CREATE_ABOUT_SECTION]: AboutSectionBuilder,
   [BUILDER_TYPES.CREATE_CONTACT_FORM]: ContactFormBuilder,
   [BUILDER_TYPES.CREATE_DIVIDER_SECTION]: DividerSectionBuilder,
@@ -77,6 +79,7 @@ const getBuilderRegistry = (): Record<BuilderType, BuilderConstructor> => ({
   // Section builders (update)
   [BUILDER_TYPES.UPDATE_BANNER_SECTION]: BannerSectionBuilder,
   [BUILDER_TYPES.UPDATE_BOOKING_SECTION]: BookingSectionBuilder,
+  [BUILDER_TYPES.UPDATE_SUPPORT_ME]: SupportMeBuilder,
   [BUILDER_TYPES.UPDATE_ABOUT_SECTION]: AboutSectionBuilder,
   [BUILDER_TYPES.UPDATE_CONTACT_FORM]: ContactFormBuilder,
   [BUILDER_TYPES.UPDATE_DIVIDER_SECTION]: DividerSectionBuilder,

package/src/metadata-builder/models.ts

@@ -29,6 +29,7 @@ export const BUILDER_TYPES = {
   CREATE_TWITCH: 'create-twitch',
   CREATE_TIKTOK: 'create-tiktok',
   CREATE_BOOKING_SECTION: 'create-booking-section',
+  CREATE_SUPPORT_ME: 'create-support-me',
 
   // Per-section builder types (update)
   UPDATE_BANNER_SECTION: 'update-banner-section',
@@ -56,6 +57,7 @@ export const BUILDER_TYPES = {
   UPDATE_TWITCH: 'update-twitch',
   UPDATE_TIKTOK: 'update-tiktok',
   UPDATE_BOOKING_SECTION: 'update-booking-section',
+  UPDATE_SUPPORT_ME: 'update-support-me',
 
   // Section-level operations
   DELETE_SECTION: 'delete-section',

package/src/metadata-builder/parsers/ai-toolcall-parser.ts

@@ -38,6 +38,7 @@ export const AI_ASSISTANT_TOOL_NAMES = {
   BUILD_TESTIMONIAL_SECTION: 'build_testimonial-section_section',
   BUILD_DIVIDER_SECTION: 'build_divider-section_section',
   BUILD_BOOKING_SECTION: 'build_booking-section_section',
+  BUILD_SUPPORT_ME_SECTION: 'build_support-me_section',
 
   // Section-level operation tools
   DELETE_SECTION: 'delete_section',
@@ -136,6 +137,9 @@ export const SECTION_TOOL_MAP: Record<string, { sectionType: SectionType }> = {
   [AI_ASSISTANT_TOOL_NAMES.BUILD_BOOKING_SECTION]: {
     sectionType: 'booking-section',
   },
+  [AI_ASSISTANT_TOOL_NAMES.BUILD_SUPPORT_ME_SECTION]: {
+    sectionType: 'support-me',
+  },
 };
 
 export interface DeleteSectionArguments {

package/src/metadata-builder/parsers/section-tool-arguments.ts

@@ -17,7 +17,6 @@ type UnsupportedContentType =
   | 'video'
   | 'map'
   | 'request-payment'
-  | 'support-me'
   | 'shop-section';
 
 export type SectionType = Exclude<ContentType, UnsupportedContentType>;
@@ -537,6 +536,19 @@ export interface BookingSectionArguments {
   padding_bottom?: number;
 }
 
+export interface SupportMeArguments {
+  title?: string;
+  description?: string;
+  success_message?: string;
+  /** Matches DISPLAY_STYLE_PREVIEW / DISPLAY_STYLE_COLLAPSED. */
+  display_style?: 'preview' | 'collapsed';
+  title_style?: TextStyleArguments;
+  heading_style?: TextStyleArguments;
+  description_style?: TextStyleArguments;
+  item_text_style?: TextStyleArguments;
+  button_text_style?: ButtonTextStyleArguments;
+}
+
 export interface DividerSectionArguments {
   divider_style?: 'none' | 'thin' | 'thick';
   divider_color?: string | null;
@@ -574,6 +586,7 @@ export type SectionToolArguments =
   | TestimonialSectionArguments
   | ShapesSectionArguments
   | BookingSectionArguments
+  | SupportMeArguments
   | DividerSectionArguments;
 
 // ---------------------------------------------------------------------------

package/src/shared/style-settings/button-style-preset.test.ts

@@ -0,0 +1,67 @@
+import { describe, it, expect } from 'vitest';
+import { availableButtonStyleConfigs } from '../../brand-page-maker/models/button-styles-config';
+import {
+  ButtonBoxShadowSize,
+  ButtonSoftBoxShadowSize,
+} from '../../brand-page/constants/misc.constants';
+import { DEFAULT_BUTTON_SHADOW_COLOR } from '../../constants/ui';
+import { buttonStylePresetCss } from './button-style-preset';
+
+const flatPreset = availableButtonStyleConfigs.find(
+  (c) => c.id === 'BUTTON_STYLE_5',
+)!;
+const shadowPreset = availableButtonStyleConfigs.find((c) => c.hasShadow)!;
+const softShadowPreset = availableButtonStyleConfigs.find(
+  (c) => c.hasSoftShadow,
+);
+
+describe('buttonStylePresetCss', () => {
+  it('copies the preset shape and clears the shadow for a preset without one', () => {
+    expect(flatPreset.style.borderRadius).toBe('8px');
+
+    expect(
+      buttonStylePresetCss('BUTTON_STYLE_5', {
+        boxShadow: '3px 3px 0px 0px #123456',
+      }),
+    ).toEqual({ ...flatPreset.style, boxShadow: '' });
+  });
+
+  it('a shadow preset keeps the current shadow colour', () => {
+    const css = buttonStylePresetCss(shadowPreset.id, {
+      boxShadow: '3px 3px 0px 0px #123456',
+    });
+
+    expect(css?.boxShadow).toBe(`${ButtonBoxShadowSize} #123456`);
+    expect(css?.borderRadius).toBe(shadowPreset.style.borderRadius);
+  });
+
+  it('a shadow preset uses the default colour when there is no shadow yet', () => {
+    expect(buttonStylePresetCss(shadowPreset.id, {})?.boxShadow).toBe(
+      `${ButtonBoxShadowSize} ${DEFAULT_BUTTON_SHADOW_COLOR}`,
+    );
+  });
+
+  it('keeps a current shadow it cannot parse', () => {
+    expect(
+      buttonStylePresetCss(shadowPreset.id, { boxShadow: 'not-a-shadow' })
+        ?.boxShadow,
+    ).toBe('not-a-shadow');
+  });
+
+  it.skipIf(!softShadowPreset)(
+    'a soft-shadow preset uses the soft size',
+    () => {
+      expect(buttonStylePresetCss(softShadowPreset!.id, {})?.boxShadow).toBe(
+        `${ButtonSoftBoxShadowSize} ${DEFAULT_BUTTON_SHADOW_COLOR}`,
+      );
+    },
+  );
+
+  it('returns undefined for an unknown preset', () => {
+    expect(buttonStylePresetCss('BUTTON_STYLE_999', {})).toBeUndefined();
+  });
+
+  it('honours a restricted config list', () => {
+    expect(buttonStylePresetCss('BUTTON_STYLE_5', {}, [])).toBeUndefined();
+  });
+});

package/src/shared/style-settings/button-style-preset.ts

@@ -0,0 +1,56 @@
+import {
+  availableButtonStyleConfigs,
+  type ButtonStyleConfig,
+} from '../../brand-page-maker/models/button-styles-config';
+import {
+  ButtonBoxShadowSize,
+  ButtonSoftBoxShadowSize,
+} from '../../brand-page/constants/misc.constants';
+import { DEFAULT_BUTTON_SHADOW_COLOR } from '../../constants/ui';
+import { CssShadowRE } from '../../utils/helpers';
+
+/**
+ * The button CSS a preset contributes when it is selected: its shape (border radius,
+ * style, width) and its shadow rule. One rule shared by the editor's picker and the AI
+ * `update_global_styles` path — the site renders buttons from `buttonStyles.style`, so
+ * storing the preset id alone changes nothing on the page (BP-6082).
+ *
+ * Shadow: a shadow preset keeps the current shadow colour when one is set (default
+ * colour otherwise); a preset without a shadow clears it. `undefined` for an id that is
+ * not in `configs`.
+ */
+export const buttonStylePresetCss = (
+  presetId: string,
+  currentStyle: BrandPageCssStyle,
+  configs: readonly ButtonStyleConfig[] = availableButtonStyleConfigs,
+): BrandPageCssStyle | undefined => {
+  const config = configs.find((c) => c.id === presetId);
+
+  if (!config) {
+    return undefined;
+  }
+
+  const shadowFor = (size: string): string => {
+    const current = currentStyle.boxShadow;
+
+    if (!current) {
+      return `${size} ${DEFAULT_BUTTON_SHADOW_COLOR}`;
+    }
+
+    const match = CssShadowRE.exec(current);
+
+    return match ? `${size} ${match[1]}` : current;
+  };
+
+  const style: BrandPageCssStyle = { ...config.style };
+
+  if (config.hasShadow) {
+    style.boxShadow = shadowFor(ButtonBoxShadowSize);
+  } else if (config.hasSoftShadow) {
+    style.boxShadow = shadowFor(ButtonSoftBoxShadowSize);
+  } else {
+    style.boxShadow = '';
+  }
+
+  return style;
+};

package/src/shared/style-settings/store/style-settings-store.ts

@@ -3,12 +3,7 @@ import type {
   ButtonStyleConfig,
   ButtonStyleConfigOption,
 } from '@brand-page-maker/models';
-import {
-  getColorFromCSSShadow,
-  hexToRGBA,
-  isHexColor,
-  CssShadowRE,
-} from '@utils/helpers';
+import { getColorFromCSSShadow, hexToRGBA, isHexColor } from '@utils/helpers';
 import type {
   BrandPageType,
   TextStyleDeclaration,
@@ -35,7 +30,6 @@ import {
 import type { OtherStyleConfigOption } from '@brand-page-maker/models';
 import { assertUnreachable } from '../../../helpers/ts.helper';
 import { isColorVarReference } from '@brand-page/utils';
-import { DEFAULT_BUTTON_SHADOW_COLOR } from '../../../constants/ui';
 import type {
   SetGalleryTypePayload,
   StyleTextFontFamilyOption,
@@ -50,6 +44,7 @@ import type { ContentItem } from '../../content-settings/models';
 import { useUiPageSettingsStore } from '../../page-settings/store';
 import { PAGE_SECTIONS } from '../../page-settings/models';
 import { availableButtonStyleConfigs } from '@brand-page-maker/models';
+import { buttonStylePresetCss } from '../button-style-preset';
 import {
   TRIGGER_TYPE,
   UPGRADE_CTA_LOCATIONS,
@@ -343,42 +338,18 @@ export const useUiStyleSettingsStore = defineStore('uiStyleSettings', {
     setSelectedButtonStyle(payload: { id: string }) {
       this._setSelectedButtonStyle(payload);
 
-      const buttonStyleConfig = this.availableButtonStyleConfigs.find(
-        (c) => c.id === payload.id,
+      // Shape + shadow derivation lives in buttonStylePresetCss so the AI metadata
+      // builder applies a preset exactly as this picker does (BP-6082).
+      const buttonStyle = buttonStylePresetCss(
+        payload.id,
+        this.buttonStyles.style,
+        this.availableButtonStyleConfigs,
       );
 
-      if (!buttonStyleConfig) {
+      if (!buttonStyle) {
         return;
       }
 
-      let buttonStyle: BrandPageCssStyle = {
-        ...buttonStyleConfig.style,
-      };
-
-      if (buttonStyleConfig.hasShadow) {
-        if (!this.buttonStyles.style.boxShadow) {
-          buttonStyle.boxShadow = `${ButtonBoxShadowSize} ${DEFAULT_BUTTON_SHADOW_COLOR}`;
-        } else {
-          const match = CssShadowRE.exec(this.buttonStyles.style.boxShadow);
-
-          buttonStyle.boxShadow = match
-            ? `${ButtonBoxShadowSize} ${match[1]}`
-            : this.buttonStyles.style.boxShadow;
-        }
-      } else if (buttonStyleConfig.hasSoftShadow) {
-        if (!this.buttonStyles.style.boxShadow) {
-          buttonStyle.boxShadow = `${ButtonSoftBoxShadowSize} ${DEFAULT_BUTTON_SHADOW_COLOR}`;
-        } else {
-          const match = CssShadowRE.exec(this.buttonStyles.style.boxShadow);
-
-          buttonStyle.boxShadow = match
-            ? `${ButtonSoftBoxShadowSize} ${match[1]}`
-            : this.buttonStyles.style.boxShadow;
-        }
-      } else {
-        buttonStyle = { ...buttonStyle, boxShadow: '' };
-      }
-
       this._setButtonStyle(buttonStyle);
 
       onStyleChanged();