feat(ui-toolkit): add borderColor function to theme helper

packages/ui-toolkit/index.js

-import { darken, lighten } from './src/darkenLighten'
-import { fadeIn, fadeOut } from './src/styles/fadeInOut'
-
-export { darken, lighten }
-export { fadeIn, fadeOut }
+export { darken, lighten } from './src/darkenLighten'
+export { fadeIn, fadeOut } from './src/styles/fadeInOut'
 
 export { default as headingScale } from './src/headingScale'
 export { default as override } from './src/override'
-export { default as th } from './src/themeHelper'
+export { th, borderColor } from './src/themeHelper'
 
 export { default as rotate360 } from './src/styles/rotate360'

packages/ui-toolkit/src/themeHelper.js

 import { get } from 'lodash'
 
-/*
+/**
+ * A bit of syntactic sugar for styled-components. Lets you replace this:
+ *
+ * ${props => props.theme.colorPrimary}
+ *
+ * with this:
+ *
+ * ${th('colorPrimary')}
+ *
+ * This is called 'th' (theme helper) for historic reasons
+ */
+const th = name => props => get(props.theme, name)
 
-A bit of syntactic sugar for styled-components. Lets you replace this:
+/**
+ * returns border color from theme object, based on validation status
+ */
+const borderColor = ({ theme, validationStatus = 'default' }) =>
+  ({
+    error: theme.colorError,
+    success: theme.colorSuccess,
+    default: theme.colorBorder,
+    warning: theme.colorWarning,
+  }[validationStatus])
 
-  ${props => props.theme.colorPrimary}
-
-with this:
-
-  ${th('colorPrimary')}
-
-*/
-
-export default name => props => get(props.theme, name)
+export { th, borderColor }

packages/ui/src/atoms/TextField.js

 import React from 'react'
 import styled from 'styled-components'
-import { th, override } from '@pubsweet/ui-toolkit'
+import { th, override, borderColor } from '@pubsweet/ui-toolkit'
 
 const Root = styled.div`
   display: flex;
@@ -18,14 +18,6 @@ const Label = styled.label`
   ${override('ui.TextField.Label')};
 `
 
-const borderColor = ({ theme, validationStatus = 'default' }) =>
-  ({
-    error: theme.colorError,
-    success: theme.colorSuccess,
-    default: theme.colorBorder,
-    warning: theme.colorWarning,
-  }[validationStatus])
-
 const Input = styled.input`
   border: ${th('borderWidth')} ${th('borderStyle')} ${borderColor};