diff --git a/packages/component-dashboard/src/components/Reviews.js b/packages/component-dashboard/src/components/Reviews.js index 5b9bd713ac7f206e597460f2638c6393920465c0..805a7d9464a53627403c5508b71a2c2793b9715e 100644 --- a/packages/component-dashboard/src/components/Reviews.js +++ b/packages/component-dashboard/src/components/Reviews.js @@ -3,7 +3,7 @@ import styled from 'styled-components' import { compose, withProps } from 'recompose' import { groupBy } from 'lodash' import { withJournal } from 'xpub-journal' -import { Badge } from '@pubsweet/ui' +import { Badge, th } from '@pubsweet/ui' const Root = styled.div` display: inline-flex; @@ -12,7 +12,7 @@ const Root = styled.div` margin-top: 0.3em; padding-left: 1.5em; - font-family: var(--font-reviewer); + font-family: ${th('fontReviewer')}; font-size: 0.9em; ` diff --git a/packages/component-dashboard/src/components/Status.js b/packages/component-dashboard/src/components/Status.js index c571e3e170c67d01ea3fe659c38ce44c6de9e83f..db1bf5b889679c71ae5196c962be4f58a0d73b9d 100644 --- a/packages/component-dashboard/src/components/Status.js +++ b/packages/component-dashboard/src/components/Status.js @@ -1,5 +1,6 @@ import React from 'react' import styled from 'styled-components' +import { th } from '@pubsweet/ui' // TODO: move labels to journal config @@ -14,7 +15,7 @@ const labels = { } const Root = styled.div` - color: var(--color-primary); + color: ${th('colorPrimary')}; ` const Status = ({ status }) => <Root>{labels[status] || 'Unsubmitted'}</Root> diff --git a/packages/component-dashboard/src/components/UploadManuscript.js b/packages/component-dashboard/src/components/UploadManuscript.js index 53b792505ef6ef21a341591185c703ca6e45d1b4..f813d744a0da1fbe5814f91af07a42f1a31a1fc8 100644 --- a/packages/component-dashboard/src/components/UploadManuscript.js +++ b/packages/component-dashboard/src/components/UploadManuscript.js @@ -1,7 +1,7 @@ import React, { Component } from 'react' import styled, { keyframes } from 'styled-components' import Dropzone from 'react-dropzone' -import { Icon } from '@pubsweet/ui' +import { Icon, th } from '@pubsweet/ui' const StyledDropzone = styled(Dropzone)` border: none; @@ -10,12 +10,12 @@ const StyledDropzone = styled(Dropzone)` ` const StatusIcon = ({ children }) => ( - <Icon color="var(--color-primary)">{children}</Icon> + <Icon color={th('colorPrimary')}>{children}</Icon> ) const Status = styled.div` align-items: center; - color: var(--color-primary); + color: ${th('colorPrimary')}; display: inline-flex; ` @@ -57,7 +57,7 @@ const StatusConverting = Status.extend.attrs({ const StatusError = Status.extend.attrs({ children: () => <StatusIcon>plus_circle</StatusIcon>, })` - color: var(--color-danger); + color: ${th('colorDanger')}; font-size: 1.5em; font-style: italic; font-weight: 400; @@ -67,7 +67,7 @@ const StatusError = Status.extend.attrs({ } .icon line { - stroke: var(--color-danger); + stroke: ${th('colorDanger')}; transform: rotate(45deg) scale(2.8); transform-origin: 50% 50%; } @@ -107,8 +107,8 @@ const Root = styled.div` &:hover ${StatusIdle} { circle { - fill: var(--color-primary); - stroke: var(--color-primary); + fill: ${th('colorPrimary')}; + stroke: ${th('colorPrimary')}; } line { @@ -122,14 +122,14 @@ const Main = styled.div` ` const Error = styled.div` - color: var(--color-danger); + color: ${th('colorDanger')}; font-size: 1.5em; font-style: italic; font-weight: 400; ` const Info = styled.div` - color: var(--color-primary); + color: ${th('colorPrimary')}; font-size: 2em; font-weight: 400; text-transform: uppercase; diff --git a/packages/component-dashboard/src/components/metadata/Meta.js b/packages/component-dashboard/src/components/metadata/Meta.js index 56c7894b1fc70ce37501e8b95185c1ec4e8a673b..805c7ca0106ebad479bbaed15c973aa4b398af82 100644 --- a/packages/component-dashboard/src/components/metadata/Meta.js +++ b/packages/component-dashboard/src/components/metadata/Meta.js @@ -1,9 +1,10 @@ import styled from 'styled-components' +import { th } from '@pubsweet/ui' const Meta = styled.div` display: flex; flex-wrap: nowrap; - font-size: var(--font-size-base-small); + font-size: ${th('fontSizeBaseSmall')}; white-space: nowrap; ` diff --git a/packages/component-dashboard/src/components/molecules/Item.js b/packages/component-dashboard/src/components/molecules/Item.js index 8d493d0d543cc920ff7acaeaabe8cf6190660829..b20039855a2489a0684d15b4f1c30369869f97ff 100644 --- a/packages/component-dashboard/src/components/molecules/Item.js +++ b/packages/component-dashboard/src/components/molecules/Item.js @@ -1,7 +1,8 @@ import styled from 'styled-components' +import { th } from '@pubsweet/ui' const Item = styled.div` - margin-bottom: var(--grid-unit); + margin-bottom: ${th('gridUnit')}; ` const Header = styled.div` @@ -14,14 +15,14 @@ const Body = styled.div` align-items: flex-end; display: flex; justify-content: flex-end; - margin-bottom: var(--grid-unit); + margin-bottom: ${th('gridUnit')}; padding-left: 1.5em; ` const Divider = styled.span.attrs({ children: props => ` ${props.separator} `, })` - color: var(--color-furniture); + color: ${th('colorFurniture')}; white-space: pre; ` diff --git a/packages/component-dashboard/src/components/molecules/Links.js b/packages/component-dashboard/src/components/molecules/Links.js index c168690c296e0897d3b07e8c9ec7d56b05f95764..07de337f4824390dab1697272ba2c9be63b6f9e4 100644 --- a/packages/component-dashboard/src/components/molecules/Links.js +++ b/packages/component-dashboard/src/components/molecules/Links.js @@ -1,4 +1,5 @@ import styled from 'styled-components' +import { th } from '@pubsweet/ui' const Links = styled.div` align-items: flex-end; @@ -7,7 +8,7 @@ const Links = styled.div` ` const LinkContainer = styled.div` - font-size: var(--font-size-base-small); + font-size: ${th('fontSizeBaseSmall')}; ` export { Links, LinkContainer } diff --git a/packages/component-dashboard/src/components/molecules/Page.js b/packages/component-dashboard/src/components/molecules/Page.js index b48f117e0be10a7ee892c0983d5c4616d0828f98..09549b97d4731b0d3ac4caae049f5041628bbcf2 100644 --- a/packages/component-dashboard/src/components/molecules/Page.js +++ b/packages/component-dashboard/src/components/molecules/Page.js @@ -1,4 +1,5 @@ import styled from 'styled-components' +import { th } from '@pubsweet/ui' const Page = styled.div` margin: auto; @@ -6,18 +7,18 @@ const Page = styled.div` ` const Section = styled.div` - margin: var(--grid-unit) 0; + margin: ${th('gridUnit')} 0; &:not(:last-of-type) { - margin-bottom: calc(var(--grid-unit) * 2); + margin-bottom: calc(${th('gridUnit')} * 2); } ` const Heading = styled.div` - color: var(--color-primary); - font-family: var(--font-heading); - font-size: var(--font-size-heading-3); - margin: var(--grid-unit) 0; + color: ${th('colorPrimary')}; + font-family: ${th('fontHeading')}; + font-size: ${th('fontSizeHeading3')}; + margin: ${th('gridUnit')} 0; ` const UploadContainer = styled.div` diff --git a/packages/component-dashboard/src/components/sections/VersionTitle.js b/packages/component-dashboard/src/components/sections/VersionTitle.js index da55aaff1c189182602056af03e18df9808d9990..d3e0d157dd7d8aae0c5b9584264ef700bd40867f 100644 --- a/packages/component-dashboard/src/components/sections/VersionTitle.js +++ b/packages/component-dashboard/src/components/sections/VersionTitle.js @@ -1,10 +1,11 @@ import React from 'react' import styled from 'styled-components' +import { th } from '@pubsweet/ui' // import {TitleViewer} from 'xpub-edit/src/components' const Root = styled.div` flex: 1; - font-size: var(--font-size-heading-3); + font-size: ${th('fontSizeHeading3')}; ` export default ({ version, className }) => { diff --git a/packages/component-review/src/components/atoms/AdminSection.js b/packages/component-review/src/components/atoms/AdminSection.js index 65243c0f9a6629a6a93abcd314094bd08c87c67a..d63ccda52b54fd8092f61c7391eba0d875c7026e 100644 --- a/packages/component-review/src/components/atoms/AdminSection.js +++ b/packages/component-review/src/components/atoms/AdminSection.js @@ -1,7 +1,8 @@ import styled from 'styled-components' +import { th } from '@pubsweet/ui' const AdminSection = styled.div` - margin-bottom: var(--grid-unit); + margin-bottom: ${th('gridUnit')}; ` export default AdminSection diff --git a/packages/component-review/src/components/atoms/Tab.js b/packages/component-review/src/components/atoms/Tab.js index 474667c7d804c86c63cd6d3013ac5a6abc8f75fb..5a843a1fc86dcb6094a749388fefd69a69a28ac6 100644 --- a/packages/component-review/src/components/atoms/Tab.js +++ b/packages/component-review/src/components/atoms/Tab.js @@ -1,12 +1,13 @@ import styled from 'styled-components' +import { th } from '@pubsweet/ui' const Tab = styled.div` - padding: var(--sub-grid-unit) 1em; - font-size: var(--font-size-base-small); - border-width: 0 var(--border-width) var(--border-width) 0; - border-style: var(--border-style); - border-color: ${({ active }) => - active ? 'var(--color-primary)' : 'var(--color-border)'}; + padding: ${th('subGridUnit')} 1em; + font-size: ${th('fontSizeBaseSmall')}; + border-width: 0 ${th('borderWidth')} ${th('borderWidth')} 0; + border-style: ${th('borderStyle')}; + border-color: ${({ active, theme }) => + active ? theme.colorPrimary : theme.colorBorder}; ` export default Tab diff --git a/packages/component-review/src/components/atoms/Tabs.js b/packages/component-review/src/components/atoms/Tabs.js index e98cce6165d375949fb3c7f4713ccd7c82133b56..7938c77322b5481935c422298131fb5a6858f022 100644 --- a/packages/component-review/src/components/atoms/Tabs.js +++ b/packages/component-review/src/components/atoms/Tabs.js @@ -1,5 +1,6 @@ import React from 'react' import styled from 'styled-components' +import { th } from '@pubsweet/ui' import Tab from './Tab' // TODO: allow the tab content to be separate from the key @@ -7,11 +8,11 @@ import Tab from './Tab' const Root = styled.div`` const TabsContainer = styled.div` display: flex; - margin-bottom: var(--grid-unit); + margin-bottom: ${th('gridUnit')}; ` const Title = styled.div` - border-bottom: var(--border-width) var(--border-style) var(--color-border); - padding: var(--sub-grid-unit) 1em; + border-bottom: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')}; + padding: ${th('subGridUnit')} 1em; ` const TabContainer = styled.div`` const Content = styled.div`` diff --git a/packages/component-review/src/components/decision/DecisionReview.js b/packages/component-review/src/components/decision/DecisionReview.js index 31e7d5575befb74ee17d7ac5663a4b51450122f3..74f4403c076ebff4a609b381e0f466e4d1afd105 100644 --- a/packages/component-review/src/components/decision/DecisionReview.js +++ b/packages/component-review/src/components/decision/DecisionReview.js @@ -2,7 +2,7 @@ import React from 'react' import styled from 'styled-components' import { compose, withState, withHandlers } from 'recompose' import { withJournal } from 'xpub-journal' -import { Button } from '@pubsweet/ui' +import { Button, th } from '@pubsweet/ui' import Review from '../review/Review' const ToggleReview = ({ open, toggle }) => ( @@ -67,7 +67,7 @@ const DecisionReview = ({ review, reviewer, journal, open, toggleOpen }) => { const { name, ordinal } = reviewer const Root = styled.div` - margin-bottom: var(--grid-unit); + margin-bottom: ${th('gridUnit')}; ` const ReviewBody = styled.div` diff --git a/packages/component-review/src/components/metadata/ReviewMetadata.js b/packages/component-review/src/components/metadata/ReviewMetadata.js index b01ade760fdadf6636bd74df424ceea703666890..b83217286654c8e36748f9cecd70fedfb52eea54 100644 --- a/packages/component-review/src/components/metadata/ReviewMetadata.js +++ b/packages/component-review/src/components/metadata/ReviewMetadata.js @@ -1,7 +1,7 @@ import React from 'react' import styled from 'styled-components' -import { File } from '@pubsweet/ui' +import { File, th } from '@pubsweet/ui' const Root = styled.div`` @@ -13,7 +13,7 @@ const Table = styled.table` const Heading = styled.th` font-weight: inherit; - color: var(--color-quiet); + color: ${th('colorQuiet')}; padding: 0 1em 0 0; ` diff --git a/packages/component-review/src/components/review/Review.js b/packages/component-review/src/components/review/Review.js index 19373f564abae46397c754e892f5fb051caf9101..a8729f82fab0b0196660c862fcb8cad2e597b745 100644 --- a/packages/component-review/src/components/review/Review.js +++ b/packages/component-review/src/components/review/Review.js @@ -1,11 +1,11 @@ import React from 'react' import styled from 'styled-components' import { NoteViewer } from 'xpub-edit' -import { Attachment } from '@pubsweet/ui' +import { Attachment, th } from '@pubsweet/ui' const Heading = styled.div`` const Note = styled.div` - font-size: var(--font-size-base-small); + font-size: ${th('fontSizeBaseSmall')}; ` const Recommendation = Note.extend`` const Content = styled.div`` diff --git a/packages/component-review/src/components/reviewers/Reviewer.js b/packages/component-review/src/components/reviewers/Reviewer.js index 6e78c37dbb15fd275aa74ae0b45025580882ae5d..00650b43484a3ed7f14134fe9244a4a48c877a82 100644 --- a/packages/component-review/src/components/reviewers/Reviewer.js +++ b/packages/component-review/src/components/reviewers/Reviewer.js @@ -2,16 +2,16 @@ import React from 'react' import styled from 'styled-components' import { map } from 'lodash' import Moment from 'react-moment' -import { Avatar, Button } from '@pubsweet/ui' +import { Avatar, Button, th } from '@pubsweet/ui' const Root = styled.div` - font-family: var(--font-reviewer); - margin-right: var(--sub-grid-unit); - padding: var(--sub-grid-unit); + font-family: ${th('fontReviewer')}; + margin-right: ${th('subGridUnit')}; + padding: ${th('subGridUnit')}; ` const Event = styled.div` - font-size: var(--font-size-base-small); + font-size: ${th('fontSizeBaseSmall')}; ` const ordinalLetter = ordinal => diff --git a/packages/component-review/src/components/reviewers/Reviewers.js b/packages/component-review/src/components/reviewers/Reviewers.js index 178b5691a7b3bc7bc50e8e73f0c3862b3d664aa8..981c295ac812fe5b090364a95a094fb54350e095 100644 --- a/packages/component-review/src/components/reviewers/Reviewers.js +++ b/packages/component-review/src/components/reviewers/Reviewers.js @@ -1,9 +1,10 @@ import React from 'react' import styled from 'styled-components' +import { th } from '@pubsweet/ui' const Root = styled.div` display: flex; - margin-top: var(--grid-unit); + margin-top: ${th('gridUnit')}; ` const Form = styled.div`` const ReviewersList = styled.div` diff --git a/packages/component-submit/src/components/Confirm.js b/packages/component-submit/src/components/Confirm.js index 31d56b8c05ae76e7c02e3ad176a4ea51084431dc..19d246504f923c3a359acb203c0db99d9c8a98c3 100644 --- a/packages/component-submit/src/components/Confirm.js +++ b/packages/component-submit/src/components/Confirm.js @@ -1,26 +1,26 @@ import React from 'react' import styled from 'styled-components' -import { Button, PlainButton } from '@pubsweet/ui' +import { Button, PlainButton, th } from '@pubsweet/ui' import { Heading1 } from '../styles' const Wrapper = styled.div` - background: var(--color-background); - color: var(--color-text); - line-height: var(--font-line-height); + background: ${th('colorBackground')}; + color: ${th('colorText')}; + line-height: ${th('fontLineHeight')}; max-height: 100%; max-width: 60em; overflow-y: auto; - padding: calc(var(--grid-unit) * 2); + padding: calc(${th('gridUnit')} * 2); ` const Paragraph = styled.p` - font-size: var(--font-size-base); - margin-bottom: var(--grid-unit); + font-size: ${th('fontSizeBase')}; + margin-bottom: ${th('gridUnit')}; width: 55ch; ` const Divider = styled.span` - margin: 0 calc(var(--grid-unit) / 2); + margin: 0 calc(${th('gridUnit')} / 2); ` const Confirm = ({ toggleConfirming }) => ( diff --git a/packages/component-submit/src/components/Declarations.js b/packages/component-submit/src/components/Declarations.js index 078282fea83aad00d15254ae0e5bc145e1ef8f77..f90382f0530facbbc144931f60b82448de3210b9 100644 --- a/packages/component-submit/src/components/Declarations.js +++ b/packages/component-submit/src/components/Declarations.js @@ -1,7 +1,7 @@ import React from 'react' import { css } from 'styled-components' import { FormSection } from 'redux-form' -import { ValidatedField, RadioGroup } from '@pubsweet/ui' +import { ValidatedField, RadioGroup, th } from '@pubsweet/ui' import { withJournal } from 'xpub-journal' import { required } from 'xpub-validators' import { Section, Legend } from '../styles' @@ -15,7 +15,7 @@ const hoverStyles = css` ` const DeclarationSection = Section.extend` - margin: calc(var(--grid-unit) * 2) 0; + margin: calc(${th('gridUnit')} * 2) 0; display: flex; justify-content: space-between; diff --git a/packages/component-submit/src/components/Submit.js b/packages/component-submit/src/components/Submit.js index 16e3ef5ffb7d72b6e780bde5a71caa03f9b24e7b..4b8d62a8e8656b18cca9ab0c597a3b7beb454794 100644 --- a/packages/component-submit/src/components/Submit.js +++ b/packages/component-submit/src/components/Submit.js @@ -1,7 +1,7 @@ import React from 'react' import styled from 'styled-components' import { Link } from 'react-router-dom' -import { Button } from '@pubsweet/ui' +import { Button, th } from '@pubsweet/ui' import Metadata from './Metadata' import Declarations from './Declarations' import Suggestions from './Suggestions' @@ -12,7 +12,7 @@ import { Heading1 } from '../styles' // import Validots from './Validots' const Wrapper = styled.div` - font-family: var(--font-interface); + font-family: ${th('fontInterface')}; line-height: 1.3; margin: auto; max-width: 60em; diff --git a/packages/component-submit/src/components/Suggestions.js b/packages/component-submit/src/components/Suggestions.js index e1253e4efad5fb5a913384227697341b8cb15bd3..7d33c1d93467cb7644f91a2ab9e3323245cc748b 100644 --- a/packages/component-submit/src/components/Suggestions.js +++ b/packages/component-submit/src/components/Suggestions.js @@ -1,6 +1,6 @@ import React from 'react' import { FormSection } from 'redux-form' -import { TextField, ValidatedField } from '@pubsweet/ui' +import { TextField, ValidatedField, th } from '@pubsweet/ui' import { join, split } from 'xpub-validators' import { Section, Legend } from '../styles' @@ -25,7 +25,7 @@ const OpposedEditorInput = input => ( const SubLegend = Legend.extend` font-weight: normal; - margin-top: var(--grid-unit); + margin-top: ${th('gridUnit')}; ` const Suggestions = ({ readonly }) => ( diff --git a/packages/component-submit/src/components/Validot.js b/packages/component-submit/src/components/Validot.js index 6762611b9b9423821ca4742742bf61759d156e07..b090bdeb59dedef101eb206a66c26ff1658aef7d 100644 --- a/packages/component-submit/src/components/Validot.js +++ b/packages/component-submit/src/components/Validot.js @@ -1,4 +1,5 @@ import styled from 'styled-components' +import { th } from '@pubsweet/ui' // TODO: use the parent validots node instead of document // TODO: highlight the scrolled-to element @@ -7,7 +8,7 @@ const scrollIntoView = id => document.getElementById(id).scrollIntoView() const Validot = styled.div.attrs({ onClick: props => () => scrollIntoView(props.input.name), })` - background: var(--color-circle); + background: ${th('colorCircle')}; border: 3px solid white; border-radius: 100%; cursor: pointer; @@ -19,7 +20,7 @@ const Validot = styled.div.attrs({ &:hover::before { - background: var(--color-circle); + background: ${th('colorCircle')}; border-radius: 50%; content: ' '; height: 25px; @@ -31,7 +32,7 @@ const Validot = styled.div.attrs({ } &:hover::after { - color: var(--color-circle); + color: ${th('colorCircle')}; content: '${props => props.message}'; display: block; font-size: 0.8em; diff --git a/packages/component-submit/src/styles/index.js b/packages/component-submit/src/styles/index.js index 348510f3c0c5a5645ef24c5cf49d790ca9c319e5..ba6285d08482ef25b2dd3337d5337ba998589c6a 100644 --- a/packages/component-submit/src/styles/index.js +++ b/packages/component-submit/src/styles/index.js @@ -1,16 +1,17 @@ import styled from 'styled-components' +import { th } from '@pubsweet/ui' export const Heading1 = styled.h1` - margin: 0 0 var(--grid-unit); - font-size: var(--font-size-heading-1); + margin: 0 0 ${th('gridUnit')}; + font-size: ${th('fontSizeHeading1')}; ` export const Section = styled.div` - margin: calc(var(--grid-unit) * 2) 0; + margin: calc(${th('gridUnit')} * 2) 0; ` export const Legend = styled.div` - font-size: var(--font-size-base); + font-size: ${th('fontSizeBase')}; font-weight: 600; - margin-bottom: ${({ space }) => space && `var(--sub-grid-unit)`}; + margin-bottom: ${({ space, theme }) => space && theme.subGridUnit}; ` diff --git a/packages/xpub-connect/src/components/ConnectPage.js b/packages/xpub-connect/src/components/ConnectPage.js index 748bfc300ee87051534d63e3b5010085cc9b2f67..87bd11df9e2f67b8b8a035319d81e77e92351996 100644 --- a/packages/xpub-connect/src/components/ConnectPage.js +++ b/packages/xpub-connect/src/components/ConnectPage.js @@ -3,9 +3,10 @@ import styled from 'styled-components' import { compose } from 'recompose' import { connect } from 'react-redux' import { withRouter } from 'react-router-dom' +import { th } from '@pubsweet/ui' const ErrorMessage = styled.div` - color: var(--color-error); + color: ${th('colorError')}; ` const LoadingMessage = styled.div.attrs({ diff --git a/packages/xpub-edit/src/components/MenuBar.js b/packages/xpub-edit/src/components/MenuBar.js index 05f6e5df0f553733d255cbcba3dde7372cc99880..dd1247ea5fb018193bad37092aac1064198878df 100644 --- a/packages/xpub-edit/src/components/MenuBar.js +++ b/packages/xpub-edit/src/components/MenuBar.js @@ -1,6 +1,7 @@ import React from 'react' import styled from 'styled-components' import map from 'lodash/map' +import { th } from '@pubsweet/ui' import MenuButton from './MenuButton' const Wrapper = styled.div` @@ -11,7 +12,7 @@ const Wrapper = styled.div` ` const Legend = styled.div` - font-size: var(--font-size-base); + font-size: ${th('fontSizeBase')}; margin-right: 10px; ` diff --git a/packages/xpub-edit/src/components/MenuButton.js b/packages/xpub-edit/src/components/MenuButton.js index 5740d3e3d66d4f0c869fa24009c750b729a9b353..2b4e18088d04a567579b324639393818c19d5ce8 100644 --- a/packages/xpub-edit/src/components/MenuButton.js +++ b/packages/xpub-edit/src/components/MenuButton.js @@ -1,8 +1,9 @@ import React from 'react' import styled from 'styled-components' +import { th } from '@pubsweet/ui' const Button = styled.button` - background: var(--color-background); + background: ${th('colorBackground')}; border: none; border-bottom: 2px solid transparent; color: #777; @@ -13,8 +14,8 @@ const Button = styled.button` padding: 0; &:hover { - border-bottom-color: var(--color-primary); - color: var(--color-primary); + border-bottom-color: ${th('colorPrimary')}; + color: ${th('colorPrimary')}; } border-bottom-color: ${({ active }) => active && 'black'}; diff --git a/packages/xpub-edit/src/components/StyledEditor.js b/packages/xpub-edit/src/components/StyledEditor.js index cd694d10001c2a3b38855b220dda0041d8ef88c0..88c94a358982b646b695c8c4929a0e42c69c3dc0 100644 --- a/packages/xpub-edit/src/components/StyledEditor.js +++ b/packages/xpub-edit/src/components/StyledEditor.js @@ -1,18 +1,19 @@ import styled from 'styled-components' +import { th } from '@pubsweet/ui' import Editor from './Editor' const StyledEditor = styled(Editor).attrs({ basePlaceholderClassName: 'placeholder', })` - font-family: var(--font-writing); - font-size: var(--font-size-base); + font-family: ${th('fontWriting')}; + font-size: ${th('fontSizeBase')}; line-height: 1.8; min-height: 1em; - margin-bottom: var(--grid-unit); + margin-bottom: ${th('gridUnit')}; - border: var(--border-width) var(--border-style) var(--color-border); - border-radius: var(--border-radius); - padding: calc(var(--grid-unit) / 2); + border: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')}; + border-radius: ${th('borderRadius')}; + padding: calc(${th('gridUnit')} / 2); &:focus { outline: none; @@ -55,8 +56,8 @@ const StyledEditor = styled(Editor).attrs({ } .placeholder { - color: var(--color-text-placeholder); - font-family: var(--font-interface); + color: ${th('colorTextPlaceholder')}; + font-family: ${th('fontInterface')}; height: 0; pointer-events: none; } diff --git a/packages/xpub-edit/src/components/withStyles.js b/packages/xpub-edit/src/components/withStyles.js index ec945115a9829bc91ee28538dddf3c6b10e6fefe..b03da0f7c6c2c2b4d51c7f3029d7730f4be6677d 100644 --- a/packages/xpub-edit/src/components/withStyles.js +++ b/packages/xpub-edit/src/components/withStyles.js @@ -1,4 +1,5 @@ import styled, { css } from 'styled-components' +import { th } from '@pubsweet/ui' const contentStyles = css` hr { @@ -46,23 +47,23 @@ const contentStyles = css` export const withEditorStyle = Component => styled(Component).attrs({ basePlaceholderClassName: 'placeholder', })` - font-family: var(--font-writing); - font-size: var(--font-size-base); + font-family: ${th('fontWriting')}; + font-size: ${th('fontSizeBase')}; line-height: 1.8; min-height: 1em; - margin-bottom: var(--grid-unit); + margin-bottom: ${th('gridUnit')}; - border: var(--border-width) var(--border-style) var(--color-border); - border-radius: var(--border-radius); - padding: calc(var(--grid-unit) / 2); + border: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')}; + border-radius: ${th('borderRadius')}; + padding: calc(${th('gridUnit')} / 2); &:focus { outline: none; } .placeholder { - color: var(--color-text-placeholder); - font-family: var(--font-interface); + color: ${th('colorTextPlaceholder')}; + font-family: ${th('fontInterface')}; height: 0; pointer-events: none; } @@ -75,10 +76,10 @@ export const withEditorStyle = Component => styled(Component).attrs({ ` export const withViewerStyle = Component => styled(Component)` - font-family: var(--font-reading); - font-size: var(--font-size-base); + font-family: ${th('fontReading')}; + font-size: ${th('fontSizeBase')}; line-height: 1.8; - margin-bottom: var(--grid-unit); + margin-bottom: ${th('gridUnit')}; ${contentStyles}; `