diff --git a/packages/hindawi-theme/src/elements/TextField.js b/packages/hindawi-theme/src/elements/TextField.js new file mode 100644 index 0000000000000000000000000000000000000000..90bf5bd6f4792ea222d2007be3f0afcf7f78cbb6 --- /dev/null +++ b/packages/hindawi-theme/src/elements/TextField.js @@ -0,0 +1,46 @@ +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')}; + `, +} diff --git a/packages/hindawi-theme/src/elements/index.js b/packages/hindawi-theme/src/elements/index.js index 10c87e622c8b05ab26063602c36bce09353a4473..084012b4cbebb722c2284335cd64ded6ae617412 100644 --- a/packages/hindawi-theme/src/elements/index.js +++ b/packages/hindawi-theme/src/elements/index.js @@ -1,3 +1,4 @@ import Button from './Button' +import TextField from './TextField' -export { Button } +export { Button, TextField } diff --git a/packages/hindawi-theme/src/fonts/MYRIADPRO-BOLDCONDIT.woff b/packages/hindawi-theme/src/fonts/MYRIADPRO-BOLDCONDIT.woff new file mode 100644 index 0000000000000000000000000000000000000000..b62d8b33634f935006b0b66f56a6f59a125f1827 Binary files /dev/null and b/packages/hindawi-theme/src/fonts/MYRIADPRO-BOLDCONDIT.woff differ diff --git a/packages/hindawi-theme/src/fonts/MYRIADPRO-CONDIT.woff b/packages/hindawi-theme/src/fonts/MYRIADPRO-CONDIT.woff new file mode 100644 index 0000000000000000000000000000000000000000..56a0128d59a212ca8598106d67ccf5222ec789cd Binary files /dev/null and b/packages/hindawi-theme/src/fonts/MYRIADPRO-CONDIT.woff differ diff --git a/packages/hindawi-theme/src/fonts/index.css b/packages/hindawi-theme/src/fonts/index.css index 799b0243ca3f4931300e5121c75ddd2b521d15c4..5816d3b0df6a6abc10583f82d44cd21e250e9164 100644 --- a/packages/hindawi-theme/src/fonts/index.css +++ b/packages/hindawi-theme/src/fonts/index.css @@ -1,14 +1,27 @@ @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'); +} diff --git a/packages/hindawi-theme/src/index.js b/packages/hindawi-theme/src/index.js index 307e8ead73fc079dfdb0c32f92ea04a60f08a524..a8a38b65e5e92a05726f9dde856154ce87791d8c 100644 --- a/packages/hindawi-theme/src/index.js +++ b/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, }, }, }