fix(toast): allow color for translucent toast (#27652)

Issue number: resolves #27567

---------

<!-- 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?
Translucent toasts do not have the appropriate background color when the
`color` property is set on the toast.
<!-- Please describe the current behavior that you are 
modifying. -->
<img width="554" alt="Screenshot 2023-06-14 at 5 46 45 PM"
src="https://github.com/ionic-team/ionic-framework/assets/14926794/05f7522c-23bc-44f8-af42-b82034cbe067">

## What is the new behavior?

- Translucent toasts can have a background color based on the `color`
property of the toast.

<!-- Please describe the behavior or changes that are being added by
this PR. -->
<img width="553" alt="Screenshot 2023-06-14 at 5 46 28 PM"
src="https://github.com/ionic-team/ionic-framework/assets/14926794/28a6345b-5bf3-494c-af81-0d53877295df">

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

Note: Translucent toasts are only available in `ios` mode.

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

---------

Co-authored-by: ionitron <hi@ionicframework.com>

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 {