feat(header): add translucent support on ionic theme (#30493)

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

When using ionic theme there's no support for translucent prop on the
ion-header.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Add support for translucent prop on Ionic theme
- Adjusted tests to also run for ionic-md 

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

[Ionic header
fade](https://ionic-framework-git-rou-11911-ionic1.vercel.app/src/components/header/test/fade?ionic:theme=ionic)

---------

Co-authored-by: ionitron <[email protected]>

Author: BenOsodrac

core/src/components.d.ts

@@ -1460,7 +1460,7 @@ export namespace Components {
          */
         "theme"?: "ios" | "md" | "ionic";
         /**
-          * If `true`, the header will be translucent. Only applies when the theme is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).  Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content.
+          * If `true`, the header will be translucent. Only applies when the theme is `"ios"` or `"ionic"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).  Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content.
           * @default false
          */
         "translucent": boolean;
@@ -7369,7 +7369,7 @@ declare namespace LocalJSX {
          */
         "theme"?: "ios" | "md" | "ionic";
         /**
-          * If `true`, the header will be translucent. Only applies when the theme is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).  Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content.
+          * If `true`, the header will be translucent. Only applies when the theme is `"ios"` or `"ionic"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).  Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content.
           * @default false
          */
         "translucent"?: boolean;

core/src/components/header/header.ionic.scss

@@ -17,3 +17,16 @@ ion-toolbar + ion-toolbar {
   --padding-start: #{globals.$ion-space-400};
   --padding-end: #{globals.$ion-space-400};
 }
+
+@supports (backdrop-filter: blur(0)) {
+  .header-background {
+    @include globals.position(0, 0, 0, 0);
+
+    position: absolute;
+
+    backdrop-filter: saturate(180%) blur(globals.$ion-scale-100);
+  }
+  .header-translucent-ionic ion-toolbar {
+    --opacity: 0.7;
+  }
+}

core/src/components/header/header.tsx

@@ -55,7 +55,7 @@ export class Header implements ComponentInterface {
 
   /**
    * If `true`, the header will be translucent.
-   * Only applies when the theme is `"ios"` and the device supports
+   * Only applies when the theme is `"ios"` or `"ionic"` and the device supports
    * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
    *
    * Note: In order to scroll content behind the header, the `fullscreen`
@@ -239,7 +239,7 @@ export class Header implements ComponentInterface {
         }}
         {...inheritedAttributes}
       >
-        {theme === 'ios' && translucent && <div class="header-background"></div>}
+        {theme !== 'md' && translucent && <div class="header-background"></div>}
         <slot></slot>
       </Host>
     );

core/src/components/header/test/fade/header.e2e.ts

@@ -2,9 +2,9 @@ import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
 /**
- * Translucent effect is only available in iOS mode.
+ * Translucent effect is only available in iOS and Ionic mode.
  */
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('header: fade'), () => {
     test('should not have visual regressions with fade header', async ({ page }) => {
       await page.goto('/src/components/header/test/fade', config);