feat(checkbox): add overrride

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

+import { css } from 'styled-components'
+import { th } from '@pubsweet/ui-toolkit'
+
+const checkIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
+  <path fill="#fff" d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/>
+</svg>`
+
+// const partialCheck = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+// <path fill="#939393" fill-rule="evenodd" d="M1.994 0A1.995 1.995 0 0 0 0 1.994v12.012C0 15.107.895 16 1.994 16h12.012A1.995 1.995 0 0 0 16 14.006V1.994A1.995 1.995 0 0 0 14.006 0H1.994zm6.962 7.167h4.388c.201-.002.391.658.391.86 0 .202-.19.866-.391.864H2.78c-.2.01-.343-.647-.352-.847-.01-.2.119-.867.318-.877h6.209z"/>
+// </svg>
+// `
+
+const Checkbox = css`
+  font-family: ${th('fontReading')};
+  font-size: ${th('fontSizeBase')};
+  line-height: ${th('lineHeightBase')};
+  opacity: ${props => (props.disabled ? 0.3 : 1)}; 
+
+  input:checked + span::before {
+    border-color: ${th('colorPrimary')};
+    background: url('data:image/svg+xml;utf8,${encodeURIComponent(
+      checkIcon,
+    )}') center no-repeat, ${th('colorPrimary')};
+  }
+`
+
+Checkbox.Input = css`
+  position: absolute;
+  opacity: 0;
+  z-index: -1;
+`
+
+Checkbox.Label = css`
+  &::before {
+    content: ' ';
+    background: transparent;
+    border: 2px solid ${th('checkbox.borderColor')};
+    border-radius: ${th('borderRadius')};
+    box-sizing: border-box;
+    display: inline-block;
+    margin-right: ${th('gridUnit')};
+    vertical-align: middle;
+
+    height: calc(${th('gridUnit')} * 3);
+    width: calc(${th('gridUnit')} * 3);
+  }
+`
+
+export default Checkbox

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

 import Icon from './Icon'
 import Menu from './Menu'
 import Button from './Button'
+import Checkbox from './Checkbox'
 import TextField from './TextField'
 import ValidatedTextField from './ValidatedTextField'
 
-export { Icon, Menu, Button, TextField, ValidatedTextField }
+export { Icon, Menu, Checkbox, Button, TextField, ValidatedTextField }

packages/hindawi-theme/src/index.js

@@ -2,7 +2,14 @@
 import { injectGlobal } from 'styled-components'
 
 import './fonts/index.css'
-import { Icon, Menu, Button, TextField, ValidatedTextField } from './elements'
+import {
+  Icon,
+  Menu,
+  Button,
+  Checkbox,
+  TextField,
+  ValidatedTextField,
+} from './elements'
 
 injectGlobal`
   body {
@@ -64,6 +71,10 @@ const hindawiTheme = {
     optionBackground: 'rgba(0, 126, 146, 0.1)',
   },
 
+  checkbox: {
+    borderColor: '#939393',
+  },
+
   /* Text variables */
   // fonts
   fontInterface: "'Myriad Pro Bold'",
@@ -114,6 +125,7 @@ const hindawiTheme = {
       Icon,
       Menu,
       Button,
+      Checkbox,
       TextField,
       ValidatedTextField,
     },