Fix theme colors not loaded and upgrade some dependencies (fix #27)

package.json

@@ -6,8 +6,8 @@
   "license": "GPL-3.0",
   "devDependencies": {
     "ava": "^2.2.0",
-    "electron": "^8.0.1",
+    "electron": "^9.0.4",
-    "electron-devtools-installer": "^2.2.4",
+    "electron-devtools-installer": "^3.0.0",
     "electron-packager": "^14.2.1",
     "eslint-config-xo-overrides": "^1.4.0",
     "nyc": "^14.1.1",
@@ -28,23 +28,24 @@
   "dependencies": {
     "@futpib/paclient": "^0.0.10",
     "@futpib/react-electron-menu": "^0.3.1",
-    "bluebird": "^3.5.5",
+    "@jakejarrett/gtk-theme": "^1.1.3",
+    "bluebird": "^3.7.2",
     "camelcase": "^5.3.1",
-    "d3": "^5.9.7",
+    "d3": "^5.16.0",
-    "electron-store": "^5.1.1",
+    "electron-store": "^5.2.0",
     "freedesktop-icons": "^0.1.0",
     "ini": "^1.3.5",
     "mathjs": "^6.0.4",
-    "pixi.js": "^5.1.1",
+    "pixi.js": "^5.2.4",
     "r-dom": "^2.4.0",
     "ramda": "^0.26.1",
-    "react": "^16.9.0",
+    "react": "^16.13.1",
-    "react-digraph": "^6.5.0",
+    "react-digraph": "^6.7.1",
-    "react-dom": "^16.9.0",
+    "react-dom": "^16.13.1",
     "react-hotkeys": "^1",
-    "react-modal": "^3.9.1",
+    "react-modal": "^3.11.2",
-    "react-redux": "^7.1.0",
+    "react-redux": "^7.2.0",
-    "react-transition-group": "^4.2.2",
+    "react-transition-group": "^4.4.1",
     "recompose": "^0.30.0",
     "redux": "^4.0.5",
     "redux-actions": "^2.6.5",

renderer.js

@@ -22,6 +22,8 @@ const { VolumePeaksProvider, VolumePeaksConsumer } = require('./components/volum
 
 const theme = require('./utils/theme');
 
+console.log({ theme });
+
 const Root = () => r(ReduxProvider, {
 	store: createStore(),
 }, r(VolumePeaksProvider, {
@@ -48,6 +50,7 @@ const Root = () => r(ReduxProvider, {
 ]))))));
 
 Object.entries(theme.colors).forEach(([ key, value ]) => {
+	console.log(key, value);
 	document.body.style.setProperty('--' + key, value);
 });
 

utils/theme/index.js

@@ -1,6 +1,10 @@
 
 const camelCase = require('camelcase');
 
+const {
+	map,
+} = require('ramda');
+
 const theme = require('../gtk-theme');
 
 const colors = require('./default-colors.json');
@@ -9,7 +13,19 @@ theme.css.replace(/@define-color\s+([\w_]+?)\s+(.+?);/g, (_, name, value) => {
 	colors[camelCase(name)] = value;
 });
 
+const resolveColor = (value, depth = 0) => {
+	if (depth > 3) {
+		return value;
+	}
+
+	if (value && value.startsWith('@')) {
+		return resolveColor(colors[camelCase(value.slice(1))], depth + 1);
+	}
+
+	return value;
+}
+
 module.exports = {
 	iconThemeNames: theme.iconThemeNames,
-	colors,
+	colors: map(resolveColor, colors),
 };