Merge pull request #834 from primer/toasts-v2.1

Toasts v2.1

Author: simurai

pages/css/components/toasts.md

@@ -7,119 +7,150 @@ source: ''
 bundle: toasts
 ---
 
-# Toasts
+Toasts are used to show live, time-sensitive feedback to users.
 
-To create a default toast, use `.Toast`
 
-## Default style
+## Default
 
-```html title="Block style"
-<div class="p-3">
-  <div class="Toast Toast-block-default">
-    <span class="Toast-octicon">
-      <svg class="octicon octicon-info" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg>
-    </span>
-    <span class="Toast-content">Submitting issue to <strong>github/github</strong></span>
-  </div>
-  <div class="Toast Toast-block-warning">
-    <span class="Toast-octicon">
-      <svg class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg>
+To create a default toast, use `.Toast`. Always use the `info` icon for default messages.
+
+```html title="Default toast"
+<div class="p-1">
+  <div class="Toast">
+    <span class="Toast-icon">
+      <!-- <%= octicon "info" %> -->
+      <svg class="octicon octicon-info" style="fill:currentColor" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg>
     </span>
-    <span class="Toast-content">Submitting issue to <strong>github/github</strong></span>
+    <span class="Toast-content">Toast message goes here</span>
   </div>
-  <div class="Toast Toast-block-success">
-    <span class="Toast-octicon">
-      <svg class="octicon octicon-check" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z"></path></svg>
+</div>
+```
+
+The Toast content is formattable. We recommend keeping your message under 140 characters.
+
+```html title="Toast with long text"
+<div class="p-1">
+  <div class="Toast">
+    <span class="Toast-icon">
+      <!-- <%= octicon "info" %> -->
+      <svg class="octicon octicon-info" style="fill:currentColor" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg>
     </span>
-    <span class="Toast-content">Submitting issue to <strong>github/github</strong></span>
+    <span class="Toast-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <strong>Aenean commodo ligula eget dolor.</strong> Aenean massa. Cum sociis <em>natoque</em> penatibus et ma</span>
   </div>
-  <div class="Toast Toast-block-error">
-    <span class="Toast-octicon">
-      <svg class="octicon octicon-stop" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 1H4L0 5v6l4 4h6l4-4V5l-4-4zm3 9.5L9.5 14h-5L1 10.5v-5L4.5 2h5L13 5.5v5zM6 4h2v5H6V4zm0 6h2v2H6v-2z"></path></svg>
+</div>
+```
+
+## Variations
+
+Use the success, warning, and error modifiers to communicate different states.
+
+Always use the `check` octicon for success states.
+
+```html title="Success toast"
+<div class="p-1">
+  <div class="Toast Toast--success">
+    <span class="Toast-icon">
+      <!-- <%= octicon "check" %> -->
+      <svg class="octicon octicon-check" style="fill:currentColor" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z"></path></svg>
     </span>
-    <span class="Toast-content">Submitting issue to <strong>github/github</strong></span>
+    <span class="Toast-content">Success message goes here.</span>
   </div>
 </div>
 ```
 
-## Toast with dismiss
+Always use the `alert` octicon for warning states.
 
-```html title="Toast with dismiss"
-<div class="p-3">
-  <div class="Toast Toast-block-error">
-    <span class="Toast-octicon">
-      <svg class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg>
+```html title="Warning toast"
+<div class="p-1">
+  <div class="Toast Toast--warning">
+    <span class="Toast-icon">
+      <!-- <%= octicon "alert" %> -->
+      <svg class="octicon octicon-alert" style="fill:currentColor" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg>
     </span>
-    <span class="Toast-content">Submitting issue to <strong>github/github.</strong></span>
-    <a class="Toast-dismiss"><svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" role="img"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"></path></svg></a>
+    <span class="Toast-content">Warning message goes here.</span>
   </div>
 </div>
 ```
 
+Always use the `stop` octicon for error states.
 
-## Toast with link
-
-```html title="Toast with link"
-<div class="p-3">
-  <div class="Toast Toast-block-error">
-    <span class="Toast-octicon">
-      <svg class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg>
+```html title="Error toast"
+<div class="p-1">
+  <div class="Toast Toast--error">
+    <span class="Toast-icon">
+      <!-- <%= octicon "stop" %> -->
+      <svg class="octicon octicon-stop" style="fill:currentColor" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 1H4L0 5v6l4 4h6l4-4V5l-4-4zm3 9.5L9.5 14h-5L1 10.5v-5L4.5 2h5L13 5.5v5zM6 4h2v5H6V4zm0 6h2v2H6v-2z"></path></svg>
     </span>
-    <span class="Toast-content">Submitting issue to <strong>github/github. </strong><a href="#">Try again.</a></span>
+    <span class="Toast-content">Error message goes here</span>
   </div>
 </div>
 ```
 
-## Toast with link and dismiss
+## Toast with dismiss
+
+Use `.Toast-dismissButton` to allow a user to explicitly dismiss a Toast.
 
-```html title="Toast with action and dismiss"
-<div class="p-3">
-  <div class="Toast Toast-block-error">
-    <span class="Toast-octicon">
-      <svg class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg>
+```html title="Toast with dismiss"
+<div class="p-1">
+  <div class="Toast">
+    <span class="Toast-icon">
+      <!-- <%= octicon "info" %> -->
+      <svg class="octicon octicon-info" style="fill:currentColor" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg>
     </span>
-    <span class="Toast-content">Submitting issue to <strong>github/github. </strong><a href="#">Try again.</a></span>
-    <a class="Toast-dismiss"><svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" role="img"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"></path></svg></a>
+    <span class="Toast-content">This toast is dismissable.</span>
+    <button class="Toast-dismissButton">
+      <svg class="octicon octicon-x" style="fill:currentcolor" viewBox="0 0 12 16" version="1.1" width="12" height="16" role="img"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"></path></svg>
+    </button>
   </div>
 </div>
 ```
 
-## Toast animating
+## Toast with link
+
+Include a link to allow users to take actions within a Toast.
 
-```html title="Toast animating"
-<div class="p-3">
-  <div class="Toast Toast-animated Toast-block-error">
-    <span class="Toast-octicon">
-      <svg class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg>
+```html title="Toast with link"
+<div class="p-1">
+  <div class="Toast">
+    <span class="Toast-icon">
+      <!-- <%= octicon "info" %> -->
+      <svg class="octicon octicon-info" style="fill:currentColor" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg>
     </span>
-    <span class="Toast-content">Submitting issue to <strong>github/github</strong></span>
+    <span class="Toast-content">Toast message goes here </strong><a href="#">Action.</a></span>
   </div>
 </div>
 ```
 
-## Toast with long text
+## Toast animation
 
-```html title="Toast with long text"
-<div class="p-3">
-  <div class="Toast Toast-block-error">
-    <span class="Toast-octicon">
-      <svg class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg>
+The `Toast--animateIn` and `Toast--animateOut` modifier classes can be used to animate the toast in and out from the bottom.
+
+```html title="Toast animating"
+<div class="p-1">
+  <div class="Toast Toast--animateIn">
+    <span class="Toast-icon">
+      <!-- <%= octicon "info" %> -->
+      <svg class="octicon octicon-info" style="fill:currentColor" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg>
     </span>
-    <span class="Toast-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a></span>
+    <span class="Toast-content">Toast message goes here.</span>
   </div>
 </div>
 ```
 
-## Toast with long text and a dismiss
+## Toast position
 
-```html title="Toast with long text"
-<div class="p-3">
-  <div class="Toast Toast-block-error">
-    <span class="Toast-octicon">
-      <svg class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg>
-    </span>
-    <span class="Toast-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a></span>
-    <a class="Toast-dismiss"><svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" role="img"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"></path></svg></a>
+Use the `position-fixed bottom-0` utility classes on a wrapper element to position Toasts at the **bottom left** of the viewport.
+
+```html title="Toast animating"
+<div class="border bg-gray-light" style="height:150px">
+  <div class="position-fixed bottom-0">
+    <div class="Toast">
+      <span class="Toast-icon">
+        <!-- <%= octicon "info" %> -->
+        <svg class="octicon octicon-info" style="fill:currentColor" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg>
+      </span>
+      <span class="Toast-content">Toast message goes here.</span>
+    </div>
   </div>
 </div>
 ```

src/toasts/toasts.scss

@@ -1,110 +1,89 @@
 // Toast
 
-// just for the documentation, remove before shipping
-.Toast-wrapper {
-  padding: 30px;
-}
-
 .Toast {
   display: flex;
-  background-color: white;
+  margin: $spacer-2;
   color: $black;
-  padding: $spacer-3;
+  background-color: $bg-white;
   border-radius: $border-radius;
   box-shadow: inset 0 0 0 1px $border-gray-dark, $box-shadow-medium;
-  margin: $spacer-2;
-  transition: 0.2s ease;
 
   @include breakpoint(sm) {
-    max-width: 450px;
     width: max-content;
+    max-width: 450px;
     margin: $spacer-3;
   }
 }
 
-.Toast-octicon {
-  margin-right: $spacer-2;
+.Toast-icon {
   display: flex;
   align-items: center;
+  justify-content: center;
+  width: $spacer-3 * 3;
+  flex-shrink: 0;
+  color: $text-white;
+  background-color: $blue-500;
+  border-top-left-radius: inherit;
+  border-bottom-left-radius: inherit;
 }
 
-
-// Temporarily splitting this out
-// to play with static styles.
-.Toast-animated {
-  position: fixed;
-  bottom: -100px;
-  left: 0;
-  animation-name: toast;
-  animation-duration: 6s;
-  animation-delay: 1s;
-  animation-iteration-count: 1;
-  animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
+.Toast-content {
+  padding: $spacer-3;
 }
 
-// Pop up animation
-@keyframes toast {
-  0%   {bottom:-100px;}
-  10%  {bottom:0px;}
-  90%  {bottom:0px;}
-  100% {bottom:-100px;}
-}
+.Toast-dismissButton {
+  max-height: 54px; // keeps button aligned to the top
+  padding: $spacer-3;
+  background-color: transparent;
+  border: 0;
 
-.Toast-block-default,
-.Toast-block-error,
-.Toast-block-warning,
-.Toast-block-success {
-  padding: 0;
-
-  .Toast-octicon {
-    color: white;
-    padding: $spacer-3;
-    margin-right: 0;
-    fill: white;
-    border-top-left-radius: inherit;
-    border-bottom-left-radius: inherit;
+  &:focus,
+  &:hover {
+    color: $text-gray;
+    outline: none;
   }
 
-  .Toast-content {
-    padding: $spacer-3;
+  &:active {
+    color: $gray-400;
   }
+}
 
-  .Toast-dismiss {
-    padding: $spacer-3;
-    align-self: center;
+// Modifier
 
-    &:hover {
-      cursor: pointer;
-      fill: $text-gray;
-    }
-  }
+.Toast--error .Toast-icon {
+  background-color: $red-500;
 }
 
-.Toast-block-default {
+.Toast--warning .Toast-icon {
+  color: $gray-900;
+  background-color: $yellow-600;
+}
 
-  .Toast-octicon {
-    background-color: $blue-500;
-  }
+.Toast--success .Toast-icon {
+  background-color: $green-500;
 }
 
-.Toast-block-error {
+// Animations
 
-  .Toast-octicon {
-    background-color: $red-500;
-  }
+.Toast--animateIn {
+  animation: Toast--animateIn 0.18s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
 }
 
-.Toast-block-warning {
-
-  .Toast-octicon {
-    background-color: $yellow-600;
-    fill: $gray-900;
+@keyframes Toast--animateIn {
+  0% {
+    opacity: 0;
+    transform: translateY(100%);
   }
 }
 
-.Toast-block-success {
+.Toast--animateOut {
+  animation: Toast--animateOut 0.18s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
+}
 
-  .Toast-octicon {
-    background-color: $green-500;
+@keyframes Toast--animateOut {
+  100% {
+    pointer-events: none;
+    opacity: 0;
+    transform: translateY(100%);
   }
 }