diff --git a/packages/hindawi-theme/src/elements/Button.js b/packages/hindawi-theme/src/elements/Button.js index f693ac0cd5c7ba334ea2ac8e651877dae4304486..520a979d672fd036346f8caadbb050854ad4c0fe 100644 --- a/packages/hindawi-theme/src/elements/Button.js +++ b/packages/hindawi-theme/src/elements/Button.js @@ -1,24 +1,48 @@ import { css } from 'styled-components' -import { darken, th } from '@pubsweet/ui-toolkit' +import { lighten, th } from '@pubsweet/ui-toolkit' + +const primary = css` + background-color: ${th('button.primary')}; + border: ${th('borderStyle')} ${th('borderWidth')} + ${th('button.borderDefault')}; + color: ${th('button.primaryText')}; + + &:hover { + background-color: ${lighten('button.primary', 0.1)}; + } + + &:active { + background-color: ${th('button.primary')}; + border-color: ${th('button.borderActive')}; + } + + &[disabled] { + border: none; + &, + &:hover { + background-color: ${th('button.disabled')}; + } + } +` const secondary = css` background: none; - border: none; - color: ${th('colorPrimary')}; - padding: 0; - text-decoration: underline; + border: ${th('borderStyle')} ${th('button.secondaryBorderWidth')} + ${th('colorSecondary')}; + color: ${th('colorSecondary')}; &:hover, &:focus, &:active { background: none; - border: none; - color: ${darken('colorPrimary', 0.3)}; + border-color: ${th('button.secondaryBorderColor')}; outline: none; } &[disabled] { + border-color: ${th('button.secondaryBorderColor')}; color: ${th('colorTextPlaceholder')}; + opacity: 0.1; &:hover { background: none; @@ -26,13 +50,36 @@ const secondary = css` } ` +const buttonSize = props => { + switch (props.size) { + case 'medium': + return css` + font-size: ${th('button.mediumSize')}; + line-height: ${th('button.mediumLineHeight')}; + height: ${th('button.mediumHeight')}; + min-width: ${th('button.mediumMinWidth')}; + ` + case 'small': + return css` + font-size: ${th('button.smallSize')}; + line-height: ${th('button.smallLineHeight')}; + height: ${th('button.smallHeight')}; + min-width: ${th('button.smallMinWidth')}; + ` + default: + return css` + font-size: ${th('fontSizeBase')}; + line-height: ${th('lineHeightBase')}; + height: ${th('button.defaultHeight')}; + min-width: ${th('button.minWidth')}; + ` + } +} + export default css` - background-color: ${th('button.primary')}; - border: ${th('borderStyle')} ${th('borderWidth')} - ${th('button.borderDefault')}; - color: ${th('button.primaryText')}; - line-height: calc(${th('gridUnit')} * 4); + padding: 0 calc(${th('gridUnit')}); text-transform: uppercase; - ${props => !props.primary && secondary}; + ${props => (props.primary ? primary : secondary)}; + ${buttonSize}; ` diff --git a/packages/hindawi-theme/src/fonts/MYRIADPRO-BOLD.woff b/packages/hindawi-theme/src/fonts/MYRIADPRO-BOLD.woff new file mode 100644 index 0000000000000000000000000000000000000000..5fe67eba511b2c9605cdf51bc1e1f9212289bde4 Binary files /dev/null and b/packages/hindawi-theme/src/fonts/MYRIADPRO-BOLD.woff differ diff --git a/packages/hindawi-theme/src/fonts/MYRIADPRO-REGULAR.woff b/packages/hindawi-theme/src/fonts/MYRIADPRO-REGULAR.woff new file mode 100644 index 0000000000000000000000000000000000000000..a664bf91f29a8e4269e13af9d716f9b9434aa7c2 Binary files /dev/null and b/packages/hindawi-theme/src/fonts/MYRIADPRO-REGULAR.woff differ diff --git a/packages/hindawi-theme/src/fonts/MYRIADPRO-SEMIBOLD.woff b/packages/hindawi-theme/src/fonts/MYRIADPRO-SEMIBOLD.woff new file mode 100644 index 0000000000000000000000000000000000000000..b11273c0255f1d6f84e0aa4b8597e5e54d4df481 Binary files /dev/null and b/packages/hindawi-theme/src/fonts/MYRIADPRO-SEMIBOLD.woff differ diff --git a/packages/hindawi-theme/src/fonts/index.css b/packages/hindawi-theme/src/fonts/index.css new file mode 100644 index 0000000000000000000000000000000000000000..799b0243ca3f4931300e5121c75ddd2b521d15c4 --- /dev/null +++ b/packages/hindawi-theme/src/fonts/index.css @@ -0,0 +1,14 @@ +@font-face { + font-family: 'Myriad Pro'; + src: url('./MYRIADPRO-REGULAR.woff') format('woff'); +} + +@font-face { + font-family: 'Myriad Pro Semi'; + src: url('./MYRIADPRO-SEMIBOLD.woff') format('woff'); +} + +@font-face { + font-family: 'Myriad Pro Bold'; + src: url('./MYRIADPRO-BOLD.woff') format('woff'); +} diff --git a/packages/hindawi-theme/src/index.js b/packages/hindawi-theme/src/index.js index 9bd38c28382cc7014b87db0f6ca4bef3564a04b7..307e8ead73fc079dfdb0c32f92ea04a60f08a524 100644 --- a/packages/hindawi-theme/src/index.js +++ b/packages/hindawi-theme/src/index.js @@ -1,7 +1,8 @@ /* eslint-disable import/extensions */ import { injectGlobal } from 'styled-components' -// import { Button } from './elements' +import './fonts/index.css' +import { Button } from './elements' injectGlobal` body { @@ -34,16 +35,33 @@ const hindawiTheme = { // colors button: { + borderActive: 'rgba(0,0,0,0.34)', + borderDefault: 'rgba(0,0,0,0.14)', + primaryText: '#f6f6f6', primary: '#63A945', + disabled: '#dbdbdb', secondary: 'none', - borderDefault: 'rgba(0,0,0,0.14)', - borderActive: 'rgba(0,0,0,0.34)', + secondaryBorderWidth: '2px', + secondaryBorderColor: '#003049', + + mediumSize: '13px', + mediumLineHeight: '15px', + smallSize: '12px', + smallLineHeight: '14px', + + defaultHeight: '40px', + mediumHeight: '30px', + smallHeight: '20px', + + minWidth: '120px', + mediumMinWidth: '100px', + smallMinWidth: '80px', }, /* Text variables */ // fonts - fontInterface: "'Myriad Pro'", + fontInterface: "'Myriad Pro Bold'", fontHeading: "'Myriad Pro Semi'", fontReading: "'Myriad Pro'", fontWriting: "'Myriad Pro'", @@ -86,11 +104,11 @@ const hindawiTheme = { transitionTimingFunction: 'ease', transitionDelay: '0', - // cssOverrides: { - // ui: { - // Button, - // }, - // }, + cssOverrides: { + ui: { + Button, + }, + }, } export default hindawiTheme