feat(textfield): override the textfield

packages/hindawi-theme/src/elements/TextField.js

+import { css } from 'styled-components'
+import { th, validationColor } from '@pubsweet/ui-toolkit'
+
+const textColor = ({ theme, validationStatus = 'default' }) =>
+  ({
+    error: theme.colorError,
+    success: theme.colorText,
+    default: theme.colorText,
+    warning: theme.colorWarning,
+  }[validationStatus])
+
+export default {
+  Input: css`
+    border: ${th('borderWidth')} ${th('borderStyle')} ${validationColor};
+    font-family: ${th('fontReading')};
+    font-size: ${th('fontSizeBase')};
+    line-height: ${th('lineHeightBase')};
+    color: ${textColor};
+
+    &:active,
+    &:focus {
+      border-color: ${th('textField.activeBorder')};
+      outline: none;
+    }
+
+    &::placeholder {
+      font-family: "'Myriad Pro Italic'";
+      font-size: ${th('fontSizeBase')};
+      line-height: ${th('lineHeightBase')};
+    }
+
+    &[disabled] {
+      opacity: 0.4;
+
+      &:active,
+      &:focus {
+        border-color: ${th('colorBorder')};
+      }
+    }
+  `,
+  Label: css`
+    font-family: ${th('fontReading')};
+    font-size: ${th('fontSizeBase')};
+    line-height: ${th('lineHeightBase')};
+  `,
+}

packages/hindawi-theme/src/elements/index.js

 import Button from './Button'
+import TextField from './TextField'
 
-export { Button }
+export { Button, TextField }

packages/hindawi-theme/src/fonts/index.css

 @font-face {
   font-family: 'Myriad Pro';
+  font-style: normal;
+  font-weight: normal;
   src: url('./MYRIADPRO-REGULAR.woff') format('woff');
 }
 
 @font-face {
   font-family: 'Myriad Pro Semi';
+  font-style: normal;
+  font-weight: normal;
   src: url('./MYRIADPRO-SEMIBOLD.woff') format('woff');
 }
 
 @font-face {
   font-family: 'Myriad Pro Bold';
+  font-style: normal;
+  font-weight: normal;
   src: url('./MYRIADPRO-BOLD.woff') format('woff');
 }
+
+@font-face {
+  font-family: 'Myriad Pro Italic';
+  font-style: normal;
+  font-weight: normal;
+  src: url('./MYRIADPRO-CONDIT.woff') format('woff');
+}

packages/hindawi-theme/src/index.js

@@ -2,7 +2,7 @@
 import { injectGlobal } from 'styled-components'
 
 import './fonts/index.css'
-import { Button } from './elements'
+import { Button, TextField } from './elements'
 
 injectGlobal`
   body {
@@ -20,11 +20,11 @@ const hindawiTheme = {
   colorPrimary: '#63A945',
   colorSecondary: '#586971',
   colorFurniture: '#DBDBDB',
-  colorBorder: '#AAA',
+  colorBorder: '#DBDBDB',
   colorBackgroundHue: '#F1F1F1',
   colorSuccess: '#63A945',
-  colorError: '#DBAFC1',
-  colorText: '#363636',
+  colorError: '#FC6A4B',
+  colorText: '#242424',
   colorTextReverse: '#667080',
   colorTextPlaceholder: '#595959',
   colorWarning: '#FC6A4B',
@@ -59,6 +59,10 @@ const hindawiTheme = {
     smallMinWidth: '80px',
   },
 
+  textField: {
+    activeBorder: '#003049',
+  },
+
   /* Text variables */
   // fonts
   fontInterface: "'Myriad Pro Bold'",
@@ -107,6 +111,7 @@ const hindawiTheme = {
   cssOverrides: {
     ui: {
       Button,
+      TextField,
     },
   },
 }