fixup! fixup! fixup! fixup! Feat(web): Introduce the Toast componen…

…t #DS-1112

packages/web/src/scss/components/Toast/README.md

@@ -107,12 +107,21 @@ keyboard. The Toast component tries to find the best position to be visible usin
 
 When multiple ToastBar components are present, they stack up in a queue, separated by a gap. The ToastBar components are
 sorted from top to bottom for the `top` vertical alignment, and from bottom to top for the `bottom` vertical alignment.
-When the queue does not fit the screen, it becomes scrollable.
 
-👉 Please note that the initial scroll position is always at the **top** of the queue.
+#### Toast Queue Limitations
+
+While the Toast queue becomes scrollable when it does not fit the screen, we recommend displaying only a few toasts at
+once for several reasons:
+
+⚠️ **We strongly discourage from displaying too many toasts at once as it may cause the page to be unusable,
+especially on mobile screens. As of now, there is no automatic stacking of the toast queue items. It is the
+responsibility of the developer to ensure that the Toast queue does not overflow the screen.**
 
-👉 Please note that scrolling is only possible over the toast message boxes and not over the entire container, so the
-page behind the toast messages is still accessible.
+⚠️ Please note that scrolling is only available on pointer-equipped devices (mouse, trackpad). Furthermore, scrolling is
+only possible when the cursor is placed over the toast message boxes. This way the page content behind the toast
+messages can remain accessible.
+
+👉 Please note that the initial scroll position is always at the **top** of the queue.
 
 ## ToastBar
 
@@ -180,7 +189,8 @@ For example:
 
 ### Dismissible ToastBar
 
-To make the ToastBar dismissible, add the `ToastBar--dismissible` modifier class, the `id` attribute, and a close button:
+To make the ToastBar dismissible, add the `ToastBar--dismissible` modifier class, a unique `id` attribute, and a close
+button:
 
 ```html
 <div id="my-dismissible-toast" class="ToastBar ToastBar--inverted ToastBar--dismissible">
@@ -202,6 +212,8 @@ To make the ToastBar dismissible, add the `ToastBar--dismissible` modifier class
 </div>
 ```
 
+👉 Please keep in mind that the Button color should match the ToastBar color.
+
 ⚠️ The JavaScript functionality for dismissing the ToastBar is yet to be implemented.
 
 ## Full Example

packages/web/src/scss/components/Toast/index.html

@@ -87,7 +87,7 @@ <h2 class="docs-Heading">Alignment</h2>
           </div>
           <button
             type="button"
-            class="Button Button--small Button--square Button--inverted"
+            class="Button Button--small Button--square Button--success"
             data-spirit-dismiss="toast"
             aria-controls="my-dismissible-toast"
             aria-expanded="true"
@@ -111,7 +111,7 @@ <h2 class="docs-Heading">Alignment</h2>
           </div>
           <button
             type="button"
-            class="Button Button--small Button--square Button--inverted"
+            class="Button Button--small Button--square Button--informative"
             data-spirit-dismiss="toast"
             aria-controls="my-other-dismissible-toast"
             aria-expanded="true"