diff --git a/packages/hindawi-theme/src/elements/TextField.js b/packages/hindawi-theme/src/elements/TextField.js index 3683d3b9db9d2ea98ff3889fbad609099482badb..a35039d6d072da466a663568837bc36ad8022ac5 100644 --- a/packages/hindawi-theme/src/elements/TextField.js +++ b/packages/hindawi-theme/src/elements/TextField.js @@ -1,17 +1,18 @@ import { css } from 'styled-components' -import { th, validationColor } from '@pubsweet/ui-toolkit' +import { th } from '@pubsweet/ui-toolkit' -const textColor = ({ theme, validationStatus = 'default' }) => - ({ - error: theme.colorError, - success: theme.colorText, - default: theme.colorFurniture, - warning: theme.colorWarning, - }[validationStatus]) +const textColor = ({ validationStatus }) => + validationStatus === 'error' ? th('colorError') : th('colorText') + +const validatedBorder = ({ validationStatus }) => + validationStatus === 'error' ? th('colorError') : th('colorFurniture') + +const activeBorder = ({ validationStatus }) => + validationStatus === 'error' ? th('colorError') : th('textField.activeBorder') export default { Input: css` - border: ${th('borderWidth')} ${th('borderStyle')} ${validationColor}; + border: ${th('borderWidth')} ${th('borderStyle')} ${validatedBorder}; color: ${textColor}; font-family: ${th('fontReading')}; @@ -21,7 +22,7 @@ export default { &:active, &:focus { - border-color: ${th('textField.activeBorder')}; + border-color: ${activeBorder}; outline: none; }