Minor cleanup

docs/src/pages/configurations/theming/index.md

@@ -9,12 +9,14 @@ Storybook's manager UI is theme-able! You can change theme variables using [addo
 
 You can do this in an decorator, addon or in `.storybook/config.js`. Changing theme at runtime is supported!
 
-First, create or modify `.storybook/addons.js` to include registering addon-options:  
+First, create or modify `.storybook/addons.js` to include registering addon-options:
+
 ```js
 import '@storybook/addon-options/register';
 ```
 
-Then, modify `.storybook/config.js` to include your new options:  
+Then, modify `.storybook/config.js` to include your new options:
+
 ```js
 import { addParameters, configure } from '@storybook/react';
 
@@ -52,26 +54,39 @@ addParameters({
 
 ```
 
-// TODO: update this with .color. changes
+// Storybook-specific color palette
+colorPrimary: primary color, // Storybook pink
+colorSecondary: secondary color, // Blue
+
+// UI
+appBg: background.app,
+appBorderColor: color.border,
+appBorderRadius: 4,
+
+// Fonts
+fontBase: typography.fonts.base,
+fontCode: typography.fonts.mono,
+
+// Text colors
+textColor: color.darkest,
+textInverseColor: color.lightest,
+
+// 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,
+
+// Brand logo/text
+brand: null,
+
+
 
-mainBackground: applied to root `background`, // 'linear-gradient(to bottom right, black, gray'
-mainBorder: applied to panels `border`, // '1px solid rgba(0,0,0,0.1)'
-mainBorderColor: applied for most borders, // 'rgba(0,0,0,0.1)'
-mainBorderRadius: applied to panels, buttons, inputs // 4
-mainFill: applied to panels `background`, // 'rgba(255,255,255,0.89)'
-barFill: applied to TabsBar `background`, // 'rgba(255,255,255,1)'
-inputFill: applied to Input `background`, // 'rgba(0,0,0,0.05)'
-mainTextFace: applied to root `font-family`,
-mainTextColor: applied to root & buttons & input `color`, // black
-mainTextSize: applied to root, // 13
-dimmedTextColor: applied in less important text, // 'rgba(0,0,0,0.4)'
-highlightColor: applied to indicate selection, // '#9fdaff'
-successColor: applied to indicate positive, // '#0edf62'
-failColor: applied to indicate negative, // '#ff3f3f'
-warnColor: applied to indicate ow-ow, // 'orange'
-monoTextFace: applied to pre,
-layoutMargin: applied to space panels, // 10
-overlayBackground: applied to overlay `background`, // 'linear-gradient(to bottom right, rgba(233, 233, 233, 0.6), rgba(255, 255, 255, 0.8))'
 ```
 
 ### Deep theming components
@@ -164,7 +179,7 @@ The styles provided here support everything [emotion](https://emotion.sh/) does.
 
 ## Adding more theme variables for addons
 
-If addons have a need for specific theme variables, the user has to add them. 
+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.
 
 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:

examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap

@@ -1769,14 +1769,6 @@ exports[`Storyshots Core|Events Force re-render 1`] = `
   box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
 }
 
-.emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
-}
-
 .emotion-0 > span {
   -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
   -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
@@ -1855,14 +1847,6 @@ exports[`Storyshots Core|Events Force re-render 1`] = `
   box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
 }
 
-.emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
-}
-
 .emotion-0 > span {
   -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
   -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
@@ -3035,6 +3019,7 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
   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;
@@ -3059,14 +3044,6 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
   box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
 }
 
-.emotion-88:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
-}
-
-.emotion-88:focus:hover {
-  box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
-}
-
 .emotion-88 > span {
   -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
   -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
@@ -3549,6 +3526,7 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
   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;
@@ -3573,14 +3551,6 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
   box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
 }
 
-.emotion-88:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
-}
-
-.emotion-88:focus:hover {
-  box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
-}
-
 .emotion-88 > span {
   -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
   -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
@@ -4582,14 +4552,6 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
   box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
 }
 
-.emotion-5:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
-}
-
-.emotion-5:focus:hover {
-  box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
-}
-
 .emotion-5 > span {
   -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
   -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
@@ -4636,14 +4598,6 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
   color: #333333;
 }
 
-.emotion-5:focus {
-  box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.4) 0 1px 9px 2px;
-}
-
-.emotion-5:focus:hover {
-  box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.2) 0 8px 18px 0px;
-}
-
 .emotion-8 {
   display: block;
   width: 0;
@@ -5033,14 +4987,6 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
   box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
 }
 
-.emotion-5:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
-}
-
-.emotion-5:focus:hover {
-  box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
-}
-
 .emotion-5 > span {
   -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
   -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
@@ -5087,14 +5033,6 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
   color: #333333;
 }
 
-.emotion-5:focus {
-  box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.4) 0 1px 9px 2px;
-}
-
-.emotion-5:focus:hover {
-  box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.2) 0 8px 18px 0px;
-}
-
 .emotion-8 {
   display: block;
   width: 0;
@@ -5878,14 +5816,6 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
 }
 
-.emotion-5:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
-}
-
-.emotion-5:focus:hover {
-  box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
-}
-
 .emotion-5 > span {
   -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
   -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
@@ -5932,14 +5862,6 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   color: #333333;
 }
 
-.emotion-5:focus {
-  box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.4) 0 1px 9px 2px;
-}
-
-.emotion-5:focus:hover {
-  box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.2) 0 8px 18px 0px;
-}
-
 .emotion-14 {
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
@@ -6450,14 +6372,6 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
 }
 
-.emotion-5:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
-}
-
-.emotion-5:focus:hover {
-  box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
-}
-
 .emotion-5 > span {
   -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
   -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
@@ -6504,14 +6418,6 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   color: #333333;
 }
 
-.emotion-5:focus {
-  box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.4) 0 1px 9px 2px;
-}
-
-.emotion-5:focus:hover {
-  box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.2) 0 8px 18px 0px;
-}
-
 .emotion-14 {
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
@@ -7253,14 +7159,6 @@ exports[`Storyshots UI|Sidebar/SidebarHeading customBrand 1`] = `
   box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
 }
 
-.emotion-3:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
-}
-
-.emotion-3:focus:hover {
-  box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
-}
-
 .emotion-3 > span {
   -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
   -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
@@ -7307,14 +7205,6 @@ exports[`Storyshots UI|Sidebar/SidebarHeading customBrand 1`] = `
   color: #333333;
 }
 
-.emotion-3:focus {
-  box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.4) 0 1px 9px 2px;
-}
-
-.emotion-3:focus:hover {
-  box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.2) 0 8px 18px 0px;
-}
-
 .emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -7409,14 +7299,6 @@ exports[`Storyshots UI|Sidebar/SidebarHeading customBrand 1`] = `
   box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
 }
 
-.emotion-3:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
-}
-
-.emotion-3:focus:hover {
-  box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
-}
-
 .emotion-3 > span {
   -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
   -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
@@ -7463,14 +7345,6 @@ exports[`Storyshots UI|Sidebar/SidebarHeading customBrand 1`] = `
   color: #333333;
 }
 
-.emotion-3:focus {
-  box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.4) 0 1px 9px 2px;
-}
-
-.emotion-3:focus:hover {
-  box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.2) 0 8px 18px 0px;
-}
-
 .emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -7639,14 +7513,6 @@ exports[`Storyshots UI|Sidebar/SidebarHeading menuHighlighted 1`] = `
   box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
 }
 
-.emotion-5:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
-}
-
-.emotion-5:focus:hover {
-  box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
-}
-
 .emotion-5 > span {
   -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
   -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
@@ -7693,14 +7559,6 @@ exports[`Storyshots UI|Sidebar/SidebarHeading menuHighlighted 1`] = `
   color: #333333;
 }
 
-.emotion-5:focus {
-  box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.4) 0 1px 9px 2px;
-}
-
-.emotion-5:focus:hover {
-  box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.2) 0 8px 18px 0px;
-}
-
 .emotion-5:after {
   content: "";
   position: absolute;
@@ -7836,14 +7694,6 @@ exports[`Storyshots UI|Sidebar/SidebarHeading menuHighlighted 1`] = `
   box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
 }
 
-.emotion-5:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
-}
-
-.emotion-5:focus:hover {
-  box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
-}
-
 .emotion-5 > span {
   -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
   -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
@@ -7890,14 +7740,6 @@ exports[`Storyshots UI|Sidebar/SidebarHeading menuHighlighted 1`] = `
   color: #333333;
 }
 
-.emotion-5:focus {
-  box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.4) 0 1px 9px 2px;
-}
-
-.emotion-5:focus:hover {
-  box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.2) 0 8px 18px 0px;
-}
-
 .emotion-5:after {
   content: "";
   position: absolute;
@@ -8093,14 +7935,6 @@ exports[`Storyshots UI|Sidebar/SidebarHeading simple 1`] = `
   box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
 }
 
-.emotion-5:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
-}
-
-.emotion-5:focus:hover {
-  box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
-}
-
 .emotion-5 > span {
   -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
   -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
@@ -8147,14 +7981,6 @@ exports[`Storyshots UI|Sidebar/SidebarHeading simple 1`] = `
   color: #333333;
 }
 
-.emotion-5:focus {
-  box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.4) 0 1px 9px 2px;
-}
-
-.emotion-5:focus:hover {
-  box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.2) 0 8px 18px 0px;
-}
-
 .emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -8279,14 +8105,6 @@ exports[`Storyshots UI|Sidebar/SidebarHeading simple 1`] = `
   box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
 }
 
-.emotion-5:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
-}
-
-.emotion-5:focus:hover {
-  box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
-}
-
 .emotion-5 > span {
   -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
   -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
@@ -8333,14 +8151,6 @@ exports[`Storyshots UI|Sidebar/SidebarHeading simple 1`] = `
   color: #333333;
 }
 
-.emotion-5:focus {
-  box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.4) 0 1px 9px 2px;
-}
-
-.emotion-5:focus:hover {
-  box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.2) 0 8px 18px 0px;
-}
-
 .emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;

lib/components/src/form/__snapshots__/form.stories.storyshot

@@ -46,6 +46,7 @@ exports[`Storyshots Basics|Form/Button sizes 1`] = `
   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;
@@ -70,14 +71,6 @@ exports[`Storyshots Basics|Form/Button sizes 1`] = `
   box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
 }
 
-.emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
-}
-
 .emotion-0 > span {
   -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
   -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
@@ -177,6 +170,7 @@ exports[`Storyshots Basics|Form/Button sizes 1`] = `
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -201,14 +195,6 @@ exports[`Storyshots Basics|Form/Button sizes 1`] = `
   box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
 }
 
-.emotion-2:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
-}
-
-.emotion-2:focus:hover {
-  box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
-}
-
 .emotion-2 > span {
   -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
   -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
@@ -299,6 +285,7 @@ exports[`Storyshots Basics|Form/Button sizes 1`] = `
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
   width: 100%;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -323,14 +310,6 @@ exports[`Storyshots Basics|Form/Button sizes 1`] = `
   box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
 }
 
-.emotion-4:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
-}
-
-.emotion-4:focus:hover {
-  box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
-}
-
 .emotion-4 > span {
   -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
   -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
@@ -470,6 +449,7 @@ exports[`Storyshots Basics|Form/Button validations 1`] = `
   color: #333333;
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
   width: 100%;
+  border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -494,14 +474,6 @@ exports[`Storyshots Basics|Form/Button validations 1`] = `
   box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
 }
 
-.emotion-6:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
-}
-
-.emotion-6:focus:hover {
-  box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
-}
-
 .emotion-6 > span {
   -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
   -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
@@ -593,6 +565,7 @@ exports[`Storyshots Basics|Form/Button validations 1`] = `
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
   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;
@@ -617,14 +590,6 @@ exports[`Storyshots Basics|Form/Button validations 1`] = `
   box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
 }
 
-.emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
-}
-
-.emotion-0:focus:hover {
-  box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
-}
-
 .emotion-0 > span {
   -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
   -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
@@ -716,6 +681,7 @@ exports[`Storyshots Basics|Form/Button validations 1`] = `
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
   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;
@@ -740,14 +706,6 @@ exports[`Storyshots Basics|Form/Button validations 1`] = `
   box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
 }
 
-.emotion-2:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
-}
-
-.emotion-2:focus:hover {
-  box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
-}
-
 .emotion-2 > span {
   -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
   -ms-transform: scale3d(1,1,1) translate3d(0,0,0);
@@ -839,6 +797,7 @@ exports[`Storyshots Basics|Form/Button validations 1`] = `
   box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
   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;
@@ -863,14 +822,6 @@ exports[`Storyshots Basics|Form/Button validations 1`] = `
   box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
 }
 
-.emotion-4:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
-}
-
-.emotion-4:focus:hover {
-  box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
-}
-
 .emotion-4 > span {
   -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
   -ms-transform: scale3d(1,1,1) translate3d(0,0,0);

lib/components/src/form/input/input.js

@@ -112,15 +112,20 @@ 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.borderRadius }), {
+  styled(StyledButton)(
-    userSelect: 'none',
+    sizes,
-    overflow: 'visible',
+    validation,
-    zIndex: 2,
+    ({ theme }) => ({ borderRadius: theme.appBorderRadius }),
+    {
+      userSelect: 'none',
+      overflow: 'visible',
+      zIndex: 2,
 
-    // overrides the default hover from Button
+      // overrides the default hover from Button
-    '&:hover': {
+      '&:hover': {
-      transform: 'none',
+        transform: 'none',
-    },
+      },
-  })
+    }
+  )
 );
 Button.displayName = 'Button';

lib/components/src/index.js

@@ -1,20 +1,19 @@
-export { StorybookLogo } from './brand/StorybookLogo';
-export { StorybookIcon } from './brand/StorybookIcon';
 export { default as Badge } from './Badge/Badge';
-export { default as Button } from './Button/Button';
 
+// Typography
 export { default as Link } from './typography/link/link';
 export { default as DocumentFormatting } from './typography/DocumentFormatting';
-
-export { Spaced } from './spaced/Spaced';
-
-export { default as Form } from './form/index';
-
 export SyntaxHighlighter from './syntaxhighlighter/syntaxhighlighter';
-
+// UI
 export { ActionBar } from './ActionBar/ActionBar';
+export { Spaced } from './spaced/Spaced';
 export { Placeholder } from './placeholder/placeholder';
 
+// Forms
+export { default as Button } from './Button/Button';
+export { default as Form } from './form/index';
+
+// Tooltips
 export { default as WithTooltip } from './tooltip/WithTooltip';
 export { default as TooltipMessage } from './tooltip/TooltipMessage';
 export { default as TooltipNote } from './tooltip/TooltipNote';
@@ -26,4 +25,7 @@ export { IconButton, TabButton } from './bar/button';
 export { Separator, interleaveSeparators } from './bar/separator';
 export { Bar, FlexBar } from './bar/bar';
 
+// Graphics
 export { default as Icons } from './icon/icon';
+export { StorybookLogo } from './brand/StorybookLogo';
+export { StorybookIcon } from './brand/StorybookIcon';

lib/theming/src/global.ts

@@ -95,7 +95,7 @@ export const createGlobal = memoize(1)(
       ...resetStyles,
       body: {
         ...resetStyles.body,
-        color: color.darkest,
+        color: color.defaultText,
         background: background.app,
       },
 

lib/theming/src/themes/light.ts

@@ -6,8 +6,6 @@ export default create({
   // Storybook-specific color palette
   colorPrimary: '#FF4785', // coral
   colorSecondary: '#1EA7FD', // ocean
-  colorTertiary: '#FAFBFC', // neutral buttons
-  colorAncillary: '#22a699', // for code
 
   // UI
   appBg: background.app,