diff --git a/addons/a11y/src/components/Tabs.js b/addons/a11y/src/components/Tabs.js
index 0834a04e614..6dbc8fbbf26 100644
--- a/addons/a11y/src/components/Tabs.js
+++ b/addons/a11y/src/components/Tabs.js
@@ -11,7 +11,7 @@ const Container = styled.div({
 
 const List = styled.div(({ theme }) => ({
   boxShadow: `${theme.appBorderColor} 0 -1px 0 0 inset`,
-  background: '#f8f8fc',
+  background: 'rgba(0,0,0,.05)',
   flexWrap: 'wrap',
   display: 'flex',
 }));
diff --git a/addons/actions/package.json b/addons/actions/package.json
index 375fbb45890..1355071a786 100644
--- a/addons/actions/package.json
+++ b/addons/actions/package.json
@@ -29,6 +29,7 @@
     "global": "^4.3.2",
     "lodash": "^4.17.11",
     "make-error": "^1.3.5",
+    "polished": "^2.3.3",
     "prop-types": "^15.6.2",
     "react": "^16.8.1",
     "react-inspector": "^2.3.0",
diff --git a/addons/actions/src/components/ActionLogger/style.js b/addons/actions/src/components/ActionLogger/style.js
index 86fe777b3e7..0aab9cbba91 100644
--- a/addons/actions/src/components/ActionLogger/style.js
+++ b/addons/actions/src/components/ActionLogger/style.js
@@ -1,4 +1,5 @@
 import { styled } from '@storybook/theming';
+import { opacify } from 'polished';
 
 export const Actions = styled.pre({
   flex: 1,
@@ -18,7 +19,7 @@ export const Action = styled.div({
 });
 
 export const Counter = styled.div(({ theme }) => ({
-  backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  backgroundColor: opacify(0.5, theme.appBorderColor),
   color: theme.color.inverseText,
   fontSize: theme.typography.size.s1,
   fontWeight: theme.typography.weight.bold,
diff --git a/addons/knobs/src/components/Panel.js b/addons/knobs/src/components/Panel.js
index 8685083912c..ff311c28a27 100644
--- a/addons/knobs/src/components/Panel.js
+++ b/addons/knobs/src/components/Panel.js
@@ -177,10 +177,10 @@ export default class KnobPanel extends PureComponent {
             <Link
               href="https://github.com/storybooks/storybook/tree/master/addons/knobs"
               target="_blank"
+              withArrow
             >
               dynamically interact with components
-            </Link>{' '}
-            using knobs.
+            </Link>
           </Fragment>
         </Placeholder>
       );
diff --git a/addons/knobs/src/components/__tests__/__snapshots__/Panel.js.snap b/addons/knobs/src/components/__tests__/__snapshots__/Panel.js.snap
index df555bca26b..d6b39c95eb6 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;
-  min-height: 32px;
-  margin-right: 16px;
+  font-weight: 700;
+  margin-right: 15px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -135,8 +135,8 @@ Array [
 
 .emotion-0 {
   min-width: 100px;
-  min-height: 32px;
-  margin-right: 16px;
+  font-weight: 700;
+  margin-right: 15px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
diff --git a/addons/knobs/src/components/types/Checkboxes.js b/addons/knobs/src/components/types/Checkboxes.js
index 78539711345..a15cf1d6412 100644
--- a/addons/knobs/src/components/types/Checkboxes.js
+++ b/addons/knobs/src/components/types/Checkboxes.js
@@ -2,6 +2,19 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@storybook/theming';
 
+const CheckboxesWrapper = styled.div(({ isInline }) =>
+  isInline
+    ? {
+        display: 'flex',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        '> * + *': {
+          marginLeft: 10,
+        },
+      }
+    : {}
+);
+
 const CheckboxFieldset = styled.fieldset({
   border: 0,
   padding: 0,
@@ -9,24 +22,11 @@ const CheckboxFieldset = styled.fieldset({
 });
 
 const CheckboxLabel = styled.label({
-  fontSize: 11,
-  padding: '5px',
+  padding: '3px 0 3px 5px',
+  lineHeight: '18px',
+  display: 'inline-block',
 });
 
-const flex = ({ isInline }) => {
-  if (isInline) {
-    return {
-      display: 'flex',
-      flexWrap: 'wrap',
-      alignItems: 'center',
-      height: '100%',
-    };
-  }
-  return null;
-};
-
-const FlexWrapper = styled.div(flex);
-
 class CheckboxesType extends Component {
   constructor(props) {
     super(props);
@@ -82,7 +82,7 @@ class CheckboxesType extends Component {
 
     return (
       <CheckboxFieldset>
-        <FlexWrapper isInline={isInline}>{this.renderCheckboxList(knob)}</FlexWrapper>
+        <CheckboxesWrapper isInline={isInline}>{this.renderCheckboxList(knob)}</CheckboxesWrapper>
       </CheckboxFieldset>
     );
   }
diff --git a/addons/knobs/src/components/types/Options.js b/addons/knobs/src/components/types/Options.js
index aa4d6c2e2c4..8580f72d7d4 100644
--- a/addons/knobs/src/components/types/Options.js
+++ b/addons/knobs/src/components/types/Options.js
@@ -6,6 +6,8 @@ import { styled } from '@storybook/theming';
 import RadiosType from './Radio';
 import CheckboxesType from './Checkboxes';
 
+// TODO: Apply the Storybook theme to react-select
+
 const OptionsSelect = styled(ReactSelect)({
   width: '100%',
   maxWidth: '300px',
diff --git a/addons/knobs/src/components/types/Radio.js b/addons/knobs/src/components/types/Radio.js
index 7b21d25a7dc..f4163967e2e 100644
--- a/addons/knobs/src/components/types/Radio.js
+++ b/addons/knobs/src/components/types/Radio.js
@@ -2,22 +2,23 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@storybook/theming';
 
-const flex = ({ isInline }) => {
-  if (isInline) {
-    return {
-      display: 'flex',
-      flexWrap: 'wrap',
-      alignItems: 'center',
-    };
-  }
-  return null;
-};
-
-const RadiosWrapper = styled.div(flex);
+const RadiosWrapper = styled.div(({ isInline }) =>
+  isInline
+    ? {
+        display: 'flex',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        '> * + *': {
+          marginLeft: 10,
+        },
+      }
+    : {}
+);
 
 const RadioLabel = styled.label({
-  fontSize: 11,
-  padding: '5px',
+  padding: '3px 0 3px 5px',
+  lineHeight: '18px',
+  display: 'inline-block',
 });
 
 class RadiosType extends Component {
diff --git a/docs/src/pages/configurations/theming/index.md b/docs/src/pages/configurations/theming/index.md
index 745e7acbeab..b69383d2f59 100644
--- a/docs/src/pages/configurations/theming/index.md
+++ b/docs/src/pages/configurations/theming/index.md
@@ -3,7 +3,7 @@ id: 'theming'
 title: 'Theming Storybook'
 ---
 
-Storybook's manager UI is theme-able! You can change theme variables using [addon-options](https://github.com/storybooks/storybook/tree/master/addons/options).
+Storybook is theme-able! You can change theme variables using [addon-options](https://github.com/storybooks/storybook/tree/master/addons/options).
 
 ## Set a theme
 
@@ -50,144 +50,196 @@ addParameters({
 });
 ```
 
-## Theme variables
+## Create a theme quickstart
 
-```
-
-// Storybook-specific color palette
-colorPrimary: primary color, // Storybook pink
-colorSecondary: secondary color, // Blue
-
-// UI
-appBg: background.app,
-appBorderColor: color.border,
-appBorderRadius: 4,
+The easiest way to customize Storybook to generate a new theme using `create()`. This function includes shorthands for the most common theme variables. Here's how to use it.
 
-// Fonts
-fontBase: typography.fonts.base,
-fontCode: typography.fonts.mono,
+First create a new file in `.storybook` called `yourTheme.js`.
 
-// Text colors
-textColor: color.darkest,
-textInverseColor: color.lightest,
+Next paste the code below and tweak the variables.
 
-// Toolbar default and active colors
-barTextColor: color.mediumdark,
-barSelectedColor: color.secondary,
-barBgColor: color.lightest,
-
-// Form colors
-inputBg: color.lightest,
-inputBorder: color.border,
-inputTextColor: color.darkest,
-inputBorderRadius: 4,
+```
+import { create } from '@storybook/theming';
 
-// Brand logo/text
-brand: null,
+export default create({
+  // Is this a 'light' or 'dark' theme?
+  base: 'light',
 
+  // Color palette
+  colorPrimary: 'red', // primary color
+  colorSecondary: 'pink', // secondary color
 
+  // UI
+  appBg: 'papayawhip',
+  appContentBg: 'white',
+  appBorderColor: 'rgba(0,0,0,.1)',
+  appBorderRadius: 4,
 
-```
+  // Fonts
+  fontBase: '"Helvetica", Arial, sans-serif',
+  fontCode: 'Monaco, monospace',
 
-### Deep theming components
+  // Text colors
+  textColor: '#FFFFFF',
+  textInverseColor: '#333333',
 
-All options above are single key options, in other words, they are variables, and their usage is fixed.
+  // Toolbar default and active colors
+  barTextColor: '#999999',
+  barSelectedColor: 'blue',
+  barBg: 'white',
 
-We will extend the theming ability in the future and possibly add more deep theming ability.
-Right now we allow to deep theme: `stories nav panel`. Below are the varaiables that are used to deep theme `stories nav panel`.
+  // Form colors
+  inputBg: 'white',
+  inputBorder: 'rgba(0,0,0,.1)',
+  inputTextColor: '#333333',
+  inputBorderRadius: 4,
 
-storiesNav: deep theme for `stories nav`
-
-```
-storiesNav: {
-  backgroundColor: 'aqua',
-}
+  // Brand logo/text
+  brand: `<svg .../>`,
+});
 ```
 
-brand: deep theme for brand including `brand name` and `shortcuts`
+Finally, import your theme into `.storybook/config` and add it to your Storybook parameters.
 
 ```
-brand: {
-  background: 'url("/path/to/logo.svg")',
-}
+import {yourTheme} from './yourTheme';
+
+addParameters({
+  options: {
+    theme: yourTheme,
+  },
+});
 ```
 
-brandLink: deep theme for only `brand name`
+## Addons and theme creation
 
-```
-brandLink: {
-  border: 'none'
-}
-```
+Some addons require specific theme variables that a Storybook user must add. If you share your theme with the community make sure to support the official and other popular addons so your users have a consistent experience.
 
-filter: deep theme for `stories filter section`
+For example, the popular Actions addon uses [react-inspector](https://github.com/xyc/react-inspector/blob/master/src/styles/themes/chromeLight.js) which has themes of it's own. Supply additional theme variables to style it like so:
 
 ```
-filter: {
-  backgroundColor: 'red',
+addonActionsTheme: {
+  ...chromeLight,
+  BASE_FONT_FAMILY: typography.fonts.mono,
+  BASE_BACKGROUND_COLOR: 'transparent',
 }
 ```
 
-treeHeader: deep theme for `tree header`
+### Using the theme for addon authors
+
+For a native Storybook experience, we encourage addon authors to reuse the theme variables above. The theming engine relies on [emotion](https://emotion.sh/), a CSS-in-JS library.
 
 ```
-treeHeader: {
-  color: 'blue',
-}
+import { styled } from '@storybook/theming';
 ```
 
-treeMenuHeader: deep theme for `tree menu header` of each menu
+Use the theme variables in object notation:
 
 ```
-treeMenuHeader: {
-  color: 'aqua',
-}
+const Component = styled.div(
+  ({ theme }) => ({
+    background: theme.background.app,
+    width: 0,
+  }),
+);
 ```
 
-menuLink: deep theme for `menu link` of each story
+Or with styled-components template literals:
 
 ```
-menuLink: {
-  color: 'black',
-}
+const Component = styled.div`
+  background: `${props => props.theme.background.app}`
+  width: 0;
+`;
 ```
 
-activeMenuLink: deep theme for `active menu link` for the active story
+### Advanced theming
 
-```
-activeMenuLink: {
-  fontWeight: 'light',
-}
-```
+For further customization adjust theme variables manually.
 
-treeArrow: deep theme for `tree arrow`. This accepts an object which receives `height`, `width`, `base` and `wrapper`
+This is the master list:
 
 ```
-treeArrow: {
-  height: 5,
-  width: 5,
-  base: {
-    fontSize: '12px'
-  },
-  wrapper: {
-    backgroundColor: 'white'
-  }
-}
-```
+base: 'light' | 'dark',
+color: {
+  primary
+  secondary
+  tertiary
+  ancillary
 
-The styles provided here support everything [emotion](https://emotion.sh/) does. So that included things like nested selectors!
+  orange
+  gold
+  green
+  seafoam
+  purple
+  ultraviolet
 
-## Adding more theme variables for addons
+  lightest
+  lighter
+  light
+  mediumlight
+  medium
+  mediumdark
+  dark
+  darker
+  darkest
 
-If addons have a need for specific theme variables, the user has to add them.
-We advise addons to reuse the variables listed above as much as possible.
+  border
 
-Addon actions uses [react-inspector](https://github.com/xyc/react-inspector/blob/master/src/styles/themes/chromeLight.js) which has themes of it's own. If you want to theme it (our themes do) you can add needs the following additional theme variables:
+  positive
+  negative
+  warning
 
-```
-addonActionsTheme: {
-  ...chromeLight,
-  BASE_FONT_FAMILY: monoFonts.fontFamily,
-  BASE_BACKGROUND_COLOR: 'transparent',
+  defaultText
+  inverseText
+}
+background: {
+  app
+  content
+  hoverable
+
+  positive
+  negative
+  warning
+}
+typography: {
+  fonts: {
+    base
+    mono
+  }
+  weight: {
+    regular
+    bold
+    black
+  }
+  size: {
+    s1
+    s2
+    s3
+    m1
+    m2
+    m3
+    l1
+    l2
+    l3
+    code
+  }
+  input: {
+    border
+    background
+    color
+    borderRadius
+  };
+
+  layoutMargin
+  appBorderColor
+  appBorderRadius
+
+  barTextColor
+  barSelectedColor
+  barBg
+
+  brand
 }
+TODO finish this, what's the best way to document?
 ```
diff --git a/examples/official-storybook/config.js b/examples/official-storybook/config.js
index be51e97003b..fcf28e6631e 100644
--- a/examples/official-storybook/config.js
+++ b/examples/official-storybook/config.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { storiesOf, configure, addDecorator, addParameters } from '@storybook/react';
-import { Global, ThemeProvider, themes, createReset } from '@storybook/theming';
+import { Global, ThemeProvider, themes, createGlobal } from '@storybook/theming';
 
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import { withCssResources } from '@storybook/addon-cssresources';
@@ -35,7 +35,7 @@ addDecorator(withNotes);
 
 addDecorator(fn => (
   <ThemeProvider theme={themes.normal}>
-    <Global styles={createReset} />
+    <Global styles={createGlobal} />
     {fn()}
   </ThemeProvider>
 ));
diff --git a/examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot
index 4de68f0ce6c..b8fb54e56eb 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot
@@ -97,8 +97,8 @@ exports[`Storyshots Addons|A11y/Form With label 1`] = `
 
 .emotion-0 {
   min-width: 100px;
-  min-height: 32px;
-  margin-right: 16px;
+  font-weight: 700;
+  margin-right: 15px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
diff --git a/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot
index 7c798fc6595..8b7cfba5f64 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot
@@ -30,16 +30,11 @@ Array [
   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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   border-radius: 4px;
+  display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -48,38 +43,6 @@ 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;
@@ -92,23 +55,19 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -150,16 +109,11 @@ Array [
   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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   border-radius: 4px;
+  display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -168,38 +122,6 @@ 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;
@@ -212,23 +134,19 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -270,16 +188,11 @@ Array [
   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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   border-radius: 4px;
+  display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -288,38 +201,6 @@ 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;
@@ -332,23 +213,19 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -390,16 +267,11 @@ Array [
   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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   border-radius: 4px;
+  display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -408,38 +280,6 @@ 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;
@@ -452,23 +292,19 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -510,16 +346,11 @@ Array [
   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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   border-radius: 4px;
+  display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -528,38 +359,6 @@ 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;
@@ -572,23 +371,19 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -630,16 +425,11 @@ Array [
   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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   border-radius: 4px;
+  display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -648,38 +438,6 @@ 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;
@@ -692,23 +450,19 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -750,16 +504,11 @@ Array [
   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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   border-radius: 4px;
+  display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -768,38 +517,6 @@ 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;
@@ -812,23 +529,19 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -870,16 +583,11 @@ Array [
   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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   border-radius: 4px;
+  display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -888,38 +596,6 @@ 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;
@@ -932,23 +608,19 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -990,16 +662,11 @@ Array [
   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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   border-radius: 4px;
+  display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1008,38 +675,6 @@ 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;
@@ -1052,23 +687,19 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -1110,16 +741,11 @@ Array [
   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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   border-radius: 4px;
+  display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1128,38 +754,6 @@ 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;
@@ -1172,23 +766,19 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -1230,16 +820,11 @@ Array [
   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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   border-radius: 4px;
+  display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1248,38 +833,6 @@ 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;
@@ -1292,23 +845,19 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -1350,16 +899,11 @@ Array [
   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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   border-radius: 4px;
+  display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1368,38 +912,6 @@ 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;
@@ -1412,23 +924,19 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -1470,16 +978,11 @@ Array [
   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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   border-radius: 4px;
+  display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1488,38 +991,6 @@ 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;
@@ -1532,23 +1003,19 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -1590,16 +1057,11 @@ Array [
   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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   border-radius: 4px;
+  display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1608,38 +1070,6 @@ 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;
@@ -1652,23 +1082,19 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -1710,16 +1136,11 @@ Array [
   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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   border-radius: 4px;
+  display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1728,38 +1149,6 @@ 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;
@@ -1772,23 +1161,19 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -1830,16 +1215,11 @@ Array [
   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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   border-radius: 4px;
+  display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1848,38 +1228,6 @@ 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;
@@ -1892,23 +1240,19 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -1950,16 +1294,11 @@ Array [
   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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   border-radius: 4px;
+  display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1968,38 +1307,6 @@ 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;
@@ -2012,23 +1319,19 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -2070,54 +1373,17 @@ Array [
   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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   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-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);
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  overflow: visible;
+  z-index: 2;
 }
 
 .emotion-0 svg {
@@ -2132,23 +1398,19 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -2190,16 +1452,11 @@ Array [
   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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   border-radius: 4px;
+  display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -2208,38 +1465,6 @@ 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;
@@ -2252,23 +1477,19 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -2310,16 +1531,11 @@ Array [
   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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   border-radius: 4px;
+  display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -2328,38 +1544,6 @@ 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;
@@ -2372,23 +1556,19 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -2434,16 +1614,11 @@ exports[`Storyshots Addons|Actions Basic example 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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   border-radius: 4px;
+  display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -2452,38 +1627,6 @@ 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;
@@ -2496,23 +1639,19 @@ exports[`Storyshots Addons|Actions Basic example 1`] = `
 }
 
 .emotion-0 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -2557,16 +1696,11 @@ exports[`Storyshots Addons|Actions Circular Payload 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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   border-radius: 4px;
+  display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -2575,38 +1709,6 @@ 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;
@@ -2619,23 +1721,19 @@ exports[`Storyshots Addons|Actions Circular Payload 1`] = `
 }
 
 .emotion-0 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -2680,16 +1778,11 @@ exports[`Storyshots Addons|Actions Decorated action + config 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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   border-radius: 4px;
+  display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -2698,38 +1791,6 @@ 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;
@@ -2742,23 +1803,19 @@ exports[`Storyshots Addons|Actions Decorated action + config 1`] = `
 }
 
 .emotion-0 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -2803,16 +1860,11 @@ exports[`Storyshots Addons|Actions Decorated action 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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   border-radius: 4px;
+  display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -2821,38 +1873,6 @@ 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;
@@ -2865,23 +1885,19 @@ exports[`Storyshots Addons|Actions Decorated action 1`] = `
 }
 
 .emotion-0 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -2926,16 +1942,11 @@ exports[`Storyshots Addons|Actions Decorated actions + config 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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   border-radius: 4px;
+  display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -2944,38 +1955,6 @@ 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;
@@ -2988,23 +1967,19 @@ exports[`Storyshots Addons|Actions Decorated actions + config 1`] = `
 }
 
 .emotion-0 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -3049,16 +2024,11 @@ exports[`Storyshots Addons|Actions Decorated actions 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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   border-radius: 4px;
+  display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -3067,38 +2037,6 @@ 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;
@@ -3111,23 +2049,19 @@ exports[`Storyshots Addons|Actions Decorated actions 1`] = `
 }
 
 .emotion-0 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -3173,54 +2107,17 @@ Array [
   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);
-  background: #FAFBFC;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
-  border-radius: 4px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  overflow: visible;
-  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);
+  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-0 svg {
@@ -3235,23 +2132,19 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -3293,16 +2186,11 @@ Array [
   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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   border-radius: 4px;
+  display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -3311,38 +2199,6 @@ 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;
@@ -3355,23 +2211,19 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -3417,16 +2269,11 @@ exports[`Storyshots Addons|Actions Multiple actions + config 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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   border-radius: 4px;
+  display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -3435,38 +2282,6 @@ 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;
@@ -3479,23 +2294,19 @@ exports[`Storyshots Addons|Actions Multiple actions + config 1`] = `
 }
 
 .emotion-0 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -3540,16 +2351,11 @@ exports[`Storyshots Addons|Actions Multiple actions 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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   border-radius: 4px;
+  display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -3558,38 +2364,6 @@ 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;
@@ -3602,23 +2376,19 @@ exports[`Storyshots Addons|Actions Multiple actions 1`] = `
 }
 
 .emotion-0 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -3663,16 +2433,11 @@ exports[`Storyshots Addons|Actions Multiple actions as object 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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   border-radius: 4px;
+  display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -3681,38 +2446,6 @@ 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;
@@ -3725,23 +2458,19 @@ exports[`Storyshots Addons|Actions Multiple actions as object 1`] = `
 }
 
 .emotion-0 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -3786,16 +2515,11 @@ exports[`Storyshots Addons|Actions Multiple actions, object + config 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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   border-radius: 4px;
+  display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -3804,38 +2528,6 @@ 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;
@@ -3848,23 +2540,19 @@ exports[`Storyshots Addons|Actions Multiple actions, object + config 1`] = `
 }
 
 .emotion-0 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -3913,16 +2601,11 @@ Array [
   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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   border-radius: 4px;
+  display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -3931,38 +2614,6 @@ 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;
@@ -3975,23 +2626,19 @@ Array [
 }
 
 .emotion-0 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -4037,16 +2684,11 @@ exports[`Storyshots Addons|Actions Reserved keyword as name 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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   border-radius: 4px;
+  display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -4055,38 +2697,6 @@ 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;
@@ -4099,23 +2709,19 @@ exports[`Storyshots Addons|Actions Reserved keyword as name 1`] = `
 }
 
 .emotion-0 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -4160,16 +2766,11 @@ exports[`Storyshots Addons|Actions configureActionsDepth 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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   border-radius: 4px;
+  display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -4178,38 +2779,6 @@ 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;
@@ -4222,23 +2791,19 @@ exports[`Storyshots Addons|Actions configureActionsDepth 1`] = `
 }
 
 .emotion-0 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -4283,16 +2848,11 @@ exports[`Storyshots Addons|Actions.deprecated Decorated Action 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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   border-radius: 4px;
+  display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -4301,38 +2861,6 @@ 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;
@@ -4345,23 +2873,19 @@ exports[`Storyshots Addons|Actions.deprecated Decorated Action 1`] = `
 }
 
 .emotion-0 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 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 40b864302a7..f3f40f8d412 100644
--- a/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
+++ b/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
@@ -10,6 +10,7 @@ exports[`Storyshots Basics|ActionBar manyItems 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  background: #FFFFFF;
 }
 
 .emotion-0 {
@@ -24,7 +25,8 @@ exports[`Storyshots Basics|ActionBar manyItems 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #666666;
+  color: #333333;
+  background: #FFFFFF;
   font-size: 12px;
   line-height: 16px;
   font-weight: 700;
@@ -57,6 +59,7 @@ exports[`Storyshots Basics|ActionBar manyItems 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  background: #FFFFFF;
 }
 
 .emotion-0 {
@@ -71,7 +74,8 @@ exports[`Storyshots Basics|ActionBar manyItems 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #666666;
+  color: #333333;
+  background: #FFFFFF;
   font-size: 12px;
   line-height: 16px;
   font-weight: 700;
@@ -132,6 +136,7 @@ exports[`Storyshots Basics|ActionBar singleItem 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  background: #FFFFFF;
 }
 
 .emotion-0 {
@@ -146,7 +151,8 @@ exports[`Storyshots Basics|ActionBar singleItem 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #666666;
+  color: #333333;
+  background: #FFFFFF;
   font-size: 12px;
   line-height: 16px;
   font-weight: 700;
@@ -179,6 +185,7 @@ exports[`Storyshots Basics|ActionBar singleItem 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  background: #FFFFFF;
 }
 
 .emotion-0 {
@@ -193,7 +200,8 @@ exports[`Storyshots Basics|ActionBar singleItem 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #666666;
+  color: #333333;
+  background: #FFFFFF;
   font-size: 12px;
   line-height: 16px;
   font-weight: 700;
@@ -232,6 +240,50 @@ exports[`Storyshots Basics|ActionBar singleItem 1`] = `
 </div>
 `;
 
+exports[`Storyshots Basics|Brand/StorybookLogo normal 1`] = `
+<svg
+  height="40px"
+  title="Storybook"
+  viewBox="0 0 200 40"
+  width="200px"
+>
+  <defs>
+    <path
+      d="M1.2 36.9L0 3.9c0-1.1.8-2 1.9-2.1l28-1.8a2 2 0 0 1 2.2 1.9 2 2 0 0 1 0 .1v36a2 2 0 0 1-2 2 2 2 0 0 1-.1 0L3.2 38.8a2 2 0 0 1-2-2z"
+      id="a"
+    />
+  </defs>
+  <g
+    fill="none"
+    fill-rule="evenodd"
+  >
+    <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"
+    />
+    <mask
+      fill="#fff"
+      id="b"
+    >
+      <use
+        href="#a"
+      />
+    </mask>
+    <use
+      fill="#FF4785"
+      fill-rule="nonzero"
+      href="#a"
+    />
+    <path
+      d="M23.7 5L24 .2l3.9-.3.1 4.8a.3.3 0 0 1-.5.2L26 3.8l-1.7 1.4a.3.3 0 0 1-.5-.3zm-5 10c0 .9 5.3.5 6 0 0-5.4-2.8-8.2-8-8.2-5.3 0-8.2 2.8-8.2 7.1 0 7.4 10 7.6 10 11.6 0 1.2-.5 1.9-1.8 1.9-1.6 0-2.2-.9-2.1-3.6 0-.6-6.1-.8-6.3 0-.5 6.7 3.7 8.6 8.5 8.6 4.6 0 8.3-2.5 8.3-7 0-7.9-10.2-7.7-10.2-11.6 0-1.6 1.2-1.8 2-1.8.6 0 2 0 1.9 3z"
+      fill="#FFF"
+      fill-rule="nonzero"
+      mask="url(#b)"
+    />
+  </g>
+</svg>
+`;
+
 exports[`Storyshots Basics|DocumentFormatting sampleDocument 1`] = `
 .emotion-0 {
   font-size: 14px;
@@ -1643,7 +1695,7 @@ exports[`Storyshots Basics|Placeholder singleChild 1`] = `
 .emotion-1 {
   padding: 30px;
   text-align: center;
-  color: #666666;
+  color: #333333;
   font-size: 13px;
 }
 
@@ -1654,7 +1706,7 @@ exports[`Storyshots Basics|Placeholder singleChild 1`] = `
 .emotion-1 {
   padding: 30px;
   text-align: center;
-  color: #666666;
+  color: #333333;
   font-size: 13px;
 }
 
@@ -1674,10 +1726,10 @@ exports[`Storyshots Basics|Placeholder singleChild 1`] = `
 `;
 
 exports[`Storyshots Basics|Placeholder twoChildren 1`] = `
-.emotion-2 {
+.emotion-4 {
   padding: 30px;
   text-align: center;
-  color: #666666;
+  color: #333333;
   font-size: 13px;
 }
 
@@ -1686,9 +1738,57 @@ exports[`Storyshots Basics|Placeholder twoChildren 1`] = `
 }
 
 .emotion-2 {
+  display: inline-block;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #1EA7FD;
+}
+
+.emotion-2 svg path {
+  fill: #1EA7FD;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  cursor: pointer;
+  -webkit-transform: translate3d(0,-1px,0);
+  -ms-transform: translate3d(0,-1px,0);
+  transform: translate3d(0,-1px,0);
+  color: #0297f5;
+}
+
+.emotion-2:hover svg path,
+.emotion-2:focus svg path {
+  fill: #0297f5;
+}
+
+.emotion-2:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  color: #028ee6;
+}
+
+.emotion-2:active svg path {
+  fill: #028ee6;
+}
+
+.emotion-2 svg {
+  display: inline-block;
+  height: 1em;
+  width: 1em;
+  vertical-align: text-top;
+  position: relative;
+  bottom: -0.125em;
+  margin-right: 0.4em;
+}
+
+.emotion-4 {
   padding: 30px;
   text-align: center;
-  color: #666666;
+  color: #333333;
   font-size: 13px;
 }
 
@@ -1696,8 +1796,56 @@ exports[`Storyshots Basics|Placeholder twoChildren 1`] = `
   font-weight: 700;
 }
 
+.emotion-2 {
+  display: inline-block;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #1EA7FD;
+}
+
+.emotion-2 svg path {
+  fill: #1EA7FD;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  cursor: pointer;
+  -webkit-transform: translate3d(0,-1px,0);
+  -ms-transform: translate3d(0,-1px,0);
+  transform: translate3d(0,-1px,0);
+  color: #0297f5;
+}
+
+.emotion-2:hover svg path,
+.emotion-2:focus svg path {
+  fill: #0297f5;
+}
+
+.emotion-2:active {
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  color: #028ee6;
+}
+
+.emotion-2:active svg path {
+  fill: #028ee6;
+}
+
+.emotion-2 svg {
+  display: inline-block;
+  height: 1em;
+  width: 1em;
+  vertical-align: text-top;
+  position: relative;
+  bottom: -0.125em;
+  margin-right: 0.4em;
+}
+
 <div
-  class="emotion-2"
+  class="emotion-4"
 >
   <div
     class="emotion-0"
@@ -1705,13 +1853,18 @@ exports[`Storyshots Basics|Placeholder twoChildren 1`] = `
     This has two children, the first bold
   </div>
   <div
-    class="emotion-1"
+    class="emotion-3"
   >
     The second normal weight. Here's a 
     <a
+      class="emotion-2"
       href="https://storybook.js.org"
     >
-      link
+      <span
+        class="emotion-1"
+      >
+        link
+      </span>
     </a>
   </div>
 </div>
@@ -1746,43 +1899,6 @@ 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 {
@@ -1796,6 +1912,10 @@ exports[`Storyshots Core|Events Force re-render 1`] = `
   pointer-events: none;
 }
 
+.emotion-0 svg path {
+  fill: currentColor;
+}
+
 .emotion-0 {
   border: 0;
   border-radius: 3em;
@@ -1824,43 +1944,6 @@ 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 {
@@ -1874,6 +1957,10 @@ exports[`Storyshots Core|Events Force re-render 1`] = `
   pointer-events: none;
 }
 
+.emotion-0 svg path {
+  fill: currentColor;
+}
+
 <button
   class="emotion-0"
 >
@@ -2067,9 +2154,9 @@ exports[`Storyshots UI|Notifications/NotificationItem longText 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 16px;
-  background-color: rgba(50,53,71,0.97);
   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);
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -2081,9 +2168,9 @@ exports[`Storyshots UI|Notifications/NotificationItem longText 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 16px;
-  background-color: rgba(50,53,71,0.97);
   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);
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -2111,9 +2198,9 @@ exports[`Storyshots UI|Notifications/NotificationItem simple 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 16px;
-  background-color: rgba(50,53,71,0.97);
   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);
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -2125,9 +2212,9 @@ exports[`Storyshots UI|Notifications/NotificationItem simple 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 16px;
-  background-color: rgba(50,53,71,0.97);
   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);
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -2155,9 +2242,9 @@ exports[`Storyshots UI|Notifications/NotificationItem withLink 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 16px;
-  background-color: rgba(50,53,71,0.97);
   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);
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -2169,9 +2256,9 @@ exports[`Storyshots UI|Notifications/NotificationItem withLink 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 16px;
-  background-color: rgba(50,53,71,0.97);
   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);
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -2200,9 +2287,9 @@ exports[`Storyshots UI|Notifications/NotificationList all 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 16px;
-  background-color: rgba(50,53,71,0.97);
   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);
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -2222,9 +2309,9 @@ exports[`Storyshots UI|Notifications/NotificationList all 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 16px;
-  background-color: rgba(50,53,71,0.97);
   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);
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -2309,9 +2396,9 @@ exports[`Storyshots UI|Notifications/NotificationList single 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 16px;
-  background-color: rgba(50,53,71,0.97);
   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);
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -2331,9 +2418,9 @@ exports[`Storyshots UI|Notifications/NotificationList single 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 16px;
-  background-color: rgba(50,53,71,0.97);
   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);
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -3025,16 +3112,11 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   border-radius: 4px;
+  display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -3043,38 +3125,6 @@ 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;
@@ -3087,23 +3137,19 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
 }
 
 .emotion-88 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-88:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-88:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-88:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-88:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-88:hover {
@@ -3532,16 +3578,11 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   border-radius: 4px;
+  display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -3550,38 +3591,6 @@ 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;
@@ -3594,23 +3603,19 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
 }
 
 .emotion-88 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-88:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-88:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-88:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-88:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-88:hover {
@@ -4120,13 +4125,15 @@ 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: #999999;
+  color: rgba(51,51,51,0.5);
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -4146,10 +4153,6 @@ exports[`Storyshots UI|Sidebar/ListItemIcon all 1`] = `
   align-items: center;
 }
 
-.emotion-5 + .emotion-5 {
-  border-top: 1px solid #EEEEEE;
-}
-
 .emotion-5 > * + * {
   padding-left: 10px;
 }
@@ -4192,7 +4195,7 @@ exports[`Storyshots UI|Sidebar/ListItemIcon all 1`] = `
 }
 
 .emotion-3 {
-  color: #444444;
+  color: #333333;
 }
 
 .emotion-6 {
@@ -4209,13 +4212,15 @@ 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: #999999;
+  color: rgba(51,51,51,0.5);
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -4235,10 +4240,6 @@ exports[`Storyshots UI|Sidebar/ListItemIcon all 1`] = `
   align-items: center;
 }
 
-.emotion-5 + .emotion-5 {
-  border-top: 1px solid #EEEEEE;
-}
-
 .emotion-5 > * + * {
   padding-left: 10px;
 }
@@ -4281,7 +4282,7 @@ exports[`Storyshots UI|Sidebar/ListItemIcon all 1`] = `
 }
 
 .emotion-3 {
-  color: #444444;
+  color: #333333;
 }
 
 .emotion-6 {
@@ -4426,9 +4427,9 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 16px;
-  background-color: rgba(50,53,71,0.97);
   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);
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -4475,6 +4476,14 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
   font-weight: 700;
 }
 
+.emotion-2 > * {
+  max-height: 32px;
+  max-width: 200px;
+  height: auto;
+  width: auto;
+  display: block;
+}
+
 .emotion-1 {
   display: block;
   color: inherit;
@@ -4538,51 +4547,14 @@ 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: #DDDDDD 0 0 0 1px inset;
-  color: #666666;
+  box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
+  color: rgba(51,51,51,0.7);
   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;
@@ -4594,23 +4566,22 @@ 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: #999999 0 0 0 1px inset;
+  box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
 }
 
 .emotion-5:active {
-  background: #DDDDDD;
-  box-shadow: #DDDDDD 0 0 0 1px inset;
-  color: #333333;
+  box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
+  color: #333;
 }
 
 .emotion-8 {
@@ -4620,7 +4591,7 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -4861,9 +4832,9 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 16px;
-  background-color: rgba(50,53,71,0.97);
   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);
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -4910,6 +4881,14 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
   font-weight: 700;
 }
 
+.emotion-2 > * {
+  max-height: 32px;
+  max-width: 200px;
+  height: auto;
+  width: auto;
+  display: block;
+}
+
 .emotion-1 {
   display: block;
   color: inherit;
@@ -4973,51 +4952,14 @@ 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: #DDDDDD 0 0 0 1px inset;
-  color: #666666;
+  box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
+  color: rgba(51,51,51,0.7);
   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;
@@ -5029,23 +4971,22 @@ 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: #999999 0 0 0 1px inset;
+  box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
 }
 
 .emotion-5:active {
-  background: #DDDDDD;
-  box-shadow: #DDDDDD 0 0 0 1px inset;
-  color: #333333;
+  box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
+  color: #333;
 }
 
 .emotion-8 {
@@ -5055,7 +4996,7 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -5269,7 +5210,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="#333"
+              fill="currentColor"
             />
             <mask
               fill="#fff"
@@ -5690,9 +5631,9 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 16px;
-  background-color: rgba(50,53,71,0.97);
   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);
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -5739,6 +5680,14 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   font-weight: 700;
 }
 
+.emotion-2 > * {
+  max-height: 32px;
+  max-width: 200px;
+  height: auto;
+  width: auto;
+  display: block;
+}
+
 .emotion-1 {
   display: block;
   color: inherit;
@@ -5802,51 +5751,14 @@ 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: #DDDDDD 0 0 0 1px inset;
-  color: #666666;
+  box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
+  color: rgba(51,51,51,0.7);
   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;
@@ -5858,23 +5770,22 @@ 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: #999999 0 0 0 1px inset;
+  box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
 }
 
 .emotion-5:active {
-  background: #DDDDDD;
-  box-shadow: #DDDDDD 0 0 0 1px inset;
-  color: #333333;
+  box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
+  color: #333;
 }
 
 .emotion-14 {
@@ -5913,7 +5824,8 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
 .emotion-14 > svg path {
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
-  fill: #999999;
+  fill: currentColor;
+  opacity: 0.3;
 }
 
 .emotion-8 {
@@ -5979,7 +5891,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   display: block;
   height: 8px;
   width: 8px;
-  color: #666666;
+  color: #333333;
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
 }
@@ -5988,10 +5900,6 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   background: rgba(0,0,0,0.2);
 }
 
-.emotion-13:hover > svg {
-  color: #444444;
-}
-
 .emotion-32 + section {
   margin-top: 20px;
 }
@@ -6006,10 +5914,10 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   -ms-letter-spacing: 0.35em;
   letter-spacing: 0.35em;
   text-transform: uppercase;
-  font-weight: 700;
+  font-weight: 900;
   font-size: 11px;
   line-height: 24px;
-  color: #999999;
+  color: rgba(51,51,51,0.5);
   margin: 0 20px;
 }
 
@@ -6046,9 +5954,11 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   transition: background 75ms ease-out;
   padding-left: 9px;
   cursor: pointer;
+  color: #333333;
 }
 
 .emotion-19:hover {
+  color: #333333;
   background: rgba(0,0,0,.05);
 }
 
@@ -6059,7 +5969,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -6107,6 +6017,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   cursor: default;
   background: #1EA7FD;
   color: #FFFFFF;
+  font-weight: 700;
 }
 
 .emotion-21 {
@@ -6116,7 +6027,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -6161,9 +6072,11 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   transition: background 75ms ease-out;
   padding-left: 24px;
   cursor: pointer;
+  color: #333333;
 }
 
 .emotion-29:hover {
+  color: #333333;
   background: rgba(0,0,0,.05);
 }
 
@@ -6189,7 +6102,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -6246,9 +6159,9 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   font-size: 12px;
   font-weight: 700;
   line-height: 16px;
-  background-color: rgba(50,53,71,0.97);
   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);
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -6295,6 +6208,14 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   font-weight: 700;
 }
 
+.emotion-2 > * {
+  max-height: 32px;
+  max-width: 200px;
+  height: auto;
+  width: auto;
+  display: block;
+}
+
 .emotion-1 {
   display: block;
   color: inherit;
@@ -6358,51 +6279,14 @@ 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: #DDDDDD 0 0 0 1px inset;
-  color: #666666;
+  box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
+  color: rgba(51,51,51,0.7);
   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;
@@ -6414,23 +6298,22 @@ 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: #999999 0 0 0 1px inset;
+  box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
 }
 
 .emotion-5:active {
-  background: #DDDDDD;
-  box-shadow: #DDDDDD 0 0 0 1px inset;
-  color: #333333;
+  box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
+  color: #333;
 }
 
 .emotion-14 {
@@ -6469,7 +6352,8 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
 .emotion-14 > svg path {
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
-  fill: #999999;
+  fill: currentColor;
+  opacity: 0.3;
 }
 
 .emotion-8 {
@@ -6535,7 +6419,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   display: block;
   height: 8px;
   width: 8px;
-  color: #666666;
+  color: #333333;
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
 }
@@ -6544,10 +6428,6 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   background: rgba(0,0,0,0.2);
 }
 
-.emotion-13:hover > svg {
-  color: #444444;
-}
-
 .emotion-32 + section {
   margin-top: 20px;
 }
@@ -6562,10 +6442,10 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   -ms-letter-spacing: 0.35em;
   letter-spacing: 0.35em;
   text-transform: uppercase;
-  font-weight: 700;
+  font-weight: 900;
   font-size: 11px;
   line-height: 24px;
-  color: #999999;
+  color: rgba(51,51,51,0.5);
   margin: 0 20px;
 }
 
@@ -6602,9 +6482,11 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   transition: background 75ms ease-out;
   padding-left: 9px;
   cursor: pointer;
+  color: #333333;
 }
 
 .emotion-19:hover {
+  color: #333333;
   background: rgba(0,0,0,.05);
 }
 
@@ -6615,7 +6497,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -6663,6 +6545,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   cursor: default;
   background: #1EA7FD;
   color: #FFFFFF;
+  font-weight: 700;
 }
 
 .emotion-21 {
@@ -6672,7 +6555,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -6717,9 +6600,11 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   transition: background 75ms ease-out;
   padding-left: 24px;
   cursor: pointer;
+  color: #333333;
 }
 
 .emotion-29:hover {
+  color: #333333;
   background: rgba(0,0,0,.05);
 }
 
@@ -6745,7 +6630,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -6815,7 +6700,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="#333"
+              fill="currentColor"
             />
             <mask
               fill="#fff"
@@ -7112,6 +6997,14 @@ exports[`Storyshots UI|Sidebar/SidebarHeading customBrand 1`] = `
   font-weight: 700;
 }
 
+.emotion-0 > * {
+  max-height: 32px;
+  max-width: 200px;
+  height: auto;
+  width: auto;
+  display: block;
+}
+
 .emotion-4 {
   display: inline-block;
   cursor: pointer;
@@ -7145,51 +7038,14 @@ 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: #DDDDDD 0 0 0 1px inset;
-  color: #666666;
+  box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
+  color: rgba(51,51,51,0.7);
   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;
@@ -7201,23 +7057,22 @@ 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: #999999 0 0 0 1px inset;
+  box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
 }
 
 .emotion-3:active {
-  background: #DDDDDD;
-  box-shadow: #DDDDDD 0 0 0 1px inset;
-  color: #333333;
+  box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
+  color: #333;
 }
 
 .emotion-5 {
@@ -7252,6 +7107,14 @@ exports[`Storyshots UI|Sidebar/SidebarHeading customBrand 1`] = `
   font-weight: 700;
 }
 
+.emotion-0 > * {
+  max-height: 32px;
+  max-width: 200px;
+  height: auto;
+  width: auto;
+  display: block;
+}
+
 .emotion-4 {
   display: inline-block;
   cursor: pointer;
@@ -7285,51 +7148,14 @@ 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: #DDDDDD 0 0 0 1px inset;
-  color: #666666;
+  box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
+  color: rgba(51,51,51,0.7);
   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;
@@ -7341,23 +7167,22 @@ 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: #999999 0 0 0 1px inset;
+  box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
 }
 
 .emotion-3:active {
-  background: #DDDDDD;
-  box-shadow: #DDDDDD 0 0 0 1px inset;
-  color: #333333;
+  box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
+  color: #333;
 }
 
 .emotion-5 {
@@ -7381,7 +7206,64 @@ exports[`Storyshots UI|Sidebar/SidebarHeading customBrand 1`] = `
   <div
     class="emotion-0"
   >
-    custom brand
+    
+
+    <svg
+      height="64px"
+      version="1.1"
+      viewBox="0 0 64 64"
+      width="64px"
+      xlink="http://www.w3.org/1999/xlink"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      
+  
+      <a
+        href="https://storybook.js.org"
+      >
+        
+    
+        <g
+          fill="none"
+          fill-rule="evenodd"
+          id="Artboard"
+          stroke="none"
+          stroke-width="1"
+        >
+          
+      
+          <path
+            d="M8.04798541,58.7875918 L6.07908839,6.32540407 C6.01406344,4.5927838 7.34257463,3.12440831 9.07303814,3.01625434 L53.6958037,0.227331489 C55.457209,0.117243658 56.974354,1.45590096 57.0844418,3.21730626 C57.0885895,3.28366922 57.0906648,3.35014546 57.0906648,3.41663791 L57.0906648,60.5834697 C57.0906648,62.3483119 55.6599776,63.7789992 53.8951354,63.7789992 C53.847325,63.7789992 53.7995207,63.7779262 53.7517585,63.775781 L11.0978899,61.8600599 C9.43669044,61.7854501 8.11034889,60.4492961 8.04798541,58.7875918 Z"
+            fill="#FF4785"
+            fill-rule="nonzero"
+            id="path-1"
+          />
+          
+      
+          <path
+            d="M35.9095005,24.1768792 C35.9095005,25.420127 44.2838488,24.8242707 45.4080313,23.9509748 C45.4080313,15.4847538 40.8652557,11.0358878 32.5466666,11.0358878 C24.2280775,11.0358878 19.5673077,15.553972 19.5673077,22.3311017 C19.5673077,34.1346028 35.4965208,34.3605071 35.4965208,40.7987804 C35.4965208,42.606015 34.6115646,43.6790606 32.6646607,43.6790606 C30.127786,43.6790606 29.1248356,42.3834613 29.2428298,37.9783269 C29.2428298,37.0226907 19.5673077,36.7247626 19.2723223,37.9783269 C18.5211693,48.6535354 25.1720308,51.7326752 32.7826549,51.7326752 C40.1572906,51.7326752 45.939005,47.8018145 45.939005,40.6858282 C45.939005,28.035186 29.7738035,28.3740425 29.7738035,22.1051974 C29.7738035,19.5637737 31.6617103,19.2249173 32.7826549,19.2249173 C33.9625966,19.2249173 36.0864917,19.4328883 35.9095005,24.1768792 Z"
+            fill="#FFFFFF"
+            fill-rule="nonzero"
+            id="path9_fill-path"
+          />
+          
+      
+          <path
+            d="M44.0461638,0.830433986 L50.1874092,0.446606143 L50.443532,7.7810017 C50.4527198,8.04410717 50.2468789,8.26484453 49.9837734,8.27403237 C49.871115,8.27796649 49.7607078,8.24184808 49.6721567,8.17209069 L47.3089847,6.3104681 L44.5110468,8.43287463 C44.3012992,8.591981 44.0022839,8.55092814 43.8431776,8.34118051 C43.7762017,8.25288717 43.742082,8.14401677 43.7466857,8.03329059 L44.0461638,0.830433986 Z"
+            fill="#FFFFFF"
+            id="Path"
+          />
+          
+    
+        </g>
+        
+  
+      </a>
+      
+
+    </svg>
+    
+
   </div>
   <div
     class="emotion-4"
@@ -7421,6 +7303,14 @@ exports[`Storyshots UI|Sidebar/SidebarHeading menuHighlighted 1`] = `
   font-weight: 700;
 }
 
+.emotion-2 > * {
+  max-height: 32px;
+  max-width: 200px;
+  height: auto;
+  width: auto;
+  display: block;
+}
+
 .emotion-1 {
   display: block;
   color: inherit;
@@ -7499,51 +7389,14 @@ 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: #DDDDDD 0 0 0 1px inset;
-  color: #666666;
+  box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
+  color: rgba(51,51,51,0.7);
   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;
@@ -7555,23 +7408,22 @@ 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: #999999 0 0 0 1px inset;
+  box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
 }
 
 .emotion-5:active {
-  background: #DDDDDD;
-  box-shadow: #DDDDDD 0 0 0 1px inset;
-  color: #333333;
+  box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
+  color: #333;
 }
 
 .emotion-5:after {
@@ -7602,6 +7454,14 @@ exports[`Storyshots UI|Sidebar/SidebarHeading menuHighlighted 1`] = `
   font-weight: 700;
 }
 
+.emotion-2 > * {
+  max-height: 32px;
+  max-width: 200px;
+  height: auto;
+  width: auto;
+  display: block;
+}
+
 .emotion-1 {
   display: block;
   color: inherit;
@@ -7680,51 +7540,14 @@ 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: #DDDDDD 0 0 0 1px inset;
-  color: #666666;
+  box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
+  color: rgba(51,51,51,0.7);
   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;
@@ -7736,23 +7559,22 @@ 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: #999999 0 0 0 1px inset;
+  box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
 }
 
 .emotion-5:active {
-  background: #DDDDDD;
-  box-shadow: #DDDDDD 0 0 0 1px inset;
-  color: #333333;
+  box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
+  color: #333;
 }
 
 .emotion-5:after {
@@ -7795,7 +7617,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="#333"
+            fill="currentColor"
           />
           <mask
             fill="#fff"
@@ -7858,6 +7680,14 @@ exports[`Storyshots UI|Sidebar/SidebarHeading simple 1`] = `
   font-weight: 700;
 }
 
+.emotion-2 > * {
+  max-height: 32px;
+  max-width: 200px;
+  height: auto;
+  width: auto;
+  display: block;
+}
+
 .emotion-1 {
   display: block;
   color: inherit;
@@ -7921,51 +7751,14 @@ 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: #DDDDDD 0 0 0 1px inset;
-  color: #666666;
+  box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
+  color: rgba(51,51,51,0.7);
   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;
@@ -7977,23 +7770,22 @@ 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: #999999 0 0 0 1px inset;
+  box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
 }
 
 .emotion-5:active {
-  background: #DDDDDD;
-  box-shadow: #DDDDDD 0 0 0 1px inset;
-  color: #333333;
+  box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
+  color: #333;
 }
 
 .emotion-7 {
@@ -8028,6 +7820,14 @@ exports[`Storyshots UI|Sidebar/SidebarHeading simple 1`] = `
   font-weight: 700;
 }
 
+.emotion-2 > * {
+  max-height: 32px;
+  max-width: 200px;
+  height: auto;
+  width: auto;
+  display: block;
+}
+
 .emotion-1 {
   display: block;
   color: inherit;
@@ -8091,51 +7891,14 @@ 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: #DDDDDD 0 0 0 1px inset;
-  color: #666666;
+  box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
+  color: rgba(51,51,51,0.7);
   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;
@@ -8147,23 +7910,22 @@ 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: #999999 0 0 0 1px inset;
+  box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
 }
 
 .emotion-5:active {
-  background: #DDDDDD;
-  box-shadow: #DDDDDD 0 0 0 1px inset;
-  color: #333333;
+  box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
+  color: #333;
 }
 
 .emotion-7 {
@@ -8210,7 +7972,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="#333"
+            fill="currentColor"
           />
           <mask
             fill="#fff"
@@ -8282,9 +8044,11 @@ exports[`Storyshots UI|Sidebar/SidebarItem component 1`] = `
   transition: background 75ms ease-out;
   padding-left: 9px;
   cursor: pointer;
+  color: #333333;
 }
 
 .emotion-3:hover {
+  color: #333333;
   background: rgba(0,0,0,.05);
 }
 
@@ -8310,7 +8074,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem component 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -8342,9 +8106,11 @@ exports[`Storyshots UI|Sidebar/SidebarItem component 1`] = `
   transition: background 75ms ease-out;
   padding-left: 9px;
   cursor: pointer;
+  color: #333333;
 }
 
 .emotion-3:hover {
+  color: #333333;
   background: rgba(0,0,0,.05);
 }
 
@@ -8370,7 +8136,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem component 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -8428,9 +8194,11 @@ exports[`Storyshots UI|Sidebar/SidebarItem componentExpanded 1`] = `
   transition: background 75ms ease-out;
   padding-left: 9px;
   cursor: pointer;
+  color: #333333;
 }
 
 .emotion-3:hover {
+  color: #333333;
   background: rgba(0,0,0,.05);
 }
 
@@ -8441,7 +8209,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem componentExpanded 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -8491,9 +8259,11 @@ exports[`Storyshots UI|Sidebar/SidebarItem componentExpanded 1`] = `
   transition: background 75ms ease-out;
   padding-left: 9px;
   cursor: pointer;
+  color: #333333;
 }
 
 .emotion-3:hover {
+  color: #333333;
   background: rgba(0,0,0,.05);
 }
 
@@ -8504,7 +8274,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem componentExpanded 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -8580,9 +8350,11 @@ exports[`Storyshots UI|Sidebar/SidebarItem group 1`] = `
   transition: background 75ms ease-out;
   padding-left: 9px;
   cursor: pointer;
+  color: #333333;
 }
 
 .emotion-3:hover {
+  color: #333333;
   background: rgba(0,0,0,.05);
 }
 
@@ -8593,7 +8365,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem group 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -8640,9 +8412,11 @@ exports[`Storyshots UI|Sidebar/SidebarItem group 1`] = `
   transition: background 75ms ease-out;
   padding-left: 9px;
   cursor: pointer;
+  color: #333333;
 }
 
 .emotion-3:hover {
+  color: #333333;
   background: rgba(0,0,0,.05);
 }
 
@@ -8653,7 +8427,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem group 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -8751,7 +8525,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem loading 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -8858,7 +8632,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem loading 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -8966,9 +8740,11 @@ exports[`Storyshots UI|Sidebar/SidebarItem nestedDepths 1`] = `
   transition: background 75ms ease-out;
   padding-left: 9px;
   cursor: pointer;
+  color: #333333;
 }
 
 .emotion-3:hover {
+  color: #333333;
   background: rgba(0,0,0,.05);
 }
 
@@ -8979,7 +8755,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem nestedDepths 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -9010,7 +8786,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem nestedDepths 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -9039,9 +8815,11 @@ exports[`Storyshots UI|Sidebar/SidebarItem nestedDepths 1`] = `
   transition: background 75ms ease-out;
   padding-left: 24px;
   cursor: pointer;
+  color: #333333;
 }
 
 .emotion-11:hover {
+  color: #333333;
   background: rgba(0,0,0,.05);
 }
 
@@ -9067,7 +8845,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem nestedDepths 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -9110,9 +8888,11 @@ exports[`Storyshots UI|Sidebar/SidebarItem nestedDepths 1`] = `
   transition: background 75ms ease-out;
   padding-left: 39px;
   cursor: pointer;
+  color: #333333;
 }
 
 .emotion-15:hover {
+  color: #333333;
   background: rgba(0,0,0,.05);
 }
 
@@ -9138,9 +8918,11 @@ exports[`Storyshots UI|Sidebar/SidebarItem nestedDepths 1`] = `
   transition: background 75ms ease-out;
   padding-left: 54px;
   cursor: pointer;
+  color: #333333;
 }
 
 .emotion-19:hover {
+  color: #333333;
   background: rgba(0,0,0,.05);
 }
 
@@ -9170,9 +8952,11 @@ exports[`Storyshots UI|Sidebar/SidebarItem nestedDepths 1`] = `
   transition: background 75ms ease-out;
   padding-left: 9px;
   cursor: pointer;
+  color: #333333;
 }
 
 .emotion-3:hover {
+  color: #333333;
   background: rgba(0,0,0,.05);
 }
 
@@ -9183,7 +8967,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem nestedDepths 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -9214,7 +8998,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem nestedDepths 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -9243,9 +9027,11 @@ exports[`Storyshots UI|Sidebar/SidebarItem nestedDepths 1`] = `
   transition: background 75ms ease-out;
   padding-left: 24px;
   cursor: pointer;
+  color: #333333;
 }
 
 .emotion-11:hover {
+  color: #333333;
   background: rgba(0,0,0,.05);
 }
 
@@ -9271,7 +9057,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem nestedDepths 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -9314,9 +9100,11 @@ exports[`Storyshots UI|Sidebar/SidebarItem nestedDepths 1`] = `
   transition: background 75ms ease-out;
   padding-left: 39px;
   cursor: pointer;
+  color: #333333;
 }
 
 .emotion-15:hover {
+  color: #333333;
   background: rgba(0,0,0,.05);
 }
 
@@ -9342,9 +9130,11 @@ exports[`Storyshots UI|Sidebar/SidebarItem nestedDepths 1`] = `
   transition: background 75ms ease-out;
   padding-left: 54px;
   cursor: pointer;
+  color: #333333;
 }
 
 .emotion-19:hover {
+  color: #333333;
   background: rgba(0,0,0,.05);
 }
 
@@ -9478,9 +9268,11 @@ exports[`Storyshots UI|Sidebar/SidebarItem story 1`] = `
   transition: background 75ms ease-out;
   padding-left: 9px;
   cursor: pointer;
+  color: #333333;
 }
 
 .emotion-3:hover {
+  color: #333333;
   background: rgba(0,0,0,.05);
 }
 
@@ -9491,7 +9283,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem story 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -9539,9 +9331,11 @@ exports[`Storyshots UI|Sidebar/SidebarItem story 1`] = `
   transition: background 75ms ease-out;
   padding-left: 9px;
   cursor: pointer;
+  color: #333333;
 }
 
 .emotion-3:hover {
+  color: #333333;
   background: rgba(0,0,0,.05);
 }
 
@@ -9552,7 +9346,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem story 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -9611,7 +9405,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem storySelected 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -9658,6 +9452,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem storySelected 1`] = `
   cursor: default;
   background: #1EA7FD;
   color: #FFFFFF;
+  font-weight: 700;
 }
 
 .emotion-1 {
@@ -9671,7 +9466,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem storySelected 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -9718,6 +9513,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem storySelected 1`] = `
   cursor: default;
   background: #1EA7FD;
   color: #FFFFFF;
+  font-weight: 700;
 }
 
 <div
@@ -9772,9 +9568,11 @@ exports[`Storyshots UI|Sidebar/SidebarItem with long name 1`] = `
   transition: background 75ms ease-out;
   padding-left: 9px;
   cursor: pointer;
+  color: #333333;
 }
 
 .emotion-3:hover {
+  color: #333333;
   background: rgba(0,0,0,.05);
 }
 
@@ -9800,7 +9598,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem with long name 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -9832,9 +9630,11 @@ exports[`Storyshots UI|Sidebar/SidebarItem with long name 1`] = `
   transition: background 75ms ease-out;
   padding-left: 9px;
   cursor: pointer;
+  color: #333333;
 }
 
 .emotion-3:hover {
+  color: #333333;
   background: rgba(0,0,0,.05);
 }
 
@@ -9860,7 +9660,7 @@ exports[`Storyshots UI|Sidebar/SidebarItem with long name 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -9967,7 +9767,7 @@ exports[`Storyshots UI|Sidebar/SidebarSearch filledIn 1`] = `
   display: block;
   height: 8px;
   width: 8px;
-  color: #666666;
+  color: #333333;
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
 }
@@ -9976,15 +9776,11 @@ exports[`Storyshots UI|Sidebar/SidebarSearch filledIn 1`] = `
   background: rgba(0,0,0,0.2);
 }
 
-.emotion-5:hover > svg {
-  color: #444444;
-}
-
 .emotion-6 {
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
   border-bottom: 1px solid transparent;
-  border-bottom-color: #666666;
+  border-bottom-color: rgba(0,0,0,0.4);
   outline: 0;
   position: relative;
 }
@@ -10015,7 +9811,8 @@ exports[`Storyshots UI|Sidebar/SidebarSearch filledIn 1`] = `
 .emotion-6 > svg path {
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
-  fill: #666666;
+  fill: currentColor;
+  opacity: 1;
 }
 
 .emotion-2 {
@@ -10093,7 +9890,7 @@ exports[`Storyshots UI|Sidebar/SidebarSearch filledIn 1`] = `
   display: block;
   height: 8px;
   width: 8px;
-  color: #666666;
+  color: #333333;
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
 }
@@ -10102,15 +9899,11 @@ exports[`Storyshots UI|Sidebar/SidebarSearch filledIn 1`] = `
   background: rgba(0,0,0,0.2);
 }
 
-.emotion-5:hover > svg {
-  color: #444444;
-}
-
 .emotion-6 {
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
   border-bottom: 1px solid transparent;
-  border-bottom-color: #666666;
+  border-bottom-color: rgba(0,0,0,0.4);
   outline: 0;
   position: relative;
 }
@@ -10141,11 +9934,12 @@ exports[`Storyshots UI|Sidebar/SidebarSearch filledIn 1`] = `
 .emotion-6 > svg path {
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
-  fill: #666666;
+  fill: currentColor;
+  opacity: 1;
 }
 
 <div
-  style="width:240px;margin:1rem;padding:1rem;background:white"
+  style="width:240px;margin:1rem;padding:1rem;background:#999"
 >
   <form
     autocomplete="off"
@@ -10262,7 +10056,7 @@ exports[`Storyshots UI|Sidebar/SidebarSearch focussed 1`] = `
   display: block;
   height: 8px;
   width: 8px;
-  color: #666666;
+  color: #333333;
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
 }
@@ -10271,15 +10065,11 @@ exports[`Storyshots UI|Sidebar/SidebarSearch focussed 1`] = `
   background: rgba(0,0,0,0.2);
 }
 
-.emotion-5:hover > svg {
-  color: #444444;
-}
-
 .emotion-6 {
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
   border-bottom: 1px solid transparent;
-  border-bottom-color: #666666;
+  border-bottom-color: rgba(0,0,0,0.4);
   outline: 0;
   position: relative;
 }
@@ -10310,7 +10100,8 @@ exports[`Storyshots UI|Sidebar/SidebarSearch focussed 1`] = `
 .emotion-6 > svg path {
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
-  fill: #666666;
+  fill: currentColor;
+  opacity: 1;
 }
 
 .emotion-2 {
@@ -10388,7 +10179,7 @@ exports[`Storyshots UI|Sidebar/SidebarSearch focussed 1`] = `
   display: block;
   height: 8px;
   width: 8px;
-  color: #666666;
+  color: #333333;
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
 }
@@ -10397,15 +10188,11 @@ exports[`Storyshots UI|Sidebar/SidebarSearch focussed 1`] = `
   background: rgba(0,0,0,0.2);
 }
 
-.emotion-5:hover > svg {
-  color: #444444;
-}
-
 .emotion-6 {
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
   border-bottom: 1px solid transparent;
-  border-bottom-color: #666666;
+  border-bottom-color: rgba(0,0,0,0.4);
   outline: 0;
   position: relative;
 }
@@ -10436,11 +10223,12 @@ exports[`Storyshots UI|Sidebar/SidebarSearch focussed 1`] = `
 .emotion-6 > svg path {
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
-  fill: #666666;
+  fill: currentColor;
+  opacity: 1;
 }
 
 <div
-  style="width:240px;margin:1rem;padding:1rem;background:white"
+  style="width:240px;margin:1rem;padding:1rem;background:#999"
 >
   <form
     autocomplete="off"
@@ -10556,7 +10344,7 @@ exports[`Storyshots UI|Sidebar/SidebarSearch simple 1`] = `
   display: block;
   height: 8px;
   width: 8px;
-  color: #666666;
+  color: #333333;
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
 }
@@ -10565,10 +10353,6 @@ exports[`Storyshots UI|Sidebar/SidebarSearch simple 1`] = `
   background: rgba(0,0,0,0.2);
 }
 
-.emotion-5:hover > svg {
-  color: #444444;
-}
-
 .emotion-6 {
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
@@ -10604,7 +10388,8 @@ exports[`Storyshots UI|Sidebar/SidebarSearch simple 1`] = `
 .emotion-6 > svg path {
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
-  fill: #999999;
+  fill: currentColor;
+  opacity: 0.3;
 }
 
 .emotion-2 {
@@ -10682,7 +10467,7 @@ exports[`Storyshots UI|Sidebar/SidebarSearch simple 1`] = `
   display: block;
   height: 8px;
   width: 8px;
-  color: #666666;
+  color: #333333;
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
 }
@@ -10691,10 +10476,6 @@ exports[`Storyshots UI|Sidebar/SidebarSearch simple 1`] = `
   background: rgba(0,0,0,0.2);
 }
 
-.emotion-5:hover > svg {
-  color: #444444;
-}
-
 .emotion-6 {
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
@@ -10730,11 +10511,12 @@ exports[`Storyshots UI|Sidebar/SidebarSearch simple 1`] = `
 .emotion-6 > svg path {
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
-  fill: #999999;
+  fill: currentColor;
+  opacity: 0.3;
 }
 
 <div
-  style="width:240px;margin:1rem;padding:1rem;background:white"
+  style="width:240px;margin:1rem;padding:1rem;background:#999"
 >
   <form
     autocomplete="off"
@@ -10778,7 +10560,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories empty 1`] = `
 .emotion-4 {
   padding: 30px;
   text-align: center;
-  color: #666666;
+  color: #333333;
   font-size: 13px;
 }
 
@@ -10845,7 +10627,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories empty 1`] = `
 .emotion-4 {
   padding: 30px;
   text-align: center;
-  color: #666666;
+  color: #333333;
   font-size: 13px;
 }
 
@@ -10996,7 +10778,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -11216,7 +10998,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -11767,7 +11549,8 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
 .emotion-6 > svg path {
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
-  fill: #999999;
+  fill: currentColor;
+  opacity: 0.3;
 }
 
 .emotion-0 {
@@ -11833,7 +11616,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
   display: block;
   height: 8px;
   width: 8px;
-  color: #666666;
+  color: #333333;
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
 }
@@ -11842,10 +11625,6 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
   background: rgba(0,0,0,0.2);
 }
 
-.emotion-5:hover > svg {
-  color: #444444;
-}
-
 .emotion-39 + section {
   margin-top: 20px;
 }
@@ -11887,9 +11666,11 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
   transition: background 75ms ease-out;
   padding-left: 9px;
   cursor: pointer;
+  color: #333333;
 }
 
 .emotion-10:hover {
+  color: #333333;
   background: rgba(0,0,0,.05);
 }
 
@@ -11900,7 +11681,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -11931,7 +11712,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -11976,9 +11757,11 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
   transition: background 75ms ease-out;
   padding-left: 24px;
   cursor: pointer;
+  color: #333333;
 }
 
 .emotion-15:hover {
+  color: #333333;
   background: rgba(0,0,0,.05);
 }
 
@@ -12004,7 +11787,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -12047,9 +11830,11 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
   transition: background 75ms ease-out;
   padding-left: 39px;
   cursor: pointer;
+  color: #333333;
 }
 
 .emotion-30:hover {
+  color: #333333;
   background: rgba(0,0,0,.05);
 }
 
@@ -12085,6 +11870,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
   cursor: default;
   background: #1EA7FD;
   color: #FFFFFF;
+  font-weight: 700;
 }
 
 .emotion-2 {
@@ -12135,7 +11921,8 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
 .emotion-6 > svg path {
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
-  fill: #999999;
+  fill: currentColor;
+  opacity: 0.3;
 }
 
 .emotion-0 {
@@ -12201,7 +11988,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
   display: block;
   height: 8px;
   width: 8px;
-  color: #666666;
+  color: #333333;
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
 }
@@ -12210,10 +11997,6 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
   background: rgba(0,0,0,0.2);
 }
 
-.emotion-5:hover > svg {
-  color: #444444;
-}
-
 .emotion-39 + section {
   margin-top: 20px;
 }
@@ -12255,9 +12038,11 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
   transition: background 75ms ease-out;
   padding-left: 9px;
   cursor: pointer;
+  color: #333333;
 }
 
 .emotion-10:hover {
+  color: #333333;
   background: rgba(0,0,0,.05);
 }
 
@@ -12268,7 +12053,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -12299,7 +12084,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -12344,9 +12129,11 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
   transition: background 75ms ease-out;
   padding-left: 24px;
   cursor: pointer;
+  color: #333333;
 }
 
 .emotion-15:hover {
+  color: #333333;
   background: rgba(0,0,0,.05);
 }
 
@@ -12372,7 +12159,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -12415,9 +12202,11 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
   transition: background 75ms ease-out;
   padding-left: 39px;
   cursor: pointer;
+  color: #333333;
 }
 
 .emotion-30:hover {
+  color: #333333;
   background: rgba(0,0,0,.05);
 }
 
@@ -12453,6 +12242,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
   cursor: default;
   background: #1EA7FD;
   color: #FFFFFF;
+  font-weight: 700;
 }
 
 <div
@@ -12720,7 +12510,8 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
 .emotion-6 > svg path {
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
-  fill: #999999;
+  fill: currentColor;
+  opacity: 0.3;
 }
 
 .emotion-0 {
@@ -12786,7 +12577,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
   display: block;
   height: 8px;
   width: 8px;
-  color: #666666;
+  color: #333333;
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
 }
@@ -12795,10 +12586,6 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
   background: rgba(0,0,0,0.2);
 }
 
-.emotion-5:hover > svg {
-  color: #444444;
-}
-
 .emotion-24 + section {
   margin-top: 20px;
 }
@@ -12813,10 +12600,10 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
   -ms-letter-spacing: 0.35em;
   letter-spacing: 0.35em;
   text-transform: uppercase;
-  font-weight: 700;
+  font-weight: 900;
   font-size: 11px;
   line-height: 24px;
-  color: #999999;
+  color: rgba(51,51,51,0.5);
   margin: 0 20px;
 }
 
@@ -12853,9 +12640,11 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
   transition: background 75ms ease-out;
   padding-left: 9px;
   cursor: pointer;
+  color: #333333;
 }
 
 .emotion-11:hover {
+  color: #333333;
   background: rgba(0,0,0,.05);
 }
 
@@ -12866,7 +12655,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -12914,6 +12703,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
   cursor: default;
   background: #1EA7FD;
   color: #FFFFFF;
+  font-weight: 700;
 }
 
 .emotion-13 {
@@ -12923,7 +12713,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -12968,9 +12758,11 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
   transition: background 75ms ease-out;
   padding-left: 24px;
   cursor: pointer;
+  color: #333333;
 }
 
 .emotion-21:hover {
+  color: #333333;
   background: rgba(0,0,0,.05);
 }
 
@@ -12996,7 +12788,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -13073,7 +12865,8 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
 .emotion-6 > svg path {
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
-  fill: #999999;
+  fill: currentColor;
+  opacity: 0.3;
 }
 
 .emotion-0 {
@@ -13139,7 +12932,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
   display: block;
   height: 8px;
   width: 8px;
-  color: #666666;
+  color: #333333;
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
 }
@@ -13148,10 +12941,6 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
   background: rgba(0,0,0,0.2);
 }
 
-.emotion-5:hover > svg {
-  color: #444444;
-}
-
 .emotion-24 + section {
   margin-top: 20px;
 }
@@ -13166,10 +12955,10 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
   -ms-letter-spacing: 0.35em;
   letter-spacing: 0.35em;
   text-transform: uppercase;
-  font-weight: 700;
+  font-weight: 900;
   font-size: 11px;
   line-height: 24px;
-  color: #999999;
+  color: rgba(51,51,51,0.5);
   margin: 0 20px;
 }
 
@@ -13206,9 +12995,11 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
   transition: background 75ms ease-out;
   padding-left: 9px;
   cursor: pointer;
+  color: #333333;
 }
 
 .emotion-11:hover {
+  color: #333333;
   background: rgba(0,0,0,.05);
 }
 
@@ -13219,7 +13010,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -13267,6 +13058,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
   cursor: default;
   background: #1EA7FD;
   color: #FFFFFF;
+  font-weight: 700;
 }
 
 .emotion-13 {
@@ -13276,7 +13068,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
@@ -13321,9 +13113,11 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
   transition: background 75ms ease-out;
   padding-left: 24px;
   cursor: pointer;
+  color: #333333;
 }
 
 .emotion-21:hover {
+  color: #333333;
   background: rgba(0,0,0,.05);
 }
 
@@ -13349,7 +13143,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
   margin-right: 6px;
   border-top: 3.5px solid transparent;
   border-bottom: 3.5px solid transparent;
-  border-left: 3.5px solid rgba(0,0,0,.2);
+  border-left: 3.5px solid rgba(0,0,0,0.3);
   -webkit-transition: -webkit-transform .1s ease-out;
   -webkit-transition: transform .1s ease-out;
   transition: transform .1s ease-out;
diff --git a/lib/components/src/ActionBar/ActionBar.js b/lib/components/src/ActionBar/ActionBar.js
index 74928eb99e6..ea1b492badb 100644
--- a/lib/components/src/ActionBar/ActionBar.js
+++ b/lib/components/src/ActionBar/ActionBar.js
@@ -9,7 +9,7 @@ const Container = styled.div(({ theme }) => ({
   right: 0,
   maxWidth: '100%',
   display: 'flex',
-  background: theme.background.bar,
+  background: theme.background.content,
 }));
 
 export const ActionButton = styled.button(({ theme }) => ({
@@ -19,8 +19,8 @@ export const ActionButton = styled.button(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
 
-  color: theme.color.dark,
-  background: theme.background.bar,
+  color: theme.color.defaultText,
+  background: theme.background.content,
 
   fontSize: 12,
   lineHeight: '16px',
diff --git a/lib/components/src/Badge/Badge.js b/lib/components/src/Badge/Badge.js
index 8be51258c5a..fe3ee497e22 100644
--- a/lib/components/src/Badge/Badge.js
+++ b/lib/components/src/Badge/Badge.js
@@ -8,12 +8,17 @@ const BadgeWrapper = styled.div`
   line-height: 12px;
   padding: 4px 12px;
   border-radius: 3em;
+  font-weight: ${props => props.theme.typography.weight.bold};
 
   svg {
     height: 12px;
     width: 12px;
     margin-right: 4px;
     margin-top: -2px;
+
+    path {
+      fill: currentColor;
+    }
   }
 
   ${props =>
@@ -21,9 +26,6 @@ const BadgeWrapper = styled.div`
     css`
       color: ${props.theme.color.positive};
       background: ${props.theme.background.positive};
-      svg path {
-        fill: ${props.theme.color.positive};
-      }
     `};
 
   ${props =>
@@ -31,9 +33,6 @@ const BadgeWrapper = styled.div`
     css`
       color: ${props.theme.color.negative};
       background: ${props.theme.background.negative};
-      svg path {
-        fill: ${props.theme.color.negative};
-      }
     `};
 
   ${props =>
@@ -41,9 +40,6 @@ const BadgeWrapper = styled.div`
     css`
       color: ${props.theme.color.dark};
       background: ${props.theme.color.mediumlight};
-      svg path {
-        fill: ${props.theme.color.dark};
-      }
     `};
 `;
 
diff --git a/lib/components/src/Badge/__snapshots__/Badge.stories.storyshot b/lib/components/src/Badge/__snapshots__/Badge.stories.storyshot
index c8d675799ac..92620058705 100644
--- a/lib/components/src/Badge/__snapshots__/Badge.stories.storyshot
+++ b/lib/components/src/Badge/__snapshots__/Badge.stories.storyshot
@@ -8,6 +8,7 @@ exports[`Storyshots Basics|Badge all badges 1`] = `
   line-height: 12px;
   padding: 4px 12px;
   border-radius: 3em;
+  font-weight: 700;
   color: #66BF3C;
   background: #E1FFD4;
 }
@@ -20,7 +21,7 @@ exports[`Storyshots Basics|Badge all badges 1`] = `
 }
 
 .emotion-0 svg path {
-  fill: #66BF3C;
+  fill: currentColor;
 }
 
 .emotion-1 {
@@ -30,6 +31,7 @@ exports[`Storyshots Basics|Badge all badges 1`] = `
   line-height: 12px;
   padding: 4px 12px;
   border-radius: 3em;
+  font-weight: 700;
   color: #FF4400;
   background: #FEDED2;
 }
@@ -42,7 +44,7 @@ exports[`Storyshots Basics|Badge all badges 1`] = `
 }
 
 .emotion-1 svg path {
-  fill: #FF4400;
+  fill: currentColor;
 }
 
 .emotion-2 {
@@ -52,6 +54,7 @@ exports[`Storyshots Basics|Badge all badges 1`] = `
   line-height: 12px;
   padding: 4px 12px;
   border-radius: 3em;
+  font-weight: 700;
   color: #666666;
   background: #EEEEEE;
 }
@@ -64,7 +67,7 @@ exports[`Storyshots Basics|Badge all badges 1`] = `
 }
 
 .emotion-2 svg path {
-  fill: #666666;
+  fill: currentColor;
 }
 
 <div>
diff --git a/lib/components/src/Button/Button.js b/lib/components/src/Button/Button.js
index 4139784129b..ce560575062 100644
--- a/lib/components/src/Button/Button.js
+++ b/lib/components/src/Button/Button.js
@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { styled, css } from '@storybook/theming';
-import { darken, rgba } from 'polished';
+import { darken, lighten, rgba, transparentize } from 'polished';
 
 const Text = styled.span`
   display: inline-block;
@@ -16,14 +16,13 @@ const Loading = styled.span`
   opacity: 0;
 `;
 
-// prettier-ignore
 const ButtonWrapper = styled.button`
   border: 0;
   border-radius: 3em;
   cursor: pointer;
   display: inline-block;
   overflow: hidden;
-  padding: ${props => props.small ? '10px 16px' : '13px 20px'};
+  padding: ${props => (props.small ? '10px 16px' : '13px 20px')};
   position: relative;
   text-align: center;
   text-decoration: none;
@@ -37,263 +36,199 @@ const ButtonWrapper = styled.button`
   background: transparent;
 
 
-  font-size: ${props => props.small ? props.theme.typography.size.s1 : props.theme.typography.size.s2 - 1}px;
+  font-size: ${props =>
+    props.small ? props.theme.typography.size.s1 : props.theme.typography.size.s2 - 1}px;
   font-weight: ${props => props.theme.typography.weight.bold};
   line-height: 1;
 
-  ${props => !props.loading && css`
-    ${props.theme.animation.hoverable};
-
-    &:hover {
-      box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
-    }
-  `}
-
-  & > span {
-    transform: scale3d(1,1,1) translate3d(0,0,0);
-    transition: transform 700ms ${props => props.theme.easing.rubber};
-    opacity: 1;
-  }
-
-  [role="progressbar"] {
-    transform: translate3d(0, 100%, 0);
-  }
 
   svg {
     display: inline-block;
-    height: ${props => props.small ? '14' : '16'}px;
-    width: ${props => props.small ? '14' : '16'}px;
+    height: ${props => (props.small ? '14' : '16')}px;
+    width: ${props => (props.small ? '14' : '16')}px;
     vertical-align: top;
-    margin-right: ${props => props.small ? '4' : '6'}px;
-    margin-top: ${props => props.small ? '-1' : '-2'}px;
-    margin-bottom: ${props => props.small ? '-1' : '-2'}px;
+    margin-right: ${props => (props.small ? '4' : '6')}px;
+    margin-top: ${props => (props.small ? '-1' : '-2')}px;
+    margin-bottom: ${props => (props.small ? '-1' : '-2')}px;
 
     /* Necessary for js mouse events to not glitch out when hovering on svgs */
     pointer-events: none;
-  }
-
-  ${props => props.disabled && css`
-    cursor: not-allowed !important;
-		opacity: .5;
-    &:hover {
-      transform: none;
-    }
-	`}
-
-  ${props => props.unclickable && css`
-    cursor: default !important;
-		pointer-events: none;
-    &:hover {
-      transform: none;
-    }
-	`}
-
-  ${props => props.loading && css`
-    cursor: progress !important;
-    opacity: .7;
-
-    [role="progressbar"] {
-      transition: transform 700ms ${props.theme.easing.rubber};
-      transform: translate3d(0, -50%,0);
-      opacity: 1;
-    }
-
-    & > span {
-      transform: scale3d(0,0,1) translate3d(0,-100%,0);
-      opacity: 0;
-    }
-
-    &:hover {
-      transform: none;
-    }
-	`}
-
-  ${props => props.containsIcon && css`
-    svg {
-      display: block;
-      margin: 0;
-    }
-    ${props.small && css`
-  		padding: 7px;
-  	`}
-
-    ${!props.small && css`
-  		padding: 12px;
-  	`}
-  `}
-
-  ${props => props.primary && css`
-    background: ${props.theme.color.primary};
-    color: ${props.theme.color.lightest};
-    svg path { fill: ${props.theme.color.lightest}; }
-
-    ${!props.loading && css`
-      &:hover { background: ${darken(0.05, props.theme.color.primary)};}
-      &:active { box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset; }
-      &:focus { box-shadow: ${rgba(props.theme.color.primary, 0.4)} 0 1px 9px 2px; }
-      &:focus:hover { box-shadow: ${rgba(props.theme.color.primary, 0.2)} 0 8px 18px 0px;}
-    `}
-	`}
 
-  ${props => props.primary && props.active && css`
-    background: transparent;
-    box-shadow: ${props.theme.color.primary} 0 0 0 1px inset;
-    color: ${props.theme.color.primary};
-    svg path { fill: ${props.theme.color.primary}; }
+    path { fill: currentColor; }
+  }
 
-    ${!props.loading && css`
+  ${props =>
+    props.disabled &&
+    css`
+      cursor: not-allowed !important;
+      opacity: 0.5;
       &:hover {
-        background: transparent;
-        box-shadow: ${props.theme.color.primary} 0 0 0 1px inset;
+        transform: none;
       }
-      &:active {
-        box-shadow: ${props.theme.color.primary} 0 0 0 3em inset;
-        color: ${props.theme.color.lightest};
-      }
-      &:focus { box-shadow: ${props.theme.color.primary} 0 0 0 3em inset, ${rgba(props.theme.color.primary, 0.4)} 0 1px 9px 2px; }
-      &:focus:hover { box-shadow: ${props.theme.color.primary} 0 0 0 3em inset, ${rgba(props.theme.color.primary, 0.2)} 0 8px 18px 0px;}
     `}
 
-	`}
+  ${props =>
+    props.containsIcon &&
+    css`
+      svg {
+        display: block;
+        margin: 0;
+      }
 
-  ${props => props.secondary && css`
-    background: ${props.theme.color.secondary};
-    color: ${props.theme.color.lightest};
-    svg path { fill: ${props.theme.color.lightest}; }
+      ${props.small &&
+        css`
+          padding: 7px;
+        `}
 
-    ${!props.loading && css`
-      &:hover { background: ${darken(0.05, props.theme.color.secondary)}; }
-      &:active { box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset; }
-      &:focus { box-shadow: ${rgba(props.theme.color.secondary, 0.4)} 0 1px 9px 2px; }
-      &:focus:hover { box-shadow: ${rgba(props.theme.color.secondary, 0.2)} 0 8px 18px 0px;}
+      ${!props.small &&
+        css`
+          padding: 12px;
+        `}
     `}
-	`}
 
-  ${props => props.secondary && props.active && css`
-    background: transparent;
-    box-shadow: ${props.theme.color.secondary} 0 0 0 1px inset;
-    color: ${props.theme.color.secondary};
-    svg path { fill: ${props.theme.color.secondary}; }
+  /* Colored button for primary CTAs */
+  ${props =>
+    props.primary &&
+    css`
+      background: ${props.theme.color.primary};
+      color: ${props.theme.color.lightest};
 
-    ${!props.loading && css`
       &:hover {
-        background: transparent;
-        box-shadow: ${props.theme.color.secondary} 0 0 0 1px inset;
+        background: ${darken(0.05, props.theme.color.primary)};
       }
       &:active {
-        box-shadow: ${props.theme.color.secondary} 0 0 0 3em inset;
-        color: ${props.theme.color.lightest};
+        box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 3em inset;
       }
-      &:focus { box-shadow: ${props.theme.color.secondary} 0 0 0 3em inset, ${rgba(props.theme.color.secondary, 0.4)} 0 1px 9px 2px; }
-      &:focus:hover { box-shadow: ${props.theme.color.secondary} 0 0 0 3em inset, ${rgba(props.theme.color.secondary, 0.2)} 0 8px 18px 0px;}
-    `}
-	`}
-
-  ${props => props.tertiary && css`
-    background: ${props.theme.color.tertiary};
-    color: ${props.theme.color.darkest};
-    box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-    svg path { fill: ${props.theme.color.darkest}; }
-
-    ${!props.loading && css`
-      &:hover {
-        ${props.inForm ?
-          'box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset'
-          :
-          'box-shadow: rgba(0,0,0,.2) 0 2px 6px 0, rgba(0,0,0,.1) 0 0 0 1px inset'
-        }
+      &:focus {
+        box-shadow: ${rgba(props.theme.color.primary, 0.4)} 0 1px 9px 2px;
       }
-      &:active { box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset; }
-      &:focus { box-shadow: ${props.theme.color.secondary} 0 0 0 1px inset; }
-      &:focus:hover { box-shadow: ${props.theme.color.secondary} 0 0 0 1px inset;}
-    `}
-	`}
-
-  ${props => props.tertiary && props.active && css`
-    background: transparent;
-    box-shadow: ${props.theme.color.medium} 0 0 0 1px inset;
-    color: ${props.theme.color.darkest};
-    svg path { fill: ${props.theme.color.tertiary}; }
-
-    ${!props.loading && css`
-      &:hover {
-        background: transparent;
-        box-shadow: ${props.theme.color.medium} 0 0 0 1px inset;
+      &:focus:hover {
+        box-shadow: ${rgba(props.theme.color.primary, 0.2)} 0 8px 18px 0px;
       }
-      &:focus { box-shadow: ${props.theme.color.medium} 0 0 0 1px inset, ${rgba(props.theme.color.tertiary, 0.4)} 0 1px 9px 2px; }
-      &:focus:hover { box-shadow: ${props.theme.color.medium} 0 0 0 1px inset, ${rgba(props.theme.color.tertiary, 0.2)} 0 8px 18px 0px;}
     `}
 
-	`}
-
-  ${props => props.outline && css`
-    box-shadow: ${props.theme.color.medium} 0 0 0 1px inset;
-		color: ${props.theme.color.dark};
-    background: transparent;
-
-    svg path { fill: ${props.theme.color.dark}; }
 
-    ${!props.loading && css`
-      &:hover { box-shadow: ${props.theme.color.mediumdark} 0 0 0 1px inset; }
+  /* Colored button for secondary CTAs */
+  ${props =>
+    props.secondary &&
+    css`
+      background: ${props.theme.color.secondary};
+      color: ${props.theme.color.lightest};
 
+      &:hover {
+        background: ${darken(0.05, props.theme.color.secondary)};
+      }
       &:active {
-        background: ${props.theme.color.medium};
-        box-shadow: ${props.theme.color.medium} 0 0 0 1px inset;
-        color: ${props.theme.color.darkest};
+        box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 3em inset;
       }
-      
-    `};
-
-    ${props.primary && css`
-      box-shadow: ${props.theme.color.primary} 0 0 0 1px inset;
-  		color: ${props.theme.color.primary};
+      &:focus {
+        box-shadow: ${rgba(props.theme.color.secondary, 0.4)} 0 1px 9px 2px;
+      }
+      &:focus:hover {
+        box-shadow: ${rgba(props.theme.color.secondary, 0.2)} 0 8px 18px 0px;
+      }
+    `}
 
-      svg path { fill: ${props.theme.color.primary}; }
+  /* Button for tertiary CTAs and forms that responds to theme */
+  ${props =>
+    props.tertiary &&
+    css`
+      background: ${props.theme.base === 'light'
+        ? darken(0.02, props.theme.input.background)
+        : lighten(0.02, props.theme.input.background)};
+      color: ${props.theme.input.color};
+      box-shadow: ${props.theme.input.border} 0 0 0 1px inset;
+      border-radius: ${props.theme.input.borderRadius}px;
 
       &:hover {
-        box-shadow: ${props.theme.color.primary} 0 0 0 1px inset;
-        background: transparent;
+        background: ${props.theme.base === 'light'
+          ? darken(0.05, props.theme.input.background)
+          : lighten(0.05, props.theme.input.background)};
+        ${props.inForm
+          ? ''
+          : 'box-shadow: rgba(0,0,0,.2) 0 2px 6px 0, rgba(0,0,0,.1) 0 0 0 1px inset'}
       }
-
       &:active {
-        background: ${props.theme.color.primary};
-        box-shadow: ${props.theme.color.primary} 0 0 0 1px inset;
-        color: ${props.theme.color.lightest};
-        svg path { fill: ${props.theme.color.lightest}; }
+        background: ${props.theme.base === 'light'
+          ? props.theme.input.background
+          : props.theme.input.background};
       }
-      &:focus { box-shadow: ${props.theme.color.primary} 0 0 0 1px inset, ${rgba(props.theme.color.primary, 0.4)} 0 1px 9px 2px; }
-      &:focus:hover { box-shadow: ${props.theme.color.primary} 0 0 0 1px inset, ${rgba(props.theme.color.primary, 0.2)} 0 8px 18px 0px;}
-    `};
-
-    ${props.secondary && css`
-      box-shadow: ${props.theme.color.secondary} 0 0 0 1px inset;
-  		color: ${props.theme.color.secondary};
+      &:focus {
+        box-shadow: ${rgba(props.theme.color.secondary, 0.4)} 0 0 0 1px inset;
+      }
+    `}
 
-      svg path { fill: ${props.theme.color.secondary}; }
+  /* Button that's outlined */
+  ${props =>
+    props.outline &&
+    css`
+      box-shadow: ${transparentize(0.8, props.theme.color.defaultText)} 0 0 0 1px inset;
+      color: ${transparentize(0.3, props.theme.color.defaultText)};
+      background: transparent;
 
       &:hover {
-        box-shadow: ${props.theme.color.secondary} 0 0 0 1px inset;
-        background: transparent;
+        box-shadow: ${transparentize(0.5, props.theme.color.defaultText)} 0 0 0 1px inset;
       }
 
       &:active {
-        background: ${props.theme.color.secondary};
-        box-shadow: ${props.theme.color.secondary} 0 0 0 1px inset;
-        color: ${props.theme.color.lightest};
-        svg path { fill: ${props.theme.color.lightest}; }
+        box-shadow: ${transparentize(0.5, props.theme.color.defaultText)} 0 0 0 2px inset;
+        color: ${transparentize(0, props.theme.color.defaultText)};
       }
-      &:focus { box-shadow: ${props.theme.color.secondary} 0 0 0 1px inset, ${rgba(props.theme.color.secondary, 0.4)} 0 1px 9px 2px; }
-      &:focus:hover { box-shadow: ${props.theme.color.secondary} 0 0 0 1px inset, ${rgba(props.theme.color.secondary, 0.2)} 0 8px 18px 0px;}
-    `};
-	`}
-
-  ${props => props.outline && props.active && css`
-    background: ${props.theme.color.medium};
-    box-shadow: ${props.theme.color.medium} 0 0 0 1px inset;
-    color: ${props.theme.color.darkest};
-
-    svg path { fill: ${props.theme.color.darkest}; }
-	`}
+
+      ${props.primary &&
+        css`
+          box-shadow: ${props.theme.color.primary} 0 0 0 1px inset;
+          color: ${props.theme.color.primary};
+
+          svg path {
+            fill: ${props.theme.color.primary};
+          }
+
+          &:hover {
+            box-shadow: ${props.theme.color.primary} 0 0 0 1px inset;
+            background: transparent;
+          }
+
+          &:active {
+            background: ${props.theme.color.primary};
+            box-shadow: ${props.theme.color.primary} 0 0 0 1px inset;
+            color: ${props.theme.color.lightest};
+          }
+          &:focus {
+            box-shadow: ${props.theme.color.primary} 0 0 0 1px inset,
+              ${rgba(props.theme.color.primary, 0.4)} 0 1px 9px 2px;
+          }
+          &:focus:hover {
+            box-shadow: ${props.theme.color.primary} 0 0 0 1px inset,
+              ${rgba(props.theme.color.primary, 0.2)} 0 8px 18px 0px;
+          }
+        `};
+
+      ${props.secondary &&
+        css`
+          box-shadow: ${props.theme.color.secondary} 0 0 0 1px inset;
+          color: ${props.theme.color.secondary};
+
+          &:hover {
+            box-shadow: ${props.theme.color.secondary} 0 0 0 1px inset;
+            background: transparent;
+          }
+
+          &:active {
+            background: ${props.theme.color.secondary};
+            box-shadow: ${props.theme.color.secondary} 0 0 0 1px inset;
+            color: ${props.theme.color.lightest};
+          }
+          &:focus {
+            box-shadow: ${props.theme.color.secondary} 0 0 0 1px inset,
+              ${rgba(props.theme.color.secondary, 0.4)} 0 1px 9px 2px;
+          }
+          &:focus:hover {
+            box-shadow: ${props.theme.color.secondary} 0 0 0 1px inset,
+              ${rgba(props.theme.color.secondary, 0.2)} 0 8px 18px 0px;
+          }
+        `};
+    `}
 `;
 
 const ButtonLink = ButtonWrapper.withComponent('a');
diff --git a/lib/components/src/Button/Button.stories.js b/lib/components/src/Button/Button.stories.js
index 4c95401abfd..56b90db79eb 100644
--- a/lib/components/src/Button/Button.stories.js
+++ b/lib/components/src/Button/Button.stories.js
@@ -18,28 +18,12 @@ storiesOf('Basics|Button', module).add('all buttons', () => (
       Outline primary
     </Button>
     <Button outline secondary>
-      Outline primary
+      Outline secondary
     </Button>
     <Button primary disabled>
       Disabled
     </Button>
     <br />
-    <Button primary loading>
-      Primary
-    </Button>
-    <Button secondary loading>
-      Secondary
-    </Button>
-    <Button tertiary loading>
-      Tertiary
-    </Button>
-    <Button outline loading>
-      Outline
-    </Button>
-    <Button outline loading loadingText="Custom...">
-      Outline
-    </Button>
-    <br />
     <Button primary small>
       Primary
     </Button>
diff --git a/lib/components/src/Button/__snapshots__/Button.stories.storyshot b/lib/components/src/Button/__snapshots__/Button.stories.storyshot
index b7f437aef66..7c7590fff4b 100644
--- a/lib/components/src/Button/__snapshots__/Button.stories.storyshot
+++ b/lib/components/src/Button/__snapshots__/Button.stories.storyshot
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Basics|Button all buttons 1`] = `
-.emotion-29 {
+.emotion-14 {
   shape-rendering: inherit;
   -webkit-transform: translate3d(0,0,0);
   -ms-transform: translate3d(0,0,0);
@@ -9,7 +9,7 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
   display: block;
 }
 
-.emotion-28 {
+.emotion-13 {
   fill: currentColor;
 }
 
@@ -41,16 +41,11 @@ exports[`Storyshots Basics|Button all buttons 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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   border-radius: 4px;
+  display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -59,38 +54,6 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
   z-index: 2;
 }
 
-.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;
@@ -103,23 +66,19 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
 }
 
 .emotion-3 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-3:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-3:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-3:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-3:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-3:hover {
@@ -156,47 +115,10 @@ exports[`Storyshots Basics|Button all buttons 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);
   background: #FF4785;
   color: #FFFFFF;
 }
 
-.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: 16px;
@@ -209,7 +131,7 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
 }
 
 .emotion-0 svg path {
-  fill: #FFFFFF;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
@@ -217,7 +139,7 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
 }
 
 .emotion-0:focus {
@@ -256,47 +178,10 @@ exports[`Storyshots Basics|Button all buttons 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);
   background: #1EA7FD;
   color: #FFFFFF;
 }
 
-.emotion-1:hover {
-  -webkit-transform: translate3d(0,-2px,0);
-  -ms-transform: translate3d(0,-2px,0);
-  transform: translate3d(0,-2px,0);
-}
-
-.emotion-1:active {
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-}
-
-.emotion-1:hover {
-  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
-}
-
-.emotion-1 > 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-1 [role="progressbar"] {
-  -webkit-transform: translate3d(0,100%,0);
-  -ms-transform: translate3d(0,100%,0);
-  transform: translate3d(0,100%,0);
-}
-
 .emotion-1 svg {
   display: inline-block;
   height: 16px;
@@ -309,7 +194,7 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
 }
 
 .emotion-1 svg path {
-  fill: #FFFFFF;
+  fill: currentColor;
 }
 
 .emotion-1:hover {
@@ -317,7 +202,7 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
 }
 
 .emotion-1:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
 }
 
 .emotion-1:focus {
@@ -356,46 +241,10 @@ exports[`Storyshots Basics|Button all buttons 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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-}
-
-.emotion-2:hover {
-  -webkit-transform: translate3d(0,-2px,0);
-  -ms-transform: translate3d(0,-2px,0);
-  transform: translate3d(0,-2px,0);
-}
-
-.emotion-2:active {
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-}
-
-.emotion-2:hover {
-  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
-}
-
-.emotion-2 > 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-2 [role="progressbar"] {
-  -webkit-transform: translate3d(0,100%,0);
-  -ms-transform: translate3d(0,100%,0);
-  transform: translate3d(0,100%,0);
+  border-radius: 4px;
 }
 
 .emotion-2 svg {
@@ -410,23 +259,20 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
 }
 
 .emotion-2 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-2:hover {
+  background: #f2f2f2;
   box-shadow: rgba(0,0,0,.2) 0 2px 6px 0,rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
 .emotion-2:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-2:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-2:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-4 {
@@ -457,48 +303,11 @@ exports[`Storyshots Basics|Button all buttons 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);
-  box-shadow: #DDDDDD 0 0 0 1px inset;
-  color: #666666;
+  box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
+  color: rgba(51,51,51,0.7);
   background: transparent;
 }
 
-.emotion-4:hover {
-  -webkit-transform: translate3d(0,-2px,0);
-  -ms-transform: translate3d(0,-2px,0);
-  transform: translate3d(0,-2px,0);
-}
-
-.emotion-4:active {
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-}
-
-.emotion-4:hover {
-  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
-}
-
-.emotion-4 > 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-4 [role="progressbar"] {
-  -webkit-transform: translate3d(0,100%,0);
-  -ms-transform: translate3d(0,100%,0);
-  transform: translate3d(0,100%,0);
-}
-
 .emotion-4 svg {
   display: inline-block;
   height: 16px;
@@ -511,17 +320,16 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
 }
 
 .emotion-4 svg path {
-  fill: #666666;
+  fill: currentColor;
 }
 
 .emotion-4:hover {
-  box-shadow: #999999 0 0 0 1px inset;
+  box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
 }
 
 .emotion-4:active {
-  background: #DDDDDD;
-  box-shadow: #DDDDDD 0 0 0 1px inset;
-  color: #333333;
+  box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
+  color: #333;
 }
 
 .emotion-5 {
@@ -552,52 +360,15 @@ exports[`Storyshots Basics|Button all buttons 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);
   background: #FF4785;
   color: #FFFFFF;
-  box-shadow: #DDDDDD 0 0 0 1px inset;
-  color: #666666;
+  box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
+  color: rgba(51,51,51,0.7);
   background: transparent;
   box-shadow: #FF4785 0 0 0 1px inset;
   color: #FF4785;
 }
 
-.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: 16px;
@@ -610,7 +381,7 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
 }
 
 .emotion-5 svg path {
-  fill: #FFFFFF;
+  fill: currentColor;
 }
 
 .emotion-5:hover {
@@ -618,7 +389,7 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
 }
 
 .emotion-5:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
 }
 
 .emotion-5:focus {
@@ -629,18 +400,13 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
   box-shadow: rgba(255,71,133,0.2) 0 8px 18px 0px;
 }
 
-.emotion-5 svg path {
-  fill: #666666;
-}
-
 .emotion-5:hover {
-  box-shadow: #999999 0 0 0 1px inset;
+  box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
 }
 
 .emotion-5:active {
-  background: #DDDDDD;
-  box-shadow: #DDDDDD 0 0 0 1px inset;
-  color: #333333;
+  box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
+  color: #333;
 }
 
 .emotion-5 svg path {
@@ -658,16 +424,12 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
   color: #FFFFFF;
 }
 
-.emotion-5:active svg path {
-  fill: #FFFFFF;
-}
-
 .emotion-5:focus {
-  box-shadow: #FF4785 0 0 0 1px inset,rgba(255,71,133,0.4) 0 1px 9px 2px;
+  box-shadow: #FF4785 0 0 0 1px inset, rgba(255,71,133,0.4) 0 1px 9px 2px;
 }
 
 .emotion-5:focus:hover {
-  box-shadow: #FF4785 0 0 0 1px inset,rgba(255,71,133,0.2) 0 8px 18px 0px;
+  box-shadow: #FF4785 0 0 0 1px inset, rgba(255,71,133,0.2) 0 8px 18px 0px;
 }
 
 .emotion-6 {
@@ -698,52 +460,15 @@ exports[`Storyshots Basics|Button all buttons 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);
   background: #1EA7FD;
   color: #FFFFFF;
-  box-shadow: #DDDDDD 0 0 0 1px inset;
-  color: #666666;
+  box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
+  color: rgba(51,51,51,0.7);
   background: transparent;
   box-shadow: #1EA7FD 0 0 0 1px inset;
   color: #1EA7FD;
 }
 
-.emotion-6:hover {
-  -webkit-transform: translate3d(0,-2px,0);
-  -ms-transform: translate3d(0,-2px,0);
-  transform: translate3d(0,-2px,0);
-}
-
-.emotion-6:active {
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-}
-
-.emotion-6:hover {
-  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
-}
-
-.emotion-6 > 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-6 [role="progressbar"] {
-  -webkit-transform: translate3d(0,100%,0);
-  -ms-transform: translate3d(0,100%,0);
-  transform: translate3d(0,100%,0);
-}
-
 .emotion-6 svg {
   display: inline-block;
   height: 16px;
@@ -756,7 +481,7 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
 }
 
 .emotion-6 svg path {
-  fill: #FFFFFF;
+  fill: currentColor;
 }
 
 .emotion-6:hover {
@@ -764,7 +489,7 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
 }
 
 .emotion-6:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
 }
 
 .emotion-6:focus {
@@ -775,22 +500,13 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
   box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
 }
 
-.emotion-6 svg path {
-  fill: #666666;
-}
-
 .emotion-6:hover {
-  box-shadow: #999999 0 0 0 1px inset;
+  box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
 }
 
 .emotion-6:active {
-  background: #DDDDDD;
-  box-shadow: #DDDDDD 0 0 0 1px inset;
-  color: #333333;
-}
-
-.emotion-6 svg path {
-  fill: #1EA7FD;
+  box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
+  color: #333;
 }
 
 .emotion-6:hover {
@@ -804,16 +520,12 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
   color: #FFFFFF;
 }
 
-.emotion-6:active svg path {
-  fill: #FFFFFF;
-}
-
 .emotion-6:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset,rgba(30,167,253,0.4) 0 1px 9px 2px;
+  box-shadow: #1EA7FD 0 0 0 1px inset, rgba(30,167,253,0.4) 0 1px 9px 2px;
 }
 
 .emotion-6:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset,rgba(30,167,253,0.2) 0 8px 18px 0px;
+  box-shadow: #1EA7FD 0 0 0 1px inset, rgba(30,167,253,0.2) 0 8px 18px 0px;
 }
 
 .emotion-7 {
@@ -844,49 +556,12 @@ exports[`Storyshots Basics|Button all buttons 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);
   cursor: not-allowed !important;
-  opacity: .5;
+  opacity: 0.5;
   background: #FF4785;
   color: #FFFFFF;
 }
 
-.emotion-7:hover {
-  -webkit-transform: translate3d(0,-2px,0);
-  -ms-transform: translate3d(0,-2px,0);
-  transform: translate3d(0,-2px,0);
-}
-
-.emotion-7:active {
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-}
-
-.emotion-7:hover {
-  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
-}
-
-.emotion-7 > 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-7 [role="progressbar"] {
-  -webkit-transform: translate3d(0,100%,0);
-  -ms-transform: translate3d(0,100%,0);
-  transform: translate3d(0,100%,0);
-}
-
 .emotion-7 svg {
   display: inline-block;
   height: 16px;
@@ -898,22 +573,22 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
   pointer-events: none;
 }
 
+.emotion-7 svg path {
+  fill: currentColor;
+}
+
 .emotion-7:hover {
   -webkit-transform: none;
   -ms-transform: none;
   transform: none;
 }
 
-.emotion-7 svg path {
-  fill: #FFFFFF;
-}
-
 .emotion-7:hover {
   background: #ff2d74;
 }
 
 .emotion-7:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
 }
 
 .emotion-7:focus {
@@ -924,13 +599,13 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
   box-shadow: rgba(255,71,133,0.2) 0 8px 18px 0px;
 }
 
-.emotion-10 {
+.emotion-8 {
   border: 0;
   border-radius: 3em;
   cursor: pointer;
   display: inline-block;
   overflow: hidden;
-  padding: 13px 20px;
+  padding: 10px 16px;
   position: relative;
   text-align: center;
   -webkit-text-decoration: none;
@@ -949,349 +624,45 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
   opacity: 1;
   margin: 0;
   background: transparent;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 700;
   line-height: 1;
-  cursor: progress !important;
-  opacity: .7;
   background: #FF4785;
   color: #FFFFFF;
 }
 
-.emotion-10 > 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-10 [role="progressbar"] {
-  -webkit-transform: translate3d(0,100%,0);
-  -ms-transform: translate3d(0,100%,0);
-  transform: translate3d(0,100%,0);
-}
-
-.emotion-10 svg {
+.emotion-8 svg {
   display: inline-block;
-  height: 16px;
-  width: 16px;
+  height: 14px;
+  width: 14px;
   vertical-align: top;
-  margin-right: 6px;
-  margin-top: -2px;
-  margin-bottom: -2px;
+  margin-right: 4px;
+  margin-top: -1px;
+  margin-bottom: -1px;
   pointer-events: none;
 }
 
-.emotion-10 [role="progressbar"] {
-  -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);
-  -webkit-transform: translate3d(0,-50%,0);
-  -ms-transform: translate3d(0,-50%,0);
-  transform: translate3d(0,-50%,0);
-  opacity: 1;
+.emotion-8 svg path {
+  fill: currentColor;
 }
 
-.emotion-10 > span {
-  -webkit-transform: scale3d(0,0,1) translate3d(0,-100%,0);
-  -ms-transform: scale3d(0,0,1) translate3d(0,-100%,0);
-  transform: scale3d(0,0,1) translate3d(0,-100%,0);
-  opacity: 0;
+.emotion-8:hover {
+  background: #ff2d74;
 }
 
-.emotion-10:hover {
-  -webkit-transform: none;
-  -ms-transform: none;
-  transform: none;
+.emotion-8:active {
+  box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
 }
 
-.emotion-10 svg path {
-  fill: #FFFFFF;
+.emotion-8:focus {
+  box-shadow: rgba(255,71,133,0.4) 0 1px 9px 2px;
 }
 
-.emotion-8 {
-  display: inline-block;
-  vertical-align: top;
+.emotion-8:focus:hover {
+  box-shadow: rgba(255,71,133,0.2) 0 8px 18px 0px;
 }
 
 .emotion-9 {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  right: 0;
-  opacity: 0;
-}
-
-.emotion-13 {
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  overflow: hidden;
-  padding: 13px 20px;
-  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: 13px;
-  font-weight: 700;
-  line-height: 1;
-  cursor: progress !important;
-  opacity: .7;
-  background: #1EA7FD;
-  color: #FFFFFF;
-}
-
-.emotion-13 > 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-13 [role="progressbar"] {
-  -webkit-transform: translate3d(0,100%,0);
-  -ms-transform: translate3d(0,100%,0);
-  transform: translate3d(0,100%,0);
-}
-
-.emotion-13 svg {
-  display: inline-block;
-  height: 16px;
-  width: 16px;
-  vertical-align: top;
-  margin-right: 6px;
-  margin-top: -2px;
-  margin-bottom: -2px;
-  pointer-events: none;
-}
-
-.emotion-13 [role="progressbar"] {
-  -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);
-  -webkit-transform: translate3d(0,-50%,0);
-  -ms-transform: translate3d(0,-50%,0);
-  transform: translate3d(0,-50%,0);
-  opacity: 1;
-}
-
-.emotion-13 > span {
-  -webkit-transform: scale3d(0,0,1) translate3d(0,-100%,0);
-  -ms-transform: scale3d(0,0,1) translate3d(0,-100%,0);
-  transform: scale3d(0,0,1) translate3d(0,-100%,0);
-  opacity: 0;
-}
-
-.emotion-13:hover {
-  -webkit-transform: none;
-  -ms-transform: none;
-  transform: none;
-}
-
-.emotion-13 svg path {
-  fill: #FFFFFF;
-}
-
-.emotion-16 {
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  overflow: hidden;
-  padding: 13px 20px;
-  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: 13px;
-  font-weight: 700;
-  line-height: 1;
-  cursor: progress !important;
-  opacity: .7;
-  background: #FAFBFC;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-}
-
-.emotion-16 > 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-16 [role="progressbar"] {
-  -webkit-transform: translate3d(0,100%,0);
-  -ms-transform: translate3d(0,100%,0);
-  transform: translate3d(0,100%,0);
-}
-
-.emotion-16 svg {
-  display: inline-block;
-  height: 16px;
-  width: 16px;
-  vertical-align: top;
-  margin-right: 6px;
-  margin-top: -2px;
-  margin-bottom: -2px;
-  pointer-events: none;
-}
-
-.emotion-16 [role="progressbar"] {
-  -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);
-  -webkit-transform: translate3d(0,-50%,0);
-  -ms-transform: translate3d(0,-50%,0);
-  transform: translate3d(0,-50%,0);
-  opacity: 1;
-}
-
-.emotion-16 > span {
-  -webkit-transform: scale3d(0,0,1) translate3d(0,-100%,0);
-  -ms-transform: scale3d(0,0,1) translate3d(0,-100%,0);
-  transform: scale3d(0,0,1) translate3d(0,-100%,0);
-  opacity: 0;
-}
-
-.emotion-16:hover {
-  -webkit-transform: none;
-  -ms-transform: none;
-  transform: none;
-}
-
-.emotion-16 svg path {
-  fill: #333333;
-}
-
-.emotion-19 {
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  overflow: hidden;
-  padding: 13px 20px;
-  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: 13px;
-  font-weight: 700;
-  line-height: 1;
-  cursor: progress !important;
-  opacity: .7;
-  box-shadow: #DDDDDD 0 0 0 1px inset;
-  color: #666666;
-  background: transparent;
-}
-
-.emotion-19 > 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-19 [role="progressbar"] {
-  -webkit-transform: translate3d(0,100%,0);
-  -ms-transform: translate3d(0,100%,0);
-  transform: translate3d(0,100%,0);
-}
-
-.emotion-19 svg {
-  display: inline-block;
-  height: 16px;
-  width: 16px;
-  vertical-align: top;
-  margin-right: 6px;
-  margin-top: -2px;
-  margin-bottom: -2px;
-  pointer-events: none;
-}
-
-.emotion-19 [role="progressbar"] {
-  -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);
-  -webkit-transform: translate3d(0,-50%,0);
-  -ms-transform: translate3d(0,-50%,0);
-  transform: translate3d(0,-50%,0);
-  opacity: 1;
-}
-
-.emotion-19 > span {
-  -webkit-transform: scale3d(0,0,1) translate3d(0,-100%,0);
-  -ms-transform: scale3d(0,0,1) translate3d(0,-100%,0);
-  transform: scale3d(0,0,1) translate3d(0,-100%,0);
-  opacity: 0;
-}
-
-.emotion-19:hover {
-  -webkit-transform: none;
-  -ms-transform: none;
-  transform: none;
-}
-
-.emotion-19 svg path {
-  fill: #666666;
-}
-
-.emotion-23 {
   border: 0;
   border-radius: 3em;
   cursor: pointer;
@@ -1319,148 +690,11 @@ exports[`Storyshots Basics|Button all buttons 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);
-  background: #FF4785;
-  color: #FFFFFF;
-}
-
-.emotion-23:hover {
-  -webkit-transform: translate3d(0,-2px,0);
-  -ms-transform: translate3d(0,-2px,0);
-  transform: translate3d(0,-2px,0);
-}
-
-.emotion-23:active {
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-}
-
-.emotion-23:hover {
-  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
-}
-
-.emotion-23 > 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-23 [role="progressbar"] {
-  -webkit-transform: translate3d(0,100%,0);
-  -ms-transform: translate3d(0,100%,0);
-  transform: translate3d(0,100%,0);
-}
-
-.emotion-23 svg {
-  display: inline-block;
-  height: 14px;
-  width: 14px;
-  vertical-align: top;
-  margin-right: 4px;
-  margin-top: -1px;
-  margin-bottom: -1px;
-  pointer-events: none;
-}
-
-.emotion-23 svg path {
-  fill: #FFFFFF;
-}
-
-.emotion-23:hover {
-  background: #ff2d74;
-}
-
-.emotion-23:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
-}
-
-.emotion-23:focus {
-  box-shadow: rgba(255,71,133,0.4) 0 1px 9px 2px;
-}
-
-.emotion-23:focus:hover {
-  box-shadow: rgba(255,71,133,0.2) 0 8px 18px 0px;
-}
-
-.emotion-24 {
-  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;
-  -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: #1EA7FD;
   color: #FFFFFF;
 }
 
-.emotion-24:hover {
-  -webkit-transform: translate3d(0,-2px,0);
-  -ms-transform: translate3d(0,-2px,0);
-  transform: translate3d(0,-2px,0);
-}
-
-.emotion-24:active {
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-}
-
-.emotion-24:hover {
-  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
-}
-
-.emotion-24 > 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-24 [role="progressbar"] {
-  -webkit-transform: translate3d(0,100%,0);
-  -ms-transform: translate3d(0,100%,0);
-  transform: translate3d(0,100%,0);
-}
-
-.emotion-24 svg {
+.emotion-9 svg {
   display: inline-block;
   height: 14px;
   width: 14px;
@@ -1471,27 +705,27 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
   pointer-events: none;
 }
 
-.emotion-24 svg path {
-  fill: #FFFFFF;
+.emotion-9 svg path {
+  fill: currentColor;
 }
 
-.emotion-24:hover {
+.emotion-9:hover {
   background: #059dfd;
 }
 
-.emotion-24:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+.emotion-9:active {
+  box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
 }
 
-.emotion-24:focus {
+.emotion-9:focus {
   box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
 }
 
-.emotion-24:focus:hover {
+.emotion-9:focus:hover {
   box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
 }
 
-.emotion-25 {
+.emotion-10 {
   border: 0;
   border-radius: 3em;
   cursor: pointer;
@@ -1519,49 +753,13 @@ exports[`Storyshots Basics|Button all buttons 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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  border-radius: 4px;
 }
 
-.emotion-25:hover {
-  -webkit-transform: translate3d(0,-2px,0);
-  -ms-transform: translate3d(0,-2px,0);
-  transform: translate3d(0,-2px,0);
-}
-
-.emotion-25:active {
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-}
-
-.emotion-25:hover {
-  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
-}
-
-.emotion-25 > 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-25 [role="progressbar"] {
-  -webkit-transform: translate3d(0,100%,0);
-  -ms-transform: translate3d(0,100%,0);
-  transform: translate3d(0,100%,0);
-}
-
-.emotion-25 svg {
+.emotion-10 svg {
   display: inline-block;
   height: 14px;
   width: 14px;
@@ -1572,27 +770,24 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
   pointer-events: none;
 }
 
-.emotion-25 svg path {
-  fill: #333333;
+.emotion-10 svg path {
+  fill: currentColor;
 }
 
-.emotion-25:hover {
+.emotion-10:hover {
+  background: #f2f2f2;
   box-shadow: rgba(0,0,0,.2) 0 2px 6px 0,rgba(0,0,0,.1) 0 0 0 1px inset;
 }
 
-.emotion-25:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
-}
-
-.emotion-25:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+.emotion-10:active {
+  background: #FFFFFF;
 }
 
-.emotion-25:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+.emotion-10:focus {
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
-.emotion-26 {
+.emotion-11 {
   border: 0;
   border-radius: 3em;
   cursor: pointer;
@@ -1620,49 +815,12 @@ exports[`Storyshots Basics|Button all buttons 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);
-  box-shadow: #DDDDDD 0 0 0 1px inset;
-  color: #666666;
+  box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
+  color: rgba(51,51,51,0.7);
   background: transparent;
 }
 
-.emotion-26:hover {
-  -webkit-transform: translate3d(0,-2px,0);
-  -ms-transform: translate3d(0,-2px,0);
-  transform: translate3d(0,-2px,0);
-}
-
-.emotion-26:active {
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-}
-
-.emotion-26:hover {
-  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
-}
-
-.emotion-26 > 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-26 [role="progressbar"] {
-  -webkit-transform: translate3d(0,100%,0);
-  -ms-transform: translate3d(0,100%,0);
-  transform: translate3d(0,100%,0);
-}
-
-.emotion-26 svg {
+.emotion-11 svg {
   display: inline-block;
   height: 14px;
   width: 14px;
@@ -1673,21 +831,20 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
   pointer-events: none;
 }
 
-.emotion-26 svg path {
-  fill: #666666;
+.emotion-11 svg path {
+  fill: currentColor;
 }
 
-.emotion-26:hover {
-  box-shadow: #999999 0 0 0 1px inset;
+.emotion-11:hover {
+  box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
 }
 
-.emotion-26:active {
-  background: #DDDDDD;
-  box-shadow: #DDDDDD 0 0 0 1px inset;
-  color: #333333;
+.emotion-11:active {
+  box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
+  color: #333;
 }
 
-.emotion-27 {
+.emotion-12 {
   border: 0;
   border-radius: 3em;
   cursor: pointer;
@@ -1715,50 +872,13 @@ exports[`Storyshots Basics|Button all buttons 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);
   cursor: not-allowed !important;
-  opacity: .5;
+  opacity: 0.5;
   background: #FF4785;
   color: #FFFFFF;
 }
 
-.emotion-27:hover {
-  -webkit-transform: translate3d(0,-2px,0);
-  -ms-transform: translate3d(0,-2px,0);
-  transform: translate3d(0,-2px,0);
-}
-
-.emotion-27:active {
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-}
-
-.emotion-27:hover {
-  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
-}
-
-.emotion-27 > 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-27 [role="progressbar"] {
-  -webkit-transform: translate3d(0,100%,0);
-  -ms-transform: translate3d(0,100%,0);
-  transform: translate3d(0,100%,0);
-}
-
-.emotion-27 svg {
+.emotion-12 svg {
   display: inline-block;
   height: 14px;
   width: 14px;
@@ -1769,33 +889,33 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
   pointer-events: none;
 }
 
-.emotion-27:hover {
+.emotion-12 svg path {
+  fill: currentColor;
+}
+
+.emotion-12:hover {
   -webkit-transform: none;
   -ms-transform: none;
   transform: none;
 }
 
-.emotion-27 svg path {
-  fill: #FFFFFF;
-}
-
-.emotion-27:hover {
+.emotion-12:hover {
   background: #ff2d74;
 }
 
-.emotion-27:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+.emotion-12:active {
+  box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
 }
 
-.emotion-27:focus {
+.emotion-12:focus {
   box-shadow: rgba(255,71,133,0.4) 0 1px 9px 2px;
 }
 
-.emotion-27:focus:hover {
+.emotion-12:focus:hover {
   box-shadow: rgba(255,71,133,0.2) 0 8px 18px 0px;
 }
 
-.emotion-30 {
+.emotion-15 {
   border: 0;
   border-radius: 3em;
   cursor: pointer;
@@ -1823,50 +943,13 @@ exports[`Storyshots Basics|Button all buttons 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: #DDDDDD 0 0 0 1px inset;
-  color: #666666;
+  box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
+  color: rgba(51,51,51,0.7);
   background: transparent;
 }
 
-.emotion-30:hover {
-  -webkit-transform: translate3d(0,-2px,0);
-  -ms-transform: translate3d(0,-2px,0);
-  transform: translate3d(0,-2px,0);
-}
-
-.emotion-30:active {
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-}
-
-.emotion-30:hover {
-  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
-}
-
-.emotion-30 > 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-30 [role="progressbar"] {
-  -webkit-transform: translate3d(0,100%,0);
-  -ms-transform: translate3d(0,100%,0);
-  transform: translate3d(0,100%,0);
-}
-
-.emotion-30 svg {
+.emotion-15 svg {
   display: inline-block;
   height: 14px;
   width: 14px;
@@ -1877,23 +960,22 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
   pointer-events: none;
 }
 
-.emotion-30 svg {
-  display: block;
-  margin: 0;
+.emotion-15 svg path {
+  fill: currentColor;
 }
 
-.emotion-30 svg path {
-  fill: #666666;
+.emotion-15 svg {
+  display: block;
+  margin: 0;
 }
 
-.emotion-30:hover {
-  box-shadow: #999999 0 0 0 1px inset;
+.emotion-15:hover {
+  box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
 }
 
-.emotion-30:active {
-  background: #DDDDDD;
-  box-shadow: #DDDDDD 0 0 0 1px inset;
-  color: #333333;
+.emotion-15:active {
+  box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
+  color: #333;
 }
 
 <div>
@@ -1930,7 +1012,7 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
   <button
     class="emotion-6"
   >
-    Outline primary
+    Outline secondary
   </button>
   <button
     class="emotion-7"
@@ -1940,134 +1022,53 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
   </button>
   <br />
   <button
-    class="emotion-10"
-  >
-    <span
-      class="emotion-8"
-    >
-      Primary
-    </span>
-    <span
-      aria-busy="true"
-      class="emotion-9"
-      role="progressbar"
-    >
-      Loading...
-    </span>
-  </button>
-  <button
-    class="emotion-13"
-  >
-    <span
-      class="emotion-8"
-    >
-      Secondary
-    </span>
-    <span
-      aria-busy="true"
-      class="emotion-9"
-      role="progressbar"
-    >
-      Loading...
-    </span>
-  </button>
-  <button
-    class="emotion-16"
-  >
-    <span
-      class="emotion-8"
-    >
-      Tertiary
-    </span>
-    <span
-      aria-busy="true"
-      class="emotion-9"
-      role="progressbar"
-    >
-      Loading...
-    </span>
-  </button>
-  <button
-    class="emotion-19"
-  >
-    <span
-      class="emotion-8"
-    >
-      Outline
-    </span>
-    <span
-      aria-busy="true"
-      class="emotion-9"
-      role="progressbar"
-    >
-      Loading...
-    </span>
-  </button>
-  <button
-    class="emotion-19"
-  >
-    <span
-      class="emotion-8"
-    >
-      Outline
-    </span>
-    <span
-      aria-busy="true"
-      class="emotion-9"
-      role="progressbar"
-    >
-      Custom...
-    </span>
-  </button>
-  <br />
-  <button
-    class="emotion-23"
+    class="emotion-8"
   >
     Primary
   </button>
   <button
-    class="emotion-24"
+    class="emotion-9"
   >
     Secondary
   </button>
   <button
-    class="emotion-25"
+    class="emotion-10"
   >
     Tertiary
   </button>
   <button
-    class="emotion-26"
+    class="emotion-11"
   >
     Outline
   </button>
   <button
-    class="emotion-27"
+    class="emotion-12"
     disabled=""
   >
     Disabled
   </button>
   <button
-    class="emotion-30"
+    class="emotion-15"
   >
     <svg
-      class="emotion-29"
+      class="emotion-14"
       viewBox="0 0 1024 1024"
     >
       <path
-        class="emotion-28"
+        class="emotion-13"
         d="M743.52 529.234c5.616-5.616 83.048-83.046 88.462-88.46 30.944-32.778 47.97-75.636 47.97-120.792 0-47.048-18.304-91.26-51.542-124.484-33.228-33.22-77.43-51.516-124.458-51.516-45.024 0-87.792 16.94-120.536 47.72l-104.458 104.456c-30.792 32.738-47.734 75.512-47.734 120.548 0 41.916 14.576 81.544 41.248 113.196 3.264 3.876 6.666 7.664 10.292 11.29 4.258 4.258 8.704 8.262 13.304 12.022 0.054 0.080 0.096 0.152 0.148 0.232 9.572 7.308 15.778 18.804 15.778 31.776 0 22.094-17.914 40-40.004 40-8.542 0-16.442-2.696-22.938-7.26-2.746-1.93-20.622-17.43-30.35-28.050-0.008-0.010-0.018-0.018-0.026-0.028-4.992-5.432-13.234-15.23-18.552-22.65s-16.556-25.872-17.036-26.736c-0.7-1.262-2.974-5.526-3.422-6.39-0.69-1.334-6.118-12.67-6.114-12.67-14.342-31.96-22.332-67.4-22.332-104.728 0-60.826 21.198-116.648 56.58-160.544 0.252-0.314 4.61-5.594 6.594-7.866 0.304-0.35 5.038-5.636 7.16-7.874 0.252-0.268 105.86-105.874 106.128-106.126 45.902-43.584 107.958-70.314 176.264-70.314 141.382 0 255.998 114.5 255.998 256 0 68.516-26.882 130.688-70.652 176.61-0.144 0.148-109.854 109.546-112.090 111.528-0.958 0.848-5.072 4.352-5.072 4.352-6.448 5.434-13.132 10.592-20.1 15.378 0.412-6.836 0.644-13.702 0.644-20.6 0-26.46-3.108-52.206-8.918-76.918l-0.236-1.102zM616.144 767.82c35.382-43.896 56.58-99.718 56.58-160.544 0-37.328-7.99-72.768-22.332-104.728 0.004 0 0.006-0.002 0.010-0.004-0.258-0.576-0.538-1.14-0.8-1.714-0.686-1.498-2.894-6.112-3.296-6.93-0.668-1.344-2.952-5.732-3.386-6.604-3.48-6.982-8.708-15.126-9.49-16.366-0.498-0.792-0.996-1.58-1.502-2.364-0.834-1.29-15.364-22.066-26.656-34.466-0.008-0.010-0.018-0.018-0.026-0.028-7.056-8.448-24.932-24.198-30.35-28.050-6.47-4.602-14.396-7.26-22.938-7.26-22.090 0-40.004 17.906-40.004 40 0 12.97 6.206 24.466 15.778 31.776 0.052 0.080 0.094 0.152 0.148 0.232 4.602 3.76 20.334 19.434 23.598 23.31 26.672 31.65 41.248 71.28 41.248 113.196 0 45.038-16.944 87.81-47.734 120.548l-104.458 104.456c-32.742 30.782-75.512 47.72-120.536 47.72-47.028 0-91.228-18.294-124.458-51.516-33.236-33.224-51.542-77.436-51.542-124.484 0-45.154 17.028-88.014 47.97-120.792 5.414-5.414 40.812-40.812 68.958-68.958 7.176-7.176 13.888-13.886 19.504-19.502v-0.002c-0.356-1.562-0.246-1.096-0.246-1.096-5.81-24.712-8.918-50.458-8.918-76.918 0-6.898 0.232-13.764 0.644-20.6-6.966 4.788-20.1 15.33-20.1 15.33-0.734 0.62-9.518 8.388-11.68 10.45-0.16 0.154-105.338 105.33-105.482 105.478-43.77 45.922-70.652 108.094-70.652 176.61 0 141.5 114.616 256 255.998 256 68.306 0 130.362-26.73 176.264-70.314 0.27-0.254 105.876-105.86 106.128-106.126 0.004-0.002 13.506-15.426 13.758-15.74z"
       />
     </svg>
   </button>
   <button
-    class="emotion-26"
+    class="emotion-11"
   >
     <svg
-      class="emotion-29"
+      class="emotion-14"
       viewBox="0 0 1024 1024"
     >
       <path
-        class="emotion-28"
+        class="emotion-13"
         d="M743.52 529.234c5.616-5.616 83.048-83.046 88.462-88.46 30.944-32.778 47.97-75.636 47.97-120.792 0-47.048-18.304-91.26-51.542-124.484-33.228-33.22-77.43-51.516-124.458-51.516-45.024 0-87.792 16.94-120.536 47.72l-104.458 104.456c-30.792 32.738-47.734 75.512-47.734 120.548 0 41.916 14.576 81.544 41.248 113.196 3.264 3.876 6.666 7.664 10.292 11.29 4.258 4.258 8.704 8.262 13.304 12.022 0.054 0.080 0.096 0.152 0.148 0.232 9.572 7.308 15.778 18.804 15.778 31.776 0 22.094-17.914 40-40.004 40-8.542 0-16.442-2.696-22.938-7.26-2.746-1.93-20.622-17.43-30.35-28.050-0.008-0.010-0.018-0.018-0.026-0.028-4.992-5.432-13.234-15.23-18.552-22.65s-16.556-25.872-17.036-26.736c-0.7-1.262-2.974-5.526-3.422-6.39-0.69-1.334-6.118-12.67-6.114-12.67-14.342-31.96-22.332-67.4-22.332-104.728 0-60.826 21.198-116.648 56.58-160.544 0.252-0.314 4.61-5.594 6.594-7.866 0.304-0.35 5.038-5.636 7.16-7.874 0.252-0.268 105.86-105.874 106.128-106.126 45.902-43.584 107.958-70.314 176.264-70.314 141.382 0 255.998 114.5 255.998 256 0 68.516-26.882 130.688-70.652 176.61-0.144 0.148-109.854 109.546-112.090 111.528-0.958 0.848-5.072 4.352-5.072 4.352-6.448 5.434-13.132 10.592-20.1 15.378 0.412-6.836 0.644-13.702 0.644-20.6 0-26.46-3.108-52.206-8.918-76.918l-0.236-1.102zM616.144 767.82c35.382-43.896 56.58-99.718 56.58-160.544 0-37.328-7.99-72.768-22.332-104.728 0.004 0 0.006-0.002 0.010-0.004-0.258-0.576-0.538-1.14-0.8-1.714-0.686-1.498-2.894-6.112-3.296-6.93-0.668-1.344-2.952-5.732-3.386-6.604-3.48-6.982-8.708-15.126-9.49-16.366-0.498-0.792-0.996-1.58-1.502-2.364-0.834-1.29-15.364-22.066-26.656-34.466-0.008-0.010-0.018-0.018-0.026-0.028-7.056-8.448-24.932-24.198-30.35-28.050-6.47-4.602-14.396-7.26-22.938-7.26-22.090 0-40.004 17.906-40.004 40 0 12.97 6.206 24.466 15.778 31.776 0.052 0.080 0.094 0.152 0.148 0.232 4.602 3.76 20.334 19.434 23.598 23.31 26.672 31.65 41.248 71.28 41.248 113.196 0 45.038-16.944 87.81-47.734 120.548l-104.458 104.456c-32.742 30.782-75.512 47.72-120.536 47.72-47.028 0-91.228-18.294-124.458-51.516-33.236-33.224-51.542-77.436-51.542-124.484 0-45.154 17.028-88.014 47.97-120.792 5.414-5.414 40.812-40.812 68.958-68.958 7.176-7.176 13.888-13.886 19.504-19.502v-0.002c-0.356-1.562-0.246-1.096-0.246-1.096-5.81-24.712-8.918-50.458-8.918-76.918 0-6.898 0.232-13.764 0.644-20.6-6.966 4.788-20.1 15.33-20.1 15.33-0.734 0.62-9.518 8.388-11.68 10.45-0.16 0.154-105.338 105.33-105.482 105.478-43.77 45.922-70.652 108.094-70.652 176.61 0 141.5 114.616 256 255.998 256 68.306 0 130.362-26.73 176.264-70.314 0.27-0.254 105.876-105.86 106.128-106.126 0.004-0.002 13.506-15.426 13.758-15.74z"
       />
     </svg>
diff --git a/lib/components/src/bar/bar.js b/lib/components/src/bar/bar.js
index ba99e928598..bec7f3914f6 100644
--- a/lib/components/src/bar/bar.js
+++ b/lib/components/src/bar/bar.js
@@ -35,7 +35,7 @@ export const Bar = styled.div(
   ({ theme }) => ({
     display: 'flex',
     justifyContent: 'space-between',
-    background: theme.barBgColor,
+    background: theme.barBg,
     color: theme.barTextColor,
     height: 40,
     position: 'relative',
@@ -48,9 +48,7 @@ export const Bar = styled.div(
   ({ theme, border }) =>
     border
       ? {
-          background: `${
-            theme.barBgColor
-          } linear-gradient(to bottom, transparent calc(100% - 1px), ${
+          background: `${theme.barBg} linear-gradient(to bottom, transparent calc(100% - 1px), ${
             theme.appBorderColor
           } calc(100% - 1px))`,
         }
diff --git a/lib/components/src/bar/button.js b/lib/components/src/bar/button.js
index e55e380a9b1..5f0a6b39d2b 100644
--- a/lib/components/src/bar/button.js
+++ b/lib/components/src/bar/button.js
@@ -41,7 +41,7 @@ export const TabButton = styled.button(
           borderBottomColor: theme.barSelectedColor,
         }
       : {
-          opacity: 0.4,
+          color: 'inherit',
           borderBottomColor: 'transparent',
         }
 );
diff --git a/lib/components/src/brand/StorybookLogo.js b/lib/components/src/brand/StorybookLogo.js
index 744b987f84e..2336359e2e8 100644
--- a/lib/components/src/brand/StorybookLogo.js
+++ b/lib/components/src/brand/StorybookLogo.js
@@ -11,7 +11,7 @@ export const StorybookLogo = ({ ...props }) => (
     <g fill="none" fillRule="evenodd">
       <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="#333"
+        fill="currentColor"
       />
       <mask id="b" fill="#fff">
         <use xlinkHref="#a" />
diff --git a/lib/components/src/brand/StorybookLogo.stories.js b/lib/components/src/brand/StorybookLogo.stories.js
index 5070228935d..2ff676dffdf 100644
--- a/lib/components/src/brand/StorybookLogo.stories.js
+++ b/lib/components/src/brand/StorybookLogo.stories.js
@@ -1,6 +1,10 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 
 import { StorybookLogo } from './StorybookLogo';
 
-storiesOf('Basics|Brand/StorybookLogo', module).add('default', () => <StorybookLogo />);
+export default {
+  Component: StorybookLogo,
+  title: 'Basics|Brand/StorybookLogo',
+};
+
+export const normal = () => <StorybookLogo />;
diff --git a/lib/components/src/form/__snapshots__/form.stories.storyshot b/lib/components/src/form/__snapshots__/form.stories.storyshot
index 17d92749295..52e22b8d4c8 100644
--- a/lib/components/src/form/__snapshots__/form.stories.storyshot
+++ b/lib/components/src/form/__snapshots__/form.stories.storyshot
@@ -37,16 +37,11 @@ exports[`Storyshots Basics|Form/Button sizes 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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  display: inline;
   border-radius: 4px;
+  display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -55,38 +50,6 @@ exports[`Storyshots Basics|Form/Button sizes 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;
@@ -99,23 +62,19 @@ exports[`Storyshots Basics|Form/Button sizes 1`] = `
 }
 
 .emotion-0 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -159,18 +118,13 @@ exports[`Storyshots Basics|Form/Button sizes 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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  border-radius: 4px;
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
-  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -179,38 +133,6 @@ exports[`Storyshots Basics|Form/Button sizes 1`] = `
   z-index: 2;
 }
 
-.emotion-2:hover {
-  -webkit-transform: translate3d(0,-2px,0);
-  -ms-transform: translate3d(0,-2px,0);
-  transform: translate3d(0,-2px,0);
-}
-
-.emotion-2:active {
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-}
-
-.emotion-2:hover {
-  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
-}
-
-.emotion-2 > 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-2 [role="progressbar"] {
-  -webkit-transform: translate3d(0,100%,0);
-  -ms-transform: translate3d(0,100%,0);
-  transform: translate3d(0,100%,0);
-}
-
 .emotion-2 svg {
   display: inline-block;
   height: 14px;
@@ -223,23 +145,19 @@ exports[`Storyshots Basics|Form/Button sizes 1`] = `
 }
 
 .emotion-2 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-2:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-2:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-2:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-2:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-2:hover {
@@ -276,16 +194,11 @@ exports[`Storyshots Basics|Form/Button sizes 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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  width: 100%;
   border-radius: 4px;
+  width: 100%;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -294,38 +207,6 @@ exports[`Storyshots Basics|Form/Button sizes 1`] = `
   z-index: 2;
 }
 
-.emotion-4:hover {
-  -webkit-transform: translate3d(0,-2px,0);
-  -ms-transform: translate3d(0,-2px,0);
-  transform: translate3d(0,-2px,0);
-}
-
-.emotion-4:active {
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-}
-
-.emotion-4:hover {
-  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
-}
-
-.emotion-4 > 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-4 [role="progressbar"] {
-  -webkit-transform: translate3d(0,100%,0);
-  -ms-transform: translate3d(0,100%,0);
-  transform: translate3d(0,100%,0);
-}
-
 .emotion-4 svg {
   display: inline-block;
   height: 14px;
@@ -338,23 +219,19 @@ exports[`Storyshots Basics|Form/Button sizes 1`] = `
 }
 
 .emotion-4 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-4:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-4:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-4:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-4:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-4:hover {
@@ -440,16 +317,11 @@ exports[`Storyshots Basics|Form/Button validations 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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  width: 100%;
   border-radius: 4px;
+  width: 100%;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -458,38 +330,6 @@ exports[`Storyshots Basics|Form/Button validations 1`] = `
   z-index: 2;
 }
 
-.emotion-6:hover {
-  -webkit-transform: translate3d(0,-2px,0);
-  -ms-transform: translate3d(0,-2px,0);
-  transform: translate3d(0,-2px,0);
-}
-
-.emotion-6:active {
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-}
-
-.emotion-6:hover {
-  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
-}
-
-.emotion-6 > 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-6 [role="progressbar"] {
-  -webkit-transform: translate3d(0,100%,0);
-  -ms-transform: translate3d(0,100%,0);
-  transform: translate3d(0,100%,0);
-}
-
 .emotion-6 svg {
   display: inline-block;
   height: 14px;
@@ -502,23 +342,19 @@ exports[`Storyshots Basics|Form/Button validations 1`] = `
 }
 
 .emotion-6 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-6:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-6:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-6:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-6:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-6:hover {
@@ -555,17 +391,12 @@ exports[`Storyshots Basics|Form/Button validations 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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  border-radius: 4px;
   width: 100%;
   box-shadow: #FF4400 0 0 0 1px inset !important;
-  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -574,38 +405,6 @@ exports[`Storyshots Basics|Form/Button validations 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;
@@ -618,23 +417,19 @@ exports[`Storyshots Basics|Form/Button validations 1`] = `
 }
 
 .emotion-0 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-0:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-0:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-0:hover {
@@ -671,17 +466,12 @@ exports[`Storyshots Basics|Form/Button validations 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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  border-radius: 4px;
   width: 100%;
   box-shadow: #E69D00 0 0 0 1px inset;
-  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -690,38 +480,6 @@ exports[`Storyshots Basics|Form/Button validations 1`] = `
   z-index: 2;
 }
 
-.emotion-2:hover {
-  -webkit-transform: translate3d(0,-2px,0);
-  -ms-transform: translate3d(0,-2px,0);
-  transform: translate3d(0,-2px,0);
-}
-
-.emotion-2:active {
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-}
-
-.emotion-2:hover {
-  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
-}
-
-.emotion-2 > 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-2 [role="progressbar"] {
-  -webkit-transform: translate3d(0,100%,0);
-  -ms-transform: translate3d(0,100%,0);
-  transform: translate3d(0,100%,0);
-}
-
 .emotion-2 svg {
   display: inline-block;
   height: 14px;
@@ -734,23 +492,19 @@ exports[`Storyshots Basics|Form/Button validations 1`] = `
 }
 
 .emotion-2 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-2:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-2:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-2:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-2:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-2:hover {
@@ -787,17 +541,12 @@ exports[`Storyshots Basics|Form/Button validations 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);
-  background: #FAFBFC;
+  background: #fafafa;
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  border-radius: 4px;
   width: 100%;
   box-shadow: #66BF3C 0 0 0 1px inset !important;
-  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -806,38 +555,6 @@ exports[`Storyshots Basics|Form/Button validations 1`] = `
   z-index: 2;
 }
 
-.emotion-4:hover {
-  -webkit-transform: translate3d(0,-2px,0);
-  -ms-transform: translate3d(0,-2px,0);
-  transform: translate3d(0,-2px,0);
-}
-
-.emotion-4:active {
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-}
-
-.emotion-4:hover {
-  box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
-}
-
-.emotion-4 > 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-4 [role="progressbar"] {
-  -webkit-transform: translate3d(0,100%,0);
-  -ms-transform: translate3d(0,100%,0);
-  transform: translate3d(0,100%,0);
-}
-
 .emotion-4 svg {
   display: inline-block;
   height: 14px;
@@ -850,23 +567,19 @@ exports[`Storyshots Basics|Form/Button validations 1`] = `
 }
 
 .emotion-4 svg path {
-  fill: #333333;
+  fill: currentColor;
 }
 
 .emotion-4:hover {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  background: #f2f2f2;
 }
 
 .emotion-4:active {
-  box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset;
+  background: #FFFFFF;
 }
 
 .emotion-4:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-4:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
 .emotion-4:hover {
@@ -934,8 +647,8 @@ exports[`Storyshots Basics|Form/Field field 1`] = `
 
 .emotion-0 {
   min-width: 100px;
-  min-height: 32px;
-  margin-right: 16px;
+  font-weight: 700;
+  margin-right: 15px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
diff --git a/lib/components/src/form/field/field.js b/lib/components/src/form/field/field.js
index 83e86bca9e8..ede07048147 100644
--- a/lib/components/src/form/field/field.js
+++ b/lib/components/src/form/field/field.js
@@ -13,15 +13,15 @@ const Wrapper = styled.label(({ theme }) => ({
   },
 }));
 
-const Label = styled.span({
+const Label = styled.span(({ theme }) => ({
   minWidth: 100,
-  minHeight: 32,
-  marginRight: 16,
+  fontWeight: theme.typography.weight.bold,
+  marginRight: 15,
   display: 'flex',
   justifyContent: 'flex-start',
   alignItems: 'center',
   lineHeight: '16px',
-});
+}));
 
 const Field = ({ label, children }) => (
   <Wrapper>
diff --git a/lib/components/src/form/input/input.js b/lib/components/src/form/input/input.js
index 8c08fcfc4e0..b6c2c40af32 100644
--- a/lib/components/src/form/input/input.js
+++ b/lib/components/src/form/input/input.js
@@ -112,20 +112,16 @@ export const Textarea = styled(TextareaAutoResize)(styles, sizes, alignment, val
 Textarea.displayName = 'Textarea';
 
 export const Button = withProps({ tertiary: true, small: true, inForm: true })(
-  styled(StyledButton)(
-    sizes,
-    validation,
-    ({ theme }) => ({ borderRadius: theme.appBorderRadius }),
-    {
-      userSelect: 'none',
-      overflow: 'visible',
-      zIndex: 2,
+  styled(StyledButton)(sizes, validation, {
+    // Custom styling for color widget nested in buttons
+    userSelect: 'none',
+    overflow: 'visible',
+    zIndex: 2,
 
-      // overrides the default hover from Button
-      '&:hover': {
-        transform: 'none',
-      },
-    }
-  )
+    // overrides the default hover from Button
+    '&:hover': {
+      transform: 'none',
+    },
+  })
 );
 Button.displayName = 'Button';
diff --git a/lib/components/src/placeholder/placeholder.js b/lib/components/src/placeholder/placeholder.js
index 06b84ea6e0f..cbb7bb41d6d 100644
--- a/lib/components/src/placeholder/placeholder.js
+++ b/lib/components/src/placeholder/placeholder.js
@@ -11,7 +11,7 @@ const Desc = styled.div``;
 const Message = styled.div`
   padding: 30px;
   text-align: center;
-  color: ${props => props.theme.color.dark};
+  color: ${props => props.theme.color.defaultText};
   font-size: ${props => props.theme.typography.size.s2 - 1}px;
 `;
 
diff --git a/lib/components/src/placeholder/placeholder.stories.js b/lib/components/src/placeholder/placeholder.stories.js
index 43ce53f0b68..27cbdfab21b 100644
--- a/lib/components/src/placeholder/placeholder.stories.js
+++ b/lib/components/src/placeholder/placeholder.stories.js
@@ -1,6 +1,7 @@
 import React, { Fragment } from 'react';
 
 import { Placeholder } from './placeholder';
+import Link from '../typography/link/link';
 
 export default {
   Component: Placeholder,
@@ -14,7 +15,7 @@ export const twoChildren = () => (
   <Placeholder>
     <Fragment key="title">This has two children, the first bold</Fragment>
     <Fragment key="desc">
-      The second normal weight. Here's a <a href="https://storybook.js.org">link</a>
+      The second normal weight. Here's a <Link href="https://storybook.js.org">link</Link>
     </Fragment>
   </Placeholder>
 );
diff --git a/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot b/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot
index b7bffddd7c2..83209e363fb 100644
--- a/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot
+++ b/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot
@@ -405,6 +405,7 @@ exports[`Storyshots Basics|SyntaxHighlighter bordered & copy-able 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  background: #FFFFFF;
 }
 
 .emotion-3 {
@@ -419,7 +420,8 @@ exports[`Storyshots Basics|SyntaxHighlighter bordered & copy-able 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #666666;
+  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 019f2bda0f2..d485e04bc89 100644
--- a/lib/components/src/tabs/__snapshots__/tabs.stories.storyshot
+++ b/lib/components/src/tabs/__snapshots__/tabs.stories.storyshot
@@ -78,7 +78,7 @@ exports[`Storyshots Basics|Tabs stateful - dynamic 1`] = `
   border-bottom: 3px solid transparent;
   font-weight: bold;
   font-size: 13px;
-  opacity: 0.4;
+  color: inherit;
   border-bottom-color: transparent;
 }
 
@@ -359,7 +359,7 @@ exports[`Storyshots Basics|Tabs stateful - no initial 1`] = `
   border-bottom: 3px solid transparent;
   font-weight: bold;
   font-size: 13px;
-  opacity: 0.4;
+  color: inherit;
   border-bottom-color: transparent;
 }
 
@@ -596,7 +596,7 @@ exports[`Storyshots Basics|Tabs stateful - static 1`] = `
   border-bottom: 3px solid transparent;
   font-weight: bold;
   font-size: 13px;
-  opacity: 0.4;
+  color: inherit;
   border-bottom-color: transparent;
 }
 
@@ -791,7 +791,7 @@ exports[`Storyshots Basics|Tabs stateless - absolute 1`] = `
   border-bottom: 3px solid transparent;
   font-weight: bold;
   font-size: 13px;
-  opacity: 0.4;
+  color: inherit;
   border-bottom-color: transparent;
 }
 
@@ -1089,7 +1089,7 @@ exports[`Storyshots Basics|Tabs stateless - bordered 1`] = `
   border-bottom: 3px solid transparent;
   font-weight: bold;
   font-size: 13px;
-  opacity: 0.4;
+  color: inherit;
   border-bottom-color: transparent;
 }
 
@@ -1298,7 +1298,7 @@ exports[`Storyshots Basics|Tabs stateless - empty 1`] = `
 .emotion-1 {
   padding: 30px;
   text-align: center;
-  color: #666666;
+  color: #333333;
   font-size: 13px;
 }
 
@@ -1380,7 +1380,7 @@ exports[`Storyshots Basics|Tabs stateless - no scrolling 1`] = `
   border-bottom: 3px solid transparent;
   font-weight: bold;
   font-size: 13px;
-  opacity: 0.4;
+  color: inherit;
   border-bottom-color: transparent;
 }
 
@@ -1682,7 +1682,7 @@ exports[`Storyshots Basics|Tabs stateless - with tools 1`] = `
   border-bottom: 3px solid transparent;
   font-weight: bold;
   font-size: 13px;
-  opacity: 0.4;
+  color: inherit;
   border-bottom-color: transparent;
 }
 
diff --git a/lib/components/src/tooltip/ListItem.js b/lib/components/src/tooltip/ListItem.js
index b25781502c8..7bc3ead1f3c 100644
--- a/lib/components/src/tooltip/ListItem.js
+++ b/lib/components/src/tooltip/ListItem.js
@@ -2,17 +2,18 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@storybook/theming';
 import memoize from 'memoizerific';
+import { transparentize } from 'polished';
 
 const Title = styled.span(
   ({ theme }) => ({
-    color: theme.color.darker,
+    color: theme.color.defaultText,
     fontWeight: theme.typography.weight.normal,
   }),
   ({ active, theme }) =>
     active
       ? {
           color: theme.color.primary,
-          fontWeight: theme.typography.weight.extrabold,
+          fontWeight: theme.typography.weight.bold,
         }
       : {},
   ({ loading, theme }) =>
@@ -26,7 +27,7 @@ const Title = styled.span(
   ({ disabled, theme }) =>
     disabled
       ? {
-          color: theme.color.mediumdark,
+          color: transparentize(0.7, theme.color.defaultText),
         }
       : {}
 );
@@ -104,7 +105,7 @@ const Item = styled.a(
   ({ theme }) => ({
     fontSize: theme.typography.size.s1,
     transition: 'all 150ms ease-out',
-    color: theme.color.mediumdark,
+    color: transparentize(0.5, theme.color.defaultText),
     textDecoration: 'none',
     cursor: 'pointer',
     justifyContent: 'space-between',
@@ -114,10 +115,6 @@ const Item = styled.a(
     display: 'flex',
     alignItems: 'center',
 
-    '& + &': {
-      borderTop: `1px solid ${theme.color.mediumlight}`,
-    },
-
     '& > * + *': {
       paddingLeft: 10,
     },
diff --git a/lib/components/src/tooltip/Tooltip.js b/lib/components/src/tooltip/Tooltip.js
index 59a051748dd..ea7d4cdef91 100644
--- a/lib/components/src/tooltip/Tooltip.js
+++ b/lib/components/src/tooltip/Tooltip.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import memoize from 'memoizerific';
 
 import { styled } from '@storybook/theming';
+import { rgba, lighten, darken } from 'polished';
 
 const match = memoize(1000)((requestes, actual, value, fallback = 0) =>
   actual.split('-')[0] === requestes ? value : fallback
@@ -34,25 +35,33 @@ const Arrow = styled.div(
     borderTopColor: match(
       'top',
       placement,
-      theme.color[color] || color || theme.color.lightest,
+      theme.color[color] || color || theme.base === 'light'
+        ? rgba(`${lighten(1, theme.background.app)}`, 0.95)
+        : rgba(`${darken(1, theme.background.app)}`, 0.95),
       'transparent'
     ),
     borderBottomColor: match(
       'bottom',
       placement,
-      theme.color[color] || color || theme.color.lightest,
+      theme.color[color] || color || theme.base === 'light'
+        ? rgba(`${lighten(1, theme.background.app)}`, 0.95)
+        : rgba(`${darken(1, theme.background.app)}`, 0.95),
       'transparent'
     ),
     borderLeftColor: match(
       'left',
       placement,
-      theme.color[color] || color || theme.color.lightest,
+      theme.color[color] || color || theme.base === 'light'
+        ? rgba(`${lighten(1, theme.background.app)}`, 0.95)
+        : rgba(`${darken(1, theme.background.app)}`, 0.95),
       'transparent'
     ),
     borderRightColor: match(
       'right',
       placement,
-      theme.color[color] || color || theme.color.lightest,
+      theme.color[color] || color || theme.base === 'light'
+        ? rgba(`${lighten(1, theme.background.app)}`, 0.95)
+        : rgba(`${darken(1, theme.background.app)}`, 0.95),
       'transparent'
     ),
   })
@@ -72,18 +81,14 @@ const Wrapper = styled.div(
           marginRight: `${match('left', placement, ArrowSpacing + 2, 0)}px`,
 
           background:
-            theme.color[color] ||
-            color ||
-            `linear-gradient(
-              -1deg,
-              rgba(248, 248, 248, 0.97) 0%,
-              rgba(255, 255, 255, 0.97) 100%
-            )`,
+            theme.color[color] || color || theme.base === 'light'
+              ? rgba(`${lighten(1, theme.background.app)}`, 0.95)
+              : rgba(`${darken(1, theme.background.app)}`, 0.95),
           filter: `
             drop-shadow(0px 5px 5px rgba(0,0,0,0.05))
             drop-shadow(0 1px 3px rgba(0,0,0,0.1))
           `,
-          borderRadius: theme.borderRadius,
+          borderRadius: theme.appBorderRadius * 2,
           fontSize: theme.typography.size.s1,
         }
       : {
diff --git a/lib/components/src/tooltip/TooltipLinkList.js b/lib/components/src/tooltip/TooltipLinkList.js
index a181b59adc5..953e204a7e1 100644
--- a/lib/components/src/tooltip/TooltipLinkList.js
+++ b/lib/components/src/tooltip/TooltipLinkList.js
@@ -4,9 +4,15 @@ import { styled } from '@storybook/theming';
 
 import ListItem from './ListItem';
 
-const List = styled.div({
-  minWidth: 180,
-});
+const List = styled.div(
+  {
+    minWidth: 180,
+    overflow: 'hidden',
+  },
+  ({ theme }) => ({
+    borderRadius: theme.appBorderRadius * 2,
+  })
+);
 
 const TooltipLinkList = ({ links, LinkWrapper }) => (
   <List>
diff --git a/lib/components/src/tooltip/__snapshots__/ListItem.stories.storyshot b/lib/components/src/tooltip/__snapshots__/ListItem.stories.storyshot
index 4fd9772b645..d8481a0e4e6 100644
--- a/lib/components/src/tooltip/__snapshots__/ListItem.stories.storyshot
+++ b/lib/components/src/tooltip/__snapshots__/ListItem.stories.storyshot
@@ -17,7 +17,7 @@ exports[`Storyshots basics|Tooltip/ListItem active icon 1`] = `
   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;
@@ -37,10 +37,6 @@ exports[`Storyshots basics|Tooltip/ListItem active icon 1`] = `
   align-items: center;
 }
 
-.emotion-5 + .emotion-5 {
-  border-top: 1px solid #EEEEEE;
-}
-
 .emotion-5 > * + * {
   padding-left: 10px;
 }
@@ -69,8 +65,9 @@ exports[`Storyshots basics|Tooltip/ListItem active icon 1`] = `
 }
 
 .emotion-0 {
-  color: #444444;
+  color: #333333;
   color: #FF4785;
+  font-weight: 700;
 }
 
 .emotion-4 svg {
@@ -190,7 +187,7 @@ exports[`Storyshots basics|Tooltip/ListItem all 1`] = `
   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;
@@ -210,10 +207,6 @@ exports[`Storyshots basics|Tooltip/ListItem all 1`] = `
   align-items: center;
 }
 
-.emotion-2 + .emotion-2 {
-  border-top: 1px solid #EEEEEE;
-}
-
 .emotion-2 > * + * {
   padding-left: 10px;
 }
@@ -242,11 +235,11 @@ exports[`Storyshots basics|Tooltip/ListItem all 1`] = `
 }
 
 .emotion-3 {
-  color: #444444;
+  color: #333333;
 }
 
 .emotion-0 {
-  color: #444444;
+  color: #333333;
   -webkit-animation: animation-0 1.5s ease-in-out infinite;
   animation: animation-0 1.5s ease-in-out infinite;
   background: rgba(0,0,0,.1);
@@ -284,8 +277,9 @@ exports[`Storyshots basics|Tooltip/ListItem all 1`] = `
 }
 
 .emotion-19 {
-  color: #444444;
+  color: #333333;
   color: #FF4785;
+  font-weight: 700;
 }
 
 .emotion-20 {
@@ -322,7 +316,7 @@ exports[`Storyshots basics|Tooltip/ListItem all 1`] = `
   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;
@@ -343,10 +337,6 @@ exports[`Storyshots basics|Tooltip/ListItem all 1`] = `
   cursor: not-allowed;
 }
 
-.emotion-37 + .emotion-37 {
-  border-top: 1px solid #EEEEEE;
-}
-
 .emotion-37 > * + * {
   padding-left: 10px;
 }
@@ -360,8 +350,8 @@ exports[`Storyshots basics|Tooltip/ListItem all 1`] = `
 }
 
 .emotion-33 {
-  color: #444444;
-  color: #999999;
+  color: #333333;
+  color: rgba(51,51,51,0.3);
 }
 
 .emotion-34 {
@@ -560,7 +550,7 @@ exports[`Storyshots basics|Tooltip/ListItem default 1`] = `
   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;
@@ -580,10 +570,6 @@ exports[`Storyshots basics|Tooltip/ListItem default 1`] = `
   align-items: center;
 }
 
-.emotion-2 + .emotion-2 {
-  border-top: 1px solid #EEEEEE;
-}
-
 .emotion-2 > * + * {
   padding-left: 10px;
 }
@@ -612,7 +598,7 @@ exports[`Storyshots basics|Tooltip/ListItem default 1`] = `
 }
 
 .emotion-0 {
-  color: #444444;
+  color: #333333;
 }
 
 <a
@@ -647,7 +633,7 @@ exports[`Storyshots basics|Tooltip/ListItem default icon 1`] = `
   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;
@@ -667,10 +653,6 @@ exports[`Storyshots basics|Tooltip/ListItem default icon 1`] = `
   align-items: center;
 }
 
-.emotion-5 + .emotion-5 {
-  border-top: 1px solid #EEEEEE;
-}
-
 .emotion-5 > * + * {
   padding-left: 10px;
 }
@@ -699,7 +681,7 @@ exports[`Storyshots basics|Tooltip/ListItem default icon 1`] = `
 }
 
 .emotion-0 {
-  color: #444444;
+  color: #333333;
 }
 
 .emotion-4 svg {
@@ -778,7 +760,7 @@ exports[`Storyshots basics|Tooltip/ListItem disabled 1`] = `
   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;
@@ -799,10 +781,6 @@ exports[`Storyshots basics|Tooltip/ListItem disabled 1`] = `
   cursor: not-allowed;
 }
 
-.emotion-5 + .emotion-5 {
-  border-top: 1px solid #EEEEEE;
-}
-
 .emotion-5 > * + * {
   padding-left: 10px;
 }
@@ -816,8 +794,8 @@ exports[`Storyshots basics|Tooltip/ListItem disabled 1`] = `
 }
 
 .emotion-1 {
-  color: #444444;
-  color: #999999;
+  color: #333333;
+  color: rgba(51,51,51,0.3);
 }
 
 .emotion-2 {
@@ -918,7 +896,7 @@ exports[`Storyshots basics|Tooltip/ListItem loading 1`] = `
   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;
@@ -938,10 +916,6 @@ exports[`Storyshots basics|Tooltip/ListItem loading 1`] = `
   align-items: center;
 }
 
-.emotion-2 + .emotion-2 {
-  border-top: 1px solid #EEEEEE;
-}
-
 .emotion-2 > * + * {
   padding-left: 10px;
 }
@@ -970,7 +944,7 @@ exports[`Storyshots basics|Tooltip/ListItem loading 1`] = `
 }
 
 .emotion-0 {
-  color: #444444;
+  color: #333333;
   -webkit-animation: animation-0 1.5s ease-in-out infinite;
   animation: animation-0 1.5s ease-in-out infinite;
   background: rgba(0,0,0,.1);
@@ -1000,7 +974,7 @@ exports[`Storyshots basics|Tooltip/ListItem w/positions 1`] = `
   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;
@@ -1020,10 +994,6 @@ exports[`Storyshots basics|Tooltip/ListItem w/positions 1`] = `
   align-items: center;
 }
 
-.emotion-5 + .emotion-5 {
-  border-top: 1px solid #EEEEEE;
-}
-
 .emotion-5 > * + * {
   padding-left: 10px;
 }
@@ -1052,7 +1022,7 @@ exports[`Storyshots basics|Tooltip/ListItem w/positions 1`] = `
 }
 
 .emotion-1 {
-  color: #444444;
+  color: #333333;
 }
 
 .emotion-4 svg {
@@ -1111,7 +1081,7 @@ exports[`Storyshots basics|Tooltip/ListItem w/positions active 1`] = `
   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;
@@ -1131,10 +1101,6 @@ exports[`Storyshots basics|Tooltip/ListItem w/positions active 1`] = `
   align-items: center;
 }
 
-.emotion-5 + .emotion-5 {
-  border-top: 1px solid #EEEEEE;
-}
-
 .emotion-5 > * + * {
   padding-left: 10px;
 }
@@ -1171,8 +1137,9 @@ exports[`Storyshots basics|Tooltip/ListItem w/positions active 1`] = `
 }
 
 .emotion-1 {
-  color: #444444;
+  color: #333333;
   color: #FF4785;
+  font-weight: 700;
 }
 
 .emotion-2 {
diff --git a/lib/components/src/tooltip/__snapshots__/Tooltip.stories.storyshot b/lib/components/src/tooltip/__snapshots__/Tooltip.stories.storyshot
index 0148cecdfdc..baeb3ec4662 100644
--- a/lib/components/src/tooltip/__snapshots__/Tooltip.stories.storyshot
+++ b/lib/components/src/tooltip/__snapshots__/Tooltip.stories.storyshot
@@ -8,9 +8,10 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default 1`] = `
   margin-top: 0px;
   margin-left: 0px;
   margin-right: 0px;
-  background: #DDDDDD;
+  background: rgba(255,255,255,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;
 }
 
@@ -29,7 +30,7 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default 1`] = `
   border-top-width: 8px;
   border-right-width: 8px;
   border-left-width: 8px;
-  border-top-color: #DDDDDD;
+  border-top-color: rgba(255,255,255,0.95);
   border-bottom-color: transparent;
   border-left-color: transparent;
   border-right-color: transparent;
@@ -76,9 +77,10 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default, bottom 1`] = `
   margin-top: 10px;
   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(255,255,255,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;
 }
 
@@ -98,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: #FFFFFF;
+  border-bottom-color: rgba(255,255,255,0.95);
   border-left-color: transparent;
   border-right-color: transparent;
 }
@@ -134,9 +136,10 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default, left 1`] = `
   margin-top: 0px;
   margin-left: 0px;
   margin-right: 10px;
-  background: linear-gradient( -1deg, rgba(248,248,248,0.97) 0%, rgba(255,255,255,0.97) 100% );
+  background: rgba(255,255,255,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;
 }
 
@@ -157,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: #FFFFFF;
+  border-left-color: rgba(255,255,255,0.95);
   border-right-color: transparent;
 }
 
@@ -192,9 +195,10 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default, right 1`] = `
   margin-top: 0px;
   margin-left: 10px;
   margin-right: 0px;
-  background: linear-gradient( -1deg, rgba(248,248,248,0.97) 0%, rgba(255,255,255,0.97) 100% );
+  background: rgba(255,255,255,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;
 }
 
@@ -216,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: #FFFFFF;
+  border-right-color: rgba(255,255,255,0.95);
 }
 
 <div
diff --git a/lib/components/src/tooltip/__snapshots__/WithTooltip.stories.storyshot b/lib/components/src/tooltip/__snapshots__/WithTooltip.stories.storyshot
index 4e0323d032f..74d7b2c8a91 100644
--- a/lib/components/src/tooltip/__snapshots__/WithTooltip.stories.storyshot
+++ b/lib/components/src/tooltip/__snapshots__/WithTooltip.stories.storyshot
@@ -159,29 +159,6 @@ exports[`Storyshots basics/Tooltip/WithTooltip simple click start open 1`] = `
   cursor: pointer;
 }
 
-.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-10 {
   display: inline-block;
   z-index: 2147483647;
@@ -189,9 +166,10 @@ exports[`Storyshots basics/Tooltip/WithTooltip simple click start open 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(255,255,255,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;
 }
 
@@ -210,12 +188,35 @@ 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: #FFFFFF;
+  border-top-color: rgba(255,255,255,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/theming/package.json b/lib/theming/package.json
index ddcfc168928..621d9273acb 100644
--- a/lib/theming/package.json
+++ b/lib/theming/package.json
@@ -24,6 +24,7 @@
     "emotion-theming": "^10.0.5",
     "global": "^4.3.2",
     "memoizerific": "^1.11.3",
+    "polished": "^2.3.3",
     "prop-types": "^15.6.2",
     "react-inspector": "^2.3.1"
   },
diff --git a/lib/theming/src/base.ts b/lib/theming/src/base.ts
index 232837b9ad9..98d239e1570 100644
--- a/lib/theming/src/base.ts
+++ b/lib/theming/src/base.ts
@@ -40,7 +40,7 @@ export const color = {
 
 export const background = {
   app: '#F6F9FC',
-  preview: color.lightest,
+  content: color.lightest,
   hoverable: 'rgba(0,0,0,.05)', // hover state for items in a list
 
   // Notification, error, and warning backgrounds
@@ -125,7 +125,7 @@ export interface Theme {
   // Toolbar default/active colors
   barTextColor: string;
   barSelectedColor: string;
-  barBgColor: string;
+  barBg: string;
 
   // Brand logo/text
   brand: Brand;
diff --git a/lib/theming/src/create.ts b/lib/theming/src/create.ts
index 8c9a43a0f41..e4bfe3fe96d 100644
--- a/lib/theming/src/create.ts
+++ b/lib/theming/src/create.ts
@@ -3,18 +3,22 @@
 import { Theme, Brand, color, Color, background, typography } from './base';
 import { easing, animation } from './animation';
 import { create as createSyntax } from './modules/syntax';
-import { chromeLight } from 'react-inspector';
+import { chromeLight, chromeDark } from 'react-inspector';
+import { opacify } from 'polished';
 
 interface Rest {
   [key: string]: any;
 }
 
 interface ThemeVar {
+  base?: 'light' | 'dark';
+
   colorPrimary?: string;
   colorSecondary?: string;
 
   // UI
   appBg?: string;
+  appContentBg?: string;
   appBorderColor?: string;
   appBorderRadius?: number;
 
@@ -29,7 +33,7 @@ interface ThemeVar {
   // Toolbar default and active colors
   barTextColor?: string;
   barSelectedColor?: string;
-  barBgColor?: string;
+  barBg?: string;
 
   // Form colors
   inputBg?: string;
@@ -78,12 +82,39 @@ const createColors = (vars: ThemeVar): Color => ({
   inverseText: vars.textInverseColor || color.lightest,
 });
 
+const lightSyntaxColors = {
+  green1: '#008000',
+  red1: '#A31515',
+  red2: '#9a050f',
+  red3: '#800000',
+  red4: '#ff0000',
+  gray1: '#393A34',
+  cyan1: '#36acaa',
+  cyan2: '#2B91AF',
+  blue1: '#0000ff',
+  blue2: '#00009f',
+};
+
+const darkSyntaxColors = {
+  green1: '#7C7C7C',
+  red1: '#92C379',
+  red2: '#9a050f',
+  red3: '#A8FF60',
+  red4: '#96CBFE',
+  gray1: '#EDEDED',
+  cyan1: '#C6C5FE',
+  cyan2: '#FFFFB6',
+  blue1: '#B474DD',
+  blue2: '#00009f',
+};
+
 export const create = (vars: ThemeVar, rest?: Rest): Theme => ({
+  base: vars.base,
   color: createColors(vars),
   background: {
     app: vars.appBg || background.app,
-    preview: color.lightest,
-    hoverable: background.hoverable, // TODO: change so it responds to whether appColor is light or dark
+    content: vars.appContentBg || color.lightest,
+    hoverable: vars.base === 'light' ? 'rgba(0,0,0,.05)' : 'rgba(250,250,252,.1)' || background.hoverable,
 
     positive: background.positive,
     negative: background.negative,
@@ -115,37 +146,27 @@ export const create = (vars: ThemeVar, rest?: Rest): Theme => ({
   // Toolbar default/active colors
   barTextColor: vars.barTextColor || color.mediumdark,
   barSelectedColor: vars.barSelectedColor || color.secondary,
-  barBgColor: vars.barBgColor || color.lightest,
+  barBg: vars.barBg || color.lightest,
 
   // Brand logo/text
   brand: vars.brand || null,
 
   code: createSyntax({
-    colors: {
-      green1: '#008000',
-      red1: '#A31515',
-      red2: '#9a050f',
-      red3: '#800000',
-      red4: '#ff0000',
-      gray1: '#393A34',
-      cyan1: '#36acaa',
-      cyan2: '#2B91AF',
-      blue1: '#0000ff',
-      blue2: '#00009f',
-    },
+    colors: vars.base === 'light' ? lightSyntaxColors : darkSyntaxColors,
     mono: vars.fontCode || typography.fonts.mono,
   }),
 
   // Addon actions theme
   // API example https://github.com/xyc/react-inspector/blob/master/src/styles/themes/chromeLight.js
   addonActionsTheme: {
-    ...chromeLight,
+    ...(vars.base === 'light' ? chromeLight : chromeDark),
+
     BASE_FONT_FAMILY: vars.fontCode || typography.fonts.mono,
     BASE_FONT_SIZE: typography.size.s2 - 1,
     BASE_LINE_HEIGHT: '18px',
-    BASE_BACKGROUND_COLOR: color.lightest,
+    BASE_BACKGROUND_COLOR: 'transparent',
     BASE_COLOR: vars.textColor || color.darkest,
-    ARROW_COLOR: 'rgba(0,0,0,.2)',
+    ARROW_COLOR: opacify(0.2, vars.appBorderColor),
     ARROW_MARGIN_RIGHT: 4,
     ARROW_FONT_SIZE: 8,
     TREENODE_FONT_FAMILY: vars.fontCode || typography.fonts.mono,
diff --git a/lib/theming/src/themes/dark.ts b/lib/theming/src/themes/dark.ts
index afd7871045d..abdbf46a8d8 100644
--- a/lib/theming/src/themes/dark.ts
+++ b/lib/theming/src/themes/dark.ts
@@ -1,37 +1,39 @@
 import { create } from '../create';
-
-import { color, typography, background } from '../base';
+import { color, typography } from '../base';
 
 export default create({
+  // Is this a light theme or a dark theme?
+  base: 'dark',
+
   // Storybook-specific color palette
   colorPrimary: '#FF4785', // coral
   colorSecondary: '#1EA7FD', // ocean
-  // colorTertiary: '#FAFBFC', // neutral buttons
-  // colorAncillary: '#22a699', // for code
 
-  // UI colors
-  appBg: background.app,
-  // bgHoverItem: background.hoverable,
-  appBorderColor: color.border,
+  // UI
+  appBg: '#2f2f2f',
+  appContentBg: '#333',
+  appBorderColor: 'rgba(255,255,255,.1)',
   appBorderRadius: 4,
 
-  // Typography
+  // Fonts
   fontBase: typography.fonts.base,
   fontCode: typography.fonts.mono,
-  // mainTextSize: typography.size.s2 - 1, // 13px
-
-  // Text colors (dark on light)
 
-  textColor: color.darkest,
-  textInverseColor: color.lightest,
+  // Text colors
+  textColor: color.lightest,
+  textInverseColor: color.darkest,
 
-  // Text colors (light on dark)
-  // inverseTextColor: color.lightest,
-  // inverseTextBgColor: color.mediumdark,
-
-  barTextColor: color.mediumdark,
+  // Toolbar default and active colors
+  barTextColor: '#999999',
   barSelectedColor: color.secondary,
+  barBg: color.darkest,
+
+  // Form colors
+  inputBg: '#3f3f3f',
+  inputBorder: 'rgba(0,0,0,.3)',
+  inputTextColor: color.lightest,
+  inputBorderRadius: 4,
 
-  inputBg: color.lightest,
-  inputBorder: color.border,
+  // Brand logo/text
+  brand: null,
 });
diff --git a/lib/theming/src/themes/light.ts b/lib/theming/src/themes/light.ts
index affb4f47eb9..3c2ed12ff98 100644
--- a/lib/theming/src/themes/light.ts
+++ b/lib/theming/src/themes/light.ts
@@ -1,14 +1,17 @@
 import { create } from '../create';
-
 import { color, typography, background } from '../base';
 
 export default create({
+  // Is this a light theme or a dark theme?
+  base: 'light',
+
   // Storybook-specific color palette
   colorPrimary: '#FF4785', // coral
   colorSecondary: '#1EA7FD', // ocean
 
   // UI
   appBg: background.app,
+  appContentBg: color.lightest,
   appBorderColor: color.border,
   appBorderRadius: 4,
 
@@ -23,7 +26,7 @@ export default create({
   // Toolbar default and active colors
   barTextColor: color.mediumdark,
   barSelectedColor: color.secondary,
-  barBgColor: color.lightest,
+  barBg: color.lightest,
 
   // Form colors
   inputBg: color.lightest,
diff --git a/lib/ui/src/components/layout/__snapshots__/layout.stories.storyshot b/lib/ui/src/components/layout/__snapshots__/layout.stories.storyshot
index 84434154b8e..8521c926594 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;
-  opacity: 0.4;
+  color: inherit;
   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;
-  opacity: 0.4;
+  color: inherit;
   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;
-  opacity: 0.4;
+  color: inherit;
   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;
-  opacity: 0.4;
+  color: inherit;
   border-bottom-color: transparent;
 }
 
diff --git a/lib/ui/src/components/layout/container.js b/lib/ui/src/components/layout/container.js
index 33001204da0..db2c9573101 100644
--- a/lib/ui/src/components/layout/container.js
+++ b/lib/ui/src/components/layout/container.js
@@ -89,8 +89,8 @@ const Paper = styled.div(
           borderRadius: '0',
         }
       : {
-          background: 'white',
-          borderRadius: theme.borderRadius,
+          background: theme.background.content,
+          borderRadius: theme.appBorderRadius,
           overflow: 'hidden',
           boxShadow: '0 1px 5px 0 rgba(0, 0, 0, 0.1)',
         }
diff --git a/lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot b/lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot
index d66c3145c49..4118a023114 100644
--- a/lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot
+++ b/lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot
@@ -343,7 +343,7 @@ Array [
   border-bottom: 3px solid transparent;
   font-weight: bold;
   font-size: 13px;
-  opacity: 0.4;
+  color: inherit;
   border-bottom-color: transparent;
 }
 
diff --git a/lib/ui/src/components/preview/background.js b/lib/ui/src/components/preview/background.js
index 9963d498859..4c155ad6ef3 100644
--- a/lib/ui/src/components/preview/background.js
+++ b/lib/ui/src/components/preview/background.js
@@ -60,7 +60,7 @@ const Background = styled.div(
     height: '100%',
     transition: 'background .1s linear',
   },
-  ({ theme }) => ({ background: theme.background.preview })
+  ({ theme }) => ({ background: theme.background.content })
 );
 
 export { Grid, Background, Consumer as BackgroundConsumer, Provider as BackgroundProvider };
diff --git a/lib/ui/src/components/sidebar/NotificationItem.js b/lib/ui/src/components/sidebar/NotificationItem.js
index d5a53a3af06..be3a2297078 100644
--- a/lib/ui/src/components/sidebar/NotificationItem.js
+++ b/lib/ui/src/components/sidebar/NotificationItem.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@storybook/theming';
 import { Link } from '@storybook/router';
+import { rgba, lighten, darken } from 'polished';
 
 const NotificationText = styled.div();
 
@@ -12,9 +13,12 @@ const baseStyle = ({ theme }) => ({
   fontSize: theme.typography.size.s1,
   fontWeight: theme.typography.weight.bold,
   lineHeight: `16px`,
-  backgroundColor: 'rgba(50, 53, 71, 0.97)',
   boxShadow: '0 5px 15px 0 rgba(0, 0, 0, 0.1), 0 2px 5px 0 rgba(0, 0, 0, 0.05)',
-  color: `${theme.color.lightest}`,
+  color: theme.color.inverseText,
+  backgroundColor:
+    theme.base === 'light'
+      ? rgba(`${darken(1, theme.background.app)}`, 0.95)
+      : rgba(`${lighten(1, theme.background.app)}`, 0.95),
   textDecoration: 'none',
 });
 
diff --git a/lib/ui/src/components/sidebar/SidebarHeading.js b/lib/ui/src/components/sidebar/SidebarHeading.js
index 77ebd809f74..b45abadf499 100644
--- a/lib/ui/src/components/sidebar/SidebarHeading.js
+++ b/lib/ui/src/components/sidebar/SidebarHeading.js
@@ -8,6 +8,13 @@ import { StorybookLogo, WithTooltip, TooltipLinkList, Button, Icons } from '@sto
 const BrandArea = styled.div(({ theme }) => ({
   fontSize: theme.typography.size.s2,
   fontWeight: theme.typography.weight.bold,
+  '> *': {
+    maxHeight: 32,
+    maxWidth: 200,
+    height: 'auto',
+    width: 'auto',
+    display: 'block',
+  },
 }));
 
 const Logo = styled(StorybookLogo)({
diff --git a/lib/ui/src/components/sidebar/SidebarHeading.stories.js b/lib/ui/src/components/sidebar/SidebarHeading.stories.js
index f634af710a6..cf7713244d0 100644
--- a/lib/ui/src/components/sidebar/SidebarHeading.stories.js
+++ b/lib/ui/src/components/sidebar/SidebarHeading.stories.js
@@ -6,6 +6,18 @@ import SidebarHeading from './SidebarHeading';
 
 const { light: theme } = themes;
 
+const customizedBrand = `
+<svg width="64px" height="64px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <a xlink:href="https://storybook.js.org">
+    <g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <path d="M8.04798541,58.7875918 L6.07908839,6.32540407 C6.01406344,4.5927838 7.34257463,3.12440831 9.07303814,3.01625434 L53.6958037,0.227331489 C55.457209,0.117243658 56.974354,1.45590096 57.0844418,3.21730626 C57.0885895,3.28366922 57.0906648,3.35014546 57.0906648,3.41663791 L57.0906648,60.5834697 C57.0906648,62.3483119 55.6599776,63.7789992 53.8951354,63.7789992 C53.847325,63.7789992 53.7995207,63.7779262 53.7517585,63.775781 L11.0978899,61.8600599 C9.43669044,61.7854501 8.11034889,60.4492961 8.04798541,58.7875918 Z" id="path-1" fill="#FF4785" fill-rule="nonzero"></path>
+      <path d="M35.9095005,24.1768792 C35.9095005,25.420127 44.2838488,24.8242707 45.4080313,23.9509748 C45.4080313,15.4847538 40.8652557,11.0358878 32.5466666,11.0358878 C24.2280775,11.0358878 19.5673077,15.553972 19.5673077,22.3311017 C19.5673077,34.1346028 35.4965208,34.3605071 35.4965208,40.7987804 C35.4965208,42.606015 34.6115646,43.6790606 32.6646607,43.6790606 C30.127786,43.6790606 29.1248356,42.3834613 29.2428298,37.9783269 C29.2428298,37.0226907 19.5673077,36.7247626 19.2723223,37.9783269 C18.5211693,48.6535354 25.1720308,51.7326752 32.7826549,51.7326752 C40.1572906,51.7326752 45.939005,47.8018145 45.939005,40.6858282 C45.939005,28.035186 29.7738035,28.3740425 29.7738035,22.1051974 C29.7738035,19.5637737 31.6617103,19.2249173 32.7826549,19.2249173 C33.9625966,19.2249173 36.0864917,19.4328883 35.9095005,24.1768792 Z" id="path9_fill-path" fill="#FFFFFF" fill-rule="nonzero"></path>
+      <path d="M44.0461638,0.830433986 L50.1874092,0.446606143 L50.443532,7.7810017 C50.4527198,8.04410717 50.2468789,8.26484453 49.9837734,8.27403237 C49.871115,8.27796649 49.7607078,8.24184808 49.6721567,8.17209069 L47.3089847,6.3104681 L44.5110468,8.43287463 C44.3012992,8.591981 44.0022839,8.55092814 43.8431776,8.34118051 C43.7762017,8.25288717 43.742082,8.14401677 43.7466857,8.03329059 L44.0461638,0.830433986 Z" id="Path" fill="#FFFFFF"></path>
+    </g>
+  </a>
+</svg>
+`;
+
 export default {
   component: SidebarHeading,
   title: 'UI|Sidebar/SidebarHeading',
@@ -22,7 +34,7 @@ simple.storyData = { menu: menuItems };
 export const menuHighlighted = () => <SidebarHeading menuHighlighted menu={menuItems} />;
 
 export const customBrand = () => (
-  <ThemeProvider theme={{ ...theme, brand: 'custom brand' }}>
+  <ThemeProvider theme={{ ...theme, brand: customizedBrand }}>
     <SidebarHeading menu={menuItems} />
   </ThemeProvider>
 );
diff --git a/lib/ui/src/components/sidebar/SidebarItem.js b/lib/ui/src/components/sidebar/SidebarItem.js
index 020599318d9..c8e1625ebe5 100644
--- a/lib/ui/src/components/sidebar/SidebarItem.js
+++ b/lib/ui/src/components/sidebar/SidebarItem.js
@@ -1,21 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@storybook/theming';
+import { opacify, transparentize } from 'polished';
 
 import { Icons } from '@storybook/components';
 
 const Expander = styled.span(
-  {
+  ({ theme }) => ({
     display: 'block',
     width: 0,
     height: 0,
     marginRight: 6,
     borderTop: '3.5px solid transparent',
     borderBottom: '3.5px solid transparent',
-    // this needs to be inverted for the dark theme
-    borderLeft: `3.5px solid rgba(0,0,0,.2)`,
+    borderLeft: `3.5px solid ${opacify(0.2, theme.appBorderColor)}`,
     transition: 'transform .1s ease-out',
-  },
+  }),
 
   ({ isExpandable }) => (!isExpandable ? { borderLeftColor: 'transparent' } : {}),
 
@@ -72,11 +72,17 @@ export const Item = styled.div(
           cursor: 'default',
           background: theme.color.secondary,
           color: theme.color.lightest,
+          fontWeight: theme.typography.weight.bold,
         }
       : {
           cursor: 'pointer',
+          color:
+            theme.base === 'light'
+              ? theme.color.defaultText
+              : transparentize(0.2, theme.color.defaultText),
           '&:hover': {
-            background: 'rgba(0,0,0,.05)',
+            color: theme.color.defaultText,
+            background: theme.background.hoverable,
           },
         }),
   ({ theme, loading }) =>
diff --git a/lib/ui/src/components/sidebar/SidebarSearch.js b/lib/ui/src/components/sidebar/SidebarSearch.js
index 7a467e8a6b8..86f339823b0 100644
--- a/lib/ui/src/components/sidebar/SidebarSearch.js
+++ b/lib/ui/src/components/sidebar/SidebarSearch.js
@@ -52,27 +52,26 @@ const CancelButton = styled.button(({ theme }) => ({
     display: 'block',
     height: 8,
     width: 8,
-    color: theme.color.dark,
+    color: theme.input.color,
     transition: 'all 150ms ease-out',
   },
 
   '&:hover': {
     background: opacify(0.1, theme.appBorderColor),
-    '> svg': {
-      color: theme.color.darker,
-    },
   },
 }));
 
 const FilterForm = styled.form(({ theme, focussed }) => ({
   transition: 'all 150ms ease-out',
-  borderBottom: focussed ? `1px solid transparent` : '1px solid transparent',
-  borderBottomColor: focussed ? theme.color.dark : opacify(0.1, theme.appBorderColor),
+  borderBottom: '1px solid transparent',
+  borderBottomColor: focussed
+    ? opacify(0.3, theme.appBorderColor)
+    : opacify(0.1, theme.appBorderColor),
   outline: 0,
   position: 'relative',
 
   input: {
-    color: theme.color.darkest,
+    color: theme.input.color,
     fontSize: theme.typography.size.s2 - 1,
     lineHeight: '20px',
     paddingTop: '2px',
@@ -93,7 +92,8 @@ const FilterForm = styled.form(({ theme, focussed }) => ({
 
     path: {
       transition: 'all 150ms ease-out',
-      fill: focussed ? theme.color.dark : theme.color.mediumdark,
+      fill: 'currentColor',
+      opacity: focussed ? 1 : 0.3,
     },
   },
 }));
diff --git a/lib/ui/src/components/sidebar/SidebarSearch.stories.js b/lib/ui/src/components/sidebar/SidebarSearch.stories.js
index debaa77e8b1..6d98d261460 100644
--- a/lib/ui/src/components/sidebar/SidebarSearch.stories.js
+++ b/lib/ui/src/components/sidebar/SidebarSearch.stories.js
@@ -8,7 +8,7 @@ export default {
   title: 'UI|Sidebar/SidebarSearch',
   decorators: [
     storyFn => (
-      <div style={{ width: '240px', margin: '1rem', padding: '1rem', background: 'white' }}>
+      <div style={{ width: '240px', margin: '1rem', padding: '1rem', background: '#999' }}>
         {storyFn()}
       </div>
     ),
diff --git a/lib/ui/src/components/sidebar/SidebarSubheading.js b/lib/ui/src/components/sidebar/SidebarSubheading.js
index e8e73c52702..5b28f320b59 100644
--- a/lib/ui/src/components/sidebar/SidebarSubheading.js
+++ b/lib/ui/src/components/sidebar/SidebarSubheading.js
@@ -1,14 +1,14 @@
 import React from 'react';
-
+import { transparentize } from 'polished';
 import { styled } from '@storybook/theming';
 
 const Heading = styled.div(({ theme }) => ({
   letterSpacing: '0.35em',
   textTransform: 'uppercase',
-  fontWeight: theme.typography.weight.bold,
+  fontWeight: theme.typography.weight.black,
   fontSize: theme.typography.size.s1 - 1,
   lineHeight: '24px',
-  color: theme.color.mediumdark,
+  color: transparentize(0.5, theme.color.defaultText),
 }));
 
 const Subheading = props => <Heading {...props} />;
diff --git a/lib/ui/src/components/sidebar/__snapshots__/SidebarSubheading.stories.storyshot b/lib/ui/src/components/sidebar/__snapshots__/SidebarSubheading.stories.storyshot
index cd4ef2f8941..80ff86fa129 100644
--- a/lib/ui/src/components/sidebar/__snapshots__/SidebarSubheading.stories.storyshot
+++ b/lib/ui/src/components/sidebar/__snapshots__/SidebarSubheading.stories.storyshot
@@ -7,10 +7,10 @@ exports[`Storyshots UI|Sidebar/SidebarSubheading default 1`] = `
   -ms-letter-spacing: 0.35em;
   letter-spacing: 0.35em;
   text-transform: uppercase;
-  font-weight: 700;
+  font-weight: 900;
   font-size: 11px;
   line-height: 24px;
-  color: #999999;
+  color: rgba(51,51,51,0.5);
 }
 
 <div
diff --git a/lib/ui/src/settings/__snapshots__/about.stories.storyshot b/lib/ui/src/settings/__snapshots__/about.stories.storyshot
index 7937df77314..ed8deb18243 100644
--- a/lib/ui/src/settings/__snapshots__/about.stories.storyshot
+++ b/lib/ui/src/settings/__snapshots__/about.stories.storyshot
@@ -1525,6 +1525,7 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  background: #FFFFFF;
 }
 
 .emotion-20 {
@@ -1539,7 +1540,8 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #666666;
+  color: #333333;
+  background: #FFFFFF;
   font-size: 12px;
   line-height: 16px;
   font-weight: 700;