diff --git a/addons/a11y/src/components/A11YPanel.tsx b/addons/a11y/src/components/A11YPanel.tsx
index 194acca7be6d..a2d7a7fc73d8 100644
--- a/addons/a11y/src/components/A11YPanel.tsx
+++ b/addons/a11y/src/components/A11YPanel.tsx
@@ -22,9 +22,9 @@ export enum RuleType {
 
 const Icon = styled(Icons)(
   {
-    height: '12px',
-    width: '12px',
-    marginRight: '4px',
+    height: 12,
+    width: 12,
+    marginRight: 4,
   },
   ({ status, theme }: any) =>
     status === 'running'
diff --git a/addons/a11y/src/components/Report/Elements.tsx b/addons/a11y/src/components/Report/Elements.tsx
index ce713ec948a8..d2fc529b8d05 100644
--- a/addons/a11y/src/components/Report/Elements.tsx
+++ b/addons/a11y/src/components/Report/Elements.tsx
@@ -15,15 +15,15 @@ const ItemTitle = styled.span<{}>(({ theme }) => ({
   borderBottom: `1px solid ${theme.appBorderColor}`,
   width: '100%',
   display: 'flex',
-  paddingBottom: '6px',
-  marginBottom: '6px',
+  paddingBottom: 6,
+  marginBottom: 6,
   justifyContent: 'space-between',
 }));
 
 const HighlightToggleElement = styled.span({
   fontWeight: 'normal',
   alignSelf: 'center',
-  paddingRight: '15px',
+  paddingRight: 15,
   input: { margin: 0 },
 });
 
diff --git a/addons/a11y/src/components/Report/Info.tsx b/addons/a11y/src/components/Report/Info.tsx
index 5b1995fe4149..743a617c02f4 100644
--- a/addons/a11y/src/components/Report/Info.tsx
+++ b/addons/a11y/src/components/Report/Info.tsx
@@ -4,14 +4,14 @@ import { styled } from '@storybook/theming';
 import { Result } from 'axe-core';
 
 const Wrapper = styled.div({
-  padding: '12px',
-  marginBottom: '10px',
+  padding: 12,
+  marginBottom: 10,
 });
 const Help = styled.p({
   margin: '0 0 12px',
 });
 const Link = styled.a({
-  marginTop: '12px',
+  marginTop: 12,
   textDecoration: 'underline',
   color: 'inherit',
   display: 'block',
diff --git a/addons/a11y/src/components/Report/Item.tsx b/addons/a11y/src/components/Report/Item.tsx
index 9122ff53c674..2ece16f74a15 100644
--- a/addons/a11y/src/components/Report/Item.tsx
+++ b/addons/a11y/src/components/Report/Item.tsx
@@ -24,7 +24,7 @@ const Icon = styled<any, any>(Icons)(({ theme }) => ({
   width: 10,
   minWidth: 10,
   color: theme.color.mediumdark,
-  marginRight: '10px',
+  marginRight: 10,
   transition: 'transform 0.1s ease-in-out',
   alignSelf: 'center',
   display: 'inline-flex',
@@ -49,7 +49,7 @@ const HeaderBar = styled.div<{}>(({ theme }) => ({
 const HighlightToggleElement = styled.span({
   fontWeight: 'normal',
   float: 'right',
-  marginRight: '15px',
+  marginRight: 15,
   alignSelf: 'center',
   input: { margin: 0 },
 });
diff --git a/addons/a11y/src/components/Report/Rules.tsx b/addons/a11y/src/components/Report/Rules.tsx
index a7a61c3a6719..48fe2dd924aa 100644
--- a/addons/a11y/src/components/Report/Rules.tsx
+++ b/addons/a11y/src/components/Report/Rules.tsx
@@ -16,9 +16,9 @@ const impactColors = {
 const List = styled.div({
   display: 'flex',
   flexDirection: 'column',
-  paddingBottom: '4px',
-  paddingRight: '4px',
-  paddingTop: '4px',
+  paddingBottom: 4,
+  paddingRight: 4,
+  paddingTop: 4,
   fontWeight: '400',
 } as any);
 
@@ -26,23 +26,23 @@ const Item = styled.div(({ elementWidth }: { elementWidth: number }) => {
   const maxWidthBeforeBreak = 407;
   return {
     flexDirection: elementWidth > maxWidthBeforeBreak ? 'row' : 'inherit',
-    marginBottom: elementWidth > maxWidthBeforeBreak ? '6px' : '12px',
+    marginBottom: elementWidth > maxWidthBeforeBreak ? 6 : 12,
     display: elementWidth > maxWidthBeforeBreak ? 'flex' : 'block',
   };
 });
 
 const StyledBadge = styled(Badge)(({ status }: { status: string }) => ({
   padding: '2px 8px',
-  marginBottom: '3px',
-  minWidth: '65px',
+  marginBottom: 3,
+  minWidth: 65,
   maxWidth: 'fit-content',
   width: '100%',
   textAlign: 'center',
 }));
 
 const Message = styled.div({
-  paddingLeft: '6px',
-  paddingRight: '23px',
+  paddingLeft: 6,
+  paddingRight: 23,
 });
 
 const Status = styled.div(({ passes, impact }: { passes: boolean; impact: string }) => ({
@@ -51,8 +51,8 @@ const Status = styled.div(({ passes, impact }: { passes: boolean; impact: string
   alignItems: 'center',
   color: passes ? impactColors.success : (impactColors as any)[impact],
   '& > svg': {
-    height: '16px',
-    width: '16px',
+    height: 16,
+    width: 16,
   },
 }));
 
diff --git a/addons/a11y/src/components/Report/Tags.tsx b/addons/a11y/src/components/Report/Tags.tsx
index 62968af6aa31..e11245f55620 100644
--- a/addons/a11y/src/components/Report/Tags.tsx
+++ b/addons/a11y/src/components/Report/Tags.tsx
@@ -11,7 +11,7 @@ const Wrapper = styled.div({
 
 const Item = styled.div<{}>(({ theme }) => ({
   margin: '0 6px',
-  padding: '5px',
+  padding: 5,
   border: `1px solid ${theme.appBorderColor}`,
   borderRadius: theme.appBorderRadius,
 }));
diff --git a/addons/a11y/src/components/Tabs.tsx b/addons/a11y/src/components/Tabs.tsx
index 4ebeac7c4900..26b6febaa040 100644
--- a/addons/a11y/src/components/Tabs.tsx
+++ b/addons/a11y/src/components/Tabs.tsx
@@ -18,8 +18,8 @@ const Container = styled.div({
 const HighlightToggleLabel = styled.label<{}>(({ theme }) => ({
   cursor: 'pointer',
   userSelect: 'none',
-  marginBottom: '3px',
-  marginRight: '3px',
+  marginBottom: 3,
+  marginRight: 3,
   color: theme.color.dark,
 }));
 
@@ -31,7 +31,7 @@ const GlobalToggle = styled.div(({ elementWidth }: { elementWidth: number }) =>
     padding: elementWidth > maxWidthBeforeBreak ? '12px 15px 10px 0' : '12px 0px 3px 12px',
     height: '40px',
     border: 'none',
-    marginTop: elementWidth > maxWidthBeforeBreak ? '-40px' : '0px',
+    marginTop: elementWidth > maxWidthBeforeBreak ? -40 : 0,
     float: elementWidth > maxWidthBeforeBreak ? 'right' : 'left',
     display: elementWidth > maxWidthBeforeBreak ? 'flex' : 'block',
     alignItems: 'center',
@@ -39,10 +39,10 @@ const GlobalToggle = styled.div(({ elementWidth }: { elementWidth: number }) =>
     borderBottom: elementWidth > maxWidthBeforeBreak ? 'none' : '1px solid rgba(0,0,0,.1)',
 
     input: {
-      marginLeft: '10',
-      marginRight: '0',
-      marginTop: '0',
-      marginBottom: '0',
+      marginLeft: 10,
+      marginRight: 0,
+      marginTop: 0,
+      marginBottom: 0,
     },
   };
 });
diff --git a/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap b/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap
index f4267e78d817..db6f667c93a6 100644
--- a/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap
+++ b/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap
@@ -229,7 +229,6 @@ exports[`A11YPanel should render report 1`] = `
                 "15paq49": true,
                 "1977chw": true,
                 "19mcg9j": true,
-                "1ez3l8h": true,
                 "1imo1gr": true,
                 "1kbt4a0": true,
                 "1l7fvsg": true,
@@ -239,6 +238,7 @@ exports[`A11YPanel should render report 1`] = `
                 "6z0ulf": true,
                 "animation-u07e3c": true,
                 "aq4p19": true,
+                "f68qle": true,
                 "fg630j": true,
                 "iau1th": true,
                 "jb2puo": true,
@@ -620,13 +620,13 @@ exports[`A11YPanel should render report 1`] = `
                     data-emotion="css"
                   >
                     
-                    .css-1ez3l8h{cursor:pointer;font-size:14px;padding:12px 0px 3px 12px;height:40px;border:none;margin-top:0px;float:left;display:block;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;border-bottom:1px solid rgba(0,0,0,.1);}
+                    .css-f68qle{cursor:pointer;font-size:14px;padding:12px 0px 3px 12px;height:40px;border:none;margin-top:0;float:left;display:block;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;border-bottom:1px solid rgba(0,0,0,.1);}
                   </style>
                   <style
                     data-emotion="css"
                   >
                     
-                    .css-1ez3l8h input{margin-left:10;margin-right:0;margin-top:0;margin-bottom:0;}
+                    .css-f68qle input{margin-left:10px;margin-right:0;margin-top:0;margin-bottom:0;}
                   </style>
                   <style
                     data-emotion="css"
@@ -846,13 +846,13 @@ exports[`A11YPanel should render report 1`] = `
                     data-emotion="css"
                   >
                     
-                    .css-1ez3l8h{cursor:pointer;font-size:14px;padding:12px 0px 3px 12px;height:40px;border:none;margin-top:0px;float:left;display:block;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;border-bottom:1px solid rgba(0,0,0,.1);}
+                    .css-f68qle{cursor:pointer;font-size:14px;padding:12px 0px 3px 12px;height:40px;border:none;margin-top:0;float:left;display:block;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;border-bottom:1px solid rgba(0,0,0,.1);}
                   </style>,
                   <style
                     data-emotion="css"
                   >
                     
-                    .css-1ez3l8h input{margin-left:10;margin-right:0;margin-top:0;margin-bottom:0;}
+                    .css-f68qle input{margin-left:10px;margin-right:0;margin-top:0;margin-bottom:0;}
                   </style>,
                   <style
                     data-emotion="css"
diff --git a/addons/actions/src/components/ActionLogger/style.tsx b/addons/actions/src/components/ActionLogger/style.tsx
index 54abfbec1566..450e407a697c 100644
--- a/addons/actions/src/components/ActionLogger/style.tsx
+++ b/addons/actions/src/components/ActionLogger/style.tsx
@@ -3,7 +3,7 @@ import { opacify } from 'polished';
 
 export const Action = styled.div({
   display: 'flex',
-  padding: '0',
+  padding: 0,
   borderLeft: '5px solid transparent',
   borderBottom: '1px solid transparent',
   transition: 'all 0.1s',
@@ -17,7 +17,7 @@ export const Counter = styled.div<{}>(({ theme }) => ({
   fontWeight: theme.typography.weight.bold,
   lineHeight: 1,
   padding: '1px 5px',
-  borderRadius: '20px',
+  borderRadius: 20,
   margin: '2px 0px',
 }));
 
diff --git a/addons/events/src/components/Panel.tsx b/addons/events/src/components/Panel.tsx
index 6c79a5ff2e5d..ed1ff169fde5 100644
--- a/addons/events/src/components/Panel.tsx
+++ b/addons/events/src/components/Panel.tsx
@@ -11,7 +11,7 @@ import { Event as EventType, OnEmitEvent } from '../index';
 const Wrapper = styled.div({
   width: '100%',
   boxSizing: 'border-box',
-  padding: '10px',
+  padding: 10,
   minHeight: '100%',
 });
 
diff --git a/addons/info/src/__snapshots__/index.test.js.snap b/addons/info/src/__snapshots__/index.test.js.snap
index c32b3a60c769..7dc48103b4f2 100644
--- a/addons/info/src/__snapshots__/index.test.js.snap
+++ b/addons/info/src/__snapshots__/index.test.js.snap
@@ -118,7 +118,7 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
           "cursor": "pointer",
           "display": "block",
           "fontFamily": "sans-serif",
-          "fontSize": "12px",
+          "fontSize": 12,
           "padding": "5px 15px",
           "position": "fixed",
           "right": 0,
@@ -253,7 +253,7 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
           "cursor": "pointer",
           "display": "block",
           "fontFamily": "sans-serif",
-          "fontSize": "12px",
+          "fontSize": 12,
           "padding": "5px 15px",
           "position": "fixed",
           "right": 0,
@@ -386,7 +386,7 @@ exports[`addon Info should render <Info /> for memoized component 1`] = `
           "cursor": "pointer",
           "display": "block",
           "fontFamily": "sans-serif",
-          "fontSize": "12px",
+          "fontSize": 12,
           "padding": "5px 15px",
           "position": "fixed",
           "right": 0,
diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js
index 051d603cae8b..42f5026f0808 100644
--- a/addons/info/src/components/Story.js
+++ b/addons/info/src/components/Story.js
@@ -18,7 +18,7 @@ const stylesheetBase = {
   button: {
     base: {
       fontFamily: 'sans-serif',
-      fontSize: '12px',
+      fontSize: 12,
       display: 'block',
       position: 'fixed',
       border: 'none',
diff --git a/addons/info/src/components/markdown/pre/copyButton.js b/addons/info/src/components/markdown/pre/copyButton.js
index e92c0da3166b..cf44fa8c3b53 100644
--- a/addons/info/src/components/markdown/pre/copyButton.js
+++ b/addons/info/src/components/markdown/pre/copyButton.js
@@ -16,11 +16,11 @@ function CopyButton({ onClick, toggled }) {
         alignSelf: 'flex-start',
         flexShrink: '0',
         overflow: 'hidden',
-        borderWidth: '1px',
+        borderWidth: 1,
         borderStyle: 'solid',
         borderColor: 'rgb(238, 238, 238)',
         borderImage: 'initial',
-        borderRadius: '3px',
+        borderRadius: 3,
         padding: '3px 10px',
       }}
     >
diff --git a/addons/jest/src/components/Message.tsx b/addons/jest/src/components/Message.tsx
index 2382b4c3116c..b87dccac668a 100644
--- a/addons/jest/src/components/Message.tsx
+++ b/addons/jest/src/components/Message.tsx
@@ -22,27 +22,27 @@ class TestDetail {
 }
 const StackTrace = styled.pre<{}>(({ theme }) => ({
   background: theme.color.lighter,
-  paddingTop: '4px',
-  paddingBottom: '4px',
-  paddingLeft: '6px',
-  borderRadius: '2px',
+  paddingTop: 4,
+  paddingBottom: 4,
+  paddingLeft: 6,
+  borderRadius: 2,
   overflow: 'auto',
   margin: '10px 30px 10px 30px',
   whiteSpace: 'pre',
 }));
 
 const Results = styled.div({
-  paddingTop: '10px',
-  marginLeft: '31px',
-  marginRight: '30px',
+  paddingTop: 10,
+  marginLeft: 31,
+  marginRight: 30,
 });
 
 const Description = styled.div<{}>(({ theme }) => ({
-  paddingBottom: '10px',
-  paddingTop: '10px',
+  paddingBottom: 10,
+  paddingTop: 10,
   borderBottom: theme.appBorderColor,
-  marginLeft: '31px',
-  marginRight: '30px',
+  marginLeft: 31,
+  marginRight: 30,
   overflowWrap: 'break-word',
 }));
 
diff --git a/addons/jest/src/components/Panel.tsx b/addons/jest/src/components/Panel.tsx
index de8f6fe60718..e085d93d4cf6 100644
--- a/addons/jest/src/components/Panel.tsx
+++ b/addons/jest/src/components/Panel.tsx
@@ -26,10 +26,10 @@ const Item = styled.li({
 
 const ProgressWrapper = styled.div({
   position: 'relative',
-  height: '10px',
-  width: '30px',
+  height: 10,
+  width: 30,
   display: 'flex',
-  top: '-2px',
+  top: -2,
 });
 
 const SuiteHead = styled.div({
@@ -37,8 +37,8 @@ const SuiteHead = styled.div({
   alignItems: 'baseline',
   position: 'absolute',
   zIndex: 2,
-  right: '20px',
-  marginTop: '15px',
+  right: 20,
+  marginTop: 15,
 });
 
 const SuiteTotals = styled(({ result, className, width }) => (
@@ -62,7 +62,7 @@ const SuiteTotals = styled(({ result, className, width }) => (
   alignItems: 'center',
   color: theme.color.dark,
   fontSize: '14px',
-  marginTop: '-5px',
+  marginTop: -5,
   '& > *': {
     marginRight: 10,
   },
@@ -70,8 +70,8 @@ const SuiteTotals = styled(({ result, className, width }) => (
 
 const SuiteProgressPortion = styled.div<{ color: any; progressPercent: number }>(
   ({ theme, color, progressPercent }) => ({
-    height: '6px',
-    top: '3px',
+    height: 6,
+    top: 3,
     width: `${progressPercent}%`,
     backgroundColor: color,
   })
diff --git a/addons/jest/src/components/Result.tsx b/addons/jest/src/components/Result.tsx
index f0eb3e9e015a..14cbe8d50c16 100644
--- a/addons/jest/src/components/Result.tsx
+++ b/addons/jest/src/components/Result.tsx
@@ -34,7 +34,7 @@ const Icon = styled<any, any>(Icons)(({ theme }) => ({
   width: 10,
   minWidth: 10,
   color: theme.color.mediumdark,
-  marginRight: '10px',
+  marginRight: 10,
   transition: 'transform 0.1s ease-in-out',
   alignSelf: 'center',
   display: 'inline-flex',
diff --git a/addons/jest/src/styles.js b/addons/jest/src/styles.js
deleted file mode 100644
index 19a9ea6943f6..000000000000
--- a/addons/jest/src/styles.js
+++ /dev/null
@@ -1,573 +0,0 @@
-import { document } from 'global';
-
-const styles = `
-  @font-face {
-    font-family: octicons-link;
-    src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAZwABAAAAAACFQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEU0lHAAAGaAAAAAgAAAAIAAAAAUdTVUIAAAZcAAAACgAAAAoAAQAAT1MvMgAAAyQAAABJAAAAYFYEU3RjbWFwAAADcAAAAEUAAACAAJThvmN2dCAAAATkAAAABAAAAAQAAAAAZnBnbQAAA7gAAACyAAABCUM+8IhnYXNwAAAGTAAAABAAAAAQABoAI2dseWYAAAFsAAABPAAAAZwcEq9taGVhZAAAAsgAAAA0AAAANgh4a91oaGVhAAADCAAAABoAAAAkCA8DRGhtdHgAAAL8AAAADAAAAAwGAACfbG9jYQAAAsAAAAAIAAAACABiATBtYXhwAAACqAAAABgAAAAgAA8ASm5hbWUAAAToAAABQgAAAlXu73sOcG9zdAAABiwAAAAeAAAAME3QpOBwcmVwAAAEbAAAAHYAAAB/aFGpk3jaTY6xa8JAGMW/O62BDi0tJLYQincXEypYIiGJjSgHniQ6umTsUEyLm5BV6NDBP8Tpts6F0v+k/0an2i+itHDw3v2+9+DBKTzsJNnWJNTgHEy4BgG3EMI9DCEDOGEXzDADU5hBKMIgNPZqoD3SilVaXZCER3/I7AtxEJLtzzuZfI+VVkprxTlXShWKb3TBecG11rwoNlmmn1P2WYcJczl32etSpKnziC7lQyWe1smVPy/Lt7Kc+0vWY/gAgIIEqAN9we0pwKXreiMasxvabDQMM4riO+qxM2ogwDGOZTXxwxDiycQIcoYFBLj5K3EIaSctAq2kTYiw+ymhce7vwM9jSqO8JyVd5RH9gyTt2+J/yUmYlIR0s04n6+7Vm1ozezUeLEaUjhaDSuXHwVRgvLJn1tQ7xiuVv/ocTRF42mNgZGBgYGbwZOBiAAFGJBIMAAizAFoAAABiAGIAznjaY2BkYGAA4in8zwXi+W2+MjCzMIDApSwvXzC97Z4Ig8N/BxYGZgcgl52BCSQKAA3jCV8CAABfAAAAAAQAAEB42mNgZGBg4f3vACQZQABIMjKgAmYAKEgBXgAAeNpjYGY6wTiBgZWBg2kmUxoDA4MPhGZMYzBi1AHygVLYQUCaawqDA4PChxhmh/8ODDEsvAwHgMKMIDnGL0x7gJQCAwMAJd4MFwAAAHjaY2BgYGaA4DAGRgYQkAHyGMF8NgYrIM3JIAGVYYDT+AEjAwuDFpBmA9KMDEwMCh9i/v8H8sH0/4dQc1iAmAkALaUKLgAAAHjaTY9LDsIgEIbtgqHUPpDi3gPoBVyRTmTddOmqTXThEXqrob2gQ1FjwpDvfwCBdmdXC5AVKFu3e5MfNFJ29KTQT48Ob9/lqYwOGZxeUelN2U2R6+cArgtCJpauW7UQBqnFkUsjAY/kOU1cP+DAgvxwn1chZDwUbd6CFimGXwzwF6tPbFIcjEl+vvmM/byA48e6tWrKArm4ZJlCbdsrxksL1AwWn/yBSJKpYbq8AXaaTb8AAHja28jAwOC00ZrBeQNDQOWO//sdBBgYGRiYWYAEELEwMTE4uzo5Zzo5b2BxdnFOcALxNjA6b2ByTswC8jYwg0VlNuoCTWAMqNzMzsoK1rEhNqByEyerg5PMJlYuVueETKcd/89uBpnpvIEVomeHLoMsAAe1Id4AAAAAAAB42oWQT07CQBTGv0JBhagk7HQzKxca2sJCE1hDt4QF+9JOS0nbaaYDCQfwCJ7Au3AHj+LO13FMmm6cl7785vven0kBjHCBhfpYuNa5Ph1c0e2Xu3jEvWG7UdPDLZ4N92nOm+EBXuAbHmIMSRMs+4aUEd4Nd3CHD8NdvOLTsA2GL8M9PODbcL+hD7C1xoaHeLJSEao0FEW14ckxC+TU8TxvsY6X0eLPmRhry2WVioLpkrbp84LLQPGI7c6sOiUzpWIWS5GzlSgUzzLBSikOPFTOXqly7rqx0Z1Q5BAIoZBSFihQYQOOBEdkCOgXTOHA07HAGjGWiIjaPZNW13/+lm6S9FT7rLHFJ6fQbkATOG1j2OFMucKJJsxIVfQORl+9Jyda6Sl1dUYhSCm1dyClfoeDve4qMYdLEbfqHf3O/AdDumsjAAB42mNgYoAAZQYjBmyAGYQZmdhL8zLdDEydARfoAqIAAAABAAMABwAKABMAB///AA8AAQAAAAAAAAAAAAAAAAABAAAAAA==) format('woff');
-  }
-  .markdown-body {
-    -ms-text-size-adjust: 100%;
-    -webkit-text-size-adjust: 100%;
-    line-height: 1.5;
-    color: #333;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-    font-size: 16px;
-    line-height: 1.5;
-    word-wrap: break-word;
-  }
-  .markdown-body .pl-c {
-    color: #969896;
-  }
-  .markdown-body .pl-c1,
-  .markdown-body .pl-s .pl-v {
-    color: #0086b3;
-  }
-  .markdown-body .pl-e,
-  .markdown-body .pl-en {
-    color: #795da3;
-  }
-  .markdown-body .pl-smi,
-  .markdown-body .pl-s .pl-s1 {
-    color: #333;
-  }
-  .markdown-body .pl-ent {
-    color: #63a35c;
-  }
-  .markdown-body .pl-k {
-    color: #a71d5d;
-  }
-  .markdown-body .pl-s,
-  .markdown-body .pl-pds,
-  .markdown-body .pl-s .pl-pse .pl-s1,
-  .markdown-body .pl-sr,
-  .markdown-body .pl-sr .pl-cce,
-  .markdown-body .pl-sr .pl-sre,
-  .markdown-body .pl-sr .pl-sra {
-    color: #183691;
-  }
-  .markdown-body .pl-v {
-    color: #ed6a43;
-  }
-  .markdown-body .pl-id {
-    color: #b52a1d;
-  }
-  .markdown-body .pl-ii {
-    color: #f8f8f8;
-    background-color: #b52a1d;
-  }
-  .markdown-body .pl-sr .pl-cce {
-    font-weight: bold;
-    color: #63a35c;
-  }
-  .markdown-body .pl-ml {
-    color: #693a17;
-  }
-  .markdown-body .pl-mh,
-  .markdown-body .pl-mh .pl-en,
-  .markdown-body .pl-ms {
-    font-weight: bold;
-    color: #1d3e81;
-  }
-  .markdown-body .pl-mq {
-    color: #008080;
-  }
-  .markdown-body .pl-mi {
-    font-style: italic;
-    color: #333;
-  }
-  .markdown-body .pl-mb {
-    font-weight: bold;
-    color: #333;
-  }
-  .markdown-body .pl-md {
-    color: #bd2c00;
-    background-color: #ffecec;
-  }
-  .markdown-body .pl-mi1 {
-    color: #55a532;
-    background-color: #eaffea;
-  }
-  .markdown-body .pl-mdr {
-    font-weight: bold;
-    color: #795da3;
-  }
-  .markdown-body .pl-mo {
-    color: #1d3e81;
-  }
-  .markdown-body .octicon {
-    display: inline-block;
-    vertical-align: text-top;
-    fill: currentColor;
-  }
-  .markdown-body a {
-    background-color: transparent;
-    -webkit-text-decoration-skip: objects;
-  }
-  .markdown-body a:active,
-  .markdown-body a:hover {
-    outline-width: 0;
-  }
-  .markdown-body strong {
-    font-weight: inherit;
-  }
-  .markdown-body strong {
-    font-weight: bolder;
-  }
-  .markdown-body h1 {
-    font-size: 2em;
-    margin: 0.67em 0;
-  }
-  .markdown-body img {
-    border-style: none;
-  }
-  .markdown-body svg:not(:root) {
-    overflow: hidden;
-  }
-  .markdown-body code,
-  .markdown-body kbd,
-  .markdown-body pre {
-    font-family: monospace, monospace;
-    font-size: 1em;
-  }
-  .markdown-body hr {
-    box-sizing: content-box;
-    height: 0;
-    overflow: visible;
-  }
-  .markdown-body input {
-    font: inherit;
-    margin: 0;
-  }
-  .markdown-body input {
-    overflow: visible;
-  }
-  .markdown-body [type="checkbox"] {
-    box-sizing: border-box;
-    padding: 0;
-  }
-  .markdown-body * {
-    box-sizing: border-box;
-  }
-  .markdown-body input {
-    font-family: inherit;
-    font-size: inherit;
-    line-height: inherit;
-  }
-  .markdown-body a {
-  color: #4078c0;
-    text-decoration: none;
-  }
-  .markdown-body a:hover,
-  .markdown-body a:active {
-    text-decoration: underline;
-  }
-  .markdown-body strong {
-    font-weight: 600;
-  }
-  .markdown-body hr {
-    height: 0;
-    margin: 15px 0;
-    overflow: hidden;
-    background: transparent;
-    border: 0;
-    border-bottom: 1px solid #ddd;
-  }
-  .markdown-body hr::before {
-    display: table;
-    content: "";
-  }
-  .markdown-body hr::after {
-    display: table;
-    clear: both;
-    content: "";
-  }
-  .markdown-body table {
-    border-spacing: 0;
-    border-collapse: collapse;
-  }
-  .markdown-body td,
-  .markdown-body th {
-    padding: 0;
-  }
-  .markdown-body h1,
-  .markdown-body h2,
-  .markdown-body h3,
-  .markdown-body h4,
-  .markdown-body h5,
-  .markdown-body h6 {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-  .markdown-body h1 {
-    font-size: 32px;
-    font-weight: 600;
-  }
-  .markdown-body h2 {
-    font-size: 24px;
-    font-weight: 600;
-  }
-  .markdown-body h3 {
-    font-size: 20px;
-    font-weight: 600;
-  }
-  .markdown-body h4 {
-    font-size: 16px;
-    font-weight: 600;
-  }
-  .markdown-body h5 {
-    font-size: 14px;
-    font-weight: 600;
-  }
-  .markdown-body h6 {
-    font-size: 12px;
-    font-weight: 600;
-  }
-  .markdown-body p {
-    margin-top: 0;
-    margin-bottom: 10px;
-  }
-  .markdown-body blockquote {
-    margin: 0;
-  }
-  .markdown-body ul,
-  .markdown-body ol {
-    padding-left: 0;
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-  .markdown-body ol ol,
-  .markdown-body ul ol {
-    list-style-type: lower-roman;
-  }
-  .markdown-body ul ul ol,
-  .markdown-body ul ol ol,
-  .markdown-body ol ul ol,
-  .markdown-body ol ol ol {
-    list-style-type: lower-alpha;
-  }
-  .markdown-body dd {
-    margin-left: 0;
-  }
-  .markdown-body code {
-    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
-    font-size: 12px;
-  }
-  .markdown-body pre {
-    margin-top: 0;
-    margin-bottom: 0;
-    font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
-  }
-  .markdown-body .octicon {
-    vertical-align: text-bottom;
-  }
-  .markdown-body input {
-    -webkit-font-feature-settings: "liga" 0;
-    font-feature-settings: "liga" 0;
-  }
-  .markdown-body::before {
-    display: table;
-    content: "";
-  }
-  .markdown-body::after {
-    display: table;
-    clear: both;
-    content: "";
-  }
-  .markdown-body>*:first-child {
-    margin-top: 0 !important;
-  }
-  .markdown-body>*:last-child {
-    margin-bottom: 0 !important;
-  }
-  .markdown-body a:not([href]) {
-    color: inherit;
-    text-decoration: none;
-  }
-  .markdown-body .anchor {
-    float: left;
-    padding-right: 4px;
-    margin-left: -20px;
-    line-height: 1;
-  }
-  .markdown-body .anchor:focus {
-    outline: none;
-  }
-  .markdown-body p,
-  .markdown-body blockquote,
-  .markdown-body ul,
-  .markdown-body ol,
-  .markdown-body dl,
-  .markdown-body table,
-  .markdown-body pre {
-    margin-top: 0;
-    margin-bottom: 16px;
-  }
-  .markdown-body hr {
-    height: 0.25em;
-    padding: 0;
-    margin: 24px 0;
-    background-color: #e7e7e7;
-    border: 0;
-  }
-  .markdown-body blockquote {
-    padding: 0 1em;
-    color: #777;
-    border-left: 0.25em solid #ddd;
-  }
-  .markdown-body blockquote>:first-child {
-    margin-top: 0;
-  }
-  .markdown-body blockquote>:last-child {
-    margin-bottom: 0;
-  }
-  .markdown-body kbd {
-    display: inline-block;
-    padding: 3px 5px;
-    font-size: 11px;
-    line-height: 10px;
-    color: #555;
-    vertical-align: middle;
-    background-color: #fcfcfc;
-    border: solid 1px #ccc;
-    border-bottom-color: #bbb;
-    border-radius: 3px;
-    box-shadow: inset 0 -1px 0 #bbb;
-  }
-  .markdown-body h1,
-  .markdown-body h2,
-  .markdown-body h3,
-  .markdown-body h4,
-  .markdown-body h5,
-  .markdown-body h6 {
-    margin-top: 24px;
-    margin-bottom: 16px;
-    font-weight: 600;
-    line-height: 1.25;
-  }
-  .markdown-body h1 .octicon-link,
-  .markdown-body h2 .octicon-link,
-  .markdown-body h3 .octicon-link,
-  .markdown-body h4 .octicon-link,
-  .markdown-body h5 .octicon-link,
-  .markdown-body h6 .octicon-link {
-    color: #000;
-    vertical-align: middle;
-    visibility: hidden;
-  }
-  .markdown-body h1:hover .anchor,
-  .markdown-body h2:hover .anchor,
-  .markdown-body h3:hover .anchor,
-  .markdown-body h4:hover .anchor,
-  .markdown-body h5:hover .anchor,
-  .markdown-body h6:hover .anchor {
-    text-decoration: none;
-  }
-  .markdown-body h1:hover .anchor .octicon-link,
-  .markdown-body h2:hover .anchor .octicon-link,
-  .markdown-body h3:hover .anchor .octicon-link,
-  .markdown-body h4:hover .anchor .octicon-link,
-  .markdown-body h5:hover .anchor .octicon-link,
-  .markdown-body h6:hover .anchor .octicon-link {
-    visibility: visible;
-  }
-  .markdown-body h1 {
-    padding-bottom: 0.3em;
-    font-size: 2em;
-    border-bottom: 1px solid #eee;
-  }
-  .markdown-body h2 {
-    padding-bottom: 0.3em;
-    font-size: 1.5em;
-    border-bottom: 1px solid #eee;
-  }
-  .markdown-body h3 {
-    font-size: 1.25em;
-  }
-  .markdown-body h4 {
-    font-size: 1em;
-  }
-  .markdown-body h5 {
-    font-size: 0.875em;
-  }
-  .markdown-body h6 {
-    font-size: 0.85em;
-    color: #777;
-  }
-  .markdown-body ul,
-  .markdown-body ol {
-    padding-left: 2em;
-  }
-  .markdown-body ul ul,
-  .markdown-body ul ol,
-  .markdown-body ol ol,
-  .markdown-body ol ul {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-  .markdown-body li>p {
-    margin-top: 16px;
-  }
-  .markdown-body li+li {
-    margin-top: 0.25em;
-  }
-  .markdown-body dl {
-    padding: 0;
-  }
-  .markdown-body dl dt {
-    padding: 0;
-    margin-top: 16px;
-    font-size: 1em;
-    font-style: italic;
-    font-weight: bold;
-  }
-  .markdown-body dl dd {
-    padding: 0 16px;
-    margin-bottom: 16px;
-  }
-  .markdown-body table {
-    display: block;
-    width: 100%;
-    overflow: auto;
-  }
-  .markdown-body table th {
-    font-weight: bold;
-  }
-  .markdown-body table th,
-  .markdown-body table td {
-    padding: 6px 13px;
-    border: 1px solid #ddd;
-  }
-  .markdown-body table tr {
-    background-color: #fff;
-    border-top: 1px solid #ccc;
-  }
-  .markdown-body table tr:nth-child(2n) {
-    background-color: #f8f8f8;
-  }
-  .markdown-body img {
-    max-width: 100%;
-    box-sizing: content-box;
-    background-color: #fff;
-  }
-  .markdown-body code {
-    padding: 0;
-    padding-top: 0.2em;
-    padding-bottom: 0.2em;
-    margin: 0;
-    font-size: 85%;
-    background-color: rgba(0,0,0,0.04);
-    border-radius: 3px;
-  }
-  .markdown-body code::before,
-  .markdown-body code::after {
-    letter-spacing: -0.2em;
-    content: " ";
-  }
-  .markdown-body pre {
-    word-wrap: normal;
-  }
-  .markdown-body pre>code {
-    padding: 0;
-    margin: 0;
-    font-size: 100%;
-    word-break: normal;
-    white-space: pre;
-    background: transparent;
-    border: 0;
-  }
-  .markdown-body .highlight {
-    margin-bottom: 16px;
-  }
-  .markdown-body .highlight pre {
-    margin-bottom: 0;
-    word-break: normal;
-  }
-  .markdown-body .highlight pre,
-  .markdown-body pre {
-    padding: 16px;
-    overflow: auto;
-    font-size: 85%;
-    line-height: 1.45;
-    background-color: #f7f7f7;
-    border-radius: 3px;
-  }
-  .markdown-body pre code {
-    display: inline;
-    max-width: auto;
-    padding: 0;
-    margin: 0;
-    overflow: visible;
-    line-height: inherit;
-    word-wrap: normal;
-    background-color: transparent;
-    border: 0;
-  }
-  .markdown-body pre code::before,
-  .markdown-body pre code::after {
-    content: normal;
-  }
-  .markdown-body .pl-0 {
-    padding-left: 0 !important;
-  }
-  .markdown-body .pl-1 {
-    padding-left: 3px !important;
-  }
-  .markdown-body .pl-2 {
-    padding-left: 6px !important;
-  }
-  .markdown-body .pl-3 {
-    padding-left: 12px !important;
-  }
-  .markdown-body .pl-4 {
-    padding-left: 24px !important;
-  }
-  .markdown-body .pl-5 {
-    padding-left: 36px !important;
-  }
-  .markdown-body .pl-6 {
-    padding-left: 48px !important;
-  }
-  .markdown-body .full-commit .btn-outline:not(:disabled):hover {
-    color: #4078c0;
-    border: 1px solid #4078c0;
-  }
-  .markdown-body kbd {
-    display: inline-block;
-    padding: 3px 5px;
-    font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
-    line-height: 10px;
-    color: #555;
-    vertical-align: middle;
-    background-color: #fcfcfc;
-    border: solid 1px #ccc;
-    border-bottom-color: #bbb;
-    border-radius: 3px;
-    box-shadow: inset 0 -1px 0 #bbb;
-  }
-  .markdown-body :checked+.radio-label {
-    position: relative;
-    z-index: 1;
-    border-color: #4078c0;
-  }
-  .markdown-body .task-list-item {
-    list-style-type: none;
-  }
-  .markdown-body .task-list-item+.task-list-item {
-    margin-top: 3px;
-  }
-  .markdown-body .task-list-item input {
-    margin: 0 0.2em 0.25em -1.6em;
-    vertical-align: middle;
-  }
-  .markdown-body hr {
-    border-bottom-color: #eee;
-  }
-`;
-
-if (document && !document.getElementById('github-markdown-css')) {
-  const styleNode = document.createElement('style');
-  styleNode.id = 'github-markdown-css';
-  styleNode.innerHTML = styles;
-
-  document.head.appendChild(styleNode);
-}
diff --git a/addons/knobs/src/components/types/Number.tsx b/addons/knobs/src/components/types/Number.tsx
index 949ed9a3e67c..7778976f0e24 100644
--- a/addons/knobs/src/components/types/Number.tsx
+++ b/addons/knobs/src/components/types/Number.tsx
@@ -27,12 +27,12 @@ interface NumberTypeProps extends KnobControlProps<NumberTypeKnobValue | null> {
 const RangeInput = styled.input(
   {
     boxSizing: 'border-box',
-    height: '25px',
+    height: 25,
     outline: 'none',
     border: '1px solid #f7f4f4',
     borderRadius: 2,
     fontSize: 11,
-    padding: '5px',
+    padding: 5,
     color: '#444',
   },
   {
diff --git a/addons/viewport/src/Tool.tsx b/addons/viewport/src/Tool.tsx
index 2813d119e7b5..761b95a5d229 100644
--- a/addons/viewport/src/Tool.tsx
+++ b/addons/viewport/src/Tool.tsx
@@ -84,10 +84,10 @@ const ActiveViewportSize = styled.div(() => ({
 const ActiveViewportLabel = styled.div<{}>(({ theme }) => ({
   display: 'inline-block',
   textDecoration: 'none',
-  padding: '10px',
+  padding: 10,
   fontWeight: theme.typography.weight.bold,
   fontSize: theme.typography.size.s2 - 1,
-  lineHeight: 1,
+  lineHeight: '1',
   height: 40,
   border: 'none',
   borderTop: '3px solid transparent',
@@ -102,7 +102,7 @@ const IconButtonWithLabel = styled(IconButton)(() => ({
 
 const IconButtonLabel = styled.div<{}>(({ theme }) => ({
   fontSize: theme.typography.size.s2 - 1,
-  marginLeft: '10px',
+  marginLeft: 10,
 }));
 
 interface ViewportToolState {
diff --git a/examples/mithril-kitchen-sink/src/Button.js b/examples/mithril-kitchen-sink/src/Button.js
index edec915a04b1..08d3f45a6175 100644
--- a/examples/mithril-kitchen-sink/src/Button.js
+++ b/examples/mithril-kitchen-sink/src/Button.js
@@ -4,12 +4,12 @@ import m from 'mithril';
 
 const style = {
   border: '1px solid #eee',
-  borderRadius: '3px',
+  borderRadius: 3,
   backgroundColor: '#FFFFFF',
   cursor: 'pointer',
-  fontSize: '15px',
+  fontSize: 15,
   padding: '3px 10px',
-  margin: '10px',
+  margin: 10,
 };
 
 const Button = {
diff --git a/examples/mithril-kitchen-sink/src/Welcome.js b/examples/mithril-kitchen-sink/src/Welcome.js
index 86e832016559..3826e784d534 100644
--- a/examples/mithril-kitchen-sink/src/Welcome.js
+++ b/examples/mithril-kitchen-sink/src/Welcome.js
@@ -6,7 +6,7 @@ const Main = {
   view: vnode => (
     <article
       style={{
-        padding: '15px',
+        padding: 15,
         lineHeight: 1.4,
         fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
         backgroundColor: '#ffffff',
diff --git a/examples/official-storybook/stories/addon-info/story-source.stories.js b/examples/official-storybook/stories/addon-info/story-source.stories.js
index 8c8f3dd4ec78..b3ab034e9ecb 100644
--- a/examples/official-storybook/stories/addon-info/story-source.stories.js
+++ b/examples/official-storybook/stories/addon-info/story-source.stories.js
@@ -65,7 +65,7 @@ export const ObjectProp = () => (
       backgroundColor: 'powderblue',
       fontSize: '16px',
       boxShadow: '1px 1px rgba(0, 0, 0, .07)',
-      borderRadius: '5px',
+      borderRadius: 5,
       padding: '4px 8px',
     }}
   />
diff --git a/examples/official-storybook/stories/addon-knobs/with-knobs.stories.js b/examples/official-storybook/stories/addon-knobs/with-knobs.stories.js
index 4b9109dd07be..e458969cc86e 100644
--- a/examples/official-storybook/stories/addon-knobs/with-knobs.stories.js
+++ b/examples/official-storybook/stories/addon-knobs/with-knobs.stories.js
@@ -69,7 +69,7 @@ export const TweaksStaticValues = () => {
   const otherStyles = object('Styles', {
     border: '2px dashed silver',
     borderRadius: 10,
-    padding: '10px',
+    padding: 10,
   });
   const nice = boolean('Nice', true);
   const images = files('Happy Picture', 'image/*', [
@@ -173,7 +173,7 @@ export const TweaksStaticValuesOrganizedInGroups = () => {
     {
       border: '2px dashed silver',
       borderRadius: 10,
-      padding: '10px',
+      padding: 10,
     },
     GROUP_IDS.DISPLAY
   );
diff --git a/lib/cli/generators/MITHRIL/template-csf/stories/Button.js b/lib/cli/generators/MITHRIL/template-csf/stories/Button.js
index edec915a04b1..08d3f45a6175 100644
--- a/lib/cli/generators/MITHRIL/template-csf/stories/Button.js
+++ b/lib/cli/generators/MITHRIL/template-csf/stories/Button.js
@@ -4,12 +4,12 @@ import m from 'mithril';
 
 const style = {
   border: '1px solid #eee',
-  borderRadius: '3px',
+  borderRadius: 3,
   backgroundColor: '#FFFFFF',
   cursor: 'pointer',
-  fontSize: '15px',
+  fontSize: 15,
   padding: '3px 10px',
-  margin: '10px',
+  margin: 10,
 };
 
 const Button = {
diff --git a/lib/cli/generators/MITHRIL/template-csf/stories/Welcome.js b/lib/cli/generators/MITHRIL/template-csf/stories/Welcome.js
index d7dd3eca7ff1..2c0f425a5f8c 100644
--- a/lib/cli/generators/MITHRIL/template-csf/stories/Welcome.js
+++ b/lib/cli/generators/MITHRIL/template-csf/stories/Welcome.js
@@ -7,7 +7,7 @@ const Main = {
   view: vnode => (
     <article
       style={{
-        padding: '15px',
+        padding: 15,
         lineHeight: 1.4,
         fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
         backgroundColor: '#ffffff',
@@ -38,11 +38,11 @@ const InlineCode = {
   view: vnode => (
     <code
       style={{
-        fontSize: '15px',
+        fontSize: 15,
         fontWeight: 600,
         padding: '2px 5px',
         border: '1px solid #eae9e9',
-        borderRadius: '4px',
+        borderRadius: 4,
         backgroundColor: '#f3f2f2',
         color: '#3a3a3a',
       }}
@@ -59,7 +59,7 @@ const Link = {
         color: '#1474f3',
         textDecoration: 'none',
         borderBottom: '1px solid #1474f3',
-        paddingBottom: '2px',
+        paddingBottom: 2,
       }}
       {...vnode.attrs}
     >
@@ -112,7 +112,7 @@ const StoryLink = {
         color: '#1474f3',
         textDecoration: 'none',
         borderBottom: '1px solid #1474f3',
-        paddingBottom: '2px',
+        paddingBottom: 2,
       }}
       onClick={vnode.state.onclick}
     >
diff --git a/lib/components/src/Button/Button.tsx b/lib/components/src/Button/Button.tsx
index d5ee13874570..e5ca2f385334 100644
--- a/lib/components/src/Button/Button.tsx
+++ b/lib/components/src/Button/Button.tsx
@@ -1,226 +1,7 @@
 import React, { FunctionComponent, forwardRef } from 'react';
-import { styled, css } from '@storybook/theming';
+import { styled } from '@storybook/theming';
 import { darken, lighten, rgba, transparentize } from 'polished';
 
-type ButtonWrapperProps = ButtonProps;
-
-const ButtonWrapper = styled.button<ButtonWrapperProps>`
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  overflow: hidden;
-  padding: ${props => (props.small ? '10px 16px' : '13px 20px')};
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  transition: all 150ms ease-out;
-  transform: translate3d(0,0,0);
-  vertical-align: top;
-  white-space: nowrap;
-  user-select: none;
-  opacity: 1;
-  margin: 0;
-  background: transparent;
-
-
-  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;
-
-
-  svg {
-    display: inline-block;
-    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;
-
-    /* Necessary for js mouse events to not glitch out when hovering on svgs */
-    pointer-events: none;
-
-    path { fill: currentColor; }
-  }
-
-  ${props =>
-    props.disabled &&
-    css`
-      cursor: not-allowed !important;
-      opacity: 0.5;
-      &:hover {
-        transform: none;
-      }
-    `}
-
-  ${props =>
-    props.containsIcon &&
-    css`
-      svg {
-        display: block;
-        margin: 0;
-      }
-
-      ${props.small &&
-        css`
-          padding: 9px;
-        `}
-
-      ${!props.small &&
-        css`
-          padding: 12px;
-        `}
-    `}
-
-  /* Colored button for primary CTAs */
-  ${props =>
-    props.primary &&
-    css`
-      background: ${props.theme.color.primary};
-      color: ${props.theme.color.lightest};
-
-      &:hover {
-        background: ${darken(0.05, props.theme.color.primary)};
-      }
-      &:active {
-        box-shadow: rgba(0, 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;
-      }
-    `}
-
-
-  /* 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 {
-        box-shadow: rgba(0, 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;
-      }
-    `}
-
-  /* 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 {
-        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.base === 'light'
-          ? props.theme.input.background
-          : props.theme.input.background};
-      }
-      &:focus {
-        box-shadow: ${rgba(props.theme.color.secondary, 0.4)} 0 0 0 1px inset;
-      }
-    `}
-
-  /* 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: ${transparentize(0.5, props.theme.color.defaultText)} 0 0 0 1px inset;
-      }
-
-      &:active {
-        box-shadow: ${transparentize(0.5, props.theme.color.defaultText)} 0 0 0 2px inset;
-        color: ${transparentize(0, props.theme.color.defaultText)};
-      }
-
-      ${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');
-
 export interface ButtonProps {
   isLink?: boolean;
   primary?: boolean;
@@ -233,6 +14,218 @@ export interface ButtonProps {
   containsIcon?: boolean;
 }
 
+type ButtonWrapperProps = ButtonProps;
+
+const ButtonWrapper = styled.button<ButtonWrapperProps>(
+  ({ small, theme }) => ({
+    border: 0,
+    borderRadius: '3em',
+    cursor: 'pointer',
+    display: 'inline-block',
+    overflow: 'hidden',
+    padding: small ? '10px 16px' : '13px 20px',
+    position: 'relative',
+    textAlign: 'center',
+    textDecoration: 'none',
+    transition: 'all 150ms ease-out',
+    transform: 'translate3d(0,0,0)',
+    verticalAlign: 'top',
+    whiteSpace: 'nowrap',
+    userSelect: 'none',
+    opacity: 1,
+    margin: 0,
+    background: 'transparent',
+
+    fontSize: `${small ? theme.typography.size.s1 : theme.typography.size.s2 - 1}px`,
+    fontWeight: theme.typography.weight.bold,
+    lineHeight: '1',
+
+    svg: {
+      display: 'inline-block',
+      height: small ? 14 : 16,
+      width: small ? 14 : 16,
+
+      verticalAlign: 'top',
+      marginRight: small ? 4 : 6,
+      marginTop: small ? -1 : -2,
+      marginBottom: small ? -1 : -2,
+
+      /* Necessary for js mouse events to not glitch out when hovering on svgs */
+      pointerEvents: 'none',
+
+      path: {
+        fill: 'currentColor }',
+      },
+    },
+  }),
+  ({ disabled }) =>
+    disabled
+      ? {
+          cursor: 'not-allowed !important',
+          opacity: 0.5,
+          '&:hover': {
+            transform: 'none',
+          },
+        }
+      : {},
+  ({ containsIcon, small }) =>
+    containsIcon
+      ? {
+          svg: {
+            display: 'block',
+            margin: 0,
+          },
+          ...(small ? { padding: 9 } : { padding: 12 }),
+        }
+      : {},
+  ({ theme, primary, secondary }) => {
+    let color;
+
+    if (primary) {
+      color = theme.color.primary;
+    }
+    if (secondary) {
+      color = theme.color.secondary;
+    }
+
+    return color
+      ? {
+          background: color,
+          color: theme.color.lightest,
+
+          '&:hover': {
+            background: darken(0.05, color),
+          },
+          '&:active': {
+            boxShadow: 'rgba(0, 0, 0, 0.1) 0 0 0 3em inset',
+          },
+          '&:focus': {
+            boxShadow: `${rgba(color, 0.4)} 0 1px 9px 2px`,
+          },
+          '&:focus:hover': {
+            boxShadow: `${rgba(color, 0.2)} 0 8px 18px 0px`,
+          },
+        }
+      : {};
+  },
+  ({ theme, tertiary, inForm }) =>
+    tertiary
+      ? {
+          background:
+            theme.base === 'light'
+              ? darken(0.02, theme.input.background)
+              : lighten(0.02, theme.input.background),
+          color: theme.input.color,
+          boxShadow: `${theme.input.border} 0 0 0 1px inset`,
+          borderRadius: theme.input.borderRadius,
+
+          '&:hover': {
+            background:
+              theme.base === 'light'
+                ? darken(0.05, theme.input.background)
+                : lighten(0.05, theme.input.background),
+            ...(inForm
+              ? {}
+              : {
+                  boxShadow: 'rgba(0,0,0,.2) 0 2px 6px 0, rgba(0,0,0,.1) 0 0 0 1px inset',
+                }),
+          },
+          '&:active': {
+            background: theme.input.background,
+          },
+          '&:focus': {
+            boxShadow: `${rgba(theme.color.secondary, 0.4)} 0 0 0 1px inset`,
+          },
+        }
+      : {},
+  ({ theme, outline }) =>
+    outline
+      ? {
+          boxShadow: `${transparentize(0.8, theme.color.defaultText)} 0 0 0 1px inset`,
+          color: transparentize(0.3, theme.color.defaultText),
+          background: 'transparent',
+
+          '&:hover': {
+            boxShadow: `${transparentize(0.5, theme.color.defaultText)} 0 0 0 1px inset`,
+          },
+
+          '&:active': {
+            boxShadow: `${transparentize(0.5, theme.color.defaultText)} 0 0 0 2px inset`,
+            color: transparentize(0, theme.color.defaultText),
+          },
+        }
+      : {},
+  ({ theme, outline, primary }) => {
+    const color = theme.color.primary;
+
+    return outline && primary
+      ? {
+          boxShadow: `${color} 0 0 0 1px inset`,
+          color,
+
+          'svg path': {
+            fill: color,
+          },
+
+          '&:hover': {
+            boxShadow: `${color} 0 0 0 1px inset`,
+            background: 'transparent',
+          },
+
+          '&:active': {
+            background: color,
+            boxShadow: `${color} 0 0 0 1px inset`,
+            color: theme.color.lightest,
+          },
+          '&:focus': {
+            boxShadow: `${color} 0 0 0 1px inset, ${rgba(color, 0.4)} 0 1px 9px 2px`,
+          },
+          '&:focus:hover': {
+            boxShadow: `${color} 0 0 0 1px inset, ${rgba(color, 0.2)} 0 8px 18px 0px`,
+          },
+        }
+      : {};
+  },
+  ({ theme, outline, primary, secondary }) => {
+    let color;
+    if (primary) {
+      color = theme.color.primary;
+    }
+    if (secondary) {
+      color = theme.color.secondary;
+    }
+    return outline && color
+      ? {
+          boxShadow: `${color} 0 0 0 1px inset`,
+          color,
+
+          'svg path': {
+            fill: color,
+          },
+
+          '&:hover': {
+            boxShadow: `${color} 0 0 0 1px inset`,
+            background: 'transparent',
+          },
+
+          '&:active': {
+            background: color,
+            boxShadow: `${color} 0 0 0 1px inset`,
+            color: theme.color.lightest,
+          },
+          '&:focus': {
+            boxShadow: `${color} 0 0 0 1px inset, ${rgba(color, 0.4)} 0 1px 9px 2px`,
+          },
+          '&:focus:hover': {
+            boxShadow: `${color} 0 0 0 1px inset, ${rgba(color, 0.2)} 0 8px 18px 0px`,
+          },
+        }
+      : {};
+  }
+);
+
+const ButtonLink = ButtonWrapper.withComponent('a');
+
 export const Button = Object.assign(
   forwardRef<any, ButtonProps>(({ isLink, children, ...props }, ref) => {
     if (isLink) {
diff --git a/lib/components/src/blocks/DocsPage.tsx b/lib/components/src/blocks/DocsPage.tsx
index d2d723ec431d..e6897e7d23f4 100644
--- a/lib/components/src/blocks/DocsPage.tsx
+++ b/lib/components/src/blocks/DocsPage.tsx
@@ -29,18 +29,15 @@ export const Subtitle = styled.h2<{}>(withReset, ({ theme }: { theme: Theme }) =
   fontSize: theme.typography.size.s3,
   lineHeight: '20px',
   borderBottom: 'none',
-  marginBottom: '15px',
+  marginBottom: 15,
 
   [`@media (min-width: ${breakpoint}px)`]: {
     fontSize: theme.typography.size.m1,
     lineHeight: '28px',
-    marginBottom: '24px',
+    marginBottom: 24,
   },
 
-  color:
-    theme.base === 'light'
-      ? transparentize(0.25, theme.color.defaultText)
-      : transparentize(0.25, theme.color.defaultText),
+  color: transparentize(0.25, theme.color.defaultText),
 }));
 
 export const DocsContent = styled.div({
diff --git a/lib/components/src/blocks/EmptyBlock.tsx b/lib/components/src/blocks/EmptyBlock.tsx
index 39dba076bd2b..39e117943eca 100644
--- a/lib/components/src/blocks/EmptyBlock.tsx
+++ b/lib/components/src/blocks/EmptyBlock.tsx
@@ -11,7 +11,7 @@ const Wrapper = styled.div<{}>(withReset, ({ theme }) => ({
   fontSize: `${theme.typography.size.s2}px`,
   alignItems: 'center',
   justifyContent: 'center',
-  padding: '20px',
+  padding: 20,
   margin: '25px 0 40px',
 
   color:
diff --git a/lib/components/src/blocks/PropsTable/PropJsDoc.tsx b/lib/components/src/blocks/PropsTable/PropJsDoc.tsx
index 0eae9a2f4344..5dbb8e98818c 100644
--- a/lib/components/src/blocks/PropsTable/PropJsDoc.tsx
+++ b/lib/components/src/blocks/PropsTable/PropJsDoc.tsx
@@ -27,8 +27,8 @@ export const Table = styled.table(({ theme }) => ({
     },
     // End escape
 
-    marginTop: '0',
-    marginBottom: '0',
+    marginTop: 0,
+    marginBottom: 0,
 
     'th:first-of-type, td:first-of-type': {
       paddingLeft: 0,
@@ -39,8 +39,8 @@ export const Table = styled.table(({ theme }) => ({
     },
 
     td: {
-      paddingTop: '0',
-      paddingBottom: '4px',
+      paddingTop: 0,
+      paddingBottom: 4,
 
       '&:not(:first-of-type)': {
         paddingLeft: 10,
diff --git a/lib/components/src/blocks/PropsTable/PropRow.tsx b/lib/components/src/blocks/PropsTable/PropRow.tsx
index 425b1d462983..83d45fb841eb 100644
--- a/lib/components/src/blocks/PropsTable/PropRow.tsx
+++ b/lib/components/src/blocks/PropsTable/PropRow.tsx
@@ -23,7 +23,7 @@ const Required = styled.span(({ theme }) => ({
 const Description = styled.div(({ theme }) => ({
   '&&': {
     p: {
-      margin: '0',
+      margin: 0,
     },
   },
 
@@ -40,7 +40,7 @@ const Type = styled.div<{ hasDescription: boolean }>(({ theme, hasDescription })
     theme.base === 'light'
       ? transparentize(0.1, theme.color.defaultText)
       : transparentize(0.2, theme.color.defaultText),
-  marginTop: hasDescription ? '4px' : '0',
+  marginTop: hasDescription ? 4 : 0,
 }));
 
 const TypeWithJsDoc = styled.div<{ hasDescription: boolean }>(({ theme, hasDescription }) => ({
@@ -48,8 +48,8 @@ const TypeWithJsDoc = styled.div<{ hasDescription: boolean }>(({ theme, hasDescr
     theme.base === 'light'
       ? transparentize(0.1, theme.color.defaultText)
       : transparentize(0.2, theme.color.defaultText),
-  marginTop: hasDescription ? '12px' : '0',
-  marginBottom: '12px',
+  marginTop: hasDescription ? 12 : 0,
+  marginBottom: 12,
 }));
 
 export const PropRow: FC<PropRowProps> = ({
diff --git a/lib/components/src/blocks/PropsTable/PropValue.tsx b/lib/components/src/blocks/PropsTable/PropValue.tsx
index 7c1c57056248..f86e8dec98ba 100644
--- a/lib/components/src/blocks/PropsTable/PropValue.tsx
+++ b/lib/components/src/blocks/PropsTable/PropValue.tsx
@@ -36,9 +36,9 @@ const Expandable = styled.div<{}>(codeCommon, ({ theme }) => ({
 
 const Detail = styled.div<{ width: string }>(({ theme, width }) => ({
   width,
-  minWidth: '200px',
-  maxWidth: '800px',
-  padding: '15px',
+  minWidth: 200,
+  maxWidth: 800,
+  padding: 15,
   // Dont remove the mono fontFamily here even if it seem useless, this is used by the browser to calculate the length of a "ch" unit.
   fontFamily: theme.typography.fonts.mono,
   fontSize: theme.typography.size.s2 - 1,
@@ -54,7 +54,7 @@ const ArrowIcon = styled(Icons)({
   height: 10,
   width: 10,
   minWidth: 10,
-  marginLeft: '4px',
+  marginLeft: 4,
 });
 
 const EmptyProp = () => {
diff --git a/lib/components/src/blocks/PropsTable/PropsTable.tsx b/lib/components/src/blocks/PropsTable/PropsTable.tsx
index ca2ac3246354..d2914eb3561d 100644
--- a/lib/components/src/blocks/PropsTable/PropsTable.tsx
+++ b/lib/components/src/blocks/PropsTable/PropsTable.tsx
@@ -31,15 +31,15 @@ export const Table = styled.table<{}>(({ theme }) => ({
     width: '100%',
 
     // Margin collapse
-    marginTop: '25px',
-    marginBottom: '40px',
+    marginTop: 25,
+    marginBottom: 40,
 
     'th:first-of-type, td:first-of-type': {
       paddingLeft: 20,
     },
 
     'th:last-of-type, td:last-of-type': {
-      paddingRight: '20px',
+      paddingRight: 20,
       width: '20%',
     },
 
@@ -67,7 +67,7 @@ export const Table = styled.table<{}>(({ theme }) => ({
       },
 
       '&:last-of-type': {
-        paddingRight: '20px',
+        paddingRight: 20,
       },
     },
 
diff --git a/lib/components/src/form/input/input.tsx b/lib/components/src/form/input/input.tsx
index 56727cdad7eb..6badf1b9b762 100644
--- a/lib/components/src/form/input/input.tsx
+++ b/lib/components/src/form/input/input.tsx
@@ -8,7 +8,7 @@ import { Button as StyledButton } from '../../Button/Button';
 const styleResets: CSSObject = {
   // resets
   appearance: 'none',
-  border: '0',
+  border: '0 none',
   boxSizing: 'inherit',
   display: ' block',
   margin: ' 0',
diff --git a/lib/components/src/tooltip/ListItem.tsx b/lib/components/src/tooltip/ListItem.tsx
index 8aad87be8a1b..7505e37280f9 100644
--- a/lib/components/src/tooltip/ListItem.tsx
+++ b/lib/components/src/tooltip/ListItem.tsx
@@ -49,12 +49,12 @@ const Right = styled.span<RightProps>(
   {
     '& svg': {
       transition: 'all 200ms ease-out',
-      opacity: '0',
-      height: '12px',
-      width: '12px',
+      opacity: 0,
+      height: 12,
+      width: 12,
       margin: '3px 0',
       verticalAlign: 'top',
-    } as any,
+    },
     '& path': {
       fill: 'inherit',
     },
diff --git a/lib/components/src/tooltip/Tooltip.stories.tsx b/lib/components/src/tooltip/Tooltip.stories.tsx
index 99cec614ec69..925cd6e5301e 100644
--- a/lib/components/src/tooltip/Tooltip.stories.tsx
+++ b/lib/components/src/tooltip/Tooltip.stories.tsx
@@ -4,7 +4,7 @@ import { styled } from '@storybook/theming';
 import { Tooltip } from './Tooltip';
 
 // Popper would position the tooltip absolutely. We just need to make sure we are pos:rel
-const mockPopperProps = { style: { position: 'relative', top: '20px', left: '20px' } };
+const mockPopperProps = { style: { position: 'relative', top: 20, left: 20 } };
 
 const Content = styled.div({
   width: '100px',
diff --git a/lib/components/src/tooltip/WithTooltip.stories.tsx b/lib/components/src/tooltip/WithTooltip.stories.tsx
index eb1b05ca1b3a..d73cbefb8155 100644
--- a/lib/components/src/tooltip/WithTooltip.stories.tsx
+++ b/lib/components/src/tooltip/WithTooltip.stories.tsx
@@ -5,28 +5,28 @@ import { styled } from '@storybook/theming';
 import { TooltipMessage } from './TooltipMessage';
 import { WithToolTipState as WithTooltip } from './WithTooltip';
 
-const ViewPort = styled.div`
-  height: 300px;
-`;
+const ViewPort = styled.div({
+  height: 300,
+});
 
-const BackgroundBox = styled.div`
-  width: 500px;
-  height: 500px;
-  overflow-y: scroll;
-  background: #eee;
-  position: relative;
-`;
+const BackgroundBox = styled.div({
+  width: 500,
+  height: 500,
+  overflowY: 'scroll',
+  background: '#eee',
+  position: 'relative',
+});
 
-const Spacer = styled.div`
-  height: 100px;
-`;
+const Spacer = styled.div({
+  height: 100,
+});
 
-const Trigger = styled.div`
-  width: 200px;
-  height: 100px;
-  background-color: red;
-  color: white;
-`;
+const Trigger = styled.div({
+  width: 200,
+  height: 100,
+  backgroundColor: 'red',
+  color: 'white',
+});
 
 interface TooltipProps {
   onHide?: () => void;
diff --git a/lib/components/src/typography/DocumentFormatting.tsx b/lib/components/src/typography/DocumentFormatting.tsx
index 778bb9e40562..6c136299e283 100644
--- a/lib/components/src/typography/DocumentFormatting.tsx
+++ b/lib/components/src/typography/DocumentFormatting.tsx
@@ -9,7 +9,7 @@ export const H1 = styled.h1<{}>(withReset, headerCommon, ({ theme }) => ({
 
 export const H2 = styled.h2<{}>(withReset, headerCommon, ({ theme }) => ({
   fontSize: `${theme.typography.size.m2}px`,
-  paddingBottom: '4px',
+  paddingBottom: 4,
   borderBottom: `1px solid ${theme.appBorderColor}`,
 }));
 
@@ -87,28 +87,28 @@ export const A = styled(Link)<{}>(withReset, ({ theme }) => ({
   fontSize: theme.typography.size.s2,
   lineHeight: '24px',
 
-  color: `${theme.color.secondary}`,
+  color: theme.color.secondary,
   textDecoration: 'none',
   '&.absent': {
     color: '#cc0000',
   },
   '&.anchor': {
     display: 'block',
-    paddingLeft: '30px',
-    marginLeft: '-30px',
+    paddingLeft: 30,
+    marginLeft: -30,
     cursor: 'pointer',
     position: 'absolute',
-    top: '0',
-    left: '0',
-    bottom: '0',
+    top: 0,
+    left: 0,
+    bottom: 0,
   },
 }));
 
 export const HR = styled.hr<{}>(({ theme }) => ({
   border: '0 none',
   borderTop: `1px solid ${theme.appBorderColor}`,
-  height: '4px',
-  padding: '0',
+  height: 4,
+  padding: 0,
 }));
 
 export const DL = styled.dl<{}>(withReset, {
@@ -151,7 +151,7 @@ export const Blockquote = styled.blockquote<{}>(withReset, withMargin, ({ theme
   padding: '0 15px',
   color: theme.color.dark,
   '& > :first-of-type': {
-    marginTop: '0',
+    marginTop: 0,
   },
   '& > :last-child': {
     marginBottom: 0,
@@ -166,8 +166,8 @@ export const Table = styled.table<{}>(withReset, withMargin, ({ theme }) => ({
   '& tr': {
     borderTop: `1px solid ${theme.appBorderColor}`,
     backgroundColor: 'white',
-    margin: '0',
-    padding: '0',
+    margin: 0,
+    padding: 0,
   },
   '& tr:nth-of-type(2n)': {
     backgroundColor: `${theme.color.lighter}`,
@@ -176,20 +176,20 @@ export const Table = styled.table<{}>(withReset, withMargin, ({ theme }) => ({
     fontWeight: 'bold',
     border: `1px solid ${theme.appBorderColor}`,
     textAlign: 'left',
-    margin: '0',
+    margin: 0,
     padding: '6px 13px',
   },
   '& tr td': {
     border: `1px solid ${theme.appBorderColor}`,
     textAlign: 'left',
-    margin: '0',
+    margin: 0,
     padding: '6px 13px',
   },
   '& tr th :first-of-type, & tr td :first-of-type': {
-    marginTop: '0',
+    marginTop: 0,
   },
   '& tr th :last-child, & tr td :last-child': {
-    marginBottom: '0',
+    marginBottom: 0,
   },
 }));
 
@@ -203,81 +203,85 @@ export const Span = styled.span<{}>(withReset, ({ theme }) => ({
   '&.frame': {
     display: 'block',
     overflow: 'hidden',
-  },
-  '&.frame > span': {
-    border: `1px solid ${theme.color.medium}`,
-    display: 'block',
-    float: 'left',
-    overflow: 'hidden',
-    margin: '13px 0 0',
-    padding: '7px',
-    width: 'auto',
-  },
-  '&.frame span img': {
-    display: 'block',
-    float: 'left',
-  },
-  '&.frame span span': {
-    clear: 'both',
-    color: theme.color.darkest,
-    display: 'block',
-    padding: '5px 0 0',
+
+    '& > span': {
+      border: `1px solid ${theme.color.medium}`,
+      display: 'block',
+      float: 'left',
+      overflow: 'hidden',
+      margin: '13px 0 0',
+      padding: 7,
+      width: 'auto',
+    },
+    '& span img': {
+      display: 'block',
+      float: 'left',
+    },
+    '& span span': {
+      clear: 'both',
+      color: theme.color.darkest,
+      display: 'block',
+      padding: '5px 0 0',
+    },
   },
   '&.align-center': {
     display: 'block',
     overflow: 'hidden',
     clear: 'both',
-  },
-  '&.align-center > span': {
-    display: 'block',
-    overflow: 'hidden',
-    margin: '13px auto 0',
-    textAlign: 'center',
-  },
-  '&.align-center span img': {
-    margin: '0 auto',
-    textAlign: 'center',
+
+    '& > span': {
+      display: 'block',
+      overflow: 'hidden',
+      margin: '13px auto 0',
+      textAlign: 'center',
+    },
+    '& span img': {
+      margin: '0 auto',
+      textAlign: 'center',
+    },
   },
   '&.align-right': {
     display: 'block',
     overflow: 'hidden',
     clear: 'both',
-  },
-  '&.align-right > span': {
-    display: 'block',
-    overflow: 'hidden',
-    margin: '13px 0 0',
-    textAlign: 'right',
-  },
-  '&.align-right span img': {
-    margin: '0',
-    textAlign: 'right',
+
+    '& > span': {
+      display: 'block',
+      overflow: 'hidden',
+      margin: '13px 0 0',
+      textAlign: 'right',
+    },
+    '& span img': {
+      margin: 0,
+      textAlign: 'right',
+    },
   },
   '&.float-left': {
     display: 'block',
-    marginRight: '13px',
+    marginRight: 13,
     overflow: 'hidden',
     float: 'left',
-  },
-  '&.float-left span': {
-    margin: '13px 0 0',
+    '& span': {
+      margin: '13px 0 0',
+    },
   },
   '&.float-right': {
     display: 'block',
-    marginLeft: '13px',
+    marginLeft: 13,
     overflow: 'hidden',
     float: 'right',
-  },
-  '&.float-right > span': {
-    display: 'block',
-    overflow: 'hidden',
-    margin: '13px auto 0',
-    textAlign: 'right',
+
+    '& > span': {
+      display: 'block',
+      overflow: 'hidden',
+      margin: '13px auto 0',
+      textAlign: 'right',
+    },
   },
 }));
 
 const listCommon: CSSObject = {
-  paddingLeft: '30px',
+  paddingLeft: 30,
   '& :first-of-type': {
     marginTop: 0,
   },
diff --git a/lib/components/src/typography/DocumentWrapper.tsx b/lib/components/src/typography/DocumentWrapper.tsx
index 7576d8a2271b..2351bc3955d1 100644
--- a/lib/components/src/typography/DocumentWrapper.tsx
+++ b/lib/components/src/typography/DocumentWrapper.tsx
@@ -1,442 +1,308 @@
-import { styled, css } from '@storybook/theming';
-
-export const DocumentWrapper = styled.div(
-  ({ theme }) => css`
-    /* Custom styles atop GitHub base theme (see below) */
-    font-size: ${theme.typography.size.s2}px;
-    line-height: 1.6;
-
-    h1 {
-      font-size: ${theme.typography.size.l1}px;
-      font-weight: ${theme.typography.weight.black};
-    }
-
-    h2 {
-      font-size: ${theme.typography.size.m2}px;
-      border-bottom: 1px solid ${theme.appBorderColor};
-    }
-
-    h3 {
-      font-size: ${theme.typography.size.m1}px;
-    }
-
-    h4 {
-      font-size: ${theme.typography.size.s3}px;
-    }
-
-    h5 {
-      font-size: ${theme.typography.size.s2}px;
-    }
-
-    h6 {
-      font-size: ${theme.typography.size.s2}px;
-      color: ${theme.color.dark};
-    }
-
-    /* Custom for SB SyntaxHighlighter */
-
-    pre:not(.hljs) {
-      background: transparent;
-      border: none;
-      border-radius: 0;
-      padding: 0;
-      margin: 0;
-    }
-
-    pre pre,
-    pre.hljs {
-      padding: 15px;
-      margin: 0;
-
-      white-space: pre-wrap;
-      color: inherit;
-
-      font-size: 13px;
-      line-height: 19px;
-
-      code {
-        color: inherit;
-        font-size: inherit;
-      }
-    }
-
-    pre code {
-      margin: 0;
-      padding: 0;
-      white-space: pre;
-      border: none;
-      background: transparent;
-    }
-
-    pre code,
-    pre tt {
-      background-color: transparent;
-      border: none;
-    }
-
-    /* GitHub inspired Markdown styles loosely from https://gist.github.com/tuzz/3331384 */
-
-    body > *:first-of-type {
-      margin-top: 0 !important;
-    }
-
-    body > *:last-child {
-      margin-bottom: 0 !important;
-    }
-
-    a {
-      color: ${theme.color.secondary};
-      text-decoration: none;
-    }
-
-    a.absent {
-      color: #cc0000;
-    }
-
-    a.anchor {
-      display: block;
-      padding-left: 30px;
-      margin-left: -30px;
-      cursor: pointer;
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-    }
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      margin: 20px 0 10px;
-      padding: 0;
-      cursor: text;
-      position: relative;
-    }
-
-    h2:first-of-type,
-    h1:first-of-type,
-    h1:first-of-type + h2,
-    h3:first-of-type,
-    h4:first-of-type,
-    h5:first-of-type,
-    h6:first-of-type {
-      margin-top: 0;
-      padding-top: 0;
-    }
-
-    h1:hover a.anchor,
-    h2:hover a.anchor,
-    h3:hover a.anchor,
-    h4:hover a.anchor,
-    h5:hover a.anchor,
-    h6:hover a.anchor {
-      text-decoration: none;
-    }
-
-    h1 tt,
-    h1 code {
-      font-size: inherit;
-    }
-
-    h2 tt,
-    h2 code {
-      font-size: inherit;
-    }
-
-    h3 tt,
-    h3 code {
-      font-size: inherit;
-    }
-
-    h4 tt,
-    h4 code {
-      font-size: inherit;
-    }
-
-    h5 tt,
-    h5 code {
-      font-size: inherit;
-    }
-
-    h6 tt,
-    h6 code {
-      font-size: inherit;
-    }
-
-    p,
-    blockquote,
-    ul,
-    ol,
-    dl,
-    li,
-    table,
-    pre {
-      margin: 15px 0;
-    }
-
-    hr {
-      border: 0 none;
-      border-top: 1px solid ${theme.appBorderColor};
-      height: 4px;
-      padding: 0;
-    }
-
-    body > h2:first-of-type {
-      margin-top: 0;
-      padding-top: 0;
-    }
-
-    body > h1:first-of-type {
-      margin-top: 0;
-      padding-top: 0;
-    }
-
-    body > h1:first-of-type + h2 {
-      margin-top: 0;
-      padding-top: 0;
-    }
-
-    body > h3:first-of-type,
-    body > h4:first-of-type,
-    body > h5:first-of-type,
-    body > h6:first-of-type {
-      margin-top: 0;
-      padding-top: 0;
-    }
-
-    a:first-of-type h1,
-    a:first-of-type h2,
-    a:first-of-type h3,
-    a:first-of-type h4,
-    a:first-of-type h5,
-    a:first-of-type h6 {
-      margin-top: 0;
-      padding-top: 0;
-    }
-
-    h1 p,
-    h2 p,
-    h3 p,
-    h4 p,
-    h5 p,
-    h6 p {
-      margin-top: 0;
-    }
-
-    li p.first {
-      display: inline-block;
-    }
-
-    ul,
-    ol {
-      padding-left: 30px;
-    }
-
-    ul :first-of-type,
-    ol :first-of-type {
-      margin-top: 0;
-    }
-
-    ul :last-child,
-    ol :last-child {
-      margin-bottom: 0;
-    }
-
-    dl {
-      padding: 0;
-    }
-
-    dl dt {
-      font-size: 14px;
-      font-weight: bold;
-      font-style: italic;
-      padding: 0;
-      margin: 15px 0 5px;
-    }
-
-    dl dt:first-of-type {
-      padding: 0;
-    }
-
-    dl dt > :first-of-type {
-      margin-top: 0;
-    }
-
-    dl dt > :last-child {
-      margin-bottom: 0;
-    }
-
-    dl dd {
-      margin: 0 0 15px;
-      padding: 0 15px;
-    }
-
-    dl dd > :first-of-type {
-      margin-top: 0;
-    }
-
-    dl dd > :last-child {
-      margin-bottom: 0;
-    }
-
-    blockquote {
-      border-left: 4px solid ${theme.color.medium};
-      padding: 0 15px;
-      color: ${theme.color.dark};
-    }
-
-    blockquote > :first-of-type {
-      margin-top: 0;
-    }
-
-    blockquote > :last-child {
-      margin-bottom: 0;
-    }
-
-    table {
-      padding: 0;
-      border-collapse: collapse;
-    }
-    table tr {
-      border-top: 1px solid ${theme.appBorderColor};
-      background-color: white;
-      margin: 0;
-      padding: 0;
-    }
-
-    table tr:nth-of-type(2n) {
-      background-color: ${theme.color.lighter};
-    }
-
-    table tr th {
-      font-weight: bold;
-      border: 1px solid ${theme.appBorderColor};
-      text-align: left;
-      margin: 0;
-      padding: 6px 13px;
-    }
-
-    table tr td {
-      border: 1px solid ${theme.appBorderColor};
-      text-align: left;
-      margin: 0;
-      padding: 6px 13px;
-    }
-
-    table tr th :first-of-type,
-    table tr td :first-of-type {
-      margin-top: 0;
-    }
-
-    table tr th :last-child,
-    table tr td :last-child {
-      margin-bottom: 0;
-    }
-
-    img {
-      max-width: 100%;
-    }
-
-    span.frame {
-      display: block;
-      overflow: hidden;
-    }
-
-    span.frame > span {
-      border: 1px solid ${theme.color.medium};
-      display: block;
-      float: left;
-      overflow: hidden;
-      margin: 13px 0 0;
-      padding: 7px;
-      width: auto;
-    }
-
-    span.frame span img {
-      display: block;
-      float: left;
-    }
-
-    span.frame span span {
-      clear: both;
-      color: ${theme.color.darkest};
-      display: block;
-      padding: 5px 0 0;
-    }
-
-    span.align-center {
-      display: block;
-      overflow: hidden;
-      clear: both;
-    }
-
-    span.align-center > span {
-      display: block;
-      overflow: hidden;
-      margin: 13px auto 0;
-      text-align: center;
-    }
-
-    span.align-center span img {
-      margin: 0 auto;
-      text-align: center;
-    }
-
-    span.align-right {
-      display: block;
-      overflow: hidden;
-      clear: both;
-    }
-
-    span.align-right > span {
-      display: block;
-      overflow: hidden;
-      margin: 13px 0 0;
-      text-align: right;
-    }
-
-    span.align-right span img {
-      margin: 0;
-      text-align: right;
-    }
-
-    span.float-left {
-      display: block;
-      margin-right: 13px;
-      overflow: hidden;
-      float: left;
-    }
-
-    span.float-left span {
-      margin: 13px 0 0;
-    }
-
-    span.float-right {
-      display: block;
-      margin-left: 13px;
-      overflow: hidden;
-      float: right;
-    }
-
-    span.float-right > span {
-      display: block;
-      overflow: hidden;
-      margin: 13px auto 0;
-      text-align: right;
-    }
-
-    code,
-    tt {
-      margin: 0 2px;
-      padding: 0 5px;
-      white-space: nowrap;
-      border: 1px solid ${theme.color.mediumlight};
-      background-color: ${theme.color.lighter};
-      border-radius: 3px;
-      color: ${theme.base === 'dark' && theme.color.darkest};
-    }
-  `
-);
+import { styled } from '@storybook/theming';
+
+export const DocumentWrapper = styled.div<{}>(({ theme }) => ({
+  fontSize: `${theme.typography.size.s2}px`,
+  lineHeight: '1.6',
+
+  h1: {
+    fontSize: `${theme.typography.size.l1}px`,
+    fontWeight: theme.typography.weight.black,
+  },
+  h2: {
+    fontSize: `${theme.typography.size.m2}px`,
+    borderBottom: `1px solid ${theme.appBorderColor}`,
+  },
+  h3: {
+    fontSize: `${theme.typography.size.m1}px`,
+  },
+  h4: {
+    fontSize: `${theme.typography.size.s3}px`,
+  },
+  h5: {
+    fontSize: `${theme.typography.size.s2}px`,
+  },
+  h6: {
+    fontSize: `${theme.typography.size.s2}px`,
+    color: theme.color.dark,
+  },
+  'pre:not(.hljs)': {
+    background: 'transparent',
+    border: 'none',
+    borderRadius: 0,
+    padding: 0,
+    margin: 0,
+  },
+  'pre pre, pre.hljs': {
+    padding: 15,
+    margin: 0,
+    whiteSpace: 'pre-wrap',
+    color: 'inherit',
+    fontSize: '13px',
+    lineHeight: '19px',
+  },
+  'pre pre code, pre.hljs code': {
+    color: 'inherit',
+    fontSize: 'inherit',
+  },
+  'pre code': {
+    margin: 0,
+    padding: 0,
+    whiteSpace: 'pre',
+    border: 'none',
+    background: 'transparent',
+  },
+  'pre code, pre tt': {
+    backgroundColor: 'transparent',
+    border: 'none',
+  },
+  /* GitHub inspired Markdown styles loosely from https://gist.github.com/tuzz/3331384 */
+  'body > *:first-of-type': {
+    marginTop: '0 !important',
+  },
+  'body > *:last-child': {
+    marginBottom: '0 !important',
+  },
+  a: {
+    color: theme.color.secondary,
+    textDecoration: 'none',
+  },
+  'a.absent': {
+    color: '#cc0000',
+  },
+  'a.anchor': {
+    display: 'block',
+    paddingLeft: 30,
+    marginLeft: -30,
+    cursor: 'pointer',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0,
+  },
+  'h1, h2, h3, h4, h5, h6': {
+    margin: '20px 0 10px',
+    padding: 0,
+    cursor: 'text',
+    position: 'relative',
+
+    '&:first-of-type': {
+      marginTop: 0,
+      paddingTop: 0,
+    },
+    '&:hover a.anchor': {
+      textDecoration: 'none',
+    },
+    '& tt, & code': {
+      fontSize: 'inherit',
+    },
+  },
+  'h1:first-of-type + h2': {
+    marginTop: 0,
+    paddingTop: 0,
+  },
+  'p, blockquote, ul, ol, dl, li, table, pre': {
+    margin: '15px 0',
+  },
+  hr: {
+    border: '0 none',
+    borderTop: `1px solid ${theme.appBorderColor}`,
+    height: 4,
+    padding: 0,
+  },
+  'body > h1:first-of-type, body > h2:first-of-type, body > h3:first-of-type, body > h4:first-of-type, body > h5:first-of-type, body > h6:first-of-type': {
+    marginTop: 0,
+    paddingTop: 0,
+  },
+  'body > h1:first-of-type + h2': {
+    marginTop: 0,
+    paddingTop: 0,
+  },
+  'a:first-of-type h1, a:first-of-type h2, a:first-of-type h3, a:first-of-type h4, a:first-of-type h5, a:first-of-type h6': {
+    marginTop: 0,
+    paddingTop: 0,
+  },
+  'h1 p, h2 p, h3 p, h4 p, h5 p, h6 p': {
+    marginTop: 0,
+  },
+  'li p.first': {
+    display: 'inline-block',
+  },
+  'ul, ol': {
+    paddingLeft: 30,
+
+    '& :first-of-type': {
+      marginTop: 0,
+    },
+    '& :last-child': {
+      marginBottom: 0,
+    },
+  },
+  dl: {
+    padding: 0,
+  },
+
+  'dl dt': {
+    fontSize: '14px',
+    fontWeight: 'bold',
+    fontStyle: 'italic',
+    margin: '0 0 15px',
+    padding: '0 15px',
+
+    '&:first-of-type': {
+      padding: 0,
+    },
+    '& > :first-of-type': {
+      marginTop: 0,
+    },
+    '& > :last-child': {
+      marginBottom: 0,
+    },
+  },
+
+  blockquote: {
+    borderLeft: `4px solid ${theme.color.medium}`,
+    padding: '0 15px',
+    color: theme.color.dark,
+
+    '& > :first-of-type': {
+      marginTop: 0,
+    },
+
+    '& > :last-child': {
+      marginBottom: 0,
+    },
+  },
+
+  table: {
+    padding: 0,
+    borderCollapse: 'collapse',
+
+    '& tr': {
+      borderTop: `1px solid ${theme.appBorderColor}`,
+      backgroundColor: 'white',
+      margin: 0,
+      padding: 0,
+
+      '& th': {
+        fontWeight: 'bold',
+        border: `1px solid ${theme.appBorderColor}`,
+        textAlign: 'left',
+        margin: 0,
+        padding: '6px 13px',
+      },
+
+      '& td': {
+        border: `1px solid ${theme.appBorderColor}`,
+        textAlign: 'left',
+        margin: 0,
+        padding: '6px 13px',
+      },
+      '&:nth-of-type(2n)': {
+        backgroundColor: theme.color.lighter,
+      },
+
+      '& th :first-of-type, & td :first-of-type': {
+        marginTop: 0,
+      },
+      '& th :last-child, & td :last-child': {
+        marginBottom: 0,
+      },
+    },
+  },
+  img: {
+    maxWidth: '100%',
+  },
+  'span.frame': {
+    display: 'block',
+    overflow: 'hidden',
+
+    '& > span': {
+      border: `1px solid ${theme.color.medium}`,
+      display: 'block',
+      float: 'left',
+      overflow: 'hidden',
+      margin: '13px 0 0',
+      padding: 7,
+      width: 'auto',
+    },
+
+    '& span img': {
+      display: 'block',
+      float: 'left',
+    },
+
+    '& span span': {
+      clear: 'both',
+      color: theme.color.darkest,
+      display: 'block',
+      padding: '5px 0 0',
+    },
+  },
+  'span.align-center': {
+    display: 'block',
+    overflow: 'hidden',
+    clear: 'both',
+
+    '& > span': {
+      display: 'block',
+      overflow: 'hidden',
+      margin: '13px auto 0',
+      textAlign: 'center',
+    },
+    '& span img': {
+      margin: '0 auto',
+      textAlign: 'center',
+    },
+  },
+  'span.align-right': {
+    display: 'block',
+    overflow: 'hidden',
+    clear: 'both',
+
+    '& > span': {
+      display: 'block',
+      overflow: 'hidden',
+      margin: '13px 0 0',
+      textAlign: 'right',
+    },
+
+    '& span img': {
+      margin: 0,
+      textAlign: 'right',
+    },
+  },
+
+  'span.float-left': {
+    display: 'block',
+    marginRight: 13,
+    overflow: 'hidden',
+    float: 'left',
+
+    '& span': {
+      margin: '13px 0 0',
+    },
+  },
+
+  'span.float-right': {
+    display: 'block',
+    marginLeft: 13,
+    overflow: 'hidden',
+    float: 'right',
+
+    '& > span': {
+      display: 'block',
+      overflow: 'hidden',
+      margin: '13px auto 0',
+      textAlign: 'right',
+    },
+  },
+  'code, tt': {
+    margin: '0 2px',
+    padding: '0 5px',
+    whiteSpace: 'nowrap',
+    border: `1px solid ${theme.color.mediumlight}`,
+    backgroundColor: theme.color.lighter,
+    borderRadius: 3,
+    color: theme.base === 'dark' && theme.color.darkest,
+  },
+}));
diff --git a/lib/components/src/typography/link/link.tsx b/lib/components/src/typography/link/link.tsx
index c37e9ebba940..2c5ff953e594 100644
--- a/lib/components/src/typography/link/link.tsx
+++ b/lib/components/src/typography/link/link.tsx
@@ -1,10 +1,10 @@
 import React, { AnchorHTMLAttributes, FunctionComponent, MouseEvent } from 'react';
-import { styled, css, Theme } from '@storybook/theming';
+import { styled } from '@storybook/theming';
 import { darken } from 'polished';
 
 import { Icons } from '../../icon/icon';
 
-// Cmd/Ctrl/Shift/Alt + Click should trigger default browser behaviour. Same applies to non-left clicks
+// Cmd/Ctrl/Shift/Alt + Click should trigger default browser behavior. Same applies to non-left clicks
 const LEFT_BUTTON = 0;
 
 const isPlainLeftClick = (e: MouseEvent) =>
@@ -25,166 +25,155 @@ export interface LinkStylesProps {
   isButton?: boolean;
 }
 
-const linkStyles = (props: LinkStylesProps & { theme: Theme }) => css`
-  display: inline-block;
-  transition: all 150ms ease-out;
-  text-decoration: none;
+export interface LinkInnerProps {
+  withArrow?: boolean;
+  containsIcon?: boolean;
+}
 
-  color: ${props.theme.color.secondary};
-  svg path {
-    fill: ${props.theme.color.secondary};
-  }
+const LinkInner = styled.span<LinkInnerProps>(
+  ({ withArrow }) =>
+    withArrow
+      ? {
+          '> svg:last-of-type': {
+            height: '0.7em',
+            width: '0.7em',
+            marginRight: 0,
+            marginLeft: '0.25em',
+            bottom: 'auto',
+            verticalAlign: 'inherit',
+          },
+        }
+      : {},
+  ({ containsIcon }) =>
+    containsIcon
+      ? {
+          svg: {
+            height: '1em',
+            width: '1em',
+            verticalAlign: 'middle',
+            position: 'relative',
+            bottom: 0,
+            marginRight: 0,
+          },
+        }
+      : {}
+);
 
-  &:hover,
-  &:focus {
-    cursor: pointer;
-    color: ${darken(0.07, props.theme.color.secondary)};
-    svg path {
-      fill: ${darken(0.07, props.theme.color.secondary)};
+type AProps = AnchorHTMLAttributes<HTMLAnchorElement>;
+
+const A = styled.a<LinkStylesProps>(
+  ({ theme }) => ({
+    display: 'inline-block',
+    transition: 'all 150ms ease-out',
+    textDecoration: 'none',
+
+    color: theme.color.secondary,
+
+    '&:hover, &:focus': {
+      cursor: 'pointer',
+      color: darken(0.07, theme.color.secondary),
+      'svg path': {
+        fill: darken(0.07, theme.color.secondary),
+      },
+    },
+    '&:active': {
+      color: darken(0.1, theme.color.secondary),
+      'svg path': {
+        fill: darken(0.1, theme.color.secondary),
+      },
+    },
+
+    svg: {
+      display: 'inline-block',
+      height: '1em',
+      width: '1em',
+      verticalAlign: 'text-top',
+      position: 'relative',
+      bottom: '-0.125em',
+      marginRight: '0.4em',
+
+      '& path': {
+        fill: theme.color.secondary,
+      },
+    },
+  }),
+  ({ theme, secondary, tertiary }) => {
+    let colors;
+    if (secondary) {
+      colors = [theme.color.mediumdark, theme.color.dark, theme.color.darker];
     }
-  }
-  &:active {
-    color: ${darken(0.1, props.theme.color.secondary)};
-    svg path {
-      fill: ${darken(0.1, props.theme.color.secondary)};
+    if (tertiary) {
+      colors = [theme.color.dark, theme.color.darkest, theme.color.mediumdark];
     }
-  }
 
-  svg {
-    display: inline-block;
-    height: 1em;
-    width: 1em;
-    vertical-align: text-top;
-    position: relative;
-    bottom: -0.125em;
-    margin-right: 0.4em;
-  }
-
-  ${props.secondary &&
-    css`
-      color: ${props.theme.color.mediumdark};
-      svg path {
-        fill: ${props.theme.color.mediumdark};
-      }
-
-      &:hover {
-        color: ${props.theme.color.dark};
-        svg path {
-          fill: ${props.theme.color.dark};
+    return colors
+      ? {
+          color: colors[0],
+          'svg path': {
+            fill: colors[0],
+          },
+
+          '&:hover': {
+            color: colors[1],
+            'svg path': {
+              fill: colors[1],
+            },
+          },
+
+          '&:active': {
+            color: colors[2],
+            'svg path': {
+              fill: colors[2],
+            },
+          },
         }
-      }
-
-      &:active {
-        color: ${props.theme.color.darker};
-        svg path {
-          fill: ${props.theme.color.darker};
+      : {};
+  },
+  ({ nochrome }) =>
+    nochrome
+      ? {
+          color: 'inherit',
+
+          '&:hover, &:active': {
+            color: 'inherit',
+            textDecoration: 'underline',
+          },
         }
-      }
-    `};
-
-  ${props.tertiary &&
-    css`
-      color: ${props.theme.color.dark};
-      svg path {
-        fill: ${props.theme.color.dark};
-      }
-
-      &:hover {
-        color: ${props.theme.color.darkest};
-        svg path {
-          fill: ${props.theme.color.darkest};
+      : {},
+  ({ theme, inverse }) =>
+    inverse
+      ? {
+          color: theme.color.lightest,
+          'svg path': {
+            fill: theme.color.lightest,
+          },
+
+          '&:hover': {
+            color: theme.color.lighter,
+            'svg path': {
+              fill: theme.color.lighter,
+            },
+          },
+
+          '&:active': {
+            color: theme.color.light,
+            'svg path': {
+              fill: theme.color.light,
+            },
+          },
         }
-      }
-
-      &:active {
-        color: ${props.theme.color.mediumdark};
-        svg path {
-          fill: ${props.theme.color.mediumdark};
-        }
-      }
-    `};
-
-  ${props.nochrome &&
-    css`
-      color: inherit;
-
-      &:hover,
-      &:active {
-        color: inherit;
-        text-decoration: underline;
-      }
-    `};
-
-  ${props.inverse &&
-    css`
-      color: ${props.theme.color.lightest};
-      svg path {
-        fill: ${props.theme.color.lightest};
-      }
-
-      &:hover {
-        color: ${props.theme.color.lighter};
-        svg path {
-          fill: ${props.theme.color.lighter};
-        }
-      }
-
-      &:active {
-        color: ${props.theme.color.light};
-        svg path {
-          fill: ${props.theme.color.light};
+      : {},
+  ({ isButton }) =>
+    isButton
+      ? {
+          border: 0,
+          borderRadius: 0,
+          background: 'none',
+          padding: 0,
+          fontSize: 'inherit',
         }
-      }
-    `};
-
-  ${props.isButton &&
-    css`
-      border: 0;
-      border-radius: 0;
-      background: none;
-      padding: 0;
-      font-size: inherit;
-    `};
-`;
-
-export interface LinkInnerProps {
-  withArrow?: boolean;
-  containsIcon?: boolean;
-}
-
-const LinkInner = styled.span`
-  ${(props: LinkInnerProps) =>
-    props.withArrow &&
-    css`
-      > svg:last-of-type {
-        height: 0.7em;
-        width: 0.7em;
-        margin-right: 0;
-        margin-left: 0.25em;
-        bottom: auto;
-        vertical-align: inherit;
-      }
-    `};
-
-  ${props =>
-    props.containsIcon &&
-    css`
-      svg {
-        height: 1em;
-        width: 1em;
-        vertical-align: middle;
-        position: relative;
-        bottom: 0;
-        margin-right: 0;
-      }
-    `};
-`;
-
-type AProps = AnchorHTMLAttributes<HTMLAnchorElement>;
-
-const A = styled.a<AProps>`
-  ${linkStyles};
-`;
+      : {}
+);
 
 export interface LinkProps extends LinkInnerProps, LinkStylesProps {
   cancel?: boolean;
diff --git a/lib/components/src/typography/shared.tsx b/lib/components/src/typography/shared.tsx
index 0ec259df0a56..4ff39c0bf949 100644
--- a/lib/components/src/typography/shared.tsx
+++ b/lib/components/src/typography/shared.tsx
@@ -25,11 +25,9 @@ export const codeCommon = ({ theme }: { theme: Theme }): CSSObject => ({
   padding: '3px 5px',
   whiteSpace: 'nowrap',
 
-  borderRadius: '3px',
+  borderRadius: 3,
   fontSize: theme.typography.size.s2 - 1,
 
-  // color: theme.base === 'dark' && theme.color.darkest,
-
   border:
     theme.base === 'light'
       ? `1px solid ${theme.color.mediumlight}`
diff --git a/lib/core/src/client/preview/NoDocs.js b/lib/core/src/client/preview/NoDocs.js
index 9394b8b4e4d1..b9a57da4fc8b 100644
--- a/lib/core/src/client/preview/NoDocs.js
+++ b/lib/core/src/client/preview/NoDocs.js
@@ -8,8 +8,8 @@ const wrapper = {
 
 const main = {
   margin: 'auto',
-  padding: '30px',
-  borderRadius: '10px',
+  padding: 30,
+  borderRadius: 10,
   background: 'rgba(0,0,0,0.03)',
 };
 
diff --git a/lib/ui/src/components/layout/container.js b/lib/ui/src/components/layout/container.js
index 8bd3d5b4a112..e432a4fb1a86 100644
--- a/lib/ui/src/components/layout/container.js
+++ b/lib/ui/src/components/layout/container.js
@@ -88,7 +88,7 @@ const Paper = styled.div(
     isFullscreen
       ? {
           boxShadow: 'none',
-          borderRadius: '0',
+          borderRadius: 0,
         }
       : {
           background: theme.background.content,
diff --git a/lib/ui/src/components/sidebar/Sidebar.tsx b/lib/ui/src/components/sidebar/Sidebar.tsx
index 071cf207f016..ac3310a8587c 100644
--- a/lib/ui/src/components/sidebar/Sidebar.tsx
+++ b/lib/ui/src/components/sidebar/Sidebar.tsx
@@ -28,7 +28,7 @@ const Container = styled.nav({
 
 const CustomScrollArea = styled(ScrollArea)({
   '.simplebar-track.simplebar-vertical': {
-    right: '4px',
+    right: 4,
   },
 });
 
diff --git a/lib/ui/src/components/sidebar/SidebarHeading.tsx b/lib/ui/src/components/sidebar/SidebarHeading.tsx
index 94c92abb4886..47fa203795fd 100644
--- a/lib/ui/src/components/sidebar/SidebarHeading.tsx
+++ b/lib/ui/src/components/sidebar/SidebarHeading.tsx
@@ -49,12 +49,12 @@ export type MenuButtonProps = ComponentProps<typeof Button> &
     highlighted: boolean;
   };
 
-const MenuButton = styled(Button)<MenuButtonProps>(props => ({
+const MenuButton = styled(Button)<MenuButtonProps>(({ highlighted, theme }) => ({
   position: 'relative',
   overflow: 'visible',
   padding: 7,
 
-  ...(props.highlighted && {
+  ...(highlighted && {
     '&:after': {
       content: '""',
       position: 'absolute',
@@ -63,7 +63,7 @@ const MenuButton = styled(Button)<MenuButtonProps>(props => ({
       width: 8,
       height: 8,
       borderRadius: 8,
-      background: `${props.theme.color.positive}`,
+      background: theme.color.positive,
     },
   }),
 }));
diff --git a/lib/ui/src/components/sidebar/SidebarSearch.tsx b/lib/ui/src/components/sidebar/SidebarSearch.tsx
index ace8f79c6897..ee83b3b28055 100644
--- a/lib/ui/src/components/sidebar/SidebarSearch.tsx
+++ b/lib/ui/src/components/sidebar/SidebarSearch.tsx
@@ -66,45 +66,42 @@ export type FilterFormProps = ComponentProps<'form'> & {
   focussed: boolean;
 };
 
-const FilterForm = styled.form<FilterFormProps>(
-  ({ theme, focussed }) =>
-    ({
+const FilterForm = styled.form<FilterFormProps>(({ theme, focussed }) => ({
+  transition: 'all 150ms ease-out',
+  borderBottom: '1px solid transparent',
+  borderBottomColor: focussed
+    ? opacify(0.3, theme.appBorderColor)
+    : opacify(0.1, theme.appBorderColor),
+  outline: 0,
+  position: 'relative',
+
+  input: {
+    color: theme.input.color,
+    fontSize: theme.typography.size.s2 - 1,
+    lineHeight: '20px',
+    paddingTop: 2,
+    paddingBottom: 2,
+    paddingLeft: 20,
+  },
+
+  '> svg': {
+    transition: 'all 150ms ease-out',
+    position: 'absolute',
+    top: '50%',
+    height: 12,
+    width: 12,
+    transform: 'translateY(-50%)',
+    zIndex: 1,
+
+    background: 'transparent',
+
+    path: {
       transition: 'all 150ms ease-out',
-      borderBottom: '1px solid transparent',
-      borderBottomColor: focussed
-        ? opacify(0.3, theme.appBorderColor)
-        : opacify(0.1, theme.appBorderColor),
-      outline: 0,
-      position: 'relative',
-
-      input: {
-        color: theme.input.color,
-        fontSize: theme.typography.size.s2 - 1,
-        lineHeight: '20px',
-        paddingTop: '2px',
-        paddingBottom: '2px',
-        paddingLeft: '20px',
-      },
-
-      '> svg': {
-        transition: 'all 150ms ease-out',
-        position: 'absolute',
-        top: '50%',
-        height: '12px',
-        width: '12px',
-        transform: 'translateY(-50%)',
-        zIndex: '1',
-
-        background: 'transparent',
-
-        path: {
-          transition: 'all 150ms ease-out',
-          fill: 'currentColor',
-          opacity: focussed ? 1 : 0.3,
-        },
-      },
-    } as any) // FIXME: emotion have hard time to provide '> svg' typing
-);
+      fill: 'currentColor',
+      opacity: focussed ? 1 : 0.3,
+    },
+  },
+}));
 
 export type PureSidebarSearchProps = FilterFieldProps & {
   onChange: (arg: string) => void;
diff --git a/lib/ui/src/settings/shortcuts.js b/lib/ui/src/settings/shortcuts.js
index 7a940e77649a..7abf235f0b83 100644
--- a/lib/ui/src/settings/shortcuts.js
+++ b/lib/ui/src/settings/shortcuts.js
@@ -46,7 +46,7 @@ export const GridWrapper = styled.div({
   display: 'grid',
   gridTemplateColumns: '1fr',
   gridAutoRows: 'minmax(auto, auto)',
-  marginBottom: '20px',
+  marginBottom: 20,
 });
 
 // Form