Move CSS variables into xpub-theme

packages/component-app/src/components/App.local.scss

-:global(:root) {
-  // brand colors
-  --color-primary: #0d78f2;
-
-  // colors for interactions
-  --color-danger: #ff2d1a;
-  --color-valid: #00bf05;
-  --color-warning: #ee7600;
-
-  // fonts for the different views
-  --font-author: "Vollkorn", serif;
-  --font-reviewer: "Kocourier Prime Sans", monospace;
-  --font-interface: "Fira Sans Condensed", sans-serif;
-  --font-mono: "Fira Mono", monospace;
-}
-
 .root {
   font-family: "Fira Sans", sans-serif;
 }

packages/xpub-collabra/app/app.js

@@ -9,6 +9,7 @@ import { JournalProvider } from 'xpub-journal'
 import * as journal from './config/journal'
 import Root from './routes'
 import 'xpub-fonts'
+import 'xpub-theme'
 
 const history = createHistory()
 const store = configureStore(history, {})

packages/xpub-collabra/package.json

@@ -40,6 +40,7 @@
     "xpub-fonts": "^0.0.2",
     "xpub-journal": "^0.0.2",
     "xpub-selectors": "^0.0.2",
+    "xpub-theme": "^0.0.2",
     "xpub-ui": "^0.0.2"
   },
   "devDependencies": {

packages/xpub-styleguide/package.json

@@ -14,7 +14,8 @@
     "redux": "^3.6.0",
     "redux-form": "^7.0.3",
     "xpub-fonts": "^0.0.2",
-    "xpub-journal": "^0.0.2"
+    "xpub-journal": "^0.0.2",
+    "xpub-theme": "^0.0.2"
   },
   "devDependencies": {
     "babel-core": "^6.26.0",

packages/xpub-styleguide/src/components/Wrapper.js

@@ -6,6 +6,8 @@ import { JournalProvider } from 'xpub-journal'
 import * as journal from '../config/journal'
 
 import 'xpub-fonts'
+import 'xpub-theme'
+
 import classes from './Wrapper.local.scss'
 
 const rootReducer = combineReducers({

packages/xpub-styleguide/src/components/Wrapper.local.scss

-:global(:root) {
-  // brand colors
-  --color-primary: #0d78f2;
-
-  // colors for interactions
-  --color-danger: #ff2d1a;
-  --color-warning: #ee7600;
-  --color-valid: #00bf05;
-  --color-pending: #aaa;
-
-  // fonts for the different views
-  --font-author: 'Vollkorn', serif;
-  --font-reviewer: 'Kocourier Prime Sans', monospace;
-  --font-interface: 'Fira Sans Condensed', sans-serif;
-  --font-mono: 'Fira Mono', monospace;
-}
-
 :global(body) {
   overflow: hidden;
 }

packages/xpub-theme/package.json

+{
+  "name": "xpub-theme",
+  "version": "0.0.2",
+  "description": "CSS for xpub apps and styleguides",
+  "main": "src",
+  "license": "MIT"
+}

packages/xpub-theme/src/index.js

+import './variables.css'

packages/xpub-theme/src/variables.css

+:root {
+  /* brand colors */
+  --color-primary: #0d78f2;
+
+  /* colors for interactions */
+  --color-danger: #ff2d1a;
+  --color-warning: #ee7600;
+  --color-valid: #00bf05;
+  --color-pending: #aaa;
+
+  /* fonts for the different views */
+  --font-author: 'Vollkorn', serif;
+  --font-reviewer: 'Kocourier Prime Sans', monospace;
+  --font-interface: 'Fira Sans Condensed', sans-serif;
+  --font-mono: 'Fira Mono', monospace;
+}

packages/xpub-ui/package.json

@@ -20,8 +20,7 @@
     "react-tag-autocomplete": "^5.4.1",
     "recompose": "^0.25.0",
     "redux": "^3.6.0",
-    "redux-form": "^7.0.3",
-    "xpub-fonts": "^0.0.2"
+    "redux-form": "^7.0.3"
   },
   "devDependencies": {
     "babel-core": "^6.26.0",