From 7e58d81dd9120586fe8e7452abd4cf5bf8964b14 Mon Sep 17 00:00:00 2001
From: amandaesmith333 <amandaesmith333@gmail.com>
Date: Mon, 29 Aug 2022 13:04:39 -0500
Subject: [PATCH 01/10] docs(toast): remove phone demo, inline TOC, and usage

---
 docs/api/toast.md | 383 ----------------------------------------------
 1 file changed, 383 deletions(-)

diff --git a/docs/api/toast.md b/docs/api/toast.md
index 2ef9e1be4ab..d2752ab6cbc 100644
--- a/docs/api/toast.md
+++ b/docs/api/toast.md
@@ -1,8 +1,5 @@
 ---
 title: "ion-toast"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/toast/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/toast/index.html"
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
@@ -20,20 +17,9 @@ import Slots from '@site/static/auto-generated/toast/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<APITOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
-/>
-
-
-
 A Toast is a subtle notification commonly used in modern applications. It can be used to provide feedback about an operation or to display a system message. The toast appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app.
 
 ## Positioning
@@ -112,375 +98,6 @@ While this is not a complete list, here are some guidelines to follow when using
 
 * For toasts with long messages, consider adjusting the `duration` property to allow users enough time to read the content of the toast.
 
-
-
-## Usage
-
-<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'stencil', label: 'Stencil' }, { value: 'vue', label: 'Vue' }]}>
-
-<TabItem value="angular">
-
-```typescript
-import { Component } from '@angular/core';
-import { ToastController } from '@ionic/angular';
-
-@Component({
-  selector: 'toast-example',
-  templateUrl: 'toast-example.html',
-  styleUrls: ['./toast-example.css'],
-})
-export class ToastExample {
-
-  constructor(public toastController: ToastController) {}
-
-  async presentToast() {
-    const toast = await this.toastController.create({
-      message: 'Your settings have been saved.',
-      duration: 2000
-    });
-    toast.present();
-  }
-
-  async presentToastWithOptions() {
-    const toast = await this.toastController.create({
-      header: 'Toast header',
-      message: 'Click to Close',
-      icon: 'information-circle',
-      position: 'top',
-      buttons: [
-        {
-          side: 'start',
-          icon: 'star',
-          text: 'Favorite',
-          handler: () => {
-            console.log('Favorite clicked');
-          }
-        }, {
-          text: 'Done',
-          role: 'cancel',
-          handler: () => {
-            console.log('Cancel clicked');
-          }
-        }
-      ]
-    });
-    await toast.present();
-
-    const { role } = await toast.onDidDismiss();
-    console.log('onDidDismiss resolved with role', role);
-  }
-
-}
-```
-
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```javascript
-async function presentToast() {
-  const toast = document.createElement('ion-toast');
-  toast.message = 'Your settings have been saved.';
-  toast.duration = 2000;
-
-  document.body.appendChild(toast);
-  return toast.present();
-}
-
-async function presentToastWithOptions() {
-  const toast = document.createElement('ion-toast');
-  toast.header = 'Toast header';
-  toast.message = 'Click to Close';
-  toast.icon = 'information-circle',
-  toast.position = 'top';
-  toast.buttons = [
-    {
-      side: 'start',
-      icon: 'star',
-      text: 'Favorite',
-      handler: () => {
-        console.log('Favorite clicked');
-      }
-    }, {
-      text: 'Done',
-      role: 'cancel',
-      handler: () => {
-        console.log('Cancel clicked');
-      }
-    }
-  ];
-
-  document.body.appendChild(toast);
-  await toast.present();
-
-  const { role } = await toast.onDidDismiss();
-  console.log('onDidDismiss resolved with role', role);
-}
-```
-
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-/* Using the useIonToast Hook */
-
-import React from 'react';
-import { IonButton, IonContent, IonPage, useIonToast } from '@ionic/react';
-
-const ToastExample: React.FC = () => {
-  const [present, dismiss] = useIonToast();
-
-  return (
-    <IonPage>
-      <IonContent>
-        <IonButton
-          expand="block"
-          onClick={() =>
-            present({
-              buttons: [{ text: 'hide', handler: () => dismiss() }],
-              message: 'toast from hook, click hide to dismiss',
-              onDidDismiss: () => console.log('dismissed'),
-              onWillDismiss: () => console.log('will dismiss'),
-            })
-          }
-        >
-          Show Toast
-        </IonButton>
-        <IonButton
-          expand="block"
-          onClick={() => present('hello from hook', 3000)}
-        >
-          Show Toast using params, closes in 3 secs
-        </IonButton>
-        <IonButton expand="block" onClick={dismiss}>
-          Hide Toast
-        </IonButton>
-      </IonContent>
-    </IonPage>
-  );
-};
-```
-
-```tsx
-/* Using the IonToast Component */
-
-import React, { useState } from 'react';
-import { IonToast, IonContent, IonButton } from '@ionic/react';
-import { informationCircle, star } from 'ionicons/icons';
-
-export const ToastExample: React.FC = () => {
-  const [showToast1, setShowToast1] = useState(false);
-  const [showToast2, setShowToast2] = useState(false);
-
-  return (
-    <IonContent>
-      <IonButton onClick={() => setShowToast1(true)} expand="block">Show Toast 1</IonButton>
-      <IonButton onClick={() => setShowToast2(true)} expand="block">Show Toast 2</IonButton>
-      <IonToast
-        isOpen={showToast1}
-        onDidDismiss={() => setShowToast1(false)}
-        message="Your settings have been saved."
-        duration={200}
-      />
-
-      <IonToast
-        isOpen={showToast2}
-        onDidDismiss={() => setShowToast2(false)}
-        message="Click to Close"
-        icon={informationCircle}
-        position="top"
-        buttons={[
-          {
-            side: 'start',
-            icon: star,
-            text: 'Favorite',
-            handler: () => {
-              console.log('Favorite clicked');
-            }
-          },
-          {
-            text: 'Done',
-            role: 'cancel',
-            handler: () => {
-              console.log('Cancel clicked');
-            }
-          }
-        ]}
-      />
-    </IonContent>
-  );
-};
-```
-
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-import { toastController } from '@ionic/core';
-
-@Component({
-  tag: 'toast-example',
-  styleUrl: 'toast-example.css'
-})
-export class ToastExample {
-  async presentToast() {
-    const toast = await toastController.create({
-      message: 'Your settings have been saved.',
-      duration: 2000
-    });
-    toast.present();
-  }
-
-  async presentToastWithOptions() {
-    const toast = await toastController.create({
-      header: 'Toast header',
-      message: 'Click to Close',
-      icon: 'information-circle',
-      position: 'top',
-      buttons: [
-        {
-          side: 'start',
-          icon: 'star',
-          text: 'Favorite',
-          handler: () => {
-            console.log('Favorite clicked');
-          }
-        }, {
-          text: 'Done',
-          role: 'cancel',
-          handler: () => {
-            console.log('Cancel clicked');
-          }
-        }
-      ]
-    });
-    await toast.present();
-
-    const { role } = await toast.onDidDismiss();
-    console.log('onDidDismiss resolved with role', role);
-  }
-
-  render() {
-    return [
-      <ion-content>
-        <ion-button onClick={() => this.presentToast()}>Present Toast</ion-button>
-        <ion-button onClick={() => this.presentToastWithOptions()}>Present Toast: Options</ion-button>
-      </ion-content>
-    ];
-  }
-}
-```
-
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <ion-page>
-    <ion-content class="ion-padding">
-      <ion-button @click="openToast">Open Toast</ion-button>
-      <ion-button @click="openToastOptions">Open Toast: Options</ion-button>
-    </ion-content>
-  </ion-page>
-</template>
-
-<script>
-import { IonButton, IonContent, IonPage, toastController } from '@ionic/vue';
-import { informationCircle } from 'ionicons/icons';
-
-export default {
-  components: { IonButton, IonContent, IonPage },
-  methods: {
-    async openToast() {
-      const toast = await toastController
-        .create({
-          message: 'Your settings have been saved.',
-          duration: 2000
-        })
-      return toast.present();
-    },
-    async openToastOptions() {
-      const toast = await toastController
-        .create({
-          header: 'Toast header',
-          message: 'Click to Close',
-          icon: informationCircle,
-          position: 'top',
-          buttons: [
-            {
-              side: 'start',
-              icon: 'star',
-              text: 'Favorite',
-              handler: () => {
-                console.log('Favorite clicked');
-              }
-            }, {
-              text: 'Done',
-              role: 'cancel',
-              handler: () => {
-                console.log('Cancel clicked');
-              }
-            }
-          ]
-        })
-      await toast.present();
-
-      const { role } = await toast.onDidDismiss();
-      console.log('onDidDismiss resolved with role', role);
-    },
-  },
-}
-</script>
-```
-
-Developers can also use this component directly in their template:
-
-```html
-<template>
-  <ion-button @click="setOpen(true)">Show Toast</ion-button>
-  <ion-toast
-    :is-open="isOpenRef"
-    message="Your settings have been saved."
-    :duration="2000"
-    @didDismiss="setOpen(false)"
-  >
-  </ion-toast>
-</template>
-
-<script>
-import { IonToast, IonButton } from '@ionic/vue';
-import { defineComponent, ref } from 'vue';
-
-export default defineComponent({
-  components: { IonToast, IonButton },
-  setup() {
-    const isOpenRef = ref(false);
-    const setOpen = (state: boolean) => isOpenRef.value = state;
-
-    return { isOpenRef, setOpen }
-  }
-});
-</script>
-```
-
-
-</TabItem>
-
-</Tabs>
-
 ## Properties
 <Props />
 

From 1d01bd0e6347e7f358625f327e70440c60bb0f69 Mon Sep 17 00:00:00 2001
From: amandaesmith333 <amandaesmith333@gmail.com>
Date: Tue, 30 Aug 2022 13:22:48 -0500
Subject: [PATCH 02/10] docs(toast): add playgrounds

---
 docs/api/toast.md                             | 87 ++++++++++++++++++-
 .../toast/buttons/angular/angular_html.md     |  5 ++
 .../usage/toast/buttons/angular/angular_ts.md | 39 +++++++++
 static/usage/toast/buttons/demo.html          | 65 ++++++++++++++
 static/usage/toast/buttons/index.md           | 24 +++++
 static/usage/toast/buttons/javascript.md      | 34 ++++++++
 static/usage/toast/buttons/react.md           | 41 +++++++++
 static/usage/toast/buttons/vue.md             | 46 ++++++++++
 .../usage/toast/icon/angular/angular_html.md  |  3 +
 static/usage/toast/icon/angular/angular_ts.md | 22 +++++
 static/usage/toast/icon/demo.html             | 36 ++++++++
 static/usage/toast/icon/index.md              | 24 +++++
 static/usage/toast/icon/javascript.md         | 15 ++++
 static/usage/toast/icon/react.md              | 24 +++++
 static/usage/toast/icon/vue.md                | 28 ++++++
 .../controller/angular/angular_html.md        |  5 ++
 .../controller/angular/angular_ts.md          | 22 +++++
 .../toast/presenting/controller/demo.html     | 44 ++++++++++
 .../toast/presenting/controller/index.md      | 24 +++++
 .../toast/presenting/controller/javascript.md | 17 ++++
 .../toast/presenting/controller/react.md      | 25 ++++++
 .../usage/toast/presenting/controller/vue.md  | 26 ++++++
 .../toast/styling/angular/angular_css.md      | 15 ++++
 .../toast/styling/angular/angular_html.md     |  3 +
 .../usage/toast/styling/angular/angular_ts.md | 28 ++++++
 static/usage/toast/styling/demo.html          | 58 +++++++++++++
 static/usage/toast/styling/index.md           | 33 +++++++
 static/usage/toast/styling/javascript.md      | 37 ++++++++
 static/usage/toast/styling/react/react_css.md | 15 ++++
 static/usage/toast/styling/react/react_ts.md  | 31 +++++++
 static/usage/toast/styling/vue.md             | 46 ++++++++++
 31 files changed, 921 insertions(+), 1 deletion(-)
 create mode 100644 static/usage/toast/buttons/angular/angular_html.md
 create mode 100644 static/usage/toast/buttons/angular/angular_ts.md
 create mode 100644 static/usage/toast/buttons/demo.html
 create mode 100644 static/usage/toast/buttons/index.md
 create mode 100644 static/usage/toast/buttons/javascript.md
 create mode 100644 static/usage/toast/buttons/react.md
 create mode 100644 static/usage/toast/buttons/vue.md
 create mode 100644 static/usage/toast/icon/angular/angular_html.md
 create mode 100644 static/usage/toast/icon/angular/angular_ts.md
 create mode 100644 static/usage/toast/icon/demo.html
 create mode 100644 static/usage/toast/icon/index.md
 create mode 100644 static/usage/toast/icon/javascript.md
 create mode 100644 static/usage/toast/icon/react.md
 create mode 100644 static/usage/toast/icon/vue.md
 create mode 100644 static/usage/toast/presenting/controller/angular/angular_html.md
 create mode 100644 static/usage/toast/presenting/controller/angular/angular_ts.md
 create mode 100644 static/usage/toast/presenting/controller/demo.html
 create mode 100644 static/usage/toast/presenting/controller/index.md
 create mode 100644 static/usage/toast/presenting/controller/javascript.md
 create mode 100644 static/usage/toast/presenting/controller/react.md
 create mode 100644 static/usage/toast/presenting/controller/vue.md
 create mode 100644 static/usage/toast/styling/angular/angular_css.md
 create mode 100644 static/usage/toast/styling/angular/angular_html.md
 create mode 100644 static/usage/toast/styling/angular/angular_ts.md
 create mode 100644 static/usage/toast/styling/demo.html
 create mode 100644 static/usage/toast/styling/index.md
 create mode 100644 static/usage/toast/styling/javascript.md
 create mode 100644 static/usage/toast/styling/react/react_css.md
 create mode 100644 static/usage/toast/styling/react/react_ts.md
 create mode 100644 static/usage/toast/styling/vue.md

diff --git a/docs/api/toast.md b/docs/api/toast.md
index d2752ab6cbc..5bc6a05ca32 100644
--- a/docs/api/toast.md
+++ b/docs/api/toast.md
@@ -22,18 +22,103 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 A Toast is a subtle notification commonly used in modern applications. It can be used to provide feedback about an operation or to display a system message. The toast appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app.
 
-## Positioning
+## Presenting
+
+### Positioning
 
 Toasts can be positioned at the top, bottom or middle of the viewport. The position can be passed upon creation. The possible values are `top`, `bottom` and `middle`. If the position is not specified, the toast will be displayed at the bottom of the viewport.
 
+### Controller
+
+import ControllerExample from '@site/static/usage/toast/presenting/controller/index.md';
+
+<ControllerExample />
+
+### Inline
+
+When using Ionic with React or Vue, `ion-toast` can also be placed directly in the template through use of the `isOpen` property. Note that `isOpen` must be set to `false` manually when the toast is dismissed; it will not be updated automatically.
+
+<Tabs defaultValue="react" values={[{ value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}>
+<TabItem value="react">
+
+```tsx
+import React, { useState } from 'react';
+import { IonButton, IonToast } from '@ionic/react';
+
+function Example() {
+  const [showToast, setShowToast] = useState(false);
+
+  return (
+    <>
+      <IonButton onClick={() => setShowToast(true)}>Show Toast</IonButton>
+      <IonToast
+        isOpen={showToast}
+        onDidDismiss={() => setShowToast(false)}
+        message="Hello World!"
+        duration={1500}
+      />
+    </>
+  );
+}
+```
+
+</TabItem>
+<TabItem value="vue">
+
+```html
+<template>
+  <ion-button @click="setOpen(true)">Show Toast</ion-button>
+  <ion-toast
+    :is-open="isOpenRef"
+    @didDismiss="setOpen(false)"
+    message="Hello World!"
+    :duration="1500"
+  ></ion-toast>
+</template>
+
+<script lang="ts">
+import { IonButton, IonToast } from '@ionic/vue';
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  components: { IonButton, IonToast },
+  setup() {
+    const isOpenRef = ref(false);
+    const setOpen = (state: boolean) => isOpenRef.value = state;
+    
+    return { isOpenRef, setOpen }
+  }
+});
+</script>
+```
+
+</TabItem>
+</Tabs>
+
 ## Dismissing
 
 The toast can be dismissed automatically after a specific amount of time by passing the number of milliseconds to display it in the `duration` of the toast options. If a button with a role of `"cancel"` is added, then that button will dismiss the toast. To dismiss the toast after creation, call the `dismiss()` method on the instance.
 
+The following example demonstrates how to use the `buttons` property to add a button that automatically dismisses the toast when clicked, as well as how to collect the `role` of the dismiss event.
+
+import ButtonsPlayground from '@site/static/usage/toast/buttons/index.md';
+
+<ButtonsPlayground />
+
 ## Icons
 
 An icon can be added next to the content inside of the toast. In general, icons in toasts should be used to add additional style or context, not to grab the user's attention or elevate the priority of the toast. If you wish to convey a higher priority message to the user or guarantee a response, we recommend using an [Alert](alert.md) instead.
 
+import IconPlayground from '@site/static/usage/toast/icon/index.md';
+
+<IconPlayground />
+
+## Styling
+
+import StylingPlayground from '@site/static/usage/toast/styling/index.md';
+
+<StylingPlayground />
+
 ## Interfaces
 
 ### ToastButton
diff --git a/static/usage/toast/buttons/angular/angular_html.md b/static/usage/toast/buttons/angular/angular_html.md
new file mode 100644
index 00000000000..5d457cdbf2f
--- /dev/null
+++ b/static/usage/toast/buttons/angular/angular_html.md
@@ -0,0 +1,5 @@
+```html
+<ion-button (click)="presentToast()">Click Me</ion-button>
+<p>{{ handlerMessage }}</p>
+<p>{{ roleMessage }}</p>
+```
\ No newline at end of file
diff --git a/static/usage/toast/buttons/angular/angular_ts.md b/static/usage/toast/buttons/angular/angular_ts.md
new file mode 100644
index 00000000000..54dc88ac35c
--- /dev/null
+++ b/static/usage/toast/buttons/angular/angular_ts.md
@@ -0,0 +1,39 @@
+```ts
+import { Component } from '@angular/core';
+import { ToastController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  handlerMessage = '';
+  roleMessage = '';
+
+  constructor(private toastController: ToastController) {}
+
+  async presentToast() {
+    const toast = await this.toastController.create({
+      message: 'Hello World!',
+      duration: 3000,
+      buttons: [
+        {
+          text: 'More Info',
+          role: 'info',
+          handler: () => { this.handlerMessage = 'More Info clicked'; }
+        },
+        {
+          text: 'Dismiss',
+          role: 'cancel',
+          handler: () => { this.handlerMessage = 'Dismiss clicked'; }
+        }
+      ]
+    });
+
+    await toast.present();
+
+    const { role } = await toast.onDidDismiss();
+    this.roleMessage = `Dismissed with role: ${role}`;
+  }
+}
+```
\ No newline at end of file
diff --git a/static/usage/toast/buttons/demo.html b/static/usage/toast/buttons/demo.html
new file mode 100644
index 00000000000..712f9ef756b
--- /dev/null
+++ b/static/usage/toast/buttons/demo.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Toast</title>
+  <link rel="stylesheet" href="../../common.css" />
+  <script src="../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+    }
+
+    .container p {
+      margin-bottom: 0;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button onclick="presentToast()">Click Me</ion-button>
+        <p id="handlerResult"></p>
+        <p id="roleResult"></p>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const handlerOutput = document.querySelector('#handlerResult');
+    const roleOutput = document.querySelector('#roleResult');
+
+    async function presentToast() {
+      const toast = document.createElement('ion-toast');
+      toast.message = 'Hello World!';
+      toast.duration = 3000;
+      toast.buttons = [
+        {
+          text: 'More Info',
+          role: 'info',
+          handler: () => { handlerOutput.innerText = 'More Info clicked'; }
+        },
+        {
+          text: 'Dismiss',
+          role: 'cancel',
+          handler: () => { handlerOutput.innerText = 'Dismiss clicked'; }
+        }
+      ];
+
+      document.body.appendChild(toast);
+      await toast.present();
+
+      const { role } = await toast.onDidDismiss();
+      roleOutput.innerText = `Dismissed with role: ${role}`;
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/toast/buttons/index.md b/static/usage/toast/buttons/index.md
new file mode 100644
index 00000000000..4098f2f915e
--- /dev/null
+++ b/static/usage/toast/buttons/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angularHTML from './angular/angular_html.md';
+import angularTS from './angular/angular_ts.md';
+
+<Playground
+  devicePreview
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.ts': angularTS,
+      },
+    },
+  }}
+  src="usage/toast/buttons/demo.html"
+/>
diff --git a/static/usage/toast/buttons/javascript.md b/static/usage/toast/buttons/javascript.md
new file mode 100644
index 00000000000..620eeaca08e
--- /dev/null
+++ b/static/usage/toast/buttons/javascript.md
@@ -0,0 +1,34 @@
+```html
+<ion-button onclick="presentToast()">Click Me</ion-button>
+<p id="handlerResult"></p>
+<p id="roleResult"></p>
+
+<script>
+  const handlerOutput = document.querySelector('#handlerResult');
+  const roleOutput = document.querySelector('#roleResult');
+
+  async function presentToast() {
+    const toast = document.createElement('ion-toast');
+    toast.message = 'Hello World!';
+    toast.duration = 3000;
+    toast.buttons = [
+      {
+        text: 'More Info',
+        role: 'info',
+        handler: () => { handlerOutput.innerText = 'More Info clicked'; }
+      },
+      {
+        text: 'Dismiss',
+        role: 'cancel',
+        handler: () => { handlerOutput.innerText = 'Dismiss clicked'; }
+      }
+    ];
+
+    document.body.appendChild(toast);
+    await toast.present();
+
+    const { role } = await toast.onDidDismiss();
+    roleOutput.innerText = `Dismissed with role: ${role}`;
+  }
+</script>
+```
diff --git a/static/usage/toast/buttons/react.md b/static/usage/toast/buttons/react.md
new file mode 100644
index 00000000000..ac08a9b543b
--- /dev/null
+++ b/static/usage/toast/buttons/react.md
@@ -0,0 +1,41 @@
+```tsx
+import React, { useState } from 'react';
+import { IonButton, useIonToast } from '@ionic/react';
+
+function Example() {
+  const [presentToast] = useIonToast();
+  const [handlerMessage, setHandlerMessage] = useState('');
+  const [roleMessage, setRoleMessage] = useState('');
+
+  return (
+    <>
+      <IonButton
+        onClick={() => {
+          presentToast({
+            message: 'Hello World!',
+            duration: 3000,
+            onDidDismiss: (e: CustomEvent) => setRoleMessage(`Dismissed with role: ${e.detail.role}`),
+            buttons: [
+              {
+                text: 'More Info',
+                role: 'info',
+                handler: () => { setHandlerMessage('More Info clicked'); }
+              },
+              {
+                text: 'Dismiss',
+                role: 'cancel',
+                handler: () => { setHandlerMessage('Dismiss clicked'); }
+              }
+            ]
+          })
+        }}
+      >
+        Click Me
+      </IonButton>
+      <p>{handlerMessage}</p>
+      <p>{roleMessage}</p>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/toast/buttons/vue.md b/static/usage/toast/buttons/vue.md
new file mode 100644
index 00000000000..ec7da81c54c
--- /dev/null
+++ b/static/usage/toast/buttons/vue.md
@@ -0,0 +1,46 @@
+```html
+<template>
+  <ion-button @click="presentToast">Click Me</ion-button>
+  <p>{{ handlerMessage }}</p>
+  <p>{{ roleMessage }}</p>
+</template>
+
+<script lang="ts">
+  import { IonButton, toastController } from '@ionic/vue';
+
+  export default {
+    components: { IonButton },
+    data() {
+      return {
+        handlerMessage: '',
+        roleMessage: '',
+      };
+    },
+    methods: {
+      async presentToast() {
+        const toast = await toastController.create({
+          message: 'Hello World!',
+          duration: 3000,
+          buttons: [
+            {
+              text: 'More Info',
+              role: 'info',
+              handler: () => { this.handlerMessage = 'More Info clicked'; }
+            },
+            {
+              text: 'Dismiss',
+              role: 'cancel',
+              handler: () => { this.handlerMessage = 'Dismiss clicked'; }
+            }
+          ]
+        });
+
+        await toast.present();
+
+        const { role } = await toast.onDidDismiss();
+        this.roleMessage = `Dismissed with role: ${role}`;
+      },
+    },
+  };
+</script>
+```
diff --git a/static/usage/toast/icon/angular/angular_html.md b/static/usage/toast/icon/angular/angular_html.md
new file mode 100644
index 00000000000..976194efc1e
--- /dev/null
+++ b/static/usage/toast/icon/angular/angular_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-button (click)="presentToast()">Click Me</ion-button>
+```
\ No newline at end of file
diff --git a/static/usage/toast/icon/angular/angular_ts.md b/static/usage/toast/icon/angular/angular_ts.md
new file mode 100644
index 00000000000..addffa2daf9
--- /dev/null
+++ b/static/usage/toast/icon/angular/angular_ts.md
@@ -0,0 +1,22 @@
+```ts
+import { Component } from '@angular/core';
+import { ToastController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  constructor(private toastController: ToastController) {}
+
+  async presentToast() {
+    const toast = await this.toastController.create({
+      message: 'Hello World!',
+      duration: 1500,
+      icon: 'globe'
+    });
+
+    await toast.present();
+  }
+}
+```
\ No newline at end of file
diff --git a/static/usage/toast/icon/demo.html b/static/usage/toast/icon/demo.html
new file mode 100644
index 00000000000..99fe478b55d
--- /dev/null
+++ b/static/usage/toast/icon/demo.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Toast</title>
+  <link rel="stylesheet" href="../../common.css" />
+  <script src="../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button onclick="presentToast()">Click Me</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    async function presentToast() {
+      const toast = document.createElement('ion-toast');
+      toast.message = 'Hello World!';
+      toast.duration = 1500;
+      toast.icon = 'globe';
+
+      document.body.appendChild(toast);
+      await toast.present();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/toast/icon/index.md b/static/usage/toast/icon/index.md
new file mode 100644
index 00000000000..f575f525540
--- /dev/null
+++ b/static/usage/toast/icon/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angularHTML from './angular/angular_html.md';
+import angularTS from './angular/angular_ts.md';
+
+<Playground
+  devicePreview
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.ts': angularTS,
+      },
+    },
+  }}
+  src="usage/toast/icon/demo.html"
+/>
diff --git a/static/usage/toast/icon/javascript.md b/static/usage/toast/icon/javascript.md
new file mode 100644
index 00000000000..36261273ddc
--- /dev/null
+++ b/static/usage/toast/icon/javascript.md
@@ -0,0 +1,15 @@
+```html
+<ion-button onclick="presentToast()">Click Me</ion-button>
+
+<script>
+  async function presentToast() {
+    const toast = document.createElement('ion-toast');
+    toast.message = 'Hello World!';
+    toast.duration = 1500;
+    toast.icon = 'globe';
+
+    document.body.appendChild(toast);
+    await toast.present();
+  }
+</script>
+```
diff --git a/static/usage/toast/icon/react.md b/static/usage/toast/icon/react.md
new file mode 100644
index 00000000000..2f3cdb52e8b
--- /dev/null
+++ b/static/usage/toast/icon/react.md
@@ -0,0 +1,24 @@
+```tsx
+import React, { useState } from 'react';
+import { IonButton, useIonToast } from '@ionic/react';
+import { globe } from 'ionicons/icons';
+
+function Example() {
+  const [presentToast] = useIonToast();
+
+  return (
+    <IonButton
+      onClick={() => {
+        presentToast({
+          message: 'Hello World!',
+          duration: 1500,
+          icon: globe
+        })
+      }}
+    >
+      Click Me
+    </IonButton>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/toast/icon/vue.md b/static/usage/toast/icon/vue.md
new file mode 100644
index 00000000000..d3a123f598b
--- /dev/null
+++ b/static/usage/toast/icon/vue.md
@@ -0,0 +1,28 @@
+```html
+<template>
+  <ion-button @click="presentToast">Click Me</ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton, toastController } from '@ionic/vue';
+  import { globe } from 'ionicons/icons';
+
+  export default {
+    components: { IonButton },
+    methods: {
+      async presentToast() {
+        const toast = await toastController.create({
+          message: 'Hello World!',
+          duration: 1500,
+          icon: globe
+        });
+
+        await toast.present();
+
+        const { role } = await toast.onDidDismiss();
+        this.roleMessage = `Dismissed with role: ${role}`;
+      },
+    },
+  };
+</script>
+```
diff --git a/static/usage/toast/presenting/controller/angular/angular_html.md b/static/usage/toast/presenting/controller/angular/angular_html.md
new file mode 100644
index 00000000000..962fcd0e355
--- /dev/null
+++ b/static/usage/toast/presenting/controller/angular/angular_html.md
@@ -0,0 +1,5 @@
+```html
+<ion-button expand="block" (click)="presentToast('top')">Present Toast At the Top</ion-button>
+<ion-button expand="block" (click)="presentToast('middle')">Present Toast At the Middle</ion-button>
+<ion-button expand="block" (click)="presentToast('bottom')">Present Toast At the Bottom</ion-button>
+```
\ No newline at end of file
diff --git a/static/usage/toast/presenting/controller/angular/angular_ts.md b/static/usage/toast/presenting/controller/angular/angular_ts.md
new file mode 100644
index 00000000000..c772728c3c1
--- /dev/null
+++ b/static/usage/toast/presenting/controller/angular/angular_ts.md
@@ -0,0 +1,22 @@
+```ts
+import { Component } from '@angular/core';
+import { ToastController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  constructor(private toastController: ToastController) {}
+
+  async presentToast(position: 'top' | 'middle' | 'bottom') {
+    const toast = await this.toastController.create({
+      message: 'Hello World!',
+      duration: 1500,
+      position: position
+    });
+
+    await toast.present();
+  }
+}
+```
\ No newline at end of file
diff --git a/static/usage/toast/presenting/controller/demo.html b/static/usage/toast/presenting/controller/demo.html
new file mode 100644
index 00000000000..9515f7e5f76
--- /dev/null
+++ b/static/usage/toast/presenting/controller/demo.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Toast</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-direction: column;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button expand="block" onclick="presentToast('top')">Present Toast At the Top</ion-button>
+        <ion-button expand="block" onclick="presentToast('middle')">Present Toast At the Middle</ion-button>
+        <ion-button expand="block" onclick="presentToast('bottom')">Present Toast At the Bottom</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    async function presentToast(position) {
+      const toast = document.createElement('ion-toast');
+      toast.message = 'Hello World!';
+      toast.duration = 1500;
+      toast.position = position;
+
+      document.body.appendChild(toast);
+      await toast.present();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/toast/presenting/controller/index.md b/static/usage/toast/presenting/controller/index.md
new file mode 100644
index 00000000000..ea63d7f9f42
--- /dev/null
+++ b/static/usage/toast/presenting/controller/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angularHTML from './angular/angular_html.md';
+import angularTS from './angular/angular_ts.md';
+
+<Playground
+  devicePreview
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.ts': angularTS,
+      },
+    },
+  }}
+  src="usage/toast/presenting/controller/demo.html"
+/>
diff --git a/static/usage/toast/presenting/controller/javascript.md b/static/usage/toast/presenting/controller/javascript.md
new file mode 100644
index 00000000000..7d2b1e569b5
--- /dev/null
+++ b/static/usage/toast/presenting/controller/javascript.md
@@ -0,0 +1,17 @@
+```html
+<ion-button expand="block" onclick="presentToast('top')">Present Toast At the Top</ion-button>
+<ion-button expand="block" onclick="presentToast('middle')">Present Toast At the Middle</ion-button>
+<ion-button expand="block" onclick="presentToast('bottom')">Present Toast At the Bottom</ion-button>
+
+<script>
+  async function presentToast(position) {
+    const toast = document.createElement('ion-toast');
+    toast.message = 'Hello World!';
+    toast.duration = 1500;
+    toast.position = position;
+
+    document.body.appendChild(toast);
+    await toast.present();
+  }
+</script>
+```
diff --git a/static/usage/toast/presenting/controller/react.md b/static/usage/toast/presenting/controller/react.md
new file mode 100644
index 00000000000..1dd38b3cd48
--- /dev/null
+++ b/static/usage/toast/presenting/controller/react.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+import { IonButton, useIonToast } from '@ionic/react';
+
+function Example() {
+  const [present] = useIonToast();
+
+  const presentToast = (position: 'top' | 'middle' | 'bottom') => {
+    present({
+      message: 'Hello World!',
+      duration: 1500,
+      position: position
+    });
+  };
+
+  return (
+    <>
+      <IonButton expand="block" onClick={() => presentToast('top')}>Present Toast At the Top</IonButton>
+      <IonButton expand="block" onClick={() => presentToast('middle')}>Present Toast At the Middle</IonButton>
+      <IonButton expand="block" onClick={() => presentToast('bottom')}>Present Toast At the Bottom</IonButton>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/toast/presenting/controller/vue.md b/static/usage/toast/presenting/controller/vue.md
new file mode 100644
index 00000000000..71910cb5238
--- /dev/null
+++ b/static/usage/toast/presenting/controller/vue.md
@@ -0,0 +1,26 @@
+```html
+<template>
+  <ion-button expand="block" @click="() => presentToast('top')">Present Toast At the Top</ion-button>
+  <ion-button expand="block" @click="() => presentToast('middle')">Present Toast At the Middle</ion-button>
+  <ion-button expand="block" @click="() => presentToast('bottom')">Present Toast At the Bottom</ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton, toastController } from '@ionic/vue';
+
+  export default {
+    components: { IonButton },
+    methods: {
+      async presentToast(position: 'top' | 'middle' | 'bottom') {
+        const toast = await toastController.create({
+          message: 'Hello World!',
+          duration: 1500,
+          position: position
+        });
+
+        await toast.present();
+      },
+    },
+  };
+</script>
+```
diff --git a/static/usage/toast/styling/angular/angular_css.md b/static/usage/toast/styling/angular/angular_css.md
new file mode 100644
index 00000000000..3f04512eda7
--- /dev/null
+++ b/static/usage/toast/styling/angular/angular_css.md
@@ -0,0 +1,15 @@
+```css
+ion-toast.custom-toast {
+  --background: darkblue;
+  --button-color: lightblue;
+  --color: white;
+}
+    
+ion-toast.custom-toast::part(message) {
+  font-style: italic;
+}
+
+ion-toast.custom-toast::part(button) {
+  border-left: 1px solid white;
+}
+```
\ No newline at end of file
diff --git a/static/usage/toast/styling/angular/angular_html.md b/static/usage/toast/styling/angular/angular_html.md
new file mode 100644
index 00000000000..91e6579dfa8
--- /dev/null
+++ b/static/usage/toast/styling/angular/angular_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-button (click)="presentToast()">Click Me</ion-button>
+```
diff --git a/static/usage/toast/styling/angular/angular_ts.md b/static/usage/toast/styling/angular/angular_ts.md
new file mode 100644
index 00000000000..62c8151b0f4
--- /dev/null
+++ b/static/usage/toast/styling/angular/angular_ts.md
@@ -0,0 +1,28 @@
+```ts
+import { Component } from '@angular/core';
+import { ToastController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  constructor(private toastController: ToastController) {}
+
+  async presentToast() {
+    const toast = await this.toastController.create({
+      message: 'Hello Styled World!',
+      duration: 3000,
+      cssClass: 'custom-toast',
+      buttons: [
+        {
+          text: 'Dismiss',
+          role: 'cancel'
+        }
+      ],
+    });
+
+    await toast.present();
+  }
+}
+```
diff --git a/static/usage/toast/styling/demo.html b/static/usage/toast/styling/demo.html
new file mode 100644
index 00000000000..158d2024678
--- /dev/null
+++ b/static/usage/toast/styling/demo.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Toast</title>
+  <link rel="stylesheet" href="../../common.css" />
+  <script src="../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-toast.custom-toast {
+      --background: darkblue;
+      --button-color: lightblue;
+      --color: white;
+    }
+    
+    ion-toast.custom-toast::part(message) {
+      font-style: italic;
+    }
+
+    ion-toast.custom-toast::part(button) {
+      border-left: 1px solid white;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-button onclick="presentToast()">Click Me</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    async function presentToast() {
+      const toast = document.createElement('ion-toast');
+      toast.message = 'Hello Styled World!';
+      toast.duration = 3000;
+      toast.cssClass = 'custom-toast';
+      toast.buttons = [
+        {
+          text: 'Dismiss',
+          role: 'cancel'
+        }
+      ];
+
+      document.body.appendChild(toast);
+      await toast.present();
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/toast/styling/index.md b/static/usage/toast/styling/index.md
new file mode 100644
index 00000000000..b53c07f3a49
--- /dev/null
+++ b/static/usage/toast/styling/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import reactTS from './react/react_ts.md';
+import reactCSS from './react/react_css.md';
+
+import angularHTML from './angular/angular_html.md';
+import angularCSS from './angular/angular_css.md';
+import angularTS from './angular/angular_ts.md';
+
+<Playground
+  devicePreview
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': reactTS,
+        'src/main.css': reactCSS,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.ts': angularTS,
+        'src/global.css': angularCSS
+      }
+    }
+  }}
+  src="usage/toast/styling/demo.html"
+/>
diff --git a/static/usage/toast/styling/javascript.md b/static/usage/toast/styling/javascript.md
new file mode 100644
index 00000000000..28480823082
--- /dev/null
+++ b/static/usage/toast/styling/javascript.md
@@ -0,0 +1,37 @@
+```html
+<ion-button onclick="presentToast()">Click Me</ion-button>
+
+<script>
+  async function presentToast() {
+    const toast = document.createElement('ion-toast');
+    toast.message = 'Hello Styled World!';
+    toast.duration = 3000;
+    toast.cssClass = 'custom-toast';
+    toast.buttons = [
+      {
+        text: 'Dismiss',
+        role: 'cancel'
+      }
+    ];
+
+    document.body.appendChild(toast);
+    await toast.present();
+  }
+</script>
+
+<style>
+  ion-toast.custom-toast {
+    --background: darkblue;
+    --button-color: lightblue;
+    --color: white;
+  }
+    
+  ion-toast.custom-toast::part(message) {
+    font-style: italic;
+  }
+
+  ion-toast.custom-toast::part(button) {
+    border-left: 1px solid white;
+  }
+</style>
+```
diff --git a/static/usage/toast/styling/react/react_css.md b/static/usage/toast/styling/react/react_css.md
new file mode 100644
index 00000000000..3f04512eda7
--- /dev/null
+++ b/static/usage/toast/styling/react/react_css.md
@@ -0,0 +1,15 @@
+```css
+ion-toast.custom-toast {
+  --background: darkblue;
+  --button-color: lightblue;
+  --color: white;
+}
+    
+ion-toast.custom-toast::part(message) {
+  font-style: italic;
+}
+
+ion-toast.custom-toast::part(button) {
+  border-left: 1px solid white;
+}
+```
\ No newline at end of file
diff --git a/static/usage/toast/styling/react/react_ts.md b/static/usage/toast/styling/react/react_ts.md
new file mode 100644
index 00000000000..fe88e64e8c7
--- /dev/null
+++ b/static/usage/toast/styling/react/react_ts.md
@@ -0,0 +1,31 @@
+```tsx
+import React from 'react';
+import { IonButton, useIonToast } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  const [presentToast] = useIonToast();
+
+  return (
+    <IonButton
+      onClick={() =>
+        presentToast({
+          message: 'Hello Styled World!',
+          duration: 3000,
+          cssClass: 'custom-toast',
+          buttons: [
+            {
+              text: 'Dismiss',
+              role: 'cancel'
+            }
+          ],
+        })
+      }
+    >
+      Click Me
+    </IonButton>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/toast/styling/vue.md b/static/usage/toast/styling/vue.md
new file mode 100644
index 00000000000..7a426119f27
--- /dev/null
+++ b/static/usage/toast/styling/vue.md
@@ -0,0 +1,46 @@
+```html
+<template>
+  <ion-button @click="presentToast">Click Me</ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton, toastController } from '@ionic/vue';
+
+  export default {
+    components: { IonButton },
+    methods: {
+      async presentToast() {
+        const toast = await toastController.create({
+          message: 'Hello Styled World!',
+          duration: 3000,
+          cssClass: 'custom-toast',
+          buttons: [
+            {
+              text: 'Dismiss',
+              role: 'cancel'
+            }
+          ],
+        });
+
+        await toast.present();
+      },
+    },
+  };
+</script>
+
+<style>
+  ion-toast.custom-toast {
+    --background: darkblue;
+    --button-color: lightblue;
+    --color: white;
+  }
+    
+  ion-toast.custom-toast::part(message) {
+    font-style: italic;
+  }
+
+  ion-toast.custom-toast::part(button) {
+    border-left: 1px solid white;
+  }
+</style>
+```

From f5de7666122a8111a1460e9421467b4958c1b396 Mon Sep 17 00:00:00 2001
From: amandaesmith333 <amandaesmith333@gmail.com>
Date: Thu, 1 Sep 2022 13:23:34 -0500
Subject: [PATCH 03/10] docs(toast): make styling example more realistic

---
 static/usage/toast/styling/angular/angular_css.md | 10 ++++++----
 static/usage/toast/styling/demo.html              | 10 ++++++----
 static/usage/toast/styling/javascript.md          | 10 ++++++----
 static/usage/toast/styling/react/react_css.md     | 10 ++++++----
 static/usage/toast/styling/vue.md                 | 10 ++++++----
 5 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/static/usage/toast/styling/angular/angular_css.md b/static/usage/toast/styling/angular/angular_css.md
index 3f04512eda7..9bcb8579e4a 100644
--- a/static/usage/toast/styling/angular/angular_css.md
+++ b/static/usage/toast/styling/angular/angular_css.md
@@ -1,8 +1,8 @@
 ```css
 ion-toast.custom-toast {
-  --background: darkblue;
-  --button-color: lightblue;
-  --color: white;
+  --background: #F4F4FA;
+  --box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.2);
+  --color: #908F96;
 }
     
 ion-toast.custom-toast::part(message) {
@@ -10,6 +10,8 @@ ion-toast.custom-toast::part(message) {
 }
 
 ion-toast.custom-toast::part(button) {
-  border-left: 1px solid white;
+  border-left: 1px solid #d2d2d2;
+  color: #030207;
+  font-size: 15px;
 }
 ```
\ No newline at end of file
diff --git a/static/usage/toast/styling/demo.html b/static/usage/toast/styling/demo.html
index 158d2024678..8b5b4944c6a 100644
--- a/static/usage/toast/styling/demo.html
+++ b/static/usage/toast/styling/demo.html
@@ -12,9 +12,9 @@
 
   <style>
     ion-toast.custom-toast {
-      --background: darkblue;
-      --button-color: lightblue;
-      --color: white;
+      --background: #F4F4FA;
+      --box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.2);
+      --color: #908F96;
     }
     
     ion-toast.custom-toast::part(message) {
@@ -22,7 +22,9 @@
     }
 
     ion-toast.custom-toast::part(button) {
-      border-left: 1px solid white;
+      border-left: 1px solid #d2d2d2;
+      color: #030207;
+      font-size: 15px;
     }
   </style>
 </head>
diff --git a/static/usage/toast/styling/javascript.md b/static/usage/toast/styling/javascript.md
index 28480823082..231c128c5cc 100644
--- a/static/usage/toast/styling/javascript.md
+++ b/static/usage/toast/styling/javascript.md
@@ -21,9 +21,9 @@
 
 <style>
   ion-toast.custom-toast {
-    --background: darkblue;
-    --button-color: lightblue;
-    --color: white;
+    --background: #F4F4FA;
+    --box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.2);
+    --color: #908F96;
   }
     
   ion-toast.custom-toast::part(message) {
@@ -31,7 +31,9 @@
   }
 
   ion-toast.custom-toast::part(button) {
-    border-left: 1px solid white;
+    border-left: 1px solid #d2d2d2;
+    color: #030207;
+    font-size: 15px;
   }
 </style>
 ```
diff --git a/static/usage/toast/styling/react/react_css.md b/static/usage/toast/styling/react/react_css.md
index 3f04512eda7..9bcb8579e4a 100644
--- a/static/usage/toast/styling/react/react_css.md
+++ b/static/usage/toast/styling/react/react_css.md
@@ -1,8 +1,8 @@
 ```css
 ion-toast.custom-toast {
-  --background: darkblue;
-  --button-color: lightblue;
-  --color: white;
+  --background: #F4F4FA;
+  --box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.2);
+  --color: #908F96;
 }
     
 ion-toast.custom-toast::part(message) {
@@ -10,6 +10,8 @@ ion-toast.custom-toast::part(message) {
 }
 
 ion-toast.custom-toast::part(button) {
-  border-left: 1px solid white;
+  border-left: 1px solid #d2d2d2;
+  color: #030207;
+  font-size: 15px;
 }
 ```
\ No newline at end of file
diff --git a/static/usage/toast/styling/vue.md b/static/usage/toast/styling/vue.md
index 7a426119f27..23d6aa25c77 100644
--- a/static/usage/toast/styling/vue.md
+++ b/static/usage/toast/styling/vue.md
@@ -30,9 +30,9 @@
 
 <style>
   ion-toast.custom-toast {
-    --background: darkblue;
-    --button-color: lightblue;
-    --color: white;
+    --background: #F4F4FA;
+    --box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.2);
+    --color: #908F96;
   }
     
   ion-toast.custom-toast::part(message) {
@@ -40,7 +40,9 @@
   }
 
   ion-toast.custom-toast::part(button) {
-    border-left: 1px solid white;
+    border-left: 1px solid #d2d2d2;
+    color: #030207;
+    font-size: 15px;
   }
 </style>
 ```

From 260a942458d5d58bff89f77c39d0c8f92b8b72c0 Mon Sep 17 00:00:00 2001
From: amandaesmith333 <amandaesmith333@gmail.com>
Date: Thu, 1 Sep 2022 13:26:46 -0500
Subject: [PATCH 04/10] docs(toast): add headers to toast demos

---
 static/usage/toast/buttons/demo.html               | 5 +++++
 static/usage/toast/icon/demo.html                  | 5 +++++
 static/usage/toast/presenting/controller/demo.html | 5 +++++
 static/usage/toast/styling/demo.html               | 5 +++++
 4 files changed, 20 insertions(+)

diff --git a/static/usage/toast/buttons/demo.html b/static/usage/toast/buttons/demo.html
index 712f9ef756b..54b07efb8f8 100644
--- a/static/usage/toast/buttons/demo.html
+++ b/static/usage/toast/buttons/demo.html
@@ -23,6 +23,11 @@
 
 <body>
   <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Toast</ion-title>
+      </ion-toolbar>
+    </ion-header>
     <ion-content>
       <div class="container">
         <ion-button onclick="presentToast()">Click Me</ion-button>
diff --git a/static/usage/toast/icon/demo.html b/static/usage/toast/icon/demo.html
index 99fe478b55d..62b5acf4178 100644
--- a/static/usage/toast/icon/demo.html
+++ b/static/usage/toast/icon/demo.html
@@ -13,6 +13,11 @@
 
 <body>
   <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Toast</ion-title>
+      </ion-toolbar>
+    </ion-header>
     <ion-content>
       <div class="container">
         <ion-button onclick="presentToast()">Click Me</ion-button>
diff --git a/static/usage/toast/presenting/controller/demo.html b/static/usage/toast/presenting/controller/demo.html
index 9515f7e5f76..9a2d1cc05cc 100644
--- a/static/usage/toast/presenting/controller/demo.html
+++ b/static/usage/toast/presenting/controller/demo.html
@@ -19,6 +19,11 @@
 
 <body>
   <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Toast</ion-title>
+      </ion-toolbar>
+    </ion-header>
     <ion-content>
       <div class="container">
         <ion-button expand="block" onclick="presentToast('top')">Present Toast At the Top</ion-button>
diff --git a/static/usage/toast/styling/demo.html b/static/usage/toast/styling/demo.html
index 8b5b4944c6a..382c7f64e44 100644
--- a/static/usage/toast/styling/demo.html
+++ b/static/usage/toast/styling/demo.html
@@ -31,6 +31,11 @@
 
 <body>
   <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Toast</ion-title>
+      </ion-toolbar>
+    </ion-header>
     <ion-content>
       <div class="container">
         <ion-button onclick="presentToast()">Click Me</ion-button>

From dd0e18953d5c28344f443f98128e5eae28d72788 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Thu, 1 Sep 2022 13:27:08 -0500
Subject: [PATCH 05/10] Update static/usage/toast/presenting/controller/vue.md

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
---
 static/usage/toast/presenting/controller/vue.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/static/usage/toast/presenting/controller/vue.md b/static/usage/toast/presenting/controller/vue.md
index 71910cb5238..ac520d0e7b9 100644
--- a/static/usage/toast/presenting/controller/vue.md
+++ b/static/usage/toast/presenting/controller/vue.md
@@ -1,8 +1,8 @@
 ```html
 <template>
-  <ion-button expand="block" @click="() => presentToast('top')">Present Toast At the Top</ion-button>
-  <ion-button expand="block" @click="() => presentToast('middle')">Present Toast At the Middle</ion-button>
-  <ion-button expand="block" @click="() => presentToast('bottom')">Present Toast At the Bottom</ion-button>
+  <ion-button expand="block" @click="presentToast('top')">Present Toast At the Top</ion-button>
+  <ion-button expand="block" @click="presentToast('middle')">Present Toast At the Middle</ion-button>
+  <ion-button expand="block" @click="presentToast('bottom')">Present Toast At the Bottom</ion-button>
 </template>
 
 <script lang="ts">

From c03922e40187362d7365dcfef9b3670c273b03d1 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Thu, 1 Sep 2022 13:28:20 -0500
Subject: [PATCH 06/10] Update static/usage/toast/icon/react.md

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
---
 static/usage/toast/icon/react.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/usage/toast/icon/react.md b/static/usage/toast/icon/react.md
index 2f3cdb52e8b..25d758c16b6 100644
--- a/static/usage/toast/icon/react.md
+++ b/static/usage/toast/icon/react.md
@@ -1,5 +1,5 @@
 ```tsx
-import React, { useState } from 'react';
+import React from 'react';
 import { IonButton, useIonToast } from '@ionic/react';
 import { globe } from 'ionicons/icons';
 

From c8e0edc6eb5687296360126bf1c11962a3da9bb7 Mon Sep 17 00:00:00 2001
From: amandaesmith333 <amandaesmith333@gmail.com>
Date: Thu, 1 Sep 2022 13:42:24 -0500
Subject: [PATCH 07/10] docs(toast): use controller for JS examples

---
 static/code/stackblitz/html/index.ts          |  3 +-
 static/usage/toast/buttons/demo.html          | 37 +++++++++++--------
 static/usage/toast/buttons/javascript.md      | 32 ++++++++--------
 static/usage/toast/icon/demo.html             | 17 ++++++---
 static/usage/toast/icon/javascript.md         | 12 +++---
 .../toast/presenting/controller/demo.html     | 15 +++++---
 .../toast/presenting/controller/javascript.md | 10 ++---
 static/usage/toast/styling/demo.html          | 27 ++++++++------
 static/usage/toast/styling/javascript.md      | 22 +++++------
 9 files changed, 98 insertions(+), 77 deletions(-)

diff --git a/static/code/stackblitz/html/index.ts b/static/code/stackblitz/html/index.ts
index 11b30d3e5c8..ffaf975593a 100644
--- a/static/code/stackblitz/html/index.ts
+++ b/static/code/stackblitz/html/index.ts
@@ -1,6 +1,6 @@
 import { defineCustomElements } from '@ionic/core/loader';
 
-import { loadingController, modalController, pickerController } from '@ionic/core';
+import { loadingController, modalController, pickerController, toastController } from '@ionic/core';
 
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/core/css/core.css';
@@ -22,3 +22,4 @@ defineCustomElements();
 (window as any).loadingController = loadingController;
 (window as any).modalController = modalController;
 (window as any).pickerController = pickerController;
+(window as any).toastController = toastController;
diff --git a/static/usage/toast/buttons/demo.html b/static/usage/toast/buttons/demo.html
index 54b07efb8f8..7f2807781e4 100644
--- a/static/usage/toast/buttons/demo.html
+++ b/static/usage/toast/buttons/demo.html
@@ -37,28 +37,33 @@
     </ion-content>
   </ion-app>
 
+  <script type="module">
+    import { toastController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
+    window.toastController = toastController;
+  </script>
+
   <script>
     const handlerOutput = document.querySelector('#handlerResult');
     const roleOutput = document.querySelector('#roleResult');
 
     async function presentToast() {
-      const toast = document.createElement('ion-toast');
-      toast.message = 'Hello World!';
-      toast.duration = 3000;
-      toast.buttons = [
-        {
-          text: 'More Info',
-          role: 'info',
-          handler: () => { handlerOutput.innerText = 'More Info clicked'; }
-        },
-        {
-          text: 'Dismiss',
-          role: 'cancel',
-          handler: () => { handlerOutput.innerText = 'Dismiss clicked'; }
-        }
-      ];
+      const toast = await toastController.create({
+        message: 'Hello World!',
+        duration: 3000,
+        buttons: [
+          {
+            text: 'More Info',
+            role: 'info',
+            handler: () => { handlerOutput.innerText = 'More Info clicked'; }
+          },
+          {
+            text: 'Dismiss',
+            role: 'cancel',
+            handler: () => { handlerOutput.innerText = 'Dismiss clicked'; }
+          }
+        ]
+      });
 
-      document.body.appendChild(toast);
       await toast.present();
 
       const { role } = await toast.onDidDismiss();
diff --git a/static/usage/toast/buttons/javascript.md b/static/usage/toast/buttons/javascript.md
index 620eeaca08e..c5cea896bb3 100644
--- a/static/usage/toast/buttons/javascript.md
+++ b/static/usage/toast/buttons/javascript.md
@@ -8,23 +8,23 @@
   const roleOutput = document.querySelector('#roleResult');
 
   async function presentToast() {
-    const toast = document.createElement('ion-toast');
-    toast.message = 'Hello World!';
-    toast.duration = 3000;
-    toast.buttons = [
-      {
-        text: 'More Info',
-        role: 'info',
-        handler: () => { handlerOutput.innerText = 'More Info clicked'; }
-      },
-      {
-        text: 'Dismiss',
-        role: 'cancel',
-        handler: () => { handlerOutput.innerText = 'Dismiss clicked'; }
-      }
-    ];
+    const toast = await toastController.create({
+      message: 'Hello World!',
+      duration: 3000,
+      buttons: [
+        {
+          text: 'More Info',
+          role: 'info',
+          handler: () => { handlerOutput.innerText = 'More Info clicked'; }
+        },
+        {
+          text: 'Dismiss',
+          role: 'cancel',
+          handler: () => { handlerOutput.innerText = 'Dismiss clicked'; }
+        }
+      ]
+    });
 
-    document.body.appendChild(toast);
     await toast.present();
 
     const { role } = await toast.onDidDismiss();
diff --git a/static/usage/toast/icon/demo.html b/static/usage/toast/icon/demo.html
index 62b5acf4178..d457f5e2d8e 100644
--- a/static/usage/toast/icon/demo.html
+++ b/static/usage/toast/icon/demo.html
@@ -25,14 +25,19 @@
     </ion-content>
   </ion-app>
 
+  <script type="module">
+    import { toastController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
+    window.toastController = toastController;
+  </script>
+
   <script>
     async function presentToast() {
-      const toast = document.createElement('ion-toast');
-      toast.message = 'Hello World!';
-      toast.duration = 1500;
-      toast.icon = 'globe';
-
-      document.body.appendChild(toast);
+      const toast = await this.toastController.create({
+        message: 'Hello World!',
+        duration: 1500,
+        icon: 'globe'
+      });
+      
       await toast.present();
     }
   </script>
diff --git a/static/usage/toast/icon/javascript.md b/static/usage/toast/icon/javascript.md
index 36261273ddc..b63e8550ab3 100644
--- a/static/usage/toast/icon/javascript.md
+++ b/static/usage/toast/icon/javascript.md
@@ -3,12 +3,12 @@
 
 <script>
   async function presentToast() {
-    const toast = document.createElement('ion-toast');
-    toast.message = 'Hello World!';
-    toast.duration = 1500;
-    toast.icon = 'globe';
-
-    document.body.appendChild(toast);
+    const toast = await this.toastController.create({
+      message: 'Hello World!',
+      duration: 1500,
+      icon: 'globe'
+    });
+      
     await toast.present();
   }
 </script>
diff --git a/static/usage/toast/presenting/controller/demo.html b/static/usage/toast/presenting/controller/demo.html
index 9a2d1cc05cc..bcf30161ab6 100644
--- a/static/usage/toast/presenting/controller/demo.html
+++ b/static/usage/toast/presenting/controller/demo.html
@@ -33,14 +33,19 @@
     </ion-content>
   </ion-app>
 
+  <script type="module">
+    import { toastController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
+    window.toastController = toastController;
+  </script>
+
   <script>
     async function presentToast(position) {
-      const toast = document.createElement('ion-toast');
-      toast.message = 'Hello World!';
-      toast.duration = 1500;
-      toast.position = position;
+      const toast = await this.toastController.create({
+        message: 'Hello World!',
+        duration: 1500,
+        position: position
+      });
 
-      document.body.appendChild(toast);
       await toast.present();
     }
   </script>
diff --git a/static/usage/toast/presenting/controller/javascript.md b/static/usage/toast/presenting/controller/javascript.md
index 7d2b1e569b5..5260ba8d1a1 100644
--- a/static/usage/toast/presenting/controller/javascript.md
+++ b/static/usage/toast/presenting/controller/javascript.md
@@ -5,12 +5,12 @@
 
 <script>
   async function presentToast(position) {
-    const toast = document.createElement('ion-toast');
-    toast.message = 'Hello World!';
-    toast.duration = 1500;
-    toast.position = position;
+    const toast = await this.toastController.create({
+      message: 'Hello World!',
+      duration: 1500,
+      position: position
+    });
 
-    document.body.appendChild(toast);
     await toast.present();
   }
 </script>
diff --git a/static/usage/toast/styling/demo.html b/static/usage/toast/styling/demo.html
index 382c7f64e44..41f53ddda43 100644
--- a/static/usage/toast/styling/demo.html
+++ b/static/usage/toast/styling/demo.html
@@ -43,20 +43,25 @@
     </ion-content>
   </ion-app>
 
+  <script type="module">
+    import { toastController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
+    window.toastController = toastController;
+  </script>
+
   <script>
     async function presentToast() {
-      const toast = document.createElement('ion-toast');
-      toast.message = 'Hello Styled World!';
-      toast.duration = 3000;
-      toast.cssClass = 'custom-toast';
-      toast.buttons = [
-        {
-          text: 'Dismiss',
-          role: 'cancel'
-        }
-      ];
+      const toast = await this.toastController.create({
+        message: 'Hello Styled World!',
+        duration: 3000,
+        cssClass: 'custom-toast',
+        buttons: [
+          {
+            text: 'Dismiss',
+            role: 'cancel'
+          }
+        ],
+      });
 
-      document.body.appendChild(toast);
       await toast.present();
     }
   </script>
diff --git a/static/usage/toast/styling/javascript.md b/static/usage/toast/styling/javascript.md
index 231c128c5cc..e60d0818754 100644
--- a/static/usage/toast/styling/javascript.md
+++ b/static/usage/toast/styling/javascript.md
@@ -3,18 +3,18 @@
 
 <script>
   async function presentToast() {
-    const toast = document.createElement('ion-toast');
-    toast.message = 'Hello Styled World!';
-    toast.duration = 3000;
-    toast.cssClass = 'custom-toast';
-    toast.buttons = [
-      {
-        text: 'Dismiss',
-        role: 'cancel'
-      }
-    ];
+    const toast = await this.toastController.create({
+      message: 'Hello Styled World!',
+      duration: 3000,
+      cssClass: 'custom-toast',
+      buttons: [
+        {
+          text: 'Dismiss',
+          role: 'cancel'
+        }
+      ],
+    });
 
-    document.body.appendChild(toast);
     await toast.present();
   }
 </script>

From 928dc66407c22fd4d44f7c230b79dd50760ddad3 Mon Sep 17 00:00:00 2001
From: amandaesmith333 <amandaesmith333@gmail.com>
Date: Thu, 1 Sep 2022 15:45:01 -0500
Subject: [PATCH 08/10] docs(toast): rename styling to theming

---
 docs/api/toast.md                                           | 6 +++---
 .../usage/toast/{styling => theming}/angular/angular_css.md | 0
 .../toast/{styling => theming}/angular/angular_html.md      | 0
 .../usage/toast/{styling => theming}/angular/angular_ts.md  | 0
 static/usage/toast/{styling => theming}/demo.html           | 0
 static/usage/toast/{styling => theming}/index.md            | 0
 static/usage/toast/{styling => theming}/javascript.md       | 0
 static/usage/toast/{styling => theming}/react/react_css.md  | 0
 static/usage/toast/{styling => theming}/react/react_ts.md   | 0
 static/usage/toast/{styling => theming}/vue.md              | 0
 10 files changed, 3 insertions(+), 3 deletions(-)
 rename static/usage/toast/{styling => theming}/angular/angular_css.md (100%)
 rename static/usage/toast/{styling => theming}/angular/angular_html.md (100%)
 rename static/usage/toast/{styling => theming}/angular/angular_ts.md (100%)
 rename static/usage/toast/{styling => theming}/demo.html (100%)
 rename static/usage/toast/{styling => theming}/index.md (100%)
 rename static/usage/toast/{styling => theming}/javascript.md (100%)
 rename static/usage/toast/{styling => theming}/react/react_css.md (100%)
 rename static/usage/toast/{styling => theming}/react/react_ts.md (100%)
 rename static/usage/toast/{styling => theming}/vue.md (100%)

diff --git a/docs/api/toast.md b/docs/api/toast.md
index 5bc6a05ca32..ac837fa5b50 100644
--- a/docs/api/toast.md
+++ b/docs/api/toast.md
@@ -113,11 +113,11 @@ import IconPlayground from '@site/static/usage/toast/icon/index.md';
 
 <IconPlayground />
 
-## Styling
+## Theming
 
-import StylingPlayground from '@site/static/usage/toast/styling/index.md';
+import ThemingPlayground from '@site/static/usage/toast/theming/index.md';
 
-<StylingPlayground />
+<ThemingPlayground />
 
 ## Interfaces
 
diff --git a/static/usage/toast/styling/angular/angular_css.md b/static/usage/toast/theming/angular/angular_css.md
similarity index 100%
rename from static/usage/toast/styling/angular/angular_css.md
rename to static/usage/toast/theming/angular/angular_css.md
diff --git a/static/usage/toast/styling/angular/angular_html.md b/static/usage/toast/theming/angular/angular_html.md
similarity index 100%
rename from static/usage/toast/styling/angular/angular_html.md
rename to static/usage/toast/theming/angular/angular_html.md
diff --git a/static/usage/toast/styling/angular/angular_ts.md b/static/usage/toast/theming/angular/angular_ts.md
similarity index 100%
rename from static/usage/toast/styling/angular/angular_ts.md
rename to static/usage/toast/theming/angular/angular_ts.md
diff --git a/static/usage/toast/styling/demo.html b/static/usage/toast/theming/demo.html
similarity index 100%
rename from static/usage/toast/styling/demo.html
rename to static/usage/toast/theming/demo.html
diff --git a/static/usage/toast/styling/index.md b/static/usage/toast/theming/index.md
similarity index 100%
rename from static/usage/toast/styling/index.md
rename to static/usage/toast/theming/index.md
diff --git a/static/usage/toast/styling/javascript.md b/static/usage/toast/theming/javascript.md
similarity index 100%
rename from static/usage/toast/styling/javascript.md
rename to static/usage/toast/theming/javascript.md
diff --git a/static/usage/toast/styling/react/react_css.md b/static/usage/toast/theming/react/react_css.md
similarity index 100%
rename from static/usage/toast/styling/react/react_css.md
rename to static/usage/toast/theming/react/react_css.md
diff --git a/static/usage/toast/styling/react/react_ts.md b/static/usage/toast/theming/react/react_ts.md
similarity index 100%
rename from static/usage/toast/styling/react/react_ts.md
rename to static/usage/toast/theming/react/react_ts.md
diff --git a/static/usage/toast/styling/vue.md b/static/usage/toast/theming/vue.md
similarity index 100%
rename from static/usage/toast/styling/vue.md
rename to static/usage/toast/theming/vue.md

From 866c811563898c569274fab30f4cde3ff29a7bff Mon Sep 17 00:00:00 2001
From: amandaesmith333 <amandaesmith333@gmail.com>
Date: Thu, 1 Sep 2022 15:46:32 -0500
Subject: [PATCH 09/10] fix(): fix broken link

---
 static/usage/toast/theming/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/usage/toast/theming/index.md b/static/usage/toast/theming/index.md
index b53c07f3a49..62c2366dac3 100644
--- a/static/usage/toast/theming/index.md
+++ b/static/usage/toast/theming/index.md
@@ -29,5 +29,5 @@ import angularTS from './angular/angular_ts.md';
       }
     }
   }}
-  src="usage/toast/styling/demo.html"
+  src="usage/toast/theming/demo.html"
 />

From 7736be58e71587a77f98a03439f345ecfc0d5f98 Mon Sep 17 00:00:00 2001
From: amandaesmith333 <amandaesmith333@gmail.com>
Date: Thu, 1 Sep 2022 15:47:17 -0500
Subject: [PATCH 10/10] docs(toast): make theming text easier to read

---
 static/usage/toast/theming/angular/angular_css.md | 2 +-
 static/usage/toast/theming/demo.html              | 2 +-
 static/usage/toast/theming/javascript.md          | 2 +-
 static/usage/toast/theming/react/react_css.md     | 2 +-
 static/usage/toast/theming/vue.md                 | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/static/usage/toast/theming/angular/angular_css.md b/static/usage/toast/theming/angular/angular_css.md
index 9bcb8579e4a..4d261622074 100644
--- a/static/usage/toast/theming/angular/angular_css.md
+++ b/static/usage/toast/theming/angular/angular_css.md
@@ -2,7 +2,7 @@
 ion-toast.custom-toast {
   --background: #F4F4FA;
   --box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.2);
-  --color: #908F96;
+  --color: #4b4a50;
 }
     
 ion-toast.custom-toast::part(message) {
diff --git a/static/usage/toast/theming/demo.html b/static/usage/toast/theming/demo.html
index 41f53ddda43..756f6ed32c1 100644
--- a/static/usage/toast/theming/demo.html
+++ b/static/usage/toast/theming/demo.html
@@ -14,7 +14,7 @@
     ion-toast.custom-toast {
       --background: #F4F4FA;
       --box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.2);
-      --color: #908F96;
+      --color: #4b4a50;
     }
     
     ion-toast.custom-toast::part(message) {
diff --git a/static/usage/toast/theming/javascript.md b/static/usage/toast/theming/javascript.md
index e60d0818754..b540eccaaf7 100644
--- a/static/usage/toast/theming/javascript.md
+++ b/static/usage/toast/theming/javascript.md
@@ -23,7 +23,7 @@
   ion-toast.custom-toast {
     --background: #F4F4FA;
     --box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.2);
-    --color: #908F96;
+    --color: #4b4a50;
   }
     
   ion-toast.custom-toast::part(message) {
diff --git a/static/usage/toast/theming/react/react_css.md b/static/usage/toast/theming/react/react_css.md
index 9bcb8579e4a..4d261622074 100644
--- a/static/usage/toast/theming/react/react_css.md
+++ b/static/usage/toast/theming/react/react_css.md
@@ -2,7 +2,7 @@
 ion-toast.custom-toast {
   --background: #F4F4FA;
   --box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.2);
-  --color: #908F96;
+  --color: #4b4a50;
 }
     
 ion-toast.custom-toast::part(message) {
diff --git a/static/usage/toast/theming/vue.md b/static/usage/toast/theming/vue.md
index 23d6aa25c77..99bcbb7cf18 100644
--- a/static/usage/toast/theming/vue.md
+++ b/static/usage/toast/theming/vue.md
@@ -32,7 +32,7 @@
   ion-toast.custom-toast {
     --background: #F4F4FA;
     --box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.2);
-    --color: #908F96;
+    --color: #4b4a50;
   }
     
   ion-toast.custom-toast::part(message) {