#33 Move the node color options to application theme

MetaCell · Jul 29, 2022 · 00aeb57 · 00aeb57
1 parent da023d4
commit 00aeb57
Showing 1 changed file with 62 additions and 1 deletion.
diff --git a/src/theme.js b/src/theme.js
@@ -21,7 +21,19 @@ const {
   progressBg,
   progressBar,
   progressShadow,
-  switchShadow
+  switchShadow,
+  nodeRedBackgroundColor,
+  nodeRedBorderColor,
+  nodeRedBoxShadow,
+  nodeRedTextColor,
+  nodeBlueBackgroundColor,
+  nodeBlueBoxShadow,
+  nodeBlueBorderColor,
+  nodeBlueTextColor,
+  nodeGrayBoxShadow,
+  nodeGrayBackgroundColor,
+  nodeGrayBorderColor,
+  nodeGrayTextColor,
 } = vars;
 
 const theme = {
@@ -237,6 +249,55 @@ const theme = {
         },
       },
     },
+
+    MuiCssBaseline: {
+      styleOverrides: `
+        .primary-node.node-red {
+          background: ${nodeRedBackgroundColor};
+          box-shadow: ${nodeRedBoxShadow};
+          border-color: ${nodeRedBorderColor};
+        }
+
+        .primary-node.node-red .primary-node_header p {
+          color: ${nodeRedTextColor};
+        }
+
+        .primary-node.node-red .node-button .icon {
+          background: ${nodeRedBackgroundColor};
+          border-color: ${nodeRedBorderColor};
+        }
+
+        .primary-node.node-blue {
+          background: ${nodeBlueBackgroundColor};
+          box-shadow: ${nodeBlueBoxShadow};
+          border-color: ${nodeBlueBorderColor};
+        }
+
+        .primary-node.node-blue .primary-node_header p {
+          color: ${nodeBlueTextColor};
+        }
+
+        .primary-node.node-blue .node-button .icon {
+          background: ${nodeBlueBackgroundColor};
+          border-color: ${nodeBlueBorderColor};
+        }
+
+        .primary-node.node-gray {
+          background: ${nodeGrayBackgroundColor};
+          box-shadow: ${nodeGrayBoxShadow};
+          border-color: ${nodeGrayBorderColor};
+        }
+
+        .primary-node.node-gray .primary-node_header p {
+          color: ${nodeGrayTextColor};
+        }
+
+        .primary-node.node-gray .node-button .icon {
+          background: ${nodeGrayBackgroundColor};
+          border-color: rgba(130, 130, 130, 0.2);
+        }
+      `,
+    },
   },
 };