fix(toast): add and document custom properties

references #14850

core/src/components/toast/readme.md

@@ -242,6 +242,14 @@ that is called in the same circustances.
 Present the toast overlay after it has been created.
 
 
+## CSS Custom Properties
+
+| Name             | Description              |
+| ---------------- | ------------------------ |
+| `--background`   | Background of the toast  |
+| `--button-color` | Color of the button text |
+| `--color`        | Color of the toast text  |
+
 
 ----------------------------------------------
 

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

@@ -17,6 +17,7 @@
   <button onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true})">Show Toast with Close Button</button>
   <button onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, closeButtonText: 'closing time'})">Show Toast with Custom Close Button Text</button>
   <button onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, translucent: true})">Show Translucent Toast</button>
+  <button onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, cssClass: 'custom'})">Show Toast with Custom Properties</button>
 
   <ion-toast-controller></ion-toast-controller>
 
@@ -32,6 +33,12 @@
       border-radius: 4px;
       margin-bottom: 8px;
     }
+
+    .custom {
+      --background: papayawhip;
+      --button-color: blue;
+      --color: red;
+    }
   </style>
 
   <script>

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

@@ -5,6 +5,10 @@
 // --------------------------------------------------
 
 .toast-ios {
+  --background: #{$toast-ios-background-color};
+  --button-color: #{$toast-ios-button-color};
+  --color: #{$toast-ios-title-color};
+
   font-family: $toast-ios-font-family;
 }
 
@@ -18,8 +22,6 @@
 
   max-width: $toast-max-width;
 
-  background: $toast-ios-background-color;
-
   z-index: $z-index-overlay-wrapper;
 }
 
@@ -47,11 +49,11 @@
 .toast-ios .toast-message {
   @include padding($toast-ios-title-padding-top, $toast-ios-title-padding-end, $toast-ios-title-padding-bottom, $toast-ios-title-padding-start);
 
-  color: $toast-ios-title-color;
+  color: var(--color);
 
   font-size: $toast-ios-title-font-size;
 }
 
 .toast-ios .toast-button {
-  color: $toast-ios-button-color;
+  color: var(--button-color);
 }

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

@@ -5,6 +5,9 @@
 // --------------------------------------------------
 
 .toast-md {
+  --background: #{$toast-md-background};
+  --color: #{toast-md-title-color};
+
   font-family: $toast-md-font-family;
 }
 
@@ -18,8 +21,6 @@
   width: $toast-width;
   max-width: $toast-max-width;
 
-  background: $toast-md-background;
-
   z-index: $z-index-overlay-wrapper;
 }
 
@@ -42,7 +43,7 @@
 .toast-md .toast-message {
   @include padding($toast-md-title-padding-top, $toast-md-title-padding-end, $toast-md-title-padding-bottom, $toast-md-title-padding-start);
 
-  color: $toast-md-title-color;
+  color: var(--color);
 
   font-size: $toast-md-title-font-size;
 }

core/src/components/toast/toast.scss

@@ -4,6 +4,12 @@
 // --------------------------------------------------
 
 ion-toast {
+  /**
+   * @prop --background: Background of the toast
+   * @prop --button-color: Color of the button text
+   * @prop --color: Color of the toast text
+   */
+
   @include position(0, null, null, 0);
 
   display: block;
@@ -17,6 +23,10 @@ ion-toast {
   pointer-events: none;
 }
 
+.toast-wrapper {
+  background: var(--background);
+}
+
 .toast-container {
   display: flex;