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};
 `