fix: Make styles of input controls less dependent on global app styles (#54)

Author: kachkaev

src/index.js

@@ -32,6 +32,8 @@ const theme = {
   foreground: 'white',
   gray: '#3f4e60',
   grayAlt: '#222e3e',
+  inputBackgroundColor: '#fff',
+  inputTextColor: '#000',
   success: '#00ab52',
   danger: '#ff0085',
   active: '#006bff',

src/styledComponents.js

@@ -48,16 +48,19 @@ export const Code = styled('code', {
   fontSize: '.9em',
 })
 
-export const Input = styled('input', {
+export const Input = styled('input', (props, theme) => ({
+  backgroundColor: theme.inputBackgroundColor,
   border: 0,
   borderRadius: '.2em',
+  color: theme.inputTextColor,
   fontSize: '.9em',
+  lineHeight: `1.3`,
   padding: '.3em .4em',
-})
+}))
 
 export const Select = styled(
   'select',
-  {
+  (props, theme) => ({
     display: `inline-block`,
     fontSize: `.9em`,
     fontFamily: `sans-serif`,
@@ -69,12 +72,13 @@ export const Select = styled(
     borderRadius: `.2em`,
     appearance: `none`,
     WebkitAppearance: 'none',
-    backgroundColor: `#fff`,
+    backgroundColor: theme.inputBackgroundColor,
     backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>")`,
     backgroundRepeat: `no-repeat`,
     backgroundPosition: `right .55em center`,
     backgroundSize: `.65em auto, 100%`,
-  },
+    color: theme.inputTextColor,
+  }),
   {
     '(max-width: 500px)': {
       display: 'none',