feat(toast): add the default styles for ionic theme

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

@@ -118,7 +118,7 @@
           id="translucent-color-toast"
           onclick="openToast({message: 'click to close', buttons: ['Close'], translucent: true, color: 'success'})"
         >
-          Translucent Color Toast
+          Translucent Color Toast (iOS theme only)
         </button>
 
         <button

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

@@ -44,7 +44,10 @@ class ToastFixture {
   }
 }
 
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+/**
+ * This behavior does not vary across directions.
+ */
+configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('toast: position rendering'), () => {
     let toastFixture: ToastFixture;
     test.beforeEach(async ({ page }) => {
@@ -124,7 +127,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
   });
 });
 
-configs().forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('toast: rendering'), () => {
     let toastFixture: ToastFixture;
     test.beforeEach(async ({ page }) => {

core/src/components/toast/toast.scss → core/src/components/toast/toast.common.scss

@@ -1,4 +1,7 @@
-@import "./toast.vars";
+@import "../../themes/mixins";
+// Necessary for the mixins to work.
+@import "../../themes/functions.string";
+@import "../../themes/functions.color";
 
 // Toast
 // --------------------------------------------------
@@ -53,10 +56,7 @@
 
   color: var(--color);
 
-  font-family: $font-family-base;
-
   contain: strict;
-  z-index: $z-index-overlay;
   pointer-events: none;
 }
 

core/src/components/toast/toast.ionic.scss

@@ -0,0 +1,76 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "./toast.common";
+
+// Ionic Toast
+// --------------------------------------------------
+
+:host {
+  --background: #{globals.$ionic-color-neutral-1200};
+  --border-radius: #{globals.$ionic-border-radius-400};
+  --box-shadow: #{globals.$ionic-elevation-400};
+  --button-color: #{globals.$ionic-color-base-white};
+  --color: #{globals.$ionic-color-base-white};
+  --max-width: 343px;
+  --start: 8px;
+  --end: 8px;
+
+  @include globals.typography(globals.$ionic-body-md-medium);
+
+  // TODO(ROU-10853): replace this value with a layer token.
+  z-index: 1001;
+}
+
+.toast-wrapper {
+  @include globals.margin(auto);
+
+  display: block;
+  position: absolute;
+
+  opacity: 0.01;
+
+  // TODO(ROU-10853): replace this value with a layer token.
+  z-index: 10;
+}
+
+.toast-content {
+  @include globals.padding(globals.$ionic-space-300, globals.$ionic-space-400);
+}
+
+// Toast Button
+// --------------------------------------------------
+
+.toast-layout-baseline .toast-button-group-start {
+  @include globals.margin(null, null, null, globals.$ionic-space-400);
+}
+
+.toast-layout-stacked .toast-button-group-start {
+  @include globals.margin(globals.$ionic-space-400, globals.$ionic-space-400, null, null);
+}
+
+.toast-layout-baseline .toast-button-group-end {
+  @include globals.margin(null, globals.$ionic-space-400, null, null);
+}
+
+.toast-layout-stacked .toast-button-group-end {
+  @include globals.margin(null, globals.$ionic-space-400, globals.$ionic-space-400, null);
+}
+
+.toast-button {
+  @include globals.typography(globals.$ionic-body-md-link);
+  @include globals.padding(0);
+
+  // necessary for ripple to work properly
+  position: relative;
+
+  background-color: transparent;
+
+  overflow: hidden;
+}
+
+// Toast Icon
+// --------------------------------------------------
+
+.toast-icon,
+.toast-button-icon {
+  font-size: globals.$ionic-font-size-600;
+}

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

@@ -1,4 +1,4 @@
-@import "./toast";
+@import "./toast.native";
 @import "./toast.ios.vars";
 
 // iOS Toast

core/src/components/toast/toast.md.scss

@@ -1,4 +1,4 @@
-@import "./toast";
+@import "./toast.native";
 @import "./toast.md.vars";
 
 // Material Design Toast

core/src/components/toast/toast.native.scss

@@ -0,0 +1,8 @@
+@use "./toast.common";
+@import "./toast.vars";
+
+:host {
+  font-family: $font-family-base;
+
+  z-index: $z-index-overlay;
+}

core/src/components/toast/toast.tsx

@@ -60,7 +60,7 @@ import type {
   styleUrls: {
     ios: 'toast.ios.scss',
     md: 'toast.md.scss',
-    ionic: 'toast.md.scss',
+    ionic: 'toast.ionic.scss',
   },
   shadow: true,
 })