Polish

addons/actions/src/components/ActionLogger/style.js

@@ -18,7 +18,7 @@ export const Action = styled.div({
 });
 
 export const Counter = styled.div(({ theme }) => ({
-  backgroundColor: theme.inverseBgColor,
+  backgroundColor: theme.inverseTextBgColor,
   color: theme.inverseTextColor,
   fontSize: theme.typography.size.s1,
   fontWeight: theme.typography.weight.bold,

addons/knobs/src/components/types/Color.js

@@ -81,7 +81,7 @@ class ColorType extends React.Component {
 
     return (
       <Button type="button" name={knob.name} onClick={this.handleClick} size="flex">
-        {knob.value}
+        {knob.value.toUpperCase()}
         <Swatch style={colorStyle} />
         {displayColorPicker ? (
           <Popover

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

@@ -22,7 +22,7 @@ const styles = ({ theme }) => ({
   ...styleResets,
 
   transition: 'all 200ms ease-out',
-  color: theme.mainTextColor,
+  color: 'inherit',
   background: theme.inputFill,
   boxShadow: `${theme.inputBorder} 0 0 0 1px inset`,
   borderRadius: theme.mainBorderRadius,

lib/components/src/tooltip/Tooltip.js

@@ -80,8 +80,8 @@ const Wrapper = styled.div(
               rgba(255, 255, 255, 0.97) 100%
             )`,
           filter: `
-            drop-shadow(0px 5px 15px rgba(0, 0, 0, 0.1))
-            drop-shadow(0 2px 5px rgba(0, 0, 0, 0.05))
+            drop-shadow(0px 5px 5px rgba(0,0,0,0.05))
+            drop-shadow(0 1px 3px rgba(0,0,0,0.1))
           `,
           borderRadius: theme.mainBorderRadius,
           fontSize: theme.typography.size.s1,

lib/theming/src/themes/light.ts

@@ -5,20 +5,25 @@ import { baseFonts, monoFonts, color, background, typography, Theme } from '../b
 import { easing, animation } from '../animation';
 
 const main = {
+  // App color
+  appBgColor: background.app, // TODO implement this
+
+  // Layout
+  mainBorderColor: color.border,
+  mainBorderRadius: 4,
+
   // Typography
   mainTextFace: baseFonts.fontFamily,
   monoTextFace: monoFonts.fontFamily,
   mainTextSize: typography.size.s2 - 1, // 13px
 
-  // Color
+  // Text colors (dark on light)
   mainTextColor: color.darkest,
-  mainBgColor: color.lightest,
-  inverseTextColor: color.lightest,
-  inverseBgColor: color.mediumdark,
+  mainTextBgColor: color.lightest,
 
-  // Layout
-  mainBorderColor: color.border,
-  mainBorderRadius: 4,
+  // Text colors (light on dark)
+  inverseTextColor: color.lightest,
+  inverseTextBgColor: color.mediumdark,
 };
 
 const bar = {

lib/ui/src/components/sidebar/SidebarSearch.js

@@ -73,7 +73,7 @@ const FilterForm = styled.form(({ theme, focussed }) => ({
 
   input: {
     color: theme.color.darkest,
-    fontSize: theme.typography.size.s1,
+    fontSize: theme.mainTextSize,
     lineHeight: '20px',
     paddingTop: '2px',
     paddingBottom: '2px',