From 08441a50d658f2b48ffa20a9cefb8dce57d74b6b Mon Sep 17 00:00:00 2001
From: Michael Shilman <michael@lab80.co>
Date: Tue, 19 Feb 2019 18:59:52 +0800
Subject: [PATCH] Update snapshots

---
 .../__tests__/__snapshots__/Panel.js.snap     |    8 +-
 .../addon-a11y.stories.storyshot              |   38 +-
 .../addon-actions.stories.storyshot           | 1908 +++++++++++++++--
 .../__snapshots__/storyshots.test.js.snap     |  902 ++++++--
 .../__snapshots__/Button.stories.storyshot    |  156 +-
 .../form/__snapshots__/form.stories.storyshot |   28 +-
 .../syntaxhighlighter.stories.storyshot       |    2 -
 .../tabs/__snapshots__/tabs.stories.storyshot |  863 ++++----
 .../__snapshots__/ListItem.stories.storyshot  |  218 +-
 .../__snapshots__/Tooltip.stories.storyshot   |   12 +-
 .../TooltipLinkList.stories.storyshot         |  118 +-
 .../TooltipMessage.stories.storyshot          |   20 +-
 .../WithTooltip.stories.storyshot             |   27 +-
 .../__snapshots__/layout.stories.storyshot    |    8 +-
 .../__snapshots__/preview.stories.storyshot   |    4 +-
 .../__snapshots__/about.stories.storyshot     |    4 +-
 16 files changed, 3141 insertions(+), 1175 deletions(-)

diff --git a/addons/knobs/src/components/__tests__/__snapshots__/Panel.js.snap b/addons/knobs/src/components/__tests__/__snapshots__/Panel.js.snap
index d6b39c95eb6..df555bca26b 100644
--- a/addons/knobs/src/components/__tests__/__snapshots__/Panel.js.snap
+++ b/addons/knobs/src/components/__tests__/__snapshots__/Panel.js.snap
@@ -40,8 +40,8 @@ Array [
 
 .emotion-0 {
   min-width: 100px;
-  font-weight: 700;
-  margin-right: 15px;
+  min-height: 32px;
+  margin-right: 16px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -135,8 +135,8 @@ Array [
 
 .emotion-0 {
   min-width: 100px;
-  font-weight: 700;
-  margin-right: 15px;
+  min-height: 32px;
+  margin-right: 16px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
diff --git a/examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot
index b8fb54e56eb..425453f21e5 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot
@@ -95,25 +95,6 @@ exports[`Storyshots Addons|A11y/Form With label 1`] = `
   margin-bottom: 3rem;
 }
 
-.emotion-0 {
-  min-width: 100px;
-  font-weight: 700;
-  margin-right: 15px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  line-height: 16px;
-}
-
 .emotion-1 {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -166,6 +147,25 @@ exports[`Storyshots Addons|A11y/Form With label 1`] = `
   color: #999999;
 }
 
+.emotion-0 {
+  min-width: 100px;
+  min-height: 32px;
+  margin-right: 16px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  line-height: 16px;
+}
+
 <label
   class="emotion-2"
 >
diff --git a/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot
index 8b7cfba5f64..7c798fc6595 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot
@@ -30,11 +30,16 @@ Array [
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  background: #FAFBFC;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
   display: inline;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -43,6 +48,38 @@ Array [
   z-index: 2;
 }
 
+.emotion-0:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-0:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-0 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-0 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-0 svg {
   display: inline-block;
   height: 14px;
@@ -55,19 +92,23 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: currentColor;
+  fill: #333333;
 }
 
 .emotion-0:hover {
-  background: #f2f2f2;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-0:active {
-  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
 }
 
 .emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+  box-shadow: #1EA7FD 0 0 0 1px inset;
+}
+
+.emotion-0:focus:hover {
+  box-shadow: #1EA7FD 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -109,11 +150,16 @@ Array [
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  background: #FAFBFC;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
   display: inline;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -122,6 +168,38 @@ Array [
   z-index: 2;
 }
 
+.emotion-0:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-0:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-0 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-0 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-0 svg {
   display: inline-block;
   height: 14px;
@@ -134,19 +212,23 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: currentColor;
+  fill: #333333;
 }
 
 .emotion-0:hover {
-  background: #f2f2f2;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-0:active {
-  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
 }
 
 .emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+  box-shadow: #1EA7FD 0 0 0 1px inset;
+}
+
+.emotion-0:focus:hover {
+  box-shadow: #1EA7FD 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -188,11 +270,16 @@ Array [
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  background: #FAFBFC;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
   display: inline;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -201,6 +288,38 @@ Array [
   z-index: 2;
 }
 
+.emotion-0:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-0:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-0 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-0 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-0 svg {
   display: inline-block;
   height: 14px;
@@ -213,19 +332,23 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: currentColor;
+  fill: #333333;
 }
 
 .emotion-0:hover {
-  background: #f2f2f2;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-0:active {
-  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
 }
 
 .emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+  box-shadow: #1EA7FD 0 0 0 1px inset;
+}
+
+.emotion-0:focus:hover {
+  box-shadow: #1EA7FD 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -267,11 +390,16 @@ Array [
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  background: #FAFBFC;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
   display: inline;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -280,6 +408,38 @@ Array [
   z-index: 2;
 }
 
+.emotion-0:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-0:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-0 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-0 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-0 svg {
   display: inline-block;
   height: 14px;
@@ -292,19 +452,23 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: currentColor;
+  fill: #333333;
 }
 
 .emotion-0:hover {
-  background: #f2f2f2;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-0:active {
-  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
 }
 
 .emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+  box-shadow: #1EA7FD 0 0 0 1px inset;
+}
+
+.emotion-0:focus:hover {
+  box-shadow: #1EA7FD 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -346,11 +510,16 @@ Array [
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  background: #FAFBFC;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
   display: inline;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -359,6 +528,38 @@ Array [
   z-index: 2;
 }
 
+.emotion-0:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-0:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-0 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-0 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-0 svg {
   display: inline-block;
   height: 14px;
@@ -371,19 +572,23 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: currentColor;
+  fill: #333333;
 }
 
 .emotion-0:hover {
-  background: #f2f2f2;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-0:active {
-  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
 }
 
 .emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+  box-shadow: #1EA7FD 0 0 0 1px inset;
+}
+
+.emotion-0:focus:hover {
+  box-shadow: #1EA7FD 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -425,11 +630,16 @@ Array [
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  background: #FAFBFC;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
   display: inline;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -438,6 +648,38 @@ Array [
   z-index: 2;
 }
 
+.emotion-0:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-0:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-0 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-0 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-0 svg {
   display: inline-block;
   height: 14px;
@@ -450,19 +692,23 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: currentColor;
+  fill: #333333;
 }
 
 .emotion-0:hover {
-  background: #f2f2f2;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-0:active {
-  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
 }
 
 .emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+  box-shadow: #1EA7FD 0 0 0 1px inset;
+}
+
+.emotion-0:focus:hover {
+  box-shadow: #1EA7FD 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -504,11 +750,16 @@ Array [
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  background: #FAFBFC;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
   display: inline;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -517,6 +768,38 @@ Array [
   z-index: 2;
 }
 
+.emotion-0:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-0:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-0 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-0 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-0 svg {
   display: inline-block;
   height: 14px;
@@ -529,19 +812,23 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: currentColor;
+  fill: #333333;
 }
 
 .emotion-0:hover {
-  background: #f2f2f2;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-0:active {
-  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
 }
 
 .emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+  box-shadow: #1EA7FD 0 0 0 1px inset;
+}
+
+.emotion-0:focus:hover {
+  box-shadow: #1EA7FD 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -583,11 +870,16 @@ Array [
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  background: #FAFBFC;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
   display: inline;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -596,6 +888,38 @@ Array [
   z-index: 2;
 }
 
+.emotion-0:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-0:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-0 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-0 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-0 svg {
   display: inline-block;
   height: 14px;
@@ -608,19 +932,23 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: currentColor;
+  fill: #333333;
 }
 
 .emotion-0:hover {
-  background: #f2f2f2;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-0:active {
-  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
 }
 
 .emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+  box-shadow: #1EA7FD 0 0 0 1px inset;
+}
+
+.emotion-0:focus:hover {
+  box-shadow: #1EA7FD 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -662,11 +990,16 @@ Array [
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  background: #FAFBFC;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
   display: inline;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -675,6 +1008,38 @@ Array [
   z-index: 2;
 }
 
+.emotion-0:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-0:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-0 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-0 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-0 svg {
   display: inline-block;
   height: 14px;
@@ -687,19 +1052,23 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: currentColor;
+  fill: #333333;
 }
 
 .emotion-0:hover {
-  background: #f2f2f2;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-0:active {
-  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
 }
 
 .emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+  box-shadow: #1EA7FD 0 0 0 1px inset;
+}
+
+.emotion-0:focus:hover {
+  box-shadow: #1EA7FD 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -741,11 +1110,16 @@ Array [
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  background: #FAFBFC;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
   display: inline;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -754,6 +1128,38 @@ Array [
   z-index: 2;
 }
 
+.emotion-0:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-0:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-0 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-0 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-0 svg {
   display: inline-block;
   height: 14px;
@@ -766,19 +1172,23 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: currentColor;
+  fill: #333333;
 }
 
 .emotion-0:hover {
-  background: #f2f2f2;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-0:active {
-  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
 }
 
 .emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+  box-shadow: #1EA7FD 0 0 0 1px inset;
+}
+
+.emotion-0:focus:hover {
+  box-shadow: #1EA7FD 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -820,11 +1230,16 @@ Array [
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  background: #FAFBFC;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
   display: inline;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -833,6 +1248,38 @@ Array [
   z-index: 2;
 }
 
+.emotion-0:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-0:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-0 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-0 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-0 svg {
   display: inline-block;
   height: 14px;
@@ -845,19 +1292,23 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: currentColor;
+  fill: #333333;
 }
 
 .emotion-0:hover {
-  background: #f2f2f2;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-0:active {
-  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
 }
 
 .emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+  box-shadow: #1EA7FD 0 0 0 1px inset;
+}
+
+.emotion-0:focus:hover {
+  box-shadow: #1EA7FD 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -899,11 +1350,16 @@ Array [
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  background: #FAFBFC;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
   display: inline;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -912,6 +1368,38 @@ Array [
   z-index: 2;
 }
 
+.emotion-0:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-0:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-0 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-0 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-0 svg {
   display: inline-block;
   height: 14px;
@@ -924,19 +1412,23 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: currentColor;
+  fill: #333333;
 }
 
 .emotion-0:hover {
-  background: #f2f2f2;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-0:active {
-  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
 }
 
 .emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+  box-shadow: #1EA7FD 0 0 0 1px inset;
+}
+
+.emotion-0:focus:hover {
+  box-shadow: #1EA7FD 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -978,11 +1470,16 @@ Array [
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  background: #FAFBFC;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
   display: inline;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -991,6 +1488,38 @@ Array [
   z-index: 2;
 }
 
+.emotion-0:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-0:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-0 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-0 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-0 svg {
   display: inline-block;
   height: 14px;
@@ -1003,19 +1532,23 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: currentColor;
+  fill: #333333;
 }
 
 .emotion-0:hover {
-  background: #f2f2f2;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-0:active {
-  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
 }
 
 .emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+  box-shadow: #1EA7FD 0 0 0 1px inset;
+}
+
+.emotion-0:focus:hover {
+  box-shadow: #1EA7FD 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -1057,11 +1590,16 @@ Array [
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  background: #FAFBFC;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
   display: inline;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1070,6 +1608,38 @@ Array [
   z-index: 2;
 }
 
+.emotion-0:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-0:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-0 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-0 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-0 svg {
   display: inline-block;
   height: 14px;
@@ -1082,19 +1652,23 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: currentColor;
+  fill: #333333;
 }
 
 .emotion-0:hover {
-  background: #f2f2f2;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-0:active {
-  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
 }
 
 .emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+  box-shadow: #1EA7FD 0 0 0 1px inset;
+}
+
+.emotion-0:focus:hover {
+  box-shadow: #1EA7FD 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -1136,11 +1710,16 @@ Array [
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  background: #FAFBFC;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
   display: inline;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1149,6 +1728,38 @@ Array [
   z-index: 2;
 }
 
+.emotion-0:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-0:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-0 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-0 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-0 svg {
   display: inline-block;
   height: 14px;
@@ -1161,19 +1772,23 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: currentColor;
+  fill: #333333;
 }
 
 .emotion-0:hover {
-  background: #f2f2f2;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-0:active {
-  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
 }
 
 .emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+  box-shadow: #1EA7FD 0 0 0 1px inset;
+}
+
+.emotion-0:focus:hover {
+  box-shadow: #1EA7FD 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -1215,11 +1830,16 @@ Array [
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  background: #FAFBFC;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
   display: inline;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1228,6 +1848,38 @@ Array [
   z-index: 2;
 }
 
+.emotion-0:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-0:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-0 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-0 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-0 svg {
   display: inline-block;
   height: 14px;
@@ -1240,19 +1892,23 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: currentColor;
+  fill: #333333;
 }
 
 .emotion-0:hover {
-  background: #f2f2f2;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-0:active {
-  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
 }
 
 .emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+  box-shadow: #1EA7FD 0 0 0 1px inset;
+}
+
+.emotion-0:focus:hover {
+  box-shadow: #1EA7FD 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -1294,11 +1950,16 @@ Array [
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  background: #FAFBFC;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
   display: inline;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1307,6 +1968,38 @@ Array [
   z-index: 2;
 }
 
+.emotion-0:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-0:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-0 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-0 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-0 svg {
   display: inline-block;
   height: 14px;
@@ -1319,19 +2012,23 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: currentColor;
+  fill: #333333;
 }
 
 .emotion-0:hover {
-  background: #f2f2f2;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-0:active {
-  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
 }
 
 .emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+  box-shadow: #1EA7FD 0 0 0 1px inset;
+}
+
+.emotion-0:focus:hover {
+  box-shadow: #1EA7FD 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -1373,11 +2070,16 @@ Array [
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  background: #FAFBFC;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
   display: inline;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1386,6 +2088,38 @@ Array [
   z-index: 2;
 }
 
+.emotion-0:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-0:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-0 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-0 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-0 svg {
   display: inline-block;
   height: 14px;
@@ -1398,19 +2132,23 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: currentColor;
+  fill: #333333;
 }
 
 .emotion-0:hover {
-  background: #f2f2f2;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-0:active {
-  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
 }
 
 .emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+  box-shadow: #1EA7FD 0 0 0 1px inset;
+}
+
+.emotion-0:focus:hover {
+  box-shadow: #1EA7FD 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -1452,11 +2190,16 @@ Array [
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  background: #FAFBFC;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
   display: inline;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1465,6 +2208,38 @@ Array [
   z-index: 2;
 }
 
+.emotion-0:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-0:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-0 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-0 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-0 svg {
   display: inline-block;
   height: 14px;
@@ -1477,19 +2252,23 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: currentColor;
+  fill: #333333;
 }
 
 .emotion-0:hover {
-  background: #f2f2f2;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-0:active {
-  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
 }
 
 .emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+  box-shadow: #1EA7FD 0 0 0 1px inset;
+}
+
+.emotion-0:focus:hover {
+  box-shadow: #1EA7FD 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -1531,11 +2310,16 @@ Array [
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  background: #FAFBFC;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
   display: inline;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1544,6 +2328,38 @@ Array [
   z-index: 2;
 }
 
+.emotion-0:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-0:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-0 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-0 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-0 svg {
   display: inline-block;
   height: 14px;
@@ -1556,19 +2372,23 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: currentColor;
+  fill: #333333;
 }
 
 .emotion-0:hover {
-  background: #f2f2f2;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-0:active {
-  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
 }
 
 .emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+  box-shadow: #1EA7FD 0 0 0 1px inset;
+}
+
+.emotion-0:focus:hover {
+  box-shadow: #1EA7FD 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -1614,11 +2434,16 @@ exports[`Storyshots Addons|Actions Basic example 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  background: #FAFBFC;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
   display: inline;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1627,6 +2452,38 @@ exports[`Storyshots Addons|Actions Basic example 1`] = `
   z-index: 2;
 }
 
+.emotion-0:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-0:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-0 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-0 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-0 svg {
   display: inline-block;
   height: 14px;
@@ -1639,19 +2496,23 @@ exports[`Storyshots Addons|Actions Basic example 1`] = `
 }
 
 .emotion-0 svg path {
-  fill: currentColor;
+  fill: #333333;
 }
 
 .emotion-0:hover {
-  background: #f2f2f2;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-0:active {
-  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
 }
 
 .emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+  box-shadow: #1EA7FD 0 0 0 1px inset;
+}
+
+.emotion-0:focus:hover {
+  box-shadow: #1EA7FD 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -1696,11 +2557,16 @@ exports[`Storyshots Addons|Actions Circular Payload 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  background: #FAFBFC;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
   display: inline;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1709,6 +2575,38 @@ exports[`Storyshots Addons|Actions Circular Payload 1`] = `
   z-index: 2;
 }
 
+.emotion-0:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-0:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-0 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-0 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-0 svg {
   display: inline-block;
   height: 14px;
@@ -1721,19 +2619,23 @@ exports[`Storyshots Addons|Actions Circular Payload 1`] = `
 }
 
 .emotion-0 svg path {
-  fill: currentColor;
+  fill: #333333;
 }
 
 .emotion-0:hover {
-  background: #f2f2f2;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-0:active {
-  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
 }
 
 .emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+  box-shadow: #1EA7FD 0 0 0 1px inset;
+}
+
+.emotion-0:focus:hover {
+  box-shadow: #1EA7FD 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -1778,11 +2680,16 @@ exports[`Storyshots Addons|Actions Decorated action + config 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  background: #FAFBFC;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
   display: inline;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1791,6 +2698,38 @@ exports[`Storyshots Addons|Actions Decorated action + config 1`] = `
   z-index: 2;
 }
 
+.emotion-0:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-0:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-0 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-0 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-0 svg {
   display: inline-block;
   height: 14px;
@@ -1803,19 +2742,23 @@ exports[`Storyshots Addons|Actions Decorated action + config 1`] = `
 }
 
 .emotion-0 svg path {
-  fill: currentColor;
+  fill: #333333;
 }
 
 .emotion-0:hover {
-  background: #f2f2f2;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-0:active {
-  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
 }
 
 .emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+  box-shadow: #1EA7FD 0 0 0 1px inset;
+}
+
+.emotion-0:focus:hover {
+  box-shadow: #1EA7FD 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -1860,11 +2803,16 @@ exports[`Storyshots Addons|Actions Decorated action 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  background: #FAFBFC;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
   display: inline;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1873,6 +2821,38 @@ exports[`Storyshots Addons|Actions Decorated action 1`] = `
   z-index: 2;
 }
 
+.emotion-0:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-0:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-0 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-0 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-0 svg {
   display: inline-block;
   height: 14px;
@@ -1885,19 +2865,23 @@ exports[`Storyshots Addons|Actions Decorated action 1`] = `
 }
 
 .emotion-0 svg path {
-  fill: currentColor;
+  fill: #333333;
 }
 
 .emotion-0:hover {
-  background: #f2f2f2;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-0:active {
-  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
 }
 
 .emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+  box-shadow: #1EA7FD 0 0 0 1px inset;
+}
+
+.emotion-0:focus:hover {
+  box-shadow: #1EA7FD 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -1942,11 +2926,16 @@ exports[`Storyshots Addons|Actions Decorated actions + config 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  background: #FAFBFC;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
   display: inline;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1955,6 +2944,38 @@ exports[`Storyshots Addons|Actions Decorated actions + config 1`] = `
   z-index: 2;
 }
 
+.emotion-0:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-0:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-0 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-0 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-0 svg {
   display: inline-block;
   height: 14px;
@@ -1967,19 +2988,23 @@ exports[`Storyshots Addons|Actions Decorated actions + config 1`] = `
 }
 
 .emotion-0 svg path {
-  fill: currentColor;
+  fill: #333333;
 }
 
 .emotion-0:hover {
-  background: #f2f2f2;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-0:active {
-  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
 }
 
 .emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+  box-shadow: #1EA7FD 0 0 0 1px inset;
+}
+
+.emotion-0:focus:hover {
+  box-shadow: #1EA7FD 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -2024,11 +3049,16 @@ exports[`Storyshots Addons|Actions Decorated actions 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  background: #FAFBFC;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
   display: inline;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -2037,6 +3067,38 @@ exports[`Storyshots Addons|Actions Decorated actions 1`] = `
   z-index: 2;
 }
 
+.emotion-0:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-0:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-0 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-0 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-0 svg {
   display: inline-block;
   height: 14px;
@@ -2049,19 +3111,23 @@ exports[`Storyshots Addons|Actions Decorated actions 1`] = `
 }
 
 .emotion-0 svg path {
-  fill: currentColor;
+  fill: #333333;
 }
 
 .emotion-0:hover {
-  background: #f2f2f2;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-0:active {
-  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
 }
 
 .emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+  box-shadow: #1EA7FD 0 0 0 1px inset;
+}
+
+.emotion-0:focus:hover {
+  box-shadow: #1EA7FD 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -2107,11 +3173,16 @@ Array [
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  background: #FAFBFC;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
   display: inline;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -2120,6 +3191,38 @@ Array [
   z-index: 2;
 }
 
+.emotion-0:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-0:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-0 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-0 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-0 svg {
   display: inline-block;
   height: 14px;
@@ -2132,19 +3235,23 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: currentColor;
+  fill: #333333;
 }
 
 .emotion-0:hover {
-  background: #f2f2f2;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-0:active {
-  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
 }
 
 .emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+  box-shadow: #1EA7FD 0 0 0 1px inset;
+}
+
+.emotion-0:focus:hover {
+  box-shadow: #1EA7FD 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -2186,11 +3293,16 @@ Array [
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  background: #FAFBFC;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
   display: inline;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -2199,6 +3311,38 @@ Array [
   z-index: 2;
 }
 
+.emotion-0:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-0:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-0 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-0 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-0 svg {
   display: inline-block;
   height: 14px;
@@ -2211,19 +3355,23 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: currentColor;
+  fill: #333333;
 }
 
 .emotion-0:hover {
-  background: #f2f2f2;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-0:active {
-  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
 }
 
 .emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+  box-shadow: #1EA7FD 0 0 0 1px inset;
+}
+
+.emotion-0:focus:hover {
+  box-shadow: #1EA7FD 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -2269,11 +3417,16 @@ exports[`Storyshots Addons|Actions Multiple actions + config 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  background: #FAFBFC;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
   display: inline;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -2282,6 +3435,38 @@ exports[`Storyshots Addons|Actions Multiple actions + config 1`] = `
   z-index: 2;
 }
 
+.emotion-0:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-0:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-0 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-0 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-0 svg {
   display: inline-block;
   height: 14px;
@@ -2294,19 +3479,23 @@ exports[`Storyshots Addons|Actions Multiple actions + config 1`] = `
 }
 
 .emotion-0 svg path {
-  fill: currentColor;
+  fill: #333333;
 }
 
 .emotion-0:hover {
-  background: #f2f2f2;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-0:active {
-  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
 }
 
 .emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+  box-shadow: #1EA7FD 0 0 0 1px inset;
+}
+
+.emotion-0:focus:hover {
+  box-shadow: #1EA7FD 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -2351,11 +3540,16 @@ exports[`Storyshots Addons|Actions Multiple actions 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  background: #FAFBFC;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
   display: inline;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -2364,6 +3558,38 @@ exports[`Storyshots Addons|Actions Multiple actions 1`] = `
   z-index: 2;
 }
 
+.emotion-0:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-0:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-0 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-0 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-0 svg {
   display: inline-block;
   height: 14px;
@@ -2376,19 +3602,23 @@ exports[`Storyshots Addons|Actions Multiple actions 1`] = `
 }
 
 .emotion-0 svg path {
-  fill: currentColor;
+  fill: #333333;
 }
 
 .emotion-0:hover {
-  background: #f2f2f2;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-0:active {
-  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
 }
 
 .emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+  box-shadow: #1EA7FD 0 0 0 1px inset;
+}
+
+.emotion-0:focus:hover {
+  box-shadow: #1EA7FD 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -2433,11 +3663,16 @@ exports[`Storyshots Addons|Actions Multiple actions as object 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  background: #FAFBFC;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
   display: inline;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -2446,6 +3681,38 @@ exports[`Storyshots Addons|Actions Multiple actions as object 1`] = `
   z-index: 2;
 }
 
+.emotion-0:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-0:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-0 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-0 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-0 svg {
   display: inline-block;
   height: 14px;
@@ -2458,19 +3725,23 @@ exports[`Storyshots Addons|Actions Multiple actions as object 1`] = `
 }
 
 .emotion-0 svg path {
-  fill: currentColor;
+  fill: #333333;
 }
 
 .emotion-0:hover {
-  background: #f2f2f2;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-0:active {
-  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
 }
 
 .emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+  box-shadow: #1EA7FD 0 0 0 1px inset;
+}
+
+.emotion-0:focus:hover {
+  box-shadow: #1EA7FD 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -2515,11 +3786,16 @@ exports[`Storyshots Addons|Actions Multiple actions, object + config 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  background: #FAFBFC;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
   display: inline;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -2528,6 +3804,38 @@ exports[`Storyshots Addons|Actions Multiple actions, object + config 1`] = `
   z-index: 2;
 }
 
+.emotion-0:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-0:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-0 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-0 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-0 svg {
   display: inline-block;
   height: 14px;
@@ -2540,19 +3848,23 @@ exports[`Storyshots Addons|Actions Multiple actions, object + config 1`] = `
 }
 
 .emotion-0 svg path {
-  fill: currentColor;
+  fill: #333333;
 }
 
 .emotion-0:hover {
-  background: #f2f2f2;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-0:active {
-  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
 }
 
 .emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+  box-shadow: #1EA7FD 0 0 0 1px inset;
+}
+
+.emotion-0:focus:hover {
+  box-shadow: #1EA7FD 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -2601,11 +3913,16 @@ Array [
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  background: #FAFBFC;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
   display: inline;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -2614,6 +3931,38 @@ Array [
   z-index: 2;
 }
 
+.emotion-0:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-0:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-0 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-0 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-0 svg {
   display: inline-block;
   height: 14px;
@@ -2626,19 +3975,23 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: currentColor;
+  fill: #333333;
 }
 
 .emotion-0:hover {
-  background: #f2f2f2;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-0:active {
-  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
 }
 
 .emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+  box-shadow: #1EA7FD 0 0 0 1px inset;
+}
+
+.emotion-0:focus:hover {
+  box-shadow: #1EA7FD 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -2684,11 +4037,16 @@ exports[`Storyshots Addons|Actions Reserved keyword as name 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  background: #FAFBFC;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
   display: inline;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -2697,6 +4055,38 @@ exports[`Storyshots Addons|Actions Reserved keyword as name 1`] = `
   z-index: 2;
 }
 
+.emotion-0:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-0:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-0 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-0 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-0 svg {
   display: inline-block;
   height: 14px;
@@ -2709,19 +4099,23 @@ exports[`Storyshots Addons|Actions Reserved keyword as name 1`] = `
 }
 
 .emotion-0 svg path {
-  fill: currentColor;
+  fill: #333333;
 }
 
 .emotion-0:hover {
-  background: #f2f2f2;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-0:active {
-  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
 }
 
 .emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+  box-shadow: #1EA7FD 0 0 0 1px inset;
+}
+
+.emotion-0:focus:hover {
+  box-shadow: #1EA7FD 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -2766,11 +4160,16 @@ exports[`Storyshots Addons|Actions configureActionsDepth 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  background: #FAFBFC;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
   display: inline;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -2779,6 +4178,38 @@ exports[`Storyshots Addons|Actions configureActionsDepth 1`] = `
   z-index: 2;
 }
 
+.emotion-0:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-0:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-0 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-0 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-0 svg {
   display: inline-block;
   height: 14px;
@@ -2791,19 +4222,23 @@ exports[`Storyshots Addons|Actions configureActionsDepth 1`] = `
 }
 
 .emotion-0 svg path {
-  fill: currentColor;
+  fill: #333333;
 }
 
 .emotion-0:hover {
-  background: #f2f2f2;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-0:active {
-  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
 }
 
 .emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+  box-shadow: #1EA7FD 0 0 0 1px inset;
+}
+
+.emotion-0:focus:hover {
+  box-shadow: #1EA7FD 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -2848,11 +4283,16 @@ exports[`Storyshots Addons|Actions.deprecated Decorated Action 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  background: #FAFBFC;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
   display: inline;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -2861,6 +4301,38 @@ exports[`Storyshots Addons|Actions.deprecated Decorated Action 1`] = `
   z-index: 2;
 }
 
+.emotion-0:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-0:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-0 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-0 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-0 svg {
   display: inline-block;
   height: 14px;
@@ -2873,19 +4345,23 @@ exports[`Storyshots Addons|Actions.deprecated Decorated Action 1`] = `
 }
 
 .emotion-0 svg path {
-  fill: currentColor;
+  fill: #333333;
 }
 
 .emotion-0:hover {
-  background: #f2f2f2;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-0:active {
-  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
 }
 
 .emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+  box-shadow: #1EA7FD 0 0 0 1px inset;
+}
+
+.emotion-0:focus:hover {
+  box-shadow: #1EA7FD 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
diff --git a/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap b/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
index f3f40f8d412..0d2a4a92597 100644
--- a/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
+++ b/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
@@ -10,7 +10,6 @@ exports[`Storyshots Basics|ActionBar manyItems 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  background: #FFFFFF;
 }
 
 .emotion-0 {
@@ -26,7 +25,6 @@ exports[`Storyshots Basics|ActionBar manyItems 1`] = `
   -ms-flex-align: center;
   align-items: center;
   color: #333333;
-  background: #FFFFFF;
   font-size: 12px;
   line-height: 16px;
   font-weight: 700;
@@ -59,7 +57,6 @@ exports[`Storyshots Basics|ActionBar manyItems 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  background: #FFFFFF;
 }
 
 .emotion-0 {
@@ -75,7 +72,6 @@ exports[`Storyshots Basics|ActionBar manyItems 1`] = `
   -ms-flex-align: center;
   align-items: center;
   color: #333333;
-  background: #FFFFFF;
   font-size: 12px;
   line-height: 16px;
   font-weight: 700;
@@ -136,7 +132,6 @@ exports[`Storyshots Basics|ActionBar singleItem 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  background: #FFFFFF;
 }
 
 .emotion-0 {
@@ -152,7 +147,6 @@ exports[`Storyshots Basics|ActionBar singleItem 1`] = `
   -ms-flex-align: center;
   align-items: center;
   color: #333333;
-  background: #FFFFFF;
   font-size: 12px;
   line-height: 16px;
   font-weight: 700;
@@ -185,7 +179,6 @@ exports[`Storyshots Basics|ActionBar singleItem 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  background: #FFFFFF;
 }
 
 .emotion-0 {
@@ -201,7 +194,6 @@ exports[`Storyshots Basics|ActionBar singleItem 1`] = `
   -ms-flex-align: center;
   align-items: center;
   color: #333333;
-  background: #FFFFFF;
   font-size: 12px;
   line-height: 16px;
   font-weight: 700;
@@ -1692,6 +1684,10 @@ exports[`Storyshots Basics|DocumentFormatting sampleDocument 1`] = `
 `;
 
 exports[`Storyshots Basics|Placeholder singleChild 1`] = `
+.emotion-0 {
+  font-weight: 700;
+}
+
 .emotion-1 {
   padding: 30px;
   text-align: center;
@@ -1710,10 +1706,6 @@ exports[`Storyshots Basics|Placeholder singleChild 1`] = `
   font-size: 13px;
 }
 
-.emotion-0 {
-  font-weight: 700;
-}
-
 <div
   class="emotion-1"
 >
@@ -1726,13 +1718,6 @@ exports[`Storyshots Basics|Placeholder singleChild 1`] = `
 `;
 
 exports[`Storyshots Basics|Placeholder twoChildren 1`] = `
-.emotion-4 {
-  padding: 30px;
-  text-align: center;
-  color: #333333;
-  font-size: 13px;
-}
-
 .emotion-0 {
   font-weight: 700;
 }
@@ -1844,6 +1829,13 @@ exports[`Storyshots Basics|Placeholder twoChildren 1`] = `
   margin-right: 0.4em;
 }
 
+.emotion-4 {
+  padding: 30px;
+  text-align: center;
+  color: #333333;
+  font-size: 13px;
+}
+
 <div
   class="emotion-4"
 >
@@ -1899,6 +1891,43 @@ exports[`Storyshots Core|Events Force re-render 1`] = `
   font-size: 13px;
   font-weight: 700;
   line-height: 1;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-0:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-0 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-0 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
 }
 
 .emotion-0 svg {
@@ -1912,10 +1941,6 @@ exports[`Storyshots Core|Events Force re-render 1`] = `
   pointer-events: none;
 }
 
-.emotion-0 svg path {
-  fill: currentColor;
-}
-
 .emotion-0 {
   border: 0;
   border-radius: 3em;
@@ -1944,6 +1969,43 @@ exports[`Storyshots Core|Events Force re-render 1`] = `
   font-size: 13px;
   font-weight: 700;
   line-height: 1;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-0:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-0:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-0 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-0 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
 }
 
 .emotion-0 svg {
@@ -1957,10 +2019,6 @@ exports[`Storyshots Core|Events Force re-render 1`] = `
   pointer-events: none;
 }
 
-.emotion-0 svg path {
-  fill: currentColor;
-}
-
 <button
   class="emotion-0"
 >
@@ -2156,7 +2214,7 @@ exports[`Storyshots UI|Notifications/NotificationItem longText 1`] = `
   line-height: 16px;
   box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
   color: #FFFFFF;
-  background-color: rgba(0,0,0,0.95);
+  background-color: rgba(255,255,255,0.95);
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -2170,7 +2228,7 @@ exports[`Storyshots UI|Notifications/NotificationItem longText 1`] = `
   line-height: 16px;
   box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
   color: #FFFFFF;
-  background-color: rgba(0,0,0,0.95);
+  background-color: rgba(255,255,255,0.95);
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -2200,7 +2258,7 @@ exports[`Storyshots UI|Notifications/NotificationItem simple 1`] = `
   line-height: 16px;
   box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
   color: #FFFFFF;
-  background-color: rgba(0,0,0,0.95);
+  background-color: rgba(255,255,255,0.95);
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -2214,7 +2272,7 @@ exports[`Storyshots UI|Notifications/NotificationItem simple 1`] = `
   line-height: 16px;
   box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
   color: #FFFFFF;
-  background-color: rgba(0,0,0,0.95);
+  background-color: rgba(255,255,255,0.95);
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -2244,7 +2302,7 @@ exports[`Storyshots UI|Notifications/NotificationItem withLink 1`] = `
   line-height: 16px;
   box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
   color: #FFFFFF;
-  background-color: rgba(0,0,0,0.95);
+  background-color: rgba(255,255,255,0.95);
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -2258,7 +2316,7 @@ exports[`Storyshots UI|Notifications/NotificationItem withLink 1`] = `
   line-height: 16px;
   box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
   color: #FFFFFF;
-  background-color: rgba(0,0,0,0.95);
+  background-color: rgba(255,255,255,0.95);
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -2289,7 +2347,7 @@ exports[`Storyshots UI|Notifications/NotificationList all 1`] = `
   line-height: 16px;
   box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
   color: #FFFFFF;
-  background-color: rgba(0,0,0,0.95);
+  background-color: rgba(255,255,255,0.95);
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -2311,7 +2369,7 @@ exports[`Storyshots UI|Notifications/NotificationList all 1`] = `
   line-height: 16px;
   box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
   color: #FFFFFF;
-  background-color: rgba(0,0,0,0.95);
+  background-color: rgba(255,255,255,0.95);
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -2398,7 +2456,7 @@ exports[`Storyshots UI|Notifications/NotificationList single 1`] = `
   line-height: 16px;
   box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
   color: #FFFFFF;
-  background-color: rgba(0,0,0,0.95);
+  background-color: rgba(255,255,255,0.95);
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -2420,7 +2478,7 @@ exports[`Storyshots UI|Notifications/NotificationList single 1`] = `
   line-height: 16px;
   box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
   color: #FFFFFF;
-  background-color: rgba(0,0,0,0.95);
+  background-color: rgba(255,255,255,0.95);
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -3112,11 +3170,16 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  background: #FAFBFC;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
   display: inline;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -3125,6 +3188,38 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
   z-index: 2;
 }
 
+.emotion-88:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-88:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-88:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-88 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-88 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-88 svg {
   display: inline-block;
   height: 14px;
@@ -3137,19 +3232,23 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
 }
 
 .emotion-88 svg path {
-  fill: currentColor;
+  fill: #333333;
 }
 
 .emotion-88:hover {
-  background: #f2f2f2;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-88:active {
-  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
 }
 
 .emotion-88:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+  box-shadow: #1EA7FD 0 0 0 1px inset;
+}
+
+.emotion-88:focus:hover {
+  box-shadow: #1EA7FD 0 0 0 1px inset;
 }
 
 .emotion-88:hover {
@@ -3578,11 +3677,16 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  background: #FAFBFC;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
   display: inline;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -3591,6 +3695,38 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
   z-index: 2;
 }
 
+.emotion-88:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-88:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-88:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-88 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-88 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-88 svg {
   display: inline-block;
   height: 14px;
@@ -3603,19 +3739,23 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
 }
 
 .emotion-88 svg path {
-  fill: currentColor;
+  fill: #333333;
 }
 
 .emotion-88:hover {
-  background: #f2f2f2;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-88:active {
-  background: #FFFFFF;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
 }
 
 .emotion-88:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+  box-shadow: #1EA7FD 0 0 0 1px inset;
+}
+
+.emotion-88:focus:hover {
+  box-shadow: #1EA7FD 0 0 0 1px inset;
 }
 
 .emotion-88:hover {
@@ -4125,15 +4265,13 @@ exports[`Storyshots UI|Sidebar/ListItemIcon all 1`] = `
 
 .emotion-16 {
   min-width: 180px;
-  overflow: hidden;
-  border-radius: 8px;
 }
 
 .emotion-5 {
   font-size: 12px;
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
-  color: rgba(51,51,51,0.5);
+  color: #999999;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -4153,6 +4291,10 @@ exports[`Storyshots UI|Sidebar/ListItemIcon all 1`] = `
   align-items: center;
 }
 
+.emotion-5 + .emotion-5 {
+  border-top: 1px solid #EEEEEE;
+}
+
 .emotion-5 > * + * {
   padding-left: 10px;
 }
@@ -4195,7 +4337,7 @@ exports[`Storyshots UI|Sidebar/ListItemIcon all 1`] = `
 }
 
 .emotion-3 {
-  color: #333333;
+  color: #444444;
 }
 
 .emotion-6 {
@@ -4212,15 +4354,13 @@ exports[`Storyshots UI|Sidebar/ListItemIcon all 1`] = `
 
 .emotion-16 {
   min-width: 180px;
-  overflow: hidden;
-  border-radius: 8px;
 }
 
 .emotion-5 {
   font-size: 12px;
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
-  color: rgba(51,51,51,0.5);
+  color: #999999;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -4240,6 +4380,10 @@ exports[`Storyshots UI|Sidebar/ListItemIcon all 1`] = `
   align-items: center;
 }
 
+.emotion-5 + .emotion-5 {
+  border-top: 1px solid #EEEEEE;
+}
+
 .emotion-5 > * + * {
   padding-left: 10px;
 }
@@ -4282,7 +4426,7 @@ exports[`Storyshots UI|Sidebar/ListItemIcon all 1`] = `
 }
 
 .emotion-3 {
-  color: #333333;
+  color: #444444;
 }
 
 .emotion-6 {
@@ -4429,7 +4573,7 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
   line-height: 16px;
   box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
   color: #FFFFFF;
-  background-color: rgba(0,0,0,0.95);
+  background-color: rgba(255,255,255,0.95);
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -4547,14 +4691,51 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
   padding: 7px;
-  box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
-  color: rgba(51,51,51,0.7);
+  box-shadow: #DDDDDD 0 0 0 1px inset;
+  color: #666666;
   background: transparent;
   position: relative;
   overflow: visible;
 }
 
+.emotion-5:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-5:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-5:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-5 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-5 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-5 svg {
   display: inline-block;
   height: 14px;
@@ -4566,22 +4747,23 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
   pointer-events: none;
 }
 
-.emotion-5 svg path {
-  fill: currentColor;
-}
-
 .emotion-5 svg {
   display: block;
   margin: 0;
 }
 
+.emotion-5 svg path {
+  fill: #666666;
+}
+
 .emotion-5:hover {
-  box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
+  box-shadow: #999999 0 0 0 1px inset;
 }
 
 .emotion-5:active {
-  box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
-  color: #333;
+  background: #DDDDDD;
+  box-shadow: #DDDDDD 0 0 0 1px inset;
+  color: #333333;
 }
 
 .emotion-8 {
@@ -4834,7 +5016,7 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
   line-height: 16px;
   box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
   color: #FFFFFF;
-  background-color: rgba(0,0,0,0.95);
+  background-color: rgba(255,255,255,0.95);
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -4952,14 +5134,51 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
   padding: 7px;
-  box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
-  color: rgba(51,51,51,0.7);
+  box-shadow: #DDDDDD 0 0 0 1px inset;
+  color: #666666;
   background: transparent;
   position: relative;
   overflow: visible;
 }
 
+.emotion-5:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-5:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-5:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-5 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-5 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-5 svg {
   display: inline-block;
   height: 14px;
@@ -4971,22 +5190,23 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
   pointer-events: none;
 }
 
-.emotion-5 svg path {
-  fill: currentColor;
-}
-
 .emotion-5 svg {
   display: block;
   margin: 0;
 }
 
+.emotion-5 svg path {
+  fill: #666666;
+}
+
 .emotion-5:hover {
-  box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
+  box-shadow: #999999 0 0 0 1px inset;
 }
 
 .emotion-5:active {
-  box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
-  color: #333;
+  background: #DDDDDD;
+  box-shadow: #DDDDDD 0 0 0 1px inset;
+  color: #333333;
 }
 
 .emotion-8 {
@@ -5210,7 +5430,7 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
           >
             <path
               d="M53.3 31.7c-1.7 0-3.4-.3-5-.7-1.5-.5-2.8-1.1-3.9-2l1.6-3.5c2.2 1.5 4.6 2.3 7.3 2.3 1.5 0 2.5-.2 3.3-.7.7-.5 1.1-1 1.1-1.9 0-.7-.3-1.3-1-1.7s-2-.8-3.7-1.2c-2-.4-3.6-.9-4.8-1.5-1.1-.5-2-1.2-2.6-2-.5-1-.8-2-.8-3.2 0-1.4.4-2.6 1.2-3.6.7-1.1 1.8-2 3.2-2.6 1.3-.6 2.9-.9 4.7-.9 1.6 0 3.1.3 4.6.7 1.5.5 2.7 1.1 3.5 2l-1.6 3.5c-2-1.5-4.2-2.3-6.5-2.3-1.3 0-2.3.2-3 .8-.8.5-1.2 1.1-1.2 2 0 .5.2 1 .5 1.3.2.3.7.6 1.4.9l2.9.8c2.9.6 5 1.4 6.2 2.4a5 5 0 0 1 2 4.2 6 6 0 0 1-2.5 5c-1.7 1.2-4 1.9-7 1.9zm21-3.6l1.4-.1-.2 3.5-1.9.1c-2.4 0-4.1-.5-5.2-1.5-1.1-1-1.6-2.7-1.6-4.8v-6h-3v-3.6h3V11h4.8v4.6h4v3.6h-4v6c0 1.8.9 2.8 2.6 2.8zm11.1 3.5c-1.6 0-3-.3-4.3-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.3-1 1.7 0 3.2.3 4.4 1a7 7 0 0 1 3 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.4 1zm0-3.6c2.4 0 3.6-1.6 3.6-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.6-1c-2.3 0-3.5 1.4-3.5 4.4 0 3 1.2 4.6 3.5 4.6zm21.7-8.8l-2.7.3c-1.3.2-2.3.5-2.8 1.2-.6.6-.9 1.4-.9 2.5v8.2H96V15.7h4.6v2.6c.8-1.8 2.5-2.8 5-3h1.3l.3 4zm14-3.5h4.8L116.4 37h-4.9l3-6.6-6.4-14.8h5l4 10 4-10zm16-.4c1.4 0 2.6.3 3.6 1 1 .6 1.9 1.6 2.5 2.8.6 1.2.9 2.7.9 4.3 0 1.6-.3 3-1 4.3a6.9 6.9 0 0 1-2.4 2.9c-1 .7-2.2 1-3.6 1-1 0-2-.2-3-.7-.8-.4-1.5-1-2-1.9v2.4h-4.7V8.8h4.8v9c.5-.8 1.2-1.4 2-1.9.9-.4 1.8-.6 3-.6zM135.7 28c1.1 0 2-.4 2.6-1.2.6-.8 1-2 1-3.4 0-1.5-.4-2.5-1-3.3s-1.5-1.1-2.6-1.1-2 .3-2.6 1.1c-.6.8-1 2-1 3.3 0 1.5.4 2.6 1 3.4.6.8 1.5 1.2 2.6 1.2zm18.9 3.6c-1.7 0-3.2-.3-4.4-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.4-1 1.6 0 3 .3 4.3 1a7 7 0 0 1 3 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.3 1zm0-3.6c2.3 0 3.5-1.6 3.5-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.5-1c-2.4 0-3.6 1.4-3.6 4.4 0 3 1.2 4.6 3.6 4.6zm18 3.6c-1.7 0-3.2-.3-4.4-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.4-1 1.6 0 3 .3 4.4 1a7 7 0 0 1 2.9 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.3 1zm0-3.6c2.3 0 3.5-1.6 3.5-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.5-1c-2.4 0-3.6 1.4-3.6 4.4 0 3 1.2 4.6 3.6 4.6zm27.4 3.4h-6l-6-7v7h-4.8V8.8h4.9v13.6l5.8-6.7h5.7l-6.6 7.5 7 8.2z"
-              fill="currentColor"
+              fill="#333"
             />
             <mask
               fill="#fff"
@@ -5633,7 +5853,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   line-height: 16px;
   box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
   color: #FFFFFF;
-  background-color: rgba(0,0,0,0.95);
+  background-color: rgba(255,255,255,0.95);
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -5751,14 +5971,51 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
   padding: 7px;
-  box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
-  color: rgba(51,51,51,0.7);
+  box-shadow: #DDDDDD 0 0 0 1px inset;
+  color: #666666;
   background: transparent;
   position: relative;
   overflow: visible;
 }
 
+.emotion-5:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-5:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-5:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-5 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-5 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-5 svg {
   display: inline-block;
   height: 14px;
@@ -5770,22 +6027,23 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   pointer-events: none;
 }
 
-.emotion-5 svg path {
-  fill: currentColor;
-}
-
 .emotion-5 svg {
   display: block;
   margin: 0;
 }
 
+.emotion-5 svg path {
+  fill: #666666;
+}
+
 .emotion-5:hover {
-  box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
+  box-shadow: #999999 0 0 0 1px inset;
 }
 
 .emotion-5:active {
-  box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
-  color: #333;
+  background: #DDDDDD;
+  box-shadow: #DDDDDD 0 0 0 1px inset;
+  color: #333333;
 }
 
 .emotion-14 {
@@ -5954,7 +6212,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   transition: background 75ms ease-out;
   padding-left: 9px;
   cursor: pointer;
-  color: #333333;
+  color: rgba(51,51,51,0.8);
 }
 
 .emotion-19:hover {
@@ -6072,7 +6330,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   transition: background 75ms ease-out;
   padding-left: 24px;
   cursor: pointer;
-  color: #333333;
+  color: rgba(51,51,51,0.8);
 }
 
 .emotion-29:hover {
@@ -6161,7 +6419,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   line-height: 16px;
   box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
   color: #FFFFFF;
-  background-color: rgba(0,0,0,0.95);
+  background-color: rgba(255,255,255,0.95);
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -6279,14 +6537,51 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
   padding: 7px;
-  box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
-  color: rgba(51,51,51,0.7);
+  box-shadow: #DDDDDD 0 0 0 1px inset;
+  color: #666666;
   background: transparent;
   position: relative;
   overflow: visible;
 }
 
+.emotion-5:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-5:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-5:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-5 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-5 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-5 svg {
   display: inline-block;
   height: 14px;
@@ -6298,22 +6593,23 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   pointer-events: none;
 }
 
-.emotion-5 svg path {
-  fill: currentColor;
-}
-
 .emotion-5 svg {
   display: block;
   margin: 0;
 }
 
+.emotion-5 svg path {
+  fill: #666666;
+}
+
 .emotion-5:hover {
-  box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
+  box-shadow: #999999 0 0 0 1px inset;
 }
 
 .emotion-5:active {
-  box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
-  color: #333;
+  background: #DDDDDD;
+  box-shadow: #DDDDDD 0 0 0 1px inset;
+  color: #333333;
 }
 
 .emotion-14 {
@@ -6482,7 +6778,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   transition: background 75ms ease-out;
   padding-left: 9px;
   cursor: pointer;
-  color: #333333;
+  color: rgba(51,51,51,0.8);
 }
 
 .emotion-19:hover {
@@ -6600,7 +6896,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   transition: background 75ms ease-out;
   padding-left: 24px;
   cursor: pointer;
-  color: #333333;
+  color: rgba(51,51,51,0.8);
 }
 
 .emotion-29:hover {
@@ -6700,7 +6996,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
           >
             <path
               d="M53.3 31.7c-1.7 0-3.4-.3-5-.7-1.5-.5-2.8-1.1-3.9-2l1.6-3.5c2.2 1.5 4.6 2.3 7.3 2.3 1.5 0 2.5-.2 3.3-.7.7-.5 1.1-1 1.1-1.9 0-.7-.3-1.3-1-1.7s-2-.8-3.7-1.2c-2-.4-3.6-.9-4.8-1.5-1.1-.5-2-1.2-2.6-2-.5-1-.8-2-.8-3.2 0-1.4.4-2.6 1.2-3.6.7-1.1 1.8-2 3.2-2.6 1.3-.6 2.9-.9 4.7-.9 1.6 0 3.1.3 4.6.7 1.5.5 2.7 1.1 3.5 2l-1.6 3.5c-2-1.5-4.2-2.3-6.5-2.3-1.3 0-2.3.2-3 .8-.8.5-1.2 1.1-1.2 2 0 .5.2 1 .5 1.3.2.3.7.6 1.4.9l2.9.8c2.9.6 5 1.4 6.2 2.4a5 5 0 0 1 2 4.2 6 6 0 0 1-2.5 5c-1.7 1.2-4 1.9-7 1.9zm21-3.6l1.4-.1-.2 3.5-1.9.1c-2.4 0-4.1-.5-5.2-1.5-1.1-1-1.6-2.7-1.6-4.8v-6h-3v-3.6h3V11h4.8v4.6h4v3.6h-4v6c0 1.8.9 2.8 2.6 2.8zm11.1 3.5c-1.6 0-3-.3-4.3-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.3-1 1.7 0 3.2.3 4.4 1a7 7 0 0 1 3 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.4 1zm0-3.6c2.4 0 3.6-1.6 3.6-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.6-1c-2.3 0-3.5 1.4-3.5 4.4 0 3 1.2 4.6 3.5 4.6zm21.7-8.8l-2.7.3c-1.3.2-2.3.5-2.8 1.2-.6.6-.9 1.4-.9 2.5v8.2H96V15.7h4.6v2.6c.8-1.8 2.5-2.8 5-3h1.3l.3 4zm14-3.5h4.8L116.4 37h-4.9l3-6.6-6.4-14.8h5l4 10 4-10zm16-.4c1.4 0 2.6.3 3.6 1 1 .6 1.9 1.6 2.5 2.8.6 1.2.9 2.7.9 4.3 0 1.6-.3 3-1 4.3a6.9 6.9 0 0 1-2.4 2.9c-1 .7-2.2 1-3.6 1-1 0-2-.2-3-.7-.8-.4-1.5-1-2-1.9v2.4h-4.7V8.8h4.8v9c.5-.8 1.2-1.4 2-1.9.9-.4 1.8-.6 3-.6zM135.7 28c1.1 0 2-.4 2.6-1.2.6-.8 1-2 1-3.4 0-1.5-.4-2.5-1-3.3s-1.5-1.1-2.6-1.1-2 .3-2.6 1.1c-.6.8-1 2-1 3.3 0 1.5.4 2.6 1 3.4.6.8 1.5 1.2 2.6 1.2zm18.9 3.6c-1.7 0-3.2-.3-4.4-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.4-1 1.6 0 3 .3 4.3 1a7 7 0 0 1 3 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.3 1zm0-3.6c2.3 0 3.5-1.6 3.5-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.5-1c-2.4 0-3.6 1.4-3.6 4.4 0 3 1.2 4.6 3.6 4.6zm18 3.6c-1.7 0-3.2-.3-4.4-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.4-1 1.6 0 3 .3 4.4 1a7 7 0 0 1 2.9 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.3 1zm0-3.6c2.3 0 3.5-1.6 3.5-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.5-1c-2.4 0-3.6 1.4-3.6 4.4 0 3 1.2 4.6 3.6 4.6zm27.4 3.4h-6l-6-7v7h-4.8V8.8h4.9v13.6l5.8-6.7h5.7l-6.6 7.5 7 8.2z"
-              fill="currentColor"
+              fill="#333"
             />
             <mask
               fill="#fff"
@@ -7038,14 +7334,51 @@ exports[`Storyshots UI|Sidebar/SidebarHeading customBrand 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
   padding: 7px;
-  box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
-  color: rgba(51,51,51,0.7);
+  box-shadow: #DDDDDD 0 0 0 1px inset;
+  color: #666666;
   background: transparent;
   position: relative;
   overflow: visible;
 }
 
+.emotion-3:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-3:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-3:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-3 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-3 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-3 svg {
   display: inline-block;
   height: 14px;
@@ -7057,22 +7390,23 @@ exports[`Storyshots UI|Sidebar/SidebarHeading customBrand 1`] = `
   pointer-events: none;
 }
 
-.emotion-3 svg path {
-  fill: currentColor;
-}
-
 .emotion-3 svg {
   display: block;
   margin: 0;
 }
 
+.emotion-3 svg path {
+  fill: #666666;
+}
+
 .emotion-3:hover {
-  box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
+  box-shadow: #999999 0 0 0 1px inset;
 }
 
 .emotion-3:active {
-  box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
-  color: #333;
+  background: #DDDDDD;
+  box-shadow: #DDDDDD 0 0 0 1px inset;
+  color: #333333;
 }
 
 .emotion-5 {
@@ -7148,14 +7482,51 @@ exports[`Storyshots UI|Sidebar/SidebarHeading customBrand 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
   padding: 7px;
-  box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
-  color: rgba(51,51,51,0.7);
+  box-shadow: #DDDDDD 0 0 0 1px inset;
+  color: #666666;
   background: transparent;
   position: relative;
   overflow: visible;
 }
 
+.emotion-3:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-3:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-3:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-3 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-3 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-3 svg {
   display: inline-block;
   height: 14px;
@@ -7167,22 +7538,23 @@ exports[`Storyshots UI|Sidebar/SidebarHeading customBrand 1`] = `
   pointer-events: none;
 }
 
-.emotion-3 svg path {
-  fill: currentColor;
-}
-
 .emotion-3 svg {
   display: block;
   margin: 0;
 }
 
+.emotion-3 svg path {
+  fill: #666666;
+}
+
 .emotion-3:hover {
-  box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
+  box-shadow: #999999 0 0 0 1px inset;
 }
 
 .emotion-3:active {
-  box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
-  color: #333;
+  background: #DDDDDD;
+  box-shadow: #DDDDDD 0 0 0 1px inset;
+  color: #333333;
 }
 
 .emotion-5 {
@@ -7389,14 +7761,51 @@ exports[`Storyshots UI|Sidebar/SidebarHeading menuHighlighted 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
   padding: 7px;
-  box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
-  color: rgba(51,51,51,0.7);
+  box-shadow: #DDDDDD 0 0 0 1px inset;
+  color: #666666;
   background: transparent;
   position: relative;
   overflow: visible;
 }
 
+.emotion-5:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-5:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-5:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-5 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-5 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-5 svg {
   display: inline-block;
   height: 14px;
@@ -7408,22 +7817,23 @@ exports[`Storyshots UI|Sidebar/SidebarHeading menuHighlighted 1`] = `
   pointer-events: none;
 }
 
-.emotion-5 svg path {
-  fill: currentColor;
-}
-
 .emotion-5 svg {
   display: block;
   margin: 0;
 }
 
+.emotion-5 svg path {
+  fill: #666666;
+}
+
 .emotion-5:hover {
-  box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
+  box-shadow: #999999 0 0 0 1px inset;
 }
 
 .emotion-5:active {
-  box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
-  color: #333;
+  background: #DDDDDD;
+  box-shadow: #DDDDDD 0 0 0 1px inset;
+  color: #333333;
 }
 
 .emotion-5:after {
@@ -7540,14 +7950,51 @@ exports[`Storyshots UI|Sidebar/SidebarHeading menuHighlighted 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
   padding: 7px;
-  box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
-  color: rgba(51,51,51,0.7);
+  box-shadow: #DDDDDD 0 0 0 1px inset;
+  color: #666666;
   background: transparent;
   position: relative;
   overflow: visible;
 }
 
+.emotion-5:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-5:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-5:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-5 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-5 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-5 svg {
   display: inline-block;
   height: 14px;
@@ -7559,22 +8006,23 @@ exports[`Storyshots UI|Sidebar/SidebarHeading menuHighlighted 1`] = `
   pointer-events: none;
 }
 
-.emotion-5 svg path {
-  fill: currentColor;
-}
-
 .emotion-5 svg {
   display: block;
   margin: 0;
 }
 
+.emotion-5 svg path {
+  fill: #666666;
+}
+
 .emotion-5:hover {
-  box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
+  box-shadow: #999999 0 0 0 1px inset;
 }
 
 .emotion-5:active {
-  box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
-  color: #333;
+  background: #DDDDDD;
+  box-shadow: #DDDDDD 0 0 0 1px inset;
+  color: #333333;
 }
 
 .emotion-5:after {
@@ -7617,7 +8065,7 @@ exports[`Storyshots UI|Sidebar/SidebarHeading menuHighlighted 1`] = `
         >
           <path
             d="M53.3 31.7c-1.7 0-3.4-.3-5-.7-1.5-.5-2.8-1.1-3.9-2l1.6-3.5c2.2 1.5 4.6 2.3 7.3 2.3 1.5 0 2.5-.2 3.3-.7.7-.5 1.1-1 1.1-1.9 0-.7-.3-1.3-1-1.7s-2-.8-3.7-1.2c-2-.4-3.6-.9-4.8-1.5-1.1-.5-2-1.2-2.6-2-.5-1-.8-2-.8-3.2 0-1.4.4-2.6 1.2-3.6.7-1.1 1.8-2 3.2-2.6 1.3-.6 2.9-.9 4.7-.9 1.6 0 3.1.3 4.6.7 1.5.5 2.7 1.1 3.5 2l-1.6 3.5c-2-1.5-4.2-2.3-6.5-2.3-1.3 0-2.3.2-3 .8-.8.5-1.2 1.1-1.2 2 0 .5.2 1 .5 1.3.2.3.7.6 1.4.9l2.9.8c2.9.6 5 1.4 6.2 2.4a5 5 0 0 1 2 4.2 6 6 0 0 1-2.5 5c-1.7 1.2-4 1.9-7 1.9zm21-3.6l1.4-.1-.2 3.5-1.9.1c-2.4 0-4.1-.5-5.2-1.5-1.1-1-1.6-2.7-1.6-4.8v-6h-3v-3.6h3V11h4.8v4.6h4v3.6h-4v6c0 1.8.9 2.8 2.6 2.8zm11.1 3.5c-1.6 0-3-.3-4.3-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.3-1 1.7 0 3.2.3 4.4 1a7 7 0 0 1 3 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.4 1zm0-3.6c2.4 0 3.6-1.6 3.6-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.6-1c-2.3 0-3.5 1.4-3.5 4.4 0 3 1.2 4.6 3.5 4.6zm21.7-8.8l-2.7.3c-1.3.2-2.3.5-2.8 1.2-.6.6-.9 1.4-.9 2.5v8.2H96V15.7h4.6v2.6c.8-1.8 2.5-2.8 5-3h1.3l.3 4zm14-3.5h4.8L116.4 37h-4.9l3-6.6-6.4-14.8h5l4 10 4-10zm16-.4c1.4 0 2.6.3 3.6 1 1 .6 1.9 1.6 2.5 2.8.6 1.2.9 2.7.9 4.3 0 1.6-.3 3-1 4.3a6.9 6.9 0 0 1-2.4 2.9c-1 .7-2.2 1-3.6 1-1 0-2-.2-3-.7-.8-.4-1.5-1-2-1.9v2.4h-4.7V8.8h4.8v9c.5-.8 1.2-1.4 2-1.9.9-.4 1.8-.6 3-.6zM135.7 28c1.1 0 2-.4 2.6-1.2.6-.8 1-2 1-3.4 0-1.5-.4-2.5-1-3.3s-1.5-1.1-2.6-1.1-2 .3-2.6 1.1c-.6.8-1 2-1 3.3 0 1.5.4 2.6 1 3.4.6.8 1.5 1.2 2.6 1.2zm18.9 3.6c-1.7 0-3.2-.3-4.4-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.4-1 1.6 0 3 .3 4.3 1a7 7 0 0 1 3 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.3 1zm0-3.6c2.3 0 3.5-1.6 3.5-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.5-1c-2.4 0-3.6 1.4-3.6 4.4 0 3 1.2 4.6 3.6 4.6zm18 3.6c-1.7 0-3.2-.3-4.4-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.4-1 1.6 0 3 .3 4.4 1a7 7 0 0 1 2.9 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.3 1zm0-3.6c2.3 0 3.5-1.6 3.5-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.5-1c-2.4 0-3.6 1.4-3.6 4.4 0 3 1.2 4.6 3.6 4.6zm27.4 3.4h-6l-6-7v7h-4.8V8.8h4.9v13.6l5.8-6.7h5.7l-6.6 7.5 7 8.2z"
-            fill="currentColor"
+            fill="#333"
           />
           <mask
             fill="#fff"
@@ -7751,14 +8199,51 @@ exports[`Storyshots UI|Sidebar/SidebarHeading simple 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
   padding: 7px;
-  box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
-  color: rgba(51,51,51,0.7);
+  box-shadow: #DDDDDD 0 0 0 1px inset;
+  color: #666666;
   background: transparent;
   position: relative;
   overflow: visible;
 }
 
+.emotion-5:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-5:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-5:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-5 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-5 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-5 svg {
   display: inline-block;
   height: 14px;
@@ -7770,22 +8255,23 @@ exports[`Storyshots UI|Sidebar/SidebarHeading simple 1`] = `
   pointer-events: none;
 }
 
-.emotion-5 svg path {
-  fill: currentColor;
-}
-
 .emotion-5 svg {
   display: block;
   margin: 0;
 }
 
+.emotion-5 svg path {
+  fill: #666666;
+}
+
 .emotion-5:hover {
-  box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
+  box-shadow: #999999 0 0 0 1px inset;
 }
 
 .emotion-5:active {
-  box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
-  color: #333;
+  background: #DDDDDD;
+  box-shadow: #DDDDDD 0 0 0 1px inset;
+  color: #333333;
 }
 
 .emotion-7 {
@@ -7891,14 +8377,51 @@ exports[`Storyshots UI|Sidebar/SidebarHeading simple 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
   padding: 7px;
-  box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
-  color: rgba(51,51,51,0.7);
+  box-shadow: #DDDDDD 0 0 0 1px inset;
+  color: #666666;
   background: transparent;
   position: relative;
   overflow: visible;
 }
 
+.emotion-5:hover {
+  -webkit-transform: translate3d(0,-2px,0);
+  -ms-transform: translate3d(0,-2px,0);
+  transform: translate3d(0,-2px,0);
+}
+
+.emotion-5:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.emotion-5:hover {
+  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
+}
+
+.emotion-5 > span {
+  -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
+  -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
+  transform: scale3d(1,1,1) translate3d(0,0,0);
+  -webkit-transition: -webkit-transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  -webkit-transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  transition: transform 700ms cubic-bezier(0.175,0.885,0.335,1.05);
+  opacity: 1;
+}
+
+.emotion-5 [role="progressbar"] {
+  -webkit-transform: translate3d(0,100%,0);
+  -ms-transform: translate3d(0,100%,0);
+  transform: translate3d(0,100%,0);
+}
+
 .emotion-5 svg {
   display: inline-block;
   height: 14px;
@@ -7910,22 +8433,23 @@ exports[`Storyshots UI|Sidebar/SidebarHeading simple 1`] = `
   pointer-events: none;
 }
 
-.emotion-5 svg path {
-  fill: currentColor;
-}
-
 .emotion-5 svg {
   display: block;
   margin: 0;
 }
 
+.emotion-5 svg path {
+  fill: #666666;
+}
+
 .emotion-5:hover {
-  box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
+  box-shadow: #999999 0 0 0 1px inset;
 }
 
 .emotion-5:active {
-  box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
-  color: #333;
+  background: #DDDDDD;
+  box-shadow: #DDDDDD 0 0 0 1px inset;
+  color: #333333;
 }
 
 .emotion-7 {
@@ -7972,7 +8496,7 @@ exports[`Storyshots UI|Sidebar/SidebarHeading simple 1`] = `
         >
           <path
             d="M53.3 31.7c-1.7 0-3.4-.3-5-.7-1.5-.5-2.8-1.1-3.9-2l1.6-3.5c2.2 1.5 4.6 2.3 7.3 2.3 1.5 0 2.5-.2 3.3-.7.7-.5 1.1-1 1.1-1.9 0-.7-.3-1.3-1-1.7s-2-.8-3.7-1.2c-2-.4-3.6-.9-4.8-1.5-1.1-.5-2-1.2-2.6-2-.5-1-.8-2-.8-3.2 0-1.4.4-2.6 1.2-3.6.7-1.1 1.8-2 3.2-2.6 1.3-.6 2.9-.9 4.7-.9 1.6 0 3.1.3 4.6.7 1.5.5 2.7 1.1 3.5 2l-1.6 3.5c-2-1.5-4.2-2.3-6.5-2.3-1.3 0-2.3.2-3 .8-.8.5-1.2 1.1-1.2 2 0 .5.2 1 .5 1.3.2.3.7.6 1.4.9l2.9.8c2.9.6 5 1.4 6.2 2.4a5 5 0 0 1 2 4.2 6 6 0 0 1-2.5 5c-1.7 1.2-4 1.9-7 1.9zm21-3.6l1.4-.1-.2 3.5-1.9.1c-2.4 0-4.1-.5-5.2-1.5-1.1-1-1.6-2.7-1.6-4.8v-6h-3v-3.6h3V11h4.8v4.6h4v3.6h-4v6c0 1.8.9 2.8 2.6 2.8zm11.1 3.5c-1.6 0-3-.3-4.3-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.3-1 1.7 0 3.2.3 4.4 1a7 7 0 0 1 3 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.4 1zm0-3.6c2.4 0 3.6-1.6 3.6-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.6-1c-2.3 0-3.5 1.4-3.5 4.4 0 3 1.2 4.6 3.5 4.6zm21.7-8.8l-2.7.3c-1.3.2-2.3.5-2.8 1.2-.6.6-.9 1.4-.9 2.5v8.2H96V15.7h4.6v2.6c.8-1.8 2.5-2.8 5-3h1.3l.3 4zm14-3.5h4.8L116.4 37h-4.9l3-6.6-6.4-14.8h5l4 10 4-10zm16-.4c1.4 0 2.6.3 3.6 1 1 .6 1.9 1.6 2.5 2.8.6 1.2.9 2.7.9 4.3 0 1.6-.3 3-1 4.3a6.9 6.9 0 0 1-2.4 2.9c-1 .7-2.2 1-3.6 1-1 0-2-.2-3-.7-.8-.4-1.5-1-2-1.9v2.4h-4.7V8.8h4.8v9c.5-.8 1.2-1.4 2-1.9.9-.4 1.8-.6 3-.6zM135.7 28c1.1 0 2-.4 2.6-1.2.6-.8 1-2 1-3.4 0-1.5-.4-2.5-1-3.3s-1.5-1.1-2.6-1.1-2 .3-2.6 1.1c-.6.8-1 2-1 3.3 0 1.5.4 2.6 1 3.4.6.8 1.5 1.2 2.6 1.2zm18.9 3.6c-1.7 0-3.2-.3-4.4-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.4-1 1.6 0 3 .3 4.3 1a7 7 0 0 1 3 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.3 1zm0-3.6c2.3 0 3.5-1.6 3.5-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.5-1c-2.4 0-3.6 1.4-3.6 4.4 0 3 1.2 4.6 3.6 4.6zm18 3.6c-1.7 0-3.2-.3-4.4-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.4-1 1.6 0 3 .3 4.4 1a7 7 0 0 1 2.9 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.3 1zm0-3.6c2.3 0 3.5-1.6 3.5-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.5-1c-2.4 0-3.6 1.4-3.6 4.4 0 3 1.2 4.6 3.6 4.6zm27.4 3.4h-6l-6-7v7h-4.8V8.8h4.9v13.6l5.8-6.7h5.7l-6.6 7.5 7 8.2z"
-            fill="currentColor"
+            fill="#333"
           />
           <mask
             fill="#fff"
@@ -8044,7 +8568,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem component 1`] = `
   transition: background 75ms ease-out;
   padding-left: 9px;
   cursor: pointer;
-  color: #333333;
+  color: rgba(51,51,51,0.8);
 }
 
 .emotion-3:hover {
@@ -8106,7 +8630,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem component 1`] = `
   transition: background 75ms ease-out;
   padding-left: 9px;
   cursor: pointer;
-  color: #333333;
+  color: rgba(51,51,51,0.8);
 }
 
 .emotion-3:hover {
@@ -8194,7 +8718,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem componentExpanded 1`] = `
   transition: background 75ms ease-out;
   padding-left: 9px;
   cursor: pointer;
-  color: #333333;
+  color: rgba(51,51,51,0.8);
 }
 
 .emotion-3:hover {
@@ -8259,7 +8783,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem componentExpanded 1`] = `
   transition: background 75ms ease-out;
   padding-left: 9px;
   cursor: pointer;
-  color: #333333;
+  color: rgba(51,51,51,0.8);
 }
 
 .emotion-3:hover {
@@ -8350,7 +8874,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem group 1`] = `
   transition: background 75ms ease-out;
   padding-left: 9px;
   cursor: pointer;
-  color: #333333;
+  color: rgba(51,51,51,0.8);
 }
 
 .emotion-3:hover {
@@ -8412,7 +8936,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem group 1`] = `
   transition: background 75ms ease-out;
   padding-left: 9px;
   cursor: pointer;
-  color: #333333;
+  color: rgba(51,51,51,0.8);
 }
 
 .emotion-3:hover {
@@ -8740,7 +9264,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem nestedDepths 1`] = `
   transition: background 75ms ease-out;
   padding-left: 9px;
   cursor: pointer;
-  color: #333333;
+  color: rgba(51,51,51,0.8);
 }
 
 .emotion-3:hover {
@@ -8815,7 +9339,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem nestedDepths 1`] = `
   transition: background 75ms ease-out;
   padding-left: 24px;
   cursor: pointer;
-  color: #333333;
+  color: rgba(51,51,51,0.8);
 }
 
 .emotion-11:hover {
@@ -8888,7 +9412,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem nestedDepths 1`] = `
   transition: background 75ms ease-out;
   padding-left: 39px;
   cursor: pointer;
-  color: #333333;
+  color: rgba(51,51,51,0.8);
 }
 
 .emotion-15:hover {
@@ -8918,7 +9442,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem nestedDepths 1`] = `
   transition: background 75ms ease-out;
   padding-left: 54px;
   cursor: pointer;
-  color: #333333;
+  color: rgba(51,51,51,0.8);
 }
 
 .emotion-19:hover {
@@ -8952,7 +9476,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem nestedDepths 1`] = `
   transition: background 75ms ease-out;
   padding-left: 9px;
   cursor: pointer;
-  color: #333333;
+  color: rgba(51,51,51,0.8);
 }
 
 .emotion-3:hover {
@@ -9027,7 +9551,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem nestedDepths 1`] = `
   transition: background 75ms ease-out;
   padding-left: 24px;
   cursor: pointer;
-  color: #333333;
+  color: rgba(51,51,51,0.8);
 }
 
 .emotion-11:hover {
@@ -9100,7 +9624,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem nestedDepths 1`] = `
   transition: background 75ms ease-out;
   padding-left: 39px;
   cursor: pointer;
-  color: #333333;
+  color: rgba(51,51,51,0.8);
 }
 
 .emotion-15:hover {
@@ -9130,7 +9654,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem nestedDepths 1`] = `
   transition: background 75ms ease-out;
   padding-left: 54px;
   cursor: pointer;
-  color: #333333;
+  color: rgba(51,51,51,0.8);
 }
 
 .emotion-19:hover {
@@ -9268,7 +9792,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem story 1`] = `
   transition: background 75ms ease-out;
   padding-left: 9px;
   cursor: pointer;
-  color: #333333;
+  color: rgba(51,51,51,0.8);
 }
 
 .emotion-3:hover {
@@ -9331,7 +9855,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem story 1`] = `
   transition: background 75ms ease-out;
   padding-left: 9px;
   cursor: pointer;
-  color: #333333;
+  color: rgba(51,51,51,0.8);
 }
 
 .emotion-3:hover {
@@ -9568,7 +10092,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem with long name 1`] = `
   transition: background 75ms ease-out;
   padding-left: 9px;
   cursor: pointer;
-  color: #333333;
+  color: rgba(51,51,51,0.8);
 }
 
 .emotion-3:hover {
@@ -9630,7 +10154,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem with long name 1`] = `
   transition: background 75ms ease-out;
   padding-left: 9px;
   cursor: pointer;
-  color: #333333;
+  color: rgba(51,51,51,0.8);
 }
 
 .emotion-3:hover {
@@ -10560,7 +11084,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories empty 1`] = `
 .emotion-4 {
   padding: 30px;
   text-align: center;
-  color: #333333;
+  color: #666666;
   font-size: 13px;
 }
 
@@ -10627,7 +11151,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories empty 1`] = `
 .emotion-4 {
   padding: 30px;
   text-align: center;
-  color: #333333;
+  color: #666666;
   font-size: 13px;
 }
 
@@ -11666,7 +12190,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
   transition: background 75ms ease-out;
   padding-left: 9px;
   cursor: pointer;
-  color: #333333;
+  color: rgba(51,51,51,0.8);
 }
 
 .emotion-10:hover {
@@ -11757,7 +12281,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
   transition: background 75ms ease-out;
   padding-left: 24px;
   cursor: pointer;
-  color: #333333;
+  color: rgba(51,51,51,0.8);
 }
 
 .emotion-15:hover {
@@ -11830,7 +12354,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
   transition: background 75ms ease-out;
   padding-left: 39px;
   cursor: pointer;
-  color: #333333;
+  color: rgba(51,51,51,0.8);
 }
 
 .emotion-30:hover {
@@ -12038,7 +12562,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
   transition: background 75ms ease-out;
   padding-left: 9px;
   cursor: pointer;
-  color: #333333;
+  color: rgba(51,51,51,0.8);
 }
 
 .emotion-10:hover {
@@ -12129,7 +12653,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
   transition: background 75ms ease-out;
   padding-left: 24px;
   cursor: pointer;
-  color: #333333;
+  color: rgba(51,51,51,0.8);
 }
 
 .emotion-15:hover {
@@ -12202,7 +12726,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
   transition: background 75ms ease-out;
   padding-left: 39px;
   cursor: pointer;
-  color: #333333;
+  color: rgba(51,51,51,0.8);
 }
 
 .emotion-30:hover {
@@ -12640,7 +13164,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
   transition: background 75ms ease-out;
   padding-left: 9px;
   cursor: pointer;
-  color: #333333;
+  color: rgba(51,51,51,0.8);
 }
 
 .emotion-11:hover {
@@ -12758,7 +13282,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
   transition: background 75ms ease-out;
   padding-left: 24px;
   cursor: pointer;
-  color: #333333;
+  color: rgba(51,51,51,0.8);
 }
 
 .emotion-21:hover {
@@ -12995,7 +13519,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
   transition: background 75ms ease-out;
   padding-left: 9px;
   cursor: pointer;
-  color: #333333;
+  color: rgba(51,51,51,0.8);
 }
 
 .emotion-11:hover {
@@ -13113,7 +13637,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
   transition: background 75ms ease-out;
   padding-left: 24px;
   cursor: pointer;
-  color: #333333;
+  color: rgba(51,51,51,0.8);
 }
 
 .emotion-21:hover {
diff --git a/lib/components/src/Button/__snapshots__/Button.stories.storyshot b/lib/components/src/Button/__snapshots__/Button.stories.storyshot
index 7c7590fff4b..e1e47a2c11d 100644
--- a/lib/components/src/Button/__snapshots__/Button.stories.storyshot
+++ b/lib/components/src/Button/__snapshots__/Button.stories.storyshot
@@ -13,80 +13,6 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
   fill: currentColor;
 }
 
-.emotion-3 {
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  overflow: hidden;
-  padding: 10px 16px;
-  position: relative;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-  vertical-align: top;
-  white-space: nowrap;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  opacity: 1;
-  margin: 0;
-  background: transparent;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1;
-  background: #fafafa;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
-  display: inline;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  overflow: visible;
-  z-index: 2;
-}
-
-.emotion-3 svg {
-  display: inline-block;
-  height: 14px;
-  width: 14px;
-  vertical-align: top;
-  margin-right: 4px;
-  margin-top: -1px;
-  margin-bottom: -1px;
-  pointer-events: none;
-}
-
-.emotion-3 svg path {
-  fill: currentColor;
-}
-
-.emotion-3:hover {
-  background: #f2f2f2;
-}
-
-.emotion-3:active {
-  background: #FFFFFF;
-}
-
-.emotion-3:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-3:hover {
-  -webkit-transform: none;
-  -ms-transform: none;
-  transform: none;
-}
-
 .emotion-0 {
   border: 0;
   border-radius: 3em;
@@ -241,7 +167,7 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
   font-size: 13px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  background: #fff;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
   border-radius: 4px;
@@ -263,7 +189,7 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
 }
 
 .emotion-2:hover {
-  background: #f2f2f2;
+  background: #fff;
   box-shadow: rgba(0,0,0,.2) 0 2px 6px 0,rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
@@ -275,6 +201,80 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
   box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
+.emotion-3 {
+  border: 0;
+  border-radius: 3em;
+  cursor: pointer;
+  display: inline-block;
+  overflow: hidden;
+  padding: 10px 16px;
+  position: relative;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  vertical-align: top;
+  white-space: nowrap;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  opacity: 1;
+  margin: 0;
+  background: transparent;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+  background: #fff;
+  color: #333333;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  border-radius: 4px;
+  display: inline;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  overflow: visible;
+  z-index: 2;
+}
+
+.emotion-3 svg {
+  display: inline-block;
+  height: 14px;
+  width: 14px;
+  vertical-align: top;
+  margin-right: 4px;
+  margin-top: -1px;
+  margin-bottom: -1px;
+  pointer-events: none;
+}
+
+.emotion-3 svg path {
+  fill: currentColor;
+}
+
+.emotion-3:hover {
+  background: #fff;
+}
+
+.emotion-3:active {
+  background: #FFFFFF;
+}
+
+.emotion-3:focus {
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+}
+
+.emotion-3:hover {
+  -webkit-transform: none;
+  -ms-transform: none;
+  transform: none;
+}
+
 .emotion-4 {
   border: 0;
   border-radius: 3em;
@@ -753,7 +753,7 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  background: #fff;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
   border-radius: 4px;
@@ -775,7 +775,7 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
 }
 
 .emotion-10:hover {
-  background: #f2f2f2;
+  background: #fff;
   box-shadow: rgba(0,0,0,.2) 0 2px 6px 0,rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
diff --git a/lib/components/src/form/__snapshots__/form.stories.storyshot b/lib/components/src/form/__snapshots__/form.stories.storyshot
index 52e22b8d4c8..620c1052048 100644
--- a/lib/components/src/form/__snapshots__/form.stories.storyshot
+++ b/lib/components/src/form/__snapshots__/form.stories.storyshot
@@ -37,7 +37,7 @@ exports[`Storyshots Basics|Form/Button sizes 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  background: #fff;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
   border-radius: 4px;
@@ -66,7 +66,7 @@ exports[`Storyshots Basics|Form/Button sizes 1`] = `
 }
 
 .emotion-0:hover {
-  background: #f2f2f2;
+  background: #fff;
 }
 
 .emotion-0:active {
@@ -118,7 +118,7 @@ exports[`Storyshots Basics|Form/Button sizes 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  background: #fff;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
   border-radius: 4px;
@@ -149,7 +149,7 @@ exports[`Storyshots Basics|Form/Button sizes 1`] = `
 }
 
 .emotion-2:hover {
-  background: #f2f2f2;
+  background: #fff;
 }
 
 .emotion-2:active {
@@ -194,7 +194,7 @@ exports[`Storyshots Basics|Form/Button sizes 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  background: #fff;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
   border-radius: 4px;
@@ -223,7 +223,7 @@ exports[`Storyshots Basics|Form/Button sizes 1`] = `
 }
 
 .emotion-4:hover {
-  background: #f2f2f2;
+  background: #fff;
 }
 
 .emotion-4:active {
@@ -317,7 +317,7 @@ exports[`Storyshots Basics|Form/Button validations 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  background: #fff;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
   border-radius: 4px;
@@ -346,7 +346,7 @@ exports[`Storyshots Basics|Form/Button validations 1`] = `
 }
 
 .emotion-6:hover {
-  background: #f2f2f2;
+  background: #fff;
 }
 
 .emotion-6:active {
@@ -391,7 +391,7 @@ exports[`Storyshots Basics|Form/Button validations 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  background: #fff;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
   border-radius: 4px;
@@ -421,7 +421,7 @@ exports[`Storyshots Basics|Form/Button validations 1`] = `
 }
 
 .emotion-0:hover {
-  background: #f2f2f2;
+  background: #fff;
 }
 
 .emotion-0:active {
@@ -466,7 +466,7 @@ exports[`Storyshots Basics|Form/Button validations 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  background: #fff;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
   border-radius: 4px;
@@ -496,7 +496,7 @@ exports[`Storyshots Basics|Form/Button validations 1`] = `
 }
 
 .emotion-2:hover {
-  background: #f2f2f2;
+  background: #fff;
 }
 
 .emotion-2:active {
@@ -541,7 +541,7 @@ exports[`Storyshots Basics|Form/Button validations 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  background: #fafafa;
+  background: #fff;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
   border-radius: 4px;
@@ -571,7 +571,7 @@ exports[`Storyshots Basics|Form/Button validations 1`] = `
 }
 
 .emotion-4:hover {
-  background: #f2f2f2;
+  background: #fff;
 }
 
 .emotion-4:active {
diff --git a/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot b/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot
index 83209e363fb..3e85209335f 100644
--- a/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot
+++ b/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot
@@ -405,7 +405,6 @@ exports[`Storyshots Basics|SyntaxHighlighter bordered & copy-able 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  background: #FFFFFF;
 }
 
 .emotion-3 {
@@ -421,7 +420,6 @@ exports[`Storyshots Basics|SyntaxHighlighter bordered & copy-able 1`] = `
   -ms-flex-align: center;
   align-items: center;
   color: #333333;
-  background: #FFFFFF;
   font-size: 12px;
   line-height: 16px;
   font-weight: 700;
diff --git a/lib/components/src/tabs/__snapshots__/tabs.stories.storyshot b/lib/components/src/tabs/__snapshots__/tabs.stories.storyshot
index d485e04bc89..cc872571d38 100644
--- a/lib/components/src/tabs/__snapshots__/tabs.stories.storyshot
+++ b/lib/components/src/tabs/__snapshots__/tabs.stories.storyshot
@@ -1,25 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Basics|Tabs stateful - dynamic 1`] = `
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  background: #FFFFFF;
-  color: #999999;
-  height: 40px;
-  position: relative;
-  overflow: visible;
-  overflow-x: visible;
-  overflow-y: visible;
-  background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
-}
-
 .emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -46,51 +27,6 @@ exports[`Storyshots Basics|Tabs stateful - dynamic 1`] = `
   margin-left: 0;
 }
 
-.emotion-0 {
-  white-space: normal;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  overflow: hidden;
-  vertical-align: top;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  height: 40px;
-  line-height: 12px;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: inherit;
-  border-bottom-color: transparent;
-}
-
-.emotion-0:empty {
-  display: none;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
 .emotion-2 {
   white-space: normal;
   display: -webkit-inline-box;
@@ -140,6 +76,69 @@ exports[`Storyshots Basics|Tabs stateful - dynamic 1`] = `
   display: block;
 }
 
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  color: #999999;
+  height: 40px;
+  position: relative;
+  overflow: visible;
+  overflow-x: visible;
+  overflow-y: visible;
+  background: undefined linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
+}
+
+.emotion-0 {
+  white-space: normal;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  overflow: hidden;
+  vertical-align: top;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding: 0 15px;
+  text-transform: capitalize;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  height: 40px;
+  line-height: 12px;
+  cursor: pointer;
+  background: transparent;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  font-weight: bold;
+  font-size: 13px;
+  color: inherit;
+  border-bottom-color: transparent;
+}
+
+.emotion-0:empty {
+  display: none;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #1EA7FD;
+}
+
 .emotion-10 {
   display: block;
   position: relative;
@@ -282,25 +281,6 @@ exports[`Storyshots Basics|Tabs stateful - dynamic 1`] = `
 `;
 
 exports[`Storyshots Basics|Tabs stateful - no initial 1`] = `
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  background: #FFFFFF;
-  color: #999999;
-  height: 40px;
-  position: relative;
-  overflow: visible;
-  overflow-x: visible;
-  overflow-y: visible;
-  background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
-}
-
 .emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -327,51 +307,6 @@ exports[`Storyshots Basics|Tabs stateful - no initial 1`] = `
   margin-left: 0;
 }
 
-.emotion-1 {
-  white-space: normal;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  overflow: hidden;
-  vertical-align: top;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  height: 40px;
-  line-height: 12px;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: inherit;
-  border-bottom-color: transparent;
-}
-
-.emotion-1:empty {
-  display: none;
-}
-
-.emotion-1:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
 .emotion-0 {
   white-space: normal;
   display: -webkit-inline-box;
@@ -421,6 +356,69 @@ exports[`Storyshots Basics|Tabs stateful - no initial 1`] = `
   display: block;
 }
 
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  color: #999999;
+  height: 40px;
+  position: relative;
+  overflow: visible;
+  overflow-x: visible;
+  overflow-y: visible;
+  background: undefined linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
+}
+
+.emotion-1 {
+  white-space: normal;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  overflow: hidden;
+  vertical-align: top;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding: 0 15px;
+  text-transform: capitalize;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  height: 40px;
+  line-height: 12px;
+  cursor: pointer;
+  background: transparent;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  font-weight: bold;
+  font-size: 13px;
+  color: inherit;
+  border-bottom-color: transparent;
+}
+
+.emotion-1:empty {
+  display: none;
+}
+
+.emotion-1:focus {
+  outline: 0 none;
+  border-bottom-color: #1EA7FD;
+}
+
 .emotion-10 {
   display: block;
   position: relative;
@@ -519,25 +517,6 @@ exports[`Storyshots Basics|Tabs stateful - no initial 1`] = `
 `;
 
 exports[`Storyshots Basics|Tabs stateful - static 1`] = `
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  background: #FFFFFF;
-  color: #999999;
-  height: 40px;
-  position: relative;
-  overflow: visible;
-  overflow-x: visible;
-  overflow-y: visible;
-  background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
-}
-
 .emotion-3 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -564,51 +543,6 @@ exports[`Storyshots Basics|Tabs stateful - static 1`] = `
   margin-left: 0;
 }
 
-.emotion-0 {
-  white-space: normal;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  overflow: hidden;
-  vertical-align: top;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  height: 40px;
-  line-height: 12px;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: inherit;
-  border-bottom-color: transparent;
-}
-
-.emotion-0:empty {
-  display: none;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
 .emotion-1 {
   white-space: normal;
   display: -webkit-inline-box;
@@ -658,6 +592,69 @@ exports[`Storyshots Basics|Tabs stateful - static 1`] = `
   display: block;
 }
 
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  color: #999999;
+  height: 40px;
+  position: relative;
+  overflow: visible;
+  overflow-x: visible;
+  overflow-y: visible;
+  background: undefined linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
+}
+
+.emotion-0 {
+  white-space: normal;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  overflow: hidden;
+  vertical-align: top;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding: 0 15px;
+  text-transform: capitalize;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  height: 40px;
+  line-height: 12px;
+  cursor: pointer;
+  background: transparent;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  font-weight: bold;
+  font-size: 13px;
+  color: inherit;
+  border-bottom-color: transparent;
+}
+
+.emotion-0:empty {
+  display: none;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #1EA7FD;
+}
+
 .emotion-6 {
   display: block;
   position: relative;
@@ -714,25 +711,6 @@ exports[`Storyshots Basics|Tabs stateful - static 1`] = `
 `;
 
 exports[`Storyshots Basics|Tabs stateless - absolute 1`] = `
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  background: #FFFFFF;
-  color: #999999;
-  height: 40px;
-  position: relative;
-  overflow: visible;
-  overflow-x: visible;
-  overflow-y: visible;
-  background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
-}
-
 .emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -759,51 +737,6 @@ exports[`Storyshots Basics|Tabs stateless - absolute 1`] = `
   margin-left: 0;
 }
 
-.emotion-0 {
-  white-space: normal;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  overflow: hidden;
-  vertical-align: top;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  height: 40px;
-  line-height: 12px;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: inherit;
-  border-bottom-color: transparent;
-}
-
-.emotion-0:empty {
-  display: none;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
 .emotion-2 {
   white-space: normal;
   display: -webkit-inline-box;
@@ -861,6 +794,69 @@ exports[`Storyshots Basics|Tabs stateless - absolute 1`] = `
   width: 100%;
 }
 
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  color: #999999;
+  height: 40px;
+  position: relative;
+  overflow: visible;
+  overflow-x: visible;
+  overflow-y: visible;
+  background: undefined linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
+}
+
+.emotion-0 {
+  white-space: normal;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  overflow: hidden;
+  vertical-align: top;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding: 0 15px;
+  text-transform: capitalize;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  height: 40px;
+  line-height: 12px;
+  cursor: pointer;
+  background: transparent;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  font-weight: bold;
+  font-size: 13px;
+  color: inherit;
+  border-bottom-color: transparent;
+}
+
+.emotion-0:empty {
+  display: none;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #1EA7FD;
+}
+
 .emotion-9 {
   display: none;
 }
@@ -1012,25 +1008,6 @@ exports[`Storyshots Basics|Tabs stateless - absolute 1`] = `
 `;
 
 exports[`Storyshots Basics|Tabs stateless - bordered 1`] = `
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  background: #FFFFFF;
-  color: #999999;
-  height: 40px;
-  position: relative;
-  overflow: visible;
-  overflow-x: visible;
-  overflow-y: visible;
-  background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
-}
-
 .emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1057,51 +1034,6 @@ exports[`Storyshots Basics|Tabs stateless - bordered 1`] = `
   margin-left: 0;
 }
 
-.emotion-0 {
-  white-space: normal;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  overflow: hidden;
-  vertical-align: top;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  height: 40px;
-  line-height: 12px;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: inherit;
-  border-bottom-color: transparent;
-}
-
-.emotion-0:empty {
-  display: none;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
 .emotion-2 {
   white-space: normal;
   display: -webkit-inline-box;
@@ -1147,6 +1079,69 @@ exports[`Storyshots Basics|Tabs stateless - bordered 1`] = `
   border-bottom-color: #1EA7FD;
 }
 
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  color: #999999;
+  height: 40px;
+  position: relative;
+  overflow: visible;
+  overflow-x: visible;
+  overflow-y: visible;
+  background: undefined linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
+}
+
+.emotion-0 {
+  white-space: normal;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  overflow: hidden;
+  vertical-align: top;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding: 0 15px;
+  text-transform: capitalize;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  height: 40px;
+  line-height: 12px;
+  cursor: pointer;
+  background: transparent;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  font-weight: bold;
+  font-size: 13px;
+  color: inherit;
+  border-bottom-color: transparent;
+}
+
+.emotion-0:empty {
+  display: none;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #1EA7FD;
+}
+
 .emotion-10 {
   display: block;
   position: relative;
@@ -1295,6 +1290,10 @@ exports[`Storyshots Basics|Tabs stateless - bordered 1`] = `
 `;
 
 exports[`Storyshots Basics|Tabs stateless - empty 1`] = `
+.emotion-0 {
+  font-weight: 700;
+}
+
 .emotion-1 {
   padding: 30px;
   text-align: center;
@@ -1302,10 +1301,6 @@ exports[`Storyshots Basics|Tabs stateless - empty 1`] = `
   font-size: 13px;
 }
 
-.emotion-0 {
-  font-weight: 700;
-}
-
 <div
   style="height:calc(100vh - 20px)"
 >
@@ -1348,51 +1343,6 @@ exports[`Storyshots Basics|Tabs stateless - no scrolling 1`] = `
   margin-left: 0;
 }
 
-.emotion-0 {
-  white-space: normal;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  overflow: hidden;
-  vertical-align: top;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  height: 40px;
-  line-height: 12px;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: inherit;
-  border-bottom-color: transparent;
-}
-
-.emotion-0:empty {
-  display: none;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
 .emotion-2 {
   white-space: normal;
   display: -webkit-inline-box;
@@ -1438,6 +1388,51 @@ exports[`Storyshots Basics|Tabs stateless - no scrolling 1`] = `
   border-bottom-color: #1EA7FD;
 }
 
+.emotion-0 {
+  white-space: normal;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  overflow: hidden;
+  vertical-align: top;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding: 0 15px;
+  text-transform: capitalize;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  height: 40px;
+  line-height: 12px;
+  cursor: pointer;
+  background: transparent;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  font-weight: bold;
+  font-size: 13px;
+  color: inherit;
+  border-bottom-color: transparent;
+}
+
+.emotion-0:empty {
+  display: none;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #1EA7FD;
+}
+
 .emotion-10 {
   display: block;
   position: relative;
@@ -1463,14 +1458,13 @@ exports[`Storyshots Basics|Tabs stateless - no scrolling 1`] = `
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
-  background: #FFFFFF;
   color: #999999;
   height: 40px;
   position: relative;
   overflow: auto;
   overflow-x: auto;
   overflow-y: hidden;
-  background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
+  background: undefined linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
 }
 
 <div
@@ -1605,25 +1599,6 @@ exports[`Storyshots Basics|Tabs stateless - no scrolling 1`] = `
 `;
 
 exports[`Storyshots Basics|Tabs stateless - with tools 1`] = `
-.emotion-9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  background: #FFFFFF;
-  color: #999999;
-  height: 40px;
-  position: relative;
-  overflow: visible;
-  overflow-x: visible;
-  overflow-y: visible;
-  background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
-}
-
 .emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1650,51 +1625,6 @@ exports[`Storyshots Basics|Tabs stateless - with tools 1`] = `
   margin-left: 0;
 }
 
-.emotion-0 {
-  white-space: normal;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  overflow: hidden;
-  vertical-align: top;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  height: 40px;
-  line-height: 12px;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: inherit;
-  border-bottom-color: transparent;
-}
-
-.emotion-0:empty {
-  display: none;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
 .emotion-2 {
   white-space: normal;
   display: -webkit-inline-box;
@@ -1755,6 +1685,69 @@ exports[`Storyshots Basics|Tabs stateless - with tools 1`] = `
   display: block;
 }
 
+.emotion-9 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  color: #999999;
+  height: 40px;
+  position: relative;
+  overflow: visible;
+  overflow-x: visible;
+  overflow-y: visible;
+  background: undefined linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
+}
+
+.emotion-0 {
+  white-space: normal;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  overflow: hidden;
+  vertical-align: top;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding: 0 15px;
+  text-transform: capitalize;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  height: 40px;
+  line-height: 12px;
+  cursor: pointer;
+  background: transparent;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  font-weight: bold;
+  font-size: 13px;
+  color: inherit;
+  border-bottom-color: transparent;
+}
+
+.emotion-0:empty {
+  display: none;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #1EA7FD;
+}
+
 .emotion-11 {
   display: block;
   position: relative;
diff --git a/lib/components/src/tooltip/__snapshots__/ListItem.stories.storyshot b/lib/components/src/tooltip/__snapshots__/ListItem.stories.storyshot
index d8481a0e4e6..832986157ec 100644
--- a/lib/components/src/tooltip/__snapshots__/ListItem.stories.storyshot
+++ b/lib/components/src/tooltip/__snapshots__/ListItem.stories.storyshot
@@ -13,6 +13,21 @@ exports[`Storyshots basics|Tooltip/ListItem active icon 1`] = `
   fill: currentColor;
 }
 
+.emotion-1 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  text-align: left;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-1 > * + * {
+  padding-left: 10px;
+}
+
 .emotion-5 {
   font-size: 12px;
   -webkit-transition: all 150ms ease-out;
@@ -49,21 +64,6 @@ exports[`Storyshots basics|Tooltip/ListItem active icon 1`] = `
   opacity: 1;
 }
 
-.emotion-1 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  text-align: left;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-1 > * + * {
-  padding-left: 10px;
-}
-
 .emotion-0 {
   color: #333333;
   color: #FF4785;
@@ -183,6 +183,21 @@ exports[`Storyshots basics|Tooltip/ListItem all 1`] = `
   fill: currentColor;
 }
 
+.emotion-1 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  text-align: left;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-1 > * + * {
+  padding-left: 10px;
+}
+
 .emotion-2 {
   font-size: 12px;
   -webkit-transition: all 150ms ease-out;
@@ -219,25 +234,6 @@ exports[`Storyshots basics|Tooltip/ListItem all 1`] = `
   opacity: 1;
 }
 
-.emotion-1 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  text-align: left;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-1 > * + * {
-  padding-left: 10px;
-}
-
-.emotion-3 {
-  color: #333333;
-}
-
 .emotion-0 {
   color: #333333;
   -webkit-animation: animation-0 1.5s ease-in-out infinite;
@@ -247,6 +243,10 @@ exports[`Storyshots basics|Tooltip/ListItem all 1`] = `
   cursor: progress;
 }
 
+.emotion-3 {
+  color: #333333;
+}
+
 .emotion-10 svg {
   -webkit-transition: all 200ms ease-out;
   transition: all 200ms ease-out;
@@ -546,6 +546,21 @@ exports[`Storyshots basics|Tooltip/ListItem all 1`] = `
 `;
 
 exports[`Storyshots basics|Tooltip/ListItem default 1`] = `
+.emotion-1 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  text-align: left;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-1 > * + * {
+  padding-left: 10px;
+}
+
 .emotion-2 {
   font-size: 12px;
   -webkit-transition: all 150ms ease-out;
@@ -582,21 +597,6 @@ exports[`Storyshots basics|Tooltip/ListItem default 1`] = `
   opacity: 1;
 }
 
-.emotion-1 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  text-align: left;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-1 > * + * {
-  padding-left: 10px;
-}
-
 .emotion-0 {
   color: #333333;
 }
@@ -629,6 +629,21 @@ exports[`Storyshots basics|Tooltip/ListItem default icon 1`] = `
   fill: currentColor;
 }
 
+.emotion-1 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  text-align: left;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-1 > * + * {
+  padding-left: 10px;
+}
+
 .emotion-5 {
   font-size: 12px;
   -webkit-transition: all 150ms ease-out;
@@ -665,21 +680,6 @@ exports[`Storyshots basics|Tooltip/ListItem default icon 1`] = `
   opacity: 1;
 }
 
-.emotion-1 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  text-align: left;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-1 > * + * {
-  padding-left: 10px;
-}
-
 .emotion-0 {
   color: #333333;
 }
@@ -892,6 +892,21 @@ exports[`Storyshots basics|Tooltip/ListItem loading 1`] = `
   }
 }
 
+.emotion-1 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  text-align: left;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-1 > * + * {
+  padding-left: 10px;
+}
+
 .emotion-2 {
   font-size: 12px;
   -webkit-transition: all 150ms ease-out;
@@ -928,21 +943,6 @@ exports[`Storyshots basics|Tooltip/ListItem loading 1`] = `
   opacity: 1;
 }
 
-.emotion-1 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  text-align: left;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-1 > * + * {
-  padding-left: 10px;
-}
-
 .emotion-0 {
   color: #333333;
   -webkit-animation: animation-0 1.5s ease-in-out infinite;
@@ -970,6 +970,21 @@ exports[`Storyshots basics|Tooltip/ListItem loading 1`] = `
 `;
 
 exports[`Storyshots basics|Tooltip/ListItem w/positions 1`] = `
+.emotion-3 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  text-align: left;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-3 > * + * {
+  padding-left: 10px;
+}
+
 .emotion-5 {
   font-size: 12px;
   -webkit-transition: all 150ms ease-out;
@@ -1006,21 +1021,6 @@ exports[`Storyshots basics|Tooltip/ListItem w/positions 1`] = `
   opacity: 1;
 }
 
-.emotion-3 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  text-align: left;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-3 > * + * {
-  padding-left: 10px;
-}
-
 .emotion-1 {
   color: #333333;
 }
@@ -1077,6 +1077,21 @@ exports[`Storyshots basics|Tooltip/ListItem w/positions 1`] = `
 `;
 
 exports[`Storyshots basics|Tooltip/ListItem w/positions active 1`] = `
+.emotion-3 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  text-align: left;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-3 > * + * {
+  padding-left: 10px;
+}
+
 .emotion-5 {
   font-size: 12px;
   -webkit-transition: all 150ms ease-out;
@@ -1113,21 +1128,6 @@ exports[`Storyshots basics|Tooltip/ListItem w/positions active 1`] = `
   opacity: 1;
 }
 
-.emotion-3 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  text-align: left;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-3 > * + * {
-  padding-left: 10px;
-}
-
 .emotion-0 svg {
   opacity: 1;
 }
diff --git a/lib/components/src/tooltip/__snapshots__/Tooltip.stories.storyshot b/lib/components/src/tooltip/__snapshots__/Tooltip.stories.storyshot
index baeb3ec4662..19dc793d25f 100644
--- a/lib/components/src/tooltip/__snapshots__/Tooltip.stories.storyshot
+++ b/lib/components/src/tooltip/__snapshots__/Tooltip.stories.storyshot
@@ -77,7 +77,7 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default, bottom 1`] = `
   margin-top: 10px;
   margin-left: 0px;
   margin-right: 0px;
-  background: rgba(255,255,255,0.95);
+  background: rgba(0,0,0,0.95);
   -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
   filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
   border-radius: 8px;
@@ -100,7 +100,7 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default, bottom 1`] = `
   border-right-width: 8px;
   border-left-width: 8px;
   border-top-color: transparent;
-  border-bottom-color: rgba(255,255,255,0.95);
+  border-bottom-color: rgba(0,0,0,0.95);
   border-left-color: transparent;
   border-right-color: transparent;
 }
@@ -136,7 +136,7 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default, left 1`] = `
   margin-top: 0px;
   margin-left: 0px;
   margin-right: 10px;
-  background: rgba(255,255,255,0.95);
+  background: rgba(0,0,0,0.95);
   -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
   filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
   border-radius: 8px;
@@ -160,7 +160,7 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default, left 1`] = `
   border-left-width: 8px;
   border-top-color: transparent;
   border-bottom-color: transparent;
-  border-left-color: rgba(255,255,255,0.95);
+  border-left-color: rgba(0,0,0,0.95);
   border-right-color: transparent;
 }
 
@@ -195,7 +195,7 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default, right 1`] = `
   margin-top: 0px;
   margin-left: 10px;
   margin-right: 0px;
-  background: rgba(255,255,255,0.95);
+  background: rgba(0,0,0,0.95);
   -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
   filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
   border-radius: 8px;
@@ -220,7 +220,7 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default, right 1`] = `
   border-top-color: transparent;
   border-bottom-color: transparent;
   border-left-color: transparent;
-  border-right-color: rgba(255,255,255,0.95);
+  border-right-color: rgba(0,0,0,0.95);
 }
 
 <div
diff --git a/lib/components/src/tooltip/__snapshots__/TooltipLinkList.stories.storyshot b/lib/components/src/tooltip/__snapshots__/TooltipLinkList.stories.storyshot
index 145e257ce3f..4ce6af174ec 100644
--- a/lib/components/src/tooltip/__snapshots__/TooltipLinkList.stories.storyshot
+++ b/lib/components/src/tooltip/__snapshots__/TooltipLinkList.stories.storyshot
@@ -1,15 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots basics/Tooltip/TooltipLinkList links 1`] = `
-.emotion-8 {
-  min-width: 180px;
+.emotion-3 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  text-align: left;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-3 > * + * {
+  padding-left: 10px;
+}
+
+.emotion-0 {
+  display: inline-block;
+  cursor: pointer;
 }
 
 .emotion-4 {
   font-size: 12px;
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
-  color: #999999;
+  color: rgba(51,51,51,0.5);
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -29,10 +45,6 @@ exports[`Storyshots basics/Tooltip/TooltipLinkList links 1`] = `
   align-items: center;
 }
 
-.emotion-4 + .emotion-4 {
-  border-top: 1px solid #EEEEEE;
-}
-
 .emotion-4 > * + * {
   padding-left: 10px;
 }
@@ -45,28 +57,8 @@ exports[`Storyshots basics/Tooltip/TooltipLinkList links 1`] = `
   opacity: 1;
 }
 
-.emotion-3 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  text-align: left;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-3 > * + * {
-  padding-left: 10px;
-}
-
 .emotion-2 {
-  color: #444444;
-}
-
-.emotion-0 {
-  display: inline-block;
-  cursor: pointer;
+  color: #333333;
 }
 
 .emotion-9 {
@@ -76,9 +68,10 @@ exports[`Storyshots basics/Tooltip/TooltipLinkList links 1`] = `
   margin-top: 0px;
   margin-left: 0px;
   margin-right: 0px;
-  background: linear-gradient( -1deg, rgba(248,248,248,0.97) 0%, rgba(255,255,255,0.97) 100% );
+  background: rgba(0,0,0,0.95);
   -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
   filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
+  border-radius: 8px;
   font-size: 12px;
 }
 
@@ -97,12 +90,18 @@ exports[`Storyshots basics/Tooltip/TooltipLinkList links 1`] = `
   border-top-width: 8px;
   border-right-width: 8px;
   border-left-width: 8px;
-  border-top-color: #FFFFFF;
+  border-top-color: rgba(0,0,0,0.95);
   border-bottom-color: transparent;
   border-left-color: transparent;
   border-right-color: transparent;
 }
 
+.emotion-8 {
+  min-width: 180px;
+  overflow: hidden;
+  border-radius: 8px;
+}
+
 <div
   style="height:300px"
 >
@@ -157,15 +156,31 @@ exports[`Storyshots basics/Tooltip/TooltipLinkList links 1`] = `
 `;
 
 exports[`Storyshots basics/Tooltip/TooltipLinkList links and callback 1`] = `
-.emotion-11 {
-  min-width: 180px;
+.emotion-3 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  text-align: left;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-3 > * + * {
+  padding-left: 10px;
+}
+
+.emotion-0 {
+  display: inline-block;
+  cursor: pointer;
 }
 
 .emotion-4 {
   font-size: 12px;
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
-  color: #999999;
+  color: rgba(51,51,51,0.5);
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -185,10 +200,6 @@ exports[`Storyshots basics/Tooltip/TooltipLinkList links and callback 1`] = `
   align-items: center;
 }
 
-.emotion-4 + .emotion-4 {
-  border-top: 1px solid #EEEEEE;
-}
-
 .emotion-4 > * + * {
   padding-left: 10px;
 }
@@ -201,28 +212,8 @@ exports[`Storyshots basics/Tooltip/TooltipLinkList links and callback 1`] = `
   opacity: 1;
 }
 
-.emotion-3 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  text-align: left;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-3 > * + * {
-  padding-left: 10px;
-}
-
 .emotion-2 {
-  color: #444444;
-}
-
-.emotion-0 {
-  display: inline-block;
-  cursor: pointer;
+  color: #333333;
 }
 
 .emotion-12 {
@@ -232,9 +223,10 @@ exports[`Storyshots basics/Tooltip/TooltipLinkList links and callback 1`] = `
   margin-top: 0px;
   margin-left: 0px;
   margin-right: 0px;
-  background: linear-gradient( -1deg, rgba(248,248,248,0.97) 0%, rgba(255,255,255,0.97) 100% );
+  background: rgba(0,0,0,0.95);
   -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
   filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
+  border-radius: 8px;
   font-size: 12px;
 }
 
@@ -253,12 +245,18 @@ exports[`Storyshots basics/Tooltip/TooltipLinkList links and callback 1`] = `
   border-top-width: 8px;
   border-right-width: 8px;
   border-left-width: 8px;
-  border-top-color: #FFFFFF;
+  border-top-color: rgba(0,0,0,0.95);
   border-bottom-color: transparent;
   border-left-color: transparent;
   border-right-color: transparent;
 }
 
+.emotion-11 {
+  min-width: 180px;
+  overflow: hidden;
+  border-radius: 8px;
+}
+
 <div
   style="height:300px"
 >
diff --git a/lib/components/src/tooltip/__snapshots__/TooltipMessage.stories.storyshot b/lib/components/src/tooltip/__snapshots__/TooltipMessage.stories.storyshot
index 5eefe02dcba..fa1f36db222 100644
--- a/lib/components/src/tooltip/__snapshots__/TooltipMessage.stories.storyshot
+++ b/lib/components/src/tooltip/__snapshots__/TooltipMessage.stories.storyshot
@@ -13,9 +13,10 @@ exports[`Storyshots basics/Tooltip/TooltipMessage default 1`] = `
   margin-top: 0px;
   margin-left: 0px;
   margin-right: 0px;
-  background: linear-gradient( -1deg, rgba(248,248,248,0.97) 0%, rgba(255,255,255,0.97) 100% );
+  background: rgba(0,0,0,0.95);
   -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
   filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
+  border-radius: 8px;
   font-size: 12px;
 }
 
@@ -34,7 +35,7 @@ exports[`Storyshots basics/Tooltip/TooltipMessage default 1`] = `
   border-top-width: 8px;
   border-right-width: 8px;
   border-left-width: 8px;
-  border-top-color: #FFFFFF;
+  border-top-color: rgba(0,0,0,0.95);
   border-bottom-color: transparent;
   border-left-color: transparent;
   border-right-color: transparent;
@@ -107,9 +108,10 @@ exports[`Storyshots basics/Tooltip/TooltipMessage minimal message 1`] = `
   margin-top: 0px;
   margin-left: 0px;
   margin-right: 0px;
-  background: linear-gradient( -1deg, rgba(248,248,248,0.97) 0%, rgba(255,255,255,0.97) 100% );
+  background: rgba(0,0,0,0.95);
   -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
   filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
+  border-radius: 8px;
   font-size: 12px;
 }
 
@@ -128,7 +130,7 @@ exports[`Storyshots basics/Tooltip/TooltipMessage minimal message 1`] = `
   border-top-width: 8px;
   border-right-width: 8px;
   border-left-width: 8px;
-  border-top-color: #FFFFFF;
+  border-top-color: rgba(0,0,0,0.95);
   border-bottom-color: transparent;
   border-left-color: transparent;
   border-right-color: transparent;
@@ -192,9 +194,10 @@ exports[`Storyshots basics/Tooltip/TooltipMessage with link 1`] = `
   margin-top: 0px;
   margin-left: 0px;
   margin-right: 0px;
-  background: linear-gradient( -1deg, rgba(248,248,248,0.97) 0%, rgba(255,255,255,0.97) 100% );
+  background: rgba(0,0,0,0.95);
   -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
   filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
+  border-radius: 8px;
   font-size: 12px;
 }
 
@@ -213,7 +216,7 @@ exports[`Storyshots basics/Tooltip/TooltipMessage with link 1`] = `
   border-top-width: 8px;
   border-right-width: 8px;
   border-left-width: 8px;
-  border-top-color: #FFFFFF;
+  border-top-color: rgba(0,0,0,0.95);
   border-bottom-color: transparent;
   border-left-color: transparent;
   border-right-color: transparent;
@@ -306,9 +309,10 @@ exports[`Storyshots basics/Tooltip/TooltipMessage with links 1`] = `
   margin-top: 0px;
   margin-left: 0px;
   margin-right: 0px;
-  background: linear-gradient( -1deg, rgba(248,248,248,0.97) 0%, rgba(255,255,255,0.97) 100% );
+  background: rgba(0,0,0,0.95);
   -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
   filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
+  border-radius: 8px;
   font-size: 12px;
 }
 
@@ -327,7 +331,7 @@ exports[`Storyshots basics/Tooltip/TooltipMessage with links 1`] = `
   border-top-width: 8px;
   border-right-width: 8px;
   border-left-width: 8px;
-  border-top-color: #FFFFFF;
+  border-top-color: rgba(0,0,0,0.95);
   border-bottom-color: transparent;
   border-left-color: transparent;
   border-right-color: transparent;
diff --git a/lib/components/src/tooltip/__snapshots__/WithTooltip.stories.storyshot b/lib/components/src/tooltip/__snapshots__/WithTooltip.stories.storyshot
index 74d7b2c8a91..61057cb5c74 100644
--- a/lib/components/src/tooltip/__snapshots__/WithTooltip.stories.storyshot
+++ b/lib/components/src/tooltip/__snapshots__/WithTooltip.stories.storyshot
@@ -166,7 +166,7 @@ exports[`Storyshots basics/Tooltip/WithTooltip simple click start open 1`] = `
   margin-top: 0px;
   margin-left: 0px;
   margin-right: 0px;
-  background: rgba(255,255,255,0.95);
+  background: rgba(0,0,0,0.95);
   -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
   filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
   border-radius: 8px;
@@ -188,35 +188,12 @@ exports[`Storyshots basics/Tooltip/WithTooltip simple click start open 1`] = `
   border-top-width: 8px;
   border-right-width: 8px;
   border-left-width: 8px;
-  border-top-color: rgba(255,255,255,0.95);
+  border-top-color: rgba(0,0,0,0.95);
   border-bottom-color: transparent;
   border-left-color: transparent;
   border-right-color: transparent;
 }
 
-.emotion-12 {
-  height: 300px;
-}
-
-.emotion-11 {
-  width: 500px;
-  height: 500px;
-  overflow-y: scroll;
-  background: #eee;
-  position: relative;
-}
-
-.emotion-0 {
-  height: 100px;
-}
-
-.emotion-1 {
-  width: 200px;
-  height: 100px;
-  background-color: red;
-  color: white;
-}
-
 .emotion-9 {
   padding: 15px;
   width: 280px;
diff --git a/lib/ui/src/components/layout/__snapshots__/layout.stories.storyshot b/lib/ui/src/components/layout/__snapshots__/layout.stories.storyshot
index 8521c926594..84434154b8e 100644
--- a/lib/ui/src/components/layout/__snapshots__/layout.stories.storyshot
+++ b/lib/ui/src/components/layout/__snapshots__/layout.stories.storyshot
@@ -313,7 +313,7 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 0 1`] = `
   border-bottom: 3px solid transparent;
   font-weight: bold;
   font-size: 13px;
-  color: inherit;
+  opacity: 0.4;
   border-bottom-color: transparent;
 }
 
@@ -602,7 +602,7 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 1 1`] = `
   border-bottom: 3px solid transparent;
   font-weight: bold;
   font-size: 13px;
-  color: inherit;
+  opacity: 0.4;
   border-bottom-color: transparent;
 }
 
@@ -891,7 +891,7 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 2 1`] = `
   border-bottom: 3px solid transparent;
   font-weight: bold;
   font-size: 13px;
-  color: inherit;
+  opacity: 0.4;
   border-bottom-color: transparent;
 }
 
@@ -1180,7 +1180,7 @@ exports[`Storyshots UI|Layout/Mobile (mocked) page 1`] = `
   border-bottom: 3px solid transparent;
   font-weight: bold;
   font-size: 13px;
-  color: inherit;
+  opacity: 0.4;
   border-bottom-color: transparent;
 }
 
diff --git a/lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot b/lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot
index 4118a023114..1a9f236b6cc 100644
--- a/lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot
+++ b/lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot
@@ -231,7 +231,6 @@ Array [
   height: 100%;
   -webkit-transition: background .1s linear;
   transition: background .1s linear;
-  background: #FFFFFF;
 }
 
 .emotion-0 {
@@ -343,7 +342,7 @@ Array [
   border-bottom: 3px solid transparent;
   font-weight: bold;
   font-size: 13px;
-  color: inherit;
+  opacity: 0.4;
   border-bottom-color: transparent;
 }
 
@@ -650,7 +649,6 @@ Array [
   height: 100%;
   -webkit-transition: background .1s linear;
   transition: background .1s linear;
-  background: #FFFFFF;
 }
 
 .emotion-0 {
diff --git a/lib/ui/src/settings/__snapshots__/about.stories.storyshot b/lib/ui/src/settings/__snapshots__/about.stories.storyshot
index ed8deb18243..7937df77314 100644
--- a/lib/ui/src/settings/__snapshots__/about.stories.storyshot
+++ b/lib/ui/src/settings/__snapshots__/about.stories.storyshot
@@ -1525,7 +1525,6 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  background: #FFFFFF;
 }
 
 .emotion-20 {
@@ -1540,8 +1539,7 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #333333;
-  background: #FFFFFF;
+  color: #666666;
   font-size: 12px;
   line-height: 16px;
   font-weight: 700;