chore(): sync with main

core/src/components/toast/test/basic/index.html

@@ -116,6 +116,14 @@
           Light Color Toast
         </ion-button>
 
+        <ion-button
+          expand="block"
+          id="translucent-color-toast"
+          onclick="openToast({message: 'click to close', buttons: ['Close'], translucent: true, color: 'success'})"
+        >
+          Translucent Color Toast
+        </ion-button>
+
         <ion-button
           expand="block"
           id="custom-class-toast"

core/src/components/toast/test/basic/toast.e2e.ts

@@ -95,6 +95,14 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
       const { container } = await toastFixture.openToast('#translucent-toast');
       await toastFixture.screenshot('translucent', screenshot, container);
     });
+
+    test('should set translucency correctly when color is provided', async ({ page }) => {
+      const toastFixture = new ToastFixture(page);
+      await toastFixture.goto(config);
+
+      const { container } = await toastFixture.openToast('#translucent-color-toast');
+      await toastFixture.screenshot('translucent-color', screenshot, container);
+    });
   });
 
   /**

core/src/components/toast/toast.ios.scss

@@ -30,6 +30,10 @@
     background: $toast-ios-translucent-background-color;
     backdrop-filter: $toast-ios-translucent-filter;
   }
+
+  :host(.ion-color.toast-translucent) .toast-wrapper {
+    background: #{current-color(base, $toast-ios-translucent-background-color-alpha)};
+  }
 }
 
 .toast-wrapper.toast-top {