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

Author: thetaPC

core/src/components/toast/toast.scss renamed to core/src/components/toast/toast.common.scss

@@ -1,4 +1,5 @@
-@import "./toast.vars";
+@import "../../themes/mixins" ;
+@import "../../themes/functions.string";
 
 // Toast
 // --------------------------------------------------
@@ -53,10 +54,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,20 @@
+@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);
+
+  z-index: 1001;
+}

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,
 })