@designcrowd/library.brand-page 6.1.13-ast-opacity → 6.1.13

package/lib/src/shared/page-settings/components/page-settings/PageSettings.mixin.d.ts

@@ -1277,7 +1277,6 @@ declare const _default: import("vue").DefineComponent<{}, {
                 } | undefined;
                 logoImageBase64Url?: string | undefined;
                 backgroundStyle: {
-                    backgroundOpacity?: number | undefined;
                     aspectRatio?: string | undefined;
                     backgroundAttachment?: string | undefined;
                     background?: string | undefined;
@@ -2570,7 +2569,6 @@ declare const _default: import("vue").DefineComponent<{}, {
                 } | undefined;
                 logoImageBase64Url?: string | undefined;
                 backgroundStyle: {
-                    backgroundOpacity?: number | undefined;
                     aspectRatio?: string | undefined;
                     backgroundAttachment?: string | undefined;
                     background?: string | undefined;

package/lib/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.d.ts

@@ -1235,7 +1235,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 } | undefined;
                 logoImageBase64Url?: string | undefined;
                 backgroundStyle: {
-                    backgroundOpacity?: number | undefined;
                     aspectRatio?: string | undefined;
                     backgroundAttachment?: string | undefined;
                     background?: string | undefined;
@@ -2528,7 +2527,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 } | undefined;
                 logoImageBase64Url?: string | undefined;
                 backgroundStyle: {
-                    backgroundOpacity?: number | undefined;
                     aspectRatio?: string | undefined;
                     backgroundAttachment?: string | undefined;
                     background?: string | undefined;
@@ -4640,8 +4638,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     logoSliderMax(): number;
     backgroundColor(): string;
     isBackgroundColorEnabled(): boolean;
-    backgroundOpacity(): number;
-    showBackgroundOpacity(): boolean;
     copyrightPlaceholder(): string;
     copyrightText: {
         get(): string;
@@ -4693,7 +4689,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         logoImageBase64Url?: string;
     }): void;
     onSelectColor(selectedColor: UpdateItemValuePayload<string>): void;
-    onBackgroundOpacityChange(value: number | string): void;
     onBackgroundEnable(enabled: UpdateItemValuePayload<boolean>): void;
     onLogoVisibleChanged(showLogo: boolean): void;
     onLogoVariationSelected(selectedLogoVariationIndex: number): void;

package/lib/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.js

@@ -3,7 +3,6 @@ import { PAGE_SECTION_STYLE_OPTIONS } from '@brand-page-maker/models/page-sectio
 import { PAGE_SECTIONS } from '../../models';
 import { LOGO_SLIDER_DESKTOP_MAX, LOGO_SLIDER_DESKTOP_MIN, LOGO_SLIDER_MOBILE_MAX, LOGO_SLIDER_MOBILE_MIN, VIEWPORTS, getNavigationType, NAVIGATION_TYPE_DEFAULT_DISPLAY_TYPE, } from '@brand-page';
 import { UI_DEVICE_MODES, UI_EVENT_SOURCES } from '../../../models';
-import { isTransparentColour } from '@brand-page/utils/color.util';
 import { useUiPageSettingsStore } from '../../store';
 import { useUiNavigationStyleSettingsStore } from '../../../navigation-style-settings/store';
 import { useUiStyleSettingsStore } from '../../../style-settings/store';
@@ -142,15 +141,6 @@ export default defineComponent({
             return this.sections[this.sectionName][this.viewport]
                 .backgroundColorEnabled;
         },
-        backgroundOpacity() {
-            // Real default: an un-constructed (JSON.parse'd) header never saw the constructor's default.
-            return (this.sections[this.sectionName][this.viewport].backgroundStyle
-                ?.backgroundOpacity ?? 100);
-        },
-        showBackgroundOpacity() {
-            // isTransparentColour('') is false, so an unset color needs its own check.
-            return (!!this.backgroundColor && !isTransparentColour(this.backgroundColor));
-        },
         copyrightPlaceholder() {
             return commonTr(`copyrightTextPlaceholder`);
         },
@@ -404,21 +394,6 @@ export default defineComponent({
                 viewport: this.viewport,
             });
         },
-        onBackgroundOpacityChange(value) {
-            // Clamped here: the Slider's text field can emit an out-of-range value mid-typing.
-            const clamped = Math.min(100, Math.max(0, Number(value) || 0));
-            // A variable, not an inline literal — backgroundOpacity isn't on BrandPageCssStyle.
-            const backgroundStyle = {
-                backgroundOpacity: clamped,
-            };
-            this.pageSettingsStore.setPageSettingsSectionValue({
-                sectionName: this.sectionName,
-                propName: 'backgroundStyle',
-                value: backgroundStyle,
-                merge: true,
-                viewport: this.viewport,
-            });
-        },
         onBackgroundEnable(enabled) {
             this.pageSettingsStore.setPageSettingsSectionValue({
                 sectionName: this.sectionName,

package/lib/src/utils/minify-brand-page-metadata.d.ts

@@ -24,7 +24,6 @@ type MinifiedHeader = {
     logoAssetKey?: string;
     backgroundStyle?: {
         backgroundColor?: string;
-        backgroundOpacity?: number;
     };
     navigation?: {
         displayType?: string;

package/lib/src/utils/minify-brand-page-metadata.js

@@ -389,18 +389,6 @@ const minifyFooter = (footer, logoAssetKey) => {
             : undefined,
     };
 };
-// Fully opaque (100) is the default, so it's omitted to keep the AI payload small.
-const minifyHeaderBackgroundStyle = (backgroundStyle) => {
-    const backgroundColor = backgroundStyle?.backgroundColor;
-    if (!backgroundColor)
-        return undefined;
-    const backgroundOpacity = backgroundStyle.backgroundOpacity;
-    return {
-        backgroundColor,
-        ...(backgroundOpacity !== undefined &&
-            backgroundOpacity < 100 && { backgroundOpacity }),
-    };
-};
 const minifyHeader = (header, logoAssetKey) => {
     if (!header)
         return undefined;
@@ -411,7 +399,9 @@ const minifyHeader = (header, logoAssetKey) => {
         logoImageHeight: header.logoImageHeight || undefined,
         logoImageWidth: header.logoImageWidth || undefined,
         ...(logoAssetKey && { logoAssetKey }),
-        backgroundStyle: minifyHeaderBackgroundStyle(header.backgroundStyle),
+        backgroundStyle: header.backgroundStyle?.backgroundColor
+            ? { backgroundColor: header.backgroundStyle.backgroundColor }
+            : undefined,
         navigation: nav
             ? {
                 displayType: nav.displayType || undefined,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "6.1.13-ast-opacity",
+  "version": "6.1.13",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/brand-page/models/index.ts

@@ -90,10 +90,6 @@ export type BackgroundStyle = Partial<
   Omit<BrandPageCssStyle, 'backgroundColor'>
 >;
 
-export interface BackgroundColorStyle extends BrandPageCssStyle {
-  backgroundOpacity?: number;
-}
-
 /**
  * The complete default for a page's background media overlay. Seeded into
  * metadata (constructor for new models, migration-20.5 for persisted partials) so
@@ -738,7 +734,7 @@ export abstract class AbstractPageHeaderStyles {
   logoImage: LogoImageModel;
   logoTemplateImage: LogoTemplateImageModel | undefined;
   logoImageBase64Url?: string;
-  backgroundStyle: BackgroundColorStyle;
+  backgroundStyle: BrandPageCssStyle;
   style: BrandPageCssStyle;
   viewport: ViewportsType;
 
@@ -775,10 +771,7 @@ export abstract class AbstractPageHeaderStyles {
     this.logoVariation = options.logoVariation || 0;
 
     this.style = options.style || {};
-    this.backgroundStyle = {
-      ...(options.backgroundStyle || {}),
-      backgroundOpacity: options.backgroundStyle?.backgroundOpacity ?? 100,
-    };
+    this.backgroundStyle = options.backgroundStyle || {};
   }
 }
 

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

@@ -152,9 +152,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
       "viewport": "mobile",
     },
     "pageHeaderDesktop": PageHeaderDesktop {
-      "backgroundStyle": {
-        "backgroundOpacity": 100,
-      },
+      "backgroundStyle": {},
       "displayStyle": "desktop-tab-vertical-stack-centered-logo-centered-menu",
       "isLogoOptional": false,
       "isLogoVisible": true,
@@ -227,9 +225,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
       "viewport": "desktop",
     },
     "pageHeaderMobile": PageHeaderMobile {
-      "backgroundStyle": {
-        "backgroundOpacity": 100,
-      },
+      "backgroundStyle": {},
       "displayStyle": "mobile-tab-vertical-stack-centered-logo-centered-menu",
       "isLogoOptional": false,
       "isLogoVisible": true,
@@ -649,9 +645,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       "viewport": "mobile",
     },
     "pageHeaderDesktop": PageHeaderDesktop {
-      "backgroundStyle": {
-        "backgroundOpacity": 100,
-      },
+      "backgroundStyle": {},
       "displayStyle": "desktop-tab-vertical-stack-centered-logo-centered-menu",
       "isLogoOptional": false,
       "isLogoVisible": true,
@@ -724,9 +718,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       "viewport": "desktop",
     },
     "pageHeaderMobile": PageHeaderMobile {
-      "backgroundStyle": {
-        "backgroundOpacity": 100,
-      },
+      "backgroundStyle": {},
       "displayStyle": "mobile-tab-vertical-stack-centered-logo-centered-menu",
       "isLogoOptional": false,
       "isLogoVisible": true,
@@ -1130,9 +1122,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       "viewport": "mobile",
     },
     "pageHeaderDesktop": PageHeaderDesktop {
-      "backgroundStyle": {
-        "backgroundOpacity": 100,
-      },
+      "backgroundStyle": {},
       "displayStyle": "desktop-tab-vertical-stack-centered-logo-centered-menu",
       "isLogoOptional": false,
       "isLogoVisible": true,
@@ -1205,9 +1195,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       "viewport": "desktop",
     },
     "pageHeaderMobile": PageHeaderMobile {
-      "backgroundStyle": {
-        "backgroundOpacity": 100,
-      },
+      "backgroundStyle": {},
       "displayStyle": "mobile-tab-vertical-stack-centered-logo-centered-menu",
       "isLogoOptional": false,
       "isLogoVisible": true,

package/src/brand-page/utils/__snapshots__/migration2.util.test.ts.snap

@@ -137,9 +137,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
       "viewport": "mobile",
     },
     "pageHeaderDesktop": PageHeaderDesktop {
-      "backgroundStyle": {
-        "backgroundOpacity": 100,
-      },
+      "backgroundStyle": {},
       "displayStyle": "desktop-tab-vertical-stack-centered-logo-centered-menu",
       "isLogoOptional": false,
       "isLogoVisible": true,
@@ -213,9 +211,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
       "viewport": "desktop",
     },
     "pageHeaderMobile": PageHeaderMobile {
-      "backgroundStyle": {
-        "backgroundOpacity": 100,
-      },
+      "backgroundStyle": {},
       "displayStyle": "mobile-tab-vertical-stack-centered-logo-centered-menu",
       "isLogoOptional": false,
       "isLogoVisible": true,

package/src/brand-page/utils/__snapshots__/model.util.test.ts.snap

@@ -136,9 +136,7 @@ BrandPageModel {
     "viewport": "mobile",
   },
   "pageHeaderDesktop": PageHeaderDesktop {
-    "backgroundStyle": {
-      "backgroundOpacity": 100,
-    },
+    "backgroundStyle": {},
     "displayStyle": "desktop-tab-vertical-stack-centered-logo-centered-menu",
     "isLogoOptional": false,
     "isLogoVisible": true,
@@ -212,9 +210,7 @@ BrandPageModel {
     "viewport": "desktop",
   },
   "pageHeaderMobile": PageHeaderMobile {
-    "backgroundStyle": {
-      "backgroundOpacity": 100,
-    },
+    "backgroundStyle": {},
     "displayStyle": "mobile-tab-vertical-stack-centered-logo-centered-menu",
     "isLogoOptional": false,
     "isLogoVisible": true,
@@ -597,9 +593,7 @@ BrandPageModel {
     "viewport": "mobile",
   },
   "pageHeaderDesktop": PageHeaderDesktop {
-    "backgroundStyle": {
-      "backgroundOpacity": 100,
-    },
+    "backgroundStyle": {},
     "displayStyle": "desktop-tab-vertical-stack-centered-logo-centered-menu",
     "isLogoOptional": false,
     "isLogoVisible": true,
@@ -673,9 +667,7 @@ BrandPageModel {
     "viewport": "desktop",
   },
   "pageHeaderMobile": PageHeaderMobile {
-    "backgroundStyle": {
-      "backgroundOpacity": 100,
-    },
+    "backgroundStyle": {},
     "displayStyle": "mobile-tab-vertical-stack-centered-logo-centered-menu",
     "isLogoOptional": false,
     "isLogoVisible": true,

package/src/brand-page/utils/view-model.util.test.ts

@@ -6,13 +6,12 @@ import {
   type ContactFormContent,
   type ColorItem,
 } from '../models';
-import { BRAND_PAGE_TYPES, PageHeaderDesktop, PageStyles } from '../models';
+import { BRAND_PAGE_TYPES, PageStyles } from '../models';
 import {
   mapToBannerSectionViewModel,
   mapToContactFormViewModel,
   mapToImageViewModel,
   mapToMailingListViewModel,
-  mapToPageHeaderViewModel,
   mapToProfileViewModel,
   mapToTextViewModel,
   mapToViewModel,
@@ -509,149 +508,6 @@ describe('view model util', () => {
     expect(url.searchParams.has('w')).toBe(true);
     expect(wParamValue).toBe('1080');
   });
-
-  describe('mapToPageHeaderViewModel background opacity (BP-5851)', () => {
-    const mapHeader = (header: PageHeaderDesktop) =>
-      mapToPageHeaderViewModel(header, new PageStyles(), []);
-
-    test('constructing without an explicit backgroundOpacity defaults it to 100 and renders unchanged', () => {
-      const header = new PageHeaderDesktop({
-        backgroundStyle: { backgroundColor: '#ff0000' },
-      });
-
-      expect(header.backgroundStyle.backgroundOpacity).toBe(100);
-
-      const viewModel = mapHeader(header);
-
-      expect(viewModel.backgroundStyle).toEqual({ backgroundColor: '#ff0000' });
-    });
-
-    test('header constructed with no options still gets a concrete backgroundOpacity', () => {
-      expect(new PageHeaderDesktop().backgroundStyle.backgroundOpacity).toBe(
-        100,
-      );
-    });
-
-    test('un-constructed legacy header (parsed metadata that never ran the constructor) renders fully opaque', () => {
-      // The maker's live-preview path can hold the header JSON.parse'd verbatim.
-      const header = JSON.parse(
-        JSON.stringify(
-          new PageHeaderDesktop({
-            backgroundStyle: { backgroundColor: '#ff0000' },
-          }),
-        ),
-      ) as PageHeaderDesktop;
-
-      delete header.backgroundStyle.backgroundOpacity;
-
-      const viewModel = mapHeader(header);
-
-      expect(viewModel.backgroundStyle).toEqual({ backgroundColor: '#ff0000' });
-    });
-
-    test('a header with backgroundStyle itself absent renders fully opaque instead of throwing', () => {
-      const header = new PageHeaderDesktop();
-
-      delete (header as { backgroundStyle?: unknown }).backgroundStyle;
-
-      expect(() => mapHeader(header)).not.toThrow();
-      expect(mapHeader(header).backgroundStyle).toEqual({});
-    });
-
-    test('opacity 100 (default) leaves backgroundColor unchanged', () => {
-      const header = new PageHeaderDesktop({
-        backgroundStyle: { backgroundColor: '#ff0000', backgroundOpacity: 100 },
-      });
-
-      const viewModel = mapHeader(header);
-
-      expect(viewModel.backgroundStyle.backgroundColor).toBe('#ff0000');
-    });
-
-    test('opacity 60 composites into the expected 8-digit hex backgroundColor', () => {
-      const header = new PageHeaderDesktop({
-        backgroundStyle: { backgroundColor: '#ff0000', backgroundOpacity: 60 },
-      });
-
-      const viewModel = mapHeader(header);
-
-      expect(viewModel.backgroundStyle.backgroundColor).toBe('#ff000099');
-    });
-
-    test('opacity below 100 composites into an 8-digit hex backgroundColor', () => {
-      const header = new PageHeaderDesktop({
-        backgroundStyle: { backgroundColor: '#ff0000', backgroundOpacity: 50 },
-      });
-
-      const viewModel = mapHeader(header);
-
-      expect(viewModel.backgroundStyle.backgroundColor).toBe('#ff000080');
-    });
-
-    test('opacity 0 composites to the transparent keyword', () => {
-      const header = new PageHeaderDesktop({
-        backgroundStyle: { backgroundColor: '#ff0000', backgroundOpacity: 0 },
-      });
-
-      const viewModel = mapHeader(header);
-
-      expect(viewModel.backgroundStyle.backgroundColor).toBe('transparent');
-    });
-
-    test('a palette-matched (var(--palette-n)) backgroundColor is faded via color-mix, not handed back unfaded', () => {
-      const header = new PageHeaderDesktop({
-        backgroundStyle: {
-          backgroundColor: 'var(--palette-1)',
-          backgroundOpacity: 30,
-        },
-      });
-
-      const viewModel = mapHeader(header);
-
-      expect(viewModel.backgroundStyle.backgroundColor).toBe(
-        'color-mix(in srgb, var(--palette-1) 30%, transparent)',
-      );
-    });
-
-    test('transparent backgroundColor is left unchanged regardless of opacity', () => {
-      const header = new PageHeaderDesktop({
-        backgroundStyle: {
-          backgroundColor: 'transparent',
-          backgroundOpacity: 40,
-        },
-      });
-
-      const viewModel = mapHeader(header);
-
-      expect(viewModel.backgroundStyle.backgroundColor).toBe('transparent');
-    });
-
-    test('unset backgroundColor is left unchanged regardless of opacity', () => {
-      const header = new PageHeaderDesktop({
-        backgroundStyle: { backgroundOpacity: 40 },
-      });
-
-      const viewModel = mapHeader(header);
-
-      expect(viewModel.backgroundStyle.backgroundColor).toBeUndefined();
-    });
-
-    test.each([100, 30])(
-      'backgroundOpacity %i never leaks into the rendered style, and CSS opacity is never set (children must stay opaque)',
-      (backgroundOpacity) => {
-        const header = new PageHeaderDesktop({
-          backgroundStyle: { backgroundColor: '#ff0000', backgroundOpacity },
-        });
-
-        const viewModel = mapHeader(header);
-
-        expect(viewModel.backgroundStyle).not.toHaveProperty(
-          'backgroundOpacity',
-        );
-        expect(viewModel.backgroundStyle.opacity).toBeUndefined();
-      },
-    );
-  });
 });
 
 // The reCAPTCHA footnote colour is a raw colour anchored to the surface it sits on.

package/src/brand-page/utils/view-model.util.ts

@@ -88,10 +88,9 @@ import type {
   NavItemViewModel,
 } from '../view-models';
 import {
-  backgroundColorFromStyle,
   isTransparentColour,
   mutedTextForBackground,
-  withColorOpacity,
+  backgroundColorFromStyle,
 } from './color.util';
 import { resolveColorReference } from './color-palette.util';
 import {
@@ -1282,31 +1281,7 @@ export const mapToPageHeaderViewModel = (
             hamburgerMenuStyle,
           }),
     style: pageHeader.style,
-    backgroundStyle: getHeaderBackgroundStyleWithOpacity(pageHeader),
-  };
-};
-
-// Folds backgroundOpacity into backgroundColor's alpha so only the container's paint fades, not its children.
-const getHeaderBackgroundStyleWithOpacity = (
-  pageHeader: PageHeaderDesktop | PageHeaderMobile,
-): BrandPageCssStyle => {
-  // Real defaults: an un-constructed maker header, or metadata older than migration-11's backfill, can lack these entirely.
-  const { backgroundOpacity = 100, ...backgroundStyle } =
-    pageHeader.backgroundStyle ?? {};
-  const { backgroundColor } = backgroundStyle;
-
-  if (
-    backgroundOpacity >= 100 ||
-    !backgroundColor ||
-    isTransparentColour(backgroundColor)
-  ) {
-    return backgroundStyle;
-  }
-
-  // withColorOpacity, not setRgbAlpha: fades a var(--palette-n) reference too.
-  return {
-    ...backgroundStyle,
-    backgroundColor: withColorOpacity(backgroundColor, backgroundOpacity / 100),
+    backgroundStyle: pageHeader.backgroundStyle,
   };
 };
 

package/src/brand-page/view-models.ts

@@ -259,11 +259,9 @@ export interface PageHeaderViewModel extends Omit<
   | 'logoTemplateImage'
   | 'logoImageHeight'
   | 'logoImageWidth'
-  | 'backgroundStyle'
 > {
   logo: LogoViewModel;
   pages: PageViewModel[];
-  backgroundStyle: BrandPageCssStyle;
 }
 
 export interface PageFooterViewModel extends Omit<

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

@@ -1841,7 +1841,6 @@
     "headerSettings": "Kopfzeilen-Einstellungen",
     "navigationSectionTitle": "Navigation",
     "headerSectionTitle": "Header",
-    "backgroundOpacity": "Hintergrunddeckkraft",
     "buttonSectionTitle": "Schaltfläche",
     "footerSettings": "Fußzeilen-Einstellungen",
     "managePages": "Seiten verwalten",

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

@@ -1841,7 +1841,6 @@
     "headerSettings": "Configuración del encabezado",
     "navigationSectionTitle": "Navegación",
     "headerSectionTitle": "Encabezado",
-    "backgroundOpacity": "Opacidad del fondo",
     "buttonSectionTitle": "Botón",
     "footerSettings": "Configuración del pie de página",
     "managePages": "Gestionar páginas",

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

@@ -1841,7 +1841,6 @@
     "headerSettings": "Paramètres d'en-tête",
     "navigationSectionTitle": "Navigation",
     "headerSectionTitle": "En-tête",
-    "backgroundOpacity": "Opacité de l'arrière-plan",
     "buttonSectionTitle": "Bouton",
     "footerSettings": "Paramètres de pied de page",
     "managePages": "Gérer les pages",

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

@@ -1841,7 +1841,6 @@
     "headerSettings": "Paramètres d'en-tête",
     "navigationSectionTitle": "Navigation",
     "headerSectionTitle": "En-tête",
-    "backgroundOpacity": "Opacité de l'arrière-plan",
     "buttonSectionTitle": "Bouton",
     "footerSettings": "Paramètres de pied de page",
     "managePages": "Gérer les pages",

package/src/bundles/bundled-translations.json

@@ -1841,7 +1841,6 @@
     "headerSettings": "Header Settings",
     "navigationSectionTitle": "Navigation",
     "headerSectionTitle": "Header",
-    "backgroundOpacity": "Background opacity",
     "buttonSectionTitle": "Button",
     "footerSettings": "Footer Settings",
     "managePages": "Manage Pages",

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

@@ -1841,7 +1841,6 @@
     "headerSettings": "Configurações do cabeçalho",
     "navigationSectionTitle": "Navegação",
     "headerSectionTitle": "Cabeçalho",
-    "backgroundOpacity": "Opacidade do plano de fundo",
     "buttonSectionTitle": "Botão",
     "footerSettings": "Definições de rodapé",
     "managePages": "Gerenciar páginas",

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

@@ -1841,7 +1841,6 @@
     "headerSettings": "Definições de cabeçalho",
     "navigationSectionTitle": "Navegação",
     "headerSectionTitle": "Cabeçalho",
-    "backgroundOpacity": "Opacidade do fundo",
     "buttonSectionTitle": "Botão",
     "footerSettings": "Definições de rodapé",
     "managePages": "Gerir páginas",

package/src/shared/page-settings/components/header-settings-panel/HeaderSettingsPanel.vue

@@ -95,22 +95,6 @@
         :toggle-unique-id="sectionName"
         @update:model-value="onSelectColor"
       />
-      <div
-        v-if="showBackgroundOpacity"
-        data-test-header-background-opacity
-        class="tw-mt-4"
-      >
-        <span class="header-settings-panel_option-title">
-          {{ pageSettingsTr('backgroundOpacity') }}
-        </span>
-        <Slider
-          :model-value="backgroundOpacity"
-          :min="0"
-          :max="100"
-          suffix="%"
-          @update:model-value="onBackgroundOpacityChange"
-        />
-      </div>
     </CollapsiblePanel>
 
     <CollapsiblePanel
@@ -160,7 +144,6 @@
 import {
   CollapsiblePanel,
   HelloBar,
-  Slider,
   TabMenu,
   Toggle,
 } from '@designcrowd/fe-shared-lib';
@@ -180,7 +163,6 @@ export default {
     CollapsiblePanel,
     ColorField,
     HelloBar,
-    Slider,
     TabMenu,
     Toggle,
     HeaderDisplayStyle,

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

@@ -3,7 +3,6 @@
     "headerSettings": "Kopfzeilen-Einstellungen",
     "navigationSectionTitle": "Navigation",
     "headerSectionTitle": "Header",
-    "backgroundOpacity": "Hintergrunddeckkraft",
     "buttonSectionTitle": "Schaltfläche",
     "footerSettings": "Fußzeilen-Einstellungen",
     "managePages": "Seiten verwalten",

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

@@ -3,7 +3,6 @@
     "headerSettings": "Configuración del encabezado",
     "navigationSectionTitle": "Navegación",
     "headerSectionTitle": "Encabezado",
-    "backgroundOpacity": "Opacidad del fondo",
     "buttonSectionTitle": "Botón",
     "footerSettings": "Configuración del pie de página",
     "managePages": "Gestionar páginas",

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

@@ -3,7 +3,6 @@
     "headerSettings": "Paramètres d'en-tête",
     "navigationSectionTitle": "Navigation",
     "headerSectionTitle": "En-tête",
-    "backgroundOpacity": "Opacité de l'arrière-plan",
     "buttonSectionTitle": "Bouton",
     "footerSettings": "Paramètres de pied de page",
     "managePages": "Gérer les pages",